refactor: normalize FlowPilot/Assistant/ScriptBuilder to design system tokens

Replace hardcoded Tailwind color utilities with semantic CSS variable tokens
across 31 files in the FlowPilot, Assistant Chat, and Script Builder feature
communities — the areas graphify identified as design-system-free.

- text-blue-400 → text-accent, bg-blue-500/10 → bg-accent-dim, border-blue-500/20 → border-accent/20
- text-amber-400 → text-warning, bg-amber-400/10 → bg-warning-dim, border-l-amber-500 → border-l-warning
- text-rose-400/500 → text-danger, bg-rose-500/10 → bg-danger-dim
- text-emerald-400 → text-success, bg-emerald-500/10 → bg-success-dim, border-l-emerald-500 → border-l-success
- bg-white/[0.08] → bg-elevated (opacity hack → semantic surface token)
- bg-gradient-to-r from-blue-500 to-blue-400 → bg-accent (no gradient surfaces)
- bg-[#60a5fa] → bg-accent (hard-coded hex removed)

Also adds graphify-out/ to .gitignore.

Theme resilience: accent color has changed twice in 5 weeks. Semantic tokens
mean the next change is a 1-line edit in index.css, not 110 grep-and-replace.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/components/flowpilot/AISessionListItem.tsx

@@ -9,9 +9,9 @@ interface AISessionListItemProps {
 
 const STATUS_CONFIG = {
   active: { icon: Clock, color: 'text-primary', label: 'Active' },
-  paused: { icon: Pause, color: 'text-amber-400', label: 'Paused' },
-  resolved: { icon: CheckCircle2, color: 'text-emerald-400', label: 'Resolved' },
-  escalated: { icon: ArrowUpRight, color: 'text-amber-400', label: 'Escalated' },
+  paused: { icon: Pause, color: 'text-warning', label: 'Paused' },
+  resolved: { icon: CheckCircle2, color: 'text-success', label: 'Resolved' },
+  escalated: { icon: ArrowUpRight, color: 'text-warning', label: 'Escalated' },
   abandoned: { icon: AlertCircle, color: 'text-text-muted', label: 'Abandoned' },
 } as const
 
@@ -64,7 +64,7 @@ export function AISessionListItem({ session }: AISessionListItemProps) {
           </div>
         </div>
         {session.session_rating && (
-          <span className="font-sans text-xs text-xs text-amber-400">
+          <span className="font-sans text-xs text-xs text-warning">
             {'★'.repeat(session.session_rating)}
           </span>
         )}

frontend/src/components/flowpilot/EscalateModal.tsx

@@ -35,9 +35,9 @@ export function EscalateModal({ open, onClose, onEscalate, isProcessing, hasPsaT
   return (
     <Modal isOpen={open} onClose={handleClose} title="Escalate Session" size="sm">
       <div className="space-y-4">
-        <div className="flex items-start gap-3 rounded-xl border border-amber-400/20 bg-amber-400/5 p-3">
-          <AlertTriangle size={16} className="text-amber-400 shrink-0 mt-0.5" />
-          <p className="text-sm text-amber-400">
+        <div className="flex items-start gap-3 rounded-xl border border-warning/20 bg-warning/5 p-3">
+          <AlertTriangle size={16} className="text-warning shrink-0 mt-0.5" />
+          <p className="text-sm text-warning">
             This will mark the session as requesting escalation. Team members will see it in their escalation queue and can pick it up with full context.
           </p>
         </div>
@@ -70,7 +70,7 @@ export function EscalateModal({ open, onClose, onEscalate, isProcessing, hasPsaT
           <button
             onClick={handleSubmit}
             disabled={!reason.trim() || reason.trim().length < 5 || isProcessing}
-            className="flex-1 flex items-center justify-center gap-2 rounded-lg bg-amber-500/90 px-4 py-2.5 min-h-[44px] text-sm font-semibold text-white hover:bg-amber-500 active:scale-[0.98] disabled:opacity-40 transition-all"
+            className="flex-1 flex items-center justify-center gap-2 rounded-lg bg-warning px-4 py-2.5 min-h-[44px] text-sm font-semibold text-white hover:bg-warning active:scale-[0.98] disabled:opacity-40 transition-all"
           >
             {isProcessing ? (
               <Loader2 size={14} className="animate-spin" />

frontend/src/components/flowpilot/EscalationQueue.tsx

@@ -50,7 +50,7 @@ export function EscalationQueue({ onPickup }: EscalationQueueProps) {
   if (error) {
     return (
       <div className="py-12 text-center">
-        <p className="text-sm text-rose-400">{error}</p>
+        <p className="text-sm text-danger">{error}</p>
         <button
           onClick={loadQueue}
           className="mt-2 text-xs text-muted-foreground hover:text-foreground transition-colors"
@@ -99,7 +99,7 @@ export function EscalationQueue({ onPickup }: EscalationQueueProps) {
               {session.problem_summary || 'Untitled session'}
             </p>
             {session.escalation_reason && (
-              <p className="mt-1 text-xs text-amber-400 line-clamp-2">
+              <p className="mt-1 text-xs text-warning line-clamp-2">
                 Reason: {session.escalation_reason}
               </p>
             )}

frontend/src/components/flowpilot/FlowPilotActionBar.tsx

@@ -91,7 +91,7 @@ export function FlowPilotActionBar({
         <button
           onClick={() => { setShowResolve(true); setShowEscalate(false) }}
           disabled={!canResolve || isProcessing}
-          className="flex items-center justify-center gap-1.5 rounded-lg bg-emerald-500/10 border border-emerald-500/20 px-2.5 sm:px-4 py-2 min-h-[40px] sm:min-h-[44px] text-xs sm:text-sm font-medium text-emerald-400 hover:bg-emerald-500/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
+          className="flex items-center justify-center gap-1.5 rounded-lg bg-success-dim border border-success/20 px-2.5 sm:px-4 py-2 min-h-[40px] sm:min-h-[44px] text-xs sm:text-sm font-medium text-success hover:bg-success/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
         >
           <CheckCircle2 size={15} />
           Resolve
@@ -99,7 +99,7 @@ export function FlowPilotActionBar({
         <button
           onClick={() => setShowEscalate(true)}
           disabled={!canEscalate || isProcessing}
-          className="flex items-center justify-center gap-1.5 rounded-lg bg-amber-500/10 border border-amber-500/20 px-2.5 sm:px-4 py-2 min-h-[40px] sm:min-h-[44px] text-xs sm:text-sm font-medium text-amber-400 hover:bg-amber-500/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
+          className="flex items-center justify-center gap-1.5 rounded-lg bg-warning-dim border border-warning/20 px-2.5 sm:px-4 py-2 min-h-[40px] sm:min-h-[44px] text-xs sm:text-sm font-medium text-warning hover:bg-warning/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
         >
           <ArrowUpRight size={15} />
           Escalate
@@ -108,7 +108,7 @@ export function FlowPilotActionBar({
           <button
             onClick={() => setShowStatusUpdate(true)}
             disabled={isProcessing}
-            className="flex items-center justify-center gap-1.5 rounded-lg bg-blue-500/10 border border-blue-500/20 px-2.5 sm:px-4 py-2 min-h-[40px] sm:min-h-[44px] text-xs sm:text-sm font-medium text-blue-400 hover:bg-blue-500/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
+            className="flex items-center justify-center gap-1.5 rounded-lg bg-accent-dim border border-accent/20 px-2.5 sm:px-4 py-2 min-h-[40px] sm:min-h-[44px] text-xs sm:text-sm font-medium text-accent hover:bg-accent/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
             title="Share Update"
           >
             <FileText size={15} />
@@ -166,7 +166,7 @@ export function FlowPilotActionBar({
               <button
                 onClick={handleResolve}
                 disabled={resolutionSummary.length < 5 || submitting}
-                className="rounded-lg bg-emerald-500/20 border border-emerald-500/30 px-4 py-2 min-h-[44px] text-sm font-medium text-emerald-400 hover:bg-emerald-500/30 disabled:opacity-50 transition-colors"
+                className="rounded-lg bg-success/20 border border-success/30 px-4 py-2 min-h-[44px] text-sm font-medium text-success hover:bg-success/30 disabled:opacity-50 transition-colors"
               >
                 {submitting ? 'Resolving...' : 'Resolve Session'}
               </button>
@@ -193,7 +193,7 @@ export function FlowPilotActionBar({
               <button
                 onClick={handleAbandon}
                 disabled={submitting}
-                className="rounded-lg bg-rose-500/20 border border-rose-500/30 px-4 py-2 min-h-[44px] text-sm font-medium text-rose-400 hover:bg-rose-500/30 disabled:opacity-50 transition-colors"
+                className="rounded-lg bg-danger/20 border border-danger/30 px-4 py-2 min-h-[44px] text-sm font-medium text-danger hover:bg-danger/30 disabled:opacity-50 transition-colors"
               >
                 {submitting ? 'Closing...' : 'Close Session'}
               </button>

frontend/src/components/flowpilot/FlowPilotIntake.tsx

@@ -155,7 +155,7 @@ export function FlowPilotIntake({ onSubmit, isLoading, defaultProblem }: FlowPil
                 </div>
                 <button
                   onClick={handleClearTicket}
-                  className="ml-2 rounded-md p-1 text-muted-foreground hover:bg-white/[0.06] hover:text-foreground transition-colors"
+                  className="ml-2 rounded-md p-1 text-muted-foreground hover:bg-elevated hover:text-foreground transition-colors"
                 >
                   <X size={14} />
                 </button>
@@ -215,7 +215,7 @@ export function FlowPilotIntake({ onSubmit, isLoading, defaultProblem }: FlowPil
                 Pull from Ticket
               </button>
               {psaChecked && !psaConnection && (
-                <span className="flex items-center gap-1 text-[0.625rem] text-amber-400/80">
+                <span className="flex items-center gap-1 text-[0.625rem] text-warning/80">
                   <AlertTriangle size={10} />
                   No PSA connected
                 </span>

frontend/src/components/flowpilot/FlowPilotMessageBar.tsx

@@ -243,17 +243,17 @@ export function FlowPilotMessageBar({ onRespond, disabled = false, isProcessing
                   <button
                     type="button"
                     onClick={() => handleRemoveUpload(upload.id)}
-                    className="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-background 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-background border border-border flex items-center justify-center hover:bg-danger/20 transition-colors"
                   >
                     <X size={8} className="text-muted-foreground" />
                   </button>
                 )}
                 {upload.status === 'error' && (
                   <div
-                    className="absolute inset-0 bg-rose-500/20 border-2 border-rose-500 flex items-center justify-center cursor-pointer"
+                    className="absolute inset-0 bg-danger/20 border-2 border-danger flex items-center justify-center cursor-pointer"
                     onClick={() => retryUpload(upload.id)}
                   >
-                    <RotateCcw size={10} className="text-rose-500" />
+                    <RotateCcw size={10} className="text-danger" />
                   </div>
                 )}
               </div>

frontend/src/components/flowpilot/FlowPilotSession.tsx

@@ -148,7 +148,7 @@ export function FlowPilotSession({
             <div className="mb-4">
               <button
                 onClick={() => setShowShareCommunication(true)}
-                className="flex items-center gap-2 rounded-lg bg-blue-500/10 border border-blue-500/20 px-4 py-2.5 text-sm font-medium text-blue-400 hover:bg-blue-500/20 transition-colors"
+                className="flex items-center gap-2 rounded-lg bg-accent-dim border border-accent/20 px-4 py-2.5 text-sm font-medium text-accent hover:bg-accent/20 transition-colors"
               >
                 <FileText size={16} />
                 {shareLabel}

frontend/src/components/flowpilot/FlowPilotStepCard.tsx

@@ -161,7 +161,7 @@ export function FlowPilotStepCard({ step, isCurrentStep, isProcessing, sessionId
     <div
       className={cn(
         'card-flat p-3 sm:p-4 lg:p-5',
-        isResolutionSuggestion && 'border-emerald-500/30'
+        isResolutionSuggestion && 'border-success/30'
       )}
     >
       {/* Context message */}
@@ -175,7 +175,7 @@ export function FlowPilotStepCard({ step, isCurrentStep, isProcessing, sessionId
       <div className="flex items-start gap-3 mb-4">
         <span className={cn(
           'mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-lg',
-          isResolutionSuggestion ? 'bg-emerald-500/10 text-emerald-400' : 'bg-accent-dim text-primary'
+          isResolutionSuggestion ? 'bg-success-dim text-success' : 'bg-accent-dim text-primary'
         )}>
           <Icon size={14} />
         </span>
@@ -197,7 +197,7 @@ export function FlowPilotStepCard({ step, isCurrentStep, isProcessing, sessionId
             <div className="flex flex-col gap-2 sm:flex-row">
               <button
                 onClick={() => handleResolutionResponse(true)}
-                className="flex-1 min-h-[44px] rounded-lg bg-emerald-500/10 border border-emerald-500/20 px-4 py-2.5 text-sm font-medium text-emerald-400 hover:bg-emerald-500/20 transition-colors"
+                className="flex-1 min-h-[44px] rounded-lg bg-success-dim border border-success/20 px-4 py-2.5 text-sm font-medium text-success hover:bg-success/20 transition-colors"
               >
                 Yes, this is resolved
               </button>

frontend/src/components/flowpilot/InSessionScriptGenerator.tsx

@@ -128,7 +128,7 @@ export function InSessionScriptGenerator({
                 onClick={handleCopy}
                 className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
               >
-                {copied ? <Check size={12} className="text-emerald-400" /> : <Copy size={12} />}
+                {copied ? <Check size={12} className="text-success" /> : <Copy size={12} />}
                 {copied ? 'Copied' : 'Copy'}
               </button>
             </div>

frontend/src/components/flowpilot/ProposalCard.tsx

@@ -2,9 +2,9 @@ import { GitBranch, ArrowUpRight, Sparkles, Clock, Hash } from 'lucide-react'
 import type { FlowProposalSummary } from '@/types/flow-proposal'
 
 const TYPE_CONFIG = {
-  new_flow: { label: 'New Flow', color: 'text-emerald-400 bg-emerald-400/10 border-emerald-400/20', icon: Sparkles },
-  enhancement: { label: 'Enhancement', color: 'text-amber-400 bg-amber-400/10 border-amber-400/20', icon: ArrowUpRight },
-  branch_addition: { label: 'Branch', color: 'text-blue-400 bg-blue-400/10 border-blue-400/20', icon: GitBranch },
+  new_flow: { label: 'New Flow', color: 'text-success bg-emerald-400/10 border-emerald-400/20', icon: Sparkles },
+  enhancement: { label: 'Enhancement', color: 'text-warning bg-warning-dim border-warning/20', icon: ArrowUpRight },
+  branch_addition: { label: 'Branch', color: 'text-accent bg-accent-dim border-accent/20', icon: GitBranch },
   auto_reinforced: { label: 'Reinforced', color: 'text-muted-foreground bg-card border-border', icon: Sparkles },
 } as const
 

frontend/src/components/flowpilot/ProposalDetail.tsx

@@ -105,7 +105,7 @@ export function ProposalDetail({ proposal, onReview }: ProposalDetailProps) {
         {proposal.proposed_diff && (() => {
           const diff = proposal.proposed_diff as { diff_description?: string; new_nodes?: Array<{ title?: string; question?: string; description?: string }> }
           return (
-            <div className="card-flat border-l-2 border-l-amber-500 p-4">
+            <div className="card-flat border-l-2 border-l-warning p-4">
               <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-text-muted mb-2">Proposed Changes</h4>
               {diff.diff_description && (
                 <p className="text-sm text-foreground">{diff.diff_description}</p>
@@ -114,8 +114,8 @@ export function ProposalDetail({ proposal, onReview }: ProposalDetailProps) {
                 <div className="mt-3 space-y-1.5">
                   <p className="text-xs font-medium text-muted-foreground">New nodes:</p>
                   {diff.new_nodes.map((node, i) => (
-                    <div key={i} className="rounded-lg bg-emerald-500/5 border border-emerald-500/10 px-3 py-2 text-xs text-foreground">
-                      <span className="text-emerald-400">+ </span>
+                    <div key={i} className="rounded-lg bg-success/5 border border-success/10 px-3 py-2 text-xs text-foreground">
+                      <span className="text-success">+ </span>
                       {node.title || node.question || node.description || 'New node'}
                     </div>
                   ))}
@@ -196,7 +196,7 @@ export function ProposalDetail({ proposal, onReview }: ProposalDetailProps) {
               <button
                 onClick={() => handleAction('approve')}
                 disabled={isSubmitting}
-                className="flex items-center gap-2 rounded-lg bg-emerald-500/10 border border-emerald-500/20 px-4 py-2 text-sm font-medium text-emerald-400 hover:bg-emerald-500/20 disabled:opacity-40 transition-colors"
+                className="flex items-center gap-2 rounded-lg bg-success-dim border border-success/20 px-4 py-2 text-sm font-medium text-success hover:bg-success/20 disabled:opacity-40 transition-colors"
               >
                 {isSubmitting ? <Loader2 size={14} className="animate-spin" /> : <CheckCircle2 size={14} />}
                 Approve & Publish
@@ -225,7 +225,7 @@ export function ProposalDetail({ proposal, onReview }: ProposalDetailProps) {
             <button
               onClick={() => showRejectConfirm ? handleAction('reject') : setShowRejectConfirm(true)}
               disabled={isSubmitting}
-              className="flex items-center gap-2 rounded-lg bg-rose-500/10 border border-rose-500/20 px-4 py-2 text-sm font-medium text-rose-500 hover:bg-rose-500/20 disabled:opacity-40 transition-colors"
+              className="flex items-center gap-2 rounded-lg bg-danger-dim border border-danger/20 px-4 py-2 text-sm font-medium text-danger hover:bg-danger/20 disabled:opacity-40 transition-colors"
             >
               <XCircle size={14} />
               {showRejectConfirm ? 'Confirm Reject' : 'Reject'}

frontend/src/components/flowpilot/SessionBriefing.tsx

@@ -38,7 +38,7 @@ export function SessionBriefing({
   const pkg = escalationPackage
 
   return (
-    <div className="card-flat border-l-2 border-l-amber-500 p-5 space-y-4">
+    <div className="card-flat border-l-2 border-l-warning p-5 space-y-4">
       <div>
         <h3 className="font-heading text-base font-semibold text-foreground">
           Escalation from {originalEngineerName || 'another engineer'}
@@ -60,7 +60,7 @@ export function SessionBriefing({
       {pkg.escalation_reason && (
         <div>
           <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-text-muted mb-1">Why escalated</h4>
-          <p className="text-sm text-amber-400">{pkg.escalation_reason}</p>
+          <p className="text-sm text-warning">{pkg.escalation_reason}</p>
         </div>
       )}
 
@@ -111,7 +111,7 @@ export function SessionBriefing({
           <ul className="space-y-1">
             {pkg.suggested_next_steps.map((s, i) => (
               <li key={i} className="text-sm text-foreground flex items-start gap-2">
-                <span className="text-emerald-400 mt-0.5">→</span>
+                <span className="text-success mt-0.5">→</span>
                 {s}
               </li>
             ))}

frontend/src/components/flowpilot/SessionDocView.tsx

@@ -55,38 +55,38 @@ export function SessionDocView({
             currentPushStatus === 'sent'
               ? 'border-emerald-400/20 bg-emerald-400/5'
               : currentPushStatus === 'pending_retry'
-                ? 'border-amber-400/20 bg-amber-400/5'
-                : 'border-rose-500/20 bg-rose-500/5'
+                ? 'border-warning/20 bg-warning/5'
+                : 'border-danger/20 bg-rose-500/5'
           }`}
         >
           {currentPushStatus === 'sent' && (
             <>
-              <CheckCircle2 size={16} className="text-emerald-400 shrink-0" />
-              <span className="text-sm text-emerald-400">
+              <CheckCircle2 size={16} className="text-success shrink-0" />
+              <span className="text-sm text-success">
                 Documentation pushed to ticket {ticketId ? `#${ticketId}` : ''}
               </span>
             </>
           )}
           {currentPushStatus === 'pending_retry' && (
             <>
-              <Loader2 size={16} className="text-amber-400 shrink-0 animate-spin" />
-              <span className="text-sm text-amber-400">
+              <Loader2 size={16} className="text-warning shrink-0 animate-spin" />
+              <span className="text-sm text-warning">
                 Documentation queued for push — will sync shortly
               </span>
             </>
           )}
           {currentPushStatus === 'failed' && (
             <>
-              <AlertTriangle size={16} className="text-rose-500 shrink-0" />
+              <AlertTriangle size={16} className="text-danger shrink-0" />
               <div className="flex-1">
-                <span className="text-sm text-rose-500">
+                <span className="text-sm text-danger">
                   Failed to push to ticket{currentPushError ? ` — ${currentPushError}` : ''}
                 </span>
               </div>
               <button
                 onClick={handleRetry}
                 disabled={retrying}
-                className="flex items-center gap-1.5 rounded-lg bg-rose-500/10 px-3 py-1.5 text-xs font-medium text-rose-500 hover:bg-rose-500/20 transition-colors disabled:opacity-50"
+                className="flex items-center gap-1.5 rounded-lg bg-danger-dim px-3 py-1.5 text-xs font-medium text-danger hover:bg-danger/20 transition-colors disabled:opacity-50"
               >
                 {retrying ? <Loader2 size={12} className="animate-spin" /> : <RefreshCw size={12} />}
                 Retry
@@ -98,9 +98,9 @@ export function SessionDocView({
 
       {/* Member mapping warning */}
       {memberMappingWarning && (
-        <div className="rounded-xl border border-blue-400/20 bg-blue-400/5 px-4 py-3 flex items-start gap-3">
-          <Info size={16} className="text-blue-400 shrink-0 mt-0.5" />
-          <span className="text-sm text-blue-400">
+        <div className="rounded-xl border border-accent/20 bg-accent/5 px-4 py-3 flex items-start gap-3">
+          <Info size={16} className="text-accent shrink-0 mt-0.5" />
+          <span className="text-sm text-accent">
             Time entry was not created — {memberMappingWarning} Session timing is included in the ticket note.
           </span>
         </div>
@@ -137,12 +137,12 @@ export function SessionDocView({
 
       {/* Outcome */}
       {(documentation.resolution_summary || documentation.escalation_reason) && (
-        <div className={`card-flat p-4 border-l-2 ${documentation.resolution_summary ? 'border-l-emerald-500' : 'border-l-amber-500'}`}>
+        <div className={`card-flat p-4 border-l-2 ${documentation.resolution_summary ? 'border-l-success' : 'border-l-warning'}`}>
           <div className="flex items-center gap-2 mb-1">
             {documentation.resolution_summary ? (
-              <CheckCircle2 size={14} className="text-emerald-400" />
+              <CheckCircle2 size={14} className="text-success" />
             ) : (
-              <ArrowUpRight size={14} className="text-amber-400" />
+              <ArrowUpRight size={14} className="text-warning" />
             )}
             <span className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-muted-foreground">
               {documentation.resolution_summary ? 'Resolved' : 'Escalated'}
@@ -202,8 +202,8 @@ export function SessionDocView({
                   size={20}
                   className={
                     (currentRating ?? 0) >= star
-                      ? 'fill-amber-400 text-amber-400'
-                      : 'text-muted-foreground hover:text-amber-400'
+                      ? 'fill-warning text-warning'
+                      : 'text-muted-foreground hover:text-warning'
                   }
                 />
               </button>

frontend/src/components/flowpilot/SimilarSessions.tsx

@@ -80,9 +80,9 @@ export function SimilarSessions({ sessionId }: SimilarSessionsProps) {
               className={cn(
                 'text-[0.5rem] font-sans text-xs uppercase',
                 session.status === 'resolved'
-                  ? 'text-emerald-400'
+                  ? 'text-success'
                   : session.status === 'escalated'
-                    ? 'text-amber-400'
+                    ? 'text-warning'
                     : 'text-muted-foreground'
               )}
             >

frontend/src/components/flowpilot/StatusUpdateModal.tsx

@@ -168,7 +168,7 @@ export function StatusUpdateModal({ open, onClose, onGenerate, context = 'status
           {/* Step 3: Generating */}
           {step === 'generating' && (
             <div className="flex flex-col items-center justify-center py-8 gap-3">
-              <Loader2 size={24} className="animate-spin text-blue-400" />
+              <Loader2 size={24} className="animate-spin text-accent" />
               <p className="text-sm text-muted-foreground">
                 Generating {audience === 'email_draft' ? 'email draft' : audience === 'client_update' ? 'client update' : 'ticket notes'}...
               </p>
@@ -180,7 +180,7 @@ export function StatusUpdateModal({ open, onClose, onGenerate, context = 'status
             <div className="space-y-4">
               {/* Meta badges */}
               <div className="flex items-center gap-2 flex-wrap">
-                <span className="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium bg-blue-500/10 text-blue-400 border border-blue-500/20">
+                <span className="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium bg-accent-dim text-accent border border-accent/20">
                   {AUDIENCES.find(a => a.value === result.audience)?.label}
                 </span>
                 <span className="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium bg-[rgba(255,255,255,0.06)] text-muted-foreground border border-[rgba(255,255,255,0.08)]">
@@ -208,8 +208,8 @@ export function StatusUpdateModal({ open, onClose, onGenerate, context = 'status
                   className={cn(
                     'flex items-center gap-2 rounded-lg px-4 py-2 min-h-[44px] text-sm font-medium transition-colors',
                     copied
-                      ? 'bg-emerald-500/20 border border-emerald-500/30 text-emerald-400'
-                      : 'bg-blue-500/10 border border-blue-500/20 text-blue-400 hover:bg-blue-500/20'
+                      ? 'bg-success/20 border border-success/30 text-success'
+                      : 'bg-accent-dim border border-accent/20 text-accent hover:bg-accent/20'
                   )}
                 >
                   {copied ? <Check size={16} /> : <Copy size={16} />}