From 2146d8501f9b448de83ef7b361f35b98fc3910c5 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Sun, 25 Oct 2026 11:42:14 +0100
Subject: [PATCH 01/10] Agentic UI: Add spacing, line-height, type, radius,
 elevation and layer tokens, and use them instead of literals

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../account/account-prompt/style.module.css   |  16 +--
 .../account/auth-actions/style.module.css     |  12 +-
 .../account/gravatar/style.module.css         |   2 +-
 .../account/user-menu/style.module.css        |  10 +-
 .../src/features/annotations/style.module.css |  30 ++---
 .../features/chats/markdown/style.module.css  |  32 +++---
 .../session-view/composer/style.module.css    |  62 +++++-----
 .../conversation/style.module.css             | 108 +++++++++---------
 .../queued-prompts/style.module.css           |  14 +--
 .../chats/session-view/style.module.css       |  28 ++---
 .../commands/command-palette/style.module.css |   6 +-
 .../style.module.css                          |   8 +-
 .../style.module.css                          |  10 +-
 .../app-message-cards/style.module.css        |  10 +-
 .../notifications/app-toasts/style.module.css |   8 +-
 .../notice-card/style.module.css              |  26 ++---
 .../notice-history/style.module.css           |  20 ++--
 .../onboarding-guide/style.module.css         |  22 ++--
 .../welcome-dialog/style.module.css           |  32 +++---
 .../agentic-signin-banner/style.module.css    |  14 +--
 .../settings/offline-banner/style.module.css  |   8 +-
 .../settings/settings-dialog/style.module.css |  12 +-
 .../settings/settings-view/style.module.css   |  72 ++++++------
 .../site-settings-view/style.module.css       |  10 +-
 .../settings/wapuu-world/style.module.css     |  16 +--
 .../sharing/share-dialog/style.module.css     |  18 +--
 .../collapsed-site-switcher/style.module.css  |  12 +-
 .../sidebar/reorderable-list/style.module.css |   2 +-
 .../sidebar/sidebar-header/style.module.css   |   6 +-
 .../sidebar/sidebar-layout/style.module.css   |  14 +--
 .../sidebar/sidebar-toggle/style.module.css   |   2 +-
 .../sidebar/site-list/style.module.css        |  42 +++----
 .../blueprint-gallery.module.css              |  14 +--
 .../add-site-dialog/connect-panel.module.css  |  36 +++---
 .../add-site-dialog/create-panel.module.css   |  28 ++---
 .../add-site-dialog/import-panel.module.css   |  10 +-
 .../sites/add-site-dialog/style.module.css    |  10 +-
 .../sites/blueprint-upload/style.module.css   |   6 +-
 .../sites/create-site-form/style.module.css   |  32 +++---
 .../sites/design-system-view/style.module.css | 100 ++++++++--------
 .../preview-split-frame/style.module.css      |   2 +-
 .../sites/site-fields/style.module.css        |   6 +-
 .../site-header-actions/style.module.css      |   2 +-
 .../sites/site-preview/address-bar.module.css |  12 +-
 .../sites/site-preview/style.module.css       |  22 ++--
 .../stopped-site-preview/style.module.css     |   2 +-
 .../sync/publish-panel/style.module.css       |  56 ++++-----
 apps/ui/src/index.css                         |   2 +-
 apps/ui/src/lib/theme/base.css                |   2 +-
 apps/ui/src/lib/theme/tokens.css              |  45 ++++++++
 apps/ui/src/lib/ui/alert/style.module.css     |  10 +-
 apps/ui/src/lib/ui/badge/style.module.css     |  20 ++--
 apps/ui/src/lib/ui/button/style.module.css    |  20 ++--
 apps/ui/src/lib/ui/checkbox/style.module.css  |   2 +-
 .../ui/src/lib/ui/code-block/style.module.css |   4 +-
 apps/ui/src/lib/ui/command/style.module.css   |  14 +--
 apps/ui/src/lib/ui/dialog/style.module.css    |  44 +++----
 apps/ui/src/lib/ui/empty/style.module.css     |  14 +--
 apps/ui/src/lib/ui/field/style.module.css     |  34 +++---
 .../src/lib/ui/input-group/style.module.css   |  14 +--
 apps/ui/src/lib/ui/input/style.module.css     |   6 +-
 apps/ui/src/lib/ui/kbd/style.module.css       |   8 +-
 apps/ui/src/lib/ui/label/style.module.css     |   4 +-
 apps/ui/src/lib/ui/menu/style.module.css      |   6 +-
 apps/ui/src/lib/ui/popover/style.module.css   |   4 +-
 apps/ui/src/lib/ui/progress/style.module.css  |   4 +-
 .../src/lib/ui/resize-handle/style.module.css |   2 +-
 apps/ui/src/lib/ui/select/style.module.css    |  16 +--
 apps/ui/src/lib/ui/slider/style.module.css    |   6 +-
 apps/ui/src/lib/ui/surface/style.module.css   |  12 +-
 apps/ui/src/lib/ui/switch/style.module.css    |   6 +-
 apps/ui/src/lib/ui/tabs/style.module.css      |  12 +-
 apps/ui/src/lib/ui/textarea/style.module.css  |   4 +-
 apps/ui/src/lib/ui/tooltip/style.module.css   |   8 +-
 74 files changed, 695 insertions(+), 650 deletions(-)

diff --git a/apps/ui/src/features/account/account-prompt/style.module.css b/apps/ui/src/features/account/account-prompt/style.module.css
index 5b2a67af74..f08ce41e3c 100644
--- a/apps/ui/src/features/account/account-prompt/style.module.css
+++ b/apps/ui/src/features/account/account-prompt/style.module.css
@@ -3,8 +3,8 @@
 	flex-direction: column;
 	align-items: center;
 	width: 100%;
-	margin-top: -16px;
-	padding-bottom: 32px;
+	margin-top: calc(var(--space-4) * -1);
+	padding-bottom: var(--space-8);
 	text-align: center;
 	text-wrap: pretty;
 }
@@ -19,7 +19,7 @@
 	width: 100%;
 	max-width: 448px;
 	aspect-ratio: 2.6 / 1;
-	margin-bottom: 20px;
+	margin-bottom: var(--space-5);
 	pointer-events: none;
 }
 
@@ -86,23 +86,23 @@
 
 .description {
 	max-width: 320px;
-	margin: 4px 0 0;
+	margin: var(--space-1) 0 0;
 	color: var(--muted-foreground);
 	font-size: var(--text-sm);
-	line-height: 1.625;
+	line-height: var(--leading-relaxed);
 }
 
 .error {
-	margin: 12px 0 0;
+	margin: var(--space-3) 0 0;
 	color: var(--destructive);
 	font-size: var(--text-xs);
 }
 
 .createAccount {
-	margin-top: 28px;
+	margin-top: var(--space-7);
 }
 
 .logIn {
-	margin-top: 16px;
+	margin-top: var(--space-4);
 	font-size: var(--text-xs);
 }
diff --git a/apps/ui/src/features/account/auth-actions/style.module.css b/apps/ui/src/features/account/auth-actions/style.module.css
index 6f401945cb..412ea9d354 100644
--- a/apps/ui/src/features/account/auth-actions/style.module.css
+++ b/apps/ui/src/features/account/auth-actions/style.module.css
@@ -1,17 +1,17 @@
 .root {
 	display: flex;
 	flex-direction: column;
-	gap: 12px;
+	gap: var(--space-3);
 }
 
 .actions {
 	display: flex;
 	align-items: center;
-	gap: 16px;
+	gap: var(--space-4);
 }
 
 .arrow {
-	margin-inline-start: 4px;
+	margin-inline-start: var(--space-1);
 	display: inline-block;
 }
 
@@ -20,14 +20,14 @@
 }
 
 .error {
-	padding: 10px 12px;
+	padding: var(--space-2_5) var(--space-3);
 	border: 1px solid color-mix(in oklab, var(--destructive) 35%, transparent);
-	border-radius: 6px;
+	border-radius: var(--radius-lg);
 	background: var(--destructive-surface);
 	color: var(--destructive);
 }
 
-@media (max-width: 600px) {
+@media (width < 640px) {
 	.actions {
 		align-items: stretch;
 		flex-direction: column;
diff --git a/apps/ui/src/features/account/gravatar/style.module.css b/apps/ui/src/features/account/gravatar/style.module.css
index 39f01b0c88..db99cc1d92 100644
--- a/apps/ui/src/features/account/gravatar/style.module.css
+++ b/apps/ui/src/features/account/gravatar/style.module.css
@@ -3,7 +3,7 @@
 	display: inline-flex;
 	width: 20px;
 	height: 20px;
-	border-radius: 50%;
+	border-radius: var(--radius-full);
 	flex-shrink: 0;
 	background-color: var(--chat);
 }
diff --git a/apps/ui/src/features/account/user-menu/style.module.css b/apps/ui/src/features/account/user-menu/style.module.css
index 5e4eeca373..158debb2a0 100644
--- a/apps/ui/src/features/account/user-menu/style.module.css
+++ b/apps/ui/src/features/account/user-menu/style.module.css
@@ -2,11 +2,11 @@
    notification bell at the end, as 36px controls inset 12px. Pinning to the
    sidebar bottom is handled by the layout's `sidebarFooter` wrapper. */
 .root {
-	padding: 0 12px 10px;
+	padding: 0 var(--space-3) var(--space-2_5);
 }
 
 .alert {
-	margin-block-end: 8px;
+	margin-block-end: var(--space-2);
 }
 
 .row {
@@ -35,8 +35,8 @@
 .account {
 	display: flex;
 	align-items: center;
-	gap: 6px;
-	padding: 8px 6px;
+	gap: var(--space-1_5);
+	padding: var(--space-2) var(--space-1_5);
 }
 
 .accountText {
@@ -44,7 +44,7 @@
 	flex-direction: column;
 	min-width: 0;
 	font-size: var(--text-xs);
-	line-height: 1.25;
+	line-height: var(--leading-tight);
 }
 
 .accountName,
diff --git a/apps/ui/src/features/annotations/style.module.css b/apps/ui/src/features/annotations/style.module.css
index cccb0ab82c..8490da40c6 100644
--- a/apps/ui/src/features/annotations/style.module.css
+++ b/apps/ui/src/features/annotations/style.module.css
@@ -1,7 +1,7 @@
 .overlay {
 	position: absolute;
 	inset: 0;
-	z-index: 20;
+	z-index: var(--z-overlay);
 	pointer-events: none;
 }
 
@@ -9,14 +9,14 @@
 	position: absolute;
 	display: flex;
 	flex-direction: column;
-	gap: 4px;
+	gap: var(--space-1);
 	width: 320px;
 	max-width: calc(100% - 16px);
 	max-height: calc(100% - 80px);
-	padding: 4px;
+	padding: var(--space-1);
 	overflow-y: auto;
 	border: 1px solid var(--input);
-	border-radius: 24px;
+	border-radius: var(--radius-3xl);
 	background-color: var(--composer);
 	color: var(--foreground);
 	pointer-events: auto;
@@ -33,15 +33,15 @@
 .images {
 	display: flex;
 	flex-wrap: wrap;
-	gap: 12px;
-	padding: 8px 8px 4px;
+	gap: var(--space-3);
+	padding: var(--space-2) var(--space-2) var(--space-1);
 }
 
 .image {
 	position: relative;
 	width: 48px;
 	height: 48px;
-	border-radius: 12px;
+	border-radius: var(--radius-xl);
 	background-color: var(--muted);
 }
 
@@ -63,8 +63,8 @@
 
 .imageRemove {
 	position: absolute;
-	top: -8px;
-	right: -8px;
+	top: calc(var(--space-2) * -1);
+	right: calc(var(--space-2) * -1);
 	z-index: 1;
 	display: inline-flex;
 	align-items: center;
@@ -72,7 +72,7 @@
 	width: 24px;
 	height: 24px;
 	border: 1px solid var(--border);
-	border-radius: 50%;
+	border-radius: var(--radius-full);
 	background-color: var(--chrome);
 	box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
 	color: var(--foreground);
@@ -82,8 +82,8 @@
 .toolbar {
 	display: flex;
 	align-items: center;
-	gap: 4px;
-	padding: 0 4px 4px;
+	gap: var(--space-1);
+	padding: 0 var(--space-1) var(--space-1);
 }
 
 .save {
@@ -92,12 +92,12 @@
 
 .bar {
 	position: absolute;
-	bottom: 16px;
+	bottom: var(--space-4);
 	left: 50%;
 	display: flex;
 	align-items: center;
-	gap: 4px;
-	padding: 6px;
+	gap: var(--space-1);
+	padding: var(--space-1_5);
 	border-radius: var(--radius-xl);
 	background-color: var(--popover);
 	box-shadow:
diff --git a/apps/ui/src/features/chats/markdown/style.module.css b/apps/ui/src/features/chats/markdown/style.module.css
index 6155f298c0..f68f3758f5 100644
--- a/apps/ui/src/features/chats/markdown/style.module.css
+++ b/apps/ui/src/features/chats/markdown/style.module.css
@@ -5,7 +5,7 @@
 	min-width: 0;
 	color: var(--foreground);
 	font-size: var(--text-sm);
-	line-height: 1.625;
+	line-height: var(--leading-relaxed);
 	overflow-wrap: break-word;
 }
 
@@ -21,13 +21,13 @@
 .h4 {
 	margin-block: var(--markdown-gap);
 	font-weight: var(--font-weight-semibold);
-	line-height: 20px;
+	line-height: var(--text-sm--line-height);
 	color: var(--foreground);
 }
 
 .blockquote,
 .tableWrap {
-	margin-block: 16px;
+	margin-block: var(--space-4);
 }
 
 .hr {
@@ -45,7 +45,7 @@
 
 .ul,
 .ol {
-	padding-inline-start: 20px;
+	padding-inline-start: var(--space-5);
 	list-style-position: outside;
 }
 
@@ -58,13 +58,13 @@
 }
 
 .li {
-	padding-block: 2px;
+	padding-block: var(--space-0_5);
 }
 
 .li > .ul,
 .li > .ol {
-	margin-block-start: 4px;
-	padding-inline-start: 24px;
+	margin-block-start: var(--space-1);
+	padding-inline-start: var(--space-6);
 }
 
 .a {
@@ -84,7 +84,7 @@
 }
 
 .blockquote {
-	padding-inline-start: 12px;
+	padding-inline-start: var(--space-3);
 	border-inline-start: 2px solid color-mix(in oklab, var(--muted-foreground) 30%, transparent);
 	color: var(--muted-foreground);
 }
@@ -94,12 +94,12 @@
 }
 
 .codeInline {
-	padding: 2px 4px;
+	padding: var(--space-0_5) var(--space-1);
 	border-radius: var(--radius-sm);
 	background-color: color-mix(in oklab, var(--foreground) 5%, transparent);
 	font-family: var(--font-mono);
 	font-size: var(--text-xs);
-	line-height: 20px;
+	line-height: var(--text-xs--line-height);
 	-webkit-user-select: text;
 	user-select: text;
 }
@@ -108,19 +108,19 @@
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	gap: 8px;
-	padding: 8px 12px;
+	gap: var(--space-2);
+	padding: var(--space-2) var(--space-3);
 	border-bottom: 1px solid var(--border);
 	background-color: color-mix(in oklab, var(--muted) 80%, transparent);
 	color: var(--muted-foreground);
 	font-size: var(--text-xs);
-	line-height: 20px;
+	line-height: var(--text-xs--line-height);
 }
 
 .tableWrap {
 	display: flex;
 	flex-direction: column;
-	padding: 8px;
+	padding: var(--space-2);
 	border: 1px solid var(--border);
 	border-radius: var(--radius-lg);
 }
@@ -147,8 +147,8 @@
 
 .th,
 .td {
-	padding: 8px 16px;
-	line-height: 20px;
+	padding: var(--space-2) var(--space-4);
+	line-height: var(--text-sm--line-height);
 	text-align: start;
 }
 
diff --git a/apps/ui/src/features/chats/session-view/composer/style.module.css b/apps/ui/src/features/chats/session-view/composer/style.module.css
index c5d07b1d1c..a062678e91 100644
--- a/apps/ui/src/features/chats/session-view/composer/style.module.css
+++ b/apps/ui/src/features/chats/session-view/composer/style.module.css
@@ -5,13 +5,13 @@
 
 /* A tab above the composer, which overlaps its bottom edge. */
 .notice {
-	margin-bottom: -24px;
-	padding: 6px 10px 30px 16px;
-	border-radius: 24px 24px 0 0;
+	margin-bottom: calc(var(--space-6) * -1);
+	padding: var(--space-1_5) var(--space-2_5) 30px var(--space-4);
+	border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;
 	background-color: var(--muted);
 	color: var(--muted-foreground);
 	font-size: var(--text-xs);
-	line-height: 20px;
+	line-height: var(--text-xs--line-height);
 }
 
 .notice[data-feedback] {
@@ -23,7 +23,7 @@
 	display: flex;
 	min-height: 36px;
 	align-items: center;
-	gap: 12px;
+	gap: var(--space-3);
 }
 
 .noticeContent[data-submit-feedback='shake'] {
@@ -70,7 +70,7 @@
 
 /* Text-input chrome, like the form inputs beside it, instead of the chat composer. */
 .shellField {
-	border-radius: 9px;
+	border-radius: var(--radius-lg);
 	background-color: color-mix(
 		in srgb,
 		var(--chrome) 60%,
@@ -92,7 +92,7 @@
 .dropOverlay {
 	position: absolute;
 	inset: 0;
-	z-index: 40;
+	z-index: var(--z-sidebar);
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -107,8 +107,8 @@
 }
 
 .dropOverlay span {
-	padding: 8px 16px;
-	border-radius: 13px;
+	padding: var(--space-2) var(--space-4);
+	border-radius: var(--radius-xl);
 	background-color: var(--accent);
 	color: var(--accent-foreground);
 	font-size: var(--text-sm);
@@ -123,8 +123,8 @@
 	display: flex;
 	flex-wrap: wrap;
 	align-items: flex-end;
-	gap: 12px;
-	padding: 14px 14px 6px;
+	gap: var(--space-3);
+	padding: var(--space-3_5) var(--space-3_5) var(--space-1_5);
 }
 
 .attachment {
@@ -158,12 +158,12 @@
 }
 
 .attachmentFile {
-	gap: 8px;
+	gap: var(--space-2);
 	align-items: center;
 	height: 36px;
-	padding: 0 12px;
+	padding: 0 var(--space-3);
 	font-size: var(--text-xs);
-	line-height: 20px;
+	line-height: var(--text-xs--line-height);
 }
 
 .attachmentFile:hover {
@@ -194,15 +194,15 @@
 	--button-background: var(--chrome);
 
 	position: absolute;
-	top: -8px;
-	right: -8px;
+	top: calc(var(--space-2) * -1);
+	right: calc(var(--space-2) * -1);
 	z-index: 1;
 	box-shadow: var(--shadow-sm);
 }
 
 .attachmentRemove::after {
 	position: absolute;
-	inset: -4px;
+	inset: calc(var(--space-1) * -1);
 	content: '';
 }
 
@@ -247,10 +247,10 @@
 
 .attachmentHoverText {
 	min-height: var(--attachment-hover-artwork-height);
-	padding: 12px;
+	padding: var(--space-3);
 	color: var(--foreground);
 	font-family: var(--font-mono);
-	font-size: 11px;
+	font-size: var(--text-2xs);
 	line-height: 1.35;
 	white-space: pre-wrap;
 	overflow-wrap: anywhere;
@@ -260,8 +260,8 @@
 	display: flex;
 	min-width: 0;
 	flex-direction: column;
-	gap: 2px;
-	padding: 8px 10px;
+	gap: var(--space-0_5);
+	padding: var(--space-2) var(--space-2_5);
 	color: var(--foreground);
 }
 
@@ -269,7 +269,7 @@
 	overflow: hidden;
 	font-size: var(--text-xxs);
 	font-weight: var(--font-weight-semibold);
-	line-height: 1.25;
+	line-height: var(--leading-tight);
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
@@ -277,7 +277,7 @@
 .attachmentHoverMeta {
 	overflow: hidden;
 	color: var(--muted-foreground);
-	font-size: 11px;
+	font-size: var(--text-2xs);
 	line-height: 1.2;
 	text-overflow: ellipsis;
 	white-space: nowrap;
@@ -292,7 +292,7 @@
 .input {
 	min-height: 0;
 	max-height: calc(6lh + 28px);
-	padding: 14px;
+	padding: var(--space-3_5);
 	overflow-y: auto;
 }
 
@@ -302,13 +302,13 @@
 
 .placeholder {
 	position: absolute;
-	top: 14px;
-	right: 14px;
-	left: 14px;
+	top: var(--space-3_5);
+	right: var(--space-3_5);
+	left: var(--space-3_5);
 	overflow: hidden;
 	color: var(--muted-foreground);
 	font-size: var(--text-sm);
-	line-height: 20px;
+	line-height: var(--text-sm--line-height);
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	pointer-events: none;
@@ -318,9 +318,9 @@
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	gap: 8px;
+	gap: var(--space-2);
 	min-width: 0;
-	padding: 6px 8px 8px;
+	padding: var(--space-1_5) var(--space-2) var(--space-2);
 }
 
 .leftActions,
@@ -330,7 +330,7 @@
 }
 
 .rightActions {
-	gap: 4px;
+	gap: var(--space-1);
 }
 
 .leftActions {
diff --git a/apps/ui/src/features/chats/session-view/conversation/style.module.css b/apps/ui/src/features/chats/session-view/conversation/style.module.css
index e86d657e86..4557a48c96 100644
--- a/apps/ui/src/features/chats/session-view/conversation/style.module.css
+++ b/apps/ui/src/features/chats/session-view/conversation/style.module.css
@@ -1,11 +1,11 @@
 .root {
 	display: flex;
 	flex-direction: column;
-	gap: 24px;
+	gap: var(--space-6);
 }
 
 .root > [data-joined-above] {
-	margin-top: -20px;
+	margin-top: calc(var(--space-5) * -1);
 }
 
 .userTurn {
@@ -17,10 +17,10 @@
 	align-self: flex-end;
 	display: flex;
 	align-items: center;
-	gap: 4px;
+	gap: var(--space-1);
 	max-width: 80%;
-	margin-top: 4px;
-	padding: 8px 12px;
+	margin-top: var(--space-1);
+	padding: var(--space-2) var(--space-3);
 	border: 1px solid var(--border);
 	border-radius: 12px;
 	background-color: var(--chat);
@@ -44,7 +44,7 @@
 .assistantTurn {
 	display: flex;
 	align-items: center;
-	gap: 8px;
+	gap: var(--space-2);
 }
 
 .userTextRow {
@@ -74,12 +74,12 @@
 .assistantBubble {
 	display: flex;
 	flex-direction: column;
-	gap: 8px;
+	gap: var(--space-2);
 	min-width: 0;
 	max-width: min(85%, 32rem);
-	padding: 12px 16px;
+	padding: var(--space-3) var(--space-4);
 	overflow: hidden;
-	border-radius: 16px;
+	border-radius: var(--radius-2xl);
 	overflow-wrap: break-word;
 }
 
@@ -118,16 +118,16 @@
 .userAttachments {
 	display: flex;
 	flex-wrap: wrap;
-	gap: 8px;
+	gap: var(--space-2);
 }
 
 .userAttachment {
 	display: inline-flex;
 	align-items: center;
-	gap: 6px;
+	gap: var(--space-1_5);
 	min-width: 0;
 	max-width: 256px;
-	padding: 0 6px;
+	padding: 0 var(--space-1_5);
 	border: 1px solid var(--border);
 	border-radius: var(--radius-md);
 	font-weight: var(--font-weight-medium);
@@ -169,28 +169,28 @@
 }
 
 .root > .toolRow + .toolRow {
-	margin-top: -16px;
+	margin-top: calc(var(--space-4) * -1);
 }
 
 .toolDetails {
 	display: flex;
 	flex-direction: column;
-	gap: 8px;
+	gap: var(--space-2);
 	min-width: 0;
-	margin-block: 8px 4px;
+	margin-block: var(--space-2) var(--space-1);
 	margin-inline-start: 7px;
-	padding-inline: 12px 4px;
+	padding-inline: var(--space-3) var(--space-1);
 	border-inline-start: 1px solid var(--border);
 	color: var(--muted-foreground);
 	font-size: var(--text-xs);
-	line-height: 20px;
+	line-height: var(--text-xs--line-height);
 	overflow-wrap: break-word;
 }
 
 .activityProgress {
 	color: var(--muted-foreground);
 	font-size: var(--text-xs);
-	line-height: 20px;
+	line-height: var(--text-xs--line-height);
 	opacity: 0.8;
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -200,12 +200,12 @@
 .traceLine {
 	display: flex;
 	align-items: center;
-	gap: 8px;
+	gap: var(--space-2);
 	min-width: 0;
 	max-width: 100%;
 	color: var(--muted-foreground);
 	font-size: var(--text-xs);
-	line-height: 20px;
+	line-height: var(--text-xs--line-height);
 }
 
 .traceLine svg {
@@ -223,7 +223,7 @@
 	appearance: none;
 	display: flex;
 	align-items: center;
-	gap: 4px;
+	gap: var(--space-1);
 	width: fit-content;
 	max-width: 100%;
 	min-width: 0;
@@ -248,7 +248,7 @@
 }
 
 .traceTrigger:focus-visible {
-	outline: 2px solid var(--ring);
+	outline: var(--focus-width) solid var(--ring);
 	outline-offset: 2px;
 }
 
@@ -270,7 +270,7 @@
 }
 
 .toolCode pre {
-	padding: 8px;
+	padding: var(--space-2);
 }
 
 .toolOutput {
@@ -281,7 +281,7 @@
 .mediaArtifacts {
 	display: flex;
 	flex-direction: column;
-	gap: 12px;
+	gap: var(--space-3);
 }
 
 .mediaArtifactImage {
@@ -292,23 +292,23 @@
 .marker {
 	display: flex;
 	align-items: center;
-	gap: 8px;
+	gap: var(--space-2);
 	min-height: 16px;
 	color: var(--muted-foreground);
 	font-size: var(--text-sm);
-	line-height: 20px;
+	line-height: var(--text-sm--line-height);
 	overflow-wrap: anywhere;
 }
 
 .questionBatch {
 	display: flex;
 	flex-direction: column;
-	gap: 4px;
+	gap: var(--space-1);
 	overflow-anchor: none;
 }
 
 .questionBatchStep {
-	animation: questionBatchStepEnter 120ms ease-out;
+	animation: questionBatchStepEnter var(--motion-duration-feedback) ease-out;
 }
 
 .questionBatchStep[data-state='answered'] {
@@ -320,16 +320,16 @@
 }
 
 .questionBatchStep[data-state='answered'] .questionProgress {
-	animation: questionAnsweredElementFade 180ms ease-out forwards;
+	animation: questionAnsweredElementFade var(--motion-duration-surface) ease-out forwards;
 }
 
 .questionCard {
 	display: flex;
 	flex-direction: column;
-	gap: 16px;
+	gap: var(--space-4);
 	width: 100%;
-	padding: 16px;
-	border-radius: 16px;
+	padding: var(--space-4);
+	border-radius: var(--radius-2xl);
 	background-color: var(--muted);
 }
 
@@ -341,7 +341,7 @@
 .questionText {
 	color: var(--foreground);
 	font-weight: var(--font-weight-medium);
-	line-height: 1.375;
+	line-height: var(--leading-snug);
 	text-wrap: pretty;
 }
 
@@ -366,16 +366,16 @@
 }
 
 .questionSummary:focus-visible {
-	outline: 2px solid var(--ring);
+	outline: var(--focus-width) solid var(--ring);
 	outline-offset: 2px;
 }
 
 .questionAnswer {
 	display: flex;
 	align-items: center;
-	gap: 6px;
+	gap: var(--space-1_5);
 	min-height: 36px;
-	padding: 6px 8px;
+	padding: var(--space-1_5) var(--space-2);
 	border-radius: var(--radius-md);
 	color: var(--muted-foreground);
 }
@@ -403,12 +403,12 @@
 	font-family: var(--font-mono);
 	font-size: var(--text-sm);
 	font-weight: var(--font-weight-medium);
-	line-height: 1;
+	line-height: var(--leading-none);
 }
 
 .questionChoices {
 	display: grid;
-	margin-inline-start: -8px;
+	margin-inline-start: calc(var(--space-2) * -1);
 }
 
 .questionChoiceItem {
@@ -419,10 +419,10 @@
 .questionChoice {
 	display: flex;
 	align-items: center;
-	gap: 8px;
+	gap: var(--space-2);
 	width: 100%;
 	min-height: 36px;
-	padding: 8px;
+	padding: var(--space-2);
 	border-radius: var(--radius-md);
 	color: var(--foreground);
 	text-align: start;
@@ -452,9 +452,9 @@
 	display: flex;
 	flex: 1;
 	flex-direction: column;
-	gap: 2px;
+	gap: var(--space-0_5);
 	min-width: 0;
-	line-height: 1.375;
+	line-height: var(--leading-snug);
 }
 
 .questionChoiceFreeForm .questionChoiceLabel > :first-child {
@@ -463,7 +463,7 @@
 
 .questionChoices[data-layout='grid'] {
 	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
-	gap: 4px;
+	gap: var(--space-1);
 }
 
 .questionChoices[data-layout='grid'] .questionChoiceItem[data-wide='true'] {
@@ -513,9 +513,9 @@
 
 .questionOptionZoom {
 	position: absolute;
-	top: 16px;
-	inset-inline-end: 16px;
-	box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
+	top: var(--space-4);
+	inset-inline-end: var(--space-4);
+	box-shadow: var(--shadow-raised);
 }
 
 .questionOptionZoomPopup {
@@ -534,7 +534,7 @@
 .questionOptionZoomClose,
 .questionOptionZoomStep {
 	position: absolute;
-	box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
+	box-shadow: var(--shadow-raised);
 }
 
 .questionOptionZoom,
@@ -544,8 +544,8 @@
 }
 
 .questionOptionZoomClose {
-	top: 8px;
-	inset-inline-end: 8px;
+	top: var(--space-2);
+	inset-inline-end: var(--space-2);
 }
 
 .questionOptionZoomStep {
@@ -554,24 +554,24 @@
 }
 
 .questionOptionZoomPrevious {
-	inset-inline-start: 8px;
+	inset-inline-start: var(--space-2);
 }
 
 .questionOptionZoomNext {
-	inset-inline-end: 8px;
+	inset-inline-end: var(--space-2);
 }
 
 .questionOptionZoomChoose {
 	position: absolute;
 	inset-inline: 0;
-	bottom: 12px;
+	bottom: var(--space-3);
 	width: fit-content;
 	margin-inline: auto;
-	box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
+	box-shadow: var(--shadow-raised);
 }
 
 .questionCard[data-state='folding'] .questionChoiceItem:not([data-picked='true']) {
-	animation: questionAnsweredElementFade 180ms ease-out forwards;
+	animation: questionAnsweredElementFade var(--motion-duration-surface) ease-out forwards;
 }
 
 @keyframes questionBatchStepEnter {
diff --git a/apps/ui/src/features/chats/session-view/queued-prompts/style.module.css b/apps/ui/src/features/chats/session-view/queued-prompts/style.module.css
index 3173e3a24c..ae92da17de 100644
--- a/apps/ui/src/features/chats/session-view/queued-prompts/style.module.css
+++ b/apps/ui/src/features/chats/session-view/queued-prompts/style.module.css
@@ -3,8 +3,8 @@
 	display: flex;
 	flex-direction: column;
 	max-height: 160px;
-	margin: 0 -2px 14px;
-	padding: 8px;
+	margin: 0 calc(var(--space-0_5) * -1) var(--space-3_5);
+	padding: var(--space-2);
 	overflow-y: auto;
 	border: 1px solid var(--border);
 	border-radius: var(--radius-xl);
@@ -14,17 +14,17 @@
 .item {
 	display: flex;
 	flex-direction: column;
-	gap: 4px;
+	gap: var(--space-1);
 	min-width: 0;
-	padding: 4px 8px;
+	padding: var(--space-1) var(--space-2);
 	border-radius: var(--radius-md);
 	font-size: var(--text-sm);
-	line-height: 20px;
+	line-height: var(--text-sm--line-height);
 }
 
 .row {
 	display: flex;
-	gap: 8px;
+	gap: var(--space-2);
 	align-items: center;
 }
 
@@ -39,7 +39,7 @@
 
 .actions {
 	display: flex;
-	gap: 4px;
+	gap: var(--space-1);
 	opacity: 0;
 	transition: opacity var(--motion-duration-feedback) ease;
 }
diff --git a/apps/ui/src/features/chats/session-view/style.module.css b/apps/ui/src/features/chats/session-view/style.module.css
index f194701260..de5abef040 100644
--- a/apps/ui/src/features/chats/session-view/style.module.css
+++ b/apps/ui/src/features/chats/session-view/style.module.css
@@ -20,8 +20,8 @@
 .header {
 	display: flex;
 	align-items: center;
-	gap: 4px;
-	padding-inline: 12px;
+	gap: var(--space-1);
+	padding-inline: var(--space-3);
 	height: var(--band-height);
 	transition: padding var(--motion-duration-layout) var(--motion-ease-layout);
 	background-color: var(--chrome);
@@ -35,12 +35,12 @@
 .headerLead {
 	display: flex;
 	align-items: center;
-	gap: 4px;
+	gap: var(--space-1);
 	min-width: 0;
 }
 
 .headerWithSiteActions {
-	padding-inline-end: 8px;
+	padding-inline-end: var(--space-2);
 }
 
 .headerSidebarCollapsed {
@@ -52,19 +52,19 @@
 }
 
 .headerSiteIcon {
-	margin-inline-end: calc(-1 * 4px);
+	margin-inline-end: calc(-1 * var(--space-1));
 }
 
 .headerDot {
 	width: 6px;
 	height: 6px;
-	border-radius: 50%;
+	border-radius: var(--radius-full);
 	background-color: var(--status-running);
 	flex-shrink: 0;
 	/* Extra horizontal margin around the dot only — keeps the toggle-to-title
 	   gap at the header's base 8px while giving the site/dot/local grouping
 	   more breathing room. */
-	margin: 0 4px;
+	margin: 0 var(--space-1);
 }
 
 .headerEnv {
@@ -78,7 +78,7 @@
 .headerActions {
 	display: flex;
 	align-items: center;
-	gap: 4px;
+	gap: var(--space-1);
 	-webkit-app-region: no-drag;
 }
 
@@ -143,7 +143,7 @@
 }
 
 .conversationSpacing {
-	padding-top: 16px;
+	padding-top: var(--space-4);
 	padding-bottom: 30px;
 }
 
@@ -152,7 +152,7 @@
    above the composer without contributing to the measured composer height. */
 .scrollToLatestWrap {
 	position: absolute;
-	bottom: calc(100% + 18px);
+	bottom: calc(100% + var(--space-4_5));
 	inset-inline: 0;
 	display: flex;
 	justify-content: center;
@@ -174,7 +174,7 @@
 /* Composer fade-in after the entitlement check resolves. No fill mode:
    natural opacity is 1, and index.css's reduced-motion clamp covers it. */
 .fadeInQuick {
-	animation: fade-in-quick 180ms ease-out;
+	animation: fade-in-quick var(--motion-duration-surface) ease-out;
 }
 
 @keyframes fade-in-quick {
@@ -193,9 +193,9 @@
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	gap: 12px;
+	gap: var(--space-3);
 	height: 100%;
-	padding: 24px;
+	padding: var(--space-6);
 	color: var(--muted-foreground);
 	font-size: var(--text-sm);
 }
@@ -207,7 +207,7 @@
 	align-items: center;
 	justify-content: center;
 	/* Centred between the header and the composer. */
-	padding: calc(var(--header-height) + 24px) 24px calc(24px + 2 * var(--composer-bottom-gap));
+	padding: calc(var(--header-height) + var(--space-6)) var(--space-6) calc(var(--space-6) + 2 * var(--composer-bottom-gap));
 	transition: opacity var(--motion-duration-layout) var(--motion-ease-layout);
 }
 
diff --git a/apps/ui/src/features/commands/command-palette/style.module.css b/apps/ui/src/features/commands/command-palette/style.module.css
index ee9472498b..5f99aff33e 100644
--- a/apps/ui/src/features/commands/command-palette/style.module.css
+++ b/apps/ui/src/features/commands/command-palette/style.module.css
@@ -1,16 +1,16 @@
 /* Sits a little above center, and stays put as results narrow. */
 .popup {
-	top: max(16px, calc(50dvh - 168px));
+	top: max(var(--space-4), calc(50dvh - 168px));
 	display: block;
 	max-width: 448px;
 	overflow: hidden;
-	padding: 10px;
+	padding: var(--space-2_5);
 	transform: translateX(-50%);
 	transition: none;
 }
 
 .inputGroup {
-	border-radius: 14px;
+	border-radius: calc(var(--radius-3xl) - var(--space-2_5));
 }
 
 .icon {
diff --git a/apps/ui/src/features/credits/ai-credits-details-dialog/style.module.css b/apps/ui/src/features/credits/ai-credits-details-dialog/style.module.css
index 3de2cc010b..93d1368a47 100644
--- a/apps/ui/src/features/credits/ai-credits-details-dialog/style.module.css
+++ b/apps/ui/src/features/credits/ai-credits-details-dialog/style.module.css
@@ -1,13 +1,13 @@
 .details {
 	display: flex;
 	flex-direction: column;
-	gap: 12px;
+	gap: var(--space-3);
 }
 
 .section {
 	display: flex;
 	flex-direction: column;
-	gap: 4px;
+	gap: var(--space-1);
 }
 
 .section h3 {
@@ -16,12 +16,12 @@
 }
 
 .section ul {
-	padding-inline-start: 16px;
+	padding-inline-start: var(--space-4);
 	list-style: disc;
 }
 
 .section li + li {
-	margin-block-start: 4px;
+	margin-block-start: var(--space-1);
 }
 
 .learnMoreButton,
diff --git a/apps/ui/src/features/credits/ai-credits-purchase-dialog/style.module.css b/apps/ui/src/features/credits/ai-credits-purchase-dialog/style.module.css
index aa26827f8f..5fc6e7f87d 100644
--- a/apps/ui/src/features/credits/ai-credits-purchase-dialog/style.module.css
+++ b/apps/ui/src/features/credits/ai-credits-purchase-dialog/style.module.css
@@ -1,7 +1,7 @@
 .amountCards {
 	display: grid;
 	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
-	gap: 8px;
+	gap: var(--space-2);
 }
 
 .descriptionEmphasis {
@@ -12,10 +12,10 @@
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
-	gap: 4px;
-	padding: 12px;
+	gap: var(--space-1);
+	padding: var(--space-3);
 	border: 1px solid var(--border);
-	border-radius: 16px;
+	border-radius: var(--radius-2xl);
 	color: var(--foreground);
 	cursor: pointer;
 	text-align: start;
@@ -37,7 +37,7 @@
 }
 
 .optionPrice {
-	font-size: 15px;
+	font-size: var(--text-md);
 	font-weight: var(--font-weight-semibold);
 }
 
diff --git a/apps/ui/src/features/notifications/app-message-cards/style.module.css b/apps/ui/src/features/notifications/app-message-cards/style.module.css
index 073d90c824..19b1d4763c 100644
--- a/apps/ui/src/features/notifications/app-message-cards/style.module.css
+++ b/apps/ui/src/features/notifications/app-message-cards/style.module.css
@@ -3,7 +3,7 @@
 .stack {
 	display: flex;
 	flex-direction: column;
-	margin-top: calc(-1 * 8px);
+	margin-top: calc(-1 * var(--space-2));
 }
 
 /* Collapsible row, same treatment as the toasts: @starting-style animates
@@ -13,10 +13,10 @@
 	container-type: inline-size;
 	display: grid;
 	grid-template-rows: 1fr;
-	margin-top: 8px;
+	margin-top: var(--space-2);
 	transition:
-		grid-template-rows 180ms ease,
-		margin-top 180ms ease;
+		grid-template-rows var(--motion-duration-surface) ease,
+		margin-top var(--motion-duration-surface) ease;
 }
 
 @starting-style {
@@ -48,7 +48,7 @@
 	right: -1px;
 	width: 6px;
 	height: 6px;
-	border-radius: 50%;
+	border-radius: var(--radius-full);
 	background-color: var(--accent-text);
 	pointer-events: none;
 }
diff --git a/apps/ui/src/features/notifications/app-toasts/style.module.css b/apps/ui/src/features/notifications/app-toasts/style.module.css
index 76d8f791a0..ba94484dd5 100644
--- a/apps/ui/src/features/notifications/app-toasts/style.module.css
+++ b/apps/ui/src/features/notifications/app-toasts/style.module.css
@@ -3,8 +3,8 @@
    hovering or focusing the deck spreads it into a list. */
 .viewport {
 	position: fixed;
-	inset-block-end: 12px;
-	inset-inline-end: 12px;
+	inset-block-end: var(--space-3);
+	inset-inline-end: var(--space-3);
 	z-index: var(--z-toast);
 	width: min(320px, calc(100vw - 24px));
 	pointer-events: none;
@@ -85,8 +85,8 @@
    clip for the dismiss button that overhangs the corner. */
 .content {
 	height: calc(100% + 24px);
-	margin: -12px;
-	padding: 12px;
+	margin: calc(var(--space-3) * -1);
+	padding: var(--space-3);
 	overflow: clip;
 	transition: opacity var(--motion-duration-feedback) var(--motion-ease-enter);
 }
diff --git a/apps/ui/src/features/notifications/notice-card/style.module.css b/apps/ui/src/features/notifications/notice-card/style.module.css
index 418a9c3e30..dfc4293936 100644
--- a/apps/ui/src/features/notifications/notice-card/style.module.css
+++ b/apps/ui/src/features/notifications/notice-card/style.module.css
@@ -2,7 +2,7 @@
 .card {
 	position: relative;
 	pointer-events: auto;
-	padding: 16px;
+	padding: var(--space-4);
 	border-radius: var(--radius-xl);
 	background-color: var(--secondary);
 	color: var(--secondary-foreground);
@@ -10,7 +10,7 @@
 		0 0 0 1px var(--border),
 		var(--shadow-sm);
 	font-size: var(--text-sm);
-	line-height: 20px;
+	line-height: var(--text-sm--line-height);
 	/* Toasts rewrite themselves in place — import progress ticks through a
 	   percentage — and this font's digits are not equal width, so a counter
 	   would shift the text by a few pixels on nearly every update. */
@@ -20,7 +20,7 @@
 .row {
 	display: flex;
 	align-items: center;
-	gap: 8px;
+	gap: var(--space-2);
 }
 
 .status {
@@ -30,7 +30,7 @@
 	justify-content: center;
 	width: 14px;
 	height: 14px;
-	border-radius: 50%;
+	border-radius: var(--radius-full);
 	color: var(--secondary);
 }
 
@@ -71,8 +71,8 @@
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
-	gap: 8px;
-	margin-top: 2px;
+	gap: var(--space-2);
+	margin-top: var(--space-0_5);
 	padding-inline-start: 22px;
 }
 
@@ -92,7 +92,7 @@
 }
 
 .toggle:focus-visible {
-	outline: 2px solid var(--ring);
+	outline: var(--focus-width) solid var(--ring);
 	outline-offset: 2px;
 }
 
@@ -108,7 +108,7 @@
 	overflow: hidden;
 	color: var(--muted-foreground);
 	font-size: var(--text-xs);
-	line-height: 1.625;
+	line-height: var(--leading-relaxed);
 	white-space: pre-wrap;
 	overflow-wrap: anywhere;
 	interpolate-size: allow-keywords;
@@ -160,10 +160,10 @@
 	--button-background: var(--chrome);
 
 	position: absolute;
-	inset-block-start: -6px;
-	inset-inline-start: -6px;
+	inset-block-start: calc(var(--space-1_5) * -1);
+	inset-inline-start: calc(var(--space-1_5) * -1);
 	opacity: 0;
-	transition: opacity 120ms ease;
+	transition: opacity var(--motion-duration-feedback) ease;
 }
 
 .card:hover .close,
@@ -178,7 +178,7 @@
 		display: grid;
 		grid-template-columns: auto minmax(0, 1fr);
 		align-items: center;
-		column-gap: 8px;
+		column-gap: var(--space-2);
 	}
 
 	.row {
@@ -193,7 +193,7 @@
 	.row > button {
 		grid-area: 3 / 2;
 		justify-self: start;
-		margin-top: 12px;
+		margin-top: var(--space-3);
 	}
 }
 
diff --git a/apps/ui/src/features/notifications/notice-history/style.module.css b/apps/ui/src/features/notifications/notice-history/style.module.css
index 6de34876a8..a641217cc0 100644
--- a/apps/ui/src/features/notifications/notice-history/style.module.css
+++ b/apps/ui/src/features/notifications/notice-history/style.module.css
@@ -13,34 +13,34 @@
 	inset-inline-end: 7.5px;
 	width: 7px;
 	height: 7px;
-	border-radius: 50%;
+	border-radius: var(--radius-full);
 	background-color: var(--accent);
 	pointer-events: none;
 }
 
 .empty {
 	width: min(320px, calc(100vw - 24px));
-	padding: 16px;
+	padding: var(--space-4);
 }
 
 .emptyTitle {
 	font-size: var(--text-sm);
 	font-weight: var(--font-weight-medium);
-	line-height: 20px;
+	line-height: var(--text-sm--line-height);
 }
 
 .emptyText {
-	margin: 4px 0 0;
+	margin: var(--space-1) 0 0;
 	color: var(--muted-foreground);
 	font-size: var(--text-sm);
-	line-height: 20px;
+	line-height: var(--text-sm--line-height);
 }
 
 /* The entries float on their own, like the toasts they were. */
 .history {
 	display: flex;
 	flex-direction: column;
-	gap: 8px;
+	gap: var(--space-2);
 	width: min(320px, calc(100vw - 24px));
 	background: none;
 	box-shadow: none;
@@ -58,10 +58,10 @@
 .list {
 	display: flex;
 	flex-direction: column;
-	gap: 8px;
+	gap: var(--space-2);
 	max-height: min(440px, calc(100svh - 160px));
-	margin: -8px;
-	padding: 8px;
+	margin: calc(var(--space-2) * -1);
+	padding: var(--space-2);
 	overflow-y: auto;
 	overscroll-behavior: contain;
 }
@@ -70,7 +70,7 @@
 	flex: none;
 	color: var(--muted-foreground);
 	font-size: var(--text-xxs);
-	line-height: 1.25;
+	line-height: var(--leading-tight);
 	white-space: nowrap;
 	font-variant-numeric: tabular-nums;
 }
diff --git a/apps/ui/src/features/onboarding/onboarding-guide/style.module.css b/apps/ui/src/features/onboarding/onboarding-guide/style.module.css
index 04a8660ca4..96d53bee7b 100644
--- a/apps/ui/src/features/onboarding/onboarding-guide/style.module.css
+++ b/apps/ui/src/features/onboarding/onboarding-guide/style.module.css
@@ -7,8 +7,8 @@
 
 .close {
 	position: absolute;
-	top: 8px;
-	inset-inline-end: 8px;
+	top: var(--space-2);
+	inset-inline-end: var(--space-2);
 	z-index: 1;
 }
 
@@ -37,8 +37,8 @@
    and stays there as the user advances. */
 .content {
 	display: grid;
-	padding: 20px 20px
-		16px;
+	padding: var(--space-5) var(--space-5)
+		var(--space-4);
 	text-align: start;
 }
 
@@ -49,7 +49,7 @@
 .page {
 	display: flex;
 	flex-direction: column;
-	gap: 8px;
+	gap: var(--space-2);
 }
 
 /* Hidden rather than unmounted: an inactive page still has to take up its space
@@ -60,7 +60,7 @@
 }
 
 .title {
-	font-size: 20px;
+	font-size: var(--text-2xl);
 	font-weight: var(--font-weight-semibold);
 	line-height: 1.3;
 	text-wrap: balance;
@@ -69,7 +69,7 @@
 .description {
 	color: var(--muted-foreground);
 	font-size: var(--text-xs);
-	line-height: 1.5;
+	line-height: var(--leading-normal);
 	text-wrap: pretty;
 }
 
@@ -86,9 +86,9 @@
 	display: grid;
 	grid-template-columns: 1fr auto 1fr;
 	align-items: center;
-	gap: 12px;
-	padding: 12px 20px
-		20px;
+	gap: var(--space-3);
+	padding: var(--space-3) var(--space-5)
+		var(--space-5);
 }
 
 .footerStart {
@@ -118,7 +118,7 @@
 	justify-self: center;
 	display: flex;
 	align-items: center;
-	gap: 6px;
+	gap: var(--space-1_5);
 }
 
 .dot {
diff --git a/apps/ui/src/features/onboarding/welcome-dialog/style.module.css b/apps/ui/src/features/onboarding/welcome-dialog/style.module.css
index 73f45e1f06..d2dfc34d48 100644
--- a/apps/ui/src/features/onboarding/welcome-dialog/style.module.css
+++ b/apps/ui/src/features/onboarding/welcome-dialog/style.module.css
@@ -1,32 +1,32 @@
 .dialog {
-	gap: 20px;
-	padding: 24px;
+	gap: var(--space-5);
+	padding: var(--space-6);
 }
 
 .intro {
 	display: flex;
 	flex-direction: column;
-	gap: 6px;
+	gap: var(--space-1_5);
 }
 
 .appIcon {
 	width: 44px;
 	height: 44px;
-	margin-bottom: 8px;
+	margin-bottom: var(--space-2);
 }
 
 .actions {
 	display: flex;
 	flex-direction: column;
-	gap: 8px;
+	gap: var(--space-2);
 }
 
 .perks {
 	display: flex;
 	flex-direction: column;
-	gap: 8px;
-	margin-bottom: 6px;
-	padding-inline-start: 12px;
+	gap: var(--space-2);
+	margin-bottom: var(--space-1_5);
+	padding-inline-start: var(--space-3);
 	border-inline-start: 2px solid var(--border);
 }
 
@@ -39,7 +39,7 @@
 .perksList {
 	display: flex;
 	flex-direction: column;
-	gap: 6px;
+	gap: var(--space-1_5);
 	color: var(--muted-foreground);
 	font-size: var(--text-xs);
 	line-height: 18px;
@@ -48,7 +48,7 @@
 .perksList li {
 	display: flex;
 	align-items: center;
-	gap: 10px;
+	gap: var(--space-2_5);
 }
 
 .perksList svg {
@@ -77,9 +77,9 @@
 .account {
 	display: flex;
 	align-items: center;
-	gap: 10px;
-	margin-bottom: 4px;
-	padding: 8px 8px 8px 12px;
+	gap: var(--space-2_5);
+	margin-bottom: var(--space-1);
+	padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
 	border-radius: var(--radius-md);
 	background: var(--muted);
 }
@@ -112,9 +112,9 @@
 .footer {
 	display: flex;
 	flex-direction: column;
-	gap: 12px;
-	margin-inline: -24px;
-	padding: 16px 24px 0;
+	gap: var(--space-3);
+	margin-inline: calc(var(--space-6) * -1);
+	padding: var(--space-4) var(--space-6) 0;
 	border-top: 1px solid var(--border);
 }
 
diff --git a/apps/ui/src/features/settings/agentic-signin-banner/style.module.css b/apps/ui/src/features/settings/agentic-signin-banner/style.module.css
index 7318d12a90..57f820b0dd 100644
--- a/apps/ui/src/features/settings/agentic-signin-banner/style.module.css
+++ b/apps/ui/src/features/settings/agentic-signin-banner/style.module.css
@@ -3,11 +3,11 @@
 	flex-wrap: wrap;
 	align-items: center;
 	justify-content: space-between;
-	gap: 16px;
-	margin-bottom: calc(20px * 1.25);
-	padding: 16px 20px;
+	gap: var(--space-4);
+	margin-bottom: calc(var(--space-5) * 1.25);
+	padding: var(--space-4) var(--space-5);
 	border: 1px solid var(--border);
-	border-radius: 16px;
+	border-radius: var(--radius-2xl);
 	background: var(--muted);
 }
 
@@ -17,7 +17,7 @@
 }
 
 .heading {
-	margin: 0 0 8px;
+	margin: 0 0 var(--space-2);
 	font-size: var(--text-xs);
 	line-height: 24px;
 	font-weight: var(--font-weight-semibold);
@@ -25,11 +25,11 @@
 }
 
 .benefits {
-	padding-inline-start: 16px;
+	padding-inline-start: var(--space-4);
 	list-style: disc;
 	display: flex;
 	flex-direction: column;
-	gap: 4px;
+	gap: var(--space-1);
 	font-size: var(--text-xxs);
 	line-height: 20px;
 	color: var(--muted-foreground);
diff --git a/apps/ui/src/features/settings/offline-banner/style.module.css b/apps/ui/src/features/settings/offline-banner/style.module.css
index 4b8c12f152..6f8af6faaf 100644
--- a/apps/ui/src/features/settings/offline-banner/style.module.css
+++ b/apps/ui/src/features/settings/offline-banner/style.module.css
@@ -1,15 +1,15 @@
 /* Keep in sync with agentic-signin-banner/style.module.css so the two
    banners read as one component wherever they stack. */
 .root {
-	margin-bottom: calc(20px * 1.25);
-	padding: 16px 20px;
+	margin-bottom: calc(var(--space-5) * 1.25);
+	padding: var(--space-4) var(--space-5);
 	border: 1px solid var(--border);
-	border-radius: 16px;
+	border-radius: var(--radius-2xl);
 	background: var(--muted);
 }
 
 .heading {
-	margin: 0 0 8px;
+	margin: 0 0 var(--space-2);
 	font-size: var(--text-xs);
 	line-height: 24px;
 	font-weight: var(--font-weight-semibold);
diff --git a/apps/ui/src/features/settings/settings-dialog/style.module.css b/apps/ui/src/features/settings/settings-dialog/style.module.css
index 6be1c4780a..b2d95ac2d1 100644
--- a/apps/ui/src/features/settings/settings-dialog/style.module.css
+++ b/apps/ui/src/features/settings/settings-dialog/style.module.css
@@ -1,15 +1,15 @@
 .scopes {
-	margin: 12px 12px 0;
+	margin: var(--space-3) var(--space-3) 0;
 }
 
 .search {
 	width: auto;
-	margin: 12px 12px 0;
+	margin: var(--space-3) var(--space-3) 0;
 }
 
 
 .empty {
-	padding: 16px 20px;
+	padding: var(--space-4) var(--space-5);
 	text-align: center;
 	color: var(--muted-foreground);
 	font-size: var(--text-xs);
@@ -25,8 +25,8 @@
 
 /* The setting picked from the search results. */
 .content :global([data-settings-match]) {
-	margin-inline: -12px;
-	padding-inline: 12px;
+	margin-inline: calc(var(--space-3) * -1);
+	padding-inline: var(--space-3);
 	border-radius: 8px;
 	background: color-mix(in srgb, var(--accent-text) 12%, transparent);
 	transition: background-color var(--motion-duration-layout);
@@ -35,7 +35,7 @@
 .sections {
 	display: flex;
 	flex-direction: column;
-	gap: 32px;
+	gap: var(--space-8);
 }
 
 .error {
diff --git a/apps/ui/src/features/settings/settings-view/style.module.css b/apps/ui/src/features/settings/settings-view/style.module.css
index 955af2f2a2..00887fb643 100644
--- a/apps/ui/src/features/settings/settings-view/style.module.css
+++ b/apps/ui/src/features/settings/settings-view/style.module.css
@@ -1,5 +1,5 @@
 .state {
-	padding: 20px;
+	padding: var(--space-5);
 	color: var(--muted-foreground);
 	font-size: var(--text-xxs);
 	line-height: 24px;
@@ -8,31 +8,31 @@
 .preferencesPanel {
 	display: flex;
 	flex-direction: column;
-	gap: 32px;
+	gap: var(--space-8);
 }
 
 .instructionsHeader {
 	display: flex;
 	align-items: baseline;
 	justify-content: space-between;
-	gap: 8px;
+	gap: var(--space-2);
 }
 
 
 
 .groupLegend {
-	margin-block-end: 2px;
+	margin-block-end: var(--space-0_5);
 }
 
 .groupDescription {
-	margin-block-end: 8px;
-	padding-inline: 20px;
+	margin-block-end: var(--space-2);
+	padding-inline: var(--space-5);
 }
 
 .rowTitle {
 	display: flex;
 	align-items: center;
-	gap: 4px;
+	gap: var(--space-1);
 }
 
 .linkButton {
@@ -54,7 +54,7 @@
 .settingsControl {
 	display: flex;
 	align-items: center;
-	gap: 8px;
+	gap: var(--space-2);
 }
 
 .settingsRow[data-orientation='vertical'] > .settingsControl {
@@ -62,7 +62,7 @@
 	align-items: stretch;
 }
 
-@media ( max-width: 640px ) {
+@media (width < 640px) {
 	.settingsRow[data-orientation='horizontal'] {
 		flex-direction: column;
 		align-items: stretch;
@@ -79,14 +79,14 @@
 	align-items: center;
 	inline-size: 100%;
 	block-size: 36px;
-	padding: 0 10px;
+	padding: 0 var(--space-2_5);
 	border: 1px solid
 		var(--border);
-	border-radius: 9px;
+	border-radius: var(--radius-lg);
 	color: var(--foreground);
 	font-family: var(--font-sans);
 	font-size: var(--text-xs);
-	line-height: 20px;
+	line-height: var(--text-xs--line-height);
 	text-align: start;
 	cursor: pointer;
 }
@@ -118,14 +118,14 @@
 
 .cliTooltip {
 	max-inline-size: 280px;
-	line-height: 20px;
+	line-height: var(--text-sm--line-height);
 }
 
 .errorMessage {
-	margin-block-end: 12px;
-	padding: 8px 12px;
+	margin-block-end: var(--space-3);
+	padding: var(--space-2) var(--space-3);
 	border: 1px solid color-mix( in srgb, var(--destructive) 35%, transparent );
-	border-radius: 6px;
+	border-radius: var(--radius-lg);
 	background: color-mix(
 		in srgb,
 		var(--destructive) 8%,
@@ -140,15 +140,15 @@
 
 .codeBlockCopyButton {
 	position: absolute;
-	inset-block-start: 6px;
-	inset-inline-end: 6px;
+	inset-block-start: var(--space-1_5);
+	inset-inline-end: var(--space-1_5);
 	z-index: 1;
 }
 
 .wapuuScoreHeading {
 	display: inline-flex;
 	align-items: center;
-	gap: 4px;
+	gap: var(--space-1);
 }
 
 .wapuuScoreIcon {
@@ -157,7 +157,7 @@
 
 
 .wapuuScoreMeter {
-	gap: 8px;
+	gap: var(--space-2);
 }
 
 
@@ -171,7 +171,7 @@
 .unavailableBar {
 	inline-size: 100%;
 	block-size: 4px;
-	border-radius: 999px;
+	border-radius: var(--radius-full);
 	background: repeating-linear-gradient(
 			135deg,
 			color-mix( in srgb, var(--muted-foreground) 22%, transparent ) 0
@@ -182,7 +182,7 @@
 }
 
 .meterRow {
-	gap: 8px;
+	gap: var(--space-2);
 }
 
 .meterSummary {
@@ -190,15 +190,15 @@
 	flex-wrap: wrap;
 	align-items: center;
 	justify-content: space-between;
-	gap: 4px 16px;
+	gap: var(--space-1) var(--space-4);
 }
 
 .meterSummary > [data-slot='field-label'] {
-	gap: 4px;
+	gap: var(--space-1);
 }
 
 .meterSummary > [data-slot='field-label'] > button {
-	margin-block: -4px;
+	margin-block: calc(var(--space-1) * -1);
 }
 
 /* Escalation colors for the AI credits meter (80% / 90% / exhausted). The
@@ -220,7 +220,7 @@
 
 .aiCreditsTrack {
 	block-size: 4px;
-	border-radius: 999px;
+	border-radius: var(--radius-full);
 	background: linear-gradient(
 			90deg,
 			color-mix( in srgb, var(--accent-text) 32%, transparent ),
@@ -236,8 +236,8 @@
 
 
 .expiredToggle {
-	margin-inline: 16px;
-	margin-block-end: 16px;
+	margin-inline: var(--space-4);
+	margin-block-end: var(--space-4);
 }
 
 
@@ -272,7 +272,7 @@
 	width: 176px;
 	overflow: hidden;
 	border: 1px solid var(--border);
-	border-radius: 12px;
+	border-radius: var(--radius-xl);
 	background: var(--chrome);
 	box-shadow: var(--shadow-xs);
 }
@@ -280,15 +280,15 @@
 .previewIllustrationBar {
 	display: flex;
 	justify-content: flex-end;
-	padding: 8px 12px;
+	padding: var(--space-2) var(--space-3);
 	border-bottom: 1px solid
 		var(--border);
 }
 
 .previewIllustrationButton {
-	padding: 2px 8px;
+	padding: var(--space-0_5) var(--space-2);
 	border: 1px solid var(--border);
-	border-radius: 6px;
+	border-radius: var(--radius-lg);
 	box-shadow: 0 0 0 3px
 		color-mix( in srgb, var(--accent) 25%, transparent );
 	font-size: var(--text-xxs);
@@ -308,13 +308,13 @@
 
 .pathForm {
 	display: flex;
-	gap: 8px;
+	gap: var(--space-2);
 }
 
 .keyForm {
 	display: flex;
 	align-items: center;
-	gap: 8px;
+	gap: var(--space-2);
 }
 
 .settingsControl:has( > .colorControl, > .sliderControl ) {
@@ -326,7 +326,7 @@
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
-	gap: 6px;
+	gap: var(--space-1_5);
 	width: 100%;
 }
 
@@ -334,7 +334,7 @@
 	flex-shrink: 0;
 	width: 24px;
 	height: 24px;
-	border-radius: 9999px;
+	border-radius: var(--radius-full);
 	cursor: pointer;
 }
 
diff --git a/apps/ui/src/features/settings/site-settings-view/style.module.css b/apps/ui/src/features/settings/site-settings-view/style.module.css
index 45c484f3fc..1aa20040d0 100644
--- a/apps/ui/src/features/settings/site-settings-view/style.module.css
+++ b/apps/ui/src/features/settings/site-settings-view/style.module.css
@@ -1,12 +1,12 @@
 .form {
 	display: flex;
 	flex-direction: column;
-	gap: 32px;
+	gap: var(--space-8);
 }
 
 .submitError {
-	padding: 10px 12px;
-	border-radius: 4px;
+	padding: var(--space-2_5) var(--space-3);
+	border-radius: var(--radius-lg);
 	border: 1px solid color-mix(in oklab, var(--destructive) 35%, transparent);
 	background: var(--destructive-surface);
 	color: var(--destructive);
@@ -16,7 +16,7 @@
 .field {
 	display: flex;
 	align-items: center;
-	gap: 4px;
+	gap: var(--space-1);
 	min-width: 224px;
 	max-width: 100%;
 }
@@ -27,7 +27,7 @@
 
 .debugLogAction {
 	display: flex;
-	margin-block-start: 4px;
+	margin-block-start: var(--space-1);
 }
 
 .busy {
diff --git a/apps/ui/src/features/settings/wapuu-world/style.module.css b/apps/ui/src/features/settings/wapuu-world/style.module.css
index 37a336ba16..657a4db616 100644
--- a/apps/ui/src/features/settings/wapuu-world/style.module.css
+++ b/apps/ui/src/features/settings/wapuu-world/style.module.css
@@ -22,8 +22,8 @@
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	gap: 8px;
-	padding: 6px 12px;
+	gap: var(--space-2);
+	padding: var(--space-1_5) var(--space-3);
 	background: var(--accent);
 	border-radius: 4px 4px 0 0;
 }
@@ -31,7 +31,7 @@
 .title {
 	display: flex;
 	align-items: center;
-	gap: 6px;
+	gap: var(--space-1_5);
 	color: var(--accent-foreground);
 	font-family: monospace;
 	font-weight: bold;
@@ -45,14 +45,14 @@
 .titleActions {
 	display: flex;
 	align-items: center;
-	gap: 4px;
+	gap: var(--space-1);
 	color: color-mix(in srgb, var(--accent-foreground) 80%, transparent);
 	font-family: monospace;
-	font-size: 11px;
+	font-size: var(--text-2xs);
 }
 
 .closeButton {
-	margin-inline-start: 8px;
+	margin-inline-start: var(--space-2);
 	padding: 1px 7px;
 	border-radius: 4px;
 	background: color-mix(in srgb, var(--accent-foreground) 20%, transparent);
@@ -68,11 +68,11 @@
 }
 
 .controlsHint {
-	padding: 4px 12px;
+	padding: var(--space-1) var(--space-3);
 	background: var(--accent);
 	border-radius: 0 0 4px 4px;
 	color: color-mix(in srgb, var(--accent-foreground) 80%, transparent);
 	font-family: monospace;
-	font-size: 11px;
+	font-size: var(--text-2xs);
 	text-align: center;
 }
diff --git a/apps/ui/src/features/sharing/share-dialog/style.module.css b/apps/ui/src/features/sharing/share-dialog/style.module.css
index cb3b4ad064..0d6cad1ea2 100644
--- a/apps/ui/src/features/sharing/share-dialog/style.module.css
+++ b/apps/ui/src/features/sharing/share-dialog/style.module.css
@@ -9,7 +9,7 @@
 	inset-inline-end: -1px;
 	width: 7px;
 	height: 7px;
-	border-radius: 50%;
+	border-radius: var(--radius-full);
 	background: var(--accent);
 	box-shadow: 0 0 0 2px var(--chat);
 	pointer-events: none;
@@ -18,14 +18,14 @@
 .loading {
 	display: flex;
 	align-items: center;
-	gap: 8px;
+	gap: var(--space-2);
 }
 
 .error {
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
-	gap: 8px;
+	gap: var(--space-2);
 	color: var(--destructive);
 }
 
@@ -33,9 +33,9 @@
 	display: flex;
 	min-width: 0;
 	flex-direction: column;
-	gap: 8px;
+	gap: var(--space-2);
 	font-size: var(--text-sm);
-	line-height: 20px;
+	line-height: var(--text-sm--line-height);
 }
 
 .previewSelect {
@@ -84,7 +84,7 @@
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	gap: 8px;
+	gap: var(--space-2);
 }
 
 .expiry p {
@@ -95,19 +95,19 @@
 .confirm {
 	display: flex;
 	flex-direction: column;
-	gap: 12px;
+	gap: var(--space-3);
 }
 
 .confirmActions {
 	display: flex;
 	justify-content: flex-end;
-	gap: 8px;
+	gap: var(--space-2);
 }
 
 .inlineForm {
 	display: flex;
 	flex-direction: column;
-	gap: 8px;
+	gap: var(--space-2);
 }
 
 .notice {
diff --git a/apps/ui/src/features/sidebar/collapsed-site-switcher/style.module.css b/apps/ui/src/features/sidebar/collapsed-site-switcher/style.module.css
index 540bc67dd1..c29598ab2f 100644
--- a/apps/ui/src/features/sidebar/collapsed-site-switcher/style.module.css
+++ b/apps/ui/src/features/sidebar/collapsed-site-switcher/style.module.css
@@ -14,12 +14,12 @@
 .scrollArea {
 	max-height: min(236px, calc(100vh - 80px));
 	overflow-y: auto;
-	padding-block: 12px;
+	padding-block: var(--space-3);
 }
 
 /* Outranks site-list's own `.root` padding shorthand. */
 .scrollArea .siteList {
-	padding-block-end: 8px;
+	padding-block-end: var(--space-2);
 }
 
 .surface svg {
@@ -31,12 +31,12 @@
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	gap: 8px;
+	gap: var(--space-2);
 	flex-shrink: 0;
 	width: 100%;
-	padding-block: 12px;
-	padding-inline-start: 20px;
-	padding-inline-end: 12px;
+	padding-block: var(--space-3);
+	padding-inline-start: var(--space-5);
+	padding-inline-end: var(--space-3);
 	border-block-start: 1px solid var(--border);
 	font-size: var(--text-xxs);
 	cursor: pointer;
diff --git a/apps/ui/src/features/sidebar/reorderable-list/style.module.css b/apps/ui/src/features/sidebar/reorderable-list/style.module.css
index 32bb79060b..a3873b16be 100644
--- a/apps/ui/src/features/sidebar/reorderable-list/style.module.css
+++ b/apps/ui/src/features/sidebar/reorderable-list/style.module.css
@@ -37,7 +37,7 @@
 	inset-inline-start: 0;
 	width: 8px;
 	height: 8px;
-	border-radius: 50%;
+	border-radius: var(--radius-full);
 	translate: -50% -50%;
 }
 
diff --git a/apps/ui/src/features/sidebar/sidebar-header/style.module.css b/apps/ui/src/features/sidebar/sidebar-header/style.module.css
index cba8cd3897..3afc444897 100644
--- a/apps/ui/src/features/sidebar/sidebar-header/style.module.css
+++ b/apps/ui/src/features/sidebar/sidebar-header/style.module.css
@@ -4,10 +4,10 @@
 	--toggle-start: var(--traffic-light-space);
 	display: flex;
 	align-items: center;
-	gap: 4px;
+	gap: var(--space-1);
 	height: var(--band-height);
 	flex-shrink: 0;
-	padding-inline: var(--traffic-light-space) 12px;
+	padding-inline: var(--traffic-light-space) var(--space-3);
 	box-shadow: inset 0 calc(-1 * 1px) 0
 		var(--border);
 	-webkit-app-region: drag;
@@ -24,7 +24,7 @@
 .flush {
 	--toggle-start: 12px;
 
-	padding-inline-start: 12px;
+	padding-inline-start: var(--space-3);
 }
 
 /* The toggle stays in the window's corner while the sidebar slides out, and
diff --git a/apps/ui/src/features/sidebar/sidebar-layout/style.module.css b/apps/ui/src/features/sidebar/sidebar-layout/style.module.css
index 561a18fde9..7d705deb8f 100644
--- a/apps/ui/src/features/sidebar/sidebar-layout/style.module.css
+++ b/apps/ui/src/features/sidebar/sidebar-layout/style.module.css
@@ -61,7 +61,7 @@
 	position: sticky;
 	bottom: 0;
 	z-index: 1;
-	padding-top: 24px;
+	padding-top: var(--space-6);
 	background: linear-gradient(to bottom, transparent, var(--studio-sidebar-bg) 32px);
 	pointer-events: none;
 	-webkit-app-region: no-drag;
@@ -95,7 +95,7 @@
 	top: var(--band-height);
 	bottom: 0;
 	inset-inline-start: 0;
-	z-index: 40;
+	z-index: var(--z-sidebar);
 }
 
 .sidebarOverlay .sidebar {
@@ -106,7 +106,7 @@
 .overlayBackdrop {
 	position: absolute;
 	inset: var(--band-height) 0 0;
-	z-index: 39;
+	z-index: calc(var(--z-sidebar) - 1);
 	-webkit-app-region: no-drag;
 }
 
@@ -121,7 +121,7 @@
 
 /* Above the panels so the band's separator reads across them. */
 .main::before {
-	z-index: 30;
+	z-index: var(--z-band);
 	transition: opacity var(--motion-duration-layout) var(--motion-ease-layout);
 }
 
@@ -135,9 +135,9 @@
    above main (a later flex sibling) so its focus line sits on the border. */
 .resizeHandle {
 	position: relative;
-	z-index: 20;
+	z-index: var(--z-overlay);
 	flex-shrink: 0;
-	margin-inline-end: -8px;
+	margin-inline-end: calc(var(--space-2) * -1);
 	justify-content: flex-start;
 }
 
@@ -154,6 +154,6 @@
 }
 
 .sidebarCards {
-	padding: 0 8px 8px;
+	padding: 0 var(--space-2) var(--space-2);
 }
 
diff --git a/apps/ui/src/features/sidebar/sidebar-toggle/style.module.css b/apps/ui/src/features/sidebar/sidebar-toggle/style.module.css
index 9473b160a8..2cd027e6f2 100644
--- a/apps/ui/src/features/sidebar/sidebar-toggle/style.module.css
+++ b/apps/ui/src/features/sidebar/sidebar-toggle/style.module.css
@@ -21,7 +21,7 @@
 	display: inline-flex;
 	flex-shrink: 0;
 	width: 0;
-	margin-inline-end: calc(-1 * 4px);
+	margin-inline-end: calc(-1 * var(--space-1));
 	overflow: hidden;
 	opacity: 0;
 	transition:
diff --git a/apps/ui/src/features/sidebar/site-list/style.module.css b/apps/ui/src/features/sidebar/site-list/style.module.css
index 4152d7b21e..c6963762f7 100644
--- a/apps/ui/src/features/sidebar/site-list/style.module.css
+++ b/apps/ui/src/features/sidebar/site-list/style.module.css
@@ -15,13 +15,13 @@
 	   resolved against whatever theme scope wraps the list. */
 	--sidebar-row-background: var(--hover);
 
-	padding: 12px 12px
-		20px;
+	padding: var(--space-3) var(--space-3)
+		var(--space-5);
 	display: flex;
 	flex-direction: column;
-	gap: 4px;
+	gap: var(--space-1);
 	font-size: var(--text-sm);
-	line-height: 20px;
+	line-height: var(--text-sm--line-height);
 	user-select: none;
 	-webkit-app-region: no-drag;
 }
@@ -37,7 +37,7 @@
    carry only the site rows' visual treatment. */
 
 .siteDragWrapper {
-	border-radius: 6px;
+	border-radius: var(--radius-md);
 }
 
 .siteDragPreview {
@@ -54,7 +54,7 @@
 	flex-direction: column;
 	/* Keep scrollIntoView targets clear of the sidebar's sticky header and
 	   footer, which paint over the scrollport's edges. */
-	scroll-margin-block: 64px;
+	scroll-margin-block: var(--space-16);
 }
 
 .siteHeader {
@@ -106,7 +106,7 @@
 	right: -1.5px;
 	width: 7px;
 	height: 7px;
-	border-radius: 50%;
+	border-radius: var(--radius-full);
 	background-color: var(--accent);
 }
 
@@ -136,7 +136,7 @@
 	pointer-events: none;
 	transform: scale(0.75);
 	transition: inline-size 160ms ease, flex-basis 160ms ease, margin-inline-start 160ms ease,
-		margin-inline-end 160ms ease, opacity 120ms ease, transform 160ms ease;
+		margin-inline-end 160ms ease, opacity var(--motion-duration-feedback) ease, transform 160ms ease;
 }
 
 .siteAgentActivitySlotVisible {
@@ -183,7 +183,7 @@
 .siteAgentActivitySyncDot {
 	inline-size: 3px;
 	block-size: 3px;
-	border-radius: 999px;
+	border-radius: var(--radius-full);
 	background-color: currentColor;
 	animation-name: siteAgentSyncDotBounce;
 	animation-duration: 760ms;
@@ -214,10 +214,10 @@
    stays visible. The row's text makes room for them. */
 .siteActions {
 	position: absolute;
-	inset-block-start: 2px;
-	inset-inline-end: 2px;
+	inset-block-start: var(--space-0_5);
+	inset-inline-end: var(--space-0_5);
 	display: flex;
-	gap: 2px;
+	gap: var(--space-0_5);
 }
 
 .siteActions .rowAction {
@@ -286,18 +286,18 @@
 }
 
 .empty {
-	padding: 4px var(--site-list-row-padding);
+	padding: var(--space-1) var(--site-list-row-padding);
 	color: var(--muted-foreground);
 }
 
 .group {
 	display: flex;
 	flex-direction: column;
-	padding-block-start: 4px;
+	padding-block-start: var(--space-1);
 }
 
 .group[data-open] {
-	padding-block-end: 12px;
+	padding-block-end: var(--space-3);
 }
 
 .groupHeader {
@@ -313,7 +313,7 @@
 	display: inline-flex;
 	flex: 1;
 	align-items: center;
-	gap: 4px;
+	gap: var(--space-1);
 	height: 100%;
 	padding: 0 var(--site-list-row-padding);
 	border-radius: var(--radius-md);
@@ -328,7 +328,7 @@
 }
 
 .groupToggle:focus-visible {
-	outline: 2px solid var(--ring);
+	outline: var(--focus-width) solid var(--ring);
 	outline-offset: -2px;
 }
 
@@ -355,7 +355,7 @@
 }
 
 .site .chats {
-	padding-block: 1px 8px;
+	padding-block: 1px var(--space-2);
 }
 
 .groupActions {
@@ -448,7 +448,7 @@
 
 .chatActions {
 	position: absolute;
-	inset-inline-end: 2px;
+	inset-inline-end: var(--space-0_5);
 	display: flex;
 	opacity: 0;
 	transition: opacity var(--motion-duration-surface) var(--motion-ease-enter);
@@ -480,10 +480,10 @@
 /* Sits in the archive button's slot, which takes over on hover. */
 .unreadDot {
 	position: absolute;
-	inset-inline-end: calc(2px + (var(--site-list-action-size) - 7px) / 2);
+	inset-inline-end: calc(var(--space-0_5) + (var(--site-list-action-size) - 7px) / 2);
 	width: 7px;
 	height: 7px;
-	border-radius: 50%;
+	border-radius: var(--radius-full);
 	background-color: var(--accent);
 }
 
diff --git a/apps/ui/src/features/sites/add-site-dialog/blueprint-gallery.module.css b/apps/ui/src/features/sites/add-site-dialog/blueprint-gallery.module.css
index cd382dd7f9..0e2ecf1216 100644
--- a/apps/ui/src/features/sites/add-site-dialog/blueprint-gallery.module.css
+++ b/apps/ui/src/features/sites/add-site-dialog/blueprint-gallery.module.css
@@ -1,7 +1,7 @@
 .root {
 	display: flex;
 	flex-direction: column;
-	gap: 24px;
+	gap: var(--space-6);
 }
 
 .notice {
@@ -11,7 +11,7 @@
 .grid {
 	display: grid;
 	grid-template-columns: 1fr;
-	gap: 28px 24px;
+	gap: var(--space-7) var(--space-6);
 }
 
 @container (min-width: 384px) {
@@ -23,7 +23,7 @@
 .card {
 	display: flex;
 	flex-direction: column;
-	gap: 8px;
+	gap: var(--space-2);
 	min-width: 0;
 	border: 1px solid transparent;
 	color: var(--foreground);
@@ -55,7 +55,7 @@
 }
 
 .card:focus-visible :is(.thumbnail, .blank) {
-	outline: 2px solid var(--ring);
+	outline: var(--focus-width) solid var(--ring);
 	outline-offset: 2px;
 }
 
@@ -122,17 +122,17 @@
 	display: flex;
 	align-items: center;
 	height: 32px;
-	padding: 0 10px;
+	padding: 0 var(--space-2_5);
 	border-radius: var(--radius-md);
 	background: var(--accent);
 	color: var(--accent-foreground);
 	font-size: var(--text-xs);
 	font-weight: var(--font-weight-medium);
-	line-height: 20px;
+	line-height: var(--text-xs--line-height);
 }
 
 .details {
 	display: flex;
 	flex-direction: column;
-	gap: 24px;
+	gap: var(--space-6);
 }
diff --git a/apps/ui/src/features/sites/add-site-dialog/connect-panel.module.css b/apps/ui/src/features/sites/add-site-dialog/connect-panel.module.css
index be19bcd88f..195147c948 100644
--- a/apps/ui/src/features/sites/add-site-dialog/connect-panel.module.css
+++ b/apps/ui/src/features/sites/add-site-dialog/connect-panel.module.css
@@ -1,11 +1,11 @@
 .page {
 	display: flex;
 	flex-direction: column;
-	gap: 24px;
+	gap: var(--space-6);
 	width: 100%;
 	max-width: 448px;
 	margin-inline: auto;
-	padding-block: 16px;
+	padding-block: var(--space-4);
 }
 
 .intro {
@@ -15,19 +15,19 @@
 .signedOut {
 	display: flex;
 	flex-direction: column;
-	gap: 24px;
+	gap: var(--space-6);
 }
 
 .benefits {
 	display: grid;
-	gap: 12px;
+	gap: var(--space-3);
 	color: var(--muted-foreground);
 }
 
 .benefits li {
 	display: flex;
 	align-items: center;
-	gap: 12px;
+	gap: var(--space-3);
 }
 
 .benefits svg {
@@ -39,7 +39,7 @@
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
-	gap: 12px;
+	gap: var(--space-3);
 }
 
 .state h2 {
@@ -56,7 +56,7 @@
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
-	gap: 8px;
+	gap: var(--space-2);
 }
 
 .search {
@@ -66,24 +66,24 @@
 .helperLinks {
 	display: flex;
 	align-items: center;
-	gap: 2px;
+	gap: var(--space-0_5);
 	color: var(--muted-foreground);
 }
 
 .helperLinks button {
-	padding-inline: 2px;
+	padding-inline: var(--space-0_5);
 }
 
 .sections {
 	display: flex;
 	flex-direction: column;
-	gap: 32px;
+	gap: var(--space-8);
 }
 
 .section {
 	display: flex;
 	flex-direction: column;
-	gap: 12px;
+	gap: var(--space-3);
 }
 
 .sectionHeader h2 {
@@ -92,7 +92,7 @@
 }
 
 .sectionHeader p {
-	margin: 2px 0 0;
+	margin: var(--space-0_5) 0 0;
 	color: var(--muted-foreground);
 	font-size: var(--text-xs);
 }
@@ -100,19 +100,19 @@
 .siteList {
 	display: flex;
 	flex-direction: column;
-	gap: 8px;
+	gap: var(--space-2);
 }
 
 .site {
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
-	gap: 4px;
+	gap: var(--space-1);
 	min-width: 0;
 }
 
 .siteRow {
-	gap: 12px;
+	gap: var(--space-3);
 }
 
 .siteThumb {
@@ -142,15 +142,15 @@
 .badges {
 	display: flex;
 	flex: none;
-	gap: 4px;
+	gap: var(--space-1);
 }
 
 .siteStatus {
-	padding-inline: 2px;
+	padding-inline: var(--space-0_5);
 	color: var(--muted-foreground);
 	font-size: var(--text-xs);
 }
 
 .siteAction {
-	padding-inline: 2px;
+	padding-inline: var(--space-0_5);
 }
diff --git a/apps/ui/src/features/sites/add-site-dialog/create-panel.module.css b/apps/ui/src/features/sites/add-site-dialog/create-panel.module.css
index c2e7286486..f0a186cc96 100644
--- a/apps/ui/src/features/sites/add-site-dialog/create-panel.module.css
+++ b/apps/ui/src/features/sites/add-site-dialog/create-panel.module.css
@@ -1,5 +1,5 @@
 .blueprint {
-	margin-top: 32px;
+	margin-top: var(--space-8);
 }
 
 .summary {
@@ -11,15 +11,15 @@
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	gap: 16px;
-	margin-bottom: 12px;
+	gap: var(--space-4);
+	margin-bottom: var(--space-3);
 }
 
 /* A quiet section label, so the Blueprint's own name below stays dominant. */
 .summaryHeader h2 {
 	color: var(--muted-foreground);
 	font-size: var(--text-xxs);
-	font-weight: 500;
+	font-weight: var(--font-weight-medium);
 }
 
 .summaryRemove {
@@ -34,7 +34,7 @@
 
 .summaryRemove:focus-visible {
 	border-radius: 2px;
-	outline: 2px solid var(--ring);
+	outline: var(--focus-width) solid var(--ring);
 	outline-offset: 2px;
 }
 
@@ -42,7 +42,7 @@
 	display: grid;
 	grid-template-columns: 112px minmax( 0, 1fr );
 	align-items: start;
-	gap: 16px;
+	gap: var(--space-4);
 }
 
 .summaryOverviewWithoutImage {
@@ -54,7 +54,7 @@
 	width: 112px;
 	aspect-ratio: 16 / 10;
 	overflow: hidden;
-	border-radius: 6px;
+	border-radius: var(--radius-sm);
 	background: var(--chat);
 }
 
@@ -75,7 +75,7 @@
 }
 
 .summaryExcerpt {
-	margin: 4px 0 0;
+	margin: var(--space-1) 0 0;
 	color: var(--muted-foreground);
 	font-size: var(--text-xxs);
 	line-height: 1.4;
@@ -84,12 +84,12 @@
 .summaryPackages {
 	display: grid;
 	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
-	gap: 24px;
-	margin-top: 24px;
+	gap: var(--space-6);
+	margin-top: var(--space-6);
 }
 
 .summaryPackageGroup h3 {
-	margin: 0 0 6px;
+	margin: 0 0 var(--space-1_5);
 	color: var(--foreground);
 	font-size: var(--text-xxs);
 	font-weight: var(--font-weight-semibold);
@@ -100,7 +100,7 @@
 }
 
 .summaryPackageGroup ul {
-	padding-left: 18px;
+	padding-left: var(--space-4_5);
 	list-style: disc;
 }
 
@@ -121,11 +121,11 @@
 
 .summaryPackageGroup a:focus-visible {
 	border-radius: 2px;
-	outline: 2px solid var(--ring);
+	outline: var(--focus-width) solid var(--ring);
 	outline-offset: 2px;
 }
 
-@media ( max-width: 520px ) {
+@media (width < 640px) {
 	.summaryOverview,
 	.summaryPackages {
 		grid-template-columns: 1fr;
diff --git a/apps/ui/src/features/sites/add-site-dialog/import-panel.module.css b/apps/ui/src/features/sites/add-site-dialog/import-panel.module.css
index b210a81221..1b0976f89d 100644
--- a/apps/ui/src/features/sites/add-site-dialog/import-panel.module.css
+++ b/apps/ui/src/features/sites/add-site-dialog/import-panel.module.css
@@ -8,10 +8,10 @@
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	gap: 16px;
+	gap: var(--space-4);
 	max-width: 512px;
-	margin: 16px auto 0;
-	padding: 40px;
+	margin: var(--space-4) auto 0;
+	padding: var(--space-10);
 	border: 1px dashed var(--border);
 	border-radius: var(--radius-xl);
 	text-align: center;
@@ -28,7 +28,7 @@
 
 .dropHelp {
 	max-width: 512px;
-	margin: 12px auto 0;
+	margin: var(--space-3) auto 0;
 	color: var(--muted-foreground);
 	font-size: var(--text-xxs);
 	line-height: 1.3;
@@ -41,5 +41,5 @@
 
 .dropError {
 	max-width: 512px;
-	margin: 24px auto 0;
+	margin: var(--space-6) auto 0;
 }
diff --git a/apps/ui/src/features/sites/add-site-dialog/style.module.css b/apps/ui/src/features/sites/add-site-dialog/style.module.css
index cc81856ef6..78c4a2acdf 100644
--- a/apps/ui/src/features/sites/add-site-dialog/style.module.css
+++ b/apps/ui/src/features/sites/add-site-dialog/style.module.css
@@ -3,18 +3,18 @@
 	flex: none;
 	align-items: center;
 	height: 36px;
-	margin: 16px 0 0;
-	padding: 0 8px;
+	margin: var(--space-4) 0 0;
+	padding: 0 var(--space-2);
 	color: var(--muted-foreground);
 	font-size: var(--text-sm);
 	font-weight: var(--font-weight-medium);
-	line-height: 20px;
+	line-height: var(--text-sm--line-height);
 }
 
 .leading {
 	display: flex;
 	align-items: center;
-	gap: 12px;
+	gap: var(--space-3);
 }
 
 .title {
@@ -31,7 +31,7 @@
 .progress {
 	display: flex;
 	align-items: center;
-	gap: 8px;
+	gap: var(--space-2);
 	overflow: hidden;
 	color: var(--muted-foreground);
 	font-size: var(--text-xs);
diff --git a/apps/ui/src/features/sites/blueprint-upload/style.module.css b/apps/ui/src/features/sites/blueprint-upload/style.module.css
index be510c64f2..79c1e68106 100644
--- a/apps/ui/src/features/sites/blueprint-upload/style.module.css
+++ b/apps/ui/src/features/sites/blueprint-upload/style.module.css
@@ -13,7 +13,7 @@
 
 .action {
 	color: var(--accent-text);
-	font-weight: 500;
+	font-weight: var(--font-weight-medium);
 	cursor: pointer;
 }
 
@@ -30,14 +30,14 @@
 .fullScreenDrop {
 	position: fixed;
 	inset: 0;
-	z-index: 20;
+	z-index: var(--z-overlay);
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	border: 2px dashed var(--accent);
 	background: var(--chrome);
 	color: var(--foreground);
-	font-size: 1.25rem;
+	font-size: var(--text-2xl);
 	font-weight: var(--font-weight-semibold);
 	pointer-events: none;
 }
diff --git a/apps/ui/src/features/sites/create-site-form/style.module.css b/apps/ui/src/features/sites/create-site-form/style.module.css
index a90a6fe891..5008281a1a 100644
--- a/apps/ui/src/features/sites/create-site-form/style.module.css
+++ b/apps/ui/src/features/sites/create-site-form/style.module.css
@@ -5,19 +5,19 @@
 .panel {
 	display: flex;
 	flex-direction: column;
-	gap: 24px;
+	gap: var(--space-6);
 }
 
 .actions {
 	display: flex;
 	justify-content: flex-end;
-	gap: 8px;
-	margin-top: 28px;
+	gap: var(--space-2);
+	margin-top: var(--space-7);
 }
 
 .pathRow {
 	display: flex;
-	gap: 8px;
+	gap: var(--space-2);
 }
 
 .advancedToggle {
@@ -27,7 +27,7 @@
 .advancedCollapse {
 	display: grid;
 	grid-template-rows: 0fr;
-	margin-top: -24px;
+	margin-top: calc(var(--space-6) * -1);
 	transition:
 		grid-template-rows var(--motion-duration-layout) var(--motion-ease-layout),
 		margin-top var(--motion-duration-layout) var(--motion-ease-layout);
@@ -41,8 +41,8 @@
 .advancedCollapseInner {
 	overflow: hidden;
 	min-height: 0;
-	padding: 4px;
-	margin: -4px;
+	padding: var(--space-1);
+	margin: calc(var(--space-1) * -1);
 }
 
 @media ( prefers-reduced-motion: reduce ) {
@@ -52,42 +52,42 @@
 }
 
 .advancedErrorCount {
-	margin-left: 8px;
+	margin-left: var(--space-2);
 	font-size: var(--text-xxs);
-	font-weight: 500;
+	font-weight: var(--font-weight-medium);
 	color: var(--destructive);
 }
 
 .submitErrorDetails {
-	margin-top: 6px;
+	margin-top: var(--space-1_5);
 }
 
 .submitErrorDetails summary {
 	width: fit-content;
-	font-weight: 500;
+	font-weight: var(--font-weight-medium);
 	cursor: pointer;
 }
 
 .submitErrorDetails pre {
 	max-height: 160px;
-	padding-top: 6px;
+	padding-top: var(--space-1_5);
 	overflow: auto;
 	font-family: var(--font-mono);
-	font-size: 11px;
+	font-size: var(--text-2xs);
 	white-space: pre-wrap;
 	overflow-wrap: anywhere;
 }
 
 .panelFooter {
-	padding-top: 24px;
+	padding-top: var(--space-6);
 	border-top: 1px solid var(--border);
 }
 
 .source {
 	display: flex;
 	align-items: center;
-	gap: 12px;
-	padding: 12px;
+	gap: var(--space-3);
+	padding: var(--space-3);
 	border: 1px solid var(--border);
 	border-radius: var(--radius-lg);
 	background: var(--background);
diff --git a/apps/ui/src/features/sites/design-system-view/style.module.css b/apps/ui/src/features/sites/design-system-view/style.module.css
index 33c477166e..b42fa270e1 100644
--- a/apps/ui/src/features/sites/design-system-view/style.module.css
+++ b/apps/ui/src/features/sites/design-system-view/style.module.css
@@ -3,11 +3,11 @@
 	--ds-hairline: color-mix(in srgb, var(--ds-text) 18%, transparent);
 	container-type: inline-size;
 	min-height: 100%;
-	padding: 48px clamp(20px, 5cqi, 64px) 64px;
+	padding: var(--space-12) clamp(var(--space-5), 5cqi, var(--space-16)) var(--space-16);
 	background-color: var(--ds-background);
 	color: var(--ds-text);
-	font-size: 15px;
-	line-height: 1.5;
+	font-size: var(--text-md);
+	line-height: var(--leading-normal);
 }
 
 /* The app styles headings with its own theme color. */
@@ -18,8 +18,8 @@
 .header {
 	display: flex;
 	flex-direction: column;
-	gap: 12px;
-	margin-bottom: 40px;
+	gap: var(--space-3);
+	margin-bottom: var(--space-10);
 }
 
 .eyebrow {
@@ -45,8 +45,8 @@
 	display: flex;
 	flex-wrap: wrap;
 	align-items: baseline;
-	gap: 4px 16px;
-	margin: 8px 0 0;
+	gap: var(--space-1) var(--space-4);
+	margin: var(--space-2) 0 0;
 	font-size: var(--text-xs);
 	opacity: 0.75;
 }
@@ -61,9 +61,9 @@
 
 .driftList {
 	display: grid;
-	gap: 6px;
-	margin: 12px 0 0;
-	padding: 12px 14px;
+	gap: var(--space-1_5);
+	margin: var(--space-3) 0 0;
+	padding: var(--space-3) var(--space-3_5);
 	border: 1px solid var(--ds-hairline);
 	border-radius: 8px;
 }
@@ -71,7 +71,7 @@
 .driftList div {
 	display: flex;
 	flex-wrap: wrap;
-	gap: 4px 12px;
+	gap: var(--space-1) var(--space-3);
 }
 
 .driftList dt {
@@ -80,7 +80,7 @@
 
 .driftList .driftActions {
 	display: flex;
-	gap: 12px;
+	gap: var(--space-3);
 	margin-inline-start: auto;
 }
 
@@ -102,7 +102,7 @@
 .sections {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
-	gap: 40px 48px;
+	gap: var(--space-10) var(--space-12);
 }
 
 .section {
@@ -116,8 +116,8 @@
 }
 
 .sectionTitle {
-	margin: 0 0 16px;
-	padding-top: 8px;
+	margin: 0 0 var(--space-4);
+	padding-top: var(--space-2);
 	border-top: 1px solid var(--ds-hairline);
 	font-size: var(--text-xxs);
 	font-weight: var(--font-weight-semibold);
@@ -130,7 +130,7 @@
 	display: flex;
 	flex-wrap: wrap;
 	align-items: flex-end;
-	gap: 32px;
+	gap: var(--space-8);
 }
 
 .aa {
@@ -144,7 +144,7 @@
 }
 
 .specimen figcaption {
-	margin-top: 12px;
+	margin-top: var(--space-3);
 	font-size: var(--text-xs);
 	opacity: 0.65;
 }
@@ -152,7 +152,7 @@
 .palette {
 	display: flex;
 	flex-direction: column;
-	gap: 4px;
+	gap: var(--space-1);
 	height: 320px;
 	border-radius: min(var(--ds-small), 10px);
 	overflow: hidden;
@@ -161,7 +161,7 @@
 .lead {
 	flex: 2;
 	display: flex;
-	gap: 4px;
+	gap: var(--space-1);
 	min-height: 0;
 }
 
@@ -173,13 +173,13 @@
 	flex: 1;
 	display: flex;
 	flex-direction: column;
-	gap: 4px;
+	gap: var(--space-1);
 }
 
 .accents {
 	flex: 1;
 	display: flex;
-	gap: 4px;
+	gap: var(--space-1);
 }
 
 .pair > .tile,
@@ -192,7 +192,7 @@
 	flex-direction: column;
 	justify-content: flex-end;
 	min-width: 0;
-	padding: 12px 14px;
+	padding: var(--space-3) var(--space-3_5);
 	font-size: var(--text-xs);
 	line-height: 1.35;
 }
@@ -225,9 +225,9 @@
 .scaleRow {
 	display: grid;
 	grid-template-columns: minmax(160px, 1fr) 3fr;
-	gap: 8px 32px;
+	gap: var(--space-2) var(--space-8);
 	align-items: baseline;
-	padding: 16px 0;
+	padding: var(--space-4) 0;
 	border-top: 1px solid var(--ds-hairline);
 }
 
@@ -245,7 +245,7 @@
 .scaleMeta {
 	display: flex;
 	flex-direction: column;
-	gap: 2px;
+	gap: var(--space-0_5);
 	font-size: var(--text-xs);
 }
 
@@ -266,13 +266,13 @@
 	display: flex;
 	flex-wrap: wrap;
 	align-items: flex-start;
-	gap: 32px;
+	gap: var(--space-8);
 }
 
 .stack {
 	display: flex;
 	flex-direction: column;
-	gap: 18px;
+	gap: var(--space-4_5);
 	min-width: 0;
 }
 
@@ -280,12 +280,12 @@
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
-	gap: 14px;
+	gap: var(--space-3_5);
 }
 
 .button {
 	border: 1px solid transparent;
-	font-size: 15px;
+	font-size: var(--text-md);
 	line-height: 1.2;
 }
 
@@ -302,14 +302,14 @@
 .input {
 	width: 240px;
 	max-width: 100%;
-	padding: 12px 14px;
+	padding: var(--space-3) var(--space-3_5);
 	border: 1px solid color-mix(in srgb, var(--ds-text) 35%, transparent);
 	border-radius: var(--ds-small);
 	opacity: 0.75;
 }
 
 .tag {
-	padding: 6px 12px;
+	padding: var(--space-1_5) var(--space-3);
 	border-radius: var(--ds-tag-radius);
 	background-color: color-mix(in srgb, var(--ds-primary) 16%, var(--ds-background));
 	font-size: var(--text-xxs);
@@ -324,17 +324,17 @@
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
-	gap: 10px;
+	gap: var(--space-2_5);
 	flex-shrink: 0;
 	width: 220px;
 	min-height: 190px;
-	padding: 18px 20px;
+	padding: var(--space-4_5) var(--space-5);
 	border-radius: var(--ds-card-radius);
 	background-color: color-mix(in srgb, var(--ds-text) 6%, var(--ds-background));
 }
 
 .card strong {
-	font-size: 20px;
+	font-size: var(--text-2xl);
 }
 
 .card u {
@@ -347,13 +347,13 @@
 .spacing {
 	display: flex;
 	flex-direction: column;
-	gap: 10px;
+	gap: var(--space-2_5);
 }
 
 .spacingRow {
 	display: grid;
 	grid-template-columns: 48px 1fr 64px;
-	gap: 12px;
+	gap: var(--space-3);
 	align-items: center;
 	font-size: var(--text-xs);
 }
@@ -376,8 +376,8 @@
 .corners {
 	display: flex;
 	flex-wrap: wrap;
-	gap: 20px;
-	margin-top: 28px;
+	gap: var(--space-5);
+	margin-top: var(--space-7);
 }
 
 .corner {
@@ -393,19 +393,19 @@
 }
 
 .corner figcaption {
-	margin-top: 8px;
+	margin-top: var(--space-2);
 	opacity: 0.65;
 }
 
 .guidelines {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
-	gap: 32px 48px;
+	gap: var(--space-8) var(--space-12);
 }
 
 .guideline h3 {
-	margin: 0 0 8px;
-	font-size: 20px;
+	margin: 0 0 var(--space-2);
+	font-size: var(--text-2xl);
 	line-height: 1.2;
 }
 
@@ -430,7 +430,7 @@
 
 .guideline code {
 	font-size: 0.9em;
-	padding: 1px 4px;
+	padding: 1px var(--space-1);
 	border-radius: 4px;
 	background-color: color-mix(in srgb, var(--ds-text) 10%, transparent);
 }
@@ -440,9 +440,9 @@
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	gap: 8px;
+	gap: var(--space-2);
 	height: 100%;
-	padding: 32px;
+	padding: var(--space-8);
 	color: var(--foreground);
 	text-align: center;
 }
@@ -474,8 +474,8 @@
 .annotationMarker {
 	position: absolute;
 	z-index: 1;
-	top: -12px;
-	inset-inline-end: -12px;
+	top: calc(var(--space-3) * -1);
+	inset-inline-end: calc(var(--space-3) * -1);
 	display: inline-flex;
 	box-sizing: content-box;
 	align-items: center;
@@ -483,7 +483,7 @@
 	width: 20px;
 	height: 20px;
 	border: 2px solid #fff;
-	border-radius: 50%;
+	border-radius: var(--radius-full);
 	background: var(--accent);
 	box-shadow:
 		0 0 0 1px var(--accent),
@@ -496,7 +496,7 @@
 
 /* The palette clips its tiles' corners, so their markers sit inside. */
 .tile .annotationMarker {
-	top: 8px;
-	inset-inline-end: 8px;
+	top: var(--space-2);
+	inset-inline-end: var(--space-2);
 }
 
diff --git a/apps/ui/src/features/sites/preview-split-frame/style.module.css b/apps/ui/src/features/sites/preview-split-frame/style.module.css
index e918b2d182..d02aa8f646 100644
--- a/apps/ui/src/features/sites/preview-split-frame/style.module.css
+++ b/apps/ui/src/features/sites/preview-split-frame/style.module.css
@@ -113,7 +113,7 @@
 	inset-block: 0;
 	inset-inline-start: var(--preview-frame-content-width);
 	z-index: 3;
-	padding-inline-start: 4px;
+	padding-inline-start: var(--space-1);
 	transform: translateX(-4px);
 	justify-content: flex-start;
 }
diff --git a/apps/ui/src/features/sites/site-fields/style.module.css b/apps/ui/src/features/sites/site-fields/style.module.css
index 583d5bd5c3..867197fb62 100644
--- a/apps/ui/src/features/sites/site-fields/style.module.css
+++ b/apps/ui/src/features/sites/site-fields/style.module.css
@@ -1,5 +1,5 @@
 .offlineTooltip {
-	gap: 8px;
+	gap: var(--space-2);
 }
 
 .offlineTooltip svg {
@@ -8,12 +8,12 @@
 
 .helpAction {
 	display: flex;
-	margin-block-start: 4px;
+	margin-block-start: var(--space-1);
 }
 
 .textControl {
 	display: flex;
 	align-items: center;
-	gap: 4px;
+	gap: var(--space-1);
 	min-width: min(224px, 100%);
 }
diff --git a/apps/ui/src/features/sites/site-header-actions/style.module.css b/apps/ui/src/features/sites/site-header-actions/style.module.css
index 61c008d5e2..86a8961545 100644
--- a/apps/ui/src/features/sites/site-header-actions/style.module.css
+++ b/apps/ui/src/features/sites/site-header-actions/style.module.css
@@ -13,7 +13,7 @@
 .actions {
 	display: flex;
 	align-items: center;
-	gap: 4px;
+	gap: var(--space-1);
 }
 
 .item,
diff --git a/apps/ui/src/features/sites/site-preview/address-bar.module.css b/apps/ui/src/features/sites/site-preview/address-bar.module.css
index 33c4d18d82..c297df3c37 100644
--- a/apps/ui/src/features/sites/site-preview/address-bar.module.css
+++ b/apps/ui/src/features/sites/site-preview/address-bar.module.css
@@ -6,10 +6,10 @@
 	flex: 1 1 auto;
 	min-width: 0;
 	height: var(--control-size);
-	padding-inline: 12px;
+	padding-inline: var(--space-3);
 	align-items: center;
 	border: 1px solid var(--border);
-	border-radius: 999px;
+	border-radius: var(--radius-full);
 	overflow: hidden;
 }
 
@@ -36,7 +36,7 @@
 .actions {
 	position: absolute;
 	inset-block: 0;
-	inset-inline-end: 2px;
+	inset-inline-end: var(--space-0_5);
 	display: flex;
 	align-items: center;
 	opacity: 0;
@@ -66,10 +66,10 @@
 	width: 100%;
 	min-width: 0;
 	/* Balances the realm icon, so the address centres on the whole field. */
-	padding-inline: 4px 20px;
+	padding-inline: var(--space-1) var(--space-5);
 	color: var(--foreground);
 	font-size: var(--text-xs);
-	line-height: 20px;
+	line-height: var(--text-xs--line-height);
 	text-align: center;
 	outline: 0;
 }
@@ -81,7 +81,7 @@
 .shortcutsPopup {
 	width: var(--anchor-width);
 	max-width: calc(100vw - 16px);
-	padding: 6px;
+	padding: var(--space-1_5);
 }
 
 /* Rows rounded for the menu surface rather than the composer's. */
diff --git a/apps/ui/src/features/sites/site-preview/style.module.css b/apps/ui/src/features/sites/site-preview/style.module.css
index d0cebb9ab1..5cc4e00721 100644
--- a/apps/ui/src/features/sites/site-preview/style.module.css
+++ b/apps/ui/src/features/sites/site-preview/style.module.css
@@ -18,8 +18,8 @@
 	position: relative;
 	display: flex;
 	align-items: center;
-	gap: 12px;
-	padding-inline: 12px 8px;
+	gap: var(--space-3);
+	padding-inline: var(--space-3) var(--space-2);
 	height: var(--band-height);
 	flex-shrink: 0;
 	transition: padding var(--motion-duration-layout) var(--motion-ease-layout);
@@ -45,7 +45,7 @@
 	display: flex;
 	flex-shrink: 0;
 	align-items: center;
-	gap: 4px;
+	gap: var(--space-1);
 }
 
 .browserLocation {
@@ -69,9 +69,9 @@
 	height: var(--control-size);
 	align-items: center;
 	justify-content: center;
-	padding-inline: 12px;
+	padding-inline: var(--space-3);
 	border: 1px solid var(--border);
-	border-radius: 999px;
+	border-radius: var(--radius-full);
 	color: var(--muted-foreground);
 	font-size: var(--text-xxs);
 	white-space: nowrap;
@@ -100,7 +100,7 @@
 
 .historyPath {
 	color: var(--muted-foreground);
-	font-size: 11px;
+	font-size: var(--text-2xs);
 }
 
 .disabledControlTooltipTarget {
@@ -108,7 +108,7 @@
 }
 
 .annotateButton {
-	gap: 4px;
+	gap: var(--space-1);
 }
 
 .annotateButtonActive {
@@ -221,7 +221,7 @@
 .spinner {
 	width: 20px;
 	height: 20px;
-	border-radius: 50%;
+	border-radius: var(--radius-full);
 	border: 2px solid var(--border);
 	border-top-color: var(--accent-text);
 	animation: sitePreviewSpin 0.8s linear infinite;
@@ -252,7 +252,7 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	padding: 20px;
+	padding: var(--space-5);
 	background-color: var(--chat);
 	color: var(--muted-foreground);
 	font-size: var(--text-xxs);
@@ -271,7 +271,7 @@
 	z-index: 1;
 	display: flex;
 	flex-direction: column;
-	gap: 12px;
+	gap: var(--space-3);
 	align-items: center;
 	width: min(100%, 420px);
 }
@@ -293,7 +293,7 @@
 .headerItem {
 	display: flex;
 	align-items: center;
-	gap: 4px;
+	gap: var(--space-1);
 	flex-shrink: 0;
 }
 
diff --git a/apps/ui/src/features/sites/stopped-site-preview/style.module.css b/apps/ui/src/features/sites/stopped-site-preview/style.module.css
index 6c5e380019..029949d7cc 100644
--- a/apps/ui/src/features/sites/stopped-site-preview/style.module.css
+++ b/apps/ui/src/features/sites/stopped-site-preview/style.module.css
@@ -55,7 +55,7 @@
 	height: 64px;
 	align-items: center;
 	justify-content: center;
-	border-radius: 50%;
+	border-radius: var(--radius-full);
 	background: color-mix(in srgb, var(--background) 90%, transparent);
 	color: var(--foreground);
 }
diff --git a/apps/ui/src/features/sync/publish-panel/style.module.css b/apps/ui/src/features/sync/publish-panel/style.module.css
index c26c1a1817..6fb3bb1293 100644
--- a/apps/ui/src/features/sync/publish-panel/style.module.css
+++ b/apps/ui/src/features/sync/publish-panel/style.module.css
@@ -8,7 +8,7 @@
 	overflow-x: hidden;
 	overflow-y: auto;
 	font-size: var(--text-sm);
-	line-height: 20px;
+	line-height: var(--text-sm--line-height);
 }
 
 @media (prefers-reduced-motion: no-preference) {
@@ -36,11 +36,11 @@
 
 .errorDot {
 	position: absolute;
-	inset-block-start: -2px;
-	inset-inline-end: -8px;
+	inset-block-start: calc(var(--space-0_5) * -1);
+	inset-inline-end: calc(var(--space-2) * -1);
 	width: 6px;
 	height: 6px;
-	border-radius: 50%;
+	border-radius: var(--radius-full);
 	background: var(--destructive);
 }
 
@@ -48,19 +48,19 @@
 	display: flex;
 	flex: none;
 	align-items: center;
-	gap: 12px;
-	padding: 14px 14px 14px 16px;
+	gap: var(--space-3);
+	padding: var(--space-3_5) var(--space-3_5) var(--space-3_5) var(--space-4);
 }
 
 .body {
 	display: flex;
 	flex-direction: column;
-	gap: 10px;
-	padding: 0 16px 16px;
+	gap: var(--space-2_5);
+	padding: 0 var(--space-4) var(--space-4);
 }
 
 .bodyInsetTop {
-	padding-top: 16px;
+	padding-top: var(--space-4);
 }
 
 .loading {
@@ -76,7 +76,7 @@
 	overflow-wrap: anywhere;
 	font-size: var(--text-sm);
 	font-weight: var(--font-weight-medium);
-	line-height: 20px;
+	line-height: var(--text-sm--line-height);
 	letter-spacing: -0.02em;
 }
 
@@ -84,31 +84,31 @@
 .description {
 	color: var(--muted-foreground);
 	font-size: var(--text-sm);
-	line-height: 1.625;
+	line-height: var(--leading-relaxed);
 }
 
 .description {
 	font-size: var(--text-xs);
-	line-height: 20px;
+	line-height: var(--text-xs--line-height);
 }
 
 .error {
 	color: var(--destructive);
 	font-size: var(--text-sm);
-	line-height: 1.625;
+	line-height: var(--leading-relaxed);
 }
 
 .errorMessage {
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
-	gap: 10px;
+	gap: var(--space-2_5);
 }
 
 .field {
 	display: flex;
 	flex-direction: column;
-	gap: 2px;
+	gap: var(--space-0_5);
 }
 
 .website {
@@ -120,7 +120,7 @@
 .include {
 	display: flex;
 	align-items: center;
-	gap: 8px;
+	gap: var(--space-2);
 }
 
 .include > .text {
@@ -129,7 +129,7 @@
 
 .footer {
 	display: flex;
-	gap: 8px;
+	gap: var(--space-2);
 }
 
 .primary {
@@ -139,7 +139,7 @@
 .intro {
 	display: flex;
 	flex-direction: column;
-	gap: 10px;
+	gap: var(--space-2_5);
 }
 
 .introActions {
@@ -150,13 +150,13 @@
 .choice {
 	display: flex;
 	flex-direction: column;
-	gap: 4px;
+	gap: var(--space-1);
 }
 
 .choiceButton {
 	flex-direction: column;
 	align-items: flex-start;
-	gap: 4px;
+	gap: var(--space-1);
 }
 
 .choiceName,
@@ -174,14 +174,14 @@
 .websiteRow {
 	display: flex;
 	align-items: center;
-	gap: 8px;
+	gap: var(--space-2);
 }
 
 .websiteRowText {
 	display: flex;
 	flex: 1;
 	flex-direction: column;
-	gap: 2px;
+	gap: var(--space-0_5);
 	min-width: 0;
 }
 
@@ -191,7 +191,7 @@
 	overflow: hidden;
 	font-size: var(--text-sm);
 	font-weight: var(--font-weight-medium);
-	line-height: 20px;
+	line-height: var(--text-sm--line-height);
 	letter-spacing: -0.02em;
 	text-overflow: ellipsis;
 	white-space: nowrap;
@@ -201,13 +201,13 @@
 .success {
 	display: flex;
 	flex-direction: column;
-	gap: 10px;
+	gap: var(--space-2_5);
 }
 
 .progressTitle {
 	display: flex;
 	align-items: center;
-	gap: 8px;
+	gap: var(--space-2);
 }
 
 .stack,
@@ -215,17 +215,17 @@
 .fileChildren {
 	display: flex;
 	flex-direction: column;
-	gap: 8px;
+	gap: var(--space-2);
 }
 
 .fileChildren {
-	padding-inline-start: 24px;
+	padding-inline-start: var(--space-6);
 }
 
 .selectionRow {
 	display: flex;
 	align-items: center;
-	gap: 8px;
+	gap: var(--space-2);
 }
 
 .disclosure {
diff --git a/apps/ui/src/index.css b/apps/ui/src/index.css
index 98c8fdca54..004bfa7add 100644
--- a/apps/ui/src/index.css
+++ b/apps/ui/src/index.css
@@ -11,7 +11,7 @@
 	pointer-events: none;
 }
 
-@media ( max-width: 639px ) {
+@media ( width < 640px ) {
 	.studio-column-edge::before {
 		content: none;
 	}
diff --git a/apps/ui/src/lib/theme/base.css b/apps/ui/src/lib/theme/base.css
index 8448f78959..da21382ac3 100644
--- a/apps/ui/src/lib/theme/base.css
+++ b/apps/ui/src/lib/theme/base.css
@@ -30,7 +30,7 @@
 body {
 	font-family: var( --font-sans );
 	font-size: var( --text-sm );
-	line-height: 20px;
+	line-height: var( --text-sm--line-height );
 	background-color: var( --chrome );
 	color: var( --foreground );
 	-webkit-font-smoothing: antialiased;
diff --git a/apps/ui/src/lib/theme/tokens.css b/apps/ui/src/lib/theme/tokens.css
index 4afeb56528..2c94db2cde 100644
--- a/apps/ui/src/lib/theme/tokens.css
+++ b/apps/ui/src/lib/theme/tokens.css
@@ -72,15 +72,29 @@
 	--radius-md: calc( var( --radius ) * 0.8 );
 	--radius-lg: var( --radius );
 	--radius-xl: calc( var( --radius ) * 1.4 );
+	--radius-2xl: 1rem;
+	--radius-3xl: 1.5rem;
+	--radius-full: 9999px;
 
 	--font-sans: 'Inter Variable', -apple-system, system-ui, 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu',
 		'Cantarell', 'Helvetica Neue', sans-serif;
 	--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+	--text-2xs: 0.6875rem;
 	--text-xxs: 0.75rem;
+	--text-xxs--line-height: 1.1rem;
 	--text-xs: 0.8125rem;
+	--text-xs--line-height: 1.25rem;
 	--text-sm: 0.875rem;
+	--text-sm--line-height: 1.25rem;
+	--text-md: 0.9375rem;
 	--text-base: 1rem;
 	--text-xl: 1.125rem;
+	--text-2xl: 1.25rem;
+	--leading-none: 1;
+	--leading-tight: 1.25;
+	--leading-snug: 1.375;
+	--leading-normal: 1.5;
+	--leading-relaxed: 1.625;
 	--font-weight-normal: 400;
 	--font-weight-medium: 450;
 	--font-weight-semibold: 600;
@@ -88,6 +102,25 @@
 	--shadow-xs: 0 1px 2px 0 rgb( 0 0 0 / 5% );
 	--shadow-sm: 0 1px 3px 0 rgb( 0 0 0 / 10% ), 0 1px 2px -1px rgb( 0 0 0 / 10% );
 	--shadow-md: 0 4px 6px -1px rgb( 0 0 0 / 10% ), 0 2px 4px -2px rgb( 0 0 0 / 10% );
+	--shadow-raised: 0 1px 3px rgb( 0 0 0 / 20% );
+
+	/* A 4px grid, numbered like Tailwind's spacing scale: `--space-1_5` is 1.5 × 4px. */
+	--space-0_5: 2px;
+	--space-1: 4px;
+	--space-1_5: 6px;
+	--space-2: 8px;
+	--space-2_5: 10px;
+	--space-3: 12px;
+	--space-3_5: 14px;
+	--space-4: 16px;
+	--space-4_5: 18px;
+	--space-5: 20px;
+	--space-6: 24px;
+	--space-7: 28px;
+	--space-8: 32px;
+	--space-10: 40px;
+	--space-12: 48px;
+	--space-16: 64px;
 
 	--focus-width: 2px;
 
@@ -106,6 +139,14 @@
 	--motion-ease-layout: cubic-bezier( 0.645, 0.045, 0.355, 1 );
 	--motion-ease-enter: cubic-bezier( 0.165, 0.84, 0.44, 1 );
 
+	/* Layers inside the workspace: a sticky row over its scroller, overlays and
+	   handles over a pane, the band's separator over the panels, and the sidebar
+	   opened over the content on a small window. */
+	--z-sticky: 10;
+	--z-overlay: 20;
+	--z-band: 30;
+	--z-sidebar: 40;
+
 	/* Layers above the content, bottom to top. Toasts stay readable over a dialog;
 	   a drag in progress covers everything. */
 	--z-dialog: 700;
@@ -147,6 +188,10 @@
 	--hover: var( --muted );
 }
 
+/* Media queries can't read custom properties, so the one breakpoint is written
+   out where it's used: `( width < 640px )`, a window too small for the sidebar
+   beside the content. */
+
 @media ( -webkit-min-device-pixel-ratio: 2 ), ( min-resolution: 192dpi ) {
 	:root {
 		--focus-width: 1.5px;
diff --git a/apps/ui/src/lib/ui/alert/style.module.css b/apps/ui/src/lib/ui/alert/style.module.css
index 9e27f9535f..35957b3548 100644
--- a/apps/ui/src/lib/ui/alert/style.module.css
+++ b/apps/ui/src/lib/ui/alert/style.module.css
@@ -5,15 +5,15 @@
 		position: relative;
 		display: grid;
 		grid-template-columns: minmax( 0, 1fr ) auto;
-		gap: 2px 8px;
+		gap: var( --space-0_5 ) var( --space-2 );
 		width: 100%;
-		padding: 8px 10px;
+		padding: var( --space-2 ) var( --space-2_5 );
 		border: 1px solid var( --border );
 		border-radius: var( --radius-lg );
 		background-color: var( --popover );
 		color: var( --popover-foreground );
 		font-size: var( --text-sm );
-		line-height: 20px;
+		line-height: var( --text-sm--line-height );
 		text-align: start;
 	}
 
@@ -84,7 +84,7 @@
 		display: flex;
 		grid-column: 1 / -1;
 		flex-wrap: wrap;
-		gap: 8px;
-		margin-block-start: 6px;
+		gap: var( --space-2 );
+		margin-block-start: var( --space-1_5 );
 	}
 }
diff --git a/apps/ui/src/lib/ui/badge/style.module.css b/apps/ui/src/lib/ui/badge/style.module.css
index 3ea536eb29..d2ebd73e8f 100644
--- a/apps/ui/src/lib/ui/badge/style.module.css
+++ b/apps/ui/src/lib/ui/badge/style.module.css
@@ -2,15 +2,15 @@
 	.badge {
 		display: inline-flex;
 		flex-shrink: 0;
-		gap: 4px;
+		gap: var( --space-1 );
 		align-items: center;
 		justify-content: center;
 		width: fit-content;
 		height: 20px;
 		overflow: hidden;
-		padding: 2px 8px;
+		padding: var( --space-0_5 ) var( --space-2 );
 		border: 1px solid transparent;
-		border-radius: 26px;
+		border-radius: var( --radius-full );
 		font-size: var( --text-xs );
 		font-weight: var( --font-weight-medium );
 		white-space: nowrap;
@@ -24,25 +24,25 @@
 
 	.badge[data-size='count'] {
 		min-width: 20px;
-		padding-inline: 4px;
-		border-radius: 9999px;
+		padding-inline: var( --space-1 );
+		border-radius: var( --radius-full );
 		font-variant-numeric: tabular-nums;
 	}
 
 	.badge[data-size='xs'] {
-		gap: 2px;
+		gap: var( --space-0_5 );
 		height: auto;
-		padding: 4px;
+		padding: var( --space-1 );
 		border: 0;
 		border-radius: var( --radius-xs );
-		font-size: 11px;
-		line-height: 1;
+		font-size: var( --text-2xs );
+		line-height: var( --leading-none );
 	}
 
 	.badge[data-size='icon'] {
 		width: 24px;
 		height: 24px;
-		padding: 4px;
+		padding: var( --space-1 );
 		border: 0;
 		border-radius: var( --radius-xs );
 	}
diff --git a/apps/ui/src/lib/ui/button/style.module.css b/apps/ui/src/lib/ui/button/style.module.css
index f721f25d7e..d14fe416fd 100644
--- a/apps/ui/src/lib/ui/button/style.module.css
+++ b/apps/ui/src/lib/ui/button/style.module.css
@@ -4,7 +4,7 @@
 
 		display: inline-flex;
 		flex-shrink: 0;
-		gap: 6px;
+		gap: var( --space-1_5 );
 		align-items: center;
 		justify-content: center;
 		max-width: 100%;
@@ -16,7 +16,7 @@
 		background-clip: padding-box;
 		font-size: var( --text-xs );
 		font-weight: var( --font-weight-medium );
-		line-height: 20px;
+		line-height: var( --text-xs--line-height );
 		white-space: nowrap;
 		text-decoration: none;
 		outline: none;
@@ -80,16 +80,16 @@
 	}
 
 	.button [data-dropdown-indicator] {
-		margin-inline: -4px -2px;
+		margin-inline: calc( var( --space-1 ) * -1 ) calc( var( --space-0_5 ) * -1 );
 		color: var( --muted-foreground );
 	}
 
 	.button:has( > [data-icon='inline-start'] ) {
-		padding-inline-start: 8px;
+		padding-inline-start: var( --space-2 );
 	}
 
 	.button:has( > [data-icon='inline-end'] ) {
-		padding-inline-end: 8px;
+		padding-inline-end: var( --space-2 );
 	}
 
 	/* Variants. Hover only applies to enabled buttons. */
@@ -247,7 +247,7 @@
 	.button[data-size='2xs'] {
 		--button-padding-inline: 6px;
 
-		gap: 4px;
+		gap: var( --space-1 );
 		height: 24px;
 		border-radius: var( --radius-md );
 	}
@@ -272,11 +272,11 @@
 	}
 
 	.button[data-size='sm']:has( > [data-icon='inline-start'] ) {
-		padding-inline-start: 6px;
+		padding-inline-start: var( --space-1_5 );
 	}
 
 	.button[data-size='sm']:has( > [data-icon='inline-end'] ) {
-		padding-inline-end: 6px;
+		padding-inline-end: var( --space-1_5 );
 	}
 
 	.button[data-size='lg'] {
@@ -343,14 +343,14 @@
 	}
 
 	.button[data-shape='round'] {
-		border-radius: 9999px;
+		border-radius: var( --radius-full );
 	}
 
 	.button[data-layout='row'] {
 		justify-content: flex-start;
 		width: 100%;
 		height: auto;
-		padding-block: 8px;
+		padding-block: var( --space-2 );
 		text-align: start;
 		white-space: normal;
 	}
diff --git a/apps/ui/src/lib/ui/checkbox/style.module.css b/apps/ui/src/lib/ui/checkbox/style.module.css
index 86f1d7f58c..c499088f20 100644
--- a/apps/ui/src/lib/ui/checkbox/style.module.css
+++ b/apps/ui/src/lib/ui/checkbox/style.module.css
@@ -15,7 +15,7 @@
 
 	.checkbox::after {
 		position: absolute;
-		inset: -8px -12px;
+		inset: calc( var( --space-2 ) * -1 ) calc( var( --space-3 ) * -1 );
 		content: '';
 	}
 
diff --git a/apps/ui/src/lib/ui/code-block/style.module.css b/apps/ui/src/lib/ui/code-block/style.module.css
index 5e2c6b261a..80f051c3a6 100644
--- a/apps/ui/src/lib/ui/code-block/style.module.css
+++ b/apps/ui/src/lib/ui/code-block/style.module.css
@@ -7,10 +7,10 @@
 }
 
 .pre {
-	padding: 12px;
+	padding: var(--space-3);
 	font-family: var(--font-mono);
 	font-size: var(--text-xs);
-	line-height: 20px;
+	line-height: var(--text-xs--line-height);
 	overflow-x: auto;
 	-webkit-user-select: text;
 	user-select: text;
diff --git a/apps/ui/src/lib/ui/command/style.module.css b/apps/ui/src/lib/ui/command/style.module.css
index 1dfbeecf67..f8aa91cbb1 100644
--- a/apps/ui/src/lib/ui/command/style.module.css
+++ b/apps/ui/src/lib/ui/command/style.module.css
@@ -1,7 +1,7 @@
 @layer ui {
 	/* Rows are rounded to sit inside a 24px surface, 10px in. */
 	.sheet {
-		padding: 10px;
+		padding: var( --space-2_5 );
 	}
 
 	/* A sheet grows with its commands, up to the room above its anchor. */
@@ -15,18 +15,18 @@
 		max-height: 288px;
 		overflow-x: hidden;
 		overflow-y: auto;
-		scroll-padding-block: 4px;
+		scroll-padding-block: var( --space-1 );
 		outline: none;
 	}
 
 	.empty {
-		padding: 24px 0;
+		padding: var( --space-6 ) 0;
 		font-size: var( --text-sm );
 		text-align: center;
 	}
 
 	.heading {
-		padding: 12px 8px 4px;
+		padding: var( --space-3 ) var( --space-2 ) var( --space-1 );
 		color: var( --muted-foreground );
 		font-size: var( --text-xs );
 		font-weight: var( --font-weight-medium );
@@ -34,10 +34,10 @@
 
 	.item {
 		display: flex;
-		gap: 6px;
+		gap: var( --space-1_5 );
 		align-items: center;
 		height: 32px;
-		padding: 6px 8px;
+		padding: var( --space-1_5 ) var( --space-2 );
 		border-radius: var( --command-radius );
 		font-size: var( --text-xs );
 		font-weight: var( --font-weight-medium );
@@ -66,7 +66,7 @@
 	.text {
 		display: flex;
 		flex: 1;
-		gap: 6px;
+		gap: var( --space-1_5 );
 		align-items: baseline;
 		min-width: 0;
 	}
diff --git a/apps/ui/src/lib/ui/dialog/style.module.css b/apps/ui/src/lib/ui/dialog/style.module.css
index ccdc147780..3f94e2c04d 100644
--- a/apps/ui/src/lib/ui/dialog/style.module.css
+++ b/apps/ui/src/lib/ui/dialog/style.module.css
@@ -28,15 +28,15 @@
 		left: 50%;
 		z-index: var( --z-dialog );
 		display: grid;
-		gap: 16px;
+		gap: var( --space-4 );
 		width: calc( 100% - 2rem );
 		max-width: 384px;
 		max-height: calc( 100dvh - 2rem );
 		overflow-y: auto;
-		padding: 16px;
+		padding: var( --space-4 );
 		border-radius: var( --radius-xl );
 		font-size: var( --text-sm );
-		line-height: 20px;
+		line-height: var( --text-sm--line-height );
 		transform: translate( -50%, -50% );
 		transition-property: opacity, scale, filter;
 		transition-duration: var( --motion-duration-layout );
@@ -74,7 +74,7 @@
 
 	.content[data-surface='composer'] {
 		border: 1px solid var( --input );
-		border-radius: 24px;
+		border-radius: var( --radius-3xl );
 		background-color: var( --composer );
 		box-shadow: none;
 		color: var( --foreground );
@@ -86,7 +86,7 @@
 
 	.content[data-layout='confirmation'] {
 		max-width: 420px;
-		padding: 20px;
+		padding: var( --space-5 );
 	}
 
 	.content:is( [data-layout='settings'], [data-layout='creation'] ) {
@@ -97,12 +97,12 @@
 		margin: auto;
 		overflow: hidden;
 		padding: 0;
-		border-radius: 16px;
+		border-radius: var( --radius-2xl );
 		transform: none;
 	}
 
 	.content[data-layout='settings'] {
-		inset: 70px 16px;
+		inset: 70px var( --space-4 );
 		max-width: 752px;
 		max-height: 600px;
 	}
@@ -112,7 +112,7 @@
 	}
 
 	.content[data-layout='creation'] {
-		inset: 16px;
+		inset: var( --space-4 );
 		gap: 0;
 		max-width: 896px;
 		height: calc( 100dvh - 2rem );
@@ -123,16 +123,16 @@
 	.panelHeader {
 		flex-shrink: 0;
 		align-items: center;
-		column-gap: 12px;
+		column-gap: var( --space-3 );
 		min-height: 60px;
-		padding: 14px 14px 14px 16px;
+		padding: var( --space-3_5 ) var( --space-3_5 ) var( --space-3_5 ) var( --space-4 );
 	}
 
 	.header {
 		display: grid;
 		grid-template-columns: minmax( 0, 1fr ) auto;
-		row-gap: 8px;
-		margin: -16px -16px 0;
+		row-gap: var( --space-2 );
+		margin: calc( var( --space-4 ) * -1 ) calc( var( --space-4 ) * -1 ) 0;
 	}
 
 	.header > [data-slot='dialog-title'] {
@@ -150,9 +150,9 @@
 	}
 
 	[data-layout='confirmation'] > .header {
-		margin: -20px -20px 0;
+		margin: calc( var( --space-5 ) * -1 ) calc( var( --space-5 ) * -1 ) 0;
 		padding-block-end: 0;
-		padding-inline-start: 20px;
+		padding-inline-start: var( --space-5 );
 	}
 
 	.title {
@@ -161,7 +161,7 @@
 
 	[data-layout='settings'] .title {
 		overflow: hidden;
-		font-weight: 500;
+		font-weight: var( --font-weight-medium );
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
@@ -172,7 +172,7 @@
 	}
 
 	.description p + p {
-		margin-top: 8px;
+		margin-top: var( --space-2 );
 	}
 
 	.description[data-tone='default'] {
@@ -190,17 +190,17 @@
 
 	.footer {
 		display: flex;
-		gap: 6px;
+		gap: var( --space-1_5 );
 		align-items: center;
 		justify-content: flex-end;
 	}
 
 	[data-layout='confirmation'] > .footer {
-		margin: 8px -6px -6px;
+		margin: var( --space-2 ) calc( var( --space-1_5 ) * -1 ) calc( var( --space-1_5 ) * -1 );
 	}
 
 	.footer[data-padding] {
-		padding: 12px;
+		padding: var( --space-3 );
 	}
 
 	.footer[data-separator] {
@@ -219,13 +219,13 @@
 	.panelTitle h1 {
 		font-size: var( --text-sm );
 		font-weight: var( --font-weight-medium );
-		line-height: 20px;
+		line-height: var( --text-sm--line-height );
 	}
 
 	.panelActions {
 		display: flex;
 		flex-shrink: 0;
-		gap: 4px;
+		gap: var( --space-1 );
 		align-items: center;
 		margin-inline-start: auto;
 	}
@@ -250,7 +250,7 @@
 		flex-direction: column;
 		width: 100%;
 		min-height: 100%;
-		padding: 0 16px 16px;
+		padding: 0 var( --space-4 ) var( --space-4 );
 	}
 
 	.scrollArea {
diff --git a/apps/ui/src/lib/ui/empty/style.module.css b/apps/ui/src/lib/ui/empty/style.module.css
index df64e2ddd6..baba7ac62e 100644
--- a/apps/ui/src/lib/ui/empty/style.module.css
+++ b/apps/ui/src/lib/ui/empty/style.module.css
@@ -3,12 +3,12 @@
 		display: flex;
 		flex: 1;
 		flex-direction: column;
-		gap: 20px;
+		gap: var( --space-5 );
 		align-items: center;
 		justify-content: center;
 		width: 100%;
 		min-width: 0;
-		padding: 24px;
+		padding: var( --space-6 );
 		text-align: center;
 		text-wrap: balance;
 	}
@@ -16,7 +16,7 @@
 	.header {
 		display: flex;
 		flex-direction: column;
-		gap: 8px;
+		gap: var( --space-2 );
 		align-items: center;
 		max-width: 384px;
 	}
@@ -24,7 +24,7 @@
 	.content {
 		display: flex;
 		flex-direction: column;
-		gap: 10px;
+		gap: var( --space-2_5 );
 		align-items: center;
 		width: 100%;
 		max-width: 384px;
@@ -39,7 +39,7 @@
 		flex-shrink: 0;
 		align-items: center;
 		justify-content: center;
-		margin-block-end: 8px;
+		margin-block-end: var( --space-2 );
 		border-radius: var( --radius-lg );
 		background: var( --muted );
 		color: var( --foreground );
@@ -48,7 +48,7 @@
 	.title {
 		font-size: var( --text-sm );
 		font-weight: var( --font-weight-medium );
-		line-height: 20px;
+		line-height: var( --text-sm--line-height );
 		letter-spacing: -0.02em;
 	}
 
@@ -56,6 +56,6 @@
 		max-width: 384px;
 		color: var( --muted-foreground );
 		font-size: var( --text-sm );
-		line-height: 1.625;
+		line-height: var( --leading-relaxed );
 	}
 }
diff --git a/apps/ui/src/lib/ui/field/style.module.css b/apps/ui/src/lib/ui/field/style.module.css
index 4551b47501..c8666067e0 100644
--- a/apps/ui/src/lib/ui/field/style.module.css
+++ b/apps/ui/src/lib/ui/field/style.module.css
@@ -2,13 +2,13 @@
 	.set {
 		display: flex;
 		flex-direction: column;
-		gap: 8px;
+		gap: var( --space-2 );
 		min-width: 0;
 	}
 
 	.legend {
-		margin-block-end: 16px;
-		padding: 0 20px;
+		margin-block-end: var( --space-4 );
+		padding: 0 var( --space-5 );
 		font-size: var( --text-base );
 		font-weight: var( --font-weight-medium );
 	}
@@ -29,24 +29,24 @@
 	.group {
 		display: flex;
 		flex-direction: column;
-		gap: 24px;
+		gap: var( --space-6 );
 		width: 100%;
 	}
 
 	.group[data-variant='sections'] {
-		gap: 32px;
+		gap: var( --space-8 );
 	}
 
 	.group[data-variant='inset'] {
-		gap: 16px;
-		padding: 14px;
+		gap: var( --space-4 );
+		padding: var( --space-3_5 );
 		border-radius: var( --radius-md );
 		background-color: var( --background );
 	}
 
 	.group[data-variant='settings'] {
 		gap: 0;
-		padding: 20px;
+		padding: var( --space-5 );
 		border-radius: var( --radius-xl );
 		background-color: var( --muted );
 	}
@@ -61,7 +61,7 @@
 	}
 
 	.group[data-variant='settings'] > .field {
-		padding-block: 16px;
+		padding-block: var( --space-4 );
 	}
 
 	.group[data-variant='settings'] > .field + .field {
@@ -77,7 +77,7 @@
 	}
 
 	.group[data-variant='settings'] > .field[data-orientation='horizontal'] {
-		gap: 24px;
+		gap: var( --space-6 );
 	}
 
 	.group[data-variant='settings'] > .field > :last-child {
@@ -90,7 +90,7 @@
 
 	.field {
 		display: flex;
-		gap: 8px;
+		gap: var( --space-2 );
 		width: 100%;
 	}
 
@@ -111,9 +111,9 @@
 		display: flex;
 		flex: 1;
 		flex-direction: column;
-		gap: 2px;
+		gap: var( --space-0_5 );
 		min-width: 0;
-		line-height: 1.375;
+		line-height: var( --leading-snug );
 	}
 
 	.title {
@@ -122,11 +122,11 @@
 		width: fit-content;
 		font-size: var( --text-xs );
 		font-weight: var( --font-weight-medium );
-		line-height: 1.375;
+		line-height: var( --leading-snug );
 	}
 
 	.label {
-		gap: 8px;
+		gap: var( --space-2 );
 	}
 
 	.label[data-tone='muted'] {
@@ -138,7 +138,7 @@
 		color: var( --muted-foreground );
 		font-size: var( --text-xxs );
 		font-weight: var( --font-weight-normal );
-		line-height: 1.1rem;
+		line-height: var( --text-xxs--line-height );
 		text-align: start;
 	}
 
@@ -167,7 +167,7 @@
 
 	.additional {
 		display: block;
-		margin-top: 4px;
+		margin-top: var( --space-1 );
 	}
 
 	.reserved {
diff --git a/apps/ui/src/lib/ui/input-group/style.module.css b/apps/ui/src/lib/ui/input-group/style.module.css
index 897d968973..e7efd74f6c 100644
--- a/apps/ui/src/lib/ui/input-group/style.module.css
+++ b/apps/ui/src/lib/ui/input-group/style.module.css
@@ -31,26 +31,26 @@
 
 	.group[data-variant='composer'] {
 		border-color: var( --input );
-		border-radius: 24px;
+		border-radius: var( --radius-3xl );
 		background-color: var( --composer );
 		color: var( --foreground );
 	}
 
 	.group:has( > [data-align='inline-end'] ) > input {
-		padding-inline-end: 6px;
+		padding-inline-end: var( --space-1_5 );
 	}
 
 	.group:has( > [data-align='inline-start'] ) > input {
-		padding-inline-start: 6px;
+		padding-inline-start: var( --space-1_5 );
 	}
 
 	.addon {
 		display: flex;
-		gap: 8px;
+		gap: var( --space-2 );
 		align-items: center;
 		justify-content: center;
 		height: auto;
-		padding-block: 6px;
+		padding-block: var( --space-1_5 );
 		color: var( --muted-foreground );
 		font-size: var( --text-sm );
 		font-weight: var( --font-weight-medium );
@@ -69,12 +69,12 @@
 
 	.addon[data-align='inline-start'] {
 		order: -1;
-		padding-inline-start: 8px;
+		padding-inline-start: var( --space-2 );
 	}
 
 	.addon[data-align='inline-end'] {
 		order: 1;
-		padding-inline-end: 8px;
+		padding-inline-end: var( --space-2 );
 	}
 
 	.addon[data-align='inline-start']:has( > button ) {
diff --git a/apps/ui/src/lib/ui/input/style.module.css b/apps/ui/src/lib/ui/input/style.module.css
index 05771747b8..7aacd48484 100644
--- a/apps/ui/src/lib/ui/input/style.module.css
+++ b/apps/ui/src/lib/ui/input/style.module.css
@@ -3,11 +3,11 @@
 		width: 100%;
 		min-width: 0;
 		height: var( --control-size );
-		padding: 4px 10px;
+		padding: var( --space-1 ) var( --space-2_5 );
 		border: 1px solid var( --input );
 		border-radius: var( --radius-lg );
 		font-size: var( --text-sm );
-		line-height: 20px;
+		line-height: var( --text-sm--line-height );
 		outline: none;
 	}
 
@@ -51,7 +51,7 @@
 	.adornment {
 		position: absolute;
 		top: 50%;
-		inset-inline-end: 4px;
+		inset-inline-end: var( --space-1 );
 		transform: translateY( -50% );
 	}
 }
diff --git a/apps/ui/src/lib/ui/kbd/style.module.css b/apps/ui/src/lib/ui/kbd/style.module.css
index f56e164a87..2bbce73021 100644
--- a/apps/ui/src/lib/ui/kbd/style.module.css
+++ b/apps/ui/src/lib/ui/kbd/style.module.css
@@ -1,13 +1,13 @@
 @layer ui {
 	.kbd {
 		display: inline-flex;
-		gap: 4px;
+		gap: var( --space-1 );
 		align-items: center;
 		justify-content: center;
 		width: fit-content;
 		min-width: 20px;
 		height: 20px;
-		padding-inline: 4px;
+		padding-inline: var( --space-1 );
 		border-radius: var( --radius-sm );
 		background-color: var( --muted );
 		color: var( --muted-foreground );
@@ -31,7 +31,7 @@
 	.kbd[data-variant='settings'] {
 		min-width: 24px;
 		height: 24px;
-		padding-inline: 6px;
+		padding-inline: var( --space-1_5 );
 		border-radius: var( --radius-xs );
 		background-color: var( --secondary );
 		color: var( --foreground );
@@ -53,7 +53,7 @@
 
 	.group {
 		display: inline-flex;
-		gap: 2px;
+		gap: var( --space-0_5 );
 		align-items: center;
 	}
 }
diff --git a/apps/ui/src/lib/ui/label/style.module.css b/apps/ui/src/lib/ui/label/style.module.css
index d60f1b0a2d..c9a85df700 100644
--- a/apps/ui/src/lib/ui/label/style.module.css
+++ b/apps/ui/src/lib/ui/label/style.module.css
@@ -1,11 +1,11 @@
 @layer ui {
 	.label {
 		display: flex;
-		gap: 8px;
+		gap: var( --space-2 );
 		align-items: center;
 		font-size: var( --text-sm );
 		font-weight: var( --font-weight-medium );
-		line-height: 1;
+		line-height: var( --leading-none );
 		user-select: none;
 	}
 }
diff --git a/apps/ui/src/lib/ui/menu/style.module.css b/apps/ui/src/lib/ui/menu/style.module.css
index 57a1d8cd7a..4d1e35dfb5 100644
--- a/apps/ui/src/lib/ui/menu/style.module.css
+++ b/apps/ui/src/lib/ui/menu/style.module.css
@@ -28,17 +28,17 @@
 
 	.shortcut {
 		margin-inline-start: auto;
-		padding-inline-start: 12px;
+		padding-inline-start: var( --space-3 );
 		color: var( --muted-foreground );
 		font-size: var( --text-xs );
 		letter-spacing: 0.1em;
 	}
 
 	.groupLabel {
-		padding: 4px 6px;
+		padding: var( --space-1 ) var( --space-1_5 );
 		color: var( --muted-foreground );
 		font-size: var( --text-xs );
 		font-weight: var( --font-weight-medium );
-		line-height: 20px;
+		line-height: var( --text-xs--line-height );
 	}
 }
diff --git a/apps/ui/src/lib/ui/popover/style.module.css b/apps/ui/src/lib/ui/popover/style.module.css
index c7791f3647..9af17b6e88 100644
--- a/apps/ui/src/lib/ui/popover/style.module.css
+++ b/apps/ui/src/lib/ui/popover/style.module.css
@@ -12,11 +12,11 @@
 		max-height: var( --available-height );
 		overflow: hidden;
 		border: 1px solid var( --input );
-		border-radius: 24px;
+		border-radius: var( --radius-3xl );
 		background-color: var( --composer );
 		color: var( --foreground );
 		font-size: var( --text-sm );
-		line-height: 20px;
+		line-height: var( --text-sm--line-height );
 		outline: none;
 		transform-origin: bottom;
 	}
diff --git a/apps/ui/src/lib/ui/progress/style.module.css b/apps/ui/src/lib/ui/progress/style.module.css
index 6bd77764b5..e314a1b084 100644
--- a/apps/ui/src/lib/ui/progress/style.module.css
+++ b/apps/ui/src/lib/ui/progress/style.module.css
@@ -2,7 +2,7 @@
 	.root {
 		display: flex;
 		flex-wrap: wrap;
-		gap: 12px;
+		gap: var( --space-3 );
 	}
 
 	.track {
@@ -12,7 +12,7 @@
 		width: 100%;
 		height: 4px;
 		overflow-x: hidden;
-		border-radius: 9999px;
+		border-radius: var( --radius-full );
 		background-color: var( --muted );
 	}
 
diff --git a/apps/ui/src/lib/ui/resize-handle/style.module.css b/apps/ui/src/lib/ui/resize-handle/style.module.css
index 4ae28daf8f..6abb597e59 100644
--- a/apps/ui/src/lib/ui/resize-handle/style.module.css
+++ b/apps/ui/src/lib/ui/resize-handle/style.module.css
@@ -1,6 +1,6 @@
 .resizeHandle {
 	width: 8px;
-	z-index: 20;
+	z-index: var(--z-overlay);
 	display: flex;
 	align-items: stretch;
 	justify-content: center;
diff --git a/apps/ui/src/lib/ui/select/style.module.css b/apps/ui/src/lib/ui/select/style.module.css
index 3d215bd5ea..8fb6535595 100644
--- a/apps/ui/src/lib/ui/select/style.module.css
+++ b/apps/ui/src/lib/ui/select/style.module.css
@@ -23,7 +23,7 @@
 	.value {
 		display: flex;
 		flex: 1;
-		gap: 6px;
+		gap: var( --space-1_5 );
 		align-items: center;
 		overflow: hidden;
 		text-align: start;
@@ -48,12 +48,12 @@
 
 	.item {
 		width: 100%;
-		padding-inline-end: 32px;
+		padding-inline-end: var( --space-8 );
 	}
 
 	.item[data-described] {
 		align-items: flex-start;
-		padding-block: 8px;
+		padding-block: var( --space-2 );
 	}
 
 	.item svg:not( [data-size] ) {
@@ -65,7 +65,7 @@
 		display: flex;
 		flex: 1;
 		flex-direction: column;
-		gap: 2px;
+		gap: var( --space-0_5 );
 		min-width: 0;
 	}
 
@@ -73,7 +73,7 @@
 		display: flex;
 		flex: 1;
 		flex-shrink: 0;
-		gap: 8px;
+		gap: var( --space-2 );
 		white-space: nowrap;
 	}
 
@@ -85,7 +85,7 @@
 
 	.indicator {
 		position: absolute;
-		inset-inline-end: 8px;
+		inset-inline-end: var( --space-2 );
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -97,12 +97,12 @@
 	.arrow {
 		position: sticky;
 		bottom: 0;
-		z-index: 10;
+		z-index: var( --z-sticky );
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		width: 100%;
-		padding-block: 4px;
+		padding-block: var( --space-1 );
 		background-color: var( --popover );
 		cursor: default;
 	}
diff --git a/apps/ui/src/lib/ui/slider/style.module.css b/apps/ui/src/lib/ui/slider/style.module.css
index c66e92a061..32a17ae801 100644
--- a/apps/ui/src/lib/ui/slider/style.module.css
+++ b/apps/ui/src/lib/ui/slider/style.module.css
@@ -21,7 +21,7 @@
 		flex-grow: 1;
 		height: 6px;
 		overflow: hidden;
-		border-radius: 9999px;
+		border-radius: var( --radius-full );
 		background-color: var( --border );
 	}
 
@@ -37,7 +37,7 @@
 		width: 16px;
 		height: 16px;
 		border: 1px solid var( --accent-text );
-		border-radius: 9999px;
+		border-radius: var( --radius-full );
 		background-color: var( --accent-text );
 		outline: none;
 		transition: box-shadow var( --motion-duration-feedback );
@@ -45,7 +45,7 @@
 
 	.thumb::after {
 		position: absolute;
-		inset: -8px;
+		inset: calc( var( --space-2 ) * -1 );
 		content: '';
 	}
 
diff --git a/apps/ui/src/lib/ui/surface/style.module.css b/apps/ui/src/lib/ui/surface/style.module.css
index 75e81bfc8f..a5682a5f8d 100644
--- a/apps/ui/src/lib/ui/surface/style.module.css
+++ b/apps/ui/src/lib/ui/surface/style.module.css
@@ -14,7 +14,7 @@
 	}
 
 	.padded {
-		padding: 6px;
+		padding: var( --space-1_5 );
 	}
 
 	.motion {
@@ -48,14 +48,14 @@
 	.item {
 		position: relative;
 		display: flex;
-		gap: 6px;
+		gap: var( --space-1_5 );
 		align-items: center;
 		min-height: 32px;
-		padding: 6px 8px;
+		padding: var( --space-1_5 ) var( --space-2 );
 		border-radius: var( --radius-md );
 		font-size: var( --text-xs );
 		font-weight: var( --font-weight-medium );
-		line-height: 20px;
+		line-height: var( --text-xs--line-height );
 		cursor: default;
 		outline: none;
 		user-select: none;
@@ -78,12 +78,12 @@
 
 	.separator {
 		height: 1px;
-		margin: 6px 8px;
+		margin: var( --space-1_5 ) var( --space-2 );
 		background-color: var( --border );
 	}
 
 	.groupLabel {
-		padding: 4px 6px;
+		padding: var( --space-1 ) var( --space-1_5 );
 		color: var( --muted-foreground );
 		font-size: var( --text-xs );
 		font-weight: var( --font-weight-medium );
diff --git a/apps/ui/src/lib/ui/switch/style.module.css b/apps/ui/src/lib/ui/switch/style.module.css
index 4abf38e7f3..55a96863f1 100644
--- a/apps/ui/src/lib/ui/switch/style.module.css
+++ b/apps/ui/src/lib/ui/switch/style.module.css
@@ -8,7 +8,7 @@
 		height: 20px;
 		padding: 1px;
 		border: 1px solid transparent;
-		border-radius: 9999px;
+		border-radius: var( --radius-full );
 		background-color: var( --border );
 		cursor: pointer;
 		outline: none;
@@ -17,7 +17,7 @@
 
 	.switch::after {
 		position: absolute;
-		inset: -8px -12px;
+		inset: calc( var( --space-2 ) * -1 ) calc( var( --space-3 ) * -1 );
 		content: '';
 	}
 
@@ -46,7 +46,7 @@
 		display: block;
 		width: 16px;
 		height: 16px;
-		border-radius: 9999px;
+		border-radius: var( --radius-full );
 		background-color: var( --background );
 		box-shadow: var( --shadow-sm );
 		pointer-events: none;
diff --git a/apps/ui/src/lib/ui/tabs/style.module.css b/apps/ui/src/lib/ui/tabs/style.module.css
index 79bf54aeac..e3e19de5c7 100644
--- a/apps/ui/src/lib/ui/tabs/style.module.css
+++ b/apps/ui/src/lib/ui/tabs/style.module.css
@@ -1,7 +1,7 @@
 @layer ui {
 	.tabs {
 		display: flex;
-		gap: 8px;
+		gap: var( --space-2 );
 	}
 
 	.tabs[data-orientation='horizontal'] {
@@ -44,7 +44,7 @@
 		align-items: center;
 		align-self: flex-start;
 		height: 36px;
-		padding: 0 2px;
+		padding: 0 var( --space-0_5 );
 		border-radius: var( --radius-lg );
 		background-color: var( --muted );
 	}
@@ -59,13 +59,13 @@
 		gap: 1px;
 		width: 100%;
 		min-width: 0;
-		padding: 12px;
+		padding: var( --space-3 );
 	}
 
 	.trigger {
 		position: relative;
 		display: inline-flex;
-		gap: 6px;
+		gap: var( --space-1_5 );
 		align-items: center;
 		border-radius: var( --radius-md );
 		color: var( --foreground );
@@ -92,7 +92,7 @@
 
 	[data-variant='scope'] > .trigger {
 		height: 30px;
-		padding: 2px 10px;
+		padding: var( --space-0_5 ) var( --space-2_5 );
 		color: var( --muted-foreground );
 		font-weight: var( --font-weight-medium );
 	}
@@ -103,7 +103,7 @@
 
 	[data-variant='sidebar'] > .trigger {
 		height: 36px;
-		padding: 2px 8px;
+		padding: var( --space-0_5 ) var( --space-2 );
 		text-align: start;
 	}
 
diff --git a/apps/ui/src/lib/ui/textarea/style.module.css b/apps/ui/src/lib/ui/textarea/style.module.css
index 8e697f2a53..033ba2bb61 100644
--- a/apps/ui/src/lib/ui/textarea/style.module.css
+++ b/apps/ui/src/lib/ui/textarea/style.module.css
@@ -3,11 +3,11 @@
 		display: flex;
 		width: 100%;
 		min-height: 64px;
-		padding: 8px 10px;
+		padding: var( --space-2 ) var( --space-2_5 );
 		border: 1px solid var( --input );
 		border-radius: var( --radius-lg );
 		font-size: var( --text-sm );
-		line-height: 20px;
+		line-height: var( --text-sm--line-height );
 		outline: none;
 		field-sizing: content;
 	}
diff --git a/apps/ui/src/lib/ui/tooltip/style.module.css b/apps/ui/src/lib/ui/tooltip/style.module.css
index fc7033977a..9324891508 100644
--- a/apps/ui/src/lib/ui/tooltip/style.module.css
+++ b/apps/ui/src/lib/ui/tooltip/style.module.css
@@ -6,22 +6,22 @@
 
 	.content {
 		display: inline-flex;
-		gap: 6px;
+		gap: var( --space-1_5 );
 		align-items: center;
 		width: fit-content;
 		max-width: 320px;
-		padding: 4px 8px;
+		padding: var( --space-1 ) var( --space-2 );
 		border-radius: var( --radius-sm );
 		background-color: var( --foreground );
 		color: var( --background );
 		font-size: var( --text-xxs );
-		line-height: 1.25;
+		line-height: var( --leading-tight );
 		transform-origin: var( --transform-origin );
 		transition: opacity var( --motion-duration-feedback ) var( --motion-ease-enter );
 	}
 
 	.content:has( [data-slot='kbd'] ) {
-		padding-inline-end: 4px;
+		padding-inline-end: var( --space-1 );
 	}
 
 	.content:is( [data-starting-style], [data-ending-style] ) {

From 002f9518c437f0dd2238062e396e578381a97695 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Sun, 25 Oct 2026 11:44:23 +0100
Subject: [PATCH 02/10] Agentic UI: Share CSS recipes and keyframes, and size
 icons without a global svg rule

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/ui/README.md                             |  3 +-
 apps/ui/src/app/app-providers.tsx             |  9 +++--
 .../account/user-menu/style.module.css        |  9 +----
 .../src/features/annotations/style.module.css | 10 +----
 .../session-view/composer/style.module.css    | 33 +++--------------
 .../conversation/style.module.css             | 16 ++------
 .../queued-prompts/style.module.css           |  4 +-
 .../chats/session-view/style.module.css       |  3 +-
 .../notice-card/style.module.css              |  2 -
 .../notice-history/style.module.css           | 11 +-----
 .../welcome-dialog/style.module.css           |  6 +--
 .../settings/settings-view/style.module.css   | 12 ++----
 .../sharing/share-dialog/style.module.css     | 10 +----
 .../collapsed-site-switcher/style.module.css  |  5 ---
 .../sidebar/sidebar-header/style.module.css   |  3 +-
 .../sidebar/site-list/style.module.css        | 27 +++-----------
 .../blueprint-gallery.module.css              |  4 +-
 .../add-site-dialog/connect-panel.module.css  |  8 ++--
 .../sites/add-site-dialog/import-panel.tsx    |  2 +-
 .../sites/add-site-dialog/style.module.css    |  4 +-
 .../sites/design-system-view/style.module.css |  9 +----
 .../sites/site-preview/style.module.css       | 24 +++---------
 .../stopped-site-preview/style.module.css     |  7 +---
 .../sync/publish-panel/style.module.css       | 12 ++----
 apps/ui/src/lib/icons/README.md               |  2 +-
 apps/ui/src/lib/icons/annotate-icon.tsx       |  4 +-
 apps/ui/src/lib/icons/annotation-icon.tsx     |  4 +-
 apps/ui/src/lib/icons/appearance-icon.tsx     |  2 +-
 apps/ui/src/lib/icons/archive-icon.tsx        |  4 +-
 apps/ui/src/lib/icons/arrow-left-icon.tsx     |  4 +-
 apps/ui/src/lib/icons/arrow-right-icon.tsx    |  4 +-
 apps/ui/src/lib/icons/bell-icon.tsx           |  2 +-
 apps/ui/src/lib/icons/chat-icon.tsx           |  4 +-
 apps/ui/src/lib/icons/claude-icon.tsx         |  9 ++++-
 apps/ui/src/lib/icons/database-icon.tsx       |  2 +-
 apps/ui/src/lib/icons/duplicate-icon.tsx      |  2 +-
 .../src/lib/icons/exit-full-screen-icon.tsx   |  2 +-
 apps/ui/src/lib/icons/export-icon.tsx         |  2 +-
 apps/ui/src/lib/icons/export-site-icon.tsx    |  2 +-
 apps/ui/src/lib/icons/external-link-icon.tsx  |  4 +-
 apps/ui/src/lib/icons/folder-icon.tsx         |  2 +-
 apps/ui/src/lib/icons/globe-icon.tsx          |  4 +-
 apps/ui/src/lib/icons/import-icon.tsx         |  2 +-
 apps/ui/src/lib/icons/intelligence-icon.tsx   |  2 +-
 apps/ui/src/lib/icons/keyboard-icon.tsx       |  2 +-
 apps/ui/src/lib/icons/language-icon.tsx       |  4 +-
 apps/ui/src/lib/icons/link-icon.tsx           |  4 +-
 apps/ui/src/lib/icons/mcp-icon.tsx            |  2 +-
 apps/ui/src/lib/icons/needs-input-icon.tsx    |  4 +-
 apps/ui/src/lib/icons/new-chat-icon.tsx       |  2 +-
 apps/ui/src/lib/icons/php-icon.tsx            |  2 +-
 apps/ui/src/lib/icons/pin-icon.tsx            |  4 +-
 apps/ui/src/lib/icons/rename-icon.tsx         |  2 +-
 apps/ui/src/lib/icons/rotate-cw-icon.tsx      |  4 +-
 apps/ui/src/lib/icons/share-icon.tsx          |  2 +-
 apps/ui/src/lib/icons/sidebar-icon.tsx        |  2 +
 apps/ui/src/lib/icons/site-settings-icon.tsx  |  2 +-
 apps/ui/src/lib/icons/skills-icon.tsx         |  2 +-
 apps/ui/src/lib/icons/start-site-icon.tsx     |  4 +-
 .../src/lib/icons/stop-other-sites-icon.tsx   |  2 +-
 apps/ui/src/lib/icons/stop-site-icon.tsx      |  4 +-
 apps/ui/src/lib/icons/sync-icon.tsx           |  2 +-
 apps/ui/src/lib/icons/terminal-icon.tsx       |  2 +-
 apps/ui/src/lib/icons/trash-icon.tsx          |  2 +-
 apps/ui/src/lib/icons/unpin-icon.tsx          |  4 +-
 apps/ui/src/lib/icons/wordpress-icon.tsx      |  9 ++++-
 apps/ui/src/lib/theme/base.css                | 15 ++++----
 apps/ui/src/lib/theme/recipes.module.css      | 37 +++++++++++++++++++
 apps/ui/src/lib/ui/alert/style.module.css     |  2 -
 apps/ui/src/lib/ui/button/style.module.css    |  5 ---
 apps/ui/src/lib/ui/command/style.module.css   |  4 +-
 .../src/lib/ui/input-group/style.module.css   |  5 ---
 .../src/lib/ui/marquee-label/style.module.css |  8 +---
 .../src/lib/ui/preview-frame/style.module.css |  7 +---
 apps/ui/src/lib/ui/select/style.module.css    |  5 ---
 apps/ui/src/lib/ui/skeleton/style.module.css  |  8 +---
 apps/ui/src/lib/ui/spinner/style.module.css   |  8 +---
 apps/ui/src/lib/ui/tabs/style.module.css      |  2 -
 78 files changed, 179 insertions(+), 290 deletions(-)
 create mode 100644 apps/ui/src/lib/theme/recipes.module.css

diff --git a/apps/ui/README.md b/apps/ui/README.md
index 3d065f0f9b..23c635af1e 100644
--- a/apps/ui/README.md
+++ b/apps/ui/README.md
@@ -82,7 +82,8 @@ UI is built on Base UI with its own primitives and theme. Icons come from `lucid
 The theme lives in `src/lib/theme/`:
 
 - `tokens.css`: every design token, below.
-- `base.css`: the page and element defaults (fonts, body, headings, icon size, reduced motion and transparency).
+- `base.css`: the page and element defaults (fonts, body, headings, shared keyframes, reduced motion and transparency).
+- `recipes.module.css`: declaration groups that components pull in with `composes` (truncation, the band's hairline, the image outline, the dot on an icon).
 - `index.ts`: applies the color scheme and the Appearance settings to the root; `accent-contrast.ts` and `color.ts` keep the accent readable; `motion.ts` reads the motion tokens from script.
 
 `tokens.css` defines every token the UI uses:
diff --git a/apps/ui/src/app/app-providers.tsx b/apps/ui/src/app/app-providers.tsx
index e4969ff690..6cdf9bea92 100644
--- a/apps/ui/src/app/app-providers.tsx
+++ b/apps/ui/src/app/app-providers.tsx
@@ -1,6 +1,7 @@
 import { QueryClientProvider } from '@tanstack/react-query';
 import { defaultI18n } from '@wordpress/i18n';
 import { I18nProvider } from '@wordpress/react-i18n';
+import { LucideProvider } from 'lucide-react';
 import { useLayoutEffect } from 'react';
 import { ConnectorProvider, queryClient } from '@/data/core';
 import { useColorScheme } from '@/data/host/use-color-scheme';
@@ -48,9 +49,11 @@ function ThemedApp( { children }: PropsWithChildren ) {
 		[ colorScheme, accentColor, tintIntensity, contrast ]
 	);
 	return (
-		<TooltipProvider>
-			<OnboardingGuideProvider>{ children }</OnboardingGuideProvider>
-		</TooltipProvider>
+		<LucideProvider size={ 16 }>
+			<TooltipProvider>
+				<OnboardingGuideProvider>{ children }</OnboardingGuideProvider>
+			</TooltipProvider>
+		</LucideProvider>
 	);
 }
 
diff --git a/apps/ui/src/features/account/user-menu/style.module.css b/apps/ui/src/features/account/user-menu/style.module.css
index 5e4eeca373..508ae905f4 100644
--- a/apps/ui/src/features/account/user-menu/style.module.css
+++ b/apps/ui/src/features/account/user-menu/style.module.css
@@ -47,18 +47,13 @@
 	line-height: 1.25;
 }
 
-.accountName,
-.accountEmail {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
 .accountName {
+	composes: truncate from '@/lib/theme/recipes.module.css';
 	font-weight: var(--font-weight-medium);
 }
 
 .accountEmail {
+	composes: truncate from '@/lib/theme/recipes.module.css';
 	color: var(--muted-foreground);
 }
 
diff --git a/apps/ui/src/features/annotations/style.module.css b/apps/ui/src/features/annotations/style.module.css
index cccb0ab82c..3d37c218ba 100644
--- a/apps/ui/src/features/annotations/style.module.css
+++ b/apps/ui/src/features/annotations/style.module.css
@@ -38,6 +38,7 @@
 }
 
 .image {
+	composes: imageOutline from '@/lib/theme/recipes.module.css';
 	position: relative;
 	width: 48px;
 	height: 48px;
@@ -45,15 +46,6 @@
 	background-color: var(--muted);
 }
 
-.image::after {
-	position: absolute;
-	inset: 0;
-	border-radius: inherit;
-	box-shadow: inset 0 0 0 1px var(--border);
-	content: '';
-	pointer-events: none;
-}
-
 .image img {
 	width: 100%;
 	height: 100%;
diff --git a/apps/ui/src/features/chats/session-view/composer/style.module.css b/apps/ui/src/features/chats/session-view/composer/style.module.css
index c5d07b1d1c..df7d96f928 100644
--- a/apps/ui/src/features/chats/session-view/composer/style.module.css
+++ b/apps/ui/src/features/chats/session-view/composer/style.module.css
@@ -31,11 +31,9 @@
 }
 
 .noticeMessage {
+	composes: truncate from '@/lib/theme/recipes.module.css';
 	flex: 1;
 	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
 }
 
 @keyframes submitShake {
@@ -128,6 +126,7 @@
 }
 
 .attachment {
+	composes: imageOutline from '@/lib/theme/recipes.module.css';
 	position: relative;
 	display: flex;
 	background-color: var(--muted);
@@ -136,16 +135,6 @@
 	user-select: none;
 }
 
-/* The border sits inside the tile so images keep their full size. */
-.attachment::after {
-	position: absolute;
-	inset: 0;
-	border-radius: inherit;
-	box-shadow: inset 0 0 0 1px var(--border);
-	content: '';
-	pointer-events: none;
-}
-
 .attachmentImage {
 	width: 96px;
 	height: 96px;
@@ -172,8 +161,6 @@
 
 .attachmentFile svg:not([data-size]) {
 	flex: none;
-	width: 16px;
-	height: 16px;
 }
 
 .attachmentThumb {
@@ -184,10 +171,8 @@
 }
 
 .attachmentName {
+	composes: truncate from '@/lib/theme/recipes.module.css';
 	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
 }
 
 .attachmentRemove {
@@ -266,21 +251,17 @@
 }
 
 .attachmentHoverName {
-	overflow: hidden;
+	composes: truncate from '@/lib/theme/recipes.module.css';
 	font-size: var(--text-xxs);
 	font-weight: var(--font-weight-semibold);
 	line-height: 1.25;
-	text-overflow: ellipsis;
-	white-space: nowrap;
 }
 
 .attachmentHoverMeta {
-	overflow: hidden;
+	composes: truncate from '@/lib/theme/recipes.module.css';
 	color: var(--muted-foreground);
 	font-size: 11px;
 	line-height: 1.2;
-	text-overflow: ellipsis;
-	white-space: nowrap;
 }
 
 .inputArea {
@@ -301,16 +282,14 @@
 }
 
 .placeholder {
+	composes: truncate from '@/lib/theme/recipes.module.css';
 	position: absolute;
 	top: 14px;
 	right: 14px;
 	left: 14px;
-	overflow: hidden;
 	color: var(--muted-foreground);
 	font-size: var(--text-sm);
 	line-height: 20px;
-	text-overflow: ellipsis;
-	white-space: nowrap;
 	pointer-events: none;
 }
 
diff --git a/apps/ui/src/features/chats/session-view/conversation/style.module.css b/apps/ui/src/features/chats/session-view/conversation/style.module.css
index e86d657e86..1bbe92a797 100644
--- a/apps/ui/src/features/chats/session-view/conversation/style.module.css
+++ b/apps/ui/src/features/chats/session-view/conversation/style.module.css
@@ -35,9 +35,7 @@
 }
 
 .annotationElementText {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+	composes: truncate from '@/lib/theme/recipes.module.css';
 }
 
 .userTextRow,
@@ -158,9 +156,7 @@
 }
 
 .userAttachmentName {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+	composes: truncate from '@/lib/theme/recipes.module.css';
 }
 
 .activity {
@@ -188,13 +184,11 @@
 }
 
 .activityProgress {
+	composes: truncate from '@/lib/theme/recipes.module.css';
 	color: var(--muted-foreground);
 	font-size: var(--text-xs);
 	line-height: 20px;
 	opacity: 0.8;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
 }
 
 .traceLine {
@@ -213,10 +207,8 @@
 }
 
 .traceTitle {
+	composes: truncate from '@/lib/theme/recipes.module.css';
 	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
 }
 
 .traceTrigger {
diff --git a/apps/ui/src/features/chats/session-view/queued-prompts/style.module.css b/apps/ui/src/features/chats/session-view/queued-prompts/style.module.css
index 3173e3a24c..61df99454f 100644
--- a/apps/ui/src/features/chats/session-view/queued-prompts/style.module.css
+++ b/apps/ui/src/features/chats/session-view/queued-prompts/style.module.css
@@ -29,12 +29,10 @@
 }
 
 .text {
+	composes: truncate from '@/lib/theme/recipes.module.css';
 	flex: 1;
 	min-width: 0;
-	overflow: hidden;
 	color: var(--muted-foreground);
-	text-overflow: ellipsis;
-	white-space: nowrap;
 }
 
 .actions {
diff --git a/apps/ui/src/features/chats/session-view/style.module.css b/apps/ui/src/features/chats/session-view/style.module.css
index f194701260..82a39687b5 100644
--- a/apps/ui/src/features/chats/session-view/style.module.css
+++ b/apps/ui/src/features/chats/session-view/style.module.css
@@ -18,6 +18,7 @@
 }
 
 .header {
+	composes: bandEdge from '@/lib/theme/recipes.module.css';
 	display: flex;
 	align-items: center;
 	gap: 4px;
@@ -25,8 +26,6 @@
 	height: var(--band-height);
 	transition: padding var(--motion-duration-layout) var(--motion-ease-layout);
 	background-color: var(--chrome);
-	box-shadow: inset 0 calc(-1 * 1px) 0
-		var(--border);
 	font-size: var(--text-xxs);
 	color: var(--foreground);
 	-webkit-app-region: drag;
diff --git a/apps/ui/src/features/notifications/notice-card/style.module.css b/apps/ui/src/features/notifications/notice-card/style.module.css
index 418a9c3e30..cbb7a41b5c 100644
--- a/apps/ui/src/features/notifications/notice-card/style.module.css
+++ b/apps/ui/src/features/notifications/notice-card/style.module.css
@@ -142,8 +142,6 @@
 }
 
 .chevron svg {
-	width: 16px;
-	height: 16px;
 	transition: rotate var(--motion-duration-layout) var(--motion-ease-layout);
 }
 
diff --git a/apps/ui/src/features/notifications/notice-history/style.module.css b/apps/ui/src/features/notifications/notice-history/style.module.css
index 6de34876a8..8ce772fbbf 100644
--- a/apps/ui/src/features/notifications/notice-history/style.module.css
+++ b/apps/ui/src/features/notifications/notice-history/style.module.css
@@ -1,20 +1,13 @@
 .bell {
+	composes: dotted from '@/lib/theme/recipes.module.css';
 	position: relative;
 }
 
-.bell:has(.dot) svg {
-	mask-image: radial-gradient(circle at calc(100% - 2px) 2px, transparent 5.5px, #000 6px);
-}
-
 .dot {
-	position: absolute;
+	composes: dot from '@/lib/theme/recipes.module.css';
 	/* Inside the button's 1px border. */
 	inset-block-start: 7.5px;
 	inset-inline-end: 7.5px;
-	width: 7px;
-	height: 7px;
-	border-radius: 50%;
-	background-color: var(--accent);
 	pointer-events: none;
 }
 
diff --git a/apps/ui/src/features/onboarding/welcome-dialog/style.module.css b/apps/ui/src/features/onboarding/welcome-dialog/style.module.css
index 73f45e1f06..38db68c11f 100644
--- a/apps/ui/src/features/onboarding/welcome-dialog/style.module.css
+++ b/apps/ui/src/features/onboarding/welcome-dialog/style.module.css
@@ -53,8 +53,6 @@
 
 .perksList svg {
 	flex: none;
-	width: 16px;
-	height: 16px;
 }
 
 .perksList b {
@@ -97,10 +95,8 @@
 }
 
 .accountName {
+	composes: truncate from '@/lib/theme/recipes.module.css';
 	font-weight: var(--font-weight-medium);
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
 }
 
 .accountHint {
diff --git a/apps/ui/src/features/settings/settings-view/style.module.css b/apps/ui/src/features/settings/settings-view/style.module.css
index 955af2f2a2..e87dd87acc 100644
--- a/apps/ui/src/features/settings/settings-view/style.module.css
+++ b/apps/ui/src/features/settings/settings-view/style.module.css
@@ -100,15 +100,13 @@
 	outline-offset: 2px;
 }
 
-.pathPickerValue,
-.pathPickerPlaceholder {
+.pathPickerValue {
+	composes: truncate from '@/lib/theme/recipes.module.css';
 	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
 }
 
 .pathPickerPlaceholder {
+	composes: pathPickerValue;
 	color: var(--muted-foreground);
 }
 
@@ -251,12 +249,10 @@
 
 
 .previewLink {
+	composes: truncate from '@/lib/theme/recipes.module.css';
 	max-width: 100%;
-	overflow: hidden;
 	color: var(--accent-text);
 	text-align: start;
-	text-overflow: ellipsis;
-	white-space: nowrap;
 	cursor: pointer;
 }
 
diff --git a/apps/ui/src/features/sharing/share-dialog/style.module.css b/apps/ui/src/features/sharing/share-dialog/style.module.css
index cb3b4ad064..e009193e64 100644
--- a/apps/ui/src/features/sharing/share-dialog/style.module.css
+++ b/apps/ui/src/features/sharing/share-dialog/style.module.css
@@ -44,6 +44,7 @@
 }
 
 .frame {
+	composes: imageOutline from '@/lib/theme/recipes.module.css';
 	position: relative;
 	display: flex;
 	align-items: center;
@@ -54,15 +55,6 @@
 	background: var(--muted);
 }
 
-.frame::after {
-	content: '';
-	position: absolute;
-	inset: 0;
-	border-radius: inherit;
-	box-shadow: inset 0 0 0 1px var(--border);
-	pointer-events: none;
-}
-
 .frame img {
 	width: 100%;
 	height: 100%;
diff --git a/apps/ui/src/features/sidebar/collapsed-site-switcher/style.module.css b/apps/ui/src/features/sidebar/collapsed-site-switcher/style.module.css
index 540bc67dd1..87e7bda98b 100644
--- a/apps/ui/src/features/sidebar/collapsed-site-switcher/style.module.css
+++ b/apps/ui/src/features/sidebar/collapsed-site-switcher/style.module.css
@@ -22,11 +22,6 @@
 	padding-block-end: 8px;
 }
 
-.surface svg {
-	width: 16px;
-	height: 16px;
-}
-
 .openSidebarCta {
 	display: flex;
 	align-items: center;
diff --git a/apps/ui/src/features/sidebar/sidebar-header/style.module.css b/apps/ui/src/features/sidebar/sidebar-header/style.module.css
index cba8cd3897..89cbcba1f4 100644
--- a/apps/ui/src/features/sidebar/sidebar-header/style.module.css
+++ b/apps/ui/src/features/sidebar/sidebar-header/style.module.css
@@ -1,6 +1,7 @@
 /* The sidebar's part of the workspace's top band: the app menu (Windows and
    Linux) and the sidebar toggle at its start, past the macOS traffic lights. */
 .root {
+	composes: bandEdge from '@/lib/theme/recipes.module.css';
 	--toggle-start: var(--traffic-light-space);
 	display: flex;
 	align-items: center;
@@ -8,8 +9,6 @@
 	height: var(--band-height);
 	flex-shrink: 0;
 	padding-inline: var(--traffic-light-space) 12px;
-	box-shadow: inset 0 calc(-1 * 1px) 0
-		var(--border);
 	-webkit-app-region: drag;
 	/* Stay pinned while the sidebar scrolls. Opaque background so
 	   scrolling content doesn't bleed through. */
diff --git a/apps/ui/src/features/sidebar/site-list/style.module.css b/apps/ui/src/features/sidebar/site-list/style.module.css
index 4152d7b21e..e1277fc70a 100644
--- a/apps/ui/src/features/sidebar/site-list/style.module.css
+++ b/apps/ui/src/features/sidebar/site-list/style.module.css
@@ -86,6 +86,7 @@
 }
 
 .siteIcon {
+	composes: dotted from '@/lib/theme/recipes.module.css';
 	position: relative;
 	display: inline-flex;
 	flex-shrink: 0;
@@ -96,18 +97,10 @@
 	height: 16px;
 }
 
-.siteIcon:has(.runningDot) > svg {
-	mask-image: radial-gradient(circle at calc(100% - 2px) 2px, transparent 5.5px, #000 6px);
-}
-
 .runningDot {
-	position: absolute;
+	composes: dot from '@/lib/theme/recipes.module.css';
 	top: -1.5px;
 	right: -1.5px;
-	width: 7px;
-	height: 7px;
-	border-radius: 50%;
-	background-color: var(--accent);
 }
 
 .siteText {
@@ -200,12 +193,10 @@
 }
 
 .siteName {
+	composes: truncate from '@/lib/theme/recipes.module.css';
 	--shimmer-highlight: var(--muted-foreground);
 
 	color: var(--foreground);
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
 	max-width: 100%;
 }
 
@@ -395,7 +386,7 @@
 	height: 16px;
 	border-radius: var(--radius-md);
 	background-color: var(--muted);
-	animation: skeletonPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+	animation: global(studio-pulse) 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
 .skeleton:first-child {
@@ -408,12 +399,6 @@
 	margin-inline: var(--site-list-row-padding);
 }
 
-@keyframes skeletonPulse {
-	50% {
-		opacity: 0.5;
-	}
-}
-
 .chatRow {
 	position: relative;
 	display: flex;
@@ -467,13 +452,11 @@
 }
 
 .chatTitle {
+	composes: truncate from '@/lib/theme/recipes.module.css';
 	--shimmer-highlight: var(--muted-foreground);
 
 	flex: 1 1 auto;
 	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
 	text-align: start;
 }
 
diff --git a/apps/ui/src/features/sites/add-site-dialog/blueprint-gallery.module.css b/apps/ui/src/features/sites/add-site-dialog/blueprint-gallery.module.css
index cd382dd7f9..3e50999bd8 100644
--- a/apps/ui/src/features/sites/add-site-dialog/blueprint-gallery.module.css
+++ b/apps/ui/src/features/sites/add-site-dialog/blueprint-gallery.module.css
@@ -38,10 +38,8 @@
 }
 
 .cardTitle {
+	composes: truncate from '@/lib/theme/recipes.module.css';
 	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
 }
 
 .image {
diff --git a/apps/ui/src/features/sites/add-site-dialog/connect-panel.module.css b/apps/ui/src/features/sites/add-site-dialog/connect-panel.module.css
index be19bcd88f..802e782ba2 100644
--- a/apps/ui/src/features/sites/add-site-dialog/connect-panel.module.css
+++ b/apps/ui/src/features/sites/add-site-dialog/connect-panel.module.css
@@ -127,14 +127,12 @@
 	min-width: 0;
 }
 
-.siteName,
-.siteUrl {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+.siteName {
+	composes: truncate from '@/lib/theme/recipes.module.css';
 }
 
 .siteUrl {
+	composes: siteName;
 	color: var(--muted-foreground);
 	font-weight: var(--font-weight-normal);
 }
diff --git a/apps/ui/src/features/sites/add-site-dialog/import-panel.tsx b/apps/ui/src/features/sites/add-site-dialog/import-panel.tsx
index eb056120ca..360d8c07bb 100644
--- a/apps/ui/src/features/sites/add-site-dialog/import-panel.tsx
+++ b/apps/ui/src/features/sites/add-site-dialog/import-panel.tsx
@@ -95,7 +95,7 @@ export function BackupDropZone( { onFile }: { onFile: ( file: File ) => void } )
 					handleFile( event.dataTransfer.files[ 0 ] );
 				} }
 			>
-				<UploadIcon className={ styles.dropIcon } data-keep-size />
+				<UploadIcon className={ styles.dropIcon } size={ 24 } />
 				<p className={ styles.dropLabel }>{ __( 'Drop a WordPress backup here.' ) }</p>
 				<input
 					ref={ inputRef }
diff --git a/apps/ui/src/features/sites/add-site-dialog/style.module.css b/apps/ui/src/features/sites/add-site-dialog/style.module.css
index cc81856ef6..18573892ae 100644
--- a/apps/ui/src/features/sites/add-site-dialog/style.module.css
+++ b/apps/ui/src/features/sites/add-site-dialog/style.module.css
@@ -18,10 +18,8 @@
 }
 
 .title {
+	composes: truncate from '@/lib/theme/recipes.module.css';
 	display: block;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
 }
 
 .crumbSeparator {
diff --git a/apps/ui/src/features/sites/design-system-view/style.module.css b/apps/ui/src/features/sites/design-system-view/style.module.css
index 33c477166e..58dee273f2 100644
--- a/apps/ui/src/features/sites/design-system-view/style.module.css
+++ b/apps/ui/src/features/sites/design-system-view/style.module.css
@@ -202,21 +202,16 @@
 }
 
 .tileHex {
+	composes: truncate from '@/lib/theme/recipes.module.css';
 	text-transform: uppercase;
 }
 
 .tileName {
+	composes: truncate from '@/lib/theme/recipes.module.css';
 	text-transform: capitalize;
 	opacity: 0.8;
 }
 
-.tileHex,
-.tileName {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
 .scale {
 	display: flex;
 	flex-direction: column;
diff --git a/apps/ui/src/features/sites/site-preview/style.module.css b/apps/ui/src/features/sites/site-preview/style.module.css
index d0cebb9ab1..f9b7868fea 100644
--- a/apps/ui/src/features/sites/site-preview/style.module.css
+++ b/apps/ui/src/features/sites/site-preview/style.module.css
@@ -15,6 +15,7 @@
 /* Navigation at the start, the address centred in the room left over, and
    actions at the end. */
 .header {
+	composes: bandEdge from '@/lib/theme/recipes.module.css';
 	position: relative;
 	display: flex;
 	align-items: center;
@@ -24,8 +25,6 @@
 	flex-shrink: 0;
 	transition: padding var(--motion-duration-layout) var(--motion-ease-layout);
 	background-color: var(--chrome);
-	box-shadow: inset 0 calc(-1 * 1px) 0
-		var(--border);
 	-webkit-app-region: drag;
 }
 
@@ -62,6 +61,7 @@
 
 /* Holds the address field's place while the site starts or stops. */
 .addressStatus {
+	composes: truncate from '@/lib/theme/recipes.module.css';
 	display: flex;
 	flex: 1 1 auto;
 	min-width: 0;
@@ -74,9 +74,6 @@
 	border-radius: 999px;
 	color: var(--muted-foreground);
 	font-size: var(--text-xxs);
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
 	user-select: none;
 }
 
@@ -87,18 +84,13 @@
 	flex-direction: column;
 }
 
-.historyTitle,
-.historyPath {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
 .historyTitle {
+	composes: truncate from '@/lib/theme/recipes.module.css';
 	color: var(--foreground);
 }
 
 .historyPath {
+	composes: truncate from '@/lib/theme/recipes.module.css';
 	color: var(--muted-foreground);
 	font-size: 11px;
 }
@@ -224,13 +216,7 @@
 	border-radius: 50%;
 	border: 2px solid var(--border);
 	border-top-color: var(--accent-text);
-	animation: sitePreviewSpin 0.8s linear infinite;
-}
-
-@keyframes sitePreviewSpin {
-	to {
-		transform: rotate(360deg);
-	}
+	animation: global(studio-spin) 0.8s linear infinite;
 }
 
 /* Studio renders the design system itself, so its surface scrolls like a page. */
diff --git a/apps/ui/src/features/sites/stopped-site-preview/style.module.css b/apps/ui/src/features/sites/stopped-site-preview/style.module.css
index 6c5e380019..709339117c 100644
--- a/apps/ui/src/features/sites/stopped-site-preview/style.module.css
+++ b/apps/ui/src/features/sites/stopped-site-preview/style.module.css
@@ -8,6 +8,7 @@
 }
 
 .frame {
+	composes: imageOutline from '@/lib/theme/recipes.module.css';
 	position: relative;
 	display: block;
 	width: 100%;
@@ -19,13 +20,7 @@
 }
 
 .frame::after {
-	position: absolute;
 	z-index: 1;
-	inset: 0;
-	border-radius: inherit;
-	box-shadow: inset 0 0 0 1px var(--border);
-	content: '';
-	pointer-events: none;
 }
 
 .frame img {
diff --git a/apps/ui/src/features/sync/publish-panel/style.module.css b/apps/ui/src/features/sync/publish-panel/style.module.css
index c26c1a1817..ee1a5be826 100644
--- a/apps/ui/src/features/sync/publish-panel/style.module.css
+++ b/apps/ui/src/features/sync/publish-panel/style.module.css
@@ -159,15 +159,13 @@
 	gap: 4px;
 }
 
-.choiceName,
-.choiceLabel {
+.choiceName {
+	composes: truncate from '@/lib/theme/recipes.module.css';
 	max-width: 100%;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
 }
 
 .choiceLabel {
+	composes: choiceName;
 	color: var(--muted-foreground);
 }
 
@@ -186,15 +184,13 @@
 }
 
 .address {
+	composes: truncate from '@/lib/theme/recipes.module.css';
 	display: block;
 	min-width: 0;
-	overflow: hidden;
 	font-size: var(--text-sm);
 	font-weight: var(--font-weight-medium);
 	line-height: 20px;
 	letter-spacing: -0.02em;
-	text-overflow: ellipsis;
-	white-space: nowrap;
 }
 
 .progress,
diff --git a/apps/ui/src/lib/icons/README.md b/apps/ui/src/lib/icons/README.md
index 4ace45c87c..03ea753490 100644
--- a/apps/ui/src/lib/icons/README.md
+++ b/apps/ui/src/lib/icons/README.md
@@ -18,4 +18,4 @@ import { PinIcon } from '@/lib/icons';
 
 - One file per icon, named `<name>-icon.tsx`, re-exported from `index.ts`.
 - Drawn the same way as lucide: a 24px grid, `stroke="currentColor"`, `strokeWidth="2"`, round caps and joins, `aria-hidden`.
-- Size and color come from CSS: `base.css` sizes icons, and `data-keep-size` opts out.
+- Icons render at 16px, like lucide's under the app's `LucideProvider`; a component's CSS (or `size` on a lucide icon) sets another size. Color comes from CSS.
diff --git a/apps/ui/src/lib/icons/annotate-icon.tsx b/apps/ui/src/lib/icons/annotate-icon.tsx
index 0523d46d8d..825a660a5f 100644
--- a/apps/ui/src/lib/icons/annotate-icon.tsx
+++ b/apps/ui/src/lib/icons/annotate-icon.tsx
@@ -3,8 +3,8 @@ import type { ComponentProps } from 'react';
 export function AnnotateIcon( props: ComponentProps< 'svg' > ) {
 	return (
 		<svg
-			width="24"
-			height="24"
+			width="16"
+			height="16"
 			viewBox="0 0 24 24"
 			fill="none"
 			xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/ui/src/lib/icons/annotation-icon.tsx b/apps/ui/src/lib/icons/annotation-icon.tsx
index 01a4a637fb..a443c2496c 100644
--- a/apps/ui/src/lib/icons/annotation-icon.tsx
+++ b/apps/ui/src/lib/icons/annotation-icon.tsx
@@ -3,8 +3,8 @@ import type { ComponentProps } from 'react';
 export function AnnotationIcon( props: ComponentProps< 'svg' > ) {
 	return (
 		<svg
-			width="24"
-			height="24"
+			width="16"
+			height="16"
 			viewBox="0 0 24 24"
 			fill="none"
 			xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/ui/src/lib/icons/appearance-icon.tsx b/apps/ui/src/lib/icons/appearance-icon.tsx
index a098bbbd57..2207c182c1 100644
--- a/apps/ui/src/lib/icons/appearance-icon.tsx
+++ b/apps/ui/src/lib/icons/appearance-icon.tsx
@@ -2,7 +2,7 @@ import type { ComponentProps } from 'react';
 
 export function AppearanceIcon( props: ComponentProps< 'svg' > ) {
 	return (
-		<svg viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
+		<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
 			<path
 				d="M7.4 12.25H7.6M10.4 8H10.6M15.4 9.5H15.6M8 12.25C8 12.5261 7.77614 12.75 7.5 12.75C7.22386 12.75 7 12.5261 7 12.25C7 11.9739 7.22386 11.75 7.5 11.75C7.77614 11.75 8 11.9739 8 12.25ZM11 8C11 8.27614 10.7761 8.5 10.5 8.5C10.2239 8.5 10 8.27614 10 8C10 7.72386 10.2239 7.5 10.5 7.5C10.7761 7.5 11 7.72386 11 8ZM16 9.5C16 9.77614 15.7761 10 15.5 10C15.2239 10 15 9.77614 15 9.5C15 9.22386 15.2239 9 15.5 9C15.7761 9 16 9.22386 16 9.5ZM12 20.5C7.02944 20.5 3 16.6944 3 12C3 7.30558 7.02944 3.5 12 3.5C16.9706 3.5 21 7.30558 21 12C21 18.9062 13.6125 12.7751 12 16C11 18 14.8273 20.5 12 20.5Z"
 				stroke="currentColor"
diff --git a/apps/ui/src/lib/icons/archive-icon.tsx b/apps/ui/src/lib/icons/archive-icon.tsx
index 745fe40e30..85da7c91ca 100644
--- a/apps/ui/src/lib/icons/archive-icon.tsx
+++ b/apps/ui/src/lib/icons/archive-icon.tsx
@@ -3,8 +3,8 @@ import type { ComponentProps } from 'react';
 export function ArchiveIcon( props: ComponentProps< 'svg' > ) {
 	return (
 		<svg
-			width="24"
-			height="24"
+			width="16"
+			height="16"
 			viewBox="0 0 24 24"
 			fill="none"
 			xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/ui/src/lib/icons/arrow-left-icon.tsx b/apps/ui/src/lib/icons/arrow-left-icon.tsx
index fb8d9af3b2..a626b8bf3a 100644
--- a/apps/ui/src/lib/icons/arrow-left-icon.tsx
+++ b/apps/ui/src/lib/icons/arrow-left-icon.tsx
@@ -3,8 +3,8 @@ import type { ComponentProps } from 'react';
 export function ArrowLeftIcon( props: ComponentProps< 'svg' > ) {
 	return (
 		<svg
-			width="24"
-			height="24"
+			width="16"
+			height="16"
 			viewBox="0 0 24 24"
 			fill="none"
 			xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/ui/src/lib/icons/arrow-right-icon.tsx b/apps/ui/src/lib/icons/arrow-right-icon.tsx
index 6cb82f2536..1ff17c9a04 100644
--- a/apps/ui/src/lib/icons/arrow-right-icon.tsx
+++ b/apps/ui/src/lib/icons/arrow-right-icon.tsx
@@ -3,8 +3,8 @@ import type { ComponentProps } from 'react';
 export function ArrowRightIcon( props: ComponentProps< 'svg' > ) {
 	return (
 		<svg
-			width="24"
-			height="24"
+			width="16"
+			height="16"
 			viewBox="0 0 24 24"
 			fill="none"
 			xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/ui/src/lib/icons/bell-icon.tsx b/apps/ui/src/lib/icons/bell-icon.tsx
index a90874865e..7a39661982 100644
--- a/apps/ui/src/lib/icons/bell-icon.tsx
+++ b/apps/ui/src/lib/icons/bell-icon.tsx
@@ -2,7 +2,7 @@ import type { ComponentProps } from 'react';
 
 export function BellIcon( props: ComponentProps< 'svg' > ) {
 	return (
-		<svg viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
+		<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
 			<path
 				d="M16 17C16 19.2091 14.2091 21 12 21C9.79086 21 8 19.2091 8 17M18.2996 8.99251L18.4686 12.3712C18.4893 12.7859 18.5959 13.1917 18.7815 13.5631L19.9146 15.8292C19.9708 15.9415 20 16.0654 20 16.191C20 16.6378 19.6378 17 19.191 17H4.80902C4.36221 17 4 16.6378 4 16.191C4 16.0654 4.02924 15.9415 4.08541 15.8292L5.21846 13.5631C5.40413 13.1917 5.51071 12.7859 5.53144 12.3712L5.70037 8.99251C5.86822 5.63561 8.6389 3 12 3C15.3611 3 18.1318 5.63561 18.2996 8.99251Z"
 				stroke="currentColor"
diff --git a/apps/ui/src/lib/icons/chat-icon.tsx b/apps/ui/src/lib/icons/chat-icon.tsx
index e57ae111fb..eefef79011 100644
--- a/apps/ui/src/lib/icons/chat-icon.tsx
+++ b/apps/ui/src/lib/icons/chat-icon.tsx
@@ -3,8 +3,8 @@ import type { ComponentProps } from 'react';
 export function ChatIcon( props: ComponentProps< 'svg' > ) {
 	return (
 		<svg
-			width="24"
-			height="24"
+			width="16"
+			height="16"
 			viewBox="0 0 24 24"
 			fill="none"
 			xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/ui/src/lib/icons/claude-icon.tsx b/apps/ui/src/lib/icons/claude-icon.tsx
index 16297c509f..b82351ab19 100644
--- a/apps/ui/src/lib/icons/claude-icon.tsx
+++ b/apps/ui/src/lib/icons/claude-icon.tsx
@@ -3,7 +3,14 @@ import type { ComponentProps } from 'react';
 // https://github.com/simple-icons/simple-icons/blob/develop/icons/claude.svg
 export function ClaudeIcon( props: ComponentProps< 'svg' > ) {
 	return (
-		<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" { ...props }>
+		<svg
+			width="16"
+			height="16"
+			viewBox="0 0 24 24"
+			fill="currentColor"
+			aria-hidden="true"
+			{ ...props }
+		>
 			<path d="m4.7144 15.9555 4.7174-2.6471.079-.2307-.079-.1275h-.2307l-.7893-.0486-2.6956-.0729-2.3375-.0971-2.2646-.1214-.5707-.1215-.5343-.7042.0546-.3522.4797-.3218.686.0608 1.5179.1032 2.2767.1578 1.6514.0972 2.4468.255h.3886l.0546-.1579-.1336-.0971-.1032-.0972L6.973 9.8356l-2.55-1.6879-1.3356-.9714-.7225-.4918-.3643-.4614-.1578-1.0078.6557-.7225.8803.0607.2246.0607.8925.686 1.9064 1.4754 2.4893 1.8336.3643.3035.1457-.1032.0182-.0728-.164-.2733-1.3539-2.4467-1.445-2.4893-.6435-1.032-.17-.6194c-.0607-.255-.1032-.4674-.1032-.7285L6.287.1335 6.6997 0l.9957.1336.419.3642.6192 1.4147 1.0018 2.2282 1.5543 3.0296.4553.8985.2429.8318.091.255h.1579v-.1457l.1275-1.706.2368-2.0947.2307-2.6957.0789-.7589.3764-.9107.7468-.4918.5828.2793.4797.686-.0668.4433-.2853 1.8517-.5586 2.9021-.3643 1.9429h.2125l.2429-.2429.9835-1.3053 1.6514-2.0643.7286-.8196.85-.9046.5464-.4311h1.0321l.759 1.1293-.34 1.1657-1.0625 1.3478-.8804 1.1414-1.2628 1.7-.7893 1.36.0729.1093.1882-.0183 2.8535-.607 1.5421-.2794 1.8396-.3157.8318.3886.091.3946-.3278.8075-1.967.4857-2.3072.4614-3.4364.8136-.0425.0304.0486.0607 1.5482.1457.6618.0364h1.621l3.0175.2247.7892.522.4736.6376-.079.4857-1.2142.6193-1.6393-.3886-3.825-.9107-1.3113-.3279h-.1822v.1093l1.0929 1.0686 2.0035 1.8092 2.5075 2.3314.1275.5768-.3218.4554-.34-.0486-2.2039-1.6575-.85-.7468-1.9246-1.621h-.1275v.17l.4432.6496 2.3436 3.5214.1214 1.0807-.17.3521-.6071.2125-.6679-.1214-1.3721-1.9246L14.38 17.959l-1.1414-1.9428-.1397.079-.674 7.2552-.3156.3703-.7286.2793-.6071-.4614-.3218-.7468.3218-1.4753.3886-1.9246.3157-1.53.2853-1.9004.17-.6314-.0121-.0425-.1397.0182-1.4328 1.9672-2.1796 2.9446-1.7243 1.8456-.4128.164-.7164-.3704.0667-.6618.4008-.5889 2.386-3.0357 1.4389-1.882.929-1.0868-.0062-.1579h-.0546l-6.3385 4.1164-1.1293.1457-.4857-.4554.0608-.7467.2307-.2429 1.9064-1.3114Z" />
 		</svg>
 	);
diff --git a/apps/ui/src/lib/icons/database-icon.tsx b/apps/ui/src/lib/icons/database-icon.tsx
index 0ffc1f7177..5cb48aad90 100644
--- a/apps/ui/src/lib/icons/database-icon.tsx
+++ b/apps/ui/src/lib/icons/database-icon.tsx
@@ -2,7 +2,7 @@ import type { ComponentProps } from 'react';
 
 export function DatabaseIcon( props: ComponentProps< 'svg' > ) {
 	return (
-		<svg viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
+		<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
 			<path
 				d="M19.25 12C19.25 13.3807 16.0041 14.5 12 14.5C7.99594 14.5 4.75 13.3807 4.75 12M4.75 6V18.6806C4.75 20.0996 7.99594 21.25 12 21.25C16.0041 21.25 19.25 20.0996 19.25 18.6806V6M19.25 5.31944C19.25 6.73851 16.0041 7.88889 12 7.88889C7.99594 7.88889 4.75 6.73851 4.75 5.31944C4.75 3.90038 7.99594 2.75 12 2.75C16.0041 2.75 19.25 3.90038 19.25 5.31944Z"
 				stroke="currentColor"
diff --git a/apps/ui/src/lib/icons/duplicate-icon.tsx b/apps/ui/src/lib/icons/duplicate-icon.tsx
index 53338b0c6b..7c944efc14 100644
--- a/apps/ui/src/lib/icons/duplicate-icon.tsx
+++ b/apps/ui/src/lib/icons/duplicate-icon.tsx
@@ -2,7 +2,7 @@ import type { ComponentProps } from 'react';
 
 export function DuplicateIcon( props: ComponentProps< 'svg' > ) {
 	return (
-		<svg viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
+		<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
 			<path
 				d="M15 9V5.25C15 4.00736 13.9926 3 12.75 3H5.25C4.00736 3 3 4.00736 3 5.25V12.75C3 13.9926 4.00736 15 5.25 15H9M11.25 9H18.75C19.9926 9 21 10.0074 21 11.25V18.75C21 19.9926 19.9926 21 18.75 21H11.25C10.0074 21 9 19.9926 9 18.75V11.25C9 10.0074 10.0074 9 11.25 9Z"
 				stroke="currentColor"
diff --git a/apps/ui/src/lib/icons/exit-full-screen-icon.tsx b/apps/ui/src/lib/icons/exit-full-screen-icon.tsx
index ecc6ba62ea..35844f7acb 100644
--- a/apps/ui/src/lib/icons/exit-full-screen-icon.tsx
+++ b/apps/ui/src/lib/icons/exit-full-screen-icon.tsx
@@ -2,7 +2,7 @@ import type { ComponentProps } from 'react';
 
 export function ExitFullScreenIcon( props: ComponentProps< 'svg' > ) {
 	return (
-		<svg viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
+		<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
 			<path
 				d="M20 16H19C17.3431 16 16 17.3431 16 19V20M4 16H5C6.65685 16 8 17.3431 8 19V20M8 4V5C8 6.65685 6.65685 8 5 8H4M20 8H19C17.3431 8 16 6.65685 16 5V4"
 				stroke="currentColor"
diff --git a/apps/ui/src/lib/icons/export-icon.tsx b/apps/ui/src/lib/icons/export-icon.tsx
index 8cf2d0dc2b..33ff324c5a 100644
--- a/apps/ui/src/lib/icons/export-icon.tsx
+++ b/apps/ui/src/lib/icons/export-icon.tsx
@@ -2,7 +2,7 @@ import type { ComponentProps } from 'react';
 
 export function ExportIcon( props: ComponentProps< 'svg' > ) {
 	return (
-		<svg viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
+		<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
 			<path
 				fillRule="evenodd"
 				clipRule="evenodd"
diff --git a/apps/ui/src/lib/icons/export-site-icon.tsx b/apps/ui/src/lib/icons/export-site-icon.tsx
index 6388b45d0a..641573bfed 100644
--- a/apps/ui/src/lib/icons/export-site-icon.tsx
+++ b/apps/ui/src/lib/icons/export-site-icon.tsx
@@ -2,7 +2,7 @@ import type { ComponentProps } from 'react';
 
 export function ExportSiteIcon( props: ComponentProps< 'svg' > ) {
 	return (
-		<svg viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
+		<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
 			<path
 				d="M7.4 7.5H7.6M4 11V7C4 5.34315 5.34315 4 7 4H17C18.6569 4 20 5.34315 20 7V11M4 11V17C4 18.6569 5.34315 20 7 20H17C18.6569 20 20 18.6569 20 17V11M4 11H20M11 7.5H17M8 7.5C8 7.77614 7.77614 8 7.5 8C7.22386 8 7 7.77614 7 7.5C7 7.22386 7.22386 7 7.5 7C7.77614 7 8 7.22386 8 7.5Z"
 				stroke="currentColor"
diff --git a/apps/ui/src/lib/icons/external-link-icon.tsx b/apps/ui/src/lib/icons/external-link-icon.tsx
index 9b118eb696..a07a3cb2ab 100644
--- a/apps/ui/src/lib/icons/external-link-icon.tsx
+++ b/apps/ui/src/lib/icons/external-link-icon.tsx
@@ -3,8 +3,8 @@ import type { ComponentProps } from 'react';
 export function ExternalLinkIcon( props: ComponentProps< 'svg' > ) {
 	return (
 		<svg
-			width="24"
-			height="24"
+			width="16"
+			height="16"
 			viewBox="0 0 24 24"
 			fill="none"
 			xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/ui/src/lib/icons/folder-icon.tsx b/apps/ui/src/lib/icons/folder-icon.tsx
index 5c7bd386bf..0b37667cab 100644
--- a/apps/ui/src/lib/icons/folder-icon.tsx
+++ b/apps/ui/src/lib/icons/folder-icon.tsx
@@ -2,7 +2,7 @@ import type { ComponentProps } from 'react';
 
 export function FolderIcon( props: ComponentProps< 'svg' > ) {
 	return (
-		<svg viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
+		<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
 			<path
 				d="M21 13C21 11.3431 19.6569 10 18 10H6C4.34315 10 3 11.3431 3 13M6 4H8.75736C9.55301 4 10.3161 4.31607 10.8787 4.87868L11.1213 5.12132C11.6839 5.68393 12.447 6 13.2426 6H18C19.6569 6 21 7.34315 21 9V16C21 17.6569 19.6569 19 18 19H6C4.34315 19 3 17.6569 3 16V7C3 5.34315 4.34315 4 6 4Z"
 				stroke="currentColor"
diff --git a/apps/ui/src/lib/icons/globe-icon.tsx b/apps/ui/src/lib/icons/globe-icon.tsx
index 42820fd032..7aea6011a1 100644
--- a/apps/ui/src/lib/icons/globe-icon.tsx
+++ b/apps/ui/src/lib/icons/globe-icon.tsx
@@ -3,8 +3,8 @@ import type { ComponentProps } from 'react';
 export function GlobeIcon( props: ComponentProps< 'svg' > ) {
 	return (
 		<svg
-			width="24"
-			height="24"
+			width="16"
+			height="16"
 			viewBox="0 0 24 24"
 			fill="none"
 			xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/ui/src/lib/icons/import-icon.tsx b/apps/ui/src/lib/icons/import-icon.tsx
index 415f2e5189..bff032b32b 100644
--- a/apps/ui/src/lib/icons/import-icon.tsx
+++ b/apps/ui/src/lib/icons/import-icon.tsx
@@ -2,7 +2,7 @@ import type { ComponentProps } from 'react';
 
 export function ImportIcon( props: ComponentProps< 'svg' > ) {
 	return (
-		<svg viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
+		<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
 			<path
 				fillRule="evenodd"
 				clipRule="evenodd"
diff --git a/apps/ui/src/lib/icons/intelligence-icon.tsx b/apps/ui/src/lib/icons/intelligence-icon.tsx
index ba21da2b42..7640b57279 100644
--- a/apps/ui/src/lib/icons/intelligence-icon.tsx
+++ b/apps/ui/src/lib/icons/intelligence-icon.tsx
@@ -2,7 +2,7 @@ import type { ComponentProps } from 'react';
 
 export function IntelligenceIcon( props: ComponentProps< 'svg' > ) {
 	return (
-		<svg viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
+		<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
 			<path
 				d="M20.6867 3.32301C20.2623 2.89072 19.992 2.25667 19.8885 1.37008V1H19.1115V1.36968C19.0044 2.27111 18.7342 2.89103 18.3126 3.31259C17.891 3.73415 17.2711 4.00442 16.3697 4.11154H16V4.88846H16.3701C17.2567 4.99203 17.8907 5.26226 18.323 5.68673C18.7537 6.10963 19.0293 6.73014 19.1115 7.62517V8H19.8885V7.62473C19.9674 6.74444 20.2428 6.10989 20.6763 5.67634C21.1099 5.24278 21.7444 4.96737 22.6247 4.88846H23V4.11154H22.6252C21.7301 4.02931 21.1096 3.7537 20.6867 3.32301Z"
 				fill="currentColor"
diff --git a/apps/ui/src/lib/icons/keyboard-icon.tsx b/apps/ui/src/lib/icons/keyboard-icon.tsx
index ac57a1ffed..8f92229430 100644
--- a/apps/ui/src/lib/icons/keyboard-icon.tsx
+++ b/apps/ui/src/lib/icons/keyboard-icon.tsx
@@ -2,7 +2,7 @@ import type { ComponentProps } from 'react';
 
 export function KeyboardIcon( props: ComponentProps< 'svg' > ) {
 	return (
-		<svg viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
+		<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
 			<path
 				d="M6 16.125C6.48325 16.125 6.875 16.5168 6.875 17C6.875 17.4832 6.48325 17.875 6 17.875C5.51675 17.875 5.125 17.4832 5.125 17C5.125 16.5168 5.51675 16.125 6 16.125ZM18 16.125C18.4832 16.125 18.875 16.5168 18.875 17C18.875 17.4832 18.4832 17.875 18 17.875C17.5168 17.875 17.125 17.4832 17.125 17C17.125 16.5168 17.5168 16.125 18 16.125ZM6 12.125C6.48325 12.125 6.875 12.5168 6.875 13C6.875 13.4832 6.48325 13.875 6 13.875C5.51675 13.875 5.125 13.4832 5.125 13C5.125 12.5168 5.51675 12.125 6 12.125ZM10 12.125C10.4832 12.125 10.875 12.5168 10.875 13C10.875 13.4832 10.4832 13.875 10 13.875C9.51675 13.875 9.125 13.4832 9.125 13C9.125 12.5168 9.51675 12.125 10 12.125ZM14 12.125C14.4832 12.125 14.875 12.5168 14.875 13C14.875 13.4832 14.4832 13.875 14 13.875C13.5168 13.875 13.125 13.4832 13.125 13C13.125 12.5168 13.5168 12.125 14 12.125ZM18 12.125C18.4832 12.125 18.875 12.5168 18.875 13C18.875 13.4832 18.4832 13.875 18 13.875C17.5168 13.875 17.125 13.4832 17.125 13C17.125 12.5168 17.5168 12.125 18 12.125Z"
 				fill="currentColor"
diff --git a/apps/ui/src/lib/icons/language-icon.tsx b/apps/ui/src/lib/icons/language-icon.tsx
index d303b4c21f..caddcfff4b 100644
--- a/apps/ui/src/lib/icons/language-icon.tsx
+++ b/apps/ui/src/lib/icons/language-icon.tsx
@@ -3,8 +3,8 @@ import type { ComponentProps } from 'react';
 export function LanguageIcon( props: ComponentProps< 'svg' > ) {
 	return (
 		<svg
-			width="24"
-			height="24"
+			width="16"
+			height="16"
 			viewBox="0 0 24 24"
 			fill="none"
 			xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/ui/src/lib/icons/link-icon.tsx b/apps/ui/src/lib/icons/link-icon.tsx
index b0ed508af6..c563314dce 100644
--- a/apps/ui/src/lib/icons/link-icon.tsx
+++ b/apps/ui/src/lib/icons/link-icon.tsx
@@ -3,8 +3,8 @@ import type { ComponentProps } from 'react';
 export function LinkIcon( props: ComponentProps< 'svg' > ) {
 	return (
 		<svg
-			width="24"
-			height="24"
+			width="16"
+			height="16"
 			viewBox="0 0 24 24"
 			fill="none"
 			xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/ui/src/lib/icons/mcp-icon.tsx b/apps/ui/src/lib/icons/mcp-icon.tsx
index aa0d982163..e891d60352 100644
--- a/apps/ui/src/lib/icons/mcp-icon.tsx
+++ b/apps/ui/src/lib/icons/mcp-icon.tsx
@@ -2,7 +2,7 @@ import type { ComponentProps } from 'react';
 
 export function McpIcon( props: ComponentProps< 'svg' > ) {
 	return (
-		<svg viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
+		<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
 			<path
 				d="M9 7H8C6.34315 7 5 8.34315 5 10V13C5 15.7614 7.23858 18 10 18H12M9 7V3M9 7H15M15 7H16C17.6569 7 19 8.34315 19 10V13C19 15.7614 16.7614 18 14 18H12M15 7V3M12 18V21"
 				stroke="currentColor"
diff --git a/apps/ui/src/lib/icons/needs-input-icon.tsx b/apps/ui/src/lib/icons/needs-input-icon.tsx
index eb19f0c19b..062b205a2d 100644
--- a/apps/ui/src/lib/icons/needs-input-icon.tsx
+++ b/apps/ui/src/lib/icons/needs-input-icon.tsx
@@ -3,8 +3,8 @@ import type { ComponentProps } from 'react';
 export function NeedsInputIcon( props: ComponentProps< 'svg' > ) {
 	return (
 		<svg
-			width="24"
-			height="24"
+			width="16"
+			height="16"
 			viewBox="0 0 24 24"
 			fill="none"
 			xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/ui/src/lib/icons/new-chat-icon.tsx b/apps/ui/src/lib/icons/new-chat-icon.tsx
index fed05a6076..6a0bdfc64d 100644
--- a/apps/ui/src/lib/icons/new-chat-icon.tsx
+++ b/apps/ui/src/lib/icons/new-chat-icon.tsx
@@ -2,7 +2,7 @@ import type { ComponentProps } from 'react';
 
 export function NewChatIcon( props: ComponentProps< 'svg' > ) {
 	return (
-		<svg viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
+		<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
 			<path
 				d="M11 5C11.5523 5 12 4.55229 12 4C12 3.44772 11.5523 3 11 3V4V5ZM21 13C21 12.4477 20.5523 12 20 12C19.4477 12 19 12.4477 19 13H20H21ZM5.63803 19.673L6.09202 18.782H6.09202L5.63803 19.673ZM4.32698 18.362L3.43597 18.816H3.43597L4.32698 18.362ZM18.362 19.673L17.908 18.782H17.908L18.362 19.673ZM19.673 18.362L18.782 17.908V17.908L19.673 18.362ZM4.32698 5.63803L5.21799 6.09202V6.09202L4.32698 5.63803ZM5.63803 4.32698L6.09202 5.21799V5.21799L5.63803 4.32698ZM9 15H8C8 15.5523 8.44772 16 9 16V15ZM9.29289 11.7071L10 12.4142V12.4142L9.29289 11.7071ZM17.25 3.75L16.5429 3.04289V3.04289L17.25 3.75ZM20.25 6.75L19.5429 6.04289V6.04289L20.25 6.75ZM12.2929 14.7071L13 15.4142V15.4142L12.2929 14.7071ZM20.25 3.75L19.5429 4.45711V4.45711L20.25 3.75ZM15.2 20V19H8.8V20V21H15.2V20ZM4 15.2H5V8.8H4H3V15.2H4ZM8.8 4V5H11V4V3H8.8V4ZM20 13H19V15.2H20H21V13H20ZM8.8 20V19C7.94342 19 7.36113 18.9992 6.91104 18.9625C6.47262 18.9266 6.24842 18.8617 6.09202 18.782L5.63803 19.673L5.18404 20.564C5.66937 20.8113 6.18608 20.9099 6.74817 20.9558C7.2986 21.0008 7.97642 21 8.8 21V20ZM4 15.2H3C3 16.0236 2.99922 16.7014 3.04419 17.2518C3.09012 17.8139 3.18868 18.3306 3.43597 18.816L4.32698 18.362L5.21799 17.908C5.1383 17.7516 5.07337 17.5274 5.03755 17.089C5.00078 16.6389 5 16.0566 5 15.2H4ZM5.63803 19.673L6.09202 18.782C5.7157 18.5903 5.40973 18.2843 5.21799 17.908L4.32698 18.362L3.43597 18.816C3.81947 19.5686 4.43139 20.1805 5.18404 20.564L5.63803 19.673ZM15.2 20V21C16.0236 21 16.7014 21.0008 17.2518 20.9558C17.8139 20.9099 18.3306 20.8113 18.816 20.564L18.362 19.673L17.908 18.782C17.7516 18.8617 17.5274 18.9266 17.089 18.9625C16.6389 18.9992 16.0566 19 15.2 19V20ZM20 15.2H19C19 16.0566 18.9992 16.6389 18.9624 17.089C18.9266 17.5274 18.8617 17.7516 18.782 17.908L19.673 18.362L20.564 18.816C20.8113 18.3306 20.9099 17.8139 20.9558 17.2518C21.0008 16.7014 21 16.0236 21 15.2H20ZM18.362 19.673L18.816 20.564C19.5686 20.1805 20.1805 19.5686 20.564 18.816L19.673 18.362L18.782 17.908C18.5903 18.2843 18.2843 18.5903 17.908 18.782L18.362 19.673ZM4 8.8H5C5 7.94342 5.00078 7.36113 5.03755 6.91104C5.07337 6.47262 5.1383 6.24842 5.21799 6.09202L4.32698 5.63803L3.43597 5.18404C3.18868 5.66937 3.09012 6.18608 3.04419 6.74818C2.99922 7.2986 3 7.97642 3 8.8H4ZM8.8 4V3C7.97642 3 7.2986 2.99922 6.74817 3.04419C6.18608 3.09012 5.66937 3.18868 5.18404 3.43598L5.63803 4.32698L6.09202 5.21799C6.24842 5.1383 6.47262 5.07337 6.91104 5.03755C7.36113 5.00078 7.94342 5 8.8 5V4ZM4.32698 5.63803L5.21799 6.09202C5.40973 5.7157 5.71569 5.40973 6.09202 5.21799L5.63803 4.32698L5.18404 3.43598C4.43139 3.81947 3.81947 4.43139 3.43597 5.18404L4.32698 5.63803ZM9 12.4142H8V15H9H10V12.4142H9ZM9 15V16H11.5858V15V14H9V15ZM9.29289 11.7071L10 12.4142L17.9571 4.45711L17.25 3.75L16.5429 3.04289L8.58579 11L9.29289 11.7071ZM20.25 6.75L19.5429 6.04289L11.5858 14L12.2929 14.7071L13 15.4142L20.9571 7.45711L20.25 6.75ZM20.25 3.75L19.5429 4.45711C19.9808 4.89501 19.9808 5.60499 19.5429 6.04289L20.25 6.75L20.9571 7.45711C22.1761 6.23816 22.1761 4.26185 20.9571 3.04289L20.25 3.75ZM17.25 3.75L17.9571 4.45711C18.395 4.01921 19.105 4.01921 19.5429 4.45711L20.25 3.75L20.9571 3.04289C19.7382 1.82394 17.7618 1.82394 16.5429 3.04289L17.25 3.75ZM11.5858 15V16C12.1162 16 12.6249 15.7893 13 15.4142L12.2929 14.7071L11.5858 14L11.5858 14V15ZM9 12.4142H10V12.4142L9.29289 11.7071L8.58579 11C8.21071 11.3751 8 11.8838 8 12.4142H9Z"
 				fill="currentColor"
diff --git a/apps/ui/src/lib/icons/php-icon.tsx b/apps/ui/src/lib/icons/php-icon.tsx
index 1ae5984365..52e0cf4f7d 100644
--- a/apps/ui/src/lib/icons/php-icon.tsx
+++ b/apps/ui/src/lib/icons/php-icon.tsx
@@ -2,7 +2,7 @@ import type { ComponentProps } from 'react';
 
 export function PhpIcon( props: ComponentProps< 'svg' > ) {
 	return (
-		<svg viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
+		<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
 			<path
 				d="M10 9.5L8.20711 11.2929C7.81658 11.6834 7.81658 12.3166 8.20711 12.7071L10 14.5M14 9.5L15.7929 11.2929C16.1834 11.6834 16.1834 12.3166 15.7929 12.7071L14 14.5M7 20H17C18.6569 20 20 18.6569 20 17V7C20 5.34315 18.6569 4 17 4H7C5.34315 4 4 5.34315 4 7V17C4 18.6569 5.34315 20 7 20Z"
 				stroke="currentColor"
diff --git a/apps/ui/src/lib/icons/pin-icon.tsx b/apps/ui/src/lib/icons/pin-icon.tsx
index f5a2a24357..1cc4f7fff5 100644
--- a/apps/ui/src/lib/icons/pin-icon.tsx
+++ b/apps/ui/src/lib/icons/pin-icon.tsx
@@ -3,8 +3,8 @@ import type { ComponentProps } from 'react';
 export function PinIcon( props: ComponentProps< 'svg' > ) {
 	return (
 		<svg
-			width="24"
-			height="24"
+			width="16"
+			height="16"
 			viewBox="0 0 24 24"
 			fill="none"
 			xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/ui/src/lib/icons/rename-icon.tsx b/apps/ui/src/lib/icons/rename-icon.tsx
index e691c7ef5e..29be59ede9 100644
--- a/apps/ui/src/lib/icons/rename-icon.tsx
+++ b/apps/ui/src/lib/icons/rename-icon.tsx
@@ -2,7 +2,7 @@ import type { ComponentProps } from 'react';
 
 export function RenameIcon( props: ComponentProps< 'svg' > ) {
 	return (
-		<svg viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
+		<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
 			<path
 				d="M18 10.5L7.79289 20.7071C7.60536 20.8946 7.351 21 7.08579 21H3V16.9142C3 16.649 3.10536 16.3946 3.29289 16.2071L13.5 5.99997L15.25 4.24997C16.4926 3.00733 18.5074 3.00733 19.75 4.24997C20.9926 5.49261 20.9926 7.50733 19.75 8.74997L18 10.5ZM13.5 5.99997L18 10.5"
 				stroke="currentColor"
diff --git a/apps/ui/src/lib/icons/rotate-cw-icon.tsx b/apps/ui/src/lib/icons/rotate-cw-icon.tsx
index d2d20e9a16..2beccb9349 100644
--- a/apps/ui/src/lib/icons/rotate-cw-icon.tsx
+++ b/apps/ui/src/lib/icons/rotate-cw-icon.tsx
@@ -3,8 +3,8 @@ import type { ComponentProps } from 'react';
 export function RotateCwIcon( props: ComponentProps< 'svg' > ) {
 	return (
 		<svg
-			width="24"
-			height="24"
+			width="16"
+			height="16"
 			viewBox="0 0 24 24"
 			fill="none"
 			xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/ui/src/lib/icons/share-icon.tsx b/apps/ui/src/lib/icons/share-icon.tsx
index 2c08a9f764..924b46aff3 100644
--- a/apps/ui/src/lib/icons/share-icon.tsx
+++ b/apps/ui/src/lib/icons/share-icon.tsx
@@ -2,7 +2,7 @@ import type { ComponentProps } from 'react';
 
 export function ShareIcon( props: ComponentProps< 'svg' > ) {
 	return (
-		<svg viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
+		<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
 			<path
 				d="M12 3.75V15M7.5 8.25L12 3.75L16.5 8.25M20.25 12.75V17.25C20.25 18.9069 18.9069 20.25 17.25 20.25H6.75C5.09315 20.25 3.75 18.9069 3.75 17.25V12.75"
 				stroke="currentColor"
diff --git a/apps/ui/src/lib/icons/sidebar-icon.tsx b/apps/ui/src/lib/icons/sidebar-icon.tsx
index deb9ae7f19..6e8755b0f3 100644
--- a/apps/ui/src/lib/icons/sidebar-icon.tsx
+++ b/apps/ui/src/lib/icons/sidebar-icon.tsx
@@ -6,6 +6,8 @@ export function SidebarIcon( {
 }: ComponentProps< 'svg' > & { expanded: boolean } ) {
 	return (
 		<svg
+			width="16"
+			height="16"
 			viewBox="0 0 24 24"
 			fill="none"
 			stroke="currentColor"
diff --git a/apps/ui/src/lib/icons/site-settings-icon.tsx b/apps/ui/src/lib/icons/site-settings-icon.tsx
index 871cf89817..41187e0641 100644
--- a/apps/ui/src/lib/icons/site-settings-icon.tsx
+++ b/apps/ui/src/lib/icons/site-settings-icon.tsx
@@ -2,7 +2,7 @@ import type { ComponentProps } from 'react';
 
 export function SiteSettingsIcon( props: ComponentProps< 'svg' > ) {
 	return (
-		<svg viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
+		<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
 			<path
 				d="M17 14V4M17 14C18.6575 14 20 15.3425 20 17C20 18.6575 18.6575 20 17 20C15.3425 20 14 18.6575 14 17C14 15.3425 15.3425 14 17 14ZM7 20V12M7 12C5.3425 12 4 10.6575 4 9C4 7.3425 5.3425 6 7 6M7 12C8.6575 12 10 10.6575 10 9C10 7.3425 8.6575 6 7 6M7 6V4"
 				stroke="currentColor"
diff --git a/apps/ui/src/lib/icons/skills-icon.tsx b/apps/ui/src/lib/icons/skills-icon.tsx
index 9fa087833e..eeeb84842f 100644
--- a/apps/ui/src/lib/icons/skills-icon.tsx
+++ b/apps/ui/src/lib/icons/skills-icon.tsx
@@ -2,7 +2,7 @@ import type { ComponentProps } from 'react';
 
 export function SkillsIcon( props: ComponentProps< 'svg' > ) {
 	return (
-		<svg viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
+		<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
 			<path
 				d="M11.7726 12.2271L12.6226 15.745C12.7271 16.1774 13.3016 16.2684 13.5346 15.8895L15.2701 13.0666C15.3683 12.9069 15.5476 12.8155 15.7346 12.8299L19.0385 13.0851C19.4819 13.1194 19.746 12.601 19.4577 12.2624L17.3092 9.73949C17.1877 9.59674 17.1562 9.39798 17.2277 9.22465L18.4913 6.1613C18.6609 5.75016 18.2496 5.33882 17.8384 5.50841L14.7751 6.77206C14.6018 6.84356 14.403 6.81208 14.2603 6.69052L11.7373 4.54209C11.3987 4.25374 10.8804 4.51784 10.9146 4.96127L11.1698 8.26518C11.1843 8.45212 11.0929 8.63142 10.9332 8.72962L8.11026 10.4652C7.73139 10.6981 7.82239 11.2727 8.2547 11.3771L11.7726 12.2271ZM11.7726 12.2271L4 19.9997"
 				stroke="currentColor"
diff --git a/apps/ui/src/lib/icons/start-site-icon.tsx b/apps/ui/src/lib/icons/start-site-icon.tsx
index 1c232b5bcb..91b88bd2f4 100644
--- a/apps/ui/src/lib/icons/start-site-icon.tsx
+++ b/apps/ui/src/lib/icons/start-site-icon.tsx
@@ -3,8 +3,8 @@ import type { ComponentProps } from 'react';
 export function StartSiteIcon( props: ComponentProps< 'svg' > ) {
 	return (
 		<svg
-			width="24"
-			height="24"
+			width="16"
+			height="16"
 			viewBox="0 0 24 24"
 			fill="none"
 			xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/ui/src/lib/icons/stop-other-sites-icon.tsx b/apps/ui/src/lib/icons/stop-other-sites-icon.tsx
index 5f88b015a5..5e74556704 100644
--- a/apps/ui/src/lib/icons/stop-other-sites-icon.tsx
+++ b/apps/ui/src/lib/icons/stop-other-sites-icon.tsx
@@ -2,7 +2,7 @@ import type { ComponentProps } from 'react';
 
 export function StopOtherSitesIcon( props: ComponentProps< 'svg' > ) {
 	return (
-		<svg viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
+		<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
 			<circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="2" />
 			<path
 				d="M9.5 10.5C9.5 9.94772 9.94772 9.5 10.5 9.5H13.5C14.0523 9.5 14.5 9.94772 14.5 10.5V13.5C14.5 14.0523 14.0523 14.5 13.5 14.5H10.5C9.94772 14.5 9.5 14.0523 9.5 13.5V10.5Z"
diff --git a/apps/ui/src/lib/icons/stop-site-icon.tsx b/apps/ui/src/lib/icons/stop-site-icon.tsx
index d97ab9d260..b664c42da1 100644
--- a/apps/ui/src/lib/icons/stop-site-icon.tsx
+++ b/apps/ui/src/lib/icons/stop-site-icon.tsx
@@ -3,8 +3,8 @@ import type { ComponentProps } from 'react';
 export function StopSiteIcon( props: ComponentProps< 'svg' > ) {
 	return (
 		<svg
-			width="24"
-			height="24"
+			width="16"
+			height="16"
 			viewBox="0 0 24 24"
 			fill="none"
 			xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/ui/src/lib/icons/sync-icon.tsx b/apps/ui/src/lib/icons/sync-icon.tsx
index b27e3177d1..4b65dcd5d4 100644
--- a/apps/ui/src/lib/icons/sync-icon.tsx
+++ b/apps/ui/src/lib/icons/sync-icon.tsx
@@ -2,7 +2,7 @@ import type { ComponentProps } from 'react';
 
 export function SyncIcon( { children, ...props }: ComponentProps< 'svg' > ) {
 	return (
-		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
+		<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
 			<path
 				d="M18.5 19.0615C20.6627 18.4544 22.25 16.4502 22.25 14.0714C22.25 11.2114 19.9555 8.89286 17.125 8.89286C16.5661 8.89286 16.0281 8.98326 15.5245 9.15037C14.4289 6.56294 11.8865 4.75 8.925 4.75C4.96236 4.75 1.75 7.99594 1.75 12C1.75 14.7508 3.26609 17.1437 5.5 18.3722"
 				strokeWidth="2"
diff --git a/apps/ui/src/lib/icons/terminal-icon.tsx b/apps/ui/src/lib/icons/terminal-icon.tsx
index 602973a7cd..c89e546513 100644
--- a/apps/ui/src/lib/icons/terminal-icon.tsx
+++ b/apps/ui/src/lib/icons/terminal-icon.tsx
@@ -2,7 +2,7 @@ import type { ComponentProps } from 'react';
 
 export function TerminalIcon( props: ComponentProps< 'svg' > ) {
 	return (
-		<svg viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
+		<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
 			<path
 				fillRule="evenodd"
 				clipRule="evenodd"
diff --git a/apps/ui/src/lib/icons/trash-icon.tsx b/apps/ui/src/lib/icons/trash-icon.tsx
index 93f97a4fb0..e1c9acecd8 100644
--- a/apps/ui/src/lib/icons/trash-icon.tsx
+++ b/apps/ui/src/lib/icons/trash-icon.tsx
@@ -2,7 +2,7 @@ import type { ComponentProps } from 'react';
 
 export function TrashIcon( props: ComponentProps< 'svg' > ) {
 	return (
-		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
+		<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true" { ...props }>
 			<path
 				d="M5.93777 20.0665L6.93555 20L5.93777 20.0665ZM18.0622 20.0665L17.0644 20L18.0622 20.0665ZM3 5C2.44772 5 2 5.44772 2 6C2 6.55228 2.44772 7 3 7V5ZM21 7C21.5523 7 22 6.55228 22 6C22 5.44772 21.5523 5 21 5V7ZM14.9056 6.24926C15.0432 6.78411 15.5884 7.1061 16.1233 6.96844C16.6581 6.83078 16.9801 6.28559 16.8424 5.75074L14.9056 6.24926ZM4.00221 6.06652L4.93998 20.133L6.93555 20L5.99779 5.93348L4.00221 6.06652ZM6.93555 22H17.0644V20H6.93555V22ZM19.06 20.133L19.9978 6.06652L18.0022 5.93348L17.0644 20L19.06 20.133ZM19 5H5V7H19V5ZM3 7H5V5H3V7ZM19 7H21V5H19V7ZM17.0644 22C18.1174 22 18.99 21.1836 19.06 20.133L17.0644 20H17.0644V22ZM4.93998 20.133C5.01002 21.1836 5.88262 22 6.93555 22V20V20L4.93998 20.133ZM12 4C13.3965 4 14.5725 4.95512 14.9056 6.24926L16.8424 5.75074C16.2874 3.59442 14.3312 2 12 2V4ZM9.09447 6.24926C9.42756 4.95512 10.6035 4 12 4V2C9.66885 2 7.7126 3.59442 7.1576 5.75074L9.09447 6.24926Z"
 				fill="currentColor"
diff --git a/apps/ui/src/lib/icons/unpin-icon.tsx b/apps/ui/src/lib/icons/unpin-icon.tsx
index e1046ecf56..adc4dc0007 100644
--- a/apps/ui/src/lib/icons/unpin-icon.tsx
+++ b/apps/ui/src/lib/icons/unpin-icon.tsx
@@ -3,8 +3,8 @@ import type { ComponentProps } from 'react';
 export function UnpinIcon( props: ComponentProps< 'svg' > ) {
 	return (
 		<svg
-			width="24"
-			height="24"
+			width="16"
+			height="16"
 			viewBox="0 0 24 24"
 			fill="none"
 			xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/ui/src/lib/icons/wordpress-icon.tsx b/apps/ui/src/lib/icons/wordpress-icon.tsx
index 276197126f..8c348e085b 100644
--- a/apps/ui/src/lib/icons/wordpress-icon.tsx
+++ b/apps/ui/src/lib/icons/wordpress-icon.tsx
@@ -5,7 +5,14 @@ const WORDPRESS_ICON_PATH =
 
 export function WordPressIcon( props: ComponentProps< 'svg' > ) {
 	return (
-		<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" { ...props }>
+		<svg
+			width="16"
+			height="16"
+			viewBox="0 0 24 24"
+			fill="currentColor"
+			aria-hidden="true"
+			{ ...props }
+		>
 			<path d={ WORDPRESS_ICON_PATH } />
 		</svg>
 	);
diff --git a/apps/ui/src/lib/theme/base.css b/apps/ui/src/lib/theme/base.css
index 8448f78959..3f2770d706 100644
--- a/apps/ui/src/lib/theme/base.css
+++ b/apps/ui/src/lib/theme/base.css
@@ -110,16 +110,17 @@ body {
 	strong {
 		font-weight: var( --font-weight-medium );
 	}
+}
 
-	/* Icons draw on a 24px grid and render at 16px unless a component sizes them. */
-	:root svg {
-		width: 16px;
-		height: 16px;
+@keyframes studio-spin {
+	to {
+		transform: rotate( 360deg );
 	}
+}
 
-	:root svg[data-keep-size] {
-		width: auto;
-		height: auto;
+@keyframes studio-pulse {
+	50% {
+		opacity: 0.5;
 	}
 }
 
diff --git a/apps/ui/src/lib/theme/recipes.module.css b/apps/ui/src/lib/theme/recipes.module.css
new file mode 100644
index 0000000000..33caefacb6
--- /dev/null
+++ b/apps/ui/src/lib/theme/recipes.module.css
@@ -0,0 +1,37 @@
+/* Shared declaration groups, pulled into a component's class with
+   `composes: <name> from '@/lib/theme/recipes.module.css'`. */
+
+/* One line of text, cut with an ellipsis. */
+.truncate {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+/* The hairline under a header in the workspace's top band. */
+.bandEdge {
+	box-shadow: inset 0 -1px 0 var( --border );
+}
+
+/* A hairline drawn inside an image's frame, so the image keeps its full size. */
+.imageOutline::after {
+	position: absolute;
+	inset: 0;
+	border-radius: inherit;
+	box-shadow: inset 0 0 0 1px var( --border );
+	content: '';
+	pointer-events: none;
+}
+
+/* A dot on an icon's top-right corner, with the icon cut away around it. */
+.dotted:has( .dot ) svg {
+	mask-image: radial-gradient( circle at calc( 100% - 2px ) 2px, transparent 5.5px, #000 6px );
+}
+
+.dot {
+	position: absolute;
+	width: 7px;
+	height: 7px;
+	border-radius: 50%;
+	background-color: var( --accent );
+}
diff --git a/apps/ui/src/lib/ui/alert/style.module.css b/apps/ui/src/lib/ui/alert/style.module.css
index 9e27f9535f..c76fdfceef 100644
--- a/apps/ui/src/lib/ui/alert/style.module.css
+++ b/apps/ui/src/lib/ui/alert/style.module.css
@@ -46,8 +46,6 @@
 
 	.alert > svg {
 		grid-row: span 2;
-		width: 16px;
-		height: 16px;
 		color: var( --alert-tone );
 		translate: 0 2px;
 	}
diff --git a/apps/ui/src/lib/ui/button/style.module.css b/apps/ui/src/lib/ui/button/style.module.css
index f721f25d7e..c945aa3348 100644
--- a/apps/ui/src/lib/ui/button/style.module.css
+++ b/apps/ui/src/lib/ui/button/style.module.css
@@ -74,11 +74,6 @@
 		pointer-events: none;
 	}
 
-	.button svg:not( [data-size] ) {
-		width: 16px;
-		height: 16px;
-	}
-
 	.button [data-dropdown-indicator] {
 		margin-inline: -4px -2px;
 		color: var( --muted-foreground );
diff --git a/apps/ui/src/lib/ui/command/style.module.css b/apps/ui/src/lib/ui/command/style.module.css
index 1dfbeecf67..58d6cda609 100644
--- a/apps/ui/src/lib/ui/command/style.module.css
+++ b/apps/ui/src/lib/ui/command/style.module.css
@@ -85,11 +85,9 @@
 	}
 
 	.description {
-		overflow: hidden;
+		composes: truncate from '@/lib/theme/recipes.module.css';
 		color: var( --muted-foreground );
 		font-size: var( --text-xxs );
-		text-overflow: ellipsis;
-		white-space: nowrap;
 	}
 
 	/* On the composer's surface the muted fill and hover wash step up a shade. */
diff --git a/apps/ui/src/lib/ui/input-group/style.module.css b/apps/ui/src/lib/ui/input-group/style.module.css
index 897d968973..3b541afc00 100644
--- a/apps/ui/src/lib/ui/input-group/style.module.css
+++ b/apps/ui/src/lib/ui/input-group/style.module.css
@@ -62,11 +62,6 @@
 		color: var( --foreground );
 	}
 
-	.addon > svg:not( [data-size] ) {
-		width: 16px;
-		height: 16px;
-	}
-
 	.addon[data-align='inline-start'] {
 		order: -1;
 		padding-inline-start: 8px;
diff --git a/apps/ui/src/lib/ui/marquee-label/style.module.css b/apps/ui/src/lib/ui/marquee-label/style.module.css
index 031fe79dd6..090099661f 100644
--- a/apps/ui/src/lib/ui/marquee-label/style.module.css
+++ b/apps/ui/src/lib/ui/marquee-label/style.module.css
@@ -1,18 +1,14 @@
 @layer ui {
-	.viewport,
-	.text {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
 
 	.viewport {
+		composes: truncate from '@/lib/theme/recipes.module.css';
 		flex: 1;
 		min-width: 0;
 		text-align: start;
 	}
 
 	.text {
+		composes: truncate from '@/lib/theme/recipes.module.css';
 		display: block;
 	}
 
diff --git a/apps/ui/src/lib/ui/preview-frame/style.module.css b/apps/ui/src/lib/ui/preview-frame/style.module.css
index 44a339876c..f753e09eb8 100644
--- a/apps/ui/src/lib/ui/preview-frame/style.module.css
+++ b/apps/ui/src/lib/ui/preview-frame/style.module.css
@@ -1,5 +1,6 @@
 @layer ui {
 	.frame {
+		composes: imageOutline from '@/lib/theme/recipes.module.css';
 		position: relative;
 		display: block;
 		width: 100%;
@@ -10,13 +11,7 @@
 	}
 
 	.frame::after {
-		position: absolute;
-		inset: 0;
 		z-index: 1;
-		border-radius: inherit;
-		box-shadow: inset 0 0 0 1px var( --border );
-		pointer-events: none;
-		content: '';
 	}
 
 	.image {
diff --git a/apps/ui/src/lib/ui/select/style.module.css b/apps/ui/src/lib/ui/select/style.module.css
index 3d215bd5ea..28078f94c6 100644
--- a/apps/ui/src/lib/ui/select/style.module.css
+++ b/apps/ui/src/lib/ui/select/style.module.css
@@ -56,11 +56,6 @@
 		padding-block: 8px;
 	}
 
-	.item svg:not( [data-size] ) {
-		width: 16px;
-		height: 16px;
-	}
-
 	.itemBody {
 		display: flex;
 		flex: 1;
diff --git a/apps/ui/src/lib/ui/skeleton/style.module.css b/apps/ui/src/lib/ui/skeleton/style.module.css
index 0db6bb5860..28a6b14629 100644
--- a/apps/ui/src/lib/ui/skeleton/style.module.css
+++ b/apps/ui/src/lib/ui/skeleton/style.module.css
@@ -3,7 +3,7 @@
 		display: block;
 		border-radius: var( --radius-md );
 		background-color: var( --muted );
-		animation: pulse 2s cubic-bezier( 0.4, 0, 0.6, 1 ) infinite;
+		animation: global( studio-pulse ) 2s cubic-bezier( 0.4, 0, 0.6, 1 ) infinite;
 	}
 
 	@media ( prefers-reduced-motion: reduce ) {
@@ -11,10 +11,4 @@
 			animation: none;
 		}
 	}
-
-	@keyframes pulse {
-		50% {
-			opacity: 0.5;
-		}
-	}
 }
diff --git a/apps/ui/src/lib/ui/spinner/style.module.css b/apps/ui/src/lib/ui/spinner/style.module.css
index 7d5743f67b..1b01a429fd 100644
--- a/apps/ui/src/lib/ui/spinner/style.module.css
+++ b/apps/ui/src/lib/ui/spinner/style.module.css
@@ -3,7 +3,7 @@
 		flex-shrink: 0;
 		width: 16px;
 		height: 16px;
-		animation: spin 1s linear infinite;
+		animation: global( studio-spin ) 1s linear infinite;
 	}
 
 	.spinner[data-size='xs'] {
@@ -16,10 +16,4 @@
 			animation: none;
 		}
 	}
-
-	@keyframes spin {
-		to {
-			transform: rotate( 360deg );
-		}
-	}
 }
diff --git a/apps/ui/src/lib/ui/tabs/style.module.css b/apps/ui/src/lib/ui/tabs/style.module.css
index 79bf54aeac..9fa08c6073 100644
--- a/apps/ui/src/lib/ui/tabs/style.module.css
+++ b/apps/ui/src/lib/ui/tabs/style.module.css
@@ -86,8 +86,6 @@
 
 	.trigger svg {
 		flex: none;
-		width: 16px;
-		height: 16px;
 	}
 
 	[data-variant='scope'] > .trigger {

From ec53659b46fd5b9e8f1a2819b3f2fe2e8cdbc378 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Sun, 25 Oct 2026 11:44:33 +0100
Subject: [PATCH 03/10] Agentic UI: Step nested surfaces automatically and
 scope dark-mode colors to their scene

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../account/gravatar/style.module.css         |  2 +-
 .../session-view/composer/style.module.css    |  6 ----
 .../conversation/style.module.css             |  8 ++---
 .../sites/preview-particles/style.module.css  |  9 ++---
 apps/ui/src/lib/theme/tokens.css              | 33 +++++++++++++++++++
 apps/ui/src/lib/ui/badge/style.module.css     |  9 +++--
 apps/ui/src/lib/ui/checkbox/style.module.css  |  8 ++---
 apps/ui/src/lib/ui/code-block/highlight.ts    |  2 +-
 .../ui/src/lib/ui/code-block/style.module.css |  5 ---
 apps/ui/src/lib/ui/command/style.module.css   |  6 ----
 apps/ui/src/lib/ui/dialog/style.module.css    |  7 ++--
 apps/ui/src/lib/ui/field/style.module.css     | 15 +++------
 .../src/lib/ui/input-group/style.module.css   |  3 +-
 apps/ui/src/lib/ui/kbd/style.module.css       |  9 +++--
 apps/ui/src/lib/ui/popover/style.module.css   |  3 +-
 apps/ui/src/lib/ui/switch/style.module.css    |  6 +---
 apps/ui/src/lib/ui/tabs/style.module.css      | 11 ++-----
 17 files changed, 66 insertions(+), 76 deletions(-)

diff --git a/apps/ui/src/features/account/gravatar/style.module.css b/apps/ui/src/features/account/gravatar/style.module.css
index 39f01b0c88..f0e454843b 100644
--- a/apps/ui/src/features/account/gravatar/style.module.css
+++ b/apps/ui/src/features/account/gravatar/style.module.css
@@ -19,7 +19,7 @@
 	mix-blend-mode: darken;
 }
 
-:root[data-color-scheme='dark'] .root::after {
+[data-color-scheme='dark'] .root::after {
 	mix-blend-mode: lighten;
 }
 
diff --git a/apps/ui/src/features/chats/session-view/composer/style.module.css b/apps/ui/src/features/chats/session-view/composer/style.module.css
index c5d07b1d1c..f5e7d1bd74 100644
--- a/apps/ui/src/features/chats/session-view/composer/style.module.css
+++ b/apps/ui/src/features/chats/session-view/composer/style.module.css
@@ -62,12 +62,6 @@
 	height: auto;
 }
 
-/* On the composer's surface the muted fill and hover wash step up a shade. */
-:global(html[data-color-scheme='dark']) .shell {
-	--muted: var(--surface-4);
-	--hover: var(--muted);
-}
-
 /* Text-input chrome, like the form inputs beside it, instead of the chat composer. */
 .shellField {
 	border-radius: 9px;
diff --git a/apps/ui/src/features/chats/session-view/conversation/style.module.css b/apps/ui/src/features/chats/session-view/conversation/style.module.css
index e86d657e86..dce381a68b 100644
--- a/apps/ui/src/features/chats/session-view/conversation/style.module.css
+++ b/apps/ui/src/features/chats/session-view/conversation/style.module.css
@@ -324,18 +324,14 @@
 }
 
 .questionCard {
+	--surface: var(--muted);
 	display: flex;
 	flex-direction: column;
 	gap: 16px;
 	width: 100%;
 	padding: 16px;
 	border-radius: 16px;
-	background-color: var(--muted);
-}
-
-/* The card is a muted surface, so the rows inside it step up a shade. */
-.questionCard > * {
-	--muted: var(--surface-3);
+	background-color: var(--surface);
 }
 
 .questionText {
diff --git a/apps/ui/src/features/sites/preview-particles/style.module.css b/apps/ui/src/features/sites/preview-particles/style.module.css
index d67e26ce9e..9277882441 100644
--- a/apps/ui/src/features/sites/preview-particles/style.module.css
+++ b/apps/ui/src/features/sites/preview-particles/style.module.css
@@ -3,21 +3,16 @@
 	inset: 0;
 	width: 100%;
 	height: 100%;
-	color: var(--foreground);
+	color: light-dark(var(--foreground), var(--muted-foreground));
 	pointer-events: none;
 }
 
-:global(html[data-color-scheme='dark']) .canvas,
-:global(html[data-color-scheme='dark']) .logo {
-	color: var(--muted-foreground);
-}
-
 .logo {
 	position: absolute;
 	top: 50%;
 	left: 50%;
 	display: flex;
-	color: var(--foreground);
+	color: light-dark(var(--foreground), var(--muted-foreground));
 	opacity: 0;
 	pointer-events: none;
 	transform: translate(-50%, -50%);
diff --git a/apps/ui/src/lib/theme/tokens.css b/apps/ui/src/lib/theme/tokens.css
index 4afeb56528..e3b6cfa640 100644
--- a/apps/ui/src/lib/theme/tokens.css
+++ b/apps/ui/src/lib/theme/tokens.css
@@ -147,6 +147,39 @@
 	--hover: var( --muted );
 }
 
+/* A surface sets `--surface` to its fill, and `--muted` inside it resolves one
+   step up so cards and hover fills still show on it, stepping back down at the
+   end of the palette. */
+@property --surface {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: transparent;
+}
+
+@container style( --surface: var( --surface-0 ) ) or style( --surface: var( --surface-1 ) ) {
+	* {
+		--muted: var( --surface-2 );
+	}
+}
+
+@container style( --surface: var( --surface-2 ) ) {
+	* {
+		--muted: var( --surface-3 );
+	}
+}
+
+@container style( --surface: var( --surface-3 ) ) {
+	* {
+		--muted: var( --surface-4 );
+	}
+}
+
+@container style( --surface: var( --surface-4 ) ) {
+	* {
+		--muted: var( --surface-3 );
+	}
+}
+
 @media ( -webkit-min-device-pixel-ratio: 2 ), ( min-resolution: 192dpi ) {
 	:root {
 		--focus-width: 1.5px;
diff --git a/apps/ui/src/lib/ui/badge/style.module.css b/apps/ui/src/lib/ui/badge/style.module.css
index 3ea536eb29..ae561caa29 100644
--- a/apps/ui/src/lib/ui/badge/style.module.css
+++ b/apps/ui/src/lib/ui/badge/style.module.css
@@ -78,11 +78,10 @@
 	}
 
 	.badge[data-variant='destructive'] {
-		background-color: color-mix( in oklab, var( --destructive ) 10%, transparent );
+		background-color: light-dark(
+			color-mix( in oklab, var( --destructive ) 10%, transparent ),
+			color-mix( in oklab, var( --destructive ) 20%, transparent )
+		);
 		color: var( --destructive );
 	}
-
-	:root[data-color-scheme='dark'] .badge[data-variant='destructive'] {
-		background-color: color-mix( in oklab, var( --destructive ) 20%, transparent );
-	}
 }
diff --git a/apps/ui/src/lib/ui/checkbox/style.module.css b/apps/ui/src/lib/ui/checkbox/style.module.css
index 86f1d7f58c..4d9e366923 100644
--- a/apps/ui/src/lib/ui/checkbox/style.module.css
+++ b/apps/ui/src/lib/ui/checkbox/style.module.css
@@ -9,6 +9,10 @@
 		height: 16px;
 		border: 1px solid var( --input );
 		border-radius: 4px;
+		background-color: light-dark(
+			transparent,
+			color-mix( in oklab, var( --input ) 30%, transparent )
+		);
 		cursor: pointer;
 		outline: none;
 	}
@@ -19,10 +23,6 @@
 		content: '';
 	}
 
-	:root[data-color-scheme='dark'] .checkbox:not( [data-checked] ) {
-		background-color: color-mix( in oklab, var( --input ) 30%, transparent );
-	}
-
 	.checkbox[data-checked] {
 		border-color: var( --primary );
 		background-color: var( --primary );
diff --git a/apps/ui/src/lib/ui/code-block/highlight.ts b/apps/ui/src/lib/ui/code-block/highlight.ts
index b47f5a314a..9829cc5779 100644
--- a/apps/ui/src/lib/ui/code-block/highlight.ts
+++ b/apps/ui/src/lib/ui/code-block/highlight.ts
@@ -50,9 +50,9 @@ export async function highlight( code: string, language: string ): Promise< Toke
 	if ( ! instance.getLoadedLanguages().includes( lang ) ) {
 		await instance.loadLanguage( grammar() );
 	}
-	// Each token carries its dark color as `--shiki-dark`.
 	return instance.codeToTokens( code, {
 		lang,
 		themes: { light: 'github-light', dark: 'github-dark' },
+		defaultColor: 'light-dark()',
 	} );
 }
diff --git a/apps/ui/src/lib/ui/code-block/style.module.css b/apps/ui/src/lib/ui/code-block/style.module.css
index 5e2c6b261a..cd54a5d2ac 100644
--- a/apps/ui/src/lib/ui/code-block/style.module.css
+++ b/apps/ui/src/lib/ui/code-block/style.module.css
@@ -19,8 +19,3 @@
 .pre > code {
 	white-space: pre;
 }
-
-/* Shiki's GitHub Dark colors, carried by each token. */
-:global(html[data-color-scheme='dark']) .pre span {
-	color: var(--shiki-dark) !important;
-}
diff --git a/apps/ui/src/lib/ui/command/style.module.css b/apps/ui/src/lib/ui/command/style.module.css
index 1dfbeecf67..f612a1862f 100644
--- a/apps/ui/src/lib/ui/command/style.module.css
+++ b/apps/ui/src/lib/ui/command/style.module.css
@@ -92,12 +92,6 @@
 		white-space: nowrap;
 	}
 
-	/* On the composer's surface the muted fill and hover wash step up a shade. */
-	:global( html[data-color-scheme='dark'] ) .sheet {
-		--muted: var( --surface-4 );
-		--hover: var( --muted );
-	}
-
 	/* The palette's long list scrolls without a bar. */
 	.list[data-size='default'] {
 		scrollbar-width: none;
diff --git a/apps/ui/src/lib/ui/dialog/style.module.css b/apps/ui/src/lib/ui/dialog/style.module.css
index ccdc147780..24b6c10e63 100644
--- a/apps/ui/src/lib/ui/dialog/style.module.css
+++ b/apps/ui/src/lib/ui/dialog/style.module.css
@@ -73,17 +73,14 @@
 	}
 
 	.content[data-surface='composer'] {
+		--surface: var( --composer );
 		border: 1px solid var( --input );
 		border-radius: 24px;
-		background-color: var( --composer );
+		background-color: var( --surface );
 		box-shadow: none;
 		color: var( --foreground );
 	}
 
-	:root[data-color-scheme='dark'] .content[data-surface='composer'] {
-		--muted: var( --surface-4 );
-	}
-
 	.content[data-layout='confirmation'] {
 		max-width: 420px;
 		padding: 20px;
diff --git a/apps/ui/src/lib/ui/field/style.module.css b/apps/ui/src/lib/ui/field/style.module.css
index 4551b47501..a4215c31cb 100644
--- a/apps/ui/src/lib/ui/field/style.module.css
+++ b/apps/ui/src/lib/ui/field/style.module.css
@@ -45,19 +45,14 @@
 	}
 
 	.group[data-variant='settings'] {
+		--surface: var( --muted );
 		gap: 0;
 		padding: 20px;
 		border-radius: var( --radius-xl );
-		background-color: var( --muted );
-	}
-
-	:root[data-color-scheme='dark'] .group[data-variant='settings'] {
-		background-color: color-mix( in oklab, var( --muted ) 70%, transparent );
-	}
-
-	/* Controls on the card step one surface up, so their hover fills still show. */
-	.group[data-variant='settings'] > * {
-		--muted: var( --surface-3 );
+		background-color: light-dark(
+			var( --surface ),
+			color-mix( in oklab, var( --surface ) 70%, transparent )
+		);
 	}
 
 	.group[data-variant='settings'] > .field {
diff --git a/apps/ui/src/lib/ui/input-group/style.module.css b/apps/ui/src/lib/ui/input-group/style.module.css
index 897d968973..800aae8e39 100644
--- a/apps/ui/src/lib/ui/input-group/style.module.css
+++ b/apps/ui/src/lib/ui/input-group/style.module.css
@@ -30,9 +30,10 @@
 	}
 
 	.group[data-variant='composer'] {
+		--surface: var( --composer );
 		border-color: var( --input );
 		border-radius: 24px;
-		background-color: var( --composer );
+		background-color: var( --surface );
 		color: var( --foreground );
 	}
 
diff --git a/apps/ui/src/lib/ui/kbd/style.module.css b/apps/ui/src/lib/ui/kbd/style.module.css
index f56e164a87..003406019f 100644
--- a/apps/ui/src/lib/ui/kbd/style.module.css
+++ b/apps/ui/src/lib/ui/kbd/style.module.css
@@ -42,15 +42,14 @@
 		isolation: isolate;
 		min-width: 16px;
 		height: 16px;
-		background-color: color-mix( in oklab, var( --background ) 20%, transparent );
+		background-color: light-dark(
+			color-mix( in oklab, var( --background ) 20%, transparent ),
+			color-mix( in oklab, var( --background ) 10%, transparent )
+		);
 		color: var( --background );
 		font-size: var( --text-xxs );
 	}
 
-	:root[data-color-scheme='dark'] [data-slot='tooltip-content'] .kbd {
-		background-color: color-mix( in oklab, var( --background ) 10%, transparent );
-	}
-
 	.group {
 		display: inline-flex;
 		gap: 2px;
diff --git a/apps/ui/src/lib/ui/popover/style.module.css b/apps/ui/src/lib/ui/popover/style.module.css
index c7791f3647..e76d1c2b4c 100644
--- a/apps/ui/src/lib/ui/popover/style.module.css
+++ b/apps/ui/src/lib/ui/popover/style.module.css
@@ -5,6 +5,7 @@
 	}
 
 	.commands {
+		--surface: var( --composer );
 		display: flex;
 		flex-direction: column;
 		width: var( --anchor-width );
@@ -13,7 +14,7 @@
 		overflow: hidden;
 		border: 1px solid var( --input );
 		border-radius: 24px;
-		background-color: var( --composer );
+		background-color: var( --surface );
 		color: var( --foreground );
 		font-size: var( --text-sm );
 		line-height: 20px;
diff --git a/apps/ui/src/lib/ui/switch/style.module.css b/apps/ui/src/lib/ui/switch/style.module.css
index 4abf38e7f3..8114c3fbe4 100644
--- a/apps/ui/src/lib/ui/switch/style.module.css
+++ b/apps/ui/src/lib/ui/switch/style.module.css
@@ -47,16 +47,12 @@
 		width: 16px;
 		height: 16px;
 		border-radius: 9999px;
-		background-color: var( --background );
+		background-color: light-dark( var( --background ), var( --foreground ) );
 		box-shadow: var( --shadow-sm );
 		pointer-events: none;
 		transition: translate var( --motion-duration-surface ) var( --motion-ease-enter );
 	}
 
-	:root[data-color-scheme='dark'] .thumb[data-unchecked] {
-		background-color: var( --foreground );
-	}
-
 	.thumb[data-checked] {
 		background-color: var( --accent-foreground );
 		translate: 16px 0;
diff --git a/apps/ui/src/lib/ui/tabs/style.module.css b/apps/ui/src/lib/ui/tabs/style.module.css
index 79bf54aeac..299b41e15d 100644
--- a/apps/ui/src/lib/ui/tabs/style.module.css
+++ b/apps/ui/src/lib/ui/tabs/style.module.css
@@ -46,12 +46,11 @@
 		height: 36px;
 		padding: 0 2px;
 		border-radius: var( --radius-lg );
-		background-color: var( --muted );
+		background-color: light-dark( var( --muted ), var( --background ) );
 	}
 
-	:root[data-color-scheme='dark'] .list[data-variant='scope'] {
+	[data-color-scheme='dark'] .list[data-variant='scope'] {
 		border: 1px solid var( --border );
-		background-color: var( --background );
 	}
 
 	.list[data-variant='sidebar'] {
@@ -123,15 +122,11 @@
 		width: var( --active-tab-width );
 		height: var( --active-tab-height );
 		border-radius: var( --radius-md );
-		background-color: var( --background );
+		background-color: light-dark( var( --background ), var( --muted ) );
 		translate: var( --active-tab-left ) var( --active-tab-top );
 		pointer-events: none;
 	}
 
-	:root[data-color-scheme='dark'] .indicator {
-		background-color: var( --muted );
-	}
-
 	.list:has( [data-active]:focus-visible ) > .indicator {
 		opacity: 0;
 	}

From 52e4499abec8fd3f377a335ae4b4499a6a05cf7f Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Sun, 25 Oct 2026 11:48:57 +0100
Subject: [PATCH 04/10] Document the new tokens

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/ui/README.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/ui/README.md b/apps/ui/README.md
index 423dbebd17..e3a1f598cd 100644
--- a/apps/ui/README.md
+++ b/apps/ui/README.md
@@ -94,7 +94,9 @@ The theme lives in `src/lib/theme/`:
 - **Surfaces**, from lightest to darkest in light mode: `--surface-0`…`--surface-4`, named by role as `--background`, `--chrome` (sidebar, header band), `--chat`, `--composer`, `--popover` and `--muted` (cards, code, chips). `--hover` is the hover fill of the surface it sits on.
 - **Text and lines**: `--foreground`, `--muted-foreground`, `--border`, `--input`, `--ring`.
 - **Actions and status**: `--primary`, `--secondary`, `--accent` (and `--accent-text`, `--accent-foreground`), `--destructive`, `--success`, `--warning`, plus `--status-*` for the vivid status dots.
-- **Type, shape and motion**: `--font-sans`, `--font-mono`, `--text-xxs`…`--text-xl`, `--font-weight-*`, `--radius-*`, `--shadow-*`, `--z-*` layers, `--focus-width`, `--band-height`, `--control-size`, `--motion-duration-*` and `--motion-ease-*`.
+- **Type**: `--font-sans`, `--font-mono`, `--text-2xs`…`--text-2xl` (with `--text-*--line-height` where a size has its own line height), `--leading-*` and `--font-weight-*`.
+- **Space and shape**: `--space-*` on a 4px grid, numbered like Tailwind's spacing (`--space-1_5` is 6px), `--radius-*` up to `--radius-3xl` and `--radius-full`, `--shadow-*`, `--focus-width`, `--band-height` and `--control-size`.
+- **Layers and motion**: `--z-*` layers inside the workspace and above it, `--motion-duration-*` and `--motion-ease-*`. Media queries can't read tokens, so the one breakpoint, `( width < 640px )`, is written where it's used.
 
 Primitives live in `src/lib/ui/` (Button, IconButton, Dialog, Menu, Popover, Select, Field, Input, InputGroup, Textarea, Switch, Checkbox, Tooltip, Alert, Badge, Progress, Empty, Kbd, VisuallyHidden). They follow the rebuild's kit, sit in the `ui` cascade layer so feature CSS overrides them without specificity tricks, and import nothing from app code.
 

From 998a3c8b5727d8e58e83a30daac47eaf66b2cf60 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Sun, 25 Oct 2026 11:48:57 +0100
Subject: [PATCH 05/10] Document scheme scoping and surface stepping

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/ui/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/ui/README.md b/apps/ui/README.md
index 423dbebd17..3f7203fb45 100644
--- a/apps/ui/README.md
+++ b/apps/ui/README.md
@@ -98,7 +98,7 @@ The theme lives in `src/lib/theme/`:
 
 Primitives live in `src/lib/ui/` (Button, IconButton, Dialog, Menu, Popover, Select, Field, Input, InputGroup, Textarea, Switch, Checkbox, Tooltip, Alert, Badge, Progress, Empty, Kbd, VisuallyHidden). They follow the rebuild's kit, sit in the `ui` cascade layer so feature CSS overrides them without specificity tricks, and import nothing from app code.
 
-Colors derive in CSS from a few inputs on the root element (`--tint-hue`, `--tint-intensity`, `--tint-saturation`, `--contrast`, `--accent-fill`), so light, dark and the Appearance settings change them without any palette code. Dark values apply under `[data-color-scheme='dark']`, on the root or on any element that should render in the other scheme.
+Colors derive in CSS from a few inputs on the root element (`--tint-hue`, `--tint-intensity`, `--tint-saturation`, `--contrast`, `--accent-fill`), so light, dark and the Appearance settings change them without any palette code. Dark values apply under `[data-color-scheme='dark']`, on the root or on any element that should render in the other scheme. Components follow the nearest scheme with `light-dark()` for a color, or a `[data-color-scheme='dark'] .x` selector for anything else; never `:root[...]` or `html[...]`, which ignore a scene's own scheme. A surface sets `--surface` to its fill, and `--muted` inside it steps up a shade on its own.
 
 ## Development
 

From 643018b5849ae1eb0b997cb500c442e86567ed69 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Sun, 25 Oct 2026 12:23:40 +0100
Subject: [PATCH 06/10] Layer the recipes with the primitives so component
 rules override them

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/ui/src/lib/theme/recipes.module.css | 64 ++++++++++++------------
 1 file changed, 33 insertions(+), 31 deletions(-)

diff --git a/apps/ui/src/lib/theme/recipes.module.css b/apps/ui/src/lib/theme/recipes.module.css
index 33caefacb6..6956311605 100644
--- a/apps/ui/src/lib/theme/recipes.module.css
+++ b/apps/ui/src/lib/theme/recipes.module.css
@@ -1,37 +1,39 @@
 /* Shared declaration groups, pulled into a component's class with
-   `composes: <name> from '@/lib/theme/recipes.module.css'`. */
+   `composes: <name> from '@/lib/theme/recipes.module.css'`. They sit in the
+   `ui` layer with the primitives, so a component's own rules override them. */
+@layer ui {
+	/* One line of text, cut with an ellipsis. */
+	.truncate {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
 
-/* One line of text, cut with an ellipsis. */
-.truncate {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
+	/* The hairline under a header in the workspace's top band. */
+	.bandEdge {
+		box-shadow: inset 0 -1px 0 var( --border );
+	}
 
-/* The hairline under a header in the workspace's top band. */
-.bandEdge {
-	box-shadow: inset 0 -1px 0 var( --border );
-}
+	/* A hairline drawn inside an image's frame, so the image keeps its full size. */
+	.imageOutline::after {
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		box-shadow: inset 0 0 0 1px var( --border );
+		content: '';
+		pointer-events: none;
+	}
 
-/* A hairline drawn inside an image's frame, so the image keeps its full size. */
-.imageOutline::after {
-	position: absolute;
-	inset: 0;
-	border-radius: inherit;
-	box-shadow: inset 0 0 0 1px var( --border );
-	content: '';
-	pointer-events: none;
-}
-
-/* A dot on an icon's top-right corner, with the icon cut away around it. */
-.dotted:has( .dot ) svg {
-	mask-image: radial-gradient( circle at calc( 100% - 2px ) 2px, transparent 5.5px, #000 6px );
-}
+	/* A dot on an icon's top-right corner, with the icon cut away around it. */
+	.dotted:has( .dot ) svg {
+		mask-image: radial-gradient( circle at calc( 100% - 2px ) 2px, transparent 5.5px, #000 6px );
+	}
 
-.dot {
-	position: absolute;
-	width: 7px;
-	height: 7px;
-	border-radius: 50%;
-	background-color: var( --accent );
+	.dot {
+		position: absolute;
+		width: 7px;
+		height: 7px;
+		border-radius: 50%;
+		background-color: var( --accent );
+	}
 }

From cc55bb4969ac160493694ec420b88fbdc2dd36a8 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Sun, 25 Oct 2026 11:45:21 +0100
Subject: [PATCH 07/10] Agentic UI: Lint and format CSS with ESLint, and
 require theme tokens for colors, type, radii, shadows and layers

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 eslint.config.mjs                             | 42 +++++++---
 package-lock.json                             | 37 +++++++++
 package.json                                  |  3 +-
 tools/eslint-plugin-studio/src/index.js       |  2 +
 .../src/rules/use-theme-tokens.js             | 82 +++++++++++++++++++
 .../tests/use-theme-tokens.test.ts            | 42 ++++++++++
 6 files changed, 197 insertions(+), 11 deletions(-)
 create mode 100644 tools/eslint-plugin-studio/src/rules/use-theme-tokens.js
 create mode 100644 tools/eslint-plugin-studio/tests/use-theme-tokens.test.ts

diff --git a/eslint.config.mjs b/eslint.config.mjs
index cd89b358c7..6538907f9b 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,5 +1,6 @@
 import fs from 'node:fs';
 import path from 'node:path';
+import css from '@eslint/css';
 import js from '@eslint/js';
 import { defineConfig, globalIgnores } from 'eslint/config';
 import pluginImport from 'eslint-plugin-import-x';
@@ -71,15 +72,18 @@ export default defineConfig(
 		'vendor/',
 		'wp-files/',
 	] ),
-	js.configs.recommended,
-	tsEslint.configs.recommended,
-	pluginImport.flatConfigs.recommended,
-	pluginImport.flatConfigs.electron,
-	pluginImport.flatConfigs.typescript,
-	pluginPrettier,
-	pluginReactHooks.configs.flat.recommended,
-	pluginJestDom.configs[ 'flat/recommended' ],
 	{
+		files: [ '**/*.{js,mjs,cjs,jsx,ts,mts,cts,tsx}' ],
+		extends: [
+			js.configs.recommended,
+			tsEslint.configs.recommended,
+			pluginImport.flatConfigs.recommended,
+			pluginImport.flatConfigs.electron,
+			pluginImport.flatConfigs.typescript,
+			pluginPrettier,
+			pluginReactHooks.configs.flat.recommended,
+			pluginJestDom.configs[ 'flat/recommended' ],
+		],
 		plugins: {
 			studio: pluginStudio,
 		},
@@ -247,7 +251,7 @@ export default defineConfig(
 	{
 		// The agentic UI owns its design system: theme tokens in `src/lib/theme/` and
 		// primitives in `src/lib/ui/`, which stay independent of app code.
-		files: [ 'apps/ui/src/**' ],
+		files: [ 'apps/ui/src/**/*.{ts,tsx}' ],
 		rules: {
 			'no-restricted-imports': [ 'error', { patterns: [ WP_UI_PACKAGES ] } ],
 			'import-x/no-restricted-paths': [ 'error', UI_LAYERS ],
@@ -255,7 +259,7 @@ export default defineConfig(
 		},
 	},
 	{
-		files: [ 'apps/ui/src/lib/**' ],
+		files: [ 'apps/ui/src/lib/**/*.{ts,tsx}' ],
 		rules: {
 			'no-restricted-imports': [
 				'error',
@@ -277,5 +281,23 @@ export default defineConfig(
 		rules: {
 			'jest-dom/prefer-to-have-value': 'off',
 		},
+	},
+	{
+		files: [ 'apps/ui/src/**/*.css' ],
+		plugins: { css, prettier: pluginPrettier.plugins.prettier, studio: pluginStudio },
+		language: 'css/css',
+		languageOptions: { tolerant: true },
+		rules: {
+			'prettier/prettier': 'error',
+			'studio/use-theme-tokens': 'error',
+		},
+	},
+	{
+		// Tokens are defined here, and the onboarding illustrations are artwork drawn
+		// with their own literal values.
+		files: [ 'apps/ui/src/lib/theme/**', 'apps/ui/src/features/onboarding/onboarding-guide/illustrations/**' ],
+		rules: {
+			'studio/use-theme-tokens': 'off',
+		},
 	}
 );
diff --git a/package-lock.json b/package-lock.json
index 06fc45a7d0..873a82e41b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
 			],
 			"devDependencies": {
 				"@automattic/wp-babel-makepot": "^1.2.0",
+				"@eslint/css": "^2.0.1",
 				"@eslint/js": "^10.0.1",
 				"@playwright/test": "^1.64.1",
 				"@testing-library/jest-dom": "^7.0.1",
@@ -6426,6 +6427,35 @@
 				"node": "^20.19.0 || ^22.13.0 || >=24"
 			}
 		},
+		"node_modules/@eslint/css": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/@eslint/css/-/css-2.0.1.tgz",
+			"integrity": "sha512-1qIQFzuFeTaHF3ewzsj/HUDC9RTDwfBHGWdFvpmOG0R/Tb3Mt+17yltbE10/LK+oglS1fP9+tiG5UzMvWgQY9g==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@eslint/core": "^1.2.1",
+				"@eslint/css-tree": "^4.1.1",
+				"@eslint/plugin-kit": "^0.7.3"
+			},
+			"engines": {
+				"node": "^20.19.0 || ^22.13.0 || >=24"
+			}
+		},
+		"node_modules/@eslint/css-tree": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/@eslint/css-tree/-/css-tree-4.1.2.tgz",
+			"integrity": "sha512-rVcxLmwSkEL3aWS3vAgsTRrQHoYE1b0XcgDtKHDJ92XOkyUpcbS/g0tUJKhvCtlEhYzgKBWsgDd+Z/aPhd166w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"mdn-data": "2.37.2",
+				"source-map-js": "^1.2.1"
+			},
+			"engines": {
+				"node": "^20.19.0 || ^22.13.0 || >=24"
+			}
+		},
 		"node_modules/@eslint/js": {
 			"version": "10.0.1",
 			"resolved": "https://registry.npmjs.org/@eslint/js/-/js-10.0.1.tgz",
@@ -19368,6 +19398,13 @@
 				"url": "https://opencollective.com/unified"
 			}
 		},
+		"node_modules/mdn-data": {
+			"version": "2.37.2",
+			"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.37.2.tgz",
+			"integrity": "sha512-rz9YOBGItdSbe7HcSArUbhiAv4SB/4DKRYg96CSFS2CcIYMbUvBtZlzA1NCbk2AdgbmYwMqwNblLpR441lLeiQ==",
+			"dev": true,
+			"license": "CC0-1.0"
+		},
 		"node_modules/media-typer": {
 			"version": "0.3.0",
 			"license": "MIT",
diff --git a/package.json b/package.json
index 6b63b40d10..6b82e3761d 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
 	},
 	"devDependencies": {
 		"@automattic/wp-babel-makepot": "^1.2.0",
+		"@eslint/css": "^2.0.1",
 		"@eslint/js": "^10.0.1",
 		"@playwright/test": "^1.64.1",
 		"@testing-library/jest-dom": "^7.0.1",
@@ -81,8 +82,8 @@
 		"@vitest/ui": "^5.0.5",
 		"@wp-playground/tools": "3.1.53",
 		"@yao-pkg/pkg": "^6.21.0",
-		"electron2appx": "2.1.3",
 		"electron-playwright-helpers": "^3.1.2",
+		"electron2appx": "2.1.3",
 		"eslint": "^10.13.0",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-import-resolver-typescript": "^4.4.5",
diff --git a/tools/eslint-plugin-studio/src/index.js b/tools/eslint-plugin-studio/src/index.js
index af8d50240c..432da71048 100644
--- a/tools/eslint-plugin-studio/src/index.js
+++ b/tools/eslint-plugin-studio/src/index.js
@@ -1,9 +1,11 @@
 import noModuleLevelTranslations from './rules/no-module-level-translations.js';
 import requireLockBeforeSave from './rules/require-lock-before-save.js';
+import useThemeTokens from './rules/use-theme-tokens.js';
 
 export default {
 	rules: {
 		'require-lock-before-save': requireLockBeforeSave,
 		'no-module-level-translations': noModuleLevelTranslations,
+		'use-theme-tokens': useThemeTokens,
 	},
 };
diff --git a/tools/eslint-plugin-studio/src/rules/use-theme-tokens.js b/tools/eslint-plugin-studio/src/rules/use-theme-tokens.js
new file mode 100644
index 0000000000..d20f5db0f9
--- /dev/null
+++ b/tools/eslint-plugin-studio/src/rules/use-theme-tokens.js
@@ -0,0 +1,82 @@
+const COLOR = /#[\da-f]{3,8}\b|\b(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch)\((?!\s*from\b)|\b(?:black|white)\b/i;
+const LENGTH = /\d(?:px|rem)\b/;
+
+// Top-level comma-separated layers of a value.
+function layers( value ) {
+	const out = [ '' ];
+	let depth = 0;
+	for ( const char of value ) {
+		depth += char === '(' ? 1 : char === ')' ? -1 : 0;
+		if ( char === ',' && depth === 0 ) {
+			out.push( '' );
+		} else {
+			out[ out.length - 1 ] += char;
+		}
+	}
+	return out;
+}
+
+// A shadow layer that casts (has a blur) is an elevation, which has tokens.
+function castsShadow( layer ) {
+	const lengths = layer
+		.replace( /var\([^)]*\)|color-mix\(.*\)/g, '' )
+		.trim()
+		.split( /\s+/ )
+		.filter( ( part ) => /^-?\d*\.?\d+(?:px)?$/.test( part ) );
+	return lengths.length >= 3 && parseFloat( lengths[ 2 ] ) !== 0;
+}
+
+function check( property, value ) {
+	// Masks paint alpha, not color.
+	if ( ! /^(?:-webkit-)?mask/.test( property ) && COLOR.test( value ) ) {
+		return 'color';
+	}
+	if ( property === 'font-size' && LENGTH.test( value ) ) {
+		return 'fontSize';
+	}
+	// A radius derived from a token, like `calc( var( --radius-md ) + 6px )`, follows the scale.
+	if (
+		/^border(?:-[a-z]+)*-radius$/.test( property ) &&
+		LENGTH.test( value ) &&
+		! /var\(\s*--radius/.test( value )
+	) {
+		return 'radius';
+	}
+	if ( property === 'box-shadow' && layers( value ).some( castsShadow ) ) {
+		return 'shadow';
+	}
+	if ( property === 'z-index' && /^\d+$/.test( value ) && Number( value ) >= 10 ) {
+		return 'zIndex';
+	}
+	return null;
+}
+
+/** @type {import('eslint').Rule.RuleModule} */
+export default {
+	meta: {
+		type: 'suggestion',
+		docs: {
+			description:
+				'Require theme tokens for colors, font sizes, radii, elevation shadows and stacking layers in CSS.',
+		},
+		schema: [],
+		messages: {
+			color: 'Use a color token from lib/theme/tokens.css instead of a literal color.',
+			fontSize: 'Use a `--text-*` token instead of a literal font size.',
+			radius: 'Use a `--radius-*` token instead of a literal radius.',
+			shadow: 'Use a `--shadow-*` token instead of a literal shadow.',
+			zIndex: 'Use a `--z-*` token for a layer; literals are for order within a component (0–9).',
+		},
+	},
+	create( context ) {
+		return {
+			Declaration( node ) {
+				const value = context.sourceCode.getText( node.value ).trim();
+				const messageId = check( node.property.toLowerCase(), value );
+				if ( messageId ) {
+					context.report( { node, messageId } );
+				}
+			},
+		};
+	},
+};
diff --git a/tools/eslint-plugin-studio/tests/use-theme-tokens.test.ts b/tools/eslint-plugin-studio/tests/use-theme-tokens.test.ts
new file mode 100644
index 0000000000..0ffd03a72f
--- /dev/null
+++ b/tools/eslint-plugin-studio/tests/use-theme-tokens.test.ts
@@ -0,0 +1,42 @@
+import css from '@eslint/css';
+import { RuleTester } from 'eslint';
+import { describe } from 'vitest';
+import rule from '../src/rules/use-theme-tokens';
+
+const ruleTester = new RuleTester( {
+	plugins: { css },
+	language: 'css/css',
+} );
+
+const invalid = ( code: string, messageId: string ) => ( { code, errors: [ { messageId } ] } );
+
+describe( 'use-theme-tokens', () => {
+	ruleTester.run( 'use-theme-tokens', rule, {
+		valid: [
+			'.a { color: var( --foreground ); background: color-mix( in oklab, var( --muted ) 50%, transparent ); }',
+			'.a { color: oklch( from currentColor l c h / 50% ); }',
+			'.a { mask-image: linear-gradient( to bottom, transparent, black 20px ); }',
+			'.a { font-size: var( --text-sm ); }',
+			'.a { font-size: 0.9em; }',
+			'.a { border-radius: var( --radius-md ); }',
+			'.a { border-radius: 0 inherit; }',
+			'.a { border-radius: calc( var( --radius-md ) + 6px ); }',
+			'.a { box-shadow: inset 0 0 0 1px var( --border ), var( --shadow-sm ); }',
+			'.a { box-shadow: 0 0 0 2px var( --ring ); }',
+			'.a { z-index: 1; }',
+			'.a { z-index: var( --z-popover ); }',
+			'.a { white-space: nowrap; }',
+		],
+		invalid: [
+			invalid( '.a { color: #fff; }', 'color' ),
+			invalid( '.a { background: rgb( 0 0 0 / 10% ); }', 'color' ),
+			invalid( '.a { border-color: white; }', 'color' ),
+			invalid( '.a { font-size: 11px; }', 'fontSize' ),
+			invalid( '.a { font-size: 1.25rem; }', 'fontSize' ),
+			invalid( '.a { border-radius: 6px; }', 'radius' ),
+			invalid( '.a { border-top-left-radius: 0.5rem; }', 'radius' ),
+			invalid( '.a { box-shadow: 0 1px 3px var( --border ); }', 'shadow' ),
+			invalid( '.a { z-index: 40; }', 'zIndex' ),
+		],
+	} );
+} );

From 6de2081011db52a5e60d2758a616d3bdd21b7abe Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Sun, 25 Oct 2026 12:27:59 +0100
Subject: [PATCH 08/10] Format CSS with Prettier through ESLint and record the
 guard's exceptions

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/ui/README.md                             |   2 +
 .../account/account-prompt/style.module.css   |  53 ++---
 .../account/auth-actions/style.module.css     |  20 +-
 .../account/gravatar/style.module.css         |   6 +-
 .../account/user-menu/style.module.css        |  20 +-
 .../src/features/annotations/style.module.css |  79 ++++---
 .../features/chats/markdown/style.module.css  |  94 ++++----
 .../chats/progressive-blur/style.module.css   |  30 +--
 .../agent-question/style.module.css           | 137 ++++++------
 .../conversation/message/style.module.css     |  64 +++---
 .../conversation/style.module.css             |  18 +-
 .../conversation/trace/style.module.css       |  54 ++---
 .../queued-prompts/style.module.css           |  32 +--
 .../chats/session-view/style.module.css       |  77 ++++---
 .../commands/command-palette/style.module.css |   8 +-
 .../attachment-chips/style.module.css         |  78 +++----
 .../composer/mode-chip/style.module.css       |   4 +-
 .../composer/notice-tab/style.module.css      |  32 +--
 .../ui/src/features/composer/style.module.css |  64 +++---
 .../composer/submit-button/style.module.css   |   2 +-
 .../style.module.css                          |  14 +-
 .../style.module.css                          |  30 +--
 .../app-message-cards/style.module.css        |  14 +-
 .../notifications/app-toasts/style.module.css |  70 +++---
 .../notice-card/style.module.css              |  74 +++----
 .../notice-history/style.module.css           |  40 ++--
 .../onboarding/learn-more/style.module.css    |   2 +-
 .../illustrations/style.module.css            | 176 ++++++++-------
 .../illustrations/whats-new.module.css        | 152 ++++++-------
 .../onboarding-guide/style.module.css         |  57 +++--
 .../welcome-dialog/style.module.css           |  70 +++---
 .../agentic-signin-banner/style.module.css    |  28 +--
 .../settings/offline-banner/style.module.css  |  22 +-
 .../settings/settings-dialog/style.module.css |  28 +--
 .../settings/settings-view/style.module.css   | 155 ++++++-------
 .../site-settings-view/style.module.css       |  24 +-
 .../settings/wapuu-world/style.module.css     |  44 ++--
 .../sharing/share-dialog/style.module.css     |  40 ++--
 .../collapsed-site-switcher/style.module.css  |  24 +-
 .../sidebar/reorderable-list/style.module.css |   7 +-
 .../sidebar/sidebar-header/style.module.css   |  22 +-
 .../sidebar/sidebar-layout/style.module.css   |  53 +++--
 .../sidebar/sidebar-toggle/style.module.css   |  20 +-
 .../site-activity-indicator/style.module.css  |  47 ++--
 .../sidebar/site-list/style.module.css        | 174 +++++++--------
 .../blueprint-gallery.module.css              |  54 ++---
 .../add-site-dialog/connect-panel.module.css  |  66 +++---
 .../add-site-dialog/create-panel.module.css   |  62 +++---
 .../add-site-dialog/import-panel.module.css   |  26 +--
 .../sites/add-site-dialog/style.module.css    |  22 +-
 .../sites/blueprint-upload/style.module.css   |  23 +-
 .../sites/create-site-form/style.module.css   |  52 ++---
 .../sites/delete-site-dialog/style.module.css |   2 +-
 .../sites/design-system-view/style.module.css | 207 +++++++++---------
 .../sites/preview-particles/style.module.css  |   8 +-
 .../preview-split-frame/style.module.css      |  38 ++--
 .../sites/site-actions-menu/style.module.css  |   2 +-
 .../sites/site-fields/style.module.css        |   8 +-
 .../site-header-actions/style.module.css      |   4 +-
 .../features/sites/site-icon/style.module.css |  21 +-
 .../site-lifecycle-button/style.module.css    |   2 +-
 .../sites/site-preview/address-bar.module.css |  46 ++--
 .../preview-header/style.module.css           |  48 ++--
 .../preview-surface/style.module.css          |  20 +-
 .../sites/site-preview/style.module.css       |  16 +-
 .../stopped-site-preview/style.module.css     |  34 +--
 .../sync/publish-panel/style.module.css       | 108 ++++-----
 apps/ui/src/lib/theme/recipes.module.css      |   2 +-
 apps/ui/src/lib/ui/button/style.module.css    |  28 ++-
 apps/ui/src/lib/ui/checkbox/style.module.css  |   1 +
 .../ui/src/lib/ui/code-block/style.module.css |  14 +-
 apps/ui/src/lib/ui/field/style.module.css     |  13 +-
 .../src/lib/ui/input-group/style.module.css   |   4 +-
 .../src/lib/ui/marquee-label/style.module.css |   1 -
 .../src/lib/ui/resize-handle/style.module.css |   6 +-
 .../router/route-no-sites/style.module.css    |   2 +-
 eslint.config.mjs                             |  12 +-
 77 files changed, 1609 insertions(+), 1604 deletions(-)

diff --git a/apps/ui/README.md b/apps/ui/README.md
index b46b637aea..c21e0122c4 100644
--- a/apps/ui/README.md
+++ b/apps/ui/README.md
@@ -101,6 +101,8 @@ The theme lives in `src/lib/theme/`:
 
 Primitives live in `src/lib/ui/` (Button, IconButton, Dialog, Menu, Popover, Select, Field, Input, InputGroup, Textarea, Switch, Checkbox, Tooltip, Alert, Badge, Progress, Empty, Kbd, VisuallyHidden). They follow the rebuild's kit, sit in the `ui` cascade layer so feature CSS overrides them without specificity tricks, and import nothing from app code.
 
+Outside `src/lib/theme/`, ESLint (`studio/use-theme-tokens`) flags literal colors, font sizes, radii, elevation shadows and stacking layers, and formats CSS with Prettier, so `npx eslint --fix` covers stylesheets too. A literal that has to stay carries an `eslint-disable-next-line` comment saying why.
+
 Colors derive in CSS from a few inputs on the root element (`--tint-hue`, `--tint-intensity`, `--tint-saturation`, `--contrast`, `--accent-fill`), so light, dark and the Appearance settings change them without any palette code. Dark values apply under `[data-color-scheme='dark']`, on the root or on any element that should render in the other scheme. Components follow the nearest scheme with `light-dark()` for a color, or a `[data-color-scheme='dark'] .x` selector for anything else; never `:root[...]` or `html[...]`, which ignore a scene's own scheme. A surface sets `--surface` to its fill, and `--muted` inside it steps up a shade on its own.
 
 ## Development
diff --git a/apps/ui/src/features/account/account-prompt/style.module.css b/apps/ui/src/features/account/account-prompt/style.module.css
index f08ce41e3c..a2d4d49a57 100644
--- a/apps/ui/src/features/account/account-prompt/style.module.css
+++ b/apps/ui/src/features/account/account-prompt/style.module.css
@@ -3,13 +3,13 @@
 	flex-direction: column;
 	align-items: center;
 	width: 100%;
-	margin-top: calc(var(--space-4) * -1);
-	padding-bottom: var(--space-8);
+	margin-top: calc( var( --space-4 ) * -1 );
+	padding-bottom: var( --space-8 );
 	text-align: center;
 	text-wrap: pretty;
 }
 
-:global([data-slot='empty']) > .body {
+:global( [data-slot='empty'] ) > .body {
 	margin-top: 0;
 	padding-bottom: 0;
 }
@@ -19,7 +19,7 @@
 	width: 100%;
 	max-width: 448px;
 	aspect-ratio: 2.6 / 1;
-	margin-bottom: var(--space-5);
+	margin-bottom: var( --space-5 );
 	pointer-events: none;
 }
 
@@ -29,13 +29,14 @@
 	position: absolute;
 	top: 50%;
 	aspect-ratio: 4 / 3;
-	border-radius: var(--radius-md);
-	background-color: var(--muted);
+	border-radius: var( --radius-md );
+	background-color: var( --muted );
 	background-position: center;
 	background-size: cover;
+	/* eslint-disable-next-line studio/use-theme-tokens -- a one-off card shadow, lighter than --shadow-sm. */
 	box-shadow:
-		inset 0 0 0 1px var(--border),
-		0 1px 3px rgb(0 0 0 / 10%);
+		inset 0 0 0 1px var( --border ),
+		0 1px 3px rgb( 0 0 0 / 10% );
 }
 
 .cardStart,
@@ -45,40 +46,40 @@
 
 .cardStart {
 	left: 10%;
-	transform: translateY(-45%) rotate(-8deg);
+	transform: translateY( -45% ) rotate( -8deg );
 }
 
 .cardEnd {
 	right: 10%;
-	transform: translateY(-45%) rotate(8deg);
+	transform: translateY( -45% ) rotate( 8deg );
 }
 
 .cardCenter {
 	left: 50%;
 	z-index: 1;
 	width: 43%;
-	transform: translate(-50%, -50%);
+	transform: translate( -50%, -50% );
 }
 
-@media (prefers-reduced-motion: no-preference) {
+@media ( prefers-reduced-motion: no-preference ) {
 	.cardStart,
 	.cardEnd {
-		transition: transform calc(var(--motion-duration-layout) * 2) var(--motion-ease-enter);
+		transition: transform calc( var( --motion-duration-layout ) * 2 ) var( --motion-ease-enter );
 	}
 
 	@starting-style {
 		.cardStart {
-			transform: translate(62.5%, -50%) scale(0.97);
+			transform: translate( 62.5%, -50% ) scale( 0.97 );
 		}
 
 		.cardEnd {
-			transform: translate(-62.5%, -50%) scale(0.97);
+			transform: translate( -62.5%, -50% ) scale( 0.97 );
 		}
 	}
 }
 
 .title {
-	font-size: var(--text-xl);
+	font-size: var( --text-xl );
 	font-weight: 550;
 	line-height: 1.4;
 	letter-spacing: -0.02em;
@@ -86,23 +87,23 @@
 
 .description {
 	max-width: 320px;
-	margin: var(--space-1) 0 0;
-	color: var(--muted-foreground);
-	font-size: var(--text-sm);
-	line-height: var(--leading-relaxed);
+	margin: var( --space-1 ) 0 0;
+	color: var( --muted-foreground );
+	font-size: var( --text-sm );
+	line-height: var( --leading-relaxed );
 }
 
 .error {
-	margin: var(--space-3) 0 0;
-	color: var(--destructive);
-	font-size: var(--text-xs);
+	margin: var( --space-3 ) 0 0;
+	color: var( --destructive );
+	font-size: var( --text-xs );
 }
 
 .createAccount {
-	margin-top: var(--space-7);
+	margin-top: var( --space-7 );
 }
 
 .logIn {
-	margin-top: var(--space-4);
-	font-size: var(--text-xs);
+	margin-top: var( --space-4 );
+	font-size: var( --text-xs );
 }
diff --git a/apps/ui/src/features/account/auth-actions/style.module.css b/apps/ui/src/features/account/auth-actions/style.module.css
index 412ea9d354..75644ac683 100644
--- a/apps/ui/src/features/account/auth-actions/style.module.css
+++ b/apps/ui/src/features/account/auth-actions/style.module.css
@@ -1,33 +1,33 @@
 .root {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-3);
+	gap: var( --space-3 );
 }
 
 .actions {
 	display: flex;
 	align-items: center;
-	gap: var(--space-4);
+	gap: var( --space-4 );
 }
 
 .arrow {
-	margin-inline-start: var(--space-1);
+	margin-inline-start: var( --space-1 );
 	display: inline-block;
 }
 
 [dir='rtl'] .arrow {
-	transform: scaleX(-1);
+	transform: scaleX( -1 );
 }
 
 .error {
-	padding: var(--space-2_5) var(--space-3);
-	border: 1px solid color-mix(in oklab, var(--destructive) 35%, transparent);
-	border-radius: var(--radius-lg);
-	background: var(--destructive-surface);
-	color: var(--destructive);
+	padding: var( --space-2_5 ) var( --space-3 );
+	border: 1px solid color-mix( in oklab, var( --destructive ) 35%, transparent );
+	border-radius: var( --radius-lg );
+	background: var( --destructive-surface );
+	color: var( --destructive );
 }
 
-@media (width < 640px) {
+@media ( width < 640px ) {
 	.actions {
 		align-items: stretch;
 		flex-direction: column;
diff --git a/apps/ui/src/features/account/gravatar/style.module.css b/apps/ui/src/features/account/gravatar/style.module.css
index dc25957f23..1c48c8dc5d 100644
--- a/apps/ui/src/features/account/gravatar/style.module.css
+++ b/apps/ui/src/features/account/gravatar/style.module.css
@@ -3,9 +3,9 @@
 	display: inline-flex;
 	width: 20px;
 	height: 20px;
-	border-radius: var(--radius-full);
+	border-radius: var( --radius-full );
 	flex-shrink: 0;
-	background-color: var(--chat);
+	background-color: var( --chat );
 }
 
 /* A hairline ring over the image, blended so it darkens light edges and
@@ -14,7 +14,7 @@
 	content: '';
 	position: absolute;
 	inset: 0;
-	border: 1px solid var(--border);
+	border: 1px solid var( --border );
 	border-radius: inherit;
 	mix-blend-mode: darken;
 }
diff --git a/apps/ui/src/features/account/user-menu/style.module.css b/apps/ui/src/features/account/user-menu/style.module.css
index 5269f9648f..fc4e13e336 100644
--- a/apps/ui/src/features/account/user-menu/style.module.css
+++ b/apps/ui/src/features/account/user-menu/style.module.css
@@ -2,11 +2,11 @@
    notification bell at the end, as 36px controls inset 12px. Pinning to the
    sidebar bottom is handled by the layout's `sidebarFooter` wrapper. */
 .root {
-	padding: 0 var(--space-3) var(--space-2_5);
+	padding: 0 var( --space-3 ) var( --space-2_5 );
 }
 
 .alert {
-	margin-block-end: var(--space-2);
+	margin-block-end: var( --space-2 );
 }
 
 .row {
@@ -16,7 +16,7 @@
 
 .offline {
 	display: flex;
-	color: var(--muted-foreground);
+	color: var( --muted-foreground );
 }
 
 .avatar {
@@ -35,26 +35,26 @@
 .account {
 	display: flex;
 	align-items: center;
-	gap: var(--space-1_5);
-	padding: var(--space-2) var(--space-1_5);
+	gap: var( --space-1_5 );
+	padding: var( --space-2 ) var( --space-1_5 );
 }
 
 .accountText {
 	display: flex;
 	flex-direction: column;
 	min-width: 0;
-	font-size: var(--text-xs);
-	line-height: var(--leading-tight);
+	font-size: var( --text-xs );
+	line-height: var( --leading-tight );
 }
 
 .accountName {
 	composes: truncate from '@/lib/theme/recipes.module.css';
-	font-weight: var(--font-weight-medium);
+	font-weight: var( --font-weight-medium );
 }
 
 .accountEmail {
 	composes: truncate from '@/lib/theme/recipes.module.css';
-	color: var(--muted-foreground);
+	color: var( --muted-foreground );
 }
 
 .itemLabel {
@@ -62,6 +62,6 @@
 }
 
 .shortcut {
-	color: var(--muted-foreground);
+	color: var( --muted-foreground );
 	font: inherit;
 }
diff --git a/apps/ui/src/features/annotations/style.module.css b/apps/ui/src/features/annotations/style.module.css
index 46f66f9956..810a6c24dd 100644
--- a/apps/ui/src/features/annotations/style.module.css
+++ b/apps/ui/src/features/annotations/style.module.css
@@ -1,7 +1,7 @@
 .overlay {
 	position: absolute;
 	inset: 0;
-	z-index: var(--z-overlay);
+	z-index: var( --z-overlay );
 	pointer-events: none;
 }
 
@@ -9,32 +9,28 @@
 	position: absolute;
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-1);
+	gap: var( --space-1 );
 	width: 320px;
-	max-width: calc(100% - 16px);
-	max-height: calc(100% - 80px);
-	padding: var(--space-1);
+	max-width: calc( 100% - 16px );
+	max-height: calc( 100% - 80px );
+	padding: var( --space-1 );
 	overflow-y: auto;
-	border: 1px solid var(--input);
-	border-radius: var(--radius-3xl);
-	background-color: var(--composer);
-	color: var(--foreground);
+	border: 1px solid var( --input );
+	border-radius: var( --radius-3xl );
+	background-color: var( --composer );
+	color: var( --foreground );
 	pointer-events: auto;
 }
 
 .editorDragging {
-	background-color: color-mix(
-		in srgb,
-		var(--accent) 10%,
-		var(--composer)
-	);
+	background-color: color-mix( in srgb, var( --accent ) 10%, var( --composer ) );
 }
 
 .images {
 	display: flex;
 	flex-wrap: wrap;
-	gap: var(--space-3);
-	padding: var(--space-2) var(--space-2) var(--space-1);
+	gap: var( --space-3 );
+	padding: var( --space-2 ) var( --space-2 ) var( --space-1 );
 }
 
 .image {
@@ -42,8 +38,8 @@
 	position: relative;
 	width: 48px;
 	height: 48px;
-	border-radius: var(--radius-xl);
-	background-color: var(--muted);
+	border-radius: var( --radius-xl );
+	background-color: var( --muted );
 }
 
 .image img {
@@ -55,27 +51,28 @@
 
 .imageRemove {
 	position: absolute;
-	top: calc(var(--space-2) * -1);
-	right: calc(var(--space-2) * -1);
+	top: calc( var( --space-2 ) * -1 );
+	right: calc( var( --space-2 ) * -1 );
 	z-index: 1;
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
 	width: 24px;
 	height: 24px;
-	border: 1px solid var(--border);
-	border-radius: var(--radius-full);
-	background-color: var(--chrome);
-	box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
-	color: var(--foreground);
+	border: 1px solid var( --border );
+	border-radius: var( --radius-full );
+	background-color: var( --chrome );
+	/* eslint-disable-next-line studio/use-theme-tokens -- a one-off button shadow. */
+	box-shadow: 0 1px 2px rgb( 0 0 0 / 10% );
+	color: var( --foreground );
 	cursor: pointer;
 }
 
 .toolbar {
 	display: flex;
 	align-items: center;
-	gap: var(--space-1);
-	padding: 0 var(--space-1) var(--space-1);
+	gap: var( --space-1 );
+	padding: 0 var( --space-1 ) var( --space-1 );
 }
 
 .save {
@@ -84,40 +81,40 @@
 
 .bar {
 	position: absolute;
-	bottom: var(--space-4);
+	bottom: var( --space-4 );
 	left: 50%;
 	display: flex;
 	align-items: center;
-	gap: var(--space-1);
-	padding: var(--space-1_5);
-	border-radius: var(--radius-xl);
-	background-color: var(--popover);
+	gap: var( --space-1 );
+	padding: var( --space-1_5 );
+	border-radius: var( --radius-xl );
+	background-color: var( --popover );
 	box-shadow:
-		0 0 0 1px var(--border),
-		var(--shadow-sm);
+		0 0 0 1px var( --border ),
+		var( --shadow-sm );
 	pointer-events: auto;
-	transform: translateX(-50%);
+	transform: translateX( -50% );
 }
 
 .bar[data-open='false'] {
 	visibility: hidden;
 	opacity: 0;
 	pointer-events: none;
-	transform: translate(-50%, calc(100% + 16px));
+	transform: translate( -50%, calc( 100% + 16px ) );
 }
 
-@media (prefers-reduced-motion: no-preference) {
+@media ( prefers-reduced-motion: no-preference ) {
 	.bar {
 		transition:
-			transform var(--motion-duration-layout) var(--motion-ease-enter),
-			opacity var(--motion-duration-layout) var(--motion-ease-enter),
-			visibility var(--motion-duration-layout);
+			transform var( --motion-duration-layout ) var( --motion-ease-enter ),
+			opacity var( --motion-duration-layout ) var( --motion-ease-enter ),
+			visibility var( --motion-duration-layout );
 	}
 
 	@starting-style {
 		.bar[data-open='true'] {
 			opacity: 0;
-			transform: translate(-50%, calc(100% + 16px));
+			transform: translate( -50%, calc( 100% + 16px ) );
 		}
 	}
 }
diff --git a/apps/ui/src/features/chats/markdown/style.module.css b/apps/ui/src/features/chats/markdown/style.module.css
index f68f3758f5..582f9c9d97 100644
--- a/apps/ui/src/features/chats/markdown/style.module.css
+++ b/apps/ui/src/features/chats/markdown/style.module.css
@@ -3,36 +3,36 @@
 	--markdown-rule-gap: 16px;
 
 	min-width: 0;
-	color: var(--foreground);
-	font-size: var(--text-sm);
-	line-height: var(--leading-relaxed);
+	color: var( --foreground );
+	font-size: var( --text-sm );
+	line-height: var( --leading-relaxed );
 	overflow-wrap: break-word;
 }
 
 /* Block margins collapse, so a heading, quote or table keeps its own space
    whatever sits next to it. */
 .root > * {
-	margin-block: 0 var(--markdown-gap);
+	margin-block: 0 var( --markdown-gap );
 }
 
 .h1,
 .h2,
 .h3,
 .h4 {
-	margin-block: var(--markdown-gap);
-	font-weight: var(--font-weight-semibold);
-	line-height: var(--text-sm--line-height);
-	color: var(--foreground);
+	margin-block: var( --markdown-gap );
+	font-weight: var( --font-weight-semibold );
+	line-height: var( --text-sm--line-height );
+	color: var( --foreground );
 }
 
 .blockquote,
 .tableWrap {
-	margin-block: var(--space-4);
+	margin-block: var( --space-4 );
 }
 
 .hr {
-	margin-block: var(--markdown-rule-gap);
-	border-top: 1px solid var(--border);
+	margin-block: var( --markdown-rule-gap );
+	border-top: 1px solid var( --border );
 }
 
 .root > :first-child {
@@ -45,7 +45,7 @@
 
 .ul,
 .ol {
-	padding-inline-start: var(--space-5);
+	padding-inline-start: var( --space-5 );
 	list-style-position: outside;
 }
 
@@ -58,18 +58,18 @@
 }
 
 .li {
-	padding-block: var(--space-0_5);
+	padding-block: var( --space-0_5 );
 }
 
 .li > .ul,
 .li > .ol {
-	margin-block-start: var(--space-1);
-	padding-inline-start: var(--space-6);
+	margin-block-start: var( --space-1 );
+	padding-inline-start: var( --space-6 );
 }
 
 .a {
 	text-decoration: underline;
-	text-decoration-color: color-mix(in oklab, currentColor 30%, transparent);
+	text-decoration-color: color-mix( in oklab, currentColor 30%, transparent );
 	text-underline-offset: 2px;
 }
 
@@ -80,26 +80,26 @@
 
 .root strong,
 .root b {
-	font-weight: var(--font-weight-semibold);
+	font-weight: var( --font-weight-semibold );
 }
 
 .blockquote {
-	padding-inline-start: var(--space-3);
-	border-inline-start: 2px solid color-mix(in oklab, var(--muted-foreground) 30%, transparent);
-	color: var(--muted-foreground);
+	padding-inline-start: var( --space-3 );
+	border-inline-start: 2px solid color-mix( in oklab, var( --muted-foreground ) 30%, transparent );
+	color: var( --muted-foreground );
 }
 
 .blockquote > * + * {
-	margin-block-start: var(--markdown-gap);
+	margin-block-start: var( --markdown-gap );
 }
 
 .codeInline {
-	padding: var(--space-0_5) var(--space-1);
-	border-radius: var(--radius-sm);
-	background-color: color-mix(in oklab, var(--foreground) 5%, transparent);
-	font-family: var(--font-mono);
-	font-size: var(--text-xs);
-	line-height: var(--text-xs--line-height);
+	padding: var( --space-0_5 ) var( --space-1 );
+	border-radius: var( --radius-sm );
+	background-color: color-mix( in oklab, var( --foreground ) 5%, transparent );
+	font-family: var( --font-mono );
+	font-size: var( --text-xs );
+	line-height: var( --text-xs--line-height );
 	-webkit-user-select: text;
 	user-select: text;
 }
@@ -108,28 +108,28 @@
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	gap: var(--space-2);
-	padding: var(--space-2) var(--space-3);
-	border-bottom: 1px solid var(--border);
-	background-color: color-mix(in oklab, var(--muted) 80%, transparent);
-	color: var(--muted-foreground);
-	font-size: var(--text-xs);
-	line-height: var(--text-xs--line-height);
+	gap: var( --space-2 );
+	padding: var( --space-2 ) var( --space-3 );
+	border-bottom: 1px solid var( --border );
+	background-color: color-mix( in oklab, var( --muted ) 80%, transparent );
+	color: var( --muted-foreground );
+	font-size: var( --text-xs );
+	line-height: var( --text-xs--line-height );
 }
 
 .tableWrap {
 	display: flex;
 	flex-direction: column;
-	padding: var(--space-2);
-	border: 1px solid var(--border);
-	border-radius: var(--radius-lg);
+	padding: var( --space-2 );
+	border: 1px solid var( --border );
+	border-radius: var( --radius-lg );
 }
 
 .tableScroll {
 	overflow-x: auto;
-	border: 1px solid var(--border);
-	border-radius: var(--radius-md);
-	background-color: var(--background);
+	border: 1px solid var( --border );
+	border-radius: var( --radius-md );
+	background-color: var( --background );
 }
 
 .table {
@@ -137,21 +137,21 @@
 }
 
 .table thead {
-	border-bottom: 1px solid var(--border);
-	background-color: color-mix(in oklab, var(--muted) 80%, transparent);
+	border-bottom: 1px solid var( --border );
+	background-color: color-mix( in oklab, var( --muted ) 80%, transparent );
 }
 
-.table tbody tr:not(:last-child) {
-	border-bottom: 1px solid var(--border);
+.table tbody tr:not( :last-child ) {
+	border-bottom: 1px solid var( --border );
 }
 
 .th,
 .td {
-	padding: var(--space-2) var(--space-4);
-	line-height: var(--text-sm--line-height);
+	padding: var( --space-2 ) var( --space-4 );
+	line-height: var( --text-sm--line-height );
 	text-align: start;
 }
 
 .th {
-	font-weight: var(--font-weight-semibold);
+	font-weight: var( --font-weight-semibold );
 }
diff --git a/apps/ui/src/features/chats/progressive-blur/style.module.css b/apps/ui/src/features/chats/progressive-blur/style.module.css
index 4ae3a86c4a..b6997dfcd0 100644
--- a/apps/ui/src/features/chats/progressive-blur/style.module.css
+++ b/apps/ui/src/features/chats/progressive-blur/style.module.css
@@ -3,7 +3,7 @@
 	pointer-events: none;
 	overflow: hidden;
 	contain: paint;
-	--progressive-blur-surface-color: var(--chat);
+	--progressive-blur-surface-color: var( --chat );
 	--progressive-blur-surface-hold-stop: 58%;
 	--progressive-blur-surface-fade-stop: 100%;
 
@@ -12,11 +12,11 @@
 	   with the text on top. It stays invisible (0%) for callers that don't ask
 	   for it, but `--surface-alpha` forces it opaque under reduced
 	   transparency — so every caller gets a readable surface, opted in or not. */
-	--progressive-blur-surface-strength: var(--surface-alpha, 0%);
+	--progressive-blur-surface-strength: var( --surface-alpha, 0% );
 }
 
 .fadeToSurface {
-	--progressive-blur-surface-strength: var(--surface-alpha, 78%);
+	--progressive-blur-surface-strength: var( --surface-alpha, 78% );
 }
 
 .down {
@@ -30,18 +30,18 @@
 .layer {
 	position: absolute;
 	inset: 0;
-	backdrop-filter: blur(var(--progressive-blur-radius));
+	backdrop-filter: blur( var( --progressive-blur-radius ) );
 	mask-image: linear-gradient(
-		var(--progressive-blur-direction),
+		var( --progressive-blur-direction ),
 		black 0%,
-		black var(--progressive-blur-solid-stop),
-		transparent var(--progressive-blur-fade-stop)
+		black var( --progressive-blur-solid-stop ),
+		transparent var( --progressive-blur-fade-stop )
 	);
 	-webkit-mask-image: linear-gradient(
-		var(--progressive-blur-direction),
+		var( --progressive-blur-direction ),
 		black 0%,
-		black var(--progressive-blur-solid-stop),
-		transparent var(--progressive-blur-fade-stop)
+		black var( --progressive-blur-solid-stop ),
+		transparent var( --progressive-blur-fade-stop )
 	);
 }
 
@@ -49,20 +49,20 @@
 	position: absolute;
 	inset: 0;
 	background: linear-gradient(
-		var(--progressive-blur-direction),
+		var( --progressive-blur-direction ),
 		color-mix(
 				in srgb,
-				var(--progressive-blur-surface-color) var(--progressive-blur-surface-strength),
+				var( --progressive-blur-surface-color ) var( --progressive-blur-surface-strength ),
 				transparent
 			)
 			0%,
 		color-mix(
 				in srgb,
-				var(--progressive-blur-surface-color) var(--progressive-blur-surface-strength),
+				var( --progressive-blur-surface-color ) var( --progressive-blur-surface-strength ),
 				transparent
 			)
-			var(--progressive-blur-surface-hold-stop),
-		transparent var(--progressive-blur-surface-fade-stop)
+			var( --progressive-blur-surface-hold-stop ),
+		transparent var( --progressive-blur-surface-fade-stop )
 	);
 }
 
diff --git a/apps/ui/src/features/chats/session-view/conversation/agent-question/style.module.css b/apps/ui/src/features/chats/session-view/conversation/agent-question/style.module.css
index 2e3af61155..67d8347da4 100644
--- a/apps/ui/src/features/chats/session-view/conversation/agent-question/style.module.css
+++ b/apps/ui/src/features/chats/session-view/conversation/agent-question/style.module.css
@@ -1,20 +1,20 @@
 .questionCard[data-joined-above] {
-	border-start-start-radius: var(--radius-sm);
+	border-start-start-radius: var( --radius-sm );
 }
 
 .questionCard[data-joined-below] {
-	border-end-start-radius: var(--radius-sm);
+	border-end-start-radius: var( --radius-sm );
 }
 
 .questionBatch {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-1);
+	gap: var( --space-1 );
 	overflow-anchor: none;
 }
 
 .questionBatchStep {
-	animation: questionBatchStepEnter var(--motion-duration-feedback) ease-out;
+	animation: questionBatchStepEnter var( --motion-duration-feedback ) ease-out;
 }
 
 .questionBatchStep[data-state='answered'] {
@@ -26,36 +26,36 @@
 }
 
 .questionBatchStep[data-state='answered'] .questionProgress {
-	animation: questionAnsweredElementFade var(--motion-duration-surface) ease-out forwards;
+	animation: questionAnsweredElementFade var( --motion-duration-surface ) ease-out forwards;
 }
 
 .questionCard {
-	--surface: var(--muted);
+	--surface: var( --muted );
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-4);
+	gap: var( --space-4 );
 	width: 100%;
-	padding: var(--space-4);
-	border-radius: var(--radius-2xl);
-	background-color: var(--surface);
+	padding: var( --space-4 );
+	border-radius: var( --radius-2xl );
+	background-color: var( --surface );
 }
 
 .questionText {
-	color: var(--foreground);
-	font-weight: var(--font-weight-medium);
-	line-height: var(--leading-snug);
+	color: var( --foreground );
+	font-weight: var( --font-weight-medium );
+	line-height: var( --leading-snug );
 	text-wrap: pretty;
 }
 
 .questionProgress {
-	color: var(--muted-foreground);
-	font-weight: var(--font-weight-medium);
+	color: var( --muted-foreground );
+	font-weight: var( --font-weight-medium );
 	font-variant-numeric: tabular-nums;
 }
 
 .questionHint,
 .questionChoiceDescription {
-	color: var(--muted-foreground);
+	color: var( --muted-foreground );
 }
 
 .questionSummary {
@@ -63,23 +63,23 @@
 	cursor: pointer;
 }
 
-.questionSummary:is(:hover, :focus-visible) .questionAnswer {
-	background-color: var(--hover);
+.questionSummary:is( :hover, :focus-visible ) .questionAnswer {
+	background-color: var( --hover );
 }
 
 .questionSummary:focus-visible {
-	outline: var(--focus-width) solid var(--ring);
+	outline: var( --focus-width ) solid var( --ring );
 	outline-offset: 2px;
 }
 
 .questionAnswer {
 	display: flex;
 	align-items: center;
-	gap: var(--space-1_5);
+	gap: var( --space-1_5 );
 	min-height: 36px;
-	padding: var(--space-1_5) var(--space-2);
-	border-radius: var(--radius-md);
-	color: var(--muted-foreground);
+	padding: var( --space-1_5 ) var( --space-2 );
+	border-radius: var( --radius-md );
+	color: var( --muted-foreground );
 }
 
 .questionAnswerLabel {
@@ -99,18 +99,18 @@
 	justify-content: center;
 	width: 24px;
 	height: 24px;
-	border-radius: var(--radius-sm);
-	background-color: var(--border);
-	color: var(--foreground);
-	font-family: var(--font-mono);
-	font-size: var(--text-sm);
-	font-weight: var(--font-weight-medium);
-	line-height: var(--leading-none);
+	border-radius: var( --radius-sm );
+	background-color: var( --border );
+	color: var( --foreground );
+	font-family: var( --font-mono );
+	font-size: var( --text-sm );
+	font-weight: var( --font-weight-medium );
+	line-height: var( --leading-none );
 }
 
 .questionChoices {
 	display: grid;
-	margin-inline-start: calc(var(--space-2) * -1);
+	margin-inline-start: calc( var( --space-2 ) * -1 );
 }
 
 .questionChoiceItem {
@@ -121,24 +121,24 @@
 .questionChoice {
 	display: flex;
 	align-items: center;
-	gap: var(--space-2);
+	gap: var( --space-2 );
 	width: 100%;
 	min-height: 36px;
-	padding: var(--space-2);
-	border-radius: var(--radius-md);
-	color: var(--foreground);
+	padding: var( --space-2 );
+	border-radius: var( --radius-md );
+	color: var( --foreground );
 	text-align: start;
 	cursor: pointer;
 }
 
-.questionChoice:hover:not(:disabled),
+.questionChoice:hover:not( :disabled ),
 .questionChoice[aria-pressed='true'] {
-	background-color: var(--hover);
+	background-color: var( --hover );
 }
 
 .questionChoice:focus-visible {
 	outline: none;
-	box-shadow: inset 0 0 0 2px var(--ring);
+	box-shadow: inset 0 0 0 2px var( --ring );
 }
 
 .questionChoice:disabled {
@@ -154,18 +154,18 @@
 	display: flex;
 	flex: 1;
 	flex-direction: column;
-	gap: var(--space-0_5);
+	gap: var( --space-0_5 );
 	min-width: 0;
-	line-height: var(--leading-snug);
+	line-height: var( --leading-snug );
 }
 
 .questionChoiceFreeForm .questionChoiceLabel > :first-child {
-	color: var(--muted-foreground);
+	color: var( --muted-foreground );
 }
 
 .questionChoices[data-layout='grid'] {
-	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
-	gap: var(--space-1);
+	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 240px ), 1fr ) );
+	gap: var( --space-1 );
 }
 
 .questionChoices[data-layout='grid'] .questionChoiceItem[data-wide='true'] {
@@ -185,8 +185,8 @@
 	flex-basis: 100%;
 	width: 100%;
 	aspect-ratio: 4 / 3;
-	border-radius: var(--radius-lg);
-	background-color: var(--background);
+	border-radius: var( --radius-lg );
+	background-color: var( --background );
 }
 
 .questionOptionImage {
@@ -195,12 +195,7 @@
 }
 
 .questionOptionImageLoading {
-	background-image: linear-gradient(
-		90deg,
-		transparent,
-		var(--border),
-		transparent
-	);
+	background-image: linear-gradient( 90deg, transparent, var( --border ), transparent );
 	background-size: 200% 100%;
 	animation: questionOptionImageLoading 1.2s ease-in-out infinite;
 }
@@ -209,15 +204,15 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	color: var(--muted-foreground);
-	font-size: var(--text-xxs);
+	color: var( --muted-foreground );
+	font-size: var( --text-xxs );
 }
 
 .questionOptionZoom {
 	position: absolute;
-	top: var(--space-4);
-	inset-inline-end: var(--space-4);
-	box-shadow: var(--shadow-raised);
+	top: var( --space-4 );
+	inset-inline-end: var( --space-4 );
+	box-shadow: var( --shadow-raised );
 }
 
 .questionOptionZoomPopup {
@@ -225,29 +220,29 @@
 	max-width: none;
 	padding: 0;
 	overflow: hidden;
-	border-radius: var(--radius-lg);
+	border-radius: var( --radius-lg );
 }
 
 .questionOptionZoomImage {
-	max-width: calc(100vw - 2 * 24px);
-	max-height: calc(100dvh - 2 * 24px);
+	max-width: calc( 100vw - 2 * 24px );
+	max-height: calc( 100dvh - 2 * 24px );
 }
 
 .questionOptionZoomClose,
 .questionOptionZoomStep {
 	position: absolute;
-	box-shadow: var(--shadow-raised);
+	box-shadow: var( --shadow-raised );
 }
 
 .questionOptionZoom,
 .questionOptionZoomClose,
 .questionOptionZoomStep {
-	--button-background: var(--chat);
+	--button-background: var( --chat );
 }
 
 .questionOptionZoomClose {
-	top: var(--space-2);
-	inset-inline-end: var(--space-2);
+	top: var( --space-2 );
+	inset-inline-end: var( --space-2 );
 }
 
 .questionOptionZoomStep {
@@ -256,24 +251,24 @@
 }
 
 .questionOptionZoomPrevious {
-	inset-inline-start: var(--space-2);
+	inset-inline-start: var( --space-2 );
 }
 
 .questionOptionZoomNext {
-	inset-inline-end: var(--space-2);
+	inset-inline-end: var( --space-2 );
 }
 
 .questionOptionZoomChoose {
 	position: absolute;
 	inset-inline: 0;
-	bottom: var(--space-3);
+	bottom: var( --space-3 );
 	width: fit-content;
 	margin-inline: auto;
-	box-shadow: var(--shadow-raised);
+	box-shadow: var( --shadow-raised );
 }
 
-.questionCard[data-state='folding'] .questionChoiceItem:not([data-picked='true']) {
-	animation: questionAnsweredElementFade var(--motion-duration-surface) ease-out forwards;
+.questionCard[data-state='folding'] .questionChoiceItem:not( [data-picked='true'] ) {
+	animation: questionAnsweredElementFade var( --motion-duration-surface ) ease-out forwards;
 }
 
 @keyframes questionBatchStepEnter {
@@ -306,10 +301,10 @@
 	}
 }
 
-@media (prefers-reduced-motion: reduce) {
+@media ( prefers-reduced-motion: reduce ) {
 	.questionBatchStep,
 	.questionBatchStep[data-state='answered'] .questionProgress,
-	.questionCard[data-state='folding'] .questionChoiceItem:not([data-picked='true']),
+	.questionCard[data-state='folding'] .questionChoiceItem:not( [data-picked='true'] ),
 	.questionOptionImageLoading {
 		animation: none;
 	}
diff --git a/apps/ui/src/features/chats/session-view/conversation/message/style.module.css b/apps/ui/src/features/chats/session-view/conversation/message/style.module.css
index 5dc85e3c49..d963c146a1 100644
--- a/apps/ui/src/features/chats/session-view/conversation/message/style.module.css
+++ b/apps/ui/src/features/chats/session-view/conversation/message/style.module.css
@@ -7,21 +7,22 @@
 	align-self: flex-end;
 	display: flex;
 	align-items: center;
-	gap: var(--space-1);
+	gap: var( --space-1 );
 	max-width: 80%;
-	margin-top: var(--space-1);
-	padding: var(--space-2) var(--space-3);
-	border: 1px solid var(--border);
+	margin-top: var( --space-1 );
+	padding: var( --space-2 ) var( --space-3 );
+	border: 1px solid var( --border );
+	/* eslint-disable-next-line studio/use-theme-tokens -- no counterpart in the rebuild to take a radius from. */
 	border-radius: 12px;
-	background-color: var(--chat);
-	color: var(--muted-foreground);
-	font-size: var(--text-xxs);
+	background-color: var( --chat );
+	color: var( --muted-foreground );
+	font-size: var( --text-xxs );
 }
 
 .annotationElementTag {
 	flex: none;
-	font-family: var(--font-mono);
-	color: var(--foreground);
+	font-family: var( --font-mono );
+	color: var( --foreground );
 }
 
 .annotationElementText {
@@ -32,7 +33,7 @@
 .assistantTurn {
 	display: flex;
 	align-items: center;
-	gap: var(--space-2);
+	gap: var( --space-2 );
 }
 
 .userTextRow {
@@ -48,11 +49,11 @@
 	order: -1;
 }
 
-:is(.userTextRow, .assistantTurn):is(:hover, :focus-within) .messageActions {
+:is( .userTextRow, .assistantTurn ):is( :hover, :focus-within ) .messageActions {
 	opacity: 1;
 }
 
-@media (hover: none) {
+@media ( hover: none ) {
 	.messageActions {
 		opacity: 1;
 	}
@@ -62,18 +63,18 @@
 .assistantBubble {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-2);
+	gap: var( --space-2 );
 	min-width: 0;
-	max-width: min(85%, 32rem);
-	padding: var(--space-3) var(--space-4);
+	max-width: min( 85%, 32rem );
+	padding: var( --space-3 ) var( --space-4 );
 	overflow: hidden;
-	border-radius: var(--radius-2xl);
+	border-radius: var( --radius-2xl );
 	overflow-wrap: break-word;
 }
 
 .userText {
-	background-color: var(--primary);
-	color: var(--primary-foreground);
+	background-color: var( --primary );
+	color: var( --primary-foreground );
 }
 
 .userTextBody {
@@ -82,41 +83,41 @@
 
 .assistantBubble {
 	width: fit-content;
-	background-color: var(--muted);
+	background-color: var( --muted );
 }
 
 .userTurn[data-joined-above] .userText {
-	border-start-end-radius: var(--radius-sm);
+	border-start-end-radius: var( --radius-sm );
 }
 
 .userTurn[data-joined-below] .userText {
-	border-end-end-radius: var(--radius-sm);
+	border-end-end-radius: var( --radius-sm );
 }
 
 .assistantTurn[data-joined-above] .assistantBubble {
-	border-start-start-radius: var(--radius-sm);
+	border-start-start-radius: var( --radius-sm );
 }
 
 .assistantTurn[data-joined-below] .assistantBubble {
-	border-end-start-radius: var(--radius-sm);
+	border-end-start-radius: var( --radius-sm );
 }
 
 .userAttachments {
 	display: flex;
 	flex-wrap: wrap;
-	gap: var(--space-2);
+	gap: var( --space-2 );
 }
 
 .userAttachment {
 	display: inline-flex;
 	align-items: center;
-	gap: var(--space-1_5);
+	gap: var( --space-1_5 );
 	min-width: 0;
 	max-width: 256px;
-	padding: 0 var(--space-1_5);
-	border: 1px solid var(--border);
-	border-radius: var(--radius-md);
-	font-weight: var(--font-weight-medium);
+	padding: 0 var( --space-1_5 );
+	border: 1px solid var( --border );
+	border-radius: var( --radius-md );
+	font-weight: var( --font-weight-medium );
 }
 
 .userAttachmentPreview {
@@ -127,9 +128,10 @@
 	width: 20px;
 	height: 20px;
 	overflow: hidden;
+	/* eslint-disable-next-line studio/use-theme-tokens -- the rebuild's 4px preview corner. */
 	border-radius: 4px;
-	background-color: var(--background);
-	color: var(--muted-foreground);
+	background-color: var( --background );
+	color: var( --muted-foreground );
 }
 
 .userAttachmentPreview img {
diff --git a/apps/ui/src/features/chats/session-view/conversation/style.module.css b/apps/ui/src/features/chats/session-view/conversation/style.module.css
index ef8f1ce089..68672f11dd 100644
--- a/apps/ui/src/features/chats/session-view/conversation/style.module.css
+++ b/apps/ui/src/features/chats/session-view/conversation/style.module.css
@@ -1,32 +1,32 @@
 .root {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-6);
+	gap: var( --space-6 );
 }
 
 .root > [data-joined-above] {
-	margin-top: calc(var(--space-5) * -1);
+	margin-top: calc( var( --space-5 ) * -1 );
 }
 
 .mediaArtifacts {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-3);
+	gap: var( --space-3 );
 }
 
 .mediaArtifactImage {
 	max-width: 100%;
-	border-radius: var(--radius-lg);
+	border-radius: var( --radius-lg );
 }
 
 .marker {
 	display: flex;
 	align-items: center;
-	gap: var(--space-2);
+	gap: var( --space-2 );
 	min-height: 16px;
-	color: var(--muted-foreground);
-	font-size: var(--text-sm);
-	line-height: var(--text-sm--line-height);
+	color: var( --muted-foreground );
+	font-size: var( --text-sm );
+	line-height: var( --text-sm--line-height );
 	overflow-wrap: anywhere;
 }
 
@@ -36,5 +36,5 @@
 }
 
 .marker a:hover {
-	color: var(--foreground);
+	color: var( --foreground );
 }
diff --git a/apps/ui/src/features/chats/session-view/conversation/trace/style.module.css b/apps/ui/src/features/chats/session-view/conversation/trace/style.module.css
index cc30c09eab..a43f237162 100644
--- a/apps/ui/src/features/chats/session-view/conversation/trace/style.module.css
+++ b/apps/ui/src/features/chats/session-view/conversation/trace/style.module.css
@@ -4,41 +4,41 @@
 }
 
 .toolRow + .toolRow {
-	margin-top: calc(var(--space-4) * -1);
+	margin-top: calc( var( --space-4 ) * -1 );
 }
 
 .toolDetails {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-2);
+	gap: var( --space-2 );
 	min-width: 0;
-	margin-block: var(--space-2) var(--space-1);
+	margin-block: var( --space-2 ) var( --space-1 );
 	margin-inline-start: 7px;
-	padding-inline: var(--space-3) var(--space-1);
-	border-inline-start: 1px solid var(--border);
-	color: var(--muted-foreground);
-	font-size: var(--text-xs);
-	line-height: var(--text-xs--line-height);
+	padding-inline: var( --space-3 ) var( --space-1 );
+	border-inline-start: 1px solid var( --border );
+	color: var( --muted-foreground );
+	font-size: var( --text-xs );
+	line-height: var( --text-xs--line-height );
 	overflow-wrap: break-word;
 }
 
 .activityProgress {
 	composes: truncate from '@/lib/theme/recipes.module.css';
-	color: var(--muted-foreground);
-	font-size: var(--text-xs);
-	line-height: var(--text-xs--line-height);
+	color: var( --muted-foreground );
+	font-size: var( --text-xs );
+	line-height: var( --text-xs--line-height );
 	opacity: 0.8;
 }
 
 .traceLine {
 	display: flex;
 	align-items: center;
-	gap: var(--space-2);
+	gap: var( --space-2 );
 	min-width: 0;
 	max-width: 100%;
-	color: var(--muted-foreground);
-	font-size: var(--text-xs);
-	line-height: var(--text-xs--line-height);
+	color: var( --muted-foreground );
+	font-size: var( --text-xs );
+	line-height: var( --text-xs--line-height );
 }
 
 .traceLine svg {
@@ -54,54 +54,54 @@
 	appearance: none;
 	display: flex;
 	align-items: center;
-	gap: var(--space-1);
+	gap: var( --space-1 );
 	width: fit-content;
 	max-width: 100%;
 	min-width: 0;
-	border-radius: var(--radius-md);
-	color: var(--muted-foreground);
+	border-radius: var( --radius-md );
+	color: var( --muted-foreground );
 	text-align: start;
 	cursor: pointer;
-	transition: color var(--motion-duration-feedback) ease;
+	transition: color var( --motion-duration-feedback ) ease;
 }
 
 .traceTrigger:hover {
-	color: var(--foreground);
+	color: var( --foreground );
 }
 
 .traceTrigger .traceLine {
 	color: inherit;
 }
 
-.traceTrigger:has([data-status='error']),
+.traceTrigger:has( [data-status='error'] ),
 .traceLine[data-status='error'] {
-	color: var(--destructive);
+	color: var( --destructive );
 }
 
 .traceTrigger:focus-visible {
-	outline: var(--focus-width) solid var(--ring);
+	outline: var( --focus-width ) solid var( --ring );
 	outline-offset: 2px;
 }
 
 .traceChevron {
 	flex: none;
-	transition: rotate var(--motion-duration-feedback) ease;
+	transition: rotate var( --motion-duration-feedback ) ease;
 }
 
 .traceTrigger[aria-expanded='true'] .traceChevron {
 	rotate: 90deg;
 }
 
-.traceChevron:dir(rtl) {
+.traceChevron:dir( rtl ) {
 	scale: -1 1;
 }
 
-.traceTrigger[aria-expanded='true'] .traceChevron:dir(rtl) {
+.traceTrigger[aria-expanded='true'] .traceChevron:dir( rtl ) {
 	rotate: -90deg;
 }
 
 .toolCode pre {
-	padding: var(--space-2);
+	padding: var( --space-2 );
 }
 
 .toolOutput {
diff --git a/apps/ui/src/features/chats/session-view/queued-prompts/style.module.css b/apps/ui/src/features/chats/session-view/queued-prompts/style.module.css
index b283bbfc98..892ccf6bd6 100644
--- a/apps/ui/src/features/chats/session-view/queued-prompts/style.module.css
+++ b/apps/ui/src/features/chats/session-view/queued-prompts/style.module.css
@@ -3,28 +3,28 @@
 	display: flex;
 	flex-direction: column;
 	max-height: 160px;
-	margin: 0 calc(var(--space-0_5) * -1) var(--space-3_5);
-	padding: var(--space-2);
+	margin: 0 calc( var( --space-0_5 ) * -1 ) var( --space-3_5 );
+	padding: var( --space-2 );
 	overflow-y: auto;
-	border: 1px solid var(--border);
-	border-radius: var(--radius-xl);
-	background-color: var(--background);
+	border: 1px solid var( --border );
+	border-radius: var( --radius-xl );
+	background-color: var( --background );
 }
 
 .item {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-1);
+	gap: var( --space-1 );
 	min-width: 0;
-	padding: var(--space-1) var(--space-2);
-	border-radius: var(--radius-md);
-	font-size: var(--text-sm);
-	line-height: var(--text-sm--line-height);
+	padding: var( --space-1 ) var( --space-2 );
+	border-radius: var( --radius-md );
+	font-size: var( --text-sm );
+	line-height: var( --text-sm--line-height );
 }
 
 .row {
 	display: flex;
-	gap: var(--space-2);
+	gap: var( --space-2 );
 	align-items: center;
 }
 
@@ -32,21 +32,21 @@
 	composes: truncate from '@/lib/theme/recipes.module.css';
 	flex: 1;
 	min-width: 0;
-	color: var(--muted-foreground);
+	color: var( --muted-foreground );
 }
 
 .actions {
 	display: flex;
-	gap: var(--space-1);
+	gap: var( --space-1 );
 	opacity: 0;
-	transition: opacity var(--motion-duration-feedback) ease;
+	transition: opacity var( --motion-duration-feedback ) ease;
 }
 
-.item:is(:hover, :focus-within) .actions {
+.item:is( :hover, :focus-within ) .actions {
 	opacity: 1;
 }
 
-@media (hover: none) {
+@media ( hover: none ) {
 	.actions {
 		opacity: 1;
 	}
diff --git a/apps/ui/src/features/chats/session-view/style.module.css b/apps/ui/src/features/chats/session-view/style.module.css
index 8e8b0a83c7..eb9927be94 100644
--- a/apps/ui/src/features/chats/session-view/style.module.css
+++ b/apps/ui/src/features/chats/session-view/style.module.css
@@ -3,7 +3,7 @@
 .root {
 	--column-inline-gutter: 14px;
 	--column-max-width: 644px;
-	--header-height: var(--band-height);
+	--header-height: var( --band-height );
 	--composer-height: 0px;
 	/* The composer sits this far above the panel's bottom edge. */
 	--composer-bottom-gap: 14px;
@@ -21,53 +21,53 @@
 	composes: bandEdge from '@/lib/theme/recipes.module.css';
 	display: flex;
 	align-items: center;
-	gap: var(--space-1);
-	padding-inline: var(--space-3);
-	height: var(--band-height);
-	transition: padding var(--motion-duration-layout) var(--motion-ease-layout);
-	background-color: var(--chrome);
-	font-size: var(--text-xxs);
-	color: var(--foreground);
+	gap: var( --space-1 );
+	padding-inline: var( --space-3 );
+	height: var( --band-height );
+	transition: padding var( --motion-duration-layout ) var( --motion-ease-layout );
+	background-color: var( --chrome );
+	font-size: var( --text-xxs );
+	color: var( --foreground );
 	-webkit-app-region: drag;
 }
 
 .headerLead {
 	display: flex;
 	align-items: center;
-	gap: var(--space-1);
+	gap: var( --space-1 );
 	min-width: 0;
 }
 
 .headerWithSiteActions {
-	padding-inline-end: var(--space-2);
+	padding-inline-end: var( --space-2 );
 }
 
 .headerSidebarCollapsed {
-	padding-inline-start: var(--traffic-light-space);
+	padding-inline-start: var( --traffic-light-space );
 }
 
 .headerSite {
-	font-weight: var(--font-weight-semibold);
+	font-weight: var( --font-weight-semibold );
 }
 
 .headerSiteIcon {
-	margin-inline-end: calc(-1 * var(--space-1));
+	margin-inline-end: calc( -1 * var( --space-1 ) );
 }
 
 .headerDot {
 	width: 6px;
 	height: 6px;
-	border-radius: var(--radius-full);
-	background-color: var(--status-running);
+	border-radius: var( --radius-full );
+	background-color: var( --status-running );
 	flex-shrink: 0;
 	/* Extra horizontal margin around the dot only — keeps the toggle-to-title
 	   gap at the header's base 8px while giving the site/dot/local grouping
 	   more breathing room. */
-	margin: 0 var(--space-1);
+	margin: 0 var( --space-1 );
 }
 
 .headerEnv {
-	color: var(--muted-foreground);
+	color: var( --muted-foreground );
 }
 
 .headerSpacer {
@@ -77,7 +77,7 @@
 .headerActions {
 	display: flex;
 	align-items: center;
-	gap: var(--space-1);
+	gap: var( --space-1 );
 	-webkit-app-region: no-drag;
 }
 
@@ -88,9 +88,9 @@
 	min-height: 0;
 	overflow-y: auto;
 	overflow-x: hidden;
-	padding-block: var(--header-height)
-		calc(var(--composer-height) + var(--composer-bottom-gap));
-	padding-inline: var(--column-inline-gutter);
+	padding-block: var( --header-height )
+		calc( var( --composer-height ) + var( --composer-bottom-gap ) );
+	padding-inline: var( --column-inline-gutter );
 	container-type: inline-size;
 	z-index: 0;
 	/* Reserve scrollbar space symmetrically so the centered column doesn't
@@ -102,15 +102,14 @@
 
 .composerBlur {
 	inset-inline-start: 0;
-	inset-inline-end: var(--scrollbar-blur-safe-area);
+	inset-inline-end: var( --scrollbar-blur-safe-area );
 	z-index: 1;
 }
 
 .composerBlur {
 	bottom: 0;
 	height: calc(
-		var(--composer-height) + var(--composer-bottom-gap) +
-			var(--composer-blur-overhang)
+		var( --composer-height ) + var( --composer-bottom-gap ) + var( --composer-blur-overhang )
 	);
 }
 
@@ -126,14 +125,14 @@
 	position: absolute;
 	left: 0;
 	right: 0;
-	bottom: var(--composer-bottom-gap);
-	padding: 0 var(--column-inline-gutter);
+	bottom: var( --composer-bottom-gap );
+	padding: 0 var( --column-inline-gutter );
 	z-index: 2;
 }
 
 /* The conversation and the composer share one reading column. */
 .column {
-	max-width: var(--column-max-width);
+	max-width: var( --column-max-width );
 	margin: 0 auto;
 }
 
@@ -142,16 +141,15 @@
 }
 
 .conversationSpacing {
-	padding-top: var(--space-4);
+	padding-top: var( --space-4 );
 	padding-bottom: 30px;
 }
 
-
 /* Anchors the scroll-to-latest button to the composer column, floating it
    above the composer without contributing to the measured composer height. */
 .scrollToLatestWrap {
 	position: absolute;
-	bottom: calc(100% + var(--space-4_5));
+	bottom: calc( 100% + var( --space-4_5 ) );
 	inset-inline: 0;
 	display: flex;
 	justify-content: center;
@@ -160,7 +158,7 @@
 }
 
 .scrollToLatestButton {
-	--button-background: var(--background);
+	--button-background: var( --background );
 
 	opacity: 0;
 }
@@ -173,7 +171,7 @@
 /* Composer fade-in after the entitlement check resolves. No fill mode:
    natural opacity is 1, and index.css's reduced-motion clamp covers it. */
 .fadeInQuick {
-	animation: fade-in-quick var(--motion-duration-surface) ease-out;
+	animation: fade-in-quick var( --motion-duration-surface ) ease-out;
 }
 
 @keyframes fade-in-quick {
@@ -192,22 +190,23 @@
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	gap: var(--space-3);
+	gap: var( --space-3 );
 	height: 100%;
-	padding: var(--space-6);
-	color: var(--muted-foreground);
-	font-size: var(--text-sm);
+	padding: var( --space-6 );
+	color: var( --muted-foreground );
+	font-size: var( --text-sm );
 }
 
 .emptyState {
 	position: absolute;
-	inset: 0 0 var(--composer-height);
+	inset: 0 0 var( --composer-height );
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	/* Centred between the header and the composer. */
-	padding: calc(var(--header-height) + var(--space-6)) var(--space-6) calc(var(--space-6) + 2 * var(--composer-bottom-gap));
-	transition: opacity var(--motion-duration-layout) var(--motion-ease-layout);
+	padding: calc( var( --header-height ) + var( --space-6 ) ) var( --space-6 )
+		calc( var( --space-6 ) + 2 * var( --composer-bottom-gap ) );
+	transition: opacity var( --motion-duration-layout ) var( --motion-ease-layout );
 }
 
 .emptyState[data-hidden] {
diff --git a/apps/ui/src/features/commands/command-palette/style.module.css b/apps/ui/src/features/commands/command-palette/style.module.css
index 5f99aff33e..01e3cd49c9 100644
--- a/apps/ui/src/features/commands/command-palette/style.module.css
+++ b/apps/ui/src/features/commands/command-palette/style.module.css
@@ -1,16 +1,16 @@
 /* Sits a little above center, and stays put as results narrow. */
 .popup {
-	top: max(var(--space-4), calc(50dvh - 168px));
+	top: max( var( --space-4 ), calc( 50dvh - 168px ) );
 	display: block;
 	max-width: 448px;
 	overflow: hidden;
-	padding: var(--space-2_5);
-	transform: translateX(-50%);
+	padding: var( --space-2_5 );
+	transform: translateX( -50% );
 	transition: none;
 }
 
 .inputGroup {
-	border-radius: calc(var(--radius-3xl) - var(--space-2_5));
+	border-radius: calc( var( --radius-3xl ) - var( --space-2_5 ) );
 }
 
 .icon {
diff --git a/apps/ui/src/features/composer/attachment-chips/style.module.css b/apps/ui/src/features/composer/attachment-chips/style.module.css
index d8a9b50d90..320ffda4bd 100644
--- a/apps/ui/src/features/composer/attachment-chips/style.module.css
+++ b/apps/ui/src/features/composer/attachment-chips/style.module.css
@@ -2,45 +2,45 @@
 	display: flex;
 	flex-wrap: wrap;
 	align-items: flex-end;
-	gap: var(--space-3);
-	padding: var(--space-3_5) var(--space-3_5) var(--space-1_5);
+	gap: var( --space-3 );
+	padding: var( --space-3_5 ) var( --space-3_5 ) var( --space-1_5 );
 }
 
 .attachment {
 	composes: imageOutline from '@/lib/theme/recipes.module.css';
 	position: relative;
 	display: flex;
-	background-color: var(--muted);
-	color: var(--foreground);
-	font-size: var(--text-sm);
+	background-color: var( --muted );
+	color: var( --foreground );
+	font-size: var( --text-sm );
 	user-select: none;
 }
 
 .attachmentImage {
 	width: 96px;
 	height: 96px;
-	border-radius: var(--radius-xl);
+	border-radius: var( --radius-xl );
 }
 
 .attachmentFile {
 	max-width: 240px;
-	border-radius: var(--radius-lg);
+	border-radius: var( --radius-lg );
 }
 
 .attachmentFile {
-	gap: var(--space-2);
+	gap: var( --space-2 );
 	align-items: center;
 	height: 36px;
-	padding: 0 var(--space-3);
-	font-size: var(--text-xs);
-	line-height: var(--text-xs--line-height);
+	padding: 0 var( --space-3 );
+	font-size: var( --text-xs );
+	line-height: var( --text-xs--line-height );
 }
 
 .attachmentFile:hover {
-	background-color: var(--hover);
+	background-color: var( --hover );
 }
 
-.attachmentFile svg:not([data-size]) {
+.attachmentFile svg:not( [data-size] ) {
 	flex: none;
 }
 
@@ -57,22 +57,22 @@
 }
 
 .attachmentRemove {
-	--button-background: var(--chrome);
+	--button-background: var( --chrome );
 
 	position: absolute;
-	top: calc(var(--space-2) * -1);
-	right: calc(var(--space-2) * -1);
+	top: calc( var( --space-2 ) * -1 );
+	right: calc( var( --space-2 ) * -1 );
 	z-index: 1;
-	box-shadow: var(--shadow-sm);
+	box-shadow: var( --shadow-sm );
 }
 
 .attachmentRemove::after {
 	position: absolute;
-	inset: calc(var(--space-1) * -1);
+	inset: calc( var( --space-1 ) * -1 );
 	content: '';
 }
 
-.attachmentRemove svg:not([data-size]) {
+.attachmentRemove svg:not( [data-size] ) {
 	width: 11px;
 	height: 11px;
 }
@@ -82,21 +82,21 @@
 
 	width: 285px;
 	overflow: hidden;
-	border-radius: var(--radius-lg);
-	background-color: var(--popover);
+	border-radius: var( --radius-lg );
+	background-color: var( --popover );
 	box-shadow:
-		0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent),
-		var(--shadow-md);
+		0 0 0 1px color-mix( in oklab, var( --foreground ) 10%, transparent ),
+		var( --shadow-md );
 	user-select: none;
 }
 
 .attachmentHoverArtwork {
 	display: block;
 	width: 100%;
-	height: var(--attachment-hover-artwork-height);
+	height: var( --attachment-hover-artwork-height );
 	overflow: hidden;
-	border-bottom: 1px solid var(--border);
-	background-color: var(--chat);
+	border-bottom: 1px solid var( --border );
+	background-color: var( --chat );
 }
 
 .attachmentHoverImage {
@@ -112,11 +112,11 @@
 }
 
 .attachmentHoverText {
-	min-height: var(--attachment-hover-artwork-height);
-	padding: var(--space-3);
-	color: var(--foreground);
-	font-family: var(--font-mono);
-	font-size: var(--text-2xs);
+	min-height: var( --attachment-hover-artwork-height );
+	padding: var( --space-3 );
+	color: var( --foreground );
+	font-family: var( --font-mono );
+	font-size: var( --text-2xs );
 	line-height: 1.35;
 	white-space: pre-wrap;
 	overflow-wrap: anywhere;
@@ -126,21 +126,21 @@
 	display: flex;
 	min-width: 0;
 	flex-direction: column;
-	gap: var(--space-0_5);
-	padding: var(--space-2) var(--space-2_5);
-	color: var(--foreground);
+	gap: var( --space-0_5 );
+	padding: var( --space-2 ) var( --space-2_5 );
+	color: var( --foreground );
 }
 
 .attachmentHoverName {
 	composes: truncate from '@/lib/theme/recipes.module.css';
-	font-size: var(--text-xxs);
-	font-weight: var(--font-weight-semibold);
-	line-height: var(--leading-tight);
+	font-size: var( --text-xxs );
+	font-weight: var( --font-weight-semibold );
+	line-height: var( --leading-tight );
 }
 
 .attachmentHoverMeta {
 	composes: truncate from '@/lib/theme/recipes.module.css';
-	color: var(--muted-foreground);
-	font-size: var(--text-2xs);
+	color: var( --muted-foreground );
+	font-size: var( --text-2xs );
 	line-height: 1.2;
 }
diff --git a/apps/ui/src/features/composer/mode-chip/style.module.css b/apps/ui/src/features/composer/mode-chip/style.module.css
index d6dfabe8e9..24e533a234 100644
--- a/apps/ui/src/features/composer/mode-chip/style.module.css
+++ b/apps/ui/src/features/composer/mode-chip/style.module.css
@@ -8,10 +8,10 @@
 	visibility: hidden;
 }
 
-.modeChip:not(:disabled):is(:hover, :focus-visible) .modeChipIcon > :first-child {
+.modeChip:not( :disabled ):is( :hover, :focus-visible ) .modeChipIcon > :first-child {
 	visibility: hidden;
 }
 
-.modeChip:not(:disabled):is(:hover, :focus-visible) .modeChipIcon > :last-child {
+.modeChip:not( :disabled ):is( :hover, :focus-visible ) .modeChipIcon > :last-child {
 	visibility: visible;
 }
diff --git a/apps/ui/src/features/composer/notice-tab/style.module.css b/apps/ui/src/features/composer/notice-tab/style.module.css
index 305846d52a..0be319f044 100644
--- a/apps/ui/src/features/composer/notice-tab/style.module.css
+++ b/apps/ui/src/features/composer/notice-tab/style.module.css
@@ -1,28 +1,28 @@
 /* A tab above the composer, which overlaps its bottom edge. */
 .notice {
-	margin-bottom: calc(var(--space-6) * -1);
-	padding: var(--space-1_5) var(--space-2_5) 30px var(--space-4);
-	border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;
-	background-color: var(--muted);
-	color: var(--muted-foreground);
-	font-size: var(--text-xs);
-	line-height: var(--text-xs--line-height);
+	margin-bottom: calc( var( --space-6 ) * -1 );
+	padding: var( --space-1_5 ) var( --space-2_5 ) 30px var( --space-4 );
+	border-radius: var( --radius-3xl ) var( --radius-3xl ) 0 0;
+	background-color: var( --muted );
+	color: var( --muted-foreground );
+	font-size: var( --text-xs );
+	line-height: var( --text-xs--line-height );
 }
 
 .notice[data-feedback] {
-	background-color: var(--destructive-surface);
-	color: var(--destructive);
+	background-color: var( --destructive-surface );
+	color: var( --destructive );
 }
 
 .noticeContent {
 	display: flex;
 	min-height: 36px;
 	align-items: center;
-	gap: var(--space-3);
+	gap: var( --space-3 );
 }
 
 .noticeContent[data-submit-feedback='shake'] {
-	animation: submitShake var(--motion-duration-layout) var(--motion-ease-layout);
+	animation: submitShake var( --motion-duration-layout ) var( --motion-ease-layout );
 }
 
 .noticeMessage {
@@ -33,23 +33,23 @@
 
 @keyframes submitShake {
 	20% {
-		transform: translateX(-6px);
+		transform: translateX( -6px );
 	}
 
 	40% {
-		transform: translateX(5px);
+		transform: translateX( 5px );
 	}
 
 	60% {
-		transform: translateX(-3px);
+		transform: translateX( -3px );
 	}
 
 	80% {
-		transform: translateX(1px);
+		transform: translateX( 1px );
 	}
 }
 
-@media (prefers-reduced-motion: reduce) {
+@media ( prefers-reduced-motion: reduce ) {
 	.noticeContent[data-submit-feedback='shake'] {
 		animation: none;
 	}
diff --git a/apps/ui/src/features/composer/style.module.css b/apps/ui/src/features/composer/style.module.css
index 78337eb834..abbe9ada6e 100644
--- a/apps/ui/src/features/composer/style.module.css
+++ b/apps/ui/src/features/composer/style.module.css
@@ -11,49 +11,41 @@
 
 /* Text-input chrome, like the form inputs beside it, instead of the chat composer. */
 .shellField {
-	border-radius: var(--radius-lg);
-	background-color: color-mix(
-		in srgb,
-		var(--chrome) 60%,
-		transparent
-	);
+	border-radius: var( --radius-lg );
+	background-color: color-mix( in srgb, var( --chrome ) 60%, transparent );
 }
 
-.shellField:has(.input:focus-visible) {
-	border-color: var(--input);
+.shellField:has( .input:focus-visible ) {
+	border-color: var( --input );
 	box-shadow: none;
-	outline: var(--focus-width) solid var(--ring);
-	outline-offset: var(--focus-width);
+	outline: var( --focus-width ) solid var( --ring );
+	outline-offset: var( --focus-width );
 }
 
 .shellField .input {
-	min-height: calc(3lh + 28px);
+	min-height: calc( 3lh + 28px );
 }
 
 .dropOverlay {
 	position: absolute;
 	inset: 0;
-	z-index: var(--z-sidebar);
+	z-index: var( --z-sidebar );
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	border: 2px solid var(--ring);
+	border: 2px solid var( --ring );
 	border-radius: inherit;
-	background-color: color-mix(
-		in srgb,
-		var(--accent-text) 10%,
-		transparent
-	);
+	background-color: color-mix( in srgb, var( --accent-text ) 10%, transparent );
 	pointer-events: none;
 }
 
 .dropOverlay span {
-	padding: var(--space-2) var(--space-4);
-	border-radius: var(--radius-xl);
-	background-color: var(--accent);
-	color: var(--accent-foreground);
-	font-size: var(--text-sm);
-	font-weight: var(--font-weight-medium);
+	padding: var( --space-2 ) var( --space-4 );
+	border-radius: var( --radius-xl );
+	background-color: var( --accent );
+	color: var( --accent-foreground );
+	font-size: var( --text-sm );
+	font-weight: var( --font-weight-medium );
 }
 
 .fileInput {
@@ -68,8 +60,8 @@
 /* Grows with its text up to six lines, then scrolls. */
 .input {
 	min-height: 0;
-	max-height: calc(6lh + 28px);
-	padding: var(--space-3_5);
+	max-height: calc( 6lh + 28px );
+	padding: var( --space-3_5 );
 	overflow-y: auto;
 }
 
@@ -80,12 +72,12 @@
 .placeholder {
 	composes: truncate from '@/lib/theme/recipes.module.css';
 	position: absolute;
-	top: var(--space-3_5);
-	right: var(--space-3_5);
-	left: var(--space-3_5);
-	color: var(--muted-foreground);
-	font-size: var(--text-sm);
-	line-height: var(--text-sm--line-height);
+	top: var( --space-3_5 );
+	right: var( --space-3_5 );
+	left: var( --space-3_5 );
+	color: var( --muted-foreground );
+	font-size: var( --text-sm );
+	line-height: var( --text-sm--line-height );
 	pointer-events: none;
 }
 
@@ -93,9 +85,9 @@
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	gap: var(--space-2);
+	gap: var( --space-2 );
 	min-width: 0;
-	padding: var(--space-1_5) var(--space-2) var(--space-2);
+	padding: var( --space-1_5 ) var( --space-2 ) var( --space-2 );
 }
 
 .leftActions,
@@ -105,7 +97,7 @@
 }
 
 .rightActions {
-	gap: var(--space-1);
+	gap: var( --space-1 );
 }
 
 .leftActions {
@@ -121,7 +113,7 @@
 
 /* Inside the composer the menu chevrons keep the text color. */
 .shell [data-dropdown-indicator] {
-	color: var(--foreground);
+	color: var( --foreground );
 }
 
 .dialogDescription {
diff --git a/apps/ui/src/features/composer/submit-button/style.module.css b/apps/ui/src/features/composer/submit-button/style.module.css
index 9c9becfa22..dd3ddf09e0 100644
--- a/apps/ui/src/features/composer/submit-button/style.module.css
+++ b/apps/ui/src/features/composer/submit-button/style.module.css
@@ -8,7 +8,7 @@
 	}
 }
 
-@media (prefers-reduced-motion: reduce) {
+@media ( prefers-reduced-motion: reduce ) {
 	.stopButton[aria-busy='true'] {
 		animation: none;
 	}
diff --git a/apps/ui/src/features/credits/ai-credits-details-dialog/style.module.css b/apps/ui/src/features/credits/ai-credits-details-dialog/style.module.css
index 93d1368a47..c8de1fcd55 100644
--- a/apps/ui/src/features/credits/ai-credits-details-dialog/style.module.css
+++ b/apps/ui/src/features/credits/ai-credits-details-dialog/style.module.css
@@ -1,32 +1,32 @@
 .details {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-3);
+	gap: var( --space-3 );
 }
 
 .section {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-1);
+	gap: var( --space-1 );
 }
 
 .section h3 {
-	color: var(--foreground);
-	font-weight: var(--font-weight-semibold);
+	color: var( --foreground );
+	font-weight: var( --font-weight-semibold );
 }
 
 .section ul {
-	padding-inline-start: var(--space-4);
+	padding-inline-start: var( --space-4 );
 	list-style: disc;
 }
 
 .section li + li {
-	margin-block-start: var(--space-1);
+	margin-block-start: var( --space-1 );
 }
 
 .learnMoreButton,
 .buyCreditsLink {
-	color: var(--accent-text);
+	color: var( --accent-text );
 	text-decoration: underline;
 	text-wrap: wrap;
 }
diff --git a/apps/ui/src/features/credits/ai-credits-purchase-dialog/style.module.css b/apps/ui/src/features/credits/ai-credits-purchase-dialog/style.module.css
index 5fc6e7f87d..41b48d7993 100644
--- a/apps/ui/src/features/credits/ai-credits-purchase-dialog/style.module.css
+++ b/apps/ui/src/features/credits/ai-credits-purchase-dialog/style.module.css
@@ -1,47 +1,47 @@
 .amountCards {
 	display: grid;
 	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
-	gap: var(--space-2);
+	gap: var( --space-2 );
 }
 
 .descriptionEmphasis {
-	font-weight: var(--font-weight-semibold);
+	font-weight: var( --font-weight-semibold );
 }
 
 .amountOption {
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
-	gap: var(--space-1);
-	padding: var(--space-3);
-	border: 1px solid var(--border);
-	border-radius: var(--radius-2xl);
-	color: var(--foreground);
+	gap: var( --space-1 );
+	padding: var( --space-3 );
+	border: 1px solid var( --border );
+	border-radius: var( --radius-2xl );
+	color: var( --foreground );
 	cursor: pointer;
 	text-align: start;
 }
 
 .amountOption:hover,
 .amountOption[data-selected] {
-	border-color: var(--accent);
-	background-color: color-mix(in oklab, var(--accent) 10%, var(--background));
+	border-color: var( --accent );
+	background-color: color-mix( in oklab, var( --accent ) 10%, var( --background ) );
 }
 
 .amountOption[data-selected] {
-	box-shadow: inset 0 0 0 0.5px var(--accent);
+	box-shadow: inset 0 0 0 0.5px var( --accent );
 }
 
 .amountOption:focus-visible {
-	outline: var(--focus-width) solid var(--ring);
+	outline: var( --focus-width ) solid var( --ring );
 	outline-offset: 1px;
 }
 
 .optionPrice {
-	font-size: var(--text-md);
-	font-weight: var(--font-weight-semibold);
+	font-size: var( --text-md );
+	font-weight: var( --font-weight-semibold );
 }
 
 .optionCredits {
-	color: var(--muted-foreground);
-	font-size: var(--text-xxs);
+	color: var( --muted-foreground );
+	font-size: var( --text-xxs );
 }
diff --git a/apps/ui/src/features/notifications/app-message-cards/style.module.css b/apps/ui/src/features/notifications/app-message-cards/style.module.css
index 19b1d4763c..7ca156a747 100644
--- a/apps/ui/src/features/notifications/app-message-cards/style.module.css
+++ b/apps/ui/src/features/notifications/app-message-cards/style.module.css
@@ -3,7 +3,7 @@
 .stack {
 	display: flex;
 	flex-direction: column;
-	margin-top: calc(-1 * var(--space-2));
+	margin-top: calc( -1 * var( --space-2 ) );
 }
 
 /* Collapsible row, same treatment as the toasts: @starting-style animates
@@ -13,10 +13,10 @@
 	container-type: inline-size;
 	display: grid;
 	grid-template-rows: 1fr;
-	margin-top: var(--space-2);
+	margin-top: var( --space-2 );
 	transition:
-		grid-template-rows var(--motion-duration-surface) ease,
-		margin-top var(--motion-duration-surface) ease;
+		grid-template-rows var( --motion-duration-surface ) ease,
+		margin-top var( --motion-duration-surface ) ease;
 }
 
 @starting-style {
@@ -34,7 +34,7 @@
 	overflow-clip-margin: 12px;
 }
 
-@media (prefers-reduced-motion: reduce) {
+@media ( prefers-reduced-motion: reduce ) {
 	.cell {
 		transition: none;
 	}
@@ -48,7 +48,7 @@
 	right: -1px;
 	width: 6px;
 	height: 6px;
-	border-radius: var(--radius-full);
-	background-color: var(--accent-text);
+	border-radius: var( --radius-full );
+	background-color: var( --accent-text );
 	pointer-events: none;
 }
diff --git a/apps/ui/src/features/notifications/app-toasts/style.module.css b/apps/ui/src/features/notifications/app-toasts/style.module.css
index 768651bec7..4c0ffebe90 100644
--- a/apps/ui/src/features/notifications/app-toasts/style.module.css
+++ b/apps/ui/src/features/notifications/app-toasts/style.module.css
@@ -3,10 +3,10 @@
    hovering or focusing the deck spreads it into a list. */
 .viewport {
 	position: fixed;
-	inset-block-end: var(--space-3);
-	inset-inline-end: var(--space-3);
-	z-index: var(--z-toast);
-	width: min(320px, calc(100vw - 24px));
+	inset-block-end: var( --space-3 );
+	inset-inline-end: var( --space-3 );
+	z-index: var( --z-toast );
+	width: min( 320px, calc( 100vw - 24px ) );
 	pointer-events: none;
 	-webkit-app-region: no-drag;
 }
@@ -14,37 +14,38 @@
 .toast {
 	--gap: 8px;
 	--peek: 12px;
-	--height: var(--toast-frontmost-height, var(--toast-height));
-	--scale: max(0, 1 - var(--toast-index) * 0.1);
-	--shrink: calc(1 - var(--scale));
+	--height: var( --toast-frontmost-height, var( --toast-height ) );
+	--scale: max( 0, 1 - var( --toast-index ) * 0.1 );
+	--shrink: calc( 1 - var( --scale ) );
 	--offset-y: calc(
-		var(--toast-offset-y) * -1 - var(--toast-index) * var(--gap) + var(--toast-swipe-movement-y)
+		var( --toast-offset-y ) * -1 - var( --toast-index ) * var( --gap ) +
+			var( --toast-swipe-movement-y )
 	);
 
 	position: absolute;
 	inset-block-end: 0;
 	inset-inline-end: 0;
-	z-index: calc(1000 - var(--toast-index));
+	z-index: calc( 1000 - var( --toast-index ) );
 	width: 100%;
-	height: var(--height);
-	border-radius: var(--radius-xl);
-	background-color: var(--secondary);
+	height: var( --height );
+	border-radius: var( --radius-xl );
+	background-color: var( --secondary );
 	box-shadow:
-		0 0 0 1px var(--border),
-		var(--shadow-sm);
+		0 0 0 1px var( --border ),
+		var( --shadow-sm );
 	pointer-events: auto;
 	transform-origin: bottom;
-	transform: translateX(var(--toast-swipe-movement-x))
+	transform: translateX( var( --toast-swipe-movement-x ) )
 		translateY(
 			calc(
-				var(--toast-swipe-movement-y) - var(--toast-index) * var(--peek) - var(--shrink) *
-					var(--height)
+				var( --toast-swipe-movement-y ) - var( --toast-index ) * var( --peek ) - var( --shrink ) *
+					var( --height )
 			)
 		)
-		scale(var(--scale));
+		scale( var( --scale ) );
 	transition:
-		transform var(--motion-duration-layout) var(--motion-ease-enter),
-		opacity var(--motion-duration-layout) var(--motion-ease-enter);
+		transform var( --motion-duration-layout ) var( --motion-ease-enter ),
+		opacity var( --motion-duration-layout ) var( --motion-ease-enter );
 }
 
 /* Bridges the gap so the pointer can travel between spread toasts. */
@@ -53,7 +54,7 @@
 	inset-block-start: 100%;
 	inset-inline-start: 0;
 	width: 100%;
-	height: calc(var(--gap) + 1px);
+	height: calc( var( --gap ) + 1px );
 	content: '';
 }
 
@@ -62,33 +63,34 @@
 }
 
 .toast[data-expanded] {
-	height: var(--toast-height);
-	transform: translateX(var(--toast-swipe-movement-x)) translateY(var(--offset-y));
+	height: var( --toast-height );
+	transform: translateX( var( --toast-swipe-movement-x ) ) translateY( var( --offset-y ) );
 }
 
-@media (prefers-reduced-motion: no-preference) {
+@media ( prefers-reduced-motion: no-preference ) {
 	.toast[data-starting-style],
-	.toast[data-ending-style]:not([data-swipe-direction]) {
-		transform: translateY(150%);
+	.toast[data-ending-style]:not( [data-swipe-direction] ) {
+		transform: translateY( 150% );
 	}
 
 	.toast[data-ending-style][data-swipe-direction='down'] {
-		transform: translateY(calc(var(--toast-swipe-movement-y) + 150%));
+		transform: translateY( calc( var( --toast-swipe-movement-y ) + 150% ) );
 	}
 
 	.toast[data-ending-style][data-swipe-direction='right'] {
-		transform: translateX(calc(var(--toast-swipe-movement-x) + 150%)) translateY(var(--offset-y));
+		transform: translateX( calc( var( --toast-swipe-movement-x ) + 150% ) )
+			translateY( var( --offset-y ) );
 	}
 }
 
 /* Clipped to the front toast's height while behind it, with room inside the
    clip for the dismiss button that overhangs the corner. */
 .content {
-	height: calc(100% + 24px);
-	margin: calc(var(--space-3) * -1);
-	padding: var(--space-3);
+	height: calc( 100% + 24px );
+	margin: calc( var( --space-3 ) * -1 );
+	padding: var( --space-3 );
 	overflow: clip;
-	transition: opacity var(--motion-duration-feedback) var(--motion-ease-enter);
+	transition: opacity var( --motion-duration-feedback ) var( --motion-ease-enter );
 }
 
 .content[data-behind] {
@@ -104,7 +106,7 @@
 	box-shadow: none;
 }
 
-@media (prefers-reduced-motion: reduce) {
+@media ( prefers-reduced-motion: reduce ) {
 	.toast {
 		transition-property: opacity;
 	}
@@ -116,6 +118,6 @@
 
 	.toast,
 	.content {
-		transition-duration: var(--motion-duration-feedback);
+		transition-duration: var( --motion-duration-feedback );
 	}
 }
diff --git a/apps/ui/src/features/notifications/notice-card/style.module.css b/apps/ui/src/features/notifications/notice-card/style.module.css
index 56468af0d6..b1ff969f8b 100644
--- a/apps/ui/src/features/notifications/notice-card/style.module.css
+++ b/apps/ui/src/features/notifications/notice-card/style.module.css
@@ -2,15 +2,15 @@
 .card {
 	position: relative;
 	pointer-events: auto;
-	padding: var(--space-4);
-	border-radius: var(--radius-xl);
-	background-color: var(--secondary);
-	color: var(--secondary-foreground);
+	padding: var( --space-4 );
+	border-radius: var( --radius-xl );
+	background-color: var( --secondary );
+	color: var( --secondary-foreground );
 	box-shadow:
-		0 0 0 1px var(--border),
-		var(--shadow-sm);
-	font-size: var(--text-sm);
-	line-height: var(--text-sm--line-height);
+		0 0 0 1px var( --border ),
+		var( --shadow-sm );
+	font-size: var( --text-sm );
+	line-height: var( --text-sm--line-height );
 	/* Toasts rewrite themselves in place — import progress ticks through a
 	   percentage — and this font's digits are not equal width, so a counter
 	   would shift the text by a few pixels on nearly every update. */
@@ -20,7 +20,7 @@
 .row {
 	display: flex;
 	align-items: center;
-	gap: var(--space-2);
+	gap: var( --space-2 );
 }
 
 .status {
@@ -30,8 +30,8 @@
 	justify-content: center;
 	width: 14px;
 	height: 14px;
-	border-radius: var(--radius-full);
-	color: var(--secondary);
+	border-radius: var( --radius-full );
+	color: var( --secondary );
 }
 
 .status svg {
@@ -40,22 +40,22 @@
 }
 
 .status[data-intent='success'] {
-	background-color: var(--success);
+	background-color: var( --success );
 }
 
 .status[data-intent='error'] {
-	background-color: var(--destructive);
+	background-color: var( --destructive );
 }
 
-.status:is([data-intent='info'], [data-intent='warning']) {
-	color: var(--muted-foreground);
+.status:is( [data-intent='info'], [data-intent='warning'] ) {
+	color: var( --muted-foreground );
 }
 
 .status[data-intent='warning'] {
-	color: var(--warning);
+	color: var( --warning );
 }
 
-.status:is([data-intent='info'], [data-intent='warning']) svg {
+.status:is( [data-intent='info'], [data-intent='warning'] ) svg {
 	width: 14px;
 	height: 14px;
 }
@@ -63,7 +63,7 @@
 .title {
 	flex: 1;
 	min-width: 0;
-	font-weight: var(--font-weight-medium);
+	font-weight: var( --font-weight-medium );
 	text-wrap: pretty;
 }
 
@@ -71,8 +71,8 @@
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
-	gap: var(--space-2);
-	margin-top: var(--space-0_5);
+	gap: var( --space-2 );
+	margin-top: var( --space-0_5 );
 	padding-inline-start: 22px;
 }
 
@@ -87,12 +87,12 @@
 .toggle {
 	position: absolute;
 	inset: 0;
-	border-radius: var(--radius-sm);
+	border-radius: var( --radius-sm );
 	cursor: pointer;
 }
 
 .toggle:focus-visible {
-	outline: var(--focus-width) solid var(--ring);
+	outline: var( --focus-width ) solid var( --ring );
 	outline-offset: 2px;
 }
 
@@ -106,13 +106,13 @@
 	height: 1lh;
 	max-height: 192px;
 	overflow: hidden;
-	color: var(--muted-foreground);
-	font-size: var(--text-xs);
-	line-height: var(--leading-relaxed);
+	color: var( --muted-foreground );
+	font-size: var( --text-xs );
+	line-height: var( --leading-relaxed );
 	white-space: pre-wrap;
 	overflow-wrap: anywhere;
 	interpolate-size: allow-keywords;
-	transition: height var(--motion-duration-layout) var(--motion-ease-layout);
+	transition: height var( --motion-duration-layout ) var( --motion-ease-layout );
 }
 
 .description[data-clamped] {
@@ -135,14 +135,14 @@
 	align-items: center;
 	justify-content: flex-end;
 	width: 40px;
-	background: linear-gradient(to right, transparent, var(--secondary) 50%);
-	color: var(--muted-foreground);
+	background: linear-gradient( to right, transparent, var( --secondary ) 50% );
+	color: var( --muted-foreground );
 	opacity: 0;
-	transition: opacity var(--motion-duration-feedback);
+	transition: opacity var( --motion-duration-feedback );
 }
 
 .chevron svg {
-	transition: rotate var(--motion-duration-layout) var(--motion-ease-layout);
+	transition: rotate var( --motion-duration-layout ) var( --motion-ease-layout );
 }
 
 .card:hover .chevron,
@@ -155,13 +155,13 @@
 }
 
 .close {
-	--button-background: var(--chrome);
+	--button-background: var( --chrome );
 
 	position: absolute;
-	inset-block-start: calc(var(--space-1_5) * -1);
-	inset-inline-start: calc(var(--space-1_5) * -1);
+	inset-block-start: calc( var( --space-1_5 ) * -1 );
+	inset-inline-start: calc( var( --space-1_5 ) * -1 );
 	opacity: 0;
-	transition: opacity var(--motion-duration-feedback) ease;
+	transition: opacity var( --motion-duration-feedback ) ease;
 }
 
 .card:hover .close,
@@ -174,9 +174,9 @@
 @container (width < 300px) {
 	.card {
 		display: grid;
-		grid-template-columns: auto minmax(0, 1fr);
+		grid-template-columns: auto minmax( 0, 1fr );
 		align-items: center;
-		column-gap: var(--space-2);
+		column-gap: var( --space-2 );
 	}
 
 	.row {
@@ -191,6 +191,6 @@
 	.row > button {
 		grid-area: 3 / 2;
 		justify-self: start;
-		margin-top: var(--space-3);
+		margin-top: var( --space-3 );
 	}
 }
diff --git a/apps/ui/src/features/notifications/notice-history/style.module.css b/apps/ui/src/features/notifications/notice-history/style.module.css
index 2a8ab9aa1b..ecc5230757 100644
--- a/apps/ui/src/features/notifications/notice-history/style.module.css
+++ b/apps/ui/src/features/notifications/notice-history/style.module.css
@@ -12,58 +12,58 @@
 }
 
 .empty {
-	width: min(320px, calc(100vw - 24px));
-	padding: var(--space-4);
+	width: min( 320px, calc( 100vw - 24px ) );
+	padding: var( --space-4 );
 }
 
 .emptyTitle {
-	font-size: var(--text-sm);
-	font-weight: var(--font-weight-medium);
-	line-height: var(--text-sm--line-height);
+	font-size: var( --text-sm );
+	font-weight: var( --font-weight-medium );
+	line-height: var( --text-sm--line-height );
 }
 
 .emptyText {
-	margin: var(--space-1) 0 0;
-	color: var(--muted-foreground);
-	font-size: var(--text-sm);
-	line-height: var(--text-sm--line-height);
+	margin: var( --space-1 ) 0 0;
+	color: var( --muted-foreground );
+	font-size: var( --text-sm );
+	line-height: var( --text-sm--line-height );
 }
 
 /* The entries float on their own, like the toasts they were. */
 .history {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-2);
-	width: min(320px, calc(100vw - 24px));
+	gap: var( --space-2 );
+	width: min( 320px, calc( 100vw - 24px ) );
 	background: none;
 	box-shadow: none;
 	overflow: visible;
 }
 
 .clearAll {
-	--button-background: var(--chrome);
+	--button-background: var( --chrome );
 
 	align-self: flex-end;
-	box-shadow: var(--shadow-xs);
+	box-shadow: var( --shadow-xs );
 }
 
 /* The padding is room for each entry's ring, shadow and dismiss badge. */
 .list {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-2);
-	max-height: min(440px, calc(100svh - 160px));
-	margin: calc(var(--space-2) * -1);
-	padding: var(--space-2);
+	gap: var( --space-2 );
+	max-height: min( 440px, calc( 100svh - 160px ) );
+	margin: calc( var( --space-2 ) * -1 );
+	padding: var( --space-2 );
 	overflow-y: auto;
 	overscroll-behavior: contain;
 }
 
 .time {
 	flex: none;
-	color: var(--muted-foreground);
-	font-size: var(--text-xxs);
-	line-height: var(--leading-tight);
+	color: var( --muted-foreground );
+	font-size: var( --text-xxs );
+	line-height: var( --leading-tight );
 	white-space: nowrap;
 	font-variant-numeric: tabular-nums;
 }
diff --git a/apps/ui/src/features/onboarding/learn-more/style.module.css b/apps/ui/src/features/onboarding/learn-more/style.module.css
index 7d0128ac88..dfd1e0774b 100644
--- a/apps/ui/src/features/onboarding/learn-more/style.module.css
+++ b/apps/ui/src/features/onboarding/learn-more/style.module.css
@@ -1,3 +1,3 @@
 .link {
-	color: var(--accent-text);
+	color: var( --accent-text );
 }
diff --git a/apps/ui/src/features/onboarding/onboarding-guide/illustrations/style.module.css b/apps/ui/src/features/onboarding/onboarding-guide/illustrations/style.module.css
index d008c9a111..7afe75947d 100644
--- a/apps/ui/src/features/onboarding/onboarding-guide/illustrations/style.module.css
+++ b/apps/ui/src/features/onboarding/onboarding-guide/illustrations/style.module.css
@@ -15,7 +15,7 @@
 	aspect-ratio: 320 / 150;
 	flex-shrink: 0;
 	overflow: visible;
-	border-bottom: 1px solid var(--border);
+	border-bottom: 1px solid var( --border );
 }
 
 /* ---- Preview scene ---- */
@@ -26,13 +26,13 @@
 	display: grid;
 	place-items: center;
 	overflow: hidden;
-	background: var(--muted);
+	background: var( --muted );
 }
 
 .previewSequence {
 	position: absolute;
 	inset: 0;
-	transform: scale(1.35);
+	transform: scale( 1.35 );
 	transform-origin: center;
 }
 
@@ -40,7 +40,7 @@
 	position: absolute;
 	top: 50%;
 	left: 50%;
-	transform: translate(-50%, -50%);
+	transform: translate( -50%, -50% );
 	transition: transform 50ms linear;
 	will-change: transform;
 }
@@ -52,7 +52,7 @@
 	gap: 2px;
 	height: 32px;
 	padding: 2px;
-	border: 1px solid var(--border);
+	border: 1px solid var( --border );
 	border-radius: 999px;
 }
 
@@ -62,7 +62,7 @@
 	bottom: 2px;
 	left: 0;
 	border-radius: 999px;
-	background: color-mix(in srgb, var(--foreground) 14%, transparent);
+	background: color-mix( in srgb, var( --foreground ) 14%, transparent );
 	transition:
 		width 200ms ease,
 		transform 200ms ease;
@@ -80,9 +80,9 @@
 	padding: 0 9px;
 	overflow: hidden;
 	border-radius: 999px;
-	color: var(--muted-foreground);
+	color: var( --muted-foreground );
 	font-size: 11px;
-	font-weight: var(--font-weight-semibold);
+	font-weight: var( --font-weight-semibold );
 	line-height: 16px;
 	white-space: nowrap;
 	transition:
@@ -93,7 +93,7 @@
 
 .previewTabActive {
 	gap: 6px;
-	color: var(--foreground);
+	color: var( --foreground );
 }
 
 .previewTabActive[data-realm='frontend'] {
@@ -145,7 +145,7 @@
 	left: 50%;
 	z-index: 5;
 	transform-origin: 4px 3px;
-	filter: drop-shadow(0 2px 3px rgb(0 0 0 / 25%));
+	filter: drop-shadow( 0 2px 3px rgb( 0 0 0 / 25% ) );
 	will-change: transform, opacity;
 }
 
@@ -153,7 +153,7 @@
 	position: absolute;
 	top: 50%;
 	left: 50%;
-	transform: translate(-50%, -50%);
+	transform: translate( -50%, -50% );
 	will-change: opacity;
 }
 
@@ -164,7 +164,7 @@
 	width: 40px;
 	height: 40px;
 	border-radius: 8px;
-	color: var(--foreground);
+	color: var( --foreground );
 	transition:
 		background 160ms ease,
 		color 160ms ease;
@@ -176,45 +176,49 @@
 }
 
 .previewAnnotateButtonActive {
-	background: color-mix(in srgb, var(--foreground) 14%, transparent);
-	color: var(--foreground);
+	background: color-mix( in srgb, var( --foreground ) 14%, transparent );
+	color: var( --foreground );
 }
 
 .previewAnnotateTooltip {
 	position: absolute;
-	bottom: calc(100% + 6px);
+	bottom: calc( 100% + 6px );
 	left: 50%;
 	padding: 7px 12px;
 	border-radius: 8px;
-	border: 1px solid var(--border);
-	background: var(--chrome);
-	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 2px 3px 0 rgba(0, 0, 0, 0.04), 0 6px 6px 0 rgba(0, 0, 0, 0.03), 0 8px 8px 0 rgba(0, 0, 0, 0.02);
-	color: var(--foreground);
+	border: 1px solid var( --border );
+	background: var( --chrome );
+	box-shadow:
+		0 1px 2px 0 rgba( 0, 0, 0, 0.05 ),
+		0 2px 3px 0 rgba( 0, 0, 0, 0.04 ),
+		0 6px 6px 0 rgba( 0, 0, 0, 0.03 ),
+		0 8px 8px 0 rgba( 0, 0, 0, 0.02 );
+	color: var( --foreground );
 	font-size: 11px;
 	font-weight: 500;
 	line-height: 1;
-	transform: translateX(-50%);
+	transform: translateX( -50% );
 	white-space: nowrap;
 }
 
 .previewSkeletonPage {
 	position: absolute;
-	top: calc(50% - 41px);
+	top: calc( 50% - 41px );
 	left: 50%;
 	width: 190px;
 	height: 82px;
 	padding: 14px;
-	border: 1px solid var(--border);
+	border: 1px solid var( --border );
 	border-radius: 5px;
-	background: var(--chrome);
-	transform: translateX(-50%);
+	background: var( --chrome );
+	transform: translateX( -50% );
 }
 
 .previewSkeletonTitle,
 .previewSkeletonCopy,
 .previewSkeletonCta {
 	border-radius: 999px;
-	background: color-mix(in srgb, var(--foreground) 18%, transparent);
+	background: color-mix( in srgb, var( --foreground ) 18%, transparent );
 }
 
 .previewSkeletonTitle {
@@ -234,22 +238,22 @@
 	left: 50%;
 	width: 60px;
 	height: 14px;
-	transform: translateX(-50%);
+	transform: translateX( -50% );
 	transition:
 		background 160ms ease,
 		box-shadow 160ms ease;
 }
 
 .previewSkeletonCtaPicking {
-	background: color-mix(in srgb, var(--accent-text) 12%, transparent);
-	box-shadow: 0 0 0 2px var(--ring);
+	background: color-mix( in srgb, var( --accent-text ) 12%, transparent );
+	box-shadow: 0 0 0 2px var( --ring );
 }
 
 .previewCommentComposer {
 	position: absolute;
 	z-index: 2;
-	top: calc(50% - 58px);
-	left: calc(50% + 80px);
+	top: calc( 50% - 58px );
+	left: calc( 50% + 80px );
 	display: flex;
 	width: 240px;
 	flex-direction: column;
@@ -258,17 +262,17 @@
 	border-radius: 9px;
 	background: #1a1a1a;
 	box-shadow:
-		0 2px 12px rgb(0 0 0 / 30%),
-		0 0 0 1px rgb(255 255 255 / 8%);
+		0 2px 12px rgb( 0 0 0 / 30% ),
+		0 0 0 1px rgb( 255 255 255 / 8% );
 	color: #fff;
 	margin-left: -120px;
-	transform: scale(0.72);
+	transform: scale( 0.72 );
 	transform-origin: top center;
 }
 
 .previewCommentTarget {
 	overflow: hidden;
-	color: rgb(255 255 255 / 50%);
+	color: rgb( 255 255 255 / 50% );
 	font-size: 8px;
 	line-height: 1;
 	text-overflow: ellipsis;
@@ -280,7 +284,7 @@
 	padding: 7px;
 	border: 1px solid #2563eb;
 	border-radius: 4px;
-	background: rgb(255 255 255 / 5%);
+	background: rgb( 255 255 255 / 5% );
 	color: #fff;
 	font-size: 9px;
 	line-height: 1.4;
@@ -318,11 +322,11 @@
 	height: 22px;
 	padding: 0 10px;
 	border-radius: 11px;
-	font-weight: var(--font-weight-semibold);
+	font-weight: var( --font-weight-semibold );
 }
 
 .previewCommentCancel {
-	color: rgb(255 255 255 / 70%);
+	color: rgb( 255 255 255 / 70% );
 }
 
 .previewCommentSave {
@@ -339,7 +343,7 @@
 	border: 1px solid #fff;
 	border-radius: 50%;
 	background: #2563eb;
-	box-shadow: 0 1px 4px rgb(0 0 0 / 30%);
+	box-shadow: 0 1px 4px rgb( 0 0 0 / 30% );
 	color: #fff;
 	font-size: 8px;
 	font-weight: 700;
@@ -349,7 +353,7 @@
 
 .previewAnnotationMarkerOne {
 	top: 56px;
-	left: calc(50% + 30px);
+	left: calc( 50% + 30px );
 }
 
 .previewAnnotationMarkerTwo {
@@ -362,7 +366,7 @@
 	left: 148px;
 }
 
-@media (prefers-reduced-motion: reduce) {
+@media ( prefers-reduced-motion: reduce ) {
 	.previewTabsIndicator,
 	.previewTab,
 	.previewTabTitle,
@@ -381,7 +385,7 @@
 	inset: 0;
 	display: grid;
 	place-items: center;
-	background: var(--sites-chrome-bg);
+	background: var( --sites-chrome-bg );
 }
 
 /* A stack of rows so the focus row reads as one entry in a real sidebar list.
@@ -410,9 +414,9 @@
 
 .rowGhostName {
 	overflow: hidden;
-	font-size: var(--text-xs);
+	font-size: var( --text-xs );
 	line-height: 1.2;
-	color: var(--muted-foreground);
+	color: var( --muted-foreground );
 	white-space: nowrap;
 	text-overflow: ellipsis;
 }
@@ -426,16 +430,16 @@
 	height: 34px;
 	padding: 0 8px 0 12px;
 	border-radius: 6px;
-	background: var(--hover);
+	background: var( --hover );
 }
 
 .rowName {
 	flex: 1;
 	min-width: 0;
 	overflow: hidden;
-	font-size: var(--text-xs);
+	font-size: var( --text-xs );
 	line-height: 1.2;
-	color: var(--foreground);
+	color: var( --foreground );
 	white-space: nowrap;
 	text-overflow: ellipsis;
 }
@@ -455,7 +459,7 @@
 	width: 24px;
 	height: 24px;
 	border-radius: 4px;
-	color: var(--foreground);
+	color: var( --foreground );
 }
 
 .btnGlyph {
@@ -473,7 +477,7 @@
 .statusPlay {
 	width: 9px;
 	height: 9px;
-	fill: var(--foreground);
+	fill: var( --foreground );
 }
 
 .statusDot {
@@ -486,17 +490,17 @@
    look live here. Centered over the button. */
 .tooltip {
 	position: absolute;
-	bottom: calc(100% + 7px);
+	bottom: calc( 100% + 7px );
 	left: 50%;
 	padding: 3px 8px;
 	border-radius: 4px;
 	background: #fff;
 	color: #1e1e1e;
 	font-size: 11px;
-	font-weight: var(--font-weight-semibold);
+	font-weight: var( --font-weight-semibold );
 	line-height: 1.4;
 	white-space: nowrap;
-	box-shadow: 0 2px 8px rgb(0 0 0 / 24%);
+	box-shadow: 0 2px 8px rgb( 0 0 0 / 24% );
 	pointer-events: none;
 }
 
@@ -505,7 +509,7 @@
 	top: 50%;
 	left: 50%;
 	transform-origin: 4px 3px;
-	filter: drop-shadow(0 2px 3px rgb(0 0 0 / 30%));
+	filter: drop-shadow( 0 2px 3px rgb( 0 0 0 / 30% ) );
 	will-change: transform, opacity;
 }
 
@@ -516,7 +520,7 @@
 	position: absolute;
 	inset: 0;
 	overflow: hidden;
-	background: var(--muted);
+	background: var( --muted );
 }
 
 /* Above the resting composer, with room up top so the first bubble clears the
@@ -538,16 +542,16 @@
 	max-width: 82%;
 	padding: 5px 11px;
 	border-radius: 14px 14px 6px 14px;
-	background: color-mix(in srgb, var(--accent-text) 12%, transparent);
-	color: var(--foreground);
-	font-size: var(--text-xxs);
+	background: color-mix( in srgb, var( --accent-text ) 12%, transparent );
+	color: var( --foreground );
+	font-size: var( --text-xxs );
 	line-height: 1.4;
 	transform-origin: bottom right;
 }
 
 .assistantText {
-	color: var(--foreground);
-	font-size: var(--text-xxs);
+	color: var( --foreground );
+	font-size: var( --text-xxs );
 	line-height: 1.45;
 }
 
@@ -558,8 +562,8 @@
 	height: 13px;
 	margin-left: 2px;
 	vertical-align: -2px;
-	background: var(--muted-foreground);
-	animation: chatCaretBlink 1s steps(1) infinite;
+	background: var( --muted-foreground );
+	animation: chatCaretBlink 1s steps( 1 ) infinite;
 }
 
 .toolChip {
@@ -567,7 +571,7 @@
 	display: inline-flex;
 	align-items: center;
 	gap: 6px;
-	color: var(--muted-foreground);
+	color: var( --muted-foreground );
 	font-size: 11px;
 }
 
@@ -581,9 +585,9 @@
 .toolShimmer {
 	background: linear-gradient(
 		100deg,
-		var(--muted-foreground) 35%,
-		var(--foreground) 50%,
-		var(--muted-foreground) 65%
+		var( --muted-foreground ) 35%,
+		var( --foreground ) 50%,
+		var( --muted-foreground ) 65%
 	);
 	background-size: 220% 100%;
 	background-clip: text;
@@ -610,15 +614,15 @@
 	left: 14px;
 	z-index: 2;
 	padding: 2px 4px;
-	color: var(--muted-foreground);
+	color: var( --muted-foreground );
 	font-size: 11px;
-	font-weight: var(--font-weight-semibold);
+	font-weight: var( --font-weight-semibold );
 	cursor: pointer;
 	transition: color 120ms ease;
 }
 
 .replayButton:hover {
-	color: var(--foreground);
+	color: var( --foreground );
 }
 
 .composer {
@@ -631,8 +635,8 @@
 	gap: 6px;
 	padding: 8px 10px 7px;
 	border-radius: 8px 8px 20px 8px;
-	background: var(--chrome);
-	outline: 1.5px solid var(--accent-text);
+	background: var( --chrome );
+	outline: 1.5px solid var( --accent-text );
 	will-change: transform;
 }
 
@@ -645,8 +649,8 @@
 	position: absolute;
 	inset: 0;
 	text-align: start;
-	color: var(--muted-foreground);
-	font-size: var(--text-xxs);
+	color: var( --muted-foreground );
+	font-size: var( --text-xxs );
 	line-height: 17px;
 	white-space: nowrap;
 }
@@ -657,8 +661,8 @@
 	display: inline-flex;
 	align-items: center;
 	overflow: hidden;
-	color: var(--foreground);
-	font-size: var(--text-xxs);
+	color: var( --foreground );
+	font-size: var( --text-xxs );
 	line-height: 17px;
 	white-space: nowrap;
 }
@@ -668,8 +672,8 @@
 	width: 1.5px;
 	height: 13px;
 	margin-left: 1px;
-	background: var(--accent-text);
-	animation: chatCaretBlink 1s steps(1) infinite;
+	background: var( --accent-text );
+	animation: chatCaretBlink 1s steps( 1 ) infinite;
 }
 
 .composerBar {
@@ -692,8 +696,8 @@
 	width: 22px;
 	height: 22px;
 	border-radius: 999px;
-	background: var(--foreground);
-	color: var(--chrome);
+	background: var( --foreground );
+	color: var( --chrome );
 }
 
 .stopGlyph {
@@ -708,7 +712,7 @@
 	place-items: center;
 	width: 18px;
 	height: 18px;
-	color: var(--muted-foreground);
+	color: var( --muted-foreground );
 }
 
 .plusButton svg {
@@ -722,9 +726,11 @@
 	width: 22px;
 	height: 22px;
 	border-radius: 999px;
-	background: color-mix(in srgb, var(--foreground) 14%, transparent);
-	color: var(--muted-foreground);
-	transition: background 150ms ease, color 150ms ease;
+	background: color-mix( in srgb, var( --foreground ) 14%, transparent );
+	color: var( --muted-foreground );
+	transition:
+		background 150ms ease,
+		color 150ms ease;
 }
 
 .sendButton svg {
@@ -733,7 +739,7 @@
 }
 
 .sendButtonActive {
-	background: var(--accent-text);
+	background: var( --accent-text );
 	color: #fff;
 }
 
@@ -750,7 +756,7 @@
 
 /* The choreography timeline already rests on a static frame under reduced
    motion; only the small looping CSS effects need silencing. */
-@media (prefers-reduced-motion: reduce) {
+@media ( prefers-reduced-motion: reduce ) {
 	.streamCaret,
 	.composerCaret {
 		animation: none;
@@ -758,7 +764,7 @@
 
 	.toolShimmer {
 		animation: none;
-		color: var(--muted-foreground);
-		-webkit-text-fill-color: var(--muted-foreground);
+		color: var( --muted-foreground );
+		-webkit-text-fill-color: var( --muted-foreground );
 	}
 }
diff --git a/apps/ui/src/features/onboarding/onboarding-guide/illustrations/whats-new.module.css b/apps/ui/src/features/onboarding/onboarding-guide/illustrations/whats-new.module.css
index 38b5fb64cc..63db348fa2 100644
--- a/apps/ui/src/features/onboarding/onboarding-guide/illustrations/whats-new.module.css
+++ b/apps/ui/src/features/onboarding/onboarding-guide/illustrations/whats-new.module.css
@@ -16,7 +16,7 @@
 .workspace {
 	display: grid;
 	grid-template-columns: 52% 1fr;
-	background: var(--chrome);
+	background: var( --chrome );
 }
 
 .sidebar {
@@ -28,7 +28,7 @@
 
 .sectionLabel {
 	padding: 0 6px 4px;
-	color: var(--muted-foreground);
+	color: var( --muted-foreground );
 }
 
 .row {
@@ -37,8 +37,8 @@
 	gap: 6px;
 	height: 22px;
 	padding: 0 6px;
-	border-radius: var(--radius-sm);
-	color: var(--foreground);
+	border-radius: var( --radius-sm );
+	color: var( --foreground );
 	white-space: nowrap;
 }
 
@@ -47,7 +47,7 @@
 }
 
 .rowSelected {
-	background: var(--hover);
+	background: var( --hover );
 }
 
 .rowIcon {
@@ -67,7 +67,7 @@
 	height: 5px;
 	margin-inline-start: auto;
 	border-radius: 50%;
-	background: var(--accent);
+	background: var( --accent );
 }
 
 .preview {
@@ -76,16 +76,16 @@
 	gap: 8px;
 	margin-top: 48px;
 	padding: 16px;
-	border-top: 1px solid var(--border);
-	border-inline-start: 1px solid var(--border);
-	border-start-start-radius: var(--radius-lg);
+	border-top: 1px solid var( --border );
+	border-inline-start: 1px solid var( --border );
+	border-start-start-radius: var( --radius-lg );
 	/* The site in the preview is always a light page. */
 	color: #1e1e1e;
 	background: #fff;
 }
 
 .previewTitle {
-	font-weight: var(--font-weight-semibold);
+	font-weight: var( --font-weight-semibold );
 }
 
 .previewHeading {
@@ -114,23 +114,23 @@
 	flex-direction: column;
 	gap: 8px;
 	padding: 18px 56px 0 24px;
-	background: var(--chat);
-	color: var(--foreground);
+	background: var( --chat );
+	color: var( --foreground );
 }
 
 .prompt {
 	align-self: flex-end;
 	padding: 6px 10px;
 	border-radius: 12px;
-	background: var(--primary);
-	color: var(--primary-foreground);
+	background: var( --primary );
+	color: var( --primary-foreground );
 }
 
 .reply {
 	align-self: flex-start;
 	padding: 6px 10px;
 	border-radius: 12px;
-	background: var(--muted);
+	background: var( --muted );
 }
 
 .composer {
@@ -139,13 +139,13 @@
 	gap: 10px;
 	margin: 4px -32px 0 0;
 	padding: 9px 10px 8px;
-	border: 1px solid var(--border);
+	border: 1px solid var( --border );
 	border-radius: 16px;
-	background: var(--composer);
+	background: var( --composer );
 }
 
 .composerPlaceholder {
-	color: var(--muted-foreground);
+	color: var( --muted-foreground );
 }
 
 .composerBar {
@@ -165,9 +165,9 @@
 	gap: 4px;
 	padding: 2px 8px;
 	border-radius: 999px;
-	background: color-mix(in srgb, var(--accent) 14%, transparent);
-	color: var(--accent-text);
-	font-weight: var(--font-weight-medium);
+	background: color-mix( in srgb, var( --accent ) 14%, transparent );
+	color: var( --accent-text );
+	font-weight: var( --font-weight-medium );
 }
 
 .chip svg {
@@ -180,7 +180,7 @@
 	align-items: center;
 	gap: 2px;
 	margin-inline-start: auto;
-	color: var(--muted-foreground);
+	color: var( --muted-foreground );
 }
 
 .model svg {
@@ -194,8 +194,8 @@
 	width: 22px;
 	height: 22px;
 	border-radius: 50%;
-	background: var(--accent);
-	color: var(--accent-foreground);
+	background: var( --accent );
+	color: var( --accent-foreground );
 }
 
 .send svg {
@@ -206,7 +206,7 @@
 /* ---- Publish and Share ---- */
 
 .publish {
-	background: var(--muted);
+	background: var( --muted );
 }
 
 .band {
@@ -220,8 +220,8 @@
 	gap: 6px;
 	height: 40px;
 	padding: 0 16px 0 0;
-	border-block: 1px solid var(--border);
-	background: var(--chrome);
+	border-block: 1px solid var( --border );
+	background: var( --chrome );
 }
 
 .address {
@@ -230,18 +230,18 @@
 	margin-inline-end: auto;
 	margin-inline-start: -20px;
 	padding: 5px 12px;
-	border: 1px solid var(--border);
+	border: 1px solid var( --border );
 	border-radius: 999px;
-	color: var(--muted-foreground);
+	color: var( --muted-foreground );
 	text-align: center;
 }
 
 .publishButton {
 	padding: 5px 10px;
-	border-radius: var(--radius-md);
-	background: var(--primary);
-	color: var(--primary-foreground);
-	font-weight: var(--font-weight-medium);
+	border-radius: var( --radius-md );
+	background: var( --primary );
+	color: var( --primary-foreground );
+	font-weight: var( --font-weight-medium );
 }
 
 .iconButton {
@@ -249,9 +249,9 @@
 	place-items: center;
 	width: 26px;
 	height: 26px;
-	border-radius: var(--radius-md);
-	background: var(--hover);
-	color: var(--foreground);
+	border-radius: var( --radius-md );
+	background: var( --hover );
+	color: var( --foreground );
 }
 
 .iconButton svg {
@@ -268,29 +268,29 @@
 	gap: 6px;
 	width: 190px;
 	padding: 10px;
-	border: 1px solid var(--border);
-	border-radius: var(--radius-lg);
-	background: var(--popover);
-	color: var(--popover-foreground);
-	box-shadow: var(--shadow-md);
+	border: 1px solid var( --border );
+	border-radius: var( --radius-lg );
+	background: var( --popover );
+	color: var( --popover-foreground );
+	box-shadow: var( --shadow-md );
 }
 
 .panelLabel {
-	color: var(--muted-foreground);
+	color: var( --muted-foreground );
 }
 
 .panelField {
 	padding: 4px 8px;
-	border: 1px solid var(--border);
-	border-radius: var(--radius-md);
+	border: 1px solid var( --border );
+	border-radius: var( --radius-md );
 }
 
 .panelButton {
 	padding: 5px;
-	border-radius: var(--radius-md);
-	background: var(--accent);
-	color: var(--accent-foreground);
-	font-weight: var(--font-weight-medium);
+	border-radius: var( --radius-md );
+	background: var( --accent );
+	color: var( --accent-foreground );
+	font-weight: var( --font-weight-medium );
 	text-align: center;
 }
 
@@ -299,7 +299,7 @@
 .paletteScene {
 	display: grid;
 	place-items: center;
-	background: var(--muted);
+	background: var( --muted );
 }
 
 .palette {
@@ -308,11 +308,11 @@
 	gap: 3px;
 	width: 270px;
 	padding: 7px;
-	border: 1px solid var(--border);
-	border-radius: var(--radius-xl);
-	background: var(--popover);
-	color: var(--popover-foreground);
-	box-shadow: var(--shadow-md);
+	border: 1px solid var( --border );
+	border-radius: var( --radius-xl );
+	background: var( --popover );
+	color: var( --popover-foreground );
+	box-shadow: var( --shadow-md );
 }
 
 .paletteInput {
@@ -322,28 +322,28 @@
 	height: 28px;
 	padding: 0 8px;
 	border-radius: 10px;
-	outline: 1.5px solid var(--accent);
+	outline: 1.5px solid var( --accent );
 }
 
 .paletteSearch {
 	width: 13px;
 	height: 13px;
-	color: var(--muted-foreground);
+	color: var( --muted-foreground );
 }
 
 .kbd {
 	margin-inline-start: auto;
 	padding: 1px 5px;
-	border: 1px solid var(--border);
-	border-radius: var(--radius-xs);
-	color: var(--muted-foreground);
+	border: 1px solid var( --border );
+	border-radius: var( --radius-xs );
+	color: var( --muted-foreground );
 	font-family: inherit;
 	font-size: 10px;
 }
 
 .paletteGroup {
 	padding: 5px 6px 1px;
-	color: var(--muted-foreground);
+	color: var( --muted-foreground );
 	font-size: 10px;
 }
 
@@ -353,11 +353,11 @@
 	gap: 6px;
 	height: 24px;
 	padding: 0 6px;
-	border-radius: var(--radius-md);
+	border-radius: var( --radius-md );
 }
 
 .paletteItemActive {
-	background: var(--hover);
+	background: var( --hover );
 }
 
 .paletteItemIcon {
@@ -367,7 +367,7 @@
 
 .paletteItemMeta {
 	margin-inline-start: auto;
-	color: var(--muted-foreground);
+	color: var( --muted-foreground );
 }
 
 /* ---- Appearance ---- */
@@ -375,7 +375,7 @@
 .appearance {
 	display: grid;
 	place-items: center;
-	background: var(--muted);
+	background: var( --muted );
 }
 
 .card {
@@ -383,11 +383,11 @@
 	flex-direction: column;
 	width: 250px;
 	padding: 4px 14px;
-	border: 1px solid var(--border);
-	border-radius: var(--radius-xl);
-	background: var(--background);
-	color: var(--foreground);
-	box-shadow: var(--shadow-sm);
+	border: 1px solid var( --border );
+	border-radius: var( --radius-xl );
+	background: var( --background );
+	color: var( --foreground );
+	box-shadow: var( --shadow-sm );
 }
 
 .setting {
@@ -398,7 +398,7 @@
 }
 
 .setting + .setting {
-	border-top: 1px solid var(--border);
+	border-top: 1px solid var( --border );
 }
 
 .swatches {
@@ -413,7 +413,7 @@
 }
 
 .swatchSelected {
-	outline: 2px solid var(--scene-accent);
+	outline: 2px solid var( --scene-accent );
 	outline-offset: 2px;
 }
 
@@ -422,14 +422,14 @@
 	width: 110px;
 	height: 4px;
 	border-radius: 2px;
-	background: var(--border);
+	background: var( --border );
 }
 
 .sliderFill {
 	position: absolute;
 	inset: 0 40% 0 0;
 	border-radius: 2px;
-	background: var(--scene-accent);
+	background: var( --scene-accent );
 }
 
 .sliderFillLow {
@@ -442,10 +442,10 @@
 	left: 60%;
 	width: 12px;
 	height: 12px;
-	border: 2px solid var(--scene-accent);
+	border: 2px solid var( --scene-accent );
 	border-radius: 50%;
-	background: var(--background);
-	transform: translate(-50%, -50%);
+	background: var( --background );
+	transform: translate( -50%, -50% );
 }
 
 .sliderThumbLow {
diff --git a/apps/ui/src/features/onboarding/onboarding-guide/style.module.css b/apps/ui/src/features/onboarding/onboarding-guide/style.module.css
index 27bb8a9d89..a34fffde47 100644
--- a/apps/ui/src/features/onboarding/onboarding-guide/style.module.css
+++ b/apps/ui/src/features/onboarding/onboarding-guide/style.module.css
@@ -1,25 +1,27 @@
 .popup {
 	gap: 0;
 	width: 380px;
-	max-width: calc(100vw - 32px);
+	max-width: calc( 100vw - 32px );
 	padding: 0;
 }
 
 .close {
 	position: absolute;
-	top: var(--space-2);
-	inset-inline-end: var(--space-2);
+	top: var( --space-2 );
+	inset-inline-end: var( --space-2 );
 	z-index: 1;
 }
 
 /* This artwork stays dark in both themes, so match the dark theme's neutral
    hover fill and keep the icon light in both themes. */
 .closeOnDark {
+	/* eslint-disable-next-line studio/use-theme-tokens -- this artwork stays dark in both themes. */
 	--button-hover-background: #282828;
 }
 
 .closeOnDark,
 .closeOnDark svg {
+	/* eslint-disable-next-line studio/use-theme-tokens -- this artwork stays dark in both themes. */
 	color: #fff;
 }
 
@@ -29,7 +31,7 @@
    under a transformed ancestor — but the backdrop isn't transformed, so make it
    the drag surface. Scoped to this guide's backdrops (the siblings preceding
    our popup) so every other dialog keeps its click-outside-to-dismiss. */
-:global([role='presentation']:has(~ [data-orientation-guide])) {
+:global( [role='presentation']:has( ~ [data-orientation-guide] ) ) {
 	-webkit-app-region: drag;
 }
 
@@ -37,8 +39,7 @@
    and stays there as the user advances. */
 .content {
 	display: grid;
-	padding: var(--space-5) var(--space-5)
-		var(--space-4);
+	padding: var( --space-5 ) var( --space-5 ) var( --space-4 );
 	text-align: start;
 }
 
@@ -49,7 +50,7 @@
 .page {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-2);
+	gap: var( --space-2 );
 }
 
 /* Hidden rather than unmounted: an inactive page still has to take up its space
@@ -60,16 +61,16 @@
 }
 
 .title {
-	font-size: var(--text-2xl);
-	font-weight: var(--font-weight-semibold);
+	font-size: var( --text-2xl );
+	font-weight: var( --font-weight-semibold );
 	line-height: 1.3;
 	text-wrap: balance;
 }
 
 .description {
-	color: var(--muted-foreground);
-	font-size: var(--text-xs);
-	line-height: var(--leading-normal);
+	color: var( --muted-foreground );
+	font-size: var( --text-xs );
+	line-height: var( --leading-normal );
 	text-wrap: pretty;
 }
 
@@ -86,9 +87,8 @@
 	display: grid;
 	grid-template-columns: 1fr auto 1fr;
 	align-items: center;
-	gap: var(--space-3);
-	padding: var(--space-3) var(--space-5)
-		var(--space-5);
+	gap: var( --space-3 );
+	padding: var( --space-3 ) var( --space-5 ) var( --space-5 );
 }
 
 .footerStart {
@@ -107,7 +107,9 @@
 	/* Hold the visibility flip until the fade finishes; coming back in uses
 	   `.back`'s transition, which has no visibility delay, so it reappears at
 	   once and fades up. */
-	transition: opacity 200ms ease-in-out, visibility 0s 200ms;
+	transition:
+		opacity 200ms ease-in-out,
+		visibility 0s 200ms;
 }
 
 .footerEnd {
@@ -118,35 +120,32 @@
 	justify-self: center;
 	display: flex;
 	align-items: center;
-	gap: var(--space-1_5);
+	gap: var( --space-1_5 );
 }
 
 .dot {
 	width: 6px;
 	height: 6px;
-	/* Fixed radius (not 50%) so it stays constant as the active dot stretches
-	   to a pill — a percentage radius warps mid-transition. At 6px this still
-	   renders a full circle. */
-	border-radius: 3px;
+	/* A pill radius (not 50%) so the ends stay round as the active dot
+	   stretches — a percentage radius warps mid-transition. */
+	border-radius: var( --radius-full );
 	/* Mixed into the surface rather than into `transparent`: an alpha of its own
 	   would animate 0.22 → 1 on the way to the opaque active colour, so the dot
 	   faded in instead of changing colour and the shift landed late enough to
 	   read as a pop. Opaque at both ends, only the hue moves. Same rendered
 	   colour, and both tokens follow the theme. */
-	background: color-mix(
-		in srgb,
-		var(--foreground) 22%,
-		var(--chat)
-	);
-	transition: background 200ms ease-in-out, width 200ms ease-in-out;
+	background: color-mix( in srgb, var( --foreground ) 22%, var( --chat ) );
+	transition:
+		background 200ms ease-in-out,
+		width 200ms ease-in-out;
 }
 
 .dotActive {
 	width: 18px;
-	background: var(--accent-text);
+	background: var( --accent-text );
 }
 
-@media (prefers-reduced-motion: reduce) {
+@media ( prefers-reduced-motion: reduce ) {
 	.dot {
 		transition: none;
 	}
diff --git a/apps/ui/src/features/onboarding/welcome-dialog/style.module.css b/apps/ui/src/features/onboarding/welcome-dialog/style.module.css
index e32d660d74..04dd69a06b 100644
--- a/apps/ui/src/features/onboarding/welcome-dialog/style.module.css
+++ b/apps/ui/src/features/onboarding/welcome-dialog/style.module.css
@@ -1,54 +1,54 @@
 .dialog {
-	gap: var(--space-5);
-	padding: var(--space-6);
+	gap: var( --space-5 );
+	padding: var( --space-6 );
 }
 
 .intro {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-1_5);
+	gap: var( --space-1_5 );
 }
 
 .appIcon {
 	width: 44px;
 	height: 44px;
-	margin-bottom: var(--space-2);
+	margin-bottom: var( --space-2 );
 }
 
 .actions {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-2);
+	gap: var( --space-2 );
 }
 
 .perks {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-2);
-	margin-bottom: var(--space-1_5);
-	padding-inline-start: var(--space-3);
-	border-inline-start: 2px solid var(--border);
+	gap: var( --space-2 );
+	margin-bottom: var( --space-1_5 );
+	padding-inline-start: var( --space-3 );
+	border-inline-start: 2px solid var( --border );
 }
 
 .perksLead {
-	font-size: var(--text-xs);
-	font-weight: var(--font-weight-medium);
+	font-size: var( --text-xs );
+	font-weight: var( --font-weight-medium );
 	line-height: 18px;
 }
 
 .perksList {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-1_5);
-	color: var(--muted-foreground);
-	font-size: var(--text-xs);
+	gap: var( --space-1_5 );
+	color: var( --muted-foreground );
+	font-size: var( --text-xs );
 	line-height: 18px;
 }
 
 .perksList li {
 	display: flex;
 	align-items: center;
-	gap: var(--space-2_5);
+	gap: var( --space-2_5 );
 }
 
 .perksList svg {
@@ -56,30 +56,30 @@
 }
 
 .perksList b {
-	color: var(--foreground);
-	font-weight: var(--font-weight-medium);
+	color: var( --foreground );
+	font-weight: var( --font-weight-medium );
 }
 
 .hint {
-	color: var(--muted-foreground);
-	font-size: var(--text-xs);
+	color: var( --muted-foreground );
+	font-size: var( --text-xs );
 	text-align: center;
 }
 
 .error {
-	color: var(--destructive);
-	font-size: var(--text-xs);
+	color: var( --destructive );
+	font-size: var( --text-xs );
 	text-align: center;
 }
 
 .account {
 	display: flex;
 	align-items: center;
-	gap: var(--space-2_5);
-	margin-bottom: var(--space-1);
-	padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
-	border-radius: var(--radius-md);
-	background: var(--muted);
+	gap: var( --space-2_5 );
+	margin-bottom: var( --space-1 );
+	padding: var( --space-2 ) var( --space-2 ) var( --space-2 ) var( --space-3 );
+	border-radius: var( --radius-md );
+	background: var( --muted );
 }
 
 .avatar {
@@ -96,26 +96,26 @@
 
 .accountName {
 	composes: truncate from '@/lib/theme/recipes.module.css';
-	font-weight: var(--font-weight-medium);
+	font-weight: var( --font-weight-medium );
 }
 
 .accountHint {
-	color: var(--muted-foreground);
-	font-size: var(--text-xxs);
+	color: var( --muted-foreground );
+	font-size: var( --text-xxs );
 	line-height: 16px;
 }
 
 .footer {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-3);
-	margin-inline: calc(var(--space-6) * -1);
-	padding: var(--space-4) var(--space-6) 0;
-	border-top: 1px solid var(--border);
+	gap: var( --space-3 );
+	margin-inline: calc( var( --space-6 ) * -1 );
+	padding: var( --space-4 ) var( --space-6 ) 0;
+	border-top: 1px solid var( --border );
 }
 
 .legal {
-	color: var(--muted-foreground);
-	font-size: var(--text-xxs);
+	color: var( --muted-foreground );
+	font-size: var( --text-xxs );
 	line-height: 17px;
 }
diff --git a/apps/ui/src/features/settings/agentic-signin-banner/style.module.css b/apps/ui/src/features/settings/agentic-signin-banner/style.module.css
index 57f820b0dd..067109fe4a 100644
--- a/apps/ui/src/features/settings/agentic-signin-banner/style.module.css
+++ b/apps/ui/src/features/settings/agentic-signin-banner/style.module.css
@@ -3,12 +3,12 @@
 	flex-wrap: wrap;
 	align-items: center;
 	justify-content: space-between;
-	gap: var(--space-4);
-	margin-bottom: calc(var(--space-5) * 1.25);
-	padding: var(--space-4) var(--space-5);
-	border: 1px solid var(--border);
-	border-radius: var(--radius-2xl);
-	background: var(--muted);
+	gap: var( --space-4 );
+	margin-bottom: calc( var( --space-5 ) * 1.25 );
+	padding: var( --space-4 ) var( --space-5 );
+	border: 1px solid var( --border );
+	border-radius: var( --radius-2xl );
+	background: var( --muted );
 }
 
 .text {
@@ -17,22 +17,22 @@
 }
 
 .heading {
-	margin: 0 0 var(--space-2);
-	font-size: var(--text-xs);
+	margin: 0 0 var( --space-2 );
+	font-size: var( --text-xs );
 	line-height: 24px;
-	font-weight: var(--font-weight-semibold);
-	color: var(--foreground);
+	font-weight: var( --font-weight-semibold );
+	color: var( --foreground );
 }
 
 .benefits {
-	padding-inline-start: var(--space-4);
+	padding-inline-start: var( --space-4 );
 	list-style: disc;
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-1);
-	font-size: var(--text-xxs);
+	gap: var( --space-1 );
+	font-size: var( --text-xxs );
 	line-height: 20px;
-	color: var(--muted-foreground);
+	color: var( --muted-foreground );
 }
 
 .actions {
diff --git a/apps/ui/src/features/settings/offline-banner/style.module.css b/apps/ui/src/features/settings/offline-banner/style.module.css
index 6f8af6faaf..f8fca75750 100644
--- a/apps/ui/src/features/settings/offline-banner/style.module.css
+++ b/apps/ui/src/features/settings/offline-banner/style.module.css
@@ -1,23 +1,23 @@
 /* Keep in sync with agentic-signin-banner/style.module.css so the two
    banners read as one component wherever they stack. */
 .root {
-	margin-bottom: calc(var(--space-5) * 1.25);
-	padding: var(--space-4) var(--space-5);
-	border: 1px solid var(--border);
-	border-radius: var(--radius-2xl);
-	background: var(--muted);
+	margin-bottom: calc( var( --space-5 ) * 1.25 );
+	padding: var( --space-4 ) var( --space-5 );
+	border: 1px solid var( --border );
+	border-radius: var( --radius-2xl );
+	background: var( --muted );
 }
 
 .heading {
-	margin: 0 0 var(--space-2);
-	font-size: var(--text-xs);
+	margin: 0 0 var( --space-2 );
+	font-size: var( --text-xs );
 	line-height: 24px;
-	font-weight: var(--font-weight-semibold);
-	color: var(--foreground);
+	font-weight: var( --font-weight-semibold );
+	color: var( --foreground );
 }
 
 .description {
-	font-size: var(--text-xxs);
+	font-size: var( --text-xxs );
 	line-height: 20px;
-	color: var(--muted-foreground);
+	color: var( --muted-foreground );
 }
diff --git a/apps/ui/src/features/settings/settings-dialog/style.module.css b/apps/ui/src/features/settings/settings-dialog/style.module.css
index b2d95ac2d1..b61f1696cb 100644
--- a/apps/ui/src/features/settings/settings-dialog/style.module.css
+++ b/apps/ui/src/features/settings/settings-dialog/style.module.css
@@ -1,18 +1,17 @@
 .scopes {
-	margin: var(--space-3) var(--space-3) 0;
+	margin: var( --space-3 ) var( --space-3 ) 0;
 }
 
 .search {
 	width: auto;
-	margin: var(--space-3) var(--space-3) 0;
+	margin: var( --space-3 ) var( --space-3 ) 0;
 }
 
-
 .empty {
-	padding: var(--space-4) var(--space-5);
+	padding: var( --space-4 ) var( --space-5 );
 	text-align: center;
-	color: var(--muted-foreground);
-	font-size: var(--text-xs);
+	color: var( --muted-foreground );
+	font-size: var( --text-xs );
 }
 
 .actions {
@@ -24,21 +23,22 @@
 }
 
 /* The setting picked from the search results. */
-.content :global([data-settings-match]) {
-	margin-inline: calc(var(--space-3) * -1);
-	padding-inline: var(--space-3);
+.content :global( [data-settings-match] ) {
+	margin-inline: calc( var( --space-3 ) * -1 );
+	padding-inline: var( --space-3 );
+	/* eslint-disable-next-line studio/use-theme-tokens -- the search highlight, which the rebuild shapes per row. */
 	border-radius: 8px;
-	background: color-mix(in srgb, var(--accent-text) 12%, transparent);
-	transition: background-color var(--motion-duration-layout);
+	background: color-mix( in srgb, var( --accent-text ) 12%, transparent );
+	transition: background-color var( --motion-duration-layout );
 }
 
 .sections {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-8);
+	gap: var( --space-8 );
 }
 
 .error {
-	color: var(--destructive);
-	font-size: var(--text-xs);
+	color: var( --destructive );
+	font-size: var( --text-xs );
 }
diff --git a/apps/ui/src/features/settings/settings-view/style.module.css b/apps/ui/src/features/settings/settings-view/style.module.css
index f4fca47632..8d411e279c 100644
--- a/apps/ui/src/features/settings/settings-view/style.module.css
+++ b/apps/ui/src/features/settings/settings-view/style.module.css
@@ -1,38 +1,36 @@
 .state {
-	padding: var(--space-5);
-	color: var(--muted-foreground);
-	font-size: var(--text-xxs);
+	padding: var( --space-5 );
+	color: var( --muted-foreground );
+	font-size: var( --text-xxs );
 	line-height: 24px;
 }
 
 .preferencesPanel {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-8);
+	gap: var( --space-8 );
 }
 
 .instructionsHeader {
 	display: flex;
 	align-items: baseline;
 	justify-content: space-between;
-	gap: var(--space-2);
+	gap: var( --space-2 );
 }
 
-
-
 .groupLegend {
-	margin-block-end: var(--space-0_5);
+	margin-block-end: var( --space-0_5 );
 }
 
 .groupDescription {
-	margin-block-end: var(--space-2);
-	padding-inline: var(--space-5);
+	margin-block-end: var( --space-2 );
+	padding-inline: var( --space-5 );
 }
 
 .rowTitle {
 	display: flex;
 	align-items: center;
-	gap: var(--space-1);
+	gap: var( --space-1 );
 }
 
 .linkButton {
@@ -54,7 +52,7 @@
 .settingsControl {
 	display: flex;
 	align-items: center;
-	gap: var(--space-2);
+	gap: var( --space-2 );
 }
 
 .settingsRow[data-orientation='vertical'] > .settingsControl {
@@ -62,7 +60,7 @@
 	align-items: stretch;
 }
 
-@media (width < 640px) {
+@media ( width < 640px ) {
 	.settingsRow[data-orientation='horizontal'] {
 		flex-direction: column;
 		align-items: stretch;
@@ -79,24 +77,23 @@
 	align-items: center;
 	inline-size: 100%;
 	block-size: 36px;
-	padding: 0 var(--space-2_5);
-	border: 1px solid
-		var(--border);
-	border-radius: var(--radius-lg);
-	color: var(--foreground);
-	font-family: var(--font-sans);
-	font-size: var(--text-xs);
-	line-height: var(--text-xs--line-height);
+	padding: 0 var( --space-2_5 );
+	border: 1px solid var( --border );
+	border-radius: var( --radius-lg );
+	color: var( --foreground );
+	font-family: var( --font-sans );
+	font-size: var( --text-xs );
+	line-height: var( --text-xs--line-height );
 	text-align: start;
 	cursor: pointer;
 }
 
 .pathPickerButton:hover {
-	border-color: var(--muted-foreground);
+	border-color: var( --muted-foreground );
 }
 
 .pathPickerButton:focus-visible {
-	outline: var(--focus-width) solid var(--ring);
+	outline: var( --focus-width ) solid var( --ring );
 	outline-offset: 2px;
 }
 
@@ -107,7 +104,7 @@
 
 .pathPickerPlaceholder {
 	composes: pathPickerValue;
-	color: var(--muted-foreground);
+	color: var( --muted-foreground );
 }
 
 .cliToggleTrigger {
@@ -116,52 +113,44 @@
 
 .cliTooltip {
 	max-inline-size: 280px;
-	line-height: var(--text-sm--line-height);
+	line-height: var( --text-sm--line-height );
 }
 
 .errorMessage {
-	margin-block-end: var(--space-3);
-	padding: var(--space-2) var(--space-3);
-	border: 1px solid color-mix( in srgb, var(--destructive) 35%, transparent );
-	border-radius: var(--radius-lg);
-	background: color-mix(
-		in srgb,
-		var(--destructive) 8%,
-		var(--chrome)
-	);
-	color: var(--destructive);
-	font-size: var(--text-xxs);
+	margin-block-end: var( --space-3 );
+	padding: var( --space-2 ) var( --space-3 );
+	border: 1px solid color-mix( in srgb, var( --destructive ) 35%, transparent );
+	border-radius: var( --radius-lg );
+	background: color-mix( in srgb, var( --destructive ) 8%, var( --chrome ) );
+	color: var( --destructive );
+	font-size: var( --text-xxs );
 	line-height: 20px;
 }
 
-
-
 .codeBlockCopyButton {
 	position: absolute;
-	inset-block-start: var(--space-1_5);
-	inset-inline-end: var(--space-1_5);
+	inset-block-start: var( --space-1_5 );
+	inset-inline-end: var( --space-1_5 );
 	z-index: 1;
 }
 
 .wapuuScoreHeading {
 	display: inline-flex;
 	align-items: center;
-	gap: var(--space-1);
+	gap: var( --space-1 );
 }
 
 .wapuuScoreIcon {
 	image-rendering: pixelated;
 }
 
-
 .wapuuScoreMeter {
-	gap: var(--space-2);
+	gap: var( --space-2 );
 }
 
-
 /* Signed out or offline: grey the figures, since none of them is live. */
 .usageDisabled :is( [data-slot='field-label'], [data-slot='field-legend'] ) {
-	color: var(--muted-foreground);
+	color: var( --muted-foreground );
 }
 
 /* Hatched stand-in for a meter with no figure behind it — same 135deg stripe
@@ -169,18 +158,17 @@
 .unavailableBar {
 	inline-size: 100%;
 	block-size: 4px;
-	border-radius: var(--radius-full);
+	border-radius: var( --radius-full );
 	background: repeating-linear-gradient(
 			135deg,
-			color-mix( in srgb, var(--muted-foreground) 22%, transparent ) 0
-				3px,
+			color-mix( in srgb, var( --muted-foreground ) 22%, transparent ) 0 3px,
 			transparent 3px 8px
 		),
 		transparent;
 }
 
 .meterRow {
-	gap: var(--space-2);
+	gap: var( --space-2 );
 }
 
 .meterSummary {
@@ -188,70 +176,65 @@
 	flex-wrap: wrap;
 	align-items: center;
 	justify-content: space-between;
-	gap: var(--space-1) var(--space-4);
+	gap: var( --space-1 ) var( --space-4 );
 }
 
 .meterSummary > [data-slot='field-label'] {
-	gap: var(--space-1);
+	gap: var( --space-1 );
 }
 
 .meterSummary > [data-slot='field-label'] > button {
-	margin-block: calc(var(--space-1) * -1);
+	margin-block: calc( var( --space-1 ) * -1 );
 }
 
 /* Escalation colors for the AI credits meter (80% / 90% / exhausted). The
    filters brighten the warning token toward the design's yellow and orange —
    taken as-is from the usage-interfaces exploration. */
 .meter[data-intent='warning'] [data-slot='progress-indicator'] {
-	background: var(--warning);
+	background: var( --warning );
 	filter: saturate( 2 ) brightness( 1.8 );
 }
 
 .meter[data-intent='critical'] [data-slot='progress-indicator'] {
-	background: var(--warning);
+	background: var( --warning );
 	filter: saturate( 1.6 ) brightness( 1.35 );
 }
 
 .meter[data-intent='exhausted'] [data-slot='progress-indicator'] {
-	background: var(--destructive);
+	background: var( --destructive );
 }
 
 .aiCreditsTrack {
 	block-size: 4px;
-	border-radius: var(--radius-full);
+	border-radius: var( --radius-full );
 	background: linear-gradient(
 			90deg,
-			color-mix( in srgb, var(--accent-text) 32%, transparent ),
-			color-mix( in srgb, var(--accent-text) 14%, transparent )
+			color-mix( in srgb, var( --accent-text ) 32%, transparent ),
+			color-mix( in srgb, var( --accent-text ) 14%, transparent )
 		),
 		repeating-linear-gradient(
 			135deg,
-			color-mix( in srgb, var(--accent-text) 18%, transparent ) 0 8px,
+			color-mix( in srgb, var( --accent-text ) 18%, transparent ) 0 8px,
 			transparent 8px 16px
 		),
-		color-mix( in srgb, var(--accent-text) 14%, var(--border) );
+		color-mix( in srgb, var( --accent-text ) 14%, var( --border ) );
 }
 
-
 .expiredToggle {
-	margin-inline: var(--space-4);
-	margin-block-end: var(--space-4);
+	margin-inline: var( --space-4 );
+	margin-block-end: var( --space-4 );
 }
 
-
 .previewUrl,
 .previewLink,
 .previewExpiry {
 	display: block;
 }
 
-
-
-
 .previewLink {
 	composes: truncate from '@/lib/theme/recipes.module.css';
 	max-width: 100%;
-	color: var(--accent-text);
+	color: var( --accent-text );
 	text-align: start;
 	cursor: pointer;
 }
@@ -267,28 +250,26 @@
 .previewIllustration {
 	width: 176px;
 	overflow: hidden;
-	border: 1px solid var(--border);
-	border-radius: var(--radius-xl);
-	background: var(--chrome);
-	box-shadow: var(--shadow-xs);
+	border: 1px solid var( --border );
+	border-radius: var( --radius-xl );
+	background: var( --chrome );
+	box-shadow: var( --shadow-xs );
 }
 
 .previewIllustrationBar {
 	display: flex;
 	justify-content: flex-end;
-	padding: var(--space-2) var(--space-3);
-	border-bottom: 1px solid
-		var(--border);
+	padding: var( --space-2 ) var( --space-3 );
+	border-bottom: 1px solid var( --border );
 }
 
 .previewIllustrationButton {
-	padding: var(--space-0_5) var(--space-2);
-	border: 1px solid var(--border);
-	border-radius: var(--radius-lg);
-	box-shadow: 0 0 0 3px
-		color-mix( in srgb, var(--accent) 25%, transparent );
-	font-size: var(--text-xxs);
-	font-weight: var(--font-weight-medium);
+	padding: var( --space-0_5 ) var( --space-2 );
+	border: 1px solid var( --border );
+	border-radius: var( --radius-lg );
+	box-shadow: 0 0 0 3px color-mix( in srgb, var( --accent ) 25%, transparent );
+	font-size: var( --text-xxs );
+	font-weight: var( --font-weight-medium );
 }
 
 .previewIllustration img {
@@ -299,18 +280,18 @@
 }
 
 .dialogError {
-	color: var(--destructive);
+	color: var( --destructive );
 }
 
 .pathForm {
 	display: flex;
-	gap: var(--space-2);
+	gap: var( --space-2 );
 }
 
 .keyForm {
 	display: flex;
 	align-items: center;
-	gap: var(--space-2);
+	gap: var( --space-2 );
 }
 
 .settingsControl:has( > .colorControl, > .sliderControl ) {
@@ -322,7 +303,7 @@
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
-	gap: var(--space-1_5);
+	gap: var( --space-1_5 );
 	width: 100%;
 }
 
@@ -330,7 +311,7 @@
 	flex-shrink: 0;
 	width: 24px;
 	height: 24px;
-	border-radius: var(--radius-full);
+	border-radius: var( --radius-full );
 	cursor: pointer;
 }
 
diff --git a/apps/ui/src/features/settings/site-settings-view/style.module.css b/apps/ui/src/features/settings/site-settings-view/style.module.css
index 1aa20040d0..22596476f5 100644
--- a/apps/ui/src/features/settings/site-settings-view/style.module.css
+++ b/apps/ui/src/features/settings/site-settings-view/style.module.css
@@ -1,36 +1,36 @@
 .form {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-8);
+	gap: var( --space-8 );
 }
 
 .submitError {
-	padding: var(--space-2_5) var(--space-3);
-	border-radius: var(--radius-lg);
-	border: 1px solid color-mix(in oklab, var(--destructive) 35%, transparent);
-	background: var(--destructive-surface);
-	color: var(--destructive);
-	font-size: var(--text-xs);
+	padding: var( --space-2_5 ) var( --space-3 );
+	border-radius: var( --radius-lg );
+	border: 1px solid color-mix( in oklab, var( --destructive ) 35%, transparent );
+	background: var( --destructive-surface );
+	color: var( --destructive );
+	font-size: var( --text-xs );
 }
 
 .field {
 	display: flex;
 	align-items: center;
-	gap: var(--space-1);
+	gap: var( --space-1 );
 	min-width: 224px;
 	max-width: 100%;
 }
 
-.emailInput:dir(rtl) {
+.emailInput:dir( rtl ) {
 	text-align: right;
 }
 
 .debugLogAction {
 	display: flex;
-	margin-block-start: var(--space-1);
+	margin-block-start: var( --space-1 );
 }
 
 .busy {
-	color: var(--muted-foreground);
-	font-size: var(--text-xs);
+	color: var( --muted-foreground );
+	font-size: var( --text-xs );
 }
diff --git a/apps/ui/src/features/settings/wapuu-world/style.module.css b/apps/ui/src/features/settings/wapuu-world/style.module.css
index 657a4db616..1a6b9ccf36 100644
--- a/apps/ui/src/features/settings/wapuu-world/style.module.css
+++ b/apps/ui/src/features/settings/wapuu-world/style.module.css
@@ -1,41 +1,41 @@
 .overlay {
 	position: fixed;
 	inset: 0;
-	z-index: var(--z-dialog);
+	z-index: var( --z-dialog );
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	background: color-mix(in srgb, var(--chat) 75%, transparent);
+	background: color-mix( in srgb, var( --chat ) 75%, transparent );
 }
 
 .dialog {
 	position: relative;
 	display: flex;
 	flex-direction: column;
-	border: 4px solid var(--accent);
+	border: 4px solid var( --accent );
 	border-radius: 8px;
-	box-shadow: 0 0 40px color-mix(in srgb, var(--accent) 60%, transparent);
-	background: var(--chat);
+	box-shadow: 0 0 40px color-mix( in srgb, var( --accent ) 60%, transparent );
+	background: var( --chat );
 }
 
 .titleBar {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	gap: var(--space-2);
-	padding: var(--space-1_5) var(--space-3);
-	background: var(--accent);
+	gap: var( --space-2 );
+	padding: var( --space-1_5 ) var( --space-3 );
+	background: var( --accent );
 	border-radius: 4px 4px 0 0;
 }
 
 .title {
 	display: flex;
 	align-items: center;
-	gap: var(--space-1_5);
-	color: var(--accent-foreground);
+	gap: var( --space-1_5 );
+	color: var( --accent-foreground );
 	font-family: monospace;
 	font-weight: bold;
-	font-size: var(--text-sm);
+	font-size: var( --text-sm );
 }
 
 .titleIcon {
@@ -45,20 +45,20 @@
 .titleActions {
 	display: flex;
 	align-items: center;
-	gap: var(--space-1);
-	color: color-mix(in srgb, var(--accent-foreground) 80%, transparent);
+	gap: var( --space-1 );
+	color: color-mix( in srgb, var( --accent-foreground ) 80%, transparent );
 	font-family: monospace;
-	font-size: var(--text-2xs);
+	font-size: var( --text-2xs );
 }
 
 .closeButton {
-	margin-inline-start: var(--space-2);
+	margin-inline-start: var( --space-2 );
 	padding: 1px 7px;
 	border-radius: 4px;
-	background: color-mix(in srgb, var(--accent-foreground) 20%, transparent);
-	color: var(--accent-foreground);
+	background: color-mix( in srgb, var( --accent-foreground ) 20%, transparent );
+	color: var( --accent-foreground );
 	font-family: monospace;
-	font-size: var(--text-xs);
+	font-size: var( --text-xs );
 	cursor: pointer;
 }
 
@@ -68,11 +68,11 @@
 }
 
 .controlsHint {
-	padding: var(--space-1) var(--space-3);
-	background: var(--accent);
+	padding: var( --space-1 ) var( --space-3 );
+	background: var( --accent );
 	border-radius: 0 0 4px 4px;
-	color: color-mix(in srgb, var(--accent-foreground) 80%, transparent);
+	color: color-mix( in srgb, var( --accent-foreground ) 80%, transparent );
 	font-family: monospace;
-	font-size: var(--text-2xs);
+	font-size: var( --text-2xs );
 	text-align: center;
 }
diff --git a/apps/ui/src/features/sharing/share-dialog/style.module.css b/apps/ui/src/features/sharing/share-dialog/style.module.css
index fcefb5a0a5..a3460d514a 100644
--- a/apps/ui/src/features/sharing/share-dialog/style.module.css
+++ b/apps/ui/src/features/sharing/share-dialog/style.module.css
@@ -9,33 +9,33 @@
 	inset-inline-end: -1px;
 	width: 7px;
 	height: 7px;
-	border-radius: var(--radius-full);
-	background: var(--accent);
-	box-shadow: 0 0 0 2px var(--chat);
+	border-radius: var( --radius-full );
+	background: var( --accent );
+	box-shadow: 0 0 0 2px var( --chat );
 	pointer-events: none;
 }
 
 .loading {
 	display: flex;
 	align-items: center;
-	gap: var(--space-2);
+	gap: var( --space-2 );
 }
 
 .error {
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
-	gap: var(--space-2);
-	color: var(--destructive);
+	gap: var( --space-2 );
+	color: var( --destructive );
 }
 
 .panel {
 	display: flex;
 	min-width: 0;
 	flex-direction: column;
-	gap: var(--space-2);
-	font-size: var(--text-sm);
-	line-height: var(--text-sm--line-height);
+	gap: var( --space-2 );
+	font-size: var( --text-sm );
+	line-height: var( --text-sm--line-height );
 }
 
 .previewSelect {
@@ -51,8 +51,8 @@
 	justify-content: center;
 	aspect-ratio: 16 / 10;
 	overflow: hidden;
-	border-radius: var(--radius-sm);
-	background: var(--muted);
+	border-radius: var( --radius-sm );
+	background: var( --muted );
 }
 
 .frame img {
@@ -63,7 +63,7 @@
 }
 
 .frame p {
-	color: var(--muted-foreground);
+	color: var( --muted-foreground );
 }
 
 .update {
@@ -76,33 +76,33 @@
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	gap: var(--space-2);
+	gap: var( --space-2 );
 }
 
 .expiry p {
-	color: var(--muted-foreground);
-	font-size: var(--text-xs);
+	color: var( --muted-foreground );
+	font-size: var( --text-xs );
 }
 
 .confirm {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-3);
+	gap: var( --space-3 );
 }
 
 .confirmActions {
 	display: flex;
 	justify-content: flex-end;
-	gap: var(--space-2);
+	gap: var( --space-2 );
 }
 
 .inlineForm {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-2);
+	gap: var( --space-2 );
 }
 
 .notice {
-	color: var(--muted-foreground);
-	font-size: var(--text-xs);
+	color: var( --muted-foreground );
+	font-size: var( --text-xs );
 }
diff --git a/apps/ui/src/features/sidebar/collapsed-site-switcher/style.module.css b/apps/ui/src/features/sidebar/collapsed-site-switcher/style.module.css
index 592701622f..742a4cebf8 100644
--- a/apps/ui/src/features/sidebar/collapsed-site-switcher/style.module.css
+++ b/apps/ui/src/features/sidebar/collapsed-site-switcher/style.module.css
@@ -1,6 +1,6 @@
 .popup {
 	width: 272px;
-	max-width: calc(100vw - 2 * 20px);
+	max-width: calc( 100vw - 2 * 20px );
 }
 
 .surface {
@@ -8,35 +8,35 @@
 	flex-direction: column;
 	overflow: hidden;
 	border-radius: inherit;
-	color: var(--foreground);
+	color: var( --foreground );
 }
 
 .scrollArea {
-	max-height: min(236px, calc(100vh - 80px));
+	max-height: min( 236px, calc( 100vh - 80px ) );
 	overflow-y: auto;
-	padding-block: var(--space-3);
+	padding-block: var( --space-3 );
 }
 
 /* Outranks site-list's own `.root` padding shorthand. */
 .scrollArea .siteList {
-	padding-block-end: var(--space-2);
+	padding-block-end: var( --space-2 );
 }
 
 .openSidebarCta {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	gap: var(--space-2);
+	gap: var( --space-2 );
 	flex-shrink: 0;
 	width: 100%;
-	padding-block: var(--space-3);
-	padding-inline-start: var(--space-5);
-	padding-inline-end: var(--space-3);
-	border-block-start: 1px solid var(--border);
-	font-size: var(--text-xxs);
+	padding-block: var( --space-3 );
+	padding-inline-start: var( --space-5 );
+	padding-inline-end: var( --space-3 );
+	border-block-start: 1px solid var( --border );
+	font-size: var( --text-xxs );
 	cursor: pointer;
 }
 
 .openSidebarCta:hover {
-	background-color: var(--hover);
+	background-color: var( --hover );
 }
diff --git a/apps/ui/src/features/sidebar/reorderable-list/style.module.css b/apps/ui/src/features/sidebar/reorderable-list/style.module.css
index a3873b16be..ec6914c005 100644
--- a/apps/ui/src/features/sidebar/reorderable-list/style.module.css
+++ b/apps/ui/src/features/sidebar/reorderable-list/style.module.css
@@ -21,7 +21,7 @@
 .itemWrapper[data-drop-position]::after {
 	position: absolute;
 	z-index: 1;
-	background-color: var(--ring);
+	background-color: var( --ring );
 	pointer-events: none;
 	content: '';
 }
@@ -29,6 +29,7 @@
 .itemWrapper[data-drop-position]::before {
 	inset-inline: 0;
 	height: 2px;
+	/* eslint-disable-next-line studio/use-theme-tokens -- the drop line's rounded ends, as in the rebuild. */
 	border-radius: 1px;
 	translate: 0 -50%;
 }
@@ -37,7 +38,7 @@
 	inset-inline-start: 0;
 	width: 8px;
 	height: 8px;
-	border-radius: var(--radius-full);
+	border-radius: var( --radius-full );
 	translate: -50% -50%;
 }
 
@@ -53,7 +54,7 @@
 
 .dragPreview {
 	position: fixed;
-	z-index: var(--z-drag);
+	z-index: var( --z-drag );
 	pointer-events: none;
 	will-change: inset-block-start;
 }
diff --git a/apps/ui/src/features/sidebar/sidebar-header/style.module.css b/apps/ui/src/features/sidebar/sidebar-header/style.module.css
index c049ef4518..ef6742de9f 100644
--- a/apps/ui/src/features/sidebar/sidebar-header/style.module.css
+++ b/apps/ui/src/features/sidebar/sidebar-header/style.module.css
@@ -2,20 +2,20 @@
    Linux) and the sidebar toggle at its start, past the macOS traffic lights. */
 .root {
 	composes: bandEdge from '@/lib/theme/recipes.module.css';
-	--toggle-start: var(--traffic-light-space);
+	--toggle-start: var( --traffic-light-space );
 	display: flex;
 	align-items: center;
-	gap: var(--space-1);
-	height: var(--band-height);
+	gap: var( --space-1 );
+	height: var( --band-height );
 	flex-shrink: 0;
-	padding-inline: var(--traffic-light-space) var(--space-3);
+	padding-inline: var( --traffic-light-space ) var( --space-3 );
 	-webkit-app-region: drag;
 	/* Stay pinned while the sidebar scrolls. Opaque background so
 	   scrolling content doesn't bleed through. */
 	position: sticky;
 	top: 0;
 	z-index: 1;
-	background-color: var(--studio-sidebar-bg);
+	background-color: var( --studio-sidebar-bg );
 }
 
 /* No traffic lights to clear: non-macOS, the browser (`studio ui`), or macOS
@@ -23,7 +23,7 @@
 .flush {
 	--toggle-start: 12px;
 
-	padding-inline-start: var(--space-3);
+	padding-inline-start: var( --space-3 );
 }
 
 /* The toggle stays in the window's corner while the sidebar slides out, and
@@ -31,20 +31,20 @@
    slide ends. */
 .toggleSlot {
 	display: flex;
-	width: var(--control-size);
-	height: var(--control-size);
+	width: var( --control-size );
+	height: var( --control-size );
 	flex-shrink: 0;
 }
 
 .toggleSlot:first-child > * {
 	position: fixed;
-	top: calc((var(--band-height) - var(--control-size)) / 2);
-	inset-inline-start: var(--toggle-start);
+	top: calc( ( var( --band-height ) - var( --control-size ) ) / 2 );
+	inset-inline-start: var( --toggle-start );
 }
 
 .toggleSlot[data-sidebar-open='false'] > * {
 	visibility: hidden;
-	transition: visibility 0s var(--motion-duration-layout);
+	transition: visibility 0s var( --motion-duration-layout );
 }
 
 .root > * {
diff --git a/apps/ui/src/features/sidebar/sidebar-layout/style.module.css b/apps/ui/src/features/sidebar/sidebar-layout/style.module.css
index 7d705deb8f..58e5a5e7f9 100644
--- a/apps/ui/src/features/sidebar/sidebar-layout/style.module.css
+++ b/apps/ui/src/features/sidebar/sidebar-layout/style.module.css
@@ -1,22 +1,22 @@
 .root {
 	/* The sidebar and its sticky header/footer share one surface. */
-	--studio-sidebar-bg: var(--chrome);
+	--studio-sidebar-bg: var( --chrome );
 
 	position: relative;
 	display: flex;
 	height: 100vh;
 	overflow: hidden;
-	background-color: var(--chat);
+	background-color: var( --chat );
 }
 
 .sidebar {
-	width: var(--sidebar-width, 320px);
+	width: var( --sidebar-width, 320px );
 	/* Both bounds are owned by useResizablePanel, which clamps --sidebar-width
 	   on every path. CSS min/max widths would compete with that single source
 	   of truth and can crush the sidebar below its 240px floor on narrow windows. */
 	min-width: 0;
 	flex-shrink: 0;
-	background-color: var(--studio-sidebar-bg);
+	background-color: var( --studio-sidebar-bg );
 	display: flex;
 	flex-direction: column;
 	/* The sidebar itself scrolls so the scrollbar gutter affects the
@@ -27,7 +27,7 @@
 	scrollbar-width: none;
 	-webkit-app-region: drag;
 	/* Eases with the frame when the width resets, so its rows don't snap ahead. */
-	transition: width var(--motion-duration-layout) var(--motion-ease-layout);
+	transition: width var( --motion-duration-layout ) var( --motion-ease-layout );
 }
 
 /* Collapsing animates this frame's width while the sidebar inside keeps its
@@ -38,9 +38,9 @@
 	display: flex;
 	justify-content: flex-end;
 	flex-shrink: 0;
-	width: var(--sidebar-width, 320px);
+	width: var( --sidebar-width, 320px );
 	overflow: hidden;
-	transition: width var(--motion-duration-layout) var(--motion-ease-layout);
+	transition: width var( --motion-duration-layout ) var( --motion-ease-layout );
 }
 
 /* While dragging or arrow-keying the handle the width updates every step; the
@@ -49,7 +49,7 @@
    preview-split-frame). */
 .sidebarResizing,
 .sidebarResizing .sidebar,
-.root:has(> .resizeHandle:focus-visible) :is(.sidebarFrame, .sidebar) {
+.root:has( > .resizeHandle:focus-visible ) :is( .sidebarFrame, .sidebar ) {
 	transition: none;
 }
 
@@ -61,8 +61,8 @@
 	position: sticky;
 	bottom: 0;
 	z-index: 1;
-	padding-top: var(--space-6);
-	background: linear-gradient(to bottom, transparent, var(--studio-sidebar-bg) 32px);
+	padding-top: var( --space-6 );
+	background: linear-gradient( to bottom, transparent, var( --studio-sidebar-bg ) 32px );
 	pointer-events: none;
 	-webkit-app-region: no-drag;
 }
@@ -73,14 +73,14 @@
 
 /* The sidebar's edge below the band, in its own last column. It slides out
    with the frame, which clips it once collapsed. */
-.sidebarFrame:not(.sidebarOverlay)::after {
+.sidebarFrame:not( .sidebarOverlay )::after {
 	content: '';
 	position: absolute;
-	top: var(--band-height);
+	top: var( --band-height );
 	bottom: 0;
 	inset-inline-end: 0;
 	width: 1px;
-	background-color: var(--border);
+	background-color: var( --border );
 	pointer-events: none;
 }
 
@@ -92,21 +92,21 @@
    that keeps its toggle, instead of taking the content's width. */
 .sidebarOverlay {
 	position: absolute;
-	top: var(--band-height);
+	top: var( --band-height );
 	bottom: 0;
 	inset-inline-start: 0;
-	z-index: var(--z-sidebar);
+	z-index: var( --z-sidebar );
 }
 
 .sidebarOverlay .sidebar {
-	border-inline-end: 1px solid var(--border);
+	border-inline-end: 1px solid var( --border );
 }
 
 /* Clicking anywhere else closes the overlay. */
 .overlayBackdrop {
 	position: absolute;
-	inset: var(--band-height) 0 0;
-	z-index: calc(var(--z-sidebar) - 1);
+	inset: var( --band-height ) 0 0;
+	z-index: calc( var( --z-sidebar ) - 1 );
 	-webkit-app-region: no-drag;
 }
 
@@ -121,8 +121,8 @@
 
 /* Above the panels so the band's separator reads across them. */
 .main::before {
-	z-index: var(--z-band);
-	transition: opacity var(--motion-duration-layout) var(--motion-ease-layout);
+	z-index: var( --z-band );
+	transition: opacity var( --motion-duration-layout ) var( --motion-ease-layout );
 }
 
 .mainUndocked::before {
@@ -135,25 +135,24 @@
    above main (a later flex sibling) so its focus line sits on the border. */
 .resizeHandle {
 	position: relative;
-	z-index: var(--z-overlay);
+	z-index: var( --z-overlay );
 	flex-shrink: 0;
-	margin-inline-end: calc(var(--space-2) * -1);
+	margin-inline-end: calc( var( --space-2 ) * -1 );
 	justify-content: flex-start;
 }
 
 .resizeHandle span {
-	margin-block-start: var(--band-height);
+	margin-block-start: var( --band-height );
 }
 
 /* Hovering or dragging the handle darkens the column edge. */
-.root:has(> .resizeHandle:hover) .sidebarFrame::after,
+.root:has( > .resizeHandle:hover ) .sidebarFrame::after,
 .resizeHandle:hover + .main::before,
 .sidebarResizing::after,
 .sidebarResizing ~ .main::before {
-	background-color: color-mix(in oklab, var(--foreground) 15%, transparent);
+	background-color: color-mix( in oklab, var( --foreground ) 15%, transparent );
 }
 
 .sidebarCards {
-	padding: 0 var(--space-2) var(--space-2);
+	padding: 0 var( --space-2 ) var( --space-2 );
 }
-
diff --git a/apps/ui/src/features/sidebar/sidebar-toggle/style.module.css b/apps/ui/src/features/sidebar/sidebar-toggle/style.module.css
index 2cd027e6f2..29193cde03 100644
--- a/apps/ui/src/features/sidebar/sidebar-toggle/style.module.css
+++ b/apps/ui/src/features/sidebar/sidebar-toggle/style.module.css
@@ -6,14 +6,14 @@
 }
 
 /* Open, it reads dimmed rather than pressed. */
-.root [aria-expanded='true']:not(:hover) {
+.root [aria-expanded='true']:not( :hover ) {
 	background-color: transparent;
 }
 
 /* The drawer icon depicts the sidebar edge; mirror it when the sidebar sits
    on the right. */
-.root:dir(rtl) svg {
-	transform: scaleX(-1);
+.root:dir( rtl ) svg {
+	transform: scaleX( -1 );
 }
 
 /* The negative margin cancels the header's gap while the slot is empty. */
@@ -21,21 +21,21 @@
 	display: inline-flex;
 	flex-shrink: 0;
 	width: 0;
-	margin-inline-end: calc(-1 * var(--space-1));
+	margin-inline-end: calc( -1 * var( --space-1 ) );
 	overflow: hidden;
 	opacity: 0;
 	transition:
-		width var(--motion-duration-layout) var(--motion-ease-layout),
-		margin var(--motion-duration-layout) var(--motion-ease-layout);
+		width var( --motion-duration-layout ) var( --motion-ease-layout ),
+		margin var( --motion-duration-layout ) var( --motion-ease-layout );
 }
 
 .headerSlotVisible {
-	width: var(--control-size);
+	width: var( --control-size );
 	margin-inline-end: 0;
 	overflow: visible;
 	opacity: 1;
 	transition:
-		width var(--motion-duration-layout) var(--motion-ease-layout),
-		margin var(--motion-duration-layout) var(--motion-ease-layout),
-		opacity 0s var(--motion-duration-layout);
+		width var( --motion-duration-layout ) var( --motion-ease-layout ),
+		margin var( --motion-duration-layout ) var( --motion-ease-layout ),
+		opacity 0s var( --motion-duration-layout );
 }
diff --git a/apps/ui/src/features/sidebar/site-list/site-activity-indicator/style.module.css b/apps/ui/src/features/sidebar/site-list/site-activity-indicator/style.module.css
index abf8a8db56..461130ab9e 100644
--- a/apps/ui/src/features/sidebar/site-list/site-activity-indicator/style.module.css
+++ b/apps/ui/src/features/sidebar/site-list/site-activity-indicator/style.module.css
@@ -3,31 +3,36 @@
 	place-items: center;
 	flex: 0 0 0;
 	inline-size: 0;
-	block-size: var(--site-list-chat-status-size);
+	block-size: var( --site-list-chat-status-size );
 	opacity: 0;
 	overflow: visible;
 	pointer-events: none;
-	transform: scale(0.75);
-	transition: inline-size 160ms ease, flex-basis 160ms ease, margin-inline-start 160ms ease,
-		margin-inline-end 160ms ease, opacity var(--motion-duration-feedback) ease, transform 160ms ease;
+	transform: scale( 0.75 );
+	transition:
+		inline-size 160ms ease,
+		flex-basis 160ms ease,
+		margin-inline-start 160ms ease,
+		margin-inline-end 160ms ease,
+		opacity var( --motion-duration-feedback ) ease,
+		transform 160ms ease;
 }
 
 .siteAgentActivitySlotVisible {
-	flex-basis: var(--site-list-chat-status-size);
-	inline-size: var(--site-list-chat-status-size);
-	margin-inline-start: var(--site-list-chat-status-start-offset);
-	margin-inline-end: var(--site-list-chat-status-gap);
+	flex-basis: var( --site-list-chat-status-size );
+	inline-size: var( --site-list-chat-status-size );
+	margin-inline-start: var( --site-list-chat-status-start-offset );
+	margin-inline-end: var( --site-list-chat-status-gap );
 	opacity: 1;
 	pointer-events: auto;
-	transform: scale(1);
+	transform: scale( 1 );
 }
 
 .siteAgentActivity {
 	grid-row-start: 1;
 	grid-column-start: 1;
 	position: relative;
-	block-size: var(--site-list-chat-status-size);
-	inline-size: var(--site-list-chat-status-size);
+	block-size: var( --site-list-chat-status-size );
+	inline-size: var( --site-list-chat-status-size );
 }
 
 .siteAgentActivityTooltipTrigger {
@@ -38,7 +43,7 @@
 .siteAgentActivitySync {
 	display: inline-grid;
 	place-items: center;
-	color: var(--site-list-sync-indicator-bg);
+	color: var( --site-list-sync-indicator-bg );
 }
 
 .siteAgentActivitySyncDots {
@@ -56,7 +61,7 @@
 .siteAgentActivitySyncDot {
 	inline-size: 3px;
 	block-size: 3px;
-	border-radius: var(--radius-full);
+	border-radius: var( --radius-full );
 	background-color: currentColor;
 	animation-name: siteAgentSyncDotBounce;
 	animation-duration: 760ms;
@@ -64,28 +69,28 @@
 	animation-timing-function: ease-in-out;
 }
 
-.siteAgentActivitySyncDot:nth-child(2) {
+.siteAgentActivitySyncDot:nth-child( 2 ) {
 	animation-delay: 90ms;
 }
 
-.siteAgentActivitySyncDot:nth-child(3) {
+.siteAgentActivitySyncDot:nth-child( 3 ) {
 	animation-delay: 180ms;
 }
 
 @keyframes siteAgentSyncHalfTurn {
 	0%,
 	38% {
-		transform: rotate(0deg);
+		transform: rotate( 0deg );
 	}
 
 	48%,
 	88% {
-		transform: rotate(180deg);
+		transform: rotate( 180deg );
 	}
 
 	98%,
 	100% {
-		transform: rotate(360deg);
+		transform: rotate( 360deg );
 	}
 }
 
@@ -93,16 +98,16 @@
 	0%,
 	100% {
 		opacity: 0.42;
-		transform: translateY(1px) scale(0.72);
+		transform: translateY( 1px ) scale( 0.72 );
 	}
 
 	45% {
 		opacity: 1;
-		transform: translateY(-2px) scale(1);
+		transform: translateY( -2px ) scale( 1 );
 	}
 }
 
-@media (prefers-reduced-motion: reduce) {
+@media ( prefers-reduced-motion: reduce ) {
 	.siteAgentActivitySlot,
 	.siteAgentActivitySyncDot,
 	.siteAgentActivitySyncDots {
diff --git a/apps/ui/src/features/sidebar/site-list/style.module.css b/apps/ui/src/features/sidebar/site-list/style.module.css
index 2f0775475a..e8920c7c33 100644
--- a/apps/ui/src/features/sidebar/site-list/style.module.css
+++ b/apps/ui/src/features/sidebar/site-list/style.module.css
@@ -5,23 +5,24 @@
 	--site-list-row-padding: 8px;
 	--site-list-icon-gap: 6px;
 	/* Where a row's text starts, past its padding and icon. */
-	--site-list-text-inset: calc(var(--site-list-row-padding) + 16px + var(--site-list-icon-gap));
+	--site-list-text-inset: calc(
+		var( --site-list-row-padding ) + 16px + var( --site-list-icon-gap )
+	);
 	--site-list-action-size: 32px;
 	--site-list-chat-status-size: 14px;
 	--site-list-chat-status-start-offset: 0px;
-	--site-list-chat-status-gap: var(--site-list-icon-gap);
-	--site-list-sync-indicator-bg: var(--status-sync);
+	--site-list-chat-status-gap: var( --site-list-icon-gap );
+	--site-list-sync-indicator-bg: var( --status-sync );
 	/* Row hover and selection. Declared here so every mount point gets it,
 	   resolved against whatever theme scope wraps the list. */
-	--sidebar-row-background: var(--hover);
+	--sidebar-row-background: var( --hover );
 
-	padding: var(--space-3) var(--space-3)
-		var(--space-5);
+	padding: var( --space-3 ) var( --space-3 ) var( --space-5 );
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-1);
-	font-size: var(--text-sm);
-	line-height: var(--text-sm--line-height);
+	gap: var( --space-1 );
+	font-size: var( --text-sm );
+	line-height: var( --text-sm--line-height );
 	user-select: none;
 	-webkit-app-region: no-drag;
 }
@@ -37,16 +38,17 @@
    carry only the site rows' visual treatment. */
 
 .siteDragWrapper {
-	border-radius: var(--radius-md);
+	border-radius: var( --radius-md );
 }
 
 .siteDragPreview {
 	opacity: 0.95;
-	filter: drop-shadow(0 6px 14px rgb(0 0 0 / 14%));
+	/* eslint-disable-next-line studio/use-theme-tokens -- the dragged row's shadow. */
+	filter: drop-shadow( 0 6px 14px rgb( 0 0 0 / 14% ) );
 }
 
 .siteDragPreview .siteHeader {
-	background-color: var(--sidebar-row-background);
+	background-color: var( --sidebar-row-background );
 }
 
 .site {
@@ -54,31 +56,31 @@
 	flex-direction: column;
 	/* Keep scrollIntoView targets clear of the sidebar's sticky header and
 	   footer, which paint over the scrollport's edges. */
-	scroll-margin-block: var(--space-16);
+	scroll-margin-block: var( --space-16 );
 }
 
 .siteHeader {
 	position: relative;
 	display: flex;
 	align-items: center;
-	gap: var(--site-list-icon-gap);
+	gap: var( --site-list-icon-gap );
 	min-width: 0;
-	height: var(--site-list-row-height);
-	padding-inline: var(--site-list-row-padding);
-	border-radius: var(--radius-md);
-	color: var(--foreground);
+	height: var( --site-list-row-height );
+	padding-inline: var( --site-list-row-padding );
+	border-radius: var( --radius-md );
+	color: var( --foreground );
 	cursor: pointer;
 }
 
 .siteHeader:hover,
-.siteHeader:has(:focus-visible),
-.siteActive:not(.siteWithChats) .siteHeader,
+.siteHeader:has( :focus-visible ),
+.siteActive:not( .siteWithChats ) .siteHeader,
 .siteContextActive .siteHeader {
-	background-color: var(--sidebar-row-background);
+	background-color: var( --sidebar-row-background );
 }
 
-.siteHeader:has(.siteToggle:focus-visible) {
-	box-shadow: inset 0 0 0 2px var(--ring);
+.siteHeader:has( .siteToggle:focus-visible ) {
+	box-shadow: inset 0 0 0 2px var( --ring );
 }
 
 .siteToggle:focus-visible {
@@ -120,9 +122,9 @@
 
 .siteName {
 	composes: truncate from '@/lib/theme/recipes.module.css';
-	--shimmer-highlight: var(--muted-foreground);
+	--shimmer-highlight: var( --muted-foreground );
 
-	color: var(--foreground);
+	color: var( --foreground );
 	max-width: 100%;
 }
 
@@ -131,10 +133,10 @@
    stays visible. The row's text makes room for them. */
 .siteActions {
 	position: absolute;
-	inset-block-start: var(--space-0_5);
-	inset-inline-end: var(--space-0_5);
+	inset-block-start: var( --space-0_5 );
+	inset-inline-end: var( --space-0_5 );
 	display: flex;
-	gap: var(--space-0_5);
+	gap: var( --space-0_5 );
 }
 
 .siteActions .rowAction {
@@ -142,23 +144,23 @@
 }
 
 .siteHeader:hover .rowAction,
-.siteHeader:has(:focus-visible) .rowAction,
+.siteHeader:has( :focus-visible ) .rowAction,
 .siteHeader[data-popup-open] .rowAction,
-.siteActive:not(.siteWithChats) .rowAction,
+.siteActive:not( .siteWithChats ) .rowAction,
 .siteContextActive .rowAction,
 .siteStatus[aria-busy='true'] {
 	opacity: 1;
 }
 
 .siteHeader:hover,
-.siteHeader:has(:focus-visible),
+.siteHeader:has( :focus-visible ),
 .siteHeader[data-popup-open],
-.siteActive:not(.siteWithChats) .siteHeader,
+.siteActive:not( .siteWithChats ) .siteHeader,
 .siteContextActive .siteHeader {
-	padding-inline-end: calc(2 * var(--site-list-action-size) + var(--site-list-row-padding));
+	padding-inline-end: calc( 2 * var( --site-list-action-size ) + var( --site-list-row-padding ) );
 }
 
-@media (prefers-reduced-motion: reduce) {
+@media ( prefers-reduced-motion: reduce ) {
 	.skeleton {
 		animation: none;
 		transition: none;
@@ -170,25 +172,25 @@
 }
 
 .empty {
-	padding: var(--space-1) var(--site-list-row-padding);
-	color: var(--muted-foreground);
+	padding: var( --space-1 ) var( --site-list-row-padding );
+	color: var( --muted-foreground );
 }
 
 .group {
 	display: flex;
 	flex-direction: column;
-	padding-block-start: var(--space-1);
+	padding-block-start: var( --space-1 );
 }
 
 .group[data-open] {
-	padding-block-end: var(--space-3);
+	padding-block-end: var( --space-3 );
 }
 
 .groupHeader {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	height: var(--site-list-row-height);
+	height: var( --site-list-row-height );
 }
 
 /* The label reads muted; its chevron points down when open and shows on hover,
@@ -197,30 +199,30 @@
 	display: inline-flex;
 	flex: 1;
 	align-items: center;
-	gap: var(--space-1);
+	gap: var( --space-1 );
 	height: 100%;
-	padding: 0 var(--site-list-row-padding);
-	border-radius: var(--radius-md);
-	color: var(--muted-foreground);
-	font-weight: var(--font-weight-medium);
+	padding: 0 var( --site-list-row-padding );
+	border-radius: var( --radius-md );
+	color: var( --muted-foreground );
+	font-weight: var( --font-weight-medium );
 	cursor: pointer;
-	transition: color var(--motion-duration-feedback) ease;
+	transition: color var( --motion-duration-feedback ) ease;
 }
 
 .groupToggle:hover {
-	color: var(--foreground);
+	color: var( --foreground );
 }
 
 .groupToggle:focus-visible {
-	outline: var(--focus-width) solid var(--ring);
+	outline: var( --focus-width ) solid var( --ring );
 	outline-offset: -2px;
 }
 
 .groupChevron {
 	opacity: 0;
 	transition:
-		rotate var(--motion-duration-feedback) ease,
-		opacity var(--motion-duration-feedback) ease;
+		rotate var( --motion-duration-feedback ) ease,
+		opacity var( --motion-duration-feedback ) ease;
 }
 
 .groupToggle[aria-expanded='true'] .groupChevron {
@@ -239,7 +241,7 @@
 }
 
 .site .chats {
-	padding-block: 1px var(--space-2);
+	padding-block: 1px var( --space-2 );
 }
 
 .groupActions {
@@ -248,38 +250,38 @@
 
 /* Show more and Retry loading chats. */
 .chats .mutedRow {
-	color: var(--muted-foreground);
+	color: var( --muted-foreground );
 }
 
 .chats .mutedRow:hover {
-	background-color: var(--sidebar-row-background);
-	color: var(--foreground);
+	background-color: var( --sidebar-row-background );
+	color: var( --foreground );
 }
 
 .site .mutedRow {
 	position: relative;
-	padding-inline-start: var(--site-list-text-inset);
+	padding-inline-start: var( --site-list-text-inset );
 }
 
 .mutedRow .rowIcon {
 	position: absolute;
-	inset-inline-start: var(--site-list-row-padding);
+	inset-inline-start: var( --site-list-row-padding );
 }
 
 .skeletonRow {
 	display: flex;
 	align-items: center;
-	gap: var(--site-list-icon-gap);
-	height: var(--site-list-row-height);
-	padding-inline: var(--site-list-row-padding);
+	gap: var( --site-list-icon-gap );
+	height: var( --site-list-row-height );
+	padding-inline: var( --site-list-row-padding );
 }
 
 .skeleton {
 	flex: 1;
 	height: 16px;
-	border-radius: var(--radius-md);
-	background-color: var(--muted);
-	animation: global(studio-pulse) 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+	border-radius: var( --radius-md );
+	background-color: var( --muted );
+	animation: global( studio-pulse ) 2s cubic-bezier( 0.4, 0, 0.6, 1 ) infinite;
 }
 
 .skeleton:first-child {
@@ -289,35 +291,35 @@
 
 .skeletonLabel.skeletonLabel {
 	width: 36px;
-	margin-inline: var(--site-list-row-padding);
+	margin-inline: var( --site-list-row-padding );
 }
 
 .chatRow {
 	position: relative;
 	display: flex;
 	align-items: center;
-	border-radius: var(--radius-md);
+	border-radius: var( --radius-md );
 }
 
 .chatRow:hover,
 .chatRow[data-popup-open],
 .chatActive {
-	background-color: var(--sidebar-row-background);
+	background-color: var( --sidebar-row-background );
 }
 
 .chat {
 	flex: 1 1 auto;
-	gap: var(--site-list-icon-gap);
-	height: var(--site-list-row-height);
+	gap: var( --site-list-icon-gap );
+	height: var( --site-list-row-height );
 	min-width: 0;
-	padding-inline: var(--site-list-row-padding);
-	border-radius: var(--radius-md);
-	color: var(--foreground);
+	padding-inline: var( --site-list-row-padding );
+	border-radius: var( --radius-md );
+	color: var( --foreground );
 	font: inherit;
 }
 
 .chatNested .chat {
-	padding-inline-start: var(--site-list-text-inset);
+	padding-inline-start: var( --site-list-text-inset );
 }
 
 .rowIcon {
@@ -326,27 +328,27 @@
 
 .chatActions {
 	position: absolute;
-	inset-inline-end: var(--space-0_5);
+	inset-inline-end: var( --space-0_5 );
 	display: flex;
 	opacity: 0;
-	transition: opacity var(--motion-duration-surface) var(--motion-ease-enter);
+	transition: opacity var( --motion-duration-surface ) var( --motion-ease-enter );
 }
 
 .chatRow:hover .chatActions,
-.chatRow:has(:focus-visible) .chatActions,
+.chatRow:has( :focus-visible ) .chatActions,
 .chatRow[data-popup-open] .chatActions,
-.chatActive:not(.chatNested) .chatActions {
+.chatActive:not( .chatNested ) .chatActions {
 	opacity: 1;
 }
 
-.chatRow:has(.chatActions):is(:hover, :has(:focus-visible), [data-popup-open]) .chat,
-.chatActive:not(.chatNested):has(.chatActions) .chat {
-	padding-inline-end: calc(2 * var(--site-list-action-size) + var(--site-list-row-padding));
+.chatRow:has( .chatActions ):is( :hover, :has( :focus-visible ), [data-popup-open] ) .chat,
+.chatActive:not( .chatNested ):has( .chatActions ) .chat {
+	padding-inline-end: calc( 2 * var( --site-list-action-size ) + var( --site-list-row-padding ) );
 }
 
 .chatTitle {
 	composes: truncate from '@/lib/theme/recipes.module.css';
-	--shimmer-highlight: var(--muted-foreground);
+	--shimmer-highlight: var( --muted-foreground );
 
 	flex: 1 1 auto;
 	min-width: 0;
@@ -356,19 +358,19 @@
 /* Sits in the archive button's slot, which takes over on hover. */
 .unreadDot {
 	position: absolute;
-	inset-inline-end: calc(var(--space-0_5) + (var(--site-list-action-size) - 7px) / 2);
+	inset-inline-end: calc( var( --space-0_5 ) + ( var( --site-list-action-size ) - 7px ) / 2 );
 	width: 7px;
 	height: 7px;
-	border-radius: var(--radius-full);
-	background-color: var(--accent);
+	border-radius: var( --radius-full );
+	background-color: var( --accent );
 }
 
-.chat:has(.unreadDot) {
-	padding-inline-end: calc(var(--site-list-action-size) + var(--site-list-row-padding));
+.chat:has( .unreadDot ) {
+	padding-inline-end: calc( var( --site-list-action-size ) + var( --site-list-row-padding ) );
 }
 
 .chatRow:hover .unreadDot,
-.chatRow:has(:focus-visible) .unreadDot,
+.chatRow:has( :focus-visible ) .unreadDot,
 .chatRow[data-popup-open] .unreadDot {
 	opacity: 0;
 }
@@ -380,10 +382,10 @@
 
 .siteHeader[data-selected],
 .chatRow[data-selected] {
-	background-color: var(--sidebar-row-background);
+	background-color: var( --sidebar-row-background );
 }
 
 /* While several rows are selected, their hover actions step aside. */
-.selection[data-selecting] :is(.chatActions, .siteActions) {
+.selection[data-selecting] :is( .chatActions, .siteActions ) {
 	visibility: hidden;
 }
diff --git a/apps/ui/src/features/sites/add-site-dialog/blueprint-gallery.module.css b/apps/ui/src/features/sites/add-site-dialog/blueprint-gallery.module.css
index 4a7dccf9e9..dbb17564da 100644
--- a/apps/ui/src/features/sites/add-site-dialog/blueprint-gallery.module.css
+++ b/apps/ui/src/features/sites/add-site-dialog/blueprint-gallery.module.css
@@ -1,34 +1,34 @@
 .root {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-6);
+	gap: var( --space-6 );
 }
 
 .notice {
-	color: var(--muted-foreground);
+	color: var( --muted-foreground );
 }
 
 .grid {
 	display: grid;
 	grid-template-columns: 1fr;
-	gap: var(--space-7) var(--space-6);
+	gap: var( --space-7 ) var( --space-6 );
 }
 
 @container (min-width: 384px) {
 	.grid {
-		grid-template-columns: repeat(2, minmax(0, 1fr));
+		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
 	}
 }
 
 .card {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-2);
+	gap: var( --space-2 );
 	min-width: 0;
 	border: 1px solid transparent;
-	color: var(--foreground);
-	font-size: var(--text-xs);
-	font-weight: var(--font-weight-medium);
+	color: var( --foreground );
+	font-size: var( --text-xs );
+	font-weight: var( --font-weight-medium );
 	text-align: start;
 	cursor: pointer;
 }
@@ -43,17 +43,17 @@
 }
 
 .image {
-	transition: opacity var(--motion-duration-layout);
+	transition: opacity var( --motion-duration-layout );
 }
 
 .thumbnail {
 	position: relative;
 	display: block;
-	border-radius: var(--radius-sm);
+	border-radius: var( --radius-sm );
 }
 
-.card:focus-visible :is(.thumbnail, .blank) {
-	outline: var(--focus-width) solid var(--ring);
+.card:focus-visible :is( .thumbnail, .blank ) {
+	outline: var( --focus-width ) solid var( --ring );
 	outline-offset: 2px;
 }
 
@@ -70,24 +70,24 @@
 
 .blank::after {
 	box-shadow: none;
-	border: 1px dotted var(--border);
+	border: 1px dotted var( --border );
 }
 
 .card:hover .blank {
-	background: color-mix(in oklab, var(--accent) 10%, transparent);
+	background: color-mix( in oklab, var( --accent ) 10%, transparent );
 }
 
 .card:hover .blank::after {
-	border: 2px solid var(--ring);
+	border: 2px solid var( --ring );
 }
 
-.card:hover:has(.blank) {
-	color: var(--accent-text);
+.card:hover:has( .blank ) {
+	color: var( --accent-text );
 }
 
 .card:hover .thumbnail [data-slot='preview-frame'],
 .card:focus-visible .thumbnail [data-slot='preview-frame'] {
-	background: var(--accent);
+	background: var( --accent );
 }
 
 .card:hover .image,
@@ -105,7 +105,7 @@
 	pointer-events: none;
 }
 
-@media (hover: hover) {
+@media ( hover: hover ) {
 	.action {
 		opacity: 0;
 	}
@@ -120,17 +120,17 @@
 	display: flex;
 	align-items: center;
 	height: 32px;
-	padding: 0 var(--space-2_5);
-	border-radius: var(--radius-md);
-	background: var(--accent);
-	color: var(--accent-foreground);
-	font-size: var(--text-xs);
-	font-weight: var(--font-weight-medium);
-	line-height: var(--text-xs--line-height);
+	padding: 0 var( --space-2_5 );
+	border-radius: var( --radius-md );
+	background: var( --accent );
+	color: var( --accent-foreground );
+	font-size: var( --text-xs );
+	font-weight: var( --font-weight-medium );
+	line-height: var( --text-xs--line-height );
 }
 
 .details {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-6);
+	gap: var( --space-6 );
 }
diff --git a/apps/ui/src/features/sites/add-site-dialog/connect-panel.module.css b/apps/ui/src/features/sites/add-site-dialog/connect-panel.module.css
index 145a8616cd..7df75db7ef 100644
--- a/apps/ui/src/features/sites/add-site-dialog/connect-panel.module.css
+++ b/apps/ui/src/features/sites/add-site-dialog/connect-panel.module.css
@@ -1,62 +1,62 @@
 .page {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-6);
+	gap: var( --space-6 );
 	width: 100%;
 	max-width: 448px;
 	margin-inline: auto;
-	padding-block: var(--space-4);
+	padding-block: var( --space-4 );
 }
 
 .intro {
-	color: var(--muted-foreground);
+	color: var( --muted-foreground );
 }
 
 .signedOut {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-6);
+	gap: var( --space-6 );
 }
 
 .benefits {
 	display: grid;
-	gap: var(--space-3);
-	color: var(--muted-foreground);
+	gap: var( --space-3 );
+	color: var( --muted-foreground );
 }
 
 .benefits li {
 	display: flex;
 	align-items: center;
-	gap: var(--space-3);
+	gap: var( --space-3 );
 }
 
 .benefits svg {
 	flex: none;
-	color: var(--accent-text);
+	color: var( --accent-text );
 }
 
 .state {
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
-	gap: var(--space-3);
+	gap: var( --space-3 );
 }
 
 .state h2 {
-	font-size: var(--text-sm);
-	font-weight: var(--font-weight-medium);
+	font-size: var( --text-sm );
+	font-weight: var( --font-weight-medium );
 }
 
 .state p {
 	margin: 0;
-	color: var(--muted-foreground);
+	color: var( --muted-foreground );
 }
 
 .siteControls {
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
-	gap: var(--space-2);
+	gap: var( --space-2 );
 }
 
 .search {
@@ -66,53 +66,53 @@
 .helperLinks {
 	display: flex;
 	align-items: center;
-	gap: var(--space-0_5);
-	color: var(--muted-foreground);
+	gap: var( --space-0_5 );
+	color: var( --muted-foreground );
 }
 
 .helperLinks button {
-	padding-inline: var(--space-0_5);
+	padding-inline: var( --space-0_5 );
 }
 
 .sections {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-8);
+	gap: var( --space-8 );
 }
 
 .section {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-3);
+	gap: var( --space-3 );
 }
 
 .sectionHeader h2 {
-	font-size: var(--text-sm);
-	font-weight: var(--font-weight-medium);
+	font-size: var( --text-sm );
+	font-weight: var( --font-weight-medium );
 }
 
 .sectionHeader p {
-	margin: var(--space-0_5) 0 0;
-	color: var(--muted-foreground);
-	font-size: var(--text-xs);
+	margin: var( --space-0_5 ) 0 0;
+	color: var( --muted-foreground );
+	font-size: var( --text-xs );
 }
 
 .siteList {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-2);
+	gap: var( --space-2 );
 }
 
 .site {
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
-	gap: var(--space-1);
+	gap: var( --space-1 );
 	min-width: 0;
 }
 
 .siteRow {
-	gap: var(--space-3);
+	gap: var( --space-3 );
 }
 
 .siteThumb {
@@ -133,22 +133,22 @@
 
 .siteUrl {
 	composes: siteName;
-	color: var(--muted-foreground);
-	font-weight: var(--font-weight-normal);
+	color: var( --muted-foreground );
+	font-weight: var( --font-weight-normal );
 }
 
 .badges {
 	display: flex;
 	flex: none;
-	gap: var(--space-1);
+	gap: var( --space-1 );
 }
 
 .siteStatus {
-	padding-inline: var(--space-0_5);
-	color: var(--muted-foreground);
-	font-size: var(--text-xs);
+	padding-inline: var( --space-0_5 );
+	color: var( --muted-foreground );
+	font-size: var( --text-xs );
 }
 
 .siteAction {
-	padding-inline: var(--space-0_5);
+	padding-inline: var( --space-0_5 );
 }
diff --git a/apps/ui/src/features/sites/add-site-dialog/create-panel.module.css b/apps/ui/src/features/sites/add-site-dialog/create-panel.module.css
index f0a186cc96..f62d397c95 100644
--- a/apps/ui/src/features/sites/add-site-dialog/create-panel.module.css
+++ b/apps/ui/src/features/sites/add-site-dialog/create-panel.module.css
@@ -1,5 +1,5 @@
 .blueprint {
-	margin-top: var(--space-8);
+	margin-top: var( --space-8 );
 }
 
 .summary {
@@ -11,20 +11,20 @@
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	gap: var(--space-4);
-	margin-bottom: var(--space-3);
+	gap: var( --space-4 );
+	margin-bottom: var( --space-3 );
 }
 
 /* A quiet section label, so the Blueprint's own name below stays dominant. */
 .summaryHeader h2 {
-	color: var(--muted-foreground);
-	font-size: var(--text-xxs);
-	font-weight: var(--font-weight-medium);
+	color: var( --muted-foreground );
+	font-size: var( --text-xxs );
+	font-weight: var( --font-weight-medium );
 }
 
 .summaryRemove {
-	color: var(--accent-text);
-	font-size: var(--text-xxs);
+	color: var( --accent-text );
+	font-size: var( --text-xxs );
 	cursor: pointer;
 }
 
@@ -33,8 +33,9 @@
 }
 
 .summaryRemove:focus-visible {
+	/* eslint-disable-next-line studio/use-theme-tokens -- a focus ring hugging a text link. */
 	border-radius: 2px;
-	outline: var(--focus-width) solid var(--ring);
+	outline: var( --focus-width ) solid var( --ring );
 	outline-offset: 2px;
 }
 
@@ -42,7 +43,7 @@
 	display: grid;
 	grid-template-columns: 112px minmax( 0, 1fr );
 	align-items: start;
-	gap: var(--space-4);
+	gap: var( --space-4 );
 }
 
 .summaryOverviewWithoutImage {
@@ -54,8 +55,8 @@
 	width: 112px;
 	aspect-ratio: 16 / 10;
 	overflow: hidden;
-	border-radius: var(--radius-sm);
-	background: var(--chat);
+	border-radius: var( --radius-sm );
+	background: var( --chat );
 }
 
 .summaryImage {
@@ -69,30 +70,30 @@
 }
 
 .summaryTitle {
-	color: var(--foreground);
-	font-size: var(--text-xs);
-	font-weight: var(--font-weight-semibold);
+	color: var( --foreground );
+	font-size: var( --text-xs );
+	font-weight: var( --font-weight-semibold );
 }
 
 .summaryExcerpt {
-	margin: var(--space-1) 0 0;
-	color: var(--muted-foreground);
-	font-size: var(--text-xxs);
+	margin: var( --space-1 ) 0 0;
+	color: var( --muted-foreground );
+	font-size: var( --text-xxs );
 	line-height: 1.4;
 }
 
 .summaryPackages {
 	display: grid;
 	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
-	gap: var(--space-6);
-	margin-top: var(--space-6);
+	gap: var( --space-6 );
+	margin-top: var( --space-6 );
 }
 
 .summaryPackageGroup h3 {
-	margin: 0 0 var(--space-1_5);
-	color: var(--foreground);
-	font-size: var(--text-xxs);
-	font-weight: var(--font-weight-semibold);
+	margin: 0 0 var( --space-1_5 );
+	color: var( --foreground );
+	font-size: var( --text-xxs );
+	font-weight: var( --font-weight-semibold );
 }
 
 .summaryPackageGroup:only-child {
@@ -100,18 +101,18 @@
 }
 
 .summaryPackageGroup ul {
-	padding-left: var(--space-4_5);
+	padding-left: var( --space-4_5 );
 	list-style: disc;
 }
 
 .summaryPackageGroup li {
 	margin-top: 3px;
-	color: var(--muted-foreground);
-	font-size: var(--text-xxs);
+	color: var( --muted-foreground );
+	font-size: var( --text-xxs );
 }
 
 .summaryPackageGroup a {
-	color: var(--accent-text);
+	color: var( --accent-text );
 	overflow-wrap: anywhere;
 }
 
@@ -120,12 +121,13 @@
 }
 
 .summaryPackageGroup a:focus-visible {
+	/* eslint-disable-next-line studio/use-theme-tokens -- a focus ring hugging a text link. */
 	border-radius: 2px;
-	outline: var(--focus-width) solid var(--ring);
+	outline: var( --focus-width ) solid var( --ring );
 	outline-offset: 2px;
 }
 
-@media (width < 640px) {
+@media ( width < 640px ) {
 	.summaryOverview,
 	.summaryPackages {
 		grid-template-columns: 1fr;
diff --git a/apps/ui/src/features/sites/add-site-dialog/import-panel.module.css b/apps/ui/src/features/sites/add-site-dialog/import-panel.module.css
index 1b0976f89d..4e9fed80be 100644
--- a/apps/ui/src/features/sites/add-site-dialog/import-panel.module.css
+++ b/apps/ui/src/features/sites/add-site-dialog/import-panel.module.css
@@ -8,38 +8,38 @@
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	gap: var(--space-4);
+	gap: var( --space-4 );
 	max-width: 512px;
-	margin: var(--space-4) auto 0;
-	padding: var(--space-10);
-	border: 1px dashed var(--border);
-	border-radius: var(--radius-xl);
+	margin: var( --space-4 ) auto 0;
+	padding: var( --space-10 );
+	border: 1px dashed var( --border );
+	border-radius: var( --radius-xl );
 	text-align: center;
 }
 
 .dropZone[data-dragging] {
-	border-color: var(--ring);
-	background: color-mix(in srgb, var(--accent) 6%, transparent);
+	border-color: var( --ring );
+	background: color-mix( in srgb, var( --accent ) 6%, transparent );
 }
 
 .dropIcon {
-	color: var(--muted-foreground);
+	color: var( --muted-foreground );
 }
 
 .dropHelp {
 	max-width: 512px;
-	margin: var(--space-3) auto 0;
-	color: var(--muted-foreground);
-	font-size: var(--text-xxs);
+	margin: var( --space-3 ) auto 0;
+	color: var( --muted-foreground );
+	font-size: var( --text-xxs );
 	line-height: 1.3;
 	text-align: center;
 }
 
 .dropLabel {
-	color: var(--muted-foreground);
+	color: var( --muted-foreground );
 }
 
 .dropError {
 	max-width: 512px;
-	margin: var(--space-6) auto 0;
+	margin: var( --space-6 ) auto 0;
 }
diff --git a/apps/ui/src/features/sites/add-site-dialog/style.module.css b/apps/ui/src/features/sites/add-site-dialog/style.module.css
index a490357a11..861934fa44 100644
--- a/apps/ui/src/features/sites/add-site-dialog/style.module.css
+++ b/apps/ui/src/features/sites/add-site-dialog/style.module.css
@@ -3,18 +3,18 @@
 	flex: none;
 	align-items: center;
 	height: 36px;
-	margin: var(--space-4) 0 0;
-	padding: 0 var(--space-2);
-	color: var(--muted-foreground);
-	font-size: var(--text-sm);
-	font-weight: var(--font-weight-medium);
-	line-height: var(--text-sm--line-height);
+	margin: var( --space-4 ) 0 0;
+	padding: 0 var( --space-2 );
+	color: var( --muted-foreground );
+	font-size: var( --text-sm );
+	font-weight: var( --font-weight-medium );
+	line-height: var( --text-sm--line-height );
 }
 
 .leading {
 	display: flex;
 	align-items: center;
-	gap: var(--space-3);
+	gap: var( --space-3 );
 }
 
 .title {
@@ -23,16 +23,16 @@
 }
 
 .crumbSeparator {
-	color: var(--muted-foreground);
+	color: var( --muted-foreground );
 }
 
 .progress {
 	display: flex;
 	align-items: center;
-	gap: var(--space-2);
+	gap: var( --space-2 );
 	overflow: hidden;
-	color: var(--muted-foreground);
-	font-size: var(--text-xs);
+	color: var( --muted-foreground );
+	font-size: var( --text-xs );
 	white-space: nowrap;
 }
 
diff --git a/apps/ui/src/features/sites/blueprint-upload/style.module.css b/apps/ui/src/features/sites/blueprint-upload/style.module.css
index 79c1e68106..ece38bf65b 100644
--- a/apps/ui/src/features/sites/blueprint-upload/style.module.css
+++ b/apps/ui/src/features/sites/blueprint-upload/style.module.css
@@ -7,13 +7,13 @@
 }
 
 .prompt {
-	color: var(--muted-foreground);
-	font-size: var(--text-xs);
+	color: var( --muted-foreground );
+	font-size: var( --text-xs );
 }
 
 .action {
-	color: var(--accent-text);
-	font-weight: var(--font-weight-medium);
+	color: var( --accent-text );
+	font-weight: var( --font-weight-medium );
 	cursor: pointer;
 }
 
@@ -22,22 +22,23 @@
 }
 
 .action:focus-visible {
+	/* eslint-disable-next-line studio/use-theme-tokens -- a focus ring hugging a text link. */
 	border-radius: 2px;
-	outline: 2px solid var(--accent);
+	outline: 2px solid var( --accent );
 	outline-offset: 2px;
 }
 
 .fullScreenDrop {
 	position: fixed;
 	inset: 0;
-	z-index: var(--z-overlay);
+	z-index: var( --z-overlay );
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	border: 2px dashed var(--accent);
-	background: var(--chrome);
-	color: var(--foreground);
-	font-size: var(--text-2xl);
-	font-weight: var(--font-weight-semibold);
+	border: 2px dashed var( --accent );
+	background: var( --chrome );
+	color: var( --foreground );
+	font-size: var( --text-2xl );
+	font-weight: var( --font-weight-semibold );
 	pointer-events: none;
 }
diff --git a/apps/ui/src/features/sites/create-site-form/style.module.css b/apps/ui/src/features/sites/create-site-form/style.module.css
index df99b6a857..1e8c2b9196 100644
--- a/apps/ui/src/features/sites/create-site-form/style.module.css
+++ b/apps/ui/src/features/sites/create-site-form/style.module.css
@@ -5,19 +5,19 @@
 .panel {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-6);
+	gap: var( --space-6 );
 }
 
 .actions {
 	display: flex;
 	justify-content: flex-end;
-	gap: var(--space-2);
-	margin-top: var(--space-7);
+	gap: var( --space-2 );
+	margin-top: var( --space-7 );
 }
 
 .pathRow {
 	display: flex;
-	gap: var(--space-2);
+	gap: var( --space-2 );
 }
 
 .advancedToggle {
@@ -27,10 +27,10 @@
 .advancedCollapse {
 	display: grid;
 	grid-template-rows: 0fr;
-	margin-top: calc(var(--space-6) * -1);
+	margin-top: calc( var( --space-6 ) * -1 );
 	transition:
-		grid-template-rows var(--motion-duration-layout) var(--motion-ease-layout),
-		margin-top var(--motion-duration-layout) var(--motion-ease-layout);
+		grid-template-rows var( --motion-duration-layout ) var( --motion-ease-layout ),
+		margin-top var( --motion-duration-layout ) var( --motion-ease-layout );
 }
 
 .advancedCollapseOpen {
@@ -41,55 +41,55 @@
 .advancedCollapseInner {
 	overflow: hidden;
 	min-height: 0;
-	padding: var(--space-1);
-	margin: calc(var(--space-1) * -1);
+	padding: var( --space-1 );
+	margin: calc( var( --space-1 ) * -1 );
 }
 
 .advancedErrorCount {
-	margin-left: var(--space-2);
-	font-size: var(--text-xxs);
-	font-weight: var(--font-weight-medium);
-	color: var(--destructive);
+	margin-left: var( --space-2 );
+	font-size: var( --text-xxs );
+	font-weight: var( --font-weight-medium );
+	color: var( --destructive );
 }
 
 .submitErrorDetails {
-	margin-top: var(--space-1_5);
+	margin-top: var( --space-1_5 );
 }
 
 .submitErrorDetails summary {
 	width: fit-content;
-	font-weight: var(--font-weight-medium);
+	font-weight: var( --font-weight-medium );
 	cursor: pointer;
 }
 
 .submitErrorDetails pre {
 	max-height: 160px;
-	padding-top: var(--space-1_5);
+	padding-top: var( --space-1_5 );
 	overflow: auto;
-	font-family: var(--font-mono);
-	font-size: var(--text-2xs);
+	font-family: var( --font-mono );
+	font-size: var( --text-2xs );
 	white-space: pre-wrap;
 	overflow-wrap: anywhere;
 }
 
 .panelFooter {
-	padding-top: var(--space-6);
-	border-top: 1px solid var(--border);
+	padding-top: var( --space-6 );
+	border-top: 1px solid var( --border );
 }
 
 .source {
 	display: flex;
 	align-items: center;
-	gap: var(--space-3);
-	padding: var(--space-3);
-	border: 1px solid var(--border);
-	border-radius: var(--radius-lg);
-	background: var(--background);
+	gap: var( --space-3 );
+	padding: var( --space-3 );
+	border: 1px solid var( --border );
+	border-radius: var( --radius-lg );
+	background: var( --background );
 }
 
 .source svg {
 	flex: none;
-	color: var(--muted-foreground);
+	color: var( --muted-foreground );
 }
 
 .source span {
diff --git a/apps/ui/src/features/sites/delete-site-dialog/style.module.css b/apps/ui/src/features/sites/delete-site-dialog/style.module.css
index f53c798338..8b44b657a2 100644
--- a/apps/ui/src/features/sites/delete-site-dialog/style.module.css
+++ b/apps/ui/src/features/sites/delete-site-dialog/style.module.css
@@ -1,3 +1,3 @@
 .error {
-	color: var(--destructive);
+	color: var( --destructive );
 }
diff --git a/apps/ui/src/features/sites/design-system-view/style.module.css b/apps/ui/src/features/sites/design-system-view/style.module.css
index d4d10f6f66..e44daab855 100644
--- a/apps/ui/src/features/sites/design-system-view/style.module.css
+++ b/apps/ui/src/features/sites/design-system-view/style.module.css
@@ -1,43 +1,43 @@
 /* Colors come from the site's DESIGN.md (inline --ds-*), not the app theme. */
 .root {
-	--ds-hairline: color-mix(in srgb, var(--ds-text) 18%, transparent);
+	--ds-hairline: color-mix( in srgb, var( --ds-text ) 18%, transparent );
 	container-type: inline-size;
 	min-height: 100%;
-	padding: var(--space-12) clamp(var(--space-5), 5cqi, var(--space-16)) var(--space-16);
-	background-color: var(--ds-background);
-	color: var(--ds-text);
-	font-size: var(--text-md);
-	line-height: var(--leading-normal);
+	padding: var( --space-12 ) clamp( var( --space-5 ), 5cqi, var( --space-16 ) ) var( --space-16 );
+	background-color: var( --ds-background );
+	color: var( --ds-text );
+	font-size: var( --text-md );
+	line-height: var( --leading-normal );
 }
 
 /* The app styles headings with its own theme color. */
-.root :is(h1, h2, h3) {
+.root :is( h1, h2, h3 ) {
 	color: inherit;
 }
 
 .header {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-3);
-	margin-bottom: var(--space-10);
+	gap: var( --space-3 );
+	margin-bottom: var( --space-10 );
 }
 
 .eyebrow {
-	font-size: var(--text-xxs);
+	font-size: var( --text-xxs );
 	opacity: 0.65;
 	text-transform: uppercase;
 	letter-spacing: 0.12em;
 }
 
 .title {
-	font-size: clamp(40px, 9cqi, 104px);
+	font-size: clamp( 40px, 9cqi, 104px );
 	line-height: 0.95;
 	overflow-wrap: anywhere;
 }
 
 .description {
 	max-width: 60ch;
-	font-size: var(--text-xl);
+	font-size: var( --text-xl );
 	opacity: 0.8;
 }
 
@@ -45,9 +45,9 @@
 	display: flex;
 	flex-wrap: wrap;
 	align-items: baseline;
-	gap: var(--space-1) var(--space-4);
-	margin: var(--space-2) 0 0;
-	font-size: var(--text-xs);
+	gap: var( --space-1 ) var( --space-4 );
+	margin: var( --space-2 ) 0 0;
+	font-size: var( --text-xs );
 	opacity: 0.75;
 }
 
@@ -61,26 +61,26 @@
 
 .driftList {
 	display: grid;
-	gap: var(--space-1_5);
-	margin: var(--space-3) 0 0;
-	padding: var(--space-3) var(--space-3_5);
-	border: 1px solid var(--ds-hairline);
+	gap: var( --space-1_5 );
+	margin: var( --space-3 ) 0 0;
+	padding: var( --space-3 ) var( --space-3_5 );
+	border: 1px solid var( --ds-hairline );
 	border-radius: 8px;
 }
 
 .driftList div {
 	display: flex;
 	flex-wrap: wrap;
-	gap: var(--space-1) var(--space-3);
+	gap: var( --space-1 ) var( --space-3 );
 }
 
 .driftList dt {
-	font-weight: var(--font-weight-semibold);
+	font-weight: var( --font-weight-semibold );
 }
 
 .driftList .driftActions {
 	display: flex;
-	gap: var(--space-3);
+	gap: var( --space-3 );
 	margin-inline-start: auto;
 }
 
@@ -101,8 +101,8 @@
 
 .sections {
 	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
-	gap: var(--space-10) var(--space-12);
+	grid-template-columns: repeat( auto-fill, minmax( min( 100%, 420px ), 1fr ) );
+	gap: var( --space-10 ) var( --space-12 );
 }
 
 .section {
@@ -116,11 +116,11 @@
 }
 
 .sectionTitle {
-	margin: 0 0 var(--space-4);
-	padding-top: var(--space-2);
-	border-top: 1px solid var(--ds-hairline);
-	font-size: var(--text-xxs);
-	font-weight: var(--font-weight-semibold);
+	margin: 0 0 var( --space-4 );
+	padding-top: var( --space-2 );
+	border-top: 1px solid var( --ds-hairline );
+	font-size: var( --text-xxs );
+	font-weight: var( --font-weight-semibold );
 	letter-spacing: 0.12em;
 	text-transform: uppercase;
 	opacity: 0.55;
@@ -130,38 +130,38 @@
 	display: flex;
 	flex-wrap: wrap;
 	align-items: flex-end;
-	gap: var(--space-8);
+	gap: var( --space-8 );
 }
 
 .aa {
-	font-size: clamp(96px, 16cqi, 168px);
+	font-size: clamp( 96px, 16cqi, 168px );
 	line-height: 0.85;
 	white-space: nowrap;
 }
 
-.specimen:nth-child(2) .aa {
-	font-size: clamp(56px, 8cqi, 84px);
+.specimen:nth-child( 2 ) .aa {
+	font-size: clamp( 56px, 8cqi, 84px );
 }
 
 .specimen figcaption {
-	margin-top: var(--space-3);
-	font-size: var(--text-xs);
+	margin-top: var( --space-3 );
+	font-size: var( --text-xs );
 	opacity: 0.65;
 }
 
 .palette {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-1);
+	gap: var( --space-1 );
 	height: 320px;
-	border-radius: min(var(--ds-small), 10px);
+	border-radius: min( var( --ds-small ), 10px );
 	overflow: hidden;
 }
 
 .lead {
 	flex: 2;
 	display: flex;
-	gap: var(--space-1);
+	gap: var( --space-1 );
 	min-height: 0;
 }
 
@@ -173,13 +173,13 @@
 	flex: 1;
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-1);
+	gap: var( --space-1 );
 }
 
 .accents {
 	flex: 1;
 	display: flex;
-	gap: var(--space-1);
+	gap: var( --space-1 );
 }
 
 .pair > .tile,
@@ -192,13 +192,13 @@
 	flex-direction: column;
 	justify-content: flex-end;
 	min-width: 0;
-	padding: var(--space-3) var(--space-3_5);
-	font-size: var(--text-xs);
+	padding: var( --space-3 ) var( --space-3_5 );
+	font-size: var( --text-xs );
 	line-height: 1.35;
 }
 
 .tile[data-background] {
-	box-shadow: inset 0 0 0 1px var(--ds-hairline);
+	box-shadow: inset 0 0 0 1px var( --ds-hairline );
 }
 
 .tileHex {
@@ -219,11 +219,11 @@
 
 .scaleRow {
 	display: grid;
-	grid-template-columns: minmax(160px, 1fr) 3fr;
-	gap: var(--space-2) var(--space-8);
+	grid-template-columns: minmax( 160px, 1fr ) 3fr;
+	gap: var( --space-2 ) var( --space-8 );
 	align-items: baseline;
-	padding: var(--space-4) 0;
-	border-top: 1px solid var(--ds-hairline);
+	padding: var( --space-4 ) 0;
+	border-top: 1px solid var( --ds-hairline );
 }
 
 .scaleRow:first-child {
@@ -240,12 +240,12 @@
 .scaleMeta {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-0_5);
-	font-size: var(--text-xs);
+	gap: var( --space-0_5 );
+	font-size: var( --text-xs );
 }
 
 .scaleName {
-	font-weight: var(--font-weight-semibold);
+	font-weight: var( --font-weight-semibold );
 }
 
 .scaleSpecs {
@@ -261,13 +261,13 @@
 	display: flex;
 	flex-wrap: wrap;
 	align-items: flex-start;
-	gap: var(--space-8);
+	gap: var( --space-8 );
 }
 
 .stack {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-4_5);
+	gap: var( --space-4_5 );
 	min-width: 0;
 }
 
@@ -275,12 +275,12 @@
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
-	gap: var(--space-3_5);
+	gap: var( --space-3_5 );
 }
 
 .button {
 	border: 1px solid transparent;
-	font-size: var(--text-md);
+	font-size: var( --text-md );
 	line-height: 1.2;
 }
 
@@ -289,7 +289,7 @@
 }
 
 .link {
-	color: var(--ds-primary);
+	color: var( --ds-primary );
 	text-decoration: underline;
 	text-underline-offset: 4px;
 }
@@ -297,70 +297,70 @@
 .input {
 	width: 240px;
 	max-width: 100%;
-	padding: var(--space-3) var(--space-3_5);
-	border: 1px solid color-mix(in srgb, var(--ds-text) 35%, transparent);
-	border-radius: var(--ds-small);
+	padding: var( --space-3 ) var( --space-3_5 );
+	border: 1px solid color-mix( in srgb, var( --ds-text ) 35%, transparent );
+	border-radius: var( --ds-small );
 	opacity: 0.75;
 }
 
 .tag {
-	padding: var(--space-1_5) var(--space-3);
-	border-radius: var(--ds-tag-radius);
-	background-color: color-mix(in srgb, var(--ds-primary) 16%, var(--ds-background));
-	font-size: var(--text-xxs);
+	padding: var( --space-1_5 ) var( --space-3 );
+	border-radius: var( --ds-tag-radius );
+	background-color: color-mix( in srgb, var( --ds-primary ) 16%, var( --ds-background ) );
+	font-size: var( --text-xxs );
 }
 
 .tagAccent {
-	background-color: var(--ds-accent);
-	color: var(--ds-accent-ink);
+	background-color: var( --ds-accent );
+	color: var( --ds-accent-ink );
 }
 
 .card {
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
-	gap: var(--space-2_5);
+	gap: var( --space-2_5 );
 	flex-shrink: 0;
 	width: 220px;
 	min-height: 190px;
-	padding: var(--space-4_5) var(--space-5);
-	border-radius: var(--ds-card-radius);
-	background-color: color-mix(in srgb, var(--ds-text) 6%, var(--ds-background));
+	padding: var( --space-4_5 ) var( --space-5 );
+	border-radius: var( --ds-card-radius );
+	background-color: color-mix( in srgb, var( --ds-text ) 6%, var( --ds-background ) );
 }
 
 .card strong {
-	font-size: var(--text-2xl);
+	font-size: var( --text-2xl );
 }
 
 .card u {
 	display: block;
 	height: 8px;
 	border-radius: 4px;
-	background-color: var(--ds-hairline);
+	background-color: var( --ds-hairline );
 }
 
 .spacing {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-2_5);
+	gap: var( --space-2_5 );
 }
 
 .spacingRow {
 	display: grid;
 	grid-template-columns: 48px 1fr 64px;
-	gap: var(--space-3);
+	gap: var( --space-3 );
 	align-items: center;
-	font-size: var(--text-xs);
+	font-size: var( --text-xs );
 }
 
 .spacingName {
-	font-weight: var(--font-weight-semibold);
+	font-weight: var( --font-weight-semibold );
 }
 
 .spacingBar {
 	height: 12px;
 	min-width: 2px;
-	background-color: var(--ds-primary);
+	background-color: var( --ds-primary );
 }
 
 .spacingValue {
@@ -371,12 +371,12 @@
 .corners {
 	display: flex;
 	flex-wrap: wrap;
-	gap: var(--space-5);
-	margin-top: var(--space-7);
+	gap: var( --space-5 );
+	margin-top: var( --space-7 );
 }
 
 .corner {
-	font-size: var(--text-xs);
+	font-size: var( --text-xs );
 }
 
 .corner div {
@@ -388,19 +388,19 @@
 }
 
 .corner figcaption {
-	margin-top: var(--space-2);
+	margin-top: var( --space-2 );
 	opacity: 0.65;
 }
 
 .guidelines {
 	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
-	gap: var(--space-8) var(--space-12);
+	grid-template-columns: repeat( auto-fill, minmax( min( 100%, 320px ), 1fr ) );
+	gap: var( --space-8 ) var( --space-12 );
 }
 
 .guideline h3 {
-	margin: 0 0 var(--space-2);
-	font-size: var(--text-2xl);
+	margin: 0 0 var( --space-2 );
+	font-size: var( --text-2xl );
 	line-height: 1.2;
 }
 
@@ -412,7 +412,7 @@
 }
 
 /* DESIGN.md prose keeps the browser's list and link styles. */
-.guideline :is(ul, ol, a) {
+.guideline :is( ul, ol, a ) {
 	padding-inline-start: revert;
 	list-style: revert;
 	color: revert;
@@ -425,9 +425,9 @@
 
 .guideline code {
 	font-size: 0.9em;
-	padding: 1px var(--space-1);
+	padding: 1px var( --space-1 );
 	border-radius: 4px;
-	background-color: color-mix(in srgb, var(--ds-text) 10%, transparent);
+	background-color: color-mix( in srgb, var( --ds-text ) 10%, transparent );
 }
 
 .message {
@@ -435,10 +435,10 @@
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	gap: var(--space-2);
+	gap: var( --space-2 );
 	height: 100%;
-	padding: var(--space-8);
-	color: var(--foreground);
+	padding: var( --space-8 );
+	color: var( --foreground );
 	text-align: center;
 }
 
@@ -448,8 +448,8 @@
 }
 
 .messageDetail {
-	color: var(--muted-foreground);
-	font-size: var(--text-xxs);
+	color: var( --muted-foreground );
+	font-size: var( --text-xxs );
 }
 
 .root [data-annotation-target] {
@@ -461,7 +461,7 @@
 }
 
 .picking [data-annotation-target]:hover {
-	outline: 2px solid var(--accent);
+	outline: 2px solid var( --accent );
 	outline-offset: 2px;
 }
 
@@ -469,8 +469,8 @@
 .annotationMarker {
 	position: absolute;
 	z-index: 1;
-	top: calc(var(--space-3) * -1);
-	inset-inline-end: calc(var(--space-3) * -1);
+	top: calc( var( --space-3 ) * -1 );
+	inset-inline-end: calc( var( --space-3 ) * -1 );
 	display: inline-flex;
 	box-sizing: content-box;
 	align-items: center;
@@ -478,20 +478,21 @@
 	width: 20px;
 	height: 20px;
 	border: 2px solid #fff;
-	border-radius: var(--radius-full);
-	background: var(--accent);
+	border-radius: var( --radius-full );
+	background: var( --accent );
 	box-shadow:
-		0 0 0 1px var(--accent),
-		0 1px 3px rgb(0 0 0 / 10%);
-	color: var(--accent-foreground);
-	font: 600 12px/1 system-ui, sans-serif;
+		0 0 0 1px var( --accent ),
+		0 1px 3px rgb( 0 0 0 / 10% );
+	color: var( --accent-foreground );
+	font:
+		600 12px/1 system-ui,
+		sans-serif;
 	letter-spacing: normal;
 	text-transform: none;
 }
 
 /* The palette clips its tiles' corners, so their markers sit inside. */
 .tile .annotationMarker {
-	top: var(--space-2);
-	inset-inline-end: var(--space-2);
+	top: var( --space-2 );
+	inset-inline-end: var( --space-2 );
 }
-
diff --git a/apps/ui/src/features/sites/preview-particles/style.module.css b/apps/ui/src/features/sites/preview-particles/style.module.css
index 9277882441..d72d8fbac6 100644
--- a/apps/ui/src/features/sites/preview-particles/style.module.css
+++ b/apps/ui/src/features/sites/preview-particles/style.module.css
@@ -3,7 +3,7 @@
 	inset: 0;
 	width: 100%;
 	height: 100%;
-	color: light-dark(var(--foreground), var(--muted-foreground));
+	color: light-dark( var( --foreground ), var( --muted-foreground ) );
 	pointer-events: none;
 }
 
@@ -12,11 +12,11 @@
 	top: 50%;
 	left: 50%;
 	display: flex;
-	color: light-dark(var(--foreground), var(--muted-foreground));
+	color: light-dark( var( --foreground ), var( --muted-foreground ) );
 	opacity: 0;
 	pointer-events: none;
-	transform: translate(-50%, -50%);
-	transition: opacity var(--motion-duration-reveal) ease;
+	transform: translate( -50%, -50% );
+	transition: opacity var( --motion-duration-reveal ) ease;
 }
 
 .logo svg {
diff --git a/apps/ui/src/features/sites/preview-split-frame/style.module.css b/apps/ui/src/features/sites/preview-split-frame/style.module.css
index d02aa8f646..c41137b9d7 100644
--- a/apps/ui/src/features/sites/preview-split-frame/style.module.css
+++ b/apps/ui/src/features/sites/preview-split-frame/style.module.css
@@ -3,7 +3,7 @@
 	min-height: 0;
 	position: relative;
 	overflow: hidden;
-	background-color: var(--chat);
+	background-color: var( --chat );
 }
 
 /* Opaque and above the preview slot so it covers the (still mounted)
@@ -21,18 +21,18 @@
 	min-height: 0;
 	z-index: 1;
 	overflow: auto;
-	background-color: var(--chat);
+	background-color: var( --chat );
 }
 
 .rootPreviewOpen .contentColumn {
-	width: var(--preview-frame-content-width);
+	width: var( --preview-frame-content-width );
 }
 
 /* With both panes showing, the divider takes its own column between them:
    the band's surface in the band, a doubled border below it. The band's
    separator sits at the preview's edge. */
 .rootEdge::before {
-	--studio-column-edge: calc(var(--preview-frame-content-width) + 1px);
+	--studio-column-edge: calc( var( --preview-frame-content-width ) + 1px );
 
 	z-index: 2;
 }
@@ -41,33 +41,33 @@
 	content: '';
 	position: absolute;
 	inset-block: 0;
-	inset-inline-start: var(--preview-frame-content-width);
+	inset-inline-start: var( --preview-frame-content-width );
 	z-index: 2;
 	width: 1px;
 	background:
-		linear-gradient(var(--chrome) var(--band-height), var(--border) var(--band-height)),
-		linear-gradient(var(--border), var(--border)) var(--chrome);
+		linear-gradient( var( --chrome ) var( --band-height ), var( --border ) var( --band-height ) ),
+		linear-gradient( var( --border ), var( --border ) ) var( --chrome );
 	pointer-events: none;
 }
 
 .rootEdge .previewSlot {
-	width: calc(100% - var(--preview-frame-content-width) - 1px);
+	width: calc( 100% - var( --preview-frame-content-width ) - 1px );
 }
 
-.rootPreviewAnimating :is(.contentColumn, .previewSlot) {
-	transition: width var(--motion-duration-layout) var(--motion-ease-layout);
+.rootPreviewAnimating :is( .contentColumn, .previewSlot ) {
+	transition: width var( --motion-duration-layout ) var( --motion-ease-layout );
 }
 
 /* The chat header's actions fade back in once the column is halfway open,
    and fade out as soon as it closes. */
 .contentColumn [data-header-actions] {
-	transition: opacity var(--motion-duration-feedback) var(--motion-ease-enter)
-		calc(var(--motion-duration-layout) / 2);
+	transition: opacity var( --motion-duration-feedback ) var( --motion-ease-enter )
+		calc( var( --motion-duration-layout ) / 2 );
 }
 
 .contentColumnCollapsed [data-header-actions] {
 	opacity: 0;
-	transition: opacity var(--motion-duration-feedback) var(--motion-ease-enter);
+	transition: opacity var( --motion-duration-feedback ) var( --motion-ease-enter );
 }
 
 /* Full preview: the column is width 0 once the slide finishes; visibility
@@ -99,7 +99,7 @@
 /* The preview grows into the room the content column gives up, so its page
    reflows as the split opens and closes. */
 .rootPreviewOpen .previewSlot {
-	width: calc(100% - var(--preview-frame-content-width));
+	width: calc( 100% - var( --preview-frame-content-width ) );
 }
 
 .previewSlotInteractive {
@@ -111,15 +111,15 @@
 .previewResizeHandle {
 	position: absolute;
 	inset-block: 0;
-	inset-inline-start: var(--preview-frame-content-width);
+	inset-inline-start: var( --preview-frame-content-width );
 	z-index: 3;
-	padding-inline-start: var(--space-1);
-	transform: translateX(-4px);
+	padding-inline-start: var( --space-1 );
+	transform: translateX( -4px );
 	justify-content: flex-start;
 }
 
 /* In RTL the handle is offset from the right edge, so the centering nudge
    flips too. */
-.previewResizeHandle:dir(rtl) {
-	transform: translateX(4px);
+.previewResizeHandle:dir( rtl ) {
+	transform: translateX( 4px );
 }
diff --git a/apps/ui/src/features/sites/site-actions-menu/style.module.css b/apps/ui/src/features/sites/site-actions-menu/style.module.css
index 2faf529eba..6e551d60e1 100644
--- a/apps/ui/src/features/sites/site-actions-menu/style.module.css
+++ b/apps/ui/src/features/sites/site-actions-menu/style.module.css
@@ -1,5 +1,5 @@
 .trigger {
-	color: var(--foreground);
+	color: var( --foreground );
 	-webkit-app-region: no-drag;
 }
 
diff --git a/apps/ui/src/features/sites/site-fields/style.module.css b/apps/ui/src/features/sites/site-fields/style.module.css
index 867197fb62..fd4f9df44b 100644
--- a/apps/ui/src/features/sites/site-fields/style.module.css
+++ b/apps/ui/src/features/sites/site-fields/style.module.css
@@ -1,5 +1,5 @@
 .offlineTooltip {
-	gap: var(--space-2);
+	gap: var( --space-2 );
 }
 
 .offlineTooltip svg {
@@ -8,12 +8,12 @@
 
 .helpAction {
 	display: flex;
-	margin-block-start: var(--space-1);
+	margin-block-start: var( --space-1 );
 }
 
 .textControl {
 	display: flex;
 	align-items: center;
-	gap: var(--space-1);
-	min-width: min(224px, 100%);
+	gap: var( --space-1 );
+	min-width: min( 224px, 100% );
 }
diff --git a/apps/ui/src/features/sites/site-header-actions/style.module.css b/apps/ui/src/features/sites/site-header-actions/style.module.css
index 86a8961545..22d496337d 100644
--- a/apps/ui/src/features/sites/site-header-actions/style.module.css
+++ b/apps/ui/src/features/sites/site-header-actions/style.module.css
@@ -6,14 +6,14 @@
 	z-index: 1;
 	display: flex;
 	align-items: center;
-	height: var(--band-height);
+	height: var( --band-height );
 	-webkit-app-region: no-drag;
 }
 
 .actions {
 	display: flex;
 	align-items: center;
-	gap: var(--space-1);
+	gap: var( --space-1 );
 }
 
 .item,
diff --git a/apps/ui/src/features/sites/site-icon/style.module.css b/apps/ui/src/features/sites/site-icon/style.module.css
index 298a4153b4..5fdb21d04a 100644
--- a/apps/ui/src/features/sites/site-icon/style.module.css
+++ b/apps/ui/src/features/sites/site-icon/style.module.css
@@ -1,25 +1,26 @@
 .root {
 	display: inline-grid;
 	place-items: center;
-	width: var(--site-icon-size, 16px);
-	height: var(--site-icon-size, 16px);
+	width: var( --site-icon-size, 16px );
+	height: var( --site-icon-size, 16px );
+	/* eslint-disable-next-line studio/use-theme-tokens -- the generated site icon's corner. */
 	border-radius: 4px;
 	background: radial-gradient(
-			circle at var(--site-icon-position-a),
-			var(--site-icon-color-a) 0,
+			circle at var( --site-icon-position-a ),
+			var( --site-icon-color-a ) 0,
 			transparent 48%
 		),
 		radial-gradient(
-			circle at var(--site-icon-position-b),
-			var(--site-icon-color-b) 0,
+			circle at var( --site-icon-position-b ),
+			var( --site-icon-color-b ) 0,
 			transparent 46%
 		),
 		radial-gradient(
-			circle at var(--site-icon-position-c),
-			var(--site-icon-color-c) 0,
+			circle at var( --site-icon-position-c ),
+			var( --site-icon-color-c ) 0,
 			transparent 50%
 		),
-		linear-gradient(135deg, var(--site-icon-color-d), var(--site-icon-color-a));
+		linear-gradient( 135deg, var( --site-icon-color-d ), var( --site-icon-color-a ) );
 	flex-shrink: 0;
 	line-height: 0;
 	box-shadow: none;
@@ -33,6 +34,6 @@
 }
 
 .rootWithImage {
-	background: var(--chat);
+	background: var( --chat );
 	box-shadow: none;
 }
diff --git a/apps/ui/src/features/sites/site-lifecycle-button/style.module.css b/apps/ui/src/features/sites/site-lifecycle-button/style.module.css
index 21231cef8b..02586e67fb 100644
--- a/apps/ui/src/features/sites/site-lifecycle-button/style.module.css
+++ b/apps/ui/src/features/sites/site-lifecycle-button/style.module.css
@@ -3,6 +3,6 @@
 	width: 1px;
 	height: 1px;
 	overflow: hidden;
-	clip-path: inset(50%);
+	clip-path: inset( 50% );
 	white-space: nowrap;
 }
diff --git a/apps/ui/src/features/sites/site-preview/address-bar.module.css b/apps/ui/src/features/sites/site-preview/address-bar.module.css
index c297df3c37..bd05c77f8f 100644
--- a/apps/ui/src/features/sites/site-preview/address-bar.module.css
+++ b/apps/ui/src/features/sites/site-preview/address-bar.module.css
@@ -5,22 +5,22 @@
 	max-width: 416px;
 	flex: 1 1 auto;
 	min-width: 0;
-	height: var(--control-size);
-	padding-inline: var(--space-3);
+	height: var( --control-size );
+	padding-inline: var( --space-3 );
 	align-items: center;
-	border: 1px solid var(--border);
-	border-radius: var(--radius-full);
+	border: 1px solid var( --border );
+	border-radius: var( --radius-full );
 	overflow: hidden;
 }
 
 .addressBar:focus-within {
-	border-color: var(--ring);
-	box-shadow: inset 0 0 0 1px var(--ring);
+	border-color: var( --ring );
+	box-shadow: inset 0 0 0 1px var( --ring );
 }
 
-.addressBar:has(.input[aria-invalid='true']) {
-	border-color: var(--destructive);
-	--ring: var(--destructive);
+.addressBar:has( .input[aria-invalid='true'] ) {
+	border-color: var( --destructive );
+	--ring: var( --destructive );
 }
 
 .siteIcon {
@@ -36,29 +36,29 @@
 .actions {
 	position: absolute;
 	inset-block: 0;
-	inset-inline-end: var(--space-0_5);
+	inset-inline-end: var( --space-0_5 );
 	display: flex;
 	align-items: center;
 	opacity: 0;
 	pointer-events: none;
-	transition: opacity var(--motion-duration-feedback) ease;
+	transition: opacity var( --motion-duration-feedback ) ease;
 }
 
-.addressBar:is(:hover, :focus-within) .actions {
+.addressBar:is( :hover, :focus-within ) .actions {
 	opacity: 1;
 	pointer-events: auto;
 }
 
 /* Out of the way while typing an address. */
-.addressBar:has(.input:focus) .actions {
+.addressBar:has( .input:focus ) .actions {
 	opacity: 0;
 	pointer-events: none;
 }
 
-
 .siteIcon:focus-visible {
-	outline: var(--focus-width) solid var(--ring);
+	outline: var( --focus-width ) solid var( --ring );
 	outline-offset: 2px;
+	/* eslint-disable-next-line studio/use-theme-tokens -- a focus ring around the site icon. */
 	border-radius: 6px;
 }
 
@@ -66,10 +66,10 @@
 	width: 100%;
 	min-width: 0;
 	/* Balances the realm icon, so the address centres on the whole field. */
-	padding-inline: var(--space-1) var(--space-5);
-	color: var(--foreground);
-	font-size: var(--text-xs);
-	line-height: var(--text-xs--line-height);
+	padding-inline: var( --space-1 ) var( --space-5 );
+	color: var( --foreground );
+	font-size: var( --text-xs );
+	line-height: var( --text-xs--line-height );
 	text-align: center;
 	outline: 0;
 }
@@ -79,12 +79,12 @@
 }
 
 .shortcutsPopup {
-	width: var(--anchor-width);
-	max-width: calc(100vw - 16px);
-	padding: var(--space-1_5);
+	width: var( --anchor-width );
+	max-width: calc( 100vw - 16px );
+	padding: var( --space-1_5 );
 }
 
 /* Rows rounded for the menu surface rather than the composer's. */
 .shortcuts {
-	--command-radius: var(--radius-md);
+	--command-radius: var( --radius-md );
 }
diff --git a/apps/ui/src/features/sites/site-preview/preview-header/style.module.css b/apps/ui/src/features/sites/site-preview/preview-header/style.module.css
index a1a29aa240..8ee2216e04 100644
--- a/apps/ui/src/features/sites/site-preview/preview-header/style.module.css
+++ b/apps/ui/src/features/sites/site-preview/preview-header/style.module.css
@@ -5,19 +5,19 @@
 	position: relative;
 	display: flex;
 	align-items: center;
-	gap: var(--space-3);
-	padding-inline: var(--space-3) var(--space-2);
-	height: var(--band-height);
+	gap: var( --space-3 );
+	padding-inline: var( --space-3 ) var( --space-2 );
+	height: var( --band-height );
 	flex-shrink: 0;
-	transition: padding var(--motion-duration-layout) var(--motion-ease-layout);
-	background-color: var(--chrome);
+	transition: padding var( --motion-duration-layout ) var( --motion-ease-layout );
+	background-color: var( --chrome );
 	-webkit-app-region: drag;
 }
 
 /* Clears the macOS traffic lights, which always sit at the window's physical
    top-left — hence the physical padding rather than an inline-start one. */
 .headerTrafficLights {
-	padding-left: var(--traffic-light-space);
+	padding-left: var( --traffic-light-space );
 }
 
 /* The toolbar doubles as a window drag region; the controls (including the
@@ -30,7 +30,7 @@
 	display: flex;
 	flex-shrink: 0;
 	align-items: center;
-	gap: var(--space-1);
+	gap: var( --space-1 );
 }
 
 .browserLocation {
@@ -52,33 +52,33 @@
 	flex: 1 1 auto;
 	min-width: 0;
 	max-width: 416px;
-	height: var(--control-size);
+	height: var( --control-size );
 	align-items: center;
 	justify-content: center;
-	padding-inline: var(--space-3);
-	border: 1px solid var(--border);
-	border-radius: var(--radius-full);
-	color: var(--muted-foreground);
-	font-size: var(--text-xxs);
+	padding-inline: var( --space-3 );
+	border: 1px solid var( --border );
+	border-radius: var( --radius-full );
+	color: var( --muted-foreground );
+	font-size: var( --text-xxs );
 	user-select: none;
 }
 
 .historyEntry {
 	display: flex;
-	width: min(320px, calc(100vw - 64px));
+	width: min( 320px, calc( 100vw - 64px ) );
 	min-width: 0;
 	flex-direction: column;
 }
 
 .historyTitle {
 	composes: truncate from '@/lib/theme/recipes.module.css';
-	color: var(--foreground);
+	color: var( --foreground );
 }
 
 .historyPath {
 	composes: truncate from '@/lib/theme/recipes.module.css';
-	color: var(--muted-foreground);
-	font-size: var(--text-2xs);
+	color: var( --muted-foreground );
+	font-size: var( --text-2xs );
 }
 
 .disabledControlTooltipTarget {
@@ -86,15 +86,15 @@
 }
 
 .annotateButton {
-	gap: var(--space-1);
+	gap: var( --space-1 );
 }
 
 .annotateButtonActive {
-	--button-hover-background: color-mix(in srgb, var(--accent) 15%, transparent);
-	--button-hover-color: var(--accent-text);
+	--button-hover-background: color-mix( in srgb, var( --accent ) 15%, transparent );
+	--button-hover-color: var( --accent-text );
 }
 
-.annotateButtonActive:not(:disabled) {
+.annotateButtonActive:not( :disabled ) {
 	opacity: 1;
 }
 
@@ -116,13 +116,13 @@
 	inset: 0;
 	display: block;
 	width: 100%;
-	background-color: var(--accent-text);
+	background-color: var( --accent-text );
 	transform-origin: left center;
 	transition: transform 160ms ease-out;
 }
 
 /* Page-load progress grows from the reading start. */
-.loadingProgress span:dir(rtl) {
+.loadingProgress span:dir( rtl ) {
 	transform-origin: right center;
 }
 
@@ -143,6 +143,6 @@
 .headerItem {
 	display: flex;
 	align-items: center;
-	gap: var(--space-1);
+	gap: var( --space-1 );
 	flex-shrink: 0;
 }
diff --git a/apps/ui/src/features/sites/site-preview/preview-surface/style.module.css b/apps/ui/src/features/sites/site-preview/preview-surface/style.module.css
index d696d51cba..01536fd84b 100644
--- a/apps/ui/src/features/sites/site-preview/preview-surface/style.module.css
+++ b/apps/ui/src/features/sites/site-preview/preview-surface/style.module.css
@@ -9,7 +9,7 @@
 	min-width: 0;
 	min-height: 0;
 	overflow: hidden;
-	transition: opacity var(--motion-duration-surface) var(--motion-ease-enter);
+	transition: opacity var( --motion-duration-surface ) var( --motion-ease-enter );
 }
 
 /* A loading page hides at once, showing the loading stage behind it, and
@@ -43,20 +43,16 @@
 	align-items: center;
 	justify-content: center;
 	pointer-events: none;
-	background-color: color-mix(
-		in srgb,
-		var(--chrome) 60%,
-		transparent
-	);
+	background-color: color-mix( in srgb, var( --chrome ) 60%, transparent );
 }
 
 .spinner {
 	width: 20px;
 	height: 20px;
-	border-radius: var(--radius-full);
-	border: 2px solid var(--border);
-	border-top-color: var(--accent-text);
-	animation: global(studio-spin) 0.8s linear infinite;
+	border-radius: var( --radius-full );
+	border: 2px solid var( --border );
+	border-top-color: var( --accent-text );
+	animation: global( studio-spin ) 0.8s linear infinite;
 }
 
 /* Studio renders the design system itself, so its surface scrolls like a page. */
@@ -69,11 +65,11 @@
 	flex: 1;
 	width: 100%;
 	height: 100%;
-	background-color: var(--chrome);
+	background-color: var( --chrome );
 }
 
 .loadFailed {
 	position: absolute;
 	inset: 0;
-	background-color: var(--chat);
+	background-color: var( --chat );
 }
diff --git a/apps/ui/src/features/sites/site-preview/style.module.css b/apps/ui/src/features/sites/site-preview/style.module.css
index 5b2fb9982c..7f6a99e5f2 100644
--- a/apps/ui/src/features/sites/site-preview/style.module.css
+++ b/apps/ui/src/features/sites/site-preview/style.module.css
@@ -8,7 +8,7 @@
 	height: 100%;
 	min-width: 0;
 	min-height: 0;
-	background-color: var(--chat);
+	background-color: var( --chat );
 	overflow: hidden;
 }
 
@@ -17,7 +17,7 @@
 	min-height: 0;
 	display: flex;
 	position: relative;
-	background-color: var(--chrome);
+	background-color: var( --chrome );
 	overflow: hidden;
 }
 
@@ -36,10 +36,10 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	padding: var(--space-5);
-	background-color: var(--chat);
-	color: var(--muted-foreground);
-	font-size: var(--text-xxs);
+	padding: var( --space-5 );
+	background-color: var( --chat );
+	color: var( --muted-foreground );
+	font-size: var( --text-xxs );
 	text-align: center;
 	overflow: hidden;
 }
@@ -49,7 +49,7 @@
 	z-index: 1;
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-3);
+	gap: var( --space-3 );
 	align-items: center;
-	width: min(100%, 420px);
+	width: min( 100%, 420px );
 }
diff --git a/apps/ui/src/features/sites/stopped-site-preview/style.module.css b/apps/ui/src/features/sites/stopped-site-preview/style.module.css
index 5b8a1b637e..717c1270d6 100644
--- a/apps/ui/src/features/sites/stopped-site-preview/style.module.css
+++ b/apps/ui/src/features/sites/stopped-site-preview/style.module.css
@@ -3,7 +3,7 @@
 	display: block;
 	width: 100%;
 	max-width: 320px;
-	border-radius: var(--radius-lg);
+	border-radius: var( --radius-lg );
 	cursor: pointer;
 }
 
@@ -14,9 +14,9 @@
 	width: 100%;
 	aspect-ratio: 16 / 10;
 	overflow: hidden;
-	border-radius: var(--radius-sm);
-	background: var(--muted);
-	transition: transform var(--motion-duration-surface) var(--motion-ease-enter);
+	border-radius: var( --radius-sm );
+	background: var( --muted );
+	transition: transform var( --motion-duration-surface ) var( --motion-ease-enter );
 }
 
 .frame::after {
@@ -37,10 +37,10 @@
 	align-items: center;
 	justify-content: center;
 	opacity: 0;
-	transform: scale(0.97);
+	transform: scale( 0.97 );
 	transition:
-		opacity var(--motion-duration-surface) var(--motion-ease-enter),
-		transform var(--motion-duration-surface) var(--motion-ease-enter);
+		opacity var( --motion-duration-surface ) var( --motion-ease-enter ),
+		transform var( --motion-duration-surface ) var( --motion-ease-enter );
 	pointer-events: none;
 }
 
@@ -50,9 +50,9 @@
 	height: 64px;
 	align-items: center;
 	justify-content: center;
-	border-radius: var(--radius-full);
-	background: color-mix(in srgb, var(--background) 90%, transparent);
-	color: var(--foreground);
+	border-radius: var( --radius-full );
+	background: color-mix( in srgb, var( --background ) 90%, transparent );
+	color: var( --foreground );
 }
 
 .play svg {
@@ -60,14 +60,14 @@
 	height: 32px;
 }
 
-.root:is(:hover, :focus-visible) .overlay {
+.root:is( :hover, :focus-visible ) .overlay {
 	opacity: 1;
-	transform: scale(1);
+	transform: scale( 1 );
 }
 
-@media (hover: hover) and (pointer: fine) {
+@media ( hover: hover ) and ( pointer: fine ) {
 	.root:hover .frame {
-		transform: scale(1.03);
+		transform: scale( 1.03 );
 	}
 }
 
@@ -76,15 +76,15 @@
 }
 
 .root:focus-visible .play {
-	box-shadow: inset 0 0 0 2px var(--ring);
-	color: var(--accent-text);
+	box-shadow: inset 0 0 0 2px var( --ring );
+	color: var( --accent-text );
 }
 
 .root:disabled {
 	cursor: default;
 }
 
-@media (prefers-reduced-motion: reduce) {
+@media ( prefers-reduced-motion: reduce ) {
 	.frame,
 	.overlay {
 		transition: none;
diff --git a/apps/ui/src/features/sync/publish-panel/style.module.css b/apps/ui/src/features/sync/publish-panel/style.module.css
index ee7f752781..31a295da71 100644
--- a/apps/ui/src/features/sync/publish-panel/style.module.css
+++ b/apps/ui/src/features/sync/publish-panel/style.module.css
@@ -3,31 +3,31 @@
 	display: flex;
 	flex-direction: column;
 	width: 320px;
-	max-width: calc(100vw - 24px);
-	max-height: calc(100dvh - var(--control-size) - 42px);
+	max-width: calc( 100vw - 24px );
+	max-height: calc( 100dvh - var( --control-size ) - 42px );
 	overflow-x: hidden;
 	overflow-y: auto;
-	font-size: var(--text-sm);
-	line-height: var(--text-sm--line-height);
+	font-size: var( --text-sm );
+	line-height: var( --text-sm--line-height );
 }
 
-@media (prefers-reduced-motion: no-preference) {
+@media ( prefers-reduced-motion: no-preference ) {
 	.panel {
 		transition-property: translate, opacity;
-		transition-duration: var(--motion-duration-layout);
-		transition-timing-function: var(--motion-ease-layout);
+		transition-duration: var( --motion-duration-layout );
+		transition-timing-function: var( --motion-ease-layout );
 	}
 
 	.panel[data-starting-style],
 	.panel[data-ending-style] {
 		scale: 1;
-		translate: calc(100% + 12px) 0;
+		translate: calc( 100% + 12px ) 0;
 	}
 }
 
 .trigger {
-	--button-active-duration: var(--motion-duration-layout);
-	--button-active-easing: var(--motion-ease-layout);
+	--button-active-duration: var( --motion-duration-layout );
+	--button-active-easing: var( --motion-ease-layout );
 }
 
 .triggerLabel {
@@ -36,31 +36,31 @@
 
 .errorDot {
 	position: absolute;
-	inset-block-start: calc(var(--space-0_5) * -1);
-	inset-inline-end: calc(var(--space-2) * -1);
+	inset-block-start: calc( var( --space-0_5 ) * -1 );
+	inset-inline-end: calc( var( --space-2 ) * -1 );
 	width: 6px;
 	height: 6px;
-	border-radius: var(--radius-full);
-	background: var(--destructive);
+	border-radius: var( --radius-full );
+	background: var( --destructive );
 }
 
 .panelHeader {
 	display: flex;
 	flex: none;
 	align-items: center;
-	gap: var(--space-3);
-	padding: var(--space-3_5) var(--space-3_5) var(--space-3_5) var(--space-4);
+	gap: var( --space-3 );
+	padding: var( --space-3_5 ) var( --space-3_5 ) var( --space-3_5 ) var( --space-4 );
 }
 
 .body {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-2_5);
-	padding: 0 var(--space-4) var(--space-4);
+	gap: var( --space-2_5 );
+	padding: 0 var( --space-4 ) var( --space-4 );
 }
 
 .bodyInsetTop {
-	padding-top: var(--space-4);
+	padding-top: var( --space-4 );
 }
 
 .loading {
@@ -74,41 +74,41 @@
 	margin: 0;
 	min-width: 0;
 	overflow-wrap: anywhere;
-	font-size: var(--text-sm);
-	font-weight: var(--font-weight-medium);
-	line-height: var(--text-sm--line-height);
+	font-size: var( --text-sm );
+	font-weight: var( --font-weight-medium );
+	line-height: var( --text-sm--line-height );
 	letter-spacing: -0.02em;
 }
 
 .text,
 .description {
-	color: var(--muted-foreground);
-	font-size: var(--text-sm);
-	line-height: var(--leading-relaxed);
+	color: var( --muted-foreground );
+	font-size: var( --text-sm );
+	line-height: var( --leading-relaxed );
 }
 
 .description {
-	font-size: var(--text-xs);
-	line-height: var(--text-xs--line-height);
+	font-size: var( --text-xs );
+	line-height: var( --text-xs--line-height );
 }
 
 .error {
-	color: var(--destructive);
-	font-size: var(--text-sm);
-	line-height: var(--leading-relaxed);
+	color: var( --destructive );
+	font-size: var( --text-sm );
+	line-height: var( --leading-relaxed );
 }
 
 .errorMessage {
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
-	gap: var(--space-2_5);
+	gap: var( --space-2_5 );
 }
 
 .field {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-0_5);
+	gap: var( --space-0_5 );
 }
 
 .website {
@@ -120,7 +120,7 @@
 .include {
 	display: flex;
 	align-items: center;
-	gap: var(--space-2);
+	gap: var( --space-2 );
 }
 
 .include > .text {
@@ -129,7 +129,7 @@
 
 .footer {
 	display: flex;
-	gap: var(--space-2);
+	gap: var( --space-2 );
 }
 
 .primary {
@@ -139,7 +139,7 @@
 .intro {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-2_5);
+	gap: var( --space-2_5 );
 }
 
 .introActions {
@@ -150,13 +150,13 @@
 .choice {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-1);
+	gap: var( --space-1 );
 }
 
 .choiceButton {
 	flex-direction: column;
 	align-items: flex-start;
-	gap: var(--space-1);
+	gap: var( --space-1 );
 }
 
 .choiceName {
@@ -166,20 +166,20 @@
 
 .choiceLabel {
 	composes: choiceName;
-	color: var(--muted-foreground);
+	color: var( --muted-foreground );
 }
 
 .websiteRow {
 	display: flex;
 	align-items: center;
-	gap: var(--space-2);
+	gap: var( --space-2 );
 }
 
 .websiteRowText {
 	display: flex;
 	flex: 1;
 	flex-direction: column;
-	gap: var(--space-0_5);
+	gap: var( --space-0_5 );
 	min-width: 0;
 }
 
@@ -187,9 +187,9 @@
 	composes: truncate from '@/lib/theme/recipes.module.css';
 	display: block;
 	min-width: 0;
-	font-size: var(--text-sm);
-	font-weight: var(--font-weight-medium);
-	line-height: var(--text-sm--line-height);
+	font-size: var( --text-sm );
+	font-weight: var( --font-weight-medium );
+	line-height: var( --text-sm--line-height );
 	letter-spacing: -0.02em;
 }
 
@@ -197,13 +197,13 @@
 .success {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-2_5);
+	gap: var( --space-2_5 );
 }
 
 .progressTitle {
 	display: flex;
 	align-items: center;
-	gap: var(--space-2);
+	gap: var( --space-2 );
 }
 
 .stack,
@@ -211,17 +211,17 @@
 .fileChildren {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-2);
+	gap: var( --space-2 );
 }
 
 .fileChildren {
-	padding-inline-start: var(--space-6);
+	padding-inline-start: var( --space-6 );
 }
 
 .selectionRow {
 	display: flex;
 	align-items: center;
-	gap: var(--space-2);
+	gap: var( --space-2 );
 }
 
 .disclosure {
@@ -241,13 +241,13 @@
 .symlink {
 	display: inline-flex;
 	flex: none;
-	color: var(--muted-foreground);
+	color: var( --muted-foreground );
 }
 
 @keyframes transfer-dot {
 	0% {
 		opacity: 0;
-		transform: translateY(3px);
+		transform: translateY( 3px );
 	}
 
 	25%,
@@ -257,7 +257,7 @@
 
 	100% {
 		opacity: 0;
-		transform: translateY(-3px);
+		transform: translateY( -3px );
 	}
 }
 
@@ -265,18 +265,18 @@
 	flex: none;
 }
 
-@media (prefers-reduced-motion: no-preference) {
+@media ( prefers-reduced-motion: no-preference ) {
 	.transferIcon circle {
 		animation: transfer-dot 960ms linear infinite;
 		transform-box: fill-box;
 		transform-origin: center;
 	}
 
-	.transferIcon circle:nth-child(2) {
+	.transferIcon circle:nth-child( 2 ) {
 		animation-delay: -120ms;
 	}
 
-	.transferIcon circle:nth-child(3) {
+	.transferIcon circle:nth-child( 3 ) {
 		animation-delay: -240ms;
 	}
 
diff --git a/apps/ui/src/lib/theme/recipes.module.css b/apps/ui/src/lib/theme/recipes.module.css
index 6956311605..c0038da4e6 100644
--- a/apps/ui/src/lib/theme/recipes.module.css
+++ b/apps/ui/src/lib/theme/recipes.module.css
@@ -33,7 +33,7 @@
 		position: absolute;
 		width: 7px;
 		height: 7px;
-		border-radius: 50%;
+		border-radius: var( --radius-full );
 		background-color: var( --accent );
 	}
 }
diff --git a/apps/ui/src/lib/ui/button/style.module.css b/apps/ui/src/lib/ui/button/style.module.css
index 367a27ea00..b92367324b 100644
--- a/apps/ui/src/lib/ui/button/style.module.css
+++ b/apps/ui/src/lib/ui/button/style.module.css
@@ -55,7 +55,10 @@
 		cursor: default;
 	}
 
-	.button:is( :disabled, [data-disabled] ):is( :has( [data-slot='spinner'] ), [data-disabled-appearance] ) {
+	.button:is( :disabled, [data-disabled] ):is(
+			:has( [data-slot='spinner'] ),
+			[data-disabled-appearance]
+		) {
 		opacity: 1;
 	}
 
@@ -88,7 +91,11 @@
 	}
 
 	/* Variants. Hover only applies to enabled buttons. */
-	.button:is( :hover:not( :disabled, [data-disabled] ), [aria-expanded='true'], [aria-pressed='true'] ) {
+	.button:is(
+			:hover:not( :disabled, [data-disabled] ),
+			[aria-expanded='true'],
+			[aria-pressed='true']
+		) {
 		background-color: var( --button-hover-background, var( --button-background, transparent ) );
 	}
 
@@ -98,7 +105,11 @@
 			[data-variant='inline-text'],
 			[data-variant='inline-accent'],
 			[data-variant='overlay']
-		):is( :hover:not( :disabled, [data-disabled] ), [aria-expanded='true'], [aria-pressed='true'] ) {
+		):is(
+			:hover:not( :disabled, [data-disabled] ),
+			[aria-expanded='true'],
+			[aria-pressed='true']
+		) {
 		color: var( --button-hover-color );
 	}
 
@@ -179,21 +190,20 @@
 		backdrop-filter: blur( 12px );
 	}
 
-	.button:is( [data-variant='link'], [data-variant='inline-link'], [data-variant='inline-accent'] ):hover:not(
-			:disabled,
-			[data-disabled]
-		) {
+	.button:is(
+			[data-variant='link'],
+			[data-variant='inline-link'],
+			[data-variant='inline-accent']
+		):hover:not( :disabled, [data-disabled] ) {
 		text-decoration: underline;
 	}
 
 	.button[data-variant='link'] {
-
 		color: var( --primary );
 		text-underline-offset: 4px;
 	}
 
 	.button:is( [data-variant='inline-link'], [data-variant='inline-text'] ) {
-
 		color: var( --muted-foreground );
 		text-underline-offset: 2px;
 	}
diff --git a/apps/ui/src/lib/ui/checkbox/style.module.css b/apps/ui/src/lib/ui/checkbox/style.module.css
index f78e9be538..e75de1109e 100644
--- a/apps/ui/src/lib/ui/checkbox/style.module.css
+++ b/apps/ui/src/lib/ui/checkbox/style.module.css
@@ -8,6 +8,7 @@
 		width: 16px;
 		height: 16px;
 		border: 1px solid var( --input );
+		/* eslint-disable-next-line studio/use-theme-tokens -- the rebuild's 4px checkbox. */
 		border-radius: 4px;
 		background-color: light-dark(
 			transparent,
diff --git a/apps/ui/src/lib/ui/code-block/style.module.css b/apps/ui/src/lib/ui/code-block/style.module.css
index 3acf346f50..be5bb45f8a 100644
--- a/apps/ui/src/lib/ui/code-block/style.module.css
+++ b/apps/ui/src/lib/ui/code-block/style.module.css
@@ -1,16 +1,16 @@
 .block {
 	position: relative;
 	overflow: hidden;
-	border-radius: var(--radius-md);
-	background-color: var(--background);
-	color: var(--foreground);
+	border-radius: var( --radius-md );
+	background-color: var( --background );
+	color: var( --foreground );
 }
 
 .pre {
-	padding: var(--space-3);
-	font-family: var(--font-mono);
-	font-size: var(--text-xs);
-	line-height: var(--text-xs--line-height);
+	padding: var( --space-3 );
+	font-family: var( --font-mono );
+	font-size: var( --text-xs );
+	line-height: var( --text-xs--line-height );
 	overflow-x: auto;
 	-webkit-user-select: text;
 	user-select: text;
diff --git a/apps/ui/src/lib/ui/field/style.module.css b/apps/ui/src/lib/ui/field/style.module.css
index 77eaf78103..621fa5a0c2 100644
--- a/apps/ui/src/lib/ui/field/style.module.css
+++ b/apps/ui/src/lib/ui/field/style.module.css
@@ -146,17 +146,20 @@
 		color: var( --destructive );
 	}
 
-	.description :is( a, [data-variant='link'], [data-variant='inline-link'], [data-variant='inline-accent'] ) {
+	.description
+		:is( a, [data-variant='link'], [data-variant='inline-link'], [data-variant='inline-accent'] ) {
 		color: var( --accent-text );
 		text-decoration: none;
 		text-underline-offset: 2px;
 	}
 
 	.description
-		:is( a, [data-variant='link'], [data-variant='inline-link'], [data-variant='inline-accent'] ):is(
-			:hover,
-			:focus-visible
-		) {
+		:is(
+			a,
+			[data-variant='link'],
+			[data-variant='inline-link'],
+			[data-variant='inline-accent']
+		):is( :hover, :focus-visible ) {
 		text-decoration: underline;
 	}
 
diff --git a/apps/ui/src/lib/ui/input-group/style.module.css b/apps/ui/src/lib/ui/input-group/style.module.css
index cfd3a462f0..323093b2fe 100644
--- a/apps/ui/src/lib/ui/input-group/style.module.css
+++ b/apps/ui/src/lib/ui/input-group/style.module.css
@@ -11,7 +11,9 @@
 		outline: none;
 	}
 
-	.group:has( [data-slot='input-group-control']:focus-visible ):not( :has( [aria-invalid='true'] ) ) {
+	.group:has( [data-slot='input-group-control']:focus-visible ):not(
+			:has( [aria-invalid='true'] )
+		) {
 		border-color: var( --ring );
 		box-shadow: inset 0 0 0 1px var( --ring );
 	}
diff --git a/apps/ui/src/lib/ui/marquee-label/style.module.css b/apps/ui/src/lib/ui/marquee-label/style.module.css
index 090099661f..a2bd3bb01a 100644
--- a/apps/ui/src/lib/ui/marquee-label/style.module.css
+++ b/apps/ui/src/lib/ui/marquee-label/style.module.css
@@ -1,5 +1,4 @@
 @layer ui {
-
 	.viewport {
 		composes: truncate from '@/lib/theme/recipes.module.css';
 		flex: 1;
diff --git a/apps/ui/src/lib/ui/resize-handle/style.module.css b/apps/ui/src/lib/ui/resize-handle/style.module.css
index 6abb597e59..46c009d154 100644
--- a/apps/ui/src/lib/ui/resize-handle/style.module.css
+++ b/apps/ui/src/lib/ui/resize-handle/style.module.css
@@ -1,6 +1,6 @@
 .resizeHandle {
 	width: 8px;
-	z-index: var(--z-overlay);
+	z-index: var( --z-overlay );
 	display: flex;
 	align-items: stretch;
 	justify-content: center;
@@ -15,13 +15,13 @@
 }
 
 .resizeHandle:focus-visible .resizeHandleIndicator {
-	background-color: var(--ring);
+	background-color: var( --ring );
 }
 
 .resizeOverlay {
 	position: fixed;
 	inset: 0;
-	z-index: var(--z-drag);
+	z-index: var( --z-drag );
 	cursor: col-resize;
 	user-select: none;
 	-webkit-app-region: no-drag;
diff --git a/apps/ui/src/router/route-no-sites/style.module.css b/apps/ui/src/router/route-no-sites/style.module.css
index 3d8db80f48..6f0213d9ad 100644
--- a/apps/ui/src/router/route-no-sites/style.module.css
+++ b/apps/ui/src/router/route-no-sites/style.module.css
@@ -1,4 +1,4 @@
 /* The content column runs under the header band; centre below it. */
 .empty {
-	margin-top: var(--band-height);
+	margin-top: var( --band-height );
 }
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 6538907f9b..95eafe6841 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -293,9 +293,15 @@ export default defineConfig(
 		},
 	},
 	{
-		// Tokens are defined here, and the onboarding illustrations are artwork drawn
-		// with their own literal values.
-		files: [ 'apps/ui/src/lib/theme/**', 'apps/ui/src/features/onboarding/onboarding-guide/illustrations/**' ],
+		// Tokens are defined in the theme. The onboarding illustrations and Wapuu World
+		// are artwork drawn with their own values, and the design system view renders
+		// a site's own type, colors and radii.
+		files: [
+			'apps/ui/src/lib/theme/**',
+			'apps/ui/src/features/onboarding/onboarding-guide/illustrations/**',
+			'apps/ui/src/features/settings/wapuu-world/**',
+			'apps/ui/src/features/sites/design-system-view/**',
+		],
 		rules: {
 			'studio/use-theme-tokens': 'off',
 		},

From 8119f425b200498704ae5ba63e125a492dc151b4 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Sun, 25 Oct 2026 13:39:14 +0100
Subject: [PATCH 09/10] Format the token rule

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 tools/eslint-plugin-studio/src/rules/use-theme-tokens.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/tools/eslint-plugin-studio/src/rules/use-theme-tokens.js b/tools/eslint-plugin-studio/src/rules/use-theme-tokens.js
index d20f5db0f9..26a70b42bd 100644
--- a/tools/eslint-plugin-studio/src/rules/use-theme-tokens.js
+++ b/tools/eslint-plugin-studio/src/rules/use-theme-tokens.js
@@ -1,4 +1,5 @@
-const COLOR = /#[\da-f]{3,8}\b|\b(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch)\((?!\s*from\b)|\b(?:black|white)\b/i;
+const COLOR =
+	/#[\da-f]{3,8}\b|\b(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch)\((?!\s*from\b)|\b(?:black|white)\b/i;
 const LENGTH = /\d(?:px|rem)\b/;
 
 // Top-level comma-separated layers of a value.

From 6026f78f052dc312bfa7d0fbb9725f4d1bd18e6c Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Sun, 25 Oct 2026 13:54:01 +0100
Subject: [PATCH 10/10] Agentic UI: Lint feature code that reaches into the UI
 primitives

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../account/account-prompt/style.module.css   |  1 +
 .../notifications/app-toasts/index.tsx        |  1 +
 .../settings/settings-view/style.module.css   |  6 +++
 .../blueprint-gallery.module.css              |  1 +
 .../sites/site-preview/address-bar.module.css |  1 +
 .../sync/publish-panel/style.module.css       |  2 +
 eslint.config.mjs                             | 49 ++++++++++++++++++-
 tools/eslint-plugin-studio/src/index.js       |  2 +
 .../src/rules/no-primitive-overrides.js       | 37 ++++++++++++++
 .../tests/no-primitive-overrides.test.ts      | 34 +++++++++++++
 10 files changed, 133 insertions(+), 1 deletion(-)
 create mode 100644 tools/eslint-plugin-studio/src/rules/no-primitive-overrides.js
 create mode 100644 tools/eslint-plugin-studio/tests/no-primitive-overrides.test.ts

diff --git a/apps/ui/src/features/account/account-prompt/style.module.css b/apps/ui/src/features/account/account-prompt/style.module.css
index a2d4d49a57..137f260287 100644
--- a/apps/ui/src/features/account/account-prompt/style.module.css
+++ b/apps/ui/src/features/account/account-prompt/style.module.css
@@ -9,6 +9,7 @@
 	text-wrap: pretty;
 }
 
+/* eslint-disable-next-line studio/no-primitive-overrides -- the prompt drops its dialog offsets inside an Empty, which spaces it already. */
 :global( [data-slot='empty'] ) > .body {
 	margin-top: 0;
 	padding-bottom: 0;
diff --git a/apps/ui/src/features/notifications/app-toasts/index.tsx b/apps/ui/src/features/notifications/app-toasts/index.tsx
index ddc9cafddb..9cf3788997 100644
--- a/apps/ui/src/features/notifications/app-toasts/index.tsx
+++ b/apps/ui/src/features/notifications/app-toasts/index.tsx
@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports -- toasts render only here, so Toast has no primitive.
 import { Toast } from '@base-ui/react/toast';
 import { __ } from '@wordpress/i18n';
 import { useEffect, useRef, useState, type FocusEvent } from 'react';
diff --git a/apps/ui/src/features/settings/settings-view/style.module.css b/apps/ui/src/features/settings/settings-view/style.module.css
index 8d411e279c..6599cec37d 100644
--- a/apps/ui/src/features/settings/settings-view/style.module.css
+++ b/apps/ui/src/features/settings/settings-view/style.module.css
@@ -149,6 +149,7 @@
 }
 
 /* Signed out or offline: grey the figures, since none of them is live. */
+/* eslint-disable-next-line studio/no-primitive-overrides -- Field has no disabled look for a whole group. */
 .usageDisabled :is( [data-slot='field-label'], [data-slot='field-legend'] ) {
 	color: var( --muted-foreground );
 }
@@ -179,10 +180,12 @@
 	gap: var( --space-1 ) var( --space-4 );
 }
 
+/* eslint-disable-next-line studio/no-primitive-overrides -- the meter's label row holds an inline button. */
 .meterSummary > [data-slot='field-label'] {
 	gap: var( --space-1 );
 }
 
+/* eslint-disable-next-line studio/no-primitive-overrides -- the meter's label row holds an inline button. */
 .meterSummary > [data-slot='field-label'] > button {
 	margin-block: calc( var( --space-1 ) * -1 );
 }
@@ -190,16 +193,19 @@
 /* Escalation colors for the AI credits meter (80% / 90% / exhausted). The
    filters brighten the warning token toward the design's yellow and orange —
    taken as-is from the usage-interfaces exploration. */
+/* eslint-disable-next-line studio/no-primitive-overrides -- Progress has no intent colors; the credits meter is the only meter that escalates. */
 .meter[data-intent='warning'] [data-slot='progress-indicator'] {
 	background: var( --warning );
 	filter: saturate( 2 ) brightness( 1.8 );
 }
 
+/* eslint-disable-next-line studio/no-primitive-overrides -- Progress has no intent colors; the credits meter is the only meter that escalates. */
 .meter[data-intent='critical'] [data-slot='progress-indicator'] {
 	background: var( --warning );
 	filter: saturate( 1.6 ) brightness( 1.35 );
 }
 
+/* eslint-disable-next-line studio/no-primitive-overrides -- Progress has no intent colors; the credits meter is the only meter that escalates. */
 .meter[data-intent='exhausted'] [data-slot='progress-indicator'] {
 	background: var( --destructive );
 }
diff --git a/apps/ui/src/features/sites/add-site-dialog/blueprint-gallery.module.css b/apps/ui/src/features/sites/add-site-dialog/blueprint-gallery.module.css
index dbb17564da..0b0ae2f758 100644
--- a/apps/ui/src/features/sites/add-site-dialog/blueprint-gallery.module.css
+++ b/apps/ui/src/features/sites/add-site-dialog/blueprint-gallery.module.css
@@ -85,6 +85,7 @@
 	color: var( --accent-text );
 }
 
+/* eslint-disable-next-line studio/no-primitive-overrides -- the whole card's hover tints the frame behind its thumbnail. */
 .card:hover .thumbnail [data-slot='preview-frame'],
 .card:focus-visible .thumbnail [data-slot='preview-frame'] {
 	background: var( --accent );
diff --git a/apps/ui/src/features/sites/site-preview/address-bar.module.css b/apps/ui/src/features/sites/site-preview/address-bar.module.css
index bd05c77f8f..50f440a4cb 100644
--- a/apps/ui/src/features/sites/site-preview/address-bar.module.css
+++ b/apps/ui/src/features/sites/site-preview/address-bar.module.css
@@ -86,5 +86,6 @@
 
 /* Rows rounded for the menu surface rather than the composer's. */
 .shortcuts {
+	/* eslint-disable-next-line studio/no-primitive-overrides -- the suggestions sit on a menu surface, not the composer. */
 	--command-radius: var( --radius-md );
 }
diff --git a/apps/ui/src/features/sync/publish-panel/style.module.css b/apps/ui/src/features/sync/publish-panel/style.module.css
index 31a295da71..55a80e70e4 100644
--- a/apps/ui/src/features/sync/publish-panel/style.module.css
+++ b/apps/ui/src/features/sync/publish-panel/style.module.css
@@ -25,10 +25,12 @@
 	}
 }
 
+/* eslint-disable studio/no-primitive-overrides -- the trigger dims along with the panel's slide-in. */
 .trigger {
 	--button-active-duration: var( --motion-duration-layout );
 	--button-active-easing: var( --motion-ease-layout );
 }
+/* eslint-enable studio/no-primitive-overrides */
 
 .triggerLabel {
 	position: relative;
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 95eafe6841..c3984a2cd4 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -62,6 +62,26 @@ const UI_LAYERS = {
 	],
 };
 
+// Custom properties the primitives use, beyond the theme tokens. Feature CSS may
+// set only the documented hooks (see apps/ui/COMPONENTS.md).
+const cssCustomProperties = ( dir ) =>
+	fs
+		.readdirSync( uiPath( dir ), { recursive: true } )
+		.filter( ( file ) => file.endsWith( '.css' ) )
+		.flatMap(
+			( file ) =>
+				fs.readFileSync( path.join( uiPath( dir ), file ), 'utf8' ).match( /--[\w-]+/g ) ?? []
+		);
+const THEME_TOKENS = cssCustomProperties( 'lib/theme' );
+const PRIMITIVE_HOOKS = [
+	'--button-background',
+	'--button-hover-background',
+	'--button-hover-color',
+];
+const PRIMITIVE_PROPERTIES = [ ...new Set( cssCustomProperties( 'lib/ui' ) ) ].filter(
+	( property ) => ! THEME_TOKENS.includes( property ) && ! PRIMITIVE_HOOKS.includes( property )
+);
+
 export default defineConfig(
 	globalIgnores( [
 		'**/node_modules/',
@@ -253,7 +273,18 @@ export default defineConfig(
 		// primitives in `src/lib/ui/`, which stay independent of app code.
 		files: [ 'apps/ui/src/**/*.{ts,tsx}' ],
 		rules: {
-			'no-restricted-imports': [ 'error', { patterns: [ WP_UI_PACKAGES ] } ],
+			'no-restricted-imports': [
+				'error',
+				{
+					patterns: [
+						WP_UI_PACKAGES,
+						{
+							group: [ '@base-ui/react', '@base-ui/react/*' ],
+							message: 'Use the primitives in @/lib/ui, and add one there when none fits.',
+						},
+					],
+				},
+			],
 			'import-x/no-restricted-paths': [ 'error', UI_LAYERS ],
 			'import-x/no-cycle': 'error',
 		},
@@ -290,6 +321,22 @@ export default defineConfig(
 		rules: {
 			'prettier/prettier': 'error',
 			'studio/use-theme-tokens': 'error',
+			'css/no-important': 'error',
+		},
+	},
+	{
+		files: [ 'apps/ui/src/**/*.css' ],
+		ignores: [ 'apps/ui/src/lib/**' ],
+		rules: {
+			'studio/no-primitive-overrides': [ 'error', { properties: PRIMITIVE_PROPERTIES } ],
+		},
+	},
+	{
+		// The reduced-transparency reset has to beat class-scoped rules, and Shiki
+		// colors code tokens with inline styles.
+		files: [ 'apps/ui/src/lib/theme/base.css', 'apps/ui/src/lib/ui/code-block/style.module.css' ],
+		rules: {
+			'css/no-important': 'off',
 		},
 	},
 	{
diff --git a/tools/eslint-plugin-studio/src/index.js b/tools/eslint-plugin-studio/src/index.js
index 432da71048..4fc7cf7da2 100644
--- a/tools/eslint-plugin-studio/src/index.js
+++ b/tools/eslint-plugin-studio/src/index.js
@@ -1,4 +1,5 @@
 import noModuleLevelTranslations from './rules/no-module-level-translations.js';
+import noPrimitiveOverrides from './rules/no-primitive-overrides.js';
 import requireLockBeforeSave from './rules/require-lock-before-save.js';
 import useThemeTokens from './rules/use-theme-tokens.js';
 
@@ -6,6 +7,7 @@ export default {
 	rules: {
 		'require-lock-before-save': requireLockBeforeSave,
 		'no-module-level-translations': noModuleLevelTranslations,
+		'no-primitive-overrides': noPrimitiveOverrides,
 		'use-theme-tokens': useThemeTokens,
 	},
 };
diff --git a/tools/eslint-plugin-studio/src/rules/no-primitive-overrides.js b/tools/eslint-plugin-studio/src/rules/no-primitive-overrides.js
new file mode 100644
index 0000000000..236b890f72
--- /dev/null
+++ b/tools/eslint-plugin-studio/src/rules/no-primitive-overrides.js
@@ -0,0 +1,37 @@
+/** @type {import('eslint').Rule.RuleModule} */
+export default {
+	meta: {
+		type: 'suggestion',
+		docs: {
+			description:
+				"Keep feature CSS out of the UI primitives' internals: their parts and private custom properties.",
+		},
+		schema: [
+			{
+				type: 'object',
+				properties: { properties: { type: 'array', items: { type: 'string' } } },
+				additionalProperties: false,
+			},
+		],
+		messages: {
+			part: "Don't style a primitive's parts through `[data-slot]`. Add a prop or variant to the primitive, or fix it there for every caller.",
+			property:
+				"`{{ property }}` is private to a primitive. Use a variant, or one of the primitive's documented hooks.",
+		},
+	},
+	create( context ) {
+		const properties = new Set( context.options[ 0 ]?.properties ?? [] );
+		return {
+			Rule( node ) {
+				if ( /\[\s*data-slot\b/.test( context.sourceCode.getText( node.prelude ) ) ) {
+					context.report( { node: node.prelude, messageId: 'part' } );
+				}
+			},
+			Declaration( node ) {
+				if ( properties.has( node.property ) ) {
+					context.report( { node, messageId: 'property', data: { property: node.property } } );
+				}
+			},
+		};
+	},
+};
diff --git a/tools/eslint-plugin-studio/tests/no-primitive-overrides.test.ts b/tools/eslint-plugin-studio/tests/no-primitive-overrides.test.ts
new file mode 100644
index 0000000000..9fbafd4191
--- /dev/null
+++ b/tools/eslint-plugin-studio/tests/no-primitive-overrides.test.ts
@@ -0,0 +1,34 @@
+import css from '@eslint/css';
+import { RuleTester } from 'eslint';
+import { describe } from 'vitest';
+import rule from '../src/rules/no-primitive-overrides';
+
+const ruleTester = new RuleTester( {
+	plugins: { css },
+	language: 'css/css',
+	languageOptions: { tolerant: true },
+} );
+
+const options = [ { properties: [ '--button-size' ] } ];
+
+describe( 'no-primitive-overrides', () => {
+	ruleTester.run( 'no-primitive-overrides', rule, {
+		valid: [
+			{ code: '.a { --button-background: var( --muted ); margin: 0; }', options },
+			{ code: '.a[data-state="open"] { opacity: 0.7; }', options },
+		],
+		invalid: [
+			{ code: '.a { --button-size: 24px; }', options, errors: [ { messageId: 'property' } ] },
+			{
+				code: ".a [data-slot='field-label'] { gap: 0; }",
+				options,
+				errors: [ { messageId: 'part' } ],
+			},
+			{
+				code: ":global( [data-slot='empty'] ) > .a { margin: 0; }",
+				options,
+				errors: [ { messageId: 'part' } ],
+			},
+		],
+	} );
+} );