diff --git a/ui/src/index.css b/ui/src/index.css
index 9ce6f265..cbcac9ab 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -202,72 +202,116 @@
   --chart-role-5: #a0a0a0; /* silver               — support/quinary */
 }
 
-/* -- highlight.js syntax theme overrides (chat code blocks) ------------- */
+/* -- highlight.js syntax theme overrides (chat code blocks) -------------
+ * DESIGN.md §4: dark surface, terminal aesthetic, neon + white syntax.
+ * Strictly 4 hues: volt (or forest in light), white/near-black, silver, forest.
+ * No rainbow highlighting — traditional per-class hues collapse into this scheme.
+ */
 
-/* Base hljs surface — themed via CSS vars */
+/* Base hljs surface — inherits the code-block container (bg-card / bg-muted). */
 .hljs {
   background: var(--card) !important;
   color: var(--foreground) !important;
 }
 
-/* Light mode hljs (default) */
+/* Light mode hljs (default :root scope) — forest primary, near-black values. */
 .hljs-keyword,
+.hljs-built_in,
+.hljs-type,
 .hljs-selector-tag,
-.hljs-literal,
-.hljs-number {
-  color: #166534;
+.hljs-tag {
+  color: var(--forest);
 }
 .hljs-string,
-.hljs-attr {
-  color: #4f5100;
+.hljs-attr,
+.hljs-regexp,
+.hljs-symbol,
+.hljs-bullet {
+  color: var(--silver);
 }
-.hljs-function,
+.hljs-number,
+.hljs-literal,
+.hljs-meta,
 .hljs-title,
-.hljs-built_in,
+.hljs-title.function_,
+.hljs-section,
+.hljs-name,
+.hljs-params,
 .hljs-variable,
-.hljs-type,
-.hljs-meta {
-  color: #0a0a0a;
+.hljs-template-variable,
+.hljs-function {
+  color: var(--foreground);
 }
-.hljs-comment {
-  color: #6b6b6b;
+.hljs-comment,
+.hljs-quote {
+  color: var(--silver);
   font-style: italic;
 }
 .hljs-deletion,
 .hljs-selector-class {
-  color: #dc2626;
+  color: var(--destructive);
+}
+.hljs-addition {
+  color: var(--success);
+}
+.hljs-link {
+  color: var(--forest);
+  text-decoration: underline;
+}
+.hljs-emphasis {
+  font-style: italic;
+}
+.hljs-strong {
+  font-weight: 700;
 }
 
-/* Dark mode hljs — overrides the light defaults */
+/* Dark mode hljs — volt primary on near-black surface, terminal-like. */
 .dark .hljs {
-  background: #141414 !important;
-  color: #ffffff !important;
+  background: var(--card) !important;
+  color: var(--foreground) !important;
 }
 .dark .hljs-keyword,
+.dark .hljs-built_in,
+.dark .hljs-type,
 .dark .hljs-selector-tag,
-.dark .hljs-literal,
-.dark .hljs-number,
-.dark .hljs-meta {
-  color: #faff69;
+.dark .hljs-tag {
+  color: var(--volt);
 }
 .dark .hljs-string,
 .dark .hljs-attr,
-.dark .hljs-type {
-  color: #f4f692;
+.dark .hljs-regexp,
+.dark .hljs-symbol,
+.dark .hljs-bullet {
+  color: var(--silver);
 }
-.dark .hljs-function,
+.dark .hljs-number,
+.dark .hljs-literal,
+.dark .hljs-meta,
 .dark .hljs-title,
-.dark .hljs-built_in,
+.dark .hljs-title.function_,
+.dark .hljs-section,
+.dark .hljs-name,
+.dark .hljs-params,
 .dark .hljs-variable,
+.dark .hljs-template-variable,
+.dark .hljs-function,
 .dark .hljs-selector-class {
-  color: #ffffff;
+  color: var(--foreground);
 }
-.dark .hljs-comment {
-  color: #a0a0a0;
+.dark .hljs-comment,
+.dark .hljs-quote {
+  color: var(--silver);
   font-style: italic;
 }
 .dark .hljs-deletion {
-  color: #ef4444;
+  color: var(--destructive);
+}
+.dark .hljs-addition {
+  color: var(--success);
+}
+.dark .hljs-link {
+  color: var(--volt);
+  text-decoration: underline;
 }
 
 @layer base {