Color Tokens

Color tokens are the vocabulary of a modern color system. Instead of picking #1A1F2B because it looks good behind a card, a designer reaches for `surface-raised` and the system resolves that token to the right value for whatever theme is active. Light mode, dark mode, high-contrast mode, rebrand, all handled by changing the token's resolved value, not by repainting the interface.

A token describes a role. `accent-primary`, `content-muted`, `surface-subtle`, `state-hover`. If a token's name describes a color (like `light-blue-2`), it is not really a token. It is a CSS variable with better branding.

The real power shows up at scale. Radix Colors ships 12-step scales per hue with each step pre-mapped to a role. Material Design 3 pairs every `primary` token with a matching `on-primary` so accessibility is encoded at the token layer. Stripe, Linear, and Polaris all run shipped products on token systems that make their palettes portable across themes and components.

Start with the role tiers. Surface, content, accent, state, semantic. Write the tokens before picking the hex values. That is what separates a color system from a color preference.