Spacing Calculator

Generate consistent spacing scales for design systems with CSS and SCSS variable output

Select a base unit and scale type to generate a consistent spacing system. The calculator creates spacing values with semantic names (xs, sm, md, etc.) and exports them as CSS custom properties or SCSS variables for your design system.

Configuration

Set up your spacing scale parameters

Base Unit (px)

4px Grid

8px Grid

Standard spacing (most common)

Scale Type

Linear Scale

Geometric Scale

Even increments (1x, 2x, 3x, 4x...)

Custom Base Unit

Range: 1-32px

Common Use Cases

4px Grid: Fine UI details, form spacing, icons

8px Grid: Standard layouts, cards, sections

Linear: Predictable, mathematical progression

Geometric: Harmonious ratios, visual hierarchy

Visual Preview

Spacing values displayed as visual boxes (scaled for readability)

3xs

2px

Extra extra extra small

2xs

4px

Extra extra small

6px

Extra small

8px

Small

10px

Medium (base)

12px

Large

16px

Extra large

2xl

20px

Extra extra large

3xl

24px

Extra extra extra large

4xl

32px

4x large

5xl

40px

5x large

6xl

48px

6x large

Export Code

Copy CSS custom properties or SCSS variables to use in your project

CSS Custom Properties

:root {
  --spacing-3xs: 2px;
  --spacing-2xs: 4px;
  --spacing-xs: 6px;
  --spacing-sm: 8px;
  --spacing-md: 10px;
  --spacing-lg: 12px;
  --spacing-xl: 16px;
  --spacing-2xl: 20px;
  --spacing-3xl: 24px;
  --spacing-4xl: 32px;
  --spacing-5xl: 40px;
  --spacing-6xl: 48px;
}

Usage Example

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

Spacing Reference

Complete spacing scale with values and variable names

Size	Value	Multiplier	CSS Variable	SCSS Variable
3xs	2px	0.25×	--spacing-3xs	$spacing-3xs
2xs	4px	0.5×	--spacing-2xs	$spacing-2xs
xs	6px	0.75×	--spacing-xs	$spacing-xs
sm	8px	1×	--spacing-sm	$spacing-sm
md	10px	1.25×	--spacing-md	$spacing-md
lg	12px	1.5×	--spacing-lg	$spacing-lg
xl	16px	2×	--spacing-xl	$spacing-xl
2xl	20px	2.5×	--spacing-2xl	$spacing-2xl
3xl	24px	3×	--spacing-3xl	$spacing-3xl
4xl	32px	4×	--spacing-4xl	$spacing-4xl
5xl	40px	5×	--spacing-5xl	$spacing-5xl
6xl	48px	6×	--spacing-6xl	$spacing-6xl

Design System Integration

Implementation Tips:

• Use CSS variables for dynamic theme support
• Apply spacing consistently across components
• Test spacing scale on different screen sizes
• Document your spacing system for team use
• Consider accessibility in touch target sizing

Common Spacing Applications:

• Component padding and margins
• Grid gaps and flex spacing
• Form field spacing
• Typography line heights
• Icon and button positioning