diff --git a/web/build/index.html b/web/build/index.html
index 61aa54e..e0a6034 100644
--- a/web/build/index.html
+++ b/web/build/index.html
@@ -4,32 +4,32 @@
 		<meta charset="utf-8" />
 		<link rel="icon" href="/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<link href="/_app/immutable/entry/start.D2DElZOc.js" rel="modulepreload">
-		<link href="/_app/immutable/chunks/CGD5FpIt.js" rel="modulepreload">
+		<link href="/_app/immutable/entry/start.0EfKWloI.js" rel="modulepreload">
+		<link href="/_app/immutable/chunks/B6AduMOh.js" rel="modulepreload">
 		<link href="/_app/immutable/chunks/Cca5XcAr.js" rel="modulepreload">
-		<link href="/_app/immutable/entry/app.o3EtqHxp.js" rel="modulepreload">
+		<link href="/_app/immutable/entry/app.HI1UzXj1.js" rel="modulepreload">
 		<link href="/_app/immutable/chunks/kNaey6uv.js" rel="modulepreload">
 		<link href="/_app/immutable/chunks/xihTtKlq.js" rel="modulepreload">
-		<link href="/_app/immutable/nodes/0.SV3TCvT0.js" rel="modulepreload">
+		<link href="/_app/immutable/nodes/0.DamGPcfi.js" rel="modulepreload">
 		<link href="/_app/immutable/chunks/BscTVQ9J.js" rel="modulepreload">
 		<link href="/_app/immutable/chunks/D_M18t6X.js" rel="modulepreload">
 		<link href="/_app/immutable/chunks/fe7zj1-L.js" rel="modulepreload">
 		
