From 96a4130c0e20033eb155366d27ca05241b207203 Mon Sep 17 00:00:00 2001
From: Michael Chihlas <michael@chihlas.com>
Date: Sun, 22 Mar 2026 02:00:35 -0400
Subject: [PATCH] refactor: migrate dashboard components to Design System v4

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../dashboard/ActiveFlowPilotSessions.tsx     | 28 +++++++++----------
 .../src/components/dashboard/FiltersBar.tsx   |  8 +++---
 .../dashboard/KnowledgeBaseCards.tsx          | 10 +++----
 .../dashboard/OnboardingChecklist.tsx         | 26 ++++++++---------
 .../src/components/dashboard/OpenSessions.tsx | 16 +++++------
 .../dashboard/PendingEscalations.tsx          | 12 ++++----
 .../components/dashboard/PerformanceCards.tsx |  6 ++--
 .../components/dashboard/PreparedSessions.tsx | 12 ++++----
 .../src/components/dashboard/QuickActions.tsx | 10 +++----
 .../src/components/dashboard/QuickStats.tsx   |  6 ++--
 .../components/dashboard/RecentActivity.tsx   | 10 +++----
 .../dashboard/RecentFlowPilotSessions.tsx     | 10 +++----
 .../src/components/dashboard/SectionGroup.tsx |  8 +++---
 .../components/dashboard/SessionsPanel.tsx    | 16 +++++------
 .../dashboard/StartSessionInput.tsx           | 16 +++++------
 .../src/components/dashboard/TeamSummary.tsx  | 10 +++----
 .../src/components/dashboard/TreeListItem.tsx | 14 +++++-----
 .../components/dashboard/WeeklyCalendar.tsx   | 14 +++++-----
 18 files changed, 116 insertions(+), 116 deletions(-)

