Spacing Scale Generator

Spacing Setup

Choose a base size and spacing feel

Base spacing

Unit

Scale feel

Good defaults

Spacing Tokens

3xs

2px

2xs

2px

4px

5px

8px

12px

18px

2xl

27px

3xl

41px

Copyable CSS

:root {
  --space-3xs: 2px;
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 5px;
  --space-md: 8px;
  --space-lg: 12px;
  --space-xl: 18px;
  --space-2xl: 27px;
  --space-3xl: 41px;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.section {
  padding-block: var(--space-2xl);
}

Use smaller tokens for tight controls, md for common gaps, and xl or larger for sections. Keep the scale small enough that teams can remember it.

Tool Categories