How to use the Design Tokens JSON Generator
- 1. List colours and fontsOne per line as name | value.
- 2. Set the scalesBase font size, type ratio, spacing unit and radius values.
- 3. Pick a format and exportW3C DTCG JSON, Style Dictionary JSON or CSS variables.
What the defaults produce
Seven colours, three font families, six font sizes from a 16 px base at a 1.25 ratio, eight spacing steps on a 4 px unit and four radius values make 28 tokens. In the default W3C Design Tokens (DTCG) format each token has a $value and a $type: colours are hex strings of type color, font families are arrays of font names, and dimensions are objects such as {"value": 16, "unit": "px"}. Radius 9999 is named full, for pill shapes.
Choose CSS and the same tokens become variables such as --color-primary, --text-lg, --space-4 and --radius-md.
Why tokens help
- One source: designers and developers use the same names and values, so the product stays consistent.
- Easy changes: update primary once and every button, link and badge follows.
- Many outputs: tools like Style Dictionary turn one token file into CSS, Android XML and iOS Swift.
- Theming: a dark theme is a second set of values with the same names.
The DTCG format reached its first stable version in 2025 and support varies by tool, so check what your tools read; older Style Dictionary setups expect plain value keys, which the second format gives. Inputs are validated, and font stacks cannot contain characters that would break CSS. Generate the colour scale with the Tailwind colour palette generator and the sizes with the type scale generator.
Frequently asked questions
What is the difference between DTCG and Style Dictionary format?
DTCG uses $value and $type keys defined by a W3C community group. Classic Style Dictionary files use value and optional type keys. Newer Style Dictionary versions can read both.
Can Figma import these tokens?
Figma variables can be imported through plugins such as Tokens Studio, which read JSON tokens. Native support is changing, so check the plugin's documentation.
Is the Design Tokens JSON Generator free?
Yes, the Design Tokens JSON Generator is free. The first time you generate your first tokens, you are asked for your name and WhatsApp number once. After that, this and every other Uncodemy tool opens straight away without the form.