# Grid & spacing

> 12 columns, 24px gutters, a 1280px container and a 4px base. Density is high but never chaotic.

## Grid

| Token | Value | Use |
| --- | --- | --- |
| `columns` | 12 | the page grid |
| `gutter` | 24px | between columns |
| `container` | 1280px | the widest a page gets |

## Spacing

| Token | Value | Use |
| --- | --- | --- |
| `--space-1` | 4px | badge ↔ text |
| `--space-2` | 8px | internal gap |
| `--space-3` | 12px | chip padding |
| `--space-4` | 16px | default padding |
| `--space-6` | 24px | card padding |
| `--space-8` | 32px | section gap |
| `--space-12` | 48px | block separator |
| `--space-16` | 64px | large section gap |
| `--space-24` | 96px | hero margin |