diff --git a/client/src/components/Chat/Messages/Content/DialogImage.tsx b/client/src/components/Chat/Messages/Content/DialogImage.tsx
index b9cbe64555..d89bab65f5 100644
--- a/client/src/components/Chat/Messages/Content/DialogImage.tsx
+++ b/client/src/components/Chat/Messages/Content/DialogImage.tsx
@@ -8,12 +8,12 @@ const imageSizeCache = new Map<string, string>();
 
 const getQualityStyles = (quality: string): string => {
   if (quality === 'high') {
-    return 'bg-green-100 text-green-800';
+    return 'bg-status-success-subtle text-status-success';
   }
   if (quality === 'low') {
-    return 'bg-orange-100 text-orange-800';
+    return 'bg-status-warning-subtle text-status-warning';
   }
-  return 'bg-gray-100 text-gray-800';
+  return 'bg-status-neutral-subtle text-status-neutral';
 };
 
 export default function DialogImage({
diff --git a/client/src/components/MCP/MCPConfigDialog.tsx b/client/src/components/MCP/MCPConfigDialog.tsx
index f1079c2799..05ec5982c5 100644
--- a/client/src/components/MCP/MCPConfigDialog.tsx
+++ b/client/src/components/MCP/MCPConfigDialog.tsx
@@ -91,7 +91,7 @@ export default function MCPConfigDialog({
     // Connecting: blue (in progress)
     if (connectionState === 'connecting') {
       return (
-        <div className="flex items-center gap-2 rounded-full bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-600 dark:bg-blue-950 dark:text-blue-400">
+        <div className="flex items-center gap-2 rounded-full bg-status-info-subtle px-2 py-0.5 text-xs font-medium text-status-info">
           <Spinner className="size-3" />
           <span>{localize('com_ui_connecting')}</span>
         </div>
@@ -103,7 +103,7 @@ export default function MCPConfigDialog({
       if (requiresOAuth) {
         // Needs OAuth: amber (requires action)
         return (
-          <div className="flex items-center gap-2 rounded-full bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-600 dark:bg-amber-950 dark:text-amber-400">
+          <div className="flex items-center gap-2 rounded-full bg-status-warning-subtle px-2 py-0.5 text-xs font-medium text-status-warning">
             <KeyRound className="size-3" aria-hidden="true" />
             <span>{localize('com_nav_mcp_status_needs_auth')}</span>
           </div>
@@ -111,7 +111,7 @@ export default function MCPConfigDialog({
       }
       // Simply disconnected: gray (neutral)
       return (
-        <div className="flex items-center gap-2 rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600 dark:bg-gray-800 dark:text-gray-400">
+        <div className="flex items-center gap-2 rounded-full bg-status-neutral-subtle px-2 py-0.5 text-xs font-medium text-status-neutral">
           <PlugZap className="size-3" aria-hidden="true" />
           <span>{localize('com_nav_mcp_status_disconnected')}</span>
         </div>
@@ -121,7 +121,7 @@ export default function MCPConfigDialog({
     // Error: red
     if (connectionState === 'error') {
       return (
-        <div className="flex items-center gap-2 rounded-full bg-red-50 px-2 py-0.5 text-xs font-medium text-red-600 dark:bg-red-950 dark:text-red-400">
+        <div className="flex items-center gap-2 rounded-full bg-status-error-subtle px-2 py-0.5 text-xs font-medium text-status-error">
           <AlertTriangle className="size-3" aria-hidden="true" />
           <span>{localize('com_ui_error')}</span>
         </div>
@@ -131,8 +131,8 @@ export default function MCPConfigDialog({
     // Connected: green
     if (connectionState === 'connected') {
       return (
-        <div className="flex items-center gap-2 rounded-full bg-green-50 px-2 py-0.5 text-xs font-medium text-green-600 dark:bg-green-950 dark:text-green-400">
-          <div className="size-1.5 rounded-full bg-green-500" />
+        <div className="flex items-center gap-2 rounded-full bg-status-success-subtle px-2 py-0.5 text-xs font-medium text-status-success">
+          <div className="size-1.5 rounded-full bg-status-success" />
           <span>{localize('com_ui_active')}</span>
         </div>
       );
diff --git a/client/src/components/SidePanel/Memories/MemoryUsageBadge.tsx b/client/src/components/SidePanel/Memories/MemoryUsageBadge.tsx
index 7215dbe338..d5a4987434 100644
--- a/client/src/components/SidePanel/Memories/MemoryUsageBadge.tsx
+++ b/client/src/components/SidePanel/Memories/MemoryUsageBadge.tsx
@@ -14,12 +14,12 @@ interface MemoryUsageBadgeProps {
 
 const getStatusColor = (pct: number): string => {
   if (pct > 90) {
-    return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400';
+    return 'bg-status-error-subtle text-status-error';
   }
   if (pct > 75) {
-    return 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400';
+    return 'bg-status-warning-subtle text-status-warning';
   }
-  return 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400';
+  return 'bg-status-success-subtle text-status-success';
 };
 
 export default function MemoryUsageBadge({