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/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/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
deleted file mode 100644
index 8a73dce5..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="#212121">
-		<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"
-			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" />
-	</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 2736ca23..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="#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>
diff --git a/apps/web/src/assets/figma/navigation/collapse.svg b/apps/web/src/assets/figma/navigation/collapse.svg
deleted file mode 100644
index 998d1511..00000000
--- a/apps/web/src/assets/figma/navigation/collapse.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/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
deleted file mode 100644
index 3c2cef0b..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="#212121"
-			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="#212121"
-			stroke-width="1.5"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-		/>
-	</g>
-</svg>
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/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
deleted file mode 100644
index dded71b8..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="#212121">
-		<polyline points="6.5 2.75 12.75 9 6.5 15.25"></polyline>
-	</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/chat-close.svg b/apps/web/src/assets/icons/panel-close.svg
similarity index 91%
rename from apps/web/src/assets/icons/chat-close.svg
rename to apps/web/src/assets/icons/panel-close.svg
index 998d1511..e12fd20e 100644
--- a/apps/web/src/assets/icons/chat-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/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/chat.tsx b/apps/web/src/chat/chat.tsx
index 1005e696..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-[18px]" 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 725afdd7..675be4fd 100644
--- a/apps/web/src/chat/transcript.test.tsx
+++ b/apps/web/src/chat/transcript.test.tsx
@@ -23,3 +23,20 @@ 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"[^>]*>.*?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 d065c5a8..a04e1b6c 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 { ChevronIcon, CloseIcon, LoaderIcon, SignInIcon } 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} />
+				<SignInIcon aria-hidden="true" size={14} />
 			</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"
 							>
