diff --git a/frontend/src/renderer/components/BoardEmptyState.tsx b/frontend/src/renderer/components/BoardEmptyState.tsx
index 9a09fbf8df..61f4642e27 100644
--- a/frontend/src/renderer/components/BoardEmptyState.tsx
+++ b/frontend/src/renderer/components/BoardEmptyState.tsx
@@ -1,45 +1,108 @@
+import { Fragment, type ReactNode } from "react";
 import { Plus } from "lucide-react";
-
 import { useShell } from "../lib/shell-context";
+import { cn } from "../lib/utils";
 import aoLogo from "../assets/ao-logo.png";
 import { CreateProjectFlow } from "./CreateProjectFlow";
+import { TopbarButton } from "./TopbarButton";
 import { OrchestratorIcon } from "./icons";
 
+// The four board zones, in flow order — mirrors COLUMNS in SessionsBoard.tsx
+// (label + dot color + title tint) so the welcome legend pre-teaches exactly
+// what the user will see once the board has sessions.
+const FLOW_LEGEND = [
+	{ label: "Working", dot: "var(--color-working)", titleClass: "text-working" },
+	{ label: "Needs you", dot: "var(--color-warning)", titleClass: "text-warning" },
+	{ label: "In review", dot: "var(--color-text-muted)", titleClass: "text-muted-foreground" },
+	{ label: "Ready to merge", dot: "var(--color-success)", titleClass: "text-success" },
+];
+
+// First-launch board state (no projects registered yet): replaces the four
+// empty kanban columns with orientation — what this app does, the three steps
+// to a first merge, and the same create-project flow the sidebar's + runs.
 export function BoardWelcome() {
 	const { createProject } = useShell();
 	return (
 		<div className="flex h-full min-h-0 items-center justify-center overflow-y-auto">
-			<div className="flex w-full max-w-[460px] flex-col items-center pb-[6vh] text-center">
-				<img src={aoLogo} alt="" aria-hidden="true" className="h-20 w-20 rounded-[16px] object-cover" />
-				<h2 className="mt-5 text-[15px] font-semibold tracking-[-0.01em] text-foreground">
+			<div className="flex w-full max-w-board-empty flex-col items-center pb-empty-offset-y text-center">
+				<img src={aoLogo} alt="" aria-hidden="true" className="size-10 rounded-lg object-cover" />
+				<h2 className="mt-5 text-heading-sm font-semibold tracking-tight-lg text-foreground">
 					Welcome to Agent Orchestrator
 				</h2>
-				<p className="mt-1.5 max-w-[320px] text-[12.5px] leading-[1.65] text-muted-foreground">
-					Add a repository and describe the work. AO runs agents on isolated branches, from start to merge.
+				<p className="mt-2 max-w-preview-content text-md-sm leading-relaxed text-muted-foreground">
+					Add a git repository, describe the work, and AO coordinates agent sessions on isolated branches. This kanban
+					board tracks each session from work through review to merge.
 				</p>
 
+				<ol className="mt-7 w-full divide-y divide-border rounded-panel border border-border bg-surface text-left">
+					<WelcomeStep n="01" title="Add a project">
+						Choose a local git repository and select the agents AO should use.
+					</WelcomeStep>
+					<WelcomeStep n="02" title="Describe a task">
+						Tell the orchestrator what you want done; it creates worker sessions on isolated branches.
+					</WelcomeStep>
+					<WelcomeStep n="03" title="Review and merge">
+						Follow each session from work to review to merge readiness:
+						<span className="mt-2 flex flex-wrap items-center gap-x-1.5 gap-y-1.5">
+							{FLOW_LEGEND.map((zone, index) => (
+								<Fragment key={zone.label}>
+									{index > 0 && (
+										<span aria-hidden="true" className="text-micro text-passive">
+											→
+										</span>
+									)}
+									<span
+										className={cn(
+											"inline-flex items-center gap-1.5 text-micro font-semibold uppercase tracking-wide-md",
+											zone.titleClass,
+										)}
+									>
+										<span className="size-dot-sm rounded-full" style={{ background: zone.dot }} />
+										{zone.label}
+									</span>
+								</Fragment>
+							))}
+						</span>
+					</WelcomeStep>
+				</ol>
+
 				<CreateProjectFlow idleLabel="Add your first project" onCreateProject={createProject}>
 					{({ choosePath, disabled, error, label }) => (
 						<>
-							<button
+							<TopbarButton
 								aria-label="Add your first project"
-								className="mt-7 inline-flex h-8 items-center rounded-md border border-border px-4 text-[13px] font-medium text-foreground transition-colors hover:bg-surface disabled:pointer-events-none disabled:opacity-50"
+								className="mt-7"
 								disabled={disabled}
 								onClick={choosePath}
-								type="button"
+								variant="primary"
 							>
+								<Plus className="size-icon-md" aria-hidden="true" />
 								{label}
-							</button>
-							{error && <p className="mt-3 text-[11px] leading-[1.5] text-error">{error}</p>}
+							</TopbarButton>
+							{error && <p className="mt-3 text-caption leading-body text-error">{error}</p>}
 						</>
 					)}
 				</CreateProjectFlow>
-				<p className="mt-2.5 text-[11px] text-passive">Starts an orchestrator session for the project.</p>
+				<p className="mt-3 text-caption text-passive">
+					Adding a project starts its orchestrator — the agent you talk to.
+				</p>
 			</div>
 		</div>
 	);
 }
 
+function WelcomeStep({ n, title, children }: { n: string; title: string; children: ReactNode }) {
+	return (
+		<li className="flex gap-4 px-4 py-4">
+			<span className="pt-px font-mono text-2xs font-medium leading-loose text-passive">{n}</span>
+			<span className="min-w-0 flex-1">
+				<span className="block text-control font-medium text-foreground">{title}</span>
+				<span className="mt-1 block text-xs leading-body-md text-muted-foreground">{children}</span>
+			</span>
+		</li>
+	);
+}
+
 // Project board with a registered project but no worker sessions yet: a quiet
 // invitation instead of four empty columns. Actions mirror the board header
 // (Orchestrator stays the primary, like the topbar) so the vocabulary holds.
