diff --git a/frontend/src/components/alerts/AlertsPage.tsx b/frontend/src/components/alerts/AlertsPage.tsx
index 41898d8..b803356 100644
--- a/frontend/src/components/alerts/AlertsPage.tsx
+++ b/frontend/src/components/alerts/AlertsPage.tsx
@@ -308,7 +308,7 @@ export function AlertsPage() {
           ) : (
             <div className="rounded-lg border border-border bg-surface overflow-hidden">
               {/* Table header */}
-              <div className="flex items-center gap-3 px-4 py-2 border-b border-border text-xs text-text-muted font-medium">
+              <div className="flex items-center gap-3 px-4 py-2 border-b border-border text-[10px] uppercase tracking-wider text-text-muted font-semibold">
                 <span className="w-5" />
                 <span className="w-16">Severity</span>
                 <span className="w-16">Status</span>
diff --git a/frontend/src/components/audit/AuditLogTable.tsx b/frontend/src/components/audit/AuditLogTable.tsx
index 55cbcae..44c83fa 100644
--- a/frontend/src/components/audit/AuditLogTable.tsx
+++ b/frontend/src/components/audit/AuditLogTable.tsx
@@ -228,22 +228,22 @@ export function AuditLogTable({ tenantId }: AuditLogTableProps) {
             <thead>
               <tr className="border-b border-border bg-elevated/50">
                 <th scope="col" className="w-8 px-3 py-2"><span className="sr-only">Expand</span></th>
-                <th scope="col" className="px-3 py-2 text-left text-xs font-medium text-text-muted">
+                <th scope="col" className="px-3 py-2 text-left text-[10px] uppercase tracking-wider font-semibold text-text-muted">
                   Timestamp
                 </th>
-                <th scope="col" className="px-3 py-2 text-left text-xs font-medium text-text-muted">
+                <th scope="col" className="px-3 py-2 text-left text-[10px] uppercase tracking-wider font-semibold text-text-muted">
                   User
                 </th>
-                <th scope="col" className="px-3 py-2 text-left text-xs font-medium text-text-muted">
+                <th scope="col" className="px-3 py-2 text-left text-[10px] uppercase tracking-wider font-semibold text-text-muted">
                   Action
                 </th>
-                <th scope="col" className="px-3 py-2 text-left text-xs font-medium text-text-muted">
+                <th scope="col" className="px-3 py-2 text-left text-[10px] uppercase tracking-wider font-semibold text-text-muted">
                   Resource
                 </th>
-                <th scope="col" className="px-3 py-2 text-left text-xs font-medium text-text-muted">
+                <th scope="col" className="px-3 py-2 text-left text-[10px] uppercase tracking-wider font-semibold text-text-muted">
                   Device
                 </th>
-                <th scope="col" className="px-3 py-2 text-left text-xs font-medium text-text-muted">
+                <th scope="col" className="px-3 py-2 text-left text-[10px] uppercase tracking-wider font-semibold text-text-muted">
                   IP Address
                 </th>
               </tr>
diff --git a/frontend/src/components/dashboard/BandwidthChart.tsx b/frontend/src/components/dashboard/BandwidthChart.tsx
index 4678d0f..ab7b77e 100644
--- a/frontend/src/components/dashboard/BandwidthChart.tsx
+++ b/frontend/src/components/dashboard/BandwidthChart.tsx
@@ -45,7 +45,7 @@ function BwTooltip({ active, payload }: CustomTooltipProps) {
   if (!active || !payload || payload.length === 0) return null
   const item = payload[0]
   return (
-    <div className="rounded-md border border-border bg-surface px-3 py-2 shadow-md text-xs">
+    <div className="rounded-md border border-border bg-surface px-3 py-2 text-xs">
       <p className="font-medium text-text-primary">{item.payload.hostname}</p>
       <p className="text-text-secondary">{formatBw(item.value)}</p>
     </div>
diff --git a/frontend/src/components/dashboard/WirelessIssues.tsx b/frontend/src/components/dashboard/WirelessIssues.tsx
index ddfeeff..6da7a9c 100644
--- a/frontend/src/components/dashboard/WirelessIssues.tsx
+++ b/frontend/src/components/dashboard/WirelessIssues.tsx
@@ -7,10 +7,10 @@ interface WirelessIssuesProps {
 }
 
 function signalColor(signal: number | null): string {
-  if (signal === null) return 'text-muted-foreground'
-  if (signal > -60) return 'text-green-400'
-  if (signal > -70) return 'text-yellow-400'
-  return 'text-red-400'
+  if (signal === null) return 'text-text-muted'
+  if (signal > -60) return 'text-success'
+  if (signal > -70) return 'text-warning'
+  return 'text-error'
 }
 
 export function WirelessIssues({ tenantId }: WirelessIssuesProps) {
@@ -24,40 +24,40 @@ export function WirelessIssues({ tenantId }: WirelessIssuesProps) {
   })
 
   return (
-    <div className="rounded-xl border border-border bg-card p-5">
-      <h3 className="text-sm font-semibold text-foreground mb-4 flex items-center gap-2">
-        <Wifi className="h-4 w-4 text-muted-foreground" />
+    <div className="rounded-lg border border-border bg-surface p-5">
+      <h3 className="text-sm font-semibold text-text-primary mb-4 flex items-center gap-2">
+        <Wifi className="h-4 w-4 text-text-muted" />
         APs Needing Attention
       </h3>
 
       {isLoading ? (
-        <div className="text-sm text-muted-foreground">Loading...</div>
+        <div className="text-sm text-text-muted">Loading...</div>
       ) : issues.length === 0 ? (
         <div className="flex flex-col items-center gap-2 py-6 text-center">
-          <CheckCircle2 className="h-8 w-8 text-green-400" />
-          <span className="text-sm font-medium text-green-400">All APs Healthy</span>
-          <span className="text-xs text-muted-foreground">No wireless issues detected</span>
+          <CheckCircle2 className="h-8 w-8 text-success" />
+          <span className="text-sm font-medium text-success">All APs Healthy</span>
+          <span className="text-xs text-text-muted">No wireless issues detected</span>
         </div>
       ) : (
         <div className="space-y-2">
           {issues.map((ap, i) => (
             <div
               key={`${ap.device_id}-${ap.interface}-${i}`}
-              className="flex items-center justify-between py-2 px-3 rounded-lg bg-muted/30 hover:bg-muted/50 transition-colors"
+              className="flex items-center justify-between py-2 px-3 rounded-lg bg-elevated/30 hover:bg-elevated/50 transition-colors"
             >
               <div className="flex items-center gap-3 min-w-0">
                 <div className={`h-2 w-2 rounded-full flex-shrink-0 ${
-                  ap.signal !== null && ap.signal < -75 ? 'bg-red-400' :
-                  ap.ccq !== null && ap.ccq < 50 ? 'bg-red-400' :
-                  'bg-yellow-400'
+                  ap.signal !== null && ap.signal < -75 ? 'bg-error' :
+                  ap.ccq !== null && ap.ccq < 50 ? 'bg-error' :
+                  'bg-warning'
                 }`} />
                 <div className="min-w-0">
-                  <div className="text-sm font-medium text-foreground truncate">
+                  <div className="text-sm font-medium text-text-primary truncate">
                     {ap.hostname}
-                    <span className="text-xs text-muted-foreground ml-1">({ap.interface})</span>
+                    <span className="text-xs text-text-muted ml-1">({ap.interface})</span>
                   </div>
                   {ap.tenant_name && (
-                    <div className="text-xs text-muted-foreground">{ap.tenant_name}</div>
+                    <div className="text-xs text-text-muted">{ap.tenant_name}</div>
                   )}
                 </div>
               </div>
diff --git a/frontend/src/components/settings/ApiKeysPage.tsx b/frontend/src/components/settings/ApiKeysPage.tsx
index cafeede..9d9091c 100644
--- a/frontend/src/components/settings/ApiKeysPage.tsx
+++ b/frontend/src/components/settings/ApiKeysPage.tsx
@@ -170,13 +170,13 @@ export function ApiKeysPage({ tenantId }: ApiKeysPageProps) {
           <table className="w-full text-sm">
             <thead>
               <tr className="border-b border-border bg-elevated/30">
-                <th className="text-left px-4 py-2.5 font-medium text-text-secondary">Name</th>
-                <th className="text-left px-4 py-2.5 font-medium text-text-secondary">Key</th>
-                <th className="text-left px-4 py-2.5 font-medium text-text-secondary">Scopes</th>
-                <th className="text-left px-4 py-2.5 font-medium text-text-secondary">Last Used</th>
-                <th className="text-left px-4 py-2.5 font-medium text-text-secondary">Expires</th>
-                <th className="text-left px-4 py-2.5 font-medium text-text-secondary">Status</th>
-                <th className="text-right px-4 py-2.5 font-medium text-text-secondary">Actions</th>
+                <th className="text-left px-4 py-2.5 text-[10px] uppercase tracking-wider font-semibold text-text-muted">Name</th>
+                <th className="text-left px-4 py-2.5 text-[10px] uppercase tracking-wider font-semibold text-text-muted">Key</th>
+                <th className="text-left px-4 py-2.5 text-[10px] uppercase tracking-wider font-semibold text-text-muted">Scopes</th>
+                <th className="text-left px-4 py-2.5 text-[10px] uppercase tracking-wider font-semibold text-text-muted">Last Used</th>
+                <th className="text-left px-4 py-2.5 text-[10px] uppercase tracking-wider font-semibold text-text-muted">Expires</th>
+                <th className="text-left px-4 py-2.5 text-[10px] uppercase tracking-wider font-semibold text-text-muted">Status</th>
+                <th className="text-right px-4 py-2.5 text-[10px] uppercase tracking-wider font-semibold text-text-muted">Actions</th>
               </tr>
             </thead>
             <tbody>
diff --git a/frontend/src/components/settings/SettingsPage.tsx b/frontend/src/components/settings/SettingsPage.tsx
index 9db29fb..003f83d 100644
--- a/frontend/src/components/settings/SettingsPage.tsx
+++ b/frontend/src/components/settings/SettingsPage.tsx
@@ -393,7 +393,7 @@ function SMTPSettingsSection() {
         <select
           value={provider}
           onChange={(e) => handleProviderChange(e.target.value)}
-          className="w-full rounded-md bg-slate-700 border border-slate-600 text-white px-3 py-2 text-sm mt-1"
+          className="w-full rounded-md bg-elevated border border-border text-text-primary px-3 py-2 text-sm mt-1"
         >
           {SMTP_PRESETS.map((p) => (
             <option key={p.id} value={p.id}>{p.label}</option>
@@ -455,7 +455,7 @@ function SMTPSettingsSection() {
       </div>
 
       {testResult && (
-        <p className={`text-sm ${testResult.success ? 'text-green-400' : 'text-red-400'}`}>
+        <p className={`text-sm ${testResult.success ? 'text-success' : 'text-error'}`}>
           {testResult.message}
         </p>
       )}
diff --git a/frontend/src/components/templates/TemplateEditor.tsx b/frontend/src/components/templates/TemplateEditor.tsx
index 2b41a24..ef589b7 100644
--- a/frontend/src/components/templates/TemplateEditor.tsx
+++ b/frontend/src/components/templates/TemplateEditor.tsx
@@ -248,10 +248,10 @@ export function TemplateEditor({ template, onSave, onCancel }: TemplateEditorPro
               <table className="w-full text-xs">
                 <thead>
                   <tr className="bg-surface border-b border-border">
-                    <th className="text-left px-3 py-1.5 text-text-secondary font-medium">Name</th>
-                    <th className="text-left px-3 py-1.5 text-text-secondary font-medium w-28">Type</th>
-                    <th className="text-left px-3 py-1.5 text-text-secondary font-medium">Default</th>
-                    <th className="text-left px-3 py-1.5 text-text-secondary font-medium">Description</th>
+                    <th className="text-left px-3 py-1.5 text-[10px] uppercase tracking-wider font-semibold text-text-muted">Name</th>
+                    <th className="text-left px-3 py-1.5 text-[10px] uppercase tracking-wider font-semibold text-text-muted w-28">Type</th>
+                    <th className="text-left px-3 py-1.5 text-[10px] uppercase tracking-wider font-semibold text-text-muted">Default</th>
+                    <th className="text-left px-3 py-1.5 text-[10px] uppercase tracking-wider font-semibold text-text-muted">Description</th>
                     <th className="w-8" />
                   </tr>
                 </thead>
diff --git a/frontend/src/routes/_authenticated/about.tsx b/frontend/src/routes/_authenticated/about.tsx
index 211e028..4bf8e2e 100644
--- a/frontend/src/routes/_authenticated/about.tsx
+++ b/frontend/src/routes/_authenticated/about.tsx
@@ -585,7 +585,7 @@ function AboutPage() {
                 <span className="flex-shrink-0 text-text-muted">
                   {copied ? (
                     <svg
-                      className="w-4 h-4 text-green-400"
+                      className="w-4 h-4 text-success"
                       fill="none"
                       viewBox="0 0 24 24"
                       stroke="currentColor"