Design Tokens
Token Forge
Design tokens are the bridge between intent and implementation. A designer says
"the heading is large." A token says --text-xl: 1.953rem.
Configure fonts, scale ratios, spacing units, and rhythm — then export as CSS
custom properties, Tailwind config, or JSON. Stop guessing. Start deriving.
Design Token Generator
Build a complete type system. Export it. Stop guessing.
The quick brown fox
Paragraph text should be easy to read over long distances. Choose a typeface with open apertures and comfortable x-height. Your body font is doing the real work here — respect it.
const scale = computeTokens(base, ratio);Why Tokens, Not Values
A codebase without tokens has values. font-size: 24px
on one page, font-size: 1.5rem
on another, font-size: 25px
on a third. Three developers, three numbers, one intention: "large heading." Tokens
collapse that ambiguity into a single decision that propagates everywhere.
The deeper value is not consistency — it is derivation. When your type scale uses a Perfect Fourth ratio (1.333), every step is mathematically related to every other step. Change the base size and the entire scale recomputes. Change the ratio and every heading, subheading, and caption adjusts proportionally. The system holds because the relationships hold.
Tokens are also the only reliable way to support theming, density modes, and responsive adjustments without rewriting styles. Dark mode is not "change 47 color values." It is "swap the surface and text token sets." That only works when every surface and text color is a token, not a literal.
What It Produces
Type Scale
Nine steps from 2xs to 3xl, derived from a base size and a musical ratio. Eight
ratios available — Minor Second through Golden Ratio. Fluid type via
clamp() optional,
with configurable viewport breakpoints.
Spacing Scale
Thirteen steps from half-unit to 24× the base. Configurable base unit (2px to 8px). Every value is a multiple — no exceptions. The scale covers component padding, section gaps, and page margins from a single source of truth.
Font Pairing
Display, body, and monospace stacks loaded from Google Fonts. Live preview shows the trio working together. The preview is the test: if the heading and body fight for attention, the pairing is wrong.
Rhythm Controls
Weight, line-height, and letter-spacing for headings and body independently. These are the parameters that make type feel considered or careless. The preview updates live — adjust until the rhythm breathes.
Three Exports, One Source
CSS Custom Properties — drop into any
project. Font stacks, type scale, spacing scale, weights, line-heights, tracking.
A complete :root block.
Tailwind Config — extends your
tailwind.config.js with
fontFamily, fontSize (with line-height tuples), and spacing overrides. Paste and go.
JSON — structured token data for build tools, Figma plugins, or any pipeline that consumes design decisions as data. Fonts, scale, spacing, and weights in a single portable object.