diff --git a/frontend/src/components/monitoring/HealthChart.tsx b/frontend/src/components/monitoring/HealthChart.tsx
index abd6670..378edba 100644
--- a/frontend/src/components/monitoring/HealthChart.tsx
+++ b/frontend/src/components/monitoring/HealthChart.tsx
@@ -64,10 +64,10 @@ export function HealthChart({ data, metric, label, color, unit, maxY }: HealthCh
               <stop offset="100%" stopColor={color} stopOpacity={0} />
             </linearGradient>
           </defs>
-          <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
+          <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border-default))" />
           <XAxis
             dataKey="bucket"
-            tick={{ fontSize: 9, fill: '#94a3b8' }}
+            tick={{ fontSize: 9, fill: 'hsl(var(--text-muted))' }}
             axisLine={false}
             tickLine={false}
             interval="preserveStartEnd"
@@ -75,7 +75,7 @@ export function HealthChart({ data, metric, label, color, unit, maxY }: HealthCh
           <YAxis
             domain={domain}
             tickFormatter={(v: number) => `${v}${unit}`}
-            tick={{ fontSize: 9, fill: '#94a3b8' }}
+            tick={{ fontSize: 9, fill: 'hsl(var(--text-muted))' }}
             axisLine={false}
             tickLine={false}
             width={40}
diff --git a/frontend/src/components/monitoring/HealthTab.tsx b/frontend/src/components/monitoring/HealthTab.tsx
index 9a678ac..b53c90e 100644
--- a/frontend/src/components/monitoring/HealthTab.tsx
+++ b/frontend/src/components/monitoring/HealthTab.tsx
@@ -55,7 +55,7 @@ export function HealthTab({ tenantId, deviceId, active = true }: HealthTabProps)
               data={data}
               metric="avg_cpu"
               label="CPU Load"
-              color="#38BDF8"
+              color="hsl(var(--accent))"
               unit="%"
               maxY={100}
             />
diff --git a/frontend/src/components/monitoring/Sparkline.tsx b/frontend/src/components/monitoring/Sparkline.tsx
index 9400b65..4f86ba1 100644
--- a/frontend/src/components/monitoring/Sparkline.tsx
+++ b/frontend/src/components/monitoring/Sparkline.tsx
@@ -7,7 +7,7 @@ interface SparklineProps {
   height?: number
 }
 
-export function Sparkline({ data, color = '#38BDF8', width = 60, height = 24 }: SparklineProps) {
+export function Sparkline({ data, color = 'hsl(var(--accent))', width = 60, height = 24 }: SparklineProps) {
   const chartData = data.map((v, i) => ({ v, i }))
   return (
     <LineChart width={width} height={height} data={chartData}>
diff --git a/frontend/src/components/monitoring/TrafficChart.tsx b/frontend/src/components/monitoring/TrafficChart.tsx
index f4465ae..1da3437 100644
--- a/frontend/src/components/monitoring/TrafficChart.tsx
+++ b/frontend/src/components/monitoring/TrafficChart.tsx
@@ -70,25 +70,25 @@ export function TrafficChart({ data, interfaceName }: TrafficChartProps) {
         <AreaChart data={chartData} margin={{ top: 4, right: 8, left: 0, bottom: 0 }}>
           <defs>
             <linearGradient id={`rx-grad-${interfaceName}`} x1="0" y1="0" x2="0" y2="1">
-              <stop offset="0%" stopColor="#38BDF8" stopOpacity={0.3} />
-              <stop offset="100%" stopColor="#38BDF8" stopOpacity={0} />
+              <stop offset="0%" stopColor="hsl(var(--accent))" stopOpacity={0.3} />
+              <stop offset="100%" stopColor="hsl(var(--accent))" stopOpacity={0} />
             </linearGradient>
             <linearGradient id={`tx-grad-${interfaceName}`} x1="0" y1="0" x2="0" y2="1">
               <stop offset="0%" stopColor="#4ADE80" stopOpacity={0.3} />
               <stop offset="100%" stopColor="#4ADE80" stopOpacity={0} />
             </linearGradient>
           </defs>
-          <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
+          <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border-default))" />
           <XAxis
             dataKey="bucket"
-            tick={{ fontSize: 10, fill: '#94a3b8' }}
+            tick={{ fontSize: 10, fill: 'hsl(var(--text-muted))' }}
             axisLine={false}
             tickLine={false}
             interval="preserveStartEnd"
           />
           <YAxis
             tickFormatter={formatBps}
-            tick={{ fontSize: 10, fill: '#94a3b8' }}
+            tick={{ fontSize: 10, fill: 'hsl(var(--text-muted))' }}
             axisLine={false}
             tickLine={false}
             width={60}
@@ -98,7 +98,7 @@ export function TrafficChart({ data, interfaceName }: TrafficChartProps) {
             type="monotone"
             dataKey="avg_rx_bps"
             name="avg_rx_bps"
-            stroke="#38BDF8"
+            stroke="hsl(var(--accent))"
             strokeWidth={1.5}
             fill={`url(#rx-grad-${interfaceName})`}
           />
diff --git a/frontend/src/components/monitoring/WirelessTab.tsx b/frontend/src/components/monitoring/WirelessTab.tsx
index 583d2fa..048a111 100644
--- a/frontend/src/components/monitoring/WirelessTab.tsx
+++ b/frontend/src/components/monitoring/WirelessTab.tsx
@@ -38,7 +38,7 @@ function ClientCountMiniChart({ data }: { data: WirelessMetricPoint[] }) {
             <stop offset="100%" stopColor="#A78BFA" stopOpacity={0} />
           </linearGradient>
         </defs>
-        <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
+        <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border-default))" />
         <XAxis dataKey="bucket" hide />
         <Area
           type="monotone"