Space & grid
A 4px base scale, softly rounded corners, and a 12-column grid. Whitespace is generous and intentional — prefer large steps between sections.
Spacing scale
SPACE-1 · 4PX
SPACE-2 · 8PX
SPACE-3 · 12PX
SPACE-4 · 16PX
SPACE-5 · 24PX
SPACE-6 · 32PX
SPACE-7 · 48PX
SPACE-8 · 64PX
SPACE-9 · 96PX
SPACE-10 · 128PX
SPACE-11 · 192PX
Radii
Softly rounded, matching the live site: 3px (buttons, inputs, tags), 6px (cards), 12px (large surfaces). Pills (999px) are for circular icon buttons only.
none
sm
md
lg
pill
Grid
12 columns, 24px gap, 1440px container. Imagery goes full-bleed; text and UI respect the edge margin. Editorial asymmetry — a narrow label column against wide content — is encouraged.
1
2
3
4
5
6
7
8
9
10
11
12