Spacing Scale Generator
Generate a modular spacing scale with CSS custom properties
Generate a modular spacing scale with CSS custom properties
:root {
--space-0: 1.000rem; /* 16px */
--space-1: 1.250rem; /* 20px */
--space-2: 1.563rem; /* 25px */
--space-3: 1.953rem; /* 31.25px */
--space-4: 2.441rem; /* 39.06px */
--space-5: 3.052rem; /* 48.83px */
--space-6: 3.815rem; /* 61.04px */
--space-7: 4.768rem; /* 76.29px */
}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.
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.