# Foundations · Breakpoints

Five mobile-first breakpoints, aligned to Tailwind defaults so utility classes work without remapping.

| Token | Min width | Use |
|-------|-----------|-----|
| `sm`  | 640px     | Larger phone / small tablet |
| `md`  | 768px     | Tablet portrait |
| `lg`  | 1024px    | Tablet landscape / small laptop |
| `xl`  | 1280px    | Standard desktop |
| `2xl` | 1536px    | Wide desktop |

## App shell behaviour

| Width | Layout |
|-------|--------|
| < 768px (`md`) | Sidebar off-canvas (drawer). Top bar collapses to brand + menu icon. |
| 768–1023px (`md`–`lg`) | Sidebar icon-only (72px). |
| ≥ 1024px (`lg`) | Sidebar expanded (240px). |
| ≥ 1280px (`xl`) | Optional right-rail / detail column appears. |

## Container

Max content width is 1200px, centered, with side padding of 16px (mobile) → 24px (tablet) → 32px (desktop).

## Rules

- ✅ Always mobile-first. Stack to single column below `md`; introduce side-by-side at `md`+.
- ✅ Test the 320px width — that's the floor.
- ❌ Don't use device-specific breakpoints (iPad, iPhone). Design for content reflow, not specific hardware.