Farben
Zwei Farben tragen die Marke: ein kräftiges Blau und ein leuchtendes Grün. Blau ist die Basis, Grün der Akzent. Der Rest sind Schwarz, Weiß und ein ruhiges Grau für Flächen.
Klick auf einen Wert, um ihn zu kopieren.
Markenfarben
Neutrale Farben
Dunkle Neutrale
Für den Dark Mode gibt es fünf neutrale Stufen. Jede ist Weiß in Schwarz gemischt, R = G = B, ohne Farbton. Im Code setzt du sie nur über die Rollen --cd-ui-* ein, als Hex tauchen sie dort nicht auf. Für Marketing-Motive sind sie keine Gestaltungsfarben.
Statusfarben
Für Zustände in UI und Diagrammen (Erfolg, Warnung, Fehler, Hinweis) nimmst du die Farben der Marke: Erfolg ist das Grün, Hinweis das Blau. Für Warnung und Fehler hat die Marke keine Farbe. Dafür kommen zwei dazu, die zu Blau und Grün passen: Amber, so hell wie das Grün, und Rot, so kräftig wie das Blau. Setz sie nur für Status ein, nie als Gestaltungsfarbe.
So sehen sie im Einsatz aus: je Status ein Hinweis-Kasten, darunter ein Badge in der Tönung und eines in der vollen Farbe. Oben hell, darunter im Dark Mode.
Dazu kommen zwei Varianten je Status:
| Status | Farbe | Schrift darauf | Tönung | Auf Schwarz und im Dark Mode |
|---|---|---|---|---|
| Erfolg | #00E676 | Schwarz | #DAFBEB | #00E676 |
| Warnung | #FFB000 | Schwarz | #FFF1D2 | #FFB000 |
| Fehler | #CD1839 | Weiß | #FBEEF0 | #FB6D73 |
| Hinweis | #335DE5 | Weiß | #EEF1FD | #6B8AFF |
- Farbe: Fläche, Rand, Icon und Statuspunkt, etwa ein Badge, ein Balken, ein Toast oder der Rand eines Hinweis-Kastens.
- Text: Grün und Amber sind auf Weiß zu hell für Text (1,7:1 und 1,8:1), genau wie das Grün der Marke. Text daneben ist Schwarz. Rot und Blau tragen auch Text, etwa eine Fehlermeldung unter einem Feld.
- Nie Farbe allein: Grün und Amber erreichen auf Weiß keine 3:1. Ein Status hat deshalb immer auch Text oder ein Icon.
- Tönung: Hintergrund für Hinweis-Kästen und Badges auf hellem Grund. Text darauf ist Schwarz, der Rand steht in der Statusfarbe.
- Auf Schwarz und im Dark Mode nimmst du die Werte der letzten Spalte für Text, Icon und Rand. Grün und Amber bleiben gleich, Rot und Blau werden heller. Die Fläche bleibt neutral, ohne farbige Tönung: Ein Status-Kasten liegt dunkel auf
#282828, die Tönung steht nie auf Dunkel. - Als Text im Dark Mode dürfen alle vier hellen Werte stehen, Rot nur nicht auf Hover, Blau nicht auf schwebenden Flächen und nicht auf Hover. Die Regel mit allen Zahlen steht unter Dark Mode.
Die Werte stehen als Tokens (--cd-success, --cd-warning, --cd-danger, --cd-info, jeweils plus -soft und -hell) und maschinenlesbar in brand/tokens.json. In gebauten Oberflächen nimmst du die Rollen --cd-ui-success bis --cd-ui-info und --cd-ui-success-flaeche bis --cd-ui-info-flaeche, sie wählen den Wert je Modus selbst.
Verläufe
Der blau-grüne Verlauf ist die visuelle Signatur der Marke: Hero, große Flächen, Social-Kacheln. Klick auf die Fläche, um den CSS-Wert zu kopieren. Nimm genau diese Werte, bau sie nicht nach Gefühl nach.
Großflächig hinter Fotos und im Hero ist der Verlauf richtig. Hinter langem Fließtext nie, dort frisst er die Lesbarkeit.
Einsatz
- Blau führt. Es ist die Markenfarbe für Flächen, Buttons, Links und Hintergründe.
- Grün ist der Akzent. Bewusst und sparsam: das Key Visual, ein Pfeil, ein hervorgehobenes Wort. Nicht großflächig als Hintergrund für lange Texte.
- Auf Schwarz übernimmt Grün die Links. Auf dunklem Grund und im Dark Mode sind Links und Hervorhebungen grün (10,1:1). Buttons bleiben blau, weil weiße Schrift auf Grün nicht lesbar ist.
- Grau
#F9F7F7beruhigt: helle Sektionen, Karten, Trennflächen. Im Dark Mode wird die graue Sektion#282828. - Schwarz ist die einzige dunkle Farbe. Dunkle Flächen sind Schwarz oder eine der dunklen Neutralen, nie Dunkelblau. Dunkelblau gibt es nur im Verlauf.
Kontrast und Lesbarkeit
Grün ist kein Textfarben-Ersatz
Grün #00E676 auf Weiß erreicht keinen ausreichenden Kontrast für normalen Text (unter WCAG AA). Setz Grün nur für große, fette Elemente, Flächen oder Grafik-Akzente ein, nicht für Fließtext auf Weiß.
Blau #335DE5 auf Weiß erreicht rund 5,5:1 und ist damit AA-tauglich für Text und Links.
So sieht der Unterschied aus, statt nur als Zahl dazustehen. Auf Weiß:
Grün als Fließtext auf Weiß. Schwer lesbar, fällt durch (Kontrast rund 1,7:1, WCAG AA: Fail).
Blau als Fließtext auf Weiß. Klar lesbar (rund 5,5:1, WCAG AA).
Grün ist stark als großes Akzentwort, nicht als Absatz.
Auf Schwarz und im Dark Mode kippt es: Grün trägt Text und Links, Blau nicht mehr.
Grün als Fließtext auf Schwarz. Klar lesbar (rund 10,1:1, WCAG AAA).
Blau als Fließtext auf Schwarz. Fällt durch (rund 3,1:1, WCAG AA: Fail).
Text bleibt Weiß, leiser Text #BBBBBB, Links sind grün und unterstrichen.
| Hintergrund | Text | Akzent |
|---|---|---|
| Weiß / Grau | Schwarz | Blau, Grün (groß) |
| Blau | Weiß | Grün |
| Schwarz und Dark Mode | Weiß | Grün, auch für Links. Fokus blau-hell |
Werte zum Kopieren
Blau #335DE5 rgb(51, 93, 229) Pantone 2725 / 2986 C
Grün #00E676 rgb(0, 230, 118) Pantone 3285 / 7479 C
Grau #F9F7F7 rgb(249, 247, 247)
Schwarz #1D1D1D rgb(29, 29, 29)
Weiß #FFFFFF rgb(255, 255, 255)