Foundations

Grid

Responsive column grids and a 4px spacing system — the spatial backbone of every screen.

4px spacing

All spacing, sizing, placement and layout use 4px or a multiple of 4px. Holding to the 4px rhythm keeps every element optically aligned and the layout consistent across screens.

4px

8px

12px

16px

24px

32px

48px

64px

Mobile — 360 × 780

A 4-column stretch grid for phones.

Device: 360 × 780
Columns: 4
Type: Stretch
Width: Auto
Margin: 16px
Gutter: 16px
Overlay: #FCE5E4

Desktop — 1440

A 12-column stretch grid for desktop, shown to scale (1440 × 804).

Device: 1440 wide
Columns: 12
Type: Stretch
Width: Auto
Margin: 120px
Gutter: 24px
Overlay: #FCE5E4