diff --git a/web/src/lib/components/AppHeader.svelte b/web/src/lib/components/AppHeader.svelte
index d94e64c..183c301 100644
--- a/web/src/lib/components/AppHeader.svelte
+++ b/web/src/lib/components/AppHeader.svelte
@@ -216,7 +216,7 @@
 				title="Issues — standing problems in the visible inventory"
 				class="relative rounded p-1.5 hover:bg-side-hover {open
 					? 'bg-side-hover text-white'
-					: 'text-slate-300'}"
+					: 'text-side-dim'}"
 			>
 				<TriangleAlert size={16} />
 				{#if issues.length > 0}
@@ -273,7 +273,7 @@
 		class="relative flex items-center gap-1.5 rounded border border-side-active px-2.5 py-1 text-xs font-medium hover:bg-side-hover {page
 			.url.pathname === '/changes'
 			? 'bg-side-hover text-white'
-			: 'text-slate-200'}"
+			: 'text-side-ink'}"
 	>
 		<ClipboardList size={13} /> Review changes
 		{#if inFlight > 0}
@@ -288,7 +288,7 @@
 		{#snippet trigger({ open, toggle })}
 			<button
 				onclick={toggle}
-				class="flex items-center gap-1.5 rounded px-2 py-1 text-xs text-slate-200 hover:bg-side-hover"
+				class="flex items-center gap-1.5 rounded px-2 py-1 text-xs text-side-ink hover:bg-side-hover"
 			>
 				<UserIcon size={14} />
 				{session.user?.username}
diff --git a/web/src/lib/components/Console.svelte b/web/src/lib/components/Console.svelte
index f8850d3..0f13f94 100644
--- a/web/src/lib/components/Console.svelte
+++ b/web/src/lib/components/Console.svelte
@@ -31,7 +31,7 @@
 		detail = '';
 		const rfb = new RFB(screen, url, {});
 		rfb.scaleViewport = true;
-		rfb.background = '#0f172a';
+		rfb.background = '#151515';
 
 		rfb.addEventListener('connect', () => (status = 'connected'));
 		rfb.addEventListener('disconnect', (e: Event) => {
@@ -61,16 +61,16 @@
 			<span class="text-ink-muted capitalize">{status}{detail ? ` — ${detail}` : ''}</span>
 		</div>
 		<!-- The bezel behind the framebuffer stays dark in both themes (raw slate). -->
-		<div class="relative min-h-0 flex-1 overflow-hidden rounded bg-slate-900">
+		<div class="relative min-h-0 flex-1 overflow-hidden rounded bg-[#151515]">
 			<div bind:this={screen} class="h-full w-full"></div>
 			{#if status === 'disconnected'}
 				<div
-					class="absolute inset-0 flex flex-col items-center justify-center gap-1 text-sm text-slate-300"
+					class="absolute inset-0 flex flex-col items-center justify-center gap-1 text-sm text-side-dim"
 				>
 					<span>{detail || 'Disconnected'}</span>
 					<button
 						onclick={() => reconnectKey++}
-						class="rounded border border-slate-600 px-2 py-0.5 text-xs text-slate-300 hover:bg-slate-800"
+						class="rounded border border-side-active px-2 py-0.5 text-xs text-side-dim hover:bg-[#333638]"
 						>Reconnect</button
 					>
 				</div>
diff --git a/web/src/lib/components/ConsolePreview.svelte b/web/src/lib/components/ConsolePreview.svelte
index c5aae94..2cf42ca 100644
--- a/web/src/lib/components/ConsolePreview.svelte
+++ b/web/src/lib/components/ConsolePreview.svelte
@@ -48,7 +48,7 @@
 		onclick={onopen}
 		title="Open the live console"
 		style:aspect-ratio={aspect}
-		class="group relative block w-full max-w-xl overflow-hidden rounded border border-line bg-slate-900 xl:w-auto xl:shrink-0"
+		class="group relative block w-full max-w-xl overflow-hidden rounded border border-line bg-[#151515] xl:w-auto xl:shrink-0"
 		class:hidden={failed}
 	>
 		<img
diff --git a/web/src/lib/components/GlobalSearch.svelte b/web/src/lib/components/GlobalSearch.svelte
index ef7d741..6252f58 100644
--- a/web/src/lib/components/GlobalSearch.svelte
+++ b/web/src/lib/components/GlobalSearch.svelte
@@ -245,7 +245,7 @@
 
 <div class="relative mx-auto w-80">
 	<div class="flex items-center gap-2 rounded bg-side-hover px-2.5 py-1">
-		<Search size={13} class="shrink-0 text-slate-400" />
+		<Search size={13} class="shrink-0 text-side-dim" />
 		<input
 			bind:this={input}
 			bind:value={query}
@@ -253,9 +253,9 @@
 			{onkeydown}
 			placeholder="Search, or type a verb: migrate web…"
 			aria-label="Search inventory"
-			class="w-full bg-transparent text-xs text-white placeholder-slate-400 focus:outline-none"
+			class="w-full bg-transparent text-xs text-white placeholder-side-dim focus:outline-none"
 		/>
-		<kbd class="shrink-0 rounded border border-side-active px-1 text-[10px] text-slate-300"
+		<kbd class="shrink-0 rounded border border-side-active px-1 text-[10px] text-side-dim"
 			>Ctrl K</kbd
 		>
 	</div>
diff --git a/web/src/lib/components/ToastHost.svelte b/web/src/lib/components/ToastHost.svelte
index a0e3582..449c7c3 100644
--- a/web/src/lib/components/ToastHost.svelte
+++ b/web/src/lib/components/ToastHost.svelte
@@ -14,7 +14,7 @@
 				{#if t.kind === 'success'}<CircleCheck size={15} class="shrink-0 text-emerald-400" />
 				{:else if t.kind === 'error'}<CircleAlert size={15} class="shrink-0 text-red-400" />
 				{:else if t.kind === 'warning'}<TriangleAlert size={15} class="shrink-0 text-amber-400" />
-				{:else}<Info size={15} class="shrink-0 text-slate-400" />{/if}
+				{:else}<Info size={15} class="shrink-0 text-side-dim" />{/if}
 				{t.msg}
 				{#if t.action}
 					{@const action = t.action}
@@ -23,7 +23,7 @@
 							action.run();
 							ui.dismissToast(t.id);
 						}}
-						class="shrink-0 rounded border border-slate-500 px-2 py-0.5 text-xs font-medium hover:bg-slate-700"
+						class="shrink-0 rounded border border-side-active px-2 py-0.5 text-xs font-medium hover:bg-side-hover"
 					>
 						{action.label}
 					</button>
@@ -31,7 +31,7 @@
 				<button
 					onclick={() => ui.dismissToast(t.id)}
 					aria-label="Dismiss"
-					class="shrink-0 text-slate-400 hover:text-white"><X size={14} /></button
+					class="shrink-0 text-side-dim hover:text-white"><X size={14} /></button
 				>
 			</div>
 		{/each}