Farben

Jedes Projekt definiert 11 semantische Farb-Tokens. Die Components nutzen ausschließlich diese Tokens — dadurch funktioniert ein einziges Design-System für beliebig viele Marken.

So funktioniert es

Statt Farben direkt in Components zu schreiben (z.B. bg-blue-500), verwenden wir semantische Namen wie bg-brand-primary. Das bedeutet: wechselt die Marke, ändern sich nur die Token-Werte in einer einzigen Datei — alle Components passen sich automatisch an.

Beispiel: Token-Definition in colors.css

@theme {
  --color-brand-primary: oklch(60% 0.2 260);    /* Blau */
  --color-brand-surface: oklch(99% 0 0);         /* Fast-Weiß */
  --color-brand-foreground: oklch(20% 0.02 260); /* Dunkles Grau */
  /* ... weitere Tokens */
}

Alle Brand-Tokens

Diese 11 Tokens müssen in jedem Projekt definiert werden. Fehlt ein Token, warnt das CLI-Tool automatisch.

Primary

--color-brand-primary

Hauptfarbe für Buttons, Links, Akzente. Der stärkste Wiedererkennungswert der Marke.

Tailwind: bg-brand-primary, text-brand-primary, border-brand-primary

Primary Hover

--color-brand-primary-hover

Hover-Zustand der Primary-Farbe. Etwas dunkler für sichtbares Feedback.

Tailwind: bg-brand-primary-hover, text-brand-primary-hover, border-brand-primary-hover

Secondary

--color-brand-secondary

Zweite Markenfarbe. Für weniger prominente Aktionen oder ergänzende Akzente.

Tailwind: bg-brand-secondary, text-brand-secondary, border-brand-secondary

Foreground

--color-brand-foreground

Standard-Textfarbe. Muss auf allen Surface-Farben gut lesbar sein (Kontrast >= 4.5:1).

Tailwind: bg-brand-foreground, text-brand-foreground, border-brand-foreground

Muted

--color-brand-muted

Dezenter Text für Hinweise, Platzhalter und sekundäre Informationen.

Tailwind: bg-brand-muted, text-brand-muted, border-brand-muted

Surface

--color-brand-surface

Seitenhintergrund. Meistens Weiß oder ein sehr helles Grau.

Tailwind: bg-brand-surface, text-brand-surface, border-brand-surface

Surface Alt

--color-brand-surface-alt

Alternativer Hintergrund für Cards, Sections und abgesetzte Bereiche.

Tailwind: bg-brand-surface-alt, text-brand-surface-alt, border-brand-surface-alt

Border

--color-brand-border

Linie für Rahmen, Trenner und Abgrenzungen zwischen Bereichen.

Tailwind: bg-brand-border, text-brand-border, border-brand-border

Destructive

--color-brand-destructive

Warnfarbe für Fehler, Löschen-Aktionen und kritische Zustande.

Tailwind: bg-brand-destructive, text-brand-destructive, border-brand-destructive

Success

--color-brand-success

Erfolgsfarbe für Bestätigungen und positive Status-Anzeigen.

Tailwind: bg-brand-success, text-brand-success, border-brand-success

Focus

--color-brand-focus

Farbe des Focus-Rings. Wichtig für Barrierefreiheit bei Tastaturnavigation.

Tailwind: bg-brand-focus, text-brand-focus, border-brand-focus

Farbformat: OKLCH

Alle Farben nutzen OKLCH statt Hex oder HSL. Der Vorteil: gleichmäßige Helligkeit über verschiedene Farbtone hinweg. Ein Blau mit 60% Lightness sieht genauso hell aus wie ein Gelb mit 60%. Das macht konsistentes Design deutlich einfacher.

OKLCH-Aufbau

oklch(Lightness% Chroma Hue)

Lightness (0-100%): Wie hell die Farbe ist
Chroma (0-0.4): Wie gesaettigt/bunt die Farbe ist
Hue (0-360): Der Farbton (0=Rot, 120=Grün, 240=Blau)