Color Tokens
Named color variables tied to roles in a design system rather than raw hex values, so the same role can resolve to different colors in different themes.
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.
Learn more in our full guide: Read the article
Related Terms
Color Palette
The defined set of colors a brand uses across all materials, typically including primary, secondary, accent, and neutral colors.
Visual Identity
The visible elements of a brand: logo, color palette, typography, imagery style, and layout patterns.
Color Harmony
The pleasing arrangement of colors based on their relationships on the color wheel. Complementary, analogous, triadic, and split-complementary are the most common harmony types.