Semantische Farben
Semantische Farben kommunizieren Status und Bedeutung in der Benutzeroberfläche. Jede Farbe hat eine feste Bedeutung — konsistent über alle Komponenten.
Statusfarben
| Status | Farbe | HEX | Hintergrund | Anwendung |
|---|---|---|---|---|
| Success | Grün | #22C55E | #DCFCE7 | Erfolgsmeldungen, Bestätigungen |
| Warning | Gelb | #EAB308 | #FEF9C3 | Warnungen, Hinweise |
| Error | Rot | #EF4444 | #FEE2E2 | Fehler, kritische Meldungen |
| Info | Blau | #3B82F6 | #DBEAFE | Informationen, Tipps |
Die Triade -100 / -500 / -700
Jede Statusfarbe folgt einer dreistufigen Token-Triade, die den Standard-Anwendungsfall "leicht eingefärbter Hintergrund mit dunklem Text gleichen Hues" deckt — ohne dass Designer/Entwickler eigene Kombinationen raten müssen.
| Stufe | Rolle | Verwendung |
|---|---|---|
-100 | Surface | Toast-Background, Callout-Body, Badge-Fill auf hellem Theme |
-500 | Primärfarbe | Icon, Status-Dot, Border, Ring, Fokus-Outline |
-700 | Lesbarer Text | AAA-konformer Text auf der -100-Surface |
Vollständige Werte
| Token | HEX | OKLCH | Vorschau |
|---|---|---|---|
--success-100 | #DCFCE7 | oklch(94% 0.06 150) | |
--success-500 | #22C55E | oklch(70% 0.16 150) | |
--success-700 | #15803D | oklch(50% 0.14 150) | |
--warning-100 | #FEF9C3 | oklch(95% 0.07 90) | |
--warning-500 | #EAB308 | oklch(78% 0.16 80) | |
--warning-700 | #A16207 | oklch(58% 0.14 75) | |
--error-100 | #FEE2E2 | oklch(94% 0.04 25) | |
--error-500 | #EF4444 | oklch(64% 0.22 25) | |
--error-700 | #B91C1C | oklch(50% 0.20 25) | |
--info-100 | #DBEAFE | oklch(94% 0.04 230) | |
--info-500 | #3B82F6 | oklch(70% 0.13 230) | |
--info-700 | #1D4ED8 | oklch(48% 0.16 255) |
Warum genau diese drei Stufen?
Mit -100-Background und -700-Text deckt eine Triade in der Praxis ~80 % aller Status-Komponenten ab: Badges, Toasts, Callouts, Form-Validierungs-Inline-Hints, Status-Cells in Tabellen. -500 liefert die Mittel-Helligkeit für Icons, Status-Dots und Borders. Weitere Zwischenstufen sind selten nötig — wenn doch, lassen sie sich aus der OKLCH-Skalen-Methodik ableiten (Methodik).
Anwendungsbeispiele
Badges
Semantische Farben werden in Badges als Kombination aus hellem Hintergrund + dunkler Textfarbe der jeweiligen Farbe verwendet:
Hinweis-Boxen
Farbpaare (Hintergrund + Text)
| Status | Hintergrund | Textfarbe | Vorschau |
|---|---|---|---|
| Success | #DCFCE7 | #15803D | Aktiv |
| Warning | #FEF9C3 | #A16207 | Ausstehend |
| Error | #FEE2E2 | #B91C1C | Kritisch |
| Info | #DBEAFE | #1D4ED8 | Standard |
CSS Custom Properties
Triade-Tokens (HEX)
Die kanonischen Tokens folgen dem <status>-<step>-Schema und sind direkt verwendbar in jeder modernen UI-Komponente.
:root {
/* Success */
--success-100: #DCFCE7; --success-500: #22C55E; --success-700: #15803D;
/* Warning */
--warning-100: #FEF9C3; --warning-500: #EAB308; --warning-700: #A16207;
/* Error */
--error-100: #FEE2E2; --error-500: #EF4444; --error-700: #B91C1C;
/* Info */
--info-100: #DBEAFE; --info-500: #3B82F6; --info-700: #1D4ED8;
}Triade-Tokens (OKLCH-Parallele)
:root {
--success-100-oklch: oklch(94% 0.06 150);
--success-500-oklch: oklch(70% 0.16 150);
--success-700-oklch: oklch(50% 0.14 150);
--warning-100-oklch: oklch(95% 0.07 90);
--warning-500-oklch: oklch(78% 0.16 80);
--warning-700-oklch: oklch(58% 0.14 75);
--error-100-oklch: oklch(94% 0.04 25);
--error-500-oklch: oklch(64% 0.22 25);
--error-700-oklch: oklch(50% 0.20 25);
--info-100-oklch: oklch(94% 0.04 230);
--info-500-oklch: oklch(70% 0.13 230);
--info-700-oklch: oklch(48% 0.16 255);
}Legacy-Aliase (Abwärtskompatibilität)
Bestehende Komponenten verwenden teilweise die älteren --brand-*-Aliase. Diese bleiben für Abwärtskompatibilität verfügbar und mappen auf die kanonische Triade:
:root {
--brand-success: var(--success-500);
--brand-warning: var(--warning-500);
--brand-error: var(--error-500);
--brand-info: var(--info-500);
--brand-success-bg: var(--success-100);
--brand-warning-bg: var(--warning-100);
--brand-error-bg: var(--error-100);
--brand-info-bg: var(--info-100);
--brand-success-text: var(--success-700);
--brand-warning-text: var(--warning-700);
--brand-error-text: var(--error-700);
--brand-info-text: var(--info-700);
}Empfehlung für neue Komponenten
Verwenden Sie die kanonische Triade (--success-100/-500/-700 etc.) — sie ist die Single Source of Truth und lässt sich in OKLCH-Notation ohne Alias-Indirektion beziehen. Die --brand-*-Aliase bleiben für Bestand erhalten, sollten aber in Neuentwicklung nicht mehr direkt referenziert werden.