Spacing Scale System — Consistent Margin and Padding Tokens

Building a Spacing Scale

A well-designed spacing scale eliminates arbitrary pixel values from your codebase. Instead of debating whether a gap should be 12px or 14px, your team picks from a predefined set of harmonious values.

Linear Scale (4px Base)

The simplest approach multiplies a base unit:

:root {
  --spacing-0: 0;
  --spacing-1: 4px;    /* 0.25rem */
  --spacing-2: 8px;    /* 0.5rem */
  --spacing-3: 12px;   /* 0.75rem */
  --spacing-4: 16px;   /* 1rem */
  --spacing-5: 20px;   /* 1.25rem */
  --spacing-6: 24px;   /* 1.5rem */
  --spacing-8: 32px;   /* 2rem */
  --spacing-10: 40px;  /* 2.5rem */
  --spacing-12: 48px;  /* 3rem */
  --spacing-16: 64px;  /* 4rem */
}

T-Shirt Size Scale

Named sizes are more intuitive for designers:

{
  "spacing": {
    "3xs": "2px",
    "2xs": "4px",
    "xs": "8px",
    "sm": "12px",
    "md": "16px",
    "lg": "24px",
    "xl": "32px",
    "2xl": "48px",
    "3xl": "64px"
  }
}

Geometric Scale

A geometric progression creates more natural visual rhythm:

$spacing-1: 4px;    // base
$spacing-2: 8px;    // 2x
$spacing-3: 16px;   // 4x
$spacing-4: 32px;   // 8x
$spacing-5: 64px;   // 16x

When to Use Each

• Linear: Most flexible, best for general-purpose design systems
• T-shirt: Best for team communication and Figma integration
• Geometric: Best for typographic layouts where optical spacing matters

Applying Spacing Tokens

Use spacing tokens for margins, padding, gaps, and sometimes widths/heights of decorative elements. Avoid using them for content dimensions (images, cards) where specific sizes matter more than rhythm.