From bf206334e3eb9aa7a1ced7b93207670c210b1a16 Mon Sep 17 00:00:00 2001
From: Logan Cusano <logan@simplestepsolutions.com>
Date: Sun, 25 Oct 2026 21:29:13 -0400
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20finish=20the=20token=20migrati?=
 =?UTF-8?q?on=20=E2=80=94=20raw=20grey=20classes=20->=20theme=20tokens?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

UI_REDESIGN chunk 4 was never finished: 39 app/component files still used
raw Tailwind greys, kept readable in light mode only by the !important
override sheet. In dark mode text-gray-600 is ~2.3:1 on surface, and the
light override maps it to #94a3b8 (~2.6:1 on white) — unreadable in both.

Mechanical mapping (886 classes): gray-100/200 -> ink, 300/400 -> ink-2,
500/600/700 -> ink-muted, bg 950/900/800 -> page/surface/raised,
border 800 -> line, 700/600 -> line-strong, plus hover/divide/placeholder.
Alpha suffixes kept (tokens are color-mix, so /60 works). bg-gray-700,
text-white and marketing pages left alone. text-[9px] -> text-[10px].

Frontend unverified: no Node on the authoring box (#207).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 drb-frontend/app/admin/page.tsx               | 218 ++++++++---------
 drb-frontend/app/alerts/page.tsx              |  60 ++---
 drb-frontend/app/faq/page.tsx                 |   8 +-
 drb-frontend/app/features/page.tsx            |   8 +-
 drb-frontend/app/login/page.tsx               |  14 +-
 drb-frontend/app/nodes/[id]/page.tsx          |  26 +-
 drb-frontend/app/nodes/page.tsx               |   8 +-
 drb-frontend/app/onboarding/page.tsx          |   8 +-
 drb-frontend/app/page.tsx                     |  18 +-
 drb-frontend/app/pricing/page.tsx             |   6 +-
 drb-frontend/app/privacy/page.tsx             |   6 +-
 drb-frontend/app/profile/page.tsx             |  32 +--
 drb-frontend/app/settings/api-keys/page.tsx   |  26 +-
 drb-frontend/app/settings/billing/page.tsx    |  24 +-
 drb-frontend/app/settings/layout.tsx          |   6 +-
 drb-frontend/app/settings/members/page.tsx    |  26 +-
 drb-frontend/app/settings/nodes/page.tsx      |  28 +--
 .../app/settings/organization/page.tsx        |  10 +-
 drb-frontend/app/signup/page.tsx              |  14 +-
 drb-frontend/app/systems/page.tsx             | 226 +++++++++---------
 drb-frontend/app/terms/page.tsx               |   6 +-
 drb-frontend/app/trips/[id]/page.tsx          | 144 +++++------
 drb-frontend/app/trips/page.tsx               |  42 ++--
 drb-frontend/app/waitlist/page.tsx            |  18 +-
 drb-frontend/components/CallRow.tsx           |  62 ++---
 drb-frontend/components/CameraFeed.tsx        |   4 +-
 drb-frontend/components/LiveView.tsx          |   2 +-
 drb-frontend/components/MapView.tsx           |  24 +-
 drb-frontend/components/NodeCard.tsx          |  20 +-
 drb-frontend/components/NodeConfigModal.tsx   |  30 +--
 drb-frontend/components/RadioChannels.tsx     |  10 +-
 drb-frontend/components/SdrSettings.tsx       |  30 +--
 drb-frontend/components/StatusBadge.tsx       |   2 +-
 .../components/admin/CameraProvidersTab.tsx   |  26 +-
 .../components/admin/OutageProvidersTab.tsx   |  28 +--
 drb-frontend/components/admin/ReplayTab.tsx   |  78 +++---
 drb-frontend/components/live/WallPanels.tsx   |   8 +-
 drb-frontend/components/ui/EmptyState.tsx     |   2 +-
 .../components/ui/MachineOutputNotice.tsx     |   2 +-
 39 files changed, 655 insertions(+), 655 deletions(-)

diff --git a/drb-frontend/app/admin/page.tsx b/drb-frontend/app/admin/page.tsx
index 6b83723..05a2bfc 100644
--- a/drb-frontend/app/admin/page.tsx
+++ b/drb-frontend/app/admin/page.tsx
@@ -85,7 +85,7 @@ function fmtDatetime(iso: string | null | undefined) {
 const ROLE_COLORS: Record<UserRole, string> = {
   admin:    "bg-indigo-900 text-indigo-300",
   operator: "bg-green-900 text-green-300",
-  viewer:   "bg-gray-800 text-gray-400",
+  viewer:   "bg-raised text-ink-2",
 };
 
 function RoleBadge({ role }: { role: UserRole }) {
@@ -136,14 +136,14 @@ function FeaturesTab() {
         </div>
       )}
       {loading ? (
-        <p className="text-gray-500 text-sm font-mono">Loading…</p>
+        <p className="text-ink-muted text-sm font-mono">Loading…</p>
       ) : (
-        <div className="bg-gray-900 border border-gray-800 rounded-xl divide-y divide-gray-800">
+        <div className="bg-surface border border-line rounded-xl divide-y divide-line">
           {FLAG_META.map(({ key, label, description }) => (
             <div key={key} className="flex items-center justify-between gap-4 px-5 py-4">
               <div className="min-w-0">
                 <p className="text-white text-sm font-semibold">{label}</p>
-                <p className="text-gray-500 text-xs mt-0.5 leading-snug">{description}</p>
+                <p className="text-ink-muted text-xs mt-0.5 leading-snug">{description}</p>
               </div>
               <Toggle
                 enabled={flags?.[key] ?? true}
@@ -238,30 +238,30 @@ function CorrelationDebugTab() {
 
   return (
     <div className="space-y-4">
-      <p className="text-xs text-gray-500 font-mono">
+      <p className="text-xs text-ink-muted font-mono">
         Fetches recent incidents with per-call correlation debug fields, plus orphaned calls.
         Copy the JSON and paste it to Claude to diagnose correlation problems.
       </p>
 
       <div className="flex flex-wrap items-end gap-4">
         <div>
-          <label className="text-xs text-gray-400 block mb-1">Incidents (limit)</label>
+          <label className="text-xs text-ink-2 block mb-1">Incidents (limit)</label>
           <input
             type="number"
             min={1} max={100}
             value={limit}
             onChange={(e) => setLimit(Math.min(100, Math.max(1, Number(e.target.value))))}
-            className="w-24 bg-gray-800 border border-gray-700 rounded-lg px-3 py-1.5 text-white text-sm font-mono focus:outline-none focus:border-indigo-500"
+            className="w-24 bg-raised border border-line-strong rounded-lg px-3 py-1.5 text-white text-sm font-mono focus:outline-none focus:border-indigo-500"
           />
         </div>
         <div>
-          <label className="text-xs text-gray-400 block mb-1">Orphan scan window (hours)</label>
+          <label className="text-xs text-ink-2 block mb-1">Orphan scan window (hours)</label>
           <input
             type="number"
             min={1} max={168}
             value={orphanHours}
             onChange={(e) => setOrphanHours(Math.min(168, Math.max(1, Number(e.target.value))))}
-            className="w-28 bg-gray-800 border border-gray-700 rounded-lg px-3 py-1.5 text-white text-sm font-mono focus:outline-none focus:border-indigo-500"
+            className="w-28 bg-raised border border-line-strong rounded-lg px-3 py-1.5 text-white text-sm font-mono focus:outline-none focus:border-indigo-500"
           />
         </div>
         <button
@@ -281,12 +281,12 @@ function CorrelationDebugTab() {
 
       {meta && (
         <div className="flex items-center justify-between">
-          <p className="text-xs text-gray-500 font-mono">
+          <p className="text-xs text-ink-muted font-mono">
             {meta.incident_count} incidents · {meta.orphaned_call_count} orphaned calls · {meta.generated_at}
           </p>
           <button
             onClick={handleCopy}
-            className="text-xs font-mono px-3 py-1.5 rounded-lg border border-gray-700 bg-gray-900 text-gray-300 hover:text-white transition-colors"
+            className="text-xs font-mono px-3 py-1.5 rounded-lg border border-line-strong bg-surface text-ink-2 hover:text-white transition-colors"
           >
             {copied ? "Copied!" : "Copy JSON"}
           </button>
@@ -295,22 +295,22 @@ function CorrelationDebugTab() {
 
       {meta && Object.keys(pathCounts).length > 0 && (
         <div className="grid grid-cols-2 gap-3">
-          <div className="bg-gray-900 border border-gray-800 rounded-xl p-4 space-y-1">
-            <p className="text-xs text-gray-400 font-mono font-semibold mb-2">corr_path distribution</p>
+          <div className="bg-surface border border-line rounded-xl p-4 space-y-1">
+            <p className="text-xs text-ink-2 font-mono font-semibold mb-2">corr_path distribution</p>
             {Object.entries(pathCounts).sort((a, b) => b[1] - a[1]).map(([path, n]) => (
               <div key={path} className="flex justify-between text-xs font-mono">
-                <span className="text-gray-300">{path}</span>
+                <span className="text-ink-2">{path}</span>
                 <span className="text-indigo-400">{n}</span>
               </div>
             ))}
           </div>
-          <div className="bg-gray-900 border border-gray-800 rounded-xl p-4 space-y-1">
-            <p className="text-xs text-gray-400 font-mono font-semibold mb-2">fit_signal distribution</p>
+          <div className="bg-surface border border-line rounded-xl p-4 space-y-1">
+            <p className="text-xs text-ink-2 font-mono font-semibold mb-2">fit_signal distribution</p>
             {Object.keys(signalCounts).length === 0
-              ? <p className="text-xs text-gray-600 font-mono">No signal data yet — deploy correlator update first</p>
+              ? <p className="text-xs text-ink-muted font-mono">No signal data yet — deploy correlator update first</p>
               : Object.entries(signalCounts).sort((a, b) => b[1] - a[1]).map(([sig, n]) => (
                   <div key={sig} className="flex justify-between text-xs font-mono">
-                    <span className={sig === "time_fallback" ? "text-yellow-400" : "text-gray-300"}>{sig}</span>
+                    <span className={sig === "time_fallback" ? "text-yellow-400" : "text-ink-2"}>{sig}</span>
                     <span className="text-indigo-400">{n}</span>
                   </div>
                 ))
@@ -320,13 +320,13 @@ function CorrelationDebugTab() {
       )}
 
       {meta?.orphans_by_talkgroup && meta.orphans_by_talkgroup.length > 0 && (
-        <div className="bg-gray-900 border border-gray-800 rounded-xl p-4 space-y-1">
-          <p className="text-xs text-gray-400 font-mono font-semibold mb-2">orphans by talkgroup</p>
+        <div className="bg-surface border border-line rounded-xl p-4 space-y-1">
+          <p className="text-xs text-ink-2 font-mono font-semibold mb-2">orphans by talkgroup</p>
           {meta.orphans_by_talkgroup.map((tg) => (
             <div key={String(tg.talkgroup_id)} className="flex justify-between text-xs font-mono">
-              <span className="text-gray-300">{tg.talkgroup_name} <span className="text-gray-600">({tg.talkgroup_id})</span></span>
-              <span className="text-gray-400">
-                {tg.count} total · <span className="text-gray-500">{tg.no_type_count} no-type</span> · <span className="text-red-400">{tg.sweep_exhausted_count} exhausted</span>
+              <span className="text-ink-2">{tg.talkgroup_name} <span className="text-ink-muted">({tg.talkgroup_id})</span></span>
+              <span className="text-ink-2">
+                {tg.count} total · <span className="text-ink-muted">{tg.no_type_count} no-type</span> · <span className="text-red-400">{tg.sweep_exhausted_count} exhausted</span>
               </span>
             </div>
           ))}
@@ -336,7 +336,7 @@ function CorrelationDebugTab() {
       {json && (
         <pre
           ref={preRef}
-          className="bg-gray-950 border border-gray-800 rounded-xl p-4 text-xs text-gray-300 font-mono overflow-auto max-h-[60vh] whitespace-pre"
+          className="bg-page border border-line rounded-xl p-4 text-xs text-ink-2 font-mono overflow-auto max-h-[60vh] whitespace-pre"
         >
           {json}
         </pre>
@@ -455,13 +455,13 @@ function UserDetailPanel({
   const isSelf = user.uid === currentUid;
 
   return (
-    <div className="bg-gray-900 border border-gray-700 rounded-xl p-5 space-y-5 font-mono">
+    <div className="bg-surface border border-line-strong rounded-xl p-5 space-y-5 font-mono">
       <div className="flex items-start justify-between">
         <div>
           <p className="text-white font-semibold">{detail.email}</p>
-          <p className="text-xs text-gray-500 mt-0.5">{detail.uid}</p>
+          <p className="text-xs text-ink-muted mt-0.5">{detail.uid}</p>
         </div>
-        <button onClick={onClose} className="text-gray-600 hover:text-gray-300 transition-colors text-xl leading-none">×</button>
+        <button onClick={onClose} className="text-ink-muted hover:text-ink transition-colors text-xl leading-none">×</button>
       </div>
 
       {error && (
@@ -472,21 +472,21 @@ function UserDetailPanel({
 
       <div className="space-y-3">
         <div>
-          <label className="text-xs text-gray-400 block mb-1">Display Name</label>
+          <label className="text-xs text-ink-2 block mb-1">Display Name</label>
           <input
             value={editName}
             onChange={(e) => setEditName(e.target.value)}
-            className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-1.5 text-white text-sm focus:outline-none focus:border-indigo-500"
+            className="w-full bg-raised border border-line-strong rounded-lg px-3 py-1.5 text-white text-sm focus:outline-none focus:border-indigo-500"
             placeholder="Full name"
           />
         </div>
 
         <div>
-          <label className="text-xs text-gray-400 block mb-1">Role</label>
+          <label className="text-xs text-ink-2 block mb-1">Role</label>
           <select
             value={editRole}
             onChange={(e) => setEditRole(e.target.value as UserRole)}
-            className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-1.5 text-white text-sm focus:outline-none focus:border-indigo-500"
+            className="w-full bg-raised border border-line-strong rounded-lg px-3 py-1.5 text-white text-sm focus:outline-none focus:border-indigo-500"
           >
             <option value="admin">Admin — full access</option>
             <option value="operator">Operator — owns nodes</option>
@@ -496,13 +496,13 @@ function UserDetailPanel({
 
         {editRole === "operator" && (
           <div>
-            <label className="text-xs text-gray-400 block mb-1">
-              Owned Node IDs <span className="text-gray-600">(comma-separated, required)</span>
+            <label className="text-xs text-ink-2 block mb-1">
+              Owned Node IDs <span className="text-ink-muted">(comma-separated, required)</span>
             </label>
             <input
               value={editNodes}
               onChange={(e) => setEditNodes(e.target.value)}
-              className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-1.5 text-white text-sm font-mono focus:outline-none focus:border-indigo-500"
+              className="w-full bg-raised border border-line-strong rounded-lg px-3 py-1.5 text-white text-sm font-mono focus:outline-none focus:border-indigo-500"
               placeholder="node-abc123, node-def456"
             />
           </div>
@@ -517,10 +517,10 @@ function UserDetailPanel({
         </button>
       </div>
 
-      <div className="border-t border-gray-800 pt-4 space-y-2 text-xs">
+      <div className="border-t border-line pt-4 space-y-2 text-xs">
         <div className="flex justify-between items-center gap-3">
-          <span className="text-gray-500">Organization</span>
-          <span className={`font-mono truncate ${detail.org_id && detail.org_id === myOrgId ? "text-gray-300" : "text-yellow-400"}`}>
+          <span className="text-ink-muted">Organization</span>
+          <span className={`font-mono truncate ${detail.org_id && detail.org_id === myOrgId ? "text-ink-2" : "text-yellow-400"}`}>
             {!detail.org_id
               ? "None: sees no data"
               : detail.org_id === myOrgId
@@ -538,34 +538,34 @@ function UserDetailPanel({
           </button>
         )}
         <div className="flex justify-between">
-          <span className="text-gray-500">Status</span>
+          <span className="text-ink-muted">Status</span>
           <span className={detail.disabled ? "text-red-400" : "text-green-400"}>
             {detail.disabled ? "Disabled" : "Active"}
           </span>
         </div>
         <div className="flex justify-between">
-          <span className="text-gray-500">Discord</span>
-          <span className="text-gray-300">
+          <span className="text-ink-muted">Discord</span>
+          <span className="text-ink-2">
             {detail.discord_linked
               ? `@${detail.discord_username ?? detail.discord_user_id}`
               : "Not linked"}
           </span>
         </div>
         <div className="flex justify-between">
-          <span className="text-gray-500">Created</span>
-          <span className="text-gray-300">{fmtDate(detail.creation_time)}</span>
+          <span className="text-ink-muted">Created</span>
+          <span className="text-ink-2">{fmtDate(detail.creation_time)}</span>
         </div>
         <div className="flex justify-between">
-          <span className="text-gray-500">Last sign-in</span>
-          <span className="text-gray-300">{fmtDate(detail.last_sign_in)}</span>
+          <span className="text-ink-muted">Last sign-in</span>
+          <span className="text-ink-2">{fmtDate(detail.last_sign_in)}</span>
         </div>
       </div>
 
       {(detail.sessions?.length ?? 0) > 0 && (
-        <div className="border-t border-gray-800 pt-4">
+        <div className="border-t border-line pt-4">
           <button
             onClick={() => setShowSessions((v) => !v)}
-            className="text-xs text-gray-500 hover:text-gray-300 transition-colors flex items-center gap-1"
+            className="text-xs text-ink-muted hover:text-ink transition-colors flex items-center gap-1"
           >
             <span>{showSessions ? "▲" : "▼"}</span>
             <span>Login history ({detail.sessions?.length} recent)</span>
@@ -573,9 +573,9 @@ function UserDetailPanel({
           {showSessions && (
             <div className="mt-3 space-y-1.5 max-h-48 overflow-y-auto">
               {detail.sessions?.map((s) => (
-                <div key={s.session_id} className="text-xs text-gray-400 flex justify-between gap-4">
+                <div key={s.session_id} className="text-xs text-ink-2 flex justify-between gap-4">
                   <span>{fmtDatetime(s.timestamp)}</span>
-                  <span className="text-gray-600 truncate">{s.ip ?? "—"}</span>
+                  <span className="text-ink-muted truncate">{s.ip ?? "—"}</span>
                 </div>
               ))}
             </div>
@@ -583,7 +583,7 @@ function UserDetailPanel({
         </div>
       )}
 
-      <div className="border-t border-gray-800 pt-4 flex gap-4 flex-wrap">
+      <div className="border-t border-line pt-4 flex gap-4 flex-wrap">
         {!isSelf ? (
           <>
             <button
@@ -602,7 +602,7 @@ function UserDetailPanel({
             </button>
           </>
         ) : (
-          <p className="text-xs text-gray-600">Cannot disable or delete your own account.</p>
+          <p className="text-xs text-ink-muted">Cannot disable or delete your own account.</p>
         )}
       </div>
     </div>
@@ -667,19 +667,19 @@ function CreateUserModal({
   if (inviteLink) {
     return (
       <div className="fixed inset-0 z-50 bg-black/70 flex items-center justify-center p-4">
-        <div className="bg-gray-900 border border-gray-700 rounded-xl w-full max-w-md p-6 space-y-4 font-mono">
+        <div className="bg-surface border border-line-strong rounded-xl w-full max-w-md p-6 space-y-4 font-mono">
           <h2 className="text-white font-semibold">User Created</h2>
-          <p className="text-xs text-gray-400">
+          <p className="text-xs text-ink-2">
             Share this one-time invite link with the new user so they can set their password.
             It expires after use.
           </p>
-          <div className="bg-gray-800 border border-gray-700 rounded-lg p-3">
+          <div className="bg-raised border border-line-strong rounded-lg p-3">
             <p className="text-xs text-indigo-300 break-all">{inviteLink}</p>
           </div>
           <div className="flex gap-3">
             <button
               onClick={copyLink}
-              className="flex-1 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-lg py-2 text-sm transition-colors"
+              className="flex-1 bg-raised hover:bg-gray-700 text-ink-2 rounded-lg py-2 text-sm transition-colors"
             >
               {copied ? "Copied!" : "Copy link"}
             </button>
@@ -697,37 +697,37 @@ function CreateUserModal({
 
   return (
     <div className="fixed inset-0 z-50 bg-black/70 flex items-center justify-center p-4">
-      <div className="bg-gray-900 border border-gray-700 rounded-xl w-full max-w-md p-6 font-mono">
+      <div className="bg-surface border border-line-strong rounded-xl w-full max-w-md p-6 font-mono">
         <h2 className="text-white font-semibold mb-4">Create User</h2>
         <form onSubmit={handleSubmit} className="space-y-4">
           <div>
-            <label className="text-xs text-gray-400 block mb-1">Email</label>
+            <label className="text-xs text-ink-2 block mb-1">Email</label>
             <input
               type="email"
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               required
-              className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+              className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
               placeholder="user@example.com"
             />
           </div>
           <div>
-            <label className="text-xs text-gray-400 block mb-1">
-              Display Name <span className="text-gray-600">(optional)</span>
+            <label className="text-xs text-ink-2 block mb-1">
+              Display Name <span className="text-ink-muted">(optional)</span>
             </label>
             <input
               value={displayName}
               onChange={(e) => setDisplayName(e.target.value)}
-              className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+              className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
               placeholder="Jane Smith"
             />
           </div>
           <div>
-            <label className="text-xs text-gray-400 block mb-1">Role</label>
+            <label className="text-xs text-ink-2 block mb-1">Role</label>
             <select
               value={role}
               onChange={(e) => setRole(e.target.value as UserRole)}
-              className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+              className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
             >
               <option value="admin">Admin — full access</option>
               <option value="operator">Operator — owns nodes</option>
@@ -736,14 +736,14 @@ function CreateUserModal({
           </div>
           {role === "operator" && (
             <div>
-              <label className="text-xs text-gray-400 block mb-1">
-                Owned Node IDs <span className="text-gray-600">(comma-separated, required)</span>
+              <label className="text-xs text-ink-2 block mb-1">
+                Owned Node IDs <span className="text-ink-muted">(comma-separated, required)</span>
               </label>
               <input
                 value={nodeIds}
                 onChange={(e) => setNodeIds(e.target.value)}
                 required
-                className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm font-mono focus:outline-none focus:border-indigo-500"
+                className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm font-mono focus:outline-none focus:border-indigo-500"
                 placeholder="node-abc123, node-def456"
               />
             </div>
@@ -760,7 +760,7 @@ function CreateUserModal({
             <button
               type="button"
               onClick={onClose}
-              className="flex-1 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-lg py-2 text-sm transition-colors"
+              className="flex-1 bg-raised hover:bg-gray-700 text-ink-2 rounded-lg py-2 text-sm transition-colors"
             >
               Cancel
             </button>
@@ -820,7 +820,7 @@ function UsersTab({ currentUid }: { currentUid: string }) {
       )}
 
       <div className="flex items-center justify-between">
-        <p className="text-xs text-gray-500 font-mono">{users.length} user{users.length !== 1 ? "s" : ""}</p>
+        <p className="text-xs text-ink-muted font-mono">{users.length} user{users.length !== 1 ? "s" : ""}</p>
         <button
           onClick={() => setShowCreate(true)}
           className="bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-mono px-4 py-1.5 rounded-lg transition-colors"
@@ -836,14 +836,14 @@ function UsersTab({ currentUid }: { currentUid: string }) {
       )}
 
       {loading ? (
-        <p className="text-gray-500 text-sm font-mono">Loading…</p>
+        <p className="text-ink-muted text-sm font-mono">Loading…</p>
       ) : users.length === 0 ? (
-        <p className="text-gray-600 text-sm font-mono">No users found.</p>
+        <p className="text-ink-muted text-sm font-mono">No users found.</p>
       ) : (
-        <div className="border border-gray-800 rounded-xl overflow-hidden">
+        <div className="border border-line rounded-xl overflow-hidden">
           <table className="w-full text-xs font-mono">
             <thead>
-              <tr className="bg-gray-900 text-gray-500 uppercase tracking-wider">
+              <tr className="bg-surface text-ink-muted uppercase tracking-wider">
                 <th className="px-4 py-2.5 text-left">Email</th>
                 <th className="px-4 py-2.5 text-left hidden lg:table-cell">Name</th>
                 <th className="px-4 py-2.5 text-left">Role</th>
@@ -857,17 +857,17 @@ function UsersTab({ currentUid }: { currentUid: string }) {
               {users.map((u) => (
                 <tr
                   key={u.uid}
-                  className={`border-t border-gray-800 transition-colors ${
-                    selectedUid === u.uid ? "bg-gray-800/60" : "hover:bg-gray-900/60"
+                  className={`border-t border-line transition-colors ${
+                    selectedUid === u.uid ? "bg-raised/60" : "hover:bg-raised/60"
                   }`}
                 >
-                  <td className="px-4 py-2.5 text-gray-200">{u.email ?? "—"}</td>
-                  <td className="px-4 py-2.5 text-gray-400 hidden lg:table-cell">{u.display_name ?? "—"}</td>
+                  <td className="px-4 py-2.5 text-ink">{u.email ?? "—"}</td>
+                  <td className="px-4 py-2.5 text-ink-2 hidden lg:table-cell">{u.display_name ?? "—"}</td>
                   <td className="px-4 py-2.5"><RoleBadge role={u.role} /></td>
-                  <td className="px-4 py-2.5 text-gray-500 hidden sm:table-cell">
+                  <td className="px-4 py-2.5 text-ink-muted hidden sm:table-cell">
                     {u.discord_linked ? `@${u.discord_username ?? "linked"}` : "—"}
                   </td>
-                  <td className="px-4 py-2.5 text-gray-500 hidden md:table-cell">{fmtDate(u.last_sign_in)}</td>
+                  <td className="px-4 py-2.5 text-ink-muted hidden md:table-cell">{fmtDate(u.last_sign_in)}</td>
                   <td className="px-4 py-2.5">
                     {u.disabled
                       ? <span className="text-red-500">Disabled</span>
@@ -952,15 +952,15 @@ function AuditLogTab() {
       )}
 
       {loading ? (
-        <p className="text-gray-500 text-sm font-mono">Loading…</p>
+        <p className="text-ink-muted text-sm font-mono">Loading…</p>
       ) : entries.length === 0 ? (
-        <p className="text-gray-600 text-sm font-mono">No audit entries yet.</p>
+        <p className="text-ink-muted text-sm font-mono">No audit entries yet.</p>
       ) : (
         <>
-          <div className="border border-gray-800 rounded-xl overflow-hidden">
+          <div className="border border-line rounded-xl overflow-hidden">
             <table className="w-full text-xs font-mono">
               <thead>
-                <tr className="bg-gray-900 text-gray-500 uppercase tracking-wider">
+                <tr className="bg-surface text-ink-muted uppercase tracking-wider">
                   <th className="px-4 py-2.5 text-left">Time</th>
                   <th className="px-4 py-2.5 text-left">Action</th>
                   <th className="px-4 py-2.5 text-left hidden sm:table-cell">Actor</th>
@@ -970,12 +970,12 @@ function AuditLogTab() {
               </thead>
               <tbody>
                 {entries.map((e) => (
-                  <tr key={e.log_id} className="border-t border-gray-800 hover:bg-gray-900/40">
-                    <td className="px-4 py-2.5 text-gray-500 whitespace-nowrap">{fmtDatetime(e.timestamp)}</td>
+                  <tr key={e.log_id} className="border-t border-line hover:bg-raised/40">
+                    <td className="px-4 py-2.5 text-ink-muted whitespace-nowrap">{fmtDatetime(e.timestamp)}</td>
                     <td className={`px-4 py-2.5 whitespace-nowrap ${actionColor(e.action)}`}>{e.action}</td>
-                    <td className="px-4 py-2.5 text-gray-400 hidden sm:table-cell">{e.actor_email}</td>
-                    <td className="px-4 py-2.5 text-gray-400 hidden md:table-cell">{e.target_email ?? "—"}</td>
-                    <td className="px-4 py-2.5 text-gray-600 max-w-xs truncate">
+                    <td className="px-4 py-2.5 text-ink-2 hidden sm:table-cell">{e.actor_email}</td>
+                    <td className="px-4 py-2.5 text-ink-2 hidden md:table-cell">{e.target_email ?? "—"}</td>
+                    <td className="px-4 py-2.5 text-ink-muted max-w-xs truncate">
                       {Object.keys(e.details).length > 0
                         ? Object.entries(e.details)
                             .map(([k, v]) => `${k}: ${JSON.stringify(v)}`)
@@ -1029,26 +1029,26 @@ function StaleCallsTab() {
 
   return (
     <div className="space-y-5">
-      <p className="text-xs text-gray-500 font-mono">
-        Finds calls stuck in <span className="text-gray-300">active</span> status because a node rebooted before sending an end-call event.
+      <p className="text-xs text-ink-muted font-mono">
+        Finds calls stuck in <span className="text-ink-2">active</span> status because a node rebooted before sending an end-call event.
         Preview first, then close.
       </p>
 
       <div className="flex flex-wrap items-end gap-4">
         <div>
-          <label className="text-xs text-gray-400 block mb-1">Older than (minutes)</label>
+          <label className="text-xs text-ink-2 block mb-1">Older than (minutes)</label>
           <input
             type="number"
             min={1} max={1440}
             value={minutes}
             onChange={(e) => setMinutes(Math.min(1440, Math.max(1, Number(e.target.value))))}
-            className="w-28 bg-gray-800 border border-gray-700 rounded-lg px-3 py-1.5 text-white text-sm font-mono focus:outline-none focus:border-indigo-500"
+            className="w-28 bg-raised border border-line-strong rounded-lg px-3 py-1.5 text-white text-sm font-mono focus:outline-none focus:border-indigo-500"
           />
         </div>
         <button
           onClick={() => run(true)}
           disabled={loading}
-          className="bg-gray-800 hover:bg-gray-700 disabled:opacity-50 border border-gray-700 text-white text-sm font-mono px-4 py-1.5 rounded-lg transition-colors"
+          className="bg-raised hover:bg-gray-700 disabled:opacity-50 border border-line-strong text-white text-sm font-mono px-4 py-1.5 rounded-lg transition-colors"
         >
           {loading ? "Working…" : "Preview"}
         </button>
@@ -1068,18 +1068,18 @@ function StaleCallsTab() {
       )}
 
       {result && (
-        <div className="bg-gray-900 border border-gray-800 rounded-xl p-4 space-y-2">
+        <div className="bg-surface border border-line rounded-xl p-4 space-y-2">
           <p className="text-sm font-mono text-white">
             {result.dry_run ? "Preview: " : "Closed: "}
             <span className={result.count > 0 ? "text-amber-400" : "text-green-400"}>
               {result.count} stale call{result.count !== 1 ? "s" : ""}
             </span>
-            {result.count === 0 && <span className="text-gray-500"> — nothing to clear</span>}
+            {result.count === 0 && <span className="text-ink-muted"> — nothing to clear</span>}
           </p>
           {result.call_ids.length > 0 && (
             <div className="max-h-40 overflow-y-auto space-y-0.5">
               {result.call_ids.map((id) => (
-                <p key={id} className="text-xs font-mono text-gray-400">{id}</p>
+                <p key={id} className="text-xs font-mono text-ink-2">{id}</p>
               ))}
             </div>
           )}
@@ -1104,17 +1104,17 @@ function fmtPct(x: number | null | undefined): string {
 
 function EvalStatsBar({ stats }: { stats: { eval_count: number; raw_wer: number | null; corrected_wer: number | null } | null }) {
   return (
-    <div className="bg-gray-900 border border-gray-800 rounded-xl p-4 flex flex-wrap gap-x-8 gap-y-2">
+    <div className="bg-surface border border-line rounded-xl p-4 flex flex-wrap gap-x-8 gap-y-2">
       <div>
-        <p className="text-xs text-gray-500 font-mono">Calls verified</p>
+        <p className="text-xs text-ink-muted font-mono">Calls verified</p>
         <p className="text-white text-lg font-mono">{stats?.eval_count ?? "—"}</p>
       </div>
       <div>
-        <p className="text-xs text-gray-500 font-mono">Raw WER (whisper-1)</p>
+        <p className="text-xs text-ink-muted font-mono">Raw WER (whisper-1)</p>
         <p className="text-white text-lg font-mono">{fmtPct(stats?.raw_wer)}</p>
       </div>
       <div>
-        <p className="text-xs text-gray-500 font-mono">Corrected WER (shipped)</p>
+        <p className="text-xs text-ink-muted font-mono">Corrected WER (shipped)</p>
         <p className="text-white text-lg font-mono">{fmtPct(stats?.corrected_wer)}</p>
       </div>
       {stats && stats.eval_count > 0 && stats.eval_count < 20 && (
@@ -1197,7 +1197,7 @@ function SttEvalTab() {
 
   return (
     <div className="space-y-4">
-      <p className="text-xs text-gray-500 font-mono">
+      <p className="text-xs text-ink-muted font-mono">
         Listen to the audio, correct the transcript below until it matches what was actually said, then save.
         This never touches the call&apos;s real transcript or re-runs anything — it only records ground truth
         for measuring the pipeline. Do as many or as few as you have time for; it picks up where you left off.
@@ -1212,8 +1212,8 @@ function SttEvalTab() {
       )}
 
       {current ? (
-        <div className="bg-gray-900 border border-gray-800 rounded-xl p-4 space-y-3">
-          <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs font-mono text-gray-400">
+        <div className="bg-surface border border-line rounded-xl p-4 space-y-3">
+          <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs font-mono text-ink-2">
             <span>{new Date(current.started_at).toLocaleString()}</span>
             <span>{current.talkgroup_name || (current.talkgroup_id ? `TGID ${current.talkgroup_id}` : "unknown talkgroup")}</span>
           </div>
@@ -1222,18 +1222,18 @@ function SttEvalTab() {
             // eslint-disable-next-line jsx-a11y/media-has-caption
             <audio controls src={current.audio_url} className="w-full h-9" />
           ) : (
-            <p className="text-xs text-gray-500 italic">No audio on this call — skip it.</p>
+            <p className="text-xs text-ink-muted italic">No audio on this call — skip it.</p>
           )}
 
           <div>
-            <label className="text-xs text-gray-400 block mb-1">
+            <label className="text-xs text-ink-2 block mb-1">
               Machine transcript (pre-filled) — correct it into what was actually said
             </label>
             <textarea
               value={draft}
               onChange={(e) => setDraft(e.target.value)}
               rows={4}
-              className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm font-mono focus:outline-none focus:border-indigo-500"
+              className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm font-mono focus:outline-none focus:border-indigo-500"
             />
           </div>
 
@@ -1248,15 +1248,15 @@ function SttEvalTab() {
             <button
               onClick={skip}
               disabled={saving}
-              className="bg-gray-800 hover:bg-gray-700 disabled:opacity-50 border border-gray-700 text-white text-sm font-mono px-4 py-1.5 rounded-lg transition-colors"
+              className="bg-raised hover:bg-gray-700 disabled:opacity-50 border border-line-strong text-white text-sm font-mono px-4 py-1.5 rounded-lg transition-colors"
             >
               Skip
             </button>
           </div>
         </div>
       ) : (
-        <div className="bg-gray-900 border border-gray-800 rounded-xl p-4">
-          <p className="text-sm font-mono text-gray-400">
+        <div className="bg-surface border border-line rounded-xl p-4">
+          <p className="text-sm font-mono text-ink-2">
             {loadingBatch ? "Loading calls…" : exhausted ? "Nothing left to verify right now — check back after more calls come in." : "Loading…"}
           </p>
         </div>
@@ -1312,13 +1312,13 @@ export default function AdminPage() {
     <div className={`space-y-6 ${wide ? "" : "max-w-2xl"}`}>
       <h1 className="text-white text-xl font-bold font-mono">Admin</h1>
 
-      <div className="flex flex-wrap gap-1 bg-gray-900 border border-gray-800 rounded-lg p-1 w-fit">
+      <div className="flex flex-wrap gap-1 bg-surface border border-line rounded-lg p-1 w-fit">
         {TAB_LABELS.map(({ key, label }) => (
           <button
             key={key}
             onClick={() => setTab(key)}
             className={`text-sm font-mono px-4 py-1.5 rounded-md transition-colors ${
-              tab === key ? "bg-gray-800 text-white" : "text-gray-500 hover:text-gray-300"
+              tab === key ? "bg-raised text-white" : "text-ink-muted hover:text-ink"
             }`}
           >
             {label}
diff --git a/drb-frontend/app/alerts/page.tsx b/drb-frontend/app/alerts/page.tsx
index 8d60319..2a4e597 100644
--- a/drb-frontend/app/alerts/page.tsx
+++ b/drb-frontend/app/alerts/page.tsx
@@ -74,39 +74,39 @@ function RulesTab({ isAdmin }: { isAdmin: boolean }) {
   return (
     <div className="space-y-6">
       {isAdmin && (
-        <form onSubmit={handleCreate} className="bg-gray-900 border border-gray-800 rounded-xl p-5 space-y-4">
+        <form onSubmit={handleCreate} className="bg-surface border border-line rounded-xl p-5 space-y-4">
           <h3 className="text-white font-mono text-sm font-bold">New Alert Rule</h3>
           <div className="grid grid-cols-2 gap-4">
             <div>
-              <label className="text-xs text-gray-400 block mb-1">Name</label>
+              <label className="text-xs text-ink-2 block mb-1">Name</label>
               <input
                 required value={name} onChange={(e) => setName(e.target.value)}
                 placeholder="e.g. Structure Fire"
-                className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+                className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
               />
             </div>
             <div>
-              <label className="text-xs text-gray-400 block mb-1">Keywords (comma-separated)</label>
+              <label className="text-xs text-ink-2 block mb-1">Keywords (comma-separated)</label>
               <input
                 value={keywords} onChange={(e) => setKeywords(e.target.value)}
                 placeholder="fire, smoke, structure"
-                className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+                className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
               />
             </div>
             <div>
-              <label className="text-xs text-gray-400 block mb-1">Talkgroup IDs (comma-separated)</label>
+              <label className="text-xs text-ink-2 block mb-1">Talkgroup IDs (comma-separated)</label>
               <input
                 value={tgIds} onChange={(e) => setTgIds(e.target.value)}
                 placeholder="9048, 9600"
-                className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+                className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
               />
             </div>
             <div>
-              <label className="text-xs text-gray-400 block mb-1">Discord Webhook URL (optional)</label>
+              <label className="text-xs text-ink-2 block mb-1">Discord Webhook URL (optional)</label>
               <input
                 value={webhook} onChange={(e) => setWebhook(e.target.value)}
                 placeholder="https://discord.com/api/webhooks/…"
-                className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+                className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
               />
             </div>
           </div>
@@ -120,13 +120,13 @@ function RulesTab({ isAdmin }: { isAdmin: boolean }) {
         </form>
       )}
 
-      <div className="bg-gray-900 border border-gray-800 rounded-xl overflow-hidden">
+      <div className="bg-surface border border-line rounded-xl overflow-hidden">
         {rules.length === 0 ? (
-          <p className="text-gray-600 text-sm font-mono p-4">No alert rules configured.</p>
+          <p className="text-ink-muted text-sm font-mono p-4">No alert rules configured.</p>
         ) : (
           <table className="w-full text-left">
             <thead>
-              <tr className="border-b border-gray-800 text-xs text-gray-500 uppercase">
+              <tr className="border-b border-line text-xs text-ink-muted uppercase">
                 <th className="px-4 py-3">Name</th>
                 <th className="px-4 py-3">Keywords</th>
                 <th className="px-4 py-3">Talkgroups</th>
@@ -137,11 +137,11 @@ function RulesTab({ isAdmin }: { isAdmin: boolean }) {
             </thead>
             <tbody>
               {rules.map((rule) => (
-                <tr key={rule.rule_id} className="border-b border-gray-800">
+                <tr key={rule.rule_id} className="border-b border-line">
                   <td className="px-4 py-3 text-white text-sm">{rule.name}</td>
-                  <td className="px-4 py-3 text-gray-400 text-xs font-mono">{rule.keywords.join(", ") || "—"}</td>
-                  <td className="px-4 py-3 text-gray-400 text-xs font-mono">{rule.talkgroup_ids.join(", ") || "—"}</td>
-                  <td className="px-4 py-3 text-gray-400 text-xs">
+                  <td className="px-4 py-3 text-ink-2 text-xs font-mono">{rule.keywords.join(", ") || "—"}</td>
+                  <td className="px-4 py-3 text-ink-2 text-xs font-mono">{rule.talkgroup_ids.join(", ") || "—"}</td>
+                  <td className="px-4 py-3 text-ink-2 text-xs">
                     {rule.discord_webhook ? (
                       <span className="text-green-400">configured</span>
                     ) : "—"}
@@ -153,13 +153,13 @@ function RulesTab({ isAdmin }: { isAdmin: boolean }) {
                         className={`text-xs px-2 py-0.5 rounded-full transition-colors ${
                           rule.enabled
                             ? "bg-green-900 text-green-300 hover:bg-green-800"
-                            : "bg-gray-800 text-gray-400 hover:bg-gray-700"
+                            : "bg-raised text-ink-2 hover:bg-gray-700"
                         }`}
                       >
                         {rule.enabled ? "enabled" : "disabled"}
                       </button>
                     ) : (
-                      <span className={`text-xs ${rule.enabled ? "text-green-400" : "text-gray-500"}`}>
+                      <span className={`text-xs ${rule.enabled ? "text-green-400" : "text-ink-muted"}`}>
                         {rule.enabled ? "enabled" : "disabled"}
                       </span>
                     )}
@@ -209,13 +209,13 @@ export default function AlertsPage() {
       </div>
 
       {/* Tabs */}
-      <div className="flex gap-1 bg-gray-900 border border-gray-800 rounded-lg p-1 w-fit">
+      <div className="flex gap-1 bg-surface border border-line rounded-lg p-1 w-fit">
         {(["events", ...(isAdmin ? ["rules"] : [])] as const).map((t) => (
           <button
             key={t}
             onClick={() => setTab(t as "events" | "rules")}
             className={`text-sm font-mono px-4 py-1.5 rounded-md transition-colors capitalize ${
-              tab === t ? "bg-gray-800 text-white" : "text-gray-500 hover:text-gray-300"
+              tab === t ? "bg-raised text-white" : "text-ink-muted hover:text-ink"
             }`}
           >
             {t === "events" ? "Triggered Alerts" : "Rules"}
@@ -225,7 +225,7 @@ export default function AlertsPage() {
 
       {tab === "events" && (
         loading ? (
-          <p className="text-gray-500 text-sm font-mono">Loading…</p>
+          <p className="text-ink-muted text-sm font-mono">Loading…</p>
         ) : error ? (
           <p className="text-red-400 text-sm font-mono">
             {/requires an index|PERMISSION_DENIED|insufficient permissions/i.test(error)
@@ -233,7 +233,7 @@ export default function AlertsPage() {
               : `Couldn't load alerts: ${error}`}
           </p>
         ) : alerts.length === 0 ? (
-          <p className="text-gray-600 text-sm font-mono">No alerts triggered yet.</p>
+          <p className="text-ink-muted text-sm font-mono">No alerts triggered yet.</p>
         ) : (
           <div className="space-y-3">
           {/* Gate A / A2 (server-26#46) — the Snippet column is transcript text,
@@ -242,10 +242,10 @@ export default function AlertsPage() {
             variant="inline"
             detail="alerts match against automated transcripts and may fire on, or miss, the wrong words."
           />
-          <div className="bg-gray-900 border border-gray-800 rounded-xl overflow-hidden">
+          <div className="bg-surface border border-line rounded-xl overflow-hidden">
             <table className="w-full text-left">
               <thead>
-                <tr className="border-b border-gray-800 text-xs text-gray-500 uppercase">
+                <tr className="border-b border-line text-xs text-ink-muted uppercase">
                   <th className="px-4 py-3">Rule</th>
                   <th className="px-4 py-3">Talkgroup</th>
                   <th className="px-4 py-3">Matched</th>
@@ -258,10 +258,10 @@ export default function AlertsPage() {
                 {alerts.map((alert) => (
                   <tr
                     key={alert.alert_id}
-                    className={`border-b border-gray-800 ${alert.acknowledged ? "opacity-50" : ""}`}
+                    className={`border-b border-line ${alert.acknowledged ? "opacity-50" : ""}`}
                   >
                     <td className="px-4 py-3 text-white text-sm">{alert.rule_name}</td>
-                    <td className="px-4 py-3 text-gray-400 text-xs font-mono">
+                    <td className="px-4 py-3 text-ink-2 text-xs font-mono">
                       {alert.talkgroup_name || alert.talkgroup_id || "—"}
                     </td>
                     <td className="px-4 py-3">
@@ -273,17 +273,17 @@ export default function AlertsPage() {
                         ))}
                       </div>
                     </td>
-                    <td className="px-4 py-3 text-gray-400 text-xs font-mono max-w-xs truncate">
+                    <td className="px-4 py-3 text-ink-2 text-xs font-mono max-w-xs truncate">
                       {alert.transcript_snippet || "—"}
                     </td>
-                    <td className="px-4 py-3 text-gray-400 text-xs font-mono">{fmtTime(alert.triggered_at)}</td>
+                    <td className="px-4 py-3 text-ink-2 text-xs font-mono">{fmtTime(alert.triggered_at)}</td>
                     <td className="px-4 py-3">
                       {alert.acknowledged ? (
-                        <span className="text-xs text-gray-500">acked</span>
+                        <span className="text-xs text-ink-muted">acked</span>
                       ) : (
                         <button
                           onClick={() => handleAcknowledge(alert.alert_id)}
-                          className="text-xs bg-gray-800 hover:bg-gray-700 text-gray-300 px-2 py-1 rounded transition-colors"
+                          className="text-xs bg-raised hover:bg-gray-700 text-ink-2 px-2 py-1 rounded transition-colors"
                         >
                           Acknowledge
                         </button>
diff --git a/drb-frontend/app/faq/page.tsx b/drb-frontend/app/faq/page.tsx
index e4c2a66..080fda8 100644
--- a/drb-frontend/app/faq/page.tsx
+++ b/drb-frontend/app/faq/page.tsx
@@ -68,7 +68,7 @@ function ChevronIcon({ open }: { open: boolean }) {
     <svg
       width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
       strokeLinecap="round" strokeLinejoin="round"
-      className={`text-gray-500 shrink-0 transition-transform ${open ? "rotate-180" : ""}`}
+      className={`text-ink-muted shrink-0 transition-transform ${open ? "rotate-180" : ""}`}
     >
       <polyline points="6 9 12 15 18 9" />
     </svg>
@@ -83,10 +83,10 @@ export default function FaqPage() {
       <div className="text-center">
         <Badge tone="brand">FAQ</Badge>
         <h1 className="text-display-sm md:text-display text-white mt-5">Frequently asked questions</h1>
-        <p className="text-gray-400 mt-4">Can&apos;t find what you&apos;re looking for? Sign in and reach out from your account.</p>
+        <p className="text-ink-2 mt-4">Can&apos;t find what you&apos;re looking for? Sign in and reach out from your account.</p>
       </div>
 
-      <div className="mt-12 divide-y divide-gray-800 border-t border-b border-gray-800">
+      <div className="mt-12 divide-y divide-line border-t border-b border-line">
         {FAQS.map((item, i) => {
           const open = openIndex === i;
           return (
@@ -100,7 +100,7 @@ export default function FaqPage() {
                 <ChevronIcon open={open} />
               </button>
               {open && (
-                <div className="text-gray-400 text-sm leading-relaxed pb-5 pr-8 animate-fade-in">{item.a}</div>
+                <div className="text-ink-2 text-sm leading-relaxed pb-5 pr-8 animate-fade-in">{item.a}</div>
               )}
             </div>
           );
diff --git a/drb-frontend/app/features/page.tsx b/drb-frontend/app/features/page.tsx
index b1457b7..1ac9b0e 100644
--- a/drb-frontend/app/features/page.tsx
+++ b/drb-frontend/app/features/page.tsx
@@ -76,7 +76,7 @@ export default function FeaturesPage() {
       <div className="max-w-2xl">
         <Badge tone="brand">Features</Badge>
         <h1 className="text-display-sm md:text-display text-white mt-5">Everything between the radio and the map</h1>
-        <p className="text-gray-400 mt-4 leading-relaxed">
+        <p className="text-ink-2 mt-4 leading-relaxed">
           DRB is the pipeline from decoded radio traffic to a picture your team can act on: transcription,
           correlation, mapping, and a live relay — end to end.
         </p>
@@ -88,12 +88,12 @@ export default function FeaturesPage() {
             <div className="lg:col-span-2">
               <p className="text-indigo-400 text-xs font-mono uppercase tracking-wider font-semibold">{s.eyebrow}</p>
               <h2 className="text-white text-2xl font-bold mt-2">{s.title}</h2>
-              <p className="text-gray-400 mt-3 leading-relaxed">{s.body}</p>
+              <p className="text-ink-2 mt-3 leading-relaxed">{s.body}</p>
             </div>
             <Card padding="lg" className="lg:col-span-3">
               <ul className="space-y-3">
                 {s.points.map((p) => (
-                  <li key={p} className="flex items-start gap-3 text-sm text-gray-300">
+                  <li key={p} className="flex items-start gap-3 text-sm text-ink-2">
                     <span className="mt-1.5 w-1.5 h-1.5 rounded-full bg-indigo-500 shrink-0" />
                     {p}
                   </li>
@@ -107,7 +107,7 @@ export default function FeaturesPage() {
         ))}
       </div>
 
-      <div className="text-center mt-20 pt-16 border-t border-gray-800">
+      <div className="text-center mt-20 pt-16 border-t border-line">
         <h2 className="text-display-sm text-white">See it running on your own traffic</h2>
         <div className="mt-6">
           <LinkButton href="/login" size="lg">Get started</LinkButton>
diff --git a/drb-frontend/app/login/page.tsx b/drb-frontend/app/login/page.tsx
index 5d46326..104f241 100644
--- a/drb-frontend/app/login/page.tsx
+++ b/drb-frontend/app/login/page.tsx
@@ -87,30 +87,30 @@ export default function LoginPage() {
         <span className="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-indigo-600 text-white">D</span>
         DRB
       </Link>
-      <div className="bg-gray-900 border border-gray-700 rounded-xl p-8 space-y-5 font-mono">
+      <div className="bg-surface border border-line-strong rounded-xl p-8 space-y-5 font-mono">
         <h1 className="text-white text-lg font-bold">Sign in</h1>
 
         <form onSubmit={handleSubmit} className="space-y-4">
           <div>
-            <label className="text-xs text-gray-400 block mb-1">Email</label>
+            <label className="text-xs text-ink-2 block mb-1">Email</label>
             <input
               type="email"
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               required
               autoComplete="email"
-              className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+              className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
             />
           </div>
           <div>
-            <label className="text-xs text-gray-400 block mb-1">Password</label>
+            <label className="text-xs text-ink-2 block mb-1">Password</label>
             <input
               type="password"
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               required
               autoComplete="current-password"
-              className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+              className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
             />
           </div>
           {error && (
@@ -127,7 +127,7 @@ export default function LoginPage() {
 
         <div className="flex items-center gap-3">
           <div className="flex-1 h-px bg-gray-700" />
-          <span className="text-xs text-gray-500">or</span>
+          <span className="text-xs text-ink-muted">or</span>
           <div className="flex-1 h-px bg-gray-700" />
         </div>
 
@@ -146,7 +146,7 @@ export default function LoginPage() {
           Continue with Google
         </button>
 
-        <p className="text-center text-xs text-gray-500">
+        <p className="text-center text-xs text-ink-muted">
           Don&apos;t have an account?{" "}
           <Link href="/signup" className="text-indigo-400 hover:text-indigo-300 transition-colors">Sign up</Link>
         </p>
diff --git a/drb-frontend/app/nodes/[id]/page.tsx b/drb-frontend/app/nodes/[id]/page.tsx
index 5b09c10..e7e6c26 100644
--- a/drb-frontend/app/nodes/[id]/page.tsx
+++ b/drb-frontend/app/nodes/[id]/page.tsx
@@ -125,7 +125,7 @@ export default function NodeDetailPage() {
   }
 
   if (!node) {
-    return <p className="text-gray-500 font-mono text-sm">Loading node…</p>;
+    return <p className="text-ink-muted font-mono text-sm">Loading node…</p>;
   }
 
   const system = systemMap[node.assigned_system_id ?? ""];
@@ -135,7 +135,7 @@ export default function NodeDetailPage() {
       <div className="flex items-start justify-between">
         <div>
           <h1 className="text-xl font-bold text-white font-mono">{node.name}</h1>
-          <p className="text-gray-500 text-sm font-mono">{node.node_id}</p>
+          <p className="text-ink-muted text-sm font-mono">{node.node_id}</p>
         </div>
         <StatusBadge status={node.status} />
       </div>
@@ -147,7 +147,7 @@ export default function NodeDetailPage() {
             <span className="text-base">⚠</span>
             <span>Local System Override Active</span>
           </div>
-          <p className="text-gray-400 text-xs leading-relaxed">
+          <p className="text-ink-2 text-xs leading-relaxed">
             This node is operating on a local system override. 
             {node.override_timeout_at ? (
               <> Resets automatically on: <span className="text-white font-bold">{new Date(node.override_timeout_at).toLocaleString()}</span>.</>
@@ -189,7 +189,7 @@ export default function NodeDetailPage() {
       )}
 
       {/* Info */}
-      <div className="bg-gray-900 border border-gray-800 rounded-lg divide-y divide-gray-800 font-mono text-sm">
+      <div className="bg-surface border border-line rounded-lg divide-y divide-line font-mono text-sm">
         {[
           ["System",    system?.name ?? "Unassigned"],
           ["Location",  `${node.lat}, ${node.lon}`],
@@ -208,12 +208,12 @@ export default function NodeDetailPage() {
           ...(node.node_type !== "portable" ? [["Enforce Timeout", node.enforce_override_timeout ? "Yes" : "No"]] : []),
         ].map(([label, value]) => (
           <div key={label} className="flex justify-between px-4 py-2.5">
-            <span className="text-gray-500">{label}</span>
-            <span className="text-gray-200">{value}</span>
+            <span className="text-ink-muted">{label}</span>
+            <span className="text-ink">{value}</span>
           </div>
         ))}
         <div className="flex justify-between px-4 py-2.5">
-          <span className="text-gray-500">Approval</span>
+          <span className="text-ink-muted">Approval</span>
           <ApprovalBadge status={node.approval_status ?? null} />
         </div>
       </div>
@@ -232,7 +232,7 @@ export default function NodeDetailPage() {
           <button
             onClick={handleReject}
             disabled={approving}
-            className="px-4 py-2 bg-red-900 hover:bg-red-800 disabled:opacity-50 text-gray-300 rounded-lg text-sm font-mono transition-colors"
+            className="px-4 py-2 bg-red-900 hover:bg-red-800 disabled:opacity-50 text-ink-2 rounded-lg text-sm font-mono transition-colors"
           >
             Reject
           </button>
@@ -250,7 +250,7 @@ export default function NodeDetailPage() {
         <button
           disabled={sending}
           onClick={() => sendCommand("op25_restart")}
-          className="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-lg text-sm font-mono transition-colors disabled:opacity-50"
+          className="px-4 py-2 bg-raised hover:bg-gray-700 text-ink-2 rounded-lg text-sm font-mono transition-colors disabled:opacity-50"
         >
           Restart OP25
         </button>
@@ -258,7 +258,7 @@ export default function NodeDetailPage() {
           <button
             disabled={sending}
             onClick={handleRequestUpdate}
-            className="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-lg text-sm font-mono transition-colors disabled:opacity-50"
+            className="px-4 py-2 bg-raised hover:bg-gray-700 text-ink-2 rounded-lg text-sm font-mono transition-colors disabled:opacity-50"
           >
             Update Node Software
           </button>
@@ -283,16 +283,16 @@ export default function NodeDetailPage() {
 
       {/* Recent calls */}
       <section>
-        <h2 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">Recent Calls</h2>
+        <h2 className="text-sm font-semibold text-ink-2 uppercase tracking-wider mb-3">Recent Calls</h2>
         {/* Gate A / A2 (server-26#46) — each row expands to a transcript. */}
         {nodeCalls.length > 0 && <MachineOutputNotice variant="inline" className="mb-3" />}
         {nodeCalls.length === 0 ? (
-          <p className="text-gray-600 text-sm font-mono">No calls recorded from this node.</p>
+          <p className="text-ink-muted text-sm font-mono">No calls recorded from this node.</p>
         ) : (
           <div className="overflow-x-auto">
             <table className="w-full text-sm">
               <thead>
-                <tr className="text-xs text-gray-500 uppercase tracking-wider border-b border-gray-800">
+                <tr className="text-xs text-ink-muted uppercase tracking-wider border-b border-line">
                   <th className="px-4 py-2 text-left">Time</th>
                   <th className="px-4 py-2 text-left">Talkgroup</th>
                   <th className="px-4 py-2 text-left">System</th>
diff --git a/drb-frontend/app/nodes/page.tsx b/drb-frontend/app/nodes/page.tsx
index c72a3d7..fb5da95 100644
--- a/drb-frontend/app/nodes/page.tsx
+++ b/drb-frontend/app/nodes/page.tsx
@@ -65,7 +65,7 @@ export default function NodesPage() {
           <button
             onClick={handleUpdateAll}
             disabled={updatingAll}
-            className="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-lg text-sm font-mono transition-colors disabled:opacity-50"
+            className="px-4 py-2 bg-raised hover:bg-gray-700 text-ink-2 rounded-lg text-sm font-mono transition-colors disabled:opacity-50"
           >
             {updatingAll ? "Requesting…" : "Update All Nodes"}
           </button>
@@ -88,13 +88,13 @@ export default function NodesPage() {
       )}
 
       <div className="space-y-2">
-        <h2 className="text-sm font-semibold text-gray-400 uppercase tracking-wider">
+        <h2 className="text-sm font-semibold text-ink-2 uppercase tracking-wider">
           All Nodes ({nodes.length})
         </h2>
         {loading ? (
-          <p className="text-gray-600 text-sm font-mono">Loading…</p>
+          <p className="text-ink-muted text-sm font-mono">Loading…</p>
         ) : nodes.length === 0 ? (
-          <p className="text-gray-600 text-sm font-mono">No nodes registered yet. Boot a Pi to get started.</p>
+          <p className="text-ink-muted text-sm font-mono">No nodes registered yet. Boot a Pi to get started.</p>
         ) : (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
             {nodes.map((n) => (
diff --git a/drb-frontend/app/onboarding/page.tsx b/drb-frontend/app/onboarding/page.tsx
index 3ad9a73..aa48dbc 100644
--- a/drb-frontend/app/onboarding/page.tsx
+++ b/drb-frontend/app/onboarding/page.tsx
@@ -55,17 +55,17 @@ export default function OnboardingPage() {
 
   return (
     <div className="max-w-sm mx-auto pt-16">
-      <div className="bg-gray-900 border border-gray-700 rounded-xl p-8 space-y-5 font-mono">
+      <div className="bg-surface border border-line-strong rounded-xl p-8 space-y-5 font-mono">
         <div>
           <h1 className="text-white text-lg font-bold">Set up your organization</h1>
-          <p className="text-gray-400 text-xs mt-2 leading-relaxed">
+          <p className="text-ink-2 text-xs mt-2 leading-relaxed">
             One more step — name the organization your nodes, calls, and incidents will belong to. You can change this later.
           </p>
         </div>
 
         <form onSubmit={handleSubmit} className="space-y-4">
           <div>
-            <label className="text-xs text-gray-400 block mb-1">Organization name</label>
+            <label className="text-xs text-ink-2 block mb-1">Organization name</label>
             <input
               type="text"
               value={orgName}
@@ -73,7 +73,7 @@ export default function OnboardingPage() {
               required
               autoFocus
               placeholder="e.g. Riverside County Scanner"
-              className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+              className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
             />
           </div>
           {error && <p className="text-red-400 text-xs">{error}</p>}
diff --git a/drb-frontend/app/page.tsx b/drb-frontend/app/page.tsx
index 7d7102d..1a57eae 100644
--- a/drb-frontend/app/page.tsx
+++ b/drb-frontend/app/page.tsx
@@ -51,7 +51,7 @@ function MarketingHomePage() {
             <h1 className="text-display-sm md:text-display mt-5 text-white">
               See what&apos;s happening on the radio, as an incident — not a wall of calls.
             </h1>
-            <p className="text-gray-400 text-base md:text-lg mt-5 max-w-2xl leading-relaxed">
+            <p className="text-ink-2 text-base md:text-lg mt-5 max-w-2xl leading-relaxed">
               DRB turns field SDR nodes into a live public-safety picture: police/fire radio is decoded, transcribed,
               and correlated into incidents you can watch on a map or scrub back through in history — with a Discord
               bot to relay the audio live to your team.
@@ -68,7 +68,7 @@ function MarketingHomePage() {
       <section className="max-w-screen-xl mx-auto px-4 md:px-6 py-16 md:py-20">
         <div className="max-w-2xl mb-10">
           <h2 className="text-display-sm text-white">The unit of value is the incident</h2>
-          <p className="text-gray-400 mt-3">
+          <p className="text-ink-2 mt-3">
             A scanner feed is noise. DRB's job is to turn that noise into a small number of things you actually care
             about — and let you click into any one of them for the full picture.
           </p>
@@ -77,14 +77,14 @@ function MarketingHomePage() {
           {CAPABILITIES.map((c) => (
             <Card key={c.title} padding="lg" hover>
               <h3 className="text-white font-semibold">{c.title}</h3>
-              <p className="text-gray-400 text-sm mt-2 leading-relaxed">{c.body}</p>
+              <p className="text-ink-2 text-sm mt-2 leading-relaxed">{c.body}</p>
             </Card>
           ))}
         </div>
       </section>
 
       {/* How it works */}
-      <section className="border-t border-gray-800">
+      <section className="border-t border-line">
         <div className="max-w-screen-xl mx-auto px-4 md:px-6 py-16 md:py-20">
           <h2 className="text-display-sm text-white mb-10">How it works</h2>
           <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
@@ -92,7 +92,7 @@ function MarketingHomePage() {
               <div key={s.n}>
                 <p className="text-indigo-400 font-mono text-sm font-bold">{s.n}</p>
                 <h3 className="text-white font-semibold mt-2">{s.title}</h3>
-                <p className="text-gray-400 text-sm mt-2 leading-relaxed">{s.body}</p>
+                <p className="text-ink-2 text-sm mt-2 leading-relaxed">{s.body}</p>
               </div>
             ))}
           </div>
@@ -100,12 +100,12 @@ function MarketingHomePage() {
       </section>
 
       {/* Pricing — Gate A (minutes #42/#62): no price on a public surface. */}
-      <section className="border-t border-gray-800">
+      <section className="border-t border-line">
         <div className="max-w-screen-xl mx-auto px-4 md:px-6 py-16 md:py-20">
           <div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
             <div>
               <h2 className="text-display-sm text-white">Pricing is in development</h2>
-              <p className="text-gray-400 mt-2 max-w-xl">
+              <p className="text-ink-2 mt-2 max-w-xl">
                 We would rather talk to you about what you need than post a number we would have to
                 walk back. Tell us about your coverage area and we will figure it out together.
               </p>
@@ -118,10 +118,10 @@ function MarketingHomePage() {
       </section>
 
       {/* Final CTA */}
-      <section className="border-t border-gray-800">
+      <section className="border-t border-line">
         <div className="max-w-screen-xl mx-auto px-4 md:px-6 py-16 md:py-20 text-center">
           <h2 className="text-display-sm text-white">Bring your first node online</h2>
-          <p className="text-gray-400 mt-3 max-w-xl mx-auto">
+          <p className="text-ink-2 mt-3 max-w-xl mx-auto">
             Tell us about your coverage area. We will get you a node online and you will see incidents within minutes of your first call.
           </p>
           <div className="mt-8">
diff --git a/drb-frontend/app/pricing/page.tsx b/drb-frontend/app/pricing/page.tsx
index efa40a7..d25e98c 100644
--- a/drb-frontend/app/pricing/page.tsx
+++ b/drb-frontend/app/pricing/page.tsx
@@ -15,7 +15,7 @@ export default function PricingPage() {
     <div className="max-w-screen-xl mx-auto px-4 md:px-6 py-16 md:py-20">
       <div className="text-center max-w-2xl mx-auto">
         <h1 className="text-display-sm md:text-display text-white">Pricing is in development</h1>
-        <p className="text-gray-400 mt-4">
+        <p className="text-ink-2 mt-4">
           We are still working out what a fair price looks like for the people who actually use this.
           Rather than post a number we would have to walk back, we would rather talk to you about what
           you need and what it is worth.
@@ -24,7 +24,7 @@ export default function PricingPage() {
 
       <Card padding="lg" className="mt-12 max-w-2xl mx-auto">
         <h2 className="text-white text-lg font-bold">What you get today</h2>
-        <p className="text-gray-400 text-sm mt-2 leading-relaxed">
+        <p className="text-ink-2 text-sm mt-2 leading-relaxed">
           The full incident pipeline — transcription, correlation into incidents, mapping, and the
           Discord relay. Node counts, seats, and history length are set per account while we work out
           the plan structure.
@@ -35,7 +35,7 @@ export default function PricingPage() {
       </Card>
 
       <div className="text-center mt-16">
-        <p className="text-gray-400">
+        <p className="text-ink-2">
           Questions?{" "}
           <Link href="/faq" className="text-indigo-400 hover:text-indigo-300 transition-colors">Check the FAQ</Link>
           {" "}or{" "}
diff --git a/drb-frontend/app/privacy/page.tsx b/drb-frontend/app/privacy/page.tsx
index 1abf63e..4dc744e 100644
--- a/drb-frontend/app/privacy/page.tsx
+++ b/drb-frontend/app/privacy/page.tsx
@@ -63,18 +63,18 @@ export default function PrivacyPage() {
       </div>
 
       <h1 className="text-display-sm text-white">Privacy Policy</h1>
-      <p className="text-gray-500 text-sm mt-2 font-mono">Draft — last structured {new Date().getFullYear()}</p>
+      <p className="text-ink-muted text-sm mt-2 font-mono">Draft — last structured {new Date().getFullYear()}</p>
 
       <div className="mt-10 space-y-8">
         {SECTIONS.map((s) => (
           <section key={s.heading}>
             <h2 className="text-white font-semibold">{s.heading}</h2>
-            <p className="text-gray-500 text-sm mt-2 leading-relaxed italic">{s.note}</p>
+            <p className="text-ink-muted text-sm mt-2 leading-relaxed italic">{s.note}</p>
           </section>
         ))}
       </div>
 
-      <p className="text-gray-600 text-xs font-mono mt-16">
+      <p className="text-ink-muted text-xs font-mono mt-16">
         Questions in the meantime? <Link href="/faq" className="text-indigo-400 hover:text-indigo-300 transition-colors">Check the FAQ</Link> or{" "}
         <Link href="/login" className="text-indigo-400 hover:text-indigo-300 transition-colors">sign in to reach us directly</Link>.
       </p>
diff --git a/drb-frontend/app/profile/page.tsx b/drb-frontend/app/profile/page.tsx
index abc22b0..2a6d9fe 100644
--- a/drb-frontend/app/profile/page.tsx
+++ b/drb-frontend/app/profile/page.tsx
@@ -92,13 +92,13 @@ export default function ProfilePage() {
         <div>
           <h1 className="text-white text-xl font-bold">{displayName}</h1>
           {user.displayName && user.email && (
-            <p className="text-gray-400 text-sm mt-0.5">{user.email}</p>
+            <p className="text-ink-2 text-sm mt-0.5">{user.email}</p>
           )}
           {role && (
             <span className={`inline-block mt-1 text-xs font-mono px-2 py-0.5 rounded-full ${
               role === "admin"    ? "bg-indigo-900 text-indigo-300" :
               role === "operator" ? "bg-green-900 text-green-300" :
-                                    "bg-gray-800 text-gray-400"
+                                    "bg-raised text-ink-2"
             }`}>
               {role === "admin" ? "Admin" : role === "operator" ? "Operator" : "Viewer"}
             </span>
@@ -107,9 +107,9 @@ export default function ProfilePage() {
       </div>
 
       {/* Firebase account */}
-      <section className="bg-gray-900 border border-gray-800 rounded-xl divide-y divide-gray-800">
+      <section className="bg-surface border border-line rounded-xl divide-y divide-line">
         <div className="px-4 py-3">
-          <p className="text-xs text-gray-500 uppercase tracking-wider font-mono mb-2">Account</p>
+          <p className="text-xs text-ink-muted uppercase tracking-wider font-mono mb-2">Account</p>
           <div className="space-y-2">
             <Row label="Email" value={user.email ?? "—"} />
             <Row label="UID" value={user.uid} mono truncate />
@@ -125,12 +125,12 @@ export default function ProfilePage() {
       </section>
 
       {/* Discord linking */}
-      <section className="bg-gray-900 border border-gray-800 rounded-xl overflow-hidden">
+      <section className="bg-surface border border-line rounded-xl overflow-hidden">
         <div className="px-4 py-3">
-          <p className="text-xs text-gray-500 uppercase tracking-wider font-mono mb-3">Discord</p>
+          <p className="text-xs text-ink-muted uppercase tracking-wider font-mono mb-3">Discord</p>
 
           {linkLoading ? (
-            <p className="text-gray-500 text-sm">Loading…</p>
+            <p className="text-ink-muted text-sm">Loading…</p>
           ) : linkStatus?.linked ? (
             <div className="space-y-3">
               <div className="space-y-2">
@@ -156,21 +156,21 @@ export default function ProfilePage() {
             </div>
           ) : (
             <div className="space-y-3">
-              <p className="text-sm text-gray-400">
+              <p className="text-sm text-ink-2">
                 Link your Discord account to access private trips from both the web and Discord.
               </p>
               {code ? (
                 <div className="space-y-2">
-                  <div className="bg-gray-800 rounded-lg px-4 py-3 flex items-center gap-3">
+                  <div className="bg-raised rounded-lg px-4 py-3 flex items-center gap-3">
                     <span className="font-mono text-2xl tracking-[0.4em] text-white select-all">{code}</span>
                   </div>
-                  <p className="text-xs text-gray-400">
-                    Run <span className="font-mono text-gray-200">/link {code}</span> in Discord. Code expires in {codeExpiry} minutes.
+                  <p className="text-xs text-ink-2">
+                    Run <span className="font-mono text-ink">/link {code}</span> in Discord. Code expires in {codeExpiry} minutes.
                   </p>
                   <button
                     onClick={generateCode}
                     disabled={generating}
-                    className="text-xs text-gray-500 hover:text-gray-300 transition-colors disabled:opacity-50"
+                    className="text-xs text-ink-muted hover:text-ink transition-colors disabled:opacity-50"
                   >
                     Generate new code
                   </button>
@@ -190,9 +190,9 @@ export default function ProfilePage() {
       </section>
 
       {/* Sign out */}
-      <section className="bg-gray-900 border border-gray-800 rounded-xl">
+      <section className="bg-surface border border-line rounded-xl">
         <div className="px-4 py-3 flex items-center justify-between">
-          <p className="text-sm text-gray-400">Sign out of this device</p>
+          <p className="text-sm text-ink-2">Sign out of this device</p>
           <button
             onClick={handleSignOut}
             className="text-sm text-red-500 hover:text-red-400 transition-colors"
@@ -213,8 +213,8 @@ function Row({ label, value, mono = false, truncate = false }: {
 }) {
   return (
     <div className="flex items-start justify-between gap-4">
-      <span className="text-xs text-gray-500 shrink-0">{label}</span>
-      <span className={`text-sm text-gray-200 text-right ${mono ? "font-mono text-xs" : ""} ${truncate ? "truncate max-w-[200px]" : ""}`}>
+      <span className="text-xs text-ink-muted shrink-0">{label}</span>
+      <span className={`text-sm text-ink text-right ${mono ? "font-mono text-xs" : ""} ${truncate ? "truncate max-w-[200px]" : ""}`}>
         {value}
       </span>
     </div>
diff --git a/drb-frontend/app/settings/api-keys/page.tsx b/drb-frontend/app/settings/api-keys/page.tsx
index c41235b..ad7f107 100644
--- a/drb-frontend/app/settings/api-keys/page.tsx
+++ b/drb-frontend/app/settings/api-keys/page.tsx
@@ -39,11 +39,11 @@ function CreateKeyModal({ onClose, onCreated }: { onClose: () => void; onCreated
       <div className="fixed inset-0 z-50 bg-black/70 flex items-center justify-center p-4">
         <Card padding="lg" className="w-full max-w-lg space-y-4">
           <h2 className="text-white font-semibold">Key created</h2>
-          <p className="text-xs text-gray-400">
+          <p className="text-xs text-ink-2">
             Copy this key now — it won&apos;t be shown again. This is a sample key from the demo module in{" "}
-            <code className="text-gray-300">lib/apiKeys.ts</code>; it doesn&apos;t authenticate against anything.
+            <code className="text-ink-2">lib/apiKeys.ts</code>; it doesn&apos;t authenticate against anything.
           </p>
-          <div className="bg-gray-800 border border-gray-700 rounded-lg p-3">
+          <div className="bg-raised border border-line-strong rounded-lg p-3">
             <p className="text-xs text-indigo-300 break-all font-mono">{rawKey}</p>
           </div>
           <div className="flex gap-3">
@@ -61,11 +61,11 @@ function CreateKeyModal({ onClose, onCreated }: { onClose: () => void; onCreated
         <h2 className="text-white font-semibold mb-4">New API key</h2>
         <form onSubmit={handleSubmit} className="space-y-4">
           <div>
-            <label className="text-xs text-gray-400 block mb-1">Label</label>
+            <label className="text-xs text-ink-2 block mb-1">Label</label>
             <input
               required value={name} onChange={(e) => setName(e.target.value)}
               placeholder="e.g. Ops dashboard integration"
-              className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+              className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
             />
           </div>
           <div className="flex gap-3">
@@ -96,9 +96,9 @@ export default function ApiKeysSettingsPage() {
     <div className="space-y-4">
       <div className="bg-indigo-600/10 border border-indigo-600/40 rounded-xl p-4">
         <p className="text-indigo-300 text-sm font-semibold">Preview feature</p>
-        <p className="text-gray-400 text-xs mt-1 leading-relaxed">
+        <p className="text-ink-2 text-xs mt-1 leading-relaxed">
           Organization API keys aren&apos;t backed by a real endpoint yet — this screen runs against an in-memory
-          demo module (<code className="text-gray-300">lib/apiKeys.ts</code>) so the flow can be reviewed end to
+          demo module (<code className="text-ink-2">lib/apiKeys.ts</code>) so the flow can be reviewed end to
           end. See that file for the exact backend routes a real integration needs.
         </p>
       </div>
@@ -108,7 +108,7 @@ export default function ApiKeysSettingsPage() {
       )}
 
       <div className="flex items-center justify-between">
-        <p className="text-sm text-gray-500">{loading ? "Loading…" : `${active.length} active key${active.length !== 1 ? "s" : ""}`}</p>
+        <p className="text-sm text-ink-muted">{loading ? "Loading…" : `${active.length} active key${active.length !== 1 ? "s" : ""}`}</p>
         <Button size="sm" onClick={() => setShowCreate(true)}>+ Create key</Button>
       </div>
 
@@ -118,7 +118,7 @@ export default function ApiKeysSettingsPage() {
         <Card padding="none" className="overflow-hidden">
           <table className="w-full text-sm">
             <thead>
-              <tr className="text-xs text-gray-500 uppercase tracking-wider border-b border-gray-800 bg-gray-900">
+              <tr className="text-xs text-ink-muted uppercase tracking-wider border-b border-line bg-surface">
                 <th className="px-4 py-3 text-left">Label</th>
                 <th className="px-4 py-3 text-left">Key</th>
                 <th className="px-4 py-3 text-left hidden sm:table-cell">Created</th>
@@ -129,11 +129,11 @@ export default function ApiKeysSettingsPage() {
             </thead>
             <tbody>
               {keys.map((k) => (
-                <tr key={k.key_id} className="border-b border-gray-800 last:border-0">
+                <tr key={k.key_id} className="border-b border-line last:border-0">
                   <td className="px-4 py-3 text-white">{k.name}</td>
-                  <td className="px-4 py-3 text-gray-500 font-mono text-xs">{k.key_prefix}…</td>
-                  <td className="px-4 py-3 text-gray-400 text-xs hidden sm:table-cell">{fmtDate(k.created_at)}</td>
-                  <td className="px-4 py-3 text-gray-400 text-xs hidden sm:table-cell">{k.last_used_at ? fmtDate(k.last_used_at) : "Never"}</td>
+                  <td className="px-4 py-3 text-ink-muted font-mono text-xs">{k.key_prefix}…</td>
+                  <td className="px-4 py-3 text-ink-2 text-xs hidden sm:table-cell">{fmtDate(k.created_at)}</td>
+                  <td className="px-4 py-3 text-ink-2 text-xs hidden sm:table-cell">{k.last_used_at ? fmtDate(k.last_used_at) : "Never"}</td>
                   <td className="px-4 py-3">
                     {k.revoked ? <Badge tone="danger">Revoked</Badge> : <Badge tone="success">Active</Badge>}
                   </td>
diff --git a/drb-frontend/app/settings/billing/page.tsx b/drb-frontend/app/settings/billing/page.tsx
index 00e4d3b..0c3ad97 100644
--- a/drb-frontend/app/settings/billing/page.tsx
+++ b/drb-frontend/app/settings/billing/page.tsx
@@ -54,12 +54,12 @@ function UsageBar({ label, used, limit }: { label: string; used: number; limit:
   return (
     <div>
       <div className="flex items-baseline justify-between mb-1.5">
-        <span className="text-xs text-gray-400 font-mono">{label}</span>
-        <span className="text-xs font-mono text-gray-300">
+        <span className="text-xs text-ink-2 font-mono">{label}</span>
+        <span className="text-xs font-mono text-ink-2">
           {used} / {limit === "unlimited" ? "∞" : limit}
         </span>
       </div>
-      <div className="h-2 rounded-full bg-gray-800 overflow-hidden">
+      <div className="h-2 rounded-full bg-raised overflow-hidden">
         <div
           className={`h-full rounded-full transition-all ${nearLimit ? "bg-orange-500" : "bg-indigo-500"}`}
           style={{ width: limit === "unlimited" ? "8%" : `${pct}%` }}
@@ -142,7 +142,7 @@ export default function BillingSettingsPage() {
 
   return (
     <div className="space-y-6 max-w-4xl">
-      <p className="text-xs text-gray-600 font-mono">
+      <p className="text-xs text-ink-muted font-mono">
         Demo data — this page isn&apos;t connected to a live payment processor. See lib/billing.ts for the integration plan.
       </p>
 
@@ -164,7 +164,7 @@ export default function BillingSettingsPage() {
           <UsageBar label="Seats" used={usage.seatsUsed} limit={usage.seatsLimit} />
           <UsageBar label="Nodes" used={usage.nodesUsed} limit={usage.nodesLimit} />
         </div>
-        <div className="mt-5 pt-5 border-t border-gray-800">
+        <div className="mt-5 pt-5 border-t border-line">
           <Button variant="secondary" size="sm" onClick={handleManageBilling} disabled={portalBusy}>
             {portalBusy ? "Opening…" : "Manage payment method & invoices"}
           </Button>
@@ -179,10 +179,10 @@ export default function BillingSettingsPage() {
             return (
               <div
                 key={p.id}
-                className={`rounded-xl border p-4 flex flex-col ${p.highlighted ? "border-indigo-600/40" : "border-gray-800"}`}
+                className={`rounded-xl border p-4 flex flex-col ${p.highlighted ? "border-indigo-600/40" : "border-line"}`}
               >
                 <p className="text-white font-semibold text-sm">{p.name}</p>
-                <p className="text-gray-500 text-xs mt-1 flex-1">{p.tagline}</p>
+                <p className="text-ink-muted text-xs mt-1 flex-1">{p.tagline}</p>
                 {(UNBUILT_CLAIMS[p.id] ?? []).length > 0 && (
                   <div className="flex flex-wrap gap-1 mt-2">
                     {(UNBUILT_CLAIMS[p.id] ?? []).map((claim) => (
@@ -212,17 +212,17 @@ export default function BillingSettingsPage() {
       <Card>
         <CardHeader title="Invoice history" />
         {invoices.length === 0 ? (
-          <p className="text-gray-600 text-sm">No invoices yet.</p>
+          <p className="text-ink-muted text-sm">No invoices yet.</p>
         ) : (
-          <div className="divide-y divide-gray-800">
+          <div className="divide-y divide-line">
             {invoices.map((inv) => (
               <div key={inv.id} className="flex items-center justify-between gap-4 py-3">
                 <div className="min-w-0">
-                  <p className="text-gray-200 text-sm">{inv.description}</p>
-                  <p className="text-gray-600 text-xs font-mono">{fmtDate(inv.date)}</p>
+                  <p className="text-ink text-sm">{inv.description}</p>
+                  <p className="text-ink-muted text-xs font-mono">{fmtDate(inv.date)}</p>
                 </div>
                 <div className="flex items-center gap-3 shrink-0">
-                  <span className="text-gray-300 text-sm font-mono">${inv.amountUsd.toFixed(2)}</span>
+                  <span className="text-ink-2 text-sm font-mono">${inv.amountUsd.toFixed(2)}</span>
                   <Badge tone={INVOICE_TONE[inv.status]}>{inv.status}</Badge>
                 </div>
               </div>
diff --git a/drb-frontend/app/settings/layout.tsx b/drb-frontend/app/settings/layout.tsx
index adb46bd..e5cef79 100644
--- a/drb-frontend/app/settings/layout.tsx
+++ b/drb-frontend/app/settings/layout.tsx
@@ -43,15 +43,15 @@ export default function SettingsLayout({ children }: { children: React.ReactNode
         description="Organization profile, team access, node ownership, API keys, and billing."
       />
 
-      <div className="flex flex-wrap gap-1 bg-gray-900 border border-gray-800 rounded-lg p-1 w-fit max-w-full overflow-x-auto">
+      <div className="flex flex-wrap gap-1 bg-surface border border-line rounded-lg p-1 w-fit max-w-full overflow-x-auto">
         {[...TABS, ...(isAdmin ? ADMIN_TABS : [])].map((t) => (
           <Link
             key={t.href}
             href={t.href}
             className={`text-sm font-mono px-4 py-1.5 rounded-md transition-colors whitespace-nowrap ${
               pathname === t.href || pathname.startsWith(t.href + "/")
-                ? "bg-gray-800 text-white"
-                : "text-gray-500 hover:text-gray-300"
+                ? "bg-raised text-white"
+                : "text-ink-muted hover:text-ink"
             }`}
           >
             {t.label}
diff --git a/drb-frontend/app/settings/members/page.tsx b/drb-frontend/app/settings/members/page.tsx
index 2ed330f..7bf3f7f 100644
--- a/drb-frontend/app/settings/members/page.tsx
+++ b/drb-frontend/app/settings/members/page.tsx
@@ -46,8 +46,8 @@ function InviteModal({ onClose, onCreated }: { onClose: () => void; onCreated: (
       <div className="fixed inset-0 z-50 bg-black/70 flex items-center justify-center p-4">
         <Card padding="lg" className="w-full max-w-md space-y-4">
           <h2 className="text-white font-semibold">Member invited</h2>
-          <p className="text-xs text-gray-400">Share this one-time invite link so they can set their password. It expires after use.</p>
-          <div className="bg-gray-800 border border-gray-700 rounded-lg p-3">
+          <p className="text-xs text-ink-2">Share this one-time invite link so they can set their password. It expires after use.</p>
+          <div className="bg-raised border border-line-strong rounded-lg p-3">
             <p className="text-xs text-indigo-300 break-all">{inviteLink}</p>
           </div>
           <Button onClick={onClose} fullWidth>Done</Button>
@@ -62,18 +62,18 @@ function InviteModal({ onClose, onCreated }: { onClose: () => void; onCreated: (
         <h2 className="text-white font-semibold mb-4">Invite a member</h2>
         <form onSubmit={handleSubmit} className="space-y-4">
           <div>
-            <label className="text-xs text-gray-400 block mb-1">Email</label>
+            <label className="text-xs text-ink-2 block mb-1">Email</label>
             <input
               type="email" required value={email} onChange={(e) => setEmail(e.target.value)}
-              className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+              className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
               placeholder="teammate@example.com"
             />
           </div>
           <div>
-            <label className="text-xs text-gray-400 block mb-1">Role</label>
+            <label className="text-xs text-ink-2 block mb-1">Role</label>
             <select
               value={role} onChange={(e) => setRole(e.target.value as UserRole)}
-              className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+              className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
             >
               <option value="admin">Admin — full access</option>
               <option value="operator">Operator — owns nodes</option>
@@ -130,7 +130,7 @@ export default function MembersSettingsPage() {
       )}
 
       <div className="flex items-center justify-between">
-        <p className="text-sm text-gray-500">
+        <p className="text-sm text-ink-muted">
           {loading ? "Loading members…" : `${users.length} member${users.length !== 1 ? "s" : ""}`}
         </p>
         <Button size="sm" onClick={() => setShowInvite(true)}>+ Invite member</Button>
@@ -144,7 +144,7 @@ export default function MembersSettingsPage() {
         <Card padding="none" className="overflow-hidden">
           <table className="w-full text-sm">
             <thead>
-              <tr className="text-xs text-gray-500 uppercase tracking-wider border-b border-gray-800 bg-gray-900">
+              <tr className="text-xs text-ink-muted uppercase tracking-wider border-b border-line bg-surface">
                 <th className="px-4 py-3 text-left">Member</th>
                 <th className="px-4 py-3 text-left">Role</th>
                 <th className="px-4 py-3 text-left hidden sm:table-cell">Owned nodes</th>
@@ -155,10 +155,10 @@ export default function MembersSettingsPage() {
               {loading
                 ? Array.from({ length: 3 }).map((_, i) => <SkeletonRow key={i} cols={4} />)
                 : users.map((u) => (
-                    <tr key={u.uid} className="border-b border-gray-800 last:border-0">
+                    <tr key={u.uid} className="border-b border-line last:border-0">
                       <td className="px-4 py-3">
                         <p className="text-white">{u.display_name || u.email}</p>
-                        {u.display_name && <p className="text-gray-600 text-xs">{u.email}</p>}
+                        {u.display_name && <p className="text-ink-muted text-xs">{u.email}</p>}
                       </td>
                       <td className="px-4 py-3">
                         {u.uid === user?.uid ? (
@@ -168,7 +168,7 @@ export default function MembersSettingsPage() {
                             value={u.role}
                             disabled={savingUid === u.uid}
                             onChange={(e) => handleRoleChange(u, e.target.value as UserRole)}
-                            className="bg-gray-800 border border-gray-700 rounded-lg px-2 py-1 text-xs text-white focus:outline-none focus:border-indigo-500 disabled:opacity-50"
+                            className="bg-raised border border-line-strong rounded-lg px-2 py-1 text-xs text-white focus:outline-none focus:border-indigo-500 disabled:opacity-50"
                           >
                             <option value="admin">Admin</option>
                             <option value="operator">Operator</option>
@@ -176,7 +176,7 @@ export default function MembersSettingsPage() {
                           </select>
                         )}
                       </td>
-                      <td className="px-4 py-3 text-gray-400 text-xs hidden sm:table-cell">
+                      <td className="px-4 py-3 text-ink-2 text-xs hidden sm:table-cell">
                         {u.role === "operator" ? u.owned_node_ids.length : "—"}
                       </td>
                       <td className="px-4 py-3 hidden md:table-cell">
@@ -189,7 +189,7 @@ export default function MembersSettingsPage() {
         </Card>
       )}
 
-      <p className="text-xs text-gray-600 font-mono">
+      <p className="text-xs text-ink-muted font-mono">
         Need to disable or delete a member? Use the full user admin panel under Admin → Users.
       </p>
     </div>
diff --git a/drb-frontend/app/settings/nodes/page.tsx b/drb-frontend/app/settings/nodes/page.tsx
index 88b5814..31c07e6 100644
--- a/drb-frontend/app/settings/nodes/page.tsx
+++ b/drb-frontend/app/settings/nodes/page.tsx
@@ -114,7 +114,7 @@ function EnrollmentTokensPanel() {
           </p>
 
           <div className="flex items-start gap-2">
-            <p className="flex-1 text-xs text-indigo-100 font-mono break-all bg-gray-900 rounded px-2 py-1.5">{justMinted}</p>
+            <p className="flex-1 text-xs text-indigo-100 font-mono break-all bg-surface rounded px-2 py-1.5">{justMinted}</p>
             <button
               type="button"
               onClick={() => navigator.clipboard?.writeText(justMinted).then(() => {
@@ -133,7 +133,7 @@ function EnrollmentTokensPanel() {
               : <>(check the broker host)</>}:
           </p>
           <div className="flex items-start gap-2">
-            <pre className="flex-1 text-xs text-indigo-100 font-mono whitespace-pre-wrap break-all bg-gray-900 rounded px-2 py-1.5">{installCmd}</pre>
+            <pre className="flex-1 text-xs text-indigo-100 font-mono whitespace-pre-wrap break-all bg-surface rounded px-2 py-1.5">{installCmd}</pre>
             <button
               type="button"
               onClick={() => navigator.clipboard?.writeText(installCmd).then(() => {
@@ -163,7 +163,7 @@ function EnrollmentTokensPanel() {
             value={label}
             onChange={(e) => setLabel(e.target.value)}
             placeholder="Node ID, e.g. node-003"
-            className="flex-1 min-w-[12rem] bg-gray-800 border border-gray-700 rounded-lg px-3 py-1.5 text-white text-sm focus:outline-none focus:border-indigo-500"
+            className="flex-1 min-w-[12rem] bg-raised border border-line-strong rounded-lg px-3 py-1.5 text-white text-sm focus:outline-none focus:border-indigo-500"
           />
           <Button type="submit" size="sm" disabled={minting || !label.trim()}>
             {minting ? "Minting…" : "New token"}
@@ -176,11 +176,11 @@ function EnrollmentTokensPanel() {
           <SkeletonRow cols={1} />
         </div>
       ) : tokens.length === 0 ? (
-        <p className="text-gray-600 text-xs">No enrollment tokens yet.</p>
+        <p className="text-ink-muted text-xs">No enrollment tokens yet.</p>
       ) : (
         <table className="w-full text-sm">
           <thead>
-            <tr className="text-xs text-gray-500 uppercase tracking-wider border-b border-gray-800">
+            <tr className="text-xs text-ink-muted uppercase tracking-wider border-b border-line">
               <th className="py-2 text-left">Label</th>
               <th className="py-2 text-left hidden sm:table-cell">Created</th>
               <th className="py-2 text-left">Status</th>
@@ -189,14 +189,14 @@ function EnrollmentTokensPanel() {
           </thead>
           <tbody>
             {tokens.map((t) => (
-              <tr key={t.token_id} className="border-b border-gray-800 last:border-0">
+              <tr key={t.token_id} className="border-b border-line last:border-0">
                 <td className="py-2 text-white">{t.label}</td>
-                <td className="py-2 text-gray-500 text-xs hidden sm:table-cell">
+                <td className="py-2 text-ink-muted text-xs hidden sm:table-cell">
                   {new Date(t.created_at).toLocaleDateString()}
                 </td>
                 <td className="py-2 text-xs">
                   {t.revoked ? (
-                    <span className="text-gray-600">Revoked</span>
+                    <span className="text-ink-muted">Revoked</span>
                   ) : (
                     <span className="text-green-400">Active · {t.uses} use{t.uses !== 1 ? "s" : ""}</span>
                   )}
@@ -283,7 +283,7 @@ export default function NodeOwnershipSettingsPage() {
       <EnrollmentTokensPanel />
 
       <div className="space-y-4">
-        <p className="text-sm text-gray-500">
+        <p className="text-sm text-ink-muted">
           Assign each node to the operator responsible for it. Operators only see and manage the nodes assigned to them here.
         </p>
 
@@ -292,7 +292,7 @@ export default function NodeOwnershipSettingsPage() {
       <Card padding="none" className="overflow-hidden">
         <table className="w-full text-sm">
           <thead>
-            <tr className="text-xs text-gray-500 uppercase tracking-wider border-b border-gray-800 bg-gray-900">
+            <tr className="text-xs text-ink-muted uppercase tracking-wider border-b border-line bg-surface">
               <th className="px-4 py-3 text-left">Node</th>
               <th className="px-4 py-3 text-left hidden sm:table-cell">Status</th>
               <th className="px-4 py-3 text-left">Owner</th>
@@ -302,17 +302,17 @@ export default function NodeOwnershipSettingsPage() {
             {loading ? (
               Array.from({ length: 3 }).map((_, i) => <SkeletonRow key={i} cols={3} />)
             ) : nodes.length === 0 ? (
-              <tr><td colSpan={3} className="px-4 py-8 text-center text-gray-600 text-sm">No nodes registered yet.</td></tr>
+              <tr><td colSpan={3} className="px-4 py-8 text-center text-ink-muted text-sm">No nodes registered yet.</td></tr>
             ) : (
               nodes.map((n) => {
                 const owner = ownerByNode.get(n.node_id);
                 return (
-                  <tr key={n.node_id} className="border-b border-gray-800 last:border-0">
+                  <tr key={n.node_id} className="border-b border-line last:border-0">
                     <td className="px-4 py-3">
                       <Link href={`/nodes/${n.node_id}`} className="text-white hover:text-indigo-300 transition-colors">
                         {n.name}
                       </Link>
-                      <p className="text-gray-600 text-xs font-mono">{n.node_id}</p>
+                      <p className="text-ink-muted text-xs font-mono">{n.node_id}</p>
                     </td>
                     <td className="px-4 py-3 hidden sm:table-cell"><StatusBadge status={n.status} /></td>
                     <td className="px-4 py-3">
@@ -320,7 +320,7 @@ export default function NodeOwnershipSettingsPage() {
                         value={owner?.uid ?? UNASSIGNED}
                         disabled={savingNodeId === n.node_id}
                         onChange={(e) => reassign(n.node_id, e.target.value)}
-                        className="bg-gray-800 border border-gray-700 rounded-lg px-2 py-1.5 text-xs text-white focus:outline-none focus:border-indigo-500 disabled:opacity-50 max-w-[14rem]"
+                        className="bg-raised border border-line-strong rounded-lg px-2 py-1.5 text-xs text-white focus:outline-none focus:border-indigo-500 disabled:opacity-50 max-w-[14rem]"
                       >
                         <option value={UNASSIGNED}>Unassigned</option>
                         {assignable.map((u) => (
diff --git a/drb-frontend/app/settings/organization/page.tsx b/drb-frontend/app/settings/organization/page.tsx
index ac7d2a2..c975c54 100644
--- a/drb-frontend/app/settings/organization/page.tsx
+++ b/drb-frontend/app/settings/organization/page.tsx
@@ -16,7 +16,7 @@ import { PreferredBotsCard } from "@/components/discord/PreferredBotsCard";
 function StatTile({ label, value }: { label: string; value: string | number }) {
   return (
     <div>
-      <p className="text-xs text-gray-500 uppercase tracking-wider font-mono">{label}</p>
+      <p className="text-xs text-ink-muted uppercase tracking-wider font-mono">{label}</p>
       <p className="text-2xl font-bold text-white font-mono mt-1">{value}</p>
     </div>
   );
@@ -69,12 +69,12 @@ export default function OrganizationSettingsPage() {
         />
         <div className="space-y-4">
           <div>
-            <label className="text-xs text-gray-400 block mb-1">Organization name</label>
+            <label className="text-xs text-ink-2 block mb-1">Organization name</label>
             <input
               value={orgName}
               disabled={orgLoading || !canEdit}
               onChange={(e) => setOrgName(e.target.value)}
-              className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500 disabled:opacity-50"
+              className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500 disabled:opacity-50"
             />
           </div>
           {saveError && <p className="text-red-400 text-xs">{saveError}</p>}
@@ -110,7 +110,7 @@ export default function OrganizationSettingsPage() {
             value={sub ? sub.status.replace("_", " ") : "—"}
           />
         </div>
-        <div className="mt-5 pt-5 border-t border-gray-800 flex items-center gap-4 text-sm">
+        <div className="mt-5 pt-5 border-t border-line flex items-center gap-4 text-sm">
           <Link href="/settings/billing" className="text-indigo-400 hover:text-indigo-300 transition-colors">
             Manage plan & billing →
           </Link>
@@ -124,7 +124,7 @@ export default function OrganizationSettingsPage() {
 
       <PreferredBotsCard canEdit={canEdit} />
 
-      <div className="bg-gray-900 border border-red-800/60 rounded-xl p-5">
+      <div className="bg-surface border border-red-800/60 rounded-xl p-5">
         <CardHeader title="Danger zone" subtitle="Destructive organization-level actions." />
         <div className="flex flex-wrap gap-3">
           <Button variant="danger" size="sm" disabled title="Not available in this build — contact support">
diff --git a/drb-frontend/app/signup/page.tsx b/drb-frontend/app/signup/page.tsx
index ed28807..9406bdc 100644
--- a/drb-frontend/app/signup/page.tsx
+++ b/drb-frontend/app/signup/page.tsx
@@ -61,23 +61,23 @@ export default function SignupPage() {
         <span className="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-indigo-600 text-white">D</span>
         DRB
       </Link>
-      <div className="bg-gray-900 border border-gray-700 rounded-xl p-8 space-y-5 font-mono">
+      <div className="bg-surface border border-line-strong rounded-xl p-8 space-y-5 font-mono">
         <h1 className="text-white text-lg font-bold">Create your account</h1>
 
         <form onSubmit={handleSubmit} className="space-y-4">
           <div>
-            <label className="text-xs text-gray-400 block mb-1">Email</label>
+            <label className="text-xs text-ink-2 block mb-1">Email</label>
             <input
               type="email"
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               required
               autoComplete="email"
-              className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+              className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
             />
           </div>
           <div>
-            <label className="text-xs text-gray-400 block mb-1">Password</label>
+            <label className="text-xs text-ink-2 block mb-1">Password</label>
             <input
               type="password"
               value={password}
@@ -85,7 +85,7 @@ export default function SignupPage() {
               required
               minLength={6}
               autoComplete="new-password"
-              className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+              className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
             />
           </div>
           {error && (
@@ -102,7 +102,7 @@ export default function SignupPage() {
 
         <div className="flex items-center gap-3">
           <div className="flex-1 h-px bg-gray-700" />
-          <span className="text-xs text-gray-500">or</span>
+          <span className="text-xs text-ink-muted">or</span>
           <div className="flex-1 h-px bg-gray-700" />
         </div>
 
@@ -121,7 +121,7 @@ export default function SignupPage() {
           Continue with Google
         </button>
 
-        <p className="text-center text-xs text-gray-500">
+        <p className="text-center text-xs text-ink-muted">
           Already have an account?{" "}
           <Link href="/login" className="text-indigo-400 hover:text-indigo-300 transition-colors">Sign in</Link>
         </p>
diff --git a/drb-frontend/app/systems/page.tsx b/drb-frontend/app/systems/page.tsx
index 84c62b5..d13b63f 100644
--- a/drb-frontend/app/systems/page.tsx
+++ b/drb-frontend/app/systems/page.tsx
@@ -438,17 +438,17 @@ function RRImportModal({
 
   return (
     <div className="fixed inset-0 z-50 bg-black/70 flex items-center justify-center p-4">
-      <div className="bg-gray-900 border border-gray-700 rounded-xl w-full max-w-lg max-h-[90vh] flex flex-col font-mono">
+      <div className="bg-surface border border-line-strong rounded-xl w-full max-w-lg max-h-[90vh] flex flex-col font-mono">
         {/* Header */}
-        <div className="px-5 pt-5 pb-4 border-b border-gray-800">
+        <div className="px-5 pt-5 pb-4 border-b border-line">
           <h2 className="text-white font-semibold">{system.name}</h2>
-          <p className="text-xs text-gray-500 mt-0.5">
+          <p className="text-xs text-ink-muted mt-0.5">
             {system.systemType}{system.location ? ` · ${system.location}` : ""}
           </p>
           {system.sysIds && (
-            <p className="text-xs text-gray-600 mt-0.5">System IDs: {system.sysIds}</p>
+            <p className="text-xs text-ink-muted mt-0.5">System IDs: {system.sysIds}</p>
           )}
-          <p className="text-xs text-gray-500 mt-1">
+          <p className="text-xs text-ink-muted mt-1">
             {system.categories.length} categor{system.categories.length !== 1 ? "ies" : "y"} · {total} talkgroups
           </p>
         </div>
@@ -456,7 +456,7 @@ function RRImportModal({
         {/* Category list */}
         <div className="flex-1 overflow-y-auto px-5 py-4 space-y-1.5">
           <div className="flex items-center justify-between mb-2">
-            <p className="text-xs text-gray-400 uppercase tracking-wider">Talkgroup Categories</p>
+            <p className="text-xs text-ink-2 uppercase tracking-wider">Talkgroup Categories</p>
             <div className="flex gap-3 text-xs text-indigo-400">
               <button
                 type="button"
@@ -480,18 +480,18 @@ function RRImportModal({
                 type="checkbox"
                 checked={selected.has(cat.name)}
                 onChange={() => toggle(cat.name)}
-                className="rounded border-gray-600 bg-gray-800 accent-indigo-500"
+                className="rounded border-line-strong bg-raised accent-indigo-500"
               />
-              <span className="text-sm text-gray-200 flex-1 group-hover:text-white transition-colors truncate">
+              <span className="text-sm text-ink flex-1 group-hover:text-white transition-colors truncate">
                 {cat.name}
               </span>
-              <span className="text-xs text-gray-600 shrink-0">{cat.talkgroups.length} TGs</span>
+              <span className="text-xs text-ink-muted shrink-0">{cat.talkgroups.length} TGs</span>
             </label>
           ))}
         </div>
 
         {/* Footer */}
-        <div className="px-5 pb-5 pt-4 border-t border-gray-800 flex gap-3">
+        <div className="px-5 pb-5 pt-4 border-t border-line flex gap-3">
           <button
             type="button"
             onClick={handleImport}
@@ -503,7 +503,7 @@ function RRImportModal({
           <button
             type="button"
             onClick={onCancel}
-            className="flex-1 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-lg py-2 text-sm transition-colors"
+            className="flex-1 bg-raised hover:bg-gray-700 text-ink-2 rounded-lg py-2 text-sm transition-colors"
           >
             Cancel
           </button>
@@ -533,10 +533,10 @@ function LocalKnowledgeField({
   multiline?: boolean;
 }) {
   const cls =
-    "w-full mt-0.5 bg-gray-900 border border-gray-700 rounded px-2 py-1 text-white text-xs focus:outline-none focus:border-indigo-500";
+    "w-full mt-0.5 bg-surface border border-line-strong rounded px-2 py-1 text-white text-xs focus:outline-none focus:border-indigo-500";
   return (
     <label className="block">
-      <span className="text-xs text-gray-500 font-sans">{label}</span>
+      <span className="text-xs text-ink-muted font-sans">{label}</span>
       {multiline ? (
         <textarea
           value={value}
@@ -656,8 +656,8 @@ function TalkgroupEditor({
       )}
 
       <div className="flex items-center justify-between">
-        <label className="text-xs text-gray-400">
-          Talkgroups{talkgroups.length > 0 && <span className="text-gray-600 ml-1">({talkgroups.length})</span>}
+        <label className="text-xs text-ink-2">
+          Talkgroups{talkgroups.length > 0 && <span className="text-ink-muted ml-1">({talkgroups.length})</span>}
         </label>
         <div className="flex gap-3">
           {/* RadioReference file import */}
@@ -704,10 +704,10 @@ function TalkgroupEditor({
       )}
 
       {showPaste && (
-        <div className="space-y-2 p-3 bg-gray-800 rounded-lg border border-gray-700">
-          <p className="text-xs text-gray-500">
+        <div className="space-y-2 p-3 bg-raised rounded-lg border border-line-strong">
+          <p className="text-xs text-ink-muted">
             Paste rows from RadioReference — tab- or comma-separated:{" "}
-            <span className="text-gray-400">ID, Name, Tag</span>
+            <span className="text-ink-2">ID, Name, Tag</span>
             <br />Tags: fire · police · ems · transit · public works · other
           </p>
           <textarea
@@ -715,7 +715,7 @@ function TalkgroupEditor({
             onChange={(e) => setPasteText(e.target.value)}
             rows={6}
             placeholder={"1234\tFire Dispatch\tfire\n5678\tPolice Zone 1\tpolice\n9012\tEMS\tems"}
-            className="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-white text-xs font-mono focus:outline-none focus:border-indigo-500"
+            className="w-full bg-surface border border-line-strong rounded px-3 py-2 text-white text-xs font-mono focus:outline-none focus:border-indigo-500"
           />
           <button
             type="button"
@@ -729,10 +729,10 @@ function TalkgroupEditor({
       )}
 
       {talkgroups.length > 0 ? (
-        <div className="border border-gray-800 rounded-lg overflow-hidden">
+        <div className="border border-line rounded-lg overflow-hidden">
           <table className="w-full text-xs font-mono">
             <thead>
-              <tr className="bg-gray-800 text-gray-400">
+              <tr className="bg-raised text-ink-2">
                 <th className="px-3 py-1.5 text-left w-20">Dec ID</th>
                 <th className="px-3 py-1.5 text-left">Name</th>
                 <th className="px-3 py-1.5 text-left w-28">Tag</th>
@@ -742,7 +742,7 @@ function TalkgroupEditor({
             <tbody>
               {talkgroups.map((tg, i) => (
                 <Fragment key={i}>
-                <tr className="border-t border-gray-800 hover:bg-gray-800/30">
+                <tr className="border-t border-line hover:bg-raised/30">
                   <td className="px-2 py-1">
                     <input
                       value={tg.id}
@@ -763,7 +763,7 @@ function TalkgroupEditor({
                     <select
                       value={tg.tag}
                       onChange={(e) => updateRow(i, "tag", e.target.value)}
-                      className="w-full bg-gray-900 text-gray-300 focus:outline-none rounded px-1"
+                      className="w-full bg-surface text-ink-2 focus:outline-none rounded px-1"
                     >
                       {TG_TAGS.map((t) => (
                         <option key={t} value={t}>{t}</option>
@@ -776,7 +776,7 @@ function TalkgroupEditor({
                       title="Local knowledge for the transcript corrector"
                       onClick={() => setExpanded(expanded === i ? null : i)}
                       className={`transition-colors font-bold mr-2 ${
-                        hasLocalKnowledge(tg) ? "text-indigo-400" : "text-gray-600 hover:text-gray-300"
+                        hasLocalKnowledge(tg) ? "text-indigo-400" : "text-ink-muted hover:text-ink"
                       }`}
                     >
                       {expanded === i ? "▾" : "▸"}
@@ -784,7 +784,7 @@ function TalkgroupEditor({
                     <button
                       type="button"
                       onClick={() => removeRow(i)}
-                      className="text-gray-600 hover:text-red-400 transition-colors font-bold"
+                      className="text-ink-muted hover:text-red-400 transition-colors font-bold"
                     >
                       ×
                     </button>
@@ -794,11 +794,11 @@ function TalkgroupEditor({
                     talkgroups and most inherit the system's context rather than
                     override it. */}
                 {expanded === i && (
-                  <tr className="border-t border-gray-800 bg-gray-900/60">
+                  <tr className="border-t border-line bg-surface/60">
                     <td colSpan={4} className="px-3 py-3">
-                      <p className="text-xs text-gray-500 mb-2 font-sans">
+                      <p className="text-xs text-ink-muted mb-2 font-sans">
                         Given to the transcript corrector for this talkgroup only, ranked
-                        <span className="text-gray-300"> above</span> the system&apos;s own list.
+                        <span className="text-ink-2"> above</span> the system&apos;s own list.
                         Leave blank to inherit the system&apos;s.
                       </p>
                       <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
@@ -849,7 +849,7 @@ function TalkgroupEditor({
           </table>
         </div>
       ) : (
-        <p className="text-xs text-gray-600 italic py-1">
+        <p className="text-xs text-ink-muted italic py-1">
           No talkgroups — add rows, paste from RadioReference, or use the RadioReference import button.
         </p>
       )}
@@ -864,52 +864,52 @@ function P25Form({ value, onChange }: { value: P25Config; onChange: (v: P25Confi
     <div className="space-y-4">
       <div className="grid grid-cols-3 gap-3">
         <div>
-          <label className="text-xs text-gray-400 block mb-1">NAC (hex)</label>
+          <label className="text-xs text-ink-2 block mb-1">NAC (hex)</label>
           <input
             value={value.nac}
             onChange={(e) => onChange({ ...value, nac: e.target.value })}
-            className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm font-mono focus:outline-none focus:border-indigo-500"
+            className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm font-mono focus:outline-none focus:border-indigo-500"
             placeholder="0x293"
           />
         </div>
         <div>
-          <label className="text-xs text-gray-400 block mb-1">System ID</label>
+          <label className="text-xs text-ink-2 block mb-1">System ID</label>
           <input
             value={value.system_id}
             onChange={(e) => onChange({ ...value, system_id: e.target.value })}
-            className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm font-mono focus:outline-none focus:border-indigo-500"
+            className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm font-mono focus:outline-none focus:border-indigo-500"
             placeholder="50513"
           />
         </div>
         <div>
-          <label className="text-xs text-gray-400 block mb-1">WACN (hex)</label>
+          <label className="text-xs text-ink-2 block mb-1">WACN (hex)</label>
           <input
             value={value.wacn}
             onChange={(e) => onChange({ ...value, wacn: e.target.value })}
-            className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm font-mono focus:outline-none focus:border-indigo-500"
+            className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm font-mono focus:outline-none focus:border-indigo-500"
             placeholder="0xBEE00"
           />
         </div>
       </div>
       <div>
-        <label className="text-xs text-gray-400 block mb-1">
-          Control Channels <span className="text-gray-600">(MHz, comma-separated)</span>
+        <label className="text-xs text-ink-2 block mb-1">
+          Control Channels <span className="text-ink-muted">(MHz, comma-separated)</span>
         </label>
         <input
           value={value.control_channels}
           onChange={(e) => onChange({ ...value, control_channels: e.target.value })}
-          className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm font-mono focus:outline-none focus:border-indigo-500"
+          className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm font-mono focus:outline-none focus:border-indigo-500"
           placeholder="851.0125, 851.5125, 852.0125"
         />
       </div>
       <div>
-        <label className="text-xs text-gray-400 block mb-1">
-          Voice Channels <span className="text-gray-600">(MHz, comma-separated — leave blank for auto-discovery)</span>
+        <label className="text-xs text-ink-2 block mb-1">
+          Voice Channels <span className="text-ink-muted">(MHz, comma-separated — leave blank for auto-discovery)</span>
         </label>
         <input
           value={value.voice_channels}
           onChange={(e) => onChange({ ...value, voice_channels: e.target.value })}
-          className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm font-mono focus:outline-none focus:border-indigo-500"
+          className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm font-mono focus:outline-none focus:border-indigo-500"
           placeholder="Optional"
         />
       </div>
@@ -923,7 +923,7 @@ function P25Form({ value, onChange }: { value: P25Config; onChange: (v: P25Confi
 
 // ── Fixed-channel editors (node-26#24) ────────────────────────────────────────
 
-const INPUT = "w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm font-mono focus:outline-none focus:border-indigo-500";
+const INPUT = "w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm font-mono focus:outline-none focus:border-indigo-500";
 
 function ConventionalForm({ value, onChange }: { value: P25Config; onChange: (v: P25Config) => void }) {
   const chs = value.channels;
@@ -931,13 +931,13 @@ function ConventionalForm({ value, onChange }: { value: P25Config; onChange: (v:
     onChange({ ...value, channels: chs.map((ch, j) => (j === i ? { ...ch, [field]: v } : ch)) });
   return (
     <div className="space-y-4">
-      <p className="text-xs text-gray-500">
+      <p className="text-xs text-ink-muted">
         Fixed voice channels with no control channel — RadioReference lists them as conventional
         frequencies with mode P25 (or &quot;DE&quot;). A node decodes up to {MAX_CONVENTIONAL_CHANNELS} on
         one SDR, within about 1.5 MHz of each other. Each channel&apos;s calls are labelled with its name.
       </p>
       <div className="space-y-2">
-        <div className="grid grid-cols-[1fr_1.5fr_0.8fr_auto] gap-2 text-xs text-gray-400">
+        <div className="grid grid-cols-[1fr_1.5fr_0.8fr_auto] gap-2 text-xs text-ink-2">
           <span>Frequency (MHz)</span>
           <span>Channel name</span>
           <span>NAC (hex, optional)</span>
@@ -992,7 +992,7 @@ function ConventionalForm({ value, onChange }: { value: P25Config; onChange: (v:
         talkgroups={value.talkgroups}
         onChange={(tgs) => onChange({ ...value, talkgroups: tgs })}
       />
-      <p className="text-xs text-gray-600 -mt-2">
+      <p className="text-xs text-ink-muted -mt-2">
         Talkgroups are optional here: only needed if the radios send distinct talkgroup IDs you want named.
       </p>
     </div>
@@ -1004,7 +1004,7 @@ function AnalogForm({ value, onChange }: { value: AnalogConfig; onChange: (v: An
   return (
     <div className="grid grid-cols-2 gap-3">
       <div>
-        <label htmlFor="analog-freq" className="text-xs text-gray-400 block mb-1">Frequency (MHz)</label>
+        <label htmlFor="analog-freq" className="text-xs text-ink-2 block mb-1">Frequency (MHz)</label>
         <input
           id="analog-freq"
           value={ch.freq}
@@ -1016,7 +1016,7 @@ function AnalogForm({ value, onChange }: { value: AnalogConfig; onChange: (v: An
         />
       </div>
       <div>
-        <label htmlFor="analog-name" className="text-xs text-gray-400 block mb-1">Channel name</label>
+        <label htmlFor="analog-name" className="text-xs text-ink-2 block mb-1">Channel name</label>
         <input
           id="analog-name"
           value={ch.name}
@@ -1124,27 +1124,27 @@ function SystemForm({
   const title = initial && !createOnly ? "Edit System" : createOnly ? "Duplicate System" : "New System";
 
   return (
-    <form onSubmit={handleSubmit} className="bg-gray-900 border border-gray-700 rounded-xl p-5 space-y-4 font-mono">
+    <form onSubmit={handleSubmit} className="bg-surface border border-line-strong rounded-xl p-5 space-y-4 font-mono">
       <h3 className="text-white font-semibold">{title}</h3>
 
       <div className="grid grid-cols-2 gap-3">
         <div>
-          <label className="text-xs text-gray-400 block mb-1">Name</label>
+          <label className="text-xs text-ink-2 block mb-1">Name</label>
           <input
             value={name}
             onChange={(e) => setName(e.target.value)}
             required
-            className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+            className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
             placeholder="Westchester County P25"
           />
         </div>
         <div>
-          <label htmlFor="system-kind" className="text-xs text-gray-400 block mb-1">Type</label>
+          <label htmlFor="system-kind" className="text-xs text-ink-2 block mb-1">Type</label>
           <select
             id="system-kind"
             value={kind}
             onChange={(e) => handleKindChange(e.target.value as SystemKind)}
-            className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+            className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
           >
             {KIND_OPTIONS.map((o) => (
               <option key={o.value} value={o.value}>{o.label}</option>
@@ -1165,12 +1165,12 @@ function SystemForm({
         <AnalogForm value={analog} onChange={setAnalog} />
       ) : (
         <div>
-          <label className="text-xs text-gray-400 block mb-1">Config (JSON)</label>
+          <label className="text-xs text-ink-2 block mb-1">Config (JSON)</label>
           <textarea
             value={rawJson}
             onChange={(e) => setRawJson(e.target.value)}
             rows={10}
-            className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-xs font-mono focus:outline-none focus:border-indigo-500"
+            className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-xs font-mono focus:outline-none focus:border-indigo-500"
           />
         </div>
       )}
@@ -1179,7 +1179,7 @@ function SystemForm({
         <button
           type="button"
           onClick={toggleRaw}
-          className="text-xs text-gray-600 hover:text-gray-400 transition-colors"
+          className="text-xs text-ink-muted hover:text-ink-2 transition-colors"
         >
           {showRaw ? "← Use structured form" : "Edit raw JSON →"}
         </button>
@@ -1198,7 +1198,7 @@ function SystemForm({
         <button
           type="button"
           onClick={onCancel}
-          className="flex-1 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-lg py-2 text-sm transition-colors"
+          className="flex-1 bg-raised hover:bg-gray-700 text-ink-2 rounded-lg py-2 text-sm transition-colors"
         >
           Cancel
         </button>
@@ -1267,10 +1267,10 @@ function PreferredTokenPanel({ systemId, initialTokenId }: { systemId: string; i
   const currentToken = tokens?.find((t) => t.token_id === preferredId);
 
   return (
-    <div className="mt-3 border-t border-gray-800 pt-3">
+    <div className="mt-3 border-t border-line pt-3">
       <button
         onClick={toggle}
-        className="text-xs text-gray-500 hover:text-gray-300 font-mono transition-colors flex items-center gap-1"
+        className="text-xs text-ink-muted hover:text-ink font-mono transition-colors flex items-center gap-1"
       >
         <span>{open ? "▲" : "▼"}</span>
         <span>
@@ -1282,14 +1282,14 @@ function PreferredTokenPanel({ systemId, initialTokenId }: { systemId: string; i
       {open && (
         <div className="mt-3 space-y-2 font-mono text-xs">
           {tokens === null ? (
-            <p className="text-gray-600 italic">Loading tokens…</p>
+            <p className="text-ink-muted italic">Loading tokens…</p>
           ) : error ? (
             <p className="text-red-400">{error}</p>
           ) : tokens.length === 0 ? (
-            <p className="text-gray-600 italic">No tokens in pool.</p>
+            <p className="text-ink-muted italic">No tokens in pool.</p>
           ) : (
             <>
-              <p className="text-gray-600">
+              <p className="text-ink-muted">
                 When a node on this system joins a voice channel, this token is tried first.
               </p>
               <div className="space-y-1.5">
@@ -1303,7 +1303,7 @@ function PreferredTokenPanel({ systemId, initialTokenId }: { systemId: string; i
                       disabled={saving}
                       className="accent-indigo-500"
                     />
-                    <span className={`flex-1 ${t.in_use && preferredId !== t.token_id ? "text-gray-600" : "text-gray-300"}`}>
+                    <span className={`flex-1 ${t.in_use && preferredId !== t.token_id ? "text-ink-muted" : "text-ink-2"}`}>
                       {t.name}
                       {t.in_use && <span className="ml-1.5 text-green-600">in use</span>}
                     </span>
@@ -1314,13 +1314,13 @@ function PreferredTokenPanel({ systemId, initialTokenId }: { systemId: string; i
                 <button
                   onClick={handleClear}
                   disabled={saving}
-                  className="text-gray-600 hover:text-gray-400 transition-colors disabled:opacity-50"
+                  className="text-ink-muted hover:text-ink-2 transition-colors disabled:opacity-50"
                 >
                   Clear preference (use any free token)
                 </button>
               )}
               {!preferredId && (
-                <p className="text-gray-700">No preference — any free token will be used.</p>
+                <p className="text-ink-muted">No preference — any free token will be used.</p>
               )}
               {currentToken && (
                 <p className="text-indigo-500">Preferred: {currentToken.name}</p>
@@ -1371,10 +1371,10 @@ function AiFlagsPanel({ systemId, initial }: { systemId: string; initial: System
   ];
 
   return (
-    <div className="mt-3 border-t border-gray-800 pt-3">
+    <div className="mt-3 border-t border-line pt-3">
       <button
         onClick={() => setOpen((v) => !v)}
-        className="text-xs text-gray-500 hover:text-gray-300 font-mono transition-colors flex items-center gap-1"
+        className="text-xs text-ink-muted hover:text-ink font-mono transition-colors flex items-center gap-1"
       >
         <span>{open ? "▲" : "▼"}</span>
         <span>AI Flags</span>
@@ -1400,23 +1400,23 @@ function AiFlagsPanel({ systemId, initial }: { systemId: string; initial: System
                 >
                   <span className={`inline-block h-3.5 w-3.5 rounded-full bg-white shadow transition-transform ${isOn ? "translate-x-4" : "translate-x-0.5"}`} />
                 </button>
-                <span className="text-gray-300 flex-1">{label}</span>
+                <span className="text-ink-2 flex-1">{label}</span>
                 {isSet ? (
                   <button
                     onClick={() => handleClear(key)}
                     disabled={saving === key}
-                    className="text-gray-600 hover:text-gray-400 transition-colors"
+                    className="text-ink-muted hover:text-ink-2 transition-colors"
                     title="Clear override (inherit global)"
                   >
                     reset
                   </button>
                 ) : (
-                  <span className="text-gray-700">inherits global</span>
+                  <span className="text-ink-muted">inherits global</span>
                 )}
               </div>
             );
           })}
-          <p className="text-gray-700 pt-1">Overrides apply on top of global AI flags. "reset" restores global default.</p>
+          <p className="text-ink-muted pt-1">Overrides apply on top of global AI flags. "reset" restores global default.</p>
         </div>
       )}
     </div>
@@ -1456,15 +1456,15 @@ function SourceCallPlayer({ callId }: { callId: string }) {
         {loading ? "loading…" : open ? "▲ source" : "▶ source"}
       </button>
       {open && call && (
-        <div className="mt-1.5 space-y-1 pl-2 border-l border-gray-700">
+        <div className="mt-1.5 space-y-1 pl-2 border-l border-line-strong">
           {call.audio_url ? (
             <audio src={call.audio_url} controls className="w-full" style={{ height: "1.75rem" }} />
           ) : (
-            <p className="text-gray-600 italic">No audio</p>
+            <p className="text-ink-muted italic">No audio</p>
           )}
           {transcript && (
             <>
-              <p className="text-gray-500 italic line-clamp-2">{transcript}</p>
+              <p className="text-ink-muted italic line-clamp-2">{transcript}</p>
               {/* Gate A / A2 (server-26#46) — this is a raw pipeline transcript. */}
               <MachineOutputNotice variant="inline" className="text-[10px]" />
             </>
@@ -1528,16 +1528,16 @@ function AreaContextPanel({ systemId }: { systemId: string }) {
     : 0;
 
   return (
-    <div className="mt-3 border-t border-gray-800 pt-3">
+    <div className="mt-3 border-t border-line pt-3">
       <button
         onClick={toggle}
-        className="text-xs text-gray-500 hover:text-gray-300 font-mono transition-colors flex items-center gap-1"
+        className="text-xs text-ink-muted hover:text-ink font-mono transition-colors flex items-center gap-1"
       >
         <span>{open ? "▲" : "▼"}</span>
         <span>
           Local Area
           {area !== null && (
-            <span className="text-gray-600 ml-1">
+            <span className="text-ink-muted ml-1">
               ({filled > 0 ? `${filled} field${filled === 1 ? "" : "s"} set` : "not set"})
             </span>
           )}
@@ -1546,16 +1546,16 @@ function AreaContextPanel({ systemId }: { systemId: string }) {
 
       {open && (
         <div className="mt-3 space-y-3 text-xs">
-          {loading && <p className="text-gray-600 italic font-mono">Loading…</p>}
+          {loading && <p className="text-ink-muted italic font-mono">Loading…</p>}
           {area && (
             <>
-              <p className="text-gray-500">
+              <p className="text-ink-muted">
                 Given to the transcript corrector for every talkgroup on this system.
                 Whisper mishears local names constantly — naming them here is what lets
                 them be put back.
               </p>
-              <p className="text-gray-500">
-                Fill this in <span className="text-gray-300">only if it is true of every
+              <p className="text-ink-muted">
+                Fill this in <span className="text-ink-2">only if it is true of every
                 talkgroup</span> on the system. One town, one department — fill it once here.
                 A system spanning several counties — leave it blank and describe each
                 talkgroup in the edit form instead.
@@ -1592,7 +1592,7 @@ function AreaContextPanel({ systemId }: { systemId: string }) {
               {/* The anchor is the backend's answer to what was typed above, and
                   it decides whether location checking runs at all — so it is
                   worth showing rather than leaving as invisible state. */}
-              <p className="text-gray-600 font-mono">{anchorLabel(area)}</p>
+              <p className="text-ink-muted font-mono">{anchorLabel(area)}</p>
               <button
                 type="button"
                 onClick={save}
@@ -1659,16 +1659,16 @@ function TalkgroupPendingPanel({ systemId }: { systemId: string }) {
   const total = (rows ?? []).reduce((n, r) => n + r.pending.length, 0);
 
   return (
-    <div className="mt-3 border-t border-gray-800 pt-3">
+    <div className="mt-3 border-t border-line pt-3">
       <button
         onClick={toggle}
-        className="text-xs text-gray-500 hover:text-gray-300 font-mono transition-colors flex items-center gap-1"
+        className="text-xs text-ink-muted hover:text-ink font-mono transition-colors flex items-center gap-1"
       >
         <span>{open ? "▲" : "▼"}</span>
         <span>
           Proposed Terms
           {rows !== null && (
-            <span className={total > 0 ? "text-indigo-400 ml-1" : "text-gray-600 ml-1"}>
+            <span className={total > 0 ? "text-indigo-400 ml-1" : "text-ink-muted ml-1"}>
               ({total > 0 ? `${total} awaiting review` : "none"})
             </span>
           )}
@@ -1677,9 +1677,9 @@ function TalkgroupPendingPanel({ systemId }: { systemId: string }) {
 
       {open && (
         <div className="mt-3 space-y-3 text-xs">
-          {rows === null && <p className="text-gray-600 italic font-mono">Loading…</p>}
+          {rows === null && <p className="text-ink-muted italic font-mono">Loading…</p>}
           {rows !== null && total === 0 && (
-            <p className="text-gray-600 italic">
+            <p className="text-ink-muted italic">
               Nothing proposed yet. Terms appear here when a corrected place name
               turns out to be real nearby, or when the induction loop spots one in
               recent traffic.
@@ -1687,19 +1687,19 @@ function TalkgroupPendingPanel({ systemId }: { systemId: string }) {
           )}
           {(rows ?? []).map((row) => (
             <div key={row.talkgroup_id}>
-              <p className="text-gray-400 font-mono mb-1">
+              <p className="text-ink-2 font-mono mb-1">
                 {row.talkgroup_name || `TGID ${row.talkgroup_id}`}
               </p>
               <ul className="space-y-1">
                 {row.pending.map((p) => (
                   <li
                     key={p.term}
-                    className="flex items-start gap-2 bg-gray-900/60 border border-gray-800 rounded px-2 py-1"
+                    className="flex items-start gap-2 bg-surface/60 border border-line rounded px-2 py-1"
                   >
                     <span className="flex-1">
                       <span className="text-white font-mono">{p.term}</span>
-                      {p.meaning && <span className="text-gray-500"> — {p.meaning}</span>}
-                      <span className="text-gray-700 ml-2">{p.source}</span>
+                      {p.meaning && <span className="text-ink-muted"> — {p.meaning}</span>}
+                      <span className="text-ink-muted ml-2">{p.source}</span>
                     </span>
                     <button
                       type="button"
@@ -1713,7 +1713,7 @@ function TalkgroupPendingPanel({ systemId }: { systemId: string }) {
                       type="button"
                       disabled={busy === `${row.talkgroup_id}:${p.term}`}
                       onClick={() => act(row.talkgroup_id, p.term, false)}
-                      className="text-gray-600 hover:text-red-400 disabled:opacity-40 font-semibold"
+                      className="text-ink-muted hover:text-red-400 disabled:opacity-40 font-semibold"
                     >
                       Drop
                     </button>
@@ -1802,16 +1802,16 @@ function VocabularyPanel({ systemId }: { systemId: string }) {
   }
 
   return (
-    <div className="mt-3 border-t border-gray-800 pt-3">
+    <div className="mt-3 border-t border-line pt-3">
       <button
         onClick={toggle}
-        className="text-xs text-gray-500 hover:text-gray-300 font-mono transition-colors flex items-center gap-1"
+        className="text-xs text-ink-muted hover:text-ink font-mono transition-colors flex items-center gap-1"
       >
         <span>{open ? "▲" : "▼"}</span>
         <span>
           Vocabulary
           {vocab !== null && (
-            <span className="text-gray-600 ml-1">
+            <span className="text-ink-muted ml-1">
               ({vocab.length} terms{pending.length > 0 ? `, ${pending.length} pending` : ""})
             </span>
           )}
@@ -1820,7 +1820,7 @@ function VocabularyPanel({ systemId }: { systemId: string }) {
 
       {open && (
         <div className="mt-3 space-y-3 font-mono text-xs">
-          {loading && <p className="text-gray-600 italic">Loading…</p>}
+          {loading && <p className="text-ink-muted italic">Loading…</p>}
 
           {!loading && vocab !== null && (
             <>
@@ -1832,19 +1832,19 @@ function VocabularyPanel({ systemId }: { systemId: string }) {
                 >
                   {bootstrapping ? "Bootstrapping…" : bootstrapped ? "Re-bootstrap with AI" : "Bootstrap with AI"}
                 </button>
-                <span className="text-gray-600">GPT-4o generates local knowledge (agencies, units, streets)</span>
+                <span className="text-ink-muted">GPT-4o generates local knowledge (agencies, units, streets)</span>
               </div>
 
               <div>
-                <p className="text-gray-500 uppercase tracking-wider mb-1.5">Approved ({vocab.length})</p>
+                <p className="text-ink-muted uppercase tracking-wider mb-1.5">Approved ({vocab.length})</p>
                 {vocab.length > 0 ? (
                   <div className="flex flex-wrap gap-1.5">
                     {vocab.map((term) => (
-                      <span key={term} className="inline-flex items-center gap-1 bg-gray-800 text-gray-300 px-2 py-0.5 rounded-full">
+                      <span key={term} className="inline-flex items-center gap-1 bg-raised text-ink-2 px-2 py-0.5 rounded-full">
                         {term}
                         <button
                           onClick={() => handleRemove(term)}
-                          className="text-gray-600 hover:text-red-400 transition-colors leading-none"
+                          className="text-ink-muted hover:text-red-400 transition-colors leading-none"
                         >
                           ×
                         </button>
@@ -1852,7 +1852,7 @@ function VocabularyPanel({ systemId }: { systemId: string }) {
                     ))}
                   </div>
                 ) : (
-                  <p className="text-gray-600 italic">No terms yet — bootstrap or add manually.</p>
+                  <p className="text-ink-muted italic">No terms yet — bootstrap or add manually.</p>
                 )}
               </div>
 
@@ -1861,12 +1861,12 @@ function VocabularyPanel({ systemId }: { systemId: string }) {
                   value={newTerm}
                   onChange={(e) => setNewTerm(e.target.value)}
                   placeholder="Add term (e.g. 5-baker, YVAC)"
-                  className="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-3 py-1.5 text-white text-xs font-mono focus:outline-none focus:border-indigo-500"
+                  className="flex-1 bg-raised border border-line-strong rounded-lg px-3 py-1.5 text-white text-xs font-mono focus:outline-none focus:border-indigo-500"
                 />
                 <button
                   type="submit"
                   disabled={adding || !newTerm.trim()}
-                  className="bg-gray-700 hover:bg-gray-600 disabled:opacity-50 text-gray-200 px-3 py-1.5 rounded-lg transition-colors"
+                  className="bg-gray-700 hover:bg-gray-600 disabled:opacity-50 text-ink px-3 py-1.5 rounded-lg transition-colors"
                 >
                   Add
                 </button>
@@ -1874,17 +1874,17 @@ function VocabularyPanel({ systemId }: { systemId: string }) {
 
               {pending.length > 0 && (
                 <div>
-                  <p className="text-gray-500 uppercase tracking-wider mb-1.5">
+                  <p className="text-ink-muted uppercase tracking-wider mb-1.5">
                     Induction suggestions ({pending.length})
                   </p>
                   <div className="space-y-2">
                     {pending.map((p) => (
                       <div key={p.term} className="space-y-1">
                         <div className="flex items-center gap-2">
-                          <span className="text-gray-300 flex-1">{p.term}</span>
-                          <span className="text-gray-600">{p.source}</span>
+                          <span className="text-ink-2 flex-1">{p.term}</span>
+                          <span className="text-ink-muted">{p.source}</span>
                           <button onClick={() => handleApprove(p.term)} className="text-green-500 hover:text-green-400 transition-colors px-1">✓</button>
-                          <button onClick={() => handleDismiss(p.term)} className="text-gray-600 hover:text-red-400 transition-colors px-1">✕</button>
+                          <button onClick={() => handleDismiss(p.term)} className="text-ink-muted hover:text-red-400 transition-colors px-1">✕</button>
                         </div>
                         {p.source_call_ids && p.source_call_ids.length > 0 && (
                           <div className="pl-1 space-y-1">
@@ -1970,9 +1970,9 @@ export default function SystemsPage() {
       )}
 
       {loading ? (
-        <p className="text-gray-600 text-sm font-mono">Loading…</p>
+        <p className="text-ink-muted text-sm font-mono">Loading…</p>
       ) : systems.length === 0 ? (
-        <p className="text-gray-600 text-sm font-mono">No systems defined yet.</p>
+        <p className="text-ink-muted text-sm font-mono">No systems defined yet.</p>
       ) : (
         <div className="space-y-3">
           {systems.map((s) => {
@@ -1987,13 +1987,13 @@ export default function SystemsPage() {
               ? (s.config.channels as unknown[]).length
               : null;
             return (
-              <div key={s.system_id} className="bg-gray-900 border border-gray-800 rounded-lg p-4 font-mono">
+              <div key={s.system_id} className="bg-surface border border-line rounded-lg p-4 font-mono">
                 <div className="flex items-start justify-between">
                   <div>
                     <p className="text-white font-semibold">{s.name}</p>
-                    <p className="text-xs text-gray-500">{s.system_id}</p>
+                    <p className="text-xs text-ink-muted">{s.system_id}</p>
                     {(s.config.nac || ccCount !== null || chCount !== null || tgCount !== null) && (
-                      <p className="text-xs text-gray-600 mt-0.5 space-x-2">
+                      <p className="text-xs text-ink-muted mt-0.5 space-x-2">
                         {!!s.config.nac && <span>NAC {String(s.config.nac)}</span>}
                         {ccCount !== null && <span>· {ccCount} CC</span>}
                         {chCount !== null && <span>· {chCount} ch</span>}
@@ -2001,7 +2001,7 @@ export default function SystemsPage() {
                       </p>
                     )}
                   </div>
-                  <span className="text-xs bg-gray-800 border border-gray-700 text-gray-400 px-2 py-0.5 rounded">
+                  <span className="text-xs bg-raised border border-line-strong text-ink-2 px-2 py-0.5 rounded">
                     {kindLabel(s)}
                   </span>
                 </div>
@@ -2014,7 +2014,7 @@ export default function SystemsPage() {
                   </button>
                   <button
                     onClick={() => openDuplicate(s)}
-                    className="text-xs text-gray-500 hover:text-gray-300 transition-colors"
+                    className="text-xs text-ink-muted hover:text-ink transition-colors"
                   >
                     Duplicate
                   </button>
diff --git a/drb-frontend/app/terms/page.tsx b/drb-frontend/app/terms/page.tsx
index 82a3f32..7912eaa 100644
--- a/drb-frontend/app/terms/page.tsx
+++ b/drb-frontend/app/terms/page.tsx
@@ -69,18 +69,18 @@ export default function TermsPage() {
       </div>
 
       <h1 className="text-display-sm text-white">Terms of Service</h1>
-      <p className="text-gray-500 text-sm mt-2 font-mono">Draft — last structured {new Date().getFullYear()}</p>
+      <p className="text-ink-muted text-sm mt-2 font-mono">Draft — last structured {new Date().getFullYear()}</p>
 
       <div className="mt-10 space-y-8">
         {SECTIONS.map((s) => (
           <section key={s.heading}>
             <h2 className="text-white font-semibold">{s.heading}</h2>
-            <p className="text-gray-500 text-sm mt-2 leading-relaxed italic">{s.note}</p>
+            <p className="text-ink-muted text-sm mt-2 leading-relaxed italic">{s.note}</p>
           </section>
         ))}
       </div>
 
-      <p className="text-gray-600 text-xs font-mono mt-16">
+      <p className="text-ink-muted text-xs font-mono mt-16">
         Questions in the meantime? <Link href="/faq" className="text-indigo-400 hover:text-indigo-300 transition-colors">Check the FAQ</Link> or{" "}
         <Link href="/login" className="text-indigo-400 hover:text-indigo-300 transition-colors">sign in to reach us directly</Link>.
       </p>
diff --git a/drb-frontend/app/trips/[id]/page.tsx b/drb-frontend/app/trips/[id]/page.tsx
index 47d9d76..35ab560 100644
--- a/drb-frontend/app/trips/[id]/page.tsx
+++ b/drb-frontend/app/trips/[id]/page.tsx
@@ -141,7 +141,7 @@ function PlaceSearch({
           onChange={(e) => setQuery(e.target.value)}
           onKeyDown={(e) => e.key === "Enter" && (e.preventDefault(), search())}
           placeholder="Search a place…"
-          className="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+          className="flex-1 bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
         />
         <button
           type="button"
@@ -153,7 +153,7 @@ function PlaceSearch({
         </button>
       </div>
       {results.length > 0 && (
-        <div className="bg-gray-800 border border-gray-700 rounded-lg overflow-hidden divide-y divide-gray-700">
+        <div className="bg-raised border border-line-strong rounded-lg overflow-hidden divide-y divide-line-strong">
           {results.map((p) => (
             <button
               key={p.place_id}
@@ -162,7 +162,7 @@ function PlaceSearch({
               className="w-full text-left px-3 py-2 hover:bg-gray-700 transition-colors"
             >
               <p className="text-white text-sm font-medium">{p.name}</p>
-              <p className="text-gray-400 text-xs">{p.address}</p>
+              <p className="text-ink-2 text-xs">{p.address}</p>
               {p.rating && (
                 <p className="text-yellow-400 text-xs">★ {p.rating}</p>
               )}
@@ -240,60 +240,60 @@ function AddEventModal({
     <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4">
       <form
         onSubmit={handleSubmit}
-        className="bg-gray-900 border border-gray-700 rounded-xl p-6 w-full max-w-lg space-y-4 max-h-[90vh] overflow-y-auto"
+        className="bg-surface border border-line-strong rounded-xl p-6 w-full max-w-lg space-y-4 max-h-[90vh] overflow-y-auto"
       >
         <h2 className="text-white font-bold text-lg">{isEdit ? "Edit Event" : "Add Event"}</h2>
 
         <div>
-          <label className="text-xs text-gray-400 block mb-1">Title</label>
+          <label className="text-xs text-ink-2 block mb-1">Title</label>
           <input
             required value={title} onChange={(e) => setTitle(e.target.value)}
             placeholder="Dinner at the bar"
-            className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+            className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
           />
         </div>
 
         <div className="grid grid-cols-3 gap-3">
           <div>
-            <label className="text-xs text-gray-400 block mb-1">Date</label>
+            <label className="text-xs text-ink-2 block mb-1">Date</label>
             <input
               required type="date"
               min={trip.start_date} max={trip.end_date}
               value={date} onChange={(e) => setDate(e.target.value)}
-              className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+              className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
             />
           </div>
           <div>
-            <label className="text-xs text-gray-400 block mb-1">Start</label>
+            <label className="text-xs text-ink-2 block mb-1">Start</label>
             <input
               type="time" value={startTime} onChange={(e) => setStartTime(e.target.value)}
-              className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+              className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
             />
           </div>
           <div>
-            <label className="text-xs text-gray-400 block mb-1">End</label>
+            <label className="text-xs text-ink-2 block mb-1">End</label>
             <input
               type="time" value={endTime} onChange={(e) => setEndTime(e.target.value)}
               min={startTime}
-              className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+              className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
             />
           </div>
         </div>
 
         <div>
-          <label className="text-xs text-gray-400 block mb-1">Find a place</label>
+          <label className="text-xs text-ink-2 block mb-1">Find a place</label>
           <PlaceSearch near={trip.location} onSelect={handlePlaceSelect} />
         </div>
 
         <div>
-          <label className="text-xs text-gray-400 block mb-1">
+          <label className="text-xs text-ink-2 block mb-1">
             Location{" "}
-            <span className="text-gray-600">(auto-filled from search, or type manually)</span>
+            <span className="text-ink-muted">(auto-filled from search, or type manually)</span>
           </label>
           <input
             value={location} onChange={(e) => setLocation(e.target.value)}
             placeholder={`Inherits: ${trip.location}`}
-            className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+            className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
           />
         </div>
 
@@ -307,16 +307,16 @@ function AddEventModal({
         )}
 
         <div>
-          <label className="text-xs text-gray-400 block mb-1">Notes (optional)</label>
+          <label className="text-xs text-ink-2 block mb-1">Notes (optional)</label>
           <textarea
             value={notes} onChange={(e) => setNotes(e.target.value)} rows={2}
-            className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none resize-none"
+            className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm focus:outline-none resize-none"
           />
         </div>
 
         {availableTags.length > 0 && (
           <div>
-            <label className="text-xs text-gray-400 block mb-1">Tags</label>
+            <label className="text-xs text-ink-2 block mb-1">Tags</label>
             <div className="flex flex-wrap gap-1.5">
               {availableTags.map((tag) => {
                 const active = tags.includes(tag);
@@ -326,7 +326,7 @@ function AddEventModal({
                     type="button"
                     onClick={() => setTags((prev) => active ? prev.filter((t) => t !== tag) : [...prev, tag])}
                     className={`text-xs rounded-full px-2.5 py-1 border transition-colors ${
-                      active ? tagColor(tag, availableTags) : "bg-gray-800 text-gray-500 border-gray-700 hover:border-gray-600 hover:text-gray-400"
+                      active ? tagColor(tag, availableTags) : "bg-raised text-ink-muted border-line-strong hover:border-line-strong hover:text-ink-2"
                     }`}
                   >
                     {tag}
@@ -340,7 +340,7 @@ function AddEventModal({
         {error && <p className="text-red-400 text-xs">{error}</p>}
 
         <div className="flex gap-3 justify-end pt-1">
-          <button type="button" onClick={onClose} className="text-sm text-gray-400 hover:text-gray-200 px-4 py-2">
+          <button type="button" onClick={onClose} className="text-sm text-ink-2 hover:text-ink px-4 py-2">
             Cancel
           </button>
           <button
@@ -389,7 +389,7 @@ function DayTimeline({
 
   if (timed.length === 0 && untimed.length === 0) {
     return (
-      <p className="text-gray-600 text-sm font-mono py-8 text-center">
+      <p className="text-ink-muted text-sm font-mono py-8 text-center">
         No events on this day yet.
       </p>
     );
@@ -424,10 +424,10 @@ function DayTimeline({
               style={{ top: (h * 60 - rangeStart) * PX_PER_MIN }}
               className="absolute inset-x-0 flex items-center pointer-events-none"
             >
-              <span className="w-14 text-right pr-3 text-xs text-gray-600 font-mono shrink-0 -translate-y-2">
+              <span className="w-14 text-right pr-3 text-xs text-ink-muted font-mono shrink-0 -translate-y-2">
                 {h === 0 ? "12 AM" : h < 12 ? `${h} AM` : h === 12 ? "12 PM" : `${h - 12} PM`}
               </span>
-              <div className="flex-1 border-t border-gray-800/70" />
+              <div className="flex-1 border-t border-line/70" />
             </div>
           ))}
 
@@ -444,7 +444,7 @@ function DayTimeline({
                 {e.end_time && (
                   <div
                     style={{ top, height, left: 60, right: 0 }}
-                    className="absolute bg-gray-800/30 border-l-2 border-gray-600/30 z-0 pointer-events-none"
+                    className="absolute bg-raised/30 border-l-2 border-line-strong/30 z-0 pointer-events-none"
                   />
                 )}
                 {/* Dashed marker line + label */}
@@ -452,15 +452,15 @@ function DayTimeline({
                   style={{ top, left: 60, right: 0 }}
                   className="absolute z-10 flex items-center gap-2"
                 >
-                  <div className="flex-1 border-t border-dashed border-gray-600/40" />
-                  <span className="text-gray-500 text-[10px] font-mono shrink-0 pr-1">
+                  <div className="flex-1 border-t border-dashed border-line-strong/40" />
+                  <span className="text-ink-muted text-[10px] font-mono shrink-0 pr-1">
                     {fmtTime(e.start_time)}
                   </span>
-                  <span className="text-gray-500 text-[10px] truncate max-w-[120px] shrink-0">{e.title}</span>
+                  <span className="text-ink-muted text-[10px] truncate max-w-[120px] shrink-0">{e.title}</span>
                   {isAdmin && (
                     <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
-                      <button onClick={() => onEdit(e)} className="text-gray-600 hover:text-indigo-400 text-[10px]">Edit</button>
-                      <button onClick={() => onDelete(e.event_id)} className="text-gray-600 hover:text-red-400 text-xs leading-none">×</button>
+                      <button onClick={() => onEdit(e)} className="text-ink-muted hover:text-indigo-400 text-[10px]">Edit</button>
+                      <button onClick={() => onDelete(e.event_id)} className="text-ink-muted hover:text-red-400 text-xs leading-none">×</button>
                     </div>
                   )}
                 </div>
@@ -498,10 +498,10 @@ function DayTimeline({
                         </p>
                       )}
                       {height >= 60 && !e.location_inherited && e.location && (
-                        <p className="text-gray-500 text-xs mt-0.5 truncate">{e.location}</p>
+                        <p className="text-ink-muted text-xs mt-0.5 truncate">{e.location}</p>
                       )}
                       {height >= 60 && e.notes && (
-                        <p className="text-gray-600 text-xs mt-0.5 italic truncate">{e.notes}</p>
+                        <p className="text-ink-muted text-xs mt-0.5 italic truncate">{e.notes}</p>
                       )}
                       {e.tags?.length > 0 && (
                         <div className="flex flex-wrap gap-1 mt-1">
@@ -525,13 +525,13 @@ function DayTimeline({
                         <>
                           <button
                             onClick={() => onEdit(e)}
-                            className="text-gray-600 hover:text-indigo-400 text-xs opacity-0 group-hover:opacity-100 transition-opacity"
+                            className="text-ink-muted hover:text-indigo-400 text-xs opacity-0 group-hover:opacity-100 transition-opacity"
                           >
                             Edit
                           </button>
                           <button
                             onClick={() => onDelete(e.event_id)}
-                            className="text-gray-600 hover:text-red-400 text-base leading-none opacity-0 group-hover:opacity-100 transition-opacity"
+                            className="text-ink-muted hover:text-red-400 text-base leading-none opacity-0 group-hover:opacity-100 transition-opacity"
                           >
                             ×
                           </button>
@@ -543,9 +543,9 @@ function DayTimeline({
                 {drive && (
                   <div
                     style={{ top: top + height + 2, left: 60 }}
-                    className="absolute text-xs text-gray-600 font-mono flex items-center gap-1 z-20"
+                    className="absolute text-xs text-ink-muted font-mono flex items-center gap-1 z-20"
                   >
-                    <span className="text-gray-700">↓</span> {drive} drive
+                    <span className="text-ink-muted">↓</span> {drive} drive
                   </div>
                 )}
               </div>
@@ -557,18 +557,18 @@ function DayTimeline({
       {/* Untimed / all-day events */}
       {untimed.length > 0 && (
         <div className="space-y-1.5">
-          <p className="text-xs font-mono text-gray-600 uppercase tracking-wider">Unscheduled</p>
+          <p className="text-xs font-mono text-ink-muted uppercase tracking-wider">Unscheduled</p>
           {untimed.map((e) => (
             <div
               key={e.event_id}
-              className="bg-gray-900 border border-gray-800 rounded-lg px-4 py-2.5 flex items-center justify-between group"
+              className="bg-surface border border-line rounded-lg px-4 py-2.5 flex items-center justify-between group"
             >
               <div className="min-w-0">
                 <p className="text-white text-sm">{e.title}</p>
                 {!e.location_inherited && e.location && (
-                  <p className="text-gray-500 text-xs mt-0.5">{e.location}</p>
+                  <p className="text-ink-muted text-xs mt-0.5">{e.location}</p>
                 )}
-                {e.notes && <p className="text-gray-600 text-xs italic mt-0.5">{e.notes}</p>}
+                {e.notes && <p className="text-ink-muted text-xs italic mt-0.5">{e.notes}</p>}
                 {e.tags?.length > 0 && (
                   <div className="flex flex-wrap gap-1 mt-1">
                     {e.tags.map((t) => <TagPill key={t} tag={t} availableTags={availableTags} />)}
@@ -585,11 +585,11 @@ function DayTimeline({
                 {isAdmin && (
                   <>
                     <button onClick={() => onEdit(e)}
-                      className="text-xs text-gray-600 hover:text-indigo-400 opacity-0 group-hover:opacity-100 transition-opacity">
+                      className="text-xs text-ink-muted hover:text-indigo-400 opacity-0 group-hover:opacity-100 transition-opacity">
                       Edit
                     </button>
                     <button onClick={() => onDelete(e.event_id)}
-                      className="text-gray-600 hover:text-red-400 text-sm opacity-0 group-hover:opacity-100 transition-opacity">
+                      className="text-ink-muted hover:text-red-400 text-sm opacity-0 group-hover:opacity-100 transition-opacity">
                       ×
                     </button>
                   </>
@@ -728,17 +728,17 @@ function AssistantPanel({
   return (
     <div className="flex flex-col h-full">
       {/* Header */}
-      <div className="px-4 py-3 border-b border-gray-800 shrink-0 flex items-start justify-between gap-2">
+      <div className="px-4 py-3 border-b border-line shrink-0 flex items-start justify-between gap-2">
         <div>
           <p className="text-white text-sm font-semibold">Trip Assistant</p>
-          <p className="text-gray-500 text-xs mt-0.5">
+          <p className="text-ink-muted text-xs mt-0.5">
             Tell me what you want to do — I can search places and suggest events.
           </p>
         </div>
         {messages.length > 0 && (
           <button
             onClick={clearChat}
-            className="text-xs text-gray-600 hover:text-gray-400 transition-colors shrink-0 mt-0.5"
+            className="text-xs text-ink-muted hover:text-ink-2 transition-colors shrink-0 mt-0.5"
           >
             Clear
           </button>
@@ -758,7 +758,7 @@ function AssistantPanel({
               <button
                 key={prompt}
                 onClick={() => { setInput(prompt); }}
-                className="w-full text-left bg-gray-800/60 hover:bg-gray-800 border border-gray-700/50 rounded-lg px-3 py-2 text-gray-400 text-xs transition-colors"
+                className="w-full text-left bg-raised/60 hover:bg-raised border border-line-strong/50 rounded-lg px-3 py-2 text-ink-2 text-xs transition-colors"
               >
                 {prompt}
               </button>
@@ -772,7 +772,7 @@ function AssistantPanel({
               className={`rounded-xl px-3 py-2 text-sm max-w-[90%] ${
                 msg.role === "user"
                   ? "bg-indigo-600 text-white"
-                  : "bg-gray-800 text-gray-200"
+                  : "bg-raised text-ink"
               }`}
             >
               {msg.role === "user" ? msg.content : (
@@ -804,11 +804,11 @@ function AssistantPanel({
                   className={`w-full border rounded-xl p-3 space-y-1.5 transition-all ${
                     s.added
                       ? "border-green-800/50 bg-green-950/30"
-                      : "border-gray-700 bg-gray-900"
+                      : "border-line-strong bg-surface"
                   }`}
                 >
                   <p className="text-white text-sm font-semibold">{s.title}</p>
-                  <div className="text-xs text-gray-400 space-y-0.5">
+                  <div className="text-xs text-ink-2 space-y-0.5">
                     {s.date && (
                       <p>
                         {fmtDate(s.date)}
@@ -817,7 +817,7 @@ function AssistantPanel({
                       </p>
                     )}
                     {s.location && <p className="truncate">{s.location}</p>}
-                    {s.notes && <p className="text-gray-500 italic">{s.notes}</p>}
+                    {s.notes && <p className="text-ink-muted italic">{s.notes}</p>}
                     {s.tags && s.tags.length > 0 && (
                       <div className="flex flex-wrap gap-1 pt-0.5">
                         {s.tags.map((t) => <TagPill key={t} tag={t} availableTags={trip.available_tags ?? []} />)}
@@ -840,7 +840,7 @@ function AssistantPanel({
                       </button>
                       <button
                         onClick={() => dismissSuggestion(msg.id, idx)}
-                        className="px-3 text-gray-500 hover:text-gray-300 text-xs transition-colors"
+                        className="px-3 text-ink-muted hover:text-ink text-xs transition-colors"
                       >
                         Skip
                       </button>
@@ -856,7 +856,7 @@ function AssistantPanel({
 
         {loading && (
           <div className="flex items-start">
-            <div className="bg-gray-800 rounded-xl px-3 py-2 text-gray-400 text-sm">
+            <div className="bg-raised rounded-xl px-3 py-2 text-ink-2 text-sm">
               <span className="animate-pulse">Thinking…</span>
             </div>
           </div>
@@ -865,7 +865,7 @@ function AssistantPanel({
       </div>
 
       {/* Input */}
-      <div className="px-3 py-3 border-t border-gray-800 shrink-0">
+      <div className="px-3 py-3 border-t border-line shrink-0">
         <div className="flex gap-2">
           <textarea
             ref={inputRef}
@@ -875,7 +875,7 @@ function AssistantPanel({
             placeholder="What do you want to do?"
             disabled={loading}
             rows={1}
-            className="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500 disabled:opacity-50 resize-none overflow-hidden"
+            className="flex-1 bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500 disabled:opacity-50 resize-none overflow-hidden"
           />
           <button
             onClick={send}
@@ -1055,8 +1055,8 @@ export default function TripDetailPage() {
     setTrip((prev) => prev ? { ...prev, overlap_tags: overlap } : prev);
   }
 
-  if (loading) return <p className="text-gray-500 text-sm font-mono">Loading…</p>;
-  if (!trip)   return <p className="text-gray-500 text-sm font-mono">Trip not found.</p>;
+  if (loading) return <p className="text-ink-muted text-sm font-mono">Loading…</p>;
+  if (!trip)   return <p className="text-ink-muted text-sm font-mono">Trip not found.</p>;
 
   const days       = dateRange(trip.start_date, trip.end_date);
   const attendees  = Object.values(trip.attendees ?? {});
@@ -1070,7 +1070,7 @@ export default function TripDetailPage() {
       <div className="space-y-4">
         <button
           onClick={() => router.push("/trips")}
-          className="text-sm font-mono text-gray-500 hover:text-gray-300 transition-colors"
+          className="text-sm font-mono text-ink-muted hover:text-ink transition-colors"
         >
           ← Trips
         </button>
@@ -1078,7 +1078,7 @@ export default function TripDetailPage() {
         <div className="flex items-start justify-between gap-4 flex-wrap">
           <div className="space-y-1">
             <h1 className="text-white text-2xl font-bold">{trip.name}</h1>
-            <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-gray-400">
+            <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-ink-2">
               <span>{trip.location}</span>
               {trip.maps_link && (
                 <a href={trip.maps_link} target="_blank" rel="noopener noreferrer"
@@ -1086,11 +1086,11 @@ export default function TripDetailPage() {
                   Maps
                 </a>
               )}
-              <span className="text-gray-700">•</span>
+              <span className="text-ink-muted">•</span>
               <span className="font-mono text-xs">{fmtDate(trip.start_date)} — {fmtDate(trip.end_date)}</span>
               {attendees.length > 0 && (
                 <>
-                  <span className="text-gray-700">•</span>
+                  <span className="text-ink-muted">•</span>
                   <span className="text-xs">{attendees.join(", ")}</span>
                 </>
               )}
@@ -1114,7 +1114,7 @@ export default function TripDetailPage() {
                 </button>
                 <button
                   onClick={handleToggleVisibility}
-                  className="text-xs text-gray-500 hover:text-gray-300 transition-colors border border-gray-700 rounded-lg px-3 py-2"
+                  className="text-xs text-ink-muted hover:text-ink transition-colors border border-line-strong rounded-lg px-3 py-2"
                 >
                   {trip.visibility === "private" ? "Make public" : "Make private"}
                 </button>
@@ -1159,9 +1159,9 @@ export default function TripDetailPage() {
                   onChange={(e) => setTagInput(e.target.value)}
                   onKeyDown={(e) => e.key === "Enter" && (e.preventDefault(), handleAddTag())}
                   placeholder="Add tag…"
-                  className="bg-transparent border border-gray-700 rounded-full px-2.5 py-0.5 text-xs text-gray-400 placeholder-gray-600 focus:outline-none focus:border-gray-500 w-24"
+                  className="bg-transparent border border-line-strong rounded-full px-2.5 py-0.5 text-xs text-ink-2 placeholder-ink-muted focus:outline-none focus:border-gray-500 w-24"
                 />
-                <button onClick={handleAddTag} className="text-xs text-gray-500 hover:text-gray-300 transition-colors">+</button>
+                <button onClick={handleAddTag} className="text-xs text-ink-muted hover:text-ink transition-colors">+</button>
               </div>
             )}
           </div>
@@ -1170,13 +1170,13 @@ export default function TripDetailPage() {
         {/* Invite management — admin only, only when private */}
         {isAdmin && trip.visibility === "private" && (
           <div className="space-y-2">
-            <p className="text-xs text-gray-500 uppercase tracking-wider font-mono">Invited</p>
+            <p className="text-xs text-ink-muted uppercase tracking-wider font-mono">Invited</p>
             <div className="flex flex-wrap items-center gap-2">
               {(trip.invited_discord_ids ?? []).length === 0 && (
-                <span className="text-xs text-gray-600">No invites yet</span>
+                <span className="text-xs text-ink-muted">No invites yet</span>
               )}
               {(trip.invited_discord_ids ?? []).map((discordId) => (
-                <span key={discordId} className="inline-flex items-center gap-1 text-xs bg-gray-800 border border-gray-700 rounded-full px-2.5 py-0.5 text-gray-300">
+                <span key={discordId} className="inline-flex items-center gap-1 text-xs bg-raised border border-line-strong rounded-full px-2.5 py-0.5 text-ink-2">
                   <span className="font-mono">{discordId}</span>
                   <button
                     onClick={() => handleRevokeInvite(discordId)}
@@ -1192,9 +1192,9 @@ export default function TripDetailPage() {
                   onChange={(e) => setInviteInput(e.target.value)}
                   onKeyDown={(e) => e.key === "Enter" && (e.preventDefault(), handleInvite())}
                   placeholder="Discord user ID…"
-                  className="bg-transparent border border-gray-700 rounded-full px-2.5 py-0.5 text-xs text-gray-400 placeholder-gray-600 focus:outline-none focus:border-gray-500 w-36"
+                  className="bg-transparent border border-line-strong rounded-full px-2.5 py-0.5 text-xs text-ink-2 placeholder-ink-muted focus:outline-none focus:border-gray-500 w-36"
                 />
-                <button onClick={handleInvite} className="text-xs text-gray-500 hover:text-gray-300 transition-colors">+</button>
+                <button onClick={handleInvite} className="text-xs text-ink-muted hover:text-ink transition-colors">+</button>
               </div>
             </div>
           </div>
@@ -1218,13 +1218,13 @@ export default function TripDetailPage() {
                   className={`flex flex-col items-center px-3 py-2 rounded-xl text-xs transition-colors relative ${
                     day === selectedDay
                       ? "bg-indigo-600 text-white"
-                      : "bg-gray-900 border border-gray-800 text-gray-400 hover:border-gray-700 hover:text-gray-200"
+                      : "bg-surface border border-line text-ink-2 hover:border-line-strong hover:text-ink"
                   }`}
                 >
                   <span className="font-mono font-bold">{short}</span>
                   <span className="font-mono">{date}</span>
                   {count > 0 && (
-                    <span className={`text-xs mt-0.5 ${day === selectedDay ? "text-indigo-200" : "text-gray-600"}`}>
+                    <span className={`text-xs mt-0.5 ${day === selectedDay ? "text-indigo-200" : "text-ink-muted"}`}>
                       {count}
                     </span>
                   )}
@@ -1238,7 +1238,7 @@ export default function TripDetailPage() {
 
           {/* Selected day */}
           <div className="space-y-4">
-            <p className="text-sm font-mono text-gray-400 uppercase tracking-wider">
+            <p className="text-sm font-mono text-ink-2 uppercase tracking-wider">
               {fmtDayHeading(selectedDay)}
             </p>
             <DayTimeline
@@ -1254,7 +1254,7 @@ export default function TripDetailPage() {
         </div>
 
         {/* Right: AI Assistant — sticky */}
-        <div className="w-80 xl:w-96 shrink-0 sticky top-20 h-[calc(100vh-240px)] flex flex-col bg-gray-900 border border-gray-800 rounded-xl overflow-hidden">
+        <div className="w-80 xl:w-96 shrink-0 sticky top-20 h-[calc(100vh-240px)] flex flex-col bg-surface border border-line rounded-xl overflow-hidden">
           <AssistantPanel trip={trip} onAddEvent={handleAssistantAddEvent} />
         </div>
       </div>
diff --git a/drb-frontend/app/trips/page.tsx b/drb-frontend/app/trips/page.tsx
index f04a99f..2f6ab51 100644
--- a/drb-frontend/app/trips/page.tsx
+++ b/drb-frontend/app/trips/page.tsx
@@ -29,25 +29,25 @@ function TripCard({ trip, isAdmin, onDelete }: {
 
   return (
     <div
-      className="bg-gray-900 border border-gray-800 rounded-xl p-5 cursor-pointer hover:border-gray-700 transition-colors"
+      className="bg-surface border border-line rounded-xl p-5 cursor-pointer hover:border-line-strong transition-colors"
       onClick={() => router.push(`/trips/${trip.trip_id}`)}
     >
       <div className="flex items-start justify-between gap-4">
         <div className="min-w-0">
           <div className="flex items-center gap-2 mb-1">
             <span className={`text-xs font-mono px-2 py-0.5 rounded-full ${
-              upcoming ? "bg-indigo-900 text-indigo-300" : "bg-gray-800 text-gray-500"
+              upcoming ? "bg-indigo-900 text-indigo-300" : "bg-raised text-ink-muted"
             }`}>
               {upcoming ? "Upcoming" : "Past"}
             </span>
           </div>
           <h3 className="text-white font-semibold text-sm leading-snug">{trip.name}</h3>
-          <p className="text-gray-400 text-xs mt-1">{trip.location}</p>
-          <p className="text-gray-500 text-xs font-mono mt-1">
+          <p className="text-ink-2 text-xs mt-1">{trip.location}</p>
+          <p className="text-ink-muted text-xs font-mono mt-1">
             {fmtDate(trip.start_date)} — {fmtDate(trip.end_date)}
           </p>
           {attendeeCount > 0 && (
-            <p className="text-gray-500 text-xs mt-1">
+            <p className="text-ink-muted text-xs mt-1">
               {attendeeCount} going
             </p>
           )}
@@ -102,59 +102,59 @@ function CreateModal({ onClose, onCreate }: {
     <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4">
       <form
         onSubmit={handleSubmit}
-        className="bg-gray-900 border border-gray-700 rounded-xl p-6 w-full max-w-md space-y-4 max-h-[90vh] overflow-y-auto"
+        className="bg-surface border border-line-strong rounded-xl p-6 w-full max-w-md space-y-4 max-h-[90vh] overflow-y-auto"
       >
         <h2 className="text-white font-bold">New Trip</h2>
 
         <div>
-          <label className="text-xs text-gray-400 block mb-1">Name</label>
+          <label className="text-xs text-ink-2 block mb-1">Name</label>
           <input
             required value={name} onChange={(e) => setName(e.target.value)}
             placeholder="Road trip to Nashville"
-            className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+            className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
           />
         </div>
 
         <div>
-          <label className="text-xs text-gray-400 block mb-1">Location</label>
+          <label className="text-xs text-ink-2 block mb-1">Location</label>
           <input
             required value={location} onChange={(e) => setLocation(e.target.value)}
             placeholder="Nashville, TN"
-            className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+            className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
           />
         </div>
 
         <div className="grid grid-cols-2 gap-3">
           <div>
-            <label className="text-xs text-gray-400 block mb-1">Start date</label>
+            <label className="text-xs text-ink-2 block mb-1">Start date</label>
             <input
               required type="date" value={start} onChange={(e) => setStart(e.target.value)}
-              className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+              className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
             />
           </div>
           <div>
-            <label className="text-xs text-gray-400 block mb-1">End date</label>
+            <label className="text-xs text-ink-2 block mb-1">End date</label>
             <input
               required type="date" value={end} onChange={(e) => setEnd(e.target.value)}
               min={start}
-              className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+              className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
             />
           </div>
         </div>
 
         <div>
-          <label className="text-xs text-gray-400 block mb-1">Google Maps link (optional)</label>
+          <label className="text-xs text-ink-2 block mb-1">Google Maps link (optional)</label>
           <input
             type="url" value={mapsLink} onChange={(e) => setMapsLink(e.target.value)}
             placeholder="https://maps.google.com/…"
-            className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+            className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
           />
         </div>
 
         {error && <p className="text-red-400 text-xs">{error}</p>}
 
         <div className="flex gap-3 justify-end">
-          <button type="button" onClick={onClose} className="text-sm text-gray-400 hover:text-gray-200 px-4 py-2">
+          <button type="button" onClick={onClose} className="text-sm text-ink-2 hover:text-ink px-4 py-2">
             Cancel
           </button>
           <button
@@ -198,12 +198,12 @@ export default function TripsPage() {
       </div>
 
       {loading ? (
-        <p className="text-gray-500 text-sm font-mono">Loading…</p>
+        <p className="text-ink-muted text-sm font-mono">Loading…</p>
       ) : (
         <>
           {upcoming.length > 0 && (
             <section>
-              <h2 className="text-sm font-mono text-gray-400 uppercase tracking-wider mb-3">Upcoming</h2>
+              <h2 className="text-sm font-mono text-ink-2 uppercase tracking-wider mb-3">Upcoming</h2>
               <div className="space-y-3">
                 {upcoming.map((t) => (
                   <TripCard key={t.trip_id} trip={t} isAdmin={isAdmin} onDelete={handleDelete} />
@@ -214,7 +214,7 @@ export default function TripsPage() {
 
           {past.length > 0 && (
             <section>
-              <h2 className="text-sm font-mono text-gray-400 uppercase tracking-wider mb-3">Past</h2>
+              <h2 className="text-sm font-mono text-ink-2 uppercase tracking-wider mb-3">Past</h2>
               <div className="space-y-3">
                 {past.map((t) => (
                   <TripCard key={t.trip_id} trip={t} isAdmin={isAdmin} onDelete={handleDelete} />
@@ -224,7 +224,7 @@ export default function TripsPage() {
           )}
 
           {trips.length === 0 && (
-            <p className="text-gray-600 text-sm font-mono">No trips yet.</p>
+            <p className="text-ink-muted text-sm font-mono">No trips yet.</p>
           )}
         </>
       )}
diff --git a/drb-frontend/app/waitlist/page.tsx b/drb-frontend/app/waitlist/page.tsx
index e089a41..bceea19 100644
--- a/drb-frontend/app/waitlist/page.tsx
+++ b/drb-frontend/app/waitlist/page.tsx
@@ -40,11 +40,11 @@ export default function WaitlistPage() {
         <span className="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-indigo-600 text-white">D</span>
         DRB
       </Link>
-      <div className="bg-gray-900 border border-gray-700 rounded-xl p-8 space-y-5 font-mono">
+      <div className="bg-surface border border-line-strong rounded-xl p-8 space-y-5 font-mono">
         {done ? (
           <>
             <h1 className="text-white text-lg font-bold">You&apos;re on the list</h1>
-            <p className="text-gray-400 text-sm leading-relaxed">
+            <p className="text-ink-2 text-sm leading-relaxed">
               Thanks — we&apos;ll reach out at the email you gave us. In the meantime, feel free to{" "}
               <Link href="/faq" className="text-indigo-400 hover:text-indigo-300 transition-colors">read the FAQ</Link>.
             </p>
@@ -53,39 +53,39 @@ export default function WaitlistPage() {
           <>
             <div>
               <h1 className="text-white text-lg font-bold">Request access</h1>
-              <p className="text-gray-400 text-xs mt-2 leading-relaxed">
+              <p className="text-ink-2 text-xs mt-2 leading-relaxed">
                 Self-serve signup isn&apos;t open yet. Leave your details and we&apos;ll follow up to get your organization set up.
               </p>
             </div>
             <form onSubmit={handleSubmit} className="space-y-4">
               <div>
-                <label className="text-xs text-gray-400 block mb-1">Email</label>
+                <label className="text-xs text-ink-2 block mb-1">Email</label>
                 <input
                   type="email"
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
                   required
                   autoComplete="email"
-                  className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+                  className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
                 />
               </div>
               <div>
-                <label className="text-xs text-gray-400 block mb-1">Organization (optional)</label>
+                <label className="text-xs text-ink-2 block mb-1">Organization (optional)</label>
                 <input
                   type="text"
                   value={orgName}
                   onChange={(e) => setOrgName(e.target.value)}
-                  className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+                  className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
                 />
               </div>
               <div>
-                <label className="text-xs text-gray-400 block mb-1">Anything else? (optional)</label>
+                <label className="text-xs text-ink-2 block mb-1">Anything else? (optional)</label>
                 <textarea
                   value={note}
                   onChange={(e) => setNote(e.target.value)}
                   rows={3}
                   maxLength={2000}
-                  className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500 resize-none"
+                  className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500 resize-none"
                 />
               </div>
               {error && <p className="text-red-400 text-xs">{error}</p>}
diff --git a/drb-frontend/components/CallRow.tsx b/drb-frontend/components/CallRow.tsx
index e017ea8..dd9c387 100644
--- a/drb-frontend/components/CallRow.tsx
+++ b/drb-frontend/components/CallRow.tsx
@@ -85,17 +85,17 @@ export function CallRow({ call, systemName, isAdmin }: Props) {
   return (
     <>
       <tr
-        className={`border-b border-gray-800 font-mono text-sm ${hasDetails ? "cursor-pointer hover:bg-gray-900/50" : "hover:bg-gray-900/30"}`}
+        className={`border-b border-line font-mono text-sm ${hasDetails ? "cursor-pointer hover:bg-raised/50" : "hover:bg-raised/30"}`}
         onClick={() => hasDetails && setExpanded((v) => !v)}
       >
-        <td className="px-4 py-2 text-gray-400 text-xs whitespace-nowrap">
-          <span className="text-gray-600">{new Date(call.started_at).toLocaleDateString([], { month: "short", day: "numeric" })} </span>
+        <td className="px-4 py-2 text-ink-2 text-xs whitespace-nowrap">
+          <span className="text-ink-muted">{new Date(call.started_at).toLocaleDateString([], { month: "short", day: "numeric" })} </span>
           {new Date(call.started_at).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
         </td>
-        <td className="px-4 py-2 text-gray-300">
+        <td className="px-4 py-2 text-ink-2">
           <span>{call.talkgroup_name || call.talkgroup_id || "—"}</span>
           {call.tags && call.tags.length > 0 && (
-            <span className={`ml-2 text-xs px-1.5 py-0.5 rounded-full capitalize ${TAG_COLORS[call.tags[0]] ?? "bg-gray-800 text-gray-400"}`}>
+            <span className={`ml-2 text-xs px-1.5 py-0.5 rounded-full capitalize ${TAG_COLORS[call.tags[0]] ?? "bg-raised text-ink-2"}`}>
               {call.tags[0]}
             </span>
           )}
@@ -104,29 +104,29 @@ export function CallRow({ call, systemName, isAdmin }: Props) {
             <span className="ml-2">{severityBadge(call.severity)}</span>
           )}
         </td>
-        <td className="px-4 py-2 text-gray-400 hidden sm:table-cell">{systemName ?? call.system_id ?? "—"}</td>
-        <td className="px-4 py-2 text-gray-400 hidden sm:table-cell">{call.node_id}</td>
+        <td className="px-4 py-2 text-ink-2 hidden sm:table-cell">{systemName ?? call.system_id ?? "—"}</td>
+        <td className="px-4 py-2 text-ink-2 hidden sm:table-cell">{call.node_id}</td>
         <td className="px-4 py-2">
           {isActive ? (
             <span className="text-orange-400 animate-pulse">● live</span>
           ) : (
-            <span className="text-gray-500">{duration(call.started_at, call.ended_at)}</span>
+            <span className="text-ink-muted">{duration(call.started_at, call.ended_at)}</span>
           )}
         </td>
         <td className="px-4 py-2 text-xs">
           {hasAudio ? (
             <span className="text-blue-400">▶</span>
           ) : (
-            <span className="text-gray-700">—</span>
+            <span className="text-ink-muted">—</span>
           )}
         </td>
-        <td className="px-4 py-2 text-gray-600 text-xs">
+        <td className="px-4 py-2 text-ink-muted text-xs">
           {hasDetails && (expanded ? "▲" : "▼")}
         </td>
       </tr>
 
       {expanded && hasDetails && (
-        <tr className="bg-gray-900/60 border-b border-gray-800">
+        <tr className="bg-surface/60 border-b border-line">
           <td colSpan={7} className="px-6 py-3 space-y-2">
             {/* Audio player */}
             {hasAudio && (
@@ -140,7 +140,7 @@ export function CallRow({ call, systemName, isAdmin }: Props) {
                   onClick={(e) => e.stopPropagation()}
                 />
               ) : (
-                <p className="text-xs text-gray-600 font-mono">Loading audio…</p>
+                <p className="text-xs text-ink-muted font-mono">Loading audio…</p>
               )
             )}
 
@@ -150,7 +150,7 @@ export function CallRow({ call, systemName, isAdmin }: Props) {
                 {call.tags.map((tag) => (
                   <span
                     key={tag}
-                    className={`text-xs px-2 py-0.5 rounded-full capitalize ${TAG_COLORS[tag] ?? "bg-gray-800 text-gray-400"}`}
+                    className={`text-xs px-2 py-0.5 rounded-full capitalize ${TAG_COLORS[tag] ?? "bg-raised text-ink-2"}`}
                   >
                     {tag}
                   </span>
@@ -161,7 +161,7 @@ export function CallRow({ call, systemName, isAdmin }: Props) {
             {/* Incident links — one per scene detected in the recording */}
             {incidentIds.length > 0 && (
               <div className="flex flex-wrap gap-x-3 gap-y-0.5 text-xs font-mono text-indigo-400">
-                <span className="text-gray-600">{incidentIds.length === 1 ? "Incident:" : "Incidents:"}</span>
+                <span className="text-ink-muted">{incidentIds.length === 1 ? "Incident:" : "Incidents:"}</span>
                 {incidentIds.map((id) => (
                   <a key={id} href={`/incidents/${id}`} className="underline hover:text-indigo-300">
                     {id.slice(0, 8)}…
@@ -172,9 +172,9 @@ export function CallRow({ call, systemName, isAdmin }: Props) {
 
             {/* Correlation debug — admin only */}
             {isAdmin && call.corr_path && (
-              <div className="flex flex-wrap gap-x-3 gap-y-0.5 text-xs font-mono text-gray-600">
+              <div className="flex flex-wrap gap-x-3 gap-y-0.5 text-xs font-mono text-ink-muted">
                 <span>corr:</span>
-                <span className="text-gray-400">{call.corr_path}</span>
+                <span className="text-ink-2">{call.corr_path}</span>
                 {call.corr_incident_idle_min != null && (
                   <span>idle {call.corr_incident_idle_min}min</span>
                 )}
@@ -200,7 +200,7 @@ export function CallRow({ call, systemName, isAdmin }: Props) {
                   value={editText}
                   onChange={(e) => setEditText(e.target.value)}
                   rows={4}
-                  className="w-full bg-gray-800 border border-gray-600 rounded-lg px-3 py-2 text-xs text-gray-200 font-mono focus:outline-none focus:border-indigo-500 resize-none"
+                  className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-xs text-ink font-mono focus:outline-none focus:border-indigo-500 resize-none"
                 />
                 <div className="flex items-center gap-2 flex-wrap">
                   <button
@@ -212,7 +212,7 @@ export function CallRow({ call, systemName, isAdmin }: Props) {
                   </button>
                   <button
                     onClick={(e) => { e.stopPropagation(); setEditing(false); }}
-                    className="text-xs text-gray-500 hover:text-gray-300 px-3 py-1 transition-colors"
+                    className="text-xs text-ink-muted hover:text-ink px-3 py-1 transition-colors"
                   >
                     Cancel
                   </button>
@@ -224,23 +224,23 @@ export function CallRow({ call, systemName, isAdmin }: Props) {
             ) : hasSegments ? (
               <div className="space-y-1">
                 <div className="flex items-center justify-between">
-                  <span className="text-xs text-gray-600 font-mono">
+                  <span className="text-xs text-ink-muted font-mono">
                     {hasBoth && !showOriginal ? "corrected" : `${call.segments!.length} transmissions`}
                   </span>
                   {isAdmin && (
-                    <button onClick={(e) => { e.stopPropagation(); startEdit(); }} className="text-xs text-gray-600 hover:text-gray-400 font-mono transition-colors">edit</button>
+                    <button onClick={(e) => { e.stopPropagation(); startEdit(); }} className="text-xs text-ink-muted hover:text-ink-2 font-mono transition-colors">edit</button>
                   )}
                 </div>
                 {hasBoth && !showOriginal ? (
-                  <pre className="text-xs text-gray-300 bg-gray-800 rounded-lg px-4 py-3 whitespace-pre-wrap font-mono leading-relaxed max-h-48 overflow-y-auto">
+                  <pre className="text-xs text-ink-2 bg-raised rounded-lg px-4 py-3 whitespace-pre-wrap font-mono leading-relaxed max-h-48 overflow-y-auto">
                     {call.transcript_corrected}
                   </pre>
                 ) : (
-                  <div className="bg-gray-800 rounded-lg px-4 py-3 space-y-2 max-h-48 overflow-y-auto">
+                  <div className="bg-raised rounded-lg px-4 py-3 space-y-2 max-h-48 overflow-y-auto">
                     {call.segments!.map((seg, i) => (
                       <div key={i} className="flex gap-3 text-xs font-mono">
-                        <span className="text-gray-600 shrink-0">{i + 1}. [{seg.start}s]</span>
-                        <span className="text-gray-300">{seg.text}</span>
+                        <span className="text-ink-muted shrink-0">{i + 1}. [{seg.start}s]</span>
+                        <span className="text-ink-2">{seg.text}</span>
                       </div>
                     ))}
                   </div>
@@ -248,7 +248,7 @@ export function CallRow({ call, systemName, isAdmin }: Props) {
                 {hasBoth && (
                   <button
                     onClick={(e) => { e.stopPropagation(); setShowOriginal((v) => !v); }}
-                    className="text-xs text-gray-600 hover:text-gray-400 font-mono transition-colors"
+                    className="text-xs text-ink-muted hover:text-ink-2 font-mono transition-colors"
                   >
                     {showOriginal ? "show corrected ↑" : "show original ↓"}
                   </button>
@@ -258,27 +258,27 @@ export function CallRow({ call, systemName, isAdmin }: Props) {
               <div className="space-y-1">
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-2">
-                    {hasBoth && <span className="text-xs text-gray-600 font-mono">{showOriginal ? "original" : "corrected"}</span>}
-                    {!hasBoth && call.transcript_corrected && <span className="text-xs text-gray-600 font-mono">corrected</span>}
+                    {hasBoth && <span className="text-xs text-ink-muted font-mono">{showOriginal ? "original" : "corrected"}</span>}
+                    {!hasBoth && call.transcript_corrected && <span className="text-xs text-ink-muted font-mono">corrected</span>}
                   </div>
                   {isAdmin && (
-                    <button onClick={(e) => { e.stopPropagation(); startEdit(); }} className="text-xs text-gray-600 hover:text-gray-400 font-mono transition-colors">edit</button>
+                    <button onClick={(e) => { e.stopPropagation(); startEdit(); }} className="text-xs text-ink-muted hover:text-ink-2 font-mono transition-colors">edit</button>
                   )}
                 </div>
-                <pre className="text-xs text-gray-300 bg-gray-800 rounded-lg px-4 py-3 whitespace-pre-wrap font-mono leading-relaxed max-h-40 overflow-y-auto">
+                <pre className="text-xs text-ink-2 bg-raised rounded-lg px-4 py-3 whitespace-pre-wrap font-mono leading-relaxed max-h-40 overflow-y-auto">
                   {displayTranscript}
                 </pre>
                 {hasBoth && (
                   <button
                     onClick={(e) => { e.stopPropagation(); setShowOriginal((v) => !v); }}
-                    className="text-xs text-gray-600 hover:text-gray-400 font-mono transition-colors"
+                    className="text-xs text-ink-muted hover:text-ink-2 font-mono transition-colors"
                   >
                     {showOriginal ? "show corrected ↑" : "show original ↓"}
                   </button>
                 )}
               </div>
             ) : (
-              <p className="text-xs text-gray-600 font-mono italic">No transcript available.</p>
+              <p className="text-xs text-ink-muted font-mono italic">No transcript available.</p>
             )}
           </td>
         </tr>
diff --git a/drb-frontend/components/CameraFeed.tsx b/drb-frontend/components/CameraFeed.tsx
index 11f5ea4..864c4d5 100644
--- a/drb-frontend/components/CameraFeed.tsx
+++ b/drb-frontend/components/CameraFeed.tsx
@@ -283,11 +283,11 @@ export function CameraFeed({ camera, className, mode = "auto", priority = "norma
           {camera.image_url ? "…" : "No still for this camera"}
         </div>
       )}
-      <span className={`absolute top-1 left-1 px-1 rounded-sm font-mono text-[9px] leading-[14px] tracking-wide ${toneClass}`} title="Frame time is when DRB first saw this frame">
+      <span className={`absolute top-1 left-1 px-1 rounded-sm font-mono text-[10px] leading-[14px] tracking-wide ${toneClass}`} title="Frame time is when DRB first saw this frame">
         {badge.text}
       </span>
       {credit?.attribution && (
-        <span className="absolute bottom-0 left-0 right-0 px-1 bg-black/60 text-white text-[9px] leading-[13px] truncate">
+        <span className="absolute bottom-0 left-0 right-0 px-1 bg-black/60 text-white text-[10px] leading-[13px] truncate">
           {credit.attribution_url ? (
             <a href={credit.attribution_url} target="_blank" rel="noopener noreferrer" className="hover:underline">{credit.attribution}</a>
           ) : credit.attribution}
diff --git a/drb-frontend/components/LiveView.tsx b/drb-frontend/components/LiveView.tsx
index 0f04fb9..194a73d 100644
--- a/drb-frontend/components/LiveView.tsx
+++ b/drb-frontend/components/LiveView.tsx
@@ -74,7 +74,7 @@ const RECENT_CALLS = 500;
 const KIOSK_TYPE = [
   "[&[data-kiosk]_.text-xs]:text-[18px]", "[&[data-kiosk]_.text-xs]:leading-snug",
   "[&[data-kiosk]_.text-sm]:text-[20px]", "[&[data-kiosk]_.text-sm]:leading-snug",
-  "[&[data-kiosk]_[class*='text-[9px]']]:text-[18px]",
+  "[&[data-kiosk]_[class*='text-[10px]']]:text-[18px]",
   "[&[data-kiosk]_[class*='text-[10px]']]:text-[18px]",
   "[&[data-kiosk]_[class*='text-[11px]']]:text-[18px]",
   "[&[data-kiosk]_.w-56]:w-80",
diff --git a/drb-frontend/components/MapView.tsx b/drb-frontend/components/MapView.tsx
index 3409220..fe15a4e 100644
--- a/drb-frontend/components/MapView.tsx
+++ b/drb-frontend/components/MapView.tsx
@@ -440,7 +440,7 @@ function RadarBadge({ meta, loop, loopClock, onLoop }: {
   else text = `Radar valid ${hhmmLocal(meta.valid)} · ${ageMin} min old`;
   return (
     <div className={`flex items-center gap-1.5 bg-surface/90 border rounded px-2 py-1 text-xs text-ink-2 pointer-events-auto ${stale ? "border-accent" : "border-line"}`}>
-      {stale && <span className="bg-accent text-white rounded px-1 text-[9px] font-semibold tracking-wide"
+      {stale && <span className="bg-accent text-white rounded px-1 text-[10px] font-semibold tracking-wide"
         title={`The newest radar frame is more than ${RADAR_STALE_MIN} min old, or its time could not be read`}>STALE</span>}
       <span className="tabular-nums whitespace-nowrap">{text}</span>
       {meta.valid && meta.error && <span className="text-ink-muted whitespace-nowrap" title={meta.error}>· time not refreshing</span>}
@@ -1233,8 +1233,8 @@ function FanNodeLayer({
                     className={idx < members.length - 1 ? "border-b border-gray-200 pb-2" : ""}
                   >
                     <p className="font-semibold text-sm text-gray-900">{node.name}</p>
-                    <p className="text-xs text-gray-500 font-mono">{node.node_id}</p>
-                    <p className="text-xs capitalize text-gray-700">{node.status}</p>
+                    <p className="text-xs text-ink-muted font-mono">{node.node_id}</p>
+                    <p className="text-xs capitalize text-ink-muted">{node.status}</p>
                     {activeByNode[node.node_id] && (
                       <p className="text-xs text-orange-600 mt-0.5">
                         ● TG {activeByNode[node.node_id].talkgroup_id ?? "—"}{" "}
@@ -1346,8 +1346,8 @@ function FanIncidentLayer({
                       <p className="text-xs capitalize font-medium" style={{ color }}>
                         {isKnownSeverity(inc.severity) ? SEVERITY_LABEL[inc.severity] : "Unknown"} · {inc.type ?? "other"}
                       </p>
-                      {inc.location && <p className="text-xs text-gray-600">{inc.location}</p>}
-                      <p className="text-[11px] text-gray-500">Pin: {PIN_PRECISION_LABEL[pinPrecision(inc)]}</p>
+                      {inc.location && <p className="text-xs text-ink-muted">{inc.location}</p>}
+                      <p className="text-[11px] text-ink-muted">Pin: {PIN_PRECISION_LABEL[pinPrecision(inc)]}</p>
                       <a
                         href={`/incidents/${inc.incident_id}`}
                         onClick={(e) => { e.stopPropagation(); window.location.href = `/incidents/${inc.incident_id}`; e.preventDefault(); }}
@@ -1490,19 +1490,19 @@ function IncidentPathLayer({
                 >
                   <Popup minWidth={160}>
                     <div className="text-gray-900">
-                      <p className="text-xs text-gray-500">{heading}</p>
+                      <p className="text-xs text-ink-muted">{heading}</p>
                       <p className="font-semibold text-sm mt-0.5">{inc.title ?? "Incident"}</p>
-                      {c.location && <p className="text-xs text-gray-600 mt-0.5">{c.location}</p>}
+                      {c.location && <p className="text-xs text-ink-muted mt-0.5">{c.location}</p>}
                       {c.location_coords?.location_type === "GEOMETRIC_CENTER" && (
-                        <p className="text-[11px] text-gray-500">Approximate: centre of a road, junction or place</p>
+                        <p className="text-[11px] text-ink-muted">Approximate: centre of a road, junction or place</p>
                       )}
                       {s.dashedIn && !s.ghost && path.movement && (
-                        <p className="text-[11px] text-gray-500">Dashed in: long gap or talkgroup change — route unknown</p>
+                        <p className="text-[11px] text-ink-muted">Dashed in: long gap or talkgroup change — route unknown</p>
                       )}
                       {hasAudio(c) && (
                         <div className="flex items-center gap-1.5 mt-1">
                           <PlayButton callId={c.call_id} label={s.n != null ? `Play stop ${s.n}` : "Play this call"} />
-                          <span className="text-xs text-gray-600">Play this call</span>
+                          <span className="text-xs text-ink-muted">Play this call</span>
                         </div>
                       )}
                       <a href={`/incidents/${inc.incident_id}`} className="text-xs text-blue-600 hover:underline block mt-1">
@@ -1997,7 +1997,7 @@ function MapView({
             <span className="text-ink-2">Call location (not a pursuit)</span>
           </div>
           <div className="flex items-center gap-2">
-            <span className="text-[9px] px-0.5 rounded border border-dashed border-line text-ink-2 leading-tight">merged?</span>
+            <span className="text-[10px] px-0.5 rounded border border-dashed border-line text-ink-2 leading-tight">merged?</span>
             <span className="text-ink-2">Path &gt; {MAY_BE_MERGED_KM} km — may be 2+ events</span>
           </div>
         </div>
@@ -2114,7 +2114,7 @@ function MapView({
                     <span className="uppercase tracking-wide font-semibold text-[11px]" style={{ color }}>
                       {isKnownSeverity(inc.severity) ? SEVERITY_LABEL[inc.severity] : "Unknown"}
                     </span>
-                    {live && <span className="ml-auto bg-accent text-white rounded px-1 text-[9px] font-semibold tracking-wide">ON AIR</span>}
+                    {live && <span className="ml-auto bg-accent text-white rounded px-1 text-[10px] font-semibold tracking-wide">ON AIR</span>}
                   </div>
                   <p className="text-ink font-semibold leading-snug truncate">
                     {inc.title ?? "Incident"}
diff --git a/drb-frontend/components/NodeCard.tsx b/drb-frontend/components/NodeCard.tsx
index 4b4a2b9..9d2c0d6 100644
--- a/drb-frontend/components/NodeCard.tsx
+++ b/drb-frontend/components/NodeCard.tsx
@@ -19,22 +19,22 @@ export function NodeCard({ node, system, linkToDetail = true }: Props) {
     : "never";
 
   const body = (
-      <div className="bg-gray-900 border border-gray-800 rounded-lg p-4 hover:border-gray-600 transition-colors cursor-pointer">
+      <div className="bg-surface border border-line rounded-lg p-4 hover:border-line-strong transition-colors cursor-pointer">
         <div className="flex items-start justify-between mb-3">
           <div>
             <p className="font-mono font-semibold text-white">{node.name}</p>
-            <p className="text-xs text-gray-500 font-mono">{node.node_id}</p>
+            <p className="text-xs text-ink-muted font-mono">{node.node_id}</p>
           </div>
           <StatusBadge status={node.status} />
         </div>
-        <div className="space-y-1 text-xs font-mono text-gray-400">
+        <div className="space-y-1 text-xs font-mono text-ink-2">
           <div className="flex justify-between">
             <span>System</span>
-            <span className="text-gray-300">{system?.name ?? "Unassigned"}</span>
+            <span className="text-ink-2">{system?.name ?? "Unassigned"}</span>
           </div>
           <div className="flex justify-between">
             <span>Location</span>
-            <span className="text-gray-300">
+            <span className="text-ink-2">
               {node.lat != null && node.lon != null
                 ? `${node.lat.toFixed(4)}, ${node.lon.toFixed(4)}`
                 : "Unknown"}
@@ -42,23 +42,23 @@ export function NodeCard({ node, system, linkToDetail = true }: Props) {
           </div>
           <div className="flex justify-between">
             <span>Last seen</span>
-            <span className="text-gray-300">{lastSeen}</span>
+            <span className="text-ink-2">{lastSeen}</span>
           </div>
         </div>
         {!node.configured && (
-          <div className="mt-3 text-xs text-indigo-400 font-mono border-t border-gray-800 pt-2">
+          <div className="mt-3 text-xs text-indigo-400 font-mono border-t border-line pt-2">
             ⚠ Needs configuration
           </div>
         )}
         {node.is_overridden && (
-          <div className="mt-3 text-xs text-yellow-500 font-mono border-t border-gray-800 pt-2 flex justify-between">
+          <div className="mt-3 text-xs text-yellow-500 font-mono border-t border-line pt-2 flex justify-between">
             <span>⚠ Local Override</span>
             {node.override_timeout_at ? (
-              <span className="text-gray-500">
+              <span className="text-ink-muted">
                 Resets: {new Date(node.override_timeout_at).toLocaleTimeString()}
               </span>
             ) : (
-              <span className="text-gray-500">Permanent</span>
+              <span className="text-ink-muted">Permanent</span>
             )}
           </div>
         )}
diff --git a/drb-frontend/components/NodeConfigModal.tsx b/drb-frontend/components/NodeConfigModal.tsx
index 8a58bcd..cd7d063 100644
--- a/drb-frontend/components/NodeConfigModal.tsx
+++ b/drb-frontend/components/NodeConfigModal.tsx
@@ -51,20 +51,20 @@ export function NodeConfigModal({ node, systems, onClose }: Props) {
 
   return (
     <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4">
-      <div className="bg-gray-900 border border-gray-700 rounded-xl p-6 w-full max-w-md font-mono max-h-[90vh] overflow-y-auto">
+      <div className="bg-surface border border-line-strong rounded-xl p-6 w-full max-w-md font-mono max-h-[90vh] overflow-y-auto">
         <h2 className="text-white font-semibold mb-1">Configure Node</h2>
-        <p className="text-gray-400 text-sm mb-5">
+        <p className="text-ink-2 text-sm mb-5">
           <span className="text-indigo-400">{node.node_id}</span> connected for the first time.
           Assign it a radio system to begin monitoring.
         </p>
 
         <form onSubmit={handleSubmit} className="space-y-4">
           <div>
-            <label className="block text-xs text-gray-400 mb-1">Radio System</label>
+            <label className="block text-xs text-ink-2 mb-1">Radio System</label>
             <select
               value={systemId}
               onChange={(e) => setSystemId(e.target.value)}
-              className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+              className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
               required
             >
               <option value="">Select a system…</option>
@@ -77,41 +77,41 @@ export function NodeConfigModal({ node, systems, onClose }: Props) {
           </div>
 
           <div>
-            <label className="block text-xs text-gray-400 mb-1">SDR Hardware</label>
+            <label className="block text-xs text-ink-2 mb-1">SDR Hardware</label>
             <select
               value={preset}
               onChange={(e) => setPreset(e.target.value)}
-              className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+              className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
             >
               {PRESETS.map((p) => (
                 <option key={p.value} value={p.value}>{p.label}</option>
               ))}
             </select>
             {selectedPreset && (
-              <p className="text-xs text-gray-600 mt-1">{selectedPreset.hint}</p>
+              <p className="text-xs text-ink-muted mt-1">{selectedPreset.hint}</p>
             )}
           </div>
 
           <div>
-            <label className="block text-xs text-gray-400 mb-1">
-              PPM offset <span className="text-gray-600">(0 = use preset default; calibrate via OP25 web UI)</span>
+            <label className="block text-xs text-ink-2 mb-1">
+              PPM offset <span className="text-ink-muted">(0 = use preset default; calibrate via OP25 web UI)</span>
             </label>
             <input
               type="number"
               value={ppm}
               onChange={(e) => setPpm(e.target.value)}
               step="0.1"
-              className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm font-mono focus:outline-none focus:border-indigo-500"
+              className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm font-mono focus:outline-none focus:border-indigo-500"
               placeholder="0"
             />
           </div>
 
           <div>
-            <label className="block text-xs text-gray-400 mb-1">Node Type *</label>
+            <label className="block text-xs text-ink-2 mb-1">Node Type *</label>
             <select
               value={nodeType}
               onChange={(e) => setNodeType(e.target.value)}
-              className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+              className="w-full bg-raised border border-line-strong rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
               required
             >
               <option value="">Select node type...</option>
@@ -127,9 +127,9 @@ export function NodeConfigModal({ node, systems, onClose }: Props) {
                 id="enforceTimeout"
                 checked={enforceTimeout}
                 onChange={(e) => setEnforceTimeout(e.target.checked)}
-                className="rounded bg-gray-800 border-gray-700 text-indigo-600 focus:ring-indigo-500 focus:ring-offset-gray-900"
+                className="rounded bg-raised border-line-strong text-indigo-600 focus:ring-indigo-500 focus:ring-offset-gray-900"
               />
-              <label htmlFor="enforceTimeout" className="text-xs text-gray-400 cursor-pointer select-none">
+              <label htmlFor="enforceTimeout" className="text-xs text-ink-2 cursor-pointer select-none">
                 Enforce Local Override Timeout (24 hours)
               </label>
             </div>
@@ -148,7 +148,7 @@ export function NodeConfigModal({ node, systems, onClose }: Props) {
             <button
               type="button"
               onClick={onClose}
-              className="flex-1 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-lg py-2 text-sm transition-colors"
+              className="flex-1 bg-raised hover:bg-gray-700 text-ink-2 rounded-lg py-2 text-sm transition-colors"
             >
               Cancel
             </button>
diff --git a/drb-frontend/components/RadioChannels.tsx b/drb-frontend/components/RadioChannels.tsx
index cc4eb32..a869c47 100644
--- a/drb-frontend/components/RadioChannels.tsx
+++ b/drb-frontend/components/RadioChannels.tsx
@@ -27,7 +27,7 @@ export function RadioChannels({ channels }: { channels?: RadioChannel[] | null }
     : `${encrypted.length} of ${channels.length} channels ${encrypted.length === 1 ? "is" : "are"} now`;
   return (
     <section>
-      <h2 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">Conventional Channels</h2>
+      <h2 className="text-sm font-semibold text-ink-2 uppercase tracking-wider mb-3">Conventional Channels</h2>
       {encrypted.length > 0 && (
         <p role="status" className="text-xs text-red-300 bg-red-950 border border-red-900 rounded-lg px-3 py-2 mb-3 font-mono">
           {subject} encrypted — those calls can&apos;t be decoded, so nothing from{" "}
@@ -37,17 +37,17 @@ export function RadioChannels({ channels }: { channels?: RadioChannel[] | null }
       )}
       <ul className="space-y-1 font-mono text-xs">
         {channels.map((c, i) => (
-          <li key={i} className="flex flex-wrap gap-x-3 text-gray-300">
+          <li key={i} className="flex flex-wrap gap-x-3 text-ink-2">
             <span className="text-white">{c.name || mhz(c.freq)}</span>
-            {c.name && <span className="text-gray-500">{mhz(c.freq)}</span>}
-            {c.nac != null && <span className="text-gray-500">NAC {hex(c.nac, 3)}</span>}
+            {c.name && <span className="text-ink-muted">{mhz(c.freq)}</span>}
+            {c.nac != null && <span className="text-ink-muted">NAC {hex(c.nac, 3)}</span>}
             {c.encrypted ? (
               <span className="text-red-400">
                 ✕ Encrypted{c.algid != null ? ` · ${ALGIDS[c.algid] ?? `ALGID ${hex(c.algid, 2)}`}` : ""}
                 {c.keyid != null ? ` · key ${hex(c.keyid, 4)}` : ""}
               </span>
             ) : (
-              <span className="text-gray-400">
+              <span className="text-ink-2">
                 {c.clear_calls > 0 ? `Clear · ${c.clear_calls} calls heard` : "No traffic heard yet"}
               </span>
             )}
diff --git a/drb-frontend/components/SdrSettings.tsx b/drb-frontend/components/SdrSettings.tsx
index 41564db..2637fd0 100644
--- a/drb-frontend/components/SdrSettings.tsx
+++ b/drb-frontend/components/SdrSettings.tsx
@@ -23,7 +23,7 @@ function rowsFrom(priority: string[], pins: Record<string, string>): Row[] {
 }
 
 const selectClass =
-  "bg-gray-800 border border-gray-700 rounded px-2 py-1 text-gray-200 text-xs focus:outline-none focus:border-indigo-500 disabled:opacity-60 max-w-[13rem]";
+  "bg-raised border border-line-strong rounded px-2 py-1 text-ink text-xs focus:outline-none focus:border-indigo-500 disabled:opacity-60 max-w-[13rem]";
 
 function DeviceSelect({
   value, devices, devicesKnown, autoLabel, label, disabled, onChange,
@@ -116,18 +116,18 @@ export function SdrSettings({ node, canEdit }: { node: NodeRecord; canEdit: bool
 
   return (
     <section>
-      <h2 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-1">SDRs</h2>
-      <p className="text-xs text-gray-500 font-mono mb-3">
+      <h2 className="text-sm font-semibold text-ink-2 uppercase tracking-wider mb-1">SDRs</h2>
+      <p className="text-xs text-ink-muted font-mono mb-3">
         {devicesKnown
           ? `This node reports ${devices.length} SDR${devices.length === 1 ? "" : "s"}.`
           : "This node hasn't reported its SDRs yet."}
       </p>
 
-      <div className="bg-gray-900 border border-gray-800 rounded-lg divide-y divide-gray-800 font-mono text-sm">
+      <div className="bg-surface border border-line rounded-lg divide-y divide-line font-mono text-sm">
         <div className="flex flex-wrap items-center gap-3 px-4 py-2.5">
           <div className="flex-1 min-w-0">
-            <div className="text-gray-200">OP25 SDR</div>
-            <div className="text-xs text-gray-500">
+            <div className="text-ink">OP25 SDR</div>
+            <div className="text-xs text-ink-muted">
               {op25Moving
                 ? "Saving restarts OP25 on the selected SDR."
                 : node.op25_sdr_serial
@@ -162,18 +162,18 @@ export function SdrSettings({ node, canEdit }: { node: NodeRecord; canEdit: bool
                     : "Waiting for SDR";
           return (
             <div key={row.mode} className="flex flex-wrap items-center gap-3 px-4 py-2.5">
-              <span className="w-4 text-right text-gray-600 text-xs">{row.enabled ? ++rank : ""}</span>
+              <span className="w-4 text-right text-ink-muted text-xs">{row.enabled ? ++rank : ""}</span>
               <input
                 type="checkbox"
                 checked={row.enabled}
                 disabled={!canEdit}
                 aria-label={`Enable ${meta.name}`}
                 onChange={(e) => edit(rows.map((r, j) => (j === i ? { ...r, enabled: e.target.checked } : r)))}
-                className="rounded bg-gray-800 border-gray-700 text-indigo-600 focus:ring-indigo-500 focus:ring-offset-gray-900"
+                className="rounded bg-raised border-line-strong text-indigo-600 focus:ring-indigo-500 focus:ring-offset-gray-900"
               />
               <div className="flex-1 min-w-[7rem]">
-                <div className="text-gray-200">{meta.name}</div>
-                <div className="text-xs text-gray-500">{meta.hint}</div>
+                <div className="text-ink">{meta.name}</div>
+                <div className="text-xs text-ink-muted">{meta.hint}</div>
               </div>
               <DeviceSelect
                 value={row.pin}
@@ -191,7 +191,7 @@ export function SdrSettings({ node, canEdit }: { node: NodeRecord; canEdit: bool
                     onClick={() => move(i, -1)}
                     disabled={i === 0}
                     aria-label={`Move ${meta.name} up`}
-                    className="w-7 h-7 rounded bg-gray-800 hover:bg-gray-700 text-gray-300 disabled:opacity-30"
+                    className="w-7 h-7 rounded bg-raised hover:bg-gray-700 text-ink-2 disabled:opacity-30"
                   >
                     ▲
                   </button>
@@ -200,13 +200,13 @@ export function SdrSettings({ node, canEdit }: { node: NodeRecord; canEdit: bool
                     onClick={() => move(i, 1)}
                     disabled={i === rows.length - 1}
                     aria-label={`Move ${meta.name} down`}
-                    className="w-7 h-7 rounded bg-gray-800 hover:bg-gray-700 text-gray-300 disabled:opacity-30"
+                    className="w-7 h-7 rounded bg-raised hover:bg-gray-700 text-ink-2 disabled:opacity-30"
                   >
                     ▼
                   </button>
                 </div>
               )}
-              <span className={`w-32 text-right text-xs ${state === "Running" ? "text-green-400" : "text-gray-500"}`}>
+              <span className={`w-32 text-right text-xs ${state === "Running" ? "text-green-400" : "text-ink-muted"}`}>
                 {state}
               </span>
             </div>
@@ -214,7 +214,7 @@ export function SdrSettings({ node, canEdit }: { node: NodeRecord; canEdit: bool
         })}
       </div>
 
-      <p className="text-xs text-gray-500 font-mono mt-2">
+      <p className="text-xs text-ink-muted font-mono mt-2">
         Every SDR besides OP25&apos;s runs the next enabled service, top first. Pin a service to the SDR with its
         antenna, or leave it on &quot;Any spare SDR&quot;.
       </p>
@@ -235,7 +235,7 @@ export function SdrSettings({ node, canEdit }: { node: NodeRecord; canEdit: bool
           >
             {saving ? "Saving…" : "Save"}
           </button>
-          {message && <span className="text-xs text-gray-500 font-mono">{message}</span>}
+          {message && <span className="text-xs text-ink-muted font-mono">{message}</span>}
         </div>
       )}
     </section>
diff --git a/drb-frontend/components/StatusBadge.tsx b/drb-frontend/components/StatusBadge.tsx
index f6a55df..8c0df30 100644
--- a/drb-frontend/components/StatusBadge.tsx
+++ b/drb-frontend/components/StatusBadge.tsx
@@ -3,7 +3,7 @@ import type { NodeStatus } from "@/lib/types";
 const styles: Record<NodeStatus, string> = {
   online:       "bg-green-950 text-green-400 border border-green-800",
   recording:    "bg-orange-950 text-orange-400 border border-orange-800 animate-pulse",
-  offline:      "bg-gray-900 text-gray-500 border border-gray-700",
+  offline:      "bg-surface text-ink-muted border border-line-strong",
   unconfigured: "bg-indigo-950 text-indigo-400 border border-indigo-800",
 };
 
diff --git a/drb-frontend/components/admin/CameraProvidersTab.tsx b/drb-frontend/components/admin/CameraProvidersTab.tsx
index f5233ec..7b402b2 100644
--- a/drb-frontend/components/admin/CameraProvidersTab.tsx
+++ b/drb-frontend/components/admin/CameraProvidersTab.tsx
@@ -58,16 +58,16 @@ export function CameraProvidersTab() {
 
   return (
     <section className="space-y-3">
-      <p className="text-gray-400 text-xs leading-snug">
+      <p className="text-ink-2 text-xs leading-snug">
         Public camera sources for the Live wall. Every provider is <b>off</b> until enabled here. Licence status comes from the
         camera-sources catalog (2026-10-04); a red or amber licence means DRB does not hold a confirmed right to show that imagery.
         Required attributions render on every camera tile.
       </p>
       {error && <div className="bg-red-950 border border-red-800 rounded-lg p-3 text-red-400 text-sm font-mono break-words">{error}</div>}
       {!providers ? (
-        <p className="text-gray-500 text-sm font-mono">Loading…</p>
+        <p className="text-ink-muted text-sm font-mono">Loading…</p>
       ) : (
-        <div className="bg-gray-900 border border-gray-800 rounded-xl divide-y divide-gray-800">
+        <div className="bg-surface border border-line rounded-xl divide-y divide-line">
           {providers.map((p) => {
             const lic = LICENCE_STYLE[p.licence.status];
             const lockReason = !p.implemented ? "No working adapter (stub)" : p.licence.status === "prohibited" ? "Source terms forbid this use" : null;
@@ -77,8 +77,8 @@ export function CameraProvidersTab() {
                   <div className="min-w-0 space-y-1">
                     <span className={`inline-block text-xs font-semibold px-2 py-0.5 rounded border ${lic.cls}`}>{lic.label}</span>
                     <p className="text-white text-sm font-semibold">{p.name}</p>
-                    <p className="text-gray-400 text-xs">{p.licence.label}</p>
-                    <p className="text-gray-500 text-xs">{p.region} · {p.formats}</p>
+                    <p className="text-ink-2 text-xs">{p.licence.label}</p>
+                    <p className="text-ink-muted text-xs">{p.region} · {p.formats}</p>
                   </div>
                   <div className="shrink-0 text-right space-y-1">
                     <button
@@ -93,25 +93,25 @@ export function CameraProvidersTab() {
                     >
                       <span className={`inline-block h-4 w-4 rounded-full bg-white shadow transition-transform ${p.enabled ? "translate-x-6" : "translate-x-1"}`} />
                     </button>
-                    <p className={`text-[11px] font-mono ${p.serving ? "text-green-400" : "text-gray-500"}`}>
+                    <p className={`text-[11px] font-mono ${p.serving ? "text-green-400" : "text-ink-muted"}`}>
                       {p.serving ? "serving" : lockReason ?? p.not_serving_reason ?? "off"}
                     </p>
                   </div>
                 </div>
-                <div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-[11px] font-mono text-gray-400">
+                <div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-[11px] font-mono text-ink-2">
                   <span>cameras: {p.health ? p.health.count : "—"}</span>
                   <span>last fetch: {fmtEpoch(p.health?.fetched_at)}</span>
                   <span className={p.health?.error ? "text-red-400" : ""}>health: {p.health ? (p.health.error ? "error" : p.health.fetched_at ? "ok" : "not fetched yet") : "n/a"}</span>
                   <span className={p.key_missing ? "text-amber-400" : ""}>{p.key_setting ? `key: ${p.key_missing ? "missing" : "set"}` : "no key needed"}</span>
                 </div>
                 {p.health?.error && <p className="text-[11px] font-mono text-red-400 break-words">{p.health.error}</p>}
-                {p.licence.attribution && <p className="text-[11px] text-gray-400">Attribution shown with imagery: “{p.licence.attribution}”</p>}
+                {p.licence.attribution && <p className="text-[11px] text-ink-2">Attribution shown with imagery: “{p.licence.attribution}”</p>}
                 {p.acknowledgement && (
                   <p className="text-[11px] text-amber-300">
                     Licence warning acknowledged by {p.acknowledgement.by_email || p.acknowledgement.by_uid} on {new Date(p.acknowledgement.at).toLocaleString()}
                   </p>
                 )}
-                <details className="text-[11px] text-gray-500">
+                <details className="text-[11px] text-ink-muted">
                   <summary className="cursor-pointer select-none">Terms & adapter notes</summary>
                   <p className="mt-1">{p.licence.terms}</p>
                   <p className="mt-1">{p.notes}</p>
@@ -129,16 +129,16 @@ export function CameraProvidersTab() {
 
       {confirming && (
         <div className="fixed inset-0 z-50 bg-black/70 flex items-center justify-center p-4" role="alertdialog" aria-modal="true" aria-labelledby="cam-ack-title">
-          <div className="bg-gray-900 border border-red-700 rounded-xl max-w-lg w-full p-5 space-y-3">
+          <div className="bg-surface border border-red-700 rounded-xl max-w-lg w-full p-5 space-y-3">
             <h2 id="cam-ack-title" className="text-white font-semibold">Enable {confirming.name}?</h2>
             <p className="text-red-300 text-sm font-semibold">{LICENCE_STYLE[confirming.licence.status].label}</p>
-            <p className="text-gray-300 text-sm leading-snug">{confirming.licence.warning}</p>
-            <label className="flex items-start gap-2 text-sm text-gray-200">
+            <p className="text-ink-2 text-sm leading-snug">{confirming.licence.warning}</p>
+            <label className="flex items-start gap-2 text-sm text-ink">
               <input type="checkbox" checked={ackChecked} onChange={(e) => setAckChecked(e.target.checked)} className="mt-1" />
               <span>I confirm DRB holds the right to show this source&apos;s imagery. This confirmation is recorded with my account and the time in the audit log.</span>
             </label>
             <div className="flex justify-end gap-2">
-              <button type="button" onClick={() => setConfirming(null)} className="text-sm px-3 py-1.5 rounded border border-gray-700 text-gray-300">Cancel</button>
+              <button type="button" onClick={() => setConfirming(null)} className="text-sm px-3 py-1.5 rounded border border-line-strong text-ink-2">Cancel</button>
               <button type="button" disabled={!ackChecked || busy === confirming.id} onClick={() => toggle(confirming, true, true)}
                 className="text-sm px-3 py-1.5 rounded bg-red-700 text-white disabled:opacity-40">Enable and record</button>
             </div>
diff --git a/drb-frontend/components/admin/OutageProvidersTab.tsx b/drb-frontend/components/admin/OutageProvidersTab.tsx
index 492a7e6..994139d 100644
--- a/drb-frontend/components/admin/OutageProvidersTab.tsx
+++ b/drb-frontend/components/admin/OutageProvidersTab.tsx
@@ -60,7 +60,7 @@ export function OutageProvidersTab() {
 
   return (
     <section className="space-y-3">
-      <p className="text-gray-400 text-xs leading-snug">
+      <p className="text-ink-2 text-xs leading-snug">
         Power-outage sources for the map. Every provider is <b>off</b> until enabled here. Licence status comes from the
         source-terms research on server-26#184 (2026-10-05); a red or amber licence means DRB does not hold a confirmed right
         to show that data. Scraped utility outage maps are never shipped — those sources stay locked until a data-sharing
@@ -68,9 +68,9 @@ export function OutageProvidersTab() {
       </p>
       {error && <div className="bg-red-950 border border-red-800 rounded-lg p-3 text-red-400 text-sm font-mono break-words">{error}</div>}
       {!providers ? (
-        <p className="text-gray-500 text-sm font-mono">Loading…</p>
+        <p className="text-ink-muted text-sm font-mono">Loading…</p>
       ) : (
-        <div className="bg-gray-900 border border-gray-800 rounded-xl divide-y divide-gray-800">
+        <div className="bg-surface border border-line rounded-xl divide-y divide-line">
           {providers.map((p) => {
             const lic = LICENCE_STYLE[p.licence.status];
             const lockReason = !p.implemented ? "No working adapter (stub)" : p.licence.status === "prohibited" ? "Source terms forbid this use" : null;
@@ -80,8 +80,8 @@ export function OutageProvidersTab() {
                   <div className="min-w-0 space-y-1">
                     <span className={`inline-block text-xs font-semibold px-2 py-0.5 rounded border ${lic.cls}`}>{lic.label}</span>
                     <p className="text-white text-sm font-semibold">{p.name}</p>
-                    <p className="text-gray-400 text-xs">{p.licence.label}</p>
-                    <p className="text-gray-500 text-xs">{p.region} · {p.granularity}</p>
+                    <p className="text-ink-2 text-xs">{p.licence.label}</p>
+                    <p className="text-ink-muted text-xs">{p.region} · {p.granularity}</p>
                   </div>
                   <div className="shrink-0 text-right space-y-1">
                     <button
@@ -96,27 +96,27 @@ export function OutageProvidersTab() {
                     >
                       <span className={`inline-block h-4 w-4 rounded-full bg-white shadow transition-transform ${p.enabled ? "translate-x-6" : "translate-x-1"}`} />
                     </button>
-                    <p className={`text-[11px] font-mono ${p.serving ? "text-green-400" : "text-gray-500"}`}>
+                    <p className={`text-[11px] font-mono ${p.serving ? "text-green-400" : "text-ink-muted"}`}>
                       {p.serving ? "serving" : lockReason ?? p.not_serving_reason ?? "off"}
                     </p>
                   </div>
                 </div>
                 {p.implemented && (
-                  <div className="grid grid-cols-2 md:grid-cols-3 gap-2 text-[11px] font-mono text-gray-400">
+                  <div className="grid grid-cols-2 md:grid-cols-3 gap-2 text-[11px] font-mono text-ink-2">
                     <span>counties out: {p.health ? p.health.count : "—"}</span>
                     <span>last fetch: {fmtEpoch(p.health?.fetched_at)}</span>
                     <span className={p.health?.error ? "text-red-400" : ""}>health: {p.health ? (p.health.error ? "error" : p.health.fetched_at ? "ok" : "not fetched yet") : "n/a"}</span>
                   </div>
                 )}
                 {p.health?.error && <p className="text-[11px] font-mono text-red-400 break-words">{p.health.error}</p>}
-                {p.coverage_note && <p className="text-[11px] text-gray-400">{p.coverage_note}</p>}
-                {p.licence.attribution && <p className="text-[11px] text-gray-400">Attribution shown with the data: “{p.licence.attribution}”</p>}
+                {p.coverage_note && <p className="text-[11px] text-ink-2">{p.coverage_note}</p>}
+                {p.licence.attribution && <p className="text-[11px] text-ink-2">Attribution shown with the data: “{p.licence.attribution}”</p>}
                 {p.acknowledgement && (
                   <p className="text-[11px] text-amber-300">
                     Licence warning acknowledged by {p.acknowledgement.by_email || p.acknowledgement.by_uid} on {new Date(p.acknowledgement.at).toLocaleString()}
                   </p>
                 )}
-                <details className="text-[11px] text-gray-500">
+                <details className="text-[11px] text-ink-muted">
                   <summary className="cursor-pointer select-none">Terms & adapter notes</summary>
                   <p className="mt-1">{p.licence.terms}</p>
                   <p className="mt-1">{p.notes}</p>
@@ -134,17 +134,17 @@ export function OutageProvidersTab() {
 
       {confirming && (
         <div className="fixed inset-0 z-50 bg-black/70 flex items-center justify-center p-4" role="alertdialog" aria-modal="true" aria-labelledby="outage-ack-title">
-          <div className="bg-gray-900 border border-red-700 rounded-xl max-w-lg w-full p-5 space-y-3">
+          <div className="bg-surface border border-red-700 rounded-xl max-w-lg w-full p-5 space-y-3">
             <h2 id="outage-ack-title" className="text-white font-semibold">Enable {confirming.name}?</h2>
             <p className="text-red-300 text-sm font-semibold">{LICENCE_STYLE[confirming.licence.status].label}</p>
-            <p className="text-gray-300 text-sm leading-snug">{confirming.licence.warning}</p>
+            <p className="text-ink-2 text-sm leading-snug">{confirming.licence.warning}</p>
             {error && <p className="text-red-400 text-xs font-mono break-words">{error}</p>}
-            <label className="flex items-start gap-2 text-sm text-gray-200">
+            <label className="flex items-start gap-2 text-sm text-ink">
               <input type="checkbox" checked={ackChecked} onChange={(e) => setAckChecked(e.target.checked)} className="mt-1" />
               <span>I confirm DRB holds the right to show this source&apos;s outage data. This confirmation is recorded with my account and the time in the audit log.</span>
             </label>
             <div className="flex justify-end gap-2">
-              <button type="button" onClick={() => setConfirming(null)} className="text-sm px-3 py-1.5 rounded border border-gray-700 text-gray-300">Cancel</button>
+              <button type="button" onClick={() => setConfirming(null)} className="text-sm px-3 py-1.5 rounded border border-line-strong text-ink-2">Cancel</button>
               <button type="button" disabled={!ackChecked || busy === confirming.id} onClick={() => toggle(confirming, true, true)}
                 className="text-sm px-3 py-1.5 rounded bg-red-700 text-white disabled:opacity-40">Enable and record</button>
             </div>
diff --git a/drb-frontend/components/admin/ReplayTab.tsx b/drb-frontend/components/admin/ReplayTab.tsx
index 3d36a05..a94ba55 100644
--- a/drb-frontend/components/admin/ReplayTab.tsx
+++ b/drb-frontend/components/admin/ReplayTab.tsx
@@ -24,9 +24,9 @@ const MODES: { key: ReplayMode; label: string; help: string }[] = [
 const SIGNAL_RESOLVES = ["units_cleared", "llm_closure", "reassignment", "children_resolved"];
 
 const input =
-  "bg-gray-800 border border-gray-700 rounded-lg px-3 py-1.5 text-white text-sm font-mono focus:outline-none focus:border-indigo-500";
+  "bg-raised border border-line-strong rounded-lg px-3 py-1.5 text-white text-sm font-mono focus:outline-none focus:border-indigo-500";
 const btn =
-  "bg-gray-800 hover:bg-gray-700 disabled:opacity-50 border border-gray-700 text-white text-sm font-mono px-4 py-1.5 rounded-lg transition-colors";
+  "bg-raised hover:bg-gray-700 disabled:opacity-50 border border-line-strong text-white text-sm font-mono px-4 py-1.5 rounded-lg transition-colors";
 
 function toLocalInput(d: Date): string {
   const pad = (n: number) => String(n).padStart(2, "0");
@@ -88,18 +88,18 @@ function NewRunForm({ runs, busy, onStarted }: { runs: ReplayRun[]; busy: boolea
   const canStart = est && !est.truncated && est.calls > 0 && !busy && (mode !== "reuse" || sourceRun);
 
   return (
-    <div className="bg-gray-900 border border-gray-800 rounded-xl p-4 space-y-4">
+    <div className="bg-surface border border-line rounded-xl p-4 space-y-4">
       <div className="flex flex-wrap items-end gap-4">
         <div>
-          <label className="text-xs text-gray-400 block mb-1">From</label>
+          <label className="text-xs text-ink-2 block mb-1">From</label>
           <input type="datetime-local" value={from} max={to} onChange={(e) => setFrom(e.target.value)} className={input} />
         </div>
         <div>
-          <label className="text-xs text-gray-400 block mb-1">To</label>
+          <label className="text-xs text-ink-2 block mb-1">To</label>
           <input type="datetime-local" value={to} min={from} onChange={(e) => setTo(e.target.value)} className={input} />
         </div>
         <div>
-          <label className="text-xs text-gray-400 block mb-1">Label</label>
+          <label className="text-xs text-ink-2 block mb-1">Label</label>
           <input value={label} onChange={(e) => setLabel(e.target.value)} placeholder="what changed?" className={`${input} w-56`} />
         </div>
       </div>
@@ -109,14 +109,14 @@ function NewRunForm({ runs, busy, onStarted }: { runs: ReplayRun[]; busy: boolea
           <label key={m.key} className="flex items-start gap-2 text-sm font-mono cursor-pointer">
             <input type="radio" checked={mode === m.key} onChange={() => setMode(m.key)} className="mt-1" />
             <span className="text-white">{m.label}</span>
-            <span className="text-gray-500 text-xs mt-0.5">{m.help}</span>
+            <span className="text-ink-muted text-xs mt-0.5">{m.help}</span>
           </label>
         ))}
       </div>
 
       {mode === "reuse" && (
         <div>
-          <label className="text-xs text-gray-400 block mb-1">Reuse extraction from</label>
+          <label className="text-xs text-ink-2 block mb-1">Reuse extraction from</label>
           <select value={sourceRun} onChange={(e) => setSourceRun(e.target.value)} className={input}>
             <option value="">— pick a finished run —</option>
             {sources.map((r) => (
@@ -125,15 +125,15 @@ function NewRunForm({ runs, busy, onStarted }: { runs: ReplayRun[]; busy: boolea
               </option>
             ))}
           </select>
-          <p className="text-xs text-gray-500 mt-1">Set the range to match that run; calls outside it are skipped.</p>
+          <p className="text-xs text-ink-muted mt-1">Set the range to match that run; calls outside it are skipped.</p>
         </div>
       )}
 
       {systems.length > 1 && (
         <div className="flex flex-wrap gap-3">
-          <span className="text-xs text-gray-400">Systems (none = all):</span>
+          <span className="text-xs text-ink-2">Systems (none = all):</span>
           {systems.map((s) => (
-            <label key={s.system_id} className="flex items-center gap-1 text-xs font-mono text-gray-300 cursor-pointer">
+            <label key={s.system_id} className="flex items-center gap-1 text-xs font-mono text-ink-2 cursor-pointer">
               <input type="checkbox" checked={systemIds.includes(s.system_id)} onChange={() => toggleSystem(s.system_id)} />
               {s.name}
             </label>
@@ -154,7 +154,7 @@ function NewRunForm({ runs, busy, onStarted }: { runs: ReplayRun[]; busy: boolea
       </div>
 
       {est && (
-        <p className="text-sm font-mono text-gray-300">
+        <p className="text-sm font-mono text-ink-2">
           {est.truncated ? (
             <span className="text-red-400">More than {est.max_calls} calls — narrow the range.</span>
           ) : (
@@ -193,15 +193,15 @@ function RunsTable({
     onChanged();
   }
 
-  if (!runs.length) return <p className="text-sm text-gray-500 font-mono">No runs yet.</p>;
+  if (!runs.length) return <p className="text-sm text-ink-muted font-mono">No runs yet.</p>;
 
-  const th = "text-left text-xs text-gray-500 font-normal px-2 py-1.5 whitespace-nowrap";
+  const th = "text-left text-xs text-ink-muted font-normal px-2 py-1.5 whitespace-nowrap";
   const td = "px-2 py-1.5 whitespace-nowrap";
   return (
     <div className="overflow-x-auto">
       <table className="w-full text-sm font-mono">
         <thead>
-          <tr className="border-b border-gray-800">
+          <tr className="border-b border-line">
             <th className={th}>Run</th>
             <th className={th}>Range</th>
             <th className={th}>Status</th>
@@ -222,13 +222,13 @@ function RunsTable({
               <tr
                 key={r.run_id}
                 onClick={() => onSelect(r.run_id)}
-                className={`border-b border-gray-800/60 cursor-pointer ${selected === r.run_id ? "bg-gray-800/60" : "hover:bg-gray-900"}`}
+                className={`border-b border-line/60 cursor-pointer ${selected === r.run_id ? "bg-raised/60" : "hover:bg-raised"}`}
               >
                 <td className={td}>
                   <div className="text-white">{r.label || r.run_id}</div>
-                  <div className="text-xs text-gray-500">{r.mode} · {r.git_sha?.slice(0, 7)} · {fmtTime(r.created_at)}</div>
+                  <div className="text-xs text-ink-muted">{r.mode} · {r.git_sha?.slice(0, 7)} · {fmtTime(r.created_at)}</div>
                 </td>
-                <td className={`${td} text-xs text-gray-400`}>{fmtTime(r.date_from)} → {fmtTime(r.date_to)}</td>
+                <td className={`${td} text-xs text-ink-2`}>{fmtTime(r.date_from)} → {fmtTime(r.date_to)}</td>
                 <td className={td}>
                   {running ? (
                     <span className="text-amber-400">{r.progress.done}/{r.progress.total}</span>
@@ -245,7 +245,7 @@ function RunsTable({
                     <>
                       <span className="text-green-400">{sum(m.resolved_via, SIGNAL_RESOLVES)}</span>
                       {" / "}
-                      <span className="text-gray-400">{m.resolved_via.idle_timeout ?? 0}</span>
+                      <span className="text-ink-2">{m.resolved_via.idle_timeout ?? 0}</span>
                     </>
                   ) : "—"}
                 </td>
@@ -255,7 +255,7 @@ function RunsTable({
                   {running ? (
                     <button onClick={() => cancel(r.run_id)} className="text-xs text-amber-400 hover:text-amber-300">cancel</button>
                   ) : (
-                    <button onClick={() => remove(r.run_id)} className="text-xs text-gray-500 hover:text-red-400">delete</button>
+                    <button onClick={() => remove(r.run_id)} className="text-xs text-ink-muted hover:text-red-400">delete</button>
                   )}
                 </td>
               </tr>
@@ -278,21 +278,21 @@ function CallLine({ call }: { call: ReplayCallRow }) {
     } catch { /* audio is a convenience */ }
   }
   return (
-    <div className="py-1.5 border-t border-gray-800/60 text-xs font-mono">
-      <div className="flex flex-wrap gap-2 text-gray-500">
+    <div className="py-1.5 border-t border-line/60 text-xs font-mono">
+      <div className="flex flex-wrap gap-2 text-ink-muted">
         <span>{fmtTime(call.started_at)}</span>
         <span>{call.talkgroup_name}</span>
         {call.corr_path.map((p, i) => <span key={i} className="text-indigo-400">{p}</span>)}
         {call.units?.length ? <span>units {call.units.join(", ")}</span> : null}
         {call.cleared_units?.length ? <span className="text-green-400">cleared {call.cleared_units.join(", ")}</span> : null}
-        {call.skip_reason && <span className="text-gray-600">{call.skip_reason}</span>}
+        {call.skip_reason && <span className="text-ink-muted">{call.skip_reason}</span>}
         {audio ? (
           <audio src={audio} controls autoPlay className="h-6" />
         ) : (
-          <button onClick={play} className="text-gray-400 hover:text-white">▶ audio</button>
+          <button onClick={play} className="text-ink-2 hover:text-white">▶ audio</button>
         )}
       </div>
-      <div className="text-gray-200 mt-0.5">{call.transcript || <span className="text-gray-600">(no transcript)</span>}</div>
+      <div className="text-ink mt-0.5">{call.transcript || <span className="text-ink-muted">(no transcript)</span>}</div>
     </div>
   );
 }
@@ -301,13 +301,13 @@ function IncidentCard({ inc }: { inc: ReplayIncident }) {
   const [open, setOpen] = useState(false);
   const signal = inc.resolved_via && SIGNAL_RESOLVES.includes(inc.resolved_via);
   return (
-    <div className="bg-gray-900 border border-gray-800 rounded-lg px-3 py-2">
+    <div className="bg-surface border border-line rounded-lg px-3 py-2">
       <button onClick={() => setOpen(!open)} className="w-full text-left flex flex-wrap items-center gap-x-3 gap-y-1 text-sm font-mono">
-        <span className="text-gray-500">{open ? "▾" : "▸"}</span>
+        <span className="text-ink-muted">{open ? "▾" : "▸"}</span>
         <span className="text-white">{inc.title || inc.incident_id}</span>
-        <span className="text-gray-500 text-xs">{inc.calls.length} call{inc.calls.length !== 1 ? "s" : ""}</span>
-        <span className="text-gray-500 text-xs">{fmtTime(inc.started_at)} → {fmtTime(inc.resolved_at)}</span>
-        <span className={`text-xs ${signal ? "text-green-400" : "text-gray-500"}`}>{inc.resolved_via ?? inc.status}</span>
+        <span className="text-ink-muted text-xs">{inc.calls.length} call{inc.calls.length !== 1 ? "s" : ""}</span>
+        <span className="text-ink-muted text-xs">{fmtTime(inc.started_at)} → {fmtTime(inc.resolved_at)}</span>
+        <span className={`text-xs ${signal ? "text-green-400" : "text-ink-muted"}`}>{inc.resolved_via ?? inc.status}</span>
         {inc.location_coords && <span className="text-xs text-indigo-400">📍 {inc.location}</span>}
       </button>
       {open && <div className="mt-2">{inc.calls.map((c) => <CallLine key={c.call_id} call={c} />)}</div>}
@@ -347,22 +347,22 @@ function RunDetail({ run }: { run: ReplayRun }) {
             ["With units cleared", m.incidents_with_units_cleared],
             ["With map pin", m.incidents_with_coords],
           ].map(([k, v]) => (
-            <div key={k as string} className="bg-gray-900 border border-gray-800 rounded-lg p-2">
-              <div className="text-gray-500">{k}</div>
+            <div key={k as string} className="bg-surface border border-line rounded-lg p-2">
+              <div className="text-ink-muted">{k}</div>
               <div className="text-white text-base">{v}</div>
             </div>
           ))}
         </div>
       )}
       {m && (
-        <p className="text-xs font-mono text-gray-500">
+        <p className="text-xs font-mono text-ink-muted">
           resolved: {Object.entries(m.resolved_via).map(([k, v]) => `${k} ${v}`).join(" · ")}
           <br />
           paths: {Object.entries(m.corr_path).map(([k, v]) => `${k} ${v}`).join(" · ")}
         </p>
       )}
       {m?.gemini_usage && Object.keys(m.gemini_usage).length > 0 && (
-        <p className="text-xs font-mono text-gray-500">
+        <p className="text-xs font-mono text-ink-muted">
           Gemini tokens:{" "}
           {Object.entries(m.gemini_usage)
             .map(([k, u]) => `${k} ${u.calls} calls, in ${u.in.toLocaleString()} / out ${u.out.toLocaleString()} / thinking ${u.thinking.toLocaleString()}`)
@@ -380,7 +380,7 @@ function RunDetail({ run }: { run: ReplayRun }) {
           {run.errors.map((e, i) => <div key={i}>{e}</div>)}
         </details>
       )}
-      {run.status === "running" && <p className="text-sm text-gray-500 font-mono">Incidents appear when the run finishes.</p>}
+      {run.status === "running" && <p className="text-sm text-ink-muted font-mono">Incidents appear when the run finishes.</p>}
       {error && <p className="text-red-400 text-sm font-mono">{error}</p>}
       {data && (
         <>
@@ -389,20 +389,20 @@ function RunDetail({ run }: { run: ReplayRun }) {
               <button
                 key={f}
                 onClick={() => setFilter(f)}
-                className={`px-3 py-1 rounded-md ${filter === f ? "bg-gray-800 text-white" : "text-gray-500 hover:text-gray-300"}`}
+                className={`px-3 py-1 rounded-md ${filter === f ? "bg-raised text-white" : "text-ink-muted hover:text-ink"}`}
               >
                 {f === "all" ? `All (${data.incidents.length})` : f === "multi" ? "Multi-call" : "Single-call"}
               </button>
             ))}
             <button
               onClick={() => setShowOrphans(!showOrphans)}
-              className={`px-3 py-1 rounded-md ${showOrphans ? "bg-gray-800 text-white" : "text-gray-500 hover:text-gray-300"}`}
+              className={`px-3 py-1 rounded-md ${showOrphans ? "bg-raised text-white" : "text-ink-muted hover:text-ink"}`}
             >
               Orphans ({data.orphans.length})
             </button>
           </div>
           {showOrphans ? (
-            <div className="bg-gray-900 border border-gray-800 rounded-lg px-3 py-2">
+            <div className="bg-surface border border-line rounded-lg px-3 py-2">
               {data.orphans.map((c) => <CallLine key={c.call_id} call={c} />)}
             </div>
           ) : (
@@ -443,7 +443,7 @@ export function ReplayTab() {
 
   return (
     <div className="space-y-5">
-      <p className="text-xs text-gray-500 font-mono">
+      <p className="text-xs text-ink-muted font-mono">
         Re-run the pipeline over a past time range, in the calls&apos; original order, into a sandbox — live incidents are never
         touched. Replay the same range after each change and compare the rows below. A run starts with no incidents
         open, so its first ~90 minutes split more than live did — compare runs over the same range, not a run against live.
diff --git a/drb-frontend/components/live/WallPanels.tsx b/drb-frontend/components/live/WallPanels.tsx
index 82fb7c0..586aca1 100644
--- a/drb-frontend/components/live/WallPanels.tsx
+++ b/drb-frontend/components/live/WallPanels.tsx
@@ -51,7 +51,7 @@ export function CameraTile({ cam, feed, km, onOpen }: { cam: Camera; feed?: Came
   return (
     <button type="button" onClick={onOpen} title={cam.name} className="relative block w-full text-left rounded-md overflow-hidden border border-line bg-black group">
       <CameraFeed camera={cam} credit={feed} className="w-full aspect-video" />
-      {km != null && <span className="absolute top-1 right-1 bg-black/65 text-white font-mono text-[9px] px-1 rounded-sm">{km.toFixed(1)} km</span>}
+      {km != null && <span className="absolute top-1 right-1 bg-black/65 text-white font-mono text-[10px] px-1 rounded-sm">{km.toFixed(1)} km</span>}
       <span className="block px-1.5 py-0.5 text-[10px] text-ink-2 bg-surface truncate group-hover:text-ink">{cam.name || cam.id}</span>
     </button>
   );
@@ -277,7 +277,7 @@ function WindContext({ head }: { head: LatLon | null }) {
       {calm ? "" : ` ${dir}`}
       {" · "}{w.station}{w.station_name ? ` (${w.station_name})` : ""}, {w.distance_km.toFixed(1)} km away
       {obsLabel ? ` · observed ${obsLabel}` : ""}
-      {w.stale && <span className="ml-1 bg-accent text-white rounded px-1 text-[9px] font-semibold" title="This station's latest report is over 2 h old">STALE</span>}
+      {w.stale && <span className="ml-1 bg-accent text-white rounded px-1 text-[10px] font-semibold" title="This station's latest report is over 2 h old">STALE</span>}
       <SourceCredit credit={METAR_CREDIT}
         updated={`fetched ${fetchedLabel(d.fetched_at) ?? "—"}${d.error ? " · feed error, showing the last good report" : ""}${state.error ? " · could not refresh" : ""}`} />
     </li>
@@ -350,7 +350,7 @@ export function RegionPanel({
             {wallCameras.map(({ cam, km }) => (
               <div key={cam.id} className="relative">
                 <CameraTile cam={cam} feed={feeds.get(cam.provider)} km={km} onOpen={() => onOpenCamera(cam)} />
-                {pinnedIds.has(cam.id) && <span className="absolute bottom-6 right-1 bg-accent text-white text-[9px] px-1 rounded-sm">PINNED</span>}
+                {pinnedIds.has(cam.id) && <span className="absolute bottom-6 right-1 bg-accent text-white text-[10px] px-1 rounded-sm">PINNED</span>}
               </div>
             ))}
           </div>
@@ -465,7 +465,7 @@ export function IncidentPanel({
           <span className="font-semibold uppercase tracking-wide" style={{ color }}>{sevLabel(inc.severity)}</span>
           <span className="text-ink-muted">{inc.type ?? "other"}</span>
           {resolved ? <span className="text-ink-muted">resolved</span>
-            : onAir ? <span className="bg-accent text-white rounded px-1 text-[9px] font-semibold">ON AIR</span>
+            : onAir ? <span className="bg-accent text-white rounded px-1 text-[10px] font-semibold">ON AIR</span>
             : <span className="text-ink-muted">active</span>}
           <span className="ml-auto font-mono text-ink-muted">{inc.incident_id.slice(0, 8)}</span>
         </div>
diff --git a/drb-frontend/components/ui/EmptyState.tsx b/drb-frontend/components/ui/EmptyState.tsx
index a9917bd..75d2b6e 100644
--- a/drb-frontend/components/ui/EmptyState.tsx
+++ b/drb-frontend/components/ui/EmptyState.tsx
@@ -7,7 +7,7 @@ interface EmptyStateProps {
   action?: ReactNode;
 }
 
-/** Consistent "nothing here yet" panel — replaces the ad-hoc `<p className="text-gray-600">` scattered across pages. */
+/** Consistent "nothing here yet" panel — replaces the ad-hoc `<p className="text-ink-muted">` scattered across pages. */
 export function EmptyState({ icon, title, description, action }: EmptyStateProps) {
   return (
     <div className="flex flex-col items-center justify-center text-center py-12 px-6 border border-dashed border-line-strong rounded-xl">
diff --git a/drb-frontend/components/ui/MachineOutputNotice.tsx b/drb-frontend/components/ui/MachineOutputNotice.tsx
index 7848d1e..555ed7b 100644
--- a/drb-frontend/components/ui/MachineOutputNotice.tsx
+++ b/drb-frontend/components/ui/MachineOutputNotice.tsx
@@ -78,7 +78,7 @@ export function MachineOutputNotice({ variant = "block", detail, className }: Pr
     return (
       <p
         role="note"
-        className={["text-[10px] leading-snug text-gray-500 mt-1.5 pt-1.5 border-t border-gray-200", className ?? ""]
+        className={["text-[10px] leading-snug text-ink-muted mt-1.5 pt-1.5 border-t border-gray-200", className ?? ""]
           .filter(Boolean)
           .join(" ")}
       >