Grid, spacing and alignment

§03 · Everything sits on visible graph paper. Spacing uses a 4/8 rhythm.

Grids

GRID 20Blueprint grid · 20px, 1px #E6EBFD on #FFFFFF
GRID 24Hero grid (A) · 24px, 1px #DCE3EF
Grids
Blueprint grid20px, 1px #E6EBFD lines on #FFFFFF. CSS: linear-gradient(#E6EBFD 1px,transparent 1px), linear-gradient(90deg,#E6EBFD 1px,transparent 1px); background-size: 20px 20px
Hero grid (A)24px, 1px #DCE3EF. Only behind hero figures
Collage stage (B)1200×760 fixed artboard, scaled to fit. Same 20px grid under watercolor washes
Notebook page (C)1200 wide, min-height 760, padding 56/64, same 20px grid

Spacing scale

Every value at true size.

4
6
8
10
12
14
16
18
20
24
28
32
40
56
64
Spacing
Tokens4 · 6 · 8 · 10 · 12 · 14 · 16 · 18 · 20 · 24 · 28 · 32 · 40 · 56 · 64
Inside cards24–32 padding, 14–20 gap
Between cards32 (canvas), 16–20 (grids)
Sections64 top padding, 28–40 gap
Text measure≤ 860–900px for intros, ≤ 640px for overlays

Alignment

Alignment rules
AxisLeft-aligned by default. Center only for overlays, LCD clocks and single-word tags
Card headerStrip with 12/20 padding and a 1px bottom Rule. Left: badge (ink fill, white mono 11, 3/8 padding). Right: UPPERCASE mono 11 descriptor
FiguresCaption row under every figure: ink FIG number on the left, muted description on the right, 1px Rule on top
LegendsN-column grid under a figure: ink number + plain label, gap 6–8
BaselinesNumber + title pairs align to the baseline (align-items: baseline)
Positioning on the game stage (B)
Title blockx 60 · y 44
Primary action areaLeft: board / device at x 60–820
Control columnRight: x 690–1160 (410–470 wide)
Key HUDClock centered over the device top · hearts, tries and buttons in the right column
OverlaysFull-stage scrim rgba(242,244,247,.72), centered card
Do
  • Keep all spacing on the scale
  • Let the grid show through figures and stages
  • Use flex/grid with gap for every group of siblings
Don't
  • Center long body text
  • Use more than 2 rotations within one row
  • Hide construction lines on blueprints