diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 51804d5d..887e2e6e 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -5,79 +5,79 @@
 @tailwind utilities;
 
 @layer base {
-        :root {
-    /* Base colors from DESIGN.md - AUTO-GENERATED from colors.mjs */
+  :root {
+    /* Base colors — AUTO-GENERATED from colors.mjs */
+    /* PALETTE: Electric Blue (2026-04-26) */
 
-    /* Base colors from DESIGN.md */
     --background: #131313;
-    --on-background: #e5e2e1;
-    --foreground: #e5e2e1;
+    --on-background: #dde4f0;
+    --foreground: #dde4f0;
 
-    /* Surface colors from DESIGN.md */
+    /* Surface — cool blue-tinted darks */
     --surface-DEFAULT: #131313;
     --surface-dim: #131313;
-    --surface-bright: #3a3939;
-    --surface-container-lowest: #0e0e0e;
-    --surface-container-low: #1c1b1b;
-    --surface-container: #201f1f;
-    --surface-container-high: #2a2a2a;
-    --surface-container-highest: #353534;
-    --surface-variant: #353534;
+    --surface-bright: #1e2535;
+    --surface-container-lowest: #0a0c14;
+    --surface-container-low: #131824;
+    --surface-container: #181e2e;
+    --surface-container-high: #1e2538;
+    --surface-container-highest: #252d42;
+    --surface-variant: #252d42;
 
-    /* Primary colors from DESIGN.md */
-    --primary-DEFAULT: #ffb781;
-    --primary-foreground: #4e2600;
-    --primary-container: #f58618;
-    --primary-on-container: #5b2d00;
-    --primary-fixed: #ffdcc4;
-    --primary-fixed-dim: #ffb781;
-    --primary-on-fixed: #2f1400;
-    --primary-on-fixed-variant: #6f3800;
-    --primary-inverse: #924c00;
+    /* Primary — Electric Blue */
+    --primary-DEFAULT: #58a6ff;
+    --primary-foreground: #001a4d;
+    --primary-container: #1d6fd4;
+    --primary-on-container: #cce0ff;
+    --primary-fixed: #cce0ff;
+    --primary-fixed-dim: #58a6ff;
+    --primary-on-fixed: #001533;
+    --primary-on-fixed-variant: #003380;
+    --primary-inverse: #1d5fa8;
 
-    /* Secondary colors from DESIGN.md */
-    --secondary-DEFAULT: #c8c6c5;
-    --secondary-foreground: #303030;
-    --secondary-container: #474746;
-    --secondary-on-container: #b7b5b4;
-    --secondary-fixed: #e5e2e1;
-    --secondary-fixed-dim: #c8c6c5;
-    --secondary-on-fixed: #1b1c1c;
-    --secondary-on-fixed-variant: #474746;
+    /* Secondary — Cool blue-grey */
+    --secondary-DEFAULT: #9aa5be;
+    --secondary-foreground: #1a2030;
+    --secondary-container: #3d4d6b;
+    --secondary-on-container: #bdc8e0;
+    --secondary-fixed: #dde4f0;
+    --secondary-fixed-dim: #9aa5be;
+    --secondary-on-fixed: #0d1220;
+    --secondary-on-fixed-variant: #3d4d6b;
 
-    /* Tertiary colors from DESIGN.md */
-    --tertiary-DEFAULT: #00e639;
-    --tertiary-foreground: #003907;
-    --tertiary-container: #00bd2d;
-    --tertiary-on-container: #00440a;
-    --tertiary-fixed: #72ff70;
-    --tertiary-fixed-dim: #00e639;
-    --tertiary-on-fixed: #002203;
-    --tertiary-on-fixed-variant: #00530e;
+    /* Tertiary — Cyan-teal */
+    --tertiary-DEFAULT: #00d4aa;
+    --tertiary-foreground: #003328;
+    --tertiary-container: #00a882;
+    --tertiary-on-container: #b3fff0;
+    --tertiary-fixed: #b3fff0;
+    --tertiary-fixed-dim: #00d4aa;
+    --tertiary-on-fixed: #002820;
+    --tertiary-on-fixed-variant: #005544;
 
-    /* Error colors from DESIGN.md */
-    --error-DEFAULT: #ffb4ab;
-    --error-foreground: #690005;
-    --error-container: #93000a;
+    /* Error — pure red (no rose/pink cast) */
+    --error-DEFAULT: #ff5f52;
+    --error-foreground: #1a0000;
+    --error-container: #7a0000;
     --error-on-container: #ffdad6;
 
-    /* Outline colors from DESIGN.md */
-    --outline: #a48c7c;
-    --outline-variant: #564335;
+    /* Outline — blue-tinted */
+    --outline: #3d5a8a;
+    --outline-variant: #1e3055;
 
-    /* Inverse colors from DESIGN.md */
-    --inverse-surface: #e5e2e1;
-    --inverse-on-surface: #313030;
+    /* Inverse */
+    --inverse-surface: #dde4f0;
+    --inverse-on-surface: #1a2030;
 
-    /* Semantic colors from DESIGN.md */
-    --border: #353534;
-    --muted: #9f9e9d;
-    --info: #64b5f6;
-    --success: #00e639;
-    --warning: #ffb781;
-    --alert: #ffb4ab;
+    /* Semantic */
+    --border: #252d42;
+    --muted: #5a6a8a;
+    --info: #58a6ff;
+    --success: #00d4aa;
+    --warning: #f0a040;
+    --alert: #ff5f52;
 
-    /* Semantic spacing tokens */
+    /* Spacing tokens */
     --spacing-unit: 4px;
     --spacing-stack-sm: 8px;
     --spacing-stack-md: 16px;
@@ -86,9 +86,6 @@
     --spacing-container-gap: 24px;
   }
 
-
-
-
   * {
     @apply border-border;
     border-radius: 0 !important;
@@ -101,18 +98,15 @@
     letter-spacing: -0.01em;
   }
 
-  /* Strict "NO BOLD" enforcement from AI_RULES.md - Hierarchy via size and color only */
   *, *::before, *::after {
     font-weight: 400 !important;
   }
 
-  /* No uppercase/italics as per AI_RULES.md and GEMINI.md */
   *, *::before, *::after {
     text-transform: none !important;
     font-style: normal !important;
   }
 
-  /* Typography scale with proper letter-spacing per DESIGN.md */
   h1 {
     @apply text-5xl tracking-tighter;
     letter-spacing: -0.02em;
@@ -127,7 +121,6 @@
     @apply tracking-tight;
   }
 
-  /* Input Fields: Darker than the container background per DESIGN.md */
   input, textarea, select {
     background-color: var(--surface-container-lowest);
     border: 1px solid var(--outline);
@@ -138,16 +131,15 @@
   }
 
   input:focus, textarea:focus, select:focus {
-    border-color: var(--primary);
+    border-color: var(--primary-DEFAULT);
     outline: none;
   }
 }
 
 @layer components {
-  /* Button Styles: Rectangular with no radius */
   .btn-primary {
-    background-color: var(--primary);
-    color: var(--on-primary);
+    background-color: var(--primary-DEFAULT);
+    color: var(--primary-foreground);
     padding: 0.5rem 1rem;
     @apply inline-flex items-center justify-center gap-2 transition-opacity hover:opacity-90;
     border-radius: 0 !important;
@@ -155,8 +147,8 @@
 
   .btn-secondary {
     background-color: transparent;
-    border: 1px solid var(--secondary);
-    color: var(--secondary);
+    border: 1px solid var(--secondary-DEFAULT);
+    color: var(--secondary-DEFAULT);
     padding: 0.5rem 1rem;
     @apply inline-flex items-center justify-center gap-2 transition-colors;
     border-radius: 0 !important;
@@ -168,20 +160,18 @@
   }
 
   .level-0 {
-    background-color: var(--surface);
+    background-color: var(--surface-DEFAULT);
   }
 
-  /* Level 1 (Cards/Panels): surface-container with 1px border of outline-variant */
   .level-1 {
     @apply border;
     background-color: var(--surface-container);
     border-color: var(--outline-variant);
   }
 
-  /* Level 2 (Modals/Popovers): surface-container-high with 2px border of primary */
   .level-2 {
     background-color: var(--surface-container-high);
-    border: 2px solid var(--primary);
+    border: 2px solid var(--primary-DEFAULT);
     border-radius: 0 !important;
   }
 
@@ -195,42 +185,38 @@
   }
 
   .input-field:focus {
-    border-color: var(--primary);
+    border-color: var(--primary-DEFAULT);
     outline: none;
   }
 
-  /* Active State: 1px solid primary */
   .active-border {
     @apply border;
-    border-color: var(--primary);
+    border-color: var(--primary-DEFAULT);
   }
 
-  /* High-contrast status blocks: No rounded corners */
   .status-success {
-    background-color: var(--tertiary);
-    color: var(--on-tertiary);
+    background-color: var(--tertiary-DEFAULT);
+    color: var(--tertiary-foreground);
     padding: 0.125rem 0.5rem;
     border-radius: 0 !important;
   }
 
   .status-alert {
-    background-color: var(--primary);
-    color: var(--on-primary);
+    background-color: var(--primary-DEFAULT);
+    color: var(--primary-foreground);
     padding: 0.125rem 0.5rem;
     border-radius: 0 !important;
   }
 
-  /* Data Tables: Header cells with a subtle background tint */
   .table-header {
     background-color: var(--surface-container-high);
     border-bottom: 1px solid var(--outline);
     padding: 0.5rem 1rem;
-    color: var(--secondary);
+    color: var(--secondary-DEFAULT);
     font-size: 0.875rem;
     font-weight: normal;
   }
 
-  /* Log Viewers: Background surface-container-lowest with outline border */
   .log-viewer {
     background-color: var(--surface-container-lowest);
     border: 1px solid var(--outline);
@@ -241,7 +227,6 @@
     border-radius: 0 !important;
   }
 
-  /* Typography utilities for DESIGN.md semantic sizing */
   .headline-lg {
     @apply text-5xl font-normal;
     letter-spacing: -0.02em;
@@ -284,14 +269,13 @@
   }
 }
 
-/* Custom Industrial Scrollbar Styling per DESIGN.md */
 ::-webkit-scrollbar {
   width: 8px;
   height: 8px;
 }
 
 ::-webkit-scrollbar-track {
-  background: var(--surface);
+  background: var(--surface-DEFAULT);
 }
 
 ::-webkit-scrollbar-thumb {
@@ -300,14 +284,14 @@
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--primary);
+  background: var(--primary-DEFAULT);
 }
 
 @layer utilities {
   .text-fluid-lg {
     font-size: clamp(1.125rem, 3cqi, 1.5rem);
   }
-  
+
   .text-fluid-xl {
     font-size: clamp(1.5rem, 5cqi, 2.25rem);
   }
@@ -328,7 +312,6 @@
   }
 }
 
