Spacing Scale Generator

Produces a typographic-style spacing scale from a base value and a multiplier. Output expresses each step in pixels and rem and labels them with a token name suitable for design system use, such as space-1 through space-12.

Supported scales include linear, geometric, modular (ratio-based), and Fibonacci. Geometric and modular scales are common in modern design tokens because they produce visually balanced steps at small and large sizes.

The mathematical basis for non-linear scales is that human perception of size is logarithmic. A jump from 4px to 8px feels equivalent to a jump from 64px to 128px, not from 64px to 68px. A geometric scale with ratio r produces step n as base × r^n, which spaces sizes evenly on a logarithmic axis. This is the same principle that drives equal-tempered musical tuning and modular type scales.

Common ratios and their typographic origins: 1.125 (major second), 1.2 (minor third), 1.25 (major third), 1.333 (perfect fourth), 1.5 (perfect fifth), 1.618 (golden ratio). The major third (1.25) is the most common starting point for spacing scales because it produces tight increments at small sizes (4, 5, 6.25, 7.81) that round to clean pixel values, and opens up usefully at larger sizes.

A worked example with base 4px, ratio 1.5, eight steps: 4, 6, 9, 13.5, 20.25, 30.4, 45.6, 68.3. Rounded to whole pixels: 4, 6, 9, 14, 20, 30, 46, 68. The Fibonacci variant produces 4, 8, 12, 20, 32, 52, 84, 136 — wider gaps that may feel unbalanced for small UI work but suit editorial layouts. The linear variant produces 4, 8, 12, 16, 20, 24, 28, 32 — even but cramped at the high end and wasteful at the low end.

Limitations: pure mathematical scales do not always produce the most usable values. Tailwind's default spacing scale is a hybrid: linear 0.25rem increments at the small end, larger jumps from 12 onward. This deviates from any single ratio but solves real problems — every value through space-12 lands on a 4px subgrid, simplifying alignment with typography line-heights set in 4px increments. A purely geometric scale would produce 7.59px at a step where 8px is wanted. The generator supports manual overrides for this reason.