Design tokens in a JSON file are just the beginning. Without a build pipeline that transforms these tokens into CSS Custom Properties, SCSS variables, Tailwind configurations, or native platform formats, they remain a theoretical construct. The pipeline is the operational heart of every token architecture.

Style Dictionary: The De Facto Standard

Style Dictionary (developed by Amazon, open source) is the most widely used token transformation tool. Version 4 brings native DTCG support, ESM support, and extended transformation APIs.

The workflow: token files (JSON or DTCG format) as input → transformers modify values (e.g., colors from hex to RGB, pixels to rem) → formatters generate output files (CSS, SCSS, TypeScript, Android XML, iOS Swift). Every step is extensible via plugins.

The option outputReferences: true is crucial: it preserves aliasing chains in CSS output. Instead of --color-action-primary: #2563EB, it generates --color-action-primary: var(--color-blue-500) – semantics remain visible in code.

Cobalt UI: DTCG-Native Alternative

Cobalt UI was built from the ground up for the DTCG format. It’s faster than Style Dictionary for large token sets and offers native support for composite token types. For new projects working exclusively in DTCG format, Cobalt UI is the more modern choice.

UnoCSS and Tailwind Integration

Two approaches exist: CSS Custom Properties + Theme Reference where tokens are generated as CSS properties and the framework references them, or Direct Theme Generation where a custom formatter generates framework configuration files directly.

Tool
Strength
DTCG Support
Output Formats
Style Dictionary 4
Ecosystem, Plugins
Yes (native)
CSS, SCSS, JSON, TS, iOS, Android
Cobalt UI
Performance, DTCG-native
Yes (core)
CSS, SCSS, JSON, TS
Tokens Studio
Figma integration
Yes (Export)
JSON (for pipeline)

Key Takeaways

  • Style Dictionary 4 is the de facto standard with native DTCG support and a large plugin ecosystem.
  • Cobalt UI is the DTCG-native alternative – faster and more modern, but with a smaller ecosystem.
  • outputReferences: true preserves aliasing chains in CSS output – crucial for debugging and maintainability.
  • UnoCSS/Tailwind integration works via CSS Custom Properties as bridge or direct theme generation.
  • Figma → Tokens Studio → Git → Style Dictionary → CSS is the established production workflow.
  • All mentioned build tools are open source – the token pipeline belongs to the organization, not a vendor.