Paper. Ink.
A single clay.
Two surfaces. One accent, reserved to ten percent of any screen. Cloud Dancer paper (warm cream), Midnight ink (deep, near-black), Terracotta accent (#CC6633). These three are the locked canonical palette · anything else in the document is exploratory.
Three colours do ninety percent of the work.
If you reach for a fourth colour on a marketing surface, stop. The rule almost certainly applies to whatever you are trying to communicate. The constraint is the point.
Six steps of paper. No cool greys, ever.
The neutral scale · ink side
Black is not #000 and paper is not #fff. Paper is Cloud Dancer (warm-earth, slightly cream). Ink is Midnight (cool, sub-perceptual blue, deep). The two surfaces are deliberately the only neutrals; everything else inherits from them.
Three variants. One ground rule: ten percent.
The One Voice Rule
Clay covers no more than ten percent of any single screen, marketing or product. Anything more dilutes the accent. If you find yourself painting things clay because they "need to pop," paint them with hierarchy instead.
Four reserve colours. Each with a single, specific job.
The Reserved-Moss Rule
Moss is for product states (in-policy, succeeded, healthy). It never appears on the marketing surface. The merchant feels success in moss; the visitor feels persuasion in clay.
The Two-Voices-by-Ground Rule
Marketing uses warm voice (clay) on content grounds. Cool voice (peacock) exists only as a full-bleed drenched band ground. Never a sprinkled label or stroke on a paper section.
Text on a colour wins WCAG AA, or the colour changes.
Aa
Aa
Aa
Aa
Aa
Use the --br-on-* semantic tokens. Never hand-pair text and background; never hand-pick an rgba. The tokens are the contract.
Three fixed opacities. Never hand-tweak.
--br-on-paper · solid ink · primary body text
--br-paper-text-2 · 88% · supporting body
--br-paper-text-3 · 72% · meta / chrome
--br-paper-text-4 · 56% · inactive / smallest
--br-on-ink · solid paper · primary body
--br-ink-text-2 · 82% · supporting body
--br-ink-text-3 · 68% · meta / chrome
--br-ink-text-4 · 50% · inactive / smallest
Six combinations the system refuses.
Aa
Pure #fff on #000. The brand has no cool neutrals.
Aa
No gradient grounds. No mesh. Solid surfaces only.
Aa
No gradient-as-text. The clay is the accent.
Whole paragraphs in clay. Four sentences. All clay. Imagine reading this. Stop.
Coloured left-border accents.
Side-stripes > 1px are banned. A flagged AI-slop tell.
Peacock is a drenched band, not a chip or stroke on paper.
Three questions the system resolves for you.
Clay or Clay-deep?
Text ≥ 18px (or ≥ 14px bold) on paper → --br-clay (#CC6633).
Smaller, lighter, or AA-critical → --br-clay-deep (#9E4615).
Peacock as ground or as text?
Drenched full-bleed band → background: var(--br-peacock).
Anywhere else (label, chip, stroke on paper) → stop. The Two-Voices-by-Ground rule.
Which surface?
Page canvas → --br-paper
Lifted card or hover → --br-paper-2
Pressed / visited → --br-paper-3