# Spacing

4px-base scale: every spacing token is a multiple of 4px.

| Token | Value | px |
|---|---|---|
| `--spacing-1` | 0.25rem | 4px |
| `--spacing-1-5` | 0.375rem | 6px |
| `--spacing-2` | 0.5rem | 8px |
| `--spacing-3` | 0.75rem | 12px |
| `--spacing-4` | 1rem | 16px |
| `--spacing-5` | 1.25rem | 20px |
| `--spacing-6` | 1.5rem | 24px |
| `--spacing-8` | 2rem | 32px |
| `--spacing-10` | 2.5rem | 40px |
| `--spacing-12` | 3rem | 48px |
| `--spacing-16` | 4rem | 64px |
| `--spacing-20` | 5rem | 80px |

## Usage patterns

- **Component padding:** `spacing-3` to `spacing-6`
- **Section gaps:** `spacing-8` to `spacing-16`
- **Page padding:** `spacing-6` horizontal, `spacing-8` to `spacing-16` vertical
- **Inline gaps (icons, badges):** `spacing-1` to `spacing-2`

Never use arbitrary pixel values — always use a token. If you need a value not in the scale, use the nearest token and note why.