Your files stay on your device

# Design Token Converter

Read DTCG design tokens or CSS and SCSS variables and write them as CSS custom properties, SCSS, JS or TS objects, a Tailwind theme, or resolved DTCG JSON.

Paste tokens to convert them.

Alias references resolve recursively with cycle detection, and $type inherits from enclosing groups, with a token's own $type winning. The alias toggle applies to the CSS and SCSS outputs only; JS, TS, Tailwind and DTCG outputs are always resolved. Composite values (typography, shadows) become JSON text in CSS and SCSS, because those languages cannot express them directly. The Tailwind target buckets tokens by type into theme namespaces; an untyped token has no namespace and is reported instead of guessed. CSS and SCSS inputs carry no type, so the DTCG and Tailwind targets infer one from the value shape and say so in the report. SCSS references written as $other inside a value are left untouched; only DTCG-style {alias} references resolve.
Options

## More regex & cron tools

- [JSON converter](/json/convert)
- [Color converter & contrast](/color/converter)
- [JSON formatter](/json/formatter)
[All regex & cron tools](/dev)

Was this tool useful?
YesNo

---

Canonical HTML: https://nutter.tools/dev/design-token-converter
Markdown version: https://nutter.tools/dev/design-token-converter.md
Plain-text version: https://nutter.tools/dev/design-token-converter.txt
Agent index: https://nutter.tools/llms.txt