Color
Colors are semantic roles, not a palette — you pick by job (primary = main action), not by hue. Every token has a.dark override, so the same class works in both themes (use the toggle, top-right). Each filled role has a paired-foreground for legible text on it.
Actions
The main action of a view — use once per context.
Lower-emphasis action sitting next to primary.
Irreversible / destructive actions only (delete, remove).
Brand tiers
Brand is split by contrast contract, not by shade. A fill only needs 3:1, but text needs 4.5:1 — so they must diverge in dark. Don't collapse them into one "brand" color.
Fixed identity (logo, brand surfaces). Does NOT adapt for contrast.
Brand-colored FILLS/controls. Adapts in dark (≥3:1 fill contract).
Pull the eye to one spot (highlight, badge).
Status
Confirmed / done.
Caution, non-blocking. Pairs with warning-border.
Promotional / featured emphasis (hover: highlight-hover).
Neutral surfaces
Elevation is built from these (see Elevation & surfaces).
Page base.
Raised content surface.
Floating layer (menus, popovers) — highest surface.
Recessed well / secondary text on muted-foreground.
Hover/active wash on interactive rows.
Borders, inputs & focus ring
Default hairline between/around surfaces.
Form-control borders (slightly stronger than border).
Focus ring — keyboard focus visibility.