How to Build a Design Spacing System: CSS Custom Properties, Tailwind & SCSS

Why Spacing Systems Matter

Without a spacing system, a design accumulates random values: 7px here, 13px there, 22px somewhere else. The result feels off in ways users notice subconsciously. A spacing scale defines a fixed set of allowed spacing values — derived from a base unit multiplied by a ratio — so every margin, padding, gap, and dimension comes from the same family. The result: visual rhythm, faster decisions, and less CSS drift.

Building a Spacing Scale

Start with a base unit — typically 4px or 8px. Multiply by your chosen increments to generate the scale:

Base: 4px

4 × 1  = 4px   (xs  — icon padding, tight inline gaps)
4 × 2  = 8px   (sm  — card padding, input padding)
4 × 3  = 12px  (md  — section gaps, list spacing)
4 × 4  = 16px  (base — standard margin/padding, text indent)
4 × 6  = 24px  (lg  — section padding, card gaps)
4 × 8  = 32px  (xl  — large section spacing)
4 × 12 = 48px  (2xl — hero padding, page margins)
4 × 16 = 64px  (3xl — major layout sections)

The 4px base is the web standard because most screen pixel grids are multiples of 4. An 8px base works well too and reduces the number of tokens.

Output Formats

CSS Custom Properties:

:root {
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 0.75rem;   /* 12px */
  --space-base: 1rem;    /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */
}

Tailwind Config:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        'xs': '0.25rem',
        'sm': '0.5rem',
        'md': '0.75rem',
        'base': '1rem',
        'lg': '1.5rem',
        'xl': '2rem',
        '2xl': '3rem',
        '3xl': '4rem',
      }
    }
  }
}

SCSS Variables:

$space-xs: 0.25rem;
$space-sm: 0.5rem;
$space-md: 0.75rem;
$space-base: 1rem;
$space-lg: 1.5rem;
$space-xl: 2rem;
$space-2xl: 3rem;
$space-3xl: 4rem;

Using the Scale Consistently

The rule: every margin, padding, gap, and layout dimension must come from the scale. If you find yourself wanting a value that isn't there, ask: "Is the next scale value close enough?" Most of the time, yes — and it's worth the slight compromise to maintain consistency.

Generate a Spacing Scale Now

Use ToolsVito's Spacing Scale Generator to create a complete spacing system from any base unit. Copy as CSS custom properties, Tailwind config, or SCSS variables. All generated in your browser.