The tool read as crowded on screens where nothing overlapped, and the reason
turned out to be arithmetic rather than taste: holdem.css used 42 different
spacing values, 31 font sizes, 14 border-radii and 139 colours, and defined
three custom properties. Every number had been picked by hand at the moment it
was needed. A 0.42rem gap beside a 0.45rem gap beside a 0.5rem gap gives the
eye no rhythm to lock onto, so it reads the whole surface as noise.
So: constrained scales, and everything snapped to them. Seven spacing steps on
an 8px rhythm, eight type sizes, four corners, and a four-step surface ramp
that stays off pure black — shadows are invisible on #000 and white-on-black
smears on the OLED phone this is used on. 661 values rewritten; colour mentions
halved, 381 to 174. Nothing here changes what the tool does.
Two things were measurably moving under the dealer's thumb, and both are fixed
by reserving space rather than by animating anything:
* The undo pill named the last action, so it resized on every single tap.
Measured across one hand: 148, 110, 109, 108, 109, 110, 120px. It is now a
fixed 10rem, with the label in its own element so it can ellipsize without
truncating through the keycap beside it.
* The action bar is fixed to the bottom, so anything that changes its height
moves its top edge. The status row wraps, and it wrapped differently as the
street and pot changed. It now holds two lines' worth of room whenever a
hand is running. Across 13 viewports x 3 table sizes, the bar no longer
changes height mid-hand at all.
Numbers that change while the dealer watches — pot, stacks, bets, standings —
are now set in tabular figures, so a pot ticking $18 to $21 stops shuffling its
digits sideways.
Two regressions the sweeps caught on the way, both from the snapping:
* The Add Chips field cleared 44px by way of its font size plus its padding,
so moving either dropped it to 42. It states its own min-height now; a
touch target shouldn't be an accident of two other numbers.
* The bar came out 2px shorter in landscape, which grew the felt, which
lifted the top seat's dealer button 2px into the header. That clearance was
structurally 1-7px, so the top seat inset became a floor rather than a
ceiling instead of chasing the 2px.
tests/holdem/designTokens.test.js keeps the scales honest — a new value has to
be a step or an exception with a reason. Fault-injected four ways.
599 tests, 0 failures. 39 layout audits across 13 viewports and 3 table sizes,
plus 35 across the five overlays: 0 failures.
Co-Authored-By: Claude Opus 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_015bnp7xKUPFFSpwkYNFaPgb
jheapsandClaude Opus 5
8b43614b1c