Ten places in the app set a figure somebody reads as a column or watches change: tool durations counting up, places-in-plan badges, the outstanding and resolved counts, the overflow chip on the presence row, and the timestamps down the transcript, a comment thread and a provenance line.

Proportional digits are different widths, so 2ms and 72ms put their figures in different places and a column of them twitches as each lands. Tabular numerals cost nothing here; none of these are prose.

Headings get `text-wrap: balance`, so a two-line heading does not break 8/1 and read as a mistake. They are short enough for the browser to weigh every break at once.

Paragraphs are left alone. `text-wrap: pretty` would guard the last line against stranding a word, but the prose is inside a contenteditable and the browser re-evaluates those lines on input — a reflow risk taken for a small typographic gain.

🤖 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`