Color System
Yellow is accent, not surface. Base is black/white/gray – yellow adds punctuation.
CI Core Colors
TP Grey (#464646) – Structural elements, secondary text color
TP Yellow (#FAF514) – Accent color. Context-dependent use, never as a surface.
TP Black (#181818) – Primary text color, dark surfaces, maximum contrast
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, not surface. 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 – never as surface
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, accent bars, badges, highlight elements, active states | Hero surfaces, full-surface backgrounds, nav bar, footer |
| Social | Accent line, highlight box, KPI badge | Full-surface yellow slides, yellow hero backgrounds |
| 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? Too much. Yellow is punctuation, not a paragraph.
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.
Never yellow as text on white (redline, no substitute yellow)
Never yellow as text on light gray
Yellow as a signal surface: deliberate and dosed, yes
Yellow as accent (~10%) on a neutral base