From 5f2225f33195d9b054331d14b4eb588f90f92204 Mon Sep 17 00:00:00 2001
From: Ajit Pratap Singh <ajitpratapsingh@Ajits-Mac-mini-2655.local>
Date: Thu, 15 Oct 2026 00:46:36 +0530
Subject: [PATCH 1/2] feat(website/design): semantic design-token system,
 collapse legacy color tokens

Replace the duplicated legacy tokens (--color-primary/surface/elevated,
--color-accent-*, --color-bg-*, --color-text-*, --color-link) with one
semantic set defined on :root (dark) and html.light (light): --bg,
--bg-raised, --bg-overlay, --fg, --fg-muted, --fg-subtle, --border,
--brand, --brand-fg, --accent, --accent-fg, --accent-warm, --danger, --ok.

@theme inline maps them to Tailwind utilities that reference the runtime
variables, so light mode now switches through the variables instead of
per-class !important overrides. Every legacy class usage is migrated and
the html.light overrides that targeted them are deleted.

Also fixes light-mode contrast failures found while auditing the 8 key
routes: navbar background stuck dark, invisible prose <strong>, playground
title, VS Code settings block, dialect/status badges and playground status
text now use tokens.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RkzVu3JY9Y6BRWfjesWts9
---
 .../src/app/benchmarks/BenchmarksContent.tsx  |   8 +-
 website/src/app/blog/BlogList.tsx             |   8 +-
 website/src/app/blog/[slug]/page.tsx          |  14 +-
 website/src/app/blog/page.tsx                 |   2 +-
 website/src/app/compare/CompareContent.tsx    |   4 +-
 website/src/app/docs/[...slug]/page.tsx       |   2 +-
 website/src/app/docs/page.tsx                 |  10 +-
 website/src/app/global-error.tsx              |   2 +-
 website/src/app/globals.css                   | 223 +++++++++---------
 website/src/app/playground/page.tsx           |   6 +-
 website/src/app/vscode/VscodeContent.tsx      |   2 +-
 .../src/components/benchmarks/BarChart.tsx    |   2 +-
 .../components/benchmarks/RawDataToggle.tsx   |   2 +-
 website/src/components/docs/CopyButton.tsx    |   2 +-
 website/src/components/docs/DocNavigation.tsx |   4 +-
 .../src/components/docs/DocsSearchTrigger.tsx |   4 +-
 website/src/components/docs/Sidebar.tsx       |   6 +-
 website/src/components/docs/Toc.tsx           |   4 +-
 .../src/components/docs/mdx-components.tsx    |   8 +-
 website/src/components/home/CodeExamples.tsx  |  62 ++---
 website/src/components/home/CtaBanner.tsx     |   6 +-
 .../src/components/home/DialectShowcase.tsx   |  37 ++-
 website/src/components/home/FeatureGrid.tsx   |   9 +-
 website/src/components/home/McpSection.tsx    |   2 +-
 .../src/components/home/MiniPlayground.tsx    |   6 +-
 .../components/home/PerformanceSection.tsx    |   8 +-
 website/src/components/home/VscodeSection.tsx |  40 ++--
 website/src/components/layout/Footer.tsx      |   2 +-
 website/src/components/layout/Navbar.tsx      |  18 +-
 .../src/components/playground/AnalyzeTab.tsx  |   6 +-
 website/src/components/playground/AstTab.tsx  |  14 +-
 .../src/components/playground/FormatTab.tsx   |   8 +-
 website/src/components/playground/LintTab.tsx |  14 +-
 .../src/components/playground/Playground.tsx  |  12 +-
 .../playground/WasmErrorBoundary.tsx          |   6 +-
 website/src/components/ui/SearchModal.tsx     |  18 +-
 website/src/components/ui/TerminalMockup.tsx  |   6 +-
 website/src/components/ui/VersionBadge.tsx    |   2 +-
 website/src/lib/constants.ts                  |  10 +-
 39 files changed, 295 insertions(+), 304 deletions(-)

