Design Token Converter
Convert W3C DTCG, Figma, and flat JSON design tokens to CSS variables, SCSS, and Tailwind theme snippets in your browser.
Convert design tokens between JSON, CSS, SCSS, and Tailwind
Design tokens are named values (colors, spacing, typography) shared between design tools and code.
This converter accepts W3C Design Tokens Community Group (DTCG) JSON with
$value fields, flat JSON maps, or pasted :root CSS custom properties,
then emits CSS variables, SCSS, a Tailwind theme.extend snippet, or normalized DTCG JSON.
Everything runs in your browser; tokens are not uploaded.
How to use this tool
- Paste tokens from Figma Tokens Studio, Style Dictionary, or your design system repo.
- Pick an output format (CSS, SCSS, Tailwind, or JSON).
- Review the token count card, then copy or download the generated file.
For color-only workflows, see the Hex to RGB Converter and CSS to Tailwind Converter tools.
Frequently Asked Questions
Which JSON formats are supported?
DTCG files with nested groups and $value leaves, flat key/value JSON, and CSS custom property blocks. Arrays at the root are rejected because tokens must be an object map.
Does this validate token semantics?
It converts names and values without enforcing the full DTCG type system. Use your design tooling for strict schema checks.
How are token names transformed?
Dots in JSON paths become hyphens in CSS variables (color.brand becomes --color-brand). SCSS uses dollar-prefixed variables with the same hyphenated names.
Related Tools
Obfuscate JSON
JSON Patch Diff
APY Calculator
Stock Return Calculator
Confidence Interval for Proportion Calculator
Cash Flow to Debt Calculator
Alt Text Generator
JSON To Rust Serde
Alcohol Units Calculator
Square Feet Triangle Calculator
Hole Volume Calculator
Rental Yield Calculator
Dividing Fractions Calculator
Oblique Triangle Calculator
Square Pyramid Volume Calculator
Manning Equation Calculator
JSON To Flow Converter
Bench Press Calculator
Battery Capacity Calculator
Hex to UTF8 Converter