Spacing

Multiplicative scale based on a 4px grid. Use tokens, not raw values.

xs — 4px

sm — 8px

md — 16px

lg — 24px

xl — 32px

2xl — 48px

3xl — 64px

Usage

.card { padding: var(--space-xl); gap: var(--space-lg); }
.button { padding: var(--space-sm) var(--space-lg); }

Rules

1. Never use raw pixel values — always use a spacing token.
2. Stick to multiples of the 4px base.