Farbsystem
Gelb ist im Regelfall Akzent, als Fläche nur gezielt und dosiert. Basis ist Schwarz/Weiß/Grau – Gelb setzt Punktuation.
CI-Kernfarben
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
Woher Farbwerte kommen
Farbwerte kommen nur aus dem System: aus diesem Kapitel und den daraus abgeleiteten Brand-Tokens. Nie per Pipette aus Screenshots, Fotos, PDFs oder bestehenden Assets abnehmen. Kantenglättung, Kompression und Bildschirmdarstellung verfälschen den Wert, aus einem Screenshot gemessen ergibt sich leicht #F8F518 statt #FAF514. Fehlt ein Wert, beim Brand Management nachfragen statt schätzen.
Digital und Druck nicht gegeneinander vergleichen. #FAF514 ist der Bildschirmwert, im Druck ist TP Yellow C0 M0 Y100 K0, und Print-Assets zeigen es am Bildschirm als #FFED00. Zwei verschiedene Gelbwerte in Screen- und Druckfassung derselben Datei sind deshalb der Normalfall, kein Fehler. Verglichen wird nur digital mit digital und CMYK mit CMYK.
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, 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.
Falsch
Gelb nie als Text auf Weiß (Redline, kein Ersatzgelb)
Falsch
Gelb nie als Text auf Hellgrau
Richtig
Gelb als Signalfläche: gezielt und dosiert, ja
Richtig
Gelb als Akzent (~10%) auf neutraler Basis
TP Yellow Scale
Gray Scale
Diagramme
Die Farbe folgt der Aussage, nicht der Zahl der Kategorien. Die Schritte werden in dieser Reihenfolge geprüft, der erste passende gilt.
Zeigen die Daten einen Stand?
Schwarz für erledigt, Gelb für das Aktive, Grau für offen. Keine Ampelfarben, offen ist nicht schlecht.
Steckt darin ein Urteil?
Frist, Budget, Plan: zusätzlich Signalfarbe, nur an der betroffenen Stelle.
Nennt die Folie eine Kategorie ausdrücklich?
In Headline, Kicker oder Kennzahl: diese eine in Gelb, alle anderen in Schwarz und Grau.
Sonst gleichrangig, höchstens 4 Kategorien?
Gelb-Schwarz-Rampe. Mehr Kategorien: sortierte Balken in einer Farbe, direkt beschriftet.
Stufen von wenig bis viel, höchstens 4?
Gelb-Schwarz-Rampe. Mehr Stufen: Grauskala.
Steht im Diagramm jetzt kein Gelb?
Gelb-Akzent an anderer Stelle der Folie: Kicker, Kennzahl oder Marker.
Gelb-Schwarz-Rampe
Auf hellem Grund
Auf dunklem Grund
Nie die hellen Gelbstufen 100 bis 300: Sie sind gleich hell und auf Weiß nicht unterscheidbar.