Colours

All colours are CSS custom properties defined in the theme files. Components consume tokens, not raw hex values, so themes can be swapped without touching component code.

Palette

Interactive

--color-interactive

Button backgrounds, focus rings

Interactive hover

--color-interactive-hover

Link text, button hover

Text

--color-text

Body copy, headings

Text subtle

--color-text-subtle

Captions, secondary labels

Surface

--color-surface

Cards, form inputs

Surface raised

--color-surface-raised

Code blocks, inline code

Border

--color-border

Dividers, card borders

Pass

--color-pass

Audit result: pass

Fail

--color-fail

Audit result: fail

N/A

--color-na

Audit result: not applicable

To do

--color-todo

Audit result: to do (default)

Semantic colour rules

Never use raw hex values in component or app CSS — always reference a token.
--color-interactive is for UI chrome (borders, icon fills). It is not suitable for inline text — use --color-interactive-hover for links.
Status colours (pass, fail, na, todo) each come with a -bg and -border variant for backgrounds and borders respectively.