Design tokens guide

Export color tokens for CSS custom properties, Tailwind config, JSON design systems, and cross-platform apps.

What are design tokens?

Design tokens are named values (e.g. color.primary.500) that keep design and code in sync. They reduce hard-coded HEX values scattered across codebases.

Export formats

CSS variables work everywhere on the web. Tailwind scales map tokens to utility classes. JSON exports feed Figma plugins, mobile themes, and documentation sites.