Style Dictionary Tokens

Transform design tokens into platform code with Style Dictionary. Defines a single source of truth for color, spacing, and typography, then builds CSS variables, Tailwind config, iOS/Android, and JS outputs from one token set.

This skill helps you operationalize design tokens with Style Dictionary. It structures token JSON with the W3C DTCG format, configures transforms and formats, generates CSS custom properties, SCSS, Tailwind theme, JS/TS, and native platform files, handles theming and aliasing, and wires the build into CI so design and code never drift.

When to use

Use when maintaining a design system that must stay in sync across web and native — turning one canonical token file into CSS variables, Tailwind config, and platform-specific outputs.

Examples

Tokens to CSS + Tailwind

One token set, multiple outputs

Configure Style Dictionary to build CSS custom properties and a Tailwind theme config from a DTCG-format token file with color, spacing, and font scales

Multi-theme output

Light and dark from aliases

Set up Style Dictionary with base and semantic token layers to generate separate light and dark CSS variable sets from shared primitives