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) — same for warning/success/upsell.
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.