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 |
Anwendungsbeispiele
Badges
Semantische Farben werden in Badges als Kombination aus hellem Hintergrund + dunkler Textfarbe der jeweiligen Farbe verwendet:
Erfolgreich Warnung Fehler Information
Hinweis-Boxen
Erfolg
Dieser Vorgang wurde erfolgreich abgeschlossen.
Warnung
Bitte überprüfen Sie die eingegebenen Daten.
Fehler
Der Vorgang konnte nicht abgeschlossen werden.
Information
Weitere Details finden Sie in der Dokumentation.
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
css
:root {
--brand-success: #22C55E;
--brand-warning: #EAB308;
--brand-error: #EF4444;
--brand-info: #3B82F6;
--brand-success-bg: #DCFCE7;
--brand-warning-bg: #FEF9C3;
--brand-error-bg: #FEE2E2;
--brand-info-bg: #DBEAFE;
--brand-success-text: #15803D;
--brand-warning-text: #A16207;
--brand-error-text: #B91C1C;
--brand-info-text: #1D4ED8;
}