From 00130569763959edf17d003f37a3a5fdf17a0fe5 Mon Sep 17 00:00:00 2001
From: Marek Dano <mk.dano@gmail.com>
Date: Fri, 21 Aug 2026 13:52:53 +0100
Subject: [PATCH] fix: Standardize status icons and colors app-wide

Signed-off-by: Marek Dano <mk.dano@gmail.com>
---
 src/components/auth/AuthSuccessPanel.tsx      |  9 ++---
 src/components/dashboard/StatusDot.tsx        |  4 +-
 src/components/dashboard/StatusHeadline.tsx   | 10 +++--
 src/components/gateways/CreateServerForm.tsx  |  5 ++-
 src/components/gateways/SourceSelection.tsx   |  4 +-
 .../mcp-servers/AdvancedSettings.tsx          |  2 +-
 src/components/mcp-servers/MCPServerForm.tsx  | 23 +++++------
 .../mcp-servers/QueryParameterAuth.tsx        |  8 ++--
 src/components/prompts/PromptForm.tsx         |  5 ++-
 .../prompts/PromptPreviewResult.tsx           |  6 +--
 .../server-catalog/CatalogResults.tsx         |  5 ++-
 src/components/servers/ServerStatusBadge.tsx  |  9 +++--
 src/components/servers/ServersTable.tsx       |  4 +-
 .../servers/TestConnectionPanel.tsx           | 15 +++----
 src/components/ui/badge.test.tsx              |  8 ++--
 src/components/ui/badge.tsx                   |  6 +--
 .../ui/inline-notification.test.tsx           |  8 ++--
 src/components/ui/inline-notification.tsx     | 17 +++-----
 src/index.css                                 |  8 ++++
 src/lib/status.test.ts                        | 39 +++++++++++++++++++
 src/lib/status.ts                             | 29 ++++++++++++++
 src/pages/CreateServer.tsx                    |  4 +-
 22 files changed, 152 insertions(+), 76 deletions(-)
 create mode 100644 src/lib/status.test.ts
 create mode 100644 src/lib/status.ts

diff --git a/src/components/auth/AuthSuccessPanel.tsx b/src/components/auth/AuthSuccessPanel.tsx
index e0b974a..4e76b79 100644
--- a/src/components/auth/AuthSuccessPanel.tsx
+++ b/src/components/auth/AuthSuccessPanel.tsx
@@ -1,10 +1,10 @@
 import { useEffect, useRef } from "react";
-import { CircleCheck } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { STATUS_ICON } from "@/lib/status";
 
 /**
  * Shared success state for ResetPassword / PasswordChangeRequired: a
- * CircleCheck heading (focus-managed for screen-reader/keyboard users),
+ * success-icon heading (focus-managed for screen-reader/keyboard users),
  * body copy, and a single CTA. Not used by ForgotPassword, which shows its
  * success state as an InlineNotification instead of this pattern.
  */
