Typography

Type scale

All sizes are defined as CSS custom properties and map to the design token scale.

Heading 1 — 3xl bold--font-size-3xl

Heading 2 — 2xl bold--font-size-2xl

Heading 3 — xl semibold--font-size-xl

Large body--font-size-lg

Base body (default)--font-size-base

Small / caption--font-size-sm

Extra small / labels--font-size-xs

Links

Text links within body copy are always underlined. This is a design principle, not just a WCAG requirement. Underlines provide a universal, colour-independent cue that text is interactive. Users who cannot distinguish the link colour from surrounding text can still identify links by the underline.

This paragraph contains an underlined link that is always visually distinct.

Nav links (breadcrumbs, top bar) suppress the underline because the interactive region is unambiguous from context. The underline is restored on :hover.

Colour

Link colour uses --color-interactive-hover (#1d4ed8), which achieves a contrast ratio above 4.5:1 on the default white background — meeting WCAG SC 1.4.3. The raw --color-interactive (#3b82f6) has insufficient contrast for inline text and should not be used for body text links.