Colour
Two or three colours. Never six, balanced.
A YMF composition uses Paper as ground, Slate for everything structural, and Terracotta at roughly five percent of the surface. Fog is the only greyscale — a single warm grey that expands into a five-step ramp for surfaces, dividers, and secondary text. The system is disciplined, not decorative.
The proportions above are the house rule for any single composition — a page, a slide, a social tile. The accent is a seasoning, not a base note.
- Use Terracotta on rules, kickers, and small moments of heat.
- Let Paper do the heavy lifting on surfaces.
- Use Slate as the dominant structural tone.
- Use Terracotta as a background or fill more than 5% of a surface.
- Add colours outside this system without approval.
- Use six balanced colours. Ever.
Fog
One warm grey, five carefully chosen weights.
Fog is the only greyscale in the system. It stays out of the primary story but does the structural work — hairlines, dividers, disabled states, muted surfaces, secondary captions. The ramp is anchored on Fog-50 (#7C7B71); every other step is the same warm hue, re-lit.
Rule of thumb: Fog-10 through Fog-50 are for surfaces and structure, never text. Fog-70 is the lightest step legal for text on Paper, and only at 16 px or larger. Fog-90 is body-safe but should defer to Slate unless a softer voice is wanted.
Contrast
How the palette performs at every pairing.
A quick primer: contrast ratio measures how distinct a foreground colour (usually text) is from the background behind it, expressed as a ratio between 1:1 (identical) and 21:1 (black on white). The WCAG sets the bar publishers should meet so people with low vision, colour blindness, or reading on a glare-washed phone screen can still parse the text. The thresholds we test against:
- 4.5:1 — minimum for body text (AA). Anything less and small text becomes hard work for many readers.
- 3:1 — minimum for large text (AA Large), defined as 18 px bold or 24 px regular and up. Bigger letterforms tolerate lower contrast.
- 7:1 — the stricter AAA tier for body text, recommended where reading comfort is critical.
The table below runs every meaningful colour pair in the palette through that test so you can see, at a glance, which combinations are safe for body copy, which are large-text only, and which should never carry text at all. Read the full spec at W3C — WCAG 2.2 Contrast (Minimum).
Terracotta on Slate returns 2.0:1 — confirming why text smaller than 16 px in Terracotta on dark backgrounds must use Fog-70 instead. Fog-50 fails on light surfaces by design; it is a decorative and structural tone, not a text colour. For legible text, drop to Fog-70 or Fog-90.
Semantic
Derived from the palette. Not imported from it.
Each semantic colour is pulled from the hue family of the existing palette — never a foreign corporate blue or alarm red. All text values pass WCAG AA (4.5:1) on Paper. Terracotta is deliberately excluded from semantic use to protect the brand accent.
Chart palette
Five chart colours. One emphasis rule.
The chart palette extends the brand system for data contexts without adding arbitrary chromatic variety. Every colour is pulled from the same warm, muted hue family as the base palette — nothing foreign. Terracotta is always the emphasis series. The remaining four support it.
See Charts for usage rules, specimen charts, and the full token map.
These five colours are not arbitrary chart-library defaults — each is positioned within the existing hue family. Terracotta anchors the warm accent. Ochre extends it in amber. Steel and Reed sit in the cooler register occupied by Slate and the Fog ramp. Fog closes the set as the neutral foundation. When complex data genuinely surfaces five dimensions, all five colours can be used — the rule is about hierarchy, not count.
On Slate, Fog fills invert — Fog-10 and Fog-30 read clearly against dark grounds where they would disappear on Paper. Terracotta stays constant across both grounds. Axis text becomes Paper-65. Gridlines become Paper at 8% opacity — barely-there structural guides.