Colors
Every colour is a semantic role, never a value. Components reference the role — `bg-card`, `text-muted` — and each role resolves to a different colour in light and dark from the same name. This list is read from theme.css, so it is the palette, not a copy of it.
One name, two values — every token resolves to a different colour in light and dark, and a component only ever reaches for the name. Copy carries both schemes: JSON for Figma variables, CSS for a token pipeline. Switch the scheme from the toggle in the header.
Surfaces
background The page. An extreme, not a surface — nothing sits below it to step away from.
border Dividers *inside* a component. Not a surface edge.
input Field borders.
field Fill for anything typed or picked into. Resolves against the surface underneath.
card The first surface above the page. Cards, tables, toolbars, the sidebar.
popover A floating surface — popover, dropdown, select, dialog. Same value as `card`, by design.
secondary Secondary fills — a `Badge` on a card, a secondary button.
Text
foreground Primary text.
muted Secondary and meta text: descriptions, timestamps, helper labels. Never a nav label.
secondary-foreground Text on a secondary fill.
Interactive
hover The one shared hover tint, mixed against whatever surface it lands on.
hover The one shared hover tint, mixed against whatever surface it lands on.
on a card — steps off whatever surface it lands on
selected Anything the user picked: a checked box, a pressed toggle, the current page, a primary button.
selected-hover Hover on something already selected. Steps off `selected`, never an alpha film.
selected-foreground Text and icons on a selected fill.
ring Focus. The same value as `primary`, drawn inside the box by one global rule.
Brand & semantic
accent Links.
primary The brand accent, where blue is not marking a choice: a `Progress` fill, a `Switch` track.
primary-foreground Text on a primary fill.
destructive Errors and irreversible actions.
destructive-foreground Text on a destructive fill.
Contrast
Text against the fill it sits on, measured in the scheme you're viewing. The grade stays the worse of the two schemes — a pair only passes if it clears the bar in light and dark alike.
| Fill | Text | Ratio | Grade |
|---|---|---|---|
selected | selected-foreground | 5.3:1 | AA |
background | foreground | 17.9:1 | AAA |
card | foreground | 16.6:1 | AAA |
background | muted | 5.3:1 | AA |
card | muted | 4.9:1 | AA |
primary | primary-foreground | 5.2:1 | |
destructive | destructive-foreground | 4.8:1 | |
secondary | secondary-foreground | 15.3:1 | AAA |