From 9eee5168bb930e0ba63d5332929f6210eae1d0e0 Mon Sep 17 00:00:00 2001
From: Desktop <desktop@igny8.com>
Date: Fri, 14 Nov 2025 14:34:44 +0500
Subject: [PATCH] css

---
 frontend/src/marketing/pages/CaseStudies.tsx |  4 ++--
 frontend/src/marketing/pages/Home.tsx        |  6 +++---
 frontend/src/marketing/pages/Partners.tsx    |  8 +++----
 frontend/src/marketing/pages/Pricing.tsx     | 22 ++++++++++----------
 frontend/src/marketing/pages/Product.tsx     |  6 +++---
 frontend/src/marketing/pages/Resources.tsx   | 16 +++++++-------
 frontend/src/marketing/pages/Solutions.tsx   | 14 ++++++-------
 7 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/frontend/src/marketing/pages/CaseStudies.tsx b/frontend/src/marketing/pages/CaseStudies.tsx
index 3541fdf5..80862a66 100644
--- a/frontend/src/marketing/pages/CaseStudies.tsx
+++ b/frontend/src/marketing/pages/CaseStudies.tsx
@@ -96,7 +96,7 @@ const CaseStudies: React.FC = () => {
       <section className="max-w-7xl mx-auto px-6 pb-24 space-y-16">
         {caseStudies.map((cs, idx) => {
           const metricColors = [
-            { border: "border-slate-200", bg: "from-white to-slate-50/50", text: "text-[var(--igny8-blue)]" },
+            { border: "border-slate-200", bg: "from-white to-slate-50/50", text: "igny8-text-blue" },
             { border: "border-slate-200", bg: "from-white to-slate-50/50", text: "text-[#0bbf87]" },
             { border: "border-slate-200", bg: "from-white to-slate-50/50", text: "text-[#ff7a00]" },
           ];
@@ -216,7 +216,7 @@ const CaseStudies: React.FC = () => {
             </Link>
             <Link
               to="/resources"
-              className="inline-flex items-center justify-center gap-2 rounded-xl bg-white text-[var(--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"
+              className="inline-flex items-center justify-center gap-2 rounded-xl bg-white igny8-text-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" />
               Download case study pack
diff --git a/frontend/src/marketing/pages/Home.tsx b/frontend/src/marketing/pages/Home.tsx
index dc5b8e15..9c984555 100644
--- a/frontend/src/marketing/pages/Home.tsx
+++ b/frontend/src/marketing/pages/Home.tsx
@@ -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-[var(--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"
+                  "inline-flex items-center justify-center rounded-xl bg-white igny8-text-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" },
@@ -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-[var(--igny8-blue)]/20 bg-[var(--igny8-blue)]/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-[var(--igny8-blue)] mb-4">
+            <span className="inline-flex items-center rounded-full border border-[var(--igny8-blue)]/20 bg-[var(--igny8-blue)]/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.2em] igny8-text-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">
@@ -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-[var(--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"
+              className="inline-flex items-center justify-center gap-2 rounded-xl bg-white igny8-text-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/Partners.tsx b/frontend/src/marketing/pages/Partners.tsx
index 9b070330..90a9f1a7 100644
--- a/frontend/src/marketing/pages/Partners.tsx
+++ b/frontend/src/marketing/pages/Partners.tsx
@@ -112,7 +112,7 @@ const Partners: React.FC = () => {
                 <p className="text-sm text-slate-600 font-medium">{tier.description}</p>
                 <ul className="space-y-4 text-sm text-slate-700 flex-1">
                   {tier.benefits.map((benefit, benefitIdx) => {
-                    const dotColors = ["bg-[var(--igny8-blue)]", "bg-[var(--igny8-green)]", "bg-[var(--igny8-amber)]", "bg-[var(--igny8-purple)]"];
+                    const dotColors = ["igny8-bg-blue", "igny8-bg-green", "igny8-bg-amber", "igny8-bg-purple"];
                     return (
                       <li key={benefit} className="flex gap-3">
                         <span className={`mt-1.5 size-2 rounded-full ${dotColors[benefitIdx % dotColors.length]} shadow-sm flex-shrink-0`} />
@@ -167,9 +167,9 @@ const Partners: React.FC = () => {
             </div>
             <ul className="space-y-4 text-sm text-slate-700">
               {[
-                { text: "Sales playbooks, ROI calculators, and demo environments.", color: "bg-[var(--igny8-blue)]" },
-                { text: "Shared Slack channels with Igny8 product and marketing teams.", color: "bg-[var(--igny8-green)]" },
-                { text: "Quarterly partner labs to showcase launches and integrations.", color: "bg-[var(--igny8-amber)]" },
+                { text: "Sales playbooks, ROI calculators, and demo environments.", color: "igny8-bg-blue" },
+                { text: "Shared Slack channels with Igny8 product and marketing teams.", color: "igny8-bg-green" },
+                { text: "Quarterly partner labs to showcase launches and integrations.", color: "igny8-bg-amber" },
               ].map((item, index) => (
                 <li key={item.text} className="flex gap-3">
                   <span className={`mt-1.5 size-2 rounded-full ${item.color} shadow-sm flex-shrink-0`} />
diff --git a/frontend/src/marketing/pages/Pricing.tsx b/frontend/src/marketing/pages/Pricing.tsx
index 8e5c9b8e..616ad2a8 100644
--- a/frontend/src/marketing/pages/Pricing.tsx
+++ b/frontend/src/marketing/pages/Pricing.tsx
@@ -239,7 +239,7 @@ const Pricing: React.FC = () => {
                 key={tier.name}
                 className={`relative rounded-3xl border-2 ${
                   tier.featured
-                    ? "border-[var(--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)]"
+                    ? "igny8-border-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-[var(--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-[var(--igny8-blue)]"
+                            ? "igny8-border-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 igny8-text-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-[var(--igny8-green)]/10 text-[#0bbf87]"
+                      ? "igny8-bg-green/10 text-[#0bbf87]"
                       : "bg-slate-100 text-slate-600";
                     return (
                       <li key={feature} className="flex gap-3 items-start">
@@ -305,7 +305,7 @@ const Pricing: React.FC = () => {
                     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-[var(--igny8-blue)] to-[var(--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-[var(--igny8-blue)] hover:bg-white"
+                        : "border-2 border-slate-300 bg-white/50 backdrop-blur-sm text-slate-900 hover:igny8-border-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-[var(--igny8-blue)] bg-gradient-to-br from-[#0693e3]/5 to-transparent">
+                  <th className="px-6 py-4 text-center font-semibold igny8-text-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-[var(--igny8-blue)]"></span>
+                          <span className="size-1.5 rounded-full igny8-bg-blue"></span>
                           {row.starter}
                         </span>
                       )}
                     </td>
-                    <td className="px-6 py-5 text-center font-medium text-[var(--igny8-blue)] bg-gradient-to-br from-[#0693e3]/5 to-transparent">
+                    <td className="px-6 py-5 text-center font-medium igny8-text-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-[var(--igny8-blue)]"></span>
+                          <span className="size-1.5 rounded-full igny8-bg-blue"></span>
                           {row.growth}
                         </span>
                       )}
@@ -389,7 +389,7 @@ 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-[var(--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="rounded-3xl border-2 igny8-border-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-[var(--igny8-blue)] to-[var(--igny8-blue-dark)] flex items-center justify-center text-white shadow-lg">
                 <CreditCardIcon className="h-6 w-6" />
@@ -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-[var(--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"
+              className="inline-flex items-center justify-center gap-2 rounded-xl bg-white igny8-text-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 edc35fc1..b2806529 100644
--- a/frontend/src/marketing/pages/Product.tsx
+++ b/frontend/src/marketing/pages/Product.tsx
@@ -138,7 +138,7 @@ const Product: React.FC = () => {
             )}
             {renderCta(
               { label: "Book a demo", href: "/contact" },
-              "inline-flex items-center justify-center rounded-xl border-2 border-slate-300 bg-white text-slate-700 px-8 py-4 text-base font-semibold hover:border-[var(--igny8-blue)] hover:text-[var(--igny8-blue)] 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:igny8-border-blue hover:igny8-text-blue transition"
             )}
           </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-[var(--igny8-blue)]/20 bg-[var(--igny8-blue)]/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-[var(--igny8-blue)] mb-4">
+            <span className="inline-flex items-center rounded-full border border-[var(--igny8-blue)]/20 bg-[var(--igny8-blue)]/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.2em] igny8-text-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">
@@ -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-[var(--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"
+              className="inline-flex items-center justify-center gap-2 rounded-xl bg-white igny8-text-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 454be262..e3735a8b 100644
--- a/frontend/src/marketing/pages/Resources.tsx
+++ b/frontend/src/marketing/pages/Resources.tsx
@@ -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-[var(--igny8-blue)] hover:text-[var(--igny8-blue-dark)] group"
+                  className="inline-flex items-center gap-2 text-sm font-semibold igny8-text-blue hover:text-[var(--igny8-blue-dark)] 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-[var(--igny8-blue)] transition"
+            className="inline-flex items-center gap-2 text-base font-semibold text-slate-700 hover:igny8-text-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-[var(--igny8-blue)] hover:text-[var(--igny8-blue-dark)] group"
+                        className="inline-flex items-center gap-2 text-sm font-semibold igny8-text-blue hover:text-[var(--igny8-blue-dark)] 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-[var(--igny8-blue)] transition"
+              className="inline-flex items-center gap-2 text-base font-semibold text-slate-700 hover:igny8-text-blue transition"
             >
               Explore Templates
               <ArrowRightIcon className="h-5 w-5" />
@@ -392,7 +392,7 @@ const Resources: React.FC = () => {
                     className={`inline-flex items-center justify-center gap-2 rounded-xl px-6 py-3 text-sm font-semibold transition ${
                       resource.tag === "Live"
                         ? "bg-gradient-to-r from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)] text-white hover:shadow-lg"
-                        : "border-2 border-slate-300 bg-white text-slate-700 hover:border-[#0693e3] hover:text-[var(--igny8-blue)]"
+                        : "border-2 border-slate-300 bg-white text-slate-700 hover:border-[#0693e3] hover:igny8-text-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-[var(--igny8-blue)] transition"
+              className="inline-flex items-center gap-2 text-base font-semibold text-slate-700 hover:igny8-text-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-[var(--igny8-blue)] hover:text-[var(--igny8-blue-dark)] group"
+                    className="inline-flex items-center gap-2 text-sm font-semibold igny8-text-blue hover:text-[var(--igny8-blue-dark)] group"
                   >
                     <ArrowDownTrayIcon className="h-4 w-4" />
                     Download Now
@@ -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-[var(--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"
+              className="inline-flex items-center justify-center gap-2 rounded-xl bg-white igny8-text-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 33f3c883..662efab9 100644
--- a/frontend/src/marketing/pages/Solutions.tsx
+++ b/frontend/src/marketing/pages/Solutions.tsx
@@ -59,7 +59,7 @@ const Solutions: React.FC = () => {
       borderColor: "border-[var(--igny8-blue)]/20",
       iconColor: "from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)]",
       painColor: "bg-rose-500",
-      outcomeColor: "bg-[var(--igny8-blue)]",
+      outcomeColor: "igny8-bg-blue",
     },
     {
       name: "Agencies & Consultancies",
@@ -79,7 +79,7 @@ const Solutions: React.FC = () => {
       borderColor: "border-[var(--igny8-green)]/20",
       iconColor: "from-[var(--igny8-green)] to-[var(--igny8-green-dark)]",
       painColor: "bg-rose-500",
-      outcomeColor: "bg-[var(--igny8-green)]",
+      outcomeColor: "igny8-bg-green",
     },
     {
       name: "In-house Marketing Teams",
@@ -99,7 +99,7 @@ const Solutions: React.FC = () => {
       borderColor: "border-[var(--igny8-purple)]/20",
       iconColor: "from-[var(--igny8-purple)] to-[var(--igny8-purple-dark)]",
       painColor: "bg-rose-500",
-      outcomeColor: "bg-[var(--igny8-purple)]",
+      outcomeColor: "igny8-bg-purple",
     },
   ];
 
@@ -165,7 +165,7 @@ const Solutions: React.FC = () => {
             )}
             {renderCta(
               { label: "Talk to sales", href: "/contact" },
-              "inline-flex items-center justify-center rounded-xl border-2 border-slate-300 bg-white text-slate-700 px-8 py-4 text-base font-semibold hover:border-[var(--igny8-blue)] hover:text-[var(--igny8-blue)] 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-[var(--igny8-blue)] hover:igny8-text-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-[var(--igny8-blue)]' ? 'text-[var(--igny8-blue)]' : persona.outcomeColor === 'bg-[var(--igny8-green)]' ? 'text-[var(--igny8-green)]' : 'text-[var(--igny8-purple)]'}`} />
-                  <h4 className={`text-sm uppercase tracking-[0.2em] font-semibold ${persona.outcomeColor === 'bg-[var(--igny8-blue)]' ? 'text-[var(--igny8-blue)]' : persona.outcomeColor === 'bg-[var(--igny8-green)]' ? 'text-[var(--igny8-green)]' : 'text-[var(--igny8-purple)]'}`}>
+                  <CheckCircleIcon className={`h-5 w-5 ${persona.outcomeColor === 'igny8-bg-blue' ? 'igny8-text-blue' : persona.outcomeColor === 'igny8-bg-green' ? 'igny8-text-green' : 'igny8-text-purple'}`} />
+                  <h4 className={`text-sm uppercase tracking-[0.2em] font-semibold ${persona.outcomeColor === 'igny8-bg-blue' ? 'igny8-text-blue' : persona.outcomeColor === 'igny8-bg-green' ? 'igny8-text-green' : 'igny8-text-purple'}`}>
                     IGNY8 Outcomes
                   </h4>
                 </div>
@@ -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-[var(--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"
+              className="inline-flex items-center justify-center gap-2 rounded-xl bg-white igny8-text-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