A spacing scale is the small, fixed set of spacing values a design system allows for padding, margin, and gap. Picking values from a defined scale instead of ad hoc numbers is what makes a UI feel rhythmic and consistent. This generator builds that scale from a single base unit and a growth rule, then hands you the code ready to paste.
How it works
Each step is derived from the base unit and the chosen growth strategy:
geometric: step(n) = base × ratio^n
linear: step(n) = base × (1 + (ratio − 1) × n)For a 4px base with a 1.5 ratio, the geometric scale produces roughly 4, 6, 9, 14, 20, 30, 46, 68. Every value is rounded to the nearest whole pixel for crisp rendering, and the rem equivalent is that pixel value divided by 16 (the default root font size).
Choosing a base unit
4px and 8px are the dominant choices in production design systems:
- The 4-point grid (popularized by Material Design) gives fine-grained control at small sizes — useful for icon padding, chip heights, and dense data tables where 8px steps feel coarse.
- The 8-point grid (common in many established systems) produces fewer values that are easier to memorize and reference. At large screen sizes the 8px jumps feel proportionally smaller, making it a good default for marketing and editorial layouts.
Avoid bases like 5px or 6px — they don’t divide evenly into common container widths (320, 360, 375, 390, 414, 768, 1280) and create non-integer values that blur on non-retina displays.
Geometric vs. linear growth: when to use each
Geometric (exponential) growth multiplies each step by the ratio, so gaps
accelerate. A base of 4px with ratio 2 gives: 4, 8, 16, 32, 64, 128. This is
natural for spacing that relates to typography — the same kind of scale that
produces harmonious type sizes also produces harmonious spatial rhythm. It suits
component-based UI where the difference between xs padding and xl padding
spans an order of magnitude.
Linear (arithmetic) growth adds the same increment each step. A base of 4px with a 4px increment gives: 4, 8, 12, 16, 20, 24. This is predictable and easy to reason about in absolute terms — every step is “4 more pixels.” It suits form layouts, data tables, and spacing that needs to be explainable at a glance.
The classic Tailwind CSS spacing scale (1=4px, 2=8px, 3=12px, 4=16px…) is essentially a linear scale with a 4px increment. The 8-step ratio you see in many Figma design systems (8, 16, 24, 32, 40, 48, 56, 64) is linear with an 8px base.
Output formats
CSS custom properties output looks like this (for a 4px base, 1.5 ratio, 6 steps):
:root {
--space-0: 4px; /* 0.25rem */
--space-1: 6px; /* 0.375rem */
--space-2: 9px; /* 0.5625rem */
--space-3: 14px; /* 0.875rem */
--space-4: 20px; /* 1.25rem */
--space-5: 30px; /* 1.875rem */
}Tailwind config output gives you a spacing object to drop into tailwind.config.js,
replacing the default scale or extending it — depending on whether you want to
constrain to just these values or supplement the defaults.
How many steps?
Most design systems land between 8 and 14 steps. More than 16 tokens rarely provides meaningful differentiation — the values become hard to distinguish visually, and engineers reach for whatever is “close enough” rather than the semantically right one. Fewer than 6 makes it hard to express the range from icon padding (4px) to section gaps (64px+).
A reasonable starting point: generate 10 steps, name the middle 2–3 as your “default” spacing sizes (button padding, card padding, list gap), and trim any extremes you never actually need.