From 4f7ab9c6064ae01498b1dd667e33fbd675fa741f Mon Sep 17 00:00:00 2001
From: "IGNY8 VPS (Salman)" <vps@igny8.com>
Date: Mon, 29 Dec 2025 19:52:51 +0000
Subject: [PATCH] stlyes fixes

---
 .../src/components/Automation/ActivityLog.tsx |    2 +-
 .../Automation/CurrentProcessingCard.old.tsx  |   16 +-
 .../Automation/CurrentProcessingCard.tsx      |   48 +-
 .../Automation/CurrentProcessingCardV2.tsx    |   24 +-
 .../Automation/GlobalProgressBar.tsx          |   24 +-
 .../src/components/Automation/RunHistory.tsx  |    8 +-
 .../src/components/Automation/StageCard.tsx   |    8 +-
 .../src/components/auth/ProtectedRoute.tsx    |    6 +-
 frontend/src/components/auth/SignInForm.tsx   |   38 +-
 frontend/src/components/auth/SignUpForm.tsx   |    2 +-
 .../components/auth/SignUpFormEnhanced.tsx    |    6 +-
 .../components/auth/SignUpFormSimplified.tsx  |    4 +-
 .../src/components/auth/SignUpFormUnified.tsx |   12 +-
 .../billing/BillingBalancePanel.tsx           |    4 +-
 .../components/billing/BillingFormStep.tsx    |    2 +-
 .../billing/BillingRecentTransactions.tsx     |    2 +-
 .../components/billing/BillingUsagePanel.tsx  |    6 +-
 .../billing/CreditCostBreakdownPanel.tsx      |    4 +-
 .../billing/PaymentConfirmationModal.tsx      |    6 +-
 .../src/components/billing/PaymentHistory.tsx |   14 +-
 .../billing/PaymentMethodSelect.tsx           |   10 +-
 .../billing/PendingPaymentBanner.tsx          |   42 +-
 .../components/billing/UsageLimitsPanel.tsx   |   26 +-
 .../src/components/charts/bar/BarChartOne.tsx |    2 +-
 .../components/charts/line/LineChartOne.tsx   |    4 +-
 .../src/components/common/BulkExportModal.tsx |    4 +-
 .../common/BulkStatusUpdateModal.tsx          |    4 +-
 .../components/common/ContentImageCell.tsx    |    6 +-
 .../components/common/GlobalErrorDisplay.tsx  |   16 +-
 .../components/common/ImageGenerationCard.tsx |   22 +-
 .../src/components/common/ImageQueueModal.tsx |   20 +-
 .../src/components/common/ImageResultCard.tsx |    4 +-
 .../src/components/common/IntegrationCard.tsx |    6 +-
 frontend/src/components/common/PageHeader.tsx |   22 +-
 .../src/components/common/ProgressModal.tsx   |   12 +-
 .../src/components/common/SectorSelector.tsx  |    8 +-
 .../common/SingleRecordStatusUpdateModal.tsx  |    4 +-
 frontend/src/components/common/SiteCard.tsx   |    4 +-
 .../src/components/common/ToggleTableRow.tsx  |    2 +-
 .../src/components/common/ValidationCard.tsx  |    8 +-
 .../components/common/WorkflowInsights.tsx    |   26 +-
 .../src/components/content/ContentFilter.tsx  |    6 +-
 .../src/components/content/SourceBadge.tsx    |    4 +-
 .../components/content/SyncStatusBadge.tsx    |    6 +-
 .../dashboard/AIOperationsWidget.tsx          |   15 +-
 .../dashboard/AutomationStatusWidget.tsx      |    8 +-
 .../dashboard/ContentVelocityWidget.tsx       |    6 +-
 .../dashboard/CreditAvailabilityWidget.tsx    |   14 +-
 .../dashboard/CreditBalanceWidget.tsx         |    4 +-
 .../dashboard/EnhancedMetricCard.tsx          |   20 +-
 .../dashboard/NeedsAttentionBar.tsx           |   52 +-
 .../dashboard/OperationsCostsWidget.tsx       |    6 +-
 .../dashboard/QuickActionsWidget.tsx          |   14 +-
 .../dashboard/RecentActivityWidget.tsx        |   21 +-
 .../components/dashboard/SiteConfigWidget.tsx |   18 +-
 .../dashboard/WorkflowPipelineWidget.tsx      |   12 +-
 .../src/components/ecommerce/CountryMap.tsx   |   20 +-
 .../ecommerce/MonthlySalesChart.tsx           |    2 +-
 .../components/ecommerce/MonthlyTarget.tsx    |    8 +-
 .../components/ecommerce/StatisticsChart.tsx  |    4 +-
 .../header/NotificationDropdown.tsx           |    6 +-
 .../header/NotificationDropdownNew.tsx        |    6 +-
 .../src/components/header/SiteSwitcher.tsx    |    4 +-
 .../integration/IntegrationStatus.tsx         |    8 +-
 .../src/components/linker/LinkResults.tsx     |   16 +-
 .../components/onboarding/WorkflowGuide.tsx   |   24 +-
 .../optimizer/OptimizationScores.tsx          |   20 +-
 .../components/optimizer/ScoreComparison.tsx  |   12 +-
 .../components/sites/SiteProgressWidget.tsx   |   46 +-
 .../components/sites/SiteSetupChecklist.tsx   |   14 +-
 .../src/components/sites/TemplateLibrary.tsx  |    2 +-
 .../sites/WordPressIntegrationCard.tsx        |   26 +-
 .../sites/WordPressIntegrationForm.tsx        |    8 +-
 .../sites/WordPressIntegrationModal.tsx       |   10 +-
 frontend/src/components/tasks/KanbanBoard.tsx |    6 +-
 frontend/src/components/tasks/TaskList.tsx    |    6 +-
 frontend/src/components/ui/badge/Badge.tsx    |   30 +-
 frontend/src/components/ui/button/Button.tsx  |    2 +-
 .../ui/pricing-table/PricingTable.tsx         |    5 +-
 .../src/components/ui/pricing-table/index.tsx |   14 +-
 frontend/src/config/import-export.config.tsx  |    2 +-
 frontend/src/config/pages/approved.config.tsx |    4 +-
 frontend/src/config/pages/content.config.tsx  |    8 +-
 frontend/src/config/pages/review.config.tsx   |    4 +-
 .../src/config/pages/table-actions.config.tsx |    6 +-
 frontend/src/index.css                        | 1076 ++---------------
 frontend/src/layout/AppHeader.tsx             |   22 +-
 frontend/src/layout/SidebarWidget.tsx         |    2 +-
 .../src/marketing/components/CTASection.tsx   |    6 +-
 .../src/marketing/components/FeatureGrid.tsx  |    8 +-
 .../src/marketing/components/HeroSection.tsx  |    4 +-
 .../src/marketing/components/LoadingPage.tsx  |    2 +-
 .../src/marketing/components/LogoCloud.tsx    |    2 +-
 .../src/marketing/components/MetricsBar.tsx   |    4 +-
 .../marketing/components/SectionHeading.tsx   |    4 +-
 .../components/TestimonialSlider.tsx          |   12 +-
 .../marketing/components/WorkflowSteps.tsx    |    6 +-
 .../src/marketing/layout/MarketingLayout.tsx  |   32 +-
 frontend/src/marketing/pages/CaseStudies.tsx  |   48 +-
 frontend/src/marketing/pages/Contact.tsx      |   48 +-
 frontend/src/marketing/pages/Home.tsx         |   68 +-
 frontend/src/marketing/pages/Partners.tsx     |   40 +-
 frontend/src/marketing/pages/Pricing.tsx      |  120 +-
 frontend/src/marketing/pages/Product.tsx      |   68 +-
 frontend/src/marketing/pages/Resources.tsx    |   98 +-
 frontend/src/marketing/pages/Solutions.tsx    |   56 +-
 frontend/src/marketing/pages/Tour.tsx         |   22 +-
 frontend/src/marketing/pages/Waitlist.tsx     |   32 +-
 frontend/src/pages/AuthPages/SignUp.tsx       |    2 +-
 .../src/pages/Automation/AutomationPage.tsx   |  138 +--
 .../pages/Automation/AutomationPage_old.tsx   |   14 +-
 frontend/src/pages/Billing/Credits.tsx        |    4 +-
 frontend/src/pages/Billing/Transactions.tsx   |    4 +-
 frontend/src/pages/Billing/Usage.tsx          |    4 +-
 frontend/src/pages/Components.tsx             |    2 +-
 frontend/src/pages/Help/Help.tsx              |   66 +-
 frontend/src/pages/Linker/ContentList.tsx     |    6 +-
 frontend/src/pages/Linker/Dashboard.tsx       |    6 +-
 .../src/pages/Optimizer/AnalysisPreview.tsx   |   50 +-
 .../src/pages/Optimizer/ContentSelector.tsx   |   12 +-
 frontend/src/pages/Optimizer/Dashboard.tsx    |    6 +-
 frontend/src/pages/Payment.tsx                |   34 +-
 frontend/src/pages/Planner/Dashboard.tsx      |  104 +-
 frontend/src/pages/Reference/Industries.tsx   |    6 +-
 .../src/pages/Settings/CreditsAndBilling.tsx  |    4 +-
 frontend/src/pages/Settings/Integration.tsx   |    2 +-
 frontend/src/pages/Settings/Publishing.tsx    |    8 +-
 frontend/src/pages/Settings/Sites.tsx         |    4 +-
 frontend/src/pages/Settings/Status.tsx        |   26 +-
 .../Settings/WordPressIntegrationDebug.tsx    |   46 +-
 .../pages/Setup/IndustriesSectorsKeywords.tsx |   12 +-
 frontend/src/pages/Sites/Content.tsx          |    2 +-
 frontend/src/pages/Sites/Dashboard.tsx        |   40 +-
 frontend/src/pages/Sites/DeploymentPanel.tsx  |    2 +-
 frontend/src/pages/Sites/Editor.tsx           |    2 +-
 frontend/src/pages/Sites/List.tsx             |   10 +-
 frontend/src/pages/Sites/PageManager.tsx      |    8 +-
 frontend/src/pages/Sites/PostEditor.tsx       |   48 +-
 frontend/src/pages/Sites/Settings.tsx         |   14 +-
 frontend/src/pages/Sites/SyncDashboard.tsx    |   40 +-
 frontend/src/pages/Thinker/Dashboard.tsx      |   66 +-
 frontend/src/pages/Writer/Dashboard.tsx       |  104 +-
 .../src/pages/account/AccountSettingsPage.tsx |    8 +-
 .../src/pages/account/ContentSettingsPage.tsx |   14 +-
 .../src/pages/account/NotificationsPage.tsx   |   18 +-
 .../src/pages/account/PlansAndBillingPage.tsx |   22 +-
 .../src/pages/account/PurchaseCreditsPage.tsx |   18 +-
 .../src/pages/account/UsageAnalyticsPage.tsx  |    8 +-
 .../pages/settings/ProfileSettingsPage.tsx    |   18 +-
 frontend/src/store/notificationStore.ts       |   24 +-
 frontend/src/styles/cms/components.ts         |   66 +-
 frontend/src/styles/cms/presets.ts            |   72 +-
 frontend/src/styles/tokens.css                |   12 +-
 .../src/templates/ContentViewTemplate.tsx     |   82 +-
 frontend/src/templates/TablePageTemplate.tsx  |   10 +-
 155 files changed, 1576 insertions(+), 2489 deletions(-)

diff --git a/frontend/src/components/Automation/ActivityLog.tsx b/frontend/src/components/Automation/ActivityLog.tsx
index d324cd6c..a3dc80e7 100644
--- a/frontend/src/components/Automation/ActivityLog.tsx
+++ b/frontend/src/components/Automation/ActivityLog.tsx
@@ -51,7 +51,7 @@ const ActivityLog: React.FC<ActivityLogProps> = ({ runId }) => {
           </select>
         </div>
       </div>
-      <div className="bg-gray-900 dark:bg-gray-950 text-green-400 p-4 rounded-lg font-mono text-xs overflow-auto max-h-96 border border-gray-700">
+      <div className="bg-gray-900 dark:bg-gray-950 text-success-400 p-4 rounded-lg font-mono text-xs overflow-auto max-h-96 border border-gray-700">
         <pre className="whitespace-pre-wrap">{logs || 'No logs available'}</pre>
       </div>
     </ComponentCard>
diff --git a/frontend/src/components/Automation/CurrentProcessingCard.old.tsx b/frontend/src/components/Automation/CurrentProcessingCard.old.tsx
index 9e0aeebd..fea9834d 100644
--- a/frontend/src/components/Automation/CurrentProcessingCard.old.tsx
+++ b/frontend/src/components/Automation/CurrentProcessingCard.old.tsx
@@ -58,8 +58,8 @@ const CurrentProcessingCard: React.FC<CurrentProcessingCardProps> = ({
 
   if (error) {
     return (
-      <div className="bg-red-50 dark:bg-red-900/20 border-2 border-red-500 rounded-lg p-4 mb-6">
-        <p className="text-red-700 dark:text-red-300 text-sm">{error}</p>
+      <div className="bg-error-50 dark:bg-error-900/20 border-2 border-error-500 rounded-lg p-4 mb-6">
+        <p className="text-error-700 dark:text-error-300 text-sm">{error}</p>
       </div>
     );
   }
@@ -71,13 +71,13 @@ const CurrentProcessingCard: React.FC<CurrentProcessingCardProps> = ({
   const percentage = processingState.percentage;
 
   return (
-    <div className="bg-blue-50 dark:bg-blue-900/20 border-2 border-blue-500 rounded-lg p-6 mb-6">
+    <div className="bg-brand-50 dark:bg-brand-900/20 border-2 border-brand-500 rounded-lg p-6 mb-6">
       {/* Header */}
       <div className="flex items-center justify-between mb-4">
         <div className="flex items-center gap-3">
           <div className="animate-pulse">
             <svg
-              className="w-8 h-8 text-blue-600 dark:text-blue-400"
+              className="w-8 h-8 text-brand-600 dark:text-brand-400"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -96,14 +96,14 @@ const CurrentProcessingCard: React.FC<CurrentProcessingCardProps> = ({
             </h2>
             <p className="text-sm text-gray-600 dark:text-gray-400">
               Stage {currentStage}: {processingState.stage_name}
-              <span className="ml-2 px-2 py-0.5 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded text-xs">
+              <span className="ml-2 px-2 py-0.5 bg-brand-100 dark:bg-brand-900 text-brand-700 dark:text-brand-300 rounded text-xs">
                 {processingState.stage_type}
               </span>
             </p>
           </div>
         </div>
         <div className="text-right">
-          <div className="text-4xl font-bold text-blue-600 dark:text-blue-400">
+          <div className="text-4xl font-bold text-brand-600 dark:text-brand-400">
             {percentage}%
           </div>
           <div className="text-sm text-gray-600 dark:text-gray-400">
@@ -116,7 +116,7 @@ const CurrentProcessingCard: React.FC<CurrentProcessingCardProps> = ({
       <div className="mb-6">
         <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3">
           <div
-            className="bg-blue-600 dark:bg-blue-500 h-3 rounded-full transition-all duration-500"
+            className="bg-brand-600 dark:bg-brand-500 h-3 rounded-full transition-all duration-500"
             style={{ width: `${Math.min(percentage, 100)}%` }}
           />
         </div>
@@ -133,7 +133,7 @@ const CurrentProcessingCard: React.FC<CurrentProcessingCardProps> = ({
             {processingState.currently_processing.length > 0 ? (
               processingState.currently_processing.map((item, idx) => (
                 <div key={idx} className="flex items-start gap-2 text-sm">
-                  <span className="text-blue-600 dark:text-blue-400 mt-1">•</span>
+                  <span className="text-brand-600 dark:text-brand-400 mt-1">•</span>
                   <span className="text-gray-800 dark:text-gray-200 font-medium line-clamp-2">
                     {item.title}
                   </span>
diff --git a/frontend/src/components/Automation/CurrentProcessingCard.tsx b/frontend/src/components/Automation/CurrentProcessingCard.tsx
index b121490a..29c229db 100644
--- a/frontend/src/components/Automation/CurrentProcessingCard.tsx
+++ b/frontend/src/components/Automation/CurrentProcessingCard.tsx
@@ -240,12 +240,12 @@ const CurrentProcessingCard: React.FC<CurrentProcessingCardProps> = ({
 
   if (error) {
     return (
-      <div className="bg-red-50 dark:bg-red-900/20 border-2 border-red-500 rounded-lg p-4 mb-6">
+      <div className="bg-error-50 dark:bg-error-900/20 border-2 border-error-500 rounded-lg p-4 mb-6">
         <div className="flex items-center justify-between">
-          <p className="text-red-700 dark:text-red-300 text-sm">{error}</p>
+          <p className="text-error-700 dark:text-error-300 text-sm">{error}</p>
           <button
             onClick={onClose}
-            className="text-red-500 hover:text-red-700 dark:hover:text-red-300"
+            className="text-error-500 hover:text-error-700 dark:hover:text-error-300"
           >
             <XMarkIcon className="w-5 h-5" />
           </button>
@@ -321,21 +321,21 @@ const CurrentProcessingCard: React.FC<CurrentProcessingCardProps> = ({
 
   // Choose stage accent color (simple map matching AutomationPage STAGE_CONFIG)
   const stageColors = [
-    'from-blue-500 to-blue-600',
+    'from-brand-500 to-brand-600',
     'from-purple-500 to-purple-600',
-    'from-indigo-500 to-indigo-600',
-    'from-green-500 to-green-600',
-    'from-amber-500 to-amber-600',
-    'from-pink-500 to-pink-600',
-    'from-teal-500 to-teal-600',
+    'from-purple-500 to-purple-600',
+    'from-success-500 to-success-600',
+    'from-warning-500 to-warning-600',
+    'from-purple-500 to-purple-600',
+    'from-success-500 to-success-600',
   ];
-  const stageColorClass = stageColors[(currentRun.current_stage || 1) - 1] || 'from-blue-500 to-blue-600';
+  const stageColorClass = stageColors[(currentRun.current_stage || 1) - 1] || 'from-brand-500 to-brand-600';
 
   return (
     <div className={`border-2 rounded-lg p-6 mb-6 ${
       isPaused 
-        ? 'bg-yellow-50 dark:bg-yellow-900/20 border-yellow-500' 
-        : 'bg-blue-50 dark:bg-blue-900/20 border-blue-500'
+        ? 'bg-warning-50 dark:bg-warning-900/20 border-warning-500' 
+        : 'bg-brand-50 dark:bg-brand-900/20 border-brand-500'
     }`}>
       {/* Header Row with Main Info and Close */}
       <div className="flex items-start justify-between mb-4">
@@ -344,9 +344,9 @@ const CurrentProcessingCard: React.FC<CurrentProcessingCardProps> = ({
           <div className="flex items-center gap-3 mb-4">
             <div className={isPaused ? '' : 'animate-pulse'}>
               {isPaused ? (
-                <PauseIcon className="w-8 h-8 text-yellow-600 dark:text-yellow-400" />
+                <PauseIcon className="w-8 h-8 text-warning-600 dark:text-warning-400" />
               ) : (
-                <BoltIcon className="w-8 h-8 text-blue-600 dark:text-blue-400" />
+                <BoltIcon className="w-8 h-8 text-brand-600 dark:text-brand-400" />
               )}
             </div>
             <div className="flex-1">
@@ -361,8 +361,8 @@ const CurrentProcessingCard: React.FC<CurrentProcessingCardProps> = ({
                     Stage {currentRun.current_stage}: {displayState.stage_name}
                     <span className={`ml-2 px-2 py-0.5 rounded text-xs ${
                       isPaused
-                        ? 'bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-300'
-                        : 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300'
+                        ? 'bg-warning-100 dark:bg-warning-900 text-warning-700 dark:text-warning-300'
+                        : 'bg-brand-100 dark:bg-brand-900 text-brand-700 dark:text-brand-300'
                     }`}>
                       {displayState.stage_type}
                     </span>
@@ -396,7 +396,7 @@ const CurrentProcessingCard: React.FC<CurrentProcessingCardProps> = ({
             <>
               <div className="mb-4">
                 <div className="flex items-center justify-between mb-2">
-                  <div className="text-3xl font-bold text-blue-600 dark:text-blue-400">
+                  <div className="text-3xl font-bold text-brand-600 dark:text-brand-400">
                     {percentage}%
                   </div>
                     <div className="text-sm text-gray-600 dark:text-gray-400">
@@ -408,8 +408,8 @@ const CurrentProcessingCard: React.FC<CurrentProcessingCardProps> = ({
                   <div
                     className={`h-3 rounded-full transition-all duration-500 ${
                       isPaused
-                        ? 'bg-yellow-600 dark:bg-yellow-500'
-                        : 'bg-blue-600 dark:bg-blue-500'
+                        ? 'bg-warning-600 dark:bg-warning-500'
+                        : 'bg-brand-600 dark:bg-brand-500'
                     }`}
                     style={{ width: `${Math.min(percentage, 100)}%` }}
                   />
@@ -427,7 +427,7 @@ const CurrentProcessingCard: React.FC<CurrentProcessingCardProps> = ({
                     {((displayState.currently_processing && displayState.currently_processing.length > 0) ? displayState.currently_processing : fetchedCurrently).length > 0 ? (
                       ((displayState.currently_processing && displayState.currently_processing.length > 0) ? displayState.currently_processing : fetchedCurrently).map((item, idx) => (
                         <div key={idx} className="flex items-start gap-2 text-sm">
-                          <span className={isPaused ? 'text-yellow-600 dark:text-yellow-400 mt-1' : 'text-blue-600 dark:text-blue-400 mt-1'}>•</span>
+                          <span className={isPaused ? 'text-warning-600 dark:text-warning-400 mt-1' : 'text-brand-600 dark:text-brand-400 mt-1'}>•</span>
                           <span className="text-gray-800 dark:text-gray-200 font-medium line-clamp-2">
                             {item.title}
                           </span>
@@ -536,10 +536,10 @@ const CurrentProcessingCard: React.FC<CurrentProcessingCardProps> = ({
             <div className="bg-white dark:bg-gray-800 rounded-lg p-3 border border-gray-200 dark:border-gray-700">
               <div className="flex items-center justify-between mb-0">
                 <div className="flex items-center gap-2">
-                  <BoltIcon className="w-4 h-4 text-amber-500" />
+                  <BoltIcon className="w-4 h-4 text-warning-500" />
                   <div className="text-xs text-gray-500 dark:text-gray-400 uppercase font-semibold">Credits Used</div>
                 </div>
-                <div className="text-sm font-bold text-amber-600 dark:text-amber-400">{currentRun.total_credits_used}</div>
+                <div className="text-sm font-bold text-warning-600 dark:text-warning-400">{currentRun.total_credits_used}</div>
               </div>
             </div>
 
@@ -555,7 +555,7 @@ const CurrentProcessingCard: React.FC<CurrentProcessingCardProps> = ({
             <div className="bg-white dark:bg-gray-800 rounded-lg p-3 border border-gray-200 dark:border-gray-700">
               <div className="flex items-center justify-between mb-0">
                 <div className="text-xs text-gray-500 dark:text-gray-400 uppercase font-semibold">Status</div>
-                <div className={`text-sm font-semibold ${isPaused ? 'text-yellow-600 dark:text-yellow-400' : 'text-blue-600 dark:text-blue-400'}`}>
+                <div className={`text-sm font-semibold ${isPaused ? 'text-warning-600 dark:text-warning-400' : 'text-brand-600 dark:text-brand-400'}`}>
                   {isPaused ? 'Paused' : 'Running'}
                 </div>
               </div>
@@ -567,7 +567,7 @@ const CurrentProcessingCard: React.FC<CurrentProcessingCardProps> = ({
           <button
             type="button"
             onClick={() => setShowDebugTable(!showDebugTable)}
-            className="text-xs text-slate-600 hover:underline"
+            className="text-xs text-gray-600 hover:underline"
           >
             {showDebugTable ? 'Hide' : 'Show'} debug table
           </button>
diff --git a/frontend/src/components/Automation/CurrentProcessingCardV2.tsx b/frontend/src/components/Automation/CurrentProcessingCardV2.tsx
index 5e62b578..fdc5c98a 100644
--- a/frontend/src/components/Automation/CurrentProcessingCardV2.tsx
+++ b/frontend/src/components/Automation/CurrentProcessingCardV2.tsx
@@ -193,16 +193,16 @@ const CurrentProcessingCard: React.FC<CurrentProcessingCardProps> = ({
   return (
     <div className={`rounded-xl p-5 mb-6 border-2 transition-all ${
       isPaused 
-        ? 'bg-gradient-to-r from-amber-50 to-amber-100 dark:from-amber-900/20 dark:to-amber-800/20 border-amber-400' 
-        : 'bg-gradient-to-r from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 border-blue-400'
+        ? 'bg-gradient-to-r from-warning-50 to-warning-100 dark:from-warning-900/20 dark:to-warning-800/20 border-warning-400' 
+        : 'bg-gradient-to-r from-brand-50 to-brand-100 dark:from-brand-900/20 dark:to-brand-800/20 border-brand-400'
     }`}>
       {/* Header Row */}
       <div className="flex items-start justify-between mb-4">
         <div className="flex items-center gap-3">
           <div className={`size-10 rounded-lg flex items-center justify-center shadow-md ${
             isPaused 
-              ? 'bg-gradient-to-br from-amber-500 to-amber-600'
-              : 'bg-gradient-to-br from-blue-500 to-blue-600'
+              ? 'bg-gradient-to-br from-warning-500 to-warning-600'
+              : 'bg-gradient-to-br from-brand-500 to-brand-600'
           }`}>
             {isPaused ? (
               <PauseIcon className="w-5 h-5 text-white" />
@@ -217,7 +217,7 @@ const CurrentProcessingCard: React.FC<CurrentProcessingCardProps> = ({
             <div className="text-sm text-gray-600 dark:text-gray-400">
               Stage {currentRun.current_stage}: {stageName}
               <span className={`ml-2 px-1.5 py-0.5 rounded text-xs ${
-                isPaused ? 'bg-amber-200 text-amber-800' : 'bg-blue-200 text-blue-800'
+                isPaused ? 'bg-warning-200 text-warning-800' : 'bg-brand-200 text-brand-800'
               }`}>
                 {stageOverview?.type || 'AI'}
               </span>
@@ -241,7 +241,7 @@ const CurrentProcessingCard: React.FC<CurrentProcessingCardProps> = ({
           {/* Progress Text */}
           <div className="flex items-baseline justify-between mb-2">
             <div className="flex items-baseline gap-3">
-              <span className={`text-4xl font-bold ${isPaused ? 'text-amber-600' : 'text-blue-600'}`}>
+              <span className={`text-4xl font-bold ${isPaused ? 'text-warning-600' : 'text-brand-600'}`}>
                 {displayPercent}%
               </span>
               <span className="text-sm text-gray-500">
@@ -258,8 +258,8 @@ const CurrentProcessingCard: React.FC<CurrentProcessingCardProps> = ({
             <div
               className={`h-3 rounded-full transition-all duration-300 ${
                 isPaused 
-                  ? 'bg-gradient-to-r from-amber-400 to-amber-600'
-                  : 'bg-gradient-to-r from-blue-400 to-blue-600'
+                  ? 'bg-gradient-to-r from-warning-400 to-warning-600'
+                  : 'bg-gradient-to-r from-brand-400 to-brand-600'
               } ${!isPaused && displayPercent < 100 ? 'animate-pulse' : ''}`}
               style={{ width: `${Math.min(displayPercent, 100)}%` }}
             />
@@ -292,7 +292,7 @@ const CurrentProcessingCard: React.FC<CurrentProcessingCardProps> = ({
             <button
               onClick={handleCancel}
               disabled={isCancelling}
-              className="text-sm text-gray-500 hover:text-red-600 transition-colors"
+              className="text-sm text-gray-500 hover:text-error-600 transition-colors"
             >
               <XMarkIcon className="w-4 h-4 inline mr-1" />
               {isCancelling ? 'Cancelling...' : 'Cancel'}
@@ -312,10 +312,10 @@ const CurrentProcessingCard: React.FC<CurrentProcessingCardProps> = ({
           
           <div className="bg-white dark:bg-gray-800 rounded-lg px-3 py-2 border border-gray-200 dark:border-gray-700 flex items-center justify-between">
             <div className="flex items-center gap-1.5">
-              <BoltIcon className="w-4 h-4 text-amber-500" />
+              <BoltIcon className="w-4 h-4 text-warning-500" />
               <span className="text-xs text-gray-500 uppercase">Credits</span>
             </div>
-            <span className="text-sm font-bold text-amber-600">{currentRun.total_credits_used}</span>
+            <span className="text-sm font-bold text-warning-600">{currentRun.total_credits_used}</span>
           </div>
           
           <div className="bg-white dark:bg-gray-800 rounded-lg px-3 py-2 border border-gray-200 dark:border-gray-700 flex items-center justify-between">
@@ -325,7 +325,7 @@ const CurrentProcessingCard: React.FC<CurrentProcessingCardProps> = ({
           
           <div className="bg-white dark:bg-gray-800 rounded-lg px-3 py-2 border border-gray-200 dark:border-gray-700 flex items-center justify-between">
             <span className="text-xs text-gray-500 uppercase">Status</span>
-            <span className={`text-sm font-bold ${isPaused ? 'text-amber-600' : 'text-green-600'}`}>
+            <span className={`text-sm font-bold ${isPaused ? 'text-warning-600' : 'text-success-600'}`}>
               {isPaused ? 'Paused' : 'Running'}
             </span>
           </div>
diff --git a/frontend/src/components/Automation/GlobalProgressBar.tsx b/frontend/src/components/Automation/GlobalProgressBar.tsx
index 42171d8e..cae9a36b 100644
--- a/frontend/src/components/Automation/GlobalProgressBar.tsx
+++ b/frontend/src/components/Automation/GlobalProgressBar.tsx
@@ -9,13 +9,13 @@ import { BoltIcon, CheckCircleIcon, PauseIcon } from '../../icons';
 
 // Stage colors matching AutomationPage STAGE_CONFIG
 const STAGE_COLORS = [
-  'from-blue-500 to-blue-600',     // Stage 1: Keywords → Clusters
+  'from-brand-500 to-brand-600',     // Stage 1: Keywords → Clusters
   'from-purple-500 to-purple-600', // Stage 2: Clusters → Ideas
-  'from-indigo-500 to-indigo-600', // Stage 3: Ideas → Tasks
-  'from-green-500 to-green-600',   // Stage 4: Tasks → Content
-  'from-amber-500 to-amber-600',   // Stage 5: Content → Image Prompts
-  'from-pink-500 to-pink-600',     // Stage 6: Image Prompts → Images
-  'from-teal-500 to-teal-600',     // Stage 7: Manual Review Gate
+  'from-purple-500 to-purple-600', // Stage 3: Ideas → Tasks
+  'from-success-500 to-success-600',   // Stage 4: Tasks → Content
+  'from-warning-500 to-warning-600',   // Stage 5: Content → Image Prompts
+  'from-purple-500 to-purple-600',     // Stage 6: Image Prompts → Images
+  'from-success-500 to-success-600',     // Stage 7: Manual Review Gate
 ];
 
 const STAGE_NAMES = [
@@ -141,7 +141,7 @@ const GlobalProgressBar: React.FC<GlobalProgressBarProps> = ({
     <div className={`
       rounded-xl p-4 mb-6 border-2 transition-all
       ${isPaused 
-        ? 'bg-gradient-to-r from-amber-50 to-amber-100 dark:from-amber-900/20 dark:to-amber-800/20 border-amber-300 dark:border-amber-700'
+        ? 'bg-gradient-to-r from-warning-50 to-warning-100 dark:from-warning-900/20 dark:to-warning-800/20 border-warning-300 dark:border-warning-700'
         : 'bg-gradient-to-r from-brand-50 to-brand-100 dark:from-brand-900/20 dark:to-brand-800/20 border-brand-300 dark:border-brand-700'
       }
     `}>
@@ -151,7 +151,7 @@ const GlobalProgressBar: React.FC<GlobalProgressBarProps> = ({
           <div className={`
             size-10 rounded-lg flex items-center justify-center shadow-md
             ${isPaused 
-              ? 'bg-gradient-to-br from-amber-500 to-amber-600'
+              ? 'bg-gradient-to-br from-warning-500 to-warning-600'
               : 'bg-gradient-to-br from-brand-500 to-brand-600'
             }
           `}>
@@ -164,7 +164,7 @@ const GlobalProgressBar: React.FC<GlobalProgressBarProps> = ({
             )}
           </div>
           <div>
-            <div className={`font-bold ${isPaused ? 'text-amber-800 dark:text-amber-200' : 'text-brand-800 dark:text-brand-200'}`}>
+            <div className={`font-bold ${isPaused ? 'text-warning-800 dark:text-warning-200' : 'text-brand-800 dark:text-brand-200'}`}>
               {isPaused ? 'Pipeline Paused' : 'Full Pipeline Progress'}
             </div>
             <div className="text-xs text-gray-600 dark:text-gray-400">
@@ -172,7 +172,7 @@ const GlobalProgressBar: React.FC<GlobalProgressBarProps> = ({
             </div>
           </div>
         </div>
-        <div className={`text-3xl font-bold ${isPaused ? 'text-amber-600 dark:text-amber-400' : 'text-brand-600 dark:text-brand-400'}`}>
+        <div className={`text-3xl font-bold ${isPaused ? 'text-warning-600 dark:text-warning-400' : 'text-brand-600 dark:text-brand-400'}`}>
           {percentage}%
         </div>
       </div>
@@ -216,8 +216,8 @@ const GlobalProgressBar: React.FC<GlobalProgressBarProps> = ({
               <span 
                 key={stageNum}
                 className={`
-                  ${status === 'completed' ? 'text-green-600 dark:text-green-400 font-medium' : ''}
-                  ${status === 'active' ? `${isPaused ? 'text-amber-600 dark:text-amber-400' : 'text-brand-600 dark:text-brand-400'} font-bold` : ''}
+                  ${status === 'completed' ? 'text-success-600 dark:text-success-400 font-medium' : ''}
+                  ${status === 'active' ? `${isPaused ? 'text-warning-600 dark:text-warning-400' : 'text-brand-600 dark:text-brand-400'} font-bold` : ''}
                   ${status === 'pending' ? 'text-gray-400 dark:text-gray-500' : ''}
                 `}
               >
diff --git a/frontend/src/components/Automation/RunHistory.tsx b/frontend/src/components/Automation/RunHistory.tsx
index 9b5768fa..ca9d1c5b 100644
--- a/frontend/src/components/Automation/RunHistory.tsx
+++ b/frontend/src/components/Automation/RunHistory.tsx
@@ -32,10 +32,10 @@ const RunHistory: React.FC<RunHistoryProps> = ({ siteId }) => {
 
   const getStatusBadge = (status: string) => {
     const colors: Record<string, string> = {
-      completed: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400',
-      running: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400',
-      paused: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400',
-      failed: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400',
+      completed: 'bg-success-100 text-success-800 dark:bg-success-900/30 dark:text-success-400',
+      running: 'bg-brand-100 text-brand-800 dark:bg-brand-900/30 dark:text-brand-400',
+      paused: 'bg-warning-100 text-warning-800 dark:bg-warning-900/30 dark:text-warning-400',
+      failed: 'bg-error-100 text-error-800 dark:bg-error-900/30 dark:text-error-400',
     };
     return colors[status] || 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300';
   };
diff --git a/frontend/src/components/Automation/StageCard.tsx b/frontend/src/components/Automation/StageCard.tsx
index 5aad391c..3f5eaf6d 100644
--- a/frontend/src/components/Automation/StageCard.tsx
+++ b/frontend/src/components/Automation/StageCard.tsx
@@ -25,8 +25,8 @@ const StageCard: React.FC<StageCardProps> = ({
   const isComplete = stageNumber < currentStage || (result !== null && stageNumber <= 7);
 
   const getStatusColor = () => {
-    if (isActive) return 'border-blue-500 bg-blue-50 dark:bg-blue-900/20 dark:border-blue-400';
-    if (isComplete) return 'border-green-500 bg-green-50 dark:bg-green-900/20 dark:border-green-400';
+    if (isActive) return 'border-brand-500 bg-brand-50 dark:bg-brand-900/20 dark:border-brand-400';
+    if (isComplete) return 'border-success-500 bg-success-50 dark:bg-success-900/20 dark:border-success-400';
     if (pipelineData && pipelineData.pending > 0) return 'border-purple-400 bg-purple-50 dark:bg-purple-900/20 dark:border-purple-400';
     return 'border-gray-300 bg-gray-50 dark:bg-gray-800 dark:border-gray-600';
   };
@@ -78,8 +78,8 @@ const StageCard: React.FC<StageCardProps> = ({
 
       {/* Show processing indicator when active */}
       {isActive && !result && (
-        <div className="mt-2 pt-2 border-t border-blue-200 dark:border-blue-600">
-          <div className="text-xs text-blue-600 dark:text-blue-400 animate-pulse">Processing...</div>
+        <div className="mt-2 pt-2 border-t border-brand-200 dark:border-brand-600">
+          <div className="text-xs text-brand-600 dark:text-brand-400 animate-pulse">Processing...</div>
         </div>
       )}
     </div>
diff --git a/frontend/src/components/auth/ProtectedRoute.tsx b/frontend/src/components/auth/ProtectedRoute.tsx
index a986c796..5294e514 100644
--- a/frontend/src/components/auth/ProtectedRoute.tsx
+++ b/frontend/src/components/auth/ProtectedRoute.tsx
@@ -93,8 +93,8 @@ export default function ProtectedRoute({ children }: ProtectedRouteProps) {
           </p>
           
           {showError && (
-            <div className="mt-4 p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
-              <p className="text-sm text-yellow-800 dark:text-yellow-200 mb-3">
+            <div className="mt-4 p-4 bg-warning-50 dark:bg-warning-900/20 border border-warning-200 dark:border-warning-800 rounded-lg">
+              <p className="text-sm text-warning-800 dark:text-warning-200 mb-3">
                 {errorMessage}
               </p>
               <button
@@ -103,7 +103,7 @@ export default function ProtectedRoute({ children }: ProtectedRouteProps) {
                   setShowError(false);
                   window.location.reload();
                 }}
-                className="px-4 py-2 text-sm bg-yellow-600 text-white rounded hover:bg-yellow-700"
+                className="px-4 py-2 text-sm bg-warning-600 text-white rounded hover:bg-warning-700"
               >
                 Retry or Reload Page
               </button>
diff --git a/frontend/src/components/auth/SignInForm.tsx b/frontend/src/components/auth/SignInForm.tsx
index c6fafe6f..67ccce1c 100644
--- a/frontend/src/components/auth/SignInForm.tsx
+++ b/frontend/src/components/auth/SignInForm.tsx
@@ -169,22 +169,22 @@ export default function SignInForm() {
               <div className="space-y-6">
                 {/* Logout Reason Display */}
                 {logoutReason && (
-                  <div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg dark:bg-yellow-900/20 dark:border-yellow-800">
+                  <div className="p-4 bg-warning-50 border border-warning-200 rounded-lg dark:bg-warning-900/20 dark:border-warning-800">
                     <div className="flex items-start justify-between">
                       <div className="flex-1">
                         <div className="flex items-center gap-2 mb-2">
-                          <svg className="w-5 h-5 text-yellow-600 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
+                          <svg className="w-5 h-5 text-warning-600 dark:text-warning-400" fill="currentColor" viewBox="0 0 20 20">
                             <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
                           </svg>
-                          <h4 className="font-semibold text-yellow-800 dark:text-yellow-300">
+                          <h4 className="font-semibold text-warning-800 dark:text-warning-300">
                             Session Ended
                           </h4>
                         </div>
-                        <p className="text-sm text-yellow-700 dark:text-yellow-400 mb-2">
+                        <p className="text-sm text-warning-700 dark:text-warning-400 mb-2">
                           {logoutReason.message}
                         </p>
                         {logoutReason.path && logoutReason.path !== '/signin' && (
-                          <p className="text-xs text-yellow-600 dark:text-yellow-500">
+                          <p className="text-xs text-warning-600 dark:text-warning-500">
                             Original page: <span className="font-mono">{logoutReason.path}</span>
                           </p>
                         )}
@@ -192,7 +192,7 @@ export default function SignInForm() {
                       <button
                         type="button"
                         onClick={() => setShowLogoutDetails(!showLogoutDetails)}
-                        className="ml-2 p-1 text-yellow-600 hover:text-yellow-800 dark:text-yellow-400 dark:hover:text-yellow-300"
+                        className="ml-2 p-1 text-warning-600 hover:text-warning-800 dark:text-warning-400 dark:hover:text-warning-300"
                         title="Toggle technical details"
                       >
                         <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
@@ -203,18 +203,18 @@ export default function SignInForm() {
                     
                     {/* Expandable Technical Details */}
                     {showLogoutDetails && (
-                      <div className="mt-3 pt-3 border-t border-yellow-300 dark:border-yellow-700">
-                        <p className="text-xs font-semibold text-yellow-800 dark:text-yellow-300 mb-2">
+                      <div className="mt-3 pt-3 border-t border-warning-300 dark:border-warning-700">
+                        <p className="text-xs font-semibold text-warning-800 dark:text-warning-300 mb-2">
                           Technical Details:
                         </p>
-                        <div className="space-y-1 text-xs font-mono text-yellow-700 dark:text-yellow-400">
+                        <div className="space-y-1 text-xs font-mono text-warning-700 dark:text-warning-400">
                           <div><span className="font-bold">Code:</span> {logoutReason.code}</div>
                           <div><span className="font-bold">Source:</span> {logoutReason.source}</div>
                           <div><span className="font-bold">Time:</span> {new Date(logoutReason.timestamp).toLocaleString()}</div>
                           {logoutReason.context && Object.keys(logoutReason.context).length > 0 && (
                             <div className="mt-2">
                               <span className="font-bold">Context:</span>
-                              <pre className="mt-1 p-2 bg-yellow-100 dark:bg-yellow-900/30 rounded text-xs overflow-x-auto">
+                              <pre className="mt-1 p-2 bg-warning-100 dark:bg-warning-900/30 rounded text-xs overflow-x-auto">
                                 {JSON.stringify(logoutReason.context, null, 2)}
                               </pre>
                             </div>
@@ -227,22 +227,22 @@ export default function SignInForm() {
                 
                 {/* Session Conflict Alert */}
                 {sessionConflict && (
-                  <div className="p-4 bg-orange-50 border border-orange-200 rounded-lg dark:bg-orange-900/20 dark:border-orange-800">
+                  <div className="p-4 bg-warning-50 border border-warning-200 rounded-lg dark:bg-warning-900/20 dark:border-warning-800">
                     <div className="flex items-center gap-2 mb-3">
-                      <svg className="w-5 h-5 text-orange-600 dark:text-orange-400" fill="currentColor" viewBox="0 0 20 20">
+                      <svg className="w-5 h-5 text-warning-600 dark:text-warning-400" fill="currentColor" viewBox="0 0 20 20">
                         <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
                       </svg>
-                      <h4 className="font-semibold text-orange-800 dark:text-orange-300">
+                      <h4 className="font-semibold text-warning-800 dark:text-warning-300">
                         Active Session Detected
                       </h4>
                     </div>
-                    <p className="text-sm text-orange-700 dark:text-orange-400 mb-2">
+                    <p className="text-sm text-warning-700 dark:text-warning-400 mb-2">
                       You have an active session for:
                     </p>
-                    <p className="text-sm font-semibold text-orange-800 dark:text-orange-300 mb-3">
+                    <p className="text-sm font-semibold text-warning-800 dark:text-warning-300 mb-3">
                       {sessionConflict.existingUser.email}
                     </p>
-                    <p className="text-sm text-orange-700 dark:text-orange-400 mb-4">
+                    <p className="text-sm text-warning-700 dark:text-warning-400 mb-4">
                       You're trying to login as: <strong>{sessionConflict.requestedUser.email}</strong>
                     </p>
                     <div className="flex gap-3">
@@ -250,14 +250,14 @@ export default function SignInForm() {
                         type="button"
                         onClick={handleForceLogout}
                         disabled={loading}
-                        className="flex-1 px-4 py-2 text-sm font-medium text-white bg-orange-600 rounded-lg hover:bg-orange-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                        className="flex-1 px-4 py-2 text-sm font-medium text-white bg-warning-600 rounded-lg hover:bg-warning-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                       >
                         {loading ? 'Logging out...' : 'Logout Previous & Continue'}
                       </button>
                       <button
                         type="button"
                         onClick={() => setSessionConflict(null)}
-                        className="flex-1 px-4 py-2 text-sm font-medium text-orange-700 bg-orange-100 rounded-lg hover:bg-orange-200 dark:bg-orange-900/40 dark:text-orange-300 dark:hover:bg-orange-900/60 transition-colors"
+                        className="flex-1 px-4 py-2 text-sm font-medium text-warning-700 bg-warning-100 rounded-lg hover:bg-warning-200 dark:bg-warning-900/40 dark:text-warning-300 dark:hover:bg-warning-900/60 transition-colors"
                       >
                         Cancel
                       </button>
@@ -266,7 +266,7 @@ export default function SignInForm() {
                 )}
                 
                 {error && (
-                  <div className="p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg dark:bg-red-900/20 dark:text-red-400 dark:border-red-800">
+                  <div className="p-3 text-sm text-error-600 bg-error-50 border border-error-200 rounded-lg dark:bg-error-900/20 dark:text-error-400 dark:border-error-800">
                     {error}
                   </div>
                 )}
diff --git a/frontend/src/components/auth/SignUpForm.tsx b/frontend/src/components/auth/SignUpForm.tsx
index dff1e72a..1af95425 100644
--- a/frontend/src/components/auth/SignUpForm.tsx
+++ b/frontend/src/components/auth/SignUpForm.tsx
@@ -188,7 +188,7 @@ export default function SignUpForm({ planDetails: planDetailsProp, planLoading:
             <form onSubmit={handleSubmit}>
               <div className="space-y-5">
                 {error && (
-                  <div className="p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg dark:bg-red-900/20 dark:text-red-400 dark:border-red-800">
+                  <div className="p-3 text-sm text-error-600 bg-error-50 border border-error-200 rounded-lg dark:bg-error-900/20 dark:text-error-400 dark:border-error-800">
                     {error}
                   </div>
                 )}
diff --git a/frontend/src/components/auth/SignUpFormEnhanced.tsx b/frontend/src/components/auth/SignUpFormEnhanced.tsx
index 15932a54..f08eca1d 100644
--- a/frontend/src/components/auth/SignUpFormEnhanced.tsx
+++ b/frontend/src/components/auth/SignUpFormEnhanced.tsx
@@ -231,7 +231,7 @@ export default function SignUpFormEnhanced({ planDetails: planDetailsProp, planL
                     ${step === currentStep
                       ? 'bg-brand-500 text-white'
                       : step < currentStep
-                      ? 'bg-green-500 text-white'
+                      ? 'bg-success-500 text-white'
                       : 'bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-400'
                     }
                   `}
@@ -245,7 +245,7 @@ export default function SignUpFormEnhanced({ planDetails: planDetailsProp, planL
                 </div>
               </div>
               {step < 3 && (
-                <div className={`flex-1 h-0.5 mx-4 ${step < currentStep ? 'bg-green-500' : 'bg-gray-200 dark:bg-gray-700'}`} />
+                <div className={`flex-1 h-0.5 mx-4 ${step < currentStep ? 'bg-success-500' : 'bg-gray-200 dark:bg-gray-700'}`} />
               )}
             </div>
           ))}
@@ -282,7 +282,7 @@ export default function SignUpFormEnhanced({ planDetails: planDetailsProp, planL
           {renderStepIndicator()}
 
           {error && (
-            <div className="mb-4 p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg dark:bg-red-900/20 dark:text-red-400 dark:border-red-800">
+            <div className="mb-4 p-3 text-sm text-error-600 bg-error-50 border border-error-200 rounded-lg dark:bg-error-900/20 dark:text-error-400 dark:border-error-800">
               {error}
             </div>
           )}
diff --git a/frontend/src/components/auth/SignUpFormSimplified.tsx b/frontend/src/components/auth/SignUpFormSimplified.tsx
index 424cb77c..09b37dc2 100644
--- a/frontend/src/components/auth/SignUpFormSimplified.tsx
+++ b/frontend/src/components/auth/SignUpFormSimplified.tsx
@@ -231,7 +231,7 @@ export default function SignUpFormSimplified({ planDetails: planDetailsProp, pla
           </div>
 
           {error && (
-            <div className="mb-4 p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg dark:bg-red-900/20 dark:text-red-400 dark:border-red-800">
+            <div className="mb-4 p-3 text-sm text-error-600 bg-error-50 border border-error-200 rounded-lg dark:bg-error-900/20 dark:text-error-400 dark:border-error-800">
               {error}
             </div>
           )}
@@ -357,7 +357,7 @@ export default function SignUpFormSimplified({ planDetails: planDetailsProp, pla
                     <span className="text-sm text-gray-600 dark:text-gray-400">Loading payment options...</span>
                   </div>
                 ) : paymentMethods.length === 0 ? (
-                  <div className="p-4 bg-amber-50 border border-amber-200 rounded-lg text-amber-800 dark:bg-amber-900/20 dark:border-amber-800 dark:text-amber-200">
+                  <div className="p-4 bg-warning-50 border border-warning-200 rounded-lg text-warning-800 dark:bg-warning-900/20 dark:border-warning-800 dark:text-warning-200">
                     <p className="text-sm">No payment methods available. Please contact support.</p>
                   </div>
                 ) : (
diff --git a/frontend/src/components/auth/SignUpFormUnified.tsx b/frontend/src/components/auth/SignUpFormUnified.tsx
index f2e3a552..01fd5bd0 100644
--- a/frontend/src/components/auth/SignUpFormUnified.tsx
+++ b/frontend/src/components/auth/SignUpFormUnified.tsx
@@ -305,7 +305,7 @@ export default function SignUpFormUnified({
             </button>
           </div>
           <div className="h-6 flex items-center justify-center">
-            <span className={`inline-flex items-center gap-1.5 text-xs text-green-600 dark:text-green-400 font-semibold bg-green-50 dark:bg-green-900/20 px-2 py-1 rounded-full transition-opacity duration-200 ${
+            <span className={`inline-flex items-center gap-1.5 text-xs text-success-600 dark:text-success-400 font-semibold bg-success-50 dark:bg-success-900/20 px-2 py-1 rounded-full transition-opacity duration-200 ${
               billingPeriod === 'annually' ? 'opacity-100' : 'opacity-0'
             }`}>
               <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -374,7 +374,7 @@ export default function SignUpFormUnified({
           </div>
 
           {error && (
-            <div className="mb-4 p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg dark:bg-red-900/20 dark:text-red-400 dark:border-red-800">
+            <div className="mb-4 p-3 text-sm text-error-600 bg-error-50 border border-error-200 rounded-lg dark:bg-error-900/20 dark:text-error-400 dark:border-error-800">
               {error}
             </div>
           )}
@@ -453,7 +453,7 @@ export default function SignUpFormUnified({
                         <Loader2 className="w-4 h-4 animate-spin text-brand-500" />
                       </div>
                     ) : paymentMethods.length === 0 ? (
-                      <div className="p-3 bg-amber-50 border border-amber-200 rounded-lg text-amber-800 dark:bg-amber-900/20 dark:border-amber-800 dark:text-amber-200">
+                      <div className="p-3 bg-warning-50 border border-warning-200 rounded-lg text-warning-800 dark:bg-warning-900/20 dark:border-warning-800 dark:text-warning-200">
                         <p className="text-xs">No payment methods available</p>
                       </div>
                     ) : (
@@ -565,7 +565,7 @@ export default function SignUpFormUnified({
                   </button>
                 </div>
                 <div className="h-7 flex items-center justify-center">
-                  <p className={`inline-flex items-center gap-1.5 text-green-600 dark:text-green-400 text-sm font-semibold bg-green-50 dark:bg-green-900/20 px-3 py-1.5 rounded-full transition-opacity duration-200 ${
+                  <p className={`inline-flex items-center gap-1.5 text-success-600 dark:text-success-400 text-sm font-semibold bg-success-50 dark:bg-success-900/20 px-3 py-1.5 rounded-full transition-opacity duration-200 ${
                     billingPeriod === 'annually' ? 'opacity-100' : 'opacity-0'
                   }`}>
                     <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -599,7 +599,7 @@ export default function SignUpFormUnified({
                     >
                       {isPopular && !isSelected && (
                         <div className="absolute -top-3 left-1/2 -translate-x-1/2">
-                          <span className="bg-gradient-to-r from-green-500 to-emerald-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-lg">
+                          <span className="bg-gradient-to-r from-success-500 to-success-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-lg">
                             ⭐ POPULAR
                           </span>
                         </div>
@@ -638,7 +638,7 @@ export default function SignUpFormUnified({
                         <div className="flex-1 grid grid-cols-2 gap-x-6 gap-y-2.5">
                           {features.map((feature, idx) => (
                             <div key={idx} className="flex items-center gap-2">
-                              <CheckCircle className="w-4 h-4 text-green-500 dark:text-green-400 flex-shrink-0" />
+                              <CheckCircle className="w-4 h-4 text-success-500 dark:text-success-400 flex-shrink-0" />
                               <span className="text-sm text-gray-700 dark:text-gray-300 leading-tight">{feature}</span>
                             </div>
                           ))}
diff --git a/frontend/src/components/billing/BillingBalancePanel.tsx b/frontend/src/components/billing/BillingBalancePanel.tsx
index 92e944e9..45b2ab7b 100644
--- a/frontend/src/components/billing/BillingBalancePanel.tsx
+++ b/frontend/src/components/billing/BillingBalancePanel.tsx
@@ -39,7 +39,7 @@ export default function BillingBalancePanel() {
       </div>
 
       {error && !balance && (
-        <div className="p-4 rounded-lg border border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-800 dark:bg-amber-900/20 dark:text-amber-200">
+        <div className="p-4 rounded-lg border border-warning-200 bg-warning-50 text-warning-800 dark:border-warning-800 dark:bg-warning-900/20 dark:text-warning-200">
           Usage unavailable. {error}
           <div className="mt-3">
             <Button variant="outline" size="sm" onClick={loadBalance}>
@@ -88,7 +88,7 @@ export default function BillingBalancePanel() {
       )}
 
       {error && balance && (
-        <div className="text-sm text-amber-600 dark:text-amber-400">
+        <div className="text-sm text-warning-600 dark:text-warning-400">
           Latest balance may be stale: {error}
         </div>
       )}
diff --git a/frontend/src/components/billing/BillingFormStep.tsx b/frontend/src/components/billing/BillingFormStep.tsx
index b1995a3c..f83a6670 100644
--- a/frontend/src/components/billing/BillingFormStep.tsx
+++ b/frontend/src/components/billing/BillingFormStep.tsx
@@ -88,7 +88,7 @@ export default function BillingFormStep({
   return (
     <div className="space-y-5">
       {error && (
-        <div className="p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg dark:bg-red-900/20 dark:text-red-400 dark:border-red-800">
+        <div className="p-3 text-sm text-error-600 bg-error-50 border border-error-200 rounded-lg dark:bg-error-900/20 dark:text-error-400 dark:border-error-800">
           {error}
         </div>
       )}
diff --git a/frontend/src/components/billing/BillingRecentTransactions.tsx b/frontend/src/components/billing/BillingRecentTransactions.tsx
index 6c03b881..dc25ef3c 100644
--- a/frontend/src/components/billing/BillingRecentTransactions.tsx
+++ b/frontend/src/components/billing/BillingRecentTransactions.tsx
@@ -62,7 +62,7 @@ export default function BillingRecentTransactions({ limit = 10, variant = 'card'
             </div>
           </div>
           <div className="text-right">
-            <div className={`font-bold ${transaction.amount > 0 ? 'text-green-600' : 'text-red-600'}`}>
+            <div className={`font-bold ${transaction.amount > 0 ? 'text-success-600' : 'text-error-600'}`}>
               {transaction.amount > 0 ? '+' : ''}{transaction.amount}
             </div>
           </div>
diff --git a/frontend/src/components/billing/BillingUsagePanel.tsx b/frontend/src/components/billing/BillingUsagePanel.tsx
index 245dfb7d..9d08c55c 100644
--- a/frontend/src/components/billing/BillingUsagePanel.tsx
+++ b/frontend/src/components/billing/BillingUsagePanel.tsx
@@ -89,7 +89,7 @@ export default function BillingUsagePanel({ showOnlyActivity = false }: BillingU
                     <td className="py-3 px-4">
                       <Badge variant="soft" tone={txn.amount >= 0 ? 'success' : 'danger'}>{txn.transaction_type}</Badge>
                     </td>
-                    <td className={`py-3 px-4 text-sm font-medium ${txn.amount >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}`}>
+                    <td className={`py-3 px-4 text-sm font-medium ${txn.amount >= 0 ? 'text-success-600 dark:text-success-400' : 'text-error-600 dark:text-error-400'}`}>
                       {txn.amount >= 0 ? '+' : ''}{txn.amount}
                     </td>
                     <td className="py-3 px-4 text-sm text-gray-600 dark:text-gray-400">{txn.description}</td>
@@ -178,7 +178,7 @@ export default function BillingUsagePanel({ showOnlyActivity = false }: BillingU
                 {usageLimits.credits_remaining?.toLocaleString?.() || 0}
               </div>
               {usageLimits.approaching_limit && (
-                <div className="text-sm text-amber-600 dark:text-amber-400 mt-1">Approaching limit</div>
+                <div className="text-sm text-warning-600 dark:text-warning-400 mt-1">Approaching limit</div>
               )}
             </div>
             <div className="p-4 rounded-lg border border-gray-200 dark:border-gray-700">
@@ -236,7 +236,7 @@ export default function BillingUsagePanel({ showOnlyActivity = false }: BillingU
                     <td className="py-3 px-4">
                       <Badge variant="light" color={txn.amount >= 0 ? 'success' : 'error'}>{txn.transaction_type}</Badge>
                     </td>
-                    <td className={`py-3 px-4 text-sm font-medium ${txn.amount >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}`}>
+                    <td className={`py-3 px-4 text-sm font-medium ${txn.amount >= 0 ? 'text-success-600 dark:text-success-400' : 'text-error-600 dark:text-error-400'}`}>
                       {txn.amount >= 0 ? '+' : ''}{txn.amount}
                     </td>
                     <td className="py-3 px-4 text-sm text-gray-600 dark:text-gray-400">{txn.description}</td>
diff --git a/frontend/src/components/billing/CreditCostBreakdownPanel.tsx b/frontend/src/components/billing/CreditCostBreakdownPanel.tsx
index 9e4dc21c..87c58466 100644
--- a/frontend/src/components/billing/CreditCostBreakdownPanel.tsx
+++ b/frontend/src/components/billing/CreditCostBreakdownPanel.tsx
@@ -72,7 +72,7 @@ export default function CreditCostBreakdownPanel() {
   if (error || !summary) {
     return (
       <Card className="p-6 text-center">
-        <AlertCircle className="w-12 h-12 text-red-500 mx-auto mb-4" />
+        <AlertCircle className="w-12 h-12 text-error-500 mx-auto mb-4" />
         <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
           Failed to Load Cost Data
         </h3>
@@ -110,7 +110,7 @@ export default function CreditCostBreakdownPanel() {
     { bg: 'bg-info-50 dark:bg-info-900/20', text: 'text-info-600 dark:text-info-400', border: 'border-info-500 dark:border-info-400' },
     { bg: 'bg-purple-50 dark:bg-purple-900/20', text: 'text-purple-600 dark:text-purple-400', border: 'border-purple-500 dark:border-purple-400' },
     { bg: 'bg-warning-50 dark:bg-warning-900/20', text: 'text-warning-600 dark:text-warning-400', border: 'border-warning-500 dark:border-warning-400' },
-    { bg: 'bg-teal-50 dark:bg-teal-900/20', text: 'text-teal-600 dark:text-teal-400', border: 'border-teal-500 dark:border-teal-400' },
+    { bg: 'bg-purple-50 dark:bg-purple-900/20', text: 'text-purple-600 dark:text-purple-400', border: 'border-purple-500 dark:border-purple-400' },
   ];
 
   return (
diff --git a/frontend/src/components/billing/PaymentConfirmationModal.tsx b/frontend/src/components/billing/PaymentConfirmationModal.tsx
index 8be1643e..fba033b8 100644
--- a/frontend/src/components/billing/PaymentConfirmationModal.tsx
+++ b/frontend/src/components/billing/PaymentConfirmationModal.tsx
@@ -174,7 +174,7 @@ export default function PaymentConfirmationModal({
       <div className="p-6 sm:p-8">
         {success ? (
           <div className="text-center py-8">
-            <CheckCircle className="w-16 h-16 text-green-500 mx-auto mb-4" />
+            <CheckCircle className="w-16 h-16 text-success-500 mx-auto mb-4" />
             <h3 className="text-2xl font-semibold text-gray-900 dark:text-white mb-2">
               Payment Submitted!
             </h3>
@@ -193,7 +193,7 @@ export default function PaymentConfirmationModal({
             </p>
 
             {error && (
-              <div className="mb-4 p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg dark:bg-red-900/20 dark:text-red-400 dark:border-red-800">
+              <div className="mb-4 p-3 text-sm text-error-600 bg-error-50 border border-error-200 rounded-lg dark:bg-error-900/20 dark:text-error-400 dark:border-error-800">
                 {error}
               </div>
             )}
@@ -288,7 +288,7 @@ export default function PaymentConfirmationModal({
                 ) : (
                   <div className="mt-2 flex items-center justify-between p-3 bg-gray-50 border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
                     <div className="flex items-center gap-2">
-                      <CheckCircle className="w-5 h-5 text-green-500" />
+                      <CheckCircle className="w-5 h-5 text-success-500" />
                       <span className="text-sm text-gray-700 dark:text-gray-300">
                         {uploadedFileName}
                       </span>
diff --git a/frontend/src/components/billing/PaymentHistory.tsx b/frontend/src/components/billing/PaymentHistory.tsx
index c580dc4a..cc4f4c1b 100644
--- a/frontend/src/components/billing/PaymentHistory.tsx
+++ b/frontend/src/components/billing/PaymentHistory.tsx
@@ -53,11 +53,11 @@ export default function PaymentHistory() {
   const getStatusIcon = (status: string) => {
     switch (status) {
       case 'succeeded':
-        return <CheckCircle className="w-5 h-5 text-green-500" />;
+        return <CheckCircle className="w-5 h-5 text-success-500" />;
       case 'failed':
-        return <XCircle className="w-5 h-5 text-red-500" />;
+        return <XCircle className="w-5 h-5 text-error-500" />;
       case 'pending_approval':
-        return <Clock className="w-5 h-5 text-yellow-500" />;
+        return <Clock className="w-5 h-5 text-warning-500" />;
       default:
         return <Clock className="w-5 h-5 text-gray-500" />;
     }
@@ -65,9 +65,9 @@ export default function PaymentHistory() {
 
   const getStatusBadge = (status: string) => {
     const badges = {
-      succeeded: 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400',
-      failed: 'bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400',
-      pending_approval: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400',
+      succeeded: 'bg-success-100 text-success-800 dark:bg-success-900/20 dark:text-success-400',
+      failed: 'bg-error-100 text-error-800 dark:bg-error-900/20 dark:text-error-400',
+      pending_approval: 'bg-warning-100 text-warning-800 dark:bg-warning-900/20 dark:text-warning-400',
       refunded: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-400',
     };
     return badges[status as keyof typeof badges] || badges.pending_approval;
@@ -104,7 +104,7 @@ export default function PaymentHistory() {
       </div>
 
       {error && (
-        <div className="p-4 bg-red-50 border border-red-200 rounded-lg text-red-600 dark:bg-red-900/20 dark:border-red-800">
+        <div className="p-4 bg-error-50 border border-error-200 rounded-lg text-error-600 dark:bg-error-900/20 dark:border-error-800">
           {error}
         </div>
       )}
diff --git a/frontend/src/components/billing/PaymentMethodSelect.tsx b/frontend/src/components/billing/PaymentMethodSelect.tsx
index 83023c27..43d0defd 100644
--- a/frontend/src/components/billing/PaymentMethodSelect.tsx
+++ b/frontend/src/components/billing/PaymentMethodSelect.tsx
@@ -84,7 +84,7 @@ export default function PaymentMethodSelect({
 
   if (fetchError) {
     return (
-      <div className="p-4 rounded-lg border border-red-200 bg-red-50 text-red-800 dark:border-red-800 dark:bg-red-900/20 dark:text-red-200">
+      <div className="p-4 rounded-lg border border-error-200 bg-error-50 text-error-800 dark:border-error-800 dark:bg-error-900/20 dark:text-error-200">
         <div className="flex items-start gap-3">
           <AlertCircle className="w-5 h-5 flex-shrink-0 mt-0.5" />
           <div>
@@ -104,7 +104,7 @@ export default function PaymentMethodSelect({
 
   if (methods.length === 0) {
     return (
-      <div className="p-4 rounded-lg border border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-800 dark:bg-amber-900/20 dark:text-amber-200">
+      <div className="p-4 rounded-lg border border-warning-200 bg-warning-50 text-warning-800 dark:border-warning-800 dark:bg-warning-900/20 dark:text-warning-200">
         <div className="flex items-start gap-3">
           <AlertCircle className="w-5 h-5 flex-shrink-0 mt-0.5" />
           <div>
@@ -123,7 +123,7 @@ export default function PaymentMethodSelect({
   return (
     <div className="space-y-4">
       {error && (
-        <div className="p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg dark:bg-red-900/20 dark:text-red-400 dark:border-red-800">
+        <div className="p-3 text-sm text-error-600 bg-error-50 border border-error-200 rounded-lg dark:bg-error-900/20 dark:text-error-400 dark:border-error-800">
           {error}
         </div>
       )}
@@ -198,8 +198,8 @@ export default function PaymentMethodSelect({
         ))}
       </div>
 
-      <div className="mt-4 p-4 rounded-lg bg-blue-50 border border-blue-200 dark:bg-blue-900/20 dark:border-blue-800">
-        <p className="text-sm text-blue-800 dark:text-blue-200">
+      <div className="mt-4 p-4 rounded-lg bg-brand-50 border border-brand-200 dark:bg-brand-900/20 dark:border-brand-800">
+        <p className="text-sm text-brand-800 dark:text-brand-200">
           <span className="font-medium">Note:</span> For manual payment methods (bank transfer, local wallets), 
           you'll need to complete the payment and then submit proof of payment for admin approval.
         </p>
diff --git a/frontend/src/components/billing/PendingPaymentBanner.tsx b/frontend/src/components/billing/PendingPaymentBanner.tsx
index 155c3a8c..4385013b 100644
--- a/frontend/src/components/billing/PendingPaymentBanner.tsx
+++ b/frontend/src/components/billing/PendingPaymentBanner.tsx
@@ -115,15 +115,15 @@ export default function PendingPaymentBanner({ className = '' }: PendingPaymentB
   // If no invoice found, show simplified banner
   if (!invoice) {
     return (
-      <div className={`relative border-l-4 border-amber-500 bg-amber-50 dark:bg-amber-900/20 ${className}`}>
+      <div className={`relative border-l-4 border-warning-500 bg-warning-50 dark:bg-warning-900/20 ${className}`}>
         <div className="p-4">
           <div className="flex items-start gap-4">
-            <AlertCircle className="w-6 h-6 text-amber-600 dark:text-amber-400 flex-shrink-0 mt-0.5" />
+            <AlertCircle className="w-6 h-6 text-warning-600 dark:text-warning-400 flex-shrink-0 mt-0.5" />
             <div className="flex-1">
-              <h3 className="font-semibold text-amber-900 dark:text-amber-100">
+              <h3 className="font-semibold text-warning-900 dark:text-warning-100">
                 Payment Required
               </h3>
-              <p className="mt-1 text-sm text-amber-800 dark:text-amber-200">
+              <p className="mt-1 text-sm text-warning-800 dark:text-warning-200">
                 Your account is pending payment. Please complete your payment to activate your subscription.
               </p>
               <div className="mt-3 flex gap-2">
@@ -141,9 +141,9 @@ export default function PendingPaymentBanner({ className = '' }: PendingPaymentB
             </div>
             <button
               onClick={handleDismiss}
-              className="p-1 hover:bg-amber-100 dark:hover:bg-amber-800/40 rounded transition-colors"
+              className="p-1 hover:bg-warning-100 dark:hover:bg-warning-800/40 rounded transition-colors"
             >
-              <X className="w-5 h-5 text-amber-600 dark:text-amber-400" />
+              <X className="w-5 h-5 text-warning-600 dark:text-warning-400" />
             </button>
           </div>
         </div>
@@ -167,59 +167,59 @@ export default function PendingPaymentBanner({ className = '' }: PendingPaymentB
 
   return (
     <>
-      <div className={`relative border-l-4 ${isOverdue ? 'border-red-500 bg-red-50 dark:bg-red-900/20' : 'border-amber-500 bg-amber-50 dark:bg-amber-900/20'} ${className}`}>
+      <div className={`relative border-l-4 ${isOverdue ? 'border-error-500 bg-error-50 dark:bg-error-900/20' : 'border-warning-500 bg-warning-50 dark:bg-warning-900/20'} ${className}`}>
         <div className="p-4">
           <div className="flex items-start gap-4">
             <AlertCircle 
-              className={`w-6 h-6 flex-shrink-0 mt-0.5 ${isOverdue ? 'text-red-600 dark:text-red-400' : 'text-amber-600 dark:text-amber-400'}`} 
+              className={`w-6 h-6 flex-shrink-0 mt-0.5 ${isOverdue ? 'text-error-600 dark:text-error-400' : 'text-warning-600 dark:text-warning-400'}`} 
             />
             <div className="flex-1">
               <div className="flex items-center gap-2">
-                <h3 className={`font-semibold ${isOverdue ? 'text-red-900 dark:text-red-100' : 'text-amber-900 dark:text-amber-100'}`}>
+                <h3 className={`font-semibold ${isOverdue ? 'text-error-900 dark:text-error-100' : 'text-warning-900 dark:text-warning-100'}`}>
                   {isOverdue ? 'Payment Overdue' : 'Payment Required'}
                 </h3>
                 {isDueSoon && !isOverdue && (
-                  <span className="px-2 py-0.5 text-xs font-medium rounded bg-amber-200 text-amber-900 dark:bg-amber-700 dark:text-amber-100">
+                  <span className="px-2 py-0.5 text-xs font-medium rounded bg-warning-200 text-warning-900 dark:bg-warning-700 dark:text-warning-100">
                     Due Soon
                   </span>
                 )}
               </div>
               
-              <p className={`mt-1 text-sm ${isOverdue ? 'text-red-800 dark:text-red-200' : 'text-amber-800 dark:text-amber-200'}`}>
+              <p className={`mt-1 text-sm ${isOverdue ? 'text-error-800 dark:text-error-200' : 'text-warning-800 dark:text-warning-200'}`}>
                 Your subscription is pending payment confirmation. Complete your payment to activate your account and unlock all features.
               </p>
 
               {/* Invoice Details */}
               <div className="mt-3 grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
                 <div>
-                  <span className={`block font-medium ${isOverdue ? 'text-red-700 dark:text-red-300' : 'text-amber-700 dark:text-amber-300'}`}>
+                  <span className={`block font-medium ${isOverdue ? 'text-error-700 dark:text-error-300' : 'text-warning-700 dark:text-warning-300'}`}>
                     Invoice
                   </span>
-                  <span className={`${isOverdue ? 'text-red-900 dark:text-red-100' : 'text-amber-900 dark:text-amber-100'}`}>
+                  <span className={`${isOverdue ? 'text-error-900 dark:text-error-100' : 'text-warning-900 dark:text-warning-100'}`}>
                     #{invoice.invoice_number}
                   </span>
                 </div>
                 <div>
-                  <span className={`block font-medium ${isOverdue ? 'text-red-700 dark:text-red-300' : 'text-amber-700 dark:text-amber-300'}`}>
+                  <span className={`block font-medium ${isOverdue ? 'text-error-700 dark:text-error-300' : 'text-warning-700 dark:text-warning-300'}`}>
                     Amount
                   </span>
-                  <span className={`${isOverdue ? 'text-red-900 dark:text-red-100' : 'text-amber-900 dark:text-amber-100'}`}>
+                  <span className={`${isOverdue ? 'text-error-900 dark:text-error-100' : 'text-warning-900 dark:text-warning-100'}`}>
                     {invoice.currency} {invoice.total_amount}
                   </span>
                 </div>
                 <div>
-                  <span className={`block font-medium ${isOverdue ? 'text-red-700 dark:text-red-300' : 'text-amber-700 dark:text-amber-300'}`}>
+                  <span className={`block font-medium ${isOverdue ? 'text-error-700 dark:text-error-300' : 'text-warning-700 dark:text-warning-300'}`}>
                     Status
                   </span>
-                  <span className={`${isOverdue ? 'text-red-900 dark:text-red-100' : 'text-amber-900 dark:text-amber-100'} capitalize`}>
+                  <span className={`${isOverdue ? 'text-error-900 dark:text-error-100' : 'text-warning-900 dark:text-warning-100'} capitalize`}>
                     {invoice.status}
                   </span>
                 </div>
                 <div>
-                  <span className={`block font-medium ${isOverdue ? 'text-red-700 dark:text-red-300' : 'text-amber-700 dark:text-amber-300'}`}>
+                  <span className={`block font-medium ${isOverdue ? 'text-error-700 dark:text-error-300' : 'text-warning-700 dark:text-warning-300'}`}>
                     {isOverdue ? 'Was Due' : 'Due Date'}
                   </span>
-                  <span className={`${isOverdue ? 'text-red-900 dark:text-red-100' : 'text-amber-900 dark:text-amber-100'}`}>
+                  <span className={`${isOverdue ? 'text-error-900 dark:text-error-100' : 'text-warning-900 dark:text-warning-100'}`}>
                     {formatDate(invoice.due_date)}
                   </span>
                 </div>
@@ -248,8 +248,8 @@ export default function PendingPaymentBanner({ className = '' }: PendingPaymentB
               onClick={handleDismiss}
               className={`p-1 rounded transition-colors ${
                 isOverdue 
-                  ? 'hover:bg-red-100 dark:hover:bg-red-800/40 text-red-600 dark:text-red-400'
-                  : 'hover:bg-amber-100 dark:hover:bg-amber-800/40 text-amber-600 dark:text-amber-400'
+                  ? 'hover:bg-error-100 dark:hover:bg-error-800/40 text-error-600 dark:text-error-400'
+                  : 'hover:bg-warning-100 dark:hover:bg-warning-800/40 text-warning-600 dark:text-warning-400'
               }`}
             >
               <X className="w-5 h-5" />
diff --git a/frontend/src/components/billing/UsageLimitsPanel.tsx b/frontend/src/components/billing/UsageLimitsPanel.tsx
index ac50a567..417f2338 100644
--- a/frontend/src/components/billing/UsageLimitsPanel.tsx
+++ b/frontend/src/components/billing/UsageLimitsPanel.tsx
@@ -29,18 +29,18 @@ function LimitCard({ title, icon, usage, type, daysUntilReset, accentColor = 'br
   let badgeVariant: 'soft' = 'soft';
   let badgeTone: 'brand' | 'warning' | 'danger' | 'success' | 'info' | 'purple' | 'indigo' | 'pink' | 'teal' | 'cyan' = accentColor;
   
-  // Color mapping for progress bars
+  // Color mapping for progress bars - using CSS variables
   const colorMap: Record<string, string> = {
-    brand: '#0693e3',
-    success: '#0bbf87',
-    info: '#3b82f6',
-    warning: '#ff7a00',
-    danger: '#ef4444',
-    purple: '#8b5cf6',
-    indigo: '#6366f1',
-    pink: '#ec4899',
-    teal: '#14b8a6',
-    cyan: '#06b6d4',
+    brand: 'var(--color-primary)',
+    success: 'var(--color-success)',
+    info: 'var(--color-primary)',
+    warning: 'var(--color-warning)',
+    danger: 'var(--color-danger)',
+    purple: 'var(--color-purple)',
+    indigo: 'var(--color-purple)',
+    pink: 'var(--color-purple)',
+    teal: 'var(--color-success)',
+    cyan: 'var(--color-primary)',
   };
   
   if (isDanger) {
@@ -104,7 +104,7 @@ function LimitCard({ title, icon, usage, type, daysUntilReset, accentColor = 'br
       {/* Warning Message */}
       {isWarning && (
         <div className={`mt-3 flex items-start gap-2 text-xs ${
-          isDanger ? 'text-red-600 dark:text-red-400' : 'text-yellow-600 dark:text-yellow-400'
+          isDanger ? 'text-error-600 dark:text-error-400' : 'text-warning-600 dark:text-warning-400'
         }`}>
           <AlertCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
           <span>
@@ -158,7 +158,7 @@ export default function UsageLimitsPanel() {
   if (error || !summary) {
     return (
       <Card className="p-6 text-center">
-        <AlertCircle className="w-12 h-12 text-red-500 mx-auto mb-4" />
+        <AlertCircle className="w-12 h-12 text-error-500 mx-auto mb-4" />
         <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
           Failed to Load Usage Data
         </h3>
diff --git a/frontend/src/components/charts/bar/BarChartOne.tsx b/frontend/src/components/charts/bar/BarChartOne.tsx
index 2d672f76..f818f951 100644
--- a/frontend/src/components/charts/bar/BarChartOne.tsx
+++ b/frontend/src/components/charts/bar/BarChartOne.tsx
@@ -3,7 +3,7 @@ import { ApexOptions } from "apexcharts";
 
 export default function BarChartOne() {
   const options: ApexOptions = {
-    colors: ["#465fff"],
+    colors: ["var(--color-primary)"],
     chart: {
       fontFamily: "Outfit, sans-serif",
       type: "bar",
diff --git a/frontend/src/components/charts/line/LineChartOne.tsx b/frontend/src/components/charts/line/LineChartOne.tsx
index aabde9f4..6321c43a 100644
--- a/frontend/src/components/charts/line/LineChartOne.tsx
+++ b/frontend/src/components/charts/line/LineChartOne.tsx
@@ -8,7 +8,7 @@ export default function LineChartOne() {
       position: "top",
       horizontalAlign: "left",
     },
-    colors: ["#465FFF", "#9CB9FF"], // Define line colors
+    colors: ["var(--color-primary)", "var(--color-brand-300)"], // Define line colors
     chart: {
       fontFamily: "Outfit, sans-serif",
       height: 310,
@@ -88,7 +88,7 @@ export default function LineChartOne() {
       labels: {
         style: {
           fontSize: "12px", // Adjust font size for y-axis labels
-          colors: ["#6B7280"], // Color of the labels
+          colors: ["var(--color-gray-500)"], // Color of the labels
         },
       },
       title: {
diff --git a/frontend/src/components/common/BulkExportModal.tsx b/frontend/src/components/common/BulkExportModal.tsx
index 0f5b7be4..b4932d05 100644
--- a/frontend/src/components/common/BulkExportModal.tsx
+++ b/frontend/src/components/common/BulkExportModal.tsx
@@ -36,8 +36,8 @@ export default function BulkExportModal({
       <div className="p-6">
         {/* Header with icon */}
         <div className="flex items-center gap-3 mb-4">
-          <div className="flex items-center justify-center w-10 h-10 bg-blue-50 rounded-xl dark:bg-blue-500/10">
-            <InfoIcon className="w-5 h-5 text-blue-500" />
+          <div className="flex items-center justify-center w-10 h-10 bg-brand-50 rounded-xl dark:bg-brand-500/10">
+            <InfoIcon className="w-5 h-5 text-brand-500" />
           </div>
           <h2 className="text-xl font-bold text-gray-800 dark:text-white">
             {title}
diff --git a/frontend/src/components/common/BulkStatusUpdateModal.tsx b/frontend/src/components/common/BulkStatusUpdateModal.tsx
index 5f3670ae..57f03710 100644
--- a/frontend/src/components/common/BulkStatusUpdateModal.tsx
+++ b/frontend/src/components/common/BulkStatusUpdateModal.tsx
@@ -55,8 +55,8 @@ export default function BulkStatusUpdateModal({
       <div className="p-6">
         {/* Header with icon */}
         <div className="flex items-center gap-3 mb-4">
-          <div className="flex items-center justify-center w-10 h-10 bg-blue-50 rounded-xl dark:bg-blue-500/10">
-            <InfoIcon className="w-5 h-5 text-blue-500" />
+          <div className="flex items-center justify-center w-10 h-10 bg-brand-50 rounded-xl dark:bg-brand-500/10">
+            <InfoIcon className="w-5 h-5 text-brand-500" />
           </div>
           <h2 className="text-xl font-bold text-gray-800 dark:text-white">
             {title}
diff --git a/frontend/src/components/common/ContentImageCell.tsx b/frontend/src/components/common/ContentImageCell.tsx
index d643adb5..29b98027 100644
--- a/frontend/src/components/common/ContentImageCell.tsx
+++ b/frontend/src/components/common/ContentImageCell.tsx
@@ -143,10 +143,10 @@ export default function ContentImageCell({ image, maxPromptLength = 100, showPro
         )}
 
         {image.status === 'failed' && (
-          <div className="w-full h-24 bg-red-100 dark:bg-red-900/20 rounded border border-red-300 dark:border-red-700 flex items-center justify-center">
+          <div className="w-full h-24 bg-error-100 dark:bg-error-900/20 rounded border border-error-300 dark:border-error-700 flex items-center justify-center">
             <div className="text-center">
               <svg
-                className="w-6 h-6 mx-auto text-red-500 mb-1"
+                className="w-6 h-6 mx-auto text-error-500 mb-1"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
@@ -158,7 +158,7 @@ export default function ContentImageCell({ image, maxPromptLength = 100, showPro
                   d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                 />
               </svg>
-              <p className="text-xs text-red-700 dark:text-red-400">Failed</p>
+              <p className="text-xs text-error-700 dark:text-error-400">Failed</p>
             </div>
           </div>
         )}
diff --git a/frontend/src/components/common/GlobalErrorDisplay.tsx b/frontend/src/components/common/GlobalErrorDisplay.tsx
index 95b467ee..8bb1b152 100644
--- a/frontend/src/components/common/GlobalErrorDisplay.tsx
+++ b/frontend/src/components/common/GlobalErrorDisplay.tsx
@@ -18,25 +18,25 @@ export default function GlobalErrorDisplay() {
       {errors.map((error, index) => (
         <div
           key={index}
-          className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg shadow-lg p-4 animate-in slide-in-from-right"
+          className="bg-error-50 dark:bg-error-900/20 border border-error-200 dark:border-error-800 rounded-lg shadow-lg p-4 animate-in slide-in-from-right"
         >
           <div className="flex items-start justify-between gap-2">
             <div className="flex-1">
               <div className="flex items-center gap-2 mb-1">
-                <span className="text-red-600 dark:text-red-400 text-lg">⚠️</span>
-                <span className="text-sm font-semibold text-red-800 dark:text-red-200">
+                <span className="text-error-600 dark:text-error-400 text-lg">⚠️</span>
+                <span className="text-sm font-semibold text-error-800 dark:text-error-200">
                   {error.source}
                 </span>
               </div>
-              <p className="text-sm text-red-700 dark:text-red-300 mb-2">
+              <p className="text-sm text-error-700 dark:text-error-300 mb-2">
                 {error.message}
               </p>
               {error.stack && (
                 <details className="mt-2">
-                  <summary className="text-xs text-red-600 dark:text-red-400 cursor-pointer hover:underline">
+                  <summary className="text-xs text-error-600 dark:text-error-400 cursor-pointer hover:underline">
                     Show stack trace
                   </summary>
-                  <pre className="mt-2 text-xs bg-red-100 dark:bg-red-900/40 p-2 rounded overflow-auto max-h-32">
+                  <pre className="mt-2 text-xs bg-error-100 dark:bg-error-900/40 p-2 rounded overflow-auto max-h-32">
                     {error.stack}
                   </pre>
                 </details>
@@ -44,7 +44,7 @@ export default function GlobalErrorDisplay() {
             </div>
             <button
               onClick={() => clearError(index)}
-              className="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-200 text-xl leading-none"
+              className="text-error-600 dark:text-error-400 hover:text-error-800 dark:hover:text-error-200 text-xl leading-none"
               aria-label="Dismiss error"
             >
               ×
@@ -55,7 +55,7 @@ export default function GlobalErrorDisplay() {
       {errors.length > 1 && (
         <button
           onClick={clearAllErrors}
-          className="w-full px-3 py-2 text-xs bg-red-600 text-white rounded hover:bg-red-700"
+          className="w-full px-3 py-2 text-xs bg-error-600 text-white rounded hover:bg-error-700"
         >
           Clear All Errors
         </button>
diff --git a/frontend/src/components/common/ImageGenerationCard.tsx b/frontend/src/components/common/ImageGenerationCard.tsx
index 3204ea84..40cb91d1 100644
--- a/frontend/src/components/common/ImageGenerationCard.tsx
+++ b/frontend/src/components/common/ImageGenerationCard.tsx
@@ -265,14 +265,14 @@ export default function ImageGenerationCard({
       <div className="border-t border-gray-200 p-5 dark:border-gray-800">
         <div className="space-y-5">
           {/* API Provider and Model Display */}
-          <div className="flex items-center gap-3 rounded-lg bg-blue-50 px-4 py-3 dark:bg-blue-900/20">
+          <div className="flex items-center gap-3 rounded-lg bg-brand-50 px-4 py-3 dark:bg-brand-900/20">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="20"
               height="20"
               viewBox="0 0 20 20"
               fill="none"
-              className="text-blue-600 dark:text-blue-400"
+              className="text-brand-600 dark:text-brand-400"
             >
               <path
                 d="M10 2L3 7V17C3 17.5304 3.21071 18.0391 3.58579 18.4142C3.96086 18.7893 4.46957 19 5 19H15C15.5304 19 16.0391 18.7893 16.4142 18.4142C16.7893 18.0391 17 17.5304 17 17V7L10 2Z"
@@ -283,8 +283,8 @@ export default function ImageGenerationCard({
               />
             </svg>
             <div>
-              <p className="text-xs font-medium text-blue-600 dark:text-blue-400">Provider & Model</p>
-              <p className="text-sm font-semibold text-blue-900 dark:text-blue-200">
+              <p className="text-xs font-medium text-brand-600 dark:text-brand-400">Provider & Model</p>
+              <p className="text-sm font-semibold text-brand-900 dark:text-brand-200">
                 {getProviderDisplay()}
               </p>
             </div>
@@ -299,7 +299,7 @@ export default function ImageGenerationCard({
               value={prompt}
               onChange={(e) => setPrompt(e.target.value)}
               rows={6}
-              className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
+              className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
               placeholder="Describe the visual elements, style, mood, and composition you want in the image..."
             />
             <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
@@ -316,7 +316,7 @@ export default function ImageGenerationCard({
               value={negativePrompt}
               onChange={(e) => setNegativePrompt(e.target.value)}
               rows={2}
-              className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
+              className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
               placeholder="Describe what you DON'T want in the image..."
             />
             <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
@@ -334,7 +334,7 @@ export default function ImageGenerationCard({
               <select
                 value={imageType}
                 onChange={(e) => setImageType(e.target.value)}
-                className="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
+                className="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
               >
                 {typeOptions.map((option) => (
                   <option key={option.value} value={option.value}>
@@ -352,7 +352,7 @@ export default function ImageGenerationCard({
               <select
                 value={imageSize}
                 onChange={(e) => setImageSize(e.target.value)}
-                className="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
+                className="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
               >
                 {sizeOptions.map((option) => (
                   <option key={option.value} value={option.value}>
@@ -370,7 +370,7 @@ export default function ImageGenerationCard({
               <select
                 value={imageFormat}
                 onChange={(e) => setImageFormat(e.target.value)}
-                className="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
+                className="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
               >
                 {formatOptions.map((option) => (
                   <option key={option.value} value={option.value}>
@@ -440,8 +440,8 @@ export default function ImageGenerationCard({
 
       {/* Error display */}
       {error && (
-        <div className="mt-4 rounded-lg border border-red-200 bg-red-50 p-4 dark:border-red-800 dark:bg-red-900/20">
-          <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+        <div className="mt-4 rounded-lg border border-error-200 bg-error-50 p-4 dark:border-error-800 dark:bg-error-900/20">
+          <p className="text-sm text-error-600 dark:text-error-400">{error}</p>
         </div>
       )}
     </article>
diff --git a/frontend/src/components/common/ImageQueueModal.tsx b/frontend/src/components/common/ImageQueueModal.tsx
index d236b0fb..d15e3c60 100644
--- a/frontend/src/components/common/ImageQueueModal.tsx
+++ b/frontend/src/components/common/ImageQueueModal.tsx
@@ -446,11 +446,11 @@ export default function ImageQueueModal({
   const getProgressColor = (status: string) => {
     switch (status) {
       case 'completed':
-        return 'bg-green-500';
+        return 'bg-success-500';
       case 'failed':
-        return 'bg-red-500';
+        return 'bg-error-500';
       case 'processing':
-        return 'bg-blue-500';
+        return 'bg-brand-500';
       default:
         return 'bg-gray-300';
     }
@@ -471,7 +471,7 @@ export default function ImageQueueModal({
       {/* Header */}
       <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
         <div className="flex items-center gap-3">
-          <FileIcon className="w-6 h-6 text-blue-500" />
+          <FileIcon className="w-6 h-6 text-brand-500" />
           <div>
             <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
               Generating Images
@@ -496,11 +496,11 @@ export default function ImageQueueModal({
                 key={item.index}
                 className={`p-4 rounded-lg border-2 transition-colors ${
                   item.status === 'processing'
-                    ? 'bg-blue-50 dark:bg-blue-900/20 border-blue-500'
+                    ? 'bg-brand-50 dark:bg-brand-900/20 border-brand-500'
                     : item.status === 'completed'
-                    ? 'bg-green-50 dark:bg-green-900/20 border-green-500'
+                    ? 'bg-success-50 dark:bg-success-900/20 border-success-500'
                     : item.status === 'failed'
-                    ? 'bg-red-50 dark:bg-red-900/20 border-red-500'
+                    ? 'bg-error-50 dark:bg-error-900/20 border-error-500'
                     : 'bg-gray-50 dark:bg-gray-700/50 border-gray-300 dark:border-gray-600'
                 }`}
               >
@@ -509,7 +509,7 @@ export default function ImageQueueModal({
                   <div className="flex-1">
                     {/* Header Row */}
                     <div className="flex items-center gap-3 mb-2">
-                      <span className="flex items-center justify-center w-6 h-6 rounded-full bg-blue-500 text-white text-xs font-bold">
+                      <span className="flex items-center justify-center w-6 h-6 rounded-full bg-brand-500 text-white text-xs font-bold">
                         {item.index}
                       </span>
                       <span className="font-semibold text-sm text-gray-900 dark:text-white">
@@ -551,7 +551,7 @@ export default function ImageQueueModal({
 
                     {/* Error Message */}
                     {item.error && (
-                      <div className="mt-2 p-2 bg-red-100 dark:bg-red-900/30 border-l-4 border-red-500 rounded text-xs text-red-700 dark:text-red-300">
+                      <div className="mt-2 p-2 bg-error-100 dark:bg-error-900/30 border-l-4 border-error-500 rounded text-xs text-error-700 dark:text-error-300">
                         {item.error}
                       </div>
                     )}
@@ -595,7 +595,7 @@ export default function ImageQueueModal({
             {allDone && (
               <button
                 onClick={onClose}
-                className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
+                className="px-4 py-2 bg-brand-500 text-white rounded-lg hover:bg-brand-600 transition-colors"
               >
                 Close
               </button>
diff --git a/frontend/src/components/common/ImageResultCard.tsx b/frontend/src/components/common/ImageResultCard.tsx
index f4d26e47..6d950126 100644
--- a/frontend/src/components/common/ImageResultCard.tsx
+++ b/frontend/src/components/common/ImageResultCard.tsx
@@ -79,7 +79,7 @@ export default function ImageResultCard({
       <div className="border-t border-gray-200 p-5 dark:border-gray-800">
         {errorState ? (
           <div className="flex flex-col items-center justify-center py-12 text-center">
-            <div className="mb-4 rounded-full bg-red-100 p-4 dark:bg-red-900/20">
+            <div className="mb-4 rounded-full bg-error-100 p-4 dark:bg-error-900/20">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 width="24"
@@ -90,7 +90,7 @@ export default function ImageResultCard({
                 strokeWidth="2"
                 strokeLinecap="round"
                 strokeLinejoin="round"
-                className="text-red-600 dark:text-red-400"
+                className="text-error-600 dark:text-error-400"
               >
                 <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
                 <line x1="12" y1="9" x2="12" y2="13" />
diff --git a/frontend/src/components/common/IntegrationCard.tsx b/frontend/src/components/common/IntegrationCard.tsx
index 36c8f2cc..99441ab5 100644
--- a/frontend/src/components/common/IntegrationCard.tsx
+++ b/frontend/src/components/common/IntegrationCard.tsx
@@ -100,10 +100,10 @@ export default function IntegrationCard({
       return 'bg-gray-400 dark:bg-gray-500 animate-pulse'; // Grey while validating (with pulse)
     }
     if (validationStatus === 'success') {
-      return 'bg-green-500 dark:bg-green-600'; // Green for success
+      return 'bg-success-500 dark:bg-success-600'; // Green for success
     }
     if (validationStatus === 'error') {
-      return 'bg-red-500 dark:bg-red-600'; // Red for error
+      return 'bg-error-500 dark:bg-error-600'; // Red for error
     }
     return 'bg-gray-400 dark:bg-gray-500'; // Default grey
   };
@@ -120,7 +120,7 @@ export default function IntegrationCard({
       return { text: 'Enabled', color: 'text-gray-800 dark:text-white', bold: true };
     }
     if (validationStatus === 'error') {
-      return { text: 'Error', color: 'text-red-600 dark:text-red-400', bold: false };
+      return { text: 'Error', color: 'text-error-600 dark:text-error-400', bold: false };
     }
     return { text: 'Disabled', color: 'text-gray-400 dark:text-gray-500', bold: false };
   };
diff --git a/frontend/src/components/common/PageHeader.tsx b/frontend/src/components/common/PageHeader.tsx
index b074c85e..fb20e164 100644
--- a/frontend/src/components/common/PageHeader.tsx
+++ b/frontend/src/components/common/PageHeader.tsx
@@ -100,18 +100,18 @@ export default function PageHeader({
   }, [activeSite?.id, activeSite?.is_active, hideSiteSector, loadSectorsForSite, addError]);
 
   const badgeColors = {
-    blue: { bg: 'bg-blue-600 dark:bg-blue-500', light: 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300' },
-    green: { bg: 'bg-green-600 dark:bg-green-500', light: 'bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-300' },
+    blue: { bg: 'bg-brand-600 dark:bg-brand-500', light: 'bg-brand-100 text-brand-700 dark:bg-brand-500/20 dark:text-brand-300' },
+    green: { bg: 'bg-success-600 dark:bg-success-500', light: 'bg-success-100 text-success-700 dark:bg-success-500/20 dark:text-success-300' },
     purple: { bg: 'bg-purple-600 dark:bg-purple-500', light: 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300' },
-    orange: { bg: 'bg-orange-600 dark:bg-orange-500', light: 'bg-orange-100 text-orange-700 dark:bg-orange-500/20 dark:text-orange-300' },
-    red: { bg: 'bg-red-600 dark:bg-red-500', light: 'bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-300' },
-    indigo: { bg: 'bg-indigo-600 dark:bg-indigo-500', light: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-500/20 dark:text-indigo-300' },
-    yellow: { bg: 'bg-yellow-600 dark:bg-yellow-500', light: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-500/20 dark:text-yellow-300' },
-    pink: { bg: 'bg-pink-600 dark:bg-pink-500', light: 'bg-pink-100 text-pink-700 dark:bg-pink-500/20 dark:text-pink-300' },
-    emerald: { bg: 'bg-emerald-600 dark:bg-emerald-500', light: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-300' },
-    cyan: { bg: 'bg-cyan-600 dark:bg-cyan-500', light: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-500/20 dark:text-cyan-300' },
-    amber: { bg: 'bg-amber-600 dark:bg-amber-500', light: 'bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-300' },
-    teal: { bg: 'bg-teal-600 dark:bg-teal-500', light: 'bg-teal-100 text-teal-700 dark:bg-teal-500/20 dark:text-teal-300' },
+    orange: { bg: 'bg-warning-600 dark:bg-warning-500', light: 'bg-warning-100 text-warning-700 dark:bg-warning-500/20 dark:text-warning-300' },
+    red: { bg: 'bg-error-600 dark:bg-error-500', light: 'bg-error-100 text-error-700 dark:bg-error-500/20 dark:text-error-300' },
+    indigo: { bg: 'bg-purple-600 dark:bg-purple-500', light: 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300' },
+    yellow: { bg: 'bg-warning-600 dark:bg-warning-500', light: 'bg-warning-100 text-warning-700 dark:bg-warning-500/20 dark:text-warning-300' },
+    pink: { bg: 'bg-purple-600 dark:bg-purple-500', light: 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300' },
+    emerald: { bg: 'bg-purple-600 dark:bg-purple-500', light: 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300' },
+    cyan: { bg: 'bg-purple-600 dark:bg-purple-500', light: 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300' },
+    amber: { bg: 'bg-warning-600 dark:bg-warning-500', light: 'bg-warning-100 text-warning-700 dark:bg-warning-500/20 dark:text-warning-300' },
+    teal: { bg: 'bg-purple-600 dark:bg-purple-500', light: 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300' },
   };
 
   return (
diff --git a/frontend/src/components/common/ProgressModal.tsx b/frontend/src/components/common/ProgressModal.tsx
index a6a8b1aa..76012e8d 100644
--- a/frontend/src/components/common/ProgressModal.tsx
+++ b/frontend/src/components/common/ProgressModal.tsx
@@ -775,7 +775,7 @@ export default function ProgressModal({
         <div className="mb-6">
             {/* Big centered check icon */}
             <div className="flex justify-center mb-4">
-              <div className="w-16 h-16 rounded-full bg-green-600 dark:bg-green-700 flex items-center justify-center">
+              <div className="w-16 h-16 rounded-full bg-success-600 dark:bg-success-700 flex items-center justify-center">
                 <svg className="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 20 20">
                   <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                 </svg>
@@ -783,7 +783,7 @@ export default function ProgressModal({
         </div>
 
             {/* Dark success alert box with centered text */}
-            <div className="p-5 rounded-lg bg-green-600 dark:bg-green-700 border border-green-700 dark:border-green-600">
+            <div className="p-5 rounded-lg bg-success-600 dark:bg-success-700 border border-success-700 dark:border-success-600">
               <div className="text-base font-semibold text-white text-center whitespace-pre-line">
                 {successMessage}
               </div>
@@ -798,14 +798,14 @@ export default function ProgressModal({
               key={index}
               className={`flex items-center gap-3 p-3 rounded-lg border transition-all ${
                 item.completed
-                  ? 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800'
+                  ? 'bg-success-50 dark:bg-success-900/20 border-success-200 dark:border-success-800'
                   : 'bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700 opacity-60'
               }`}
             >
               {/* Icon - only checkmark for completed, gray circle for pending */}
               <div className="flex-shrink-0">
                 {item.completed ? (
-                  <svg className="w-5 h-5 text-green-600 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20">
+                  <svg className="w-5 h-5 text-success-600 dark:text-success-400" fill="currentColor" viewBox="0 0 20 20">
                     <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                   </svg>
                 ) : (
@@ -817,7 +817,7 @@ export default function ProgressModal({
               <span
                 className={`flex-1 text-sm font-medium ${
                   item.completed
-                    ? 'text-green-800 dark:text-green-300'
+                    ? 'text-success-800 dark:text-success-300'
                     : 'text-gray-500 dark:text-gray-400'
                 }`}
               >
@@ -834,7 +834,7 @@ export default function ProgressModal({
               variant="primary" 
               size="lg" 
               onClick={onClose}
-              className="bg-green-600 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800 text-white px-8 py-3 text-base font-semibold"
+              className="bg-success-600 hover:bg-success-700 dark:bg-success-700 dark:hover:bg-success-800 text-white px-8 py-3 text-base font-semibold"
             >
               Close
             </Button>
diff --git a/frontend/src/components/common/SectorSelector.tsx b/frontend/src/components/common/SectorSelector.tsx
index 46747ac3..8fd658be 100644
--- a/frontend/src/components/common/SectorSelector.tsx
+++ b/frontend/src/components/common/SectorSelector.tsx
@@ -97,14 +97,14 @@ export default function SectorSelector() {
           onItemClick={() => handleSectorSelect(null)}
           className={`flex items-center gap-3 px-3 py-2 font-medium rounded-lg text-sm text-left ${
             !activeSector
-              ? "bg-blue-50 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300"
+              ? "bg-brand-50 text-brand-700 dark:bg-brand-500/20 dark:text-brand-300"
               : "text-gray-700 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
           }`}
         >
           <span className="flex-1">All Sectors</span>
           {!activeSector && (
             <svg
-              className="w-4 h-4 text-blue-600 dark:text-blue-400"
+              className="w-4 h-4 text-brand-600 dark:text-brand-400"
               fill="currentColor"
               viewBox="0 0 20 20"
             >
@@ -122,14 +122,14 @@ export default function SectorSelector() {
             onItemClick={() => handleSectorSelect(sector.id)}
             className={`flex items-center gap-3 px-3 py-2 font-medium rounded-lg text-sm text-left ${
               activeSector?.id === sector.id
-                ? "bg-blue-50 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300"
+                ? "bg-brand-50 text-brand-700 dark:bg-brand-500/20 dark:text-brand-300"
                 : "text-gray-700 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
             }`}
           >
             <span className="flex-1">{sector.name}</span>
             {activeSector?.id === sector.id && (
               <svg
-                className="w-4 h-4 text-blue-600 dark:text-blue-400"
+                className="w-4 h-4 text-brand-600 dark:text-brand-400"
                 fill="currentColor"
                 viewBox="0 0 20 20"
               >
diff --git a/frontend/src/components/common/SingleRecordStatusUpdateModal.tsx b/frontend/src/components/common/SingleRecordStatusUpdateModal.tsx
index 7b46d34a..d248c696 100644
--- a/frontend/src/components/common/SingleRecordStatusUpdateModal.tsx
+++ b/frontend/src/components/common/SingleRecordStatusUpdateModal.tsx
@@ -55,8 +55,8 @@ export default function SingleRecordStatusUpdateModal({
       <div className="p-6">
         {/* Header with icon */}
         <div className="flex items-center gap-3 mb-4">
-          <div className="flex items-center justify-center w-10 h-10 bg-blue-50 rounded-xl dark:bg-blue-500/10">
-            <InfoIcon className="w-5 h-5 text-blue-500" />
+          <div className="flex items-center justify-center w-10 h-10 bg-brand-50 rounded-xl dark:bg-brand-500/10">
+            <InfoIcon className="w-5 h-5 text-brand-500" />
           </div>
           <h2 className="text-xl font-bold text-gray-800 dark:text-white">
             {title}
diff --git a/frontend/src/components/common/SiteCard.tsx b/frontend/src/components/common/SiteCard.tsx
index 865096b4..bbc4b38a 100644
--- a/frontend/src/components/common/SiteCard.tsx
+++ b/frontend/src/components/common/SiteCard.tsx
@@ -28,14 +28,14 @@ export default function SiteCard({
 
   const getStatusColor = () => {
     if (site.is_active) {
-      return 'bg-green-500 dark:bg-green-600';
+      return 'bg-success-500 dark:bg-success-600';
     }
     return 'bg-gray-400 dark:bg-gray-500';
   };
 
   const getStatusText = () => {
     if (site.is_active) {
-      return { text: 'Active', color: 'text-green-600 dark:text-green-400', bold: true };
+      return { text: 'Active', color: 'text-success-600 dark:text-success-400', bold: true };
     }
     return { text: 'Inactive', color: 'text-gray-400 dark:text-gray-500', bold: false };
   };
diff --git a/frontend/src/components/common/ToggleTableRow.tsx b/frontend/src/components/common/ToggleTableRow.tsx
index 52a8feba..5566eece 100644
--- a/frontend/src/components/common/ToggleTableRow.tsx
+++ b/frontend/src/components/common/ToggleTableRow.tsx
@@ -335,7 +335,7 @@ export const ToggleButton: React.FC<ToggleButtonProps> = ({
       onClick={onClick}
       className={`inline-flex items-center justify-center w-8 h-8 rounded-lg transition-all duration-200 ${
         isExpanded
-          ? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20'
+          ? 'text-brand-600 dark:text-brand-400 bg-brand-50 dark:bg-brand-900/20'
           : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
       } ${className}`}
       aria-label={isExpanded ? 'Collapse content' : 'Expand content'}
diff --git a/frontend/src/components/common/ValidationCard.tsx b/frontend/src/components/common/ValidationCard.tsx
index a0a61cda..0a675d0c 100644
--- a/frontend/src/components/common/ValidationCard.tsx
+++ b/frontend/src/components/common/ValidationCard.tsx
@@ -161,7 +161,7 @@ export default function ValidationCard({
             <div className="space-y-3">
               {/* Success Message */}
               {testResult.success && (
-                <div className="flex items-center gap-2 text-green-600 dark:text-green-400">
+                <div className="flex items-center gap-2 text-success-600 dark:text-success-400">
                   <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                     <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                   </svg>
@@ -171,7 +171,7 @@ export default function ValidationCard({
 
               {/* Error Message */}
               {!testResult.success && (
-                <div className="flex items-center gap-2 text-red-600 dark:text-red-400">
+                <div className="flex items-center gap-2 text-error-600 dark:text-error-400">
                   <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                     <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
                   </svg>
@@ -181,7 +181,7 @@ export default function ValidationCard({
 
               {/* Detailed Results Box */}
               {testResult.success && (
-                <div className="bg-blue-50 dark:bg-blue-900/20 border-l-4 border-blue-500 p-4 rounded">
+                <div className="bg-brand-50 dark:bg-brand-900/20 border-l-4 border-brand-500 p-4 rounded">
                   <div className="space-y-2 text-sm">
                     {integrationId === 'openai' && withResponse ? (
                       // OpenAI response test details
@@ -241,7 +241,7 @@ export default function ValidationCard({
                               href={testResult.full_response.image_url} 
                               target="_blank" 
                               rel="noopener noreferrer"
-                              className="text-blue-600 dark:text-blue-400 hover:underline"
+                              className="text-brand-600 dark:text-brand-400 hover:underline"
                             >
                               View Image
                             </a>
diff --git a/frontend/src/components/common/WorkflowInsights.tsx b/frontend/src/components/common/WorkflowInsights.tsx
index 8b68006a..e3f3e566 100644
--- a/frontend/src/components/common/WorkflowInsights.tsx
+++ b/frontend/src/components/common/WorkflowInsights.tsx
@@ -27,32 +27,32 @@ export const WorkflowInsights: React.FC<WorkflowInsightsProps> = ({ insights, cl
   
   const notificationColors = hasCritical 
     ? {
-        bg: 'bg-amber-50 dark:bg-amber-500/10',
-        border: 'border-amber-300 dark:border-amber-700',
-        iconBg: 'bg-amber-100 dark:bg-amber-500/20',
+        bg: 'bg-warning-50 dark:bg-warning-500/10',
+        border: 'border-warning-300 dark:border-warning-700',
+        iconBg: 'bg-warning-100 dark:bg-warning-500/20',
       }
     : hasSuccess
     ? {
-        bg: 'bg-green-50 dark:bg-green-500/10',
-        border: 'border-green-300 dark:border-green-700',
-        iconBg: 'bg-green-100 dark:bg-green-500/20',
+        bg: 'bg-success-50 dark:bg-success-500/10',
+        border: 'border-success-300 dark:border-success-700',
+        iconBg: 'bg-success-100 dark:bg-success-500/20',
       }
     : {
-        bg: 'bg-blue-50 dark:bg-blue-500/10',
-        border: 'border-blue-300 dark:border-blue-700',
-        iconBg: 'bg-blue-100 dark:bg-blue-500/20',
+        bg: 'bg-brand-50 dark:bg-brand-500/10',
+        border: 'border-brand-300 dark:border-brand-700',
+        iconBg: 'bg-brand-100 dark:bg-brand-500/20',
       };
 
   const getIcon = (type: string) => {
     switch (type) {
       case 'success':
-        return <CheckCircleIcon className="w-5 h-5 text-green-600 dark:text-green-400" />;
+        return <CheckCircleIcon className="w-5 h-5 text-success-600 dark:text-success-400" />;
       case 'warning':
-        return <AlertIcon className="w-5 h-5 text-amber-600 dark:text-amber-400" />;
+        return <AlertIcon className="w-5 h-5 text-warning-600 dark:text-warning-400" />;
       case 'action':
-        return <BoltIcon className="w-5 h-5 text-blue-600 dark:text-blue-400" />;
+        return <BoltIcon className="w-5 h-5 text-brand-600 dark:text-brand-400" />;
       default:
-        return <InfoIcon className="w-5 h-5 text-blue-600 dark:text-blue-400" />;
+        return <InfoIcon className="w-5 h-5 text-brand-600 dark:text-brand-400" />;
     }
   };
 
diff --git a/frontend/src/components/content/ContentFilter.tsx b/frontend/src/components/content/ContentFilter.tsx
index 1ceac8f6..06ced271 100644
--- a/frontend/src/components/content/ContentFilter.tsx
+++ b/frontend/src/components/content/ContentFilter.tsx
@@ -39,7 +39,7 @@ export const ContentFilter: React.FC<ContentFilterProps> = ({ onFilterChange, cl
           placeholder="Search content..."
           value={filters.search}
           onChange={handleSearchChange}
-          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-800 dark:border-gray-600 dark:text-white"
+          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-500 focus:border-transparent dark:bg-gray-800 dark:border-gray-600 dark:text-white"
         />
       </div>
 
@@ -51,7 +51,7 @@ export const ContentFilter: React.FC<ContentFilterProps> = ({ onFilterChange, cl
             onClick={() => handleSourceChange('all')}
             className={`px-3 py-1 rounded-full text-sm font-medium transition-colors ${
               filters.source === 'all'
-                ? 'bg-blue-500 text-white'
+                ? 'bg-brand-500 text-white'
                 : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'
             }`}
           >
@@ -63,7 +63,7 @@ export const ContentFilter: React.FC<ContentFilterProps> = ({ onFilterChange, cl
               onClick={() => handleSourceChange(source)}
               className={`px-3 py-1 rounded-full text-sm font-medium transition-colors ${
                 filters.source === source
-                  ? 'bg-blue-500 text-white'
+                  ? 'bg-brand-500 text-white'
                   : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'
               }`}
             >
diff --git a/frontend/src/components/content/SourceBadge.tsx b/frontend/src/components/content/SourceBadge.tsx
index fa70d9c6..dd024d0f 100644
--- a/frontend/src/components/content/SourceBadge.tsx
+++ b/frontend/src/components/content/SourceBadge.tsx
@@ -8,9 +8,9 @@ interface SourceBadgeProps {
 }
 
 const sourceConfig = {
-  igny8: { label: 'IGNY8', color: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300' },
+  igny8: { label: 'IGNY8', color: 'bg-brand-100 text-brand-800 dark:bg-brand-900 dark:text-brand-300' },
   wordpress: { label: 'WordPress', color: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300' },
-  shopify: { label: 'Shopify', color: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300' },
+  shopify: { label: 'Shopify', color: 'bg-success-100 text-success-800 dark:bg-success-900 dark:text-success-300' },
   custom: { label: 'Custom', color: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300' },
 };
 
diff --git a/frontend/src/components/content/SyncStatusBadge.tsx b/frontend/src/components/content/SyncStatusBadge.tsx
index e5d93b17..7413e884 100644
--- a/frontend/src/components/content/SyncStatusBadge.tsx
+++ b/frontend/src/components/content/SyncStatusBadge.tsx
@@ -8,9 +8,9 @@ interface SyncStatusBadgeProps {
 }
 
 const statusConfig = {
-  native: { label: 'Native', color: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300' },
-  imported: { label: 'Imported', color: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300' },
-  synced: { label: 'Synced', color: 'bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-300' },
+  native: { label: 'Native', color: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300' },
+  imported: { label: 'Imported', color: 'bg-warning-100 text-warning-800 dark:bg-warning-900 dark:text-warning-300' },
+  synced: { label: 'Synced', color: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300' },
 };
 
 export const SyncStatusBadge: React.FC<SyncStatusBadgeProps> = ({ status, className = '' }) => {
diff --git a/frontend/src/components/dashboard/AIOperationsWidget.tsx b/frontend/src/components/dashboard/AIOperationsWidget.tsx
index 9109bca8..26633127 100644
--- a/frontend/src/components/dashboard/AIOperationsWidget.tsx
+++ b/frontend/src/components/dashboard/AIOperationsWidget.tsx
@@ -35,13 +35,16 @@ interface AIOperationsWidgetProps {
   loading?: boolean;
 }
 
-const operationConfig = {
+const operationConfig: Record<string, { label: string; icon: typeof GroupIcon; color: string }> = {
   clustering: { label: 'Clustering', icon: GroupIcon, color: 'text-purple-600 dark:text-purple-400' },
-  ideas: { label: 'Ideas', icon: BoltIcon, color: 'text-orange-600 dark:text-orange-400' },
-  content: { label: 'Content', icon: FileTextIcon, color: 'text-green-600 dark:text-green-400' },
-  images: { label: 'Images', icon: FileIcon, color: 'text-pink-600 dark:text-pink-400' },
+  ideas: { label: 'Ideas', icon: BoltIcon, color: 'text-warning-600 dark:text-warning-400' },
+  content: { label: 'Content', icon: FileTextIcon, color: 'text-success-600 dark:text-success-400' },
+  images: { label: 'Images', icon: FileIcon, color: 'text-purple-600 dark:text-purple-400' },
 };
 
+// Default config for unknown operation types
+const defaultConfig = { label: 'Other', icon: BoltIcon, color: 'text-gray-600 dark:text-gray-400' };
+
 const periods = [
   { value: '7d', label: '7 days' },
   { value: '30d', label: '30 days' },
@@ -105,7 +108,7 @@ export default function AIOperationsWidget({ data, onPeriodChange, loading }: AI
 
         {/* Operation Rows */}
         {data.operations.map((op) => {
-          const config = operationConfig[op.type];
+          const config = operationConfig[op.type] || defaultConfig;
           const Icon = config.icon;
           
           return (
@@ -144,7 +147,7 @@ export default function AIOperationsWidget({ data, onPeriodChange, loading }: AI
       {/* Stats Footer */}
       <div className="flex items-center justify-between mt-4 pt-3 border-t border-gray-200 dark:border-gray-700">
         <div className="text-sm text-gray-600 dark:text-gray-400">
-          Success Rate: <span className="font-semibold text-green-600 dark:text-green-400">
+          Success Rate: <span className="font-semibold text-success-600 dark:text-success-400">
             {loading ? '—' : `${data.totals.successRate}%`}
           </span>
         </div>
diff --git a/frontend/src/components/dashboard/AutomationStatusWidget.tsx b/frontend/src/components/dashboard/AutomationStatusWidget.tsx
index 951782b8..0cd91af0 100644
--- a/frontend/src/components/dashboard/AutomationStatusWidget.tsx
+++ b/frontend/src/components/dashboard/AutomationStatusWidget.tsx
@@ -37,8 +37,8 @@ interface AutomationStatusWidgetProps {
 const statusConfig = {
   active: {
     label: 'Active',
-    color: 'text-green-600 dark:text-green-400',
-    bgColor: 'bg-green-500',
+    color: 'text-success-600 dark:text-success-400',
+    bgColor: 'bg-success-500',
     icon: CheckCircleIcon,
   },
   paused: {
@@ -49,8 +49,8 @@ const statusConfig = {
   },
   failed: {
     label: 'Failed',
-    color: 'text-red-600 dark:text-red-400',
-    bgColor: 'bg-red-500',
+    color: 'text-error-600 dark:text-error-400',
+    bgColor: 'bg-error-500',
     icon: AlertIcon,
   },
   not_configured: {
diff --git a/frontend/src/components/dashboard/ContentVelocityWidget.tsx b/frontend/src/components/dashboard/ContentVelocityWidget.tsx
index df03027c..d1a36dc0 100644
--- a/frontend/src/components/dashboard/ContentVelocityWidget.tsx
+++ b/frontend/src/components/dashboard/ContentVelocityWidget.tsx
@@ -95,11 +95,11 @@ export default function ContentVelocityWidget({ data, loading }: ContentVelocity
       <div className="flex items-center justify-between mt-4 pt-3 border-t border-gray-200 dark:border-gray-700">
         <div className="flex items-center gap-2">
           {isPositiveTrend ? (
-            <TrendingUpIcon className="w-5 h-5 text-green-600" />
+            <TrendingUpIcon className="w-5 h-5 text-success-600" />
           ) : (
-            <TrendingDownIcon className="w-5 h-5 text-red-600" />
+            <TrendingDownIcon className="w-5 h-5 text-error-600" />
           )}
-          <span className={`text-sm font-semibold ${isPositiveTrend ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}`}>
+          <span className={`text-sm font-semibold ${isPositiveTrend ? 'text-success-600 dark:text-success-400' : 'text-error-600 dark:text-error-400'}`}>
             {isPositiveTrend ? '+' : ''}{data.trend}% vs last week
           </span>
         </div>
diff --git a/frontend/src/components/dashboard/CreditAvailabilityWidget.tsx b/frontend/src/components/dashboard/CreditAvailabilityWidget.tsx
index 9184e0ff..64a4b634 100644
--- a/frontend/src/components/dashboard/CreditAvailabilityWidget.tsx
+++ b/frontend/src/components/dashboard/CreditAvailabilityWidget.tsx
@@ -21,9 +21,9 @@ interface CreditAvailabilityWidgetProps {
 // Average credit costs per operation
 const OPERATION_COSTS = {
   clustering: { label: 'Clustering Runs', cost: 10, icon: GroupIcon, color: 'text-purple-600 dark:text-purple-400' },
-  ideas: { label: 'Content Ideas', cost: 2, icon: BoltIcon, color: 'text-orange-600 dark:text-orange-400' },
-  content: { label: 'Articles', cost: 50, icon: FileTextIcon, color: 'text-green-600 dark:text-green-400' },
-  images: { label: 'Images', cost: 5, icon: FileIcon, color: 'text-pink-600 dark:text-pink-400' },
+  ideas: { label: 'Content Ideas', cost: 2, icon: BoltIcon, color: 'text-warning-600 dark:text-warning-400' },
+  content: { label: 'Articles', cost: 50, icon: FileTextIcon, color: 'text-success-600 dark:text-success-400' },
+  images: { label: 'Images', cost: 5, icon: FileIcon, color: 'text-purple-600 dark:text-purple-400' },
 };
 
 export default function CreditAvailabilityWidget({ 
@@ -70,7 +70,7 @@ export default function CreditAvailabilityWidget({
         <div className="w-full bg-white dark:bg-gray-800 rounded-full h-2 mb-1">
           <div 
             className={`h-2 rounded-full transition-all ${
-              usagePercent > 90 ? 'bg-red-500' : usagePercent > 75 ? 'bg-amber-500' : 'bg-green-500'
+              usagePercent > 90 ? 'bg-error-500' : usagePercent > 75 ? 'bg-warning-500' : 'bg-success-500'
             }`}
             style={{ width: `${Math.max(100 - usagePercent, 0)}%` }}
           ></div>
@@ -119,8 +119,8 @@ export default function CreditAvailabilityWidget({
                   </p>
                 </div>
                 <span className={`text-lg font-bold ${
-                  op.available > 10 ? 'text-green-600 dark:text-green-400' :
-                  op.available > 0 ? 'text-amber-600 dark:text-amber-400' :
+                  op.available > 10 ? 'text-success-600 dark:text-success-400' :
+                  op.available > 0 ? 'text-warning-600 dark:text-warning-400' :
                   'text-gray-400 dark:text-gray-600'
                 }`}>
                   {op.available === 0 ? '—' : op.available > 999 ? '999+' : op.available}
@@ -134,7 +134,7 @@ export default function CreditAvailabilityWidget({
       {/* Warning if low */}
       {!loading && availableCredits > 0 && availableCredits < 100 && (
         <div className="mt-4 pt-3 border-t border-gray-200 dark:border-gray-700">
-          <div className="flex items-start gap-2 text-amber-600 dark:text-amber-400">
+          <div className="flex items-start gap-2 text-warning-600 dark:text-warning-400">
             <DollarLineIcon className="w-4 h-4 mt-0.5" />
             <p className="text-xs">
               You're running low on credits. Consider purchasing more to avoid interruptions.
diff --git a/frontend/src/components/dashboard/CreditBalanceWidget.tsx b/frontend/src/components/dashboard/CreditBalanceWidget.tsx
index db3f1067..049fdefe 100644
--- a/frontend/src/components/dashboard/CreditBalanceWidget.tsx
+++ b/frontend/src/components/dashboard/CreditBalanceWidget.tsx
@@ -21,7 +21,7 @@ export default function CreditBalanceWidget() {
   if (error && !balance) {
     return (
       <ComponentCard title="Content Usage" desc="Usage unavailable">
-        <div className="text-sm text-red-600 dark:text-red-400 mb-3">
+        <div className="text-sm text-error-600 dark:text-error-400 mb-3">
           Usage unavailable. Please retry.
         </div>
         <Button variant="outline" size="sm" onClick={loadBalance}>
@@ -68,7 +68,7 @@ export default function CreditBalanceWidget() {
             <span className="text-sm font-medium text-success">{balance.credits_remaining}</span>
           </div>
           {error && (
-            <div className="mt-2 text-xs text-amber-600 dark:text-amber-400">
+            <div className="mt-2 text-xs text-warning-600 dark:text-warning-400">
               Usage may be outdated. {error}
             </div>
           )}
diff --git a/frontend/src/components/dashboard/EnhancedMetricCard.tsx b/frontend/src/components/dashboard/EnhancedMetricCard.tsx
index 8f9638b2..a9e420ce 100644
--- a/frontend/src/components/dashboard/EnhancedMetricCard.tsx
+++ b/frontend/src/components/dashboard/EnhancedMetricCard.tsx
@@ -19,20 +19,20 @@ export interface MetricCardProps {
 
 const accentColors = {
   blue: {
-    bg: "bg-blue-50 dark:bg-blue-500/10",
-    hover: "hover:bg-blue-100 dark:hover:bg-blue-500/20",
+    bg: "bg-brand-50 dark:bg-brand-500/10",
+    hover: "hover:bg-brand-100 dark:hover:bg-brand-500/20",
     border: "bg-brand-500",
     icon: "text-brand-500",
   },
   green: {
-    bg: "bg-green-50 dark:bg-green-500/10",
-    hover: "hover:bg-green-100 dark:hover:bg-green-500/20",
+    bg: "bg-success-50 dark:bg-success-500/10",
+    hover: "hover:bg-success-100 dark:hover:bg-success-500/20",
     border: "bg-success-500",
     icon: "text-success-500",
   },
   orange: {
-    bg: "bg-amber-50 dark:bg-amber-500/10",
-    hover: "hover:bg-amber-100 dark:hover:bg-amber-500/20",
+    bg: "bg-warning-50 dark:bg-warning-500/10",
+    hover: "hover:bg-warning-100 dark:hover:bg-warning-500/20",
     border: "bg-warning-500",
     icon: "text-warning-500",
   },
@@ -43,14 +43,14 @@ const accentColors = {
     icon: "text-purple-500",
   },
   red: {
-    bg: "bg-red-50 dark:bg-red-500/10",
-    hover: "hover:bg-red-100 dark:hover:bg-red-500/20",
+    bg: "bg-error-50 dark:bg-error-500/10",
+    hover: "hover:bg-error-100 dark:hover:bg-error-500/20",
     border: "bg-error-500",
     icon: "text-error-500",
   },
   success: {
-    bg: "bg-green-50 dark:bg-green-500/10",
-    hover: "hover:bg-green-100 dark:hover:bg-green-500/20",
+    bg: "bg-success-50 dark:bg-success-500/10",
+    hover: "hover:bg-success-100 dark:hover:bg-success-500/20",
     border: "bg-success-500",
     icon: "text-success-500",
   },
diff --git a/frontend/src/components/dashboard/NeedsAttentionBar.tsx b/frontend/src/components/dashboard/NeedsAttentionBar.tsx
index 452372b1..ed78d848 100644
--- a/frontend/src/components/dashboard/NeedsAttentionBar.tsx
+++ b/frontend/src/components/dashboard/NeedsAttentionBar.tsx
@@ -35,38 +35,38 @@ interface NeedsAttentionBarProps {
 const typeConfig = {
   pending_review: {
     icon: CheckCircleIcon,
-    bgColor: 'bg-amber-50 dark:bg-amber-900/20',
-    borderColor: 'border-amber-200 dark:border-amber-800',
-    iconColor: 'text-amber-500',
-    titleColor: 'text-amber-800 dark:text-amber-200',
+    bgColor: 'bg-warning-50 dark:bg-warning-900/20',
+    borderColor: 'border-warning-200 dark:border-warning-800',
+    iconColor: 'text-warning-500',
+    titleColor: 'text-warning-800 dark:text-warning-200',
   },
   sync_failed: {
     icon: AlertIcon,
-    bgColor: 'bg-red-50 dark:bg-red-900/20',
-    borderColor: 'border-red-200 dark:border-red-800',
-    iconColor: 'text-red-500',
-    titleColor: 'text-red-800 dark:text-red-200',
+    bgColor: 'bg-error-50 dark:bg-error-900/20',
+    borderColor: 'border-error-200 dark:border-error-800',
+    iconColor: 'text-error-500',
+    titleColor: 'text-error-800 dark:text-error-200',
   },
   setup_incomplete: {
     icon: AlertIcon,
-    bgColor: 'bg-blue-50 dark:bg-blue-900/20',
-    borderColor: 'border-blue-200 dark:border-blue-800',
-    iconColor: 'text-blue-500',
-    titleColor: 'text-blue-800 dark:text-blue-200',
+    bgColor: 'bg-brand-50 dark:bg-brand-900/20',
+    borderColor: 'border-brand-200 dark:border-brand-800',
+    iconColor: 'text-brand-500',
+    titleColor: 'text-brand-800 dark:text-brand-200',
   },
   automation_failed: {
     icon: AlertIcon,
-    bgColor: 'bg-red-50 dark:bg-red-900/20',
-    borderColor: 'border-red-200 dark:border-red-800',
-    iconColor: 'text-red-500',
-    titleColor: 'text-red-800 dark:text-red-200',
+    bgColor: 'bg-error-50 dark:bg-error-900/20',
+    borderColor: 'border-error-200 dark:border-error-800',
+    iconColor: 'text-error-500',
+    titleColor: 'text-error-800 dark:text-error-200',
   },
   credits_low: {
     icon: AlertIcon,
-    bgColor: 'bg-orange-50 dark:bg-orange-900/20',
-    borderColor: 'border-orange-200 dark:border-orange-800',
-    iconColor: 'text-orange-500',
-    titleColor: 'text-orange-800 dark:text-orange-200',
+    bgColor: 'bg-warning-50 dark:bg-warning-900/20',
+    borderColor: 'border-warning-200 dark:border-warning-800',
+    iconColor: 'text-warning-500',
+    titleColor: 'text-warning-800 dark:text-warning-200',
   },
 };
 
@@ -82,24 +82,24 @@ export default function NeedsAttentionBar({ items, onDismiss }: NeedsAttentionBa
       {/* Header */}
       <button
         onClick={() => setIsCollapsed(!isCollapsed)}
-        className="w-full flex items-center justify-between px-5 py-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-t-xl hover:bg-amber-100 dark:hover:bg-amber-900/30 transition-colors"
+        className="w-full flex items-center justify-between px-5 py-3 bg-warning-50 dark:bg-warning-900/20 border border-warning-200 dark:border-warning-800 rounded-t-xl hover:bg-warning-100 dark:hover:bg-warning-900/30 transition-colors"
       >
         <div className="flex items-center gap-2.5">
-          <AlertIcon className="w-5 h-5 text-amber-600 dark:text-amber-400" />
-          <span className="text-base font-semibold text-amber-800 dark:text-amber-200">
+          <AlertIcon className="w-5 h-5 text-warning-600 dark:text-warning-400" />
+          <span className="text-base font-semibold text-warning-800 dark:text-warning-200">
             Needs Attention ({items.length})
           </span>
         </div>
         {isCollapsed ? (
-          <ChevronDownIcon className="w-5 h-5 text-amber-600 dark:text-amber-400" />
+          <ChevronDownIcon className="w-5 h-5 text-warning-600 dark:text-warning-400" />
         ) : (
-          <ChevronUpIcon className="w-5 h-5 text-amber-600 dark:text-amber-400" />
+          <ChevronUpIcon className="w-5 h-5 text-warning-600 dark:text-warning-400" />
         )}
       </button>
 
       {/* Content */}
       {!isCollapsed && (
-        <div className="border border-t-0 border-amber-200 dark:border-amber-800 rounded-b-xl bg-white dark:bg-gray-900 p-4">
+        <div className="border border-t-0 border-warning-200 dark:border-warning-800 rounded-b-xl bg-white dark:bg-gray-900 p-4">
           <div className="flex flex-wrap gap-3">
             {items.map((item) => {
               const config = typeConfig[item.type];
diff --git a/frontend/src/components/dashboard/OperationsCostsWidget.tsx b/frontend/src/components/dashboard/OperationsCostsWidget.tsx
index 05d6428e..93cd24c8 100644
--- a/frontend/src/components/dashboard/OperationsCostsWidget.tsx
+++ b/frontend/src/components/dashboard/OperationsCostsWidget.tsx
@@ -34,19 +34,19 @@ const operationConfig = {
   ideas: { 
     label: 'Ideas', 
     icon: BoltIcon, 
-    color: 'text-orange-600 dark:text-orange-400',
+    color: 'text-warning-600 dark:text-warning-400',
     href: '/planner/ideas',
   },
   content: { 
     label: 'Content', 
     icon: FileTextIcon, 
-    color: 'text-green-600 dark:text-green-400',
+    color: 'text-success-600 dark:text-success-400',
     href: '/writer/content',
   },
   images: { 
     label: 'Images', 
     icon: FileIcon, 
-    color: 'text-pink-600 dark:text-pink-400',
+    color: 'text-purple-600 dark:text-purple-400',
     href: '/writer/images',
   },
 };
diff --git a/frontend/src/components/dashboard/QuickActionsWidget.tsx b/frontend/src/components/dashboard/QuickActionsWidget.tsx
index 80eaccf7..e00f428c 100644
--- a/frontend/src/components/dashboard/QuickActionsWidget.tsx
+++ b/frontend/src/components/dashboard/QuickActionsWidget.tsx
@@ -28,7 +28,7 @@ const workflowSteps = [
     description: 'Import your target keywords manually or from CSV',
     href: '/planner/keyword-opportunities',
     actionLabel: 'Add',
-    color: 'text-blue-600 dark:text-blue-400',
+    color: 'text-brand-600 dark:text-brand-400',
   },
   { 
     num: 2, 
@@ -46,7 +46,7 @@ const workflowSteps = [
     description: 'Create content ideas from your keyword clusters',
     href: '/planner/ideas',
     actionLabel: 'Ideas',
-    color: 'text-orange-600 dark:text-orange-400',
+    color: 'text-warning-600 dark:text-warning-400',
   },
   { 
     num: 4, 
@@ -55,7 +55,7 @@ const workflowSteps = [
     description: 'Convert approved ideas into content tasks',
     href: '/writer/tasks',
     actionLabel: 'Tasks',
-    color: 'text-indigo-600 dark:text-indigo-400',
+    color: 'text-purple-600 dark:text-purple-400',
   },
   { 
     num: 5, 
@@ -64,7 +64,7 @@ const workflowSteps = [
     description: 'AI writes SEO-optimized articles from tasks',
     href: '/writer/content',
     actionLabel: 'Write',
-    color: 'text-green-600 dark:text-green-400',
+    color: 'text-success-600 dark:text-success-400',
   },
   { 
     num: 6, 
@@ -73,7 +73,7 @@ const workflowSteps = [
     description: 'Create featured images and media for articles',
     href: '/writer/images',
     actionLabel: 'Images',
-    color: 'text-pink-600 dark:text-pink-400',
+    color: 'text-purple-600 dark:text-purple-400',
   },
   { 
     num: 7, 
@@ -82,7 +82,7 @@ const workflowSteps = [
     description: 'Quality check and approve generated content',
     href: '/writer/review',
     actionLabel: 'Review',
-    color: 'text-amber-600 dark:text-amber-400',
+    color: 'text-warning-600 dark:text-warning-400',
   },
   { 
     num: 8, 
@@ -91,7 +91,7 @@ const workflowSteps = [
     description: 'Push approved content to your WordPress site',
     href: '/writer/published',
     actionLabel: 'Publish',
-    color: 'text-emerald-600 dark:text-emerald-400',
+    color: 'text-purple-600 dark:text-purple-400',
   },
 ];
 
diff --git a/frontend/src/components/dashboard/RecentActivityWidget.tsx b/frontend/src/components/dashboard/RecentActivityWidget.tsx
index 7d257451..586cc0c5 100644
--- a/frontend/src/components/dashboard/RecentActivityWidget.tsx
+++ b/frontend/src/components/dashboard/RecentActivityWidget.tsx
@@ -30,17 +30,20 @@ interface RecentActivityWidgetProps {
   loading?: boolean;
 }
 
-const activityConfig = {
+const activityConfig: Record<string, { icon: typeof GroupIcon; color: string; bgColor: string }> = {
   clustering: { icon: GroupIcon, color: 'text-purple-600 dark:text-purple-400', bgColor: 'bg-purple-100 dark:bg-purple-900/40' },
-  ideas: { icon: BoltIcon, color: 'text-orange-600 dark:text-orange-400', bgColor: 'bg-orange-100 dark:bg-orange-900/40' },
-  content: { icon: FileTextIcon, color: 'text-green-600 dark:text-green-400', bgColor: 'bg-green-100 dark:bg-green-900/40' },
-  images: { icon: FileIcon, color: 'text-pink-600 dark:text-pink-400', bgColor: 'bg-pink-100 dark:bg-pink-900/40' },
-  published: { icon: PaperPlaneIcon, color: 'text-emerald-600 dark:text-emerald-400', bgColor: 'bg-emerald-100 dark:bg-emerald-900/40' },
-  keywords: { icon: ListIcon, color: 'text-blue-600 dark:text-blue-400', bgColor: 'bg-blue-100 dark:bg-blue-900/40' },
-  error: { icon: AlertIcon, color: 'text-red-600 dark:text-red-400', bgColor: 'bg-red-100 dark:bg-red-900/40' },
-  sync: { icon: CheckCircleIcon, color: 'text-teal-600 dark:text-teal-400', bgColor: 'bg-teal-100 dark:bg-teal-900/40' },
+  ideas: { icon: BoltIcon, color: 'text-warning-600 dark:text-warning-400', bgColor: 'bg-warning-100 dark:bg-warning-900/40' },
+  content: { icon: FileTextIcon, color: 'text-success-600 dark:text-success-400', bgColor: 'bg-success-100 dark:bg-success-900/40' },
+  images: { icon: FileIcon, color: 'text-purple-600 dark:text-purple-400', bgColor: 'bg-purple-100 dark:bg-purple-900/40' },
+  published: { icon: PaperPlaneIcon, color: 'text-purple-600 dark:text-purple-400', bgColor: 'bg-purple-100 dark:bg-purple-900/40' },
+  keywords: { icon: ListIcon, color: 'text-brand-600 dark:text-brand-400', bgColor: 'bg-brand-100 dark:bg-brand-900/40' },
+  error: { icon: AlertIcon, color: 'text-error-600 dark:text-error-400', bgColor: 'bg-error-100 dark:bg-error-900/40' },
+  sync: { icon: CheckCircleIcon, color: 'text-purple-600 dark:text-purple-400', bgColor: 'bg-purple-100 dark:bg-purple-900/40' },
 };
 
+// Default config for unknown activity types
+const defaultActivityConfig = { icon: BoltIcon, color: 'text-gray-600 dark:text-gray-400', bgColor: 'bg-gray-100 dark:bg-gray-900/40' };
+
 function formatRelativeTime(date: Date): string {
   const now = new Date();
   const diffMs = now.getTime() - date.getTime();
@@ -87,7 +90,7 @@ export default function RecentActivityWidget({ activities, loading }: RecentActi
           </div>
         ) : (
           activities.slice(0, 5).map((activity) => {
-            const config = activityConfig[activity.type];
+            const config = activityConfig[activity.type] || defaultActivityConfig;
             const Icon = config.icon;
             
             const content = (
diff --git a/frontend/src/components/dashboard/SiteConfigWidget.tsx b/frontend/src/components/dashboard/SiteConfigWidget.tsx
index 872d647f..27aa4205 100644
--- a/frontend/src/components/dashboard/SiteConfigWidget.tsx
+++ b/frontend/src/components/dashboard/SiteConfigWidget.tsx
@@ -80,7 +80,7 @@ export default function SiteConfigWidget({
         <h3 className="text-base font-semibold text-gray-800 dark:text-gray-200 uppercase tracking-wide">
           Site Configuration
         </h3>
-        <span className={`text-lg font-bold ${completionPercent === 100 ? 'text-green-600' : 'text-amber-600'}`}>
+        <span className={`text-lg font-bold ${completionPercent === 100 ? 'text-success-600' : 'text-warning-600'}`}>
           {configuredCount}/{totalCount}
         </span>
       </div>
@@ -97,13 +97,13 @@ export default function SiteConfigWidget({
             >
               <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${
                 item.configured 
-                  ? 'bg-green-100 dark:bg-green-900/30' 
-                  : 'bg-amber-100 dark:bg-amber-900/30'
+                  ? 'bg-success-100 dark:bg-success-900/30' 
+                  : 'bg-warning-100 dark:bg-warning-900/30'
               }`}>
                 <Icon className={`w-5 h-5 ${
                   item.configured 
-                    ? 'text-green-600 dark:text-green-400' 
-                    : 'text-amber-600 dark:text-amber-400'
+                    ? 'text-success-600 dark:text-success-400' 
+                    : 'text-warning-600 dark:text-warning-400'
                 }`} />
               </div>
               <div className="flex-1 min-w-0">
@@ -113,15 +113,15 @@ export default function SiteConfigWidget({
                 <p className={`text-xs ${
                   item.configured 
                     ? 'text-gray-600 dark:text-gray-400' 
-                    : 'text-amber-600 dark:text-amber-400'
+                    : 'text-warning-600 dark:text-warning-400'
                 }`}>
                   {item.detail}
                 </p>
               </div>
               {item.configured ? (
-                <CheckCircleIcon className="w-5 h-5 text-green-600 dark:text-green-400" />
+                <CheckCircleIcon className="w-5 h-5 text-success-600 dark:text-success-400" />
               ) : (
-                <AlertIcon className="w-5 h-5 text-amber-600 dark:text-amber-400" />
+                <AlertIcon className="w-5 h-5 text-warning-600 dark:text-warning-400" />
               )}
             </Link>
           );
@@ -137,7 +137,7 @@ export default function SiteConfigWidget({
         <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
           <div 
             className={`h-2 rounded-full transition-all ${
-              completionPercent === 100 ? 'bg-green-500' : 'bg-amber-500'
+              completionPercent === 100 ? 'bg-success-500' : 'bg-warning-500'
             }`}
             style={{ width: `${completionPercent}%` }}
           ></div>
diff --git a/frontend/src/components/dashboard/WorkflowPipelineWidget.tsx b/frontend/src/components/dashboard/WorkflowPipelineWidget.tsx
index baf3e6fa..ebe0209f 100644
--- a/frontend/src/components/dashboard/WorkflowPipelineWidget.tsx
+++ b/frontend/src/components/dashboard/WorkflowPipelineWidget.tsx
@@ -34,13 +34,13 @@ interface WorkflowPipelineWidgetProps {
 }
 
 const stages = [
-  { key: 'sites', label: 'Sites', icon: GridIcon, href: '/sites', color: 'text-blue-600 dark:text-blue-400' },
-  { key: 'keywords', label: 'Keywords', icon: ListIcon, href: '/planner/keywords', color: 'text-blue-600 dark:text-blue-400' },
+  { key: 'sites', label: 'Sites', icon: GridIcon, href: '/sites', color: 'text-brand-600 dark:text-brand-400' },
+  { key: 'keywords', label: 'Keywords', icon: ListIcon, href: '/planner/keywords', color: 'text-brand-600 dark:text-brand-400' },
   { key: 'clusters', label: 'Clusters', icon: GroupIcon, href: '/planner/clusters', color: 'text-purple-600 dark:text-purple-400' },
-  { key: 'ideas', label: 'Ideas', icon: BoltIcon, href: '/planner/ideas', color: 'text-orange-600 dark:text-orange-400' },
-  { key: 'tasks', label: 'Tasks', icon: CheckCircleIcon, href: '/writer/tasks', color: 'text-indigo-600 dark:text-indigo-400' },
-  { key: 'drafts', label: 'Drafts', icon: FileTextIcon, href: '/writer/content', color: 'text-green-600 dark:text-green-400' },
-  { key: 'published', label: 'Published', icon: PaperPlaneIcon, href: '/writer/published', color: 'text-emerald-600 dark:text-emerald-400' },
+  { key: 'ideas', label: 'Ideas', icon: BoltIcon, href: '/planner/ideas', color: 'text-warning-600 dark:text-warning-400' },
+  { key: 'tasks', label: 'Tasks', icon: CheckCircleIcon, href: '/writer/tasks', color: 'text-purple-600 dark:text-purple-400' },
+  { key: 'drafts', label: 'Drafts', icon: FileTextIcon, href: '/writer/content', color: 'text-success-600 dark:text-success-400' },
+  { key: 'published', label: 'Published', icon: PaperPlaneIcon, href: '/writer/published', color: 'text-purple-600 dark:text-purple-400' },
 ] as const;
 
 // Small filled arrow triangle component
diff --git a/frontend/src/components/ecommerce/CountryMap.tsx b/frontend/src/components/ecommerce/CountryMap.tsx
index 068c846e..9f838412 100644
--- a/frontend/src/components/ecommerce/CountryMap.tsx
+++ b/frontend/src/components/ecommerce/CountryMap.tsx
@@ -14,7 +14,7 @@ const CountryMap: React.FC<CountryMapProps> = ({ mapColor }) => {
       backgroundColor="transparent"
       markerStyle={{
         initial: {
-          fill: "#465FFF",
+          fill: "var(--color-primary)",
           r: 4, // Custom radius for markers
         } as any, // Type assertion to bypass strict CSS property checks
       }}
@@ -24,27 +24,27 @@ const CountryMap: React.FC<CountryMapProps> = ({ mapColor }) => {
           latLng: [37.2580397, -104.657039],
           name: "United States",
           style: {
-            fill: "#465FFF",
+            fill: "var(--color-primary)",
             borderWidth: 1,
             borderColor: "white",
-            stroke: "#383f47",
+            stroke: "var(--color-gray-700)",
           },
         },
         {
           latLng: [20.7504374, 73.7276105],
           name: "India",
-          style: { fill: "#465FFF", borderWidth: 1, borderColor: "white" },
+          style: { fill: "var(--color-primary)", borderWidth: 1, borderColor: "white" },
         },
         {
           latLng: [53.613, -11.6368],
           name: "United Kingdom",
-          style: { fill: "#465FFF", borderWidth: 1, borderColor: "white" },
+          style: { fill: "var(--color-primary)", borderWidth: 1, borderColor: "white" },
         },
         {
           latLng: [-25.0304388, 115.2092761],
           name: "Sweden",
           style: {
-            fill: "#465FFF",
+            fill: "var(--color-primary)",
             borderWidth: 1,
             borderColor: "white",
             strokeOpacity: 0,
@@ -58,7 +58,7 @@ const CountryMap: React.FC<CountryMapProps> = ({ mapColor }) => {
       zoomStep={1.5}
       regionStyle={{
         initial: {
-          fill: mapColor || "#D0D5DD",
+          fill: mapColor || "var(--color-gray-300)",
           fillOpacity: 1,
           fontFamily: "Outfit",
           stroke: "none",
@@ -68,17 +68,17 @@ const CountryMap: React.FC<CountryMapProps> = ({ mapColor }) => {
         hover: {
           fillOpacity: 0.7,
           cursor: "pointer",
-          fill: "#465fff",
+          fill: "var(--color-primary)",
           stroke: "none",
         },
         selected: {
-          fill: "#465FFF",
+          fill: "var(--color-primary)",
         },
         selectedHover: {},
       }}
       regionLabelStyle={{
         initial: {
-          fill: "#35373e",
+          fill: "var(--color-gray-700)",
           fontWeight: 500,
           fontSize: "13px",
           stroke: "none",
diff --git a/frontend/src/components/ecommerce/MonthlySalesChart.tsx b/frontend/src/components/ecommerce/MonthlySalesChart.tsx
index 9615f67b..36a0b0e8 100644
--- a/frontend/src/components/ecommerce/MonthlySalesChart.tsx
+++ b/frontend/src/components/ecommerce/MonthlySalesChart.tsx
@@ -7,7 +7,7 @@ import { useState } from "react";
 
 export default function MonthlySalesChart() {
   const options: ApexOptions = {
-    colors: ["#465fff"],
+    colors: ["var(--color-primary)"],
     chart: {
       fontFamily: "Outfit, sans-serif",
       type: "bar",
diff --git a/frontend/src/components/ecommerce/MonthlyTarget.tsx b/frontend/src/components/ecommerce/MonthlyTarget.tsx
index 666b5c52..e099d9da 100644
--- a/frontend/src/components/ecommerce/MonthlyTarget.tsx
+++ b/frontend/src/components/ecommerce/MonthlyTarget.tsx
@@ -8,7 +8,7 @@ import { MoreDotIcon } from "../../icons";
 export default function MonthlyTarget() {
   const series = [75.55];
   const options: ApexOptions = {
-    colors: ["#465FFF"],
+    colors: ["var(--color-primary)"],
     chart: {
       fontFamily: "Outfit, sans-serif",
       type: "radialBar",
@@ -25,7 +25,7 @@ export default function MonthlyTarget() {
           size: "80%",
         },
         track: {
-          background: "#E4E7EC",
+          background: "var(--color-gray-200)",
           strokeWidth: "100%",
           margin: 5, // margin is in pixels
         },
@@ -37,7 +37,7 @@ export default function MonthlyTarget() {
             fontSize: "36px",
             fontWeight: "600",
             offsetY: -40,
-            color: "#1D2939",
+            color: "var(--color-gray-800)",
             formatter: function (val) {
               return val + "%";
             },
@@ -47,7 +47,7 @@ export default function MonthlyTarget() {
     },
     fill: {
       type: "solid",
-      colors: ["#465FFF"],
+      colors: ["var(--color-primary)"],
     },
     stroke: {
       lineCap: "round",
diff --git a/frontend/src/components/ecommerce/StatisticsChart.tsx b/frontend/src/components/ecommerce/StatisticsChart.tsx
index 80a8f491..c169853e 100644
--- a/frontend/src/components/ecommerce/StatisticsChart.tsx
+++ b/frontend/src/components/ecommerce/StatisticsChart.tsx
@@ -9,7 +9,7 @@ export default function StatisticsChart() {
       position: "top",
       horizontalAlign: "left",
     },
-    colors: ["#465FFF", "#9CB9FF"], // Define line colors
+    colors: ["var(--color-primary)", "var(--color-brand-300)"], // Define line colors
     chart: {
       fontFamily: "Outfit, sans-serif",
       height: 310,
@@ -89,7 +89,7 @@ export default function StatisticsChart() {
       labels: {
         style: {
           fontSize: "12px", // Adjust font size for y-axis labels
-          colors: ["#6B7280"], // Color of the labels
+          colors: ["var(--color-gray-500)"], // Color of the labels
         },
       },
       title: {
diff --git a/frontend/src/components/header/NotificationDropdown.tsx b/frontend/src/components/header/NotificationDropdown.tsx
index 7c1b754a..cd59a993 100644
--- a/frontend/src/components/header/NotificationDropdown.tsx
+++ b/frontend/src/components/header/NotificationDropdown.tsx
@@ -134,9 +134,9 @@ export default function NotificationDropdown() {
       >
         {/* Notification badge */}
         {unreadCount > 0 && (
-          <span className="absolute -right-0.5 -top-0.5 z-10 flex h-5 w-5 items-center justify-center rounded-full bg-orange-500 text-[10px] font-semibold text-white">
+          <span className="absolute -right-0.5 -top-0.5 z-10 flex h-5 w-5 items-center justify-center rounded-full bg-warning-500 text-[10px] font-semibold text-white">
             {unreadCount > 9 ? '9+' : unreadCount}
-            <span className="absolute inline-flex w-full h-full bg-orange-400 rounded-full opacity-75 animate-ping"></span>
+            <span className="absolute inline-flex w-full h-full bg-warning-400 rounded-full opacity-75 animate-ping"></span>
           </span>
         )}
         <svg
@@ -243,7 +243,7 @@ export default function NotificationDropdown() {
                       notification.actionHref
                     )}
                     className={`flex gap-3 rounded-lg border-b border-gray-100 p-3 hover:bg-gray-50 dark:border-gray-800 dark:hover:bg-white/5 ${
-                      !notification.read ? 'bg-blue-50/50 dark:bg-blue-900/10' : ''
+                      !notification.read ? 'bg-brand-50/50 dark:bg-brand-900/10' : ''
                     }`}
                   >
                     {/* Icon */}
diff --git a/frontend/src/components/header/NotificationDropdownNew.tsx b/frontend/src/components/header/NotificationDropdownNew.tsx
index 2097bde2..0693484e 100644
--- a/frontend/src/components/header/NotificationDropdownNew.tsx
+++ b/frontend/src/components/header/NotificationDropdownNew.tsx
@@ -105,9 +105,9 @@ export default function NotificationDropdown() {
       >
         {/* Notification badge */}
         {unreadCount > 0 && (
-          <span className="absolute -right-0.5 -top-0.5 z-10 flex h-5 w-5 items-center justify-center rounded-full bg-orange-500 text-[10px] font-semibold text-white">
+          <span className="absolute -right-0.5 -top-0.5 z-10 flex h-5 w-5 items-center justify-center rounded-full bg-warning-500 text-[10px] font-semibold text-white">
             {unreadCount > 9 ? '9+' : unreadCount}
-            <span className="absolute inline-flex w-full h-full bg-orange-400 rounded-full opacity-75 animate-ping"></span>
+            <span className="absolute inline-flex w-full h-full bg-warning-400 rounded-full opacity-75 animate-ping"></span>
           </span>
         )}
         <svg
@@ -205,7 +205,7 @@ export default function NotificationDropdown() {
                       notification.actionHref
                     )}
                     className={`flex gap-3 rounded-lg border-b border-gray-100 p-3 hover:bg-gray-50 dark:border-gray-800 dark:hover:bg-white/5 ${
-                      !notification.read ? 'bg-blue-50/50 dark:bg-blue-900/10' : ''
+                      !notification.read ? 'bg-brand-50/50 dark:bg-brand-900/10' : ''
                     }`}
                   >
                     {/* Icon */}
diff --git a/frontend/src/components/header/SiteSwitcher.tsx b/frontend/src/components/header/SiteSwitcher.tsx
index 3bec65ab..cb93e3fe 100644
--- a/frontend/src/components/header/SiteSwitcher.tsx
+++ b/frontend/src/components/header/SiteSwitcher.tsx
@@ -194,14 +194,14 @@ export default function SiteSwitcher({ hiddenPaths }: SiteSwitcherProps) {
             onItemClick={() => handleSiteSelect(site.id)}
             className={`flex items-center gap-3 px-3 py-2 font-medium rounded-lg text-sm text-left ${
               activeSite?.id === site.id
-                ? "bg-blue-50 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300"
+                ? "bg-brand-50 text-brand-700 dark:bg-brand-500/20 dark:text-brand-300"
                 : "text-gray-700 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
             }`}
           >
             <span className="flex-1">{site.name}</span>
             {activeSite?.id === site.id && (
               <svg
-                className="w-4 h-4 text-blue-600 dark:text-blue-400"
+                className="w-4 h-4 text-brand-600 dark:text-brand-400"
                 fill="currentColor"
                 viewBox="0 0 20 20"
               >
diff --git a/frontend/src/components/integration/IntegrationStatus.tsx b/frontend/src/components/integration/IntegrationStatus.tsx
index 77daedb6..b718c34b 100644
--- a/frontend/src/components/integration/IntegrationStatus.tsx
+++ b/frontend/src/components/integration/IntegrationStatus.tsx
@@ -21,11 +21,11 @@ export default function IntegrationStatus({
   const getStatusIcon = () => {
     switch (syncStatus) {
       case 'success':
-        return <CheckCircleIcon className="w-5 h-5 text-green-500" />;
+        return <CheckCircleIcon className="w-5 h-5 text-success-500" />;
       case 'failed':
-        return <XCircleIcon className="w-5 h-5 text-red-500" />;
+        return <XCircleIcon className="w-5 h-5 text-error-500" />;
       case 'syncing':
-        return <RefreshCw className="w-5 h-5 text-blue-500 animate-spin" />;
+        return <RefreshCw className="w-5 h-5 text-brand-500 animate-spin" />;
       default:
         return <ClockIcon className="w-5 h-5 text-gray-400" />;
     }
@@ -65,7 +65,7 @@ export default function IntegrationStatus({
         <div className="text-xs text-gray-600 dark:text-gray-400">
           <div>Last sync: {formatDate(lastSyncAt)}</div>
           {syncError && (
-            <div className="text-red-600 dark:text-red-400 mt-1">
+            <div className="text-error-600 dark:text-error-400 mt-1">
               Error: {syncError}
             </div>
           )}
diff --git a/frontend/src/components/linker/LinkResults.tsx b/frontend/src/components/linker/LinkResults.tsx
index 68193e32..6565e042 100644
--- a/frontend/src/components/linker/LinkResults.tsx
+++ b/frontend/src/components/linker/LinkResults.tsx
@@ -29,7 +29,7 @@ export const LinkResults: React.FC<LinkResultsProps> = ({
         <div className="flex items-center justify-between mb-4">
           <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Linking Results</h3>
           <div className="flex items-center gap-2">
-            <PlugInIcon className="w-5 h-5 text-blue-500" />
+            <PlugInIcon className="w-5 h-5 text-brand-500" />
             <span className="text-sm text-gray-600 dark:text-gray-400">Version {linkerVersion}</span>
           </div>
         </div>
@@ -46,14 +46,14 @@ export const LinkResults: React.FC<LinkResultsProps> = ({
       <div className="flex items-center justify-between mb-4">
         <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Linking Results</h3>
         <div className="flex items-center gap-2">
-          <PlugInIcon className="w-5 h-5 text-blue-500" />
+          <PlugInIcon className="w-5 h-5 text-brand-500" />
           <span className="text-sm text-gray-600 dark:text-gray-400">Version {linkerVersion}</span>
         </div>
       </div>
 
       {linksAdded > 0 ? (
         <div className="space-y-4">
-          <div className="flex items-center gap-2 text-green-600 dark:text-green-400">
+          <div className="flex items-center gap-2 text-success-600 dark:text-success-400">
             <CheckCircleIcon className="w-5 h-5" />
             <span className="font-medium">{linksAdded} link{linksAdded !== 1 ? 's' : ''} added</span>
           </div>
@@ -63,15 +63,15 @@ export const LinkResults: React.FC<LinkResultsProps> = ({
             {/* Stage 3: Group links by cluster match */}
             {links.some(l => l.cluster_match) && (
               <div className="mb-4">
-                <div className="text-xs font-semibold text-blue-600 dark:text-blue-400 mb-2">
+                <div className="text-xs font-semibold text-brand-600 dark:text-brand-400 mb-2">
                   Cluster Matches (High Priority)
                 </div>
                 <ul className="space-y-2">
                   {links.filter(l => l.cluster_match).map((link, index) => (
-                    <li key={`cluster-${index}`} className="flex items-center gap-2 text-sm pl-2 border-l-2 border-blue-500">
+                    <li key={`cluster-${index}`} className="flex items-center gap-2 text-sm pl-2 border-l-2 border-brand-500">
                       <span className="text-gray-600 dark:text-gray-400">"{link.anchor_text || 'Untitled'}"</span>
                       <span className="text-gray-400">→</span>
-                      <span className="text-blue-600 dark:text-blue-400">
+                      <span className="text-brand-600 dark:text-brand-400">
                         Content #{link.target_content_id || 'N/A'}
                       </span>
                       {link.relevance_score !== undefined && (
@@ -96,7 +96,7 @@ export const LinkResults: React.FC<LinkResultsProps> = ({
                     <li key={`other-${index}`} className="flex items-center gap-2 text-sm">
                       <span className="text-gray-600 dark:text-gray-400">"{link.anchor_text || 'Untitled'}"</span>
                       <span className="text-gray-400">→</span>
-                      <span className="text-blue-600 dark:text-blue-400">
+                      <span className="text-brand-600 dark:text-brand-400">
                         Content #{link.target_content_id || 'N/A'}
                       </span>
                       {link.relevance_score !== undefined && (
@@ -117,7 +117,7 @@ export const LinkResults: React.FC<LinkResultsProps> = ({
                   <li key={index} className="flex items-center gap-2 text-sm">
                     <span className="text-gray-600 dark:text-gray-400">"{link.anchor_text}"</span>
                     <span className="text-gray-400">→</span>
-                    <span className="text-blue-600 dark:text-blue-400">
+                    <span className="text-brand-600 dark:text-brand-400">
                       Content #{link.target_content_id}
                     </span>
                   </li>
diff --git a/frontend/src/components/onboarding/WorkflowGuide.tsx b/frontend/src/components/onboarding/WorkflowGuide.tsx
index d18c9e68..c2cd848f 100644
--- a/frontend/src/components/onboarding/WorkflowGuide.tsx
+++ b/frontend/src/components/onboarding/WorkflowGuide.tsx
@@ -200,12 +200,12 @@ export default function WorkflowGuide({ onSiteAdded }: WorkflowGuideProps) {
 
   return (
     <div className="mb-8">
-      <Card className="rounded-2xl border-2 border-orange-200 bg-gradient-to-br from-orange-50 to-white dark:from-orange-950/20 dark:to-gray-900 dark:border-orange-800 p-6 md:p-8">
+      <Card className="rounded-2xl border-2 border-warning-200 bg-gradient-to-br from-warning-50 to-white dark:from-warning-950/20 dark:to-gray-900 dark:border-warning-800 p-6 md:p-8">
         {/* Header */}
         <div className="flex items-start justify-between mb-6">
           <div className="flex-1">
             <div className="flex items-center gap-3 mb-2">
-              <div className="size-12 rounded-xl bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center text-white shadow-lg">
+              <div className="size-12 rounded-xl bg-gradient-to-br from-warning-500 to-warning-600 flex items-center justify-center text-white shadow-lg">
                 <BoltIcon className="h-6 w-6" />
               </div>
               <div>
@@ -230,9 +230,9 @@ export default function WorkflowGuide({ onSiteAdded }: WorkflowGuideProps) {
 
         {/* Site Integration Option */}
         <div className="mb-6">
-          <Card className="p-6 border-2 border-blue-200 dark:border-blue-800">
+          <Card className="p-6 border-2 border-brand-200 dark:border-brand-800">
             <div className="flex items-start gap-4 mb-6">
-              <div className="size-12 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white flex-shrink-0">
+              <div className="size-12 rounded-xl bg-gradient-to-br from-brand-500 to-brand-600 flex items-center justify-center text-white flex-shrink-0">
                 <PlugInIcon className="h-6 w-6" />
               </div>
               <div className="flex-1">
@@ -252,12 +252,12 @@ export default function WorkflowGuide({ onSiteAdded }: WorkflowGuideProps) {
                 onClick={handleWordPressCardClick}
                 className={`flex items-center justify-between p-4 rounded-lg border-2 transition-all duration-200 group ${
                   isWordPressExpanded
-                    ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
-                    : 'border-gray-200 dark:border-gray-700 hover:border-blue-400 dark:hover:border-blue-600 bg-white dark:bg-gray-800'
+                    ? 'border-brand-500 bg-brand-50 dark:bg-brand-900/20'
+                    : 'border-gray-200 dark:border-gray-700 hover:border-brand-400 dark:hover:border-brand-600 bg-white dark:bg-gray-800'
                 }`}
               >
                 <div className="flex items-center gap-3">
-                  <PlugInIcon className={`w-5 h-5 ${isWordPressExpanded ? 'text-blue-600 dark:text-blue-400' : 'text-blue-600 dark:text-blue-400'}`} />
+                  <PlugInIcon className={`w-5 h-5 ${isWordPressExpanded ? 'text-brand-600 dark:text-brand-400' : 'text-brand-600 dark:text-brand-400'}`} />
                   <div className="text-left">
                     <div className="font-semibold text-gray-900 dark:text-white">
                       WordPress Site
@@ -269,8 +269,8 @@ export default function WorkflowGuide({ onSiteAdded }: WorkflowGuideProps) {
                 </div>
                 <ArrowRightIcon className={`w-5 h-5 transition-transform ${isWordPressExpanded ? 'transform rotate-90' : ''} ${
                   isWordPressExpanded 
-                    ? 'text-blue-600 dark:text-blue-400' 
-                    : 'text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-400'
+                    ? 'text-brand-600 dark:text-brand-400' 
+                    : 'text-gray-400 group-hover:text-brand-600 dark:group-hover:text-brand-400'
                 }`} />
               </button>
               
@@ -302,7 +302,7 @@ export default function WorkflowGuide({ onSiteAdded }: WorkflowGuideProps) {
                       value={siteName}
                       onChange={(e) => setSiteName(e.target.value)}
                       placeholder="Enter site name"
-                      className="w-full px-4 py-2.5 border-2 border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-base focus:border-blue-500 focus:ring-2 focus:ring-blue-200 dark:focus:ring-blue-800"
+                      className="w-full px-4 py-2.5 border-2 border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-base focus:border-brand-500 focus:ring-2 focus:ring-brand-200 dark:focus:ring-brand-800"
                     />
                   </div>
 
@@ -316,7 +316,7 @@ export default function WorkflowGuide({ onSiteAdded }: WorkflowGuideProps) {
                       value={websiteAddress}
                       onChange={(e) => setWebsiteAddress(e.target.value)}
                       placeholder="https://example.com"
-                      className="w-full px-4 py-2.5 border-2 border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-base focus:border-blue-500 focus:ring-2 focus:ring-blue-200 dark:focus:ring-blue-800"
+                      className="w-full px-4 py-2.5 border-2 border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-base focus:border-brand-500 focus:ring-2 focus:ring-brand-200 dark:focus:ring-brand-800"
                     />
                   </div>
 
@@ -359,7 +359,7 @@ export default function WorkflowGuide({ onSiteAdded }: WorkflowGuideProps) {
                           key={sector.slug}
                           className={`p-4 hover:shadow-lg transition-all duration-200 border-2 cursor-pointer ${
                             selectedSectors.includes(sector.slug)
-                              ? 'border-[var(--color-primary)] bg-blue-50 dark:bg-blue-900/20'
+                              ? 'border-[var(--color-primary)] bg-brand-50 dark:bg-brand-900/20'
                               : 'border-gray-200 dark:border-gray-700'
                           }`}
                           onClick={() => handleSectorToggle(sector.slug)}
diff --git a/frontend/src/components/optimizer/OptimizationScores.tsx b/frontend/src/components/optimizer/OptimizationScores.tsx
index e3bdebd5..381247f7 100644
--- a/frontend/src/components/optimizer/OptimizationScores.tsx
+++ b/frontend/src/components/optimizer/OptimizationScores.tsx
@@ -29,22 +29,22 @@ export const OptimizationScores: React.FC<OptimizationScoresProps> = ({
   className = '',
 }) => {
   const getScoreColor = (score: number) => {
-    if (score >= 80) return 'text-green-600 dark:text-green-400';
-    if (score >= 60) return 'text-yellow-600 dark:text-yellow-400';
-    return 'text-red-600 dark:text-red-400';
+    if (score >= 80) return 'text-success-600 dark:text-success-400';
+    if (score >= 60) return 'text-warning-600 dark:text-warning-400';
+    return 'text-error-600 dark:text-error-400';
   };
 
   const getScoreBgColor = (score: number) => {
-    if (score >= 80) return 'bg-green-100 dark:bg-green-900';
-    if (score >= 60) return 'bg-yellow-100 dark:bg-yellow-900';
-    return 'bg-red-100 dark:bg-red-900';
+    if (score >= 80) return 'bg-success-100 dark:bg-success-900';
+    if (score >= 60) return 'bg-warning-100 dark:bg-warning-900';
+    return 'bg-error-100 dark:bg-error-900';
   };
 
   const getChangeIcon = (current: number, previous?: number) => {
     if (!previous) return null;
     const diff = current - previous;
-    if (diff > 0) return <ArrowUpIcon className="w-4 h-4 text-green-600" />;
-    if (diff < 0) return <ArrowDownIcon className="w-4 h-4 text-red-600" />;
+    if (diff > 0) return <ArrowUpIcon className="w-4 h-4 text-success-600" />;
+    if (diff < 0) return <ArrowDownIcon className="w-4 h-4 text-error-600" />;
     return <span className="w-4 h-4 text-gray-400">—</span>;
   };
 
@@ -182,7 +182,7 @@ export const OptimizationScores: React.FC<OptimizationScoresProps> = ({
         {/* Metadata indicators */}
         <div className="mt-3 flex flex-wrap gap-2 text-xs">
           {scores.has_cluster_mapping && (
-            <span className="px-2 py-0.5 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded">
+            <span className="px-2 py-0.5 bg-brand-100 dark:bg-brand-900 text-brand-800 dark:text-brand-200 rounded">
               Cluster
             </span>
           )}
@@ -192,7 +192,7 @@ export const OptimizationScores: React.FC<OptimizationScoresProps> = ({
             </span>
           )}
           {scores.has_attributes && (
-            <span className="px-2 py-0.5 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded">
+            <span className="px-2 py-0.5 bg-success-100 dark:bg-success-900 text-success-800 dark:text-success-200 rounded">
               Attributes
             </span>
           )}
diff --git a/frontend/src/components/optimizer/ScoreComparison.tsx b/frontend/src/components/optimizer/ScoreComparison.tsx
index cd52bdd0..19820cdf 100644
--- a/frontend/src/components/optimizer/ScoreComparison.tsx
+++ b/frontend/src/components/optimizer/ScoreComparison.tsx
@@ -37,9 +37,9 @@ export const ScoreComparison: React.FC<ScoreComparisonProps> = ({
             <span
               className={`text-lg font-bold ${
                 overallImprovement.diff > 0
-                  ? 'text-green-600 dark:text-green-400'
+                  ? 'text-success-600 dark:text-success-400'
                   : overallImprovement.diff < 0
-                  ? 'text-red-600 dark:text-red-400'
+                  ? 'text-error-600 dark:text-error-400'
                   : 'text-gray-600 dark:text-gray-400'
               }`}
             >
@@ -84,9 +84,9 @@ export const ScoreComparison: React.FC<ScoreComparisonProps> = ({
                   <span
                     className={`text-sm font-medium ${
                       improvement.diff > 0
-                        ? 'text-green-600 dark:text-green-400'
+                        ? 'text-success-600 dark:text-success-400'
                         : improvement.diff < 0
-                        ? 'text-red-600 dark:text-red-400'
+                        ? 'text-error-600 dark:text-error-400'
                         : 'text-gray-600 dark:text-gray-400'
                     }`}
                   >
@@ -95,9 +95,9 @@ export const ScoreComparison: React.FC<ScoreComparisonProps> = ({
                   <span
                     className={`text-xs ${
                       improvement.diff > 0
-                        ? 'text-green-600 dark:text-green-400'
+                        ? 'text-success-600 dark:text-success-400'
                         : improvement.diff < 0
-                        ? 'text-red-600 dark:text-red-400'
+                        ? 'text-error-600 dark:text-error-400'
                         : 'text-gray-500'
                     }`}
                   >
diff --git a/frontend/src/components/sites/SiteProgressWidget.tsx b/frontend/src/components/sites/SiteProgressWidget.tsx
index f86e07ec..3c65f22d 100644
--- a/frontend/src/components/sites/SiteProgressWidget.tsx
+++ b/frontend/src/components/sites/SiteProgressWidget.tsx
@@ -50,7 +50,7 @@ export default function SiteProgressWidget({ blueprintId, siteId }: SiteProgress
     return (
       <Card className="p-4">
         <div className="text-center py-4">
-          <div className="inline-block animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500 mb-2"></div>
+          <div className="inline-block animate-spin rounded-full h-6 w-6 border-b-2 border-brand-500 mb-2"></div>
           <div className="text-gray-500 dark:text-gray-400">Loading progress...</div>
         </div>
       </Card>
@@ -61,12 +61,12 @@ export default function SiteProgressWidget({ blueprintId, siteId }: SiteProgress
     return (
       <Card className="p-4">
         <div className="text-center py-4">
-          <AlertCircleIcon className="w-8 h-8 text-red-500 mx-auto mb-2" />
-          <div className="text-sm text-red-600 dark:text-red-400 mb-3">{error}</div>
+          <AlertCircleIcon className="w-8 h-8 text-error-500 mx-auto mb-2" />
+          <div className="text-sm text-error-600 dark:text-error-400 mb-3">{error}</div>
           <button
             onClick={handleRetry}
             disabled={retryCount >= 3}
-            className="px-4 py-2 bg-blue-500 hover:bg-blue-600 disabled:bg-gray-400 text-white rounded-lg text-sm font-medium transition-colors"
+            className="px-4 py-2 bg-brand-500 hover:bg-brand-600 disabled:bg-gray-400 text-white rounded-lg text-sm font-medium transition-colors"
             aria-label="Retry loading site progress"
           >
             {retryCount >= 3 ? 'Max retries reached' : 'Retry'}
@@ -185,7 +185,7 @@ export default function SiteProgressWidget({ blueprintId, siteId }: SiteProgress
               key={cluster.cluster_id}
               className={`p-4 rounded-lg border-2 ${
                 cluster.is_complete
-                  ? 'border-green-200 dark:border-green-800 bg-green-50 dark:bg-green-900/20'
+                  ? 'border-success-200 dark:border-success-800 bg-success-50 dark:bg-success-900/20'
                   : 'border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800'
               }`}
             >
@@ -199,9 +199,9 @@ export default function SiteProgressWidget({ blueprintId, siteId }: SiteProgress
                       {cluster.role}
                     </Badge>
                     {cluster.is_complete ? (
-                      <CheckCircleIcon className="w-4 h-4 text-green-600 dark:text-green-400" />
+                      <CheckCircleIcon className="w-4 h-4 text-success-600 dark:text-success-400" />
                     ) : (
-                      <AlertCircleIcon className="w-4 h-4 text-amber-600 dark:text-amber-400" />
+                      <AlertCircleIcon className="w-4 h-4 text-warning-600 dark:text-warning-400" />
                     )}
                   </div>
                   <div className="text-xs text-gray-600 dark:text-gray-400">
@@ -210,7 +210,7 @@ export default function SiteProgressWidget({ blueprintId, siteId }: SiteProgress
                 </div>
                 <button
                   onClick={() => navigate(`/planner/clusters/${cluster.cluster_id}`)}
-                  className="text-xs text-blue-600 dark:text-blue-400 hover:underline flex items-center gap-1 transition-colors"
+                  className="text-xs text-brand-600 dark:text-brand-400 hover:underline flex items-center gap-1 transition-colors"
                   aria-label={`View cluster ${cluster.cluster_name}`}
                 >
                   View <ArrowRightIcon className="w-3 h-3" />
@@ -227,8 +227,8 @@ export default function SiteProgressWidget({ blueprintId, siteId }: SiteProgress
                   <div
                     className={`h-2 rounded-full ${
                       cluster.is_complete
-                        ? 'bg-green-500 dark:bg-green-400'
-                        : 'bg-blue-500 dark:bg-blue-400'
+                        ? 'bg-success-500 dark:bg-success-400'
+                        : 'bg-brand-500 dark:bg-brand-400'
                     }`}
                     style={{ width: `${completionPercent}%` }}
                   />
@@ -254,13 +254,13 @@ export default function SiteProgressWidget({ blueprintId, siteId }: SiteProgress
               {/* Validation Messages */}
               {cluster.validation_messages && cluster.validation_messages.length > 0 && (
                 <div className="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
-                  <div className="text-xs font-medium text-red-600 dark:text-red-400 mb-1">
+                  <div className="text-xs font-medium text-error-600 dark:text-error-400 mb-1">
                     Issues:
                   </div>
                   <ul className="text-xs text-gray-600 dark:text-gray-400 space-y-1">
                     {cluster.validation_messages.map((msg, idx) => (
                       <li key={idx} className="flex items-start gap-1">
-                        <XCircleIcon className="w-3 h-3 text-red-500 mt-0.5 flex-shrink-0" />
+                        <XCircleIcon className="w-3 h-3 text-error-500 mt-0.5 flex-shrink-0" />
                         <span>{msg}</span>
                       </li>
                     ))}
@@ -286,33 +286,33 @@ export default function SiteProgressWidget({ blueprintId, siteId }: SiteProgress
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
           <div className="flex items-center gap-2">
             {validationFlags.clusters_attached ? (
-              <CheckCircleIcon className="w-4 h-4 text-green-600 dark:text-green-400" />
+              <CheckCircleIcon className="w-4 h-4 text-success-600 dark:text-success-400" />
             ) : (
-              <XCircleIcon className="w-4 h-4 text-red-600 dark:text-red-400" />
+              <XCircleIcon className="w-4 h-4 text-error-600 dark:text-error-400" />
             )}
             <span className="text-sm text-gray-700 dark:text-gray-300">Clusters Attached</span>
           </div>
           <div className="flex items-center gap-2">
             {validationFlags.taxonomies_defined ? (
-              <CheckCircleIcon className="w-4 h-4 text-green-600 dark:text-green-400" />
+              <CheckCircleIcon className="w-4 h-4 text-success-600 dark:text-success-400" />
             ) : (
-              <XCircleIcon className="w-4 h-4 text-red-600 dark:text-red-400" />
+              <XCircleIcon className="w-4 h-4 text-error-600 dark:text-error-400" />
             )}
             <span className="text-sm text-gray-700 dark:text-gray-300">Taxonomies Defined</span>
           </div>
           <div className="flex items-center gap-2">
             {validationFlags.sitemap_generated ? (
-              <CheckCircleIcon className="w-4 h-4 text-green-600 dark:text-green-400" />
+              <CheckCircleIcon className="w-4 h-4 text-success-600 dark:text-success-400" />
             ) : (
-              <XCircleIcon className="w-4 h-4 text-red-600 dark:text-red-400" />
+              <XCircleIcon className="w-4 h-4 text-error-600 dark:text-error-400" />
             )}
             <span className="text-sm text-gray-700 dark:text-gray-300">Sitemap Generated</span>
           </div>
           <div className="flex items-center gap-2">
             {validationFlags.all_pages_generated ? (
-              <CheckCircleIcon className="w-4 h-4 text-green-600 dark:text-green-400" />
+              <CheckCircleIcon className="w-4 h-4 text-success-600 dark:text-success-400" />
             ) : (
-              <XCircleIcon className="w-4 h-4 text-red-600 dark:text-red-400" />
+              <XCircleIcon className="w-4 h-4 text-error-600 dark:text-error-400" />
             )}
             <span className="text-sm text-gray-700 dark:text-gray-300">All Pages Generated</span>
           </div>
@@ -322,10 +322,10 @@ export default function SiteProgressWidget({ blueprintId, siteId }: SiteProgress
       
       {/* Error banner if data loaded but has errors */}
       {error && progress && (
-        <div className="mt-4 p-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
+        <div className="mt-4 p-3 bg-warning-50 dark:bg-warning-900/20 border border-warning-200 dark:border-warning-800 rounded-lg">
           <div className="flex items-start gap-2">
-            <AlertCircleIcon className="w-4 h-4 text-yellow-600 dark:text-yellow-400 mt-0.5 flex-shrink-0" />
-            <div className="text-xs text-yellow-800 dark:text-yellow-300">
+            <AlertCircleIcon className="w-4 h-4 text-warning-600 dark:text-warning-400 mt-0.5 flex-shrink-0" />
+            <div className="text-xs text-warning-800 dark:text-warning-300">
               Some data may be outdated. <button onClick={handleRetry} className="underline font-medium">Refresh</button>
             </div>
           </div>
diff --git a/frontend/src/components/sites/SiteSetupChecklist.tsx b/frontend/src/components/sites/SiteSetupChecklist.tsx
index 8cea556f..2c73ce85 100644
--- a/frontend/src/components/sites/SiteSetupChecklist.tsx
+++ b/frontend/src/components/sites/SiteSetupChecklist.tsx
@@ -81,7 +81,7 @@ export default function SiteSetupChecklist({
               key={item.id}
               className={`w-2 h-2 rounded-full ${
                 item.completed
-                  ? 'bg-green-500'
+                  ? 'bg-success-500'
                   : 'bg-gray-300 dark:bg-gray-600'
               }`}
               title={item.label}
@@ -92,7 +92,7 @@ export default function SiteSetupChecklist({
           {completedCount}/{totalCount}
         </span>
         {isComplete && (
-          <span className="text-xs text-green-600 dark:text-green-400 font-medium">
+          <span className="text-xs text-success-600 dark:text-success-400 font-medium">
             ✓ Ready
           </span>
         )}
@@ -116,7 +116,7 @@ export default function SiteSetupChecklist({
       <div className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full mb-4">
         <div
           className={`h-full rounded-full transition-all duration-500 ${
-            isComplete ? 'bg-green-500' : 'bg-blue-500'
+            isComplete ? 'bg-success-500' : 'bg-brand-500'
           }`}
           style={{ width: `${progressPercent}%` }}
         />
@@ -133,7 +133,7 @@ export default function SiteSetupChecklist({
             <div
               className={`flex-shrink-0 w-5 h-5 rounded-full flex items-center justify-center ${
                 item.completed
-                  ? 'bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400'
+                  ? 'bg-success-100 dark:bg-success-900/30 text-success-600 dark:text-success-400'
                   : 'bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-500'
               }`}
             >
@@ -158,9 +158,9 @@ export default function SiteSetupChecklist({
 
       {/* Action button */}
       {isComplete ? (
-        <div className="flex items-center gap-2 p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
-          <CheckLineIcon className="w-5 h-5 text-green-600 dark:text-green-400" />
-          <span className="text-sm font-medium text-green-700 dark:text-green-300">
+        <div className="flex items-center gap-2 p-3 bg-success-50 dark:bg-success-900/20 border border-success-200 dark:border-success-800 rounded-lg">
+          <CheckLineIcon className="w-5 h-5 text-success-600 dark:text-success-400" />
+          <span className="text-sm font-medium text-success-700 dark:text-success-300">
             Ready to create content!
           </span>
           <Button
diff --git a/frontend/src/components/sites/TemplateLibrary.tsx b/frontend/src/components/sites/TemplateLibrary.tsx
index f0e6109e..80ee5ad6 100644
--- a/frontend/src/components/sites/TemplateLibrary.tsx
+++ b/frontend/src/components/sites/TemplateLibrary.tsx
@@ -179,7 +179,7 @@ export default function TemplateLibrary({
                   </div>
                 )}
                 {template.featured && (
-                  <span className="absolute top-2 left-2 bg-yellow-500 text-white text-xs px-2 py-1 rounded">
+                  <span className="absolute top-2 left-2 bg-warning-500 text-white text-xs px-2 py-1 rounded">
                     Featured
                   </span>
                 )}
diff --git a/frontend/src/components/sites/WordPressIntegrationCard.tsx b/frontend/src/components/sites/WordPressIntegrationCard.tsx
index 6b080345..e08a0859 100644
--- a/frontend/src/components/sites/WordPressIntegrationCard.tsx
+++ b/frontend/src/components/sites/WordPressIntegrationCard.tsx
@@ -48,8 +48,8 @@ export default function WordPressIntegrationCard({
       <Card className="p-6">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-3">
-            <div className="p-3 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg">
-              <Globe className="w-6 h-6 text-indigo-600 dark:text-indigo-400" />
+            <div className="p-3 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
+              <Globe className="w-6 h-6 text-purple-600 dark:text-purple-400" />
             </div>
             <div>
               <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
@@ -73,8 +73,8 @@ export default function WordPressIntegrationCard({
       <div className="space-y-4">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-3">
-            <div className="p-3 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg">
-              <Globe className="w-6 h-6 text-indigo-600 dark:text-indigo-400" />
+            <div className="p-3 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
+              <Globe className="w-6 h-6 text-purple-600 dark:text-purple-400" />
             </div>
             <div>
               <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
@@ -101,13 +101,13 @@ export default function WordPressIntegrationCard({
             <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Sync Status</p>
             <div className="flex items-center gap-2">
               {integration.sync_status === 'success' || integration.sync_status === 'healthy' ? (
-                <CheckCircle className="w-4 h-4 text-green-500" />
+                <CheckCircle className="w-4 h-4 text-success-500" />
               ) : integration.sync_status === 'failed' || integration.sync_status === 'error' ? (
-                <XCircle className="w-4 h-4 text-red-500" />
+                <XCircle className="w-4 h-4 text-error-500" />
               ) : integration.sync_status === 'warning' ? (
-                <AlertCircle className="w-4 h-4 text-yellow-500" />
+                <AlertCircle className="w-4 h-4 text-warning-500" />
               ) : (
-                <RefreshCw className="w-4 h-4 text-yellow-500 animate-spin" />
+                <RefreshCw className="w-4 h-4 text-warning-500 animate-spin" />
               )}
               <span className="text-sm font-medium text-gray-900 dark:text-white capitalize">
                 {integration.sync_status === 'healthy' ? 'Healthy' : 
@@ -132,7 +132,7 @@ export default function WordPressIntegrationCard({
           <div className="pt-2 border-t border-gray-200 dark:border-gray-700">
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2">
-                <AlertCircle className="w-4 h-4 text-yellow-500" />
+                <AlertCircle className="w-4 h-4 text-warning-500" />
                 <span className="text-sm text-gray-600 dark:text-gray-400">
                   {integration.mismatch_count} sync mismatch{integration.mismatch_count !== 1 ? 'es' : ''} detected
                 </span>
@@ -153,14 +153,14 @@ export default function WordPressIntegrationCard({
 
         {integration.sync_error && (
           <div className="pt-2 border-t border-gray-200 dark:border-gray-700">
-            <div className="p-2 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+            <div className="p-2 bg-error-50 dark:bg-error-900/20 border border-error-200 dark:border-error-800 rounded-lg">
               <div className="flex items-start gap-2">
-                <XCircle className="w-4 h-4 text-red-500 mt-0.5 flex-shrink-0" />
+                <XCircle className="w-4 h-4 text-error-500 mt-0.5 flex-shrink-0" />
                 <div className="flex-1">
-                  <p className="text-xs font-medium text-red-800 dark:text-red-300 mb-1">
+                  <p className="text-xs font-medium text-error-800 dark:text-error-300 mb-1">
                     Sync Error
                   </p>
-                  <p className="text-xs text-red-700 dark:text-red-400">
+                  <p className="text-xs text-error-700 dark:text-error-400">
                     {integration.sync_error}
                   </p>
                 </div>
diff --git a/frontend/src/components/sites/WordPressIntegrationForm.tsx b/frontend/src/components/sites/WordPressIntegrationForm.tsx
index f6763742..1c3cc08b 100644
--- a/frontend/src/components/sites/WordPressIntegrationForm.tsx
+++ b/frontend/src/components/sites/WordPressIntegrationForm.tsx
@@ -201,8 +201,8 @@ export default function WordPressIntegrationForm({
       {/* Header with Toggle */}
       <div className="flex items-center justify-between gap-3">
         <div className="flex items-center gap-3">
-          <div className="p-3 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg">
-            <Globe className="w-6 h-6 text-indigo-600 dark:text-indigo-400" />
+          <div className="p-3 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
+            <Globe className="w-6 h-6 text-purple-600 dark:text-purple-400" />
           </div>
           <div>
             <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
@@ -343,7 +343,7 @@ export default function WordPressIntegrationForm({
                     </div>
                   </td>
                   <td className="px-5 py-3 whitespace-nowrap">
-                    <span className="inline-flex items-center justify-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium bg-green-50 text-green-600 dark:bg-green-500/15 dark:text-green-500">
+                    <span className="inline-flex items-center justify-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium bg-success-50 text-success-600 dark:bg-success-500/15 dark:text-success-500">
                       Active
                     </span>
                   </td>
@@ -387,7 +387,7 @@ export default function WordPressIntegrationForm({
           <div className="flex items-center justify-between">
             <div>
               <h3 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
-                <DownloadIcon className="w-5 h-5 text-indigo-600 dark:text-indigo-400" />
+                <DownloadIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
                 IGNY8 WP Bridge Plugin
               </h3>
               <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
diff --git a/frontend/src/components/sites/WordPressIntegrationModal.tsx b/frontend/src/components/sites/WordPressIntegrationModal.tsx
index 8548f728..41ecf947 100644
--- a/frontend/src/components/sites/WordPressIntegrationModal.tsx
+++ b/frontend/src/components/sites/WordPressIntegrationModal.tsx
@@ -69,8 +69,8 @@ export default function WordPressIntegrationModal({
       <div className="p-6">
         <div className="flex items-center justify-between mb-6">
           <div className="flex items-center gap-3">
-            <div className="p-2 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg">
-              <Globe className="w-5 h-5 text-indigo-600 dark:text-indigo-400" />
+            <div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
+              <Globe className="w-5 h-5 text-purple-600 dark:text-purple-400" />
             </div>
             <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
               {initialData ? 'Edit WordPress Integration' : 'Connect WordPress Site'}
@@ -85,10 +85,10 @@ export default function WordPressIntegrationModal({
         </div>
 
         <form onSubmit={handleSubmit} className="space-y-4">
-          <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-4">
+          <div className="bg-brand-50 dark:bg-brand-900/20 border border-brand-200 dark:border-brand-800 rounded-lg p-4 mb-4">
             <div className="flex items-start gap-3">
-              <AlertCircle className="w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" />
-              <div className="text-sm text-blue-800 dark:text-blue-300">
+              <AlertCircle className="w-5 h-5 text-brand-600 dark:text-brand-400 mt-0.5 flex-shrink-0" />
+              <div className="text-sm text-brand-800 dark:text-brand-300">
                 <p className="font-medium mb-1">WordPress Application Password Required</p>
                 <p>
                   You need to create an Application Password in WordPress. Go to Users → Profile → 
diff --git a/frontend/src/components/tasks/KanbanBoard.tsx b/frontend/src/components/tasks/KanbanBoard.tsx
index 9e61d5e9..c79c491f 100644
--- a/frontend/src/components/tasks/KanbanBoard.tsx
+++ b/frontend/src/components/tasks/KanbanBoard.tsx
@@ -298,7 +298,7 @@ const KanbanColumn: React.FC<KanbanColumnProps> = ({
 }) => {
   const getCountBadgeClass = () => {
     if (status === "in_progress") {
-      return "bg-warning-50 text-warning-700 dark:bg-warning-500/15 dark:text-orange-400";
+      return "bg-warning-50 text-warning-700 dark:bg-warning-500/15 dark:text-warning-400";
     }
     if (status === "completed") {
       return "bg-success-50 text-success-700 dark:bg-success-500/15 dark:text-success-500";
@@ -378,9 +378,9 @@ const TaskCard: React.FC<TaskCardProps> = ({ task, onClick, onDragStart }) => {
       case "success":
         return "bg-success-50 text-success-700 dark:bg-success-500/15 dark:text-success-500";
       case "warning":
-        return "bg-warning-50 text-warning-700 dark:bg-warning-500/15 dark:text-orange-400";
+        return "bg-warning-50 text-warning-700 dark:bg-warning-500/15 dark:text-warning-400";
       case "orange":
-        return "bg-orange-400/10 text-orange-400";
+        return "bg-warning-400/10 text-warning-400";
       default:
         return "bg-gray-100 text-gray-700 dark:bg-white/[0.03] dark:text-white/80";
     }
diff --git a/frontend/src/components/tasks/TaskList.tsx b/frontend/src/components/tasks/TaskList.tsx
index d31c3b17..198411c5 100644
--- a/frontend/src/components/tasks/TaskList.tsx
+++ b/frontend/src/components/tasks/TaskList.tsx
@@ -238,7 +238,7 @@ const TaskListSection: React.FC<TaskListSectionProps> = ({
 }) => {
   const getCountBadgeClass = () => {
     if (title === "In Progress") {
-      return "bg-warning-50 text-warning-700 dark:bg-warning-500/15 dark:text-orange-400";
+      return "bg-warning-50 text-warning-700 dark:bg-warning-500/15 dark:text-warning-400";
     }
     if (title === "Completed") {
       return "bg-success-50 text-success-700 dark:bg-success-500/15 dark:text-success-500";
@@ -313,9 +313,9 @@ const TaskListItem: React.FC<TaskListItemProps> = ({ task, checked, onClick, onC
       case "success":
         return "bg-success-50 text-success-700 dark:bg-success-500/15 dark:text-success-500";
       case "warning":
-        return "bg-warning-50 text-warning-700 dark:bg-warning-500/15 dark:text-orange-400";
+        return "bg-warning-50 text-warning-700 dark:bg-warning-500/15 dark:text-warning-400";
       case "orange":
-        return "bg-orange-400/10 text-orange-400";
+        return "bg-warning-400/10 text-warning-400";
       default:
         return "bg-gray-100 text-gray-700 dark:bg-white/[0.03] dark:text-white/80";
     }
diff --git a/frontend/src/components/ui/badge/Badge.tsx b/frontend/src/components/ui/badge/Badge.tsx
index e59d4086..f07d821a 100644
--- a/frontend/src/components/ui/badge/Badge.tsx
+++ b/frontend/src/components/ui/badge/Badge.tsx
@@ -73,34 +73,34 @@ const toneStyles: Record<
       "text-purple-700 ring-1 ring-purple-200 dark:ring-purple-500/30 dark:text-purple-400",
   },
   indigo: {
-    solid: "bg-indigo-600 text-white",
-    soft: "bg-indigo-50 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-400",
+    solid: "bg-purple-600 text-white",
+    soft: "bg-purple-50 text-purple-700 dark:bg-purple-500/15 dark:text-purple-400",
     outline:
-      "text-indigo-700 ring-1 ring-indigo-200 dark:ring-indigo-500/30 dark:text-indigo-400",
+      "text-purple-700 ring-1 ring-purple-200 dark:ring-purple-500/30 dark:text-purple-400",
   },
   pink: {
-    solid: "bg-pink-600 text-white",
-    soft: "bg-pink-50 text-pink-700 dark:bg-pink-500/15 dark:text-pink-400",
+    solid: "bg-purple-600 text-white",
+    soft: "bg-purple-50 text-purple-700 dark:bg-purple-500/15 dark:text-purple-400",
     outline:
-      "text-pink-700 ring-1 ring-pink-200 dark:ring-pink-500/30 dark:text-pink-400",
+      "text-purple-700 ring-1 ring-purple-200 dark:ring-purple-500/30 dark:text-purple-400",
   },
   teal: {
-    solid: "bg-teal-600 text-white",
-    soft: "bg-teal-50 text-teal-700 dark:bg-teal-500/15 dark:text-teal-400",
+    solid: "bg-purple-600 text-white",
+    soft: "bg-purple-50 text-purple-700 dark:bg-purple-500/15 dark:text-purple-400",
     outline:
-      "text-teal-700 ring-1 ring-teal-200 dark:ring-teal-500/30 dark:text-teal-400",
+      "text-purple-700 ring-1 ring-purple-200 dark:ring-purple-500/30 dark:text-purple-400",
   },
   cyan: {
-    solid: "bg-cyan-600 text-white",
-    soft: "bg-cyan-50 text-cyan-700 dark:bg-cyan-500/15 dark:text-cyan-400",
+    solid: "bg-purple-600 text-white",
+    soft: "bg-purple-50 text-purple-700 dark:bg-purple-500/15 dark:text-purple-400",
     outline:
-      "text-cyan-700 ring-1 ring-cyan-200 dark:ring-cyan-500/30 dark:text-cyan-400",
+      "text-purple-700 ring-1 ring-purple-200 dark:ring-purple-500/30 dark:text-purple-400",
   },
   blue: {
-    solid: "bg-blue-600 text-white",
-    soft: "bg-blue-50 text-blue-700 dark:bg-blue-500/15 dark:text-blue-400",
+    solid: "bg-brand-600 text-white",
+    soft: "bg-brand-50 text-brand-700 dark:bg-brand-500/15 dark:text-brand-400",
     outline:
-      "text-blue-700 ring-1 ring-blue-200 dark:ring-blue-500/30 dark:text-blue-400",
+      "text-brand-700 ring-1 ring-brand-200 dark:ring-brand-500/30 dark:text-brand-400",
   },
 };
 
diff --git a/frontend/src/components/ui/button/Button.tsx b/frontend/src/components/ui/button/Button.tsx
index 9fce77ac..553f1e9b 100644
--- a/frontend/src/components/ui/button/Button.tsx
+++ b/frontend/src/components/ui/button/Button.tsx
@@ -102,7 +102,7 @@ const gradientTone: Record<ButtonTone, string> = {
   danger:
     "text-white shadow-[0_20px_45px_-30px_rgba(239,68,68,0.9)] bg-[linear-gradient(135deg,var(--color-danger)_0%,var(--color-danger-dark)_100%)]",
   neutral:
-    "text-white shadow-theme-lg bg-[linear-gradient(135deg,#0f172a,#1e293b)]",
+    "text-white shadow-theme-lg bg-[linear-gradient(135deg,var(--color-gray-900),var(--color-gray-800))]",
 };
 
 const sizeClasses: Record<ButtonSize, string> = {
diff --git a/frontend/src/components/ui/pricing-table/PricingTable.tsx b/frontend/src/components/ui/pricing-table/PricingTable.tsx
index d5b99da6..b3ab5c55 100644
--- a/frontend/src/components/ui/pricing-table/PricingTable.tsx
+++ b/frontend/src/components/ui/pricing-table/PricingTable.tsx
@@ -104,9 +104,8 @@ export default function PricingTable({
             <div className="relative inline-flex items-center justify-center">
               <div className="relative inline-flex p-1 bg-gray-200 rounded-full dark:bg-gray-800 shadow-sm">
                 <span
-                  className="absolute top-1 left-1 flex h-11 w-[130px] rounded-full shadow-theme-xs duration-200 ease-linear"
+                  className="absolute top-1 left-1 flex h-11 w-[130px] rounded-full shadow-theme-xs duration-200 ease-linear bg-gradient-to-br from-brand-500 to-brand-700"
                   style={{
-                    background: 'linear-gradient(to bottom right, #0693e3, #0472b8)',
                     transform: billingPeriod === 'monthly' ? 'translateX(0)' : 'translateX(130px)',
                   }}
                 ></span>
@@ -134,7 +133,7 @@ export default function PricingTable({
                 </button>
               </div>
               {billingPeriod === 'annually' && (
-                <span className="absolute left-[calc(100%+1rem)] whitespace-nowrap inline-flex items-center gap-1.5 text-green-600 dark:text-green-400 font-semibold bg-green-50 dark:bg-green-900/20 px-3 py-1.5 rounded-full text-sm">
+                <span className="absolute left-[calc(100%+1rem)] whitespace-nowrap inline-flex items-center gap-1.5 text-success-600 dark:text-success-400 font-semibold bg-success-50 dark:bg-success-900/20 px-3 py-1.5 rounded-full text-sm">
                   <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path
                       strokeLinecap="round"
diff --git a/frontend/src/components/ui/pricing-table/index.tsx b/frontend/src/components/ui/pricing-table/index.tsx
index 18a16fb5..3242f979 100644
--- a/frontend/src/components/ui/pricing-table/index.tsx
+++ b/frontend/src/components/ui/pricing-table/index.tsx
@@ -141,7 +141,7 @@ export function PricingTable({ variant = '1', title, plans, showToggle = false,
             <ul className="space-y-3 mb-6 flex-grow">
               {plan.features.map((feature, index) => (
                 <li key={index} className="flex items-start gap-2">
-                  <Check className="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5" />
+                  <Check className="w-5 h-5 text-success-500 flex-shrink-0 mt-0.5" />
                   <span className="text-sm text-gray-700 dark:text-gray-300">{feature}</span>
                 </li>
               ))}
@@ -152,7 +152,7 @@ export function PricingTable({ variant = '1', title, plans, showToggle = false,
                   <div className="text-xs font-semibold text-gray-500 dark:text-gray-400 mb-2">LIMITS</div>
                   {plan.max_sites && (
                     <li className="flex items-start gap-2">
-                      <Check className="w-4 h-4 text-blue-500 flex-shrink-0 mt-0.5" />
+                      <Check className="w-4 h-4 text-brand-500 flex-shrink-0 mt-0.5" />
                       <span className="text-xs text-gray-600 dark:text-gray-400">
                         {plan.max_sites === 99999 ? 'Unlimited' : plan.max_sites} Sites
                       </span>
@@ -160,7 +160,7 @@ export function PricingTable({ variant = '1', title, plans, showToggle = false,
                   )}
                   {plan.max_users && (
                     <li className="flex items-start gap-2">
-                      <Check className="w-4 h-4 text-blue-500 flex-shrink-0 mt-0.5" />
+                      <Check className="w-4 h-4 text-brand-500 flex-shrink-0 mt-0.5" />
                       <span className="text-xs text-gray-600 dark:text-gray-400">
                         {plan.max_users === 99999 ? 'Unlimited' : plan.max_users} Team Members
                       </span>
@@ -168,7 +168,7 @@ export function PricingTable({ variant = '1', title, plans, showToggle = false,
                   )}
                   {plan.max_content_words && (
                     <li className="flex items-start gap-2">
-                      <Check className="w-4 h-4 text-blue-500 flex-shrink-0 mt-0.5" />
+                      <Check className="w-4 h-4 text-brand-500 flex-shrink-0 mt-0.5" />
                       <span className="text-xs text-gray-600 dark:text-gray-400">
                         {(plan.max_content_words / 1000).toLocaleString()}K Words/month
                       </span>
@@ -176,7 +176,7 @@ export function PricingTable({ variant = '1', title, plans, showToggle = false,
                   )}
                   {plan.max_content_ideas && (
                     <li className="flex items-start gap-2">
-                      <Check className="w-4 h-4 text-blue-500 flex-shrink-0 mt-0.5" />
+                      <Check className="w-4 h-4 text-brand-500 flex-shrink-0 mt-0.5" />
                       <span className="text-xs text-gray-600 dark:text-gray-400">
                         {plan.max_content_ideas} Ideas/month
                       </span>
@@ -184,7 +184,7 @@ export function PricingTable({ variant = '1', title, plans, showToggle = false,
                   )}
                   {plan.max_images_basic && (
                     <li className="flex items-start gap-2">
-                      <Check className="w-4 h-4 text-blue-500 flex-shrink-0 mt-0.5" />
+                      <Check className="w-4 h-4 text-brand-500 flex-shrink-0 mt-0.5" />
                       <span className="text-xs text-gray-600 dark:text-gray-400">
                         {plan.max_images_basic} Images/month
                       </span>
@@ -192,7 +192,7 @@ export function PricingTable({ variant = '1', title, plans, showToggle = false,
                   )}
                   {plan.included_credits && (
                     <li className="flex items-start gap-2">
-                      <Check className="w-4 h-4 text-blue-500 flex-shrink-0 mt-0.5" />
+                      <Check className="w-4 h-4 text-brand-500 flex-shrink-0 mt-0.5" />
                       <span className="text-xs text-gray-600 dark:text-gray-400">
                         {plan.included_credits.toLocaleString()} Content pieces/month
                       </span>
diff --git a/frontend/src/config/import-export.config.tsx b/frontend/src/config/import-export.config.tsx
index cdd4ec69..fc4da19d 100644
--- a/frontend/src/config/import-export.config.tsx
+++ b/frontend/src/config/import-export.config.tsx
@@ -160,7 +160,7 @@ export function useImportExport(
               Upload a CSV file (max {maxFileSize / 1024 / 1024}MB)
             </p>
             {filename === 'keywords' && (
-              <p className="text-xs text-gray-600 dark:text-gray-300 mt-2 p-2 bg-blue-50 dark:bg-blue-900/20 rounded border border-blue-200 dark:border-blue-800">
+              <p className="text-xs text-gray-600 dark:text-gray-300 mt-2 p-2 bg-brand-50 dark:bg-brand-900/20 rounded border border-brand-200 dark:border-brand-800">
                 <strong>Expected columns:</strong> keyword, volume, difficulty, country, status
               </p>
             )}
diff --git a/frontend/src/config/pages/approved.config.tsx b/frontend/src/config/pages/approved.config.tsx
index be15ba76..c07d5dd6 100644
--- a/frontend/src/config/pages/approved.config.tsx
+++ b/frontend/src/config/pages/approved.config.tsx
@@ -67,7 +67,7 @@ export function createApprovedPageConfig(params: {
           {params.onRowClick ? (
             <button
               onClick={() => params.onRowClick!(row)}
-              className="text-base font-light text-blue-500 hover:text-blue-600 hover:underline text-left transition-colors"
+              className="text-base font-light text-brand-500 hover:text-brand-600 hover:underline text-left transition-colors"
             >
               {value || `Content #${row.id}`}
             </button>
@@ -81,7 +81,7 @@ export function createApprovedPageConfig(params: {
               href={row.external_url} 
               target="_blank" 
               rel="noopener noreferrer"
-              className="text-blue-500 hover:text-blue-600 transition-colors"
+              className="text-brand-500 hover:text-brand-600 transition-colors"
               title="View on WordPress"
             >
               <ArrowRightIcon className="w-4 h-4" />
diff --git a/frontend/src/config/pages/content.config.tsx b/frontend/src/config/pages/content.config.tsx
index 7fa560a3..a0d7be97 100644
--- a/frontend/src/config/pages/content.config.tsx
+++ b/frontend/src/config/pages/content.config.tsx
@@ -105,7 +105,7 @@ export const createContentPageConfig = (
             {handlers.onRowClick ? (
               <button
                 onClick={() => handlers.onRowClick!(row)}
-                className="text-base font-light text-blue-500 hover:text-blue-600 hover:underline text-left transition-colors"
+                className="text-base font-light text-brand-500 hover:text-brand-600 hover:underline text-left transition-colors"
               >
                 {row.title || `Content #${row.id}`}
               </button>
@@ -324,9 +324,9 @@ export const createContentPageConfig = (
             imageStatus = 'pending';
           }
           const imageStatusColors: Record<string, string> = {
-            'pending': 'text-amber-500 dark:text-amber-400',
-            'generated': 'text-green-500 dark:text-green-400',
-            'failed': 'text-red-500 dark:text-red-400',
+            'pending': 'text-warning-500 dark:text-warning-400',
+            'generated': 'text-success-500 dark:text-success-400',
+            'failed': 'text-error-500 dark:text-error-400',
           };
           const imageStatusTitles: Record<string, string> = {
             'pending': 'Images pending',
diff --git a/frontend/src/config/pages/review.config.tsx b/frontend/src/config/pages/review.config.tsx
index 0020f3a6..674ebd55 100644
--- a/frontend/src/config/pages/review.config.tsx
+++ b/frontend/src/config/pages/review.config.tsx
@@ -67,7 +67,7 @@ export function createReviewPageConfig(params: {
           {params.onRowClick ? (
             <button
               onClick={() => params.onRowClick!(row)}
-              className="text-base font-light text-blue-500 hover:text-blue-600 hover:underline text-left transition-colors"
+              className="text-base font-light text-brand-500 hover:text-brand-600 hover:underline text-left transition-colors"
             >
               {value || `Content #${row.id}`}
             </button>
@@ -202,7 +202,7 @@ export function createReviewPageConfig(params: {
               <span className="text-[11px] font-normal">{label}</span>
             </Badge>
             {row.external_id && (
-              <CheckCircleIcon className="w-3.5 h-3.5 text-green-500" title="Published to WordPress" />
+              <CheckCircleIcon className="w-3.5 h-3.5 text-success-500" title="Published to WordPress" />
             )}
           </div>
         );
diff --git a/frontend/src/config/pages/table-actions.config.tsx b/frontend/src/config/pages/table-actions.config.tsx
index 63a33fd6..1095ac38 100644
--- a/frontend/src/config/pages/table-actions.config.tsx
+++ b/frontend/src/config/pages/table-actions.config.tsx
@@ -252,7 +252,7 @@ const tableActionsConfigs: Record<string, TableActionsConfig> = {
       {
         key: 'view_on_wordpress',
         label: 'View on WordPress',
-        icon: <CheckCircleIcon className="w-5 h-5 text-blue-500" />,
+        icon: <CheckCircleIcon className="w-5 h-5 text-brand-500" />,
         variant: 'secondary',
         shouldShow: (row: any) => !!row.external_id, // Only show if published
       },
@@ -303,7 +303,7 @@ const tableActionsConfigs: Record<string, TableActionsConfig> = {
       {
         key: 'view_on_wordpress',
         label: 'View on Site',
-        icon: <CheckCircleIcon className="w-5 h-5 text-blue-500" />,
+        icon: <CheckCircleIcon className="w-5 h-5 text-brand-500" />,
         variant: 'secondary',
         shouldShow: (row: any) => !!row.external_id, // Only show if published
       },
@@ -342,7 +342,7 @@ const tableActionsConfigs: Record<string, TableActionsConfig> = {
       {
         key: 'view_on_wordpress',
         label: 'View on WordPress',
-        icon: <CheckCircleIcon className="w-5 h-5 text-blue-500" />,
+        icon: <CheckCircleIcon className="w-5 h-5 text-brand-500" />,
         variant: 'secondary',
         shouldShow: (row: any) => !!row.external_id, // Only show if published
       },
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 6f61a923..70bb0a8c 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,8 +1,7 @@
-@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap")
-layer(base);
+@import "tailwindcss";
+@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap") layer(base);
 
 @import "./styles/tokens.css";
-@import "tailwindcss";
 
 @keyframes slide-in-right {
   from {
@@ -22,20 +21,21 @@ layer(base);
 @custom-variant dark (&:is(.dark *));
 
 @theme {
-  --font-*: initial;
+  /* Fonts */
   --font-outfit: Outfit, sans-serif;
   --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
 
-  --breakpoint-*: initial;
+  /* Breakpoints */
   --breakpoint-2xsm: 375px;
   --breakpoint-xsm: 425px;
-  --breakpoint-3xl: 2000px;
   --breakpoint-sm: 640px;
   --breakpoint-md: 768px;
   --breakpoint-lg: 1024px;
   --breakpoint-xl: 1280px;
   --breakpoint-2xl: 1536px;
+  --breakpoint-3xl: 2000px;
 
+  /* Typography */
   --text-title-2xl: 72px;
   --text-title-2xl--line-height: 90px;
   --text-title-xl: 60px;
@@ -53,40 +53,27 @@ layer(base);
   --text-theme-xs: 12px;
   --text-theme-xs--line-height: 18px;
 
+  /* Base Colors */
   --color-current: currentColor;
   --color-transparent: transparent;
   --color-white: #ffffff;
   --color-black: #101828;
 
-  /* Brand Colors - Dynamically calculated from --color-primary (#0693e3) */
+  /* Brand Colors */
   --color-brand-25: color-mix(in srgb, var(--color-primary) 3%, white);
   --color-brand-50: color-mix(in srgb, var(--color-primary) 8%, white);
   --color-brand-100: color-mix(in srgb, var(--color-primary) 15%, white);
   --color-brand-200: color-mix(in srgb, var(--color-primary) 25%, white);
   --color-brand-300: color-mix(in srgb, var(--color-primary) 40%, white);
   --color-brand-400: color-mix(in srgb, var(--color-primary) 60%, white);
-  --color-brand-500: var(--color-primary); /* Primary brand blue */
-  --color-brand-600: var(--color-primary-dark); /* Primary brand blue dark */
+  --color-brand-500: var(--color-primary);
+  --color-brand-600: var(--color-primary-dark);
   --color-brand-700: color-mix(in srgb, var(--color-primary-dark) 85%, black);
   --color-brand-800: color-mix(in srgb, var(--color-primary-dark) 70%, black);
   --color-brand-900: color-mix(in srgb, var(--color-primary-dark) 55%, black);
   --color-brand-950: color-mix(in srgb, var(--color-primary-dark) 35%, black);
 
-  /* Blue Light - Dynamically calculated */
-  --color-blue-light-25: color-mix(in srgb, #0ba5ec 3%, white);
-  --color-blue-light-50: color-mix(in srgb, #0ba5ec 6%, white);
-  --color-blue-light-100: color-mix(in srgb, #0ba5ec 12%, white);
-  --color-blue-light-200: color-mix(in srgb, #0ba5ec 25%, white);
-  --color-blue-light-300: color-mix(in srgb, #0ba5ec 45%, white);
-  --color-blue-light-400: color-mix(in srgb, #0ba5ec 70%, white);
-  --color-blue-light-500: #0ba5ec;
-  --color-blue-light-600: color-mix(in srgb, #0ba5ec 100%, black 15%);
-  --color-blue-light-700: color-mix(in srgb, #0ba5ec 100%, black 35%);
-  --color-blue-light-800: color-mix(in srgb, #0ba5ec 100%, black 50%);
-  --color-blue-light-900: color-mix(in srgb, #0ba5ec 100%, black 65%);
-  --color-blue-light-950: color-mix(in srgb, #0ba5ec 100%, black 80%);
-
-  /* Gray Scale - Neutral palette */
+  /* Gray Scale */
   --color-gray-25: #fcfcfd;
   --color-gray-50: #f9fafb;
   --color-gray-100: #f2f4f7;
@@ -101,21 +88,7 @@ layer(base);
   --color-gray-950: #0c111d;
   --color-gray-dark: #1a2231;
 
-  /* Orange/Warning - Dynamically calculated from --color-warning (#ff7a00) */
-  --color-orange-25: color-mix(in srgb, var(--color-warning) 2%, white);
-  --color-orange-50: color-mix(in srgb, var(--color-warning) 5%, white);
-  --color-orange-100: color-mix(in srgb, var(--color-warning) 12%, white);
-  --color-orange-200: color-mix(in srgb, var(--color-warning) 25%, white);
-  --color-orange-300: color-mix(in srgb, var(--color-warning) 45%, white);
-  --color-orange-400: color-mix(in srgb, var(--color-warning) 70%, white);
-  --color-orange-500: color-mix(in srgb, var(--color-warning) 95%, white);
-  --color-orange-600: var(--color-warning);
-  --color-orange-700: var(--color-warning-dark);
-  --color-orange-800: color-mix(in srgb, var(--color-warning-dark) 80%, black);
-  --color-orange-900: color-mix(in srgb, var(--color-warning-dark) 65%, black);
-  --color-orange-950: color-mix(in srgb, var(--color-warning-dark) 40%, black);
-
-  /* Success/Green - Dynamically calculated from --color-success (#0bbf87) */
+  /* Success */
   --color-success-25: color-mix(in srgb, var(--color-success) 2%, white);
   --color-success-50: color-mix(in srgb, var(--color-success) 6%, white);
   --color-success-100: color-mix(in srgb, var(--color-success) 15%, white);
@@ -129,7 +102,7 @@ layer(base);
   --color-success-900: color-mix(in srgb, var(--color-success-dark) 50%, black);
   --color-success-950: color-mix(in srgb, var(--color-success-dark) 35%, black);
 
-  /* Error/Danger - Dynamically calculated from --color-danger (#ef4444) */
+  /* Error */
   --color-error-25: color-mix(in srgb, var(--color-danger) 2%, white);
   --color-error-50: color-mix(in srgb, var(--color-danger) 5%, white);
   --color-error-100: color-mix(in srgb, var(--color-danger) 10%, white);
@@ -143,50 +116,43 @@ layer(base);
   --color-error-900: color-mix(in srgb, var(--color-danger-dark) 50%, black);
   --color-error-950: color-mix(in srgb, var(--color-danger-dark) 30%, black);
 
-  /* Warning/Amber - Dynamically calculated (alternative yellow-based warning) */
-  --color-warning-25: color-mix(in srgb, #f79009 2%, white);
-  --color-warning-50: color-mix(in srgb, #f79009 4%, white);
-  --color-warning-100: color-mix(in srgb, #f79009 10%, white);
-  --color-warning-200: color-mix(in srgb, #f79009 20%, white);
-  --color-warning-300: color-mix(in srgb, #f79009 40%, white);
-  --color-warning-400: color-mix(in srgb, #f79009 65%, white);
-  --color-warning-500: #f79009;
-  --color-warning-600: color-mix(in srgb, #f79009 100%, black 15%);
-  --color-warning-700: color-mix(in srgb, #f79009 100%, black 35%);
-  --color-warning-800: color-mix(in srgb, #f79009 100%, black 50%);
-  --color-warning-900: color-mix(in srgb, #f79009 100%, black 65%);
-  --color-warning-950: color-mix(in srgb, #f79009 100%, black 80%);
+  /* Warning */
+  --color-warning-25: color-mix(in srgb, var(--color-warning) 2%, white);
+  --color-warning-50: color-mix(in srgb, var(--color-warning) 4%, white);
+  --color-warning-100: color-mix(in srgb, var(--color-warning) 10%, white);
+  --color-warning-200: color-mix(in srgb, var(--color-warning) 20%, white);
+  --color-warning-300: color-mix(in srgb, var(--color-warning) 40%, white);
+  --color-warning-400: color-mix(in srgb, var(--color-warning) 65%, white);
+  --color-warning-500: var(--color-warning);
+  --color-warning-600: var(--color-warning-dark);
+  --color-warning-700: color-mix(in srgb, var(--color-warning-dark) 80%, black);
+  --color-warning-800: color-mix(in srgb, var(--color-warning-dark) 65%, black);
+  --color-warning-900: color-mix(in srgb, var(--color-warning-dark) 50%, black);
+  --color-warning-950: color-mix(in srgb, var(--color-warning-dark) 30%, black);
 
-  /* Theme Accent Colors - Dynamically calculated from --color-purple and pink */
-  --color-theme-pink-500: #ee46bc;
-  --color-theme-pink-50: color-mix(in srgb, #ee46bc 8%, white);
-  --color-theme-pink-100: color-mix(in srgb, #ee46bc 15%, white);
-  --color-theme-pink-600: color-mix(in srgb, #ee46bc 100%, black 15%);
+  /* Purple */
+  --color-purple-25: color-mix(in srgb, var(--color-purple) 2%, white);
+  --color-purple-50: color-mix(in srgb, var(--color-purple) 8%, white);
+  --color-purple-100: color-mix(in srgb, var(--color-purple) 15%, white);
+  --color-purple-200: color-mix(in srgb, var(--color-purple) 25%, white);
+  --color-purple-300: color-mix(in srgb, var(--color-purple) 40%, white);
+  --color-purple-400: color-mix(in srgb, var(--color-purple) 60%, white);
+  --color-purple-500: var(--color-purple);
+  --color-purple-600: var(--color-purple-dark);
+  --color-purple-700: color-mix(in srgb, var(--color-purple-dark) 85%, black);
+  --color-purple-800: color-mix(in srgb, var(--color-purple-dark) 70%, black);
+  --color-purple-900: color-mix(in srgb, var(--color-purple-dark) 55%, black);
+  --color-purple-950: color-mix(in srgb, var(--color-purple-dark) 35%, black);
 
-  --color-theme-purple-500: var(--color-purple);
-  --color-theme-purple-50: color-mix(in srgb, var(--color-purple) 8%, white);
-  --color-theme-purple-100: color-mix(in srgb, var(--color-purple) 15%, white);
-  --color-theme-purple-600: var(--color-purple-dark);
-
-  --shadow-theme-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
-    0px 2px 4px -2px rgba(16, 24, 40, 0.06);
-  --shadow-theme-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
-    0px 4px 6px -2px rgba(16, 24, 40, 0.03);
-  --shadow-theme-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.1),
-    0px 1px 2px 0px rgba(16, 24, 40, 0.06);
+  /* Shadows */
   --shadow-theme-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-  --shadow-theme-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),
-    0px 8px 8px -4px rgba(16, 24, 40, 0.03);
-  --shadow-datepicker: -5px 0 0 #262d3c, 5px 0 0 #262d3c;
-  --shadow-focus-ring: 0px 0px 0px 4px rgba(70, 95, 255, 0.12);
-  --shadow-slider-navigation: 0px 1px 2px 0px rgba(16, 24, 40, 0.1),
-    0px 1px 3px 0px rgba(16, 24, 40, 0.1);
-  --shadow-tooltip: 0px 4px 6px -2px rgba(16, 24, 40, 0.05),
-    -8px 0px 20px 8px rgba(16, 24, 40, 0.05);
-
-  --drop-shadow-4xl: 0 35px 35px rgba(0, 0, 0, 0.25),
-    0 45px 65px rgba(0, 0, 0, 0.15);
+  --shadow-theme-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
+  --shadow-theme-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
+  --shadow-theme-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+  --shadow-theme-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
+  --drop-shadow-4xl: 0 35px 35px rgba(0, 0, 0, 0.25), 0 45px 65px rgba(0, 0, 0, 0.15);
 
+  /* Z-Index */
   --z-index-1: 1;
   --z-index-9: 9;
   --z-index-99: 99;
@@ -196,24 +162,11 @@ layer(base);
   --z-index-999999: 999999;
 }
 
-/*
-  The default border color has changed to `currentColor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
 @layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
+  *,::after,::before,::backdrop,::file-selector-button {
     border-color: var(--color-gray-200, currentColor);
   }
-  button:not(:disabled),
-  [role="button"]:not(:disabled) {
+  button:not(:disabled),[role="button"]:not(:disabled) {
     cursor: pointer;
   }
   body {
@@ -233,86 +186,7 @@ layer(base);
   @apply text-gray-700 hover:bg-gray-100 group-hover:text-gray-700 dark:text-gray-300 dark:hover:bg-white/5 dark:hover:text-gray-300;
 }
 
-@utility menu-item-icon {
-  @apply text-gray-500 group-hover:text-gray-700 dark:text-gray-400;
-}
-
-@utility menu-item-icon-active {
-  @apply text-brand-500 dark:text-brand-400;
-}
-
-@utility menu-item-icon-size {
-  & svg {
-    @apply !size-6;
-  }
-}
-
-@utility menu-item-icon-inactive {
-  @apply text-gray-500 group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-300;
-}
-
-@utility menu-item-arrow {
-  @apply relative;
-}
-
-@utility menu-item-arrow-active {
-  @apply rotate-180 text-brand-500 dark:text-brand-400;
-}
-
-@utility menu-item-arrow-inactive {
-  @apply text-gray-500 group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-300;
-}
-
-@utility menu-dropdown-item {
-  @apply relative flex items-center gap-3 rounded-lg px-3 py-2.5 text-theme-sm font-medium;
-}
-
-@utility menu-dropdown-item-active {
-  @apply bg-brand-50 text-brand-500 dark:bg-brand-500/[0.12] dark:text-brand-400;
-}
-
-@utility menu-dropdown-item-inactive {
-  @apply text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-white/5;
-}
-
-@utility menu-dropdown-badge {
-  @apply block rounded-full px-2.5 py-0.5 text-xs font-medium uppercase text-brand-500 dark:text-brand-400;
-}
-
-@utility menu-dropdown-badge-active {
-  @apply bg-brand-100 dark:bg-brand-500/20;
-}
-
-@utility menu-dropdown-badge-inactive {
-  @apply bg-brand-50 group-hover:bg-brand-100 dark:bg-brand-500/15 dark:group-hover:bg-brand-500/20;
-}
-@utility no-scrollbar {
-  /* Chrome, Safari and Opera */
-  &::-webkit-scrollbar {
-    display: none;
-  }
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-}
-@utility custom-scrollbar {
-  &::-webkit-scrollbar {
-    @apply size-1.5;
-  }
-
-  &::-webkit-scrollbar-track {
-    @apply rounded-full;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    @apply bg-gray-200 rounded-full dark:bg-gray-700;
-  }
-}
-.dark .custom-scrollbar::-webkit-scrollbar-thumb {
-  background-color: #344054;
-}
-
 @layer utilities {
-  /* For Remove Date Icon */
   input[type="date"]::-webkit-inner-spin-button,
   input[type="time"]::-webkit-inner-spin-button,
   input[type="date"]::-webkit-calendar-picker-indicator,
@@ -322,826 +196,34 @@ layer(base);
   }
 }
 
-.tableCheckbox:checked ~ span span {
-  @apply opacity-100;
-}
-.tableCheckbox:checked ~ span {
-  @apply border-brand-500 bg-brand-500;
-}
-
-/* third-party libraries CSS */
-.apexcharts-legend-text {
-  @apply !text-gray-700 dark:!text-gray-400;
-}
-
-.apexcharts-text {
-  @apply !fill-gray-700 dark:!fill-gray-400;
-}
-
-.apexcharts-tooltip.apexcharts-theme-light {
-  @apply gap-1 !rounded-lg !border-gray-200 p-3 !shadow-theme-sm dark:!border-gray-800 dark:!bg-gray-900;
-}
-
-.apexcharts-tooltip-marker {
-  margin-right: 6px;
-  height: 6px;
-  width: 6px;
-}
-.apexcharts-legend-text {
-  @apply !pl-5 !text-gray-700 dark:!text-gray-400;
-}
-.apexcharts-tooltip-series-group {
-  @apply !p-0;
-}
-.apexcharts-tooltip-y-group {
-  @apply !p-0;
-}
-.apexcharts-tooltip-title {
-  @apply !mb-0 !border-b-0 !bg-transparent !p-0 !text-[10px] !leading-4 !text-gray-800 dark:!text-white/90;
-}
-.apexcharts-tooltip-text {
-  @apply !text-theme-xs !text-gray-700 dark:!text-white/90;
-}
-.apexcharts-tooltip-text-y-value {
-  @apply !font-medium;
-}
-
-.apexcharts-gridline {
-  @apply !stroke-gray-100 dark:!stroke-gray-800;
-}
-#chartTwo .apexcharts-datalabels-group {
-  @apply !-translate-y-24;
-}
-#chartTwo .apexcharts-datalabels-group .apexcharts-text {
-  @apply !fill-gray-800 !font-semibold dark:!fill-white/90;
-}
-
-#chartDarkStyle .apexcharts-datalabels-group .apexcharts-text {
-  @apply !fill-gray-800 !font-semibold dark:!fill-white/90;
-}
-
-#chartSixteen .apexcharts-legend {
-  @apply !p-0 !pl-6;
-}
-
-.jvectormap-container {
-  @apply !bg-gray-50 dark:!bg-gray-900;
-}
-.jvectormap-region.jvectormap-element {
-  @apply !fill-gray-300 hover:!fill-brand-500 dark:!fill-gray-700 dark:hover:!fill-brand-500;
-}
-.jvectormap-marker.jvectormap-element {
-  @apply !stroke-gray-200 dark:!stroke-gray-800;
-}
-.jvectormap-tip {
-  @apply !bg-brand-500 !border-none !px-2 !py-1;
-}
-.jvectormap-zoomin,
-.jvectormap-zoomout {
-  @apply !hidden;
-}
-
-.stocks-slider-outer .swiper-button-next:after,
-.stocks-slider-outer .swiper-button-prev:after {
-  @apply hidden;
-}
-
-.stocks-slider-outer .swiper-button-next,
-.stocks-slider-outer .swiper-button-prev {
-  @apply static! mt-0 h-8 w-9 rounded-full border dark:hover:bg-white/[0.05] border-gray-200 !text-gray-700 transition hover:bg-gray-100 dark:border-white/[0.03] dark:bg-gray-800 dark:!text-gray-400  dark:hover:!text-white/90;
-}
-
-.stocks-slider-outer .swiper-button-next.swiper-button-disabled,
-.stocks-slider-outer .swiper-button-prev.swiper-button-disabled {
-  @apply bg-white opacity-50 dark:bg-gray-900;
-}
-
-.stocks-slider-outer .swiper-button-next svg,
-.stocks-slider-outer .swiper-button-prev svg {
-  @apply !h-auto !w-auto;
-}
-
-.flatpickr-wrapper {
-  @apply w-full;
-}
-.flatpickr-calendar {
-  @apply mt-2 !bg-white !rounded-xl !p-5 !border !border-gray-200 !text-gray-500 dark:!bg-gray-dark dark:!border-gray-700 dark:!text-gray-400 dark:!shadow-theme-xl 2xsm:!w-auto;
-}
-
-.flatpickr-months .flatpickr-prev-month:hover svg,
-.flatpickr-months .flatpickr-next-month:hover svg {
-  @apply stroke-brand-500;
-}
-.flatpickr-calendar.arrowTop:before,
-.flatpickr-calendar.arrowTop:after {
-  @apply hidden;
-}
-
-.flatpickr-current-month {
-  @apply !p-0;
-}
-.flatpickr-current-month .cur-month,
-.flatpickr-current-month input.cur-year {
-  @apply !h-auto !pt-0 !text-lg !font-medium !text-gray-800 dark:!text-white/90;
-}
-
-.flatpickr-prev-month,
-.flatpickr-next-month {
-  @apply !p-0;
-}
-
-.flatpickr-weekdays {
-  @apply h-auto mt-6 mb-4 !bg-transparent;
-}
-
-.flatpickr-weekday {
-  @apply !text-theme-sm !font-medium !text-gray-500 dark:!text-gray-400 !bg-transparent;
-}
-
-.flatpickr-day {
-  @apply !flex !items-center !text-theme-sm !font-medium !text-gray-800 dark:!text-white/90 dark:hover:!border-gray-300 dark:hover:!bg-gray-900;
-}
-.flatpickr-day.nextMonthDay,
-.flatpickr-day.prevMonthDay {
-  @apply !text-gray-400;
-}
-
-.flatpickr-months > .flatpickr-month {
-  background: none !important;
-}
-.flatpickr-month .flatpickr-current-month .flatpickr-monthDropdown-months {
-  background: none !important;
-  appearance: none;
-  background-image: none !important;
-  font-weight: 500;
-}
-.flatpickr-month
-  .flatpickr-current-month
-  .flatpickr-monthDropdown-months:focus {
-  outline: none !important;
-  border: 0 !important;
-}
-.flatpickr-months .flatpickr-prev-month,
-.flatpickr-months .flatpickr-next-month {
-  @apply !top-7 dark:!fill-white dark:!text-white !bg-transparent;
-}
-.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
-.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
-  @apply !left-7;
-}
-.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
-.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
-  @apply !right-7;
-}
-.flatpickr-days {
-  @apply !border-0;
-}
-span.flatpickr-weekday,
-.flatpickr-months .flatpickr-month {
-  @apply dark:!fill-white dark:!text-white !bg-none;
-}
-.flatpickr-innerContainer {
-  @apply !border-b-0;
-}
-.flatpickr-months .flatpickr-month {
-  @apply !bg-none;
-}
-.flatpickr-day.inRange {
-  box-shadow: -5px 0 0 #f9fafb, 5px 0 0 #f9fafb !important;
-  @apply dark:!shadow-datepicker;
-}
-.flatpickr-day.inRange,
-.flatpickr-day.prevMonthDay.inRange,
-.flatpickr-day.nextMonthDay.inRange,
-.flatpickr-day.today.inRange,
-.flatpickr-day.prevMonthDay.today.inRange,
-.flatpickr-day.nextMonthDay.today.inRange,
-.flatpickr-day:hover,
-.flatpickr-day.prevMonthDay:hover,
-.flatpickr-day.nextMonthDay:hover,
-.flatpickr-day:focus,
-.flatpickr-day.prevMonthDay:focus,
-.flatpickr-day.nextMonthDay:focus {
-  @apply !border-gray-50 !bg-gray-50 dark:!border-0 dark:!border-white/5 dark:!bg-white/5;
-}
-.flatpickr-day.selected,
-.flatpickr-day.startRange,
-.flatpickr-day.selected,
-.flatpickr-day.endRange {
-  @apply !text-white dark:!text-white;
-}
-.flatpickr-day.selected,
-.flatpickr-day.startRange,
-.flatpickr-day.endRange,
-.flatpickr-day.selected.inRange,
-.flatpickr-day.startRange.inRange,
-.flatpickr-day.endRange.inRange,
-.flatpickr-day.selected:focus,
-.flatpickr-day.startRange:focus,
-.flatpickr-day.endRange:focus,
-.flatpickr-day.selected:hover,
-.flatpickr-day.startRange:hover,
-.flatpickr-day.endRange:hover,
-.flatpickr-day.selected.prevMonthDay,
-.flatpickr-day.startRange.prevMonthDay,
-.flatpickr-day.endRange.prevMonthDay,
-.flatpickr-day.selected.nextMonthDay,
-.flatpickr-day.startRange.nextMonthDay,
-.flatpickr-day.endRange.nextMonthDay {
-  background: #465fff;
-  @apply !border-brand-500 !bg-brand-500 hover:!border-brand-500 hover:!bg-brand-500;
-}
-.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
-.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
-.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
-  box-shadow: -10px 0 0 #465fff;
-}
-
-.flatpickr-months .flatpickr-prev-month svg,
-.flatpickr-months .flatpickr-next-month svg,
-.flatpickr-months .flatpickr-prev-month,
-.flatpickr-months .flatpickr-next-month {
-  @apply hover:!fill-none;
-}
-.flatpickr-months .flatpickr-prev-month:hover svg,
-.flatpickr-months .flatpickr-next-month:hover svg {
-  fill: none !important;
-}
-
-.flatpickr-calendar.static {
-  @apply right-0;
-}
-
-.fc .fc-view-harness {
-  @apply max-w-full overflow-x-auto custom-scrollbar;
-}
-.fc-dayGridMonth-view.fc-view.fc-daygrid {
-  @apply min-w-[718px];
-}
-.fc .fc-scrollgrid-section > * {
-  border-right-width: 0;
-  border-bottom-width: 0;
-}
-.fc .fc-scrollgrid {
-  border-left-width: 0;
-}
-.fc .fc-toolbar.fc-header-toolbar {
-  @apply flex-col gap-4 px-6 pt-6 sm:flex-row;
-}
-.fc-button-group {
-  @apply gap-2;
-}
-.fc-button-group .fc-button {
-  @apply flex h-10 w-10 items-center justify-center !rounded-lg border border-gray-200 bg-transparent hover:border-gray-200 hover:bg-gray-50 focus:shadow-none active:!border-gray-200 active:!bg-transparent active:!shadow-none dark:border-gray-800 dark:hover:border-gray-800 dark:hover:bg-gray-900 dark:active:border-gray-800!;
-}
-
-.fc-button-group .fc-button.fc-prev-button:before {
-  @apply inline-block mt-1;
-  content: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.0068 6L9.75684 12.25L16.0068 18.5' stroke='%23344054' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
-}
-.fc-button-group .fc-button.fc-next-button:before {
-  @apply inline-block mt-1;
-  content: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.50684 19L15.7568 12.75L9.50684 6.5' stroke='%23344054' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
-}
-.dark .fc-button-group .fc-button.fc-prev-button:before {
-  content: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.0068 6L9.75684 12.25L16.0068 18.5' stroke='%2398A2B3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
-}
-.dark .fc-button-group .fc-button.fc-next-button:before {
-  content: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.50684 19L15.7568 12.75L9.50684 6.5' stroke='%2398A2B3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
-}
-.fc-button-group .fc-button .fc-icon {
-  @apply hidden;
-}
-.fc-addEventButton-button {
-  @apply !rounded-lg !border-0 !bg-brand-500 !px-4 !py-2.5 !text-sm !font-medium hover:!bg-brand-600 focus:!shadow-none;
-}
-.fc-toolbar-title {
-  @apply !text-lg !font-medium text-gray-800 dark:text-white/90;
-}
-.fc-header-toolbar.fc-toolbar .fc-toolbar-chunk:last-child {
-  @apply rounded-lg bg-gray-100 p-0.5 dark:bg-gray-900;
-}
-.fc-header-toolbar.fc-toolbar .fc-toolbar-chunk:last-child .fc-button {
-  @apply !h-auto !w-auto rounded-md !border-0 bg-transparent !px-5 !py-2 text-sm font-medium text-gray-500 hover:text-gray-700 focus:!shadow-none dark:text-gray-400;
-}
-.fc-header-toolbar.fc-toolbar
-  .fc-toolbar-chunk:last-child
-  .fc-button.fc-button-active {
-  @apply text-gray-900 bg-white dark:bg-gray-800 dark:text-white;
-}
-.fc-theme-standard th {
-  @apply !border-x-0 border-t !border-gray-200 bg-gray-50 !text-left dark:!border-gray-800 dark:bg-gray-900;
-}
-.fc-theme-standard td,
-.fc-theme-standard .fc-scrollgrid {
-  @apply !border-gray-200 dark:!border-gray-800;
-}
-.fc .fc-col-header-cell-cushion {
-  @apply !px-5 !py-4 text-sm font-medium uppercase text-gray-400;
-}
-.fc .fc-daygrid-day.fc-day-today {
-  @apply bg-transparent;
-}
-.fc .fc-daygrid-day {
-  @apply p-2;
-}
-.fc .fc-daygrid-day.fc-day-today .fc-scrollgrid-sync-inner {
-  @apply rounded-sm bg-gray-100 dark:bg-white/[0.03];
-}
-.fc .fc-daygrid-day-number {
-  @apply !p-3 text-sm font-medium text-gray-700 dark:text-gray-400;
-}
-.fc .fc-daygrid-day-top {
-  @apply !flex-row;
-}
-.fc .fc-day-other .fc-daygrid-day-top {
-  opacity: 1;
-}
-.fc .fc-day-other .fc-daygrid-day-top .fc-daygrid-day-number {
-  @apply text-gray-400 dark:text-white/30;
-}
-.event-fc-color {
-  @apply rounded-lg py-2.5 pl-4 pr-3;
-}
-.event-fc-color .fc-event-title {
-  @apply p-0 text-sm font-normal text-gray-700;
-}
-.fc-daygrid-event-dot {
-  @apply w-1 h-5 ml-0 mr-3 border-none rounded-sm;
-}
-.fc-event {
-  @apply focus:shadow-none;
-}
-.fc-daygrid-event.fc-event-start {
-  @apply !ml-3;
-}
-.event-fc-color.fc-bg-success {
-  @apply border-success-50 bg-success-50;
-}
-.event-fc-color.fc-bg-danger {
-  @apply border-error-50 bg-error-50;
-}
-.event-fc-color.fc-bg-primary {
-  @apply border-brand-50 bg-brand-50;
-}
-.event-fc-color.fc-bg-warning {
-  @apply border-orange-50 bg-orange-50;
-}
-.event-fc-color.fc-bg-success .fc-daygrid-event-dot {
-  @apply bg-success-500;
-}
-.event-fc-color.fc-bg-danger .fc-daygrid-event-dot {
-  @apply bg-error-500;
-}
-.event-fc-color.fc-bg-primary .fc-daygrid-event-dot {
-  @apply bg-brand-500;
-}
-.event-fc-color.fc-bg-warning .fc-daygrid-event-dot {
-  @apply bg-orange-500;
-}
-.fc-direction-ltr .fc-timegrid-slot-label-frame {
-  @apply px-3 py-1.5 text-left text-sm font-medium text-gray-500 dark:text-gray-400;
-}
-.fc .fc-timegrid-axis-cushion {
-  @apply text-sm font-medium text-gray-500 dark:text-gray-400;
-}
-
-.input-date-icon::-webkit-inner-spin-button,
-.input-date-icon::-webkit-calendar-picker-indicator {
-  opacity: 0;
-  -webkit-appearance: none;
-}
-
-.swiper-button-prev svg,
-.swiper-button-next svg {
-  @apply !h-auto !w-auto;
-}
-
-.carouselTwo .swiper-button-next:after,
-.carouselTwo .swiper-button-prev:after,
-.carouselFour .swiper-button-next:after,
-.carouselFour .swiper-button-prev:after {
-  @apply hidden;
-}
-.carouselTwo .swiper-button-next.swiper-button-disabled,
-.carouselTwo .swiper-button-prev.swiper-button-disabled,
-.carouselFour .swiper-button-next.swiper-button-disabled,
-.carouselFour .swiper-button-prev.swiper-button-disabled {
-  @apply bg-white/60 !opacity-100;
-}
-.carouselTwo .swiper-button-next,
-.carouselTwo .swiper-button-prev,
-.carouselFour .swiper-button-next,
-.carouselFour .swiper-button-prev {
-  @apply h-10 w-10 rounded-full border-[0.5px] border-white/10 bg-white/90 !text-gray-700 shadow-slider-navigation backdrop-blur-[10px];
-}
-
-.carouselTwo .swiper-button-prev,
-.carouselFour .swiper-button-prev {
-  @apply !left-3 sm:!left-4;
-}
-
-.carouselTwo .swiper-button-next,
-.carouselFour .swiper-button-next {
-  @apply !right-3 sm:!right-4;
-}
-
-.carouselThree .swiper-pagination,
-.carouselFour .swiper-pagination {
-  @apply !bottom-3 !left-1/2 inline-flex !w-auto -translate-x-1/2 items-center gap-1.5 rounded-[40px] border-[0.5px] border-white/10 bg-white/60 px-2 py-1.5 shadow-slider-navigation backdrop-blur-[10px] sm:!bottom-5;
-}
-
-.carouselThree .swiper-pagination-bullet,
-.carouselFour .swiper-pagination-bullet {
-  @apply !m-0 h-2.5 w-2.5 bg-white opacity-100 shadow-theme-xs duration-200 ease-in-out;
-}
-
-.carouselThree .swiper-pagination-bullet-active,
-.carouselFour .swiper-pagination-bullet-active {
-  @apply w-6.5 rounded-xl;
-}
-
-.form-check-input:checked ~ span {
-  @apply border-[6px] border-brand-500 bg-brand-500 dark:border-brand-500;
-}
-
-.taskCheckbox:checked ~ .box span {
-  @apply opacity-100 bg-brand-500;
-}
-.taskCheckbox:checked ~ p {
-  @apply text-gray-400 line-through;
-}
-.taskCheckbox:checked ~ .box {
-  @apply border-brand-500 bg-brand-500 dark:border-brand-500;
-}
-
-.task {
-  transition: all 0.2s ease; /* Smooth transition for visual effects */
-}
-
-.task {
-  border-radius: 0.75rem;
-  box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1),
-    0px 1px 2px 0px rgba(16, 24, 40, 0.06);
-  opacity: 0.8;
-  cursor: grabbing; /* Changes the cursor to indicate dragging */
-}
-
-.custom-calendar .fc-h-event {
-  background-color: transparent;
-  border: none;
-  color: black;
-}
-.fc.fc-media-screen {
-  @apply min-h-screen;
-}
-
-.simplebar-scrollbar::before {
-  @apply !bg-gray-200 !rounded-full dark:!bg-gray-700 !opacity-100;
-}
-
-.dark .simplebar-scrollbar::before {
-  @apply !bg-gray-700;
-}
-
-.simplebar-scrollbar.simplebar-visible:before {
-  @apply opacity-100;
-}
-
-/* Toast Animations */
-@keyframes slide-in-right {
-  from {
-    opacity: 0;
-    transform: translateX(100%);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-.animate-slide-in-right {
-  animation: slide-in-right 0.3s ease-out;
-}
-
-/* Fade In Animation */
-@keyframes fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.animate-fade-in {
-  animation: fade-in 0.3s ease-out;
-}
-
-/* Skeleton Shimmer Animation */
-@keyframes shimmer {
-  0% {
-    background-position: -1000px 0;
-  }
-  100% {
-    background-position: 10000px 0;
-  }
-}
-
-.igny8-skeleton-row .animate-pulse {
-  position: relative;
-  overflow: hidden;
-}
-
-.igny8-skeleton-row .animate-pulse::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background: linear-gradient(
-    90deg,
-    transparent 0%,
-    rgba(255, 255, 255, 0.4) 50%,
-    transparent 100%
-  );
-  animation: shimmer 2s infinite;
-  background-size: 200% 100%;
-}
-
-.dark .igny8-skeleton-row .animate-pulse::after {
-  background: linear-gradient(
-    90deg,
-    transparent 0%,
-    rgba(255, 255, 255, 0.1) 50%,
-    transparent 100%
-  );
-}
-
-/* HTML Content Renderer Styles */
-.html-content-renderer {
-  @apply text-gray-700 dark:text-gray-300;
-}
-
-.html-content-renderer h1,
-.html-content-renderer h2,
-.html-content-renderer h3,
-.html-content-renderer h4,
-.html-content-renderer h5,
-.html-content-renderer h6 {
-  @apply font-semibold text-gray-900 dark:text-white mb-2 mt-4;
-}
-
-.html-content-renderer h1 {
-  @apply text-xl;
-}
-
-.html-content-renderer h2 {
-  @apply text-lg;
-}
-
-.html-content-renderer h3 {
-  @apply text-base;
-}
-
-.html-content-renderer p {
-  @apply mb-3 leading-relaxed;
-}
-
-.html-content-renderer ul,
-.html-content-renderer ol {
-  @apply mb-3 ml-6 list-disc;
-}
-
-.html-content-renderer ol {
-  @apply list-decimal;
-}
-
-.html-content-renderer li {
-  @apply mb-1;
-}
-
-.html-content-renderer strong {
-  @apply font-semibold text-gray-900 dark:text-white;
-}
-
-.html-content-renderer em {
-  @apply italic;
-}
-
-.html-content-renderer code {
-  @apply px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 text-sm;
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
-}
-
-.html-content-renderer pre {
-  @apply p-3 rounded-lg bg-gray-100 dark:bg-gray-800 overflow-x-auto mb-3;
-}
-
-.html-content-renderer pre code {
-  @apply bg-transparent p-0;
-}
-
-.html-content-renderer blockquote {
-  @apply border-l-4 border-gray-300 dark:border-gray-600 pl-4 italic my-3;
-}
-
-.html-content-renderer table {
-  @apply w-full border-collapse mb-3;
-}
-
-.html-content-renderer table th,
-.html-content-renderer table td {
-  @apply border border-gray-300 dark:border-gray-700 px-3 py-2;
-}
-
-.html-content-renderer table th {
-  @apply bg-gray-100 dark:bg-gray-800 font-semibold;
-}
-
-/* Content Outline Styles */
-.content-outline {
-  @apply space-y-4;
-}
-
-.outline-intro {
-  @apply mb-4 pb-4 border-b border-gray-200 dark:border-gray-700;
-}
-
-.outline-hook {
-  @apply mb-3 p-3 rounded-lg bg-blue-50 dark:bg-blue-900/20 text-blue-900 dark:text-blue-200;
-}
-
-.outline-paragraph {
-  @apply mb-2 p-2 rounded bg-gray-50 dark:bg-gray-800/50;
-}
-
-.outline-section {
-  @apply mb-4 p-4 rounded-lg bg-white dark:bg-gray-800/30 border border-gray-200 dark:border-gray-700;
-}
-
-.outline-list {
-  @apply ml-4 space-y-1;
-}
-
-.outline-item {
-  @apply text-gray-700 dark:text-gray-300;
-}
-
-.outline-item.nested {
-  @apply ml-4 text-gray-600 dark:text-gray-400;
-}
-
-.subsection-heading {
-  @apply text-base font-semibold text-gray-800 dark:text-gray-200 mt-3 mb-2;
-}
-
-.section-heading {
-  @apply text-base font-semibold text-blue-600 dark:text-blue-400 mb-3;
-}
-
-.content-type-badge {
-  @apply inline-block px-2 py-1 mb-2 text-xs font-semibold uppercase rounded bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300;
-}
-
-.section-details {
-  @apply text-sm text-gray-600 dark:text-gray-400 leading-relaxed;
-}
-
-/* Toggle Table Row Styles */
-.toggle-content-row {
-  @apply transition-all duration-300;
-}
-
-.toggle-content-row.collapsed {
-  @apply opacity-0;
-}
-
-.toggle-content-row.expanded {
-  @apply opacity-100;
-}
-
-.html-content-wrapper {
-  @apply max-h-[600px] overflow-y-auto custom-scrollbar;
-}
-
-/* Styles for normalized HTML content in toggle rows */
-.normalized-html-content {
-  @apply text-sm text-gray-700 dark:text-gray-300 leading-relaxed;
-  line-height: 1.7;
-}
-
-.normalized-html-content article {
-  @apply space-y-4;
-}
-
-.normalized-html-content h1,
-.normalized-html-content h2,
-.normalized-html-content h3,
-.normalized-html-content h4,
-.normalized-html-content h5,
-.normalized-html-content h6 {
-  @apply font-semibold text-gray-900 dark:text-white;
-  margin-top: 1.5em;
-  margin-bottom: 0.75em;
-  font-weight: 600;
-}
-
-.normalized-html-content h1 {
-  @apply text-2xl;
-  font-size: 1.75em;
-}
-
-.normalized-html-content h2 {
-  @apply text-xl;
-  font-size: 1.5em;
-}
-
-.normalized-html-content h3 {
-  @apply text-lg;
-  font-size: 1.25em;
-}
-
-.normalized-html-content h4 {
-  @apply text-base;
-  font-size: 1.1em;
-}
-
-.normalized-html-content p {
-  @apply mb-4 text-gray-700 dark:text-gray-300;
-  margin-bottom: 1em;
-}
-
-.normalized-html-content ul,
-.normalized-html-content ol {
-  @apply my-4 pl-8;
-  margin: 1em 0;
-  padding-left: 2em;
-}
-
-.normalized-html-content ul {
-  @apply list-disc;
-}
-
-.normalized-html-content ol {
-  @apply list-decimal;
-}
-
-.normalized-html-content li {
-  @apply mb-2;
-  margin-bottom: 0.5em;
-}
-
-.normalized-html-content table {
-  @apply w-full border-collapse my-4;
-  width: 100%;
-  border-collapse: collapse;
-  margin: 1em 0;
-}
-
-.normalized-html-content table th,
-.normalized-html-content table td {
-  @apply p-2 border border-gray-200 dark:border-gray-700;
-  padding: 0.5em;
-  border: 1px solid #e5e7eb;
-}
-
-.normalized-html-content table th {
-  @apply bg-gray-50 dark:bg-gray-800 font-semibold;
-  background-color: #f9fafb;
-  font-weight: 600;
-}
-
-.normalized-html-content strong {
-  @apply font-semibold;
-}
-
-.normalized-html-content em {
-  @apply italic;
-}
-
-.normalized-html-content a {
-  @apply text-blue-600 dark:text-blue-400 hover:underline;
-}
-
-.normalized-html-content blockquote {
-  @apply border-l-4 border-gray-300 dark:border-gray-600 pl-4 italic my-4;
-}
-
-.normalized-html-content code {
-  @apply bg-gray-100 dark:bg-gray-800 px-1 py-0.5 rounded text-sm font-mono;
-}
-
-.normalized-html-content pre {
-  @apply bg-gray-100 dark:bg-gray-800 p-4 rounded overflow-x-auto my-4;
-}
-
-.normalized-html-content pre code {
-  @apply bg-transparent p-0;
-}
-
-/* Monospace font utility */
-.font-mono-custom {
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
-}
+.tableCheckbox:checked ~ span span { @apply opacity-100; }
+.tableCheckbox:checked ~ span { @apply border-brand-500 bg-brand-500; }
+
+.apexcharts-legend-text { @apply !text-gray-700 dark:!text-gray-400; }
+.apexcharts-text { @apply !fill-gray-700 dark:!fill-gray-400; }
+.apexcharts-tooltip.apexcharts-theme-light { @apply gap-1 !rounded-lg !border-gray-200 p-3 !shadow-theme-sm dark:!border-gray-800 dark:!bg-gray-900; }
+.apexcharts-tooltip-marker { margin-right: 6px; height: 6px; width: 6px; }
+.apexcharts-legend-text { @apply !pl-5 !text-gray-700 dark:!text-gray-400; }
+.apexcharts-tooltip-series-group { @apply !p-0; }
+.apexcharts-tooltip-y-group { @apply !p-0; }
+.apexcharts-tooltip-title { @apply !mb-0 !border-b-0 !bg-transparent !p-0 !text-[10px] !leading-4 !text-gray-800 dark:!text-white/90; }
+.apexcharts-tooltip-text { @apply !text-theme-xs !text-gray-700 dark:!text-white/90; }
+.apexcharts-tooltip-text-y-value { @apply !font-medium; }
+.apexcharts-gridline { @apply !stroke-gray-100 dark:!stroke-gray-800; }
+#chartTwo .apexcharts-datalabels-group { @apply !-translate-y-24; }
+#chartTwo .apexcharts-datalabels-group .apexcharts-text { @apply !fill-gray-800 !font-semibold dark:!fill-white/90; }
+#chartDarkStyle .apexcharts-datalabels-group .apexcharts-text { @apply !fill-gray-800 !font-semibold dark:!fill-white/90; }
+#chartSixteen .apexcharts-legend { @apply !p-0 !pl-6; }
+
+.jvectormap-container { @apply !bg-gray-50 dark:!bg-gray-900; }
+.jvectormap-region.jvectormap-element { @apply !fill-gray-300 hover:!fill-brand-500 dark:!fill-gray-700 dark:hover:!fill-brand-500; }
+.jvectormap-marker.jvectormap-element { @apply !stroke-gray-200 dark:!stroke-gray-800; }
+.jvectormap-tip { @apply !bg-brand-500 !border-none !px-2 !py-1; }
+.jvectormap-zoomin,.jvectormap-zoomout { @apply !bg-brand-500; }
+
+.task-item + .task-item { @apply !border-t-gray-200 dark:!border-t-gray-700; }
+.custom-input-date input::-webkit-calendar-picker-indicator { background-position: center; background-repeat: no-repeat; background-size: 20px; cursor: pointer; }
+.no-scrollbar::-webkit-scrollbar { display: none; }
+.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
+.chat-height { height: calc(100vh - 8.125rem); }
+.inbox-height { height: calc(100vh - 8.125rem); }
diff --git a/frontend/src/layout/AppHeader.tsx b/frontend/src/layout/AppHeader.tsx
index 6b1cb6a8..78d727e8 100644
--- a/frontend/src/layout/AppHeader.tsx
+++ b/frontend/src/layout/AppHeader.tsx
@@ -30,18 +30,18 @@ const SITE_WITH_ALL_SITES_ROUTES = [
 
 // Badge color mappings for light versions
 const badgeColors: Record<string, { bg: string; light: string }> = {
-  blue: { bg: 'bg-blue-600 dark:bg-blue-500', light: 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300' },
-  green: { bg: 'bg-green-600 dark:bg-green-500', light: 'bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-300' },
+  blue: { bg: 'bg-brand-600 dark:bg-brand-500', light: 'bg-brand-100 text-brand-700 dark:bg-brand-500/20 dark:text-brand-300' },
+  green: { bg: 'bg-success-600 dark:bg-success-500', light: 'bg-success-100 text-success-700 dark:bg-success-500/20 dark:text-success-300' },
   purple: { bg: 'bg-purple-600 dark:bg-purple-500', light: 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300' },
-  orange: { bg: 'bg-orange-600 dark:bg-orange-500', light: 'bg-orange-100 text-orange-700 dark:bg-orange-500/20 dark:text-orange-300' },
-  red: { bg: 'bg-red-600 dark:bg-red-500', light: 'bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-300' },
-  indigo: { bg: 'bg-indigo-600 dark:bg-indigo-500', light: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-500/20 dark:text-indigo-300' },
-  yellow: { bg: 'bg-yellow-600 dark:bg-yellow-500', light: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-500/20 dark:text-yellow-300' },
-  pink: { bg: 'bg-pink-600 dark:bg-pink-500', light: 'bg-pink-100 text-pink-700 dark:bg-pink-500/20 dark:text-pink-300' },
-  emerald: { bg: 'bg-emerald-600 dark:bg-emerald-500', light: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-300' },
-  cyan: { bg: 'bg-cyan-600 dark:bg-cyan-500', light: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-500/20 dark:text-cyan-300' },
-  amber: { bg: 'bg-amber-600 dark:bg-amber-500', light: 'bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-300' },
-  teal: { bg: 'bg-teal-600 dark:bg-teal-500', light: 'bg-teal-100 text-teal-700 dark:bg-teal-500/20 dark:text-teal-300' },
+  orange: { bg: 'bg-warning-600 dark:bg-warning-500', light: 'bg-warning-100 text-warning-700 dark:bg-warning-500/20 dark:text-warning-300' },
+  red: { bg: 'bg-error-600 dark:bg-error-500', light: 'bg-error-100 text-error-700 dark:bg-error-500/20 dark:text-error-300' },
+  indigo: { bg: 'bg-purple-600 dark:bg-purple-500', light: 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300' },
+  yellow: { bg: 'bg-warning-600 dark:bg-warning-500', light: 'bg-warning-100 text-warning-700 dark:bg-warning-500/20 dark:text-warning-300' },
+  pink: { bg: 'bg-purple-600 dark:bg-purple-500', light: 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300' },
+  emerald: { bg: 'bg-purple-600 dark:bg-purple-500', light: 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300' },
+  cyan: { bg: 'bg-purple-600 dark:bg-purple-500', light: 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300' },
+  amber: { bg: 'bg-warning-600 dark:bg-warning-500', light: 'bg-warning-100 text-warning-700 dark:bg-warning-500/20 dark:text-warning-300' },
+  teal: { bg: 'bg-purple-600 dark:bg-purple-500', light: 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300' },
 };
 
 const AppHeader: React.FC = () => {
diff --git a/frontend/src/layout/SidebarWidget.tsx b/frontend/src/layout/SidebarWidget.tsx
index 4263e7cb..2205f823 100644
--- a/frontend/src/layout/SidebarWidget.tsx
+++ b/frontend/src/layout/SidebarWidget.tsx
@@ -2,7 +2,7 @@ export default function SidebarWidget() {
   return (
     <div
       className={`
-        mx-auto mb-10 w-full max-w-60 rounded-2xl bg-blue-50 px-4 py-5 text-center dark:bg-blue-900/20`}
+        mx-auto mb-10 w-full max-w-60 rounded-2xl bg-brand-50 px-4 py-5 text-center dark:bg-brand-900/20`}
     >
       <ul className="space-y-1 text-sm text-gray-700 dark:text-gray-300">
         <li>Infinite.</li>
diff --git a/frontend/src/marketing/components/CTASection.tsx b/frontend/src/marketing/components/CTASection.tsx
index 5fceb1c1..91237c68 100644
--- a/frontend/src/marketing/components/CTASection.tsx
+++ b/frontend/src/marketing/components/CTASection.tsx
@@ -56,16 +56,16 @@ const CTASection: React.FC<CTASectionProps> = ({
   };
 
   return (
-    <section className="py-24 bg-gradient-to-b from-white via-slate-50 to-white">
+    <section className="py-24 bg-gradient-to-b from-white via-gray-50 to-white">
       <div className="max-w-5xl mx-auto px-6">
         <div className="relative overflow-hidden rounded-3xl border-2 border-[var(--color-primary)]/20 bg-gradient-to-br from-[var(--color-primary)]/5 via-[var(--color-purple)]/5 to-[var(--color-success)]/5 p-10 md:p-14 shadow-xl">
           <div className="absolute inset-0 bg-gradient-to-r from-[var(--color-primary)]/10 via-transparent to-[var(--color-purple)]/10" />
           <div className="absolute -inset-1 bg-gradient-to-r from-[var(--color-primary)]/20 via-[var(--color-purple)]/20 to-[var(--color-success)]/20 rounded-3xl blur-xl -z-10 opacity-50" />
           <div className="relative flex flex-col gap-6">
-            <h3 className="text-3xl md:text-4xl font-semibold text-slate-900 leading-tight">
+            <h3 className="text-3xl md:text-4xl font-semibold text-gray-900 leading-tight">
               {title}
             </h3>
-            <p className="text-slate-600 text-base md:text-lg max-w-2xl">
+            <p className="text-gray-600 text-base md:text-lg max-w-2xl">
               {description}
             </p>
             <div className="flex flex-col sm:flex-row gap-4">
diff --git a/frontend/src/marketing/components/FeatureGrid.tsx b/frontend/src/marketing/components/FeatureGrid.tsx
index 73ec8795..4a5629ed 100644
--- a/frontend/src/marketing/components/FeatureGrid.tsx
+++ b/frontend/src/marketing/components/FeatureGrid.tsx
@@ -28,19 +28,19 @@ const FeatureGrid: React.FC<FeatureGridProps> = ({ features }) => {
           return (
             <div
               key={feature.title}
-              className="relative rounded-3xl border-2 border-slate-200 bg-gradient-to-br from-white to-slate-50/50 p-8 flex flex-col gap-4 group hover:border-[#0693e3]/50 transition-all shadow-sm hover:shadow-xl hover:-translate-y-1"
+              className="relative rounded-3xl border-2 border-gray-200 bg-gradient-to-br from-white to-gray-50/50 p-8 flex flex-col gap-4 group hover:border-[var(--color-primary)]/50 transition-all shadow-sm hover:shadow-xl hover:-translate-y-1"
             >
               <div className={`size-12 rounded-2xl bg-gradient-to-br ${gradient} flex items-center justify-center text-white shadow-lg`}>
                 {feature.icon}
               </div>
-              <h3 className="text-xl font-semibold text-slate-900">{feature.title}</h3>
-              <p className="text-sm text-slate-600 leading-relaxed">
+              <h3 className="text-xl font-semibold text-gray-900">{feature.title}</h3>
+              <p className="text-sm text-gray-600 leading-relaxed">
                 {feature.description}
               </p>
               {feature.link && (
                 <a
                   href={feature.link.href}
-                  className="inline-flex items-center gap-2 text-sm font-semibold text-[#0693e3] hover:text-[#0472b8] group-hover:gap-3 transition-all"
+                  className="inline-flex items-center gap-2 text-sm font-semibold text-[var(--color-primary)] hover:text-[var(--color-brand-700)] group-hover:gap-3 transition-all"
                 >
                   {feature.link.label}
                   <ArrowUpRightIcon className="h-4 w-4" />
diff --git a/frontend/src/marketing/components/HeroSection.tsx b/frontend/src/marketing/components/HeroSection.tsx
index 6a429027..e0c72902 100644
--- a/frontend/src/marketing/components/HeroSection.tsx
+++ b/frontend/src/marketing/components/HeroSection.tsx
@@ -58,7 +58,7 @@ const HeroSection: React.FC<HeroSectionProps> = ({
   };
 
   return (
-    <section className="relative overflow-hidden bg-gradient-to-br from-[#0d1b2a] via-[#142b3f] to-[#1a3a5a]">
+    <section className="relative overflow-hidden bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900">
       <div className="absolute inset-0 bg-gradient-to-br from-[var(--color-primary)]/10 via-transparent to-[var(--color-purple)]/10" />
       <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(6,147,227,0.15),transparent_50%)]" />
       <div className="relative max-w-6xl mx-auto px-6 py-24 md:py-32 flex flex-col lg:flex-row gap-16 items-center">
@@ -74,7 +74,7 @@ const HeroSection: React.FC<HeroSectionProps> = ({
           <h1 className="text-4xl md:text-6xl font-semibold leading-tight text-white">
             {headline}
           </h1>
-          <p className="text-lg md:text-xl text-slate-300 leading-relaxed max-w-xl">
+          <p className="text-lg md:text-xl text-gray-300 leading-relaxed max-w-xl">
             {subheadline}
           </p>
           <div className="flex flex-col sm:flex-row gap-4">
diff --git a/frontend/src/marketing/components/LoadingPage.tsx b/frontend/src/marketing/components/LoadingPage.tsx
index d52c17be..50ddd560 100644
--- a/frontend/src/marketing/components/LoadingPage.tsx
+++ b/frontend/src/marketing/components/LoadingPage.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 const LoadingPage: React.FC = () => {
   return (
-    <div className="min-h-screen flex flex-col items-center justify-center bg-white text-slate-900">
+    <div className="min-h-screen flex flex-col items-center justify-center bg-white text-gray-900">
       <div className="flex items-center gap-3 text-lg font-semibold tracking-wide uppercase">
         <span className="h-3 w-3 rounded-full bg-brand-500 animate-pulse" />
         Loading experience…
diff --git a/frontend/src/marketing/components/LogoCloud.tsx b/frontend/src/marketing/components/LogoCloud.tsx
index 23818a55..5f8f6ad9 100644
--- a/frontend/src/marketing/components/LogoCloud.tsx
+++ b/frontend/src/marketing/components/LogoCloud.tsx
@@ -14,7 +14,7 @@ const LogoCloud: React.FC = () => {
     <section className="py-12 bg-white">
       <div className="max-w-6xl mx-auto px-6">
         <div className="flex flex-col gap-6 items-center">
-          <span className="text-xs uppercase tracking-[0.28em] text-slate-500 font-medium">
+          <span className="text-xs uppercase tracking-[0.28em] text-gray-500 font-medium">
             Trusted by modern organic teams
           </span>
           <div className="flex flex-wrap justify-center gap-8 md:gap-12 items-center">
diff --git a/frontend/src/marketing/components/MetricsBar.tsx b/frontend/src/marketing/components/MetricsBar.tsx
index d7429938..2a8179fe 100644
--- a/frontend/src/marketing/components/MetricsBar.tsx
+++ b/frontend/src/marketing/components/MetricsBar.tsx
@@ -18,7 +18,7 @@ const MetricsBar: React.FC<MetricsBarProps> = ({ metrics }) => {
 
   return (
     <div className="max-w-5xl mx-auto -mt-12 sm:-mt-16 px-6">
-      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 rounded-2xl border-2 border-slate-200 bg-gradient-to-br from-white to-slate-50/50 shadow-xl p-6 backdrop-blur-sm">
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 rounded-2xl border-2 border-gray-200 bg-gradient-to-br from-white to-gray-50/50 shadow-xl p-6 backdrop-blur-sm">
         {metrics.map((metric, index) => {
           const gradient = accentColors[index % accentColors.length];
           return (
@@ -28,7 +28,7 @@ const MetricsBar: React.FC<MetricsBarProps> = ({ metrics }) => {
                 <div className={`text-3xl font-semibold bg-gradient-to-r ${gradient} bg-clip-text text-transparent`}>
                   {metric.value}
                 </div>
-                <div className="text-sm uppercase tracking-[0.2em] text-slate-500 mt-2">
+                <div className="text-sm uppercase tracking-[0.2em] text-gray-500 mt-2">
                   {metric.label}
                 </div>
               </div>
diff --git a/frontend/src/marketing/components/SectionHeading.tsx b/frontend/src/marketing/components/SectionHeading.tsx
index ffb4e6cc..c562daea 100644
--- a/frontend/src/marketing/components/SectionHeading.tsx
+++ b/frontend/src/marketing/components/SectionHeading.tsx
@@ -22,11 +22,11 @@ const SectionHeading: React.FC<SectionHeadingProps> = ({
           {eyebrow}
         </span>
       )}
-      <h2 className="text-3xl md:text-4xl font-semibold text-slate-900 leading-tight max-w-3xl">
+      <h2 className="text-3xl md:text-4xl font-semibold text-gray-900 leading-tight max-w-3xl">
         {title}
       </h2>
       {description && (
-        <p className="text-slate-600 max-w-2xl text-base md:text-lg leading-relaxed">
+        <p className="text-gray-600 max-w-2xl text-base md:text-lg leading-relaxed">
           {description}
         </p>
       )}
diff --git a/frontend/src/marketing/components/TestimonialSlider.tsx b/frontend/src/marketing/components/TestimonialSlider.tsx
index 19446642..811b2ccd 100644
--- a/frontend/src/marketing/components/TestimonialSlider.tsx
+++ b/frontend/src/marketing/components/TestimonialSlider.tsx
@@ -3,13 +3,13 @@ import { testimonials } from "../data/testimonials";
 
 const TestimonialSlider: React.FC = () => {
   return (
-    <section className="bg-slate-50">
+    <section className="bg-gray-50">
       <div className="max-w-6xl mx-auto px-6 py-24 space-y-12">
         <div className="flex flex-col items-center gap-4 text-center">
           <span className="inline-flex items-center rounded-full border border-brand-200 bg-brand-50 px-4 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-brand-600">
             Loved by scaling teams
           </span>
-          <h2 className="text-3xl md:text-4xl font-semibold text-slate-900 leading-tight max-w-2xl">
+          <h2 className="text-3xl md:text-4xl font-semibold text-gray-900 leading-tight max-w-2xl">
             Teams ship more content, capture more demand, and see faster ROI with Igny8.
           </h2>
         </div>
@@ -17,14 +17,14 @@ const TestimonialSlider: React.FC = () => {
           {testimonials.map((testimonial) => (
             <div
               key={testimonial.name}
-              className="rounded-3xl border border-slate-200 bg-white p-8 flex flex-col gap-6 relative overflow-hidden shadow-sm hover:shadow-md transition"
+              className="rounded-3xl border border-gray-200 bg-white p-8 flex flex-col gap-6 relative overflow-hidden shadow-sm hover:shadow-md transition"
             >
               <div className="absolute -top-16 left-1/2 -translate-x-1/2 h-32 w-[140%] rounded-[50%] bg-brand-100 blur-3xl pointer-events-none" />
-              <p className="text-base text-slate-700 leading-relaxed relative z-10">
+              <p className="text-base text-gray-700 leading-relaxed relative z-10">
                 "{testimonial.quote}"
               </p>
-              <div className="flex flex-col text-sm text-slate-600 relative z-10">
-                <span className="font-semibold text-slate-900">{testimonial.name}</span>
+              <div className="flex flex-col text-sm text-gray-600 relative z-10">
+                <span className="font-semibold text-gray-900">{testimonial.name}</span>
                 <span>
                   {testimonial.title} · {testimonial.company}
                 </span>
diff --git a/frontend/src/marketing/components/WorkflowSteps.tsx b/frontend/src/marketing/components/WorkflowSteps.tsx
index cbd33365..b76cf368 100644
--- a/frontend/src/marketing/components/WorkflowSteps.tsx
+++ b/frontend/src/marketing/components/WorkflowSteps.tsx
@@ -25,15 +25,15 @@ const WorkflowSteps: React.FC<WorkflowStepsProps> = ({ steps }) => {
           return (
             <div
               key={step.title}
-              className="rounded-3xl border-2 border-slate-200 bg-gradient-to-br from-white to-slate-50/50 p-6 flex flex-col gap-4 hover:border-[var(--color-primary)]/50 transition-all shadow-sm hover:shadow-xl hover:-translate-y-1 group"
+              className="rounded-3xl border-2 border-gray-200 bg-gradient-to-br from-white to-gray-50/50 p-6 flex flex-col gap-4 hover:border-[var(--color-primary)]/50 transition-all shadow-sm hover:shadow-xl hover:-translate-y-1 group"
             >
               <div className={`h-12 w-12 rounded-2xl bg-gradient-to-br ${gradient} flex items-center justify-center font-semibold text-white text-xl shadow-lg`}>
                 {index + 1}
               </div>
-              <h3 className="text-lg font-semibold text-slate-900 leading-snug group-hover:text-[var(--color-primary)] transition">
+              <h3 className="text-lg font-semibold text-gray-900 leading-snug group-hover:text-[var(--color-primary)] transition">
                 {step.title}
               </h3>
-              <p className="text-sm text-slate-600 leading-relaxed">
+              <p className="text-sm text-gray-600 leading-relaxed">
                 {step.subtitle}
               </p>
             </div>
diff --git a/frontend/src/marketing/layout/MarketingLayout.tsx b/frontend/src/marketing/layout/MarketingLayout.tsx
index d6e10482..8418bfa3 100644
--- a/frontend/src/marketing/layout/MarketingLayout.tsx
+++ b/frontend/src/marketing/layout/MarketingLayout.tsx
@@ -15,18 +15,18 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children }) => {
   const closeMobile = () => setMobileOpen(false);
 
   return (
-    <div className="min-h-screen flex flex-col bg-gradient-to-b from-white via-slate-50 to-white text-slate-900">
-      <header className="sticky top-0 z-[1100] backdrop-blur-xl bg-white/95 border-b border-slate-200 shadow-sm">
+    <div className="min-h-screen flex flex-col bg-gradient-to-b from-white via-gray-50 to-white text-gray-900">
+      <header className="sticky top-0 z-[1100] backdrop-blur-xl bg-white/95 border-b border-gray-200 shadow-sm">
         <div className="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
           <Link to="/" className="flex items-center gap-3" onClick={closeMobile}>
             <span className="h-10 w-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] flex items-center justify-center text-lg font-bold text-white shadow-lg shadow-[var(--color-primary)]/30">
               IG
             </span>
             <div className="flex flex-col leading-tight">
-              <span className="font-semibold tracking-wide text-slate-900 uppercase">
+              <span className="font-semibold tracking-wide text-gray-900 uppercase">
                 Igny8
               </span>
-              <span className="text-xs text-slate-600">AI growth engine</span>
+              <span className="text-xs text-gray-600">AI growth engine</span>
             </div>
           </Link>
 
@@ -37,7 +37,7 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children }) => {
                 <Link
                   key={link.name}
                   to={link.path}
-                  className={`transition hover:text-[var(--color-primary)] ${isActive ? "text-[var(--color-primary)] font-semibold" : "text-slate-700"}`}
+                  className={`transition hover:text-[var(--color-primary)] ${isActive ? "text-[var(--color-primary)] font-semibold" : "text-gray-700"}`}
                 >
                   {link.name}
                 </Link>
@@ -48,7 +48,7 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children }) => {
           <div className="hidden lg:flex items-center gap-4">
             <a
               href="https://app.igny8.com/login"
-              className="text-sm font-medium text-slate-700 hover:text-slate-900 transition"
+              className="text-sm font-medium text-gray-700 hover:text-gray-900 transition"
             >
               Log in
             </a>
@@ -61,7 +61,7 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children }) => {
           </div>
 
           <button
-            className="lg:hidden inline-flex items-center justify-center rounded-lg border border-slate-200 p-2 text-slate-700"
+            className="lg:hidden inline-flex items-center justify-center rounded-lg border border-gray-200 p-2 text-gray-700"
             onClick={toggleMobile}
             aria-label="Toggle navigation"
           >
@@ -70,14 +70,14 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children }) => {
         </div>
 
         {mobileOpen && (
-          <div className="lg:hidden border-t border-slate-200 bg-white backdrop-blur-xl">
+          <div className="lg:hidden border-t border-gray-200 bg-white backdrop-blur-xl">
             <nav className="px-6 py-4 flex flex-col gap-3">
               {primaryNav.map((link) => (
                 <Link
                   key={link.name}
                   to={link.path}
                   onClick={closeMobile}
-                  className="text-sm font-medium text-slate-700 hover:text-slate-900 transition"
+                  className="text-sm font-medium text-gray-700 hover:text-gray-900 transition"
                 >
                   {link.name}
                 </Link>
@@ -86,7 +86,7 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children }) => {
             <div className="px-6 pb-6 flex flex-col gap-3">
               <a
                 href="https://app.igny8.com/login"
-                className="text-sm font-medium text-slate-700 hover:text-slate-900 transition"
+                className="text-sm font-medium text-gray-700 hover:text-gray-900 transition"
                 onClick={closeMobile}
               >
                 Log in
@@ -105,7 +105,7 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children }) => {
 
       <main className="flex-1">{children}</main>
 
-      <footer className="bg-gradient-to-br from-[#0d1b2a] via-[#142b3f] to-[#0d1b2a] border-t border-[#0693e3]/20">
+      <footer className="bg-gradient-to-br from-[#0d1b2a] via-[#142b3f] to-[#0d1b2a] border-t border-[var(--color-primary)]/20">
         <div className="max-w-6xl mx-auto px-6 py-16 grid grid-cols-1 md:grid-cols-4 gap-12">
           <div className="space-y-4">
             <Link to="/" className="inline-flex items-center gap-3">
@@ -116,15 +116,15 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children }) => {
                 <span className="font-semibold tracking-wide text-white uppercase">
                   Igny8
                 </span>
-                <span className="text-xs text-slate-300">
+                <span className="text-xs text-gray-300">
                   AI + SEO automation suite
                 </span>
               </div>
             </Link>
-            <p className="text-sm text-slate-300 max-w-xs">
+            <p className="text-sm text-gray-300 max-w-xs">
               Automate keyword intelligence, clustering, content production, and image creation in one unified growth engine.
             </p>
-            <div className="text-xs text-slate-400">
+            <div className="text-xs text-gray-400">
               © {new Date().getFullYear()} Igny8 Labs. All rights reserved.
             </div>
           </div>
@@ -134,7 +134,7 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children }) => {
               <h4 className="text-sm font-semibold text-white uppercase tracking-wide mb-4">
                 {group.title}
               </h4>
-              <ul className="space-y-3 text-sm text-slate-300">
+              <ul className="space-y-3 text-sm text-gray-300">
                 {group.links.map((link) => (
                   <li key={link.name}>
                     <Link to={link.path} className="hover:text-[var(--color-primary)] transition">
@@ -146,7 +146,7 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children }) => {
             </div>
           ))}
         </div>
-        <div className="border-t border-[var(--color-primary)]/20 py-6 px-6 text-center text-xs text-slate-400">
+        <div className="border-t border-[var(--color-primary)]/20 py-6 px-6 text-center text-xs text-gray-400">
           Built for marketers who automate growth with AI.
         </div>
       </footer>
diff --git a/frontend/src/marketing/pages/CaseStudies.tsx b/frontend/src/marketing/pages/CaseStudies.tsx
index 8df099e0..c70edc8c 100644
--- a/frontend/src/marketing/pages/CaseStudies.tsx
+++ b/frontend/src/marketing/pages/CaseStudies.tsx
@@ -80,17 +80,17 @@ const CaseStudies: React.FC = () => {
       <SEO meta={getMetaTags("caseStudies")} />
       <div className="bg-white">
       {/* HERO SECTION */}
-      <section className="relative overflow-hidden bg-gradient-to-b from-white via-slate-50/50 to-white">
+      <section className="relative overflow-hidden bg-gradient-to-b from-white via-gray-50/50 to-white">
         <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(6,147,227,0.03),transparent_60%)]" />
         
         <div className="relative max-w-4xl mx-auto px-6 py-24 md:py-32 text-center z-10">
-          <span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.28em] text-slate-500 bg-slate-100 px-4 py-2 rounded-full mb-6">
+          <span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.28em] text-gray-500 bg-gray-100 px-4 py-2 rounded-full mb-6">
             Case Studies
           </span>
-          <h1 className="text-5xl md:text-6xl lg:text-5xl font-bold leading-tight text-slate-900 mb-6">
+          <h1 className="text-5xl md:text-6xl lg:text-5xl font-bold leading-tight text-gray-900 mb-6">
             Stories from teams automating their way to category leadership.
           </h1>
-          <p className="text-xl md:text-2xl text-slate-600 mb-10 max-w-2xl mx-auto leading-relaxed">
+          <p className="text-xl md:text-2xl text-gray-600 mb-10 max-w-2xl mx-auto leading-relaxed">
             See how publishers, agencies, and SaaS companies transformed their SEO and content operations with Igny8.
           </p>
         </div>
@@ -100,26 +100,26 @@ const CaseStudies: React.FC = () => {
       <section className="max-w-7xl mx-auto px-6 pb-24 space-y-16">
         {caseStudies.map((cs, idx) => {
           const metricColors = [
-            { border: "border-slate-200", bg: "from-white to-slate-50/50", text: "text-[var(--color-primary)]" },
-            { border: "border-slate-200", bg: "from-white to-slate-50/50", text: "text-[#0bbf87]" },
-            { border: "border-slate-200", bg: "from-white to-slate-50/50", text: "text-[#ff7a00]" },
+            { border: "border-gray-200", bg: "from-white to-gray-50/50", text: "text-[var(--color-primary)]" },
+            { border: "border-gray-200", bg: "from-white to-gray-50/50", text: "text-[var(--color-success)]" },
+            { border: "border-gray-200", bg: "from-white to-gray-50/50", text: "text-[var(--color-warning)]" },
           ];
           return (
             <div
               key={cs.company}
-              className="rounded-3xl border-2 border-slate-200 bg-white p-10 md:p-12 grid grid-cols-1 lg:grid-cols-2 gap-12 hover:shadow-xl hover:-translate-y-1 transition-all"
+              className="rounded-3xl border-2 border-gray-200 bg-white p-10 md:p-12 grid grid-cols-1 lg:grid-cols-2 gap-12 hover:shadow-xl hover:-translate-y-1 transition-all"
             >
               <div className="space-y-6">
                 <div className="flex items-center gap-3">
                   <div className={`size-12 rounded-xl bg-gradient-to-br ${cs.iconColor} flex items-center justify-center text-white shadow-lg`}>
                     <CheckCircleIcon className="h-6 w-6" />
                   </div>
-                  <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.2em] bg-slate-100 text-slate-600">
+                  <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.2em] bg-gray-100 text-gray-600">
                     {cs.company}
                   </span>
                 </div>
-                <h3 className="text-3xl md:text-4xl font-bold text-slate-900">{cs.headline}</h3>
-                <p className="text-base text-slate-600 leading-relaxed">{cs.summary}</p>
+                <h3 className="text-3xl md:text-4xl font-bold text-gray-900">{cs.headline}</h3>
+                <p className="text-base text-gray-600 leading-relaxed">{cs.summary}</p>
                 <div className="grid grid-cols-3 gap-4 pt-4">
                   {cs.metrics.map((metric, metricIdx) => {
                     const metricColor = metricColors[metricIdx % metricColors.length];
@@ -131,7 +131,7 @@ const CaseStudies: React.FC = () => {
                         <div className={`text-2xl md:text-3xl font-bold ${metricColor.text}`}>
                           {metric.value}
                         </div>
-                        <div className="text-xs uppercase tracking-[0.2em] text-slate-600 font-semibold">
+                        <div className="text-xs uppercase tracking-[0.2em] text-gray-600 font-semibold">
                           {metric.label}
                         </div>
                       </div>
@@ -140,7 +140,7 @@ const CaseStudies: React.FC = () => {
                 </div>
               </div>
               <div className="relative">
-                <div className="rounded-3xl border-2 border-slate-200 bg-gradient-to-br from-slate-50 to-white overflow-hidden shadow-lg">
+                <div className="rounded-3xl border-2 border-gray-200 bg-gradient-to-br from-gray-50 to-white overflow-hidden shadow-lg">
                   <img
                     src={`/marketing/images/${cs.image}`}
                     alt={`${cs.company} case study`}
@@ -154,22 +154,22 @@ const CaseStudies: React.FC = () => {
       </section>
 
       {/* RESULTS & ADVISORY BOARD */}
-      <section className="bg-gradient-to-b from-white via-slate-50/30 to-white py-24">
+      <section className="bg-gradient-to-b from-white via-gray-50/30 to-white py-24">
         <div className="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-8">
-          <div className="rounded-2xl border-2 border-slate-200 bg-white p-8 space-y-6 shadow-sm">
+          <div className="rounded-2xl border-2 border-gray-200 bg-white p-8 space-y-6 shadow-sm">
             <div className="flex items-center gap-3">
               <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] flex items-center justify-center text-white shadow-lg">
                 <CheckCircleIcon className="h-6 w-6" />
               </div>
-              <h4 className="text-2xl font-bold text-slate-900">
+              <h4 className="text-2xl font-bold text-gray-900">
                 Results you can expect
               </h4>
             </div>
-            <ul className="space-y-4 text-sm text-slate-700">
+            <ul className="space-y-4 text-sm text-gray-700">
               {[
-                { text: "30-60 day onboarding to deploy automation and Thinker governance.", color: "bg-[#0693e3]" },
-                { text: "3-5× increase in content throughput without sacrificing editorial quality.", color: "bg-[#0bbf87]" },
-                { text: "Clear ROI dashboards tying automation to revenue outcomes.", color: "bg-[#ff7a00]" },
+                { text: "30-60 day onboarding to deploy automation and Thinker governance.", color: "bg-[var(--color-primary)]" },
+                { text: "3-5× increase in content throughput without sacrificing editorial quality.", color: "bg-[var(--color-success)]" },
+                { text: "Clear ROI dashboards tying automation to revenue outcomes.", color: "bg-[var(--color-warning)]" },
               ].map((item, index) => (
                 <li key={item.text} className="flex gap-3">
                   <span className={`mt-1.5 size-2 rounded-full ${item.color} shadow-sm flex-shrink-0`} />
@@ -178,16 +178,16 @@ const CaseStudies: React.FC = () => {
               ))}
             </ul>
           </div>
-          <div className="rounded-2xl border-2 border-slate-200 bg-white p-8 space-y-6 shadow-sm">
+          <div className="rounded-2xl border-2 border-gray-200 bg-white p-8 space-y-6 shadow-sm">
             <div className="flex items-center gap-3">
               <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-success)] to-[var(--color-success-dark)] flex items-center justify-center text-white shadow-lg">
                 <CheckCircleIcon className="h-6 w-6" />
               </div>
-              <h4 className="text-2xl font-bold text-slate-900">
+              <h4 className="text-2xl font-bold text-gray-900">
                 Customer advisory board
               </h4>
             </div>
-            <p className="text-base text-slate-700 leading-relaxed">
+            <p className="text-base text-gray-700 leading-relaxed">
               Igny8's roadmap is shaped by an active community of customer strategists, agency partners, and product marketers. Join and get early access to features, template libraries, and industry benchmarks.
             </p>
             <button className="inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-dark)] text-white px-6 py-3 text-sm font-semibold hover:shadow-lg transition">
@@ -199,7 +199,7 @@ const CaseStudies: React.FC = () => {
       </section>
 
       {/* FINAL CTA */}
-      <section className="relative overflow-hidden bg-gradient-to-br from-[#0693e3] via-[#5d4ae3] to-[#8b5cf6]">
+      <section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-purple)] to-[var(--color-purple-400)]">
         {/* Radial glow */}
         <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.1),transparent_70%)]" />
         
diff --git a/frontend/src/marketing/pages/Contact.tsx b/frontend/src/marketing/pages/Contact.tsx
index d05f26b1..624b489a 100644
--- a/frontend/src/marketing/pages/Contact.tsx
+++ b/frontend/src/marketing/pages/Contact.tsx
@@ -8,7 +8,7 @@ const Contact: React.FC = () => {
   return (
     <>
       <SEO meta={getMetaTags("contact")} />
-      <div className="bg-gradient-to-b from-white via-slate-50/30 to-white text-slate-900">
+      <div className="bg-gradient-to-b from-white via-gray-50/30 to-white text-gray-900">
       <section className="max-w-4xl mx-auto px-6 pt-24 pb-12">
         <SectionHeading
           eyebrow="Contact"
@@ -20,87 +20,87 @@ const Contact: React.FC = () => {
       <section className="max-w-5xl mx-auto px-6 pb-24 grid grid-cols-1 lg:grid-cols-2 gap-12">
         <form className="rounded-3xl border-2 border-[var(--color-primary)]/30 bg-gradient-to-br from-[var(--color-primary)]/10 via-white to-[var(--color-success)]/5 p-10 space-y-6 shadow-lg">
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-            <label className="flex flex-col gap-2 text-sm text-slate-600">
+            <label className="flex flex-col gap-2 text-sm text-gray-600">
               First name
               <input
                 type="text"
                 placeholder="Alex"
-                className="rounded-xl border-2 border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-500 focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
+                className="rounded-xl border-2 border-gray-200 bg-white px-4 py-3 text-sm text-gray-900 placeholder:text-gray-500 focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
               />
             </label>
-            <label className="flex flex-col gap-2 text-sm text-slate-600">
+            <label className="flex flex-col gap-2 text-sm text-gray-600">
               Last name
               <input
                 type="text"
                 placeholder="Rivera"
-                className="rounded-xl border-2 border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-500 focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
+                className="rounded-xl border-2 border-gray-200 bg-white px-4 py-3 text-sm text-gray-900 placeholder:text-gray-500 focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
               />
             </label>
           </div>
 
-          <label className="flex flex-col gap-2 text-sm text-slate-600">
+          <label className="flex flex-col gap-2 text-sm text-gray-600">
             Work email
             <input
               type="email"
               placeholder="you@company.com"
-              className="rounded-xl border-2 border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-500 focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
+              className="rounded-xl border-2 border-gray-200 bg-white px-4 py-3 text-sm text-gray-900 placeholder:text-gray-500 focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
             />
           </label>
 
-          <label className="flex flex-col gap-2 text-sm text-slate-600">
+          <label className="flex flex-col gap-2 text-sm text-gray-600">
             Company
             <input
               type="text"
               placeholder="Company name"
-              className="rounded-xl border-2 border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-500 focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
+              className="rounded-xl border-2 border-gray-200 bg-white px-4 py-3 text-sm text-gray-900 placeholder:text-gray-500 focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
             />
           </label>
 
-          <label className="flex flex-col gap-2 text-sm text-slate-600">
+          <label className="flex flex-col gap-2 text-sm text-gray-600">
             How can we help?
             <textarea
               rows={4}
               placeholder="Tell us about your current workflow, challenges, and goals."
-              className="rounded-xl border-2 border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-500 focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20 resize-none"
+              className="rounded-xl border-2 border-gray-200 bg-white px-4 py-3 text-sm text-gray-900 placeholder:text-gray-500 focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20 resize-none"
             />
           </label>
 
           <button
             type="submit"
-            className="inline-flex items-center justify-center rounded-full bg-gradient-to-r from-[#0693e3] to-[#0472b8] hover:from-[#0472b8] hover:to-[#0693e3] text-white px-6 py-3 text-sm font-semibold shadow-lg shadow-[#0693e3]/30 transition-all w-full"
+            className="inline-flex items-center justify-center rounded-full bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-brand-700)] hover:from-[var(--color-brand-700)] hover:to-[var(--color-primary)] text-white px-6 py-3 text-sm font-semibold shadow-lg shadow-[var(--color-primary)]/30 transition-all w-full"
           >
             Book strategy call
           </button>
         </form>
 
         <div className="space-y-8">
-          <div className="rounded-3xl border-2 border-[#0bbf87]/30 bg-gradient-to-br from-[#0bbf87]/10 to-white p-8 space-y-4 text-sm text-slate-600">
-            <h3 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
-              <span className="size-2 rounded-full bg-[#0bbf87]"></span>
+          <div className="rounded-3xl border-2 border-[var(--color-success)]/30 bg-gradient-to-br from-[var(--color-success)]/10 to-white p-8 space-y-4 text-sm text-gray-600">
+            <h3 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
+              <span className="size-2 rounded-full bg-[var(--color-success)]"></span>
               Calendly placeholder
             </h3>
-            <div className="aspect-[4/3] rounded-2xl border-2 border-slate-200 bg-gradient-to-br from-slate-50 to-white flex items-center justify-center text-xs text-slate-500 shadow-inner">
+            <div className="aspect-[4/3] rounded-2xl border-2 border-gray-200 bg-gradient-to-br from-gray-50 to-white flex items-center justify-center text-xs text-gray-500 shadow-inner">
               Embed Calendly iframe here
             </div>
             <p>
               Prefer async? Email us at{" "}
-              <a href="mailto:hello@igny8.com" className="text-[#0693e3] hover:text-[#0472b8] font-semibold">
+              <a href="mailto:hello@igny8.com" className="text-[var(--color-primary)] hover:text-[var(--color-brand-700)] font-semibold">
                 hello@igny8.com
               </a>{" "}
               or join our community Slack.
             </p>
           </div>
 
-          <div className="rounded-3xl border-2 border-[#ff7a00]/30 bg-gradient-to-br from-[#ff7a00]/10 to-white p-8 space-y-4">
-            <h3 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
-              <span className="size-2 rounded-full bg-[#ff7a00]"></span>
+          <div className="rounded-3xl border-2 border-[var(--color-warning)]/30 bg-gradient-to-br from-[var(--color-warning)]/10 to-white p-8 space-y-4">
+            <h3 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
+              <span className="size-2 rounded-full bg-[var(--color-warning)]"></span>
               Support perks
             </h3>
-            <ul className="space-y-3 text-sm text-slate-600">
+            <ul className="space-y-3 text-sm text-gray-600">
               {[
-                { text: "24-hour response time on all Launch+ plans.", color: "bg-[#0693e3]" },
-                { text: "Dedicated success architect for Scale and Enterprise.", color: "bg-[#0bbf87]" },
-                { text: "Migration services when replacing legacy content stacks.", color: "bg-[#ff7a00]" },
+                { text: "24-hour response time on all Launch+ plans.", color: "bg-[var(--color-primary)]" },
+                { text: "Dedicated success architect for Scale and Enterprise.", color: "bg-[var(--color-success)]" },
+                { text: "Migration services when replacing legacy content stacks.", color: "bg-[var(--color-warning)]" },
               ].map((item) => (
                 <li key={item.text} className="flex gap-3">
                   <span className={`mt-1 size-1.5 rounded-full ${item.color} shadow-sm`} />
diff --git a/frontend/src/marketing/pages/Home.tsx b/frontend/src/marketing/pages/Home.tsx
index c425f557..673e6659 100644
--- a/frontend/src/marketing/pages/Home.tsx
+++ b/frontend/src/marketing/pages/Home.tsx
@@ -119,7 +119,7 @@ const Home: React.FC = () => {
       <SEO meta={getMetaTags("home")} />
       <div className="bg-white">
         {/* HERO SECTION */}
-        <section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-purple)] to-[#8b5cf6]">
+        <section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-purple)] to-[var(--color-purple-400)]">
         {/* Radial glow behind headline */}
         <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_50%,rgba(255,255,255,0.1),transparent_60%)]" />
         <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(109,74,227,0.2),transparent_50%)]" />
@@ -157,11 +157,11 @@ const Home: React.FC = () => {
                 {/* Device frame effect */}
                 <div className="absolute -inset-4 bg-gradient-to-br from-white/20 to-white/5 rounded-3xl blur-2xl" />
                 <div className="relative rounded-2xl border-4 border-white/20 bg-white/10 backdrop-blur-sm shadow-2xl overflow-hidden">
-                  <div className="absolute top-0 left-0 right-0 h-12 bg-gradient-to-b from-slate-800/50 to-transparent flex items-center gap-2 px-4">
+                  <div className="absolute top-0 left-0 right-0 h-12 bg-gradient-to-b from-gray-800/50 to-transparent flex items-center gap-2 px-4">
                     <div className="flex gap-2">
-                      <div className="w-3 h-3 rounded-full bg-red-500/50" />
-                      <div className="w-3 h-3 rounded-full bg-yellow-500/50" />
-                      <div className="w-3 h-3 rounded-full bg-green-500/50" />
+                      <div className="w-3 h-3 rounded-full bg-error-500/50" />
+                      <div className="w-3 h-3 rounded-full bg-warning-500/50" />
+                      <div className="w-3 h-3 rounded-full bg-success-500/50" />
                     </div>
                   </div>
                   <img
@@ -179,10 +179,10 @@ const Home: React.FC = () => {
       </section>
 
       {/* SOCIAL PROOF LOGOS */}
-      <section className="py-8 bg-white border-b border-slate-100">
+      <section className="py-8 bg-white border-b border-gray-100">
         <div className="max-w-6xl mx-auto px-6">
           <div className="flex flex-col gap-4 items-center">
-            <span className="text-xs uppercase tracking-[0.28em] text-slate-500 font-medium">
+            <span className="text-xs uppercase tracking-[0.28em] text-gray-500 font-medium">
               Trusted by modern organic teams
             </span>
             <div className="flex flex-wrap justify-center gap-8 md:gap-10 items-center">
@@ -207,10 +207,10 @@ const Home: React.FC = () => {
       <section className="py-24 bg-gradient-to-b from-white via-[var(--color-primary)]/3 to-[var(--color-purple)]/3">
         <div className="max-w-7xl mx-auto px-6">
           <div className="text-center mb-16">
-            <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
+            <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
               How Igny8 Works
             </h2>
-            <p className="text-lg text-slate-600 max-w-2xl mx-auto">
+            <p className="text-lg text-gray-600 max-w-2xl mx-auto">
               A seamless pipeline from keyword discovery to published content
             </p>
           </div>
@@ -230,7 +230,7 @@ const Home: React.FC = () => {
                       {/* Glow effect */}
                       <div className={`absolute -inset-2 bg-gradient-to-br ${step.color} rounded-full opacity-0 group-hover:opacity-30 blur-xl transition-opacity -z-10`} />
                     </div>
-                    <span className="text-sm font-semibold text-slate-900 text-center">{step.name}</span>
+                    <span className="text-sm font-semibold text-gray-900 text-center">{step.name}</span>
                   </div>
                 );
               })}
@@ -259,12 +259,12 @@ const Home: React.FC = () => {
                   <div className="relative scale-110 lg:scale-115">
                     {/* Gradient frame background with colored glow */}
                     <div className={`absolute -inset-6 bg-gradient-to-br ${module.color} rounded-3xl opacity-10 blur-xl`} />
-                    <div className="relative rounded-2xl border-2 border-slate-200 bg-white shadow-2xl overflow-hidden">
-                      <div className="absolute top-0 left-0 right-0 h-12 bg-gradient-to-b from-slate-800/30 to-transparent flex items-center gap-2 px-4">
+                    <div className="relative rounded-2xl border-2 border-gray-200 bg-white shadow-2xl overflow-hidden">
+                      <div className="absolute top-0 left-0 right-0 h-12 bg-gradient-to-b from-gray-800/30 to-transparent flex items-center gap-2 px-4">
                         <div className="flex gap-2">
-                          <div className="w-3 h-3 rounded-full bg-red-500/50" />
-                          <div className="w-3 h-3 rounded-full bg-yellow-500/50" />
-                          <div className="w-3 h-3 rounded-full bg-green-500/50" />
+                          <div className="w-3 h-3 rounded-full bg-error-500/50" />
+                          <div className="w-3 h-3 rounded-full bg-warning-500/50" />
+                          <div className="w-3 h-3 rounded-full bg-success-500/50" />
                         </div>
                       </div>
                       <img
@@ -285,16 +285,16 @@ const Home: React.FC = () => {
                       <Icon className="h-6 w-6" />
                     </div>
                     <div>
-                      <h3 className="text-3xl md:text-4xl font-bold text-slate-900">{module.title}</h3>
-                      <p className="text-sm text-slate-600 mt-1">{module.subtitle}</p>
+                      <h3 className="text-3xl md:text-4xl font-bold text-gray-900">{module.title}</h3>
+                      <p className="text-sm text-gray-600 mt-1">{module.subtitle}</p>
                     </div>
                   </div>
-                  <p className="text-lg text-slate-700 mb-6 leading-relaxed">
+                  <p className="text-lg text-gray-700 mb-6 leading-relaxed">
                     {module.description}
                   </p>
                   <ul className="space-y-3 mb-8">
                     {module.bullets.map((bullet, i) => (
-                      <li key={i} className="flex gap-3 text-slate-700">
+                      <li key={i} className="flex gap-3 text-gray-700">
                         <span className={`mt-2 size-2 rounded-full bg-gradient-to-br ${module.color} shadow-sm flex-shrink-0`} />
                         <span>{bullet}</span>
                       </li>
@@ -315,7 +315,7 @@ const Home: React.FC = () => {
       })}
 
       {/* AUTOMATION SNAPSHOT SECTION */}
-      <section className="py-24 bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 relative overflow-hidden">
+      <section className="py-24 bg-gradient-to-br from-gray-950 via-gray-900 to-gray-950 relative overflow-hidden">
         {/* Richer background pattern */}
         <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(6,147,227,0.15),transparent_70%)]" />
         <div className="absolute inset-0 bg-[radial-gradient(circle_at_80%_20%,rgba(109,74,227,0.2),transparent_50%)]" />
@@ -333,7 +333,7 @@ const Home: React.FC = () => {
                   Automation Engine
                 </h2>
               </div>
-              <p className="text-xl text-slate-200 mb-8 leading-relaxed font-medium">
+              <p className="text-xl text-gray-200 mb-8 leading-relaxed font-medium">
                 Orchestrate your entire content pipeline with intelligent handoffs between modules. Set it once, and watch it execute.
               </p>
               
@@ -355,7 +355,7 @@ const Home: React.FC = () => {
                     </div>
                     <div className="flex-1">
                       <div className="text-white font-semibold text-lg">{handoff.from} → {handoff.to}</div>
-                      <div className="text-sm text-slate-300">Automated handoff with quality checks</div>
+                      <div className="text-sm text-gray-300">Automated handoff with quality checks</div>
                     </div>
                   </div>
                 ))}
@@ -365,11 +365,11 @@ const Home: React.FC = () => {
               <div className="grid grid-cols-2 gap-4">
                 <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-4">
                   <div className="text-3xl font-bold text-white mb-1">87%</div>
-                  <div className="text-sm text-slate-400">Completion Rate</div>
+                  <div className="text-sm text-gray-400">Completion Rate</div>
                 </div>
                 <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-4">
                   <div className="text-3xl font-bold text-white mb-1">6×</div>
-                  <div className="text-sm text-slate-400">Faster Velocity</div>
+                  <div className="text-sm text-gray-400">Faster Velocity</div>
                 </div>
               </div>
             </div>
@@ -377,11 +377,11 @@ const Home: React.FC = () => {
             {/* Right: Automation Dashboard Screenshot */}
             <div className="relative z-10">
               <div className="relative rounded-2xl border-2 border-white/20 bg-white/5 backdrop-blur-sm shadow-2xl overflow-hidden">
-                <div className="absolute top-0 left-0 right-0 h-12 bg-gradient-to-b from-slate-800/50 to-transparent flex items-center gap-2 px-4">
+                <div className="absolute top-0 left-0 right-0 h-12 bg-gradient-to-b from-gray-800/50 to-transparent flex items-center gap-2 px-4">
                   <div className="flex gap-2">
-                    <div className="w-3 h-3 rounded-full bg-red-500/50" />
-                    <div className="w-3 h-3 rounded-full bg-yellow-500/50" />
-                    <div className="w-3 h-3 rounded-full bg-green-500/50" />
+                    <div className="w-3 h-3 rounded-full bg-error-500/50" />
+                    <div className="w-3 h-3 rounded-full bg-warning-500/50" />
+                    <div className="w-3 h-3 rounded-full bg-success-500/50" />
                   </div>
                 </div>
                 <img
@@ -404,7 +404,7 @@ const Home: React.FC = () => {
             <span className="inline-flex items-center rounded-full border border-[var(--color-primary)]/20 bg-[var(--color-primary)]/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-[var(--color-primary)] mb-4">
               Loved by scaling teams
             </span>
-            <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold text-slate-900 mb-4">
+            <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-4">
               Teams ship more content, capture more demand, and see faster ROI with Igny8.
             </h2>
           </div>
@@ -432,19 +432,19 @@ const Home: React.FC = () => {
                     {testimonial.name.charAt(0)}
                   </div>
                   
-                  <p className="text-base text-slate-800 leading-relaxed font-semibold flex-1">
+                  <p className="text-base text-gray-800 leading-relaxed font-semibold flex-1">
                     "{testimonial.quote}"
                   </p>
                   
                   <div className="flex flex-col gap-1">
-                    <span className="font-bold text-slate-900 text-lg">{testimonial.name}</span>
-                    <span className="text-sm text-slate-700 font-medium">
+                    <span className="font-bold text-gray-900 text-lg">{testimonial.name}</span>
+                    <span className="text-sm text-gray-700 font-medium">
                       {testimonial.title} · {testimonial.company}
                     </span>
                   </div>
                   
                   {/* Metrics badge with better contrast */}
-                  <div className={`inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r ${gradientColors[index]} text-slate-800 text-xs font-bold w-fit shadow-sm`}>
+                  <div className={`inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r ${gradientColors[index]} text-gray-800 text-xs font-bold w-fit shadow-sm`}>
                     <span>3× faster</span>
                     <span>•</span>
                     <span>+132% lift</span>
@@ -457,7 +457,7 @@ const Home: React.FC = () => {
       </section>
 
       {/* FINAL CTA */}
-      <section className="relative overflow-hidden bg-gradient-to-br from-[#8b5cf6] via-[var(--color-purple)] to-[var(--color-primary)]">
+      <section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-purple-400)] via-[var(--color-purple)] to-[var(--color-primary)]">
         {/* Dashboard overlay in background */}
         <div className="absolute inset-0 opacity-10">
           <div className="absolute inset-0 bg-[url('/marketing/images/hero-dashboard.png')] bg-cover bg-center scale-150 blur-3xl" />
diff --git a/frontend/src/marketing/pages/Partners.tsx b/frontend/src/marketing/pages/Partners.tsx
index c87ebf3f..256183ad 100644
--- a/frontend/src/marketing/pages/Partners.tsx
+++ b/frontend/src/marketing/pages/Partners.tsx
@@ -76,17 +76,17 @@ const Partners: React.FC = () => {
       <SEO meta={getMetaTags("partners")} />
       <div className="bg-white">
       {/* HERO SECTION */}
-      <section className="relative overflow-hidden bg-gradient-to-b from-white via-slate-50/50 to-white">
+      <section className="relative overflow-hidden bg-gradient-to-b from-white via-gray-50/50 to-white">
         <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(6,147,227,0.03),transparent_60%)]" />
         
         <div className="relative max-w-4xl mx-auto px-6 py-24 md:py-32 text-center z-10">
-          <span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.28em] text-slate-500 bg-slate-100 px-4 py-2 rounded-full mb-6">
+          <span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.28em] text-gray-500 bg-gray-100 px-4 py-2 rounded-full mb-6">
             Partners
           </span>
-          <h1 className="text-5xl md:text-6xl lg:text-5xl font-bold leading-tight text-slate-900 mb-6">
+          <h1 className="text-5xl md:text-6xl lg:text-5xl font-bold leading-tight text-gray-900 mb-6">
             Grow faster together—build services and solutions on Igny8.
           </h1>
-          <p className="text-xl md:text-2xl text-slate-600 mb-10 max-w-2xl mx-auto leading-relaxed">
+          <p className="text-xl md:text-2xl text-gray-600 mb-10 max-w-2xl mx-auto leading-relaxed">
             Join our partner ecosystem to co-create automations, deliver measurable results, and co-market AI-driven success stories.
           </p>
         </div>
@@ -100,21 +100,21 @@ const Partners: React.FC = () => {
             return (
               <div
                 key={tier.title}
-                className="rounded-3xl border-2 border-slate-200 bg-white p-8 flex flex-col gap-6 hover:shadow-xl hover:-translate-y-1 transition-all"
+                className="rounded-3xl border-2 border-gray-200 bg-white p-8 flex flex-col gap-6 hover:shadow-xl hover:-translate-y-1 transition-all"
               >
                 <div className="flex items-center gap-4">
                   <div className={`inline-flex size-14 rounded-xl bg-gradient-to-br ${tier.iconColor} items-center justify-center text-white shadow-lg`}>
                     <Icon className="h-7 w-7" />
                   </div>
                   <div>
-                    <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.2em] bg-slate-100 text-slate-600 mb-2">
+                    <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.2em] bg-gray-100 text-gray-600 mb-2">
                       Program
                     </span>
-                    <h3 className="text-2xl font-bold text-slate-900">{tier.title}</h3>
+                    <h3 className="text-2xl font-bold text-gray-900">{tier.title}</h3>
                   </div>
                 </div>
-                <p className="text-sm text-slate-600 font-medium">{tier.description}</p>
-                <ul className="space-y-4 text-sm text-slate-700 flex-1">
+                <p className="text-sm text-gray-600 font-medium">{tier.description}</p>
+                <ul className="space-y-4 text-sm text-gray-700 flex-1">
                   {tier.benefits.map((benefit, benefitIdx) => {
                     const dotColors = ["bg-[var(--color-primary)]", "bg-[var(--color-success)]", "bg-[var(--color-warning)]", "bg-[var(--color-purple)]"];
                     return (
@@ -132,7 +132,7 @@ const Partners: React.FC = () => {
       </section>
 
       {/* API & INTEGRATIONS + PARTNER RESOURCES */}
-      <section className="bg-gradient-to-b from-white via-slate-50/30 to-white py-24">
+      <section className="bg-gradient-to-b from-white via-gray-50/30 to-white py-24">
         <div className="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-12">
           {/* Left: API & Integrations */}
           <div className="space-y-6">
@@ -141,35 +141,35 @@ const Partners: React.FC = () => {
                 <CodeBracketIcon className="h-6 w-6" />
               </div>
               <div>
-                <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.2em] bg-slate-100 text-slate-600 mb-2">
+                <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.2em] bg-gray-100 text-gray-600 mb-2">
                   API & Integrations
                 </span>
-                <h2 className="text-3xl md:text-4xl font-bold text-slate-900">
+                <h2 className="text-3xl md:text-4xl font-bold text-gray-900">
                   Embed Igny8 intelligence into your workflows.
                 </h2>
               </div>
             </div>
-            <p className="text-lg text-slate-600 leading-relaxed">
+            <p className="text-lg text-gray-600 leading-relaxed">
               Use Igny8 APIs and webhooks to power your own products, analytics, or client portals. Automate keyword ingestion, content creation, asset delivery, and reporting.
             </p>
-            <div className="rounded-2xl border-2 border-slate-200 bg-white p-8 shadow-sm">
-              <div className="rounded-2xl border-2 border-slate-200 bg-gradient-to-br from-slate-50 to-white h-64 flex items-center justify-center text-sm text-slate-400 shadow-inner">
+            <div className="rounded-2xl border-2 border-gray-200 bg-white p-8 shadow-sm">
+              <div className="rounded-2xl border-2 border-gray-200 bg-gradient-to-br from-gray-50 to-white h-64 flex items-center justify-center text-sm text-gray-400 shadow-inner">
                 API docs placeholder
               </div>
             </div>
           </div>
 
           {/* Right: Partner Resources */}
-          <div className="rounded-2xl border-2 border-slate-200 bg-white p-10 space-y-6 shadow-sm">
+          <div className="rounded-2xl border-2 border-gray-200 bg-white p-10 space-y-6 shadow-sm">
             <div className="flex items-center gap-3">
               <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-success)] to-[var(--color-success-dark)] flex items-center justify-center text-white shadow-lg">
                 <WrenchScrewdriverIcon className="h-6 w-6" />
               </div>
-              <h4 className="text-2xl font-bold text-slate-900">
+              <h4 className="text-2xl font-bold text-gray-900">
                 Partner resources
               </h4>
             </div>
-            <ul className="space-y-4 text-sm text-slate-700">
+            <ul className="space-y-4 text-sm text-gray-700">
               {[
                 { text: "Sales playbooks, ROI calculators, and demo environments.", color: "bg-[var(--color-primary)]" },
                 { text: "Shared Slack channels with Igny8 product and marketing teams.", color: "bg-[var(--color-success)]" },
@@ -186,7 +186,7 @@ const Partners: React.FC = () => {
       </section>
 
       {/* FINAL CTA */}
-      <section className="relative overflow-hidden bg-gradient-to-br from-[#0693e3] via-[#5d4ae3] to-[#8b5cf6]">
+      <section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-purple)] to-[var(--color-purple-400)]">
         {/* Radial glow */}
         <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.1),transparent_70%)]" />
         
@@ -209,7 +209,7 @@ const Partners: React.FC = () => {
               href="/marketing/images/partner-program.png"
               target="_blank"
               rel="noreferrer"
-              className="inline-flex items-center justify-center gap-2 rounded-xl bg-white text-[#0693e3] px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
+              className="inline-flex items-center justify-center gap-2 rounded-xl bg-white text-[var(--color-primary)] px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
             >
               <RocketLaunchIcon className="h-5 w-5" />
               Download partner deck
diff --git a/frontend/src/marketing/pages/Pricing.tsx b/frontend/src/marketing/pages/Pricing.tsx
index bd40fd8e..21d871de 100644
--- a/frontend/src/marketing/pages/Pricing.tsx
+++ b/frontend/src/marketing/pages/Pricing.tsx
@@ -151,7 +151,7 @@ const Pricing: React.FC = () => {
         
         /* Badge component styles */
         .badge-success {
-          background-color: #10b981;
+          background-color: var(--color-success, #2CA18E);
           color: white;
           padding: 0.25rem 0.75rem;
           border-radius: 0.375rem;
@@ -161,19 +161,19 @@ const Pricing: React.FC = () => {
         }
         
         .badge-primary {
-          background: linear-gradient(135deg, #0693e3 0%, #0578c2 100%);
+          background: linear-gradient(135deg, var(--color-primary, #2C7AA1) 0%, var(--color-brand-700, #236185) 100%);
           color: white;
           padding: 0.375rem 0.75rem;
           border-radius: 0.5rem;
           font-size: 0.75rem;
           font-weight: 600;
           display: inline-block;
-          box-shadow: 0 2px 8px rgba(6, 147, 227, 0.3);
+          box-shadow: 0 2px 8px color-mix(in oklch, var(--color-primary) 30%, transparent);
         }
         
         /* Primary button styles */
         .btn-primary {
-          background: linear-gradient(135deg, #0693e3 0%, #0578c2 100%);
+          background: linear-gradient(135deg, var(--color-primary, #2C7AA1) 0%, var(--color-brand-700, #236185) 100%);
           color: white;
           padding: 0.75rem 1.5rem;
           border-radius: 0.5rem;
@@ -183,12 +183,12 @@ const Pricing: React.FC = () => {
           border: none;
           cursor: pointer;
           width: 100%;
-          box-shadow: 0 4px 12px rgba(6, 147, 227, 0.3);
+          box-shadow: 0 4px 12px color-mix(in oklch, var(--color-primary) 30%, transparent);
         }
         
         .btn-primary:hover:not(:disabled) {
           transform: translateY(-2px);
-          box-shadow: 0 6px 16px rgba(6, 147, 227, 0.4);
+          box-shadow: 0 6px 16px color-mix(in oklch, var(--color-primary) 40%, transparent);
         }
         
         .btn-primary:active:not(:disabled) {
@@ -203,21 +203,21 @@ const Pricing: React.FC = () => {
         
         /* Outline button styles */
         .btn-outline {
-          background-color: #1e293b;
+          background-color: var(--color-gray-800, #1e293b);
           color: white;
           padding: 0.75rem 1.5rem;
           border-radius: 0.5rem;
           font-weight: 600;
           font-size: 0.9375rem;
           transition: all 0.2s ease;
-          border: 2px solid #334155;
+          border: 2px solid var(--color-gray-700, #334155);
           cursor: pointer;
           width: 100%;
         }
         
         .btn-outline:hover:not(:disabled) {
-          background-color: #334155;
-          border-color: #475569;
+          background-color: var(--color-gray-700, #334155);
+          border-color: var(--color-gray-600, #475569);
           transform: translateY(-2px);
         }
         
@@ -233,7 +233,7 @@ const Pricing: React.FC = () => {
         
         /* Featured plan highlight */
         .pricing-card-featured {
-          background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
+          background: linear-gradient(135deg, var(--color-gray-800, #1e293b) 0%, var(--color-gray-700, #334155) 100%) !important;
           color: white;
           box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
         }
@@ -245,20 +245,20 @@ const Pricing: React.FC = () => {
         
         .pricing-card-featured p,
         .pricing-card-featured span:not(.badge-primary):not(.btn-primary) {
-          color: #e2e8f0 !important;
+          color: var(--color-gray-200, #e2e8f0) !important;
         }
         
         .pricing-card-featured li span {
-          color: #e2e8f0 !important;
+          color: var(--color-gray-200, #e2e8f0) !important;
         }
         
         .pricing-card-featured .line-through {
-          color: #94a3b8 !important;
+          color: var(--color-gray-400, #94a3b8) !important;
         }
         
         /* Check icon colors */
         .pricing-card-featured svg {
-          color: #10b981 !important;
+          color: var(--color-success, #2CA18E) !important;
         }
         
         /* Strikethrough price */
@@ -269,42 +269,42 @@ const Pricing: React.FC = () => {
       `}</style>
       <div className="bg-white">
       {/* PRICING HERO SECTION */}
-      <section className="relative overflow-hidden bg-gradient-to-b from-white via-slate-50/30 to-white">
+      <section className="relative overflow-hidden bg-gradient-to-b from-white via-gray-50/30 to-white">
         <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(6,147,227,0.02),transparent_60%)]" />
         
         <div className="relative max-w-4xl mx-auto px-6 pt-12 md:pt-16 pb-6 text-center z-10">
-          <span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.28em] text-slate-500 bg-slate-100 px-4 py-2 rounded-full mb-6">
+          <span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.28em] text-gray-500 bg-gray-100 px-4 py-2 rounded-full mb-6">
             Pricing
           </span>
-          <h1 className="text-4xl md:text-5xl font-bold leading-tight text-slate-900 mb-0">
+          <h1 className="text-4xl md:text-5xl font-bold leading-tight text-gray-900 mb-0">
             Simple plans that scale with your automation goals.
           </h1>
         </div>
 
         {/* SPECIAL PROMO BANNER */}
         <div className="relative max-w-5xl mx-auto px-6 z-10">
-          <div className="relative overflow-hidden rounded-2xl bg-gradient-to-r from-amber-500 via-orange-500 to-red-500 p-[2px] shadow-xl">
-            <div className="relative bg-gradient-to-r from-amber-50 via-orange-50 to-red-50 rounded-2xl px-6 py-4 flex items-center justify-center gap-3">
+          <div className="relative overflow-hidden rounded-2xl bg-gradient-to-r from-warning-500 via-warning-500 to-error-500 p-[2px] shadow-xl">
+            <div className="relative bg-gradient-to-r from-warning-50 via-warning-50 to-error-50 rounded-2xl px-6 py-4 flex items-center justify-center gap-3">
               {/* Fire Icon */}
-              <svg className="w-6 h-6 text-orange-600 animate-pulse" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <svg className="w-6 h-6 text-warning-600 animate-pulse" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                 <path fillRule="evenodd" d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z" clipRule="evenodd"></path>
               </svg>
               
               {/* Message Text */}
               <div className="flex flex-col sm:flex-row items-center gap-2 sm:gap-3">
-                <span className="inline-flex items-center gap-2 bg-gradient-to-r from-amber-600 to-orange-600 text-white px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider shadow-lg">
+                <span className="inline-flex items-center gap-2 bg-gradient-to-r from-warning-600 to-warning-600 text-white px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider shadow-lg">
                   <svg className="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
                     <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                   </svg>
                   Limited Time
                 </span>
-                <p className="text-base sm:text-lg font-bold text-transparent bg-clip-text bg-gradient-to-r from-amber-700 via-orange-700 to-red-700">
+                <p className="text-base sm:text-lg font-bold text-transparent bg-clip-text bg-gradient-to-r from-warning-700 via-warning-700 to-error-700">
                   Lifetime Discount on all Plans for First 100 Users!
                 </p>
               </div>
               
               {/* Fire Icon */}
-              <svg className="w-6 h-6 text-orange-600 animate-pulse" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <svg className="w-6 h-6 text-warning-600 animate-pulse" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                 <path fillRule="evenodd" d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z" clipRule="evenodd"></path>
               </svg>
             </div>
@@ -317,7 +317,7 @@ const Pricing: React.FC = () => {
         <section className="max-w-7xl mx-auto px-6 pb-24">
           <div className="text-center py-12">
             <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-[var(--color-primary)]"></div>
-            <p className="mt-4 text-slate-600">Loading pricing plans...</p>
+            <p className="mt-4 text-gray-600">Loading pricing plans...</p>
           </div>
         </section>
       )}
@@ -325,7 +325,7 @@ const Pricing: React.FC = () => {
       {error && (
         <section className="max-w-7xl mx-auto px-6 pb-24">
           <div className="text-center py-12">
-            <p className="text-red-600">{error}</p>
+            <p className="text-error-600">{error}</p>
             <button
               onClick={() => window.location.reload()}
               className="mt-4 px-6 py-2 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-dark)]"
@@ -351,7 +351,7 @@ const Pricing: React.FC = () => {
           
           {/* What's Included Explanation */}
           <div className="max-w-5xl mx-auto mt-8 text-center">
-            <p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">
+            <p className="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">
               Every content piece includes High-Opportunity Keywords, AI clustering, idea generation, standard/premium images, Automation, WP publishing, SEO optimization, and internal linking.
             </p>
           </div>
@@ -361,20 +361,20 @@ const Pricing: React.FC = () => {
       {/* COMPARISON TABLE SECTION REMOVED */}
       {!loading && !error && false && (
       <section className="max-w-7xl mx-auto px-6 pb-24 pt-16">
-        <h3 className="text-3xl font-bold text-slate-900 mb-8 text-center">
+        <h3 className="text-3xl font-bold text-gray-900 mb-8 text-center">
           Compare plan capabilities
         </h3>
-        <div className="overflow-hidden rounded-3xl border-2 border-slate-200 bg-white shadow-lg">
+        <div className="overflow-hidden rounded-3xl border-2 border-gray-200 bg-white shadow-lg">
           <div className="overflow-x-auto">
             <table className="min-w-full text-sm">
-              <thead className="bg-gradient-to-r from-[#0693e3]/10 via-[#5d4ae3]/10 to-[#0bbf87]/10 sticky top-0">
+              <thead className="bg-gradient-to-r from-[var(--color-primary)]/10 via-[var(--color-purple)]/10 to-[var(--color-success)]/10 sticky top-0">
                 <tr>
-                  <th className="px-6 py-4 text-left font-semibold text-slate-900">Capability</th>
-                  <th className="px-6 py-4 text-center font-semibold text-slate-900">Starter</th>
-                  <th className="px-6 py-4 text-center font-semibold text-[var(--color-primary)] bg-gradient-to-br from-[#0693e3]/5 to-transparent">
+                  <th className="px-6 py-4 text-left font-semibold text-gray-900">Capability</th>
+                  <th className="px-6 py-4 text-center font-semibold text-gray-900">Starter</th>
+                  <th className="px-6 py-4 text-center font-semibold text-[var(--color-primary)] bg-gradient-to-br from-[var(--color-primary)]/5 to-transparent">
                     Growth
                   </th>
-                  <th className="px-6 py-4 text-center font-semibold text-slate-900">Scale</th>
+                  <th className="px-6 py-4 text-center font-semibold text-gray-900">Scale</th>
                 </tr>
               </thead>
               <tbody>
@@ -382,8 +382,8 @@ const Pricing: React.FC = () => {
                   // Category row styling
                   if (row.isCategory) {
                     return (
-                      <tr key={row.feature} className="bg-gradient-to-r from-slate-100 to-slate-50">
-                        <td colSpan={4} className="px-6 py-4 text-sm font-bold text-slate-900 uppercase tracking-wider">
+                      <tr key={row.feature} className="bg-gradient-to-r from-gray-100 to-gray-50">
+                        <td colSpan={4} className="px-6 py-4 text-sm font-bold text-gray-900 uppercase tracking-wider">
                           {row.feature}
                         </td>
                       </tr>
@@ -393,16 +393,16 @@ const Pricing: React.FC = () => {
                   return (
                     <tr
                       key={row.feature}
-                      className={index % 2 === 0 ? "bg-white" : "bg-slate-50/50"}
+                      className={index % 2 === 0 ? "bg-white" : "bg-gray-50/50"}
                     >
-                      <td className="px-6 py-5 text-slate-900 font-medium">{row.feature}</td>
-                      <td className="px-6 py-5 text-center text-slate-700">
+                      <td className="px-6 py-5 text-gray-900 font-medium">{row.feature}</td>
+                      <td className="px-6 py-5 text-center text-gray-700">
                         {row.starter === true ? (
-                          <CheckIcon className="h-5 w-5 text-[#0bbf87] mx-auto" />
+                          <CheckIcon className="h-5 w-5 text-[var(--color-success)] mx-auto" />
                         ) : row.starter === false ? (
-                          <XMarkIcon className="h-5 w-5 text-slate-300 mx-auto" />
+                          <XMarkIcon className="h-5 w-5 text-gray-300 mx-auto" />
                         ) : row.starter === null ? (
-                          <span className="text-slate-400">—</span>
+                          <span className="text-gray-400">—</span>
                         ) : (
                           <span className="inline-flex items-center gap-1">
                             <span className="size-1.5 rounded-full bg-[var(--color-primary)]"></span>
@@ -410,13 +410,13 @@ const Pricing: React.FC = () => {
                           </span>
                         )}
                       </td>
-                      <td className="px-6 py-5 text-center font-medium text-[var(--color-primary)] bg-gradient-to-br from-[#0693e3]/5 to-transparent">
+                      <td className="px-6 py-5 text-center font-medium text-[var(--color-primary)] bg-gradient-to-br from-[var(--color-primary)]/5 to-transparent">
                         {row.growth === true ? (
-                          <CheckIcon className="h-5 w-5 text-[#0bbf87] mx-auto" />
+                          <CheckIcon className="h-5 w-5 text-[var(--color-success)] mx-auto" />
                         ) : row.growth === false ? (
-                          <XMarkIcon className="h-5 w-5 text-slate-300 mx-auto" />
+                          <XMarkIcon className="h-5 w-5 text-gray-300 mx-auto" />
                         ) : row.growth === null ? (
-                          <span className="text-slate-400">—</span>
+                          <span className="text-gray-400">—</span>
                         ) : (
                           <span className="inline-flex items-center gap-1">
                             <span className="size-1.5 rounded-full bg-[var(--color-primary)]"></span>
@@ -424,16 +424,16 @@ const Pricing: React.FC = () => {
                           </span>
                         )}
                       </td>
-                      <td className="px-6 py-5 text-center text-slate-700">
+                      <td className="px-6 py-5 text-center text-gray-700">
                         {row.scale === true ? (
-                          <CheckIcon className="h-5 w-5 text-[#0bbf87] mx-auto" />
+                          <CheckIcon className="h-5 w-5 text-[var(--color-success)] mx-auto" />
                         ) : row.scale === false ? (
-                          <XMarkIcon className="h-5 w-5 text-slate-300 mx-auto" />
+                          <XMarkIcon className="h-5 w-5 text-gray-300 mx-auto" />
                         ) : row.scale === null ? (
-                          <span className="text-slate-400">—</span>
+                          <span className="text-gray-400">—</span>
                         ) : (
                           <span className="inline-flex items-center gap-1">
-                            <span className="size-1.5 rounded-full bg-[#5d4ae3]"></span>
+                            <span className="size-1.5 rounded-full bg-[var(--color-purple)]"></span>
                             {row.scale}
                           </span>
                         )}
@@ -449,34 +449,34 @@ const Pricing: React.FC = () => {
       )}
 
       {/* INFO BLOCKS SECTION */}
-      <section className="bg-gradient-to-b from-white via-slate-50/30 to-white">
+      <section className="bg-gradient-to-b from-white via-gray-50/30 to-white">
         <div className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 md:grid-cols-2 gap-8">
-          <div className="rounded-3xl border-2 border-[var(--color-primary)]/30 bg-gradient-to-br from-[#0693e3]/5 via-white to-[#0bbf87]/5 p-8 space-y-4 shadow-lg hover:shadow-xl transition-all">
+          <div className="rounded-3xl border-2 border-[var(--color-primary)]/30 bg-gradient-to-br from-[var(--color-primary)]/5 via-white to-[var(--color-success)]/5 p-8 space-y-4 shadow-lg hover:shadow-xl transition-all">
             <div className="flex items-center gap-3 mb-4">
               <div className="size-12 rounded-full bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] flex items-center justify-center text-white shadow-lg">
                 <CreditCardIcon className="h-6 w-6" />
               </div>
-              <h4 className="text-lg font-semibold text-slate-900">
+              <h4 className="text-lg font-semibold text-gray-900">
                 Usage-based credits explained
               </h4>
             </div>
-            <p className="text-sm text-slate-600 leading-relaxed">
+            <p className="text-sm text-gray-600 leading-relaxed">
               Igny8 credits cover AI-generated drafts, clustering, and image creation. Monitor usage in real time from your dashboard. Credits roll over for 30 days.
             </p>
-            <p className="text-sm text-slate-600 leading-relaxed">
+            <p className="text-sm text-gray-600 leading-relaxed">
               Need more? Add packs instantly or set automation rules to pause when thresholds are hit.
             </p>
           </div>
-          <div className="rounded-3xl border-2 border-[#0bbf87]/30 bg-gradient-to-br from-[#0bbf87]/5 via-white to-[#5d4ae3]/5 p-8 space-y-4 shadow-lg hover:shadow-xl transition-all">
+          <div className="rounded-3xl border-2 border-[var(--color-success)]/30 bg-gradient-to-br from-[var(--color-success)]/5 via-white to-[var(--color-purple)]/5 p-8 space-y-4 shadow-lg hover:shadow-xl transition-all">
             <div className="flex items-center gap-3 mb-4">
               <div className="size-12 rounded-full bg-gradient-to-br from-[var(--color-success)] to-[var(--color-success-dark)] flex items-center justify-center text-white shadow-lg">
                 <ShieldCheckIcon className="h-6 w-6" />
               </div>
-              <h4 className="text-lg font-semibold text-slate-900">
+              <h4 className="text-lg font-semibold text-gray-900">
                 Security & compliance
               </h4>
             </div>
-            <p className="text-sm text-slate-600 leading-relaxed">
+            <p className="text-sm text-gray-600 leading-relaxed">
               Igny8 supports granular access controls, SSO, audit logging, and data residency requests. Enterprise plans include SOC 2 documentation and custom security reviews.
             </p>
           </div>
@@ -484,7 +484,7 @@ const Pricing: React.FC = () => {
       </section>
 
       {/* FINAL CTA */}
-      <section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-purple)] to-[#8b5cf6]">
+      <section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-purple)] to-[var(--color-purple-400)]">
         {/* Radial glow */}
         <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.1),transparent_70%)]" />
         
diff --git a/frontend/src/marketing/pages/Product.tsx b/frontend/src/marketing/pages/Product.tsx
index 9c3de94f..1bd5f6cf 100644
--- a/frontend/src/marketing/pages/Product.tsx
+++ b/frontend/src/marketing/pages/Product.tsx
@@ -122,17 +122,17 @@ const Product: React.FC = () => {
       <SEO meta={getMetaTags("product")} />
       <div className="bg-white">
       {/* HERO SECTION */}
-      <section className="relative overflow-hidden bg-gradient-to-b from-white via-slate-50/50 to-white">
+      <section className="relative overflow-hidden bg-gradient-to-b from-white via-gray-50/50 to-white">
         <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(6,147,227,0.03),transparent_60%)]" />
         
         <div className="relative max-w-4xl mx-auto px-6 py-24 md:py-32 text-center z-10">
-          <span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.28em] text-slate-500 bg-slate-100 px-4 py-2 rounded-full mb-6">
+          <span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.28em] text-gray-500 bg-gray-100 px-4 py-2 rounded-full mb-6">
             Product
           </span>
-          <h1 className="text-5xl md:text-6xl lg:text-5xl font-bold leading-tight text-slate-900 mb-6">
+          <h1 className="text-5xl md:text-6xl lg:text-5xl font-bold leading-tight text-gray-900 mb-6">
             One platform for keyword intelligence, AI content, and workflow automation.
           </h1>
-          <p className="text-xl md:text-2xl text-slate-600 mb-10 max-w-2xl mx-auto leading-relaxed">
+          <p className="text-xl md:text-2xl text-gray-600 mb-10 max-w-2xl mx-auto leading-relaxed">
             IGNY8 unifies research, writing, images, and automation so your team creates more output with less effort. Start manual or run fully automated.
           </p>
           <div className="flex flex-col sm:flex-row gap-4 justify-center">
@@ -142,7 +142,7 @@ const Product: React.FC = () => {
             )}
             {renderCta(
               { label: "Book a demo", href: "/contact" },
-              "inline-flex items-center justify-center rounded-xl border-2 border-slate-300 bg-white text-slate-700 px-8 py-4 text-base font-semibold hover:border-[var(--color-primary)] hover:text-[var(--color-primary)] transition"
+              "inline-flex items-center justify-center rounded-xl border-2 border-gray-300 bg-white text-gray-700 px-8 py-4 text-base font-semibold hover:border-[var(--color-primary)] hover:text-[var(--color-primary)] transition"
             )}
           </div>
         </div>
@@ -152,10 +152,10 @@ const Product: React.FC = () => {
       <section className="py-24 bg-white">
         <div className="max-w-7xl mx-auto px-6">
           <div className="text-center mb-16">
-            <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
+            <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
               How the IGNY8 Engine Works
             </h2>
-            <p className="text-lg text-slate-600 max-w-2xl mx-auto">
+            <p className="text-lg text-gray-600 max-w-2xl mx-auto">
               A seamless pipeline from keyword discovery to published content
             </p>
           </div>
@@ -175,7 +175,7 @@ const Product: React.FC = () => {
                       {/* Glow effect */}
                       <div className={`absolute -inset-2 bg-gradient-to-br ${step.color} rounded-full opacity-0 group-hover:opacity-30 blur-xl transition-opacity -z-10`} />
                     </div>
-                    <span className="text-sm font-semibold text-slate-900 text-center">{step.name}</span>
+                    <span className="text-sm font-semibold text-gray-900 text-center">{step.name}</span>
                   </div>
                 );
               })}
@@ -204,12 +204,12 @@ const Product: React.FC = () => {
                   <div className="relative scale-110 lg:scale-115">
                     {/* Gradient frame background with colored glow */}
                     <div className={`absolute -inset-6 bg-gradient-to-br ${module.color} rounded-3xl opacity-25 blur-3xl`} />
-                    <div className="relative rounded-2xl border-2 border-slate-200 bg-white shadow-2xl overflow-hidden">
-                      <div className="absolute top-0 left-0 right-0 h-12 bg-gradient-to-b from-slate-800/30 to-transparent flex items-center gap-2 px-4">
+                    <div className="relative rounded-2xl border-2 border-gray-200 bg-white shadow-2xl overflow-hidden">
+                      <div className="absolute top-0 left-0 right-0 h-12 bg-gradient-to-b from-gray-800/30 to-transparent flex items-center gap-2 px-4">
                         <div className="flex gap-2">
-                          <div className="w-3 h-3 rounded-full bg-red-500/50" />
-                          <div className="w-3 h-3 rounded-full bg-yellow-500/50" />
-                          <div className="w-3 h-3 rounded-full bg-green-500/50" />
+                          <div className="w-3 h-3 rounded-full bg-error-500/50" />
+                          <div className="w-3 h-3 rounded-full bg-warning-500/50" />
+                          <div className="w-3 h-3 rounded-full bg-success-500/50" />
                         </div>
                       </div>
                       <img
@@ -230,16 +230,16 @@ const Product: React.FC = () => {
                       <Icon className="h-6 w-6" />
                     </div>
                     <div>
-                      <h3 className="text-3xl md:text-4xl font-bold text-slate-900">{module.title}</h3>
-                      <p className="text-sm text-slate-600 mt-1">{module.subtitle}</p>
+                      <h3 className="text-3xl md:text-4xl font-bold text-gray-900">{module.title}</h3>
+                      <p className="text-sm text-gray-600 mt-1">{module.subtitle}</p>
                     </div>
                   </div>
-                  <p className="text-lg text-slate-700 mb-6 leading-relaxed">
+                  <p className="text-lg text-gray-700 mb-6 leading-relaxed">
                     {module.description}
                   </p>
                   <ul className="space-y-3 mb-8">
                     {module.features.map((feature, i) => (
-                      <li key={i} className="flex gap-3 text-slate-700">
+                      <li key={i} className="flex gap-3 text-gray-700">
                         <span className={`mt-2 size-2 rounded-full bg-gradient-to-br ${module.color} shadow-sm flex-shrink-0`} />
                         <span>{feature}</span>
                       </li>
@@ -260,7 +260,7 @@ const Product: React.FC = () => {
       })}
 
       {/* UNIFIED AUTOMATION ENGINE SECTION */}
-      <section className="py-24 bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 relative overflow-hidden">
+      <section className="py-24 bg-gradient-to-br from-gray-950 via-gray-900 to-gray-950 relative overflow-hidden">
         {/* Richer background pattern */}
         <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(6,147,227,0.15),transparent_70%)]" />
         <div className="absolute inset-0 bg-[radial-gradient(circle_at_80%_20%,rgba(109,74,227,0.2),transparent_50%)]" />
@@ -278,7 +278,7 @@ const Product: React.FC = () => {
                   Unified Automation Engine
                 </h2>
               </div>
-              <p className="text-xl text-slate-200 mb-8 leading-relaxed font-medium">
+              <p className="text-xl text-gray-200 mb-8 leading-relaxed font-medium">
                 Orchestrate your entire content pipeline with intelligent handoffs between modules. Set it once, and watch it execute with compounding value at each stage.
               </p>
               
@@ -300,7 +300,7 @@ const Product: React.FC = () => {
                     </div>
                     <div className="flex-1">
                       <div className="text-white font-semibold text-lg">{handoff.from} → {handoff.to}</div>
-                      <div className="text-sm text-slate-300">Automated handoff with quality checks</div>
+                      <div className="text-sm text-gray-300">Automated handoff with quality checks</div>
                     </div>
                   </div>
                 ))}
@@ -310,11 +310,11 @@ const Product: React.FC = () => {
             {/* Right: Automation Dashboard Screenshot */}
             <div className="relative z-10">
               <div className="relative rounded-2xl border-2 border-white/20 bg-white/5 backdrop-blur-sm shadow-2xl overflow-hidden">
-                <div className="absolute top-0 left-0 right-0 h-12 bg-gradient-to-b from-slate-800/50 to-transparent flex items-center gap-2 px-4">
+                <div className="absolute top-0 left-0 right-0 h-12 bg-gradient-to-b from-gray-800/50 to-transparent flex items-center gap-2 px-4">
                   <div className="flex gap-2">
-                    <div className="w-3 h-3 rounded-full bg-red-500/50" />
-                    <div className="w-3 h-3 rounded-full bg-yellow-500/50" />
-                    <div className="w-3 h-3 rounded-full bg-green-500/50" />
+                    <div className="w-3 h-3 rounded-full bg-error-500/50" />
+                    <div className="w-3 h-3 rounded-full bg-warning-500/50" />
+                    <div className="w-3 h-3 rounded-full bg-success-500/50" />
                   </div>
                 </div>
                 <img
@@ -332,13 +332,13 @@ const Product: React.FC = () => {
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-2xl mx-auto">
             <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6">
               <div className="text-4xl font-bold text-white mb-2">87%</div>
-              <div className="text-sm text-slate-400">Completion Rate</div>
-              <div className="text-xs text-slate-500 mt-2">Average automation success across all workflows</div>
+              <div className="text-sm text-gray-400">Completion Rate</div>
+              <div className="text-xs text-gray-500 mt-2">Average automation success across all workflows</div>
             </div>
             <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6">
               <div className="text-4xl font-bold text-white mb-2">6×</div>
-              <div className="text-sm text-slate-400">Faster Velocity</div>
-              <div className="text-xs text-slate-500 mt-2">Content creation speed compared to manual processes</div>
+              <div className="text-sm text-gray-400">Faster Velocity</div>
+              <div className="text-xs text-gray-500 mt-2">Content creation speed compared to manual processes</div>
             </div>
           </div>
         </div>
@@ -351,7 +351,7 @@ const Product: React.FC = () => {
             <span className="inline-flex items-center rounded-full border border-[var(--color-primary)]/20 bg-[var(--color-primary)]/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-[var(--color-primary)] mb-4">
               Loved by scaling teams
             </span>
-            <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold text-slate-900 mb-4">
+            <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-4">
               Teams ship more content, capture more demand, and see faster ROI with Igny8.
             </h2>
           </div>
@@ -379,19 +379,19 @@ const Product: React.FC = () => {
                     {testimonial.name.charAt(0)}
                   </div>
                   
-                  <p className="text-base text-slate-800 leading-relaxed font-semibold flex-1">
+                  <p className="text-base text-gray-800 leading-relaxed font-semibold flex-1">
                     "{testimonial.quote}"
                   </p>
                   
                   <div className="flex flex-col gap-1">
-                    <span className="font-bold text-slate-900 text-lg">{testimonial.name}</span>
-                    <span className="text-sm text-slate-700 font-medium">
+                    <span className="font-bold text-gray-900 text-lg">{testimonial.name}</span>
+                    <span className="text-sm text-gray-700 font-medium">
                       {testimonial.title} · {testimonial.company}
                     </span>
                   </div>
                   
                   {/* Metrics badge with better contrast */}
-                  <div className={`inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r ${gradientColors[index]} text-slate-800 text-xs font-bold w-fit shadow-sm`}>
+                  <div className={`inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r ${gradientColors[index]} text-gray-800 text-xs font-bold w-fit shadow-sm`}>
                     <span>3× faster</span>
                     <span>•</span>
                     <span>+132% lift</span>
@@ -404,7 +404,7 @@ const Product: React.FC = () => {
       </section>
 
       {/* FINAL CTA */}
-      <section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-purple)] to-[#8b5cf6]">
+      <section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-purple)] to-[var(--color-purple-400)]">
         {/* Dashboard overlay in background */}
         <div className="absolute inset-0 opacity-10">
           <div className="absolute inset-0 bg-[url('/marketing/images/hero-dashboard.png')] bg-cover bg-center scale-150 blur-3xl" />
diff --git a/frontend/src/marketing/pages/Resources.tsx b/frontend/src/marketing/pages/Resources.tsx
index 4e504c5c..de20724c 100644
--- a/frontend/src/marketing/pages/Resources.tsx
+++ b/frontend/src/marketing/pages/Resources.tsx
@@ -184,17 +184,17 @@ const Resources: React.FC = () => {
       <SEO meta={getMetaTags("resources")} />
       <div className="bg-white">
         {/* HERO SECTION */}
-      <section className="relative overflow-hidden bg-gradient-to-b from-white via-slate-50/50 to-white">
+      <section className="relative overflow-hidden bg-gradient-to-b from-white via-gray-50/50 to-white">
         <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(6,147,227,0.03),transparent_60%)]" />
         
         <div className="relative max-w-4xl mx-auto px-6 py-24 md:py-32 text-center z-10">
-          <span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.28em] text-slate-500 bg-slate-100 px-4 py-2 rounded-full mb-6">
+          <span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.28em] text-gray-500 bg-gray-100 px-4 py-2 rounded-full mb-6">
             Resources
           </span>
-          <h1 className="text-5xl md:text-6xl lg:text-5xl font-bold leading-tight text-slate-900 mb-6">
+          <h1 className="text-5xl md:text-6xl lg:text-5xl font-bold leading-tight text-gray-900 mb-6">
             Resources to Power Your AI SEO Journey
           </h1>
-          <p className="text-xl md:text-2xl text-slate-600 mb-10 max-w-2xl mx-auto leading-relaxed">
+          <p className="text-xl md:text-2xl text-gray-600 mb-10 max-w-2xl mx-auto leading-relaxed">
             Templates, Guides, Workflows & Tools – Built for High-Scale Content Teams
           </p>
           <div className="flex justify-center">
@@ -209,10 +209,10 @@ const Resources: React.FC = () => {
       {/* CONTENT GROUP 1: Learn AI SEO */}
       <section id="learn" className="max-w-7xl mx-auto px-6 py-24">
         <div className="mb-12">
-          <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
+          <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
             Learn AI SEO
           </h2>
-          <p className="text-lg text-slate-600 max-w-2xl">
+          <p className="text-lg text-gray-600 max-w-2xl">
             Editorial guidance, frameworks, and strategic insights to master AI-powered content creation.
           </p>
         </div>
@@ -222,21 +222,21 @@ const Resources: React.FC = () => {
             return (
               <div
                 key={resource.title}
-                className={`rounded-3xl border-2 border-slate-200 bg-white p-8 flex flex-col gap-4 hover:shadow-xl hover:-translate-y-1 transition-all`}
+                className={`rounded-3xl border-2 border-gray-200 bg-white p-8 flex flex-col gap-4 hover:shadow-xl hover:-translate-y-1 transition-all`}
               >
                 <div className="flex items-center justify-between mb-2">
                   <div className={`inline-flex size-12 rounded-xl bg-gradient-to-br ${resource.color} items-center justify-center text-white shadow-lg`}>
                     <Icon className="h-6 w-6" />
                   </div>
-                  <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.1em] bg-slate-100 text-slate-600">
+                  <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.1em] bg-gray-100 text-gray-600">
                     {resource.tag}
                   </span>
                 </div>
-                <div className="text-xs uppercase tracking-[0.2em] text-slate-500 font-semibold">
+                <div className="text-xs uppercase tracking-[0.2em] text-gray-500 font-semibold">
                   {resource.type}
                 </div>
-                <h3 className="text-xl font-semibold text-slate-900">{resource.title}</h3>
-                <p className="text-sm text-slate-600 leading-relaxed flex-1">{resource.description}</p>
+                <h3 className="text-xl font-semibold text-gray-900">{resource.title}</h3>
+                <p className="text-sm text-gray-600 leading-relaxed flex-1">{resource.description}</p>
                 <a
                   href="#"
                   className="inline-flex items-center gap-2 text-sm font-semibold text-[var(--color-primary)] hover:text-[var(--color-primary-dark)] group"
@@ -251,7 +251,7 @@ const Resources: React.FC = () => {
         <div className="text-center mt-12">
           <a
             href="#"
-            className="inline-flex items-center gap-2 text-base font-semibold text-slate-700 hover:text-[var(--color-primary)] transition"
+            className="inline-flex items-center gap-2 text-base font-semibold text-gray-700 hover:text-[var(--color-primary)] transition"
           >
             View All Guides
             <ArrowRightIcon className="h-5 w-5" />
@@ -260,13 +260,13 @@ const Resources: React.FC = () => {
       </section>
 
       {/* CONTENT GROUP 2: Build Your System */}
-      <section className="bg-gradient-to-b from-white via-slate-50/30 to-white py-24">
+      <section className="bg-gradient-to-b from-white via-gray-50/30 to-white py-24">
         <div className="max-w-7xl mx-auto px-6">
           <div className="mb-12">
-            <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
+            <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
               Build Your System
             </h2>
-            <p className="text-lg text-slate-600 max-w-2xl">
+            <p className="text-lg text-gray-600 max-w-2xl">
               Help users operationalize their workflows with ready-to-use templates and systems.
             </p>
           </div>
@@ -280,10 +280,10 @@ const Resources: React.FC = () => {
                 "from-[var(--color-warning)]/10 to-white",
               ];
               const borders = [
-                "border-[#0693e3]/30",
-                "border-[#0bbf87]/30",
-                "border-[#5d4ae3]/30",
-                "border-[#ff7a00]/30",
+                "border-[var(--color-primary)]/30",
+                "border-[var(--color-success)]/30",
+                "border-[var(--color-purple)]/30",
+                "border-[var(--color-warning)]/30",
               ];
               return (
                 <div
@@ -299,17 +299,17 @@ const Resources: React.FC = () => {
                         {resource.tags.map((tag) => (
                           <span
                             key={tag}
-                            className="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.1em] bg-white/80 text-slate-600 border border-slate-200"
+                            className="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.1em] bg-white/80 text-gray-600 border border-gray-200"
                           >
                             {tag}
                           </span>
                         ))}
                       </div>
-                      <div className="text-xs uppercase tracking-[0.2em] text-slate-500 font-semibold mb-2">
+                      <div className="text-xs uppercase tracking-[0.2em] text-gray-500 font-semibold mb-2">
                         {resource.type}
                       </div>
-                      <h3 className="text-xl font-semibold text-slate-900 mb-3">{resource.title}</h3>
-                      <p className="text-sm text-slate-600 leading-relaxed mb-4">{resource.description}</p>
+                      <h3 className="text-xl font-semibold text-gray-900 mb-3">{resource.title}</h3>
+                      <p className="text-sm text-gray-600 leading-relaxed mb-4">{resource.description}</p>
                       <a
                         href="#"
                         className="inline-flex items-center gap-2 text-sm font-semibold text-[var(--color-primary)] hover:text-[var(--color-primary-dark)] group"
@@ -327,7 +327,7 @@ const Resources: React.FC = () => {
           <div className="text-center mt-12">
             <a
               href="#"
-              className="inline-flex items-center gap-2 text-base font-semibold text-slate-700 hover:text-[var(--color-primary)] transition"
+              className="inline-flex items-center gap-2 text-base font-semibold text-gray-700 hover:text-[var(--color-primary)] transition"
             >
               Explore Templates
               <ArrowRightIcon className="h-5 w-5" />
@@ -340,10 +340,10 @@ const Resources: React.FC = () => {
       <section className="py-24 bg-white">
         <div className="max-w-7xl mx-auto px-6">
           <div className="mb-12">
-            <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
+            <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
               Attend or Watch
             </h2>
-            <p className="text-lg text-slate-600 max-w-2xl">
+            <p className="text-lg text-gray-600 max-w-2xl">
               Live + recorded teaching sessions to accelerate your AI content operations.
             </p>
           </div>
@@ -357,10 +357,10 @@ const Resources: React.FC = () => {
                 "from-[var(--color-warning)]/10 to-white",
               ];
               const borders = [
-                "border-[#0693e3]/30",
-                "border-[#0bbf87]/30",
-                "border-[#5d4ae3]/30",
-                "border-[#ff7a00]/30",
+                "border-[var(--color-primary)]/30",
+                "border-[var(--color-success)]/30",
+                "border-[var(--color-purple)]/30",
+                "border-[var(--color-warning)]/30",
               ];
               return (
                 <div
@@ -374,29 +374,29 @@ const Resources: React.FC = () => {
                     <span
                       className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.1em] ${
                         resource.tag === "Live"
-                          ? "bg-[#0bbf87]/10 text-[#0bbf87] border border-[#0bbf87]/30"
-                          : "bg-[#5d4ae3]/10 text-[#5d4ae3] border border-[#5d4ae3]/30"
+                          ? "bg-[var(--color-success)]/10 text-[var(--color-success)] border border-[var(--color-success)]/30"
+                          : "bg-[var(--color-purple)]/10 text-[var(--color-purple)] border border-[var(--color-purple)]/30"
                       }`}
                     >
                       {resource.tag}
                     </span>
                   </div>
                   {resource.date && (
-                    <div className="flex items-center gap-2 text-xs uppercase tracking-[0.2em] text-slate-500 font-semibold">
+                    <div className="flex items-center gap-2 text-xs uppercase tracking-[0.2em] text-gray-500 font-semibold">
                       <ClockIcon className="h-4 w-4" />
                       {resource.date}
                     </div>
                   )}
-                  <div className="text-xs uppercase tracking-[0.2em] text-slate-500 font-semibold">
+                  <div className="text-xs uppercase tracking-[0.2em] text-gray-500 font-semibold">
                     {resource.type}
                   </div>
-                  <h3 className="text-xl font-semibold text-slate-900">{resource.title}</h3>
-                  <p className="text-sm text-slate-600 leading-relaxed flex-1">{resource.description}</p>
+                  <h3 className="text-xl font-semibold text-gray-900">{resource.title}</h3>
+                  <p className="text-sm text-gray-600 leading-relaxed flex-1">{resource.description}</p>
                   <button
                     className={`inline-flex items-center justify-center gap-2 rounded-xl px-6 py-3 text-sm font-semibold transition ${
                       resource.tag === "Live"
                         ? "bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-dark)] text-white hover:shadow-lg"
-                        : "border-2 border-slate-300 bg-white text-slate-700 hover:border-[#0693e3] hover:text-[var(--color-primary)]"
+                        : "border-2 border-gray-300 bg-white text-gray-700 hover:border-[var(--color-primary)] hover:text-[var(--color-primary)]"
                     }`}
                   >
                     {resource.tag === "Live" ? (
@@ -418,7 +418,7 @@ const Resources: React.FC = () => {
           <div className="text-center mt-12">
             <a
               href="#"
-              className="inline-flex items-center gap-2 text-base font-semibold text-slate-700 hover:text-[var(--color-primary)] transition"
+              className="inline-flex items-center gap-2 text-base font-semibold text-gray-700 hover:text-[var(--color-primary)] transition"
             >
               View Schedule
               <ArrowRightIcon className="h-5 w-5" />
@@ -428,13 +428,13 @@ const Resources: React.FC = () => {
       </section>
 
       {/* CONTENT GROUP 4: Execute Faster */}
-      <section className="bg-gradient-to-b from-white via-slate-50/30 to-white py-24">
+      <section className="bg-gradient-to-b from-white via-gray-50/30 to-white py-24">
         <div className="max-w-7xl mx-auto px-6">
           <div className="mb-12">
-            <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
+            <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
               Execute Faster
             </h2>
-            <p className="text-lg text-slate-600 max-w-2xl">
+            <p className="text-lg text-gray-600 max-w-2xl">
               Done-for-you components, fast-start kits, and execution tools to get you running immediately.
             </p>
           </div>
@@ -444,7 +444,7 @@ const Resources: React.FC = () => {
               return (
                 <div
                   key={resource.title}
-                  className="rounded-3xl border-2 border-slate-200 bg-white p-8 flex flex-col gap-4 hover:shadow-xl hover:-translate-y-1 transition-all"
+                  className="rounded-3xl border-2 border-gray-200 bg-white p-8 flex flex-col gap-4 hover:shadow-xl hover:-translate-y-1 transition-all"
                 >
                   <div className={`inline-flex size-12 rounded-xl bg-gradient-to-br ${resource.color} items-center justify-center text-white shadow-lg`}>
                     <Icon className="h-6 w-6" />
@@ -453,17 +453,17 @@ const Resources: React.FC = () => {
                     {resource.tags.map((tag) => (
                       <span
                         key={tag}
-                        className="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.1em] bg-slate-100 text-slate-600"
+                        className="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.1em] bg-gray-100 text-gray-600"
                       >
                         {tag}
                       </span>
                     ))}
                   </div>
-                  <div className="text-xs uppercase tracking-[0.2em] text-slate-500 font-semibold">
+                  <div className="text-xs uppercase tracking-[0.2em] text-gray-500 font-semibold">
                     {resource.type}
                   </div>
-                  <h3 className="text-lg font-semibold text-slate-900">{resource.title}</h3>
-                  <p className="text-sm text-slate-600 leading-relaxed flex-1">{resource.description}</p>
+                  <h3 className="text-lg font-semibold text-gray-900">{resource.title}</h3>
+                  <p className="text-sm text-gray-600 leading-relaxed flex-1">{resource.description}</p>
                   <a
                     href="#"
                     className="inline-flex items-center gap-2 text-sm font-semibold text-[var(--color-primary)] hover:text-[var(--color-primary-dark)] group"
@@ -480,11 +480,11 @@ const Resources: React.FC = () => {
       </section>
 
       {/* CROSS-MODULE TOOLKIT BANNER */}
-      <section className="py-16 bg-gradient-to-r from-[#0bbf87]/10 via-[#0693e3]/10 to-[#0bbf87]/10 border-y border-[#0bbf87]/20">
+      <section className="py-16 bg-gradient-to-r from-[var(--color-success)]/10 via-[var(--color-primary)]/10 to-[var(--color-success)]/10 border-y border-[var(--color-success)]/20">
         <div className="max-w-7xl mx-auto px-6">
           <div className="flex flex-col md:flex-row items-center justify-between gap-6">
             <div className="flex-1">
-              <p className="text-lg md:text-xl text-slate-900 font-medium leading-relaxed">
+              <p className="text-lg md:text-xl text-gray-900 font-medium leading-relaxed">
                 Build your full-stack AI content engine with our toolkits from every module — Planner, Writer, Thinker & beyond.
               </p>
             </div>
@@ -502,7 +502,7 @@ const Resources: React.FC = () => {
       </section>
 
       {/* FINAL CTA - Dark Background */}
-      <section className="relative overflow-hidden bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
+      <section className="relative overflow-hidden bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900">
         {/* Radial glow */}
         <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(6,147,227,0.1),transparent_70%)]" />
         
diff --git a/frontend/src/marketing/pages/Solutions.tsx b/frontend/src/marketing/pages/Solutions.tsx
index 1fa18a8c..8a795376 100644
--- a/frontend/src/marketing/pages/Solutions.tsx
+++ b/frontend/src/marketing/pages/Solutions.tsx
@@ -60,7 +60,7 @@ const Solutions: React.FC = () => {
       color: "from-[var(--color-primary)]/5 to-white",
       borderColor: "border-[var(--color-primary)]/20",
       iconColor: "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
-      painColor: "bg-rose-500",
+      painColor: "bg-error-500",
       outcomeColor: "bg-[var(--color-primary)]",
     },
     {
@@ -80,7 +80,7 @@ const Solutions: React.FC = () => {
       color: "from-[var(--color-success)]/5 to-white",
       borderColor: "border-[var(--color-success)]/20",
       iconColor: "from-[var(--color-success)] to-[var(--color-success-dark)]",
-      painColor: "bg-rose-500",
+      painColor: "bg-error-500",
       outcomeColor: "bg-[var(--color-success)]",
     },
     {
@@ -100,7 +100,7 @@ const Solutions: React.FC = () => {
       color: "from-[var(--color-purple)]/5 to-white",
       borderColor: "border-[var(--color-purple)]/20",
       iconColor: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
-      painColor: "bg-rose-500",
+      painColor: "bg-error-500",
       outcomeColor: "bg-[var(--color-purple)]",
     },
   ];
@@ -149,17 +149,17 @@ const Solutions: React.FC = () => {
       <SEO meta={getMetaTags("solutions")} />
       <div className="bg-white">
       {/* LIGHT HERO SECTION */}
-      <section className="relative overflow-hidden bg-gradient-to-b from-white via-slate-50/50 to-white">
+      <section className="relative overflow-hidden bg-gradient-to-b from-white via-gray-50/50 to-white">
         <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(6,147,227,0.03),transparent_60%)]" />
         
         <div className="relative max-w-4xl mx-auto px-6 py-24 md:py-32 text-center z-10">
-          <span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.28em] text-slate-500 bg-slate-100 px-4 py-2 rounded-full mb-6">
+          <span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.28em] text-gray-500 bg-gray-100 px-4 py-2 rounded-full mb-6">
             Solutions
           </span>
-          <h1 className="text-5xl md:text-6xl lg:text-5xl font-bold leading-tight text-slate-900 mb-6">
+          <h1 className="text-5xl md:text-6xl lg:text-5xl font-bold leading-tight text-gray-900 mb-6">
             Designed for teams that operate at scale.
           </h1>
-          <p className="text-xl md:text-2xl text-slate-600 mb-10 max-w-2xl mx-auto leading-relaxed">
+          <p className="text-xl md:text-2xl text-gray-600 mb-10 max-w-2xl mx-auto leading-relaxed">
             IGNY8 adapts to agencies, publishers, and in-house teams. Automate repetitive work, unify strategy, and accelerate content velocity with AI.
           </p>
           <div className="flex flex-col sm:flex-row gap-4 justify-center">
@@ -169,7 +169,7 @@ const Solutions: React.FC = () => {
             )}
             {renderCta(
               { label: "Talk to sales", href: "/contact" },
-              "inline-flex items-center justify-center rounded-xl border-2 border-slate-300 bg-white text-slate-700 px-8 py-4 text-base font-semibold hover:border-[var(--color-primary)] hover:text-[var(--color-primary)] transition"
+              "inline-flex items-center justify-center rounded-xl border-2 border-gray-300 bg-white text-gray-700 px-8 py-4 text-base font-semibold hover:border-[var(--color-primary)] hover:text-[var(--color-primary)] transition"
             )}
           </div>
         </div>
@@ -182,33 +182,33 @@ const Solutions: React.FC = () => {
             <div className="grid grid-cols-1 lg:grid-cols-3 gap-12 lg:gap-16">
               {/* Left: Persona Badge & Info */}
               <div className="space-y-6">
-                <div className="inline-flex items-center gap-3 px-4 py-2 rounded-full bg-white border-2 border-slate-200 shadow-sm">
+                <div className="inline-flex items-center gap-3 px-4 py-2 rounded-full bg-white border-2 border-gray-200 shadow-sm">
                   <div className={`size-3 rounded-full bg-gradient-to-br ${persona.iconColor}`} />
-                  <span className="text-xs uppercase tracking-[0.2em] text-slate-600 font-semibold">
+                  <span className="text-xs uppercase tracking-[0.2em] text-gray-600 font-semibold">
                     Persona
                   </span>
                 </div>
                 <div>
-                  <h3 className="text-3xl md:text-4xl font-bold text-slate-900 mb-3">
+                  <h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-3">
                     {persona.name}
                   </h3>
-                  <p className="text-lg text-slate-600 leading-relaxed">
+                  <p className="text-lg text-gray-600 leading-relaxed">
                     {persona.description}
                   </p>
                 </div>
               </div>
 
               {/* Middle: Pain Points */}
-              <div className="bg-white rounded-2xl border-2 border-slate-200 p-8 shadow-sm">
+              <div className="bg-white rounded-2xl border-2 border-gray-200 p-8 shadow-sm">
                 <div className="flex items-center gap-2 mb-6">
-                  <ExclamationTriangleIcon className="h-5 w-5 text-rose-500" />
-                  <h4 className="text-sm uppercase tracking-[0.2em] text-rose-600 font-semibold">
+                  <ExclamationTriangleIcon className="h-5 w-5 text-error-500" />
+                  <h4 className="text-sm uppercase tracking-[0.2em] text-error-600 font-semibold">
                     Pain Points
                   </h4>
                 </div>
                 <ul className="space-y-4">
                   {persona.pains.map((pain, i) => (
-                    <li key={i} className="flex gap-3 text-slate-700">
+                    <li key={i} className="flex gap-3 text-gray-700">
                       <span className={`mt-1.5 size-2 rounded-full ${persona.painColor} shadow-sm flex-shrink-0`} />
                       <span>{pain}</span>
                     </li>
@@ -217,7 +217,7 @@ const Solutions: React.FC = () => {
               </div>
 
               {/* Right: IGNY8 Outcomes */}
-              <div className="bg-white rounded-2xl border-2 border-slate-200 p-8 shadow-sm">
+              <div className="bg-white rounded-2xl border-2 border-gray-200 p-8 shadow-sm">
                 <div className="flex items-center gap-2 mb-6">
                   <CheckCircleIcon className={`h-5 w-5 ${persona.outcomeColor === 'bg-[var(--color-primary)]' ? 'text-[var(--color-primary)]' : persona.outcomeColor === 'bg-[var(--color-success)]' ? 'text-[var(--color-success)]' : 'text-[var(--color-purple)]'}`} />
                   <h4 className={`text-sm uppercase tracking-[0.2em] font-semibold ${persona.outcomeColor === 'bg-[var(--color-primary)]' ? 'text-[var(--color-primary)]' : persona.outcomeColor === 'bg-[var(--color-success)]' ? 'text-[var(--color-success)]' : 'text-[var(--color-purple)]'}`}>
@@ -226,7 +226,7 @@ const Solutions: React.FC = () => {
                 </div>
                 <ul className="space-y-4">
                   {persona.outcomes.map((outcome, i) => (
-                    <li key={i} className="flex gap-3 text-slate-700">
+                    <li key={i} className="flex gap-3 text-gray-700">
                       <span className={`mt-1.5 size-2 rounded-full ${persona.outcomeColor} shadow-sm flex-shrink-0`} />
                       <span>{outcome}</span>
                     </li>
@@ -239,7 +239,7 @@ const Solutions: React.FC = () => {
       ))}
 
       {/* BENEFITS STATISTICS SECTION */}
-      <section className="py-24 bg-gradient-to-b from-white via-slate-50/30 to-white">
+      <section className="py-24 bg-gradient-to-b from-white via-gray-50/30 to-white">
         <div className="max-w-6xl mx-auto px-6">
           <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
             {[
@@ -272,7 +272,7 @@ const Solutions: React.FC = () => {
               return (
                 <div
                   key={index}
-                  className="relative rounded-3xl border-2 border-slate-200 bg-gradient-to-br from-white to-slate-50/50 p-8 text-center space-y-4 hover:shadow-2xl hover:-translate-y-1 transition-all group"
+                  className="relative rounded-3xl border-2 border-gray-200 bg-gradient-to-br from-white to-gray-50/50 p-8 text-center space-y-4 hover:shadow-2xl hover:-translate-y-1 transition-all group"
                 >
                   {/* Glow effect */}
                   <div className={`absolute -inset-1 bg-gradient-to-br ${stat.color} rounded-3xl opacity-0 group-hover:opacity-20 blur-xl transition-opacity -z-10 ${stat.glow}`} />
@@ -288,12 +288,12 @@ const Solutions: React.FC = () => {
                   </div>
                   
                   {/* Label */}
-                  <div className="text-lg font-semibold text-slate-900">
+                  <div className="text-lg font-semibold text-gray-900">
                     {stat.label}
                   </div>
                   
                   {/* Description */}
-                  <p className="text-sm text-slate-600">
+                  <p className="text-sm text-gray-600">
                     {stat.description}
                   </p>
                 </div>
@@ -307,10 +307,10 @@ const Solutions: React.FC = () => {
       <section id="use-cases" className="py-24 bg-white">
         <div className="max-w-7xl mx-auto px-6">
           <div className="text-center mb-16">
-            <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
+            <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
               Use Cases
             </h2>
-            <p className="text-lg text-slate-600 max-w-2xl mx-auto">
+            <p className="text-lg text-gray-600 max-w-2xl mx-auto">
               Practical applications that help teams scale content production and accelerate growth
             </p>
           </div>
@@ -321,7 +321,7 @@ const Solutions: React.FC = () => {
               return (
                 <div
                   key={useCase.title}
-                  className="relative rounded-2xl border-2 border-slate-200 bg-white p-6 space-y-4 hover:shadow-xl hover:-translate-y-1 transition-all group"
+                  className="relative rounded-2xl border-2 border-gray-200 bg-white p-6 space-y-4 hover:shadow-xl hover:-translate-y-1 transition-all group"
                 >
                   {/* Icon */}
                   <div className={`inline-flex size-12 rounded-xl bg-gradient-to-br ${useCase.color} items-center justify-center text-white shadow-md`}>
@@ -329,12 +329,12 @@ const Solutions: React.FC = () => {
                   </div>
                   
                   {/* Title */}
-                  <h3 className="text-xl font-semibold text-slate-900">
+                  <h3 className="text-xl font-semibold text-gray-900">
                     {useCase.title}
                   </h3>
                   
                   {/* Description */}
-                  <p className="text-sm text-slate-600 leading-relaxed">
+                  <p className="text-sm text-gray-600 leading-relaxed">
                     {useCase.description}
                   </p>
                   
@@ -348,7 +348,7 @@ const Solutions: React.FC = () => {
       </section>
 
       {/* FINAL CTA */}
-      <section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-purple)] to-[#8b5cf6]">
+      <section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-purple)] to-[var(--color-purple-400)]">
         {/* Radial glow */}
         <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.1),transparent_70%)]" />
         
diff --git a/frontend/src/marketing/pages/Tour.tsx b/frontend/src/marketing/pages/Tour.tsx
index c6dabe8f..da4a6fe2 100644
--- a/frontend/src/marketing/pages/Tour.tsx
+++ b/frontend/src/marketing/pages/Tour.tsx
@@ -35,7 +35,7 @@ const Tour: React.FC = () => {
   return (
     <>
       <SEO meta={getMetaTags("tour")} />
-      <div className="bg-gradient-to-b from-white via-slate-50/30 to-white text-slate-900">
+      <div className="bg-gradient-to-b from-white via-gray-50/30 to-white text-gray-900">
       <section className="max-w-6xl mx-auto px-6 pt-24 pb-16 space-y-6">
         <SectionHeading
           eyebrow="Guided Tour"
@@ -43,7 +43,7 @@ const Tour: React.FC = () => {
           description="Walk through the workflow that moves market intelligence into production-ready content. Each step builds toward an automated growth flywheel."
         />
         <div className="rounded-3xl border-2 border-[var(--color-primary)]/30 bg-gradient-to-br from-[var(--color-primary)]/10 via-white to-[var(--color-success)]/5 p-8 shadow-lg">
-          <div className="aspect-video rounded-2xl border-2 border-slate-200 bg-gradient-to-br from-slate-50 to-white flex items-center justify-center text-slate-500 text-sm shadow-inner">
+          <div className="aspect-video rounded-2xl border-2 border-gray-200 bg-gradient-to-br from-gray-50 to-white flex items-center justify-center text-gray-500 text-sm shadow-inner">
             Video walkthrough placeholder (embed demo or Loom)
           </div>
         </div>
@@ -55,7 +55,7 @@ const Tour: React.FC = () => {
             { border: "border-[var(--color-primary)]/40", gradient: "from-[var(--color-primary)]/10 to-white", dot: "bg-[var(--color-primary)]" },
             { border: "border-[var(--color-success)]/40", gradient: "from-[var(--color-success)]/10 to-white", dot: "bg-[var(--color-success)]" },
             { border: "border-[var(--color-warning)]/40", gradient: "from-[var(--color-warning)]/10 to-white", dot: "bg-[var(--color-warning)]" },
-            { border: "border-[#5d4ae3]/40", gradient: "from-[#5d4ae3]/10 to-white", dot: "bg-[#5d4ae3]" },
+            { border: "border-[var(--color-purple)]/40", gradient: "from-[var(--color-purple)]/10 to-white", dot: "bg-[var(--color-purple)]" },
           ];
           const colorScheme = colors[index % colors.length];
           return (
@@ -64,14 +64,14 @@ const Tour: React.FC = () => {
               className={`grid grid-cols-1 lg:grid-cols-2 gap-12 items-center rounded-3xl border-2 ${colorScheme.border} bg-gradient-to-br ${colorScheme.gradient} p-8 hover:shadow-xl transition-all`}
             >
               <div className={`space-y-4 ${index % 2 === 1 ? "lg:order-2" : ""}`}>
-                <span className="text-xs uppercase tracking-[0.3em] text-slate-500 font-semibold flex items-center gap-2">
+                <span className="text-xs uppercase tracking-[0.3em] text-gray-500 font-semibold flex items-center gap-2">
                   <span className={`size-1.5 rounded-full ${colorScheme.dot}`}></span>
                   Step {index + 1}
                 </span>
                 <h3 className="text-2xl font-semibold">{step.title}</h3>
-                <p className="text-sm text-slate-600 leading-relaxed">{step.description}</p>
+                <p className="text-sm text-gray-600 leading-relaxed">{step.description}</p>
               </div>
-              <div className={`rounded-3xl border-2 border-slate-200 bg-gradient-to-br from-slate-50 to-white overflow-hidden shadow-inner ${index % 2 === 1 ? "lg:order-1" : ""}`}>
+              <div className={`rounded-3xl border-2 border-gray-200 bg-gradient-to-br from-gray-50 to-white overflow-hidden shadow-inner ${index % 2 === 1 ? "lg:order-1" : ""}`}>
                 <img
                   src={`/marketing/images/${step.image}`}
                   alt={step.title}
@@ -83,19 +83,19 @@ const Tour: React.FC = () => {
         })}
       </section>
 
-      <section className="bg-gradient-to-br from-[var(--color-primary)]/10 via-slate-50/70 to-[#0bbf87]/10 border-y border-[#0693e3]/20">
+      <section className="bg-gradient-to-br from-[var(--color-primary)]/10 via-gray-50/70 to-[var(--color-success)]/10 border-y border-[var(--color-primary)]/20">
         <div className="max-w-6xl mx-auto px-6 py-24 space-y-10">
           <SectionHeading
             eyebrow="Automation recipes"
             title="Pre-built workflows you can launch on day one."
             description="Activate automation templates or customize them in minutes. Igny8 tracks dependencies, statuses, and handoffs."
           />
-          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 text-sm text-slate-600">
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 text-sm text-gray-600">
             {[
               { name: "Keywords → Ideas", time: "Nightly", highlight: "Targets new opportunities", color: "border-[var(--color-primary)]/40", gradient: "from-[var(--color-primary)]/10 to-white" },
               { name: "Ideas → Tasks", time: "Daily", highlight: "Staff writers automatically", color: "border-[var(--color-success)]/40", gradient: "from-[var(--color-success)]/10 to-white" },
               { name: "Tasks → Content", time: "Hourly", highlight: "Generate & queue drafts", color: "border-[var(--color-warning)]/40", gradient: "from-[var(--color-warning)]/10 to-white" },
-              { name: "Content → Images", time: "On approval", highlight: "Produce branded visuals", color: "border-[#5d4ae3]/40", gradient: "from-[#5d4ae3]/10 to-white" },
+              { name: "Content → Images", time: "On approval", highlight: "Produce branded visuals", color: "border-[var(--color-purple)]/40", gradient: "from-[var(--color-purple)]/10 to-white" },
               { name: "Content → WordPress", time: "Manual launch", highlight: "One-click publish", color: "border-[var(--color-primary)]/40", gradient: "from-[var(--color-primary)]/10 to-white" },
               { name: "SERP Win/Loss Alerts", time: "Real-time", highlight: "Trigger optimizations", color: "border-[var(--color-success)]/40", gradient: "from-[var(--color-success)]/10 to-white" },
             ].map((recipe) => (
@@ -103,8 +103,8 @@ const Tour: React.FC = () => {
                 key={recipe.name}
                 className={`rounded-3xl border-2 ${recipe.color} bg-gradient-to-br ${recipe.gradient} p-6 space-y-3 hover:shadow-xl transition-all hover:-translate-y-1`}
               >
-                <h4 className="text-base font-semibold text-slate-900">{recipe.name}</h4>
-                <div className="text-xs uppercase tracking-[0.3em] text-slate-500 font-semibold">
+                <h4 className="text-base font-semibold text-gray-900">{recipe.name}</h4>
+                <div className="text-xs uppercase tracking-[0.3em] text-gray-500 font-semibold">
                   {recipe.time}
                 </div>
                 <p>{recipe.highlight}</p>
diff --git a/frontend/src/marketing/pages/Waitlist.tsx b/frontend/src/marketing/pages/Waitlist.tsx
index 9f459d44..02d30b49 100644
--- a/frontend/src/marketing/pages/Waitlist.tsx
+++ b/frontend/src/marketing/pages/Waitlist.tsx
@@ -23,7 +23,7 @@ const Waitlist: React.FC = () => {
   return (
     <>
       <SEO meta={getMetaTags("waitlist")} />
-      <div className="bg-gradient-to-b from-white via-slate-50/30 to-white text-slate-900">
+      <div className="bg-gradient-to-b from-white via-gray-50/30 to-white text-gray-900">
       <section className="max-w-4xl mx-auto px-6 pt-24 pb-12">
         <SectionHeading
           eyebrow="Roadmap preview"
@@ -34,32 +34,32 @@ const Waitlist: React.FC = () => {
 
       <section className="max-w-5xl mx-auto px-6 pb-24 grid grid-cols-1 lg:grid-cols-2 gap-12">
         <div className="rounded-3xl border-2 border-[var(--color-primary)]/30 bg-gradient-to-br from-[var(--color-primary)]/10 via-white to-[var(--color-success)]/5 p-10 space-y-6 shadow-lg">
-          <h3 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
+          <h3 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
             <span className="size-2 rounded-full bg-[var(--color-primary)]"></span>
             Join the waitlist
           </h3>
-          <p className="text-sm text-slate-600">
+          <p className="text-sm text-gray-600">
             Share your details and we'll invite you to beta cohorts with onboarding resources and direct feedback loops to our product team.
           </p>
           <form className="space-y-4">
             <input
               type="text"
               placeholder="Name"
-              className="w-full rounded-xl border-2 border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-500 focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
+              className="w-full rounded-xl border-2 border-gray-200 bg-white px-4 py-3 text-sm text-gray-900 placeholder:text-gray-500 focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
             />
             <input
               type="email"
               placeholder="Work email"
-              className="w-full rounded-xl border-2 border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-500 focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
+              className="w-full rounded-xl border-2 border-gray-200 bg-white px-4 py-3 text-sm text-gray-900 placeholder:text-gray-500 focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
             />
             <textarea
               rows={4}
               placeholder="Tell us about your current workflow and why you're excited."
-              className="w-full rounded-xl border-2 border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-500 focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20 resize-none"
+              className="w-full rounded-xl border-2 border-gray-200 bg-white px-4 py-3 text-sm text-gray-900 placeholder:text-gray-500 focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20 resize-none"
             />
             <button
               type="submit"
-              className="inline-flex items-center justify-center rounded-full bg-gradient-to-r from-[#0693e3] to-[#0472b8] hover:from-[#0472b8] hover:to-[#0693e3] text-white px-6 py-3 text-sm font-semibold shadow-lg shadow-[#0693e3]/30 transition-all w-full"
+              className="inline-flex items-center justify-center rounded-full bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-brand-700)] hover:from-[var(--color-brand-700)] hover:to-[var(--color-primary)] text-white px-6 py-3 text-sm font-semibold shadow-lg shadow-[var(--color-primary)]/30 transition-all w-full"
             >
               Join waitlist
             </button>
@@ -67,19 +67,19 @@ const Waitlist: React.FC = () => {
         </div>
 
         <div className="space-y-6">
-          <div className="rounded-3xl border-2 border-[#0bbf87]/30 bg-gradient-to-br from-[#0bbf87]/10 to-white p-8 space-y-4">
-            <h4 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
-              <span className="size-2 rounded-full bg-[#0bbf87]"></span>
+          <div className="rounded-3xl border-2 border-[var(--color-success)]/30 bg-gradient-to-br from-[var(--color-success)]/10 to-white p-8 space-y-4">
+            <h4 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
+              <span className="size-2 rounded-full bg-[var(--color-success)]"></span>
               What's coming
             </h4>
-            <ul className="space-y-3 text-sm text-slate-600">
+            <ul className="space-y-3 text-sm text-gray-600">
               {roadmapItems.map((item, idx) => {
-                const colors = ["bg-[var(--color-primary)]", "bg-[#0bbf87]", "bg-[#ff7a00]"];
+                const colors = ["bg-[var(--color-primary)]", "bg-[var(--color-success)]", "bg-[var(--color-warning)]"];
                 return (
                   <li key={item.title} className="flex gap-3">
                     <span className={`mt-1 size-1.5 rounded-full ${colors[idx % colors.length]} shadow-sm`} />
                     <div>
-                      <div className="font-semibold text-slate-900">{item.title}</div>
+                      <div className="font-semibold text-gray-900">{item.title}</div>
                       <div>{item.description}</div>
                     </div>
                   </li>
@@ -87,9 +87,9 @@ const Waitlist: React.FC = () => {
               })}
             </ul>
           </div>
-          <div className="rounded-3xl border-2 border-[#ff7a00]/30 bg-gradient-to-br from-[#ff7a00]/10 to-white p-8 text-sm text-slate-600 space-y-3">
-            <h4 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
-              <span className="size-2 rounded-full bg-[#ff7a00]"></span>
+          <div className="rounded-3xl border-2 border-[var(--color-warning)]/30 bg-gradient-to-br from-[var(--color-warning)]/10 to-white p-8 text-sm text-gray-600 space-y-3">
+            <h4 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
+              <span className="size-2 rounded-full bg-[var(--color-warning)]"></span>
               How the beta works
             </h4>
             <p>We onboard new features to the waitlist in weekly waves. You'll receive playbooks, sample workflows, and a feedback channel with our product team.</p>
diff --git a/frontend/src/pages/AuthPages/SignUp.tsx b/frontend/src/pages/AuthPages/SignUp.tsx
index 9004cc91..c2eb0194 100644
--- a/frontend/src/pages/AuthPages/SignUp.tsx
+++ b/frontend/src/pages/AuthPages/SignUp.tsx
@@ -93,7 +93,7 @@ export default function SignUp() {
           />
           
           {/* Right Side - Pricing Plans */}
-          <div className="hidden lg:flex lg:w-1/2 bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-gray-900 dark:to-gray-800 p-8 xl:p-12 items-start justify-center relative">
+          <div className="hidden lg:flex lg:w-1/2 bg-gradient-to-br from-brand-50 to-purple-50 dark:from-gray-900 dark:to-gray-800 p-8 xl:p-12 items-start justify-center relative">
             {/* Logo - Top Right */}
             <Link to="/" className="absolute top-6 right-6">
               <img
diff --git a/frontend/src/pages/Automation/AutomationPage.tsx b/frontend/src/pages/Automation/AutomationPage.tsx
index 0e8cf0e7..3082a207 100644
--- a/frontend/src/pages/Automation/AutomationPage.tsx
+++ b/frontend/src/pages/Automation/AutomationPage.tsx
@@ -39,13 +39,13 @@ import {
 } from '../../icons';
 
 const STAGE_CONFIG = [
-  { icon: ListIcon, color: 'from-blue-500 to-blue-600', textColor: 'text-blue-600', hoverColor: 'hover:border-blue-500', name: 'Keywords → Clusters' },
+  { icon: ListIcon, color: 'from-brand-500 to-brand-600', textColor: 'text-brand-600', hoverColor: 'hover:border-brand-500', name: 'Keywords → Clusters' },
   { icon: GroupIcon, color: 'from-purple-500 to-purple-600', textColor: 'text-purple-600', hoverColor: 'hover:border-purple-500', name: 'Clusters → Ideas' },
-  { icon: CheckCircleIcon, color: 'from-indigo-500 to-indigo-600', textColor: 'text-indigo-600', hoverColor: 'hover:border-indigo-500', name: 'Ideas → Tasks' },
-  { icon: PencilIcon, color: 'from-green-500 to-green-600', textColor: 'text-green-600', hoverColor: 'hover:border-green-500', name: 'Tasks → Content' },
-  { icon: FileIcon, color: 'from-amber-500 to-amber-600', textColor: 'text-amber-600', hoverColor: 'hover:border-amber-500', name: 'Content → Image Prompts' },
-  { icon: FileTextIcon, color: 'from-pink-500 to-pink-600', textColor: 'text-pink-600', hoverColor: 'hover:border-pink-500', name: 'Image Prompts → Images' },
-  { icon: PaperPlaneIcon, color: 'from-teal-500 to-teal-600', textColor: 'text-teal-600', hoverColor: 'hover:border-teal-500', name: 'Review Gate' },
+  { icon: CheckCircleIcon, color: 'from-purple-500 to-purple-600', textColor: 'text-purple-600', hoverColor: 'hover:border-purple-500', name: 'Ideas → Tasks' },
+  { icon: PencilIcon, color: 'from-success-500 to-success-600', textColor: 'text-success-600', hoverColor: 'hover:border-success-500', name: 'Tasks → Content' },
+  { icon: FileIcon, color: 'from-warning-500 to-warning-600', textColor: 'text-warning-600', hoverColor: 'hover:border-warning-500', name: 'Content → Image Prompts' },
+  { icon: FileTextIcon, color: 'from-purple-500 to-purple-600', textColor: 'text-purple-600', hoverColor: 'hover:border-purple-500', name: 'Image Prompts → Images' },
+  { icon: PaperPlaneIcon, color: 'from-success-500 to-success-600', textColor: 'text-purple-600', hoverColor: 'hover:border-purple-500', name: 'Review Gate' },
 ];
 
 const AutomationPage: React.FC = () => {
@@ -386,7 +386,7 @@ const AutomationPage: React.FC = () => {
           {visible.map((it, idx) => (
             <div key={idx} className="w-1/3 text-center">
               <span className={`${it.colorCls ?? ''} block`}>{it.label}</span>
-              <div className="font-bold text-slate-900 dark:text-white">{Number(it.value) || 0}</div>
+              <div className="font-bold text-gray-900 dark:text-white">{Number(it.value) || 0}</div>
             </div>
           ))}
         </div>
@@ -399,7 +399,7 @@ const AutomationPage: React.FC = () => {
         {items.concat(Array(Math.max(0, 3 - items.length)).fill({ label: '', value: '' })).slice(0,3).map((it, idx) => (
           <div key={idx} className="flex-1 text-center">
             <span className={`${it.colorCls ?? ''} block`}>{it.label}</span>
-            <div className="font-bold text-slate-900 dark:text-white">{it.value !== undefined && it.value !== null ? Number(it.value) : ''}</div>
+            <div className="font-bold text-gray-900 dark:text-white">{it.value !== undefined && it.value !== null ? Number(it.value) : ''}</div>
           </div>
         ))}
       </div>
@@ -419,19 +419,19 @@ const AutomationPage: React.FC = () => {
         {/* Compact Ready-to-Run card (header) - absolutely centered in header */}
         <div className="flex justify-center">
           <div className={`w-full max-w-sm rounded-lg border-2 p-2 transition-all flex items-center gap-3 shadow-sm
-            ${currentRun?.status === 'running' ? 'border-blue-500 bg-blue-50' : currentRun?.status === 'paused' ? 'border-amber-500 bg-amber-50' : totalPending > 0 ? 'border-success-500 bg-success-50' : 'border-slate-300 bg-slate-50'}`}>
+            ${currentRun?.status === 'running' ? 'border-brand-500 bg-brand-50' : currentRun?.status === 'paused' ? 'border-warning-500 bg-warning-50' : totalPending > 0 ? 'border-success-500 bg-success-50' : 'border-gray-300 bg-gray-50'}`}>
             <div className={`size-9 rounded-lg flex items-center justify-center flex-shrink-0
-              ${currentRun?.status === 'running' ? 'bg-gradient-to-br from-blue-500 to-blue-600' : currentRun?.status === 'paused' ? 'bg-gradient-to-br from-amber-500 to-amber-600' : totalPending > 0 ? 'bg-gradient-to-br from-success-500 to-success-600' : 'bg-gradient-to-br from-slate-400 to-slate-500'}`}>
+              ${currentRun?.status === 'running' ? 'bg-gradient-to-br from-brand-500 to-brand-600' : currentRun?.status === 'paused' ? 'bg-gradient-to-br from-warning-500 to-warning-600' : totalPending > 0 ? 'bg-gradient-to-br from-success-500 to-success-600' : 'bg-gradient-to-br from-gray-400 to-gray-500'}`}>
               {!currentRun && totalPending > 0 ? <CheckCircleIcon className="size-4 text-white" /> : currentRun?.status === 'running' ? <BoltIcon className="size-4 text-white" /> : currentRun?.status === 'paused' ? <ClockIcon className="size-4 text-white" /> : <BoltIcon className="size-4 text-white" />}
             </div>
             <div className="flex-1 min-w-0">
-              <div className="text-sm font-semibold text-slate-900 dark:text-white truncate">
+              <div className="text-sm font-semibold text-gray-900 dark:text-white truncate">
                 {currentRun?.status === 'running' && `Running - Stage ${currentRun.current_stage}/7`}
                 {currentRun?.status === 'paused' && 'Paused'}
                 {!currentRun && totalPending > 0 && 'Ready to Run'}
                 {!currentRun && totalPending === 0 && 'No Items Pending'}
               </div>
-              <div className="text-xs text-slate-600 dark:text-gray-400 truncate">
+              <div className="text-xs text-gray-600 dark:text-gray-400 truncate">
                 {currentRun ? `Started: ${new Date(currentRun.started_at).toLocaleTimeString()}` : (totalPending > 0 ? `${totalPending} items in pipeline` : 'All stages clear')}
               </div>
             </div>
@@ -525,20 +525,20 @@ const AutomationPage: React.FC = () => {
         {/* Metrics Summary Cards */}
         <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
           {/* Keywords */}
-          <div className="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 rounded-xl p-4 border-2 border-blue-200 dark:border-blue-800">
+          <div className="bg-gradient-to-br from-brand-50 to-brand-100 dark:from-brand-900/20 dark:to-brand-800/20 rounded-xl p-4 border-2 border-brand-200 dark:border-brand-800">
             <div className="flex items-center justify-between mb-3">
               <div className="flex items-center gap-3">
-                <div className="size-10 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
+                <div className="size-10 rounded-lg bg-gradient-to-br from-brand-500 to-brand-600 flex items-center justify-center">
                   <ListIcon className="size-5 text-white" />
                 </div>
-                <div className="text-sm font-bold text-blue-900 dark:text-blue-100">Keywords</div>
+                <div className="text-sm font-bold text-brand-900 dark:text-brand-100">Keywords</div>
               </div>
               {(() => {
                 const res = getStageResult(1);
                 const total = res?.total ?? pipelineOverview[0]?.counts?.total ?? metrics?.keywords?.total ?? pipelineOverview[0]?.pending ?? 0;
                 return (
                   <div className="text-right">
-                    <div className="text-3xl font-bold text-blue-900">{total}</div>
+                    <div className="text-3xl font-bold text-brand-900">{total}</div>
                   </div>
                 );
               })()}
@@ -549,8 +549,8 @@ const AutomationPage: React.FC = () => {
               const mapped = res?.mapped ?? pipelineOverview[0]?.counts?.mapped ?? metrics?.keywords?.mapped ?? 0;
               return (
                 renderMetricRow([
-                  { label: 'New:', value: newCount, colorCls: 'text-blue-700' },
-                  { label: 'Mapped:', value: mapped, colorCls: 'text-blue-700' },
+                  { label: 'New:', value: newCount, colorCls: 'text-brand-700' },
+                  { label: 'Mapped:', value: mapped, colorCls: 'text-brand-700' },
                 ])
               );
             })()}
@@ -589,20 +589,20 @@ const AutomationPage: React.FC = () => {
           </div>
 
           {/* Ideas */}
-          <div className="bg-gradient-to-br from-indigo-50 to-indigo-100 dark:from-indigo-900/20 dark:to-indigo-800/20 rounded-xl p-4 border-2 border-indigo-200 dark:border-indigo-800">
+          <div className="bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/20 rounded-xl p-4 border-2 border-purple-200 dark:border-purple-800">
             <div className="flex items-center justify-between mb-3">
               <div className="flex items-center gap-3">
-                <div className="size-10 rounded-lg bg-gradient-to-br from-indigo-500 to-indigo-600 flex items-center justify-center">
+                <div className="size-10 rounded-lg bg-gradient-to-br from-purple-500 to-purple-600 flex items-center justify-center">
                   <CheckCircleIcon className="size-5 text-white" />
                 </div>
-                <div className="text-sm font-bold text-indigo-900 dark:text-indigo-100">Ideas</div>
+                <div className="text-sm font-bold text-purple-900 dark:text-purple-100">Ideas</div>
               </div>
               {(() => {
                 const res = getStageResult(3);
                 const total = res?.total ?? pipelineOverview[2]?.counts?.total ?? metrics?.ideas?.total ?? pipelineOverview[2]?.pending ?? 0;
                 return (
                   <div className="text-right">
-                    <div className="text-3xl font-bold text-indigo-900">{total}</div>
+                    <div className="text-3xl font-bold text-purple-900">{total}</div>
                   </div>
                 );
               })()}
@@ -614,29 +614,29 @@ const AutomationPage: React.FC = () => {
               const completed = res?.completed ?? pipelineOverview[2]?.counts?.completed ?? metrics?.ideas?.completed ?? 0;
               return (
                 renderMetricRow([
-                  { label: 'New:', value: newCount, colorCls: 'text-indigo-700' },
-                  { label: 'Queued:', value: queued, colorCls: 'text-indigo-700' },
-                  { label: 'Completed:', value: completed, colorCls: 'text-indigo-700' },
+                  { label: 'New:', value: newCount, colorCls: 'text-purple-700' },
+                  { label: 'Queued:', value: queued, colorCls: 'text-purple-700' },
+                  { label: 'Completed:', value: completed, colorCls: 'text-purple-700' },
                 ])
               );
             })()}
           </div>
 
           {/* Content */}
-          <div className="bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/20 rounded-xl p-4 border-2 border-green-200 dark:border-green-800">
+          <div className="bg-gradient-to-br from-success-50 to-success-100 dark:from-success-900/20 dark:to-success-800/20 rounded-xl p-4 border-2 border-success-200 dark:border-success-800">
             <div className="flex items-center justify-between mb-3">
               <div className="flex items-center gap-3">
-                <div className="size-10 rounded-lg bg-gradient-to-br from-green-500 to-green-600 flex items-center justify-center">
+                <div className="size-10 rounded-lg bg-gradient-to-br from-success-500 to-success-600 flex items-center justify-center">
                   <FileTextIcon className="size-5 text-white" />
                 </div>
-                <div className="text-sm font-bold text-green-900 dark:text-green-100">Content</div>
+                <div className="text-sm font-bold text-success-900 dark:text-success-100">Content</div>
               </div>
               {(() => {
                 const res = getStageResult(4);
                 const total = res?.total ?? pipelineOverview[3]?.counts?.total ?? metrics?.content?.total ?? pipelineOverview[3]?.pending ?? 0;
                 return (
                   <div className="text-right">
-                      <div className="text-3xl font-bold text-green-900">{total}</div>
+                      <div className="text-3xl font-bold text-success-900">{total}</div>
                     </div>
                 );
               })()}
@@ -648,29 +648,29 @@ const AutomationPage: React.FC = () => {
               const publish = res?.published ?? res?.publish ?? pipelineOverview[3]?.counts?.published ?? metrics?.content?.published ?? 0;
               return (
                   renderMetricRow([
-                    { label: 'Draft:', value: draft, colorCls: 'text-green-700' },
-                    { label: 'Review:', value: review, colorCls: 'text-green-700' },
-                    { label: 'Publish:', value: publish, colorCls: 'text-green-700' },
+                    { label: 'Draft:', value: draft, colorCls: 'text-success-700' },
+                    { label: 'Review:', value: review, colorCls: 'text-success-700' },
+                    { label: 'Publish:', value: publish, colorCls: 'text-success-700' },
                   ])
               );
             })()}
           </div>
 
           {/* Images */}
-          <div className="bg-gradient-to-br from-pink-50 to-pink-100 dark:from-pink-900/20 dark:to-pink-800/20 rounded-xl p-4 border-2 border-pink-200 dark:border-pink-800">
+          <div className="bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/20 rounded-xl p-4 border-2 border-purple-200 dark:border-purple-800">
             <div className="flex items-center justify-between mb-3">
               <div className="flex items-center gap-3">
-                <div className="size-10 rounded-lg bg-gradient-to-br from-pink-500 to-pink-600 flex items-center justify-center">
+                <div className="size-10 rounded-lg bg-gradient-to-br from-purple-500 to-purple-600 flex items-center justify-center">
                   <FileIcon className="size-5 text-white" />
                 </div>
-                <div className="text-sm font-bold text-pink-900 dark:text-pink-100">Images</div>
+                <div className="text-sm font-bold text-purple-900 dark:text-purple-100">Images</div>
               </div>
               {(() => {
                 const res = getStageResult(6);
                 const total = res?.total ?? pipelineOverview[5]?.counts?.total ?? metrics?.images?.total ?? pipelineOverview[5]?.pending ?? 0;
                 return (
                   <div className="text-right">
-                    <div className="text-3xl font-bold text-pink-900">{total}</div>
+                    <div className="text-3xl font-bold text-purple-900">{total}</div>
                   </div>
                 );
               })()}
@@ -679,17 +679,17 @@ const AutomationPage: React.FC = () => {
               const res = getStageResult(6); // stage 6 is Image Prompts -> Images
               if (res && typeof res === 'object') {
                 const entries = Object.entries(res);
-                const items = entries.slice(0,3).map(([k, v]) => ({ label: `${k.replace(/_/g, ' ')}:`, value: Number(v) || 0, colorCls: 'text-pink-700' }));
+                const items = entries.slice(0,3).map(([k, v]) => ({ label: `${k.replace(/_/g, ' ')}:`, value: Number(v) || 0, colorCls: 'text-purple-700' }));
                 return renderMetricRow(items);
               }
               const counts = pipelineOverview[5]?.counts ?? metrics?.images ?? null;
               if (counts && typeof counts === 'object') {
                 const entries = Object.entries(counts);
-                const items = entries.slice(0,3).map(([k, v]) => ({ label: `${k.replace(/_/g, ' ')}:`, value: Number(v) || 0, colorCls: 'text-pink-700' }));
+                const items = entries.slice(0,3).map(([k, v]) => ({ label: `${k.replace(/_/g, ' ')}:`, value: Number(v) || 0, colorCls: 'text-purple-700' }));
                 return renderMetricRow(items);
               }
               return renderMetricRow([
-                { label: 'Pending:', value: pipelineOverview[5]?.pending ?? metrics?.images?.pending ?? 0, colorCls: 'text-pink-700' },
+                { label: 'Pending:', value: pipelineOverview[5]?.pending ?? metrics?.images?.pending ?? 0, colorCls: 'text-purple-700' },
               ]);
             })()}
           </div>
@@ -772,12 +772,12 @@ const AutomationPage: React.FC = () => {
                   className={`
                     relative rounded-xl border-2 p-5 transition-all
                     ${isActive 
-                      ? 'border-blue-500 bg-blue-50 dark:bg-blue-500/10 shadow-lg' 
+                      ? 'border-brand-500 bg-brand-50 dark:bg-brand-500/10 shadow-lg' 
                       : isComplete
                       ? 'border-success-500 bg-success-50 dark:bg-success-500/10'
                       : stage.pending > 0
-                      ? `border-slate-200 bg-white dark:bg-white/[0.03] dark:border-gray-800 ${stageConfig.hoverColor} hover:shadow-lg`
-                      : 'border-slate-200 bg-slate-50 dark:bg-white/[0.02] dark:border-gray-800'
+                      ? `border-gray-200 bg-white dark:bg-white/[0.03] dark:border-gray-800 ${stageConfig.hoverColor} hover:shadow-lg`
+                      : 'border-gray-200 bg-gray-50 dark:bg-white/[0.02] dark:border-gray-800'
                     }
                   `}
                 >
@@ -786,7 +786,7 @@ const AutomationPage: React.FC = () => {
                     <div className="flex-1">
                       <div className="flex items-center gap-2 mb-1">
                         <div className="text-sm font-bold text-gray-900 dark:text-white">Stage {stage.number}</div>
-                        {isActive && <span className="text-xs px-2 py-0.5 bg-blue-500 text-white rounded-full">● Active</span>}
+                        {isActive && <span className="text-xs px-2 py-0.5 bg-brand-500 text-white rounded-full">● Active</span>}
                         {isComplete && <span className="text-xs px-2 py-0.5 bg-success-500 text-white rounded-full">✓</span>}
                         {!isActive && !isComplete && stage.pending > 0 && <span className="text-xs px-2 py-0.5 bg-gray-400 text-white rounded-full">Ready</span>}
                       </div>
@@ -804,21 +804,21 @@ const AutomationPage: React.FC = () => {
                   <div className="space-y-1.5 text-xs mb-3">
                     <div className="flex justify-between">
                       <span className="text-gray-600 dark:text-gray-400">Pending:</span>
-                      <span className={`font-bold ${pending > 0 ? stageConfig.textColor : 'text-slate-400 dark:text-gray-500'}`}>
+                      <span className={`font-bold ${pending > 0 ? stageConfig.textColor : 'text-gray-400 dark:text-gray-500'}`}>
                         {pending}
                       </span>
                     </div>
                     <div className="flex justify-between">
                       <span className="text-gray-600 dark:text-gray-400">Processed:</span>
-                      <span className={`font-bold ${processed > 0 ? 'text-success-600 dark:text-success-400' : 'text-slate-400 dark:text-gray-500'}`}>
+                      <span className={`font-bold ${processed > 0 ? 'text-success-600 dark:text-success-400' : 'text-gray-400 dark:text-gray-500'}`}>
                         {processed}
                       </span>
                     </div>
                     {/* Credits and Duration - only show during/after run */}
                     {result && (result.credits_used > 0 || result.time_elapsed) && (
-                      <div className="flex justify-between pt-1.5 border-t border-slate-200 dark:border-gray-700 text-[10px]">
+                      <div className="flex justify-between pt-1.5 border-t border-gray-200 dark:border-gray-700 text-[10px]">
                         {result.credits_used > 0 && (
-                          <span className="text-amber-600 dark:text-amber-400">{result.credits_used} credits</span>
+                          <span className="text-warning-600 dark:text-warning-400">{result.credits_used} credits</span>
                         )}
                         {result.time_elapsed && (
                           <span className="text-gray-500 dark:text-gray-400">{result.time_elapsed}</span>
@@ -829,7 +829,7 @@ const AutomationPage: React.FC = () => {
 
                   {/* Progress Bar */}
                   {(isActive || isComplete || processed > 0) && (
-                    <div className="mt-3 pt-3 border-t border-slate-200 dark:border-gray-700">
+                    <div className="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
                       <div className="flex justify-between text-xs text-gray-600 dark:text-gray-400 mb-1.5">
                         <span>Progress</span>
                         <span>{isComplete ? '100' : progressPercent}%</span>
@@ -885,12 +885,12 @@ const AutomationPage: React.FC = () => {
                   className={`
                     relative rounded-xl border-2 p-5 transition-all
                     ${isActive 
-                      ? 'border-blue-500 bg-blue-50 dark:bg-blue-500/10 shadow-lg' 
+                      ? 'border-brand-500 bg-brand-50 dark:bg-brand-500/10 shadow-lg' 
                       : isComplete
                       ? 'border-success-500 bg-success-50 dark:bg-success-500/10'
                       : stage.pending > 0
-                      ? `border-slate-200 bg-white dark:bg-white/[0.03] dark:border-gray-800 ${stageConfig.hoverColor} hover:shadow-lg`
-                      : 'border-slate-200 bg-slate-50 dark:bg-white/[0.02] dark:border-gray-800'
+                      ? `border-gray-200 bg-white dark:bg-white/[0.03] dark:border-gray-800 ${stageConfig.hoverColor} hover:shadow-lg`
+                      : 'border-gray-200 bg-gray-50 dark:bg-white/[0.02] dark:border-gray-800'
                     }
                   `}
                 >
@@ -898,7 +898,7 @@ const AutomationPage: React.FC = () => {
                     <div className="flex-1">
                       <div className="flex items-center gap-2 mb-1">
                         <div className="text-sm font-bold text-gray-900 dark:text-white">Stage {stage.number}</div>
-                        {isActive && <span className="text-xs px-2 py-0.5 bg-blue-500 text-white rounded-full">● Active</span>}
+                        {isActive && <span className="text-xs px-2 py-0.5 bg-brand-500 text-white rounded-full">● Active</span>}
                         {isComplete && <span className="text-xs px-2 py-0.5 bg-success-500 text-white rounded-full">✓</span>}
                         {!isActive && !isComplete && stage.pending > 0 && <span className="text-xs px-2 py-0.5 bg-gray-400 text-white rounded-full">Ready</span>}
                       </div>
@@ -916,21 +916,21 @@ const AutomationPage: React.FC = () => {
                   <div className="space-y-1.5 text-xs mb-3">
                     <div className="flex justify-between">
                       <span className="text-gray-600 dark:text-gray-400">Pending:</span>
-                      <span className={`font-bold ${pending > 0 ? stageConfig.textColor : 'text-slate-400 dark:text-gray-500'}`}>
+                      <span className={`font-bold ${pending > 0 ? stageConfig.textColor : 'text-gray-400 dark:text-gray-500'}`}>
                         {pending}
                       </span>
                     </div>
                     <div className="flex justify-between">
                       <span className="text-gray-600 dark:text-gray-400">Processed:</span>
-                      <span className={`font-bold ${processed > 0 ? 'text-success-600 dark:text-success-400' : 'text-slate-400 dark:text-gray-500'}`}>
+                      <span className={`font-bold ${processed > 0 ? 'text-success-600 dark:text-success-400' : 'text-gray-400 dark:text-gray-500'}`}>
                         {processed}
                       </span>
                     </div>
                     {/* Credits and Duration - only show during/after run */}
                     {result && (result.credits_used > 0 || result.time_elapsed) && (
-                      <div className="flex justify-between pt-1.5 border-t border-slate-200 dark:border-gray-700 text-[10px]">
+                      <div className="flex justify-between pt-1.5 border-t border-gray-200 dark:border-gray-700 text-[10px]">
                         {result.credits_used > 0 && (
-                          <span className="text-amber-600 dark:text-amber-400">{result.credits_used} credits</span>
+                          <span className="text-warning-600 dark:text-warning-400">{result.credits_used} credits</span>
                         )}
                         {result.time_elapsed && (
                           <span className="text-gray-500 dark:text-gray-400">{result.time_elapsed}</span>
@@ -940,7 +940,7 @@ const AutomationPage: React.FC = () => {
                   </div>
 
                   {(isActive || isComplete || processed > 0) && (
-                    <div className="mt-3 pt-3 border-t border-slate-200 dark:border-gray-700">
+                    <div className="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
                       <div className="flex justify-between text-xs text-gray-600 dark:text-gray-400 mb-1.5">
                         <span>Progress</span>
                         <span>{isComplete ? '100' : progressPercent}%</span>
@@ -968,12 +968,12 @@ const AutomationPage: React.FC = () => {
                   className={`
                     relative rounded-xl border-3 p-5 transition-all
                     ${isActive 
-                      ? 'border-amber-500 bg-amber-50 dark:bg-amber-500/10 shadow-lg' 
+                      ? 'border-warning-500 bg-warning-50 dark:bg-warning-500/10 shadow-lg' 
                       : isComplete
                       ? 'border-success-500 bg-success-50 dark:bg-success-500/10'
                       : stage7.pending > 0
-                      ? 'border-amber-300 bg-amber-50 dark:bg-amber-900/20 dark:border-amber-700'
-                      : 'border-slate-200 bg-slate-50 dark:bg-white/[0.02] dark:border-gray-800'
+                      ? 'border-warning-300 bg-warning-50 dark:bg-warning-900/20 dark:border-warning-700'
+                      : 'border-gray-200 bg-gray-50 dark:bg-white/[0.02] dark:border-gray-800'
                     }
                   `}
                 >
@@ -981,37 +981,37 @@ const AutomationPage: React.FC = () => {
                     <div className="flex-1">
                       <div className="flex items-center gap-2 mb-1">
                         <div className="text-sm font-bold text-gray-900 dark:text-white">Stage 7</div>
-                        <span className="text-xs px-2 py-0.5 bg-amber-500 text-white rounded-full">🚫 Stop</span>
+                        <span className="text-xs px-2 py-0.5 bg-warning-500 text-white rounded-full">🚫 Stop</span>
                       </div>
-                      <div className="text-xs font-medium text-amber-700 dark:text-amber-300">Manual Review Gate</div>
+                      <div className="text-xs font-medium text-warning-700 dark:text-warning-300">Manual Review Gate</div>
                     </div>
-                    <div className="size-8 rounded-lg bg-gradient-to-br from-amber-500 to-amber-600 flex items-center justify-center shadow-md">
+                    <div className="size-8 rounded-lg bg-gradient-to-br from-warning-500 to-warning-600 flex items-center justify-center shadow-md">
                       <PaperPlaneIcon className="size-4 text-white" />
                     </div>
                   </div>
                   
                   {/* Simplified: Just show the count, no buttons */}
                   <div className="text-center py-4">
-                    <div className="text-3xl font-bold text-amber-600 dark:text-amber-400">{stage7.pending}</div>
-                    <div className="text-xs text-amber-700 dark:text-amber-300 mt-1">ready for review</div>
+                    <div className="text-3xl font-bold text-warning-600 dark:text-warning-400">{stage7.pending}</div>
+                    <div className="text-xs text-warning-700 dark:text-warning-300 mt-1">ready for review</div>
                   </div>
                 </div>
               );
             })()}
 
               {/* Approved summary card (placed after Stage 7 in the same row) */}
-              <div className="rounded-xl p-5 border-2 border-green-200 bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/10 dark:to-green-800/10 flex flex-col h-full">
+              <div className="rounded-xl p-5 border-2 border-success-200 bg-gradient-to-br from-success-50 to-success-100 dark:from-success-900/10 dark:to-success-800/10 flex flex-col h-full">
                 <div className="flex items-center justify-between mb-3">
                   <div className="flex items-center gap-3">
-                    <div className="size-10 rounded-lg bg-gradient-to-br from-green-500 to-green-600 flex items-center justify-center">
+                    <div className="size-10 rounded-lg bg-gradient-to-br from-success-500 to-success-600 flex items-center justify-center">
                       <FileTextIcon className="size-5 text-white" />
                     </div>
-                    <div className="text-sm font-bold text-green-900 dark:text-green-100">Approved</div>
+                    <div className="text-sm font-bold text-success-900 dark:text-success-100">Approved</div>
                   </div>
                   <div className="text-right">&nbsp;</div>
                 </div>
                 <div className="flex-1 flex items-center justify-center">
-                  <div className="text-4xl md:text-5xl font-extrabold text-green-800 dark:text-green-300">{metrics?.content?.published ?? pipelineOverview[3]?.counts?.published ?? getStageResult(4)?.published ?? 0}</div>
+                  <div className="text-4xl md:text-5xl font-extrabold text-success-800 dark:text-success-300">{metrics?.content?.published ?? pipelineOverview[3]?.counts?.published ?? getStageResult(4)?.published ?? 0}</div>
                 </div>
               </div>
 
diff --git a/frontend/src/pages/Automation/AutomationPage_old.tsx b/frontend/src/pages/Automation/AutomationPage_old.tsx
index 568109d1..e1907bfd 100644
--- a/frontend/src/pages/Automation/AutomationPage_old.tsx
+++ b/frontend/src/pages/Automation/AutomationPage_old.tsx
@@ -221,7 +221,7 @@ const AutomationPage: React.FC = () => {
                 <div className="text-sm text-gray-600 dark:text-gray-400">Status</div>
                 <div className="font-semibold mt-1">
                   {config.is_enabled ? (
-                    <span className="text-green-600 dark:text-green-400">● Enabled</span>
+                    <span className="text-success-600 dark:text-success-400">● Enabled</span>
                   ) : (
                     <span className="text-gray-600 dark:text-gray-400">○ Disabled</span>
                   )}
@@ -246,7 +246,7 @@ const AutomationPage: React.FC = () => {
                 <div className="font-semibold mt-1">
                   {estimate?.estimated_credits || 0} credits
                   {estimate && !estimate.sufficient && (
-                    <span className="text-red-600 dark:text-red-400 ml-2">(Insufficient)</span>
+                    <span className="text-error-600 dark:text-error-400 ml-2">(Insufficient)</span>
                   )}
                 </div>
               </div>
@@ -301,7 +301,7 @@ const AutomationPage: React.FC = () => {
             <div className="text-sm text-gray-600 dark:text-gray-400">
               {currentRun ? (
                 <>
-                  <span className="font-semibold text-blue-600 dark:text-blue-400">● Live Run Active</span> - Stage {currentRun.current_stage} of 7
+                  <span className="font-semibold text-brand-600 dark:text-brand-400">● Live Run Active</span> - Stage {currentRun.current_stage} of 7
                 </>
               ) : (
                 <>
@@ -339,10 +339,10 @@ const AutomationPage: React.FC = () => {
               <div>
                 <div className="text-sm text-gray-600 dark:text-gray-400">Status</div>
                 <div className="font-semibold mt-1 capitalize">
-                  {currentRun.status === 'running' && <span className="text-blue-600 dark:text-blue-400">● {currentRun.status}</span>}
-                  {currentRun.status === 'paused' && <span className="text-yellow-600 dark:text-yellow-400">⏸ {currentRun.status}</span>}
-                  {currentRun.status === 'completed' && <span className="text-green-600 dark:text-green-400">✓ {currentRun.status}</span>}
-                  {currentRun.status === 'failed' && <span className="text-red-600 dark:text-red-400">✗ {currentRun.status}</span>}
+                  {currentRun.status === 'running' && <span className="text-brand-600 dark:text-brand-400">● {currentRun.status}</span>}
+                  {currentRun.status === 'paused' && <span className="text-warning-600 dark:text-warning-400">⏸ {currentRun.status}</span>}
+                  {currentRun.status === 'completed' && <span className="text-success-600 dark:text-success-400">✓ {currentRun.status}</span>}
+                  {currentRun.status === 'failed' && <span className="text-error-600 dark:text-error-400">✗ {currentRun.status}</span>}
                 </div>
               </div>
               <div>
diff --git a/frontend/src/pages/Billing/Credits.tsx b/frontend/src/pages/Billing/Credits.tsx
index 415afcbf..d6e5c02b 100644
--- a/frontend/src/pages/Billing/Credits.tsx
+++ b/frontend/src/pages/Billing/Credits.tsx
@@ -112,8 +112,8 @@ export default function Credits() {
               { name: 'Multiple Formats', desc: 'Pages, articles, product content' },
             ].map((feature) => (
               <div key={feature.name} className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
-                <div className="w-5 h-5 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center flex-shrink-0 mt-0.5">
-                  <svg className="w-3 h-3 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <div className="w-5 h-5 rounded-full bg-success-100 dark:bg-success-900 flex items-center justify-center flex-shrink-0 mt-0.5">
+                  <svg className="w-3 h-3 text-success-600 dark:text-success-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                   </svg>
                 </div>
diff --git a/frontend/src/pages/Billing/Transactions.tsx b/frontend/src/pages/Billing/Transactions.tsx
index 15288847..82b012c8 100644
--- a/frontend/src/pages/Billing/Transactions.tsx
+++ b/frontend/src/pages/Billing/Transactions.tsx
@@ -84,8 +84,8 @@ export default function Transactions() {
                     </td>
                     <td className={`py-3 px-4 text-sm font-medium ${
                       transaction.amount >= 0 
-                        ? 'text-green-600 dark:text-green-400' 
-                        : 'text-red-600 dark:text-red-400'
+                        ? 'text-success-600 dark:text-success-400' 
+                        : 'text-error-600 dark:text-error-400'
                     }`}>
                       {transaction.amount >= 0 ? '+' : ''}{transaction.amount.toLocaleString()}
                     </td>
diff --git a/frontend/src/pages/Billing/Usage.tsx b/frontend/src/pages/Billing/Usage.tsx
index ff1ba59f..0585394c 100644
--- a/frontend/src/pages/Billing/Usage.tsx
+++ b/frontend/src/pages/Billing/Usage.tsx
@@ -150,8 +150,8 @@ export default function Usage() {
                     </td>
                     <td className={`py-3 px-4 text-sm font-medium ${
                       txn.amount >= 0 
-                        ? 'text-green-600 dark:text-green-400' 
-                        : 'text-red-600 dark:text-red-400'
+                        ? 'text-success-600 dark:text-success-400' 
+                        : 'text-error-600 dark:text-error-400'
                     }`}>
                       {txn.amount >= 0 ? '+' : ''}{txn.amount}
                     </td>
diff --git a/frontend/src/pages/Components.tsx b/frontend/src/pages/Components.tsx
index d875b3e8..7331b5e4 100644
--- a/frontend/src/pages/Components.tsx
+++ b/frontend/src/pages/Components.tsx
@@ -424,7 +424,7 @@ function DropdownsShowcase() {
                 View
               </DropdownItem>
               <div className="my-2 border-t border-gray-200 dark:border-gray-800"></div>
-              <DropdownItem onItemClick={() => setDropdown3(false)} className="flex items-center gap-3 px-3 py-2 font-medium text-red-600 rounded-lg text-theme-sm hover:bg-red-50 hover:text-red-700 dark:text-red-400 dark:hover:bg-red-900/20 dark:hover:text-red-300">
+              <DropdownItem onItemClick={() => setDropdown3(false)} className="flex items-center gap-3 px-3 py-2 font-medium text-error-600 rounded-lg text-theme-sm hover:bg-error-50 hover:text-error-700 dark:text-error-400 dark:hover:bg-error-900/20 dark:hover:text-error-300">
                 <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                   <path fillRule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clipRule="evenodd" />
                 </svg>
diff --git a/frontend/src/pages/Help/Help.tsx b/frontend/src/pages/Help/Help.tsx
index 4730ed99..9e8a2024 100644
--- a/frontend/src/pages/Help/Help.tsx
+++ b/frontend/src/pages/Help/Help.tsx
@@ -311,7 +311,7 @@ export default function Help() {
                   </div>
 
                   <div className="flex gap-4">
-                    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-green-500 text-white flex items-center justify-center font-bold">
+                    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-success-500 text-white flex items-center justify-center font-bold">
                       7
                     </div>
                     <div className="flex-1">
@@ -332,9 +332,9 @@ export default function Help() {
                 </p>
                 
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                  <Card className="p-4 border-l-4 border-blue-500">
+                  <Card className="p-4 border-l-4 border-brand-500">
                     <h4 className="font-semibold text-gray-900 dark:text-white mb-2 flex items-center gap-2">
-                      <ListIcon className="size-5 text-blue-500" />
+                      <ListIcon className="size-5 text-brand-500" />
                       Planner Module
                     </h4>
                     <p className="text-sm text-gray-600 dark:text-gray-400">
@@ -342,9 +342,9 @@ export default function Help() {
                     </p>
                   </Card>
 
-                  <Card className="p-4 border-l-4 border-green-500">
+                  <Card className="p-4 border-l-4 border-success-500">
                     <h4 className="font-semibold text-gray-900 dark:text-white mb-2 flex items-center gap-2">
-                      <FileIcon className="size-5 text-green-500" />
+                      <FileIcon className="size-5 text-success-500" />
                       Writer Module
                     </h4>
                     <p className="text-sm text-gray-600 dark:text-gray-400">
@@ -353,8 +353,8 @@ export default function Help() {
                   </Card>
                 </div>
 
-                <div className="bg-blue-50 dark:bg-blue-900/10 p-4 rounded-lg border border-blue-200 dark:border-blue-800">
-                  <p className="text-sm text-blue-800 dark:text-blue-300">
+                <div className="bg-brand-50 dark:bg-brand-900/10 p-4 rounded-lg border border-brand-200 dark:border-brand-800">
+                  <p className="text-sm text-brand-800 dark:text-brand-300">
                       <strong>Tip:</strong> You can automate most of this workflow! Go to Dashboard &gt; Automation Setup to configure automatic processing.
                   </p>
                 </div>
@@ -393,7 +393,7 @@ export default function Help() {
                 </p>
               </div>
 
-              <div className="border-l-4 border-green-500 pl-4">
+              <div className="border-l-4 border-success-500 pl-4">
                 <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Setup Checklist</h4>
                 <p className="text-sm text-gray-600 dark:text-gray-400">
                   Track your setup progress. Complete all items to start creating content efficiently.
@@ -406,7 +406,7 @@ export default function Help() {
         {/* Setup Module Section */}
         <div ref={(el) => (sectionRefs.current["setup"] = el)} className="mb-12 scroll-mt-24">
           <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-3">
-            <CheckCircleIcon className="size-8 text-green-600 dark:text-green-400" />
+            <CheckCircleIcon className="size-8 text-success-600 dark:text-success-400" />
             Setup Module
           </h2>
 
@@ -430,8 +430,8 @@ export default function Help() {
                   </ol>
                 </div>
 
-                <div className="bg-blue-50 dark:bg-blue-900/10 p-4 rounded-lg border border-blue-200 dark:border-blue-800">
-                  <p className="text-sm text-blue-800 dark:text-blue-300">
+                <div className="bg-brand-50 dark:bg-brand-900/10 p-4 rounded-lg border border-brand-200 dark:border-brand-800">
+                  <p className="text-sm text-brand-800 dark:text-brand-300">
                     <strong>Tip:</strong> Start with 10-20 keywords to test your workflow. Mix high and low difficulty keywords for variety.
                   </p>
                 </div>
@@ -445,7 +445,7 @@ export default function Help() {
                 </p>
                 
                 <div className="space-y-3">
-                  <div className="border-l-4 border-blue-500 pl-4">
+                  <div className="border-l-4 border-brand-500 pl-4">
                     <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Content Generation Tab</h4>
                     <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
                       <li><strong>Default Tone:</strong> Professional, Casual, Friendly, etc.</li>
@@ -454,7 +454,7 @@ export default function Help() {
                     </ul>
                   </div>
 
-                  <div className="border-l-4 border-green-500 pl-4">
+                  <div className="border-l-4 border-success-500 pl-4">
                     <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Publishing Tab</h4>
                     <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
                       <li><strong>Auto-Publish:</strong> Automatically publish approved content</li>
@@ -493,7 +493,7 @@ export default function Help() {
 
                 <div className="space-y-3 mt-4">
                   <div className="flex items-start gap-3">
-                    <CheckCircleIcon className="size-5 text-green-500 mt-0.5 flex-shrink-0" />
+                    <CheckCircleIcon className="size-5 text-success-500 mt-0.5 flex-shrink-0" />
                     <div>
                       <h4 className="font-semibold text-gray-900 dark:text-white">Site Dashboard</h4>
                       <p className="text-sm text-gray-600 dark:text-gray-400">
@@ -503,7 +503,7 @@ export default function Help() {
                   </div>
 
                   <div className="flex items-start gap-3">
-                    <CheckCircleIcon className="size-5 text-green-500 mt-0.5 flex-shrink-0" />
+                    <CheckCircleIcon className="size-5 text-success-500 mt-0.5 flex-shrink-0" />
                     <div>
                       <h4 className="font-semibold text-gray-900 dark:text-white">WordPress Integration</h4>
                       <p className="text-sm text-gray-600 dark:text-gray-400">
@@ -520,7 +520,7 @@ export default function Help() {
         {/* Planner Module Section */}
         <div ref={(el) => (sectionRefs.current["planner-module"] = el)} className="mb-12 scroll-mt-24">
           <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-3">
-            <ListIcon className="size-8 text-blue-600 dark:text-blue-400" />
+            <ListIcon className="size-8 text-brand-600 dark:text-brand-400" />
             Planner Module
           </h2>
 
@@ -533,7 +533,7 @@ export default function Help() {
                 
                 <div className="space-y-3">
                   <div className="flex items-start gap-3">
-                    <CheckCircleIcon className="size-5 text-green-500 mt-0.5 flex-shrink-0" />
+                    <CheckCircleIcon className="size-5 text-success-500 mt-0.5 flex-shrink-0" />
                     <div>
                       <h4 className="font-semibold text-gray-900 dark:text-white">Adding Keywords</h4>
                       <p className="text-sm text-gray-600 dark:text-gray-400">
@@ -543,7 +543,7 @@ export default function Help() {
                   </div>
 
                   <div className="flex items-start gap-3">
-                    <CheckCircleIcon className="size-5 text-green-500 mt-0.5 flex-shrink-0" />
+                    <CheckCircleIcon className="size-5 text-success-500 mt-0.5 flex-shrink-0" />
                     <div>
                       <h4 className="font-semibold text-gray-900 dark:text-white">Organizing Keywords</h4>
                       <p className="text-sm text-gray-600 dark:text-gray-400">
@@ -553,7 +553,7 @@ export default function Help() {
                   </div>
 
                   <div className="flex items-start gap-3">
-                    <CheckCircleIcon className="size-5 text-green-500 mt-0.5 flex-shrink-0" />
+                    <CheckCircleIcon className="size-5 text-success-500 mt-0.5 flex-shrink-0" />
                     <div>
                       <h4 className="font-semibold text-gray-900 dark:text-white">Keyword Data</h4>
                       <p className="text-sm text-gray-600 dark:text-gray-400">
@@ -600,7 +600,7 @@ export default function Help() {
         {/* Writer Module Section */}
         <div ref={(el) => (sectionRefs.current["writer-module"] = el)} className="mb-12 scroll-mt-24">
           <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-3">
-            <FileIcon className="size-8 text-green-600 dark:text-green-400" />
+            <FileIcon className="size-8 text-success-600 dark:text-success-400" />
             Writer Module
           </h2>
 
@@ -684,7 +684,7 @@ export default function Help() {
         {/* Automation Section */}
         <div ref={(el) => (sectionRefs.current["automation"] = el)} className="mb-12 scroll-mt-24">
           <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-3">
-            <BoltIcon className="size-8 text-orange-600 dark:text-orange-400" />
+            <BoltIcon className="size-8 text-warning-600 dark:text-warning-400" />
             Automation Setup
           </h2>
 
@@ -694,7 +694,7 @@ export default function Help() {
             </p>
             
             <div className="space-y-4">
-              <div className="border-l-4 border-blue-500 pl-4">
+              <div className="border-l-4 border-brand-500 pl-4">
                 <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Keywords Automation</h4>
                 <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
                   Automatically add keywords from opportunities and cluster them:
@@ -706,7 +706,7 @@ export default function Help() {
                 </ul>
               </div>
 
-              <div className="border-l-4 border-orange-500 pl-4">
+              <div className="border-l-4 border-warning-500 pl-4">
                 <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Ideas Automation</h4>
                 <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
                   Automatically generate content ideas from clusters:
@@ -717,7 +717,7 @@ export default function Help() {
                 </ul>
               </div>
 
-              <div className="border-l-4 border-green-500 pl-4">
+              <div className="border-l-4 border-success-500 pl-4">
                 <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Content Automation</h4>
                 <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
                   Automatically create tasks and generate content:
@@ -751,7 +751,7 @@ export default function Help() {
         {/* Account & Billing Section */}
         <div ref={(el) => (sectionRefs.current["account"] = el)} className="mb-12 scroll-mt-24">
           <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-3">
-            <GroupIcon className="size-8 text-indigo-600 dark:text-indigo-400" />
+            <GroupIcon className="size-8 text-purple-600 dark:text-purple-400" />
             Account & Billing
           </h2>
 
@@ -763,7 +763,7 @@ export default function Help() {
                 </p>
                 
                 <div className="space-y-3">
-                  <div className="border-l-4 border-blue-500 pl-4">
+                  <div className="border-l-4 border-brand-500 pl-4">
                     <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Account Tab</h4>
                     <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
                       <li>Organization name and billing email</li>
@@ -772,7 +772,7 @@ export default function Help() {
                     </ul>
                   </div>
 
-                  <div className="border-l-4 border-green-500 pl-4">
+                  <div className="border-l-4 border-success-500 pl-4">
                     <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Profile Tab</h4>
                     <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
                       <li>Personal information (name, email, phone)</li>
@@ -822,7 +822,7 @@ export default function Help() {
                     </ul>
                   </div>
 
-                  <div className="border-l-4 border-green-500 pl-4">
+                  <div className="border-l-4 border-success-500 pl-4">
                     <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Upgrade Plan Tab</h4>
                     <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
                       <li>Compare available plans</li>
@@ -831,7 +831,7 @@ export default function Help() {
                     </ul>
                   </div>
 
-                  <div className="border-l-4 border-orange-500 pl-4">
+                  <div className="border-l-4 border-warning-500 pl-4">
                     <h4 className="font-semibold text-gray-900 dark:text-white mb-2">History Tab</h4>
                     <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
                       <li>Invoice history with PDF downloads</li>
@@ -850,7 +850,7 @@ export default function Help() {
                 </p>
                 
                 <div className="space-y-3">
-                  <div className="border-l-4 border-blue-500 pl-4">
+                  <div className="border-l-4 border-brand-500 pl-4">
                     <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Your Limits & Usage</h4>
                     <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
                       <li><strong>Hard Limits:</strong> Maximum allowed (sites, users, keywords)</li>
@@ -868,7 +868,7 @@ export default function Help() {
                     </ul>
                   </div>
 
-                  <div className="border-l-4 border-green-500 pl-4">
+                  <div className="border-l-4 border-success-500 pl-4">
                     <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Activity</h4>
                     <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
                       <li>Track operations by type</li>
@@ -878,8 +878,8 @@ export default function Help() {
                   </div>
                 </div>
 
-                <div className="bg-amber-50 dark:bg-amber-900/10 p-4 rounded-lg border border-amber-200 dark:border-amber-800 mt-4">
-                  <p className="text-sm text-amber-800 dark:text-amber-300">
+                <div className="bg-warning-50 dark:bg-warning-900/10 p-4 rounded-lg border border-warning-200 dark:border-warning-800 mt-4">
+                  <p className="text-sm text-warning-800 dark:text-warning-300">
                     <strong>Usage Alerts:</strong> You'll receive automatic alerts at 80%, 90%, and 100% of your limits.
                   </p>
                 </div>
diff --git a/frontend/src/pages/Linker/ContentList.tsx b/frontend/src/pages/Linker/ContentList.tsx
index 7a882884..741e21a0 100644
--- a/frontend/src/pages/Linker/ContentList.tsx
+++ b/frontend/src/pages/Linker/ContentList.tsx
@@ -111,7 +111,7 @@ export default function LinkerContentList() {
 
         {loading ? (
           <div className="text-center py-12">
-            <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
+            <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-brand-500"></div>
             <p className="mt-2 text-gray-600 dark:text-gray-400">Loading content...</p>
           </div>
         ) : (
@@ -157,7 +157,7 @@ export default function LinkerContentList() {
                         </td>
                         <td className="px-6 py-4 whitespace-nowrap text-sm">
                           {item.cluster_name ? (
-                            <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
+                            <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-brand-100 text-brand-800 dark:bg-brand-900 dark:text-brand-200">
                               {item.cluster_name}
                             </span>
                           ) : (
@@ -174,7 +174,7 @@ export default function LinkerContentList() {
                           <button
                             onClick={() => handleLink(item.id)}
                             disabled={isProcessing || processing === -1}
-                            className="inline-flex items-center gap-2 px-3 py-1.5 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                            className="inline-flex items-center gap-2 px-3 py-1.5 bg-brand-500 text-white rounded hover:bg-brand-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                           >
                             {isProcessing ? (
                               <>
diff --git a/frontend/src/pages/Linker/Dashboard.tsx b/frontend/src/pages/Linker/Dashboard.tsx
index ce43d86d..95fc0e7b 100644
--- a/frontend/src/pages/Linker/Dashboard.tsx
+++ b/frontend/src/pages/Linker/Dashboard.tsx
@@ -78,7 +78,7 @@ export default function LinkerDashboard() {
           />
           <Link
             to="/linker/content"
-            className="inline-flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
+            className="inline-flex items-center gap-2 px-4 py-2 bg-brand-500 text-white rounded-lg hover:bg-brand-600 transition-colors"
           >
             <PlugInIcon />
             View Content
@@ -90,7 +90,7 @@ export default function LinkerDashboard() {
 
         {loading ? (
           <div className="text-center py-12">
-            <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
+            <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-brand-500"></div>
             <p className="mt-2 text-gray-600 dark:text-gray-400">Loading stats...</p>
           </div>
         ) : stats ? (
@@ -133,7 +133,7 @@ export default function LinkerDashboard() {
                   className="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
                 >
                   <div className="flex items-center gap-3">
-                    <PlugInIcon className="w-5 h-5 text-blue-500" />
+                    <PlugInIcon className="w-5 h-5 text-brand-500" />
                     <div>
                       <h3 className="font-medium text-gray-900 dark:text-white">Link Content</h3>
                       <p className="text-sm text-gray-500 dark:text-gray-400">Process content for internal linking</p>
diff --git a/frontend/src/pages/Optimizer/AnalysisPreview.tsx b/frontend/src/pages/Optimizer/AnalysisPreview.tsx
index 3fc07a31..943002e7 100644
--- a/frontend/src/pages/Optimizer/AnalysisPreview.tsx
+++ b/frontend/src/pages/Optimizer/AnalysisPreview.tsx
@@ -86,7 +86,7 @@ export default function AnalysisPreview() {
 
         {loading || analyzing ? (
           <div className="text-center py-12">
-            <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mb-3"></div>
+            <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-brand-500 mb-3"></div>
             <p className="text-gray-600 dark:text-gray-400">
               {loading ? 'Loading content...' : 'Analyzing content...'}
             </p>
@@ -126,15 +126,15 @@ export default function AnalysisPreview() {
                 <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                   <div className={`p-4 rounded-lg border-2 ${
                     scores.has_cluster_mapping
-                      ? 'border-green-500 bg-green-50 dark:bg-green-900/20'
-                      : 'border-red-500 bg-red-50 dark:bg-red-900/20'
+                      ? 'border-success-500 bg-success-50 dark:bg-success-900/20'
+                      : 'border-error-500 bg-error-50 dark:bg-error-900/20'
                   }`}>
                     <div className="flex items-center justify-between mb-2">
                       <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Cluster Mapping</span>
                       {scores.has_cluster_mapping ? (
-                        <span className="text-green-600 dark:text-green-400">✓</span>
+                        <span className="text-success-600 dark:text-success-400">✓</span>
                       ) : (
-                        <span className="text-red-600 dark:text-red-400">✗</span>
+                        <span className="text-error-600 dark:text-error-400">✗</span>
                       )}
                     </div>
                     <div className="text-xs text-gray-600 dark:text-gray-400">
@@ -146,15 +146,15 @@ export default function AnalysisPreview() {
 
                   <div className={`p-4 rounded-lg border-2 ${
                     scores.has_taxonomy_mapping
-                      ? 'border-green-500 bg-green-50 dark:bg-green-900/20'
-                      : 'border-yellow-500 bg-yellow-50 dark:bg-yellow-900/20'
+                      ? 'border-success-500 bg-success-50 dark:bg-success-900/20'
+                      : 'border-warning-500 bg-warning-50 dark:bg-warning-900/20'
                   }`}>
                     <div className="flex items-center justify-between mb-2">
                       <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Taxonomy Mapping</span>
                       {scores.has_taxonomy_mapping ? (
-                        <span className="text-green-600 dark:text-green-400">✓</span>
+                        <span className="text-success-600 dark:text-success-400">✓</span>
                       ) : (
-                        <span className="text-yellow-600 dark:text-yellow-400">⚠</span>
+                        <span className="text-warning-600 dark:text-warning-400">⚠</span>
                       )}
                     </div>
                     <div className="text-xs text-gray-600 dark:text-gray-400">
@@ -166,15 +166,15 @@ export default function AnalysisPreview() {
 
                   <div className={`p-4 rounded-lg border-2 ${
                     scores.has_attributes
-                      ? 'border-green-500 bg-green-50 dark:bg-green-900/20'
-                      : 'border-yellow-500 bg-yellow-50 dark:bg-yellow-900/20'
+                      ? 'border-success-500 bg-success-50 dark:bg-success-900/20'
+                      : 'border-warning-500 bg-warning-50 dark:bg-warning-900/20'
                   }`}>
                     <div className="flex items-center justify-between mb-2">
                       <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Attributes</span>
                       {scores.has_attributes ? (
-                        <span className="text-green-600 dark:text-green-400">✓</span>
+                        <span className="text-success-600 dark:text-success-400">✓</span>
                       ) : (
-                        <span className="text-yellow-600 dark:text-yellow-400">⚠</span>
+                        <span className="text-warning-600 dark:text-warning-400">⚠</span>
                       )}
                     </div>
                     <div className="text-xs text-gray-600 dark:text-gray-400">
@@ -237,12 +237,12 @@ export default function AnalysisPreview() {
                 <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Recommended Actions</h3>
                 <div className="space-y-3">
                   {!scores.has_cluster_mapping && (
-                    <div className="p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+                    <div className="p-3 bg-brand-50 dark:bg-brand-900/20 border border-brand-200 dark:border-brand-800 rounded-lg">
                       <div className="flex items-start gap-2">
-                        <span className="text-blue-600 dark:text-blue-400 font-bold">1.</span>
+                        <span className="text-brand-600 dark:text-brand-400 font-bold">1.</span>
                         <div className="flex-1">
-                          <div className="font-medium text-blue-900 dark:text-blue-300">Map Content to Cluster</div>
-                          <div className="text-sm text-blue-700 dark:text-blue-400 mt-1">
+                          <div className="font-medium text-brand-900 dark:text-brand-300">Map Content to Cluster</div>
+                          <div className="text-sm text-brand-700 dark:text-brand-400 mt-1">
                             Assign this content to a keyword cluster to improve internal linking and SEO structure.
                           </div>
                         </div>
@@ -263,12 +263,12 @@ export default function AnalysisPreview() {
                     </div>
                   )}
                   {!scores.has_attributes && (content?.content_type === 'product' || content?.content_type === 'service') && (
-                    <div className="p-3 bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800 rounded-lg">
+                    <div className="p-3 bg-warning-50 dark:bg-warning-900/20 border border-warning-200 dark:border-warning-800 rounded-lg">
                       <div className="flex items-start gap-2">
-                        <span className="text-orange-600 dark:text-orange-400 font-bold">3.</span>
+                        <span className="text-warning-600 dark:text-warning-400 font-bold">3.</span>
                         <div className="flex-1">
-                          <div className="font-medium text-orange-900 dark:text-orange-300">Add Product/Service Attributes</div>
-                          <div className="text-sm text-orange-700 dark:text-orange-400 mt-1">
+                          <div className="font-medium text-warning-900 dark:text-warning-300">Add Product/Service Attributes</div>
+                          <div className="text-sm text-warning-700 dark:text-warning-400 mt-1">
                             Add attributes like specifications, features, or modifiers to enhance content completeness.
                           </div>
                         </div>
@@ -276,12 +276,12 @@ export default function AnalysisPreview() {
                     </div>
                   )}
                   {scores.metadata_completeness_score !== undefined && scores.metadata_completeness_score < 80 && (
-                    <div className="p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg">
+                    <div className="p-3 bg-warning-50 dark:bg-warning-900/20 border border-warning-200 dark:border-warning-800 rounded-lg">
                       <div className="flex items-start gap-2">
-                        <span className="text-amber-600 dark:text-amber-400 font-bold">4.</span>
+                        <span className="text-warning-600 dark:text-warning-400 font-bold">4.</span>
                         <div className="flex-1">
-                          <div className="font-medium text-amber-900 dark:text-amber-300">Improve Metadata Completeness</div>
-                          <div className="text-sm text-amber-700 dark:text-amber-400 mt-1">
+                          <div className="font-medium text-warning-900 dark:text-warning-300">Improve Metadata Completeness</div>
+                          <div className="text-sm text-warning-700 dark:text-warning-400 mt-1">
                             Current score: {scores.metadata_completeness_score.toFixed(1)}%. Complete missing metadata fields to reach 80%+.
                           </div>
                         </div>
diff --git a/frontend/src/pages/Optimizer/ContentSelector.tsx b/frontend/src/pages/Optimizer/ContentSelector.tsx
index 64f28442..82f2bbfe 100644
--- a/frontend/src/pages/Optimizer/ContentSelector.tsx
+++ b/frontend/src/pages/Optimizer/ContentSelector.tsx
@@ -168,7 +168,7 @@ export default function OptimizerContentSelector() {
             <button
               onClick={handleBatchOptimize}
               disabled={selectedIds.length === 0 || processing.length > 0}
-              className="inline-flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              className="inline-flex items-center gap-2 px-4 py-2 bg-brand-500 text-white rounded-lg hover:bg-brand-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
             >
               {processing.length > 0 ? (
                 <>
@@ -193,7 +193,7 @@ export default function OptimizerContentSelector() {
 
         {loading ? (
           <div className="text-center py-12">
-            <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
+            <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-brand-500"></div>
             <p className="mt-2 text-gray-600 dark:text-gray-400">Loading content...</p>
           </div>
         ) : (
@@ -207,7 +207,7 @@ export default function OptimizerContentSelector() {
                         type="checkbox"
                         checked={selectedIds.length === filteredContent.length && filteredContent.length > 0}
                         onChange={toggleSelectAll}
-                        className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                        className="rounded border-gray-300 text-brand-600 focus:ring-brand-500"
                       />
                     </th>
                     <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
@@ -236,14 +236,14 @@ export default function OptimizerContentSelector() {
                     return (
                       <tr
                         key={item.id}
-                        className={`hover:bg-gray-50 dark:hover:bg-gray-700 ${isSelected ? 'bg-blue-50 dark:bg-blue-900/20' : ''}`}
+                        className={`hover:bg-gray-50 dark:hover:bg-gray-700 ${isSelected ? 'bg-brand-50 dark:bg-brand-900/20' : ''}`}
                       >
                         <td className="px-6 py-4 whitespace-nowrap">
                           <input
                             type="checkbox"
                             checked={isSelected}
                             onChange={() => toggleSelection(item.id)}
-                            className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                            className="rounded border-gray-300 text-brand-600 focus:ring-brand-500"
                           />
                         </td>
                         <td className="px-6 py-4 whitespace-nowrap">
@@ -270,7 +270,7 @@ export default function OptimizerContentSelector() {
                           <button
                             onClick={() => handleOptimize(item.id)}
                             disabled={isProcessing || processing.length > 0}
-                            className="inline-flex items-center gap-2 px-3 py-1.5 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                            className="inline-flex items-center gap-2 px-3 py-1.5 bg-brand-500 text-white rounded hover:bg-brand-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                           >
                             {isProcessing ? (
                               <>
diff --git a/frontend/src/pages/Optimizer/Dashboard.tsx b/frontend/src/pages/Optimizer/Dashboard.tsx
index e69eebf5..6dc48917 100644
--- a/frontend/src/pages/Optimizer/Dashboard.tsx
+++ b/frontend/src/pages/Optimizer/Dashboard.tsx
@@ -80,7 +80,7 @@ export default function OptimizerDashboard() {
           />
           <Link
             to="/optimizer/content"
-            className="inline-flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
+            className="inline-flex items-center gap-2 px-4 py-2 bg-brand-500 text-white rounded-lg hover:bg-brand-600 transition-colors"
           >
             <BoltIcon />
             Optimize Content
@@ -92,7 +92,7 @@ export default function OptimizerDashboard() {
 
         {loading ? (
           <div className="text-center py-12">
-            <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
+            <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-brand-500"></div>
             <p className="mt-2 text-gray-600 dark:text-gray-400">Loading stats...</p>
           </div>
         ) : stats ? (
@@ -135,7 +135,7 @@ export default function OptimizerDashboard() {
                   className="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
                 >
                   <div className="flex items-center gap-3">
-                    <BoltIcon className="w-5 h-5 text-yellow-500" />
+                    <BoltIcon className="w-5 h-5 text-warning-500" />
                     <div>
                       <h3 className="font-medium text-gray-900 dark:text-white">Optimize Content</h3>
                       <p className="text-sm text-gray-500 dark:text-gray-400">Select and optimize content items</p>
diff --git a/frontend/src/pages/Payment.tsx b/frontend/src/pages/Payment.tsx
index 5a7545d0..4626368c 100644
--- a/frontend/src/pages/Payment.tsx
+++ b/frontend/src/pages/Payment.tsx
@@ -52,68 +52,68 @@ export default function Payment() {
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-slate-50 px-4 py-16">
-      <div className="w-full max-w-3xl bg-white rounded-2xl shadow-lg p-8 space-y-6 border border-slate-100">
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 px-4 py-16">
+      <div className="w-full max-w-3xl bg-white rounded-2xl shadow-lg p-8 space-y-6 border border-gray-100">
         <div className="flex items-center justify-between">
           <div>
-            <p className="text-sm text-slate-500">Confirm your plan</p>
-            <h1 className="text-2xl font-semibold text-slate-900">Complete your subscription</h1>
+            <p className="text-sm text-gray-500">Confirm your plan</p>
+            <h1 className="text-2xl font-semibold text-gray-900">Complete your subscription</h1>
           </div>
-          <Link to="/pricing" className="text-sm text-blue-600 hover:text-blue-700">
+          <Link to="/pricing" className="text-sm text-brand-600 hover:text-brand-700">
             Change plan
           </Link>
         </div>
 
         {plan && (
-          <div className="rounded-xl border border-slate-200 bg-slate-50 p-4">
-            <h2 className="text-lg font-semibold text-slate-900">{plan.name}</h2>
-            <p className="text-slate-700">{plan.price}</p>
-            <p className="text-sm text-slate-600">{plan.content}</p>
-            <p className="text-xs text-amber-700 mt-2">
+          <div className="rounded-xl border border-gray-200 bg-gray-50 p-4">
+            <h2 className="text-lg font-semibold text-gray-900">{plan.name}</h2>
+            <p className="text-gray-700">{plan.price}</p>
+            <p className="text-sm text-gray-600">{plan.content}</p>
+            <p className="text-xs text-warning-700 mt-2">
               Payment is completed offline (bank transfer). Submit your email and reference below; we will verify and activate your account.
             </p>
           </div>
         )}
 
         <div className="space-y-4">
-          <label className="block text-sm font-medium text-slate-800">
+          <label className="block text-sm font-medium text-gray-800">
             Contact email
             <input
               type="email"
               value={contactEmail}
               onChange={(e) => setContactEmail(e.target.value)}
               placeholder="you@example.com"
-              className="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-slate-900 focus:border-blue-500 focus:outline-none"
+              className="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-900 focus:border-brand-500 focus:outline-none"
             />
           </label>
-          <label className="block text-sm font-medium text-slate-800">
+          <label className="block text-sm font-medium text-gray-800">
             Notes (optional)
             <textarea
               value={note}
               onChange={(e) => setNote(e.target.value)}
               placeholder="Company name, billing contact, or questions"
-              className="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-slate-900 focus:border-blue-500 focus:outline-none"
+              className="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-900 focus:border-brand-500 focus:outline-none"
               rows={3}
             />
           </label>
         </div>
 
         <div className="flex items-center justify-between">
-          <Link to="/signup" className="text-sm text-slate-600 hover:text-slate-800">
+          <Link to="/signup" className="text-sm text-gray-600 hover:text-gray-800">
             Prefer the free plan? Start your trial
           </Link>
           <a
             href={mailtoHref || "#"}
             onClick={handleRequest}
             className={`inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-semibold text-white ${
-              contactEmail.trim() ? "bg-blue-600 hover:bg-blue-700" : "bg-blue-400 cursor-not-allowed"
+              contactEmail.trim() ? "bg-brand-600 hover:bg-brand-700" : "bg-brand-400 cursor-not-allowed"
             }`}
             aria-disabled={!contactEmail.trim()}
           >
             Request payment instructions
           </a>
         </div>
-        {error && <p className="text-sm text-red-600">{error}</p>}
+        {error && <p className="text-sm text-error-600">{error}</p>}
       </div>
     </div>
   );
diff --git a/frontend/src/pages/Planner/Dashboard.tsx b/frontend/src/pages/Planner/Dashboard.tsx
index 8474ebeb..589ff384 100644
--- a/frontend/src/pages/Planner/Dashboard.tsx
+++ b/frontend/src/pages/Planner/Dashboard.tsx
@@ -235,7 +235,7 @@ export default function PlannerDashboard() {
       description: `${stats?.clusters.total || 0} new clusters created`,
       timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000),
       icon: GroupIcon,
-      color: "text-green-600",
+      color: "text-success-600",
     },
     {
       id: 2,
@@ -243,7 +243,7 @@ export default function PlannerDashboard() {
       description: `${stats?.ideas.total || 0} content ideas created`,
       timestamp: new Date(Date.now() - 4 * 60 * 60 * 1000),
       icon: BoltIcon,
-      color: "text-orange-600",
+      color: "text-warning-600",
     },
     {
       id: 3,
@@ -251,7 +251,7 @@ export default function PlannerDashboard() {
       description: `${stats?.keywords.total || 0} keywords in database`,
       timestamp: new Date(Date.now() - 6 * 60 * 60 * 1000),
       icon: ListIcon,
-      color: "text-blue-600",
+      color: "text-brand-600",
     },
   ];
 
@@ -268,18 +268,18 @@ export default function PlannerDashboard() {
     },
     xaxis: {
       categories: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
-      labels: { style: { colors: "#6b7280" } },
+      labels: { style: { colors: "var(--color-gray-500)" } },
     },
     yaxis: {
-      labels: { style: { colors: "#6b7280" } },
+      labels: { style: { colors: "var(--color-gray-500)" } },
     },
     legend: {
       position: "top",
-      labels: { colors: "#6b7280" },
+      labels: { colors: "var(--color-gray-500)" },
     },
     colors: ["var(--color-primary)", "var(--color-success)", "var(--color-warning)"],
     grid: {
-      borderColor: "#e5e7eb",
+      borderColor: "var(--color-gray-200)",
     },
     fill: {
       type: "gradient",
@@ -315,7 +315,7 @@ export default function PlannerDashboard() {
         toolbar: { show: false }
       },
       labels: Object.keys(stats.keywords.byStatus).filter(key => stats.keywords.byStatus[key] > 0),
-      colors: ['#465FFF', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6'],
+      colors: ['var(--color-primary)', 'var(--color-success)', 'var(--color-warning)', 'var(--color-danger)', 'var(--color-purple)'],
       legend: {
         position: 'bottom',
         fontFamily: 'Outfit',
@@ -335,7 +335,7 @@ export default function PlannerDashboard() {
                 show: true,
                 fontSize: '24px',
                 fontWeight: 700,
-                color: '#465FFF',
+                color: 'var(--color-primary)',
                 fontFamily: 'Outfit',
                 formatter: () => {
                   const total = Object.values(stats.keywords.byStatus).reduce((a, b) => a + b, 0);
@@ -366,7 +366,7 @@ export default function PlannerDashboard() {
         toolbar: { show: false },
         height: 300
       },
-      colors: ['#10B981'],
+      colors: ['var(--color-success)'],
       plotOptions: {
         bar: {
           horizontal: true,
@@ -510,21 +510,21 @@ export default function PlannerDashboard() {
                 <Link
                   key={module.title}
                   to={module.path}
-                  className="rounded-2xl border-2 border-slate-200 bg-white p-6 hover:shadow-xl hover:-translate-y-1 transition-all group"
+                  className="rounded-2xl border-2 border-gray-200 bg-white p-6 hover:shadow-xl hover:-translate-y-1 transition-all group"
                 >
                   <div className="flex items-start justify-between mb-4">
                     <div className={`inline-flex size-14 rounded-xl bg-gradient-to-br ${module.color} items-center justify-center text-white shadow-lg`}>
                       <Icon className="h-7 w-7" />
                     </div>
                   </div>
-                  <h3 className="text-lg font-bold text-slate-900 mb-2">{module.title}</h3>
-                  <p className="text-sm text-slate-600 mb-4">{module.description}</p>
+                  <h3 className="text-lg font-bold text-gray-900 mb-2">{module.title}</h3>
+                  <p className="text-sm text-gray-600 mb-4">{module.description}</p>
                   <div className="flex items-center justify-between">
                     <div>
-                      <div className="text-2xl font-bold text-slate-900">{module.count}</div>
-                      <div className="text-xs text-slate-500">{module.metric}</div>
+                      <div className="text-2xl font-bold text-gray-900">{module.count}</div>
+                      <div className="text-xs text-gray-500">{module.metric}</div>
                     </div>
-                    <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[var(--color-primary)] group-hover:translate-x-1 transition" />
+                    <ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-[var(--color-primary)] group-hover:translate-x-1 transition" />
                   </div>
                 </Link>
               );
@@ -547,17 +547,17 @@ export default function PlannerDashboard() {
                 return (
                   <div
                     key={activity.id}
-                    className="flex items-center gap-4 p-4 rounded-lg border border-slate-200 bg-white hover:shadow-md transition"
+                    className="flex items-center gap-4 p-4 rounded-lg border border-gray-200 bg-white hover:shadow-md transition"
                   >
-                    <div className={`size-10 rounded-lg bg-gradient-to-br from-slate-100 to-slate-200 flex items-center justify-center ${activity.color}`}>
+                    <div className={`size-10 rounded-lg bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center ${activity.color}`}>
                       <Icon className="h-5 w-5" />
                     </div>
                     <div className="flex-1">
                       <div className="flex items-center justify-between mb-1">
-                        <h4 className="font-semibold text-slate-900">{activity.type}</h4>
-                        <span className="text-xs text-slate-500">{formatTimeAgo(activity.timestamp)}</span>
+                        <h4 className="font-semibold text-gray-900">{activity.type}</h4>
+                        <span className="text-xs text-gray-500">{formatTimeAgo(activity.timestamp)}</span>
                       </div>
-                      <p className="text-sm text-slate-600">{activity.description}</p>
+                      <p className="text-sm text-gray-600">{activity.description}</p>
                     </div>
                   </div>
                 );
@@ -638,58 +638,58 @@ export default function PlannerDashboard() {
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
             <Link
               to="/planner/keyword-opportunities"
-              className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[var(--color-primary)] hover:shadow-lg transition-all group"
+              className="flex items-center gap-4 p-6 rounded-xl border-2 border-gray-200 bg-white hover:border-[var(--color-primary)] hover:shadow-lg transition-all group"
             >
               <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] flex items-center justify-center text-white shadow-lg">
                 <ListIcon className="h-6 w-6" />
               </div>
               <div className="flex-1 text-left">
-                <h4 className="font-semibold text-slate-900 mb-1">Add Keywords</h4>
-                <p className="text-sm text-slate-600">Discover opportunities</p>
+                <h4 className="font-semibold text-gray-900 mb-1">Add Keywords</h4>
+                <p className="text-sm text-gray-600">Discover opportunities</p>
               </div>
-              <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[var(--color-primary)] transition" />
+              <ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-[var(--color-primary)] transition" />
             </Link>
 
             <Link
               to="/planner/clusters"
-              className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#0bbf87] hover:shadow-lg transition-all group"
+              className="flex items-center gap-4 p-6 rounded-xl border-2 border-gray-200 bg-white hover:border-success-500 hover:shadow-lg transition-all group"
             >
               <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-success)] to-[var(--color-success-dark)] flex items-center justify-center text-white shadow-lg">
                 <GroupIcon className="h-6 w-6" />
               </div>
               <div className="flex-1 text-left">
-                <h4 className="font-semibold text-slate-900 mb-1">Auto Cluster</h4>
-                <p className="text-sm text-slate-600">Group keywords</p>
+                <h4 className="font-semibold text-gray-900 mb-1">Auto Cluster</h4>
+                <p className="text-sm text-gray-600">Group keywords</p>
               </div>
-              <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[#0bbf87] transition" />
+              <ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-success-500 transition" />
             </Link>
 
             <Link
               to="/planner/ideas"
-              className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#ff7a00] hover:shadow-lg transition-all group"
+              className="flex items-center gap-4 p-6 rounded-xl border-2 border-gray-200 bg-white hover:border-warning-500 hover:shadow-lg transition-all group"
             >
               <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-warning)] to-[var(--color-warning-dark)] flex items-center justify-center text-white shadow-lg">
                 <BoltIcon className="h-6 w-6" />
               </div>
               <div className="flex-1 text-left">
-                <h4 className="font-semibold text-slate-900 mb-1">Generate Ideas</h4>
-                <p className="text-sm text-slate-600">Create content ideas</p>
+                <h4 className="font-semibold text-gray-900 mb-1">Generate Ideas</h4>
+                <p className="text-sm text-gray-600">Create content ideas</p>
               </div>
-              <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[#ff7a00] transition" />
+              <ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-warning-500 transition" />
             </Link>
 
             <Link
               to="/automation"
-              className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#5d4ae3] hover:shadow-lg transition-all group"
+              className="flex items-center gap-4 p-6 rounded-xl border-2 border-gray-200 bg-white hover:border-purple-500 hover:shadow-lg transition-all group"
             >
               <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-purple)] to-[var(--color-purple-dark)] flex items-center justify-center text-white shadow-lg">
                 <PlugInIcon className="h-6 w-6" />
               </div>
               <div className="flex-1 text-left">
-                <h4 className="font-semibold text-slate-900 mb-1">Setup Automation</h4>
-                <p className="text-sm text-slate-600">Automate workflows</p>
+                <h4 className="font-semibold text-gray-900 mb-1">Setup Automation</h4>
+                <p className="text-sm text-gray-600">Automate workflows</p>
               </div>
-              <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[#5d4ae3] transition" />
+              <ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-purple-500 transition" />
             </Link>
           </div>
         </ComponentCard>
@@ -703,8 +703,8 @@ export default function PlannerDashboard() {
                   <ListIcon className="h-5 w-5" />
                 </div>
                 <div>
-                  <h4 className="font-semibold text-slate-900 mb-1">Keyword Discovery</h4>
-                  <p className="text-sm text-slate-600">
+                  <h4 className="font-semibold text-gray-900 mb-1">Keyword Discovery</h4>
+                  <p className="text-sm text-gray-600">
                     Discover high-volume keywords from our global database. Add keywords manually or import from keyword opportunities.
                   </p>
                 </div>
@@ -714,8 +714,8 @@ export default function PlannerDashboard() {
                   <GroupIcon className="h-5 w-5" />
                 </div>
                 <div>
-                  <h4 className="font-semibold text-slate-900 mb-1">AI Clustering</h4>
-                  <p className="text-sm text-slate-600">
+                  <h4 className="font-semibold text-gray-900 mb-1">AI Clustering</h4>
+                  <p className="text-sm text-gray-600">
                     Automatically group related keywords into strategic clusters. Each cluster represents a content topic with shared search intent.
                   </p>
                 </div>
@@ -725,8 +725,8 @@ export default function PlannerDashboard() {
                   <BoltIcon className="h-5 w-5" />
                 </div>
                 <div>
-                  <h4 className="font-semibold text-slate-900 mb-1">Idea Generation</h4>
-                  <p className="text-sm text-slate-600">
+                  <h4 className="font-semibold text-gray-900 mb-1">Idea Generation</h4>
+                  <p className="text-sm text-gray-600">
                     Generate content ideas from clusters using AI. Each idea includes title, outline, and target keywords for content creation.
                   </p>
                 </div>
@@ -737,34 +737,34 @@ export default function PlannerDashboard() {
           <ComponentCard title="Getting Started" desc="Quick guide to using Planner">
             <div className="space-y-3">
               <div className="flex items-start gap-3">
-                <div className="flex-shrink-0 size-8 rounded-full bg-[#0693e3] text-white flex items-center justify-center font-bold text-sm">
+                <div className="flex-shrink-0 size-8 rounded-full bg-brand-500 text-white flex items-center justify-center font-bold text-sm">
                   1
                 </div>
                 <div>
-                  <h4 className="font-semibold text-slate-900 mb-1">Add Keywords</h4>
-                  <p className="text-sm text-slate-600">
+                  <h4 className="font-semibold text-gray-900 mb-1">Add Keywords</h4>
+                  <p className="text-sm text-gray-600">
                     Start by adding keywords from the keyword opportunities page. You can search by volume, difficulty, or intent.
                   </p>
                 </div>
               </div>
               <div className="flex items-start gap-3">
-                <div className="flex-shrink-0 size-8 rounded-full bg-[#0bbf87] text-white flex items-center justify-center font-bold text-sm">
+                <div className="flex-shrink-0 size-8 rounded-full bg-success-500 text-white flex items-center justify-center font-bold text-sm">
                   2
                 </div>
                 <div>
-                  <h4 className="font-semibold text-slate-900 mb-1">Cluster Keywords</h4>
-                  <p className="text-sm text-slate-600">
+                  <h4 className="font-semibold text-gray-900 mb-1">Cluster Keywords</h4>
+                  <p className="text-sm text-gray-600">
                     Use the auto-cluster feature to group related keywords. Review and refine clusters to match your content strategy.
                   </p>
                 </div>
               </div>
               <div className="flex items-start gap-3">
-                <div className="flex-shrink-0 size-8 rounded-full bg-[#ff7a00] text-white flex items-center justify-center font-bold text-sm">
+                <div className="flex-shrink-0 size-8 rounded-full bg-warning-500 text-white flex items-center justify-center font-bold text-sm">
                   3
                 </div>
                 <div>
-                  <h4 className="font-semibold text-slate-900 mb-1">Generate Ideas</h4>
-                  <p className="text-sm text-slate-600">
+                  <h4 className="font-semibold text-gray-900 mb-1">Generate Ideas</h4>
+                  <p className="text-sm text-gray-600">
                     Create content ideas from your clusters. Queue ideas to the Writer module to start content creation.
                   </p>
                 </div>
diff --git a/frontend/src/pages/Reference/Industries.tsx b/frontend/src/pages/Reference/Industries.tsx
index 72aaf4e4..46a1928d 100644
--- a/frontend/src/pages/Reference/Industries.tsx
+++ b/frontend/src/pages/Reference/Industries.tsx
@@ -168,12 +168,12 @@ export default function Industries() {
                       {industry.topKeywords.slice(0, 5).map((keyword, idx) => (
                         <div
                           key={keyword.id || idx}
-                          className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800"
+                          className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-brand-50 dark:bg-brand-900/20 border border-brand-200 dark:border-brand-800"
                         >
-                          <span className="text-xs font-medium text-blue-700 dark:text-blue-300">
+                          <span className="text-xs font-medium text-brand-700 dark:text-brand-300">
                             {keyword.keyword}
                           </span>
-                          <span className="text-xs text-blue-600 dark:text-blue-400 font-semibold">
+                          <span className="text-xs text-brand-600 dark:text-brand-400 font-semibold">
                             {keyword.volume ? (keyword.volume >= 1000 ? `${(keyword.volume / 1000).toFixed(1)}k` : keyword.volume.toString()) : '-'}
                           </span>
                         </div>
diff --git a/frontend/src/pages/Settings/CreditsAndBilling.tsx b/frontend/src/pages/Settings/CreditsAndBilling.tsx
index 9fd91a73..0f1a9297 100644
--- a/frontend/src/pages/Settings/CreditsAndBilling.tsx
+++ b/frontend/src/pages/Settings/CreditsAndBilling.tsx
@@ -173,7 +173,7 @@ const CreditsAndBilling: React.FC = () => {
                     </div>
                   </div>
                   <div className="text-right">
-                    <div className={`font-bold ${transaction.amount > 0 ? 'text-green-600' : 'text-red-600'}`}>
+                    <div className={`font-bold ${transaction.amount > 0 ? 'text-success-600' : 'text-error-600'}`}>
                       {transaction.amount > 0 ? '+' : ''}{transaction.amount}
                     </div>
                   </div>
@@ -230,7 +230,7 @@ const CreditsAndBilling: React.FC = () => {
                       {transaction.reference_id || '-'}
                     </td>
                     <td className={`px-6 py-4 whitespace-nowrap text-sm text-right font-bold ${
-                      transaction.amount > 0 ? 'text-green-600' : 'text-red-600'
+                      transaction.amount > 0 ? 'text-success-600' : 'text-error-600'
                     }`}>
                       {transaction.amount > 0 ? '+' : ''}{transaction.amount}
                     </td>
diff --git a/frontend/src/pages/Settings/Integration.tsx b/frontend/src/pages/Settings/Integration.tsx
index ed20db2d..43cb1a3c 100644
--- a/frontend/src/pages/Settings/Integration.tsx
+++ b/frontend/src/pages/Settings/Integration.tsx
@@ -718,7 +718,7 @@ export default function Integration() {
             </Label>
             
             {/* Featured Image (full width) - Selectable */}
-            <div className="p-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-gradient-to-r from-purple-500 to-blue-500 text-white">
+            <div className="p-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-gradient-to-r from-purple-500 to-brand-500 text-white">
               <div className="flex items-center justify-between mb-2">
                 <div className="font-medium">Featured Image</div>
                 <div className="text-xs bg-white/20 px-2 py-1 rounded">
diff --git a/frontend/src/pages/Settings/Publishing.tsx b/frontend/src/pages/Settings/Publishing.tsx
index 7a7b6cbc..5064dd9d 100644
--- a/frontend/src/pages/Settings/Publishing.tsx
+++ b/frontend/src/pages/Settings/Publishing.tsx
@@ -148,8 +148,8 @@ export default function Publishing() {
             </div>
 
             {autoPublishEnabled && (
-              <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
-                <p className="text-sm text-blue-800 dark:text-blue-200">
+              <div className="mt-4 p-4 bg-brand-50 dark:bg-brand-900/20 border border-brand-200 dark:border-brand-800 rounded-lg">
+                <p className="text-sm text-brand-800 dark:text-brand-200">
                   When you turn this on, articles will publish to your site right away. You can still review them first if you want
                 </p>
               </div>
@@ -207,8 +207,8 @@ export default function Publishing() {
                   </p>
                 </div>
 
-                <div className="p-4 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg">
-                  <p className="text-sm text-amber-800 dark:text-amber-200">
+                <div className="p-4 bg-warning-50 dark:bg-warning-900/20 border border-warning-200 dark:border-warning-800 rounded-lg">
+                  <p className="text-sm text-warning-800 dark:text-warning-200">
                     <strong>Note:</strong> Content will be automatically published every{' '}
                     {syncInterval} {syncIntervalUnit} if it has status "review" and all images are generated.
                   </p>
diff --git a/frontend/src/pages/Settings/Sites.tsx b/frontend/src/pages/Settings/Sites.tsx
index dfdaf1a8..04460735 100644
--- a/frontend/src/pages/Settings/Sites.tsx
+++ b/frontend/src/pages/Settings/Sites.tsx
@@ -377,7 +377,7 @@ export default function Sites() {
     return (
       <div className="flex h-screen items-center justify-center">
         <div className="text-center">
-          <div className="mb-4 h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-blue-600 mx-auto"></div>
+          <div className="mb-4 h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-brand-600 mx-auto"></div>
           <p className="text-gray-600 dark:text-gray-400">Loading sites...</p>
         </div>
       </div>
@@ -522,7 +522,7 @@ export default function Sites() {
                               setSelectedSectors(selectedSectors.filter(s => s !== sector.slug));
                             }
                           }}
-                          className="mt-1 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                          className="mt-1 h-4 w-4 rounded border-gray-300 text-brand-600 focus:ring-brand-500"
                         />
                         <div className="flex-1">
                           <div className="font-medium text-sm text-gray-900 dark:text-white">
diff --git a/frontend/src/pages/Settings/Status.tsx b/frontend/src/pages/Settings/Status.tsx
index 65783365..04eb0c6c 100644
--- a/frontend/src/pages/Settings/Status.tsx
+++ b/frontend/src/pages/Settings/Status.tsx
@@ -40,18 +40,18 @@ interface SystemStatus {
 
 const getStatusColor = (status: string) => {
   switch (status) {
-    case 'healthy': return 'text-green-600 dark:text-green-400';
-    case 'warning': return 'text-yellow-600 dark:text-yellow-400';
-    case 'critical': return 'text-red-600 dark:text-red-400';
+    case 'healthy': return 'text-success-600 dark:text-success-400';
+    case 'warning': return 'text-warning-600 dark:text-warning-400';
+    case 'critical': return 'text-error-600 dark:text-error-400';
     default: return 'text-gray-600 dark:text-gray-400';
   }
 };
 
 const getStatusBadge = (status: string) => {
   switch (status) {
-    case 'healthy': return 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400';
-    case 'warning': return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400';
-    case 'critical': return 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400';
+    case 'healthy': return 'bg-success-100 text-success-800 dark:bg-success-900/30 dark:text-success-400';
+    case 'warning': return 'bg-warning-100 text-warning-800 dark:bg-warning-900/30 dark:text-warning-400';
+    case 'critical': return 'bg-error-100 text-error-800 dark:bg-error-900/30 dark:text-error-400';
     default: return 'bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-400';
   }
 };
@@ -99,7 +99,7 @@ export default function Status() {
       <>
         <PageMeta title="System Status - IGNY8" description="System monitoring" />
         <ComponentCard title="System Status" desc="Error loading system information">
-          <div className="text-center py-8 text-red-600 dark:text-red-400">
+          <div className="text-center py-8 text-error-600 dark:text-error-400">
             {error || 'Failed to load system status'}
           </div>
         </ComponentCard>
@@ -126,8 +126,8 @@ export default function Status() {
               <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4">
                 <div
                   className={`h-4 rounded-full ${
-                    (status.system?.cpu?.usage_percent || 0) < 80 ? 'bg-green-500' :
-                    (status.system?.cpu?.usage_percent || 0) < 95 ? 'bg-yellow-500' : 'bg-red-500'
+                    (status.system?.cpu?.usage_percent || 0) < 80 ? 'bg-success-500' :
+                    (status.system?.cpu?.usage_percent || 0) < 95 ? 'bg-warning-500' : 'bg-error-500'
                   }`}
                   style={{ width: `${status.system?.cpu?.usage_percent || 0}%` }}
                 ></div>
@@ -148,8 +148,8 @@ export default function Status() {
               <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4">
                 <div
                   className={`h-4 rounded-full ${
-                    (status.system?.memory?.usage_percent || 0) < 80 ? 'bg-green-500' :
-                    (status.system?.memory?.usage_percent || 0) < 95 ? 'bg-yellow-500' : 'bg-red-500'
+                    (status.system?.memory?.usage_percent || 0) < 80 ? 'bg-success-500' :
+                    (status.system?.memory?.usage_percent || 0) < 95 ? 'bg-warning-500' : 'bg-error-500'
                   }`}
                   style={{ width: `${status.system?.memory?.usage_percent || 0}%` }}
                 ></div>
@@ -170,8 +170,8 @@ export default function Status() {
               <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4">
                 <div
                   className={`h-4 rounded-full ${
-                    (status.system?.disk?.usage_percent || 0) < 80 ? 'bg-green-500' :
-                    (status.system?.disk?.usage_percent || 0) < 95 ? 'bg-yellow-500' : 'bg-red-500'
+                    (status.system?.disk?.usage_percent || 0) < 80 ? 'bg-success-500' :
+                    (status.system?.disk?.usage_percent || 0) < 95 ? 'bg-warning-500' : 'bg-error-500'
                   }`}
                   style={{ width: `${status.system?.disk?.usage_percent || 0}%` }}
                 ></div>
diff --git a/frontend/src/pages/Settings/WordPressIntegrationDebug.tsx b/frontend/src/pages/Settings/WordPressIntegrationDebug.tsx
index 4c8b0c95..913036ed 100644
--- a/frontend/src/pages/Settings/WordPressIntegrationDebug.tsx
+++ b/frontend/src/pages/Settings/WordPressIntegrationDebug.tsx
@@ -343,7 +343,7 @@ export default function WordPressIntegrationDebug() {
   if (initializing) {
     return (
       <div className="p-8 text-center">
-        <Loader2 className="h-8 w-8 animate-spin mx-auto text-blue-600 dark:text-blue-400" />
+        <Loader2 className="h-8 w-8 animate-spin mx-auto text-brand-600 dark:text-brand-400" />
         <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">Loading WordPress integration...</p>
       </div>
     );
@@ -353,8 +353,8 @@ export default function WordPressIntegrationDebug() {
   if (!integrationId) {
     return (
       <div className="p-8">
-        <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-900/50 rounded-lg p-6 text-center">
-          <AlertTriangle className="h-12 w-12 text-yellow-600 dark:text-yellow-400 mx-auto mb-4" />
+        <div className="bg-warning-50 dark:bg-warning-900/20 border border-warning-200 dark:border-warning-900/50 rounded-lg p-6 text-center">
+          <AlertTriangle className="h-12 w-12 text-warning-600 dark:text-warning-400 mx-auto mb-4" />
           <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
             No WordPress Integration Found
           </h3>
@@ -427,15 +427,15 @@ export default function WordPressIntegrationDebug() {
           <p className="text-gray-600 dark:text-gray-400">Checking for WordPress integration...</p>
         </div>
       ) : !integrationId && activeSite ? (
-        <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-900/50 rounded-lg p-6">
+        <div className="bg-warning-50 dark:bg-warning-900/20 border border-warning-200 dark:border-warning-900/50 rounded-lg p-6">
           <div className="flex items-start space-x-3">
-            <AlertTriangle className="h-8 w-8 text-yellow-500 mt-0.5" />
+            <AlertTriangle className="h-8 w-8 text-warning-500 mt-0.5" />
             <div>
-              <p className="text-lg font-semibold text-yellow-800 dark:text-yellow-200">No WordPress Integration Found</p>
-              <p className="text-sm text-yellow-600 dark:text-yellow-300 mt-2">
+              <p className="text-lg font-semibold text-warning-800 dark:text-warning-200">No WordPress Integration Found</p>
+              <p className="text-sm text-warning-600 dark:text-warning-300 mt-2">
                 This site doesn't have a WordPress integration configured yet.
               </p>
-              <p className="text-xs text-yellow-600 dark:text-yellow-400 mt-2">
+              <p className="text-xs text-warning-600 dark:text-warning-400 mt-2">
                 Please configure a WordPress integration in <span className="font-medium">Settings → Integration</span> page first.
               </p>
             </div>
@@ -461,7 +461,7 @@ export default function WordPressIntegrationDebug() {
                 <button
                   onClick={testConnection}
                   disabled={loading}
-                  className="inline-flex items-center px-3 py-1 text-xs bg-blue-100 hover:bg-blue-200 text-blue-700 rounded-md disabled:opacity-50"
+                  className="inline-flex items-center px-3 py-1 text-xs bg-brand-100 hover:bg-brand-200 text-brand-700 rounded-md disabled:opacity-50"
                 >
                   <TestTube className="h-3 w-3 mr-1" />
                   Test Connection
@@ -469,7 +469,7 @@ export default function WordPressIntegrationDebug() {
                 <button
                   onClick={resyncSiteMetadata}
                   disabled={loading}
-                  className="inline-flex items-center px-3 py-1 text-xs bg-yellow-100 hover:bg-yellow-200 text-yellow-700 rounded-md disabled:opacity-50"
+                  className="inline-flex items-center px-3 py-1 text-xs bg-warning-100 hover:bg-warning-200 text-warning-700 rounded-md disabled:opacity-50"
                 >
                   <RefreshCw className="h-3 w-3 mr-1" />
                   Re-sync Metadata
@@ -491,9 +491,9 @@ export default function WordPressIntegrationDebug() {
                   <div className="flex items-center justify-between mb-2">
                     <span className="text-sm font-medium">API Connection</span>
                     {integrationHealth.api_status === 'healthy' ? (
-                      <CheckCircle className="h-4 w-4 text-green-500" />
+                      <CheckCircle className="h-4 w-4 text-success-500" />
                     ) : (
-                      <XCircle className="h-4 w-4 text-red-500" />
+                      <XCircle className="h-4 w-4 text-error-500" />
                     )}
                   </div>
                   <p className="text-xs text-gray-600 dark:text-gray-400">{integrationHealth.api_message}</p>
@@ -506,9 +506,9 @@ export default function WordPressIntegrationDebug() {
                   <div className="flex items-center justify-between mb-2">
                     <span className="text-sm font-medium">Plugin Status</span>
                     {integrationHealth.plugin_active ? (
-                      <CheckCircle className="h-4 w-4 text-green-500" />
+                      <CheckCircle className="h-4 w-4 text-success-500" />
                     ) : (
-                      <XCircle className="h-4 w-4 text-red-500" />
+                      <XCircle className="h-4 w-4 text-error-500" />
                     )}
                   </div>
                   <p className="text-xs text-gray-600 dark:text-gray-400">
@@ -523,9 +523,9 @@ export default function WordPressIntegrationDebug() {
                   <div className="flex items-center justify-between mb-2">
                     <span className="text-sm font-medium">Sync Status</span>
                     {integrationHealth.sync_healthy ? (
-                      <CheckCircle className="h-4 w-4 text-green-500" />
+                      <CheckCircle className="h-4 w-4 text-success-500" />
                     ) : (
-                      <AlertTriangle className="h-4 w-4 text-yellow-500" />
+                      <AlertTriangle className="h-4 w-4 text-warning-500" />
                     )}
                   </div>
                   <p className="text-xs text-gray-600 dark:text-gray-400">
@@ -557,9 +557,9 @@ export default function WordPressIntegrationDebug() {
                       <div className="flex-1 min-w-0">
                         <div className="flex items-center space-x-2 text-sm">
                           <span className={`px-2 py-1 rounded-full text-xs font-medium ${
-                            event.type === 'sync' ? 'bg-blue-100 text-blue-700' :
-                            event.type === 'error' ? 'bg-red-100 text-red-700' :
-                            event.type === 'webhook' ? 'bg-green-100 text-green-700' :
+                            event.type === 'sync' ? 'bg-brand-100 text-brand-700' :
+                            event.type === 'error' ? 'bg-error-100 text-error-700' :
+                            event.type === 'webhook' ? 'bg-success-100 text-success-700' :
                             'bg-gray-100 text-gray-700'
                           }`}>
                             {event.type}
@@ -569,7 +569,7 @@ export default function WordPressIntegrationDebug() {
                         <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">{event.description}</p>
                         {event.details && (
                           <details className="mt-2">
-                            <summary className="text-xs text-blue-600 cursor-pointer hover:underline">
+                            <summary className="text-xs text-brand-600 cursor-pointer hover:underline">
                               View Details
                             </summary>
                             <pre className="mt-2 text-xs bg-gray-50 dark:bg-gray-700 p-2 rounded border overflow-x-auto">
@@ -631,12 +631,12 @@ export default function WordPressIntegrationDebug() {
                         </td>
                         <td className="px-6 py-4 whitespace-nowrap">
                           {validation.matches ? (
-                            <CheckCircle className="h-4 w-4 text-green-500" />
+                            <CheckCircle className="h-4 w-4 text-success-500" />
                           ) : (
                             <div className="flex items-center space-x-1">
-                              <XCircle className="h-4 w-4 text-red-500" />
+                              <XCircle className="h-4 w-4 text-error-500" />
                               {validation.error && (
-                                <span className="text-xs text-red-600">{validation.error}</span>
+                                <span className="text-xs text-error-600">{validation.error}</span>
                               )}
                             </div>
                           )}
diff --git a/frontend/src/pages/Setup/IndustriesSectorsKeywords.tsx b/frontend/src/pages/Setup/IndustriesSectorsKeywords.tsx
index 4b4ba239..4b9147de 100644
--- a/frontend/src/pages/Setup/IndustriesSectorsKeywords.tsx
+++ b/frontend/src/pages/Setup/IndustriesSectorsKeywords.tsx
@@ -684,18 +684,18 @@ export default function IndustriesSectorsKeywords() {
       {/* Show info banner when no sector is selected */}
       {!activeSector && activeSite && (
         <div className="mx-6 mt-6 mb-4">
-          <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
+          <div className="bg-brand-50 dark:bg-brand-900/20 border border-brand-200 dark:border-brand-800 rounded-lg p-4">
             <div className="flex items-start gap-3">
               <div className="flex-shrink-0">
-                <svg className="w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+                <svg className="w-5 h-5 text-brand-600 dark:text-brand-400 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                   <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
                 </svg>
               </div>
               <div className="flex-1">
-                <h3 className="text-sm font-medium text-blue-900 dark:text-blue-200">
+                <h3 className="text-sm font-medium text-brand-900 dark:text-brand-200">
                   Choose a Topic Area First
                 </h3>
-                <p className="mt-1 text-sm text-blue-700 dark:text-blue-300">
+                <p className="mt-1 text-sm text-brand-700 dark:text-brand-300">
                   Pick a topic area first, then add keywords - You need to choose what you're writing about before adding search terms to target
                 </p>
               </div>
@@ -719,11 +719,11 @@ export default function IndustriesSectorsKeywords() {
         customActions={activeSite && activeSector ? (
           <div className="flex items-center gap-3 px-3 py-1.5 bg-gray-50 dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-gray-700">
             <span className="text-xs font-medium text-gray-600 dark:text-gray-400">
-              <span className="text-green-600 dark:text-green-400 font-bold">{addedCount}</span> in workflow
+              <span className="text-success-600 dark:text-success-400 font-bold">{addedCount}</span> in workflow
             </span>
             <div className="w-px h-4 bg-gray-300 dark:bg-gray-600" />
             <span className="text-xs font-medium text-gray-600 dark:text-gray-400">
-              <span className="text-blue-600 dark:text-blue-400 font-bold">{availableCount}</span> available
+              <span className="text-brand-600 dark:text-brand-400 font-bold">{availableCount}</span> available
             </span>
             {addedCount > 0 && (
               <>
diff --git a/frontend/src/pages/Sites/Content.tsx b/frontend/src/pages/Sites/Content.tsx
index fdb47d2f..b9cb91db 100644
--- a/frontend/src/pages/Sites/Content.tsx
+++ b/frontend/src/pages/Sites/Content.tsx
@@ -228,7 +228,7 @@ export default function SiteContentManager() {
                       {item.title || `Content #${item.id}`}
                     </h3>
                     <div className="flex items-center gap-4 text-xs text-gray-500 dark:text-gray-500">
-                      <span className={`px-2 py-1 rounded ${item.status === 'published' ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' : 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300'}`}>
+                      <span className={`px-2 py-1 rounded ${item.status === 'published' ? 'bg-success-100 text-success-800 dark:bg-success-900 dark:text-success-200' : 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300'}`}>
                         {item.status}
                       </span>
                       {item.content_type && <span>{item.content_type}</span>}
diff --git a/frontend/src/pages/Sites/Dashboard.tsx b/frontend/src/pages/Sites/Dashboard.tsx
index 173776c0..9fd742f5 100644
--- a/frontend/src/pages/Sites/Dashboard.tsx
+++ b/frontend/src/pages/Sites/Dashboard.tsx
@@ -260,72 +260,72 @@ export default function SiteDashboard() {
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
           <button
             onClick={() => navigate(`/sites/${siteId}/pages`)}
-            className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[var(--color-primary)] hover:shadow-lg transition-all group"
+            className="flex items-center gap-4 p-6 rounded-xl border-2 border-gray-200 bg-white hover:border-[var(--color-primary)] hover:shadow-lg transition-all group"
           >
             <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] flex items-center justify-center text-white shadow-lg">
               <PageIcon className="h-6 w-6" />
             </div>
             <div className="flex-1 text-left">
-              <h4 className="font-semibold text-slate-900 mb-1">Manage Pages</h4>
-              <p className="text-sm text-slate-600">View and edit pages</p>
+              <h4 className="font-semibold text-gray-900 mb-1">Manage Pages</h4>
+              <p className="text-sm text-gray-600">View and edit pages</p>
             </div>
-            <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[var(--color-primary)] transition" />
+            <ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-[var(--color-primary)] transition" />
           </button>
 
           <button
             onClick={() => navigate(`/sites/${siteId}/content`)}
-            className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[var(--color-success)] hover:shadow-lg transition-all group"
+            className="flex items-center gap-4 p-6 rounded-xl border-2 border-gray-200 bg-white hover:border-[var(--color-success)] hover:shadow-lg transition-all group"
           >
             <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-success)] to-[var(--color-success-dark)] flex items-center justify-center text-white shadow-lg">
               <FileIcon className="h-6 w-6" />
             </div>
             <div className="flex-1 text-left">
-              <h4 className="font-semibold text-slate-900 mb-1">Manage Content</h4>
-              <p className="text-sm text-slate-600">View and edit content</p>
+              <h4 className="font-semibold text-gray-900 mb-1">Manage Content</h4>
+              <p className="text-sm text-gray-600">View and edit content</p>
             </div>
-            <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[var(--color-success)] transition" />
+            <ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-[var(--color-success)] transition" />
           </button>
 
           <button
             onClick={() => navigate(`/sites/${siteId}/settings?tab=integrations`)}
-            className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[var(--color-purple)] hover:shadow-lg transition-all group"
+            className="flex items-center gap-4 p-6 rounded-xl border-2 border-gray-200 bg-white hover:border-[var(--color-purple)] hover:shadow-lg transition-all group"
           >
             <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-purple)] to-[var(--color-purple-dark)] flex items-center justify-center text-white shadow-lg">
               <PlugInIcon className="h-6 w-6" />
             </div>
             <div className="flex-1 text-left">
-              <h4 className="font-semibold text-slate-900 mb-1">Integrations</h4>
-              <p className="text-sm text-slate-600">Manage connections</p>
+              <h4 className="font-semibold text-gray-900 mb-1">Integrations</h4>
+              <p className="text-sm text-gray-600">Manage connections</p>
             </div>
-            <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[var(--color-purple)] transition" />
+            <ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-[var(--color-purple)] transition" />
           </button>
 
           <button
             onClick={() => navigate(`/sites/${siteId}/sync`)}
-            className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[var(--color-warning)] hover:shadow-lg transition-all group"
+            className="flex items-center gap-4 p-6 rounded-xl border-2 border-gray-200 bg-white hover:border-[var(--color-warning)] hover:shadow-lg transition-all group"
           >
             <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-warning)] to-[var(--color-warning-dark)] flex items-center justify-center text-white shadow-lg">
               <BoltIcon className="h-6 w-6" />
             </div>
             <div className="flex-1 text-left">
-              <h4 className="font-semibold text-slate-900 mb-1">Sync Dashboard</h4>
-              <p className="text-sm text-slate-600">View sync status</p>
+              <h4 className="font-semibold text-gray-900 mb-1">Sync Dashboard</h4>
+              <p className="text-sm text-gray-600">View sync status</p>
             </div>
-            <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[var(--color-warning)] transition" />
+            <ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-[var(--color-warning)] transition" />
           </button>
 
           <button
             onClick={() => navigate(`/sites/${siteId}/deploy`)}
-            className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[var(--color-primary)] hover:shadow-lg transition-all group"
+            className="flex items-center gap-4 p-6 rounded-xl border-2 border-gray-200 bg-white hover:border-[var(--color-primary)] hover:shadow-lg transition-all group"
           >
             <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] flex items-center justify-center text-white shadow-lg">
               <ArrowUpIcon className="h-6 w-6" />
             </div>
             <div className="flex-1 text-left">
-              <h4 className="font-semibold text-slate-900 mb-1">Deploy Site</h4>
-              <p className="text-sm text-slate-600">Deploy to production</p>
+              <h4 className="font-semibold text-gray-900 mb-1">Deploy Site</h4>
+              <p className="text-sm text-gray-600">Deploy to production</p>
             </div>
-            <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[var(--color-primary)] transition" />
+            <ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-[var(--color-primary)] transition" />
           </button>
         </div>
       </ComponentCard>
diff --git a/frontend/src/pages/Sites/DeploymentPanel.tsx b/frontend/src/pages/Sites/DeploymentPanel.tsx
index bb0afe7f..62990cbb 100644
--- a/frontend/src/pages/Sites/DeploymentPanel.tsx
+++ b/frontend/src/pages/Sites/DeploymentPanel.tsx
@@ -28,7 +28,7 @@ export default function DeploymentPanel() {
       />
       
       <Card className="p-8 text-center">
-        <AlertIcon className="w-16 h-16 text-amber-500 mx-auto mb-4" />
+        <AlertIcon className="w-16 h-16 text-warning-500 mx-auto mb-4" />
         <h2 className="text-2xl font-bold mb-2">Feature Deprecated</h2>
         <p className="text-gray-600 dark:text-gray-400 mb-6">
           The SiteBlueprint deployment system has been removed.
diff --git a/frontend/src/pages/Sites/Editor.tsx b/frontend/src/pages/Sites/Editor.tsx
index ed5cf7d7..a0a05c5d 100644
--- a/frontend/src/pages/Sites/Editor.tsx
+++ b/frontend/src/pages/Sites/Editor.tsx
@@ -28,7 +28,7 @@ export default function Editor() {
       />
       
       <Card className="p-8 text-center">
-        <AlertIcon className="w-16 h-16 text-amber-500 mx-auto mb-4" />
+        <AlertIcon className="w-16 h-16 text-warning-500 mx-auto mb-4" />
         <h2 className="text-2xl font-bold mb-2">Feature Deprecated</h2>
         <p className="text-gray-600 dark:text-gray-400 mb-6">
           The SiteBlueprint page editor has been removed.
diff --git a/frontend/src/pages/Sites/List.tsx b/frontend/src/pages/Sites/List.tsx
index 01c3d53c..8ad386b0 100644
--- a/frontend/src/pages/Sites/List.tsx
+++ b/frontend/src/pages/Sites/List.tsx
@@ -388,7 +388,7 @@ export default function SiteList() {
   const renderGridView = () => (
     <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-3">
       {filteredSites.map((site) => (
-        <Card key={site.id} className="rounded-xl border-2 border-slate-200 bg-white dark:border-gray-800 dark:bg-white/3 hover:border-[var(--color-primary)] hover:shadow-lg transition-all">
+        <Card key={site.id} className="rounded-xl border-2 border-gray-200 bg-white dark:border-gray-800 dark:bg-white/3 hover:border-[var(--color-primary)] hover:shadow-lg transition-all">
           <div className="relative p-4 pb-6">
             <div className="flex items-center gap-3 mb-4">
               <div className="size-6 rounded-lg bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] flex items-center justify-center text-white shadow-md flex-shrink-0">
@@ -611,12 +611,12 @@ export default function SiteList() {
                     placeholder="Search sites..."
                     value={searchTerm}
                     onChange={(e) => setSearchTerm(e.target.value)}
-                    className="flex-1 min-w-[200px] h-9 px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    className="flex-1 min-w-[200px] h-9 px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-brand-500"
                   />
                   <select
                     value={siteTypeFilter}
                     onChange={(e) => setSiteTypeFilter(e.target.value)}
-                    className="flex-1 min-w-[140px] h-9 px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    className="flex-1 min-w-[140px] h-9 px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-brand-500"
                   >
                     {SITE_TYPES.map(opt => (
                       <option key={opt.value} value={opt.value}>{opt.label}</option>
@@ -625,7 +625,7 @@ export default function SiteList() {
                   <select
                     value={hostingTypeFilter}
                     onChange={(e) => setHostingTypeFilter(e.target.value)}
-                    className="flex-1 min-w-[140px] h-9 px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    className="flex-1 min-w-[140px] h-9 px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-brand-500"
                   >
                     {HOSTING_TYPES.map(opt => (
                       <option key={opt.value} value={opt.value}>{opt.label}</option>
@@ -634,7 +634,7 @@ export default function SiteList() {
                   <select
                     value={statusFilter}
                     onChange={(e) => setStatusFilter(e.target.value)}
-                    className="flex-1 min-w-[140px] h-9 px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    className="flex-1 min-w-[140px] h-9 px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-brand-500"
                   >
                     {STATUS_OPTIONS.map(opt => (
                       <option key={opt.value} value={opt.value}>{opt.label}</option>
diff --git a/frontend/src/pages/Sites/PageManager.tsx b/frontend/src/pages/Sites/PageManager.tsx
index b00c8371..8ba130aa 100644
--- a/frontend/src/pages/Sites/PageManager.tsx
+++ b/frontend/src/pages/Sites/PageManager.tsx
@@ -67,7 +67,7 @@ const DraggablePageItem: React.FC<{
         isDragging
           ? 'opacity-50 border-brand-500 bg-brand-50 dark:bg-brand-900/20'
           : 'border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800'
-      } ${isSelected ? 'bg-blue-50 dark:bg-blue-900/20 border-blue-300 dark:border-blue-700' : ''}`}
+      } ${isSelected ? 'bg-brand-50 dark:bg-brand-900/20 border-brand-300 dark:border-brand-700' : ''}`}
     >
       <div className="flex items-center gap-4 flex-1">
         <button
@@ -304,7 +304,7 @@ export default function PageManager() {
         <>
           {/* Bulk Actions Bar */}
           {selectedPages.size > 0 && (
-            <Card className="p-4 mb-4 bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800">
+            <Card className="p-4 mb-4 bg-brand-50 dark:bg-brand-900/20 border-brand-200 dark:border-brand-800">
               <div className="flex items-center justify-between">
                 <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
                   {selectedPages.size} page(s) selected
@@ -328,7 +328,7 @@ export default function PageManager() {
                     variant="outline"
                     size="sm"
                     onClick={handleBulkDelete}
-                    className="text-red-600 hover:text-red-700"
+                    className="text-error-600 hover:text-error-700"
                   >
                     <TrashBinIcon className="w-4 h-4 mr-1" />
                     Delete Selected
@@ -343,7 +343,7 @@ export default function PageManager() {
 
           {/* Reorder Save Button */}
           {isReordering && (
-            <Card className="p-4 mb-4 bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800">
+            <Card className="p-4 mb-4 bg-warning-50 dark:bg-warning-900/20 border-warning-200 dark:border-warning-800">
               <div className="flex items-center justify-between">
                 <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
                   Page order changed. Save to apply changes.
diff --git a/frontend/src/pages/Sites/PostEditor.tsx b/frontend/src/pages/Sites/PostEditor.tsx
index 7be48a07..276684a7 100644
--- a/frontend/src/pages/Sites/PostEditor.tsx
+++ b/frontend/src/pages/Sites/PostEditor.tsx
@@ -306,7 +306,7 @@ export default function PostEditor() {
               <CheckCircleIcon className="w-4 h-4 inline mr-2" />
               Validation
               {validationResult && !validationResult.is_valid && (
-                <span className="ml-2 px-2 py-0.5 text-xs bg-red-100 dark:bg-red-900 text-red-600 dark:text-red-400 rounded-full">
+                <span className="ml-2 px-2 py-0.5 text-xs bg-error-100 dark:bg-error-900 text-error-600 dark:text-error-400 rounded-full">
                   {validationResult.validation_errors.length}
                 </span>
               )}
@@ -395,7 +395,7 @@ export default function PostEditor() {
                     {content.taxonomy_terms.map((term) => (
                       <span
                         key={term.id}
-                        className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800 dark:bg-blue-500/20 dark:text-blue-300"
+                        className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-brand-100 text-brand-800 dark:bg-brand-500/20 dark:text-brand-300"
                       >
                         {term.name} ({term.taxonomy})
                       </span>
@@ -456,19 +456,19 @@ export default function PostEditor() {
                   {/* Validation Status */}
                   <div className={`p-4 rounded-lg ${
                     validationResult.is_valid
-                      ? 'bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800'
-                      : 'bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800'
+                      ? 'bg-success-50 dark:bg-success-900/20 border border-success-200 dark:border-success-800'
+                      : 'bg-error-50 dark:bg-error-900/20 border border-error-200 dark:border-error-800'
                   }`}>
                     <div className="flex items-center gap-2">
                       {validationResult.is_valid ? (
-                        <CheckCircleIcon className="w-5 h-5 text-green-600 dark:text-green-400" />
+                        <CheckCircleIcon className="w-5 h-5 text-success-600 dark:text-success-400" />
                       ) : (
-                        <XCircleIcon className="w-5 h-5 text-red-600 dark:text-red-400" />
+                        <XCircleIcon className="w-5 h-5 text-error-600 dark:text-error-400" />
                       )}
                       <span className={`font-medium ${
                         validationResult.is_valid
-                          ? 'text-green-800 dark:text-green-300'
-                          : 'text-red-800 dark:text-red-300'
+                          ? 'text-success-800 dark:text-success-300'
+                          : 'text-error-800 dark:text-error-300'
                       }`}>
                         {validationResult.is_valid
                           ? 'Content is valid and ready to publish'
@@ -493,8 +493,8 @@ export default function PostEditor() {
                         <span className="text-gray-600 dark:text-gray-400">Cluster Mapping:</span>
                         <span className={`ml-2 font-medium ${
                           validationResult.metadata.has_cluster_mapping
-                            ? 'text-green-600 dark:text-green-400'
-                            : 'text-red-600 dark:text-red-400'
+                            ? 'text-success-600 dark:text-success-400'
+                            : 'text-error-600 dark:text-error-400'
                         }`}>
                           {validationResult.metadata.has_cluster_mapping ? 'Yes' : 'No'}
                         </span>
@@ -503,8 +503,8 @@ export default function PostEditor() {
                         <span className="text-gray-600 dark:text-gray-400">Taxonomy Mapping:</span>
                         <span className={`ml-2 font-medium ${
                           validationResult.metadata.has_taxonomy_mapping
-                            ? 'text-green-600 dark:text-green-400'
-                            : 'text-red-600 dark:text-red-400'
+                            ? 'text-success-600 dark:text-success-400'
+                            : 'text-error-600 dark:text-error-400'
                         }`}>
                           {validationResult.metadata.has_taxonomy_mapping ? 'Yes' : 'No'}
                         </span>
@@ -522,14 +522,14 @@ export default function PostEditor() {
                         {validationResult.validation_errors.map((error, index) => (
                           <div
                             key={index}
-                            className="flex items-start gap-2 p-3 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800"
+                            className="flex items-start gap-2 p-3 bg-error-50 dark:bg-error-900/20 rounded-lg border border-error-200 dark:border-error-800"
                           >
-                            <AlertCircleIcon className="w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
+                            <AlertCircleIcon className="w-5 h-5 text-error-600 dark:text-error-400 flex-shrink-0 mt-0.5" />
                             <div className="flex-1">
-                              <div className="text-sm font-medium text-red-800 dark:text-red-300">
+                              <div className="text-sm font-medium text-error-800 dark:text-error-300">
                                 {error.field || error.code}
                               </div>
-                              <div className="text-sm text-red-600 dark:text-red-400 mt-1">
+                              <div className="text-sm text-error-600 dark:text-error-400 mt-1">
                                 {error.message}
                               </div>
                             </div>
@@ -549,14 +549,14 @@ export default function PostEditor() {
                         {validationResult.publish_errors.map((error, index) => (
                           <div
                             key={index}
-                            className="flex items-start gap-2 p-3 bg-orange-50 dark:bg-orange-900/20 rounded-lg border border-orange-200 dark:border-orange-800"
+                            className="flex items-start gap-2 p-3 bg-warning-50 dark:bg-warning-900/20 rounded-lg border border-warning-200 dark:border-warning-800"
                           >
-                            <XCircleIcon className="w-5 h-5 text-orange-600 dark:text-orange-400 flex-shrink-0 mt-0.5" />
+                            <XCircleIcon className="w-5 h-5 text-warning-600 dark:text-warning-400 flex-shrink-0 mt-0.5" />
                             <div className="flex-1">
-                              <div className="text-sm font-medium text-orange-800 dark:text-orange-300">
+                              <div className="text-sm font-medium text-warning-800 dark:text-warning-300">
                                 {error.field || error.code}
                               </div>
-                              <div className="text-sm text-orange-600 dark:text-orange-400 mt-1">
+                              <div className="text-sm text-warning-600 dark:text-warning-400 mt-1">
                                 {error.message}
                               </div>
                             </div>
@@ -645,8 +645,8 @@ export default function PostEditor() {
                     </div>
                     <div className={`text-sm font-medium ${
                       validationResult.is_valid
-                        ? 'text-green-600 dark:text-green-400'
-                        : 'text-red-600 dark:text-red-400'
+                        ? 'text-success-600 dark:text-success-400'
+                        : 'text-error-600 dark:text-error-400'
                     }`}>
                       {validationResult.is_valid ? '✓ Valid' : `✗ ${validationResult.validation_errors.length} error(s)`}
                     </div>
@@ -662,7 +662,7 @@ export default function PostEditor() {
                     {content.cluster_id ? (
                       <button
                         onClick={() => navigate(`/planner/clusters/${content.cluster_id}`)}
-                        className="text-xs text-blue-600 dark:text-blue-400 hover:underline w-full text-left transition-colors focus:outline-none focus:ring-1 focus:ring-blue-500 rounded px-1"
+                        className="text-xs text-brand-600 dark:text-brand-400 hover:underline w-full text-left transition-colors focus:outline-none focus:ring-1 focus:ring-brand-500 rounded px-1"
                         aria-label="View cluster details"
                       >
                         View Cluster →
@@ -673,7 +673,7 @@ export default function PostEditor() {
                     {content.taxonomy_id ? (
                       <button
                         onClick={() => navigate(`/sites/builder?taxonomy=${content.taxonomy_id}`)}
-                        className="text-xs text-blue-600 dark:text-blue-400 hover:underline w-full text-left transition-colors focus:outline-none focus:ring-1 focus:ring-blue-500 rounded px-1"
+                        className="text-xs text-brand-600 dark:text-brand-400 hover:underline w-full text-left transition-colors focus:outline-none focus:ring-1 focus:ring-brand-500 rounded px-1"
                         aria-label="View taxonomy details"
                       >
                         View Taxonomy →
diff --git a/frontend/src/pages/Sites/Settings.tsx b/frontend/src/pages/Sites/Settings.tsx
index 614cc815..7227b8a5 100644
--- a/frontend/src/pages/Sites/Settings.tsx
+++ b/frontend/src/pages/Sites/Settings.tsx
@@ -483,7 +483,7 @@ export default function SiteSettings() {
           <div className="flex items-center gap-3 ml-2">
             <span
               className={`inline-block w-6 h-6 rounded-full ${
-                integrationStatus === 'connected' ? 'bg-green-500' :
+                integrationStatus === 'connected' ? 'bg-success-500' :
                 integrationStatus === 'configured' ? 'bg-brand-500' : 'bg-gray-300'
               }`}
               title={`Integration status: ${
@@ -616,9 +616,9 @@ export default function SiteSettings() {
                 <div className="flex items-center gap-3">
                   <div className="flex items-center gap-2 px-3 py-1.5 rounded-md bg-gray-100 dark:bg-gray-800">
                     <div className={`w-2 h-2 rounded-full ${
-                      wordPressIntegration.sync_status === 'success' ? 'bg-green-500' :
-                      wordPressIntegration.sync_status === 'failed' ? 'bg-red-500' :
-                      'bg-yellow-500'
+                      wordPressIntegration.sync_status === 'success' ? 'bg-success-500' :
+                      wordPressIntegration.sync_status === 'failed' ? 'bg-error-500' :
+                      'bg-warning-500'
                     }`}></div>
                     <span className="text-xs font-medium text-gray-700 dark:text-gray-300">
                       {wordPressIntegration.sync_status === 'success' ? 'Synced' :
@@ -693,7 +693,7 @@ export default function SiteSettings() {
                               )}
                             </div>
                             <div className="flex items-center gap-3">
-                              <span className={`px-2 py-1 text-xs rounded ${data.enabled ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' : 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200'}`}>
+                              <span className={`px-2 py-1 text-xs rounded ${data.enabled ? 'bg-success-100 text-success-800 dark:bg-success-900 dark:text-success-200' : 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200'}`}>
                                 {data.enabled ? 'Enabled' : 'Disabled'}
                               </span>
                               <span className="text-sm text-gray-500">Limit: {data.fetch_limit}</span>
@@ -723,7 +723,7 @@ export default function SiteSettings() {
                               )}
                             </div>
                             <div className="flex items-center gap-3">
-                              <span className={`px-2 py-1 text-xs rounded ${data.enabled ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' : 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200'}`}>
+                              <span className={`px-2 py-1 text-xs rounded ${data.enabled ? 'bg-success-100 text-success-800 dark:bg-success-900 dark:text-success-200' : 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200'}`}>
                                 {data.enabled ? 'Enabled' : 'Disabled'}
                               </span>
                               <span className="text-sm text-gray-500">Limit: {data.fetch_limit}</span>
@@ -1088,7 +1088,7 @@ export default function SiteSettings() {
                                 setSelectedSectors(selectedSectors.filter(s => s !== sector.slug));
                               }
                             }}
-                            className="mt-1 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                            className="mt-1 h-4 w-4 rounded border-gray-300 text-brand-600 focus:ring-brand-500"
                           />
                           <div className="flex-1">
                             <div className="font-medium text-sm text-gray-900 dark:text-white">
diff --git a/frontend/src/pages/Sites/SyncDashboard.tsx b/frontend/src/pages/Sites/SyncDashboard.tsx
index a13a62d2..71fa083d 100644
--- a/frontend/src/pages/Sites/SyncDashboard.tsx
+++ b/frontend/src/pages/Sites/SyncDashboard.tsx
@@ -105,12 +105,12 @@ export default function SyncDashboard() {
     switch (status) {
       case 'healthy':
       case 'success':
-        return <CheckCircleIcon className="w-5 h-5 text-green-600 dark:text-green-400" />;
+        return <CheckCircleIcon className="w-5 h-5 text-success-600 dark:text-success-400" />;
       case 'warning':
-        return <AlertIcon className="w-5 h-5 text-yellow-600 dark:text-yellow-400" />;
+        return <AlertIcon className="w-5 h-5 text-warning-600 dark:text-warning-400" />;
       case 'error':
       case 'failed':
-        return <ErrorIcon className="w-5 h-5 text-red-600 dark:text-red-400" />;
+        return <ErrorIcon className="w-5 h-5 text-error-600 dark:text-error-400" />;
       default:
         return <TimeIcon className="w-5 h-5 text-gray-400" />;
     }
@@ -241,8 +241,8 @@ export default function SyncDashboard() {
               </div>
 
               {integration.error && (
-                <div className="mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
-                  <div className="text-sm text-red-800 dark:text-red-300">{integration.error}</div>
+                <div className="mb-4 p-3 bg-error-50 dark:bg-error-900/20 border border-error-200 dark:border-error-800 rounded-lg">
+                  <div className="text-sm text-error-800 dark:text-error-300">{integration.error}</div>
                 </div>
               )}
 
@@ -313,11 +313,11 @@ export default function SyncDashboard() {
                   </h3>
                   <div className="space-y-2">
                     {mismatches.taxonomies.missing_in_wordpress.length > 0 && (
-                      <div className="p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg">
-                        <div className="text-sm font-medium text-yellow-800 dark:text-yellow-300 mb-1">
+                      <div className="p-3 bg-warning-50 dark:bg-warning-900/20 rounded-lg">
+                        <div className="text-sm font-medium text-warning-800 dark:text-warning-300 mb-1">
                           Missing in WordPress ({mismatches.taxonomies.missing_in_wordpress.length})
                         </div>
-                        <ul className="text-sm text-yellow-700 dark:text-yellow-400 space-y-1">
+                        <ul className="text-sm text-warning-700 dark:text-warning-400 space-y-1">
                           {mismatches.taxonomies.missing_in_wordpress.slice(0, 5).map((item, idx) => (
                             <li key={idx}>• {item.name} ({item.type})</li>
                           ))}
@@ -325,11 +325,11 @@ export default function SyncDashboard() {
                       </div>
                     )}
                     {mismatches.taxonomies.missing_in_igny8.length > 0 && (
-                      <div className="p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
-                        <div className="text-sm font-medium text-blue-800 dark:text-blue-300 mb-1">
+                      <div className="p-3 bg-brand-50 dark:bg-brand-900/20 rounded-lg">
+                        <div className="text-sm font-medium text-brand-800 dark:text-brand-300 mb-1">
                           Missing in IGNY8 ({mismatches.taxonomies.missing_in_igny8.length})
                         </div>
-                        <ul className="text-sm text-blue-700 dark:text-blue-400 space-y-1">
+                        <ul className="text-sm text-brand-700 dark:text-brand-400 space-y-1">
                           {mismatches.taxonomies.missing_in_igny8.slice(0, 5).map((item, idx) => (
                             <li key={idx}>• {item.name} ({item.type})</li>
                           ))}
@@ -350,15 +350,15 @@ export default function SyncDashboard() {
                   </h3>
                   <div className="space-y-2">
                     {mismatches.products.missing_in_wordpress.length > 0 && (
-                      <div className="p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg">
-                        <div className="text-sm text-yellow-800 dark:text-yellow-300">
+                      <div className="p-3 bg-warning-50 dark:bg-warning-900/20 rounded-lg">
+                        <div className="text-sm text-warning-800 dark:text-warning-300">
                           {mismatches.products.missing_in_wordpress.length} product(s) missing in WordPress
                         </div>
                       </div>
                     )}
                     {mismatches.products.missing_in_igny8.length > 0 && (
-                      <div className="p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
-                        <div className="text-sm text-blue-800 dark:text-blue-300">
+                      <div className="p-3 bg-brand-50 dark:bg-brand-900/20 rounded-lg">
+                        <div className="text-sm text-brand-800 dark:text-brand-300">
                           {mismatches.products.missing_in_igny8.length} product(s) missing in IGNY8
                         </div>
                       </div>
@@ -377,15 +377,15 @@ export default function SyncDashboard() {
                   </h3>
                   <div className="space-y-2">
                     {mismatches.posts.missing_in_wordpress.length > 0 && (
-                      <div className="p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg">
-                        <div className="text-sm text-yellow-800 dark:text-yellow-300">
+                      <div className="p-3 bg-warning-50 dark:bg-warning-900/20 rounded-lg">
+                        <div className="text-sm text-warning-800 dark:text-warning-300">
                           {mismatches.posts.missing_in_wordpress.length} post(s) missing in WordPress
                         </div>
                       </div>
                     )}
                     {mismatches.posts.missing_in_igny8.length > 0 && (
-                      <div className="p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
-                        <div className="text-sm text-blue-800 dark:text-blue-300">
+                      <div className="p-3 bg-brand-50 dark:bg-brand-900/20 rounded-lg">
+                        <div className="text-sm text-brand-800 dark:text-brand-300">
                           {mismatches.posts.missing_in_igny8.length} post(s) missing in IGNY8
                         </div>
                       </div>
@@ -449,7 +449,7 @@ export default function SyncDashboard() {
                     </Badge>
                   </div>
                   {log.error && (
-                    <div className="mt-2 text-xs text-red-600 dark:text-red-400">
+                    <div className="mt-2 text-xs text-error-600 dark:text-error-400">
                       {log.error}
                     </div>
                   )}
diff --git a/frontend/src/pages/Thinker/Dashboard.tsx b/frontend/src/pages/Thinker/Dashboard.tsx
index f610d116..a8c88a59 100644
--- a/frontend/src/pages/Thinker/Dashboard.tsx
+++ b/frontend/src/pages/Thinker/Dashboard.tsx
@@ -134,7 +134,7 @@ export default function ThinkerDashboard() {
     colors: ["var(--color-warning)", "var(--color-primary)", "var(--color-purple)", "var(--color-success)"],
     legend: {
       position: "bottom",
-      labels: { colors: "#6b7280" },
+      labels: { colors: "var(--color-gray-500)" },
     },
     dataLabels: {
       enabled: true,
@@ -191,29 +191,29 @@ export default function ThinkerDashboard() {
                 <Link
                   key={module.title}
                   to={module.path}
-                  className="rounded-2xl border-2 border-slate-200 bg-white p-6 hover:shadow-xl hover:-translate-y-1 transition-all group"
+                  className="rounded-2xl border-2 border-gray-200 bg-white p-6 hover:shadow-xl hover:-translate-y-1 transition-all group"
                 >
                   <div className="flex items-start justify-between mb-4">
                     <div className={`inline-flex size-14 rounded-xl bg-gradient-to-br ${module.color} items-center justify-center text-white shadow-lg`}>
                       <Icon className="h-7 w-7" />
                     </div>
                     {module.status === "coming-soon" && (
-                      <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-slate-100 text-slate-600">
+                      <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-600">
                         Soon
                       </span>
                     )}
                   </div>
-                  <h3 className="text-lg font-bold text-slate-900 mb-2">{module.title}</h3>
-                  <p className="text-sm text-slate-600 mb-4">{module.description}</p>
+                  <h3 className="text-lg font-bold text-gray-900 mb-2">{module.title}</h3>
+                  <p className="text-sm text-gray-600 mb-4">{module.description}</p>
                   {module.count > 0 && (
                     <div className="flex items-center justify-between">
-                      <span className="text-2xl font-bold text-slate-900">{module.count}</span>
-                      <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[var(--color-primary)] group-hover:translate-x-1 transition" />
+                      <span className="text-2xl font-bold text-gray-900">{module.count}</span>
+                      <ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-[var(--color-primary)] group-hover:translate-x-1 transition" />
                     </div>
                   )}
                   {module.status === "coming-soon" && (
-                    <div className="mt-4 pt-4 border-t border-slate-200">
-                      <span className="text-xs text-slate-500">Coming soon</span>
+                    <div className="mt-4 pt-4 border-t border-gray-200">
+                      <span className="text-xs text-gray-500">Coming soon</span>
                     </div>
                   )}
                 </Link>
@@ -235,17 +235,17 @@ export default function ThinkerDashboard() {
               {recentPrompts.map((prompt) => (
                 <div
                   key={prompt.id}
-                  className="flex items-center gap-4 p-4 rounded-lg border border-slate-200 bg-white hover:shadow-md transition"
+                  className="flex items-center gap-4 p-4 rounded-lg border border-gray-200 bg-white hover:shadow-md transition"
                 >
                   <div className="size-10 rounded-lg bg-gradient-to-br from-[var(--color-warning)] to-[var(--color-warning-dark)] flex items-center justify-center text-white shadow-md">
                     <FileTextIcon className="h-5 w-5" />
                   </div>
                   <div className="flex-1">
                     <div className="flex items-center justify-between mb-1">
-                      <h4 className="font-semibold text-slate-900">{prompt.name}</h4>
+                      <h4 className="font-semibold text-gray-900">{prompt.name}</h4>
                       <span className="text-xs font-semibold text-[var(--color-primary)]">{prompt.usage} uses</span>
                     </div>
-                    <div className="flex items-center gap-3 text-xs text-slate-600">
+                    <div className="flex items-center gap-3 text-xs text-gray-600">
                       <span>{prompt.category}</span>
                       <span>•</span>
                       <span>{prompt.lastUsed}</span>
@@ -272,8 +272,8 @@ export default function ThinkerDashboard() {
               className="!justify-start !h-auto !py-4"
             >
               <div className="flex-1 text-left">
-                <h4 className="font-semibold text-slate-900 mb-1">New Prompt</h4>
-                <p className="text-sm text-slate-600">Create a reusable prompt template</p>
+                <h4 className="font-semibold text-gray-900 mb-1">New Prompt</h4>
+                <p className="text-sm text-gray-600">Create a reusable prompt template</p>
               </div>
             </Button>
 
@@ -289,8 +289,8 @@ export default function ThinkerDashboard() {
               className="!justify-start !h-auto !py-4"
             >
               <div className="flex-1 text-left">
-                <h4 className="font-semibold text-slate-900 mb-1">New Author Profile</h4>
-                <p className="text-sm text-slate-600">Define a writing voice and style</p>
+                <h4 className="font-semibold text-gray-900 mb-1">New Author Profile</h4>
+                <p className="text-sm text-gray-600">Define a writing voice and style</p>
               </div>
             </Button>
 
@@ -306,8 +306,8 @@ export default function ThinkerDashboard() {
               className="!justify-start !h-auto !py-4"
             >
               <div className="flex-1 text-left">
-                <h4 className="font-semibold text-slate-900 mb-1">New Strategy</h4>
-                <p className="text-sm text-slate-600">Build a content playbook</p>
+                <h4 className="font-semibold text-gray-900 mb-1">New Strategy</h4>
+                <p className="text-sm text-gray-600">Build a content playbook</p>
               </div>
             </Button>
           </div>
@@ -322,8 +322,8 @@ export default function ThinkerDashboard() {
                   <BoltIcon className="h-5 w-5" />
                 </div>
                 <div>
-                  <h4 className="font-semibold text-slate-900 mb-1">Centralized Control</h4>
-                  <p className="text-sm text-slate-600">
+                  <h4 className="font-semibold text-gray-900 mb-1">Centralized Control</h4>
+                  <p className="text-sm text-gray-600">
                     Manage all AI prompts, author voices, and brand guidelines in one place. Changes sync automatically to all content generation.
                   </p>
                 </div>
@@ -333,8 +333,8 @@ export default function ThinkerDashboard() {
                   <CheckCircleIcon className="h-5 w-5" />
                 </div>
                 <div>
-                  <h4 className="font-semibold text-slate-900 mb-1">Version Control</h4>
-                  <p className="text-sm text-slate-600">
+                  <h4 className="font-semibold text-gray-900 mb-1">Version Control</h4>
+                  <p className="text-sm text-gray-600">
                     Track changes to prompts and strategies with full version history. Roll back to previous versions when needed.
                   </p>
                 </div>
@@ -344,8 +344,8 @@ export default function ThinkerDashboard() {
                   <ShootingStarIcon className="h-5 w-5" />
                 </div>
                 <div>
-                  <h4 className="font-semibold text-slate-900 mb-1">Automated Enforcement</h4>
-                  <p className="text-sm text-slate-600">
+                  <h4 className="font-semibold text-gray-900 mb-1">Automated Enforcement</h4>
+                  <p className="text-sm text-gray-600">
                     Every piece of content automatically uses your defined prompts, author profiles, and brand guidelines.
                   </p>
                 </div>
@@ -356,34 +356,34 @@ export default function ThinkerDashboard() {
           <ComponentCard title="Getting Started" desc="Quick guide to using Thinker">
             <div className="space-y-3">
               <div className="flex items-start gap-3">
-                <div className="flex-shrink-0 size-8 rounded-full bg-[#0693e3] text-white flex items-center justify-center font-bold text-sm">
+                <div className="flex-shrink-0 size-8 rounded-full bg-brand-500 text-white flex items-center justify-center font-bold text-sm">
                   1
                 </div>
                 <div>
-                  <h4 className="font-semibold text-slate-900 mb-1">Create Author Profiles</h4>
-                  <p className="text-sm text-slate-600">
+                  <h4 className="font-semibold text-gray-900 mb-1">Create Author Profiles</h4>
+                  <p className="text-sm text-gray-600">
                     Define writing voices and styles that match your brand. Each profile can have unique tone, structure, and guidelines.
                   </p>
                 </div>
               </div>
               <div className="flex items-start gap-3">
-                <div className="flex-shrink-0 size-8 rounded-full bg-[#0bbf87] text-white flex items-center justify-center font-bold text-sm">
+                <div className="flex-shrink-0 size-8 rounded-full bg-success-500 text-white flex items-center justify-center font-bold text-sm">
                   2
                 </div>
                 <div>
-                  <h4 className="font-semibold text-slate-900 mb-1">Build Prompt Library</h4>
-                  <p className="text-sm text-slate-600">
+                  <h4 className="font-semibold text-gray-900 mb-1">Build Prompt Library</h4>
+                  <p className="text-sm text-gray-600">
                     Create reusable prompt templates for different content types. Use variables to make prompts dynamic and flexible.
                   </p>
                 </div>
               </div>
               <div className="flex items-start gap-3">
-                <div className="flex-shrink-0 size-8 rounded-full bg-[#5d4ae3] text-white flex items-center justify-center font-bold text-sm">
+                <div className="flex-shrink-0 size-8 rounded-full bg-purple-500 text-white flex items-center justify-center font-bold text-sm">
                   3
                 </div>
                 <div>
-                  <h4 className="font-semibold text-slate-900 mb-1">Define Strategies</h4>
-                  <p className="text-sm text-slate-600">
+                  <h4 className="font-semibold text-gray-900 mb-1">Define Strategies</h4>
+                  <p className="text-sm text-gray-600">
                     Create content playbooks that combine prompts, profiles, and guidelines. Apply strategies to specific clusters or content types.
                   </p>
                 </div>
diff --git a/frontend/src/pages/Writer/Dashboard.tsx b/frontend/src/pages/Writer/Dashboard.tsx
index af673580..315e8d2a 100644
--- a/frontend/src/pages/Writer/Dashboard.tsx
+++ b/frontend/src/pages/Writer/Dashboard.tsx
@@ -272,7 +272,7 @@ export default function WriterDashboard() {
       description: `${stats?.content.published || 0} pieces published to WordPress`,
       timestamp: new Date(Date.now() - 30 * 60 * 1000),
       icon: PaperPlaneIcon,
-      color: "text-green-600",
+      color: "text-success-600",
     },
     {
       id: 2,
@@ -280,7 +280,7 @@ export default function WriterDashboard() {
       description: `${stats?.content.total || 0} content pieces created`,
       timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000),
       icon: PencilIcon,
-      color: "text-blue-600",
+      color: "text-brand-600",
     },
     {
       id: 3,
@@ -288,7 +288,7 @@ export default function WriterDashboard() {
       description: `${stats?.images.generated || 0} images created`,
       timestamp: new Date(Date.now() - 4 * 60 * 60 * 1000),
       icon: BoxIcon,
-      color: "text-orange-600",
+      color: "text-warning-600",
     },
   ];
 
@@ -305,18 +305,18 @@ export default function WriterDashboard() {
     },
     xaxis: {
       categories: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
-      labels: { style: { colors: "#6b7280" } },
+      labels: { style: { colors: "var(--color-gray-500)" } },
     },
     yaxis: {
-      labels: { style: { colors: "#6b7280" } },
+      labels: { style: { colors: "var(--color-gray-500)" } },
     },
     legend: {
       position: "top",
-      labels: { colors: "#6b7280" },
+      labels: { colors: "var(--color-gray-500)" },
     },
     colors: ["var(--color-primary)", "var(--color-success)", "var(--color-warning)"],
     grid: {
-      borderColor: "#e5e7eb",
+      borderColor: "var(--color-gray-200)",
     },
     fill: {
       type: "gradient",
@@ -352,7 +352,7 @@ export default function WriterDashboard() {
         toolbar: { show: false }
       },
       labels: Object.keys(stats.tasks.byStatus).filter(key => stats.tasks.byStatus[key] > 0),
-      colors: ['#465FFF', '#F59E0B', '#10B981', '#EF4444', '#8B5CF6'],
+      colors: ['var(--color-primary)', 'var(--color-warning)', 'var(--color-success)', 'var(--color-danger)', 'var(--color-purple)'],
       legend: {
         position: 'bottom',
         fontFamily: 'Outfit',
@@ -372,7 +372,7 @@ export default function WriterDashboard() {
                 show: true,
                 fontSize: '24px',
                 fontWeight: 700,
-                color: '#465FFF',
+                color: 'var(--color-primary)',
                 fontFamily: 'Outfit',
                 formatter: () => {
                   const total = Object.values(stats.tasks.byStatus).reduce((a: number, b: number) => a + b, 0);
@@ -403,7 +403,7 @@ export default function WriterDashboard() {
         toolbar: { show: false },
         height: 300
       },
-      colors: ['#465FFF', '#F59E0B', '#10B981'],
+      colors: ['var(--color-primary)', 'var(--color-warning)', 'var(--color-success)'],
       plotOptions: {
         bar: {
           horizontal: false,
@@ -540,21 +540,21 @@ export default function WriterDashboard() {
                 <Link
                   key={module.title}
                   to={module.path}
-                  className="rounded-2xl border-2 border-slate-200 bg-white p-6 hover:shadow-xl hover:-translate-y-1 transition-all group"
+                  className="rounded-2xl border-2 border-gray-200 bg-white p-6 hover:shadow-xl hover:-translate-y-1 transition-all group"
                 >
                   <div className="flex items-start justify-between mb-4">
                     <div className={`inline-flex size-14 rounded-xl bg-gradient-to-br ${module.color} items-center justify-center text-white shadow-lg`}>
                       <Icon className="h-7 w-7" />
                     </div>
                   </div>
-                  <h3 className="text-lg font-bold text-slate-900 mb-2">{module.title}</h3>
-                  <p className="text-sm text-slate-600 mb-4">{module.description}</p>
+                  <h3 className="text-lg font-bold text-gray-900 mb-2">{module.title}</h3>
+                  <p className="text-sm text-gray-600 mb-4">{module.description}</p>
                   <div className="flex items-center justify-between">
                     <div>
-                      <div className="text-2xl font-bold text-slate-900">{module.count}</div>
-                      <div className="text-xs text-slate-500">{module.metric}</div>
+                      <div className="text-2xl font-bold text-gray-900">{module.count}</div>
+                      <div className="text-xs text-gray-500">{module.metric}</div>
                     </div>
-                    <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[var(--color-primary)] group-hover:translate-x-1 transition" />
+                    <ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-[var(--color-primary)] group-hover:translate-x-1 transition" />
                   </div>
                 </Link>
               );
@@ -577,17 +577,17 @@ export default function WriterDashboard() {
                 return (
                   <div
                     key={activity.id}
-                    className="flex items-center gap-4 p-4 rounded-lg border border-slate-200 bg-white hover:shadow-md transition"
+                    className="flex items-center gap-4 p-4 rounded-lg border border-gray-200 bg-white hover:shadow-md transition"
                   >
-                    <div className={`size-10 rounded-lg bg-gradient-to-br from-slate-100 to-slate-200 flex items-center justify-center ${activity.color}`}>
+                    <div className={`size-10 rounded-lg bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center ${activity.color}`}>
                       <Icon className="h-5 w-5" />
                     </div>
                     <div className="flex-1">
                       <div className="flex items-center justify-between mb-1">
-                        <h4 className="font-semibold text-slate-900">{activity.type}</h4>
-                        <span className="text-xs text-slate-500">{formatTimeAgo(activity.timestamp)}</span>
+                        <h4 className="font-semibold text-gray-900">{activity.type}</h4>
+                        <span className="text-xs text-gray-500">{formatTimeAgo(activity.timestamp)}</span>
                       </div>
-                      <p className="text-sm text-slate-600">{activity.description}</p>
+                      <p className="text-sm text-gray-600">{activity.description}</p>
                     </div>
                   </div>
                 );
@@ -674,58 +674,58 @@ export default function WriterDashboard() {
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
             <Link
               to="/writer/tasks"
-              className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[var(--color-primary)] hover:shadow-lg transition-all group"
+              className="flex items-center gap-4 p-6 rounded-xl border-2 border-gray-200 bg-white hover:border-[var(--color-primary)] hover:shadow-lg transition-all group"
             >
               <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] flex items-center justify-center text-white shadow-lg">
                 <FileTextIcon className="h-6 w-6" />
               </div>
               <div className="flex-1 text-left">
-                <h4 className="font-semibold text-slate-900 mb-1">Create Task</h4>
-                <p className="text-sm text-slate-600">New writing task</p>
+                <h4 className="font-semibold text-gray-900 mb-1">Create Task</h4>
+                <p className="text-sm text-gray-600">New writing task</p>
               </div>
-              <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[var(--color-primary)] transition" />
+              <ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-[var(--color-primary)] transition" />
             </Link>
 
             <Link
               to="/writer/content"
-              className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#0bbf87] hover:shadow-lg transition-all group"
+              className="flex items-center gap-4 p-6 rounded-xl border-2 border-gray-200 bg-white hover:border-success-500 hover:shadow-lg transition-all group"
             >
               <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-success)] to-[var(--color-success-dark)] flex items-center justify-center text-white shadow-lg">
                 <PencilIcon className="h-6 w-6" />
               </div>
               <div className="flex-1 text-left">
-                <h4 className="font-semibold text-slate-900 mb-1">Generate Content</h4>
-                <p className="text-sm text-slate-600">AI content creation</p>
+                <h4 className="font-semibold text-gray-900 mb-1">Generate Content</h4>
+                <p className="text-sm text-gray-600">AI content creation</p>
               </div>
-              <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[#0bbf87] transition" />
+              <ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-success-500 transition" />
             </Link>
 
             <Link
               to="/writer/images"
-              className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#ff7a00] hover:shadow-lg transition-all group"
+              className="flex items-center gap-4 p-6 rounded-xl border-2 border-gray-200 bg-white hover:border-warning-500 hover:shadow-lg transition-all group"
             >
               <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-warning)] to-[var(--color-warning-dark)] flex items-center justify-center text-white shadow-lg">
                 <BoxIcon className="h-6 w-6" />
               </div>
               <div className="flex-1 text-left">
-                <h4 className="font-semibold text-slate-900 mb-1">Generate Images</h4>
-                <p className="text-sm text-slate-600">Create visuals</p>
+                <h4 className="font-semibold text-gray-900 mb-1">Generate Images</h4>
+                <p className="text-sm text-gray-600">Create visuals</p>
               </div>
-              <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[#ff7a00] transition" />
+              <ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-warning-500 transition" />
             </Link>
 
             <Link
               to="/writer/published"
-              className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#5d4ae3] hover:shadow-lg transition-all group"
+              className="flex items-center gap-4 p-6 rounded-xl border-2 border-gray-200 bg-white hover:border-purple-500 hover:shadow-lg transition-all group"
             >
               <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-purple)] to-[var(--color-purple-dark)] flex items-center justify-center text-white shadow-lg">
                 <PaperPlaneIcon className="h-6 w-6" />
               </div>
               <div className="flex-1 text-left">
-                <h4 className="font-semibold text-slate-900 mb-1">Publish Content</h4>
-                <p className="text-sm text-slate-600">Publish to WordPress</p>
+                <h4 className="font-semibold text-gray-900 mb-1">Publish Content</h4>
+                <p className="text-sm text-gray-600">Publish to WordPress</p>
               </div>
-              <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[#5d4ae3] transition" />
+              <ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-purple-500 transition" />
             </Link>
           </div>
         </ComponentCard>
@@ -739,8 +739,8 @@ export default function WriterDashboard() {
                   <FileTextIcon className="h-5 w-5" />
                 </div>
                 <div>
-                  <h4 className="font-semibold text-slate-900 mb-1">Task Creation</h4>
-                  <p className="text-sm text-slate-600">
+                  <h4 className="font-semibold text-gray-900 mb-1">Task Creation</h4>
+                  <p className="text-sm text-gray-600">
                     Create writing tasks from content ideas. Each task includes target keywords, outline, and word count requirements.
                   </p>
                 </div>
@@ -750,8 +750,8 @@ export default function WriterDashboard() {
                   <PencilIcon className="h-5 w-5" />
                 </div>
                 <div>
-                  <h4 className="font-semibold text-slate-900 mb-1">AI Content Generation</h4>
-                  <p className="text-sm text-slate-600">
+                  <h4 className="font-semibold text-gray-900 mb-1">AI Content Generation</h4>
+                  <p className="text-sm text-gray-600">
                     Generate full content pieces using AI. Content is created based on your prompts, author profiles, and brand guidelines.
                   </p>
                 </div>
@@ -761,8 +761,8 @@ export default function WriterDashboard() {
                   <BoxIcon className="h-5 w-5" />
                 </div>
                 <div>
-                  <h4 className="font-semibold text-slate-900 mb-1">Image Generation</h4>
-                  <p className="text-sm text-slate-600">
+                  <h4 className="font-semibold text-gray-900 mb-1">Image Generation</h4>
+                  <p className="text-sm text-gray-600">
                     Automatically generate featured images and in-article images for your content. Images are optimized for SEO and engagement.
                   </p>
                 </div>
@@ -773,34 +773,34 @@ export default function WriterDashboard() {
           <ComponentCard title="Getting Started" desc="Quick guide to using Writer">
             <div className="space-y-3">
               <div className="flex items-start gap-3">
-                <div className="flex-shrink-0 size-8 rounded-full bg-[#0693e3] text-white flex items-center justify-center font-bold text-sm">
+                <div className="flex-shrink-0 size-8 rounded-full bg-brand-500 text-white flex items-center justify-center font-bold text-sm">
                   1
                 </div>
                 <div>
-                  <h4 className="font-semibold text-slate-900 mb-1">Create Tasks</h4>
-                  <p className="text-sm text-slate-600">
+                  <h4 className="font-semibold text-gray-900 mb-1">Create Tasks</h4>
+                  <p className="text-sm text-gray-600">
                     Start by creating writing tasks from content ideas in the Planner module. Tasks define what content needs to be written.
                   </p>
                 </div>
               </div>
               <div className="flex items-start gap-3">
-                <div className="flex-shrink-0 size-8 rounded-full bg-[#0bbf87] text-white flex items-center justify-center font-bold text-sm">
+                <div className="flex-shrink-0 size-8 rounded-full bg-success-500 text-white flex items-center justify-center font-bold text-sm">
                   2
                 </div>
                 <div>
-                  <h4 className="font-semibold text-slate-900 mb-1">Generate Content</h4>
-                  <p className="text-sm text-slate-600">
+                  <h4 className="font-semibold text-gray-900 mb-1">Generate Content</h4>
+                  <p className="text-sm text-gray-600">
                     Use AI to generate content from tasks. Review and edit generated content before publishing.
                   </p>
                 </div>
               </div>
               <div className="flex items-start gap-3">
-                <div className="flex-shrink-0 size-8 rounded-full bg-[#ff7a00] text-white flex items-center justify-center font-bold text-sm">
+                <div className="flex-shrink-0 size-8 rounded-full bg-warning-500 text-white flex items-center justify-center font-bold text-sm">
                   3
                 </div>
                 <div>
-                  <h4 className="font-semibold text-slate-900 mb-1">Publish</h4>
-                  <p className="text-sm text-slate-600">
+                  <h4 className="font-semibold text-gray-900 mb-1">Publish</h4>
+                  <p className="text-sm text-gray-600">
                     Once content is reviewed and images are generated, publish directly to WordPress or export for manual publishing.
                   </p>
                 </div>
diff --git a/frontend/src/pages/account/AccountSettingsPage.tsx b/frontend/src/pages/account/AccountSettingsPage.tsx
index 0f5c692d..45bf9943 100644
--- a/frontend/src/pages/account/AccountSettingsPage.tsx
+++ b/frontend/src/pages/account/AccountSettingsPage.tsx
@@ -310,14 +310,14 @@ export default function AccountSettingsPage() {
         {activeTab === 'account' && (
           <div className="space-y-6 max-w-4xl">
             {error && (
-              <div className="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
-                <p className="text-red-800 dark:text-red-200">{error}</p>
+              <div className="p-4 bg-error-50 dark:bg-error-900/20 border border-error-200 dark:border-error-800 rounded-lg">
+                <p className="text-error-800 dark:text-error-200">{error}</p>
               </div>
             )}
 
             {success && (
-              <div className="p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
-                <p className="text-green-800 dark:text-green-200">{success}</p>
+              <div className="p-4 bg-success-50 dark:bg-success-900/20 border border-success-200 dark:border-success-800 rounded-lg">
+                <p className="text-success-800 dark:text-success-200">{success}</p>
               </div>
             )}
 
diff --git a/frontend/src/pages/account/ContentSettingsPage.tsx b/frontend/src/pages/account/ContentSettingsPage.tsx
index f8d693e8..b81c40df 100644
--- a/frontend/src/pages/account/ContentSettingsPage.tsx
+++ b/frontend/src/pages/account/ContentSettingsPage.tsx
@@ -345,8 +345,8 @@ export default function ContentSettingsPage() {
           <div className="space-y-6 max-w-4xl">
             <Card className="p-6">
               <div className="flex items-center gap-3 mb-6">
-                <div className="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg">
-                  <FileText className="w-5 h-5 text-blue-600 dark:text-blue-400" />
+                <div className="p-2 bg-brand-100 dark:bg-brand-900/30 rounded-lg">
+                  <FileText className="w-5 h-5 text-brand-600 dark:text-brand-400" />
                 </div>
                 <div>
                   <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Content Generation</h2>
@@ -423,8 +423,8 @@ export default function ContentSettingsPage() {
           <div className="space-y-6 max-w-4xl">
             <Card className="p-6">
               <div className="flex items-center gap-3 mb-6">
-                <div className="p-2 bg-green-100 dark:bg-green-900/30 rounded-lg">
-                  <Send className="w-5 h-5 text-green-600 dark:text-green-400" />
+                <div className="p-2 bg-success-100 dark:bg-success-900/30 rounded-lg">
+                  <Send className="w-5 h-5 text-success-600 dark:text-success-400" />
                 </div>
                 <div>
                   <h2 className="text-lg font-semibold text-gray-900 dark:text-white">WordPress Publishing</h2>
@@ -451,8 +451,8 @@ export default function ContentSettingsPage() {
                   </div>
                   
                   {publishingSettings.autoPublishEnabled && (
-                    <div className="mt-4 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
-                      <p className="text-sm text-blue-800 dark:text-blue-200">
+                    <div className="mt-4 p-3 bg-brand-50 dark:bg-brand-900/20 border border-brand-200 dark:border-brand-800 rounded-lg">
+                      <p className="text-sm text-brand-800 dark:text-brand-200">
                         Articles will be published automatically once they pass review. You can still manually review them first if needed.
                       </p>
                     </div>
@@ -549,7 +549,7 @@ export default function ContentSettingsPage() {
                 {/* Row 2: Featured Image Size */}
                 <div>
                   <Label className="mb-2">Featured Image</Label>
-                  <div className="p-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-gradient-to-r from-purple-500 to-blue-500 text-white">
+                  <div className="p-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-gradient-to-r from-purple-500 to-brand-500 text-white">
                     <div className="flex items-center justify-between mb-3">
                       <div className="font-medium">Featured Image Size</div>
                       <div className="text-xs bg-white/20 px-2 py-1 rounded">Always Enabled</div>
diff --git a/frontend/src/pages/account/NotificationsPage.tsx b/frontend/src/pages/account/NotificationsPage.tsx
index c1f91d0a..a8bbd757 100644
--- a/frontend/src/pages/account/NotificationsPage.tsx
+++ b/frontend/src/pages/account/NotificationsPage.tsx
@@ -68,13 +68,13 @@ export default function NotificationsPage() {
   const getSeverityIcon = (severity: string) => {
     switch (severity) {
       case 'success':
-        return <CheckCircle className="w-5 h-5 text-green-500" />;
+        return <CheckCircle className="w-5 h-5 text-success-500" />;
       case 'warning':
-        return <AlertTriangle className="w-5 h-5 text-yellow-500" />;
+        return <AlertTriangle className="w-5 h-5 text-warning-500" />;
       case 'error':
-        return <XCircle className="w-5 h-5 text-red-500" />;
+        return <XCircle className="w-5 h-5 text-error-500" />;
       default:
-        return <Info className="w-5 h-5 text-blue-500" />;
+        return <Info className="w-5 h-5 text-brand-500" />;
     }
   };
 
@@ -190,7 +190,7 @@ export default function NotificationsPage() {
             </h1>
             <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
               {unreadCount > 0 ? (
-                <span className="font-medium text-blue-600 dark:text-blue-400">
+                <span className="font-medium text-brand-600 dark:text-brand-400">
                   {unreadCount} unread notification{unreadCount !== 1 ? 's' : ''}
                 </span>
               ) : (
@@ -313,7 +313,7 @@ export default function NotificationsPage() {
         <Card className="overflow-hidden">
           {loading ? (
             <div className="flex items-center justify-center p-12">
-              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-brand-600"></div>
             </div>
           ) : filteredNotifications.length === 0 ? (
             <div className="text-center p-12">
@@ -330,7 +330,7 @@ export default function NotificationsPage() {
                 <div
                   key={notification.id}
                   className={`p-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors ${
-                    !notification.is_read ? 'bg-blue-50 dark:bg-blue-900/10' : ''
+                    !notification.is_read ? 'bg-brand-50 dark:bg-brand-900/10' : ''
                   }`}
                 >
                   <div className="flex items-start gap-4">
@@ -347,7 +347,7 @@ export default function NotificationsPage() {
                             className={`text-base font-medium ${
                               notification.is_read
                                 ? 'text-gray-900 dark:text-white'
-                                : 'text-blue-900 dark:text-blue-100'
+                                : 'text-brand-900 dark:text-brand-100'
                             }`}
                           >
                             {notification.title}
@@ -387,7 +387,7 @@ export default function NotificationsPage() {
                             variant="ghost"
                             size="sm"
                             onClick={() => handleDelete(notification.id)}
-                            className="text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-900/20"
+                            className="text-error-600 hover:text-error-700 hover:bg-error-50 dark:hover:bg-error-900/20"
                           >
                             <Trash2 className="w-4 h-4" />
                           </Button>
diff --git a/frontend/src/pages/account/PlansAndBillingPage.tsx b/frontend/src/pages/account/PlansAndBillingPage.tsx
index 11668b79..8e846577 100644
--- a/frontend/src/pages/account/PlansAndBillingPage.tsx
+++ b/frontend/src/pages/account/PlansAndBillingPage.tsx
@@ -381,7 +381,7 @@ export default function PlansAndBillingPage() {
 
       {/* Activation / pending payment notice */}
       {!hasActivePlan && (
-        <div className="mb-4 p-4 rounded-lg border border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-800 dark:bg-amber-900/20 dark:text-amber-200">
+        <div className="mb-4 p-4 rounded-lg border border-warning-200 bg-warning-50 text-warning-800 dark:border-warning-800 dark:bg-warning-900/20 dark:text-warning-200">
           No active plan. Choose a plan below to activate your account.
         </div>
       )}
@@ -392,9 +392,9 @@ export default function PlansAndBillingPage() {
       )}
 
       {error && (
-        <div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg flex items-center gap-3">
-          <AlertCircle className="w-5 h-5 text-red-600" />
-          <p className="text-red-800 dark:text-red-200">{error}</p>
+        <div className="mb-6 p-4 bg-error-50 dark:bg-error-900/20 border border-error-200 dark:border-error-800 rounded-lg flex items-center gap-3">
+          <AlertCircle className="w-5 h-5 text-error-600" />
+          <p className="text-error-800 dark:text-error-200">{error}</p>
         </div>
       )}
 
@@ -409,7 +409,7 @@ export default function PlansAndBillingPage() {
               <Card className="p-6 lg:col-span-2">
                 <h2 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Your Current Plan</h2>
                 {!hasActivePlan && (
-                  <div className="p-4 mb-4 rounded-lg border border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-800 dark:bg-amber-900/20 dark:text-amber-200 flex items-start gap-3">
+                  <div className="p-4 mb-4 rounded-lg border border-warning-200 bg-warning-50 text-warning-800 dark:border-warning-800 dark:bg-warning-900/20 dark:text-warning-200 flex items-start gap-3">
                     <AlertCircle className="w-5 h-5 mt-0.5 flex-shrink-0" />
                     <div>
                       <p className="font-medium">No Active Plan</p>
@@ -843,24 +843,24 @@ export default function PlansAndBillingPage() {
               </button>
             </div>
             <div className="p-6 space-y-4">
-              <div className="flex items-start gap-3 p-4 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg">
-                <AlertCircle className="w-5 h-5 text-amber-600 dark:text-amber-400 mt-0.5 flex-shrink-0" />
-                <div className="text-sm text-amber-800 dark:text-amber-200">
+              <div className="flex items-start gap-3 p-4 bg-warning-50 dark:bg-warning-900/20 border border-warning-200 dark:border-warning-800 rounded-lg">
+                <AlertCircle className="w-5 h-5 text-warning-600 dark:text-warning-400 mt-0.5 flex-shrink-0" />
+                <div className="text-sm text-warning-800 dark:text-warning-200">
                   <p className="font-medium mb-1">Are you sure you want to cancel?</p>
                   <p>Your subscription will remain active until the end of your current billing period. After that:</p>
                 </div>
               </div>
               <ul className="text-sm text-gray-600 dark:text-gray-400 space-y-2 pl-2">
                 <li className="flex items-start gap-2">
-                  <span className="text-red-500 mt-1">•</span>
+                  <span className="text-error-500 mt-1">•</span>
                   <span>You'll lose access to premium features</span>
                 </li>
                 <li className="flex items-start gap-2">
-                  <span className="text-red-500 mt-1">•</span>
+                  <span className="text-error-500 mt-1">•</span>
                   <span>Remaining credits will be preserved for 30 days</span>
                 </li>
                 <li className="flex items-start gap-2">
-                  <span className="text-red-500 mt-1">•</span>
+                  <span className="text-error-500 mt-1">•</span>
                   <span>You can resubscribe anytime to restore access</span>
                 </li>
               </ul>
diff --git a/frontend/src/pages/account/PurchaseCreditsPage.tsx b/frontend/src/pages/account/PurchaseCreditsPage.tsx
index fdab1a09..28efaa1c 100644
--- a/frontend/src/pages/account/PurchaseCreditsPage.tsx
+++ b/frontend/src/pages/account/PurchaseCreditsPage.tsx
@@ -221,9 +221,9 @@ export default function PurchaseCreditsPage() {
           <h3 className="text-lg font-semibold mb-4">Submit Payment Proof</h3>
 
           {error && (
-            <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-4 flex items-start gap-2">
-              <AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
-              <p className="text-red-800 text-sm">{error}</p>
+            <div className="bg-error-50 border border-error-200 rounded-lg p-4 mb-4 flex items-start gap-2">
+              <AlertCircle className="w-5 h-5 text-error-600 flex-shrink-0 mt-0.5" />
+              <p className="text-error-800 text-sm">{error}</p>
             </div>
           )}
 
@@ -298,9 +298,9 @@ export default function PurchaseCreditsPage() {
         </p>
 
         {error && (
-          <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6 flex items-start gap-2">
-            <AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
-            <p className="text-red-800">{error}</p>
+          <div className="bg-error-50 border border-error-200 rounded-lg p-4 mb-6 flex items-start gap-2">
+            <AlertCircle className="w-5 h-5 text-error-600 flex-shrink-0 mt-0.5" />
+            <p className="text-error-800">{error}</p>
           </div>
         )}
 
@@ -316,10 +316,10 @@ export default function PurchaseCreditsPage() {
                   selectedPackage?.id === pkg.id
                     ? 'border-[var(--color-brand-500)] bg-[var(--color-brand-50)]'
                     : 'border-gray-200 hover:border-[var(--color-brand-300)] bg-white'
-                } ${pkg.is_featured ? 'ring-2 ring-yellow-400' : ''}`}
+                } ${pkg.is_featured ? 'ring-2 ring-warning-400' : ''}`}
               >
                 {pkg.is_featured && (
-                  <div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-yellow-400 text-yellow-900 text-xs font-bold px-3 py-1 rounded-full">
+                  <div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-warning-400 text-warning-900 text-xs font-bold px-3 py-1 rounded-full">
                     FEATURED
                   </div>
                 )}
@@ -332,7 +332,7 @@ export default function PurchaseCreditsPage() {
                   <div className="text-sm text-gray-600 mb-3">credits</div>
                   <div className="text-2xl font-bold mb-1">${pkg.price}</div>
                   {pkg.discount_percentage > 0 && (
-                    <div className="text-sm text-green-600 font-semibold">
+                    <div className="text-sm text-success-600 font-semibold">
                       Save {pkg.discount_percentage}%
                     </div>
                   )}
diff --git a/frontend/src/pages/account/UsageAnalyticsPage.tsx b/frontend/src/pages/account/UsageAnalyticsPage.tsx
index 7a5124f3..bb655064 100644
--- a/frontend/src/pages/account/UsageAnalyticsPage.tsx
+++ b/frontend/src/pages/account/UsageAnalyticsPage.tsx
@@ -140,14 +140,14 @@ export default function UsageAnalyticsPage() {
             </div>
           </Card>
           
-          <Card className="p-4 bg-gradient-to-br from-indigo-50 to-indigo-100 dark:from-indigo-900/20 dark:to-indigo-800/10 border-indigo-200 dark:border-indigo-700">
+          <Card className="p-4 bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/10 border-purple-200 dark:border-purple-700">
             <div className="flex items-center gap-3">
-              <div className="p-2 bg-indigo-500 rounded-lg">
+              <div className="p-2 bg-purple-500 rounded-lg">
                 <Calendar className="w-5 h-5 text-white" />
               </div>
               <div>
-                <div className="text-xs text-indigo-700 dark:text-indigo-300">Usage %</div>
-                <div className="text-2xl font-bold text-indigo-600 dark:text-indigo-400">
+                <div className="text-xs text-purple-700 dark:text-purple-300">Usage %</div>
+                <div className="text-2xl font-bold text-purple-600 dark:text-purple-400">
                   {creditBalance.plan_credits_per_month > 0
                     ? Math.round((creditBalance.credits_used_this_month / creditBalance.plan_credits_per_month) * 100)
                     : 0}%
diff --git a/frontend/src/pages/settings/ProfileSettingsPage.tsx b/frontend/src/pages/settings/ProfileSettingsPage.tsx
index d6c6c780..dccf91ba 100644
--- a/frontend/src/pages/settings/ProfileSettingsPage.tsx
+++ b/frontend/src/pages/settings/ProfileSettingsPage.tsx
@@ -41,7 +41,7 @@ export default function ProfileSettingsPage() {
         <button
           onClick={handleSave}
           disabled={saving}
-          className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"
+          className="flex items-center gap-2 px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 disabled:opacity-50"
         >
           {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
           {saving ? 'Saving...' : '✓ Save My Settings'}
@@ -60,7 +60,7 @@ export default function ProfileSettingsPage() {
                 type="text"
                 value={profile.firstName}
                 onChange={(e) => setProfile({ ...profile, firstName: e.target.value })}
-                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-brand-500 dark:bg-gray-800"
               />
             </div>
             <div>
@@ -71,7 +71,7 @@ export default function ProfileSettingsPage() {
                 type="text"
                 value={profile.lastName}
                 onChange={(e) => setProfile({ ...profile, lastName: e.target.value })}
-                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-brand-500 dark:bg-gray-800"
               />
             </div>
             <div>
@@ -82,7 +82,7 @@ export default function ProfileSettingsPage() {
                 type="email"
                 value={profile.email}
                 onChange={(e) => setProfile({ ...profile, email: e.target.value })}
-                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-brand-500 dark:bg-gray-800"
               />
             </div>
             <div>
@@ -93,7 +93,7 @@ export default function ProfileSettingsPage() {
                 type="tel"
                 value={profile.phone}
                 onChange={(e) => setProfile({ ...profile, phone: e.target.value })}
-                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-brand-500 dark:bg-gray-800"
               />
             </div>
           </div>
@@ -109,7 +109,7 @@ export default function ProfileSettingsPage() {
               <select
                 value={profile.timezone}
                 onChange={(e) => setProfile({ ...profile, timezone: e.target.value })}
-                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-brand-500 dark:bg-gray-800"
               >
                 <option value="America/New_York">Eastern Time</option>
                 <option value="America/Chicago">Central Time</option>
@@ -125,7 +125,7 @@ export default function ProfileSettingsPage() {
               <select
                 value={profile.language}
                 onChange={(e) => setProfile({ ...profile, language: e.target.value })}
-                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-brand-500 dark:bg-gray-800"
               >
                 <option value="en">English</option>
                 <option value="es">Spanish</option>
@@ -152,7 +152,7 @@ export default function ProfileSettingsPage() {
                 type="checkbox"
                 checked={profile.emailNotifications}
                 onChange={(e) => setProfile({ ...profile, emailNotifications: e.target.checked })}
-                className="w-5 h-5 text-blue-600 rounded focus:ring-blue-500"
+                className="w-5 h-5 text-brand-600 rounded focus:ring-brand-500"
               />
             </div>
             <div className="flex items-center justify-between">
@@ -166,7 +166,7 @@ export default function ProfileSettingsPage() {
                 type="checkbox"
                 checked={profile.marketingEmails}
                 onChange={(e) => setProfile({ ...profile, marketingEmails: e.target.checked })}
-                className="w-5 h-5 text-blue-600 rounded focus:ring-blue-500"
+                className="w-5 h-5 text-brand-600 rounded focus:ring-brand-500"
               />
             </div>
           </div>
diff --git a/frontend/src/store/notificationStore.ts b/frontend/src/store/notificationStore.ts
index 7cabbb1a..7c2c83eb 100644
--- a/frontend/src/store/notificationStore.ts
+++ b/frontend/src/store/notificationStore.ts
@@ -311,24 +311,24 @@ export function getNotificationColors(type: NotificationType): {
 } {
   const colors = {
     success: {
-      bg: 'bg-green-50 dark:bg-green-900/20',
-      icon: 'text-green-500',
-      border: 'border-green-200 dark:border-green-800',
+      bg: 'bg-success-50 dark:bg-success-900/20',
+      icon: 'text-success-500',
+      border: 'border-success-200 dark:border-success-800',
     },
     error: {
-      bg: 'bg-red-50 dark:bg-red-900/20',
-      icon: 'text-red-500',
-      border: 'border-red-200 dark:border-red-800',
+      bg: 'bg-error-50 dark:bg-error-900/20',
+      icon: 'text-error-500',
+      border: 'border-error-200 dark:border-error-800',
     },
     warning: {
-      bg: 'bg-amber-50 dark:bg-amber-900/20',
-      icon: 'text-amber-500',
-      border: 'border-amber-200 dark:border-amber-800',
+      bg: 'bg-warning-50 dark:bg-warning-900/20',
+      icon: 'text-warning-500',
+      border: 'border-warning-200 dark:border-warning-800',
     },
     info: {
-      bg: 'bg-blue-50 dark:bg-blue-900/20',
-      icon: 'text-blue-500',
-      border: 'border-blue-200 dark:border-blue-800',
+      bg: 'bg-brand-50 dark:bg-brand-900/20',
+      icon: 'text-brand-500',
+      border: 'border-brand-200 dark:border-brand-800',
     },
   };
   
diff --git a/frontend/src/styles/cms/components.ts b/frontend/src/styles/cms/components.ts
index e2358559..df98df89 100644
--- a/frontend/src/styles/cms/components.ts
+++ b/frontend/src/styles/cms/components.ts
@@ -69,82 +69,82 @@ export interface LinkStyles {
 export const DEFAULT_COMPONENT_STYLES: ComponentStyles = {
   button: {
     primary: {
-      background: '#3b82f6',
-      color: '#ffffff',
+      background: 'var(--color-primary, #2C7AA1)',
+      color: 'var(--color-white, #ffffff)',
       hover: {
-        background: '#2563eb',
-        color: '#ffffff',
+        background: 'var(--color-brand-700, #236185)',
+        color: 'var(--color-white, #ffffff)',
       },
       active: {
-        background: '#1d4ed8',
-        color: '#ffffff',
+        background: 'var(--color-brand-800, #1a4963)',
+        color: 'var(--color-white, #ffffff)',
       },
     },
     secondary: {
-      background: '#6b7280',
-      color: '#ffffff',
+      background: 'var(--color-gray-500, #6b7280)',
+      color: 'var(--color-white, #ffffff)',
       hover: {
-        background: '#4b5563',
-        color: '#ffffff',
+        background: 'var(--color-gray-600, #4b5563)',
+        color: 'var(--color-white, #ffffff)',
       },
       active: {
-        background: '#374151',
-        color: '#ffffff',
+        background: 'var(--color-gray-700, #374151)',
+        color: 'var(--color-white, #ffffff)',
       },
     },
     outline: {
       background: 'transparent',
-      color: '#3b82f6',
-      border: '#3b82f6',
+      color: 'var(--color-primary, #2C7AA1)',
+      border: 'var(--color-primary, #2C7AA1)',
       hover: {
-        background: '#3b82f6',
-        color: '#ffffff',
-        border: '#3b82f6',
+        background: 'var(--color-primary, #2C7AA1)',
+        color: 'var(--color-white, #ffffff)',
+        border: 'var(--color-primary, #2C7AA1)',
       },
       active: {
-        background: '#2563eb',
-        color: '#ffffff',
+        background: 'var(--color-brand-700, #236185)',
+        color: 'var(--color-white, #ffffff)',
       },
     },
     ghost: {
       background: 'transparent',
-      color: '#6b7280',
+      color: 'var(--color-gray-500, #6b7280)',
       hover: {
-        background: '#f3f4f6',
-        color: '#1f2937',
+        background: 'var(--color-gray-100, #f3f4f6)',
+        color: 'var(--color-gray-800, #1f2937)',
       },
       active: {
-        background: '#e5e7eb',
-        color: '#111827',
+        background: 'var(--color-gray-200, #e5e7eb)',
+        color: 'var(--color-gray-900, #111827)',
       },
     },
   },
   card: {
-    background: '#ffffff',
-    border: '#e5e7eb',
+    background: 'var(--color-white, #ffffff)',
+    border: 'var(--color-gray-200, #e5e7eb)',
     borderRadius: '0.5rem',
     padding: '1.5rem',
     shadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1)',
   },
   input: {
-    background: '#ffffff',
-    border: '#d1d5db',
+    background: 'var(--color-white, #ffffff)',
+    border: 'var(--color-gray-300, #d1d5db)',
     borderRadius: '0.375rem',
     padding: '0.5rem 0.75rem',
     focus: {
-      border: '#3b82f6',
-      ring: '0 0 0 3px rgba(59, 130, 246, 0.1)',
+      border: 'var(--color-primary, #2C7AA1)',
+      ring: '0 0 0 3px color-mix(in oklch, var(--color-primary) 10%, transparent)',
     },
   },
   heading: {
     fontFamily: 'Inter, system-ui, sans-serif',
     fontWeight: '700',
     lineHeight: '1.2',
-    color: '#111827',
+    color: 'var(--color-gray-900, #111827)',
   },
   link: {
-    color: '#3b82f6',
-    hoverColor: '#2563eb',
+    color: 'var(--color-primary, #2C7AA1)',
+    hoverColor: 'var(--color-brand-700, #236185)',
     underline: false,
   },
 };
diff --git a/frontend/src/styles/cms/presets.ts b/frontend/src/styles/cms/presets.ts
index 248a4adb..556f8fcc 100644
--- a/frontend/src/styles/cms/presets.ts
+++ b/frontend/src/styles/cms/presets.ts
@@ -34,12 +34,12 @@ export const STYLE_PRESETS: StylePreset[] = [
     name: 'Modern',
     description: 'Clean, contemporary design with vibrant colors',
     colors: {
-      primary: '#3b82f6',
-      secondary: '#8b5cf6',
-      accent: '#10b981',
-      background: '#ffffff',
-      text: '#1f2937',
-      border: '#e5e7eb',
+      primary: 'var(--color-primary, #2C7AA1)',
+      secondary: 'var(--color-purple, #2C40A1)',
+      accent: 'var(--color-success, #2CA18E)',
+      background: 'var(--color-white, #ffffff)',
+      text: 'var(--color-gray-800, #1f2937)',
+      border: 'var(--color-gray-200, #e5e7eb)',
     },
     typography: {
       fontFamily: 'Inter, system-ui, sans-serif',
@@ -57,12 +57,12 @@ export const STYLE_PRESETS: StylePreset[] = [
     name: 'Classic',
     description: 'Traditional, professional design',
     colors: {
-      primary: '#1e40af',
-      secondary: '#6b7280',
-      accent: '#059669',
-      background: '#f9fafb',
-      text: '#111827',
-      border: '#d1d5db',
+      primary: 'var(--color-brand-700, #236185)',
+      secondary: 'var(--color-gray-500, #6b7280)',
+      accent: 'var(--color-success-600, #228a7a)',
+      background: 'var(--color-gray-50, #f9fafb)',
+      text: 'var(--color-gray-900, #111827)',
+      border: 'var(--color-gray-300, #d1d5db)',
     },
     typography: {
       fontFamily: 'Georgia, serif',
@@ -80,12 +80,12 @@ export const STYLE_PRESETS: StylePreset[] = [
     name: 'Minimal',
     description: 'Minimalist design with ample whitespace',
     colors: {
-      primary: '#000000',
-      secondary: '#4b5563',
-      accent: '#6b7280',
-      background: '#ffffff',
-      text: '#111827',
-      border: '#f3f4f6',
+      primary: 'var(--color-gray-900, #000000)',
+      secondary: 'var(--color-gray-600, #4b5563)',
+      accent: 'var(--color-gray-500, #6b7280)',
+      background: 'var(--color-white, #ffffff)',
+      text: 'var(--color-gray-900, #111827)',
+      border: 'var(--color-gray-100, #f3f4f6)',
     },
     typography: {
       fontFamily: 'Helvetica, Arial, sans-serif',
@@ -103,12 +103,12 @@ export const STYLE_PRESETS: StylePreset[] = [
     name: 'Bold',
     description: 'High contrast, bold design',
     colors: {
-      primary: '#dc2626',
-      secondary: '#ea580c',
-      accent: '#f59e0b',
-      background: '#ffffff',
-      text: '#000000',
-      border: '#000000',
+      primary: 'var(--color-danger, #A12C40)',
+      secondary: 'var(--color-warning-600, #c28a26)',
+      accent: 'var(--color-warning, #D9A12C)',
+      background: 'var(--color-white, #ffffff)',
+      text: 'var(--color-gray-900, #000000)',
+      border: 'var(--color-gray-900, #000000)',
     },
     typography: {
       fontFamily: 'Arial Black, sans-serif',
@@ -126,12 +126,12 @@ export const STYLE_PRESETS: StylePreset[] = [
     name: 'Elegant',
     description: 'Sophisticated, refined design',
     colors: {
-      primary: '#7c3aed',
-      secondary: '#a855f7',
-      accent: '#ec4899',
-      background: '#faf5ff',
-      text: '#1e1b4b',
-      border: '#e9d5ff',
+      primary: 'var(--color-purple, #2C40A1)',
+      secondary: 'var(--color-purple-400, #5f73d1)',
+      accent: 'var(--color-purple-300, #8895e0)',
+      background: 'var(--color-purple-50, #f0f2fc)',
+      text: 'var(--color-purple-900, #1a2660)',
+      border: 'var(--color-purple-200, #b1baeb)',
     },
     typography: {
       fontFamily: 'Playfair Display, serif',
@@ -149,12 +149,12 @@ export const STYLE_PRESETS: StylePreset[] = [
     name: 'Tech',
     description: 'Modern tech startup aesthetic',
     colors: {
-      primary: '#06b6d4',
-      secondary: '#3b82f6',
-      accent: '#8b5cf6',
-      background: '#0f172a',
-      text: '#f1f5f9',
-      border: '#1e293b',
+      primary: 'var(--color-brand-400, #4899bd)',
+      secondary: 'var(--color-primary, #2C7AA1)',
+      accent: 'var(--color-purple, #2C40A1)',
+      background: 'var(--color-gray-900, #0f172a)',
+      text: 'var(--color-gray-100, #f1f5f9)',
+      border: 'var(--color-gray-800, #1e293b)',
     },
     typography: {
       fontFamily: 'SF Pro Display, system-ui, sans-serif',
diff --git a/frontend/src/styles/tokens.css b/frontend/src/styles/tokens.css
index deef4bcf..97a1841a 100644
--- a/frontend/src/styles/tokens.css
+++ b/frontend/src/styles/tokens.css
@@ -67,11 +67,11 @@
    DARK MODE OVERRIDES
    =================================================================== */
 .dark {
-  --color-surface: #1f2937;
-  --color-panel: #1f2937;
-  --color-panel-alt: #111827;
-  --color-text: #e5eaf0;
-  --color-text-dim: #9ca3af;
-  --color-stroke: #374151;
+  --color-surface: #1A2B3C;           /* Charcoal navy (matches --color-navy) */
+  --color-panel: #243A4D;             /* Slightly lighter navy for cards */
+  --color-panel-alt: #142230;         /* Deeper navy for nested panels */
+  --color-text: #E8F0F4;              /* Cool off-white (matches --color-text-light) */
+  --color-text-dim: #8A9BAC;          /* Muted blue-gray for secondary text */
+  --color-stroke: #2E4A5E;            /* Blue-tinted border color */
 }
 
diff --git a/frontend/src/templates/ContentViewTemplate.tsx b/frontend/src/templates/ContentViewTemplate.tsx
index fd862f0a..cf5c87d6 100644
--- a/frontend/src/templates/ContentViewTemplate.tsx
+++ b/frontend/src/templates/ContentViewTemplate.tsx
@@ -39,11 +39,11 @@ interface ParsedArticle {
 }
 
 const imageStatusClassMap: Record<string, string> = {
-  generated: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-200',
-  pending: 'bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-200',
-  queued: 'bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-200',
-  failed: 'bg-rose-100 text-rose-700 dark:bg-rose-500/20 dark:text-rose-200',
-  error: 'bg-rose-100 text-rose-700 dark:bg-rose-500/20 dark:text-rose-200',
+  generated: 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-200',
+  pending: 'bg-warning-100 text-warning-700 dark:bg-warning-500/20 dark:text-warning-200',
+  queued: 'bg-warning-100 text-warning-700 dark:bg-warning-500/20 dark:text-warning-200',
+  failed: 'bg-error-100 text-error-700 dark:bg-error-500/20 dark:text-error-200',
+  error: 'bg-error-100 text-error-700 dark:bg-error-500/20 dark:text-error-200',
 };
 
 const serializeNodes = (nodes: Node[]): string =>
@@ -207,7 +207,7 @@ const getImageSrc = (image: ImageRecord | null): string | undefined => {
 const ImageStatusPill = ({ status, className = '' }: { status?: string | null; className?: string }) => {
   if (!status) return null;
   const normalized = status.toLowerCase();
-  const classes = imageStatusClassMap[normalized] || 'bg-slate-100 text-slate-700 dark:bg-slate-700/70 dark:text-slate-200';
+  const classes = imageStatusClassMap[normalized] || 'bg-gray-100 text-gray-700 dark:bg-gray-700/70 dark:text-gray-200';
   return (
     <span className={`inline-flex items-center gap-1 rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-wide ${classes} ${className}`}>
       {status}
@@ -225,16 +225,16 @@ const PromptPlaceholder = ({
   minHeight?: number;
 }) => (
   <div
-    className="flex w-full items-center justify-center rounded-3xl bg-gradient-to-br from-slate-100 via-slate-50 to-white p-8 text-center dark:from-gray-800 dark:via-gray-900 dark:to-gray-950"
+    className="flex w-full items-center justify-center rounded-3xl bg-gradient-to-br from-gray-100 via-gray-50 to-white p-8 text-center dark:from-gray-800 dark:via-gray-900 dark:to-gray-950"
     style={{ minHeight }}
   >
     <div className="max-w-xl space-y-3">
       {label && (
-        <p className="text-[0.7rem] font-semibold uppercase tracking-[0.3em] text-slate-500 dark:text-slate-400">
+        <p className="text-[0.7rem] font-semibold uppercase tracking-[0.3em] text-gray-500 dark:text-gray-400">
           {label}
         </p>
       )}
-      <p className="text-sm font-medium leading-relaxed text-slate-600 dark:text-slate-300 whitespace-pre-wrap">
+      <p className="text-sm font-medium leading-relaxed text-gray-600 dark:text-gray-300 whitespace-pre-wrap">
         {prompt || 'Image prompt available, awaiting generation.'}
       </p>
     </div>
@@ -255,16 +255,16 @@ const FeaturedImageBlock = ({
   }
 
   return (
-    <div className="overflow-hidden rounded-3xl border border-slate-200/80 bg-white/80 shadow-lg shadow-slate-200/40 backdrop-blur-sm dark:border-gray-800/70 dark:bg-gray-900/70 dark:shadow-black/10">
+    <div className="overflow-hidden rounded-3xl border border-gray-200/80 bg-white/80 shadow-lg shadow-slate-200/40 backdrop-blur-sm dark:border-gray-800/70 dark:bg-gray-900/70 dark:shadow-black/10">
       <div className="flex items-center justify-between px-8 pt-8">
-        <div className="text-xs font-semibold uppercase tracking-[0.35em] text-slate-500 dark:text-slate-400">
+        <div className="text-xs font-semibold uppercase tracking-[0.35em] text-gray-500 dark:text-gray-400">
           Featured Visual
         </div>
         <ImageStatusPill status={image?.status} />
       </div>
       <div className="relative mt-6">
         {loading && !imageSrc ? (
-          <div className="h-[420px] animate-pulse bg-slate-200/70 dark:bg-gray-800/60" />
+          <div className="h-[420px] animate-pulse bg-gray-200/70 dark:bg-gray-800/60" />
         ) : imageSrc ? (
           <img
             src={imageSrc}
@@ -276,13 +276,13 @@ const FeaturedImageBlock = ({
           <PromptPlaceholder prompt={image?.prompt} minHeight={420} label="Featured Image Prompt" />
         )}
         {image?.caption && imageSrc && (
-          <div className="absolute bottom-5 left-5 rounded-full bg-white/80 px-4 py-2 text-xs font-medium text-slate-600 backdrop-blur-sm dark:bg-gray-950/70 dark:text-slate-300">
+          <div className="absolute bottom-5 left-5 rounded-full bg-white/80 px-4 py-2 text-xs font-medium text-gray-600 backdrop-blur-sm dark:bg-gray-950/70 dark:text-gray-300">
             Caption aligned to hero section
           </div>
         )}
       </div>
       {image?.caption && (
-        <div className="border-t border-slate-200/70 bg-white/70 px-8 py-6 text-sm leading-relaxed text-slate-600 backdrop-blur-sm dark:border-gray-800/60 dark:bg-gray-900/70 dark:text-slate-300">
+        <div className="border-t border-gray-200/70 bg-white/70 px-8 py-6 text-sm leading-relaxed text-gray-600 backdrop-blur-sm dark:border-gray-800/60 dark:bg-gray-900/70 dark:text-gray-300">
           {image.caption}
         </div>
       )}
@@ -304,10 +304,10 @@ const SectionImageBlock = ({
   const imageSrc = getImageSrc(image);
 
   return (
-    <figure className="overflow-hidden rounded-3xl border border-slate-200/70 bg-slate-50/70 shadow-inner shadow-slate-200/70 dark:border-gray-800/60 dark:bg-gray-900/40 dark:shadow-black/30">
+    <figure className="overflow-hidden rounded-3xl border border-gray-200/70 bg-gray-50/70 shadow-inner shadow-slate-200/70 dark:border-gray-800/60 dark:bg-gray-900/40 dark:shadow-black/30">
       <div className="relative">
         {loading && !image ? (
-          <div className="h-[260px] animate-pulse bg-slate-200/60 dark:bg-gray-800/60" />
+          <div className="h-[260px] animate-pulse bg-gray-200/60 dark:bg-gray-800/60" />
         ) : imageSrc ? (
           <img
             src={imageSrc}
@@ -323,8 +323,8 @@ const SectionImageBlock = ({
         </div>
       </div>
       {image?.caption && (
-        <figcaption className="space-y-3 px-6 py-5 text-sm leading-relaxed text-slate-600 dark:text-slate-300">
-          <p className="font-semibold uppercase tracking-[0.25em] text-slate-400 dark:text-slate-500">
+        <figcaption className="space-y-3 px-6 py-5 text-sm leading-relaxed text-gray-600 dark:text-gray-300">
+          <p className="font-semibold uppercase tracking-[0.25em] text-gray-400 dark:text-gray-500">
             Image Caption
           </p>
           <p className="font-medium whitespace-pre-wrap">{image.caption}</p>
@@ -335,8 +335,8 @@ const SectionImageBlock = ({
 };
 
 const IntroBlock = ({ html }: { html: string }) => (
-  <section className="overflow-hidden rounded-3xl border border-slate-200/80 bg-gradient-to-br from-white via-slate-50 to-white p-8 shadow-sm shadow-slate-200/60 dark:border-gray-800/70 dark:from-gray-900 dark:via-gray-950 dark:to-gray-900 dark:shadow-black/20">
-    <div className="text-xs font-semibold uppercase tracking-[0.35em] text-slate-500 dark:text-slate-400">
+  <section className="overflow-hidden rounded-3xl border border-gray-200/80 bg-gradient-to-br from-white via-gray-50 to-white p-8 shadow-sm shadow-slate-200/60 dark:border-gray-800/70 dark:from-gray-900 dark:via-gray-950 dark:to-gray-900 dark:shadow-black/20">
+    <div className="text-xs font-semibold uppercase tracking-[0.35em] text-gray-500 dark:text-gray-400">
       Opening Narrative
     </div>
     <div className="content-html prose prose-lg mt-6 max-w-none text-gray-800 dark:prose-invert">
@@ -418,17 +418,17 @@ const ContentSectionBlock = ({
 
   return (
     <section id={section.id} className="group/section scroll-mt-24">
-      <div className="overflow-hidden rounded-3xl border border-slate-200/80 bg-white/90 shadow-lg shadow-slate-200/50 backdrop-blur-sm transition-transform duration-300 group-hover/section:-translate-y-1 dark:border-gray-800/70 dark:bg-gray-900/70 dark:shadow-black/20">
+      <div className="overflow-hidden rounded-3xl border border-gray-200/80 bg-white/90 shadow-lg shadow-slate-200/50 backdrop-blur-sm transition-transform duration-300 group-hover/section:-translate-y-1 dark:border-gray-800/70 dark:bg-gray-900/70 dark:shadow-black/20">
         <div className="flex flex-col gap-6 p-8 sm:p-10">
           <div className="flex items-center gap-4">
             <span className="inline-flex h-10 w-10 items-center justify-center rounded-full bg-brand-500/10 text-sm font-semibold text-brand-600 dark:bg-brand-500/20 dark:text-brand-300">
               {index + 1}
             </span>
             <div className="flex flex-col">
-              <span className="text-[0.7rem] font-semibold uppercase tracking-[0.35em] text-slate-400 dark:text-slate-500">
+              <span className="text-[0.7rem] font-semibold uppercase tracking-[0.35em] text-gray-400 dark:text-gray-500">
                 Section Spotlight
               </span>
-              <h2 className="text-2xl font-bold text-slate-900 dark:text-white sm:text-3xl">
+              <h2 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
                 {headingLabel}
               </h2>
             </div>
@@ -541,7 +541,7 @@ const ArticleBody = ({ introHtml, sections, sectionImages, imagesLoading, rawHtm
 
   if (!hasStructuredSections && !introHtml && rawHtml) {
     return (
-      <div className="overflow-hidden rounded-3xl border border-slate-200/80 bg-white/90 p-8 shadow-lg shadow-slate-200/50 dark:border-gray-800/70 dark:bg-gray-900/70 dark:shadow-black/20">
+      <div className="overflow-hidden rounded-3xl border border-gray-200/80 bg-white/90 p-8 shadow-lg shadow-slate-200/50 dark:border-gray-800/70 dark:bg-gray-900/70 dark:shadow-black/20">
         <div className="content-html prose prose-lg max-w-none text-gray-800 dark:prose-invert">
           <div dangerouslySetInnerHTML={{ __html: rawHtml }} />
         </div>
@@ -790,13 +790,13 @@ export default function ContentViewTemplate({ content, loading, onBack }: Conten
   const getStatusColor = (status: string) => {
     const statusLower = status.toLowerCase();
     if (statusLower === 'generated' || statusLower === 'published' || statusLower === 'complete') {
-      return 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400';
+      return 'bg-success-100 text-success-800 dark:bg-success-900/30 dark:text-success-400';
     }
     if (statusLower === 'pending' || statusLower === 'draft') {
-      return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400';
+      return 'bg-warning-100 text-warning-800 dark:bg-warning-900/30 dark:text-warning-400';
     }
     if (statusLower === 'failed' || statusLower === 'error') {
-      return 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400';
+      return 'bg-error-100 text-error-800 dark:bg-error-900/30 dark:text-error-400';
     }
     return 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300';
   };
@@ -1036,7 +1036,7 @@ export default function ContentViewTemplate({ content, loading, onBack }: Conten
                     </button>
                     <button
                       onClick={() => navigate(`/writer/published?contentId=${content.id}&action=publish`)}
-                      className="inline-flex items-center gap-2 px-4 py-2 bg-green-500 hover:bg-green-600 text-white rounded-lg font-medium transition-colors"
+                      className="inline-flex items-center gap-2 px-4 py-2 bg-success-500 hover:bg-success-600 text-white rounded-lg font-medium transition-colors"
                     >
                       <BoltIcon className="w-4 h-4" />
                       Publish
@@ -1053,13 +1053,13 @@ export default function ContentViewTemplate({ content, loading, onBack }: Conten
               <div className="flex items-center gap-4">
               {content.has_image_prompts && (
                 <div className="flex items-center gap-2">
-                  <CheckCircleIcon className="w-5 h-5 text-green-500" />
+                  <CheckCircleIcon className="w-5 h-5 text-success-500" />
                   <span className="text-sm text-gray-700 dark:text-gray-300">Image Prompts Generated</span>
                 </div>
               )}
               {content.has_generated_images && (
                 <div className="flex items-center gap-2">
-                  <CheckCircleIcon className="w-5 h-5 text-green-500" />
+                  <CheckCircleIcon className="w-5 h-5 text-success-500" />
                   <span className="text-sm text-gray-700 dark:text-gray-300">Images Generated</span>
                 </div>
               )}
@@ -1076,7 +1076,7 @@ export default function ContentViewTemplate({ content, loading, onBack }: Conten
 
           {imagesError && (
             <div className="px-8 pt-4">
-              <div className="rounded-2xl border border-rose-200 bg-rose-50/80 px-4 py-3 text-sm font-medium text-rose-700 dark:border-rose-900/40 dark:bg-rose-950/30 dark:text-rose-300">
+              <div className="rounded-2xl border border-error-200 bg-error-50/80 px-4 py-3 text-sm font-medium text-error-700 dark:border-error-900/40 dark:bg-error-950/30 dark:text-error-300">
                 {imagesError}
               </div>
             </div>
@@ -1157,12 +1157,12 @@ export default function ContentViewTemplate({ content, loading, onBack }: Conten
         }
         .content-html table th,
         .content-html table td {
-          border: 1px solid #e5e7eb;
+          border: 1px solid var(--color-gray-200);
           padding: 0.875rem 1rem;
           text-align: left;
         }
         .content-html table th {
-          background: #f9fafb;
+          background: var(--color-gray-50);
           font-weight: 600;
         }
         .content-html img {
@@ -1174,14 +1174,14 @@ export default function ContentViewTemplate({ content, loading, onBack }: Conten
           box-shadow: 0 20px 45px -25px rgba(15, 23, 42, 0.35);
         }
         .content-html a {
-          color: #2563eb;
+          color: var(--color-brand-600);
           text-decoration: none;
-          border-bottom: 1px solid rgba(37, 99, 235, 0.3);
+          border-bottom: 1px solid color-mix(in oklch, var(--color-brand-600) 30%, transparent);
           transition: color 0.2s ease, border-bottom-color 0.2s ease;
         }
         .content-html a:hover {
-          color: #1d4ed8;
-          border-bottom-color: rgba(37, 99, 235, 0.6);
+          color: var(--color-brand-700);
+          border-bottom-color: color-mix(in oklch, var(--color-brand-600) 60%, transparent);
         }
         .content-html code {
           background: rgba(15, 23, 42, 0.06);
@@ -1213,12 +1213,12 @@ export default function ContentViewTemplate({ content, loading, onBack }: Conten
           background: rgba(30, 41, 59, 0.65);
         }
         .dark .content-html a {
-          color: #93c5fd;
-          border-bottom-color: rgba(147, 197, 253, 0.4);
+          color: var(--color-brand-300);
+          border-bottom-color: color-mix(in oklch, var(--color-brand-300) 40%, transparent);
         }
         .dark .content-html a:hover {
-          color: #bfdbfe;
-          border-bottom-color: rgba(191, 219, 254, 0.6);
+          color: var(--color-brand-200);
+          border-bottom-color: color-mix(in oklch, var(--color-brand-200) 60%, transparent);
         }
         .dark .content-html code,
         .dark .content-html pre {
diff --git a/frontend/src/templates/TablePageTemplate.tsx b/frontend/src/templates/TablePageTemplate.tsx
index 67b3d1bc..a869d219 100644
--- a/frontend/src/templates/TablePageTemplate.tsx
+++ b/frontend/src/templates/TablePageTemplate.tsx
@@ -604,7 +604,7 @@ export default function TablePageTemplate({
                       endIcon={<ChevronDownIcon className="w-3.5 h-3.5" />}
                     >
                       Bulk Actions
-                      <span className="ml-1.5 inline-flex items-center justify-center px-1.5 py-0.5 text-xs font-medium rounded-full bg-blue-100 text-blue-800 dark:bg-blue-500/20 dark:text-blue-300">
+                      <span className="ml-1.5 inline-flex items-center justify-center px-1.5 py-0.5 text-xs font-medium rounded-full bg-brand-100 text-brand-800 dark:bg-brand-500/20 dark:text-brand-300">
                         {selectedIds.length}
                       </span>
                     </Button>
@@ -665,9 +665,9 @@ export default function TablePageTemplate({
                   const metricElement = (
                     <div className={`flex items-center gap-2 ${metric.tooltip ? 'cursor-help' : ''}`}>
                       <div className={`w-1 h-5 rounded-full ${
-                        metric.accentColor === 'blue' ? 'bg-blue-500' :
-                        metric.accentColor === 'green' ? 'bg-green-500' :
-                        metric.accentColor === 'amber' ? 'bg-amber-500' :
+                        metric.accentColor === 'blue' ? 'bg-brand-500' :
+                        metric.accentColor === 'green' ? 'bg-success-500' :
+                        metric.accentColor === 'amber' ? 'bg-warning-500' :
                         metric.accentColor === 'purple' ? 'bg-purple-500' : 'bg-gray-500'
                       }`}></div>
                       <span className="text-[13px] font-medium text-gray-500 dark:text-gray-400 flex items-center gap-1">
@@ -912,7 +912,7 @@ export default function TablePageTemplate({
                   return (
                     <React.Fragment key={row.id || index}>
                       <TableRow 
-                        className={`igny8-data-row ${isRowAdded ? 'bg-blue-50 dark:bg-blue-500/10' : ''} ${customRowClass}`}
+                        className={`igny8-data-row ${isRowAdded ? 'bg-brand-50 dark:bg-brand-500/10' : ''} ${customRowClass}`}
                       >
                         {selection && (
                           <TableCell className="px-5 py-4 text-start">