Overview
Our spacing scale is built on a 4px baseline. Using consistent spacing values creates a balanced and rhythmic UI layout.
Spacing Scale
The scale ranges from minute adjustments (1px) to large layout gaps (96px).
| Variable | Value | Visual |
|---|---|---|
| --spacing-none | 0px (0px) | |
| --spacing-3xs | 1px (1px) | |
| --spacing-2xs | 0.125rem (2px) | |
| --spacing-xs | 0.25rem (4px) | |
| --spacing-sm | 0.5rem (8px) | |
| --spacing-md | 0.75rem (12px) | |
| --spacing-lg | 1rem (16px) | |
| --spacing-xl | 1.5rem (24px) | |
| --spacing-2xl | 2rem (32px) | |
| --spacing-3xl | 3rem (48px) | |
| --spacing-4xl | 4rem (64px) | |
| --spacing-5xl | 5rem (80px) | |
| --spacing-6xl | 6rem (96px) |
Usage
Apply spacing using CSS variables in padding, margin, gap, and grid layout properties.
.my-card {
padding: var(--spacing-lg);
margin-bottom: var(--spacing-xl);
gap: var(--spacing-md);
}