Design tool
Spacing Scale Generator
Build geometric spacing scales from a base size and ratio, generating reusable CSS custom property tokens.
Spacing tokens
4px · 8px · 16px · 32px · 64px · 128px
How geometric scales create predictable spacing
Spacing scales provide a predefined set of sizes for padding, margin, gap, and other dimensional properties, enforcing visual consistency across a design. A geometric scale multiplies a base value by a fixed ratio repeatedly to generate each step. The tool accepts three inputs: a base size in pixels (must be greater than zero), a scale ratio (must be greater than zero, typically 1.25 to 2), and a number of steps from 1 to 12. Each step is calculated as base × ratio raised to the step index. A base of 4 pixels with a ratio of 2 produces 4, 8, 16, 32, 64, 128—each value exactly double the previous, creating a clean geometric progression.
The output displays all computed values as a visual list and generates CSS custom property declarations (CSS variables) named --space-1 through --space-n, corresponding to each step. The copy button captures all variable declarations in a single block, ready to paste into a stylesheet. Using spacing tokens instead of hardcoded values ensures consistency and simplifies design-wide adjustments: changing the base size regenerates all tokens automatically.
Computing a six-step scale with base 4 px and ratio 2
The default inputs (base 4, ratio 2, 6 steps) demonstrate a doubling scale, familiar in type systems and design frameworks. Starting at 4 pixels, each step doubles the previous value: 4, 8, 16, 32, 64, 128. This provides exactly six spacing sizes. The middle values (16px and 32px) cover most component padding and gaps, and align with the 8-pixel grid many frameworks use. The progression accommodates fine adjustments (4px, 8px) and generous separation (64px, 128px) within a single, predictable system.
CSS custom properties (variables) beginning with -- are reusable throughout a stylesheet. Using var(--space-3) instead of hardcoding 16px centralizes spacing decisions. If a designer later decides the base should be 5px instead of 4px, regenerating the scale yields 5, 10, 20, 40, 80, 160, and updating the custom property declarations updates every layout reference automatically. This reduces cascading changes and ensures visual harmony.
Scale ratio selection and design implications
A ratio of 1.125 produces subtle, gradual steps (4, 4.5, 5.06, 5.7, 6.4, and so on), suitable for fine-tuning small layouts or typography where small differences matter. A ratio of 1.25 (the major third in musical scale terms) yields moderate steps (4, 5, 6.25, 7.81, 9.77), balancing precision with simplicity. A ratio of 1.5 (the perfect fifth) creates noticeable jumps (4, 6, 9, 13.5, 20.25), useful for general-purpose spacing with fewer tokens. A ratio of 2 produces dramatic doubling (4, 8, 16, 32, 64, 128), offering clear visual hierarchy and simplicity at the cost of larger jumps between adjacent steps.
Fractional or non-standard ratios (e.g., 1.618, the golden ratio) produce irrational step sizes; rounding may distort the scale, so simpler ratios are often preferable in practice. The step count should balance coverage (enough sizes for all layout needs) with maintainability (too many tokens become confusing). Six to eight steps suit most interfaces; twelve steps provide exhaustive granularity for complex design systems.
Common spacing scale configurations and frameworks
- Fine-tuned scale (base 2, ratio 1.25, 8 steps): 2, 2.5, 3.13, 3.91, 4.88, 6.1, 7.63, 9.54. Minimal, precise increments for detailed typography and tight layouts.
- Standard doubling scale (base 4, ratio 2, 6 steps): 4, 8, 16, 32, 64, 128. Familiar across web frameworks; powers of two align with common grid systems.
- Modular scale (base 8, ratio 1.5, 8 steps): 8, 12, 18, 27, 40.5, 60.75, 91.13, 136.69. Balanced intermediate steps; round the larger values to taste in your tokens.
- Generous spacing (base 8, ratio 2, 6 steps): 8, 16, 32, 64, 128, 256. A larger base and ratio produce spacious designs with significant breathing room.
- Dense system (base 2, ratio 2, 10 steps): 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024. Granular steps from minimal to very large, accommodating an extreme range.
Frequently asked questions
What ratio should I choose for my design system?
Ratio choice depends on desired step size and design philosophy. A ratio of 1.25 or 1.5 produces gradual, flexible spacing; a ratio of 2 produces simple, dramatic jumps. Start with a doubling scale (ratio 2) for simplicity, then adjust if your layouts need finer or coarser steps.
How many spacing steps do I actually need?
Most interfaces use 6–8 spacing values effectively. Fewer steps (4–6) force more reuse; more steps (10+) offer flexibility at the cost of decision fatigue. Start with 6 and add steps only if your layouts repeatedly reach beyond them.
Can I manually adjust the generated values?
Yes. The generator produces a starting point. If a computed step (e.g., 19.2px) rounds awkwardly, round it to a cleaner value (20px) in your CSS. Perfection in the formula is less important than usability in practice.
What if I want a non-uniform scale with custom values?
This tool generates geometric (uniform ratio-based) scales. For fully custom scales with arbitrary values, write your CSS custom properties manually: --space-sm: 6px; --space-md: 12px; --space-lg: 24px; etc.
Can spacing tokens be used for font sizes or only spacing properties?
Spacing scales are not limited to margin and padding. The same token system works for line-height, gap, border-width, width, height, or any property accepting pixels. Using a unified scale across all dimensions reinforces visual harmony.
How do I implement these CSS custom properties in my stylesheets?
Paste the generated declarations into the :root selector at the start of your stylesheet: :root { --space-1: 4px; --space-2: 8px; /* ... */ } Then use var(--space-1), var(--space-2), etc., in your component styles. The values cascade throughout the entire page.