## Why

Headings were heavy for a compact tool. At 1440px the document title was 40px and section headings 27px; on a phone the title was 33px and wrapped badly. Separately, on phones every text field (chat composer, dialog inputs) was 13.4px and the document editor 15px, so iOS Safari zoomed the page whenever one was focused.

## What changed

- `--text-2xl` (document title) moves from step +7 to step +5: 26.4–30.8px (was 33.2–40px). - `--text-xl` (section heading) moves from step +4 to step +3: 21.1–23.7px (was 23.6–27px). - Base, ratio, `--text-lg` and smaller steps are unchanged. Clamp values are recomputed with the documented `base × ratio^step` formula. - Under `@media (pointer: coarse)`, text inputs, `textarea` and `select` use `max(1rem, var(--text-sm))`, and the document editor uses `max(1rem, var(--plan-body))`. Touch devices therefore read document prose at 16px, matching desktop. Editable code and formula source (`pre`, `[data-plan-source]`) also gets `max(1rem, var(--text-sm))` on touch. The rendered code view follows it so a fence and its source stay the same size. Each rule has a tightly scoped design-contract exception that explains the iOS zoom reason. - Updated the modular-scale test, the DESIGN.md prose, the design-audit Typography specimen labels and the approved-contrast typography labels. - Heading margins were left alone. They still look balanced at the smaller sizes.

## Integration decisions

Preserved main's small-metadata text role and composer styling while reducing only section/title heading sizes. Reviewed the foundations token table and renewed its exact owner/producer hashes. The touch rule also targets the current rich-text Chat input; a browser regression measured 13.4px before and 16px after.

## Screenshots

Document at 1440×900, before (left) and after (right):


Document at 390×844 on a touch device, before (left) and after (right). The duplicated comment buttons and odd "thr ough" break in the before shot come from comments seeded on the reference server. They are not related to this change.


Chat composer focused at 390 on a touch device, before at 13.4px (left) and after at 16px (right):


Code block on a 390 touch device with its source open, before (left) and after (right). The source and the rendered code are now 16px, and the header and language menu are unchanged:


Measured sizes (h1 / h2 / body / composer):

| Viewport | Before | After | | --- | --- | --- | | 1440 | 40 / 27 / 16 / 14 | 30.8 / 23.7 / 16 / 14 | | 1024 | 37.4 / 25.7 / 15.6 / 13.8 | 29.1 / 22.7 / 15.6 / 13.8 | | 390 touch | 33.4 / 23.7 / 15 / 13.4 | 26.6 / 21.1 / 16 / 16 |

## Testing

- After rebasing onto main: 143 theme, visuals, and design-audit tests pass; TypeScript and `bun run ci` pass. - New Chromium regression verifies the real focused Chat input is at least 16px on touch. This checks computed typography; physical iOS focus-zoom behavior was not tested. - Full GitHub validation, browser integration, and container checks run on the updated branch before merge.

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

**Review:** Changes needed (one small fix; otherwise good)

Reviewed 31e6d072 (latest; no e2e update had landed yet).

**Verified** - clamp() math: recomputed `base*ratio^step` at 360/1440px (15/1.12, 16/1.14). Step +3 = 21.074–23.705px and step +5 = 26.435–30.807px; the intercept and slope in `packages/visuals/theme.css:139,141` match to 6 d.p. DESIGN.md, `foundations.tsx` labels, `tokens.test.ts` and `typography.json` are consistent. - Computed sizes in a real document: desktop h1 40.04 -> 30.81px, h2 27.02 -> 23.70px, h3 unchanged 20.79px, so the h2/h3 gap narrows to about 14% but the hierarchy still reads clearly (desktop and 390px screenshots checked). - Other consumers (hosted sign-in hero and "Open your workspace", "Cannot open Chopin", navigation dialog titles, sign-in mobile title, design-audit headings): all still look right and balanced; no overflow at 390px. - Coarse-pointer rules (Playwright, `hasTouch:true,isMobile:true`, and 1300px+touch): `matchMedia("(pointer: coarse)")` true; chat textarea, Search and Add Project inputs go 14.04/13.41 -> 16px; desktop (fine pointer) is unchanged at 14.04px. Editor prose is 16px on touch; no horizontal overflow. - `bun test` tokens/design-audit pass. `bun run ci` fails only on the listed foundations.tsx review hash (acceptable per brief).

**Finding** 1. `packages/editor/src/styles.css:1090-1097` (`.plan-content pre`, `font-size: var(--text-sm)`). The new coarse rule at :1025-1031 does not cover the editable code block, which stays at 13.41px on a phone (measured), so focusing it still triggers iOS zoom. Suggested fix: add `.plan-content pre` to the coarse rule, e.g. `max(1rem, var(--text-sm))` (a separate declaration, as the value differs from `--plan-body`; update the preserved-values exception case to match).

**Non-blocking** - `e2e/design/snapshots/{wide,narrow}/typography.png` baselines are now stale; the README says visual diffs do not block, so only a Linux `design:browser` refresh is needed.

Thanks. Fixed in 0e11962b.

- `.plan-content pre` now gets `max(1rem, var(--text-sm))` on coarse pointers, in its own declaration. The editable code source is a `pre[data-plan-source]`, and `.plan-content [data-plan-source]` and `[data-plan-preview]:not(:empty) ~ [data-plan-source]` also set `--text-sm` with higher specificity. A floor on `pre` alone still measured 13.4px, so the selector covers all three. That also covers formula source. - The rendered code view (`--diffs-font-size` and the `[data-view="file"]` wrapper) follows on touch. Without that, the source would be 16px under a 13.4px preview, which breaks the existing "a fence and its source are the same size" rule. - I updated the matching `preserved-values.json` case (context only, no hash). - Measured at 390 on a touch device: source 16px, rendered code 16px. The language button and menu stay at `--text-sm`. They aren't text fields, so iOS doesn't zoom on them, and they look unchanged. There's a before/after screenshot in the PR body. - `check-design-contract` passes apart from the producer hash that already needs review. Token and theme unit tests pass.

@copilot investigate and fix failing CI test

> @copilot investigate and fix failing CI test

Fixed in f8d1460. CI failed on the stale `foundations.tsx` review hash, not a browser test. Updated both hash references after verifying the source changes are label-only. `bun run ci` and all 131 targeted tests pass locally. The previous run’s E2E and container jobs already passed.

<!-- pr-rebase:f8d14605184d534ad68b85b2e96a8b76259112f4:964535bb81cb00d3583301d3ec90d55393c278ca --> PR babysitter could not rebase this branch cleanly onto main. The branch is unchanged. Please resolve the rebase conflict locally; automation will try again after the branch changes.

<!-- pr-rebase:f8d14605184d534ad68b85b2e96a8b76259112f4:8675f8e57182b28d0b2dc34c8089d0d928d00191 --> PR babysitter could not rebase this branch cleanly onto main. The branch is unchanged. Please resolve the rebase conflict locally; automation will try again after the branch changes.

<!-- pr-rebase:f8d14605184d534ad68b85b2e96a8b76259112f4:e6b7bb333ce8948d0dac0c8aff61cf3d4fb8dc8b --> PR babysitter could not rebase this branch cleanly onto main. The branch is unchanged. Please resolve the rebase conflict locally; automation will try again after the branch changes.

<!-- pr-rebase:f8d14605184d534ad68b85b2e96a8b76259112f4:b919317f14f29799be257eee49ba5ab753592371 --> PR babysitter could not rebase this branch cleanly onto main. The branch is unchanged. Please resolve the rebase conflict locally; automation will try again after the branch changes.