All colors are defined in OKLCH, giving perceptually-even scales across hues. The product palette has 10 hues × 10 shades; semantic tokens point at specific rungs so components stay in sync with Chakra's theme.
Reach for a semantic token first (text.primary, primary.base, danger.text) and drop to a raw palette rung (teal.600) only when none fits. Everything here is generated from the live theme.
10 hues, 50→900. 600 is the canonical base rung for every hue (buttons, icons, links); 300 is the border; 50 is the background tint; 700 is the text-on-light pairing.
text.danger (a 600 rung, for standalone text) is intentionally distinct from danger.text (a 700 rung, paired with danger.background). The split is danger-only: text.warning, text.success, and text.upsell match their group's .text token on the 700 rung.
Icon tokens mirror text tokens one-for-one — use the matching pair so icons never drift from adjacent copy. Hue-colored icons sit on the 600 rung per Figma — one step brighter than most text counterparts (icon.danger and text.danger match).
Each interactive and status group shares one role grammar: background / backgroundHover for fills, border for outlines, base for the solid 600-rung color (with hover / pressed states), and text for on-light copy. Use the group (primary, danger, …) rather than the raw hue, and use its roles together as a matched set — danger.text on danger.background, not on their own. For plain copy on a normal surface, use text.* instead.
The dark material: the object in hand, never page structure. A dark surface sets data-theme="dark" with bg="dark.surface", and boxShadow="darkRaised" when it floats. Inside the scope, components keep their usual variants and read these values through the color roles. See the Surfaces foundation page.
Tag and badge tints, each a bg fill with same-hue fg text at 4.5:1 or more. Pick a tone by meaning. Status colors (success, warning, danger) stay the home for errors, destructive actions, and status icons. No component reads these yet. Badge and Alert use the status colors.