StableOne Design System

Brand Guide für eine ruhige, hochwertige Pferdeplattform.

StableOne verbindet professionelle Verkaufssoftware mit einem hochwertigen Pferdeportal. Das Design soll einfach, vertrauensvoll und edel wirken, ohne verspielt oder überladen zu werden.

01

Fonts

Heading

Playfair Display

Für Hero-Titel, emotionale Editorial-Headlines und hochwertige Markenmomente. Sparsam einsetzen, damit die App ruhig bleibt.

Interface

Inter / SF Pro

Für Navigation, Formulare, Tabellen, Karten und längere Texte. Klare Lesbarkeit ist wichtiger als dekorative Wirkung.

02

Farben

Basis

Ivory--brand-app-bg · #f7f5f1
Charcoal--brand-ink · #1a1a1a
Stone--brand-stone · #e8e6e2
Mist--brand-mist · #f1f1ef

Akzent

Stable Gold--brand-gold · #c8a35b
Gold Hover--brand-gold-hover · #b8934b
Gold Bright--brand-gold-bright · #d7b36b
Gold Text--brand-gold-text · #a9843d

Status

Success--status-success · #3ba776
Warning--status-warning · #e7a941
Error--status-error · #d35d5d
Info--status-info · #5c8dff

03

Abstände & Radien

Spacing Scale

XS4 pxIcon-Abstand, kleine Labels
S8 pxInline-Gaps, Chips
M12-16 pxFormulargruppen, Listen
L20-24 pxCards, Toolflächen
XL32-48 pxSektionen

Radii

Buttons

16 px

Inputs

18 px

Bilder

20 px

Cards

24 px

Dialoge

28 px

Hero-Flächen

32 px

04

Komponenten

Grundregeln

Cards bleiben ruhig, hell und maximal 24 px gerundet.

Gold ist Akzent, nicht Hintergrund für ganze Seiten.

Primäre Aktionen nutzen Charcoal oder Stable Gold.

Formulare sollen klar gruppiert sein und sofortiges Feedback geben.

Bilder zeigen echte Pferde, Ställe oder konkrete Produktzustände.

AktivReserviertPremium

05

Mockups

Pferdekarte

PRE Wallach mit Ausstrahlung

Ruhige Bildflächen, klare Merkmale, ein eindeutiger nächster Schritt.

Social Feed

Beitrag aus dem Stall

Update

Heute haben wir neue Bilder von unserem Nachwuchspferd aufgenommen. Das Design lässt Inhalt und Bild wirken, ohne die Bedienung zu überfrachten.

Likes
Kommentare
Nachricht
STABLE ONE

Der Brand Guide ist eine lebende Referenz. Neue Features sollen zuerst gegen diese Grundlagen geprüft werden, bevor neue Farben, Abstände oder Komponenten entstehen.

StableOne Pakete ansehen