Color.
Four boards. No fifth hue exists — no red, no blue, no purple, anywhere. A wrong color reads as someone else's site faster than any other mistake.
What each board means
cream is paper.
Surfaces, references, quiet chrome. The site is printed on it.
wood is ink.
Every word wears it — wood-800 primary, wood-500 secondary, wood-300 muted.
orange is action.
Links, buttons, the wordmark stop, THE chart color (orange-500). Scarce on purpose.
sage is assent.
Passes, savings, asides. Calm agreement, never celebration.
The ramps
Defined once in globals.css, mirrored in tokens.json. Ringed swatches carry a standing job.
cream
--c-cream-*wood
--c-wood-*orange
--c-orange-*sage
--c-sage-*Accessible pairs
Computed WCAG ratios for the standing text pairs. wood-300 fails even large-text AA: it is decorative only, never the sole carrier of information. orange-600 passes only as large or underlined text, which is why links are always underlined here.
wood-800 on cream-50 15.95:1 ✓ AA body and smaller
wood-500 on cream-50 5.97:1 ✓ AA body and smaller
sage-700 on cream-50 5.74:1 ✓ AA body and smaller
orange-700 on cream-50 5.68:1 ✓ AA body and smaller
orange-600 on cream-50 4.20:1 × large or underlined only
wood-400 on cream-50 4.10:1 × large text only
wood-300 on cream-50 2.83:1 × decorative only
cream-100 on wood-800 14.26:1 ✓ AA reversed surfaces
orange-300 on wood-800 9.13:1 ✓ AA reversed links
On the dark board
wood-800 is the one dark surface. Inks on it are fixed roles, computed the same way as the light pairs. The floor is wood-300: nothing quieter may carry text on dark — wood-400 is large-text only, and wood-500 on wood-800 (2.67:1) is banned outright.
cream-100 14.26:1 primary ink — headlines, labels
wood-200 8.06:1 secondary ink — body, day numbers
wood-300 5.64:1 muted ink — the smallest-text floor
orange-300 9.13:1 action — links, next-up markers
sage-300 9.62:1 assent — passes, confirmations
wood-400 3.89:1 large text only
The hard rule
For data marks, exactly one brand hue passes the palette validator on cream: orange-500 #B47E3C. Everything else fails the chroma floor or colorblind separation. The chart law that follows from this lives at /brand/data.