diff --git a/frontend/src/components/dashboard/ActiveFlowPilotSessions.tsx b/frontend/src/components/dashboard/ActiveFlowPilotSessions.tsx
index 1a74c625..26af94a1 100644
--- a/frontend/src/components/dashboard/ActiveFlowPilotSessions.tsx
+++ b/frontend/src/components/dashboard/ActiveFlowPilotSessions.tsx
@@ -29,13 +29,13 @@ export function ActiveFlowPilotSessions() {
 
   if (loading) {
     return (
-      <div className="glass-card-static">
+      <div className="card-flat">
         <div className="px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
-          <h3 className="font-heading text-sm font-bold text-foreground">Active Sessions</h3>
+          <h3 className="font-heading text-sm font-bold text-[#e2e5eb]">Active Sessions</h3>
         </div>
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 p-4">
           {Array.from({ length: 3 }).map((_, i) => (
-            <div key={i} className="h-24 rounded-xl bg-card border border-border animate-pulse" />
+            <div key={i} className="h-24 rounded-xl bg-[#14161d] border border-[#1e2130] animate-pulse" />
           ))}
         </div>
       </div>
@@ -43,22 +43,22 @@ export function ActiveFlowPilotSessions() {
   }
 
   return (
-    <div className="glass-card-static">
+    <div className="card-flat">
       <div
         className="flex items-center justify-between px-5 py-3"
         style={{ borderBottom: '1px solid var(--glass-border)' }}
       >
         <div className="flex items-center gap-2">
-          <h3 className="font-heading text-sm font-bold text-foreground">Active Sessions</h3>
+          <h3 className="font-heading text-sm font-bold text-[#e2e5eb]">Active Sessions</h3>
           {sessions.length > 0 && (
-            <span className="inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary/10 px-1.5 text-[0.625rem] font-bold text-primary">
+            <span className="inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-[rgba(34,211,238,0.10)] px-1.5 text-[0.625rem] font-bold text-[#22d3ee]">
               {sessions.length}
             </span>
           )}
         </div>
         <Link
           to="/sessions?filter=active"
-          className="flex items-center gap-1 text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors"
+          className="flex items-center gap-1 text-[0.6875rem] text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
         >
           View all <ArrowRight size={10} />
         </Link>
@@ -66,7 +66,7 @@ export function ActiveFlowPilotSessions() {
 
       {sessions.length === 0 ? (
         <div className="px-5 py-8 text-center">
-          <p className="text-sm text-muted-foreground">No active sessions</p>
+          <p className="text-sm text-[#848b9b]">No active sessions</p>
           <p className="mt-1 text-[0.6875rem] text-[#5a6170]">Start typing above to begin troubleshooting</p>
         </div>
       ) : (
@@ -75,26 +75,26 @@ export function ActiveFlowPilotSessions() {
             <button
               key={session.id}
               onClick={() => navigate(`/pilot/${session.id}`)}
-              className="glass-card p-4 text-left"
+              className="card-interactive p-4 text-left"
             >
               <div className="flex items-start justify-between gap-2 mb-2">
-                <Sparkles size={14} className="shrink-0 text-primary mt-0.5" />
+                <Sparkles size={14} className="shrink-0 text-[#22d3ee] mt-0.5" />
                 <span
                   className={cn(
-                    'font-label text-[0.5625rem] uppercase px-1.5 py-0.5 rounded',
+                    'font-sans text-xs text-[0.5625rem] uppercase px-1.5 py-0.5 rounded',
                     session.confidence_tier === 'guided' && 'bg-emerald-400/10 text-emerald-400',
                     session.confidence_tier === 'exploring' && 'bg-amber-400/10 text-amber-400',
                     session.confidence_tier === 'discovery' && 'bg-blue-400/10 text-blue-400',
-                    !session.confidence_tier && 'bg-card text-muted-foreground',
+                    !session.confidence_tier && 'bg-[#14161d] text-[#848b9b]',
                   )}
                 >
                   {session.confidence_tier || 'starting'}
                 </span>
               </div>
-              <p className="text-sm font-medium text-foreground truncate">
+              <p className="text-sm font-medium text-[#e2e5eb] truncate">
                 {session.problem_summary || 'Session in progress'}
               </p>
-              <div className="mt-2 flex items-center gap-2 text-[0.625rem] text-muted-foreground">
+              <div className="mt-2 flex items-center gap-2 text-[0.625rem] text-[#848b9b]">
                 <span className="flex items-center gap-1">
                   <Clock size={10} />
                   {timeAgo(session.created_at)}
diff --git a/frontend/src/components/dashboard/FiltersBar.tsx b/frontend/src/components/dashboard/FiltersBar.tsx
index e4851620..835a606f 100644
--- a/frontend/src/components/dashboard/FiltersBar.tsx
+++ b/frontend/src/components/dashboard/FiltersBar.tsx
@@ -22,15 +22,15 @@ export function FiltersBar({ filters, activeFilter, onFilterChange }: FiltersBar
           className={cn(
             'shrink-0 rounded-lg border px-3 py-1.5 text-[0.8125rem] font-medium transition-colors',
             activeFilter === f.id
-              ? 'border-primary/30 bg-primary/10 text-primary'
-              : 'border-border bg-card text-muted-foreground hover:border-border/80 hover:text-foreground'
+              ? 'border-[#22d3ee]/30 bg-[rgba(34,211,238,0.10)] text-[#22d3ee]'
+              : 'border-[#1e2130] bg-[#14161d] text-[#848b9b] hover:border-[#1e2130]/80 hover:text-[#e2e5eb]'
           )}
         >
           {f.label}
         </button>
       ))}
-      <div className="mx-1.5 h-5 w-px shrink-0 bg-border" />
-      <button className="flex shrink-0 items-center gap-1.5 rounded-lg border border-border bg-card px-3 py-1.5 text-[0.8125rem] text-muted-foreground hover:text-foreground transition-colors">
+      <div className="mx-1.5 h-5 w-px shrink-0 bg-[#1e2130]" />
+      <button className="flex shrink-0 items-center gap-1.5 rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-1.5 text-[0.8125rem] text-[#848b9b] hover:text-[#e2e5eb] transition-colors">
         <Filter size={14} />
         More Filters
       </button>
diff --git a/frontend/src/components/dashboard/KnowledgeBaseCards.tsx b/frontend/src/components/dashboard/KnowledgeBaseCards.tsx
index 303bd82d..17478a8e 100644
--- a/frontend/src/components/dashboard/KnowledgeBaseCards.tsx
+++ b/frontend/src/components/dashboard/KnowledgeBaseCards.tsx
@@ -20,15 +20,15 @@ export function KnowledgeBaseCards() {
   ]
 
   return (
-    <div className="glass-card-static">
+    <div className="card-flat">
       <div
         className="flex items-center justify-between px-5 py-3"
         style={{ borderBottom: '1px solid var(--glass-border)' }}
       >
-        <h3 className="font-heading text-sm font-bold text-foreground">Knowledge Base</h3>
+        <h3 className="font-heading text-sm font-bold text-[#e2e5eb]">Knowledge Base</h3>
         <button
           onClick={() => navigate('/trees')}
-          className="flex items-center gap-1 text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors"
+          className="flex items-center gap-1 text-[0.6875rem] text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
         >
           Browse <ArrowRight size={10} />
         </button>
@@ -41,8 +41,8 @@ export function KnowledgeBaseCards() {
             className="flex flex-col items-center gap-2 py-5 hover:bg-[rgba(255,255,255,0.02)] transition-colors"
           >
             <item.icon size={20} style={{ color: item.color }} />
-            <p className="font-heading text-xl font-extrabold text-foreground">{item.value}</p>
-            <p className="font-label text-[0.5625rem] uppercase tracking-[0.1em] text-muted-foreground">
+            <p className="font-heading text-xl font-extrabold text-[#e2e5eb]">{item.value}</p>
+            <p className="font-sans text-xs text-[0.5625rem] uppercase tracking-[0.1em] text-[#848b9b]">
               {item.label}
             </p>
           </button>
diff --git a/frontend/src/components/dashboard/OnboardingChecklist.tsx b/frontend/src/components/dashboard/OnboardingChecklist.tsx
index f4552204..810eef8c 100644
--- a/frontend/src/components/dashboard/OnboardingChecklist.tsx
+++ b/frontend/src/components/dashboard/OnboardingChecklist.tsx
@@ -69,11 +69,11 @@ export function OnboardingChecklist() {
   }
 
   return (
-    <div className="glass-card overflow-hidden fade-in" style={{ animationDelay: '150ms' }}>
+    <div className="card-interactive overflow-hidden fade-in" style={{ animationDelay: '150ms' }}>
       {/* Progress bar */}
       <div className="h-1 w-full bg-[rgba(255,255,255,0.04)]">
         <div
-          className="h-full bg-gradient-brand transition-all duration-500 ease-out"
+          className="h-full bg-[#22d3ee] transition-all duration-500 ease-out"
           style={{ width: `${progressPercent}%` }}
         />
       </div>
@@ -82,15 +82,15 @@ export function OnboardingChecklist() {
         {/* Header */}
         <div className="flex items-center justify-between mb-3">
           <div>
-            <p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+            <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
               Getting Started
             </p>
-            <p className="text-sm text-foreground mt-0.5">
+            <p className="text-sm text-[#e2e5eb] mt-0.5">
               {isAllDone ? (
-                <span className="text-gradient-brand font-semibold">You're all set!</span>
+                <span className="text-[#67e8f9] font-semibold">You're all set!</span>
               ) : (
                 <span>
-                  <span className="text-gradient-brand font-semibold">{completedCount}</span>
+                  <span className="text-[#67e8f9] font-semibold">{completedCount}</span>
                   {' '}of {totalCount} complete
                 </span>
               )}
@@ -98,7 +98,7 @@ export function OnboardingChecklist() {
           </div>
           <button
             onClick={handleDismiss}
-            className="rounded-md p-1 text-muted-foreground hover:text-foreground hover:bg-[rgba(255,255,255,0.04)] transition-colors"
+            className="rounded-md p-1 text-[#848b9b] hover:text-[#e2e5eb] hover:bg-[rgba(255,255,255,0.04)] transition-colors"
             aria-label="Dismiss onboarding checklist"
           >
             <X size={16} />
@@ -126,11 +126,11 @@ export function OnboardingChecklist() {
                     className={cn(
                       'flex h-5 w-5 shrink-0 items-center justify-center rounded-md border transition-colors',
                       done
-                        ? 'bg-gradient-brand border-transparent'
-                        : 'border-border'
+                        ? 'bg-[#22d3ee] border-transparent'
+                        : 'border-[#1e2130]'
                     )}
                   >
-                    {done && <Check size={12} className="text-[#101114]" />}
+                    {done && <Check size={12} className="text-white" />}
                   </span>
 
                   {/* Label */}
@@ -138,8 +138,8 @@ export function OnboardingChecklist() {
                     className={cn(
                       'flex-1',
                       done
-                        ? 'text-muted-foreground line-through'
-                        : 'text-foreground'
+                        ? 'text-[#848b9b] line-through'
+                        : 'text-[#e2e5eb]'
                     )}
                   >
                     {item.label}
@@ -147,7 +147,7 @@ export function OnboardingChecklist() {
 
                   {/* Arrow for incomplete items */}
                   {!done && (
-                    <ChevronRight size={14} className="text-muted-foreground shrink-0" />
+                    <ChevronRight size={14} className="text-[#848b9b] shrink-0" />
                   )}
                 </button>
               </li>
diff --git a/frontend/src/components/dashboard/OpenSessions.tsx b/frontend/src/components/dashboard/OpenSessions.tsx
index 310a2488..fb43e334 100644
--- a/frontend/src/components/dashboard/OpenSessions.tsx
+++ b/frontend/src/components/dashboard/OpenSessions.tsx
@@ -17,17 +17,17 @@ interface OpenSessionsProps {
 
 export function OpenSessions({ sessions }: OpenSessionsProps) {
   return (
-    <div className="glass-card-static flex flex-col h-full">
+    <div className="card-flat flex flex-col h-full">
       <div className="flex items-center justify-between px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
-        <h3 className="font-heading text-sm font-bold text-foreground">My Open Sessions</h3>
-        <Link to="/sessions" className="text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors">
+        <h3 className="font-heading text-sm font-bold text-[#e2e5eb]">My Open Sessions</h3>
+        <Link to="/sessions" className="text-[0.6875rem] text-[#848b9b] hover:text-[#e2e5eb] transition-colors">
           View All
         </Link>
       </div>
       <div className="flex-1 flex flex-col">
         {sessions.length === 0 ? (
           <div className="flex-1 flex items-center justify-center">
-            <p className="text-sm text-muted-foreground">No open sessions</p>
+            <p className="text-sm text-[#848b9b]">No open sessions</p>
           </div>
         ) : (
           sessions.map((session, i) => (
@@ -40,19 +40,19 @@ export function OpenSessions({ sessions }: OpenSessionsProps) {
             >
               <span className="h-2 w-2 shrink-0 rounded-full bg-amber-400" />
               <div className="flex-1 min-w-0">
-                <div className="text-sm text-foreground truncate">{session.treeName}</div>
-                <div className="text-[0.6875rem] text-muted-foreground">
+                <div className="text-sm text-[#e2e5eb] truncate">{session.treeName}</div>
+                <div className="text-[0.6875rem] text-[#848b9b]">
                   {session.stepNumber && session.totalSteps
                     ? `Step ${session.stepNumber} of ${session.totalSteps}`
                     : 'In progress'}
                   <span className="mx-1.5 text-[var(--text-dimmed)]">&middot;</span>
-                  <span className="font-label text-[0.625rem]">{session.timeAgo}</span>
+                  <span className="font-sans text-xs text-[0.625rem]">{session.timeAgo}</span>
                 </div>
               </div>
               <Link
                 to={getTreeNavigatePath(session.treeId, session.treeType)}
                 state={{ sessionId: session.id }}
-                className="shrink-0 rounded-lg bg-gradient-brand px-3 py-1 text-[0.6875rem] font-medium text-primary-foreground hover:opacity-90 transition-opacity"
+                className="shrink-0 rounded-lg bg-[#22d3ee] px-3 py-1 text-[0.6875rem] font-medium text-white hover:brightness-110 transition-opacity"
               >
                 Resume
               </Link>
diff --git a/frontend/src/components/dashboard/PendingEscalations.tsx b/frontend/src/components/dashboard/PendingEscalations.tsx
index f5f4fe07..6a6de03f 100644
--- a/frontend/src/components/dashboard/PendingEscalations.tsx
+++ b/frontend/src/components/dashboard/PendingEscalations.tsx
@@ -28,7 +28,7 @@ export function PendingEscalations() {
 
   return (
     <div
-      className="glass-card-static overflow-hidden"
+      className="card-flat overflow-hidden"
       style={{ borderColor: 'rgba(251, 191, 36, 0.2)' }}
     >
       <div
@@ -37,7 +37,7 @@ export function PendingEscalations() {
       >
         <div className="flex items-center gap-2">
           <AlertTriangle size={14} className="text-amber-400" />
-          <h3 className="font-heading text-sm font-bold text-foreground">
+          <h3 className="font-heading text-sm font-bold text-[#e2e5eb]">
             Pending Escalations
             <span className="ml-2 inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-amber-400/10 px-1.5 text-[0.625rem] font-bold text-amber-400">
               {escalations.length}
@@ -46,7 +46,7 @@ export function PendingEscalations() {
         </div>
         <Link
           to="/escalations"
-          className="text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors"
+          className="text-[0.6875rem] text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
         >
           View all
         </Link>
@@ -64,13 +64,13 @@ export function PendingEscalations() {
           >
             <span className="h-2 w-2 shrink-0 rounded-full bg-amber-400 animate-pulse" />
             <div className="flex-1 min-w-0">
-              <div className="text-sm text-foreground truncate">
+              <div className="text-sm text-[#e2e5eb] truncate">
                 {esc.problem_summary || 'Escalated session'}
               </div>
-              <div className="text-[0.6875rem] text-muted-foreground">
+              <div className="text-[0.6875rem] text-[#848b9b]">
                 {esc.problem_domain || 'General'}
                 <span className="mx-1.5 text-[var(--text-dimmed)]">&middot;</span>
-                <span className="font-label text-[0.625rem]">{timeAgo(esc.created_at)}</span>
+                <span className="font-sans text-xs">{timeAgo(esc.created_at)}</span>
               </div>
             </div>
             <button
diff --git a/frontend/src/components/dashboard/PerformanceCards.tsx b/frontend/src/components/dashboard/PerformanceCards.tsx
index 2dd14549..66a0ad0f 100644
--- a/frontend/src/components/dashboard/PerformanceCards.tsx
+++ b/frontend/src/components/dashboard/PerformanceCards.tsx
@@ -71,20 +71,20 @@ export function PerformanceCards() {
           key={card.label}
           onClick={() => navigate(card.href)}
           className={cn(
-            'glass-card p-4 text-left fade-in',
+            'card-interactive p-4 text-left fade-in',
             i === 0 && 'active-glow'
           )}
           style={{ animationDelay: `${400 + i * 60}ms` }}
         >
           <div className="flex items-center justify-between mb-2">
-            <p className="font-label text-[0.5625rem] uppercase tracking-[0.1em] text-muted-foreground">
+            <p className="font-sans text-xs text-[0.5625rem] uppercase tracking-[0.1em] text-[#848b9b]">
               {card.label}
             </p>
             <card.icon size={14} style={{ color: card.iconColor }} />
           </div>
           <p className={cn(
             'font-heading text-2xl font-extrabold tracking-tight',
-            card.highlight ? 'text-gradient-brand' : 'text-foreground'
+            card.highlight ? 'text-[#67e8f9]' : 'text-[#e2e5eb]'
           )}>
             {card.value}
           </p>
diff --git a/frontend/src/components/dashboard/PreparedSessions.tsx b/frontend/src/components/dashboard/PreparedSessions.tsx
index 891b5413..01b1bfb4 100644
--- a/frontend/src/components/dashboard/PreparedSessions.tsx
+++ b/frontend/src/components/dashboard/PreparedSessions.tsx
@@ -28,11 +28,11 @@ export function PreparedSessions() {
   }
 
   return (
-    <div className="glass-card-static p-5 fade-in" style={{ animationDelay: '200ms' }}>
+    <div className="card-flat p-5 fade-in" style={{ animationDelay: '200ms' }}>
       <div className="flex items-center justify-between mb-3">
         <div className="flex items-center gap-2">
           <ClipboardList className="h-4 w-4 text-cyan-400" />
-          <h3 className="font-heading text-sm font-semibold text-foreground">Prepared for You</h3>
+          <h3 className="font-heading text-sm font-semibold text-[#e2e5eb]">Prepared for You</h3>
           <span className="flex h-5 w-5 items-center justify-center rounded-full bg-cyan-400/20 text-[0.625rem] font-bold text-cyan-400">
             {sessions.length}
           </span>
@@ -51,13 +51,13 @@ export function PreparedSessions() {
               key={session.id}
               onClick={() => handleStart(session)}
               className={cn(
-                'group flex w-full items-center justify-between gap-3 rounded-lg border border-border px-4 py-3',
+                'group flex w-full items-center justify-between gap-3 rounded-lg border border-[#1e2130] px-4 py-3',
                 'text-left transition-all hover:border-cyan-500/30 hover:bg-cyan-500/5'
               )}
             >
               <div className="min-w-0 flex-1">
-                <p className="text-sm font-medium text-foreground truncate">{flowName}</p>
-                <div className="mt-1 flex items-center gap-3 text-xs text-muted-foreground">
+                <p className="text-sm font-medium text-[#e2e5eb] truncate">{flowName}</p>
+                <div className="mt-1 flex items-center gap-3 text-xs text-[#848b9b]">
                   {session.ticket_number && (
                     <span>{session.ticket_number}</span>
                   )}
@@ -73,7 +73,7 @@ export function PreparedSessions() {
                   </span>
                 </div>
               </div>
-              <ArrowRight className="h-4 w-4 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100" />
+              <ArrowRight className="h-4 w-4 shrink-0 text-[#848b9b] opacity-0 transition-opacity group-hover:opacity-100" />
             </button>
           )
         })}
diff --git a/frontend/src/components/dashboard/QuickActions.tsx b/frontend/src/components/dashboard/QuickActions.tsx
index 5a34aa3a..139b690d 100644
--- a/frontend/src/components/dashboard/QuickActions.tsx
+++ b/frontend/src/components/dashboard/QuickActions.tsx
@@ -12,16 +12,16 @@ export function QuickActions() {
   const navigate = useNavigate()
 
   return (
-    <div className="glass-card-static flex flex-col h-full">
+    <div className="card-flat flex flex-col h-full">
       <div className="px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
-        <h3 className="font-heading text-sm font-bold text-foreground">Quick Actions</h3>
+        <h3 className="font-heading text-sm font-bold text-[#e2e5eb]">Quick Actions</h3>
       </div>
       <div className="flex-1 flex flex-col justify-between p-3 gap-2">
         {ACTIONS.map(({ icon: Icon, label, description, href, color }) => (
           <button
             key={label}
             onClick={() => navigate(href)}
-            className="glass-card flex items-center gap-3 px-4 py-3 text-left"
+            className="card-interactive flex items-center gap-3 px-4 py-3 text-left"
           >
             <span
               className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg"
@@ -30,8 +30,8 @@ export function QuickActions() {
               <Icon size={18} style={{ color }} />
             </span>
             <div className="min-w-0">
-              <div className="text-sm font-medium text-foreground">{label}</div>
-              <div className="text-[0.6875rem] text-muted-foreground truncate">{description}</div>
+              <div className="text-sm font-medium text-[#e2e5eb]">{label}</div>
+              <div className="text-[0.6875rem] text-[#848b9b] truncate">{description}</div>
             </div>
           </button>
         ))}
diff --git a/frontend/src/components/dashboard/QuickStats.tsx b/frontend/src/components/dashboard/QuickStats.tsx
index f98de76b..7ed7b03b 100644
--- a/frontend/src/components/dashboard/QuickStats.tsx
+++ b/frontend/src/components/dashboard/QuickStats.tsx
@@ -18,16 +18,16 @@ export function QuickStats({ stats }: QuickStatsProps) {
       {stats.map((stat, i) => (
         <div
           key={stat.label}
-          className={cn('glass-card p-4 fade-in', i === 0 && 'active-glow')}
+          className={cn('card-interactive p-4 fade-in', i === 0 && 'active-glow')}
           style={{ animationDelay: `${50 + i * 30}ms` }}
         >
-          <p className="font-label text-[0.625rem] font-medium uppercase tracking-widest text-muted-foreground">
+          <p className="font-sans text-xs text-[0.625rem] font-medium uppercase tracking-widest text-[#848b9b]">
             {stat.label}
           </p>
           <p
             className={cn(
               'mt-1 font-heading text-2xl font-extrabold tracking-tight',
-              stat.gradient && 'text-gradient-brand',
+              stat.gradient && 'text-[#67e8f9]',
               stat.color
             )}
             style={stat.color && !stat.color.startsWith('text-') ? { color: stat.color } : undefined}
diff --git a/frontend/src/components/dashboard/RecentActivity.tsx b/frontend/src/components/dashboard/RecentActivity.tsx
index b175f085..5f502d5e 100644
--- a/frontend/src/components/dashboard/RecentActivity.tsx
+++ b/frontend/src/components/dashboard/RecentActivity.tsx
@@ -24,9 +24,9 @@ const DEFAULT_ACTIVITIES: ActivityItem[] = [
 
 export function RecentActivity({ activities = DEFAULT_ACTIVITIES }: RecentActivityProps) {
   return (
-    <div className="glass-card-static">
+    <div className="card-flat">
       <div className="px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
-        <h3 className="font-heading text-sm font-bold text-foreground">Recent Activity</h3>
+        <h3 className="font-heading text-sm font-bold text-[#e2e5eb]">Recent Activity</h3>
       </div>
       <div>
         {activities.map((item, i) => (
@@ -39,15 +39,15 @@ export function RecentActivity({ activities = DEFAULT_ACTIVITIES }: RecentActivi
             }}
           >
             <span
-              className="flex h-9 w-9 shrink-0 items-center justify-center rounded-[10px]"
+              className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg"
               style={{ background: item.iconBg }}
             >
               <item.icon size={16} style={{ color: item.iconColor }} />
             </span>
             <div className="flex-1 min-w-0 pt-0.5">
-              <p className="text-sm text-foreground">{item.description}</p>
+              <p className="text-sm text-[#e2e5eb]">{item.description}</p>
             </div>
-            <span className="shrink-0 font-label text-[0.625rem] text-muted-foreground pt-1">
+            <span className="shrink-0 font-sans text-xs text-[0.625rem] text-[#848b9b] pt-1">
               {item.timestamp}
             </span>
           </div>
diff --git a/frontend/src/components/dashboard/RecentFlowPilotSessions.tsx b/frontend/src/components/dashboard/RecentFlowPilotSessions.tsx
index d757f84e..0467cdcc 100644
--- a/frontend/src/components/dashboard/RecentFlowPilotSessions.tsx
+++ b/frontend/src/components/dashboard/RecentFlowPilotSessions.tsx
@@ -41,15 +41,15 @@ export function RecentFlowPilotSessions() {
   if (sessions.length === 0) return null
 
   return (
-    <div className="glass-card-static">
+    <div className="card-flat">
       <div
         className="flex items-center justify-between px-5 py-3"
         style={{ borderBottom: '1px solid var(--glass-border)' }}
       >
-        <h3 className="font-heading text-sm font-bold text-foreground">Recent Sessions</h3>
+        <h3 className="font-heading text-sm font-bold text-[#e2e5eb]">Recent Sessions</h3>
         <Link
           to="/sessions"
-          className="flex items-center gap-1 text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors"
+          className="flex items-center gap-1 text-[0.6875rem] text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
         >
           History <ArrowRight size={10} />
         </Link>
@@ -69,11 +69,11 @@ export function RecentFlowPilotSessions() {
             >
               <StatusIcon size={14} style={{ color: config.color }} className="shrink-0" />
               <div className="flex-1 min-w-0">
-                <p className="text-sm text-foreground truncate">
+                <p className="text-sm text-[#e2e5eb] truncate">
                   {session.problem_summary || 'Session'}
                 </p>
               </div>
-              <span className="shrink-0 font-label text-[0.625rem] text-muted-foreground">
+              <span className="shrink-0 font-sans text-xs text-[#848b9b]">
                 {timeAgo(session.resolved_at || session.created_at)}
               </span>
             </button>
diff --git a/frontend/src/components/dashboard/SectionGroup.tsx b/frontend/src/components/dashboard/SectionGroup.tsx
index bfd448d4..7eb7b0af 100644
--- a/frontend/src/components/dashboard/SectionGroup.tsx
+++ b/frontend/src/components/dashboard/SectionGroup.tsx
@@ -19,19 +19,19 @@ export function SectionGroup({ title, count, defaultOpen = true, delay = 150, ch
         onClick={() => setOpen(!open)}
         className="flex w-full items-center gap-2 py-2"
       >
-        <span className="h-2 w-2 shrink-0 rounded-full bg-gradient-brand" />
-        <span className="font-heading text-[0.8125rem] font-bold uppercase tracking-[0.04em] text-foreground">
+        <span className="h-2 w-2 shrink-0 rounded-full bg-[#22d3ee]" />
+        <span className="font-heading text-[0.8125rem] font-bold uppercase tracking-[0.04em] text-[#e2e5eb]">
           {title}
         </span>
         {count !== undefined && (
-          <span className="rounded-full bg-secondary px-2 py-0.5 font-label text-[0.6875rem] text-muted-foreground">
+          <span className="rounded-full bg-secondary px-2 py-0.5 font-sans text-xs text-[#848b9b]">
             {count}
           </span>
         )}
         <div className="flex-1" />
         <ChevronDown
           size={14}
-          className={cn('text-muted-foreground transition-transform', !open && '-rotate-90')}
+          className={cn('text-[#848b9b] transition-transform', !open && '-rotate-90')}
         />
       </button>
       {open && <div className="mt-1 space-y-1">{children}</div>}
diff --git a/frontend/src/components/dashboard/SessionsPanel.tsx b/frontend/src/components/dashboard/SessionsPanel.tsx
index aa49a20d..edd9106d 100644
--- a/frontend/src/components/dashboard/SessionsPanel.tsx
+++ b/frontend/src/components/dashboard/SessionsPanel.tsx
@@ -21,14 +21,14 @@ export function SessionsPanel({ sessions, delay = 200 }: SessionsPanelProps) {
   if (sessions.length === 0) return null
 
   return (
-    <div className="glass-card-static fade-in" style={{ animationDelay: `${delay}ms` }}>
+    <div className="card-flat fade-in" style={{ animationDelay: `${delay}ms` }}>
       <div className="flex items-center justify-between px-4 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
-        <h3 className="font-heading text-sm font-semibold text-foreground">Recent Sessions</h3>
-        <Link to="/sessions" className="text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors">
+        <h3 className="font-heading text-sm font-semibold text-[#e2e5eb]">Recent Sessions</h3>
+        <Link to="/sessions" className="text-[0.6875rem] text-[#848b9b] hover:text-[#e2e5eb] transition-colors">
           View All
         </Link>
       </div>
-      <div className="divide-y divide-border">
+      <div className="divide-y divide-[#1e2130]">
         {sessions.map(session => (
           <Link
             key={session.id}
@@ -42,15 +42,15 @@ export function SessionsPanel({ sessions, delay = 200 }: SessionsPanelProps) {
                 'h-2 w-2 rounded-full',
                 session.status === 'completed' ? 'bg-green-500' :
                 session.status === 'in_progress' ? 'bg-amber-500' :
-                'bg-muted-foreground'
+                'bg-[#848b9b]'
               )}
             />
 
             {/* Name */}
-            <span className="text-sm text-foreground truncate">{session.treeName}</span>
+            <span className="text-sm text-[#e2e5eb] truncate">{session.treeName}</span>
 
             {/* Progress */}
-            <span className="text-[0.6875rem] text-muted-foreground truncate">
+            <span className="text-[0.6875rem] text-[#848b9b] truncate">
               {session.status === 'completed'
                 ? '✓ Resolved'
                 : session.stepNumber && session.totalSteps
@@ -59,7 +59,7 @@ export function SessionsPanel({ sessions, delay = 200 }: SessionsPanelProps) {
             </span>
 
             {/* Ticket */}
-            <span className="font-label text-[0.6875rem] text-muted-foreground truncate">
+            <span className="font-sans text-xs text-[0.6875rem] text-[#848b9b] truncate">
               {session.ticketNumber || '—'}
             </span>
 
diff --git a/frontend/src/components/dashboard/StartSessionInput.tsx b/frontend/src/components/dashboard/StartSessionInput.tsx
index d57f8b12..2ff6a1db 100644
--- a/frontend/src/components/dashboard/StartSessionInput.tsx
+++ b/frontend/src/components/dashboard/StartSessionInput.tsx
@@ -32,12 +32,12 @@ export function StartSessionInput() {
   }
 
   return (
-    <div className="glass-card-static overflow-hidden">
+    <div className="card-flat overflow-hidden">
       <div className="px-5 py-4 sm:px-6 sm:py-5">
         <div className="relative">
           <Sparkles
             size={18}
-            className="absolute left-4 top-1/2 -translate-y-1/2 text-muted-foreground"
+            className="absolute left-4 top-1/2 -translate-y-1/2 text-[#848b9b]"
           />
           <input
             ref={inputRef}
@@ -46,7 +46,7 @@ export function StartSessionInput() {
             onChange={(e) => setValue(e.target.value)}
             onKeyDown={handleKeyDown}
             placeholder="What are you troubleshooting?"
-            className="w-full rounded-xl border border-border bg-background py-3.5 pl-11 pr-4 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+            className="w-full rounded-xl border border-[#1e2130] bg-[#0c0d10] py-3.5 pl-11 pr-4 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           />
         </div>
         <div className="mt-3 flex items-center justify-between">
@@ -57,8 +57,8 @@ export function StartSessionInput() {
               className={cn(
                 'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors',
                 mode === 'guided'
-                  ? 'bg-primary/10 text-foreground'
-                  : 'text-muted-foreground hover:text-foreground'
+                  ? 'bg-[rgba(34,211,238,0.10)] text-[#e2e5eb]'
+                  : 'text-[#848b9b] hover:text-[#e2e5eb]'
               )}
             >
               <Sparkles size={12} />
@@ -70,15 +70,15 @@ export function StartSessionInput() {
               className={cn(
                 'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors',
                 mode === 'chat'
-                  ? 'bg-primary/10 text-foreground'
-                  : 'text-muted-foreground hover:text-foreground'
+                  ? 'bg-[rgba(34,211,238,0.10)] text-[#e2e5eb]'
+                  : 'text-[#848b9b] hover:text-[#e2e5eb]'
               )}
             >
               <MessageCircle size={12} />
               Open Chat
             </button>
           </div>
-          <span className="text-[0.625rem] text-muted-foreground">
+          <span className="text-[0.625rem] text-[#848b9b]">
             Press Enter to start
           </span>
         </div>
diff --git a/frontend/src/components/dashboard/TeamSummary.tsx b/frontend/src/components/dashboard/TeamSummary.tsx
index a98c814c..74d5e365 100644
--- a/frontend/src/components/dashboard/TeamSummary.tsx
+++ b/frontend/src/components/dashboard/TeamSummary.tsx
@@ -25,15 +25,15 @@ export function TeamSummary() {
   ]
 
   return (
-    <div className="glass-card-static">
+    <div className="card-flat">
       <div
         className="flex items-center justify-between px-5 py-3"
         style={{ borderBottom: '1px solid var(--glass-border)' }}
       >
-        <h3 className="font-heading text-sm font-bold text-foreground">Team Summary</h3>
+        <h3 className="font-heading text-sm font-bold text-[#e2e5eb]">Team Summary</h3>
         <button
           onClick={() => navigate('/analytics')}
-          className="flex items-center gap-1 text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors"
+          className="flex items-center gap-1 text-[0.6875rem] text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
         >
           Manage <ArrowRight size={10} />
         </button>
@@ -46,8 +46,8 @@ export function TeamSummary() {
             className="flex flex-col items-center gap-2 py-5 hover:bg-[rgba(255,255,255,0.02)] transition-colors"
           >
             <item.icon size={20} style={{ color: item.color }} />
-            <p className="font-heading text-xl font-extrabold text-foreground">{item.value}</p>
-            <p className="font-label text-[0.5625rem] uppercase tracking-[0.1em] text-muted-foreground">
+            <p className="font-heading text-xl font-extrabold text-[#e2e5eb]">{item.value}</p>
+            <p className="font-sans text-xs text-[0.5625rem] uppercase tracking-[0.1em] text-[#848b9b]">
               {item.label}
             </p>
           </button>
diff --git a/frontend/src/components/dashboard/TreeListItem.tsx b/frontend/src/components/dashboard/TreeListItem.tsx
index 5561e7a3..769290c5 100644
--- a/frontend/src/components/dashboard/TreeListItem.tsx
+++ b/frontend/src/components/dashboard/TreeListItem.tsx
@@ -33,7 +33,7 @@ export function TreeListItem({
   return (
     <div
       onClick={() => navigate(getTreeNavigatePath(id, treeType))}
-      className="group grid cursor-pointer items-center gap-3 rounded-lg border border-transparent bg-card px-4 py-3 transition-colors hover:border-border hover:bg-[var(--sidebar-hover)]"
+      className="group grid cursor-pointer items-center gap-3 rounded-lg border border-transparent bg-[#14161d] px-4 py-3 transition-colors hover:border-[#1e2130] hover:bg-[var(--sidebar-hover)]"
       style={{ gridTemplateColumns: '40px 1fr 130px 80px 100px 40px' }}
     >
       {/* Icon box */}
@@ -46,15 +46,15 @@ export function TreeListItem({
 
       {/* Info */}
       <div className="min-w-0">
-        <p className="font-heading text-sm font-semibold text-foreground truncate">{name}</p>
+        <p className="font-heading text-sm font-semibold text-[#e2e5eb] truncate">{name}</p>
         <div className="mt-0.5 flex items-center gap-2">
           {tags.slice(0, 3).map(tag => (
-            <span key={tag} className="rounded border border-border bg-secondary px-1.5 py-px font-label text-[0.625rem] text-muted-foreground">
+            <span key={tag} className="rounded border border-[#1e2130] bg-secondary px-1.5 py-px font-sans text-xs text-[0.625rem] text-[#848b9b]">
               {tag}
             </span>
           ))}
           {description && tags.length === 0 && (
-            <span className="text-[0.6875rem] text-muted-foreground truncate">{description}</span>
+            <span className="text-[0.6875rem] text-[#848b9b] truncate">{description}</span>
           )}
         </div>
       </div>
@@ -64,13 +64,13 @@ export function TreeListItem({
         {category && (
           <>
             <span className="h-2 w-2 shrink-0 rounded-full" style={{ backgroundColor: categoryColor }} />
-            <span className="font-label text-xs text-muted-foreground truncate">{category.name}</span>
+            <span className="font-sans text-xs text-[#848b9b] truncate">{category.name}</span>
           </>
         )}
       </div>
 
       {/* Usage count */}
-      <div className="text-right font-label text-xs text-muted-foreground">
+      <div className="text-right font-sans text-xs text-[#848b9b]">
         {usageCount} uses
       </div>
 
@@ -85,7 +85,7 @@ export function TreeListItem({
           e.stopPropagation()
           navigate(getTreeEditorPath(id, treeType))
         }}
-        className="flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground opacity-0 transition-opacity hover:bg-accent group-hover:opacity-100"
+        className="flex h-8 w-8 items-center justify-center rounded-md text-[#848b9b] opacity-0 transition-opacity hover:bg-accent group-hover:opacity-100"
       >
         <MoreHorizontal size={16} />
       </button>
diff --git a/frontend/src/components/dashboard/WeeklyCalendar.tsx b/frontend/src/components/dashboard/WeeklyCalendar.tsx
index db289cfe..3c0f618c 100644
--- a/frontend/src/components/dashboard/WeeklyCalendar.tsx
+++ b/frontend/src/components/dashboard/WeeklyCalendar.tsx
@@ -34,10 +34,10 @@ export function WeeklyCalendar({ events = {} }: WeeklyCalendarProps) {
   const days = useMemo(() => getWeekDays(), [])
 
   return (
-    <div className="glass-card-static flex flex-col h-full">
+    <div className="card-flat flex flex-col h-full">
       <div className="flex items-center gap-2 px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
-        <Calendar size={16} className="text-muted-foreground" />
-        <h3 className="font-heading text-sm font-bold text-foreground">This Week</h3>
+        <Calendar size={16} className="text-[#848b9b]" />
+        <h3 className="font-heading text-sm font-bold text-[#e2e5eb]">This Week</h3>
       </div>
       <div className="flex flex-1 min-h-0">
         {days.map((day, i) => {
@@ -56,10 +56,10 @@ export function WeeklyCalendar({ events = {} }: WeeklyCalendarProps) {
                   borderBottom: day.isToday ? '2px solid #06b6d4' : '1px solid var(--glass-border)',
                 }}
               >
-                <span className={`font-label text-[0.625rem] uppercase tracking-widest ${day.isToday ? 'text-cyan-400' : 'text-muted-foreground'}`}>
+                <span className={`font-sans text-xs text-[0.625rem] uppercase tracking-widest ${day.isToday ? 'text-cyan-400' : 'text-[#848b9b]'}`}>
                   {day.label}
                 </span>
-                <div className={`text-sm font-heading font-bold ${day.isToday ? 'text-foreground' : 'text-muted-foreground'}`}>
+                <div className={`text-sm font-heading font-bold ${day.isToday ? 'text-[#e2e5eb]' : 'text-[#848b9b]'}`}>
                   {day.date.getDate()}
                 </div>
               </div>
@@ -76,8 +76,8 @@ export function WeeklyCalendar({ events = {} }: WeeklyCalendarProps) {
                         background: 'rgba(255, 255, 255, 0.02)',
                       }}
                     >
-                      <div className="font-medium text-foreground truncate">{event.title}</div>
-                      <div className="font-label text-[0.5625rem] text-muted-foreground">{event.time}</div>
+                      <div className="font-medium text-[#e2e5eb] truncate">{event.title}</div>
+                      <div className="font-sans text-xs text-[0.5625rem] text-[#848b9b]">{event.time}</div>
                     </div>
                   ))
                 )}