-								×
+								<CloseIcon aria-hidden="true" size={14} />
 							</button>
 						)}
 				</div>
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/authored-content.css b/apps/web/src/design-audit/authored-content.css
new file mode 100644
index 00000000..eb63dbb9
--- /dev/null
+++ b/apps/web/src/design-audit/authored-content.css
@@ -0,0 +1,102 @@
+.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;
+}
+
+.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
new file mode 100644
index 00000000..3b4a116b
--- /dev/null
+++ b/apps/web/src/design-audit/authored-content.tsx
@@ -0,0 +1,294 @@
+import { ResearchCard, ResearchComposer } from "@chopin/editor";
+import { StaticPlanEditor } from "@chopin/editor/static";
+
+import { AuditPlate, StateLabel } from "./frame";
+
+import type { Research } from "@chopin/protocol";
+
+export 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="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.",
+	"",
+	"</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 | 14px neutral | 14px 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>
+	);
+}
+
+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 (
+		<>
+			<EditorPlate
+				description="Note, tip, important, 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"
+			/>
+			<TableSpecimens />
+		</>
+	);
+}
diff --git a/apps/web/src/design-audit/controls.css b/apps/web/src/design-audit/controls.css
new file mode 100644
index 00000000..899246d5
--- /dev/null
+++ b/apps/web/src/design-audit/controls.css
@@ -0,0 +1,320 @@
+.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-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;
+	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[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;
+}
+
+.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 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);
+	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;
+}
+
+.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;
+	}
+
+	.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..f72a64f3
--- /dev/null
+++ b/apps/web/src/design-audit/controls.tsx
@@ -0,0 +1,332 @@
+import { CheckIcon, ChevronIcon, LoaderIcon, PlusIcon, WarningIcon } from "@chopin/icons";
+
+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="Two text sizes and one square icon size across every hierarchy and state."
+				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 · 32px high · 12px sides">
+							<button className="btn btn-md btn-primary" type="button">Medium</button>
+						</StateSample>
+						<StateSample state="Small · 24px high · 8px sides">
+							<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 square control with a 14px glyph and 7px inset."
+				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={14} />
+							</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={14} />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 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>
+
+			<AuditPlate
+				description="Open action menu with destructive separation."
+				item="menus"
+				title="Menus"
+			>
+				<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>
+
+			<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<ChevronIcon aria-hidden="true" className="rotate-90" size={14} />
+					</button>
+					<div className="design-audit-dropdown-open">
+						<button
+							aria-expanded="true"
+							className="field design-audit-dropdown-trigger"
+							type="button"
+						>
+							Active documents<ChevronIcon aria-hidden="true" className="rotate-90" size={14} />
+						</button>
+						<div
+							aria-label="Document collection"
+							className="design-audit-dropdown-list"
+							role="listbox"
+						>
+							<div aria-selected="true" role="option">
+								<CheckIcon aria-hidden="true" size={14} />Active documents
+							</div>
+							<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/foundations.css b/apps/web/src/design-audit/foundations.css
new file mode 100644
index 00000000..761cb11c
--- /dev/null
+++ b/apps/web/src/design-audit/foundations.css
@@ -0,0 +1,203 @@
+.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: 12rem minmax(0, 1fr);
+	align-items: baseline;
+	gap: 1.5rem;
+}
+
+.design-audit-type-label {
+	display: grid;
+	gap: 0.125rem;
+}
+
+.design-audit-type-label span,
+.design-audit-type-label code {
+	font-size: var(--text-sm);
+	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;
+}
+
+.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-icon);
+}
+
+.design-audit-icon-frame img {
+	width: 0.875rem;
+	height: 0.875rem;
+	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"] [data-nucleo-icon] {
+	color: var(--color-icon);
+}
+
+.design-audit-icon-states [data-icon-state="active"] [data-nucleo-icon] {
+	color: var(--color-brand);
+}
+
+.design-audit-icon-states [data-icon-state="disabled"] {
+	opacity: 0.4;
+}
+
+@media (max-width: 639px) {
+	.design-audit-type-stack > div {
+		grid-template-columns: 1fr;
+		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
new file mode 100644
index 00000000..7804eb35
--- /dev/null
+++ b/apps/web/src/design-audit/foundations.tsx
@@ -0,0 +1,137 @@
+import { AuditPlate } from "./frame";
+import { IconCatalogue } from "./icons";
+
+const COLOURS = [
+	["Page", "--color-page"],
+	["Ground", "--color-ground"],
+	["Inset", "--color-inset"],
+	["Selected", "--color-selected"],
+	["Primary text", "--color-text-primary"],
+	["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"],
+	["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", "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;
+
+const RADII = [
+	["Small", "--radius-sm"],
+	["Medium", "--radius-md"],
+	["Large", "--radius-lg"],
+	["Extra large", "--radius-xl"],
+] as const;
+
+const SHADOWS = [
+	["Subtle resting", "--shadow-resting"],
+	["Strong resting", "--shadow-resting-strong"],
+	["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, measurement, size, lineHeight]) => (
+						<div key={size} style={{ fontSize: `var(${size})`, lineHeight: `var(${lineHeight})` }}>
+							<div className="design-audit-type-label">
+								<span>{label}</span>
+								<code>{measurement}</code>
+							</div>
+							<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="Subtle and strong resting surfaces, followed by raised and overlay depth."
+			>
+				<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 Nucleo icon currently used by the interface."
+			>
+				<IconCatalogue />
+			</AuditPlate>
+		</>
+	);
+}
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..5ba50004
--- /dev/null
+++ b/apps/web/src/design-audit/frame.tsx
@@ -0,0 +1,83 @@
+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, item, title }: {
+		children?: ReactNode;
+		description?: string;
+		item?: string;
+		title: string;
+	},
+) {
+	return (
+		<section className="design-audit-plate" data-audit-item={item}>
+			<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/icons.tsx b/apps/web/src/design-audit/icons.tsx
new file mode 100644
index 00000000..d8799ae4
--- /dev/null
+++ b/apps/web/src/design-audit/icons.tsx
@@ -0,0 +1,113 @@
+import {
+	ArchiveIcon,
+	ArrowUpIcon,
+	CheckIcon,
+	ChevronIcon,
+	CloseIcon,
+	DocumentIcon,
+	InfoIcon,
+	LightbulbIcon,
+	LinkPlusIcon,
+	LoaderIcon,
+	MessageIcon,
+	MessagePlusIcon,
+	PlusIcon,
+	SearchIcon,
+	SignInIcon,
+	SirenIcon,
+	SparkleIcon,
+	WarningIcon,
+} from "@chopin/icons";
+
+import addProject from "../assets/figma/navigation/add-project.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 panelClose from "../assets/icons/panel-close.svg";
+import chat from "../assets/icons/chat.svg";
+import plannerStop from "../assets/icons/planner-stop.svg";
+
+import type { IconProps } from "@chopin/icons";
+import type { ComponentType } from "react";
+
+type IconCatalogueItem = {
+	className?: string;
+	duplicate?: string;
+	icon?: ComponentType<IconProps>;
+	name: string;
+	source?: string;
+};
+
+const NUCLEO_ICONS: readonly IconCatalogueItem[] = [
+	{ name: "Add project", source: addProject },
+	{ name: "Chopin", source: chopin },
+	{
+		duplicate: "collapse.svg and chat-close.svg consolidated",
+		name: "Panel close",
+		source: panelClose,
+	},
+	{ name: "Document actions", source: documentActions },
+	{ name: "New document", source: newDocument },
+	{ name: "Chat", source: chat },
+	{ name: "Planner stop", source: plannerStop },
+	{ 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)" },
+	{ icon: MessageIcon, name: "Message" },
+	{ icon: CheckIcon, name: "Check" },
+	{ icon: InfoIcon, name: "Info" },
+	{ 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" },
+	{ icon: LoaderIcon, name: "Loader" },
+];
+
+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={14} />
+						<span>{state}</span>
+					</div>
+				))}
+			</div>
+			<h4>Nucleo icons</h4>
+			<div className="design-audit-icon-grid">
+				{NUCLEO_ICONS.map(({ className, duplicate, icon: Glyph, name, source }) => (
+					<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={14} /> : null}
+						</span>
+						<figcaption>
+							<strong>{name}</strong>
+							{duplicate ? <span>Consolidated exact duplicate: {duplicate}</span> : null}
+						</figcaption>
+					</figure>
+				))}
+			</div>
+			<div className="design-audit-icon-sizes" aria-label="Icon size roles">
+				{([
+					{ label: "Interface", size: 14 },
+					{ label: "Illustrative", size: 24 },
+				] as const).map(({ label, size }) => (
+					<div key={label}>
+						<MessageIcon aria-hidden="true" size={size} />
+						<span>{label} · {size}px</span>
+					</div>
+				))}
+			</div>
+		</div>
+	);
+}
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..483f1624
--- /dev/null
+++ b/apps/web/src/design-audit/inventory.ts
@@ -0,0 +1,192 @@
+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: "identity",
+				label: "Identity and collaboration",
+				source: "packages/editor/src/face.tsx",
+				states: ["avatar-loading", "editing-question"],
+			},
+			{
+				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", "important", "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
new file mode 100644
index 00000000..986e4283
--- /dev/null
+++ b/apps/web/src/design-audit/page.test.tsx
@@ -0,0 +1,21 @@
+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");
+		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
new file mode 100644
index 00000000..cf0fc70e
--- /dev/null
+++ b/apps/web/src/design-audit/page.tsx
@@ -0,0 +1,31 @@
+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";
+
+export function DesignAuditPage() {
+	return (
+		<AuditFrame groups={AUDIT_INVENTORY}>
+			<AuditSection id="foundations" title="Foundations">
+				<Foundations />
+			</AuditSection>
+			<AuditSection id="controls" title="Controls">
+				<Controls />
+			</AuditSection>
+			<AuditSection id="surfaces" title="Application surfaces">
+				<Surfaces />
+			</AuditSection>
+			<AuditSection id="authored-content" title="Authored content">
+				<AuthoredContent />
+			</AuditSection>
+		</AuditFrame>
+	);
+}
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/design-audit/specimens.test.tsx b/apps/web/src/design-audit/specimens.test.tsx
new file mode 100644
index 00000000..3a015457
--- /dev/null
+++ b/apps/web/src/design-audit/specimens.test.tsx
@@ -0,0 +1,82 @@
+import { describe, expect, it } from "bun:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+
+import { Controls } from "./controls";
+import { AuthoredContent, callouts } from "./authored-content";
+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", () => {
+		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("Consolidated exact duplicate");
+		expect(markup).toContain("Strong resting");
+		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", () => {
+		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"');
+	});
+
+	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('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"');
+	});
+
+	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"');
+		for (let type of ["note", "tip", "important", "warning", "danger"]) {
+			expect(callouts).toContain(`type="${type}"`);
+		}
+		expect(markup).toContain("Research question");
+		expect(markup).toContain("Research ready");
+	});
+});
diff --git a/apps/web/src/design-audit/styles.css b/apps/web/src/design-audit/styles.css
new file mode 100644
index 00000000..609531a3
--- /dev/null
+++ b/apps/web/src/design-audit/styles.css
@@ -0,0 +1,188 @@
+.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);
+	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-selected);
+}
+
+.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;
+	}
+}
diff --git a/apps/web/src/design-audit/surfaces.css b/apps/web/src/design-audit/surfaces.css
new file mode 100644
index 00000000..c9faf986
--- /dev/null
+++ b/apps/web/src/design-audit/surfaces.css
@@ -0,0 +1,374 @@
+.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-control-edge);
+	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-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;
+}
+
+.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-chat {
+	display: flex;
+	height: 33rem;
+	max-height: 70dvh;
+	flex-direction: column;
+	overflow: hidden;
+	border: var(--edge-width) solid var(--color-control-edge);
+	border-radius: var(--radius-xl);
+	background: var(--color-chat-pane);
+}
+
+.design-audit-chat .chat-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-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;
+}
+
+.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-lg);
+}
+
+.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-wash);
+}
+
+@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..6e449ce5
--- /dev/null
+++ b/apps/web/src/design-audit/surfaces.tsx
@@ -0,0 +1,405 @@
+import {
+	ArchiveIcon,
+	CheckIcon,
+	ChevronIcon,
+	DocumentIcon,
+	LoaderIcon,
+	MessageIcon,
+	PlusIcon,
+	SearchIcon,
+} from "@chopin/icons";
+
+import { DecisionCard, PlanStatus, SendAction, SidecarCard } from "@chopin/editor";
+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>
+					<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>
+	);
+}
+
+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">
+					<DocumentIcon size={14} />Design notes
+				</div>
+				<div role="option" aria-selected="true">
+					<DocumentIcon size={14} />Design system audit<CheckIcon size={14} />
+				</div>
+				<div role="option" aria-selected="false" data-audit-state="hover">
+					<DocumentIcon size={14} />Editor architecture
+				</div>
+			</div>
+			<div className="design-audit-empty-row">
+				<SearchIcon size={14} />
+				<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={14} />
+					</button>
+				</div>
+				<a href="#surfaces">
+					<DocumentIcon size={14} />Product direction
+				</a>
+				<a aria-current="page" href="#surfaces">
+					<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={14} />Archived draft
+				</a>
+				<div className="design-audit-navigation-loading">
+					<LoaderIcon size={14} />Loading more…
+				</div>
+			</nav>
+			<nav
+				aria-label="Compact workspace view"
+				className="workspace-navigation design-audit-compact-navigation"
+			>
+				<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-md btn-ghost min-h-11" type="button">Background</button>
+			</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-chat">
+				<Transcript
+					active
+					entries={CHAT_ENTRIES}
+					handle="maggieappleton"
+					onWithdraw={() => {}}
+					queued={[{
+						id: "audit-queued",
+						handle: "maggieappleton",
+						text: "Also check the compact layout.",
+					}]}
+				/>
+				<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">
+							<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"
+				>
+					<ChevronIcon className="rotate-90" size={14} />
+					<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 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 (
+		<>
+			<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>
+						<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>
+						<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>
+						<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>
+					</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 />
+			<IdentityAndCollaboration />
+			<Decisions />
+			<Feedback />
+		</>
+	);
+}
diff --git a/apps/web/src/document-picker.tsx b/apps/web/src/document-picker.tsx
index a0bdf29b..9a123235 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";
@@ -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>
@@ -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 f6943451..0790ed5f 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-[18px]"');
+		expect(child).toContain("<title>xmark</title>");
+		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
new file mode 100644
index 00000000..91c5c782
--- /dev/null
+++ b/apps/web/src/icon-assets.test.ts
@@ -0,0 +1,145 @@
+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, "../../..");
+
+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 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/chat-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");
+
+	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("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("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");
+	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"),
+	];
+	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");
+
+	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');
+	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", () => {
+	let room = readFileSync(join(root, "room-workspace.tsx"), "utf8");
+	let sidebarChrome = readFileSync(join(root, "project-sidebar-chrome.tsx"), "utf8");
+
+	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);
+	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/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/apps/web/src/navigation-chrome.test.ts b/apps/web/src/navigation-chrome.test.ts
index 8cd4e564..3bf3456b 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 fourteen-pixel glyph in an icon button", () => {
+		let markup = renderToStaticMarkup(createElement(ProjectSidebarExpandButton, {
+			onExpand: () => {},
+		}));
+
+		expect(markup).toContain('height="14"');
+		expect(markup).toContain('width="14"');
+	});
+
 	test("renders sidebar control glyphs at fourteen pixels", () => {
 		let markup = renderToStaticMarkup(createElement(NavigationIcon, { src: "/control.svg" }));
 
@@ -64,22 +74,21 @@ 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,
 		);
-		expect(markup).toContain("book-bookmark.svg");
-		expect(markup).toMatch(/class="opacity-50"[^>]*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"');
@@ -161,7 +170,7 @@ describe("the Figma navigation chrome", () => {
 		};
 		let markup = renderToStaticMarkup(createElement(Header, props));
 
-		expect(markup).toMatch(/class="opacity-50"[^>]*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"');
@@ -192,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/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-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 e0e0f149..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/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";
 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 { CaretDownIcon, CaretRightIcon } from "@phosphor-icons/react";
+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";
@@ -222,12 +219,12 @@ function Project(
 					type="button"
 				>
 					<MotionDisclosureIcon
-						className="motion-feedback shrink-0 opacity-50"
-						closed={<CaretRightIcon size={14} weight="bold" />}
+						className="motion-feedback shrink-0"
+						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} />
+					<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>
@@ -365,7 +362,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 16c18a93..e2c9d31a 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";
@@ -348,7 +348,7 @@ export function RepositoryPicker(
 												<CheckIcon
 													aria-hidden="true"
 													className="shrink-0 text-brand-ink"
-													size={16}
+													size={14}
 												/>
 											)}
 										</button>
@@ -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..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,9 +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 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";
@@ -26,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";
@@ -79,23 +76,21 @@ 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} />
+				<DocumentIcon />
 				{presentation.type === "parent-with-child"
 					? (
 						<>
 							<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"
 							>
 								<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}`}
@@ -114,12 +109,7 @@ export function Header(
 							trigger={
 								<>
 									<span className="truncate">{label}</span>
-									<img
-										alt=""
-										aria-hidden="true"
-										className="size-3.5 opacity-50"
-										src={chevronDownIcon}
-									/>
+									<ChevronIcon aria-hidden="true" className="rotate-90" />
 								</>
 							}
 						/>
diff --git a/apps/web/src/theme.css b/apps/web/src/theme.css
index 108bcfc2..e505c73e 100644
--- a/apps/web/src/theme.css
+++ b/apps/web/src/theme.css
@@ -40,13 +40,12 @@
 	--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);
 	--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));
 
@@ -54,22 +53,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: oklch(0.95547 0.0277 207.843); /* #dcf6fa */
+	--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: oklch(0.95503 0.03552 145.29); /* #e2f7e2 */
+	--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: oklch(0.95386 0.03439 74.416); /* #feedd7 */
+	--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 */
 	--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. */
@@ -125,6 +128,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%),
@@ -196,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);
 
@@ -212,33 +228,36 @@
 	border-radius: var(--radius-md);
 	font-size: var(--text-sm);
 	font-weight: 500;
+	white-space: nowrap;
 
 	&:disabled {
-		background-color: var(--color-gray-200);
-		color: var(--color-gray-600);
 		cursor: default;
+		opacity: 0.4;
 	}
 }
 
 @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.4375rem;
 }
 
 @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 / 15%);
+	outline-offset: calc(-1 * var(--edge-width));
 
 	&:hover:not(:disabled) {
 		background-color: var(--color-brand-hover);
@@ -252,6 +271,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);
@@ -278,6 +299,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);
@@ -602,6 +625,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/theme.test.ts b/apps/web/src/theme.test.ts
index bfe7577d..a3ddae8a 100644
--- a/apps/web/src/theme.test.ts
+++ b/apps/web/src/theme.test.ts
@@ -22,7 +22,8 @@ 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 };
+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");
@@ -35,39 +36,90 @@ const FEEDBACK = readFileSync(
 	"utf8",
 );
 
-/** A colour token, resolving semantic aliases onto the primitive palette. */
-function token(name: string): Oklch {
-	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 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 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 hex({ c, h, l }: Oklch): string {
+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),
+	};
+}
 
-	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 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();
+	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 mix =
+		/^color-mix\(in (srgb|oklab), var\(--color-([\w-]+)\) ([\d.]+)%, (?:var\(--color-([\w-]+)\)|transparent)\)$/
+			.exec(declaration);
+	if (mix) {
+		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),
+			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 fromOklch({ c: Number(found[2]), h: Number(found[3]), l: Number(found[1]) });
+}
+
+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 +127,10 @@ function hex({ c, h, l }: Oklch): string {
 	}`;
 }
 
+function lightness({ blue, green, red }: Rgb): number {
+	return toOklch({ blue, green, red }).l;
+}
+
 type Mark = { name: string; token: string; recorded: string };
 
 /** Every highlight the stylesheet declares, with the colour written beside it. */
@@ -112,7 +168,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 95e53693..acaef2fe 100644
--- a/apps/web/src/tokens.test.ts
+++ b/apps/web/src/tokens.test.ts
@@ -14,11 +14,12 @@ 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);
 	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 {
@@ -109,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];
 
@@ -133,6 +139,15 @@ describe("palette", () => {
 		);
 	});
 
