Spacing Scale Generator

A modular scale is a set of values derived from a single base value and a ratio — each step is the previous one multiplied by the ratio. The idea comes from typographic traditions going back centuries: the same ratios you hear in musical intervals, like the perfect fourth (4:3) and the golden ratio (~1.618), produce visually harmonious series of sizes.

Which ratio to pick

• 1.125 – Major Second: very subtle. Good for tight, information-dense UIs where you want distinct levels without huge jumps.
• 1.2 – Minor Third:the workhorse. Most design systems (including Material and Tailwind's default text scale) sit near this ratio.
• 1.25 – Major Third: a clear step between levels — good for marketing pages with bold hierarchy.
• 1.333 – Perfect Fourth: editorial, big headings.
• 1.618 – Golden Ratio: dramatic. Usually too much for dense product UIs but striking for hero typography.

Applying the scale

Dump the generated custom properties into your :root, then reference them consistently: padding: var(--space-3) instead of magic numbers. You can use the same scale for spacing and type sizes, or build two separate scales with different ratios if you want looser rhythm in type and tighter rhythm in spacing.