From d6d1c78bd91d139c981ea4db5713cddcac8366e8 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Thu, 24 Sep 2026 15:39:16 +0100
Subject: [PATCH 1/2] Document shared visual adoption

---
 apps/web/src/design-audit/adoption.tsx       | 27 ++++++++
 apps/web/src/design-audit/frame.test.tsx     | 24 ++++++++
 apps/web/src/design-audit/frame.tsx          |  6 +-
 apps/web/src/design-audit/icons.tsx          | 10 +--
 apps/web/src/design-audit/inventory.ts       |  6 ++
 apps/web/src/design-audit/page.test.tsx      | 30 +++++++++
 apps/web/src/design-audit/page.tsx           |  2 +
 apps/web/src/design-audit/specimens.test.tsx |  3 +-
 apps/web/src/design-audit/styles.css         | 65 ++++++++++++++++----
 9 files changed, 147 insertions(+), 26 deletions(-)
 create mode 100644 apps/web/src/design-audit/adoption.tsx

diff --git a/apps/web/src/design-audit/adoption.tsx b/apps/web/src/design-audit/adoption.tsx
new file mode 100644
index 00000000..db34e038
--- /dev/null
+++ b/apps/web/src/design-audit/adoption.tsx
@@ -0,0 +1,27 @@
+import { AuditPlate } from "./frame";
+
+export function Adoption() {
+	return (
+		<AuditPlate
+			description="The visual foundation is shared; control adoption remains deliberate and visible."
+			item="shared-adoption"
+			title="One foundation, gradual adoption"
+		>
+			<div className="design-audit-adoption">
+				<div>
+					<h4>Shared foundation</h4>
+					<p>Tokens, icons, and presentation primitives come from @chopin/visuals.</p>
+				</div>
+				<div>
+					<h4>Adopted shared controls</h4>
+					<ul aria-label="Adopted shared controls">
+						<li>
+							<strong>Select</strong>
+							<span>Design audit field only</span>
+						</li>
+					</ul>
+				</div>
+			</div>
+		</AuditPlate>
+	);
+}
diff --git a/apps/web/src/design-audit/frame.test.tsx b/apps/web/src/design-audit/frame.test.tsx
index 104167d3..119bcb79 100644
--- a/apps/web/src/design-audit/frame.test.tsx
+++ b/apps/web/src/design-audit/frame.test.tsx
@@ -38,4 +38,28 @@ describe("design audit specimen framing", () => {
 			}
 		}
 	});
+
+	it("places source provenance after the specimen description", () => {
+		let markup = renderToStaticMarkup(
+			createElement(AuditPlate, {
+				description: "Shared action hierarchy",
+				item: "buttons",
+				title: "Primary button",
+			}),
+		);
+
+		expect(markup.indexOf("Shared action hierarchy")).toBeLessThan(
+			markup.indexOf("apps/web/src/theme.css"),
+		);
+	});
+
+	it("styles state labels as quiet metadata rather than pills", async () => {
+		let css = await Bun.file(new URL("./styles.css", import.meta.url)).text();
+		let rule = css.match(/\.design-audit-state\s*\{([^}]*)\}/)?.[1] ?? "";
+
+		expect(rule).toContain("color: var(--color-text-quaternary)");
+		expect(rule).not.toContain("background:");
+		expect(rule).not.toContain("border-radius:");
+		expect(rule).not.toContain("padding-inline:");
+	});
 });
