HomeDeveloper toolsDesign Tokens to CSS

Design Tokens to CSS

Convert scalar design tokens and token aliases into CSS variables.

Processing stays in your browser. Supports scalar string and number $value tokens with aliases. Composite token values are rejected. Review CSS units for your design system.

How to use the design tokens to css

Convert scalar design tokens and token aliases into CSS variables. Complete the tokens json fields above, or upload a UTF-8 text file for tokens json. Choose Run tool, review the output, then copy or download the result.

Example

A brand token becomes --brand: #2f7e4e.

Good to know

Supports scalar string and number $value tokens with aliases. Composite token values are rejected. Review CSS units for your design system.