Foundations
Spacing & Layout
Everything sits on a 4px rhythm — paddings, gaps, sizes. Layout is mobile-first: one calm column that grows into a grid as room appears.
1
4px
2
8px
3
12px
4
16px
5
20px
6
24px
8
32px
10
40px
12
48px
16
64px
20
80px
24
96px
Steps are multiples of 4px. Between related elements use 8–16; between sections use 48–96.
Resize the window: the lit chip is the breakpoint this page is using right now. Design for base first; add refinement upward.
max-width 1280px
gutter 24px (mobile) · 32px (desktop)
Content is centred in a max 1280px column. Gutters: 24px on mobile, 32px on desktop.
The standard card grid: one column on phones, two from 640px, three from 1024px. Gap 16px.
44px hit area
A 8px dot can be the visual; the invisible circle around it is what fingers actually press.
Interactive elements are at least 44px on touch screens — visual size can be smaller, but the hit area never is.