-		<link href="/_app/immutable/assets/0.Cv8yMDRc.css" rel="stylesheet">
+		<link href="/_app/immutable/assets/0.BNL21c07.css" rel="stylesheet">
 	</head>
 	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">
 			<script>
 				{
-					__sveltekit_1hf2gre = {
+					__sveltekit_xkujp8 = {
 						base: ""
 					};
 
 					const element = document.currentScript.parentElement;
 
 					Promise.all([
-						import("/_app/immutable/entry/start.D2DElZOc.js"),
-						import("/_app/immutable/entry/app.o3EtqHxp.js")
+						import("/_app/immutable/entry/start.0EfKWloI.js"),
+						import("/_app/immutable/entry/app.HI1UzXj1.js")
 					]).then(([kit, app]) => {
 						kit.start(app, element);
 					});
diff --git a/web/package-lock.json b/web/package-lock.json
index 54db776..ffe7cdf 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -7,6 +7,10 @@
 		"": {
 			"name": "web",
 			"version": "0.0.1",
+			"dependencies": {
+				"@fontsource-variable/geist": "^5.3.0",
+				"@fontsource-variable/geist-mono": "^5.3.0"
+			},
 			"devDependencies": {
 				"@internationalized/date": "^3.12.2",
 				"@playwright/test": "^1.61.0",
@@ -335,6 +339,24 @@
 			"integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
 			"dev": true
 		},
+		"node_modules/@fontsource-variable/geist": {
+			"version": "5.3.0",
+			"resolved": "https://registry.npmjs.org/@fontsource-variable/geist/-/geist-5.3.0.tgz",
+			"integrity": "sha512-j0m+vLQuG5XAYoHtGCVu0spvlGreR3EzpECUVzkFmI1mTVnAO38l/NEPDCFgZ177JxzYJCLSmTQibIiYPilGrA==",
+			"license": "OFL-1.1",
+			"funding": {
+				"url": "https://github.com/sponsors/ayuhito"
+			}
+		},
+		"node_modules/@fontsource-variable/geist-mono": {
+			"version": "5.3.0",
+			"resolved": "https://registry.npmjs.org/@fontsource-variable/geist-mono/-/geist-mono-5.3.0.tgz",
+			"integrity": "sha512-vBbuwDEo9AkrqADMXOrlAR3DFcJi4/JxeuU43FoiQERnNwsfXNnvxvReZG02cQKmyk4DZkZdBZX3oTDvy2zBAw==",
+			"license": "OFL-1.1",
+			"funding": {
+				"url": "https://github.com/sponsors/ayuhito"
+			}
+		},
 		"node_modules/@internationalized/date": {
 			"version": "3.12.2",
 			"resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.12.2.tgz",
diff --git a/web/package.json b/web/package.json
index cde650e..921cf11 100644
--- a/web/package.json
+++ b/web/package.json
@@ -40,5 +40,9 @@
 		"typescript": "^6.0.2",
 		"vite": "^8.0.7",
 		"vitest": "^4.1.8"
+	},
+	"dependencies": {
+		"@fontsource-variable/geist": "^5.3.0",
+		"@fontsource-variable/geist-mono": "^5.3.0"
 	}
 }
diff --git a/web/src/app.css b/web/src/app.css
index 2088180..fae2d67 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -1,30 +1,93 @@
 @import 'tailwindcss';
+@import '@fontsource-variable/geist';
+@import '@fontsource-variable/geist-mono';
+
+/* ── Semantic tokens ─────────────────────────────────────────────
+   Values live on plain custom properties so the .dark class (toggled
+   by mode-watcher) swaps them at runtime. `@theme inline` maps the
+   Tailwind color utilities to those vars; never put literal colors
+   in this block — utilities would inline them and ignore .dark. */
+:root {
+	--background: oklch(0.985 0 0);
+	--foreground: oklch(0.205 0.006 265);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.205 0.006 265);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.205 0.006 265);
+	--primary: oklch(0.205 0.006 265);
+	--primary-foreground: oklch(0.985 0 0);
+	--secondary: oklch(0.96 0.005 265);
+	--secondary-foreground: oklch(0.25 0.015 265);
+	--muted: oklch(0.96 0.005 265);
+	--muted-foreground: oklch(0.545 0.015 265);
+	--accent: oklch(0.96 0.005 265);
+	--accent-foreground: oklch(0.25 0.015 265);
+	--destructive: oklch(0.55 0.22 25);
+	--destructive-foreground: oklch(0.985 0 0);
+	--success: oklch(0.53 0.15 150);
+	--warning: oklch(0.62 0.15 75);
+	--info: oklch(0.53 0.13 240);
+	--border: oklch(0.9 0.005 265);
+	--input: oklch(0.9 0.005 265);
+	--ring: oklch(0.5 0.02 265);
+	color-scheme: light;
+}
+
+.dark {
+	--background: oklch(0.145 0.015 265);
+	--foreground: oklch(0.92 0.01 265);
+	--card: oklch(0.18 0.015 265);
+	--card-foreground: oklch(0.92 0.01 265);
+	--popover: oklch(0.18 0.015 265);
+	--popover-foreground: oklch(0.92 0.01 265);
+	--primary: oklch(0.92 0.01 265);
+	--primary-foreground: oklch(0.145 0.015 265);
+	--secondary: oklch(0.27 0.015 265);
+	--secondary-foreground: oklch(0.92 0.01 265);
+	--muted: oklch(0.27 0.015 265);
+	--muted-foreground: oklch(0.68 0.015 265);
+	--accent: oklch(0.27 0.015 265);
+	--accent-foreground: oklch(0.92 0.01 265);
+	--destructive: oklch(0.66 0.2 25);
+	--destructive-foreground: oklch(0.985 0 0);
+	--success: oklch(0.74 0.16 150);
+	--warning: oklch(0.8 0.15 85);
+	--info: oklch(0.72 0.12 240);
+	--border: oklch(0.3 0.015 265);
+	--input: oklch(0.3 0.015 265);
+	--ring: oklch(0.65 0.02 265);
+	color-scheme: dark;
+}
 
 @theme inline {
-	/* ── Zinc (default dark-first) ────────────────────────────── */
-	--color-background: oklch(0.145 0.015 265);
-	--color-foreground: oklch(0.985 0 0);
-	--color-card: oklch(0.18 0.015 265);
-	--color-card-foreground: oklch(0.985 0 0);
-	--color-popover: oklch(0.18 0.015 265);
-	--color-popover-foreground: oklch(0.985 0 0);
-	--color-primary: oklch(0.985 0 0);
-	--color-primary-foreground: oklch(0.145 0.015 265);
-	--color-secondary: oklch(0.27 0.015 265);
-	--color-secondary-foreground: oklch(0.985 0 0);
-	--color-muted: oklch(0.27 0.015 265);
-	--color-muted-foreground: oklch(0.7 0.015 265);
-	--color-accent: oklch(0.27 0.015 265);
-	--color-accent-foreground: oklch(0.985 0 0);
-	--color-destructive: oklch(0.55 0.22 25);
-	--color-destructive-foreground: oklch(0.985 0 0);
-	--color-border: oklch(0.35 0.015 265);
-	--color-input: oklch(0.35 0.015 265);
-	--color-ring: oklch(0.6 0.15 265);
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-destructive-foreground: var(--destructive-foreground);
+	--color-success: var(--success);
+	--color-warning: var(--warning);
+	--color-info: var(--info);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
 	--radius-sm: 0.25rem;
 	--radius-md: 0.375rem;
 	--radius-lg: 0.5rem;
 	--radius-xl: 0.75rem;
+	--font-sans: 'Geist Variable', system-ui, -apple-system, sans-serif;
+	--font-mono: 'Geist Mono Variable', ui-monospace, 'SF Mono', monospace;
 }
 
 @layer base {
@@ -35,29 +98,6 @@
 	body {
 		background-color: var(--color-background);
 		color: var(--color-foreground);
-		font-family: system-ui, -apple-system, sans-serif;
-	}
-
-	/* Light mode override */
-	:root:not(.dark) {
-		--color-background: oklch(0.985 0 0);
-		--color-foreground: oklch(0.145 0.015 265);
-		--color-card: oklch(0.985 0 0);
-		--color-card-foreground: oklch(0.145 0.015 265);
-		--color-popover: oklch(0.985 0 0);
-		--color-popover-foreground: oklch(0.145 0.015 265);
-		--color-primary: oklch(0.25 0.15 265);
-		--color-primary-foreground: oklch(0.985 0 0);
-		--color-secondary: oklch(0.96 0.005 265);
-		--color-secondary-foreground: oklch(0.25 0.015 265);
-		--color-muted: oklch(0.96 0.005 265);
-		--color-muted-foreground: oklch(0.55 0.015 265);
-		--color-accent: oklch(0.96 0.005 265);
-		--color-accent-foreground: oklch(0.25 0.015 265);
-		--color-destructive: oklch(0.55 0.22 25);
-		--color-destructive-foreground: oklch(0.985 0 0);
-		--color-border: oklch(0.87 0.005 265);
-		--color-input: oklch(0.87 0.005 265);
-		--color-ring: oklch(0.45 0.15 265);
+		font-family: var(--font-sans);
 	}
 }
