diff --git a/app/bots/BotNavigation.tsx b/app/bots/BotNavigation.tsx
index 6771105e..d1accc32 100644
--- a/app/bots/BotNavigation.tsx
+++ b/app/bots/BotNavigation.tsx
@@ -5,6 +5,7 @@ import Link from 'next/link';
 import type { Route } from 'next';
 import { Dialog, Transition } from '@headlessui/react';
 import { BotSwitcher, SiteMenuDropdown } from '@/components/navigation';
+import { Logo } from '@/components/shared/Logo';
 import { menuItems } from '@/data/menuItems';
 import { useScrollNavigation, getNavColors } from '@/lib/hooks';
 import type { BotMenuItem } from '@/types/bot';
@@ -53,11 +54,11 @@ export const BotNavigation: React.FC<BotNavigationProps> = ({
   };
 
   // Get color classes from centralized config
-  const colors = getNavColors(accentColor);
+  const colors = getNavColors();
 
   const navClasses = isScrolled
-    ? 'bg-white shadow-md border-b border-gray-200'
-    : 'bg-white border-b border-gray-200';
+    ? 'bg-surface shadow-md border-b border-edge'
+    : 'bg-surface border-b border-edge';
 
   return (
     <nav
@@ -67,17 +68,11 @@ export const BotNavigation: React.FC<BotNavigationProps> = ({
         <div className="flex justify-between items-center h-12">
           {/* Left side: Botsmann logo + divider + Bot Switcher */}
           <div className="flex items-center h-full">
-            {/* Botsmann 'B' logo - links to home */}
-            <Link
-              href="/"
-              className="flex items-center justify-center w-9 h-9 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-bold text-sm rounded-lg hover:opacity-90 transition-opacity"
-              aria-label="Go to Botsmann home"
-            >
-              B
-            </Link>
+            {/* Botsmann 'B' mark — the shared Logo, so it cannot drift again */}
+            <Logo href="/" showText={false} size="sm" />
 
             {/* Vertical divider */}
-            <div className="h-6 w-px bg-gray-300 mx-3" />
+            <div className="h-6 w-px bg-edge mx-3" />
 
             {/* Bot Switcher dropdown */}
             <BotSwitcher
@@ -95,7 +90,7 @@ export const BotNavigation: React.FC<BotNavigationProps> = ({
                 key={item.id}
                 onClick={() => handleScrollToSection(item.section)}
                 className={`px-3 py-2 rounded-md text-sm font-medium transition-colors whitespace-nowrap flex items-center ${
-                  activeSection === item.section ? colors.active : `text-gray-600 ${colors.hover}`
+                  activeSection === item.section ? colors.active : `text-ink-muted ${colors.hover}`
                 } ${item.id === 'roadmap' ? `border ${colors.border}` : ''}`}
               >
                 {item.icon && <span className="mr-1">{item.icon}</span>}
@@ -108,7 +103,7 @@ export const BotNavigation: React.FC<BotNavigationProps> = ({
           <div className="flex items-center gap-2">
             {/* Mobile menu button */}
             <button
-              className="md:hidden p-2 rounded-md text-gray-600 hover:text-gray-800 hover:bg-gray-100 focus:outline-none"
+              className="md:hidden p-2 rounded-md text-ink-muted hover:text-ink hover:bg-paper focus:outline-none"
               onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
               aria-label={isMobileMenuOpen ? 'Close menu' : 'Open menu'}
             >
@@ -182,20 +177,20 @@ export const BotNavigation: React.FC<BotNavigationProps> = ({
                   leaveTo="translate-x-full"
                 >
                   <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">
+                    <div className="flex h-full flex-col overflow-y-scroll bg-surface shadow-xl">
                       {/* Header with Botsmann branding */}
-                      <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-gradient-to-r from-blue-50 to-purple-50">
                         <div className="flex items-center gap-3">
                           <div className="flex items-center justify-center w-9 h-9 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-bold text-sm rounded-lg">
                             B
                           </div>
-                          <Dialog.Title className="text-lg font-semibold text-gray-900">
+                          <Dialog.Title className="text-lg font-semibold text-ink">
                             Botsmann
                           </Dialog.Title>
                         </div>
                         <button
                           type="button"
-                          className="rounded-md p-2 text-gray-400 hover:bg-white/50"
+                          className="rounded-md p-2 text-ink-muted hover:bg-surface/50"
                           onClick={() => setIsMobileMenuOpen(false)}
                         >
                           <span className="sr-only">Close menu</span>
@@ -221,7 +216,7 @@ export const BotNavigation: React.FC<BotNavigationProps> = ({
                           {/* Home link */}
                           <Link
                             href="/"
-                            className="flex items-center px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100"
+                            className="flex items-center px-3 py-2 rounded-md text-base font-medium text-ink hover:bg-paper"
                             onClick={() => setIsMobileMenuOpen(false)}
                           >
                             <svg
@@ -243,7 +238,7 @@ export const BotNavigation: React.FC<BotNavigationProps> = ({
                           {/* All Bots link */}
                           <Link
                             href="/bots"
-                            className="flex items-center px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100"
+                            className="flex items-center px-3 py-2 rounded-md text-base font-medium text-ink hover:bg-paper"
                             onClick={() => setIsMobileMenuOpen(false)}
                           >
                             <svg
@@ -262,27 +257,27 @@ export const BotNavigation: React.FC<BotNavigationProps> = ({
                             All Bots
                           </Link>
 
-                          <hr className="my-4 border-gray-200" />
+                          <hr className="my-4 border-edge" />
 
                           {/* Site Navigation */}
-                          <p className="px-3 text-xs font-medium text-gray-500 uppercase tracking-wider mb-2">
+                          <p className="px-3 text-xs font-medium text-ink-muted uppercase tracking-wider mb-2">
                             Botsmann
                           </p>
                           {siteNavItems.map((item) => (
                             <Link
                               key={item.label}
                               href={item.path}
-                              className="flex items-center px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100"
+                              className="flex items-center px-3 py-2 rounded-md text-base font-medium text-ink hover:bg-paper"
                               onClick={() => setIsMobileMenuOpen(false)}
                             >
                               <span>{item.label}</span>
                             </Link>
                           ))}
 
-                          <hr className="my-4 border-gray-200" />
+                          <hr className="my-4 border-edge" />
 
                           {/* Bot Section links */}
-                          <p className="px-3 text-xs font-medium text-gray-500 uppercase tracking-wider mb-2">
+                          <p className="px-3 text-xs font-medium text-ink-muted uppercase tracking-wider mb-2">
                             {botTitle} Sections
                           </p>
                           {sectionMenuItems.map((item) => (
@@ -292,7 +287,7 @@ export const BotNavigation: React.FC<BotNavigationProps> = ({
                               className={`w-full text-left flex items-center px-3 py-2 rounded-md text-base font-medium transition-colors ${
                                 activeSection === item.section
                                   ? colors.active
-                                  : `text-gray-700 hover:bg-gray-100`
+                                  : `text-ink hover:bg-paper`
                               }`}
                             >
                               {item.icon && <span className="mr-3 text-lg">{item.icon}</span>}
@@ -302,7 +297,7 @@ export const BotNavigation: React.FC<BotNavigationProps> = ({
 
                           {chatLink && (
                             <>
-                              <hr className="my-4 border-gray-200" />
+                              <hr className="my-4 border-edge" />
                               <Link
                                 href={chatLink as Route}
                                 className={`w-full flex items-center justify-center px-4 py-3 ${colors.accent} text-white text-base font-medium rounded-md transition-colors`}
diff --git a/app/bots/[slug]/page.tsx b/app/bots/[slug]/page.tsx
index d55820da..cc5302b8 100644
--- a/app/bots/[slug]/page.tsx
+++ b/app/bots/[slug]/page.tsx
@@ -30,7 +30,6 @@ import type {
   DemoContent,
   SectionConfig,
 } from '@/lib/config/bot-pages';
-import type { BotAccentColor } from '@/types/bot';
 
 /**
  * Dynamic bot page that renders from config
@@ -52,16 +51,14 @@ export default function BotPage() {
 
   const rawTryLink = getBotTryLink(bot);
   const tryLink = rawTryLink || '#waitlist';
-  const accentColor = pageConfig.accentColor;
 
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-paper">
       <BotNavigation
         botSlug={bot.slug}
         botTitle={bot.nav.navTitle}
         botEmoji={bot.nav.emoji}
         botDescription={bot.nav.navDescription}
-        accentColor={bot.nav.accentColor}
         menuItems={bot.nav.menuItems}
         chatLink={tryLink}
       />
@@ -71,7 +68,6 @@ export default function BotPage() {
           <SectionRenderer
             key={section.id}
             section={section}
-            accentColor={accentColor}
             botSlug={slug}
             tryLink={tryLink}
             heroConfig={heroConfig}
@@ -87,19 +83,12 @@ export default function BotPage() {
  */
 interface SectionRendererProps {
   section: SectionConfig;
-  accentColor: BotAccentColor;
   botSlug: string;
   tryLink: string;
   heroConfig: ReturnType<typeof getBotHeroConfig>;
 }
 
-function SectionRenderer({
-  section,
-  accentColor,
-  botSlug,
-  tryLink,
-  heroConfig,
-}: SectionRendererProps) {
+function SectionRenderer({ section, botSlug, tryLink, heroConfig }: SectionRendererProps) {
   const { id, type, content, isLast } = section;
 
   // Hero section uses external config
@@ -109,13 +98,13 @@ function SectionRenderer({
       ...heroConfig,
       primaryCTA: { ...heroConfig.primaryCTA, href: tryLink },
     };
-    return <BotHeroSection config={config} accentColor={accentColor} />;
+    return <BotHeroSection config={config} />;
   }
 
   // All other sections wrapped in BotSection
   return (
     <BotSection id={id} isLast={isLast}>
-      {renderSectionContent(type, content, accentColor, botSlug, tryLink)}
+      {renderSectionContent(type, content, botSlug, tryLink)}
     </BotSection>
   );
 }
@@ -126,7 +115,6 @@ function SectionRenderer({
 function renderSectionContent(
   type: SectionConfig['type'],
   content: SectionConfig['content'],
-  accentColor: BotAccentColor,
   botSlug: string,
   tryLink: string,
 ): React.ReactNode {
@@ -140,29 +128,25 @@ function renderSectionContent(
       return <DemoSectionWrapper content={content as DemoContent} botSlug={botSlug} />;
 
     case 'features':
-      return <FeaturesSection content={content as FeaturesContent} accentColor={accentColor} />;
+      return <FeaturesSection content={content as FeaturesContent} />;
 
     case 'how-it-works':
-      return <HowItWorksSection content={content as HowItWorksContent} accentColor={accentColor} />;
+      return <HowItWorksSection content={content as HowItWorksContent} />;
 
     case 'benefits':
-      return <BenefitsSection content={content as BenefitsContent} accentColor={accentColor} />;
+      return <BenefitsSection content={content as BenefitsContent} />;
 
     case 'testimonials':
-      return (
-        <TestimonialsSection content={content as TestimonialsContent} accentColor={accentColor} />
-      );
+      return <TestimonialsSection content={content as TestimonialsContent} />;
 
     case 'vision':
-      return <VisionSection content={content as VisionContent} accentColor={accentColor} />;
+      return <VisionSection content={content as VisionContent} />;
 
     case 'technology':
-      return <TechnologySection content={content as TechnologyContent} accentColor={accentColor} />;
+      return <TechnologySection content={content as TechnologyContent} />;
 
     case 'cta':
-      return (
-        <CTASection content={content as CTAContent} accentColor={accentColor} tryLink={tryLink} />
-      );
+      return <CTASection content={content as CTAContent} tryLink={tryLink} />;
 
     default:
       return null;
diff --git a/components/shared/BotHeroSection.tsx b/components/shared/BotHeroSection.tsx
index 5d31be62..a8d51285 100644
--- a/components/shared/BotHeroSection.tsx
+++ b/components/shared/BotHeroSection.tsx
@@ -1,8 +1,7 @@
 'use client';
 
 import { type FC, type ReactNode } from 'react';
-import type { BotAccentColor } from '@/types/bot';
-import { ACCENT_HERO_CLASSES } from '@/lib/config/colors';
+import { BRAND_HERO } from '@/lib/config/colors';
 
 /**
  * Chat message for the hero preview
@@ -69,7 +68,6 @@ export interface BotHeroConfig {
 
 interface BotHeroSectionProps {
   config: BotHeroConfig;
-  accentColor: BotAccentColor;
   /** Optional custom content for the right panel instead of chat preview */
   rightPanel?: ReactNode;
 }
@@ -93,12 +91,11 @@ interface BotHeroSectionProps {
  *       { role: 'user', content: 'I need a summary of recent data privacy cases.' },
  *     ],
  *   }}
- *   accentColor="blue"
  * />
  * ```
  */
-export const BotHeroSection: FC<BotHeroSectionProps> = ({ config, accentColor, rightPanel }) => {
-  const colors = ACCENT_HERO_CLASSES[accentColor];
+export const BotHeroSection: FC<BotHeroSectionProps> = ({ config, rightPanel }) => {
+  const colors = BRAND_HERO;
   const {
     badge,
     title,
@@ -126,7 +123,7 @@ export const BotHeroSection: FC<BotHeroSectionProps> = ({ config, accentColor, r
             </div>
           )}
 
-          <h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 mb-3 sm:mb-4">
+          <h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-ink mb-3 sm:mb-4">
             {title}
             {titleSuffix && (
               <>
@@ -136,7 +133,7 @@ export const BotHeroSection: FC<BotHeroSectionProps> = ({ config, accentColor, r
             )}
           </h1>
 
-          <p className="text-base sm:text-lg lg:text-xl text-gray-700 mb-4 sm:mb-6">{subtitle}</p>
+          <p className="text-base sm:text-lg lg:text-xl text-ink mb-4 sm:mb-6">{subtitle}</p>
 
           <div className="flex flex-col sm:flex-row gap-3 sm:gap-4">
             <a
@@ -167,12 +164,12 @@ export const BotHeroSection: FC<BotHeroSectionProps> = ({ config, accentColor, r
           {/* Mobile key benefits */}
           {showMobileBenefits && keyBenefits && keyBenefits.length > 0 && (
             <div className="mt-8 md:hidden">
-              <h3 className="text-lg font-semibold text-gray-800 mb-3">Key Benefits:</h3>
+              <h3 className="text-lg font-semibold text-ink mb-3">Key Benefits:</h3>
               <ul className="space-y-2">
                 {keyBenefits.slice(0, 3).map((benefit, idx) => (
                   <li key={idx} className="flex items-start">
                     <span className="text-green-500 mr-2">✓</span>
-                    <span className="text-gray-700">{benefit.text}</span>
+                    <span className="text-ink">{benefit.text}</span>
                   </li>
                 ))}
               </ul>
@@ -205,8 +202,8 @@ export const BotHeroSection: FC<BotHeroSectionProps> = ({ config, accentColor, r
                 <span className="text-xl md:text-2xl">{botInfo.emoji}</span>
               </div>
               <div>
-                <h3 className="font-semibold text-gray-900">{botInfo.name}</h3>
-                <p className="text-sm text-gray-600">{botInfo.description}</p>
+                <h3 className="font-semibold text-ink">{botInfo.name}</h3>
+                <p className="text-sm text-ink-muted">{botInfo.description}</p>
               </div>
             </div>
 
@@ -217,11 +214,11 @@ export const BotHeroSection: FC<BotHeroSectionProps> = ({ config, accentColor, r
                   key={idx}
                   className={`p-3 rounded-lg shadow-sm ${
                     message.role === 'bot'
-                      ? 'bg-white ml-auto max-w-[85%]'
+                      ? 'bg-surface ml-auto max-w-[85%]'
                       : `${colors.userBubble} max-w-[85%]`
                   }`}
                 >
-                  <p className="text-gray-800 text-sm md:text-base">{message.content}</p>
+                  <p className="text-ink text-sm md:text-base">{message.content}</p>
                 </div>
               ))}
             </div>
@@ -229,12 +226,12 @@ export const BotHeroSection: FC<BotHeroSectionProps> = ({ config, accentColor, r
             {/* Desktop key benefits inside chat panel */}
             {showMobileBenefits && keyBenefits && keyBenefits.length > 0 && (
               <div className="mt-6 hidden md:block">
-                <h4 className="font-medium text-gray-900 mb-2">Key Benefits:</h4>
+                <h4 className="font-medium text-ink mb-2">Key Benefits:</h4>
                 <div className="grid grid-cols-2 gap-2">
                   {keyBenefits.slice(0, 4).map((benefit, idx) => (
-                    <div key={idx} className="bg-white p-2 rounded-md flex items-center">
+                    <div key={idx} className="bg-surface p-2 rounded-md flex items-center">
                       <span className="text-green-500 mr-2">✓</span>
-                      <span className="text-sm text-gray-700">{benefit.text}</span>
+                      <span className="text-sm text-ink">{benefit.text}</span>
                     </div>
                   ))}
                 </div>
diff --git a/components/shared/BotPageTemplate.tsx b/components/shared/BotPageTemplate.tsx
deleted file mode 100644
index bf2e7575..00000000
--- a/components/shared/BotPageTemplate.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-'use client';
-
-import { type FC, type ReactNode, useEffect, useRef } from 'react';
-import { getBotBySlug, getBotTryLink, type Bot } from '@/data/bots';
-import BotNavigation from '@/app/bots/BotNavigation';
-import { BotNotFoundFallback } from './BotNotFoundFallback';
-
-interface BotPageTemplateProps {
-  /** The bot slug to load from data/bots.ts */
-  botSlug: string;
-  /** Display name for fallback if bot not found */
-  botDisplayName: string;
-  /** The main content of the page */
-  children: (props: BotPageRenderProps) => ReactNode;
-  /** Optional: Override the try/chat link */
-  overrideTryLink?: string;
-  /** Optional: Custom CSS file imported by the page */
-  className?: string;
-  /** Optional: Include scroll-to-hash behavior */
-  enableHashScrolling?: boolean;
-  /** Optional: Include footer */
-  showFooter?: boolean;
-}
-
-export interface BotPageRenderProps {
-  bot: Bot;
-  /** The try link if available, or '#waitlist' as fallback for bots without GPTs */
-  tryLink: string;
-  /** Whether the bot has an actual external try link */
-  hasExternalLink: boolean;
-}
-
-/**
- * Template wrapper for bot detail pages
- * Handles common patterns: bot lookup, fallback, navigation, and layout
- *
- * @example
- * ```tsx
- * export default function MyBotPage() {
- *   return (
- *     <BotPageTemplate botSlug="my-bot" botDisplayName="MyBot">
- *       {({ bot, tryLink }) => (
- *         <>
- *           <HeroSection getTryLink={() => tryLink} />
- *           <BotSection id="features">
- *             <FeaturesSection />
- *           </BotSection>
- *         </>
- *       )}
- *     </BotPageTemplate>
- *   );
- * }
- * ```
- */
-export const BotPageTemplate: FC<BotPageTemplateProps> = ({
-  botSlug,
-  botDisplayName,
-  children,
-  overrideTryLink,
-  className = '',
-  enableHashScrolling = false,
-  showFooter = false,
-}) => {
-  const bot = getBotBySlug(botSlug);
-  const rawTryLink = overrideTryLink ?? getBotTryLink(bot);
-  const hasExternalLink = Boolean(rawTryLink);
-  // Provide fallback for components that need a string
-  const tryLink = rawTryLink || '#waitlist';
-  const hasScrolledToTop = useRef(false);
-
-  // Handle scroll to section if hash is present in URL
-  useEffect(() => {
-    if (!enableHashScrolling) return;
-
-    const handleHashChange = () => {
-      const hash = window.location.hash;
-      if (hash) {
-        const element = document.querySelector(hash);
-        if (element) {
-          setTimeout(() => {
-            element.scrollIntoView({ behavior: 'smooth' });
-          }, 100);
-        }
-      } else if (!hasScrolledToTop.current) {
-        window.scrollTo(0, 0);
-        hasScrolledToTop.current = true;
-      }
-    };
-
-    handleHashChange();
-    window.addEventListener('hashchange', handleHashChange);
-    return () => window.removeEventListener('hashchange', handleHashChange);
-  }, [enableHashScrolling]);
-
-  // Return fallback if bot or nav config not found
-  if (!bot || !bot.nav) {
-    return <BotNotFoundFallback botName={botDisplayName} />;
-  }
-
-  const { nav } = bot;
-
-  return (
-    <div className={`min-h-screen bg-white ${className}`.trim()}>
-      <BotNavigation
-        botSlug={bot.slug}
-        botTitle={nav.navTitle}
-        botEmoji={nav.emoji}
-        botDescription={nav.navDescription}
-        accentColor={nav.accentColor}
-        menuItems={nav.menuItems}
-        chatLink={tryLink}
-      />
-
-      <main className="mx-auto max-w-screen-xl px-6 pt-24">
-        {children({ bot, tryLink, hasExternalLink })}
-      </main>
-
-      {showFooter && (
-        <footer className="bg-gray-50 border-t border-gray-200">
-          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-            <div className="flex flex-col md:flex-row items-center justify-between">
-              <div className="flex items-center mb-4 md:mb-0">
-                <span className="text-2xl mr-2">{nav.emoji}</span>
-                <span className="font-bold text-xl text-gray-900">{nav.navTitle}</span>
-              </div>
-
-              <div className="flex flex-col md:flex-row items-center space-y-2 md:space-y-0 md:space-x-8">
-                <a href="#" className="text-gray-500 hover:text-gray-700">
-                  Terms of Service
-                </a>
-                <a href="#" className="text-gray-500 hover:text-gray-700">
-                  Privacy Policy
-                </a>
-                <a href="mailto:hello@botsmann.com" className="text-gray-500 hover:text-gray-700">
-                  Contact Us
-                </a>
-              </div>
-            </div>
-
-            <div className="mt-8 text-center text-gray-500 text-sm">
-              <p>© {new Date().getFullYear()} Botsmann. All rights reserved.</p>
-              <p className="mt-1">
-                &quot;{nav.navTitle}&quot; is an AI GPT powered by OpenAI&apos;s technology.
-              </p>
-            </div>
-          </div>
-        </footer>
-      )}
-    </div>
-  );
-};
diff --git a/components/shared/index.ts b/components/shared/index.ts
index 3902ae01..7193d728 100644
--- a/components/shared/index.ts
+++ b/components/shared/index.ts
@@ -1,6 +1,5 @@
 export { BotSection } from './BotSection';
 export { BotNotFoundFallback } from './BotNotFoundFallback';
-export { BotPageTemplate, type BotPageRenderProps } from './BotPageTemplate';
 export {
   BotHeroSection,
   type BotHeroConfig,
diff --git a/components/shared/sections/BenefitsSection.tsx b/components/shared/sections/BenefitsSection.tsx
index 40dee126..f6579179 100644
--- a/components/shared/sections/BenefitsSection.tsx
+++ b/components/shared/sections/BenefitsSection.tsx
@@ -1,17 +1,15 @@
 'use client';
 
 import type { BenefitsContent } from '@/lib/config/bot-pages';
-import type { BotAccentColor } from '@/types/bot';
-import { getAccentClasses } from '@/lib/config/colors';
+import { BRAND_ACCENT } from '@/lib/config/colors';
 
 interface BenefitsSectionProps {
   content: BenefitsContent;
-  accentColor: BotAccentColor;
 }
 
-export function BenefitsSection({ content, accentColor }: BenefitsSectionProps) {
+export function BenefitsSection({ content }: BenefitsSectionProps) {
   const { badge, title, subtitle, benefits, columns = 3 } = content;
-  const accent = getAccentClasses(accentColor);
+  const accent = BRAND_ACCENT;
 
   const gridCols = {
     2: 'md:grid-cols-2',
@@ -31,18 +29,18 @@ export function BenefitsSection({ content, accentColor }: BenefitsSectionProps)
         </div>
       )}
 
-      <h2 className="text-3xl font-bold text-center text-gray-900 mb-4">{title}</h2>
+      <h2 className="text-3xl font-bold text-center text-ink mb-4">{title}</h2>
 
       {subtitle && (
-        <p className="text-lg text-gray-600 text-center max-w-3xl mx-auto mb-12">{subtitle}</p>
+        <p className="text-lg text-ink-muted text-center max-w-3xl mx-auto mb-12">{subtitle}</p>
       )}
 
       <div className={`grid gap-6 ${gridCols}`}>
         {benefits.map((benefit, index) => (
           <div key={index} className="text-center p-6">
             <span className="text-4xl mb-4 block">{benefit.icon}</span>
-            <h3 className="text-lg font-semibold text-gray-900 mb-2">{benefit.title}</h3>
-            <p className="text-gray-600 text-sm">{benefit.description}</p>
+            <h3 className="text-lg font-semibold text-ink mb-2">{benefit.title}</h3>
+            <p className="text-ink-muted text-sm">{benefit.description}</p>
           </div>
         ))}
       </div>
diff --git a/components/shared/sections/CTASection.tsx b/components/shared/sections/CTASection.tsx
index b955cbb1..95488eb0 100644
--- a/components/shared/sections/CTASection.tsx
+++ b/components/shared/sections/CTASection.tsx
@@ -1,27 +1,25 @@
 'use client';
 
 import type { CTAContent } from '@/lib/config/bot-pages';
-import type { BotAccentColor } from '@/types/bot';
-import { getAccentClasses } from '@/lib/config/colors';
+import { BRAND_ACCENT } from '@/lib/config/colors';
 
 interface CTASectionProps {
   content: CTAContent;
-  accentColor: BotAccentColor;
   tryLink: string;
 }
 
-export function CTASection({ content, accentColor, tryLink }: CTASectionProps) {
+export function CTASection({ content, tryLink }: CTASectionProps) {
   const { title, subtitle, primaryButton, secondaryButton, metrics, note } = content;
-  const accent = getAccentClasses(accentColor);
+  const accent = BRAND_ACCENT;
 
   const primaryHref = primaryButton.useTryLink ? tryLink : (primaryButton.href ?? '#');
 
   return (
     <div className="max-w-4xl mx-auto">
-      <div className="bg-gray-50 rounded-2xl p-8 md:p-12 text-center">
-        <h2 className="text-3xl font-bold text-gray-900 mb-4">{title}</h2>
+      <div className="bg-paper rounded-2xl p-8 md:p-12 text-center">
+        <h2 className="text-3xl font-bold text-ink mb-4">{title}</h2>
 
-        {subtitle && <p className="text-lg text-gray-600 max-w-2xl mx-auto mb-8">{subtitle}</p>}
+        {subtitle && <p className="text-lg text-ink-muted max-w-2xl mx-auto mb-8">{subtitle}</p>}
 
         <div className="flex flex-col sm:flex-row justify-center gap-4 mb-8">
           <a
@@ -36,7 +34,7 @@ export function CTASection({ content, accentColor, tryLink }: CTASectionProps) {
           {secondaryButton && (
             <a
               href={secondaryButton.href}
-              className={`px-8 py-3 rounded-lg font-medium border-2 ${accent.border} ${accent.text} hover:bg-gray-50 transition-colors`}
+              className={`px-8 py-3 rounded-lg font-medium border-2 ${accent.border} ${accent.text} hover:bg-paper transition-colors`}
             >
               {secondaryButton.text}
             </a>
@@ -47,16 +45,16 @@ export function CTASection({ content, accentColor, tryLink }: CTASectionProps) {
           <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
             {metrics.map((metric, index) => (
               <div key={index} className="text-center">
-                <div className="text-2xl font-bold text-gray-900">
+                <div className="text-2xl font-bold text-ink">
                   {metric.dynamic ? '—' : metric.value}
                 </div>
-                <div className="text-sm text-gray-500">{metric.label}</div>
+                <div className="text-sm text-ink-muted">{metric.label}</div>
               </div>
             ))}
           </div>
         )}
 
-        {note && <p className="text-sm text-gray-500">{note}</p>}
+        {note && <p className="text-sm text-ink-muted">{note}</p>}
       </div>
     </div>
   );
diff --git a/components/shared/sections/DemoSectionWrapper.tsx b/components/shared/sections/DemoSectionWrapper.tsx
index b0e1f7fe..57d14579 100644
--- a/components/shared/sections/DemoSectionWrapper.tsx
+++ b/components/shared/sections/DemoSectionWrapper.tsx
@@ -14,8 +14,8 @@ export function DemoSectionWrapper({ content, botSlug }: DemoSectionWrapperProps
   return (
     <div className="max-w-5xl mx-auto">
       <div className="text-center mb-8">
-        <h2 className="text-3xl font-semibold text-gray-900 mb-3">{title}</h2>
-        <p className="text-lg text-gray-600 max-w-2xl mx-auto">{subtitle}</p>
+        <h2 className="text-3xl font-semibold text-ink mb-3">{title}</h2>
+        <p className="text-lg text-ink-muted max-w-2xl mx-auto">{subtitle}</p>
       </div>
       <DemoSection botSlug={botSlug} />
     </div>
diff --git a/components/shared/sections/FeaturesSection.tsx b/components/shared/sections/FeaturesSection.tsx
index 3841b6c1..0db4534c 100644
--- a/components/shared/sections/FeaturesSection.tsx
+++ b/components/shared/sections/FeaturesSection.tsx
@@ -1,17 +1,15 @@
 'use client';
 
 import type { FeaturesContent } from '@/lib/config/bot-pages';
-import type { BotAccentColor } from '@/types/bot';
-import { getAccentClasses } from '@/lib/config/colors';
+import { BRAND_ACCENT } from '@/lib/config/colors';
 
 interface FeaturesSectionProps {
   content: FeaturesContent;
-  accentColor: BotAccentColor;
 }
 
-export function FeaturesSection({ content, accentColor }: FeaturesSectionProps) {
+export function FeaturesSection({ content }: FeaturesSectionProps) {
   const { badge, title, subtitle, features, columns = 3 } = content;
-  const accent = getAccentClasses(accentColor);
+  const accent = BRAND_ACCENT;
 
   const gridCols = {
     2: 'md:grid-cols-2',
@@ -31,21 +29,21 @@ export function FeaturesSection({ content, accentColor }: FeaturesSectionProps)
         </div>
       )}
 
-      <h2 className="text-3xl font-bold text-center text-gray-900 mb-4">{title}</h2>
+      <h2 className="text-3xl font-bold text-center text-ink mb-4">{title}</h2>
 
       {subtitle && (
-        <p className="text-lg text-gray-600 text-center max-w-3xl mx-auto mb-12">{subtitle}</p>
+        <p className="text-lg text-ink-muted text-center max-w-3xl mx-auto mb-12">{subtitle}</p>
       )}
 
       <div className={`grid gap-6 ${gridCols}`}>
         {features.map((feature, index) => (
           <div
             key={index}
-            className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm hover:shadow-md transition-shadow"
+            className="bg-surface rounded-xl border border-edge p-6 shadow-sm hover:shadow-md transition-shadow"
           >
             <span className="text-3xl mb-4 block">{feature.icon}</span>
-            <h3 className="text-lg font-semibold text-gray-900 mb-2">{feature.title}</h3>
-            <p className="text-gray-600 text-sm">{feature.description}</p>
+            <h3 className="text-lg font-semibold text-ink mb-2">{feature.title}</h3>
+            <p className="text-ink-muted text-sm">{feature.description}</p>
           </div>
         ))}
       </div>
diff --git a/components/shared/sections/HowItWorksSection.tsx b/components/shared/sections/HowItWorksSection.tsx
index 932b5e02..753a93b6 100644
--- a/components/shared/sections/HowItWorksSection.tsx
+++ b/components/shared/sections/HowItWorksSection.tsx
@@ -1,24 +1,22 @@
 'use client';
 
 import type { HowItWorksContent } from '@/lib/config/bot-pages';
-import type { BotAccentColor } from '@/types/bot';
-import { getAccentClasses } from '@/lib/config/colors';
+import { BRAND_ACCENT } from '@/lib/config/colors';
 
 interface HowItWorksSectionProps {
   content: HowItWorksContent;
-  accentColor: BotAccentColor;
 }
 
-export function HowItWorksSection({ content, accentColor }: HowItWorksSectionProps) {
+export function HowItWorksSection({ content }: HowItWorksSectionProps) {
   const { title, subtitle, steps } = content;
-  const accent = getAccentClasses(accentColor);
+  const accent = BRAND_ACCENT;
 
   return (
     <div className="max-w-4xl mx-auto">
-      <h2 className="text-3xl font-bold text-center text-gray-900 mb-4">{title}</h2>
+      <h2 className="text-3xl font-bold text-center text-ink mb-4">{title}</h2>
 
       {subtitle && (
-        <p className="text-lg text-gray-600 text-center max-w-2xl mx-auto mb-12">{subtitle}</p>
+        <p className="text-lg text-ink-muted text-center max-w-2xl mx-auto mb-12">{subtitle}</p>
       )}
 
       <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
@@ -35,8 +33,8 @@ export function HowItWorksSection({ content, accentColor }: HowItWorksSectionPro
                 </span>
               )}
             </div>
-            <h3 className="font-semibold text-gray-900 mb-2">{step.title}</h3>
-            <p className="text-gray-600 text-sm">{step.description}</p>
+            <h3 className="font-semibold text-ink mb-2">{step.title}</h3>
+            <p className="text-ink-muted text-sm">{step.description}</p>
           </div>
         ))}
       </div>
diff --git a/components/shared/sections/TechnologySection.tsx b/components/shared/sections/TechnologySection.tsx
index d7f75e5b..c7728e4c 100644
--- a/components/shared/sections/TechnologySection.tsx
+++ b/components/shared/sections/TechnologySection.tsx
@@ -1,17 +1,15 @@
 'use client';
 
 import type { TechnologyContent } from '@/lib/config/bot-pages';
-import type { BotAccentColor } from '@/types/bot';
-import { getAccentClasses } from '@/lib/config/colors';
+import { BRAND_ACCENT } from '@/lib/config/colors';
 
 interface TechnologySectionProps {
   content: TechnologyContent;
-  accentColor: BotAccentColor;
 }
 
-export function TechnologySection({ content, accentColor }: TechnologySectionProps) {
+export function TechnologySection({ content }: TechnologySectionProps) {
   const { badge, title, subtitle, categories, architecture, principles } = content;
-  const accent = getAccentClasses(accentColor);
+  const accent = BRAND_ACCENT;
 
   return (
     <div className="max-w-6xl mx-auto">
@@ -25,23 +23,23 @@ export function TechnologySection({ content, accentColor }: TechnologySectionPro
         </div>
       )}
 
-      <h2 className="text-3xl font-bold text-center text-gray-900 mb-4">{title}</h2>
+      <h2 className="text-3xl font-bold text-center text-ink mb-4">{title}</h2>
 
       {subtitle && (
-        <p className="text-lg text-gray-600 text-center max-w-3xl mx-auto mb-12">{subtitle}</p>
+        <p className="text-lg text-ink-muted text-center max-w-3xl mx-auto mb-12">{subtitle}</p>
       )}
 
       {/* Tech Categories */}
       <div className="grid gap-8 md:grid-cols-3 mb-12">
         {categories.map((category, catIndex) => (
           <div key={catIndex}>
-            <h3 className="text-lg font-semibold text-gray-900 mb-4">{category.title}</h3>
+            <h3 className="text-lg font-semibold text-ink mb-4">{category.title}</h3>
             <div className="space-y-4">
               {category.items.map((item, itemIndex) => (
-                <div key={itemIndex} className="bg-white rounded-lg border border-gray-200 p-4">
+                <div key={itemIndex} className="bg-surface rounded-lg border border-edge p-4">
                   {item.icon && <span className="text-xl mb-2 block">{item.icon}</span>}
-                  <h4 className="font-medium text-gray-900 mb-1">{item.title}</h4>
-                  <p className="text-sm text-gray-600">{item.description}</p>
+                  <h4 className="font-medium text-ink mb-1">{item.title}</h4>
+                  <p className="text-sm text-ink-muted">{item.description}</p>
                 </div>
               ))}
             </div>
@@ -51,18 +49,16 @@ export function TechnologySection({ content, accentColor }: TechnologySectionPro
 
       {/* Architecture */}
       {architecture && (
-        <div className="bg-gray-50 rounded-xl p-8 mb-12">
-          <h3 className="text-xl font-semibold text-gray-900 mb-6 text-center">
-            {architecture.title}
-          </h3>
+        <div className="bg-paper rounded-xl p-8 mb-12">
+          <h3 className="text-xl font-semibold text-ink mb-6 text-center">{architecture.title}</h3>
           <div className="flex flex-col md:flex-row justify-center gap-4">
             {architecture.layers.map((layer, index) => (
               <div
                 key={index}
-                className="flex-1 bg-white rounded-lg border border-gray-200 p-4 text-center"
+                className="flex-1 bg-surface rounded-lg border border-edge p-4 text-center"
               >
-                <h4 className="font-medium text-gray-900 mb-1">{layer.title}</h4>
-                <p className="text-sm text-gray-600">{layer.description}</p>
+                <h4 className="font-medium text-ink mb-1">{layer.title}</h4>
+                <p className="text-sm text-ink-muted">{layer.description}</p>
               </div>
             ))}
           </div>
@@ -71,13 +67,13 @@ export function TechnologySection({ content, accentColor }: TechnologySectionPro
 
       {/* Principles */}
       {principles && principles.length > 0 && (
-        <div className="bg-white rounded-xl border border-gray-200 p-6">
-          <h3 className="text-lg font-semibold text-gray-900 mb-4">Key Principles</h3>
+        <div className="bg-surface rounded-xl border border-edge p-6">
+          <h3 className="text-lg font-semibold text-ink mb-4">Key Principles</h3>
           <div className="grid gap-4 md:grid-cols-2">
             {principles.map((principle, index) => (
               <div key={index} className="flex items-start gap-2">
                 <span className={`font-medium ${accent.text}`}>{principle.label}</span>
-                <span className="text-gray-600">{principle.description}</span>
+                <span className="text-ink-muted">{principle.description}</span>
               </div>
             ))}
           </div>
diff --git a/components/shared/sections/TestimonialsSection.tsx b/components/shared/sections/TestimonialsSection.tsx
index aeb55df5..5ef4d260 100644
--- a/components/shared/sections/TestimonialsSection.tsx
+++ b/components/shared/sections/TestimonialsSection.tsx
@@ -1,17 +1,15 @@
 'use client';
 
 import type { TestimonialsContent } from '@/lib/config/bot-pages';
-import type { BotAccentColor } from '@/types/bot';
-import { getAccentClasses } from '@/lib/config/colors';
+import { BRAND_ACCENT } from '@/lib/config/colors';
 
 interface TestimonialsSectionProps {
   content: TestimonialsContent;
-  accentColor: BotAccentColor;
 }
 
-export function TestimonialsSection({ content, accentColor }: TestimonialsSectionProps) {
+export function TestimonialsSection({ content }: TestimonialsSectionProps) {
   const { badge, title, subtitle, testimonials, cta } = content;
-  const accent = getAccentClasses(accentColor);
+  const accent = BRAND_ACCENT;
 
   return (
     <div className="max-w-6xl mx-auto">
@@ -25,33 +23,33 @@ export function TestimonialsSection({ content, accentColor }: TestimonialsSectio
         </div>
       )}
 
-      <h2 className="text-3xl font-bold text-center text-gray-900 mb-4">{title}</h2>
+      <h2 className="text-3xl font-bold text-center text-ink mb-4">{title}</h2>
 
       {subtitle && (
-        <p className="text-lg text-gray-600 text-center max-w-3xl mx-auto mb-12">{subtitle}</p>
+        <p className="text-lg text-ink-muted text-center max-w-3xl mx-auto mb-12">{subtitle}</p>
       )}
 
       <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
         {testimonials.map((testimonial, index) => (
-          <div key={index} className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm">
+          <div key={index} className="bg-surface rounded-xl border border-edge p-6 shadow-sm">
             <div className="flex items-center gap-3 mb-4">
-              <div className="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center">
-                <span className="text-gray-500 text-sm">
+              <div className="w-10 h-10 rounded-full bg-paper flex items-center justify-center">
+                <span className="text-ink-muted text-sm">
                   {testimonial.author.charAt(0).toUpperCase()}
                 </span>
               </div>
               <div>
-                <a href="#" className="text-sm font-medium text-gray-900 hover:underline">
+                <a href="#" className="text-sm font-medium text-ink hover:underline">
                   {testimonial.author}
                 </a>
-                <p className="text-xs text-gray-500">{testimonial.role}</p>
+                <p className="text-xs text-ink-muted">{testimonial.role}</p>
                 {testimonial.company && (
-                  <p className="text-xs text-gray-400">{testimonial.company}</p>
+                  <p className="text-xs text-ink-muted">{testimonial.company}</p>
                 )}
               </div>
             </div>
 
-            <p className="text-gray-600 text-sm mb-4 italic">&ldquo;{testimonial.quote}&rdquo;</p>
+            <p className="text-ink-muted text-sm mb-4 italic">&ldquo;{testimonial.quote}&rdquo;</p>
 
             {testimonial.tag && (
               <span className={`inline-block px-2 py-1 text-xs rounded ${accent.badge}`}>
@@ -64,7 +62,7 @@ export function TestimonialsSection({ content, accentColor }: TestimonialsSectio
 
       {cta && (
         <div className="text-center mt-12">
-          <h3 className="text-xl font-semibold text-gray-900 mb-4">{cta.text}</h3>
+          <h3 className="text-xl font-semibold text-ink mb-4">{cta.text}</h3>
           <a
             href={cta.href}
             className={`inline-block px-6 py-3 rounded-lg font-medium text-white ${accent.primary} hover:opacity-90 transition-opacity`}
diff --git a/components/shared/sections/VisionSection.tsx b/components/shared/sections/VisionSection.tsx
index 4f73476e..02eae44a 100644
--- a/components/shared/sections/VisionSection.tsx
+++ b/components/shared/sections/VisionSection.tsx
@@ -1,17 +1,15 @@
 'use client';
 
 import type { VisionContent } from '@/lib/config/bot-pages';
-import type { BotAccentColor } from '@/types/bot';
-import { getAccentClasses, VISION_STATUS_CONFIG } from '@/lib/config/colors';
+import { BRAND_ACCENT, VISION_STATUS_CONFIG } from '@/lib/config/colors';
 
 interface VisionSectionProps {
   content: VisionContent;
-  accentColor: BotAccentColor;
 }
 
-export function VisionSection({ content, accentColor }: VisionSectionProps) {
+export function VisionSection({ content }: VisionSectionProps) {
   const { badge, title, subtitle, mission, principles, phases, benefits } = content;
-  const accent = getAccentClasses(accentColor);
+  const accent = BRAND_ACCENT;
 
   return (
     <div className="max-w-6xl mx-auto">
@@ -25,17 +23,17 @@ export function VisionSection({ content, accentColor }: VisionSectionProps) {
         </div>
       )}
 
-      <h2 className="text-3xl font-bold text-center text-gray-900 mb-4">{title}</h2>
+      <h2 className="text-3xl font-bold text-center text-ink mb-4">{title}</h2>
 
       {subtitle && (
-        <p className="text-lg text-gray-600 text-center max-w-3xl mx-auto mb-12">{subtitle}</p>
+        <p className="text-lg text-ink-muted text-center max-w-3xl mx-auto mb-12">{subtitle}</p>
       )}
 
       {/* Mission */}
       {mission && (
-        <div className="bg-gray-50 rounded-xl p-8 mb-12 text-center">
-          <h3 className="text-xl font-semibold text-gray-900 mb-3">{mission.title}</h3>
-          <p className="text-gray-600 max-w-2xl mx-auto">{mission.description}</p>
+        <div className="bg-paper rounded-xl p-8 mb-12 text-center">
+          <h3 className="text-xl font-semibold text-ink mb-3">{mission.title}</h3>
+          <p className="text-ink-muted max-w-2xl mx-auto">{mission.description}</p>
         </div>
       )}
 
@@ -45,8 +43,8 @@ export function VisionSection({ content, accentColor }: VisionSectionProps) {
           {principles.map((principle, index) => (
             <div key={index} className="text-center">
               {principle.icon && <span className="text-3xl mb-3 block">{principle.icon}</span>}
-              <h4 className="font-semibold text-gray-900 mb-2">{principle.title}</h4>
-              <p className="text-gray-600 text-sm">{principle.description}</p>
+              <h4 className="font-semibold text-ink mb-2">{principle.title}</h4>
+              <p className="text-ink-muted text-sm">{principle.description}</p>
             </div>
           ))}
         </div>
@@ -55,12 +53,12 @@ export function VisionSection({ content, accentColor }: VisionSectionProps) {
       {/* Phases/Roadmap */}
       {phases && phases.length > 0 && (
         <div className="mb-12">
-          <h3 className="text-2xl font-bold text-center text-gray-900 mb-8">Development Roadmap</h3>
+          <h3 className="text-2xl font-bold text-center text-ink mb-8">Development Roadmap</h3>
           <div className="space-y-6">
             {phases.map((phase, index) => (
-              <div key={index} className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm">
+              <div key={index} className="bg-surface rounded-xl border border-edge p-6 shadow-sm">
                 <div className="flex flex-wrap items-center gap-3 mb-4">
-                  <span className="text-sm font-medium text-gray-500">{phase.phase}</span>
+                  <span className="text-sm font-medium text-ink-muted">{phase.phase}</span>
                   <span
                     className={`px-2 py-1 text-xs rounded ${VISION_STATUS_CONFIG[phase.status]?.colors}`}
                   >
@@ -68,22 +66,22 @@ export function VisionSection({ content, accentColor }: VisionSectionProps) {
                   </span>
                 </div>
 
-                <h4 className="text-xl font-semibold text-gray-900 mb-2">{phase.title}</h4>
+                <h4 className="text-xl font-semibold text-ink mb-2">{phase.title}</h4>
 
                 {phase.timeline && (
-                  <p className="text-sm text-gray-500 mb-3">Timeline: {phase.timeline}</p>
+                  <p className="text-sm text-ink-muted mb-3">Timeline: {phase.timeline}</p>
                 )}
 
-                <p className="text-gray-600 mb-4">{phase.description}</p>
+                <p className="text-ink-muted mb-4">{phase.description}</p>
 
                 {phase.capabilities && phase.capabilities.length > 0 && (
                   <div>
-                    <h5 className="text-sm font-medium text-gray-700 mb-2">Key Capabilities:</h5>
+                    <h5 className="text-sm font-medium text-ink mb-2">Key Capabilities:</h5>
                     <ul className="grid gap-2 md:grid-cols-2">
                       {phase.capabilities.map((cap, capIndex) => (
                         <li
                           key={capIndex}
-                          className="text-sm text-gray-600 flex items-center gap-2"
+                          className="text-sm text-ink-muted flex items-center gap-2"
                         >
                           <span className={`w-1.5 h-1.5 rounded-full ${accent.primary}`}></span>
                           {cap}
@@ -101,15 +99,13 @@ export function VisionSection({ content, accentColor }: VisionSectionProps) {
       {/* Benefits */}
       {benefits && benefits.length > 0 && (
         <div>
-          <h3 className="text-2xl font-bold text-center text-gray-900 mb-8">
-            Why This Vision Matters
-          </h3>
+          <h3 className="text-2xl font-bold text-center text-ink mb-8">Why This Vision Matters</h3>
           <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
             {benefits.map((benefit, index) => (
               <div key={index} className="text-center p-4">
                 <span className="text-3xl mb-3 block">{benefit.icon}</span>
-                <h4 className="font-semibold text-gray-900 mb-2">{benefit.title}</h4>
-                <p className="text-gray-600 text-sm">{benefit.description}</p>
+                <h4 className="font-semibold text-ink mb-2">{benefit.title}</h4>
+                <p className="text-ink-muted text-sm">{benefit.description}</p>
               </div>
             ))}
           </div>
diff --git a/lib/config/bot-pages.ts b/lib/config/bot-pages.ts
index 4c8dc751..0d777c3f 100644
--- a/lib/config/bot-pages.ts
+++ b/lib/config/bot-pages.ts
@@ -1,5 +1,3 @@
-import type { BotAccentColor } from '@/types/bot';
-
 /**
  * Bot Page Configuration System
  * SSOT for all bot page content and structure
@@ -225,7 +223,6 @@ export interface SectionConfig {
 export interface BotPageConfig {
   slug: string;
   displayName: string;
-  accentColor: BotAccentColor;
   sections: SectionConfig[];
   styles?: string; // Optional CSS file path
 }
@@ -238,7 +235,6 @@ export const botPageConfigs: Record<string, BotPageConfig> = {
   'legal-expert': {
     slug: 'legal-expert',
     displayName: 'Lex',
-    accentColor: 'blue',
     sections: [
       { id: 'hero', type: 'hero', content: null },
       {
@@ -607,7 +603,6 @@ export const botPageConfigs: Record<string, BotPageConfig> = {
   'medical-expert': {
     slug: 'medical-expert',
     displayName: 'Imhotep',
-    accentColor: 'green',
     sections: [
       { id: 'hero', type: 'hero', content: null },
       {
@@ -764,7 +759,6 @@ export const botPageConfigs: Record<string, BotPageConfig> = {
   'swiss-german-teacher': {
     slug: 'swiss-german-teacher',
     displayName: 'Heidi',
-    accentColor: 'red',
     sections: [
       { id: 'hero', type: 'hero', content: null },
       {
@@ -870,7 +864,6 @@ export const botPageConfigs: Record<string, BotPageConfig> = {
   'research-assistant': {
     slug: 'research-assistant',
     displayName: 'Nerd',
-    accentColor: 'indigo',
     sections: [
       { id: 'hero', type: 'hero', content: null },
       {
@@ -983,7 +976,6 @@ export const botPageConfigs: Record<string, BotPageConfig> = {
   'product-manager': {
     slug: 'product-manager',
     displayName: 'Trident',
-    accentColor: 'indigo',
     sections: [
       { id: 'hero', type: 'hero', content: null },
       {
@@ -1089,7 +1081,6 @@ export const botPageConfigs: Record<string, BotPageConfig> = {
   'artistic-advisor': {
     slug: 'artistic-advisor',
     displayName: 'Muse',
-    accentColor: 'amber',
     sections: [
       { id: 'hero', type: 'hero', content: null },
       {
diff --git a/lib/config/colors.ts b/lib/config/colors.ts
index f589e379..31c16454 100644
--- a/lib/config/colors.ts
+++ b/lib/config/colors.ts
@@ -321,6 +321,20 @@ export const ACCENT_CONTEXT_PANEL_CLASSES: Record<
 /**
  * Hero section color scheme (restricted set)
  */
+/**
+ * Hero styling for first-party bot pages — brand, not per-bot colour.
+ * (The per-colour ACCENT_HERO_CLASSES below was not even self-consistent:
+ * its `green` and `indigo` entries both set chatBg to 'bg-blue-50'.)
+ */
+export const BRAND_HERO = {
+  badge: 'bg-action-tint text-action',
+  chatBg: 'bg-action-tint',
+  chatBorder: 'border-edge',
+  userBubble: 'bg-surface',
+  iconBg: 'bg-action-tint',
+  benefitIcon: 'text-action',
+};
+
 export const ACCENT_HERO_CLASSES: Record<
   CustomBotAccentColor,
   {
@@ -506,6 +520,22 @@ const ACCENT_CLASS_SETS: Record<CustomBotAccentColor, AccentClasses> = {
   },
 };
 
+/**
+ * The Botsmann brand accent, expressed as design-system classes.
+ *
+ * First-party bot pages use THIS, not a per-bot colour. The six professional
+ * bots are Botsmann, so they wear the brand: ochre on ink, defined once in
+ * app/globals.css. The per-colour sets below remain for user-created custom
+ * bots, where accent_color is a real column the owner chooses.
+ */
+export const BRAND_ACCENT: AccentClasses = {
+  primary: 'bg-action',
+  text: 'text-action',
+  border: 'border-action',
+  lightBg: 'bg-action-tint',
+  badge: 'bg-action-tint text-action',
+};
+
 /**
  * Get comprehensive accent classes for a color
  */
diff --git a/lib/hooks/navigationConfig.ts b/lib/hooks/navigationConfig.ts
index caf9bffb..eb7124c6 100644
--- a/lib/hooks/navigationConfig.ts
+++ b/lib/hooks/navigationConfig.ts
@@ -1,8 +1,13 @@
-import type { BotAccentColor } from '@/types/bot';
-
 /**
- * Color classes for navigation elements by accent color
- * Centralized to avoid duplication across navigation components
+ * Navigation colour classes for first-party bot pages.
+ *
+ * There is one scheme, because there is one brand. Bot pages used to carry a
+ * per-bot accent (blue, green, indigo, red, amber), which put a blue logo and
+ * a blue nav button on the same screen as the ochre CTA defined in
+ * app/globals.css — two design systems arguing inside one viewport.
+ *
+ * Values here are semantic Tailwind classes bound to the CSS custom properties
+ * in app/globals.css. That file is the SSOT; nothing below is a literal colour.
  */
 export interface NavColorClasses {
   /** Logo/icon background */
@@ -19,57 +24,14 @@ export interface NavColorClasses {
   border: string;
 }
 
-/**
- * Navigation color schemes for all bot accent colors
- * SSOT for navigation styling - update here to change all bot pages
- */
-export const NAV_COLOR_CLASSES: Record<BotAccentColor, NavColorClasses> = {
-  blue: {
-    logo: 'bg-blue-100',
-    title: 'text-blue-900',
-    active: 'text-blue-700 bg-blue-50',
-    hover: 'hover:text-blue-700 hover:bg-blue-50',
-    accent: 'bg-blue-600 hover:bg-blue-700',
-    border: 'border-blue-300',
-  },
-  green: {
-    logo: 'bg-green-100',
-    title: 'text-green-900',
-    active: 'text-green-700 bg-green-50',
-    hover: 'hover:text-green-700 hover:bg-green-50',
-    accent: 'bg-green-600 hover:bg-green-700',
-    border: 'border-green-300',
-  },
-  indigo: {
-    logo: 'bg-indigo-100',
-    title: 'text-indigo-900',
-    active: 'text-indigo-700 bg-indigo-50',
-    hover: 'hover:text-indigo-700 hover:bg-indigo-50',
-    accent: 'bg-indigo-600 hover:bg-indigo-700',
-    border: 'border-indigo-300',
-  },
-  red: {
-    logo: 'bg-red-100',
-    title: 'text-red-900',
-    active: 'text-red-700 bg-red-50',
-    hover: 'hover:text-red-700 hover:bg-red-50',
-    accent: 'bg-red-600 hover:bg-red-700',
-    border: 'border-red-300',
-  },
-  amber: {
-    logo: 'bg-amber-100',
-    title: 'text-amber-900',
-    active: 'text-amber-700 bg-amber-50',
-    hover: 'hover:text-amber-700 hover:bg-amber-50',
-    accent: 'bg-amber-600 hover:bg-amber-700',
-    border: 'border-amber-300',
-  },
+export const NAV_COLORS: NavColorClasses = {
+  logo: 'bg-action-tint',
+  title: 'text-ink',
+  active: 'text-action bg-action-tint',
+  hover: 'hover:text-action hover:bg-action-tint',
+  accent: 'bg-action hover:bg-action-hover',
+  border: 'border-edge',
 };
 
-/**
- * Get color classes for a given accent color
- * Falls back to blue if invalid color provided
- */
-export const getNavColors = (accentColor: string): NavColorClasses => {
-  return NAV_COLOR_CLASSES[accentColor as BotAccentColor] ?? NAV_COLOR_CLASSES.blue;
-};
+/** Navigation colours for first-party bot pages. */
+export const getNavColors = (): NavColorClasses => NAV_COLORS;