Why use tokens instead of raw hex values?

Tokens decouple meaning from value, so you restyle or theme by changing the token once instead of editing every hardcoded color.

How do tokens support dark mode?

Define a second set of values for the same token names; switching themes swaps the values while your components reference the same tokens.

Semantic Tokens

Assign current colors to semantic variables for product use

Semantic Variables

Select a variable to view its use and color value

UI Preview

Check semantic palette hierarchy in buttons, cards, text and state alerts

About Design Tokens

Map palette colors to semantic roles: primary, surface, text, border, success, warning, danger. Export as CSS custom properties or Figma variable JSON. Once colors are mapped to roles, the tool outputs both CSS custom properties and Figma variable JSON, so design and code share the exact same naming.

Useful when a team wants design and code to reference the same color names, avoiding the classic mismatch where 'primary' in Figma becomes 'blue-500' in code.

Common questions

What are design tokens? Colors assigned to semantic roles — primary, surface, text, border, success, warning, danger — exported as CSS variables or Figma variables.
Why use tokens instead of raw hex values? Tokens decouple meaning from value, so you restyle or theme by changing the token once instead of editing every hardcoded color.
How do tokens support dark mode? Define a second set of values for the same token names; switching themes swaps the values while your components reference the same tokens.