@@ -37,10 +37,7 @@ export function AuthSuccessPanel({
           tabIndex={-1}
           className="flex items-center gap-2 text-base font-semibold leading-6 text-neutral-900 dark:text-neutral-100 outline-none"
         >
-          <CircleCheck
-            className="size-6 shrink-0 text-emerald-500 dark:text-emerald-400"
-            aria-hidden="true"
-          />
+          <STATUS_ICON.success className="size-6 shrink-0 text-success" aria-hidden="true" />
           {title}
         </h1>
         <p className="text-[13px] leading-4 text-neutral-500 dark:text-neutral-400">{body}</p>
diff --git a/src/components/dashboard/StatusDot.tsx b/src/components/dashboard/StatusDot.tsx
index a4ce7c6..f62ad29 100644
--- a/src/components/dashboard/StatusDot.tsx
+++ b/src/components/dashboard/StatusDot.tsx
@@ -11,9 +11,9 @@ import { cn } from "@/lib/utils";
 export type StatusTone = "success" | "error" | "warning" | "muted";
 
 const TONE_CLASS: Record<StatusTone, string> = {
-  success: "bg-green-500",
+  success: "bg-success",
   error: "bg-destructive",
-  warning: "bg-yellow-500",
+  warning: "bg-warning",
   muted: "bg-muted-foreground",
 };
 
diff --git a/src/components/dashboard/StatusHeadline.tsx b/src/components/dashboard/StatusHeadline.tsx
index 3f88742..75122e9 100644
--- a/src/components/dashboard/StatusHeadline.tsx
+++ b/src/components/dashboard/StatusHeadline.tsx
@@ -7,19 +7,23 @@
  * `action` are slots the fuller #5847 / default-state content fills in.
  */
 
-import { Activity, AlertTriangle, Info } from "lucide-react";
+import { Activity, Info } from "lucide-react";
 import type { ComponentType, ReactNode } from "react";
 import { useIntl } from "react-intl";
 
 import { cn } from "@/lib/utils";
+import { STATUS_ICON } from "@/lib/status";
 import type { Severity } from "./homeStates";
 import { resolveHeadline, type HeadlineCondition } from "./resolveHeadline";
 
+// success/info keep their own dashboard-specific glyphs (a pulse for "all
+// active", not a generic checkmark); warning/error consume the shared
+// severity icons so the two no longer render identically.
 const SEVERITY_ICON: Record<Severity, ComponentType<{ className?: string }>> = {
   success: Activity,
   info: Info,
-  warning: AlertTriangle,
-  error: AlertTriangle,
+  warning: STATUS_ICON.warning,
+  error: STATUS_ICON.error,
 };
 
 // Severity is conveyed by the icon shape and the message, not by colour: the
diff --git a/src/components/gateways/CreateServerForm.tsx b/src/components/gateways/CreateServerForm.tsx
index fbca0f6..2f1bcfc 100644
--- a/src/components/gateways/CreateServerForm.tsx
+++ b/src/components/gateways/CreateServerForm.tsx
@@ -1,6 +1,6 @@
 import { useState, type ReactNode } from "react";
 import { useIntl } from "react-intl";
-import { ChevronRight, CircleAlert, Server } from "lucide-react";
+import { ChevronRight, Server } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { TagInput } from "@/components/ui/tag-input";
@@ -15,6 +15,7 @@ import { MAX_TAGS } from "@/utils/tags";
 import type { CreateServerDetails } from "@/components/gateways/types";
 import type { Visibility } from "@/types/server";
 import { VisibilityInfoPopover } from "@/components/common/VisibilityInfoPopover";
+import { STATUS_ICON } from "@/lib/status";
 
 const visibilityOptions: Array<{
   value: Visibility;
@@ -111,7 +112,7 @@ export function CreateServerForm({
           role="alert"
           aria-live="assertive"
         >
-          <CircleAlert className="mt-0.5 size-4 shrink-0" aria-hidden="true" />
+          <STATUS_ICON.error className="mt-0.5 size-4 shrink-0" aria-hidden="true" />
           <p>{displayedSubmitError}</p>
         </div>
       )}
diff --git a/src/components/gateways/SourceSelection.tsx b/src/components/gateways/SourceSelection.tsx
index 1709b9a..f66ed30 100644
--- a/src/components/gateways/SourceSelection.tsx
+++ b/src/components/gateways/SourceSelection.tsx
@@ -71,13 +71,13 @@ function getStatusConfig(status: ServerStatus) {
       return {
         Icon: Activity,
         labelId: "gateways.source.status.active",
-        className: "text-emerald-400",
+        className: "text-success",
       };
     case "warning":
       return {
         Icon: TriangleAlert,
         labelId: "gateways.source.status.warning",
-        className: "text-amber-400",
+        className: "text-warning",
       };
     case "offline":
       return {
diff --git a/src/components/mcp-servers/AdvancedSettings.tsx b/src/components/mcp-servers/AdvancedSettings.tsx
index dc544f5..597c205 100644
--- a/src/components/mcp-servers/AdvancedSettings.tsx
+++ b/src/components/mcp-servers/AdvancedSettings.tsx
@@ -307,7 +307,7 @@ export function AdvancedSettings({
         </div>
         {oneTimeAuth && (
           <div className="mt-3 flex items-start gap-3 rounded-md bg-neutral-50 p-3 dark:bg-neutral-800">
-            <TriangleAlert className="text-yellow-300 mt-0.5 h-4 w-4 shrink-0" />
+            <TriangleAlert className="text-warning mt-0.5 h-4 w-4 shrink-0" />
             <p className="text-sm text-neutral-600 dark:text-neutral-400">
               {intl.formatMessage({ id: "mcpServer.advanced.oneTimeAuthWarning" })}
             </p>
diff --git a/src/components/mcp-servers/MCPServerForm.tsx b/src/components/mcp-servers/MCPServerForm.tsx
index c8e2b7a..6233aff 100644
--- a/src/components/mcp-servers/MCPServerForm.tsx
+++ b/src/components/mcp-servers/MCPServerForm.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useState, type ReactNode } from "react";
 import { useIntl } from "react-intl";
-import { ChevronDown, CircleAlert } from "lucide-react";
+import { ChevronDown } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { InlineNotification } from "@/components/ui/inline-notification";
 import { Input } from "@/components/ui/input";
@@ -10,6 +10,7 @@ import { AdvancedSettings } from "@/components/mcp-servers/AdvancedSettings";
 import { ExposeComponentsForm } from "@/components/gateways/ExposeComponentsForm";
 import { useRouter } from "@/router";
 import { useMCPServerForm, type TransportType } from "@/hooks/useMCPServerForm";
+import { STATUS_ICON } from "@/lib/status";
 
 interface MCPServerFormProps {
   isOpen: boolean;
@@ -192,8 +193,8 @@ export function MCPServerForm({ isOpen, onToggle, serverId, onSuccess }: MCPServ
           </div>
 
           {fetchError && serverId && (
-            <div className="rounded-md border border-red-200 bg-red-50 p-3 dark:border-red-900/50 dark:bg-red-950/50">
-              <p className="text-sm text-red-600 dark:text-red-400">
+            <div className="rounded-md border border-destructive/30 bg-destructive/10 p-3">
+              <p className="text-sm text-destructive">
                 {intl.formatMessage({ id: "mcpServer.form.fetchError" }, { error: fetchError })}
               </p>
             </div>
@@ -240,7 +241,7 @@ export function MCPServerForm({ isOpen, onToggle, serverId, onSuccess }: MCPServ
                 className="inline-flex items-center gap-0.5 text-sm font-medium text-neutral-900 dark:text-neutral-100"
               >
                 {intl.formatMessage({ id: "mcpServer.form.nameLabel" })}
-                <span className="text-red-500">*</span>
+                <span className="text-destructive">*</span>
                 <span className="sr-only">
                   {intl.formatMessage({ id: "mcpServer.form.required" })}
                 </span>
@@ -255,7 +256,7 @@ export function MCPServerForm({ isOpen, onToggle, serverId, onSuccess }: MCPServ
                 aria-describedby={errors.name ? "name-error" : undefined}
               />
               {errors.name && (
-                <p id="name-error" className="text-sm text-red-500">
+                <p id="name-error" className="text-sm text-destructive">
                   {errors.name}
                 </p>
               )}
@@ -267,11 +268,11 @@ export function MCPServerForm({ isOpen, onToggle, serverId, onSuccess }: MCPServ
                 className="inline-flex items-center gap-0.5 text-sm font-medium text-neutral-900 dark:text-neutral-100"
               >
                 {intl.formatMessage({ id: "mcpServer.form.urlLabel" })}
-                <span className="text-red-500">*</span>
+                <span className="text-destructive">*</span>
                 <span className="sr-only">
                   {intl.formatMessage({ id: "mcpServer.form.required" })}
                 </span>
-                <CircleAlert className="h-4 w-4 text-neutral-400 dark:text-neutral-500" />
+                <STATUS_ICON.info className="h-4 w-4 text-neutral-400 dark:text-neutral-500" />
               </label>
               <Input
                 id="server-url"
@@ -283,7 +284,7 @@ export function MCPServerForm({ isOpen, onToggle, serverId, onSuccess }: MCPServ
                 aria-describedby={errors.url ? "url-error" : undefined}
               />
               {errors.url && (
-                <p id="url-error" className="text-sm text-red-500">
+                <p id="url-error" className="text-sm text-destructive">
                   {errors.url}
                 </p>
               )}
@@ -303,7 +304,7 @@ export function MCPServerForm({ isOpen, onToggle, serverId, onSuccess }: MCPServ
                 aria-describedby={errors.description ? "description-error" : undefined}
               />
               {errors.description && (
-                <p id="description-error" className="text-sm text-red-500">
+                <p id="description-error" className="text-sm text-destructive">
                   {errors.description}
                 </p>
               )}
@@ -380,8 +381,8 @@ export function MCPServerForm({ isOpen, onToggle, serverId, onSuccess }: MCPServ
               )}
 
               {errors.submit && (
-                <div className="rounded-md border border-red-200 bg-red-50 p-3 dark:border-red-900/50 dark:bg-red-950/50">
-                  <p className="text-sm text-red-600 dark:text-red-400">{errors.submit}</p>
+                <div className="rounded-md border border-destructive/30 bg-destructive/10 p-3">
+                  <p className="text-sm text-destructive">{errors.submit}</p>
                 </div>
               )}
 
diff --git a/src/components/mcp-servers/QueryParameterAuth.tsx b/src/components/mcp-servers/QueryParameterAuth.tsx
index 0a4753a..c17cdfe 100644
--- a/src/components/mcp-servers/QueryParameterAuth.tsx
+++ b/src/components/mcp-servers/QueryParameterAuth.tsx
@@ -1,7 +1,7 @@
-import { AlertTriangle } from "lucide-react";
 import { useIntl } from "react-intl";
 import type { ReactNode } from "react";
 import { Input } from "@/components/ui/input";
+import { STATUS_ICON } from "@/lib/status";
 
 interface QueryParameterAuthProps {
   parameterName: string;
@@ -22,7 +22,7 @@ export function QueryParameterAuth({
     <div className="space-y-4">
       {/* Security Warning */}
       <div className="flex items-center gap-3 rounded-md bg-neutral-50 px-3 py-5 dark:bg-neutral-800">
-        <AlertTriangle className="h-5 w-5 shrink-0 text-yellow-600 dark:text-yellow-500" />
+        <STATUS_ICON.warning className="h-5 w-5 shrink-0 text-warning" />
         <p className="text-sm text-neutral-700 dark:text-neutral-300">
           {intl.formatMessage(
             { id: "mcpServer.auth.query.warning" },
@@ -40,7 +40,7 @@ export function QueryParameterAuth({
           className="inline-flex items-center gap-0.5 text-sm font-medium text-neutral-900 dark:text-neutral-100"
         >
           {intl.formatMessage({ id: "mcpServer.auth.query.nameLabel" })}
-          <span className="text-red-500">*</span>
+          <span className="text-destructive">*</span>
           <span className="sr-only">{intl.formatMessage({ id: "mcpServer.form.required" })}</span>
         </label>
         <Input
@@ -60,7 +60,7 @@ export function QueryParameterAuth({
           className="inline-flex items-center gap-0.5 text-sm font-medium text-neutral-900 dark:text-neutral-100"
         >
           {intl.formatMessage({ id: "mcpServer.auth.query.apiKeyLabel" })}
-          <span className="text-red-500">*</span>
+          <span className="text-destructive">*</span>
           <span className="sr-only">{intl.formatMessage({ id: "mcpServer.form.required" })}</span>
         </label>
         <Input
diff --git a/src/components/prompts/PromptForm.tsx b/src/components/prompts/PromptForm.tsx
index 0e0afda..4a37846 100644
--- a/src/components/prompts/PromptForm.tsx
+++ b/src/components/prompts/PromptForm.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useRef } from "react";
 import { useIntl } from "react-intl";
-import { CircleAlert, Info, MessageSquareCode } from "lucide-react";
+import { Info, MessageSquareCode } from "lucide-react";
+import { STATUS_ICON } from "@/lib/status";
 import { BackButton } from "@/components/ui/back-button";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -116,7 +117,7 @@ export function PromptForm({ isOpen, onToggle, onSuccess, prompt }: PromptFormPr
                 role="alert"
                 aria-live="assertive"
               >
-                <CircleAlert className="mt-0.5 size-4 shrink-0" aria-hidden="true" />
+                <STATUS_ICON.error className="mt-0.5 size-4 shrink-0" aria-hidden="true" />
                 <p>{form.errors.submit}</p>
               </div>
             )}
diff --git a/src/components/prompts/PromptPreviewResult.tsx b/src/components/prompts/PromptPreviewResult.tsx
index aa89e7f..6569739 100644
--- a/src/components/prompts/PromptPreviewResult.tsx
+++ b/src/components/prompts/PromptPreviewResult.tsx
@@ -1,8 +1,8 @@
 import { useIntl } from "react-intl";
-import { AlertCircle, CheckCircle2 } from "lucide-react";
 
 import { CodeBlock } from "@/components/ui/code-block";
 import { cn } from "@/lib/utils";
+import { STATUS_ICON } from "@/lib/status";
 import type { PromptPreviewState } from "@/hooks/usePromptPreview";
 
 export interface PromptPreviewResultProps {
@@ -39,9 +39,9 @@ export function PromptPreviewResult({ preview }: PromptPreviewResultProps) {
         className="flex flex-wrap items-center gap-x-2 gap-y-1 text-[13px]"
       >
         {succeeded ? (
-          <CheckCircle2 className="size-4 text-emerald-500" />
+          <STATUS_ICON.success className="size-4 text-success" />
         ) : (
-          <AlertCircle className="size-4 text-destructive" />
+          <STATUS_ICON.error className="size-4 text-destructive" />
         )}
         <span className={cn("font-medium", succeeded ? "text-foreground" : "text-destructive")}>
           {statusLabel}
diff --git a/src/components/server-catalog/CatalogResults.tsx b/src/components/server-catalog/CatalogResults.tsx
index 1dbe695..dfb1630 100644
--- a/src/components/server-catalog/CatalogResults.tsx
+++ b/src/components/server-catalog/CatalogResults.tsx
@@ -1,7 +1,8 @@
 import { useEffect, useId, useRef, useState } from "react";
 import type { ReactNode } from "react";
-import { CircleCheck, EllipsisVertical, FileText, Plus } from "lucide-react";
+import { EllipsisVertical, FileText, Plus } from "lucide-react";
 import { useIntl } from "react-intl";
+import { STATUS_ICON } from "@/lib/status";
 
 import { EmptyStatePlaceholder } from "@/components/dashboard/EmptyStatePlaceholder";
 import { ServerIcon } from "@/components/servers/ServerIcon";
@@ -118,7 +119,7 @@ function CatalogCard({
               {server.is_registered ? (
                 <>
                   <span className="inline-flex items-center gap-1.5 text-sm font-medium text-foreground">
-                    <CircleCheck className="size-4 text-green-500" aria-hidden="true" />
+                    <STATUS_ICON.success className="size-4 text-success" aria-hidden="true" />
                     {intl.formatMessage({ id: "mcpServer.catalog.connected" })}
                   </span>
                   <DropdownMenu>
diff --git a/src/components/servers/ServerStatusBadge.tsx b/src/components/servers/ServerStatusBadge.tsx
index 19a23e9..d4c4394 100644
--- a/src/components/servers/ServerStatusBadge.tsx
+++ b/src/components/servers/ServerStatusBadge.tsx
@@ -1,6 +1,7 @@
 import { memo } from "react";
-import { CheckCircle2, XCircle, AlertCircle, FileText } from "lucide-react";
+import { FileText } from "lucide-react";
 import { Badge } from "../ui/badge";
+import { STATUS_ICON } from "@/lib/status";
 import type { MCPServer, ServerStatus } from "../../types/server";
 
 // Warning threshold: 5 minutes in milliseconds
@@ -41,17 +42,17 @@ const STATUS_CONFIG: Record<ServerStatus, StatusConfig> = {
   },
   active: {
     label: "Active",
-    icon: CheckCircle2,
+    icon: STATUS_ICON.success,
     variant: BadgeVariant.Success,
   },
   offline: {
     label: "Offline",
-    icon: XCircle,
+    icon: STATUS_ICON.error,
     variant: BadgeVariant.Destructive,
   },
   warning: {
     label: "Warning",
-    icon: AlertCircle,
+    icon: STATUS_ICON.warning,
     variant: BadgeVariant.Warning,
   },
 };
diff --git a/src/components/servers/ServersTable.tsx b/src/components/servers/ServersTable.tsx
index 4cf90f0..4cb80cf 100644
--- a/src/components/servers/ServersTable.tsx
+++ b/src/components/servers/ServersTable.tsx
@@ -67,13 +67,13 @@ function getStatusConfig(status: ServerStatus) {
       return {
         labelId: "mcpServer.status.active",
         Icon: Activity,
-        className: "text-emerald-600 dark:text-emerald-400",
+        className: "text-success",
       };
     case "warning":
       return {
         labelId: "mcpServer.status.warning",
         Icon: TriangleAlert,
-        className: "text-amber-600 dark:text-amber-400",
+        className: "text-warning",
       };
     case "offline":
       return {
diff --git a/src/components/servers/TestConnectionPanel.tsx b/src/components/servers/TestConnectionPanel.tsx
index 56cfa8a..995a0e5 100644
--- a/src/components/servers/TestConnectionPanel.tsx
+++ b/src/components/servers/TestConnectionPanel.tsx
@@ -1,7 +1,8 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { z } from "zod";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import { CircleCheck, CircleAlert, Info, Loader2 } from "lucide-react";
+import { Info, Loader2 } from "lucide-react";
+import { STATUS_ICON } from "@/lib/status";
 import { useIntl } from "react-intl";
 import { Button } from "../ui/button";
 import { CopyButton } from "../ui/copy-button";
@@ -254,7 +255,7 @@ export function TestConnectionPanel({ serverUrl }: TestConnectionPanelProps) {
               className="bg-transparent dark:bg-transparent"
             />
             {errors.url && (
-              <p id="url-error" className="text-sm text-red-500">
+              <p id="url-error" className="text-sm text-destructive">
                 {errors.url}
               </p>
             )}
@@ -308,7 +309,7 @@ export function TestConnectionPanel({ serverUrl }: TestConnectionPanelProps) {
               className="bg-transparent dark:bg-transparent"
             />
             {errors.path && (
-              <p id="path-error" className="text-sm text-red-500">
+              <p id="path-error" className="text-sm text-destructive">
                 {errors.path}
               </p>
             )}
@@ -353,7 +354,7 @@ export function TestConnectionPanel({ serverUrl }: TestConnectionPanelProps) {
               aria-describedby={errors.headers ? "headers-error" : undefined}
             />
             {errors.headers && (
-              <p id="headers-error" className="text-sm text-red-500">
+              <p id="headers-error" className="text-sm text-destructive">
                 {errors.headers}
               </p>
             )}
@@ -385,7 +386,7 @@ export function TestConnectionPanel({ serverUrl }: TestConnectionPanelProps) {
                 aria-describedby={errors.body ? "body-error" : undefined}
               />
               {errors.body && (
-                <p id="body-error" className="text-sm text-red-500">
+                <p id="body-error" className="text-sm text-destructive">
                   {errors.body}
                 </p>
               )}
@@ -450,9 +451,9 @@ export function TestConnectionPanel({ serverUrl }: TestConnectionPanelProps) {
 
                 <div className="flex items-start gap-2 pr-8">
                   {status === "success" ? (
-                    <CircleCheck className="mt-0.5 size-4 shrink-0 text-green-500" />
+                    <STATUS_ICON.success className="mt-0.5 size-4 shrink-0 text-success" />
                   ) : (
-                    <CircleAlert className="mt-0.5 size-4 shrink-0 text-destructive" />
+                    <STATUS_ICON.error className="mt-0.5 size-4 shrink-0 text-destructive" />
                   )}
                   <span className="text-sm font-medium break-words text-foreground">
                     {headline}
diff --git a/src/components/ui/badge.test.tsx b/src/components/ui/badge.test.tsx
index 773602b..003fd51 100644
--- a/src/components/ui/badge.test.tsx
+++ b/src/components/ui/badge.test.tsx
@@ -43,8 +43,8 @@ describe("Badge", () => {
         secondary: "bg-secondary",
         destructive: "bg-destructive",
         outline: "text-foreground",
-        success: "bg-green-100",
-        warning: "bg-yellow-100",
+        success: "bg-success/15",
+        warning: "bg-warning/15",
         draft: "bg-gray-100",
       };
 
@@ -70,7 +70,7 @@ describe("Badge", () => {
 
       // success
       rerender(<Badge variant="success">Toggle</Badge>);
-      expect(getByText("Toggle").className).toContain("bg-green-100");
+      expect(getByText("Toggle").className).toContain("bg-success/15");
 
       // destructive
       rerender(<Badge variant="destructive">Toggle</Badge>);
@@ -177,7 +177,7 @@ describe("Badge", () => {
       expect(getByText("Keep")).toHaveClass("added");
 
       rerender(<Badge variant="warning">Keep</Badge>);
-      expect(getByText("Keep")).toHaveClass("bg-yellow-100");
+      expect(getByText("Keep")).toHaveClass("bg-warning/15");
       expect(getByText("Keep")).toHaveClass("inline-flex");
     });
   });
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
index 5526ce0..64dd2e8 100644
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@@ -14,10 +14,8 @@ const badgeVariants = cva(
         destructive:
           "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
         outline: "text-foreground",
-        success:
-          "border-transparent bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300",
-        warning:
-          "border-transparent bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300",
+        success: "border-transparent bg-success/15 text-success",
+        warning: "border-transparent bg-warning/15 text-warning",
         draft: "border-transparent bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300",
       },
     },
diff --git a/src/components/ui/inline-notification.test.tsx b/src/components/ui/inline-notification.test.tsx
index d6645f2..aeea202 100644
--- a/src/components/ui/inline-notification.test.tsx
+++ b/src/components/ui/inline-notification.test.tsx
@@ -26,9 +26,9 @@ describe("InlineNotification", () => {
       expect(screen.getByText("Operation succeeded")).toBeInTheDocument();
     });
 
-    it("applies green text class to the message", () => {
+    it("applies the success tone class to the message", () => {
       render(<InlineNotification type="success" message="Done" />);
-      expect(screen.getByText("Done")).toHaveClass("text-green-500");
+      expect(screen.getByText("Done")).toHaveClass("text-success");
     });
   });
 
@@ -43,9 +43,9 @@ describe("InlineNotification", () => {
       expect(screen.getByText("A server with this name already exists")).toBeInTheDocument();
     });
 
-    it("applies red text class to the message", () => {
+    it("applies the destructive tone class to the message", () => {
       render(<InlineNotification type="error" message="Failed" />);
-      expect(screen.getByText("Failed")).toHaveClass("text-red-600");
+      expect(screen.getByText("Failed")).toHaveClass("text-destructive");
     });
   });
 
diff --git a/src/components/ui/inline-notification.tsx b/src/components/ui/inline-notification.tsx
index 97b19dc..43e0a91 100644
--- a/src/components/ui/inline-notification.tsx
+++ b/src/components/ui/inline-notification.tsx
@@ -1,6 +1,7 @@
 import { forwardRef } from "react";
-import { CircleCheck, CircleAlert, X } from "lucide-react";
+import { X } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { STATUS_ICON, STATUS_TONE_CLASS } from "@/lib/status";
 
 interface InlineNotificationProps {
   type: "success" | "error";
@@ -16,6 +17,8 @@ export const InlineNotification = forwardRef<HTMLDivElement, InlineNotificationP
     ref,
   ) {
     const isSuccess = type === "success";
+    const Icon = STATUS_ICON[type];
+    const toneClass = STATUS_TONE_CLASS[type];
 
     return (
       <div
@@ -25,16 +28,8 @@ export const InlineNotification = forwardRef<HTMLDivElement, InlineNotificationP
         className="flex items-center justify-between rounded-md border border-neutral-200 bg-background p-3 dark:border-neutral-800"
       >
         <div className="flex items-center gap-2">
-          {isSuccess ? (
-            <CircleCheck className="h-4 w-4 shrink-0 text-green-500" aria-hidden="true" />
-          ) : (
-            <CircleAlert className="h-4 w-4 shrink-0 text-red-500" aria-hidden="true" />
-          )}
-          <p
-            className={`text-sm ${isSuccess ? "text-green-500" : "text-red-600 dark:text-red-400"}`}
-          >
-            {message}
-          </p>
+          <Icon className={`h-4 w-4 shrink-0 ${toneClass}`} aria-hidden="true" />
+          <p className={`text-sm ${toneClass}`}>{message}</p>
         </div>
         {onDismiss && (
           <Button
diff --git a/src/index.css b/src/index.css
index d9e6d6a..2178028 100644
--- a/src/index.css
+++ b/src/index.css
@@ -56,6 +56,8 @@
   --color-chart-2: var(--chart-2);
   --color-chart-1: var(--chart-1);
   --color-destructive: var(--destructive);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
   --color-popover-foreground: var(--popover-foreground);
   --color-popover: var(--popover);
   --color-card-foreground: var(--card-foreground);
@@ -128,6 +130,10 @@
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.145 0 0);
   --destructive: oklch(0.577 0.245 27.325);
+  /* Semantic status colors — success/warning icons and badges read these
+     instead of a raw Tailwind shade, so every call site stays in sync. */
+  --success: var(--color-emerald-600);
+  --warning: var(--color-amber-600);
   --tool-icon-bg: var(--color-fuchsia-400);
   --prompt-icon-bg: #6fff9f;
   /* Brand cyan. Like the two above it this is a chip *background* carrying a
@@ -174,6 +180,8 @@
   --accent: oklch(0.269 0 0);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
+  --success: var(--color-emerald-400);
+  --warning: var(--color-amber-400);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.556 0 0);
diff --git a/src/lib/status.test.ts b/src/lib/status.test.ts
new file mode 100644
index 0000000..9b864f3
--- /dev/null
+++ b/src/lib/status.test.ts
@@ -0,0 +1,39 @@
+import { describe, expect, it } from "vitest";
+import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon } from "lucide-react";
+import { STATUS_ICON, STATUS_TONE_CLASS, type StatusSeverity } from "./status";
+
+const SEVERITIES: StatusSeverity[] = ["success", "info", "warning", "error"];
+
+describe("STATUS_ICON", () => {
+  it("maps every severity to the canonical sonner glyph", () => {
+    expect(STATUS_ICON.success).toBe(CircleCheckIcon);
+    expect(STATUS_ICON.info).toBe(InfoIcon);
+    expect(STATUS_ICON.warning).toBe(TriangleAlertIcon);
+    expect(STATUS_ICON.error).toBe(OctagonXIcon);
+  });
+
+  it("gives warning and error distinct icons", () => {
+    expect(STATUS_ICON.warning).not.toBe(STATUS_ICON.error);
+  });
+
+  it("has an entry for every severity", () => {
+    for (const severity of SEVERITIES) {
+      expect(STATUS_ICON[severity]).toBeDefined();
+    }
+  });
+});
+
+describe("STATUS_TONE_CLASS", () => {
+  it("has an entry for every severity", () => {
+    for (const severity of SEVERITIES) {
+      expect(typeof STATUS_TONE_CLASS[severity]).toBe("string");
+      expect(STATUS_TONE_CLASS[severity].length).toBeGreaterThan(0);
+    }
+  });
+
+  it("routes success/warning/error through the semantic status tokens", () => {
+    expect(STATUS_TONE_CLASS.success).toBe("text-success");
+    expect(STATUS_TONE_CLASS.warning).toBe("text-warning");
+    expect(STATUS_TONE_CLASS.error).toBe("text-destructive");
+  });
+});
diff --git a/src/lib/status.ts b/src/lib/status.ts
new file mode 100644
index 0000000..212c2ba
--- /dev/null
+++ b/src/lib/status.ts
@@ -0,0 +1,29 @@
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  TriangleAlertIcon,
+  OctagonXIcon,
+  type LucideIcon,
+} from "lucide-react";
+
+/**
+ * Canonical status severities — the four-icon set defined in ui/sonner.tsx.
+ * Consume STATUS_ICON / STATUS_TONE_CLASS instead of picking a status icon or
+ * color ad hoc, so success/info/warning/error stay a single glyph and color
+ * app-wide (see issue #62).
+ */
+export type StatusSeverity = "success" | "info" | "warning" | "error";
+
+export const STATUS_ICON: Record<StatusSeverity, LucideIcon> = {
+  success: CircleCheckIcon,
+  info: InfoIcon,
+  warning: TriangleAlertIcon,
+  error: OctagonXIcon,
+};
+
+export const STATUS_TONE_CLASS: Record<StatusSeverity, string> = {
+  success: "text-success",
+  info: "text-muted-foreground",
+  warning: "text-warning",
+  error: "text-destructive",
+};
diff --git a/src/pages/CreateServer.tsx b/src/pages/CreateServer.tsx
index ba9b04c..f1ca7b6 100644
--- a/src/pages/CreateServer.tsx
+++ b/src/pages/CreateServer.tsx
@@ -133,13 +133,13 @@ function getStatusConfig(status: ServerStatus) {
       return {
         Icon: Activity,
         labelId: "gateways.source.status.active",
-        className: "text-emerald-400",
+        className: "text-success",
       };
     case "warning":
       return {
         Icon: TriangleAlert,
         labelId: "gateways.source.status.warning",
-        className: "text-amber-400",
+        className: "text-warning",
       };
     case "offline":
       return {