Colour

Colour is defined in three layers, and product code consumes only the third. primitives.css holds raw values, semantic.css gives them meaning, and the --color-*tier is the public surface — the one and only answer to “where do I edit to change the look”.

The boundary is enforced. A var(--semantic-…) or var(--primitive-…) outside src/styles/ is a hard audit failure, and the check scans TS and TSX as well as CSS — an inline var(--primitive-…) in a style object is the same violation.

There used to be a fourth tier of short aliases (--text-primary, --panel-bg, --accent-solid). It has been deleted. If you reach for one it will not resolve — and because an undefined custom property drops the whole declaration silently, nothing will tell you. See Working with tokens.

Neutrals are achromatic — red, green and blue channels are equal, deliberately. Depth is carried by lightness alone: cards are borderless and shadowless, separated from the page by being a step lighter than it.

Three tiers, and the third is not body text. --color-text-tertiary sits below WCAG AA against every surface in the app; it is for placeholders, disabled labels and decorative fills only. Using it for a sentence a reader has to read is a contrast failure the audit will catch.

Borders are hairlines. Rather than compose 1px solid var(--color-border-default) at each site, use the pre-composed rules — Radius & borders covers them.

Four status accents. Red is unshared on purpose — it is used for destructive actions and nothing else, so its meaning never becomes ambiguous.