Semantic colors
Semantic color tokens that adapt automatically between light and dark themes.
Live WCAG 2.1 contrast, measured from rendered pixels in the current theme — toggle light / dark above to recompute. Targets: AA ≥ 4.5:1 for text, 3:1 for large text / UI.
Solid fills
primary
accent
secondary
muted
destructive
success
warning
info
card
Score = label (foreground) legibility on the fill.
Status & brand surfaces — subtle
primary-subtle
success-subtle
warning-subtle
info-subtle
destructive-subtle
Tinted banner / pill background with its -subtle-foreground text.
Emphasis colors as text
Peak demand shaved 12% — primary
Peak demand shaved 12% — success-emphasis
Peak demand shaved 12% — warning-emphasis
Peak demand shaved 12% — info-emphasis
Peak demand shaved 12% — destructive-emphasis
On the page background. Use these (not the base fill color) whenever a status color is rendered as text or a thin icon.
Elevation surfaces
muted
background
card
elevated
Recessed (muted) → page → card → elevated (raised menus / popovers).