2026-09-22-design-peripherals-standardised

Decision

This set adopts the estate-wide design peripherals defined in ~/git/products/CLAUDE.md. Second set migrated, after tic-tac-toe.

Why

Nine products had drifted into two incompatible shapes, and a reader who had learned one set could not navigate another. The UX is deliberately per product; everything around it should not be.

Impact

• Tokens renamed to the canonical set. navy → brand, gold → accent, --text-primary → --ink, --surface-sunken → --sunken, --r-lg → --radius-lg, and the rest. Same colours, the names every other set uses. Verified pixel-identical before and after.
• Config literals replaced by var(--token). This set hard-coded hexes, so no theme scope could reach its utilities at all.
• Flows renamed to the reserved vocabulary. packs/ → store/, how-to-play.html → settings/, patterns/purchase-success.html → store/, settings/settings.html → settings/preferences.html, home.html → home/start.html. 40 links repointed.
• routes.js added: the one place a screen is declared. The gallery, the chrome bar and the screenshots sheet all read it.
• The chrome bar, the scaled frame, and screenshots.html arrive with it.

Two gaps this made visible

• No screen is drawn dark, and the app ships userInterfaceStyle: "automatic". Half the devices it runs on render a product nobody has drawn.
• No purchase-failure screen. It is the one error path that costs money.

Both are recorded in routes.js and printed on the gallery rather than left unmentioned. Drawing them is design work, not migration.

Status

Active.

Sources

• ~/git/products/CLAUDE.md