# Sizing & Spacing — Full Reference

> Base multiple of 8. Smaller spacing = stronger relationship between elements.
> Farther apart (larger spacing) = weaker relationship.

---

## Specials (fractions of the base unit)

| Token  | Value | Usage |
|--------|-------|-------|
| 0.25x  | 2px   | Tightly related elements |
| 0.5x   | 4px   | Tightly related elements |
| 1.5x   | 12px  | Tightly related elements |

---

## General (multiples of 8px)

| Token | Value | Usage |
|-------|-------|-------|
| 1x    | 8px   | Closely related elements — padding and margins |
| 2x    | 16px  | Closely related elements — padding and margins |
| 3x    | 24px  | Elements that may be related within a section |
| 4x    | 32px  | Separation between sections |
| 5x    | 40px  | Separation between sections |
| 8x    | 64px  | Large sections that need space |
| 9x    | 72px  | Large sections that need space |
| 16x   | 128px | Large sections that need space |

---

## Semantic Usage Guide

```
2px  / 4px  → intimately related elements (icon + label, etc.)
12px         → strong relationship (list items, form fields)
8px  / 16px  → internal component padding
24px         → grouping within a section
32px / 40px  → clear separation between distinct sections
64px / 72px  → separation of large blocks
128px        → maximum separation between page sections
```
