Playbook 4.2 §4’s hard numbers as visible rulers — spacing / type scale / grays / shadows & radii / contrast / touch targets / interaction feedback.
Spacing rhythm (4/8px grid)every gap snaps to the 4/8px grid
Intra-group gap < inter-group gap (proximity is hierarchy); add 50% more whitespace than feels natural.
4px8px12px16px24px32px48px64px✓ 8px within groups < 24px between groups
✗ Uniform 6px everywhere — cramped = the #1 amateur tell
Type scale 1.25one fixed ratio, 5-6 steps, no off-scale sizes
Body ≥16px; line-height 1.5-1.75; measure 45-75 characters.
A comfortable measure keeps each line between 45 and 75 characters. This paragraph is capped at 65ch with line-height 1.6 — read it and feel how your eye returns to the next line without effort.
Neutral gray, 9 stepsone brand color + 9 grays + 3 semantic colors — stop there
Never pure #000; a hint of brand tint in the grays reads more refined.
Pure gray
Brand-tinted (slate — reads more refined)
3-tier shadows + radius familysame level, same shadow; don't mix radius tiers at one level
Fixed sm/md/lg shadow tiers; one radius family site-wide (4/8/12).
Contrastbody text ≥4.5:1
Readable body text on the panel.
✓ 4.8:1 (light) / 5.0:1 (dark)This text fails — squint and it vanishes.
✗ 2.0:1 (both themes)Each theme hard-codes its own color pair (no single pair fails in both themes); ratios are computed against each theme's panel background.
Touch targets ≥44×44pxvisible focus ring (keyboard users)
Hover feedbacktransition 150-300ms
Hover changes color/shadow, never position/scale — that jitters the layout. Real buttons: try hovering.