Color System
Yellow is accent by default, as a surface only deliberate and dosed. Base is black/white/gray – yellow adds punctuation.
CI Core Colors
TP Yellow (#FAF514) – Accent color. Context-dependent use – as a surface only deliberately and dosed as a signal.
TP Black (#181818) – Primary text color, dark surfaces, maximum contrast
Where color values come from
Color values come from the system only: from this chapter and the brand tokens derived from it. Never pick them with an eyedropper from screenshots, photos, PDFs or existing assets. Anti-aliasing, compression and screen rendering distort the value; measured from a screenshot you easily get #F8F518 instead of #FAF514. If a value is missing, ask Brand Management instead of estimating.
Do not compare digital and print against each other. #FAF514 is the screen value; in print, TP Yellow is C0 M0 Y100 K0, and print assets display it on screen as #FFED00. Two different yellow values in the screen and print version of the same file are therefore normal, not an error. Compare digital only with digital and CMYK only with CMYK.
Three Color States
Neutral State (Default)
TP Black (#181818), white, gray tones. Neutrality is the starting point – the default case. About 70% of all surfaces.
Brand State (Accent)
TP Yellow (#FAF514). Only punctual: section labels, accent zones, CTAs, badges, highlight elements. Yellow is punctuation; signal surfaces remain the dosed exception. About 10%.
Image-Driven State
Color from the image world, controlled via art direction. For hero areas, campaigns. About 20%.
Color Ratio 70 : 10 : 20
Black / white / gray as base – the default case
TP Yellow as punctuation – as a surface only dosed as a signal
Image color from the visual world – controlled via art direction
The ratio is a result check, not a design tool. It emerges naturally when the three rules are applied correctly.
Yellow appears in / not in
| Appears in | Not in | |
|---|---|---|
| Website | Section labels, badges, highlight elements, active states | Hero surfaces and full-surface backgrounds as a permanent state, nav bar, footer |
| Social | Accent line, highlight box, KPI badge | Full-surface yellow slides as the default, yellow hero backgrounds without signal purpose |
| Retail / Space | Accent stripe on signage, price badges, screen UI accents | Yellow walls, shelves, floors, yellow shop surfaces |
| Merch | Wordmark label, accent stitching, small logo applications | Entire shirt in yellow, yellow pants, large-surface yellow prints |
| Packaging | Seal, accent stripe, tab, brand mark | Entire packaging in yellow, yellow boxes |
Rule of thumb: squint your eyes. Does the yellow dominate permanently? Too much. Yellow is punctuation – signal surfaces are the dosed exception, not the default state.
No-Gos
- Massive permanent yellow for its own sake – yellow as a surface only deliberately and dosed as a signal, not as a default state
- White text on yellow – WCAG fail (contrast 1.2:1). Always use black text on yellow
- Color as image substitute – color cannot compensate or replace imagery
- Multi-color as style – the system is based on reduction, not variety
- Campaign colors as system – no temporary color worlds as CI extensions
- Yellow as text on white – forbidden (1.2:1 contrast, WCAG fail). No exception, no substitute yellow. On white, black always carries legibility. Yellow accent areas on white remain allowed.
Text on Yellow
On yellow surfaces, only black text (#181818) is used. White text on yellow is forbidden. Contrast is 1.2:1 which is a clear WCAG fail. Black on yellow reaches 14.3:1.
Correct
- Black on TP Yellow: 14.3:1 contrast, clear readability
Wrong
- White on TP Yellow: 1.2:1 contrast, WCAG fail, not readable
Using yellow correctly
Where yellow may go. Yellow is an accent with black text, never text color on light. As a surface only deliberately and dosed, as a signal.
Wrong
Never yellow as text on white (redline, no substitute yellow)
Wrong
Never yellow as text on light gray
Correct
Yellow as a signal surface: deliberate and dosed, yes
Correct
Yellow as accent (~10%) on a neutral base
TP Yellow Scale
Gray Scale
Charts
Colour follows the message, not the number of categories. The steps are checked in this order, the first match applies.
Does the data show a status?
Black for done, yellow for active, grey for open. No traffic-light colours, open is not bad.
Does it carry a judgement?
Deadline, budget, plan: add a signal colour, only where it applies.
Does the slide name one category explicitly?
In headline, kicker or key figure: that one in yellow, all others in black and grey.
Otherwise equal, at most 4 categories?
Yellow-black ramp. More categories: sorted bars in one colour, labelled directly.
Steps from low to high, at most 4?
Yellow-black ramp. More steps: grey scale.
Is there no yellow in the chart now?
Yellow accent elsewhere on the slide: kicker, key figure or marker.
Yellow-black ramp
On light backgrounds
On dark backgrounds
Never the light yellow steps 100 to 300: they are equally light and indistinguishable on white.