+	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))",
+		);
+	});
+
 	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%\);/,
@@ -147,12 +162,22 @@ describe("palette", () => {
 	});
 
 	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)
@@ -195,7 +220,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 });
 		}
@@ -206,10 +231,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\)/,
+		);
 	});
 });
 
@@ -218,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\.4375rem;/);
 		expect(hex("--color-destructive-hover")).toBe("#c44746");
 		expect(hex("--color-destructive-active")).toBe("#b34140");
 	});
@@ -231,10 +267,57 @@ describe("controls", () => {
 		}
 	});
 
-	it("uses the common disabled button fill and ink", () => {
+	it("gives filled buttons their designed hairlines", () => {
+		let primary = utility("btn-primary").split("&:")[0]!;
+		let secondary = utility("btn-secondary").split("&:")[0]!;
+		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)");
+		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("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", () => {
+		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/);
+	});
+
+	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\)/,
+		);
 	});
 
 	it("keeps focus and invalid outlines visible above their surface", () => {
@@ -299,6 +382,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-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..dc6b8812 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,
@@ -14,9 +15,8 @@ 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";
 import { motionContract } from "./motion-contract";
 import { motionImmediately } from "./motion-input";
@@ -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}
@@ -430,12 +430,7 @@ export function Workspace(
 											onClick={childPresentation.onClose}
 											type="button"
 										>
-											<img
-												alt=""
-												aria-hidden="true"
-												className="size-[18px]"
-												src={navigationXmark}
-											/>
+											<CloseIcon aria-hidden="true" size={14} />
 										</button>
 									</div>
 								)}
