diff --git a/frontend/src/components/config/DiffViewer.tsx b/frontend/src/components/config/DiffViewer.tsx
index bd8e6db..e8f51dd 100644
--- a/frontend/src/components/config/DiffViewer.tsx
+++ b/frontend/src/components/config/DiffViewer.tsx
@@ -10,10 +10,10 @@ interface DiffViewerProps {
 }
 
 function classifyLine(line: string): string {
-  if (line.startsWith('@@')) return 'bg-blue-900/20 text-blue-300'
+  if (line.startsWith('@@')) return 'bg-info/10 text-info'
   if (line.startsWith('+++') || line.startsWith('---')) return 'text-text-muted'
-  if (line.startsWith('+')) return 'bg-green-900/30 text-green-300'
-  if (line.startsWith('-')) return 'bg-red-900/30 text-red-300'
+  if (line.startsWith('+')) return 'bg-success/10 text-success'
+  if (line.startsWith('-')) return 'bg-error/10 text-error'
   return 'text-text-primary'
 }
 
diff --git a/frontend/src/components/config/InterfacesPanel.tsx b/frontend/src/components/config/InterfacesPanel.tsx
index 1052b55..969bceb 100644
--- a/frontend/src/components/config/InterfacesPanel.tsx
+++ b/frontend/src/components/config/InterfacesPanel.tsx
@@ -71,14 +71,14 @@ const SUB_TABS: { key: SubTab; label: string; icon: React.ElementType }[] = [
 // ---------------------------------------------------------------------------
 
 const TYPE_COLORS: Record<string, string> = {
-  ether: '#3B82F6',
-  bridge: '#8B5CF6',
-  vlan: '#F59E0B',
-  bonding: '#10B981',
-  pppoe: '#EF4444',
-  l2tp: '#EC4899',
-  ovpn: '#06B6D4',
-  wlan: '#84CC16',
+  ether: 'hsl(var(--accent))',
+  bridge: 'hsl(var(--info))',
+  vlan: 'hsl(var(--warning))',
+  bonding: 'hsl(var(--success))',
+  pppoe: 'hsl(var(--error))',
+  l2tp: 'hsl(var(--error))',
+  ovpn: 'hsl(var(--info))',
+  wlan: 'hsl(var(--success))',
 }
 
 // ---------------------------------------------------------------------------