diff --git a/web/src/lib/utils.ts b/web/src/lib/utils.ts
index 6aee1fa..e7f844f 100644
--- a/web/src/lib/utils.ts
+++ b/web/src/lib/utils.ts
@@ -54,14 +54,14 @@ export function statusColor(status: string): BadgeVariant {
  */
 export function levelTextClass(level: string): string {
 	const map: Record<string, string> = {
-		fatal: 'text-red-600',
-		error: 'text-red-500',
-		warning: 'text-yellow-500',
-		info: 'text-blue-500',
-		debug: 'text-gray-500',
-		trace: 'text-gray-400'
+		fatal: 'text-destructive',
+		error: 'text-destructive',
+		warning: 'text-warning',
+		info: 'text-info',
+		debug: 'text-muted-foreground',
+		trace: 'text-muted-foreground'
 	};
-	return map[level] ?? 'text-gray-500';
+	return map[level] ?? 'text-muted-foreground';
 }
 
 /**
@@ -69,11 +69,11 @@ export function levelTextClass(level: string): string {
  */
 export function statusTextClass(status: string): string {
 	const map: Record<string, string> = {
-		unresolved: 'text-red-500',
-		resolved: 'text-green-600',
-		ignored: 'text-gray-500'
+		unresolved: 'text-destructive',
+		resolved: 'text-success',
+		ignored: 'text-muted-foreground'
 	};
-	return map[status] ?? 'text-gray-500';
+	return map[status] ?? 'text-muted-foreground';
 }
 
 // ── Time formatting ───────────────────────────────────────────────────
@@ -125,12 +125,12 @@ export function formatDuration(ms: number): string {
  */
 export function transactionStatusTextClass(status: string): string {
 	const map: Record<string, string> = {
-		ok: 'text-green-600',
-		deadline_exceeded: 'text-red-500',
-		cancelled: 'text-yellow-500',
-		unknown: 'text-gray-500'
+		ok: 'text-success',
+		deadline_exceeded: 'text-destructive',
+		cancelled: 'text-warning',
+		unknown: 'text-muted-foreground'
 	};
-	return map[status] ?? 'text-gray-500';
+	return map[status] ?? 'text-muted-foreground';
 }
 
 /**
@@ -138,7 +138,7 @@ export function transactionStatusTextClass(status: string): string {
  */
 export function crashRateColor(rate: number | null): string {
 	if (rate === null) return "";
-	if (rate < 1) return "text-green-500";
-	if (rate < 5) return "text-yellow-500";
-	return "text-red-500";
+	if (rate < 1) return "text-success";
+	if (rate < 5) return "text-warning";
+	return "text-destructive";
 }
diff --git a/web/src/routes/(dashboard)/issues/+page.svelte b/web/src/routes/(dashboard)/issues/+page.svelte
index 52811e0..74e33d9 100644
--- a/web/src/routes/(dashboard)/issues/+page.svelte
+++ b/web/src/routes/(dashboard)/issues/+page.svelte
@@ -168,8 +168,8 @@
 		<h1 class="text-2xl font-bold">Issues</h1>
 		<div class="flex items-center gap-2">
 			{#if liveIndicator}
-				<span class="inline-flex items-center gap-1 text-xs text-emerald-500">
-					<span class="h-2 w-2 rounded-full bg-emerald-500 animate-pulse"></span>
+				<span class="inline-flex items-center gap-1 text-xs text-success">
+					<span class="h-2 w-2 rounded-full bg-success animate-pulse"></span>
 					Live
 				</span>
 			{/if}
diff --git a/web/src/routes/(dashboard)/release-health/+page.svelte b/web/src/routes/(dashboard)/release-health/+page.svelte
index e83b0d3..8934b97 100644
--- a/web/src/routes/(dashboard)/release-health/+page.svelte
+++ b/web/src/routes/(dashboard)/release-health/+page.svelte
@@ -277,13 +277,13 @@
 						<div class="flex h-4 rounded-full overflow-hidden bg-muted mb-3">
 							{#if aggregateExited > 0}
 								<div
-									class="bg-green-500 h-full"
+									class="bg-success h-full"
 									style="width: {(aggregateExited / aggregateTotal * 100)}%"
 								></div>
 							{/if}
 							{#if aggregateErrored > 0}
 								<div
-									class="bg-yellow-500 h-full"
+									class="bg-warning h-full"
 									style="width: {(aggregateErrored / aggregateTotal * 100)}%"
 								></div>
 							{/if}
@@ -295,20 +295,20 @@
 							{/if}
 							{#if aggregateCrashed > 0}
 								<div
-									class="bg-red-500 h-full"
+									class="bg-destructive h-full"
 									style="width: {(aggregateCrashed / aggregateTotal * 100)}%"
 								></div>
 							{/if}
 						</div>
 						<div class="flex items-center gap-4 text-sm">
 							<span class="flex items-center gap-1.5">
-								<span class="h-2.5 w-2.5 rounded-full bg-green-500"></span>
-								<span class="text-green-600 dark:text-green-400 font-medium">{aggregateExited}</span>
+								<span class="h-2.5 w-2.5 rounded-full bg-success"></span>
+								<span class="text-success font-medium">{aggregateExited}</span>
 								<span class="text-muted-foreground">exited</span>
 							</span>
 							<span class="flex items-center gap-1.5">
-								<span class="h-2.5 w-2.5 rounded-full bg-yellow-500"></span>
-								<span class="text-yellow-600 dark:text-yellow-400 font-medium">{aggregateErrored}</span>
+								<span class="h-2.5 w-2.5 rounded-full bg-warning"></span>
+								<span class="text-warning font-medium">{aggregateErrored}</span>
 								<span class="text-muted-foreground">errored</span>
 							</span>
 							<span class="flex items-center gap-1.5">
@@ -317,8 +317,8 @@
 								<span class="text-muted-foreground">abnormal</span>
 							</span>
 							<span class="flex items-center gap-1.5">
-								<span class="h-2.5 w-2.5 rounded-full bg-red-500"></span>
-								<span class="text-red-600 dark:text-red-400 font-medium">{aggregateCrashed}</span>
+								<span class="h-2.5 w-2.5 rounded-full bg-destructive"></span>
+								<span class="text-destructive font-medium">{aggregateCrashed}</span>
 								<span class="text-muted-foreground">crashed</span>
 							</span>
 						</div>
@@ -379,16 +379,16 @@
 									{s.crash_rate !== null ? s.crash_rate.toFixed(2) + '%' : '—'}
 								</span>
 							</TableCell>
-							<TableCell class="hidden md:table-cell text-center text-green-600 dark:text-green-400 font-medium">
+							<TableCell class="hidden md:table-cell text-center text-success font-medium">
 								{s.exited}
 							</TableCell>
-							<TableCell class="hidden md:table-cell text-center text-yellow-600 dark:text-yellow-400 font-medium">
+							<TableCell class="hidden md:table-cell text-center text-warning font-medium">
 								{s.errored}
 							</TableCell>
 							<TableCell class="hidden md:table-cell text-center text-orange-600 dark:text-orange-400 font-medium">
 								{s.abnormal}
 							</TableCell>
-							<TableCell class="text-center text-red-600 dark:text-red-400 font-medium">
+							<TableCell class="text-center text-destructive font-medium">
 								{s.crashed}
 							</TableCell>
 							<TableCell class="text-muted-foreground text-sm">
diff --git a/web/src/routes/(dashboard)/settings/+page.svelte b/web/src/routes/(dashboard)/settings/+page.svelte
index 064b224..832c1f2 100644
--- a/web/src/routes/(dashboard)/settings/+page.svelte
+++ b/web/src/routes/(dashboard)/settings/+page.svelte
@@ -93,7 +93,7 @@
 					<p class="text-sm text-destructive">{passwordError}</p>
 				{/if}
 				{#if passwordSuccess}
-					<p class="text-sm text-emerald-500">{passwordSuccess}</p>
+					<p class="text-sm text-success">{passwordSuccess}</p>
 				{/if}
 
 				<Button type="submit">Update Password</Button>
diff --git a/web/src/routes/(dashboard)/transactions/[id]/+page.svelte b/web/src/routes/(dashboard)/transactions/[id]/+page.svelte
index 4d123d7..64a87ed 100644
--- a/web/src/routes/(dashboard)/transactions/[id]/+page.svelte
+++ b/web/src/routes/(dashboard)/transactions/[id]/+page.svelte
@@ -27,13 +27,13 @@
 	let projectSlug = $state('');
 
 	function spanColor(op: string | null): string {
-		if (!op) return 'bg-gray-400 dark:bg-gray-600';
+		if (!op) return 'bg-muted-foreground/60';
 		const lower = op.toLowerCase();
 		if (lower.includes('db') || lower.includes('sql') || lower.includes('postgres') || lower.includes('redis'))
-			return 'bg-amber-400 dark:bg-amber-500';
+			return 'bg-warning';
 		if (lower.includes('http') || lower.includes('request') || lower.includes('fetch') || lower.includes('client'))
-			return 'bg-blue-400 dark:bg-blue-500';
-		return 'bg-gray-400 dark:bg-gray-600';
+			return 'bg-info';
+		return 'bg-muted-foreground/60';
 	}
 
 	function spanColorLabel(op: string | null): string {
@@ -127,15 +127,15 @@
 						<CardTitle class="text-lg">Span Waterfall</CardTitle>
 						<div class="flex items-center gap-3 text-xs text-muted-foreground">
 							<span class="flex items-center gap-1">
-								<span class="h-3 w-3 rounded bg-amber-400 dark:bg-amber-500 inline-block"></span>
+								<span class="h-3 w-3 rounded bg-warning inline-block"></span>
 								Database
 							</span>
 							<span class="flex items-center gap-1">
-								<span class="h-3 w-3 rounded bg-blue-400 dark:bg-blue-500 inline-block"></span>
+								<span class="h-3 w-3 rounded bg-info inline-block"></span>
 								HTTP
 							</span>
 							<span class="flex items-center gap-1">
-								<span class="h-3 w-3 rounded bg-gray-400 dark:bg-gray-600 inline-block"></span>
+								<span class="h-3 w-3 rounded bg-muted-foreground/60 inline-block"></span>
 								Other
 							</span>
 						</div>
