What format are the tokens in?

They follow the W3C Design Tokens Community Group (DTCG) draft format. Each token is an object with a $value and a $type, and tokens are nested under group names like color, spacing, and shadow.

Are the colors generated randomly?

They are seeded, not truly random. A base hue is derived from your seed, and the accent hue is offset by roughly 150 to 210 degrees to stay visually complementary. The same seed always yields the same palette.

What type scale does it use?

A 1.25 (major third) modular scale anchored at a 16px base. Sizes step up and down geometrically, which is a common, harmonious choice for design-system typography.

Can I use this output directly in code?

The JSON is valid DTCG and can be fed to token transformers such as Style Dictionary, which convert it into CSS variables, Sass, JSON, or platform-specific formats.

Design Token Set Generator

On-brand design tokens in seconds

A design token set is the single source of truth for the visual decisions in a design system: which blues, which font sizes, which spacing steps. This tool generates a complete, internally consistent set following the W3C Design Tokens (DTCG) format, so you can prototype a system or seed a tokens pipeline without hand-writing JSON.

How it works

Each token group is built from a single integer seed using a small mulberry32 pseudo-random generator, so output is fully reproducible.

Color ramps are generated in HSL. A base hue comes from the seed; the accent hue is offset by roughly 150 to 210 degrees so the two stay complementary. Each ramp has 10 lightness steps from 100 (light) to 1000 (dark), converted to hex.
Type scale uses a 1.25 modular ratio on a 16px base: base * 1.25^(i-2).
Spacing and border-radius use a 4px-based scale.
Shadows emit a structured DTCG shadow object with color, offset, blur, and spread.

Each leaf token is an object such as:

{ "$value": "#2f6fed", "$type": "color" }

Tips and notes

Use the same seed across runs to keep a brand consistent between mockups. The output is a draft DTCG document, so it transforms cleanly with tools like Style Dictionary into CSS variables or platform formats. Always check the rendered ramp for contrast before shipping; the generator aims for harmony, not WCAG guarantees.