diff --git a/services/frontend/src/app/(dashboard)/analysis/view.tsx b/services/frontend/src/app/(dashboard)/analysis/view.tsx
index 981ecd30..3b09aac1 100644
--- a/services/frontend/src/app/(dashboard)/analysis/view.tsx
+++ b/services/frontend/src/app/(dashboard)/analysis/view.tsx
@@ -116,16 +116,16 @@ export function AnalysisView() {
   return (
     <div className="space-y-4">
       {/* Tactical HUD Header Bar */}
-      <div className="flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] pb-3">
+      <div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
         <div className="flex items-center gap-2.5">
-          <span className="h-2 w-2 rounded-full bg-[#7170ff] shadow-[0_0_8px_#7170ff]" />
-          <h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase">
+          <span className="h-2 w-2 rounded-full bg-signal shadow-[0_0_8px_var(--color-signal-glow)]" />
+          <h1 className="font-mono text-xs font-semibold tracking-wide text-ink uppercase">
             Deep Scan · Semantic Search & Telemetry Analysis
           </h1>
         </div>
-        <div className="flex items-center gap-2 font-mono text-[11px] text-[#8a8f98]">
+        <div className="flex items-center gap-2 font-mono text-[11px] text-ink-muted">
           <span>ENGINE:</span>
-          <span className="rounded bg-white/[0.04] px-1.5 py-0.5 font-medium text-[#7170ff] border border-white/[0.06]">
+          <span className="rounded bg-signal/15 px-2 py-0.5 font-medium text-signal border border-signal/30">
             {query.trim().length >= 2 ? "SCANNING" : "STANDBY"}
           </span>
         </div>
@@ -134,14 +134,14 @@ export function AnalysisView() {
       {/* Hero Query Stage */}
       <GlassPanel className="p-5">
         <div className="flex items-center gap-3">
-          <span className="flex size-8 items-center justify-center rounded-[6px] border border-white/[0.08] bg-[#7170ff]/10 text-[#7170ff]">
+          <span className="flex size-8 items-center justify-center rounded-[6px] border border-signal/30 bg-signal/10 text-signal">
             <Sparkles className="size-4" />
           </span>
           <div>
             <h2 className="text-base font-semibold text-ink">
               Cross-Guild Archive Intelligence
             </h2>
-            <p className="font-mono text-[11px] text-[#8a8f98]">
+            <p className="font-mono text-[11px] text-ink-muted">
               Query vectorized messages, heuristic flags, and user behavior
             </p>
           </div>
@@ -184,7 +184,7 @@ export function AnalysisView() {
               {(search.data ?? []).map((m) => (
                 <div
                   key={m.id}
-                  className="search-result-card flex items-start gap-3 rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-3 transition-all hover:border-white/[0.12] hover:bg-white/[0.04]"
+                  className="search-result-card hud-card flex items-start gap-3 p-3 transition-all"
                 >
                   <Avatar src={m.avatar_url} name={m.username} size={32} />
                   <div className="min-w-0 flex-1">
@@ -224,8 +224,7 @@ export function AnalysisView() {
               eyebrow="engagement"
               title={
                 <span className="flex items-center gap-1.5">
-                  <TrendingUp className="size-3.5 text-[#7170ff]" /> Top
-                  Reactors
+                  <TrendingUp className="size-3.5 text-signal" /> Top Reactors
                 </span>
               }
             />
@@ -247,14 +246,14 @@ export function AnalysisView() {
                     <span className="w-24 shrink-0 truncate font-mono text-xs text-ink sm:w-32">
                       {r.username}
                     </span>
-                    <div className="h-1 flex-1 overflow-hidden rounded-full bg-white/[0.06]">
+                    <div className="h-1.5 flex-1 overflow-hidden rounded-full bg-surface-2">
                       <div
-                        className="reactor-bar-fill h-full rounded-full bg-gradient-to-r from-[#5e6ad2] to-[#7170ff]"
+                        className="reactor-bar-fill h-full rounded-full bg-signal"
                         style={{ width: `${pct}%` }}
                       />
                     </div>
                     <span
-                      className="reactor-count font-mono w-10 text-right text-[11px] font-semibold text-[#7170ff]"
+                      className="reactor-count font-mono w-10 text-right text-[11px] font-semibold text-signal"
                       data-target={r.net_count}
                     >
                       +0
@@ -275,8 +274,7 @@ export function AnalysisView() {
               eyebrow="volume"
               title={
                 <span className="flex items-center gap-1.5">
-                  <Hash className="size-3.5 text-[#7170ff]" /> Top Active
-                  Channels
+                  <Hash className="size-3.5 text-signal" /> Top Active Channels
                 </span>
               }
             />
@@ -284,13 +282,13 @@ export function AnalysisView() {
               {(channels ?? []).slice(0, 6).map((c) => (
                 <div
                   key={c.channel_id}
-                  className="channel-row flex items-center justify-between rounded-[6px] border border-white/[0.04] bg-white/[0.01] p-2 text-xs hover:bg-white/[0.03]"
+                  className="channel-row hud-card flex items-center justify-between p-2 text-xs"
                 >
                   <span className="flex items-center gap-1.5 truncate font-mono text-xs text-ink">
-                    <Hash className="size-3 text-[#7170ff]" />
+                    <Hash className="size-3 text-signal" />
                     {c.channel_name ?? c.channel_id.slice(0, 10)}
                   </span>
-                  <span className="font-mono text-[10px] text-[#8a8f98]">
+                  <span className="font-mono text-[10px] text-ink-muted">
                     {c.total_messages.toLocaleString()} msgs
                   </span>
                 </div>
diff --git a/services/frontend/src/app/(dashboard)/dashboard/view.tsx b/services/frontend/src/app/(dashboard)/dashboard/view.tsx
index cd0674ab..c8875240 100644
--- a/services/frontend/src/app/(dashboard)/dashboard/view.tsx
+++ b/services/frontend/src/app/(dashboard)/dashboard/view.tsx
@@ -102,17 +102,17 @@ export function DashboardView({
   return (
     <PageTransition>
       <div ref={hudRef} className="space-y-4">
-        {/* Precision Sub-Header Bar */}
-        <div className="linear-tile flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] pb-3">
+        {/* Tactical HUD Header Bar */}
+        <div className="linear-tile flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
           <div className="flex items-center gap-2.5">
-            <span className="h-2 w-2 rounded-full bg-[#7170ff] shadow-[0_0_8px_#7170ff]" />
-            <h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase">
+            <span className="h-2 w-2 rounded-full bg-signal shadow-[0_0_8px_var(--color-signal-glow)]" />
+            <h1 className="font-mono text-xs font-semibold tracking-wide text-ink uppercase">
               Telemetry Overview · Node 01
             </h1>
           </div>
-          <div className="flex items-center gap-2 font-mono text-[11px] text-[#8a8f98]">
+          <div className="flex items-center gap-2 font-mono text-[11px] text-ink-muted">
             <span>SIGNAL:</span>
-            <span className="rounded bg-white/[0.04] px-1.5 py-0.5 font-medium text-[#7170ff] border border-white/[0.06]">
+            <span className="rounded bg-signal/15 px-2 py-0.5 font-medium text-signal border border-signal/30">
               STABLE_STREAM
             </span>
           </div>
@@ -174,20 +174,16 @@ export function DashboardView({
                 />
               </div>
             </div>
-            <div className="grid grid-cols-2 gap-2 border-t border-white/[0.06] pt-3 text-center">
+            <div className="grid grid-cols-2 gap-2 border-t border-hairline pt-3 text-center">
               <div>
-                <div className="font-mono text-[10px] text-[#8a8f98]">
-                  CLEAN
-                </div>
-                <div className="font-sans text-sm font-semibold text-[#10b981]">
+                <div className="eyebrow">CLEAN</div>
+                <div className="font-sans text-sm font-semibold text-success">
                   {formatNumber(s.total_clean)}
                 </div>
               </div>
               <div>
-                <div className="font-mono text-[10px] text-[#8a8f98]">
-                  FLAGGED
-                </div>
-                <div className="font-sans text-sm font-semibold text-[#f43f5e]">
+                <div className="eyebrow">FLAGGED</div>
+                <div className="font-sans text-sm font-semibold text-vermilion">
                   {formatNumber(s.total_flagged)}
                 </div>
               </div>
@@ -207,12 +203,12 @@ export function DashboardView({
                 {reactions.slice(0, 4).map((r) => (
                   <div
                     key={r.message_id}
-                    className="flex items-center justify-between rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-2.5 hover:bg-white/[0.04]"
+                    className="hud-card flex items-center justify-between p-2.5"
                   >
-                    <span className="truncate pr-2 text-xs text-[#d0d6e0]">
+                    <span className="truncate pr-2 text-xs text-ink-soft">
                       {r.content || "[Media/Attachment]"}
                     </span>
-                    <span className="font-mono text-xs font-semibold text-[#7170ff] shrink-0">
+                    <span className="font-mono text-xs font-semibold text-signal shrink-0">
                       {formatNumber(r.reaction_count)} reactions
                     </span>
                   </div>
@@ -227,23 +223,23 @@ export function DashboardView({
               <div className="mt-2 space-y-1.5">
                 <Link
                   href="/moderation"
-                  className="flex items-center justify-between rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-2.5 text-xs text-[#d0d6e0] transition-colors hover:border-white/[0.12] hover:bg-white/[0.04] hover:text-[#f7f8f8]"
+                  className="hud-card flex items-center justify-between p-2.5 text-xs text-ink-soft transition-colors hover:text-ink"
                 >
                   <span className="flex items-center gap-2">
-                    <Shield className="size-3.5 text-[#7170ff]" />
+                    <Shield className="size-3.5 text-signal" />
                     Review Live Moderation Queue
                   </span>
-                  <ChevronRight className="size-3.5 text-[#8a8f98]" />
+                  <ChevronRight className="size-3.5 text-ink-muted" />
                 </Link>
                 <Link
                   href="/voice"
-                  className="flex items-center justify-between rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-2.5 text-xs text-[#d0d6e0] transition-colors hover:border-white/[0.12] hover:bg-white/[0.04] hover:text-[#f7f8f8]"
+                  className="hud-card flex items-center justify-between p-2.5 text-xs text-ink-soft transition-colors hover:text-ink"
                 >
                   <span className="flex items-center gap-2">
-                    <AudioWaveform className="size-3.5 text-[#10b981]" />
+                    <AudioWaveform className="size-3.5 text-success" />
                     Inspect Active Voice Stages
                   </span>
-                  <ChevronRight className="size-3.5 text-[#8a8f98]" />
+                  <ChevronRight className="size-3.5 text-ink-muted" />
                 </Link>
               </div>
             </div>
diff --git a/services/frontend/src/app/(dashboard)/media/view.tsx b/services/frontend/src/app/(dashboard)/media/view.tsx
index 67675ad7..be5859d6 100644
--- a/services/frontend/src/app/(dashboard)/media/view.tsx
+++ b/services/frontend/src/app/(dashboard)/media/view.tsx
@@ -98,26 +98,26 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
     <PageTransition>
       <div ref={mediaRef} className="space-y-4">
         {/* Precision Sub-Header Bar */}
-        <div className="media-tile flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] pb-3">
+        <div className="media-tile flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
           <div className="flex items-center gap-2.5">
             <span
               className={`h-2 w-2 rounded-full ${
                 playing
-                  ? "bg-[#7170ff] shadow-[0_0_8px_#7170ff]"
-                  : "bg-[#8a8f98]"
+                  ? "bg-signal shadow-[0_0_8px_var(--color-signal-glow)]"
+                  : "bg-ink-muted"
               }`}
             />
-            <h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase">
+            <h1 className="font-mono text-xs font-semibold tracking-wide text-ink uppercase">
               Audio Engine · Media Gateway
             </h1>
           </div>
           <div className="flex items-center gap-2 font-mono text-[11px]">
-            <span className="text-[#8a8f98]">ENGINE:</span>
+            <span className="text-ink-muted">ENGINE:</span>
             <span
               className={`rounded px-1.5 py-0.5 font-medium border ${
                 playing
-                  ? "border-[#7170ff]/30 bg-[#7170ff]/10 text-[#7170ff]"
-                  : "border-white/[0.06] bg-white/[0.02] text-[#8a8f98]"
+                  ? "border-signal/30 bg-signal/10 text-signal"
+                  : "border-hairline bg-surface-2 text-ink-muted"
               }`}
             >
               {playing ? "STREAMING" : "IDLE"}
@@ -130,16 +130,16 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
           <GlassPanel className="p-5">
             <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
               <div className="flex items-center gap-3.5">
-                <div className="flex size-11 items-center justify-center rounded-[8px] border border-white/[0.08] bg-white/[0.03] text-[#7170ff]">
+                <div className="flex size-11 items-center justify-center rounded-[8px] border border-hairline bg-surface-2 text-signal">
                   <Disc
-                    className={`size-6 ${playing ? "animate-spin-disc text-[#7170ff]" : "text-[#8a8f98]"}`}
+                    className={`size-6 ${playing ? "animate-spin-disc text-signal" : "text-ink-muted"}`}
                   />
                 </div>
                 <div>
-                  <div className="text-sm font-semibold tracking-tight text-[#f7f8f8]">
+                  <div className="text-sm font-semibold tracking-tight text-ink">
                     {current?.title ?? "No Active Media Stream"}
                   </div>
-                  <div className="font-mono text-[11px] text-[#8a8f98]">
+                  <div className="font-mono text-[11px] text-ink-muted">
                     {current
                       ? `${formatDuration(current.durationMs ?? 0)} · High Fidelity Stream`
                       : "Queue a track via URL below"}
@@ -153,9 +153,7 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
                   variant="ghost"
                   size="sm"
                   onClick={() => loop.mutateAsync()}
-                  className={
-                    media?.loop ? "border-[#7170ff] text-[#7170ff]" : ""
-                  }
+                  className={media?.loop ? "border-signal text-signal" : ""}
                 >
                   <Repeat className="size-3.5" />
                 </Button>
@@ -177,7 +175,7 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
             </div>
 
             {/* Quick URL Input */}
-            <div className="mt-4 flex gap-2 border-t border-white/[0.06] pt-4">
+            <div className="mt-4 flex gap-2 border-t border-hairline pt-4">
               <Input
                 placeholder="Paste YouTube, SoundCloud, or Direct Stream URL..."
                 value={url}
@@ -211,19 +209,19 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
             />
             <div className="mt-3 space-y-2">
               {queueList.length === 0 ? (
-                <div className="py-8 text-center font-mono text-xs text-[#8a8f98]">
+                <div className="py-8 text-center font-mono text-xs text-ink-muted">
                   QUEUE EMPTY
                 </div>
               ) : (
                 queueList.map((item, idx) => (
                   <div
                     key={item.id ?? idx}
-                    className="flex items-center justify-between rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-2.5 text-xs text-[#d0d6e0]"
+                    className="flex items-center justify-between rounded-[6px] border border-hairline bg-surface-2 p-2.5 text-xs text-ink-soft"
                   >
                     <span className="truncate pr-2 font-medium">
                       {item.title}
                     </span>
-                    <span className="font-mono text-[10px] text-[#8a8f98] shrink-0">
+                    <span className="font-mono text-[10px] text-ink-muted shrink-0">
                       {formatDuration(item.durationMs ?? 0)}
                     </span>
                   </div>
diff --git a/services/frontend/src/app/(dashboard)/messages/view.tsx b/services/frontend/src/app/(dashboard)/messages/view.tsx
index 53ec9395..ed1574f8 100644
--- a/services/frontend/src/app/(dashboard)/messages/view.tsx
+++ b/services/frontend/src/app/(dashboard)/messages/view.tsx
@@ -227,16 +227,16 @@ export function MessagesView({
   return (
     <div className="space-y-4">
       {/* Tactical HUD Header Bar */}
-      <div className="flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] pb-3">
+      <div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
         <div className="flex items-center gap-2.5">
-          <span className="h-2 w-2 rounded-full bg-[#7170ff] shadow-[0_0_8px_#7170ff]" />
-          <h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase">
+          <span className="h-2 w-2 rounded-full bg-signal shadow-[0_0_8px_var(--color-signal-glow)]" />
+          <h1 className="font-mono text-xs font-semibold tracking-wide text-ink uppercase">
             Chat Log Stream · Ingestion Stream
           </h1>
         </div>
-        <div className="flex items-center gap-2 font-mono text-[11px] text-[#8a8f98]">
+        <div className="flex items-center gap-2 font-mono text-[11px] text-ink-muted">
           <span>MODE:</span>
-          <span className="rounded bg-white/[0.04] px-1.5 py-0.5 font-medium text-[#7170ff] border border-white/[0.06]">
+          <span className="rounded bg-signal/15 px-2 py-0.5 font-medium text-signal border border-signal/30">
             {searching ? "SEARCH_ACTIVE" : viewMode.toUpperCase()}
           </span>
         </div>
@@ -266,14 +266,14 @@ export function MessagesView({
             onChange={(e) => setQuery(e.target.value)}
           />
         </div>
-        <div className="flex items-center gap-1.5 rounded-[6px] border border-white/[0.08] bg-white/[0.02] p-0.5">
+        <div className="flex items-center gap-1.5 rounded-[6px] border border-hairline bg-surface-2 p-0.5">
           <button
             type="button"
             onClick={() => setSemanticMode(false)}
             className={`rounded-[4px] px-2.5 py-1 font-mono text-[10px] font-medium transition-all ${
               !semanticMode
-                ? "bg-white/[0.08] text-white border border-white/[0.12]"
-                : "text-[#8a8f98] hover:text-[#d0d6e0]"
+                ? "bg-surface text-ink border border-hairline-focus shadow-xs"
+                : "text-ink-muted hover:text-ink"
             }`}
           >
             EXACT
@@ -283,8 +283,8 @@ export function MessagesView({
             onClick={() => setSemanticMode(true)}
             className={`flex items-center gap-1 rounded-[4px] px-2.5 py-1 font-mono text-[10px] font-medium transition-all ${
               semanticMode
-                ? "bg-[#7170ff]/20 text-[#7170ff] border border-[#7170ff]/30"
-                : "text-[#8a8f98] hover:text-[#d0d6e0]"
+                ? "bg-signal/20 text-signal border border-signal/40 shadow-xs"
+                : "text-ink-muted hover:text-ink"
             }`}
           >
             <Sparkles className="size-3" />
@@ -292,14 +292,14 @@ export function MessagesView({
           </button>
         </div>
 
-        <div className="flex items-center gap-1.5 rounded-[6px] border border-white/[0.08] bg-white/[0.02] p-0.5">
+        <div className="flex items-center gap-1.5 rounded-[6px] border border-hairline bg-surface-2 p-0.5">
           <button
             type="button"
             onClick={() => setViewMode("feed")}
             className={`rounded-[4px] px-2.5 py-1 font-mono text-[10px] font-medium transition-all ${
               viewMode === "feed"
-                ? "bg-white/[0.08] text-white border border-white/[0.12]"
-                : "text-[#8a8f98] hover:text-[#d0d6e0]"
+                ? "bg-surface text-ink border border-hairline-focus shadow-xs"
+                : "text-ink-muted hover:text-ink"
             }`}
           >
             FEED
@@ -309,8 +309,8 @@ export function MessagesView({
             onClick={() => setViewMode("timeline")}
             className={`rounded-[4px] px-2.5 py-1 font-mono text-[10px] font-medium transition-all ${
               viewMode === "timeline"
-                ? "bg-white/[0.08] text-white border border-white/[0.12]"
-                : "text-[#8a8f98] hover:text-[#d0d6e0]"
+                ? "bg-surface text-ink border border-hairline-focus shadow-xs"
+                : "text-ink-muted hover:text-ink"
             }`}
           >
             TIMELINE
@@ -337,18 +337,18 @@ export function MessagesView({
                 {semantic.data.map((r, i) => (
                   <div
                     key={r.message_id ?? i}
-                    className="flex items-start gap-3 rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-3 hover:border-white/[0.12] hover:bg-white/[0.04]"
+                    className="hud-card flex items-start gap-3 p-3"
                   >
                     <div className="min-w-0 flex-1">
                       <div className="flex items-center gap-2">
-                        <span className="font-mono text-[10px] font-semibold text-[#7170ff]">
+                        <span className="font-mono text-[10px] font-semibold text-signal">
                           {(r.score * 100).toFixed(0)}% RELEVANCE
                         </span>
-                        <span className="ml-auto font-mono text-[10px] text-[#8a8f98]">
+                        <span className="ml-auto font-mono text-[10px] text-ink-muted">
                           {formatRelativeTime(r.created_at)}
                         </span>
                       </div>
-                      <div className="mt-1 text-xs text-[#d0d6e0] leading-relaxed">
+                      <div className="mt-1 text-xs text-ink-soft leading-relaxed">
                         {r.content}
                       </div>
                     </div>
@@ -391,20 +391,20 @@ export function MessagesView({
               {!searching && (
                 <div className="mb-2 flex items-center justify-center gap-2">
                   {loadMore.isPending ? (
-                    <span className="flex items-center gap-1.5 font-mono text-xs text-[#8a8f98]">
-                      <Loader2 className="size-3.5 animate-spin" />
+                    <span className="flex items-center gap-1.5 font-mono text-xs text-ink-muted">
+                      <Loader2 className="size-3.5 animate-spin text-signal" />
                       FETCHING EARLIER PACKETS...
                     </span>
                   ) : hasMore && loadedPages < MAX_OLDER_PAGES ? (
                     <button
                       type="button"
                       onClick={loadOlder}
-                      className="rounded-[5px] border border-white/[0.08] bg-white/[0.02] px-3 py-1 font-mono text-[10px] text-[#8a8f98] transition-colors hover:bg-white/[0.05] hover:text-[#f7f8f8]"
+                      className="rounded-[5px] border border-hairline bg-surface-2 px-3 py-1 font-mono text-[10px] text-ink-muted transition-colors hover:bg-surface hover:text-ink"
                     >
                       ↑ LOAD PREVIOUS BATCH
                     </button>
                   ) : (
-                    <span className="font-mono text-[10px] text-[#62666d]">
+                    <span className="font-mono text-[10px] text-ink-faint">
                       {loadedPages >= MAX_OLDER_PAGES
                         ? `CAPPED AT ${MAX_OLDER_PAGES} PAGES`
                         : "STREAM ROOT REACHED"}
@@ -432,9 +432,9 @@ export function MessagesView({
                         node.type === "date" ? (
                           <div
                             key={`date-${node.iso}`}
-                            className="flex items-center gap-2 py-1 font-mono text-[10px] text-[#8a8f98]"
+                            className="flex items-center gap-2 py-1 font-mono text-[10px] text-ink-muted"
                           >
-                            <Calendar className="size-3 text-[#7170ff]" />
+                            <Calendar className="size-3 text-signal" />
                             {node.label}
                           </div>
                         ) : (
@@ -554,7 +554,7 @@ function MessageDetail({
         </div>
       </div>
 
-      <div className="rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-3 text-xs text-[#d0d6e0] leading-relaxed">
+      <div className="hud-card p-3 text-xs text-ink-soft leading-relaxed">
         {renderMessageContent(m.edited_content ?? m.content, m.metadata) ||
           "(no text content)"}
       </div>
@@ -562,7 +562,7 @@ function MessageDetail({
       {m.ai_analysis && (
         <div>
           <div className="eyebrow mb-1">AI heuristic reasoning</div>
-          <div className="rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-3 text-xs text-[#8a8f98] leading-relaxed">
+          <div className="hud-card p-3 text-xs text-ink-muted leading-relaxed">
             {m.ai_analysis}
           </div>
         </div>
@@ -595,11 +595,11 @@ function MessageDetail({
                 href={a.discord_url ?? a.uploaded_url ?? "#"}
                 target="_blank"
                 rel="noreferrer"
-                className="flex items-center gap-2 rounded-[6px] border border-white/[0.06] bg-white/[0.02] px-3 py-2 text-xs text-[#d0d6e0] hover:border-white/[0.12] hover:text-[#f7f8f8]"
+                className="hud-card flex items-center gap-2 px-3 py-2 text-xs text-ink-soft hover:text-ink"
               >
-                <ImageIcon className="size-3.5 text-[#7170ff]" />
+                <ImageIcon className="size-3.5 text-signal" />
                 <span className="flex-1 truncate">{a.filename}</span>
-                <span className="mono text-[10px] text-[#8a8f98]">
+                <span className="mono text-[10px] text-ink-muted">
                   {formatBytes(a.size)}
                 </span>
               </a>
@@ -626,28 +626,28 @@ function MessageRow({
       key={m.id}
       type="button"
       onClick={() => onSelect(m.id)}
-      className={`msg-feed-card flex w-full items-start gap-3 rounded-[6px] border p-2.5 text-left transition-all ${
+      className={`msg-feed-card flex w-full items-start gap-3 rounded-[8px] border p-2.5 text-left transition-all ${
         selected === m.id
-          ? "border-[#7170ff]/40 bg-[#7170ff]/10"
-          : "border-white/[0.06] bg-white/[0.02] hover:border-white/[0.12] hover:bg-white/[0.04]"
+          ? "border-signal/50 bg-signal/10 shadow-xs"
+          : "border-hairline bg-surface-2 hover:border-hairline-focus hover:bg-surface"
       }`}
     >
       <Avatar src={m.avatar_url} name={m.username} size={32} />
       <div className="min-w-0 flex-1">
         <div className="flex items-center gap-2">
-          <span className="truncate text-xs font-semibold text-[#f7f8f8]">
+          <span className="truncate text-xs font-semibold text-ink">
             {m.username}
           </span>
-          <span className="font-mono text-[10px] text-[#8a8f98]">
+          <span className="font-mono text-[10px] text-ink-muted">
             {getMessageChannelLabel(m)}
           </span>
-          <span className="ml-auto font-mono text-[10px] text-[#8a8f98]">
+          <span className="ml-auto font-mono text-[10px] text-ink-muted">
             {formatRelativeTime(m.created_at)}
           </span>
         </div>
-        <div className="mt-0.5 line-clamp-2 text-xs text-[#d0d6e0]">
+        <div className="mt-0.5 line-clamp-2 text-xs text-ink-soft">
           {renderMessageContent(m.content, m.metadata) || (
-            <span className="italic text-[#8a8f98]">(empty / embed)</span>
+            <span className="italic text-ink-muted">(empty / embed)</span>
           )}
         </div>
       </div>
diff --git a/services/frontend/src/app/(dashboard)/moderation/view.tsx b/services/frontend/src/app/(dashboard)/moderation/view.tsx
index bf25db17..92d93e23 100644
--- a/services/frontend/src/app/(dashboard)/moderation/view.tsx
+++ b/services/frontend/src/app/(dashboard)/moderation/view.tsx
@@ -91,21 +91,21 @@ export function ModerationView({
   return (
     <PageTransition>
       <div ref={containerRef} className="space-y-4">
-        {/* Precision Sub-Header Bar */}
-        <div className="mod-tile flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] pb-3">
+        {/* Tactical HUD Header Bar */}
+        <div className="mod-tile flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
           <div className="flex items-center gap-2.5">
             <span
               className={`h-2 w-2 rounded-full ${
                 failedRatio > 0.1
-                  ? "bg-[#f43f5e] shadow-[0_0_8px_#f43f5e]"
-                  : "bg-[#7170ff] shadow-[0_0_8px_#7170ff]"
+                  ? "bg-vermilion shadow-[0_0_8px_var(--color-vermilion-glow)]"
+                  : "bg-signal shadow-[0_0_8px_var(--color-signal-glow)]"
               }`}
             />
-            <h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase">
+            <h1 className="font-mono text-xs font-semibold tracking-wide text-ink uppercase">
               Moderation Intelligence Console
             </h1>
           </div>
-          <div className="flex items-center gap-1.5 rounded-[5px] border border-white/[0.06] bg-white/[0.02] p-0.5">
+          <div className="flex items-center gap-1.5 rounded-[6px] border border-hairline bg-surface-2 p-0.5">
             {(["all", "flagged", "clean"] as const).map((mode) => (
               <button
                 key={mode}
@@ -113,8 +113,8 @@ export function ModerationView({
                 onClick={() => setFilterMode(mode)}
                 className={`rounded-[4px] px-2.5 py-1 font-mono text-[10px] font-medium transition-all ${
                   filterMode === mode
-                    ? "bg-white/[0.08] text-white border border-white/[0.12]"
-                    : "text-[#8a8f98] hover:text-[#d0d6e0]"
+                    ? "bg-surface text-ink border border-hairline-focus shadow-xs"
+                    : "text-ink-muted hover:text-ink"
                 }`}
               >
                 {mode.toUpperCase()}
diff --git a/services/frontend/src/app/(dashboard)/recordings/view.tsx b/services/frontend/src/app/(dashboard)/recordings/view.tsx
index 8551cd3b..f2215d3e 100644
--- a/services/frontend/src/app/(dashboard)/recordings/view.tsx
+++ b/services/frontend/src/app/(dashboard)/recordings/view.tsx
@@ -92,16 +92,16 @@ export function RecordingsView({
   return (
     <div className="space-y-4">
       {/* Tactical HUD Header Bar */}
-      <div className="flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] pb-3">
+      <div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
         <div className="flex items-center gap-2.5">
-          <span className="h-2 w-2 rounded-full bg-[#7170ff] shadow-[0_0_8px_#7170ff]" />
-          <h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase">
+          <span className="h-2 w-2 rounded-full bg-signal shadow-[0_0_8px_var(--color-signal-glow)]" />
+          <h1 className="font-mono text-xs font-semibold tracking-wide text-ink uppercase">
             Tape Deck · Captured Audio Archive
           </h1>
         </div>
-        <div className="flex items-center gap-2 font-mono text-[11px] text-[#8a8f98]">
+        <div className="flex items-center gap-2 font-mono text-[11px] text-ink-muted">
           <span>STATUS:</span>
-          <span className="rounded bg-white/[0.04] px-1.5 py-0.5 font-medium text-[#7170ff] border border-white/[0.06]">
+          <span className="rounded bg-signal/15 px-2 py-0.5 font-medium text-signal border border-signal/30">
             {totalRecordings} CLIPS_ONLINE
           </span>
         </div>
@@ -134,22 +134,22 @@ export function RecordingsView({
               return (
                 <div
                   key={r.id}
-                  className={`recording-deck-card flex flex-col justify-between rounded-[8px] border bg-white/[0.02] p-4 transition-all duration-200 hover:border-white/[0.14] hover:bg-white/[0.04] ${
+                  className={`recording-deck-card hud-card flex flex-col justify-between p-4 transition-all duration-200 ${
                     isPlaying
-                      ? "border-[#7170ff]/50 bg-[#7170ff]/5 shadow-[0_0_24px_-10px_rgba(113,112,255,0.3)]"
-                      : "border-white/[0.06]"
+                      ? "border-signal/50 bg-signal/10 shadow-[0_0_24px_-10px_var(--color-signal-glow)]"
+                      : ""
                   }`}
                 >
                   <div>
                     {/* Header info */}
-                    <div className="flex items-center gap-3 border-b border-white/[0.05] pb-3">
+                    <div className="flex items-center gap-3 border-b border-hairline pb-3">
                       <Avatar src={r.avatar_url} name={r.username} size={36} />
                       <div className="min-w-0 flex-1">
                         <div className="truncate text-xs font-semibold text-ink">
                           {r.username}
                         </div>
                         <div className="flex items-center gap-1.5 font-mono text-[10px] text-ink-faint">
-                          <Hash className="size-2.5 text-[#7170ff]" />
+                          <Hash className="size-2.5 text-signal" />
                           <span className="truncate">
                             {r.channel_name ?? "voice"}
                           </span>
@@ -179,8 +179,8 @@ export function RecordingsView({
                           }
                         />
                       ) : (
-                        <div className="flex items-center gap-1.5 rounded-[6px] border border-white/[0.06] bg-white/[0.02] px-3 py-2 font-mono text-[11px] text-[#8a8f98]">
-                          <Loader2 className="size-3.5 animate-spin text-[#7170ff]" />
+                        <div className="flex items-center gap-1.5 rounded-[6px] border border-hairline bg-surface-2 px-3 py-2 font-mono text-[11px] text-ink-muted">
+                          <Loader2 className="size-3.5 animate-spin text-signal" />
                           {r.upload_status === "pending"
                             ? "UPLOAD_PENDING..."
                             : r.upload_error
@@ -192,7 +192,7 @@ export function RecordingsView({
                   </div>
 
                   {/* Actions & File Stats */}
-                  <div className="flex items-center justify-between border-t border-white/[0.04] pt-2.5">
+                  <div className="flex items-center justify-between border-t border-hairline pt-2.5">
                     <span className="font-mono text-[10px] text-ink-faint">
                       SIZE: {formatBytes(r.size_bytes)}
                     </span>
@@ -202,16 +202,16 @@ export function RecordingsView({
                           href={r.download_url}
                           target="_blank"
                           rel="noreferrer"
-                          className="inline-flex items-center gap-1 rounded-[5px] border border-white/[0.08] bg-white/[0.02] px-2 py-1 font-mono text-[10px] text-ink-soft transition-colors hover:border-white/[0.16] hover:bg-white/[0.05] hover:text-ink"
+                          className="inline-flex items-center gap-1 rounded-[5px] border border-hairline bg-surface-2 px-2 py-1 font-mono text-[10px] text-ink-soft transition-colors hover:bg-surface hover:text-ink"
                         >
-                          <Download className="size-3 text-[#7170ff]" /> RAW
+                          <Download className="size-3 text-signal" /> RAW
                         </a>
                       )}
                       <button
                         type="button"
                         onClick={() => onDelete(r.id)}
                         disabled={del.isPending}
-                        className="inline-flex items-center gap-1 rounded-[5px] border border-white/[0.08] bg-white/[0.02] px-2 py-1 font-mono text-[10px] text-[#f43f5e] transition-colors hover:border-[#f43f5e]/30 hover:bg-[#f43f5e]/10"
+                        className="inline-flex items-center gap-1 rounded-[5px] border border-vermilion/30 bg-vermilion/10 px-2 py-1 font-mono text-[10px] text-vermilion transition-colors hover:bg-vermilion/20"
                       >
                         <Trash2 className="size-3" /> PURGE
                       </button>
diff --git a/services/frontend/src/app/(dashboard)/voice/view.tsx b/services/frontend/src/app/(dashboard)/voice/view.tsx
index 8aa4e968..e5a8bb97 100644
--- a/services/frontend/src/app/(dashboard)/voice/view.tsx
+++ b/services/frontend/src/app/(dashboard)/voice/view.tsx
@@ -116,26 +116,26 @@ export function VoiceView({
     <PageTransition>
       <div ref={containerRef} className="space-y-4">
         {/* Precision Sub-Header Bar */}
-        <div className="voice-tile flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] pb-3">
+        <div className="voice-tile flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
           <div className="flex items-center gap-2.5">
             <span
               className={`h-2 w-2 rounded-full ${
                 connected
-                  ? "bg-[#10b981] shadow-[0_0_8px_#10b981]"
-                  : "bg-[#8a8f98]"
+                  ? "bg-success shadow-[0_0_8px_var(--color-status-success)]"
+                  : "bg-ink-muted"
               }`}
             />
-            <h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase">
+            <h1 className="font-mono text-xs font-semibold tracking-wide text-ink uppercase">
               Voice Spectrum & Stage Controls
             </h1>
           </div>
           <div className="flex items-center gap-2 font-mono text-[11px]">
-            <span className="text-[#8a8f98]">STAGE:</span>
+            <span className="text-ink-muted">STAGE:</span>
             <span
               className={`rounded px-1.5 py-0.5 font-medium border ${
                 connected
-                  ? "border-[#10b981]/30 bg-[#10b981]/10 text-[#10b981]"
-                  : "border-white/[0.06] bg-white/[0.02] text-[#8a8f98]"
+                  ? "border-success/30 bg-success/10 text-success"
+                  : "border-hairline bg-surface-2 text-ink-muted"
               }`}
             >
               {connected ? "LIVE_BRIDGE" : "OFFLINE"}
@@ -203,12 +203,12 @@ export function VoiceView({
               <SectionHeader eyebrow="Telemetry" title="Input / Output Mix" />
               <div className="mt-4 space-y-4">
                 <div>
-                  <div className="flex justify-between text-xs font-medium text-[#d0d6e0]">
+                  <div className="flex justify-between text-xs font-medium text-ink-soft">
                     <span className="flex items-center gap-1.5">
-                      <Mic className="size-3.5 text-[#7170ff]" />
+                      <Mic className="size-3.5 text-signal" />
                       Mic Sensitivity
                     </span>
-                    <span className="font-mono text-[11px] text-[#8a8f98]">
+                    <span className="font-mono text-[11px] text-ink-muted">
                       {micVol}%
                     </span>
                   </div>
@@ -222,17 +222,17 @@ export function VoiceView({
                       setMicVol(v);
                       mic.setVolume(v / 100);
                     }}
-                    className="mt-2 h-1.5 w-full appearance-none rounded-full bg-white/[0.08] accent-[#7170ff]"
+                    className="mt-2 h-1.5 w-full appearance-none rounded-full bg-surface-2 accent-signal"
                   />
                 </div>
 
                 <div>
-                  <div className="flex justify-between text-xs font-medium text-[#d0d6e0]">
+                  <div className="flex justify-between text-xs font-medium text-ink-soft">
                     <span className="flex items-center gap-1.5">
-                      <Volume2 className="size-3.5 text-[#10b981]" />
+                      <Volume2 className="size-3.5 text-success" />
                       Monitor Output
                     </span>
-                    <span className="font-mono text-[11px] text-[#8a8f98]">
+                    <span className="font-mono text-[11px] text-ink-muted">
                       {listenVol}%
                     </span>
                   </div>
@@ -246,14 +246,14 @@ export function VoiceView({
                       setListenVol(v);
                       listen.setVolume(v / 100);
                     }}
-                    className="mt-2 h-1.5 w-full appearance-none rounded-full bg-white/[0.08] accent-[#10b981]"
+                    className="mt-2 h-1.5 w-full appearance-none rounded-full bg-surface-2 accent-success"
                   />
                 </div>
               </div>
             </div>
 
-            <div className="mt-6 border-t border-white/[0.06] pt-3">
-              <div className="font-mono text-[10px] text-[#8a8f98]">
+            <div className="mt-6 border-t border-hairline pt-3">
+              <div className="font-mono text-[10px] text-ink-muted">
                 CODEC: OPUS 48KHZ · LOW_LATENCY
               </div>
             </div>
diff --git a/services/frontend/src/app/globals.css b/services/frontend/src/app/globals.css
index 642788e3..c72e1ae3 100644
--- a/services/frontend/src/app/globals.css
+++ b/services/frontend/src/app/globals.css
@@ -3,111 +3,131 @@
 @custom-variant dark (&:is(.dark *));
 
 /*
- * GMW — Linear Precision Clean Dark Design System
- *
- * Inspired by Linear's ultra-precise, dark-mode native interface.
- * Built on achromatic luminance hierarchy, near-black canvas (#08090a),
- * ultra-crisp hairline borders, subtle indigo/violet accents (#5e6ad2 / #7170ff),
- * and buttery smooth GSAP-driven micro-interactions.
+ * GMW — Command Center Tactical HUD Design System
+ * Engineered for high precision in both DARK and LIGHT modes.
+ * Uses semantic CSS variables for seamless theme switching, eliminating hardcoded hex clashes.
  */
 
+:root {
+  /* ── Light Mode Base Palette (Crisp High-Contrast Titanium HUD) ── */
+  --canvas-base: #f0f2f5;
+  --canvas-subtle: #e5e8ed;
+  --panel-bg: rgba(255, 255, 255, 0.85);
+  --panel-bg-subtle: rgba(255, 255, 255, 0.6);
+  --panel-border: rgba(15, 23, 42, 0.08);
+  --panel-border-hover: rgba(94, 106, 210, 0.35);
+
+  --text-primary: #0f172a;
+  --text-secondary: #334155;
+  --text-muted: #64748b;
+  --text-faint: #94a3b8;
+
+  --accent-brand: #4f46e5;
+  --accent-signal: #6366f1;
+  --accent-signal-bg: rgba(99, 102, 241, 0.1);
+  --accent-signal-border: rgba(99, 102, 241, 0.25);
+  --accent-signal-glow: rgba(99, 102, 241, 0.25);
+
+  --color-success: #059669;
+  --color-success-bg: rgba(5, 150, 105, 0.1);
+  --color-warning: #d97706;
+  --color-warning-bg: rgba(217, 119, 6, 0.1);
+  --color-danger: #e11d48;
+  --color-danger-bg: rgba(225, 29, 72, 0.1);
+
+  --grid-pattern: rgba(15, 23, 42, 0.035);
+  --shadow-hud: 0 4px 20px -2px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.05);
+}
+
+.dark {
+  /* ── Dark Mode Base Palette (Stealth Obsidian Tactical HUD) ── */
+  --canvas-base: #060709;
+  --canvas-subtle: #0c0e12;
+  --panel-bg: rgba(13, 16, 23, 0.75);
+  --panel-bg-subtle: rgba(255, 255, 255, 0.03);
+  --panel-border: rgba(255, 255, 255, 0.07);
+  --panel-border-hover: rgba(113, 112, 255, 0.45);
+
+  --text-primary: #f8fafc;
+  --text-secondary: #cbd5e1;
+  --text-muted: #94a3b8;
+  --text-faint: #475569;
+
+  --accent-brand: #5e6ad2;
+  --accent-signal: #7170ff;
+  --accent-signal-bg: rgba(113, 112, 255, 0.12);
+  --accent-signal-border: rgba(113, 112, 255, 0.3);
+  --accent-signal-glow: rgba(113, 112, 255, 0.35);
+
+  --color-success: #10b981;
+  --color-success-bg: rgba(16, 185, 129, 0.12);
+  --color-warning: #f59e0b;
+  --color-warning-bg: rgba(245, 158, 11, 0.12);
+  --color-danger: #f43f5e;
+  --color-danger-bg: rgba(244, 63, 94, 0.15);
+
+  --grid-pattern: rgba(255, 255, 255, 0.025);
+  --shadow-hud: 0 8px 32px -4px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.06);
+}
+
 @theme {
-  /* ── Canvas & Surface Stack (Luminance Stacking) ── */
-  --color-canvas: #08090a;
-  --color-canvas-2: #0f1011;
-  --color-surface: rgba(255, 255, 255, 0.035);
-  --color-surface-2: rgba(255, 255, 255, 0.06);
-  --color-surface-elevated: #191a1b;
-  --color-surface-hover: rgba(255, 255, 255, 0.08);
+  --color-canvas: var(--canvas-base);
+  --color-canvas-2: var(--canvas-subtle);
+  --color-surface: var(--panel-bg);
+  --color-surface-2: var(--panel-bg-subtle);
+  --color-hairline: var(--panel-border);
+  --color-hairline-focus: var(--panel-border-hover);
 
-  /* ── Typography & Ink ── */
-  --color-ink: #f7f8f8;
-  --color-ink-soft: #d0d6e0;
-  --color-ink-muted: #8a8f98;
-  --color-ink-faint: #62666d;
+  --color-ink: var(--text-primary);
+  --color-ink-soft: var(--text-secondary);
+  --color-ink-muted: var(--text-muted);
+  --color-ink-faint: var(--text-faint);
 
-  /* ── Hairline Structural Borders ── */
-  --color-hairline: rgba(255, 255, 255, 0.08);
-  --color-hairline-subtle: rgba(255, 255, 255, 0.05);
-  --color-hairline-focus: rgba(255, 255, 255, 0.16);
-  --hairline-w: 1px;
+  --color-brand: var(--accent-brand);
+  --color-brand-accent: var(--accent-signal);
+  --color-signal: var(--accent-signal);
+  --color-signal-glow: var(--accent-signal-glow);
 
-  /* ── Brand & Accent Signals (Subdued Precision) ── */
-  --color-brand: #5e6ad2;
-  --color-brand-accent: #7170ff;
-  --color-brand-hover: #828fff;
-  --color-brand-subtle: rgba(94, 106, 210, 0.15);
+  --color-status-success: var(--color-success);
+  --color-amber: var(--color-warning);
+  --color-vermilion: var(--color-danger);
 
-  --color-signal: #7170ff;
-  --color-signal-ink: #ffffff;
-  --color-signal-glow: rgba(113, 112, 255, 0.25);
+  --font-sans: var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-mono: var(--font-jetbrains-mono), ui-monospace, SFMono-Regular, Menlo, monospace;
+  --font-display: var(--font-display), var(--font-inter), sans-serif;
 
-  /* Semantic status colors (crisp, purposeful) */
-  --color-status-success: #10b981;
-  --color-status-success-subtle: rgba(16, 185, 129, 0.15);
-  --color-amber: #f59e0b;
-  --color-amber-subtle: rgba(245, 158, 11, 0.15);
-  --color-vermilion: #f43f5e;
-  --color-vermilion-subtle: rgba(244, 63, 94, 0.15);
-  --color-vermilion-glow: rgba(244, 63, 94, 0.3);
-
-  --color-ring: var(--color-brand-accent);
-
-  /* ── Typography Stack ── */
-  --font-sans: var(--font-inter), "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  --font-mono: var(--font-jetbrains-mono), "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
-  --font-display: var(--font-inter), "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
-
-  /* ── Radii (Refined, tighter precision) ── */
-  --radius-r: 10px;
-  --radius-r-panel: 8px;
+  --radius-r: 8px;
+  --radius-r-panel: 10px;
   --radius-r-control: 6px;
   --radius-r-pill: 9999px;
 }
 
-/* ── Light Theme Fallbacks ── */
-.light {
-  color-scheme: light;
-  --color-canvas: #f7f8f8;
-  --color-canvas-2: #f3f4f5;
-  --color-surface: rgba(0, 0, 0, 0.03);
-  --color-surface-2: rgba(0, 0, 0, 0.05);
-  --color-surface-elevated: #ffffff;
-  --color-surface-hover: rgba(0, 0, 0, 0.06);
-
-  --color-ink: #171717;
-  --color-ink-soft: #404040;
-  --color-ink-muted: #737373;
-  --color-ink-faint: #a3a3a3;
-
-  --color-hairline: rgba(0, 0, 0, 0.08);
-  --color-hairline-subtle: rgba(0, 0, 0, 0.04);
-  --color-hairline-focus: rgba(0, 0, 0, 0.18);
-}
-
 @layer base {
   * {
-    @apply border-transparent;
-    font-feature-settings: "cv01", "ss03";
+    border-color: var(--panel-border);
   }
 
   html {
     @apply font-sans antialiased scroll-smooth;
-    background-color: var(--color-canvas);
-    color: var(--color-ink);
+    background-color: var(--canvas-base);
+    color: var(--text-primary);
   }
 
   body {
-    @apply bg-canvas text-ink font-sans antialiased;
     min-height: 100dvh;
+    background-color: var(--canvas-base);
+    color: var(--text-primary);
+    background-image: 
+      linear-gradient(to right, var(--grid-pattern) 1px, transparent 1px),
+      linear-gradient(to bottom, var(--grid-pattern) 1px, transparent 1px);
+    background-size: 32px 32px;
   }
 
   ::selection {
-    background: rgba(113, 112, 255, 0.28);
-    color: #ffffff;
+    background: var(--accent-signal-bg);
+    color: var(--accent-signal);
   }
 
-  /* Linear-style minimalist slim scrollbar */
   ::-webkit-scrollbar {
     width: 6px;
     height: 6px;
@@ -116,65 +136,69 @@
     background: transparent;
   }
   ::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.12);
+    background: var(--text-faint);
+    opacity: 0.4;
     border-radius: 9999px;
   }
   ::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.22);
+    background: var(--text-muted);
   }
 
   :focus-visible {
-    outline: 2px solid var(--color-brand-accent);
+    outline: 2px solid var(--accent-signal);
     outline-offset: 2px;
   }
 }
 
 @layer components {
-  /* Precision Surface Panel (Linear Card) */
+  /* Tactical HUD Glass Panel */
   .glass {
-    background: var(--color-surface);
-    border: 1px solid var(--color-hairline);
-    border-radius: var(--radius-r);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    box-shadow:
-      0 1px 0 0 rgba(255, 255, 255, 0.03) inset,
-      0 12px 32px -16px rgba(0, 0, 0, 0.7);
-    transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
+    background: var(--panel-bg);
+    border: 1px solid var(--panel-border);
+    border-radius: var(--radius-r-panel);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    box-shadow: var(--shadow-hud);
+    transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
+  }
+
+  .glass:hover {
+    border-color: var(--panel-border-hover);
   }
 
   .glass-2 {
-    background: var(--color-surface-2);
-    border: 1px solid var(--color-hairline-subtle);
-    border-radius: var(--radius-r-panel);
-    backdrop-filter: blur(8px);
-    -webkit-backdrop-filter: blur(8px);
+    background: var(--panel-bg-subtle);
+    border: 1px solid var(--panel-border);
+    border-radius: var(--radius-r);
   }
 
-  /* Linear-style subtle interactive hover card */
-  .linear-card {
-    background: rgba(255, 255, 255, 0.02);
-    border: 1px solid rgba(255, 255, 255, 0.06);
+  /* HUD Tactical Card */
+  .linear-card,
+  .hud-card {
+    position: relative;
+    background: var(--panel-bg);
+    border: 1px solid var(--panel-border);
     border-radius: var(--radius-r-panel);
-    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
+    backdrop-filter: blur(12px);
+    box-shadow: var(--shadow-hud);
+    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
   }
-  .linear-card:hover {
-    background: rgba(255, 255, 255, 0.04);
-    border-color: rgba(255, 255, 255, 0.12);
+
+  .linear-card:hover,
+  .hud-card:hover {
+    border-color: var(--panel-border-hover);
     transform: translateY(-1px);
   }
 
-  /* Precision Eyebrow Header */
   .eyebrow {
     font-family: var(--font-mono);
     font-size: 0.68rem;
-    font-weight: 500;
+    font-weight: 600;
     letter-spacing: 0.08em;
     text-transform: uppercase;
-    color: var(--color-ink-muted);
+    color: var(--text-muted);
   }
 
-  /* Micro-Pill Tag */
   .pill {
     display: inline-flex;
     align-items: center;
@@ -182,10 +206,11 @@
     padding: 0.18rem 0.55rem;
     border-radius: var(--radius-r-pill);
     font-size: 0.7rem;
+    font-family: var(--font-mono);
     font-weight: 500;
-    background: rgba(255, 255, 255, 0.04);
-    border: 1px solid var(--color-hairline);
-    color: var(--color-ink-soft);
+    background: var(--panel-bg-subtle);
+    border: 1px solid var(--panel-border);
+    color: var(--text-secondary);
   }
 
   .mono {
@@ -193,77 +218,57 @@
     font-variant-numeric: tabular-nums;
   }
 
-  /* Display Typography (Compressed Linear-style tracking) */
   .display {
-    font-family: var(--font-sans);
-    font-weight: 600;
+    font-family: var(--font-display);
+    font-weight: 700;
     letter-spacing: -0.035em;
-    line-height: 1.05;
+    line-height: 1.1;
   }
 }
 
 @layer utilities {
-  .text-signal { color: var(--color-brand-accent); }
-  .text-brand { color: var(--color-brand-accent); }
-  .text-amber { color: var(--color-amber); }
-  .text-vermilion { color: var(--color-vermilion); }
-  .text-success { color: var(--color-status-success); }
-  .text-ink-soft { color: var(--color-ink-soft); }
-  .text-ink-muted { color: var(--color-ink-muted); }
-  .text-ink-faint { color: var(--color-ink-faint); }
+  .text-signal { color: var(--accent-signal); }
+  .text-brand { color: var(--accent-brand); }
+  .text-amber { color: var(--color-warning); }
+  .text-vermilion { color: var(--color-danger); }
+  .text-success { color: var(--color-success); }
+  .text-ink { color: var(--text-primary); }
+  .text-ink-soft { color: var(--text-secondary); }
+  .text-ink-muted { color: var(--text-muted); }
+  .text-ink-faint { color: var(--text-faint); }
 
-  .hero-clamp {
-    font-size: clamp(1.85rem, 1.2rem + 3.5vw, 2.5rem);
-    letter-spacing: -0.04em;
-    font-weight: 600;
-  }
+  .bg-canvas { background-color: var(--canvas-base); }
+  .bg-surface { background-color: var(--panel-bg); }
+  .bg-surface-2 { background-color: var(--panel-bg-subtle); }
+  .border-hairline { border-color: var(--panel-border); }
 
   .glow-signal {
-    text-shadow: 0 0 16px var(--color-signal-glow);
-  }
-
-  .ring-focus {
-    transition: box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s ease;
-  }
-  .ring-focus:hover {
-    border-color: rgba(255, 255, 255, 0.16);
-  }
-  .ring-focus:focus-visible {
-    box-shadow: 0 0 0 2px var(--color-brand-accent);
+    text-shadow: 0 0 16px var(--accent-signal-glow);
   }
 }
 
-/* ═══ Micro Navigation Elements ═══ */
-.nav-dock-item {
-  position: relative;
-  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
-}
-.nav-dock-item:hover {
-  background: rgba(255, 255, 255, 0.05);
-  color: var(--color-ink);
-}
-.nav-dock-item.is-active {
-  background: rgba(255, 255, 255, 0.08);
-  color: #ffffff;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+/* ═══ Keyframes & Animations ═══ */
+@keyframes breathe {
+  0%, 100% { opacity: 0.4; transform: scale(0.95); }
+  50% { opacity: 1; transform: scale(1.05); }
 }
 
-/* ── Keyframes ── */
 @keyframes spin-disc {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+
 @keyframes pulse-ring {
-  0% { transform: scale(0.85); opacity: 0.8; }
+  0% { transform: scale(0.85); opacity: 0.9; }
   100% { transform: scale(2.2); opacity: 0; }
 }
 
+.animate-breathe { animation: breathe 2.5s ease-in-out infinite; }
 .animate-spin-disc { animation: spin-disc 10s linear infinite; }
 .animate-pulse-ring { animation: pulse-ring 2s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
 
-/* Respect reduced motion */
 @media (prefers-reduced-motion: reduce) {
+  .animate-breathe,
   .animate-spin-disc,
   .animate-pulse-ring {
     animation: none !important;
@@ -274,7 +279,5 @@
     animation-duration: 0.001ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.001ms !important;
-    scroll-behavior: auto !important;
   }
-  html { scroll-behavior: auto; }
 }
diff --git a/services/frontend/src/components/ChannelCultureGlossary.tsx b/services/frontend/src/components/ChannelCultureGlossary.tsx
index 9613d587..69c6e07a 100644
--- a/services/frontend/src/components/ChannelCultureGlossary.tsx
+++ b/services/frontend/src/components/ChannelCultureGlossary.tsx
@@ -63,7 +63,7 @@ export function ChannelCultureGlossary({
             placeholder="Filter channels or culture topics..."
             value={filter}
             onChange={(e) => setFilter(e.target.value)}
-            className="w-full rounded-[6px] border border-white/[0.08] bg-white/[0.02] py-1.5 pl-9 pr-3 text-xs text-ink placeholder:text-ink-faint focus:border-[#7170ff] focus:outline-none"
+            className="w-full rounded-[6px] border border-hairline bg-surface-2 py-1.5 pl-9 pr-3 text-xs text-ink placeholder:text-ink-faint focus:border-signal focus:outline-none"
           />
         </div>
         <div className="flex items-center gap-2">
@@ -80,9 +80,9 @@ export function ChannelCultureGlossary({
                   })),
                 )
               }
-              className="inline-flex items-center gap-1.5 rounded-[6px] border border-white/[0.08] bg-white/[0.02] px-3 py-1.5 font-mono text-[11px] text-ink-soft transition-colors hover:border-white/[0.16] hover:bg-white/[0.04] hover:text-ink"
+              className="inline-flex items-center gap-1.5 rounded-[6px] border border-hairline bg-surface-2 px-3 py-1.5 font-mono text-[11px] text-ink-soft transition-colors hover:bg-surface hover:text-ink"
             >
-              <Download className="size-3.5 text-[#7170ff]" />
+              <Download className="size-3.5 text-signal" />
               EXPORT_CSV
             </button>
           )}
@@ -116,13 +116,13 @@ export function ChannelCultureGlossary({
               return (
                 <div
                   key={c.channel_id}
-                  className="channel-node-card group relative flex flex-col justify-between overflow-hidden rounded-[8px] border border-white/[0.06] bg-white/[0.02] p-4 transition-all duration-200 hover:border-white/[0.14] hover:bg-white/[0.04] hover:shadow-lg"
+                  className="channel-node-card hud-card group relative flex flex-col justify-between overflow-hidden p-4"
                 >
                   <div>
                     {/* Channel Card Header */}
-                    <div className="flex items-center justify-between gap-2 border-b border-white/[0.05] pb-2.5">
+                    <div className="flex items-center justify-between gap-2 border-b border-hairline pb-2.5">
                       <div className="flex items-center gap-2 min-w-0">
-                        <span className="flex size-6 items-center justify-center rounded bg-white/[0.04] text-[#7170ff]">
+                        <span className="flex size-6 items-center justify-center rounded bg-surface-2 text-signal">
                           <Hash className="size-3.5" />
                         </span>
                         <span className="truncate font-mono text-xs font-semibold text-ink">
@@ -152,10 +152,10 @@ export function ChannelCultureGlossary({
                   </div>
 
                   {/* Signal Strength Bar & Timestamp */}
-                  <div className="mt-4 pt-3 border-t border-white/[0.04]">
+                  <div className="mt-4 pt-3 border-t border-hairline">
                     <div className="flex items-center justify-between font-mono text-[10px] text-ink-faint mb-1.5">
                       <span className="flex items-center gap-1">
-                        <Activity className="size-3 text-[#7170ff]" />
+                        <Activity className="size-3 text-signal" />
                         INTEL RATIO
                       </span>
                       <span>
@@ -164,9 +164,9 @@ export function ChannelCultureGlossary({
                           : "NEVER"}
                       </span>
                     </div>
-                    <div className="h-1 w-full overflow-hidden rounded-full bg-white/[0.06]">
+                    <div className="h-1.5 w-full overflow-hidden rounded-full bg-surface-2">
                       <div
-                        className="h-full rounded-full bg-gradient-to-r from-[#5e6ad2] to-[#7170ff] transition-all duration-500"
+                        className="h-full rounded-full bg-signal transition-all duration-500"
                         style={{ width: `${pct}%` }}
                       />
                     </div>
diff --git a/services/frontend/src/components/LiveModerationFeed.tsx b/services/frontend/src/components/LiveModerationFeed.tsx
index 5dc8d1f2..b3d00243 100644
--- a/services/frontend/src/components/LiveModerationFeed.tsx
+++ b/services/frontend/src/components/LiveModerationFeed.tsx
@@ -27,14 +27,14 @@ function actionIcon(type: string) {
   switch (type) {
     case "ban_user":
     case "kick_user":
-      return <UserX className="size-3.5 text-[#f43f5e]" />;
+      return <UserX className="size-3.5 text-vermilion" />;
     case "timeout_user":
-      return <VolumeX className="size-3.5 text-[#f59e0b]" />;
+      return <VolumeX className="size-3.5 text-amber" />;
     case "delete_message":
     case "warn_user":
-      return <ShieldAlert className="size-3.5 text-[#7170ff]" />;
+      return <ShieldAlert className="size-3.5 text-signal" />;
     default:
-      return <CheckCircle2 className="size-3.5 text-[#10b981]" />;
+      return <CheckCircle2 className="size-3.5 text-success" />;
   }
 }
 
@@ -90,11 +90,11 @@ export function LiveModerationFeed({
 
   return (
     <div className="flex max-h-[460px] flex-col">
-      <div className="flex items-center justify-between border-b border-white/[0.06] pb-3">
+      <div className="flex items-center justify-between border-b border-hairline pb-3">
         <div className="flex items-center gap-2">
           <span className="relative flex size-2">
-            <span className="absolute inline-flex size-full animate-ping rounded-full bg-[#10b981] opacity-75" />
-            <span className="relative inline-flex size-2 rounded-full bg-[#10b981]" />
+            <span className="absolute inline-flex size-full animate-ping rounded-full bg-success opacity-75" />
+            <span className="relative inline-flex size-2 rounded-full bg-success" />
           </span>
           <span className="font-mono text-xs font-medium text-ink">
             Live Stream Audit Log
@@ -116,9 +116,9 @@ export function LiveModerationFeed({
             return (
               <div
                 key={a.id}
-                className="mod-feed-item flex items-start gap-3 rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-3 transition-all hover:border-white/[0.12] hover:bg-white/[0.04]"
+                className="mod-feed-item hud-card flex items-start gap-3 p-3 transition-all"
               >
-                <span className="flex size-7 shrink-0 items-center justify-center rounded-[6px] border border-white/[0.08] bg-white/[0.03]">
+                <span className="flex size-7 shrink-0 items-center justify-center rounded-[6px] border border-hairline bg-surface-2">
                   {actionIcon(a.action_type)}
                 </span>
 
diff --git a/services/frontend/src/components/TermGlossary.tsx b/services/frontend/src/components/TermGlossary.tsx
index e03030bc..42df084e 100644
--- a/services/frontend/src/components/TermGlossary.tsx
+++ b/services/frontend/src/components/TermGlossary.tsx
@@ -14,7 +14,7 @@ function GlossaryEntry({ t }: { t: GlossaryRow }) {
   const bodyRef = useRef<HTMLDivElement>(null);
 
   return (
-    <div className="glossary-entry overflow-hidden rounded-[6px] border border-white/[0.06] bg-white/[0.02] transition-all hover:border-white/[0.12] hover:bg-white/[0.04]">
+    <div className="glossary-entry hud-card overflow-hidden transition-all">
       <button
         type="button"
         onClick={() => setOpen((v) => !v)}
@@ -42,7 +42,7 @@ function GlossaryEntry({ t }: { t: GlossaryRow }) {
         style={{ gridTemplateRows: open ? "1fr" : "0fr" }}
       >
         <div className="overflow-hidden">
-          <div className="border-t border-white/[0.04] bg-black/20 px-3.5 py-2.5 text-xs">
+          <div className="border-t border-hairline bg-surface-2 px-3.5 py-2.5 text-xs">
             <p className="font-sans text-ink-soft leading-relaxed">
               {t.definition}
             </p>
@@ -51,7 +51,7 @@ function GlossaryEntry({ t }: { t: GlossaryRow }) {
                 href={t.source_url}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="mt-2 inline-flex items-center gap-1.5 font-mono text-[10px] text-[#7170ff] hover:underline"
+                className="mt-2 inline-flex items-center gap-1.5 font-mono text-[10px] text-signal hover:underline"
               >
                 <Globe className="size-3" />
                 {t.source_url}
@@ -86,16 +86,16 @@ export function TermGlossary({ terms }: { terms: GlossaryRow[] }) {
   return (
     <div className="space-y-4">
       {/* Tactical HUD Header Bar */}
-      <div className="flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] pb-3">
+      <div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
         <div className="flex items-center gap-2.5">
-          <span className="h-2 w-2 rounded-full bg-[#7170ff] shadow-[0_0_8px_#7170ff]" />
-          <h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase">
+          <span className="h-2 w-2 rounded-full bg-signal shadow-[0_0_8px_var(--color-signal-glow)]" />
+          <h1 className="font-mono text-xs font-semibold tracking-wide text-ink uppercase">
             Slang & Term Glossary · Knowledge Base
           </h1>
         </div>
-        <div className="flex items-center gap-2 font-mono text-[11px] text-[#8a8f98]">
+        <div className="flex items-center gap-2 font-mono text-[11px] text-ink-muted">
           <span>INDEXED:</span>
-          <span className="rounded bg-white/[0.04] px-1.5 py-0.5 font-medium text-[#7170ff] border border-white/[0.06]">
+          <span className="rounded bg-signal/15 px-2 py-0.5 font-medium text-signal border border-signal/30">
             {terms.length} TERMS_RECORDED
           </span>
         </div>
@@ -110,7 +110,7 @@ export function TermGlossary({ terms }: { terms: GlossaryRow[] }) {
             placeholder="Search slang term or definition keywords..."
             value={filter}
             onChange={(e) => setFilter(e.target.value)}
-            className="w-full rounded-[6px] border border-white/[0.08] bg-white/[0.02] py-1.5 pl-9 pr-3 text-xs text-ink placeholder:text-ink-faint focus:border-[#7170ff] focus:outline-none"
+            className="w-full rounded-[6px] border border-hairline bg-surface-2 py-1.5 pl-9 pr-3 text-xs text-ink placeholder:text-ink-faint focus:border-signal focus:outline-none"
           />
         </div>
         {terms.length > 0 && (
@@ -128,9 +128,9 @@ export function TermGlossary({ terms }: { terms: GlossaryRow[] }) {
                 })),
               )
             }
-            className="inline-flex items-center gap-1.5 rounded-[6px] border border-white/[0.08] bg-white/[0.02] px-3 py-1.5 font-mono text-[11px] text-ink-soft transition-colors hover:border-white/[0.16] hover:bg-white/[0.04] hover:text-ink"
+            className="inline-flex items-center gap-1.5 rounded-[6px] border border-hairline bg-surface-2 px-3 py-1.5 font-mono text-[11px] text-ink-soft transition-colors hover:bg-surface hover:text-ink"
           >
-            <Download className="size-3.5 text-[#7170ff]" />
+            <Download className="size-3.5 text-signal" />
             EXPORT_CSV
           </button>
         )}
@@ -141,7 +141,7 @@ export function TermGlossary({ terms }: { terms: GlossaryRow[] }) {
           eyebrow="knowledge directory"
           title="Slang & Definition Index"
           action={
-            <span className="mono text-xs text-[#8a8f98]">
+            <span className="mono text-xs text-ink-muted">
               {filtered.length} of {terms.length} terms
             </span>
           }
diff --git a/services/frontend/src/components/chatbot/chatbot.tsx b/services/frontend/src/components/chatbot/chatbot.tsx
index 1f49f3b5..3b32e373 100644
--- a/services/frontend/src/components/chatbot/chatbot.tsx
+++ b/services/frontend/src/components/chatbot/chatbot.tsx
@@ -2,217 +2,259 @@
 
 import { useGSAP } from "@gsap/react";
 import gsap from "gsap";
-import { Bot, MessageSquare, Send, Trash2, X } from "lucide-react";
+import {
+  Bot,
+  Loader2,
+  Maximize2,
+  Minimize2,
+  Send,
+  Sparkles,
+  X,
+} from "lucide-react";
 import { useEffect, useRef, useState } from "react";
-import { Button, toast } from "@/components/primitives";
-import { MarkdownLite } from "@/components/shared";
+import { Button } from "@/components/primitives";
 import { useChatbotUserId } from "@/hooks/use-chatbot-user";
 import { chatbotApi } from "@/lib/api";
-import { cn } from "@/lib/utils";
+import { formatRelativeTime } from "@/lib/format";
 
 if (typeof window !== "undefined") {
   gsap.registerPlugin(useGSAP);
 }
 
-interface Msg {
+interface ChatMessage {
   id: string;
-  role: "user" | "bot";
-  content: string;
-  ts: number;
-}
-
-function formatTime(ts: number): string {
-  try {
-    return new Date(ts).toLocaleTimeString([], {
-      hour: "2-digit",
-      minute: "2-digit",
-    });
-  } catch {
-    return "";
-  }
+  sender: "user" | "bot";
+  text: string;
+  timestamp: number;
 }
 
 export function Chatbot() {
-  const userId = useChatbotUserId();
   const [open, setOpen] = useState(false);
-  const [msgs, setMsgs] = useState<Msg[]>([]);
+  const [expanded, setExpanded] = useState(false);
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
   const [input, setInput] = useState("");
-  const [loading, setLoading] = useState(false);
-  const panelRef = useRef<HTMLDivElement>(null);
-  const bottomRef = useRef<HTMLDivElement>(null);
+  const [sending, setSending] = useState(false);
+  const userId = useChatbotUserId();
 
-  useGSAP(
-    () => {
-      if (!open || !panelRef.current) return;
-      gsap.fromTo(
-        panelRef.current,
-        { opacity: 0, y: 12, scale: 0.98 },
-        { opacity: 1, y: 0, scale: 1, duration: 0.22, ease: "power2.out" },
-      );
-    },
-    { dependencies: [open] },
-  );
+  const containerRef = useRef<HTMLDivElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
 
+  // Load history on mount
   useEffect(() => {
-    if (!open || !userId) return;
     chatbotApi
-      .getHistory(userId)
+      .getHistory(userId || undefined)
       .then((res) => {
-        setMsgs(
-          res.history.slice(-12).flatMap((h) => [
+        if (res.history) {
+          const loaded: ChatMessage[] = res.history.flatMap((h) => [
             {
               id: `${h.id}-u`,
-              role: "user" as const,
-              content: h.user_message,
-              ts: Date.parse(h.created_at) || Date.now(),
+              sender: "user",
+              text: h.user_message,
+              timestamp: new Date(h.created_at).getTime(),
             },
             {
               id: `${h.id}-b`,
-              role: "bot" as const,
-              content: h.bot_response,
-              ts: Date.parse(h.created_at) || Date.now(),
+              sender: "bot",
+              text: h.bot_response,
+              timestamp: new Date(h.created_at).getTime() + 100,
             },
-          ]),
-        );
+          ]);
+          setMessages(loaded);
+        }
       })
       .catch(() => {});
-  }, [open, userId]);
+  }, [userId]);
 
+  // Auto-scroll to bottom on new messages
   useEffect(() => {
-    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, []);
-
-  const send = async (text: string) => {
-    if (!text.trim() || loading || !userId) return;
-    setInput("");
-    setMsgs((m) => [
-      ...m,
-      { id: `u-${Date.now()}`, role: "user", content: text, ts: Date.now() },
-    ]);
-    setLoading(true);
-    try {
-      const res = await chatbotApi.send(text, undefined, userId);
-      setMsgs((m) => [
-        ...m,
-        {
-          id: `b-${Date.now()}`,
-          role: "bot",
-          content: res.response,
-          ts: Date.parse(res.timestamp) || Date.now(),
-        },
-      ]);
-    } catch (e) {
-      toast({ title: "Chat error", description: String(e), tone: "vermilion" });
-    } finally {
-      setLoading(false);
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }
-  };
+  });
+
+  // GSAP animation for floating window
+  useGSAP(
+    () => {
+      if (!containerRef.current) return;
+      if (open) {
+        gsap.fromTo(
+          containerRef.current,
+          { opacity: 0, scale: 0.95, y: 15 },
+          { opacity: 1, scale: 1, y: 0, duration: 0.25, ease: "power2.out" },
+        );
+      }
+    },
+    { dependencies: [open], scope: containerRef },
+  );
+
+  const handleSend = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const query = input.trim();
+    if (!query || sending) return;
+
+    const userMsg: ChatMessage = {
+      id: `u-${Date.now()}`,
+      sender: "user",
+      text: query,
+      timestamp: Date.now(),
+    };
+
+    setMessages((prev) => [...prev, userMsg]);
+    setInput("");
+    setSending(true);
 
-  const clearAll = async () => {
-    if (!userId) return;
-    setMsgs([]);
     try {
-      await chatbotApi.clearHistory(userId);
+      const res = await chatbotApi.send(query, undefined, userId || "operator");
+      const botMsg: ChatMessage = {
+        id: `b-${Date.now()}`,
+        sender: "bot",
+        text: res.response || "No response received.",
+        timestamp: Date.now(),
+      };
+      setMessages((prev) => [...prev, botMsg]);
     } catch {
-      /* best-effort */
+      const errMsg: ChatMessage = {
+        id: `err-${Date.now()}`,
+        sender: "bot",
+        text: "Signal telemetry fault. Failed to communicate with neural core.",
+        timestamp: Date.now(),
+      };
+      setMessages((prev) => [...prev, errMsg]);
+    } finally {
+      setSending(false);
     }
   };
 
   return (
     <>
-      <button
-        type="button"
-        aria-label="Open assistant"
-        onClick={() => setOpen((o) => !o)}
-        className="fixed right-4 bottom-5 z-50 flex size-10 items-center justify-center rounded-full border border-white/[0.12] bg-[#0f1011] text-[#f7f8f8] shadow-2xl transition-all duration-150 hover:scale-105 hover:border-[#7170ff] hover:bg-[#191a1b]"
-      >
-        {open ? (
-          <X className="size-4" />
-        ) : (
-          <MessageSquare className="size-4 text-[#7170ff]" />
-        )}
-      </button>
+      {/* Floating Tactical Launcher Button */}
+      {!open && (
+        <button
+          type="button"
+          aria-label="Open neural HUD assistant"
+          onClick={() => setOpen(true)}
+          className="fixed right-4 bottom-5 z-50 flex size-11 items-center justify-center rounded-full border border-signal/40 bg-surface text-signal shadow-[0_0_20px_var(--color-signal-glow)] transition-all duration-200 hover:scale-105 hover:border-signal hover:bg-signal hover:text-white"
+        >
+          <Sparkles className="size-5 animate-breathe" />
+        </button>
+      )}
 
+      {/* Neural Assistant Dialog */}
       {open && (
         <div
-          ref={panelRef}
-          className="fixed right-4 bottom-18 z-50 flex h-[min(65dvh,480px)] w-[min(92vw,350px)] flex-col rounded-[10px] border border-white/[0.08] bg-[#0f1011]/95 p-0 shadow-2xl backdrop-blur-xl"
+          ref={containerRef}
+          className={`glass fixed right-4 bottom-18 z-50 flex flex-col p-0 shadow-2xl transition-all duration-200 ${
+            expanded
+              ? "h-[min(85dvh,680px)] w-[min(94vw,540px)]"
+              : "h-[min(65dvh,480px)] w-[min(92vw,360px)]"
+          }`}
         >
-          <div className="flex items-center justify-between border-b border-white/[0.06] px-3.5 py-2.5">
+          {/* Header */}
+          <div className="flex items-center justify-between border-b border-hairline px-3.5 py-2.5">
             <div className="flex items-center gap-2">
-              <span className="flex size-6 items-center justify-center rounded-md bg-[#7170ff]/15 text-[#7170ff]">
+              <span className="flex size-6 items-center justify-center rounded-[4px] bg-signal/15 text-signal">
                 <Bot className="size-3.5" />
               </span>
               <div>
-                <div className="text-xs font-semibold text-[#f7f8f8]">
-                  Linear Assistant
-                </div>
-                <div className="font-mono text-[9px] text-[#62666d]">
-                  active context
-                </div>
-              </div>
-            </div>
-            <button
-              type="button"
-              onClick={clearAll}
-              className="rounded-[5px] p-1 text-[#62666d] hover:bg-white/[0.05] hover:text-[#d0d6e0]"
-            >
-              <Trash2 className="size-3.5" />
-            </button>
-          </div>
-
-          <div className="flex-1 space-y-2.5 overflow-y-auto px-3.5 py-3">
-            {msgs.length === 0 && !loading && (
-              <div className="py-8 text-center text-xs text-[#62666d]">
-                Ask anything about telemetry, moderation, or media.
-              </div>
-            )}
-            {msgs.map((m) => (
-              <div
-                key={m.id}
-                className={cn(
-                  "flex flex-col text-xs",
-                  m.role === "user" ? "items-end" : "items-start",
-                )}
-              >
-                <div
-                  className={cn(
-                    "max-w-[85%] rounded-[6px] px-2.5 py-1.5",
-                    m.role === "user"
-                      ? "bg-[#5e6ad2] text-white"
-                      : "border border-white/[0.06] bg-white/[0.03] text-[#d0d6e0]",
-                  )}
-                >
-                  {m.role === "bot" ? (
-                    <MarkdownLite content={m.content} />
-                  ) : (
-                    <span>{m.content}</span>
-                  )}
-                </div>
-                <span className="font-mono mt-0.5 text-[9px] text-[#62666d]">
-                  {formatTime(m.ts)}
+                <span className="font-mono text-xs font-bold text-ink">
+                  Neural Core Assistant
+                </span>
+                <span className="ml-2 font-mono text-[10px] text-success">
+                  ● ACTIVE
                 </span>
               </div>
-            ))}
-            <div ref={bottomRef} />
+            </div>
+
+            <div className="flex items-center gap-1">
+              <button
+                type="button"
+                onClick={() => setExpanded(!expanded)}
+                className="rounded-[5px] p-1 text-ink-muted hover:bg-surface-2 hover:text-ink"
+              >
+                {expanded ? (
+                  <Minimize2 className="size-3.5" />
+                ) : (
+                  <Maximize2 className="size-3.5" />
+                )}
+              </button>
+              <button
+                type="button"
+                onClick={() => setOpen(false)}
+                className="rounded-[5px] p-1 text-ink-muted hover:bg-surface-2 hover:text-ink"
+              >
+                <X className="size-3.5" />
+              </button>
+            </div>
           </div>
 
+          {/* Messages Body */}
+          <div
+            ref={scrollRef}
+            className="flex-1 space-y-3 overflow-y-auto p-3.5"
+          >
+            {messages.length === 0 ? (
+              <div className="flex h-full flex-col items-center justify-center text-center font-mono text-xs text-ink-muted">
+                <Sparkles className="mb-2 size-6 text-signal opacity-60" />
+                <span>Neural Assistant ready.</span>
+                <span className="text-[10px] text-ink-faint">
+                  Ask about telemetry, moderation policies, or channel activity.
+                </span>
+              </div>
+            ) : (
+              messages.map((m) => {
+                const isUser = m.sender === "user";
+                return (
+                  <div
+                    key={m.id}
+                    className={`flex flex-col ${
+                      isUser ? "items-end" : "items-start"
+                    }`}
+                  >
+                    <div
+                      className={`max-w-[85%] rounded-[8px] p-2.5 text-xs leading-relaxed ${
+                        isUser
+                          ? "bg-signal text-white"
+                          : "hud-card text-ink-soft"
+                      }`}
+                    >
+                      {m.text}
+                    </div>
+                    <span className="mt-1 font-mono text-[9px] text-ink-faint">
+                      {formatRelativeTime(m.timestamp)}
+                    </span>
+                  </div>
+                );
+              })
+            )}
+
+            {sending && (
+              <div className="flex items-center gap-2 font-mono text-xs text-ink-muted">
+                <Loader2 className="size-3.5 animate-spin text-signal" />
+                <span>Processing vector inference...</span>
+              </div>
+            )}
+          </div>
+
+          {/* Input Footer */}
           <form
-            onSubmit={(e) => {
-              e.preventDefault();
-              send(input);
-            }}
-            className="flex items-center gap-1.5 border-t border-white/[0.06] p-2"
+            onSubmit={handleSend}
+            className="flex items-center gap-1.5 border-t border-hairline p-2"
           >
             <input
               type="text"
+              placeholder="Transmit instruction to core..."
               value={input}
               onChange={(e) => setInput(e.target.value)}
-              placeholder="Ask command..."
-              className="flex-1 rounded-[5px] border border-white/[0.08] bg-white/[0.02] px-2.5 py-1.5 text-xs text-[#f7f8f8] placeholder:text-[#62666d] focus:border-[#7170ff] focus:outline-none"
+              className="flex-1 rounded-[6px] border border-hairline bg-surface-2 px-3 py-1.5 font-mono text-xs text-ink placeholder:text-ink-faint focus:border-signal focus:outline-none"
             />
-            <Button type="submit" size="sm" variant="primary">
-              <Send className="size-3" />
+            <Button
+              variant="primary"
+              size="sm"
+              type="submit"
+              disabled={!input.trim() || sending}
+              className="px-2.5"
+            >
+              <Send className="size-3.5" />
             </Button>
           </form>
         </div>
diff --git a/services/frontend/src/components/primitives/badge.tsx b/services/frontend/src/components/primitives/badge.tsx
index b9a762c1..983719ff 100644
--- a/services/frontend/src/components/primitives/badge.tsx
+++ b/services/frontend/src/components/primitives/badge.tsx
@@ -16,19 +16,19 @@ export function Badge({
   ...props
 }: BadgeProps) {
   const tones = {
-    neutral: "bg-white/[0.04] text-[#d0d6e0] border-white/[0.08]",
-    signal: "bg-[#7170ff]/10 text-[#7170ff] border-[#7170ff]/25",
-    success: "bg-[#10b981]/10 text-[#10b981] border-[#10b981]/25",
-    amber: "bg-[#f59e0b]/10 text-[#f59e0b] border-[#f59e0b]/25",
-    vermilion: "bg-[#f43f5e]/10 text-[#f43f5e] border-[#f43f5e]/25",
+    neutral: "bg-surface-2 text-ink-soft border-hairline",
+    signal: "bg-signal/15 text-signal border-signal/30",
+    success: "bg-success/15 text-success border-success/30",
+    amber: "bg-amber/15 text-amber border-amber/30",
+    vermilion: "bg-vermilion/15 text-vermilion border-vermilion/30",
   };
 
   const dots = {
-    neutral: "bg-[#8a8f98]",
-    signal: "bg-[#7170ff]",
-    success: "bg-[#10b981]",
-    amber: "bg-[#f59e0b]",
-    vermilion: "bg-[#f43f5e]",
+    neutral: "bg-ink-muted",
+    signal: "bg-signal",
+    success: "bg-success",
+    amber: "bg-amber",
+    vermilion: "bg-vermilion",
   };
 
   const sizes = {
diff --git a/services/frontend/src/components/primitives/button.tsx b/services/frontend/src/components/primitives/button.tsx
index 7c6ce2cf..53d823b1 100644
--- a/services/frontend/src/components/primitives/button.tsx
+++ b/services/frontend/src/components/primitives/button.tsx
@@ -11,21 +11,20 @@ export const buttonVariants = ({
   className?: string;
 }) => {
   const base =
-    "inline-flex items-center justify-center font-sans font-medium transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#7170ff] disabled:pointer-events-none disabled:opacity-40 cursor-pointer";
+    "inline-flex items-center justify-center font-sans font-medium transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-signal disabled:pointer-events-none disabled:opacity-40 cursor-pointer";
 
   const variants = {
     primary:
-      "bg-[#5e6ad2] text-white hover:bg-[#7170ff] shadow-sm active:scale-[0.98]",
+      "bg-signal text-white hover:opacity-90 shadow-xs active:scale-[0.98]",
     ghost:
-      "bg-white/[0.03] text-[#d0d6e0] border border-white/[0.08] hover:bg-white/[0.06] hover:text-[#f7f8f8] hover:border-white/[0.14] active:scale-[0.98]",
+      "bg-surface-2 text-ink-soft border border-hairline hover:bg-surface hover:text-ink hover:border-hairline-focus active:scale-[0.98]",
     outline:
-      "bg-transparent text-[#d0d6e0] border border-white/[0.12] hover:bg-white/[0.04] hover:text-[#f7f8f8] active:scale-[0.98]",
+      "bg-transparent text-ink-soft border border-hairline hover:bg-surface-2 hover:text-ink active:scale-[0.98]",
     secondary:
-      "bg-white/[0.06] text-[#f7f8f8] hover:bg-white/[0.1] border border-white/[0.08] active:scale-[0.98]",
-    subtle:
-      "bg-transparent text-[#8a8f98] hover:bg-white/[0.04] hover:text-[#f7f8f8]",
+      "bg-surface text-ink hover:bg-surface-2 border border-hairline active:scale-[0.98]",
+    subtle: "bg-transparent text-ink-muted hover:bg-surface-2 hover:text-ink",
     danger:
-      "bg-[#f43f5e]/15 text-[#f43f5e] border border-[#f43f5e]/30 hover:bg-[#f43f5e]/25 active:scale-[0.98]",
+      "bg-vermilion/15 text-vermilion border border-vermilion/30 hover:bg-vermilion/25 active:scale-[0.98]",
   };
 
   const sizes = {
diff --git a/services/frontend/src/components/shared/section.tsx b/services/frontend/src/components/shared/section.tsx
index 9ff710f3..98a95229 100644
--- a/services/frontend/src/components/shared/section.tsx
+++ b/services/frontend/src/components/shared/section.tsx
@@ -19,12 +19,8 @@ export function SectionHeader({
       )}
     >
       <div className="min-w-0">
-        {eyebrow && (
-          <div className="font-mono text-[10px] font-medium tracking-wider uppercase text-[#8a8f98] mb-0.5">
-            {eyebrow}
-          </div>
-        )}
-        <h2 className="font-sans text-[1.1rem] font-semibold tracking-tight text-[#f7f8f8]">
+        {eyebrow && <div className="eyebrow mb-0.5">{eyebrow}</div>}
+        <h2 className="font-sans text-[1.1rem] font-semibold tracking-tight text-ink">
           {title}
         </h2>
       </div>
@@ -54,46 +50,44 @@ export function MetricTile({
   className?: string;
   style?: React.CSSProperties;
 }) {
-  const toneColor =
+  const toneClass =
     tone === "vermilion"
-      ? "#f43f5e"
+      ? "text-vermilion"
       : tone === "amber"
-        ? "#f59e0b"
+        ? "text-amber"
         : tone === "signal"
-          ? "#7170ff"
-          : "#f7f8f8";
+          ? "text-signal"
+          : "text-ink";
 
   return (
     <div
-      className={cn(
-        "relative rounded-[8px] border border-white/[0.07] bg-white/[0.025] p-4 transition-all duration-200 hover:border-white/[0.14] hover:bg-white/[0.04]",
-        className,
-      )}
+      className={cn("hud-card p-4 transition-all duration-200", className)}
       style={style}
     >
       <div className="flex items-center justify-between">
-        <div className="font-mono text-[10px] font-medium uppercase tracking-wider text-[#8a8f98]">
-          {label}
-        </div>
-        {icon && <span className="text-[#8a8f98]">{icon}</span>}
+        <div className="eyebrow">{label}</div>
+        {icon && <span className="text-ink-muted">{icon}</span>}
       </div>
       <div
-        className="font-sans mt-1.5 text-[1.65rem] font-semibold leading-none tracking-tight"
-        style={{ color: tone === "neutral" ? undefined : toneColor }}
+        className={cn(
+          "font-sans mt-2 text-[1.65rem] font-semibold leading-none tracking-tight",
+          toneClass,
+        )}
       >
         {value}
       </div>
       {hint && (
-        <div className="font-mono mt-1 text-[10px] text-[#62666d]">{hint}</div>
+        <div className="font-mono mt-1.5 text-[11px] text-ink-muted">
+          {hint}
+        </div>
       )}
       {spark && spark.length > 1 && (
         <div className="mt-2.5">
-          <div className="h-[3px] w-full overflow-hidden rounded-full bg-white/[0.06]">
+          <div className="h-[3px] w-full overflow-hidden rounded-full bg-surface-2">
             <div
-              className="h-full rounded-full"
+              className={cn("h-full rounded-full bg-current", toneClass)}
               style={{
                 width: `${Math.min(100, (spark[spark.length - 1] / (Math.max(...spark) || 1)) * 100)}%`,
-                background: toneColor,
                 opacity: 0.8,
               }}
             />
diff --git a/services/frontend/src/components/shell/nav-rail.tsx b/services/frontend/src/components/shell/nav-rail.tsx
index b705b2e0..75036164 100644
--- a/services/frontend/src/components/shell/nav-rail.tsx
+++ b/services/frontend/src/components/shell/nav-rail.tsx
@@ -30,17 +30,17 @@ function NavItem({
       className={cn(
         "nav-dock-item group relative flex size-9 items-center justify-center rounded-[7px] transition-all duration-150",
         active
-          ? "is-active bg-white/[0.08] text-[#f7f8f8] shadow-sm border border-white/[0.12]"
-          : "text-[#8a8f98] hover:bg-white/[0.04] hover:text-[#d0d6e0]",
+          ? "is-active bg-signal/15 text-signal font-semibold shadow-xs border border-signal/30"
+          : "text-ink-muted hover:bg-surface-2 hover:text-ink",
       )}
     >
       <Icon className="relative z-10 size-4" strokeWidth={active ? 2.2 : 1.8} />
       {/* Precision Micro-Indicator */}
       {active && (
-        <span className="absolute -left-[5px] h-3.5 w-[2px] rounded-full bg-[#7170ff]" />
+        <span className="absolute -left-[5px] h-3.5 w-[2px] rounded-full bg-signal shadow-[0_0_8px_var(--color-signal-glow)]" />
       )}
       {/* Tooltip on hover */}
-      <span className="pointer-events-none absolute left-full z-50 ml-2.5 hidden whitespace-nowrap rounded-[5px] border border-white/[0.08] bg-[#0f1011] px-2 py-0.5 font-sans text-[11px] font-medium tracking-tight text-[#f7f8f8] opacity-0 shadow-lg backdrop-blur-md transition-all group-hover:translate-x-0.5 group-hover:opacity-100 md:block">
+      <span className="pointer-events-none absolute left-full z-50 ml-2.5 hidden whitespace-nowrap rounded-[5px] border border-hairline bg-surface px-2 py-0.5 font-sans text-[11px] font-medium tracking-tight text-ink opacity-0 shadow-lg backdrop-blur-md transition-all group-hover:translate-x-0.5 group-hover:opacity-100 md:block">
         {label}
       </span>
     </a>
@@ -75,7 +75,7 @@ export function NavRail() {
   return (
     <nav
       ref={railRef}
-      className="mb-[calc(0.75rem+env(safe-area-inset-bottom))] ml-[calc(0.75rem+env(safe-area-inset-left))] mt-[calc(0.75rem+env(safe-area-inset-top))] hidden w-[54px] flex-col items-center gap-1 rounded-[10px] border border-white/[0.08] bg-[#0f1011]/80 py-3 shadow-xl backdrop-blur-md md:flex"
+      className="glass mb-[calc(0.75rem+env(safe-area-inset-bottom))] ml-[calc(0.75rem+env(safe-area-inset-left))] mt-[calc(0.75rem+env(safe-area-inset-top))] hidden w-[54px] flex-col items-center gap-1 py-3 md:flex"
     >
       <div className="flex flex-1 flex-col gap-1">
         {navItems.map((item) => (
diff --git a/services/frontend/src/components/shell/topbar.tsx b/services/frontend/src/components/shell/topbar.tsx
index f2688cc5..1a0e9d53 100644
--- a/services/frontend/src/components/shell/topbar.tsx
+++ b/services/frontend/src/components/shell/topbar.tsx
@@ -54,7 +54,7 @@ export function TopBar() {
           onClick={() =>
             window.dispatchEvent(new Event("command-palette:open"))
           }
-          className="hidden items-center gap-1.5 rounded-[11px] border border-hairline bg-white/5 px-2.5 py-1.5 text-xs text-ink-soft transition-colors hover:text-ink hover:border-signal/40 sm:flex"
+          className="hidden items-center gap-1.5 rounded-[8px] border border-hairline bg-surface-2 px-2.5 py-1.5 text-xs text-ink-soft transition-colors hover:text-ink hover:border-hairline-focus sm:flex"
         >
           <span className="mono text-[0.65rem]">⌘K</span>
         </button>
@@ -62,7 +62,7 @@ export function TopBar() {
           type="button"
           aria-label="Toggle theme"
           onClick={() => setTheme(theme === "light" ? "dark" : "light")}
-          className="flex size-9 items-center justify-center rounded-[11px] border border-hairline bg-white/5 text-ink-soft transition-colors hover:text-ink hover:border-signal/40"
+          className="flex size-8.5 items-center justify-center rounded-[8px] border border-hairline bg-surface-2 text-ink-soft transition-colors hover:text-ink hover:border-hairline-focus"
         >
           {mounted && theme === "light" ? (
             <Moon className="size-4" />
diff --git a/services/frontend/src/components/voice/recording-audio-player.tsx b/services/frontend/src/components/voice/recording-audio-player.tsx
index 280341c1..ada9cce8 100644
--- a/services/frontend/src/components/voice/recording-audio-player.tsx
+++ b/services/frontend/src/components/voice/recording-audio-player.tsx
@@ -141,7 +141,7 @@ export function RecordingAudioPlayer({
   return (
     <div
       className={cn(
-        "rounded-[10px] border bg-white/[0.04] px-3 py-2.5 transition-colors",
+        "rounded-[8px] border bg-surface-2 px-3 py-2.5 transition-colors",
         playing || buffering
           ? "border-signal/40 shadow-[0_0_24px_-10px_var(--color-signal-glow)]"
           : "border-hairline",
@@ -160,7 +160,7 @@ export function RecordingAudioPlayer({
             "flex size-9 shrink-0 items-center justify-center rounded-full border transition-all active:scale-95",
             playing || buffering
               ? "border-signal/50 bg-signal/15 text-signal"
-              : "border-hairline bg-white/5 text-ink-soft hover:border-signal/40 hover:text-ink",
+              : "border-hairline bg-surface text-ink-soft hover:border-signal/40 hover:text-ink",
           )}
         >
           {buffering ? (
@@ -195,7 +195,7 @@ export function RecordingAudioPlayer({
             }}
             className="group relative h-4 cursor-pointer"
           >
-            <div className="absolute inset-x-0 top-1/2 h-1.5 -translate-y-1/2 overflow-hidden rounded-full bg-white/10">
+            <div className="absolute inset-x-0 top-1/2 h-1.5 -translate-y-1/2 overflow-hidden rounded-full bg-surface">
               <div
                 className={cn(
                   "h-full rounded-full transition-[width]",