Skip to content

Foundations

Colour

Palette Tokens Usage Accessibility

Where each colour goes

The placement rules behind Quiet Cobalt - one peak (--accent-link), one anchor ink (--fg-primary), one AI accent reserved for AI features. Apply colours by role, not by feel.

  • Headings + body type → --fg-primary (anchor ink, same tone as the mark).
  • Links + interactive accents → --accent-link (peak blue).
  • Hero / CTA bands → navy via .u-section-dark; never deploy peak as a flood.
  • AI features only → --accent-ai + --accent-ai-soft; never elsewhere.
  • Section rhythm → alternate .u-section (paper) with .u-section-tinted (subtle); never two of the same back-to-back.
Colour · Tokens
Colour · Accessibility