refactor(ui): migrate to design tokens + re-sync components to ui-registry v2.2.0

frontend/src/components/ai-elements/message.tsx

@@ -106,7 +106,7 @@ export const MessageTimestamp = ({
       className={cn(
         "mt-2 text-xs",
         from === "user"
-          ? "text-blue-100 dark:text-blue-200"
+          ? "text-informative"
           : "text-slate-500 dark:text-slate-400",
         className
       )}

frontend/src/components/ai-elements/tool.tsx

@@ -173,14 +173,14 @@ export const ToolHeader = ({
           </Text>
           {getStatusBadge(state)}
           {durationMs !== undefined && (state === 'output-available' || state === 'output-error') && (
-            <Text as="span" className="text-muted-foreground/50 text-[0.75rem]">
+            <Text as="span" className="text-muted-foreground/50 text-xs">
               {formatDuration(durationMs)}
             </Text>
           )}
         </div>
         <div className="flex items-center gap-2">
           {toolCallId && (
-            <Text as="span" className="text-muted-foreground/50 text-[0.75rem] font-mono">
+            <Text as="span" className="text-muted-foreground/50 text-xs font-mono">
               {toolCallId}
             </Text>
           )}

frontend/src/components/debug-helper/debug-dialog.tsx

@@ -372,9 +372,7 @@ function StorageEntryRow({ storageKey, value }: { storageKey: string; value: str
             </Badge>
           </div>
           {!expanded && (
-            <div className="min-w-0 truncate font-mono text-[11px] text-muted-foreground">
-              {formatted.split('\n')[0]}
-            </div>
+            <div className="min-w-0 truncate font-mono text-muted-foreground text-xs">{formatted.split('\n')[0]}</div>
           )}
           <CollapsibleContent>
             <SimpleCodeBlock
@@ -630,7 +628,7 @@ function FeatureFlagsTab() {
                       </Badge>
                     )}
                   </div>
-                  <Text className="text-[11px] text-muted-foreground">
+                  <Text className="text-muted-foreground text-xs">
                     default: <InlineCode>{String(defaultValue)}</InlineCode> · effective:{' '}
                     <InlineCode>{String(effectiveValue)}</InlineCode>
                   </Text>

frontend/src/components/misc/connection-error-ui.tsx

@@ -53,8 +53,8 @@ export const ConnectionErrorUI: FC<ConnectionErrorUIProps> = ({ error, onRetry }
     <div className="flex min-h-screen items-center justify-center bg-neutral-100">
       <div className="mx-4 w-full max-w-md rounded-lg bg-white p-8 shadow-sm">
         <div className="flex flex-col items-center text-center">
-          <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
-            <AlertIcon className="h-6 w-6 text-red-600" />
+          <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-background-error-subtle">
+            <AlertIcon className="h-6 w-6 text-error" />
           </div>
           <Heading className="mb-2 text-neutral-900" level={3}>
             {title}

frontend/src/components/pages/agents/details/a2a/chat/components/message-blocks/connection-status-block.tsx

@@ -50,7 +50,7 @@ export const ConnectionStatusBlock = ({ status, attempt, maxAttempts, timestamp
           <LoaderCircleIcon className="size-3.5 animate-spin" />
         </AlertTitle>
         <AlertDescription>
-          <Text className="text-blue-600 text-xs" variant="body">
+          <Text className="text-informative text-xs" variant="body">
             The agent task is still running. Trying to re-establish the event stream.
           </Text>
         </AlertDescription>

frontend/src/components/pages/agents/details/ai-agent-card-tab.tsx

@@ -472,20 +472,20 @@ export const AIAgentCardTab = () => {
                               <div className="grid gap-4 md:grid-cols-2">
                                 <div className="space-y-2">
                                   <Label htmlFor={`skill-id-${index}`}>
-                                    Skill ID <span className="text-red-500">*</span>
+                                    Skill ID <span className="text-error">*</span>
                                   </Label>
                                   <SkillField field="id" index={index} onUpdate={updateSkill} skill={skill} />
                                 </div>
                                 <div className="space-y-2">
                                   <Label htmlFor={`skill-name-${index}`}>
-                                    Skill Name <span className="text-red-500">*</span>
+                                    Skill Name <span className="text-error">*</span>
                                   </Label>
                                   <SkillField field="name" index={index} onUpdate={updateSkill} skill={skill} />
                                 </div>
                               </div>
                               <div className="space-y-2">
                                 <Label htmlFor={`skill-description-${index}`}>
-                                  Description <span className="text-red-500">*</span>
+                                  Description <span className="text-error">*</span>
                                 </Label>
                                 <SkillField field="description" index={index} onUpdate={updateSkill} skill={skill} />
                               </div>
@@ -611,14 +611,12 @@ export const AIAgentCardTab = () => {
               )}
             </div>
 
-            <div className="rounded-md border border-blue-200 bg-blue-50 p-3 dark:border-blue-800 dark:bg-blue-950/30">
+            <div className="rounded-md border border-outline-informative bg-background-informative-subtle p-3">
               <div className="flex gap-2">
-                <AlertCircle className="h-4 w-4 flex-shrink-0 text-blue-600 dark:text-blue-400" />
+                <AlertCircle className="h-4 w-4 flex-shrink-0 text-informative" />
                 <div className="flex-1 space-y-1">
-                  <Text className="font-semibold text-blue-900 text-sm dark:text-blue-100">
-                    Authentication Required
-                  </Text>
-                  <Text className="text-blue-800 text-sm dark:text-blue-200">
+                  <Text className="font-semibold text-informative text-sm">Authentication Required</Text>
+                  <Text className="text-informative text-sm">
                     This agent requires a Redpanda Cloud M2M token for authentication.{' '}
                     <a className="underline" href="/organization-iam?tab=service-accounts">
                       Create an M2M token

frontend/src/components/pages/agents/details/ai-agent-details-page.tsx

@@ -69,7 +69,7 @@ export const AIAgentDetailsPage = () => {
   if (error) {
     return (
       <div className="flex items-center justify-center py-12">
-        <div className="flex items-center gap-2 text-red-600">
+        <div className="flex items-center gap-2 text-error">
           <AlertCircle className="h-4 w-4" />
           Error loading AI agent: {error.message}
         </div>

frontend/src/components/pages/agents/details/ai-agent-inspector-tab.tsx

@@ -191,8 +191,8 @@ export const AIAgentInspectorTab = () => {
 
                 if (cardError) {
                   return (
-                    <div className="rounded-md border border-red-200 bg-red-50 p-4 dark:border-red-800 dark:bg-red-950/30">
-                      <Text className="text-red-800 dark:text-red-200">{cardError}</Text>
+                    <div className="rounded-md border border-outline-error bg-background-error-subtle p-4">
+                      <Text className="text-error">{cardError}</Text>
                     </div>
                   );
                 }

frontend/src/components/pages/agents/details/conversation-detail-page.tsx

@@ -160,7 +160,7 @@ const ToolCallItem = ({
       {isError ? (
         <XCircle className="size-3.5 shrink-0 text-destructive" />
       ) : (
-        <CheckCircle className={`size-3.5 shrink-0 ${isSuccess ? 'text-emerald-600' : 'text-muted-foreground'}`} />
+        <CheckCircle className={`size-3.5 shrink-0 ${isSuccess ? 'text-success' : 'text-muted-foreground'}`} />
       )}
       <span className="min-w-0 flex-1 truncate font-mono text-xs">{tool.name}</span>
       <div className="flex w-28 items-center gap-2">
@@ -448,9 +448,9 @@ const ChatView = ({ systemPrompt, turns }: { systemPrompt: string; turns: Transc
                       <span
                         className={`inline-flex items-center gap-1 rounded px-1.5 py-0.5 font-mono text-xs ${
                           tool.status === TranscriptToolCallStatus.COMPLETED
-                            ? 'bg-emerald-500/10 text-emerald-700'
+                            ? 'bg-background-success-strong/10 text-success'
                             : tool.status === TranscriptToolCallStatus.ERROR
-                              ? 'bg-red-500/10 text-red-700'
+                              ? 'bg-background-error-strong/10 text-error'
                               : 'bg-muted text-muted-foreground'
                         }`}
                         key={tool.toolCallId || `tool-${toolIndex}`}

frontend/src/components/pages/agents/details/conversation-status-badge.tsx

@@ -15,21 +15,24 @@ import { TranscriptStatus } from 'protogen/redpanda/api/dataplane/v1alpha3/trans
 export const ConversationStatusBadge = ({ status }: { status: TranscriptStatus }) => {
   if (status === TranscriptStatus.COMPLETED) {
     return (
-      <Badge className="border-emerald-500/30 bg-emerald-500/10 text-emerald-600" variant="outline">
+      <Badge className="border-outline-success/30 bg-background-success-strong/10 text-success" variant="outline">
         Completed
       </Badge>
     );
   }
   if (status === TranscriptStatus.ERROR) {
     return (
-      <Badge className="border-red-500/30 bg-red-500/10 text-red-600" variant="outline">
+      <Badge className="border-outline-error/30 bg-background-error-strong/10 text-error" variant="outline">
         Error
       </Badge>
     );
   }
   if (status === TranscriptStatus.RUNNING) {
     return (
-      <Badge className="border-blue-500/30 bg-blue-500/10 text-blue-600" variant="outline">
+      <Badge
+        className="border-outline-informative/30 bg-background-informative-strong/10 text-informative"
+        variant="outline"
+      >
         Running
       </Badge>
     );

frontend/src/components/pages/agents/list/ai-agent-list-page.tsx

@@ -81,18 +81,18 @@ const StatusIcon = ({ state }: { state: AIAgent_State }) => {
     [AIAgent_State.RUNNING]: {
       text: 'Running',
       icon: Check,
-      iconColor: 'text-green-600',
+      iconColor: 'text-success',
     },
     [AIAgent_State.STARTING]: {
       text: 'Starting',
       icon: Loader2,
-      iconColor: 'text-blue-600',
+      iconColor: 'text-informative',
       animate: true,
     },
     [AIAgent_State.STOPPING]: {
       text: 'Stopping',
       icon: Loader2,
-      iconColor: 'text-orange-600',
+      iconColor: 'text-warning',
       animate: true,
     },
     [AIAgent_State.STOPPED]: {
@@ -103,7 +103,7 @@ const StatusIcon = ({ state }: { state: AIAgent_State }) => {
     [AIAgent_State.ERROR]: {
       text: 'Error',
       icon: AlertCircle,
-      iconColor: 'text-red-600',
+      iconColor: 'text-error',
     },
     [AIAgent_State.UNSPECIFIED]: {
       text: 'Unknown',
@@ -113,7 +113,7 @@ const StatusIcon = ({ state }: { state: AIAgent_State }) => {
   }[state] || {
     text: 'Unknown',
     icon: AlertCircle,
-    iconColor: 'text-red-600',
+    iconColor: 'text-error',
   };
 
   const IconComponent = statusProps.icon;
@@ -449,7 +449,7 @@ const AIAgentsListPageContent = ({
                 return (
                   <TableRow>
                     <TableCell className="h-24 text-center" colSpan={columns.length}>
-                      <div className="flex items-center justify-center gap-2 text-red-600">
+                      <div className="flex items-center justify-center gap-2 text-error">
                         <AlertCircle className="h-4 w-4" />
                         Error loading AI agents: {error.message}
                       </div>

frontend/src/components/pages/knowledgebase/details/knowledge-base-details-page.tsx

@@ -394,7 +394,7 @@ export const KnowledgeBaseDetailsPage = () => {
     return (
       <div className="flex h-full items-center justify-center">
         <div className="max-w-md text-center">
-          <Text className="text-red-600">
+          <Text className="text-error">
             {knowledgeBaseError
               ? `Failed to load knowledge base: ${String(knowledgeBaseError)}`
               : 'Knowledge base not found'}

frontend/src/components/pages/knowledgebase/details/knowledge-base-document-details-page.tsx

@@ -44,7 +44,7 @@ export const KnowledgeBaseDocumentDetailsPage = () => {
                 Topic
               </Text>
               <a
-                className="text-blue-500 hover:text-blue-600 hover:underline"
+                className="text-informative hover:text-informative hover:underline"
                 href={`/clusters/${config.clusterId}/topics/${encodeURIComponent(topic ?? '')}`}
               >
                 {topic}

frontend/src/components/pages/knowledgebase/details/knowledge-base-document-list.tsx

@@ -81,7 +81,7 @@ const createColumns = (): ColumnDef<RetrievalResultRow>[] => [
     header: ({ column }) => <DataTableColumnHeader column={column} title="Topic" />,
     cell: ({ row }) => (
       <a
-        className="text-blue-500 hover:text-blue-600 hover:underline"
+        className="text-informative hover:text-informative hover:underline"
         href={`/clusters/${config.clusterId}/topics/${encodeURIComponent(row.getValue('topic'))}`}
       >
         {row.getValue('topic')}

frontend/src/components/pages/knowledgebase/list/knowledge-base-list-page.tsx

@@ -521,7 +521,7 @@ export const KnowledgeBaseListPage = () => {
                 return (
                   <TableRow>
                     <TableCell className="h-24 text-center" colSpan={columns.length}>
-                      <div className="flex items-center justify-center gap-2 text-red-600">
+                      <div className="flex items-center justify-center gap-2 text-error">
                         <AlertCircle className="h-4 w-4" />
                         Error loading knowledge bases: {errorStr}
                       </div>

frontend/src/components/pages/mcp-servers/details/remote-mcp-connection-tab.tsx

@@ -94,12 +94,12 @@ export const RemoteMCPConnectionTab = () => {
                 <div className="w-full">
                   <DynamicCodeBlock code={mcpServerData?.mcpServer?.url || ''} lang="text" />
                 </div>
-                <div className="rounded-md border border-blue-200 bg-blue-50 p-3 dark:border-blue-800 dark:bg-blue-950/30">
+                <div className="rounded-md border border-outline-informative bg-background-informative-subtle p-3">
                   <div className="flex items-start gap-2">
-                    <AlertCircle className="mt-0.5 h-4 w-4 flex-shrink-0 text-blue-600 dark:text-blue-400" />
+                    <AlertCircle className="mt-0.5 h-4 w-4 flex-shrink-0 text-informative" />
                     <div className="space-y-2 text-sm">
-                      <Text className="font-medium text-blue-800 dark:text-blue-200">Authentication Required</Text>
-                      <Text className="text-blue-700 dark:text-blue-300">
+                      <Text className="font-medium text-informative">Authentication Required</Text>
+                      <Text className="text-informative">
                         This server requires a Redpanda Cloud M2M token for authentication.
                         <Link className="ml-1" href="/organization-iam?tab=service-accounts">
                           Create an M2M token here.

frontend/src/components/pages/mcp-servers/details/remote-mcp-details-page.tsx

@@ -67,7 +67,7 @@ export const RemoteMCPDetailsPage = () => {
   if (error) {
     return (
       <div className="flex items-center justify-center py-12">
-        <div className="flex items-center gap-2 text-red-600">
+        <div className="flex items-center gap-2 text-error">
           <AlertCircle className="h-4 w-4" />
           Error loading MCP server: {error.message}
         </div>

frontend/src/components/pages/mcp-servers/details/remote-mcp-inspector-tab.tsx

@@ -604,11 +604,11 @@ export const RemoteMCPInspectorTab = () => {
                         <div className="space-y-2">
                           {Object.entries(validationErrors).map(([field, error]) => (
                             <div
-                              className="rounded-md border border-red-200 bg-red-50 p-3 dark:border-red-800 dark:bg-red-950/20"
+                              className="rounded-md border border-outline-error bg-background-error-subtle p-3"
                               key={field}
                             >
                               <div className="flex items-start">
-                                <Text className="text-red-700 dark:text-red-400" variant="small">
+                                <Text className="text-error" variant="small">
                                   <Text as="span" className="font-medium">
                                     {field}:
                                   </Text>{' '}

frontend/src/components/pages/mcp-servers/details/remote-mcp-tool-button.tsx

@@ -40,10 +40,10 @@ export const RemoteMCPToolButton = ({
 }: RemoteMCPToolButtonProps) => {
   const getButtonClassName = () => {
     if (hasLintIssues) {
-      return 'border-red-300 bg-red-50 dark:border-red-800 dark:bg-red-950/30';
+      return 'border-outline-error bg-background-error-subtle';
     }
     if (isSelected) {
-      return 'border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-950/30';
+      return 'border-outline-informative bg-background-informative-subtle';
     }
     return 'border-border bg-card hover:bg-gray-50 dark:hover:bg-secondary';
   };
@@ -71,7 +71,7 @@ export const RemoteMCPToolButton = ({
           </Text>
           {Boolean(hasLintIssues) && (
             <span title="Has linting issues">
-              <AlertCircle className="h-4 w-4 flex-shrink-0 text-red-600 dark:text-red-400" />
+              <AlertCircle className="h-4 w-4 flex-shrink-0 text-error" />
             </span>
           )}
         </div>

frontend/src/components/pages/mcp-servers/list/remote-mcp-list-page.tsx

@@ -87,18 +87,18 @@ const StatusIcon = ({ state }: { state: (typeof MCPServer_State)[keyof typeof MC
     [MCPServer_State.RUNNING]: {
       text: 'Running',
       icon: Check,
-      iconColor: 'text-green-600',
+      iconColor: 'text-success',
     },
     [MCPServer_State.STARTING]: {
       text: 'Starting',
       icon: Loader2,
-      iconColor: 'text-blue-600',
+      iconColor: 'text-informative',
       animate: true,
     },
     [MCPServer_State.STOPPING]: {
       text: 'Stopping',
       icon: Loader2,
-      iconColor: 'text-orange-600',
+      iconColor: 'text-warning',
       animate: true,
     },
     [MCPServer_State.STOPPED]: {
@@ -109,7 +109,7 @@ const StatusIcon = ({ state }: { state: (typeof MCPServer_State)[keyof typeof MC
     [MCPServer_State.ERROR]: {
       text: 'Error',
       icon: AlertCircle,
-      iconColor: 'text-red-600',
+      iconColor: 'text-error',
     },
     [MCPServer_State.UNSPECIFIED]: {
       text: 'Unknown',
@@ -121,7 +121,7 @@ const StatusIcon = ({ state }: { state: (typeof MCPServer_State)[keyof typeof MC
   const statusProps = statusPropsMap[state] || {
     text: 'Unknown',
     icon: AlertCircle,
-    iconColor: 'text-red-600',
+    iconColor: 'text-error',
   };
 
   const IconComponent = statusProps.icon;
@@ -418,7 +418,7 @@ const RemoteMCPListPageContent = ({
                 return (
                   <TableRow>
                     <TableCell className="h-24 text-center" colSpan={columns.length}>
-                      <div className="flex items-center justify-center gap-2 text-red-600">
+                      <div className="flex items-center justify-center gap-2 text-error">
                         <AlertCircle className="h-4 w-4" />
                         Error loading MCP servers: {error.message}
                       </div>

frontend/src/components/pages/observability/metric-chart.tsx

@@ -146,7 +146,7 @@ export const MetricChart: FC<MetricChartProps> = ({ queryName, timeRange }) => {
                   const formattedValue = typeof value === 'number' ? formatWithUnit(value, data.metadata?.unit) : value;
                   return (
                     <div className="flex w-full items-center gap-3">
-                      <div className="h-2.5 w-2.5 shrink-0 rounded-[2px]" style={{ backgroundColor: indicatorColor }} />
+                      <div className="h-2.5 w-2.5 shrink-0 rounded-xs" style={{ backgroundColor: indicatorColor }} />
                       <span className="text-muted-foreground">{name}</span>
                       <span className="ml-auto font-medium font-mono tabular-nums">{formattedValue}</span>
                     </div>

frontend/src/components/pages/rp-connect/onboarding/add-user-step.tsx

@@ -541,7 +541,7 @@ export const AddUserStep = forwardRef<UserStepRef, AddUserStepProps & MotionProp
                           <Text variant="small">
                             Edit the user's{' '}
                             <TanStackRouterLink
-                              className="text-blue-800"
+                              className="text-informative"
                               params={{ userName: existingUserSelected.name }}
                               rel="noopener noreferrer"
                               target="_blank"