diff --git a/apps/web/src/design-audit/frame.tsx b/apps/web/src/design-audit/frame.tsx
index a0c5757a..0e209ed5 100644
--- a/apps/web/src/design-audit/frame.tsx
+++ b/apps/web/src/design-audit/frame.tsx
@@ -72,11 +72,9 @@ export function AuditPlate(
 	return (
 		<section className="design-audit-plate" data-audit-item={item}>
 			<header>
-				<div className="design-audit-plate-heading">
-					<h3>{title}</h3>
-					{source ? <code className="design-audit-source">{source}</code> : null}
-				</div>
+				<h3>{title}</h3>
 				{description ? <p>{description}</p> : null}
+				{source ? <code className="design-audit-source">{source}</code> : null}
 			</header>
 			<div className="design-audit-specimen">{children}</div>
 		</section>
diff --git a/apps/web/src/design-audit/icons.tsx b/apps/web/src/design-audit/icons.tsx
index d8799ae4..0975983a 100644
--- a/apps/web/src/design-audit/icons.tsx
+++ b/apps/web/src/design-audit/icons.tsx
@@ -32,7 +32,6 @@ import type { ComponentType } from "react";
 
 type IconCatalogueItem = {
 	className?: string;
-	duplicate?: string;
 	icon?: ComponentType<IconProps>;
 	name: string;
 	source?: string;
@@ -41,11 +40,7 @@ type IconCatalogueItem = {
 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: "Panel close", source: panelClose },
 	{ name: "Document actions", source: documentActions },
 	{ name: "New document", source: newDocument },
 	{ name: "Chat", source: chat },
@@ -84,7 +79,7 @@ export function IconCatalogue() {
 			</div>
 			<h4>Nucleo icons</h4>
 			<div className="design-audit-icon-grid">
-				{NUCLEO_ICONS.map(({ className, duplicate, icon: Glyph, name, source }) => (
+				{NUCLEO_ICONS.map(({ className, icon: Glyph, name, source }) => (
 					<figure key={`${source ? "asset" : "component"}-${name}`}>
 						<span className="design-audit-icon-frame">
 							{source ? <img alt="" src={source} /> : null}
@@ -92,7 +87,6 @@ export function IconCatalogue() {
 						</span>
 						<figcaption>
 							<strong>{name}</strong>
-							{duplicate ? <span>Consolidated exact duplicate: {duplicate}</span> : null}
 						</figcaption>
 					</figure>
 				))}
diff --git a/apps/web/src/design-audit/inventory.ts b/apps/web/src/design-audit/inventory.ts
index 7f8a41ab..18187258 100644
--- a/apps/web/src/design-audit/inventory.ts
+++ b/apps/web/src/design-audit/inventory.ts
@@ -21,6 +21,12 @@ export const AUDIT_INVENTORY: readonly AuditGroup[] = [
 		id: "foundations",
 		label: "Foundations",
 		items: [
+			{
+				id: "shared-adoption",
+				label: "One foundation, gradual adoption",
+				source: "apps/web/src/design-audit/adoption.tsx",
+				states: ["shared-foundation", "audit-field-select"],
+			},
 			{
 				id: "colours",
 				label: "Colour roles",
diff --git a/apps/web/src/design-audit/page.test.tsx b/apps/web/src/design-audit/page.test.tsx
index 986e4283..612093d2 100644
--- a/apps/web/src/design-audit/page.test.tsx
+++ b/apps/web/src/design-audit/page.test.tsx
@@ -2,6 +2,7 @@ import { describe, expect, it } from "bun:test";
 import { createElement } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
 
+import { AUDIT_INVENTORY } from "./inventory";
 import { DesignAuditPage } from "./page";
 
 describe("design audit page", () => {
@@ -18,4 +19,33 @@ describe("design audit page", () => {
 			expect(markup).toContain(`id="${id}"`);
 		}
 	});
+
+	it("documents one shared foundation with only the audit field Select adopted", () => {
+		let markup = renderToStaticMarkup(createElement(DesignAuditPage));
+		let adoptedControls = markup.match(
+			/<ul aria-label="Adopted shared controls">([\s\S]*?)<\/ul>/,
+		)?.[1] ?? "";
+
+		expect(markup).toContain("One foundation, gradual adoption");
+		expect(adoptedControls.match(/<li/g)).toHaveLength(1);
+		expect(adoptedControls).toContain("Select");
+		expect(adoptedControls).toContain("Design audit field only");
+	});
+
+	it("records adoption provenance and post-PR11 state in the inventory", () => {
+		expect(AUDIT_INVENTORY.map(group => group.id)).toEqual([
+			"foundations",
+			"controls",
+			"surfaces",
+			"authored-content",
+		]);
+		expect(
+			AUDIT_INVENTORY.flatMap(group => group.items).find(item => item.id === "shared-adoption"),
+		).toEqual({
+			id: "shared-adoption",
+			label: "One foundation, gradual adoption",
+			source: "apps/web/src/design-audit/adoption.tsx",
+			states: ["shared-foundation", "audit-field-select"],
+		});
+	});
 });
diff --git a/apps/web/src/design-audit/page.tsx b/apps/web/src/design-audit/page.tsx
index 80598ceb..9df23b9b 100644
--- a/apps/web/src/design-audit/page.tsx
+++ b/apps/web/src/design-audit/page.tsx
@@ -1,4 +1,5 @@
 import { AuditFrame, AuditSection } from "./frame";
+import { Adoption } from "./adoption";
 import { AuthoredContent } from "./authored-content";
 import { Controls } from "./controls";
 import { Foundations } from "./foundations";
@@ -16,6 +17,7 @@ export function DesignAuditPage() {
 	return (
 		<AuditFrame groups={AUDIT_INVENTORY}>
 			<AuditSection id="foundations" title="Foundations">
+				<Adoption />
 				<Foundations />
 			</AuditSection>
 			<AuditSection id="controls" title="Controls">
diff --git a/apps/web/src/design-audit/specimens.test.tsx b/apps/web/src/design-audit/specimens.test.tsx
index 0ca17fd2..0ac187a4 100644
--- a/apps/web/src/design-audit/specimens.test.tsx
+++ b/apps/web/src/design-audit/specimens.test.tsx
@@ -37,7 +37,8 @@ describe("design audit specimens", () => {
 		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("Panel close");
+		expect(markup).not.toContain("Consolidated exact duplicate");
 		expect(markup).toContain("Strong resting");
 		expect(markup).toContain("--button-edge-width");
 		for (
diff --git a/apps/web/src/design-audit/styles.css b/apps/web/src/design-audit/styles.css
index 077d282b..10c87ce5 100644
--- a/apps/web/src/design-audit/styles.css
+++ b/apps/web/src/design-audit/styles.css
@@ -133,13 +133,6 @@
 	margin-block-end: 1rem;
 }
 
-.design-audit-plate-heading {
-	display: flex;
-	align-items: baseline;
-	flex-wrap: wrap;
-	column-gap: 0.75rem;
-}
-
 .design-audit-plate h3 {
 	font-size: var(--text-lg);
 	font-weight: 600;
@@ -155,6 +148,7 @@
 }
 
 .design-audit-source {
+	display: block;
 	min-width: 0;
 	font-family: var(--font-mono);
 	font-size: var(--text-sm);
@@ -168,17 +162,58 @@
 }
 
 .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);
+	line-height: var(--text-sm--line-height);
 	font-weight: 500;
+	color: var(--color-text-quaternary);
+}
+
+.design-audit-adoption {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: 1.5rem;
+	padding-block: 0.75rem;
+	border-block: var(--edge-width) solid var(--color-edge);
+}
+
+.design-audit-adoption h4,
+.design-audit-adoption p,
+.design-audit-adoption ul {
+	margin: 0;
+}
+
+.design-audit-adoption h4 {
+	font-size: var(--text-sm);
+	line-height: var(--text-sm--line-height);
+}
+
+.design-audit-adoption p,
+.design-audit-adoption li {
+	font-size: var(--text-sm);
+	line-height: var(--text-sm--line-height);
 	color: var(--color-text-tertiary);
 }
 
+.design-audit-adoption p {
+	margin-block-start: 0.25rem;
+}
+
+.design-audit-adoption ul {
+	padding: 0;
+	list-style: none;
+}
+
+.design-audit-adoption li {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.25rem 0.75rem;
+	margin-block-start: 0.25rem;
+}
+
+.design-audit-adoption strong {
+	color: var(--color-text-primary);
+}
+
 @media (max-width: 639px) {
 	.design-audit {
 		padding-right: max(1rem, env(safe-area-inset-right));
@@ -201,4 +236,8 @@
 		overflow-x: auto;
 		margin-block-end: 2rem;
 	}
+
+	.design-audit-adoption {
+		grid-template-columns: 1fr;
+	}
 }

From 38cca2db609fdbffafe9b5413628e1e88a1d6f53 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Thu, 24 Sep 2026 15:49:55 +0100
Subject: [PATCH 2/2] Correct design audit icon provenance

---
 apps/web/src/design-audit/adoption.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/design-audit/adoption.tsx b/apps/web/src/design-audit/adoption.tsx
index db34e038..6568bf32 100644
--- a/apps/web/src/design-audit/adoption.tsx
+++ b/apps/web/src/design-audit/adoption.tsx
@@ -10,7 +10,10 @@ export function Adoption() {
 			<div className="design-audit-adoption">
 				<div>
 					<h4>Shared foundation</h4>
-					<p>Tokens, icons, and presentation primitives come from @chopin/visuals.</p>
+					<p>
+						Tokens and presentation primitives come from @chopin/visuals. Icons come from
+						@chopin/icons and local SVG assets.
+					</p>
 				</div>
 				<div>
 					<h4>Adopted shared controls</h4>