Design Token Generator

Drop in your brand colors, font stack, type scale, and spacing values — out comes a design tokens JSON file that you can hand to any framework or design tool that reads the W3C tokens format.

The output is structured by category (color, typography, spacing, radius, shadow) with semantic and primitive layers separated. Primitives hold raw values; semantic tokens reference them by purpose (color.action.primary, color.surface.muted) so a brand refresh only touches the primitives.

Feed the JSON into Style Dictionary, Tokens Studio, or directly into Tailwind's config to keep design and code in sync.

Under the hood: the generator emits the W3C Design Tokens Community Group schema. Each token is an object with a $value (the literal value) and a $type (color, dimension, fontFamily, etc.). Semantic tokens reference primitives via the {primitive.path.notation} alias syntax — when a tool resolves the token tree, aliases get replaced with the underlying value. That's how you keep a single source of truth: change color.brand.500 once and every semantic token referencing it updates everywhere.

Worked example: define color.gray.900 = #0f172a (primitive), then color.text.primary = {color.gray.900} (semantic). Your Button component reads color.text.primary, never color.gray.900 directly. Decide later that text should be slightly warmer? Point color.text.primary at color.stone.900 instead. One token edit, every Button updates. Spacing follows the same pattern: space.4 = 16px (primitive), space.gutter = {space.4} (semantic), and your layout reads space.gutter.

Where it falls short: tokens don't capture relational logic. Hover states, focus rings, and motion timing curves often need conditional rules a flat token tree can't express. Most teams pair tokens with a small layer of CSS variables or component-level styles to handle the dynamic parts. Don't try to encode every state into the token file — you'll end up with a 4,000-line JSON that nobody can navigate.

The categories the generator handles by default: color (with primitive shades and semantic roles like text, surface, action), typography (font family, weight, size, line-height, letter-spacing), spacing (a base scale plus semantic gutters), border-radius, shadow (with x/y/blur/spread/color decomposition), z-index, and motion (duration and easing curves). Each category emits as its own subtree under the root tokens object, with $type set to the W3C-defined value type so downstream consumers can validate.

Worked workflow: design hands off Figma file with color and typography variables. Export those via Tokens Studio. Run through the generator to produce a clean primitive/semantic split. Pipe through Style Dictionary to emit tailwind.config.js, CSS custom properties, iOS Swift constants, and Android XML resources from the same source. One token edit, all four platforms update next build.