diff --git a/app/globals.css b/app/globals.css
index ab5df101..01a95b91 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -7,11 +7,16 @@
 
 /* Canonical token source: design-system/tokens/ + fumadocs-bridge.css */
 
+/* fd-primary is blue text: the solid blue (#3366fc, --ds-primary-solid) on
+   white, where #3c7dff is 3.77:1; dark keeps #3c7dff. Filled controls use
+   --color-fd-primary-solid in both modes (white on #3c7dff is 3.77:1). */
 :root {
-  --color-fd-primary: #3c7dff;
+  --color-fd-primary: #3366fc;
   --color-fd-primary-foreground: #ffffff;
+  --color-fd-primary-solid: #3366fc;
+  --color-fd-primary-solid-hover: #2a5bd7;
   --color-fd-idea: oklch(65% 0.2 145);
-  --font-sans: var(--font-sans);
+  --font-sans: var(--font-inter);
 }
 
 @theme inline {
diff --git a/app/layout.tsx b/app/layout.tsx
index 9012eee6..7a940b26 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -6,7 +6,7 @@ import type { Metadata } from 'next';
 import type { ReactNode } from 'react';
 import './globals.css';
 
-const inter = Inter({ subsets: ['latin'], variable: '--font-sans' });
+const inter = Inter({ subsets: ['latin'], variable: '--font-inter' });
 const jetbrainsMono = JetBrains_Mono({ subsets: ['latin'], variable: '--font-mono' });
 
 // Set only in the production build env, so local dev and previews send nothing.
diff --git a/app/page.tsx b/app/page.tsx
index 4c213a90..16b89092 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -262,7 +262,7 @@ export default function HomePage() {
             <div className="flex flex-wrap items-center justify-center gap-3 pt-1">
               <Link
                 href="/docs"
-                className="inline-flex items-center gap-2 rounded-md bg-fd-primary px-5 py-2.5 text-sm font-medium text-fd-primary-foreground hover:opacity-90 transition-opacity duration-150"
+                className="inline-flex items-center gap-2 rounded-md bg-(--color-fd-primary-solid) px-5 py-2.5 text-sm font-medium text-white hover:bg-(--color-fd-primary-solid-hover) transition-colors duration-150"
               >
                 Start Building
                 <ArrowRight size={14} aria-hidden="true" />
@@ -307,7 +307,7 @@ export default function HomePage() {
                   </code>
                   <Link
                     href="/docs/skills"
-                    className="inline-flex items-center gap-2 rounded-md bg-fd-primary px-4 py-2 text-sm font-medium text-fd-primary-foreground hover:opacity-90 transition-opacity duration-150"
+                    className="inline-flex items-center gap-2 rounded-md bg-(--color-fd-primary-solid) px-4 py-2 text-sm font-medium text-white hover:bg-(--color-fd-primary-solid-hover) transition-colors duration-150"
                   >
                     View skills
                     <ArrowRight size={14} aria-hidden="true" />
@@ -366,7 +366,7 @@ export default function HomePage() {
                 <div className="flex flex-wrap gap-3">
                   <Link
                     href="/docs/admin-api"
-                    className="inline-flex items-center gap-2 rounded-md bg-fd-primary px-4 py-2 text-sm font-medium text-fd-primary-foreground hover:opacity-90 transition-opacity duration-150"
+                    className="inline-flex items-center gap-2 rounded-md bg-(--color-fd-primary-solid) px-4 py-2 text-sm font-medium text-white hover:bg-(--color-fd-primary-solid-hover) transition-colors duration-150"
                   >
                     API Reference
                     <ArrowRight size={14} aria-hidden="true" />
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index 7c504c7d..7653759c 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -2,7 +2,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 
 const variants = {
   primary:
-    'bg-fd-primary text-fd-primary-foreground hover:bg-fd-primary/80 disabled:bg-fd-secondary disabled:text-fd-secondary-foreground',
+    'bg-(--color-fd-primary-solid) text-white hover:bg-(--color-fd-primary-solid-hover) disabled:bg-fd-secondary disabled:text-fd-secondary-foreground',
   outline: 'border hover:bg-fd-accent hover:text-fd-accent-foreground',
   ghost: 'hover:bg-fd-accent hover:text-fd-accent-foreground',
   secondary: