Foundations

Colour

Contrast targets the palette hits

The four pairings that have to clear WCAG, and what ratio each one actually hits. Anything not listed here either isn't shipped as a foreground/background pairing or stays at decorative weight (icons, ambient texture).

  • Body type on paper: --fg-primary on --bg-paper ≈ 14.6:1 (AAA).
  • Peak on paper: --accent-link on --bg-paper ≈ 4.7:1 (AA normal text).
  • White on navy: #FFFFFF on --u-navy-800 ≈ 16:1 (AAA).
  • Focus ring: 2px white gap + 2px peak (--shadow-focus) - visible on every surface.
Colour · Usage