Skip to content
Style-Dictionary logo, Pascal the chameleon. Style Dictionary

Design Tokens Community Group

The Design Tokens W3C Community Group’s (DTCG) goal is to “provide standards upon which products and design tools can rely for sharing stylistic pieces of a design system at scale”.

The Community Group publishes a specification defining how Design Tokens ought to be formatted for cross-tool and cross-platform interoperability.

As of version 4, Style Dictionary has first-class support for the DTCG format.

Convert your tokens to the DTCG format

We provide a tool that converts design tokens from the Style Dictionary v3 JSON format to the DTCG format:

What it does:

  • ✅ Converts value, type and description design token property keys into $value, $type and $description respectively.
  • ✅ Moves $type properties from the uppermost common ancestor token group to individual design tokens

What it does not do (at the moment, suggestions welcome):

  • ⛔ It does not refactor type values commonly used to the DTCG types (for example: "$type": "size" -> "$type": "dimension").

Live demo