Color
Do we need a palette? Yes, a small one, all low-saturation. The accent is the only colorful thing on a site; everything else has a job:
- NeutralsBackgrounds, surfaces, lines and text. One 12-step ramp, for dark and light, carries 90% of every page.
- AccentsA set of hues at equal lightness and chroma. Each site picks one, so the sites differ but still match.
- SemanticSuccess, warning, danger, info. They reuse accent hues instead of adding new colors.
- IllustrationTags, charts and diagrams need several colors at once.
Accents
Eight hues at OKLCH L 0.76 / C 0.06 on dark and L 0.52 / C 0.07 on light. Equal lightness means buttons and links have the same contrast on every site. Graphite is a near-neutral extra. The ratio is against the page background.
Near-neutral accents
When all eight hues are taken, add near-neutrals: the same lightness as the accents (so the same contrast), but at C 0.02, nearly gray with only a hint of warmth or coolness. Keep them at least 70° apart, or they become hard to tell apart.
Neutrals
Three barely-tinted grays: cool (toward blue), warm (toward brown) and nearly pure. Cool is the choice. The same card is shown on each below.
Semantic
Taken from the accent palette: moss, ochre, rose and slate.
Illustration and data
All eight hues at once, and still quiet.