Farbsystem
Gelb ist Akzent, nicht Fläche. Basis ist Schwarz/Weiß/Grau – Gelb setzt Punktuation.
CI-Kernfarben
TP Grey (#464646) – Strukturelemente, sekundäre Textfarbe
TP Yellow (#FAF514) – Akzentfarbe. Einsatz kontextabhängig, nie als Fläche.
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, nicht Fläche. 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 – nie als Fläche
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, vollflächige Hintergründe, Nav-Bar, Footer |
| Social | Accent-Linie, Highlight-Box, KPI-Badge | Vollflächige gelbe Slides, gelbe Hero-Hintergründe |
| 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? Zu viel. Gelb ist Satzzeichen, nicht Absatz.
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