From 16dfc56ba0a4b1a04213fe67e471e3a3bec41b3e Mon Sep 17 00:00:00 2001 From: "IGNY8 VPS (Salman)" Date: Sat, 3 Jan 2026 00:24:57 +0000 Subject: [PATCH] Update module colors for visual distinction in pipelines MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 +- frontend/src/config/colors.config.ts | 76 ++++++++++++++++----------- frontend/src/styles/design-system.css | 55 ++++++++++++++++--- 3 files changed, 93 insertions(+), 40 deletions(-) diff --git a/docs/plans/FINAL-PRELAUNCH.md b/docs/plans/FINAL-PRELAUNCH.md index e2a356e9..1378abe1 100644 --- a/docs/plans/FINAL-PRELAUNCH.md +++ b/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 diff --git a/frontend/src/config/colors.config.ts b/frontend/src/config/colors.config.ts index 4e74dfb5..55d2ca07 100644 --- a/frontend/src/config/colors.config.ts +++ b/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: - * - Keywords: blue (primary) - * - Clusters: purple - * - Ideas: amber/warning (NOT purple!) - * - Tasks: blue (primary) - * - Content: green/success - * - Images: purple - * - Review: amber/warning - * - Approved/Published: green/success + * Module Color Assignments (Updated Jan 3, 2026): + * + * PLANNER PIPELINE: Blue → Pink → Amber + * - Keywords: primary (blue #3B82F6) + * - Clusters: purple (pink #F63B82) + * - Ideas: warning (amber #F59E0B) + * + * WRITER PIPELINE: Navy → Blue → Green + * - 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: [CSS_VAR_COLORS.primary, CSS_VAR_COLORS.purple, CSS_VAR_COLORS.success], + // Writer: Tasks(grayBase/navy) → Content(primary/blue) → Published(success/green) + 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, - clustersCreated: CSS_VAR_COLORS.purple, - ideasGenerated: CSS_VAR_COLORS.warning, + keywordsClustered: CSS_VAR_COLORS.primary, // Blue + clustersCreated: CSS_VAR_COLORS.purple, // Pink + ideasGenerated: CSS_VAR_COLORS.warning, // Amber }, writer: { - contentPages: CSS_VAR_COLORS.primary, - imagesCreated: CSS_VAR_COLORS.purple, - pagesPublished: CSS_VAR_COLORS.success, + tasksCreated: CSS_VAR_COLORS.grayBase, // Navy + contentPages: CSS_VAR_COLORS.primary, // Blue + 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.content, // success/green + MODULE_COLORS.clusters, // purple/pink + MODULE_COLORS.tasks, // gray/navy + MODULE_COLORS.content, // primary/blue MODULE_COLORS.ideas, // warning/amber - MODULE_COLORS.images, // purple ] as const; /** diff --git a/frontend/src/styles/design-system.css b/frontend/src/styles/design-system.css index 32c73da7..6e11a769 100644 --- a/frontend/src/styles/design-system.css +++ b/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 */ - --color-success: #2CA18E; /* Success Green - confirmations, positive states */ - --color-warning: #D9A12C; /* Warning Amber - alerts, cautions */ - --color-danger: #A12C40; /* Danger Red - errors, destructive actions */ - --color-purple: #2C40A1; /* Purple - premium features, special emphasis */ - --color-gray-base: #667085; /* Gray Base - neutral text, borders, backgrounds */ + + /* ===== CURRENT PALETTE ===== */ +/* + --color-primary: #0077B6; + --color-success: #2CA18E; + --color-warning: #D9A12C; + --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