@@ -498,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"
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/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 19f6e67f..b82c5b3d 100644
--- a/e2e/sidecar.e2e.ts
+++ b/e2e/sidecar.e2e.ts
@@ -865,7 +865,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();
@@ -1126,8 +1128,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/editor/package.json b/packages/editor/package.json
index cca8eece..90003b76 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"
@@ -28,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:*",
@@ -40,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/assets/icons/link-plus.svg b/packages/editor/src/assets/icons/link-plus.svg
deleted file mode 100644
index 44d795ee..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="#212121">
-		<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 8e84b8b8..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="#212121">
-		<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/callout-style.test.ts b/packages/editor/src/callout-style.test.ts
new file mode 100644
index 00000000..517c53de
--- /dev/null
+++ b/packages/editor/src/callout-style.test.ts
@@ -0,0 +1,15 @@
+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(
+		/\.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 1bcce848..e7951e9b 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 {
@@ -78,6 +78,16 @@
 		transform var(--duration-fast) var(--ease-out);
 }
 
+.plan-callout-type > svg,
+.plan-callout-option > svg {
+	width: 0.875rem;
+	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"] {
@@ -133,12 +143,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 {
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/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/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/decisions.tsx b/packages/editor/src/decisions.tsx
index 0ed88521..1d10d495 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={14} />}
 								open={history}
-								opened={<CaretDownIcon size={16} weight="bold" />}
+								opened={<ChevronIcon className="rotate-90" size={14} />}
 							/>
 							<span className="tabular-nums">{resolved}</span>
 							<span>resolved</span>
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/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/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/send-action.tsx b/packages/editor/src/send-action.tsx
index d4bb7050..396860d2 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 }: {
@@ -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={14} />
 		</button>
 	);
 }
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>
+	);
+}
diff --git a/packages/editor/src/styles.css b/packages/editor/src/styles.css
index 057eb599..7540c401 100644
--- a/packages/editor/src/styles.css
+++ b/packages/editor/src/styles.css
@@ -21,15 +21,14 @@
 	box-shadow: var(--shadow-resting);
 }
 
-.plan-content [data-research-ready] {
-	position: relative;
-	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 {
@@ -60,20 +59,11 @@
 	justify-content: space-between;
 }
 
-.plan-research-dismiss {
-	width: 2rem;
-	height: 2rem;
-}
-
 .plan-research-composer textarea {
 	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;
 }
 
@@ -128,16 +118,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;
@@ -581,7 +561,7 @@
  * a rendered wash, not as an abstract percentage of a darker accent.
  */
 ::highlight(plan-related) {
-	/* #dcf6fa */
+	/* #d8eaee */
 	background-color: var(--color-brand-wash);
 }
 
@@ -960,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/toolbar/bubble.tsx b/packages/editor/src/toolbar/bubble.tsx
index 3071759e..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 opacity-70" 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 opacity-70"
-										src={messagePlusIcon}
-									/>
+									<MessagePlusIcon aria-hidden="true" />
 								</button>
 							</>
 						)}
diff --git a/packages/editor/src/widgets/callout.tsx b/packages/editor/src/widgets/callout.tsx
index 584eb8ac..ffe43cda 100644
--- a/packages/editor/src/widgets/callout.tsx
+++ b/packages/editor/src/widgets/callout.tsx
@@ -14,9 +14,9 @@ import {
 	InfoIcon,
 	LightbulbIcon,
 	SirenIcon,
-	StarFourIcon,
+	SparkleIcon,
 	WarningIcon,
-} from "@phosphor-icons/react";
+} from "@chopin/icons";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { readOnly$ } from "@mdxeditor/editor";
 import { useCellValue } from "@mdxeditor/gurx";
