From 3401cc0d80c4a1dbbad244872040937bc8ddd8f8 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Fri, 28 Aug 2026 10:04:00 +0100
Subject: [PATCH 01/35] Document design system audit approach

---
 .../2026-08-28-design-system-audit-design.md  | 101 ++++++++++++++++++
 1 file changed, 101 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-08-28-design-system-audit-design.md

diff --git a/docs/superpowers/specs/2026-08-28-design-system-audit-design.md b/docs/superpowers/specs/2026-08-28-design-system-audit-design.md
new file mode 100644
index 00000000..c8ad339a
--- /dev/null
+++ b/docs/superpowers/specs/2026-08-28-design-system-audit-design.md
@@ -0,0 +1,101 @@
+# Design system audit
+
+## Aim
+
+Make Chopin's visual system easier to inspect and harder to drift. The first pass should fix clear,
+repeatable inconsistencies while leaving taste-heavy choices visible for a human review.
+
+The audit covers `apps/web` and the user-facing parts of `packages/editor`. Existing product identity,
+behaviour, and terminology stay intact.
+
+## Current state
+
+The foundations are stronger than the individual screens suggest. `apps/web/src/theme.css` already
+owns the colour, type, spacing, radius, focus, shadow, button, field, and choice-control scales. The
+main problem is inconsistent use across roughly 3,400 lines of app and editor CSS.
+
+Icons currently mix local SVG files with Phosphor React components and explicit sizes from 14px to
+24px. At least one pair is byte-identical: `assets/figma/navigation/collapse.svg` and
+`assets/icons/conversation-close.svg`.
+
+Many editor widgets depend on Lexical, Yjs, live stores, or application state. Reimplementing their
+markup in a showcase would hide the drift we want to find.
+
+## Architecture
+
+Add a development-only `/design-audit` route to `apps/web`. It renders before session loading, so the
+catalogue can be reviewed without GitHub authentication. Production builds must not expose or bundle
+the route.
+
+The page has four layers:
+
+1. **Foundations** – colour, typography, spacing, radii, shadows, icon sizes, and focus treatment.
+2. **Controls** – buttons, icon buttons, links, fields, selections, tabs, menus, dropdowns, and their
+   resting, hover, active, focus, disabled, busy, error, and selected states.
+3. **Surfaces** – dialogs, popovers, cards, lists, navigation rows, chat messages, composer elements,
+   decisions, resolved comments, and loading/empty/error states.
+4. **Authored content** – a real read-only editor fixture containing headings, lists, links, image,
+   formula, Mermaid diagram, code, diff, callout, table, tabs, decision, comment-related prose, and
+   research states. Where a widget cannot be mounted through the document, use its exported component
+   with a small typed fixture adapter.
+
+Catalogue scaffolding belongs in a small `apps/web/src/design-audit/` module. It may compose real
+components and fixtures but must not become a second component library.
+
+## State and interaction
+
+Sections render all stable visual states side by side. Pointer-only states get a labelled forced-state
+sample so screenshots remain deterministic; real controls remain interactive for keyboard and focus
+review. Dialogs and menus have both inline specimen and interactive examples.
+
+Fixtures are local and deterministic. They do not call HTTP, WebSocket, GitHub, or Planner APIs. A
+compact viewport control lets the same page expose desktop and narrow arrangements without copying
+the app shell.
+
+## Audit method
+
+Create a machine-readable inventory alongside the page for:
+
+- component and state coverage;
+- icon source, semantic name, geometry, and duplicate-content hash;
+- button and icon-button class combinations;
+- shadow, radius, spacing, and colour-token use; and
+- items deliberately left for human judgement.
+
+Inspect the catalogue and authenticated app at desktop and mobile widths. Use one broad screenshot
+pass, fix the resulting clear issues in a batch, then use one confirmation pass. This is a bounded
+review, not an endless polish loop.
+
+Clear first-pass fixes include duplicate icon assets, mismatched icon geometry or colour, missing
+focus and disabled treatments, undersized targets, accidental one-off spacing, incorrect shadow
+levels, and hierarchy that contradicts the shared button variants. Ambiguous brand or composition
+changes go into the human-review list instead.
+
+## Change boundaries
+
+Normalisation should deepen the existing system:
+
+- add semantic utilities or small shared components only when at least two real consumers need them;
+- migrate consumers in small vertical slices;
+- preserve accessible names, keyboard behaviour, responsive behaviour, and editor invariants; and
+- avoid compatibility aliases unless persisted data or an external consumer requires one.
+
+The catalogue stays in the repository as a regression and review surface after the audit.
+
+## Verification
+
+The catalogue gets focused render or source-contract tests for route gating and required specimens.
+Existing component tests remain authoritative for behaviour. Browser checks cover layout, focus,
+menus, dialogs, target sizes, overflow, and screenshots at desktop and mobile widths.
+
+After edits, run `bun run fix`, focused tests, `bun run types`, `bun run ci`, and the narrowest relevant
+Playwright coverage. Run the design-quality detector once over changed UI files after visual work is
+finished.
+
+## Delivery slices
+
+1. Add the dev-only catalogue shell, inventory, and foundation/control specimens.
+2. Add real app surfaces, chat, dialogs, decisions, comments, and loading states.
+3. Add the authored-content fixture and research states.
+4. Capture the first screenshots and normalise clear token, icon, control, spacing, and surface drift.
+5. Confirm desktop/mobile results and publish the remaining human-review list.

From 3a2ad0b34d74dfbeeb1d51b4cac4c8d3772570b2 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Fri, 28 Aug 2026 10:05:52 +0100
Subject: [PATCH 02/35] Plan design audit catalogue implementation

---
 .../2026-08-28-design-audit-catalogue.md      | 272 ++++++++++++++++++
 1 file changed, 272 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-08-28-design-audit-catalogue.md

diff --git a/docs/superpowers/plans/2026-08-28-design-audit-catalogue.md b/docs/superpowers/plans/2026-08-28-design-audit-catalogue.md
new file mode 100644
index 00000000..8bae3669
--- /dev/null
+++ b/docs/superpowers/plans/2026-08-28-design-audit-catalogue.md
@@ -0,0 +1,272 @@
+# Design Audit Catalogue Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Build a development-only page that exposes Chopin's foundations, controls, application surfaces, and authored-content components in deterministic visual states.
+
+**Architecture:** `apps/web` owns a lazily loaded `/design-audit` route. Small catalogue modules compose real web and editor components; pure fixture data describes coverage. A read-only static editor entry point renders authored MDX through the production dialect and widget renderers without opening a WebSocket.
+
+**Tech Stack:** React 19, TypeScript, Vite, Tailwind CSS v4, MDXEditor/Lexical, Bun tests.
+
+---
+
+This plan builds the inspection surface. Screenshot findings will produce a separate, evidence-based
+normalisation plan; naming exact remediation files before seeing the catalogue would be guesswork.
+
+### Task 1: Development-only route
+
+**Files:**
+- Create: `apps/web/src/design-audit/route.ts`
+- Create: `apps/web/src/design-audit/route.test.ts`
+- Create: `apps/web/src/design-audit/page.tsx`
+- Modify: `apps/web/src/main.tsx`
+
+- [ ] **Step 1: Write the route test**
+
+```ts
+import { describe, expect, it } from "bun:test";
+import { isDesignAuditRoute } from "./route";
+
+describe("design audit route", () => {
+	 it("exists only in development at its exact path", () => {
+		 expect(isDesignAuditRoute("/design-audit", true)).toBe(true);
+		 expect(isDesignAuditRoute("/design-audit", false)).toBe(false);
+		 expect(isDesignAuditRoute("/design-audit/extra", true)).toBe(false);
+	 });
+});
+```
+
+- [ ] **Step 2: Verify the test fails**
+
+Run: `bun test apps/web/src/design-audit/route.test.ts`
+Expected: FAIL because `route.ts` does not exist.
+
+- [ ] **Step 3: Add the pure route predicate**
+
+```ts
+export function isDesignAuditRoute(pathname: string, development: boolean): boolean {
+	return development && pathname === "/design-audit";
+}
+```
+
+- [ ] **Step 4: Add lazy route selection to `main.tsx`**
+
+Keep the current application root unchanged for ordinary paths. On the audit path, dynamically import
+`./design-audit/page` and render its `DesignAuditPage`. The import must be inside the
+`import.meta.env.DEV`-guarded branch so a normal production build removes the route chunk.
+
+- [ ] **Step 5: Add a minimal labelled page and verify**
+
+```tsx
+export function DesignAuditPage() {
+	return <main data-design-audit=""><h1>Chopin design audit</h1></main>;
+}
+```
+
+Run: `bun test apps/web/src/design-audit/route.test.ts && bun --cwd apps/web run types`
+Expected: PASS.
+
+- [ ] **Step 6: Verify production exclusion and commit**
+
+Run: `bun --cwd apps/web run build && ! rg -l "Chopin design audit" apps/web/dist`
+Expected: build passes and `rg` finds no catalogue string.
+
+Commit: `git commit -am "Add development design audit route"`
+
+### Task 2: Coverage inventory and catalogue frame
+
+**Files:**
+- Create: `apps/web/src/design-audit/inventory.ts`
+- Create: `apps/web/src/design-audit/inventory.test.ts`
+- Create: `apps/web/src/design-audit/frame.tsx`
+- Create: `apps/web/src/design-audit/styles.css`
+- Modify: `apps/web/src/design-audit/page.tsx`
+
+- [ ] **Step 1: Write inventory coverage tests**
+
+Define `AuditGroup`, `AuditItem`, and exported `AUDIT_INVENTORY`. Assert that the inventory contains the
+required groups `foundations`, `controls`, `surfaces`, `authored-content`, and the named specimens from
+the approved spec. Assert every item has a unique `id`, a source path, and at least one state.
+
+- [ ] **Step 2: Verify the inventory test fails**
+
+Run: `bun test apps/web/src/design-audit/inventory.test.ts`
+Expected: FAIL because `inventory.ts` does not exist.
+
+- [ ] **Step 3: Implement the typed inventory**
+
+```ts
+export type AuditItem = {
+	id: string;
+	label: string;
+	source: string;
+	states: readonly string[];
+	judgement?: string;
+};
+
+export type AuditGroup = {
+	id: "foundations" | "controls" | "surfaces" | "authored-content";
+	label: string;
+	items: readonly AuditItem[];
+};
+```
+
+Populate it with buttons, icon buttons, links, fields, selection, tabs, menus, dropdowns, dialogs,
+lists, navigation rows, chat, decisions, resolved comments, loading, empty, error, callout, research,
+code, diff, diagram, formula, image, and table.
+
+- [ ] **Step 4: Build the frame**
+
+`frame.tsx` owns `AuditSection`, `AuditPlate`, `StateLabel`, the sticky table of contents, and the
+desktop/narrow preview-width control. `styles.css` may style only catalogue scaffolding; specimens use
+the real application classes.
+
+- [ ] **Step 5: Run tests and commit**
+
+Run: `bun test apps/web/src/design-audit/inventory.test.ts && bun --cwd apps/web run types`
+Expected: PASS.
+
+Commit: `git add apps/web/src/design-audit && git commit -m "Map design audit coverage"`
+
+### Task 3: Foundations and controls
+
+**Files:**
+- Create: `apps/web/src/design-audit/foundations.tsx`
+- Create: `apps/web/src/design-audit/controls.tsx`
+- Modify: `apps/web/src/design-audit/page.tsx`
+
+- [ ] **Step 1: Add source-contract assertions to the inventory test**
+
+Assert each foundation and control inventory ID appears in its specimen module. This is intentionally
+a source contract because Bun has no DOM and the repository forbids synthetic layout DOMs.
+
+- [ ] **Step 2: Render foundations**
+
+Show the emitted colour tokens, type scale, 4px spacing scale, radii, and the three semantic shadows.
+Render all local SVG and Phosphor icons in one 16px default frame, with separate 14px compact and 20px
+emphasis examples. Label the byte-identical collapse/conversation-close pair.
+
+- [ ] **Step 3: Render every control state**
+
+Use the real `btn`, `btn-md`, `btn-sm`, `btn-icon`, `btn-primary`, `btn-secondary`, `btn-ghost`,
+`btn-destructive`, `field`, `field-ghost`, and `choice-control` utilities. Include resting, labelled
+forced-hover, labelled forced-active, keyboard-focusable, disabled, busy, selected, invalid, and
+read-only examples. Include text links, tablist/tab states, list selection, dropdown, and menu rows.
+
+- [ ] **Step 4: Verify and commit**
+
+Run: `bun test apps/web/src/design-audit/inventory.test.ts && bun --cwd apps/web run types`
+Expected: PASS.
+
+Commit: `git add apps/web/src/design-audit && git commit -m "Catalogue foundations and controls"`
+
+### Task 4: Application surfaces
+
+**Files:**
+- Create: `apps/web/src/design-audit/surfaces.tsx`
+- Create: `apps/web/src/design-audit/fixtures.ts`
+- Modify: `apps/web/src/design-audit/page.tsx`
+
+- [ ] **Step 1: Add surface fixtures**
+
+Create deterministic fixture records for a user, chat messages, repository/document rows, research
+requests in queued/running/failed/cancelled/ready states, resolved decisions, resolved comments, and
+loading/empty/error content. Use valid protocol shapes and fixed ULIDs/UUIDs.
+
+- [ ] **Step 2: Compose real surfaces**
+
+Render actual exported or app-owned components where their API is small: `NavigationDialog`,
+`DocumentActionsMenu`, `ConversationToggle`, `TerminalAlert`, `Face`, `SendAction`, `ResearchCard`,
+`ResearchComposer`, `QuestionnaireCard`, and chat transcript elements. For tightly coupled surfaces,
+extract a reusable presentational component from the current owner rather than copying its markup.
+
+- [ ] **Step 3: Show layout variants**
+
+Place dialogs, menus, popovers, cards, navigation/list rows, conversation messages, composer controls,
+decision cards, resolved-comment cards, and loading states in labelled plates. Interactive dialog/menu
+launchers must restore focus and close with Escape; inline specimens remain open for screenshots.
+
+- [ ] **Step 4: Verify and commit**
+
+Run: `bun test apps/web/src/design-audit/inventory.test.ts packages/editor/src/card.test.ts && bun --cwd apps/web run types`
+Expected: PASS.
+
+Commit: `git add apps/web/src/design-audit apps/web/src packages/editor/src && git commit -m "Catalogue application surfaces"`
+
+### Task 5: Authored-content fixture
+
+**Files:**
+- Create: `packages/editor/src/static-plan-editor.tsx`
+- Create: `packages/editor/src/static-plan-editor.test.ts`
+- Modify: `packages/editor/package.json`
+- Create: `apps/web/src/design-audit/authored-content.tsx`
+- Modify: `apps/web/src/design-audit/page.tsx`
+
+- [ ] **Step 1: Write the static-editor source contract**
+
+Assert the fixture entry point registers the production widget renderers, uses `dialectPlugins`, uses
+the production `widgetsPlugin`, sets `readOnly`, and does not import collaboration or `PlanProvider`.
+
+- [ ] **Step 2: Implement `StaticPlanEditor`**
+
+Mount `MDXEditor` with supplied canonical `source`, the same lexical theme and content class as
+`PlanEditor`, `dialectPlugins({ core: false })`, `markdownShortcutPlugin()`, and `widgetsPlugin`.
+Accept optional `research` and `questions` fixture stores. Export it only from an explicit
+`@chopin/editor/static` package subpath.
+
+- [ ] **Step 3: Create the canonical document fixture**
+
+Include ordinary prose and links, headings, ordered/unordered/task lists, table, note/tip/warning/danger
+callouts, tabs, inline/block maths, plain and TypeScript code, valid and invalid diffs, Mermaid diagram,
+image success/failure specimens, a research node, and decision-related prose. Use the real dialect
+syntax and fixed valid IDs.
+
+- [ ] **Step 4: Show sidecar states beside the document**
+
+Render `ResearchCard` for each lifecycle state, a populated `ResearchComposer`, resolved decision and
+comment cards, plus their empty/loading/error variants. This keeps record-owned state authoritative
+instead of forging decision records inside MDX.
+
+- [ ] **Step 5: Verify and commit**
+
+Run: `bun test packages/editor/src/static-plan-editor.test.ts apps/web/src/design-audit/inventory.test.ts && bun --cwd packages/editor run types && bun --cwd apps/web run types`
+Expected: PASS.
+
+Commit: `git add packages/editor apps/web/src/design-audit && git commit -m "Catalogue authored document components"`
+
+### Task 6: Browser audit handoff
+
+**Files:**
+- Create: `docs/design-system-audit.md`
+
+- [ ] **Step 1: Start the real development server**
+
+Run: `bun run dev`
+Expected: the supervisor reports the local application URL. Open `/design-audit` without signing in.
+
+- [ ] **Step 2: Inspect desktop and mobile in one broad pass**
+
+Capture full-page and section screenshots at 1440px and 390px. Check overflow, target size, focus,
+disabled state, hierarchy, icon geometry/colour, spacing rhythm, surface elevation, modal/menu behaviour,
+tabs, authored blocks, and loading states.
+
+- [ ] **Step 3: Inspect the authenticated application**
+
+Open the ordinary application root. If it shows GitHub sign-in, stop and notify the user so they can
+complete authentication. Once signed in, compare the repository picker, navigation, document,
+conversation, decisions, comments, research, dialogs, menus, and loading transitions against the
+catalogue at desktop and mobile widths.
+
+- [ ] **Step 4: Record evidence**
+
+Create `docs/design-system-audit.md` with a health score, P0–P3 findings with file/line evidence,
+positive findings, exact duplicate icons, and a human-judgement parking lot. Each finding must explain
+impact and name the token/component boundary that should own the fix.
+
+- [ ] **Step 5: Write the evidence-based normalisation plan**
+
+Create a second small-slice plan from the verified P1/P2 findings. Do not include speculative P3 work.
+
+- [ ] **Step 6: Commit the audit**
+
+Commit: `git add docs/design-system-audit.md docs/superpowers/plans && git commit -m "Document design system audit findings"`

From c039aae31d3b4db03187bbaab2dad0026bba8fe1 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Fri, 28 Aug 2026 10:08:23 +0100
Subject: [PATCH 03/35] Add development design audit route

---
 apps/web/src/design-audit/page.test.tsx       | 14 +++++++++
 apps/web/src/design-audit/page.tsx            |  9 ++++++
 apps/web/src/design-audit/route.test.ts       | 11 +++++++
 apps/web/src/design-audit/route.ts            |  3 ++
 apps/web/src/main.tsx                         | 13 ++++----
 .../2026-08-28-design-audit-catalogue.md      | 30 +++++++++++--------
 6 files changed, 62 insertions(+), 18 deletions(-)
 create mode 100644 apps/web/src/design-audit/page.test.tsx
 create mode 100644 apps/web/src/design-audit/page.tsx
 create mode 100644 apps/web/src/design-audit/route.test.ts
 create mode 100644 apps/web/src/design-audit/route.ts

diff --git a/apps/web/src/design-audit/page.test.tsx b/apps/web/src/design-audit/page.test.tsx
new file mode 100644
index 00000000..e7520904
--- /dev/null
+++ b/apps/web/src/design-audit/page.test.tsx
@@ -0,0 +1,14 @@
+import { describe, expect, it } from "bun:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+
+import { DesignAuditPage } from "./page";
+
+describe("design audit page", () => {
+	it("identifies itself as a development inspection surface", () => {
+		let markup = renderToStaticMarkup(createElement(DesignAuditPage));
+
+		expect(markup).toContain('data-design-audit=""');
+		expect(markup).toContain("Chopin design audit");
+	});
+});
diff --git a/apps/web/src/design-audit/page.tsx b/apps/web/src/design-audit/page.tsx
new file mode 100644
index 00000000..15b3c78b
--- /dev/null
+++ b/apps/web/src/design-audit/page.tsx
@@ -0,0 +1,9 @@
+export function DesignAuditPage() {
+	return (
+		<main className="min-h-dvh bg-ground p-6 text-text-primary" data-design-audit="">
+			<div className="mx-auto max-w-7xl">
+				<h1 className="m-0 text-balance text-2xl font-semibold">Chopin design audit</h1>
+			</div>
+		</main>
+	);
+}
diff --git a/apps/web/src/design-audit/route.test.ts b/apps/web/src/design-audit/route.test.ts
new file mode 100644
index 00000000..f7fd5bf8
--- /dev/null
+++ b/apps/web/src/design-audit/route.test.ts
@@ -0,0 +1,11 @@
+import { describe, expect, it } from "bun:test";
+
+import { isDesignAuditRoute } from "./route";
+
+describe("design audit route", () => {
+	it("exists only in development at its exact path", () => {
+		expect(isDesignAuditRoute("/design-audit", true)).toBe(true);
+		expect(isDesignAuditRoute("/design-audit", false)).toBe(false);
+		expect(isDesignAuditRoute("/design-audit/extra", true)).toBe(false);
+	});
+});
diff --git a/apps/web/src/design-audit/route.ts b/apps/web/src/design-audit/route.ts
new file mode 100644
index 00000000..e02d8cff
--- /dev/null
+++ b/apps/web/src/design-audit/route.ts
@@ -0,0 +1,3 @@
+export function isDesignAuditRoute(pathname: string, development: boolean): boolean {
+	return development && pathname === "/design-audit";
+}
diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
index d128d3aa..810d0b5c 100644
--- a/apps/web/src/main.tsx
+++ b/apps/web/src/main.tsx
@@ -3,6 +3,7 @@ import { createRoot } from "react-dom/client";
 import { usePointerCapabilities } from "@chopin/editor/pointer";
 
 import { App } from "./app";
+import { isDesignAuditRoute } from "./design-audit/route";
 import { useMotionInput } from "./motion-input";
 import { useVisualViewport } from "./viewport";
 
@@ -22,8 +23,10 @@ function Root() {
 	return <App />;
 }
 
-createRoot(root).render(
-	<StrictMode>
-		<Root />
-	</StrictMode>,
-);
+let content = isDesignAuditRoute(location.pathname, import.meta.env.DEV)
+	? import("./design-audit/page").then(({ DesignAuditPage }) => <DesignAuditPage />)
+	: Promise.resolve(<Root />);
+
+void content.then(value => {
+	createRoot(root).render(<StrictMode>{value}</StrictMode>);
+});
diff --git a/docs/superpowers/plans/2026-08-28-design-audit-catalogue.md b/docs/superpowers/plans/2026-08-28-design-audit-catalogue.md
index 8bae3669..9bf7810a 100644
--- a/docs/superpowers/plans/2026-08-28-design-audit-catalogue.md
+++ b/docs/superpowers/plans/2026-08-28-design-audit-catalogue.md
@@ -63,12 +63,12 @@ export function DesignAuditPage() {
 }
 ```
 
-Run: `bun test apps/web/src/design-audit/route.test.ts && bun --cwd apps/web run types`
+Run: `bun test apps/web/src/design-audit/route.test.ts && bun run --cwd apps/web types`
 Expected: PASS.
 
 - [ ] **Step 6: Verify production exclusion and commit**
 
-Run: `bun --cwd apps/web run build && ! rg -l "Chopin design audit" apps/web/dist`
+Run: `bun run --cwd apps/web build && ! rg -l "Chopin design audit" apps/web/dist`
 Expected: build passes and `rg` finds no catalogue string.
 
 Commit: `git commit -am "Add development design audit route"`
@@ -123,7 +123,7 @@ the real application classes.
 
 - [ ] **Step 5: Run tests and commit**
 
-Run: `bun test apps/web/src/design-audit/inventory.test.ts && bun --cwd apps/web run types`
+Run: `bun test apps/web/src/design-audit/inventory.test.ts && bun run --cwd apps/web types`
 Expected: PASS.
 
 Commit: `git add apps/web/src/design-audit && git commit -m "Map design audit coverage"`
@@ -133,12 +133,15 @@ Commit: `git add apps/web/src/design-audit && git commit -m "Map design audit co
 **Files:**
 - Create: `apps/web/src/design-audit/foundations.tsx`
 - Create: `apps/web/src/design-audit/controls.tsx`
+- Create: `apps/web/src/design-audit/specimens.test.tsx`
 - Modify: `apps/web/src/design-audit/page.tsx`
 
-- [ ] **Step 1: Add source-contract assertions to the inventory test**
+- [ ] **Step 1: Write rendered specimen tests**
 
-Assert each foundation and control inventory ID appears in its specimen module. This is intentionally
-a source contract because Bun has no DOM and the repository forbids synthetic layout DOMs.
+Render the foundation and control sections with `renderToStaticMarkup`. Assert the resulting landmarks,
+headings, control roles, accessible names, native disabled attributes, selected state, and invalid state.
+The break caught is a catalogue specimen disappearing or losing the same semantics as its real control;
+CSS geometry remains a browser test.
 
 - [ ] **Step 2: Render foundations**
 
@@ -155,7 +158,7 @@ read-only examples. Include text links, tablist/tab states, list selection, drop
 
 - [ ] **Step 4: Verify and commit**
 
-Run: `bun test apps/web/src/design-audit/inventory.test.ts && bun --cwd apps/web run types`
+Run: `bun test apps/web/src/design-audit/inventory.test.ts && bun run --cwd apps/web types`
 Expected: PASS.
 
 Commit: `git add apps/web/src/design-audit && git commit -m "Catalogue foundations and controls"`
@@ -188,7 +191,7 @@ launchers must restore focus and close with Escape; inline specimens remain open
 
 - [ ] **Step 4: Verify and commit**
 
-Run: `bun test apps/web/src/design-audit/inventory.test.ts packages/editor/src/card.test.ts && bun --cwd apps/web run types`
+Run: `bun test apps/web/src/design-audit/inventory.test.ts packages/editor/src/card.test.ts && bun run --cwd apps/web types`
 Expected: PASS.
 
 Commit: `git add apps/web/src/design-audit apps/web/src packages/editor/src && git commit -m "Catalogue application surfaces"`
@@ -197,15 +200,16 @@ Commit: `git add apps/web/src/design-audit apps/web/src packages/editor/src && g
 
 **Files:**
 - Create: `packages/editor/src/static-plan-editor.tsx`
-- Create: `packages/editor/src/static-plan-editor.test.ts`
+- Create: `packages/editor/src/static-plan-editor.test.tsx`
 - Modify: `packages/editor/package.json`
 - Create: `apps/web/src/design-audit/authored-content.tsx`
 - Modify: `apps/web/src/design-audit/page.tsx`
 
-- [ ] **Step 1: Write the static-editor source contract**
+- [ ] **Step 1: Write the static-editor render contract**
 
-Assert the fixture entry point registers the production widget renderers, uses `dialectPlugins`, uses
-the production `widgetsPlugin`, sets `readOnly`, and does not import collaboration or `PlanProvider`.
+Render `StaticPlanEditor` with a heading, callout, and code fixture. Assert its labelled read-only
+document landmark and source identity render without collaboration status or connection fallback.
+The browser pass later asserts the hydrated editor's actual authored blocks.
 
 - [ ] **Step 2: Implement `StaticPlanEditor`**
 
@@ -229,7 +233,7 @@ instead of forging decision records inside MDX.
 
 - [ ] **Step 5: Verify and commit**
 
-Run: `bun test packages/editor/src/static-plan-editor.test.ts apps/web/src/design-audit/inventory.test.ts && bun --cwd packages/editor run types && bun --cwd apps/web run types`
+Run: `bun test packages/editor/src/static-plan-editor.test.tsx apps/web/src/design-audit/inventory.test.ts && bun run --cwd packages/editor types && bun run --cwd apps/web types`
 Expected: PASS.
 
 Commit: `git add packages/editor apps/web/src/design-audit && git commit -m "Catalogue authored document components"`

From 1632f51122fc4d79b2fda8810465b6196bd54b44 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Fri, 28 Aug 2026 10:11:15 +0100
Subject: [PATCH 04/35] Map design audit coverage

---
 apps/web/src/design-audit/frame.test.tsx    |  21 +++
 apps/web/src/design-audit/frame.tsx         |  78 ++++++++
 apps/web/src/design-audit/inventory.test.ts |  63 +++++++
 apps/web/src/design-audit/inventory.ts      | 186 ++++++++++++++++++++
 apps/web/src/design-audit/page.test.tsx     |   7 +
 apps/web/src/design-audit/page.tsx          |  19 +-
 apps/web/src/design-audit/styles.css        | 185 +++++++++++++++++++
 7 files changed, 554 insertions(+), 5 deletions(-)
 create mode 100644 apps/web/src/design-audit/frame.test.tsx
 create mode 100644 apps/web/src/design-audit/frame.tsx
 create mode 100644 apps/web/src/design-audit/inventory.test.ts
 create mode 100644 apps/web/src/design-audit/inventory.ts
 create mode 100644 apps/web/src/design-audit/styles.css

diff --git a/apps/web/src/design-audit/frame.test.tsx b/apps/web/src/design-audit/frame.test.tsx
new file mode 100644
index 00000000..973802f0
--- /dev/null
+++ b/apps/web/src/design-audit/frame.test.tsx
@@ -0,0 +1,21 @@
+import { describe, expect, it } from "bun:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+
+import { AuditPlate, StateLabel } from "./frame";
+
+describe("design audit specimen framing", () => {
+	it("labels a specimen and its represented state", () => {
+		let markup = renderToStaticMarkup(
+			createElement(
+				AuditPlate,
+				{ title: "Primary button", description: "Shared action hierarchy" },
+				createElement(StateLabel, null, "Focus"),
+			),
+		);
+
+		expect(markup).toContain("Primary button");
+		expect(markup).toContain("Shared action hierarchy");
+		expect(markup).toContain("Focus");
+	});
+});
diff --git a/apps/web/src/design-audit/frame.tsx b/apps/web/src/design-audit/frame.tsx
new file mode 100644
index 00000000..2808b31e
--- /dev/null
+++ b/apps/web/src/design-audit/frame.tsx
@@ -0,0 +1,78 @@
+import { useState } from "react";
+
+import type { ReactNode } from "react";
+import type { AuditGroup } from "./inventory";
+
+export function AuditFrame(
+	{ children, groups }: { children: ReactNode; groups: readonly AuditGroup[] },
+) {
+	let [width, setWidth] = useState<"wide" | "narrow">("wide");
+	return (
+		<main className="design-audit" data-design-audit="">
+			<header className="design-audit-header">
+				<div>
+					<h1>Chopin design audit</h1>
+					<p>
+						A live map of the foundations, controls, surfaces, and authored content in the
+						application.
+					</p>
+				</div>
+				<div aria-label="Preview width" className="design-audit-width-controls" role="group">
+					<button
+						aria-label="Preview wide layout"
+						aria-pressed={width === "wide"}
+						className="btn btn-sm btn-ghost"
+						onClick={() => setWidth("wide")}
+						type="button"
+					>
+						Wide
+					</button>
+					<button
+						aria-label="Preview narrow layout"
+						aria-pressed={width === "narrow"}
+						className="btn btn-sm btn-ghost"
+						onClick={() => setWidth("narrow")}
+						type="button"
+					>
+						Narrow
+					</button>
+				</div>
+			</header>
+			<div className="design-audit-layout">
+				<nav aria-label="Design audit sections" className="design-audit-nav">
+					{groups.map(group => <a href={`#${group.id}`} key={group.id}>{group.label}</a>)}
+				</nav>
+				<div className="design-audit-preview" data-preview-width={width}>{children}</div>
+			</div>
+		</main>
+	);
+}
+
+export function AuditSection(
+	{ children, id, title }: { children: ReactNode; id: string; title: string },
+) {
+	return (
+		<section className="design-audit-section" id={id}>
+			<h2>{title}</h2>
+			{children}
+		</section>
+	);
+}
+
+export function AuditPlate(
+	{ children, description, title }: { children?: ReactNode; description?: string; title: string },
+) {
+	return (
+		<section className="design-audit-plate">
+			<header>
+				<h3>{title}</h3>
+				{description ? <p>{description}</p> : null}
+			</header>
+			<div className="design-audit-specimen">{children}</div>
+		</section>
+	);
+}
+
+export function StateLabel({ children }: { children: ReactNode }) {
+	return <span className="design-audit-state">{children}</span>;
+}
diff --git a/apps/web/src/design-audit/inventory.test.ts b/apps/web/src/design-audit/inventory.test.ts
new file mode 100644
index 00000000..710fa2d6
--- /dev/null
+++ b/apps/web/src/design-audit/inventory.test.ts
@@ -0,0 +1,63 @@
+import { describe, expect, it } from "bun:test";
+
+import { AUDIT_INVENTORY } from "./inventory";
+
+const REQUIRED = [
+	"colours",
+	"typography",
+	"spacing",
+	"radii",
+	"shadows",
+	"icons",
+	"buttons",
+	"icon-buttons",
+	"links",
+	"fields",
+	"selections",
+	"tabs",
+	"menus",
+	"dropdowns",
+	"dialogs",
+	"lists",
+	"navigation",
+	"chat",
+	"decisions",
+	"resolved-comments",
+	"loading",
+	"empty",
+	"errors",
+	"callouts",
+	"research",
+	"code",
+	"diff",
+	"diagram",
+	"formula",
+	"image",
+	"table",
+] as const;
+
+describe("design audit inventory", () => {
+	it("covers every required system area exactly once", () => {
+		expect(AUDIT_INVENTORY.map(group => group.id)).toEqual([
+			"foundations",
+			"controls",
+			"surfaces",
+			"authored-content",
+		]);
+
+		let items = AUDIT_INVENTORY.flatMap(group => group.items);
+		let ids = items.map(item => item.id);
+		expect(new Set(ids).size).toBe(ids.length);
+		expect(REQUIRED.every(id => ids.includes(id))).toBe(true);
+	});
+
+	it("records an inspectable source and state for every specimen", () => {
+		for (let group of AUDIT_INVENTORY) {
+			for (let item of group.items) {
+				expect(item.label.trim().length).toBeGreaterThan(0);
+				expect(item.source).toMatch(/^(?:apps|packages)\//);
+				expect(item.states.length).toBeGreaterThan(0);
+			}
+		}
+	});
+});
diff --git a/apps/web/src/design-audit/inventory.ts b/apps/web/src/design-audit/inventory.ts
new file mode 100644
index 00000000..8a3f84d8
--- /dev/null
+++ b/apps/web/src/design-audit/inventory.ts
@@ -0,0 +1,186 @@
+export type AuditItem = {
+	id: string;
+	label: string;
+	source: string;
+	states: readonly string[];
+	judgement?: string;
+};
+
+export type AuditGroup = {
+	id: "foundations" | "controls" | "surfaces" | "authored-content";
+	label: string;
+	items: readonly AuditItem[];
+};
+
+const STATIC = ["default"] as const;
+const INTERACTIVE = ["default", "hover", "active", "focus", "disabled"] as const;
+const ASYNC = ["loading", "empty", "error", "ready"] as const;
+
+export const AUDIT_INVENTORY: readonly AuditGroup[] = [
+	{
+		id: "foundations",
+		label: "Foundations",
+		items: [
+			{ id: "colours", label: "Colour roles", source: "apps/web/src/theme.css", states: STATIC },
+			{ id: "typography", label: "Typography", source: "apps/web/src/theme.css", states: STATIC },
+			{ id: "spacing", label: "Spacing", source: "apps/web/src/theme.css", states: STATIC },
+			{ id: "radii", label: "Radii", source: "apps/web/src/theme.css", states: STATIC },
+			{ id: "shadows", label: "Elevation", source: "apps/web/src/theme.css", states: STATIC },
+			{
+				id: "icons",
+				label: "Icons",
+				source: "apps/web/src/assets/icons",
+				states: ["default", "active", "disabled"],
+				judgement: "Confirm the compact, default, and emphasis size roles.",
+			},
+		],
+	},
+	{
+		id: "controls",
+		label: "Controls",
+		items: [
+			{ id: "buttons", label: "Buttons", source: "apps/web/src/theme.css", states: INTERACTIVE },
+			{
+				id: "icon-buttons",
+				label: "Icon buttons",
+				source: "apps/web/src/theme.css",
+				states: INTERACTIVE,
+			},
+			{ id: "links", label: "Links", source: "apps/web/src/theme.css", states: INTERACTIVE },
+			{ id: "fields", label: "Fields", source: "apps/web/src/theme.css", states: INTERACTIVE },
+			{
+				id: "selections",
+				label: "Choices and selections",
+				source: "apps/web/src/theme.css",
+				states: ["default", "selected", "focus", "disabled"],
+			},
+			{
+				id: "tabs",
+				label: "Tabs",
+				source: "packages/editor/src/widgets/tabs.tsx",
+				states: ["default", "selected", "focus", "overflow"],
+			},
+			{
+				id: "menus",
+				label: "Menus",
+				source: "apps/web/src/document-actions-menu.tsx",
+				states: ["closed", "open", "focus", "disabled"],
+			},
+			{
+				id: "dropdowns",
+				label: "Dropdowns",
+				source: "apps/web/src/document-picker.tsx",
+				states: ["closed", "open", "selected", "loading", "error"],
+			},
+		],
+	},
+	{
+		id: "surfaces",
+		label: "Application surfaces",
+		items: [
+			{
+				id: "dialogs",
+				label: "Dialogs",
+				source: "apps/web/src/navigation-dialog.tsx",
+				states: ["open", "busy", "destructive", "error"],
+			},
+			{
+				id: "lists",
+				label: "Lists",
+				source: "apps/web/src/document-picker.tsx",
+				states: ["default", "hover", "selected", "empty"],
+			},
+			{
+				id: "navigation",
+				label: "Navigation",
+				source: "apps/web/src/project-sidebar.tsx",
+				states: ["default", "current", "ancestor", "archived", "loading"],
+			},
+			{
+				id: "chat",
+				label: "Conversation",
+				source: "apps/web/src/chat/chat.tsx",
+				states: ["member", "planner", "tool", "busy", "error"],
+			},
+			{
+				id: "decisions",
+				label: "Decisions",
+				source: "packages/editor/src/decisions.tsx",
+				states: ["unanswered", "answered", "resolved", "orphaned", "empty"],
+			},
+			{
+				id: "resolved-comments",
+				label: "Resolved comments",
+				source: "packages/editor/src/comments.tsx",
+				states: ["resolved", "deliberately-empty", "orphaned"],
+			},
+			{ id: "loading", label: "Loading", source: "apps/web/src/hosted.tsx", states: ASYNC },
+			{
+				id: "empty",
+				label: "Empty states",
+				source: "apps/web/src/repository-picker.tsx",
+				states: ["first-use", "no-results", "unavailable"],
+			},
+			{
+				id: "errors",
+				label: "Errors",
+				source: "apps/web/src/terminal-alert.tsx",
+				states: ["inline", "terminal", "recoverable"],
+			},
+		],
+	},
+	{
+		id: "authored-content",
+		label: "Authored content",
+		items: [
+			{
+				id: "callouts",
+				label: "Callouts",
+				source: "packages/editor/src/widgets/callout.tsx",
+				states: ["note", "tip", "warning", "danger", "focus"],
+			},
+			{
+				id: "research",
+				label: "Research",
+				source: "packages/editor/src/widgets/research.tsx",
+				states: ["question", "queued", "running", "failed", "cancelled", "ready"],
+			},
+			{
+				id: "code",
+				label: "Code blocks",
+				source: "packages/editor/src/widgets/code-view.tsx",
+				states: ["plain", "named", "collapsed", "editing"],
+			},
+			{
+				id: "diff",
+				label: "Diff blocks",
+				source: "packages/editor/src/widgets/code-view.tsx",
+				states: ["valid", "invalid", "collapsed"],
+			},
+			{
+				id: "diagram",
+				label: "Diagrams",
+				source: "packages/editor/src/widgets/code-view.tsx",
+				states: ["rendered", "source", "invalid"],
+			},
+			{
+				id: "formula",
+				label: "Formulae",
+				source: "packages/editor/src/widgets/render-blocks.tsx",
+				states: ["inline", "block", "source"],
+			},
+			{
+				id: "image",
+				label: "Images",
+				source: "packages/editor/src/widgets/image.tsx",
+				states: ["loaded", "unavailable", "missing-alt"],
+			},
+			{
+				id: "table",
+				label: "Tables",
+				source: "packages/editor/src/table/chrome.tsx",
+				states: ["default", "selected-cell", "toolbar", "overflow"],
+			},
+		],
+	},
+];
diff --git a/apps/web/src/design-audit/page.test.tsx b/apps/web/src/design-audit/page.test.tsx
index e7520904..986e4283 100644
--- a/apps/web/src/design-audit/page.test.tsx
+++ b/apps/web/src/design-audit/page.test.tsx
@@ -10,5 +10,12 @@ describe("design audit page", () => {
 
 		expect(markup).toContain('data-design-audit=""');
 		expect(markup).toContain("Chopin design audit");
+		expect(markup).toContain('aria-label="Design audit sections"');
+		expect(markup).toContain('aria-label="Preview wide layout"');
+		expect(markup).toContain('aria-label="Preview narrow layout"');
+		expect(markup).toContain('data-preview-width="wide"');
+		for (let id of ["foundations", "controls", "surfaces", "authored-content"]) {
+			expect(markup).toContain(`id="${id}"`);
+		}
 	});
 });
diff --git a/apps/web/src/design-audit/page.tsx b/apps/web/src/design-audit/page.tsx
index 15b3c78b..80918ee1 100644
--- a/apps/web/src/design-audit/page.tsx
+++ b/apps/web/src/design-audit/page.tsx
@@ -1,9 +1,18 @@
+import { AuditFrame, AuditSection } from "./frame";
+import { AUDIT_INVENTORY } from "./inventory";
+
+import "./styles.css";
+
 export function DesignAuditPage() {
 	return (
-		<main className="min-h-dvh bg-ground p-6 text-text-primary" data-design-audit="">
-			<div className="mx-auto max-w-7xl">
-				<h1 className="m-0 text-balance text-2xl font-semibold">Chopin design audit</h1>
-			</div>
-		</main>
+		<AuditFrame groups={AUDIT_INVENTORY}>
+			{AUDIT_INVENTORY.map(group => (
+				<AuditSection id={group.id} key={group.id} title={group.label}>
+					<p className="design-audit-section-summary">
+						{group.items.length} component {group.items.length === 1 ? "family" : "families"}
+					</p>
+				</AuditSection>
+			))}
+		</AuditFrame>
 	);
 }
diff --git a/apps/web/src/design-audit/styles.css b/apps/web/src/design-audit/styles.css
new file mode 100644
index 00000000..7550c40f
--- /dev/null
+++ b/apps/web/src/design-audit/styles.css
@@ -0,0 +1,185 @@
+.design-audit {
+	min-height: 100dvh;
+	padding: max(1.5rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-right))
+		max(2.5rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left));
+	background: var(--color-ground);
+	color: var(--color-text-primary);
+}
+
+.design-audit-header,
+.design-audit-layout {
+	width: min(100%, 90rem);
+	margin-inline: auto;
+}
+
+.design-audit-header {
+	display: flex;
+	align-items: flex-end;
+	justify-content: space-between;
+	gap: 2rem;
+	padding-block-end: 2rem;
+}
+
+.design-audit-header h1,
+.design-audit-section h2,
+.design-audit-plate h3,
+.design-audit-header p,
+.design-audit-plate p {
+	margin: 0;
+}
+
+.design-audit-header h1 {
+	font-size: var(--text-2xl);
+	font-weight: 600;
+	line-height: var(--text-2xl--line-height);
+	text-wrap: balance;
+}
+
+.design-audit-header p {
+	max-width: 65ch;
+	margin-block-start: 0.5rem;
+	font-size: var(--text-sm);
+	line-height: var(--text-sm--line-height);
+	color: var(--color-text-tertiary);
+	text-wrap: pretty;
+}
+
+.design-audit-width-controls {
+	display: inline-flex;
+	flex: 0 0 auto;
+	gap: 0.125rem;
+	padding: 0.125rem;
+	border-radius: var(--radius-lg);
+	background: var(--color-control);
+}
+
+.design-audit-width-controls [aria-pressed="true"] {
+	background: var(--color-page);
+	box-shadow: var(--shadow-resting);
+	color: var(--color-text-primary);
+}
+
+.design-audit-layout {
+	display: grid;
+	grid-template-columns: 10rem minmax(0, 1fr);
+	align-items: start;
+	gap: 2rem;
+}
+
+.design-audit-nav {
+	position: sticky;
+	top: 1.5rem;
+	display: grid;
+	gap: 0.25rem;
+}
+
+.design-audit-nav a {
+	border-radius: var(--radius-md);
+	padding: 0.375rem 0.5rem;
+	font-size: var(--text-sm);
+	font-weight: 500;
+	color: var(--color-text-tertiary);
+	text-decoration: none;
+}
+
+.design-audit-nav a:hover {
+	background: var(--color-hover);
+	color: var(--color-text-primary);
+}
+
+.design-audit-preview {
+	width: 100%;
+	min-width: 0;
+	margin-inline: auto;
+}
+
+.design-audit-preview[data-preview-width="narrow"] {
+	max-width: 24.375rem;
+}
+
+.design-audit-section {
+	padding-block: 2.5rem;
+	border-block-start: var(--edge-width) solid var(--color-edge);
+}
+
+.design-audit-section:first-child {
+	padding-block-start: 0;
+	border-block-start: 0;
+}
+
+.design-audit-section h2 {
+	font-size: var(--text-xl);
+	font-weight: 600;
+	line-height: var(--text-xl--line-height);
+	text-wrap: balance;
+}
+
+.design-audit-section-summary {
+	margin: 0.375rem 0 0;
+	font-size: var(--text-sm);
+	color: var(--color-text-quaternary);
+}
+
+.design-audit-plate {
+	padding-block: 1.5rem;
+}
+
+.design-audit-plate > header {
+	display: grid;
+	gap: 0.25rem;
+	margin-block-end: 1rem;
+}
+
+.design-audit-plate h3 {
+	font-size: var(--text-lg);
+	font-weight: 600;
+	line-height: var(--text-lg--line-height);
+	text-wrap: balance;
+}
+
+.design-audit-plate p {
+	max-width: 70ch;
+	font-size: var(--text-sm);
+	color: var(--color-text-tertiary);
+	text-wrap: pretty;
+}
+
+.design-audit-specimen {
+	min-width: 0;
+}
+
+.design-audit-state {
+	display: inline-flex;
+	align-items: center;
+	min-height: 1.5rem;
+	padding-inline: 0.5rem;
+	border-radius: 9999px;
+	background: var(--color-gray-200);
+	font-size: var(--text-sm);
+	font-weight: 500;
+	color: var(--color-text-tertiary);
+}
+
+@media (max-width: 639px) {
+	.design-audit {
+		padding-right: max(1rem, env(safe-area-inset-right));
+		padding-left: max(1rem, env(safe-area-inset-left));
+	}
+
+	.design-audit-header {
+		align-items: flex-start;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	.design-audit-layout {
+		display: block;
+	}
+
+	.design-audit-nav {
+		position: static;
+		display: flex;
+		overflow-x: auto;
+		margin-block-end: 2rem;
+	}
+}

From 0ea1b2855179420ccbd782646b52e47055b80ccb Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Fri, 28 Aug 2026 10:16:49 +0100
Subject: [PATCH 05/35] Catalogue design foundations and controls

---
 apps/web/src/design-audit/controls.css       | 287 +++++++++++++++++++
 apps/web/src/design-audit/controls.tsx       | 277 ++++++++++++++++++
 apps/web/src/design-audit/foundations.css    | 185 ++++++++++++
 apps/web/src/design-audit/foundations.tsx    | 133 +++++++++
 apps/web/src/design-audit/frame.tsx          |   9 +-
 apps/web/src/design-audit/icons.tsx          | 133 +++++++++
 apps/web/src/design-audit/page.tsx           |  16 +-
 apps/web/src/design-audit/specimens.test.tsx |  40 +++
 apps/web/src/design-audit/styles.css         |   3 +
 9 files changed, 1077 insertions(+), 6 deletions(-)
 create mode 100644 apps/web/src/design-audit/controls.css
 create mode 100644 apps/web/src/design-audit/controls.tsx
 create mode 100644 apps/web/src/design-audit/foundations.css
 create mode 100644 apps/web/src/design-audit/foundations.tsx
 create mode 100644 apps/web/src/design-audit/icons.tsx
 create mode 100644 apps/web/src/design-audit/specimens.test.tsx

diff --git a/apps/web/src/design-audit/controls.css b/apps/web/src/design-audit/controls.css
new file mode 100644
index 00000000..3e4024dc
--- /dev/null
+++ b/apps/web/src/design-audit/controls.css
@@ -0,0 +1,287 @@
+.design-audit-button-families,
+.design-audit-button-families > div,
+.design-audit-control-state {
+	display: grid;
+}
+
+.design-audit-button-families {
+	gap: 1.5rem;
+}
+
+.design-audit-button-families > div {
+	gap: 0.75rem;
+}
+
+.design-audit-button-families h4 {
+	margin: 0;
+	font-size: var(--text-sm);
+	font-weight: 600;
+	color: var(--color-text-secondary);
+}
+
+.design-audit-control-grid,
+.design-audit-button-sizes {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
+	gap: 0.75rem;
+}
+
+.design-audit-control-state {
+	align-content: start;
+	justify-items: start;
+	gap: 0.5rem;
+}
+
+.design-audit-control-state > div {
+	display: flex;
+	min-height: 2.5rem;
+	align-items: center;
+}
+
+.design-audit-busy-mark {
+	width: 0.5rem;
+	height: 0.5rem;
+	margin-inline-end: 0.375rem;
+	border-radius: 9999px;
+	background: currentColor;
+}
+
+.design-audit [data-audit-state="hover"].btn-primary {
+	background: var(--color-brand-hover);
+}
+
+.design-audit [data-audit-state="active"].btn-primary {
+	background: var(--color-brand-active);
+}
+
+.design-audit [data-audit-state="hover"].btn-secondary {
+	background: var(--color-gray-300);
+}
+
+.design-audit [data-audit-state="active"].btn-secondary {
+	background: var(--color-gray-400);
+}
+
+.design-audit [data-audit-state="hover"].btn-ghost {
+	background: var(--color-gray-200);
+}
+
+.design-audit [data-audit-state="active"].btn-ghost {
+	background: var(--color-gray-300);
+}
+
+.design-audit [data-audit-state="hover"].btn-destructive {
+	background: var(--color-destructive-hover);
+}
+
+.design-audit [data-audit-state="active"].btn-destructive {
+	background: var(--color-destructive-active);
+}
+
+.design-audit [data-audit-state="focus"] {
+	outline: var(--focus-ring-width) solid var(--focus-ring-color);
+	outline-offset: var(--focus-ring-offset);
+}
+
+.design-audit-link {
+	border-radius: var(--radius-sm);
+	font-size: var(--text-sm);
+	font-weight: 500;
+	color: var(--color-brand-ink);
+	text-decoration: underline;
+	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
+	text-decoration-thickness: 1px;
+	text-underline-offset: 0.18em;
+}
+
+.design-audit-link[data-audit-state="hover"] {
+	color: var(--color-brand-hover);
+	text-decoration-color: currentColor;
+}
+
+.design-audit-link[data-audit-state="active"] {
+	color: var(--color-brand-active);
+}
+
+.design-audit-link[aria-disabled="true"] {
+	color: var(--color-text-quaternary);
+	text-decoration: none;
+}
+
+.design-audit-field-grid {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: 1rem;
+}
+
+.design-audit-field-grid label {
+	display: grid;
+	gap: 0.375rem;
+	font-size: var(--text-sm);
+	font-weight: 500;
+	color: var(--color-text-secondary);
+}
+
+.design-audit-field-grid :is(input, select, textarea) {
+	width: 100%;
+	min-width: 0;
+	padding: 0.375rem 0.5rem;
+	font-size: var(--text-sm);
+	line-height: var(--text-sm--line-height);
+}
+
+.design-audit-field-wide {
+	grid-column: 1 / -1;
+}
+
+.design-audit-choice-row {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 1rem 1.5rem;
+	margin-block-end: 1rem;
+}
+
+.design-audit-choice-row label {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.5rem;
+	font-size: var(--text-sm);
+	color: var(--color-text-secondary);
+}
+
+.design-audit-choice-row input {
+	width: 1rem;
+	height: 1rem;
+}
+
+.design-audit-selection-list,
+.design-audit-menu,
+.design-audit-dropdown-list {
+	width: min(100%, 18rem);
+	padding: 0.25rem;
+	border-radius: var(--radius-lg);
+	background: var(--color-page);
+	box-shadow: var(--shadow-overlay);
+}
+
+.design-audit-selection-list [role="option"],
+.design-audit-dropdown-list [role="option"] {
+	display: flex;
+	min-height: 2rem;
+	align-items: center;
+	gap: 0.5rem;
+	border-radius: var(--radius-md);
+	padding-inline: 0.5rem;
+	font-size: var(--text-sm);
+	color: var(--color-text-secondary);
+}
+
+.design-audit-selection-list [aria-selected="true"],
+.design-audit-dropdown-list [aria-selected="true"] {
+	background: var(--color-selected);
+	color: var(--color-text-primary);
+}
+
+.design-audit-selection-list [aria-disabled="true"] {
+	color: var(--color-text-quaternary);
+}
+
+.design-audit-tabs {
+	display: flex;
+	width: fit-content;
+	max-width: 100%;
+	gap: 0.25rem;
+	overflow-x: auto;
+	border-block-end: var(--edge-width) solid var(--color-edge);
+}
+
+.design-audit-tabs button {
+	position: relative;
+	min-height: 2rem;
+	padding-inline: 0.5rem;
+	font-size: var(--text-sm);
+	font-weight: 500;
+	white-space: nowrap;
+	color: var(--color-text-tertiary);
+}
+
+.design-audit-tabs button[aria-selected="true"] {
+	color: var(--color-text-primary);
+}
+
+.design-audit-tabs button[aria-selected="true"]::after {
+	position: absolute;
+	right: 0.5rem;
+	bottom: -1px;
+	left: 0.5rem;
+	height: 2px;
+	border-radius: 9999px;
+	background: var(--color-brand);
+	content: "";
+}
+
+.design-audit-tabs button:disabled {
+	color: var(--color-text-quaternary);
+}
+
+.design-audit-tabs button span {
+	margin-inline-start: 0.25rem;
+	font-variant-numeric: tabular-nums;
+}
+
+.design-audit-menu {
+	display: grid;
+}
+
+.design-audit-menu button {
+	min-height: 2rem;
+	border-radius: var(--radius-md);
+	padding-inline: 0.5rem;
+	font-size: var(--text-sm);
+	text-align: left;
+	color: var(--color-text-secondary);
+}
+
+.design-audit-menu button:hover {
+	background: var(--color-hover);
+	color: var(--color-text-primary);
+}
+
+.design-audit-menu .design-audit-menu-destructive {
+	margin-block-start: 0.25rem;
+	border-block-start: var(--edge-width) solid var(--color-edge);
+	border-radius: 0 0 var(--radius-md) var(--radius-md);
+	color: var(--color-destructive-ink);
+}
+
+.design-audit-dropdown-row {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: flex-start;
+	gap: 2rem;
+}
+
+.design-audit-dropdown-trigger {
+	display: inline-flex;
+	min-height: 2rem;
+	align-items: center;
+	justify-content: space-between;
+	gap: 1rem;
+	padding-inline: 0.5rem;
+	font-size: var(--text-sm);
+}
+
+.design-audit-dropdown-open {
+	display: grid;
+	gap: 0.25rem;
+}
+
+@media (max-width: 639px) {
+	.design-audit-field-grid {
+		grid-template-columns: 1fr;
+	}
+
+	.design-audit-field-wide {
+		grid-column: auto;
+	}
+}
diff --git a/apps/web/src/design-audit/controls.tsx b/apps/web/src/design-audit/controls.tsx
new file mode 100644
index 00000000..74667aed
--- /dev/null
+++ b/apps/web/src/design-audit/controls.tsx
@@ -0,0 +1,277 @@
+import { CaretDownIcon, CheckIcon, PlusIcon } from "@phosphor-icons/react";
+
+import { AuditPlate, StateLabel } from "./frame";
+
+import type { ReactNode } from "react";
+
+const STATES = ["Default", "Hover", "Active", "Focus", "Disabled"] as const;
+
+function StateSample({ children, state }: { children: ReactNode; state: string }) {
+	return (
+		<div className="design-audit-control-state">
+			<StateLabel>{state}</StateLabel>
+			<div>{children}</div>
+		</div>
+	);
+}
+
+function ButtonRow(
+	{ className, label }: { className: string; label: string },
+) {
+	return (
+		<div className="design-audit-control-grid">
+			{STATES.map(state => (
+				<StateSample key={state} state={state}>
+					<button
+						className={`btn btn-md ${className}`}
+						data-audit-state={state.toLowerCase()}
+						disabled={state === "Disabled"}
+						type="button"
+					>
+						{label}
+					</button>
+				</StateSample>
+			))}
+		</div>
+	);
+}
+
+export function Controls() {
+	return (
+		<>
+			<AuditPlate
+				description="Primary, secondary, tertiary, and destructive actions across stable states."
+				item="buttons"
+				title="Buttons"
+			>
+				<div className="design-audit-button-families">
+					<div>
+						<h4>Primary</h4>
+						<ButtonRow className="btn-primary" label="Create document" />
+					</div>
+					<div>
+						<h4>Secondary</h4>
+						<ButtonRow className="btn-secondary" label="Cancel" />
+					</div>
+					<div>
+						<h4>Ghost</h4>
+						<ButtonRow className="btn-ghost" label="Learn more" />
+					</div>
+					<div>
+						<h4>Destructive</h4>
+						<ButtonRow className="btn-destructive" label="Delete document" />
+					</div>
+					<div className="design-audit-button-sizes">
+						<StateSample state="Medium">
+							<button className="btn btn-md btn-primary" type="button">Medium</button>
+						</StateSample>
+						<StateSample state="Small">
+							<button className="btn btn-sm btn-secondary" type="button">Small</button>
+						</StateSample>
+						<StateSample state="Busy">
+							<button aria-busy="true" className="btn btn-md btn-primary" disabled type="button">
+								<span aria-hidden="true" className="design-audit-busy-mark" />Saving
+							</button>
+						</StateSample>
+					</div>
+				</div>
+			</AuditPlate>
+
+			<AuditPlate
+				description="The shared 28px icon control with a consistent 16px glyph."
+				item="icon-buttons"
+				title="Icon buttons"
+			>
+				<div className="design-audit-control-grid">
+					{STATES.map(state => (
+						<StateSample key={state} state={state}>
+							<button
+								aria-label="Add document"
+								className="btn btn-icon btn-ghost"
+								data-audit-state={state.toLowerCase()}
+								disabled={state === "Disabled"}
+								type="button"
+							>
+								<PlusIcon aria-hidden="true" size={16} />
+							</button>
+						</StateSample>
+					))}
+				</div>
+			</AuditPlate>
+
+			<AuditPlate description="Inline navigation and action links." item="links" title="Links">
+				<div className="design-audit-control-grid">
+					{STATES.map(state => (
+						<StateSample key={state} state={state}>
+							<a
+								aria-disabled={state === "Disabled" ? true : undefined}
+								className="design-audit-link"
+								data-audit-state={state.toLowerCase()}
+								href={state === "Disabled" ? undefined : "#links"}
+							>
+								Read the document
+							</a>
+						</StateSample>
+					))}
+				</div>
+			</AuditPlate>
+
+			<AuditPlate description="Text, selection, and multiline inputs." item="fields" title="Fields">
+				<div className="design-audit-field-grid">
+					<label htmlFor="audit-field-default">
+						Default<input
+							className="field"
+							defaultValue="Document title"
+							id="audit-field-default"
+						/>
+					</label>
+					<label htmlFor="audit-field-focus">
+						Focus<input
+							className="field"
+							data-audit-state="focus"
+							defaultValue="Focused title"
+							id="audit-field-focus"
+						/>
+					</label>
+					<label htmlFor="audit-field-disabled">
+						Disabled<input
+							className="field"
+							defaultValue="Unavailable"
+							disabled
+							id="audit-field-disabled"
+						/>
+					</label>
+					<label htmlFor="audit-field-invalid">
+						Error<input
+							aria-invalid="true"
+							className="field"
+							defaultValue=""
+							id="audit-field-invalid"
+						/>
+					</label>
+					<label htmlFor="audit-field-readonly">
+						Read only<input
+							className="field"
+							defaultValue="Stored title"
+							id="audit-field-readonly"
+							readOnly
+						/>
+					</label>
+					<label htmlFor="audit-field-select">
+						Select<select className="field" defaultValue="active" id="audit-field-select">
+							<option value="active">Active documents</option>
+							<option value="archived">Archived documents</option>
+						</select>
+					</label>
+					<label className="design-audit-field-wide" htmlFor="audit-field-textarea">
+						Textarea<textarea
+							className="field"
+							defaultValue="Write a message to the room"
+							id="audit-field-textarea"
+							rows={3}
+						/>
+					</label>
+				</div>
+			</AuditPlate>
+
+			<AuditPlate
+				description="Checkboxes, radios, and list selection."
+				item="selections"
+				title="Choices and selections"
+			>
+				<div className="design-audit-choice-row">
+					<label>
+						<input className="choice-control" type="checkbox" />Unchecked
+					</label>
+					<label>
+						<input className="choice-control" defaultChecked type="checkbox" />Checked
+					</label>
+					<label>
+						<input className="choice-control" disabled type="checkbox" />Disabled
+					</label>
+					<label>
+						<input
+							className="choice-control"
+							defaultChecked
+							name="audit-radio"
+							type="radio"
+						/>Selected
+					</label>
+					<label>
+						<input className="choice-control" name="audit-radio" type="radio" />Unselected
+					</label>
+				</div>
+				<div aria-label="Documents" className="design-audit-selection-list" role="listbox">
+					<div role="option">Architecture notes</div>
+					<div aria-selected="true" role="option">
+						<CheckIcon aria-hidden="true" size={16} />Design system audit
+					</div>
+					<div aria-disabled="true" role="option">Archived proposal</div>
+				</div>
+			</AuditPlate>
+
+			<AuditPlate
+				description="Destination and authored-content tab treatments."
+				item="tabs"
+				title="Tabs"
+			>
+				<div aria-label="Document views" className="design-audit-tabs" role="tablist">
+					<button aria-selected="true" role="tab" type="button">Document</button>
+					<button aria-selected="false" role="tab" type="button">
+						Decisions <span>3</span>
+					</button>
+					<button aria-selected="false" disabled role="tab" type="button">Unavailable</button>
+				</div>
+			</AuditPlate>
+
+			<AuditPlate
+				description="Open action menu with destructive separation."
+				item="menus"
+				title="Menus"
+			>
+				<div aria-label="Document actions" className="design-audit-menu" role="menu">
+					<button role="menuitem" type="button">Rename document</button>
+					<button role="menuitem" type="button">Archive document</button>
+					<button className="design-audit-menu-destructive" role="menuitem" type="button">
+						Delete document
+					</button>
+				</div>
+			</AuditPlate>
+
+			<AuditPlate
+				description="Closed trigger and open list selection."
+				item="dropdowns"
+				title="Dropdowns"
+			>
+				<div className="design-audit-dropdown-row">
+					<button
+						aria-expanded="false"
+						className="field design-audit-dropdown-trigger"
+						type="button"
+					>
+						Active documents<CaretDownIcon aria-hidden="true" size={16} />
+					</button>
+					<div className="design-audit-dropdown-open">
+						<button
+							aria-expanded="true"
+							className="field design-audit-dropdown-trigger"
+							type="button"
+						>
+							Active documents<CaretDownIcon aria-hidden="true" size={16} />
+						</button>
+						<div
+							aria-label="Document collection"
+							className="design-audit-dropdown-list"
+							role="listbox"
+						>
+							<div aria-selected="true" role="option">
+								<CheckIcon aria-hidden="true" size={16} />Active documents
+							</div>
+							<div role="option">Archived documents</div>
+						</div>
+					</div>
+				</div>
+			</AuditPlate>
+		</>
+	);
+}
diff --git a/apps/web/src/design-audit/foundations.css b/apps/web/src/design-audit/foundations.css
new file mode 100644
index 00000000..dedc15f1
--- /dev/null
+++ b/apps/web/src/design-audit/foundations.css
@@ -0,0 +1,185 @@
+.design-audit-swatch-grid,
+.design-audit-icon-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
+	gap: 0.75rem;
+}
+
+.design-audit-swatch-grid figure,
+.design-audit-icon-grid figure,
+.design-audit-token-row figure {
+	min-width: 0;
+	margin: 0;
+}
+
+.design-audit-swatch-grid figure > span {
+	display: block;
+	height: 4rem;
+	border: var(--edge-width) solid var(--color-edge);
+	border-radius: var(--radius-md);
+}
+
+.design-audit-swatch-grid figcaption,
+.design-audit-icon-grid figcaption {
+	display: grid;
+	gap: 0.125rem;
+	margin-block-start: 0.5rem;
+	font-size: var(--text-sm);
+	line-height: var(--text-sm--line-height);
+}
+
+.design-audit-swatch-grid code,
+.design-audit-icon-grid figcaption span {
+	overflow: hidden;
+	font-size: var(--text-sm);
+	color: var(--color-text-quaternary);
+	text-overflow: ellipsis;
+}
+
+.design-audit-type-stack {
+	display: grid;
+	gap: 1.25rem;
+}
+
+.design-audit-type-stack > div {
+	display: grid;
+	grid-template-columns: 9rem minmax(0, 1fr);
+	align-items: baseline;
+	gap: 1.5rem;
+}
+
+.design-audit-type-stack span {
+	font-size: var(--text-sm);
+	font-weight: 500;
+	color: var(--color-text-quaternary);
+}
+
+.design-audit-type-stack strong {
+	font-weight: 500;
+	text-wrap: pretty;
+}
+
+.design-audit-spacing-scale {
+	display: grid;
+	gap: 0.625rem;
+}
+
+.design-audit-spacing-scale > div {
+	display: grid;
+	grid-template-columns: 3rem minmax(0, 1fr);
+	align-items: center;
+	gap: 0.75rem;
+}
+
+.design-audit-spacing-scale code {
+	font-size: var(--text-sm);
+	color: var(--color-text-tertiary);
+}
+
+.design-audit-spacing-scale span {
+	display: block;
+	height: 0.5rem;
+	border-radius: var(--radius-sm);
+	background: var(--color-brand);
+}
+
+.design-audit-token-row {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+	gap: 1rem;
+}
+
+.design-audit-token-row figure > span {
+	display: block;
+	height: 5rem;
+	border: var(--edge-width) solid var(--color-edge);
+	background: var(--color-page);
+}
+
+.design-audit-token-row figcaption {
+	margin-block-start: 0.5rem;
+	font-size: var(--text-sm);
+	font-weight: 500;
+	color: var(--color-text-tertiary);
+}
+
+.design-audit-icon-catalogue,
+.design-audit-icon-catalogue h4 {
+	margin: 0;
+}
+
+.design-audit-icon-catalogue {
+	display: grid;
+	gap: 1.5rem;
+}
+
+.design-audit-icon-catalogue h4 {
+	font-size: var(--text-sm);
+	font-weight: 600;
+	color: var(--color-text-secondary);
+}
+
+.design-audit-icon-grid figure {
+	display: grid;
+	grid-template-columns: 2rem minmax(0, 1fr);
+	align-items: center;
+	gap: 0.625rem;
+	padding: 0.5rem;
+	border-radius: var(--radius-md);
+	background: var(--color-page);
+}
+
+.design-audit-icon-grid figcaption {
+	margin: 0;
+}
+
+.design-audit-icon-frame {
+	display: grid;
+	width: 2rem;
+	height: 2rem;
+	place-items: center;
+	border-radius: var(--radius-sm);
+	background: var(--color-gray-100);
+	color: var(--color-text-secondary);
+}
+
+.design-audit-icon-frame img {
+	width: 1rem;
+	height: 1rem;
+	object-fit: contain;
+}
+
+.design-audit-icon-states,
+.design-audit-icon-sizes {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 1rem;
+}
+
+.design-audit-icon-states > div,
+.design-audit-icon-sizes > div {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.5rem;
+	font-size: var(--text-sm);
+	font-weight: 500;
+}
+
+.design-audit-icon-states [data-icon-state="default"] {
+	color: var(--color-text-secondary);
+}
+
+.design-audit-icon-states [data-icon-state="active"] {
+	color: var(--color-brand);
+}
+
+.design-audit-icon-states [data-icon-state="disabled"] {
+	color: var(--color-gray-500);
+}
+
+@media (max-width: 639px) {
+	.design-audit-type-stack > div {
+		grid-template-columns: 1fr;
+		gap: 0.25rem;
+	}
+}
diff --git a/apps/web/src/design-audit/foundations.tsx b/apps/web/src/design-audit/foundations.tsx
new file mode 100644
index 00000000..23004214
--- /dev/null
+++ b/apps/web/src/design-audit/foundations.tsx
@@ -0,0 +1,133 @@
+import { AuditPlate } from "./frame";
+import { IconCatalogue } from "./icons";
+
+const COLOURS = [
+	["Page", "--color-page"],
+	["Ground", "--color-ground"],
+	["Inset", "--color-inset"],
+	["Selected", "--color-selected"],
+	["Control", "--color-control"],
+	["Primary text", "--color-text-primary"],
+	["Secondary text", "--color-text-secondary"],
+	["Tertiary text", "--color-text-tertiary"],
+	["Quaternary text", "--color-text-quaternary"],
+	["Brand", "--color-brand"],
+	["Brand hover", "--color-brand-hover"],
+	["Brand wash", "--color-brand-wash"],
+	["Success", "--color-success"],
+	["Success wash", "--color-success-wash"],
+	["Warning", "--color-warning"],
+	["Warning wash", "--color-warning-wash"],
+	["Destructive", "--color-destructive"],
+	["Destructive wash", "--color-destructive-wash"],
+] as const;
+
+const TYPE = [
+	["Chrome and labels", "--text-sm", "--text-sm--line-height"],
+	["Document prose", "--text-base", "--text-base--line-height"],
+	["Subheading", "--text-lg", "--text-lg--line-height"],
+	["Section heading", "--text-xl", "--text-xl--line-height"],
+	["Document title", "--text-2xl", "--text-2xl--line-height"],
+] as const;
+
+const SPACING = [2, 4, 6, 8, 12, 16, 24, 32] as const;
+
+const RADII = [
+	["Small", "--radius-sm"],
+	["Medium", "--radius-md"],
+	["Large", "--radius-lg"],
+	["Extra large", "--radius-xl"],
+] as const;
+
+const SHADOWS = [
+	["Resting", "--shadow-resting"],
+	["Raised", "--shadow-raised"],
+	["Overlay", "--shadow-overlay"],
+] as const;
+
+export function Foundations() {
+	return (
+		<>
+			<AuditPlate
+				item="colours"
+				title="Colour roles"
+				description="Semantic roles on the light system."
+			>
+				<div className="design-audit-swatch-grid">
+					{COLOURS.map(([label, token]) => (
+						<figure key={token}>
+							<span style={{ background: `var(${token})` }} />
+							<figcaption>
+								<strong>{label}</strong>
+								<code>{token}</code>
+							</figcaption>
+						</figure>
+					))}
+				</div>
+			</AuditPlate>
+			<AuditPlate
+				item="typography"
+				title="Typography"
+				description="The complete five-rung type scale."
+			>
+				<div className="design-audit-type-stack">
+					{TYPE.map(([label, size, lineHeight]) => (
+						<div key={size} style={{ fontSize: `var(${size})`, lineHeight: `var(${lineHeight})` }}>
+							<span>{label}</span>
+							<strong>Several people and a Planner share one document.</strong>
+						</div>
+					))}
+				</div>
+			</AuditPlate>
+			<AuditPlate
+				item="spacing"
+				title="Spacing"
+				description="Common intervals on the four-pixel base scale."
+			>
+				<div className="design-audit-spacing-scale">
+					{SPACING.map(value => (
+						<div key={value}>
+							<code>{value}px</code>
+							<span style={{ width: value }} />
+						</div>
+					))}
+				</div>
+			</AuditPlate>
+			<AuditPlate
+				item="radii"
+				title="Radii"
+				description="Four roles from controls to the document page."
+			>
+				<div className="design-audit-token-row">
+					{RADII.map(([label, token]) => (
+						<figure key={token}>
+							<span style={{ borderRadius: `var(${token})` }} />
+							<figcaption>{label}</figcaption>
+						</figure>
+					))}
+				</div>
+			</AuditPlate>
+			<AuditPlate
+				item="shadows"
+				title="Elevation"
+				description="Resting, raised, and overlay depth roles."
+			>
+				<div className="design-audit-token-row">
+					{SHADOWS.map(([label, token]) => (
+						<figure key={token}>
+							<span style={{ boxShadow: `var(${token})` }} />
+							<figcaption>{label}</figcaption>
+						</figure>
+					))}
+				</div>
+			</AuditPlate>
+			<AuditPlate
+				item="icons"
+				title="Icons"
+				description="Every local SVG and Phosphor glyph currently used by the interface."
+			>
+				<IconCatalogue />
+			</AuditPlate>
+		</>
+	);
+}
diff --git a/apps/web/src/design-audit/frame.tsx b/apps/web/src/design-audit/frame.tsx
index 2808b31e..5ba50004 100644
--- a/apps/web/src/design-audit/frame.tsx
+++ b/apps/web/src/design-audit/frame.tsx
@@ -60,10 +60,15 @@ export function AuditSection(
 }
 
 export function AuditPlate(
-	{ children, description, title }: { children?: ReactNode; description?: string; title: string },
+	{ children, description, item, title }: {
+		children?: ReactNode;
+		description?: string;
+		item?: string;
+		title: string;
+	},
 ) {
 	return (
-		<section className="design-audit-plate">
+		<section className="design-audit-plate" data-audit-item={item}>
 			<header>
 				<h3>{title}</h3>
 				{description ? <p>{description}</p> : null}
diff --git a/apps/web/src/design-audit/icons.tsx b/apps/web/src/design-audit/icons.tsx
new file mode 100644
index 00000000..52bb466f
--- /dev/null
+++ b/apps/web/src/design-audit/icons.tsx
@@ -0,0 +1,133 @@
+import {
+	ArrowUpIcon,
+	CaretDownIcon,
+	CaretRightIcon,
+	ChatCircleIcon,
+	CheckIcon,
+	InfoIcon,
+	LightbulbIcon,
+	PlusIcon,
+	SignInIcon,
+	SirenIcon,
+	StarFourIcon,
+	WarningIcon,
+	XIcon,
+} from "@phosphor-icons/react";
+
+import addProject from "../assets/figma/navigation/add-project.svg";
+import archive from "../assets/figma/navigation/box-archive.svg";
+import book from "../assets/figma/navigation/book-bookmark.svg";
+import chopin from "../assets/figma/navigation/chopin.svg";
+import collapse from "../assets/figma/navigation/collapse.svg";
+import documentActions from "../assets/figma/navigation/document-actions.svg";
+import newDocument from "../assets/figma/navigation/new-document.svg";
+import search from "../assets/figma/navigation/search.svg";
+import hideSidebar from "../assets/figma/navigation/sidebar-right-3-hide.svg";
+import conversationClose from "../assets/icons/conversation-close.svg";
+import conversation from "../assets/icons/conversation.svg";
+import navigationChevron from "../assets/icons/navigation-chevron-right.svg";
+import navigationXmark from "../assets/icons/navigation-xmark.svg";
+import plannerStop from "../assets/icons/planner-stop.svg";
+import sendArrow from "../assets/icons/send-arrow-up.svg";
+import toolChevronDown from "../assets/icons/tool-chevron-down.svg";
+import toolChevronRight from "../assets/icons/tool-chevron-right.svg";
+import toolLoader from "../assets/icons/tool-loader.svg";
+import linkPlus from "../../../../packages/editor/src/assets/icons/link-plus.svg";
+import messagePlus from "../../../../packages/editor/src/assets/icons/message-plus.svg";
+
+import type { Icon } from "@phosphor-icons/react";
+
+type LocalIcon = {
+	duplicate?: string;
+	name: string;
+	source: string;
+};
+
+const LOCAL_ICONS: readonly LocalIcon[] = [
+	{ name: "Add project", source: addProject },
+	{ name: "Book bookmark", source: book },
+	{ name: "Archive", source: archive },
+	{ name: "Chopin", source: chopin },
+	{ duplicate: "conversation-close.svg", name: "Collapse", source: collapse },
+	{ name: "Document actions", source: documentActions },
+	{ name: "New document", source: newDocument },
+	{ name: "Search", source: search },
+	{ name: "Hide sidebar", source: hideSidebar },
+	{ duplicate: "collapse.svg", name: "Conversation close", source: conversationClose },
+	{ name: "Conversation", source: conversation },
+	{ name: "Navigation chevron", source: navigationChevron },
+	{ name: "Navigation close", source: navigationXmark },
+	{ name: "Planner stop", source: plannerStop },
+	{ name: "Send", source: sendArrow },
+	{ name: "Tool chevron down", source: toolChevronDown },
+	{ name: "Tool chevron right", source: toolChevronRight },
+	{ name: "Tool loader", source: toolLoader },
+	{ name: "Link plus", source: linkPlus },
+	{ name: "Message plus", source: messagePlus },
+];
+
+const PHOSPHOR_ICONS: readonly { icon: Icon; name: string }[] = [
+	{ icon: ArrowUpIcon, name: "Arrow up" },
+	{ icon: CaretDownIcon, name: "Caret down" },
+	{ icon: CaretRightIcon, name: "Caret right" },
+	{ icon: ChatCircleIcon, name: "Chat circle" },
+	{ icon: CheckIcon, name: "Check" },
+	{ icon: InfoIcon, name: "Info" },
+	{ icon: LightbulbIcon, name: "Lightbulb" },
+	{ icon: PlusIcon, name: "Plus" },
+	{ icon: SignInIcon, name: "Sign in" },
+	{ icon: SirenIcon, name: "Siren" },
+	{ icon: StarFourIcon, name: "Important" },
+	{ icon: WarningIcon, name: "Warning" },
+	{ icon: XIcon, name: "Close" },
+];
+
+export function IconCatalogue() {
+	return (
+		<div className="design-audit-icon-catalogue">
+			<div className="design-audit-icon-states" aria-label="Icon colour states">
+				{(["Default", "Active", "Disabled"] as const).map(state => (
+					<div data-icon-state={state.toLowerCase()} key={state}>
+						<CheckIcon aria-hidden="true" size={16} />
+						<span>{state}</span>
+					</div>
+				))}
+			</div>
+			<h4>Local SVG assets</h4>
+			<div className="design-audit-icon-grid">
+				{LOCAL_ICONS.map(icon => (
+					<figure key={icon.name}>
+						<span className="design-audit-icon-frame">
+							<img alt="" src={icon.source} />
+						</span>
+						<figcaption>
+							<strong>{icon.name}</strong>
+							{icon.duplicate ? <span>Exact duplicate: {icon.duplicate}</span> : null}
+						</figcaption>
+					</figure>
+				))}
+			</div>
+			<h4>Phosphor components</h4>
+			<div className="design-audit-icon-grid">
+				{PHOSPHOR_ICONS.map(({ icon: Glyph, name }) => (
+					<figure key={name}>
+						<span className="design-audit-icon-frame">
+							<Glyph aria-hidden="true" size={16} />
+						</span>
+						<figcaption>
+							<strong>{name}</strong>
+						</figcaption>
+					</figure>
+				))}
+			</div>
+			<div className="design-audit-icon-sizes" aria-label="Icon size roles">
+				{([14, 16, 20] as const).map(size => (
+					<div key={size}>
+						<ChatCircleIcon aria-hidden="true" size={size} />
+						<span>{size}px</span>
+					</div>
+				))}
+			</div>
+		</div>
+	);
+}
diff --git a/apps/web/src/design-audit/page.tsx b/apps/web/src/design-audit/page.tsx
index 80918ee1..e434f65a 100644
--- a/apps/web/src/design-audit/page.tsx
+++ b/apps/web/src/design-audit/page.tsx
@@ -1,16 +1,24 @@
 import { AuditFrame, AuditSection } from "./frame";
+import { Controls } from "./controls";
+import { Foundations } from "./foundations";
 import { AUDIT_INVENTORY } from "./inventory";
 
+import "./controls.css";
+import "./foundations.css";
 import "./styles.css";
 
 export function DesignAuditPage() {
 	return (
 		<AuditFrame groups={AUDIT_INVENTORY}>
-			{AUDIT_INVENTORY.map(group => (
+			<AuditSection id="foundations" title="Foundations">
+				<Foundations />
+			</AuditSection>
+			<AuditSection id="controls" title="Controls">
+				<Controls />
+			</AuditSection>
+			{AUDIT_INVENTORY.slice(2).map(group => (
 				<AuditSection id={group.id} key={group.id} title={group.label}>
-					<p className="design-audit-section-summary">
-						{group.items.length} component {group.items.length === 1 ? "family" : "families"}
-					</p>
+					<p className="design-audit-section-summary">{group.items.length} component families</p>
 				</AuditSection>
 			))}
 		</AuditFrame>
diff --git a/apps/web/src/design-audit/specimens.test.tsx b/apps/web/src/design-audit/specimens.test.tsx
new file mode 100644
index 00000000..9542d24b
--- /dev/null
+++ b/apps/web/src/design-audit/specimens.test.tsx
@@ -0,0 +1,40 @@
+import { describe, expect, it } from "bun:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+
+import { Controls } from "./controls";
+import { Foundations } from "./foundations";
+
+describe("design audit specimens", () => {
+	it("renders every foundation family with a visible label", () => {
+		let markup = renderToStaticMarkup(createElement(Foundations));
+
+		for (let id of ["colours", "typography", "spacing", "radii", "shadows", "icons"]) {
+			expect(markup).toContain(`data-audit-item="${id}"`);
+		}
+		expect(markup).toContain("Exact duplicate");
+	});
+
+	it("renders controls with their native accessibility states", () => {
+		let markup = renderToStaticMarkup(createElement(Controls));
+
+		for (
+			let id of [
+				"buttons",
+				"icon-buttons",
+				"links",
+				"fields",
+				"selections",
+				"tabs",
+				"menus",
+				"dropdowns",
+			]
+		) {
+			expect(markup).toContain(`data-audit-item="${id}"`);
+		}
+		expect(markup).toContain('aria-label="Add document"');
+		expect(markup).toContain("disabled");
+		expect(markup).toContain('aria-selected="true"');
+		expect(markup).toContain('role="menu"');
+	});
+});
diff --git a/apps/web/src/design-audit/styles.css b/apps/web/src/design-audit/styles.css
index 7550c40f..77150c76 100644
--- a/apps/web/src/design-audit/styles.css
+++ b/apps/web/src/design-audit/styles.css
@@ -1,5 +1,8 @@
 .design-audit {
+	height: 100%;
 	min-height: 100dvh;
+	overflow: auto;
+	scroll-padding-top: 1.5rem;
 	padding: max(1.5rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-right))
 		max(2.5rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left));
 	background: var(--color-ground);

From b80fec6a4338b0420d82e9e9e066545dfd2cc2e1 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Fri, 28 Aug 2026 10:19:58 +0100
Subject: [PATCH 06/35] Catalogue application surfaces

---
 apps/web/src/design-audit/page.tsx           |   7 +-
 apps/web/src/design-audit/specimens.test.tsx |  14 +
 apps/web/src/design-audit/surfaces.css       | 275 +++++++++++++++
 apps/web/src/design-audit/surfaces.tsx       | 335 +++++++++++++++++++
 4 files changed, 630 insertions(+), 1 deletion(-)
 create mode 100644 apps/web/src/design-audit/surfaces.css
 create mode 100644 apps/web/src/design-audit/surfaces.tsx

diff --git a/apps/web/src/design-audit/page.tsx b/apps/web/src/design-audit/page.tsx
index e434f65a..68a99573 100644
--- a/apps/web/src/design-audit/page.tsx
+++ b/apps/web/src/design-audit/page.tsx
@@ -2,9 +2,11 @@ import { AuditFrame, AuditSection } from "./frame";
 import { Controls } from "./controls";
 import { Foundations } from "./foundations";
 import { AUDIT_INVENTORY } from "./inventory";
+import { Surfaces } from "./surfaces";
 
 import "./controls.css";
 import "./foundations.css";
+import "./surfaces.css";
 import "./styles.css";
 
 export function DesignAuditPage() {
@@ -16,7 +18,10 @@ export function DesignAuditPage() {
 			<AuditSection id="controls" title="Controls">
 				<Controls />
 			</AuditSection>
-			{AUDIT_INVENTORY.slice(2).map(group => (
+			<AuditSection id="surfaces" title="Application surfaces">
+				<Surfaces />
+			</AuditSection>
+			{AUDIT_INVENTORY.slice(3).map(group => (
 				<AuditSection id={group.id} key={group.id} title={group.label}>
 					<p className="design-audit-section-summary">{group.items.length} component families</p>
 				</AuditSection>
diff --git a/apps/web/src/design-audit/specimens.test.tsx b/apps/web/src/design-audit/specimens.test.tsx
index 9542d24b..6807e3d9 100644
--- a/apps/web/src/design-audit/specimens.test.tsx
+++ b/apps/web/src/design-audit/specimens.test.tsx
@@ -4,6 +4,8 @@ import { renderToStaticMarkup } from "react-dom/server";
 
 import { Controls } from "./controls";
 import { Foundations } from "./foundations";
+import { AUDIT_INVENTORY } from "./inventory";
+import { Surfaces } from "./surfaces";
 
 describe("design audit specimens", () => {
 	it("renders every foundation family with a visible label", () => {
@@ -37,4 +39,16 @@ describe("design audit specimens", () => {
 		expect(markup).toContain('aria-selected="true"');
 		expect(markup).toContain('role="menu"');
 	});
+
+	it("renders every application surface and its meaningful states", () => {
+		let markup = renderToStaticMarkup(createElement(Surfaces));
+
+		for (let item of AUDIT_INVENTORY.find(group => group.id === "surfaces")!.items) {
+			expect(markup).toContain(`data-audit-item="${item.id}"`);
+		}
+		expect(markup).toContain('role="dialog"');
+		expect(markup).toContain('aria-current="page"');
+		expect(markup).toContain('data-chat-entry="true"');
+		expect(markup).toContain('role="alert"');
+	});
 });
diff --git a/apps/web/src/design-audit/surfaces.css b/apps/web/src/design-audit/surfaces.css
new file mode 100644
index 00000000..0d2a5826
--- /dev/null
+++ b/apps/web/src/design-audit/surfaces.css
@@ -0,0 +1,275 @@
+.design-audit-dialog-grid,
+.design-audit-card-grid,
+.design-audit-empty-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
+	gap: 1rem;
+}
+
+.design-audit-dialog-grid > div {
+	display: grid;
+	align-content: start;
+	gap: 0.5rem;
+}
+
+.design-audit-dialog {
+	padding: 1rem;
+	border-radius: var(--radius-xl);
+	background: var(--color-page);
+	box-shadow: var(--shadow-overlay);
+}
+
+.design-audit-dialog h4,
+.design-audit-dialog p {
+	margin: 0;
+}
+
+.design-audit-dialog h4 {
+	font-size: var(--text-lg);
+	font-weight: 600;
+}
+
+.design-audit-dialog p,
+.design-audit-dialog label,
+.design-audit-dialog [role="alert"] {
+	font-size: var(--text-sm);
+	line-height: var(--text-sm--line-height);
+}
+
+.design-audit-dialog label {
+	display: grid;
+	gap: 0.375rem;
+	margin-block-start: 0.75rem;
+	font-weight: 500;
+	color: var(--color-text-secondary);
+}
+
+.design-audit-dialog [role="alert"] {
+	margin-block-start: 0.75rem;
+	color: var(--color-destructive-ink);
+}
+
+.design-audit-dialog-actions {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: flex-end;
+	gap: 0.5rem;
+	margin-block-start: 1.25rem;
+}
+
+.design-audit-surface-list,
+.design-audit-sidebar {
+	width: min(100%, 21rem);
+	padding: 0.375rem;
+	border-radius: var(--radius-lg);
+	background: var(--color-page);
+	box-shadow: var(--shadow-resting);
+}
+
+.design-audit-surface-list [role="option"],
+.design-audit-sidebar a,
+.design-audit-navigation-loading {
+	display: flex;
+	min-height: 2rem;
+	align-items: center;
+	justify-content: flex-start;
+	gap: 0.5rem;
+	padding-inline: 0.625rem;
+	border-radius: var(--radius-md);
+	font-size: var(--text-sm);
+	color: var(--color-text-secondary);
+	text-align: left;
+}
+
+.design-audit-surface-list [role="option"] svg:last-child:not(:first-child) {
+	margin-inline-start: auto;
+}
+
+.design-audit-surface-list [aria-selected="true"],
+.design-audit-sidebar a[aria-current="page"] {
+	background: var(--color-selected);
+	color: var(--color-text-primary);
+}
+
+.design-audit-surface-list [data-audit-state="hover"] {
+	background: var(--color-hover);
+}
+
+.design-audit-empty-row {
+	display: flex;
+	min-height: 5rem;
+	width: min(100%, 21rem);
+	align-items: center;
+	justify-content: center;
+	gap: 0.5rem;
+	margin-block-start: 0.75rem;
+	border: var(--edge-width) dashed var(--color-edge-strong);
+	border-radius: var(--radius-lg);
+	font-size: var(--text-sm);
+	color: var(--color-text-tertiary);
+}
+
+.design-audit-sidebar-heading {
+	display: flex;
+	min-height: 2.25rem;
+	align-items: center;
+	justify-content: space-between;
+	padding-inline-start: 0.625rem;
+	font-size: var(--text-sm);
+	font-weight: 600;
+}
+
+.design-audit-sidebar a[data-navigation-state="ancestor"] {
+	font-weight: 500;
+}
+
+.design-audit-sidebar a[data-navigation-state="archived"] {
+	color: var(--color-text-quaternary);
+}
+
+.design-audit-navigation-loading svg {
+	animation: design-audit-spin 900ms linear infinite;
+}
+
+@keyframes design-audit-spin {
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+.design-audit-conversation {
+	display: flex;
+	height: 33rem;
+	max-height: 70dvh;
+	flex-direction: column;
+	overflow: hidden;
+	border: var(--edge-width) solid var(--color-edge-strong);
+	border-radius: var(--radius-xl);
+	background: var(--color-conversation);
+}
+
+.design-audit-conversation .conversation-composer textarea {
+	width: 100%;
+	min-height: 4.5rem;
+	resize: none;
+	border: 0;
+	background: transparent;
+}
+
+.design-audit-composer-actions {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 0.75rem;
+	padding: 0 0.5rem 0.5rem 0.75rem;
+}
+
+.design-audit-composer-actions span {
+	font-size: var(--text-sm);
+	color: var(--color-text-quaternary);
+}
+
+.design-audit-chat-error {
+	margin-block-start: 0.5rem;
+	font-size: var(--text-sm);
+	color: var(--color-destructive-ink);
+}
+
+.design-audit-card-grid > article {
+	height: fit-content;
+}
+
+.design-audit-choice-stack {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.5rem;
+}
+
+.design-audit-resolved-toggle {
+	margin-block-start: 0.75rem;
+}
+
+.design-audit-muted,
+.design-audit-card-grid blockquote,
+.design-audit-card-grid p {
+	margin: 0;
+	font-size: var(--text-sm);
+	color: var(--color-text-secondary);
+}
+
+.design-audit-card-grid article > div:first-child span {
+	font-size: var(--text-sm);
+	color: var(--color-text-tertiary);
+}
+
+.design-audit-status-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
+	gap: 0.75rem;
+}
+
+.design-audit-status-grid > div {
+	display: grid;
+	min-width: 0;
+	align-content: start;
+	gap: 0.5rem;
+	min-height: 4rem;
+	padding: 0.75rem;
+	border-radius: var(--radius-lg);
+	background: var(--color-page);
+}
+
+.design-audit-status-grid .plan-status {
+	position: static;
+	inset: auto;
+	max-width: 100%;
+}
+
+.design-audit-empty-grid > div {
+	display: flex;
+	min-height: 13rem;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	gap: 0.5rem;
+	padding: 1.25rem;
+	border: var(--edge-width) solid var(--color-edge);
+	border-radius: var(--radius-lg);
+	text-align: center;
+}
+
+.design-audit-empty-grid strong {
+	font-size: var(--text-md);
+}
+
+.design-audit-empty-grid span {
+	max-width: 18rem;
+	font-size: var(--text-sm);
+	color: var(--color-text-secondary);
+}
+
+.design-audit-error-stack {
+	display: grid;
+	gap: 0.75rem;
+	font-size: var(--text-sm);
+}
+
+.design-audit-error-stack [role="alert"] {
+	color: var(--color-destructive-ink);
+}
+
+.design-audit-recoverable-error {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 1rem;
+	padding: 0.75rem;
+	border-radius: var(--radius-lg);
+	background: var(--color-destructive-soft);
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.design-audit-navigation-loading svg {
+		animation: none;
+	}
+}
diff --git a/apps/web/src/design-audit/surfaces.tsx b/apps/web/src/design-audit/surfaces.tsx
new file mode 100644
index 00000000..e1edc3b7
--- /dev/null
+++ b/apps/web/src/design-audit/surfaces.tsx
@@ -0,0 +1,335 @@
+import {
+	ArchiveIcon,
+	CaretDownIcon,
+	CaretRightIcon,
+	ChatCircleIcon,
+	CheckCircleIcon,
+	CircleNotchIcon,
+	FileTextIcon,
+	MagnifyingGlassIcon,
+	PlusIcon,
+} from "@phosphor-icons/react";
+
+import { PlanStatus, SendAction } from "@chopin/editor";
+import { SidecarCard } from "../../../../packages/editor/src/card";
+import { DecisionCard } from "../../../../packages/editor/src/widgets/decision";
+import { Transcript } from "../chat/transcript";
+import { TerminalAlert } from "../terminal-alert";
+import { AuditPlate, StateLabel } from "./frame";
+
+import type { Chat } from "@chopin/protocol";
+
+let CHAT_ENTRIES: Chat.Entry[] = [
+	{
+		author: { kind: "member", handle: "maggieappleton" },
+		id: "audit-member",
+		text: "Can you make the empty state clearer?",
+		ts: 1_787_913_600,
+	},
+	{
+		author: { kind: "agent" },
+		id: "audit-planner",
+		text: "I’ll compare the existing states and propose a smaller, consistent pattern.",
+		tools: [
+			{ id: "audit-tool-1", name: "read_plan", status: "done", took: 420 },
+			{ id: "audit-tool-2", name: "update_plan", status: "done", took: 180 },
+		],
+		ts: 1_787_913_660,
+	},
+];
+
+function DialogSpecimens() {
+	return (
+		<AuditPlate
+			description="The shared shell shown with ordinary, destructive, busy, and error content."
+			item="dialogs"
+			title="Dialogs"
+		>
+			<div className="design-audit-dialog-grid">
+				<div>
+					<StateLabel>Open</StateLabel>
+					<div
+						aria-labelledby="audit-rename-title"
+						aria-modal="true"
+						className="design-audit-dialog"
+						role="dialog"
+					>
+						<h4 id="audit-rename-title">Rename document</h4>
+						<label>
+							Document name<input defaultValue="Design system audit" />
+						</label>
+						<div className="design-audit-dialog-actions">
+							<button className="btn btn-md btn-secondary" type="button">Cancel</button>
+							<button className="btn btn-md btn-primary" type="button">Save</button>
+						</div>
+					</div>
+				</div>
+				<div>
+					<StateLabel>Destructive + error</StateLabel>
+					<div
+						aria-labelledby="audit-delete-title"
+						aria-modal="true"
+						className="design-audit-dialog"
+						role="dialog"
+					>
+						<h4 id="audit-delete-title">Delete document permanently?</h4>
+						<p>
+							<strong>Design system audit</strong>{" "}
+							will be permanently deleted. This cannot be undone.
+						</p>
+						<TerminalAlert>Could not delete the document.</TerminalAlert>
+						<div className="design-audit-dialog-actions">
+							<button className="btn btn-md btn-secondary" type="button">Cancel</button>
+							<button className="btn btn-md btn-destructive" type="button">
+								Delete permanently
+							</button>
+						</div>
+					</div>
+				</div>
+			</div>
+		</AuditPlate>
+	);
+}
+
+function Lists() {
+	return (
+		<AuditPlate
+			description="Rows share one inset, target height, and selected treatment."
+			item="lists"
+			title="Lists"
+		>
+			<div className="design-audit-surface-list" role="listbox" aria-label="Documents">
+				<div role="option" aria-selected="false">
+					<FileTextIcon size={16} />Design notes
+				</div>
+				<div role="option" aria-selected="true">
+					<FileTextIcon size={16} />Design system audit<CheckCircleIcon size={16} />
+				</div>
+				<div role="option" aria-selected="false" data-audit-state="hover">
+					<FileTextIcon size={16} />Editor architecture
+				</div>
+			</div>
+			<div className="design-audit-empty-row">
+				<MagnifyingGlassIcon size={20} />
+				<span>No matching documents</span>
+			</div>
+		</AuditPlate>
+	);
+}
+
+function Navigation() {
+	return (
+		<AuditPlate
+			description="Current, ancestor, archived, and loading rows in one compact rail."
+			item="navigation"
+			title="Navigation"
+		>
+			<nav aria-label="Audit navigation" className="design-audit-sidebar">
+				<div className="design-audit-sidebar-heading">
+					<span>Chopin</span>
+					<button aria-label="Add document" className="btn btn-icon btn-ghost" type="button">
+						<PlusIcon size={16} />
+					</button>
+				</div>
+				<a href="#surfaces">
+					<FileTextIcon size={16} />Product direction
+				</a>
+				<a aria-current="page" href="#surfaces">
+					<FileTextIcon size={16} />Design system audit
+				</a>
+				<a data-navigation-state="ancestor" href="#surfaces">
+					<CaretRightIcon size={14} />Research notes
+				</a>
+				<a data-navigation-state="archived" href="#surfaces">
+					<ArchiveIcon size={16} />Archived draft
+				</a>
+				<div className="design-audit-navigation-loading">
+					<CircleNotchIcon size={16} />Loading more…
+				</div>
+			</nav>
+		</AuditPlate>
+	);
+}
+
+function Conversation() {
+	return (
+		<AuditPlate
+			description="Member, Planner, tool activity, queued work, composer, and error states."
+			item="chat"
+			title="Conversation"
+		>
+			<div className="design-audit-conversation">
+				<Transcript
+					active
+					entries={CHAT_ENTRIES}
+					handle="maggieappleton"
+					onWithdraw={() => {}}
+					queued={[{
+						id: "audit-queued",
+						handle: "maggieappleton",
+						text: "Also check the compact layout.",
+					}]}
+				/>
+				<div className="conversation-composer px-2.5 pb-2.5">
+					<div className="field flex flex-col">
+						<textarea aria-label="Message" defaultValue="@chopin Review the spacing" rows={2} />
+						<div className="design-audit-composer-actions">
+							<span>Use # to reference a document</span>
+							<SendAction label="Send message" onClick={() => {}} />
+						</div>
+					</div>
+					<TerminalAlert className="design-audit-chat-error">
+						Message could not be sent. Try again.
+					</TerminalAlert>
+				</div>
+			</div>
+		</AuditPlate>
+	);
+}
+
+function Decisions() {
+	return (
+		<>
+			<AuditPlate
+				description="Outstanding, answered, resolved, orphaned, and deliberately empty records."
+				item="decisions"
+				title="Decisions"
+			>
+				<div className="design-audit-card-grid">
+					<SidecarCard label="Decision">
+						<strong>Which density should the navigation use?</strong>
+						<div className="design-audit-choice-stack">
+							<button className="btn btn-md btn-secondary" type="button">Compact</button>
+							<button className="btn btn-md btn-secondary" type="button">Comfortable</button>
+						</div>
+					</SidecarCard>
+					<DecisionCard
+						value={{
+							at: "2026-08-28T10:00:00.000Z",
+							by: "maggieappleton",
+							id: "audit-decision",
+							notes: [{
+								by: "maggieappleton",
+								text: "Use compact rows, with comfortable section spacing.",
+							}],
+							quote: "Navigation density",
+						}}
+					/>
+				</div>
+				<button
+					aria-expanded="true"
+					className="btn btn-sm btn-ghost design-audit-resolved-toggle"
+					type="button"
+				>
+					<CaretDownIcon size={16} weight="bold" />
+					<span>3</span>
+					<span>resolved</span>
+				</button>
+			</AuditPlate>
+			<AuditPlate
+				description="Resolved discussion records retain empty and orphaned relationship states."
+				item="resolved-comments"
+				title="Resolved comments"
+			>
+				<div className="design-audit-card-grid">
+					<SidecarCard label="Comment" settled status={<span>Accepted by @maggieappleton</span>}>
+						<blockquote>Give controls a little more room.</blockquote>
+						<p>Raised the shared horizontal inset.</p>
+					</SidecarCard>
+					<SidecarCard label="Comment" settled status={<span>Resolved</span>}>
+						<p className="design-audit-muted">No prose was linked intentionally.</p>
+					</SidecarCard>
+					<SidecarCard label="Comment" settled status={<span>Orphaned</span>}>
+						<p className="design-audit-muted">
+							The original passage can no longer be located safely.
+						</p>
+					</SidecarCard>
+				</div>
+			</AuditPlate>
+		</>
+	);
+}
+
+function Feedback() {
+	return (
+		<>
+			<AuditPlate
+				description="Document-level asynchronous status from quiet through terminal."
+				item="loading"
+				title="Loading and status"
+			>
+				<div className="design-audit-status-grid">
+					<div>
+						<StateLabel>Loading</StateLabel>
+						<PlanStatus synced={false} />
+					</div>
+					<div>
+						<StateLabel>Busy</StateLabel>
+						<PlanStatus busy synced />
+					</div>
+					<div>
+						<StateLabel>Reconnect</StateLabel>
+						<PlanStatus connection="reconnecting" synced />
+					</div>
+					<div>
+						<StateLabel>Error</StateLabel>
+						<PlanStatus failed="Permission denied" synced={false} />
+					</div>
+				</div>
+			</AuditPlate>
+			<AuditPlate
+				description="First-use, no-results, and unavailable states provide a next step."
+				item="empty"
+				title="Empty states"
+			>
+				<div className="design-audit-empty-grid">
+					<div>
+						<FileTextIcon size={24} />
+						<strong>No documents yet</strong>
+						<span>Create the first shared document for this project.</span>
+						<button className="btn btn-md btn-primary" type="button">Create document</button>
+					</div>
+					<div>
+						<MagnifyingGlassIcon size={24} />
+						<strong>No results</strong>
+						<span>Try a shorter search or clear the filters.</span>
+						<button className="btn btn-md btn-secondary" type="button">Clear search</button>
+					</div>
+					<div>
+						<ChatCircleIcon size={24} />
+						<strong>Conversation unavailable</strong>
+						<span>Reconnect to keep collaborating.</span>
+						<button className="btn btn-md btn-secondary" type="button">Try again</button>
+					</div>
+				</div>
+			</AuditPlate>
+			<AuditPlate
+				description="Inline, terminal, and recoverable failures use one destructive ink role."
+				item="errors"
+				title="Errors"
+			>
+				<div className="design-audit-error-stack">
+					<TerminalAlert>Enter a document name.</TerminalAlert>
+					<TerminalAlert>Could not open this document. Reloading may help.</TerminalAlert>
+					<div className="design-audit-recoverable-error">
+						<TerminalAlert>Research stopped before it finished.</TerminalAlert>
+						<button className="btn btn-sm btn-secondary" type="button">Retry</button>
+					</div>
+				</div>
+			</AuditPlate>
+		</>
+	);
+}
+
+export function Surfaces() {
+	return (
+		<>
+			<DialogSpecimens />
+			<Lists />
+			<Navigation />
+			<Conversation />
+			<Decisions />
+			<Feedback />
+		</>
+	);
+}

From 11f26ce4f0b8b3f07b9a9fcf6a9acc4974d3ee96 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Fri, 28 Aug 2026 10:24:54 +0100
Subject: [PATCH 07/35] Catalogue authored document components

---
 .../web/src/design-audit/authored-content.css |  56 +++++
 .../web/src/design-audit/authored-content.tsx | 238 ++++++++++++++++++
 apps/web/src/design-audit/page.tsx            |  10 +-
 apps/web/src/design-audit/specimens.test.tsx  |  12 +
 packages/editor/package.json                  |   4 +
 packages/editor/src/plan-editor.tsx           |  17 +-
 packages/editor/src/plan-theme.ts             |  13 +
 .../editor/src/static-plan-editor.test.tsx    |  19 ++
 packages/editor/src/static-plan-editor.tsx    |  83 ++++++
 9 files changed, 433 insertions(+), 19 deletions(-)
 create mode 100644 apps/web/src/design-audit/authored-content.css
 create mode 100644 apps/web/src/design-audit/authored-content.tsx
 create mode 100644 packages/editor/src/plan-theme.ts
 create mode 100644 packages/editor/src/static-plan-editor.test.tsx
 create mode 100644 packages/editor/src/static-plan-editor.tsx

diff --git a/apps/web/src/design-audit/authored-content.css b/apps/web/src/design-audit/authored-content.css
new file mode 100644
index 00000000..954091a1
--- /dev/null
+++ b/apps/web/src/design-audit/authored-content.css
@@ -0,0 +1,56 @@
+.design-audit-static-plan {
+	width: 100%;
+	min-width: 0;
+	border: var(--edge-width) solid var(--color-edge);
+	border-radius: var(--radius-lg);
+	background: var(--color-page);
+}
+
+.design-audit-static-plan .plan-workspace,
+.design-audit-static-plan .plan-document {
+	height: auto;
+	min-height: 0;
+}
+
+.design-audit-static-plan .plan-content {
+	min-height: 0;
+	padding: 1rem;
+}
+
+.design-audit-static-plan .mdxeditor {
+	min-height: 0;
+}
+
+.design-audit-research-composer {
+	display: grid;
+	gap: 0.5rem;
+	margin-block-end: 1rem;
+}
+
+.design-audit-research-composer .plan-research-composer {
+	width: min(100%, 32rem);
+}
+
+.design-audit-research-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
+	gap: 1rem;
+}
+
+.design-audit-research-grid > div {
+	display: grid;
+	align-content: start;
+	gap: 0.5rem;
+}
+
+.design-audit-research-grid article {
+	height: 100%;
+}
+
+.design-audit-static-plan .plan-image {
+	max-height: 10rem;
+}
+
+.design-audit-static-plan .plan-diagram {
+	max-height: 18rem;
+}
diff --git a/apps/web/src/design-audit/authored-content.tsx b/apps/web/src/design-audit/authored-content.tsx
new file mode 100644
index 00000000..463acd7d
--- /dev/null
+++ b/apps/web/src/design-audit/authored-content.tsx
@@ -0,0 +1,238 @@
+import { ResearchCard, ResearchComposer } from "@chopin/editor";
+import { StaticPlanEditor } from "@chopin/editor/static";
+
+import { AuditPlate, StateLabel } from "./frame";
+
+import type { Research } from "@chopin/protocol";
+
+let callouts = [
+	'<Callout id="01K0N4W3B7P27CBAEC7A8C8WEA" type="note" title="Note">',
+	"",
+	"A neutral detail that supports the surrounding prose.",
+	"",
+	"</Callout>",
+	"",
+	'<Callout id="01K0N4W3B7P27CBAEC7A8C8WEB" type="tip" title="Tip">',
+	"",
+	"A useful shortcut or recommended next step.",
+	"",
+	"</Callout>",
+	"",
+	'<Callout id="01K0N4W3B7P27CBAEC7A8C8WEC" type="warning" title="Warning">',
+	"",
+	"A condition that needs attention before continuing.",
+	"",
+	"</Callout>",
+	"",
+	'<Callout id="01K0N4W3B7P27CBAEC7A8C8WED" type="danger" title="Danger">',
+	"",
+	"An action with serious or irreversible consequences.",
+	"",
+	"</Callout>",
+].join("\n") + "\n";
+
+let code = [
+	"```",
+	"Plain text keeps its authored appearance.",
+	"```",
+	"",
+	'```typescript title="tokens.ts"',
+	"export const spacing = { compact: 8, comfortable: 12 };",
+	"```",
+	"",
+	"```css collapsed",
+	".button { padding-inline: var(--space-3); }",
+	"```",
+].join("\n") + "\n";
+
+let diff = [
+	"```diff",
+	"--- a/button.css",
+	"+++ b/button.css",
+	"@@ -1 +1 @@",
+	"-padding-inline: 8px;",
+	"+padding-inline: 12px;",
+	"```",
+	"",
+	"```diff",
+	"This is temporarily invalid patch content.",
+	"```",
+].join("\n") + "\n";
+
+let diagram = [
+	"```mermaid",
+	"flowchart LR",
+	"  Tokens --> Controls",
+	"  Controls --> Surfaces",
+	"  Surfaces --> Documents",
+	"```",
+	"",
+	"```mermaid",
+	"this is not a valid diagram",
+	"```",
+].join("\n") + "\n";
+
+let formula = [
+	"Inline spacing can be described as $s_n = 4n$ pixels.",
+	"",
+	"$$",
+	"c = \\sqrt{a^2 + b^2}",
+	"$$",
+].join("\n") + "\n";
+
+let images = [
+	"![Loaded image](https://avatars.githubusercontent.com/u/9919?s=160&v=4)",
+	"",
+	"![Unavailable image](https://invalid.example.invalid/design-audit.png)",
+	"",
+	"![](https://avatars.githubusercontent.com/u/9919?s=80&v=4)",
+].join("\n") + "\n";
+
+let table = [
+	"| Component | Default | Active |",
+	"| :-- | :-- | :-- |",
+	"| Button | Secondary | Brand |",
+	"| Icon | 16px tertiary | 16px brand |",
+	"| Row | Page | Selected wash |",
+].join("\n") + "\n";
+
+let timestamp = "2026-08-28T10:00:00.000Z";
+
+function request(
+	stage: Research.RequestStage,
+): Research.RequestView {
+	let base: Research.RequestViewBase = {
+		channelId: "audit-channel",
+		createdAt: timestamp,
+		id: `audit-research-${stage}`,
+		question: "Which interaction patterns should the design system standardize?",
+		sources: [],
+		updatedAt: timestamp,
+	};
+	if (stage === "failed") {
+		return { ...base, error: "The source search timed out.", stage, state: "failed" };
+	}
+	if (stage === "cancelled") return { ...base, stage, state: "cancelled" };
+	if (stage === "ready") {
+		return {
+			...base,
+			child: {
+				id: "audit-research-child",
+				slug: "design-system-patterns",
+				sourceCount: 8,
+				summary: "A comparison of durable interaction patterns.",
+				title: "Design system interaction patterns",
+			},
+			stage,
+			state: "completed",
+		};
+	}
+	return { ...base, stage, state: stage === "queued" ? "pending" : "running" };
+}
+
+function EditorPlate(
+	{ description, item, source, title }: {
+		description: string;
+		item: string;
+		source: string;
+		title: string;
+	},
+) {
+	return (
+		<AuditPlate description={description} item={item} title={title}>
+			<StaticPlanEditor source={source} />
+		</AuditPlate>
+	);
+}
+
+function ResearchSpecimens() {
+	let stages: Research.RequestStage[] = [
+		"queued",
+		"searching",
+		"writing",
+		"failed",
+		"cancelled",
+		"ready",
+	];
+	return (
+		<AuditPlate
+			description="Question entry and every durable request lifecycle state."
+			item="research"
+			title="Research"
+		>
+			<div className="design-audit-research-composer">
+				<StateLabel>Question</StateLabel>
+				<ResearchComposer
+					onCancel={() => {}}
+					onChange={() => {}}
+					onSubmit={() => {}}
+					question="Where does the current interface drift from its shared tokens?"
+				/>
+			</div>
+			<div className="design-audit-research-grid">
+				{stages.map(stage => (
+					<div key={stage}>
+						<StateLabel>{stage}</StateLabel>
+						<ResearchCard
+							onCancel={() => {}}
+							onOpen={() => {}}
+							onRemove={() => {}}
+							onRetry={() => {}}
+							request={request(stage)}
+						/>
+					</div>
+				))}
+			</div>
+		</AuditPlate>
+	);
+}
+
+export function AuthoredContent() {
+	return (
+		<>
+			<EditorPlate
+				description="Note, tip, warning, and danger treatments from the real callout renderer."
+				item="callouts"
+				source={callouts}
+				title="Callouts"
+			/>
+			<ResearchSpecimens />
+			<EditorPlate
+				description="Plain, named, and collapsed fences with derived syntax previews."
+				item="code"
+				source={code}
+				title="Code blocks"
+			/>
+			<EditorPlate
+				description="Valid patch rendering and the invalid-source fallback."
+				item="diff"
+				source={diff}
+				title="Diff blocks"
+			/>
+			<EditorPlate
+				description="Rendered Mermaid output beside a deliberately invalid source."
+				item="diagram"
+				source={diagram}
+				title="Diagrams"
+			/>
+			<EditorPlate
+				description="Inline and block formulae rendered through KaTeX."
+				item="formula"
+				source={formula}
+				title="Formulae"
+			/>
+			<EditorPlate
+				description="Loaded, unavailable, and deliberately empty-alt image states."
+				item="image"
+				source={images}
+				title="Images"
+			/>
+			<EditorPlate
+				description="The editor table, with alignment and overflow behavior visible."
+				item="table"
+				source={table}
+				title="Tables"
+			/>
+		</>
+	);
+}
diff --git a/apps/web/src/design-audit/page.tsx b/apps/web/src/design-audit/page.tsx
index 68a99573..cf0fc70e 100644
--- a/apps/web/src/design-audit/page.tsx
+++ b/apps/web/src/design-audit/page.tsx
@@ -1,10 +1,12 @@
 import { AuditFrame, AuditSection } from "./frame";
+import { AuthoredContent } from "./authored-content";
 import { Controls } from "./controls";
 import { Foundations } from "./foundations";
 import { AUDIT_INVENTORY } from "./inventory";
 import { Surfaces } from "./surfaces";
 
 import "./controls.css";
+import "./authored-content.css";
 import "./foundations.css";
 import "./surfaces.css";
 import "./styles.css";
@@ -21,11 +23,9 @@ export function DesignAuditPage() {
 			<AuditSection id="surfaces" title="Application surfaces">
 				<Surfaces />
 			</AuditSection>
-			{AUDIT_INVENTORY.slice(3).map(group => (
-				<AuditSection id={group.id} key={group.id} title={group.label}>
-					<p className="design-audit-section-summary">{group.items.length} component families</p>
-				</AuditSection>
-			))}
+			<AuditSection id="authored-content" title="Authored content">
+				<AuthoredContent />
+			</AuditSection>
 		</AuditFrame>
 	);
 }
diff --git a/apps/web/src/design-audit/specimens.test.tsx b/apps/web/src/design-audit/specimens.test.tsx
index 6807e3d9..803b71d6 100644
--- a/apps/web/src/design-audit/specimens.test.tsx
+++ b/apps/web/src/design-audit/specimens.test.tsx
@@ -3,6 +3,7 @@ import { createElement } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
 
 import { Controls } from "./controls";
+import { AuthoredContent } from "./authored-content";
 import { Foundations } from "./foundations";
 import { AUDIT_INVENTORY } from "./inventory";
 import { Surfaces } from "./surfaces";
@@ -51,4 +52,15 @@ describe("design audit specimens", () => {
 		expect(markup).toContain('data-chat-entry="true"');
 		expect(markup).toContain('role="alert"');
 	});
+
+	it("renders every authored-content family through the static editor or record card", () => {
+		let markup = renderToStaticMarkup(createElement(AuthoredContent));
+
+		for (let item of AUDIT_INVENTORY.find(group => group.id === "authored-content")!.items) {
+			expect(markup).toContain(`data-audit-item="${item.id}"`);
+		}
+		expect(markup).toContain('role="document"');
+		expect(markup).toContain("Research question");
+		expect(markup).toContain("Research ready");
+	});
 });
diff --git a/packages/editor/package.json b/packages/editor/package.json
index cca8eece..88f97a8b 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -19,6 +19,10 @@
 			"types": "./src/pointer.ts",
 			"default": "./src/pointer.ts"
 		},
+		"./static": {
+			"types": "./src/static-plan-editor.tsx",
+			"default": "./src/static-plan-editor.tsx"
+		},
 		"./transition-presence": {
 			"types": "./src/transition-presence.ts",
 			"default": "./src/transition-presence.ts"
diff --git a/packages/editor/src/plan-editor.tsx b/packages/editor/src/plan-editor.tsx
index 3f5e0d07..6e3b6b10 100644
--- a/packages/editor/src/plan-editor.tsx
+++ b/packages/editor/src/plan-editor.tsx
@@ -7,7 +7,7 @@
  */
 
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { lexicalTheme, markdownShortcutPlugin, MDXEditor } from "@mdxeditor/editor";
+import { markdownShortcutPlugin, MDXEditor } from "@mdxeditor/editor";
 
 // Structural editor CSS, then our retheme over the top.
 import "@mdxeditor/editor/style.css";
@@ -19,6 +19,7 @@ import { ChangeStore } from "./changes";
 import { PlanChanges } from "./changes-chip";
 import { collaborationPlugin } from "./collaboration";
 import { PlanStatus } from "./status";
+import { PLAN_LEXICAL_THEME } from "./plan-theme";
 import { ResearchDraftStore } from "./research-draft";
 import { register } from "./widgets";
 import { widgetsPlugin } from "./widgets-plugin";
@@ -43,18 +44,6 @@ import type { CommentPresentation, QuestionStepMotion, ResearchStore } from "./w
  * at all — draws a cell selection that is completely invisible. Dragging across
  * cells then appears to do nothing while a `TableSelection` is very much live.
  */
-const THEME = {
-	...lexicalTheme,
-	collaboration: {
-		cursor: "plan-cursor",
-		cursorName: "plan-cursor-name",
-		selection: "plan-cursor-selection",
-		selectionBg: "plan-cursor-selection-bg",
-	},
-	tableCellSelected: "plan-cell-selected",
-	tableSelection: "plan-table-selecting",
-};
-
 // Decorator nodes render through whatever the UI registered, so this has to
 // happen before an editor mounts.
 register();
@@ -338,7 +327,7 @@ export function PlanEditor(
 							suppressSharedHistory
 							readOnly={locked}
 							plugins={plugins}
-							lexicalTheme={THEME}
+							lexicalTheme={PLAN_LEXICAL_THEME}
 							contentEditableClassName="plan-content focus-caret"
 							placeholder="Start writing, or ask Chopin to plan"
 							spellCheck
diff --git a/packages/editor/src/plan-theme.ts b/packages/editor/src/plan-theme.ts
new file mode 100644
index 00000000..25eb0844
--- /dev/null
+++ b/packages/editor/src/plan-theme.ts
@@ -0,0 +1,13 @@
+import { lexicalTheme } from "@mdxeditor/editor";
+
+export const PLAN_LEXICAL_THEME = {
+	...lexicalTheme,
+	collaboration: {
+		cursor: "plan-cursor",
+		cursorName: "plan-cursor-name",
+		selection: "plan-cursor-selection",
+		selectionBg: "plan-cursor-selection-bg",
+	},
+	tableCellSelected: "plan-cell-selected",
+	tableSelection: "plan-table-selecting",
+};
diff --git a/packages/editor/src/static-plan-editor.test.tsx b/packages/editor/src/static-plan-editor.test.tsx
new file mode 100644
index 00000000..d6783e35
--- /dev/null
+++ b/packages/editor/src/static-plan-editor.test.tsx
@@ -0,0 +1,19 @@
+import { describe, expect, it } from "bun:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+
+import { StaticPlanEditor } from "./static-plan-editor";
+
+describe("StaticPlanEditor", () => {
+	it("provides a labelled read-only document without collaboration chrome", () => {
+		let source =
+			'# Audit fixture\n\n<Callout type="note">\n\nInspect this.\n\n</Callout>\n\n```ts\nlet checked = true;\n```\n';
+		let markup = renderToStaticMarkup(createElement(StaticPlanEditor, { source }));
+
+		expect(markup).toContain('aria-label="Authored content specimen"');
+		expect(markup).toContain('data-source-length="');
+		expect(markup).toContain('data-read-only="true"');
+		expect(markup).not.toContain("Not connected");
+		expect(markup).not.toContain("plan-status");
+	});
+});
diff --git a/packages/editor/src/static-plan-editor.tsx b/packages/editor/src/static-plan-editor.tsx
new file mode 100644
index 00000000..35819056
--- /dev/null
+++ b/packages/editor/src/static-plan-editor.tsx
@@ -0,0 +1,83 @@
+import { useLayoutEffect, useMemo, useState } from "react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import {
+	addComposerChild$,
+	markdownShortcutPlugin,
+	MDXEditor,
+	realmPlugin,
+} from "@mdxeditor/editor";
+
+import { importPlan, plugins as dialectPlugins } from "@chopin/dialect";
+
+import { PLAN_LEXICAL_THEME } from "./plan-theme";
+import { register } from "./widgets";
+import { widgetsPlugin } from "./widgets-plugin";
+
+import type { QuestionnaireStore } from "./questionnaires";
+import type { ResearchStore } from "./widget-options";
+
+register();
+
+function StaticSource({ onError, source }: { onError: (error: Error) => void; source: string }) {
+	let [editor] = useLexicalComposerContext();
+	useLayoutEffect(() => {
+		try {
+			importPlan(editor, source);
+		} catch (problem) {
+			onError(problem instanceof Error ? problem : new Error("Could not import the document."));
+		}
+	}, [editor, onError, source]);
+	return null;
+}
+
+let staticSourcePlugin = realmPlugin<{ onError: (error: Error) => void; source: string }>({
+	init(realm, params) {
+		if (!params) return;
+		realm.pub(addComposerChild$, () => <StaticSource {...params} />);
+	},
+});
+
+export function StaticPlanEditor(
+	{ questions, research, source }: {
+		questions?: QuestionnaireStore;
+		research?: ResearchStore;
+		source: string;
+	},
+) {
+	let [error, setError] = useState<string>();
+	let plugins = useMemo(
+		() => [
+			...dialectPlugins({ core: false }),
+			markdownShortcutPlugin(),
+			widgetsPlugin({ canEdit: false, questions, research }),
+			staticSourcePlugin({ onError: problem => setError(problem.message), source }),
+		],
+		[questions, research, source],
+	);
+
+	return (
+		<section
+			aria-label="Authored content specimen"
+			className="plan design-audit-static-plan"
+			data-read-only="true"
+			data-source-length={source.length}
+			role="document"
+		>
+			{error && <p className="text-sm text-destructive-ink" role="alert">{error}</p>}
+			<div className="plan-workspace">
+				<div className="plan-document">
+					<MDXEditor
+						contentEditableClassName="plan-content focus-caret"
+						lexicalTheme={PLAN_LEXICAL_THEME}
+						markdown=""
+						onError={problem => setError(problem.error)}
+						plugins={plugins}
+						readOnly
+						spellCheck
+						suppressHtmlProcessing
+					/>
+				</div>
+			</div>
+		</section>
+	);
+}

From 3bcb3530447c279b62a1cf9d7bfba6e34e2751ca Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Fri, 28 Aug 2026 10:32:48 +0100
Subject: [PATCH 08/35] Normalize design system controls

---
 apps/web/src/assets/icons/chat-close.svg      | 53 -------------------
 .../collapse.svg => icons/panel-close.svg}    |  0
 apps/web/src/chat/chat.tsx                    |  2 +-
 apps/web/src/chat/transcript.test.tsx         | 15 ++++++
 apps/web/src/chat/transcript.tsx              |  4 +-
 apps/web/src/design-audit/icons.tsx           | 12 +++--
 apps/web/src/design-audit/specimens.test.tsx  |  3 +-
 apps/web/src/design-audit/surfaces.css        | 11 ++++
 apps/web/src/design-audit/surfaces.tsx        | 11 ++++
 apps/web/src/hosted.test.ts                   |  2 +-
 apps/web/src/icon-assets.test.ts              | 15 ++++++
 apps/web/src/navigation-chrome.test.ts        | 10 ++++
 apps/web/src/project-sidebar.tsx              |  2 +-
 apps/web/src/theme.css                        |  7 +++
 apps/web/src/tokens.test.ts                   | 10 ++++
 apps/web/src/workspace-feedback.test.ts       |  2 +
 apps/web/src/workspace.tsx                    |  6 +--
 packages/editor/src/send-action.tsx           |  2 +-
 packages/editor/src/styles.css                | 10 ----
 .../src/widgets/research-composer.test.tsx    |  1 +
 20 files changed, 100 insertions(+), 78 deletions(-)
 delete mode 100644 apps/web/src/assets/icons/chat-close.svg
 rename apps/web/src/assets/{figma/navigation/collapse.svg => icons/panel-close.svg} (100%)
 create mode 100644 apps/web/src/icon-assets.test.ts

diff --git a/apps/web/src/assets/icons/chat-close.svg b/apps/web/src/assets/icons/chat-close.svg
deleted file mode 100644
index 998d1511..00000000
--- a/apps/web/src/assets/icons/chat-close.svg
+++ /dev/null
@@ -1,53 +0,0 @@
-<svg
-	preserveAspectRatio="none"
-	overflow="visible"
-	style="display: block"
-	width="16"
-	height="14"
-	viewBox="0 0 16 14"
-	fill="none"
-	xmlns="http://www.w3.org/2000/svg"
->
-	<g id="Group">
-		<path
-			id="Vector"
-			d="M5.25 10.5V13.25"
-			stroke="#212121"
-			stroke-width="1.5"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-		/>
-		<path
-			id="Vector_2"
-			d="M5.25 0.75V3.5"
-			stroke="#212121"
-			stroke-width="1.5"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-		/>
-		<path
-			id="Vector_3"
-			d="M7.75 4.5L5.25 7L7.75 9.5"
-			stroke="#212121"
-			stroke-width="1.5"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-		/>
-		<path
-			id="Vector_4"
-			d="M5.25 7H11.75"
-			stroke="#212121"
-			stroke-width="1.5"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-		/>
-		<path
-			id="Vector_5"
-			d="M2.75 13.25L13.25 13.25C14.3546 13.25 15.25 12.3546 15.25 11.25L15.25 2.75C15.25 1.64543 14.3546 0.75 13.25 0.75L2.75 0.75C1.64543 0.75 0.75 1.64543 0.75 2.75L0.75 11.25C0.75 12.3546 1.64543 13.25 2.75 13.25Z"
-			stroke="#212121"
-			stroke-width="1.5"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-		/>
-	</g>
-</svg>
diff --git a/apps/web/src/assets/figma/navigation/collapse.svg b/apps/web/src/assets/icons/panel-close.svg
similarity index 100%
rename from apps/web/src/assets/figma/navigation/collapse.svg
rename to apps/web/src/assets/icons/panel-close.svg
diff --git a/apps/web/src/chat/chat.tsx b/apps/web/src/chat/chat.tsx
index 1005e696..1be3b47e 100644
--- a/apps/web/src/chat/chat.tsx
+++ b/apps/web/src/chat/chat.tsx
@@ -420,7 +420,7 @@ export function Chat(
 								title="Stop Planner"
 								type="button"
 							>
-								<img alt="" className="size-[18px]" src={plannerStop} />
+								<img alt="" className="size-[16px]" src={plannerStop} />
 							</button>
 						)}
 						<SendAction
diff --git a/apps/web/src/chat/transcript.test.tsx b/apps/web/src/chat/transcript.test.tsx
index 725afdd7..c6bdb80b 100644
--- a/apps/web/src/chat/transcript.test.tsx
+++ b/apps/web/src/chat/transcript.test.tsx
@@ -23,3 +23,18 @@ test("system presence entries stay immediate when they arrive", () => {
 	expect(markup).toContain("Sam joined");
 	expect(markup).not.toContain("data-motion-feedback");
 });
+
+test("queued messages use the standard icon-button glyph", () => {
+	let markup = renderToStaticMarkup(
+		createElement(Transcript, {
+			active: true,
+			entries: [],
+			handle: "ana",
+			onWithdraw: () => {},
+			queued: [{ handle: "ana", id: "queued", text: "One more thought" }],
+		}),
+	);
+
+	expect(markup).toMatch(/aria-label="Withdraw queued message"[^>]*>.*?width="16".*?height="16"/s);
+	expect(markup).not.toContain(">×</button>");
+});
diff --git a/apps/web/src/chat/transcript.tsx b/apps/web/src/chat/transcript.tsx
index d065c5a8..26331fe5 100644
--- a/apps/web/src/chat/transcript.tsx
+++ b/apps/web/src/chat/transcript.tsx
@@ -1,7 +1,7 @@
 /** The shared chat, grouped for reading rather than event delivery. */
 
 import { useEffect, useId, useRef, useState } from "react";
-import { SignInIcon } from "@phosphor-icons/react";
+import { SignInIcon, XIcon } from "@phosphor-icons/react";
 
 import { AgentFace, Face, MotionDisclosure, MotionDisclosureIcon } from "@chopin/editor";
 
@@ -140,7 +140,7 @@ function MessageBody(
 								title="Withdraw"
 								type="button"
 							>
-								×
+								<XIcon aria-hidden="true" size={16} />
 							</button>
 						)}
 				</div>
diff --git a/apps/web/src/design-audit/icons.tsx b/apps/web/src/design-audit/icons.tsx
index 52bb466f..92fbb79f 100644
--- a/apps/web/src/design-audit/icons.tsx
+++ b/apps/web/src/design-audit/icons.tsx
@@ -18,12 +18,11 @@ import addProject from "../assets/figma/navigation/add-project.svg";
 import archive from "../assets/figma/navigation/box-archive.svg";
 import book from "../assets/figma/navigation/book-bookmark.svg";
 import chopin from "../assets/figma/navigation/chopin.svg";
-import collapse from "../assets/figma/navigation/collapse.svg";
 import documentActions from "../assets/figma/navigation/document-actions.svg";
 import newDocument from "../assets/figma/navigation/new-document.svg";
 import search from "../assets/figma/navigation/search.svg";
 import hideSidebar from "../assets/figma/navigation/sidebar-right-3-hide.svg";
-import conversationClose from "../assets/icons/conversation-close.svg";
+import panelClose from "../assets/icons/panel-close.svg";
 import conversation from "../assets/icons/conversation.svg";
 import navigationChevron from "../assets/icons/navigation-chevron-right.svg";
 import navigationXmark from "../assets/icons/navigation-xmark.svg";
@@ -48,12 +47,15 @@ const LOCAL_ICONS: readonly LocalIcon[] = [
 	{ name: "Book bookmark", source: book },
 	{ name: "Archive", source: archive },
 	{ name: "Chopin", source: chopin },
-	{ duplicate: "conversation-close.svg", name: "Collapse", source: collapse },
+	{
+		duplicate: "collapse.svg and conversation-close.svg consolidated",
+		name: "Panel close",
+		source: panelClose,
+	},
 	{ name: "Document actions", source: documentActions },
 	{ name: "New document", source: newDocument },
 	{ name: "Search", source: search },
 	{ name: "Hide sidebar", source: hideSidebar },
-	{ duplicate: "collapse.svg", name: "Conversation close", source: conversationClose },
 	{ name: "Conversation", source: conversation },
 	{ name: "Navigation chevron", source: navigationChevron },
 	{ name: "Navigation close", source: navigationXmark },
@@ -102,7 +104,7 @@ export function IconCatalogue() {
 						</span>
 						<figcaption>
 							<strong>{icon.name}</strong>
-							{icon.duplicate ? <span>Exact duplicate: {icon.duplicate}</span> : null}
+							{icon.duplicate ? <span>Consolidated exact duplicate: {icon.duplicate}</span> : null}
 						</figcaption>
 					</figure>
 				))}
diff --git a/apps/web/src/design-audit/specimens.test.tsx b/apps/web/src/design-audit/specimens.test.tsx
index 803b71d6..e7b0c612 100644
--- a/apps/web/src/design-audit/specimens.test.tsx
+++ b/apps/web/src/design-audit/specimens.test.tsx
@@ -15,7 +15,7 @@ describe("design audit specimens", () => {
 		for (let id of ["colours", "typography", "spacing", "radii", "shadows", "icons"]) {
 			expect(markup).toContain(`data-audit-item="${id}"`);
 		}
-		expect(markup).toContain("Exact duplicate");
+		expect(markup).toContain("Consolidated exact duplicate");
 	});
 
 	it("renders controls with their native accessibility states", () => {
@@ -49,6 +49,7 @@ describe("design audit specimens", () => {
 		}
 		expect(markup).toContain('role="dialog"');
 		expect(markup).toContain('aria-current="page"');
+		expect(markup).toContain('aria-label="Compact workspace view"');
 		expect(markup).toContain('data-chat-entry="true"');
 		expect(markup).toContain('role="alert"');
 	});
diff --git a/apps/web/src/design-audit/surfaces.css b/apps/web/src/design-audit/surfaces.css
index 0d2a5826..5c34f8a8 100644
--- a/apps/web/src/design-audit/surfaces.css
+++ b/apps/web/src/design-audit/surfaces.css
@@ -119,6 +119,17 @@
 	font-weight: 600;
 }
 
+.design-audit-compact-navigation {
+	display: grid;
+	grid-template-columns: repeat(4, minmax(0, 1fr));
+	width: min(100%, 32rem);
+	margin-block-start: 1rem;
+}
+
+.design-audit-compact-navigation button {
+	min-width: 0;
+}
+
 .design-audit-sidebar a[data-navigation-state="ancestor"] {
 	font-weight: 500;
 }
diff --git a/apps/web/src/design-audit/surfaces.tsx b/apps/web/src/design-audit/surfaces.tsx
index e1edc3b7..28499899 100644
--- a/apps/web/src/design-audit/surfaces.tsx
+++ b/apps/web/src/design-audit/surfaces.tsx
@@ -147,6 +147,17 @@ function Navigation() {
 					<CircleNotchIcon size={16} />Loading more…
 				</div>
 			</nav>
+			<nav
+				aria-label="Compact workspace view"
+				className="workspace-navigation design-audit-compact-navigation"
+			>
+				<button className="btn btn-ghost min-h-11" type="button">Conversation</button>
+				<button className="btn btn-ghost min-h-11" type="button">Document</button>
+				<button aria-current="page" className="btn btn-ghost min-h-11" type="button">
+					Decisions
+				</button>
+				<button className="btn btn-ghost min-h-11" type="button">Background</button>
+			</nav>
 		</AuditPlate>
 	);
 }
diff --git a/apps/web/src/hosted.test.ts b/apps/web/src/hosted.test.ts
index f6943451..c0a9aed1 100644
--- a/apps/web/src/hosted.test.ts
+++ b/apps/web/src/hosted.test.ts
@@ -404,7 +404,7 @@ describe("anchored child lifecycle", () => {
 		expect(child).toContain('aria-label="Close Source review"');
 		expect(child).toContain('data-child-document-close="true"');
 		expect(child).toContain("navigation-xmark.svg");
-		expect(child).toContain('class="size-[18px]"');
+		expect(child).toContain('class="size-[16px]"');
 		expect(parent).not.toContain("data-child-document-close");
 	});
 
diff --git a/apps/web/src/icon-assets.test.ts b/apps/web/src/icon-assets.test.ts
new file mode 100644
index 00000000..88c1765d
--- /dev/null
+++ b/apps/web/src/icon-assets.test.ts
@@ -0,0 +1,15 @@
+import { expect, test } from "bun:test";
+import { existsSync, readFileSync } from "node:fs";
+import { join } from "node:path";
+
+let root = import.meta.dir;
+
+test("the sidebar and conversation share one panel-close asset", () => {
+	let sidebar = readFileSync(join(root, "project-sidebar.tsx"), "utf8");
+	let workspace = readFileSync(join(root, "workspace.tsx"), "utf8");
+
+	expect(sidebar).toContain("assets/icons/panel-close.svg");
+	expect(workspace).toContain("assets/icons/panel-close.svg");
+	expect(existsSync(join(root, "assets/figma/navigation/collapse.svg"))).toBe(false);
+	expect(existsSync(join(root, "assets/icons/conversation-close.svg"))).toBe(false);
+});
diff --git a/apps/web/src/navigation-chrome.test.ts b/apps/web/src/navigation-chrome.test.ts
index 8cd4e564..0d55d5f1 100644
--- a/apps/web/src/navigation-chrome.test.ts
+++ b/apps/web/src/navigation-chrome.test.ts
@@ -3,11 +3,21 @@ import { createElement } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
 
 import { NavigationIcon, ProjectSidebar, toggleCollapsedProjectIds } from "./project-sidebar";
+import { ProjectSidebarExpandButton } from "./project-sidebar-chrome";
 import { Header } from "./room-workspace";
 
 import type { ComponentProps } from "react";
 
 describe("the Figma navigation chrome", () => {
+	test("uses the standard sixteen-pixel glyph in an icon button", () => {
+		let markup = renderToStaticMarkup(createElement(ProjectSidebarExpandButton, {
+			onExpand: () => {},
+		}));
+
+		expect(markup).toContain('height="16"');
+		expect(markup).toContain('width="16"');
+	});
+
 	test("renders sidebar control glyphs at fourteen pixels", () => {
 		let markup = renderToStaticMarkup(createElement(NavigationIcon, { src: "/control.svg" }));
 
diff --git a/apps/web/src/project-sidebar.tsx b/apps/web/src/project-sidebar.tsx
index e0e0f149..daed4b1b 100644
--- a/apps/web/src/project-sidebar.tsx
+++ b/apps/web/src/project-sidebar.tsx
@@ -2,7 +2,7 @@ import addProjectIcon from "./assets/figma/navigation/add-project.svg";
 import bookBookmarkIcon from "./assets/figma/navigation/book-bookmark.svg";
 import boxArchiveIcon from "./assets/figma/navigation/box-archive.svg";
 import chopinIcon from "./assets/figma/navigation/chopin.svg";
-import collapseIcon from "./assets/figma/navigation/collapse.svg";
+import collapseIcon from "./assets/icons/panel-close.svg";
 import documentActionsIcon from "./assets/figma/navigation/document-actions.svg";
 import newDocumentIcon from "./assets/figma/navigation/new-document.svg";
 import searchIcon from "./assets/figma/navigation/search.svg";
diff --git a/apps/web/src/theme.css b/apps/web/src/theme.css
index 108bcfc2..f9cd4091 100644
--- a/apps/web/src/theme.css
+++ b/apps/web/src/theme.css
@@ -212,6 +212,7 @@
 	border-radius: var(--radius-md);
 	font-size: var(--text-sm);
 	font-weight: 500;
+	white-space: nowrap;
 
 	&:disabled {
 		background-color: var(--color-gray-200);
@@ -602,6 +603,12 @@ body {
 	padding-left: calc(0.25rem + env(safe-area-inset-left));
 }
 
+.workspace-navigation [aria-current="page"] {
+	background-color: var(--color-page);
+	color: var(--color-text-primary);
+	box-shadow: var(--shadow-resting);
+}
+
 /* The split workspace is one elevated surface; its panes only own the divider. */
 .workspace-frame .plan-document {
 	box-shadow: none;
diff --git a/apps/web/src/tokens.test.ts b/apps/web/src/tokens.test.ts
index 95e53693..de984aa3 100644
--- a/apps/web/src/tokens.test.ts
+++ b/apps/web/src/tokens.test.ts
@@ -237,6 +237,16 @@ describe("controls", () => {
 		expect(rule).toMatch(/&:disabled\s*\{[\s\S]*color:\s*var\(--color-gray-600\)/);
 	});
 
+	it("keeps button labels on one line", () => {
+		expect(utility("btn")).toMatch(/white-space:\s*nowrap/);
+	});
+
+	it("distinguishes the active compact workspace destination", () => {
+		expect(THEME).toMatch(
+			/\.workspace-navigation \[aria-current="page"\]\s*\{[\s\S]*background-color:\s*var\(--color-page\);[\s\S]*color:\s*var\(--color-text-primary\)/,
+		);
+	});
+
 	it("keeps focus and invalid outlines visible above their surface", () => {
 		expect(declared("--focus-ring-color")).toBe("var(--color-brand)");
 		expect(declared("--focus-ring-width")).toBe("2px");
diff --git a/apps/web/src/workspace-feedback.test.ts b/apps/web/src/workspace-feedback.test.ts
index 74f50afb..6690b356 100644
--- a/apps/web/src/workspace-feedback.test.ts
+++ b/apps/web/src/workspace-feedback.test.ts
@@ -16,6 +16,7 @@ test("chat state swaps use purposeful icon feedback", () => {
 
 	expect(markup).toContain('data-motion-feedback="icon"');
 	expect(markup).toContain("motion-feedback");
+	expect(markup).toContain("size-[14px]");
 });
 
 test("the open chat hover swap crossfades without display changes", () => {
@@ -30,6 +31,7 @@ test("the open chat hover swap crossfades without display changes", () => {
 	);
 
 	expect(markup.match(/class="chat-toggle-icon/g)).toHaveLength(2);
+	expect(markup.match(/size-\[14px\]/g)).toHaveLength(3);
 	expect(markup).not.toContain("group-hover:hidden");
 	expect(markup).not.toContain("group-hover:block");
 });
diff --git a/apps/web/src/workspace.tsx b/apps/web/src/workspace.tsx
index 27637294..09f045b6 100644
--- a/apps/web/src/workspace.tsx
+++ b/apps/web/src/workspace.tsx
@@ -14,7 +14,7 @@ import {
 	workspaceMode,
 	workspaceProfile,
 } from "./workspace-model";
-import chatCloseIcon from "./assets/icons/chat-close.svg";
+import chatCloseIcon from "./assets/icons/panel-close.svg";
 import chatIcon from "./assets/icons/chat.svg";
 import navigationXmark from "./assets/icons/navigation-xmark.svg";
 import { ResizeHandle, usePaneWidth } from "./resizable-pane";
@@ -175,7 +175,7 @@ export function ChatToggle(
 				: (
 					<img
 						alt=""
-						className={`${feedback} size-[14px] ${open ? "opacity-50" : ""}`}
+						className={`${feedback} size-[14px]`}
 						data-motion-feedback="icon"
 						key={open ? "open" : "closed"}
 						src={open ? chatCloseIcon : chatIcon}
@@ -433,7 +433,7 @@ export function Workspace(
 											<img
 												alt=""
 												aria-hidden="true"
-												className="size-[18px]"
+												className="size-[16px]"
 												src={navigationXmark}
 											/>
 										</button>
diff --git a/packages/editor/src/send-action.tsx b/packages/editor/src/send-action.tsx
index d4bb7050..b12e30fc 100644
--- a/packages/editor/src/send-action.tsx
+++ b/packages/editor/src/send-action.tsx
@@ -18,7 +18,7 @@ export function SendAction(
 			title={label}
 			type="button"
 		>
-			<ArrowUpIcon aria-hidden="true" className="send-action-icon" size={18} />
+			<ArrowUpIcon aria-hidden="true" size={16} />
 		</button>
 	);
 }
diff --git a/packages/editor/src/styles.css b/packages/editor/src/styles.css
index 057eb599..eca71683 100644
--- a/packages/editor/src/styles.css
+++ b/packages/editor/src/styles.css
@@ -128,16 +128,6 @@
 	gap: 0.5rem;
 }
 
-.send-action {
-	width: 1.5rem;
-	height: 1.5rem;
-}
-
-.send-action-icon {
-	width: 1.125rem;
-	height: 1.125rem;
-}
-
 .plan,
 .plan-decisions {
 	--plan-gutter: 4rem;
diff --git a/packages/editor/src/widgets/research-composer.test.tsx b/packages/editor/src/widgets/research-composer.test.tsx
index 95923bcf..fd006c45 100644
--- a/packages/editor/src/widgets/research-composer.test.tsx
+++ b/packages/editor/src/widgets/research-composer.test.tsx
@@ -160,6 +160,7 @@ describe("research composer", () => {
 		expect(markup).toContain('title="Start research"');
 		expect(markup).toContain("send-action btn btn-icon btn-primary rounded-full");
 		expect(markup).toContain('aria-hidden="true"');
+		expect(markup).toContain('width="16" height="16"');
 	});
 
 	it("keeps one exact brief actionable after a failed create", () => {

From a32bbea2325b73a2622d9341f93797ba6bf1e2a7 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Fri, 28 Aug 2026 10:36:55 +0100
Subject: [PATCH 09/35] Document design system audit findings

---
 apps/web/src/design-audit/surfaces.css        | 10 +--
 apps/web/src/tokens.test.ts                   |  5 ++
 docs/design-system-audit.md                   | 63 +++++++++++++++++++
 .../2026-08-28-design-system-normalization.md | 31 +++++++++
 packages/editor/src/styles.css                |  5 --
 5 files changed, 104 insertions(+), 10 deletions(-)
 create mode 100644 docs/design-system-audit.md
 create mode 100644 docs/superpowers/plans/2026-08-28-design-system-normalization.md

diff --git a/apps/web/src/design-audit/surfaces.css b/apps/web/src/design-audit/surfaces.css
index 5c34f8a8..23bc9ffb 100644
--- a/apps/web/src/design-audit/surfaces.css
+++ b/apps/web/src/design-audit/surfaces.css
@@ -103,7 +103,7 @@
 	justify-content: center;
 	gap: 0.5rem;
 	margin-block-start: 0.75rem;
-	border: var(--edge-width) dashed var(--color-edge-strong);
+	border: var(--edge-width) dashed var(--color-control-edge);
 	border-radius: var(--radius-lg);
 	font-size: var(--text-sm);
 	color: var(--color-text-tertiary);
@@ -154,9 +154,9 @@
 	max-height: 70dvh;
 	flex-direction: column;
 	overflow: hidden;
-	border: var(--edge-width) solid var(--color-edge-strong);
+	border: var(--edge-width) solid var(--color-control-edge);
 	border-radius: var(--radius-xl);
-	background: var(--color-conversation);
+	background: var(--color-conversation-pane);
 }
 
 .design-audit-conversation .conversation-composer textarea {
@@ -250,7 +250,7 @@
 }
 
 .design-audit-empty-grid strong {
-	font-size: var(--text-md);
+	font-size: var(--text-lg);
 }
 
 .design-audit-empty-grid span {
@@ -276,7 +276,7 @@
 	gap: 1rem;
 	padding: 0.75rem;
 	border-radius: var(--radius-lg);
-	background: var(--color-destructive-soft);
+	background: var(--color-destructive-wash);
 }
 
 @media (prefers-reduced-motion: reduce) {
diff --git a/apps/web/src/tokens.test.ts b/apps/web/src/tokens.test.ts
index de984aa3..1f216e5a 100644
--- a/apps/web/src/tokens.test.ts
+++ b/apps/web/src/tokens.test.ts
@@ -14,6 +14,7 @@ type Oklch = { l: number; c: number; h: number };
 
 const ROOT = join(import.meta.dir, "../../..");
 const THEME = readFileSync(join(import.meta.dir, "theme.css"), "utf8");
+const EDITOR_STYLES = readFileSync(join(ROOT, "packages/editor/src/styles.css"), "utf8");
 
 function declared(name: string): string {
 	let found = new RegExp(`\\n\\s*${name}:\\s*([^;]+);`).exec(THEME);
@@ -241,6 +242,10 @@ describe("controls", () => {
 		expect(utility("btn")).toMatch(/white-space:\s*nowrap/);
 	});
 
+	it("keeps consumer classes from resizing standard icon buttons", () => {
+		expect(EDITOR_STYLES).not.toMatch(/\.plan-research-dismiss\s*\{[^}]*(?:width|height):/s);
+	});
+
 	it("distinguishes the active compact workspace destination", () => {
 		expect(THEME).toMatch(
 			/\.workspace-navigation \[aria-current="page"\]\s*\{[\s\S]*background-color:\s*var\(--color-page\);[\s\S]*color:\s*var\(--color-text-primary\)/,
diff --git a/docs/design-system-audit.md b/docs/design-system-audit.md
new file mode 100644
index 00000000..aca4bc88
--- /dev/null
+++ b/docs/design-system-audit.md
@@ -0,0 +1,63 @@
+# Design system audit
+
+First pass completed 28 August 2026. **Health: 8/10.** The system is healthy, with a compact token
+vocabulary and shared control primitives. The audit found a small amount of consumer drift rather
+than a second, competing design system. There are no open P0, P1, or objective P2 findings after the
+first correction pass.
+
+## Catalogue
+
+Run `bun run dev` and open `/design-audit`. The route is development-only and is excluded from the
+production entry point.
+
+The catalogue contains 31 review areas in four sections:
+
+- foundations: semantic colours, typography, spacing, radii, elevation, and icons;
+- controls: buttons, icon buttons, links, fields, choices, tabs, menus, and dropdowns;
+- application surfaces: dialogs, lists, navigation, Conversation, Decisions, resolved comments,
+  loading, empty, and error states;
+- authored content: callouts, research, code, diffs, diagrams, formulae, images, and tables.
+
+Authored examples use the canonical dialect importer and static Lexical renderer. Application
+examples reuse production primitives where they can be rendered safely without a live room.
+
+## System contract
+
+- Type has five rungs and semantic ink roles with AA contrast on the page surface.
+- Controls use three sizes: 28px icon and small controls, 32px medium controls, and 44px coarse
+  pointer targets.
+- Standard icon-button glyphs are 16px. Fourteen-pixel glyphs belong to compact navigation and
+  disclosure roles; larger glyphs are status or content, not standard controls.
+- Buttons have primary, secondary, ghost, and destructive tiers with shared hover, active, focus,
+  and disabled states. Labels stay on one line.
+- Depth has three roles: resting, raised, and overlay. Borders use passive and control edges.
+- Dialogs use `NavigationDialog`; document cards and decision records retain their domain-specific
+  structures rather than imitating dialogs.
+
+## Findings and corrections
+
+| Priority     | Finding and impact                                                                                                                              | Correction and evidence                                                                                                                                                        |
+| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| P1, resolved | Compact navigation exposed `aria-current` without a visible selected state, so the mobile destination depended on accessibility metadata alone. | Added a page surface, primary ink, and resting elevation in `apps/web/src/theme.css:606`.                                                                                      |
+| P2, resolved | Send actions used a 24px target and 18px glyph beside 28px icon buttons.                                                                        | Moved the shared action onto the 28px/16px contract in `packages/editor/src/send-action.tsx:12`.                                                                               |
+| P2, resolved | Pane, close, stop, sidebar, queued-message, and research-dismiss icon buttons mixed 14px and 18px artwork or 28px and 32px targets.             | Normalized them to 28px targets with 16px glyphs; examples are `apps/web/src/workspace.tsx:150`, `apps/web/src/chat/chat.tsx:416`, and `apps/web/src/chat/transcript.tsx:136`. |
+| P2, resolved | Shared button labels could wrap under pressure and produce inconsistent control heights.                                                        | Added `white-space: nowrap` to the base utility at `apps/web/src/theme.css:207`.                                                                                               |
+| P2, resolved | Sidebar collapse and Conversation close shipped identical SVGs under different names.                                                           | Consolidated both onto `panel-close.svg`; `apps/web/src/icon-assets.test.ts:7` guards the boundary.                                                                            |
+| P3, open     | Eighteen local SVGs contain fixed `#212121` artwork, so image-loaded interactive icons cannot inherit semantic active or disabled colours.      | `apps/web/src/assets/icons/conversation.svg:15` is representative. Choose Phosphor or a colour-aware wrapper before migration.                                                 |
+
+## Human review queue
+
+These are coherent today but need product taste rather than mechanical normalization:
+
+1. Desktop navigation deliberately uses a denser 14px icon role, while general controls use 16px.
+   Confirm that distinction should remain.
+2. The empty Decisions view is intentionally quiet: explanatory copy without illustration or CTA.
+   Decide whether it needs stronger guidance.
+3. A short Conversation anchors to the bottom and leaves open space above. Confirm that the
+   messaging convention is preferable to top anchoring.
+4. The project sidebar animates its width at `apps/web/src/navigation.css:198` so document space
+   yields to it. A transform would be cheaper but would overlay rather than reflow the workspace;
+   profile before changing the interaction.
+
+The authored blockquote's three-pixel logical border is a conventional quotation affordance, not a
+card accent, so it remains unchanged.
diff --git a/docs/superpowers/plans/2026-08-28-design-system-normalization.md b/docs/superpowers/plans/2026-08-28-design-system-normalization.md
new file mode 100644
index 00000000..1736b13e
--- /dev/null
+++ b/docs/superpowers/plans/2026-08-28-design-system-normalization.md
@@ -0,0 +1,31 @@
+# Design system normalization plan
+
+**Status:** Complete
+
+This small pass addresses only the verified P1/P2 findings from the browser audit. The P3 icon
+colour migration and product-taste questions remain outside this plan.
+
+## 1. Make the current compact destination visible
+
+- Add a shared `aria-current="page"` treatment to `.workspace-navigation`.
+- Guard it in `apps/web/src/tokens.test.ts`.
+- Show the compact navigation state in the surface catalogue.
+
+## 2. Normalize standard icon buttons
+
+- Keep `.btn-icon` at 28px with a 16px glyph.
+- Move send, Conversation, close, stop, sidebar, and queued-message actions onto that contract.
+- Preserve 14px compact-navigation and disclosure icons because they are a separate role.
+- Add focused render contracts for the affected controls.
+
+## 3. Remove mechanical drift
+
+- Keep base button labels on one line.
+- Replace the two byte-identical close icons with `panel-close.svg`.
+- Add an asset regression test so the duplicate names do not return.
+
+## 4. Verify
+
+- Run the focused design-system and component tests.
+- Run workspace TypeScript checks, validation, unit tests, and production build.
+- Recheck the catalogue at desktop and compact widths.
diff --git a/packages/editor/src/styles.css b/packages/editor/src/styles.css
index eca71683..6d3e6cb1 100644
--- a/packages/editor/src/styles.css
+++ b/packages/editor/src/styles.css
@@ -60,11 +60,6 @@
 	justify-content: space-between;
 }
 
-.plan-research-dismiss {
-	width: 2rem;
-	height: 2rem;
-}
-
 .plan-research-composer textarea {
 	width: 100%;
 	min-height: 5rem;

From 3b3965fd07e087204092af136774e1e0148d899e Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Fri, 28 Aug 2026 10:49:49 +0100
Subject: [PATCH 10/35] Fix design audit navigation overlay

---
 docs/design-system-audit.md                   | 17 +++++++++--------
 packages/editor/src/card.tsx                  |  4 ++--
 packages/editor/src/styles.css                |  1 -
 packages/editor/src/widgets/research.test.tsx |  3 +++
 packages/editor/src/widgets/research.tsx      |  6 +++++-
 5 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/docs/design-system-audit.md b/docs/design-system-audit.md
index aca4bc88..84a32644 100644
--- a/docs/design-system-audit.md
+++ b/docs/design-system-audit.md
@@ -36,14 +36,15 @@ examples reuse production primitives where they can be rendered safely without a
 
 ## Findings and corrections
 
-| Priority     | Finding and impact                                                                                                                              | Correction and evidence                                                                                                                                                        |
-| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| P1, resolved | Compact navigation exposed `aria-current` without a visible selected state, so the mobile destination depended on accessibility metadata alone. | Added a page surface, primary ink, and resting elevation in `apps/web/src/theme.css:606`.                                                                                      |
-| P2, resolved | Send actions used a 24px target and 18px glyph beside 28px icon buttons.                                                                        | Moved the shared action onto the 28px/16px contract in `packages/editor/src/send-action.tsx:12`.                                                                               |
-| P2, resolved | Pane, close, stop, sidebar, queued-message, and research-dismiss icon buttons mixed 14px and 18px artwork or 28px and 32px targets.             | Normalized them to 28px targets with 16px glyphs; examples are `apps/web/src/workspace.tsx:150`, `apps/web/src/chat/chat.tsx:416`, and `apps/web/src/chat/transcript.tsx:136`. |
-| P2, resolved | Shared button labels could wrap under pressure and produce inconsistent control heights.                                                        | Added `white-space: nowrap` to the base utility at `apps/web/src/theme.css:207`.                                                                                               |
-| P2, resolved | Sidebar collapse and Conversation close shipped identical SVGs under different names.                                                           | Consolidated both onto `panel-close.svg`; `apps/web/src/icon-assets.test.ts:7` guards the boundary.                                                                            |
-| P3, open     | Eighteen local SVGs contain fixed `#212121` artwork, so image-loaded interactive icons cannot inherit semantic active or disabled colours.      | `apps/web/src/assets/icons/conversation.svg:15` is representative. Choose Phosphor or a colour-aware wrapper before migration.                                                 |
+| Priority     | Finding and impact                                                                                                                                                | Correction and evidence                                                                                                                                                        |
+| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| P1, resolved | A ready Research card rendered outside the editor lacked a positioning anchor, so its absolute open button covered the catalogue viewport and blocked navigation. | Made the card own its structural anchor through composable `SidecarCard` classes in `packages/editor/src/card.tsx:45` and `packages/editor/src/widgets/research.tsx:236`.      |
+| P1, resolved | Compact navigation exposed `aria-current` without a visible selected state, so the mobile destination depended on accessibility metadata alone.                   | Added a page surface, primary ink, and resting elevation in `apps/web/src/theme.css:606`.                                                                                      |
+| P2, resolved | Send actions used a 24px target and 18px glyph beside 28px icon buttons.                                                                                          | Moved the shared action onto the 28px/16px contract in `packages/editor/src/send-action.tsx:12`.                                                                               |
+| P2, resolved | Pane, close, stop, sidebar, queued-message, and research-dismiss icon buttons mixed 14px and 18px artwork or 28px and 32px targets.                               | Normalized them to 28px targets with 16px glyphs; examples are `apps/web/src/workspace.tsx:150`, `apps/web/src/chat/chat.tsx:416`, and `apps/web/src/chat/transcript.tsx:136`. |
+| P2, resolved | Shared button labels could wrap under pressure and produce inconsistent control heights.                                                                          | Added `white-space: nowrap` to the base utility at `apps/web/src/theme.css:207`.                                                                                               |
+| P2, resolved | Sidebar collapse and Conversation close shipped identical SVGs under different names.                                                                             | Consolidated both onto `panel-close.svg`; `apps/web/src/icon-assets.test.ts:7` guards the boundary.                                                                            |
+| P3, open     | Eighteen local SVGs contain fixed `#212121` artwork, so image-loaded interactive icons cannot inherit semantic active or disabled colours.                        | `apps/web/src/assets/icons/conversation.svg:15` is representative. Choose Phosphor or a colour-aware wrapper before migration.                                                 |
 
 ## Human review queue
 
diff --git a/packages/editor/src/card.tsx b/packages/editor/src/card.tsx
index e1746400..2ce1d1b0 100644
--- a/packages/editor/src/card.tsx
+++ b/packages/editor/src/card.tsx
@@ -43,7 +43,7 @@ export type SidecarCardProps = {
 };
 
 export function SidecarCard(
-	{ children, focused, footer, label, padded = true, settled, status, ...rest }:
+	{ children, className, focused, footer, label, padded = true, settled, status, ...rest }:
 		& SidecarCardProps
 		& Omit<ComponentProps<"article">, "children">,
 ) {
@@ -54,7 +54,7 @@ export function SidecarCard(
 			aria-label={label}
 			className={`flex flex-col overflow-hidden rounded-lg ring-hairline ${surface} ${
 				focused ? "bg-selected" : ""
-			}`}
+			} ${className ?? ""}`}
 			data-focus-boundary=""
 			{...rest}
 		>
diff --git a/packages/editor/src/styles.css b/packages/editor/src/styles.css
index 6d3e6cb1..f513cb03 100644
--- a/packages/editor/src/styles.css
+++ b/packages/editor/src/styles.css
@@ -22,7 +22,6 @@
 }
 
 .plan-content [data-research-ready] {
-	position: relative;
 	box-shadow: var(--shadow-raised);
 	transition: box-shadow var(--duration-fast) var(--ease-out);
 }
diff --git a/packages/editor/src/widgets/research.test.tsx b/packages/editor/src/widgets/research.test.tsx
index 18bc7b3d..5576c769 100644
--- a/packages/editor/src/widgets/research.test.tsx
+++ b/packages/editor/src/widgets/research.test.tsx
@@ -257,6 +257,9 @@ describe("research card", () => {
 		expect(markup).toContain('aria-label="Open Rollout evidence"');
 		expect(markup).toContain('class="plan-research-open"');
 		expect(markup).toContain('data-research-ready=""');
+		expect(markup).toMatch(
+			/<article[^>]*class="[^"]*\brelative\b[^"]*"[^>]*data-research-ready=""/,
+		);
 		expect(markup).not.toContain("https://example.com/releases");
 		expect(markup).not.toContain("Remove research reference");
 		expect(markup).not.toContain("plan-research-actions");
diff --git a/packages/editor/src/widgets/research.tsx b/packages/editor/src/widgets/research.tsx
index c5a850b6..ec93cd7c 100644
--- a/packages/editor/src/widgets/research.tsx
+++ b/packages/editor/src/widgets/research.tsx
@@ -233,7 +233,11 @@ export function ResearchCard(
 		: undefined;
 	let actions = researchActions(request, canEdit);
 	return (
-		<SidecarCard data-research-ready={ready ? "" : undefined} label="Research">
+		<SidecarCard
+			className={ready ? "relative" : undefined}
+			data-research-ready={ready ? "" : undefined}
+			label="Research"
+		>
 			<div className="plan-research-heading">
 				<strong>{ready ? ready.title : STAGES[request.stage]}</strong>
 				<span>{ready ? STAGES[request.stage] : request.question}</span>

From 051fe97e1993af5a5f63d21ffe8170fc96529b6e Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Fri, 28 Aug 2026 10:51:16 +0100
Subject: [PATCH 11/35] Document brand wash alpha decision

---
 .../2026-08-28-brand-wash-alpha-design.md     | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-08-28-brand-wash-alpha-design.md

diff --git a/docs/superpowers/specs/2026-08-28-brand-wash-alpha-design.md b/docs/superpowers/specs/2026-08-28-brand-wash-alpha-design.md
new file mode 100644
index 00000000..6081068e
--- /dev/null
+++ b/docs/superpowers/specs/2026-08-28-brand-wash-alpha-design.md
@@ -0,0 +1,23 @@
+# Brand wash alpha design
+
+## Decision
+
+Define `--color-brand-wash` as the brand colour at true 30% opacity:
+
+```css
+color-mix(in srgb, var(--color-brand) 30%, transparent)
+```
+
+This preserves the brand hue while allowing the surface beneath it to contribute to the result.
+
+## Scope
+
+- Change only `--color-brand-wash`.
+- Keep all existing consumers and the design-audit swatch on the shared token.
+- Do not change the brand, hover, active, or ink colours.
+
+## Verification
+
+- Add a token contract that distinguishes true alpha from an opaque page tint.
+- Run the token tests and validation.
+- Inspect the swatch and representative brand-wash consumers in the live catalogue.

From 5c8240ed12f9d7ac179bd2c03348e5f8c94569a4 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Fri, 28 Aug 2026 10:55:56 +0100
Subject: [PATCH 12/35] Refine brand wash and type specimens

---
 apps/web/src/design-audit/foundations.css    | 24 +++++++++++++++++---
 apps/web/src/design-audit/foundations.tsx    | 17 ++++++++------
 apps/web/src/design-audit/specimens.test.tsx |  9 ++++++++
 apps/web/src/theme.css                       |  2 +-
 apps/web/src/tokens.test.ts                  |  9 ++++++--
 5 files changed, 48 insertions(+), 13 deletions(-)

diff --git a/apps/web/src/design-audit/foundations.css b/apps/web/src/design-audit/foundations.css
index dedc15f1..85ef76dc 100644
--- a/apps/web/src/design-audit/foundations.css
+++ b/apps/web/src/design-audit/foundations.css
@@ -43,17 +43,30 @@
 
 .design-audit-type-stack > div {
 	display: grid;
-	grid-template-columns: 9rem minmax(0, 1fr);
+	grid-template-columns: 12rem minmax(0, 1fr);
 	align-items: baseline;
 	gap: 1.5rem;
 }
 
-.design-audit-type-stack span {
+.design-audit-type-label {
+	display: grid;
+	gap: 0.125rem;
+}
+
+.design-audit-type-label span,
+.design-audit-type-label code {
 	font-size: var(--text-sm);
-	font-weight: 500;
 	color: var(--color-text-quaternary);
 }
 
+.design-audit-type-label code {
+	white-space: nowrap;
+}
+
+.design-audit-type-label span {
+	font-weight: 500;
+}
+
 .design-audit-type-stack strong {
 	font-weight: 500;
 	text-wrap: pretty;
@@ -183,3 +196,8 @@
 		gap: 0.25rem;
 	}
 }
+
+.design-audit-preview[data-preview-width="narrow"] .design-audit-type-stack > div {
+	grid-template-columns: minmax(0, 1fr);
+	gap: 0.25rem;
+}
diff --git a/apps/web/src/design-audit/foundations.tsx b/apps/web/src/design-audit/foundations.tsx
index 23004214..32469eb0 100644
--- a/apps/web/src/design-audit/foundations.tsx
+++ b/apps/web/src/design-audit/foundations.tsx
@@ -23,11 +23,11 @@ const COLOURS = [
 ] as const;
 
 const TYPE = [
-	["Chrome and labels", "--text-sm", "--text-sm--line-height"],
-	["Document prose", "--text-base", "--text-base--line-height"],
-	["Subheading", "--text-lg", "--text-lg--line-height"],
-	["Section heading", "--text-xl", "--text-xl--line-height"],
-	["Document title", "--text-2xl", "--text-2xl--line-height"],
+	["Chrome and labels", "13px / 20px line-height", "--text-sm", "--text-sm--line-height"],
+	["Document prose", "15px / 22px line-height", "--text-base", "--text-base--line-height"],
+	["Subheading", "17px / 27px line-height", "--text-lg", "--text-lg--line-height"],
+	["Section heading", "24px / 30px line-height", "--text-xl", "--text-xl--line-height"],
+	["Document title", "32px / 38px line-height", "--text-2xl", "--text-2xl--line-height"],
 ] as const;
 
 const SPACING = [2, 4, 6, 8, 12, 16, 24, 32] as const;
@@ -71,9 +71,12 @@ export function Foundations() {
 				description="The complete five-rung type scale."
 			>
 				<div className="design-audit-type-stack">
-					{TYPE.map(([label, size, lineHeight]) => (
+					{TYPE.map(([label, measurement, size, lineHeight]) => (
 						<div key={size} style={{ fontSize: `var(${size})`, lineHeight: `var(${lineHeight})` }}>
-							<span>{label}</span>
+							<div className="design-audit-type-label">
+								<span>{label}</span>
+								<code>{measurement}</code>
+							</div>
 							<strong>Several people and a Planner share one document.</strong>
 						</div>
 					))}
diff --git a/apps/web/src/design-audit/specimens.test.tsx b/apps/web/src/design-audit/specimens.test.tsx
index e7b0c612..3d48a34a 100644
--- a/apps/web/src/design-audit/specimens.test.tsx
+++ b/apps/web/src/design-audit/specimens.test.tsx
@@ -16,6 +16,15 @@ describe("design audit specimens", () => {
 			expect(markup).toContain(`data-audit-item="${id}"`);
 		}
 		expect(markup).toContain("Consolidated exact duplicate");
+		for (
+			let measurement of [
+				"13px / 20px line-height",
+				"15px / 22px line-height",
+				"17px / 27px line-height",
+				"24px / 30px line-height",
+				"32px / 38px line-height",
+			]
+		) expect(markup).toContain(measurement);
 	});
 
 	it("renders controls with their native accessibility states", () => {
diff --git a/apps/web/src/theme.css b/apps/web/src/theme.css
index f9cd4091..f4e71d0a 100644
--- a/apps/web/src/theme.css
+++ b/apps/web/src/theme.css
@@ -54,7 +54,7 @@
 	--color-brand: oklch(0.50006 0.08514 210.06); /* #06707e */
 	--color-brand-hover: oklch(0.42914 0.07315 210.634); /* #045a66 */
 	--color-brand-active: oklch(0.37546 0.06382 210.435); /* #034a54 */
-	--color-brand-wash: oklch(0.95547 0.0277 207.843); /* #dcf6fa */
+	--color-brand-wash: color-mix(in srgb, var(--color-brand) 30%, transparent);
 	--color-brand-ink: oklch(0.43882 0.07476 210.193); /* #045d69 */
 	--focus-ring-color: var(--color-brand);
 	--focus-ring-width: 2px;
diff --git a/apps/web/src/tokens.test.ts b/apps/web/src/tokens.test.ts
index 1f216e5a..f7506f37 100644
--- a/apps/web/src/tokens.test.ts
+++ b/apps/web/src/tokens.test.ts
@@ -134,7 +134,13 @@ describe("palette", () => {
 		);
 	});
 
-	it("keeps the Chat pane edge subtly stronger than the frame hairline", () => {
+it("makes the brand wash the brand colour at thirty percent opacity", () => {
+	expect(declared("--color-brand-wash")).toBe(
+		"color-mix(in srgb, var(--color-brand) 30%, transparent)",
+	);
+});
+
+it("keeps the Chat pane edge subtly stronger than the frame hairline", () => {
 		expect(THEME).toMatch(
 			/\.workspace-frame \.workspace-chat-panel\s*\{\s*border-color:\s*rgb\(0 0 0 \/ 9%\);/,
 		);
@@ -162,7 +168,6 @@ describe("palette", () => {
 			"--color-brand",
 			"--color-brand-hover",
 			"--color-brand-active",
-			"--color-brand-wash",
 			"--color-brand-ink",
 		]);
 	});

From 11e24cf6b0d95ce128d16f0ed286629de7429f58 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Fri, 28 Aug 2026 11:05:13 +0100
Subject: [PATCH 13/35] Consolidate passive control surfaces

---
 apps/web/src/design-audit/foundations.tsx     |  1 -
 apps/web/src/design-audit/inventory.ts        |  6 ++
 apps/web/src/design-audit/specimens.test.tsx  |  2 +
 apps/web/src/design-audit/styles.css          |  2 +-
 apps/web/src/design-audit/surfaces.css        | 88 +++++++++++++++++++
 apps/web/src/design-audit/surfaces.tsx        | 41 +++++++++
 apps/web/src/theme.css                        |  2 -
 apps/web/src/tokens.test.ts                   | 14 ++-
 packages/editor/src/face.tsx                  |  2 +-
 packages/editor/src/styles.css                |  6 +-
 .../src/widgets/research-composer.test.tsx    |  1 +
 packages/editor/src/widgets/research.tsx      |  1 +
 packages/question/src/react/question-view.tsx |  2 +-
 13 files changed, 155 insertions(+), 13 deletions(-)

diff --git a/apps/web/src/design-audit/foundations.tsx b/apps/web/src/design-audit/foundations.tsx
index 32469eb0..82cf0d29 100644
--- a/apps/web/src/design-audit/foundations.tsx
+++ b/apps/web/src/design-audit/foundations.tsx
@@ -6,7 +6,6 @@ const COLOURS = [
 	["Ground", "--color-ground"],
 	["Inset", "--color-inset"],
 	["Selected", "--color-selected"],
-	["Control", "--color-control"],
 	["Primary text", "--color-text-primary"],
 	["Secondary text", "--color-text-secondary"],
 	["Tertiary text", "--color-text-tertiary"],
diff --git a/apps/web/src/design-audit/inventory.ts b/apps/web/src/design-audit/inventory.ts
index 8a3f84d8..6c44935e 100644
--- a/apps/web/src/design-audit/inventory.ts
+++ b/apps/web/src/design-audit/inventory.ts
@@ -102,6 +102,12 @@ export const AUDIT_INVENTORY: readonly AuditGroup[] = [
 				source: "apps/web/src/chat/chat.tsx",
 				states: ["member", "planner", "tool", "busy", "error"],
 			},
+			{
+				id: "identity",
+				label: "Identity and collaboration",
+				source: "packages/editor/src/face.tsx",
+				states: ["avatar-loading", "editing-question"],
+			},
 			{
 				id: "decisions",
 				label: "Decisions",
diff --git a/apps/web/src/design-audit/specimens.test.tsx b/apps/web/src/design-audit/specimens.test.tsx
index 3d48a34a..3205355f 100644
--- a/apps/web/src/design-audit/specimens.test.tsx
+++ b/apps/web/src/design-audit/specimens.test.tsx
@@ -60,6 +60,8 @@ describe("design audit specimens", () => {
 		expect(markup).toContain('aria-current="page"');
 		expect(markup).toContain('aria-label="Compact workspace view"');
 		expect(markup).toContain('data-chat-entry="true"');
+		expect(markup).toContain("Avatar image loading");
+		expect(markup).toContain("Editing this question");
 		expect(markup).toContain('role="alert"');
 	});
 
diff --git a/apps/web/src/design-audit/styles.css b/apps/web/src/design-audit/styles.css
index 77150c76..609531a3 100644
--- a/apps/web/src/design-audit/styles.css
+++ b/apps/web/src/design-audit/styles.css
@@ -53,7 +53,7 @@
 	gap: 0.125rem;
 	padding: 0.125rem;
 	border-radius: var(--radius-lg);
-	background: var(--color-control);
+	background: var(--color-selected);
 }
 
 .design-audit-width-controls [aria-pressed="true"] {
diff --git a/apps/web/src/design-audit/surfaces.css b/apps/web/src/design-audit/surfaces.css
index 23bc9ffb..57d5cd89 100644
--- a/apps/web/src/design-audit/surfaces.css
+++ b/apps/web/src/design-audit/surfaces.css
@@ -186,6 +186,94 @@
 	color: var(--color-destructive-ink);
 }
 
+.design-audit-identity-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
+	gap: 1rem;
+}
+
+.design-audit-identity-grid > div {
+	display: grid;
+	align-content: start;
+	gap: 0.5rem;
+}
+
+.design-audit-identity-row,
+.design-audit-question-context {
+	border-radius: var(--radius-lg);
+	background: var(--color-page);
+	box-shadow: var(--shadow-resting);
+}
+
+.design-audit-identity-row {
+	display: flex;
+	align-items: center;
+	gap: 0.625rem;
+	padding: 0.75rem;
+}
+
+.design-audit-avatar-loading {
+	display: block;
+	width: 1.5rem;
+	height: 1.5rem;
+	flex: none;
+	border-radius: var(--radius-md);
+	background: var(--color-selected);
+}
+
+.design-audit-identity-row > div {
+	display: grid;
+	min-width: 0;
+}
+
+.design-audit-identity-row strong,
+.design-audit-question-context strong {
+	font-size: var(--text-sm);
+	font-weight: 600;
+}
+
+.design-audit-identity-row span,
+.design-audit-question-context p {
+	margin: 0;
+	font-size: var(--text-sm);
+	color: var(--color-text-secondary);
+}
+
+.design-audit-question-context {
+	display: grid;
+	gap: 0.5rem;
+	padding: 0.75rem;
+}
+
+.design-audit-question-context header {
+	display: flex;
+	min-width: 0;
+	flex-wrap: wrap;
+	align-items: baseline;
+	justify-content: space-between;
+	gap: 0.5rem;
+}
+
+.design-audit-collaborator-badges {
+	display: flex;
+	min-width: 0;
+	flex-wrap: wrap;
+	gap: 0.25rem;
+}
+
+.design-audit-collaborator-badges > span {
+	max-width: 7rem;
+	overflow: hidden;
+	border-radius: 9999px;
+	background: var(--color-selected);
+	padding: 0.125rem 0.375rem;
+	color: var(--color-text-tertiary);
+	font-size: var(--text-sm);
+	font-weight: 500;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
 .design-audit-card-grid > article {
 	height: fit-content;
 }
diff --git a/apps/web/src/design-audit/surfaces.tsx b/apps/web/src/design-audit/surfaces.tsx
index 28499899..13613bba 100644
--- a/apps/web/src/design-audit/surfaces.tsx
+++ b/apps/web/src/design-audit/surfaces.tsx
@@ -261,6 +261,46 @@ function Decisions() {
 	);
 }
 
+function IdentityAndCollaboration() {
+	return (
+		<AuditPlate
+			description="Loading identity and shared editing indicators shown in their product contexts."
+			item="identity"
+			title="Identity and collaboration"
+		>
+			<div className="design-audit-identity-grid">
+				<div>
+					<StateLabel>Avatar image loading</StateLabel>
+					<div className="design-audit-identity-row">
+						<img
+							alt=""
+							className="design-audit-avatar-loading"
+							src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E"
+						/>
+						<div>
+							<strong>Maggie Appleton</strong>
+							<span>Joining the document…</span>
+						</div>
+					</div>
+				</div>
+				<div>
+					<StateLabel>Editing this question</StateLabel>
+					<div className="design-audit-question-context">
+						<header>
+							<strong>Rollout</strong>
+							<span aria-label="Editing this question" className="design-audit-collaborator-badges">
+								<span>@maggieappleton</span>
+								<span>@olivia</span>
+							</span>
+						</header>
+						<p>How should we introduce the new document workflow?</p>
+					</div>
+				</div>
+			</div>
+		</AuditPlate>
+	);
+}
+
 function Feedback() {
 	return (
 		<>
@@ -339,6 +379,7 @@ export function Surfaces() {
 			<Lists />
 			<Navigation />
 			<Conversation />
+			<IdentityAndCollaboration />
 			<Decisions />
 			<Feedback />
 		</>
diff --git a/apps/web/src/theme.css b/apps/web/src/theme.css
index f4e71d0a..0450f5f2 100644
--- a/apps/web/src/theme.css
+++ b/apps/web/src/theme.css
@@ -40,8 +40,6 @@
 	--color-hover: var(--color-gray-100);
 	--color-inset: var(--color-gray-100);
 	--color-selected: var(--color-gray-200);
-	--color-control: var(--color-gray-200);
-	--color-control-hover: var(--color-gray-300);
 
 	--color-text-primary: var(--color-gray-900);
 	--color-text-secondary: var(--color-gray-700);
diff --git a/apps/web/src/tokens.test.ts b/apps/web/src/tokens.test.ts
index f7506f37..7c5a3d4e 100644
--- a/apps/web/src/tokens.test.ts
+++ b/apps/web/src/tokens.test.ts
@@ -154,12 +154,22 @@ it("keeps the Chat pane edge subtly stronger than the frame hairline", () => {
 	});
 
 	it("keeps text used on tinted surfaces at AA contrast", () => {
-		for (let surface of ["ground", "hover", "selected", "control"]) {
+		for (let surface of ["ground", "hover", "selected"]) {
 			let ratio = contrast("--color-text-tertiary", `--color-${surface}`);
 			expect({ surface, passes: ratio >= 4.5 }).toEqual({ surface, passes: true });
 		}
 	});
 
+	it("uses selected as the single passive control fill", () => {
+		expect(THEME).not.toMatch(/\n\s*--color-control(?:-hover)?:/);
+		expect(EDITOR_STYLES).not.toContain("var(--color-control)");
+		for (
+			let source of sources(join(ROOT, "apps/web/src")).concat(sources(join(ROOT, "packages")))
+		) {
+			expect(withoutComments(readFileSync(source, "utf8"))).not.toMatch(/\bbg-control\b/);
+		}
+	});
+
 	it("keeps petrol as the only blue family", () => {
 		let blue = [...THEME.matchAll(/\n\s*(--color-[\w-]+):\s*oklch\([\d.]+\s+[\d.]+\s+([\d.]+)/g)]
 			.filter(match => Number(match[2]) >= 180 && Number(match[2]) <= 270)
@@ -201,7 +211,7 @@ describe("edges and depth", () => {
 	});
 
 	it("keeps the control boundary visible on every surface", () => {
-		for (let surface of ["page", "ground", "hover", "selected", "control"]) {
+		for (let surface of ["page", "ground", "hover", "selected"]) {
 			let ratio = contrast("--color-control-boundary", `--color-${surface}`);
 			expect({ surface, passes: ratio >= 3 }).toEqual({ surface, passes: true });
 		}
diff --git a/packages/editor/src/face.tsx b/packages/editor/src/face.tsx
index f065cbf4..ed9f890f 100644
--- a/packages/editor/src/face.tsx
+++ b/packages/editor/src/face.tsx
@@ -63,7 +63,7 @@ export function Face({ handle, ring, size = 20 }: FaceProps) {
 	return (
 		<img
 			alt={handle}
-			className={`block bg-control ${edge}`}
+			className={`block bg-selected ${edge}`}
 			onError={() => setFailed(true)}
 			referrerPolicy="no-referrer"
 			src={photograph(handle, size)}
diff --git a/packages/editor/src/styles.css b/packages/editor/src/styles.css
index f513cb03..ecd516e2 100644
--- a/packages/editor/src/styles.css
+++ b/packages/editor/src/styles.css
@@ -63,11 +63,7 @@
 	width: 100%;
 	min-height: 5rem;
 	resize: vertical;
-	border: var(--edge-width) solid var(--color-control-edge);
-	border-radius: var(--radius-md);
-	background: var(--color-control);
 	padding: 0.625rem;
-	color: var(--color-text-primary);
 	font: inherit;
 }
 
@@ -944,7 +940,7 @@
 
 .plan-grip {
 	border-radius: var(--radius-sm);
-	background: var(--color-control);
+	background: var(--color-selected);
 	transition: background-color var(--duration-fast) var(--ease-out);
 }
 
diff --git a/packages/editor/src/widgets/research-composer.test.tsx b/packages/editor/src/widgets/research-composer.test.tsx
index fd006c45..1f8af617 100644
--- a/packages/editor/src/widgets/research-composer.test.tsx
+++ b/packages/editor/src/widgets/research-composer.test.tsx
@@ -177,6 +177,7 @@ describe("research composer", () => {
 		expect(markup).toContain("Research could not be started.");
 		expect(markup).toContain("Start research");
 		expect(markup).toContain("Discard research question");
+		expect(markup).toMatch(/<textarea[^>]*class="field"/);
 		expect(markup).not.toContain(">Cancel<");
 		expect((markup.match(/textarea/g) ?? []).length).toBe(2);
 	});
diff --git a/packages/editor/src/widgets/research.tsx b/packages/editor/src/widgets/research.tsx
index ec93cd7c..1fc7f55f 100644
--- a/packages/editor/src/widgets/research.tsx
+++ b/packages/editor/src/widgets/research.tsx
@@ -161,6 +161,7 @@ export function ResearchComposer(
 			</div>
 			<textarea
 				autoFocus
+				className="field"
 				disabled={submitting}
 				id={id}
 				maxLength={4096}
diff --git a/packages/question/src/react/question-view.tsx b/packages/question/src/react/question-view.tsx
index aa4e4a4b..2c45c7b9 100644
--- a/packages/question/src/react/question-view.tsx
+++ b/packages/question/src/react/question-view.tsx
@@ -81,7 +81,7 @@ function Badges({ people }: { people: Collaborator[] }) {
 				<span
 					key={person.client}
 					title={`@${person.handle} is editing`}
-					className="max-w-28 truncate rounded-full bg-control px-1.5 py-0.5 text-sm font-medium text-text-tertiary"
+					className="max-w-28 truncate rounded-full bg-selected px-1.5 py-0.5 text-sm font-medium text-text-tertiary"
 				>
 					@{person.handle}
 				</span>

From 4aaffd57cfb638e0877f3fe2bff78cf79499bcac Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Fri, 28 Aug 2026 11:09:14 +0100
Subject: [PATCH 14/35] Add strong resting elevation role

---
 apps/web/src/design-audit/foundations.tsx    |  5 +++--
 apps/web/src/design-audit/specimens.test.tsx |  1 +
 apps/web/src/theme.css                       |  5 +++++
 apps/web/src/tokens.test.ts                  | 12 ++++++++++--
 packages/editor/src/styles.css               | 10 +++++-----
 5 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/design-audit/foundations.tsx b/apps/web/src/design-audit/foundations.tsx
index 82cf0d29..56286cb8 100644
--- a/apps/web/src/design-audit/foundations.tsx
+++ b/apps/web/src/design-audit/foundations.tsx
@@ -39,7 +39,8 @@ const RADII = [
 ] as const;
 
 const SHADOWS = [
-	["Resting", "--shadow-resting"],
+	["Subtle resting", "--shadow-resting"],
+	["Strong resting", "--shadow-resting-strong"],
 	["Raised", "--shadow-raised"],
 	["Overlay", "--shadow-overlay"],
 ] as const;
@@ -112,7 +113,7 @@ export function Foundations() {
 			<AuditPlate
 				item="shadows"
 				title="Elevation"
-				description="Resting, raised, and overlay depth roles."
+				description="Subtle and strong resting surfaces, followed by raised and overlay depth."
 			>
 				<div className="design-audit-token-row">
 					{SHADOWS.map(([label, token]) => (
diff --git a/apps/web/src/design-audit/specimens.test.tsx b/apps/web/src/design-audit/specimens.test.tsx
index 3205355f..785f50fc 100644
--- a/apps/web/src/design-audit/specimens.test.tsx
+++ b/apps/web/src/design-audit/specimens.test.tsx
@@ -16,6 +16,7 @@ describe("design audit specimens", () => {
 			expect(markup).toContain(`data-audit-item="${id}"`);
 		}
 		expect(markup).toContain("Consolidated exact duplicate");
+		expect(markup).toContain("Strong resting");
 		for (
 			let measurement of [
 				"13px / 20px line-height",
diff --git a/apps/web/src/theme.css b/apps/web/src/theme.css
index 0450f5f2..8cac9bf1 100644
--- a/apps/web/src/theme.css
+++ b/apps/web/src/theme.css
@@ -123,6 +123,11 @@
 		0 0 1px rgb(var(--shadow-color) / 3%),
 		0 1px 1px rgb(var(--shadow-color) / 3%),
 		0 3px 2px rgb(var(--shadow-color) / 2%);
+	--shadow-resting-strong:
+		0 0 1px rgb(var(--shadow-color) / 4%),
+		0 1px 2px rgb(var(--shadow-color) / 5%),
+		0 4px 3px rgb(var(--shadow-color) / 3%),
+		0 7px 4px rgb(var(--shadow-color) / 1%);
 	--shadow-raised:
 		0 1px 2px rgb(var(--shadow-color) / 6%),
 		0 3px 3px rgb(var(--shadow-color) / 5%),
diff --git a/apps/web/src/tokens.test.ts b/apps/web/src/tokens.test.ts
index 7c5a3d4e..5bdcb007 100644
--- a/apps/web/src/tokens.test.ts
+++ b/apps/web/src/tokens.test.ts
@@ -222,10 +222,18 @@ describe("edges and depth", () => {
 		expect(THEME).toMatch(/@media \(min-resolution: 2dppx\)[\s\S]+--edge-width:\s*0\.5px/);
 	});
 
-	it("provides exactly the three designed shadows", () => {
+	it("provides exactly the four designed shadows", () => {
 		let found = [...THEME.matchAll(/\n\s*(--shadow-(?!color)[\w-]+):/g)].map(match => match[1]);
-		expect(found).toEqual(["--shadow-resting", "--shadow-raised", "--shadow-overlay"]);
+		expect(found).toEqual([
+			"--shadow-resting",
+			"--shadow-resting-strong",
+			"--shadow-raised",
+			"--shadow-overlay",
+		]);
 		expect(declared("--shadow-color")).toBe("14 13 10");
+		expect(EDITOR_STYLES).toMatch(
+			/\[data-research-ready\]\s*\{\s*box-shadow:\s*var\(--shadow-resting-strong\)/,
+		);
 	});
 });
 
diff --git a/packages/editor/src/styles.css b/packages/editor/src/styles.css
index ecd516e2..6f8411c7 100644
--- a/packages/editor/src/styles.css
+++ b/packages/editor/src/styles.css
@@ -21,14 +21,14 @@
 	box-shadow: var(--shadow-resting);
 }
 
-.plan-content [data-research-ready] {
-	box-shadow: var(--shadow-raised);
+[data-research-ready] {
+	box-shadow: var(--shadow-resting-strong);
 	transition: box-shadow var(--duration-fast) var(--ease-out);
 }
 
-.plan-content [data-research-ready]:hover,
-.plan-content [data-research-ready]:focus-within {
-	box-shadow: var(--shadow-overlay);
+[data-research-ready]:hover,
+[data-research-ready]:focus-within {
+	box-shadow: var(--shadow-raised);
 }
 
 .plan-research-open {

From 0b819f4e09145a4409bad09d3062622232f4b628 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Fri, 28 Aug 2026 11:20:27 +0100
Subject: [PATCH 15/35] Replace Phosphor icons with Nucleo

---
 apps/web/package.json                         |  2 +-
 .../figma/navigation/sidebar-right-3-hide.svg | 19 -----
 .../web/src/assets/icons/navigation-xmark.svg |  7 --
 apps/web/src/assets/icons/send-arrow-up.svg   |  7 --
 .../src/assets/icons/tool-chevron-down.svg    |  5 --
 .../src/assets/icons/tool-chevron-right.svg   |  5 --
 apps/web/src/assets/icons/tool-loader.svg     | 26 ------
 apps/web/src/chat/transcript.test.tsx         |  4 +-
 apps/web/src/chat/transcript.tsx              | 15 ++--
 apps/web/src/design-audit/controls.tsx        |  6 +-
 apps/web/src/design-audit/foundations.tsx     |  2 +-
 apps/web/src/design-audit/icons.tsx           | 62 ++++++--------
 apps/web/src/design-audit/surfaces.tsx        | 39 +++++----
 apps/web/src/document-picker.tsx              |  4 +-
 apps/web/src/hosted.test.ts                   |  5 +-
 apps/web/src/icon-assets.test.ts              | 37 ++++++++-
 apps/web/src/project-sidebar-chrome.tsx       |  4 +-
 apps/web/src/project-sidebar.tsx              |  6 +-
 apps/web/src/repository-picker.tsx            |  4 +-
 apps/web/src/room-workspace.tsx               |  5 +-
 apps/web/src/theme.test.ts                    | 66 ++++++++++-----
 apps/web/src/tokens.test.ts                   |  1 +
 apps/web/src/workspace.tsx                    |  9 +-
 bun.lock                                      | 21 +++--
 packages/editor/package.json                  |  2 +-
 packages/editor/src/comment-layer.tsx         |  4 +-
 packages/editor/src/decisions.tsx             |  6 +-
 packages/editor/src/send-action.tsx           |  2 +-
 packages/editor/src/styles.css                |  2 +-
 packages/editor/src/widgets/callout.tsx       | 19 ++---
 .../src/widgets/research-composer.test.tsx    |  3 +-
 packages/editor/src/widgets/research.tsx      |  4 +-
 packages/icons/package.json                   | 22 +++++
 packages/icons/src/icon.tsx                   | 28 +++++++
 packages/icons/src/index.ts                   | 12 +++
 packages/icons/src/line.tsx                   | 79 ++++++++++++++++++
 packages/icons/src/system.tsx                 | 82 +++++++++++++++++++
 packages/icons/tsconfig.json                  | 12 +++
 packages/question/package.json                |  2 +-
 packages/question/src/react/question-view.tsx |  9 +-
 40 files changed, 434 insertions(+), 215 deletions(-)
 delete mode 100644 apps/web/src/assets/figma/navigation/sidebar-right-3-hide.svg
 delete mode 100644 apps/web/src/assets/icons/navigation-xmark.svg
 delete mode 100644 apps/web/src/assets/icons/send-arrow-up.svg
 delete mode 100644 apps/web/src/assets/icons/tool-chevron-down.svg
 delete mode 100644 apps/web/src/assets/icons/tool-chevron-right.svg
 delete mode 100644 apps/web/src/assets/icons/tool-loader.svg
 create mode 100644 packages/icons/package.json
 create mode 100644 packages/icons/src/icon.tsx
 create mode 100644 packages/icons/src/index.ts
 create mode 100644 packages/icons/src/line.tsx
 create mode 100644 packages/icons/src/system.tsx
 create mode 100644 packages/icons/tsconfig.json

diff --git a/apps/web/package.json b/apps/web/package.json
index d9417423..805c32c0 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -12,10 +12,10 @@
 	"dependencies": {
 		"@chopin/dialect": "workspace:*",
 		"@chopin/editor": "workspace:*",
+		"@chopin/icons": "workspace:*",
 		"@chopin/protocol": "workspace:*",
 		"@chopin/viewport": "workspace:*",
 		"@fontsource-variable/inter": "^5.3.0",
-		"@phosphor-icons/react": "^2.1.10",
 		"react": "catalog:react",
 		"react-dom": "catalog:react",
 		"react-markdown": "^10.1.0"
diff --git a/apps/web/src/assets/figma/navigation/sidebar-right-3-hide.svg b/apps/web/src/assets/figma/navigation/sidebar-right-3-hide.svg
deleted file mode 100644
index 821d0777..00000000
--- a/apps/web/src/assets/figma/navigation/sidebar-right-3-hide.svg
+++ /dev/null
@@ -1,19 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
-	<title>sidebar-right-3-hide</title><g
-		fill="none"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		stroke-width="1.5"
-		stroke="#212121"
-	><line x1="11.75" y1="12.5" x2="11.75" y2="15.25"></line><line
-			x1="11.75"
-			y1="2.75"
-			x2="11.75"
-			y2="5.5"
-		></line><polyline points="9.25 6.5 11.75 9 9.25 11.5"></polyline><line
-			x1="11.75"
-			y1="9"
-			x2="5.25"
-			y2="9"
-		></line><rect x="1.75" y="2.75" width="14.5" height="12.5" rx="2" ry="2"></rect></g>
-</svg>
diff --git a/apps/web/src/assets/icons/navigation-xmark.svg b/apps/web/src/assets/icons/navigation-xmark.svg
deleted file mode 100644
index 1feed2d9..00000000
--- a/apps/web/src/assets/icons/navigation-xmark.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
-	<title>xmark</title>
-	<g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="#212121">
-		<line x1="14" y1="4" x2="4" y2="14"></line>
-		<line x1="4" y1="4" x2="14" y2="14"></line>
-	</g>
-</svg>
diff --git a/apps/web/src/assets/icons/send-arrow-up.svg b/apps/web/src/assets/icons/send-arrow-up.svg
deleted file mode 100644
index f116a913..00000000
--- a/apps/web/src/assets/icons/send-arrow-up.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
-	<title>arrow-up</title><g fill="#212121"><path
-			d="M9,16c-.414,0-.75-.336-.75-.75V3c0-.414,.336-.75,.75-.75s.75,.336,.75,.75V15.25c0,.414-.336,.75-.75,.75Z"
-		></path><path
-			d="M13.25,7.75c-.192,0-.384-.073-.53-.22l-3.72-3.72-3.72,3.72c-.293,.293-.768,.293-1.061,0s-.293-.768,0-1.061L8.47,2.22c.293-.293,.768-.293,1.061,0l4.25,4.25c.293,.293,.293,.768,0,1.061-.146,.146-.338,.22-.53,.22Z"
-		></path></g>
-</svg>
diff --git a/apps/web/src/assets/icons/tool-chevron-down.svg b/apps/web/src/assets/icons/tool-chevron-down.svg
deleted file mode 100644
index 8181ae1e..00000000
--- a/apps/web/src/assets/icons/tool-chevron-down.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
-	<title>chevron-down</title><g fill="#212121"><path
-			d="M9,13.5c-.192,0-.384-.073-.53-.22L2.22,7.03c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l5.72,5.72,5.72-5.72c.293-.293,.768-.293,1.061,0s.293,.768,0,1.061l-6.25,6.25c-.146,.146-.338,.22-.53,.22Z"
-		></path></g>
-</svg>
diff --git a/apps/web/src/assets/icons/tool-chevron-right.svg b/apps/web/src/assets/icons/tool-chevron-right.svg
deleted file mode 100644
index dd3ee980..00000000
--- a/apps/web/src/assets/icons/tool-chevron-right.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
-	<title>chevron-right</title><g fill="#212121"><path
-			d="M13.28,8.47L7.03,2.22c-.293-.293-.768-.293-1.061,0s-.293,.768,0,1.061l5.72,5.72-5.72,5.72c-.293,.293-.293,.768,0,1.061,.146,.146,.338,.22,.53,.22s.384-.073,.53-.22l6.25-6.25c.293-.293,.293-.768,0-1.061Z"
-		></path></g>
-</svg>
diff --git a/apps/web/src/assets/icons/tool-loader.svg b/apps/web/src/assets/icons/tool-loader.svg
deleted file mode 100644
index 30925a97..00000000
--- a/apps/web/src/assets/icons/tool-loader.svg
+++ /dev/null
@@ -1,26 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
-	<title>loader</title><g fill="#212121"><path
-			d="M9,5c-.414,0-.75-.336-.75-.75V1.75c0-.414,.336-.75,.75-.75s.75,.336,.75,.75v2.5c0,.414-.336,.75-.75,.75Z"
-		></path><path
-			d="M12.359,6.391c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061l1.768-1.768c.293-.293,.768-.293,1.061,0s.293,.768,0,1.061l-1.768,1.768c-.146,.146-.338,.22-.53,.22Z"
-			opacity=".88"
-		></path><path
-			d="M16.25,9.75h-2.5c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75h2.5c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Z"
-			opacity=".75"
-		></path><path
-			d="M14.126,14.876c-.192,0-.384-.073-.53-.22l-1.768-1.768c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l1.768,1.768c.293,.293,.293,.768,0,1.061-.146,.146-.338,.22-.53,.22Z"
-			opacity=".63"
-		></path><path
-			d="M9,17c-.414,0-.75-.336-.75-.75v-2.5c0-.414,.336-.75,.75-.75s.75,.336,.75,.75v2.5c0,.414-.336,.75-.75,.75Z"
-			opacity=".5"
-		></path><path
-			d="M3.874,14.876c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061l1.768-1.768c.293-.293,.768-.293,1.061,0s.293,.768,0,1.061l-1.768,1.768c-.146,.146-.338,.22-.53,.22Z"
-			opacity=".38"
-		></path><path
-			d="M4.25,9.75H1.75c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75h2.5c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Z"
-			opacity=".25"
-		></path><path
-			d="M5.641,6.391c-.192,0-.384-.073-.53-.22l-1.768-1.768c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l1.768,1.768c.293,.293,.293,.768,0,1.061-.146,.146-.338,.22-.53,.22Z"
-			opacity=".13"
-		></path></g>
-</svg>
diff --git a/apps/web/src/chat/transcript.test.tsx b/apps/web/src/chat/transcript.test.tsx
index c6bdb80b..76e75ccb 100644
--- a/apps/web/src/chat/transcript.test.tsx
+++ b/apps/web/src/chat/transcript.test.tsx
@@ -35,6 +35,8 @@ test("queued messages use the standard icon-button glyph", () => {
 		}),
 	);
 
-	expect(markup).toMatch(/aria-label="Withdraw queued message"[^>]*>.*?width="16".*?height="16"/s);
+	expect(markup).toMatch(/aria-label="Withdraw queued message"[^>]*>.*?height="16"/s);
+	expect(markup).toMatch(/aria-label="Withdraw queued message"[^>]*>.*?width="16"/s);
+	expect(markup).toContain("<title>xmark</title>");
 	expect(markup).not.toContain(">×</button>");
 });
diff --git a/apps/web/src/chat/transcript.tsx b/apps/web/src/chat/transcript.tsx
index 26331fe5..897d3c2d 100644
--- a/apps/web/src/chat/transcript.tsx
+++ b/apps/web/src/chat/transcript.tsx
@@ -1,7 +1,7 @@
 /** The shared chat, grouped for reading rather than event delivery. */
 
 import { useEffect, useId, useRef, useState } from "react";
-import { SignInIcon, XIcon } from "@phosphor-icons/react";
+import { ArrowUpIcon, ChevronIcon, CloseIcon, LoaderIcon } from "@chopin/icons";
 
 import { AgentFace, Face, MotionDisclosure, MotionDisclosureIcon } from "@chopin/editor";
 
@@ -9,9 +9,6 @@ import { MessageMarkdown } from "./markdown";
 import { capitalize, displayText, duration, group, summarize, toolCopy } from "./model";
 import { motionContract } from "../motion-contract";
 import { motionImmediately } from "../motion-input";
-import toolChevronDown from "../assets/icons/tool-chevron-down.svg";
-import toolChevronRight from "../assets/icons/tool-chevron-right.svg";
-import toolLoader from "../assets/icons/tool-loader.svg";
 
 import type { Chat } from "@chopin/protocol";
 import type { Group, Message } from "./model";
@@ -28,7 +25,7 @@ function ToolRun({ tools }: { tools: Chat.Activity[] }) {
 	if (summary.state === "running") {
 		return (
 			<div className="flex min-h-7 min-w-0 flex-wrap items-center gap-2 py-1 text-sm text-text-quaternary">
-				<img alt="" className="chat-tool-loader size-[18px]" src={toolLoader} />
+				<LoaderIcon aria-hidden="true" className="chat-tool-loader" size={14} />
 				<span className="min-w-0 break-all font-mono text-text-secondary">{summary.name}</span>
 				<span className="tabular-nums">{summary.completed} done</span>
 			</div>
@@ -46,9 +43,9 @@ function ToolRun({ tools }: { tools: Chat.Activity[] }) {
 			>
 				<MotionDisclosureIcon
 					className="motion-feedback size-[14px]"
-					closed={<img alt="" src={toolChevronRight} />}
+					closed={<ChevronIcon aria-hidden="true" size={14} />}
 					open={open}
-					opened={<img alt="" src={toolChevronDown} />}
+					opened={<ChevronIcon aria-hidden="true" className="rotate-90" size={14} />}
 				/>
 				<span className="tabular-nums">
 					{summary.count} {summary.count === 1 ? "tool" : "tools"}
@@ -99,7 +96,7 @@ function SystemEntry({ item }: { item: Extract<Group, { kind: "system" }> }) {
 	return (
 		<div className="flex items-start gap-3 text-text-tertiary" data-chat-system>
 			<div className="shrink-0">
-				<SignInIcon aria-hidden="true" size={20} />
+				<ArrowUpIcon aria-hidden="true" className="rotate-90" size={20} />
 			</div>
 			<p className="m-0 min-w-0 break-words text-[14px] [overflow-wrap:anywhere]">
 				{displayText(item.text)}
@@ -140,7 +137,7 @@ function MessageBody(
 								title="Withdraw"
 								type="button"
 							>
-								<XIcon aria-hidden="true" size={16} />
+								<CloseIcon aria-hidden="true" size={16} />
 							</button>
 						)}
 				</div>
diff --git a/apps/web/src/design-audit/controls.tsx b/apps/web/src/design-audit/controls.tsx
index 74667aed..7a64a3cc 100644
--- a/apps/web/src/design-audit/controls.tsx
+++ b/apps/web/src/design-audit/controls.tsx
@@ -1,4 +1,4 @@
-import { CaretDownIcon, CheckIcon, PlusIcon } from "@phosphor-icons/react";
+import { CheckIcon, ChevronIcon, PlusIcon } from "@chopin/icons";
 
 import { AuditPlate, StateLabel } from "./frame";
 
@@ -249,7 +249,7 @@ export function Controls() {
 						className="field design-audit-dropdown-trigger"
 						type="button"
 					>
-						Active documents<CaretDownIcon aria-hidden="true" size={16} />
+						Active documents<ChevronIcon aria-hidden="true" className="rotate-90" size={16} />
 					</button>
 					<div className="design-audit-dropdown-open">
 						<button
@@ -257,7 +257,7 @@ export function Controls() {
 							className="field design-audit-dropdown-trigger"
 							type="button"
 						>
-							Active documents<CaretDownIcon aria-hidden="true" size={16} />
+							Active documents<ChevronIcon aria-hidden="true" className="rotate-90" size={16} />
 						</button>
 						<div
 							aria-label="Document collection"
diff --git a/apps/web/src/design-audit/foundations.tsx b/apps/web/src/design-audit/foundations.tsx
index 56286cb8..eb219b46 100644
--- a/apps/web/src/design-audit/foundations.tsx
+++ b/apps/web/src/design-audit/foundations.tsx
@@ -127,7 +127,7 @@ export function Foundations() {
 			<AuditPlate
 				item="icons"
 				title="Icons"
-				description="Every local SVG and Phosphor glyph currently used by the interface."
+				description="Every local SVG and shared Nucleo glyph currently used by the interface."
 			>
 				<IconCatalogue />
 			</AuditPlate>
diff --git a/apps/web/src/design-audit/icons.tsx b/apps/web/src/design-audit/icons.tsx
index 92fbb79f..66aa66cf 100644
--- a/apps/web/src/design-audit/icons.tsx
+++ b/apps/web/src/design-audit/icons.tsx
@@ -1,18 +1,17 @@
 import {
+	ArchiveIcon,
 	ArrowUpIcon,
-	CaretDownIcon,
-	CaretRightIcon,
-	ChatCircleIcon,
 	CheckIcon,
+	ChevronIcon,
+	CloseIcon,
+	DocumentIcon,
 	InfoIcon,
 	LightbulbIcon,
+	LoaderIcon,
+	MessageIcon,
 	PlusIcon,
-	SignInIcon,
-	SirenIcon,
-	StarFourIcon,
-	WarningIcon,
-	XIcon,
-} from "@phosphor-icons/react";
+	SearchIcon,
+} from "@chopin/icons";
 
 import addProject from "../assets/figma/navigation/add-project.svg";
 import archive from "../assets/figma/navigation/box-archive.svg";
@@ -21,20 +20,15 @@ import chopin from "../assets/figma/navigation/chopin.svg";
 import documentActions from "../assets/figma/navigation/document-actions.svg";
 import newDocument from "../assets/figma/navigation/new-document.svg";
 import search from "../assets/figma/navigation/search.svg";
-import hideSidebar from "../assets/figma/navigation/sidebar-right-3-hide.svg";
 import panelClose from "../assets/icons/panel-close.svg";
 import conversation from "../assets/icons/conversation.svg";
 import navigationChevron from "../assets/icons/navigation-chevron-right.svg";
-import navigationXmark from "../assets/icons/navigation-xmark.svg";
 import plannerStop from "../assets/icons/planner-stop.svg";
-import sendArrow from "../assets/icons/send-arrow-up.svg";
-import toolChevronDown from "../assets/icons/tool-chevron-down.svg";
-import toolChevronRight from "../assets/icons/tool-chevron-right.svg";
-import toolLoader from "../assets/icons/tool-loader.svg";
 import linkPlus from "../../../../packages/editor/src/assets/icons/link-plus.svg";
 import messagePlus from "../../../../packages/editor/src/assets/icons/message-plus.svg";
 
-import type { Icon } from "@phosphor-icons/react";
+import type { IconProps } from "@chopin/icons";
+import type { ComponentType } from "react";
 
 type LocalIcon = {
 	duplicate?: string;
@@ -55,33 +49,31 @@ const LOCAL_ICONS: readonly LocalIcon[] = [
 	{ name: "Document actions", source: documentActions },
 	{ name: "New document", source: newDocument },
 	{ name: "Search", source: search },
-	{ name: "Hide sidebar", source: hideSidebar },
 	{ name: "Conversation", source: conversation },
 	{ name: "Navigation chevron", source: navigationChevron },
-	{ name: "Navigation close", source: navigationXmark },
 	{ name: "Planner stop", source: plannerStop },
-	{ name: "Send", source: sendArrow },
-	{ name: "Tool chevron down", source: toolChevronDown },
-	{ name: "Tool chevron right", source: toolChevronRight },
-	{ name: "Tool loader", source: toolLoader },
 	{ name: "Link plus", source: linkPlus },
 	{ name: "Message plus", source: messagePlus },
 ];
 
-const PHOSPHOR_ICONS: readonly { icon: Icon; name: string }[] = [
+const NUCLEO_ICONS: readonly {
+	className?: string;
+	icon: ComponentType<IconProps>;
+	name: string;
+}[] = [
 	{ icon: ArrowUpIcon, name: "Arrow up" },
-	{ icon: CaretDownIcon, name: "Caret down" },
-	{ icon: CaretRightIcon, name: "Caret right" },
-	{ icon: ChatCircleIcon, name: "Chat circle" },
+	{ icon: ChevronIcon, name: "Chevron right" },
+	{ className: "rotate-90", icon: ChevronIcon, name: "Chevron down (rotated)" },
+	{ icon: MessageIcon, name: "Message" },
 	{ icon: CheckIcon, name: "Check" },
 	{ icon: InfoIcon, name: "Info" },
 	{ icon: LightbulbIcon, name: "Lightbulb" },
 	{ icon: PlusIcon, name: "Plus" },
-	{ icon: SignInIcon, name: "Sign in" },
-	{ icon: SirenIcon, name: "Siren" },
-	{ icon: StarFourIcon, name: "Important" },
-	{ icon: WarningIcon, name: "Warning" },
-	{ icon: XIcon, name: "Close" },
+	{ icon: CloseIcon, name: "Close" },
+	{ icon: ArchiveIcon, name: "Archive" },
+	{ icon: DocumentIcon, name: "Document" },
+	{ icon: SearchIcon, name: "Search" },
+	{ icon: LoaderIcon, name: "Loader" },
 ];
 
 export function IconCatalogue() {
@@ -109,12 +101,12 @@ export function IconCatalogue() {
 					</figure>
 				))}
 			</div>
-			<h4>Phosphor components</h4>
+			<h4>Nucleo components</h4>
 			<div className="design-audit-icon-grid">
-				{PHOSPHOR_ICONS.map(({ icon: Glyph, name }) => (
+				{NUCLEO_ICONS.map(({ className, icon: Glyph, name }) => (
 					<figure key={name}>
 						<span className="design-audit-icon-frame">
-							<Glyph aria-hidden="true" size={16} />
+							<Glyph aria-hidden="true" className={className} size={16} />
 						</span>
 						<figcaption>
 							<strong>{name}</strong>
@@ -125,7 +117,7 @@ export function IconCatalogue() {
 			<div className="design-audit-icon-sizes" aria-label="Icon size roles">
 				{([14, 16, 20] as const).map(size => (
 					<div key={size}>
-						<ChatCircleIcon aria-hidden="true" size={size} />
+						<MessageIcon aria-hidden="true" size={size} />
 						<span>{size}px</span>
 					</div>
 				))}
diff --git a/apps/web/src/design-audit/surfaces.tsx b/apps/web/src/design-audit/surfaces.tsx
index 13613bba..13a97319 100644
--- a/apps/web/src/design-audit/surfaces.tsx
+++ b/apps/web/src/design-audit/surfaces.tsx
@@ -1,14 +1,13 @@
 import {
 	ArchiveIcon,
-	CaretDownIcon,
-	CaretRightIcon,
-	ChatCircleIcon,
-	CheckCircleIcon,
-	CircleNotchIcon,
-	FileTextIcon,
-	MagnifyingGlassIcon,
+	CheckIcon,
+	ChevronIcon,
+	DocumentIcon,
+	LoaderIcon,
+	MessageIcon,
 	PlusIcon,
-} from "@phosphor-icons/react";
+	SearchIcon,
+} from "@chopin/icons";
 
 import { PlanStatus, SendAction } from "@chopin/editor";
 import { SidecarCard } from "../../../../packages/editor/src/card";
@@ -100,17 +99,17 @@ function Lists() {
 		>
 			<div className="design-audit-surface-list" role="listbox" aria-label="Documents">
 				<div role="option" aria-selected="false">
-					<FileTextIcon size={16} />Design notes
+					<DocumentIcon size={16} />Design notes
 				</div>
 				<div role="option" aria-selected="true">
-					<FileTextIcon size={16} />Design system audit<CheckCircleIcon size={16} />
+					<DocumentIcon size={16} />Design system audit<CheckIcon size={16} />
 				</div>
 				<div role="option" aria-selected="false" data-audit-state="hover">
-					<FileTextIcon size={16} />Editor architecture
+					<DocumentIcon size={16} />Editor architecture
 				</div>
 			</div>
 			<div className="design-audit-empty-row">
-				<MagnifyingGlassIcon size={20} />
+				<SearchIcon size={20} />
 				<span>No matching documents</span>
 			</div>
 		</AuditPlate>
@@ -132,19 +131,19 @@ function Navigation() {
 					</button>
 				</div>
 				<a href="#surfaces">
-					<FileTextIcon size={16} />Product direction
+					<DocumentIcon size={16} />Product direction
 				</a>
 				<a aria-current="page" href="#surfaces">
-					<FileTextIcon size={16} />Design system audit
+					<DocumentIcon size={16} />Design system audit
 				</a>
 				<a data-navigation-state="ancestor" href="#surfaces">
-					<CaretRightIcon size={14} />Research notes
+					<ChevronIcon size={14} />Research notes
 				</a>
 				<a data-navigation-state="archived" href="#surfaces">
 					<ArchiveIcon size={16} />Archived draft
 				</a>
 				<div className="design-audit-navigation-loading">
-					<CircleNotchIcon size={16} />Loading more…
+					<LoaderIcon size={16} />Loading more…
 				</div>
 			</nav>
 			<nav
@@ -232,7 +231,7 @@ function Decisions() {
 					className="btn btn-sm btn-ghost design-audit-resolved-toggle"
 					type="button"
 				>
-					<CaretDownIcon size={16} weight="bold" />
+					<ChevronIcon className="rotate-90" size={16} />
 					<span>3</span>
 					<span>resolved</span>
 				</button>
@@ -335,19 +334,19 @@ function Feedback() {
 			>
 				<div className="design-audit-empty-grid">
 					<div>
-						<FileTextIcon size={24} />
+						<DocumentIcon size={24} />
 						<strong>No documents yet</strong>
 						<span>Create the first shared document for this project.</span>
 						<button className="btn btn-md btn-primary" type="button">Create document</button>
 					</div>
 					<div>
-						<MagnifyingGlassIcon size={24} />
+						<SearchIcon size={24} />
 						<strong>No results</strong>
 						<span>Try a shorter search or clear the filters.</span>
 						<button className="btn btn-md btn-secondary" type="button">Clear search</button>
 					</div>
 					<div>
-						<ChatCircleIcon size={24} />
+						<MessageIcon size={24} />
 						<strong>Conversation unavailable</strong>
 						<span>Reconnect to keep collaborating.</span>
 						<button className="btn btn-md btn-secondary" type="button">Try again</button>
diff --git a/apps/web/src/document-picker.tsx b/apps/web/src/document-picker.tsx
index a0bdf29b..c226e664 100644
--- a/apps/web/src/document-picker.tsx
+++ b/apps/web/src/document-picker.tsx
@@ -1,4 +1,4 @@
-import { CaretDownIcon, CheckIcon, PlusIcon } from "@phosphor-icons/react";
+import { CheckIcon, ChevronIcon, PlusIcon } from "@chopin/icons";
 import { useTransitionPresence } from "@chopin/editor/transition-presence";
 import { documentPath } from "@chopin/protocol/document-url";
 import { createPortal } from "react-dom";
@@ -359,7 +359,7 @@ export function DocumentPicker(
 				type="button"
 			>
 				<span className="truncate">{current.title}</span>
-				<CaretDownIcon aria-hidden="true" className="shrink-0" size={14} />
+				<ChevronIcon aria-hidden="true" className="shrink-0 rotate-90" size={14} />
 			</button>
 			{popup}
 		</>
diff --git a/apps/web/src/hosted.test.ts b/apps/web/src/hosted.test.ts
index c0a9aed1..a698ac89 100644
--- a/apps/web/src/hosted.test.ts
+++ b/apps/web/src/hosted.test.ts
@@ -403,8 +403,9 @@ describe("anchored child lifecycle", () => {
 
 		expect(child).toContain('aria-label="Close Source review"');
 		expect(child).toContain('data-child-document-close="true"');
-		expect(child).toContain("navigation-xmark.svg");
-		expect(child).toContain('class="size-[16px]"');
+		expect(child).toContain("<title>xmark</title>");
+		expect(child).toContain('height="16"');
+		expect(child).toContain('width="16"');
 		expect(parent).not.toContain("data-child-document-close");
 	});
 
diff --git a/apps/web/src/icon-assets.test.ts b/apps/web/src/icon-assets.test.ts
index 88c1765d..ef46dcbf 100644
--- a/apps/web/src/icon-assets.test.ts
+++ b/apps/web/src/icon-assets.test.ts
@@ -1,8 +1,19 @@
 import { expect, test } from "bun:test";
-import { existsSync, readFileSync } from "node:fs";
+import { existsSync, readdirSync, readFileSync, statSync } from "node:fs";
 import { join } from "node:path";
 
 let root = import.meta.dir;
+let repository = join(root, "../../..");
+
+function sourceFiles(directory: string, found: string[] = []): string[] {
+	for (let entry of readdirSync(directory)) {
+		if (entry === "node_modules" || entry === "dist" || entry.startsWith(".")) continue;
+		let path = join(directory, entry);
+		if (statSync(path).isDirectory()) sourceFiles(path, found);
+		else if (entry.endsWith(".tsx") || entry === "package.json") found.push(path);
+	}
+	return found;
+}
 
 test("the sidebar and conversation share one panel-close asset", () => {
 	let sidebar = readFileSync(join(root, "project-sidebar.tsx"), "utf8");
@@ -13,3 +24,27 @@ test("the sidebar and conversation share one panel-close asset", () => {
 	expect(existsSync(join(root, "assets/figma/navigation/collapse.svg"))).toBe(false);
 	expect(existsSync(join(root, "assets/icons/conversation-close.svg"))).toBe(false);
 });
+
+test("the interface uses only the shared Nucleo icon family", () => {
+	let files = sourceFiles(join(repository, "apps")).concat(
+		sourceFiles(join(repository, "packages")),
+	);
+	for (let file of files) expect(readFileSync(file, "utf8")).not.toContain("@phosphor-icons/react");
+
+	expect(existsSync(join(repository, "packages/icons/src/line.tsx"))).toBe(true);
+	expect(readFileSync(join(repository, "packages/icons/src/line.tsx"), "utf8")).toContain(
+		"M9,1.75C4.996,1.75",
+	);
+});
+
+test("directional controls reuse one chevron and one panel icon", () => {
+	let room = readFileSync(join(root, "room-workspace.tsx"), "utf8");
+	let sidebarChrome = readFileSync(join(root, "project-sidebar-chrome.tsx"), "utf8");
+
+	expect(room).toContain("navigation-chevron-right.svg");
+	expect(room).not.toContain("tool-chevron-down.svg");
+	expect(sidebarChrome).toContain("assets/icons/panel-close.svg");
+	expect(existsSync(join(root, "assets/icons/tool-chevron-down.svg"))).toBe(false);
+	expect(existsSync(join(root, "assets/icons/tool-chevron-right.svg"))).toBe(false);
+	expect(existsSync(join(root, "assets/figma/navigation/sidebar-right-3-hide.svg"))).toBe(false);
+});
diff --git a/apps/web/src/project-sidebar-chrome.tsx b/apps/web/src/project-sidebar-chrome.tsx
index 2481e31b..36533b31 100644
--- a/apps/web/src/project-sidebar-chrome.tsx
+++ b/apps/web/src/project-sidebar-chrome.tsx
@@ -1,4 +1,4 @@
-import sidebarOpenIcon from "./assets/figma/navigation/sidebar-right-3-hide.svg";
+import panelIcon from "./assets/icons/panel-close.svg";
 
 import type { RefObject } from "react";
 
@@ -23,7 +23,7 @@ export function ProjectSidebarExpandButton(
 			ref={buttonRef}
 			type="button"
 		>
-			<img alt="" height="14" src={sidebarOpenIcon} width="14" />
+			<img alt="" className="rotate-180" height="14" src={panelIcon} width="14" />
 		</button>
 	);
 }
diff --git a/apps/web/src/project-sidebar.tsx b/apps/web/src/project-sidebar.tsx
index daed4b1b..f4b497db 100644
--- a/apps/web/src/project-sidebar.tsx
+++ b/apps/web/src/project-sidebar.tsx
@@ -14,7 +14,7 @@ import { MotionDisclosure, MotionDisclosureIcon } from "@chopin/editor";
 import { childDocumentPath, documentPath } from "@chopin/protocol/document-url";
 
 import { useId, useRef, useState } from "react";
-import { CaretDownIcon, CaretRightIcon } from "@phosphor-icons/react";
+import { ChevronIcon } from "@chopin/icons";
 import type * as Api from "./api";
 import type { DocumentAction } from "./document-actions-menu";
 import type { ProjectDocuments } from "./document-actions";
@@ -223,9 +223,9 @@ function Project(
 				>
 					<MotionDisclosureIcon
 						className="motion-feedback shrink-0 opacity-50"
-						closed={<CaretRightIcon size={14} weight="bold" />}
+						closed={<ChevronIcon size={14} />}
 						open={expanded}
-						opened={<CaretDownIcon size={14} weight="bold" />}
+						opened={<ChevronIcon className="rotate-90" size={14} />}
 					/>
 					<NavigationIcon className="opacity-50" src={bookBookmarkIcon} />
 					<span className="truncate text-sm font-bold">{label}</span>
diff --git a/apps/web/src/repository-picker.tsx b/apps/web/src/repository-picker.tsx
index 16c18a93..884827d6 100644
--- a/apps/web/src/repository-picker.tsx
+++ b/apps/web/src/repository-picker.tsx
@@ -1,4 +1,4 @@
-import { CaretDownIcon, CheckIcon } from "@phosphor-icons/react";
+import { CheckIcon, ChevronIcon } from "@chopin/icons";
 import { useTransitionPresence } from "@chopin/editor/transition-presence";
 import { documentsPath } from "@chopin/protocol/document-url";
 import { createPortal } from "react-dom";
@@ -423,7 +423,7 @@ export function RepositoryPicker(
 						? current?.name ?? "Choose repository"
 						: current?.fullName ?? "Choose repository"}
 				</span>
-				<CaretDownIcon aria-hidden="true" className="shrink-0" size={14} />
+				<ChevronIcon aria-hidden="true" className="shrink-0 rotate-90" size={14} />
 			</button>
 			{popup}
 		</>
diff --git a/apps/web/src/room-workspace.tsx b/apps/web/src/room-workspace.tsx
index 43fab1a4..267d5258 100644
--- a/apps/web/src/room-workspace.tsx
+++ b/apps/web/src/room-workspace.tsx
@@ -17,7 +17,6 @@ import {
 
 import bookBookmarkIcon from "./assets/figma/navigation/book-bookmark.svg";
 import navigationChevronRight from "./assets/icons/navigation-chevron-right.svg";
-import chevronDownIcon from "./assets/icons/tool-chevron-down.svg";
 import { Chat } from "./chat/chat";
 import { rememberChannel } from "./channel-recovery";
 import { decisionAttention, DecisionViewControl } from "./decision-view-control";
@@ -117,8 +116,8 @@ export function Header(
 									<img
 										alt=""
 										aria-hidden="true"
-										className="size-3.5 opacity-50"
-										src={chevronDownIcon}
+										className="size-3.5 rotate-90 opacity-50"
+										src={navigationChevronRight}
 									/>
 								</>
 							}
diff --git a/apps/web/src/theme.test.ts b/apps/web/src/theme.test.ts
index bfe7577d..3af05157 100644
--- a/apps/web/src/theme.test.ts
+++ b/apps/web/src/theme.test.ts
@@ -22,7 +22,7 @@ import { describe, expect, it } from "bun:test";
 import { readFileSync } from "node:fs";
 import { join } from "node:path";
 
-type Oklch = { l: number; c: number; h: number };
+type Rgb = { blue: number; green: number; red: number };
 
 const THEME = readFileSync(join(import.meta.dir, "theme.css"), "utf8");
 const NAVIGATION = readFileSync(join(import.meta.dir, "navigation.css"), "utf8");
@@ -35,39 +35,57 @@ const FEEDBACK = readFileSync(
 	"utf8",
 );
 
+function encode(value: number): number {
+	return value <= 0.0031308
+		? 12.92 * value
+		: 1.055 * Math.pow(Math.max(value, 0), 1 / 2.4) - 0.055;
+}
+
+function decode(value: number): number {
+	return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+}
+
 /** A colour token, resolving semantic aliases onto the primitive palette. */
-function token(name: string): Oklch {
+function token(name: string): Rgb {
 	let declaration = new RegExp(`--color-${name}:\\s*([^;]+);`).exec(THEME)?.[1]?.trim();
 	if (!declaration) throw new Error(`no --color-${name} in the theme`);
 	let alias = /^var\(--color-([\w-]+)\)$/.exec(declaration);
 	if (alias) return token(alias[1]!);
+	let transparentMix = /^color-mix\(in srgb, var\(--color-([\w-]+)\) ([\d.]+)%, transparent\)$/
+		.exec(declaration);
+	if (transparentMix) {
+		let foreground = token(transparentMix[1]!);
+		let background = token("page");
+		let alpha = Number(transparentMix[2]) / 100;
+		return {
+			blue: foreground.blue * alpha + background.blue * (1 - alpha),
+			green: foreground.green * alpha + background.green * (1 - alpha),
+			red: foreground.red * alpha + background.red * (1 - alpha),
+		};
+	}
 	let found = /^oklch\(([\d.]+)\s+([\d.]+)\s+([\d.]+)\)$/.exec(declaration);
 	if (!found) throw new Error(`no --color-${name} in the theme`);
-	return { l: Number(found[1]), c: Number(found[2]), h: Number(found[3]) };
-}
-
-function hex({ c, h, l }: Oklch): string {
+	let l = Number(found[1]);
+	let c = Number(found[2]);
+	let h = Number(found[3]);
 	let radians = (h * Math.PI) / 180;
 	let a = c * Math.cos(radians);
 	let b = c * Math.sin(radians);
-
 	let long = (l + 0.3963377774 * a + 0.2158037573 * b) ** 3;
 	let medium = (l - 0.1055613458 * a - 0.0638541728 * b) ** 3;
 	let short = (l - 0.0894841775 * a - 1.291485548 * b) ** 3;
+	return {
+		blue: encode(-0.0041960863 * long - 0.7034186147 * medium + 1.707614701 * short),
+		green: encode(-1.2684380046 * long + 2.6097574011 * medium - 0.3413193965 * short),
+		red: encode(4.0767416621 * long - 3.3077115913 * medium + 0.2309699292 * short),
+	};
+}
 
-	let channels = [
-		4.0767416621 * long - 3.3077115913 * medium + 0.2309699292 * short,
-		-1.2684380046 * long + 2.6097574011 * medium - 0.3413193965 * short,
-		-0.0041960863 * long - 0.7034186147 * medium + 1.707614701 * short,
-	];
-
+function hex({ blue, green, red }: Rgb): string {
 	return `#${
-		channels
+		[red, green, blue]
 			.map(value => {
-				let encoded = value <= 0.0031308
-					? 12.92 * value
-					: 1.055 * Math.pow(Math.max(value, 0), 1 / 2.4) - 0.055;
-				return Math.round(Math.min(1, Math.max(0, encoded)) * 255)
+				return Math.round(Math.min(1, Math.max(0, value)) * 255)
 					.toString(16)
 					.padStart(2, "0");
 			})
@@ -75,6 +93,16 @@ function hex({ c, h, l }: Oklch): string {
 	}`;
 }
 
+function lightness({ blue, green, red }: Rgb): number {
+	let r = decode(red);
+	let g = decode(green);
+	let b = decode(blue);
+	let long = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+	let medium = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+	let short = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+	return 0.2104542553 * long + 0.793617785 * medium - 0.0040720468 * short;
+}
+
 type Mark = { name: string; token: string; recorded: string };
 
 /** Every highlight the stylesheet declares, with the colour written beside it. */
@@ -112,7 +140,7 @@ describe("marking prose", () => {
 	it("paints each one far enough from the page to be seen", () => {
 		for (let mark of marks()) {
 			let painted = token(mark.token);
-			let distance = page.l - painted.l;
+			let distance = lightness(page) - lightness(painted);
 
 			// Asserted as an object so a failure names the mark and what it
 			// renders as, rather than reporting a bare number nobody can place.
diff --git a/apps/web/src/tokens.test.ts b/apps/web/src/tokens.test.ts
index 5bdcb007..145b17cd 100644
--- a/apps/web/src/tokens.test.ts
+++ b/apps/web/src/tokens.test.ts
@@ -337,6 +337,7 @@ describe("consumer roles", () => {
 	it("uses the shared icon library instead of literal interface artwork", () => {
 		let offenders: string[] = [];
 		for (let file of [...sources(join(ROOT, "apps")), ...sources(join(ROOT, "packages"))]) {
+			if (file.startsWith(join(ROOT, "packages/icons/"))) continue;
 			let content = withoutComments(readFileSync(file, "utf8"));
 			if (/<svg\b/.test(content) || /[\u{1F300}-\u{1FAFF}]/u.test(content)) {
 				offenders.push(relative(ROOT, file));
diff --git a/apps/web/src/workspace.tsx b/apps/web/src/workspace.tsx
index 09f045b6..25a8f20c 100644
--- a/apps/web/src/workspace.tsx
+++ b/apps/web/src/workspace.tsx
@@ -3,6 +3,7 @@
 import { useEffect, useId, useLayoutEffect, useReducer, useRef, useSyncExternalStore } from "react";
 import { ContentSwapLayer } from "@chopin/editor/content-swap";
 import { useTransitionPresence } from "@chopin/editor/transition-presence";
+import { CloseIcon } from "@chopin/icons";
 
 import {
 	initialWorkspaceState,
@@ -16,7 +17,6 @@ import {
 } from "./workspace-model";
 import chatCloseIcon from "./assets/icons/panel-close.svg";
 import chatIcon from "./assets/icons/chat.svg";
-import navigationXmark from "./assets/icons/navigation-xmark.svg";
 import { ResizeHandle, usePaneWidth } from "./resizable-pane";
 import { motionContract } from "./motion-contract";
 import { motionImmediately } from "./motion-input";
@@ -430,12 +430,7 @@ export function Workspace(
 											onClick={childPresentation.onClose}
 											type="button"
 										>
-											<img
-												alt=""
-												aria-hidden="true"
-												className="size-[16px]"
-												src={navigationXmark}
-											/>
+											<CloseIcon aria-hidden="true" size={16} />
 										</button>
 									</div>
 								)}
diff --git a/bun.lock b/bun.lock
index 876e4e15..9d143f5b 100644
--- a/bun.lock
+++ b/bun.lock
@@ -38,10 +38,10 @@
       "dependencies": {
         "@chopin/dialect": "workspace:*",
         "@chopin/editor": "workspace:*",
+        "@chopin/icons": "workspace:*",
         "@chopin/protocol": "workspace:*",
         "@chopin/viewport": "workspace:*",
         "@fontsource-variable/inter": "^5.3.0",
-        "@phosphor-icons/react": "^2.1.10",
         "react": "catalog:react",
         "react-dom": "catalog:react",
         "react-markdown": "^10.1.0",
@@ -102,6 +102,7 @@
       "dependencies": {
         "@base-ui/react": "1.7.0",
         "@chopin/dialect": "workspace:*",
+        "@chopin/icons": "workspace:*",
         "@chopin/protocol": "workspace:*",
         "@chopin/question": "workspace:*",
         "@chopin/viewport": "workspace:*",
@@ -114,7 +115,6 @@
         "@lexical/yjs": "catalog:mdx",
         "@mdxeditor/editor": "catalog:mdx",
         "@mdxeditor/gurx": "catalog:mdx",
-        "@phosphor-icons/react": "^2.1.10",
         "@pierre/diffs": "catalog:diffs",
         "@radix-ui/react-select": "2.3.7",
         "katex": "catalog:mdx",
@@ -134,6 +134,17 @@
         "react-dom": "catalog:react",
       },
     },
+    "packages/icons": {
+      "name": "@chopin/icons",
+      "version": "0.0.0",
+      "devDependencies": {
+        "@types/bun": "catalog:bun",
+        "@types/react": "catalog:react",
+      },
+      "peerDependencies": {
+        "react": "catalog:react",
+      },
+    },
     "packages/protocol": {
       "name": "@chopin/protocol",
       "version": "0.0.0",
@@ -142,8 +153,8 @@
       "name": "@chopin/question",
       "version": "0.0.0",
       "dependencies": {
+        "@chopin/icons": "workspace:*",
         "@chopin/protocol": "workspace:*",
-        "@phosphor-icons/react": "^2.1.10",
         "json-joy": "catalog:mdx",
       },
       "devDependencies": {
@@ -274,6 +285,8 @@
 
     "@chopin/editor": ["@chopin/editor@workspace:packages/editor"],
 
+    "@chopin/icons": ["@chopin/icons@workspace:packages/icons"],
+
     "@chopin/protocol": ["@chopin/protocol@workspace:packages/protocol"],
 
     "@chopin/question": ["@chopin/question@workspace:packages/question"],
@@ -636,8 +649,6 @@
 
     "@oxlint/binding-win32-x64-msvc": ["@oxlint/binding-win32-x64-msvc@1.51.0", "", { "os": "win32", "cpu": "x64" }, "sha512-Q14+fOGb9T28nWF/0EUsYqERiRA7cl1oy4TJrGmLaqhm+aO2cV+JttboHI3CbdeMCAyDI1+NoSlrM7Melhp/cw=="],
 
-    "@phosphor-icons/react": ["@phosphor-icons/react@2.1.10", "", { "peerDependencies": { "react": ">= 16.8", "react-dom": ">= 16.8" } }, "sha512-vt8Tvq8GLjheAZZYa+YG/pW7HDbov8El/MANW8pOAz4eGxrwhnbfrQZq0Cp4q8zBEu8NIhHdnr+r8thnfRSNYA=="],
-
     "@pierre/diffs": ["@pierre/diffs@1.3.0", "", { "dependencies": { "@pierre/theme": "2.0.0", "@pierre/theming": "1.0.0", "@shikijs/transformers": "^3.0.0 || ^4.0.0", "diff": "9.0.0", "hast-util-to-html": "9.0.5", "lru_map": "0.4.1", "shiki": "^3.0.0 || ^4.0.0" }, "peerDependencies": { "react": "^18.3.1 || ^19.0.0", "react-dom": "^18.3.1 || ^19.0.0" } }, "sha512-eBvCN80zwGi3OxSBfVHJcfGvtM7LDP0eR5z7Gn71HMhq9AbWAjqOlQMjTenXDbGOTpuEGajJtEGTv1T4XXKcog=="],
 
     "@pierre/theme": ["@pierre/theme@2.0.0", "", {}, "sha512-yNDd9GYLQl1mEUJR8AneJ5e4ohLIHQd/wZLWr4fagt78vS2RwwZNW530vVgHqXFAyFVcFlRmGUD5ramXH46OXw=="],
diff --git a/packages/editor/package.json b/packages/editor/package.json
index 88f97a8b..90003b76 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -32,6 +32,7 @@
 	"dependencies": {
 		"@base-ui/react": "1.7.0",
 		"@chopin/dialect": "workspace:*",
+		"@chopin/icons": "workspace:*",
 		"@chopin/protocol": "workspace:*",
 		"@chopin/question": "workspace:*",
 		"@chopin/viewport": "workspace:*",
@@ -44,7 +45,6 @@
 		"@lexical/yjs": "catalog:mdx",
 		"@mdxeditor/editor": "catalog:mdx",
 		"@mdxeditor/gurx": "catalog:mdx",
-		"@phosphor-icons/react": "^2.1.10",
 		"@pierre/diffs": "catalog:diffs",
 		"@radix-ui/react-select": "2.3.7",
 		"katex": "catalog:mdx",
diff --git a/packages/editor/src/comment-layer.tsx b/packages/editor/src/comment-layer.tsx
index 328c99f1..e66cbf0a 100644
--- a/packages/editor/src/comment-layer.tsx
+++ b/packages/editor/src/comment-layer.tsx
@@ -3,7 +3,7 @@
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { ChatCircleIcon } from "@phosphor-icons/react";
+import { MessageIcon } from "@chopin/icons";
 import { useCellValue } from "@mdxeditor/gurx";
 
 import { DraftCard, ThreadCard } from "./comments";
@@ -702,7 +702,7 @@ export function CommentLayer({ store }: { store: ThreadStore }) {
 							style={button}
 							type="button"
 						>
-							<ChatCircleIcon aria-hidden="true" size={14} />
+							<MessageIcon aria-hidden="true" size={14} />
 						</button>
 						<CommentSurface
 							compact={false}
diff --git a/packages/editor/src/decisions.tsx b/packages/editor/src/decisions.tsx
index 0ed88521..d5ab95aa 100644
--- a/packages/editor/src/decisions.tsx
+++ b/packages/editor/src/decisions.tsx
@@ -7,7 +7,7 @@
  */
 
 import { useEffect, useId, useRef, useState } from "react";
-import { CaretDownIcon, CaretRightIcon } from "@phosphor-icons/react";
+import { ChevronIcon } from "@chopin/icons";
 
 import { MotionDisclosure, MotionDisclosureIcon } from "./disclosure-motion";
 import { useQuestionnaires } from "./questionnaires";
@@ -180,9 +180,9 @@ export function Decisions(
 						>
 							<MotionDisclosureIcon
 								className="editor-motion-feedback"
-								closed={<CaretRightIcon size={16} weight="bold" />}
+								closed={<ChevronIcon size={16} />}
 								open={history}
-								opened={<CaretDownIcon size={16} weight="bold" />}
+								opened={<ChevronIcon className="rotate-90" size={16} />}
 							/>
 							<span className="tabular-nums">{resolved}</span>
 							<span>resolved</span>
diff --git a/packages/editor/src/send-action.tsx b/packages/editor/src/send-action.tsx
index b12e30fc..2fe368be 100644
--- a/packages/editor/src/send-action.tsx
+++ b/packages/editor/src/send-action.tsx
@@ -1,4 +1,4 @@
-import { ArrowUpIcon } from "@phosphor-icons/react";
+import { ArrowUpIcon } from "@chopin/icons";
 
 export function SendAction(
 	{ busy, label, disabled, onClick }: {
diff --git a/packages/editor/src/styles.css b/packages/editor/src/styles.css
index 6f8411c7..06e6e428 100644
--- a/packages/editor/src/styles.css
+++ b/packages/editor/src/styles.css
@@ -561,7 +561,7 @@
  * a rendered wash, not as an abstract percentage of a darker accent.
  */
 ::highlight(plan-related) {
-	/* #dcf6fa */
+	/* #b4d4d8 */
 	background-color: var(--color-brand-wash);
 }
 
diff --git a/packages/editor/src/widgets/callout.tsx b/packages/editor/src/widgets/callout.tsx
index 584eb8ac..badc04ec 100644
--- a/packages/editor/src/widgets/callout.tsx
+++ b/packages/editor/src/widgets/callout.tsx
@@ -9,14 +9,7 @@
 
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import {
-	CheckIcon,
-	InfoIcon,
-	LightbulbIcon,
-	SirenIcon,
-	StarFourIcon,
-	WarningIcon,
-} from "@phosphor-icons/react";
+import { CheckIcon, InfoIcon, LightbulbIcon } from "@chopin/icons";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { readOnly$ } from "@mdxeditor/editor";
 import { useCellValue } from "@mdxeditor/gurx";
@@ -40,18 +33,18 @@ const LABELS: Record<CalloutType, string> = {
 };
 
 function TypeIcon({ type, size = 17 }: { type: CalloutType; size?: number }) {
-	let props = { "aria-hidden": true, size, weight: "bold" } as const;
+	let props = { "aria-hidden": true, size } as const;
 	switch (type) {
 		case "note":
 			return <InfoIcon {...props} />;
 		case "tip":
 			return <LightbulbIcon {...props} />;
 		case "important":
-			return <StarFourIcon {...props} />;
+			return <CheckIcon {...props} />;
 		case "warning":
-			return <WarningIcon {...props} />;
+			return <InfoIcon {...props} />;
 		case "danger":
-			return <SirenIcon {...props} />;
+			return <InfoIcon {...props} />;
 	}
 }
 
@@ -291,7 +284,7 @@ function Heading(
 									<TypeIcon type={type} size={16} />
 									<Select.ItemText>{LABELS[type]}</Select.ItemText>
 									<Select.ItemIndicator asChild>
-										<CheckIcon aria-hidden="true" size={14} weight="bold" />
+										<CheckIcon aria-hidden="true" size={14} />
 									</Select.ItemIndicator>
 								</Select.Item>
 							))}
diff --git a/packages/editor/src/widgets/research-composer.test.tsx b/packages/editor/src/widgets/research-composer.test.tsx
index 1f8af617..834a20eb 100644
--- a/packages/editor/src/widgets/research-composer.test.tsx
+++ b/packages/editor/src/widgets/research-composer.test.tsx
@@ -160,7 +160,8 @@ describe("research composer", () => {
 		expect(markup).toContain('title="Start research"');
 		expect(markup).toContain("send-action btn btn-icon btn-primary rounded-full");
 		expect(markup).toContain('aria-hidden="true"');
-		expect(markup).toContain('width="16" height="16"');
+		expect(markup).toContain('height="16"');
+		expect(markup).toContain('width="16"');
 	});
 
 	it("keeps one exact brief actionable after a failed create", () => {
diff --git a/packages/editor/src/widgets/research.tsx b/packages/editor/src/widgets/research.tsx
index 1fc7f55f..dce4b5b4 100644
--- a/packages/editor/src/widgets/research.tsx
+++ b/packages/editor/src/widgets/research.tsx
@@ -18,7 +18,7 @@ import { SidecarCard } from "../card";
 import { SendAction } from "../send-action";
 import { widgets$ } from "../widget-options";
 import { $isResearchNode } from "@chopin/dialect";
-import { XIcon } from "@phosphor-icons/react";
+import { CloseIcon } from "@chopin/icons";
 
 import type { FormEvent } from "react";
 import type { Research } from "@chopin/protocol";
@@ -155,7 +155,7 @@ export function ResearchComposer(
 						title="Discard research question"
 						type="button"
 					>
-						<XIcon aria-hidden="true" size={16} />
+						<CloseIcon aria-hidden="true" size={16} />
 					</button>
 				)}
 			</div>
diff --git a/packages/icons/package.json b/packages/icons/package.json
new file mode 100644
index 00000000..c11775f4
--- /dev/null
+++ b/packages/icons/package.json
@@ -0,0 +1,22 @@
+{
+	"name": "@chopin/icons",
+	"private": true,
+	"version": "0.0.0",
+	"type": "module",
+	"scripts": {
+		"types": "tsgo --noEmit --skipLibCheck"
+	},
+	"exports": {
+		".": {
+			"types": "./src/index.ts",
+			"default": "./src/index.ts"
+		}
+	},
+	"peerDependencies": {
+		"react": "catalog:react"
+	},
+	"devDependencies": {
+		"@types/bun": "catalog:bun",
+		"@types/react": "catalog:react"
+	}
+}
diff --git a/packages/icons/src/icon.tsx b/packages/icons/src/icon.tsx
new file mode 100644
index 00000000..dafa2abb
--- /dev/null
+++ b/packages/icons/src/icon.tsx
@@ -0,0 +1,28 @@
+import type { SVGProps } from "react";
+
+export type IconProps = Omit<SVGProps<SVGSVGElement>, "height" | "width"> & {
+	size?: number;
+};
+
+export function LineIcon(
+	{ children, size = 18, title, viewBox = "0 0 18 18", ...props }: IconProps & {
+		children: React.ReactNode;
+		title?: string;
+		viewBox?: string;
+	},
+) {
+	return (
+		<svg height={size} viewBox={viewBox} width={size} {...props}>
+			{title && <title>{title}</title>}
+			<g
+				fill="none"
+				stroke="currentColor"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+				strokeWidth="1.5"
+			>
+				{children}
+			</g>
+		</svg>
+	);
+}
diff --git a/packages/icons/src/index.ts b/packages/icons/src/index.ts
new file mode 100644
index 00000000..b2660456
--- /dev/null
+++ b/packages/icons/src/index.ts
@@ -0,0 +1,12 @@
+export type { IconProps } from "./icon";
+export {
+	ArrowUpIcon,
+	CheckIcon,
+	ChevronIcon,
+	CloseIcon,
+	InfoIcon,
+	LightbulbIcon,
+	MessageIcon,
+	PlusIcon,
+} from "./line";
+export { ArchiveIcon, DocumentIcon, LoaderIcon, SearchIcon } from "./system";
diff --git a/packages/icons/src/line.tsx b/packages/icons/src/line.tsx
new file mode 100644
index 00000000..a2148f57
--- /dev/null
+++ b/packages/icons/src/line.tsx
@@ -0,0 +1,79 @@
+import { LineIcon } from "./icon";
+
+import type { IconProps } from "./icon";
+
+export function ArrowUpIcon(props: IconProps) {
+	return (
+		<LineIcon title="arrow-up" {...props}>
+			<line x1="9" x2="9" y1="2.75" y2="15.25" />
+			<polyline points="4.75 7 9 2.75 13.25 7" />
+		</LineIcon>
+	);
+}
+
+export function ChevronIcon(props: IconProps) {
+	return (
+		<LineIcon title="chevron-right" {...props}>
+			<polyline points="6.5 2.75 12.75 9 6.5 15.25" />
+		</LineIcon>
+	);
+}
+
+export function MessageIcon(props: IconProps) {
+	return (
+		<LineIcon title="msg" {...props}>
+			<path d="M9,1.75C4.996,1.75,1.75,4.996,1.75,9c0,1.319,.358,2.552,.973,3.617,.43,.806-.053,2.712-.973,3.633,1.25,.068,2.897-.497,3.633-.973,.489,.282,1.264,.656,2.279,.848,.433,.082,.881,.125,1.338,.125,4.004,0,7.25-3.246,7.25-7.25S13.004,1.75,9,1.75Z" />
+		</LineIcon>
+	);
+}
+
+export function CheckIcon(props: IconProps) {
+	return (
+		<LineIcon title="check-3" {...props}>
+			<path d="M2.75,9c1.54,1.537,2.745,3.312,3.75,5.25,2.333-4.417,5.25-7.917,8.75-10.5" />
+		</LineIcon>
+	);
+}
+
+export function InfoIcon(props: IconProps) {
+	return (
+		<LineIcon title="circle-info" {...props}>
+			<path d="M9 16.25C13.004 16.25 16.25 13.004 16.25 9C16.25 4.996 13.004 1.75 9 1.75C4.996 1.75 1.75 4.996 1.75 9C1.75 13.004 4.996 16.25 9 16.25Z" />
+			<path d="M9 12.75V9.25C9 8.9739 8.7761 8.75 8.5 8.75H7.75" />
+			<path
+				d="M9 6.75C8.448 6.75 8 6.301 8 5.75C8 5.199 8.448 4.75 9 4.75C9.552 4.75 10 5.199 10 5.75C10 6.301 9.552 6.75 9 6.75Z"
+				fill="currentColor"
+				stroke="none"
+			/>
+		</LineIcon>
+	);
+}
+
+export function LightbulbIcon(props: IconProps) {
+	return (
+		<LineIcon title="lightbulb-2" {...props}>
+			<path d="M9 11.25V8.25L7 6.25" />
+			<path d="M9 8.25L11 6.25" />
+			<path d="M14 6.75C14 3.637 11.154 1.18801 7.92201 1.86301C5.99001 2.26601 4.44702 3.85599 4.08802 5.79599C3.65402 8.13999 4.85901 10.255 6.75001 11.211V14.25C6.75001 15.355 7.64501 16.25 8.75001 16.25H9.25001C10.355 16.25 11.25 15.355 11.25 14.25V11.211C12.88 10.387 14 8.701 14 6.75Z" />
+			<path d="M6.75 11.25H11.25" />
+		</LineIcon>
+	);
+}
+
+export function CloseIcon(props: IconProps) {
+	return (
+		<LineIcon title="xmark" {...props}>
+			<line x1="14" x2="4" y1="4" y2="14" />
+			<line x1="4" x2="14" y1="4" y2="14" />
+		</LineIcon>
+	);
+}
+
+export function PlusIcon(props: IconProps) {
+	return (
+		<LineIcon title="plus" viewBox="0 0 13 13" {...props}>
+			<path d="M6.5 0.75V12.25" />
+			<path d="M0.75 6.5H12.25" />
+		</LineIcon>
+	);
+}
diff --git a/packages/icons/src/system.tsx b/packages/icons/src/system.tsx
new file mode 100644
index 00000000..9d25f9c6
--- /dev/null
+++ b/packages/icons/src/system.tsx
@@ -0,0 +1,82 @@
+import { LineIcon } from "./icon";
+
+import type { IconProps } from "./icon";
+
+export function ArchiveIcon(props: IconProps) {
+	return (
+		<LineIcon title="box-archive" {...props}>
+			<path d="M14.75,6.25v7c0,1.105-.895,2-2,2H5.25c-1.105,0-2-.895-2-2V6.25" />
+			<rect height="3.5" rx="1" ry="1" width="14.5" x="1.75" y="2.75" />
+			<line x1="7" x2="11" y1="9.25" y2="9.25" />
+		</LineIcon>
+	);
+}
+
+export function DocumentIcon(props: IconProps) {
+	return (
+		<LineIcon title="book-bookmark" {...props}>
+			<path d="M2.75,14V4.25c0-1.105,.895-2,2-2H15.25V12.25" />
+			<path
+				d="M11,14H7v3.5c0,.202,.122,.385,.309,.462,.187,.079,.401,.035,.545-.108l1.146-1.146,1.146,1.146c.096,.096,.224,.146,.354,.146,.064,0,.13-.012,.191-.038,.187-.077,.309-.26,.309-.462v-3.5Z"
+				fill="currentColor"
+				stroke="none"
+			/>
+			<path d="M5.25,15.75h-.75c-.966,0-1.75-.783-1.75-1.75s.784-1.75,1.75-1.75H15.25c-.641,.844-.734,2.547,0,3.5h-2.5" />
+			<circle cx="5.75" cy="9.75" fill="currentColor" r=".75" stroke="none" />
+			<circle cx="5.75" cy="4.75" fill="currentColor" r=".75" stroke="none" />
+			<circle cx="5.75" cy="7.25" fill="currentColor" r=".75" stroke="none" />
+		</LineIcon>
+	);
+}
+
+export function SearchIcon(props: IconProps) {
+	return (
+		<LineIcon title="search" viewBox="0 0 15 15" {...props}>
+			<path d="M14.25 14.25L10.1386 10.1386" />
+			<path d="M6.25 11.75C9.2875 11.75 11.75 9.2875 11.75 6.25C11.75 3.2125 9.2875 0.75 6.25 0.75C3.2125 0.75 0.75 3.2125 0.75 6.25C0.75 9.2875 3.2125 11.75 6.25 11.75Z" />
+		</LineIcon>
+	);
+}
+
+export function LoaderIcon({ size = 18, ...props }: IconProps) {
+	let paths = [
+		[
+			"M9,5c-.414,0-.75-.336-.75-.75V1.75c0-.414,.336-.75,.75-.75s.75,.336,.75,.75v2.5c0,.414-.336,.75-.75,.75Z",
+			1,
+		],
+		[
+			"M12.359,6.391c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061l1.768-1.768c.293-.293,.768-.293,1.061,0s.293,.768,0,1.061l-1.768,1.768c-.146,.146-.338,.22-.53,.22Z",
+			0.88,
+		],
+		[
+			"M16.25,9.75h-2.5c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75h2.5c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Z",
+			0.75,
+		],
+		[
+			"M14.126,14.876c-.192,0-.384-.073-.53-.22l-1.768-1.768c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l1.768,1.768c.293,.293,.293,.768,0,1.061-.146,.146-.338,.22-.53,.22Z",
+			0.63,
+		],
+		[
+			"M9,17c-.414,0-.75-.336-.75-.75v-2.5c0-.414,.336-.75,.75-.75s.75,.336,.75,.75v2.5c0,.414-.336,.75-.75,.75Z",
+			0.5,
+		],
+		[
+			"M3.874,14.876c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061l1.768-1.768c.293-.293,.768-.293,1.061,0s.293,.768,0,1.061l-1.768,1.768c-.146,.146-.338,.22-.53,.22Z",
+			0.38,
+		],
+		[
+			"M4.25,9.75H1.75c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75h2.5c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Z",
+			0.25,
+		],
+		[
+			"M5.641,6.391c-.192,0-.384-.073-.53-.22l-1.768-1.768c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l1.768,1.768c.293,.293,.293,.768,0,1.061-.146,.146-.338,.22-.53,.22Z",
+			0.13,
+		],
+	] as const;
+	return (
+		<svg fill="currentColor" height={size} viewBox="0 0 18 18" width={size} {...props}>
+			<title>loader</title>
+			{paths.map(([path, opacity]) => <path d={path} key={path} opacity={opacity} />)}
+		</svg>
+	);
+}
diff --git a/packages/icons/tsconfig.json b/packages/icons/tsconfig.json
new file mode 100644
index 00000000..1d863383
--- /dev/null
+++ b/packages/icons/tsconfig.json
@@ -0,0 +1,12 @@
+{
+	"extends": ["../../tsconfig.json"],
+	"include": ["src"],
+	"compilerOptions": {
+		"target": "esnext",
+		"lib": ["esnext", "dom", "dom.iterable"],
+		"jsx": "react-jsx",
+		"types": ["bun"],
+		"noUnusedLocals": true,
+		"noUnusedParameters": true
+	}
+}
diff --git a/packages/question/package.json b/packages/question/package.json
index d3dac96b..1579bb53 100644
--- a/packages/question/package.json
+++ b/packages/question/package.json
@@ -17,8 +17,8 @@
 		}
 	},
 	"dependencies": {
+		"@chopin/icons": "workspace:*",
 		"@chopin/protocol": "workspace:*",
-		"@phosphor-icons/react": "^2.1.10",
 		"json-joy": "catalog:mdx"
 	},
 	"peerDependencies": {
diff --git a/packages/question/src/react/question-view.tsx b/packages/question/src/react/question-view.tsx
index 2c45c7b9..5c34fe79 100644
--- a/packages/question/src/react/question-view.tsx
+++ b/packages/question/src/react/question-view.tsx
@@ -10,7 +10,7 @@
  */
 
 import { useCallback, useEffect, useId, useRef, useState } from "react";
-import { CheckIcon, ShuffleSimpleIcon, XIcon } from "@phosphor-icons/react";
+import { CheckIcon, CloseIcon } from "@chopin/icons";
 
 import { answered } from "../draft";
 
@@ -93,7 +93,7 @@ function Badges({ people }: { people: Collaborator[] }) {
 function DecisionHeading() {
 	return (
 		<header className="flex items-center gap-2 px-3 py-2.5 hairline-b">
-			<ShuffleSimpleIcon aria-hidden="true" size={16} weight="regular" />
+			<CheckIcon aria-hidden="true" size={16} />
 			<span className="text-sm font-medium text-text-primary">Decision</span>
 		</header>
 	);
@@ -613,7 +613,7 @@ export function QuestionView(props: QuestionViewProps) {
 								disabled={disabled || submitting}
 								className="btn btn-sm btn-destructive"
 							>
-								<XIcon aria-hidden="true" size={16} weight="bold" />
+								<CloseIcon aria-hidden="true" size={16} />
 								{submitting ? "Cancelling…" : "Yes, cancel"}
 							</button>
 						</>
@@ -634,7 +634,7 @@ export function QuestionView(props: QuestionViewProps) {
 							disabled={disabled || submitting}
 							className="btn btn-sm btn-secondary"
 						>
-							<XIcon aria-hidden="true" size={16} weight="bold" />
+							<CloseIcon aria-hidden="true" size={16} />
 							Cancel
 						</button>
 					)}
@@ -658,7 +658,6 @@ export function QuestionView(props: QuestionViewProps) {
 								aria-hidden="true"
 								data-plan-icon="check"
 								size={16}
-								weight="bold"
 							/>
 							{submitting
 								? (single ? "Saving…" : "Submitting…")

From 9d3eb738be86944723f49c55f1853cb8dc42f008 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Fri, 28 Aug 2026 11:22:16 +0100
Subject: [PATCH 16/35] Add remaining Nucleo icons

---
 apps/web/src/chat/transcript.tsx        |  4 +-
 apps/web/src/design-audit/icons.tsx     |  8 ++++
 apps/web/src/icon-assets.test.ts        | 18 +++++++--
 packages/editor/src/widgets/callout.tsx | 15 +++++--
 packages/icons/src/index.ts             |  4 ++
 packages/icons/src/line.tsx             | 53 +++++++++++++++++++++++--
 6 files changed, 89 insertions(+), 13 deletions(-)

diff --git a/apps/web/src/chat/transcript.tsx b/apps/web/src/chat/transcript.tsx
index 897d3c2d..25e200e1 100644
--- a/apps/web/src/chat/transcript.tsx
+++ b/apps/web/src/chat/transcript.tsx
@@ -1,7 +1,7 @@
 /** The shared chat, grouped for reading rather than event delivery. */
 
 import { useEffect, useId, useRef, useState } from "react";
-import { ArrowUpIcon, ChevronIcon, CloseIcon, LoaderIcon } from "@chopin/icons";
+import { ChevronIcon, CloseIcon, LoaderIcon, SignInIcon } from "@chopin/icons";
 
 import { AgentFace, Face, MotionDisclosure, MotionDisclosureIcon } from "@chopin/editor";
 
@@ -96,7 +96,7 @@ function SystemEntry({ item }: { item: Extract<Group, { kind: "system" }> }) {
 	return (
 		<div className="flex items-start gap-3 text-text-tertiary" data-chat-system>
 			<div className="shrink-0">
-				<ArrowUpIcon aria-hidden="true" className="rotate-90" size={20} />
+				<SignInIcon aria-hidden="true" size={20} />
 			</div>
 			<p className="m-0 min-w-0 break-words text-[14px] [overflow-wrap:anywhere]">
 				{displayText(item.text)}
diff --git a/apps/web/src/design-audit/icons.tsx b/apps/web/src/design-audit/icons.tsx
index 66aa66cf..7e177fb3 100644
--- a/apps/web/src/design-audit/icons.tsx
+++ b/apps/web/src/design-audit/icons.tsx
@@ -11,6 +11,10 @@ import {
 	MessageIcon,
 	PlusIcon,
 	SearchIcon,
+	SignInIcon,
+	SirenIcon,
+	SparkleIcon,
+	WarningIcon,
 } from "@chopin/icons";
 
 import addProject from "../assets/figma/navigation/add-project.svg";
@@ -70,6 +74,10 @@ const NUCLEO_ICONS: readonly {
 	{ icon: LightbulbIcon, name: "Lightbulb" },
 	{ icon: PlusIcon, name: "Plus" },
 	{ icon: CloseIcon, name: "Close" },
+	{ icon: SignInIcon, name: "Sign in" },
+	{ icon: SirenIcon, name: "Siren" },
+	{ icon: SparkleIcon, name: "Important sparkle" },
+	{ icon: WarningIcon, name: "Warning" },
 	{ icon: ArchiveIcon, name: "Archive" },
 	{ icon: DocumentIcon, name: "Document" },
 	{ icon: SearchIcon, name: "Search" },
diff --git a/apps/web/src/icon-assets.test.ts b/apps/web/src/icon-assets.test.ts
index ef46dcbf..2f963fbc 100644
--- a/apps/web/src/icon-assets.test.ts
+++ b/apps/web/src/icon-assets.test.ts
@@ -31,10 +31,20 @@ test("the interface uses only the shared Nucleo icon family", () => {
 	);
 	for (let file of files) expect(readFileSync(file, "utf8")).not.toContain("@phosphor-icons/react");
 
-	expect(existsSync(join(repository, "packages/icons/src/line.tsx"))).toBe(true);
-	expect(readFileSync(join(repository, "packages/icons/src/line.tsx"), "utf8")).toContain(
-		"M9,1.75C4.996,1.75",
-	);
+	let icons = readFileSync(join(repository, "packages/icons/src/line.tsx"), "utf8");
+	expect(icons).toContain("M9,1.75C4.996,1.75");
+	expect(icons).toContain("M9.75,2.75h3.5");
+	expect(icons).toContain("M4.75 13.25V9");
+	expect(icons).toContain("10.912 7.087 15.75 9");
+	expect(icons).toContain("M7.63796 3.48996");
+	expect(icons).toContain('x1="9" x2="9" y1="3.25" y2="14.75"');
+});
+
+test("callouts use their distinct semantic Nucleo icons", () => {
+	let callout = readFileSync(join(repository, "packages/editor/src/widgets/callout.tsx"), "utf8");
+	expect(callout).toContain('case "important":\n\t\t\treturn <SparkleIcon');
+	expect(callout).toContain('case "warning":\n\t\t\treturn <WarningIcon');
+	expect(callout).toContain('case "danger":\n\t\t\treturn <SirenIcon');
 });
 
 test("directional controls reuse one chevron and one panel icon", () => {
diff --git a/packages/editor/src/widgets/callout.tsx b/packages/editor/src/widgets/callout.tsx
index badc04ec..8ddf9143 100644
--- a/packages/editor/src/widgets/callout.tsx
+++ b/packages/editor/src/widgets/callout.tsx
@@ -9,7 +9,14 @@
 
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import { CheckIcon, InfoIcon, LightbulbIcon } from "@chopin/icons";
+import {
+	CheckIcon,
+	InfoIcon,
+	LightbulbIcon,
+	SirenIcon,
+	SparkleIcon,
+	WarningIcon,
+} from "@chopin/icons";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { readOnly$ } from "@mdxeditor/editor";
 import { useCellValue } from "@mdxeditor/gurx";
@@ -40,11 +47,11 @@ function TypeIcon({ type, size = 17 }: { type: CalloutType; size?: number }) {
 		case "tip":
 			return <LightbulbIcon {...props} />;
 		case "important":
-			return <CheckIcon {...props} />;
+			return <SparkleIcon {...props} />;
 		case "warning":
-			return <InfoIcon {...props} />;
+			return <WarningIcon {...props} />;
 		case "danger":
-			return <InfoIcon {...props} />;
+			return <SirenIcon {...props} />;
 	}
 }
 
diff --git a/packages/icons/src/index.ts b/packages/icons/src/index.ts
index b2660456..de7dac7a 100644
--- a/packages/icons/src/index.ts
+++ b/packages/icons/src/index.ts
@@ -8,5 +8,9 @@ export {
 	LightbulbIcon,
 	MessageIcon,
 	PlusIcon,
+	SignInIcon,
+	SirenIcon,
+	SparkleIcon,
+	WarningIcon,
 } from "./line";
 export { ArchiveIcon, DocumentIcon, LoaderIcon, SearchIcon } from "./system";
diff --git a/packages/icons/src/line.tsx b/packages/icons/src/line.tsx
index a2148f57..472f7b3b 100644
--- a/packages/icons/src/line.tsx
+++ b/packages/icons/src/line.tsx
@@ -71,9 +71,56 @@ export function CloseIcon(props: IconProps) {
 
 export function PlusIcon(props: IconProps) {
 	return (
-		<LineIcon title="plus" viewBox="0 0 13 13" {...props}>
-			<path d="M6.5 0.75V12.25" />
-			<path d="M0.75 6.5H12.25" />
+		<LineIcon title="plus" {...props}>
+			<line x1="9" x2="9" y1="3.25" y2="14.75" />
+			<line x1="3.25" x2="14.75" y1="9" y2="9" />
+		</LineIcon>
+	);
+}
+
+export function SignInIcon(props: IconProps) {
+	return (
+		<LineIcon title="open-rect-arrow-in" {...props}>
+			<path d="M9.75,2.75h3.5c1.105,0,2,.895,2,2V13.25c0,1.105-.895,2-2,2h-3.5" />
+			<polyline points="6.75 12.5 10.25 9 6.75 5.5" />
+			<line x1="10.25" x2="2.75" y1="9" y2="9" />
+		</LineIcon>
+	);
+}
+
+export function SirenIcon(props: IconProps) {
+	return (
+		<LineIcon title="siren" {...props}>
+			<path d="M9 0.75V2.25" />
+			<path d="M14.834 3.166L13.773 4.227" />
+			<path d="M17.25 9H15.75" />
+			<path d="M3.16602 3.166L4.22701 4.227" />
+			<path d="M0.75 9H2.25" />
+			<path d="M14 13.25H4C3.5858 13.25 3.25 13.5858 3.25 14V15.5C3.25 15.9142 3.5858 16.25 4 16.25H14C14.4142 16.25 14.75 15.9142 14.75 15.5V14C14.75 13.5858 14.4142 13.25 14 13.25Z" />
+			<path d="M4.75 13.25V9C4.75 6.653 6.653 4.75 9 4.75C11.347 4.75 13.25 6.653 13.25 9V13.25" />
+			<path d="M9 7.75C8.3105 7.75 7.75 8.3105 7.75 9" />
+		</LineIcon>
+	);
+}
+
+export function SparkleIcon(props: IconProps) {
+	return (
+		<LineIcon title="sparkle-4" {...props}>
+			<polygon points="9 2.25 10.912 7.087 15.75 9 10.912 10.913 9 15.75 7.087 10.913 2.25 9 7.087 7.087 9 2.25" />
+		</LineIcon>
+	);
+}
+
+export function WarningIcon(props: IconProps) {
+	return (
+		<LineIcon title="triangle-warning" {...props}>
+			<path d="M7.63796 3.48996L2.21295 12.89C1.60795 13.9399 2.36395 15.25 3.57495 15.25H14.425C15.636 15.25 16.392 13.9399 15.787 12.89L10.362 3.48996C9.75696 2.44996 8.24296 2.44996 7.63796 3.48996Z" />
+			<path d="M9 6.75V9.75" />
+			<path
+				d="M9 13.5C8.448 13.5 8 13.05 8 12.5C8 11.95 8.448 11.5 9 11.5C9.552 11.5 10 11.9501 10 12.5C10 13.0499 9.552 13.5 9 13.5Z"
+				fill="currentColor"
+				stroke="none"
+			/>
 		</LineIcon>
 	);
 }

From 0baf26506a2a1dc11ee6a903f3bd8dab07abc59e Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Fri, 28 Aug 2026 11:26:09 +0100
Subject: [PATCH 17/35] Derive semantic wash colors

---
 apps/web/src/theme.css         | 12 ++++++++----
 apps/web/src/theme.test.ts     | 13 +++++++------
 apps/web/src/tokens.test.ts    | 19 ++++++++++++-------
 packages/editor/src/styles.css |  2 +-
 4 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/apps/web/src/theme.css b/apps/web/src/theme.css
index 8cac9bf1..d94d1092 100644
--- a/apps/web/src/theme.css
+++ b/apps/web/src/theme.css
@@ -52,22 +52,26 @@
 	--color-brand: oklch(0.50006 0.08514 210.06); /* #06707e */
 	--color-brand-hover: oklch(0.42914 0.07315 210.634); /* #045a66 */
 	--color-brand-active: oklch(0.37546 0.06382 210.435); /* #034a54 */
-	--color-brand-wash: color-mix(in srgb, var(--color-brand) 30%, transparent);
+	--color-brand-wash: color-mix(in srgb, var(--color-brand) 20%, var(--color-page));
 	--color-brand-ink: oklch(0.43882 0.07476 210.193); /* #045d69 */
 	--focus-ring-color: var(--color-brand);
 	--focus-ring-width: 2px;
 	--focus-ring-offset: 2px;
 
 	--color-success: oklch(0.51958 0.10966 145.072); /* #3b793f */
-	--color-success-wash: oklch(0.95503 0.03552 145.29); /* #e2f7e2 */
+	--color-success-wash: color-mix(in srgb, var(--color-success) 20%, var(--color-page));
 	--color-success-ink: oklch(0.44098 0.11068 144.754); /* #236228 */
 	--color-warning: oklch(0.59898 0.12586 74.986); /* #ab7302 */
-	--color-warning-wash: oklch(0.95386 0.03439 74.416); /* #feedd7 */
+	--color-warning-wash: color-mix(in srgb, var(--color-warning) 20%, var(--color-page));
 	--color-warning-ink: oklch(0.4409 0.0921 74.93); /* #704a02 */
 	--color-destructive: oklch(0.60513 0.17178 24.175); /* #d54d4c */
 	--color-destructive-hover: oklch(0.56972 0.16045 24.136); /* #c44746 */
 	--color-destructive-active: oklch(0.53376 0.1489 24.091); /* #b34140 */
-	--color-destructive-wash: oklch(0.94841 0.02583 29.416); /* #ffe8e4 */
+	--color-destructive-wash: color-mix(
+		in srgb,
+		var(--color-destructive) 20%,
+		var(--color-page)
+	);
 	--color-destructive-ink: oklch(0.4941 0.19046 25.161); /* #b51421 */
 
 	/* Passive structure and controls are the only two edge weights. */
diff --git a/apps/web/src/theme.test.ts b/apps/web/src/theme.test.ts
index 3af05157..a2acebd0 100644
--- a/apps/web/src/theme.test.ts
+++ b/apps/web/src/theme.test.ts
@@ -51,12 +51,13 @@ function token(name: string): Rgb {
 	if (!declaration) throw new Error(`no --color-${name} in the theme`);
 	let alias = /^var\(--color-([\w-]+)\)$/.exec(declaration);
 	if (alias) return token(alias[1]!);
-	let transparentMix = /^color-mix\(in srgb, var\(--color-([\w-]+)\) ([\d.]+)%, transparent\)$/
-		.exec(declaration);
-	if (transparentMix) {
-		let foreground = token(transparentMix[1]!);
-		let background = token("page");
-		let alpha = Number(transparentMix[2]) / 100;
+	let mix =
+		/^color-mix\(in srgb, var\(--color-([\w-]+)\) ([\d.]+)%, (?:var\(--color-([\w-]+)\)|transparent)\)$/
+			.exec(declaration);
+	if (mix) {
+		let foreground = token(mix[1]!);
+		let background = token(mix[3] ?? "page");
+		let alpha = Number(mix[2]) / 100;
 		return {
 			blue: foreground.blue * alpha + background.blue * (1 - alpha),
 			green: foreground.green * alpha + background.green * (1 - alpha),
diff --git a/apps/web/src/tokens.test.ts b/apps/web/src/tokens.test.ts
index 145b17cd..e13cd9ae 100644
--- a/apps/web/src/tokens.test.ts
+++ b/apps/web/src/tokens.test.ts
@@ -19,7 +19,7 @@ const EDITOR_STYLES = readFileSync(join(ROOT, "packages/editor/src/styles.css"),
 function declared(name: string): string {
 	let found = new RegExp(`\\n\\s*${name}:\\s*([^;]+);`).exec(THEME);
 	if (!found) throw new Error(`no ${name} in the theme`);
-	return found[1]!.trim().replace(/\\s+/g, " ");
+	return found[1]!.trim().replace(/\s+/g, " ").replace(/\(\s+/g, "(").replace(/\s+\)/g, ")");
 }
 
 function resolved(name: string): string {
@@ -134,13 +134,18 @@ describe("palette", () => {
 		);
 	});
 
-it("makes the brand wash the brand colour at thirty percent opacity", () => {
-	expect(declared("--color-brand-wash")).toBe(
-		"color-mix(in srgb, var(--color-brand) 30%, transparent)",
-	);
-});
+	it("derives every semantic wash consistently from its parent colour", () => {
+		expect(declared("--color-brand-wash")).toBe(
+			"color-mix(in srgb, var(--color-brand) 20%, var(--color-page))",
+		);
+		for (let status of ["success", "warning", "destructive"]) {
+			expect(declared(`--color-${status}-wash`)).toBe(
+				`color-mix(in srgb, var(--color-${status}) 20%, var(--color-page))`,
+			);
+		}
+	});
 
-it("keeps the Chat pane edge subtly stronger than the frame hairline", () => {
+	it("keeps the Chat pane edge subtly stronger than the frame hairline", () => {
 		expect(THEME).toMatch(
 			/\.workspace-frame \.workspace-chat-panel\s*\{\s*border-color:\s*rgb\(0 0 0 \/ 9%\);/,
 		);
diff --git a/packages/editor/src/styles.css b/packages/editor/src/styles.css
index 06e6e428..165d3354 100644
--- a/packages/editor/src/styles.css
+++ b/packages/editor/src/styles.css
@@ -561,7 +561,7 @@
  * a rendered wash, not as an abstract percentage of a darker accent.
  */
 ::highlight(plan-related) {
-	/* #b4d4d8 */
+	/* #cde2e5 */
 	background-color: var(--color-brand-wash);
 }
 

From 8fbf9a69284ec860a56257b3ab23850a696be32f Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Fri, 28 Aug 2026 11:27:10 +0100
Subject: [PATCH 18/35] Add important callout specimen

---
 apps/web/src/design-audit/authored-content.tsx | 10 ++++++++--
 apps/web/src/design-audit/specimens.test.tsx   |  5 ++++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/design-audit/authored-content.tsx b/apps/web/src/design-audit/authored-content.tsx
index 463acd7d..077dcc30 100644
--- a/apps/web/src/design-audit/authored-content.tsx
+++ b/apps/web/src/design-audit/authored-content.tsx
@@ -5,7 +5,7 @@ import { AuditPlate, StateLabel } from "./frame";
 
 import type { Research } from "@chopin/protocol";
 
-let callouts = [
+export let callouts = [
 	'<Callout id="01K0N4W3B7P27CBAEC7A8C8WEA" type="note" title="Note">',
 	"",
 	"A neutral detail that supports the surrounding prose.",
@@ -18,6 +18,12 @@ let callouts = [
 	"",
 	"</Callout>",
 	"",
+	'<Callout id="01K0N4W3B7P27CBAEC7A8C8WEE" type="important" title="Important">',
+	"",
+	"A key detail that deserves extra emphasis.",
+	"",
+	"</Callout>",
+	"",
 	'<Callout id="01K0N4W3B7P27CBAEC7A8C8WEC" type="warning" title="Warning">',
 	"",
 	"A condition that needs attention before continuing.",
@@ -191,7 +197,7 @@ export function AuthoredContent() {
 	return (
 		<>
 			<EditorPlate
-				description="Note, tip, warning, and danger treatments from the real callout renderer."
+				description="Note, tip, important, warning, and danger treatments from the real callout renderer."
 				item="callouts"
 				source={callouts}
 				title="Callouts"
diff --git a/apps/web/src/design-audit/specimens.test.tsx b/apps/web/src/design-audit/specimens.test.tsx
index 785f50fc..3a015457 100644
--- a/apps/web/src/design-audit/specimens.test.tsx
+++ b/apps/web/src/design-audit/specimens.test.tsx
@@ -3,7 +3,7 @@ import { createElement } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
 
 import { Controls } from "./controls";
-import { AuthoredContent } from "./authored-content";
+import { AuthoredContent, callouts } from "./authored-content";
 import { Foundations } from "./foundations";
 import { AUDIT_INVENTORY } from "./inventory";
 import { Surfaces } from "./surfaces";
@@ -73,6 +73,9 @@ describe("design audit specimens", () => {
 			expect(markup).toContain(`data-audit-item="${item.id}"`);
 		}
 		expect(markup).toContain('role="document"');
+		for (let type of ["note", "tip", "important", "warning", "danger"]) {
+			expect(callouts).toContain(`type="${type}"`);
+		}
 		expect(markup).toContain("Research question");
 		expect(markup).toContain("Research ready");
 	});

From 872fddaec06192ab7ef6f78a104e51394d335420 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Fri, 28 Aug 2026 11:29:57 +0100
Subject: [PATCH 19/35] Strengthen semantic wash colors

---
 apps/web/src/theme.css         |  6 +--
 apps/web/src/theme.test.ts     | 77 +++++++++++++++++++++++-----------
 apps/web/src/tokens.test.ts    | 12 +++---
 packages/editor/src/styles.css |  2 +-
 4 files changed, 62 insertions(+), 35 deletions(-)

diff --git a/apps/web/src/theme.css b/apps/web/src/theme.css
index d94d1092..75a12dc9 100644
--- a/apps/web/src/theme.css
+++ b/apps/web/src/theme.css
@@ -52,17 +52,17 @@
 	--color-brand: oklch(0.50006 0.08514 210.06); /* #06707e */
 	--color-brand-hover: oklch(0.42914 0.07315 210.634); /* #045a66 */
 	--color-brand-active: oklch(0.37546 0.06382 210.435); /* #034a54 */
-	--color-brand-wash: color-mix(in srgb, var(--color-brand) 20%, var(--color-page));
+	--color-brand-wash: color-mix(in oklab, var(--color-brand) 25%, var(--color-page));
 	--color-brand-ink: oklch(0.43882 0.07476 210.193); /* #045d69 */
 	--focus-ring-color: var(--color-brand);
 	--focus-ring-width: 2px;
 	--focus-ring-offset: 2px;
 
 	--color-success: oklch(0.51958 0.10966 145.072); /* #3b793f */
-	--color-success-wash: color-mix(in srgb, var(--color-success) 20%, var(--color-page));
+	--color-success-wash: color-mix(in oklab, var(--color-success) 25%, var(--color-page));
 	--color-success-ink: oklch(0.44098 0.11068 144.754); /* #236228 */
 	--color-warning: oklch(0.59898 0.12586 74.986); /* #ab7302 */
-	--color-warning-wash: color-mix(in srgb, var(--color-warning) 20%, var(--color-page));
+	--color-warning-wash: color-mix(in oklab, var(--color-warning) 25%, var(--color-page));
 	--color-warning-ink: oklch(0.4409 0.0921 74.93); /* #704a02 */
 	--color-destructive: oklch(0.60513 0.17178 24.175); /* #d54d4c */
 	--color-destructive-hover: oklch(0.56972 0.16045 24.136); /* #c44746 */
diff --git a/apps/web/src/theme.test.ts b/apps/web/src/theme.test.ts
index a2acebd0..a3ddae8a 100644
--- a/apps/web/src/theme.test.ts
+++ b/apps/web/src/theme.test.ts
@@ -23,6 +23,7 @@ import { readFileSync } from "node:fs";
 import { join } from "node:path";
 
 type Rgb = { blue: number; green: number; red: number };
+type Oklch = { c: number; h: number; l: number };
 
 const THEME = readFileSync(join(import.meta.dir, "theme.css"), "utf8");
 const NAVIGATION = readFileSync(join(import.meta.dir, "navigation.css"), "utf8");
@@ -45,6 +46,36 @@ function decode(value: number): number {
 	return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
 }
 
+function fromOklch({ c, h, l }: Oklch): Rgb {
+	let radians = (h * Math.PI) / 180;
+	let a = c * Math.cos(radians);
+	let b = c * Math.sin(radians);
+	let long = (l + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+	let medium = (l - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+	let short = (l - 0.0894841775 * a - 1.291485548 * b) ** 3;
+	return {
+		blue: encode(-0.0041960863 * long - 0.7034186147 * medium + 1.707614701 * short),
+		green: encode(-1.2684380046 * long + 2.6097574011 * medium - 0.3413193965 * short),
+		red: encode(4.0767416621 * long - 3.3077115913 * medium + 0.2309699292 * short),
+	};
+}
+
+function toOklch({ blue, green, red }: Rgb): Oklch {
+	let r = decode(red);
+	let g = decode(green);
+	let b = decode(blue);
+	let long = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+	let medium = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+	let short = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+	let a = 1.9779984951 * long - 2.428592205 * medium + 0.4505937099 * short;
+	let chromatic = 0.0259040371 * long + 0.7827717662 * medium - 0.808675766 * short;
+	return {
+		c: Math.hypot(a, chromatic),
+		h: ((Math.atan2(chromatic, a) * 180) / Math.PI + 360) % 360,
+		l: 0.2104542553 * long + 0.793617785 * medium - 0.0040720468 * short,
+	};
+}
+
 /** A colour token, resolving semantic aliases onto the primitive palette. */
 function token(name: string): Rgb {
 	let declaration = new RegExp(`--color-${name}:\\s*([^;]+);`).exec(THEME)?.[1]?.trim();
@@ -52,12 +83,27 @@ function token(name: string): Rgb {
 	let alias = /^var\(--color-([\w-]+)\)$/.exec(declaration);
 	if (alias) return token(alias[1]!);
 	let mix =
-		/^color-mix\(in srgb, var\(--color-([\w-]+)\) ([\d.]+)%, (?:var\(--color-([\w-]+)\)|transparent)\)$/
+		/^color-mix\(in (srgb|oklab), var\(--color-([\w-]+)\) ([\d.]+)%, (?:var\(--color-([\w-]+)\)|transparent)\)$/
 			.exec(declaration);
 	if (mix) {
-		let foreground = token(mix[1]!);
-		let background = token(mix[3] ?? "page");
-		let alpha = Number(mix[2]) / 100;
+		let foreground = token(mix[2]!);
+		let background = token(mix[4] ?? "page");
+		let alpha = Number(mix[3]) / 100;
+		if (mix[1] === "oklab") {
+			let foregroundOklch = toOklch(foreground);
+			let backgroundOklch = toOklch(background);
+			let foregroundRadians = (foregroundOklch.h * Math.PI) / 180;
+			let backgroundRadians = (backgroundOklch.h * Math.PI) / 180;
+			let a = foregroundOklch.c * Math.cos(foregroundRadians) * alpha
+				+ backgroundOklch.c * Math.cos(backgroundRadians) * (1 - alpha);
+			let b = foregroundOklch.c * Math.sin(foregroundRadians) * alpha
+				+ backgroundOklch.c * Math.sin(backgroundRadians) * (1 - alpha);
+			return fromOklch({
+				c: Math.hypot(a, b),
+				h: ((Math.atan2(b, a) * 180) / Math.PI + 360) % 360,
+				l: foregroundOklch.l * alpha + backgroundOklch.l * (1 - alpha),
+			});
+		}
 		return {
 			blue: foreground.blue * alpha + background.blue * (1 - alpha),
 			green: foreground.green * alpha + background.green * (1 - alpha),
@@ -66,20 +112,7 @@ function token(name: string): Rgb {
 	}
 	let found = /^oklch\(([\d.]+)\s+([\d.]+)\s+([\d.]+)\)$/.exec(declaration);
 	if (!found) throw new Error(`no --color-${name} in the theme`);
-	let l = Number(found[1]);
-	let c = Number(found[2]);
-	let h = Number(found[3]);
-	let radians = (h * Math.PI) / 180;
-	let a = c * Math.cos(radians);
-	let b = c * Math.sin(radians);
-	let long = (l + 0.3963377774 * a + 0.2158037573 * b) ** 3;
-	let medium = (l - 0.1055613458 * a - 0.0638541728 * b) ** 3;
-	let short = (l - 0.0894841775 * a - 1.291485548 * b) ** 3;
-	return {
-		blue: encode(-0.0041960863 * long - 0.7034186147 * medium + 1.707614701 * short),
-		green: encode(-1.2684380046 * long + 2.6097574011 * medium - 0.3413193965 * short),
-		red: encode(4.0767416621 * long - 3.3077115913 * medium + 0.2309699292 * short),
-	};
+	return fromOklch({ c: Number(found[2]), h: Number(found[3]), l: Number(found[1]) });
 }
 
 function hex({ blue, green, red }: Rgb): string {
@@ -95,13 +128,7 @@ function hex({ blue, green, red }: Rgb): string {
 }
 
 function lightness({ blue, green, red }: Rgb): number {
-	let r = decode(red);
-	let g = decode(green);
-	let b = decode(blue);
-	let long = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
-	let medium = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
-	let short = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
-	return 0.2104542553 * long + 0.793617785 * medium - 0.0040720468 * short;
+	return toOklch({ blue, green, red }).l;
 }
 
 type Mark = { name: string; token: string; recorded: string };
diff --git a/apps/web/src/tokens.test.ts b/apps/web/src/tokens.test.ts
index e13cd9ae..6ef2a991 100644
--- a/apps/web/src/tokens.test.ts
+++ b/apps/web/src/tokens.test.ts
@@ -134,15 +134,15 @@ describe("palette", () => {
 		);
 	});
 
-	it("derives every semantic wash consistently from its parent colour", () => {
-		expect(declared("--color-brand-wash")).toBe(
-			"color-mix(in srgb, var(--color-brand) 20%, var(--color-page))",
-		);
-		for (let status of ["success", "warning", "destructive"]) {
+	it("derives semantic washes from their parent colours", () => {
+		for (let status of ["brand", "success", "warning"]) {
 			expect(declared(`--color-${status}-wash`)).toBe(
-				`color-mix(in srgb, var(--color-${status}) 20%, var(--color-page))`,
+				`color-mix(in oklab, var(--color-${status}) 25%, var(--color-page))`,
 			);
 		}
+		expect(declared("--color-destructive-wash")).toBe(
+			"color-mix(in srgb, var(--color-destructive) 20%, var(--color-page))",
+		);
 	});
 
 	it("keeps the Chat pane edge subtly stronger than the frame hairline", () => {
diff --git a/packages/editor/src/styles.css b/packages/editor/src/styles.css
index 165d3354..5884e5c8 100644
--- a/packages/editor/src/styles.css
+++ b/packages/editor/src/styles.css
@@ -561,7 +561,7 @@
  * a rendered wash, not as an abstract percentage of a darker accent.
  */
 ::highlight(plan-related) {
-	/* #cde2e5 */
+	/* #c7dade */
 	background-color: var(--color-brand-wash);
 }
 

From 147fd0e51b2f993c17953bb9987e825a3780ba29 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Fri, 28 Aug 2026 11:39:11 +0100
Subject: [PATCH 20/35] Brighten semantic wash colors

---
 apps/web/src/theme.css         | 6 +++---
 apps/web/src/tokens.test.ts    | 2 +-
 packages/editor/src/styles.css | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/theme.css b/apps/web/src/theme.css
index 75a12dc9..27cdc3e3 100644
--- a/apps/web/src/theme.css
+++ b/apps/web/src/theme.css
@@ -52,17 +52,17 @@
 	--color-brand: oklch(0.50006 0.08514 210.06); /* #06707e */
 	--color-brand-hover: oklch(0.42914 0.07315 210.634); /* #045a66 */
 	--color-brand-active: oklch(0.37546 0.06382 210.435); /* #034a54 */
-	--color-brand-wash: color-mix(in oklab, var(--color-brand) 25%, var(--color-page));
+	--color-brand-wash: color-mix(in oklab, var(--color-brand) 20%, var(--color-page));
 	--color-brand-ink: oklch(0.43882 0.07476 210.193); /* #045d69 */
 	--focus-ring-color: var(--color-brand);
 	--focus-ring-width: 2px;
 	--focus-ring-offset: 2px;
 
 	--color-success: oklch(0.51958 0.10966 145.072); /* #3b793f */
-	--color-success-wash: color-mix(in oklab, var(--color-success) 25%, var(--color-page));
+	--color-success-wash: color-mix(in oklab, var(--color-success) 20%, var(--color-page));
 	--color-success-ink: oklch(0.44098 0.11068 144.754); /* #236228 */
 	--color-warning: oklch(0.59898 0.12586 74.986); /* #ab7302 */
-	--color-warning-wash: color-mix(in oklab, var(--color-warning) 25%, var(--color-page));
+	--color-warning-wash: color-mix(in oklab, var(--color-warning) 20%, var(--color-page));
 	--color-warning-ink: oklch(0.4409 0.0921 74.93); /* #704a02 */
 	--color-destructive: oklch(0.60513 0.17178 24.175); /* #d54d4c */
 	--color-destructive-hover: oklch(0.56972 0.16045 24.136); /* #c44746 */
diff --git a/apps/web/src/tokens.test.ts b/apps/web/src/tokens.test.ts
index 6ef2a991..608175ef 100644
--- a/apps/web/src/tokens.test.ts
+++ b/apps/web/src/tokens.test.ts
@@ -137,7 +137,7 @@ describe("palette", () => {
 	it("derives semantic washes from their parent colours", () => {
 		for (let status of ["brand", "success", "warning"]) {
 			expect(declared(`--color-${status}-wash`)).toBe(
-				`color-mix(in oklab, var(--color-${status}) 25%, var(--color-page))`,
+				`color-mix(in oklab, var(--color-${status}) 20%, var(--color-page))`,
 			);
 		}
 		expect(declared("--color-destructive-wash")).toBe(
diff --git a/packages/editor/src/styles.css b/packages/editor/src/styles.css
index 5884e5c8..d4386414 100644
--- a/packages/editor/src/styles.css
+++ b/packages/editor/src/styles.css
@@ -561,7 +561,7 @@
  * a rendered wash, not as an abstract percentage of a darker accent.
  */
 ::highlight(plan-related) {
-	/* #c7dade */
+	/* #d2e1e4 */
 	background-color: var(--color-brand-wash);
 }
 

From d6011a950bcabbf9b688a2bbc9004b39faa4672b Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Fri, 28 Aug 2026 11:44:16 +0100
Subject: [PATCH 21/35] Tune semantic wash palette

---
 apps/web/src/theme.css         |  6 +++---
 apps/web/src/tokens.test.ts    | 11 +++++------
 packages/editor/src/styles.css |  2 +-
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/theme.css b/apps/web/src/theme.css
index 27cdc3e3..6174acef 100644
--- a/apps/web/src/theme.css
+++ b/apps/web/src/theme.css
@@ -52,17 +52,17 @@
 	--color-brand: oklch(0.50006 0.08514 210.06); /* #06707e */
 	--color-brand-hover: oklch(0.42914 0.07315 210.634); /* #045a66 */
 	--color-brand-active: oklch(0.37546 0.06382 210.435); /* #034a54 */
-	--color-brand-wash: color-mix(in oklab, var(--color-brand) 20%, var(--color-page));
+	--color-brand-wash: oklch(0.925 0.02 210);
 	--color-brand-ink: oklch(0.43882 0.07476 210.193); /* #045d69 */
 	--focus-ring-color: var(--color-brand);
 	--focus-ring-width: 2px;
 	--focus-ring-offset: 2px;
 
 	--color-success: oklch(0.51958 0.10966 145.072); /* #3b793f */
-	--color-success-wash: color-mix(in oklab, var(--color-success) 20%, var(--color-page));
+	--color-success-wash: oklch(0.93 0.026 145);
 	--color-success-ink: oklch(0.44098 0.11068 144.754); /* #236228 */
 	--color-warning: oklch(0.59898 0.12586 74.986); /* #ab7302 */
-	--color-warning-wash: color-mix(in oklab, var(--color-warning) 20%, var(--color-page));
+	--color-warning-wash: oklch(0.95 0.032 75);
 	--color-warning-ink: oklch(0.4409 0.0921 74.93); /* #704a02 */
 	--color-destructive: oklch(0.60513 0.17178 24.175); /* #d54d4c */
 	--color-destructive-hover: oklch(0.56972 0.16045 24.136); /* #c44746 */
diff --git a/apps/web/src/tokens.test.ts b/apps/web/src/tokens.test.ts
index 608175ef..cda7147a 100644
--- a/apps/web/src/tokens.test.ts
+++ b/apps/web/src/tokens.test.ts
@@ -134,12 +134,10 @@ describe("palette", () => {
 		);
 	});
 
-	it("derives semantic washes from their parent colours", () => {
-		for (let status of ["brand", "success", "warning"]) {
-			expect(declared(`--color-${status}-wash`)).toBe(
-				`color-mix(in oklab, var(--color-${status}) 20%, var(--color-page))`,
-			);
-		}
+	it("tunes the light semantic washes independently", () => {
+		expect(declared("--color-brand-wash")).toBe("oklch(0.925 0.02 210)");
+		expect(declared("--color-success-wash")).toBe("oklch(0.93 0.026 145)");
+		expect(declared("--color-warning-wash")).toBe("oklch(0.95 0.032 75)");
 		expect(declared("--color-destructive-wash")).toBe(
 			"color-mix(in srgb, var(--color-destructive) 20%, var(--color-page))",
 		);
@@ -183,6 +181,7 @@ describe("palette", () => {
 			"--color-brand",
 			"--color-brand-hover",
 			"--color-brand-active",
+			"--color-brand-wash",
 			"--color-brand-ink",
 		]);
 	});
diff --git a/packages/editor/src/styles.css b/packages/editor/src/styles.css
index d4386414..7540c401 100644
--- a/packages/editor/src/styles.css
+++ b/packages/editor/src/styles.css
@@ -561,7 +561,7 @@
  * a rendered wash, not as an abstract percentage of a darker accent.
  */
 ::highlight(plan-related) {
-	/* #d2e1e4 */
+	/* #d8eaee */
 	background-color: var(--color-brand-wash);
 }
 

From 5fb564e54af0f6cfc20fec00c0897c856d79851a Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Fri, 28 Aug 2026 11:49:25 +0100
Subject: [PATCH 22/35] Tighten callout spacing

---
 packages/editor/src/callout-style.test.ts | 12 ++++++++++++
 packages/editor/src/callout.css           |  8 ++++----
 2 files changed, 16 insertions(+), 4 deletions(-)
 create mode 100644 packages/editor/src/callout-style.test.ts

diff --git a/packages/editor/src/callout-style.test.ts b/packages/editor/src/callout-style.test.ts
new file mode 100644
index 00000000..f1d83338
--- /dev/null
+++ b/packages/editor/src/callout-style.test.ts
@@ -0,0 +1,12 @@
+import { expect, test } from "bun:test";
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+
+let styles = readFileSync(join(import.meta.dir, "callout.css"), "utf8");
+
+test("callouts share the compact aligned spacing", () => {
+	expect(styles).toMatch(/\[data-plan-type\]\s*{[^}]*padding:\s*0\.75rem 0\.875rem/s);
+	expect(styles).toMatch(/\.plan-callout-heading\s*{[^}]*gap:\s*0\.375rem/s);
+	expect(styles).toMatch(/\[data-plan-body\]\s*{[^}]*padding-inline-start:\s*2\.125rem/s);
+	expect(styles).toMatch(/\[data-plan-body\] > :first-child\s*{[^}]*margin-block-start:\s*0/s);
+});
diff --git a/packages/editor/src/callout.css b/packages/editor/src/callout.css
index 1bcce848..6de93439 100644
--- a/packages/editor/src/callout.css
+++ b/packages/editor/src/callout.css
@@ -37,7 +37,7 @@
 
 .plan-content [data-plan-type] {
 	border: var(--edge-width) solid color-mix(in oklab, var(--callout-accent) 18%, transparent);
-	padding: 0.875rem 1rem;
+	padding: 0.75rem 0.875rem;
 	margin-block: 1rem;
 	border-radius: var(--radius-lg);
 	background: color-mix(in oklab, var(--callout-wash) 68%, var(--color-page));
@@ -58,7 +58,7 @@
 	min-width: 0;
 	min-height: 1.75rem;
 	align-items: center;
-	gap: 0.625rem;
+	gap: 0.375rem;
 }
 
 .plan-callout-type {
@@ -133,12 +133,12 @@
 }
 
 .plan-content [data-plan-body] {
-	padding-inline-start: 2.375rem;
+	padding-inline-start: 2.125rem;
 	color: var(--color-text-secondary);
 }
 
 .plan-content [data-plan-body] > :first-child {
-	margin-block-start: 0.25rem;
+	margin-block-start: 0;
 }
 
 .plan-content [data-plan-body] > :last-child {

From 5b91aa307e9eac812a1278fbd16c7272caedcc74 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Fri, 28 Aug 2026 11:51:03 +0100
Subject: [PATCH 23/35] Unify Nucleo icon catalogue

---
 apps/web/src/design-audit/foundations.tsx |  2 +-
 apps/web/src/design-audit/icons.tsx       | 39 +++++++----------------
 apps/web/src/icon-assets.test.ts          | 10 ++++++
 3 files changed, 22 insertions(+), 29 deletions(-)

diff --git a/apps/web/src/design-audit/foundations.tsx b/apps/web/src/design-audit/foundations.tsx
index eb219b46..03e6e46d 100644
--- a/apps/web/src/design-audit/foundations.tsx
+++ b/apps/web/src/design-audit/foundations.tsx
@@ -127,7 +127,7 @@ export function Foundations() {
 			<AuditPlate
 				item="icons"
 				title="Icons"
-				description="Every local SVG and shared Nucleo glyph currently used by the interface."
+				description="Every Nucleo icon currently used by the interface."
 			>
 				<IconCatalogue />
 			</AuditPlate>
diff --git a/apps/web/src/design-audit/icons.tsx b/apps/web/src/design-audit/icons.tsx
index 7e177fb3..f48202d6 100644
--- a/apps/web/src/design-audit/icons.tsx
+++ b/apps/web/src/design-audit/icons.tsx
@@ -34,13 +34,15 @@ import messagePlus from "../../../../packages/editor/src/assets/icons/message-pl
 import type { IconProps } from "@chopin/icons";
 import type { ComponentType } from "react";
 
-type LocalIcon = {
+type IconCatalogueItem = {
+	className?: string;
 	duplicate?: string;
+	icon?: ComponentType<IconProps>;
 	name: string;
-	source: string;
+	source?: string;
 };
 
-const LOCAL_ICONS: readonly LocalIcon[] = [
+const NUCLEO_ICONS: readonly IconCatalogueItem[] = [
 	{ name: "Add project", source: addProject },
 	{ name: "Book bookmark", source: book },
 	{ name: "Archive", source: archive },
@@ -58,13 +60,6 @@ const LOCAL_ICONS: readonly LocalIcon[] = [
 	{ name: "Planner stop", source: plannerStop },
 	{ name: "Link plus", source: linkPlus },
 	{ name: "Message plus", source: messagePlus },
-];
-
-const NUCLEO_ICONS: readonly {
-	className?: string;
-	icon: ComponentType<IconProps>;
-	name: string;
-}[] = [
 	{ icon: ArrowUpIcon, name: "Arrow up" },
 	{ icon: ChevronIcon, name: "Chevron right" },
 	{ className: "rotate-90", icon: ChevronIcon, name: "Chevron down (rotated)" },
@@ -95,29 +90,17 @@ export function IconCatalogue() {
 					</div>
 				))}
 			</div>
-			<h4>Local SVG assets</h4>
-			<div className="design-audit-icon-grid">
-				{LOCAL_ICONS.map(icon => (
-					<figure key={icon.name}>
-						<span className="design-audit-icon-frame">
-							<img alt="" src={icon.source} />
-						</span>
-						<figcaption>
-							<strong>{icon.name}</strong>
-							{icon.duplicate ? <span>Consolidated exact duplicate: {icon.duplicate}</span> : null}
-						</figcaption>
-					</figure>
-				))}
-			</div>
-			<h4>Nucleo components</h4>
+			<h4>Nucleo icons</h4>
 			<div className="design-audit-icon-grid">
-				{NUCLEO_ICONS.map(({ className, icon: Glyph, name }) => (
-					<figure key={name}>
+				{NUCLEO_ICONS.map(({ className, duplicate, icon: Glyph, name, source }) => (
+					<figure key={`${source ? "asset" : "component"}-${name}`}>
 						<span className="design-audit-icon-frame">
-							<Glyph aria-hidden="true" className={className} size={16} />
+							{source ? <img alt="" src={source} /> : null}
+							{Glyph ? <Glyph aria-hidden="true" className={className} size={16} /> : null}
 						</span>
 						<figcaption>
 							<strong>{name}</strong>
+							{duplicate ? <span>Consolidated exact duplicate: {duplicate}</span> : null}
 						</figcaption>
 					</figure>
 				))}
diff --git a/apps/web/src/icon-assets.test.ts b/apps/web/src/icon-assets.test.ts
index 2f963fbc..2aad4985 100644
--- a/apps/web/src/icon-assets.test.ts
+++ b/apps/web/src/icon-assets.test.ts
@@ -40,6 +40,16 @@ test("the interface uses only the shared Nucleo icon family", () => {
 	expect(icons).toContain('x1="9" x2="9" y1="3.25" y2="14.75"');
 });
 
+test("the design audit presents one Nucleo icon catalogue", () => {
+	let catalogue = readFileSync(join(root, "design-audit/icons.tsx"), "utf8");
+	let foundations = readFileSync(join(root, "design-audit/foundations.tsx"), "utf8");
+
+	expect(catalogue).toContain("Nucleo icons");
+	expect(catalogue).not.toContain("Local SVG assets");
+	expect(catalogue).not.toContain("Nucleo components");
+	expect(foundations).toContain("Every Nucleo icon currently used by the interface.");
+});
+
 test("callouts use their distinct semantic Nucleo icons", () => {
 	let callout = readFileSync(join(repository, "packages/editor/src/widgets/callout.tsx"), "utf8");
 	expect(callout).toContain('case "important":\n\t\t\treturn <SparkleIcon');

From 082541c0918706e4c9377519fe598a1fb6e26d76 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Fri, 28 Aug 2026 11:57:31 +0100
Subject: [PATCH 24/35] Normalize button size contracts

---
 apps/web/src/decision-view-control.tsx |  4 ++--
 apps/web/src/design-audit/controls.tsx |  8 ++++----
 apps/web/src/design-audit/surfaces.tsx |  8 ++++----
 apps/web/src/room-workspace.tsx        |  2 +-
 apps/web/src/theme.css                 |  6 +++---
 apps/web/src/tokens.test.ts            | 23 +++++++++++++++++++++++
 apps/web/src/workspace.tsx             |  2 +-
 7 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/apps/web/src/decision-view-control.tsx b/apps/web/src/decision-view-control.tsx
index ff40392f..048b487f 100644
--- a/apps/web/src/decision-view-control.tsx
+++ b/apps/web/src/decision-view-control.tsx
@@ -29,7 +29,7 @@ export function DecisionViewControl(
 			<button
 				aria-current={view === "plan" ? "page" : undefined}
 				aria-pressed={view === "plan"}
-				className={`btn h-[26px] rounded-md px-2.5 text-[14px] transition-[background-color,box-shadow,color] ${
+				className={`btn btn-sm transition-[background-color,box-shadow,color] ${
 					view === "plan"
 						? "bg-ground font-medium text-gray-800"
 						: "text-text-tertiary hover:bg-hover"
@@ -43,7 +43,7 @@ export function DecisionViewControl(
 				aria-current={view === "decisions" ? "page" : undefined}
 				aria-label={unanswered > 0 ? `Decisions, ${unanswered} unanswered` : "Decisions"}
 				aria-pressed={view === "decisions"}
-				className={`btn h-[26px] rounded-md px-2.5 text-[14px] transition-[background-color,box-shadow,color] ${
+				className={`btn btn-sm transition-[background-color,box-shadow,color] ${
 					view === "decisions"
 						? "bg-ground font-medium text-gray-800"
 						: "text-text-tertiary hover:bg-hover"
diff --git a/apps/web/src/design-audit/controls.tsx b/apps/web/src/design-audit/controls.tsx
index 7a64a3cc..54e4bdcb 100644
--- a/apps/web/src/design-audit/controls.tsx
+++ b/apps/web/src/design-audit/controls.tsx
@@ -40,7 +40,7 @@ export function Controls() {
 	return (
 		<>
 			<AuditPlate
-				description="Primary, secondary, tertiary, and destructive actions across stable states."
+				description="Two text sizes and one square icon size across every hierarchy and state."
 				item="buttons"
 				title="Buttons"
 			>
@@ -62,10 +62,10 @@ export function Controls() {
 						<ButtonRow className="btn-destructive" label="Delete document" />
 					</div>
 					<div className="design-audit-button-sizes">
-						<StateSample state="Medium">
+						<StateSample state="Medium · 32px high · 12px sides">
 							<button className="btn btn-md btn-primary" type="button">Medium</button>
 						</StateSample>
-						<StateSample state="Small">
+						<StateSample state="Small · 24px high · 8px sides">
 							<button className="btn btn-sm btn-secondary" type="button">Small</button>
 						</StateSample>
 						<StateSample state="Busy">
@@ -78,7 +78,7 @@ export function Controls() {
 			</AuditPlate>
 
 			<AuditPlate
-				description="The shared 28px icon control with a consistent 16px glyph."
+				description="The shared 28px square control with a 16px glyph and 6px inset."
 				item="icon-buttons"
 				title="Icon buttons"
 			>
diff --git a/apps/web/src/design-audit/surfaces.tsx b/apps/web/src/design-audit/surfaces.tsx
index 13a97319..34e03baf 100644
--- a/apps/web/src/design-audit/surfaces.tsx
+++ b/apps/web/src/design-audit/surfaces.tsx
@@ -150,12 +150,12 @@ function Navigation() {
 				aria-label="Compact workspace view"
 				className="workspace-navigation design-audit-compact-navigation"
 			>
-				<button className="btn btn-ghost min-h-11" type="button">Conversation</button>
-				<button className="btn btn-ghost min-h-11" type="button">Document</button>
-				<button aria-current="page" className="btn btn-ghost min-h-11" type="button">
+				<button className="btn btn-md btn-ghost min-h-11" type="button">Conversation</button>
+				<button className="btn btn-md btn-ghost min-h-11" type="button">Document</button>
+				<button aria-current="page" className="btn btn-md btn-ghost min-h-11" type="button">
 					Decisions
 				</button>
-				<button className="btn btn-ghost min-h-11" type="button">Background</button>
+				<button className="btn btn-md btn-ghost min-h-11" type="button">Background</button>
 			</nav>
 		</AuditPlate>
 	);
diff --git a/apps/web/src/room-workspace.tsx b/apps/web/src/room-workspace.tsx
index 267d5258..383f35a6 100644
--- a/apps/web/src/room-workspace.tsx
+++ b/apps/web/src/room-workspace.tsx
@@ -84,7 +84,7 @@ export function Header(
 						<>
 							<button
 								aria-label={`Return to ${label}`}
-								className="document-parent-breadcrumb btn btn-ghost min-w-0"
+								className="document-parent-breadcrumb btn btn-md btn-ghost min-w-0"
 								onClick={presentation.onChildClose}
 								type="button"
 							>
diff --git a/apps/web/src/theme.css b/apps/web/src/theme.css
index 6174acef..a08e45cb 100644
--- a/apps/web/src/theme.css
+++ b/apps/web/src/theme.css
@@ -230,18 +230,18 @@
 
 @utility btn-md {
 	height: 2rem;
-	padding-inline: calc(var(--spacing) * 2);
+	padding-inline: calc(var(--spacing) * 3);
 }
 
 @utility btn-sm {
 	height: 1.5rem;
-	padding-inline: var(--spacing);
+	padding-inline: calc(var(--spacing) * 2);
 }
 
 @utility btn-icon {
 	width: 1.75rem;
 	height: 1.75rem;
-	padding: 0;
+	padding: 0.375rem;
 }
 
 @utility btn-primary {
diff --git a/apps/web/src/tokens.test.ts b/apps/web/src/tokens.test.ts
index cda7147a..204736d9 100644
--- a/apps/web/src/tokens.test.ts
+++ b/apps/web/src/tokens.test.ts
@@ -110,6 +110,11 @@ function sizes(name: string): { height: number; width?: number } {
 	return result;
 }
 
+function inlinePadding(name: string): string | undefined {
+	let found = /\n\s*padding-inline:\s*([^;]+);/.exec(utility(name));
+	return found?.[1]?.trim();
+}
+
 describe("palette", () => {
 	let steps = [50, 100, 150, 200, 300, 400, 500, 600, 700, 750, 800, 850, 900, 950];
 
@@ -246,6 +251,9 @@ describe("controls", () => {
 		expect(sizes("btn-md")).toEqual({ height: 32 });
 		expect(sizes("btn-sm")).toEqual({ height: 24 });
 		expect(sizes("btn-icon")).toEqual({ height: 28, width: 28 });
+		expect(inlinePadding("btn-md")).toBe("calc(var(--spacing) * 3)");
+		expect(inlinePadding("btn-sm")).toBe("calc(var(--spacing) * 2)");
+		expect(utility("btn-icon")).toMatch(/\n\s*padding:\s*0\.375rem;/);
 		expect(hex("--color-destructive-hover")).toBe("#c44746");
 		expect(hex("--color-destructive-active")).toBe("#b34140");
 	});
@@ -265,6 +273,21 @@ describe("controls", () => {
 		expect(rule).toMatch(/&:disabled\s*\{[\s\S]*color:\s*var\(--color-gray-600\)/);
 	});
 
+	it("requires every shared button consumer to choose a size", () => {
+		let offenders: string[] = [];
+		for (let file of [...sources(join(ROOT, "apps")), ...sources(join(ROOT, "packages"))]) {
+			if (!file.endsWith(".tsx")) continue;
+			let lines = readFileSync(file, "utf8").split("\n");
+			for (let [index, line] of lines.entries()) {
+				if (!line.includes("className=") || !/(?<![\w-])btn(?![\w-])/.test(line)) continue;
+				if (/\bbtn-(?:md|sm|icon)\b/.test(line)) continue;
+				offenders.push(`${relative(ROOT, file)}:${index + 1}`);
+			}
+		}
+
+		expect(offenders).toEqual([]);
+	});
+
 	it("keeps button labels on one line", () => {
 		expect(utility("btn")).toMatch(/white-space:\s*nowrap/);
 	});
diff --git a/apps/web/src/workspace.tsx b/apps/web/src/workspace.tsx
index 25a8f20c..1dba4cce 100644
--- a/apps/web/src/workspace.tsx
+++ b/apps/web/src/workspace.tsx
@@ -493,7 +493,7 @@ export function Workspace(
 								aria-current={active ? "page" : undefined}
 								aria-label={label}
 								aria-pressed={active}
-								className="btn btn-ghost min-h-11 min-w-0"
+								className="btn btn-md btn-ghost min-h-11 min-w-0"
 								key={destination}
 								onClick={event => navigate(destination, event.currentTarget)}
 								type="button"

From 3f51e512568aba95f69fe2354662abde23502183 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Fri, 28 Aug 2026 12:00:24 +0100
Subject: [PATCH 25/35] Add button surface hairlines

---
 apps/web/src/theme.css      | 4 ++++
 apps/web/src/tokens.test.ts | 8 ++++++++
 2 files changed, 12 insertions(+)

diff --git a/apps/web/src/theme.css b/apps/web/src/theme.css
index a08e45cb..f5188bb9 100644
--- a/apps/web/src/theme.css
+++ b/apps/web/src/theme.css
@@ -247,6 +247,8 @@
 @utility btn-primary {
 	background-color: var(--color-brand);
 	color: var(--color-page);
+	outline: var(--edge-width) solid var(--color-edge);
+	outline-offset: calc(-1 * var(--edge-width));
 
 	&:hover:not(:disabled) {
 		background-color: var(--color-brand-hover);
@@ -260,6 +262,8 @@
 @utility btn-secondary {
 	background-color: var(--color-gray-200);
 	color: var(--color-text-primary);
+	outline: var(--edge-width) solid var(--color-edge);
+	outline-offset: calc(-1 * var(--edge-width));
 
 	&:hover:not(:disabled) {
 		background-color: var(--color-gray-300);
diff --git a/apps/web/src/tokens.test.ts b/apps/web/src/tokens.test.ts
index 204736d9..c99dfcad 100644
--- a/apps/web/src/tokens.test.ts
+++ b/apps/web/src/tokens.test.ts
@@ -267,6 +267,14 @@ describe("controls", () => {
 		}
 	});
 
+	it("gives primary and secondary buttons the passive hairline", () => {
+		for (let tier of ["primary", "secondary"]) {
+			let rest = utility(`btn-${tier}`).split("&:")[0]!;
+			expect(rest).toContain("outline: var(--edge-width) solid var(--color-edge)");
+			expect(rest).toContain("outline-offset: calc(-1 * var(--edge-width))");
+		}
+	});
+
 	it("uses the common disabled button fill and ink", () => {
 		let rule = utility("btn");
 		expect(rule).toMatch(/&:disabled\s*\{[\s\S]*background-color:\s*var\(--color-gray-200\)/);

From b6896b09377be25894ac97a0119f30324fb8c586 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Fri, 28 Aug 2026 12:01:21 +0100
Subject: [PATCH 26/35] Strengthen primary button hairline

---
 apps/web/src/theme.css      |  2 +-
 apps/web/src/tokens.test.ts | 10 ++++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/theme.css b/apps/web/src/theme.css
index f5188bb9..5e8416c9 100644
--- a/apps/web/src/theme.css
+++ b/apps/web/src/theme.css
@@ -247,7 +247,7 @@
 @utility btn-primary {
 	background-color: var(--color-brand);
 	color: var(--color-page);
-	outline: var(--edge-width) solid var(--color-edge);
+	outline: var(--edge-width) solid rgb(0 0 0 / 12%);
 	outline-offset: calc(-1 * var(--edge-width));
 
 	&:hover:not(:disabled) {
diff --git a/apps/web/src/tokens.test.ts b/apps/web/src/tokens.test.ts
index c99dfcad..e969fb10 100644
--- a/apps/web/src/tokens.test.ts
+++ b/apps/web/src/tokens.test.ts
@@ -267,10 +267,12 @@ describe("controls", () => {
 		}
 	});
 
-	it("gives primary and secondary buttons the passive hairline", () => {
-		for (let tier of ["primary", "secondary"]) {
-			let rest = utility(`btn-${tier}`).split("&:")[0]!;
-			expect(rest).toContain("outline: var(--edge-width) solid var(--color-edge)");
+	it("gives primary and secondary buttons distinct hairlines", () => {
+		let primary = utility("btn-primary").split("&:")[0]!;
+		let secondary = utility("btn-secondary").split("&:")[0]!;
+		expect(primary).toContain("outline: var(--edge-width) solid rgb(0 0 0 / 12%)");
+		expect(secondary).toContain("outline: var(--edge-width) solid var(--color-edge)");
+		for (let rest of [primary, secondary]) {
 			expect(rest).toContain("outline-offset: calc(-1 * var(--edge-width))");
 		}
 	});

From 5c7417b034c5cda56069be2e0fabf7bc1bf13009 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Fri, 28 Aug 2026 12:02:17 +0100
Subject: [PATCH 27/35] Refine filled button depth

---
 apps/web/src/theme.css      |  5 ++++-
 apps/web/src/tokens.test.ts | 13 ++++++++++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/theme.css b/apps/web/src/theme.css
index 5e8416c9..fcce8b71 100644
--- a/apps/web/src/theme.css
+++ b/apps/web/src/theme.css
@@ -246,8 +246,9 @@
 
 @utility btn-primary {
 	background-color: var(--color-brand);
+	box-shadow: var(--shadow-resting);
 	color: var(--color-page);
-	outline: var(--edge-width) solid rgb(0 0 0 / 12%);
+	outline: var(--edge-width) solid rgb(0 0 0 / 15%);
 	outline-offset: calc(-1 * var(--edge-width));
 
 	&:hover:not(:disabled) {
@@ -290,6 +291,8 @@
 @utility btn-destructive {
 	background-color: var(--color-destructive);
 	color: var(--color-page);
+	outline: var(--edge-width) solid var(--color-edge);
+	outline-offset: calc(-1 * var(--edge-width));
 
 	&:hover:not(:disabled) {
 		background-color: var(--color-destructive-hover);
diff --git a/apps/web/src/tokens.test.ts b/apps/web/src/tokens.test.ts
index e969fb10..4eddf3c1 100644
--- a/apps/web/src/tokens.test.ts
+++ b/apps/web/src/tokens.test.ts
@@ -267,16 +267,23 @@ describe("controls", () => {
 		}
 	});
 
-	it("gives primary and secondary buttons distinct hairlines", () => {
+	it("gives filled buttons their designed hairlines", () => {
 		let primary = utility("btn-primary").split("&:")[0]!;
 		let secondary = utility("btn-secondary").split("&:")[0]!;
-		expect(primary).toContain("outline: var(--edge-width) solid rgb(0 0 0 / 12%)");
+		let destructive = utility("btn-destructive").split("&:")[0]!;
+		expect(primary).toContain("outline: var(--edge-width) solid rgb(0 0 0 / 15%)");
 		expect(secondary).toContain("outline: var(--edge-width) solid var(--color-edge)");
-		for (let rest of [primary, secondary]) {
+		expect(destructive).toContain("outline: var(--edge-width) solid var(--color-edge)");
+		for (let rest of [primary, secondary, destructive]) {
 			expect(rest).toContain("outline-offset: calc(-1 * var(--edge-width))");
 		}
 	});
 
+	it("raises primary buttons with the resting shadow", () => {
+		let primary = utility("btn-primary").split("&:")[0]!;
+		expect(primary).toContain("box-shadow: var(--shadow-resting)");
+	});
+
 	it("uses the common disabled button fill and ink", () => {
 		let rule = utility("btn");
 		expect(rule).toMatch(/&:disabled\s*\{[\s\S]*background-color:\s*var\(--color-gray-200\)/);

From 4bbe9a90ffc7c378570132538f6dd5aeb227b8b8 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Fri, 28 Aug 2026 12:03:52 +0100
Subject: [PATCH 28/35] Dim disabled button variants

---
 apps/web/src/theme.css      | 3 +--
 apps/web/src/tokens.test.ts | 7 ++++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/theme.css b/apps/web/src/theme.css
index fcce8b71..0a5af244 100644
--- a/apps/web/src/theme.css
+++ b/apps/web/src/theme.css
@@ -222,9 +222,8 @@
 	white-space: nowrap;
 
 	&:disabled {
-		background-color: var(--color-gray-200);
-		color: var(--color-gray-600);
 		cursor: default;
+		opacity: 0.4;
 	}
 }
 
diff --git a/apps/web/src/tokens.test.ts b/apps/web/src/tokens.test.ts
index 4eddf3c1..f595ea46 100644
--- a/apps/web/src/tokens.test.ts
+++ b/apps/web/src/tokens.test.ts
@@ -284,10 +284,11 @@ describe("controls", () => {
 		expect(primary).toContain("box-shadow: var(--shadow-resting)");
 	});
 
-	it("uses the common disabled button fill and ink", () => {
+	it("dims each button's default style when disabled", () => {
 		let rule = utility("btn");
-		expect(rule).toMatch(/&:disabled\s*\{[\s\S]*background-color:\s*var\(--color-gray-200\)/);
-		expect(rule).toMatch(/&:disabled\s*\{[\s\S]*color:\s*var\(--color-gray-600\)/);
+		let disabled = /&:disabled\s*\{([^}]*)\}/.exec(rule)?.[1] ?? "";
+		expect(disabled).toContain("opacity: 0.4");
+		expect(disabled).not.toMatch(/background-color|color:/);
 	});
 
 	it("requires every shared button consumer to choose a size", () => {

From 8e877face761d44a5e627743502769dfbeea441f Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Fri, 28 Aug 2026 12:09:56 +0100
Subject: [PATCH 29/35] Standardize interface icon sizes

---
 apps/web/src/chat/chat.tsx                    |  2 +-
 apps/web/src/chat/transcript.test.tsx         |  4 +-
 apps/web/src/chat/transcript.tsx              |  4 +-
 apps/web/src/design-audit/controls.tsx        | 12 +++---
 apps/web/src/design-audit/foundations.css     |  4 +-
 apps/web/src/design-audit/icons.tsx           | 13 +++---
 apps/web/src/design-audit/surfaces.tsx        | 20 +++++-----
 apps/web/src/document-picker.tsx              |  4 +-
 apps/web/src/hosted.test.ts                   |  4 +-
 apps/web/src/icon-assets.test.ts              | 40 +++++++++++++++++++
 apps/web/src/navigation-chrome.test.ts        |  8 ++--
 apps/web/src/project-sidebar.tsx              |  2 +-
 apps/web/src/repository-picker.tsx            |  2 +-
 apps/web/src/theme.css                        |  2 +-
 apps/web/src/tokens.test.ts                   |  2 +-
 apps/web/src/workspace.tsx                    |  2 +-
 packages/editor/src/callout-style.test.ts     |  3 ++
 packages/editor/src/callout.css               |  6 +++
 packages/editor/src/decisions.tsx             |  4 +-
 packages/editor/src/send-action.tsx           |  2 +-
 packages/editor/src/widgets/callout.tsx       |  2 +-
 .../src/widgets/research-composer.test.tsx    |  4 +-
 packages/editor/src/widgets/research.tsx      |  2 +-
 packages/icons/src/icon.tsx                   |  2 +-
 packages/icons/src/system.tsx                 |  2 +-
 packages/question/src/react/question-view.tsx |  8 ++--
 26 files changed, 106 insertions(+), 54 deletions(-)

diff --git a/apps/web/src/chat/chat.tsx b/apps/web/src/chat/chat.tsx
index 1be3b47e..c02cbc5b 100644
--- a/apps/web/src/chat/chat.tsx
+++ b/apps/web/src/chat/chat.tsx
@@ -420,7 +420,7 @@ export function Chat(
 								title="Stop Planner"
 								type="button"
 							>
-								<img alt="" className="size-[16px]" src={plannerStop} />
+								<img alt="" className="size-[14px]" src={plannerStop} />
 							</button>
 						)}
 						<SendAction
diff --git a/apps/web/src/chat/transcript.test.tsx b/apps/web/src/chat/transcript.test.tsx
index 76e75ccb..675be4fd 100644
--- a/apps/web/src/chat/transcript.test.tsx
+++ b/apps/web/src/chat/transcript.test.tsx
@@ -35,8 +35,8 @@ test("queued messages use the standard icon-button glyph", () => {
 		}),
 	);
 
-	expect(markup).toMatch(/aria-label="Withdraw queued message"[^>]*>.*?height="16"/s);
-	expect(markup).toMatch(/aria-label="Withdraw queued message"[^>]*>.*?width="16"/s);
+	expect(markup).toMatch(/aria-label="Withdraw queued message"[^>]*>.*?height="14"/s);
+	expect(markup).toMatch(/aria-label="Withdraw queued message"[^>]*>.*?width="14"/s);
 	expect(markup).toContain("<title>xmark</title>");
 	expect(markup).not.toContain(">×</button>");
 });
diff --git a/apps/web/src/chat/transcript.tsx b/apps/web/src/chat/transcript.tsx
index 25e200e1..a04e1b6c 100644
--- a/apps/web/src/chat/transcript.tsx
+++ b/apps/web/src/chat/transcript.tsx
@@ -96,7 +96,7 @@ function SystemEntry({ item }: { item: Extract<Group, { kind: "system" }> }) {
 	return (
 		<div className="flex items-start gap-3 text-text-tertiary" data-chat-system>
 			<div className="shrink-0">
-				<SignInIcon aria-hidden="true" size={20} />
+				<SignInIcon aria-hidden="true" size={14} />
 			</div>
 			<p className="m-0 min-w-0 break-words text-[14px] [overflow-wrap:anywhere]">
 				{displayText(item.text)}
@@ -137,7 +137,7 @@ function MessageBody(
 								title="Withdraw"
 								type="button"
 							>
-								<CloseIcon aria-hidden="true" size={16} />
+								<CloseIcon aria-hidden="true" size={14} />
 							</button>
 						)}
 				</div>
diff --git a/apps/web/src/design-audit/controls.tsx b/apps/web/src/design-audit/controls.tsx
index 54e4bdcb..adaa8c34 100644
--- a/apps/web/src/design-audit/controls.tsx
+++ b/apps/web/src/design-audit/controls.tsx
@@ -78,7 +78,7 @@ export function Controls() {
 			</AuditPlate>
 
 			<AuditPlate
-				description="The shared 28px square control with a 16px glyph and 6px inset."
+				description="The shared 28px square control with a 14px glyph and 7px inset."
 				item="icon-buttons"
 				title="Icon buttons"
 			>
@@ -92,7 +92,7 @@ export function Controls() {
 								disabled={state === "Disabled"}
 								type="button"
 							>
-								<PlusIcon aria-hidden="true" size={16} />
+								<PlusIcon aria-hidden="true" size={14} />
 							</button>
 						</StateSample>
 					))}
@@ -204,7 +204,7 @@ export function Controls() {
 				<div aria-label="Documents" className="design-audit-selection-list" role="listbox">
 					<div role="option">Architecture notes</div>
 					<div aria-selected="true" role="option">
-						<CheckIcon aria-hidden="true" size={16} />Design system audit
+						<CheckIcon aria-hidden="true" size={14} />Design system audit
 					</div>
 					<div aria-disabled="true" role="option">Archived proposal</div>
 				</div>
@@ -249,7 +249,7 @@ export function Controls() {
 						className="field design-audit-dropdown-trigger"
 						type="button"
 					>
-						Active documents<ChevronIcon aria-hidden="true" className="rotate-90" size={16} />
+						Active documents<ChevronIcon aria-hidden="true" className="rotate-90" size={14} />
 					</button>
 					<div className="design-audit-dropdown-open">
 						<button
@@ -257,7 +257,7 @@ export function Controls() {
 							className="field design-audit-dropdown-trigger"
 							type="button"
 						>
-							Active documents<ChevronIcon aria-hidden="true" className="rotate-90" size={16} />
+							Active documents<ChevronIcon aria-hidden="true" className="rotate-90" size={14} />
 						</button>
 						<div
 							aria-label="Document collection"
@@ -265,7 +265,7 @@ export function Controls() {
 							role="listbox"
 						>
 							<div aria-selected="true" role="option">
-								<CheckIcon aria-hidden="true" size={16} />Active documents
+								<CheckIcon aria-hidden="true" size={14} />Active documents
 							</div>
 							<div role="option">Archived documents</div>
 						</div>
diff --git a/apps/web/src/design-audit/foundations.css b/apps/web/src/design-audit/foundations.css
index 85ef76dc..5af9b58c 100644
--- a/apps/web/src/design-audit/foundations.css
+++ b/apps/web/src/design-audit/foundations.css
@@ -157,8 +157,8 @@
 }
 
 .design-audit-icon-frame img {
-	width: 1rem;
-	height: 1rem;
+	width: 0.875rem;
+	height: 0.875rem;
 	object-fit: contain;
 }
 
diff --git a/apps/web/src/design-audit/icons.tsx b/apps/web/src/design-audit/icons.tsx
index f48202d6..51029fa6 100644
--- a/apps/web/src/design-audit/icons.tsx
+++ b/apps/web/src/design-audit/icons.tsx
@@ -85,7 +85,7 @@ export function IconCatalogue() {
 			<div className="design-audit-icon-states" aria-label="Icon colour states">
 				{(["Default", "Active", "Disabled"] as const).map(state => (
 					<div data-icon-state={state.toLowerCase()} key={state}>
-						<CheckIcon aria-hidden="true" size={16} />
+						<CheckIcon aria-hidden="true" size={14} />
 						<span>{state}</span>
 					</div>
 				))}
@@ -96,7 +96,7 @@ export function IconCatalogue() {
 					<figure key={`${source ? "asset" : "component"}-${name}`}>
 						<span className="design-audit-icon-frame">
 							{source ? <img alt="" src={source} /> : null}
-							{Glyph ? <Glyph aria-hidden="true" className={className} size={16} /> : null}
+							{Glyph ? <Glyph aria-hidden="true" className={className} size={14} /> : null}
 						</span>
 						<figcaption>
 							<strong>{name}</strong>
@@ -106,10 +106,13 @@ export function IconCatalogue() {
 				))}
 			</div>
 			<div className="design-audit-icon-sizes" aria-label="Icon size roles">
-				{([14, 16, 20] as const).map(size => (
-					<div key={size}>
+				{([
+					{ label: "Interface", size: 14 },
+					{ label: "Illustrative", size: 24 },
+				] as const).map(({ label, size }) => (
+					<div key={label}>
 						<MessageIcon aria-hidden="true" size={size} />
-						<span>{size}px</span>
+						<span>{label} · {size}px</span>
 					</div>
 				))}
 			</div>
diff --git a/apps/web/src/design-audit/surfaces.tsx b/apps/web/src/design-audit/surfaces.tsx
index 34e03baf..1338e15c 100644
--- a/apps/web/src/design-audit/surfaces.tsx
+++ b/apps/web/src/design-audit/surfaces.tsx
@@ -99,17 +99,17 @@ function Lists() {
 		>
 			<div className="design-audit-surface-list" role="listbox" aria-label="Documents">
 				<div role="option" aria-selected="false">
-					<DocumentIcon size={16} />Design notes
+					<DocumentIcon size={14} />Design notes
 				</div>
 				<div role="option" aria-selected="true">
-					<DocumentIcon size={16} />Design system audit<CheckIcon size={16} />
+					<DocumentIcon size={14} />Design system audit<CheckIcon size={14} />
 				</div>
 				<div role="option" aria-selected="false" data-audit-state="hover">
-					<DocumentIcon size={16} />Editor architecture
+					<DocumentIcon size={14} />Editor architecture
 				</div>
 			</div>
 			<div className="design-audit-empty-row">
-				<SearchIcon size={20} />
+				<SearchIcon size={14} />
 				<span>No matching documents</span>
 			</div>
 		</AuditPlate>
@@ -127,23 +127,23 @@ function Navigation() {
 				<div className="design-audit-sidebar-heading">
 					<span>Chopin</span>
 					<button aria-label="Add document" className="btn btn-icon btn-ghost" type="button">
-						<PlusIcon size={16} />
+						<PlusIcon size={14} />
 					</button>
 				</div>
 				<a href="#surfaces">
-					<DocumentIcon size={16} />Product direction
+					<DocumentIcon size={14} />Product direction
 				</a>
 				<a aria-current="page" href="#surfaces">
-					<DocumentIcon size={16} />Design system audit
+					<DocumentIcon size={14} />Design system audit
 				</a>
 				<a data-navigation-state="ancestor" href="#surfaces">
 					<ChevronIcon size={14} />Research notes
 				</a>
 				<a data-navigation-state="archived" href="#surfaces">
-					<ArchiveIcon size={16} />Archived draft
+					<ArchiveIcon size={14} />Archived draft
 				</a>
 				<div className="design-audit-navigation-loading">
-					<LoaderIcon size={16} />Loading more…
+					<LoaderIcon size={14} />Loading more…
 				</div>
 			</nav>
 			<nav
@@ -231,7 +231,7 @@ function Decisions() {
 					className="btn btn-sm btn-ghost design-audit-resolved-toggle"
 					type="button"
 				>
-					<ChevronIcon className="rotate-90" size={16} />
+					<ChevronIcon className="rotate-90" size={14} />
 					<span>3</span>
 					<span>resolved</span>
 				</button>
diff --git a/apps/web/src/document-picker.tsx b/apps/web/src/document-picker.tsx
index c226e664..9a123235 100644
--- a/apps/web/src/document-picker.tsx
+++ b/apps/web/src/document-picker.tsx
@@ -288,7 +288,7 @@ export function DocumentPicker(
 									)}
 								</span>
 								{selected && (
-									<CheckIcon aria-hidden="true" className="shrink-0 text-brand-ink" size={16} />
+									<CheckIcon aria-hidden="true" className="shrink-0 text-brand-ink" size={14} />
 								)}
 							</button>
 						);
@@ -332,7 +332,7 @@ export function DocumentPicker(
 									onClick={() => void create()}
 									type="button"
 								>
-									<PlusIcon aria-hidden="true" size={16} />
+									<PlusIcon aria-hidden="true" size={14} />
 									<span className="ml-1">
 										{creating ? "Creating..." : "Create new document"}
 									</span>
diff --git a/apps/web/src/hosted.test.ts b/apps/web/src/hosted.test.ts
index a698ac89..0790ed5f 100644
--- a/apps/web/src/hosted.test.ts
+++ b/apps/web/src/hosted.test.ts
@@ -404,8 +404,8 @@ describe("anchored child lifecycle", () => {
 		expect(child).toContain('aria-label="Close Source review"');
 		expect(child).toContain('data-child-document-close="true"');
 		expect(child).toContain("<title>xmark</title>");
-		expect(child).toContain('height="16"');
-		expect(child).toContain('width="16"');
+		expect(child).toContain('height="14"');
+		expect(child).toContain('width="14"');
 		expect(parent).not.toContain("data-child-document-close");
 	});
 
diff --git a/apps/web/src/icon-assets.test.ts b/apps/web/src/icon-assets.test.ts
index 2aad4985..7a8c3fd2 100644
--- a/apps/web/src/icon-assets.test.ts
+++ b/apps/web/src/icon-assets.test.ts
@@ -40,6 +40,46 @@ test("the interface uses only the shared Nucleo icon family", () => {
 	expect(icons).toContain('x1="9" x2="9" y1="3.25" y2="14.75"');
 });
 
+test("interface icons default to fourteen pixels", () => {
+	let icon = readFileSync(join(repository, "packages/icons/src/icon.tsx"), "utf8");
+	let system = readFileSync(join(repository, "packages/icons/src/system.tsx"), "utf8");
+	expect(icon).toContain("size = 14");
+	expect(system).toContain("LoaderIcon({ size = 14");
+
+	let names = [
+		"Archive",
+		"ArrowUp",
+		"Check",
+		"Chevron",
+		"Close",
+		"Document",
+		"Info",
+		"Lightbulb",
+		"Loader",
+		"Message",
+		"Plus",
+		"Search",
+		"SignIn",
+		"Siren",
+		"Sparkle",
+		"Warning",
+	].join("|");
+	let explicit = new RegExp(`<(?:${names})Icon\\b[^>]*\\bsize=\\{(\\d+)\\}`, "gs");
+	let offenders: string[] = [];
+	for (
+		let file of sourceFiles(join(repository, "apps")).concat(
+			sourceFiles(join(repository, "packages")),
+		)
+	) {
+		for (let match of readFileSync(file, "utf8").matchAll(explicit)) {
+			let size = Number(match[1]);
+			let emptyStateException = file.endsWith("design-audit/surfaces.tsx") && size === 24;
+			if (size !== 14 && !emptyStateException) offenders.push(`${file}: ${match[0]}`);
+		}
+	}
+	expect(offenders).toEqual([]);
+});
+
 test("the design audit presents one Nucleo icon catalogue", () => {
 	let catalogue = readFileSync(join(root, "design-audit/icons.tsx"), "utf8");
 	let foundations = readFileSync(join(root, "design-audit/foundations.tsx"), "utf8");
diff --git a/apps/web/src/navigation-chrome.test.ts b/apps/web/src/navigation-chrome.test.ts
index 0d55d5f1..d3bb2db1 100644
--- a/apps/web/src/navigation-chrome.test.ts
+++ b/apps/web/src/navigation-chrome.test.ts
@@ -9,13 +9,13 @@ import { Header } from "./room-workspace";
 import type { ComponentProps } from "react";
 
 describe("the Figma navigation chrome", () => {
-	test("uses the standard sixteen-pixel glyph in an icon button", () => {
+	test("uses the standard fourteen-pixel glyph in an icon button", () => {
 		let markup = renderToStaticMarkup(createElement(ProjectSidebarExpandButton, {
 			onExpand: () => {},
 		}));
 
-		expect(markup).toContain('height="16"');
-		expect(markup).toContain('width="16"');
+		expect(markup).toContain('height="14"');
+		expect(markup).toContain('width="14"');
 	});
 
 	test("renders sidebar control glyphs at fourteen pixels", () => {
@@ -74,7 +74,7 @@ describe("the Figma navigation chrome", () => {
 		expect(markup).toMatch(
 			/<button[^>]*class="project-sidebar-primary-action"[^>]*>.*?new-document\.svg.*?New document<\/span>/s,
 		);
-		expect(markup).toMatch(/height="18" src="[^"]*chopin\.svg" width="18"/);
+		expect(markup).toMatch(/height="14" src="[^"]*chopin\.svg" width="14"/);
 		expect(markup).toMatch(
 			/aria-label="New document in testing-sql-transcripts"[^>]*>.*?new-document\.svg/s,
 		);
diff --git a/apps/web/src/project-sidebar.tsx b/apps/web/src/project-sidebar.tsx
index f4b497db..22b35923 100644
--- a/apps/web/src/project-sidebar.tsx
+++ b/apps/web/src/project-sidebar.tsx
@@ -365,7 +365,7 @@ export function ProjectSidebar(
 			<div className="min-h-0 flex-1 overflow-y-auto">
 				<header className="project-sidebar-header group/sidebar-header">
 					<div className="flex items-center gap-2">
-						<img alt="" height={18} src={chopinIcon} width={18} />
+						<img alt="" height={14} src={chopinIcon} width={14} />
 						<span className="text-sm font-semibold text-brand">Chopin</span>
 					</div>
 					<button
diff --git a/apps/web/src/repository-picker.tsx b/apps/web/src/repository-picker.tsx
index 884827d6..e2c9d31a 100644
--- a/apps/web/src/repository-picker.tsx
+++ b/apps/web/src/repository-picker.tsx
@@ -348,7 +348,7 @@ export function RepositoryPicker(
 												<CheckIcon
 													aria-hidden="true"
 													className="shrink-0 text-brand-ink"
-													size={16}
+													size={14}
 												/>
 											)}
 										</button>
diff --git a/apps/web/src/theme.css b/apps/web/src/theme.css
index 0a5af244..a0bfeedd 100644
--- a/apps/web/src/theme.css
+++ b/apps/web/src/theme.css
@@ -240,7 +240,7 @@
 @utility btn-icon {
 	width: 1.75rem;
 	height: 1.75rem;
-	padding: 0.375rem;
+	padding: 0.4375rem;
 }
 
 @utility btn-primary {
diff --git a/apps/web/src/tokens.test.ts b/apps/web/src/tokens.test.ts
index f595ea46..acaef2fe 100644
--- a/apps/web/src/tokens.test.ts
+++ b/apps/web/src/tokens.test.ts
@@ -253,7 +253,7 @@ describe("controls", () => {
 		expect(sizes("btn-icon")).toEqual({ height: 28, width: 28 });
 		expect(inlinePadding("btn-md")).toBe("calc(var(--spacing) * 3)");
 		expect(inlinePadding("btn-sm")).toBe("calc(var(--spacing) * 2)");
-		expect(utility("btn-icon")).toMatch(/\n\s*padding:\s*0\.375rem;/);
+		expect(utility("btn-icon")).toMatch(/\n\s*padding:\s*0\.4375rem;/);
 		expect(hex("--color-destructive-hover")).toBe("#c44746");
 		expect(hex("--color-destructive-active")).toBe("#b34140");
 	});
diff --git a/apps/web/src/workspace.tsx b/apps/web/src/workspace.tsx
index 1dba4cce..dc6b8812 100644
--- a/apps/web/src/workspace.tsx
+++ b/apps/web/src/workspace.tsx
@@ -430,7 +430,7 @@ export function Workspace(
 											onClick={childPresentation.onClose}
 											type="button"
 										>
-											<CloseIcon aria-hidden="true" size={16} />
+											<CloseIcon aria-hidden="true" size={14} />
 										</button>
 									</div>
 								)}
diff --git a/packages/editor/src/callout-style.test.ts b/packages/editor/src/callout-style.test.ts
index f1d83338..517c53de 100644
--- a/packages/editor/src/callout-style.test.ts
+++ b/packages/editor/src/callout-style.test.ts
@@ -7,6 +7,9 @@ let styles = readFileSync(join(import.meta.dir, "callout.css"), "utf8");
 test("callouts share the compact aligned spacing", () => {
 	expect(styles).toMatch(/\[data-plan-type\]\s*{[^}]*padding:\s*0\.75rem 0\.875rem/s);
 	expect(styles).toMatch(/\.plan-callout-heading\s*{[^}]*gap:\s*0\.375rem/s);
+	expect(styles).toMatch(
+		/\.plan-callout-type > svg,[^{]+{[^}]*width:\s*0\.875rem;[^}]*height:\s*0\.875rem/s,
+	);
 	expect(styles).toMatch(/\[data-plan-body\]\s*{[^}]*padding-inline-start:\s*2\.125rem/s);
 	expect(styles).toMatch(/\[data-plan-body\] > :first-child\s*{[^}]*margin-block-start:\s*0/s);
 });
diff --git a/packages/editor/src/callout.css b/packages/editor/src/callout.css
index 6de93439..72805d25 100644
--- a/packages/editor/src/callout.css
+++ b/packages/editor/src/callout.css
@@ -78,6 +78,12 @@
 		transform var(--duration-fast) var(--ease-out);
 }
 
+.plan-callout-type > svg,
+.plan-callout-option > svg {
+	width: 0.875rem;
+	height: 0.875rem;
+}
+
 .plan-callout-type:hover:not(:disabled),
 .plan-callout-type:focus-visible,
 .plan-callout-type[aria-expanded="true"] {
diff --git a/packages/editor/src/decisions.tsx b/packages/editor/src/decisions.tsx
index d5ab95aa..1d10d495 100644
--- a/packages/editor/src/decisions.tsx
+++ b/packages/editor/src/decisions.tsx
@@ -180,9 +180,9 @@ export function Decisions(
 						>
 							<MotionDisclosureIcon
 								className="editor-motion-feedback"
-								closed={<ChevronIcon size={16} />}
+								closed={<ChevronIcon size={14} />}
 								open={history}
-								opened={<ChevronIcon className="rotate-90" size={16} />}
+								opened={<ChevronIcon className="rotate-90" size={14} />}
 							/>
 							<span className="tabular-nums">{resolved}</span>
 							<span>resolved</span>
diff --git a/packages/editor/src/send-action.tsx b/packages/editor/src/send-action.tsx
index 2fe368be..396860d2 100644
--- a/packages/editor/src/send-action.tsx
+++ b/packages/editor/src/send-action.tsx
@@ -18,7 +18,7 @@ export function SendAction(
 			title={label}
 			type="button"
 		>
-			<ArrowUpIcon aria-hidden="true" size={16} />
+			<ArrowUpIcon aria-hidden="true" size={14} />
 		</button>
 	);
 }
diff --git a/packages/editor/src/widgets/callout.tsx b/packages/editor/src/widgets/callout.tsx
index 8ddf9143..ffe43cda 100644
--- a/packages/editor/src/widgets/callout.tsx
+++ b/packages/editor/src/widgets/callout.tsx
@@ -288,7 +288,7 @@ function Heading(
 									key={type}
 									value={type}
 								>
-									<TypeIcon type={type} size={16} />
+									<TypeIcon type={type} size={14} />
 									<Select.ItemText>{LABELS[type]}</Select.ItemText>
 									<Select.ItemIndicator asChild>
 										<CheckIcon aria-hidden="true" size={14} />
diff --git a/packages/editor/src/widgets/research-composer.test.tsx b/packages/editor/src/widgets/research-composer.test.tsx
index 834a20eb..13b8ceab 100644
--- a/packages/editor/src/widgets/research-composer.test.tsx
+++ b/packages/editor/src/widgets/research-composer.test.tsx
@@ -160,8 +160,8 @@ describe("research composer", () => {
 		expect(markup).toContain('title="Start research"');
 		expect(markup).toContain("send-action btn btn-icon btn-primary rounded-full");
 		expect(markup).toContain('aria-hidden="true"');
-		expect(markup).toContain('height="16"');
-		expect(markup).toContain('width="16"');
+		expect(markup).toContain('height="14"');
+		expect(markup).toContain('width="14"');
 	});
 
 	it("keeps one exact brief actionable after a failed create", () => {
diff --git a/packages/editor/src/widgets/research.tsx b/packages/editor/src/widgets/research.tsx
index dce4b5b4..873f540a 100644
--- a/packages/editor/src/widgets/research.tsx
+++ b/packages/editor/src/widgets/research.tsx
@@ -155,7 +155,7 @@ export function ResearchComposer(
 						title="Discard research question"
 						type="button"
 					>
-						<CloseIcon aria-hidden="true" size={16} />
+						<CloseIcon aria-hidden="true" size={14} />
 					</button>
 				)}
 			</div>
diff --git a/packages/icons/src/icon.tsx b/packages/icons/src/icon.tsx
index dafa2abb..fbb212ee 100644
--- a/packages/icons/src/icon.tsx
+++ b/packages/icons/src/icon.tsx
@@ -5,7 +5,7 @@ export type IconProps = Omit<SVGProps<SVGSVGElement>, "height" | "width"> & {
 };
 
 export function LineIcon(
-	{ children, size = 18, title, viewBox = "0 0 18 18", ...props }: IconProps & {
+	{ children, size = 14, title, viewBox = "0 0 18 18", ...props }: IconProps & {
 		children: React.ReactNode;
 		title?: string;
 		viewBox?: string;
diff --git a/packages/icons/src/system.tsx b/packages/icons/src/system.tsx
index 9d25f9c6..ade896c6 100644
--- a/packages/icons/src/system.tsx
+++ b/packages/icons/src/system.tsx
@@ -38,7 +38,7 @@ export function SearchIcon(props: IconProps) {
 	);
 }
 
-export function LoaderIcon({ size = 18, ...props }: IconProps) {
+export function LoaderIcon({ size = 14, ...props }: IconProps) {
 	let paths = [
 		[
 			"M9,5c-.414,0-.75-.336-.75-.75V1.75c0-.414,.336-.75,.75-.75s.75,.336,.75,.75v2.5c0,.414-.336,.75-.75,.75Z",
diff --git a/packages/question/src/react/question-view.tsx b/packages/question/src/react/question-view.tsx
index 5c34fe79..5a2cc8ab 100644
--- a/packages/question/src/react/question-view.tsx
+++ b/packages/question/src/react/question-view.tsx
@@ -93,7 +93,7 @@ function Badges({ people }: { people: Collaborator[] }) {
 function DecisionHeading() {
 	return (
 		<header className="flex items-center gap-2 px-3 py-2.5 hairline-b">
-			<CheckIcon aria-hidden="true" size={16} />
+			<CheckIcon aria-hidden="true" size={14} />
 			<span className="text-sm font-medium text-text-primary">Decision</span>
 		</header>
 	);
@@ -613,7 +613,7 @@ export function QuestionView(props: QuestionViewProps) {
 								disabled={disabled || submitting}
 								className="btn btn-sm btn-destructive"
 							>
-								<CloseIcon aria-hidden="true" size={16} />
+								<CloseIcon aria-hidden="true" size={14} />
 								{submitting ? "Cancelling…" : "Yes, cancel"}
 							</button>
 						</>
@@ -634,7 +634,7 @@ export function QuestionView(props: QuestionViewProps) {
 							disabled={disabled || submitting}
 							className="btn btn-sm btn-secondary"
 						>
-							<CloseIcon aria-hidden="true" size={16} />
+							<CloseIcon aria-hidden="true" size={14} />
 							Cancel
 						</button>
 					)}
@@ -657,7 +657,7 @@ export function QuestionView(props: QuestionViewProps) {
 							<CheckIcon
 								aria-hidden="true"
 								data-plan-icon="check"
-								size={16}
+								size={14}
 							/>
 							{submitting
 								? (single ? "Saving…" : "Submitting…")

From da9a7a662c16d3cc38d2a943c45b71c2cd78a2ae Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Fri, 28 Aug 2026 12:16:29 +0100
Subject: [PATCH 30/35] Standardize default icon colors

---
 .../assets/figma/navigation/add-project.svg   |  4 ++--
 .../assets/figma/navigation/book-bookmark.svg | 10 ++++----
 .../assets/figma/navigation/box-archive.svg   |  2 +-
 .../figma/navigation/document-actions.svg     |  6 ++---
 .../assets/figma/navigation/new-document.svg  |  4 ++--
 .../src/assets/figma/navigation/search.svg    |  4 ++--
 apps/web/src/assets/icons/chat.svg            |  3 +--
 .../assets/icons/navigation-chevron-right.svg |  2 +-
 apps/web/src/assets/icons/panel-close.svg     | 10 ++++----
 apps/web/src/assets/icons/planner-stop.svg    |  2 +-
 apps/web/src/design-audit/foundations.css     | 10 ++++----
 apps/web/src/design-audit/foundations.tsx     |  1 +
 apps/web/src/icon-assets.test.ts              | 24 +++++++++++++++++++
 apps/web/src/navigation-chrome.test.ts        |  4 ++--
 apps/web/src/navigation.css                   |  5 ----
 apps/web/src/project-sidebar.tsx              |  4 ++--
 apps/web/src/room-workspace.tsx               |  4 ++--
 apps/web/src/theme.css                        |  9 +++++++
 .../editor/src/assets/icons/link-plus.svg     |  2 +-
 .../editor/src/assets/icons/message-plus.svg  |  2 +-
 packages/editor/src/callout.css               |  4 ++++
 packages/editor/src/toolbar/bubble.tsx        |  4 ++--
 packages/icons/src/icon.tsx                   |  2 +-
 packages/icons/src/system.tsx                 |  9 ++++++-
 24 files changed, 85 insertions(+), 46 deletions(-)

diff --git a/apps/web/src/assets/figma/navigation/add-project.svg b/apps/web/src/assets/figma/navigation/add-project.svg
index 695d5694..1bc9846d 100644
--- a/apps/web/src/assets/figma/navigation/add-project.svg
+++ b/apps/web/src/assets/figma/navigation/add-project.svg
@@ -12,7 +12,7 @@
 		<path
 			id="Vector"
 			d="M6.5 0.75V12.25"
-			stroke="#212121"
+			stroke="#78766e"
 			stroke-width="1.5"
 			stroke-linecap="round"
 			stroke-linejoin="round"
@@ -20,7 +20,7 @@
 		<path
 			id="Vector_2"
 			d="M0.75 6.5H12.25"
-			stroke="#212121"
+			stroke="#78766e"
 			stroke-width="1.5"
 			stroke-linecap="round"
 			stroke-linejoin="round"
diff --git a/apps/web/src/assets/figma/navigation/book-bookmark.svg b/apps/web/src/assets/figma/navigation/book-bookmark.svg
index 8a73dce5..460d6acf 100644
--- a/apps/web/src/assets/figma/navigation/book-bookmark.svg
+++ b/apps/web/src/assets/figma/navigation/book-bookmark.svg
@@ -1,18 +1,18 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
 	<title>book-bookmark</title>
-	<g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="#212121">
+	<g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="#78766e">
 		<path d="M2.75,14V4.25c0-1.105,.895-2,2-2H15.25V12.25" />
 		<path
 			d="M11,14H7v3.5c0,.202,.122,.385,.309,.462,.187,.079,.401,.035,.545-.108l1.146-1.146,1.146,1.146c.096,.096,.224,.146,.354,.146,.064,0,.13-.012,.191-.038,.187-.077,.309-.26,.309-.462v-3.5Z"
-			fill="#212121"
+			fill="#78766e"
 			data-stroke="none"
 			stroke="none"
 		/>
 		<path
 			d="M5.25,15.75h-.75c-.966,0-1.75-.783-1.75-1.75s.784-1.75,1.75-1.75H15.25c-.641,.844-.734,2.547,0,3.5h-2.5"
 		/>
-		<circle cx="5.75" cy="9.75" r=".75" fill="#212121" data-stroke="none" stroke="none" />
-		<circle cx="5.75" cy="4.75" r=".75" fill="#212121" data-stroke="none" stroke="none" />
-		<circle cx="5.75" cy="7.25" r=".75" fill="#212121" data-stroke="none" stroke="none" />
+		<circle cx="5.75" cy="9.75" r=".75" fill="#78766e" data-stroke="none" stroke="none" />
+		<circle cx="5.75" cy="4.75" r=".75" fill="#78766e" data-stroke="none" stroke="none" />
+		<circle cx="5.75" cy="7.25" r=".75" fill="#78766e" data-stroke="none" stroke="none" />
 	</g>
 </svg>
diff --git a/apps/web/src/assets/figma/navigation/box-archive.svg b/apps/web/src/assets/figma/navigation/box-archive.svg
index 2736ca23..60015c75 100644
--- a/apps/web/src/assets/figma/navigation/box-archive.svg
+++ b/apps/web/src/assets/figma/navigation/box-archive.svg
@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
 	<title>box-archive</title>
-	<g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="#212121">
+	<g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="#78766e">
 		<path d="M14.75,6.25v7c0,1.105-.895,2-2,2H5.25c-1.105,0-2-.895-2-2V6.25" />
 		<rect x="1.75" y="2.75" width="14.5" height="3.5" rx="1" ry="1" />
 		<line x1="7" y1="9.25" x2="11" y2="9.25" />
diff --git a/apps/web/src/assets/figma/navigation/document-actions.svg b/apps/web/src/assets/figma/navigation/document-actions.svg
index 67521f25..baa644f7 100644
--- a/apps/web/src/assets/figma/navigation/document-actions.svg
+++ b/apps/web/src/assets/figma/navigation/document-actions.svg
@@ -12,17 +12,17 @@
 		<path
 			id="Vector"
 			d="M5.44444 1.94444C5.98139 1.94444 6.41667 1.50917 6.41667 0.972222C6.41667 0.435279 5.98139 1.05964e-07 5.44444 1.05964e-07C4.9075 1.05964e-07 4.47222 0.435279 4.47222 0.972222C4.47222 1.50917 4.9075 1.94444 5.44444 1.94444Z"
-			fill="#212121"
+			fill="#78766e"
 		/>
 		<path
 			id="Vector_2"
 			d="M0.972222 1.94444C1.50917 1.94444 1.94444 1.50917 1.94444 0.972222C1.94444 0.435279 1.50917 0 0.972222 0C0.435279 0 0 0.435279 0 0.972222C0 1.50917 0.435279 1.94444 0.972222 1.94444Z"
-			fill="#212121"
+			fill="#78766e"
 		/>
 		<path
 			id="Vector_3"
 			d="M9.91667 1.94444C10.4536 1.94444 10.8889 1.50917 10.8889 0.972222C10.8889 0.435279 10.4536 1.05964e-07 9.91667 1.05964e-07C9.37972 1.05964e-07 8.94444 0.435279 8.94444 0.972222C8.94444 1.50917 9.37972 1.94444 9.91667 1.94444Z"
-			fill="#212121"
+			fill="#78766e"
 		/>
 	</g>
 </svg>
diff --git a/apps/web/src/assets/figma/navigation/new-document.svg b/apps/web/src/assets/figma/navigation/new-document.svg
index 31942e55..8648fb3c 100644
--- a/apps/web/src/assets/figma/navigation/new-document.svg
+++ b/apps/web/src/assets/figma/navigation/new-document.svg
@@ -12,7 +12,7 @@
 		<path
 			id="Vector"
 			d="M8.00002 3L11.586 6.586C12.367 7.367 12.367 8.633 11.586 9.414L10 11"
-			stroke="#212121"
+			stroke="#78766e"
 			stroke-width="1.5"
 			stroke-linecap="round"
 			stroke-linejoin="round"
@@ -20,7 +20,7 @@
 		<path
 			id="Vector_2"
 			d="M0.75002 13.2498C0.75002 13.2498 4.34902 12.6817 5.29602 11.7347C6.24302 10.7877 12.623 4.40775 12.623 4.40775C13.46 3.57075 13.46 2.21375 12.623 1.37775C11.786 0.54075 10.429 0.54075 9.59302 1.37775C9.59302 1.37775 3.21302 7.75775 2.26602 8.70475C1.31902 9.65175 0.75102 13.2508 0.75102 13.2508L0.75002 13.2498Z"
-			stroke="#212121"
+			stroke="#78766e"
 			stroke-width="1.5"
 			stroke-linecap="round"
 			stroke-linejoin="round"
diff --git a/apps/web/src/assets/figma/navigation/search.svg b/apps/web/src/assets/figma/navigation/search.svg
index 3c2cef0b..0e59bab9 100644
--- a/apps/web/src/assets/figma/navigation/search.svg
+++ b/apps/web/src/assets/figma/navigation/search.svg
@@ -12,7 +12,7 @@
 		<path
 			id="Vector"
 			d="M14.25 14.25L10.1386 10.1386"
-			stroke="#212121"
+			stroke="#78766e"
 			stroke-width="1.5"
 			stroke-linecap="round"
 			stroke-linejoin="round"
@@ -20,7 +20,7 @@
 		<path
 			id="Vector_2"
 			d="M6.25 11.75C9.2875 11.75 11.75 9.2875 11.75 6.25C11.75 3.2125 9.2875 0.75 6.25 0.75C3.2125 0.75 0.75 3.2125 0.75 6.25C0.75 9.2875 3.2125 11.75 6.25 11.75Z"
-			stroke="#212121"
+			stroke="#78766e"
 			stroke-width="1.5"
 			stroke-linecap="round"
 			stroke-linejoin="round"
diff --git a/apps/web/src/assets/icons/chat.svg b/apps/web/src/assets/icons/chat.svg
index 703fb337..dfba35af 100644
--- a/apps/web/src/assets/icons/chat.svg
+++ b/apps/web/src/assets/icons/chat.svg
@@ -12,8 +12,7 @@
 		<path
 			id="Vector"
 			d="M13.25 0.75H2.75C1.645 0.75 0.75 1.646 0.75 2.75V9.75C0.75 10.854 1.645 11.75 2.75 11.75H4.75V14.75L8.5 11.75H13.25C14.355 11.75 15.25 10.854 15.25 9.75V2.75C15.25 1.646 14.355 0.75 13.25 0.75Z"
-			stroke="#212121"
-			stroke-opacity="0.5"
+			stroke="#78766e"
 			stroke-width="1.5"
 			stroke-linecap="round"
 			stroke-linejoin="round"
diff --git a/apps/web/src/assets/icons/navigation-chevron-right.svg b/apps/web/src/assets/icons/navigation-chevron-right.svg
index dded71b8..c7a78425 100644
--- a/apps/web/src/assets/icons/navigation-chevron-right.svg
+++ b/apps/web/src/assets/icons/navigation-chevron-right.svg
@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
 	<title>chevron-right</title>
-	<g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="#212121">
+	<g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="#78766e">
 		<polyline points="6.5 2.75 12.75 9 6.5 15.25"></polyline>
 	</g>
 </svg>
diff --git a/apps/web/src/assets/icons/panel-close.svg b/apps/web/src/assets/icons/panel-close.svg
index 998d1511..e12fd20e 100644
--- a/apps/web/src/assets/icons/panel-close.svg
+++ b/apps/web/src/assets/icons/panel-close.svg
@@ -12,7 +12,7 @@
 		<path
 			id="Vector"
 			d="M5.25 10.5V13.25"
-			stroke="#212121"
+			stroke="#78766e"
 			stroke-width="1.5"
 			stroke-linecap="round"
 			stroke-linejoin="round"
@@ -20,7 +20,7 @@
 		<path
 			id="Vector_2"
 			d="M5.25 0.75V3.5"
-			stroke="#212121"
+			stroke="#78766e"
 			stroke-width="1.5"
 			stroke-linecap="round"
 			stroke-linejoin="round"
@@ -28,7 +28,7 @@
 		<path
 			id="Vector_3"
 			d="M7.75 4.5L5.25 7L7.75 9.5"
-			stroke="#212121"
+			stroke="#78766e"
 			stroke-width="1.5"
 			stroke-linecap="round"
 			stroke-linejoin="round"
@@ -36,7 +36,7 @@
 		<path
 			id="Vector_4"
 			d="M5.25 7H11.75"
-			stroke="#212121"
+			stroke="#78766e"
 			stroke-width="1.5"
 			stroke-linecap="round"
 			stroke-linejoin="round"
@@ -44,7 +44,7 @@
 		<path
 			id="Vector_5"
 			d="M2.75 13.25L13.25 13.25C14.3546 13.25 15.25 12.3546 15.25 11.25L15.25 2.75C15.25 1.64543 14.3546 0.75 13.25 0.75L2.75 0.75C1.64543 0.75 0.75 1.64543 0.75 2.75L0.75 11.25C0.75 12.3546 1.64543 13.25 2.75 13.25Z"
-			stroke="#212121"
+			stroke="#78766e"
 			stroke-width="1.5"
 			stroke-linecap="round"
 			stroke-linejoin="round"
diff --git a/apps/web/src/assets/icons/planner-stop.svg b/apps/web/src/assets/icons/planner-stop.svg
index 5cca73dc..49cbe81b 100644
--- a/apps/web/src/assets/icons/planner-stop.svg
+++ b/apps/web/src/assets/icons/planner-stop.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
-	<title>circle-stop</title><g fill="#212121"><path
+	<title>circle-stop</title><g fill="#78766e"><path
 			d="m9,1C4.5889,1,1,4.5889,1,9s3.5889,8,8,8,8-3.5889,8-8S13.4111,1,9,1Zm3.5,9.75c0,.9648-.7852,1.75-1.75,1.75h-3.5c-.9648,0-1.75-.7852-1.75-1.75v-3.5c0-.9648.7852-1.75,1.75-1.75h3.5c.9648,0,1.75.7852,1.75,1.75v3.5Z"
 			stroke-width="0"
 		></path></g>
diff --git a/apps/web/src/design-audit/foundations.css b/apps/web/src/design-audit/foundations.css
index 5af9b58c..761cb11c 100644
--- a/apps/web/src/design-audit/foundations.css
+++ b/apps/web/src/design-audit/foundations.css
@@ -153,7 +153,7 @@
 	place-items: center;
 	border-radius: var(--radius-sm);
 	background: var(--color-gray-100);
-	color: var(--color-text-secondary);
+	color: var(--color-icon);
 }
 
 .design-audit-icon-frame img {
@@ -178,16 +178,16 @@
 	font-weight: 500;
 }
 
-.design-audit-icon-states [data-icon-state="default"] {
-	color: var(--color-text-secondary);
+.design-audit-icon-states [data-icon-state="default"] [data-nucleo-icon] {
+	color: var(--color-icon);
 }
 
-.design-audit-icon-states [data-icon-state="active"] {
+.design-audit-icon-states [data-icon-state="active"] [data-nucleo-icon] {
 	color: var(--color-brand);
 }
 
 .design-audit-icon-states [data-icon-state="disabled"] {
-	color: var(--color-gray-500);
+	opacity: 0.4;
 }
 
 @media (max-width: 639px) {
diff --git a/apps/web/src/design-audit/foundations.tsx b/apps/web/src/design-audit/foundations.tsx
index 03e6e46d..7804eb35 100644
--- a/apps/web/src/design-audit/foundations.tsx
+++ b/apps/web/src/design-audit/foundations.tsx
@@ -10,6 +10,7 @@ const COLOURS = [
 	["Secondary text", "--color-text-secondary"],
 	["Tertiary text", "--color-text-tertiary"],
 	["Quaternary text", "--color-text-quaternary"],
+	["Default icon", "--color-icon"],
 	["Brand", "--color-brand"],
 	["Brand hover", "--color-brand-hover"],
 	["Brand wash", "--color-brand-wash"],
diff --git a/apps/web/src/icon-assets.test.ts b/apps/web/src/icon-assets.test.ts
index 7a8c3fd2..79903a1e 100644
--- a/apps/web/src/icon-assets.test.ts
+++ b/apps/web/src/icon-assets.test.ts
@@ -80,6 +80,30 @@ test("interface icons default to fourteen pixels", () => {
 	expect(offenders).toEqual([]);
 });
 
+test("interface icons share one neutral default colour", () => {
+	let theme = readFileSync(join(root, "theme.css"), "utf8");
+	let icon = readFileSync(join(repository, "packages/icons/src/icon.tsx"), "utf8");
+	let system = readFileSync(join(repository, "packages/icons/src/system.tsx"), "utf8");
+	expect(theme).toContain("--color-icon: var(--color-gray-500)");
+	expect(theme).toMatch(/:where\(\[data-nucleo-icon\]\)\s*{[^}]*color:\s*var\(--color-icon\)/s);
+	expect(icon).toContain('data-nucleo-icon=""');
+	expect(system).toContain('data-nucleo-icon=""');
+
+	let assetRoots = [
+		join(root, "assets/figma/navigation"),
+		join(root, "assets/icons"),
+		join(repository, "packages/editor/src/assets/icons"),
+	];
+	for (let assetRoot of assetRoots) {
+		for (let entry of readdirSync(assetRoot)) {
+			if (!entry.endsWith(".svg") || entry === "chopin.svg") continue;
+			let asset = readFileSync(join(assetRoot, entry), "utf8");
+			expect(asset).toContain("#78766e");
+			expect(asset).not.toContain("#212121");
+		}
+	}
+});
+
 test("the design audit presents one Nucleo icon catalogue", () => {
 	let catalogue = readFileSync(join(root, "design-audit/icons.tsx"), "utf8");
 	let foundations = readFileSync(join(root, "design-audit/foundations.tsx"), "utf8");
diff --git a/apps/web/src/navigation-chrome.test.ts b/apps/web/src/navigation-chrome.test.ts
index d3bb2db1..4e098019 100644
--- a/apps/web/src/navigation-chrome.test.ts
+++ b/apps/web/src/navigation-chrome.test.ts
@@ -79,7 +79,7 @@ describe("the Figma navigation chrome", () => {
 			/aria-label="New document in testing-sql-transcripts"[^>]*>.*?new-document\.svg/s,
 		);
 		expect(markup).toContain("book-bookmark.svg");
-		expect(markup).toMatch(/class="opacity-50"[^>]*src="[^"]*book-bookmark\.svg"/);
+		expect(markup).toMatch(/src="[^"]*book-bookmark\.svg"/);
 		expect(markup).not.toContain('src="/repository.png"');
 		expect(markup).toMatch(
 			/aria-label="Add Project"[^>]*>.*?class="size-3\.5"[^>]*add-project\.svg/s,
@@ -171,7 +171,7 @@ describe("the Figma navigation chrome", () => {
 		};
 		let markup = renderToStaticMarkup(createElement(Header, props));
 
-		expect(markup).toMatch(/class="opacity-50"[^>]*src="[^"]*book-bookmark\.svg"/);
+		expect(markup).toMatch(/src="[^"]*book-bookmark\.svg"/);
 		expect(markup).not.toContain('src="/repository.png"');
 		expect(markup).toContain('aria-label="Document: Hushed mountain"');
 		expect(markup).toContain('aria-label="Actions for Hushed mountain"');
diff --git a/apps/web/src/navigation.css b/apps/web/src/navigation.css
index 8c8ad028..e73e8352 100644
--- a/apps/web/src/navigation.css
+++ b/apps/web/src/navigation.css
@@ -273,11 +273,6 @@
 	color: var(--color-text-tertiary);
 }
 
-.project-sidebar-primary-action img,
-.project-sidebar-action img {
-	opacity: 0.5;
-}
-
 .project-sidebar-primary-action:hover,
 .project-sidebar-primary-action:focus-visible,
 .project-sidebar-project-row:hover,
diff --git a/apps/web/src/project-sidebar.tsx b/apps/web/src/project-sidebar.tsx
index 22b35923..724cdaaa 100644
--- a/apps/web/src/project-sidebar.tsx
+++ b/apps/web/src/project-sidebar.tsx
@@ -222,12 +222,12 @@ function Project(
 					type="button"
 				>
 					<MotionDisclosureIcon
-						className="motion-feedback shrink-0 opacity-50"
+						className="motion-feedback shrink-0"
 						closed={<ChevronIcon size={14} />}
 						open={expanded}
 						opened={<ChevronIcon className="rotate-90" size={14} />}
 					/>
-					<NavigationIcon className="opacity-50" src={bookBookmarkIcon} />
+					<NavigationIcon src={bookBookmarkIcon} />
 					<span className="truncate text-sm font-bold">{label}</span>
 				</button>
 				{!archiveMode && project.available && canManage && (
diff --git a/apps/web/src/room-workspace.tsx b/apps/web/src/room-workspace.tsx
index 383f35a6..d7e5f470 100644
--- a/apps/web/src/room-workspace.tsx
+++ b/apps/web/src/room-workspace.tsx
@@ -78,7 +78,7 @@ export function Header(
 				aria-label={`Document: ${label}`}
 				className="flex min-w-0 flex-1 items-center gap-0.5"
 			>
-				<NavigationIcon className="opacity-50" src={bookBookmarkIcon} />
+				<NavigationIcon src={bookBookmarkIcon} />
 				{presentation.type === "parent-with-child"
 					? (
 						<>
@@ -116,7 +116,7 @@ export function Header(
 									<img
 										alt=""
 										aria-hidden="true"
-										className="size-3.5 rotate-90 opacity-50"
+										className="size-3.5 rotate-90"
 										src={navigationChevronRight}
 									/>
 								</>
diff --git a/apps/web/src/theme.css b/apps/web/src/theme.css
index a0bfeedd..e505c73e 100644
--- a/apps/web/src/theme.css
+++ b/apps/web/src/theme.css
@@ -45,6 +45,7 @@
 	--color-text-secondary: var(--color-gray-700);
 	--color-text-tertiary: var(--color-gray-600);
 	--color-text-quaternary: var(--color-gray-500);
+	--color-icon: var(--color-gray-500);
 	--color-chat-body: #3e453b;
 	--color-chat-pane: color-mix(in srgb, var(--color-ground) 30%, var(--color-page));
 
@@ -203,6 +204,14 @@
 	outline-offset: calc(-1 * var(--edge-width));
 }
 
+:where([data-nucleo-icon]) {
+	color: var(--color-icon);
+}
+
+:where(.btn-primary, .btn-destructive) [data-nucleo-icon] {
+	color: inherit;
+}
+
 @utility control-edge {
 	border: var(--edge-width) solid var(--color-control-edge);
 
diff --git a/packages/editor/src/assets/icons/link-plus.svg b/packages/editor/src/assets/icons/link-plus.svg
index 44d795ee..02e1eac2 100644
--- a/packages/editor/src/assets/icons/link-plus.svg
+++ b/packages/editor/src/assets/icons/link-plus.svg
@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
 	<title>link-plus</title>
-	<g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="#212121">
+	<g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="#78766e">
 		<path d="M14.251 1.25V6.25" />
 		<path d="M16.751 3.75H11.751" />
 		<path
diff --git a/packages/editor/src/assets/icons/message-plus.svg b/packages/editor/src/assets/icons/message-plus.svg
index 8e84b8b8..e614dc65 100644
--- a/packages/editor/src/assets/icons/message-plus.svg
+++ b/packages/editor/src/assets/icons/message-plus.svg
@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
 	<title>msg-plus</title>
-	<g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="#212121">
+	<g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="#78766e">
 		<path d="M14.75 12.25V17.25" />
 		<path
 			d="M16.2155 9.64111C16.2364 9.42991 16.25 9.2168 16.25 9C16.25 4.9961 13.004 1.75 9 1.75C4.996 1.75 1.75 4.9961 1.75 9C1.75 10.3188 2.10801 11.552 2.72301 12.6169C3.15301 13.4228 2.67 15.3291 1.75 16.25C3 16.3179 4.647 15.7529 5.383 15.2769C5.872 15.5591 6.647 15.9331 7.662 16.125C8.095 16.207 8.543 16.25 9 16.25C9.2167 16.25 9.4299 16.2363 9.6412 16.2156"
diff --git a/packages/editor/src/callout.css b/packages/editor/src/callout.css
index 72805d25..e7951e9b 100644
--- a/packages/editor/src/callout.css
+++ b/packages/editor/src/callout.css
@@ -84,6 +84,10 @@
 	height: 0.875rem;
 }
 
+.plan-callout-type > [data-nucleo-icon] {
+	color: var(--callout-ink);
+}
+
 .plan-callout-type:hover:not(:disabled),
 .plan-callout-type:focus-visible,
 .plan-callout-type[aria-expanded="true"] {
diff --git a/packages/editor/src/toolbar/bubble.tsx b/packages/editor/src/toolbar/bubble.tsx
index 3071759e..f30d62bd 100644
--- a/packages/editor/src/toolbar/bubble.tsx
+++ b/packages/editor/src/toolbar/bubble.tsx
@@ -380,7 +380,7 @@ export function SelectionBubble(
 							}}
 							className={`${CELL} ${CELL_OFF}`}
 						>
-							<img alt="" aria-hidden="true" className="size-3.5 opacity-70" src={linkPlusIcon} />
+							<img alt="" aria-hidden="true" className="size-3.5" src={linkPlusIcon} />
 						</button>
 
 						{onComment && (
@@ -406,7 +406,7 @@ export function SelectionBubble(
 									<img
 										alt=""
 										aria-hidden="true"
-										className="size-3.5 opacity-70"
+										className="size-3.5"
 										src={messagePlusIcon}
 									/>
 								</button>
diff --git a/packages/icons/src/icon.tsx b/packages/icons/src/icon.tsx
index fbb212ee..37fe7dfb 100644
--- a/packages/icons/src/icon.tsx
+++ b/packages/icons/src/icon.tsx
@@ -12,7 +12,7 @@ export function LineIcon(
 	},
 ) {
 	return (
-		<svg height={size} viewBox={viewBox} width={size} {...props}>
+		<svg data-nucleo-icon="" height={size} viewBox={viewBox} width={size} {...props}>
 			{title && <title>{title}</title>}
 			<g
 				fill="none"
diff --git a/packages/icons/src/system.tsx b/packages/icons/src/system.tsx
index ade896c6..319f9f7b 100644
--- a/packages/icons/src/system.tsx
+++ b/packages/icons/src/system.tsx
@@ -74,7 +74,14 @@ export function LoaderIcon({ size = 14, ...props }: IconProps) {
 		],
 	] as const;
 	return (
-		<svg fill="currentColor" height={size} viewBox="0 0 18 18" width={size} {...props}>
+		<svg
+			data-nucleo-icon=""
+			fill="currentColor"
+			height={size}
+			viewBox="0 0 18 18"
+			width={size}
+			{...props}
+		>
 			<title>loader</title>
 			{paths.map(([path, opacity]) => <path d={path} key={path} opacity={opacity} />)}
 		</svg>

From 505066ed60358ecf9a19fb30da63677b2c016a4c Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Fri, 28 Aug 2026 12:20:41 +0100
Subject: [PATCH 31/35] Drop generated design audit docs

---
 docs/design-system-audit.md                   |  64 ---
 .../2026-08-24-archived-chats-sidebar.md      | 378 ++++++++++++++++++
 .../2026-08-28-design-audit-catalogue.md      | 276 -------------
 .../2026-08-28-design-system-normalization.md |  31 --
 ...026-08-24-archived-chats-sidebar-design.md |  61 +++
 .../2026-08-28-brand-wash-alpha-design.md     |  23 --
 .../2026-08-28-design-system-audit-design.md  | 101 -----
 7 files changed, 439 insertions(+), 495 deletions(-)
 delete mode 100644 docs/design-system-audit.md
 create mode 100644 docs/superpowers/plans/2026-08-24-archived-chats-sidebar.md
 delete mode 100644 docs/superpowers/plans/2026-08-28-design-audit-catalogue.md
 delete mode 100644 docs/superpowers/plans/2026-08-28-design-system-normalization.md
 create mode 100644 docs/superpowers/specs/2026-08-24-archived-chats-sidebar-design.md
 delete mode 100644 docs/superpowers/specs/2026-08-28-brand-wash-alpha-design.md
 delete mode 100644 docs/superpowers/specs/2026-08-28-design-system-audit-design.md

diff --git a/docs/design-system-audit.md b/docs/design-system-audit.md
deleted file mode 100644
index 84a32644..00000000
--- a/docs/design-system-audit.md
+++ /dev/null
@@ -1,64 +0,0 @@
-# Design system audit
-
-First pass completed 28 August 2026. **Health: 8/10.** The system is healthy, with a compact token
-vocabulary and shared control primitives. The audit found a small amount of consumer drift rather
-than a second, competing design system. There are no open P0, P1, or objective P2 findings after the
-first correction pass.
-
-## Catalogue
-
-Run `bun run dev` and open `/design-audit`. The route is development-only and is excluded from the
-production entry point.
-
-The catalogue contains 31 review areas in four sections:
-
-- foundations: semantic colours, typography, spacing, radii, elevation, and icons;
-- controls: buttons, icon buttons, links, fields, choices, tabs, menus, and dropdowns;
-- application surfaces: dialogs, lists, navigation, Conversation, Decisions, resolved comments,
-  loading, empty, and error states;
-- authored content: callouts, research, code, diffs, diagrams, formulae, images, and tables.
-
-Authored examples use the canonical dialect importer and static Lexical renderer. Application
-examples reuse production primitives where they can be rendered safely without a live room.
-
-## System contract
-
-- Type has five rungs and semantic ink roles with AA contrast on the page surface.
-- Controls use three sizes: 28px icon and small controls, 32px medium controls, and 44px coarse
-  pointer targets.
-- Standard icon-button glyphs are 16px. Fourteen-pixel glyphs belong to compact navigation and
-  disclosure roles; larger glyphs are status or content, not standard controls.
-- Buttons have primary, secondary, ghost, and destructive tiers with shared hover, active, focus,
-  and disabled states. Labels stay on one line.
-- Depth has three roles: resting, raised, and overlay. Borders use passive and control edges.
-- Dialogs use `NavigationDialog`; document cards and decision records retain their domain-specific
-  structures rather than imitating dialogs.
-
-## Findings and corrections
-
-| Priority     | Finding and impact                                                                                                                                                | Correction and evidence                                                                                                                                                        |
-| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| P1, resolved | A ready Research card rendered outside the editor lacked a positioning anchor, so its absolute open button covered the catalogue viewport and blocked navigation. | Made the card own its structural anchor through composable `SidecarCard` classes in `packages/editor/src/card.tsx:45` and `packages/editor/src/widgets/research.tsx:236`.      |
-| P1, resolved | Compact navigation exposed `aria-current` without a visible selected state, so the mobile destination depended on accessibility metadata alone.                   | Added a page surface, primary ink, and resting elevation in `apps/web/src/theme.css:606`.                                                                                      |
-| P2, resolved | Send actions used a 24px target and 18px glyph beside 28px icon buttons.                                                                                          | Moved the shared action onto the 28px/16px contract in `packages/editor/src/send-action.tsx:12`.                                                                               |
-| P2, resolved | Pane, close, stop, sidebar, queued-message, and research-dismiss icon buttons mixed 14px and 18px artwork or 28px and 32px targets.                               | Normalized them to 28px targets with 16px glyphs; examples are `apps/web/src/workspace.tsx:150`, `apps/web/src/chat/chat.tsx:416`, and `apps/web/src/chat/transcript.tsx:136`. |
-| P2, resolved | Shared button labels could wrap under pressure and produce inconsistent control heights.                                                                          | Added `white-space: nowrap` to the base utility at `apps/web/src/theme.css:207`.                                                                                               |
-| P2, resolved | Sidebar collapse and Conversation close shipped identical SVGs under different names.                                                                             | Consolidated both onto `panel-close.svg`; `apps/web/src/icon-assets.test.ts:7` guards the boundary.                                                                            |
-| P3, open     | Eighteen local SVGs contain fixed `#212121` artwork, so image-loaded interactive icons cannot inherit semantic active or disabled colours.                        | `apps/web/src/assets/icons/conversation.svg:15` is representative. Choose Phosphor or a colour-aware wrapper before migration.                                                 |
-
-## Human review queue
-
-These are coherent today but need product taste rather than mechanical normalization:
-
-1. Desktop navigation deliberately uses a denser 14px icon role, while general controls use 16px.
-   Confirm that distinction should remain.
-2. The empty Decisions view is intentionally quiet: explanatory copy without illustration or CTA.
-   Decide whether it needs stronger guidance.
-3. A short Conversation anchors to the bottom and leaves open space above. Confirm that the
-   messaging convention is preferable to top anchoring.
-4. The project sidebar animates its width at `apps/web/src/navigation.css:198` so document space
-   yields to it. A transform would be cheaper but would overlay rather than reflow the workspace;
-   profile before changing the interaction.
-
-The authored blockquote's three-pixel logical border is a conventional quotation affordance, not a
-card accent, so it remains unchanged.
diff --git a/docs/superpowers/plans/2026-08-24-archived-chats-sidebar.md b/docs/superpowers/plans/2026-08-24-archived-chats-sidebar.md
new file mode 100644
index 00000000..abb2309a
--- /dev/null
+++ b/docs/superpowers/plans/2026-08-24-archived-chats-sidebar.md
@@ -0,0 +1,378 @@
+# Archived Chats Sidebar Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Replace the mixed archive checkbox with a distinct archived-chats sidebar mode.
+
+**Architecture:** Keep `NavigationShell` as the owner of the existing `showArchived` boolean and
+reuse the current `includeArchived=true` catalogue request. `ProjectSidebar` interprets that boolean
+as a two-mode view, filters the mixed response to archived documents, and renders mode-specific
+navigation controls. Restoring a document returns the shell to active mode.
+
+**Tech Stack:** React 19, TypeScript, CSS, Bun tests, Playwright
+
+**Spec:** `docs/superpowers/specs/2026-08-24-archived-chats-sidebar-design.md`
+
+## Global Constraints
+
+- The footer label is exactly **Archived chats**.
+- The archive return label is exactly **← Back to active docs**.
+- The supplied box-archive SVG renders through `NavigationIcon` at 14px.
+- Active mode keeps the existing active-only API request.
+- Archive mode reuses `includeArchived=true` and displays only channels with `archivedAt`.
+- The account control remains anchored at the bottom in both modes.
+- Do not add routes, persisted mode state, server/storage/protocol changes, or dependencies.
+- TypeScript uses tabs, double quotes, semicolons, and local `let` bindings.
+- Run `bun run fix` after code edits and inspect every formatting change.
+
+---
+
+### Task 1: Render active and archived sidebar modes
+
+**Files:**
+
+- Create: `apps/web/src/assets/figma/navigation/box-archive.svg`
+- Modify: `apps/web/src/project-sidebar.tsx:1-362`
+- Modify: `apps/web/src/navigation.css:53-122`
+- Test: `apps/web/src/navigation-chrome.test.ts:28-146`
+
+**Interfaces:**
+
+- Consumes: existing `showArchived: boolean` and
+  `onShowArchivedChange(show: boolean): void` `ProjectSidebar` props.
+- Produces: the same public props; active mode calls `onShowArchivedChange(true)` from the footer,
+  archive mode calls `onShowArchivedChange(false)` from the back control.
+- Produces: `Project` receives `archiveMode: boolean` and filters its local channel list before
+  rendering without changing `ProjectDocuments` or the catalogue hooks.
+
+- [ ] **Step 1: Add a failing static-render test for both modes**
+
+Add a focused test in `navigation-chrome.test.ts` that renders one active and one archived channel:
+
+```tsx
+test("separates active and archived documents into sidebar modes", () => {
+	let active = {
+		createdAt: "2026-08-24T10:00:00.000Z",
+		createdBy: "U_test",
+		id: "active-document",
+		repositoryId: "R_test",
+		repositoryName: "testing-sql-transcripts",
+		repositoryOwner: "MaggieAppleton",
+		revision: 0,
+		slug: "active-document",
+		title: "Active document",
+		updatedAt: "2026-08-24T10:00:00.000Z",
+	};
+	let archived = {
+		...active,
+		archivedAt: "2026-08-24T11:00:00.000Z",
+		id: "archived-document",
+		slug: "archived-document",
+		title: "Archived document",
+		updatedAt: "2026-08-24T11:00:00.000Z",
+	};
+	let props = {
+		canCreateDocument: true,
+		creatingNewDocument: false,
+		creatingProjectIds: new Set<string>(),
+		onAccount: () => {},
+		onAddProject: () => {},
+		onCollapse: () => {},
+		onCreateDocument: () => {},
+		onDocumentAction: () => {},
+		onLoadMore: () => {},
+		onNewDocument: () => {},
+		onSearch: () => {},
+		onShowArchivedChange: () => {},
+		projects: [{
+			documents: { status: "ready" as const, channels: [active, archived] },
+			project: {
+				available: true,
+				position: 0,
+				repositoryId: "R_test",
+				repositoryName: "testing-sql-transcripts",
+				repositoryOwner: "MaggieAppleton",
+			},
+		}],
+		user: { avatarUrl: "", id: "user-one", login: "MaggieAppleton" },
+	};
+	let activeMarkup = renderToStaticMarkup(createElement(ProjectSidebar, {
+		...props,
+		showArchived: false,
+	}));
+	let archivedMarkup = renderToStaticMarkup(createElement(ProjectSidebar, {
+		...props,
+		showArchived: true,
+	}));
+
+	expect(activeMarkup).toContain("Archived chats");
+	expect(activeMarkup).toContain("box-archive.svg");
+	expect(activeMarkup).toMatch(/height="14" src="[^"]*box-archive\.svg" width="14"/);
+	expect(activeMarkup).toContain("Active document");
+	expect(activeMarkup).not.toContain("Archived document");
+	expect(activeMarkup).not.toContain("Show archived documents");
+	expect(activeMarkup.indexOf("Archived chats")).toBeLessThan(activeMarkup.indexOf("user-one"));
+
+	expect(archivedMarkup).toContain("← Back to active docs");
+	expect(archivedMarkup).toContain("Archived document");
+	expect(archivedMarkup).not.toContain("Active document");
+	expect(archivedMarkup).not.toContain("Archived chats");
+	expect(archivedMarkup).not.toContain("New document");
+	expect(archivedMarkup).not.toContain(">Search<");
+	expect(archivedMarkup).not.toContain("Add Project");
+	expect(archivedMarkup).not.toContain(">Archived</span>");
+});
+```
+
+- [ ] **Step 2: Run the static test and verify it fails**
+
+Run:
+
+```bash
+bun test apps/web/src/navigation-chrome.test.ts
+```
+
+Expected: FAIL because `Archived chats`, `box-archive.svg`, and the archived-only view do not exist.
+
+- [ ] **Step 3: Add the supplied archive asset**
+
+Create `box-archive.svg` from the approved SVG, preserving its `18 18` view box and strokes:
+
+```svg
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <title>box-archive</title>
+  <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="#212121">
+    <path d="M14.75,6.25v7c0,1.105-.895,2-2,2H5.25c-1.105,0-2-.895-2-2V6.25" />
+    <rect x="1.75" y="2.75" width="14.5" height="3.5" rx="1" ry="1" />
+    <line x1="7" y1="9.25" x2="11" y2="9.25" />
+  </g>
+</svg>
+```
+
+- [ ] **Step 4: Implement the two sidebar bodies and archived-only filtering**
+
+In `project-sidebar.tsx`, import `boxArchiveIcon`. Add `archiveMode: boolean` to `Project`, filter the
+mixed catalogue, and hide creation affordances:
+
+```tsx
+let { documents, project } = entry;
+let channels = documents.channels.filter(channel =>
+	archiveMode ? channel.archivedAt !== undefined : channel.archivedAt === undefined
+);
+```
+
+Gate the project-level create button with `!archiveMode`, omit the `Archived` badge from document
+links, and pass `onNewResearch={archiveMode ? undefined : onNewResearch}`.
+
+Replace the checkbox and unconditional primary actions with a mode-specific local, then render
+`{primaryActions}` after the sidebar header:
+
+```tsx
+let primaryActions = (
+	<div className="project-sidebar-primary-actions">
+		{showArchived
+			? (
+				<button
+					className="project-sidebar-primary-action"
+					onClick={() => onShowArchivedChange(false)}
+					type="button"
+				>
+					<span aria-hidden="true">←</span>
+					<span>Back to active docs</span>
+				</button>
+			)
+			: (
+				<>
+					<button
+						className="project-sidebar-primary-action"
+						disabled={!canCreateDocument || creatingNewDocument}
+						onClick={onNewDocument}
+						type="button"
+					>
+						<NavigationIcon src={newDocumentIcon} />
+						<span>New document</span>
+					</button>
+					<button
+						className="project-sidebar-primary-action"
+						onClick={onSearch}
+						type="button"
+					>
+						<NavigationIcon src={searchIcon} />
+						<span>Search</span>
+					</button>
+				</>
+			)}
+	</div>
+);
+```
+
+Hide the Add Project button when `showArchived` is true. Pass `archiveMode={showArchived}` to every
+`Project`. Define this local and render `{archiveFooter}` immediately before
+`project-sidebar-account-wrap`:
+
+```tsx
+let archiveFooter = !showArchived
+	? (
+		<div className="project-sidebar-footer-actions">
+			<button
+				className="project-sidebar-primary-action"
+				onClick={() => onShowArchivedChange(true)}
+				type="button"
+			>
+				<NavigationIcon src={boxArchiveIcon} />
+				<span>Archived chats</span>
+			</button>
+		</div>
+	)
+	: null;
+```
+
+- [ ] **Step 5: Match the footer to existing navigation styling**
+
+In `navigation.css`, delete `.project-sidebar-archived-toggle` and its input rule. Share the existing
+layout declarations with the new footer wrapper:
+
+```css
+.project-sidebar-primary-actions,
+.project-sidebar-footer-actions {
+	display: flex;
+	flex-direction: column;
+	padding: 0 8px;
+}
+
+.project-sidebar-footer-actions {
+	flex: 0 0 auto;
+}
+```
+
+Do not add a new font size, color, hover rule, or icon opacity rule; the button must inherit
+`project-sidebar-primary-action` behavior.
+
+- [ ] **Step 6: Format and run the focused checks**
+
+Run:
+
+```bash
+bun run fix
+git diff --check
+bun test apps/web/src/navigation-chrome.test.ts
+bun run types
+```
+
+Expected: formatting changes are limited to the four Task 1 files; the test and typecheck pass.
+
+- [ ] **Step 7: Commit the presentation slice**
+
+```bash
+git add apps/web/src/assets/figma/navigation/box-archive.svg apps/web/src/project-sidebar.tsx apps/web/src/navigation.css apps/web/src/navigation-chrome.test.ts
+git commit -m "Move archived chats into sidebar section"
+```
+
+### Task 2: Return restored documents to the active catalogue
+
+**Files:**
+
+- Modify: `apps/web/src/navigation-shell.tsx:607-625`
+- Test: `e2e/document-navigation.e2e.ts:339-382`
+
+**Interfaces:**
+
+- Consumes: Task 1's unchanged `onShowArchivedChange(show: boolean): void` contract.
+- Produces: a successful `restore` mutation calls `setShowArchived(false)` after accepting the
+  returned channel; archive and failed mutations do not change sidebar mode.
+
+- [ ] **Step 1: Rewrite the existing archive E2E expectations for the new navigation**
+
+Replace the checkbox and archive-search assertions in
+`writers can archive, restore, and permanently delete a document` with:
+
+```tsx
+await projects.getByRole("button", { name: "Archived chats", exact: true }).click();
+await expect(projects.getByRole("button", { name: "Back to active docs", exact: false }))
+	.toBeVisible();
+await expect(projects.getByRole("link", { name: title, exact: true })).toBeVisible();
+await expect(projects.getByRole("button", { name: "New document", exact: true })).toHaveCount(0);
+await expect(projects.getByRole("button", { name: "Search", exact: true })).toHaveCount(0);
+
+await headerAction(ana, "Restore");
+await expect(content(ana)).toHaveAttribute("contenteditable", "true");
+await expect(content(bo)).toHaveAttribute("contenteditable", "true");
+await expect(ana.getByText("Archived, read-only", { exact: true })).toHaveCount(0);
+await expect(projects.getByRole("button", { name: "Archived chats", exact: true })).toBeVisible();
+await expect(projects.getByRole("link", { name: title, exact: true })).toBeVisible();
+await expect(projects.getByRole("button", { name: "Back to active docs", exact: false }))
+	.toHaveCount(0);
+```
+
+Retain the permanent-delete half of the lifecycle test after those assertions:
+
+```tsx
+await headerAction(ana, "Archive");
+await expect(content(ana)).toHaveAttribute("contenteditable", "false");
+await headerAction(ana, "Delete permanently");
+let confirmation = ana.getByRole("dialog", { name: "Delete document permanently?" });
+await confirmation.getByRole("button", { name: "Delete permanently", exact: true }).click();
+await expect(ana).not.toHaveURL(path);
+await expect(bo).not.toHaveURL(path);
+let unavailable = await ana.request.get(`/api/channels/${room}`);
+expect(unavailable.status()).toBe(404);
+```
+
+- [ ] **Step 2: Run the targeted E2E test and verify the restore transition fails**
+
+Run:
+
+```bash
+bun run e2e e2e/document-navigation.e2e.ts --grep "writers can archive"
+```
+
+Expected: FAIL after Restore because the sidebar remains in archive mode and `Archived chats` is not
+visible.
+
+- [ ] **Step 3: Switch to active mode only after a successful restore**
+
+Update the mutation success callback in `navigation-shell.tsx`:
+
+```tsx
+void mutation.then(detail => {
+	acceptChannel(detail.channel);
+	if (action === "restore") setShowArchived(false);
+}, reason => {
+	setError({ reason });
+});
+```
+
+Do not switch modes before the request succeeds. This preserves retry context on restore failure.
+
+- [ ] **Step 4: Run formatting and complete verification**
+
+Run:
+
+```bash
+bun run fix
+git diff --check
+bun test apps/web/src/navigation-chrome.test.ts
+bun run types
+bun run e2e e2e/document-navigation.e2e.ts --grep "writers can archive"
+bun run ci
+```
+
+Expected: all commands pass. Inspect `git diff` and keep formatter changes scoped to files in this
+plan.
+
+- [ ] **Step 5: Commit the behavior slice**
+
+```bash
+git add apps/web/src/navigation-shell.tsx e2e/document-navigation.e2e.ts
+git commit -m "Return restored documents to active navigation"
+```
+
+## Final Acceptance
+
+- Active mode contains New document, Search, Projects, Archived chats, then the account control.
+- Archive mode contains ← Back to active docs, project-grouped archived documents, then the account.
+- Active documents never appear in archive mode, and archive badges are absent there.
+- Restoring succeeds before returning to active mode; restore failure leaves archive mode intact.
+- The supplied archive glyph renders at 14px in inline and drawer sidebars.
+- `bun test apps/web/src/navigation-chrome.test.ts`, `bun run types`, the targeted archive E2E test,
+  and `bun run ci` pass.
diff --git a/docs/superpowers/plans/2026-08-28-design-audit-catalogue.md b/docs/superpowers/plans/2026-08-28-design-audit-catalogue.md
deleted file mode 100644
index 9bf7810a..00000000
--- a/docs/superpowers/plans/2026-08-28-design-audit-catalogue.md
+++ /dev/null
@@ -1,276 +0,0 @@
-# Design Audit Catalogue Implementation Plan
-
-> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
-
-**Goal:** Build a development-only page that exposes Chopin's foundations, controls, application surfaces, and authored-content components in deterministic visual states.
-
-**Architecture:** `apps/web` owns a lazily loaded `/design-audit` route. Small catalogue modules compose real web and editor components; pure fixture data describes coverage. A read-only static editor entry point renders authored MDX through the production dialect and widget renderers without opening a WebSocket.
-
-**Tech Stack:** React 19, TypeScript, Vite, Tailwind CSS v4, MDXEditor/Lexical, Bun tests.
-
----
-
-This plan builds the inspection surface. Screenshot findings will produce a separate, evidence-based
-normalisation plan; naming exact remediation files before seeing the catalogue would be guesswork.
-
-### Task 1: Development-only route
-
-**Files:**
-- Create: `apps/web/src/design-audit/route.ts`
-- Create: `apps/web/src/design-audit/route.test.ts`
-- Create: `apps/web/src/design-audit/page.tsx`
-- Modify: `apps/web/src/main.tsx`
-
-- [ ] **Step 1: Write the route test**
-
-```ts
-import { describe, expect, it } from "bun:test";
-import { isDesignAuditRoute } from "./route";
-
-describe("design audit route", () => {
-	 it("exists only in development at its exact path", () => {
-		 expect(isDesignAuditRoute("/design-audit", true)).toBe(true);
-		 expect(isDesignAuditRoute("/design-audit", false)).toBe(false);
-		 expect(isDesignAuditRoute("/design-audit/extra", true)).toBe(false);
-	 });
-});
-```
-
-- [ ] **Step 2: Verify the test fails**
-
-Run: `bun test apps/web/src/design-audit/route.test.ts`
-Expected: FAIL because `route.ts` does not exist.
-
-- [ ] **Step 3: Add the pure route predicate**
-
-```ts
-export function isDesignAuditRoute(pathname: string, development: boolean): boolean {
-	return development && pathname === "/design-audit";
-}
-```
-
-- [ ] **Step 4: Add lazy route selection to `main.tsx`**
-
-Keep the current application root unchanged for ordinary paths. On the audit path, dynamically import
-`./design-audit/page` and render its `DesignAuditPage`. The import must be inside the
-`import.meta.env.DEV`-guarded branch so a normal production build removes the route chunk.
-
-- [ ] **Step 5: Add a minimal labelled page and verify**
-
-```tsx
-export function DesignAuditPage() {
-	return <main data-design-audit=""><h1>Chopin design audit</h1></main>;
-}
-```
-
-Run: `bun test apps/web/src/design-audit/route.test.ts && bun run --cwd apps/web types`
-Expected: PASS.
-
-- [ ] **Step 6: Verify production exclusion and commit**
-
-Run: `bun run --cwd apps/web build && ! rg -l "Chopin design audit" apps/web/dist`
-Expected: build passes and `rg` finds no catalogue string.
-
-Commit: `git commit -am "Add development design audit route"`
-
-### Task 2: Coverage inventory and catalogue frame
-
-**Files:**
-- Create: `apps/web/src/design-audit/inventory.ts`
-- Create: `apps/web/src/design-audit/inventory.test.ts`
-- Create: `apps/web/src/design-audit/frame.tsx`
-- Create: `apps/web/src/design-audit/styles.css`
-- Modify: `apps/web/src/design-audit/page.tsx`
-
-- [ ] **Step 1: Write inventory coverage tests**
-
-Define `AuditGroup`, `AuditItem`, and exported `AUDIT_INVENTORY`. Assert that the inventory contains the
-required groups `foundations`, `controls`, `surfaces`, `authored-content`, and the named specimens from
-the approved spec. Assert every item has a unique `id`, a source path, and at least one state.
-
-- [ ] **Step 2: Verify the inventory test fails**
-
-Run: `bun test apps/web/src/design-audit/inventory.test.ts`
-Expected: FAIL because `inventory.ts` does not exist.
-
-- [ ] **Step 3: Implement the typed inventory**
-
-```ts
-export type AuditItem = {
-	id: string;
-	label: string;
-	source: string;
-	states: readonly string[];
-	judgement?: string;
-};
-
-export type AuditGroup = {
-	id: "foundations" | "controls" | "surfaces" | "authored-content";
-	label: string;
-	items: readonly AuditItem[];
-};
-```
-
-Populate it with buttons, icon buttons, links, fields, selection, tabs, menus, dropdowns, dialogs,
-lists, navigation rows, chat, decisions, resolved comments, loading, empty, error, callout, research,
-code, diff, diagram, formula, image, and table.
-
-- [ ] **Step 4: Build the frame**
-
-`frame.tsx` owns `AuditSection`, `AuditPlate`, `StateLabel`, the sticky table of contents, and the
-desktop/narrow preview-width control. `styles.css` may style only catalogue scaffolding; specimens use
-the real application classes.
-
-- [ ] **Step 5: Run tests and commit**
-
-Run: `bun test apps/web/src/design-audit/inventory.test.ts && bun run --cwd apps/web types`
-Expected: PASS.
-
-Commit: `git add apps/web/src/design-audit && git commit -m "Map design audit coverage"`
-
-### Task 3: Foundations and controls
-
-**Files:**
-- Create: `apps/web/src/design-audit/foundations.tsx`
-- Create: `apps/web/src/design-audit/controls.tsx`
-- Create: `apps/web/src/design-audit/specimens.test.tsx`
-- Modify: `apps/web/src/design-audit/page.tsx`
-
-- [ ] **Step 1: Write rendered specimen tests**
-
-Render the foundation and control sections with `renderToStaticMarkup`. Assert the resulting landmarks,
-headings, control roles, accessible names, native disabled attributes, selected state, and invalid state.
-The break caught is a catalogue specimen disappearing or losing the same semantics as its real control;
-CSS geometry remains a browser test.
-
-- [ ] **Step 2: Render foundations**
-
-Show the emitted colour tokens, type scale, 4px spacing scale, radii, and the three semantic shadows.
-Render all local SVG and Phosphor icons in one 16px default frame, with separate 14px compact and 20px
-emphasis examples. Label the byte-identical collapse/conversation-close pair.
-
-- [ ] **Step 3: Render every control state**
-
-Use the real `btn`, `btn-md`, `btn-sm`, `btn-icon`, `btn-primary`, `btn-secondary`, `btn-ghost`,
-`btn-destructive`, `field`, `field-ghost`, and `choice-control` utilities. Include resting, labelled
-forced-hover, labelled forced-active, keyboard-focusable, disabled, busy, selected, invalid, and
-read-only examples. Include text links, tablist/tab states, list selection, dropdown, and menu rows.
-
-- [ ] **Step 4: Verify and commit**
-
-Run: `bun test apps/web/src/design-audit/inventory.test.ts && bun run --cwd apps/web types`
-Expected: PASS.
-
-Commit: `git add apps/web/src/design-audit && git commit -m "Catalogue foundations and controls"`
-
-### Task 4: Application surfaces
-
-**Files:**
-- Create: `apps/web/src/design-audit/surfaces.tsx`
-- Create: `apps/web/src/design-audit/fixtures.ts`
-- Modify: `apps/web/src/design-audit/page.tsx`
-
-- [ ] **Step 1: Add surface fixtures**
-
-Create deterministic fixture records for a user, chat messages, repository/document rows, research
-requests in queued/running/failed/cancelled/ready states, resolved decisions, resolved comments, and
-loading/empty/error content. Use valid protocol shapes and fixed ULIDs/UUIDs.
-
-- [ ] **Step 2: Compose real surfaces**
-
-Render actual exported or app-owned components where their API is small: `NavigationDialog`,
-`DocumentActionsMenu`, `ConversationToggle`, `TerminalAlert`, `Face`, `SendAction`, `ResearchCard`,
-`ResearchComposer`, `QuestionnaireCard`, and chat transcript elements. For tightly coupled surfaces,
-extract a reusable presentational component from the current owner rather than copying its markup.
-
-- [ ] **Step 3: Show layout variants**
-
-Place dialogs, menus, popovers, cards, navigation/list rows, conversation messages, composer controls,
-decision cards, resolved-comment cards, and loading states in labelled plates. Interactive dialog/menu
-launchers must restore focus and close with Escape; inline specimens remain open for screenshots.
-
-- [ ] **Step 4: Verify and commit**
-
-Run: `bun test apps/web/src/design-audit/inventory.test.ts packages/editor/src/card.test.ts && bun run --cwd apps/web types`
-Expected: PASS.
-
-Commit: `git add apps/web/src/design-audit apps/web/src packages/editor/src && git commit -m "Catalogue application surfaces"`
-
-### Task 5: Authored-content fixture
-
-**Files:**
-- Create: `packages/editor/src/static-plan-editor.tsx`
-- Create: `packages/editor/src/static-plan-editor.test.tsx`
-- Modify: `packages/editor/package.json`
-- Create: `apps/web/src/design-audit/authored-content.tsx`
-- Modify: `apps/web/src/design-audit/page.tsx`
-
-- [ ] **Step 1: Write the static-editor render contract**
-
-Render `StaticPlanEditor` with a heading, callout, and code fixture. Assert its labelled read-only
-document landmark and source identity render without collaboration status or connection fallback.
-The browser pass later asserts the hydrated editor's actual authored blocks.
-
-- [ ] **Step 2: Implement `StaticPlanEditor`**
-
-Mount `MDXEditor` with supplied canonical `source`, the same lexical theme and content class as
-`PlanEditor`, `dialectPlugins({ core: false })`, `markdownShortcutPlugin()`, and `widgetsPlugin`.
-Accept optional `research` and `questions` fixture stores. Export it only from an explicit
-`@chopin/editor/static` package subpath.
-
-- [ ] **Step 3: Create the canonical document fixture**
-
-Include ordinary prose and links, headings, ordered/unordered/task lists, table, note/tip/warning/danger
-callouts, tabs, inline/block maths, plain and TypeScript code, valid and invalid diffs, Mermaid diagram,
-image success/failure specimens, a research node, and decision-related prose. Use the real dialect
-syntax and fixed valid IDs.
-
-- [ ] **Step 4: Show sidecar states beside the document**
-
-Render `ResearchCard` for each lifecycle state, a populated `ResearchComposer`, resolved decision and
-comment cards, plus their empty/loading/error variants. This keeps record-owned state authoritative
-instead of forging decision records inside MDX.
-
-- [ ] **Step 5: Verify and commit**
-
-Run: `bun test packages/editor/src/static-plan-editor.test.tsx apps/web/src/design-audit/inventory.test.ts && bun run --cwd packages/editor types && bun run --cwd apps/web types`
-Expected: PASS.
-
-Commit: `git add packages/editor apps/web/src/design-audit && git commit -m "Catalogue authored document components"`
-
-### Task 6: Browser audit handoff
-
-**Files:**
-- Create: `docs/design-system-audit.md`
-
-- [ ] **Step 1: Start the real development server**
-
-Run: `bun run dev`
-Expected: the supervisor reports the local application URL. Open `/design-audit` without signing in.
-
-- [ ] **Step 2: Inspect desktop and mobile in one broad pass**
-
-Capture full-page and section screenshots at 1440px and 390px. Check overflow, target size, focus,
-disabled state, hierarchy, icon geometry/colour, spacing rhythm, surface elevation, modal/menu behaviour,
-tabs, authored blocks, and loading states.
-
-- [ ] **Step 3: Inspect the authenticated application**
-
-Open the ordinary application root. If it shows GitHub sign-in, stop and notify the user so they can
-complete authentication. Once signed in, compare the repository picker, navigation, document,
-conversation, decisions, comments, research, dialogs, menus, and loading transitions against the
-catalogue at desktop and mobile widths.
-
-- [ ] **Step 4: Record evidence**
-
-Create `docs/design-system-audit.md` with a health score, P0–P3 findings with file/line evidence,
-positive findings, exact duplicate icons, and a human-judgement parking lot. Each finding must explain
-impact and name the token/component boundary that should own the fix.
-
-- [ ] **Step 5: Write the evidence-based normalisation plan**
-
-Create a second small-slice plan from the verified P1/P2 findings. Do not include speculative P3 work.
-
-- [ ] **Step 6: Commit the audit**
-
-Commit: `git add docs/design-system-audit.md docs/superpowers/plans && git commit -m "Document design system audit findings"`
diff --git a/docs/superpowers/plans/2026-08-28-design-system-normalization.md b/docs/superpowers/plans/2026-08-28-design-system-normalization.md
deleted file mode 100644
index 1736b13e..00000000
--- a/docs/superpowers/plans/2026-08-28-design-system-normalization.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# Design system normalization plan
-
-**Status:** Complete
-
-This small pass addresses only the verified P1/P2 findings from the browser audit. The P3 icon
-colour migration and product-taste questions remain outside this plan.
-
-## 1. Make the current compact destination visible
-
-- Add a shared `aria-current="page"` treatment to `.workspace-navigation`.
-- Guard it in `apps/web/src/tokens.test.ts`.
-- Show the compact navigation state in the surface catalogue.
-
-## 2. Normalize standard icon buttons
-
-- Keep `.btn-icon` at 28px with a 16px glyph.
-- Move send, Conversation, close, stop, sidebar, and queued-message actions onto that contract.
-- Preserve 14px compact-navigation and disclosure icons because they are a separate role.
-- Add focused render contracts for the affected controls.
-
-## 3. Remove mechanical drift
-
-- Keep base button labels on one line.
-- Replace the two byte-identical close icons with `panel-close.svg`.
-- Add an asset regression test so the duplicate names do not return.
-
-## 4. Verify
-
-- Run the focused design-system and component tests.
-- Run workspace TypeScript checks, validation, unit tests, and production build.
-- Recheck the catalogue at desktop and compact widths.
diff --git a/docs/superpowers/specs/2026-08-24-archived-chats-sidebar-design.md b/docs/superpowers/specs/2026-08-24-archived-chats-sidebar-design.md
new file mode 100644
index 00000000..2a075dc8
--- /dev/null
+++ b/docs/superpowers/specs/2026-08-24-archived-chats-sidebar-design.md
@@ -0,0 +1,61 @@
+# Archived Chats Sidebar
+
+## Goal
+
+Move archived documents out of the active project catalogue and into a distinct sidebar mode.
+This replaces the current “Show archived documents” checkbox and mixed active/archive list.
+
+## Interaction
+
+The active sidebar remains unchanged except for a new **Archived chats** navigation button directly
+above the account control. It uses the supplied box-archive SVG at 14px and the same spacing,
+typography, hover, and focus treatment as the existing New document and Search actions.
+
+Selecting **Archived chats** swaps the scrollable sidebar contents into archive mode:
+
+- New document and Search are replaced by **← Back to active docs**.
+- Projects are listed in their existing order.
+- Each expanded project shows only archived documents and their existing research children.
+- Project creation, document creation, and new-research controls are hidden.
+- Archived document menus continue to offer Restore and Delete permanently.
+- The redundant per-document Archived badge is omitted in this already-labelled context.
+- Existing loading, error, pagination, collapse, current-document, drawer, and resize behavior remains.
+
+The account control remains anchored at the bottom in both modes. The Archived chats footer button is
+shown only in active mode; the back control is the return path from archive mode.
+
+Restoring a document while browsing archives returns the sidebar to active mode so the restored
+document is visible. Archiving a document keeps the sidebar in active mode and removes it from the
+active catalogue.
+
+## Architecture
+
+`NavigationShell` owns a local `"active" | "archived"` catalogue mode and passes it to the existing
+document and research catalogue hooks. Archive mode reuses the current `includeArchived=true` API
+request, then `ProjectSidebar` filters each project to archived channels. Active mode uses the
+existing active-only request. No route, persistence, server, storage, or protocol change is needed.
+
+`ProjectSidebar` renders separate active and archived navigation bodies while reusing the existing
+Project component. Small mode props control document filtering and the visibility of mutation
+controls. A new SVG asset is imported through `NavigationIcon`, preserving the shared 14px contract.
+
+## Failure and Empty States
+
+Archive mode keeps the existing per-project loading, failure, and Load more behavior. Projects
+without archived documents may have an empty expanded list. API failures use the current navigation
+error presentation. Switching modes cancels stale catalogue requests through the existing hook.
+
+## Testing
+
+- Static navigation tests cover the footer placement, exact labels, 14px icon, mode-specific
+  controls, and archived-only rendering.
+- Existing document catalogue tests continue to cover cancellation and stale-response handling.
+- The archive E2E flow opens Archived chats, verifies active documents are absent, restores an
+  archived document, and returns to the active catalogue.
+- Responsive drawer behavior uses the same mode and controls and is covered by the E2E flow at a
+  narrow viewport where practical.
+
+## Out of Scope
+
+This change does not add a dedicated archive URL, persist archive mode across reloads, alter archive
+authorization, or introduce an archive-only backend query.
diff --git a/docs/superpowers/specs/2026-08-28-brand-wash-alpha-design.md b/docs/superpowers/specs/2026-08-28-brand-wash-alpha-design.md
deleted file mode 100644
index 6081068e..00000000
--- a/docs/superpowers/specs/2026-08-28-brand-wash-alpha-design.md
+++ /dev/null
@@ -1,23 +0,0 @@
-# Brand wash alpha design
-
-## Decision
-
-Define `--color-brand-wash` as the brand colour at true 30% opacity:
-
-```css
-color-mix(in srgb, var(--color-brand) 30%, transparent)
-```
-
-This preserves the brand hue while allowing the surface beneath it to contribute to the result.
-
-## Scope
-
-- Change only `--color-brand-wash`.
-- Keep all existing consumers and the design-audit swatch on the shared token.
-- Do not change the brand, hover, active, or ink colours.
-
-## Verification
-
-- Add a token contract that distinguishes true alpha from an opaque page tint.
-- Run the token tests and validation.
-- Inspect the swatch and representative brand-wash consumers in the live catalogue.
diff --git a/docs/superpowers/specs/2026-08-28-design-system-audit-design.md b/docs/superpowers/specs/2026-08-28-design-system-audit-design.md
deleted file mode 100644
index c8ad339a..00000000
--- a/docs/superpowers/specs/2026-08-28-design-system-audit-design.md
+++ /dev/null
@@ -1,101 +0,0 @@
-# Design system audit
-
-## Aim
-
-Make Chopin's visual system easier to inspect and harder to drift. The first pass should fix clear,
-repeatable inconsistencies while leaving taste-heavy choices visible for a human review.
-
-The audit covers `apps/web` and the user-facing parts of `packages/editor`. Existing product identity,
-behaviour, and terminology stay intact.
-
-## Current state
-
-The foundations are stronger than the individual screens suggest. `apps/web/src/theme.css` already
-owns the colour, type, spacing, radius, focus, shadow, button, field, and choice-control scales. The
-main problem is inconsistent use across roughly 3,400 lines of app and editor CSS.
-
-Icons currently mix local SVG files with Phosphor React components and explicit sizes from 14px to
-24px. At least one pair is byte-identical: `assets/figma/navigation/collapse.svg` and
-`assets/icons/conversation-close.svg`.
-
-Many editor widgets depend on Lexical, Yjs, live stores, or application state. Reimplementing their
-markup in a showcase would hide the drift we want to find.
-
-## Architecture
-
-Add a development-only `/design-audit` route to `apps/web`. It renders before session loading, so the
-catalogue can be reviewed without GitHub authentication. Production builds must not expose or bundle
-the route.
-
-The page has four layers:
-
-1. **Foundations** – colour, typography, spacing, radii, shadows, icon sizes, and focus treatment.
-2. **Controls** – buttons, icon buttons, links, fields, selections, tabs, menus, dropdowns, and their
-   resting, hover, active, focus, disabled, busy, error, and selected states.
-3. **Surfaces** – dialogs, popovers, cards, lists, navigation rows, chat messages, composer elements,
-   decisions, resolved comments, and loading/empty/error states.
-4. **Authored content** – a real read-only editor fixture containing headings, lists, links, image,
-   formula, Mermaid diagram, code, diff, callout, table, tabs, decision, comment-related prose, and
-   research states. Where a widget cannot be mounted through the document, use its exported component
-   with a small typed fixture adapter.
-
-Catalogue scaffolding belongs in a small `apps/web/src/design-audit/` module. It may compose real
-components and fixtures but must not become a second component library.
-
-## State and interaction
-
-Sections render all stable visual states side by side. Pointer-only states get a labelled forced-state
-sample so screenshots remain deterministic; real controls remain interactive for keyboard and focus
-review. Dialogs and menus have both inline specimen and interactive examples.
-
-Fixtures are local and deterministic. They do not call HTTP, WebSocket, GitHub, or Planner APIs. A
-compact viewport control lets the same page expose desktop and narrow arrangements without copying
-the app shell.
-
-## Audit method
-
-Create a machine-readable inventory alongside the page for:
-
-- component and state coverage;
-- icon source, semantic name, geometry, and duplicate-content hash;
-- button and icon-button class combinations;
-- shadow, radius, spacing, and colour-token use; and
-- items deliberately left for human judgement.
-
-Inspect the catalogue and authenticated app at desktop and mobile widths. Use one broad screenshot
-pass, fix the resulting clear issues in a batch, then use one confirmation pass. This is a bounded
-review, not an endless polish loop.
-
-Clear first-pass fixes include duplicate icon assets, mismatched icon geometry or colour, missing
-focus and disabled treatments, undersized targets, accidental one-off spacing, incorrect shadow
-levels, and hierarchy that contradicts the shared button variants. Ambiguous brand or composition
-changes go into the human-review list instead.
-
-## Change boundaries
-
-Normalisation should deepen the existing system:
-
-- add semantic utilities or small shared components only when at least two real consumers need them;
-- migrate consumers in small vertical slices;
-- preserve accessible names, keyboard behaviour, responsive behaviour, and editor invariants; and
-- avoid compatibility aliases unless persisted data or an external consumer requires one.
-
-The catalogue stays in the repository as a regression and review surface after the audit.
-
-## Verification
-
-The catalogue gets focused render or source-contract tests for route gating and required specimens.
-Existing component tests remain authoritative for behaviour. Browser checks cover layout, focus,
-menus, dialogs, target sizes, overflow, and screenshots at desktop and mobile widths.
-
-After edits, run `bun run fix`, focused tests, `bun run types`, `bun run ci`, and the narrowest relevant
-Playwright coverage. Run the design-quality detector once over changed UI files after visual work is
-finished.
-
-## Delivery slices
-
-1. Add the dev-only catalogue shell, inventory, and foundation/control specimens.
-2. Add real app surfaces, chat, dialogs, decisions, comments, and loading states.
-3. Add the authored-content fixture and research states.
-4. Capture the first screenshots and normalise clear token, icon, control, spacing, and surface drift.
-5. Confirm desktop/mobile results and publish the remaining human-review list.

From 9f416c3331c69c7e4b70e097bd6d06c3078b284d Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Fri, 28 Aug 2026 12:21:52 +0100
Subject: [PATCH 32/35] Remove archived chat planning docs

---
 .../2026-08-24-archived-chats-sidebar.md      | 378 ------------------
 ...026-08-24-archived-chats-sidebar-design.md |  61 ---
 2 files changed, 439 deletions(-)
 delete mode 100644 docs/superpowers/plans/2026-08-24-archived-chats-sidebar.md
 delete mode 100644 docs/superpowers/specs/2026-08-24-archived-chats-sidebar-design.md

diff --git a/docs/superpowers/plans/2026-08-24-archived-chats-sidebar.md b/docs/superpowers/plans/2026-08-24-archived-chats-sidebar.md
deleted file mode 100644
index abb2309a..00000000
--- a/docs/superpowers/plans/2026-08-24-archived-chats-sidebar.md
+++ /dev/null
@@ -1,378 +0,0 @@
-# Archived Chats Sidebar Implementation Plan
-
-> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
-
-**Goal:** Replace the mixed archive checkbox with a distinct archived-chats sidebar mode.
-
-**Architecture:** Keep `NavigationShell` as the owner of the existing `showArchived` boolean and
-reuse the current `includeArchived=true` catalogue request. `ProjectSidebar` interprets that boolean
-as a two-mode view, filters the mixed response to archived documents, and renders mode-specific
-navigation controls. Restoring a document returns the shell to active mode.
-
-**Tech Stack:** React 19, TypeScript, CSS, Bun tests, Playwright
-
-**Spec:** `docs/superpowers/specs/2026-08-24-archived-chats-sidebar-design.md`
-
-## Global Constraints
-
-- The footer label is exactly **Archived chats**.
-- The archive return label is exactly **← Back to active docs**.
-- The supplied box-archive SVG renders through `NavigationIcon` at 14px.
-- Active mode keeps the existing active-only API request.
-- Archive mode reuses `includeArchived=true` and displays only channels with `archivedAt`.
-- The account control remains anchored at the bottom in both modes.
-- Do not add routes, persisted mode state, server/storage/protocol changes, or dependencies.
-- TypeScript uses tabs, double quotes, semicolons, and local `let` bindings.
-- Run `bun run fix` after code edits and inspect every formatting change.
-
----
-
-### Task 1: Render active and archived sidebar modes
-
-**Files:**
-
-- Create: `apps/web/src/assets/figma/navigation/box-archive.svg`
-- Modify: `apps/web/src/project-sidebar.tsx:1-362`
-- Modify: `apps/web/src/navigation.css:53-122`
-- Test: `apps/web/src/navigation-chrome.test.ts:28-146`
-
-**Interfaces:**
-
-- Consumes: existing `showArchived: boolean` and
-  `onShowArchivedChange(show: boolean): void` `ProjectSidebar` props.
-- Produces: the same public props; active mode calls `onShowArchivedChange(true)` from the footer,
-  archive mode calls `onShowArchivedChange(false)` from the back control.
-- Produces: `Project` receives `archiveMode: boolean` and filters its local channel list before
-  rendering without changing `ProjectDocuments` or the catalogue hooks.
-
-- [ ] **Step 1: Add a failing static-render test for both modes**
-
-Add a focused test in `navigation-chrome.test.ts` that renders one active and one archived channel:
-
-```tsx
-test("separates active and archived documents into sidebar modes", () => {
-	let active = {
-		createdAt: "2026-08-24T10:00:00.000Z",
-		createdBy: "U_test",
-		id: "active-document",
-		repositoryId: "R_test",
-		repositoryName: "testing-sql-transcripts",
-		repositoryOwner: "MaggieAppleton",
-		revision: 0,
-		slug: "active-document",
-		title: "Active document",
-		updatedAt: "2026-08-24T10:00:00.000Z",
-	};
-	let archived = {
-		...active,
-		archivedAt: "2026-08-24T11:00:00.000Z",
-		id: "archived-document",
-		slug: "archived-document",
-		title: "Archived document",
-		updatedAt: "2026-08-24T11:00:00.000Z",
-	};
-	let props = {
-		canCreateDocument: true,
-		creatingNewDocument: false,
-		creatingProjectIds: new Set<string>(),
-		onAccount: () => {},
-		onAddProject: () => {},
-		onCollapse: () => {},
-		onCreateDocument: () => {},
-		onDocumentAction: () => {},
-		onLoadMore: () => {},
-		onNewDocument: () => {},
-		onSearch: () => {},
-		onShowArchivedChange: () => {},
-		projects: [{
-			documents: { status: "ready" as const, channels: [active, archived] },
-			project: {
-				available: true,
-				position: 0,
-				repositoryId: "R_test",
-				repositoryName: "testing-sql-transcripts",
-				repositoryOwner: "MaggieAppleton",
-			},
-		}],
-		user: { avatarUrl: "", id: "user-one", login: "MaggieAppleton" },
-	};
-	let activeMarkup = renderToStaticMarkup(createElement(ProjectSidebar, {
-		...props,
-		showArchived: false,
-	}));
-	let archivedMarkup = renderToStaticMarkup(createElement(ProjectSidebar, {
-		...props,
-		showArchived: true,
-	}));
-
-	expect(activeMarkup).toContain("Archived chats");
-	expect(activeMarkup).toContain("box-archive.svg");
-	expect(activeMarkup).toMatch(/height="14" src="[^"]*box-archive\.svg" width="14"/);
-	expect(activeMarkup).toContain("Active document");
-	expect(activeMarkup).not.toContain("Archived document");
-	expect(activeMarkup).not.toContain("Show archived documents");
-	expect(activeMarkup.indexOf("Archived chats")).toBeLessThan(activeMarkup.indexOf("user-one"));
-
-	expect(archivedMarkup).toContain("← Back to active docs");
-	expect(archivedMarkup).toContain("Archived document");
-	expect(archivedMarkup).not.toContain("Active document");
-	expect(archivedMarkup).not.toContain("Archived chats");
-	expect(archivedMarkup).not.toContain("New document");
-	expect(archivedMarkup).not.toContain(">Search<");
-	expect(archivedMarkup).not.toContain("Add Project");
-	expect(archivedMarkup).not.toContain(">Archived</span>");
-});
-```
-
-- [ ] **Step 2: Run the static test and verify it fails**
-
-Run:
-
-```bash
-bun test apps/web/src/navigation-chrome.test.ts
-```
-
-Expected: FAIL because `Archived chats`, `box-archive.svg`, and the archived-only view do not exist.
-
-- [ ] **Step 3: Add the supplied archive asset**
-
-Create `box-archive.svg` from the approved SVG, preserving its `18 18` view box and strokes:
-
-```svg
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
-  <title>box-archive</title>
-  <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="#212121">
-    <path d="M14.75,6.25v7c0,1.105-.895,2-2,2H5.25c-1.105,0-2-.895-2-2V6.25" />
-    <rect x="1.75" y="2.75" width="14.5" height="3.5" rx="1" ry="1" />
-    <line x1="7" y1="9.25" x2="11" y2="9.25" />
-  </g>
-</svg>
-```
-
-- [ ] **Step 4: Implement the two sidebar bodies and archived-only filtering**
-
-In `project-sidebar.tsx`, import `boxArchiveIcon`. Add `archiveMode: boolean` to `Project`, filter the
-mixed catalogue, and hide creation affordances:
-
-```tsx
-let { documents, project } = entry;
-let channels = documents.channels.filter(channel =>
-	archiveMode ? channel.archivedAt !== undefined : channel.archivedAt === undefined
-);
-```
-
-Gate the project-level create button with `!archiveMode`, omit the `Archived` badge from document
-links, and pass `onNewResearch={archiveMode ? undefined : onNewResearch}`.
-
-Replace the checkbox and unconditional primary actions with a mode-specific local, then render
-`{primaryActions}` after the sidebar header:
-
-```tsx
-let primaryActions = (
-	<div className="project-sidebar-primary-actions">
-		{showArchived
-			? (
-				<button
-					className="project-sidebar-primary-action"
-					onClick={() => onShowArchivedChange(false)}
-					type="button"
-				>
-					<span aria-hidden="true">←</span>
-					<span>Back to active docs</span>
-				</button>
-			)
-			: (
-				<>
-					<button
-						className="project-sidebar-primary-action"
-						disabled={!canCreateDocument || creatingNewDocument}
-						onClick={onNewDocument}
-						type="button"
-					>
-						<NavigationIcon src={newDocumentIcon} />
-						<span>New document</span>
-					</button>
-					<button
-						className="project-sidebar-primary-action"
-						onClick={onSearch}
-						type="button"
-					>
-						<NavigationIcon src={searchIcon} />
-						<span>Search</span>
-					</button>
-				</>
-			)}
-	</div>
-);
-```
-
-Hide the Add Project button when `showArchived` is true. Pass `archiveMode={showArchived}` to every
-`Project`. Define this local and render `{archiveFooter}` immediately before
-`project-sidebar-account-wrap`:
-
-```tsx
-let archiveFooter = !showArchived
-	? (
-		<div className="project-sidebar-footer-actions">
-			<button
-				className="project-sidebar-primary-action"
-				onClick={() => onShowArchivedChange(true)}
-				type="button"
-			>
-				<NavigationIcon src={boxArchiveIcon} />
-				<span>Archived chats</span>
-			</button>
-		</div>
-	)
-	: null;
-```
-
-- [ ] **Step 5: Match the footer to existing navigation styling**
-
-In `navigation.css`, delete `.project-sidebar-archived-toggle` and its input rule. Share the existing
-layout declarations with the new footer wrapper:
-
-```css
-.project-sidebar-primary-actions,
-.project-sidebar-footer-actions {
-	display: flex;
-	flex-direction: column;
-	padding: 0 8px;
-}
-
-.project-sidebar-footer-actions {
-	flex: 0 0 auto;
-}
-```
-
-Do not add a new font size, color, hover rule, or icon opacity rule; the button must inherit
-`project-sidebar-primary-action` behavior.
-
-- [ ] **Step 6: Format and run the focused checks**
-
-Run:
-
-```bash
-bun run fix
-git diff --check
-bun test apps/web/src/navigation-chrome.test.ts
-bun run types
-```
-
-Expected: formatting changes are limited to the four Task 1 files; the test and typecheck pass.
-
-- [ ] **Step 7: Commit the presentation slice**
-
-```bash
-git add apps/web/src/assets/figma/navigation/box-archive.svg apps/web/src/project-sidebar.tsx apps/web/src/navigation.css apps/web/src/navigation-chrome.test.ts
-git commit -m "Move archived chats into sidebar section"
-```
-
-### Task 2: Return restored documents to the active catalogue
-
-**Files:**
-
-- Modify: `apps/web/src/navigation-shell.tsx:607-625`
-- Test: `e2e/document-navigation.e2e.ts:339-382`
-
-**Interfaces:**
-
-- Consumes: Task 1's unchanged `onShowArchivedChange(show: boolean): void` contract.
-- Produces: a successful `restore` mutation calls `setShowArchived(false)` after accepting the
-  returned channel; archive and failed mutations do not change sidebar mode.
-
-- [ ] **Step 1: Rewrite the existing archive E2E expectations for the new navigation**
-
-Replace the checkbox and archive-search assertions in
-`writers can archive, restore, and permanently delete a document` with:
-
-```tsx
-await projects.getByRole("button", { name: "Archived chats", exact: true }).click();
-await expect(projects.getByRole("button", { name: "Back to active docs", exact: false }))
-	.toBeVisible();
-await expect(projects.getByRole("link", { name: title, exact: true })).toBeVisible();
-await expect(projects.getByRole("button", { name: "New document", exact: true })).toHaveCount(0);
-await expect(projects.getByRole("button", { name: "Search", exact: true })).toHaveCount(0);
-
-await headerAction(ana, "Restore");
-await expect(content(ana)).toHaveAttribute("contenteditable", "true");
-await expect(content(bo)).toHaveAttribute("contenteditable", "true");
-await expect(ana.getByText("Archived, read-only", { exact: true })).toHaveCount(0);
-await expect(projects.getByRole("button", { name: "Archived chats", exact: true })).toBeVisible();
-await expect(projects.getByRole("link", { name: title, exact: true })).toBeVisible();
-await expect(projects.getByRole("button", { name: "Back to active docs", exact: false }))
-	.toHaveCount(0);
-```
-
-Retain the permanent-delete half of the lifecycle test after those assertions:
-
-```tsx
-await headerAction(ana, "Archive");
-await expect(content(ana)).toHaveAttribute("contenteditable", "false");
-await headerAction(ana, "Delete permanently");
-let confirmation = ana.getByRole("dialog", { name: "Delete document permanently?" });
-await confirmation.getByRole("button", { name: "Delete permanently", exact: true }).click();
-await expect(ana).not.toHaveURL(path);
-await expect(bo).not.toHaveURL(path);
-let unavailable = await ana.request.get(`/api/channels/${room}`);
-expect(unavailable.status()).toBe(404);
-```
-
-- [ ] **Step 2: Run the targeted E2E test and verify the restore transition fails**
-
-Run:
-
-```bash
-bun run e2e e2e/document-navigation.e2e.ts --grep "writers can archive"
-```
-
-Expected: FAIL after Restore because the sidebar remains in archive mode and `Archived chats` is not
-visible.
-
-- [ ] **Step 3: Switch to active mode only after a successful restore**
-
-Update the mutation success callback in `navigation-shell.tsx`:
-
-```tsx
-void mutation.then(detail => {
-	acceptChannel(detail.channel);
-	if (action === "restore") setShowArchived(false);
-}, reason => {
-	setError({ reason });
-});
-```
-
-Do not switch modes before the request succeeds. This preserves retry context on restore failure.
-
-- [ ] **Step 4: Run formatting and complete verification**
-
-Run:
-
-```bash
-bun run fix
-git diff --check
-bun test apps/web/src/navigation-chrome.test.ts
-bun run types
-bun run e2e e2e/document-navigation.e2e.ts --grep "writers can archive"
-bun run ci
-```
-
-Expected: all commands pass. Inspect `git diff` and keep formatter changes scoped to files in this
-plan.
-
-- [ ] **Step 5: Commit the behavior slice**
-
-```bash
-git add apps/web/src/navigation-shell.tsx e2e/document-navigation.e2e.ts
-git commit -m "Return restored documents to active navigation"
-```
-
-## Final Acceptance
-
-- Active mode contains New document, Search, Projects, Archived chats, then the account control.
-- Archive mode contains ← Back to active docs, project-grouped archived documents, then the account.
-- Active documents never appear in archive mode, and archive badges are absent there.
-- Restoring succeeds before returning to active mode; restore failure leaves archive mode intact.
-- The supplied archive glyph renders at 14px in inline and drawer sidebars.
-- `bun test apps/web/src/navigation-chrome.test.ts`, `bun run types`, the targeted archive E2E test,
-  and `bun run ci` pass.
diff --git a/docs/superpowers/specs/2026-08-24-archived-chats-sidebar-design.md b/docs/superpowers/specs/2026-08-24-archived-chats-sidebar-design.md
deleted file mode 100644
index 2a075dc8..00000000
--- a/docs/superpowers/specs/2026-08-24-archived-chats-sidebar-design.md
+++ /dev/null
@@ -1,61 +0,0 @@
-# Archived Chats Sidebar
-
-## Goal
-
-Move archived documents out of the active project catalogue and into a distinct sidebar mode.
-This replaces the current “Show archived documents” checkbox and mixed active/archive list.
-
-## Interaction
-
-The active sidebar remains unchanged except for a new **Archived chats** navigation button directly
-above the account control. It uses the supplied box-archive SVG at 14px and the same spacing,
-typography, hover, and focus treatment as the existing New document and Search actions.
-
-Selecting **Archived chats** swaps the scrollable sidebar contents into archive mode:
-
-- New document and Search are replaced by **← Back to active docs**.
-- Projects are listed in their existing order.
-- Each expanded project shows only archived documents and their existing research children.
-- Project creation, document creation, and new-research controls are hidden.
-- Archived document menus continue to offer Restore and Delete permanently.
-- The redundant per-document Archived badge is omitted in this already-labelled context.
-- Existing loading, error, pagination, collapse, current-document, drawer, and resize behavior remains.
-
-The account control remains anchored at the bottom in both modes. The Archived chats footer button is
-shown only in active mode; the back control is the return path from archive mode.
-
-Restoring a document while browsing archives returns the sidebar to active mode so the restored
-document is visible. Archiving a document keeps the sidebar in active mode and removes it from the
-active catalogue.
-
-## Architecture
-
-`NavigationShell` owns a local `"active" | "archived"` catalogue mode and passes it to the existing
-document and research catalogue hooks. Archive mode reuses the current `includeArchived=true` API
-request, then `ProjectSidebar` filters each project to archived channels. Active mode uses the
-existing active-only request. No route, persistence, server, storage, or protocol change is needed.
-
-`ProjectSidebar` renders separate active and archived navigation bodies while reusing the existing
-Project component. Small mode props control document filtering and the visibility of mutation
-controls. A new SVG asset is imported through `NavigationIcon`, preserving the shared 14px contract.
-
-## Failure and Empty States
-
-Archive mode keeps the existing per-project loading, failure, and Load more behavior. Projects
-without archived documents may have an empty expanded list. API failures use the current navigation
-error presentation. Switching modes cancels stale catalogue requests through the existing hook.
-
-## Testing
-
-- Static navigation tests cover the footer placement, exact labels, 14px icon, mode-specific
-  controls, and archived-only rendering.
-- Existing document catalogue tests continue to cover cancellation and stale-response handling.
-- The archive E2E flow opens Archived chats, verifies active documents are absent, restores an
-  archived document, and returns to the active catalogue.
-- Responsive drawer behavior uses the same mode and controls and is covered by the E2E flow at a
-  narrow viewport where practical.
-
-## Out of Scope
-
-This change does not add a dedicated archive URL, persist archive mode across reloads, alter archive
-authorization, or introduce an archive-only backend query.

From 1d85cd5c71ea4d370e36983d20f6bd782ce4e9cb Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Fri, 28 Aug 2026 12:33:47 +0100
Subject: [PATCH 33/35] Resolve design audit review findings

---
 .../assets/figma/navigation/book-bookmark.svg | 18 -----
 .../assets/figma/navigation/box-archive.svg   |  8 --
 .../src/assets/figma/navigation/search.svg    | 29 -------
 .../assets/icons/navigation-chevron-right.svg |  6 --
 .../web/src/design-audit/authored-content.css | 46 +++++++++++
 .../web/src/design-audit/authored-content.tsx | 64 +++++++++++++--
 apps/web/src/design-audit/controls.css        | 33 ++++++++
 apps/web/src/design-audit/controls.tsx        | 81 ++++++++++++++++---
 apps/web/src/design-audit/icons.tsx           | 22 ++---
 apps/web/src/design-audit/inventory.ts        |  2 +-
 apps/web/src/design-audit/surfaces.css        |  6 +-
 apps/web/src/design-audit/surfaces.tsx        | 29 +++++--
 apps/web/src/icon-assets.test.ts              |  7 +-
 apps/web/src/navigation-chrome.test.ts        | 13 ++-
 apps/web/src/project-sidebar.tsx              | 11 +--
 apps/web/src/room-workspace.tsx               | 19 ++---
 .../editor/src/assets/icons/link-plus.svg     | 13 ---
 .../editor/src/assets/icons/message-plus.svg  | 10 ---
 packages/editor/src/comments.tsx              | 12 +--
 packages/editor/src/index.ts                  |  3 +
 packages/editor/src/toolbar/bubble.tsx        | 12 +--
 packages/icons/src/index.ts                   |  2 +
 packages/icons/src/line.tsx                   | 21 +++++
 23 files changed, 293 insertions(+), 174 deletions(-)
 delete mode 100644 apps/web/src/assets/figma/navigation/book-bookmark.svg
 delete mode 100644 apps/web/src/assets/figma/navigation/box-archive.svg
 delete mode 100644 apps/web/src/assets/figma/navigation/search.svg
 delete mode 100644 apps/web/src/assets/icons/navigation-chevron-right.svg
 delete mode 100644 packages/editor/src/assets/icons/link-plus.svg
 delete mode 100644 packages/editor/src/assets/icons/message-plus.svg

diff --git a/apps/web/src/assets/figma/navigation/book-bookmark.svg b/apps/web/src/assets/figma/navigation/book-bookmark.svg
deleted file mode 100644
index 460d6acf..00000000
--- a/apps/web/src/assets/figma/navigation/book-bookmark.svg
+++ /dev/null
@@ -1,18 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
-	<title>book-bookmark</title>
-	<g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="#78766e">
-		<path d="M2.75,14V4.25c0-1.105,.895-2,2-2H15.25V12.25" />
-		<path
-			d="M11,14H7v3.5c0,.202,.122,.385,.309,.462,.187,.079,.401,.035,.545-.108l1.146-1.146,1.146,1.146c.096,.096,.224,.146,.354,.146,.064,0,.13-.012,.191-.038,.187-.077,.309-.26,.309-.462v-3.5Z"
-			fill="#78766e"
-			data-stroke="none"
-			stroke="none"
-		/>
-		<path
-			d="M5.25,15.75h-.75c-.966,0-1.75-.783-1.75-1.75s.784-1.75,1.75-1.75H15.25c-.641,.844-.734,2.547,0,3.5h-2.5"
-		/>
-		<circle cx="5.75" cy="9.75" r=".75" fill="#78766e" data-stroke="none" stroke="none" />
-		<circle cx="5.75" cy="4.75" r=".75" fill="#78766e" data-stroke="none" stroke="none" />
-		<circle cx="5.75" cy="7.25" r=".75" fill="#78766e" data-stroke="none" stroke="none" />
-	</g>
-</svg>
diff --git a/apps/web/src/assets/figma/navigation/box-archive.svg b/apps/web/src/assets/figma/navigation/box-archive.svg
deleted file mode 100644
index 60015c75..00000000
--- a/apps/web/src/assets/figma/navigation/box-archive.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
-	<title>box-archive</title>
-	<g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="#78766e">
-		<path d="M14.75,6.25v7c0,1.105-.895,2-2,2H5.25c-1.105,0-2-.895-2-2V6.25" />
-		<rect x="1.75" y="2.75" width="14.5" height="3.5" rx="1" ry="1" />
-		<line x1="7" y1="9.25" x2="11" y2="9.25" />
-	</g>
-</svg>
diff --git a/apps/web/src/assets/figma/navigation/search.svg b/apps/web/src/assets/figma/navigation/search.svg
deleted file mode 100644
index 0e59bab9..00000000
--- a/apps/web/src/assets/figma/navigation/search.svg
+++ /dev/null
@@ -1,29 +0,0 @@
-<svg
-	preserveAspectRatio="none"
-	overflow="visible"
-	style="display: block"
-	width="15"
-	height="15"
-	viewBox="0 0 15 15"
-	fill="none"
-	xmlns="http://www.w3.org/2000/svg"
->
-	<g id="Group">
-		<path
-			id="Vector"
-			d="M14.25 14.25L10.1386 10.1386"
-			stroke="#78766e"
-			stroke-width="1.5"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-		/>
-		<path
-			id="Vector_2"
-			d="M6.25 11.75C9.2875 11.75 11.75 9.2875 11.75 6.25C11.75 3.2125 9.2875 0.75 6.25 0.75C3.2125 0.75 0.75 3.2125 0.75 6.25C0.75 9.2875 3.2125 11.75 6.25 11.75Z"
-			stroke="#78766e"
-			stroke-width="1.5"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-		/>
-	</g>
-</svg>
diff --git a/apps/web/src/assets/icons/navigation-chevron-right.svg b/apps/web/src/assets/icons/navigation-chevron-right.svg
deleted file mode 100644
index c7a78425..00000000
--- a/apps/web/src/assets/icons/navigation-chevron-right.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
-	<title>chevron-right</title>
-	<g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="#78766e">
-		<polyline points="6.5 2.75 12.75 9 6.5 15.25"></polyline>
-	</g>
-</svg>
diff --git a/apps/web/src/design-audit/authored-content.css b/apps/web/src/design-audit/authored-content.css
index 954091a1..eb63dbb9 100644
--- a/apps/web/src/design-audit/authored-content.css
+++ b/apps/web/src/design-audit/authored-content.css
@@ -54,3 +54,49 @@
 .design-audit-static-plan .plan-diagram {
 	max-height: 18rem;
 }
+
+.design-audit-table-states {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
+	gap: 1rem;
+	margin-block-start: 1rem;
+}
+
+.design-audit-table-states > div {
+	display: grid;
+	align-content: start;
+	gap: 0.5rem;
+}
+
+.design-audit-table-toolbar {
+	display: flex;
+	gap: 0.25rem;
+}
+
+.design-audit-table-states table {
+	min-width: 100%;
+	border-collapse: collapse;
+	font-size: var(--text-sm);
+}
+
+.design-audit-table-states th,
+.design-audit-table-states td {
+	padding: 0.5rem;
+	border: var(--edge-width) solid var(--color-edge);
+	text-align: left;
+}
+
+.design-audit-table-states td[aria-selected="true"] {
+	background: var(--color-selected);
+	outline: var(--focus-ring-width) solid var(--focus-ring-color);
+	outline-offset: calc(-1 * var(--focus-ring-width));
+}
+
+.design-audit-table-overflow {
+	width: 15rem;
+	overflow-x: auto;
+}
+
+.design-audit-table-overflow table {
+	min-width: 30rem;
+}
diff --git a/apps/web/src/design-audit/authored-content.tsx b/apps/web/src/design-audit/authored-content.tsx
index 077dcc30..3b4a116b 100644
--- a/apps/web/src/design-audit/authored-content.tsx
+++ b/apps/web/src/design-audit/authored-content.tsx
@@ -98,7 +98,7 @@ let table = [
 	"| Component | Default | Active |",
 	"| :-- | :-- | :-- |",
 	"| Button | Secondary | Brand |",
-	"| Icon | 16px tertiary | 16px brand |",
+	"| Icon | 14px neutral | 14px brand |",
 	"| Row | Page | Selected wash |",
 ].join("\n") + "\n";
 
@@ -193,6 +193,61 @@ function ResearchSpecimens() {
 	);
 }
 
+function TableSpecimens() {
+	return (
+		<AuditPlate
+			description="The editor table plus selected-cell, toolbar, and overflow interaction states."
+			item="table"
+			title="Tables"
+		>
+			<StateLabel>Default</StateLabel>
+			<StaticPlanEditor source={table} />
+			<div className="design-audit-table-states">
+				<div>
+					<StateLabel>Selected cell · toolbar</StateLabel>
+					<div className="design-audit-table-toolbar" role="toolbar" aria-label="Table actions">
+						<button className="btn btn-sm btn-secondary" type="button">Add row</button>
+						<button className="btn btn-sm btn-secondary" type="button">Add column</button>
+					</div>
+					<table>
+						<tbody>
+							<tr>
+								<th>Component</th>
+								<th>State</th>
+							</tr>
+							<tr>
+								<td aria-selected="true">Button</td>
+								<td>Selected</td>
+							</tr>
+						</tbody>
+					</table>
+				</div>
+				<div>
+					<StateLabel>Overflow</StateLabel>
+					<div className="design-audit-table-overflow" tabIndex={0}>
+						<table>
+							<tbody>
+								<tr>
+									<th>Component</th>
+									<th>Default</th>
+									<th>Hover</th>
+									<th>Active</th>
+								</tr>
+								<tr>
+									<td>Button</td>
+									<td>Secondary</td>
+									<td>Raised</td>
+									<td>Brand</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+				</div>
+			</div>
+		</AuditPlate>
+	);
+}
+
 export function AuthoredContent() {
 	return (
 		<>
@@ -233,12 +288,7 @@ export function AuthoredContent() {
 				source={images}
 				title="Images"
 			/>
-			<EditorPlate
-				description="The editor table, with alignment and overflow behavior visible."
-				item="table"
-				source={table}
-				title="Tables"
-			/>
+			<TableSpecimens />
 		</>
 	);
 }
diff --git a/apps/web/src/design-audit/controls.css b/apps/web/src/design-audit/controls.css
index 3e4024dc..899246d5 100644
--- a/apps/web/src/design-audit/controls.css
+++ b/apps/web/src/design-audit/controls.css
@@ -195,6 +195,24 @@
 	border-block-end: var(--edge-width) solid var(--color-edge);
 }
 
+.design-audit-tab-specimens,
+.design-audit-menu-specimens {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: flex-start;
+	gap: 1rem;
+}
+
+.design-audit-tab-specimens > div,
+.design-audit-menu-specimens > div {
+	display: grid;
+	gap: 0.5rem;
+}
+
+.design-audit-tab-overflow {
+	width: 15rem;
+}
+
 .design-audit-tabs button {
 	position: relative;
 	min-height: 2rem;
@@ -224,6 +242,12 @@
 	color: var(--color-text-quaternary);
 }
 
+.design-audit-tabs button[data-audit-state="focus"],
+.design-audit-menu button[data-audit-state="focus"] {
+	outline: var(--focus-ring-width) solid var(--focus-ring-color);
+	outline-offset: var(--focus-ring-offset);
+}
+
 .design-audit-tabs button span {
 	margin-inline-start: 0.25rem;
 	font-variant-numeric: tabular-nums;
@@ -247,6 +271,10 @@
 	color: var(--color-text-primary);
 }
 
+.design-audit-menu button:disabled {
+	opacity: 0.4;
+}
+
 .design-audit-menu .design-audit-menu-destructive {
 	margin-block-start: 0.25rem;
 	border-block-start: var(--edge-width) solid var(--color-edge);
@@ -276,6 +304,11 @@
 	gap: 0.25rem;
 }
 
+.design-audit-dropdown-error {
+	font-size: var(--text-sm);
+	color: var(--color-destructive-ink);
+}
+
 @media (max-width: 639px) {
 	.design-audit-field-grid {
 		grid-template-columns: 1fr;
diff --git a/apps/web/src/design-audit/controls.tsx b/apps/web/src/design-audit/controls.tsx
index adaa8c34..f72a64f3 100644
--- a/apps/web/src/design-audit/controls.tsx
+++ b/apps/web/src/design-audit/controls.tsx
@@ -1,4 +1,4 @@
-import { CheckIcon, ChevronIcon, PlusIcon } from "@chopin/icons";
+import { CheckIcon, ChevronIcon, LoaderIcon, PlusIcon, WarningIcon } from "@chopin/icons";
 
 import { AuditPlate, StateLabel } from "./frame";
 
@@ -215,12 +215,29 @@ export function Controls() {
 				item="tabs"
 				title="Tabs"
 			>
-				<div aria-label="Document views" className="design-audit-tabs" role="tablist">
-					<button aria-selected="true" role="tab" type="button">Document</button>
-					<button aria-selected="false" role="tab" type="button">
-						Decisions <span>3</span>
-					</button>
-					<button aria-selected="false" disabled role="tab" type="button">Unavailable</button>
+				<div className="design-audit-tab-specimens">
+					<div>
+						<StateLabel>Selected · focus · disabled</StateLabel>
+						<div aria-label="Document views" className="design-audit-tabs" role="tablist">
+							<button aria-selected="true" role="tab" type="button">Document</button>
+							<button aria-selected="false" data-audit-state="focus" role="tab" type="button">
+								Decisions <span>3</span>
+							</button>
+							<button aria-selected="false" disabled role="tab" type="button">Unavailable</button>
+						</div>
+					</div>
+					<div className="design-audit-tab-overflow">
+						<StateLabel>Overflow</StateLabel>
+						<div
+							aria-label="Overflowing document views"
+							className="design-audit-tabs"
+							role="tablist"
+						>
+							<button aria-selected="true" role="tab" type="button">Document</button>
+							<button aria-selected="false" role="tab" type="button">Resolved decisions</button>
+							<button aria-selected="false" role="tab" type="button">Resolved comments</button>
+						</div>
+					</div>
 				</div>
 			</AuditPlate>
 
@@ -229,12 +246,26 @@ export function Controls() {
 				item="menus"
 				title="Menus"
 			>
-				<div aria-label="Document actions" className="design-audit-menu" role="menu">
-					<button role="menuitem" type="button">Rename document</button>
-					<button role="menuitem" type="button">Archive document</button>
-					<button className="design-audit-menu-destructive" role="menuitem" type="button">
-						Delete document
-					</button>
+				<div className="design-audit-menu-specimens">
+					<div>
+						<StateLabel>Closed</StateLabel>
+						<button aria-expanded="false" className="btn btn-md btn-secondary" type="button">
+							Document actions
+						</button>
+					</div>
+					<div>
+						<StateLabel>Open · focus · disabled</StateLabel>
+						<div aria-label="Document actions" className="design-audit-menu" role="menu">
+							<button role="menuitem" type="button">Rename document</button>
+							<button data-audit-state="focus" role="menuitem" type="button">
+								Archive document
+							</button>
+							<button disabled role="menuitem" type="button">Restore document</button>
+							<button className="design-audit-menu-destructive" role="menuitem" type="button">
+								Delete document
+							</button>
+						</div>
+					</div>
 				</div>
 			</AuditPlate>
 
@@ -270,6 +301,30 @@ export function Controls() {
 							<div role="option">Archived documents</div>
 						</div>
 					</div>
+					<div className="design-audit-dropdown-open">
+						<StateLabel>Loading</StateLabel>
+						<button
+							aria-busy="true"
+							className="field design-audit-dropdown-trigger"
+							disabled
+							type="button"
+						>
+							Loading documents<LoaderIcon aria-hidden="true" />
+						</button>
+					</div>
+					<div className="design-audit-dropdown-open">
+						<StateLabel>Error</StateLabel>
+						<button
+							aria-invalid="true"
+							className="field design-audit-dropdown-trigger"
+							type="button"
+						>
+							Documents unavailable<WarningIcon aria-hidden="true" />
+						</button>
+						<span className="design-audit-dropdown-error" role="alert">
+							Could not load documents.
+						</span>
+					</div>
 				</div>
 			</AuditPlate>
 		</>
diff --git a/apps/web/src/design-audit/icons.tsx b/apps/web/src/design-audit/icons.tsx
index 51029fa6..d8799ae4 100644
--- a/apps/web/src/design-audit/icons.tsx
+++ b/apps/web/src/design-audit/icons.tsx
@@ -7,8 +7,10 @@ import {
 	DocumentIcon,
 	InfoIcon,
 	LightbulbIcon,
+	LinkPlusIcon,
 	LoaderIcon,
 	MessageIcon,
+	MessagePlusIcon,
 	PlusIcon,
 	SearchIcon,
 	SignInIcon,
@@ -18,18 +20,12 @@ import {
 } from "@chopin/icons";
 
 import addProject from "../assets/figma/navigation/add-project.svg";
-import archive from "../assets/figma/navigation/box-archive.svg";
-import book from "../assets/figma/navigation/book-bookmark.svg";
 import chopin from "../assets/figma/navigation/chopin.svg";
 import documentActions from "../assets/figma/navigation/document-actions.svg";
 import newDocument from "../assets/figma/navigation/new-document.svg";
-import search from "../assets/figma/navigation/search.svg";
 import panelClose from "../assets/icons/panel-close.svg";
-import conversation from "../assets/icons/conversation.svg";
-import navigationChevron from "../assets/icons/navigation-chevron-right.svg";
+import chat from "../assets/icons/chat.svg";
 import plannerStop from "../assets/icons/planner-stop.svg";
-import linkPlus from "../../../../packages/editor/src/assets/icons/link-plus.svg";
-import messagePlus from "../../../../packages/editor/src/assets/icons/message-plus.svg";
 
 import type { IconProps } from "@chopin/icons";
 import type { ComponentType } from "react";
@@ -44,22 +40,18 @@ type IconCatalogueItem = {
 
 const NUCLEO_ICONS: readonly IconCatalogueItem[] = [
 	{ name: "Add project", source: addProject },
-	{ name: "Book bookmark", source: book },
-	{ name: "Archive", source: archive },
 	{ name: "Chopin", source: chopin },
 	{
-		duplicate: "collapse.svg and conversation-close.svg consolidated",
+		duplicate: "collapse.svg and chat-close.svg consolidated",
 		name: "Panel close",
 		source: panelClose,
 	},
 	{ name: "Document actions", source: documentActions },
 	{ name: "New document", source: newDocument },
-	{ name: "Search", source: search },
-	{ name: "Conversation", source: conversation },
-	{ name: "Navigation chevron", source: navigationChevron },
+	{ name: "Chat", source: chat },
 	{ name: "Planner stop", source: plannerStop },
-	{ name: "Link plus", source: linkPlus },
-	{ name: "Message plus", source: messagePlus },
+	{ icon: LinkPlusIcon, name: "Link plus" },
+	{ icon: MessagePlusIcon, name: "Message plus" },
 	{ icon: ArrowUpIcon, name: "Arrow up" },
 	{ icon: ChevronIcon, name: "Chevron right" },
 	{ className: "rotate-90", icon: ChevronIcon, name: "Chevron down (rotated)" },
diff --git a/apps/web/src/design-audit/inventory.ts b/apps/web/src/design-audit/inventory.ts
index 6c44935e..483f1624 100644
--- a/apps/web/src/design-audit/inventory.ts
+++ b/apps/web/src/design-audit/inventory.ts
@@ -143,7 +143,7 @@ export const AUDIT_INVENTORY: readonly AuditGroup[] = [
 				id: "callouts",
 				label: "Callouts",
 				source: "packages/editor/src/widgets/callout.tsx",
-				states: ["note", "tip", "warning", "danger", "focus"],
+				states: ["note", "tip", "important", "warning", "danger", "focus"],
 			},
 			{
 				id: "research",
diff --git a/apps/web/src/design-audit/surfaces.css b/apps/web/src/design-audit/surfaces.css
index 57d5cd89..c9faf986 100644
--- a/apps/web/src/design-audit/surfaces.css
+++ b/apps/web/src/design-audit/surfaces.css
@@ -148,7 +148,7 @@
 	}
 }
 
-.design-audit-conversation {
+.design-audit-chat {
 	display: flex;
 	height: 33rem;
 	max-height: 70dvh;
@@ -156,10 +156,10 @@
 	overflow: hidden;
 	border: var(--edge-width) solid var(--color-control-edge);
 	border-radius: var(--radius-xl);
-	background: var(--color-conversation-pane);
+	background: var(--color-chat-pane);
 }
 
-.design-audit-conversation .conversation-composer textarea {
+.design-audit-chat .chat-composer textarea {
 	width: 100%;
 	min-height: 4.5rem;
 	resize: none;
diff --git a/apps/web/src/design-audit/surfaces.tsx b/apps/web/src/design-audit/surfaces.tsx
index 1338e15c..6e449ce5 100644
--- a/apps/web/src/design-audit/surfaces.tsx
+++ b/apps/web/src/design-audit/surfaces.tsx
@@ -9,9 +9,7 @@ import {
 	SearchIcon,
 } from "@chopin/icons";
 
-import { PlanStatus, SendAction } from "@chopin/editor";
-import { SidecarCard } from "../../../../packages/editor/src/card";
-import { DecisionCard } from "../../../../packages/editor/src/widgets/decision";
+import { DecisionCard, PlanStatus, SendAction, SidecarCard } from "@chopin/editor";
 import { Transcript } from "../chat/transcript";
 import { TerminalAlert } from "../terminal-alert";
 import { AuditPlate, StateLabel } from "./frame";
@@ -85,6 +83,27 @@ function DialogSpecimens() {
 						</div>
 					</div>
 				</div>
+				<div>
+					<StateLabel>Busy</StateLabel>
+					<div
+						aria-busy="true"
+						aria-labelledby="audit-busy-title"
+						aria-modal="true"
+						className="design-audit-dialog"
+						role="dialog"
+					>
+						<h4 id="audit-busy-title">Rename document</h4>
+						<label>
+							Document name<input defaultValue="Design system audit" disabled />
+						</label>
+						<div className="design-audit-dialog-actions">
+							<button className="btn btn-md btn-secondary" disabled type="button">Cancel</button>
+							<button className="btn btn-md btn-primary" disabled type="button">
+								<LoaderIcon aria-hidden="true" />Saving
+							</button>
+						</div>
+					</div>
+				</div>
 			</div>
 		</AuditPlate>
 	);
@@ -168,7 +187,7 @@ function Conversation() {
 			item="chat"
 			title="Conversation"
 		>
-			<div className="design-audit-conversation">
+			<div className="design-audit-chat">
 				<Transcript
 					active
 					entries={CHAT_ENTRIES}
@@ -180,7 +199,7 @@ function Conversation() {
 						text: "Also check the compact layout.",
 					}]}
 				/>
-				<div className="conversation-composer px-2.5 pb-2.5">
+				<div className="chat-composer px-2.5 pb-2.5">
 					<div className="field flex flex-col">
 						<textarea aria-label="Message" defaultValue="@chopin Review the spacing" rows={2} />
 						<div className="design-audit-composer-actions">
diff --git a/apps/web/src/icon-assets.test.ts b/apps/web/src/icon-assets.test.ts
index 79903a1e..e012bc91 100644
--- a/apps/web/src/icon-assets.test.ts
+++ b/apps/web/src/icon-assets.test.ts
@@ -15,14 +15,14 @@ function sourceFiles(directory: string, found: string[] = []): string[] {
 	return found;
 }
 
-test("the sidebar and conversation share one panel-close asset", () => {
+test("the sidebar and Chat share one panel-close asset", () => {
 	let sidebar = readFileSync(join(root, "project-sidebar.tsx"), "utf8");
 	let workspace = readFileSync(join(root, "workspace.tsx"), "utf8");
 
 	expect(sidebar).toContain("assets/icons/panel-close.svg");
 	expect(workspace).toContain("assets/icons/panel-close.svg");
 	expect(existsSync(join(root, "assets/figma/navigation/collapse.svg"))).toBe(false);
-	expect(existsSync(join(root, "assets/icons/conversation-close.svg"))).toBe(false);
+	expect(existsSync(join(root, "assets/icons/chat-close.svg"))).toBe(false);
 });
 
 test("the interface uses only the shared Nucleo icon family", () => {
@@ -125,7 +125,8 @@ test("directional controls reuse one chevron and one panel icon", () => {
 	let room = readFileSync(join(root, "room-workspace.tsx"), "utf8");
 	let sidebarChrome = readFileSync(join(root, "project-sidebar-chrome.tsx"), "utf8");
 
-	expect(room).toContain("navigation-chevron-right.svg");
+	expect(room).toContain("ChevronIcon");
+	expect(existsSync(join(root, "assets/icons/navigation-chevron-right.svg"))).toBe(false);
 	expect(room).not.toContain("tool-chevron-down.svg");
 	expect(sidebarChrome).toContain("assets/icons/panel-close.svg");
 	expect(existsSync(join(root, "assets/icons/tool-chevron-down.svg"))).toBe(false);
diff --git a/apps/web/src/navigation-chrome.test.ts b/apps/web/src/navigation-chrome.test.ts
index 4e098019..3bf3456b 100644
--- a/apps/web/src/navigation-chrome.test.ts
+++ b/apps/web/src/navigation-chrome.test.ts
@@ -78,18 +78,17 @@ describe("the Figma navigation chrome", () => {
 		expect(markup).toMatch(
 			/aria-label="New document in testing-sql-transcripts"[^>]*>.*?new-document\.svg/s,
 		);
-		expect(markup).toContain("book-bookmark.svg");
-		expect(markup).toMatch(/src="[^"]*book-bookmark\.svg"/);
+		expect(markup).toContain("book-bookmark");
 		expect(markup).not.toContain('src="/repository.png"');
 		expect(markup).toMatch(
 			/aria-label="Add Project"[^>]*>.*?class="size-3\.5"[^>]*add-project\.svg/s,
 		);
 		expect(markup).toMatch(
-			/<button[^>]*class="project-sidebar-primary-action"[^>]*>.*?search\.svg.*?Search<\/span>/s,
+			/<button[^>]*class="project-sidebar-primary-action"[^>]*>.*?search.*?Search<\/span>/s,
 		);
 		expect(markup).toContain('class="project-sidebar-projects gap-2"');
 		expect(markup).toMatch(
-			/<button[^>]*aria-expanded="true"[^>]*class="project-sidebar-project-disclosure[^>]*>.*?book-bookmark\.svg.*?testing-sql-transcripts<\/span><\/button>/s,
+			/<button[^>]*aria-expanded="true"[^>]*class="project-sidebar-project-disclosure[^>]*>.*?book-bookmark.*?testing-sql-transcripts<\/span><\/button>/s,
 		);
 		expect(markup).toContain('data-feedback-icon="open"');
 		expect(markup).toContain('data-motion-feedback="icon"');
@@ -171,7 +170,7 @@ describe("the Figma navigation chrome", () => {
 		};
 		let markup = renderToStaticMarkup(createElement(Header, props));
 
-		expect(markup).toMatch(/src="[^"]*book-bookmark\.svg"/);
+		expect(markup).toContain("book-bookmark");
 		expect(markup).not.toContain('src="/repository.png"');
 		expect(markup).toContain('aria-label="Document: Hushed mountain"');
 		expect(markup).toContain('aria-label="Actions for Hushed mountain"');
@@ -202,8 +201,8 @@ describe("the Figma navigation chrome", () => {
 		expect(markup).toContain('aria-label="Child document: Source review"');
 		expect(markup).toContain('aria-label="People here: MaggieAppleton"');
 		expect(markup).not.toContain('aria-label="Actions for Release plan"');
-		expect(markup).toContain("navigation-chevron-right.svg");
-		expect(markup).toContain('class="document-breadcrumb-separator size-[14px]');
+		expect(markup).toContain("chevron-right");
+		expect(markup).toContain('class="document-breadcrumb-separator shrink-0"');
 		expect(markup).not.toContain(">›</span>");
 	});
 
diff --git a/apps/web/src/project-sidebar.tsx b/apps/web/src/project-sidebar.tsx
index 724cdaaa..ed994ef0 100644
--- a/apps/web/src/project-sidebar.tsx
+++ b/apps/web/src/project-sidebar.tsx
@@ -1,11 +1,8 @@
 import addProjectIcon from "./assets/figma/navigation/add-project.svg";
-import bookBookmarkIcon from "./assets/figma/navigation/book-bookmark.svg";
-import boxArchiveIcon from "./assets/figma/navigation/box-archive.svg";
 import chopinIcon from "./assets/figma/navigation/chopin.svg";
 import collapseIcon from "./assets/icons/panel-close.svg";
 import documentActionsIcon from "./assets/figma/navigation/document-actions.svg";
 import newDocumentIcon from "./assets/figma/navigation/new-document.svg";
-import searchIcon from "./assets/figma/navigation/search.svg";
 import { DocumentActionsMenu } from "./document-actions-menu";
 import { motionContract } from "./motion-contract";
 import { motionImmediately } from "./motion-input";
@@ -14,7 +11,7 @@ import { MotionDisclosure, MotionDisclosureIcon } from "@chopin/editor";
 import { childDocumentPath, documentPath } from "@chopin/protocol/document-url";
 
 import { useId, useRef, useState } from "react";
-import { ChevronIcon } from "@chopin/icons";
+import { ArchiveIcon, ChevronIcon, DocumentIcon, SearchIcon } from "@chopin/icons";
 import type * as Api from "./api";
 import type { DocumentAction } from "./document-actions-menu";
 import type { ProjectDocuments } from "./document-actions";
@@ -227,7 +224,7 @@ function Project(
 						open={expanded}
 						opened={<ChevronIcon className="rotate-90" size={14} />}
 					/>
-					<NavigationIcon src={bookBookmarkIcon} />
+					<DocumentIcon />
 					<span className="truncate text-sm font-bold">{label}</span>
 				</button>
 				{!archiveMode && project.available && canManage && (
@@ -335,7 +332,7 @@ export function ProjectSidebar(
 							onClick={onSearch}
 							type="button"
 						>
-							<NavigationIcon src={searchIcon} />
+							<SearchIcon />
 							<span>Search</span>
 						</button>
 					</>
@@ -354,7 +351,7 @@ export function ProjectSidebar(
 					ref={archivedChats}
 					type="button"
 				>
-					<NavigationIcon src={boxArchiveIcon} />
+					<ArchiveIcon />
 					<span>Archived chats</span>
 				</button>
 			</div>
diff --git a/apps/web/src/room-workspace.tsx b/apps/web/src/room-workspace.tsx
index d7e5f470..c3c8a246 100644
--- a/apps/web/src/room-workspace.tsx
+++ b/apps/web/src/room-workspace.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { documentPath } from "@chopin/protocol/document-url";
+import { ChevronIcon, DocumentIcon } from "@chopin/icons";
 import {
 	advanceDecisionView,
 	countUnanswered,
@@ -15,8 +16,6 @@ import {
 	visibleDecisionView,
 } from "@chopin/editor";
 
-import bookBookmarkIcon from "./assets/figma/navigation/book-bookmark.svg";
-import navigationChevronRight from "./assets/icons/navigation-chevron-right.svg";
 import { Chat } from "./chat/chat";
 import { rememberChannel } from "./channel-recovery";
 import { decisionAttention, DecisionViewControl } from "./decision-view-control";
@@ -25,7 +24,6 @@ import { DocumentActionsMenu } from "./document-actions-menu";
 import { motionContract } from "./motion-contract";
 import { motionImmediately } from "./motion-input";
 import { useNavigationDocument } from "./navigation-shell";
-import { NavigationIcon } from "./project-sidebar";
 import { peopleHere } from "./presence";
 import { ResearchRequestStore } from "./research-requests";
 import { Wire } from "./wire";
@@ -78,7 +76,7 @@ export function Header(
 				aria-label={`Document: ${label}`}
 				className="flex min-w-0 flex-1 items-center gap-0.5"
 			>
-				<NavigationIcon src={bookBookmarkIcon} />
+				<DocumentIcon />
 				{presentation.type === "parent-with-child"
 					? (
 						<>
@@ -90,11 +88,9 @@ export function Header(
 							>
 								<span className="truncate">{label}</span>
 							</button>
-							<img
-								alt=""
+							<ChevronIcon
 								aria-hidden="true"
-								className="document-breadcrumb-separator size-[14px] shrink-0"
-								src={navigationChevronRight}
+								className="document-breadcrumb-separator shrink-0"
 							/>
 							<span
 								aria-label={`Child document: ${presentation.childLabel}`}
@@ -113,12 +109,7 @@ export function Header(
 							trigger={
 								<>
 									<span className="truncate">{label}</span>
-									<img
-										alt=""
-										aria-hidden="true"
-										className="size-3.5 rotate-90"
-										src={navigationChevronRight}
-									/>
+									<ChevronIcon aria-hidden="true" className="rotate-90" />
 								</>
 							}
 						/>
diff --git a/packages/editor/src/assets/icons/link-plus.svg b/packages/editor/src/assets/icons/link-plus.svg
deleted file mode 100644
index 02e1eac2..00000000
--- a/packages/editor/src/assets/icons/link-plus.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
-	<title>link-plus</title>
-	<g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="#78766e">
-		<path d="M14.251 1.25V6.25" />
-		<path d="M16.751 3.75H11.751" />
-		<path
-			d="M7.86909 7.3934C7.56649 7.5539 7.28239 7.7617 7.02799 8.017L7.01799 8.027C5.63699 9.408 5.63699 11.646 7.01799 13.027L9.19299 15.202C10.574 16.583 12.812 16.583 14.193 15.202L14.203 15.192C15.584 13.811 15.584 11.573 14.203 10.192L13.4406 9.4296"
-		/>
-		<path
-			d="M9.13289 11.6066C9.43549 11.4461 9.71959 11.2383 9.97399 10.983L9.984 10.973C11.365 9.59199 11.365 7.35399 9.984 5.97299L7.80899 3.79799C6.42799 2.41699 4.18999 2.41699 2.80899 3.79799L2.79899 3.80799C1.41799 5.18899 1.41799 7.42699 2.79899 8.80799L3.5614 9.57039"
-		/>
-	</g>
-</svg>
diff --git a/packages/editor/src/assets/icons/message-plus.svg b/packages/editor/src/assets/icons/message-plus.svg
deleted file mode 100644
index e614dc65..00000000
--- a/packages/editor/src/assets/icons/message-plus.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
-	<title>msg-plus</title>
-	<g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="#78766e">
-		<path d="M14.75 12.25V17.25" />
-		<path
-			d="M16.2155 9.64111C16.2364 9.42991 16.25 9.2168 16.25 9C16.25 4.9961 13.004 1.75 9 1.75C4.996 1.75 1.75 4.9961 1.75 9C1.75 10.3188 2.10801 11.552 2.72301 12.6169C3.15301 13.4228 2.67 15.3291 1.75 16.25C3 16.3179 4.647 15.7529 5.383 15.2769C5.872 15.5591 6.647 15.9331 7.662 16.125C8.095 16.207 8.543 16.25 9 16.25C9.2167 16.25 9.4299 16.2363 9.6412 16.2156"
-		/>
-		<path d="M17.25 14.75H12.25" />
-	</g>
-</svg>
diff --git a/packages/editor/src/comments.tsx b/packages/editor/src/comments.tsx
index 20c96d76..743d59e1 100644
--- a/packages/editor/src/comments.tsx
+++ b/packages/editor/src/comments.tsx
@@ -13,7 +13,7 @@
  */
 
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { ArrowUpIcon, ChatCircleIcon, CheckIcon, XIcon } from "@phosphor-icons/react";
+import { ArrowUpIcon, CheckIcon, CloseIcon, MessageIcon } from "@chopin/icons";
 
 import { limits } from "@chopin/dialect";
 
@@ -69,7 +69,7 @@ function CloseButton({ onClose }: { onClose: () => void }) {
 			title="Close comment"
 			type="button"
 		>
-			<XIcon aria-hidden="true" size={16} />
+			<CloseIcon aria-hidden="true" size={14} />
 		</button>
 	);
 }
@@ -80,7 +80,7 @@ function DraftHeader({ onClose, showClose }: { onClose: () => void; showClose: b
 			className="flex min-h-7 items-center justify-between text-text-tertiary"
 			data-plan-comment-draft-header
 		>
-			<ChatCircleIcon aria-hidden="true" size={16} />
+			<MessageIcon aria-hidden="true" size={14} />
 			{showClose && <CloseButton onClose={onClose} />}
 		</header>
 	);
@@ -196,7 +196,7 @@ function Composer({
 						title={sendLabel ?? `Send ${label.toLowerCase()}`}
 						type="button"
 					>
-						<ArrowUpIcon aria-hidden="true" size={14} weight="bold" />
+						<ArrowUpIcon aria-hidden="true" size={14} />
 					</button>
 				)}
 				{onCancel && (
@@ -388,7 +388,7 @@ export function ThreadCard({
 									onClick={() => setConfirming("dismiss")}
 									type="button"
 								>
-									<XIcon aria-hidden="true" size={14} />
+									<CloseIcon aria-hidden="true" size={14} />
 									Dismiss
 								</button>
 								<button
@@ -397,7 +397,7 @@ export function ThreadCard({
 									onClick={() => setConfirming("accept")}
 									type="button"
 								>
-									<CheckIcon aria-hidden="true" size={14} weight="bold" />
+									<CheckIcon aria-hidden="true" size={14} />
 									Apply feedback
 								</button>
 							</div>
diff --git a/packages/editor/src/index.ts b/packages/editor/src/index.ts
index e1bcc6ce..1e2497de 100644
--- a/packages/editor/src/index.ts
+++ b/packages/editor/src/index.ts
@@ -1,3 +1,5 @@
+export { SidecarCard } from "./card";
+export type { SidecarCardProps } from "./card";
 export { collaborationPlugin } from "./collaboration";
 export type { CollaborationOptions } from "./collaboration";
 export { ContentSwapLayer } from "./content-swap";
@@ -55,3 +57,4 @@ export {
 	ResearchComposer,
 	ResearchReference,
 } from "./widgets";
+export { DecisionCard } from "./widgets/decision";
diff --git a/packages/editor/src/toolbar/bubble.tsx b/packages/editor/src/toolbar/bubble.tsx
index f30d62bd..bad4d844 100644
--- a/packages/editor/src/toolbar/bubble.tsx
+++ b/packages/editor/src/toolbar/bubble.tsx
@@ -10,9 +10,8 @@ import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { TOGGLE_LINK_COMMAND } from "@lexical/link";
 import { LINK_PROTOCOLS } from "@chopin/dialect";
+import { LinkPlusIcon, MessagePlusIcon } from "@chopin/icons";
 
-import linkPlusIcon from "../assets/icons/link-plus.svg";
-import messagePlusIcon from "../assets/icons/message-plus.svg";
 import { askForUrl } from "./url";
 import { placeSurface } from "./placement";
 import {
@@ -380,7 +379,7 @@ export function SelectionBubble(
 							}}
 							className={`${CELL} ${CELL_OFF}`}
 						>
-							<img alt="" aria-hidden="true" className="size-3.5" src={linkPlusIcon} />
+							<LinkPlusIcon aria-hidden="true" />
 						</button>
 
 						{onComment && (
@@ -403,12 +402,7 @@ export function SelectionBubble(
 									}}
 									className={`${CELL} ${CELL_OFF}`}
 								>
-									<img
-										alt=""
-										aria-hidden="true"
-										className="size-3.5"
-										src={messagePlusIcon}
-									/>
+									<MessagePlusIcon aria-hidden="true" />
 								</button>
 							</>
 						)}
diff --git a/packages/icons/src/index.ts b/packages/icons/src/index.ts
index de7dac7a..8e232f31 100644
--- a/packages/icons/src/index.ts
+++ b/packages/icons/src/index.ts
@@ -6,7 +6,9 @@ export {
 	CloseIcon,
 	InfoIcon,
 	LightbulbIcon,
+	LinkPlusIcon,
 	MessageIcon,
+	MessagePlusIcon,
 	PlusIcon,
 	SignInIcon,
 	SirenIcon,
diff --git a/packages/icons/src/line.tsx b/packages/icons/src/line.tsx
index 472f7b3b..8866ef4a 100644
--- a/packages/icons/src/line.tsx
+++ b/packages/icons/src/line.tsx
@@ -124,3 +124,24 @@ export function WarningIcon(props: IconProps) {
 		</LineIcon>
 	);
 }
+
+export function LinkPlusIcon(props: IconProps) {
+	return (
+		<LineIcon title="link-plus" {...props}>
+			<path d="M14.251 1.25V6.25" />
+			<path d="M16.751 3.75H11.751" />
+			<path d="M7.86909 7.3934C7.56649 7.5539 7.28239 7.7617 7.02799 8.017L7.01799 8.027C5.63699 9.408 5.63699 11.646 7.01799 13.027L9.19299 15.202C10.574 16.583 12.812 16.583 14.193 15.202L14.203 15.192C15.584 13.811 15.584 11.573 14.203 10.192L13.4406 9.4296" />
+			<path d="M9.13289 11.6066C9.43549 11.4461 9.71959 11.2383 9.97399 10.983L9.984 10.973C11.365 9.59199 11.365 7.35399 9.984 5.97299L7.80899 3.79799C6.42799 2.41699 4.18999 2.41699 2.80899 3.79799L2.79899 3.80799C1.41799 5.18899 1.41799 7.42699 2.79899 8.80799L3.5614 9.57039" />
+		</LineIcon>
+	);
+}
+
+export function MessagePlusIcon(props: IconProps) {
+	return (
+		<LineIcon title="msg-plus" {...props}>
+			<path d="M14.75 12.25V17.25" />
+			<path d="M16.2155 9.64111C16.2364 9.42991 16.25 9.2168 16.25 9C16.25 4.9961 13.004 1.75 9 1.75C4.996 1.75 1.75 4.9961 1.75 9C1.75 10.3188 2.10801 11.552 2.72301 12.6169C3.15301 13.4228 2.67 15.3291 1.75 16.25C3 16.3179 4.647 15.7529 5.383 15.2769C5.872 15.5591 6.647 15.9331 7.662 16.125C8.095 16.207 8.543 16.25 9 16.25C9.2167 16.25 9.4299 16.2363 9.6412 16.2156" />
+			<path d="M17.25 14.75H12.25" />
+		</LineIcon>
+	);
+}

From 16bb72cccd38accec38ba67038bc57959ad1d631 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Fri, 28 Aug 2026 15:01:56 +0100
Subject: [PATCH 34/35] Fix design system CI regressions

---
 Dockerfile                       |  1 +
 apps/web/src/icon-assets.test.ts | 12 +++++++++++-
 e2e/responsive-comments.e2e.ts   |  2 +-
 e2e/sidecar.e2e.ts               |  4 ++--
 packages/icons/src/icon.tsx      | 10 +++++++++-
 packages/icons/src/system.tsx    |  2 ++
 6 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 45a23426..5cfc4ac4 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -11,6 +11,7 @@ COPY apps/server/package.json ./apps/server/package.json
 COPY apps/web/package.json ./apps/web/package.json
 COPY packages/dialect/package.json ./packages/dialect/package.json
 COPY packages/editor/package.json ./packages/editor/package.json
+COPY packages/icons/package.json ./packages/icons/package.json
 COPY packages/protocol/package.json ./packages/protocol/package.json
 COPY packages/question/package.json ./packages/question/package.json
 COPY packages/viewport/package.json ./packages/viewport/package.json
diff --git a/apps/web/src/icon-assets.test.ts b/apps/web/src/icon-assets.test.ts
index e012bc91..91c5c782 100644
--- a/apps/web/src/icon-assets.test.ts
+++ b/apps/web/src/icon-assets.test.ts
@@ -1,6 +1,9 @@
 import { expect, test } from "bun:test";
 import { existsSync, readdirSync, readFileSync, statSync } from "node:fs";
 import { join } from "node:path";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { SearchIcon } from "@chopin/icons";
 
 let root = import.meta.dir;
 let repository = join(root, "../../..");
@@ -80,6 +83,14 @@ test("interface icons default to fourteen pixels", () => {
 	expect(offenders).toEqual([]);
 });
 
+test("interface icons are decorative unless explicitly labelled", () => {
+	let decorative = renderToStaticMarkup(createElement(SearchIcon));
+	let labelled = renderToStaticMarkup(createElement(SearchIcon, { "aria-label": "Search" }));
+
+	expect(decorative).toContain('aria-hidden="true"');
+	expect(labelled).not.toContain('aria-hidden="true"');
+});
+
 test("interface icons share one neutral default colour", () => {
 	let theme = readFileSync(join(root, "theme.css"), "utf8");
 	let icon = readFileSync(join(repository, "packages/icons/src/icon.tsx"), "utf8");
@@ -92,7 +103,6 @@ test("interface icons share one neutral default colour", () => {
 	let assetRoots = [
 		join(root, "assets/figma/navigation"),
 		join(root, "assets/icons"),
-		join(repository, "packages/editor/src/assets/icons"),
 	];
 	for (let assetRoot of assetRoots) {
 		for (let entry of readdirSync(assetRoot)) {
diff --git a/e2e/responsive-comments.e2e.ts b/e2e/responsive-comments.e2e.ts
index b4254dc0..a5cb59d0 100644
--- a/e2e/responsive-comments.e2e.ts
+++ b/e2e/responsive-comments.e2e.ts
@@ -56,7 +56,7 @@ test("a representative compact viewport keeps a passage above the sheet and rest
 		exact: true,
 	});
 	let actionBox = await commentAction.boundingBox();
-	let iconBox = await commentAction.locator("img").boundingBox();
+	let iconBox = await commentAction.locator("[data-nucleo-icon]").boundingBox();
 	expect(actionBox).not.toBeNull();
 	expect(iconBox).not.toBeNull();
 	expect(Math.abs(
diff --git a/e2e/sidecar.e2e.ts b/e2e/sidecar.e2e.ts
index b08bff25..c18243b4 100644
--- a/e2e/sidecar.e2e.ts
+++ b/e2e/sidecar.e2e.ts
@@ -1114,8 +1114,8 @@ test("the reply composer grows and keeps one inset send action", async ({ join,
 		})
 	));
 	expect(actionStyles[0].background).not.toBe(actionStyles[1].background);
-	expect(actionStyles[0].paddingLeft).toBe("8px");
-	expect(actionStyles[0].paddingRight).toBe("8px");
+	expect(actionStyles[0].paddingLeft).toBe("12px");
+	expect(actionStyles[0].paddingRight).toBe("12px");
 });
 
 test("a reply joins the thread without a duplicate reply count", async ({ join, seed }) => {
diff --git a/packages/icons/src/icon.tsx b/packages/icons/src/icon.tsx
index 37fe7dfb..10d2867c 100644
--- a/packages/icons/src/icon.tsx
+++ b/packages/icons/src/icon.tsx
@@ -11,8 +11,16 @@ export function LineIcon(
 		viewBox?: string;
 	},
 ) {
+	let labelled = props["aria-label"] !== undefined || props["aria-labelledby"] !== undefined;
 	return (
-		<svg data-nucleo-icon="" height={size} viewBox={viewBox} width={size} {...props}>
+		<svg
+			aria-hidden={labelled ? undefined : true}
+			data-nucleo-icon=""
+			height={size}
+			viewBox={viewBox}
+			width={size}
+			{...props}
+		>
 			{title && <title>{title}</title>}
 			<g
 				fill="none"
diff --git a/packages/icons/src/system.tsx b/packages/icons/src/system.tsx
index 319f9f7b..23795191 100644
--- a/packages/icons/src/system.tsx
+++ b/packages/icons/src/system.tsx
@@ -39,6 +39,7 @@ export function SearchIcon(props: IconProps) {
 }
 
 export function LoaderIcon({ size = 14, ...props }: IconProps) {
+	let labelled = props["aria-label"] !== undefined || props["aria-labelledby"] !== undefined;
 	let paths = [
 		[
 			"M9,5c-.414,0-.75-.336-.75-.75V1.75c0-.414,.336-.75,.75-.75s.75,.336,.75,.75v2.5c0,.414-.336,.75-.75,.75Z",
@@ -75,6 +76,7 @@ export function LoaderIcon({ size = 14, ...props }: IconProps) {
 	] as const;
 	return (
 		<svg
+			aria-hidden={labelled ? undefined : true}
 			data-nucleo-icon=""
 			fill="currentColor"
 			height={size}

From 58bf3466bdc90d6c0cffa94f395050b21c36e020 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Fri, 28 Aug 2026 15:15:15 +0100
Subject: [PATCH 35/35] Stabilize comment geometry recovery test

---
 e2e/sidecar.e2e.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/e2e/sidecar.e2e.ts b/e2e/sidecar.e2e.ts
index c18243b4..78c712f2 100644
--- a/e2e/sidecar.e2e.ts
+++ b/e2e/sidecar.e2e.ts
@@ -853,7 +853,9 @@ test("an unavailable comment position keeps its compact sheet mounted until geom
 	expect(documentBox).not.toBeNull();
 	expect(markerBox!.y).toBeGreaterThanOrEqual(documentBox!.y + documentBox!.height);
 
-	await page.setViewportSize({ width: 430, height: 844 });
+	// Recover with enough vertical room for the marker after the passage. Whether a
+	// 44px marker fits beside the wrapped text depends on platform font metrics.
+	await page.setViewportSize({ width: 430, height: 3_200 });
 	await expect(sheet).toBeVisible();
 	await expect(grabber).toBeFocused();
 	await expect(marker).toBeAttached();