From 99ea23baa57f5dff78ceb25c7576b0e2db656e42 Mon Sep 17 00:00:00 2001
From: Desktop <desktop@igny8.com>
Date: Fri, 14 Nov 2025 06:24:25 +0500
Subject: [PATCH] color scheme update

---
 frontend/src/index.css                      | 10 +++
 frontend/src/marketing/pages/Home.tsx       | 74 ++++++++++-----------
 frontend/src/marketing/pages/Pricing.tsx    | 36 +++++-----
 frontend/src/marketing/pages/Product.tsx    | 66 +++++++++---------
 frontend/src/marketing/pages/Resources.tsx  | 44 ++++++------
 frontend/src/marketing/pages/Solutions.tsx  | 60 ++++++++---------
 frontend/src/pages/Automation/Dashboard.tsx | 18 ++---
 frontend/src/pages/Dashboard/Home.tsx       | 16 ++---
 frontend/src/pages/Planner/Dashboard.tsx    | 22 +++---
 frontend/src/pages/Thinker/Dashboard.tsx    | 22 +++---
 frontend/src/pages/Writer/Dashboard.tsx     | 22 +++---
 11 files changed, 200 insertions(+), 190 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 92b081c9..72438024 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -153,6 +153,16 @@ layer(base);
 
   --color-theme-purple-500: #7a5af8;
 
+  /* IGNY8 Brand Colors - Use these for consistent branding */
+  --color-igny8-blue: #0693e3;
+  --color-igny8-blue-dark: #0472b8;
+  --color-igny8-green: #0bbf87;
+  --color-igny8-green-dark: #08966b;
+  --color-igny8-amber: #ff7a00;
+  --color-igny8-amber-dark: #cc5f00;
+  --color-igny8-purple: #5d4ae3;
+  --color-igny8-purple-dark: #3a2f94;
+
   --shadow-theme-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
     0px 2px 4px -2px rgba(16, 24, 40, 0.06);
   --shadow-theme-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
diff --git a/frontend/src/marketing/pages/Home.tsx b/frontend/src/marketing/pages/Home.tsx
index a343febf..f6cc139c 100644
--- a/frontend/src/marketing/pages/Home.tsx
+++ b/frontend/src/marketing/pages/Home.tsx
@@ -40,13 +40,13 @@ const Home: React.FC = () => {
   };
 
   const workflowSteps = [
-    { name: "Keywords", icon: ListBulletIcon, color: "from-[#0693e3] to-[#0472b8]" },
-    { name: "Clusters", icon: UserGroupIcon, color: "from-[#5d4ae3] to-[#3a2f94]" },
-    { name: "Ideas", icon: LightBulbIcon, color: "from-[#ff7a00] to-[#cc5f00]" },
-    { name: "Tasks", icon: DocumentTextIcon, color: "from-[#0bbf87] to-[#08966b]" },
-    { name: "Content", icon: SparklesIcon, color: "from-[#0693e3] to-[#0472b8]" },
-    { name: "Images", icon: PhotoIcon, color: "from-[#5d4ae3] to-[#3a2f94]" },
-    { name: "Publish", icon: BoltIcon, color: "from-[#0bbf87] to-[#08966b]" },
+    { name: "Keywords", icon: ListBulletIcon, color: "from-igny8-blue to-igny8-blue-dark" },
+    { name: "Clusters", icon: UserGroupIcon, color: "from-igny8-purple to-igny8-purple-dark" },
+    { name: "Ideas", icon: LightBulbIcon, color: "from-igny8-amber to-igny8-amber-dark" },
+    { name: "Tasks", icon: DocumentTextIcon, color: "from-igny8-green to-igny8-green-dark" },
+    { name: "Content", icon: SparklesIcon, color: "from-igny8-blue to-igny8-blue-dark" },
+    { name: "Images", icon: PhotoIcon, color: "from-igny8-purple to-igny8-purple-dark" },
+    { name: "Publish", icon: BoltIcon, color: "from-igny8-green to-igny8-green-dark" },
   ];
 
   const productModules = [
@@ -60,7 +60,7 @@ const Home: React.FC = () => {
         "Priority scoring based on opportunity and competition",
       ],
       icon: ChartBarIcon,
-      color: "from-[#0693e3] to-[#0472b8]",
+      color: "from-igny8-blue to-igny8-blue-dark",
       image: "planner-dashboard.png",
       link: "/product#planner",
       align: "left",
@@ -75,7 +75,7 @@ const Home: React.FC = () => {
         "Collaborative editing and approval workflows",
       ],
       icon: SparklesIcon,
-      color: "from-[#0bbf87] to-[#08966b]",
+      color: "from-igny8-green to-igny8-green-dark",
       image: "writer-dashboard.png",
       link: "/product#writer",
       align: "right",
@@ -90,7 +90,7 @@ const Home: React.FC = () => {
         "Automated guideline enforcement across all content",
       ],
       icon: BoltIcon,
-      color: "from-[#ff7a00] to-[#cc5f00]",
+      color: "from-igny8-amber to-igny8-amber-dark",
       image: "thinker-dashboard.png",
       link: "/product#thinker",
       align: "left",
@@ -105,7 +105,7 @@ const Home: React.FC = () => {
         "Real-time monitoring and error handling",
       ],
       icon: PhotoIcon,
-      color: "from-[#5d4ae3] to-[#3a2f94]",
+      color: "from-igny8-purple to-igny8-purple-dark",
       image: "automation-dashboard.png",
       link: "/product#automation",
       align: "right",
@@ -115,7 +115,7 @@ const Home: React.FC = () => {
   return (
     <div className="bg-white">
       {/* HERO SECTION */}
-      <section className="relative overflow-hidden bg-gradient-to-br from-[#0693e3] via-[#5d4ae3] to-[#8b5cf6]">
+      <section className="relative overflow-hidden bg-gradient-to-br from-igny8-blue via-igny8-purple to-[#8b5cf6]">
         {/* Radial glow behind headline */}
         <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_50%,rgba(255,255,255,0.1),transparent_60%)]" />
         <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(109,74,227,0.2),transparent_50%)]" />
