Farbsystem
Gelb ist im Regelfall Akzent, als Fläche nur gezielt und dosiert. Basis ist Schwarz/Weiß/Grau – Gelb setzt Punktuation.
CI-Kernfarben
TP Grey (#464646) – Strukturelemente, sekundäre Textfarbe
TP Yellow (#FAF514) – Akzentfarbe. Einsatz kontextabhängig – flächig nur gezielt und dosiert als Signal.
TP Black (#181818) – Primäre Textfarbe, dunkle Flächen, maximaler Kontrast
Drei Farbzustände
Neutralzustand (Default)
TP Black (#181818), Weiß, Graustufen. Neutralität ist der Ausgangspunkt – der Normalfall. Ca. 70% aller Flächen.
Markenzustand (Akzent)
TP Yellow (#FAF514). Nur punktuell: Section Labels, Accent Zones, CTAs, Badges, Highlight-Elemente. Gelb ist Satzzeichen; Signalflächen bleiben die dosierte Ausnahme. Ca. 10%.
Bildgetragener Zustand
Farbe aus der Bildwelt, kontrolliert über Art Direction. Für Hero-Bereiche, Kampagnen. Ca. 20%.
Farbverhältnis 70 : 10 : 20
Schwarz / Weiß / Grau als Basis – der Normalfall
TP Yellow als Punktuation – flächig nur dosiert als Signal
Bildfarbe aus der Bildwelt – kontrolliert über Art Direction
Das Verhältnis ist ein Ergebnis-Check, kein Designwerkzeug. Entsteht automatisch, wenn die drei Regeln stimmen.
Gelb erscheint bei / nicht bei
| Erscheint bei | Nicht bei | |
|---|---|---|
| Website | Section Labels, Accent Bars, Badges, Highlight-Elemente, aktive Zustände | Hero-Flächen und vollflächige Hintergründe als Dauerzustand, Nav-Bar, Footer |
| Social | Accent-Linie, Highlight-Box, KPI-Badge | Vollflächige gelbe Slides als Regelfall, gelbe Hero-Hintergründe ohne Signal-Funktion |
| Retail / Raum | Akzentstrich auf Schildern, Preis-Badges, Screen-UI-Akzente | Gelbe Wände, Regale, Böden, gelbe Ladenfläche |
| Merch | Wortmarken-Label, Accent-Stitching, kleine Logo-Applikationen | Ganzes Shirt in Gelb, gelbe Hose, großflächige Gelb-Prints |
| Packaging | Siegel, Akzentstreifen, Tab, Markenzeichen | Gesamte Verpackung gelb, gelbe Kartons |
Daumenregel: Augen zusammenkneifen. Dominiert das Gelb dauerhaft? Zu viel. Gelb ist Satzzeichen – Signalflächen sind die dosierte Ausnahme, nicht der Grundzustand.
No-Gos
Massives Dauer-Gelb als Selbstzweck – flächiges Gelb nur gezielt und dosiert als Signal, nicht als Grundzustand
Weiße Schrift auf Gelb – WCAG-Fail (Kontrast 1.2:1). Immer schwarze Schrift auf Gelb verwenden
Farbe als Bildersatz – Farbe kann kein Bild kompensieren oder ersetzen
Mehrfarbigkeit als Stil – das System basiert auf Reduktion, nicht Vielfalt
Kampagnenfarben als System – keine temporären Farbwelten als CI-Erweiterung
Gelb als Schrift auf Weiß – verboten (Kontrast 1.2:1, WCAG-Fail). Keine Ausnahme, kein Ersatzgelb. Auf Weiß trägt immer Schwarz die Lesbarkeit. Gelbe Akzentflächen auf Weiß bleiben erlaubt.
Schrift auf Gelb
Auf gelben Flächen wird ausschließlich schwarze Schrift (#181818) eingesetzt. Weiße Schrift auf Gelb ist verboten — der Kontrast liegt bei 1.2:1 und ist damit ein klarer WCAG-Fail. Schwarz auf Gelb erreicht 14.3:1.
Richtig
Schwarz auf TP Yellow — 14.3:1 Kontrast, klare Lesbarkeit
Falsch
Weiß auf TP Yellow — 1.2:1 Kontrast, WCAG-Fail, nicht lesbar
Gelb richtig einsetzen
Wohin Gelb darf. Gelb ist Akzent mit schwarzer Schrift, nie Textfarbe auf Hell. Flächig nur gezielt und dosiert als Signal.
Gelb nie als Text auf Weiß (Redline, kein Ersatzgelb)
Gelb nie als Text auf Hellgrau
Gelb als Signalfläche: gezielt und dosiert, ja
Gelb als Akzent (~10%) auf neutraler Basis