refactor: migrate remaining components to Design System v4

111 files across 14 directories: common, tree-editor, kb-accelerator,
copilot, assistant, analytics, library, procedural, procedural-editor,
public, script-editor, ui, admin, step-library.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/components/common/ActionMenu.tsx

@@ -53,8 +53,8 @@ export function ActionMenu({ actions, align = 'right' }: ActionMenuProps) {
       <button
         onClick={() => setIsOpen(!isOpen)}
         className={cn(
-          'rounded-md border border-border p-2 text-muted-foreground',
-          'hover:bg-accent hover:text-foreground'
+          'rounded-md border border-[#1e2130] p-2 text-[#848b9b]',
+          'hover:bg-accent hover:text-[#e2e5eb]'
         )}
         aria-label="Actions"
       >
@@ -64,7 +64,7 @@ export function ActionMenu({ actions, align = 'right' }: ActionMenuProps) {
       {isOpen && (
         <div
           className={cn(
-            'absolute z-50 mt-1 min-w-[180px] bg-card border border-border rounded-lg p-1',
+            'absolute z-50 mt-1 min-w-[180px] bg-[#14161d] border border-[#1e2130] rounded-lg p-1',
             align === 'right' ? 'right-0' : 'left-0'
           )}
         >
@@ -81,7 +81,7 @@ export function ActionMenu({ actions, align = 'right' }: ActionMenuProps) {
                     ? 'cursor-not-allowed opacity-40'
                     : action.variant === 'destructive'
                       ? 'text-red-400 hover:bg-accent hover:text-red-300'
-                      : 'text-muted-foreground hover:bg-accent hover:text-foreground'
+                      : 'text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]'
                 )}
               >
                 {Icon && <Icon className="h-4 w-4" />}

frontend/src/components/common/ConfirmDialog.tsx

@@ -34,8 +34,8 @@ export function ConfirmDialog({
             onClick={onClose}
             disabled={isLoading}
             className={cn(
-              'rounded-xl border border-border px-4 py-2 text-sm font-medium',
-              'text-muted-foreground hover:bg-accent hover:text-foreground',
+              'rounded-xl border border-[#1e2130] px-4 py-2 text-sm font-medium',
+              'text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]',
               'disabled:opacity-50 disabled:cursor-not-allowed'
             )}
           >
@@ -49,7 +49,7 @@ export function ConfirmDialog({
               'disabled:opacity-50 disabled:cursor-not-allowed',
               confirmVariant === 'destructive'
                 ? 'bg-red-400/10 text-red-400 hover:bg-red-400/20 border border-red-400/20'
-                : 'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90'
+                : 'bg-[#22d3ee] text-white hover:brightness-110'
             )}
           >
             {isLoading ? 'Processing...' : confirmLabel}
@@ -57,7 +57,7 @@ export function ConfirmDialog({
         </div>
       }
     >
-      <p className="text-sm text-muted-foreground">{message}</p>
+      <p className="text-sm text-[#848b9b]">{message}</p>
     </Modal>
   )
 }

frontend/src/components/common/ContextMenu.tsx

@@ -71,12 +71,12 @@ export function ContextMenu({ position, items, onClose }: ContextMenuProps) {
         left: position.x,
         top: position.y,
       }}
-      className="min-w-[200px] rounded-xl border border-border bg-card p-1 shadow-lg backdrop-blur-md"
+      className="min-w-[200px] rounded-xl border border-[#1e2130] bg-[#14161d] p-1 shadow-lg"
     >
       {items.map((item) => (
         <div key={item.id}>
           {item.separator && (
-            <div className="my-1 border-t border-border" />
+            <div className="my-1 border-t border-[#1e2130]" />
           )}
           <button
             onClick={() => {
@@ -87,11 +87,11 @@ export function ContextMenu({ position, items, onClose }: ContextMenuProps) {
               'flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors',
               item.variant === 'danger'
                 ? 'text-rose-400 hover:bg-rose-500/10'
-                : 'text-foreground hover:bg-brand-border'
+                : 'text-[#e2e5eb] hover:bg-brand-border'
             )}
           >
             {item.icon && (
-              <span className="flex h-4 w-4 items-center justify-center text-muted-foreground">
+              <span className="flex h-4 w-4 items-center justify-center text-[#848b9b]">
                 {item.icon}
               </span>
             )}

frontend/src/components/common/CreateFlowDropdown.tsx

@@ -65,7 +65,7 @@ export function CreateFlowDropdown({
     <div className={cn('relative', className)}>
       <button
         onClick={() => setShowMenu(!showMenu)}
-        className="flex items-center gap-2 rounded-lg bg-gradient-brand px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-primary/20 hover:opacity-90 transition-opacity"
+        className="flex items-center gap-2 rounded-lg bg-[#22d3ee] px-4 py-2 text-sm font-semibold text-white hover:brightness-110 transition-opacity"
       >
         <Plus size={16} />
         {label}
@@ -74,17 +74,17 @@ export function CreateFlowDropdown({
       {showMenu && (
         <>
           <div className="fixed inset-0 z-10" onClick={() => setShowMenu(false)} />
-          <div className="absolute right-0 z-20 mt-1 w-64 rounded-lg border border-border bg-card p-1 shadow-xl backdrop-blur-xs">
+          <div className="absolute right-0 z-20 mt-1 w-64 rounded-lg border border-[#1e2130] bg-[#14161d] p-1 shadow-xl">
             {/* Troubleshooting */}
             <Link
               to="/trees/new"
               onClick={() => setShowMenu(false)}
-              className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent"
+              className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-[#e2e5eb] hover:bg-accent"
             >
-              <FolderTree className="h-4 w-4 text-muted-foreground" />
+              <FolderTree className="h-4 w-4 text-[#848b9b]" />
               <div className="flex-1">
                 <div className="font-medium">Troubleshooting Tree</div>
-                <div className="text-xs text-muted-foreground">Branching decision flow</div>
+                <div className="text-xs text-[#848b9b]">Branching decision flow</div>
               </div>
             </Link>
             {aiEnabled && (
@@ -95,27 +95,27 @@ export function CreateFlowDropdown({
                   setAiPromptFlowType('troubleshooting')
                   setAiPromptOpen(true)
                 }}
-                className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm text-foreground hover:bg-accent"
+                className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm text-[#e2e5eb] hover:bg-accent"
               >
-                <Sparkles className="h-3.5 w-3.5 text-primary ml-0.5" />
+                <Sparkles className="h-3.5 w-3.5 text-[#22d3ee] ml-0.5" />
                 <div className="text-left">
-                  <div className="text-xs text-primary font-medium">Build with Flow Assist</div>
+                  <div className="text-xs text-[#22d3ee] font-medium">Build with Flow Assist</div>
                 </div>
               </button>
             )}
 
-            <div className="my-1 border-t border-border" />
+            <div className="my-1 border-t border-[#1e2130]" />
 
             {/* Procedural */}
             <Link
               to="/flows/new"
               onClick={() => setShowMenu(false)}
-              className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent"
+              className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-[#e2e5eb] hover:bg-accent"
             >
-              <ListOrdered className="h-4 w-4 text-muted-foreground" />
+              <ListOrdered className="h-4 w-4 text-[#848b9b]" />
               <div className="flex-1">
                 <div className="font-medium">Procedural Flow</div>
-                <div className="text-xs text-muted-foreground">Step-by-step procedure</div>
+                <div className="text-xs text-[#848b9b]">Step-by-step procedure</div>
               </div>
             </Link>
             {aiEnabled && (
@@ -126,27 +126,27 @@ export function CreateFlowDropdown({
                   setAiPromptFlowType('procedural')
                   setAiPromptOpen(true)
                 }}
-                className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm text-foreground hover:bg-accent"
+                className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm text-[#e2e5eb] hover:bg-accent"
               >
-                <Sparkles className="h-3.5 w-3.5 text-primary ml-0.5" />
+                <Sparkles className="h-3.5 w-3.5 text-[#22d3ee] ml-0.5" />
                 <div className="text-left">
-                  <div className="text-xs text-primary font-medium">Build with Flow Assist</div>
+                  <div className="text-xs text-[#22d3ee] font-medium">Build with Flow Assist</div>
                 </div>
               </button>
             )}
 
-            <div className="my-1 border-t border-border" />
+            <div className="my-1 border-t border-[#1e2130]" />
 
             {/* Maintenance */}
             <Link
               to="/flows/new?type=maintenance"
               onClick={() => setShowMenu(false)}
-              className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent"
+              className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-[#e2e5eb] hover:bg-accent"
             >
               <Wrench className="h-4 w-4 text-amber-400" />
               <div className="flex-1">
                 <div className="font-medium">Maintenance Flow</div>
-                <div className="text-xs text-muted-foreground">Scheduled multi-target tasks</div>
+                <div className="text-xs text-[#848b9b]">Scheduled multi-target tasks</div>
               </div>
             </Link>
             {aiEnabled && (
@@ -157,11 +157,11 @@ export function CreateFlowDropdown({
                   setAiPromptFlowType('maintenance')
                   setAiPromptOpen(true)
                 }}
-                className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm text-foreground hover:bg-accent"
+                className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm text-[#e2e5eb] hover:bg-accent"
               >
-                <Sparkles className="h-3.5 w-3.5 text-primary ml-0.5" />
+                <Sparkles className="h-3.5 w-3.5 text-[#22d3ee] ml-0.5" />
                 <div className="text-left">
-                  <div className="text-xs text-primary font-medium">Build with Flow Assist</div>
+                  <div className="text-xs text-[#22d3ee] font-medium">Build with Flow Assist</div>
                 </div>
               </button>
             )}

frontend/src/components/common/EmptyState.tsx

@@ -31,17 +31,17 @@ export function EmptyState({
         </div>
       )}
       {!illustration && icon && (
-        <div className="mb-4 text-muted-foreground">{icon}</div>
+        <div className="mb-4 text-[#848b9b]">{icon}</div>
       )}
-      <h3 className="text-lg font-semibold text-foreground">{title}</h3>
+      <h3 className="text-lg font-semibold text-[#e2e5eb]">{title}</h3>
       {description && (
-        <p className="mt-2 max-w-sm text-sm text-muted-foreground">{description}</p>
+        <p className="mt-2 max-w-sm text-sm text-[#848b9b]">{description}</p>
       )}
       {action && <div className="mt-4">{action}</div>}
       {learnMoreLink && (
         <Link
           to={learnMoreLink}
-          className="mt-3 text-sm text-muted-foreground hover:text-foreground transition-colors"
+          className="mt-3 text-sm text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
         >
           {learnMoreText} &rarr;
         </Link>

frontend/src/components/common/ErrorBoundary.tsx

@@ -39,10 +39,10 @@ function DefaultFallback({ error, resetError }: FallbackProps) {
         <h2 className="mb-2 text-xl font-semibold text-red-400">
           Something went wrong
         </h2>
-        <p className="mb-4 text-muted-foreground">
+        <p className="mb-4 text-[#848b9b]">
           An unexpected error occurred. Please try refreshing the page.
         </p>
-        <pre className="mb-4 overflow-auto rounded-xl bg-white/5 border border-border p-3 text-left text-xs text-red-400">
+        <pre className="mb-4 overflow-auto rounded-xl bg-white/5 border border-[#1e2130] p-3 text-left text-xs text-red-400">
           {error.message}
         </pre>
         <div className="flex justify-center gap-3">

frontend/src/components/common/InfoTip.tsx

@@ -5,7 +5,7 @@ interface InfoTipProps {
 export function InfoTip({ text }: InfoTipProps) {
   return (
     <span
-      className="inline-flex items-center justify-center h-3.5 w-3.5 rounded-full border border-muted-foreground/40 text-[9px] text-muted-foreground cursor-help shrink-0"
+      className="inline-flex items-center justify-center h-3.5 w-3.5 rounded-full border border-muted-foreground/40 text-[9px] text-[#848b9b] cursor-help shrink-0"
       title={text}
     >
       i

frontend/src/components/common/Modal.tsx

@@ -125,7 +125,7 @@ export function Modal({ isOpen, onClose, title, children, footer, size = 'md', a
     >
       {/* Backdrop */}
       <div
-        className="absolute inset-0 bg-black/80 backdrop-blur-xs"
+        className="absolute inset-0 bg-black/80"
         onClick={onClose}
         aria-hidden="true"
       />
@@ -134,7 +134,7 @@ export function Modal({ isOpen, onClose, title, children, footer, size = 'md', a
       <div
         ref={modalRef}
         className={cn(
-          'relative flex w-full flex-col border border-border bg-card shadow-lg',
+          'relative flex w-full flex-col border border-[#1e2130] bg-[#14161d] shadow-lg',
           'animate-scale-in transition-all duration-200',
           isFullScreen
             ? 'fixed inset-4 max-w-none w-auto h-auto rounded-2xl'
@@ -145,8 +145,8 @@ export function Modal({ isOpen, onClose, title, children, footer, size = 'md', a
         )}
       >
         {/* Header - Fixed at top */}
-        <div className="flex shrink-0 items-center justify-between border-b border-border px-4 py-3 sm:px-6 sm:py-4">
-          <h2 id="modal-title" className="text-lg font-semibold text-foreground">
+        <div className="flex shrink-0 items-center justify-between border-b border-[#1e2130] px-4 py-3 sm:px-6 sm:py-4">
+          <h2 id="modal-title" className="text-lg font-semibold text-[#e2e5eb]">
             {title}
           </h2>
           <div className="flex items-center gap-1">
@@ -154,7 +154,7 @@ export function Modal({ isOpen, onClose, title, children, footer, size = 'md', a
               <button
                 type="button"
                 onClick={toggleFullScreen}
-                className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+                className="rounded-md p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
                 title={isFullScreen ? 'Exit full screen' : 'Full screen'}
               >
                 {isFullScreen
@@ -166,8 +166,8 @@ export function Modal({ isOpen, onClose, title, children, footer, size = 'md', a
             <button
               onClick={onClose}
               className={cn(
-                'rounded-md p-1.5 text-muted-foreground transition-colors sm:p-1',
-                'hover:bg-accent hover:text-foreground',
+                'rounded-md p-1.5 text-[#848b9b] transition-colors sm:p-1',
+                'hover:bg-accent hover:text-[#e2e5eb]',
                 'focus:outline-hidden focus:ring-2 focus:ring-primary/20'
               )}
               aria-label="Close modal"
@@ -184,7 +184,7 @@ export function Modal({ isOpen, onClose, title, children, footer, size = 'md', a
 
         {/* Footer - Fixed at bottom */}
         {footer && (
-          <div className="shrink-0 border-t border-border px-4 py-3 sm:px-6 sm:py-4">
+          <div className="shrink-0 border-t border-[#1e2130] px-4 py-3 sm:px-6 sm:py-4">
             {footer}
           </div>
         )}

frontend/src/components/common/PageHeader.tsx

@@ -25,11 +25,11 @@ export function PageHeader({
       <div className="flex items-start gap-3">
         {icon && <div className="shrink-0">{icon}</div>}
         <div>
-          <h1 className={cn('text-2xl font-bold font-heading text-foreground', titleClassName)}>
+          <h1 className={cn('text-2xl font-bold font-heading text-[#e2e5eb]', titleClassName)}>
             {title}
           </h1>
           {description && (
-            <p className={cn('mt-1 text-sm text-muted-foreground', descriptionClassName)}>
+            <p className={cn('mt-1 text-sm text-[#848b9b]', descriptionClassName)}>
               {description}
             </p>
           )}

frontend/src/components/common/PageLoader.tsx

@@ -5,7 +5,7 @@ export function PageLoader() {
     <div className="flex h-full items-center justify-center">
       <div className="flex flex-col items-center gap-4">
         <Spinner size="lg" />
-        <p className="text-sm text-muted-foreground">Loading&hellip;</p>
+        <p className="text-sm text-[#848b9b]">Loading&hellip;</p>
       </div>
     </div>
   )

frontend/src/components/common/PasswordInput.tsx

@@ -19,7 +19,7 @@ export function PasswordInput({ className, ...props }: PasswordInputProps) {
       <button
         type="button"
         onClick={() => setVisible((v) => !v)}
-        className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+        className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
         tabIndex={-1}
         title={visible ? 'Hide password' : 'Show password'}
       >

frontend/src/components/common/RichTextInput.tsx

@@ -233,7 +233,7 @@ export function RichTextInput({
         rows={rows}
         disabled={disabled}
         className={cn(
-          'w-full bg-card border border-border rounded-xl p-3 text-sm text-foreground placeholder:text-muted-foreground',
+          'w-full bg-[#14161d] border border-[#1e2130] rounded-xl p-3 text-sm text-[#e2e5eb] placeholder:text-[#848b9b]',
           'focus:border-[rgba(6,182,212,0.3)] focus:outline-none resize-none transition-colors',
           isDragOver && 'border-primary/50 bg-primary/5',
           disabled && 'opacity-50 cursor-not-allowed'
@@ -243,7 +243,7 @@ export function RichTextInput({
       {/* Drag overlay hint */}
       {isDragOver && (
         <div className="absolute inset-0 flex items-center justify-center rounded-xl border-2 border-dashed border-primary/50 bg-primary/5 pointer-events-none">
-          <div className="flex items-center gap-2 text-sm text-primary">
+          <div className="flex items-center gap-2 text-sm text-[#22d3ee]">
             <ImagePlus size={16} />
             Drop image to attach
           </div>
@@ -254,19 +254,19 @@ export function RichTextInput({
       {pendingUploads.length > 0 && (
         <div className="flex gap-2 flex-wrap mt-2">
           {pendingUploads.map((upload) => (
-            <div key={upload.id} className="relative w-16 h-16 rounded-lg overflow-hidden border border-border">
+            <div key={upload.id} className="relative w-16 h-16 rounded-lg overflow-hidden border border-[#1e2130]">
               <img src={upload.preview} alt="" className="w-full h-full object-cover" />
               {upload.status === 'uploading' && (
-                <div className="absolute inset-0 bg-background/50 flex items-center justify-center">
-                  <Loader2 size={16} className="animate-spin text-primary" />
+                <div className="absolute inset-0 bg-[#0c0d10]/50 flex items-center justify-center">
+                  <Loader2 size={16} className="animate-spin text-[#22d3ee]" />
                 </div>
               )}
               {upload.status === 'done' && (
                 <button
                   onClick={() => handleRemove(upload.id)}
-                  className="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-background/80 border border-border flex items-center justify-center hover:bg-rose-500/20 transition-colors"
+                  className="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-[#0c0d10]/80 border border-[#1e2130] flex items-center justify-center hover:bg-rose-500/20 transition-colors"
                 >
-                  <X size={10} className="text-muted-foreground" />
+                  <X size={10} className="text-[#848b9b]" />
                 </button>
               )}
               {upload.status === 'error' && (
@@ -284,7 +284,7 @@ export function RichTextInput({
 
       {/* Paste hint */}
       {isFocused && !value && pendingUploads.length === 0 && (
-        <p className="text-[0.625rem] text-muted-foreground/50 mt-1">Paste screenshots with Ctrl+V</p>
+        <p className="text-[0.625rem] text-[#848b9b]/50 mt-1">Paste screenshots with Ctrl+V</p>
       )}
     </div>
   )

frontend/src/components/common/RouteError.tsx

@@ -55,12 +55,12 @@ export function RouteError() {
   }
 
   return (
-    <div className="flex min-h-screen flex-col items-center justify-center bg-background p-8">
+    <div className="flex min-h-screen flex-col items-center justify-center bg-[#0c0d10] p-8">
       <div className="max-w-md text-center">
-        <h1 className="mb-2 text-4xl font-bold text-foreground">Oops!</h1>
+        <h1 className="mb-2 text-4xl font-bold text-[#e2e5eb]">Oops!</h1>
         <h2 className="mb-2 text-xl font-semibold text-red-400">{errorMessage}</h2>
         {errorDetails && (
-          <p className="mb-4 text-muted-foreground">{errorDetails}</p>
+          <p className="mb-4 text-[#848b9b]">{errorDetails}</p>
         )}
         <div className="flex justify-center gap-4">
           <Button variant="secondary" onClick={() => navigate(-1)}>

frontend/src/components/common/Spinner.tsx

@@ -15,7 +15,7 @@ export function Spinner({ size = 'md', className }: SpinnerProps) {
   return (
     <div
       className={cn(
-        'animate-spin rounded-full border-border border-t-primary',
+        'animate-spin rounded-full border-[#1e2130] border-t-primary',
         SIZES[size],
         className
       )}

frontend/src/components/common/StarRating.tsx

@@ -48,14 +48,14 @@ export function StarRating({
               sizeClasses[size],
               star <= value
                 ? 'fill-yellow-400 text-yellow-400'
-                : 'fill-none text-muted-foreground',
+                : 'fill-none text-[#848b9b]',
               !readonly && 'hover:text-yellow-300'
             )}
           />
         </button>
       ))}
       {showCount && (
-        <span className="ml-1 text-sm text-muted-foreground">
+        <span className="ml-1 text-sm text-[#848b9b]">
           ({value}/5)
         </span>
       )}

frontend/src/components/common/TagBadges.tsx

@@ -34,11 +34,11 @@ export function TagBadges({
           }}
           disabled={!onTagClick}
           className={cn(
-            'rounded-full font-label transition-colors',
+            'rounded-full font-sans text-xs transition-colors',
             size === 'sm' ? 'px-2 py-0.5 text-xs' : 'px-2.5 py-1 text-sm',
             variant === 'default'
-              ? 'bg-accent text-muted-foreground hover:bg-accent'
-              : 'bg-accent/50 text-muted-foreground hover:bg-accent',
+              ? 'bg-accent text-[#848b9b] hover:bg-accent'
+              : 'bg-accent/50 text-[#848b9b] hover:bg-accent',
             !onTagClick && 'cursor-default'
           )}
         >
@@ -48,9 +48,9 @@ export function TagBadges({
       {hiddenCount > 0 && (
         <span
           className={cn(
-            'rounded-full font-label',
+            'rounded-full font-sans text-xs',
             size === 'sm' ? 'px-2 py-0.5 text-xs' : 'px-2.5 py-1 text-sm',
-            'bg-accent/50 text-muted-foreground'
+            'bg-accent/50 text-[#848b9b]'
           )}
           title={tags.slice(maxVisible).join(', ')}
         >

frontend/src/components/common/TagInput.tsx

@@ -123,10 +123,10 @@ export function TagInput({
       <div
         className={cn(
           'flex flex-wrap gap-1.5 rounded-xl border px-2 py-1.5',
-          'bg-card text-foreground',
+          'bg-[#14161d] text-[#e2e5eb]',
           'focus-within:border-primary focus-within:ring-1 focus-within:ring-primary/20',
           disabled ? 'cursor-not-allowed opacity-50' : '',
-          'border-border'
+          'border-[#1e2130]'
         )}
         onClick={() => inputRef.current?.focus()}
       >
@@ -136,7 +136,7 @@ export function TagInput({
             key={tag}
             className={cn(
               'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs',
-              'bg-accent text-muted-foreground'
+              'bg-accent text-[#848b9b]'
             )}
           >
             {tag}
@@ -184,8 +184,8 @@ export function TagInput({
             placeholder={tags.length === 0 ? placeholder : ''}
             disabled={disabled}
             className={cn(
-              'flex-1 min-w-[80px] border-0 bg-transparent px-1 py-0.5 text-sm text-foreground',
-              'placeholder:text-muted-foreground',
+              'flex-1 min-w-[80px] border-0 bg-transparent px-1 py-0.5 text-sm text-[#e2e5eb]',
+              'placeholder:text-[#848b9b]',
               'focus:outline-hidden focus:ring-0'
             )}
           />
@@ -196,8 +196,8 @@ export function TagInput({
       {showSuggestions && suggestions.length > 0 && (
         <div
           className={cn(
-            'absolute z-10 mt-1 w-full rounded-xl border border-border',
-            'bg-card shadow-lg'
+            'absolute z-10 mt-1 w-full rounded-xl border border-[#1e2130]',
+            'bg-[#14161d] shadow-lg'
           )}
         >
           {suggestions.map((suggestion, index) => (
@@ -206,13 +206,13 @@ export function TagInput({
               type="button"
               onClick={() => addTag(suggestion.name)}
               className={cn(
-                'flex w-full items-center justify-between px-3 py-2 text-sm text-muted-foreground',
+                'flex w-full items-center justify-between px-3 py-2 text-sm text-[#848b9b]',
                 'hover:bg-accent',
                 index === selectedIndex && 'bg-accent'
               )}
             >
               <span>{suggestion.name}</span>
-              <span className="text-xs text-muted-foreground">
+              <span className="text-xs text-[#848b9b]">
                 {suggestion.usage_count} trees
               </span>
             </button>
@@ -225,8 +225,8 @@ export function TagInput({
                 type="button"
                 onClick={() => addTag(inputValue)}
                 className={cn(
-                  'flex w-full items-center gap-2 border-t border-border px-3 py-2 text-sm',
-                  'hover:bg-accent text-foreground'
+                  'flex w-full items-center gap-2 border-t border-[#1e2130] px-3 py-2 text-sm',
+                  'hover:bg-accent text-[#e2e5eb]'
                 )}
               >
                 <Plus className="h-4 w-4" />
@@ -237,7 +237,7 @@ export function TagInput({
       )}
 
       {/* Helper text */}
-      <p className="mt-1 text-xs text-muted-foreground">
+      <p className="mt-1 text-xs text-[#848b9b]">
         {tags.length}/{maxTags} tags. Press Enter, Tab, comma, or semicolon to add.
       </p>
     </div>