Color

Components reference semantic role tokens, never raw scale values, that is what lets dark mode re-dress everything at once. Reach for a raw ramp step only when a semantic token doesn't cover the hue.

Semantic roles

--bg

--bg-subtle

--surface

--text

--text-secondary

--border

--accent

--accent-text

--success

--warning

--danger

--info-subtle

Product accents

Each product re-skins the accent role via a theme class, see Product themes.

novapay · blue

novabank · green

novastore · amber

novatrust · deep blue

novaboost · orange

novaai · indigo

Discipline

One accent per view. Blue is the default; a product screen carries its product accent throughout.
Green is success/status only, never a page or panel ground.
The page ground is white --bg; never ground a page on the subtle tint.
Text on tinted surfaces uses the *-text role tokens so it stays legible in dark mode.
AA contrast is checked per mode; the roles are tuned independently for light and dark.