bede_changed_color_palette

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 = {