Update module colors for visual distinction in pipelines

Module Color Updates:
- Tasks: Changed from primary (blue) → gray-base (navy #031D48)
- Content: Changed from success (green) → primary (blue #3B82F6)

Pipeline Flow Visual Distinction:
- Planner: Blue → Pink → Amber (Keywords → Clusters → Ideas)
- Writer: Navy → Blue → Green (Tasks → Content → Published)

Base Colors (already set):
- Primary: #3B82F6 (blue)
- Success: #10B981 (green)
- Warning: #F59E0B (amber)
- Danger: #DC2626 (red)
- Purple: #F63B82 (pink)
- Gray Base: #031D48 (navy)

Updated files:
- colors.config.ts: Updated MODULE_COLORS, PIPELINE_COLORS, WORKFLOW_COLORS
- Added grayBase/grayDark to CSS_VAR_COLORS

docs/plans/FINAL-PRELAUNCH.md

@@ -2,7 +2,7 @@
 
 ---
 
-## 1. Design System Consolidation
+## 1. Design System Consolidation ✅ Completed
 
 Update the rules files, to follow the rules in all changes for styles, for components, for coding rules, to use consistent design
 

frontend/src/config/colors.config.ts

@@ -2,18 +2,22 @@
  * Module Color Configuration
  * Single source of truth for module-specific colors throughout the UI
  * 
- * DESIGN SYSTEM: All colors reference CSS variables from tokens.css
+ * DESIGN SYSTEM: All colors reference CSS variables from design-system.css
  * This ensures consistency with the design system.
  * 
- * Based on section 4.5 of MASTER-IMPLEMENTATION-PLAN.md:
+ * Module Color Assignments (Updated Jan 3, 2026):
- * - Keywords: blue (primary)
+ * 
- * - Clusters: purple
+ * PLANNER PIPELINE: Blue → Pink → Amber
- * - Ideas: amber/warning (NOT purple!)
+ * - Keywords: primary (blue #3B82F6)
- * - Tasks: blue (primary)
+ * - Clusters: purple (pink #F63B82)
- * - Content: green/success
+ * - Ideas: warning (amber #F59E0B)
- * - Images: purple
+ * 
- * - Review: amber/warning
+ * WRITER PIPELINE: Navy → Blue → Green
- * - Approved/Published: green/success
+ * - Tasks: gray-base (navy #031D48)
+ * - Content: primary (blue #3B82F6)
+ * - Images: purple (pink #F63B82)
+ * - Review: warning (amber #F59E0B)
+ * - Approved/Published: success (green #10B981)
  * 
  * These colors should be used consistently across:
  * - Module icons
@@ -24,7 +28,7 @@
  */
 
 /**
- * CSS Variable names for colors - reference tokens.css
+ * CSS Variable names for colors - reference design-system.css
  * Use getCSSColor() to get the computed value at runtime
  */
 export const CSS_VAR_COLORS = {
@@ -38,6 +42,8 @@ export const CSS_VAR_COLORS = {
   dangerDark: '--color-danger-dark',
   purple: '--color-purple',
   purpleDark: '--color-purple-dark',
+  grayBase: '--color-gray-base',
+  grayDark: '--color-gray-dark',
 } as const;
 
 /**
@@ -80,6 +86,15 @@ export const MODULE_COLORS = {
 
   // Writer Module
   tasks: {
+    bg: 'bg-gray-dark',
+    bgLight: 'bg-gray-100',
+    text: 'text-gray-dark',
+    textDark: 'text-gray-900',
+    border: 'border-gray-dark',
+    gradient: 'from-gray-700 to-gray-900',
+    cssVar: CSS_VAR_COLORS.grayBase,
+  },
+  content: {
     bg: 'bg-brand-500',
     bgLight: 'bg-brand-50',
     text: 'text-brand-500',
@@ -88,15 +103,6 @@ export const MODULE_COLORS = {
     gradient: 'from-brand-500 to-brand-600',
     cssVar: CSS_VAR_COLORS.primary,
   },
-  content: {
-    bg: 'bg-success-500',
-    bgLight: 'bg-success-50',
-    text: 'text-success-500',
-    textDark: 'text-success-600',
-    border: 'border-success-500',
-    gradient: 'from-success-500 to-success-600',
-    cssVar: CSS_VAR_COLORS.success,
-  },
   images: {
     bg: 'bg-purple-500',
     bgLight: 'bg-purple-50',
@@ -208,12 +214,15 @@ export const MODULE_COLORS = {
  * Pipeline colors for module stats widgets.
  * Uses CSS variables for consistency with design system.
  * Call getCSSColor() to get the computed value at runtime.
+ * 
+ * Planner Pipeline: Blue → Pink → Amber
+ * Writer Pipeline: Navy → Blue → Green
  */
 export const PIPELINE_COLORS = {
-  // Planner: Keywords(primary) → Clusters(purple) → Ideas(warning)
+  // Planner: Keywords(primary/blue) → Clusters(purple/pink) → Ideas(warning/amber)
   planner: [CSS_VAR_COLORS.primary, CSS_VAR_COLORS.purple, CSS_VAR_COLORS.warning],
-  // Writer: Tasks(primary) → Content(purple) → Published(success)
+  // Writer: Tasks(grayBase/navy) → Content(primary/blue) → Published(success/green)
-  writer: [CSS_VAR_COLORS.primary, CSS_VAR_COLORS.purple, CSS_VAR_COLORS.success],
+  writer: [CSS_VAR_COLORS.grayBase, CSS_VAR_COLORS.primary, CSS_VAR_COLORS.success],
 } as const;
 
 /**
@@ -225,17 +234,20 @@ export function getPipelineColors(module: 'planner' | 'writer'): string[] {
 
 /**
  * Workflow completion widget colors - CSS variable names
+ * 
+ * Planner: Blue → Pink → Amber
+ * Writer: Navy → Blue → Green
  */
 export const WORKFLOW_COLORS = {
   planner: {
-    keywordsClustered: CSS_VAR_COLORS.primary,
+    keywordsClustered: CSS_VAR_COLORS.primary,    // Blue
-    clustersCreated: CSS_VAR_COLORS.purple,
+    clustersCreated: CSS_VAR_COLORS.purple,       // Pink
-    ideasGenerated: CSS_VAR_COLORS.warning,
+    ideasGenerated: CSS_VAR_COLORS.warning,       // Amber
   },
   writer: {
-    contentPages: CSS_VAR_COLORS.primary,
+    tasksCreated: CSS_VAR_COLORS.grayBase,        // Navy
-    imagesCreated: CSS_VAR_COLORS.purple,
+    contentPages: CSS_VAR_COLORS.primary,         // Blue
-    pagesPublished: CSS_VAR_COLORS.success,
+    pagesPublished: CSS_VAR_COLORS.success,       // Green
   },
 } as const;
 
@@ -245,10 +257,10 @@ export const WORKFLOW_COLORS = {
  */
 export const BALANCED_COLOR_SEQUENCE = [
   MODULE_COLORS.keywords,    // primary/blue
-  MODULE_COLORS.clusters,    // purple
+  MODULE_COLORS.clusters,    // purple/pink
-  MODULE_COLORS.content,     // success/green
+  MODULE_COLORS.tasks,       // gray/navy
+  MODULE_COLORS.content,     // primary/blue
   MODULE_COLORS.ideas,       // warning/amber
-  MODULE_COLORS.images,      // purple
 ] as const;
 
 /**

frontend/src/styles/design-system.css

@@ -29,13 +29,54 @@
    =================================================================== */
 
 :root {
-  /* ===== THE ONLY 6 HEX VALUES IN THE ENTIRE SYSTEM ===== */
+
-  --color-primary: #0077B6;      /* Brand Blue - main CTA, links, primary actions */
+  /* ===== CURRENT PALETTE ===== */
-  --color-success: #2CA18E;      /* Success Green - confirmations, positive states */
+/*
-  --color-warning: #D9A12C;      /* Warning Amber - alerts, cautions */
+  --color-primary: #0077B6;
-  --color-danger: #A12C40;       /* Danger Red - errors, destructive actions */
+  --color-success: #2CA18E;
-  --color-purple: #2C40A1;       /* Purple - premium features, special emphasis */
+  --color-warning: #D9A12C;
-  --color-gray-base: #667085;    /* Gray Base - neutral text, borders, backgrounds */
+  --color-danger: #A12C40;
+  --color-purple: #2C40A1;
+  --color-gray-base: #667085;
+*/
+
+/* ===== OPTION 1: MODERN SAAS ===== */
+/*
+  --color-primary: #0D9488;
+  --color-success: #10B981;
+  --color-warning: #F59E0B;
+  --color-danger: #EF4444;
+  --color-purple: #7C3AED;
+  --color-gray-base: #64748B;
+*/
+
+/* ===== OPTION 2: BOLD TECH ===== */
+/*
+  --color-primary: #6366F1;
+  --color-success: #22C55E;
+  --color-warning: #FBBF24;
+  --color-danger: #F43F5E;
+  --color-purple: #8B5CF6;
+  --color-gray-base: #6B7280;
+*/
+
+/* ===== OPTION 3: CLEAN MINIMAL ===== */
+/*
+  --color-primary: #3B82F6;
+  --color-success: #059669;
+  --color-warning: #F97316;
+  --color-danger: #DC2626;
+  --color-purple: #6366F1;
+  --color-gray-base: #475569;
+*/
+
+--color-primary: #3B82F6;
+--color-success: #10B981;
+--color-warning: #F59E0B;
+--color-danger: #DC2626;
+--color-purple: #F63B82;
+--color-gray-base: #031D48;
+
 
   /* ===================================================================
      DERIVED COLORS - All computed from the 6 primaries above