Color
OKLCH primitive ramps and semantic intents. The bg, fg, and border categories carry the same variant set, data is a numbered categorical scale for charts, and every value has a light and dark side. Intents with a filled treatment also carry an inverse variant — the same intent with its lightness polarity flipped. Toggle the theme in the sidebar to preview dark mode.
Primitive ramps
bg
Backgrounds — intent colors are subtle washes for alerts, badges, and selected rows. Their .inverse variants are the solid fills.
fg
Foregrounds — text and icon colors for each intent.
border
Borders — dividers, control outlines, and focus rings.
Action states
The action intent is the only one that expands into interaction states. bg.action, fg.action, and border.action each carry a tonal progression — DEFAULT, hover, active, and disabled — plus the inverse fill it shares with the status intents (see Inverse fills below).
Tonal — a soft surface pairing bg.action.* with fg.action.* and border.action.* as it steps through states.
Solid — the inverse pairing used by the primary Button: a strong bg.action.inverse fill with fg.action.inverse text and a border.action.inverse edge.
Inverse fills
inverse flips the lightness polarity of a bg/fg pair, and applies at two scopes: on the neutral surface, and within an intent. The plain intent is a light wash carrying dark text; its inverse is a solid fill carrying light text. Use them as a pair — bg.X.inverse is authored against fg.X.inverse, and every combination below clears WCAG AA for normal text in both themes.
warning is the one intent whose inverse does not literally flip: light text on amber tops out near 2.9:1, so the gold fill keeps dark text in both themes. Accessibility over symmetry.
data
Data — a numbered categorical scale for charts and data visualization. Assign series in order, starting at data.0.