diff --git a/frontend/src/app/(public)/page.tsx b/frontend/src/app/(public)/page.tsx
index 16f078b3..075c6f12 100644
--- a/frontend/src/app/(public)/page.tsx
+++ b/frontend/src/app/(public)/page.tsx
@@ -15,8 +15,11 @@ const API_URL = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:5000';
 
 const SCRAMBLE_CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!<>-_\\/[]{}=+*^?#_";
 
-const CLUSTER_COLORS = ['#9CA3AF', '#D97706', '#3B82F6', '#8A63D2', '#14B8A6', '#EF4444'];
-const OB_STEP_COLORS  = ['#D97706', '#8A63D2', '#3B82F6', '#14B8A6', '#EF4444'];
+// Hand-tuned atmospheric orb palettes, hardcoded because they feed canvas
+// fillStyle where CSS var() doesn't resolve. #3e6f8a mirrors --info in
+// globals.css — the muted blue chosen to de-neon the old #3B82F6 (#106).
+const CLUSTER_COLORS = ['#9CA3AF', '#D97706', '#3e6f8a', '#8A63D2', '#14B8A6', '#EF4444'];
+const OB_STEP_COLORS  = ['#D97706', '#8A63D2', '#3e6f8a', '#14B8A6', '#EF4444'];
 const CLUSTER_SEEDS_BG = [10.0, 11.3, 12.6, 13.9, 15.2, 16.5];
 const CLUSTER_INIT_POS = [
   { ox: -222, oy: -29, oz:  15 },
@@ -196,8 +199,9 @@ export default function LandingPage() {
     let rotAngle = 0;
     let animId: number;
 
+    // #3e6f8a mirrors --info (globals.css); literal because canvas can't resolve var().
     const palette = [
-      { c: '#8A63D2', w: 0.24 }, { c: '#3B82F6', w: 0.24 },
+      { c: '#8A63D2', w: 0.24 }, { c: '#3e6f8a', w: 0.24 },
       { c: '#D97706', w: 0.20 }, { c: '#14B8A6', w: 0.15 },
       { c: '#9CA3AF', w: 0.10 }, { c: '#D1D5DB', w: 0.07 },
     ];
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index be686a94..4938e958 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -526,7 +526,7 @@ body { font-size: 14px; line-height: 1.5; }
 
 .landing-intro-orbit-node--green  { background: var(--brand-forest);  top: -3px;  left: 50%; transform: translateX(-50%); }
 .landing-intro-orbit-node--amber  { background: #D97706;  right: -3px; top: 45%; transform: translateY(-50%); }
-.landing-intro-orbit-node--blue   { background: #3B82F6;  bottom: -3px; left: 35%; transform: translateX(-50%); }
+.landing-intro-orbit-node--blue   { background: var(--info);  bottom: -3px; left: 35%; transform: translateX(-50%); }
 .landing-intro-orbit-node--purple { background: #8A63D2;  left: -3px; top: 30%; transform: translateY(-50%); }
 
 /* ── Button shimmer ────────────────────────────────────────────── */
@@ -862,7 +862,7 @@ input[type="reset"]:disabled {
 .landing-page .landing-intro-orbit-node { position: absolute; width: 10px; height: 10px; border-radius: 999px; }
 .landing-page .landing-intro-orbit-node--green  { background: var(--brand-forest);  top: -3px;  left: 50%; transform: translateX(-50%); }
 .landing-page .landing-intro-orbit-node--amber  { background: #D97706;  right: -3px; top: 45%; transform: translateY(-50%); }
-.landing-page .landing-intro-orbit-node--blue   { background: #3B82F6;  bottom: -3px; left: 35%; transform: translateX(-50%); }
+.landing-page .landing-intro-orbit-node--blue   { background: var(--info);  bottom: -3px; left: 35%; transform: translateX(-50%); }
 .landing-page .landing-intro-orbit-node--purple { background: #8A63D2;  left: -3px; top: 30%; transform: translateY(-50%); }
 
 /* Button shimmer. */
diff --git a/frontend/src/components/Gradebook/AssignmentList.tsx b/frontend/src/components/Gradebook/AssignmentList.tsx
index 6fb60462..142e8e6c 100644
--- a/frontend/src/components/Gradebook/AssignmentList.tsx
+++ b/frontend/src/components/Gradebook/AssignmentList.tsx
@@ -353,6 +353,10 @@ function CategoryGroup({
           flexWrap: "wrap",
         }}
       >
+        <span
+          aria-hidden="true"
+          style={{ width: 8, height: 8, borderRadius: "50%", background: color, flexShrink: 0 }}
+        />
         <span
           className="mono"
           style={{
@@ -401,7 +405,7 @@ function CategoryGroup({
           listStyle: "none",
           margin: 0,
           padding: "0 0 0 20px",
-          borderLeft: `2px solid ${color}`,
+          borderLeft: "1px solid var(--border)",
           display: "flex",
           flexDirection: "column",
         }}