Grid visual (12 columns)
Use 12 columns on desktop and collapse to 4 columns on mobile.
| Breakpoint | Label | Use it for |
|---|---|---|
| ≤ 480px | Mobile | Single-column, big tap targets, simplified nav |
| 481–768px | Large mobile / small tablet | Two-up cards only if it stays readable |
| 769–1024px | Tablet | Grid begins, but keep measure controlled |
| ≥ 1024px | Desktop | Full grid, denser information, 44px controls |
| ≥ 1280px | Wide | Only if you have a real need (don’t stretch text) |
Spacing is a conversion lever because it controls scan speed. Use a strict rhythm.
Rule: if you can’t name the spacing token, you’re creating inconsistency.