One rule covering everything focusable, replacing three competing answers and a silence.

Seven call sites swapped a border colour, which moves nothing and is easy to miss on a field that already has a border. Three drew a Tailwind ring. The editor's stylesheet drew an outline. And twenty of the thirty-two buttons in the app answered it not at all, so tabbing through the toolbar showed nothing whatsoever.

An outline rather than a ring or a border: it follows `border-radius`, takes no space in the layout, and paints over whatever it sits on rather than needing a background to sit against. `:where()` gives it zero specificity, so anything needing something different overrides it with a single class and no fight — which is also why it belongs in the theme rather than in a utility somebody has to remember, the failure mode of a utility being the twenty buttons above.

Seven `outline-none` declarations were suppressing the ring before it existed and are gone.

### Stripping the old declarations by pattern needed care

`focus-visible:ring-ring/40` is a utility with an opacity modifier, and matching only the utility leaves the `/40` welded onto whichever word precedes it. Three sites were affected and they failed differently — `text-left/40` is not a utility, so Tailwind dropped it and the alignment with it, while `hover:text-foreground/40` and `focus-visible:border-ring/30` are both valid and went on working at reduced opacity, which nothing reports.

`apps/web/src/focus.test.ts` guards the two ways a component can leave the rule again: suppressing the outline, or drawing a second answer beside it.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---

### Stack

Merge bottom-up. Each PR targets the one below it, so every diff reads in isolation; GitHub retargets the child automatically as each parent merges.

1. #9  — Emit all theme tokens, fix callout colours, load Inter  ←  `main` 2. #10 — Add two-stop shadow scale tokens 3. #11 — Add radius tokens and replace bare rounded classes 4. #12 — Add type scale tokens, replace arbitrary font sizes 5. #13 — Add easing and duration tokens, set transition defaults 6. #15 — Add one focus-visible outline rule for all controls 7. #16 — Scale buttons down on press 8. #17 — Add tabular-nums to figures and balance plan headings 9. #18 — Shorten empty states and composer status copy 10. #19 — Add entrance animation for newly arrived items

Plan: `docs/superpowers/plans/2026-08-04-design-token-foundation.md`