Spacing Scale

Our spacing system uses an 8px base unit with mathematical progression, ensuring visual rhythm and consistency across all components.

The Scale

--space-0

0 (0)

No spacing

--space-0-5

0.125rem (2px)

Hairline

--space-1

0.25rem (4px)

Micro

--space-2

0.5rem (8px)

Base unit

--space-3

0.75rem (12px)

Small gaps

--space-4

1rem (16px)

Standard

--space-6

1.5rem (24px)

Comfortable

--space-8

2rem (32px)

Large

--space-12

3rem (48px)

Section

--space-16

4rem (64px)

Layout

--space-32

8rem (128px)

Page section

Core Principles

1. 8px Base Unit

All spacing values are multiples or fractions of 8px, aligning with common screen resolutions.

2. Mathematical Progression

Each step maintains at least 25% difference for perceptual distinction.

3. Limited Options

Only 11 spacing values force consistent decisions and prevent arbitrary spacing.

Usage Patterns

/* Component padding */
padding: var(--space-4); /* 16px - standard */

/* Section spacing */
margin-bottom: var(--space-8); /* 32px - large */

/* Inline elements */
gap: var(--space-2); /* 8px - base unit */

/* Page sections */
padding: var(--space-16) var(--space-8); /* 64px 32px */

Common Compositions

Card padding: --space-6 (24px)
Button padding: --space-2 × --space-4 (8px × 16px)
Section gaps: --space-12 (48px)
Page margins: --space-16 or --space-32

Responsive Spacing

Spacing scales proportionally on smaller screens:

Mobile: Use one step smaller for padding
Tablet: Use standard spacing
Desktop: Use generous spacing for breathing room