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

BlauRGB 51 93 229Pantone 2725 / 2986 CPrimärfarbe: Flächen, Buttons, Links, Hintergründe.

GrünRGB 0 230 118Pantone 3285 / 7479 CAkzent: Key Visual, Highlights, ein hervorgehobenes Wort.

Neutrale Farben

SchwarzRGB 29 29 29Text auf Hell, monochrome Logo-Variante.

GrauRGB 249 247 247Ruhige, neutrale Hintergrundfläche.

WeißRGB 255 255 255Text auf Farbe, Flächen.

Statusfarben

Für Zustände in UI und Diagrammen (Erfolg, Warnung, Fehler, Hinweis) reicht die Markenpalette nicht. Diese vier Farben sind eine eigene funktionale Ebene neben der Marke, nicht Teil des Markenlooks. Setz sie nur für Status ein, nie als Gestaltungs- oder Flächenfarbe. Jeder Wert erreicht auf Weiß WCAG AA für Text.

ErfolgRGB 11 122 85Bestätigung, Erfolg. Dunkler als das Marken-Grün, damit als Text lesbar.

WarnungRGB 146 97 10Achtung, aber nicht kritisch.

FehlerRGB 201 42 42Fehler, Gefahr, destruktive Aktion.

HinweisRGB 43 80 212Neutrale Information. Bewusst das Marken-Blau.

Jede Statusfarbe hat eine -soft-Variante (dieselbe Farbe bei niedriger Deckkraft) als dezente Hintergrund-Tönung, zum Beispiel für einen Hinweis-Kasten. Die Werte stehen als Tokens (--cd-success, --cd-warning, --cd-danger, --cd-info plus -soft) und maschinenlesbar in brand/tokens.json.

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.

Marken-VerlaufHero, große Flächen, Markenmomente.

Format-VerlaufSocial-Kacheln, Format-Platzhalter.

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.
• Grau #F9F7F7 beruhigt: helle Sektionen, Karten, Trennflächen.

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 auf Weiß aus, statt nur als Zahl dazustehen:

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.

Hintergrund	Text	Akzent
Weiß / Grau	Schwarz	Blau, Grün (groß)
Blau	Weiß	Grün
Schwarz	Weiß	Grün, Blau

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)