Foundations
Space and layout
The 4-point spacing scale, control heights, touch targets, breakpoints and window classes.
Spacing
A 4-point scale shared by web, iOS and Android.
- 00 px
- 14 px
- 28 px
- 312 px
- 416 px
- 520 px
- 624 px
- 728 px
- 832 px
- 1040 px
- 1248 px
- 1456 px
- 1664 px
- 2080 px
- 2496 px
- 32128 px
- 0.52 px
- 1.56 px
- 2.510 px
Controls and targets
Heights, targets and rows every control lines up to.
| Token | Values (px) |
|---|---|
| controlHeight | lg 48 · md 40 · sm 32 · xl 56 |
| minTarget | android 48 · ios 44 · web 40 · webPatient 44 |
| rowHeight | comfortable 56 · default 44 · dense 36 |
| gutter | compact 16 · expanded 32 · large 40 · medium 24 |
| sectionGap | compact 24 · expanded 40 · medium 32 |
| sidebarWidth | collapsed 64 · expanded 264 |
| readingMaxWidth · pageMaxWidth | 640 · 1200 |
Breakpoints
Min-width breakpoints; board targets 1080p wall displays.
| Name | Min width |
|---|---|
| sm | 640 px |
| md | 768 px |
| lg | 1024 px |
| xl | 1280 px |
| 2xl | 1536 px |
| board | 1920 px |
Resize the window to see its class.