From aa116ebb60cfdbd9fc2b086b43f887de02eae672 Mon Sep 17 00:00:00 2001
From: Mao Nakamoto <41178744+maonakamoto@users.noreply.github.com>
Date: Thu, 25 Jun 2026 19:28:09 +0200
Subject: [PATCH] =?UTF-8?q?design(landing):=20identity-first=20reskin=20?=
 =?UTF-8?q?=E2=80=94=20token=20SSOT,=20serif=20voice,=20monogram=20avatars?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Botsmann had no identity of its own: a generic 2021-era AI-SaaS skin with the
brand fragmented across three disagreeing sources (config OpenAI-green,
globals.css black/white, page blue/purple/cyan gradients). Derive Botsmann's
OWN voice — serious, credible counsel: warm editorial ink + a single
authoritative ochre accent, carried by a serif display face, not gradient tricks.

- globals.css is now the single SSOT for design tokens (semantic colors for
  brand/action/surface/text + radii + shadows, two-tier primitive→semantic).
- tailwind.config wired to the CSS vars; literal colors removed. Ripped out the
  OpenAI-borrowed tokens (openai-green #10a37f / openai-gray) and migrated every
  consumer to the semantic `action` / `brand` tokens.
- Killed the generic "AI gradient" skin: removed the blue→purple→cyan gradient
  wordmark, the blurred gradient hero blobs, gradient buttons, and glassmorphism.
  Replaced with one confident ochre accent + ink, hairline editorial surfaces.
- Real typeface via next/font: Fraunces (serif display, headings + wordmark) +
  Inter (UI/body), bound to --font-serif / --font-sans. Retires system-ui.
- Replaced emoji professional avatars (⚖️🩺🔬🇨🇭🎨♛) with a ProfessionalAvatar
  monogram badge built on the existing accentColor SSOT.
- One headline value prop: tab title, hero H1 and footer now all agree on
  "Your Private AI Professionals" (was a split tagline vs H1).

Design only — all content and functionality preserved. Lint clean; no new tsc
errors (the pre-existing embeddings.test.ts error is unchanged from main);
production CSS resolves the full token chain.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/blog/page.tsx                        |   7 +-
 app/contact/page.tsx                     |  18 ++--
 app/globals.css                          |  66 ++++++++++--
 app/layout.tsx                           |  24 ++++-
 app/page.tsx                             | 131 ++++++++++-------------
 app/projects/credit/page.tsx             |   8 +-
 app/projects/page.tsx                    |   2 +-
 app/projects/shopping/page.tsx           |  16 +--
 app/projects/techno-capital/page.tsx     |  38 +++----
 app/solutions/page.tsx                   |  16 +--
 components/ConsultationForm.tsx          |  12 +--
 components/Footer.tsx                    |  22 ++--
 components/Header.tsx                    |   2 +-
 components/TableOfContents.tsx           |   2 +-
 components/blog/MDXComponents.tsx        |   4 +-
 components/blog/ServerMDXContent.tsx     |   4 +-
 components/navigation/MobileNav.tsx      |  12 +--
 components/navigation/NavItem.tsx        |   2 +-
 components/navigation/NextSection.tsx    |   2 +-
 components/shared/EnterpriseSection.tsx  |  26 ++---
 components/shared/HowItWorks.tsx         |  27 ++---
 components/shared/Logo.tsx               |  17 ++-
 components/shared/PrivacySection.tsx     |  48 +++------
 components/shared/ProfessionalAvatar.tsx |  36 +++++++
 components/shared/ProfessionalCard.tsx   |  28 ++---
 lib/site.ts                              |   3 +-
 tailwind.config.js                       |  26 ++++-
 27 files changed, 325 insertions(+), 274 deletions(-)
 create mode 100644 components/shared/ProfessionalAvatar.tsx

diff --git a/app/blog/page.tsx b/app/blog/page.tsx
index f680fadd7..783ab7ffe 100644
--- a/app/blog/page.tsx
+++ b/app/blog/page.tsx
@@ -65,10 +65,7 @@ export default async function Blog() {
                     </div>
 
                     <h2 className="mt-4 text-2xl font-semibold tracking-tight text-gray-900">
-                      <Link
-                        href={`/blog/${post.slug}` as Route}
-                        className="hover:text-openai-green"
-                      >
+                      <Link href={`/blog/${post.slug}` as Route} className="hover:text-action">
                         {post.title}
                       </Link>
                     </h2>
@@ -90,7 +87,7 @@ export default async function Blog() {
 
                     <Link
                       href={`/blog/${post.slug}` as Route}
-                      className="mt-6 inline-flex items-center text-sm font-medium text-openai-green hover:text-opacity-80"
+                      className="mt-6 inline-flex items-center text-sm font-medium text-action hover:text-opacity-80"
                     >
                       Read more
                       <svg
diff --git a/app/contact/page.tsx b/app/contact/page.tsx
index a03b6f8ef..08f68ee4d 100644
--- a/app/contact/page.tsx
+++ b/app/contact/page.tsx
@@ -63,7 +63,7 @@ export default function ContactPage() {
             <div>
               <h3 className="mb-2 text-lg font-medium text-gray-900">Email</h3>
               <p className="text-gray-600">
-                <a href="mailto:info@botsmann.com" className="text-openai-green hover:underline">
+                <a href="mailto:info@botsmann.com" className="text-action hover:underline">
                   info@botsmann.com
                 </a>
               </p>
@@ -87,7 +87,7 @@ export default function ContactPage() {
               solutions in action.
             </p>
             <button
-              className="rounded-md bg-white px-4 py-2 text-sm font-medium text-openai-green border border-openai-green hover:bg-openai-green hover:text-white transition-colors"
+              className="rounded-md bg-white px-4 py-2 text-sm font-medium text-action border border-action hover:bg-action hover:text-white transition-colors"
               onClick={() => window.open('https://calendly.com/botsmann/demo', '_blank')}
             >
               Schedule a Demo
@@ -101,7 +101,7 @@ export default function ContactPage() {
             {isSubmitted ? (
               <div className="text-center py-8">
                 <svg
-                  className="mx-auto h-12 w-12 text-openai-green"
+                  className="mx-auto h-12 w-12 text-action"
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
@@ -118,7 +118,7 @@ export default function ContactPage() {
                   We've received your message and will get back to you soon.
                 </p>
                 <button
-                  className="mt-5 rounded-md bg-openai-green px-4 py-2 text-sm font-medium text-white hover:bg-opacity-90 transition-opacity"
+                  className="mt-5 rounded-md bg-action px-4 py-2 text-sm font-medium text-white hover:bg-opacity-90 transition-opacity"
                   onClick={() => setIsSubmitted(false)}
                 >
                   Send another message
@@ -141,7 +141,7 @@ export default function ContactPage() {
                     required
                     value={formState.name}
                     onChange={handleChange}
-                    className="w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-openai-green focus:outline-none focus:ring-1 focus:ring-openai-green"
+                    className="w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-action focus:outline-none focus:ring-1 focus:ring-action"
                   />
                 </div>
 
@@ -156,7 +156,7 @@ export default function ContactPage() {
                     required
                     value={formState.email}
                     onChange={handleChange}
-                    className="w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-openai-green focus:outline-none focus:ring-1 focus:ring-openai-green"
+                    className="w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-action focus:outline-none focus:ring-1 focus:ring-action"
                   />
                 </div>
 
@@ -170,7 +170,7 @@ export default function ContactPage() {
                     name="company"
                     value={formState.company}
                     onChange={handleChange}
-                    className="w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-openai-green focus:outline-none focus:ring-1 focus:ring-openai-green"
+                    className="w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-action focus:outline-none focus:ring-1 focus:ring-action"
                   />
                 </div>
 
@@ -185,14 +185,14 @@ export default function ContactPage() {
                     required
                     value={formState.message}
                     onChange={handleChange}
-                    className="w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-openai-green focus:outline-none focus:ring-1 focus:ring-openai-green"
+                    className="w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-action focus:outline-none focus:ring-1 focus:ring-action"
                   />
                 </div>
 
                 <button
                   type="submit"
                   disabled={isSubmitting}
-                  className="w-full rounded-md bg-openai-green px-4 py-2 text-sm font-medium text-white hover:bg-opacity-90 transition-opacity disabled:bg-opacity-70"
+                  className="w-full rounded-md bg-action px-4 py-2 text-sm font-medium text-white hover:bg-opacity-90 transition-opacity disabled:bg-opacity-70"
                 >
                   {isSubmitting ? 'Sending...' : 'Send Message'}
                 </button>
diff --git a/app/globals.css b/app/globals.css
index fa791113b..07b31944f 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -2,14 +2,57 @@
 @tailwind components;
 @tailwind utilities;
 
+/*
+ * ============================================================================
+ * BOTSMANN DESIGN TOKENS — SINGLE SOURCE OF TRUTH
+ * ============================================================================
+ * Identity: serious, credible AI professionals — counsel you'd trust, not a
+ * toy chatbot. Editorial ink + one authoritative warm accent (notarial ochre).
+ * No generic "AI gradient" blue/purple. Typography (serif display) carries it.
+ *
+ * Every color/radius/shadow used in the product is defined HERE. tailwind.config
+ * maps utilities to these vars; components consume semantic classes only.
+ * Retheme = edit this block. Nothing else.
+ */
 :root {
-  --foreground-rgb: 0, 0, 0;
-  --background-rgb: 255, 255, 255;
+  /* Tier 1 — Primitive palette (raw values; never used directly by components) */
+  --primitive-ink-950: #1a1714; /* near-black warm ink — text & wordmark */
+  --primitive-ink-700: #4a423b;
+  --primitive-ink-500: #6f655c; /* muted body copy */
+  --primitive-ochre-600: #b45309; /* authoritative warm accent */
+  --primitive-ochre-700: #92400e; /* accent hover / pressed */
+  --primitive-ochre-50: #fdf6ec; /* accent tint surface */
+  --primitive-paper: #faf8f4; /* warm off-white page */
+  --primitive-surface: #ffffff;
+  --primitive-border: #e8e2d8; /* warm hairline */
+
+  /* Tier 2 — Semantic tokens (what things MEAN — always use these) */
+  --color-brand: var(--primitive-ink-950); /* the Botsmann mark / authority */
+  --color-action: var(--primitive-ochre-600); /* primary CTAs, links, accents */
+  --color-action-hover: var(--primitive-ochre-700);
+  --color-action-tint: var(--primitive-ochre-50);
+  --color-bg: var(--primitive-paper);
+  --color-surface: var(--primitive-surface);
+  --color-border: var(--primitive-border);
+  --color-text: var(--primitive-ink-950);
+  --color-text-muted: var(--primitive-ink-500);
+
+  /* Radii — restrained, editorial (not bubbly) */
+  --radius-card: 12px;
+  --radius-btn: 8px;
+
+  /* Shadows — subtle, paper-like (no glassmorphism glow) */
+  --shadow-card: 0 1px 2px rgb(26 23 20 / 0.04), 0 1px 3px rgb(26 23 20 / 0.06);
+  --shadow-card-hover: 0 4px 12px rgb(26 23 20 / 0.08), 0 2px 4px rgb(26 23 20 / 0.06);
+
+  /* Back-compat for any legacy rgb() consumers */
+  --foreground-rgb: 26, 23, 20;
+  --background-rgb: 250, 248, 244;
 }
 
 body {
-  color: rgb(var(--foreground-rgb));
-  background: rgb(var(--background-rgb));
+  color: var(--color-text);
+  background: var(--color-bg);
 }
 
 /* Smooth scrolling for anchor links */
@@ -24,29 +67,30 @@ html {
 }
 
 @layer base {
+  /* Serif display carries the editorial identity for headings & wordmark */
   h1 {
-    @apply text-4xl font-semibold tracking-tight;
+    @apply font-serif text-4xl font-semibold tracking-tight text-ink;
   }
   h2 {
-    @apply text-3xl font-medium tracking-tight;
+    @apply font-serif text-3xl font-semibold tracking-tight text-ink;
   }
   h3 {
-    @apply text-2xl font-medium;
+    @apply text-2xl font-semibold text-ink;
   }
   p {
-    @apply text-gray-600;
+    @apply text-ink-muted;
   }
 }
 
 @layer components {
   .btn-primary {
-    @apply rounded-md bg-green-600 px-4 py-2 text-sm md:text-base font-medium text-white hover:bg-opacity-90 transition-all shadow-sm hover:shadow md:px-5 md:py-2.5 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50;
+    @apply rounded-btn bg-action px-4 py-2 text-sm md:text-base font-medium text-white hover:bg-action-hover transition-colors shadow-card hover:shadow-card-hover md:px-5 md:py-2.5 focus:outline-none focus:ring-2 focus:ring-action focus:ring-opacity-40;
   }
   .btn-secondary {
-    @apply rounded-md border border-gray-200 px-4 py-2 text-sm md:text-base font-medium text-gray-600 hover:bg-gray-50 transition-all shadow-sm hover:shadow-md md:px-5 md:py-2.5 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:ring-opacity-50;
+    @apply rounded-btn border border-edge px-4 py-2 text-sm md:text-base font-medium text-ink hover:bg-action-tint transition-colors shadow-card hover:shadow-card-hover md:px-5 md:py-2.5 focus:outline-none focus:ring-2 focus:ring-action focus:ring-opacity-20;
   }
   .input-primary {
-    @apply w-full rounded-xl border-2 border-gray-200 bg-transparent px-4 py-3 text-gray-900 outline-none transition-colors focus:border-green-600 focus:ring-2 focus:ring-green-100;
+    @apply w-full rounded-btn border border-edge bg-surface px-4 py-3 text-ink outline-none transition-colors focus:border-action focus:ring-2 focus:ring-action focus:ring-opacity-20;
   }
 }
 
diff --git a/app/layout.tsx b/app/layout.tsx
index 83e73b445..5af72959b 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -5,16 +5,34 @@ import { site } from '@/lib/site';
 import './globals.css';
 import { Toaster } from 'sonner';
 import { Analytics } from '@vercel/analytics/react';
+import { Inter, Fraunces } from 'next/font/google';
+
+// Brand typeface: a serif display (Fraunces) carries the editorial / "real
+// counsel" identity for headings & wordmark; Inter handles UI/body copy.
+// Bound to CSS vars consumed by tailwind.config (font-serif / font-sans).
+const sans = Inter({
+  subsets: ['latin'],
+  variable: '--font-sans',
+  display: 'swap',
+});
+
+const serif = Fraunces({
+  subsets: ['latin'],
+  weight: ['400', '500', '600', '700'],
+  style: ['normal', 'italic'],
+  variable: '--font-serif',
+  display: 'swap',
+});
 
 export const metadata = {
-  title: `${site.name} - ${site.tagline}`,
+  title: `${site.name} — ${site.tagline}`,
   description: site.description,
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en">
-      <body className="font-sans">
+    <html lang="en" className={`${sans.variable} ${serif.variable}`}>
+      <body className="bg-paper font-sans text-ink">
         <Providers>
           <Header />
           <main className="pt-16">{children}</main>
diff --git a/app/page.tsx b/app/page.tsx
index 9feaecf93..cd15df2c5 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -7,99 +7,82 @@ import { EnterpriseSection } from '@/components/shared/EnterpriseSection';
 
 export default function HomePage() {
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50">
-      {/* Background Effects */}
-      <div className="absolute inset-0 overflow-hidden pointer-events-none">
-        <div className="absolute -top-40 -right-40 w-80 h-80 bg-gradient-to-br from-blue-400 to-purple-600 rounded-full opacity-10 blur-3xl" />
-        <div className="absolute -bottom-40 -left-40 w-96 h-96 bg-gradient-to-tr from-cyan-400 to-blue-600 rounded-full opacity-10 blur-3xl" />
-      </div>
-
+    <div className="min-h-screen bg-paper">
       <main className="relative max-w-screen-xl mx-auto px-6 py-20">
         {/* Hero Section */}
-        <section className="text-center mb-20 pt-8">
-          <div className="inline-flex items-center gap-2 bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-medium mb-8">
-            <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
-            <span>Free to try - No credit card required</span>
+        <section className="text-center mb-24 pt-8">
+          <div className="inline-flex items-center gap-2 border border-edge bg-surface text-ink-muted px-4 py-1.5 rounded-full text-sm font-medium mb-8">
+            <span className="w-1.5 h-1.5 bg-action rounded-full" />
+            <span>Free to try — no credit card required</span>
           </div>
 
-          <h1 className="text-5xl md:text-7xl font-bold mb-8 leading-tight">
-            <span className="bg-gradient-to-r from-gray-900 via-blue-900 to-purple-900 bg-clip-text text-transparent">
-              Your Private
-            </span>
+          <h1 className="font-serif text-5xl md:text-7xl font-semibold mb-8 leading-[1.05] tracking-tight text-ink">
+            Your Private
             <br />
-            <span className="bg-gradient-to-r from-blue-600 via-purple-600 to-cyan-600 bg-clip-text text-transparent">
-              AI Professionals
-            </span>
+            <span className="text-action italic">AI Professionals</span>
           </h1>
 
-          <p className="text-xl md:text-2xl text-gray-600 mb-12 max-w-3xl mx-auto leading-relaxed">
-            Expert advice from AI doctors, lawyers, and advisors.
-            <span className="block mt-2 text-lg text-gray-500">
-              Available 24/7. Completely private. A fraction of the cost.
+          <p className="text-xl md:text-2xl text-ink-muted mb-12 max-w-2xl mx-auto leading-relaxed font-sans">
+            Considered counsel from AI specialists in law, health, research and more.
+            <span className="block mt-2 text-lg">
+              Available around the clock. Wholly private. At a fraction of the cost.
             </span>
           </p>
 
           <div className="flex flex-col sm:flex-row justify-center gap-4 mb-16">
             <Link
               href="/try"
-              className="group relative bg-gradient-to-r from-blue-600 to-purple-600 text-white px-8 py-4 rounded-xl text-lg font-semibold shadow-xl hover:shadow-2xl transform hover:scale-105 transition-all duration-300"
+              className="group inline-flex items-center justify-center gap-2 bg-action text-white px-8 py-4 rounded-btn text-lg font-semibold shadow-card hover:bg-action-hover hover:shadow-card-hover transition-colors"
             >
-              <span className="flex items-center justify-center gap-2">
-                Try Now - Free
-                <svg
-                  className="w-5 h-5 group-hover:translate-x-1 transition-transform"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M13 7l5 5m0 0l-5 5m5-5H6"
-                  />
-                </svg>
-              </span>
+              Try Now — Free
+              <svg
+                className="w-5 h-5 group-hover:translate-x-1 transition-transform"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M13 7l5 5m0 0l-5 5m5-5H6"
+                />
+              </svg>
             </Link>
             <Link
               href="#professionals"
-              className="group border-2 border-gray-300 hover:border-blue-400 px-8 py-4 rounded-xl text-lg font-semibold text-gray-700 hover:text-blue-600 transition-all duration-300"
+              className="group inline-flex items-center justify-center gap-2 border border-edge bg-surface px-8 py-4 rounded-btn text-lg font-semibold text-ink hover:border-action hover:text-action transition-colors"
             >
-              <span className="flex items-center justify-center gap-2">
-                Meet Your Professionals
-                <svg
-                  className="w-5 h-5 group-hover:translate-y-1 transition-transform"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M19 14l-7 7m0 0l-7-7m7 7V3"
-                  />
-                </svg>
-              </span>
+              Meet Your Professionals
+              <svg
+                className="w-5 h-5 group-hover:translate-y-1 transition-transform"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M19 14l-7 7m0 0l-7-7m7 7V3"
+                />
+              </svg>
             </Link>
           </div>
 
           {/* Key Benefits */}
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
-            <div className="bg-white/70 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-gray-100">
-              <div className="text-3xl mb-3">🔒</div>
-              <div className="font-semibold text-gray-900">Complete Privacy</div>
-              <div className="text-sm text-gray-500">Your data never leaves your control</div>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-px bg-edge rounded-card overflow-hidden border border-edge max-w-4xl mx-auto">
+            <div className="bg-surface p-6 text-left">
+              <div className="font-serif font-semibold text-ink mb-1">Complete privacy</div>
+              <div className="text-sm text-ink-muted">Your data never leaves your control.</div>
             </div>
-            <div className="bg-white/70 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-gray-100">
-              <div className="text-3xl mb-3">⏰</div>
-              <div className="font-semibold text-gray-900">24/7 Access</div>
-              <div className="text-sm text-gray-500">Expert guidance whenever you need it</div>
+            <div className="bg-surface p-6 text-left">
+              <div className="font-serif font-semibold text-ink mb-1">Always available</div>
+              <div className="text-sm text-ink-muted">Expert guidance whenever you need it.</div>
             </div>
-            <div className="bg-white/70 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-gray-100">
-              <div className="text-3xl mb-3">📄</div>
-              <div className="font-semibold text-gray-900">Personalized</div>
-              <div className="text-sm text-gray-500">Upload documents for tailored advice</div>
+            <div className="bg-surface p-6 text-left">
+              <div className="font-serif font-semibold text-ink mb-1">Personalised</div>
+              <div className="text-sm text-ink-muted">Upload documents for tailored advice.</div>
             </div>
           </div>
         </section>
@@ -107,12 +90,10 @@ export default function HomePage() {
         {/* Professionals Grid - THE MAIN PRODUCT */}
         <section id="professionals" className="mb-20 scroll-mt-24">
           <div className="text-center mb-12">
-            <h2 className="text-4xl font-bold mb-4">
-              <span className="bg-gradient-to-r from-gray-900 to-gray-600 bg-clip-text text-transparent">
-                Meet Your AI Professionals
-              </span>
+            <h2 className="font-serif text-4xl font-semibold mb-4 text-ink">
+              Meet Your AI Professionals
             </h2>
-            <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+            <p className="text-lg text-ink-muted max-w-2xl mx-auto">
               Choose the expert advisor that matches your needs. Each professional brings
               specialized knowledge and a unique approach.
             </p>
@@ -127,7 +108,7 @@ export default function HomePage() {
           <div className="text-center mt-10">
             <Link
               href="/professionals"
-              className="inline-flex items-center gap-2 text-blue-600 hover:text-blue-700 font-medium"
+              className="inline-flex items-center gap-2 text-action hover:text-action-hover font-medium"
             >
               View All Professionals
               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/app/projects/credit/page.tsx b/app/projects/credit/page.tsx
index 19b26bd0a..07823bba7 100644
--- a/app/projects/credit/page.tsx
+++ b/app/projects/credit/page.tsx
@@ -46,7 +46,7 @@ export default function Credit() {
         <div className="space-y-8">
           <div className="flex gap-8">
             <div className="flex-shrink-0">
-              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-openai-green text-xl font-semibold text-white">
+              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-action text-xl font-semibold text-white">
                 1
               </div>
             </div>
@@ -59,7 +59,7 @@ export default function Credit() {
           </div>
           <div className="flex gap-8">
             <div className="flex-shrink-0">
-              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-openai-green text-xl font-semibold text-white">
+              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-action text-xl font-semibold text-white">
                 2
               </div>
             </div>
@@ -73,7 +73,7 @@ export default function Credit() {
           </div>
           <div className="flex gap-8">
             <div className="flex-shrink-0">
-              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-openai-green text-xl font-semibold text-white">
+              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-action text-xl font-semibold text-white">
                 3
               </div>
             </div>
@@ -94,7 +94,7 @@ export default function Credit() {
         </p>
         <a
           href="/contact"
-          className="inline-flex items-center justify-center rounded-md bg-openai-green px-6 py-3 text-base font-medium text-white hover:bg-opacity-90 transition-opacity"
+          className="inline-flex items-center justify-center rounded-md bg-action px-6 py-3 text-base font-medium text-white hover:bg-opacity-90 transition-opacity"
         >
           Contact Us
         </a>
diff --git a/app/projects/page.tsx b/app/projects/page.tsx
index 02c0c453f..7e5e4ed1f 100644
--- a/app/projects/page.tsx
+++ b/app/projects/page.tsx
@@ -71,7 +71,7 @@ export default function Projects() {
               <div className="p-8">
                 <h2 className="mb-3 text-2xl font-semibold text-gray-900">{project.title}</h2>
                 <p className="text-gray-600">{project.description}</p>
-                <div className="mt-4 flex items-center text-sm font-medium text-openai-green">
+                <div className="mt-4 flex items-center text-sm font-medium text-action">
                   Learn more
                   <svg
                     className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1"
diff --git a/app/projects/shopping/page.tsx b/app/projects/shopping/page.tsx
index a7053a8ca..faa4f3061 100644
--- a/app/projects/shopping/page.tsx
+++ b/app/projects/shopping/page.tsx
@@ -95,13 +95,13 @@ export default function RecurringFulfillment() {
               <input
                 type="text"
                 id="query"
-                className="block w-full rounded-md border-gray-200 px-4 py-2 text-gray-900 shadow-sm focus:border-openai-green focus:ring-openai-green sm:text-sm"
+                className="block w-full rounded-md border-gray-200 px-4 py-2 text-gray-900 shadow-sm focus:border-action focus:ring-action sm:text-sm"
                 placeholder="Type your product or service name"
               />
             </div>
             <button
               type="button"
-              className="inline-flex items-center justify-center rounded-md bg-openai-green px-4 py-2 text-sm font-medium text-white hover:bg-opacity-90"
+              className="inline-flex items-center justify-center rounded-md bg-action px-4 py-2 text-sm font-medium text-white hover:bg-opacity-90"
             >
               Configure My Dashboard
             </button>
@@ -213,14 +213,14 @@ export default function RecurringFulfillment() {
               </ul>
               <button
                 type="button"
-                className="w-full inline-flex items-center justify-center rounded-md bg-openai-green px-4 py-2 text-sm font-medium text-white hover:bg-opacity-90"
+                className="w-full inline-flex items-center justify-center rounded-md bg-action px-4 py-2 text-sm font-medium text-white hover:bg-opacity-90"
               >
                 Get Started
               </button>
             </div>
 
-            <div className="rounded-2xl border-2 border-openai-green bg-white p-8 shadow-md relative">
-              <div className="absolute top-0 right-0 bg-openai-green text-white px-3 py-1 text-xs font-semibold rounded-bl-lg rounded-tr-lg">
+            <div className="rounded-2xl border-2 border-action bg-white p-8 shadow-md relative">
+              <div className="absolute top-0 right-0 bg-action text-white px-3 py-1 text-xs font-semibold rounded-bl-lg rounded-tr-lg">
                 POPULAR
               </div>
               <h3 className="mb-2 text-xl font-semibold text-gray-900">Business</h3>
@@ -237,7 +237,7 @@ export default function RecurringFulfillment() {
               </ul>
               <button
                 type="button"
-                className="w-full inline-flex items-center justify-center rounded-md bg-openai-green px-4 py-2 text-sm font-medium text-white hover:bg-opacity-90"
+                className="w-full inline-flex items-center justify-center rounded-md bg-action px-4 py-2 text-sm font-medium text-white hover:bg-opacity-90"
               >
                 Get Started
               </button>
@@ -257,7 +257,7 @@ export default function RecurringFulfillment() {
               </ul>
               <button
                 type="button"
-                className="w-full inline-flex items-center justify-center rounded-md border border-openai-green bg-white px-4 py-2 text-sm font-medium text-openai-green hover:bg-gray-50"
+                className="w-full inline-flex items-center justify-center rounded-md border border-action bg-white px-4 py-2 text-sm font-medium text-action hover:bg-gray-50"
               >
                 Contact Sales
               </button>
@@ -297,7 +297,7 @@ export default function RecurringFulfillment() {
             </p>
             <Link
               href="/about"
-              className="inline-flex items-center justify-center rounded-md bg-openai-green px-4 py-2 text-sm font-medium text-white hover:bg-opacity-90"
+              className="inline-flex items-center justify-center rounded-md bg-action px-4 py-2 text-sm font-medium text-white hover:bg-opacity-90"
             >
               Contact Us
             </Link>
diff --git a/app/projects/techno-capital/page.tsx b/app/projects/techno-capital/page.tsx
index 17ea95be3..c91ec6c6b 100644
--- a/app/projects/techno-capital/page.tsx
+++ b/app/projects/techno-capital/page.tsx
@@ -30,7 +30,7 @@ export default function TechnoCapital() {
         {/* Title and Overview */}
         <div className="mb-16">
           <div className="flex items-center gap-2 mb-4">
-            <span className="inline-block bg-openai-green text-white text-xs font-medium px-2 py-1 rounded">
+            <span className="inline-block bg-action text-white text-xs font-medium px-2 py-1 rounded">
               Coming Soon
             </span>
             <span className="text-sm text-gray-500">Investment fund launching 2026</span>
@@ -51,7 +51,7 @@ export default function TechnoCapital() {
             <ul className="space-y-4">
               <li className="flex items-start">
                 <svg
-                  className="mr-3 h-5 w-5 flex-shrink-0 text-openai-green"
+                  className="mr-3 h-5 w-5 flex-shrink-0 text-action"
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
@@ -69,7 +69,7 @@ export default function TechnoCapital() {
               </li>
               <li className="flex items-start">
                 <svg
-                  className="mr-3 h-5 w-5 flex-shrink-0 text-openai-green"
+                  className="mr-3 h-5 w-5 flex-shrink-0 text-action"
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
@@ -87,7 +87,7 @@ export default function TechnoCapital() {
               </li>
               <li className="flex items-start">
                 <svg
-                  className="mr-3 h-5 w-5 flex-shrink-0 text-openai-green"
+                  className="mr-3 h-5 w-5 flex-shrink-0 text-action"
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
@@ -105,7 +105,7 @@ export default function TechnoCapital() {
               </li>
               <li className="flex items-start">
                 <svg
-                  className="mr-3 h-5 w-5 flex-shrink-0 text-openai-green"
+                  className="mr-3 h-5 w-5 flex-shrink-0 text-action"
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
@@ -150,7 +150,7 @@ export default function TechnoCapital() {
           <h2 className="mb-8 text-3xl font-semibold text-gray-900">SubSpace Capital</h2>
           <div className="rounded-xl border border-gray-200 bg-white p-8 shadow-sm">
             <div className="flex items-center mb-6">
-              <div className="h-12 w-12 bg-openai-green rounded-full flex items-center justify-center text-white mr-4">
+              <div className="h-12 w-12 bg-action rounded-full flex items-center justify-center text-white mr-4">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   className="h-6 w-6"
@@ -182,7 +182,7 @@ export default function TechnoCapital() {
                 <ul className="space-y-2 text-gray-600">
                   <li className="flex items-start">
                     <svg
-                      className="mr-3 h-5 w-5 flex-shrink-0 text-openai-green"
+                      className="mr-3 h-5 w-5 flex-shrink-0 text-action"
                       fill="none"
                       viewBox="0 0 24 24"
                       stroke="currentColor"
@@ -198,7 +198,7 @@ export default function TechnoCapital() {
                   </li>
                   <li className="flex items-start">
                     <svg
-                      className="mr-3 h-5 w-5 flex-shrink-0 text-openai-green"
+                      className="mr-3 h-5 w-5 flex-shrink-0 text-action"
                       fill="none"
                       viewBox="0 0 24 24"
                       stroke="currentColor"
@@ -214,7 +214,7 @@ export default function TechnoCapital() {
                   </li>
                   <li className="flex items-start">
                     <svg
-                      className="mr-3 h-5 w-5 flex-shrink-0 text-openai-green"
+                      className="mr-3 h-5 w-5 flex-shrink-0 text-action"
                       fill="none"
                       viewBox="0 0 24 24"
                       stroke="currentColor"
@@ -236,7 +236,7 @@ export default function TechnoCapital() {
                 <ul className="space-y-2 text-gray-600">
                   <li className="flex items-start">
                     <svg
-                      className="mr-3 h-5 w-5 flex-shrink-0 text-openai-green"
+                      className="mr-3 h-5 w-5 flex-shrink-0 text-action"
                       fill="none"
                       viewBox="0 0 24 24"
                       stroke="currentColor"
@@ -252,7 +252,7 @@ export default function TechnoCapital() {
                   </li>
                   <li className="flex items-start">
                     <svg
-                      className="mr-3 h-5 w-5 flex-shrink-0 text-openai-green"
+                      className="mr-3 h-5 w-5 flex-shrink-0 text-action"
                       fill="none"
                       viewBox="0 0 24 24"
                       stroke="currentColor"
@@ -268,7 +268,7 @@ export default function TechnoCapital() {
                   </li>
                   <li className="flex items-start">
                     <svg
-                      className="mr-3 h-5 w-5 flex-shrink-0 text-openai-green"
+                      className="mr-3 h-5 w-5 flex-shrink-0 text-action"
                       fill="none"
                       viewBox="0 0 24 24"
                       stroke="currentColor"
@@ -302,7 +302,7 @@ export default function TechnoCapital() {
           <div className="rounded-xl border border-gray-200 bg-white p-8 shadow-sm">
             <ol className="space-y-4">
               <li className="flex items-start">
-                <div className="mr-4 flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-openai-green text-white">
+                <div className="mr-4 flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-action text-white">
                   1
                 </div>
                 <div>
@@ -314,7 +314,7 @@ export default function TechnoCapital() {
                 </div>
               </li>
               <li className="flex items-start">
-                <div className="mr-4 flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-openai-green text-white">
+                <div className="mr-4 flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-action text-white">
                   2
                 </div>
                 <div>
@@ -326,7 +326,7 @@ export default function TechnoCapital() {
                 </div>
               </li>
               <li className="flex items-start">
-                <div className="mr-4 flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-openai-green text-white">
+                <div className="mr-4 flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-action text-white">
                   3
                 </div>
                 <div>
@@ -347,7 +347,7 @@ export default function TechnoCapital() {
               <ul className="space-y-2 text-gray-600">
                 <li className="flex items-start">
                   <svg
-                    className="mr-3 h-5 w-5 flex-shrink-0 text-openai-green"
+                    className="mr-3 h-5 w-5 flex-shrink-0 text-action"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke="currentColor"
@@ -363,7 +363,7 @@ export default function TechnoCapital() {
                 </li>
                 <li className="flex items-start">
                   <svg
-                    className="mr-3 h-5 w-5 flex-shrink-0 text-openai-green"
+                    className="mr-3 h-5 w-5 flex-shrink-0 text-action"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke="currentColor"
@@ -394,7 +394,7 @@ export default function TechnoCapital() {
             {formSubmitted ? (
               <div className="max-w-md mx-auto bg-green-50 border border-green-200 rounded-md p-4 text-center">
                 <svg
-                  className="w-16 h-16 text-openai-green mx-auto mb-4"
+                  className="w-16 h-16 text-action mx-auto mb-4"
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
@@ -467,7 +467,7 @@ export default function TechnoCapital() {
                 <button
                   type="submit"
                   disabled={submitting}
-                  className={`w-full inline-flex items-center justify-center rounded-md bg-openai-green px-6 py-3 text-base font-medium text-white ${submitting ? 'opacity-50 cursor-not-allowed' : 'hover:bg-opacity-90'} transition-opacity`}
+                  className={`w-full inline-flex items-center justify-center rounded-md bg-action px-6 py-3 text-base font-medium text-white ${submitting ? 'opacity-50 cursor-not-allowed' : 'hover:bg-opacity-90'} transition-opacity`}
                 >
                   {submitting ? 'Submitting...' : 'Join Waitlist'}
                 </button>
diff --git a/app/solutions/page.tsx b/app/solutions/page.tsx
index 8d88fbc22..2b2e52513 100644
--- a/app/solutions/page.tsx
+++ b/app/solutions/page.tsx
@@ -38,7 +38,7 @@ export default function SolutionsPage() {
             </p>
             <Link
               href="/solutions/individuals"
-              className="mt-auto inline-flex items-center font-medium text-openai-green hover:underline"
+              className="mt-auto inline-flex items-center font-medium text-action hover:underline"
             >
               Learn more
               <svg className="ml-1 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -55,7 +55,7 @@ export default function SolutionsPage() {
 
         {/* Businesses */}
         <div className="group flex flex-col overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm transition-all hover:shadow-md relative">
-          <span className="absolute right-4 top-4 z-10 inline-block bg-openai-green text-white text-xs font-medium px-2 py-1 rounded">
+          <span className="absolute right-4 top-4 z-10 inline-block bg-action text-white text-xs font-medium px-2 py-1 rounded">
             Coming Soon
           </span>
           <div className="relative h-48 w-full overflow-hidden bg-gray-200">
@@ -71,7 +71,7 @@ export default function SolutionsPage() {
             </p>
             <Link
               href="/solutions/businesses"
-              className="mt-auto inline-flex items-center font-medium text-openai-green hover:underline"
+              className="mt-auto inline-flex items-center font-medium text-action hover:underline"
             >
               Learn more
               <svg className="ml-1 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -88,7 +88,7 @@ export default function SolutionsPage() {
 
         {/* Governments */}
         <div className="group flex flex-col overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm transition-all hover:shadow-md relative">
-          <span className="absolute right-4 top-4 z-10 inline-block bg-openai-green text-white text-xs font-medium px-2 py-1 rounded">
+          <span className="absolute right-4 top-4 z-10 inline-block bg-action text-white text-xs font-medium px-2 py-1 rounded">
             Coming Soon
           </span>
           <div className="relative h-48 w-full overflow-hidden bg-gray-200">
@@ -104,7 +104,7 @@ export default function SolutionsPage() {
             </p>
             <Link
               href="/solutions/governments"
-              className="mt-auto inline-flex items-center font-medium text-openai-green hover:underline"
+              className="mt-auto inline-flex items-center font-medium text-action hover:underline"
             >
               Learn more
               <svg className="ml-1 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -131,7 +131,7 @@ export default function SolutionsPage() {
               className="group flex h-full flex-col rounded-xl border border-gray-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md relative"
             >
               {solution.slug !== 'swiss-german-teacher' && (
-                <span className="absolute right-4 top-4 inline-block bg-openai-green text-white text-xs font-medium px-2 py-1 rounded">
+                <span className="absolute right-4 top-4 inline-block bg-action text-white text-xs font-medium px-2 py-1 rounded">
                   Coming Soon
                 </span>
               )}
@@ -139,7 +139,7 @@ export default function SolutionsPage() {
                 <h2 className="mb-2 text-xl font-semibold text-gray-900">{solution.title}</h2>
                 <p className="mb-4 text-gray-600 min-h-[3rem]">{solution.overview}</p>
               </div>
-              <span className="text-sm font-medium text-openai-green group-hover:underline mt-auto">
+              <span className="text-sm font-medium text-action group-hover:underline mt-auto">
                 Learn more →
               </span>
             </Link>
@@ -158,7 +158,7 @@ export default function SolutionsPage() {
         </p>
         <Link
           href="/contact"
-          className="rounded-md bg-openai-green px-6 py-3 text-base font-medium text-white hover:bg-opacity-90 transition-opacity"
+          className="rounded-md bg-action px-6 py-3 text-base font-medium text-white hover:bg-opacity-90 transition-opacity"
         >
           Get in Touch
         </Link>
diff --git a/components/ConsultationForm.tsx b/components/ConsultationForm.tsx
index fbcc00ef5..c26daa037 100644
--- a/components/ConsultationForm.tsx
+++ b/components/ConsultationForm.tsx
@@ -81,7 +81,7 @@ export default function ConsultationForm() {
           </p>
           <button
             onClick={() => setSubmitSuccess(false)}
-            className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-openai-green hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-openai-green"
+            className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-action hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-action"
           >
             Submit another response
           </button>
@@ -103,7 +103,7 @@ export default function ConsultationForm() {
               {...register('name', { required: 'Name is required' })}
               type="text"
               id="name"
-              className="mt-1 block w-full rounded-md border-gray-200 bg-white px-3 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-200 placeholder:text-gray-400 focus:ring-2 focus:ring-openai-green sm:text-sm"
+              className="mt-1 block w-full rounded-md border-gray-200 bg-white px-3 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-200 placeholder:text-gray-400 focus:ring-2 focus:ring-action sm:text-sm"
             />
             {errors.name && <p className="mt-1 text-sm text-red-600">{errors.name.message}</p>}
           </div>
@@ -122,7 +122,7 @@ export default function ConsultationForm() {
               })}
               type="email"
               id="email"
-              className="mt-1 block w-full rounded-md border-gray-200 bg-white px-3 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-200 placeholder:text-gray-400 focus:ring-2 focus:ring-openai-green sm:text-sm"
+              className="mt-1 block w-full rounded-md border-gray-200 bg-white px-3 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-200 placeholder:text-gray-400 focus:ring-2 focus:ring-action sm:text-sm"
             />
             {errors.email && <p className="mt-1 text-sm text-red-600">{errors.email.message}</p>}
           </div>
@@ -135,7 +135,7 @@ export default function ConsultationForm() {
           <select
             {...register('expertise', { required: 'Please select an area of expertise' })}
             id="expertise"
-            className="mt-1 block w-full rounded-md border-gray-200 bg-white px-3 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-200 focus:ring-2 focus:ring-openai-green sm:text-sm"
+            className="mt-1 block w-full rounded-md border-gray-200 bg-white px-3 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-200 focus:ring-2 focus:ring-action sm:text-sm"
           >
             <option value="">Select your expertise</option>
             <option value="engineering">Software Engineering</option>
@@ -160,7 +160,7 @@ export default function ConsultationForm() {
             rows={4}
             id="message"
             placeholder="Describe your interests and how you'd like to contribute..."
-            className="mt-1 block w-full rounded-md border-gray-200 bg-white px-3 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-200 placeholder:text-gray-400 focus:ring-2 focus:ring-openai-green sm:text-sm"
+            className="mt-1 block w-full rounded-md border-gray-200 bg-white px-3 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-200 placeholder:text-gray-400 focus:ring-2 focus:ring-action sm:text-sm"
           />
           {errors.message && <p className="mt-1 text-sm text-red-600">{errors.message.message}</p>}
         </div>
@@ -174,7 +174,7 @@ export default function ConsultationForm() {
         <button
           type="submit"
           disabled={isSubmitting}
-          className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-openai-green hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-openai-green disabled:opacity-50"
+          className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-action hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-action disabled:opacity-50"
         >
           {isSubmitting ? 'Submitting...' : 'Join the Community'}
         </button>
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 4e4275c83..3cec6eafe 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -35,7 +35,7 @@ export function Footer() {
                   <li key={bot.slug}>
                     <Link
                       href={`/bots/${bot.slug}`}
-                      className="hover:text-blue-600 transition-colors"
+                      className="hover:text-action transition-colors"
                     >
                       {bot.nav!.navTitle} ({category})
                     </Link>
@@ -50,22 +50,22 @@ export function Footer() {
           <h2 className="mb-4 font-semibold text-gray-800">Product</h2>
           <ul className="space-y-2 text-gray-600">
             <li>
-              <Link href={ROUTES.PROFESSIONALS} className="hover:text-blue-600 transition-colors">
+              <Link href={ROUTES.PROFESSIONALS} className="hover:text-action transition-colors">
                 All Professionals
               </Link>
             </li>
             <li>
-              <Link href={ROUTES.MY_DATA} className="hover:text-blue-600 transition-colors">
+              <Link href={ROUTES.MY_DATA} className="hover:text-action transition-colors">
                 My Data
               </Link>
             </li>
             <li>
-              <Link href={ROUTES.ENTERPRISE} className="hover:text-blue-600 transition-colors">
+              <Link href={ROUTES.ENTERPRISE} className="hover:text-action transition-colors">
                 Enterprise
               </Link>
             </li>
             <li>
-              <Link href="/personal" className="hover:text-blue-600 transition-colors">
+              <Link href="/personal" className="hover:text-action transition-colors">
                 Personal AI
               </Link>
             </li>
@@ -77,22 +77,22 @@ export function Footer() {
           <h2 className="mb-4 font-semibold text-gray-800">Resources</h2>
           <ul className="space-y-2 text-gray-600">
             <li>
-              <Link href="/knowledge" className="hover:text-blue-600 transition-colors">
+              <Link href="/knowledge" className="hover:text-action transition-colors">
                 Knowledge Base
               </Link>
             </li>
             <li>
-              <Link href={ROUTES.BLOG} className="hover:text-blue-600 transition-colors">
+              <Link href={ROUTES.BLOG} className="hover:text-action transition-colors">
                 Blog
               </Link>
             </li>
             <li>
-              <Link href="/about" className="hover:text-blue-600 transition-colors">
+              <Link href="/about" className="hover:text-action transition-colors">
                 About
               </Link>
             </li>
             <li>
-              <Link href={ROUTES.CONTACT} className="hover:text-blue-600 transition-colors">
+              <Link href={ROUTES.CONTACT} className="hover:text-action transition-colors">
                 Contact
               </Link>
             </li>
@@ -108,7 +108,7 @@ export function Footer() {
                 href={site.social.github}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="flex items-center gap-2 hover:text-blue-600 transition-colors"
+                className="flex items-center gap-2 hover:text-action transition-colors"
               >
                 <FaGithub className="text-lg" /> GitHub
               </a>
@@ -118,7 +118,7 @@ export function Footer() {
                 href={site.social.twitter}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="flex items-center gap-2 hover:text-blue-600 transition-colors"
+                className="flex items-center gap-2 hover:text-action transition-colors"
               >
                 <FaTwitter className="text-lg" /> Twitter
               </a>
diff --git a/components/Header.tsx b/components/Header.tsx
index 2daef0e13..4fe294910 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -17,7 +17,7 @@ export function Header() {
   if (isImmersivePage(pathname)) return null;
 
   return (
-    <header className="fixed top-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-2xl border-b border-gray-100/50 shadow-sm">
+    <header className="fixed top-0 left-0 right-0 z-50 bg-paper/90 backdrop-blur-sm border-b border-edge">
       <div className="mx-auto max-w-screen-xl">
         <div className="flex h-16 items-center justify-between px-6">
           <div className="flex-shrink-0">
diff --git a/components/TableOfContents.tsx b/components/TableOfContents.tsx
index da2f8474a..a34c2397f 100644
--- a/components/TableOfContents.tsx
+++ b/components/TableOfContents.tsx
@@ -80,7 +80,7 @@ export default function TableOfContents({ items }: TableOfContentsProps) {
               }}
               className={`text-sm ${
                 activeId === item.id
-                  ? 'font-semibold text-openai-green'
+                  ? 'font-semibold text-action'
                   : 'text-gray-600 hover:text-gray-900'
               } ${level === 0 ? 'font-medium' : ''}`}
               aria-label={`Navigate to ${item.label} section`}
diff --git a/components/blog/MDXComponents.tsx b/components/blog/MDXComponents.tsx
index 2a93bef58..f628719b8 100644
--- a/components/blog/MDXComponents.tsx
+++ b/components/blog/MDXComponents.tsx
@@ -193,7 +193,7 @@ const MDXComponents = {
       return (
         <a
           href={href}
-          className="text-openai-green hover:text-opacity-80"
+          className="text-action hover:text-opacity-80"
           target="_blank"
           rel="noopener noreferrer"
           {...props}
@@ -204,7 +204,7 @@ const MDXComponents = {
     return (
       <Link
         href={(href || '/') as Route}
-        className="text-openai-green hover:text-opacity-80"
+        className="text-action hover:text-opacity-80"
         {...props}
       />
     );
diff --git a/components/blog/ServerMDXContent.tsx b/components/blog/ServerMDXContent.tsx
index 0393ee492..2a4259c7b 100644
--- a/components/blog/ServerMDXContent.tsx
+++ b/components/blog/ServerMDXContent.tsx
@@ -67,7 +67,7 @@ const ServerMDXComponents = {
       return (
         <a
           href={href}
-          className="text-openai-green hover:text-opacity-80"
+          className="text-action hover:text-opacity-80"
           target="_blank"
           rel="noopener noreferrer"
           {...props}
@@ -78,7 +78,7 @@ const ServerMDXComponents = {
     return (
       <Link
         href={(href || '/') as Route}
-        className="text-openai-green hover:text-opacity-80"
+        className="text-action hover:text-opacity-80"
         {...props}
       />
     );
diff --git a/components/navigation/MobileNav.tsx b/components/navigation/MobileNav.tsx
index 85efb13d7..da8976e9c 100644
--- a/components/navigation/MobileNav.tsx
+++ b/components/navigation/MobileNav.tsx
@@ -53,7 +53,7 @@ export function MobileNav({ isOpen, onClose, items, currentPath }: MobileNavProp
                 <Dialog.Panel className="pointer-events-auto w-screen max-w-md">
                   <div className="flex h-full flex-col overflow-y-scroll bg-white shadow-xl">
                     {/* Header */}
-                    <div className="flex items-center justify-between px-4 py-6 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-purple-50">
+                    <div className="flex items-center justify-between px-4 py-6 border-b border-edge bg-action-tint">
                       <div className="flex items-center gap-3">
                         <Logo href={null} showText={false} size="sm" />
                         <Dialog.Title className="text-lg font-semibold text-gray-900">
@@ -78,11 +78,11 @@ export function MobileNav({ isOpen, onClose, items, currentPath }: MobileNavProp
                             {/* Parent Item */}
                             <Link
                               href={item.path}
-                              className={`flex items-center px-3 py-2 rounded-md text-base font-medium transition-colors ${
+                              className={`flex items-center px-3 py-2 rounded-btn text-base font-medium transition-colors ${
                                 currentPath === item.path
-                                  ? 'bg-blue-50 text-blue-600'
-                                  : 'text-gray-700 hover:bg-gray-100'
-                              } ${item.isButton ? 'bg-gradient-to-r from-blue-600 to-purple-600 text-white hover:opacity-90' : ''}`}
+                                  ? 'bg-action-tint text-action'
+                                  : 'text-ink hover:bg-action-tint'
+                              } ${item.isButton ? 'bg-action text-white hover:bg-action-hover' : ''}`}
                               onClick={onClose}
                             >
                               {item.label}
@@ -160,7 +160,7 @@ export function MobileNav({ isOpen, onClose, items, currentPath }: MobileNavProp
                           </Link>
                           <Link
                             href="/auth/signup"
-                            className="flex-1 text-center px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg hover:opacity-90"
+                            className="flex-1 text-center px-4 py-2 text-sm font-medium text-white bg-action rounded-btn hover:bg-action-hover"
                             onClick={onClose}
                           >
                             Register
diff --git a/components/navigation/NavItem.tsx b/components/navigation/NavItem.tsx
index 2f02a5d7c..33e2a7b75 100644
--- a/components/navigation/NavItem.tsx
+++ b/components/navigation/NavItem.tsx
@@ -35,7 +35,7 @@ export function NavItem({ item, isActive, onNavigate }: NavItemProps) {
     return (
       <Link
         href={item.path}
-        className="rounded-md bg-gradient-to-r from-blue-600 to-purple-600 px-4 py-2 text-sm font-medium text-white hover:opacity-90 transition-opacity"
+        className="rounded-btn bg-action px-4 py-2 text-sm font-medium text-white hover:bg-action-hover transition-colors"
       >
         {item.label}
       </Link>
diff --git a/components/navigation/NextSection.tsx b/components/navigation/NextSection.tsx
index fd11d6f2e..3c892f21b 100644
--- a/components/navigation/NextSection.tsx
+++ b/components/navigation/NextSection.tsx
@@ -15,7 +15,7 @@ export function NextSection({ nextPage, title, description }: NextSectionProps)
       <h2 className="mb-4 text-2xl font-semibold">Continue Your Journey</h2>
       <Link href={{ pathname: nextPage }}>
         <div className="rounded-lg p-6 hover:bg-gray-50 transition-colors duration-200">
-          <h3 className="mb-2 text-xl font-medium text-openai-green">{title}</h3>
+          <h3 className="mb-2 text-xl font-medium text-action">{title}</h3>
           <p className="text-gray-600">{description}</p>
         </div>
       </Link>
diff --git a/components/shared/EnterpriseSection.tsx b/components/shared/EnterpriseSection.tsx
index 9bb2321d9..59fbe0002 100644
--- a/components/shared/EnterpriseSection.tsx
+++ b/components/shared/EnterpriseSection.tsx
@@ -8,23 +8,17 @@ import Link from 'next/link';
 export const EnterpriseSection: FC = () => {
   return (
     <section className="py-20">
-      <div className="bg-gradient-to-r from-blue-600 via-purple-600 to-blue-700 rounded-3xl p-8 md:p-12 text-white relative overflow-hidden">
-        {/* Background decoration */}
-        <div className="absolute inset-0 opacity-10">
-          <div className="absolute top-0 right-0 w-96 h-96 bg-white rounded-full blur-3xl transform translate-x-1/2 -translate-y-1/2" />
-          <div className="absolute bottom-0 left-0 w-64 h-64 bg-white rounded-full blur-3xl transform -translate-x-1/2 translate-y-1/2" />
-        </div>
-
+      <div className="bg-brand rounded-card p-8 md:p-12 text-paper relative overflow-hidden">
         <div className="relative text-center max-w-3xl mx-auto">
-          <div className="inline-flex items-center gap-2 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full text-sm font-medium mb-6">
-            <span className="w-2 h-2 bg-green-400 rounded-full" />
-            <span>For Law Firms, Medical Practices & Businesses</span>
+          <div className="inline-flex items-center gap-2 border border-white/15 px-4 py-1.5 rounded-full text-sm font-medium mb-6 text-paper/80">
+            <span className="w-1.5 h-1.5 bg-action rounded-full" />
+            <span>For Law Firms, Medical Practices &amp; Businesses</span>
           </div>
 
-          <h2 className="text-3xl md:text-4xl font-bold mb-4">
-            AI Professionals for Your Organization
+          <h2 className="font-serif text-3xl md:text-4xl font-semibold mb-4 text-paper">
+            AI Professionals for Your Organisation
           </h2>
-          <p className="text-lg text-blue-100 mb-8 max-w-2xl mx-auto">
+          <p className="text-lg text-paper/70 mb-8 max-w-2xl mx-auto">
             Deploy private AI assistants on your infrastructure. Full data sovereignty, team
             accounts, custom training, and enterprise-grade security.
           </p>
@@ -32,7 +26,7 @@ export const EnterpriseSection: FC = () => {
           <div className="flex flex-col sm:flex-row justify-center gap-4">
             <Link
               href="/enterprise"
-              className="bg-white text-blue-600 px-8 py-4 rounded-xl font-semibold hover:bg-blue-50 transition-colors inline-flex items-center justify-center gap-2"
+              className="bg-action text-white px-8 py-4 rounded-btn font-semibold hover:bg-action-hover transition-colors inline-flex items-center justify-center gap-2"
             >
               Learn About Enterprise
               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -46,7 +40,7 @@ export const EnterpriseSection: FC = () => {
             </Link>
             <Link
               href="/contact"
-              className="border-2 border-white/50 text-white px-8 py-4 rounded-xl font-semibold hover:bg-white/10 transition-colors inline-flex items-center justify-center gap-2"
+              className="border border-white/30 text-paper px-8 py-4 rounded-btn font-semibold hover:bg-white/10 transition-colors inline-flex items-center justify-center gap-2"
             >
               Schedule a Demo
               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -61,7 +55,7 @@ export const EnterpriseSection: FC = () => {
           </div>
 
           {/* Trust badges */}
-          <div className="mt-10 flex flex-wrap justify-center gap-6 text-sm text-blue-200">
+          <div className="mt-10 flex flex-wrap justify-center gap-6 text-sm text-paper/60">
             <div className="flex items-center gap-2">
               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path
diff --git a/components/shared/HowItWorks.tsx b/components/shared/HowItWorks.tsx
index 3a959a6a5..41640136c 100644
--- a/components/shared/HowItWorks.tsx
+++ b/components/shared/HowItWorks.tsx
@@ -10,34 +10,27 @@ export const HowItWorks: FC = () => {
       number: 1,
       title: 'Choose Your Professional',
       description:
-        'Select the AI advisor that matches your needs - legal, health, research, language, creative, or business.',
-      gradient: 'from-blue-500 to-purple-600',
+        'Select the AI advisor that matches your needs — legal, health, research, language, creative, or business.',
     },
     {
       number: 2,
       title: 'Ask Your Question',
       description:
         'Chat naturally or upload documents for context. Get expert-level guidance tailored to your situation.',
-      gradient: 'from-purple-500 to-pink-600',
     },
     {
       number: 3,
       title: 'Get Expert Guidance',
       description:
-        'Receive clear, actionable insights instantly. Personalize with your documents for even better results.',
-      gradient: 'from-cyan-500 to-blue-600',
+        'Receive clear, actionable insights instantly. Personalise with your documents for even better results.',
     },
   ];
 
   return (
     <section className="py-20">
       <div className="text-center mb-16">
-        <h2 className="text-4xl font-bold mb-4">
-          <span className="bg-gradient-to-r from-gray-900 to-gray-600 bg-clip-text text-transparent">
-            How It Works
-          </span>
-        </h2>
-        <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+        <h2 className="font-serif text-4xl font-semibold mb-4 text-ink">How It Works</h2>
+        <p className="text-lg text-ink-muted max-w-2xl mx-auto">
           Get expert guidance in three simple steps
         </p>
       </div>
@@ -45,13 +38,11 @@ export const HowItWorks: FC = () => {
       <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
         {steps.map((step) => (
           <div key={step.number} className="text-center">
-            <div
-              className={`w-16 h-16 bg-gradient-to-br ${step.gradient} rounded-2xl flex items-center justify-center text-white text-2xl font-bold mx-auto mb-6 shadow-lg`}
-            >
+            <div className="w-14 h-14 bg-action-tint border border-action/20 rounded-card flex items-center justify-center text-action font-serif text-2xl font-semibold mx-auto mb-6">
               {step.number}
             </div>
-            <h3 className="text-xl font-bold text-gray-900 mb-3">{step.title}</h3>
-            <p className="text-gray-600 leading-relaxed">{step.description}</p>
+            <h3 className="font-serif text-xl font-semibold text-ink mb-3">{step.title}</h3>
+            <p className="text-ink-muted leading-relaxed">{step.description}</p>
           </div>
         ))}
       </div>
@@ -60,10 +51,10 @@ export const HowItWorks: FC = () => {
       <div className="hidden md:block max-w-3xl mx-auto mt-[-160px] mb-[100px]">
         <div className="flex justify-between px-8">
           <div className="w-1/3 flex justify-end pr-8">
-            <div className="w-full h-0.5 bg-gradient-to-r from-transparent via-gray-200 to-gray-200 mt-8" />
+            <div className="w-full h-px bg-edge mt-[1.6rem]" />
           </div>
           <div className="w-1/3 flex justify-start pl-8">
-            <div className="w-full h-0.5 bg-gradient-to-r from-gray-200 via-gray-200 to-transparent mt-8" />
+            <div className="w-full h-px bg-edge mt-[1.6rem]" />
           </div>
         </div>
       </div>
diff --git a/components/shared/Logo.tsx b/components/shared/Logo.tsx
index 9d70e1735..48f78b0b2 100644
--- a/components/shared/Logo.tsx
+++ b/components/shared/Logo.tsx
@@ -32,19 +32,14 @@ export const Logo: FC<LogoProps> = ({ href = '/' as Route, showText = true, size
   const sizes = sizeClasses[size];
 
   const logoContent = (
-    <div className="group flex items-center space-x-3">
-      <div className="relative">
-        <div className="absolute inset-0 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg blur opacity-20 group-hover:opacity-30 transition-opacity" />
-        <div
-          className={`relative bg-gradient-to-r from-blue-600 to-purple-600 text-white font-bold ${sizes.icon} rounded-lg shadow-lg`}
-        >
-          B
-        </div>
+    <div className="group flex items-center space-x-2.5">
+      <div
+        className={`relative bg-brand text-paper font-serif font-semibold ${sizes.icon} rounded-btn`}
+      >
+        B
       </div>
       {showText && (
-        <span
-          className={`${sizes.text} font-bold bg-gradient-to-r from-gray-900 to-gray-600 bg-clip-text text-transparent`}
-        >
+        <span className={`${sizes.text} font-serif font-semibold tracking-tight text-ink`}>
           Botsmann
         </span>
       )}
diff --git a/components/shared/PrivacySection.tsx b/components/shared/PrivacySection.tsx
index 3676f0690..d8685580b 100644
--- a/components/shared/PrivacySection.tsx
+++ b/components/shared/PrivacySection.tsx
@@ -8,12 +8,7 @@ export const PrivacySection: FC = () => {
   const features = [
     {
       icon: (
-        <svg
-          className="w-6 h-6 text-green-600"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
+        <svg className="w-6 h-6 text-action" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path
             strokeLinecap="round"
             strokeLinejoin="round"
@@ -22,19 +17,14 @@ export const PrivacySection: FC = () => {
           />
         </svg>
       ),
-      iconBg: 'bg-green-100',
+      iconBg: 'bg-action-tint',
       title: 'End-to-End Encryption',
       description:
         'Your conversations and documents are encrypted in transit and at rest. We cannot read your data.',
     },
     {
       icon: (
-        <svg
-          className="w-6 h-6 text-blue-600"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
+        <svg className="w-6 h-6 text-action" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path
             strokeLinecap="round"
             strokeLinejoin="round"
@@ -43,19 +33,14 @@ export const PrivacySection: FC = () => {
           />
         </svg>
       ),
-      iconBg: 'bg-blue-100',
+      iconBg: 'bg-action-tint',
       title: 'No Data Training',
       description:
         'Your information is never used to train AI models. Your intellectual property stays yours.',
     },
     {
       icon: (
-        <svg
-          className="w-6 h-6 text-purple-600"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
+        <svg className="w-6 h-6 text-action" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path
             strokeLinecap="round"
             strokeLinejoin="round"
@@ -64,7 +49,7 @@ export const PrivacySection: FC = () => {
           />
         </svg>
       ),
-      iconBg: 'bg-purple-100',
+      iconBg: 'bg-action-tint',
       title: 'You Control Your Data',
       description: 'Delete your data anytime. Export everything. No lock-in, no hidden retention.',
     },
@@ -72,14 +57,12 @@ export const PrivacySection: FC = () => {
 
   return (
     <section className="py-20">
-      <div className="bg-gradient-to-br from-gray-50 to-blue-50 rounded-3xl p-8 md:p-12">
+      <div className="bg-surface border border-edge rounded-card p-8 md:p-12">
         <div className="text-center mb-12">
-          <h2 className="text-3xl md:text-4xl font-bold mb-4">
-            <span className="bg-gradient-to-r from-gray-900 to-gray-600 bg-clip-text text-transparent">
-              Your Data Stays Yours
-            </span>
+          <h2 className="font-serif text-3xl md:text-4xl font-semibold mb-4 text-ink">
+            Your Data Stays Yours
           </h2>
-          <p className="text-gray-600 max-w-2xl mx-auto text-lg">
+          <p className="text-ink-muted max-w-2xl mx-auto text-lg">
             Unlike other AI tools, we built privacy into our foundation. Your conversations are
             confidential, your documents are secure, and you remain in control.
           </p>
@@ -87,17 +70,14 @@ export const PrivacySection: FC = () => {
 
         <div className="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto">
           {features.map((feature) => (
-            <div
-              key={feature.title}
-              className="bg-white rounded-2xl p-6 shadow-md border border-gray-100"
-            >
+            <div key={feature.title} className="bg-paper rounded-card p-6 border border-edge">
               <div
-                className={`w-12 h-12 ${feature.iconBg} rounded-xl flex items-center justify-center mb-4`}
+                className={`w-12 h-12 ${feature.iconBg} rounded-btn flex items-center justify-center mb-4`}
               >
                 {feature.icon}
               </div>
-              <h3 className="font-bold text-gray-900 mb-2">{feature.title}</h3>
-              <p className="text-sm text-gray-600 leading-relaxed">{feature.description}</p>
+              <h3 className="font-serif font-semibold text-ink mb-2">{feature.title}</h3>
+              <p className="text-sm text-ink-muted leading-relaxed">{feature.description}</p>
             </div>
           ))}
         </div>
diff --git a/components/shared/ProfessionalAvatar.tsx b/components/shared/ProfessionalAvatar.tsx
new file mode 100644
index 000000000..281533655
--- /dev/null
+++ b/components/shared/ProfessionalAvatar.tsx
@@ -0,0 +1,36 @@
+import { type FC } from 'react';
+import { type Professional, getAccentColorClasses } from '@/data/professionals';
+
+interface ProfessionalAvatarProps {
+  professional: Professional;
+  /** Tailwind size classes for the badge box (e.g. 'w-14 h-14'). */
+  className?: string;
+  /** Tailwind text-size class for the monogram. */
+  textClassName?: string;
+}
+
+/**
+ * Monogram badge for an AI Professional.
+ *
+ * Replaces the emoji avatars (⚖️🩺🔬…) — a single, consistent identity system
+ * built on the existing accentColor SSOT. Reads as a serious credential mark
+ * (initials on a tinted disc), not a toy. Used wherever a professional avatar
+ * appears so the look stays uniform.
+ */
+export const ProfessionalAvatar: FC<ProfessionalAvatarProps> = ({
+  professional,
+  className = 'w-14 h-14',
+  textClassName = 'text-xl',
+}) => {
+  const colors = getAccentColorClasses(professional.accentColor);
+  const monogram = professional.name.charAt(0).toUpperCase();
+
+  return (
+    <div
+      className={`${colors.bgLight} ${className} flex items-center justify-center rounded-card font-serif font-semibold ${colors.text} ${textClassName}`}
+      aria-hidden="true"
+    >
+      {monogram}
+    </div>
+  );
+};
diff --git a/components/shared/ProfessionalCard.tsx b/components/shared/ProfessionalCard.tsx
index 202087703..8b0639576 100644
--- a/components/shared/ProfessionalCard.tsx
+++ b/components/shared/ProfessionalCard.tsx
@@ -7,6 +7,7 @@ import {
   getAccentColorClasses,
   getProfessionalPath,
 } from '@/data/professionals';
+import { ProfessionalAvatar } from './ProfessionalAvatar';
 
 interface ProfessionalCardProps {
   professional: Professional;
@@ -18,7 +19,7 @@ interface ProfessionalCardProps {
  * Used on homepage grid and professionals overview page
  */
 export const ProfessionalCard: FC<ProfessionalCardProps> = ({ professional, size = 'default' }) => {
-  const { slug, name, title, tagline, emoji, accentColor } = professional;
+  const { slug, name, title, tagline, accentColor } = professional;
   const colors = getAccentColorClasses(accentColor);
   const path = getProfessionalPath(slug);
 
@@ -27,29 +28,22 @@ export const ProfessionalCard: FC<ProfessionalCardProps> = ({ professional, size
   return (
     <Link
       href={path}
-      className={`group relative bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden transition-all duration-300 hover:shadow-xl hover:border-gray-200 hover:-translate-y-1 ${
+      className={`group relative bg-surface rounded-card shadow-card border border-edge overflow-hidden transition-all duration-200 hover:shadow-card-hover hover:border-action/40 hover:-translate-y-0.5 ${
         isLarge ? 'p-8' : 'p-6'
       }`}
     >
-      {/* Accent gradient on hover */}
-      <div
-        className={`absolute inset-0 bg-gradient-to-br ${colors.bgGradient} opacity-0 group-hover:opacity-5 transition-opacity duration-300`}
-      />
-
       {/* Content */}
       <div className="relative">
-        {/* Avatar/Emoji */}
-        <div
-          className={`${colors.bgLight} rounded-2xl flex items-center justify-center mb-4 ${
-            isLarge ? 'w-20 h-20 text-4xl' : 'w-14 h-14 text-3xl'
-          }`}
-        >
-          {emoji}
-        </div>
+        {/* Monogram badge (replaces emoji) */}
+        <ProfessionalAvatar
+          professional={professional}
+          className={isLarge ? 'w-20 h-20 mb-4' : 'w-14 h-14 mb-4'}
+          textClassName={isLarge ? 'text-3xl' : 'text-xl'}
+        />
 
         {/* Name & Role */}
         <h3
-          className={`font-bold text-gray-900 mb-1 ${colors.groupHoverText} transition-colors ${
+          className={`font-serif font-semibold text-ink mb-1 ${colors.groupHoverText} transition-colors ${
             isLarge ? 'text-xl' : 'text-lg'
           }`}
         >
@@ -60,7 +54,7 @@ export const ProfessionalCard: FC<ProfessionalCardProps> = ({ professional, size
         </p>
 
         {/* Tagline */}
-        <p className={`text-gray-600 ${isLarge ? 'text-base' : 'text-sm'}`}>{tagline}</p>
+        <p className={`text-ink-muted ${isLarge ? 'text-base' : 'text-sm'}`}>{tagline}</p>
 
         {/* CTA */}
         <div
diff --git a/lib/site.ts b/lib/site.ts
index c7ce0b507..a8005ce65 100644
--- a/lib/site.ts
+++ b/lib/site.ts
@@ -6,7 +6,8 @@
 
 export const site = {
   name: 'Botsmann',
-  tagline: 'Your Data. Your AI. Your Control.',
+  // ONE headline value prop — must match the hero H1 and footer.
+  tagline: 'Your Private AI Professionals',
   description:
     'Private AI that works with your data. Upload documents, ask questions, get answers with citations. Pre-built assistants for legal, medical, research, and more.',
   url: 'https://botsmann.com',
diff --git a/tailwind.config.js b/tailwind.config.js
index abaf2f5a1..bcbe85f67 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,12 +7,32 @@ module.exports = {
   ],
   theme: {
     extend: {
+      // Semantic tokens — values live in app/globals.css (SSOT). Never literals here.
       colors: {
-        'openai-green': '#10a37f',
-        'openai-gray': '#202123',
+        brand: 'var(--color-brand)',
+        action: 'var(--color-action)',
+        'action-hover': 'var(--color-action-hover)',
+        'action-tint': 'var(--color-action-tint)',
+        surface: 'var(--color-surface)',
+        paper: 'var(--color-bg)',
+        edge: 'var(--color-border)',
+        ink: {
+          DEFAULT: 'var(--color-text)',
+          muted: 'var(--color-text-muted)',
+        },
+      },
+      borderRadius: {
+        card: 'var(--radius-card)',
+        btn: 'var(--radius-btn)',
+      },
+      boxShadow: {
+        card: 'var(--shadow-card)',
+        'card-hover': 'var(--shadow-card-hover)',
       },
       fontFamily: {
-        sans: ['system-ui', 'sans-serif'],
+        // Bound to next/font CSS vars set in app/layout.tsx
+        sans: ['var(--font-sans)', 'system-ui', 'sans-serif'],
+        serif: ['var(--font-serif)', 'Georgia', 'serif'],
       },
       screens: {
         sm: '640px',