Tools

Design Token Converter

Convert between design token formats: paste CSS custom properties and get SCSS variables, JSON in DTCG or Style Dictionary shape, Tailwind config, or TypeScript. Works in both directions, entirely in your browser.

Converter

Pick an input format and an output format independently. Every change re-converts automatically. Aliases such as {color.accent} are resolved transitively and reported, never silently dropped.

Paste any supported format. JSON inputs must be valid JSON. CSS and SCSS inputs use one declaration per line.

0 tokens · 0 aliases · 0 warnings

Worked example

A DTCG token object always uses $value for the value and $type for the type. Keys that start with $ are metadata. Every other nested object is a group, and $type on a group is inherited by its children unless a token overrides it.

DTCG JSON input

{
  "color": {
    "$type": "color",
    "accent": {
      "$value": "#B8422E",
      "$description": "Terracotta accent"
    },
    "accent-hover": {
      "$value": "{color.accent}",
      "$description": "Alias to accent"
    }
  }
}

CSS custom properties output

:root {
  --color-accent: #B8422E;
  --color-accent-hover: #B8422E;
}
  • Alias resolution: {color.accent} points at the token at path color.accent. The converter follows the chain, so accent-hover resolves to #B8422E. A two-step chain such as on-surface pointing at accent-hover resolves transitively to the same root value.
  • SCSS dash-flattening: nested paths become flat dash-joined names. The token at path color.accent-hover becomes $color-accent-hover in SCSS and --color-accent-hover in CSS. Dots in alias paths become dashes in flat formats and are re-nested on the way back.
  • Dimensions stay strings: a dimension such as 16px or 1.5rem is always a quoted string in JSON outputs, never a bare number, matching the DTCG grammar for the dimension type.

Supported types and formats

Token types

  • color — for example #B8422E
  • dimension — unit string such as 16px or 1.5rem
  • fontFamily — string or array, for example ["Inter", "system-ui", "sans-serif"]
  • fontWeight — number or string, for example 700
  • duration — string such as 200ms
  • cubicBezier — array of four numbers, for example [0.4, 0, 0.2, 1]
  • number — plain number such as 0.98

Format notes

  • CSS: --group-token: value; inside :root, kebab-case.
  • SCSS: $group-token: value; with descriptions kept as comments.
  • Style Dictionary: same nesting as DTCG but with plain value and type keys.
  • Tailwind: token groups map into theme.extend buckets such as colors, spacing, and fontFamily.
  • TypeScript: grouped nesting emitted as export const tokens = … as const.

All conversion runs locally on this page. Nothing you paste leaves your browser.