Status: Phase 1 stub. Matures in Phase 5 per §8.1.

Statement

Diagnostics screens compose from exactly four layout templates: hub, gate, content, compare. Product screens compose from the established mobile-first phone-frame + desktop sidebar layout (§V). New top-level layouts are forbidden without a roadmap-level decision.

Why

The audit found 12 diagnostic routes built ad-hoc: each had its own header, its own grid system, its own spacing. The visual discontinuity between routes signalled "this app is a stack of unfinished sub-apps," which is closer to the truth than the team would like. Four templates capture the four diagnostic-page archetypes the audit identified:

hub — index over sub-routes (e.g. /diagnostics)
gate — privilege check or access prerequisite (e.g. /diagnostics/login, MLS-feature gates)
content — single-document body with eyebrow + title + sections (e.g. token reference, performance dashboard)
compare — two-column before/after or A/B (e.g. MLS epoch timeline, design-tokens compare)

A new diagnostic route picks one template; if none fits, the route's existence is reconsidered before a fifth template is added.

How

<DiagnosticsShell template="hub|gate|content|compare"> (Phase 1 Track B PRs #4–#6) is the only entrypoint. The shell sets eyebrow, title, OperatorBar, and the body slot per template. Routes own only the body content.

Phase 5 deepens this stub with template specifications, the transition rules between templates, and per-route citations.