Finish the Line — screen design system

A screen system for a 60-second phone game built from Friends dialogue — three routes, ten states, four owned components, no build step and no JavaScript beyond the two live demos on the system page (a light/dark toggle and a contrast calculator, both purely local). Published so it can be reviewed on a real phone and by people and models who are not on the machine it was built on.

Known gaps — read this before reviewing

• ⭐ One contrast pair fails deliberately, and it is shown on purpose. On the system page's live contrast table, ink-subtle on surface-sunken measures 4.35:1 in light mode — under the 4.5:1 AA floor — while passing at 4.65:1 in dark. It is left failing there so a reviewer can see the exact pairing rather than take a written claim for it; the fix (swapping to ink-muted) is already the one this system's own component CSS uses.
• Eight result cells orphan one on its own line at 375px. A 335px column holds seven 40px cells per row; an eight-answer round wraps to two rows with a single cell alone on the second, which reads as a mistake rather than a wrap. Not fixed — see the result grid section on the system page.
• The four vendored controls are drawn as plain-CSS stand-ins, marked ⌗, everywhere in this review. The real controls paint to a canvas inside a shadow root; loading that bundle here would make every frame on this site depend on a remote script. Their real geometry and the traps that came with it are written up on the system page instead of shown live.
• The logo is four concepts awaiting a decision, not a chosen mark. See the logo concepts page — nothing there has shipped.

Pages

• Design system Colour, type, layout, motion, the four owned components, the vendored-control rules, voice, the shared text, and the trademark boundary — one page, start here.
• Every page, every state All three routes — the front door, the round, the teaser — at 375px, every state each one can be in.
• Logo concepts Four concepts, each at real 16px in a real browser tab strip, dark and light, plus share-card mockups at three sizes. Undecided.