Design & SVG

Design Token JSON Generator

Add named colors, generate a spacing scale and a font-size scale, then export it all as a single design tokens JSON file.

Colors

Spacing scale

Font size scale

How to use the design token generator

  1. Add your colorsName each color token and pick its value.
  2. Set your scalesConfigure a spacing scale and a font-size scale from a base value.
  3. Generate and downloadPreview the JSON, then copy it or download tokens.json.

A simple, consistent token format

Every token is written as an object with a value field, following a common convention used by design token pipelines, so the file stays easy to extend with extra metadata like descriptions later.

Color tokens

Each named color becomes its own entry under the color group, ready to map to CSS variables or platform-specific colors.

Spacing tokens

A linear scale numbered 1 upward, generated from your base pixel value and step count.

Font-size tokens

A geometric scale built from a base size and ratio, plus your chosen font family.

Portable JSON

Plain JSON output means it can be consumed by build tools, style dictionaries, or read directly by your app.

Design Token JSON Generator FAQ

What format does the generated JSON follow?

Each token is written as an object with a value property, a common convention used by design token tools so extra metadata can be added later without breaking the structure.

Can I add as many colors as I want?

Yes, use the add color row to create as many named color tokens as your project needs, and remove any you don't want.

How is the spacing scale generated?

It multiplies your base spacing value by 1, 2, 3 and so on up to your chosen step count, producing a simple linear scale.

How is the font-size scale generated?

It multiplies your base font size by your chosen ratio at each step, producing a geometric type scale.

Can I import this file into a design tool?

Many design token pipelines can consume this JSON shape directly or with light transformation; check your specific tool's expected format if it differs.

Try other free tools

More handy tools from My Panda Toolbox.