-/* Safe Area Insets for Modern Mobile Devices */
 .pb-safe {
   padding-bottom: env(safe-area-inset-bottom);
 }
@@ -337,7 +320,6 @@
   padding-top: env(safe-area-inset-top);
 }
 
-/* Accessibility: Respect user's reduced motion preference */
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,
diff --git a/frontend/colors.mjs b/frontend/colors.mjs
index 4e644914..6e624ce1 100644
--- a/frontend/colors.mjs
+++ b/frontend/colors.mjs
@@ -5,87 +5,90 @@
  * - scripts/generate-css-vars.mjs (CSS variables in globals.css)
  *
  * Changes here automatically propagate to both files via build step.
+ *
+ * PALETTE: Electric Blue (2026-04-26)
+ * Direction: Dark industrial base + electric blue accents
  */
 
 export const colors = {
-  // Base colors from DESIGN.md
+  // Base colors
   background: "#131313",
-  "on-background": "#e5e2e1",
-  foreground: "#e5e2e1",
+  "on-background": "#dde4f0",
+  foreground: "#dde4f0",
 
-  // Surface tones from DESIGN.md
+  // Surface tones — cool blue-tinted darks
   surface: {
     DEFAULT: "#131313",
     dim: "#131313",
-    bright: "#3a3939",
-    "container-lowest": "#0e0e0e",
-    "container-low": "#1c1b1b",
-    container: "#201f1f",
-    "container-high": "#2a2a2a",
-    "container-highest": "#353534",
-    variant: "#353534",
+    bright: "#1e2535",
+    "container-lowest": "#0a0c14",
+    "container-low": "#131824",
+    container: "#181e2e",
+    "container-high": "#1e2538",
+    "container-highest": "#252d42",
+    variant: "#252d42",
   },
 
-  // Primary colors from DESIGN.md
+  // Primary — Electric Blue
   primary: {
-    DEFAULT: "#ffb781",
-    foreground: "#4e2600",
-    container: "#f58618",
-    "on-container": "#5b2d00",
-    fixed: "#ffdcc4",
-    "fixed-dim": "#ffb781",
-    "on-fixed": "#2f1400",
-    "on-fixed-variant": "#6f3800",
-    inverse: "#924c00",
+    DEFAULT: "#58a6ff",
+    foreground: "#001a4d",
+    container: "#1d6fd4",
+    "on-container": "#cce0ff",
+    fixed: "#cce0ff",
+    "fixed-dim": "#58a6ff",
+    "on-fixed": "#001533",
+    "on-fixed-variant": "#003380",
+    inverse: "#1d5fa8",
   },
 
-  // Secondary colors from DESIGN.md
+  // Secondary — Cool blue-grey (replaces warm grey)
   secondary: {
-    DEFAULT: "#c8c6c5",
-    foreground: "#303030",
-    container: "#474746",
-    "on-container": "#b7b5b4",
-    fixed: "#e5e2e1",
-    "fixed-dim": "#c8c6c5",
-    "on-fixed": "#1b1c1c",
-    "on-fixed-variant": "#474746",
+    DEFAULT: "#9aa5be",
+    foreground: "#1a2030",
+    container: "#3d4d6b",
+    "on-container": "#bdc8e0",
+    fixed: "#dde4f0",
+    "fixed-dim": "#9aa5be",
+    "on-fixed": "#0d1220",
+    "on-fixed-variant": "#3d4d6b",
   },
 
-  // Tertiary colors from DESIGN.md
+  // Tertiary — Cyan-teal (replaces neon green — complements blue)
   tertiary: {
-    DEFAULT: "#00e639",
-    foreground: "#003907",
-    container: "#00bd2d",
-    "on-container": "#00440a",
-    fixed: "#72ff70",
-    "fixed-dim": "#00e639",
-    "on-fixed": "#002203",
-    "on-fixed-variant": "#00530e",
+    DEFAULT: "#00d4aa",
+    foreground: "#003328",
+    container: "#00a882",
+    "on-container": "#b3fff0",
+    fixed: "#b3fff0",
+    "fixed-dim": "#00d4aa",
+    "on-fixed": "#002820",
+    "on-fixed-variant": "#005544",
   },
 
-  // Error colors from DESIGN.md
+  // Error — pure red (no rose/pink cast)
   error: {
-    DEFAULT: "#ffb4ab",
-    foreground: "#690005",
-    container: "#93000a",
+    DEFAULT: "#ff5f52",
+    foreground: "#1a0000",
+    container: "#7a0000",
     "on-container": "#ffdad6",
   },
 
-  // Outline colors from DESIGN.md
-  outline: "#a48c7c",
-  "outline-variant": "#564335",
+  // Outline — blue-tinted borders (replaces warm brown)
+  outline: "#3d5a8a",
+  "outline-variant": "#1e3055",
 
-  // Inverse colors from DESIGN.md
-  "inverse-surface": "#e5e2e1",
-  "inverse-on-surface": "#313030",
+  // Inverse
+  "inverse-surface": "#dde4f0",
+  "inverse-on-surface": "#1a2030",
 
-  // Semantic colors
-  border: "#353534",
-  muted: "#9f9e9d",
-  info: "#64b5f6",
-  success: "#00e639",
-  warning: "#ffb781",
-  alert: "#ffb4ab",
+  // Semantic
+  border: "#252d42",
+  muted: "#5a6a8a",
+  info: "#58a6ff",
+  success: "#00d4aa",
+  warning: "#f0a040",
+  alert: "#ff5f52",
 };
 
 export const spacing = {