@@ -40,14 +40,14 @@ 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 <SparkleIcon {...props} />;
 		case "warning":
 			return <WarningIcon {...props} />;
 		case "danger":
@@ -288,10 +288,10 @@ 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} 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 95923bcf..13b8ceab 100644
--- a/packages/editor/src/widgets/research-composer.test.tsx
+++ b/packages/editor/src/widgets/research-composer.test.tsx
@@ -160,6 +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="14"');
+		expect(markup).toContain('width="14"');
 	});
 
 	it("keeps one exact brief actionable after a failed create", () => {
@@ -176,6 +178,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.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..873f540a 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,12 +155,13 @@ export function ResearchComposer(
 						title="Discard research question"
 						type="button"
 					>
-						<XIcon aria-hidden="true" size={16} />
+						<CloseIcon aria-hidden="true" size={14} />
 					</button>
 				)}
 			</div>
 			<textarea
 				autoFocus
+				className="field"
 				disabled={submitting}
 				id={id}
 				maxLength={4096}
@@ -233,7 +234,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>
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..10d2867c
--- /dev/null
+++ b/packages/icons/src/icon.tsx
@@ -0,0 +1,36 @@
+import type { SVGProps } from "react";
+
+export type IconProps = Omit<SVGProps<SVGSVGElement>, "height" | "width"> & {
+	size?: number;
+};
+
+export function LineIcon(
+	{ children, size = 14, title, viewBox = "0 0 18 18", ...props }: IconProps & {
+		children: React.ReactNode;
+		title?: string;
+		viewBox?: string;
+	},
+) {
+	let labelled = props["aria-label"] !== undefined || props["aria-labelledby"] !== undefined;
+	return (
+		<svg
+			aria-hidden={labelled ? undefined : true}
+			data-nucleo-icon=""
+			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..8e232f31
--- /dev/null
+++ b/packages/icons/src/index.ts
@@ -0,0 +1,18 @@
+export type { IconProps } from "./icon";
+export {
+	ArrowUpIcon,
+	CheckIcon,
+	ChevronIcon,
+	CloseIcon,
+	InfoIcon,
+	LightbulbIcon,
+	LinkPlusIcon,
+	MessageIcon,
+	MessagePlusIcon,
+	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
new file mode 100644
index 00000000..8866ef4a
--- /dev/null
+++ b/packages/icons/src/line.tsx
@@ -0,0 +1,147 @@
+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" {...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>
+	);
+}
+
+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>
+	);
+}
diff --git a/packages/icons/src/system.tsx b/packages/icons/src/system.tsx
new file mode 100644
index 00000000..23795191
--- /dev/null
+++ b/packages/icons/src/system.tsx
@@ -0,0 +1,91 @@
+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 = 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",
+			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
+			aria-hidden={labelled ? undefined : true}
+			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>
+	);
+}
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 aa4e4a4b..5a2cc8ab 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";
 
@@ -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>
@@ -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={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"
 							>
-								<XIcon aria-hidden="true" size={16} weight="bold" />
+								<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"
 						>
-							<XIcon aria-hidden="true" size={16} weight="bold" />
+							<CloseIcon aria-hidden="true" size={14} />
 							Cancel
 						</button>
 					)}
@@ -657,8 +657,7 @@ export function QuestionView(props: QuestionViewProps) {
 							<CheckIcon
 								aria-hidden="true"
 								data-plan-icon="check"
-								size={16}
-								weight="bold"
+								size={14}
 							/>
 							{submitting
 								? (single ? "Saving…" : "Submitting…")