Dasselbe System, andere Marke
Diese Seite lädt unverändert design-system.css
und danach eine Datei mit rund einem Dutzend Token-Überschreibungen.
Die Organisation auf dieser Seite ist erfunden. Ein fremdes Parteibranding ohne Auftrag zu verwenden ist schlechter, als gar keines zu verwenden.
Komponenten
ok, Warnung, Fehler und neutral stehen als eigene Werte im System und bleiben unverändert. Die Variante info bezieht ihre Farben dagegen ganz aus den Marken-Tokens und nimmt die neue Marke an — so gewollt, „Info" ist kein Warnsignal.
Hinweis
Dieser Info-Callout bezieht Fläche und Rahmen aus den Marken-Tokens — er ist hier blau, nicht grün. Warn-, Fehler- und Erfolgsfarben behalten dagegen ihre eigenen Werte; bei „success" folgt nur der Rahmen der Marke.
Datei hierher ziehen
Die Ablagefläche übernimmt die Markenfarbe im Drag-Zustand.
Tabelle
| Posten | Betrag |
|---|---|
| Personal | 23.500.000 |
| Sachaufwand | 10.400.000 |
| Transfers | 6.740.070 |
Zebrastreifen und Fokusring stehen in keiner Überschreibung — sie rechnen
sich per color-mix aus den gesetzten Tokens.
Diagramm-Palette
Nur die ersten beiden Töne tragen die Marke. Die übrigen sechs bleiben, damit acht Kategorien unterscheidbar bleiben.
Gemessene Kontraste
| Token | Wert | gemessen gegen | Ratio |
|---|---|---|---|
--gat-color-dunkelgruen | #1f5c8b | weisse Schrift | 7,09:1 |
--gat-color-hellgruen | #5b9bc4 | --gat-color-on-secondary (#000) | 6,93:1 |
--gat-web-green | #1f5c8b | kein Text darauf | — |
--gat-web-green-deep | #154767 | weisse Schrift | 9,86:1 |
--gat-web-green-tint | #e4edf4 | --gat-web-text | 12,83:1 |
Alle über 4,5:1, also AA für Fliesstext. Das ist die Prüfung, die beim Umbranden am häufigsten ausgelassen wird: viele Markenfarben wurden für Logo und Druck gewählt, nicht für weisse Schrift am Bildschirm.