diff --git a/website/src/app/benchmarks/BenchmarksContent.tsx b/website/src/app/benchmarks/BenchmarksContent.tsx
index 4780cfca..d5ee60f5 100644
--- a/website/src/app/benchmarks/BenchmarksContent.tsx
+++ b/website/src/app/benchmarks/BenchmarksContent.tsx
@@ -30,7 +30,7 @@ function renderMethodologyItem(item: string) {
   return (
     <>
       {item.slice(0, idx)}
-      <code className="font-mono text-xs bg-white/[0.06] px-1 py-0.5 rounded">{FLAG}</code>
+      <code className="font-mono text-xs text-fg bg-fg/[0.06] px-1 py-0.5 rounded">{FLAG}</code>
       {item.slice(idx + FLAG.length)}
     </>
   );
@@ -49,7 +49,7 @@ export function BenchmarksContent() {
             <p className="mt-4 text-lg text-zinc-400 max-w-2xl mx-auto">
               Parse-stage performance of the GoSQLX parser, re-measured with the in-repo benchmarks.
             </p>
-            <p className="mt-3 text-xs text-text-muted">
+            <p className="mt-3 text-xs text-fg-subtle">
               Measured 2026-10-13 &middot; Apple M4 &middot; Go 1.27 &middot; parse stage only
             </p>
           </FadeIn>
@@ -110,7 +110,7 @@ export function BenchmarksContent() {
                   </table>
                 </div>
               </GlassCard>
-              <p className="text-xs text-text-muted mt-2 md:hidden">&larr; Swipe to see all columns &rarr;</p>
+              <p className="text-xs text-fg-subtle mt-2 md:hidden">&larr; Swipe to see all columns &rarr;</p>
             </RawDataToggle>
           </FadeIn>
         </div>
@@ -126,7 +126,7 @@ export function BenchmarksContent() {
                 Head-to-head numbers against other Go SQL parsers are not published yet. They will
                 return once a reproducible benchmark harness is committed to the repository, so every
                 figure can be re-run by you. Until then, see the{' '}
-                <a href="/compare/" className="text-indigo-300 underline underline-offset-2">
+                <a href="/compare/" className="text-accent underline underline-offset-2">
                   qualitative feature comparison
                 </a>
                 .
diff --git a/website/src/app/blog/BlogList.tsx b/website/src/app/blog/BlogList.tsx
index b0e91157..3bdfecd8 100644
--- a/website/src/app/blog/BlogList.tsx
+++ b/website/src/app/blog/BlogList.tsx
@@ -18,15 +18,15 @@ export function BlogList({ posts }: { posts: BlogPost[] }) {
               className="group flex gap-6 py-5 pl-0 relative"
             >
               {/* Timeline dot */}
-              <div className="relative z-10 mt-2 w-[15px] h-[15px] shrink-0 rounded-full border-2 border-zinc-700 bg-primary group-hover:border-accent-indigo transition-colors" />
+              <div className="relative z-10 mt-2 w-[15px] h-[15px] shrink-0 rounded-full border-2 border-zinc-700 bg-bg group-hover:border-accent transition-colors" />
 
               <div className="flex-1 min-w-0">
                 <div className="flex items-center gap-3 mb-1.5 flex-wrap">
-                  <span className="inline-block bg-accent-indigo/10 border border-accent-indigo/20 rounded-full px-3 py-0.5 text-xs font-medium text-accent-indigo">
+                  <span className="inline-block bg-accent/10 border border-accent/20 rounded-full px-3 py-0.5 text-xs font-medium text-accent">
                     v{post.version}
                   </span>
                   {post.date && (
-                    <span className="text-sm text-text-muted">{formatDate(post.date)}</span>
+                    <span className="text-sm text-fg-subtle">{formatDate(post.date)}</span>
                   )}
                 </div>
                 <h2 className="text-lg font-semibold text-zinc-100 group-hover:text-white transition-colors truncate">
@@ -40,7 +40,7 @@ export function BlogList({ posts }: { posts: BlogPost[] }) {
               </div>
 
               {/* Arrow */}
-              <div className="mt-2 text-text-muted group-hover:text-zinc-400 transition-colors shrink-0">
+              <div className="mt-2 text-fg-subtle group-hover:text-zinc-400 transition-colors shrink-0">
                 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                   <path d="M6 4l4 4-4 4" />
                 </svg>
diff --git a/website/src/app/blog/[slug]/page.tsx b/website/src/app/blog/[slug]/page.tsx
index a0569742..36f4771c 100644
--- a/website/src/app/blog/[slug]/page.tsx
+++ b/website/src/app/blog/[slug]/page.tsx
@@ -104,7 +104,7 @@ export default async function BlogPostPage({ params }: Props) {
         {/* Back link */}
         <Link
           href="/blog"
-          className="inline-flex items-center gap-1.5 text-sm text-text-muted hover:text-zinc-300 transition-colors mb-8"
+          className="inline-flex items-center gap-1.5 text-sm text-fg-subtle hover:text-zinc-300 transition-colors mb-8"
         >
           <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
             <path d="M10 4l-4 4 4 4" />
@@ -115,11 +115,11 @@ export default async function BlogPostPage({ params }: Props) {
         {/* Header */}
         <header className="mb-10">
           <div className="flex items-center gap-3 mb-3">
-            <span className="inline-block bg-accent-indigo/10 border border-accent-indigo/20 rounded-full px-3.5 py-1 text-xs font-medium text-accent-indigo">
+            <span className="inline-block bg-accent/10 border border-accent/20 rounded-full px-3.5 py-1 text-xs font-medium text-accent">
               v{post.version}
             </span>
             {post.date && (
-              <time className="text-sm text-text-muted" dateTime={post.date}>
+              <time className="text-sm text-fg-subtle" dateTime={post.date}>
                 {formatDate(post.date)}
               </time>
             )}
@@ -128,7 +128,7 @@ export default async function BlogPostPage({ params }: Props) {
         </header>
 
         {/* Content */}
-        <div className="prose prose-invert prose-dark max-w-none prose-headings:font-semibold prose-a:text-accent-indigo prose-a:no-underline hover:prose-a:underline prose-code:bg-surface prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:text-sm prose-code:before:content-none prose-code:after:content-none prose-pre:bg-surface prose-pre:border prose-pre:border-zinc-800 prose-hr:border-zinc-800">
+        <div className="prose prose-invert prose-dark max-w-none prose-headings:font-semibold prose-a:text-accent prose-a:no-underline hover:prose-a:underline prose-code:bg-bg-raised prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:text-sm prose-code:before:content-none prose-code:after:content-none prose-pre:bg-bg-raised prose-pre:border prose-pre:border-zinc-800 prose-hr:border-zinc-800">
           {content}
         </div>
 
@@ -139,7 +139,7 @@ export default async function BlogPostPage({ params }: Props) {
           const shareUrl = encodeURIComponent(postUrl);
           return (
             <div className="mt-12 pt-8 border-t border-zinc-800 flex items-center gap-3">
-              <span className="text-sm text-text-muted">Share:</span>
+              <span className="text-sm text-fg-subtle">Share:</span>
               <a
                 href={`https://x.com/intent/tweet?text=${shareText}&url=${shareUrl}`}
                 target="_blank"
@@ -178,7 +178,7 @@ export default async function BlogPostPage({ params }: Props) {
               href={blogPostHref(prevPost.slug)}
               className="group flex flex-col text-sm"
             >
-              <span className="text-text-muted mb-1">Older</span>
+              <span className="text-fg-subtle mb-1">Older</span>
               <span className="text-zinc-300 group-hover:text-white transition-colors">
                 {prevPost.title}
               </span>
@@ -191,7 +191,7 @@ export default async function BlogPostPage({ params }: Props) {
               href={blogPostHref(nextPost.slug)}
               className="group flex flex-col text-sm text-right ml-auto"
             >
-              <span className="text-text-muted mb-1">Newer</span>
+              <span className="text-fg-subtle mb-1">Newer</span>
               <span className="text-zinc-300 group-hover:text-white transition-colors">
                 {nextPost.title}
               </span>
diff --git a/website/src/app/blog/page.tsx b/website/src/app/blog/page.tsx
index aabb2d04..e98d721b 100644
--- a/website/src/app/blog/page.tsx
+++ b/website/src/app/blog/page.tsx
@@ -25,7 +25,7 @@ export default function BlogPage() {
     <div className="min-h-screen py-20 px-4">
       <div className="max-w-3xl mx-auto">
         <h1 className="text-4xl font-bold tracking-tight mb-3">Changelog</h1>
-        <p className="text-text-muted text-lg mb-12">
+        <p className="text-fg-subtle text-lg mb-12">
           Track every feature, fix, and improvement across GoSQLX releases.
         </p>
 
diff --git a/website/src/app/compare/CompareContent.tsx b/website/src/app/compare/CompareContent.tsx
index f141c8cd..9609c227 100644
--- a/website/src/app/compare/CompareContent.tsx
+++ b/website/src/app/compare/CompareContent.tsx
@@ -171,7 +171,7 @@ export function CompareContent() {
           <p className="text-sm text-zinc-400">
             Performance comparisons are withheld until a reproducible benchmark harness is published.
             For GoSQLX measurements, see the{' '}
-            <Link href="/benchmarks/" className="text-indigo-300 underline underline-offset-2">
+            <Link href="/benchmarks/" className="text-accent underline underline-offset-2">
               benchmarks page
             </Link>
             .
@@ -189,7 +189,7 @@ export function CompareContent() {
               </h2>
               <p className="mt-3 text-zinc-400 max-w-xl mx-auto">
                 Get started in under a minute with a single{' '}
-                <code className="font-mono text-xs bg-white/[0.06] px-1.5 py-0.5 rounded">
+                <code className="font-mono text-xs text-fg bg-fg/[0.06] px-1.5 py-0.5 rounded">
                   go get
                 </code>{' '}
                 command.
diff --git a/website/src/app/docs/[...slug]/page.tsx b/website/src/app/docs/[...slug]/page.tsx
index a8496628..55693042 100644
--- a/website/src/app/docs/[...slug]/page.tsx
+++ b/website/src/app/docs/[...slug]/page.tsx
@@ -135,7 +135,7 @@ export default async function DocPage({ params }: PageProps) {
         </nav>
 
         {/* Reading time */}
-        <div className="mb-6 flex items-center gap-2 text-sm text-text-muted">
+        <div className="mb-6 flex items-center gap-2 text-sm text-fg-subtle">
           <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
             <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
           </svg>
diff --git a/website/src/app/docs/page.tsx b/website/src/app/docs/page.tsx
index 19657a95..c8f8864b 100644
--- a/website/src/app/docs/page.tsx
+++ b/website/src/app/docs/page.tsx
@@ -34,7 +34,7 @@ export default function DocsPage() {
         </p>
         <Link
           href="/docs/getting-started"
-          className="mt-8 inline-flex items-center gap-2 rounded-lg bg-accent-indigo px-6 py-3 text-sm font-semibold text-white transition-colors hover:bg-accent-indigo/80"
+          className="mt-8 inline-flex items-center gap-2 rounded-lg bg-accent px-6 py-3 text-sm font-semibold text-accent-fg transition-colors hover:bg-accent/90"
         >
           Get Started
           <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -52,13 +52,13 @@ export default function DocsPage() {
               href={`/docs/${group.items[0].slug}`}
               className="glass glass-hover block rounded-xl p-6 transition-colors h-full"
             >
-              <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-accent-indigo/10">
-                <svg className="h-5 w-5 text-accent-indigo" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+              <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-accent/10">
+                <svg className="h-5 w-5 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
                   <path strokeLinecap="round" strokeLinejoin="round" d={CATEGORY_ICONS[group.category] || CATEGORY_ICONS['Core']} />
                 </svg>
               </div>
               <h2 className="text-lg font-semibold text-white">{group.category}</h2>
-              <p className="mt-1 text-sm text-text-muted">
+              <p className="mt-1 text-sm text-fg-subtle">
                 {group.items.length} {group.items.length === 1 ? 'article' : 'articles'}
               </p>
               <ul className="mt-3 space-y-1">
@@ -66,7 +66,7 @@ export default function DocsPage() {
                   <li key={item.slug} className="text-sm text-zinc-400">{item.label}</li>
                 ))}
                 {group.items.length > 3 && (
-                  <li className="text-sm text-text-muted">+{group.items.length - 3} more</li>
+                  <li className="text-sm text-fg-subtle">+{group.items.length - 3} more</li>
                 )}
               </ul>
             </Link>
diff --git a/website/src/app/global-error.tsx b/website/src/app/global-error.tsx
index 0eb33572..c9627017 100644
--- a/website/src/app/global-error.tsx
+++ b/website/src/app/global-error.tsx
@@ -15,7 +15,7 @@ export default function GlobalError({
 
   return (
     <html lang="en">
-      <body className="bg-[#09090b] text-white">
+      <body className="bg-[#0A0A0F] text-[#F0F0F5]">
         <NextError statusCode={0} />
       </body>
     </html>
diff --git a/website/src/app/globals.css b/website/src/app/globals.css
index b8d35bfd..df23bd06 100644
--- a/website/src/app/globals.css
+++ b/website/src/app/globals.css
@@ -1,32 +1,96 @@
 @import "tailwindcss";
 @plugin "@tailwindcss/typography";
 
+/* ==========================================================================
+   SEMANTIC DESIGN TOKENS
+   One set of names, two themes. Dark is the default (:root); light mode
+   swaps the raw values on html.light. Every text/UI pair below is checked for
+   WCAG AA (4.5:1 text, 3:1 UI) against --bg, --bg-raised and --bg-overlay.
+   Components use the Tailwind utilities mapped in @theme below
+   (bg-bg, bg-bg-raised, text-fg-muted, border-border, bg-brand, text-accent,
+   ...) and never hardcode hex values.
+   ========================================================================== */
+:root {
+  color-scheme: dark;
+
+  --bg: #0A0A0F;           /* page */
+  --bg-raised: #12121A;    /* cards, code frame */
+  --bg-overlay: #1A1A24;   /* modals, menus, hover */
+
+  --fg: #F0F0F5;           /* body and headings */
+  --fg-muted: #A1A1B5;     /* secondary text */
+  --fg-subtle: #8B8BA0;    /* captions, meta */
+
+  --border: rgba(255, 255, 255, 0.08);  /* decorative hairlines */
+
+  --brand: #22C55E;        /* primary actions, GoSQLX bars */
+  --brand-fg: #052E16;     /* text on brand fills */
+  --accent: #818CF8;       /* links, focus ring */
+  --accent-fg: #0A0A0F;    /* text on accent fills */
+  --accent-warm: #FB923C;  /* sparing highlights */
+
+  --danger: #F87171;
+  --ok: #4ADE80;
+}
+
+html.light {
+  color-scheme: light;
+
+  --bg: #FAFBFC;
+  --bg-raised: #FFFFFF;
+  --bg-overlay: #F1F3F6;
+
+  --fg: #111827;
+  --fg-muted: #4B5563;
+  --fg-subtle: #5B6472;
+
+  --border: #E5E7EB;
+
+  --brand: #15803D;
+  --brand-fg: #FFFFFF;
+  --accent: #4F46E5;
+  --accent-fg: #FFFFFF;
+  --accent-warm: #9A3412;
+
+  --danger: #B91C1C;
+  --ok: #166534;
+}
+
+/* Code blocks stay dark in light mode (standard convention), so restore the
+   dark token values inside them. */
+html.light pre,
+html.light textarea[class*="font-mono"] {
+  --fg: #F0F0F5;
+  --fg-muted: #A1A1B5;
+  --fg-subtle: #8B8BA0;
+  --brand: #22C55E;
+  --accent: #818CF8;
+  --accent-warm: #FB923C;
+  --danger: #F87171;
+  --ok: #4ADE80;
+}
+
+/* `inline` makes each utility reference the runtime variable, so the
+   html.light values above reach every utility without per-class overrides. */
 @theme inline {
-  /* Existing tokens (backward compat) */
-  --color-primary: #09090b;
-  --color-surface: #18181b;
-  --color-elevated: #27272a;
-  --color-accent-indigo: #6366f1;
-  --color-accent-orange: #f97316;
-  --color-accent-green: #22c55e;
-  --color-accent-purple: #a78bfa;
-
-  /* Semantic design tokens */
-  --color-bg-deep: #0A0A0F;
-  --color-bg-surface: #12121A;
-  --color-bg-elevated: #1A1A25;
-  --color-bg-hover: #22222F;
-
-  --color-brand: #22C55E;
-  --color-brand-hover: #16A34A;
-
-  --color-text-primary: #F0F0F5;
-  --color-text-secondary: #9494A8;
-  --color-text-muted: #8B8BA0;
-  --color-link: #6366F1;
-
-  --color-border-default: rgba(255, 255, 255, 0.08);
-  --color-border-hover: rgba(255, 255, 255, 0.15);
+  --color-bg: var(--bg);
+  --color-bg-raised: var(--bg-raised);
+  --color-bg-overlay: var(--bg-overlay);
+
+  --color-fg: var(--fg);
+  --color-fg-muted: var(--fg-muted);
+  --color-fg-subtle: var(--fg-subtle);
+
+  --color-border: var(--border);
+
+  --color-brand: var(--brand);
+  --color-brand-fg: var(--brand-fg);
+  --color-accent: var(--accent);
+  --color-accent-fg: var(--accent-fg);
+  --color-accent-warm: var(--accent-warm);
+
+  --color-danger: var(--danger);
+  --color-ok: var(--ok);
 
   --font-sans: var(--font-body), system-ui, sans-serif;
   --font-heading: var(--font-heading), system-ui, sans-serif;
@@ -42,8 +106,8 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 body {
-  background-color: var(--color-primary);
-  color: #fafafa;
+  background-color: var(--bg);
+  color: var(--fg);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overflow-x: clip;
@@ -100,10 +164,18 @@ body {
 
 /* Prose dark theme overrides */
 .prose-dark {
-  --tw-prose-body: rgba(255,255,255,0.8);
-  --tw-prose-headings: #F0F0F5;
-  --tw-prose-links: #6366f1;
-  --tw-prose-code: #F0F0F5;
+  --tw-prose-body: color-mix(in srgb, var(--fg) 82%, var(--bg));
+  --tw-prose-headings: var(--fg);
+  --tw-prose-links: var(--accent);
+  --tw-prose-bold: var(--fg);
+  --tw-prose-counters: var(--fg-subtle);
+  --tw-prose-bullets: var(--fg-subtle);
+  --tw-prose-quotes: var(--fg);
+  --tw-prose-captions: var(--fg-subtle);
+  --tw-prose-hr: var(--border);
+  --tw-prose-th-borders: var(--border);
+  --tw-prose-td-borders: var(--border);
+  --tw-prose-code: var(--fg);
   --tw-prose-pre-bg: #12121A;
 }
 
@@ -114,44 +186,16 @@ body {
    We override them here to avoid touching 300+ JSX class strings.
    ========================================================================== */
 
-/* --- Design token overrides --- */
-html.light {
-  --color-primary: #FAFBFC;
-  --color-surface: #FFFFFF;
-  --color-elevated: #F3F4F6;
-  --color-bg-deep: #FAFBFC;
-  --color-bg-surface: #FFFFFF;
-  --color-bg-elevated: #F3F4F6;
-  --color-bg-hover: #E5E7EB;
-  --color-text-primary: #1A1A2E;
-  --color-text-secondary: #4B5563;
-  --color-text-muted: #5B6472;
-  --color-border-default: rgba(0, 0, 0, 0.08);
-  --color-border-hover: rgba(0, 0, 0, 0.15);
-}
-
-/* @theme inline bakes token values into utilities, so the html.light variable
-   overrides never reach them; override the muted-text utilities explicitly. */
-html.light .text-text-muted,
-html.light .placeholder\:text-text-muted::placeholder {
-  color: #5B6472;
-}
-
-/* --- Body --- */
-html.light body {
-  background-color: #FAFBFC;
-  color: #1A1A2E;
-}
+/* Token-based utilities (bg-bg, text-fg-*, bg-brand, text-accent, ...) need no
+   overrides: they switch through the html.light variables above. The rules
+   below only remain for components that still use raw zinc/slate/white
+   palette classes; delete them as those components move to tokens. */
 
 /* --- Global text color overrides ---
    !important needed because Tailwind v4 compiles utilities inside @layer
    which wins the CSS cascade over unlayered selectors. */
-html.light .text-white { color: #1A1A2E !important; }
-/* Keep text-white truly white inside accent-colored containers */
-html.light .bg-accent-indigo .text-white,
-html.light .bg-accent-green .text-white,
-html.light .bg-brand .text-white,
-html.light [class*="bg-accent-indigo"].text-white,
+html.light .text-white { color: #111827 !important; }
+/* Keep text-white truly white inside saturated palette fills */
 html.light [class*="bg-green-"].text-white,
 html.light [class*="bg-indigo-"].text-white { color: #FFFFFF !important; }
 html.light .text-zinc-100 { color: #1F2937 !important; }
@@ -202,10 +246,6 @@ html.light [class*="bg-white\\/\\[0\\.1"] { background-color: rgba(0, 0, 0, 0.06
 html.light [class*="bg-white\\/5"] { background-color: rgba(0, 0, 0, 0.03) !important; }
 html.light [class*="bg-white\\/10"] { background-color: rgba(0, 0, 0, 0.05) !important; }
 
-/* --- Primary bg (used as bg-primary on mobile menu, etc.) --- */
-html.light .bg-primary { background-color: #FAFBFC !important; }
-html.light .bg-surface { background-color: #FFFFFF !important; }
-
 /* --- Slate backgrounds (playground, panels) --- */
 html.light .bg-slate-800 { background-color: #E5E7EB !important; }
 html.light .bg-slate-900 { background-color: #F3F4F6 !important; }
@@ -308,19 +348,10 @@ html.light select option {
   color: #1A1A2E;
 }
 
-/* --- Version badge --- */
-html.light .bg-accent-indigo\\/10 {
-  background-color: rgba(99, 102, 241, 0.08);
-}
-html.light .border-accent-indigo\\/30 {
-  border-color: rgba(99, 102, 241, 0.25);
-}
-
 /* --- Hero background gradients: reduce on light mode --- */
 html.light section > [aria-hidden="true"] { opacity: 0.15; }
 
 /* --- Playground: override hardcoded arbitrary bg --- */
-html.light .bg-\[\#09090b\] { background-color: #FAFBFC !important; }
 html.light .bg-\[\#0F172A\] { background-color: #FAFBFC !important; }
 
 /* Playground select element */
@@ -357,7 +388,6 @@ html.light pre[class*="font-mono"] {
   background-color: #1E1E2E;
   color: #D4D4D8;
 }
-html.light code { color: inherit; }
 
 /* Code in MiniPlayground, hero, etc. — keep dark code blocks */
 html.light .font-mono[class*="text-zinc-300"],
@@ -376,32 +406,12 @@ html.light pre .text-zinc-300,
 html.light pre .text-zinc-400 {
   color: inherit !important;
 }
-html.light pre .text-accent-green { color: #22C55E !important; }
-html.light pre .text-accent-orange { color: #F97316 !important; }
-
-/* Accent colors on code stay vivid */
-html.light pre .text-accent-green,
-html.light pre .text-accent-orange,
-html.light textarea .text-accent-green,
-html.light textarea .text-accent-orange {
-  color: inherit;
-}
-
-/* --- Stats / accent-colored numbers --- */
-html.light .text-accent-orange { color: #EA580C !important; }
-html.light .text-accent-green { color: #16A34A !important; }
-html.light .text-accent-indigo { color: #4F46E5 !important; }
-html.light .text-accent-purple { color: #7C3AED !important; }
 
 /* --- Section borders --- */
 html.light section[class*="border-t"] { border-color: rgba(0, 0, 0, 0.06) !important; }
 html.light [class*="border-b"][class*="border-white"] { border-color: rgba(0, 0, 0, 0.06) !important; }
 
 /* --- Feature card icon tinted backgrounds --- */
-html.light [class*="bg-accent-purple\\/10"] { background-color: rgba(124, 58, 237, 0.08) !important; }
-html.light [class*="bg-accent-green\\/10"] { background-color: rgba(22, 163, 74, 0.08) !important; }
-html.light [class*="bg-accent-orange\\/10"] { background-color: rgba(234, 88, 12, 0.08) !important; }
-html.light [class*="bg-accent-indigo\\/10"] { background-color: rgba(79, 70, 229, 0.08) !important; }
 html.light [class*="bg-red-500\\/10"] { background-color: rgba(220, 38, 38, 0.08) !important; }
 html.light [class*="bg-cyan-500\\/10"] { background-color: rgba(6, 182, 212, 0.08) !important; }
 
@@ -418,10 +428,6 @@ html.light ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.2); }
 
 /* --- Prose / docs --- */
 html.light .prose-dark {
-  --tw-prose-body: rgba(0, 0, 0, 0.75);
-  --tw-prose-headings: #1A1A2E;
-  --tw-prose-links: #4F46E5;
-  --tw-prose-code: #1A1A2E;
   --tw-prose-pre-bg: #1E1E2E;
 }
 
@@ -461,10 +467,9 @@ html.light .opacity-40[class*="bg-gradient"] { opacity: 0.2; }
 
 /* Keyboard focus ring (unlayered so it wins over utility resets) */
 :focus-visible {
-  outline: 2px solid var(--color-link);
+  outline: 2px solid var(--accent);
   outline-offset: 2px;
 }
-html.light :focus-visible { outline-color: #4F46E5; }
 
 /* Respect prefers-reduced-motion for all animations */
 @media (prefers-reduced-motion: reduce) {
@@ -495,19 +500,15 @@ html.light :focus-visible { outline-color: #4F46E5; }
 /* Inline code in docs prose: no typography backticks, pill styling */
 .prose-dark :not(pre) > code {
   border-radius: 0.25rem;
-  background: rgba(255, 255, 255, 0.1);
+  background: color-mix(in srgb, var(--fg) 8%, transparent);
   padding: 0.125rem 0.375rem;
   font-size: 0.875em;
-  color: #e4e4e7;
+  color: var(--fg);
 }
 .prose-dark :not(pre) > code::before,
 .prose-dark :not(pre) > code::after {
   content: none;
 }
-html.light .prose-dark :not(pre) > code {
-  background: rgba(0, 0, 0, 0.06);
-  color: #1f2937;
-}
 
 /* Skip rendering offscreen code blocks and tables on long docs pages. */
 .prose pre,
diff --git a/website/src/app/playground/page.tsx b/website/src/app/playground/page.tsx
index 09381d82..e56797b8 100644
--- a/website/src/app/playground/page.tsx
+++ b/website/src/app/playground/page.tsx
@@ -21,11 +21,11 @@ export default function PlaygroundPage() {
         crossOrigin="anonymous"
       />
       <ServiceWorkerRegister />
-      <div className="border-b border-slate-800 bg-slate-900/50 px-4 py-3">
-        <h1 className="text-lg font-semibold text-slate-100">
+      <div className="border-b border-border bg-bg-raised px-4 py-3">
+        <h1 className="text-lg font-semibold text-fg">
           Online Go SQL Parser Playground
         </h1>
-        <p className="mt-1 max-w-3xl text-sm text-slate-400">
+        <p className="mt-1 max-w-3xl text-sm text-fg-muted">
           Parse, format, lint, and analyze SQL right in your browser with
           GoSQLX compiled to WebAssembly. Pick a dialect (PostgreSQL, MySQL,
           SQL Server, Oracle, SQLite, Snowflake, ClickHouse), paste a query, and
diff --git a/website/src/app/vscode/VscodeContent.tsx b/website/src/app/vscode/VscodeContent.tsx
index 087455af..f9e71d4d 100644
--- a/website/src/app/vscode/VscodeContent.tsx
+++ b/website/src/app/vscode/VscodeContent.tsx
@@ -99,7 +99,7 @@ export function VscodeContent() {
                 role="region"
                 aria-label="Key Settings JSON"
                 tabIndex={0}
-                className="font-mono text-sm text-zinc-300 whitespace-pre overflow-x-auto"
+                className="font-mono text-sm text-fg whitespace-pre overflow-x-auto"
               >
 {`{
   "gosqlx.executablePath": "/usr/local/bin/gosqlx",
diff --git a/website/src/components/benchmarks/BarChart.tsx b/website/src/components/benchmarks/BarChart.tsx
index 7cb963b6..ff50bfb5 100644
--- a/website/src/components/benchmarks/BarChart.tsx
+++ b/website/src/components/benchmarks/BarChart.tsx
@@ -62,7 +62,7 @@ export function BarChart({ data, unit = 'ops/sec' }: BarChartProps) {
               <span className={`text-sm font-medium ${item.highlight ? 'text-white' : 'text-zinc-400'}`}>
                 {item.label}
                 {item.highlight && (
-                  <span className="ml-2 inline-block rounded-full bg-green-500/20 px-2 py-0.5 text-xs font-medium text-green-300">
+                  <span className="ml-2 inline-block rounded-full border border-brand/40 px-2 py-0.5 text-xs font-medium text-brand">
                     GoSQLX
                   </span>
                 )}
diff --git a/website/src/components/benchmarks/RawDataToggle.tsx b/website/src/components/benchmarks/RawDataToggle.tsx
index a1261e3d..57737636 100644
--- a/website/src/components/benchmarks/RawDataToggle.tsx
+++ b/website/src/components/benchmarks/RawDataToggle.tsx
@@ -11,7 +11,7 @@ export function RawDataToggle({ id, children }: { id: string; children: React.Re
       <button
         type="button"
         onClick={() => setOpen((prev) => !prev)}
-        className="text-xs text-text-muted hover:text-zinc-300 transition-colors flex items-center gap-1"
+        className="text-xs text-fg-subtle hover:text-zinc-300 transition-colors flex items-center gap-1"
         aria-expanded={open}
         aria-controls={panelId}
       >
diff --git a/website/src/components/docs/CopyButton.tsx b/website/src/components/docs/CopyButton.tsx
index 4ae7be13..9f857a85 100644
--- a/website/src/components/docs/CopyButton.tsx
+++ b/website/src/components/docs/CopyButton.tsx
@@ -38,7 +38,7 @@ export function CopyButton({ text }: { text: string }) {
           className="block"
         >
           {copied ? (
-            <svg className="h-4 w-4 text-accent-green" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <svg className="h-4 w-4 text-brand" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
               <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
             </svg>
           ) : failed ? (
diff --git a/website/src/components/docs/DocNavigation.tsx b/website/src/components/docs/DocNavigation.tsx
index 626214e3..86f405a2 100644
--- a/website/src/components/docs/DocNavigation.tsx
+++ b/website/src/components/docs/DocNavigation.tsx
@@ -18,7 +18,7 @@ export function DocNavigation({ prev, next }: DocNavigationProps) {
           href={`/docs/${prev.slug}`}
           className="glass glass-hover group flex flex-col gap-2 rounded-xl p-5 transition-all"
         >
-          <span className="text-xs font-medium uppercase tracking-wider text-text-muted">
+          <span className="text-xs font-medium uppercase tracking-wider text-fg-subtle">
             Previous
           </span>
           <span className="flex items-center gap-2 text-sm font-medium text-zinc-300 transition-colors group-hover:text-white">
@@ -42,7 +42,7 @@ export function DocNavigation({ prev, next }: DocNavigationProps) {
           href={`/docs/${next.slug}`}
           className="glass glass-hover group flex flex-col items-end gap-2 rounded-xl p-5 text-right transition-all"
         >
-          <span className="text-xs font-medium uppercase tracking-wider text-text-muted">
+          <span className="text-xs font-medium uppercase tracking-wider text-fg-subtle">
             Next
           </span>
           <span className="flex items-center gap-2 text-sm font-medium text-zinc-300 transition-colors group-hover:text-white">
diff --git a/website/src/components/docs/DocsSearchTrigger.tsx b/website/src/components/docs/DocsSearchTrigger.tsx
index a40a22f8..035b27b4 100644
--- a/website/src/components/docs/DocsSearchTrigger.tsx
+++ b/website/src/components/docs/DocsSearchTrigger.tsx
@@ -16,7 +16,7 @@ export function DocsSearchTrigger() {
     <button
       type="button"
       onClick={openSearch}
-      className="mx-auto mb-12 flex w-full max-w-md items-center gap-3 rounded-xl border border-white/[0.08] bg-white/[0.03] px-4 py-3 text-sm text-text-muted transition-colors hover:border-white/[0.12] hover:bg-white/[0.06] hover:text-zinc-400"
+      className="mx-auto mb-12 flex w-full max-w-md items-center gap-3 rounded-xl border border-white/[0.08] bg-white/[0.03] px-4 py-3 text-sm text-fg-subtle transition-colors hover:border-white/[0.12] hover:bg-white/[0.06] hover:text-zinc-400"
       aria-label="Search documentation"
     >
       <svg
@@ -33,7 +33,7 @@ export function DocsSearchTrigger() {
         />
       </svg>
       <span className="flex-1 text-left">Search documentation...</span>
-      <kbd className="font-mono text-[10px] text-text-muted border border-white/[0.08] rounded px-1.5 py-0.5 bg-white/[0.03]">
+      <kbd className="font-mono text-[10px] text-fg-subtle border border-white/[0.08] rounded px-1.5 py-0.5 bg-white/[0.03]">
         &#8984;K
       </kbd>
     </button>
diff --git a/website/src/components/docs/Sidebar.tsx b/website/src/components/docs/Sidebar.tsx
index f76546c8..ef2c5baa 100644
--- a/website/src/components/docs/Sidebar.tsx
+++ b/website/src/components/docs/Sidebar.tsx
@@ -61,7 +61,7 @@ export function Sidebar() {
                     aria-current={isActive(item.slug) ? 'page' : undefined}
                     className={`flex items-center rounded-md px-3 py-1.5 max-lg:min-h-11 text-sm transition-colors ${
                       isActive(item.slug)
-                        ? 'border-l-2 border-accent-indigo bg-accent-indigo/10 pl-[10px] text-white font-medium'
+                        ? 'border-l-2 border-accent bg-accent/10 pl-[10px] text-white font-medium'
                         : 'border-l-2 border-transparent pl-[10px] text-zinc-400 hover:text-white hover:bg-white/5'
                     }`}
                   >
@@ -81,7 +81,7 @@ export function Sidebar() {
       {/* Mobile toggle */}
       <button
         onClick={() => setMobileOpen(!mobileOpen)}
-        className="fixed bottom-4 right-4 z-50 flex h-12 w-12 items-center justify-center rounded-full bg-accent-indigo text-white shadow-lg lg:hidden"
+        className="fixed bottom-4 right-4 z-50 flex h-12 w-12 items-center justify-center rounded-full bg-accent text-accent-fg shadow-lg lg:hidden"
         aria-label="Toggle docs sidebar"
       >
         <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -100,7 +100,7 @@ export function Sidebar() {
 
       {/* Sidebar */}
       <aside
-        className={`fixed top-16 z-40 h-[calc(100vh-4rem)] w-64 overflow-y-auto border-r border-white/5 bg-surface px-2 transition-transform lg:sticky lg:translate-x-0 lg:bg-transparent ${
+        className={`fixed top-16 z-40 h-[calc(100vh-4rem)] w-64 overflow-y-auto border-r border-white/5 bg-bg-raised px-2 transition-transform lg:sticky lg:translate-x-0 lg:bg-transparent ${
           mobileOpen ? 'translate-x-0' : '-translate-x-full'
         }`}
       >
diff --git a/website/src/components/docs/Toc.tsx b/website/src/components/docs/Toc.tsx
index a003c6c4..b0d8da39 100644
--- a/website/src/components/docs/Toc.tsx
+++ b/website/src/components/docs/Toc.tsx
@@ -38,7 +38,7 @@ export function Toc({ headings }: TocProps) {
 
   return (
     <nav className="sticky top-20 hidden xl:block">
-      <h4 className="mb-3 text-xs font-semibold uppercase tracking-wider text-text-muted">
+      <h4 className="mb-3 text-xs font-semibold uppercase tracking-wider text-fg-subtle">
         On this page
       </h4>
       <ul className="space-y-1.5 text-sm">
@@ -53,7 +53,7 @@ export function Toc({ headings }: TocProps) {
                 activeId === heading.id
                   ? 'text-white font-medium'
                   : heading.level === 3
-                  ? 'text-text-muted hover:text-zinc-300'
+                  ? 'text-fg-subtle hover:text-zinc-300'
                   : 'text-zinc-400 hover:text-zinc-300'
               }`}
             >
diff --git a/website/src/components/docs/mdx-components.tsx b/website/src/components/docs/mdx-components.tsx
index 5158d5d0..21fdc688 100644
--- a/website/src/components/docs/mdx-components.tsx
+++ b/website/src/components/docs/mdx-components.tsx
@@ -13,7 +13,7 @@ function HeadingAnchor({ id, level, children }: { id?: string; level: number; ch
           'a',
           {
             href: `#${id}`,
-            className: 'ml-2 text-text-muted opacity-0 transition-opacity group-hover:opacity-100',
+            className: 'ml-2 text-fg-subtle opacity-0 transition-opacity group-hover:opacity-100',
             'aria-label': 'Link to heading',
           },
           '#'
@@ -31,7 +31,7 @@ export const mdxComponents = {
   h6: (props: ComponentPropsWithoutRef<'h6'>) => <HeadingAnchor level={6} {...props} />,
 
   a: (props: ComponentPropsWithoutRef<'a'>) => (
-    <a {...props} className="text-accent-indigo hover:underline" target={props.href?.startsWith('http') ? '_blank' : undefined} rel={props.href?.startsWith('http') ? 'noopener noreferrer' : undefined} />
+    <a {...props} className="text-accent hover:underline" target={props.href?.startsWith('http') ? '_blank' : undefined} rel={props.href?.startsWith('http') ? 'noopener noreferrer' : undefined} />
   ),
 
   pre: ({ children, ...props }: ComponentPropsWithoutRef<'pre'>) => {
@@ -52,7 +52,7 @@ export const mdxComponents = {
         <pre
           {...props}
           tabIndex={0}
-          className="overflow-x-auto rounded-lg border border-white/5 bg-surface p-4 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500/50 focus:ring-offset-1 focus:ring-offset-zinc-900"
+          className="overflow-x-auto rounded-lg border border-white/5 bg-bg-raised p-4 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500/50 focus:ring-offset-1 focus:ring-offset-zinc-900"
         >
           {children}
         </pre>
@@ -66,7 +66,7 @@ export const mdxComponents = {
   },
 
   blockquote: (props: ComponentPropsWithoutRef<'blockquote'>) => (
-    <blockquote {...props} className="border-l-2 border-accent-indigo bg-surface/50 pl-4 py-2 italic text-zinc-400" />
+    <blockquote {...props} className="border-l-2 border-accent bg-bg-raised/50 pl-4 py-2 italic text-zinc-400" />
   ),
 
   table: (props: ComponentPropsWithoutRef<'table'>) => (
diff --git a/website/src/components/home/CodeExamples.tsx b/website/src/components/home/CodeExamples.tsx
index e147bcf4..786b243f 100644
--- a/website/src/components/home/CodeExamples.tsx
+++ b/website/src/components/home/CodeExamples.tsx
@@ -12,14 +12,14 @@ const tabs: { label: string; lines: CodeLine[] }[] = [
   {
     label: 'Parse',
     lines: [
-      [{ text: 'package', cls: 'text-accent-indigo' }, { text: ' main', cls: 'text-white' }],
+      [{ text: 'package', cls: 'text-accent' }, { text: ' main', cls: 'text-white' }],
       [],
-      [{ text: 'import', cls: 'text-accent-indigo' }, { text: ' ', cls: '' }, { text: '"github.com/ajitpratap0/GoSQLX/pkg/gosqlx"', cls: 'text-accent-green' }],
+      [{ text: 'import', cls: 'text-accent' }, { text: ' ', cls: '' }, { text: '"github.com/ajitpratap0/GoSQLX/pkg/gosqlx"', cls: 'text-brand' }],
       [],
-      [{ text: 'func', cls: 'text-accent-indigo' }, { text: ' main', cls: 'text-accent-orange' }, { text: '() {', cls: 'text-zinc-300' }],
-      [{ text: '    ', cls: '' }, { text: '// Parse SQL into an AST', cls: 'text-text-muted' }],
-      [{ text: '    ast, err := gosqlx.', cls: 'text-zinc-300' }, { text: 'Parse', cls: 'text-accent-orange' }, { text: '(', cls: 'text-zinc-300' }, { text: '"SELECT * FROM users WHERE active = true"', cls: 'text-accent-green' }, { text: ')', cls: 'text-zinc-300' }],
-      [{ text: '    ', cls: '' }, { text: 'if', cls: 'text-accent-indigo' }, { text: ' err != nil {', cls: 'text-zinc-300' }],
+      [{ text: 'func', cls: 'text-accent' }, { text: ' main', cls: 'text-accent-warm' }, { text: '() {', cls: 'text-zinc-300' }],
+      [{ text: '    ', cls: '' }, { text: '// Parse SQL into an AST', cls: 'text-fg-subtle' }],
+      [{ text: '    ast, err := gosqlx.', cls: 'text-zinc-300' }, { text: 'Parse', cls: 'text-accent-warm' }, { text: '(', cls: 'text-zinc-300' }, { text: '"SELECT * FROM users WHERE active = true"', cls: 'text-brand' }, { text: ')', cls: 'text-zinc-300' }],
+      [{ text: '    ', cls: '' }, { text: 'if', cls: 'text-accent' }, { text: ' err != nil {', cls: 'text-zinc-300' }],
       [{ text: '        log.Fatal(err)', cls: 'text-zinc-300' }],
       [{ text: '    }', cls: 'text-zinc-300' }],
       [{ text: '    fmt.Println(ast.Statements)', cls: 'text-zinc-300' }],
@@ -29,14 +29,14 @@ const tabs: { label: string; lines: CodeLine[] }[] = [
   {
     label: 'Format',
     lines: [
-      [{ text: 'package', cls: 'text-accent-indigo' }, { text: ' main', cls: 'text-white' }],
+      [{ text: 'package', cls: 'text-accent' }, { text: ' main', cls: 'text-white' }],
       [],
-      [{ text: 'import', cls: 'text-accent-indigo' }, { text: ' ', cls: '' }, { text: '"github.com/ajitpratap0/GoSQLX/pkg/gosqlx"', cls: 'text-accent-green' }],
+      [{ text: 'import', cls: 'text-accent' }, { text: ' ', cls: '' }, { text: '"github.com/ajitpratap0/GoSQLX/pkg/gosqlx"', cls: 'text-brand' }],
       [],
-      [{ text: 'func', cls: 'text-accent-indigo' }, { text: ' main', cls: 'text-accent-orange' }, { text: '() {', cls: 'text-zinc-300' }],
-      [{ text: '    ', cls: '' }, { text: '// Format messy SQL', cls: 'text-text-muted' }],
-      [{ text: '    formatted, err := gosqlx.', cls: 'text-zinc-300' }, { text: 'Format', cls: 'text-accent-orange' }, { text: '(', cls: 'text-zinc-300' }, { text: '"select id,name from users where id>5"', cls: 'text-accent-green' }, { text: ')', cls: 'text-zinc-300' }],
-      [{ text: '    ', cls: '' }, { text: 'if', cls: 'text-accent-indigo' }, { text: ' err != nil {', cls: 'text-zinc-300' }],
+      [{ text: 'func', cls: 'text-accent' }, { text: ' main', cls: 'text-accent-warm' }, { text: '() {', cls: 'text-zinc-300' }],
+      [{ text: '    ', cls: '' }, { text: '// Format messy SQL', cls: 'text-fg-subtle' }],
+      [{ text: '    formatted, err := gosqlx.', cls: 'text-zinc-300' }, { text: 'Format', cls: 'text-accent-warm' }, { text: '(', cls: 'text-zinc-300' }, { text: '"select id,name from users where id>5"', cls: 'text-brand' }, { text: ')', cls: 'text-zinc-300' }],
+      [{ text: '    ', cls: '' }, { text: 'if', cls: 'text-accent' }, { text: ' err != nil {', cls: 'text-zinc-300' }],
       [{ text: '        log.Fatal(err)', cls: 'text-zinc-300' }],
       [{ text: '    }', cls: 'text-zinc-300' }],
       [{ text: '    fmt.Println(formatted)', cls: 'text-zinc-300' }],
@@ -46,15 +46,15 @@ const tabs: { label: string; lines: CodeLine[] }[] = [
   {
     label: 'Validate',
     lines: [
-      [{ text: 'package', cls: 'text-accent-indigo' }, { text: ' main', cls: 'text-white' }],
+      [{ text: 'package', cls: 'text-accent' }, { text: ' main', cls: 'text-white' }],
       [],
-      [{ text: 'import', cls: 'text-accent-indigo' }, { text: ' ', cls: '' }, { text: '"github.com/ajitpratap0/GoSQLX/pkg/gosqlx"', cls: 'text-accent-green' }],
+      [{ text: 'import', cls: 'text-accent' }, { text: ' ', cls: '' }, { text: '"github.com/ajitpratap0/GoSQLX/pkg/gosqlx"', cls: 'text-brand' }],
       [],
-      [{ text: 'func', cls: 'text-accent-indigo' }, { text: ' main', cls: 'text-accent-orange' }, { text: '() {', cls: 'text-zinc-300' }],
-      [{ text: '    ', cls: '' }, { text: '// Validate SQL syntax', cls: 'text-text-muted' }],
-      [{ text: '    result := gosqlx.', cls: 'text-zinc-300' }, { text: 'Validate', cls: 'text-accent-orange' }, { text: '(', cls: 'text-zinc-300' }, { text: '"SELECT * FROM users"', cls: 'text-accent-green' }, { text: ')', cls: 'text-zinc-300' }],
-      [{ text: '    ', cls: '' }, { text: 'if', cls: 'text-accent-indigo' }, { text: ' result.Valid {', cls: 'text-zinc-300' }],
-      [{ text: '        fmt.Println(', cls: 'text-zinc-300' }, { text: '"SQL is valid!"', cls: 'text-accent-green' }, { text: ')', cls: 'text-zinc-300' }],
+      [{ text: 'func', cls: 'text-accent' }, { text: ' main', cls: 'text-accent-warm' }, { text: '() {', cls: 'text-zinc-300' }],
+      [{ text: '    ', cls: '' }, { text: '// Validate SQL syntax', cls: 'text-fg-subtle' }],
+      [{ text: '    result := gosqlx.', cls: 'text-zinc-300' }, { text: 'Validate', cls: 'text-accent-warm' }, { text: '(', cls: 'text-zinc-300' }, { text: '"SELECT * FROM users"', cls: 'text-brand' }, { text: ')', cls: 'text-zinc-300' }],
+      [{ text: '    ', cls: '' }, { text: 'if', cls: 'text-accent' }, { text: ' result.Valid {', cls: 'text-zinc-300' }],
+      [{ text: '        fmt.Println(', cls: 'text-zinc-300' }, { text: '"SQL is valid!"', cls: 'text-brand' }, { text: ')', cls: 'text-zinc-300' }],
       [{ text: '    }', cls: 'text-zinc-300' }],
       [{ text: '}', cls: 'text-zinc-300' }],
     ],
@@ -62,19 +62,19 @@ const tabs: { label: string; lines: CodeLine[] }[] = [
   {
     label: 'Lint',
     lines: [
-      [{ text: 'package', cls: 'text-accent-indigo' }, { text: ' main', cls: 'text-white' }],
+      [{ text: 'package', cls: 'text-accent' }, { text: ' main', cls: 'text-white' }],
       [],
-      [{ text: 'import', cls: 'text-accent-indigo' }, { text: ' ', cls: '' }, { text: '"github.com/ajitpratap0/GoSQLX/pkg/gosqlx"', cls: 'text-accent-green' }],
+      [{ text: 'import', cls: 'text-accent' }, { text: ' ', cls: '' }, { text: '"github.com/ajitpratap0/GoSQLX/pkg/gosqlx"', cls: 'text-brand' }],
       [],
-      [{ text: 'func', cls: 'text-accent-indigo' }, { text: ' main', cls: 'text-accent-orange' }, { text: '() {', cls: 'text-zinc-300' }],
-      [{ text: '    ', cls: '' }, { text: '// Lint SQL for best practices', cls: 'text-text-muted' }],
-      [{ text: '    issues, err := gosqlx.', cls: 'text-zinc-300' }, { text: 'Lint', cls: 'text-accent-orange' }, { text: '(', cls: 'text-zinc-300' }, { text: '"SELECT * FROM orders"', cls: 'text-accent-green' }, { text: ')', cls: 'text-zinc-300' }],
-      [{ text: '    ', cls: '' }, { text: 'if', cls: 'text-accent-indigo' }, { text: ' err != nil {', cls: 'text-zinc-300' }],
+      [{ text: 'func', cls: 'text-accent' }, { text: ' main', cls: 'text-accent-warm' }, { text: '() {', cls: 'text-zinc-300' }],
+      [{ text: '    ', cls: '' }, { text: '// Lint SQL for best practices', cls: 'text-fg-subtle' }],
+      [{ text: '    issues, err := gosqlx.', cls: 'text-zinc-300' }, { text: 'Lint', cls: 'text-accent-warm' }, { text: '(', cls: 'text-zinc-300' }, { text: '"SELECT * FROM orders"', cls: 'text-brand' }, { text: ')', cls: 'text-zinc-300' }],
+      [{ text: '    ', cls: '' }, { text: 'if', cls: 'text-accent' }, { text: ' err != nil {', cls: 'text-zinc-300' }],
       [{ text: '        log.Fatal(err)', cls: 'text-zinc-300' }],
       [{ text: '    }', cls: 'text-zinc-300' }],
       [],
-      [{ text: '    ', cls: '' }, { text: 'for', cls: 'text-accent-indigo' }, { text: ' _, issue := ', cls: 'text-zinc-300' }, { text: 'range', cls: 'text-accent-indigo' }, { text: ' issues {', cls: 'text-zinc-300' }],
-      [{ text: '        fmt.Printf(', cls: 'text-zinc-300' }, { text: '"%s: %s\\n"', cls: 'text-accent-green' }, { text: ', issue.Code, issue.Message)', cls: 'text-zinc-300' }],
+      [{ text: '    ', cls: '' }, { text: 'for', cls: 'text-accent' }, { text: ' _, issue := ', cls: 'text-zinc-300' }, { text: 'range', cls: 'text-accent' }, { text: ' issues {', cls: 'text-zinc-300' }],
+      [{ text: '        fmt.Printf(', cls: 'text-zinc-300' }, { text: '"%s: %s\\n"', cls: 'text-brand' }, { text: ', issue.Code, issue.Message)', cls: 'text-zinc-300' }],
       [{ text: '    }', cls: 'text-zinc-300' }],
       [{ text: '}', cls: 'text-zinc-300' }],
     ],
@@ -84,7 +84,7 @@ const tabs: { label: string; lines: CodeLine[] }[] = [
 function renderCode(lines: CodeLine[]) {
   return lines.map((line, idx) => (
     <div key={idx} className="flex">
-      <span className="w-8 text-right text-text-muted select-none mr-4 shrink-0">{idx + 1}</span>
+      <span className="w-8 text-right text-fg-subtle select-none mr-4 shrink-0">{idx + 1}</span>
       <span className="flex-1 whitespace-pre">
         {line.length === 0
           ? <>&nbsp;</>
@@ -119,13 +119,13 @@ export function CodeExamples() {
                   setSwitched(true);
                 }}
                 className={`relative px-4 py-2 text-sm font-medium rounded-t-lg transition-colors ${
-                  active === i ? 'text-white' : 'text-text-muted hover:text-zinc-300'
+                  active === i ? 'text-white' : 'text-fg-subtle hover:text-zinc-300'
                 }`}
               >
                 {tab.label}
                 <span
                   aria-hidden="true"
-                  className={`absolute bottom-0 left-0 right-0 h-0.5 bg-accent-indigo origin-left transition-transform duration-300 ease-out ${
+                  className={`absolute bottom-0 left-0 right-0 h-0.5 bg-accent origin-left transition-transform duration-300 ease-out ${
                     active === i ? 'scale-x-100' : 'scale-x-0'
                   }`}
                 />
@@ -137,7 +137,7 @@ export function CodeExamples() {
               <div className="w-3 h-3 rounded-full bg-red-500/60" />
               <div className="w-3 h-3 rounded-full bg-yellow-500/60" />
               <div className="w-3 h-3 rounded-full bg-green-500/60" />
-              <span className="text-xs text-text-muted ml-2">main.go</span>
+              <span className="text-xs text-fg-subtle ml-2">main.go</span>
             </div>
             <div className="p-4 font-mono text-sm leading-relaxed overflow-x-auto">
               <m.div
diff --git a/website/src/components/home/CtaBanner.tsx b/website/src/components/home/CtaBanner.tsx
index f055bd8d..4906a0ff 100644
--- a/website/src/components/home/CtaBanner.tsx
+++ b/website/src/components/home/CtaBanner.tsx
@@ -6,9 +6,9 @@ export function CtaBanner() {
     <section className="py-20 relative overflow-clip">
       {/* Gradient mesh background */}
       <div className="absolute inset-0 -z-10">
-        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[400px] bg-accent-indigo/[0.07] rounded-full blur-[120px]" />
-        <div className="absolute top-1/3 left-1/4 w-[300px] h-[300px] bg-accent-purple/[0.05] rounded-full blur-[100px]" />
-        <div className="absolute bottom-1/3 right-1/4 w-[300px] h-[300px] bg-accent-orange/[0.04] rounded-full blur-[100px]" />
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[400px] bg-accent/[0.07] rounded-full blur-[120px]" />
+        <div className="absolute top-1/3 left-1/4 w-[300px] h-[300px] bg-accent/[0.05] rounded-full blur-[100px]" />
+        <div className="absolute bottom-1/3 right-1/4 w-[300px] h-[300px] bg-accent-warm/[0.04] rounded-full blur-[100px]" />
       </div>
 
       <div className="max-w-6xl mx-auto px-4 text-center">
diff --git a/website/src/components/home/DialectShowcase.tsx b/website/src/components/home/DialectShowcase.tsx
index 593dc3be..ed7aa575 100644
--- a/website/src/components/home/DialectShowcase.tsx
+++ b/website/src/components/home/DialectShowcase.tsx
@@ -5,7 +5,6 @@ import { FadeIn } from '@/components/ui/FadeIn';
 interface Dialect {
   name: string;
   abbr: string;
-  color: string;
   bgColor: string;
   compliance: number;
   detail?: string;
@@ -13,28 +12,28 @@ interface Dialect {
 }
 
 const DIALECTS: Dialect[] = [
-  { name: 'PostgreSQL', abbr: 'PG', color: 'text-blue-400', bgColor: 'bg-blue-500/20', compliance: 95, status: 'Excellent' },
-  { name: 'MySQL', abbr: 'My', color: 'text-orange-400', bgColor: 'bg-orange-500/20', compliance: 95, status: 'Excellent' },
-  { name: 'MariaDB', abbr: 'Ma', color: 'text-sky-400', bgColor: 'bg-sky-500/20', compliance: 95, status: 'Excellent' },
-  { name: 'SQL Server', abbr: 'MS', color: 'text-red-400', bgColor: 'bg-red-500/20', compliance: 85, status: 'Very Good' },
-  { name: 'Oracle', abbr: 'Or', color: 'text-rose-400', bgColor: 'bg-rose-500/20', compliance: 80, status: 'Good' },
-  { name: 'SQLite', abbr: 'SL', color: 'text-emerald-400', bgColor: 'bg-emerald-500/20', compliance: 85, status: 'Very Good' },
-  { name: 'Snowflake', abbr: 'SF', color: 'text-cyan-400', bgColor: 'bg-cyan-500/20', compliance: Math.round((QA_CORPUS.snowflake.pass / QA_CORPUS.snowflake.total) * 100), detail: `${QA_CORPUS.snowflake.pass}/${QA_CORPUS.snowflake.total} QA`, status: 'Excellent' },
-  { name: 'ClickHouse', abbr: 'CH', color: 'text-yellow-400', bgColor: 'bg-yellow-500/20', compliance: Math.round((QA_CORPUS.clickhouse.pass / QA_CORPUS.clickhouse.total) * 100), detail: `${QA_CORPUS.clickhouse.pass}/${QA_CORPUS.clickhouse.total} QA`, status: 'Good' },
+  { name: 'PostgreSQL', abbr: 'PG', bgColor: 'bg-blue-500/20', compliance: 95, status: 'Excellent' },
+  { name: 'MySQL', abbr: 'My', bgColor: 'bg-orange-500/20', compliance: 95, status: 'Excellent' },
+  { name: 'MariaDB', abbr: 'Ma', bgColor: 'bg-sky-500/20', compliance: 95, status: 'Excellent' },
+  { name: 'SQL Server', abbr: 'MS', bgColor: 'bg-red-500/20', compliance: 85, status: 'Very Good' },
+  { name: 'Oracle', abbr: 'Or', bgColor: 'bg-rose-500/20', compliance: 80, status: 'Good' },
+  { name: 'SQLite', abbr: 'SL', bgColor: 'bg-emerald-500/20', compliance: 85, status: 'Very Good' },
+  { name: 'Snowflake', abbr: 'SF', bgColor: 'bg-cyan-500/20', compliance: Math.round((QA_CORPUS.snowflake.pass / QA_CORPUS.snowflake.total) * 100), detail: `${QA_CORPUS.snowflake.pass}/${QA_CORPUS.snowflake.total} QA`, status: 'Excellent' },
+  { name: 'ClickHouse', abbr: 'CH', bgColor: 'bg-yellow-500/20', compliance: Math.round((QA_CORPUS.clickhouse.pass / QA_CORPUS.clickhouse.total) * 100), detail: `${QA_CORPUS.clickhouse.pass}/${QA_CORPUS.clickhouse.total} QA`, status: 'Good' },
 ];
 
 const statusColors: Record<Dialect['status'], string> = {
-  'Excellent': 'bg-green-500/15 text-green-400 border-green-500/20',
-  'Very Good': 'bg-blue-500/15 text-blue-400 border-blue-500/20',
-  'Good': 'bg-yellow-500/15 text-yellow-400 border-yellow-500/20',
-  'In Progress': 'bg-zinc-500/15 text-zinc-400 border-zinc-500/20',
+  'Excellent': 'bg-ok/10 text-ok border-ok/20',
+  'Very Good': 'bg-accent/10 text-accent border-accent/20',
+  'Good': 'bg-accent-warm/10 text-accent-warm border-accent-warm/20',
+  'In Progress': 'bg-fg-subtle/10 text-fg-subtle border-border',
 };
 
 function complianceColor(pct: number): string {
-  if (pct >= 95) return 'text-green-400';
-  if (pct >= 85) return 'text-blue-400';
-  if (pct >= 80) return 'text-yellow-400';
-  return 'text-zinc-400';
+  if (pct >= 95) return 'text-ok';
+  if (pct >= 85) return 'text-accent';
+  if (pct >= 80) return 'text-accent-warm';
+  return 'text-fg-subtle';
 }
 
 export function DialectShowcase() {
@@ -54,7 +53,7 @@ export function DialectShowcase() {
             <FadeIn viewport key={dialect.name} delay={i * 0.08}>
               <GlassCard className="p-5 h-full text-center">
                 <div
-                  className={`w-11 h-11 rounded-full ${dialect.bgColor} ${dialect.color} flex items-center justify-center mx-auto mb-3 text-sm font-bold`}
+                  className={`w-11 h-11 rounded-full ${dialect.bgColor} text-fg flex items-center justify-center mx-auto mb-3 text-sm font-bold`}
                 >
                   {dialect.abbr}
                 </div>
@@ -65,7 +64,7 @@ export function DialectShowcase() {
                   {dialect.compliance}%
                 </p>
                 {dialect.detail && (
-                  <p className="text-xs text-text-muted mb-2">{dialect.detail}</p>
+                  <p className="text-xs text-fg-subtle mb-2">{dialect.detail}</p>
                 )}
                 <span
                   className={`inline-block text-xs font-medium px-2.5 py-0.5 rounded-full border ${statusColors[dialect.status]}`}
diff --git a/website/src/components/home/FeatureGrid.tsx b/website/src/components/home/FeatureGrid.tsx
index 69fd2d24..f7ae32c7 100644
--- a/website/src/components/home/FeatureGrid.tsx
+++ b/website/src/components/home/FeatureGrid.tsx
@@ -36,11 +36,10 @@ const icons: Record<string, React.ReactNode> = {
 };
 
 const colorMap: Record<string, string> = {
-  'accent-purple': 'bg-accent-purple/10 text-accent-purple',
-  'accent-green': 'bg-accent-green/10 text-accent-green',
-  'accent-orange': 'bg-accent-orange/10 text-accent-orange',
-  'accent-indigo': 'bg-accent-indigo/10 text-accent-indigo',
-  'red': 'bg-red-500/10 text-red-400',
+  'brand': 'bg-brand/10 text-brand',
+  'accent-warm': 'bg-accent-warm/10 text-accent-warm',
+  'accent': 'bg-accent/10 text-accent',
+  'danger': 'bg-danger/10 text-danger',
   'cyan': 'bg-cyan-500/10 text-cyan-400',
 };
 
diff --git a/website/src/components/home/McpSection.tsx b/website/src/components/home/McpSection.tsx
index 51773faf..0a357cf1 100644
--- a/website/src/components/home/McpSection.tsx
+++ b/website/src/components/home/McpSection.tsx
@@ -47,7 +47,7 @@ export function McpSection() {
           <div className="mt-8">
             <Link
               href="/docs/mcp-guide"
-              className="text-sm text-accent-indigo hover:underline inline-flex items-center gap-1"
+              className="text-sm text-accent hover:underline inline-flex items-center gap-1"
             >
               Learn more →
             </Link>
diff --git a/website/src/components/home/MiniPlayground.tsx b/website/src/components/home/MiniPlayground.tsx
index 1cc6d27c..11ac7331 100644
--- a/website/src/components/home/MiniPlayground.tsx
+++ b/website/src/components/home/MiniPlayground.tsx
@@ -151,7 +151,7 @@ export function MiniPlayground() {
             onChange={handleSqlChange}
             spellCheck={false}
             aria-label="SQL query input"
-            className="w-full p-4 text-[14px] leading-relaxed font-mono bg-transparent resize-none max-h-[320px] min-h-[200px] focus:outline-none focus:ring-2 focus:ring-accent-indigo/50 overflow-auto"
+            className="w-full p-4 text-[14px] leading-relaxed font-mono bg-transparent resize-none max-h-[320px] min-h-[200px] focus:outline-none focus:ring-2 focus:ring-accent/50 overflow-auto"
             style={{ color: '#D4D4D8' }}
             rows={12}
           />
@@ -182,7 +182,7 @@ export function MiniPlayground() {
               </button>
             ))}
           </div>
-          <span className="ml-auto text-xs font-mono text-emerald-400">
+          <span className="ml-auto text-xs font-mono text-brand">
             {!wasmRequested
               ? 'Precomputed sample output'
               : loading
@@ -212,7 +212,7 @@ export function MiniPlayground() {
         <div className="px-4 py-2 border-t border-white/[0.06]">
           <Link
             href="/playground"
-            className="text-xs text-indigo-400 hover:text-indigo-300 transition-colors font-medium"
+            className="text-xs text-accent hover:underline font-medium"
           >
             Open Full Playground &rarr;
           </Link>
diff --git a/website/src/components/home/PerformanceSection.tsx b/website/src/components/home/PerformanceSection.tsx
index 6e7b7b79..72a86d8e 100644
--- a/website/src/components/home/PerformanceSection.tsx
+++ b/website/src/components/home/PerformanceSection.tsx
@@ -16,10 +16,10 @@ interface Stat {
 }
 
 const stats: Stat[] = [
-  { value: HEADLINE_OPS_PER_SEC, suffix: '', label: `parses/sec (simple SELECT, parse stage, ${BENCH_ENV.hardware})`, color: 'text-accent-orange', prefix: '~' },
-  { value: PARSE_BENCHMARKS[0].nsPerOp, suffix: 'ns', label: 'parse latency (simple SELECT, parse stage)', color: 'text-accent-indigo' },
-  { text: PROJECT.sql99, label: 'SQL-99 compliance (estimated)', color: 'text-accent-green' },
-  { value: PROJECT.dialectCount, suffix: '', label: 'Dialects', color: 'text-accent-purple' },
+  { value: HEADLINE_OPS_PER_SEC, suffix: '', label: `parses/sec (simple SELECT, parse stage, ${BENCH_ENV.hardware})`, color: 'text-accent-warm', prefix: '~' },
+  { value: PARSE_BENCHMARKS[0].nsPerOp, suffix: 'ns', label: 'parse latency (simple SELECT, parse stage)', color: 'text-accent' },
+  { text: PROJECT.sql99, label: 'SQL-99 compliance (estimated)', color: 'text-brand' },
+  { value: PROJECT.dialectCount, suffix: '', label: 'Dialects', color: 'text-accent' },
 ];
 
 const benchmarks = PARSE_BENCHMARKS.map((b) => ({
diff --git a/website/src/components/home/VscodeSection.tsx b/website/src/components/home/VscodeSection.tsx
index ff4778d1..47f11850 100644
--- a/website/src/components/home/VscodeSection.tsx
+++ b/website/src/components/home/VscodeSection.tsx
@@ -38,49 +38,49 @@ export function VscodeSection() {
                   <div className="w-3 h-3 rounded-full bg-red-500/60" />
                   <div className="w-3 h-3 rounded-full bg-yellow-500/60" />
                   <div className="w-3 h-3 rounded-full bg-green-500/60" />
-                  <span className="text-xs text-text-muted ml-2">query.sql — GoSQLX</span>
+                  <span className="text-xs text-fg-subtle ml-2">query.sql — GoSQLX</span>
                 </div>
                 {/* Editor content */}
                 <div className="p-4 font-mono text-sm leading-relaxed">
                   <div className="flex">
-                    <span className="w-8 text-right text-text-muted select-none mr-4">1</span>
+                    <span className="w-8 text-right text-fg-subtle select-none mr-4">1</span>
                     <span>
-                      <span className="text-accent-indigo">SELECT</span>
+                      <span className="text-accent">SELECT</span>
                       <span className="text-zinc-300"> u.id, u.name, u.email</span>
                     </span>
                   </div>
                   <div className="flex">
-                    <span className="w-8 text-right text-text-muted select-none mr-4">2</span>
+                    <span className="w-8 text-right text-fg-subtle select-none mr-4">2</span>
                     <span>
-                      <span className="text-accent-indigo">FROM</span>
-                      <span className="text-accent-orange"> users</span>
+                      <span className="text-accent">FROM</span>
+                      <span className="text-accent-warm"> users</span>
                       <span className="text-zinc-300"> u</span>
                     </span>
                   </div>
                   <div className="flex">
-                    <span className="w-8 text-right text-text-muted select-none mr-4">3</span>
+                    <span className="w-8 text-right text-fg-subtle select-none mr-4">3</span>
                     <span>
-                      <span className="text-accent-indigo">JOIN</span>
-                      <span className="text-accent-orange"> orders</span>
+                      <span className="text-accent">JOIN</span>
+                      <span className="text-accent-warm"> orders</span>
                       <span className="text-zinc-300"> o </span>
-                      <span className="text-accent-indigo">ON</span>
+                      <span className="text-accent">ON</span>
                       <span className="text-zinc-300"> o.user_id = u.id</span>
                     </span>
                   </div>
                   <div className="flex">
-                    <span className="w-8 text-right text-text-muted select-none mr-4">4</span>
+                    <span className="w-8 text-right text-fg-subtle select-none mr-4">4</span>
                     <span>
-                      <span className="text-accent-indigo">WHERE</span>
+                      <span className="text-accent">WHERE</span>
                       <span className="text-zinc-300"> u.active = </span>
-                      <span className="text-accent-purple">true</span>
+                      <span className="text-accent">true</span>
                     </span>
                   </div>
                   <div className="flex">
-                    <span className="w-8 text-right text-text-muted select-none mr-4">5</span>
+                    <span className="w-8 text-right text-fg-subtle select-none mr-4">5</span>
                     <span>
-                      <span className="text-accent-indigo">ORDER BY</span>
+                      <span className="text-accent">ORDER BY</span>
                       <span className="text-zinc-300"> u.name </span>
-                      <span className="text-accent-indigo">ASC</span>
+                      <span className="text-accent">ASC</span>
                       <span className="text-zinc-300">;</span>
                     </span>
                   </div>
@@ -88,16 +88,16 @@ export function VscodeSection() {
                 {/* Status bar */}
                 <div className="flex items-center justify-between px-4 py-2 border-t border-white/[0.06] bg-white/[0.02] text-xs">
                   <div className="flex items-center gap-2">
-                    <span className="flex items-center gap-1 text-accent-green">
+                    <span className="flex items-center gap-1 text-brand">
                       <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                         <path fillRule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clipRule="evenodd" />
                       </svg>
                       Valid SQL
                     </span>
-                    <span className="text-text-muted">|</span>
-                    <span className="text-text-muted">PostgreSQL</span>
+                    <span className="text-fg-subtle">|</span>
+                    <span className="text-fg-subtle">PostgreSQL</span>
                   </div>
-                  <span className="text-text-muted">0 issues</span>
+                  <span className="text-fg-subtle">0 issues</span>
                 </div>
               </GlassCard>
             </FadeIn>
diff --git a/website/src/components/layout/Footer.tsx b/website/src/components/layout/Footer.tsx
index a97cc6aa..dc9ad9d9 100644
--- a/website/src/components/layout/Footer.tsx
+++ b/website/src/components/layout/Footer.tsx
@@ -33,7 +33,7 @@ export function Footer() {
     <FadeIn>
       <footer className="relative mt-24 border-t border-white/[0.06]">
         {/* Gradient accent line */}
-        <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-accent-indigo to-accent-orange opacity-40" />
+        <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-accent to-accent-warm opacity-40" />
 
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-16">
           <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
diff --git a/website/src/components/layout/Navbar.tsx b/website/src/components/layout/Navbar.tsx
index de33a98a..ae2da85e 100644
--- a/website/src/components/layout/Navbar.tsx
+++ b/website/src/components/layout/Navbar.tsx
@@ -53,18 +53,10 @@ export function Navbar() {
   const [searchLoaded, setSearchLoaded] = useState(false);
   if (searchOpen && !searchLoaded) setSearchLoaded(true);
   const { scrollY } = useScroll();
-  const [isLight, setIsLight] = useState(false);
-  useEffect(() => {
-    const check = () => setIsLight(document.documentElement.classList.contains('light'));
-    check();
-    const observer = new MutationObserver(check);
-    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
-    return () => observer.disconnect();
-  }, []);
-
   const bgOpacity = useTransform(scrollY, [0, 100], [0.6, 0.9]);
   const blurAmount = useTransform(scrollY, [0, 100], [8, 16]);
-  const bgColor = useTransform(bgOpacity, (v) => isLight ? `rgba(250, 251, 252, ${v})` : `rgba(9, 9, 11, ${v})`);
+  // Token-based so it follows the theme without tracking the html class.
+  const bgColor = useTransform(bgOpacity, (v) => `color-mix(in srgb, var(--bg) ${Math.round(v * 100)}%, transparent)`);
   const blur = useTransform(blurAmount, (v) => `blur(${v}px)`);
 
   // Close mobile menu on resize
@@ -97,7 +89,7 @@ export function Navbar() {
         {/* Logo */}
         <Link href="/" className="flex items-center gap-2.5 shrink-0">
           <Image src="/images/logo.webp" alt="" width={32} height={32} priority />
-          <span className="text-lg font-semibold text-white">GoSQLX</span>
+          <span className="text-lg font-semibold text-fg">GoSQLX</span>
         </Link>
 
         {/* Desktop nav links */}
@@ -130,7 +122,7 @@ export function Navbar() {
               <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
             </svg>
             <span className="hidden xl:inline">Search</span>
-            <kbd className="font-mono text-[10px] text-text-muted border border-white/[0.08] rounded px-1 py-0.5 bg-white/[0.03]">&#8984;K</kbd>
+            <kbd className="font-mono text-[10px] text-fg-subtle border border-white/[0.08] rounded px-1 py-0.5 bg-white/[0.03]">&#8984;K</kbd>
           </button>
           <a
             href="https://github.com/ajitpratap0/GoSQLX"
@@ -170,7 +162,7 @@ export function Navbar() {
             animate={{ height: 'auto', opacity: 1, pointerEvents: 'auto' }}
             exit={{ height: 0, opacity: 0, pointerEvents: 'none' }}
             transition={{ duration: 0.25, ease: 'easeInOut' }}
-            className="lg:hidden overflow-hidden border-t border-white/[0.06] bg-primary backdrop-blur-xl"
+            className="lg:hidden overflow-hidden border-t border-white/[0.06] bg-bg backdrop-blur-xl"
           >
             <div className="px-4 py-4 space-y-1">
               {NAV_LINKS.map((link) => {
diff --git a/website/src/components/playground/AnalyzeTab.tsx b/website/src/components/playground/AnalyzeTab.tsx
index a49ad3ef..47fc102b 100644
--- a/website/src/components/playground/AnalyzeTab.tsx
+++ b/website/src/components/playground/AnalyzeTab.tsx
@@ -32,9 +32,9 @@ interface AnalyzeTabProps {
 }
 
 function scoreColor(score: number): string {
-  if (score >= 80) return "text-green-400";
+  if (score >= 80) return "text-ok";
   if (score >= 50) return "text-yellow-400";
-  return "text-red-400";
+  return "text-danger";
 }
 
 function scoreBg(score: number): string {
@@ -80,7 +80,7 @@ export default function AnalyzeTab({ data }: AnalyzeTabProps) {
     return (
       <div className="p-4">
         <div className="bg-red-500/10 border border-red-500/30 rounded-lg p-4">
-          <div className="flex items-center gap-2 text-red-400 font-medium mb-1">
+          <div className="flex items-center gap-2 text-danger font-medium mb-1">
             <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
             </svg>
diff --git a/website/src/components/playground/AstTab.tsx b/website/src/components/playground/AstTab.tsx
index 61226f3c..c9effc47 100644
--- a/website/src/components/playground/AstTab.tsx
+++ b/website/src/components/playground/AstTab.tsx
@@ -10,9 +10,9 @@ interface AstNodeProps {
 function TypeBadge({ type }: { type: string }) {
   const colors: Record<string, string> = {
     Select: "bg-blue-500/20 text-blue-400 border-blue-500/30",
-    Insert: "bg-green-500/20 text-green-400 border-green-500/30",
+    Insert: "bg-green-500/20 text-ok border-green-500/30",
     Update: "bg-orange-500/20 text-orange-400 border-orange-500/30",
-    Delete: "bg-red-500/20 text-red-400 border-red-500/30",
+    Delete: "bg-red-500/20 text-danger border-red-500/30",
     Create: "bg-purple-500/20 text-purple-400 border-purple-500/30",
     From: "bg-cyan-500/20 text-cyan-400 border-cyan-500/30",
     Where: "bg-yellow-500/20 text-yellow-400 border-yellow-500/30",
@@ -49,7 +49,7 @@ function AstNode({ data, depth = 0, label }: AstNodeProps) {
     return (
       <span className="text-sm">
         {label && <span className="text-slate-400 mr-1">{label}:</span>}
-        <span className="text-green-400 font-mono">
+        <span className="text-ok font-mono">
           {typeof data === "string" ? `"${data}"` : String(data)}
         </span>
       </span>
@@ -167,7 +167,7 @@ export default function AstTab({ data }: AstTabProps) {
     return (
       <div className="p-4">
         <div className="bg-red-500/10 border border-red-500/30 rounded-lg p-4">
-          <div className="flex items-center gap-2 text-red-400 font-medium mb-1">
+          <div className="flex items-center gap-2 text-danger font-medium mb-1">
             <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
             </svg>
@@ -190,11 +190,11 @@ export default function AstTab({ data }: AstTabProps) {
         >
           {copied ? (
             <>
-              <svg className="w-3.5 h-3.5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg>
-              <span className="text-green-400">Copied!</span>
+              <svg className="w-3.5 h-3.5 text-ok" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg>
+              <span className="text-ok">Copied!</span>
             </>
           ) : copyFailed ? (
-            <span className="text-red-400">Failed</span>
+            <span className="text-danger">Failed</span>
           ) : (
             <>
               <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
diff --git a/website/src/components/playground/FormatTab.tsx b/website/src/components/playground/FormatTab.tsx
index 876ae668..c6437169 100644
--- a/website/src/components/playground/FormatTab.tsx
+++ b/website/src/components/playground/FormatTab.tsx
@@ -39,7 +39,7 @@ export default function FormatTab({ data }: FormatTabProps) {
     return (
       <div className="p-4">
         <div className="bg-red-500/10 border border-red-500/30 rounded-lg p-4">
-          <div className="flex items-center gap-2 text-red-400 font-medium mb-1">
+          <div className="flex items-center gap-2 text-danger font-medium mb-1">
             <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
             </svg>
@@ -65,11 +65,11 @@ export default function FormatTab({ data }: FormatTabProps) {
         >
           {copied ? (
             <>
-              <svg className="w-3.5 h-3.5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg>
-              <span className="text-green-400">Copied!</span>
+              <svg className="w-3.5 h-3.5 text-ok" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg>
+              <span className="text-ok">Copied!</span>
             </>
           ) : copyFailed ? (
-            <span className="text-red-400">Failed</span>
+            <span className="text-danger">Failed</span>
           ) : (
             <>
               <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
diff --git a/website/src/components/playground/LintTab.tsx b/website/src/components/playground/LintTab.tsx
index e616885f..1701a212 100644
--- a/website/src/components/playground/LintTab.tsx
+++ b/website/src/components/playground/LintTab.tsx
@@ -25,7 +25,7 @@ interface LintTabProps {
 function SeverityBadge({ severity }: { severity: string }) {
   const s = severity?.toLowerCase() || "info";
   const styles: Record<string, string> = {
-    error: "bg-red-500/20 text-red-400 border-red-500/30",
+    error: "bg-red-500/20 text-danger border-red-500/30",
     warning: "bg-yellow-500/20 text-yellow-400 border-yellow-500/30",
     info: "bg-blue-500/20 text-blue-400 border-blue-500/30",
   };
@@ -80,7 +80,7 @@ export default function LintTab({ data }: LintTabProps) {
     return (
       <div className="p-4">
         <div className="bg-red-500/10 border border-red-500/30 rounded-lg p-4">
-          <div className="flex items-center gap-2 text-red-400 font-medium mb-1">
+          <div className="flex items-center gap-2 text-danger font-medium mb-1">
             <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
             </svg>
@@ -96,11 +96,11 @@ export default function LintTab({ data }: LintTabProps) {
     return (
       <div className="flex flex-col items-center justify-center h-full gap-3">
         <div className="w-12 h-12 rounded-full bg-green-500/20 flex items-center justify-center">
-          <svg className="w-6 h-6 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <svg className="w-6 h-6 text-ok" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
           </svg>
         </div>
-        <p className="text-green-400 font-medium">No violations found</p>
+        <p className="text-ok font-medium">No violations found</p>
         <p className="text-slate-400 text-sm">Your SQL looks clean!</p>
       </div>
     );
@@ -117,11 +117,11 @@ export default function LintTab({ data }: LintTabProps) {
         >
           {copied ? (
             <>
-              <svg className="w-3.5 h-3.5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg>
-              <span className="text-green-400">Copied!</span>
+              <svg className="w-3.5 h-3.5 text-ok" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg>
+              <span className="text-ok">Copied!</span>
             </>
           ) : copyFailed ? (
-            <span className="text-red-400">Failed</span>
+            <span className="text-danger">Failed</span>
           ) : (
             <>
               <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
diff --git a/website/src/components/playground/Playground.tsx b/website/src/components/playground/Playground.tsx
index 6172799a..24c86105 100644
--- a/website/src/components/playground/Playground.tsx
+++ b/website/src/components/playground/Playground.tsx
@@ -121,7 +121,7 @@ export default function Playground() {
 
   if (loading) {
     return (
-      <div className="flex flex-col h-full bg-[#09090b]" aria-busy="true" aria-label="Loading SQL parser">
+      <div className="flex flex-col h-full bg-bg" aria-busy="true" aria-label="Loading SQL parser">
         {/* Skeleton toolbar */}
         <div className="flex items-center justify-between px-4 py-2 border-b border-slate-800 bg-slate-900/50">
           <div className="flex items-center gap-3">
@@ -185,14 +185,14 @@ export default function Playground() {
 
   if (error) {
     return (
-      <div className="flex items-center justify-center h-full bg-[#09090b]">
+      <div className="flex items-center justify-center h-full bg-bg">
         <div className="max-w-md text-center space-y-4">
           <div className="w-12 h-12 rounded-full bg-red-500/20 flex items-center justify-center mx-auto">
-            <svg className="w-6 h-6 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <svg className="w-6 h-6 text-danger" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
             </svg>
           </div>
-          <p className="text-red-400 font-medium">Failed to load SQL parser</p>
+          <p className="text-danger font-medium">Failed to load SQL parser</p>
           <p className="text-slate-400 text-sm">{error.message}</p>
           <p className="text-slate-400 text-xs">Try refreshing the page to retry.</p>
         </div>
@@ -203,7 +203,7 @@ export default function Playground() {
   const hasResults = results.ast !== null;
 
   return (
-    <div className="flex flex-col h-full bg-[#09090b]">
+    <div className="flex flex-col h-full bg-bg">
       {/* Top toolbar */}
       <div className="flex items-center justify-between px-4 py-2 border-b border-slate-800 bg-slate-900/50 min-h-[44px]">
         <div className="flex items-center gap-3">
@@ -294,7 +294,7 @@ export default function Playground() {
         <div className="flex items-center justify-between gap-4 px-4 py-2.5 border-t border-slate-800 bg-slate-900/50">
           <span className="text-xs text-slate-400 hidden sm:block">Ready to use this in your project?</span>
           <div className="flex items-center gap-2 flex-1 sm:flex-none">
-            <code className="text-xs font-mono text-emerald-400 bg-slate-800 px-2.5 py-1 rounded">
+            <code className="text-xs font-mono text-brand bg-bg-overlay px-2.5 py-1 rounded">
               go get github.com/ajitpratap0/GoSQLX
             </code>
             <button
diff --git a/website/src/components/playground/WasmErrorBoundary.tsx b/website/src/components/playground/WasmErrorBoundary.tsx
index dfb50a00..6e58de5a 100644
--- a/website/src/components/playground/WasmErrorBoundary.tsx
+++ b/website/src/components/playground/WasmErrorBoundary.tsx
@@ -14,14 +14,14 @@ export class WasmErrorBoundary extends Component<Props, State> {
   render() {
     if (this.state.hasError) {
       return (
-        <div className="flex items-center justify-center h-full bg-primary">
+        <div className="flex items-center justify-center h-full bg-bg">
           <div className="text-center space-y-4 max-w-md">
             <div className="w-12 h-12 rounded-full bg-red-500/20 flex items-center justify-center mx-auto">
-              <svg className="w-6 h-6 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg className="w-6 h-6 text-danger" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
               </svg>
             </div>
-            <p className="text-red-400 font-medium">Failed to load SQL parser</p>
+            <p className="text-danger font-medium">Failed to load SQL parser</p>
             <p className="text-zinc-400 text-sm">{this.state.error?.message}</p>
             <button
               onClick={() => this.setState({ hasError: false, error: null })}
diff --git a/website/src/components/ui/SearchModal.tsx b/website/src/components/ui/SearchModal.tsx
index 646cba17..36c69bb9 100644
--- a/website/src/components/ui/SearchModal.tsx
+++ b/website/src/components/ui/SearchModal.tsx
@@ -156,7 +156,7 @@ export function SearchModal({ open, onClose }: SearchModalProps) {
         {/* Search input */}
         <div className="flex items-center gap-3 border-b border-white/[0.08] px-4">
           <svg
-            className="h-4 w-4 shrink-0 text-text-muted"
+            className="h-4 w-4 shrink-0 text-fg-subtle"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor"
@@ -180,12 +180,12 @@ export function SearchModal({ open, onClose }: SearchModalProps) {
             onChange={(e) => setQuery(e.target.value)}
             onKeyDown={handleKeyDown}
             placeholder="Search documentation..."
-            className="flex-1 bg-transparent py-3.5 text-sm text-white placeholder:text-text-muted outline-none"
+            className="flex-1 bg-transparent py-3.5 text-sm text-white placeholder:text-fg-subtle outline-none"
             aria-label="Search documentation"
             autoComplete="off"
             spellCheck={false}
           />
-          <kbd className="hidden sm:inline-flex items-center gap-0.5 rounded border border-white/[0.1] bg-white/[0.04] px-1.5 py-0.5 font-mono text-[10px] text-text-muted">
+          <kbd className="hidden sm:inline-flex items-center gap-0.5 rounded border border-white/[0.1] bg-white/[0.04] px-1.5 py-0.5 font-mono text-[10px] text-fg-subtle">
             ESC
           </kbd>
         </div>
@@ -199,7 +199,7 @@ export function SearchModal({ open, onClose }: SearchModalProps) {
           aria-label="Search results"
         >
           {results.length === 0 && (
-            <li className="px-4 py-8 text-center text-sm text-text-muted">
+            <li className="px-4 py-8 text-center text-sm text-fg-subtle">
               No results found for &ldquo;{query}&rdquo;
             </li>
           )}
@@ -211,7 +211,7 @@ export function SearchModal({ open, onClose }: SearchModalProps) {
               aria-selected={i === selectedIndex}
               className={`mx-2 flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2.5 text-sm transition-colors ${
                 i === selectedIndex
-                  ? 'bg-accent-indigo/20 text-white'
+                  ? 'bg-accent/20 text-white'
                   : 'text-zinc-400 hover:bg-white/[0.04] hover:text-zinc-200'
               }`}
               onClick={() => navigate(entry)}
@@ -219,7 +219,7 @@ export function SearchModal({ open, onClose }: SearchModalProps) {
             >
               {/* Icon */}
               <svg
-                className="h-4 w-4 shrink-0 text-text-muted"
+                className="h-4 w-4 shrink-0 text-fg-subtle"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"
@@ -233,10 +233,10 @@ export function SearchModal({ open, onClose }: SearchModalProps) {
               </svg>
               <div className="min-w-0 flex-1">
                 <div className="truncate font-medium">{entry.title}</div>
-                <div className="truncate text-xs text-text-muted">{entry.category}</div>
+                <div className="truncate text-xs text-fg-subtle">{entry.category}</div>
               </div>
               {i === selectedIndex && (
-                <kbd className="hidden sm:inline-flex shrink-0 items-center rounded border border-white/[0.1] bg-white/[0.04] px-1.5 py-0.5 font-mono text-[10px] text-text-muted">
+                <kbd className="hidden sm:inline-flex shrink-0 items-center rounded border border-white/[0.1] bg-white/[0.04] px-1.5 py-0.5 font-mono text-[10px] text-fg-subtle">
                   Enter
                 </kbd>
               )}
@@ -245,7 +245,7 @@ export function SearchModal({ open, onClose }: SearchModalProps) {
         </ul>
 
         {/* Footer */}
-        <div className="flex items-center gap-4 border-t border-white/[0.08] px-4 py-2 text-[10px] text-text-muted">
+        <div className="flex items-center gap-4 border-t border-white/[0.08] px-4 py-2 text-[10px] text-fg-subtle">
           <span className="inline-flex items-center gap-1">
             <kbd className="rounded border border-white/[0.08] bg-white/[0.03] px-1 py-0.5 font-mono">&uarr;&darr;</kbd>
             navigate
diff --git a/website/src/components/ui/TerminalMockup.tsx b/website/src/components/ui/TerminalMockup.tsx
index 833e095a..d0cc7e28 100644
--- a/website/src/components/ui/TerminalMockup.tsx
+++ b/website/src/components/ui/TerminalMockup.tsx
@@ -5,11 +5,11 @@ export function TerminalMockup({ command, output }: { command: string; output?:
         <div aria-hidden="true" className="w-3 h-3 rounded-full bg-red-500/60" />
         <div aria-hidden="true" className="w-3 h-3 rounded-full bg-yellow-500/60" />
         <div aria-hidden="true" className="w-3 h-3 rounded-full bg-green-500/60" />
-        <span className="text-xs text-text-muted ml-2">Terminal</span>
+        <span className="text-xs text-fg-subtle ml-2">Terminal</span>
       </div>
       <div className="p-4 font-mono text-sm overflow-x-auto">
-        <div className="text-zinc-400 break-words"><span className="text-accent-green">$</span> {command}</div>
-        {output && <div className="text-text-muted mt-1">{output}</div>}
+        <div className="text-zinc-400 break-words"><span className="text-brand">$</span> {command}</div>
+        {output && <div className="text-fg-subtle mt-1">{output}</div>}
       </div>
     </div>
   );
diff --git a/website/src/components/ui/VersionBadge.tsx b/website/src/components/ui/VersionBadge.tsx
index ab148c48..53e52b7b 100644
--- a/website/src/components/ui/VersionBadge.tsx
+++ b/website/src/components/ui/VersionBadge.tsx
@@ -1,6 +1,6 @@
 export function VersionBadge({ version }: { version: string }) {
   return (
-    <span className="inline-block bg-accent-indigo/10 border border-accent-indigo/30 rounded-full px-3.5 py-1 text-xs text-indigo-300">
+    <span className="inline-block bg-accent/10 border border-accent/30 rounded-full px-3.5 py-1 text-xs text-accent">
       {version}
     </span>
   );
diff --git a/website/src/lib/constants.ts b/website/src/lib/constants.ts
index 3b99e464..788e7275 100644
--- a/website/src/lib/constants.ts
+++ b/website/src/lib/constants.ts
@@ -10,11 +10,11 @@ export const NAV_LINKS = [
 ];
 
 export const FEATURES = [
-  { icon: 'globe', title: 'Multi-Dialect', description: 'PostgreSQL, MySQL, MariaDB, SQLite, SQL Server, Oracle, Snowflake, ClickHouse.', color: 'accent-purple' },
-  { icon: 'lock', title: 'Thread-Safe', description: 'Race-detector clean in CI.', color: 'accent-green' },
-  { icon: 'bolt', title: 'Zero-Copy', description: 'Direct byte slice operations. No unnecessary allocations.', color: 'accent-orange' },
-  { icon: 'recycle', title: 'Object Pooling', description: 'sync.Pool recycling for ASTs, tokenizers, expressions.', color: 'accent-indigo' },
-  { icon: 'shield', title: 'Security Scanner', description: 'SQL injection detection with severity classification.', color: 'red' },
+  { icon: 'globe', title: 'Multi-Dialect', description: 'PostgreSQL, MySQL, MariaDB, SQLite, SQL Server, Oracle, Snowflake, ClickHouse.', color: 'accent' },
+  { icon: 'lock', title: 'Thread-Safe', description: 'Race-detector clean in CI.', color: 'brand' },
+  { icon: 'bolt', title: 'Zero-Copy', description: 'Direct byte slice operations. No unnecessary allocations.', color: 'accent-warm' },
+  { icon: 'recycle', title: 'Object Pooling', description: 'sync.Pool recycling for ASTs, tokenizers, expressions.', color: 'accent' },
+  { icon: 'shield', title: 'Security Scanner', description: 'SQL injection detection with severity classification.', color: 'danger' },
   { icon: 'cpu', title: 'MCP Server', description: `${PROJECT.mcpToolCount} SQL tools for Claude, Cursor, and any MCP client.`, color: 'cyan' },
 ];
 

From 1a22217751c942bdca2be1961ebd8645163f7635 Mon Sep 17 00:00:00 2001
From: Ajit Pratap Singh <ajitpratapsingh@Ajits-Mac-mini-2655.local>
Date: Thu, 15 Oct 2026 00:52:55 +0530
Subject: [PATCH 2/2] fix(website): scope inline-code bg to non-pre code on
 post pages

Fenced code blocks in light mode got a white code background behind
forced light text (~1.4:1). Restrict bg-bg-raised to inline code.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RkzVu3JY9Y6BRWfjesWts9
---
 website/src/app/blog/[slug]/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/app/blog/[slug]/page.tsx b/website/src/app/blog/[slug]/page.tsx
index 36f4771c..c2241d71 100644
--- a/website/src/app/blog/[slug]/page.tsx
+++ b/website/src/app/blog/[slug]/page.tsx
@@ -128,7 +128,7 @@ export default async function BlogPostPage({ params }: Props) {
         </header>
 
         {/* Content */}
-        <div className="prose prose-invert prose-dark max-w-none prose-headings:font-semibold prose-a:text-accent prose-a:no-underline hover:prose-a:underline prose-code:bg-bg-raised prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:text-sm prose-code:before:content-none prose-code:after:content-none prose-pre:bg-bg-raised prose-pre:border prose-pre:border-zinc-800 prose-hr:border-zinc-800">
+        <div className="prose prose-invert prose-dark max-w-none prose-headings:font-semibold prose-a:text-accent prose-a:no-underline hover:prose-a:underline [&_:not(pre)>code]:bg-bg-raised prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:text-sm prose-code:before:content-none prose-code:after:content-none prose-pre:bg-bg-raised prose-pre:border prose-pre:border-zinc-800 prose-hr:border-zinc-800">
           {content}
         </div>