diff --git a/.rules b/.rules
index ce1baad2..a917c3ad 100644
--- a/.rules
+++ b/.rules
@@ -62,7 +62,7 @@ All colors in the system derive from 6 primary hex values in `design-system.css`
 - `--color-success` (#2CA18E) - Success Green  
 - `--color-warning` (#D9A12C) - Warning Amber
 - `--color-danger` (#A12C40) - Danger Red
-- `--color-purple` (#2C40A1) - Purple accent
+- `--color-info` (#18b2c4) - Info/accent color
 - `--color-gray-base` (#667085) - Neutral gray
 
 ### Tailwind Color Classes
@@ -74,7 +74,7 @@ gray-*     (25-950) - Neutral scale
 success-*  (25-950) - Green scale  
 error-*    (25-950) - Red scale
 warning-*  (25-950) - Amber scale
-purple-*   (25-950) - Purple scale
+info-*     (25-950) - Info/accent scale
 ```
 
 **❌ BANNED** (These will NOT work):
diff --git a/frontend/src/components/Automation/CurrentProcessingCard.tsx b/frontend/src/components/Automation/CurrentProcessingCard.tsx
index 70f26a97..19d1153b 100644
--- a/frontend/src/components/Automation/CurrentProcessingCard.tsx
+++ b/frontend/src/components/Automation/CurrentProcessingCard.tsx
@@ -326,11 +326,11 @@ const CurrentProcessingCard: React.FC<CurrentProcessingCardProps> = ({
   // PLANNER: Blue → Pink → Amber | WRITER: Navy → Blue → Pink → Green
   const stageColors = [
     'from-brand-500 to-brand-600',     // Stage 1: Keywords → Clusters (blue)
-    'from-purple-500 to-purple-600',   // Stage 2: Clusters → Ideas (pink)
+    'from-info-500 to-info-600',   // Stage 2: Clusters → Ideas (pink)
     'from-warning-500 to-warning-600', // Stage 3: Ideas → Tasks (amber)
     'from-gray-700 to-gray-800',       // Stage 4: Tasks → Content (navy)
     'from-brand-500 to-brand-600',     // Stage 5: Content → Image Prompts (blue)
-    'from-purple-500 to-purple-600',   // Stage 6: Image Prompts → Images (pink)
+    'from-info-500 to-info-600',   // Stage 6: Image Prompts → Images (pink)
     'from-success-500 to-success-600', // Stage 7: Review → Published (green)
   ];
   const stageColorClass = stageColors[(currentRun.current_stage || 1) - 1] || 'from-brand-500 to-brand-600';
diff --git a/frontend/src/components/Automation/DetailView/CreditBreakdownChart.tsx b/frontend/src/components/Automation/DetailView/CreditBreakdownChart.tsx
index b0a450e3..74e840a9 100644
--- a/frontend/src/components/Automation/DetailView/CreditBreakdownChart.tsx
+++ b/frontend/src/components/Automation/DetailView/CreditBreakdownChart.tsx
@@ -39,12 +39,12 @@ const CreditBreakdownChart: React.FC<CreditBreakdownChartProps> = ({ stages }) =
     labels: chartLabels,
     colors: [
       'var(--color-brand-500)',
-      'var(--color-purple-500)',
+      'var(--color-info-500)',
       'var(--color-warning-500)',
       'var(--color-success-500)',
       'var(--color-gray-500)',
       'var(--color-brand-700)',
-      'var(--color-purple-700)',
+      'var(--color-info-700)',
     ],
     legend: {
       position: 'bottom',
diff --git a/frontend/src/components/Automation/DetailView/MeaningfulRunHistory.tsx b/frontend/src/components/Automation/DetailView/MeaningfulRunHistory.tsx
index e90b83fb..74b8fe6b 100644
--- a/frontend/src/components/Automation/DetailView/MeaningfulRunHistory.tsx
+++ b/frontend/src/components/Automation/DetailView/MeaningfulRunHistory.tsx
@@ -43,11 +43,11 @@ const STAGE_LABELS: Record<number, { input: string; output: string }> = {
 
 const STAGE_COLORS: Record<number, string> = {
   1: 'bg-brand-500',
-  2: 'bg-purple-500',
+  2: 'bg-info-500',
   3: 'bg-warning-500',
   4: 'bg-gray-600',
   5: 'bg-brand-400',
-  6: 'bg-purple-400',
+  6: 'bg-info-400',
   7: 'bg-success-500',
 };
 
diff --git a/frontend/src/components/Automation/DetailView/PredictiveCostAnalysis.tsx b/frontend/src/components/Automation/DetailView/PredictiveCostAnalysis.tsx
index ef2f185c..bab38e85 100644
--- a/frontend/src/components/Automation/DetailView/PredictiveCostAnalysis.tsx
+++ b/frontend/src/components/Automation/DetailView/PredictiveCostAnalysis.tsx
@@ -107,12 +107,12 @@ const PredictiveCostAnalysis: React.FC<PredictiveCostAnalysisProps> = ({ analysi
     labels: chartLabels,
     colors: [
       'var(--color-brand-500)',
-      'var(--color-purple-500)',
+      'var(--color-info-500)',
       'var(--color-warning-500)',
       'var(--color-success-500)',
       'var(--color-gray-500)',
       'var(--color-brand-700)',
-      'var(--color-purple-700)',
+      'var(--color-info-700)',
     ],
     legend: {
       position: 'bottom',
diff --git a/frontend/src/components/Automation/DetailView/ProductionSummary.tsx b/frontend/src/components/Automation/DetailView/ProductionSummary.tsx
index 79e061a4..9709556f 100644
--- a/frontend/src/components/Automation/DetailView/ProductionSummary.tsx
+++ b/frontend/src/components/Automation/DetailView/ProductionSummary.tsx
@@ -89,8 +89,8 @@ const ProductionSummary: React.FC<ProductionSummaryProps> = ({
     {
       label: 'Ideas',
       value: counts.ideas,
-      color: 'text-purple-600 dark:text-purple-400',
-      bgColor: 'bg-purple-50 dark:bg-purple-900/20',
+      color: 'text-info-600 dark:text-info-400',
+      bgColor: 'bg-info-50 dark:bg-info-900/20',
     },
     {
       label: 'Content',
diff --git a/frontend/src/components/Automation/GlobalProgressBar.tsx b/frontend/src/components/Automation/GlobalProgressBar.tsx
index c3c5f627..b4803d3a 100644
--- a/frontend/src/components/Automation/GlobalProgressBar.tsx
+++ b/frontend/src/components/Automation/GlobalProgressBar.tsx
@@ -19,11 +19,11 @@ import { BoltIcon, CheckCircleIcon, PauseIcon } from '../../icons';
 // - Images→Publish: success/green
 const STAGE_COLORS = [
   'from-brand-500 to-brand-600',     // Stage 1: Keywords → Clusters (brand/blue)
-  'from-purple-500 to-purple-600',   // Stage 2: Clusters → Ideas (purple/pink)
+  'from-info-500 to-info-600',   // Stage 2: Clusters → Ideas (purple/pink)
   'from-warning-500 to-warning-600', // Stage 3: Ideas → Tasks (amber)
   'from-gray-700 to-gray-800',       // Stage 4: Tasks → Content (navy)
   'from-brand-500 to-brand-600',     // Stage 5: Content → Image Prompts (brand/blue)
-  'from-purple-500 to-purple-600',   // Stage 6: Image Prompts → Images (purple/pink)
+  'from-info-500 to-info-600',   // Stage 6: Image Prompts → Images (purple/pink)
   'from-success-500 to-success-600', // Stage 7: Review Gate (green)
 ];
 
diff --git a/frontend/src/components/Automation/StageCard.tsx b/frontend/src/components/Automation/StageCard.tsx
index 3f5eaf6d..a0a72739 100644
--- a/frontend/src/components/Automation/StageCard.tsx
+++ b/frontend/src/components/Automation/StageCard.tsx
@@ -27,7 +27,7 @@ const StageCard: React.FC<StageCardProps> = ({
   const getStatusColor = () => {
     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';
+    if (pipelineData && pipelineData.pending > 0) return 'border-info-400 bg-info-50 dark:bg-info-900/20 dark:border-info-400';
     return 'border-gray-300 bg-gray-50 dark:bg-gray-800 dark:border-gray-600';
   };
 
@@ -58,7 +58,7 @@ const StageCard: React.FC<StageCardProps> = ({
         <div className="mt-2 pt-2 border-t border-gray-200 dark:border-gray-600">
           <div className="flex justify-between items-center">
             <span className="text-xs text-gray-600 dark:text-gray-400">Pending:</span>
-            <span className="text-lg font-bold text-purple-600 dark:text-purple-400">{pipelineData.pending}</span>
+            <span className="text-lg font-bold text-info-600 dark:text-info-400">{pipelineData.pending}</span>
           </div>
           <div className="text-xs text-gray-500 dark:text-gray-500 mt-1">{getStatusText()}</div>
         </div>
diff --git a/frontend/src/components/billing/CreditCostBreakdownPanel.tsx b/frontend/src/components/billing/CreditCostBreakdownPanel.tsx
index 8f311847..faaa542c 100644
--- a/frontend/src/components/billing/CreditCostBreakdownPanel.tsx
+++ b/frontend/src/components/billing/CreditCostBreakdownPanel.tsx
@@ -108,9 +108,9 @@ export default function CreditCostBreakdownPanel() {
     { bg: 'bg-brand-50 dark:bg-brand-900/20', text: 'text-brand-600 dark:text-brand-400', border: 'border-brand-500 dark:border-brand-400' },
     { bg: 'bg-success-50 dark:bg-success-900/20', text: 'text-success-600 dark:text-success-400', border: 'border-success-500 dark:border-success-400' },
     { bg: 'bg-brand-50 dark:bg-brand-900/20', text: 'text-brand-600 dark:text-brand-400', border: 'border-brand-500 dark:border-brand-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-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-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-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-info-50 dark:bg-info-900/20', text: 'text-info-600 dark:text-info-400', border: 'border-info-500 dark:border-info-400' },
   ];
 
   return (
@@ -143,10 +143,10 @@ export default function CreditCostBreakdownPanel() {
           <div className="text-xs text-gray-500 mt-1">Daily average</div>
         </Card>
 
-        <Card className="p-6 border-l-4 border-purple-500 dark:border-purple-400">
+        <Card className="p-6 border-l-4 border-info-500 dark:border-info-400">
           <div className="flex items-center gap-3 mb-2">
-            <div className="p-2 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
-              <TrendingUpIcon className="w-5 h-5 text-purple-500 dark:text-purple-400" />
+            <div className="p-2 bg-info-50 dark:bg-info-900/20 rounded-lg">
+              <TrendingUpIcon className="w-5 h-5 text-info-500 dark:text-info-400" />
             </div>
             <div className="text-sm text-gray-600 dark:text-gray-400">Total Operations</div>
           </div>
diff --git a/frontend/src/components/billing/CreditInsightsCharts.tsx b/frontend/src/components/billing/CreditInsightsCharts.tsx
index 0cbf5db3..4532564c 100644
--- a/frontend/src/components/billing/CreditInsightsCharts.tsx
+++ b/frontend/src/components/billing/CreditInsightsCharts.tsx
@@ -34,7 +34,7 @@ const OPERATION_LABELS: Record<string, string> = {
 
 const CHART_COLORS = [
   'var(--color-brand-500)',
-  'var(--color-purple-500)',
+  'var(--color-info-500)',
   'var(--color-success-500)',
   'var(--color-warning-500)',
   'var(--color-error-500)',
@@ -252,7 +252,7 @@ export default function CreditInsightsCharts({ analytics, loading, period }: Cre
         show: false,
       },
     },
-    colors: ['var(--color-purple-500)'],
+    colors: ['var(--color-info-500)'],
     plotOptions: {
       bar: {
         horizontal: true,
@@ -325,12 +325,12 @@ export default function CreditInsightsCharts({ analytics, loading, period }: Cre
 
         <Card className="p-4 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800">
           <div className="flex items-center gap-3">
-            <div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
-              <BarChart3Icon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
+            <div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
+              <BarChart3Icon className="w-5 h-5 text-info-600 dark:text-info-400" />
             </div>
             <div>
               <div className="text-xs text-gray-600 dark:text-gray-400">Peak Usage</div>
-              <div className="text-xl font-bold text-purple-600 dark:text-purple-400">
+              <div className="text-xl font-bold text-info-600 dark:text-info-400">
                 {peakUsage.toLocaleString()}
               </div>
               <div className="text-xs text-gray-500 dark:text-gray-400">credits in one day</div>
@@ -391,8 +391,8 @@ export default function CreditInsightsCharts({ analytics, loading, period }: Cre
         {/* Operations by Count - Bar Chart */}
         <Card className="p-6">
           <div className="flex items-center gap-3 mb-4">
-            <div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
-              <BarChart3Icon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
+            <div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
+              <BarChart3Icon className="w-5 h-5 text-info-600 dark:text-info-400" />
             </div>
             <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
               Operations Count
diff --git a/frontend/src/components/billing/UsageLimitsPanel.tsx b/frontend/src/components/billing/UsageLimitsPanel.tsx
index e72764cc..c426e5c0 100644
--- a/frontend/src/components/billing/UsageLimitsPanel.tsx
+++ b/frontend/src/components/billing/UsageLimitsPanel.tsx
@@ -36,9 +36,9 @@ function LimitCard({ title, icon, usage, type, daysUntilReset, accentColor = 'br
     info: 'var(--color-primary)',
     warning: 'var(--color-warning)',
     danger: 'var(--color-danger)',
-    purple: 'var(--color-purple)',
-    indigo: 'var(--color-purple)',
-    pink: 'var(--color-purple)',
+    purple: 'var(--color-info)',
+    indigo: 'var(--color-info)',
+    pink: 'var(--color-info)',
     teal: 'var(--color-success)',
     cyan: 'var(--color-primary)',
   };
diff --git a/frontend/src/components/common/PageHeader.tsx b/frontend/src/components/common/PageHeader.tsx
index eedce095..4293979e 100644
--- a/frontend/src/components/common/PageHeader.tsx
+++ b/frontend/src/components/common/PageHeader.tsx
@@ -102,16 +102,16 @@ export default function PageHeader({
   const badgeColors = {
     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' },
+    purple: { bg: 'bg-info-600 dark:bg-info-500', light: 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-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' },
+    indigo: { bg: 'bg-info-600 dark:bg-info-500', light: 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-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' },
+    pink: { bg: 'bg-info-600 dark:bg-info-500', light: 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-300' },
+    emerald: { bg: 'bg-info-600 dark:bg-info-500', light: 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-300' },
+    cyan: { bg: 'bg-info-600 dark:bg-info-500', light: 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-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' },
+    teal: { bg: 'bg-info-600 dark:bg-info-500', light: 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-300' },
   };
 
   return (
diff --git a/frontend/src/components/common/SearchModal.tsx b/frontend/src/components/common/SearchModal.tsx
index b423ccc1..7c7119a8 100644
--- a/frontend/src/components/common/SearchModal.tsx
+++ b/frontend/src/components/common/SearchModal.tsx
@@ -892,7 +892,7 @@ export default function SearchModal({ isOpen, onClose }: SearchModalProps) {
                 {suggestedQuestions.map((item, idx) => (
                   <div
                     key={idx}
-                    className="group px-3 py-2.5 rounded-lg bg-gradient-to-r from-indigo-50 to-purple-50 dark:from-indigo-900/20 dark:to-purple-900/20 border border-indigo-200 dark:border-indigo-800 hover:border-indigo-300 dark:hover:border-indigo-700 cursor-pointer transition-all hover:shadow-md"
+                    className="group px-3 py-2.5 rounded-lg bg-gradient-to-r from-indigo-50 to-info-50 dark:from-indigo-900/20 dark:to-info-900/20 border border-indigo-200 dark:border-indigo-800 hover:border-indigo-300 dark:hover:border-indigo-700 cursor-pointer transition-all hover:shadow-md"
                     onClick={() => {
                       navigate(item.path);
                       onClose();
diff --git a/frontend/src/components/common/SiteInfoBar.tsx b/frontend/src/components/common/SiteInfoBar.tsx
index cd3e6baf..5c67a5bf 100644
--- a/frontend/src/components/common/SiteInfoBar.tsx
+++ b/frontend/src/components/common/SiteInfoBar.tsx
@@ -49,7 +49,7 @@ export default function SiteInfoBar({
           <span className="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium bg-brand-50 text-brand-700 dark:bg-brand-900/30 dark:text-brand-300 border border-brand-200 dark:border-brand-800">
             {site.site_type || 'marketing'}
           </span>
-          <span className="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium bg-purple-50 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300 border border-purple-200 dark:border-purple-800">
+          <span className="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium bg-info-50 text-info-700 dark:bg-info-900/30 dark:text-info-300 border border-info-200 dark:border-info-800">
             {site.hosting_type || 'igny8_sites'}
           </span>
           <span className={`inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium ${
@@ -99,7 +99,7 @@ export default function SiteInfoBar({
               onClick={() => navigate(`/sites/${site.id}/settings`)}
               variant="outline"
               size="sm"
-              className="border-purple-300 text-purple-700 hover:bg-purple-50 dark:border-purple-600 dark:text-purple-400 dark:hover:bg-purple-900/20"
+              className="border-info-300 text-info-700 hover:bg-info-50 dark:border-info-600 dark:text-info-400 dark:hover:bg-info-900/20"
               startIcon={<GridIcon className="w-4 h-4" />}
             >
               Settings
diff --git a/frontend/src/components/content/SourceBadge.tsx b/frontend/src/components/content/SourceBadge.tsx
index dd024d0f..62b596a7 100644
--- a/frontend/src/components/content/SourceBadge.tsx
+++ b/frontend/src/components/content/SourceBadge.tsx
@@ -9,7 +9,7 @@ interface SourceBadgeProps {
 
 const sourceConfig = {
   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' },
+  wordpress: { label: 'WordPress', color: 'bg-info-100 text-info-800 dark:bg-info-900 dark:text-info-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 7413e884..2c40c71c 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-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300' },
+  native: { label: 'Native', color: 'bg-info-100 text-info-800 dark:bg-info-900 dark:text-info-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' },
+  synced: { label: 'Synced', color: 'bg-info-100 text-info-800 dark:bg-info-900 dark:text-info-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 a4a06cd6..3bc66c8f 100644
--- a/frontend/src/components/dashboard/AIOperationsWidget.tsx
+++ b/frontend/src/components/dashboard/AIOperationsWidget.tsx
@@ -44,10 +44,10 @@ interface AIOperationsWidgetProps {
  * - Images: purple/pink (matches Images module)
  */
 const operationConfig: Record<string, { label: string; icon: typeof GroupIcon; gradient: string }> = {
-  clustering: { label: 'Clustering', icon: GroupIcon, gradient: 'from-purple-500 to-purple-600' },
+  clustering: { label: 'Clustering', icon: GroupIcon, gradient: 'from-info-500 to-info-600' },
   ideas: { label: 'Ideas', icon: BoltIcon, gradient: 'from-warning-500 to-warning-600' },
   content: { label: 'Content', icon: FileTextIcon, gradient: 'from-brand-500 to-brand-600' },
-  images: { label: 'Images', icon: FileIcon, gradient: 'from-purple-500 to-purple-600' },
+  images: { label: 'Images', icon: FileIcon, gradient: 'from-info-500 to-info-600' },
 };
 
 // Default config for unknown operation types
diff --git a/frontend/src/components/dashboard/CreditAvailabilityWidget.tsx b/frontend/src/components/dashboard/CreditAvailabilityWidget.tsx
index b284fc8f..a38134a4 100644
--- a/frontend/src/components/dashboard/CreditAvailabilityWidget.tsx
+++ b/frontend/src/components/dashboard/CreditAvailabilityWidget.tsx
@@ -21,10 +21,10 @@ 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' },
+  clustering: { label: 'Clustering Runs', cost: 10, icon: GroupIcon, color: 'text-info-600 dark:text-info-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' },
+  images: { label: 'Images', cost: 5, icon: FileIcon, color: 'text-info-600 dark:text-info-400' },
 };
 
 export default function CreditAvailabilityWidget({ 
@@ -68,7 +68,7 @@ export default function CreditAvailabilityWidget({
       </div>
 
       {/* Credits Balance */}
-      <div className="bg-gradient-to-r from-brand-50 to-purple-50 dark:from-brand-900/20 dark:to-purple-900/20 rounded-lg p-4 mb-4">
+      <div className="bg-gradient-to-r from-brand-50 to-info-50 dark:from-brand-900/20 dark:to-info-900/20 rounded-lg p-4 mb-4">
         <div className="flex items-center justify-between mb-2">
           <span className="text-sm text-gray-600 dark:text-gray-400">Available Credits</span>
           <span className="text-2xl font-bold text-brand-600 dark:text-brand-400">
diff --git a/frontend/src/components/dashboard/EnhancedMetricCard.tsx b/frontend/src/components/dashboard/EnhancedMetricCard.tsx
index a9e420ce..e68b2751 100644
--- a/frontend/src/components/dashboard/EnhancedMetricCard.tsx
+++ b/frontend/src/components/dashboard/EnhancedMetricCard.tsx
@@ -37,10 +37,10 @@ const accentColors = {
     icon: "text-warning-500",
   },
   purple: {
-    bg: "bg-purple-50 dark:bg-purple-500/10",
-    hover: "hover:bg-purple-100 dark:hover:bg-purple-500/20",
-    border: "bg-purple-500",
-    icon: "text-purple-500",
+    bg: "bg-info-50 dark:bg-info-500/10",
+    hover: "hover:bg-info-100 dark:hover:bg-info-500/20",
+    border: "bg-info-500",
+    icon: "text-info-500",
   },
   red: {
     bg: "bg-error-50 dark:bg-error-500/10",
diff --git a/frontend/src/components/dashboard/KeywordLibraryStatsWidget.tsx b/frontend/src/components/dashboard/KeywordLibraryStatsWidget.tsx
index a80e969e..49d27804 100644
--- a/frontend/src/components/dashboard/KeywordLibraryStatsWidget.tsx
+++ b/frontend/src/components/dashboard/KeywordLibraryStatsWidget.tsx
@@ -81,8 +81,8 @@ export default function KeywordLibraryStatsWidget({ stats, loading }: KeywordLib
       {/* Card 2: By Country */}
       <Card className="p-6">
         <div className="flex items-center gap-3 mb-4">
-          <div className="w-10 h-10 rounded-lg bg-purple-100 dark:bg-purple-900/50 flex items-center justify-center">
-            <GlobeIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
+          <div className="w-10 h-10 rounded-lg bg-info-100 dark:bg-info-900/50 flex items-center justify-center">
+            <GlobeIcon className="w-5 h-5 text-info-600 dark:text-info-400" />
           </div>
           <div>
             <h3 className="text-sm font-semibold text-gray-900 dark:text-white">
diff --git a/frontend/src/components/dashboard/OperationsCostsWidget.tsx b/frontend/src/components/dashboard/OperationsCostsWidget.tsx
index 0341f071..acc21f24 100644
--- a/frontend/src/components/dashboard/OperationsCostsWidget.tsx
+++ b/frontend/src/components/dashboard/OperationsCostsWidget.tsx
@@ -29,7 +29,7 @@ const operationConfig = {
   clustering: { 
     label: 'Clustering', 
     icon: GroupIcon, 
-    color: 'text-purple-600 dark:text-purple-400',
+    color: 'text-info-600 dark:text-info-400',
     href: '/planner/clusters',
   },
   ideas: { 
@@ -47,7 +47,7 @@ const operationConfig = {
   images: { 
     label: 'Images', 
     icon: FileIcon, 
-    color: 'text-purple-600 dark:text-purple-400',
+    color: 'text-info-600 dark:text-info-400',
     href: '/writer/images',
   },
 };
diff --git a/frontend/src/components/dashboard/QuickActionsWidget.tsx b/frontend/src/components/dashboard/QuickActionsWidget.tsx
index 4f03fd3e..912c4437 100644
--- a/frontend/src/components/dashboard/QuickActionsWidget.tsx
+++ b/frontend/src/components/dashboard/QuickActionsWidget.tsx
@@ -42,7 +42,7 @@ const workflowSteps = [
     description: 'AI groups related keywords into content clusters',
     href: '/planner/keyword-opportunities', // Clustering runs from keywords page
     actionLabel: 'Cluster',
-    gradient: 'from-purple-500 to-purple-600',
+    gradient: 'from-info-500 to-info-600',
     buttonTone: 'brand' as const,
   },
   { 
@@ -78,7 +78,7 @@ const workflowSteps = [
     description: 'Create featured images and media for articles',
     href: '/writer/images',
     actionLabel: 'Images',
-    gradient: 'from-purple-500 to-purple-600',
+    gradient: 'from-info-500 to-info-600',
     buttonTone: 'brand' as const,
   },
   { 
diff --git a/frontend/src/components/dashboard/RecentActivityWidget.tsx b/frontend/src/components/dashboard/RecentActivityWidget.tsx
index 671adaab..8fde678c 100644
--- a/frontend/src/components/dashboard/RecentActivityWidget.tsx
+++ b/frontend/src/components/dashboard/RecentActivityWidget.tsx
@@ -43,10 +43,10 @@ interface RecentActivityWidgetProps {
  * - sync: success/green
  */
 const activityConfig: Record<string, { icon: typeof GroupIcon; gradient: string }> = {
-  clustering: { icon: GroupIcon, gradient: 'from-purple-500 to-purple-600' },
+  clustering: { icon: GroupIcon, gradient: 'from-info-500 to-info-600' },
   ideas: { icon: BoltIcon, gradient: 'from-warning-500 to-warning-600' },
   content: { icon: FileTextIcon, gradient: 'from-brand-500 to-brand-600' },
-  images: { icon: FileIcon, gradient: 'from-purple-500 to-purple-600' },
+  images: { icon: FileIcon, gradient: 'from-info-500 to-info-600' },
   published: { icon: PaperPlaneIcon, gradient: 'from-success-500 to-success-600' },
   keywords: { icon: ListIcon, gradient: 'from-brand-500 to-brand-600' },
   error: { icon: AlertIcon, gradient: 'from-error-500 to-error-600' },
diff --git a/frontend/src/components/dashboard/StandardThreeWidgetFooter.tsx b/frontend/src/components/dashboard/StandardThreeWidgetFooter.tsx
index 40121139..75f6e19f 100644
--- a/frontend/src/components/dashboard/StandardThreeWidgetFooter.tsx
+++ b/frontend/src/components/dashboard/StandardThreeWidgetFooter.tsx
@@ -84,7 +84,7 @@ const getProgressBarStyle = (color: SubmoduleColor = 'blue'): React.CSSPropertie
     blue: 'var(--color-primary)',
     green: 'var(--color-success)',
     amber: 'var(--color-warning)',
-    purple: 'var(--color-purple)',
+    purple: 'var(--color-info)',
   };
   return { backgroundColor: colorMap[color] };
 };
diff --git a/frontend/src/components/dashboard/StandardizedModuleWidget.tsx b/frontend/src/components/dashboard/StandardizedModuleWidget.tsx
index 0d727ebf..4318d561 100644
--- a/frontend/src/components/dashboard/StandardizedModuleWidget.tsx
+++ b/frontend/src/components/dashboard/StandardizedModuleWidget.tsx
@@ -240,7 +240,7 @@ export default function StandardizedModuleWidget({
               {credits.clusteringCredits > 0 && (
                 <span className="text-[color:var(--color-text-dim)] dark:text-gray-400">
                   Clustering{' '}
-                  <strong className="font-bold" style={{ color: 'var(--color-purple)' }}>{credits.clusteringCredits}</strong>
+                  <strong className="font-bold" style={{ color: 'var(--color-info)' }}>{credits.clusteringCredits}</strong>
                 </span>
               )}
               {credits.ideaGenerationCredits > 0 && (
@@ -265,7 +265,7 @@ export default function StandardizedModuleWidget({
               {credits.imageGenerationCredits > 0 && (
                 <span className="text-[color:var(--color-text-dim)] dark:text-gray-400">
                   Images{' '}
-                  <strong className="font-bold" style={{ color: 'var(--color-purple)' }}>{credits.imageGenerationCredits}</strong>
+                  <strong className="font-bold" style={{ color: 'var(--color-info)' }}>{credits.imageGenerationCredits}</strong>
                 </span>
               )}
             </div>
diff --git a/frontend/src/components/dashboard/ThreeWidgetFooter.tsx b/frontend/src/components/dashboard/ThreeWidgetFooter.tsx
index 446e9d2a..fe698b3a 100644
--- a/frontend/src/components/dashboard/ThreeWidgetFooter.tsx
+++ b/frontend/src/components/dashboard/ThreeWidgetFooter.tsx
@@ -12,7 +12,7 @@
  * - --color-primary: Brand blue for primary actions/bars
  * - --color-success: Green for success states
  * - --color-warning: Amber for warnings
- * - --color-purple: Purple accent
+ * - --color-info: Purple accent
  */
 
 import React from 'react';
@@ -91,7 +91,7 @@ const getProgressBarStyle = (color: SubmoduleColor = 'blue'): React.CSSPropertie
     blue: 'var(--color-primary)',
     green: 'var(--color-success)',
     amber: 'var(--color-warning)',
-    purple: 'var(--color-purple)',
+    purple: 'var(--color-info)',
   };
   return { backgroundColor: colorMap[color] };
 };
diff --git a/frontend/src/components/dashboard/WorkflowPipelineWidget.tsx b/frontend/src/components/dashboard/WorkflowPipelineWidget.tsx
index 4e669651..29462adb 100644
--- a/frontend/src/components/dashboard/WorkflowPipelineWidget.tsx
+++ b/frontend/src/components/dashboard/WorkflowPipelineWidget.tsx
@@ -48,7 +48,7 @@ interface WorkflowPipelineWidgetProps {
 const stages = [
   { key: 'sites', label: 'Sites', icon: GridIcon, href: '/sites', gradient: '', transparent: true },
   { key: 'keywords', label: 'Keywords', icon: ListIcon, href: '/planner/keywords', gradient: 'from-brand-500 to-brand-600' },
-  { key: 'clusters', label: 'Clusters', icon: GroupIcon, href: '/planner/clusters', gradient: 'from-purple-500 to-purple-600' },
+  { key: 'clusters', label: 'Clusters', icon: GroupIcon, href: '/planner/clusters', gradient: 'from-info-500 to-info-600' },
   { key: 'ideas', label: 'Ideas', icon: BoltIcon, href: '/planner/ideas', gradient: 'from-warning-500 to-warning-600' },
   { key: 'tasks', label: 'Tasks', icon: CheckCircleIcon, href: '/writer/tasks', gradient: 'from-gray-700 to-gray-800' },
   { key: 'drafts', label: 'Drafts', icon: FileTextIcon, href: '/writer/content', gradient: 'from-brand-500 to-brand-600' },
diff --git a/frontend/src/components/header/UserDropdown.tsx b/frontend/src/components/header/UserDropdown.tsx
index 34ce9ed6..0367f41a 100644
--- a/frontend/src/components/header/UserDropdown.tsx
+++ b/frontend/src/components/header/UserDropdown.tsx
@@ -142,7 +142,7 @@ export default function UserDropdown() {
           variant="primary"
           tone="brand"
           endIcon={<ArrowRightIcon className="w-4 h-4" />}
-          className="mt-3 w-full justify-center bg-purple-600 hover:bg-purple-700 dark:bg-purple-500 dark:hover:bg-purple-600"
+          className="mt-3 w-full justify-center bg-info-600 hover:bg-info-700 dark:bg-info-500 dark:hover:bg-info-600"
         >
           Sign out
         </Button>
diff --git a/frontend/src/components/keywords-library/SectorCardsGrid.tsx b/frontend/src/components/keywords-library/SectorCardsGrid.tsx
index 03fef9ea..d746dea9 100644
--- a/frontend/src/components/keywords-library/SectorCardsGrid.tsx
+++ b/frontend/src/components/keywords-library/SectorCardsGrid.tsx
@@ -115,8 +115,8 @@ export default function SectorCardsGrid({
                   {over10k.toLocaleString()}
                 </div>
               </div>
-              <div className="flex flex-col items-center justify-center p-2 rounded-lg border border-purple-200 dark:border-purple-800 bg-purple-50/50 dark:bg-purple-900/10">
-                <div className="text-sm font-semibold text-purple-600 dark:text-purple-400">5K - 10K</div>
+              <div className="flex flex-col items-center justify-center p-2 rounded-lg border border-info-200 dark:border-info-800 bg-info-50/50 dark:bg-info-900/10">
+                <div className="text-sm font-semibold text-info-600 dark:text-info-400">5K - 10K</div>
                 <div className="text-base font-bold text-gray-900 dark:text-white">
                   {midVolume.toLocaleString()}
                 </div>
diff --git a/frontend/src/components/keywords-library/SectorMetricCard.tsx b/frontend/src/components/keywords-library/SectorMetricCard.tsx
index 50f9b4c3..6cdec3e5 100644
--- a/frontend/src/components/keywords-library/SectorMetricCard.tsx
+++ b/frontend/src/components/keywords-library/SectorMetricCard.tsx
@@ -101,12 +101,12 @@ const STAT_CONFIG: Record<StatType, {
     label: 'Long Tail',
     description: '4+ words with good volume',
     icon: <DocsIcon className="w-5 h-5" />,
-    accentColor: 'bg-purple-500',
-    borderColor: 'border-purple-500',
-    ringColor: 'ring-purple-500/20',
-    dotColor: 'bg-purple-500',
-    textColor: 'text-purple-600 dark:text-purple-400',
-    badgeColor: 'bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300',
+    accentColor: 'bg-info-500',
+    borderColor: 'border-info-500',
+    ringColor: 'ring-info-500/20',
+    dotColor: 'bg-info-500',
+    textColor: 'text-info-600 dark:text-info-400',
+    badgeColor: 'bg-info-100 text-info-700 dark:bg-info-900/40 dark:text-info-300',
     showThreshold: true,
     thresholdPrefix: 'Vol >',
   },
diff --git a/frontend/src/components/keywords-library/SmartSuggestions.tsx b/frontend/src/components/keywords-library/SmartSuggestions.tsx
index 1fcbecb3..3ce6e089 100644
--- a/frontend/src/components/keywords-library/SmartSuggestions.tsx
+++ b/frontend/src/components/keywords-library/SmartSuggestions.tsx
@@ -46,7 +46,7 @@ export default function SmartSuggestions({
         <div className="flex items-center gap-3">
           <div className={clsx(
             'w-8 h-8 rounded-lg flex items-center justify-center',
-            'bg-gradient-to-br from-brand-500 to-purple-500'
+            'bg-gradient-to-br from-brand-500 to-info-500'
           )}>
             <ShootingStarIcon className="w-4 h-4 text-white" />
           </div>
@@ -73,7 +73,7 @@ export default function SmartSuggestions({
         <div className="flex items-center gap-3">
           <div className={clsx(
             'w-10 h-10 rounded-lg flex items-center justify-center',
-            'bg-gradient-to-br from-brand-500 to-purple-500',
+            'bg-gradient-to-br from-brand-500 to-info-500',
             hasContent && 'animate-pulse'
           )}>
             <ShootingStarIcon className="w-5 h-5 text-white" />
diff --git a/frontend/src/components/optimizer/OptimizationScores.tsx b/frontend/src/components/optimizer/OptimizationScores.tsx
index 381247f7..6bedf923 100644
--- a/frontend/src/components/optimizer/OptimizationScores.tsx
+++ b/frontend/src/components/optimizer/OptimizationScores.tsx
@@ -187,7 +187,7 @@ export const OptimizationScores: React.FC<OptimizationScoresProps> = ({
             </span>
           )}
           {scores.has_taxonomy_mapping && (
-            <span className="px-2 py-0.5 bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded">
+            <span className="px-2 py-0.5 bg-info-100 dark:bg-info-900 text-info-800 dark:text-info-200 rounded">
               Taxonomy
             </span>
           )}
diff --git a/frontend/src/components/sites/WordPressIntegrationCard.tsx b/frontend/src/components/sites/WordPressIntegrationCard.tsx
index bb532ee3..f369bb26 100644
--- a/frontend/src/components/sites/WordPressIntegrationCard.tsx
+++ b/frontend/src/components/sites/WordPressIntegrationCard.tsx
@@ -50,8 +50,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-purple-100 dark:bg-purple-900/30 rounded-lg">
-              <GlobeIcon className="w-6 h-6 text-purple-600 dark:text-purple-400" />
+            <div className="p-3 bg-info-100 dark:bg-info-900/30 rounded-lg">
+              <GlobeIcon className="w-6 h-6 text-info-600 dark:text-info-400" />
             </div>
             <div>
               <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
@@ -75,8 +75,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-purple-100 dark:bg-purple-900/30 rounded-lg">
-              <GlobeIcon className="w-6 h-6 text-purple-600 dark:text-purple-400" />
+            <div className="p-3 bg-info-100 dark:bg-info-900/30 rounded-lg">
+              <GlobeIcon className="w-6 h-6 text-info-600 dark:text-info-400" />
             </div>
             <div>
               <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
diff --git a/frontend/src/components/sites/WordPressIntegrationForm.tsx b/frontend/src/components/sites/WordPressIntegrationForm.tsx
index acca448f..ba692a0f 100644
--- a/frontend/src/components/sites/WordPressIntegrationForm.tsx
+++ b/frontend/src/components/sites/WordPressIntegrationForm.tsx
@@ -262,8 +262,8 @@ export default function WordPressIntegrationForm({
       {/* Header */}
       <div className="flex items-center justify-between gap-3">
         <div className="flex items-center gap-3">
-          <div className="p-3 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
-            <GlobeIcon className="w-6 h-6 text-purple-600 dark:text-purple-400" />
+          <div className="p-3 bg-info-100 dark:bg-info-900/30 rounded-lg">
+            <GlobeIcon className="w-6 h-6 text-info-600 dark:text-info-400" />
           </div>
           <div>
             <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
@@ -454,7 +454,7 @@ export default function WordPressIntegrationForm({
             <div className="flex items-start justify-between">
               <div className="flex-1">
                 <h3 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
-                  <DownloadIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
+                  <DownloadIcon className="w-5 h-5 text-info-600 dark:text-info-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 57d7c316..d6038ddb 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-purple-100 dark:bg-purple-900/30 rounded-lg">
-              <GlobeIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
+            <div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
+              <GlobeIcon className="w-5 h-5 text-info-600 dark:text-info-400" />
             </div>
             <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
               {initialData ? 'Edit WordPress Integration' : 'Connect WordPress Site'}
diff --git a/frontend/src/components/ui/badge/Badge.tsx b/frontend/src/components/ui/badge/Badge.tsx
index b18f8ea7..891cfbc4 100644
--- a/frontend/src/components/ui/badge/Badge.tsx
+++ b/frontend/src/components/ui/badge/Badge.tsx
@@ -67,34 +67,34 @@ const toneStyles: Record<
       "text-gray-800 ring-1 ring-gray-300 dark:ring-white/[0.08] dark:text-white/90",
   },
   purple: {
-    solid: "bg-purple-600 text-white",
-    soft: "bg-purple-50 text-purple-700 dark:bg-purple-500/15 dark:text-purple-400",
+    solid: "bg-info-600 text-white",
+    soft: "bg-info-50 text-info-700 dark:bg-info-500/15 dark:text-info-400",
     outline:
-      "text-purple-700 ring-1 ring-purple-200 dark:ring-purple-500/30 dark:text-purple-400",
+      "text-info-700 ring-1 ring-info-200 dark:ring-info-500/30 dark:text-info-400",
   },
   indigo: {
-    solid: "bg-purple-600 text-white",
-    soft: "bg-purple-50 text-purple-700 dark:bg-purple-500/15 dark:text-purple-400",
+    solid: "bg-info-600 text-white",
+    soft: "bg-info-50 text-info-700 dark:bg-info-500/15 dark:text-info-400",
     outline:
-      "text-purple-700 ring-1 ring-purple-200 dark:ring-purple-500/30 dark:text-purple-400",
+      "text-info-700 ring-1 ring-info-200 dark:ring-info-500/30 dark:text-info-400",
   },
   pink: {
-    solid: "bg-purple-600 text-white",
-    soft: "bg-purple-50 text-purple-700 dark:bg-purple-500/15 dark:text-purple-400",
+    solid: "bg-info-600 text-white",
+    soft: "bg-info-50 text-info-700 dark:bg-info-500/15 dark:text-info-400",
     outline:
-      "text-purple-700 ring-1 ring-purple-200 dark:ring-purple-500/30 dark:text-purple-400",
+      "text-info-700 ring-1 ring-info-200 dark:ring-info-500/30 dark:text-info-400",
   },
   teal: {
-    solid: "bg-purple-600 text-white",
-    soft: "bg-purple-50 text-purple-700 dark:bg-purple-500/15 dark:text-purple-400",
+    solid: "bg-info-600 text-white",
+    soft: "bg-info-50 text-info-700 dark:bg-info-500/15 dark:text-info-400",
     outline:
-      "text-purple-700 ring-1 ring-purple-200 dark:ring-purple-500/30 dark:text-purple-400",
+      "text-info-700 ring-1 ring-info-200 dark:ring-info-500/30 dark:text-info-400",
   },
   cyan: {
-    solid: "bg-purple-600 text-white",
-    soft: "bg-purple-50 text-purple-700 dark:bg-purple-500/15 dark:text-purple-400",
+    solid: "bg-info-600 text-white",
+    soft: "bg-info-50 text-info-700 dark:bg-info-500/15 dark:text-info-400",
     outline:
-      "text-purple-700 ring-1 ring-purple-200 dark:ring-purple-500/30 dark:text-purple-400",
+      "text-info-700 ring-1 ring-info-200 dark:ring-info-500/30 dark:text-info-400",
   },
   blue: {
     solid: "bg-brand-600 text-white",
diff --git a/frontend/src/config/colors.config.ts b/frontend/src/config/colors.config.ts
index 59554050..73676e89 100644
--- a/frontend/src/config/colors.config.ts
+++ b/frontend/src/config/colors.config.ts
@@ -40,8 +40,8 @@ export const CSS_VAR_COLORS = {
   warningDark: '--color-warning-dark',
   danger: '--color-danger',
   dangerDark: '--color-danger-dark',
-  purple: '--color-purple',
-  purpleDark: '--color-purple-dark',
+  purple: '--color-info',
+  purpleDark: '--color-info-dark',
   grayBase: '--color-gray-base',
   grayDark: '--color-gray-dark',
 } as const;
@@ -66,12 +66,12 @@ export const MODULE_COLORS = {
     cssVar: CSS_VAR_COLORS.primary,
   },
   clusters: {
-    bg: 'bg-purple-500',
-    bgLight: 'bg-purple-50',
-    text: 'text-purple-500',
-    textDark: 'text-purple-600',
-    border: 'border-purple-500',
-    gradient: 'from-purple-500 to-purple-600',
+    bg: 'bg-info-500',
+    bgLight: 'bg-info-50',
+    text: 'text-info-500',
+    textDark: 'text-info-600',
+    border: 'border-info-500',
+    gradient: 'from-info-500 to-info-600',
     cssVar: CSS_VAR_COLORS.purple,
   },
   ideas: {
@@ -104,12 +104,12 @@ export const MODULE_COLORS = {
     cssVar: CSS_VAR_COLORS.primary,
   },
   images: {
-    bg: 'bg-purple-500',
-    bgLight: 'bg-purple-50',
-    text: 'text-purple-500',
-    textDark: 'text-purple-600',
-    border: 'border-purple-500',
-    gradient: 'from-purple-500 to-purple-600',
+    bg: 'bg-info-500',
+    bgLight: 'bg-info-50',
+    text: 'text-info-500',
+    textDark: 'text-info-600',
+    border: 'border-info-500',
+    gradient: 'from-info-500 to-info-600',
     cssVar: CSS_VAR_COLORS.purple,
   },
   review: {
diff --git a/frontend/src/config/pages/content.config.tsx b/frontend/src/config/pages/content.config.tsx
index 31210fd3..fb9dbd16 100644
--- a/frontend/src/config/pages/content.config.tsx
+++ b/frontend/src/config/pages/content.config.tsx
@@ -331,7 +331,7 @@ export const createContentPageConfig = (
               {/* Prompts Icon */}
               <div
                 className={`w-5 h-5 flex items-center justify-center flex-shrink-0 ${
-                  hasPrompts ? 'text-purple-500 dark:text-purple-400' : 'text-gray-300 dark:text-gray-600'
+                  hasPrompts ? 'text-info-500 dark:text-info-400' : 'text-gray-300 dark:text-gray-600'
                 }`}
                 title={hasPrompts ? 'Prompts ready' : 'No prompts'}
               >
diff --git a/frontend/src/config/pages/table-actions.config.tsx b/frontend/src/config/pages/table-actions.config.tsx
index 599fbb4b..827712c7 100644
--- a/frontend/src/config/pages/table-actions.config.tsx
+++ b/frontend/src/config/pages/table-actions.config.tsx
@@ -260,7 +260,7 @@ const tableActionsConfigs: Record<string, TableActionsConfig> = {
       {
         key: 'generate_image_prompts',
         label: 'Generate Image Prompts',
-        icon: <BoltIcon className="w-5 h-5 text-purple-500" />,
+        icon: <BoltIcon className="w-5 h-5 text-info-500" />,
         variant: 'primary',
       },
     ],
diff --git a/frontend/src/layout/AppHeader.tsx b/frontend/src/layout/AppHeader.tsx
index d17e681e..fc4fd9a7 100644
--- a/frontend/src/layout/AppHeader.tsx
+++ b/frontend/src/layout/AppHeader.tsx
@@ -35,16 +35,16 @@ const SITE_WITH_ALL_SITES_ROUTES = [
 const badgeColors: Record<string, { bg: string; light: string }> = {
   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' },
+  purple: { bg: 'bg-info-600 dark:bg-info-500', light: 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-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' },
+  indigo: { bg: 'bg-info-600 dark:bg-info-500', light: 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-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' },
+  pink: { bg: 'bg-info-600 dark:bg-info-500', light: 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-300' },
+  emerald: { bg: 'bg-info-600 dark:bg-info-500', light: 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-300' },
+  cyan: { bg: 'bg-info-600 dark:bg-info-500', light: 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-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' },
+  teal: { bg: 'bg-info-600 dark:bg-info-500', light: 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-300' },
 };
 
 const AppHeader: React.FC = () => {
diff --git a/frontend/src/layout/AppSidebar.tsx b/frontend/src/layout/AppSidebar.tsx
index c933b3cf..e5987f6d 100644
--- a/frontend/src/layout/AppSidebar.tsx
+++ b/frontend/src/layout/AppSidebar.tsx
@@ -440,7 +440,7 @@ const AppSidebar: React.FC = () => {
                 height={30}
               />
               {/* AI SEO Engine Badge */}
-              <span className="mt-2 px-2 py-0.5 text-xs font-medium rounded-[5px] bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300">
+              <span className="mt-2 px-2 py-0.5 text-xs font-medium rounded-[5px] bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-300">
                 AI SEO Engine
               </span>
             </>
diff --git a/frontend/src/marketing/components/CTASection.tsx b/frontend/src/marketing/components/CTASection.tsx
index 91237c68..834f3ca4 100644
--- a/frontend/src/marketing/components/CTASection.tsx
+++ b/frontend/src/marketing/components/CTASection.tsx
@@ -58,9 +58,9 @@ const CTASection: React.FC<CTASectionProps> = ({
   return (
     <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 overflow-hidden rounded-3xl border-2 border-[var(--color-primary)]/20 bg-gradient-to-br from-[var(--color-primary)]/5 via-[var(--color-info)]/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-info)]/10" />
+          <div className="absolute -inset-1 bg-gradient-to-r from-[var(--color-primary)]/20 via-[var(--color-info)]/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-gray-900 leading-tight">
               {title}
diff --git a/frontend/src/marketing/components/FeatureGrid.tsx b/frontend/src/marketing/components/FeatureGrid.tsx
index 4a5629ed..2ec8fb0e 100644
--- a/frontend/src/marketing/components/FeatureGrid.tsx
+++ b/frontend/src/marketing/components/FeatureGrid.tsx
@@ -17,7 +17,7 @@ const FeatureGrid: React.FC<FeatureGridProps> = ({ features }) => {
     "from-[var(--color-primary)] to-[var(--color-primary-dark)]", // Blue
     "from-[var(--color-success)] to-[var(--color-success-dark)]", // Green
     "from-[var(--color-warning)] to-[var(--color-warning-dark)]", // Amber
-    "from-[var(--color-purple)] to-[var(--color-purple-dark)]", // Purple
+    "from-[var(--color-info)] to-[var(--color-info-dark)]", // Purple
   ];
 
   return (
diff --git a/frontend/src/marketing/components/HeroSection.tsx b/frontend/src/marketing/components/HeroSection.tsx
index e0c72902..f8014125 100644
--- a/frontend/src/marketing/components/HeroSection.tsx
+++ b/frontend/src/marketing/components/HeroSection.tsx
@@ -59,7 +59,7 @@ const HeroSection: React.FC<HeroSectionProps> = ({
 
   return (
     <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-gradient-to-br from-[var(--color-primary)]/10 via-transparent to-[var(--color-info)]/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">
         <div className="flex-1 flex flex-col gap-6">
@@ -84,7 +84,7 @@ const HeroSection: React.FC<HeroSectionProps> = ({
         </div>
         <div className="flex-1 w-full">
           <div className="relative rounded-3xl border-2 border-[var(--color-primary)]/30 bg-gradient-to-br from-white/5 to-white/10 backdrop-blur-sm shadow-2xl shadow-[var(--color-primary)]/20">
-            <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" />
+            <div className="absolute -inset-1 bg-gradient-to-r from-[var(--color-primary)]/20 via-[var(--color-info)]/20 to-[var(--color-success)]/20 rounded-3xl blur-xl -z-10" />
             <img
               src={`/marketing/images/${image}`}
               alt="Igny8 dashboard preview"
diff --git a/frontend/src/marketing/components/WorkflowSteps.tsx b/frontend/src/marketing/components/WorkflowSteps.tsx
index b76cf368..c105952e 100644
--- a/frontend/src/marketing/components/WorkflowSteps.tsx
+++ b/frontend/src/marketing/components/WorkflowSteps.tsx
@@ -14,7 +14,7 @@ const WorkflowSteps: React.FC<WorkflowStepsProps> = ({ steps }) => {
     "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
     "from-[var(--color-success)] to-[var(--color-success-dark)]",
     "from-[var(--color-warning)] to-[var(--color-warning-dark)]",
-    "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
+    "from-[var(--color-info)] to-[var(--color-info-dark)]",
   ];
 
   return (
diff --git a/frontend/src/marketing/pages/CaseStudies.tsx b/frontend/src/marketing/pages/CaseStudies.tsx
index ee5d1e2b..f0498828 100644
--- a/frontend/src/marketing/pages/CaseStudies.tsx
+++ b/frontend/src/marketing/pages/CaseStudies.tsx
@@ -72,7 +72,7 @@ const CaseStudies: React.FC = () => {
       summary:
         "Arcadia used Igny8 to align SEO, product marketing, and design. Thinker libraries ensured every asset matched product messaging; automation pushed approved content directly into Shopify, WordPress, and custom sites, plus HubSpot.",
       image: "case-arcadia.png",
-      iconColor: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
+      iconColor: "from-[var(--color-info)] to-[var(--color-info-dark)]",
     },
   ];
 
diff --git a/frontend/src/marketing/pages/Home.tsx b/frontend/src/marketing/pages/Home.tsx
index 6b8868c7..c235f438 100644
--- a/frontend/src/marketing/pages/Home.tsx
+++ b/frontend/src/marketing/pages/Home.tsx
@@ -48,11 +48,11 @@ const Home: React.FC = () => {
   // 8-Stage Content Pipeline - matches current implementation
   const workflowSteps = [
     { name: "Keywords", icon: ListBulletIcon, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]", description: "Import & organize" },
-    { name: "Clusters", icon: UserGroupIcon, color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]", description: "Group related terms" },
+    { name: "Clusters", icon: UserGroupIcon, color: "from-[var(--color-info)] to-[var(--color-info-dark)]", description: "Group related terms" },
     { name: "Ideas", icon: LightBulbIcon, color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]", description: "Generate concepts" },
     { name: "Tasks", icon: ClipboardDocumentCheckIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]", description: "Create briefs" },
     { name: "Content", icon: DocumentTextIcon, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]", description: "AI writing" },
-    { name: "Images", icon: PhotoIcon, color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]", description: "Visual generation" },
+    { name: "Images", icon: PhotoIcon, color: "from-[var(--color-info)] to-[var(--color-info-dark)]", description: "Visual generation" },
     { name: "Review", icon: CheckBadgeIcon, color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]", description: "Quality check" },
     { name: "Published", icon: GlobeAltIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]", description: "Go live" },
   ];
@@ -113,7 +113,7 @@ const Home: React.FC = () => {
         "Real-time progress monitoring and error handling",
       ],
       icon: BoltIcon,
-      color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
+      color: "from-[var(--color-info)] to-[var(--color-info-dark)]",
       image: "automation-dashboard.png",
       link: "/product#automation",
       align: "right",
@@ -159,7 +159,7 @@ const Home: React.FC = () => {
             <div className="relative z-10">
               <div className="relative scale-110 lg:scale-125">
                 {/* Soft glow behind screenshot */}
-                <div className="absolute -inset-6 bg-gradient-to-br from-white/20 via-[var(--color-primary)]/10 to-[var(--color-purple)]/10 rounded-3xl blur-xl" />
+                <div className="absolute -inset-6 bg-gradient-to-br from-white/20 via-[var(--color-primary)]/10 to-[var(--color-info)]/10 rounded-3xl blur-xl" />
                 {/* Device frame effect */}
                 <div className="absolute -inset-3 bg-gradient-to-br from-white/10 to-white/5 rounded-3xl blur-lg" />
                 <div className="relative rounded-2xl border-4 border-white/20 bg-white/10 backdrop-blur-sm shadow-lg overflow-hidden">
@@ -210,7 +210,7 @@ const Home: React.FC = () => {
       </section>
 
       {/* HOW IGNY8 WORKS (PIPELINE) */}
-      <section className="py-24 bg-gradient-to-b from-white via-[var(--color-primary)]/3 to-[var(--color-purple)]/3">
+      <section className="py-24 bg-gradient-to-b from-white via-[var(--color-primary)]/3 to-[var(--color-info)]/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-gray-900 mb-4">
@@ -224,7 +224,7 @@ const Home: React.FC = () => {
           {/* 8-Stage Horizontal Timeline */}
           <div className="relative">
             {/* Enhanced connecting line with shadow */}
-            <div className="absolute top-12 left-0 right-0 h-1 bg-gradient-to-r from-[var(--color-primary)] via-[var(--color-purple)] via-[var(--color-warning)] via-[var(--color-success)] to-[var(--color-primary)] opacity-25 hidden md:block shadow-lg shadow-[var(--color-primary)]/20" />
+            <div className="absolute top-12 left-0 right-0 h-1 bg-gradient-to-r from-[var(--color-primary)] via-[var(--color-info)] via-[var(--color-warning)] via-[var(--color-success)] to-[var(--color-primary)] opacity-25 hidden md:block shadow-lg shadow-[var(--color-primary)]/20" />
 
             <div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-8 gap-4 md:gap-3">
               {workflowSteps.map((step, index) => {
@@ -258,7 +258,7 @@ const Home: React.FC = () => {
           "bg-white",
           "bg-gradient-to-b from-[var(--color-primary)]/1 to-white",
           "bg-gradient-to-b from-[var(--color-success)]/1 to-white",
-          "bg-gradient-to-b from-[var(--color-purple)]/1 to-white",
+          "bg-gradient-to-b from-[var(--color-info)]/1 to-white",
         ];
         
         return (
@@ -427,12 +427,12 @@ const Home: React.FC = () => {
               const gradientColors = [
                 "from-[var(--color-primary)]/20 to-[var(--color-primary-dark)]/10",
                 "from-[var(--color-success)]/20 to-[var(--color-success-dark)]/10",
-                "from-[var(--color-purple)]/20 to-[var(--color-purple-dark)]/10",
+                "from-[var(--color-info)]/20 to-[var(--color-info-dark)]/10",
               ];
               const borderColors = [
             "border-[var(--color-primary)]/30",
             "border-[var(--color-success)]/30",
-            "border-[var(--color-purple)]/30",
+            "border-[var(--color-info)]/30",
           ];
               
           return (
diff --git a/frontend/src/marketing/pages/Partners.tsx b/frontend/src/marketing/pages/Partners.tsx
index b2b98459..214a5e75 100644
--- a/frontend/src/marketing/pages/Partners.tsx
+++ b/frontend/src/marketing/pages/Partners.tsx
@@ -116,7 +116,7 @@ const Partners: React.FC = () => {
                 <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)]"];
+                    const dotColors = ["bg-[var(--color-primary)]", "bg-[var(--color-success)]", "bg-[var(--color-warning)]", "bg-[var(--color-info)]"];
                     return (
                       <li key={benefit} className="flex gap-3">
                         <span className={`mt-1.5 size-2 rounded-full ${dotColors[benefitIdx % dotColors.length]} shadow-sm flex-shrink-0`} />
diff --git a/frontend/src/marketing/pages/Pricing.tsx b/frontend/src/marketing/pages/Pricing.tsx
index 1d2adc75..8052939f 100644
--- a/frontend/src/marketing/pages/Pricing.tsx
+++ b/frontend/src/marketing/pages/Pricing.tsx
@@ -427,7 +427,7 @@ const Pricing: React.FC = () => {
         <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-[var(--color-primary)]/10 via-[var(--color-purple)]/10 to-[var(--color-success)]/10 sticky top-0">
+              <thead className="bg-gradient-to-r from-[var(--color-primary)]/10 via-[var(--color-info)]/10 to-[var(--color-success)]/10 sticky top-0">
                 <tr>
                   <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>
@@ -493,7 +493,7 @@ const Pricing: React.FC = () => {
                           <span className="text-gray-400">—</span>
                         ) : (
                           <span className="inline-flex items-center gap-1">
-                            <span className="size-1.5 rounded-full bg-[var(--color-purple)]"></span>
+                            <span className="size-1.5 rounded-full bg-[var(--color-info)]"></span>
                             {row.scale}
                           </span>
                         )}
@@ -551,7 +551,7 @@ const Pricing: React.FC = () => {
               Need more? Add packs instantly or set automation rules to pause when thresholds are hit.
             </p>
           </div>
-          <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="rounded-3xl border-2 border-[var(--color-success)]/30 bg-gradient-to-br from-[var(--color-success)]/5 via-white to-[var(--color-info)]/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" />
diff --git a/frontend/src/marketing/pages/Product.tsx b/frontend/src/marketing/pages/Product.tsx
index ca36480c..67c51aef 100644
--- a/frontend/src/marketing/pages/Product.tsx
+++ b/frontend/src/marketing/pages/Product.tsx
@@ -48,11 +48,11 @@ const Product: React.FC = () => {
   // 8-Stage Content Pipeline - matches current implementation
   const workflowSteps = [
     { name: "Keywords", icon: ListBulletIcon, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]", description: "Import & organize" },
-    { name: "Clusters", icon: UserGroupIcon, color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]", description: "Group related terms" },
+    { name: "Clusters", icon: UserGroupIcon, color: "from-[var(--color-info)] to-[var(--color-info-dark)]", description: "Group related terms" },
     { name: "Ideas", icon: LightBulbIcon, color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]", description: "Generate concepts" },
     { name: "Tasks", icon: ClipboardDocumentCheckIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]", description: "Create briefs" },
     { name: "Content", icon: DocumentTextIcon, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]", description: "AI writing" },
-    { name: "Images", icon: PhotoIcon, color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]", description: "Visual generation" },
+    { name: "Images", icon: PhotoIcon, color: "from-[var(--color-info)] to-[var(--color-info-dark)]", description: "Visual generation" },
     { name: "Review", icon: CheckBadgeIcon, color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]", description: "Quality check" },
     { name: "Published", icon: GlobeAltIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]", description: "Go live" },
   ];
@@ -118,7 +118,7 @@ const Product: React.FC = () => {
         "Automation dashboard with pipeline visualization and controls",
       ],
       icon: BoltIcon,
-      color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
+      color: "from-[var(--color-info)] to-[var(--color-info-dark)]",
       image: "automation-dashboard.png",
       link: "#automation",
     },
@@ -170,7 +170,7 @@ const Product: React.FC = () => {
           {/* 8-Stage Horizontal Timeline */}
           <div className="relative">
             {/* Enhanced connecting line with shadow */}
-            <div className="absolute top-12 left-0 right-0 h-1 bg-gradient-to-r from-[var(--color-primary)] via-[var(--color-purple)] via-[var(--color-warning)] via-[var(--color-success)] to-[var(--color-primary)] opacity-25 hidden md:block shadow-lg shadow-[var(--color-primary)]/20" />
+            <div className="absolute top-12 left-0 right-0 h-1 bg-gradient-to-r from-[var(--color-primary)] via-[var(--color-info)] via-[var(--color-warning)] via-[var(--color-success)] to-[var(--color-primary)] opacity-25 hidden md:block shadow-lg shadow-[var(--color-primary)]/20" />
 
             <div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-8 gap-4 md:gap-3">
               {workflowSteps.map((step, index) => {
@@ -204,7 +204,7 @@ const Product: React.FC = () => {
           "bg-white",
           "bg-gradient-to-b from-[var(--color-primary)]/1 to-white",
           "bg-gradient-to-b from-[var(--color-success)]/1 to-white",
-          "bg-gradient-to-b from-[var(--color-purple)]/1 to-white",
+          "bg-gradient-to-b from-[var(--color-info)]/1 to-white",
         ];
         
         return (
@@ -283,7 +283,7 @@ const Product: React.FC = () => {
             {/* Left: Content */}
             <div className="z-10">
               <div className="flex items-center gap-3 mb-6">
-                <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-purple)] flex items-center justify-center text-white shadow-lg shadow-[var(--color-primary)]/30">
+                <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-info)] flex items-center justify-center text-white shadow-lg shadow-[var(--color-primary)]/30">
                   <BoltIcon className="h-6 w-6" />
                 </div>
                 <h2 className="text-4xl md:text-5xl font-bold text-white">
@@ -297,12 +297,12 @@ const Product: React.FC = () => {
               {/* 7 Automation Handoffs with neon glows */}
               <div className="space-y-4">
                 {[
-                  { from: "Keywords", to: "Clusters", stage: 1, color: "from-[var(--color-primary)] to-[var(--color-purple)]", glow: "shadow-[var(--color-primary)]/50" },
-                  { from: "Clusters", to: "Ideas", stage: 2, color: "from-[var(--color-purple)] to-[var(--color-warning)]", glow: "shadow-[var(--color-purple)]/50" },
+                  { from: "Keywords", to: "Clusters", stage: 1, color: "from-[var(--color-primary)] to-[var(--color-info)]", glow: "shadow-[var(--color-primary)]/50" },
+                  { from: "Clusters", to: "Ideas", stage: 2, color: "from-[var(--color-info)] to-[var(--color-warning)]", glow: "shadow-[var(--color-info)]/50" },
                   { from: "Ideas", to: "Tasks", stage: 3, color: "from-[var(--color-warning)] to-[var(--color-success)]", glow: "shadow-[var(--color-warning)]/50" },
                   { from: "Tasks", to: "Content", stage: 4, color: "from-[var(--color-success)] to-[var(--color-primary)]", glow: "shadow-[var(--color-success)]/50" },
-                  { from: "Content", to: "Images", stage: 5, color: "from-[var(--color-primary)] to-[var(--color-purple)]", glow: "shadow-[var(--color-primary)]/50" },
-                  { from: "Images", to: "Review", stage: 6, color: "from-[var(--color-purple)] to-[var(--color-warning)]", glow: "shadow-[var(--color-purple)]/50" },
+                  { from: "Content", to: "Images", stage: 5, color: "from-[var(--color-primary)] to-[var(--color-info)]", glow: "shadow-[var(--color-primary)]/50" },
+                  { from: "Images", to: "Review", stage: 6, color: "from-[var(--color-info)] to-[var(--color-warning)]", glow: "shadow-[var(--color-info)]/50" },
                   { from: "Review", to: "Published", stage: 7, color: "from-[var(--color-warning)] to-[var(--color-success)]", glow: "shadow-[var(--color-warning)]/50" },
                 ].map((handoff, i) => (
                   <div key={i} className="flex items-center gap-3">
@@ -336,7 +336,7 @@ const Product: React.FC = () => {
                 />
               </div>
               {/* Glow effect */}
-              <div className="absolute -inset-4 bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-purple)]/20 rounded-2xl blur-2xl -z-10" />
+              <div className="absolute -inset-4 bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-info)]/20 rounded-2xl blur-2xl -z-10" />
             </div>
           </div>
 
@@ -379,12 +379,12 @@ const Product: React.FC = () => {
               const gradientColors = [
                 "from-[var(--color-primary)]/20 to-[var(--color-primary-dark)]/10",
                 "from-[var(--color-success)]/20 to-[var(--color-success-dark)]/10",
-                "from-[var(--color-purple)]/20 to-[var(--color-purple-dark)]/10",
+                "from-[var(--color-info)]/20 to-[var(--color-info-dark)]/10",
               ];
               const borderColors = [
                 "border-[var(--color-primary)]/30",
                 "border-[var(--color-success)]/30",
-                "border-[var(--color-purple)]/30",
+                "border-[var(--color-info)]/30",
               ];
               
               return (
diff --git a/frontend/src/marketing/pages/Resources.tsx b/frontend/src/marketing/pages/Resources.tsx
index de20724c..3c5c28ce 100644
--- a/frontend/src/marketing/pages/Resources.tsx
+++ b/frontend/src/marketing/pages/Resources.tsx
@@ -95,7 +95,7 @@ const Resources: React.FC = () => {
       type: "Template",
       tags: ["Template", "Workflow"],
       icon: DocumentTextIcon,
-      color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
+      color: "from-[var(--color-info)] to-[var(--color-info-dark)]",
     },
     {
       title: "Cluster Mapping Board",
@@ -132,7 +132,7 @@ const Resources: React.FC = () => {
       type: "Replay",
       tag: "Replay",
       icon: PlayIcon,
-      color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
+      color: "from-[var(--color-info)] to-[var(--color-info-dark)]",
     },
     {
       title: "Editorial Control and AI Tone Systems",
@@ -167,7 +167,7 @@ const Resources: React.FC = () => {
       type: "SOP Pack",
       tags: ["Execution", "Prompt Pack"],
       icon: ListBulletIcon,
-      color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
+      color: "from-[var(--color-info)] to-[var(--color-info-dark)]",
     },
     {
       title: "AI Prompt Library for Content Teams",
@@ -276,13 +276,13 @@ const Resources: React.FC = () => {
               const colors = [
                 "from-[var(--color-primary)]/10 to-white",
                 "from-[var(--color-success)]/10 to-white",
-                "from-[var(--color-purple)]/10 to-white",
+                "from-[var(--color-info)]/10 to-white",
                 "from-[var(--color-warning)]/10 to-white",
               ];
               const borders = [
                 "border-[var(--color-primary)]/30",
                 "border-[var(--color-success)]/30",
-                "border-[var(--color-purple)]/30",
+                "border-[var(--color-info)]/30",
                 "border-[var(--color-warning)]/30",
               ];
               return (
@@ -353,13 +353,13 @@ const Resources: React.FC = () => {
               const colors = [
                 "from-[var(--color-primary)]/10 to-white",
                 "from-[var(--color-success)]/10 to-white",
-                "from-[var(--color-purple)]/10 to-white",
+                "from-[var(--color-info)]/10 to-white",
                 "from-[var(--color-warning)]/10 to-white",
               ];
               const borders = [
                 "border-[var(--color-primary)]/30",
                 "border-[var(--color-success)]/30",
-                "border-[var(--color-purple)]/30",
+                "border-[var(--color-info)]/30",
                 "border-[var(--color-warning)]/30",
               ];
               return (
@@ -375,7 +375,7 @@ const Resources: React.FC = () => {
                       className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.1em] ${
                         resource.tag === "Live"
                           ? "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"
+                          : "bg-[var(--color-info)]/10 text-[var(--color-info)] border border-[var(--color-info)]/30"
                       }`}
                     >
                       {resource.tag}
diff --git a/frontend/src/marketing/pages/Solutions.tsx b/frontend/src/marketing/pages/Solutions.tsx
index 0fc86950..ae254aab 100644
--- a/frontend/src/marketing/pages/Solutions.tsx
+++ b/frontend/src/marketing/pages/Solutions.tsx
@@ -100,11 +100,11 @@ const Solutions: React.FC = () => {
         "Credit-based usage tracking to optimize spend and resource allocation",
         "Publisher module for content calendar and scheduled publishing",
       ],
-      color: "from-[var(--color-purple)]/5 to-white",
-      borderColor: "border-[var(--color-purple)]/20",
-      iconColor: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
+      color: "from-[var(--color-info)]/5 to-white",
+      borderColor: "border-[var(--color-info)]/20",
+      iconColor: "from-[var(--color-info)] to-[var(--color-info-dark)]",
       painColor: "bg-error-500",
-      outcomeColor: "bg-[var(--color-purple)]",
+      outcomeColor: "bg-[var(--color-info)]",
     },
   ];
 
@@ -131,13 +131,13 @@ const Solutions: React.FC = () => {
       title: "Cluster Analysis",
       description: "AI-powered semantic clustering to group related keywords and build topical authority maps.",
       icon: UserGroupIcon,
-      color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
+      color: "from-[var(--color-info)] to-[var(--color-info-dark)]",
     },
     {
       title: "Image Generation",
       description: "AI-generated featured and in-article images based on your content with brand consistency.",
       icon: PhotoIcon,
-      color: "from-[var(--color-primary)] to-[var(--color-purple)]",
+      color: "from-[var(--color-primary)] to-[var(--color-info)]",
     },
     {
       title: "Workflow Automation",
@@ -222,8 +222,8 @@ const Solutions: React.FC = () => {
               {/* Right: IGNY8 Outcomes */}
               <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)]'}`}>
+                  <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-info)]'}`} />
+                  <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-info)]'}`}>
                     IGNY8 Outcomes
                   </h4>
                 </div>
diff --git a/frontend/src/marketing/pages/Tour.tsx b/frontend/src/marketing/pages/Tour.tsx
index ac5c49b1..ad6d7268 100644
--- a/frontend/src/marketing/pages/Tour.tsx
+++ b/frontend/src/marketing/pages/Tour.tsx
@@ -61,7 +61,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-[var(--color-purple)]/40", gradient: "from-[var(--color-purple)]/10 to-white", dot: "bg-[var(--color-purple)]" },
+            { border: "border-[var(--color-info)]/40", gradient: "from-[var(--color-info)]/10 to-white", dot: "bg-[var(--color-info)]" },
           ];
           const colorScheme = colors[index % colors.length];
           return (
@@ -99,11 +99,11 @@ const Tour: React.FC = () => {
           <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 text-sm text-gray-600">
             {[
               { name: "Keywords → Clusters", time: "Stage 1", highlight: "Auto-cluster by AI similarity", color: "border-[var(--color-primary)]/40", gradient: "from-[var(--color-primary)]/10 to-white" },
-              { name: "Clusters → Ideas", time: "Stage 2", highlight: "Generate content concepts", color: "border-[var(--color-purple)]/40", gradient: "from-[var(--color-purple)]/10 to-white" },
+              { name: "Clusters → Ideas", time: "Stage 2", highlight: "Generate content concepts", color: "border-[var(--color-info)]/40", gradient: "from-[var(--color-info)]/10 to-white" },
               { name: "Ideas → Tasks", time: "Stage 3", highlight: "Create writing assignments", color: "border-[var(--color-warning)]/40", gradient: "from-[var(--color-warning)]/10 to-white" },
               { name: "Tasks → Content", time: "Stage 4", highlight: "Generate AI articles", color: "border-[var(--color-success)]/40", gradient: "from-[var(--color-success)]/10 to-white" },
               { name: "Content → Images", time: "Stage 5", highlight: "Create featured & in-article images", color: "border-[var(--color-primary)]/40", gradient: "from-[var(--color-primary)]/10 to-white" },
-              { name: "Images → Review", time: "Stage 6", highlight: "Queue for editorial approval", color: "border-[var(--color-purple)]/40", gradient: "from-[var(--color-purple)]/10 to-white" },
+              { name: "Images → Review", time: "Stage 6", highlight: "Queue for editorial approval", color: "border-[var(--color-info)]/40", gradient: "from-[var(--color-info)]/10 to-white" },
               { name: "Review → Published", time: "Stage 7", highlight: "Publish to your site", color: "border-[var(--color-success)]/40", gradient: "from-[var(--color-success)]/10 to-white" },
             ].map((recipe) => (
               <div
diff --git a/frontend/src/marketing/pages/Upcoming.tsx b/frontend/src/marketing/pages/Upcoming.tsx
index ba23eb66..3a641df0 100644
--- a/frontend/src/marketing/pages/Upcoming.tsx
+++ b/frontend/src/marketing/pages/Upcoming.tsx
@@ -81,8 +81,8 @@ const Upcoming: React.FC = () => {
     {
       phase: "Launching Q2 2026",
       badge: "In Development",
-      badgeColor: "bg-gradient-to-r from-[var(--color-purple)] to-[var(--color-purple-dark)] text-white",
-      borderColor: "border-[var(--color-purple)]/30",
+      badgeColor: "bg-gradient-to-r from-[var(--color-info)] to-[var(--color-info-dark)] text-white",
+      borderColor: "border-[var(--color-info)]/30",
       features: [
         {
           icon: ShoppingBagIcon,
@@ -124,7 +124,7 @@ const Upcoming: React.FC = () => {
             "FAQ pages mapped to search intent",
             "Press and media pages",
           ],
-          color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
+          color: "from-[var(--color-info)] to-[var(--color-info-dark)]",
         },
       ],
     },
@@ -188,7 +188,7 @@ const Upcoming: React.FC = () => {
             "Custom white-label reports",
             "API access for data export",
           ],
-          color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
+          color: "from-[var(--color-info)] to-[var(--color-info-dark)]",
         },
       ],
     },
@@ -246,7 +246,7 @@ const Upcoming: React.FC = () => {
                 <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                   {phase.phase}
                 </h2>
-                <div className="w-24 h-1 bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-purple)] mx-auto rounded-full" />
+                <div className="w-24 h-1 bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-info)] mx-auto rounded-full" />
               </div>
 
               {/* Features Grid */}
diff --git a/frontend/src/marketing/styles/marketing.css b/frontend/src/marketing/styles/marketing.css
index 32760507..59ebc779 100644
--- a/frontend/src/marketing/styles/marketing.css
+++ b/frontend/src/marketing/styles/marketing.css
@@ -136,7 +136,7 @@
 
   --color-theme-pink-500: #ee46bc;
 
-  --color-theme-purple-500: #7a5af8;
+  --color-theme-info-500: #7a5af8;
 
   --shadow-theme-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
     0px 2px 4px -2px rgba(16, 24, 40, 0.06);
diff --git a/frontend/src/pages/Automation/AutomationPage.tsx b/frontend/src/pages/Automation/AutomationPage.tsx
index c4d102af..decb5316 100644
--- a/frontend/src/pages/Automation/AutomationPage.tsx
+++ b/frontend/src/pages/Automation/AutomationPage.tsx
@@ -52,11 +52,11 @@ import {
  */
 const STAGE_CONFIG = [
   { icon: ListIcon, color: 'from-brand-500 to-brand-600', textColor: 'text-brand-600 dark:text-brand-400', bgColor: 'bg-brand-100 dark:bg-brand-900/30', hoverColor: 'hover:border-brand-500', name: 'Keywords → Clusters' },
-  { icon: GroupIcon, color: 'from-purple-500 to-purple-600', textColor: 'text-purple-600 dark:text-purple-400', bgColor: 'bg-purple-100 dark:bg-purple-900/30', hoverColor: 'hover:border-purple-500', name: 'Clusters → Ideas' },
+  { icon: GroupIcon, color: 'from-info-500 to-info-600', textColor: 'text-info-600 dark:text-info-400', bgColor: 'bg-info-100 dark:bg-info-900/30', hoverColor: 'hover:border-info-500', name: 'Clusters → Ideas' },
   { icon: BoltIcon, color: 'from-warning-500 to-warning-600', textColor: 'text-warning-600 dark:text-warning-400', bgColor: 'bg-warning-100 dark:bg-warning-900/30', hoverColor: 'hover:border-warning-500', name: 'Ideas → Tasks' },
   { icon: CheckCircleIcon, color: 'from-gray-700 to-gray-800', textColor: 'text-gray-700 dark:text-gray-300', bgColor: 'bg-gray-100 dark:bg-gray-800/30', hoverColor: 'hover:border-gray-500', name: 'Tasks → Content' },
   { icon: PencilIcon, color: 'from-brand-500 to-brand-600', textColor: 'text-brand-600 dark:text-brand-400', bgColor: 'bg-brand-100 dark:bg-brand-900/30', hoverColor: 'hover:border-brand-500', name: 'Content → Image Prompts' },
-  { icon: FileIcon, color: 'from-purple-500 to-purple-600', textColor: 'text-purple-600 dark:text-purple-400', bgColor: 'bg-purple-100 dark:bg-purple-900/30', hoverColor: 'hover:border-purple-500', name: 'Image Prompts → Images' },
+  { icon: FileIcon, color: 'from-info-500 to-info-600', textColor: 'text-info-600 dark:text-info-400', bgColor: 'bg-info-100 dark:bg-info-900/30', hoverColor: 'hover:border-info-500', name: 'Image Prompts → Images' },
   { icon: PaperPlaneIcon, color: 'from-success-500 to-success-600', textColor: 'text-success-600 dark:text-success-400', bgColor: 'bg-success-100 dark:bg-success-900/30', hoverColor: 'hover:border-success-500', name: 'In Review → Approved' },
 ];
 
@@ -772,7 +772,7 @@ const AutomationPage: React.FC = () => {
               const progressPercent = total > 0 ? Math.min(Math.round((processed / total) * 100), 100) : 0;
 
               // Determine the left border color based on stage
-              const stageBorderColors = ['border-l-brand-500', 'border-l-purple-500', 'border-l-warning-500', 'border-l-gray-600'];
+              const stageBorderColors = ['border-l-brand-500', 'border-l-info-500', 'border-l-warning-500', 'border-l-gray-600'];
               const stageBorderColor = stageBorderColors[index] || 'border-l-brand-500';
               
               // Check if this stage is enabled in config
@@ -908,7 +908,7 @@ const AutomationPage: React.FC = () => {
               const progressPercent = total > 0 ? Math.min(Math.round((processed / total) * 100), 100) : 0;
 
               // Determine the left border color based on stage (5=brand, 6=purple)
-              const stageBorderColors56 = ['border-l-brand-500', 'border-l-purple-500'];
+              const stageBorderColors56 = ['border-l-brand-500', 'border-l-info-500'];
               const stageBorderColor = stageBorderColors56[index] || 'border-l-brand-500';
               
               // Check if this stage is enabled in config
diff --git a/frontend/src/pages/Help/Help.tsx b/frontend/src/pages/Help/Help.tsx
index 81780b23..782ca719 100644
--- a/frontend/src/pages/Help/Help.tsx
+++ b/frontend/src/pages/Help/Help.tsx
@@ -25,11 +25,11 @@ interface TableOfContentsItem {
 function WorkflowPipeline() {
   const stages = [
     { name: "Keywords", color: "bg-brand-500", description: "Import & organize search terms" },
-    { name: "Clusters", color: "bg-purple-500", description: "Group related keywords" },
+    { name: "Clusters", color: "bg-info-500", description: "Group related keywords" },
     { name: "Ideas", color: "bg-warning-500", description: "Generate content concepts" },
     { name: "Tasks", color: "bg-success-500", description: "Create writing assignments" },
     { name: "Content", color: "bg-brand-500", description: "AI-generate articles" },
-    { name: "Images", color: "bg-purple-500", description: "Create visuals" },
+    { name: "Images", color: "bg-info-500", description: "Create visuals" },
     { name: "Review", color: "bg-warning-500", description: "Edit & approve" },
     { name: "Published", color: "bg-success-500", description: "Live on your site" },
   ];
@@ -81,11 +81,11 @@ function WorkflowPipeline() {
 function AutomationPipelineVisual() {
   const automationStages = [
     { from: "Keywords", to: "Clusters", color: "border-brand-500", bg: "bg-brand-50 dark:bg-brand-900/20" },
-    { from: "Clusters", to: "Ideas", color: "border-purple-500", bg: "bg-purple-50 dark:bg-purple-900/20" },
+    { from: "Clusters", to: "Ideas", color: "border-info-500", bg: "bg-info-50 dark:bg-info-900/20" },
     { from: "Ideas", to: "Tasks", color: "border-warning-500", bg: "bg-warning-50 dark:bg-warning-900/20" },
     { from: "Tasks", to: "Content", color: "border-success-500", bg: "bg-success-50 dark:bg-success-900/20" },
     { from: "Content", to: "Images", color: "border-brand-500", bg: "bg-brand-50 dark:bg-brand-900/20" },
-    { from: "Images", to: "Review", color: "border-purple-500", bg: "bg-purple-50 dark:bg-purple-900/20" },
+    { from: "Images", to: "Review", color: "border-info-500", bg: "bg-info-50 dark:bg-info-900/20" },
     { from: "Review", to: "Published", color: "border-success-500", bg: "bg-success-50 dark:bg-success-900/20" },
   ];
 
@@ -110,7 +110,7 @@ function CreditSystemVisual() {
   const operations = [
     { name: "Content Generation", credits: "Token-based", color: "bg-brand-100 dark:bg-brand-900/30 border-brand-300" },
     { name: "Image Generation (Basic)", credits: "1 credit", color: "bg-success-100 dark:bg-success-900/30 border-success-300" },
-    { name: "Image Generation (Quality)", credits: "5 credits", color: "bg-purple-100 dark:bg-purple-900/30 border-purple-300" },
+    { name: "Image Generation (Quality)", credits: "5 credits", color: "bg-info-100 dark:bg-info-900/30 border-info-300" },
     { name: "Image Generation (Premium)", credits: "15 credits", color: "bg-warning-100 dark:bg-warning-900/30 border-warning-300" },
     { name: "Keyword Clustering", credits: "Token-based", color: "bg-brand-100 dark:bg-brand-900/30 border-brand-300" },
     { name: "Idea Generation", credits: "Token-based", color: "bg-brand-100 dark:bg-brand-900/30 border-brand-300" },
@@ -310,7 +310,7 @@ export default function Help() {
 
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         {/* Table of Contents */}
-        <Card className="p-6 mb-8 bg-gradient-to-r from-brand-50 to-purple-50 dark:from-brand-900/10 dark:to-purple-900/10 border-brand-200 dark:border-brand-800">
+        <Card className="p-6 mb-8 bg-gradient-to-r from-brand-50 to-info-50 dark:from-brand-900/10 dark:to-info-900/10 border-brand-200 dark:border-brand-800">
           <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
             <ListIcon className="size-5 text-brand-600 dark:text-brand-400" />
             What Do You Want to Learn?
@@ -372,7 +372,7 @@ export default function Help() {
                   </div>
 
                   <div className="flex gap-4">
-                    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-purple-500 text-white flex items-center justify-center font-bold">
+                    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-info-500 text-white flex items-center justify-center font-bold">
                       3
                     </div>
                     <div className="flex-1">
@@ -408,7 +408,7 @@ export default function Help() {
                   </div>
 
                   <div className="flex gap-4">
-                    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-purple-500 text-white flex items-center justify-center font-bold">
+                    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-info-500 text-white flex items-center justify-center font-bold">
                       6
                     </div>
                     <div className="flex-1">
@@ -494,7 +494,7 @@ export default function Help() {
                 </p>
               </div>
 
-              <div className="border-l-4 border-purple-500 pl-4">
+              <div className="border-l-4 border-info-500 pl-4">
                 <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Key Metrics</h4>
                 <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
                   <li>Total keywords in workflow</li>
@@ -624,7 +624,7 @@ export default function Help() {
                     </ul>
                   </div>
 
-                  <div className="border-l-4 border-purple-500 pl-4">
+                  <div className="border-l-4 border-info-500 pl-4">
                     <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Image Settings Tab</h4>
                     <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
                       <li><strong>Image Quality:</strong> Basic, Quality, or Premium (powered by IGNY8 AI)</li>
@@ -862,7 +862,7 @@ export default function Help() {
                   </div>
                 </div>
 
-                <div className="border-l-4 border-purple-500 pl-4 mt-4">
+                <div className="border-l-4 border-info-500 pl-4 mt-4">
                   <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Content Statuses</h4>
                   <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
                     <li><strong>Draft:</strong> Initial AI-generated content</li>
@@ -890,7 +890,7 @@ export default function Help() {
                     </p>
                   </div>
 
-                  <div className="border-l-4 border-purple-500 pl-4">
+                  <div className="border-l-4 border-info-500 pl-4">
                     <h4 className="font-semibold text-gray-900 dark:text-white mb-2">In-Article Images</h4>
                     <p className="text-sm text-gray-600 dark:text-gray-400">
                       Additional images placed throughout the content. Enhances reader engagement and SEO.
@@ -976,7 +976,7 @@ export default function Help() {
                 </ul>
               </div>
 
-              <div className="border-l-4 border-purple-500 pl-4">
+              <div className="border-l-4 border-info-500 pl-4">
                 <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Batch Configuration</h4>
                 <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
                   <li>Set items per batch (5, 10, 25, 50)</li>
@@ -998,7 +998,7 @@ export default function Help() {
         {/* Publisher Section */}
         <div ref={(el) => (sectionRefs.current["publisher"] = 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-purple-600 dark:text-purple-400" />
+            <FileIcon className="size-8 text-info-600 dark:text-info-400" />
             Publisher & Calendar
           </h2>
 
@@ -1025,7 +1025,7 @@ export default function Help() {
                 </ul>
               </div>
 
-              <div className="border-l-4 border-purple-500 pl-4">
+              <div className="border-l-4 border-info-500 pl-4">
                 <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Publishing History</h4>
                 <p className="text-sm text-gray-600 dark:text-gray-400">
                   Track all published content with timestamps, post IDs, and sync status.
@@ -1101,7 +1101,7 @@ export default function Help() {
                     </ul>
                   </div>
 
-                  <div className="border-l-4 border-purple-500 pl-4">
+                  <div className="border-l-4 border-info-500 pl-4">
                     <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Image Generation</h4>
                     <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
                       <li><strong>Basic (1 credit):</strong> Fast, cost-effective images</li>
@@ -1118,7 +1118,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-purple-600 dark:text-purple-400" />
+            <GroupIcon className="size-8 text-info-600 dark:text-info-400" />
             Account & Billing
           </h2>
 
@@ -1141,7 +1141,7 @@ export default function Help() {
                     </p>
                   </div>
 
-                  <div className="border-l-4 border-purple-500 pl-4">
+                  <div className="border-l-4 border-info-500 pl-4">
                     <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Fixed-Cost Operations</h4>
                     <p className="text-sm text-gray-600 dark:text-gray-400">
                       Image generation uses fixed credits: 1 for Basic, 5 for Quality, and 15 for Premium.
@@ -1207,7 +1207,7 @@ export default function Help() {
                     </p>
                   </div>
 
-                  <div className="bg-purple-50 dark:bg-purple-900/30 p-4 rounded-lg">
+                  <div className="bg-info-50 dark:bg-info-900/30 p-4 rounded-lg">
                     <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Team Members</h4>
                     <p className="text-sm text-gray-600 dark:text-gray-400">
                       Maximum users per account. Hard limit based on plan.
@@ -1262,7 +1262,7 @@ export default function Help() {
         {/* FAQ Section */}
         <div ref={(el) => (sectionRefs.current["faq"] = 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">
-            <HelpCircleIcon className="size-8 text-purple-600 dark:text-purple-400" />
+            <HelpCircleIcon className="size-8 text-info-600 dark:text-info-400" />
             Frequently Asked Questions
           </h2>
 
@@ -1278,7 +1278,7 @@ export default function Help() {
         </div>
 
         {/* Support Section */}
-        <Card className="p-8 bg-gradient-to-r from-brand-500 to-purple-600 text-white">
+        <Card className="p-8 bg-gradient-to-r from-brand-500 to-info-600 text-white">
           <div className="text-center">
             <h3 className="text-2xl font-bold mb-4">Still Need Help?</h3>
             <p className="text-white/90 mb-6">
diff --git a/frontend/src/pages/Optimizer/AnalysisPreview.tsx b/frontend/src/pages/Optimizer/AnalysisPreview.tsx
index 943002e7..ccc9a24e 100644
--- a/frontend/src/pages/Optimizer/AnalysisPreview.tsx
+++ b/frontend/src/pages/Optimizer/AnalysisPreview.tsx
@@ -250,12 +250,12 @@ export default function AnalysisPreview() {
                     </div>
                   )}
                   {!scores.has_taxonomy_mapping && (
-                    <div className="p-3 bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-lg">
+                    <div className="p-3 bg-info-50 dark:bg-info-900/20 border border-info-200 dark:border-info-800 rounded-lg">
                       <div className="flex items-start gap-2">
-                        <span className="text-purple-600 dark:text-purple-400 font-bold">2.</span>
+                        <span className="text-info-600 dark:text-info-400 font-bold">2.</span>
                         <div className="flex-1">
-                          <div className="font-medium text-purple-900 dark:text-purple-300">Add Taxonomy Mapping</div>
-                          <div className="text-sm text-purple-700 dark:text-purple-400 mt-1">
+                          <div className="font-medium text-info-900 dark:text-info-300">Add Taxonomy Mapping</div>
+                          <div className="text-sm text-info-700 dark:text-info-400 mt-1">
                             Categorize this content with a taxonomy for better organization and navigation.
                           </div>
                         </div>
diff --git a/frontend/src/pages/Publisher/ContentCalendar.tsx b/frontend/src/pages/Publisher/ContentCalendar.tsx
index 0aecf17a..58b61256 100644
--- a/frontend/src/pages/Publisher/ContentCalendar.tsx
+++ b/frontend/src/pages/Publisher/ContentCalendar.tsx
@@ -490,20 +490,20 @@ export default function ContentCalendar() {
       <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
         {/* Review */}
         <Card 
-          className="p-4 cursor-pointer hover:border-purple-500 transition-colors group"
+          className="p-4 cursor-pointer hover:border-info-500 transition-colors group"
           onClick={() => navigate('/writer/review')}
         >
           <div className="flex items-start justify-between">
             <div className="flex-1">
               <div className="flex items-center gap-2 mb-1">
-                <div className="size-8 rounded-lg bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center">
-                  <PencilIcon className="w-4 h-4 text-purple-600" />
+                <div className="size-8 rounded-lg bg-info-100 dark:bg-info-900/30 flex items-center justify-center">
+                  <PencilIcon className="w-4 h-4 text-info-600" />
                 </div>
                 <h3 className="text-base font-semibold text-gray-900 dark:text-white">Review</h3>
               </div>
               <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">Content awaiting review before approval</p>
             </div>
-            <p className="text-3xl font-bold text-purple-600 dark:text-purple-400">{stats.review}</p>
+            <p className="text-3xl font-bold text-info-600 dark:text-info-400">{stats.review}</p>
           </div>
         </Card>
 
diff --git a/frontend/src/pages/Publisher/PublishSettings.tsx b/frontend/src/pages/Publisher/PublishSettings.tsx
index 568dceaf..58b4caf1 100644
--- a/frontend/src/pages/Publisher/PublishSettings.tsx
+++ b/frontend/src/pages/Publisher/PublishSettings.tsx
@@ -225,10 +225,10 @@ export default function PublishSettings() {
           </Card>
 
           {/* Card 3: Schedule (Days + Time Slots) */}
-          <Card className="p-6 border-l-4 border-l-purple-500">
+          <Card className="p-6 border-l-4 border-l-info-500">
             <div className="flex items-center gap-3 mb-4">
-              <div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
-                <CalendarIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
+              <div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
+                <CalendarIcon className="w-5 h-5 text-info-600 dark:text-info-400" />
               </div>
               <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Schedule</h2>
             </div>
diff --git a/frontend/src/pages/Settings/Integration.tsx b/frontend/src/pages/Settings/Integration.tsx
index 45acc87c..435847cb 100644
--- a/frontend/src/pages/Settings/Integration.tsx
+++ b/frontend/src/pages/Settings/Integration.tsx
@@ -712,7 +712,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-brand-500 text-white">
+            <div className="p-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-gradient-to-r from-info-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/WordPressIntegrationDebug.tsx b/frontend/src/pages/Settings/WordPressIntegrationDebug.tsx
index bdbbd1f2..7eb0437e 100644
--- a/frontend/src/pages/Settings/WordPressIntegrationDebug.tsx
+++ b/frontend/src/pages/Settings/WordPressIntegrationDebug.tsx
@@ -478,7 +478,7 @@ export default function WordPressIntegrationDebug() {
                 <button
                   onClick={() => validatePostSync()}
                   disabled={loading}
-                  className="inline-flex items-center px-3 py-1 text-xs bg-purple-100 hover:bg-purple-200 text-purple-700 rounded-md disabled:opacity-50"
+                  className="inline-flex items-center px-3 py-1 text-xs bg-info-100 hover:bg-info-200 text-info-700 rounded-md disabled:opacity-50"
                 >
                   <SettingsIcon className="h-3 w-3 mr-1" />
                   Validate Content
diff --git a/frontend/src/pages/Setup/IndustriesSectorsKeywords.tsx b/frontend/src/pages/Setup/IndustriesSectorsKeywords.tsx
index 8b32ee6b..c7271ff5 100644
--- a/frontend/src/pages/Setup/IndustriesSectorsKeywords.tsx
+++ b/frontend/src/pages/Setup/IndustriesSectorsKeywords.tsx
@@ -1480,16 +1480,16 @@ export default function IndustriesSectorsKeywords() {
       {/* Ahrefs Coming Soon Banner */}
       {showAhrefsBanner && (
         <div className="mx-6 mt-6 mb-6">
-          <Card className="p-4 bg-purple-50 dark:bg-purple-900/20 border-purple-200 dark:border-purple-800">
+          <Card className="p-4 bg-info-50 dark:bg-info-900/20 border-info-200 dark:border-info-800">
             <div className="flex items-start gap-3">
               <div className="flex-shrink-0">
-                <ShootingStarIcon className="w-5 h-5 text-purple-600 dark:text-purple-400 mt-0.5" />
+                <ShootingStarIcon className="w-5 h-5 text-info-600 dark:text-info-400 mt-0.5" />
               </div>
               <div className="flex-1">
-                <h3 className="text-sm font-medium text-purple-900 dark:text-purple-200 mb-1">
+                <h3 className="text-sm font-medium text-info-900 dark:text-info-200 mb-1">
                   Ahrefs Keyword Research - Coming March/April 2026
                 </h3>
-                <p className="text-sm text-purple-700 dark:text-purple-300">
+                <p className="text-sm text-info-700 dark:text-info-300">
                   Soon you'll be able to research keywords directly with Ahrefs API, pulling fresh data with volume, difficulty, and competition metrics. For now, browse our curated keyword library above.
                 </p>
               </div>
diff --git a/frontend/src/pages/Sites/AIAutomationSettings.tsx b/frontend/src/pages/Sites/AIAutomationSettings.tsx
index cce3db32..84311e8a 100644
--- a/frontend/src/pages/Sites/AIAutomationSettings.tsx
+++ b/frontend/src/pages/Sites/AIAutomationSettings.tsx
@@ -485,10 +485,10 @@ export default function AIAutomationSettings({ siteId }: AIAutomationSettingsPro
         </Card>
 
         {/* Card 3: Image Generation (Style & Count only) */}
-        <Card className="p-5 border-l-4 border-l-purple-500">
+        <Card className="p-5 border-l-4 border-l-info-500">
           <div className="flex items-center gap-3 mb-4">
-            <div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
-              <ImageIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
+            <div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
+              <ImageIcon className="w-5 h-5 text-info-600 dark:text-info-400" />
             </div>
             <div>
               <h3 className="font-semibold text-gray-900 dark:text-white">Images</h3>
@@ -546,8 +546,8 @@ export default function AIAutomationSettings({ siteId }: AIAutomationSettingsPro
         <Card className="p-5 lg:col-span-2">
           <div className="flex items-center justify-between mb-4">
             <div className="flex items-center gap-3">
-              <div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
-                <BoltIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
+              <div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
+                <BoltIcon className="w-5 h-5 text-info-600 dark:text-info-400" />
               </div>
               <div>
                 <h3 className="font-semibold text-gray-900 dark:text-white">Automation Stages Settings</h3>
@@ -705,10 +705,10 @@ export default function AIAutomationSettings({ siteId }: AIAutomationSettingsPro
         {/* Right: Schedule + Capacity stacked */}
         <div className="space-y-6">
           {/* Schedule Card */}
-          <Card className="p-5 border-l-4 border-l-purple-500">
+          <Card className="p-5 border-l-4 border-l-info-500">
             <div className="flex items-center gap-3 mb-4">
-              <div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
-                <CalendarIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
+              <div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
+                <CalendarIcon className="w-5 h-5 text-info-600 dark:text-info-400" />
               </div>
               <div>
                 <h3 className="font-semibold text-gray-900 dark:text-white">Schedule</h3>
@@ -861,12 +861,12 @@ export default function AIAutomationSettings({ siteId }: AIAutomationSettingsPro
         </Card>
 
         {/* Stage Configuration Explanation */}
-        <Card className="p-4 bg-purple-50 dark:bg-purple-900/20 border-purple-200 dark:border-purple-800">
+        <Card className="p-4 bg-info-50 dark:bg-info-900/20 border-info-200 dark:border-info-800">
           <div className="flex items-start gap-3">
-            <BoltIcon className="w-5 h-5 text-purple-600 dark:text-purple-400 mt-0.5 flex-shrink-0" />
-            <div className="text-sm text-purple-800 dark:text-purple-200">
+            <BoltIcon className="w-5 h-5 text-info-600 dark:text-info-400 mt-0.5 flex-shrink-0" />
+            <div className="text-sm text-info-800 dark:text-info-200">
               <p className="font-medium mb-2">Stage Configuration</p>
-              <ul className="list-disc list-inside space-y-1 text-purple-700 dark:text-purple-300">
+              <ul className="list-disc list-inside space-y-1 text-info-700 dark:text-info-300">
                 <li><strong>Batch:</strong> Items processed together</li>
                 <li><strong>Limit:</strong> Max items per automation run</li>
                 <li><strong>Model:</strong> Live (production) or Test mode</li>
@@ -877,12 +877,12 @@ export default function AIAutomationSettings({ siteId }: AIAutomationSettingsPro
         </Card>
 
         {/* Schedule & Capacity Explanation */}
-        <Card className="p-4 bg-purple-50 dark:bg-purple-900/20 border-purple-200 dark:border-purple-800">
+        <Card className="p-4 bg-info-50 dark:bg-info-900/20 border-info-200 dark:border-info-800">
           <div className="flex items-start gap-3">
-            <CalendarIcon className="w-5 h-5 text-purple-600 dark:text-purple-400 mt-0.5 flex-shrink-0" />
-            <div className="text-sm text-purple-800 dark:text-purple-200">
+            <CalendarIcon className="w-5 h-5 text-info-600 dark:text-info-400 mt-0.5 flex-shrink-0" />
+            <div className="text-sm text-info-800 dark:text-info-200">
               <p className="font-medium mb-2">Schedule & Capacity</p>
-              <ul className="list-disc list-inside space-y-1 text-purple-700 dark:text-purple-300">
+              <ul className="list-disc list-inside space-y-1 text-info-700 dark:text-info-300">
                 <li>Select days content can be published</li>
                 <li>Add time slots for publishing</li>
                 <li>Capacity = Days × Time Slots</li>
diff --git a/frontend/src/pages/Sites/Dashboard.tsx b/frontend/src/pages/Sites/Dashboard.tsx
index e9c1a5c0..f921252f 100644
--- a/frontend/src/pages/Sites/Dashboard.tsx
+++ b/frontend/src/pages/Sites/Dashboard.tsx
@@ -301,10 +301,10 @@ export default function SiteDashboard() {
             {/* Integrations */}
             <button
               onClick={() => navigate(`/sites/${siteId}/settings?tab=integrations`)}
-              className="flex items-center gap-3 px-4 py-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 hover:border-purple-300 hover:bg-purple-50 dark:hover:bg-purple-900/10 transition-all group"
+              className="flex items-center gap-3 px-4 py-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 hover:border-info-300 hover:bg-info-50 dark:hover:bg-info-900/10 transition-all group"
             >
-              <div className="size-8 rounded-lg bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center flex-shrink-0">
-                <PlugInIcon className="h-4 w-4 text-purple-600 dark:text-purple-400" />
+              <div className="size-8 rounded-lg bg-info-100 dark:bg-info-900/30 flex items-center justify-center flex-shrink-0">
+                <PlugInIcon className="h-4 w-4 text-info-600 dark:text-info-400" />
               </div>
               <span className="flex-1 text-sm font-medium text-gray-700 dark:text-gray-300 text-left">Integrations</span>
             </button>
diff --git a/frontend/src/pages/Sites/Settings.tsx b/frontend/src/pages/Sites/Settings.tsx
index 3a956fcb..7faeec5f 100644
--- a/frontend/src/pages/Sites/Settings.tsx
+++ b/frontend/src/pages/Sites/Settings.tsx
@@ -586,10 +586,10 @@ export default function SiteSettings() {
               }}
               className={`px-4 py-2 font-medium border-b-2 rounded-none transition-colors whitespace-nowrap ${
                 activeTab === 'automation'
-                  ? 'border-purple-500 text-purple-600 dark:text-purple-400'
+                  ? 'border-info-500 text-info-600 dark:text-info-400'
                   : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
               }`}
-              startIcon={<CalendarIcon className={`w-4 h-4 ${activeTab === 'automation' ? 'text-purple-500' : ''}`} />}
+              startIcon={<CalendarIcon className={`w-4 h-4 ${activeTab === 'automation' ? 'text-info-500' : ''}`} />}
             >
               Automation
             </Button>
@@ -855,9 +855,9 @@ export default function SiteSettings() {
                 </Card>
 
                 {/* Open Graph */}
-                <Card className="p-6 border-l-4 border-l-purple-500">
+                <Card className="p-6 border-l-4 border-l-info-500">
                   <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
-                    <PaperPlaneIcon className="w-5 h-5 text-purple-500" />
+                    <PaperPlaneIcon className="w-5 h-5 text-info-500" />
                     Open Graph
                   </h3>
                   <div className="space-y-4">
diff --git a/frontend/src/pages/account/AccountSettingsPage.tsx b/frontend/src/pages/account/AccountSettingsPage.tsx
index f6e68f15..3c3b4b38 100644
--- a/frontend/src/pages/account/AccountSettingsPage.tsx
+++ b/frontend/src/pages/account/AccountSettingsPage.tsx
@@ -354,7 +354,7 @@ export default function AccountSettingsPage() {
               </Card>
 
               {/* Billing Address Card */}
-              <Card className="p-6 border-l-4 border-l-purple-500">
+              <Card className="p-6 border-l-4 border-l-info-500">
                 <h3 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Billing Address</h3>
                 <div className="space-y-4">
                   <InputField
@@ -528,7 +528,7 @@ export default function AccountSettingsPage() {
               </Card>
 
               {/* Preferences Card */}
-              <Card className="p-6 border-l-4 border-l-purple-500">
+              <Card className="p-6 border-l-4 border-l-info-500">
                 <h3 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Preferences</h3>
                 <div className="space-y-4">
                   <div>
@@ -729,7 +729,7 @@ export default function AccountSettingsPage() {
                     <li>✗ Cannot manage billing</li>
                   </ul>
                 </div>
-                <div className="p-4 border-l-4 border-purple-500 bg-purple-50/50 dark:bg-purple-900/10 rounded-r-lg">
+                <div className="p-4 border-l-4 border-info-500 bg-info-50/50 dark:bg-info-900/10 rounded-r-lg">
                   <div className="flex items-center justify-between mb-2">
                     <h4 className="font-semibold text-gray-900 dark:text-white">Member</h4>
                     <Badge variant="light" color="info">Standard Access</Badge>
diff --git a/frontend/src/pages/account/ContentSettingsPage.tsx b/frontend/src/pages/account/ContentSettingsPage.tsx
index 96d14454..1c4ac8b2 100644
--- a/frontend/src/pages/account/ContentSettingsPage.tsx
+++ b/frontend/src/pages/account/ContentSettingsPage.tsx
@@ -527,10 +527,10 @@ export default function ContentSettingsPage() {
         {/* Image Settings Tab */}
         {activeTab === 'images' && (
           <div className="space-y-6 max-w-4xl">
-            <Card className="p-6 border-l-4 border-l-purple-500">
+            <Card className="p-6 border-l-4 border-l-info-500">
               <div className="flex items-center gap-3 mb-6">
-                <div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
-                  <ImageIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
+                <div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
+                  <ImageIcon className="w-5 h-5 text-info-600 dark:text-info-400" />
                 </div>
                 <div>
                   <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Image Generation</h2>
@@ -579,7 +579,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-brand-500 text-white">
+                  <div className="p-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-gradient-to-r from-info-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/PlansAndBillingPage.tsx b/frontend/src/pages/account/PlansAndBillingPage.tsx
index 21f0adac..8840b8f7 100644
--- a/frontend/src/pages/account/PlansAndBillingPage.tsx
+++ b/frontend/src/pages/account/PlansAndBillingPage.tsx
@@ -813,7 +813,7 @@ export default function PlansAndBillingPage() {
     const stageConfig = {
       verifying: { color: 'bg-brand-600', label: 'Verifying Payment' },
       processing: { color: 'bg-warning-600', label: 'Processing Payment' },
-      finalizing: { color: 'bg-purple-600', label: 'Finalizing' },
+      finalizing: { color: 'bg-info-600', label: 'Finalizing' },
       activating: { color: 'bg-success-600', label: 'Activating Subscription' },
     };
     const config = stageConfig[paymentProcessing.stage];
@@ -1024,14 +1024,14 @@ export default function PlansAndBillingPage() {
                 <div className="text-xs text-success-600 dark:text-success-400 mt-1">Never expire</div>
               </div>
               <div className="p-4 bg-white/80 dark:bg-gray-800/60 rounded-xl shadow-sm">
-                <div className="flex items-center gap-2 text-sm text-purple-700 dark:text-purple-300 mb-1">
-                  <TrendingUpIcon className="w-4 h-4 text-purple-600" />
+                <div className="flex items-center gap-2 text-sm text-info-700 dark:text-info-300 mb-1">
+                  <TrendingUpIcon className="w-4 h-4 text-info-600" />
                   Used
                 </div>
-                <div className="text-2xl font-bold text-purple-900 dark:text-white">
+                <div className="text-2xl font-bold text-info-900 dark:text-white">
                   {creditBalance?.credits_used_this_month?.toLocaleString() || 0}
                 </div>
-                <div className="text-xs text-purple-600 dark:text-purple-400 mt-1">This month ({creditUsage}%)</div>
+                <div className="text-xs text-info-600 dark:text-info-400 mt-1">This month ({creditUsage}%)</div>
               </div>
               <div className="p-4 bg-white/80 dark:bg-gray-800/60 rounded-xl shadow-sm">
                 <div className="flex items-center gap-2 text-sm text-success-700 dark:text-success-300 mb-1">
@@ -1089,7 +1089,7 @@ export default function PlansAndBillingPage() {
               <div className="h-3 bg-white/50 dark:bg-gray-800/50 rounded-full overflow-hidden">
                 <div
                   className={`h-full rounded-full transition-all duration-500 ${
-                    creditUsage >= 90 ? 'bg-error-500' : creditUsage >= 70 ? 'bg-warning-500' : 'bg-gradient-to-r from-brand-500 to-purple-500'
+                    creditUsage >= 90 ? 'bg-error-500' : creditUsage >= 70 ? 'bg-warning-500' : 'bg-gradient-to-r from-brand-500 to-info-500'
                   }`}
                   style={{ width: `${Math.min(creditUsage, 100)}%` }}
                 />
@@ -1119,8 +1119,8 @@ export default function PlansAndBillingPage() {
               </div>
               <div className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
                 <div className="flex items-center gap-3">
-                  <div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
-                    <UsersIcon className="w-4 h-4 text-purple-600 dark:text-purple-400" />
+                  <div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
+                    <UsersIcon className="w-4 h-4 text-info-600 dark:text-info-400" />
                   </div>
                   <span className="text-sm text-gray-700 dark:text-gray-300">Team Members</span>
                 </div>
@@ -1281,8 +1281,8 @@ export default function PlansAndBillingPage() {
           <Card className="p-6">
             <div className="flex items-center justify-between mb-4">
               <div className="flex items-center gap-3">
-                <div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
-                  <ShootingStarIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
+                <div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
+                  <ShootingStarIcon className="w-5 h-5 text-info-600 dark:text-info-400" />
                 </div>
                 <div>
                   <h3 className="font-semibold text-gray-900 dark:text-white">
@@ -1318,7 +1318,7 @@ export default function PlansAndBillingPage() {
                     className={`p-4 border rounded-xl flex items-center justify-between transition-colors ${
                       isCurrentPlan
                         ? 'border-brand-500 bg-brand-50/50 dark:bg-brand-900/20'
-                        : 'border-gray-200 dark:border-gray-700 hover:border-purple-300 dark:hover:border-purple-700'
+                        : 'border-gray-200 dark:border-gray-700 hover:border-info-300 dark:hover:border-info-700'
                     }`}
                   >
                     <div>
diff --git a/frontend/src/pages/account/UsageAnalyticsPage.tsx b/frontend/src/pages/account/UsageAnalyticsPage.tsx
index dff6d657..7213caf2 100644
--- a/frontend/src/pages/account/UsageAnalyticsPage.tsx
+++ b/frontend/src/pages/account/UsageAnalyticsPage.tsx
@@ -99,14 +99,14 @@ export default function UsageAnalyticsPage() {
             </div>
           </Card>
           
-          <Card className="p-4 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 border-l-4 border-l-purple-500">
+          <Card className="p-4 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 border-l-4 border-l-info-500">
             <div className="flex items-center gap-3">
-              <div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
-                <TrendingUpIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
+              <div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
+                <TrendingUpIcon className="w-5 h-5 text-info-600 dark:text-info-400" />
               </div>
               <div>
                 <div className="text-xs text-gray-600 dark:text-gray-400">Credits Used This Month</div>
-                <div className="text-2xl font-bold text-purple-600 dark:text-purple-400">
+                <div className="text-2xl font-bold text-info-600 dark:text-info-400">
                   {creditBalance.credits_used_this_month.toLocaleString()}
                 </div>
                 <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">spent so far</div>
@@ -214,12 +214,12 @@ export default function UsageAnalyticsPage() {
 
               <Card className="p-6">
                 <div className="flex items-center gap-3 mb-3">
-                  <div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
-                    <BarChart3Icon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
+                  <div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
+                    <BarChart3Icon className="w-5 h-5 text-info-600 dark:text-info-400" />
                   </div>
                   <div className="text-sm font-medium text-gray-600 dark:text-gray-400">Avg Operations/Day</div>
                 </div>
-                <div className="text-3xl font-bold text-purple-600 dark:text-purple-400">
+                <div className="text-3xl font-bold text-info-600 dark:text-info-400">
                   {Math.round((analytics?.usage_by_type.reduce((sum, item) => sum + item.count, 0) || 0) / period)}
                 </div>
                 <div className="text-sm text-gray-500 dark:text-gray-400 mt-1">daily average</div>
diff --git a/frontend/src/pages/account/UsageDashboardPage.tsx b/frontend/src/pages/account/UsageDashboardPage.tsx
index 8c64940b..9e5d4969 100644
--- a/frontend/src/pages/account/UsageDashboardPage.tsx
+++ b/frontend/src/pages/account/UsageDashboardPage.tsx
@@ -484,10 +484,10 @@ export default function UsageDashboardPage() {
                 <div className="text-xs text-gray-500 dark:text-gray-400">Never expire</div>
               </div>
               <div>
-                <div className="text-3xl font-bold text-purple-700 dark:text-purple-400 mb-1">
+                <div className="text-3xl font-bold text-info-700 dark:text-info-400 mb-1">
                   {creditBalance?.credits_used_this_month.toLocaleString() || 0}
                 </div>
-                <div className="text-sm text-purple-600 dark:text-purple-300">Used This Month</div>
+                <div className="text-sm text-info-600 dark:text-info-300">Used This Month</div>
               </div>
               <div>
                 <div className="text-3xl font-bold text-indigo-800 dark:text-white mb-1">
@@ -520,7 +520,7 @@ export default function UsageDashboardPage() {
               </div>
               <div className="h-3 bg-white/50 dark:bg-gray-800/50 rounded-full overflow-hidden">
                 <div
-                  className="h-full rounded-full transition-all duration-500 bg-gradient-to-r from-brand-500 to-purple-500"
+                  className="h-full rounded-full transition-all duration-500 bg-gradient-to-r from-brand-500 to-info-500"
                   style={{ width: `${Math.min(creditPercentage, 100)}%` }}
                 />
               </div>
@@ -590,7 +590,7 @@ export default function UsageDashboardPage() {
               icon={<UsersIcon className="w-4 h-4" />}
               usage={usageSummary?.hard_limits?.users}
               type="hard"
-              color="var(--color-purple-500)"
+              color="var(--color-info-500)"
             />
             <LimitCard
               title="Keywords"
@@ -644,8 +644,8 @@ export default function UsageDashboardPage() {
           <Card className="p-6">
             <div className="flex items-center justify-between mb-4">
               <div className="flex items-center gap-3">
-                <div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
-                  <PieChartIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
+                <div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
+                  <PieChartIcon className="w-5 h-5 text-info-600 dark:text-info-400" />
                 </div>
                 <div>
                   <h3 className="font-semibold text-gray-900 dark:text-white">Credit Consumption</h3>
@@ -727,8 +727,8 @@ export default function UsageDashboardPage() {
             {/* Header */}
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-3">
-                <div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
-                  <FileTextIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
+                <div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
+                  <FileTextIcon className="w-5 h-5 text-info-600 dark:text-info-400" />
                 </div>
                 <div>
                   <h3 className="font-semibold text-gray-900 dark:text-white">Usage Logs</h3>
@@ -910,7 +910,7 @@ export default function UsageDashboardPage() {
                 </div>
                 <div className="p-4 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
                   <div className="flex items-center gap-2 mb-2">
-                    <ImageIcon className="w-4 h-4 text-purple-500" />
+                    <ImageIcon className="w-4 h-4 text-info-500" />
                     <span className="font-medium text-gray-900 dark:text-white">Image Creation</span>
                   </div>
                   <p className="text-sm text-gray-600 dark:text-gray-400">1-15 credits per image (by quality)</p>
diff --git a/frontend/src/styles/README.md b/frontend/src/styles/README.md
index aac08b8c..4742171a 100644
--- a/frontend/src/styles/README.md
+++ b/frontend/src/styles/README.md
@@ -26,7 +26,7 @@ import "./styles/design-system.css";
 --color-success      /* Success green (#00B894) */
 --color-warning      /* Warning amber (#F59E0B) */
 --color-danger       /* Error red (#DC2626) */
---color-purple       /* Premium purple (#7C3AED) */
+--color-info         /* Info/accent color (#18b2c4) */
 ```
 
 ### Usage
diff --git a/frontend/src/styles/cms/presets.ts b/frontend/src/styles/cms/presets.ts
index 556f8fcc..00d5e604 100644
--- a/frontend/src/styles/cms/presets.ts
+++ b/frontend/src/styles/cms/presets.ts
@@ -35,7 +35,7 @@ export const STYLE_PRESETS: StylePreset[] = [
     description: 'Clean, contemporary design with vibrant colors',
     colors: {
       primary: 'var(--color-primary, #2C7AA1)',
-      secondary: 'var(--color-purple, #2C40A1)',
+      secondary: 'var(--color-info, #2C40A1)',
       accent: 'var(--color-success, #2CA18E)',
       background: 'var(--color-white, #ffffff)',
       text: 'var(--color-gray-800, #1f2937)',
@@ -126,12 +126,12 @@ export const STYLE_PRESETS: StylePreset[] = [
     name: 'Elegant',
     description: 'Sophisticated, refined design',
     colors: {
-      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)',
+      primary: 'var(--color-info, #2C40A1)',
+      secondary: 'var(--color-info-400, #5f73d1)',
+      accent: 'var(--color-info-300, #8895e0)',
+      background: 'var(--color-info-50, #f0f2fc)',
+      text: 'var(--color-info-900, #1a2660)',
+      border: 'var(--color-info-200, #b1baeb)',
     },
     typography: {
       fontFamily: 'Playfair Display, serif',
@@ -151,7 +151,7 @@ export const STYLE_PRESETS: StylePreset[] = [
     colors: {
       primary: 'var(--color-brand-400, #4899bd)',
       secondary: 'var(--color-primary, #2C7AA1)',
-      accent: 'var(--color-purple, #2C40A1)',
+      accent: 'var(--color-info, #2C40A1)',
       background: 'var(--color-gray-900, #0f172a)',
       text: 'var(--color-gray-100, #f1f5f9)',
       border: 'var(--color-gray-800, #1e293b)',
diff --git a/frontend/src/styles/design-system.css b/frontend/src/styles/design-system.css
index a5796987..4dd21c32 100644
--- a/frontend/src/styles/design-system.css
+++ b/frontend/src/styles/design-system.css
@@ -11,7 +11,7 @@
    ⚠️  ONLY 6 HEX VALUES IN ENTIRE SYSTEM - Everything else derived!
    ⚠️  TAILWIND DEFAULT COLORS ARE DISABLED - THEY WON'T WORK!
    ⚠️  AI AGENTS: DO NOT USE blue-500, red-500, green-500, etc.
-   ⚠️  USE ONLY: brand-*, success-*, warning-*, error-*, purple-*, gray-*
+   ⚠️  USE ONLY: brand-*, success-*, warning-*, error-*, info-*, gray-*
    
    Last Updated: 2026-01-01
    =================================================================== */
@@ -36,7 +36,7 @@
   --color-success: #2CA18E;
   --color-warning: #D9A12C;
   --color-danger: #A12C40;
-  --color-purple: #2C40A1;
+  --color-info: #2C40A1;
   --color-gray-base: #667085;
 */
 
@@ -46,7 +46,7 @@
   --color-success: #10B981;
   --color-warning: #F59E0B;
   --color-danger: #EF4444;
-  --color-purple: #7C3AED;
+  --color-info: #7C3AED;
   --color-gray-base: #64748B;
 */
 
@@ -56,7 +56,7 @@
   --color-success: #22C55E;
   --color-warning: #FBBF24;
   --color-danger: #F43F5E;
-  --color-purple: #8B5CF6;
+  --color-info: #8B5CF6;
   --color-gray-base: #6B7280;
 */
 
@@ -66,21 +66,21 @@
   --color-success: #059669;
   --color-warning: #F97316;
   --color-danger: #DC2626;
-  --color-purple: #6366F1;
+  --color-info: #6366F1;
   --color-gray-base: #475569;
 */
 --color-primary: #1c86d1;
 --color-success: #3fcd9f;
 --color-warning: #f87f4c;
 --color-danger: #ff656f;
---color-purple: #18b2c4;
+--color-info: #18b2c4;
 --color-gray-base: #243249;
 /*
 --color-primary: #3B82F6;
 --color-success: #10B981;
 --color-warning: #F59E0B;
 --color-danger: #DC2626;
---color-purple: #F63B82;
+--color-info: #F63B82;
 --color-gray-base: #30425d;
 */
 
@@ -108,10 +108,10 @@
   --color-danger-light: color-mix(in srgb, var(--color-danger) 60%, white);
   --color-danger-subtle: color-mix(in srgb, var(--color-danger) 10%, white);
   
-  /* Purple Variants (derived from --color-purple) */
-  --color-purple-dark: color-mix(in srgb, var(--color-purple) 75%, black);
-  --color-purple-light: color-mix(in srgb, var(--color-purple) 60%, white);
-  --color-purple-subtle: color-mix(in srgb, var(--color-purple) 10%, white);
+  /* Info Variants (derived from --color-info) */
+  --color-info-dark: color-mix(in srgb, var(--color-info) 75%, black);
+  --color-info-light: color-mix(in srgb, var(--color-info) 60%, white);
+  --color-info-subtle: color-mix(in srgb, var(--color-info) 10%, white);
 
   /* ===================================================================
      BACKGROUND COLORS (derived from primaries)
@@ -149,7 +149,7 @@
   --gradient-success: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
   --gradient-warning: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-dark) 100%);
   --gradient-danger: linear-gradient(135deg, var(--color-danger) 0%, var(--color-danger-dark) 100%);
-  --gradient-purple: linear-gradient(135deg, var(--color-purple) 0%, var(--color-purple-dark) 100%);
+  --gradient-info: linear-gradient(135deg, var(--color-info) 0%, var(--color-info-dark) 100%);
   --gradient-panel: linear-gradient(180deg, var(--color-panel) 0%, var(--color-panel-alt) 100%);
 
   /* ===================================================================
@@ -274,7 +274,7 @@
    - success-*  (green)
    - error-*    (red)
    - warning-*  (amber)
-   - purple-*   (premium)
+   - info-*     (info/accent)
    
    ❌ These will NOT work: blue-*, red-*, green-*, emerald-*, 
       amber-*, indigo-*, pink-*, rose-*, sky-*, teal-*, etc.
@@ -448,20 +448,20 @@
   --color-warning-950: color-mix(in srgb, var(--color-warning) 25%, black);
 
   /* -----------------------------------------------------------------
-     PURPLE SCALE (ALL derived from --color-purple)
+     INFO SCALE (ALL derived from --color-info)
      ----------------------------------------------------------------- */
-  --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: color-mix(in srgb, var(--color-purple) 85%, black);
-  --color-purple-700: color-mix(in srgb, var(--color-purple) 70%, black);
-  --color-purple-800: color-mix(in srgb, var(--color-purple) 55%, black);
-  --color-purple-900: color-mix(in srgb, var(--color-purple) 40%, black);
-  --color-purple-950: color-mix(in srgb, var(--color-purple) 25%, black);
+  --color-info-25: color-mix(in srgb, var(--color-info) 2%, white);
+  --color-info-50: color-mix(in srgb, var(--color-info) 8%, white);
+  --color-info-100: color-mix(in srgb, var(--color-info) 15%, white);
+  --color-info-200: color-mix(in srgb, var(--color-info) 25%, white);
+  --color-info-300: color-mix(in srgb, var(--color-info) 40%, white);
+  --color-info-400: color-mix(in srgb, var(--color-info) 60%, white);
+  --color-info-500: var(--color-info);
+  --color-info-600: color-mix(in srgb, var(--color-info) 85%, black);
+  --color-info-700: color-mix(in srgb, var(--color-info) 70%, black);
+  --color-info-800: color-mix(in srgb, var(--color-info) 55%, black);
+  --color-info-900: color-mix(in srgb, var(--color-info) 40%, black);
+  --color-info-950: color-mix(in srgb, var(--color-info) 25%, black);
 
   /* -----------------------------------------------------------------
      INFO/BLUE-LIGHT SCALE (derived from --color-primary for consistency)
@@ -883,7 +883,7 @@ select:focus {
 .igny8-header-metric-accent.blue { background: var(--color-primary); }
 .igny8-header-metric-accent.green { background: var(--color-success); }
 .igny8-header-metric-accent.amber { background: var(--color-warning); }
-.igny8-header-metric-accent.purple { background: var(--color-purple); }
+.igny8-header-metric-accent.purple { background: var(--color-info); }
 
 
 /* ===================================================================
diff --git a/frontend/src/templates/ContentViewTemplate.tsx b/frontend/src/templates/ContentViewTemplate.tsx
index 8e54e8a5..92826ab6 100644
--- a/frontend/src/templates/ContentViewTemplate.tsx
+++ b/frontend/src/templates/ContentViewTemplate.tsx
@@ -42,7 +42,7 @@ interface ParsedArticle {
 }
 
 const imageStatusClassMap: Record<string, string> = {
-  generated: 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-200',
+  generated: 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-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',
@@ -890,7 +890,7 @@ export default function ContentViewTemplate({ content, loading, onBack }: Conten
       return 'bg-brand-100 text-brand-800 dark:bg-brand-900/30 dark:text-brand-400';
     }
     if (statusLower === 'review') {
-      return 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400';
+      return 'bg-info-100 text-info-800 dark:bg-info-900/30 dark:text-info-400';
     }
     if (statusLower === 'pending' || statusLower === 'draft') {
       return 'bg-warning-100 text-warning-800 dark:bg-warning-900/30 dark:text-warning-400';
@@ -1034,7 +1034,7 @@ export default function ContentViewTemplate({ content, loading, onBack }: Conten
                           .map((category) => (
                             <span
                               key={category.id}
-                              className="px-3 py-1 bg-purple-50 dark:bg-purple-900/20 text-purple-700 dark:text-purple-300 rounded-full text-xs font-medium"
+                              className="px-3 py-1 bg-info-50 dark:bg-info-900/20 text-info-700 dark:text-info-300 rounded-full text-xs font-medium"
                             >
                               {category.name}
                             </span>
diff --git a/frontend/src/templates/TablePageTemplate.tsx b/frontend/src/templates/TablePageTemplate.tsx
index 60bbd8c3..7e0799df 100644
--- a/frontend/src/templates/TablePageTemplate.tsx
+++ b/frontend/src/templates/TablePageTemplate.tsx
@@ -710,7 +710,7 @@ export default function TablePageTemplate({
                         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'
+                        metric.accentColor === 'purple' ? 'bg-info-500' : 'bg-gray-500'
                       }`}></div>
                       <span className="text-[13px] font-medium text-gray-500 dark:text-gray-400 flex items-center gap-1">
                         {metric.label}