diff --git a/src/app/globals.css b/src/app/globals.css
index f11110b..643e01e 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -4,10 +4,11 @@
 
 :root {
   /* ========== VISUAL-TRUTH UI TOKEN CONTRACT (bb-vt.1.1) ========== */
-  --ui-bg-app: #070d16;
-  --ui-bg-shell: #0c1420;
-  --ui-bg-panel: #111c2a;
-  --ui-bg-card: #1a2431;
+  /* Lightened aurora palette */
+  --ui-bg-app: #0d1219;
+  --ui-bg-shell: #131b26;
+  --ui-bg-panel: #1a2330;
+  --ui-bg-card: #222d3d;
 
   --ui-border-soft: rgba(153, 171, 190, 0.2);
   --ui-border-strong: rgba(153, 171, 190, 0.34);
diff --git a/src/components/shared/left-panel.tsx b/src/components/shared/left-panel.tsx
index ad21774..1f1e500 100644
--- a/src/components/shared/left-panel.tsx
+++ b/src/components/shared/left-panel.tsx
@@ -139,15 +139,15 @@ function statusDot(status: BeadIssue['status']): string {
 
 function rowTone(entry: EpicEntry): string {
   if (entry.blockedCount > 0) {
-    return '#22111a';
+    return 'rgba(255, 76, 114, 0.08)';
   }
   if (entry.activeCount > 0) {
-    return '#221a11';
+    return 'rgba(255, 178, 74, 0.08)';
   }
   if (entry.readyCount > 0) {
-    return '#0f221c';
+    return 'rgba(53, 217, 143, 0.08)';
   }
-  return '#111f2b';
+  return 'var(--ui-bg-panel)';
 }
 
 function isTaskMatch(task: BeadIssue, filters: LeftPanelFilters): boolean {
@@ -213,7 +213,7 @@ export function LeftPanel({ issues, selectedEpicId, onEpicSelect, filters, onFil
           })}
         </div>
 
-        <div className="space-y-2 rounded-xl bg-[#101a27] p-2.5 shadow-[0_16px_26px_-20px_rgba(0,0,0,0.92)]">
+        <div className="space-y-2 rounded-xl bg-[var(--ui-bg-panel)] p-2.5 border border-[var(--ui-border-soft)]">
           <div className="grid grid-cols-1 gap-2">
             <input
               value={filters.query}
@@ -284,10 +284,10 @@ export function LeftPanel({ issues, selectedEpicId, onEpicSelect, filters, onFil
             type="button"
             onClick={() => onFiltersChange({ ...filters, hideClosed: !filters.hideClosed })}
             className={cn(
-              'w-full rounded-lg px-2 py-1.5 text-[10px] font-semibold uppercase tracking-[0.11em] shadow-[0_8px_18px_-16px_rgba(0,0,0,0.9)] transition-colors',
+              'w-full rounded-lg px-2 py-1.5 text-[10px] font-semibold uppercase tracking-[0.11em] transition-colors border',
               filters.hideClosed
-                ? 'bg-[#1d2b1a] text-[var(--ui-accent-ready)]'
-                : 'bg-[#0f1824] text-[var(--ui-text-muted)]',
+                ? 'bg-[var(--ui-accent-ready)]/15 border-[var(--ui-accent-ready)]/40 text-[var(--ui-accent-ready)]'
+                : 'bg-[var(--ui-bg-card)] border-[var(--ui-border-soft)] text-[var(--ui-text-muted)]',
             )}
             aria-pressed={filters.hideClosed}
           >
@@ -330,13 +330,13 @@ export function LeftPanel({ issues, selectedEpicId, onEpicSelect, filters, onFil
             <div key={epic.id} className="mb-2">
               <div
                 className={cn(
-                  'rounded-2xl px-3 py-3 transition-colors shadow-[0_18px_28px_-22px_rgba(0,0,0,0.96)]',
+                  'rounded-xl px-3 py-3 transition-colors border border-[var(--ui-border-soft)]',
                   isSelected
-                    ? 'text-[var(--ui-text-primary)] ring-1 ring-[rgba(143,156,175,0.45)]'
+                    ? 'text-[var(--ui-text-primary)] ring-1 ring-[var(--ui-accent-info)]/30'
                     : 'text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)]',
                 )}
                 style={{
-                  boxShadow: `inset 3px 0 0 ${laneColor}, 0 18px 30px -24px rgba(0,0,0,0.95)`,
+                  borderLeft: `3px solid ${laneColor}`,
                   background: rowBackground,
                 }}
               >
@@ -364,7 +364,7 @@ export function LeftPanel({ issues, selectedEpicId, onEpicSelect, filters, onFil
                   <button
                     type="button"
                     onClick={() => onEpicSelect?.(epic.id)}
-                    className="inline-flex h-5 w-5 items-center justify-center rounded bg-[#0e1823] text-[var(--ui-text-muted)] shadow-[0_10px_16px_-12px_rgba(0,0,0,0.9)] transition-colors hover:text-[var(--ui-text-primary)]"
+                    className="inline-flex h-5 w-5 items-center justify-center rounded bg-[var(--ui-bg-card)] text-[var(--ui-text-muted)] border border-[var(--ui-border-soft)] transition-colors hover:text-[var(--ui-text-primary)]"
                     aria-label={`Focus ${epic.title}`}
                   >
                     <Star className="h-3 w-3" aria-hidden="true" />
diff --git a/src/components/shared/right-panel.tsx b/src/components/shared/right-panel.tsx
index 2424602..5fecbf0 100644
--- a/src/components/shared/right-panel.tsx
+++ b/src/components/shared/right-panel.tsx
@@ -22,7 +22,7 @@ export function RightPanel({ children, rail, isOpen: externalIsOpen }: RightPane
       <div
         className="ui-shell-panel flex overflow-hidden h-full"
         style={{
-          boxShadow: isOpen ? '-24px 0 40px -26px rgba(0,0,0,0.95), inset 1px 0 0 rgba(91,168,160,0.22)' : 'none',
+          boxShadow: isOpen ? '-12px 0 24px -16px rgba(0,0,0,0.5)' : 'none',
         }}
         data-testid="right-panel-desktop"
       >
@@ -30,12 +30,12 @@ export function RightPanel({ children, rail, isOpen: externalIsOpen }: RightPane
           <>
             {/* Main Content (Chat or Activity) */}
             <div className="flex-1 min-w-0 h-full overflow-hidden flex flex-col">
-              <div className="border-l border-[color-mix(in_srgb,var(--ui-accent-info)_36%,var(--ui-border-soft))] bg-[linear-gradient(180deg,color-mix(in_srgb,var(--ui-bg-shell)_96%,black),color-mix(in_srgb,var(--ui-bg-panel)_90%,black))]">
+              <div className="border-l border-[var(--ui-border-soft)] bg-[var(--ui-bg-panel)]">
                 <div className="px-3 py-2 border-b border-[var(--ui-border-soft)]">
                   <p className="font-mono text-[10px] uppercase tracking-[0.14em] text-[var(--ui-text-muted)]">Agent Pool Monitor</p>
                 </div>
               </div>
-              <div className="flex-1 overflow-y-auto custom-scrollbar p-0 bg-[#08111d]">
+              <div className="flex-1 overflow-y-auto custom-scrollbar p-0 bg-[var(--ui-bg-shell)]">
                  {/* Remove default padding to allow edge-to-edge chat */}
                  {children || <span>Right Panel</span>}
               </div>
@@ -122,10 +122,9 @@ export function RightPanel({ children, rail, isOpen: externalIsOpen }: RightPane
         className="fixed top-0 right-0 h-full z-50 overflow-y-auto"
         style={{
           width: '17rem',
-          background:
-            'linear-gradient(180deg, color-mix(in srgb, var(--ui-bg-panel) 86%, black), var(--ui-bg-panel))',
+          background: 'var(--ui-bg-panel)',
           borderLeft: '1px solid var(--ui-border-soft)',
-          boxShadow: '-24px 0 44px -26px rgba(0,0,0,0.85)',
+          boxShadow: '-12px 0 24px -16px rgba(0,0,0,0.5)',
         }}
         data-testid="right-panel-tablet"
       >
diff --git a/src/components/shared/top-bar.tsx b/src/components/shared/top-bar.tsx
index a6178ff..129d83b 100644
--- a/src/components/shared/top-bar.tsx
+++ b/src/components/shared/top-bar.tsx
@@ -33,7 +33,7 @@ function MetricTile({ label, value, accent = 'info' }: MetricTileProps) {
           : 'var(--ui-accent-info)';
 
   return (
-    <div className="hidden items-center gap-2 rounded-md border border-[var(--ui-border-soft)] bg-[color-mix(in_srgb,var(--ui-bg-panel)_84%,black)] px-2.5 py-1 text-xs md:inline-flex">
+    <div className="hidden items-center gap-2 rounded-md border border-[var(--ui-border-soft)] bg-[var(--ui-bg-panel)] px-2.5 py-1 text-xs md:inline-flex">
       <p className="font-mono text-[10px] uppercase tracking-[0.13em] text-[var(--ui-text-muted)]">{label}</p>
       <p className="font-mono text-sm leading-none text-[var(--ui-text-primary)]">{value}</p>
       <span className="h-1.5 w-1.5 rounded-full" style={{ backgroundColor: accentColor }} />
@@ -69,7 +69,7 @@ export function TopBar({
         </button>
 
         <div className="mr-3 flex min-w-[210px] items-center gap-2 border-r border-[var(--ui-border-soft)] px-2 py-2">
-          <div className="flex h-9 w-9 items-center justify-center rounded-md bg-[color-mix(in_srgb,var(--ui-accent-ready)_24%,var(--ui-bg-panel))] text-[var(--ui-accent-ready)]">
+          <div className="flex h-9 w-9 items-center justify-center rounded-md bg-[var(--ui-bg-card)] text-[var(--ui-accent-ready)]">
             <LayoutGrid className="h-5 w-5" aria-hidden="true" />
           </div>
           <div>
@@ -96,11 +96,11 @@ export function TopBar({
               className="inline-flex items-center gap-2 rounded-xl border px-3 py-2 text-xs font-semibold uppercase tracking-[0.11em] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-accent-info)]"
               style={{
                 borderColor: blockedOnly
-                  ? 'color-mix(in srgb, var(--ui-accent-blocked) 78%, transparent)'
+                  ? 'rgba(255, 76, 114, 0.6)'
                   : 'var(--ui-border-soft)',
                 backgroundColor: blockedOnly
-                  ? 'color-mix(in srgb, var(--ui-accent-blocked) 20%, var(--ui-bg-panel))'
-                  : 'color-mix(in srgb, var(--ui-bg-panel) 88%, black)',
+                  ? 'rgba(255, 76, 114, 0.15)'
+                  : 'var(--ui-bg-panel)',
                 color: blockedOnly ? '#ffd4dd' : 'var(--ui-text-primary)',
               }}
               data-testid="blocked-items-button"
@@ -118,7 +118,7 @@ export function TopBar({
                 void onCreateTask?.();
               }}
               disabled={isCreatingTask}
-              className="inline-flex items-center gap-2 rounded-xl border border-[color-mix(in_srgb,var(--ui-accent-ready)_80%,black)] bg-[var(--ui-accent-action-green)] px-4 py-2 text-xs font-semibold uppercase tracking-[0.11em] text-[#072514] transition-colors hover:bg-[color-mix(in_srgb,var(--ui-accent-action-green)_84%,white)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-accent-info)] disabled:opacity-60"
+              className="inline-flex items-center gap-2 rounded-xl border border-[var(--ui-accent-ready)] bg-[var(--ui-accent-ready)] px-4 py-2 text-xs font-semibold uppercase tracking-[0.11em] text-[#072514] transition-colors hover:brightness-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-accent-info)] disabled:opacity-60"
               data-testid="new-task-button"
             >
               <Plus className="h-3.5 w-3.5" aria-hidden="true" />
diff --git a/src/components/shared/unified-shell.tsx b/src/components/shared/unified-shell.tsx
index ff5790e..f78dc63 100644
--- a/src/components/shared/unified-shell.tsx
+++ b/src/components/shared/unified-shell.tsx
@@ -158,7 +158,7 @@ export function UnifiedShell({
   };
 
   return (
-    <div className="flex flex-col h-screen" style={{ backgroundColor: 'var(--color-bg-base)' }} data-testid="unified-shell">
+    <div className="flex flex-col h-screen bg-[var(--ui-bg-app)]" data-testid="unified-shell">
       {/* TOP BAR: 3rem fixed */}
       <TopBar />
 
@@ -182,7 +182,7 @@ export function UnifiedShell({
         <ResizeHandle direction="left" onResize={handleLeftResize} />
 
         {/* MIDDLE CONTENT: flex-1 */}
-        <div className="flex-1 relative overflow-hidden bg-black/10 shadow-inner" data-testid="middle-content">
+        <div className="flex-1 relative overflow-hidden bg-[var(--ui-bg-shell)]" data-testid="middle-content">
           {renderMiddleContent()}
         </div>