@@ -136,7 +136,7 @@ const Home: React.FC = () => {
               <div className="flex flex-col sm:flex-row gap-4 mt-2">
                 {renderCta(
                   { label: "Start Free", href: "https://app.igny8.com/signup" },
-                  "inline-flex items-center justify-center rounded-xl bg-white text-[#0693e3] px-8 py-4 text-base font-semibold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
+                  "inline-flex items-center justify-center rounded-xl bg-white text-igny8-blue px-8 py-4 text-base font-semibold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
                 )}
                 {renderCta(
                   { label: "Book Demo", href: "/contact" },
@@ -149,7 +149,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-8 bg-gradient-to-br from-white/30 via-[#0693e3]/20 to-[#5d4ae3]/20 rounded-3xl blur-3xl" />
+                <div className="absolute -inset-8 bg-gradient-to-br from-white/30 via-igny8-blue/20 to-igny8-purple/20 rounded-3xl blur-3xl" />
                 {/* Device frame effect */}
                 <div className="absolute -inset-4 bg-gradient-to-br from-white/20 to-white/5 rounded-3xl blur-2xl" />
                 <div className="relative rounded-2xl border-4 border-white/20 bg-white/10 backdrop-blur-sm shadow-2xl overflow-hidden">
@@ -167,7 +167,7 @@ const Home: React.FC = () => {
                   />
                 </div>
                 {/* Soft shadow */}
-                <div className="absolute -bottom-8 -left-8 right-8 h-32 bg-gradient-to-t from-[#0693e3]/20 to-transparent blur-3xl -z-10" />
+                <div className="absolute -bottom-8 -left-8 right-8 h-32 bg-gradient-to-t from-igny8-blue/20 to-transparent blur-3xl -z-10" />
               </div>
             </div>
           </div>
@@ -200,7 +200,7 @@ const Home: React.FC = () => {
       </section>
 
       {/* HOW IGNY8 WORKS (PIPELINE) */}
-      <section className="py-24 bg-gradient-to-b from-white via-[#0693e3]/3 to-[#5d4ae3]/3">
+      <section className="py-24 bg-gradient-to-b from-white via-igny8-blue/3 to-igny8-purple/3">
         <div className="max-w-7xl mx-auto px-6">
           <div className="text-center mb-16">
             <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
@@ -214,7 +214,7 @@ const Home: React.FC = () => {
           {/* Horizontal Timeline */}
           <div className="relative">
             {/* Enhanced connecting line with shadow */}
-            <div className="absolute top-14 left-0 right-0 h-1 bg-gradient-to-r from-[#0693e3] via-[#5d4ae3] via-[#ff7a00] via-[#0bbf87] to-[#0693e3] opacity-25 hidden md:block shadow-lg shadow-[#0693e3]/20" />
+            <div className="absolute top-14 left-0 right-0 h-1 bg-gradient-to-r from-igny8-blue via-igny8-purple via-igny8-amber via-igny8-green to-igny8-blue opacity-25 hidden md:block shadow-lg shadow-igny8-blue/20" />
             
             <div className="grid grid-cols-2 md:grid-cols-7 gap-6 md:gap-4">
               {workflowSteps.map((step, index) => {
@@ -241,9 +241,9 @@ const Home: React.FC = () => {
         const isLeft = module.align === "left";
         const backgroundTints = [
           "bg-white",
-          "bg-gradient-to-b from-[#0693e3]/1 to-white",
-          "bg-gradient-to-b from-[#0bbf87]/1 to-white",
-          "bg-gradient-to-b from-[#5d4ae3]/1 to-white",
+          "bg-gradient-to-b from-igny8-blue/1 to-white",
+          "bg-gradient-to-b from-igny8-green/1 to-white",
+          "bg-gradient-to-b from-igny8-purple/1 to-white",
         ];
         
         return (
@@ -322,7 +322,7 @@ const Home: 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-[#0693e3] to-[#5d4ae3] flex items-center justify-center text-white shadow-lg shadow-[#0693e3]/30">
+                <div className="size-12 rounded-xl bg-gradient-to-br from-igny8-blue to-igny8-purple flex items-center justify-center text-white shadow-lg shadow-igny8-blue/30">
                   <BoltIcon className="h-6 w-6" />
                 </div>
                 <h2 className="text-4xl md:text-5xl font-bold text-white">
@@ -336,12 +336,12 @@ const Home: React.FC = () => {
               {/* Automation Timeline with neon glows */}
               <div className="space-y-6 mb-8">
                 {[
-                  { from: "Keywords", to: "Clusters", icon: "→", color: "from-[#0693e3] to-[#5d4ae3]", glow: "shadow-[#0693e3]/50" },
-                  { from: "Clusters", to: "Ideas", icon: "→", color: "from-[#5d4ae3] to-[#ff7a00]", glow: "shadow-[#5d4ae3]/50" },
-                  { from: "Ideas", to: "Tasks", icon: "→", color: "from-[#ff7a00] to-[#0bbf87]", glow: "shadow-[#ff7a00]/50" },
-                  { from: "Tasks", to: "Content", icon: "→", color: "from-[#0bbf87] to-[#0693e3]", glow: "shadow-[#0bbf87]/50" },
-                  { from: "Content", to: "Images", icon: "→", color: "from-[#0693e3] to-[#5d4ae3]", glow: "shadow-[#0693e3]/50" },
-                  { from: "Images", to: "Publish", icon: "→", color: "from-[#5d4ae3] to-[#0bbf87]", glow: "shadow-[#5d4ae3]/50" },
+                  { from: "Keywords", to: "Clusters", icon: "→", color: "from-igny8-blue to-igny8-purple", glow: "shadow-igny8-blue/50" },
+                  { from: "Clusters", to: "Ideas", icon: "→", color: "from-igny8-purple to-igny8-amber", glow: "shadow-igny8-purple/50" },
+                  { from: "Ideas", to: "Tasks", icon: "→", color: "from-igny8-amber to-igny8-green", glow: "shadow-igny8-amber/50" },
+                  { from: "Tasks", to: "Content", icon: "→", color: "from-igny8-green to-igny8-blue", glow: "shadow-igny8-green/50" },
+                  { from: "Content", to: "Images", icon: "→", color: "from-igny8-blue to-igny8-purple", glow: "shadow-igny8-blue/50" },
+                  { from: "Images", to: "Publish", icon: "→", color: "from-igny8-purple to-igny8-green", glow: "shadow-igny8-purple/50" },
                 ].map((handoff, i) => (
                   <div key={i} className="flex items-center gap-4">
                     <div className={`relative w-12 h-12 rounded-xl bg-gradient-to-br ${handoff.color} flex items-center justify-center text-white font-bold shadow-lg ${handoff.glow} group`}>
@@ -387,7 +387,7 @@ const Home: React.FC = () => {
                 />
               </div>
               {/* Glow effect */}
-              <div className="absolute -inset-4 bg-gradient-to-br from-[#0693e3]/20 to-[#5d4ae3]/20 rounded-2xl blur-2xl -z-10" />
+              <div className="absolute -inset-4 bg-gradient-to-br from-igny8-blue/20 to-igny8-purple/20 rounded-2xl blur-2xl -z-10" />
             </div>
           </div>
         </div>
@@ -397,7 +397,7 @@ const Home: React.FC = () => {
       <section className="py-24 bg-white">
         <div className="max-w-7xl mx-auto px-6">
           <div className="text-center mb-12">
-            <span className="inline-flex items-center rounded-full border border-[#0693e3]/20 bg-[#0693e3]/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-[#0693e3] mb-4">
+            <span className="inline-flex items-center rounded-full border border-igny8-blue/20 bg-igny8-blue/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-igny8-blue mb-4">
               Loved by scaling teams
             </span>
             <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold text-slate-900 mb-4">
@@ -408,14 +408,14 @@ const Home: React.FC = () => {
           <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
             {testimonials.map((testimonial, index) => {
               const gradientColors = [
-                "from-[#0693e3]/20 to-[#0472b8]/10",
-                "from-[#0bbf87]/20 to-[#08966b]/10",
-                "from-[#5d4ae3]/20 to-[#3a2f94]/10",
+                "from-igny8-blue/20 to-igny8-blue-dark/10",
+                "from-igny8-green/20 to-igny8-green-dark/10",
+                "from-igny8-purple/20 to-igny8-purple-dark/10",
               ];
               const borderColors = [
-            "border-[#0693e3]/30",
-            "border-[#0bbf87]/30",
-            "border-[#5d4ae3]/30",
+            "border-igny8-blue/30",
+            "border-igny8-green/30",
+            "border-igny8-purple/30",
           ];
               
           return (
@@ -453,7 +453,7 @@ const Home: React.FC = () => {
       </section>
 
       {/* FINAL CTA */}
-      <section className="relative overflow-hidden bg-gradient-to-br from-[#8b5cf6] via-[#5d4ae3] to-[#0693e3]">
+      <section className="relative overflow-hidden bg-gradient-to-br from-[#8b5cf6] via-igny8-purple to-igny8-blue">
         {/* Dashboard overlay in background */}
         <div className="absolute inset-0 opacity-10">
           <div className="absolute inset-0 bg-[url('/marketing/images/hero-dashboard.png')] bg-cover bg-center scale-150 blur-3xl" />
@@ -474,7 +474,7 @@ const Home: React.FC = () => {
               href="https://app.igny8.com/signup"
               target="_blank"
               rel="noreferrer"
-              className="inline-flex items-center justify-center gap-2 rounded-xl bg-white text-[#0693e3] px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
+              className="inline-flex items-center justify-center gap-2 rounded-xl bg-white text-igny8-blue px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
             >
               <RocketLaunchIcon className="h-5 w-5" />
               Start Free
diff --git a/frontend/src/marketing/pages/Pricing.tsx b/frontend/src/marketing/pages/Pricing.tsx
index d41c8dce..b79d9d57 100644
--- a/frontend/src/marketing/pages/Pricing.tsx
+++ b/frontend/src/marketing/pages/Pricing.tsx
@@ -45,7 +45,7 @@ const Pricing: React.FC = () => {
       cadence: "per month",
       description: "For small teams starting workflows.",
       icon: SparklesIcon,
-      iconColor: "from-[#0693e3] to-[#0472b8]",
+      iconColor: "from-igny8-blue to-igny8-blue-dark",
       features: [
         "3 sites",
         "5 users",
@@ -69,7 +69,7 @@ const Pricing: React.FC = () => {
       cadence: "per month",
       description: "For teams automating multiple workflows.",
       icon: BoltIcon,
-      iconColor: "from-[#0bbf87] to-[#08966b]",
+      iconColor: "from-igny8-green to-igny8-green-dark",
       features: [
         "10 sites",
         "10 users",
@@ -95,7 +95,7 @@ const Pricing: React.FC = () => {
       cadence: "per month",
       description: "For publishers and large orgs needing deeper control.",
       icon: ChartBarIcon,
-      iconColor: "from-[#5d4ae3] to-[#3a2f94]",
+      iconColor: "from-igny8-purple to-igny8-purple-dark",
       features: [
         "25 sites",
         "25 users",
@@ -239,7 +239,7 @@ const Pricing: React.FC = () => {
                 key={tier.name}
                 className={`relative rounded-3xl border-2 ${
                   tier.featured
-                    ? "border-[#0693e3]/60 bg-gradient-to-br from-[#0693e3]/10 via-[#5d4ae3]/5 to-[#0bbf87]/5 shadow-[0_0_70px_rgba(6,147,227,0.25)]"
+                    ? "border-igny8-blue/60 bg-gradient-to-br from-[#0693e3]/10 via-[#5d4ae3]/5 to-[#0bbf87]/5 shadow-[0_0_70px_rgba(6,147,227,0.25)]"
                     : "border-slate-200 bg-gradient-to-br from-white to-slate-50/50"
                 } p-10 flex flex-col gap-6 hover:shadow-xl transition-all group ${
                   tier.featured ? "lg:scale-105" : "hover:-translate-y-1"
@@ -258,8 +258,8 @@ const Pricing: React.FC = () => {
                       <span
                         className={`inline-flex items-center rounded-full border px-3 py-1 text-[10px] uppercase tracking-[0.25em] mb-2 ${
                           tier.featured
-                            ? "border-[#0693e3]/30 bg-gradient-to-r from-[#0693e3]/20 to-[#0472b8]/20 text-[#0472b8]"
-                            : "border-slate-200 bg-gradient-to-r from-[#0693e3]/10 to-[#0bbf87]/10 text-[#0693e3]"
+                            ? "border-igny8-blue/30 bg-gradient-to-r from-[#0693e3]/20 to-[#0472b8]/20 text-[#0472b8]"
+                            : "border-slate-200 bg-gradient-to-r from-[#0693e3]/10 to-[#0bbf87]/10 text-igny8-blue"
                         }`}
                       >
                         {tier.badge}
@@ -287,7 +287,7 @@ const Pricing: React.FC = () => {
                   {tier.features.map((feature, idx) => {
                     // Subtle check icons: light bg with dark check for starter/scale, colored for growth
                     const checkStyle = tier.featured
-                      ? "bg-[#0bbf87]/10 text-[#0bbf87]"
+                      ? "bg-igny8-green/10 text-[#0bbf87]"
                       : "bg-slate-100 text-slate-600";
                     return (
                       <li key={feature} className="flex gap-3 items-start">
@@ -304,8 +304,8 @@ const Pricing: React.FC = () => {
                     href="https://app.igny8.com/signup"
                     className={`inline-flex w-full items-center justify-center rounded-full px-6 py-3 text-sm font-semibold transition ${
                       tier.featured
-                        ? "bg-gradient-to-r from-[#0693e3] to-[#0472b8] text-white hover:from-[#0472b8] hover:to-[#0693e3] shadow-lg shadow-[#0693e3]/30"
-                        : "border-2 border-slate-300 bg-white/50 backdrop-blur-sm text-slate-900 hover:border-[#0693e3] hover:bg-white"
+                        ? "bg-gradient-to-r from-igny8-blue to-igny8-blue-dark text-white hover:from-[#0472b8] hover:to-[#0693e3] shadow-lg shadow-[#0693e3]/30"
+                        : "border-2 border-slate-300 bg-white/50 backdrop-blur-sm text-slate-900 hover:border-igny8-blue hover:bg-white"
                     }`}
                   >
                     Start free trial
@@ -329,7 +329,7 @@ const Pricing: React.FC = () => {
                 <tr>
                   <th className="px-6 py-4 text-left font-semibold text-slate-900">Capability</th>
                   <th className="px-6 py-4 text-center font-semibold text-slate-900">Starter</th>
-                  <th className="px-6 py-4 text-center font-semibold text-[#0693e3] bg-gradient-to-br from-[#0693e3]/5 to-transparent">
+                  <th className="px-6 py-4 text-center font-semibold text-igny8-blue bg-gradient-to-br from-[#0693e3]/5 to-transparent">
                     Growth
                   </th>
                   <th className="px-6 py-4 text-center font-semibold text-slate-900">Scale</th>
@@ -349,19 +349,19 @@ const Pricing: React.FC = () => {
                         <XMarkIcon className="h-5 w-5 text-slate-300 mx-auto" />
                       ) : (
                         <span className="inline-flex items-center gap-1">
-                          <span className="size-1.5 rounded-full bg-[#0693e3]"></span>
+                          <span className="size-1.5 rounded-full bg-igny8-blue"></span>
                           {row.starter}
                         </span>
                       )}
                     </td>
-                    <td className="px-6 py-5 text-center font-medium text-[#0693e3] bg-gradient-to-br from-[#0693e3]/5 to-transparent">
+                    <td className="px-6 py-5 text-center font-medium text-igny8-blue bg-gradient-to-br from-[#0693e3]/5 to-transparent">
                       {row.growth === true ? (
                         <CheckIcon className="h-5 w-5 text-[#0bbf87] mx-auto" />
                       ) : row.growth === false ? (
                         <XMarkIcon className="h-5 w-5 text-slate-300 mx-auto" />
                       ) : (
                         <span className="inline-flex items-center gap-1">
-                          <span className="size-1.5 rounded-full bg-[#0693e3]"></span>
+                          <span className="size-1.5 rounded-full bg-igny8-blue"></span>
                           {row.growth}
                         </span>
                       )}
@@ -389,9 +389,9 @@ const Pricing: React.FC = () => {
       {/* INFO BLOCKS SECTION */}
       <section className="bg-gradient-to-b from-white via-slate-50/30 to-white">
         <div className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 md:grid-cols-2 gap-8">
-          <div className="rounded-3xl border-2 border-[#0693e3]/30 bg-gradient-to-br from-[#0693e3]/5 via-white to-[#0bbf87]/5 p-8 space-y-4 shadow-lg hover:shadow-xl transition-all">
+          <div className="rounded-3xl border-2 border-igny8-blue/30 bg-gradient-to-br from-[#0693e3]/5 via-white to-[#0bbf87]/5 p-8 space-y-4 shadow-lg hover:shadow-xl transition-all">
             <div className="flex items-center gap-3 mb-4">
-              <div className="size-12 rounded-full bg-gradient-to-br from-[#0693e3] to-[#0472b8] flex items-center justify-center text-white shadow-lg">
+              <div className="size-12 rounded-full bg-gradient-to-br from-igny8-blue to-igny8-blue-dark flex items-center justify-center text-white shadow-lg">
                 <CreditCardIcon className="h-6 w-6" />
               </div>
               <h4 className="text-lg font-semibold text-slate-900">
@@ -407,7 +407,7 @@ const Pricing: React.FC = () => {
           </div>
           <div className="rounded-3xl border-2 border-[#0bbf87]/30 bg-gradient-to-br from-[#0bbf87]/5 via-white to-[#5d4ae3]/5 p-8 space-y-4 shadow-lg hover:shadow-xl transition-all">
             <div className="flex items-center gap-3 mb-4">
-              <div className="size-12 rounded-full bg-gradient-to-br from-[#0bbf87] to-[#08966b] flex items-center justify-center text-white shadow-lg">
+              <div className="size-12 rounded-full bg-gradient-to-br from-igny8-green to-igny8-green-dark flex items-center justify-center text-white shadow-lg">
                 <ShieldCheckIcon className="h-6 w-6" />
               </div>
               <h4 className="text-lg font-semibold text-slate-900">
@@ -422,7 +422,7 @@ const Pricing: React.FC = () => {
       </section>
 
       {/* FINAL CTA */}
-      <section className="relative overflow-hidden bg-gradient-to-br from-[#0693e3] via-[#5d4ae3] to-[#8b5cf6]">
+      <section className="relative overflow-hidden bg-gradient-to-br from-igny8-blue via-igny8-purple to-[#8b5cf6]">
         {/* Radial glow */}
         <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.1),transparent_70%)]" />
         
@@ -445,7 +445,7 @@ const Pricing: React.FC = () => {
               href="https://app.igny8.com/signup"
               target="_blank"
               rel="noreferrer"
-              className="inline-flex items-center justify-center gap-2 rounded-xl bg-white text-[#0693e3] px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
+              className="inline-flex items-center justify-center gap-2 rounded-xl bg-white text-igny8-blue px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
             >
               <RocketLaunchIcon className="h-5 w-5" />
               Start free trial
diff --git a/frontend/src/marketing/pages/Product.tsx b/frontend/src/marketing/pages/Product.tsx
index f0ca25b7..5e8d9bec 100644
--- a/frontend/src/marketing/pages/Product.tsx
+++ b/frontend/src/marketing/pages/Product.tsx
@@ -40,12 +40,12 @@ const Product: React.FC = () => {
   };
 
   const workflowSteps = [
-    { name: "Keywords", icon: ListBulletIcon, color: "from-[#0693e3] to-[#0472b8]" },
-    { name: "Clusters", icon: UserGroupIcon, color: "from-[#5d4ae3] to-[#3a2f94]" },
-    { name: "Ideas", icon: LightBulbIcon, color: "from-[#ff7a00] to-[#cc5f00]" },
-    { name: "Tasks", icon: DocumentTextIcon, color: "from-[#0bbf87] to-[#08966b]" },
-    { name: "Content", icon: SparklesIcon, color: "from-[#0693e3] to-[#0472b8]" },
-    { name: "Publish", icon: BoltIcon, color: "from-[#0bbf87] to-[#08966b]" },
+    { name: "Keywords", icon: ListBulletIcon, color: "from-igny8-blue to-igny8-blue-dark" },
+    { name: "Clusters", icon: UserGroupIcon, color: "from-igny8-purple to-igny8-purple-dark" },
+    { name: "Ideas", icon: LightBulbIcon, color: "from-igny8-amber to-igny8-amber-dark" },
+    { name: "Tasks", icon: DocumentTextIcon, color: "from-igny8-green to-igny8-green-dark" },
+    { name: "Content", icon: SparklesIcon, color: "from-igny8-blue to-igny8-blue-dark" },
+    { name: "Publish", icon: BoltIcon, color: "from-igny8-green to-igny8-green-dark" },
   ];
 
   const productModules = [
@@ -61,7 +61,7 @@ const Product: React.FC = () => {
         "Alerts for emerging opportunities, competitive gaps, and seasonality shifts",
       ],
       icon: ChartBarIcon,
-      color: "from-[#0693e3] to-[#0472b8]",
+      color: "from-igny8-blue to-igny8-blue-dark",
       image: "planner-dashboard.png",
       link: "#planner",
     },
@@ -77,7 +77,7 @@ const Product: React.FC = () => {
         "Editorial workspace with comments, approvals, and WordPress publishing",
       ],
       icon: SparklesIcon,
-      color: "from-[#0bbf87] to-[#08966b]",
+      color: "from-igny8-green to-igny8-green-dark",
       image: "writer-dashboard.png",
       link: "#writer",
     },
@@ -93,7 +93,7 @@ const Product: React.FC = () => {
         "Version control for AI instructions and playbooks across teams",
       ],
       icon: BoltIcon,
-      color: "from-[#ff7a00] to-[#cc5f00]",
+      color: "from-igny8-amber to-igny8-amber-dark",
       image: "thinker-dashboard.png",
       link: "#thinker",
     },
@@ -109,7 +109,7 @@ const Product: React.FC = () => {
         "Monitor every automation with audit logs and manual override controls",
       ],
       icon: PhotoIcon,
-      color: "from-[#5d4ae3] to-[#3a2f94]",
+      color: "from-igny8-purple to-igny8-purple-dark",
       image: "automation-dashboard.png",
       link: "#automation",
     },
@@ -134,11 +134,11 @@ const Product: React.FC = () => {
           <div className="flex flex-col sm:flex-row gap-4 justify-center">
             {renderCta(
               { label: "Start free", href: "https://app.igny8.com/signup" },
-              "inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-[#0693e3] to-[#0472b8] text-white px-8 py-4 text-base font-semibold hover:shadow-lg hover:-translate-y-0.5 transition shadow-md"
+              "inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-igny8-blue to-igny8-blue-dark text-white px-8 py-4 text-base font-semibold hover:shadow-lg hover:-translate-y-0.5 transition shadow-md"
             )}
             {renderCta(
               { label: "Book a demo", href: "/contact" },
-              "inline-flex items-center justify-center rounded-xl border-2 border-slate-300 bg-white text-slate-700 px-8 py-4 text-base font-semibold hover:border-[#0693e3] hover:text-[#0693e3] transition"
+              "inline-flex items-center justify-center rounded-xl border-2 border-slate-300 bg-white text-slate-700 px-8 py-4 text-base font-semibold hover:border-igny8-blue hover:text-igny8-blue transition"
             )}
           </div>
         </div>
@@ -159,7 +159,7 @@ const Product: React.FC = () => {
           {/* Horizontal Timeline */}
           <div className="relative">
             {/* Enhanced connecting line with shadow */}
-            <div className="absolute top-14 left-0 right-0 h-1 bg-gradient-to-r from-[#0693e3] via-[#5d4ae3] via-[#ff7a00] via-[#0bbf87] to-[#0693e3] opacity-25 hidden md:block shadow-lg shadow-[#0693e3]/20" />
+            <div className="absolute top-14 left-0 right-0 h-1 bg-gradient-to-r from-igny8-blue via-igny8-purple via-igny8-amber via-igny8-green to-igny8-blue opacity-25 hidden md:block shadow-lg shadow-igny8-blue/20" />
             
             <div className="grid grid-cols-2 md:grid-cols-6 gap-6 md:gap-4">
               {workflowSteps.map((step, index) => {
@@ -186,9 +186,9 @@ const Product: React.FC = () => {
         const isLeft = index % 2 === 0;
         const backgroundTints = [
           "bg-white",
-          "bg-gradient-to-b from-[#0693e3]/1 to-white",
-          "bg-gradient-to-b from-[#0bbf87]/1 to-white",
-          "bg-gradient-to-b from-[#5d4ae3]/1 to-white",
+          "bg-gradient-to-b from-igny8-blue/1 to-white",
+          "bg-gradient-to-b from-igny8-green/1 to-white",
+          "bg-gradient-to-b from-igny8-purple/1 to-white",
         ];
         
         return (
@@ -267,7 +267,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-[#0693e3] to-[#5d4ae3] flex items-center justify-center text-white shadow-lg shadow-[#0693e3]/30">
+                <div className="size-12 rounded-xl bg-gradient-to-br from-igny8-blue to-igny8-purple flex items-center justify-center text-white shadow-lg shadow-igny8-blue/30">
                   <BoltIcon className="h-6 w-6" />
                 </div>
                 <h2 className="text-4xl md:text-5xl font-bold text-white">
@@ -281,12 +281,12 @@ const Product: React.FC = () => {
               {/* Automation Timeline with neon glows */}
               <div className="space-y-6">
                 {[
-                  { from: "Keywords", to: "Clusters", icon: "→", color: "from-[#0693e3] to-[#5d4ae3]", glow: "shadow-[#0693e3]/50" },
-                  { from: "Clusters", to: "Ideas", icon: "→", color: "from-[#5d4ae3] to-[#ff7a00]", glow: "shadow-[#5d4ae3]/50" },
-                  { from: "Ideas", to: "Tasks", icon: "→", color: "from-[#ff7a00] to-[#0bbf87]", glow: "shadow-[#ff7a00]/50" },
-                  { from: "Tasks", to: "Content", icon: "→", color: "from-[#0bbf87] to-[#0693e3]", glow: "shadow-[#0bbf87]/50" },
-                  { from: "Content", to: "Images", icon: "→", color: "from-[#0693e3] to-[#5d4ae3]", glow: "shadow-[#0693e3]/50" },
-                  { from: "Images", to: "Publish", icon: "→", color: "from-[#5d4ae3] to-[#0bbf87]", glow: "shadow-[#5d4ae3]/50" },
+                  { from: "Keywords", to: "Clusters", icon: "→", color: "from-igny8-blue to-igny8-purple", glow: "shadow-igny8-blue/50" },
+                  { from: "Clusters", to: "Ideas", icon: "→", color: "from-igny8-purple to-igny8-amber", glow: "shadow-igny8-purple/50" },
+                  { from: "Ideas", to: "Tasks", icon: "→", color: "from-igny8-amber to-igny8-green", glow: "shadow-igny8-amber/50" },
+                  { from: "Tasks", to: "Content", icon: "→", color: "from-igny8-green to-igny8-blue", glow: "shadow-igny8-green/50" },
+                  { from: "Content", to: "Images", icon: "→", color: "from-igny8-blue to-igny8-purple", glow: "shadow-igny8-blue/50" },
+                  { from: "Images", to: "Publish", icon: "→", color: "from-igny8-purple to-igny8-green", glow: "shadow-igny8-purple/50" },
                 ].map((handoff, i) => (
                   <div key={i} className="flex items-center gap-4">
                     <div className={`relative w-12 h-12 rounded-xl bg-gradient-to-br ${handoff.color} flex items-center justify-center text-white font-bold shadow-lg ${handoff.glow} group`}>
@@ -320,7 +320,7 @@ const Product: React.FC = () => {
                 />
               </div>
               {/* Glow effect */}
-              <div className="absolute -inset-4 bg-gradient-to-br from-[#0693e3]/20 to-[#5d4ae3]/20 rounded-2xl blur-2xl -z-10" />
+              <div className="absolute -inset-4 bg-gradient-to-br from-igny8-blue/20 to-igny8-purple/20 rounded-2xl blur-2xl -z-10" />
             </div>
           </div>
 
@@ -344,7 +344,7 @@ const Product: React.FC = () => {
       <section className="py-24 bg-white">
         <div className="max-w-7xl mx-auto px-6">
           <div className="text-center mb-12">
-            <span className="inline-flex items-center rounded-full border border-[#0693e3]/20 bg-[#0693e3]/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-[#0693e3] mb-4">
+            <span className="inline-flex items-center rounded-full border border-igny8-blue/20 bg-igny8-blue/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-igny8-blue mb-4">
               Loved by scaling teams
             </span>
             <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold text-slate-900 mb-4">
@@ -355,14 +355,14 @@ const Product: React.FC = () => {
           <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
             {testimonials.map((testimonial, index) => {
               const gradientColors = [
-                "from-[#0693e3]/20 to-[#0472b8]/10",
-                "from-[#0bbf87]/20 to-[#08966b]/10",
-                "from-[#5d4ae3]/20 to-[#3a2f94]/10",
+                "from-igny8-blue/20 to-igny8-blue-dark/10",
+                "from-igny8-green/20 to-igny8-green-dark/10",
+                "from-igny8-purple/20 to-igny8-purple-dark/10",
               ];
               const borderColors = [
-                "border-[#0693e3]/30",
-                "border-[#0bbf87]/30",
-                "border-[#5d4ae3]/30",
+                "border-igny8-blue/30",
+                "border-igny8-green/30",
+                "border-igny8-purple/30",
               ];
               
               return (
@@ -400,7 +400,7 @@ const Product: React.FC = () => {
       </section>
 
       {/* FINAL CTA */}
-      <section className="relative overflow-hidden bg-gradient-to-br from-[#0693e3] via-[#5d4ae3] to-[#8b5cf6]">
+      <section className="relative overflow-hidden bg-gradient-to-br from-igny8-blue via-igny8-purple to-[#8b5cf6]">
         {/* Dashboard overlay in background */}
         <div className="absolute inset-0 opacity-10">
           <div className="absolute inset-0 bg-[url('/marketing/images/hero-dashboard.png')] bg-cover bg-center scale-150 blur-3xl" />
@@ -421,7 +421,7 @@ const Product: React.FC = () => {
               href="https://app.igny8.com/signup"
               target="_blank"
               rel="noreferrer"
-              className="inline-flex items-center justify-center gap-2 rounded-xl bg-white text-[#0693e3] px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
+              className="inline-flex items-center justify-center gap-2 rounded-xl bg-white text-igny8-blue px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
             >
               <RocketLaunchIcon className="h-5 w-5" />
               Start free
diff --git a/frontend/src/marketing/pages/Resources.tsx b/frontend/src/marketing/pages/Resources.tsx
index e9684652..50821152 100644
--- a/frontend/src/marketing/pages/Resources.tsx
+++ b/frontend/src/marketing/pages/Resources.tsx
@@ -50,7 +50,7 @@ const Resources: React.FC = () => {
       type: "Article",
       tag: "Strategy",
       icon: ChartBarIcon,
-      color: "from-[#0693e3] to-[#0472b8]",
+      color: "from-igny8-blue to-igny8-blue-dark",
     },
     {
       title: "The Complete Framework for AI Content Quality",
@@ -58,7 +58,7 @@ const Resources: React.FC = () => {
       type: "Framework Guide",
       tag: "Strategy",
       icon: AcademicCapIcon,
-      color: "from-[#0bbf87] to-[#08966b]",
+      color: "from-igny8-green to-igny8-green-dark",
     },
     {
       title: "SERP-Guided Content Planning Playbook",
@@ -77,7 +77,7 @@ const Resources: React.FC = () => {
       type: "Template",
       tags: ["Template", "System"],
       icon: CalendarIcon,
-      color: "from-[#0693e3] to-[#0472b8]",
+      color: "from-igny8-blue to-igny8-blue-dark",
     },
     {
       title: "Airtable Keyword Cluster System",
@@ -85,7 +85,7 @@ const Resources: React.FC = () => {
       type: "System",
       tags: ["System", "Workflow"],
       icon: ChartBarIcon,
-      color: "from-[#0bbf87] to-[#08966b]",
+      color: "from-igny8-green to-igny8-green-dark",
     },
     {
       title: "Content Calendar Kit (Excel)",
@@ -93,7 +93,7 @@ const Resources: React.FC = () => {
       type: "Template",
       tags: ["Template", "Workflow"],
       icon: DocumentTextIcon,
-      color: "from-[#5d4ae3] to-[#3a2f94]",
+      color: "from-igny8-purple to-igny8-purple-dark",
     },
     {
       title: "Cluster Mapping Board",
@@ -113,7 +113,7 @@ const Resources: React.FC = () => {
       type: "Workshop",
       tag: "Live",
       icon: BoltIcon,
-      color: "from-[#0693e3] to-[#0472b8]",
+      color: "from-igny8-blue to-igny8-blue-dark",
     },
     {
       title: "From Keywords to Conversions: Dashboard Deep-Dive",
@@ -122,7 +122,7 @@ const Resources: React.FC = () => {
       type: "Workshop",
       tag: "Live",
       icon: ChartBarIcon,
-      color: "from-[#0bbf87] to-[#08966b]",
+      color: "from-igny8-green to-igny8-green-dark",
     },
     {
       title: "Automating Cluster Research at Scale",
@@ -130,7 +130,7 @@ const Resources: React.FC = () => {
       type: "Replay",
       tag: "Replay",
       icon: PlayIcon,
-      color: "from-[#5d4ae3] to-[#3a2f94]",
+      color: "from-igny8-purple to-igny8-purple-dark",
     },
     {
       title: "Editorial Control and AI Tone Systems",
@@ -149,7 +149,7 @@ const Resources: React.FC = () => {
       type: "Quick-Start",
       tags: ["Checklist", "Execution"],
       icon: RocketLaunchIcon,
-      color: "from-[#0693e3] to-[#0472b8]",
+      color: "from-igny8-blue to-igny8-blue-dark",
     },
     {
       title: "SEO Content Quality Checklist",
@@ -157,7 +157,7 @@ const Resources: React.FC = () => {
       type: "Checklist",
       tags: ["Checklist", "Execution"],
       icon: ClipboardDocumentCheckIcon,
-      color: "from-[#0bbf87] to-[#08966b]",
+      color: "from-igny8-green to-igny8-green-dark",
     },
     {
       title: "Content Production SOPs Pack",
@@ -165,7 +165,7 @@ const Resources: React.FC = () => {
       type: "SOP Pack",
       tags: ["Execution", "Prompt Pack"],
       icon: ListBulletIcon,
-      color: "from-[#5d4ae3] to-[#3a2f94]",
+      color: "from-igny8-purple to-igny8-purple-dark",
     },
     {
       title: "AI Prompt Library for Content Teams",
@@ -196,7 +196,7 @@ const Resources: React.FC = () => {
           <div className="flex justify-center">
             {renderCta(
               { label: "Explore All Resources", href: "#learn" },
-              "inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-[#0693e3] to-[#0472b8] text-white px-8 py-4 text-base font-semibold hover:shadow-lg hover:-translate-y-0.5 transition shadow-md"
+              "inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-igny8-blue to-igny8-blue-dark text-white px-8 py-4 text-base font-semibold hover:shadow-lg hover:-translate-y-0.5 transition shadow-md"
             )}
           </div>
         </div>
@@ -235,7 +235,7 @@ const Resources: React.FC = () => {
                 <p className="text-sm text-slate-600 leading-relaxed flex-1">{resource.description}</p>
                 <a
                   href="#"
-                  className="inline-flex items-center gap-2 text-sm font-semibold text-[#0693e3] hover:text-[#0472b8] group"
+                  className="inline-flex items-center gap-2 text-sm font-semibold text-igny8-blue hover:text-[#0472b8] group"
                 >
                   {resource.type.includes("PDF") ? "Download" : "Read"} {resource.type.toLowerCase().includes("article") ? "article" : "guide"}
                   <ArrowRightIcon className="h-4 w-4 group-hover:translate-x-1 transition-transform" />
@@ -247,7 +247,7 @@ const Resources: React.FC = () => {
         <div className="text-center mt-12">
           <a
             href="#"
-            className="inline-flex items-center gap-2 text-base font-semibold text-slate-700 hover:text-[#0693e3] transition"
+            className="inline-flex items-center gap-2 text-base font-semibold text-slate-700 hover:text-igny8-blue transition"
           >
             View All Guides
             <ArrowRightIcon className="h-5 w-5" />
@@ -308,7 +308,7 @@ const Resources: React.FC = () => {
                       <p className="text-sm text-slate-600 leading-relaxed mb-4">{resource.description}</p>
                       <a
                         href="#"
-                        className="inline-flex items-center gap-2 text-sm font-semibold text-[#0693e3] hover:text-[#0472b8] group"
+                        className="inline-flex items-center gap-2 text-sm font-semibold text-igny8-blue hover:text-[#0472b8] group"
                       >
                         <ArrowDownTrayIcon className="h-4 w-4" />
                         Download {resource.type.toLowerCase()}
@@ -323,7 +323,7 @@ const Resources: React.FC = () => {
           <div className="text-center mt-12">
             <a
               href="#"
-              className="inline-flex items-center gap-2 text-base font-semibold text-slate-700 hover:text-[#0693e3] transition"
+              className="inline-flex items-center gap-2 text-base font-semibold text-slate-700 hover:text-igny8-blue transition"
             >
               Explore Templates
               <ArrowRightIcon className="h-5 w-5" />
@@ -391,8 +391,8 @@ const Resources: React.FC = () => {
                   <button
                     className={`inline-flex items-center justify-center gap-2 rounded-xl px-6 py-3 text-sm font-semibold transition ${
                       resource.tag === "Live"
-                        ? "bg-gradient-to-r from-[#0693e3] to-[#0472b8] text-white hover:shadow-lg"
-                        : "border-2 border-slate-300 bg-white text-slate-700 hover:border-[#0693e3] hover:text-[#0693e3]"
+                        ? "bg-gradient-to-r from-igny8-blue to-igny8-blue-dark text-white hover:shadow-lg"
+                        : "border-2 border-slate-300 bg-white text-slate-700 hover:border-[#0693e3] hover:text-igny8-blue"
                     }`}
                   >
                     {resource.tag === "Live" ? (
@@ -414,7 +414,7 @@ const Resources: React.FC = () => {
           <div className="text-center mt-12">
             <a
               href="#"
-              className="inline-flex items-center gap-2 text-base font-semibold text-slate-700 hover:text-[#0693e3] transition"
+              className="inline-flex items-center gap-2 text-base font-semibold text-slate-700 hover:text-igny8-blue transition"
             >
               View Schedule
               <ArrowRightIcon className="h-5 w-5" />
@@ -462,7 +462,7 @@ const Resources: React.FC = () => {
                   <p className="text-sm text-slate-600 leading-relaxed flex-1">{resource.description}</p>
                   <a
                     href="#"
-                    className="inline-flex items-center gap-2 text-sm font-semibold text-[#0693e3] hover:text-[#0472b8] group"
+                    className="inline-flex items-center gap-2 text-sm font-semibold text-igny8-blue hover:text-[#0472b8] group"
                   >
                     <ArrowDownTrayIcon className="h-4 w-4" />
                     Download Now
@@ -487,7 +487,7 @@ const Resources: React.FC = () => {
             <div>
               <a
                 href="#"
-                className="inline-flex items-center gap-2 rounded-xl bg-gradient-to-r from-[#0bbf87] to-[#08966b] text-white px-8 py-4 text-base font-semibold hover:shadow-lg hover:-translate-y-0.5 transition shadow-md"
+                className="inline-flex items-center gap-2 rounded-xl bg-gradient-to-r from-igny8-green to-igny8-green-dark text-white px-8 py-4 text-base font-semibold hover:shadow-lg hover:-translate-y-0.5 transition shadow-md"
               >
                 Browse Toolkits
                 <ArrowRightIcon className="h-5 w-5" />
@@ -511,7 +511,7 @@ const Resources: React.FC = () => {
               href="https://app.igny8.com/signup"
               target="_blank"
               rel="noreferrer"
-              className="inline-flex items-center justify-center gap-2 rounded-xl bg-white text-[#0693e3] px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
+              className="inline-flex items-center justify-center gap-2 rounded-xl bg-white text-igny8-blue px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
             >
               <RocketLaunchIcon className="h-5 w-5" />
               Start for $1
diff --git a/frontend/src/marketing/pages/Solutions.tsx b/frontend/src/marketing/pages/Solutions.tsx
index 2abf0808..a5225925 100644
--- a/frontend/src/marketing/pages/Solutions.tsx
+++ b/frontend/src/marketing/pages/Solutions.tsx
@@ -55,11 +55,11 @@ const Solutions: React.FC = () => {
         "Keep editors in control with approvals and Thinker playbooks",
         "Automate image generation and WordPress publishing by site",
       ],
-      color: "from-[#0693e3]/5 to-white",
-      borderColor: "border-[#0693e3]/20",
-      iconColor: "from-[#0693e3] to-[#0472b8]",
+      color: "from-igny8-blue/5 to-white",
+      borderColor: "border-igny8-blue/20",
+      iconColor: "from-igny8-blue to-igny8-blue-dark",
       painColor: "bg-rose-500",
-      outcomeColor: "bg-[#0693e3]",
+      outcomeColor: "bg-igny8-blue",
     },
     {
       name: "Agencies & Consultancies",
@@ -75,11 +75,11 @@ const Solutions: React.FC = () => {
         "Real-time dashboards to prove impact and showcase velocity",
         "Reusable Thinker libraries to standardize tone and strategy",
       ],
-      color: "from-[#0bbf87]/5 to-white",
-      borderColor: "border-[#0bbf87]/20",
-      iconColor: "from-[#0bbf87] to-[#08966b]",
+      color: "from-igny8-green/5 to-white",
+      borderColor: "border-igny8-green/20",
+      iconColor: "from-igny8-green to-igny8-green-dark",
       painColor: "bg-rose-500",
-      outcomeColor: "bg-[#0bbf87]",
+      outcomeColor: "bg-igny8-green",
     },
     {
       name: "In-house Marketing Teams",
@@ -95,11 +95,11 @@ const Solutions: React.FC = () => {
         "Dashboards that unite SEO, writers, designers, and leadership",
         "Insights to reallocate focus when campaigns spike or drop",
       ],
-      color: "from-[#5d4ae3]/5 to-white",
-      borderColor: "border-[#5d4ae3]/20",
-      iconColor: "from-[#5d4ae3] to-[#3a2f94]",
+      color: "from-igny8-purple/5 to-white",
+      borderColor: "border-igny8-purple/20",
+      iconColor: "from-igny8-purple to-igny8-purple-dark",
       painColor: "bg-rose-500",
-      outcomeColor: "bg-[#5d4ae3]",
+      outcomeColor: "bg-igny8-purple",
     },
   ];
 
@@ -108,37 +108,37 @@ const Solutions: React.FC = () => {
       title: "Keyword Research",
       description: "Discover high-opportunity keywords from a global database with real-time volumes and difficulty scores.",
       icon: ChartBarIcon,
-      color: "from-[#0693e3] to-[#0472b8]",
+      color: "from-igny8-blue to-igny8-blue-dark",
     },
     {
       title: "Content Briefs",
       description: "Generate comprehensive briefs with outlines, talking points, and internal link suggestions.",
       icon: DocumentTextIcon,
-      color: "from-[#0bbf87] to-[#08966b]",
+      color: "from-igny8-green to-igny8-green-dark",
     },
     {
       title: "Content Writing",
       description: "Create long-form articles aligned to your brand voice, compliance rules, and target SERP.",
       icon: SparklesIcon,
-      color: "from-[#ff7a00] to-[#cc5f00]",
+      color: "from-igny8-amber to-igny8-amber-dark",
     },
     {
       title: "Cluster Analysis",
       description: "AI-powered semantic clustering to group related keywords and build topical authority maps.",
       icon: UserGroupIcon,
-      color: "from-[#5d4ae3] to-[#3a2f94]",
+      color: "from-igny8-purple to-igny8-purple-dark",
     },
     {
       title: "Image Generation",
       description: "AI-generated featured and in-article images based on your content with brand consistency.",
       icon: PhotoIcon,
-      color: "from-[#0693e3] to-[#5d4ae3]",
+      color: "from-igny8-blue to-igny8-purple",
     },
     {
       title: "Workflow Automation",
       description: "End-to-end automation from keywords to published content with intelligent handoffs.",
       icon: BoltIcon,
-      color: "from-[#0bbf87] to-[#0693e3]",
+      color: "from-igny8-green to-igny8-blue",
     },
   ];
 
@@ -161,11 +161,11 @@ const Solutions: React.FC = () => {
           <div className="flex flex-col sm:flex-row gap-4 justify-center">
             {renderCta(
               { label: "See use cases", href: "#use-cases" },
-              "inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-[#0693e3] to-[#0472b8] text-white px-8 py-4 text-base font-semibold hover:shadow-lg hover:-translate-y-0.5 transition shadow-md"
+              "inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-igny8-blue to-igny8-blue-dark text-white px-8 py-4 text-base font-semibold hover:shadow-lg hover:-translate-y-0.5 transition shadow-md"
             )}
             {renderCta(
               { label: "Talk to sales", href: "/contact" },
-              "inline-flex items-center justify-center rounded-xl border-2 border-slate-300 bg-white text-slate-700 px-8 py-4 text-base font-semibold hover:border-[#0693e3] hover:text-[#0693e3] transition"
+              "inline-flex items-center justify-center rounded-xl border-2 border-slate-300 bg-white text-slate-700 px-8 py-4 text-base font-semibold hover:border-igny8-blue hover:text-igny8-blue transition"
             )}
           </div>
         </div>
@@ -215,8 +215,8 @@ const Solutions: React.FC = () => {
               {/* Right: IGNY8 Outcomes */}
               <div className="bg-white rounded-2xl border-2 border-slate-200 p-8 shadow-sm">
                 <div className="flex items-center gap-2 mb-6">
-                  <CheckCircleIcon className={`h-5 w-5 ${persona.outcomeColor === 'bg-[#0693e3]' ? 'text-[#0693e3]' : persona.outcomeColor === 'bg-[#0bbf87]' ? 'text-[#0bbf87]' : 'text-[#5d4ae3]'}`} />
-                  <h4 className={`text-sm uppercase tracking-[0.2em] font-semibold ${persona.outcomeColor === 'bg-[#0693e3]' ? 'text-[#0693e3]' : persona.outcomeColor === 'bg-[#0bbf87]' ? 'text-[#0bbf87]' : 'text-[#5d4ae3]'}`}>
+                  <CheckCircleIcon className={`h-5 w-5 ${persona.outcomeColor === 'bg-igny8-blue' ? 'text-igny8-blue' : persona.outcomeColor === 'bg-igny8-green' ? 'text-igny8-green' : 'text-igny8-purple'}`} />
+                  <h4 className={`text-sm uppercase tracking-[0.2em] font-semibold ${persona.outcomeColor === 'bg-igny8-blue' ? 'text-igny8-blue' : persona.outcomeColor === 'bg-igny8-green' ? 'text-igny8-green' : 'text-igny8-purple'}`}>
                     IGNY8 Outcomes
                   </h4>
                 </div>
@@ -244,24 +244,24 @@ const Solutions: React.FC = () => {
                 label: "organic lift",
                 description: "Average lift in organic traffic within 90 days",
                 icon: ArrowTrendingUpIcon,
-                color: "from-[#0693e3] to-[#0472b8]",
-                glow: "shadow-[#0693e3]/30",
+                color: "from-igny8-blue to-igny8-blue-dark",
+                glow: "shadow-igny8-blue/30",
               },
               {
                 metric: "48%",
                 label: "reduction in time to publish",
                 description: "Faster time-to-publish from keyword discovery",
                 icon: ClockIcon,
-                color: "from-[#0bbf87] to-[#08966b]",
-                glow: "shadow-[#0bbf87]/30",
+                color: "from-igny8-green to-igny8-green-dark",
+                glow: "shadow-igny8-green/30",
               },
               {
                 metric: "4 tools",
                 label: "replaced",
                 description: "Average number of point solutions replaced by Igny8",
                 icon: WrenchScrewdriverIcon,
-                color: "from-[#ff7a00] to-[#cc5f00]",
-                glow: "shadow-[#ff7a00]/30",
+                color: "from-igny8-amber to-igny8-amber-dark",
+                glow: "shadow-igny8-amber/30",
               },
             ].map((stat, index) => {
               const Icon = stat.icon;
@@ -344,7 +344,7 @@ const Solutions: React.FC = () => {
       </section>
 
       {/* FINAL CTA */}
-      <section className="relative overflow-hidden bg-gradient-to-br from-[#0693e3] via-[#5d4ae3] to-[#8b5cf6]">
+      <section className="relative overflow-hidden bg-gradient-to-br from-igny8-blue via-igny8-purple to-[#8b5cf6]">
         {/* Radial glow */}
         <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.1),transparent_70%)]" />
         
@@ -360,7 +360,7 @@ const Solutions: React.FC = () => {
               href="https://app.igny8.com/signup"
               target="_blank"
               rel="noreferrer"
-              className="inline-flex items-center justify-center gap-2 rounded-xl bg-white text-[#0693e3] px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
+              className="inline-flex items-center justify-center gap-2 rounded-xl bg-white text-igny8-blue px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
             >
               <RocketLaunchIcon className="h-5 w-5" />
               Start free
diff --git a/frontend/src/pages/Automation/Dashboard.tsx b/frontend/src/pages/Automation/Dashboard.tsx
index b38ac145..6708c9d4 100644
--- a/frontend/src/pages/Automation/Dashboard.tsx
+++ b/frontend/src/pages/Automation/Dashboard.tsx
@@ -123,7 +123,7 @@ export default function AutomationDashboard() {
       nextRun: "4 hours",
       coverage: 85,
       icon: PaperPlaneIcon,
-      color: "from-[#5d4ae3] to-[#3a2f94]",
+      color: "from-igny8-purple to-igny8-purple-dark",
     },
     {
       id: 2,
@@ -135,7 +135,7 @@ export default function AutomationDashboard() {
       nextRun: "2 hours",
       coverage: 92,
       icon: FileTextIcon,
-      color: "from-[#0bbf87] to-[#08966b]",
+      color: "from-igny8-green to-igny8-green-dark",
     },
     {
       id: 3,
@@ -147,7 +147,7 @@ export default function AutomationDashboard() {
       nextRun: "3 hours",
       coverage: 78,
       icon: ListIcon,
-      color: "from-[#0693e3] to-[#0472b8]",
+      color: "from-igny8-blue to-igny8-blue-dark",
     },
   ];
 
@@ -334,7 +334,7 @@ export default function AutomationDashboard() {
                       <CloseIcon className="h-4 w-4" />
                       Pause
                     </button>
-                    <button className="flex-1 inline-flex items-center justify-center gap-2 rounded-lg bg-gradient-to-r from-[#0693e3] to-[#0472b8] text-white px-4 py-2 text-sm font-semibold hover:shadow-lg transition">
+                    <button className="flex-1 inline-flex items-center justify-center gap-2 rounded-lg bg-gradient-to-r from-igny8-blue to-igny8-blue-dark text-white px-4 py-2 text-sm font-semibold hover:shadow-lg transition">
                       <PaperPlaneIcon className="h-4 w-4" />
                       Run Now
                     </button>
@@ -360,7 +360,7 @@ export default function AutomationDashboard() {
                   <div className="flex items-center justify-between mb-3">
                     <div className={`inline-flex size-10 rounded-lg bg-gradient-to-br ${
                       isEnabled 
-                        ? "from-[#0bbf87] to-[#08966b]" 
+                        ? "from-igny8-green to-igny8-green-dark" 
                         : "from-slate-300 to-slate-400"
                     } items-center justify-center text-white shadow-md`}>
                       <Icon className="h-5 w-5" />
@@ -401,7 +401,7 @@ export default function AutomationDashboard() {
                   key={activity.id}
                   className="flex items-center gap-4 p-4 rounded-lg border border-slate-200 bg-white"
                 >
-                  <div className="size-10 rounded-lg bg-gradient-to-br from-[#0693e3] to-[#0472b8] flex items-center justify-center text-white shadow-md">
+                  <div className="size-10 rounded-lg bg-gradient-to-br from-igny8-blue to-igny8-blue-dark flex items-center justify-center text-white shadow-md">
                     <BoltIcon className="h-5 w-5" />
                   </div>
                   <div className="flex-1">
@@ -434,7 +434,7 @@ export default function AutomationDashboard() {
               onClick={() => navigate("/planner/keyword-opportunities")}
               className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#0693e3] hover:shadow-lg transition-all group"
             >
-              <div className="size-12 rounded-xl bg-gradient-to-br from-[#0693e3] to-[#0472b8] flex items-center justify-center text-white shadow-lg">
+              <div className="size-12 rounded-xl bg-gradient-to-br from-igny8-blue to-igny8-blue-dark flex items-center justify-center text-white shadow-lg">
                 <ListIcon className="h-6 w-6" />
               </div>
               <div className="flex-1 text-left">
@@ -448,7 +448,7 @@ export default function AutomationDashboard() {
               onClick={() => navigate("/writer/tasks")}
               className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#0bbf87] hover:shadow-lg transition-all group"
             >
-              <div className="size-12 rounded-xl bg-gradient-to-br from-[#0bbf87] to-[#08966b] flex items-center justify-center text-white shadow-lg">
+              <div className="size-12 rounded-xl bg-gradient-to-br from-igny8-green to-igny8-green-dark flex items-center justify-center text-white shadow-lg">
                 <FileTextIcon className="h-6 w-6" />
               </div>
               <div className="flex-1 text-left">
@@ -462,7 +462,7 @@ export default function AutomationDashboard() {
               onClick={() => navigate("/writer/published")}
               className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#5d4ae3] hover:shadow-lg transition-all group"
             >
-              <div className="size-12 rounded-xl bg-gradient-to-br from-[#5d4ae3] to-[#3a2f94] flex items-center justify-center text-white shadow-lg">
+              <div className="size-12 rounded-xl bg-gradient-to-br from-igny8-purple to-igny8-purple-dark flex items-center justify-center text-white shadow-lg">
                 <PaperPlaneIcon className="h-6 w-6" />
               </div>
               <div className="flex-1 text-left">
diff --git a/frontend/src/pages/Dashboard/Home.tsx b/frontend/src/pages/Dashboard/Home.tsx
index d152ea2d..ea28cc37 100644
--- a/frontend/src/pages/Dashboard/Home.tsx
+++ b/frontend/src/pages/Dashboard/Home.tsx
@@ -125,7 +125,7 @@ export default function Home() {
       title: "Planner",
       description: "Keyword research, clustering, and content planning",
       icon: PieChartIcon,
-      color: "from-[#0693e3] to-[#0472b8]",
+      color: "from-igny8-blue to-igny8-blue-dark",
       path: "/planner",
       count: insights?.totalClusters || 0,
       status: "active",
@@ -135,7 +135,7 @@ export default function Home() {
       title: "Writer",
       description: "AI content generation, editing, and publishing",
       icon: PencilIcon,
-      color: "from-[#0bbf87] to-[#08966b]",
+      color: "from-igny8-green to-igny8-green-dark",
       path: "/writer",
       count: insights?.totalContent || 0,
       status: "active",
@@ -145,7 +145,7 @@ export default function Home() {
       title: "Thinker",
       description: "Prompts, author profiles, and content strategies",
       icon: BoltIcon,
-      color: "from-[#ff7a00] to-[#cc5f00]",
+      color: "from-igny8-amber to-igny8-amber-dark",
       path: "/thinker",
       count: 0,
       status: "active",
@@ -155,7 +155,7 @@ export default function Home() {
       title: "Automation",
       description: "Workflow automation and scheduled tasks",
       icon: PlugInIcon,
-      color: "from-[#5d4ae3] to-[#3a2f94]",
+      color: "from-igny8-purple to-igny8-purple-dark",
       path: "/automation",
       count: 0,
       status: "active",
@@ -512,7 +512,7 @@ export default function Home() {
               to="/planner/keyword-opportunities"
               className="flex items-center gap-4 p-4 rounded-lg border-2 border-slate-200 bg-white hover:border-[#0693e3] hover:shadow-md transition group"
             >
-              <div className="size-12 rounded-lg bg-gradient-to-br from-[#0693e3] to-[#0472b8] flex items-center justify-center text-white">
+              <div className="size-12 rounded-lg bg-gradient-to-br from-igny8-blue to-igny8-blue-dark flex items-center justify-center text-white">
                 <ListIcon className="h-6 w-6" />
               </div>
               <div className="flex-1">
@@ -526,7 +526,7 @@ export default function Home() {
               to="/writer/tasks"
               className="flex items-center gap-4 p-4 rounded-lg border-2 border-slate-200 bg-white hover:border-[#0bbf87] hover:shadow-md transition group"
             >
-              <div className="size-12 rounded-lg bg-gradient-to-br from-[#0bbf87] to-[#08966b] flex items-center justify-center text-white">
+              <div className="size-12 rounded-lg bg-gradient-to-br from-igny8-green to-igny8-green-dark flex items-center justify-center text-white">
                 <FileTextIcon className="h-6 w-6" />
               </div>
               <div className="flex-1">
@@ -540,7 +540,7 @@ export default function Home() {
               to="/automation"
               className="flex items-center gap-4 p-4 rounded-lg border-2 border-slate-200 bg-white hover:border-[#5d4ae3] hover:shadow-md transition group"
             >
-              <div className="size-12 rounded-lg bg-gradient-to-br from-[#5d4ae3] to-[#3a2f94] flex items-center justify-center text-white">
+              <div className="size-12 rounded-lg bg-gradient-to-br from-igny8-purple to-igny8-purple-dark flex items-center justify-center text-white">
                 <PlugInIcon className="h-6 w-6" />
               </div>
               <div className="flex-1">
@@ -554,7 +554,7 @@ export default function Home() {
               to="/thinker/prompts"
               className="flex items-center gap-4 p-4 rounded-lg border-2 border-slate-200 bg-white hover:border-[#ff7a00] hover:shadow-md transition group"
             >
-              <div className="size-12 rounded-lg bg-gradient-to-br from-[#ff7a00] to-[#cc5f00] flex items-center justify-center text-white">
+              <div className="size-12 rounded-lg bg-gradient-to-br from-igny8-amber to-igny8-amber-dark flex items-center justify-center text-white">
                 <BoltIcon className="h-6 w-6" />
               </div>
               <div className="flex-1">
diff --git a/frontend/src/pages/Planner/Dashboard.tsx b/frontend/src/pages/Planner/Dashboard.tsx
index f4861daf..152086f1 100644
--- a/frontend/src/pages/Planner/Dashboard.tsx
+++ b/frontend/src/pages/Planner/Dashboard.tsx
@@ -192,7 +192,7 @@ export default function PlannerDashboard() {
       title: "Keywords",
       description: "Manage and discover keywords",
       icon: ListIcon,
-      color: "from-[#0693e3] to-[#0472b8]",
+      color: "from-igny8-blue to-igny8-blue-dark",
       path: "/planner/keywords",
       count: stats?.keywords.total || 0,
       metric: `${stats?.keywords.mapped || 0} mapped`,
@@ -201,7 +201,7 @@ export default function PlannerDashboard() {
       title: "Clusters",
       description: "Keyword clusters and groups",
       icon: GroupIcon,
-      color: "from-[#0bbf87] to-[#08966b]",
+      color: "from-igny8-green to-igny8-green-dark",
       path: "/planner/clusters",
       count: stats?.clusters.total || 0,
       metric: `${stats?.clusters.totalVolume.toLocaleString() || 0} volume`,
@@ -210,7 +210,7 @@ export default function PlannerDashboard() {
       title: "Ideas",
       description: "Content ideas and concepts",
       icon: BoltIcon,
-      color: "from-[#ff7a00] to-[#cc5f00]",
+      color: "from-igny8-amber to-igny8-amber-dark",
       path: "/planner/ideas",
       count: stats?.ideas.total || 0,
       metric: `${stats?.ideas.queued || 0} queued`,
@@ -219,7 +219,7 @@ export default function PlannerDashboard() {
       title: "Keyword Opportunities",
       description: "Discover new keyword opportunities",
       icon: PieChartIcon,
-      color: "from-[#5d4ae3] to-[#3a2f94]",
+      color: "from-igny8-purple to-igny8-purple-dark",
       path: "/planner/keyword-opportunities",
       count: 0,
       metric: "Discover new keywords",
@@ -638,7 +638,7 @@ export default function PlannerDashboard() {
               to="/planner/keyword-opportunities"
               className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#0693e3] hover:shadow-lg transition-all group"
             >
-              <div className="size-12 rounded-xl bg-gradient-to-br from-[#0693e3] to-[#0472b8] flex items-center justify-center text-white shadow-lg">
+              <div className="size-12 rounded-xl bg-gradient-to-br from-igny8-blue to-igny8-blue-dark flex items-center justify-center text-white shadow-lg">
                 <ListIcon className="h-6 w-6" />
               </div>
               <div className="flex-1 text-left">
@@ -652,7 +652,7 @@ export default function PlannerDashboard() {
               to="/planner/clusters"
               className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#0bbf87] hover:shadow-lg transition-all group"
             >
-              <div className="size-12 rounded-xl bg-gradient-to-br from-[#0bbf87] to-[#08966b] flex items-center justify-center text-white shadow-lg">
+              <div className="size-12 rounded-xl bg-gradient-to-br from-igny8-green to-igny8-green-dark flex items-center justify-center text-white shadow-lg">
                 <GroupIcon className="h-6 w-6" />
               </div>
               <div className="flex-1 text-left">
@@ -666,7 +666,7 @@ export default function PlannerDashboard() {
               to="/planner/ideas"
               className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#ff7a00] hover:shadow-lg transition-all group"
             >
-              <div className="size-12 rounded-xl bg-gradient-to-br from-[#ff7a00] to-[#cc5f00] flex items-center justify-center text-white shadow-lg">
+              <div className="size-12 rounded-xl bg-gradient-to-br from-igny8-amber to-igny8-amber-dark flex items-center justify-center text-white shadow-lg">
                 <BoltIcon className="h-6 w-6" />
               </div>
               <div className="flex-1 text-left">
@@ -680,7 +680,7 @@ export default function PlannerDashboard() {
               to="/automation"
               className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#5d4ae3] hover:shadow-lg transition-all group"
             >
-              <div className="size-12 rounded-xl bg-gradient-to-br from-[#5d4ae3] to-[#3a2f94] flex items-center justify-center text-white shadow-lg">
+              <div className="size-12 rounded-xl bg-gradient-to-br from-igny8-purple to-igny8-purple-dark flex items-center justify-center text-white shadow-lg">
                 <PlugInIcon className="h-6 w-6" />
               </div>
               <div className="flex-1 text-left">
@@ -697,7 +697,7 @@ export default function PlannerDashboard() {
           <ComponentCard title="How Planner Works" desc="Understanding the planning workflow">
             <div className="space-y-4">
               <div className="flex gap-4">
-                <div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-[#0693e3] to-[#0472b8] flex items-center justify-center text-white shadow-md">
+                <div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-igny8-blue to-igny8-blue-dark flex items-center justify-center text-white shadow-md">
                   <ListIcon className="h-5 w-5" />
                 </div>
                 <div>
@@ -708,7 +708,7 @@ export default function PlannerDashboard() {
                 </div>
               </div>
               <div className="flex gap-4">
-                <div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-[#0bbf87] to-[#08966b] flex items-center justify-center text-white shadow-md">
+                <div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-igny8-green to-igny8-green-dark flex items-center justify-center text-white shadow-md">
                   <GroupIcon className="h-5 w-5" />
                 </div>
                 <div>
@@ -719,7 +719,7 @@ export default function PlannerDashboard() {
                 </div>
               </div>
               <div className="flex gap-4">
-                <div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-[#ff7a00] to-[#cc5f00] flex items-center justify-center text-white shadow-md">
+                <div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-igny8-amber to-igny8-amber-dark flex items-center justify-center text-white shadow-md">
                   <BoltIcon className="h-5 w-5" />
                 </div>
                 <div>
diff --git a/frontend/src/pages/Thinker/Dashboard.tsx b/frontend/src/pages/Thinker/Dashboard.tsx
index a5c9ecbf..96d74e53 100644
--- a/frontend/src/pages/Thinker/Dashboard.tsx
+++ b/frontend/src/pages/Thinker/Dashboard.tsx
@@ -67,7 +67,7 @@ export default function ThinkerDashboard() {
       title: "Prompt Library",
       description: "Centralized prompt templates and AI instructions",
       icon: FileTextIcon,
-      color: "from-[#ff7a00] to-[#cc5f00]",
+      color: "from-igny8-amber to-igny8-amber-dark",
       path: "/thinker/prompts",
       count: stats?.totalPrompts || 0,
       status: "active",
@@ -76,7 +76,7 @@ export default function ThinkerDashboard() {
       title: "Author Profiles",
       description: "Voice templates and writing style guides",
       icon: UserIcon,
-      color: "from-[#0693e3] to-[#0472b8]",
+      color: "from-igny8-blue to-igny8-blue-dark",
       path: "/thinker/profiles",
       count: stats?.activeProfiles || 0,
       status: "active",
@@ -85,7 +85,7 @@ export default function ThinkerDashboard() {
       title: "Content Strategies",
       description: "Brand playbooks and content frameworks",
       icon: ShootingStarIcon,
-      color: "from-[#5d4ae3] to-[#3a2f94]",
+      color: "from-igny8-purple to-igny8-purple-dark",
       path: "/thinker/strategies",
       count: stats?.strategies || 0,
       status: "active",
@@ -94,7 +94,7 @@ export default function ThinkerDashboard() {
       title: "Governance",
       description: "Track AI usage, compliance, and version control",
       icon: PieChartIcon,
-      color: "from-[#0bbf87] to-[#08966b]",
+      color: "from-igny8-green to-igny8-green-dark",
       path: "/thinker/governance",
       count: 0,
       status: "coming-soon",
@@ -237,7 +237,7 @@ export default function ThinkerDashboard() {
                   key={prompt.id}
                   className="flex items-center gap-4 p-4 rounded-lg border border-slate-200 bg-white hover:shadow-md transition"
                 >
-                  <div className="size-10 rounded-lg bg-gradient-to-br from-[#ff7a00] to-[#cc5f00] flex items-center justify-center text-white shadow-md">
+                  <div className="size-10 rounded-lg bg-gradient-to-br from-igny8-amber to-igny8-amber-dark flex items-center justify-center text-white shadow-md">
                     <FileTextIcon className="h-5 w-5" />
                   </div>
                   <div className="flex-1">
@@ -264,7 +264,7 @@ export default function ThinkerDashboard() {
               onClick={() => navigate("/thinker/prompts")}
               className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#ff7a00] hover:shadow-lg transition-all group"
             >
-              <div className="size-12 rounded-xl bg-gradient-to-br from-[#ff7a00] to-[#cc5f00] flex items-center justify-center text-white shadow-lg">
+              <div className="size-12 rounded-xl bg-gradient-to-br from-igny8-amber to-igny8-amber-dark flex items-center justify-center text-white shadow-lg">
                 <PlusIcon className="h-6 w-6" />
               </div>
               <div className="flex-1 text-left">
@@ -278,7 +278,7 @@ export default function ThinkerDashboard() {
               onClick={() => navigate("/thinker/profiles")}
               className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#0693e3] hover:shadow-lg transition-all group"
             >
-              <div className="size-12 rounded-xl bg-gradient-to-br from-[#0693e3] to-[#0472b8] flex items-center justify-center text-white shadow-lg">
+              <div className="size-12 rounded-xl bg-gradient-to-br from-igny8-blue to-igny8-blue-dark flex items-center justify-center text-white shadow-lg">
                 <PlusIcon className="h-6 w-6" />
               </div>
               <div className="flex-1 text-left">
@@ -292,7 +292,7 @@ export default function ThinkerDashboard() {
               onClick={() => navigate("/thinker/strategies")}
               className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#5d4ae3] hover:shadow-lg transition-all group"
             >
-              <div className="size-12 rounded-xl bg-gradient-to-br from-[#5d4ae3] to-[#3a2f94] flex items-center justify-center text-white shadow-lg">
+              <div className="size-12 rounded-xl bg-gradient-to-br from-igny8-purple to-igny8-purple-dark flex items-center justify-center text-white shadow-lg">
                 <PlusIcon className="h-6 w-6" />
               </div>
               <div className="flex-1 text-left">
@@ -309,7 +309,7 @@ export default function ThinkerDashboard() {
           <ComponentCard title="How Thinker Works" desc="Understanding the strategic OS">
             <div className="space-y-4">
               <div className="flex gap-4">
-                <div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-[#ff7a00] to-[#cc5f00] flex items-center justify-center text-white shadow-md">
+                <div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-igny8-amber to-igny8-amber-dark flex items-center justify-center text-white shadow-md">
                   <BoltIcon className="h-5 w-5" />
                 </div>
                 <div>
@@ -320,7 +320,7 @@ export default function ThinkerDashboard() {
                 </div>
               </div>
               <div className="flex gap-4">
-                <div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-[#0693e3] to-[#0472b8] flex items-center justify-center text-white shadow-md">
+                <div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-igny8-blue to-igny8-blue-dark flex items-center justify-center text-white shadow-md">
                   <CheckCircleIcon className="h-5 w-5" />
                 </div>
                 <div>
@@ -331,7 +331,7 @@ export default function ThinkerDashboard() {
                 </div>
               </div>
               <div className="flex gap-4">
-                <div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-[#0bbf87] to-[#08966b] flex items-center justify-center text-white shadow-md">
+                <div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-igny8-green to-igny8-green-dark flex items-center justify-center text-white shadow-md">
                   <ShootingStarIcon className="h-5 w-5" />
                 </div>
                 <div>
diff --git a/frontend/src/pages/Writer/Dashboard.tsx b/frontend/src/pages/Writer/Dashboard.tsx
index f824c433..3eb5a0f8 100644
--- a/frontend/src/pages/Writer/Dashboard.tsx
+++ b/frontend/src/pages/Writer/Dashboard.tsx
@@ -207,7 +207,7 @@ export default function WriterDashboard() {
       title: "Tasks",
       description: "Content writing tasks and assignments",
       icon: FileTextIcon,
-      color: "from-[#0693e3] to-[#0472b8]",
+      color: "from-igny8-blue to-igny8-blue-dark",
       path: "/writer/tasks",
       count: stats?.tasks.total || 0,
       metric: `${stats?.tasks.completed || 0} completed`,
@@ -216,7 +216,7 @@ export default function WriterDashboard() {
       title: "Content",
       description: "Generated content and drafts",
       icon: PencilIcon,
-      color: "from-[#0bbf87] to-[#08966b]",
+      color: "from-igny8-green to-igny8-green-dark",
       path: "/writer/content",
       count: stats?.content.total || 0,
       metric: `${stats?.content.published || 0} published`,
@@ -225,7 +225,7 @@ export default function WriterDashboard() {
       title: "Images",
       description: "Generated images and assets",
       icon: BoxIcon,
-      color: "from-[#ff7a00] to-[#cc5f00]",
+      color: "from-igny8-amber to-igny8-amber-dark",
       path: "/writer/images",
       count: stats?.images.generated || 0,
       metric: `${stats?.images.pending || 0} pending`,
@@ -234,7 +234,7 @@ export default function WriterDashboard() {
       title: "Published",
       description: "Published content and posts",
       icon: PaperPlaneIcon,
-      color: "from-[#5d4ae3] to-[#3a2f94]",
+      color: "from-igny8-purple to-igny8-purple-dark",
       path: "/writer/published",
       count: stats?.content.published || 0,
       metric: "View all published",
@@ -652,7 +652,7 @@ export default function WriterDashboard() {
               to="/writer/tasks"
               className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#0693e3] hover:shadow-lg transition-all group"
             >
-              <div className="size-12 rounded-xl bg-gradient-to-br from-[#0693e3] to-[#0472b8] flex items-center justify-center text-white shadow-lg">
+              <div className="size-12 rounded-xl bg-gradient-to-br from-igny8-blue to-igny8-blue-dark flex items-center justify-center text-white shadow-lg">
                 <FileTextIcon className="h-6 w-6" />
               </div>
               <div className="flex-1 text-left">
@@ -666,7 +666,7 @@ export default function WriterDashboard() {
               to="/writer/content"
               className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#0bbf87] hover:shadow-lg transition-all group"
             >
-              <div className="size-12 rounded-xl bg-gradient-to-br from-[#0bbf87] to-[#08966b] flex items-center justify-center text-white shadow-lg">
+              <div className="size-12 rounded-xl bg-gradient-to-br from-igny8-green to-igny8-green-dark flex items-center justify-center text-white shadow-lg">
                 <PencilIcon className="h-6 w-6" />
               </div>
               <div className="flex-1 text-left">
@@ -680,7 +680,7 @@ export default function WriterDashboard() {
               to="/writer/images"
               className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#ff7a00] hover:shadow-lg transition-all group"
             >
-              <div className="size-12 rounded-xl bg-gradient-to-br from-[#ff7a00] to-[#cc5f00] flex items-center justify-center text-white shadow-lg">
+              <div className="size-12 rounded-xl bg-gradient-to-br from-igny8-amber to-igny8-amber-dark flex items-center justify-center text-white shadow-lg">
                 <BoxIcon className="h-6 w-6" />
               </div>
               <div className="flex-1 text-left">
@@ -694,7 +694,7 @@ export default function WriterDashboard() {
               to="/writer/published"
               className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#5d4ae3] hover:shadow-lg transition-all group"
             >
-              <div className="size-12 rounded-xl bg-gradient-to-br from-[#5d4ae3] to-[#3a2f94] flex items-center justify-center text-white shadow-lg">
+              <div className="size-12 rounded-xl bg-gradient-to-br from-igny8-purple to-igny8-purple-dark flex items-center justify-center text-white shadow-lg">
                 <PaperPlaneIcon className="h-6 w-6" />
               </div>
               <div className="flex-1 text-left">
@@ -711,7 +711,7 @@ export default function WriterDashboard() {
           <ComponentCard title="How Writer Works" desc="Understanding the content creation workflow">
             <div className="space-y-4">
               <div className="flex gap-4">
-                <div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-[#0693e3] to-[#0472b8] flex items-center justify-center text-white shadow-md">
+                <div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-igny8-blue to-igny8-blue-dark flex items-center justify-center text-white shadow-md">
                   <FileTextIcon className="h-5 w-5" />
                 </div>
                 <div>
@@ -722,7 +722,7 @@ export default function WriterDashboard() {
                 </div>
               </div>
               <div className="flex gap-4">
-                <div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-[#0bbf87] to-[#08966b] flex items-center justify-center text-white shadow-md">
+                <div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-igny8-green to-igny8-green-dark flex items-center justify-center text-white shadow-md">
                   <PencilIcon className="h-5 w-5" />
                 </div>
                 <div>
@@ -733,7 +733,7 @@ export default function WriterDashboard() {
                 </div>
               </div>
               <div className="flex gap-4">
-                <div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-[#ff7a00] to-[#cc5f00] flex items-center justify-center text-white shadow-md">
+                <div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-igny8-amber to-igny8-amber-dark flex items-center justify-center text-white shadow-md">
                   <BoxIcon className="h-5 w-5" />
                 </div>
                 <div>