Spacing Scale Generator

Spacing Scales: Why They Make Designs Feel Professional

Pick up any well-designed app and pay attention to the gaps, paddings, and margins. You'll notice consistency, different components share spacing values; the page has rhythm; nothing feels arbitrary. That consistency comes from a spacing scale: a finite set of allowed spacing values that all components use. This tool generates such scales using common mathematical patterns and exports them in the formats design systems consume.

Why a Scale?

Before scales, designers pick values per-component:

• Header padding: 22px
• Card margin: 17px
• Button padding: 11px / 14px
• Section gap: 38px

Each is defensible alone. Together, they look chaotic, no shared rhythm. Users perceive this subconsciously: the design feels "unfinished" or "amateur" without being able to say why.

With a scale (say, 4, 8, 12, 16, 24, 32, 48, 64):

• Header padding: 24px
• Card margin: 16px
• Button padding: 12px / 16px
• Section gap: 48px

Same approximate values, but all from a constrained set. The page now has a unified rhythm.

The cost: occasionally you want 14px but only 12 or 16 is available. Pick the closer one; the design is better for the constraint.

Scale Types

Linear

Even steps (often multiples of 4 or 8). Pros: easy to remember, predictable, fine-grained at small sizes. Cons: jumps feel mechanical at larger sizes; gets noisy with many steps.

Geometric (Power of 2)

Each step doubles. Pros: clear hierarchy ("twice as much"), works well for layout-scale spacing. Cons: too few small values; gaps too wide for fine-tuning.

Hybrid: power-of-2 between key values, with fine-grained steps at the small end:

Fibonacci

Each step = sum of previous two. The ratio approaches the golden ratio (φ ≈ 1.618), supposedly aesthetically pleasing. Used by some designers; less common in code-driven design systems.

Modular (Ratio-Based)

Pick a base and a ratio:

Round to nicer numbers:

The "modular scale" approach. Common ratios: 1.2 (minor third), 1.25 (major third), 1.333 (perfect fourth), 1.414 (√2), 1.5 (perfect fifth), 1.618 (golden ratio).

Tailwind's Default Scale

Tailwind ships with a thoughtful default:

Each unit = 4px (at the default 16px root font size). Names match px / 4 mostly: p-4 = padding 16px.

This is a hybrid: fine-grained at small sizes, expanding gaps at larger sizes. Most teams use it directly; some customize.

Output Formats

CSS Custom Properties

Pros: framework-agnostic, runtime-overridable (e.g., compact mode toggles smaller values).

Tailwind config

Design Tokens (JSON / W3C format)

Used by tools like Style Dictionary to generate platform-specific outputs (iOS, Android, web).

SCSS variables (legacy)

Vertical Rhythm

For text-heavy pages, spacing aligns with line-height to create vertical rhythm, text baselines fall on a regular grid:

The result: a baseline grid. Each line of text sits on a 24px-spaced invisible grid. Editorial sites (Medium, NYT) use this religiously; app UIs are looser about it.

Common Patterns

Component spacing

Stack spacing (vertical between siblings)

Small gaps between related items, larger between sections:

• Adjacent paragraphs: 16px
• Form fields: 16-24px
• Sections within a card: 24-32px
• Pages/major sections: 48-64px

Inline gaps (horizontal in a row)

• Tight (badges, chips): 4-8px
• Normal (button group, nav items): 12-16px
• Loose (toolbar groups): 24-32px

Pitfalls

Too many steps. A scale with 40 values isn't a scale, it's an unconstrained choice. Aim for 10-20.

Inconsistent units across the scale. Mixing px and rem and percentages. Stick to one (mostly rem).

Scale defined but never enforced. Adding the scale to your config does nothing if developers still use arbitrary values. Use linting (stylelint-no-unknown-spacing) or framework constraints (Tailwind only lets you use config values, mostly).

Different scale per breakpoint. Some teams want tighter spacing on mobile, looser on desktop. Either define multiple scales or use clamp() to smoothly scale. Adding "mobile vs desktop" arbitrarily doubles the system's complexity.

Spacing inflation. Sections start at 32px, but design adds 40px, then 48px, then 64px to make sections feel "more spacious." Pretty soon every section is 128px. Resist; use the scale and trust the constraint.

Spacing vs Negative Space

These tools measure positive distances. Equally important: negative space, the empty room around elements. A button can have 12/24px padding but still feel cramped if it's tight against neighboring buttons. The scale governs both: padding (inside) and margin/gap (outside).

A common pattern: use larger gaps between unrelated elements, smaller gaps between related elements. The eye groups things that are closer together.

Privacy

Generation is pure math in your browser, multiplication, ratio computation, Fibonacci recursion. Token names and value formatting happen in JS. Output is templated locally. Open DevTools Network during use: zero outbound requests. Your design system's token names (which sometimes hint at brand identity, product structure, or unreleased product lines) stay in the tab.