CSS Spacing Scale Generator (Modular Ratio, 5 Exports)

8 steps · ratio 1.500 · base 16px @ sm

Visual cascade · base 16px · ratio 1.500

3xs

0.2963rem

2xs

0.4444rem

xs

0.6667rem

smbase

1rem

md

1.5rem

lg

2.25rem

xl

3.375rem

2xl

5.0625rem

Token table · click any token to copy its var() reference

Advertisement

Base16px
Ratio1.500
Steps8
NamingT-shirt
Unitrem

About this generator

Build a modular CSS spacing scale from a base size + a musical ratio. 8 ratio presets covering the classic intervals — minor 2nd (1.067), major 2nd (1.125), minor 3rd (1.2), major 3rd (1.25), perfect 4th (1.333), augmented 4th √2 (1.414), perfect 5th (1.5), golden φ (1.618). 4-12 steps with a configurable base-index so you get sizes both below and above your base.

Visual cascade — size-proportional rectangles let you see at a glance whether step-3 is too close to step-4 or whether the ratio is too tight / too loose. Token table below — click any token to copy its var() reference.

5 export formats (CSS / SCSS map / Tailwind config / W3C design tokens / JS object) × 3 naming schemes (T-shirt / numeric / step) × 3 units (rem / px / em). Free and MIT-licensed.

✦

Why use this Spacing Scale Builder?

◐

See the cascade, not just the math

AI gives you 4, 6, 9, 14, 21px. This shows the same scale as side-by-side rectangles so you can SEE if step-3 is too close to step-4 — visual judgment beats arithmetic.

⊞

8 modular ratio presets

Minor 2nd through Golden ratio — the same modular scales used in print typography for centuries. Pick one or type any custom ratio.

◉

Three naming schemes

T-shirt sizes (xs, sm, md, lg, xl), numeric (50, 100, 200), or step-based (step-1, step-2). Switch live, the entire export updates.

⎘

Five export formats

CSS variables, Tailwind config, W3C design tokens, SCSS map, JS object. Drop straight into your stack — every format uses the same tokens.

◇

How to build a modular spacing scale

Pick a base size

Usually 16px (1rem) so it aligns with default font-size. The base is your "md" — what every other size is computed from.

Pick a modular ratio

Lower ratio (1.125 minor 2nd) for subtle scale, higher (1.618 golden) for dramatic jumps. 1.5 perfect-fifth is a safe default for most UI.

Set step count + base index

How many steps total (4–12) and which step is the base (the "md"). Steps below the base get smaller (xs, sm), steps above get larger (lg, xl).

Choose a naming scheme

T-shirt sizes are conventional (Tailwind, Bootstrap, Material). Numeric is good for design systems with many sizes. Step-N for engineering-led teams.

Export and ship

Switch to CSS, Tailwind, design tokens, SCSS, or JS. Hit copy. Or share the URL — every parameter encodes into the query string.

◫

Modular ratio reference

Ratio	Vibe	Use for
Minor 2nd · 1.067	`subtle`	Tightest scale — barely-perceptible jumps. Use for dense data UIs where space is at a premium and every step needs to be small.
Major 2nd · 1.125	`gentle`	Slow, gentle scale. Default for content-heavy sites where you don't want shouty hierarchy.
Minor 3rd · 1.200	`balanced`	Sweet spot for most product UI. Tailwind's default font-size scale uses 1.2.
Major 3rd · 1.250	`clear steps`	Each step is clearly bigger than the last. Good when scale needs to be obvious to users (educational, accessible).
Perfect 4th · 1.333	`classic`	Used in print typography for centuries. Strong but not extreme. Bootstrap's default scale.
Aug 4th · 1.414	`paper`	√2 — the ratio used in ISO paper sizes (A4, A5, etc.). Each step is exactly twice the area of the next.
Perfect 5th · 1.500	`dramatic`	Each step is half-again larger. Big visual hierarchy. Good for hero/marketing pages with few but distinctive sizes.
Golden · 1.618	`classical`	φ — the golden ratio. Subjective preference, mathematically arbitrary. Looks good for premium brands.

◈

Common spacing-scale patterns

CSS variables — the recommended pattern

:root {
  --space-xs:  0.25rem;   /* 4px */
  --space-sm:  0.5rem;    /* 8px */
  --space-md:  1rem;      /* 16px */
  --space-lg:  1.5rem;    /* 24px */
  --space-xl:  2.25rem;   /* 36px */
  --space-2xl: 3.375rem;  /* 54px */
}

.card {
  padding: var(--space-md);
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

Tailwind config (extends spacing)

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        'xs': '0.25rem',
        'sm': '0.5rem',
        'md': '1rem',
        'lg': '1.5rem',
        'xl': '2.25rem',
      }
    }
  }
};

// Usage: <div className="p-md gap-sm mb-lg">…</div>

W3C design tokens (Style Dictionary, Tokens Studio)

{
  "spacing": {
    "xs": { "value": "0.25rem", "type": "dimension" },
    "sm": { "value": "0.5rem",  "type": "dimension" },
    "md": { "value": "1rem",    "type": "dimension" },
    "lg": { "value": "1.5rem",  "type": "dimension" }
  }
}

/* Pipes through Style Dictionary to native iOS/Android too */

SCSS map (legacy projects)

$space: (
  'xs': 0.25rem,
  'sm': 0.5rem,
  'md': 1rem,
  'lg': 1.5rem,
);

.card {
  padding: map-get($space, 'md');
  gap: map-get($space, 'sm');
}

✦

Pro tips

Use rem, not px

rem scales with the user's browser font-size. Users with vision needs bump font-size up; rem-based spacing scales with them. Px-only spacing breaks accessibility.

Keep the scale small

Six steps (xs, sm, md, lg, xl, 2xl) covers 99% of UI needs. Adding 3xs through 6xl looks comprehensive but you'll never use them — every extra token is decision overhead.

Match spacing to type

If your type scale uses 1.25 ratio, your spacing scale should too. Mismatched ratios feel subtly wrong even when individual values look correct.

Base index = your md

The base step is what your default `padding` and `gap` use. Set it to wherever your "comfortable" UI density sits — usually 16px for content, 12px for dense data tables.