@@ -60,21 +123,20 @@ export function ProjectBoardEmpty({
 }) {
 	return (
 		<div className="flex h-full min-h-0 items-center justify-center overflow-y-auto">
-			<div className="flex w-full max-w-[400px] flex-col items-center pb-[5vh] text-center">
-				<h2 className="text-[15px] font-semibold tracking-[-0.01em] text-foreground">No worker sessions yet</h2>
-				<p className="mt-2 text-[12.5px] leading-[1.6] text-muted-foreground">
+			<div className="flex w-full max-w-preview-content flex-col items-center pb-empty-offset-y text-center">
+				<h2 className="text-subtitle font-semibold tracking-tight text-foreground">No worker sessions yet</h2>
+				<p className="mt-2 text-md-sm leading-relaxed text-muted-foreground">
 					Describe a task and the orchestrator plans it, spawns worker sessions, and tracks them here from work to
 					merge.
 				</p>
 				<div className="mt-5 flex items-center gap-2">
-					<button
+					<TopbarButton
 						aria-label={hasOrchestrator ? "Orchestrator" : "Spawn Orchestrator"}
-						className="dashboard-app-header__primary-btn"
 						disabled={isSpawning || isProjectRestarting}
 						onClick={onOpenOrchestrator}
-						type="button"
+						variant="primary"
 					>
-						<OrchestratorIcon className="h-3.5 w-3.5" aria-hidden="true" />
+						<OrchestratorIcon className="size-icon-md" aria-hidden="true" />
 						{isProjectRestarting
 							? "Restarting..."
 							: isSpawning
@@ -82,20 +144,14 @@ export function ProjectBoardEmpty({
 								: hasOrchestrator
 									? "Orchestrator"
 									: "Spawn Orchestrator"}
-					</button>
-					<button
-						aria-label="New task"
-						className="dashboard-app-header__accent-btn"
-						disabled={isProjectRestarting}
-						onClick={onNewTask}
-						type="button"
-					>
-						<Plus className="h-3.5 w-3.5" aria-hidden="true" />
+					</TopbarButton>
+					<TopbarButton aria-label="New task" disabled={isProjectRestarting} onClick={onNewTask} variant="accent">
+						<Plus className="size-icon-md" aria-hidden="true" />
 						New task
-					</button>
+					</TopbarButton>
 				</div>
 				{spawnError && (
-					<p className="mt-3 text-[11px] leading-[1.5] text-error" role="status">
+					<p className="mt-3 text-caption leading-body text-error" role="status">
 						{spawnError}
 					</p>
 				)}
diff --git a/frontend/src/renderer/components/BrowserPanel.tsx b/frontend/src/renderer/components/BrowserPanel.tsx
index 55af7485dc..24830e4c0d 100644
--- a/frontend/src/renderer/components/BrowserPanel.tsx
+++ b/frontend/src/renderer/components/BrowserPanel.tsx
@@ -4,6 +4,7 @@ import { useBrowserView, type BrowserViewModel } from "../hooks/useBrowserView";
 import type { WorkspaceSession } from "../types/workspace";
 import { Button } from "./ui/button";
 import { Input } from "./ui/input";
+import { cn } from "../lib/utils";
 
 type BrowserPanelProps = {
 	session: WorkspaceSession;
@@ -51,8 +52,14 @@ export function BrowserPanelView({
 	};
 
 	return (
-		<div className="browser-panel" role="tabpanel">
-			<form className="browser-panel__toolbar" onSubmit={submit}>
+		<div
+			className="flex h-full min-h-browser-min flex-col overflow-hidden rounded-lg border border-border bg-background"
+			role="tabpanel"
+		>
+			<form
+				className="flex shrink-0 min-w-0 items-center gap-1 border-b border-border bg-surface p-1.5"
+				onSubmit={submit}
+			>
 				<Button
 					aria-label="Back"
 					disabled={!navState.canGoBack}
@@ -61,7 +68,7 @@ export function BrowserPanelView({
 					type="button"
 					variant="ghost"
 				>
-					<ArrowLeft aria-hidden="true" className="h-4 w-4" />
+					<ArrowLeft aria-hidden="true" className="size-icon-base" />
 				</Button>
 				<Button
 					aria-label="Forward"
@@ -71,7 +78,7 @@ export function BrowserPanelView({
 					type="button"
 					variant="ghost"
 				>
-					<ArrowRight aria-hidden="true" className="h-4 w-4" />
+					<ArrowRight aria-hidden="true" className="size-icon-base" />
 				</Button>
 				<Button
 					aria-label={navState.isLoading ? "Stop" : "Reload"}
@@ -81,16 +88,19 @@ export function BrowserPanelView({
 					variant="ghost"
 				>
 					{navState.isLoading ? (
-						<X aria-hidden="true" className="h-4 w-4" />
+						<X aria-hidden="true" className="size-icon-base" />
 					) : (
-						<RefreshCw aria-hidden="true" className="h-4 w-4" />
+						<RefreshCw aria-hidden="true" className="size-icon-base" />
 					)}
 				</Button>
-				<div className="browser-panel__url">
-					<Globe2 aria-hidden="true" className="browser-panel__url-icon" />
+				<div className="relative min-w-0 flex-1">
+					<Globe2
+						aria-hidden="true"
+						className="pointer-events-none absolute left-2.25 top-1/2 size-icon-md -translate-y-1/2 text-passive"
+					/>
 					<Input
 						aria-label="Browser URL"
-						className="browser-panel__url-input"
+						className="h-browser-url pl-browser-url font-mono text-xs"
 						onChange={(event) => setUrlInput(event.target.value)}
 						placeholder="localhost:5173"
 						value={urlInput}
@@ -104,21 +114,30 @@ export function BrowserPanelView({
 					variant="ghost"
 				>
 					{poppedOut ? (
-						<Minimize2 aria-hidden="true" className="h-4 w-4" />
+						<Minimize2 aria-hidden="true" className="size-icon-base" />
 					) : (
-						<Maximize2 aria-hidden="true" className="h-4 w-4" />
+						<Maximize2 aria-hidden="true" className="size-icon-base" />
 					)}
 				</Button>
 			</form>
-			<div className="browser-panel__content">
-				<div className="browser-panel__slot" ref={slotRef} />
+			<div className="relative min-h-0 flex-1 overflow-hidden bg-background">
+				<div className="absolute inset-0 min-h-px min-w-px" ref={slotRef} />
 				{showStaticPreview ? <StaticPreview url={navState.url} /> : null}
 				{navState.url === "" ? (
-					<div className="browser-panel__overlay">
+					<div className="pointer-events-none absolute inset-0 grid place-items-center p-5 text-center font-mono text-xs text-passive">
 						<p>Enter a dev-server URL to preview it here.</p>
 					</div>
 				) : null}
-				{navState.error ? <p className="browser-panel__error">{navState.error}</p> : null}
+				{navState.error ? (
+					<p
+						className={cn(
+							"absolute inset-x-2.5 bottom-2.5 m-0 border border-error/35 bg-error/8 px-2.5 py-2",
+							"rounded-md text-xs text-destructive",
+						)}
+					>
+						{navState.error}
+					</p>
+				) : null}
 			</div>
 		</div>
 	);
@@ -126,23 +145,23 @@ export function BrowserPanelView({
 
 function StaticPreview({ url }: { url: string }) {
 	return (
-		<div className="absolute inset-0 overflow-auto bg-[#f7f8fb] text-[#17202a]">
-			<div className="border-b border-[#dfe4ea] bg-white px-4 py-3">
-				<div className="text-[11px] font-semibold uppercase tracking-[0.08em] text-[#687384]">AO Preview</div>
-				<div className="mt-1 truncate font-mono text-[12px] text-[#2f5b9d]">{url}</div>
+		<div className="absolute inset-0 overflow-auto bg-preview text-preview-foreground">
+			<div className="border-b border-preview bg-surface px-4 py-3">
+				<div className="text-caption font-semibold uppercase tracking-wide-md text-preview-muted">AO Preview</div>
+				<div className="mt-1 truncate font-mono text-xs text-preview-link">{url}</div>
 			</div>
-			<div className="mx-auto max-w-[760px] px-5 py-6">
-				<div className="rounded-[8px] border border-[#d7dee8] bg-white p-5 shadow-sm">
+			<div className="mx-auto max-w-preview-max px-5 py-6">
+				<div className="rounded-lg border border-preview-card bg-surface p-5 shadow-sm">
 					<div className="flex items-center justify-between gap-3">
 						<div>
-							<h1 className="text-[22px] font-semibold leading-tight tracking-normal text-[#111827]">
+							<h1 className="text-heading-lg font-semibold leading-tight tracking-normal text-preview-heading">
 								Demo app preview
 							</h1>
-							<p className="mt-1 text-[13px] leading-5 text-[#526070]">
+							<p className="mt-1 text-control leading-row text-preview-body">
 								The worker exposed a local Vite app with <span className="font-mono">ao preview</span>.
 							</p>
 						</div>
-						<span className="rounded-[6px] bg-[#e7f8ed] px-2.5 py-1 text-[11px] font-semibold text-[#177245]">
+						<span className="rounded-md bg-preview-success px-2.5 py-1 text-caption font-semibold text-success">
 							Loaded
 						</span>
 					</div>
@@ -152,15 +171,15 @@ function StaticPreview({ url }: { url: string }) {
 							["Build", "ready"],
 							["Latency", "42 ms"],
 						].map(([label, value]) => (
-							<div key={label} className="rounded-[7px] border border-[#e1e7ef] bg-[#fbfcfe] p-3">
-								<div className="text-[11px] font-medium uppercase tracking-[0.06em] text-[#687384]">{label}</div>
-								<div className="mt-1 text-[15px] font-semibold text-[#111827]">{value}</div>
+							<div key={label} className="rounded-md border border-preview-tile bg-preview-tile p-3">
+								<div className="text-caption font-medium uppercase tracking-wide text-preview-muted">{label}</div>
+								<div className="mt-1 text-subtitle font-semibold text-preview-heading">{value}</div>
 							</div>
 						))}
 					</div>
-					<div className="mt-5 rounded-[7px] border border-[#dce4ef] bg-[#0f172a] p-3 font-mono text-[12px] leading-5 text-[#cbd5e1]">
+					<div className="mt-5 rounded-md border border-preview-terminal bg-preview-terminal p-3 font-mono text-xs leading-row text-preview-terminal">
 						<div>$ npm run dev -- --host 127.0.0.1</div>
-						<div className="text-[#86efac]">ready in 418 ms</div>
+						<div className="text-success-bright">ready in 418 ms</div>
 						<div>Local: http://localhost:5173/</div>
 					</div>
 				</div>
diff --git a/frontend/src/renderer/components/CenterPane.tsx b/frontend/src/renderer/components/CenterPane.tsx
index e0a2fca455..7091fe1d3c 100644
--- a/frontend/src/renderer/components/CenterPane.tsx
+++ b/frontend/src/renderer/components/CenterPane.tsx
@@ -1,5 +1,6 @@
 import { ChevronLeft, Maximize2, Minimize2, Shield } from "lucide-react";
 import { useCallback, useEffect, useRef, useState, type WheelEvent } from "react";
+import { TERMINAL_FONT_SIZE_DEFAULT, TERMINAL_FONT_SIZE_MAX, TERMINAL_FONT_SIZE_MIN } from "../lib/design-tokens";
 import type { Theme } from "../stores/ui-store";
 import type { TerminalTarget } from "../types/terminal";
 import { isOrchestratorSession, type WorkspaceSession } from "../types/workspace";
@@ -14,21 +15,18 @@ type CenterPaneProps = {
 };
 
 const terminalFontSizeStorageKey = "ao.terminal.fontSize";
-const DEFAULT_TERMINAL_FONT_SIZE = 12;
-const MIN_TERMINAL_FONT_SIZE = 10;
-const MAX_TERMINAL_FONT_SIZE = 20;
 const WHEEL_ZOOM_THRESHOLD = 80;
 const WHEEL_ZOOM_RESET_MS = 250;
 
 function clampTerminalFontSize(size: number): number {
-	return Math.min(MAX_TERMINAL_FONT_SIZE, Math.max(MIN_TERMINAL_FONT_SIZE, size));
+	return Math.min(TERMINAL_FONT_SIZE_MAX, Math.max(TERMINAL_FONT_SIZE_MIN, size));
 }
 
 function initialTerminalFontSize(): number {
-	if (typeof window === "undefined") return DEFAULT_TERMINAL_FONT_SIZE;
+	if (typeof window === "undefined") return TERMINAL_FONT_SIZE_DEFAULT;
 	const raw = window.localStorage?.getItem(terminalFontSizeStorageKey);
 	const parsed = raw === null ? Number.NaN : Number(raw);
-	if (!Number.isFinite(parsed)) return DEFAULT_TERMINAL_FONT_SIZE;
+	if (!Number.isFinite(parsed)) return TERMINAL_FONT_SIZE_DEFAULT;
 	return clampTerminalFontSize(parsed);
 }
 
@@ -96,29 +94,33 @@ export function CenterPane({ session, theme, daemonReady, terminalTarget, onSele
 			className="terminal-pane-frame flex h-full min-h-0 min-w-0 flex-col bg-background"
 			onWheelCapture={handleWheelZoom}
 		>
-			<div className="terminal-toolbar">
-				<div className="terminal-toolbar__label">
-					<span className="terminal-toolbar__eyebrow">TERMINAL</span>
-					<span className="terminal-toolbar__session">
+			<div className="flex h-toolbar shrink-0 items-center border-b border-border bg-background px-5">
+				<div className="flex min-w-0 items-center gap-3">
+					<span className="shrink-0 font-mono text-caption font-semibold uppercase tracking-wide-lg text-muted-foreground">
+						TERMINAL
+					</span>
+					<span className="min-w-0 truncate font-mono text-control font-semibold text-passive">
 						{!session ? "No session" : isOrchestratorSession(session) ? "Orchestrator" : session.title}
 					</span>
 				</div>
-				<div className="terminal-toolbar__controls">
+				<div className="ml-auto flex items-center gap-3 font-mono text-passive">
 					<button
 						aria-label="Decrease terminal font size"
-						className="terminal-toolbar__control"
-						disabled={fontSize <= MIN_TERMINAL_FONT_SIZE}
+						className="inline-flex size-control-sm items-center justify-center rounded-sm bg-transparent text-control leading-none transition-[background,color,opacity] duration-fast hover:bg-interactive-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-accent/50 disabled:cursor-default disabled:opacity-35 disabled:hover:bg-transparent disabled:hover:text-passive"
+						disabled={fontSize <= TERMINAL_FONT_SIZE_MIN}
 						onClick={() => updateFontSize(-1)}
 						title="Decrease terminal font size"
 						type="button"
 					>
 						-
 					</button>
-					<span className="terminal-toolbar__font-size">{fontSize}px</span>
+					<span className="w-font-size-label text-center text-xs font-semibold text-muted-foreground">
+						{fontSize}px
+					</span>
 					<button
 						aria-label="Increase terminal font size"
-						className="terminal-toolbar__control"
-						disabled={fontSize >= MAX_TERMINAL_FONT_SIZE}
+						className="inline-flex size-control-sm items-center justify-center rounded-sm bg-transparent text-control leading-none transition-[background,color,opacity] duration-fast hover:bg-interactive-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-accent/50 disabled:cursor-default disabled:opacity-35 disabled:hover:bg-transparent disabled:hover:text-passive"
+						disabled={fontSize >= TERMINAL_FONT_SIZE_MAX}
 						onClick={() => updateFontSize(1)}
 						title="Increase terminal font size"
 						type="button"
@@ -128,35 +130,35 @@ export function CenterPane({ session, theme, daemonReady, terminalTarget, onSele
 					<button
 						aria-label={isFullscreen ? "Exit terminal fullscreen" : "Open terminal fullscreen"}
 						aria-pressed={isFullscreen}
-						className="terminal-toolbar__control terminal-toolbar__control--icon"
+						className="ml-1.5 inline-flex size-control-sm items-center justify-center rounded-sm bg-transparent text-control leading-none transition-[background,color] duration-fast hover:bg-interactive-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-accent/50"
 						onClick={() => void toggleFullscreen()}
 						title={isFullscreen ? "Exit fullscreen" : "Fullscreen terminal"}
 						type="button"
 					>
 						{isFullscreen ? (
-							<Minimize2 className="h-3.5 w-3.5" aria-hidden="true" />
+							<Minimize2 className="size-icon-md" aria-hidden="true" />
 						) : (
-							<Maximize2 className="h-3.5 w-3.5" aria-hidden="true" />
+							<Maximize2 className="size-icon-md" aria-hidden="true" />
 						)}
 					</button>
 				</div>
 			</div>
 			{target.kind === "reviewer" ? (
-				<div className="reviewer-terminal-header">
+				<div className="flex h-toolbar shrink-0 items-center gap-3 border-b border-border bg-background px-4">
 					<button
 						aria-label="Back to agent terminal"
-						className="reviewer-terminal-header__back"
+						className="inline-flex h-control-board-sm items-center gap-1.5 rounded-md border border-border bg-transparent px-2.5 text-xs font-semibold leading-none text-muted-foreground transition-colors hover:bg-interactive-hover hover:text-foreground"
 						onClick={onSelectWorkerTerminal}
 						type="button"
 					>
-						<ChevronLeft aria-hidden="true" />
+						<ChevronLeft aria-hidden="true" className="size-icon-lg" />
 						<span>agent</span>
 					</button>
-					<span className="reviewer-terminal-header__role">
-						<Shield aria-hidden="true" />
+					<span className="inline-flex items-center gap-1.5 font-mono text-xs font-semibold text-success-bright">
+						<Shield aria-hidden="true" className="size-icon-lg" />
 						Reviewer
 					</span>
-					<span className="reviewer-terminal-header__harness">{target.harness}</span>
+					<span className="ml-auto truncate font-mono text-xs text-passive">{target.harness}</span>
 				</div>
 			) : null}
 			<div className="min-h-0 flex-1">
diff --git a/frontend/src/renderer/components/CreateProjectAgentSheet.tsx b/frontend/src/renderer/components/CreateProjectAgentSheet.tsx
index 8507fc323a..62fb22ac68 100644
--- a/frontend/src/renderer/components/CreateProjectAgentSheet.tsx
+++ b/frontend/src/renderer/components/CreateProjectAgentSheet.tsx
@@ -84,14 +84,14 @@ export function CreateProjectAgentSheet({
 	return (
 		<Dialog.Root open={open} onOpenChange={(next) => !isCreating && onOpenChange(next)}>
 			<Dialog.Portal>
-				<Dialog.Overlay className="fixed inset-0 z-50 bg-black/55 data-[state=open]:animate-overlay-in" />
-				<Dialog.Content className="fixed left-1/2 top-1/2 z-50 w-[min(420px,calc(100vw-32px))] -translate-x-1/2 -translate-y-1/2 rounded-lg border border-border bg-popover p-0 text-popover-foreground shadow-xl data-[state=open]:animate-modal-in">
+				<Dialog.Overlay className="fixed inset-0 z-overlay bg-scrim data-[state=open]:animate-overlay-in" />
+				<Dialog.Content className="fixed left-1/2 top-1/2 z-overlay w-dialog-md -translate-x-1/2 -translate-y-1/2 rounded-lg border border-border bg-popover p-0 text-popover-foreground shadow-xl data-[state=open]:animate-modal-in">
 					<div className="flex items-start justify-between gap-4 border-b border-border px-5 py-4">
 						<div className="min-w-0">
-							<Dialog.Title className="text-[15px] font-semibold text-foreground">
+							<Dialog.Title className="text-subtitle font-semibold text-foreground">
 								{kind === "workspace" ? "Workspace agents" : "Project agents"}
 							</Dialog.Title>
-							<Dialog.Description className="mt-1 break-all text-[12px] text-muted-foreground">
+							<Dialog.Description className="mt-1 break-all text-xs text-muted-foreground">
 								{path ?? ""}
 							</Dialog.Description>
 						</div>
@@ -102,7 +102,7 @@ export function CreateProjectAgentSheet({
 								aria-label="Close project agents dialog"
 								disabled={isCreating}
 							>
-								<X className="size-4" aria-hidden="true" />
+								<X className="size-icon-base" aria-hidden="true" />
 							</button>
 						</Dialog.Close>
 					</div>
@@ -139,9 +139,9 @@ export function CreateProjectAgentSheet({
 							/>
 						</div>
 
-						{isLoadingAgents && <p className="text-[12px] leading-5 text-muted-foreground">Loading agents...</p>}
+						{isLoadingAgents && <p className="text-xs leading-row text-muted-foreground">Loading agents...</p>}
 
-						<div className="flex items-center justify-between gap-3 text-[12px] leading-5 text-muted-foreground">
+						<div className="flex items-center justify-between gap-3 text-xs leading-row text-muted-foreground">
 							<span>Agent availability is cached.</span>
 							<button
 								type="button"
@@ -154,7 +154,7 @@ export function CreateProjectAgentSheet({
 						</div>
 
 						{displayError && (
-							<div className="flex items-center justify-between gap-3 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-[12px] leading-5 text-destructive">
+							<div className="flex items-center justify-between gap-3 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs leading-row text-destructive">
 								<span>{displayError}</span>
 								<button
 									type="button"
@@ -172,7 +172,7 @@ export function CreateProjectAgentSheet({
 						</div>
 
 						{error && (
-							<div className="rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-[12px] leading-5 text-destructive">
+							<div className="rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs leading-row text-destructive">
 								{error}
 							</div>
 						)}
@@ -241,14 +241,14 @@ export const RequiredAgentField = memo(function RequiredAgentField({
 
 	return (
 		<div className="flex flex-col gap-1.5">
-			<Label htmlFor={id} className="text-[12px] font-medium text-muted-foreground">
+			<Label htmlFor={id} className="text-xs font-medium text-muted-foreground">
 				{label}
 			</Label>
 			<Select value={value} onValueChange={onChange} disabled={disabled}>
-				<SelectTrigger id={id} className="h-8 w-full text-[13px]" aria-invalid={invalid || undefined}>
+				<SelectTrigger id={id} className="h-control-form w-full text-control" aria-invalid={invalid || undefined}>
 					<SelectValue placeholder={placeholder} />
 				</SelectTrigger>
-				<SelectContent position="popper" align="start" sideOffset={4} className="!max-h-80">
+				<SelectContent position="popper" align="start" sideOffset={4} className="!max-h-control-form0">
 					{options.map((agent) => (
 						<SelectItem
 							key={agent.id}
@@ -259,7 +259,7 @@ export const RequiredAgentField = memo(function RequiredAgentField({
 							<span className="flex min-w-0 w-full items-center justify-between gap-4">
 								<span className="truncate">{agent.label}</span>
 								{agent.reason && (
-									<span className="inline-flex shrink-0 items-center gap-1 text-[11px] text-muted-foreground">
+									<span className="inline-flex shrink-0 items-center gap-1 text-caption text-muted-foreground">
 										{agent.warning && <TriangleAlert className="size-3 text-warning" aria-hidden="true" />}
 										{agent.reason}
 									</span>
diff --git a/frontend/src/renderer/components/DashboardSubhead.tsx b/frontend/src/renderer/components/DashboardSubhead.tsx
index 4b0ddc7db4..b9e53c65ed 100644
--- a/frontend/src/renderer/components/DashboardSubhead.tsx
+++ b/frontend/src/renderer/components/DashboardSubhead.tsx
@@ -14,11 +14,11 @@ export function DashboardSubhead({
 	actions?: ReactNode;
 }) {
 	return (
-		<div className="flex items-center gap-3 px-[18px] pt-[22px]">
+		<div className="flex items-center gap-3 px-4.5 pt-5.5">
 			<div className="flex min-w-0 items-baseline gap-3">
-				<h1 className="text-[21px] font-bold tracking-[-0.025em] text-foreground">{title}</h1>
-				{typeof count === "number" && <span className="font-mono text-[13px] text-passive">{count}</span>}
-				<span className="text-[12.5px] text-passive">{subtitle}</span>
+				<h1 className="text-heading font-bold tracking-tight-xl text-foreground">{title}</h1>
+				{typeof count === "number" && <span className="font-mono text-control text-passive">{count}</span>}
+				<span className="text-md-sm text-passive">{subtitle}</span>
 			</div>
 			{actions ? <div className="ml-auto flex shrink-0 items-center gap-2">{actions}</div> : null}
 		</div>
diff --git a/frontend/src/renderer/components/GlobalSettingsForm.tsx b/frontend/src/renderer/components/GlobalSettingsForm.tsx
index bdb6ddf32f..888c35baff 100644
--- a/frontend/src/renderer/components/GlobalSettingsForm.tsx
+++ b/frontend/src/renderer/components/GlobalSettingsForm.tsx
@@ -9,7 +9,7 @@ export function GlobalSettingsForm() {
 	return (
 		<div className="flex h-full min-h-0 flex-col bg-background text-foreground">
 			<DashboardSubhead title="Global settings" subtitle="Settings that apply across all projects" />
-			<div className="min-h-0 flex-1 overflow-y-auto p-[18px]">
+			<div className="min-h-0 flex-1 overflow-y-auto p-4.5">
 				<div className="mx-auto flex max-w-2xl flex-col gap-4">
 					<UpdatesSection />
 					<MigrationSection />
diff --git a/frontend/src/renderer/components/IntakeFields.tsx b/frontend/src/renderer/components/IntakeFields.tsx
index daf3f9f206..3c5c2078bf 100644
--- a/frontend/src/renderer/components/IntakeFields.tsx
+++ b/frontend/src/renderer/components/IntakeFields.tsx
@@ -94,15 +94,15 @@ export function IntakeFields({
 	return (
 		<div className="flex flex-col gap-4">
 			{!compact && (
-				<p className="text-[12px] leading-5 text-muted-foreground">
+				<p className="text-xs leading-row text-muted-foreground">
 					Auto-spawn worker sessions from matching tracker issues.
 				</p>
 			)}
 			<div className="flex items-center gap-2">
-				<label className="flex items-center gap-2.5 text-[13px] text-foreground">
+				<label className="flex items-center gap-2.5 text-control text-foreground">
 					<input
 						type="checkbox"
-						className="h-4 w-4 accent-accent"
+						className="size-icon-base accent-accent"
 						checked={form.enabled}
 						onChange={(e) => onChange({ enabled: e.target.checked })}
 					/>
@@ -114,7 +114,7 @@ export function IntakeFields({
 							<TooltipTrigger asChild>
 								<button
 									type="button"
-									className="grid size-4 place-items-center rounded-full text-muted-foreground hover:text-foreground focus-visible:outline-none"
+									className="grid size-icon-base place-items-center rounded-full text-muted-foreground hover:text-foreground focus-visible:outline-none"
 									aria-label="What does enabling issue intake do?"
 								>
 									<Info className="size-3.5" aria-hidden="true" />
@@ -134,12 +134,12 @@ export function IntakeFields({
 									href={`https://github.com/${repoPreview.value}`}
 									target="_blank"
 									rel="noopener noreferrer"
-									className="text-[13px] text-accent hover:underline"
+									className="text-control text-accent hover:underline"
 								>
 									{repoPreview.value}
 								</a>
 							) : (
-								<span className="text-[13px] text-muted-foreground">
+								<span className="text-control text-muted-foreground">
 									Could not detect a GitHub repo from this project's git origin.
 								</span>
 							)}
@@ -148,14 +148,14 @@ export function IntakeFields({
 					<IntakeField label="Assignee" htmlFor="intakeAssignee">
 						<input
 							id="intakeAssignee"
-							className="h-8 w-full rounded-md border border-input bg-transparent px-2.5 text-[13px] text-foreground placeholder:text-passive focus-visible:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-weak"
+							className="h-control-form w-full rounded-md border border-input bg-transparent px-2.5 text-control text-foreground placeholder:text-passive focus-visible:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-weak"
 							value={form.assignee}
 							onChange={(e) => onChange({ assignee: e.target.value })}
 							placeholder="type username or * for any"
 						/>
 					</IntakeField>
 					{!compact && needsRule && (
-						<p className="text-[12px] leading-5 text-error">Enabling intake requires an assignee.</p>
+						<p className="text-xs leading-row text-error">Enabling intake requires an assignee.</p>
 					)}
 				</>
 			)}
@@ -166,7 +166,7 @@ export function IntakeFields({
 function IntakeField({ label, htmlFor, children }: { label: string; htmlFor?: string; children: React.ReactNode }) {
 	return (
 		<div className="flex flex-col gap-1.5">
-			<Label htmlFor={htmlFor} className="text-[12px] text-muted-foreground">
+			<Label htmlFor={htmlFor} className="text-xs text-muted-foreground">
 				{label}
 			</Label>
 			{children}
diff --git a/frontend/src/renderer/components/MigrationPopup.tsx b/frontend/src/renderer/components/MigrationPopup.tsx
index 28c5a5ffc0..777b1f5e9c 100644
--- a/frontend/src/renderer/components/MigrationPopup.tsx
+++ b/frontend/src/renderer/components/MigrationPopup.tsx
@@ -65,21 +65,21 @@ export function MigrationPopup() {
 			}}
 		>
 			<Dialog.Portal>
-				<Dialog.Overlay className="fixed inset-0 z-50 bg-black/50" />
-				<Dialog.Content className="fixed left-1/2 top-1/2 z-50 w-[440px] -translate-x-1/2 -translate-y-1/2 rounded-lg border border-border bg-surface p-5 shadow-lg">
+				<Dialog.Overlay className="fixed inset-0 z-overlay bg-scrim" />
+				<Dialog.Content className="fixed left-1/2 top-1/2 z-overlay w-dialog-lg -translate-x-1/2 -translate-y-1/2 rounded-lg border border-border bg-surface p-5 shadow-lg">
 					<Dialog.Title className="text-sm font-medium text-foreground">
 						Import projects from your earlier AO?
 					</Dialog.Title>
-					<Dialog.Description className="mt-2 text-[13px] leading-[1.5] text-muted-foreground">
-						We found an existing install at <span className="font-mono text-[11px] text-foreground">{legacyRoot}</span>.
-						Importing brings in your projects. Your old files are never modified, and you can do this later.
+					<Dialog.Description className="mt-2 text-control leading-body text-muted-foreground">
+						We found an existing install at <span className="font-mono text-caption text-foreground">{legacyRoot}</span>
+						. Importing brings in your projects. Your old files are never modified, and you can do this later.
 					</Dialog.Description>
 					{error && (
-						<div className="mt-3 text-[12px] text-destructive">
+						<div className="mt-3 text-xs text-destructive">
 							Migration failed: {error}. Your legacy projects are untouched (nothing is ever deleted). You can retry.
 						</div>
 					)}
-					<p className="mt-3 text-[11px] text-muted-foreground">You can run this again later.</p>
+					<p className="mt-3 text-caption text-muted-foreground">You can run this again later.</p>
 					<div className="mt-4 flex items-center justify-between gap-2">
 						<Button variant="ghost" className="text-destructive" onClick={dontMigrate} disabled={busy} type="button">
 							Don't Migrate
@@ -89,7 +89,7 @@ export function MigrationPopup() {
 								Skip
 							</Button>
 							<Button variant="primary" onClick={proceed} disabled={busy} type="button">
-								{busy && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+								{busy && <Loader2 className="mr-2 size-icon-base animate-spin" />}
 								{error ? "Retry" : "Proceed"}
 							</Button>
 						</div>
diff --git a/frontend/src/renderer/components/MigrationSection.tsx b/frontend/src/renderer/components/MigrationSection.tsx
index bcdb2e546c..ff8c234146 100644
--- a/frontend/src/renderer/components/MigrationSection.tsx
+++ b/frontend/src/renderer/components/MigrationSection.tsx
@@ -109,15 +109,15 @@ export function MigrationSection() {
 	return (
 		<Card>
 			<CardHeader>
-				<CardTitle className="text-[13px]">Migration</CardTitle>
+				<CardTitle className="text-control">Migration</CardTitle>
 			</CardHeader>
 			<CardContent className="flex flex-col gap-4">
-				<p className="text-[12px] leading-5 text-muted-foreground">
+				<p className="text-xs leading-row text-muted-foreground">
 					Import projects and orchestrator sessions from an earlier Agent Orchestrator install. Your old files are never
 					modified, and this is safe to run more than once.
 				</p>
 
-				<div className="flex flex-col gap-2 text-[12px]">
+				<div className="flex flex-col gap-2 text-xs">
 					<Row label="Status">
 						<span className={statusClass(migration.status)}>{STATUS_LABEL[migration.status]}</span>
 					</Row>
@@ -137,7 +137,7 @@ export function MigrationSection() {
 						{query.isLoading ? (
 							<span className="text-passive">Checking…</span>
 						) : available ? (
-							<span className="font-mono text-[11px] text-foreground">{legacyRoot || "found"}</span>
+							<span className="font-mono text-caption text-foreground">{legacyRoot || "found"}</span>
 						) : (
 							<span className="text-passive">None found</span>
 						)}
@@ -145,16 +145,16 @@ export function MigrationSection() {
 				</div>
 
 				{migration.status === "failed" && migration.error && (
-					<p className="text-[12px] leading-5 text-error">
+					<p className="text-xs leading-row text-error">
 						{migration.error}. Your legacy projects are untouched (nothing is ever deleted).
 					</p>
 				)}
 				{run.isError && (
-					<p className="text-[12px] leading-5 text-error">
+					<p className="text-xs leading-row text-error">
 						{run.error instanceof Error ? run.error.message : "Migration failed."}
 					</p>
 				)}
-				{run.isSuccess && !run.isPending && <p className="text-[12px] leading-5 text-success">Migration complete.</p>}
+				{run.isSuccess && !run.isPending && <p className="text-xs leading-row text-success">Migration complete.</p>}
 
 				<div className="flex items-center gap-3">
 					<Button
@@ -163,11 +163,11 @@ export function MigrationSection() {
 						onClick={() => run.mutate()}
 						disabled={run.isPending || (!available && !completed)}
 					>
-						{run.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+						{run.isPending && <Loader2 className="mr-2 size-icon-base animate-spin" />}
 						{buttonLabel}
 					</Button>
 					{!available && !query.isLoading && (
-						<span className="text-[12px] text-passive">Nothing to import from a legacy install.</span>
+						<span className="text-xs text-passive">Nothing to import from a legacy install.</span>
 					)}
 				</div>
 			</CardContent>
diff --git a/frontend/src/renderer/components/NewTaskDialog.test.tsx b/frontend/src/renderer/components/NewTaskDialog.test.tsx
index 9ec8474bce..1af1d019a5 100644
--- a/frontend/src/renderer/components/NewTaskDialog.test.tsx
+++ b/frontend/src/renderer/components/NewTaskDialog.test.tsx
@@ -100,7 +100,7 @@ describe("NewTaskDialog", () => {
 		});
 		expect(onCreated).toHaveBeenCalledWith("task-1");
 		expect(onOpenChange).toHaveBeenCalledWith(false);
-	}, 10_000);
+	}, 20_000);
 
 	it("sends the chosen harness when the user overrides the default", async () => {
 		renderDialog();
diff --git a/frontend/src/renderer/components/NewTaskDialog.tsx b/frontend/src/renderer/components/NewTaskDialog.tsx
index a51f379d91..27c3e7b52e 100644
--- a/frontend/src/renderer/components/NewTaskDialog.tsx
+++ b/frontend/src/renderer/components/NewTaskDialog.tsx
@@ -118,12 +118,12 @@ export function NewTaskDialog({ open, projectId, onCreated, onOpenChange }: NewT
 	return (
 		<Dialog.Root open={open} onOpenChange={onOpenChange}>
 			<Dialog.Portal>
-				<Dialog.Overlay className="fixed inset-0 z-50 bg-black/55 data-[state=open]:animate-overlay-in" />
-				<Dialog.Content className="fixed left-1/2 top-1/2 z-50 w-[min(560px,calc(100vw-32px))] -translate-x-1/2 -translate-y-1/2 rounded-lg border border-border bg-popover p-0 text-popover-foreground shadow-xl data-[state=open]:animate-modal-in">
+				<Dialog.Overlay className="fixed inset-0 z-overlay bg-scrim data-[state=open]:animate-overlay-in" />
+				<Dialog.Content className="fixed left-1/2 top-1/2 z-overlay w-dialog-xl -translate-x-1/2 -translate-y-1/2 rounded-lg border border-border bg-popover p-0 text-popover-foreground shadow-xl data-[state=open]:animate-modal-in">
 					<div className="flex items-start justify-between gap-4 border-b border-border px-5 py-4">
 						<div className="min-w-0">
-							<Dialog.Title className="text-[15px] font-semibold text-foreground">New task</Dialog.Title>
-							<Dialog.Description className="mt-1 text-[12px] text-muted-foreground">
+							<Dialog.Title className="text-subtitle font-semibold text-foreground">New task</Dialog.Title>
+							<Dialog.Description className="mt-1 text-xs text-muted-foreground">
 								Start a worker directly from this project.
 							</Dialog.Description>
 						</div>
@@ -133,14 +133,14 @@ export function NewTaskDialog({ open, projectId, onCreated, onOpenChange }: NewT
 								className="grid size-7 shrink-0 place-items-center rounded-md text-muted-foreground transition hover:bg-surface hover:text-foreground"
 								aria-label="Close new task dialog"
 							>
-								<X className="size-4" aria-hidden="true" />
+								<X className="size-icon-base" aria-hidden="true" />
 							</button>
 						</Dialog.Close>
 					</div>
 
 					<form onSubmit={submit} className="space-y-4 px-5 py-4">
 						<div className="space-y-1.5">
-							<label className="text-[12px] font-medium text-muted-foreground" htmlFor={titleId}>
+							<label className="text-xs font-medium text-muted-foreground" htmlFor={titleId}>
 								Title
 							</label>
 							<Input
@@ -153,12 +153,12 @@ export function NewTaskDialog({ open, projectId, onCreated, onOpenChange }: NewT
 						</div>
 
 						<div className="space-y-1.5">
-							<label className="text-[12px] font-medium text-muted-foreground" htmlFor={promptId}>
+							<label className="text-xs font-medium text-muted-foreground" htmlFor={promptId}>
 								Brief
 							</label>
 							<textarea
 								id={promptId}
-								className="min-h-[112px] w-full resize-y rounded-md border border-border bg-transparent px-3 py-2 text-[13px] leading-relaxed text-foreground outline-none transition placeholder:text-passive focus-visible:border-accent focus-visible:ring-2 focus-visible:ring-accent-weak"
+								className="min-h-textarea-min w-full resize-y rounded-md border border-border bg-transparent px-3 py-2 text-control leading-relaxed text-foreground outline-none transition placeholder:text-passive focus-visible:border-accent focus-visible:ring-2 focus-visible:ring-accent-weak"
 								placeholder="Describe the change, constraints, and expected verification."
 								value={prompt}
 								onChange={(event) => setPrompt(event.target.value)}
@@ -183,7 +183,7 @@ export function NewTaskDialog({ open, projectId, onCreated, onOpenChange }: NewT
 								/>
 								<button
 									type="button"
-									className="text-[12px] text-muted-foreground underline-offset-2 hover:text-foreground hover:underline disabled:pointer-events-none disabled:opacity-50"
+									className="text-xs text-muted-foreground underline-offset-2 hover:text-foreground hover:underline disabled:pointer-events-none disabled:opacity-50"
 									disabled={refreshAgentsMutation.isPending}
 									onClick={() => refreshAgentsMutation.mutate()}
 								>
@@ -191,7 +191,7 @@ export function NewTaskDialog({ open, projectId, onCreated, onOpenChange }: NewT
 								</button>
 							</div>
 							<div className="space-y-1.5">
-								<label className="text-[12px] font-medium text-muted-foreground" htmlFor={branchId}>
+								<label className="text-xs font-medium text-muted-foreground" htmlFor={branchId}>
 									Branch
 								</label>
 								<Input
@@ -204,13 +204,13 @@ export function NewTaskDialog({ open, projectId, onCreated, onOpenChange }: NewT
 						</div>
 
 						{error && (
-							<div className="rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-[12px] text-destructive">
+							<div className="rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive">
 								{error}
 							</div>
 						)}
 
 						{refreshAgentsMutation.isError && (
-							<div className="rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-[12px] text-destructive">
+							<div className="rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive">
 								{refreshAgentsMutation.error instanceof Error
 									? refreshAgentsMutation.error.message
 									: "Could not refresh agent catalog."}
diff --git a/frontend/src/renderer/components/NotificationCenter.test.tsx b/frontend/src/renderer/components/NotificationCenter.test.tsx
index a5c5c0beee..5ae76a8761 100644
--- a/frontend/src/renderer/components/NotificationCenter.test.tsx
+++ b/frontend/src/renderer/components/NotificationCenter.test.tsx
@@ -62,7 +62,7 @@ describe("NotificationCenter", () => {
 		const count = screen.getByText("2");
 
 		expect(bell).toHaveClass("fill-current");
-		expect(count).toHaveClass("text-[11px]");
+		expect(count).toHaveClass("text-caption");
 		expect(count).toHaveClass("text-warning");
 		expect(count).not.toHaveClass("bg-warning");
 		expect(count).not.toHaveClass("rounded-full");
diff --git a/frontend/src/renderer/components/NotificationCenter.tsx b/frontend/src/renderer/components/NotificationCenter.tsx
index 3efc26a33f..a2fc22af93 100644
--- a/frontend/src/renderer/components/NotificationCenter.tsx
+++ b/frontend/src/renderer/components/NotificationCenter.tsx
@@ -12,6 +12,7 @@ import { formatTimeCompact } from "../lib/format-time";
 import { createNotificationsTransport, type NotificationDTO, unreadNotificationsQueryKey } from "../lib/notifications";
 import { captureRendererEvent } from "../lib/telemetry";
 import { cn } from "../lib/utils";
+import { TopbarButton } from "./TopbarButton";
 import {
 	DropdownMenu,
 	DropdownMenuContent,
@@ -103,43 +104,41 @@ export function NotificationCenter({ style }: NotificationCenterProps) {
 	return (
 		<DropdownMenu>
 			<DropdownMenuTrigger asChild>
-				<button
+				<TopbarButton
 					aria-label={unreadCount > 0 ? `${unreadCount} unread notifications` : "Notifications"}
-					className="dashboard-app-header__icon-btn relative"
+					className="relative"
 					style={style}
-					type="button"
+					variant="icon"
 				>
-					<Bell className="h-[15px] w-[15px] fill-current" aria-hidden="true" />
+					<Bell className="size-icon-lg fill-current" aria-hidden="true" />
 					{unreadCount > 0 ? (
-						<span className="pointer-events-none absolute right-[3px] top-[2px] font-mono text-[11px] font-semibold leading-none text-warning">
+						<span className="pointer-events-none absolute right-0.75 top-0.5 font-mono text-caption font-semibold leading-none text-warning">
 							{unreadCount > 99 ? "99+" : unreadCount}
 						</span>
 					) : null}
-				</button>
+				</TopbarButton>
 			</DropdownMenuTrigger>
-			<DropdownMenuContent align="end" className="w-[380px] p-0" sideOffset={8}>
+			<DropdownMenuContent align="end" className="w-notification-width p-0" sideOffset={8}>
 				<div className="flex items-center justify-between gap-3 border-b border-border px-3 py-2">
 					<DropdownMenuLabel className="px-0 py-0">Notifications</DropdownMenuLabel>
 					<button
 						aria-label="Mark all notifications read"
-						className="inline-flex h-7 items-center gap-1.5 rounded-md px-2 text-[12px] text-muted-foreground hover:bg-surface hover:text-foreground disabled:pointer-events-none disabled:opacity-45"
+						className="inline-flex h-control-md items-center gap-1.5 rounded-md px-2 text-xs text-muted-foreground hover:bg-surface hover:text-foreground disabled:pointer-events-none disabled:opacity-45"
 						disabled={unreadCount === 0 || markAllRead.isPending}
 						onClick={() => void markAll()}
 						type="button"
 					>
-						<CheckCheck className="h-3.5 w-3.5" aria-hidden="true" />
+						<CheckCheck className="size-icon-md" aria-hidden="true" />
 						Mark all
 					</button>
 				</div>
-				{actionError ? (
-					<div className="border-b border-border px-3 py-2 text-[12px] text-error">{actionError}</div>
-				) : null}
+				{actionError ? <div className="border-b border-border px-3 py-2 text-xs text-error">{actionError}</div> : null}
 				{notificationsQuery.isError && unreadCount === 0 ? (
-					<div className="px-3 py-8 text-center text-[13px] text-muted-foreground">Could not load notifications.</div>
+					<div className="px-3 py-8 text-center text-control text-muted-foreground">Could not load notifications.</div>
 				) : unreadCount === 0 ? (
-					<div className="px-3 py-8 text-center text-[13px] text-muted-foreground">No unread notifications.</div>
+					<div className="px-3 py-8 text-center text-control text-muted-foreground">No unread notifications.</div>
 				) : (
-					<div className="max-h-[420px] overflow-y-auto p-1">
+					<div className="max-h-notification-max-height overflow-y-auto p-1">
 						{notifications.map((notification, index) => (
 							<div key={notification.id}>
 								<NotificationItem
@@ -171,46 +170,46 @@ function NotificationItem({
 }) {
 	const Icon = notificationIcon(notification.type);
 	return (
-		<div className="grid grid-cols-[26px_minmax(0,1fr)_auto] gap-2 rounded-md px-2 py-2.5">
+		<div className="grid grid-cols-notification gap-2 rounded-md px-2 py-2.5">
 			<div
 				className={cn(
-					"mt-0.5 grid h-6 w-6 place-items-center rounded-md border",
+					"mt-0.5 grid size-control-sm place-items-center rounded-md border",
 					notification.type === "needs_input" && "border-warning/40 text-warning",
 					notification.type === "ready_to_merge" && "border-success/40 text-success",
 					notification.type === "pr_merged" && "border-accent-dim text-accent",
 					notification.type === "pr_closed_unmerged" && "border-error/40 text-error",
 				)}
 			>
-				<Icon className="h-3.5 w-3.5" aria-hidden="true" />
+				<Icon className="size-icon-md" aria-hidden="true" />
 			</div>
 			<div className="min-w-0">
 				<div className="flex min-w-0 items-center gap-2">
-					<p className="truncate text-[13px] font-medium leading-5 text-foreground">{notification.title}</p>
-					<span className="shrink-0 text-[11px] text-passive">{formatTimeCompact(notification.createdAt)}</span>
+					<p className="truncate text-control font-medium leading-row text-foreground">{notification.title}</p>
+					<span className="shrink-0 text-caption text-passive">{formatTimeCompact(notification.createdAt)}</span>
 				</div>
 				{notification.body ? (
-					<p className="mt-0.5 line-clamp-2 text-[12px] leading-5 text-muted-foreground">{notification.body}</p>
+					<p className="mt-0.5 line-clamp-2 text-xs leading-row text-muted-foreground">{notification.body}</p>
 				) : null}
 			</div>
 			<div className="flex items-start gap-1">
 				<button
 					aria-label="Open notification target"
-					className="grid h-7 w-7 place-items-center rounded-md text-muted-foreground hover:bg-surface hover:text-foreground"
+					className="grid size-control-md place-items-center rounded-md text-muted-foreground hover:bg-surface hover:text-foreground"
 					onClick={() => onOpen(notification)}
 					title="Open target"
 					type="button"
 				>
-					<ExternalLink className="h-3.5 w-3.5" aria-hidden="true" />
+					<ExternalLink className="size-icon-md" aria-hidden="true" />
 				</button>
 				<button
 					aria-label="Mark notification read"
-					className="grid h-7 w-7 place-items-center rounded-md text-muted-foreground hover:bg-surface hover:text-foreground disabled:pointer-events-none disabled:opacity-45"
+					className="grid size-control-md place-items-center rounded-md text-muted-foreground hover:bg-surface hover:text-foreground disabled:pointer-events-none disabled:opacity-45"
 					disabled={disabled}
 					onClick={() => void onMarkRead(notification.id)}
 					title="Mark read"
 					type="button"
 				>
-					<Check className="h-3.5 w-3.5" aria-hidden="true" />
+					<Check className="size-icon-md" aria-hidden="true" />
 				</button>
 			</div>
 		</div>
diff --git a/frontend/src/renderer/components/OrchestratorReplacementDialog.tsx b/frontend/src/renderer/components/OrchestratorReplacementDialog.tsx
index 8c342a789f..ed794efa28 100644
--- a/frontend/src/renderer/components/OrchestratorReplacementDialog.tsx
+++ b/frontend/src/renderer/components/OrchestratorReplacementDialog.tsx
@@ -2,6 +2,7 @@ import * as Dialog from "@radix-ui/react-dialog";
 import { useNavigate } from "@tanstack/react-router";
 import { AlertTriangle, RotateCw, X } from "lucide-react";
 import { findProjectOrchestrator, type WorkspaceSummary } from "../types/workspace";
+import { TopbarButton } from "./TopbarButton";
 
 type OrchestratorReplacementDialogProps = {
 	projectId: string | null;
@@ -34,17 +35,17 @@ export function OrchestratorReplacementDialog({
 	return (
 		<Dialog.Root open={open} onOpenChange={onOpenChange}>
 			<Dialog.Portal>
-				<Dialog.Overlay className="fixed inset-0 z-50 bg-black/50" />
-				<Dialog.Content className="fixed left-1/2 top-1/2 z-50 w-[min(460px,calc(100vw-32px))] -translate-x-1/2 -translate-y-1/2 rounded-lg border border-border bg-surface p-5 shadow-lg">
+				<Dialog.Overlay className="fixed inset-0 z-overlay bg-scrim" />
+				<Dialog.Content className="fixed left-1/2 top-1/2 z-overlay w-dialog-orchestrator -translate-x-1/2 -translate-y-1/2 rounded-lg border border-border bg-surface p-5 shadow-lg">
 					<div className="flex items-start gap-3">
-						<div className="grid size-8 shrink-0 place-items-center rounded-md border border-border bg-surface-subtle text-warning">
-							<AlertTriangle className="size-4" aria-hidden="true" />
+						<div className="grid size-8 shrink-0 place-items-center rounded-md border border-border bg-muted text-warning">
+							<AlertTriangle className="size-icon-base" aria-hidden="true" />
 						</div>
 						<div className="min-w-0 flex-1">
 							<Dialog.Title className="text-sm font-medium text-foreground">
 								Orchestrator replacement failed
 							</Dialog.Title>
-							<Dialog.Description className="mt-2 text-[13px] leading-5 text-muted-foreground">
+							<Dialog.Description className="mt-2 text-control leading-row text-muted-foreground">
 								{error ?? "The project orchestrator could not be replaced."}
 							</Dialog.Description>
 						</div>
@@ -53,25 +54,21 @@ export function OrchestratorReplacementDialog({
 								className="rounded-md p-1 text-passive hover:bg-interactive-hover hover:text-foreground"
 								type="button"
 							>
-								<X className="size-4" aria-hidden="true" />
+								<X className="size-icon-base" aria-hidden="true" />
 								<span className="sr-only">Close</span>
 							</button>
 						</Dialog.Close>
 					</div>
 					<div className="mt-5 flex justify-end gap-2">
 						{orchestrator ? (
-							<button className="dashboard-app-header__primary-btn" onClick={openCurrent} type="button">
+							<TopbarButton onClick={openCurrent} variant="primary">
 								Open current orchestrator
-							</button>
+							</TopbarButton>
 						) : null}
-						<button
-							className="dashboard-app-header__accent-btn"
-							onClick={() => projectId && onRetry(projectId)}
-							type="button"
-						>
+						<TopbarButton onClick={() => projectId && onRetry(projectId)} variant="accent">
 							<RotateCw className="size-3.5" aria-hidden="true" />
 							Retry
-						</button>
+						</TopbarButton>
 					</div>
 				</Dialog.Content>
 			</Dialog.Portal>
diff --git a/frontend/src/renderer/components/PRSummaryDisplay.tsx b/frontend/src/renderer/components/PRSummaryDisplay.tsx
index bf45f5fc4a..d7d8789d82 100644
--- a/frontend/src/renderer/components/PRSummaryDisplay.tsx
+++ b/frontend/src/renderer/components/PRSummaryDisplay.tsx
@@ -28,7 +28,7 @@ export function PRSummaryMeta({
 		return null;
 	}
 	return (
-		<div className={cn("min-w-0 font-mono text-[10.5px] leading-4", className)}>
+		<div className={cn("min-w-0 font-mono text-2xs leading-4", className)}>
 			{primary.length > 0 ? <div className="truncate text-passive">{primary.join(" · ")}</div> : null}
 			{hasDiff ? <PRDiffMeta pr={pr} /> : null}
 		</div>
@@ -90,8 +90,8 @@ export function PRSummaryParts({
 		<div
 			className={cn(
 				stacked
-					? "flex flex-col gap-1.5 font-mono text-[10.5px] leading-4"
-					: "flex flex-wrap gap-x-3 gap-y-1 font-mono text-[10.5px]",
+					? "flex flex-col gap-1.5 font-mono text-2xs leading-4"
+					: "flex flex-wrap gap-x-3 gap-y-1 font-mono text-2xs",
 				className,
 			)}
 		>
diff --git a/frontend/src/renderer/components/ProjectSettingsForm.tsx b/frontend/src/renderer/components/ProjectSettingsForm.tsx
index 8bcec66134..7355c129d2 100644
--- a/frontend/src/renderer/components/ProjectSettingsForm.tsx
+++ b/frontend/src/renderer/components/ProjectSettingsForm.tsx
@@ -57,7 +57,7 @@ export function ProjectSettingsForm({ projectId }: { projectId: string }) {
 	return (
 		<div className="flex h-full min-h-0 flex-col bg-background text-foreground">
 			<DashboardSubhead title="Settings" subtitle={query.data.path} />
-			<div className="min-h-0 flex-1 overflow-y-auto p-[18px]">
+			<div className="min-h-0 flex-1 overflow-y-auto p-4.5">
 				<SettingsBody
 					key={projectId}
 					project={query.data}
@@ -191,9 +191,9 @@ function SettingsBody({ project, projectId, onSaved }: { project: Project; proje
 		>
 			<Card>
 				<CardHeader>
-					<CardTitle className="text-[13px]">Identity</CardTitle>
+					<CardTitle className="text-control">Identity</CardTitle>
 				</CardHeader>
-				<CardContent className="flex flex-col gap-2 font-mono text-[12px] text-muted-foreground">
+				<CardContent className="flex flex-col gap-2 font-mono text-xs text-muted-foreground">
 					<ReadonlyRow label="id" value={project.id} />
 					<ReadonlyRow label="kind" value={project.kind === "workspace" ? "workspace" : "single repo"} />
 					<ReadonlyRow label="path" value={project.path} />
@@ -229,13 +229,13 @@ function SettingsBody({ project, projectId, onSaved }: { project: Project; proje
 
 			<Card>
 				<CardHeader>
-					<CardTitle className="text-[13px]">Worktrees</CardTitle>
+					<CardTitle className="text-control">Worktrees</CardTitle>
 				</CardHeader>
 				<CardContent className="flex flex-col gap-4">
 					<Field label="Default branch" htmlFor="defaultBranch">
 						<input
 							id="defaultBranch"
-							className="h-8 w-full rounded-md border border-input bg-transparent px-2.5 text-[13px] text-foreground placeholder:text-passive focus-visible:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-weak"
+							className="h-control-form w-full rounded-md border border-input bg-transparent px-2.5 text-control text-foreground placeholder:text-passive focus-visible:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-weak"
 							value={form.defaultBranch}
 							onChange={(e) => setForm((f) => ({ ...f, defaultBranch: e.target.value }))}
 							placeholder="main"
@@ -244,7 +244,7 @@ function SettingsBody({ project, projectId, onSaved }: { project: Project; proje
 					<Field label="Session prefix" htmlFor="sessionPrefix">
 						<input
 							id="sessionPrefix"
-							className="h-8 w-full rounded-md border border-input bg-transparent px-2.5 text-[13px] text-foreground placeholder:text-passive focus-visible:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-weak"
+							className="h-control-form w-full rounded-md border border-input bg-transparent px-2.5 text-control text-foreground placeholder:text-passive focus-visible:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-weak"
 							value={form.sessionPrefix}
 							onChange={(e) => setForm((f) => ({ ...f, sessionPrefix: e.target.value }))}
 							placeholder="ao"
@@ -255,7 +255,7 @@ function SettingsBody({ project, projectId, onSaved }: { project: Project; proje
 
 			<Card>
 				<CardHeader>
-					<CardTitle className="text-[13px]">Agents</CardTitle>
+					<CardTitle className="text-control">Agents</CardTitle>
 				</CardHeader>
 				<CardContent className="flex flex-col gap-4">
 					<RequiredAgentField
@@ -282,7 +282,7 @@ function SettingsBody({ project, projectId, onSaved }: { project: Project; proje
 						invalid={validationError !== null && form.orchestratorAgent === ""}
 						onChange={(v) => setForm((f) => ({ ...f, orchestratorAgent: v }))}
 					/>
-					<div className="flex items-center justify-between gap-3 text-[12px] leading-5 text-muted-foreground">
+					<div className="flex items-center justify-between gap-3 text-xs leading-row text-muted-foreground">
 						<span>Agent availability is cached.</span>
 						<button
 							type="button"
@@ -294,19 +294,19 @@ function SettingsBody({ project, projectId, onSaved }: { project: Project; proje
 						</button>
 					</div>
 					{refreshAgentsMutation.isError && (
-						<p className="text-[12px] leading-5 text-error">
+						<p className="text-xs leading-row text-error">
 							{refreshAgentsMutation.error instanceof Error
 								? refreshAgentsMutation.error.message
 								: "Could not refresh agent catalog."}
 						</p>
 					)}
 					{missingRequiredAgent && (
-						<p className="text-[12px] leading-5 text-error">Worker and orchestrator agents are required.</p>
+						<p className="text-xs leading-row text-error">Worker and orchestrator agents are required.</p>
 					)}
 					<Field label="Model override" htmlFor="model">
 						<input
 							id="model"
-							className="h-8 w-full rounded-md border border-input bg-transparent px-2.5 text-[13px] text-foreground placeholder:text-passive focus-visible:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-weak"
+							className="h-control-form w-full rounded-md border border-input bg-transparent px-2.5 text-control text-foreground placeholder:text-passive focus-visible:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-weak"
 							value={form.model}
 							onChange={(e) => setForm((f) => ({ ...f, model: e.target.value }))}
 							placeholder="(agent default)"
@@ -324,7 +324,7 @@ function SettingsBody({ project, projectId, onSaved }: { project: Project; proje
 
 			<Card>
 				<CardHeader>
-					<CardTitle className="text-[13px]">Reviewers</CardTitle>
+					<CardTitle className="text-control">Reviewers</CardTitle>
 				</CardHeader>
 				<CardContent className="flex flex-col gap-4">
 					<Field label="Default reviewer agent" htmlFor="reviewerHarness">
@@ -339,7 +339,7 @@ function SettingsBody({ project, projectId, onSaved }: { project: Project; proje
 
 			<Card>
 				<CardHeader>
-					<CardTitle className="text-[13px]">Tracker intake</CardTitle>
+					<CardTitle className="text-control">Tracker intake</CardTitle>
 				</CardHeader>
 				<CardContent>
 					<IntakeFields form={intakeForm} onChange={patchIntake} repoPreview={{ value: effectiveIntakeRepo }} />
@@ -350,17 +350,15 @@ function SettingsBody({ project, projectId, onSaved }: { project: Project; proje
 				<Button type="submit" variant="primary" disabled={mutation.isPending}>
 					{mutation.isPending ? "Saving…" : "Save changes"}
 				</Button>
-				{validationError && <span className="text-[12px] text-error">{validationError}</span>}
+				{validationError && <span className="text-xs text-error">{validationError}</span>}
 				{mutation.isError && (
-					<span className="text-[12px] text-error">
+					<span className="text-xs text-error">
 						{mutation.error instanceof Error ? mutation.error.message : "Save failed"}
 					</span>
 				)}
-				{savedAt && !mutation.isPending && !mutation.isError && (
-					<span className="text-[12px] text-success">Saved.</span>
-				)}
+				{savedAt && !mutation.isPending && !mutation.isError && <span className="text-xs text-success">Saved.</span>}
 				{replacementError && !mutation.isPending && !mutation.isError && (
-					<span className="text-[12px] text-warning">Orchestrator restart failed: {replacementError}</span>
+					<span className="text-xs text-warning">Orchestrator restart failed: {replacementError}</span>
 				)}
 			</div>
 		</form>
@@ -378,7 +376,7 @@ function PermissionModeSelect({
 }) {
 	return (
 		<Select value={value || "__default__"} onValueChange={(v) => onChange(v === "__default__" ? "" : v)}>
-			<SelectTrigger id={id} className="h-8 w-full text-[13px]">
+			<SelectTrigger id={id} className="h-control-form w-full text-control">
 				<SelectValue />
 			</SelectTrigger>
 			<SelectContent>
@@ -396,7 +394,7 @@ function PermissionModeSelect({
 function ReviewerSelect({ id, value, onChange }: { id: string; value: string; onChange: (value: string) => void }) {
 	return (
 		<Select value={value || "__default__"} onValueChange={(v) => onChange(v === "__default__" ? "" : v)}>
-			<SelectTrigger id={id} className="h-8 w-full text-[13px]">
+			<SelectTrigger id={id} className="h-control-form w-full text-control">
 				<SelectValue />
 			</SelectTrigger>
 			<SelectContent>
@@ -414,7 +412,7 @@ function ReviewerSelect({ id, value, onChange }: { id: string; value: string; on
 function Field({ label, htmlFor, children }: { label: string; htmlFor?: string; children: React.ReactNode }) {
 	return (
 		<div className="flex flex-col gap-1.5">
-			<Label htmlFor={htmlFor} className="text-[12px] text-muted-foreground">
+			<Label htmlFor={htmlFor} className="text-xs text-muted-foreground">
 				{label}
 			</Label>
 			{children}
@@ -433,9 +431,7 @@ function ReadonlyRow({ label, value }: { label: string; value: string }) {
 
 function CenteredNote({ children }: { children: React.ReactNode }) {
 	return (
-		<div className="grid h-full place-items-center bg-background p-6 text-center text-[12px] text-passive">
-			{children}
-		</div>
+		<div className="grid h-full place-items-center bg-background p-6 text-center text-xs text-passive">{children}</div>
 	);
 }
 
diff --git a/frontend/src/renderer/components/PullRequestsPage.tsx b/frontend/src/renderer/components/PullRequestsPage.tsx
index 062c11b191..09bf1b9719 100644
--- a/frontend/src/renderer/components/PullRequestsPage.tsx
+++ b/frontend/src/renderer/components/PullRequestsPage.tsx
@@ -57,17 +57,17 @@ export function PullRequestsPage() {
 				count={rows.length}
 			/>
 
-			<div className="min-h-0 flex-1 overflow-y-auto p-[18px]">
+			<div className="min-h-0 flex-1 overflow-y-auto p-4.5">
 				{rows.length === 0 ? (
-					<p className="py-10 text-center text-[12px] text-passive">No open pull requests.</p>
+					<p className="py-10 text-center text-xs text-passive">No open pull requests.</p>
 				) : (
 					<Table>
 						<TableHeader>
 							<TableRow>
-								<TableHead className="w-16">PR</TableHead>
+								<TableHead className="w-pr-col-number">PR</TableHead>
 								<TableHead>Worker</TableHead>
-								<TableHead className="w-24">State</TableHead>
-								<TableHead className="w-[220px] text-right">Actions</TableHead>
+								<TableHead className="w-pr-col-state">State</TableHead>
+								<TableHead className="w-pr-table-actions text-right">Actions</TableHead>
 							</TableRow>
 						</TableHeader>
 						<TableBody>
@@ -132,10 +132,10 @@ function PRRowView({ row, onOpen }: { row: PRRow; onOpen: () => void }) {
 
 	return (
 		<TableRow className="cursor-pointer" onClick={onOpen}>
-			<TableCell className="font-mono text-[12px] text-muted-foreground">#{row.pr.number}</TableCell>
+			<TableCell className="font-mono text-xs text-muted-foreground">#{row.pr.number}</TableCell>
 			<TableCell className="max-w-0">
-				<div className="truncate text-[13px] text-foreground">{row.pr.title || row.session.title}</div>
-				<div className="truncate font-mono text-[10px] text-passive">
+				<div className="truncate text-control text-foreground">{row.pr.title || row.session.title}</div>
+				<div className="truncate font-mono text-micro text-passive">
 					{[
 						row.session.workspaceName,
 						row.pr.sourceBranch || row.session.branch,
@@ -148,19 +148,19 @@ function PRRowView({ row, onOpen }: { row: PRRow; onOpen: () => void }) {
 				<PRSummaryParts className="mt-1" maxLinks={2} pr={row.pr} />
 			</TableCell>
 			<TableCell>
-				<Badge variant="outline" className={cn("h-5 px-1.5 text-[10px] font-medium", stateTone[row.pr.state])}>
+				<Badge variant="outline" className={cn("h-5 px-1.5 text-micro font-medium", stateTone[row.pr.state])}>
 					{row.pr.state}
 				</Badge>
 			</TableCell>
 			<TableCell className="text-right" onClick={(e) => e.stopPropagation()}>
 				{note ? (
-					<span className={cn("text-[11px]", note.ok ? "text-success" : "text-error")}>{note.text}</span>
+					<span className={cn("text-caption", note.ok ? "text-success" : "text-error")}>{note.text}</span>
 				) : actionable ? (
 					<div className="flex items-center justify-end gap-1.5">
 						<Button
 							size="sm"
 							variant="ghost"
-							className="h-6 px-2 text-[11px]"
+							className="h-6 px-2 text-caption"
 							disabled={resolve.isPending}
 							onClick={() => resolve.mutate()}
 						>
@@ -169,7 +169,7 @@ function PRRowView({ row, onOpen }: { row: PRRow; onOpen: () => void }) {
 						<Button
 							size="sm"
 							variant="primary"
-							className="h-6 px-2 text-[11px]"
+							className="h-6 px-2 text-caption"
 							disabled={merge.isPending}
 							onClick={() => merge.mutate()}
 						>
@@ -177,7 +177,7 @@ function PRRowView({ row, onOpen }: { row: PRRow; onOpen: () => void }) {
 						</Button>
 					</div>
 				) : (
-					<span className="text-[11px] text-passive">—</span>
+					<span className="text-caption text-passive">—</span>
 				)}
 			</TableCell>
 		</TableRow>
diff --git a/frontend/src/renderer/components/ResizeHandle.tsx b/frontend/src/renderer/components/ResizeHandle.tsx
new file mode 100644
index 0000000000..716f08d0b5
--- /dev/null
+++ b/frontend/src/renderer/components/ResizeHandle.tsx
@@ -0,0 +1,24 @@
+import { cn } from "@/lib/utils";
+
+type ResizeHandleProps = React.HTMLAttributes<HTMLDivElement> & {
+	side: "left" | "right";
+};
+
+/** Sidebar / panel drag handle — visual line via `after:` pseudo. */
+export function ResizeHandle({ className, side, ...props }: ResizeHandleProps) {
+	return (
+		<div
+			data-slot="resize-handle"
+			data-testid="resize-handle"
+			className={cn(
+				"absolute top-0 bottom-0 z-[5] w-[length:var(--size-resize-handle)] cursor-col-resize touch-none bg-transparent",
+				"after:absolute after:inset-y-0 after:left-1/2 after:w-[length:var(--size-hairline)] after:-translate-x-1/2 after:bg-transparent after:transition-[background] after:duration-fast after:content-['']",
+				"hover:after:bg-border",
+				side === "right" && "right-[calc(-1*var(--size-resize-handle-offset))]",
+				side === "left" && "left-[calc(-1*var(--size-resize-handle-offset))]",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
diff --git a/frontend/src/renderer/components/RestoreUnavailableDialog.tsx b/frontend/src/renderer/components/RestoreUnavailableDialog.tsx
index f568cc01d9..07addccf91 100644
--- a/frontend/src/renderer/components/RestoreUnavailableDialog.tsx
+++ b/frontend/src/renderer/components/RestoreUnavailableDialog.tsx
@@ -35,22 +35,22 @@ export function RestoreUnavailableDialog({ open, session, onOpenChange, onRecrea
 	return (
 		<Dialog.Root open={open} onOpenChange={onOpenChange}>
 			<Dialog.Portal>
-				<Dialog.Overlay className="fixed inset-0 z-50 bg-black/50" />
-				<Dialog.Content className="fixed left-1/2 top-1/2 z-50 w-[420px] -translate-x-1/2 -translate-y-1/2 rounded-lg border border-border bg-surface p-5 shadow-lg">
+				<Dialog.Overlay className="fixed inset-0 z-overlay bg-scrim" />
+				<Dialog.Content className="fixed left-1/2 top-1/2 z-overlay w-dialog-md -translate-x-1/2 -translate-y-1/2 rounded-lg border border-border bg-surface p-5 shadow-lg">
 					<Dialog.Title className="text-sm font-medium text-foreground">Session can no longer be restored</Dialog.Title>
-					<Dialog.Description className="mt-2 text-[13px] text-muted-foreground">
+					<Dialog.Description className="mt-2 text-control text-muted-foreground">
 						{orchestrator
 							? "This orchestrator has no saved agent session to resume. You can create a new orchestrator on the same branch; its committed work is preserved and the old worktree is cleaned."
 							: "This session has no saved agent session or prompt to resume from."}
 					</Dialog.Description>
-					{error && <div className="mt-3 text-[12px] text-destructive">{error}</div>}
+					{error && <div className="mt-3 text-xs text-destructive">{error}</div>}
 					<div className="mt-4 flex justify-end gap-2">
 						<Button variant="ghost" onClick={() => onOpenChange(false)} disabled={busy}>
 							{orchestrator ? "Cancel" : "Close"}
 						</Button>
 						{orchestrator && (
 							<Button onClick={recreate} disabled={busy}>
-								{busy && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+								{busy && <Loader2 className="mr-2 size-icon-base animate-spin" />}
 								Create new orchestrator
 							</Button>
 						)}
diff --git a/frontend/src/renderer/components/SessionInspector.test.tsx b/frontend/src/renderer/components/SessionInspector.test.tsx
index 78a32c608f..86709d15f6 100644
--- a/frontend/src/renderer/components/SessionInspector.test.tsx
+++ b/frontend/src/renderer/components/SessionInspector.test.tsx
@@ -133,7 +133,7 @@ afterEach(() => {
 describe("SessionInspector PR section", () => {
 	// Scope assertions to the PR section so the card order is explicit.
 	const prSection = (title: string) =>
-		within(screen.getByText(title).closest("section.inspector-section") as HTMLElement);
+		within(screen.getByText(title).closest("[data-testid='inspector-section']") as HTMLElement);
 
 	it("renders one card per PR, ordered actionable-first, when a session owns a stack", () => {
 		renderWithQuery(<SessionInspector session={session([pr(40, "merged"), pr(41, "open"), pr(42, "draft")])} />);
@@ -173,7 +173,7 @@ describe("SessionInspector PR section", () => {
 
 describe("SessionInspector Activity section", () => {
 	const activitySection = () =>
-		within(screen.getByText("Activity").closest("section.inspector-section") as HTMLElement);
+		within(screen.getByText("Activity").closest("[data-testid='inspector-section']") as HTMLElement);
 
 	it.each([
 		["idle", "Idle"],
@@ -223,7 +223,9 @@ describe("SessionInspector Activity section", () => {
 			/>,
 		);
 
-		const activityRow = activitySection().getByText("Idle").closest(".inspector-timeline__ev") as HTMLElement;
+		const activityRow = activitySection()
+			.getByText("Idle")
+			.closest("[data-testid='inspector-timeline-event']") as HTMLElement;
 		expect(within(activityRow).getByText("No Signal")).toBeInTheDocument();
 	});
 
@@ -254,7 +256,9 @@ describe("SessionInspector Activity section", () => {
 			/>,
 		);
 
-		const activityRow = activitySection().getByText("Idle").closest(".inspector-timeline__ev") as HTMLElement;
+		const activityRow = activitySection()
+			.getByText("Idle")
+			.closest("[data-testid='inspector-timeline-event']") as HTMLElement;
 		expect(within(activityRow).getByText(label)).toBeInTheDocument();
 	});
 
@@ -268,7 +272,9 @@ describe("SessionInspector Activity section", () => {
 			/>,
 		);
 
-		const activityRow = activitySection().getByText("Idle").closest(".inspector-timeline__ev") as HTMLElement;
+		const activityRow = activitySection()
+			.getByText("Idle")
+			.closest("[data-testid='inspector-timeline-event']") as HTMLElement;
 		expect(within(activityRow).getByText("Conflict")).toBeInTheDocument();
 	});
 
@@ -286,7 +292,9 @@ describe("SessionInspector Activity section", () => {
 			/>,
 		);
 
-		const activityRow = activitySection().getByText("Working").closest(".inspector-timeline__ev") as HTMLElement;
+		const activityRow = activitySection()
+			.getByText("Working")
+			.closest("[data-testid='inspector-timeline-event']") as HTMLElement;
 		expect(within(activityRow).getByText("2h ago")).toBeInTheDocument();
 	});
 
@@ -303,7 +311,9 @@ describe("SessionInspector Activity section", () => {
 		expect(activitySection().getByText(/Created worktree/)).toBeInTheDocument();
 		expect(activitySection().getByText("Opened")).toBeInTheDocument();
 		expect(activitySection().getByText("PR #7")).toBeInTheDocument();
-		const activityRow = activitySection().getByText("Idle").closest(".inspector-timeline__ev") as HTMLElement;
+		const activityRow = activitySection()
+			.getByText("Idle")
+			.closest("[data-testid='inspector-timeline-event']") as HTMLElement;
 		expect(within(activityRow).getByText("CI Failed")).toBeInTheDocument();
 		expect(within(activityRow).getByText("Changes Requested")).toBeInTheDocument();
 	});
@@ -323,8 +333,8 @@ describe("SessionInspector Activity section", () => {
 			/>,
 		);
 
-		const section = screen.getByText("Activity").closest("section.inspector-section") as HTMLElement;
-		const rows = Array.from(section.querySelectorAll(".inspector-timeline__ev"), (row) =>
+		const section = screen.getByText("Activity").closest("[data-testid='inspector-section']") as HTMLElement;
+		const rows = Array.from(section.querySelectorAll("[data-testid='inspector-timeline-event']"), (row) =>
 			row.textContent?.replace(/\s+/g, " ").trim(),
 		);
 		expect(rows).toEqual([
diff --git a/frontend/src/renderer/components/SessionInspector.tsx b/frontend/src/renderer/components/SessionInspector.tsx
index ded59aa034..712719a20f 100644
--- a/frontend/src/renderer/components/SessionInspector.tsx
+++ b/frontend/src/renderer/components/SessionInspector.tsx
@@ -12,8 +12,10 @@ import { canonicalTrackerIssueId, sortedPRs } from "../types/workspace";
 import { BrowserPanelView } from "./BrowserPanel";
 import type { BrowserViewModel } from "../hooks/useBrowserView";
 import { Badge } from "./ui/badge";
+import { Button } from "./ui/button";
 import { cn } from "../lib/utils";
 import { PRSummaryMeta, PRSummaryParts } from "./PRSummaryDisplay";
+import { StatusPill } from "./StatusPill";
 
 type ProjectConfig = components["schemas"]["ProjectConfig"];
 type PRReviewState = components["schemas"]["PRReviewState"];
@@ -68,6 +70,42 @@ const prStateTone: Record<SessionPRSummary["state"], string> = {
 	closed: "border-error/40 bg-error/10 text-error",
 };
 
+const inspectorShellClass = "@container/inspector flex h-full min-h-0 flex-col overflow-hidden bg-background";
+
+const inspectorBodyClass = "min-h-0 flex-1 overflow-y-auto p-5 pb-10 @max-[300px]/inspector:px-3.5";
+
+const inspectorEmptyClass = "text-xs text-muted-foreground leading-normal";
+
+const kvRowClass =
+	"flex items-center gap-2.5 px-1 py-1.5 text-md-sm @max-[300px]/inspector:flex-col @max-[300px]/inspector:items-start @max-[300px]/inspector:gap-1";
+
+const kvKeyClass = "w-kv-label shrink-0 text-muted-foreground @max-[300px]/inspector:w-auto";
+
+const kvValueClass = "min-w-0 truncate text-foreground @max-[300px]/inspector:w-full";
+
+const kvValueMonoClass = "font-mono text-sm-md";
+
+const reviewerStatusTone: Record<"neutral" | "running" | "success" | "danger", string> = {
+	neutral: "bg-raised text-muted-foreground",
+	running: "bg-working/12 text-working",
+	success: "bg-success/14 text-success",
+	danger: "bg-error/14 text-error",
+};
+
+const reviewerDotTone: Record<"neutral" | "running" | "success" | "danger", string> = {
+	neutral: "bg-passive",
+	running: "bg-working",
+	success: "bg-success",
+	danger: "bg-error",
+};
+
+const reviewerVerdictTone: Record<"neutral" | "running" | "success" | "danger", string> = {
+	neutral: "text-muted-foreground",
+	running: "text-working",
+	success: "text-success",
+	danger: "text-error",
+};
+
 /**
  * Tabbed inspector rail beside the terminal (Summary · Reviews · Browser).
  */
@@ -100,39 +138,44 @@ export function SessionInspector({
 
 	if (!session) {
 		return (
-			<aside className="session-inspector" aria-label="Session inspector">
-				<div className="session-inspector__body">
-					<p className="inspector-empty">Loading session…</p>
+			<aside className={inspectorShellClass} aria-label="Session inspector">
+				<div className={inspectorBodyClass}>
+					<p className={inspectorEmptyClass}>Loading session…</p>
 				</div>
 			</aside>
 		);
 	}
 
 	return (
-		<aside className="session-inspector" aria-label="Session inspector">
-			<div className="session-inspector__tabs" role="tablist">
+		<aside className={inspectorShellClass} aria-label="Session inspector">
+			<div className="flex h-inspector-tabs shrink-0 items-center gap-1 border-b border-border px-3" role="tablist">
 				{VIEWS.map((entry) => (
 					<button
 						key={entry.id}
 						type="button"
 						role="tab"
 						aria-selected={view === entry.id}
-						className={cn("session-inspector__tab", view === entry.id && "is-active")}
+						className={cn(
+							"inline-flex min-w-0 flex-1 items-center justify-center gap-1.5 rounded-md p-1.5 text-sm-md font-semibold text-passive transition-[background,color] duration-fast hover:bg-interactive-hover hover:text-foreground",
+							view === entry.id && "bg-interactive-active text-foreground",
+						)}
 						onClick={() => setView(entry.id)}
 					>
-						<span className="session-inspector__tab-icon">{entry.icon}</span>
-						<span className="session-inspector__tab-label">{entry.label}</span>
+						<span className="inline-flex shrink-0 [&_svg]:size-icon-md">{entry.icon}</span>
+						<span className="truncate">{entry.label}</span>
 					</button>
 				))}
 			</div>
 
 			<div
 				className={cn(
-					"session-inspector__body",
+					inspectorBodyClass,
 					// The Browser tab renders its own bordered panel edge-to-edge, so
 					// drop the body padding for it (except when popped out, where the
 					// body only holds the "return to panel" empty state).
-					view === "browser" && !browserPoppedOut && "session-inspector__body--browser",
+					view === "browser" &&
+						!browserPoppedOut &&
+						"p-0 overflow-hidden [&>[role=tabpanel]]:border-0 [&>[role=tabpanel]]:rounded-none",
 				)}
 			>
 				{view === "summary" ? <SummaryView session={session} /> : null}
@@ -163,8 +206,8 @@ function Section({
 	title: string;
 }) {
 	return (
-		<section className={cn("inspector-section", className)}>
-			<div className="inspector-section__head">
+		<section className={cn("mb-6", className)} data-testid="inspector-section">
+			<div className="mb-3 flex items-center justify-between text-2xs font-semibold uppercase tracking-wide-lg text-passive">
 				<span>{title}</span>
 				{action ?? null}
 			</div>
@@ -184,7 +227,7 @@ function SummaryView({ session }: { session: WorkspaceSession }) {
 		<div role="tabpanel">
 			<Section title={prSectionTitle}>
 				{prSummaries.length === 0 ? (
-					<p className="inspector-empty">No pull request opened yet.</p>
+					<p className={inspectorEmptyClass}>No pull request opened yet.</p>
 				) : (
 					<div className="flex flex-col gap-2">
 						{prSummaries.map((pr) => (
@@ -198,8 +241,8 @@ function SummaryView({ session }: { session: WorkspaceSession }) {
 				<ActivityTimeline session={session} />
 			</Section>
 
-			<Section className="inspector-section--separated" title="Overview">
-				<dl className="inspector-kv">
+			<Section className="border-t border-border pt-5" title="Overview">
+				<dl className="flex flex-col gap-1">
 					<Row k="Agent" v={session.provider} mono />
 					{issueId && <Row k="Issue" v={issueId} mono />}
 					<Row k="Branch" v={branchLabel} mono />
@@ -213,24 +256,24 @@ function SummaryView({ session }: { session: WorkspaceSession }) {
 
 function PRSummaryCard({ pr }: { pr: SessionPRSummary }) {
 	return (
-		<div className="rounded-[7px] border border-border bg-surface px-3 py-2.5">
+		<div className="rounded-md border border-border bg-surface px-3 py-2.5">
 			<div className="flex items-center gap-2">
-				<GitPullRequest className="h-3.5 w-3.5 shrink-0 text-passive" aria-hidden="true" />
-				<span className="text-[12.5px] font-medium text-foreground">PR #{pr.number}</span>
-				<Badge variant="outline" className={cn("h-5 px-1.5 text-[10px] font-medium", prStateTone[pr.state])}>
+				<GitPullRequest className="size-icon-md shrink-0 text-passive" aria-hidden="true" />
+				<span className="text-md-sm font-medium text-foreground">PR #{pr.number}</span>
+				<Badge variant="outline" className={cn("h-5 px-1.5 text-micro font-medium", prStateTone[pr.state])}>
 					{pr.state}
 				</Badge>
 				<a
 					href={prBrowserUrl(pr)}
 					target="_blank"
 					rel="noopener noreferrer"
-					className="ml-auto inline-flex items-center gap-0.5 text-[11px] font-medium text-accent hover:underline"
+					className="ml-auto inline-flex items-center gap-0.5 text-caption font-medium text-accent hover:underline"
 				>
 					<span>Open</span>
-					<ArrowUpRight aria-hidden="true" className="h-3 w-3" strokeWidth={2} />
+					<ArrowUpRight aria-hidden="true" className="size-icon-2xs" strokeWidth={2} />
 				</a>
 			</div>
-			{pr.title ? <div className="mt-2 text-[12px] font-medium leading-snug text-foreground">{pr.title}</div> : null}
+			{pr.title ? <div className="mt-2 text-xs font-medium leading-snug text-foreground">{pr.title}</div> : null}
 			<PRSummaryMeta className="mt-1.5" pr={pr} />
 			<PRSummaryParts className="mt-2" pr={pr} variant="stacked" />
 		</div>
@@ -239,6 +282,13 @@ function PRSummaryCard({ pr }: { pr: SessionPRSummary }) {
 
 type TimelineTone = "now" | "good" | "warn" | "neutral";
 
+const timelineNodeTone: Record<TimelineTone, string> = {
+	neutral: "bg-passive shadow-timeline-dot",
+	now: "bg-working shadow-timeline-dot-now",
+	good: "bg-success shadow-timeline-dot",
+	warn: "bg-warning shadow-timeline-dot",
+};
+
 function ActivityTimeline({ session }: { session: WorkspaceSession }) {
 	const events: { tone: TimelineTone; node: ReactNode; ts: string | null }[] = [];
 
@@ -277,16 +327,16 @@ function ActivityTimeline({ session }: { session: WorkspaceSession }) {
 		tone: "now",
 		node: (
 			<span className="inline-flex flex-wrap items-center gap-1.5">
-				<span className="inspector-timeline__badge">
+				<span className="inline-flex align-middle">
 					<InspectorActivityPill state={session.activity?.state ?? "unknown"} />
 				</span>
 				{session.status === "no_signal" ? (
-					<span className="inspector-timeline__badge">
+					<span className="inline-flex align-middle">
 						<TimelinePill {...ACTIVITY_WARNING_PILL.no_signal} />
 					</span>
 				) : null}
 				{scmTimelineStates(session).map((state) => (
-					<span key={state} className="inspector-timeline__badge">
+					<span key={state} className="inline-flex align-middle">
 						<InspectorScmPill state={state} />
 					</span>
 				))}
@@ -316,20 +366,15 @@ function ActivityTimeline({ session }: { session: WorkspaceSession }) {
 	}
 
 	return (
-		<div className="inspector-timeline">
+		<div className="relative pl-5 before:absolute before:top-1 before:bottom-1.5 before:left-1.25 before:w-px before:bg-border before:content-['']">
 			{events.map((event, index) => (
-				<div
-					key={index}
-					className={cn(
-						"inspector-timeline__ev",
-						event.tone === "now" && "inspector-timeline__ev--now",
-						event.tone === "good" && "inspector-timeline__ev--good",
-						event.tone === "warn" && "inspector-timeline__ev--warn",
-					)}
-				>
-					<span className="inspector-timeline__node" aria-hidden="true" />
-					<div className="inspector-timeline__et">{event.node}</div>
-					{event.ts ? <div className="inspector-timeline__ets">{event.ts}</div> : null}
+				<div key={index} className="relative pb-4 last:pb-0" data-testid="inspector-timeline-event">
+					<span
+						aria-hidden="true"
+						className={cn("absolute -left-4.5 top-0.75 size-icon-xs rounded-full", timelineNodeTone[event.tone])}
+					/>
+					<div className="text-xs leading-normal text-foreground [&_b]:font-semibold">{event.node}</div>
+					{event.ts ? <div className="mt-1 font-mono text-2xs text-passive">{event.ts}</div> : null}
 				</div>
 			))}
 		</div>
@@ -337,23 +382,23 @@ function ActivityTimeline({ session }: { session: WorkspaceSession }) {
 }
 
 const ACTIVITY_PILL: Record<SessionActivityState, { label: string; tone: string; breathe: boolean }> = {
-	active: { label: "Working", tone: "var(--orange)", breathe: true },
-	idle: { label: "Idle", tone: "var(--fg-muted)", breathe: false },
-	waiting_input: { label: "Input Needed", tone: "var(--amber)", breathe: false },
-	exited: { label: "Exited", tone: "var(--fg-muted)", breathe: false },
-	unknown: { label: "Activity Unavailable", tone: "var(--fg-muted)", breathe: false },
+	active: { label: "Working", tone: "var(--color-working)", breathe: true },
+	idle: { label: "Idle", tone: "var(--color-text-muted)", breathe: false },
+	waiting_input: { label: "Input Needed", tone: "var(--color-warning)", breathe: false },
+	exited: { label: "Exited", tone: "var(--color-text-muted)", breathe: false },
+	unknown: { label: "Activity Unavailable", tone: "var(--color-text-muted)", breathe: false },
 };
 
 const ACTIVITY_WARNING_PILL: Record<"no_signal", { label: string; tone: string; breathe: boolean }> = {
-	no_signal: { label: "No Signal", tone: "var(--fg-muted)", breathe: false },
+	no_signal: { label: "No Signal", tone: "var(--color-text-muted)", breathe: false },
 };
 
 type ScmTimelineState = "ci_failed" | "changes_requested" | "conflict";
 
 const SCM_PILL: Record<ScmTimelineState, { label: string; tone: string; breathe: boolean }> = {
-	ci_failed: { label: "CI Failed", tone: "var(--red)", breathe: false },
-	changes_requested: { label: "Changes Requested", tone: "var(--amber)", breathe: false },
-	conflict: { label: "Conflict", tone: "var(--red)", breathe: false },
+	ci_failed: { label: "CI Failed", tone: "var(--color-danger)", breathe: false },
+	changes_requested: { label: "Changes Requested", tone: "var(--color-warning)", breathe: false },
+	conflict: { label: "Conflict", tone: "var(--color-danger)", breathe: false },
 };
 
 function InspectorActivityPill({ state }: { state: SessionActivityState }) {
@@ -365,22 +410,7 @@ function InspectorScmPill({ state }: { state: ScmTimelineState }) {
 }
 
 function TimelinePill({ label, tone, breathe }: { label: string; tone: string; breathe: boolean }) {
-	return (
-		<span
-			className="inline-flex shrink-0 items-center gap-[7px] whitespace-nowrap rounded-[7px] px-[11px] py-[5px] text-[11.5px] font-semibold"
-			style={{
-				color: tone,
-				background: `color-mix(in srgb, ${tone} 7%, transparent)`,
-				boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${tone} 25%, transparent)`,
-			}}
-		>
-			<span
-				className={cn("h-1.5 w-1.5 rounded-full", breathe && "animate-status-pulse")}
-				style={{ background: tone }}
-			/>
-			{label}
-		</span>
-	);
+	return <StatusPill label={label} tone={tone} breathe={breathe} />;
 }
 
 function scmTimelineStates(session: WorkspaceSession): ScmTimelineState[] {
@@ -588,10 +618,10 @@ function ReviewPanel({
 	onOpenTerminal?: OpenReviewerTerminal;
 }) {
 	if (sortedPRs(session).length === 0) {
-		return <p className="inspector-empty">No pull request opened yet.</p>;
+		return <p className={inspectorEmptyClass}>No pull request opened yet.</p>;
 	}
 	if (isLoading) {
-		return <p className="inspector-empty">Loading reviews...</p>;
+		return <p className={inspectorEmptyClass}>Loading reviews...</p>;
 	}
 
 	const latest = reviewStates.find((review) => review.latestRun)?.latestRun;
@@ -606,30 +636,45 @@ function ReviewPanel({
 		reviewStates.every((reviewState) => reviewState.status === "ineligible");
 
 	return (
-		<div className="reviewer-list">
-			{error ? <p className="reviewer-error">{apiErrorMessage(error, "Review request failed")}</p> : null}
-			{notice ? <p className="reviewer-notice">{notice}</p> : null}
-			<div className="reviewer-kicker">
-				<Shield aria-hidden="true" />
-				<span>{harness}</span>
-				<span>reviewer</span>
+		<div className="flex flex-col gap-4">
+			{error ? (
+				<p className="m-0 rounded-md border border-error/28 bg-error/8 px-2.5 py-2 text-sm-md leading-normal text-error">
+					{apiErrorMessage(error, "Review request failed")}
+				</p>
+			) : null}
+			{notice ? (
+				<p className="m-0 rounded-md border border-success/28 bg-success/8 px-2.5 py-2 text-sm-md leading-normal text-success">
+					{notice}
+				</p>
+			) : null}
+			<div className="inline-flex min-w-0 items-center gap-2 font-mono text-control font-semibold text-foreground">
+				<Shield aria-hidden="true" className="size-icon-lg shrink-0 text-passive" />
+				<span className="min-w-0 truncate">{harness}</span>
+				<span className="font-sans text-sm-md font-medium text-passive">reviewer</span>
 			</div>
-			<div className="reviewer-card">
-				<div className="reviewer-card__top">
-					<span className="reviewer-card__label">Pull requests</span>
-					<span className={cn("reviewer-status", `reviewer-status--${aggregateVerdict.tone}`)}>
+			<div className="flex flex-col gap-3 overflow-hidden rounded-lg border border-border bg-surface p-3 @max-[300px]/inspector:overflow-hidden">
+				<div className="flex min-w-0 items-center justify-between gap-2.5 @max-[300px]/inspector:flex-col @max-[300px]/inspector:items-start">
+					<span className="min-w-0 truncate text-xs font-semibold text-muted-foreground">Pull requests</span>
+					<span
+						className={cn(
+							"inline-flex h-control-xs max-w-inspector-status-chip shrink-0 items-center gap-1 overflow-hidden truncate rounded-md px-2 text-2xs font-semibold leading-none @max-[300px]/inspector:max-w-full",
+							reviewerStatusTone[aggregateVerdict.tone],
+						)}
+					>
 						{aggregateVerdict.label}
 					</span>
 				</div>
-				<div className="reviewer-summary-list">
-					{reviewStates.length === 0 ? <p className="inspector-empty">No review state loaded yet.</p> : null}
+				<div className="flex flex-col gap-0 overflow-hidden rounded-md border border-border bg-surface-faint">
+					{reviewStates.length === 0 ? (
+						<p className={cn(inspectorEmptyClass, "p-3")}>No review state loaded yet.</p>
+					) : null}
 					{reviewStates.map((reviewState) => (
 						<ReviewStateRow key={`${reviewState.prUrl}:${reviewState.targetSha}`} reviewState={reviewState} />
 					))}
 				</div>
-				<div className="reviewer-card__actions">
+				<div className="grid grid-cols-2 gap-2.5 pt-1 has-[:only-child]:grid-cols-1 @max-[300px]/inspector:grid-cols-1">
 					<button
-						className="reviewer-card__action reviewer-card__action--primary"
+						className="inline-flex h-control-xl min-w-0 items-center justify-center gap-2 overflow-hidden truncate rounded-md border border-success/42 bg-success/10 px-2.5 text-xs font-semibold text-success-bright transition-[background,border-color,color] duration-fast hover:bg-interactive-hover hover:text-foreground disabled:cursor-not-allowed disabled:opacity-45 [&_svg]:size-icon-md [&_svg]:shrink-0"
 						disabled={runDisabled}
 						onClick={onTrigger}
 						type="button"
@@ -638,7 +683,7 @@ function ReviewPanel({
 						{runAction}
 					</button>
 					<button
-						className="reviewer-card__action"
+						className="inline-flex h-control-xl min-w-0 items-center justify-center gap-2 overflow-hidden truncate rounded-md border border-border bg-raised px-2.5 text-xs font-semibold text-muted-foreground transition-[background,border-color,color] duration-fast hover:bg-interactive-hover hover:text-foreground disabled:cursor-not-allowed disabled:opacity-45 [&_svg]:size-icon-md [&_svg]:shrink-0"
 						disabled={!terminalEnabled}
 						onClick={() => {
 							if (!terminalEnabled) return;
@@ -661,22 +706,28 @@ function ReviewStateRow({ reviewState }: { reviewState: PRReviewState }) {
 	return (
 		<div
 			className={cn(
-				"reviewer-row",
-				`reviewer-row--${verdict.tone}`,
+				"grid min-h-row-md grid-cols-[minmax(0,1fr)_auto] items-center gap-2.5 border-0 border-b border-border bg-transparent p-3 last:border-b-0",
 				reviewState.status === "ineligible" && "opacity-70",
 			)}
 		>
-			<div className="reviewer-row__main">
-				<span className={cn("reviewer-row__dot", `reviewer-row__dot--${verdict.tone}`)} />
-				<div className="reviewer-row__copy">
+			<div className="inline-flex min-w-0 items-center gap-2">
+				<span className={cn("size-dot-sm shrink-0 rounded-full", reviewerDotTone[verdict.tone])} />
+				<div className="grid min-w-0 grid-cols-[auto_auto] items-baseline gap-x-1.5 gap-y-1 text-xs font-semibold text-foreground [&_svg]:hidden">
 					<GitPullRequest aria-hidden="true" />
-					<a href={reviewState.prUrl} target="_blank" rel="noopener noreferrer">
+					<a
+						className="col-span-full min-w-0 truncate no-underline hover:underline"
+						href={reviewState.prUrl}
+						target="_blank"
+						rel="noopener noreferrer"
+					>
 						{title}
 					</a>
-					<span className="reviewer-row__number">#{reviewState.prNumber}</span>
+					<span className="col-start-1 font-mono text-caption text-passive">#{reviewState.prNumber}</span>
 				</div>
 			</div>
-			<span className={cn("reviewer-row__verdict", `reviewer-row__verdict--${verdict.tone}`)}>{verdict.label}</span>
+			<span className={cn("whitespace-nowrap text-caption font-semibold", reviewerVerdictTone[verdict.tone])}>
+				{verdict.label}
+			</span>
 		</div>
 	);
 }
@@ -750,7 +801,16 @@ function BrowserView({
 	// second BrowserPanelView — it would fight the overlay over the shared native
 	// view slot). Exit is via the overlay's own minimize button.
 	if (browserPoppedOut) {
-		return null;
+		return (
+			<div role="tabpanel">
+				<div className={cn(inspectorEmptyClass, "flex flex-col items-center gap-2 py-10 px-5 text-center")}>
+					<p className="text-md-sm text-muted-foreground">Browser preview is in the center pane.</p>
+					<Button onClick={() => onTogglePopOut?.(false)} size="sm" type="button" variant="outline">
+						Return to panel
+					</Button>
+				</div>
+			</div>
+		);
 	}
 
 	if (!browserView) {
@@ -770,9 +830,9 @@ function BrowserView({
 
 function Row({ k, v, mono }: { k: string; v: string; mono?: boolean }) {
 	return (
-		<div className="inspector-kv__row">
-			<dt className="inspector-kv__k">{k}</dt>
-			<dd className={cn("inspector-kv__v", mono && "inspector-kv__v--mono")}>{v}</dd>
+		<div className={kvRowClass}>
+			<dt className={kvKeyClass}>{k}</dt>
+			<dd className={cn(kvValueClass, mono && kvValueMonoClass)}>{v}</dd>
 		</div>
 	);
 }
diff --git a/frontend/src/renderer/components/SessionView.tsx b/frontend/src/renderer/components/SessionView.tsx
index ebd647cdd7..222eabc37f 100644
--- a/frontend/src/renderer/components/SessionView.tsx
+++ b/frontend/src/renderer/components/SessionView.tsx
@@ -171,7 +171,7 @@ export function SessionView({ sessionId }: SessionViewProps) {
 
 	if (!session && !workspaceQuery.isLoading) {
 		return (
-			<div className="grid h-full place-items-center bg-background p-6 text-center font-mono text-[12px] text-passive">
+			<div className="grid h-full place-items-center bg-background p-6 text-center font-mono text-xs text-passive">
 				Session not found. It may have been cleaned up — pick another from the sidebar.
 			</div>
 		);
@@ -194,7 +194,7 @@ export function SessionView({ sessionId }: SessionViewProps) {
 				{hasInspector ? (
 					<>
 						<ResizableHandle
-							className="session-inspector__resize-handle focus-visible:ring-0 focus-visible:ring-offset-0"
+							className="w-1.75 cursor-col-resize touch-none bg-transparent after:w-px after:bg-border-strong hover:after:bg-border focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:after:bg-border data-[separator=active]:after:bg-border"
 							elementRef={inspectorSeparatorRef}
 						/>
 						<ResizablePanel
@@ -211,7 +211,7 @@ export function SessionView({ sessionId }: SessionViewProps) {
 						>
 							{/* Stable content width while the panel animates (yyork pattern):
                   the pane clips instead of reflowing the inspector mid-collapse. */}
-							<div className="h-full min-w-[280px]">
+							<div className="h-full min-w-inspector-min">
 								<SessionInspector
 									browserPoppedOut={browserPoppedOut}
 									isInspectorVisible={isInspectorOpen}
diff --git a/frontend/src/renderer/components/SessionsBoard.tsx b/frontend/src/renderer/components/SessionsBoard.tsx
index 5cd3df1c39..9bce4d7244 100644
--- a/frontend/src/renderer/components/SessionsBoard.tsx
+++ b/frontend/src/renderer/components/SessionsBoard.tsx
@@ -18,6 +18,7 @@ import { NotificationCenter } from "./NotificationCenter";
 import { BoardWelcome, ProjectBoardEmpty } from "./BoardEmptyState";
 import { OrchestratorIcon } from "./icons";
 import { NewTaskDialog } from "./NewTaskDialog";
+import { TopbarButton, TopbarKillError } from "./TopbarButton";
 import { spawnOrchestrator } from "../lib/spawn-orchestrator";
 import { restartProjectOrchestrator } from "../lib/restart-orchestrator";
 import { prBrowserUrl, sessionPRDisplaySummaries } from "../lib/pr-display";
@@ -50,32 +51,32 @@ const COLUMNS: Column[] = [
 	{
 		level: "working",
 		label: "Working",
-		glow: "color-mix(in srgb, var(--orange) 7%, transparent)",
-		dot: "var(--orange)",
+		glow: "color-mix(in srgb, var(--color-working) 7%, transparent)",
+		dot: "var(--color-working)",
 		dotGlow: true,
 		titleClass: "text-working",
 	},
 	{
 		level: "action",
 		label: "Needs you",
-		glow: "color-mix(in srgb, var(--amber) 6%, transparent)",
-		dot: "var(--amber)",
+		glow: "color-mix(in srgb, var(--color-warning) 6%, transparent)",
+		dot: "var(--color-warning)",
 		dotGlow: true,
 		titleClass: "text-warning",
 	},
 	{
 		level: "pending",
 		label: "In review",
-		glow: "var(--kanban-pending-glow)",
-		dot: "var(--fg-muted)",
+		glow: "var(--color-overlay-faint)",
+		dot: "var(--color-text-muted)",
 		dotGlow: false,
 		titleClass: "text-muted-foreground",
 	},
 	{
 		level: "merge",
 		label: "Ready to merge",
-		glow: "color-mix(in srgb, var(--green) 7%, transparent)",
-		dot: "var(--green)",
+		glow: "color-mix(in srgb, var(--color-success) 7%, transparent)",
+		dot: "var(--color-success)",
 		dotGlow: true,
 		titleClass: "text-success",
 	},
@@ -197,28 +198,26 @@ export function SessionsBoard({ projectId }: SessionsBoardProps) {
 		<>
 			{isLinux ? <NotificationCenter /> : null}
 			{visibleSpawnError && !showProjectEmpty && (
-				<span className="dashboard-app-header__kill-error max-w-[320px] truncate" title={visibleSpawnError}>
+				<TopbarKillError className="max-w-content-max truncate" title={visibleSpawnError}>
 					{visibleSpawnError}
-				</span>
+				</TopbarKillError>
 			)}
-			<button
+			<TopbarButton
 				aria-label="New task"
-				className="dashboard-app-header__accent-btn"
 				disabled={isProjectRestarting}
 				onClick={() => setIsNewTaskOpen(true)}
-				type="button"
+				variant="accent"
 			>
-				<Plus className="h-3.5 w-3.5" aria-hidden="true" />
+				<Plus className="size-icon-md" aria-hidden="true" />
 				New task
-			</button>
-			<button
+			</TopbarButton>
+			<TopbarButton
 				aria-label={orchestrator ? "Orchestrator" : "Spawn Orchestrator"}
-				className="dashboard-app-header__primary-btn"
 				disabled={isSpawning || isProjectRestarting}
 				onClick={() => void openOrchestrator()}
-				type="button"
+				variant="primary"
 			>
-				<OrchestratorIcon className="h-3.5 w-3.5" aria-hidden="true" />
+				<OrchestratorIcon className="size-icon-md" aria-hidden="true" />
 				{isProjectRestarting
 					? "Restarting..."
 					: isSpawning
@@ -226,7 +225,7 @@ export function SessionsBoard({ projectId }: SessionsBoardProps) {
 						: orchestrator
 							? "Orchestrator"
 							: "Spawn Orchestrator"}
-			</button>
+			</TopbarButton>
 		</>
 	) : isLinux ? (
 		<NotificationCenter />
@@ -245,26 +244,21 @@ export function SessionsBoard({ projectId }: SessionsBoardProps) {
 				/>
 			)}
 
-			<div className="min-h-0 flex-1 overflow-hidden p-[18px]">
+			<div className="min-h-0 flex-1 overflow-hidden p-4.5">
 				{projectId && health.state !== "ok" ? (
-					<div className="mb-3 flex items-center gap-3 rounded-md border border-border bg-surface px-3 py-2 text-[12px] text-muted-foreground">
-						<AlertTriangle className="size-4 shrink-0 text-warning" aria-hidden="true" />
+					<div className="mb-3 flex items-center gap-3 rounded-md border border-border bg-surface px-3 py-2 text-xs text-muted-foreground">
+						<AlertTriangle className="size-icon-base shrink-0 text-warning" aria-hidden="true" />
 						<span className="min-w-0 flex-1">{health.message}</span>
 						{health.state === "restart_needed" || health.state === "duplicates" ? (
-							<button
-								className="dashboard-app-header__primary-btn"
-								disabled={isProjectRestarting}
-								onClick={() => void restartOrchestrator()}
-								type="button"
-							>
+							<TopbarButton disabled={isProjectRestarting} onClick={() => void restartOrchestrator()} variant="primary">
 								<RotateCw className="size-3.5" aria-hidden="true" />
 								Restart
-							</button>
+							</TopbarButton>
 						) : null}
 					</div>
 				) : null}
 				{workspaceQuery.isError ? (
-					<p className="py-10 text-center text-[12px] text-passive">Could not load sessions.</p>
+					<p className="py-10 text-center text-xs text-passive">Could not load sessions.</p>
 				) : showWelcome ? (
 					<BoardWelcome />
 				) : showProjectEmpty ? (
@@ -286,23 +280,23 @@ export function SessionsBoard({ projectId }: SessionsBoardProps) {
 			</div>
 
 			{done.length > 0 && (
-				<div className="shrink-0 border-t border-border px-[18px]">
+				<div className="shrink-0 border-t border-border px-4.5">
 					{/* agent-orchestrator's done-bar (Dashboard.tsx + globals.css):
 					    a full-width chevron + label + count toggle row. min-h matches
 					    the sidebar footer (7px pad ×2 + 37px Settings button) so this
 					    border-t aligns with the sidebar's footer border. The button is
-					    37px (not the 35.5px its text-[13px] implies) because the
+					    37px (not the 35.5px its text-control implies) because the
 					    unlayered `button { font: inherit }` in styles.css outranks
 					    Tailwind's layered text utilities, leaving it at 14px/21px. */}
 					<button
 						aria-expanded={doneExpanded}
-						className="group flex min-h-[51px] w-full items-center gap-2 py-2 text-muted-foreground transition-colors hover:text-foreground"
+						className="group flex min-h-row-md w-full items-center gap-2 py-2 text-muted-foreground transition-colors hover:text-foreground"
 						onClick={() => setDoneExpanded((v) => !v)}
 						type="button"
 					>
 						<svg
 							aria-hidden="true"
-							className={cn("h-3 w-3 shrink-0 transition-transform duration-150", doneExpanded && "rotate-90")}
+							className={cn("size-icon-2xs shrink-0 transition-transform duration-normal", doneExpanded && "rotate-90")}
 							fill="none"
 							stroke="currentColor"
 							strokeWidth="2"
@@ -310,19 +304,19 @@ export function SessionsBoard({ projectId }: SessionsBoardProps) {
 						>
 							<path d="m9 18 6-6-6-6" />
 						</svg>
-						<span className="font-mono text-[10.5px] font-medium uppercase tracking-[0.05em]">Done / Terminated</span>
-						<span className="ml-auto shrink-0 font-mono text-[10px] text-passive">{done.length}</span>
+						<span className="font-mono text-2xs font-medium uppercase tracking-wide-sm">Done / Terminated</span>
+						<span className="ml-auto shrink-0 font-mono text-micro text-passive">{done.length}</span>
 					</button>
 					{doneExpanded && (
 						<div className="flex flex-wrap gap-2 pb-2.5 pt-1">
 							{done.map((s) => (
 								<button
 									key={s.id}
-									className="rounded-[7px] border border-border bg-surface px-2.5 py-1.5 text-left transition-colors hover:border-border-strong"
+									className="rounded-md border border-border bg-surface px-2.5 py-1.5 text-left transition-colors hover:border-border-strong"
 									onClick={() => openSession(s)}
 									type="button"
 								>
-									<span className="text-[12px] text-muted-foreground">{s.title}</span>
+									<span className="text-xs text-muted-foreground">{s.title}</span>
 								</button>
 							))}
 						</div>
@@ -350,21 +344,23 @@ function ZoneColumn({
 }) {
 	return (
 		<section
-			className="flex min-w-0 flex-col overflow-hidden rounded-[13px]"
-			style={{ background: `linear-gradient(180deg, ${col.glow}, transparent 130px), var(--kanban-column-bg)` }}
+			className="flex min-w-0 flex-col overflow-hidden rounded-panel"
+			style={{
+				background: `linear-gradient(180deg, ${col.glow}, transparent var(--size-kanban-glow)), var(--color-overlay-subtle)`,
+			}}
 		>
-			<div className="flex shrink-0 items-center gap-[9px] px-[15px] pb-[11px] pt-[14px]">
+			<div className="flex shrink-0 items-center gap-2.25 px-3.75 pb-2.75 pt-3.5">
 				<span
-					className="h-[7px] w-[7px] rounded-full"
+					className="size-dot-sm rounded-full"
 					style={{
 						background: col.dot,
 						boxShadow: col.dotGlow ? `0 0 7px color-mix(in srgb, ${col.dot} 60%, transparent)` : undefined,
 					}}
 				/>
-				<span className={cn("text-[11px] font-semibold uppercase tracking-[0.08em]", col.titleClass)}>{col.label}</span>
-				<span className="ml-auto font-mono text-[11px] leading-none text-passive">{sessions.length}</span>
+				<span className={cn("text-caption font-semibold uppercase tracking-wide-md", col.titleClass)}>{col.label}</span>
+				<span className="ml-auto font-mono text-caption leading-none text-passive">{sessions.length}</span>
 			</div>
-			<div className="min-h-0 flex-1 overflow-y-auto px-[11px] pb-3">
+			<div className="min-h-0 flex-1 overflow-y-auto px-2.75 pb-3">
 				<div className="flex flex-col gap-2.5">
 					{sessions.map((session) => (
 						<SessionCard key={session.id} session={session} onOpen={() => onOpen(session)} />
@@ -388,38 +384,38 @@ function SessionCard({ session, onOpen }: { session: WorkspaceSession; onOpen: (
 		onOpen();
 	};
 	return (
-		<div className="w-full rounded-[7px] border border-border bg-surface text-left transition-colors hover:border-border-strong">
+		<div className="w-full rounded-md border border-border bg-surface text-left transition-colors hover:border-border-strong">
 			<div onClick={onOpen} onKeyDown={handleKeyDown} role="button" tabIndex={0}>
-				<div className="flex items-center gap-2 px-[13px] pb-[9px] pt-3">
-					<span className={cn("inline-flex items-center gap-1.5 text-[11px] font-medium", badge.className)}>
-						<span className={cn("h-[7px] w-[7px] rounded-full bg-current")} />
+				<div className="flex items-center gap-2 px-3.25 pb-2.25 pt-3">
+					<span className={cn("inline-flex items-center gap-1.5 text-caption font-medium", badge.className)}>
+						<span className={cn("size-dot-sm rounded-full bg-current")} />
 						{badge.label}
 					</span>
 					{issueId && (
 						<span
-							className="inline-flex max-w-[13rem] items-center truncate rounded-[4px] bg-[color-mix(in_srgb,var(--accent)_12%,transparent)] px-1.5 py-0.5 font-mono text-[10px] text-accent"
+							className="inline-flex max-w-branch-chip items-center truncate rounded-sm bg-accent/12 px-1.5 py-0.5 font-mono text-micro text-accent"
 							title={`Intake issue: ${issueId}`}
 						>
 							{issueId}
 						</span>
 					)}
-					<span className="ml-auto shrink-0 font-mono text-[10.5px] tracking-[0.04em] text-passive">
+					<span className="ml-auto shrink-0 font-mono text-2xs tracking-wide-xs text-passive">
 						{agentLabel(session.provider)}
 					</span>
 				</div>
 				<div
 					className={cn(
-						"px-[13px] text-[13px] font-medium leading-[1.42] tracking-[-0.01em] text-foreground",
+						"px-3.25 text-control font-medium leading-snug tracking-tight text-foreground",
 						showBranch ? "pb-2" : "pb-3",
 						"line-clamp-2 overflow-hidden",
 					)}
 				>
 					{session.title}
 				</div>
-				{showBranch && <div className="px-[13px] pb-2.5 font-mono text-[10.5px] text-passive">{branch}</div>}
+				{showBranch && <div className="px-3.25 pb-2.5 font-mono text-2xs text-passive">{branch}</div>}
 			</div>
 			<div
-				className="border-t border-border px-[13px] py-2 font-mono text-[10.5px] text-passive"
+				className="border-t border-border px-3.25 py-2 font-mono text-2xs text-passive"
 				onClick={(event) => event.stopPropagation()}
 			>
 				{prSummaries.length === 0 ? (
diff --git a/frontend/src/renderer/components/ShellTopbar.tsx b/frontend/src/renderer/components/ShellTopbar.tsx
index 2c47251679..66566e20c5 100644
--- a/frontend/src/renderer/components/ShellTopbar.tsx
+++ b/frontend/src/renderer/components/ShellTopbar.tsx
@@ -18,6 +18,14 @@ import { useUiStore } from "../stores/ui-store";
 import { OrchestratorIcon } from "./icons";
 import { NewTaskDialog } from "./NewTaskDialog";
 import { cn } from "../lib/utils";
+import { StatusPill } from "./StatusPill";
+import {
+	TopbarButton,
+	TopbarKillError,
+	topbarHeaderClass,
+	topbarHeaderMacClass,
+	topbarProjectLabelClass,
+} from "./TopbarButton";
 
 const isMac = typeof navigator !== "undefined" && /Mac|iPod|iPhone|iPad/.test(navigator.userAgent);
 const isLinux =
@@ -31,11 +39,11 @@ const noDragStyle = isMac ? ({ WebkitAppRegion: "no-drag" } as React.CSSProperti
 // Topbar shows only the raw agent activity state. SCM/context badges stay in
 // the inspector Summary > Activity row.
 const TOPBAR_ACTIVITY_PILL: Record<SessionActivityState, { label: string; tone: string; breathe: boolean }> = {
-	active: { label: "Working", tone: "var(--orange)", breathe: true },
-	idle: { label: "Idle", tone: "var(--fg-muted)", breathe: false },
-	waiting_input: { label: "Input Needed", tone: "var(--amber)", breathe: false },
-	exited: { label: "Exited", tone: "var(--fg-muted)", breathe: false },
-	unknown: { label: "Unknown", tone: "var(--fg-muted)", breathe: false },
+	active: { label: "Working", tone: "var(--color-working)", breathe: true },
+	idle: { label: "Idle", tone: "var(--color-text-muted)", breathe: false },
+	waiting_input: { label: "Input Needed", tone: "var(--color-warning)", breathe: false },
+	exited: { label: "Exited", tone: "var(--color-text-muted)", breathe: false },
+	unknown: { label: "Unknown", tone: "var(--color-text-muted)", breathe: false },
 };
 
 // The one app topbar (.dashboard-app-header), rendered by the shell layout
@@ -137,65 +145,58 @@ export function ShellTopbar() {
 	};
 
 	return (
-		<header className={cn("dashboard-app-header", isMac && "is-under-titlebar-nav")} style={dragStyle}>
-			<div className="session-topbar__lead">
+		<header className={cn(topbarHeaderClass, isMac && topbarHeaderMacClass)} style={dragStyle}>
+			<div className="flex min-w-0 items-center gap-3">
 				{isSessionRoute && isOrchestrator ? (
-					<div className="topbar-project-pills-group">
-						<div className="topbar-project-line">
-							<span className="dashboard-app-header__project">{projectLabel}</span>
-							<span aria-hidden="true" className="topbar-identity-sep">
+					<div className="inline-flex min-w-0 items-center gap-2">
+						<div className="inline-flex min-w-0 items-center gap-1.5">
+							<span className={topbarProjectLabelClass}>{projectLabel}</span>
+							<span aria-hidden="true" className="text-xs leading-none text-passive">
 								·
 							</span>
-							<span className="session-detail-mode-badge session-detail-mode-badge--neutral">
+							<span className="inline-flex h-control-sm items-center gap-1 rounded-md border border-border bg-surface px-2 text-micro font-semibold leading-none tracking-wide-sm text-muted-foreground">
 								<OrchestratorIcon className="size-3 shrink-0" aria-hidden="true" />
 								Orchestrator
 							</span>
 						</div>
 					</div>
 				) : isSessionRoute ? (
-					<div className="session-topbar__identity">
-						<div className="session-topbar__branch">
-							<GitBranch className="h-3 w-3 shrink-0" aria-hidden="true" />
+					<div className="flex min-w-0 items-center gap-3">
+						<div className="inline-flex min-w-0 items-center gap-1 font-mono text-2xs leading-none text-passive">
+							<GitBranch className="size-icon-2xs shrink-0" aria-hidden="true" />
 							<span className="truncate">{session?.branch || `session/${session?.id ?? ""}`}</span>
 						</div>
 						{session ? <SessionStatusPill session={session} /> : null}
 					</div>
 				) : isProjectBoardRoute ? null : (
-					<div className="topbar-project-line">
-						<span className="dashboard-app-header__project">{projectLabel}</span>
+					<div className="inline-flex min-w-0 items-center gap-1.5">
+						<span className={topbarProjectLabelClass}>{projectLabel}</span>
 					</div>
 				)}
 			</div>
 
-			<div className="dashboard-app-header__spacer" />
+			<div className="min-w-0 flex-1" />
 
-			<div className="dashboard-app-header__actions">
+			<div className="flex shrink-0 items-center gap-1.5">
 				{!isLinux ? <NotificationCenter style={noDragStyle} /> : null}
 				{isSessionRoute ? (
 					<>
 						{isOrchestrator ? (
 							<>
-								<button
+								<TopbarButton
 									aria-label="New task"
-									className="dashboard-app-header__primary-btn"
 									disabled={isProjectRestarting}
 									onClick={openNewTask}
 									style={noDragStyle}
-									type="button"
+									variant="primary"
 								>
-									<Plus className="h-3.5 w-3.5" aria-hidden="true" />
+									<Plus className="size-icon-md" aria-hidden="true" />
 									New task
-								</button>
-								<button
-									aria-label="Open Kanban"
-									className="dashboard-app-header__accent-btn"
-									onClick={openBoard}
-									style={noDragStyle}
-									type="button"
-								>
-									<LayoutDashboard className="h-3.5 w-3.5" aria-hidden="true" />
+								</TopbarButton>
+								<TopbarButton aria-label="Open Kanban" onClick={openBoard} style={noDragStyle} variant="accent">
+									<LayoutDashboard className="size-icon-md" aria-hidden="true" />
 									Kanban
-								</button>
+								</TopbarButton>
 							</>
 						) : null}
 						{/* Kill control sits beside the orchestrator link for active workers —
@@ -217,35 +218,33 @@ export function ShellTopbar() {
 							/>
 						) : null}
 						{!isOrchestrator && (
-							<button
+							<TopbarButton
 								aria-label="Open orchestrator"
-								className="dashboard-app-header__primary-btn dashboard-app-header__primary-btn--compact"
 								disabled={isSpawning || isProjectRestarting}
 								onClick={() => void openOrchestrator()}
 								style={noDragStyle}
-								type="button"
+								variant="primary"
 							>
-								<OrchestratorIcon className="h-3.5 w-3.5" aria-hidden="true" />
+								<OrchestratorIcon className="size-icon-md" aria-hidden="true" />
 								{isProjectRestarting ? "Restarting…" : isSpawning ? "Spawning…" : "Orchestrator"}
-							</button>
+							</TopbarButton>
 						)}
 						{/* Inspector collapse (worker sessions only — orchestrators have no rail). */}
 						{!isOrchestrator && (
-							<button
+							<TopbarButton
 								aria-label={isInspectorOpen ? "Close inspector panel" : "Open inspector panel"}
 								aria-pressed={isInspectorOpen}
-								className="dashboard-app-header__icon-btn"
 								onClick={toggleInspector}
 								style={noDragStyle}
 								title={`${isInspectorOpen ? "Close" : "Open"} inspector · ⌘⇧B`}
-								type="button"
+								variant="icon"
 							>
 								{isInspectorOpen ? (
-									<PanelRightClose className="h-[15px] w-[15px]" aria-hidden="true" />
+									<PanelRightClose className="size-icon-lg" aria-hidden="true" />
 								) : (
-									<PanelRightOpen className="h-[15px] w-[15px]" aria-hidden="true" />
+									<PanelRightOpen className="size-icon-lg" aria-hidden="true" />
 								)}
-							</button>
+							</TopbarButton>
 						)}
 					</>
 				) : null}
@@ -300,71 +299,43 @@ export function TopbarKillButton({
 
 	if (confirming) {
 		return (
-			<div className="dashboard-app-header__kill-confirm" style={noDragStyle}>
-				<button
+			<div className="inline-flex items-center gap-1.5" style={noDragStyle}>
+				<TopbarButton
 					aria-label="Confirm kill"
-					className="dashboard-app-header__kill-confirm-btn"
 					disabled={kill.isPending}
 					onClick={() => kill.mutate()}
-					type="button"
+					variant="killConfirm"
 				>
-					<Square className="h-3.5 w-3.5" aria-hidden="true" />
+					<Square className="size-icon-md" aria-hidden="true" />
 					{kill.isPending ? "Killing…" : "Confirm kill"}
-				</button>
-				<button
-					className="dashboard-app-header__kill-cancel-btn"
-					disabled={kill.isPending}
-					onClick={() => setConfirming(false)}
-					type="button"
-				>
+				</TopbarButton>
+				<TopbarButton disabled={kill.isPending} onClick={() => setConfirming(false)} variant="killCancel">
 					Cancel
-				</button>
-				{error ? (
-					<span className="dashboard-app-header__kill-error" role="alert">
-						{error}
-					</span>
-				) : null}
+				</TopbarButton>
+				{error ? <TopbarKillError>{error}</TopbarKillError> : null}
 			</div>
 		);
 	}
 
 	return (
-		<button
+		<TopbarButton
 			aria-label="Kill session"
-			className="dashboard-app-header__kill-btn"
 			onClick={() => {
 				setError(null);
 				setConfirming(true);
 			}}
 			style={noDragStyle}
 			title="Kill session"
-			type="button"
+			variant="kill"
 		>
-			<Trash2 className="h-[13px] w-[13px]" aria-hidden="true" />
+			<Trash2 className="size-icon-sm" aria-hidden="true" />
 			Kill
-		</button>
+		</TopbarButton>
 	);
 }
 
-// StatusBadge --pill: tinted bordered pill (inset 25%-tone hairline + 7%-tone
-// fill) with a 6px dot that breathes while the agent is working.
 function SessionStatusPill({ session }: { session: WorkspaceSession }) {
 	const activityState = session.activity?.state ?? "unknown";
 	const { label, tone, breathe } = TOPBAR_ACTIVITY_PILL[activityState];
-	return (
-		<span
-			className="inline-flex shrink-0 items-center gap-[7px] whitespace-nowrap rounded-[7px] px-[11px] py-[5px] text-[11.5px] font-semibold leading-none"
-			style={{
-				color: tone,
-				background: `color-mix(in srgb, ${tone} 7%, transparent)`,
-				boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${tone} 25%, transparent)`,
-			}}
-		>
-			<span
-				className={cn("h-1.5 w-1.5 rounded-full", breathe && "animate-status-pulse")}
-				style={{ background: tone }}
-			/>
-			{label}
-		</span>
-	);
+	return <StatusPill label={label} tone={tone} breathe={breathe} leading="none" />;
 }
diff --git a/frontend/src/renderer/components/Sidebar.test.tsx b/frontend/src/renderer/components/Sidebar.test.tsx
index 8228ce69dd..ea1f7f78a8 100644
--- a/frontend/src/renderer/components/Sidebar.test.tsx
+++ b/frontend/src/renderer/components/Sidebar.test.tsx
@@ -475,6 +475,6 @@ describe("Sidebar", () => {
 
 		if (!projectRow) throw new Error("Project row button not found");
 		// Padding is always reserved for the action cluster (not hover-gated)
-		expect(projectRow).toHaveClass("pr-[84px]");
+		expect(projectRow).toHaveClass("pr-sidebar-project-actions");
 	});
 });
diff --git a/frontend/src/renderer/components/Sidebar.tsx b/frontend/src/renderer/components/Sidebar.tsx
index 49d2f3ef76..1de1399f4d 100644
--- a/frontend/src/renderer/components/Sidebar.tsx
+++ b/frontend/src/renderer/components/Sidebar.tsx
@@ -66,6 +66,7 @@ import aoLogo from "../assets/ao-logo.png";
 import { cn } from "../lib/utils";
 import { useUiStore } from "../stores/ui-store";
 import { CreateProjectAgentSheet, type CreateProjectAgentSelection } from "./CreateProjectAgentSheet";
+import { ResizeHandle } from "./ResizeHandle";
 import { Button } from "./ui/button";
 
 // The macOS hiddenInset traffic lights and the fixed TitlebarNav overlay live
@@ -79,7 +80,7 @@ const noDragStyle = isMac ? ({ WebkitAppRegion: "no-drag" } as React.CSSProperti
 // orchestrator, kebab): a 20px square icon button that tints on hover, matching
 // the old SidebarMenuAction footprint.
 const HOVER_ACTION_CLASS =
-	"grid size-5 shrink-0 place-items-center rounded-md text-passive transition-colors hover:bg-interactive-hover hover:text-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-interactive-hover data-[state=open]:text-foreground [&_svg]:size-[15px]";
+	"grid size-5 shrink-0 place-items-center rounded-md text-passive transition-colors hover:bg-interactive-hover hover:text-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-interactive-hover data-[state=open]:text-foreground [&_svg]:size-icon-lg";
 
 // Mirrors the daemon's display-name cap (maxDisplayNameLen) and the spawn
 // `--name` flag, so inline edits never round-trip a value the API would reject.
@@ -188,19 +189,22 @@ export function Sidebar({
 		// (same override as shadcn's header-above-sidebar block).
 		<SidebarRoot
 			collapsible="icon"
-			className={cn("border-border", underTopbar ? "top-14 h-[calc(100svh-3.5rem)]!" : "top-0 h-svh!")}
+			className={cn(
+				"border-border",
+				underTopbar ? "top-toolbar h-[calc(100svh-var(--size-toolbar))]!" : "top-0 h-svh!",
+			)}
 		>
-			<SidebarHeader className="gap-0 p-0 pl-2.5 pr-[7px] pt-3.5 group-data-[collapsible=icon]:px-1.5">
+			<SidebarHeader className="gap-0 p-0 pl-2.5 pr-1.75 pt-3.5 group-data-[collapsible=icon]:px-1.5">
 				{/* Brand (project-sidebar__brand); in the icon rail it becomes the old
             36px board button wrapping the 22px accent mark. */}
-				<div className="flex shrink-0 items-center gap-2.5 px-2 pb-[18px] group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0 group-data-[collapsible=icon]:pb-2">
+				<div className="flex shrink-0 items-center gap-2.5 px-2 pb-4.5 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0 group-data-[collapsible=icon]:pb-2">
 					<Tooltip>
 						<TooltipTrigger asChild>
 							<button
 								aria-label="Orchestrator board"
 								className={cn(
-									"grid h-[22px] w-[22px] shrink-0 place-items-center",
-									"group-data-[collapsible=icon]:size-9 group-data-[collapsible=icon]:rounded-lg",
+									"grid h-5.5 w-5.5 shrink-0 place-items-center",
+									"group-data-[collapsible=icon]:size-control-board group-data-[collapsible=icon]:rounded-lg",
 									selection.isHome
 										? "group-data-[collapsible=icon]:bg-interactive-active"
 										: "group-data-[collapsible=icon]:hover:bg-interactive-hover",
@@ -208,24 +212,18 @@ export function Sidebar({
 								onClick={selection.goHome}
 								type="button"
 							>
-								<img src={aoLogo} alt="" aria-hidden="true" className="h-[22px] w-[22px] rounded-[6px] object-cover" />
+								<img src={aoLogo} alt="" aria-hidden="true" className="h-5.5 w-5.5 rounded-md object-cover" />
 							</button>
 						</TooltipTrigger>
 						<TooltipContent side="right" hidden={state !== "collapsed"}>
 							Orchestrator board
 						</TooltipContent>
 					</Tooltip>
-					<span className="min-w-0 flex-1 truncate text-[14px] font-bold tracking-[-0.015em] text-foreground group-data-[collapsible=icon]:hidden">
+					<span className="min-w-0 flex-1 truncate text-sm font-bold tracking-tight-lg text-foreground group-data-[collapsible=icon]:hidden">
 						Agent Orchestrator
 					</span>
 					{isNightly && (
-						<span
-							className="shrink-0 rounded-full px-1.5 py-0.5 text-[10px] font-semibold leading-none group-data-[collapsible=icon]:hidden"
-							style={{
-								color: "var(--purple)",
-								background: "color-mix(in srgb, var(--purple) 12%, transparent)",
-							}}
-						>
+						<span className="shrink-0 rounded-full bg-purple-subtle px-1.5 py-0.5 text-micro font-semibold leading-none text-purple-accent group-data-[collapsible=icon]:hidden">
 							nightly
 						</span>
 					)}
@@ -233,7 +231,7 @@ export function Sidebar({
 					{!isMac && (
 						<Tooltip>
 							<TooltipTrigger asChild>
-								<SidebarTrigger className="size-[18px] shrink-0 rounded-[4px] p-0 text-passive hover:bg-interactive-hover hover:text-foreground group-data-[collapsible=icon]:hidden [&_svg]:size-[15px]" />
+								<SidebarTrigger className="size-icon-xl shrink-0 rounded-sm p-0 text-passive hover:bg-interactive-hover hover:text-foreground group-data-[collapsible=icon]:hidden [&_svg]:size-icon-lg" />
 							</TooltipTrigger>
 							<TooltipContent>Collapse sidebar · ⌘B</TooltipContent>
 						</Tooltip>
@@ -241,11 +239,11 @@ export function Sidebar({
 				</div>
 			</SidebarHeader>
 
-			<SidebarContent className="gap-0 pl-2.5 pr-[7px] group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-1.5">
+			<SidebarContent className="gap-0 pl-2.5 pr-1.75 group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-1.5">
 				<SidebarGroup className="p-0">
 					{/* Section label (project-sidebar__nav-label) */}
 					<div className="flex shrink-0 items-center justify-between px-2 pb-2 group-data-[collapsible=icon]:hidden">
-						<SidebarGroupLabel className="h-auto rounded-none p-0 text-[10.5px] font-semibold uppercase tracking-[0.09em] text-passive">
+						<SidebarGroupLabel className="h-auto rounded-none p-0 text-2xs font-semibold uppercase tracking-wide-lg text-passive">
 							Projects
 						</SidebarGroupLabel>
 						<CreateProjectButton onCreateProject={onCreateProject} />
@@ -255,13 +253,13 @@ export function Sidebar({
 					<SidebarGroupContent>
 						{workspaceError ? (
 							<div className="px-2 py-3 group-data-[collapsible=icon]:hidden">
-								<p className="text-[12px] text-foreground">Could not load projects.</p>
-								<p className="mt-1 text-[11px] text-passive">{workspaceError}</p>
+								<p className="text-xs text-foreground">Could not load projects.</p>
+								<p className="mt-1 text-caption text-passive">{workspaceError}</p>
 							</div>
 						) : workspaces.length === 0 ? (
 							<div className="px-2 py-3 group-data-[collapsible=icon]:hidden">
-								<p className="text-[12px] text-passive">No projects yet.</p>
-								<p className="mt-1 text-[11px] text-passive">
+								<p className="text-xs text-passive">No projects yet.</p>
+								<p className="mt-1 text-caption text-passive">
 									Click <span className="text-foreground">+</span> above to register a repo or workspace.
 								</p>
 							</div>
@@ -289,17 +287,17 @@ export function Sidebar({
           (flex-1) with a uniform 7px footer inset on all sides (reference uses
           12px top, 0 bottom, content-hugging button). The icon rail keeps the
           icon-only settings action plus expand toggle (off macOS). */}
-			<SidebarFooter className="mt-auto gap-0 border-t border-border p-[7px] group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-1.5 group-data-[collapsible=icon]:pb-0 group-data-[collapsible=icon]:pt-2">
+			<SidebarFooter className="mt-auto gap-0 border-t border-border p-1.75 group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-1.5 group-data-[collapsible=icon]:pb-0 group-data-[collapsible=icon]:pt-2">
 				<div className="relative flex w-full items-center group-data-[collapsible=icon]:hidden">
 					<DropdownMenu>
 						<DropdownMenuTrigger asChild>
 							<button
 								aria-label="Settings"
-								className="flex flex-1 items-center justify-start gap-2.5 rounded-md p-2 text-[13px] font-medium text-passive transition-colors hover:bg-interactive-hover hover:text-foreground data-[state=open]:bg-interactive-hover data-[state=open]:text-foreground [&_svg]:size-[15px] [&_svg]:text-passive"
+								className="flex flex-1 items-center justify-start gap-2.5 rounded-md p-2 text-control font-medium text-passive transition-colors hover:bg-interactive-hover hover:text-foreground data-[state=open]:bg-interactive-hover data-[state=open]:text-foreground [&_svg]:size-icon-lg [&_svg]:text-passive"
 								type="button"
 							>
 								<Settings aria-hidden="true" />
-								<span className="tracking-[-0.01em]">Settings</span>
+								<span className="tracking-tight">Settings</span>
 							</button>
 						</DropdownMenuTrigger>
 						<DropdownMenuContent
@@ -357,7 +355,7 @@ export function Sidebar({
 								<DropdownMenuTrigger asChild>
 									<button
 										aria-label="Settings"
-										className="grid size-9 place-items-center rounded-lg text-passive transition-colors hover:bg-interactive-hover hover:text-foreground [&_svg]:size-4"
+										className="grid size-control-board place-items-center rounded-lg text-passive transition-colors hover:bg-interactive-hover hover:text-foreground [&_svg]:size-icon-base"
 										type="button"
 									>
 										<Settings aria-hidden="true" />
@@ -397,7 +395,7 @@ export function Sidebar({
 					{!isMac && (
 						<Tooltip>
 							<TooltipTrigger asChild>
-								<SidebarTrigger className="size-9 rounded-lg text-passive hover:bg-interactive-hover hover:text-foreground [&_svg]:size-4" />
+								<SidebarTrigger className="size-control-board rounded-lg text-passive hover:bg-interactive-hover hover:text-foreground [&_svg]:size-icon-base" />
 							</TooltipTrigger>
 							<TooltipContent side="right">Expand sidebar · ⌘B</TooltipContent>
 						</Tooltip>
@@ -405,10 +403,11 @@ export function Sidebar({
 				</div>
 			</SidebarFooter>
 
-			<div
-				className="resize-handle resize-handle--right group-data-[collapsible=icon]:hidden"
-				onPointerDown={onResizePointerDown}
+			<ResizeHandle
+				className="group-data-[collapsible=icon]:hidden"
 				onDoubleClick={onResizeDoubleClick}
+				onPointerDown={onResizePointerDown}
+				side="right"
 				style={noDragStyle}
 			/>
 		</SidebarRoot>
@@ -506,20 +505,20 @@ function ProjectItem({
 				onClick={onProjectClick}
 				tooltip={workspace.name}
 				className={cn(
-					"relative h-9 gap-[9px] rounded-[5px] px-1.5 py-0 text-[13px] font-medium text-muted-foreground transition-[background-color,padding,color]",
+					"relative h-control-board gap-2.25 rounded-sm px-1.5 py-0 text-control font-medium text-muted-foreground transition-[background-color,padding,color]",
 					"before:absolute before:top-2 before:bottom-2 before:left-0 before:w-px before:rounded-full before:bg-transparent",
 					"hover:bg-interactive-hover hover:text-foreground active:bg-interactive-hover active:text-foreground",
 					"data-[active=true]:bg-interactive-active data-[active=true]:font-semibold data-[active=true]:text-foreground data-[active=true]:before:bg-accent",
 					// Always reserve room for the action cluster (dashboard,
 					// orchestrator, kebab) — icons are always visible, not hover-gated.
-					"pr-[84px]",
+					"pr-sidebar-project-actions",
 					// Icon rail: the old 36px letter tile.
-					"group-data-[collapsible=icon]:size-9! group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:rounded-lg group-data-[collapsible=icon]:p-0! group-data-[collapsible=icon]:font-semibold",
+					"group-data-[collapsible=icon]:size-control-board! group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:rounded-lg group-data-[collapsible=icon]:p-0! group-data-[collapsible=icon]:font-semibold",
 				)}
 			>
 				<ChevronRight
 					className={cn(
-						"h-[9px]! w-[9px]! shrink-0 text-passive transition-transform group-data-[collapsible=icon]:hidden",
+						"size-icon-xs! shrink-0 text-passive transition-transform group-data-[collapsible=icon]:hidden",
 						expanded && "rotate-90",
 					)}
 					strokeWidth={2.5}
@@ -527,7 +526,7 @@ function ProjectItem({
 				/>
 				<span className="hidden group-data-[collapsible=icon]:block">{workspace.name.charAt(0).toUpperCase()}</span>
 				<span className="min-w-0 flex-1 truncate group-data-[collapsible=icon]:hidden">{workspace.name}</span>
-				<span className="hidden h-4 min-w-4 shrink-0 place-items-center rounded bg-interactive-hover px-1 font-mono text-[10px] leading-none text-passive">
+				<span className="hidden h-4 min-w-4 shrink-0 place-items-center rounded bg-interactive-hover px-1 font-mono text-micro leading-none text-passive">
 					{sessions.length}
 				</span>
 			</SidebarMenuButton>
@@ -536,7 +535,7 @@ function ProjectItem({
 			propagation issues in Electron's Chromium. Hidden in the icon rail. */}
 			<div
 				className={cn(
-					"absolute top-0 right-1 z-10 flex h-9 items-center gap-px",
+					"absolute top-0 right-1 z-chrome flex h-control-board items-center gap-px",
 					"group-data-[collapsible=icon]:hidden",
 				)}
 			>
@@ -606,7 +605,7 @@ function ProjectItem({
 			{/* project-sidebar__sessions: indented under the project parent so worker
           sessions read as children without adding a persistent guide rail. */}
 			{expanded && sessions.length > 0 && (
-				<SidebarMenuSub className="mx-0 ml-[18px] translate-x-0 gap-0 border-l-0 px-0 py-1 pl-2.5">
+				<SidebarMenuSub className="mx-0 ml-4.5 translate-x-0 gap-0 border-l-0 px-0 py-1 pl-2.5">
 					{sessions.map((session) => (
 						<SessionRow
 							key={session.id}
@@ -657,12 +656,12 @@ function SessionRow({ session, active, onOpen }: { session: WorkspaceSession; ac
 	if (isEditing) {
 		return (
 			<SidebarMenuSubItem>
-				<div className="relative flex h-auto w-full items-center gap-[9px] rounded-[4px] py-[5px] pl-2.5 pr-1.5">
+				<div className="relative flex h-auto w-full items-center gap-2.25 rounded-sm py-1.25 pl-2.5 pr-1.5">
 					<SessionDot session={session} />
 					<input
 						aria-label={`Rename ${session.title}`}
 						autoFocus
-						className="min-w-0 flex-1 rounded-[3px] border border-accent bg-transparent px-1 py-px text-[12px] text-foreground outline-none focus-visible:ring-1 focus-visible:ring-accent"
+						className="min-w-0 flex-1 rounded-xs border border-accent bg-transparent px-1 py-px text-xs text-foreground outline-none focus-visible:ring-1 focus-visible:ring-accent"
 						maxLength={MAX_DISPLAY_NAME_LEN}
 						onBlur={() => void commit()}
 						onChange={(e) => setDraft(e.target.value)}
@@ -690,7 +689,7 @@ function SessionRow({ session, active, onOpen }: { session: WorkspaceSession; ac
 				aria-current={active ? "page" : undefined}
 				aria-label={`Open ${session.title}`}
 				className={cn(
-					"relative flex h-auto w-full items-center gap-[9px] rounded-[4px] py-[5px] pl-2.5 pr-7 text-left outline-hidden transition-[color]",
+					"relative flex h-auto w-full items-center gap-2.25 rounded-sm py-1.25 pl-2.5 pr-7 text-left outline-hidden transition-[color]",
 					"before:absolute before:top-1.5 before:bottom-1.5 before:left-0 before:w-px before:rounded-full before:bg-transparent",
 					"hover:text-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring",
 					active && "text-foreground before:bg-accent",
@@ -700,7 +699,7 @@ function SessionRow({ session, active, onOpen }: { session: WorkspaceSession; ac
 			>
 				<SessionDot session={session} />
 				<span className="min-w-0 flex-1">
-					<span className={cn("block truncate text-[12px]", active ? "text-foreground" : "text-muted-foreground")}>
+					<span className={cn("block truncate text-xs", active ? "text-foreground" : "text-muted-foreground")}>
 						{session.title}
 					</span>
 				</span>
@@ -731,12 +730,12 @@ function CreateProjectButton({ onCreateProject }: Pick<SidebarProps, "onCreatePr
 					<TooltipTrigger asChild>
 						<button
 							aria-label="New project"
-							className="grid h-[18px] w-[18px] place-items-center rounded-[4px] text-passive transition-colors hover:bg-interactive-hover hover:text-muted-foreground"
+							className="grid size-icon-xl place-items-center rounded-sm text-passive transition-colors hover:bg-interactive-hover hover:text-muted-foreground"
 							disabled={disabled}
 							onClick={choosePath}
 							type="button"
 						>
-							<Plus className="h-[13px] w-[13px]" aria-hidden="true" />
+							<Plus className="size-icon-sm" aria-hidden="true" />
 						</button>
 					</TooltipTrigger>
 					<TooltipContent>{label}</TooltipContent>
@@ -755,12 +754,12 @@ function CreateProjectListItem({ onCreateProject }: Pick<SidebarProps, "onCreate
 						<TooltipTrigger asChild>
 							<button
 								aria-label="New project"
-								className="grid h-9 w-full place-items-center rounded-[5px] text-passive transition-colors hover:bg-interactive-hover hover:text-muted-foreground"
+								className="grid h-control-board w-full place-items-center rounded-sm text-passive transition-colors hover:bg-interactive-hover hover:text-muted-foreground"
 								disabled={disabled}
 								onClick={choosePath}
 								type="button"
 							>
-								<Plus className="h-[13px] w-[13px]" aria-hidden="true" />
+								<Plus className="size-icon-sm" aria-hidden="true" />
 							</button>
 						</TooltipTrigger>
 						<TooltipContent side="right">{label}</TooltipContent>
diff --git a/frontend/src/renderer/components/StatusPill.tsx b/frontend/src/renderer/components/StatusPill.tsx
new file mode 100644
index 0000000000..de3c7ad75a
--- /dev/null
+++ b/frontend/src/renderer/components/StatusPill.tsx
@@ -0,0 +1,33 @@
+import { cn } from "@/lib/utils";
+
+type StatusPillProps = {
+	label: string;
+	tone: string;
+	breathe?: boolean;
+	className?: string;
+	leading?: "none" | "normal";
+};
+
+/** Tinted status pill with inset hairline — shared by topbar and inspector. */
+export function StatusPill({ label, tone, breathe, className, leading = "normal" }: StatusPillProps) {
+	return (
+		<span
+			className={cn(
+				"inline-flex shrink-0 items-center gap-1.75 whitespace-nowrap rounded-md px-2.75 py-1.25 text-sm-md font-semibold",
+				leading === "none" && "leading-none",
+				className,
+			)}
+			style={{
+				color: tone,
+				background: `color-mix(in srgb, ${tone} 7%, transparent)`,
+				boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${tone} 25%, transparent)`,
+			}}
+		>
+			<span
+				className={cn("h-1.5 w-1.5 rounded-full", breathe && "animate-status-pulse")}
+				style={{ background: tone }}
+			/>
+			{label}
+		</span>
+	);
+}
diff --git a/frontend/src/renderer/components/TelemetryBoundary.tsx b/frontend/src/renderer/components/TelemetryBoundary.tsx
index 98512ab7bd..c947d03d00 100644
--- a/frontend/src/renderer/components/TelemetryBoundary.tsx
+++ b/frontend/src/renderer/components/TelemetryBoundary.tsx
@@ -29,7 +29,7 @@ export class TelemetryBoundary extends React.Component<Props, State> {
 			return (
 				<div className="flex h-screen items-center justify-center bg-background px-6 text-center text-foreground">
 					<div>
-						<h1 className="text-lg font-semibold">The app hit an unexpected error.</h1>
+						<h1 className="text-heading-sm font-semibold">The app hit an unexpected error.</h1>
 						<p className="mt-2 text-sm text-muted-foreground">
 							Restart the app or check the daemon logs if this keeps happening.
 						</p>
diff --git a/frontend/src/renderer/components/TerminalPane.tsx b/frontend/src/renderer/components/TerminalPane.tsx
index 9969dc530f..10c32e7f2a 100644
--- a/frontend/src/renderer/components/TerminalPane.tsx
+++ b/frontend/src/renderer/components/TerminalPane.tsx
@@ -27,23 +27,23 @@ export function TerminalPane({ session, theme, daemonReady, terminalTarget, font
 			terminalTarget?.kind === "reviewer" ? reviewerPreviewLines(session) : workerPreviewLines(session, provider);
 		return (
 			<pre
-				className="h-full overflow-auto bg-terminal p-4 font-mono leading-relaxed text-[var(--term-fg)]"
+				className="h-full overflow-auto bg-terminal p-4 font-mono leading-relaxed text-terminal"
 				style={{ fontSize }}
 			>
-				<span className="text-[var(--term-dim)]">~/{session?.workspaceName ?? "reverbcode"}</span>{" "}
-				<span className="text-[var(--term-blue)]">{session?.branch || "main"}</span> $ {provider}
+				<span className="text-terminal-dim">~/{session?.workspaceName ?? "reverbcode"}</span>{" "}
+				<span className="text-accent">{session?.branch || "main"}</span> $ {provider}
 				{"\n"}
 				{lines.map((line, index) => (
 					<span
 						key={`${line}:${index}`}
 						className={
 							line.startsWith("PASS") || line.startsWith("DONE")
-								? "text-[var(--term-green)]"
+								? "text-success"
 								: line.startsWith("WARN") || line.startsWith("TODO")
-									? "text-[var(--term-amber)]"
+									? "text-warning"
 									: line.startsWith("$")
-										? "text-[var(--term-blue)]"
-										: "text-[var(--term-fg)]"
+										? "text-accent"
+										: "text-terminal"
 						}
 					>
 						{line}
@@ -205,7 +205,7 @@ function AttachedTerminal({ session, theme, daemonReady, terminalTarget, fontSiz
 
 	if (initFailed) {
 		return (
-			<div className="grid h-full place-items-center bg-terminal p-4 font-mono text-[12px] text-muted-foreground">
+			<div className="grid h-full place-items-center bg-terminal p-4 font-mono text-xs text-muted-foreground">
 				Terminal failed to initialize on this GPU/driver. Restart the app to retry.
 			</div>
 		);
@@ -242,15 +242,15 @@ function AttachedTerminal({ session, theme, daemonReady, terminalTarget, fontSiz
 					theme={theme}
 				/>
 				{showEmptyState && (
-					<div className="absolute inset-0 grid place-items-center bg-terminal font-mono text-[13px]">
+					<div className="absolute inset-0 grid place-items-center bg-terminal font-mono text-control">
 						<div className="text-center">
-							<div className="text-[var(--term-fg)]">{emptyStateTitle}</div>
-							<div className="mt-2 text-[var(--term-dim)]">{emptyStateMessage}</div>
+							<div className="text-terminal">{emptyStateTitle}</div>
+							<div className="mt-2 text-terminal-dim">{emptyStateMessage}</div>
 						</div>
 					</div>
 				)}
 				{banner && (
-					<div className="absolute inset-x-3 top-2 rounded-md border border-border bg-surface/95 px-3 py-1.5 font-mono text-[11px] text-muted-foreground">
+					<div className="absolute inset-x-3 top-2 rounded-md border border-border bg-surface/95 px-3 py-1.5 font-mono text-caption text-muted-foreground">
 						{banner}
 					</div>
 				)}
@@ -286,18 +286,18 @@ function TerminalEndedStrip({ canRestore, error, isRestoring, onRestore, variant
 
 	return (
 		<div className="shrink-0 border-b border-border bg-surface/80 px-4 py-2">
-			<div className="flex min-h-9 items-center gap-3">
+			<div className="flex min-h-control-board items-center gap-3">
 				<div className="min-w-0 flex-1">
-					<div className="font-mono text-[11px] font-medium uppercase tracking-[0.08em] text-muted-foreground">
+					<div className="font-mono text-caption font-medium uppercase tracking-wide-md text-muted-foreground">
 						Terminal ended
 					</div>
-					<div className="mt-0.5 truncate text-[12px] text-muted-foreground">{message}</div>
+					<div className="mt-0.5 truncate text-xs text-muted-foreground">{message}</div>
 				</div>
-				{error && <div className="max-w-[320px] truncate text-[12px] text-destructive">{error}</div>}
+				{error && <div className="max-w-content-max truncate text-xs text-destructive">{error}</div>}
 				{canRestore && (
 					<button
 						type="button"
-						className="h-8 shrink-0 rounded-md border border-border bg-raised px-3 text-[12px] font-medium text-foreground transition hover:bg-interactive-hover disabled:cursor-not-allowed disabled:opacity-50"
+						className="h-control-form shrink-0 rounded-md border border-border bg-raised px-3 text-xs font-medium text-foreground transition hover:bg-interactive-hover disabled:cursor-not-allowed disabled:opacity-50"
 						disabled={isRestoring}
 						onClick={onRestore}
 					>
diff --git a/frontend/src/renderer/components/TitlebarNav.tsx b/frontend/src/renderer/components/TitlebarNav.tsx
index da9070f229..a0639c099a 100644
--- a/frontend/src/renderer/components/TitlebarNav.tsx
+++ b/frontend/src/renderer/components/TitlebarNav.tsx
@@ -45,16 +45,19 @@ export function TitlebarNav() {
 	if (!isMac) return null;
 
 	return (
-		<div className="titlebar-nav" style={noDragStyle}>
+		<div
+			className="fixed top-0 left-titlebar-cluster-left z-titlebar flex h-toolbar items-center gap-1"
+			style={noDragStyle}
+		>
 			<TitlebarButton
 				label={isSidebarOpen ? "Collapse sidebar" : "Expand sidebar"}
 				onClick={toggleSidebar}
 				title={`${isSidebarOpen ? "Collapse" : "Expand"} sidebar · ⌘B`}
 			>
-				<PanelLeft className="h-[15px] w-[15px]" aria-hidden="true" />
+				<PanelLeft className="size-icon-lg" aria-hidden="true" />
 			</TitlebarButton>
 			<TitlebarButton disabled={!canGoBack} label="Go back" onClick={() => router.history.back()} title="Go back">
-				<ArrowLeft className="h-[15px] w-[15px]" aria-hidden="true" />
+				<ArrowLeft className="size-icon-lg" aria-hidden="true" />
 			</TitlebarButton>
 			<TitlebarButton
 				disabled={!canGoForward}
@@ -62,7 +65,7 @@ export function TitlebarNav() {
 				onClick={() => router.history.forward()}
 				title="Go forward"
 			>
-				<ArrowRight className="h-[15px] w-[15px]" aria-hidden="true" />
+				<ArrowRight className="size-icon-lg" aria-hidden="true" />
 			</TitlebarButton>
 		</div>
 	);
@@ -84,7 +87,7 @@ function TitlebarButton({
 	return (
 		<button
 			aria-label={label}
-			className="titlebar-nav__btn grid place-items-center rounded-md text-passive transition-colors hover:bg-interactive-hover hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-45"
+			className="grid size-control-md place-items-center rounded-md text-passive transition-colors hover:bg-interactive-hover hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-45"
 			disabled={disabled}
 			onClick={onClick}
 			style={noDragStyle}
diff --git a/frontend/src/renderer/components/TopbarButton.tsx b/frontend/src/renderer/components/TopbarButton.tsx
new file mode 100644
index 0000000000..a605b721da
--- /dev/null
+++ b/frontend/src/renderer/components/TopbarButton.tsx
@@ -0,0 +1,44 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const topbarButtonVariants = cva(
+	"inline-flex items-center transition-[filter,background,color,border-color] duration-fast disabled:opacity-60",
+	{
+		variants: {
+			variant: {
+				primary:
+					"h-control-lg gap-1.5 rounded-md px-4 text-control font-semibold leading-none bg-primary text-primary-foreground hover:brightness-110",
+				accent:
+					"h-control-lg gap-1.5 rounded-md border border-border px-4 text-control font-semibold leading-none bg-raised text-muted-foreground hover:bg-surface hover:text-foreground",
+				icon: "grid size-control-lg place-items-center rounded-md text-muted-foreground hover:bg-interactive-hover hover:text-foreground",
+				kill: "h-control-board-sm gap-1 rounded-md border border-error/60 bg-error/5 px-2.5 text-xs font-semibold leading-none text-error hover:border-error/75 hover:bg-error/12",
+				killConfirm:
+					"h-control-lg gap-1.5 rounded-md border border-error/40 bg-error/10 px-3 text-control font-semibold leading-none text-error hover:bg-error/16",
+				killCancel:
+					"h-control-lg rounded-md px-2.5 text-control font-semibold leading-none text-muted-foreground hover:text-foreground",
+			},
+		},
+		defaultVariants: { variant: "primary" },
+	},
+);
+
+export function TopbarButton({
+	className,
+	variant,
+	type = "button",
+	...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof topbarButtonVariants>) {
+	return <button className={cn(topbarButtonVariants({ variant }), className)} type={type} {...props} />;
+}
+
+export function TopbarKillError({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
+	return <span className={cn("text-caption text-destructive", className)} role="alert" {...props} />;
+}
+
+export const topbarHeaderClass =
+	"flex h-toolbar shrink-0 items-center gap-3 border-b border-border bg-background px-4 z-chrome";
+
+export const topbarHeaderMacClass = "pl-titlebar-content-offset";
+
+export const topbarProjectLabelClass =
+	"text-brand font-semibold tracking-tight leading-none text-foreground whitespace-nowrap";
diff --git a/frontend/src/renderer/components/UpdatesSection.tsx b/frontend/src/renderer/components/UpdatesSection.tsx
index 3cd1e397f3..87ee64bbbb 100644
--- a/frontend/src/renderer/components/UpdatesSection.tsx
+++ b/frontend/src/renderer/components/UpdatesSection.tsx
@@ -59,22 +59,22 @@ export function UpdatesSection() {
 	return (
 		<Card>
 			<CardHeader>
-				<CardTitle className="text-[13px]">Updates</CardTitle>
+				<CardTitle className="text-control">Updates</CardTitle>
 			</CardHeader>
 			<CardContent className="flex flex-col gap-4">
 				<div className="flex flex-col gap-1.5">
-					<Label htmlFor="updatesEnabled" className="text-[12px] text-muted-foreground">
+					<Label htmlFor="updatesEnabled" className="text-xs text-muted-foreground">
 						Automatic updates
 					</Label>
 					<EnabledSelect id="updatesEnabled" value={form.enabled} onChange={setEnabled} />
 				</div>
 
 				<div className="flex flex-col gap-1.5">
-					<Label htmlFor="updateChannel" className="text-[12px] text-muted-foreground">
+					<Label htmlFor="updateChannel" className="text-xs text-muted-foreground">
 						Update channel
 					</Label>
 					<Select value={form.channel} onValueChange={(v) => setChannel(v as UpdateChannel)} disabled={!form.enabled}>
-						<SelectTrigger id="updateChannel" className="h-8 w-full text-[13px]">
+						<SelectTrigger id="updateChannel" className="h-control-form w-full text-control">
 							<SelectValue />
 						</SelectTrigger>
 						<SelectContent>
@@ -88,7 +88,7 @@ export function UpdatesSection() {
 				</div>
 
 				{form.channel === "nightly" && form.enabled && (
-					<p className="text-[12px] leading-5 text-warning">
+					<p className="text-xs leading-row text-warning">
 						Nightly builds are cut every day and can be unstable or lose data. Only use Nightly if you are comfortable
 						with that.
 					</p>
@@ -99,11 +99,11 @@ export function UpdatesSection() {
 						{save.isPending ? "Saving…" : "Save changes"}
 					</Button>
 					{save.isError && (
-						<span className="text-[12px] text-error">
+						<span className="text-xs text-error">
 							{save.error instanceof Error ? save.error.message : "Save failed"}
 						</span>
 					)}
-					{savedAt && !save.isPending && !save.isError && <span className="text-[12px] text-success">Saved.</span>}
+					{savedAt && !save.isPending && !save.isError && <span className="text-xs text-success">Saved.</span>}
 				</div>
 
 				<UpdateActions />
@@ -137,13 +137,13 @@ function UpdateActions() {
 
 	return (
 		<div className="flex flex-col gap-3 border-t border-border pt-4">
-			<div className="flex items-center gap-2 text-[12px]">
+			<div className="flex items-center gap-2 text-xs">
 				<span className="text-passive">Current version</span>
-				<span className="font-mono text-[11px] text-foreground">{version.data ? `v${version.data}` : "…"}</span>
+				<span className="font-mono text-caption text-foreground">{version.data ? `v${version.data}` : "…"}</span>
 			</div>
 			<div className="flex items-center gap-3">
 				<Button type="button" variant="outline" onClick={() => void aoBridge.updates.check()} disabled={busy}>
-					{checking && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+					{checking && <Loader2 className="mr-2 size-icon-base animate-spin" />}
 					Check for updates
 				</Button>
 
@@ -167,23 +167,23 @@ function UpdateActions() {
 function UpdateStatusLine({ status }: { status: UpdateStatus }) {
 	switch (status.state) {
 		case "checking":
-			return <span className="text-[12px] text-muted-foreground">Checking for updates…</span>;
+			return <span className="text-xs text-muted-foreground">Checking for updates…</span>;
 		case "available":
 			return (
-				<span className="text-[12px] text-muted-foreground">
+				<span className="text-xs text-muted-foreground">
 					Update available{status.version ? ` (v${status.version})` : ""}.
 				</span>
 			);
 		case "downloading":
-			return <span className="text-[12px] text-muted-foreground">Downloading… {status.percent ?? 0}%</span>;
+			return <span className="text-xs text-muted-foreground">Downloading… {status.percent ?? 0}%</span>;
 		case "downloaded":
-			return <span className="text-[12px] text-success">Downloaded. Restart to finish updating.</span>;
+			return <span className="text-xs text-success">Downloaded. Restart to finish updating.</span>;
 		case "not-available":
-			return <span className="text-[12px] text-muted-foreground">You're on the latest version.</span>;
+			return <span className="text-xs text-muted-foreground">You're on the latest version.</span>;
 		case "unsupported":
-			return <span className="text-[12px] text-passive">{status.message ?? "Updates need the installed app."}</span>;
+			return <span className="text-xs text-passive">{status.message ?? "Updates need the installed app."}</span>;
 		case "error":
-			return <span className="text-[12px] text-error">{status.message ?? "Update failed."}</span>;
+			return <span className="text-xs text-error">{status.message ?? "Update failed."}</span>;
 		default:
 			return null;
 	}
@@ -192,7 +192,7 @@ function UpdateStatusLine({ status }: { status: UpdateStatus }) {
 function EnabledSelect({ id, value, onChange }: { id: string; value: boolean; onChange: (value: boolean) => void }) {
 	return (
 		<Select value={value ? "on" : "off"} onValueChange={(v) => onChange(v === "on")}>
-			<SelectTrigger id={id} className="h-8 w-full text-[13px]">
+			<SelectTrigger id={id} className="h-control-form w-full text-control">
 				<SelectValue />
 			</SelectTrigger>
 			<SelectContent>
diff --git a/frontend/src/renderer/components/XtermTerminal.tsx b/frontend/src/renderer/components/XtermTerminal.tsx
index 82a89fc245..0054d01ddd 100644
--- a/frontend/src/renderer/components/XtermTerminal.tsx
+++ b/frontend/src/renderer/components/XtermTerminal.tsx
@@ -29,6 +29,7 @@ import { WebLinksAddon } from "@xterm/addon-web-links";
 import { WebglAddon } from "@xterm/addon-webgl";
 import type { AttachableTerminal, TerminalUserInputSource } from "../hooks/useTerminalSession";
 import { aoBridge } from "../lib/bridge";
+import { TERMINAL_FONT_SIZE_DEFAULT } from "../lib/design-tokens";
 import { buildTerminalThemes } from "../lib/terminal-themes";
 import type { Theme } from "../stores/ui-store";
 
@@ -72,9 +73,7 @@ function loadRenderer(term: Terminal): void {
 	}
 }
 
-// xterm palette tracks the app theme (see lib/terminal-themes.ts + --term-* in
-// styles.css). The PTY content is still the agent's own ANSI output.
-const terminalThemes = buildTerminalThemes();
+// xterm palette tracks the app theme (see lib/terminal-themes.ts + tokens.css).
 const SUPPRESS_NATIVE_PASTE_MS = 100;
 
 // Erase scrollback (3J) + display (2J) and home the cursor. Deliberately NOT
@@ -218,7 +217,8 @@ export function XtermTerminal(props: XtermTerminalProps) {
 	useEffect(() => {
 		const term = termRef.current;
 		if (!term) return;
-		term.options.theme = props.theme === "dark" ? terminalThemes.dark : terminalThemes.light;
+		const { dark, light } = buildTerminalThemes();
+		term.options.theme = props.theme === "dark" ? dark : light;
 	}, [props.theme]);
 
 	useEffect(() => {
@@ -236,6 +236,7 @@ export function XtermTerminal(props: XtermTerminalProps) {
 
 		let term: Terminal;
 		try {
+			const { dark, light } = buildTerminalThemes();
 			term = new Terminal({
 				// Required for the Unicode 11 width addon below.
 				allowProposedApi: true,
@@ -248,7 +249,7 @@ export function XtermTerminal(props: XtermTerminalProps) {
 				fontFamily:
 					getComputedStyle(host).getPropertyValue("--font-mono").trim() ||
 					'ui-monospace, Menlo, Monaco, "Courier New", monospace',
-				fontSize: props.fontSize ?? 12,
+				fontSize: props.fontSize ?? TERMINAL_FONT_SIZE_DEFAULT,
 				lineHeight: 1.35,
 				// Agent TUIs leave SGR bold active while using ANSI black for
 				// separators; keep bold weight-only so black stays black.
@@ -265,7 +266,7 @@ export function XtermTerminal(props: XtermTerminalProps) {
 				// handler's normal-buffer branch). The scrollbar itself is hidden in
 				// CSS so FitAddon's ~14px reservation doesn't shift the grid.
 				scrollback: 5000,
-				theme: props.theme === "dark" ? terminalThemes.dark : terminalThemes.light,
+				theme: props.theme === "dark" ? dark : light,
 			});
 		} catch (error) {
 			callbacksRef.current.onError?.(error);
@@ -497,7 +498,7 @@ export function XtermTerminal(props: XtermTerminalProps) {
 			} else if (event.deltaMode === 2 /* DOM_DELTA_PAGE */) {
 				lines = (Math.trunc(event.deltaY) || Math.sign(event.deltaY)) * term.rows;
 			} else {
-				const rowHeight = (term.options.fontSize ?? 12) * (term.options.lineHeight ?? 1);
+				const rowHeight = (term.options.fontSize ?? TERMINAL_FONT_SIZE_DEFAULT) * (term.options.lineHeight ?? 1);
 				wheelAccumPx += event.deltaY;
 				lines = Math.trunc(wheelAccumPx / rowHeight);
 				wheelAccumPx -= lines * rowHeight;
diff --git a/frontend/src/renderer/components/ui/badge.tsx b/frontend/src/renderer/components/ui/badge.tsx
index c3c63b87ce..dabe521cd5 100644
--- a/frontend/src/renderer/components/ui/badge.tsx
+++ b/frontend/src/renderer/components/ui/badge.tsx
@@ -12,7 +12,7 @@ export function Badge({
 	return (
 		<span
 			className={cn(
-				"inline-flex h-[18px] shrink-0 items-center gap-1 rounded-full border border-transparent px-2 font-mono text-[10px] font-medium",
+				"inline-flex h-icon-xl shrink-0 items-center gap-1 rounded-full border border-transparent px-2 font-mono text-micro font-medium",
 				variant === "neutral" && "bg-raised text-muted-foreground",
 				variant === "outline" && "border-border text-foreground",
 				variant === "accent" && "border-accent-dim text-accent",
diff --git a/frontend/src/renderer/components/ui/button.tsx b/frontend/src/renderer/components/ui/button.tsx
index 478f75b320..9b650d5f9e 100644
--- a/frontend/src/renderer/components/ui/button.tsx
+++ b/frontend/src/renderer/components/ui/button.tsx
@@ -6,7 +6,7 @@ import { cn } from "../../lib/utils";
 // emdash buttons are font-normal (400) with 6px radius; blue is the live edge
 // (primary). See DESIGN.md → Spacing / Color.
 const buttonVariants = cva(
-	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-[13px] font-normal transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 disabled:pointer-events-none disabled:opacity-45",
+	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-control font-normal transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 disabled:pointer-events-none disabled:opacity-45",
 	{
 		variants: {
 			variant: {
@@ -16,10 +16,10 @@ const buttonVariants = cva(
 				ghost: "text-muted-foreground hover:bg-surface hover:text-foreground",
 			},
 			size: {
-				default: "h-8 px-3",
-				sm: "h-7 px-2.5 text-xs",
-				icon: "h-8 w-8",
-				"icon-sm": "h-7 w-7",
+				default: "h-control-form px-3",
+				sm: "h-control-md px-2.5 text-xs",
+				icon: "size-control-form",
+				"icon-sm": "size-control-md",
 			},
 		},
 		defaultVariants: {
diff --git a/frontend/src/renderer/components/ui/dropdown-menu.tsx b/frontend/src/renderer/components/ui/dropdown-menu.tsx
index c2a0f2b7cb..5d0730ee88 100644
--- a/frontend/src/renderer/components/ui/dropdown-menu.tsx
+++ b/frontend/src/renderer/components/ui/dropdown-menu.tsx
@@ -16,7 +16,7 @@ export function DropdownMenuContent({
 			<DropdownMenuPrimitive.Content
 				sideOffset={sideOffset}
 				className={cn(
-					"z-50 min-w-[10rem] overflow-hidden rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-[var(--shadow)]",
+					"z-overlay min-w-[10rem] overflow-hidden rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-md",
 					"data-[state=open]:animate-overlay-in",
 					className,
 				)}
@@ -34,9 +34,9 @@ export function DropdownMenuItem({
 	return (
 		<DropdownMenuPrimitive.Item
 			className={cn(
-				"relative flex cursor-default select-none items-center gap-2.5 rounded-md px-2 py-1.5 text-[13px] outline-none transition-colors",
+				"relative flex cursor-default select-none items-center gap-2.5 rounded-md px-2 py-1.5 text-control outline-none transition-colors",
 				"text-muted-foreground focus:bg-surface focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-				"[&_svg]:size-[15px] [&_svg]:shrink-0 [&_svg]:text-passive",
+				"[&_svg]:size-icon-lg [&_svg]:shrink-0 [&_svg]:text-passive",
 				inset && "pl-8",
 				className,
 			)}
@@ -53,7 +53,7 @@ export function DropdownMenuLabel({
 	return (
 		<DropdownMenuPrimitive.Label
 			className={cn(
-				"px-2 py-1.5 font-mono text-[10px] uppercase tracking-[0.12em] text-passive",
+				"px-2 py-1.5 font-mono text-micro uppercase tracking-wide-xl text-passive",
 				inset && "pl-8",
 				className,
 			)}
@@ -70,5 +70,5 @@ export function DropdownMenuSeparator({
 }
 
 export function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
-	return <span className={cn("ml-auto font-mono text-[10px] tracking-[0.08em] text-passive", className)} {...props} />;
+	return <span className={cn("ml-auto font-mono text-micro tracking-wide-md text-passive", className)} {...props} />;
 }
diff --git a/frontend/src/renderer/components/ui/input.tsx b/frontend/src/renderer/components/ui/input.tsx
index a94c33bfdb..0575506dff 100644
--- a/frontend/src/renderer/components/ui/input.tsx
+++ b/frontend/src/renderer/components/ui/input.tsx
@@ -5,7 +5,7 @@ export const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttribute
 	({ className, type = "text", ...props }, ref) => (
 		<input
 			className={cn(
-				"flex h-8 w-full rounded-md border border-border bg-transparent px-3 text-[13px] text-foreground transition-colors placeholder:text-passive focus-visible:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-weak disabled:cursor-not-allowed disabled:opacity-50",
+				"flex h-control-form w-full rounded-md border border-border bg-transparent px-3 text-control text-foreground transition-colors placeholder:text-passive focus-visible:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-weak disabled:cursor-not-allowed disabled:opacity-50",
 				className,
 			)}
 			ref={ref}
diff --git a/frontend/src/renderer/components/ui/resizable.tsx b/frontend/src/renderer/components/ui/resizable.tsx
index 68c2a2b867..6158dbf893 100644
--- a/frontend/src/renderer/components/ui/resizable.tsx
+++ b/frontend/src/renderer/components/ui/resizable.tsx
@@ -34,7 +34,7 @@ function ResizableHandle({
 			{...props}
 		>
 			{withHandle && (
-				<div className="z-10 flex h-4 w-3 items-center justify-center rounded-xs border bg-border">
+				<div className="z-chrome flex h-4 w-3 items-center justify-center rounded-xs border bg-border">
 					<GripVerticalIcon className="size-2.5" />
 				</div>
 			)}
diff --git a/frontend/src/renderer/components/ui/select.tsx b/frontend/src/renderer/components/ui/select.tsx
index c274cc6429..ed13bace3b 100644
--- a/frontend/src/renderer/components/ui/select.tsx
+++ b/frontend/src/renderer/components/ui/select.tsx
@@ -29,14 +29,14 @@ function SelectTrigger({
 			data-slot="select-trigger"
 			data-size={size}
 			className={cn(
-				"flex w-fit items-center justify-between gap-2 rounded-md border border-border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-border-strong focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+				"flex w-fit items-center justify-between gap-2 rounded-md border border-border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-border-strong focus-visible:ring-focus focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-control-board data-[size=sm]:h-control-form *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-icon-base [&_svg:not([class*='text-'])]:text-muted-foreground",
 				className,
 			)}
 			{...props}
 		>
 			{children}
 			<SelectPrimitive.Icon asChild>
-				<ChevronDownIcon className="size-4 opacity-50" />
+				<ChevronDownIcon className="size-icon-base opacity-50" />
 			</SelectPrimitive.Icon>
 		</SelectPrimitive.Trigger>
 	);
@@ -54,7 +54,7 @@ function SelectContent({
 			<SelectPrimitive.Content
 				data-slot="select-content"
 				className={cn(
-					"relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border bg-popover text-popover-foreground shadow-md outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+					"relative z-overlay max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border bg-popover text-popover-foreground shadow-md outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
 					position === "popper" &&
 						"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 					className,
@@ -90,14 +90,14 @@ function SelectItem({ className, children, ...props }: React.ComponentProps<type
 		<SelectPrimitive.Item
 			data-slot="select-item"
 			className={cn(
-				"relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+				"relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-icon-base [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
 				className,
 			)}
 			{...props}
 		>
 			<span data-slot="select-item-indicator" className="absolute right-2 flex size-3.5 items-center justify-center">
 				<SelectPrimitive.ItemIndicator>
-					<CheckIcon className="size-4" />
+					<CheckIcon className="size-icon-base" />
 				</SelectPrimitive.ItemIndicator>
 			</span>
 			<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
@@ -122,7 +122,7 @@ function SelectScrollUpButton({ className, ...props }: React.ComponentProps<type
 			className={cn("flex cursor-default items-center justify-center py-1", className)}
 			{...props}
 		>
-			<ChevronUpIcon className="size-4" />
+			<ChevronUpIcon className="size-icon-base" />
 		</SelectPrimitive.ScrollUpButton>
 	);
 }
@@ -137,7 +137,7 @@ function SelectScrollDownButton({
 			className={cn("flex cursor-default items-center justify-center py-1", className)}
 			{...props}
 		>
-			<ChevronDownIcon className="size-4" />
+			<ChevronDownIcon className="size-icon-base" />
 		</SelectPrimitive.ScrollDownButton>
 	);
 }
diff --git a/frontend/src/renderer/components/ui/sheet.tsx b/frontend/src/renderer/components/ui/sheet.tsx
index 133c0c3f60..1d5187bb40 100644
--- a/frontend/src/renderer/components/ui/sheet.tsx
+++ b/frontend/src/renderer/components/ui/sheet.tsx
@@ -27,7 +27,7 @@ function SheetOverlay({ className, ...props }: React.ComponentProps<typeof Sheet
 		<SheetPrimitive.Overlay
 			data-slot="sheet-overlay"
 			className={cn(
-				"fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+				"fixed inset-0 z-overlay bg-scrim data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
 				className,
 			)}
 			{...props}
@@ -51,7 +51,7 @@ function SheetContent({
 			<SheetPrimitive.Content
 				data-slot="sheet-content"
 				className={cn(
-					"fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
+					"fixed z-overlay flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
 					side === "right" &&
 						"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
 					side === "left" &&
@@ -67,7 +67,7 @@ function SheetContent({
 				{children}
 				{showCloseButton && (
 					<SheetPrimitive.Close className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary">
-						<XIcon className="size-4" />
+						<XIcon className="size-icon-base" />
 						<span className="sr-only">Close</span>
 					</SheetPrimitive.Close>
 				)}
diff --git a/frontend/src/renderer/components/ui/sidebar.tsx b/frontend/src/renderer/components/ui/sidebar.tsx
index b1d0676ab7..1aa2a356eb 100644
--- a/frontend/src/renderer/components/ui/sidebar.tsx
+++ b/frontend/src/renderer/components/ui/sidebar.tsx
@@ -16,9 +16,9 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/comp
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-const SIDEBAR_WIDTH = "16rem";
-const SIDEBAR_WIDTH_MOBILE = "18rem";
-const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_WIDTH = "var(--size-sidebar-default)";
+const SIDEBAR_WIDTH_MOBILE = "var(--size-sidebar-mobile)";
+const SIDEBAR_WIDTH_ICON = "var(--size-sidebar-icon)";
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 
 type SidebarContextProps = {
@@ -209,7 +209,7 @@ function Sidebar({
 			<div
 				data-slot="sidebar-container"
 				className={cn(
-					"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+					"fixed inset-y-0 z-chrome hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
 					side === "left"
 						? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
 						: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
@@ -267,7 +267,7 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
 			onClick={toggleSidebar}
 			title="Toggle Sidebar"
 			className={cn(
-				"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex",
+				"absolute inset-y-0 z-titlebar hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 hover:after:bg-sidebar-border sm:flex",
 				"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
 				"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
 				"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
@@ -299,7 +299,7 @@ function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input
 		<Input
 			data-slot="sidebar-input"
 			data-sidebar="input"
-			className={cn("h-8 w-full bg-background shadow-none", className)}
+			className={cn("h-control-form w-full bg-background shadow-none", className)}
 			{...props}
 		/>
 	);
@@ -375,7 +375,7 @@ function SidebarGroupLabel({
 			data-slot="sidebar-group-label"
 			data-sidebar="group-label"
 			className={cn(
-				"flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				"flex h-control-form shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-icon-base [&>svg]:shrink-0",
 				"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
 				className,
 			)}
@@ -396,7 +396,7 @@ function SidebarGroupAction({
 			data-slot="sidebar-group-action"
 			data-sidebar="group-action"
 			className={cn(
-				"absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				"absolute top-4 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-icon-base [&>svg]:shrink-0",
 				// Increases the hit area of the button on mobile.
 				"after:absolute after:-inset-2 md:after:hidden",
 				"group-data-[collapsible=icon]:hidden",
@@ -441,7 +441,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
 }
 
 const sidebarMenuButtonVariants = cva(
-	"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+	"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-control-form! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-icon-base [&>svg]:shrink-0",
 	{
 		variants: {
 			variant: {
@@ -450,8 +450,8 @@ const sidebarMenuButtonVariants = cva(
 					"bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
 			},
 			size: {
-				default: "h-8 text-sm",
-				sm: "h-7 text-xs",
+				default: "h-control-form text-sm",
+				sm: "h-control-md text-xs",
 				lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
 			},
 		},
@@ -523,7 +523,7 @@ function SidebarMenuAction({
 			data-slot="sidebar-menu-action"
 			data-sidebar="menu-action"
 			className={cn(
-				"absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				"absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-icon-base [&>svg]:shrink-0",
 				// Increases the hit area of the button on mobile.
 				"after:absolute after:-inset-2 md:after:hidden",
 				"peer-data-[size=sm]/menu-button:top-1",
@@ -574,10 +574,10 @@ function SidebarMenuSkeleton({
 		<div
 			data-slot="sidebar-menu-skeleton"
 			data-sidebar="menu-skeleton"
-			className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+			className={cn("flex h-control-form items-center gap-2 rounded-md px-2", className)}
 			{...props}
 		>
-			{showIcon && <Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />}
+			{showIcon && <Skeleton className="size-icon-base rounded-md" data-sidebar="menu-skeleton-icon" />}
 			<Skeleton
 				className="h-4 max-w-(--skeleton-width) flex-1"
 				data-sidebar="menu-skeleton-text"
@@ -637,7 +637,7 @@ function SidebarMenuSubButton({
 			data-size={size}
 			data-active={isActive}
 			className={cn(
-				"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+				"flex h-control-md min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-icon-base [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
 				"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
 				size === "sm" && "text-xs",
 				size === "md" && "text-sm",
diff --git a/frontend/src/renderer/components/ui/table.tsx b/frontend/src/renderer/components/ui/table.tsx
index 8f53d126ee..4d3ed651d9 100644
--- a/frontend/src/renderer/components/ui/table.tsx
+++ b/frontend/src/renderer/components/ui/table.tsx
@@ -46,7 +46,7 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
 		<th
 			data-slot="table-head"
 			className={cn(
-				"h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+				"h-table-head px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5",
 				className,
 			)}
 			{...props}
@@ -59,7 +59,7 @@ function TableCell({ className, ...props }: React.ComponentProps<"td">) {
 		<td
 			data-slot="table-cell"
 			className={cn(
-				"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+				"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5",
 				className,
 			)}
 			{...props}
diff --git a/frontend/src/renderer/components/ui/tabs.tsx b/frontend/src/renderer/components/ui/tabs.tsx
index 20703b5aab..541c5d0803 100644
--- a/frontend/src/renderer/components/ui/tabs.tsx
+++ b/frontend/src/renderer/components/ui/tabs.tsx
@@ -6,7 +6,7 @@ export const Tabs = TabsPrimitive.Root;
 export function TabsList({ className, ...props }: React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>) {
 	return (
 		<TabsPrimitive.List
-			className={cn("inline-flex h-8 items-center justify-center gap-1 rounded-md bg-raised p-1", className)}
+			className={cn("inline-flex h-control-form items-center justify-center gap-1 rounded-md bg-raised p-1", className)}
 			{...props}
 		/>
 	);
diff --git a/frontend/src/renderer/components/ui/tooltip.tsx b/frontend/src/renderer/components/ui/tooltip.tsx
index 2a2b06959e..e447c0f8c1 100644
--- a/frontend/src/renderer/components/ui/tooltip.tsx
+++ b/frontend/src/renderer/components/ui/tooltip.tsx
@@ -14,7 +14,7 @@ export function TooltipContent({
 		<TooltipPrimitive.Portal>
 			<TooltipPrimitive.Content
 				className={cn(
-					"z-50 rounded-md border border-border bg-popover px-2 py-1 text-xs text-popover-foreground shadow-md",
+					"z-overlay rounded-md border border-border bg-popover px-2 py-1 text-xs text-popover-foreground shadow-md",
 					className,
 				)}
 				sideOffset={sideOffset}
diff --git a/frontend/src/renderer/lib/apply-initial-theme.ts b/frontend/src/renderer/lib/apply-initial-theme.ts
new file mode 100644
index 0000000000..74368a96fe
--- /dev/null
+++ b/frontend/src/renderer/lib/apply-initial-theme.ts
@@ -0,0 +1,5 @@
+import { applyDocumentTheme, resolveTheme } from "./theme";
+
+// Runs as the first main.tsx import, before styles.css, so data-theme is set
+// before token CSS paints (avoids a light/dark flash on load).
+applyDocumentTheme(resolveTheme());
diff --git a/frontend/src/renderer/lib/design-tokens.ts b/frontend/src/renderer/lib/design-tokens.ts
new file mode 100644
index 0000000000..8dcd3c0751
--- /dev/null
+++ b/frontend/src/renderer/lib/design-tokens.ts
@@ -0,0 +1,5 @@
+/** Mirrors `--font-size-sm` (12px) in `src/styles/tokens.css`. */
+export const TERMINAL_FONT_SIZE_DEFAULT = 12;
+
+export const TERMINAL_FONT_SIZE_MIN = 10;
+export const TERMINAL_FONT_SIZE_MAX = 20;
diff --git a/frontend/src/renderer/lib/mock-data.ts b/frontend/src/renderer/lib/mock-data.ts
index f7efc57fdc..72f157112a 100644
--- a/frontend/src/renderer/lib/mock-data.ts
+++ b/frontend/src/renderer/lib/mock-data.ts
@@ -29,7 +29,7 @@ export const mockWorkspaces: WorkspaceSummary[] = [
 		path: "/demo/ao-demo",
 		type: "main",
 		orchestratorAgent: "codex",
-		accentColor: "#6ee7b7",
+		accentColor: "var(--color-project-accent-mint)",
 		sessions: [
 			{
 				id: "ao-demo-orchestrator",
@@ -170,7 +170,7 @@ export const mockWorkspaces: WorkspaceSummary[] = [
 		path: "/demo/docs-site",
 		type: "main",
 		orchestratorAgent: "claude-code",
-		accentColor: "#93c5fd",
+		accentColor: "var(--color-project-accent-sky)",
 		sessions: [
 			{
 				id: "docs-installation",
diff --git a/frontend/src/renderer/lib/terminal-themes.ts b/frontend/src/renderer/lib/terminal-themes.ts
index 01ad4f9163..9fba0a2377 100644
--- a/frontend/src/renderer/lib/terminal-themes.ts
+++ b/frontend/src/renderer/lib/terminal-themes.ts
@@ -1,61 +1,61 @@
 import type { ITheme } from "@xterm/xterm";
 
-/** xterm palettes harmonized to styles.css tokens (agent-orchestrator pattern). */
-export function buildTerminalThemes(): { dark: ITheme; light: ITheme } {
-	const accent = {
-		cursor: "#f59f4c",
-		selDark: "rgba(77, 141, 255, 0.30)",
-		selLight: "rgba(37, 99, 235, 0.25)",
-	};
+/** Read a CSS custom property from :root (tokens.css). */
+function cssVar(name: string): string {
+	if (typeof document === "undefined") return "";
+	return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+}
 
+/** xterm palettes harmonized to tokens.css (--color-term-* / semantic colors). */
+export function buildTerminalThemes(): { dark: ITheme; light: ITheme } {
 	const dark: ITheme = {
-		background: "#15171b",
-		foreground: "#d7d7d2",
-		cursor: accent.cursor,
-		cursorAccent: "#15171b",
-		selectionBackground: accent.selDark,
-		selectionInactiveBackground: "rgba(128, 128, 128, 0.2)",
-		black: "#15171b",
-		red: "#ef6b6b",
-		green: "#74b98a",
-		yellow: "#e8c14a",
-		blue: "#4d8dff",
-		magenta: "#a78bfa",
-		cyan: "#6fb3c9",
-		white: "#d7d7d2",
-		brightBlack: "#7c7c7c",
-		brightRed: "#ff8a8a",
-		brightGreen: "#8fd6a6",
-		brightYellow: "#f0d06b",
-		brightBlue: "#7eaaff",
-		brightMagenta: "#c4b0fc",
-		brightCyan: "#8fcfe0",
-		brightWhite: "#f4f5f7",
+		background: cssVar("--color-bg-terminal"),
+		foreground: cssVar("--color-text-terminal"),
+		cursor: cssVar("--color-working"),
+		cursorAccent: cssVar("--color-bg-terminal"),
+		selectionBackground: cssVar("--color-term-selection-dark"),
+		selectionInactiveBackground: cssVar("--color-term-selection-inactive"),
+		black: cssVar("--color-bg-terminal"),
+		red: cssVar("--color-danger"),
+		green: cssVar("--color-success"),
+		yellow: cssVar("--color-warning"),
+		blue: cssVar("--color-accent"),
+		magenta: cssVar("--color-purple"),
+		cyan: cssVar("--color-term-cyan"),
+		white: cssVar("--color-text-terminal"),
+		brightBlack: cssVar("--color-text-terminal-dim"),
+		brightRed: cssVar("--color-term-bright-red"),
+		brightGreen: cssVar("--color-term-bright-green"),
+		brightYellow: cssVar("--color-term-bright-yellow"),
+		brightBlue: cssVar("--color-term-bright-blue"),
+		brightMagenta: cssVar("--color-term-bright-magenta"),
+		brightCyan: cssVar("--color-term-bright-cyan"),
+		brightWhite: cssVar("--color-text-primary"),
 	};
 
 	const light: ITheme = {
-		background: "#fafafa",
-		foreground: "#24292f",
-		cursor: accent.cursor,
-		cursorAccent: "#fafafa",
-		selectionBackground: accent.selLight,
-		selectionInactiveBackground: "rgba(128, 128, 128, 0.15)",
-		black: "#24292f",
-		red: "#b42318",
-		green: "#1a7f37",
-		yellow: "#9a6b00",
-		blue: "#2563eb",
-		magenta: "#8e24aa",
-		cyan: "#0b7285",
-		white: "#4b5563",
-		brightBlack: "#374151",
-		brightRed: "#912018",
-		brightGreen: "#176639",
-		brightYellow: "#6f4a00",
-		brightBlue: "#1d4ed8",
-		brightMagenta: "#7b1fa2",
-		brightCyan: "#155e75",
-		brightWhite: "#374151",
+		background: cssVar("--color-bg-terminal"),
+		foreground: cssVar("--color-text-terminal"),
+		cursor: cssVar("--color-working"),
+		cursorAccent: cssVar("--color-bg-terminal"),
+		selectionBackground: cssVar("--color-term-selection-light"),
+		selectionInactiveBackground: cssVar("--color-term-selection-inactive-light"),
+		black: cssVar("--color-text-terminal"),
+		red: cssVar("--color-term-red-light"),
+		green: cssVar("--color-success"),
+		yellow: cssVar("--color-warning"),
+		blue: cssVar("--color-accent"),
+		magenta: cssVar("--color-term-magenta-light"),
+		cyan: cssVar("--color-term-cyan-light"),
+		white: cssVar("--color-term-white-light"),
+		brightBlack: cssVar("--color-term-bright-black-light"),
+		brightRed: cssVar("--color-term-bright-red-light"),
+		brightGreen: cssVar("--color-term-bright-green-light"),
+		brightYellow: cssVar("--color-term-bright-yellow-light"),
+		brightBlue: cssVar("--color-term-bright-blue-light"),
+		brightMagenta: cssVar("--color-term-bright-magenta-light"),
+		brightCyan: cssVar("--color-term-bright-cyan-light"),
+		brightWhite: cssVar("--color-term-bright-black-light"),
 	};
 
 	return { dark, light };
diff --git a/frontend/src/renderer/lib/theme.ts b/frontend/src/renderer/lib/theme.ts
new file mode 100644
index 0000000000..ecf693a8ad
--- /dev/null
+++ b/frontend/src/renderer/lib/theme.ts
@@ -0,0 +1,33 @@
+export type Theme = "light" | "dark";
+
+export const themeStorageKey = "ao.theme";
+
+function getLocalStorage() {
+	if (typeof window === "undefined" || !window.localStorage) return null;
+	return window.localStorage;
+}
+
+export function systemTheme(): Theme {
+	if (typeof window === "undefined") return "dark";
+	return window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+}
+
+export function readStoredTheme(): Theme | null {
+	try {
+		const stored = getLocalStorage()?.getItem(themeStorageKey);
+		return stored === "light" || stored === "dark" ? stored : null;
+	} catch {
+		return null;
+	}
+}
+
+/** Stored preference, else OS appearance. */
+export function resolveTheme(): Theme {
+	return readStoredTheme() ?? systemTheme();
+}
+
+export function applyDocumentTheme(theme: Theme): void {
+	if (typeof document === "undefined") return;
+	document.documentElement.dataset.theme = theme;
+	document.documentElement.style.colorScheme = theme;
+}
diff --git a/frontend/src/renderer/main.tsx b/frontend/src/renderer/main.tsx
index a575674db2..4b0686145e 100644
--- a/frontend/src/renderer/main.tsx
+++ b/frontend/src/renderer/main.tsx
@@ -1,3 +1,4 @@
+import "./lib/apply-initial-theme";
 import React from "react";
 import { createRoot } from "react-dom/client";
 import { QueryClientProvider } from "@tanstack/react-query";
diff --git a/frontend/src/renderer/routeTree.gen.ts b/frontend/src/renderer/routeTree.gen.ts
deleted file mode 100644
index 26cb7f148f..0000000000
--- a/frontend/src/renderer/routeTree.gen.ts
+++ /dev/null
@@ -1,211 +0,0 @@
-/* eslint-disable */
-
-// @ts-nocheck
-
-// noinspection JSUnusedGlobalSymbols
-
-// This file was automatically generated by TanStack Router.
-// You should NOT make any changes in this file as it will be overwritten.
-// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
-
-import { Route as rootRouteImport } from "./routes/__root";
-import { Route as ShellRouteImport } from "./routes/_shell";
-import { Route as ShellIndexRouteImport } from "./routes/_shell.index";
-import { Route as ShellSettingsRouteImport } from "./routes/_shell.settings";
-import { Route as ShellPrsRouteImport } from "./routes/_shell.prs";
-import { Route as ShellSessionsSessionIdRouteImport } from "./routes/_shell.sessions.$sessionId";
-import { Route as ShellProjectsProjectIdRouteImport } from "./routes/_shell.projects.$projectId";
-import { Route as ShellProjectsProjectIdSettingsRouteImport } from "./routes/_shell.projects.$projectId_.settings";
-import { Route as ShellProjectsProjectIdSessionsSessionIdRouteImport } from "./routes/_shell.projects.$projectId_.sessions.$sessionId";
-
-const ShellRoute = ShellRouteImport.update({
-	id: "/_shell",
-	getParentRoute: () => rootRouteImport,
-} as any);
-const ShellIndexRoute = ShellIndexRouteImport.update({
-	id: "/",
-	path: "/",
-	getParentRoute: () => ShellRoute,
-} as any);
-const ShellSettingsRoute = ShellSettingsRouteImport.update({
-	id: "/settings",
-	path: "/settings",
-	getParentRoute: () => ShellRoute,
-} as any);
-const ShellPrsRoute = ShellPrsRouteImport.update({
-	id: "/prs",
-	path: "/prs",
-	getParentRoute: () => ShellRoute,
-} as any);
-const ShellSessionsSessionIdRoute = ShellSessionsSessionIdRouteImport.update({
-	id: "/sessions/$sessionId",
-	path: "/sessions/$sessionId",
-	getParentRoute: () => ShellRoute,
-} as any);
-const ShellProjectsProjectIdRoute = ShellProjectsProjectIdRouteImport.update({
-	id: "/projects/$projectId",
-	path: "/projects/$projectId",
-	getParentRoute: () => ShellRoute,
-} as any);
-const ShellProjectsProjectIdSettingsRoute = ShellProjectsProjectIdSettingsRouteImport.update({
-	id: "/projects/$projectId_/settings",
-	path: "/projects/$projectId/settings",
-	getParentRoute: () => ShellRoute,
-} as any);
-const ShellProjectsProjectIdSessionsSessionIdRoute = ShellProjectsProjectIdSessionsSessionIdRouteImport.update({
-	id: "/projects/$projectId_/sessions/$sessionId",
-	path: "/projects/$projectId/sessions/$sessionId",
-	getParentRoute: () => ShellRoute,
-} as any);
-
-export interface FileRoutesByFullPath {
-	"/": typeof ShellIndexRoute;
-	"/prs": typeof ShellPrsRoute;
-	"/settings": typeof ShellSettingsRoute;
-	"/projects/$projectId": typeof ShellProjectsProjectIdRoute;
-	"/sessions/$sessionId": typeof ShellSessionsSessionIdRoute;
-	"/projects/$projectId/settings": typeof ShellProjectsProjectIdSettingsRoute;
-	"/projects/$projectId/sessions/$sessionId": typeof ShellProjectsProjectIdSessionsSessionIdRoute;
-}
-export interface FileRoutesByTo {
-	"/prs": typeof ShellPrsRoute;
-	"/settings": typeof ShellSettingsRoute;
-	"/": typeof ShellIndexRoute;
-	"/projects/$projectId": typeof ShellProjectsProjectIdRoute;
-	"/sessions/$sessionId": typeof ShellSessionsSessionIdRoute;
-	"/projects/$projectId/settings": typeof ShellProjectsProjectIdSettingsRoute;
-	"/projects/$projectId/sessions/$sessionId": typeof ShellProjectsProjectIdSessionsSessionIdRoute;
-}
-export interface FileRoutesById {
-	__root__: typeof rootRouteImport;
-	"/_shell": typeof ShellRouteWithChildren;
-	"/_shell/prs": typeof ShellPrsRoute;
-	"/_shell/settings": typeof ShellSettingsRoute;
-	"/_shell/": typeof ShellIndexRoute;
-	"/_shell/projects/$projectId": typeof ShellProjectsProjectIdRoute;
-	"/_shell/sessions/$sessionId": typeof ShellSessionsSessionIdRoute;
-	"/_shell/projects/$projectId_/settings": typeof ShellProjectsProjectIdSettingsRoute;
-	"/_shell/projects/$projectId_/sessions/$sessionId": typeof ShellProjectsProjectIdSessionsSessionIdRoute;
-}
-export interface FileRouteTypes {
-	fileRoutesByFullPath: FileRoutesByFullPath;
-	fullPaths:
-		| "/"
-		| "/prs"
-		| "/settings"
-		| "/projects/$projectId"
-		| "/sessions/$sessionId"
-		| "/projects/$projectId/settings"
-		| "/projects/$projectId/sessions/$sessionId";
-	fileRoutesByTo: FileRoutesByTo;
-	to:
-		| "/prs"
-		| "/settings"
-		| "/"
-		| "/projects/$projectId"
-		| "/sessions/$sessionId"
-		| "/projects/$projectId/settings"
-		| "/projects/$projectId/sessions/$sessionId";
-	id:
-		| "__root__"
-		| "/_shell"
-		| "/_shell/prs"
-		| "/_shell/settings"
-		| "/_shell/"
-		| "/_shell/projects/$projectId"
-		| "/_shell/sessions/$sessionId"
-		| "/_shell/projects/$projectId_/settings"
-		| "/_shell/projects/$projectId_/sessions/$sessionId";
-	fileRoutesById: FileRoutesById;
-}
-export interface RootRouteChildren {
-	ShellRoute: typeof ShellRouteWithChildren;
-}
-
-declare module "@tanstack/react-router" {
-	interface FileRoutesByPath {
-		"/_shell": {
-			id: "/_shell";
-			path: "";
-			fullPath: "/";
-			preLoaderRoute: typeof ShellRouteImport;
-			parentRoute: typeof rootRouteImport;
-		};
-		"/_shell/": {
-			id: "/_shell/";
-			path: "/";
-			fullPath: "/";
-			preLoaderRoute: typeof ShellIndexRouteImport;
-			parentRoute: typeof ShellRoute;
-		};
-		"/_shell/settings": {
-			id: "/_shell/settings";
-			path: "/settings";
-			fullPath: "/settings";
-			preLoaderRoute: typeof ShellSettingsRouteImport;
-			parentRoute: typeof ShellRoute;
-		};
-		"/_shell/prs": {
-			id: "/_shell/prs";
-			path: "/prs";
-			fullPath: "/prs";
-			preLoaderRoute: typeof ShellPrsRouteImport;
-			parentRoute: typeof ShellRoute;
-		};
-		"/_shell/sessions/$sessionId": {
-			id: "/_shell/sessions/$sessionId";
-			path: "/sessions/$sessionId";
-			fullPath: "/sessions/$sessionId";
-			preLoaderRoute: typeof ShellSessionsSessionIdRouteImport;
-			parentRoute: typeof ShellRoute;
-		};
-		"/_shell/projects/$projectId": {
-			id: "/_shell/projects/$projectId";
-			path: "/projects/$projectId";
-			fullPath: "/projects/$projectId";
-			preLoaderRoute: typeof ShellProjectsProjectIdRouteImport;
-			parentRoute: typeof ShellRoute;
-		};
-		"/_shell/projects/$projectId_/settings": {
-			id: "/_shell/projects/$projectId_/settings";
-			path: "/projects/$projectId/settings";
-			fullPath: "/projects/$projectId/settings";
-			preLoaderRoute: typeof ShellProjectsProjectIdSettingsRouteImport;
-			parentRoute: typeof ShellRoute;
-		};
-		"/_shell/projects/$projectId_/sessions/$sessionId": {
-			id: "/_shell/projects/$projectId_/sessions/$sessionId";
-			path: "/projects/$projectId/sessions/$sessionId";
-			fullPath: "/projects/$projectId/sessions/$sessionId";
-			preLoaderRoute: typeof ShellProjectsProjectIdSessionsSessionIdRouteImport;
-			parentRoute: typeof ShellRoute;
-		};
-	}
-}
-
-interface ShellRouteChildren {
-	ShellPrsRoute: typeof ShellPrsRoute;
-	ShellSettingsRoute: typeof ShellSettingsRoute;
-	ShellIndexRoute: typeof ShellIndexRoute;
-	ShellProjectsProjectIdRoute: typeof ShellProjectsProjectIdRoute;
-	ShellSessionsSessionIdRoute: typeof ShellSessionsSessionIdRoute;
-	ShellProjectsProjectIdSettingsRoute: typeof ShellProjectsProjectIdSettingsRoute;
-	ShellProjectsProjectIdSessionsSessionIdRoute: typeof ShellProjectsProjectIdSessionsSessionIdRoute;
-}
-
-const ShellRouteChildren: ShellRouteChildren = {
-	ShellPrsRoute: ShellPrsRoute,
-	ShellSettingsRoute: ShellSettingsRoute,
-	ShellIndexRoute: ShellIndexRoute,
-	ShellProjectsProjectIdRoute: ShellProjectsProjectIdRoute,
-	ShellSessionsSessionIdRoute: ShellSessionsSessionIdRoute,
-	ShellProjectsProjectIdSettingsRoute: ShellProjectsProjectIdSettingsRoute,
-	ShellProjectsProjectIdSessionsSessionIdRoute: ShellProjectsProjectIdSessionsSessionIdRoute,
-};
-
-const ShellRouteWithChildren = ShellRoute._addFileChildren(ShellRouteChildren);
-
-const rootRouteChildren: RootRouteChildren = {
-	ShellRoute: ShellRouteWithChildren,
-};
-export const routeTree = rootRouteImport._addFileChildren(rootRouteChildren)._addFileTypes<FileRouteTypes>();
diff --git a/frontend/src/renderer/routes/_shell.tsx b/frontend/src/renderer/routes/_shell.tsx
index de47e319bf..0456ff6d2e 100644
--- a/frontend/src/renderer/routes/_shell.tsx
+++ b/frontend/src/renderer/routes/_shell.tsx
@@ -17,7 +17,8 @@ import { ShellProvider } from "../lib/shell-context";
 import { spawnOrchestrator } from "../lib/spawn-orchestrator";
 import { restartProjectOrchestrator } from "../lib/restart-orchestrator";
 import { captureOrchestratorReplacementFailure } from "../lib/orchestrator-replacement-telemetry";
-import { readStoredTheme, type Theme, useUiStore } from "../stores/ui-store";
+import { applyDocumentTheme, readStoredTheme, systemTheme } from "../lib/theme";
+import { useUiStore } from "../stores/ui-store";
 import type { WorkspaceSummary } from "../types/workspace";
 import type { components } from "../../api/schema";
 
@@ -32,10 +33,6 @@ export const Route = createFileRoute("/_shell")({
 	component: ShellLayout,
 });
 
-function systemTheme(): Theme {
-	return window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
-}
-
 function errorMessage(error: unknown) {
 	return error instanceof Error ? error.message : "Could not load projects";
 }
@@ -189,8 +186,7 @@ function ShellLayout() {
 	);
 
 	useEffect(() => {
-		document.documentElement.dataset.theme = theme;
-		document.documentElement.style.colorScheme = theme;
+		applyDocumentTheme(theme);
 	}, [theme]);
 
 	useEffect(() => {
@@ -247,7 +243,12 @@ function ShellLayout() {
 					className="min-h-0 flex-1"
 					onOpenChange={(open) => open !== isSidebarOpen && toggleSidebar()}
 					open={isSidebarOpen}
-					style={{ "--sidebar-width": "var(--ao-sidebar-w, 240px)", "--sidebar-width-icon": "48px" } as CSSProperties}
+					style={
+						{
+							"--sidebar-width": "var(--ao-sidebar-w, var(--size-sidebar-default))",
+							"--sidebar-width-icon": "var(--size-sidebar-icon)",
+						} as CSSProperties
+					}
 				>
 					<Sidebar
 						daemonStatus={daemonStatus}
diff --git a/frontend/src/renderer/stores/ui-store.ts b/frontend/src/renderer/stores/ui-store.ts
index eb5680b842..4e08191fbb 100644
--- a/frontend/src/renderer/stores/ui-store.ts
+++ b/frontend/src/renderer/stores/ui-store.ts
@@ -1,6 +1,9 @@
 import { create } from "zustand";
+import { resolveTheme, themeStorageKey, type Theme } from "../lib/theme";
+
+export type { Theme } from "../lib/theme";
+export { readStoredTheme } from "../lib/theme";
 
-export type Theme = "light" | "dark";
 /** Worker detail view toggles — Changes (Git rail) is the default. */
 export type WorkbenchTab = "changes" | "files" | "terminal";
 
@@ -28,7 +31,6 @@ type UiState = {
 
 const sidebarStorageKey = "ao.sidebar.open";
 const inspectorStorageKey = "ao.inspector.open";
-const themeStorageKey = "ao.theme";
 
 function getLocalStorage() {
 	if (typeof window === "undefined" || !window.localStorage) return null;
@@ -43,27 +45,11 @@ function initialInspectorOpen() {
 	return getLocalStorage()?.getItem(inspectorStorageKey) !== "false";
 }
 
-function systemTheme(): Theme {
-	if (typeof window === "undefined") return "dark";
-	return window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
-}
-
-function initialTheme(): Theme {
-	const stored = getLocalStorage()?.getItem(themeStorageKey);
-	if (stored === "light" || stored === "dark") return stored;
-	return systemTheme();
-}
-
-export function readStoredTheme(): Theme | null {
-	const stored = getLocalStorage()?.getItem(themeStorageKey);
-	return stored === "light" || stored === "dark" ? stored : null;
-}
-
 export const useUiStore = create<UiState>((set) => ({
 	workbenchTab: "changes",
 	isSidebarOpen: initialSidebarOpen(),
 	isInspectorOpen: initialInspectorOpen(),
-	theme: initialTheme(),
+	theme: resolveTheme(),
 	restartingProjectIds: new Set<string>(),
 	orchestratorReplacementErrors: {},
 	orchestratorStartupErrors: {},
diff --git a/frontend/src/renderer/styles.css b/frontend/src/renderer/styles.css
index d318741a93..ced30fa4a1 100644
--- a/frontend/src/renderer/styles.css
+++ b/frontend/src/renderer/styles.css
@@ -1,166 +1,275 @@
 @import "tailwindcss";
+@import "../styles/tokens.css";
+
+@custom-media --layout-narrow (width <= 680px); /* --breakpoint-layout-narrow */
 
 /*
- * Design system — see DESIGN.md (source of truth). emdash-matched: flat near-black
+ * Design system — see DESIGN_TOKENS.md. emdash-matched: flat near-black
  * neutral ramp, hairline borders, system font, refined-blue accent (not emdash's
  * jade). Dark is primary (:root); light is the supported override
- * (:root[data-theme="light"]). The Zustand theme toggle sets data-theme on <html>.
+ * (:root[data-theme="light"]). apply-initial-theme runs before CSS load; the
+ * Zustand theme toggle updates data-theme on <html>.
  */
 @theme inline {
-	--font-sans:
-		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Helvetica Neue",
-		sans-serif;
-	/* Nerd Font stack (ported from yyork): the terminal reads --font-mono so
-   * agent TUIs get powerline separators and file-type icons. These are
-   * system-installed fonts — the app bundles none — and the browser picks the
-   * first one present, falling back to plain monospace (no icon glyphs) if a
-   * user has no Nerd Font. JetBrainsMono Nerd Font is the primary target. */
-	--font-mono:
-		"JetBrainsMono Nerd Font Mono", "JetBrainsMono Nerd Font", "FiraCode Nerd Font Mono", "FiraCode Nerd Font",
-		"MesloLGS NF", "CaskaydiaCove Nerd Font Mono", "CaskaydiaCove Nerd Font", "Hack Nerd Font Mono", "Hack Nerd Font",
-		"Symbols Nerd Font Mono", "Symbols Nerd Font", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-		"Liberation Mono", "Courier New", monospace;
+	--font-sans: var(--font-family-base);
+	--font-mono: var(--font-family-mono);
+
+	/* Typography — align Tailwind text-* with token scale */
+	--text-xs: var(--font-size-sm);
+	--text-sm: var(--font-size-md);
+	--text-base: var(--font-size-md);
+
+	/* Typography — token-named half-steps (text-control = dense 13px chrome) */
+	--text-micro: var(--font-size-xs);
+	--text-2xs: var(--font-size-2xs);
+	--text-caption: var(--font-size-caption);
+	--text-sm-md: var(--font-size-sm-md);
+	--text-md-sm: var(--font-size-md-sm);
+	--text-control: var(--font-size-base);
+	--text-brand: var(--font-size-brand);
+	--text-subtitle: var(--font-size-subtitle);
+	--text-heading-sm: var(--font-size-heading-sm);
+	--text-heading: var(--font-size-heading);
+	--text-heading-lg: var(--font-size-heading-lg);
+
+	/* Radius — align Tailwind rounded-* with token scale */
+	--radius-xs: var(--radius-xs);
+	--radius-sm: var(--radius-sm);
+	--radius-md: var(--radius-md);
+	--radius-lg: var(--radius-lg);
+	--radius-panel: var(--radius-panel);
+	--radius-full: var(--radius-full);
+
+	/* Breakpoints — for Tailwind max-* variants */
+	--breakpoint-layout-narrow: 680px;
+	--breakpoint-inspector-compact: 300px;
+
+	/* Spacing — align Tailwind p-*, gap-*, etc. with token scale */
+	--spacing-0_5: var(--space-0_5);
+	--spacing-0_75: var(--space-0_75);
+	--spacing-1: var(--space-1);
+	--spacing-1_25: var(--space-1_25);
+	--spacing-1_5: var(--space-1_5);
+	--spacing-1_75: var(--space-1_75);
+	--spacing-2: var(--space-2);
+	--spacing-2_25: var(--space-2_25);
+	--spacing-2_5: var(--space-2_5);
+	--spacing-2_75: var(--space-2_75);
+	--spacing-3: var(--space-3);
+	--spacing-3_25: var(--space-3_25);
+	--spacing-3_5: var(--space-3_5);
+	--spacing-3_75: var(--space-3_75);
+	--spacing-4: var(--space-4);
+	--spacing-4_5: var(--space-4_5);
+	--spacing-5: var(--space-5);
+	--spacing-5_5: var(--space-5_5);
+	--spacing-6: var(--space-6);
+	--spacing-8: var(--space-8);
+	--spacing-10: var(--space-10);
+
+	/* Z-index — z-chrome, z-titlebar, z-overlay */
+	--z-index-chrome: var(--z-chrome);
+	--z-index-titlebar: var(--z-titlebar);
+	--z-index-overlay: var(--z-overlay);
+
+	/* Ring width — ring-focus for dense control focus rings */
+	--ring-width-focus: var(--ring-width-focus);
+
+	/* Elevation — align Tailwind shadow-* with token scale */
+	--shadow-sm: var(--elevation-sm);
+	--shadow-md: var(--elevation-md);
+	--shadow-lg: var(--elevation-lg);
+	--shadow-xl: var(--elevation-xl);
 
 	/* Surfaces */
-	--color-background: var(--bg);
-	--color-foreground: var(--fg);
-	--color-surface: var(--bg-1);
-	--color-card: var(--bg-1);
-	--color-card-foreground: var(--fg);
-	--color-raised: var(--bg-2);
-	--color-overlay: var(--bg-3);
-	--color-popover: var(--bg-1);
-	--color-popover-foreground: var(--fg);
-	/* shadcn input border uses border-input; map to our hairline border */
-	--color-input: var(--border);
-	--color-sidebar: var(--sidebar-bg);
-	--color-sidebar-foreground: var(--fg-muted);
-	--color-sidebar-primary: var(--accent);
-	--color-sidebar-primary-foreground: var(--accent-fg);
-	--color-sidebar-accent: var(--bg-2);
-	--color-sidebar-accent-foreground: var(--fg);
-	--color-sidebar-border: var(--border);
-	--color-sidebar-ring: var(--accent);
-	--color-terminal: var(--term-bg);
+	--color-background: var(--color-bg-primary);
+	--color-foreground: var(--color-text-primary);
+	--color-surface: var(--color-bg-secondary);
+	--color-card: var(--color-bg-secondary);
+	--color-card-foreground: var(--color-text-primary);
+	--color-raised: var(--color-bg-tertiary);
+	--color-overlay: var(--color-bg-elevated);
+	--color-popover: var(--color-bg-secondary);
+	--color-popover-foreground: var(--color-text-primary);
+	--color-input: var(--bridge-border);
+	--color-sidebar: var(--color-bg-sidebar);
+	--color-sidebar-foreground: var(--color-text-muted);
+	--color-sidebar-primary: var(--bridge-accent);
+	--color-sidebar-primary-foreground: var(--bridge-accent-fg);
+	--color-sidebar-accent: var(--color-bg-tertiary);
+	--color-sidebar-accent-foreground: var(--color-text-primary);
+	--color-sidebar-border: var(--bridge-border);
+	--color-sidebar-ring: var(--bridge-accent);
+	--color-terminal: var(--color-bg-terminal);
+	--color-terminal-foreground: var(--color-text-terminal);
+	--color-terminal-dim: var(--color-text-terminal-dim);
+	--color-scrim: var(--bridge-scrim);
+
+	/* Browser static preview (light mock inside dark app) */
+	--color-preview: var(--color-preview-bg);
+	--color-preview-foreground: var(--color-preview-fg);
+	--color-preview-muted: var(--bridge-preview-muted);
+	--color-preview-link: var(--bridge-preview-link);
+	--color-preview-heading: var(--bridge-preview-heading);
+	--color-preview-body: var(--bridge-preview-body);
+	--color-preview-card: var(--bridge-preview-card);
+	--color-preview-success: var(--bridge-preview-success);
+	--color-preview-tile: var(--bridge-preview-tile);
+	--color-preview-tile-border: var(--bridge-preview-tile-border);
+	--color-preview-terminal: var(--bridge-preview-terminal);
+	--color-preview-terminal-border: var(--bridge-preview-terminal-border);
+	--color-preview-terminal-foreground: var(--bridge-preview-terminal-fg);
+
+	/* Icon chrome — size-icon-* utilities */
+	--size-icon-2xs: var(--size-icon-2xs);
+	--size-icon-xs: var(--size-icon-xs);
+	--size-icon-sm: var(--size-icon-sm);
+	--size-icon-md: var(--size-icon-md);
+	--size-icon-base: var(--size-icon-base);
+	--size-icon-lg: var(--size-icon-lg);
+	--size-icon-xl: var(--size-icon-xl);
+
+	/* Typography — tracking & leading */
+	--tracking-tight-xl: var(--tracking-tight-xl);
+	--tracking-tight-lg: var(--tracking-tight-lg);
+	--tracking-tight: var(--tracking-tight);
+	--tracking-wide-xs: var(--tracking-wide-xs);
+	--tracking-wide-sm: var(--tracking-wide-sm);
+	--tracking-wide: var(--tracking-wide);
+	--tracking-wide-md: var(--tracking-wide-md);
+	--tracking-wide-lg: var(--tracking-wide-lg);
+	--tracking-wide-xl: var(--tracking-wide-xl);
+
+	--leading-snug: var(--line-height-snug);
+	--leading-body: var(--line-height-normal);
+	--leading-row: var(--line-height-row);
+	--leading-body-md: var(--line-height-body-md);
+	--leading-relaxed: var(--line-height-relaxed);
+	--leading-loose: var(--line-height-loose);
+
+	--font-weight-medium: var(--font-weight-medium);
+	--font-weight-semibold: var(--font-weight-semibold);
+
+	--duration-fast: var(--duration-fast);
+	--duration-normal: var(--duration-normal);
+
+	/* Layout — toolbar offset for fixed sidebar below topbar */
+	--spacing-toolbar: var(--size-toolbar);
+	--spacing-titlebar-content-offset: var(--size-titlebar-content-offset);
+	--spacing-titlebar-cluster-left: var(--size-titlebar-cluster-left);
+	--spacing-control-xs: var(--size-control-xs);
+	--spacing-control-sm: var(--size-control-sm);
+	--spacing-control-form: var(--size-control-form);
+	--spacing-control-md: var(--size-control-md);
+	--spacing-control-lg: var(--size-control-lg);
+	--spacing-control-xl: var(--size-control-xl);
+	--spacing-control-board-sm: var(--size-control-board-sm);
+	--spacing-control-board: var(--size-control-board);
+	--spacing-table-head: var(--size-table-head);
+	--spacing-inspector-tabs: var(--size-inspector-tabs);
+	--spacing-browser-url: var(--size-browser-url);
+	--spacing-browser-min: var(--size-browser-min);
+	--spacing-dot-sm: var(--size-dot-sm);
+	--spacing-content-max: var(--size-content-max);
+	--spacing-board-empty: var(--size-board-empty);
+	--spacing-preview-content: var(--size-preview-content);
+	--spacing-preview-max: var(--size-preview-max);
+	--spacing-notification-width: var(--size-notification-width);
+	--spacing-notification-max-height: var(--size-notification-max-height);
+	--spacing-notification-icon: var(--size-notification-icon);
+	--spacing-font-size-label: var(--size-font-size-label);
+	--spacing-pr-table-actions: var(--size-pr-table-actions);
+	--spacing-pr-col-number: var(--size-pr-col-number);
+	--spacing-pr-col-state: var(--size-pr-col-state);
+	--spacing-inspector-min: var(--size-inspector-min);
+	--spacing-textarea-min: var(--size-textarea-min);
+	--spacing-sidebar-project-actions: var(--size-sidebar-project-actions);
+	--spacing-row-md: var(--size-row-md);
+	--spacing-empty-offset-y: var(--size-empty-offset-y);
+	--spacing-kv-label: var(--size-kv-label);
+	--spacing-branch-chip: var(--size-branch-chip);
+
+	--color-muted: var(--color-bg-tertiary);
+	--color-muted-foreground: var(--color-text-muted);
+	--color-passive: var(--color-text-passive);
+	--color-secondary: var(--color-bg-tertiary);
+	--color-secondary-foreground: var(--color-text-muted);
+
+	--color-primary: var(--bridge-accent);
+	--color-primary-foreground: var(--bridge-accent-fg);
+	--color-accent: var(--bridge-accent);
+	--color-accent-foreground: var(--bridge-accent-fg);
+	--color-accent-weak: var(--bridge-accent-weak);
+	--color-accent-dim: var(--bridge-accent-dim);
+	--color-ring: var(--bridge-accent);
+
+	--color-border: var(--bridge-border);
+	--color-border-strong: var(--bridge-border-strong);
+
+	--color-working: var(--bridge-working);
+	--color-success: var(--bridge-success);
+	--color-success-bright: var(--color-success-bright);
+	--color-warning: var(--bridge-warning);
+	--color-error: var(--bridge-danger);
+	--color-destructive: var(--bridge-danger);
+	--color-destructive-foreground: var(--color-accent-foreground);
+
+	--color-interactive-hover: var(--bridge-interactive-hover);
+	--color-interactive-active: var(--bridge-interactive-active);
 
-	/* Text */
-	--color-muted: var(--bg-2);
-	--color-muted-foreground: var(--fg-muted);
-	--color-passive: var(--fg-passive);
-	--color-secondary: var(--bg-2);
-	--color-secondary-foreground: var(--fg-muted);
+	--animate-status-pulse: status-pulse 1.8s ease-in-out infinite;
+	--animate-overlay-in: overlay-in 150ms ease-out;
+	--animate-modal-in: modal-in 150ms ease-out;
+}
 
-	/* Accent (refined blue) — primary buttons, active session, focus */
-	--color-primary: var(--accent);
-	--color-primary-foreground: var(--accent-fg);
-	--color-accent: var(--accent);
-	--color-accent-foreground: var(--accent-fg);
-	--color-accent-weak: var(--accent-weak);
-	--color-accent-dim: var(--accent-dim);
-	--color-ring: var(--accent);
+@utility w-dialog-md {
+	width: min(var(--size-dialog-md), calc(100vw - var(--space-8)));
+}
 
-	/* Borders */
-	--color-border: var(--border);
-	--color-border-strong: var(--border-1);
+@utility w-dialog-lg {
+	width: min(var(--size-dialog-lg), calc(100vw - var(--space-8)));
+}
 
-	/* Status — map 1:1 to the daemon's derived statuses (agent-orchestrator
-   * palette): working=orange, needs-you=amber, mergeable=green, fail=red. */
-	--color-working: var(--orange);
-	--color-success: var(--green);
-	--color-success-strong: var(--green-strong);
-	--color-warning: var(--amber);
-	--color-error: var(--red);
+@utility w-dialog-xl {
+	width: min(var(--size-dialog-xl), calc(100vw - var(--space-8)));
+}
 
-	/* shadcn "destructive" → our error red (Button destructive, Alert, etc.) */
-	--color-destructive: var(--red);
-	--color-destructive-foreground: #ffffff;
+@utility w-dialog-orchestrator {
+	width: min(var(--size-dialog-orchestrator), calc(100vw - var(--space-8)));
+}
 
-	/* Theme-adaptive interactive surfaces (sidebar hovers, tabs, kanban chrome) */
-	--color-interactive-hover: var(--interactive-hover);
-	--color-interactive-active: var(--interactive-active);
+@utility grid-cols-notification {
+	grid-template-columns: var(--size-notification-icon) minmax(0, 1fr) auto;
+}
 
-	--radius-sm: 4px;
-	--radius-md: 6px;
-	--radius-lg: 8px;
-	--radius-xl: 12px;
+@utility max-w-inspector-status-chip {
+	max-width: var(--size-inspector-status-chip-max);
+}
 
-	--animate-status-pulse: status-pulse 1.8s ease-in-out infinite;
-	--animate-overlay-in: overlay-in 150ms ease-out;
-	--animate-modal-in: modal-in 150ms ease-out;
+@utility w-font-size-label {
+	width: var(--size-font-size-label);
+}
+
+@utility bg-purple-subtle {
+	background-color: color-mix(in srgb, var(--color-purple) 12%, transparent);
+}
+
+@utility text-purple-accent {
+	color: var(--color-purple);
+}
+
+@utility shadow-timeline-dot {
+	box-shadow: 0 0 0 3px var(--color-bg-primary);
 }
 
-:root {
-	/* Dark — cloned from the agent-orchestrator web app (packages/web). #0a0b0d
-   * base, #15171b is the only bordered surface, hairline white-alpha lines,
-   * blue accent, orange=working / amber=needs-you / green=mergeable / red=fail. */
-	--bg: #0a0b0d;
-	--bg-1: #15171b;
-	--bg-2: #1b1d22;
-	--bg-3: #212329;
-	--fg: #f4f5f7;
-	--fg-muted: #9ba1aa;
-	--fg-passive: #646a73;
-	--border: rgb(255 255 255 / 0.06);
-	--border-1: rgb(255 255 255 / 0.1);
-	--accent: #4d8dff;
-	--accent-fg: #ffffff;
-	--accent-weak: rgb(77 141 255 / 0.16);
-	--accent-dim: #24406e;
-	--orange: #f59f4c;
-	--green: #74b98a;
-	--green-strong: #74b98a;
-	--amber: #e8c14a;
-	--red: #ef6b6b;
-	--purple: #a78bfa;
-	/* Terminal — dark palette (light override below). */
-	--term-bg: #15171b;
-	--term-fg: #d7d7d2;
-	--term-green: #74b98a;
-	--term-dim: #7c7c7c;
-	--term-blue: #4d8dff;
-	--term-amber: #e8c14a;
-	--shadow: 0 1px 0 rgb(0 0 0 / 0.4), 0 12px 32px rgb(0 0 0 / 0.5);
-	/* Sidebar surface sits a step below --bg (cloned #08090b). */
-	--sidebar-bg: #08090b;
-	--interactive-hover: rgb(255 255 255 / 0.04);
-	--interactive-active: rgb(255 255 255 / 0.07);
-	--kanban-column-bg: rgb(255 255 255 / 0.018);
-	--kanban-pending-glow: rgb(255 255 255 / 0.02);
+@utility shadow-timeline-dot-now {
+	box-shadow:
+		0 0 0 3px var(--color-bg-primary),
+		0 0 8px var(--color-working);
 }
 
-:root[data-theme="light"] {
-	/* Light — supported, not primary. */
-	--bg: #fcfcfc;
-	--bg-1: #ffffff;
-	--bg-2: #ededee;
-	--bg-3: #e4e4e6;
-	--fg: #1a1a1a;
-	--fg-muted: #666666;
-	--fg-passive: #9a9a9a;
-	--border: #e3e3e5;
-	--border-1: #d4d4d6;
-	--accent: #2563eb;
-	--accent-fg: #ffffff;
-	--accent-weak: rgb(37 99 235 / 0.12);
-	--accent-dim: #bcd2f7;
-	--sidebar-bg: var(--bg);
-	--orange: #c2410c;
-	--green: #1a7f37;
-	--green-strong: #1a7f37;
-	--amber: #9a6b00;
-	--red: #c0392b;
-	--purple: #7c3aed;
-	--interactive-hover: rgb(0 0 0 / 0.04);
-	--interactive-active: rgb(0 0 0 / 0.07);
-	--kanban-column-bg: rgb(0 0 0 / 0.02);
-	--kanban-pending-glow: rgb(0 0 0 / 0.03);
-	--term-bg: #fafafa;
-	--term-fg: #24292f;
-	--term-green: #1a7f37;
-	--term-dim: #6b7280;
-	--term-blue: #2563eb;
-	--term-amber: #9a6b00;
-	--shadow: 0 1px 0 rgb(0 0 0 / 0.03), 0 12px 30px rgb(20 30 50 / 0.1);
+@utility bg-surface-faint {
+	background-color: color-mix(in srgb, var(--color-bg-primary) 35%, transparent);
 }
 
 * {
@@ -176,11 +285,11 @@ body,
 body {
 	margin: 0;
 	overflow: hidden;
-	background: var(--bg);
-	color: var(--fg);
+	background: var(--color-bg-primary);
+	color: var(--color-text-primary);
 	font-family: var(--font-sans);
-	font-size: 14px;
-	line-height: 1.5;
+	font-size: var(--font-size-md);
+	line-height: var(--line-height-normal);
 	-webkit-font-smoothing: antialiased;
 }
 
@@ -247,105 +356,7 @@ select {
 }
 
 .terminal-pane-frame:fullscreen {
-	background: var(--bg);
-}
-
-.terminal-toolbar {
-	display: flex;
-	height: 56px;
-	flex: 0 0 56px;
-	align-items: center;
-	border-bottom: 1px solid var(--border);
-	background: var(--bg);
-	padding: 0 18px;
-}
-
-.terminal-toolbar__label {
-	display: flex;
-	min-width: 0;
-	align-items: center;
-	gap: 12px;
-}
-
-.terminal-toolbar__eyebrow {
-	flex: 0 0 auto;
-	font-family: var(--font-mono);
-	font-size: 11px;
-	font-weight: 700;
-	letter-spacing: 0.09em;
-	color: var(--fg-muted);
-}
-
-.terminal-toolbar__session {
-	min-width: 0;
-	overflow: hidden;
-	font-family: var(--font-mono);
-	font-size: 13px;
-	font-weight: 600;
-	color: var(--fg-passive);
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.terminal-toolbar__controls {
-	display: flex;
-	margin-left: auto;
-	align-items: center;
-	gap: 12px;
-	font-family: var(--font-mono);
-	color: var(--fg-passive);
-}
-
-.terminal-toolbar__control {
-	display: inline-flex;
-	width: 24px;
-	height: 24px;
-	align-items: center;
-	justify-content: center;
-	border: 0;
-	border-radius: 5px;
-	background: transparent;
-	color: var(--fg-passive);
-	cursor: pointer;
-	font-family: var(--font-mono);
-	font-size: 13px;
-	line-height: 1;
-	transition:
-		background 120ms ease,
-		color 120ms ease,
-		opacity 120ms ease;
-}
-
-.terminal-toolbar__control:hover {
-	background: var(--interactive-hover);
-	color: var(--fg);
-}
-
-.terminal-toolbar__control:focus-visible {
-	outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
-	outline-offset: 1px;
-}
-
-.terminal-toolbar__control:disabled {
-	cursor: default;
-	opacity: 0.35;
-}
-
-.terminal-toolbar__control:disabled:hover {
-	background: transparent;
-	color: var(--fg-passive);
-}
-
-.terminal-toolbar__control--icon {
-	margin-left: 6px;
-}
-
-.terminal-toolbar__font-size {
-	width: 42px;
-	text-align: center;
-	font-size: 12px;
-	font-weight: 600;
-	color: var(--fg-muted);
+	background: var(--color-bg-primary);
 }
 
 @keyframes status-pulse {
@@ -378,517 +389,21 @@ select {
 	}
 }
 
-/* ── Resizable panel handles (sidebar + inspector) ──────────────────────── */
-.resize-handle {
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	width: 7px;
-	z-index: 5;
-	cursor: col-resize;
-	background: transparent;
-	touch-action: none;
-}
-
-.resize-handle--right {
-	right: -3px;
-}
-
-.resize-handle--left {
-	left: -3px;
-}
-
-.resize-handle::after {
-	content: "";
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	left: 50%;
-	width: 1px;
-	transform: translateX(-50%);
-	background: transparent;
-	transition: background 0.12s ease;
-}
-
-.resize-handle:hover::after,
-body.is-resizing-x .resize-handle::after {
-	background: var(--border);
-}
-
+/* ── Global resize state (sidebar drag) ─────────────────────────────────── */
 body.is-resizing-x {
 	cursor: col-resize;
 	user-select: none;
 }
 
-/* No width transition while actively dragging the sidebar resize handle
- * (shadcn's sidebar animates width for collapse/expand). */
+body.is-resizing-x [data-slot="resize-handle"]::after {
+	background: var(--color-border);
+}
+
 body.is-resizing-x [data-slot="sidebar-gap"],
 body.is-resizing-x [data-slot="sidebar-container"] {
 	transition: none;
 }
 
-/* ── Shell topbar (agent-orchestrator .dashboard-app-header) ──────────────
- * One header for every screen (rendered by the shell layout), so one padding:
- * AO's session-topbar values. Upstream splits this into a 14px dashboard
- * header and a 16/14px session override; with the bar hoisted there is a
- * single frame and the crumb never shifts between views. The bar spans the
- * full window width with the sidebar pinned below it (approved divergence
- * 2026-06-12), so its bottom border runs edge-to-edge and the sidebar border
- * stops at the header instead of crossing the traffic-light strip. */
-.dashboard-app-header {
-	display: flex;
-	height: 56px;
-	flex-shrink: 0;
-	align-items: center;
-	gap: 13px;
-	padding: 0 16px 0 14px;
-	border-bottom: 1px solid var(--border);
-	background: var(--bg);
-	z-index: 10;
-}
-
-.dashboard-app-header__project {
-	font-size: 14.5px;
-	font-weight: 600;
-	letter-spacing: -0.01em;
-	line-height: 1;
-	color: var(--fg);
-	white-space: nowrap;
-}
-
-.topbar-project-line {
-	display: inline-flex;
-	min-width: 0;
-	align-items: center;
-	gap: 6px;
-}
-
-.dashboard-app-header__spacer {
-	flex: 1;
-	min-width: 0;
-}
-
-.dashboard-app-header__actions {
-	display: flex;
-	flex-shrink: 0;
-	align-items: center;
-	gap: 6px;
-}
-
-.dashboard-app-header__icon-btn {
-	display: grid;
-	width: 34px;
-	height: 34px;
-	place-items: center;
-	border-radius: 7px;
-	color: var(--fg-muted);
-	transition:
-		background 0.12s ease,
-		color 0.12s ease;
-}
-
-.dashboard-app-header__icon-btn:hover {
-	background: var(--interactive-hover);
-	color: var(--fg);
-}
-
-.dashboard-app-header__kill-btn {
-	display: inline-flex;
-	height: 30px;
-	align-items: center;
-	gap: 5px;
-	border-radius: 6px;
-	border: 1px solid color-mix(in srgb, var(--red) 58%, transparent);
-	background: color-mix(in srgb, var(--red) 5%, transparent);
-	padding: 0 10px;
-	font-size: 12px;
-	font-weight: 650;
-	line-height: 1;
-	color: var(--red);
-	transition:
-		background 0.12s ease,
-		color 0.12s ease;
-}
-
-.dashboard-app-header__kill-btn:hover {
-	background: color-mix(in srgb, var(--red) 12%, transparent);
-	border-color: color-mix(in srgb, var(--red) 75%, transparent);
-}
-
-.dashboard-app-header__kill-confirm {
-	display: inline-flex;
-	align-items: center;
-	gap: 6px;
-}
-
-.dashboard-app-header__kill-confirm-btn {
-	display: inline-flex;
-	height: 34px;
-	align-items: center;
-	gap: 6px;
-	border-radius: 7px;
-	border: 1px solid color-mix(in srgb, var(--red) 40%, transparent);
-	padding: 0 12px;
-	font-size: 13px;
-	font-weight: 600;
-	line-height: 1;
-	color: var(--red);
-	background: color-mix(in srgb, var(--red) 10%, transparent);
-	transition: background 0.12s ease;
-}
-
-.dashboard-app-header__kill-confirm-btn:hover {
-	background: color-mix(in srgb, var(--red) 16%, transparent);
-}
-
-.dashboard-app-header__kill-confirm-btn:disabled {
-	opacity: 0.6;
-}
-
-.dashboard-app-header__kill-cancel-btn {
-	display: inline-flex;
-	height: 34px;
-	align-items: center;
-	border-radius: 7px;
-	padding: 0 10px;
-	font-size: 13px;
-	font-weight: 600;
-	line-height: 1;
-	color: var(--fg-muted);
-	transition: color 0.12s ease;
-}
-
-.dashboard-app-header__kill-cancel-btn:hover {
-	color: var(--fg);
-}
-
-.dashboard-app-header__kill-error {
-	font-size: 11px;
-	color: var(--red);
-}
-
-.dashboard-app-header__primary-btn {
-	display: inline-flex;
-	height: 34px;
-	align-items: center;
-	gap: 6px;
-	border-radius: 7px;
-	padding: 0 15px;
-	font-size: 13px;
-	font-weight: 600;
-	line-height: 1;
-	background: var(--accent);
-	color: var(--accent-fg);
-	transition: filter 0.12s ease;
-}
-
-.dashboard-app-header__primary-btn:hover {
-	filter: brightness(1.08);
-}
-
-.dashboard-app-header__primary-btn:disabled {
-	opacity: 0.6;
-}
-
-.dashboard-app-header__primary-btn--compact {
-	height: 32px;
-	border-radius: 7px;
-	padding: 0 14px;
-	font-size: 13px;
-}
-
-.dashboard-app-header__accent-btn {
-	display: inline-flex;
-	height: 34px;
-	align-items: center;
-	gap: 6px;
-	border-radius: 7px;
-	border: 1px solid var(--border);
-	padding: 0 15px;
-	font-size: 13px;
-	font-weight: 600;
-	line-height: 1;
-	background: var(--raised);
-	color: var(--fg-muted);
-	transition: background 0.12s ease;
-}
-
-.dashboard-app-header__accent-btn:hover {
-	background: var(--surface);
-	color: var(--fg);
-}
-
-.session-topbar__lead {
-	display: flex;
-	min-width: 0;
-	align-items: center;
-	gap: 13px;
-}
-
-/* ── macOS titlebar cluster (TitlebarNav) ─────────────────────────────────
- * Fixed beside the traffic lights so the toggle/history buttons occupy the
- * exact same spot in both sidebar states. The 56px strip matches the
- * .dashboard-app-header height so the buttons share the topbar's center line
- * (y 28) with the project crumb / bell; the lights match via
- * trafficLightPosition y:20 in main.ts. Lights span x=14–66; the cluster
- * starts a 13px group gap after them (the .dashboard-app-header gap), so
- * the toggle reads as its own group rather than a fourth light. */
-.titlebar-nav {
-	position: fixed;
-	top: 0;
-	left: 79px;
-	z-index: 20;
-	display: flex;
-	height: 56px;
-	align-items: center;
-	gap: 2px;
-}
-
-.titlebar-nav__btn {
-	width: 28px;
-	height: 28px;
-}
-
-/* macOS: the full-width header starts its content past the lights + fixed
- * cluster: cluster right edge 79 + 3×28 + 2×2 = 167px, + the header's 13px
- * group gap = 180px. */
-.dashboard-app-header.is-under-titlebar-nav {
-	padding-left: 180px;
-}
-
-.topbar-project-pills-group {
-	display: inline-flex;
-	min-width: 0;
-	align-items: center;
-	gap: 8px;
-}
-
-.topbar-identity-sep {
-	font-size: 12px;
-	line-height: 1;
-	color: var(--fg-passive);
-}
-
-.session-detail-mode-badge {
-	display: inline-flex;
-	height: 24px;
-	align-items: center;
-	gap: 4px;
-	border: 1px solid var(--border);
-	border-radius: 6px;
-	padding: 0 8px;
-	font-size: 10px;
-	font-weight: 600;
-	line-height: 1;
-	letter-spacing: 0.05em;
-}
-
-.session-detail-mode-badge--neutral {
-	background: var(--surface);
-	color: var(--fg-muted);
-}
-
-.session-topbar__identity {
-	display: flex;
-	min-width: 0;
-	align-items: center;
-	gap: 11px;
-}
-
-.session-topbar__branch {
-	display: inline-flex;
-	min-width: 0;
-	align-items: center;
-	gap: 5px;
-	font-family: var(--font-mono);
-	font-size: 10.5px;
-	line-height: 1;
-	color: var(--fg-passive);
-}
-
-/* ── Session inspector rail (agent-orchestrator SessionInspector) ───────── */
-.session-inspector {
-	container-type: inline-size;
-	display: flex;
-	height: 100%;
-	min-height: 0;
-	flex-direction: column;
-	overflow: hidden;
-	background: var(--bg);
-}
-
-.session-inspector__tabs {
-	display: flex;
-	align-items: center;
-	gap: 3px;
-	height: 47px;
-	flex-shrink: 0;
-	padding: 0 11px;
-	border-bottom: 1px solid var(--border);
-}
-
-.session-inspector__tab {
-	flex: 1;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	gap: 6px;
-	min-width: 0;
-	padding: 7px 6px;
-	border-radius: 7px;
-	font-size: 11.5px;
-	font-weight: 600;
-	color: var(--fg-passive);
-	cursor: pointer;
-	transition:
-		background 0.12s ease,
-		color 0.12s ease;
-}
-
-.session-inspector__tab:hover {
-	background: var(--interactive-hover);
-	color: var(--fg);
-}
-
-.session-inspector__tab.is-active {
-	background: var(--interactive-active);
-	color: var(--fg);
-}
-
-.session-inspector__tab-icon {
-	display: inline-flex;
-	flex-shrink: 0;
-}
-
-.session-inspector__tab-icon svg {
-	width: 14px;
-	height: 14px;
-}
-
-.session-inspector__tab-label {
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.session-inspector__body {
-	flex: 1;
-	min-height: 0;
-	overflow-y: auto;
-	padding: 18px 18px 40px;
-}
-
-/* Browser tab: the panel fills the rail edge-to-edge, so drop the body padding
-   and the panel's own border/radius so it sits flush against the resize handle. */
-.session-inspector__body.session-inspector__body--browser {
-	padding: 0;
-	overflow: hidden;
-}
-
-.session-inspector__body--browser .browser-panel {
-	border: 0;
-	border-radius: 0;
-}
-
-/* Inspector resize handle (shadcn resizable separator, AO visual): a 7px
- * transparent grab strip whose centered 1px line lights accent on hover, drag
- * (rrp sets data-separator="active"), and keyboard focus. */
-.session-inspector__resize-handle {
-	width: 7px;
-	cursor: col-resize;
-	background: transparent;
-	touch-action: none;
-}
-
-.session-inspector__resize-handle::after {
-	content: "";
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	left: 50%;
-	width: 1px;
-	transform: translateX(-50%);
-	background: var(--border-1);
-	transition: background 0.12s ease;
-}
-
-.session-inspector__resize-handle:hover::after,
-.session-inspector__resize-handle:focus-visible::after,
-.session-inspector__resize-handle[data-separator="active"]::after {
-	background: var(--border);
-}
-
-.reviewer-terminal-header {
-	display: flex;
-	height: 36px;
-	flex-shrink: 0;
-	align-items: center;
-	gap: 12px;
-	border-bottom: 1px solid var(--border);
-	background: var(--term-bg);
-	padding: 0 14px;
-	font-family: var(--font-mono);
-}
-
-.reviewer-terminal-header__back {
-	display: inline-flex;
-	height: 24px;
-	flex-shrink: 0;
-	align-items: center;
-	gap: 5px;
-	border-radius: 6px;
-	border: 1px solid var(--border);
-	background: var(--bg-1);
-	padding: 0 8px;
-	font-size: 11px;
-	color: var(--fg-muted);
-	transition:
-		background 0.12s ease,
-		color 0.12s ease;
-}
-
-.reviewer-terminal-header__back:hover {
-	background: var(--interactive-hover);
-	color: var(--fg);
-}
-
-.reviewer-terminal-header__back svg,
-.reviewer-terminal-header__role svg {
-	width: 13px;
-	height: 13px;
-	flex-shrink: 0;
-}
-
-.reviewer-terminal-header__role {
-	display: inline-flex;
-	height: 24px;
-	flex-shrink: 0;
-	align-items: center;
-	gap: 6px;
-	border-radius: 6px;
-	border: 1px solid color-mix(in srgb, var(--green) 34%, transparent);
-	background: color-mix(in srgb, var(--green) 9%, transparent);
-	padding: 0 9px;
-	font-size: 11px;
-	font-weight: 700;
-	color: #8bdc75;
-	text-transform: uppercase;
-}
-
-:root[data-theme="light"] .reviewer-terminal-header__role {
-	color: var(--green);
-}
-
-.reviewer-terminal-header__harness {
-	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	font-size: 13px;
-	font-weight: 650;
-	color: var(--fg);
-}
-
 /* Collapse/expand animation for the inspector panel: rrp v4 drives panel
  * sizes via flex-grow, which is animatable. Suppress it while the separator
  * is actively dragged so resizing tracks the pointer 1:1. */
@@ -899,696 +414,3 @@ body.is-resizing-x [data-slot="sidebar-container"] {
 .session-split:has([data-separator="active"]) #inspector[data-panel] {
 	transition: none;
 }
-
-.inspector-section {
-	margin-bottom: 22px;
-}
-
-.inspector-section--separated {
-	border-top: 1px solid var(--border);
-	padding-top: 18px;
-}
-
-.inspector-section__head {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	margin-bottom: 11px;
-	font-size: 10.5px;
-	font-weight: 600;
-	text-transform: uppercase;
-	letter-spacing: 0.09em;
-	color: var(--fg-passive);
-}
-
-.inspector-section__link {
-	font-size: 11px;
-	font-weight: 500;
-	text-transform: none;
-	letter-spacing: 0;
-	color: var(--accent);
-}
-
-.inspector-section__link:hover {
-	text-decoration: underline;
-}
-
-.inspector-empty {
-	font-size: 12px;
-	color: var(--fg-muted);
-	line-height: 1.5;
-}
-
-.inspector-pr-summary {
-	display: flex;
-	min-width: 0;
-	align-items: center;
-	gap: 8px;
-}
-
-.inspector-pr-summary__title {
-	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	font-size: 12.5px;
-	font-weight: 500;
-	color: var(--fg);
-}
-
-.inspector-pr-summary__state {
-	margin-left: auto;
-	flex-shrink: 0;
-}
-
-.reviewer-list {
-	display: flex;
-	flex-direction: column;
-	gap: 14px;
-}
-
-.reviewer-kicker {
-	display: inline-flex;
-	min-width: 0;
-	align-items: center;
-	gap: 8px;
-	font-family: var(--font-mono);
-	font-size: 13px;
-	font-weight: 700;
-	color: var(--fg);
-}
-
-.reviewer-kicker svg {
-	width: 15px;
-	height: 15px;
-	flex-shrink: 0;
-	color: var(--fg-passive);
-}
-
-.reviewer-kicker span:first-of-type {
-	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.reviewer-kicker span:last-child {
-	font-family: var(--font-sans);
-	font-size: 11.5px;
-	font-weight: 500;
-	color: var(--fg-passive);
-}
-
-.reviewer-error {
-	margin: 0;
-	border-radius: 6px;
-	border: 1px solid color-mix(in srgb, var(--red) 28%, transparent);
-	background: color-mix(in srgb, var(--red) 8%, transparent);
-	padding: 8px 10px;
-	font-size: 11.5px;
-	line-height: 1.45;
-	color: var(--red);
-}
-
-.reviewer-notice {
-	margin: 0;
-	border-radius: 6px;
-	border: 1px solid color-mix(in srgb, var(--green) 28%, transparent);
-	background: color-mix(in srgb, var(--green) 8%, transparent);
-	padding: 8px 10px;
-	font-size: 11.5px;
-	line-height: 1.45;
-	color: var(--green);
-}
-
-.reviewer-card {
-	display: flex;
-	flex-direction: column;
-	gap: 12px;
-	border-radius: 8px;
-	border: 1px solid var(--border);
-	background: var(--bg-1);
-	padding: 12px;
-}
-
-.reviewer-card--success {
-	border-color: color-mix(in srgb, var(--green) 25%, var(--border));
-}
-
-.reviewer-card--danger {
-	border-color: color-mix(in srgb, var(--red) 22%, var(--border));
-}
-
-.reviewer-card__top {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 10px;
-	min-width: 0;
-}
-
-.reviewer-card__name {
-	display: inline-flex;
-	min-width: 0;
-	align-items: center;
-	gap: 8px;
-	font-family: var(--font-mono);
-	font-size: 12.5px;
-	font-weight: 600;
-	color: var(--fg);
-}
-
-.reviewer-card__name svg {
-	width: 15px;
-	height: 15px;
-	flex-shrink: 0;
-	color: var(--fg-passive);
-}
-
-.reviewer-card__name span {
-	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.reviewer-card__identity {
-	display: flex;
-	min-width: 0;
-	flex-direction: column;
-	gap: 4px;
-}
-
-.reviewer-card__label {
-	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	font-size: 12px;
-	font-weight: 650;
-	color: var(--fg-muted);
-}
-
-.reviewer-status {
-	display: inline-flex;
-	height: 20px;
-	max-width: 58%;
-	flex-shrink: 0;
-	align-items: center;
-	gap: 5px;
-	overflow: hidden;
-	border-radius: 6px;
-	padding: 0 8px;
-	font-size: 10.5px;
-	font-weight: 650;
-	line-height: 1;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-}
-
-.reviewer-status svg {
-	width: 13px;
-	height: 13px;
-	flex-shrink: 0;
-}
-
-.reviewer-status--neutral {
-	background: var(--bg-2);
-	color: var(--fg-muted);
-}
-
-.reviewer-status--running {
-	background: color-mix(in srgb, var(--orange) 12%, transparent);
-	color: var(--orange);
-}
-
-.reviewer-status--success {
-	background: color-mix(in srgb, var(--green) 14%, transparent);
-	color: var(--green);
-}
-
-.reviewer-status--danger {
-	background: color-mix(in srgb, var(--red) 14%, transparent);
-	color: var(--red);
-}
-
-.reviewer-card__actions {
-	display: grid;
-	grid-template-columns: repeat(2, minmax(0, 1fr));
-	gap: 10px;
-	padding-top: 4px;
-}
-
-.reviewer-card__actions:has(.reviewer-card__action:only-child) {
-	grid-template-columns: 1fr;
-}
-
-.reviewer-card__action {
-	display: inline-flex;
-	height: 38px;
-	min-width: 0;
-	align-items: center;
-	justify-content: center;
-	gap: 7px;
-	overflow: hidden;
-	border-radius: 7px;
-	border: 1px solid var(--border);
-	background: var(--bg-2);
-	padding: 0 10px;
-	font-size: 12px;
-	font-weight: 650;
-	color: var(--fg-muted);
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	transition:
-		background 0.12s ease,
-		border-color 0.12s ease,
-		color 0.12s ease;
-}
-
-.reviewer-card__action svg {
-	width: 14px;
-	height: 14px;
-	flex-shrink: 0;
-}
-
-.reviewer-card__action:hover:not(:disabled) {
-	background: var(--interactive-hover);
-	color: var(--fg);
-}
-
-.reviewer-card__action:disabled {
-	cursor: not-allowed;
-	opacity: 0.45;
-}
-
-.reviewer-card__action--primary {
-	border-color: color-mix(in srgb, var(--green) 42%, transparent);
-	background: color-mix(in srgb, var(--green) 10%, transparent);
-	color: #8bdc75;
-}
-
-.reviewer-card__action--wide {
-	width: 100%;
-}
-
-.reviewer-summary-list {
-	display: flex;
-	flex-direction: column;
-	gap: 0;
-	overflow: hidden;
-	border-radius: 7px;
-	border: 1px solid var(--border);
-	background: color-mix(in srgb, var(--bg-0) 35%, transparent);
-}
-
-.reviewer-row {
-	display: grid;
-	grid-template-columns: minmax(0, 1fr) auto;
-	align-items: center;
-	gap: 10px;
-	border-radius: 0;
-	border: 0;
-	border-bottom: 1px solid var(--border);
-	background: transparent;
-	padding: 11px 12px;
-	min-height: 52px;
-}
-
-.reviewer-row:last-child {
-	border-bottom: 0;
-}
-
-.reviewer-row--success {
-	border-color: var(--border);
-}
-
-.reviewer-row--danger {
-	border-color: var(--border);
-}
-
-.reviewer-row__main {
-	display: inline-flex;
-	min-width: 0;
-	align-items: center;
-	gap: 9px;
-}
-
-.reviewer-row__dot {
-	width: 7px;
-	height: 7px;
-	flex-shrink: 0;
-	border-radius: 999px;
-	background: var(--fg-passive);
-}
-
-.reviewer-row__dot--running {
-	background: var(--orange);
-}
-
-.reviewer-row__dot--success {
-	background: var(--green);
-}
-
-.reviewer-row__dot--danger {
-	background: var(--red);
-}
-
-.reviewer-row__copy {
-	display: grid;
-	grid-template-columns: auto auto;
-	min-width: 0;
-	align-items: baseline;
-	column-gap: 6px;
-	row-gap: 2px;
-	font-size: 12px;
-	font-weight: 650;
-	color: var(--fg);
-}
-
-.reviewer-row__copy svg {
-	display: none;
-	width: 14px;
-	height: 14px;
-	flex-shrink: 0;
-	color: var(--fg-passive);
-}
-
-.reviewer-row__copy a {
-	grid-column: 1 / -1;
-	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	color: inherit;
-	text-decoration: none;
-}
-
-.reviewer-row__copy a:hover {
-	text-decoration: underline;
-}
-
-.reviewer-row__number {
-	grid-column: 1;
-	font-family: var(--font-mono);
-	font-size: 11px;
-	color: var(--fg-passive);
-}
-
-.reviewer-row__verdict {
-	white-space: nowrap;
-	font-size: 11px;
-	font-weight: 650;
-	color: var(--fg-muted);
-}
-
-.reviewer-row__verdict--running {
-	color: var(--orange);
-}
-
-.reviewer-row__verdict--success {
-	color: var(--green);
-}
-
-.reviewer-row__verdict--danger {
-	color: var(--red);
-}
-
-@media (max-width: 680px) {
-	.reviewer-row {
-		grid-template-columns: minmax(0, 1fr) auto;
-	}
-}
-
-:root[data-theme="light"] .reviewer-card__action--primary {
-	color: var(--green);
-}
-
-.inspector-empty--center {
-	padding: 24px 8px;
-	text-align: center;
-}
-
-.inspector-kv {
-	display: flex;
-	flex-direction: column;
-	gap: 1px;
-}
-
-.inspector-kv__row {
-	display: flex;
-	align-items: center;
-	gap: 10px;
-	padding: 6px 2px;
-	font-size: 12.5px;
-}
-
-.inspector-kv__k {
-	width: 74px;
-	flex-shrink: 0;
-	color: var(--fg-muted);
-}
-
-.inspector-kv__v {
-	min-width: 0;
-	color: var(--fg);
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.inspector-kv__v--mono {
-	font-family: var(--font-mono);
-	font-size: 11.5px;
-}
-
-@container (max-width: 300px) {
-	.session-inspector__body {
-		padding-inline: 14px;
-	}
-
-	.inspector-pr-summary {
-		align-items: flex-start;
-		flex-wrap: wrap;
-	}
-
-	.inspector-pr-summary__state {
-		margin-left: 22px;
-	}
-
-	.inspector-kv__row {
-		align-items: flex-start;
-		flex-direction: column;
-		gap: 2px;
-	}
-
-	.inspector-kv__k {
-		width: auto;
-	}
-
-	.inspector-kv__v {
-		width: 100%;
-	}
-
-	.reviewer-card {
-		gap: 12px;
-		padding: 12px;
-		overflow: hidden;
-	}
-
-	.reviewer-card__top {
-		align-items: flex-start;
-		flex-direction: column;
-	}
-
-	.reviewer-status {
-		max-width: 100%;
-	}
-
-	.reviewer-card__actions {
-		grid-template-columns: 1fr;
-	}
-}
-
-.inspector-timeline {
-	position: relative;
-	padding-left: 20px;
-}
-
-.inspector-timeline::before {
-	content: "";
-	position: absolute;
-	left: 5px;
-	top: 4px;
-	bottom: 6px;
-	width: 1px;
-	background: var(--border);
-}
-
-.inspector-timeline__ev {
-	position: relative;
-	padding: 0 0 15px;
-}
-
-.inspector-timeline__ev:last-child {
-	padding-bottom: 0;
-}
-
-.inspector-timeline__node {
-	position: absolute;
-	left: -18px;
-	top: 3px;
-	width: 9px;
-	height: 9px;
-	border-radius: 50%;
-	background: var(--fg-passive);
-	box-shadow: 0 0 0 3px var(--bg);
-}
-
-.inspector-timeline__ev--now .inspector-timeline__node {
-	background: var(--orange);
-	box-shadow:
-		0 0 0 3px var(--bg),
-		0 0 8px var(--orange);
-}
-
-.inspector-timeline__ev--good .inspector-timeline__node {
-	background: var(--green);
-}
-
-.inspector-timeline__ev--warn .inspector-timeline__node {
-	background: var(--amber);
-}
-
-.inspector-timeline__ev--bad .inspector-timeline__node {
-	background: var(--red);
-}
-
-.inspector-timeline__et {
-	font-size: 12px;
-	color: var(--fg);
-	line-height: 1.45;
-}
-
-.inspector-timeline__et b {
-	font-weight: 600;
-}
-
-.inspector-timeline__badge {
-	display: inline-flex;
-	vertical-align: middle;
-}
-
-.inspector-timeline__detail {
-	color: var(--fg-muted);
-}
-
-.inspector-timeline__ets {
-	font-size: 10.5px;
-	color: var(--fg-passive);
-	font-family: var(--font-mono);
-	margin-top: 2px;
-}
-
-.browser-panel {
-	display: flex;
-	height: 100%;
-	min-height: 320px;
-	flex-direction: column;
-	overflow: hidden;
-	border: 1px solid var(--border);
-	border-radius: 8px;
-	background: var(--bg);
-}
-
-/* Maximized browser overlay: a fixed layer over the whole app window (portaled
-   to <body>, so it covers the sidebar + topbar too, not just the session area).
-   The panel goes edge-to-edge, so drop its border/radius. */
-.browser-popout-overlay {
-	position: fixed;
-	inset: 0;
-	z-index: 40;
-	background: var(--bg);
-}
-
-.browser-popout-overlay .browser-panel {
-	border: 0;
-	border-radius: 0;
-}
-
-.browser-panel__toolbar {
-	display: flex;
-	align-items: center;
-	gap: 5px;
-	flex-shrink: 0;
-	min-width: 0;
-	padding: 7px;
-	border-bottom: 1px solid var(--border);
-	background: var(--surface);
-}
-
-.browser-panel__url {
-	position: relative;
-	min-width: 0;
-	flex: 1;
-}
-
-.browser-panel__url-icon {
-	position: absolute;
-	left: 9px;
-	top: 50%;
-	width: 14px;
-	height: 14px;
-	transform: translateY(-50%);
-	color: var(--fg-passive);
-	pointer-events: none;
-}
-
-.browser-panel__url-input {
-	height: 29px;
-	padding-left: 29px;
-	font-family: var(--font-mono);
-	font-size: 12px;
-}
-
-.browser-panel__content {
-	position: relative;
-	flex: 1;
-	min-height: 0;
-	overflow: hidden;
-	background: var(--bg);
-}
-
-.browser-panel__slot {
-	position: absolute;
-	inset: 0;
-	min-width: 1px;
-	min-height: 1px;
-}
-
-.browser-panel__overlay {
-	position: absolute;
-	inset: 0;
-	display: grid;
-	place-items: center;
-	padding: 20px;
-	text-align: center;
-	font-family: var(--font-mono);
-	font-size: 12px;
-	color: var(--fg-passive);
-	pointer-events: none;
-}
-
-.browser-panel__error {
-	position: absolute;
-	left: 10px;
-	right: 10px;
-	bottom: 10px;
-	margin: 0;
-	padding: 8px 10px;
-	border: 1px solid color-mix(in srgb, var(--red) 35%, transparent);
-	border-radius: 7px;
-	background: color-mix(in srgb, var(--red) 8%, var(--bg));
-	color: var(--red);
-	font-size: 12px;
-}
diff --git a/frontend/src/styles/tokens.css b/frontend/src/styles/tokens.css
new file mode 100644
index 0000000000..e152771273
--- /dev/null
+++ b/frontend/src/styles/tokens.css
@@ -0,0 +1,364 @@
+/*
+ * Design tokens — Agent Orchestrator frontend
+ * ============================================
+ * Source of truth for the app (Electron renderer) visual system.
+ * Extracted from the existing dark-first Cursor-like UI in
+ * src/renderer/styles.css — not a restyle.
+ *
+ * Theme switching:
+ *   - Default (:root)              → dark
+ *   - :root[data-theme="light"]    → light (renderer Zustand toggle)
+ *   - :root.dark / .dark           → alias for landing/docs (Fumadocs)
+ *
+ * Imported by src/renderer/styles.css. See DESIGN_TOKENS.md.
+ */
+
+:root,
+:root.dark,
+.dark {
+	/* ── Color scheme hint for native form controls / scrollbars ── */
+	color-scheme: dark;
+
+	/* ═══════════════════════════════════════════════════════════════
+	   COLOR — semantic (swap these per theme; do not invent new roles
+	   for one-off hex — map one-offs to the nearest existing role)
+	   ═══════════════════════════════════════════════════════════════ */
+
+	/* Surfaces (near-black ramp) */
+	--color-bg-primary: #0a0b0d;
+	--color-bg-secondary: #15171b;
+	--color-bg-tertiary: #1b1d22;
+	--color-bg-elevated: #212329;
+	--color-bg-sidebar: #08090b;
+	--color-bg-terminal: #15171b;
+
+	/* Text */
+	--color-text-primary: #f4f5f7;
+	--color-text-muted: #9ba1aa;
+	--color-text-passive: #646a73;
+	--color-text-terminal: #d7d7d2;
+	--color-text-terminal-dim: #7c7c7c;
+
+	/* Borders (hairline white-alpha on dark) */
+	--color-border: rgb(255 255 255 / 0.06);
+	--color-border-strong: rgb(255 255 255 / 0.1);
+
+	/* Accent — refined blue (primary actions, focus, active session) */
+	--color-accent: #4d8dff;
+	--color-accent-foreground: #ffffff;
+	--color-accent-weak: rgb(77 141 255 / 0.16);
+	--color-accent-dim: #24406e;
+
+	/* Status — matches daemon derived statuses */
+	--color-working: #f59f4c; /* agent working */
+	--color-warning: #e8c14a; /* needs-you / amber */
+	--color-success: #74b98a; /* mergeable */
+	--color-success-bright: #8bdc75; /* reviewer role highlight (was hardcoded) */
+	--color-danger: #ef6b6b; /* fail */
+	--color-purple: #a78bfa; /* accessory / magenta lane */
+
+	/* Interactive overlays */
+	--color-interactive-hover: rgb(255 255 255 / 0.04);
+	--color-interactive-active: rgb(255 255 255 / 0.07);
+	--color-overlay-subtle: rgb(255 255 255 / 0.018);
+	--color-overlay-faint: rgb(255 255 255 / 0.02);
+	--color-scrollbar: rgb(255 255 255 / 0.12);
+	--color-scrollbar-hover: rgb(255 255 255 / 0.2);
+	--color-scrim: rgb(0 0 0 / 0.55);
+
+	/* ═══════════════════════════════════════════════════════════════
+	   TYPOGRAPHY
+	   ═══════════════════════════════════════════════════════════════ */
+
+	--font-family-base:
+		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Helvetica Neue",
+		sans-serif;
+	--font-family-mono:
+		"JetBrainsMono Nerd Font Mono", "JetBrainsMono Nerd Font", "FiraCode Nerd Font Mono", "FiraCode Nerd Font",
+		"MesloLGS NF", "CaskaydiaCove Nerd Font Mono", "CaskaydiaCove Nerd Font", "Hack Nerd Font Mono", "Hack Nerd Font",
+		"Symbols Nerd Font Mono", "Symbols Nerd Font", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+		"Liberation Mono", "Courier New", monospace;
+
+	/* Scale — dense UI chrome uses half-steps between base sizes */
+	--font-size-2xs: 10.5px; /* uppercase meta, board footers */
+	--font-size-xs: 10px; /* micro labels, tight pills */
+	--font-size-caption: 11px; /* badges, kanban labels */
+	--font-size-sm-md: 11.5px; /* inspector tabs, status pills */
+	--font-size-sm: 12px; /* secondary chrome / Tailwind text-xs */
+	--font-size-md-sm: 12.5px; /* kv rows, PR summaries */
+	--font-size-base: 13px; /* dense controls (board buttons) */
+	--font-size-brand: 14.5px; /* titlebar project name */
+	--font-size-md: 14px; /* body / Tailwind text-sm */
+	--font-size-subtitle: 15px; /* dialog titles, stat values */
+	--font-size-heading-sm: 17px; /* empty-state headings */
+	--font-size-heading: 21px; /* dashboard subhead */
+	--font-size-heading-lg: 22px; /* preview mock headings */
+
+	--font-weight-medium: 500;
+	--font-weight-semibold: 600;
+
+	--line-height-normal: 1.5;
+	--line-height-snug: 1.42;
+	--line-height-row: 1.25rem; /* 20px — helper rows at text-xs / text-control */
+	--line-height-body-md: 1.55;
+	--line-height-relaxed: 1.6;
+	--line-height-loose: 1.7;
+
+	/* Letter-spacing — uppercase meta, tight headings */
+	--tracking-tight-xl: -0.025em;
+	--tracking-tight-lg: -0.015em;
+	--tracking-tight: -0.01em;
+	--tracking-wide-xs: 0.04em;
+	--tracking-wide-sm: 0.05em;
+	--tracking-wide: 0.06em;
+	--tracking-wide-md: 0.08em;
+	--tracking-wide-lg: 0.09em;
+	--tracking-wide-xl: 0.12em;
+
+	/* Motion */
+	--duration-fast: 120ms;
+	--duration-normal: 150ms;
+
+	/* ═══════════════════════════════════════════════════════════════
+	   SPACING — 4px base (audit: 4/6/8/10/12/14/16/18 most common)
+	   Prefer even steps; map odd pixels (5/7/9/11/13/15) to nearest.
+	   ═══════════════════════════════════════════════════════════════ */
+
+	--space-0_5: 2px;
+	--space-0_75: 3px;
+	--space-1: 4px;
+	--space-1_25: 5px;
+	--space-1_5: 6px;
+	--space-1_75: 7px;
+	--space-2: 8px;
+	--space-2_25: 9px;
+	--space-2_5: 10px;
+	--space-2_75: 11px;
+	--space-3: 12px;
+	--space-3_25: 13px;
+	--space-3_5: 14px;
+	--space-3_75: 15px;
+	--space-4: 16px;
+	--space-4_5: 18px;
+	--space-5: 20px;
+	--space-5_5: 22px;
+	--space-6: 24px;
+	--space-8: 32px;
+	--space-10: 40px;
+
+	/* ═══════════════════════════════════════════════════════════════
+	   Z-INDEX — stacking layers
+	   ═══════════════════════════════════════════════════════════════ */
+
+	--z-chrome: 10;
+	--z-titlebar: 20;
+	--z-overlay: 50;
+
+	/* ═══════════════════════════════════════════════════════════════
+	   RADIUS
+	   ═══════════════════════════════════════════════════════════════ */
+
+	--radius-xs: 3px; /* inline rename inputs, hairline controls */
+	--radius-sm: 4px; /* chips, tiny controls — absorb old 5px */
+	--radius-md: 6px; /* default controls — absorb old 7px */
+	--radius-lg: 8px; /* cards, larger buttons */
+	--radius-panel: 13px; /* kanban columns, empty-state cards */
+	--radius-full: 999px; /* pills, avatars, status dots */
+
+	/* ═══════════════════════════════════════════════════════════════
+	   BREAKPOINTS — documented here; @media cannot use var()
+	   ═══════════════════════════════════════════════════════════════ */
+
+	--breakpoint-layout-narrow: 680px; /* reviewer grid — @custom-media in styles.css */
+	--breakpoint-inspector-compact: 300px; /* inspector @container */
+
+	/* ═══════════════════════════════════════════════════════════════
+	   LAYOUT — fixed chrome dimensions (not spacing scale)
+	   ═══════════════════════════════════════════════════════════════ */
+
+	--ring-width-focus: 3px; /* select trigger focus ring */
+
+	--size-hairline: 1px;
+	--size-icon-2xs: 12px;
+	--size-icon-xs: 9px;
+	--size-icon-sm: 13px;
+	--size-icon-md: 14px;
+	--size-icon-base: 16px;
+	--size-icon-lg: 15px;
+	--size-icon-xl: 18px;
+	--size-dot-sm: 7px;
+	--size-control-form: 32px;
+	--size-control-xs: 20px;
+	--size-control-sm: 24px;
+	--size-control-md: 28px;
+	--size-control-lg: 34px;
+	--size-control-xl: 38px;
+	--size-control-board-sm: 30px;
+	--size-control-board: 36px;
+	--size-table-head: var(--space-10);
+	--size-toolbar: 56px;
+	--size-inspector-tabs: 47px;
+	--size-row-md: 52px;
+	--size-browser-url: 29px;
+	--size-browser-min: 320px;
+	--size-sidebar-icon: 48px;
+	--size-sidebar-default: 240px;
+	--size-sidebar-mobile: 288px;
+	--size-titlebar-cluster-left: 79px;
+	--size-titlebar-content-offset: 180px;
+	--size-resize-handle: 7px;
+	--size-resize-handle-offset: 3px;
+	--size-kanban-glow: 130px;
+	--size-kv-label: 74px;
+	--size-notification-width: 380px;
+	--size-notification-max-height: 420px;
+	--size-notification-icon: 26px;
+	--size-font-size-label: 44px;
+	--size-inspector-status-chip-max: 58%;
+	--size-board-empty: 460px;
+	--size-preview-max: 760px;
+	--size-preview-content: 400px;
+	--size-pr-table-actions: 220px;
+	--size-pr-col-number: 64px;
+	--size-pr-col-state: 96px;
+	--size-content-max: 320px;
+	--size-dialog-md: 420px;
+	--size-dialog-lg: 440px;
+	--size-dialog-orchestrator: 460px;
+	--size-dialog-xl: 560px;
+	--size-branch-chip: 13rem;
+	--size-inspector-min: 280px;
+	--size-textarea-min: 112px;
+	--size-sidebar-project-actions: 84px;
+
+	--size-empty-offset-y: 5vh; /* board empty-state vertical nudge */
+
+	/* Browser static preview (light mock page inside dark app) */
+	--color-preview-bg: #f7f8fb;
+	--color-preview-fg: #17202a;
+	--color-preview-border: #dfe4ea;
+	--color-preview-muted: #687384;
+	--color-preview-link: #2f5b9d;
+	--color-preview-card-border: #d7dee8;
+	--color-preview-heading: #111827;
+	--color-preview-body: #526070;
+	--color-preview-success-bg: #e7f8ed;
+	--color-preview-tile-border: #e1e7ef;
+	--color-preview-tile-bg: #fbfcfe;
+	--color-preview-terminal-border: #dce4ef;
+	--color-preview-terminal-bg: #0f172a;
+	--color-preview-terminal-fg: #cbd5e1;
+
+	/* Mock project accent swatches (sidebar dots) */
+	--color-project-accent-mint: #6ee7b7;
+	--color-project-accent-sky: #93c5fd;
+
+	/* xterm extended palette (ANSI bright + selection) */
+	--color-term-cyan: #6fb3c9;
+	--color-term-selection-dark: rgb(77 141 255 / 0.3);
+	--color-term-selection-light: rgb(37 99 235 / 0.25);
+	--color-term-selection-inactive: rgb(128 128 128 / 0.2);
+	--color-term-selection-inactive-light: rgb(128 128 128 / 0.15);
+	--color-term-bright-red: #ff8a8a;
+	--color-term-bright-green: #8fd6a6;
+	--color-term-bright-yellow: #f0d06b;
+	--color-term-bright-blue: #7eaaff;
+	--color-term-bright-magenta: #c4b0fc;
+	--color-term-bright-cyan: #8fcfe0;
+	--color-term-red-light: #b42318;
+	--color-term-magenta-light: #8e24aa;
+	--color-term-cyan-light: #0b7285;
+	--color-term-white-light: #4b5563;
+	--color-term-bright-black-light: #374151;
+	--color-term-bright-red-light: #912018;
+	--color-term-bright-green-light: #176639;
+	--color-term-bright-yellow-light: #6f4a00;
+	--color-term-bright-blue-light: #1d4ed8;
+	--color-term-bright-magenta-light: #7b1fa2;
+	--color-term-bright-cyan-light: #155e75;
+
+	/* ═══════════════════════════════════════════════════════════════
+	   SHADOWS
+	   ═══════════════════════════════════════════════════════════════ */
+
+	--elevation-sm: 0 1px 0 rgb(0 0 0 / 0.35);
+	--elevation-md: 0 1px 0 rgb(0 0 0 / 0.4), 0 12px 32px rgb(0 0 0 / 0.5);
+	--elevation-lg: 0 8px 40px rgb(0 0 0 / 0.55);
+	--elevation-xl: 0 1px 0 rgb(0 0 0 / 0.4), 0 20px 50px rgb(0 0 0 / 0.55);
+
+	/* @theme bridge — avoids Tailwind theme key / :root name collisions */
+	--bridge-border: var(--color-border);
+	--bridge-border-strong: var(--color-border-strong);
+	--bridge-accent: var(--color-accent);
+	--bridge-accent-fg: var(--color-accent-foreground);
+	--bridge-accent-weak: var(--color-accent-weak);
+	--bridge-accent-dim: var(--color-accent-dim);
+	--bridge-working: var(--color-working);
+	--bridge-success: var(--color-success);
+	--bridge-warning: var(--color-warning);
+	--bridge-danger: var(--color-danger);
+	--bridge-interactive-hover: var(--color-interactive-hover);
+	--bridge-interactive-active: var(--color-interactive-active);
+	--bridge-scrim: var(--color-scrim);
+	--bridge-preview-muted: var(--color-preview-muted);
+	--bridge-preview-link: var(--color-preview-link);
+	--bridge-preview-heading: var(--color-preview-heading);
+	--bridge-preview-body: var(--color-preview-body);
+	--bridge-preview-card: var(--color-preview-card-border);
+	--bridge-preview-success: var(--color-preview-success-bg);
+	--bridge-preview-tile: var(--color-preview-tile-bg);
+	--bridge-preview-tile-border: var(--color-preview-tile-border);
+	--bridge-preview-terminal: var(--color-preview-terminal-bg);
+	--bridge-preview-terminal-border: var(--color-preview-terminal-border);
+	--bridge-preview-terminal-fg: var(--color-preview-terminal-fg);
+
+	--font-sans: var(--font-family-base);
+	--font-mono: var(--font-family-mono);
+}
+
+/* Light theme — set via data-theme (apply-initial-theme + Zustand toggle). */
+
+:root[data-theme="light"] {
+	color-scheme: light;
+
+	--color-bg-primary: #fcfcfc;
+	--color-bg-secondary: #ffffff;
+	--color-bg-tertiary: #ededee;
+	--color-bg-elevated: #e4e4e6;
+	--color-bg-sidebar: #fcfcfc;
+	--color-bg-terminal: #fafafa;
+
+	--color-text-primary: #1a1a1a;
+	--color-text-muted: #666666;
+	--color-text-passive: #9a9a9a;
+	--color-text-terminal: #24292f;
+	--color-text-terminal-dim: #6b7280;
+
+	--color-border: #e3e3e5;
+	--color-border-strong: #d4d4d6;
+
+	--color-accent: #2563eb;
+	--color-accent-foreground: #ffffff;
+	--color-accent-weak: rgb(37 99 235 / 0.12);
+	--color-accent-dim: #bcd2f7;
+
+	--color-working: #c2410c;
+	--color-warning: #9a6b00;
+	--color-success: #1a7f37;
+	--color-success-bright: #176639;
+	--color-danger: #c0392b;
+	--color-purple: #7c3aed;
+
+	--color-interactive-hover: rgb(0 0 0 / 0.04);
+	--color-interactive-active: rgb(0 0 0 / 0.07);
+	--color-overlay-subtle: rgb(0 0 0 / 0.02);
+	--color-overlay-faint: rgb(0 0 0 / 0.03);
+	--color-scrollbar: rgb(0 0 0 / 0.12);
+	--color-scrollbar-hover: rgb(0 0 0 / 0.2);
+	--color-scrim: rgb(0 0 0 / 0.45);
+
+	--elevation-sm: 0 1px 0 rgb(0 0 0 / 0.06);
+	--elevation-md: 0 1px 0 rgb(0 0 0 / 0.03), 0 12px 30px rgb(20 30 50 / 0.1);
+	--elevation-lg: 0 16px 48px rgb(20 30 50 / 0.16);
+	--elevation-xl: 0 1px 0 rgb(0 0 0 / 0.03), 0 20px 50px rgb(20 30 50 / 0.14);
+}