From 58a1249439d7fb17da5520a862db82ddd3d4538a Mon Sep 17 00:00:00 2001 From: Mao Nakamoto <41178744+maonakamoto@users.noreply.github.com> Date: Fri, 28 Aug 2026 10:14:35 +0200 Subject: [PATCH] refactor(design): one colour system on the bot pages app/globals.css defines the identity -- editorial ink, one ochre accent -- and says so in a comment: "No generic AI gradient blue/purple." The bot pages ignored it and ran a parallel palette, so a single viewport of /bots/legal-expert showed a blue logo, a blue nav button and an ochre CTA at the same time. There were four colour sources, not two: lib/config/colors.ts 16-colour accent sets lib/hooks/navigationConfig its own 5-colour NAV_COLOR_CLASSES ACCENT_HERO_CLASSES a fifth set (whose green and indigo entries both set chatBg to 'bg-blue-50' -- it was not even self-consistent) raw Tailwind greys text-gray-900 / bg-white / border-gray-200 The six professional bots are Botsmann, so they now wear the brand: BRAND_ACCENT and BRAND_HERO, plus a single NAV_COLORS scheme. 113 raw grey/white classes became semantic tokens (text-ink, text-ink-muted, bg-surface, bg-paper, border-edge). The page ground is bg-paper, matching the homepage instead of flat white. The 'B' mark in BotNavigation was literally `bg-gradient-to-r from-blue-600 to-purple-600` -- the exact thing globals.css forbids by name. It now renders the shared , so it cannot drift again. Per-bot accentColor is gone from the first-party config and its plumbing. The per-colour sets STAY for user-created bots: custom_bots.accent_color is a real column with a CHECK constraint and the owner picks it. That is user data, not a design token. Also deleted components/shared/BotPageTemplate.tsx -- nothing imported it. Not in this change: /try, /enterprise, /bots and /knowledge still carry blue/purple gradients (72 files match the raw palette). Same class, separate pass, so this one stays reviewable. verify: format, lint, typecheck, 240 tests, build -- all green. Verified visually against a local production build. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_01HVwg8DKHQktxJuHeLM3xpG --- app/bots/BotNavigation.tsx | 49 +++--- app/bots/[slug]/page.tsx | 38 ++--- components/shared/BotHeroSection.tsx | 31 ++-- components/shared/BotPageTemplate.tsx | 151 ------------------ components/shared/index.ts | 1 - .../shared/sections/BenefitsSection.tsx | 16 +- components/shared/sections/CTASection.tsx | 22 ++- .../shared/sections/DemoSectionWrapper.tsx | 4 +- .../shared/sections/FeaturesSection.tsx | 18 +-- .../shared/sections/HowItWorksSection.tsx | 16 +- .../shared/sections/TechnologySection.tsx | 38 ++--- .../shared/sections/TestimonialsSection.tsx | 28 ++-- components/shared/sections/VisionSection.tsx | 46 +++--- lib/config/bot-pages.ts | 9 -- lib/config/colors.ts | 30 ++++ lib/hooks/navigationConfig.ts | 74 +++------ 16 files changed, 180 insertions(+), 391 deletions(-) delete mode 100644 components/shared/BotPageTemplate.tsx 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 = ({ }; // 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 (