diff --git a/DESIGN.md b/DESIGN.md
index 3ebcbee0..c27f1b5e 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -2,12 +2,17 @@
 name: Significant Hobbies
 description: A life atlas for choosing, living, and remembering what matters.
 colors:
-  paper: "oklch(0.985 0.012 88)"
-  ink: "oklch(0.20 0.025 72)"
-  atlas-gold: "oklch(0.82 0.13 88)"
-  lived-sage: "oklch(0.72 0.13 150)"
-  quiet-ink: "oklch(0.46 0.018 72)"
-  contour: "oklch(0.86 0.025 82)"
+  background: "#120e09"
+  foreground: "#f7f3e9"
+  card: "#1e1812"
+  surface: "#17130d"
+  muted: "#26211a"
+  muted-foreground: "#b7b0a3"
+  border: "#3b342a"
+  atlas-gold: "#e7bf57"
+  brand-foreground: "#1d1409"
+  destructive: "#f66d67"
+  lived-sage: "#62bb78"
 typography:
   display:
     fontFamily: "var(--font-serif), Georgia, serif"
@@ -27,7 +32,7 @@ spacing:
 components:
   button-primary:
     backgroundColor: "{colors.atlas-gold}"
-    textColor: "{colors.ink}"
+    textColor: "{colors.brand-foreground}"
     rounded: "{rounded.control}"
     padding: "12px 20px"
 ---
@@ -40,11 +45,17 @@ components:
 
 The interface is a map of a finite, inhabited life. Live uses paths, horizons, clusters, and wayfinding to turn possibility into a next move. History uses the same atlas language as chronology: week fields, dated markers, bends in direction, and remembered evidence. The weekly journal is a focused close-up scale of the same world.
 
-The system is warm light mode by default: sunlit, colorful, energetic, and action-led. Live should make leaving the screen feel tempting. Journal is a calm ritual expressed through morning yellow or evening lavender and a substantial white writing surface. History is a personal almanac: yellow mortality, blue direction, and coral, lavender, or paper story passages. Gold indicates chosen direction; sage indicates lived evidence and learning. Content should feel placed in a landscape, not packed into a grid of interchangeable cards.
+**Owner decision, 11 October 2026: dark everywhere.** The public Astro landing and the Next.js app share one warm night canvas, atlas-gold actions with ink text, tonal cards, and quiet borders. Dark is the only theme, independent of system preference; it is the product shell as well as the storytelling space. Keep Geist, Fraunces, and Geist Mono.
+
+Journal remains a calm ritual with dark morning-yellow or evening-lavender fields and a substantial dark writing surface. History is a personal almanac: yellow mortality, blue direction, and coral, lavender, or warm night story passages. Gold indicates chosen direction; sage indicates lived evidence and learning. Content should feel placed in a landscape, not packed into a grid of interchangeable cards.
 
 ## Colors
 
-Warm paper and dark olive ink make the whole product feel usable in daylight. Live More uses a restrained field palette—sun yellow, open-sky blue, coral, fresh green, and lilac—to distinguish kinds of possibility and create emotional lift. These colors belong to large, flat regions rather than decorative gradients. Atlas gold is reserved for direction; lived sage marks evidence, feedback, and completed experience.
+The canonical roles are background `#120e09` (approximately `oklch(0.165 0.012 72)`), foreground `#f7f3e9`, card `#1e1812`, surface `#17130d`, muted `#26211a`, muted foreground `#b7b0a3`, border `#3b342a`, primary/brand atlas gold `#e7bf57`, brand/primary foreground ink `#1d1409`, destructive `#f66d67`, and growth/sage `#62bb78`. Base radius is `0.75rem`: controls use 12px corners and bounded surfaces 16px.
+
+Live uses a restrained field palette—sun yellow, open-sky blue, coral, fresh green, and lilac—to distinguish kinds of possibility. Large, flat fields use dark tonal variants at OKLCH lightness 0.30 with the same hue family, rather than luminous pastel fills. Their cream, muted, and pale chromatic text must reach WCAG AA (4.5:1 for body copy). Semantic field roles live in `src/app/globals.css`; the local landing overrides use the same roles. Photography keeps its original pixels.
+
+The Significant Hobbies Hub renders in its independent repository. Delegated Hub pages and their design are outside this decision's implementation scope here.
 
 Photography is candid, tactile evidence of ordinary adults living: hands making things, friends outdoors, accessible local adventures, natural daylight, real texture, and imperfect motion. Avoid generic stock smiles, luxury travel, staged influencer imagery, and motivational text embedded in images.
 
diff --git a/landing-astro/public/hero/live-closing-v3-1280.webp b/landing-astro/public/hero/live-closing-v3-1280.webp
new file mode 100644
index 00000000..e20d2972
Binary files /dev/null and b/landing-astro/public/hero/live-closing-v3-1280.webp differ
diff --git a/landing-astro/public/hero/live-closing-v3-1536.webp b/landing-astro/public/hero/live-closing-v3-1536.webp
new file mode 100644
index 00000000..1394861a
Binary files /dev/null and b/landing-astro/public/hero/live-closing-v3-1536.webp differ
diff --git a/landing-astro/public/hero/live-closing-v3-640.webp b/landing-astro/public/hero/live-closing-v3-640.webp
new file mode 100644
index 00000000..3db8363a
Binary files /dev/null and b/landing-astro/public/hero/live-closing-v3-640.webp differ
diff --git a/landing-astro/public/hero/live-hero-v3-1200.webp b/landing-astro/public/hero/live-hero-v3-1200.webp
new file mode 100644
index 00000000..a6f4d704
Binary files /dev/null and b/landing-astro/public/hero/live-hero-v3-1200.webp differ
diff --git a/landing-astro/public/hero/live-hero-v3-640.webp b/landing-astro/public/hero/live-hero-v3-640.webp
new file mode 100644
index 00000000..bb7c3a33
Binary files /dev/null and b/landing-astro/public/hero/live-hero-v3-640.webp differ
diff --git a/landing-astro/public/hero/live-hero-v3-800.webp b/landing-astro/public/hero/live-hero-v3-800.webp
new file mode 100644
index 00000000..241197fc
Binary files /dev/null and b/landing-astro/public/hero/live-hero-v3-800.webp differ
diff --git a/landing-astro/public/hero/live-hero-v3-960.webp b/landing-astro/public/hero/live-hero-v3-960.webp
new file mode 100644
index 00000000..798532ef
Binary files /dev/null and b/landing-astro/public/hero/live-hero-v3-960.webp differ
diff --git a/landing-astro/public/hero/live-hero-v3.webp b/landing-astro/public/hero/live-hero-v3.webp
new file mode 100644
index 00000000..7f39c0e6
Binary files /dev/null and b/landing-astro/public/hero/live-hero-v3.webp differ
diff --git a/landing-astro/src/components/ResponsiveImages.astro b/landing-astro/src/components/ResponsiveImages.astro
index 47aa4726..fb1ee6e1 100644
--- a/landing-astro/src/components/ResponsiveImages.astro
+++ b/landing-astro/src/components/ResponsiveImages.astro
@@ -10,15 +10,15 @@ html = html.replace(/<img\b[^>]*src="\/footer-art\/live-1600\.webp"[^>]*>/g, (ta
 );
 // Preserve the parallax element, its crop and its full-size containing box.
 html = html.replace(/<div class="motion-parallax size-full bg-cover bg-\[40%_center\]" style="background-image:url\(([^)]+)\)"><\/div>/g, (tag, src) => {
-  const hero = src === '/hero/hobby-horizon-poster.webp';
+  const hero = src === '/hero/live-hero-v3.webp';
   if (!hero && src !== '/footer-art/live-1600.webp') return tag;
   const sources = hero
-    ? '/hero/hobby-horizon-poster-640.webp 640w, /hero/hobby-horizon-poster-800.webp 800w, /hero/hobby-horizon-poster-960.webp 960w, /hero/hobby-horizon-poster-1200.webp 1200w, /hero/hobby-horizon-poster.webp 1280w'
+    ? '/hero/live-hero-v3-640.webp 640w, /hero/live-hero-v3-800.webp 800w, /hero/live-hero-v3-960.webp 960w, /hero/live-hero-v3-1200.webp 1200w, /hero/live-hero-v3.webp 1280w'
     : '/footer-art/live-800.webp 800w, /footer-art/live-1200.webp 1200w, /footer-art/live-1600.webp 1600w';
   return `<img class="motion-parallax size-full" style="object-fit:cover;object-position:40% center" src="${src}" srcset="${sources}" sizes="100vw" width="${hero ? 1280 : 1600}" height="${hero ? 720 : 535}" alt="" loading="${hero ? 'eager' : 'lazy'}" ${hero ? 'fetchpriority="high"' : ''} decoding="async">`;
 });
-html = html.replace(/<div aria-hidden="true" class="motion-drift absolute inset-0 -z-10 bg-cover bg-\[12%_60%\] md:bg-\[center_60%\]" style="background-image:url\(\/hero\/dawn-valley-1920.webp\)"><\/div>/g,
-  '<img aria-hidden="true" class="motion-drift absolute inset-0 -z-10 size-full object-cover object-[12%_60%] md:object-[center_60%]" src="/hero/dawn-valley-1920.webp" srcset="/hero/dawn-valley-640.webp 640w, /hero/dawn-valley-1280.webp 1280w, /hero/dawn-valley-1920.webp 1920w" sizes="(max-width: 767px) 1000px, 100vw" width="1920" height="1280" alt="" loading="lazy" decoding="async">'
+html = html.replace(/<div aria-hidden="true" class="motion-drift absolute inset-0 -z-10 bg-cover bg-\[12%_60%\] md:bg-\[center_60%\]" style="background-image:url\(\/hero\/live-closing-v3-1536.webp\)"><\/div>/g,
+  '<img aria-hidden="true" class="motion-drift absolute inset-0 -z-10 size-full object-cover object-[12%_60%] md:object-[center_60%]" src="/hero/live-closing-v3-1536.webp" srcset="/hero/live-closing-v3-640.webp 640w, /hero/live-closing-v3-1280.webp 1280w, /hero/live-closing-v3-1536.webp 1920w" sizes="(max-width: 767px) 1000px, 100vw" width="1536" height="1024" alt="" loading="lazy" decoding="async">'
 );
 ---
 
diff --git a/landing-astro/src/content/live.json b/landing-astro/src/content/live.json
index 2613d149..70a033f4 100644
--- a/landing-astro/src/content/live.json
+++ b/landing-astro/src/content/live.json
@@ -6,10 +6,10 @@
     "theme": "gallery",
     "icon": "icon.svg",
     "tokens": {
-      "--brand": "oklch(0.8 0.16 80)",
-      "--brand-foreground": "oklch(0.2 0.02 60)",
-      "--brand-soft": "oklch(0.94 0.06 85)",
-      "--brand-ink": "oklch(0.55 0.13 60)"
+      "--brand": "#e7bf57",
+      "--brand-foreground": "#1d1409",
+      "--brand-soft": "var(--field-sun)",
+      "--brand-ink": "var(--brand)"
     },
     "assetBase": "/",
     "canonical": "https://live.significanthobbies.com",
@@ -50,7 +50,7 @@
       "href": "/experiences"
     },
     "note": "Free to use. No account required to begin.",
-    "image": "hero/hobby-horizon-poster.webp"
+    "image": "hero/live-hero-v3.webp"
   },
   "sections": [
     {
@@ -175,7 +175,7 @@
       "label": "Explore the catalog",
       "href": "/experiences"
     },
-    "image": "hero/dawn-valley-1920.webp",
+    "image": "hero/live-closing-v3-1536.webp",
     "credit": "Illustrative artwork"
   },
   "footer": {
diff --git a/landing-astro/src/layouts/Layout.astro b/landing-astro/src/layouts/Layout.astro
index 44b1f747..cfecb3ba 100644
--- a/landing-astro/src/layouts/Layout.astro
+++ b/landing-astro/src/layouts/Layout.astro
@@ -1,5 +1,6 @@
 ---
 import Base from '@saas-maker/templates/Base.astro';
+import '../styles/landing.css';
 import { baseProps } from '@saas-maker/templates/page';
 import type { GalleryContent } from '@saas-maker/templates/schema';
 import bodyFont from '@saas-maker/ui/fonts/newsreader-text-latin-normal.woff2?url';
@@ -44,7 +45,7 @@ const faqJsonLd = faq && {
       })(window,document,"clarity","script","ybcglnzl4t");
       window.clarity("set","project_id","live");
     </script>
-    <link rel="preload" href="/hero/hobby-horizon-poster.webp" as="image" type="image/webp" imagesrcset="/hero/hobby-horizon-poster-640.webp 640w, /hero/hobby-horizon-poster-800.webp 800w, /hero/hobby-horizon-poster-960.webp 960w, /hero/hobby-horizon-poster-1200.webp 1200w, /hero/hobby-horizon-poster.webp 1280w" imagesizes="100vw" fetchpriority="high" />
+    <link rel="preload" href="/hero/live-hero-v3.webp" as="image" type="image/webp" imagesrcset="/hero/live-hero-v3-640.webp 640w, /hero/live-hero-v3-800.webp 800w, /hero/live-hero-v3-960.webp 960w, /hero/live-hero-v3-1200.webp 1200w, /hero/live-hero-v3.webp 1280w" imagesizes="100vw" fetchpriority="high" />
     <!-- The hero lede sets the catalog's position; discover its serif face before CSS/font swap. -->
     <link rel="preload" href={bodyFont} as="font" type="font/woff2" crossorigin />
     <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
diff --git a/landing-astro/src/styles/landing.css b/landing-astro/src/styles/landing.css
new file mode 100644
index 00000000..c9779650
--- /dev/null
+++ b/landing-astro/src/styles/landing.css
@@ -0,0 +1,122 @@
+/* Same Life Atlas roles as src/app/globals.css. Preset selectors are explicit
+   so shared Gallery defaults cannot restore a light canvas or cool ink. */
+:root,
+html[data-theme="gallery"],
+html[data-theme="gallery"] [data-surface="editorial-dark"] {
+  color-scheme: dark;
+  --font-display: "Geist Variable", system-ui, sans-serif;
+  --font-text: var(--font-sans);
+  --font-accent: "Fraunces Variable", Georgia, serif;
+  --radius: 0.75rem;
+  --brand: #e7bf57;
+  --brand-foreground: #1d1409;
+  --brand-soft: var(--field-sun);
+  --brand-ink: var(--brand);
+  --background: #120e09;
+  --foreground: #f7f3e9;
+  --card: #1e1812;
+  --card-foreground: var(--foreground);
+  --surface: #17130d;
+  --popover: var(--card);
+  --popover-foreground: var(--foreground);
+  --primary: var(--brand);
+  --primary-foreground: var(--brand-foreground);
+  --secondary: #26211a;
+  --secondary-foreground: var(--foreground);
+  --muted: var(--secondary);
+  --muted-foreground: #b7b0a3;
+  --accent: var(--muted);
+  --accent-foreground: var(--foreground);
+  --destructive: #f66d67;
+  --success: #62bb78;
+  --warning: var(--brand);
+  --border: #3b342a;
+  --hairline: var(--border);
+  --input: var(--border);
+  --ring: var(--brand);
+  --subtle: #aaa293;
+  --scrim: oklch(0 0 0);
+  --week-spent: oklch(0.34 0.012 72);
+  --chart-1: var(--brand);
+  --chart-2: var(--success);
+  --chart-3: var(--field-sky-ink);
+  --chart-4: var(--field-coral-ink);
+  --chart-5: var(--field-lilac-ink);
+  --sidebar: var(--surface);
+  --sidebar-foreground: var(--foreground);
+  --sidebar-primary: var(--primary);
+  --sidebar-primary-foreground: var(--primary-foreground);
+  --sidebar-accent: var(--accent);
+  --sidebar-accent-foreground: var(--foreground);
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--ring);
+  --field-sun: oklch(0.30 0.055 95);
+  --field-sun-ink: oklch(0.86 0.09 95);
+  --field-sky: oklch(0.30 0.05 240);
+  --field-sky-ink: oklch(0.86 0.06 240);
+  --field-coral: oklch(0.30 0.065 40);
+  --field-coral-ink: oklch(0.86 0.06 40);
+  --field-green: oklch(0.30 0.05 145);
+  --field-green-ink: oklch(0.86 0.07 145);
+  --field-lilac: oklch(0.30 0.065 300);
+  --field-lilac-ink: oklch(0.86 0.06 300);
+  --field-rose: oklch(0.30 0.05 350);
+  --field-rose-ink: oklch(0.86 0.06 350);
+  --tone-1: var(--field-coral);
+  --tone-2: var(--field-lilac);
+  --tone-3: var(--field-green);
+  --tone-4: var(--field-sun);
+  --tone-ink: var(--surface);
+  --accent-ink: var(--brand);
+  --cover-foreground: var(--foreground);
+  --cover-muted-foreground: var(--muted-foreground);
+}
+
+/* Photo covers supply their own inline text roles. Keep the imagery and scrims,
+   but use atlas gold for the accent phrases, with cream copy above the photo. */
+html[data-theme="gallery"] main > section {
+  --foreground: var(--cover-foreground);
+  --muted-foreground: var(--cover-muted-foreground);
+  color: var(--foreground);
+  --brand-ink: var(--brand);
+  --accent-ink: var(--brand);
+}
+
+html[data-theme="gallery"] .bg-brand,
+html[data-theme="gallery"] header .bg-primary,
+html[data-theme="gallery"] button[type="submit"] {
+  border-radius: var(--radius);
+}
+
+html[data-theme="gallery"] .bg-card {
+  border-radius: 1rem;
+}
+
+html[data-theme="gallery"] :focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 4px;
+}
+
+/* The same Geist controls and Fraunces landmarks as the app. */
+html[data-theme="gallery"] h1,
+html[data-theme="gallery"] h2 {
+  font-family: "Fraunces Variable", Georgia, serif;
+  font-weight: 500;
+  letter-spacing: -0.02em;
+}
+
+/* Hold text contrast over every photo, including a worst-case white pixel.
+   The image pixels stay intact; only the existing readability scrim changes. */
+html[data-theme="gallery"] main > section:has(img.motion-parallax, img.motion-drift) > [aria-hidden]:nth-child(2) {
+  background: color-mix(in srgb, var(--background) 60%, transparent);
+}
+html[data-theme="gallery"] main > section:has(img.motion-parallax) > [aria-hidden]:nth-child(2) {
+  background: linear-gradient(90deg, color-mix(in srgb, var(--background) 82%, transparent) 0%, color-mix(in srgb, var(--background) 55%, transparent) 55%, color-mix(in srgb, var(--background) 8%, transparent) 100%);
+}
+
+html[data-theme="gallery"] main > section > span.absolute {
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.375rem;
+  background: var(--background);
+  color: var(--muted-foreground);
+}
diff --git a/package.json b/package.json
index 1eec5112..e43895ed 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,6 @@
     "motion": "^12.42.2",
     "nanoid": "5.1.9",
     "next": "16.3.8",
-    "next-themes": "0.4.6",
     "posthog-js": "^1.407.3",
     "react": "19.2.8",
     "react-dom": "19.2.8",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1137fd21..689b8135 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -73,9 +73,6 @@ importers:
       next:
         specifier: 16.3.8
         version: 16.3.8(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(@playwright/test@1.62.0)(@types/node@25.6.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      next-themes:
-        specifier: 0.4.6
-        version: 0.4.6(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       posthog-js:
         specifier: ^1.407.3
         version: 1.407.3
@@ -5900,12 +5897,6 @@ packages:
     resolution: {integrity: sha512-WmmLty1YWwJl9yZi77v2dVIV6X2kuYV8YYBI/G3LWGKdGHmHUvL1z7FW0iDvEvGAwNEoc5x1tOOOyDnf5jJw/w==}
     engines: {node: '>= 10'}
 
-  next-themes@0.4.6:
-    resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
-    peerDependencies:
-      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
-
   next@16.3.8:
     resolution: {integrity: sha512-U7QEZaTini6wKrb8A8hqLLqYQyCetegKjCpJOyxk642vWoMoU1x5PyZCJFvgYgiptA8xc5j/9xYlZFO7w9Sjmw==}
     engines: {node: '>=20.9.0'}
@@ -13739,11 +13730,6 @@ snapshots:
 
   neotraverse@1.0.1: {}
 
-  next-themes@0.4.6(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
-    dependencies:
-      react: 19.2.8
-      react-dom: 19.2.8(react@19.2.8)
-
   next@16.3.8(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(@playwright/test@1.62.0)(@types/node@25.6.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
     dependencies:
       '@next/env': 16.3.8
diff --git a/src/app/blog/[slug]/page.tsx b/src/app/blog/[slug]/page.tsx
index 7eddbb27..4a584fbb 100644
--- a/src/app/blog/[slug]/page.tsx
+++ b/src/app/blog/[slug]/page.tsx
@@ -41,9 +41,17 @@ const CATEGORY_COLORS: Record<string, { bg: string; text: string; border: string
     text: 'text-foreground',
     border: 'border-primary/30',
   },
-  Psychology: { bg: 'bg-violet-50', text: 'text-violet-700', border: 'border-violet-200' },
-  Reflection: { bg: 'bg-blue-50', text: 'text-blue-700', border: 'border-blue-200' },
-  Inspiration: { bg: 'bg-orange-50', text: 'text-orange-700', border: 'border-orange-200' },
+  Psychology: {
+    bg: 'bg-field-lilac',
+    text: 'text-field-lilac-ink',
+    border: 'border-field-lilac-ink',
+  },
+  Reflection: { bg: 'bg-field-sky', text: 'text-field-sky-ink', border: 'border-field-sky-ink' },
+  Inspiration: {
+    bg: 'bg-field-coral',
+    text: 'text-field-coral-ink',
+    border: 'border-field-coral-ink',
+  },
 };
 
 function categoryStyle(category: string) {
@@ -112,7 +120,7 @@ function BlogContent({ blocks }: { blocks: ContentBlock[] }) {
                   <span className="mt-0.5 shrink-0 text-2xl" role="img" aria-hidden="true">
                     {block.emoji}
                   </span>
-                  <p className="text-base italic leading-relaxed text-[#5f4410]">{block.text}</p>
+                  <p className="text-base italic leading-relaxed text-brand">{block.text}</p>
                 </SpotlightCard>
               </FadeIn>
             );
diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index 32b80445..11437b7e 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -40,9 +40,17 @@ const CATEGORY_COLORS: Record<string, { bg: string; text: string; border: string
     text: 'text-foreground',
     border: 'border-primary/30',
   },
-  Psychology: { bg: 'bg-violet-50', text: 'text-violet-700', border: 'border-violet-200' },
-  Reflection: { bg: 'bg-blue-50', text: 'text-blue-700', border: 'border-blue-200' },
-  Inspiration: { bg: 'bg-orange-50', text: 'text-orange-700', border: 'border-orange-200' },
+  Psychology: {
+    bg: 'bg-field-lilac',
+    text: 'text-field-lilac-ink',
+    border: 'border-field-lilac-ink',
+  },
+  Reflection: { bg: 'bg-field-sky', text: 'text-field-sky-ink', border: 'border-field-sky-ink' },
+  Inspiration: {
+    bg: 'bg-field-coral',
+    text: 'text-field-coral-ink',
+    border: 'border-field-coral-ink',
+  },
 };
 
 function categoryStyle(category: string) {
diff --git a/src/app/bucket-list-before-30/page.tsx b/src/app/bucket-list-before-30/page.tsx
index d1d1224c..49848871 100644
--- a/src/app/bucket-list-before-30/page.tsx
+++ b/src/app/bucket-list-before-30/page.tsx
@@ -94,7 +94,7 @@ export default function BucketListBefore30Page() {
                 <div className="flex flex-wrap gap-3 justify-center sm:justify-start">
                   <Link
                     href="/"
-                    className="inline-flex items-center gap-2 rounded-full bg-[#211e18] px-6 py-3 text-sm font-semibold text-white shadow-md transition-colors hover:bg-[#39352d]"
+                    className="inline-flex items-center gap-2 rounded-full bg-primary px-6 py-3 text-sm font-semibold text-primary-foreground shadow-md transition-colors hover:bg-primary/90"
                   >
                     Build my bucket list
                   </Link>
@@ -197,7 +197,7 @@ export default function BucketListBefore30Page() {
           <div className="flex flex-wrap gap-3 justify-center">
             <Link
               href="/"
-              className="inline-flex items-center gap-2 rounded-full bg-[#211e18] px-6 py-3 text-sm font-semibold text-white shadow-md transition-colors hover:bg-[#39352d]"
+              className="inline-flex items-center gap-2 rounded-full bg-primary px-6 py-3 text-sm font-semibold text-primary-foreground shadow-md transition-colors hover:bg-primary/90"
             >
               Build my bucket list
             </Link>
diff --git a/src/app/bucket-list-before-50/page.tsx b/src/app/bucket-list-before-50/page.tsx
index 0487f90b..2ba5cf0c 100644
--- a/src/app/bucket-list-before-50/page.tsx
+++ b/src/app/bucket-list-before-50/page.tsx
@@ -93,7 +93,7 @@ export default function BucketListBefore50Page() {
                 <div className="flex flex-wrap gap-3 justify-center sm:justify-start">
                   <Link
                     href="/"
-                    className="inline-flex items-center gap-2 rounded-full bg-[#211e18] px-6 py-3 text-sm font-semibold text-white shadow-md transition-colors hover:bg-[#39352d]"
+                    className="inline-flex items-center gap-2 rounded-full bg-primary px-6 py-3 text-sm font-semibold text-primary-foreground shadow-md transition-colors hover:bg-primary/90"
                   >
                     Build my bucket list
                   </Link>
@@ -200,7 +200,7 @@ export default function BucketListBefore50Page() {
           <div className="flex flex-wrap gap-3 justify-center">
             <Link
               href="/"
-              className="inline-flex items-center gap-2 rounded-full bg-[#211e18] px-6 py-3 text-sm font-semibold text-white shadow-md transition-colors hover:bg-[#39352d]"
+              className="inline-flex items-center gap-2 rounded-full bg-primary px-6 py-3 text-sm font-semibold text-primary-foreground shadow-md transition-colors hover:bg-primary/90"
             >
               Build my bucket list
             </Link>
diff --git a/src/app/bucket-list-ideas/page.tsx b/src/app/bucket-list-ideas/page.tsx
index e1f64700..85f0ccd1 100644
--- a/src/app/bucket-list-ideas/page.tsx
+++ b/src/app/bucket-list-ideas/page.tsx
@@ -58,7 +58,7 @@ export default function BucketListIdeasPage() {
             <div className="mt-6 flex flex-wrap gap-3">
               <Link
                 href="/bucket-list"
-                className="inline-flex items-center gap-2 rounded-full bg-[#211e18] px-6 py-3 text-sm font-semibold text-white shadow-md transition-colors hover:bg-[#39352d]"
+                className="inline-flex items-center gap-2 rounded-full bg-primary px-6 py-3 text-sm font-semibold text-primary-foreground shadow-md transition-colors hover:bg-primary/90"
               >
                 Build my bucket list
               </Link>
@@ -182,7 +182,7 @@ export default function BucketListIdeasPage() {
           <div className="flex flex-wrap gap-3 justify-center">
             <Link
               href="/bucket-list"
-              className="inline-flex items-center gap-2 rounded-full bg-[#211e18] px-6 py-3 text-sm font-semibold text-white shadow-md transition-colors hover:bg-[#39352d]"
+              className="inline-flex items-center gap-2 rounded-full bg-primary px-6 py-3 text-sm font-semibold text-primary-foreground shadow-md transition-colors hover:bg-primary/90"
             >
               Start my bucket list
             </Link>
diff --git a/src/app/bucket-list/page.tsx b/src/app/bucket-list/page.tsx
index 6a10ca3c..393220bb 100644
--- a/src/app/bucket-list/page.tsx
+++ b/src/app/bucket-list/page.tsx
@@ -49,24 +49,24 @@ export default async function BucketListPage() {
   });
 
   return (
-    <div className="min-h-[calc(100vh-3.5rem)] bg-[#f7f1e7] px-4 py-12 sm:py-16">
+    <div className="min-h-[calc(100vh-3.5rem)] bg-background px-4 py-12 sm:py-16">
       <div className="mx-auto max-w-5xl">
         <header className="flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between">
           <div>
-            <p className="text-xs font-bold uppercase tracking-[0.26em] text-emerald-700">
+            <p className="text-xs font-bold uppercase tracking-[0.26em] text-growth">
               Your life, on purpose
             </p>
-            <h1 className="mt-2 font-serif text-5xl font-semibold tracking-[-0.045em] text-stone-900 sm:text-6xl">
+            <h1 className="mt-2 font-serif text-5xl font-semibold tracking-[-0.045em] text-foreground sm:text-6xl">
               Your Bucket List
             </h1>
-            <p className="mt-3 max-w-lg text-sm leading-relaxed text-stone-600">
+            <p className="mt-3 max-w-lg text-sm leading-relaxed text-muted-foreground">
               Every meaningful someday in one place. Side quests are for this week; these can stay
               with you for years.
             </p>
           </div>
           <Button
             asChild
-            className="h-11 rounded-xl bg-[#176b4a] px-5 text-white hover:bg-[#10583d]"
+            className="h-11 rounded-xl bg-primary px-5 text-primary-foreground hover:bg-primary/90"
           >
             <Link href="/bucket-list/new">
               <Plus className="h-4 w-4" /> Make a Bingo board
@@ -85,22 +85,21 @@ export default async function BucketListPage() {
                 group === 'done' ? item.status === 'done' : item.status !== 'done'
               );
               return (
-                <div
-                  key={group}
-                  className="rounded-[1.5rem] border border-[#d9cfbd] bg-[#fffdf8] p-5 sm:p-6"
-                >
+                <div key={group} className="rounded-2xl border border-border bg-card p-5 sm:p-6">
                   <div className="flex items-baseline justify-between">
-                    <h2 className="font-serif text-3xl text-stone-900">
+                    <h2 className="font-serif text-3xl text-foreground">
                       {group === 'done' ? 'Lived' : 'Still calling'}
                     </h2>
-                    <span className="text-xs font-bold text-stone-500">{groupItems.length}</span>
+                    <span className="text-xs font-bold text-muted-foreground">
+                      {groupItems.length}
+                    </span>
                   </div>
                   {groupItems.length ? (
-                    <ul className="mt-4 divide-y divide-[#e8dfd1]">
+                    <ul className="mt-4 divide-y divide-border">
                       {groupItems.map((item) => (
                         <li key={item.id} className="py-4">
                           {item.status === 'done' ? (
-                            <p className="font-serif text-xl text-stone-500 line-through">
+                            <p className="font-serif text-xl text-muted-foreground line-through">
                               {item.title}
                             </p>
                           ) : (
@@ -112,7 +111,7 @@ export default async function BucketListPage() {
                             />
                           )}
                           {item.description && (
-                            <p className="mt-1 text-sm text-stone-600">{item.description}</p>
+                            <p className="mt-1 text-sm text-muted-foreground">{item.description}</p>
                           )}
                           <BucketItemControls
                             id={item.id}
@@ -125,7 +124,7 @@ export default async function BucketListPage() {
                       ))}
                     </ul>
                   ) : (
-                    <p className="mt-5 text-sm text-stone-500">
+                    <p className="mt-5 text-sm text-muted-foreground">
                       {group === 'done'
                         ? 'Completed experiences will stay here as part of your story.'
                         : 'Add the first thing you do not want to leave unlived.'}
@@ -138,23 +137,21 @@ export default async function BucketListPage() {
         )}
 
         {lists.length === 0 && items.length === 0 ? (
-          <section className="mt-12 overflow-hidden rounded-[2rem] border border-[#d9cfbd] bg-[#fffdf8] p-8 shadow-[0_24px_70px_rgba(72,58,38,0.08)] sm:p-12">
+          <section className="mt-12 overflow-hidden rounded-2xl border border-border bg-card p-8 shadow-[0_24px_70px_color-mix(in_srgb,var(--scrim)_8%,transparent)] sm:p-12">
             <div className="grid items-center gap-10 md:grid-cols-[1fr_0.8fr]">
               <div>
-                <p className="font-serif text-3xl text-emerald-700">
-                  Your first square is waiting.
-                </p>
-                <h2 className="mt-3 font-serif text-5xl font-semibold leading-[0.95] tracking-tight text-stone-900">
+                <p className="font-serif text-3xl text-growth">Your first square is waiting.</p>
+                <h2 className="mt-3 font-serif text-5xl font-semibold leading-[0.95] tracking-tight text-foreground">
                   Make a list that makes you want to leave the house.
                 </h2>
-                <p className="mt-5 max-w-xl text-sm leading-relaxed text-stone-600">
+                <p className="mt-5 max-w-xl text-sm leading-relaxed text-muted-foreground">
                   Pick what you want more of. We’ll give you nine specific experiences you can edit,
                   complete, and share.
                 </p>
                 <Button
                   asChild
                   size="lg"
-                  className="mt-7 rounded-xl bg-[#176b4a] text-white hover:bg-[#10583d]"
+                  className="mt-7 rounded-xl bg-primary text-primary-foreground hover:bg-primary/90"
                 >
                   <Link href="/bucket-list/new">
                     Make my first list <ArrowRight className="h-4 w-4" />
@@ -162,7 +159,7 @@ export default async function BucketListPage() {
                 </Button>
               </div>
               <div
-                className="grid rotate-[2deg] grid-cols-3 gap-2 rounded-2xl bg-[#f5ecdc] p-4 shadow-inner"
+                className="grid rotate-[2deg] grid-cols-3 gap-2 rounded-2xl bg-muted p-4 shadow-inner"
                 aria-hidden="true"
               >
                 {[
@@ -178,7 +175,7 @@ export default async function BucketListPage() {
                 ].map((text, index) => (
                   <div
                     key={text}
-                    className={`flex aspect-square items-center justify-center rounded-lg border p-2 text-center text-[0.6rem] font-semibold ${index === 4 ? 'border-[#1e3029] bg-[#1e3029] text-white' : 'border-[#cbbca5] bg-[#fffaf0] text-stone-700'}`}
+                    className={`flex aspect-square items-center justify-center rounded-lg border p-2 text-center text-[0.6rem] font-semibold ${index === 4 ? 'border-border bg-surface text-foreground' : 'border-border bg-card text-muted-foreground'}`}
                   >
                     {text}
                   </div>
@@ -189,41 +186,41 @@ export default async function BucketListPage() {
         ) : lists.length > 0 ? (
           <section className="mt-12">
             <div className="mb-4">
-              <p className="text-sm font-bold uppercase tracking-[0.18em] text-emerald-700">
+              <p className="text-sm font-bold uppercase tracking-[0.18em] text-growth">
                 Playful views
               </p>
-              <h2 className="mt-1 font-serif text-3xl text-stone-900">Your Bingo boards</h2>
+              <h2 className="mt-1 font-serif text-3xl text-foreground">Your Bingo boards</h2>
             </div>
             <div className="mt-10 grid gap-4 sm:grid-cols-2">
               {lists.map(({ row, draft, progress }) => (
                 <Link
                   key={row.id}
                   href={`/bucket-list/${row.id}`}
-                  className="group rounded-2xl border border-[#d9cfbd] bg-[#fffdf8] p-5 shadow-sm transition hover:-translate-y-0.5 hover:shadow-lg"
+                  className="group rounded-2xl border border-border bg-card p-5 shadow-sm transition hover:-translate-y-0.5 hover:shadow-lg"
                 >
                   <div className="flex items-start justify-between gap-4">
                     <div>
-                      <p className="text-[0.62rem] font-bold uppercase tracking-[0.2em] text-emerald-700">
+                      <p className="text-[0.62rem] font-bold uppercase tracking-[0.2em] text-growth">
                         {draft.horizon.replace('chapter', 'next chapter')}
                       </p>
-                      <h2 className="mt-1 font-serif text-3xl font-semibold leading-tight text-stone-900">
+                      <h2 className="mt-1 font-serif text-3xl font-semibold leading-tight text-foreground">
                         {draft.title}
                       </h2>
                     </div>
-                    <Grid3X3 className="h-5 w-5 text-stone-300 transition group-hover:text-emerald-700" />
+                    <Grid3X3 className="h-5 w-5 text-muted-foreground transition group-hover:text-growth" />
                   </div>
                   <div className="mt-7 flex items-end justify-between gap-4">
-                    <div className="flex items-center gap-2 text-xs font-semibold text-stone-500">
-                      <Check className="h-3.5 w-3.5 text-emerald-700" /> {progress.completed} of{' '}
+                    <div className="flex items-center gap-2 text-xs font-semibold text-muted-foreground">
+                      <Check className="h-3.5 w-3.5 text-growth" /> {progress.completed} of{' '}
                       {progress.total} lived
                     </div>
-                    <span className="text-[0.62rem] font-bold uppercase tracking-wider text-stone-400">
+                    <span className="text-[0.62rem] font-bold uppercase tracking-wider text-muted-foreground">
                       {row.visibility.toLowerCase()}
                     </span>
                   </div>
-                  <div className="mt-3 h-1.5 overflow-hidden rounded-full bg-stone-100">
+                  <div className="mt-3 h-1.5 overflow-hidden rounded-full bg-muted">
                     <div
-                      className="h-full rounded-full bg-emerald-700"
+                      className="h-full rounded-full bg-growth"
                       style={{ width: `${progress.percentage}%` }}
                     />
                   </div>
diff --git a/src/app/bucket-lists/[slug]/page.tsx b/src/app/bucket-lists/[slug]/page.tsx
index 98fdbd00..279acd89 100644
--- a/src/app/bucket-lists/[slug]/page.tsx
+++ b/src/app/bucket-lists/[slug]/page.tsx
@@ -118,7 +118,7 @@ export default async function FamousBucketListPage({ params }: Props) {
               {/* Circular progress — desktop */}
               <div className="shrink-0 hidden sm:block">
                 <svg width="72" height="72" viewBox="0 0 72 72" className="-rotate-90">
-                  <circle cx="36" cy="36" r={r} fill="none" stroke="#f5f5f4" strokeWidth="5" />
+                  <circle cx="36" cy="36" r={r} fill="none" stroke="var(--muted)" strokeWidth="5" />
                   <circle
                     cx="36"
                     cy="36"
@@ -233,7 +233,7 @@ export default async function FamousBucketListPage({ params }: Props) {
                         {item.completedNote && (
                           <div className="mt-2.5 flex items-start gap-2 rounded-lg bg-primary/10 border border-lumi-200 px-3 py-2">
                             <span className="text-primary text-sm shrink-0">✓</span>
-                            <p className="text-xs leading-relaxed text-[#684e00]">
+                            <p className="text-xs leading-relaxed text-brand">
                               {item.completedNote}
                             </p>
                           </div>
diff --git a/src/app/bucket-lists/page.tsx b/src/app/bucket-lists/page.tsx
index 24286bd2..731f1f44 100644
--- a/src/app/bucket-lists/page.tsx
+++ b/src/app/bucket-lists/page.tsx
@@ -35,11 +35,11 @@ export const metadata: Metadata = {
 };
 
 const CATEGORY_BORDER_HOVER: Record<string, string> = {
-  travel: 'hover:border-sky-300',
-  adventure: 'hover:border-orange-300',
-  creative: 'hover:border-purple-300',
+  travel: 'hover:border-field-sky-ink',
+  adventure: 'hover:border-field-coral-ink',
+  creative: 'hover:border-field-lilac-ink',
   achievement: 'hover:border-lumi-200',
-  social: 'hover:border-rose-300',
+  social: 'hover:border-field-rose-ink',
   humanitarian: 'hover:border-foreground/30',
 };
 
@@ -176,7 +176,7 @@ export default function BucketListsPage() {
                             cy="30"
                             r={r}
                             fill="none"
-                            stroke="#f5f5f4"
+                            stroke="var(--muted)"
                             strokeWidth="4"
                           />
                           <circle
@@ -197,7 +197,7 @@ export default function BucketListsPage() {
                             dominantBaseline="middle"
                             style={{
                               fontSize: '11px',
-                              fill: '#78716c',
+                              fill: 'var(--muted-foreground)',
                               fontWeight: 600,
                               transform: 'rotate(90deg)',
                               transformOrigin: '30px 30px',
@@ -257,7 +257,7 @@ export default function BucketListsPage() {
       </section>
 
       {/* ── Bottom CTA ───────────────────────────────────────────────────── */}
-      <section className="relative overflow-hidden bg-[#f7e957]">
+      <section className="relative overflow-hidden bg-field-sun">
         <div className="relative mx-auto max-w-3xl px-4 py-20 text-center space-y-6">
           <div className="flex justify-center">
             <Whale size={80} glow float onDark />
@@ -266,7 +266,7 @@ export default function BucketListsPage() {
             Your turn. What do you want to do
             <br className="hidden sm:block" /> before you die?
           </h2>
-          <p className="mx-auto max-w-sm text-base text-[#3f3a20]">
+          <p className="mx-auto max-w-sm text-base text-muted-foreground">
             Whale will help you discover what belongs on your list — based on who you are, not who
             everyone else expects you to be.
           </p>
@@ -279,7 +279,7 @@ export default function BucketListsPage() {
             </Link>
             <Link
               href="/find-your-hobby"
-              className="inline-flex items-center gap-2 rounded-full border-2 border-[#211e18] bg-white px-7 py-3.5 text-sm font-semibold text-[#211e18] transition-colors duration-150 hover:bg-[#fff8d6]"
+              className="inline-flex items-center gap-2 rounded-full border-2 border-border bg-card px-7 py-3.5 text-sm font-semibold text-foreground transition-colors duration-150 hover:bg-field-sun"
             >
               Take the hobby quiz →
             </Link>
diff --git a/src/app/cheap-hobbies/page.tsx b/src/app/cheap-hobbies/page.tsx
index 5106a8b8..20b84b19 100644
--- a/src/app/cheap-hobbies/page.tsx
+++ b/src/app/cheap-hobbies/page.tsx
@@ -272,7 +272,7 @@ export default function CheapHobbiesPage() {
         </a>
         <a
           href="#cheap"
-          className="rounded-full border border-blue-200 bg-blue-50 px-4 py-1.5 text-xs font-semibold text-blue-800 hover:opacity-80 transition-opacity"
+          className="rounded-full border border-field-sky-ink bg-field-sky px-4 py-1.5 text-xs font-semibold text-field-sky-ink hover:opacity-80 transition-opacity"
         >
           10 Under $50
         </a>
@@ -335,7 +335,7 @@ export default function CheapHobbiesPage() {
                     >
                       {hobby.name}
                     </Link>
-                    <span className="flex-shrink-0 rounded-full border border-blue-200 bg-blue-50 px-3 py-0.5 text-xs font-medium text-blue-700">
+                    <span className="flex-shrink-0 rounded-full border border-field-sky-ink bg-field-sky px-3 py-0.5 text-xs font-medium text-field-sky-ink">
                       {hobby.cost}
                     </span>
                   </div>
diff --git a/src/app/commitments/page.tsx b/src/app/commitments/page.tsx
index f0832ee4..144299e4 100644
--- a/src/app/commitments/page.tsx
+++ b/src/app/commitments/page.tsx
@@ -64,13 +64,13 @@ export default async function CommitmentsPage() {
 
   return (
     <div className="mx-auto max-w-4xl space-y-12 px-4 py-10 sm:py-14">
-      <header className="relative overflow-hidden rounded-[1.75rem] bg-[#a8dc91] px-6 py-10 text-[#192817] shadow-[0_14px_40px_rgba(53,80,40,0.10)] sm:px-10 sm:py-12">
+      <header className="relative overflow-hidden rounded-2xl bg-field-green px-6 py-10 text-foreground shadow-[0_14px_40px_color-mix(in_srgb,var(--scrim)_10%,transparent)] sm:px-10 sm:py-12">
         <div className="relative max-w-2xl">
           <p className="text-base font-bold">Living promises</p>
           <h1 className="mt-4 font-serif text-5xl font-medium leading-none tracking-[-0.03em] sm:text-6xl">
             Commitments
           </h1>
-          <p className="mt-5 max-w-xl text-base leading-relaxed text-[#344b31]">
+          <p className="mt-5 max-w-xl text-base leading-relaxed text-muted-foreground">
             Proof. A commitment is a promise you can show your work for — one stamp a day, each with
             evidence attached.
           </p>
diff --git a/src/app/compare/compare-client.tsx b/src/app/compare/compare-client.tsx
index e84f0a4b..8ca576cb 100644
--- a/src/app/compare/compare-client.tsx
+++ b/src/app/compare/compare-client.tsx
@@ -19,7 +19,10 @@ function CostBadge({ cost }: { cost: HobbyDetail['cost'] }) {
   const map: Record<HobbyDetail['cost'], { label: string; className: string }> = {
     free: { label: 'Free', className: 'bg-foreground/10 text-foreground border-foreground/20' },
     low: { label: 'Low ($)', className: 'bg-foreground/10 text-foreground border-foreground/20' },
-    medium: { label: 'Medium ($$)', className: 'bg-orange-100 text-orange-700 border-orange-200' },
+    medium: {
+      label: 'Medium ($$)',
+      className: 'bg-field-coral text-field-coral-ink border-field-coral-ink',
+    },
     high: {
       label: 'High ($$$)',
       className: 'bg-destructive/15 text-destructive border-destructive/30',
@@ -91,12 +94,12 @@ function LocationTags({ indoor, outdoor }: { indoor: boolean; outdoor: boolean }
   return (
     <span className="flex flex-wrap gap-1">
       {indoor && (
-        <span className="rounded-full border border-blue-200 bg-blue-50 px-2.5 py-0.5 text-xs text-blue-700">
+        <span className="rounded-full border border-field-sky-ink bg-field-sky px-2.5 py-0.5 text-xs text-field-sky-ink">
           Indoor
         </span>
       )}
       {outdoor && (
-        <span className="rounded-full border border-green-200 bg-green-50 px-2.5 py-0.5 text-xs text-green-700">
+        <span className="rounded-full border border-growth bg-field-green px-2.5 py-0.5 text-xs text-growth">
           Outdoor
         </span>
       )}
diff --git a/src/app/error.tsx b/src/app/error.tsx
index c08527c0..bd403937 100644
--- a/src/app/error.tsx
+++ b/src/app/error.tsx
@@ -36,7 +36,9 @@ export default function Error({
             Home
           </button>
         </div>
-        {error.digest ? <p className="mt-6 text-xs opacity-40">Reference: {error.digest}</p> : null}
+        {error.digest ? (
+          <p className="mt-6 text-xs text-subtle">Reference: {error.digest}</p>
+        ) : null}
       </div>
     </div>
   );
diff --git a/src/app/experiences/[slug]/page.tsx b/src/app/experiences/[slug]/page.tsx
index fd4bb7f9..585cd5e5 100644
--- a/src/app/experiences/[slug]/page.tsx
+++ b/src/app/experiences/[slug]/page.tsx
@@ -94,7 +94,7 @@ export default async function ExperiencePage({ params }: { params: Promise<{ slu
         {entry.emoji} {entry.title}
       </h1>
 
-      <p className="mt-5 max-w-[62ch] text-lg text-foreground/80" style={{ lineHeight: 1.6 }}>
+      <p className="mt-5 max-w-[62ch] text-lg text-muted-foreground" style={{ lineHeight: 1.6 }}>
         {guide?.summary ?? entry.description}
       </p>
 
diff --git a/src/app/experiences/collections/[slug]/page.tsx b/src/app/experiences/collections/[slug]/page.tsx
index dcc968a6..c3a360f3 100644
--- a/src/app/experiences/collections/[slug]/page.tsx
+++ b/src/app/experiences/collections/[slug]/page.tsx
@@ -77,7 +77,7 @@ export default async function ExperienceCollectionPage({ params }: Props) {
       >
         {collection.title}
       </h1>
-      <p className="mt-5 max-w-[62ch] text-lg leading-relaxed text-foreground/80">
+      <p className="mt-5 max-w-[62ch] text-lg leading-relaxed text-muted-foreground">
         {collection.introduction}
       </p>
       <section className="mt-14">
diff --git a/src/app/experiences/collections/page.tsx b/src/app/experiences/collections/page.tsx
index 767303f1..6c022073 100644
--- a/src/app/experiences/collections/page.tsx
+++ b/src/app/experiences/collections/page.tsx
@@ -42,7 +42,7 @@ export default function ExperienceCollectionsPage() {
       >
         Choose by the kind of time you have.
       </h1>
-      <p className="mt-5 max-w-[62ch] text-lg leading-relaxed text-foreground/80">
+      <p className="mt-5 max-w-[62ch] text-lg leading-relaxed text-muted-foreground">
         A few deliberate selections from the catalog. Start with a weekend, a small budget, time on
         your own or something to make with a friend.
       </p>
diff --git a/src/app/experiences/experiences-client.tsx b/src/app/experiences/experiences-client.tsx
index 01a80255..42a1c765 100644
--- a/src/app/experiences/experiences-client.tsx
+++ b/src/app/experiences/experiences-client.tsx
@@ -100,7 +100,7 @@ export function ExperiencesClient({ initialPage, initialQuery, mode }: Props) {
               updateUrl({ query: e.target.value, page: 1 });
             }}
             placeholder="Search — northern lights, marathon, learn…"
-            className="w-full rounded-xl border-2 border-border bg-card px-4 py-3 text-base text-foreground placeholder:text-muted-foreground/60 focus-visible:border-primary focus-visible:outline-none"
+            className="w-full rounded-xl border-2 border-border bg-card px-4 py-3 text-base text-foreground placeholder:text-muted-foreground focus-visible:border-primary focus-visible:outline-none"
           />
         </div>
 
diff --git a/src/app/experiences/page.tsx b/src/app/experiences/page.tsx
index 3bed97e1..b8bd0620 100644
--- a/src/app/experiences/page.tsx
+++ b/src/app/experiences/page.tsx
@@ -70,7 +70,7 @@ export default async function ExperiencesPage({
       >
         Things you could do.
       </h1>
-      <p className="mt-5 max-w-[62ch] text-lg text-foreground/80" style={{ lineHeight: 1.6 }}>
+      <p className="mt-5 max-w-[62ch] text-lg text-muted-foreground" style={{ lineHeight: 1.6 }}>
         {catalog.total} ideas in one shared catalog — places to go, milestones worth reaching, and
         things worth trying. Explore by category, and keep the ones that matter in your own list.
       </p>
diff --git a/src/app/explore/explore-client.tsx b/src/app/explore/explore-client.tsx
index a7131b32..4f6a8c88 100644
--- a/src/app/explore/explore-client.tsx
+++ b/src/app/explore/explore-client.tsx
@@ -20,13 +20,13 @@ import type { TimelineData } from '~/lib/types';
 // Phase strip colors cycling through warm/cool hues
 const PHASE_COLORS = [
   'bg-foreground',
-  'bg-blue-400',
-  'bg-purple-400',
-  'bg-orange-400',
-  'bg-pink-400',
-  'bg-teal-400',
+  'bg-field-sky-ink',
+  'bg-field-lilac-ink',
+  'bg-field-coral-ink',
+  'bg-field-rose-ink',
+  'bg-field-green-ink',
   'bg-primary',
-  'bg-violet-400',
+  'bg-field-lilac-ink',
 ];
 
 type SortOption = 'all' | 'most-phases' | 'most-hobbies' | 'recent';
@@ -279,11 +279,11 @@ function ExploreBackfill({ hasResults }: { hasResults: boolean }) {
 
 function ExploreFooter() {
   return (
-    <section className="mt-10 rounded-xl border border-foreground/20 bg-foreground px-5 py-6 text-background md:flex md:items-center md:justify-between md:gap-6">
+    <section className="mt-10 rounded-xl border border-border bg-card px-5 py-6 text-foreground md:flex md:items-center md:justify-between md:gap-6">
       <div>
-        <p className="text-sm font-semibold text-background">Community signal</p>
+        <p className="text-sm font-semibold text-brand">Community signal</p>
         <h2 className="mt-2 text-xl font-semibold">Explore grows with every public phase.</h2>
-        <p className="mt-2 max-w-2xl text-sm leading-6 text-background/75">
+        <p className="mt-2 max-w-2xl text-sm leading-6 text-muted-foreground">
           Add a timeline with hobbies, dates, and phase labels so other people can discover patterns
           beyond a flat list of interests.
         </p>
@@ -291,7 +291,7 @@ function ExploreFooter() {
       <Link
         href="/timeline/new"
         prefetch={false}
-        className="mt-5 inline-flex min-h-11 items-center justify-center gap-2 rounded-lg bg-background px-4 py-2 text-sm font-semibold text-foreground transition-colors hover:bg-background/90 md:mt-0"
+        className="mt-5 inline-flex min-h-11 items-center justify-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90 md:mt-0"
       >
         Build your timeline
         <ArrowRight className="h-4 w-4" />
@@ -391,7 +391,7 @@ export function ExploreClient({ timelines }: ExploreClientProps) {
           onClick={() => setCategoryFilter(null)}
           className={`min-h-11 rounded-full px-3.5 py-1.5 text-sm font-medium transition-colors ${
             categoryFilter === null
-              ? 'bg-foreground text-background'
+              ? 'bg-primary text-primary-foreground'
               : 'border border-border bg-card text-muted-foreground hover:border-border hover:text-foreground'
           }`}
         >
@@ -404,7 +404,7 @@ export function ExploreClient({ timelines }: ExploreClientProps) {
             onClick={() => setCategoryFilter(categoryFilter === cat.name ? null : cat.name)}
             className={`min-h-11 rounded-full px-3.5 py-1.5 text-sm font-medium transition-colors ${
               categoryFilter === cat.name
-                ? 'bg-foreground text-background'
+                ? 'bg-primary text-primary-foreground'
                 : 'border border-border bg-card text-muted-foreground hover:border-border hover:text-foreground'
             }`}
           >
diff --git a/src/app/find-your-hobby/page.tsx b/src/app/find-your-hobby/page.tsx
index ca4d1ea4..43367ff3 100644
--- a/src/app/find-your-hobby/page.tsx
+++ b/src/app/find-your-hobby/page.tsx
@@ -39,7 +39,7 @@ export default function FindYourHobbyPage() {
           offers: { '@type': 'Offer', price: '0' },
         }}
       />
-      <div className="relative bg-[#b9dcf5]">
+      <div className="relative bg-field-sky">
         <HobbyQuiz />
       </div>
     </>
diff --git a/src/app/find-your-hobby/quiz-client.tsx b/src/app/find-your-hobby/quiz-client.tsx
index afd4eb7b..4a9a2a01 100644
--- a/src/app/find-your-hobby/quiz-client.tsx
+++ b/src/app/find-your-hobby/quiz-client.tsx
@@ -446,7 +446,7 @@ export function HobbyQuiz() {
       const { toPng } = await import('html-to-image');
       const dataUrl = await toPng(cardRef.current, {
         pixelRatio: 2,
-        backgroundColor: '#020617',
+        backgroundColor: getComputedStyle(cardRef.current).getPropertyValue('--background').trim(),
       });
       const link = document.createElement('a');
       link.download = 'my-hobby-personality.png';
@@ -518,12 +518,12 @@ export function HobbyQuiz() {
       <div className="mx-auto min-h-[calc(100svh-4.5rem)] max-w-3xl px-4 py-10 sm:py-14">
         {/* Header */}
         {!isResults && (
-          <div className="mb-10 rounded-[1.5rem] bg-white px-6 py-9 text-center shadow-[0_12px_36px_rgba(39,74,97,0.10)] sm:px-10">
-            <p className="text-base font-bold text-[#274a61]">Find a hobby</p>
-            <h1 className="mt-3 font-serif text-5xl font-medium leading-[1.02] tracking-[-0.03em] text-[#192a36] sm:text-6xl">
+          <div className="mb-10 rounded-2xl bg-card px-6 py-9 text-center shadow-[0_12px_36px_color-mix(in_srgb,var(--scrim)_10%,transparent)] sm:px-10">
+            <p className="text-base font-bold text-field-sky-ink">Find a hobby</p>
+            <h1 className="mt-3 font-serif text-5xl font-medium leading-[1.02] tracking-[-0.03em] text-foreground sm:text-6xl">
               Find Your Perfect Hobby
             </h1>
-            <p className="mx-auto mt-5 max-w-xl text-base leading-relaxed text-[#405b6c]">
+            <p className="mx-auto mt-5 max-w-xl text-base leading-relaxed text-muted-foreground">
               Nine focused questions, about three minutes, and a shortlist built around how you
               actually like to spend your time.
             </p>
@@ -552,7 +552,7 @@ export function HobbyQuiz() {
         {!isResults && currentQuestion && (
           <div key={step} className="animate-in fade-in slide-in-from-right-4 duration-300">
             <SpotlightCard
-              className="rounded-[1.5rem] border-0 bg-white shadow-[0_12px_36px_rgba(39,74,97,0.12)]"
+              className="rounded-2xl border-0 bg-card shadow-[0_12px_36px_color-mix(in_srgb,var(--scrim)_12%,transparent)]"
               innerClassName="p-6 sm:p-9"
             >
               <div className="mb-3 text-center text-base font-medium text-subtle">
@@ -571,7 +571,7 @@ export function HobbyQuiz() {
                       key={i}
                       data-quiz-option
                       onClick={() => handleSelect(i)}
-                      className={`flex min-h-16 items-center gap-3 rounded-xl border-2 p-4 text-left transition-all duration-150 hover:border-[#4c7895] hover:bg-[#eaf6ff] focus:outline-none focus:ring-2 focus:ring-[#4c7895] focus:ring-offset-2 ${
+                      className={`flex min-h-16 items-center gap-3 rounded-xl border-2 p-4 text-left transition-all duration-150 hover:border-field-sky-ink hover:bg-field-sky focus:outline-none focus:ring-2 focus:ring-field-sky-ink focus:ring-offset-2 ${
                         isSelected
                           ? 'border-foreground/30 bg-foreground/10 shadow-sm'
                           : 'border-border bg-card'
@@ -614,7 +614,7 @@ export function HobbyQuiz() {
         {isResults && archetype && (
           <div className="animate-in fade-in slide-in-from-bottom-4 duration-500">
             {/* Archetype reveal */}
-            <div className="relative mb-10 overflow-hidden rounded-2xl border border-foreground/20 bg-gradient-to-br from-foreground/10 to-white p-8 text-center shadow-soft">
+            <div className="relative mb-10 overflow-hidden rounded-2xl border border-foreground/20 bg-gradient-to-br from-foreground/10 to-card p-8 text-center shadow-soft">
               <div className="mb-4 text-6xl">{archetype.emoji}</div>
               <p className="mb-1 text-sm font-semibold text-foreground">Your Hobby Archetype</p>
               <h1 className="mb-3 text-3xl font-bold text-foreground">{archetype.title}</h1>
diff --git a/src/app/global-error.tsx b/src/app/global-error.tsx
index 2f44dac0..079a675c 100644
--- a/src/app/global-error.tsx
+++ b/src/app/global-error.tsx
@@ -30,8 +30,9 @@ export default function GlobalError({
           alignItems: 'center',
           justifyContent: 'center',
           fontFamily: 'system-ui, -apple-system, Segoe UI, Roboto, sans-serif',
-          background: '#fafaf9',
-          color: '#1c1917',
+          colorScheme: 'dark',
+          background: '#120e09',
+          color: '#f7f3e9',
           padding: '2rem',
         }}
       >
@@ -39,7 +40,7 @@ export default function GlobalError({
           <h2 style={{ fontSize: '1.5rem', fontWeight: 700, marginBottom: 12 }}>
             Something went wrong
           </h2>
-          <p style={{ fontSize: '0.875rem', opacity: 0.7, marginBottom: 24 }}>
+          <p style={{ fontSize: '0.875rem', color: '#b7b0a3', marginBottom: 24 }}>
             The app failed to load. Please reload the page — if it keeps happening, try again in a
             few minutes.
           </p>
@@ -47,17 +48,17 @@ export default function GlobalError({
             onClick={reset}
             style={{
               padding: '0.5rem 1rem',
-              borderRadius: 6,
-              border: '1px solid #d6d3d1',
-              background: 'transparent',
-              color: 'inherit',
+              borderRadius: 12,
+              border: '1px solid #3b342a',
+              background: '#e7bf57',
+              color: '#1d1409',
               cursor: 'pointer',
             }}
           >
             Reload
           </button>
           {error.digest ? (
-            <p style={{ marginTop: 24, fontSize: '0.75rem', opacity: 0.4 }}>
+            <p style={{ marginTop: 24, fontSize: '0.75rem', color: '#aaa293' }}>
               Reference: {error.digest}
             </p>
           ) : null}
diff --git a/src/app/globals.css b/src/app/globals.css
index 8396dffe..7197890f 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -4,87 +4,132 @@
 
 @theme inline {
   --font-serif: var(--font-serif);
-  --font-mono: var(--font-geist-mono);
-  --radius-2xl: calc(var(--radius) + 8px);
-  --radius-3xl: calc(var(--radius) + 12px);
-  --radius-4xl: calc(var(--radius) + 16px);
-  /* Brand — gold (Lumi guiding light, primary actions) */
-  --color-brand-50: oklch(0.97 0.03 88);
-  --color-brand-100: oklch(0.93 0.06 88);
-  --color-brand-500: oklch(0.82 0.13 88);
-  --color-brand-600: oklch(0.72 0.14 88);
-  --color-brand-700: oklch(0.60 0.13 88);
-  --color-brand-900: oklch(0.40 0.10 88);
-  /* Lumi — amber/gold guiding light (per PRODUCT.md) */
-  --color-lumi: oklch(0.82 0.13 88);
-  --color-lumi-50: oklch(0.97 0.03 88);
-  --color-lumi-100: oklch(0.93 0.06 88);
-  --color-lumi-200: oklch(0.88 0.09 88);
-  --color-lumi-300: oklch(0.84 0.12 88);
-  --color-lumi-400: oklch(0.82 0.13 88);
-  --color-lumi-500: oklch(0.72 0.14 88);
-  --color-lumi-600: oklch(0.60 0.13 88);
-  --color-lumi-700: oklch(0.48 0.11 88);
-  /* Growth — sage green (practice / stamps / progress) */
-  --color-growth: oklch(0.72 0.13 150);
-  --color-growth-soft: oklch(0.72 0.13 150 / 0.16);
-  /* Hero surfaces — warm paper for the daylight product world */
-  --color-hero: oklch(0.975 0.018 88);
-  --color-hero-surface: oklch(0.94 0.025 88);
-  /* Subtle — the accessible third text tier.
-     There used to be no token quieter than --muted-foreground, so 174 call
-     sites reached for opacity instead: text-muted-foreground/60 lands at
-     3.44:1 on --card and /40 at 2.20:1, both below the 4.5:1 body minimum.
-     This is solid rather than alpha-blended, measuring 5.18:1 on --background
-     and 4.87:1 on --card while staying clearly quieter than --muted-foreground
-     (7.4:1). Reach for this instead of fading muted text. */
-  --color-subtle: oklch(0.46 0.018 72);
-}
-
-/* ─── Warm daylight palette ───────────────────────────────────────────────────
-   Paper canvas, dark olive ink, and sun-gold action. The product is meant to
-   be used in ordinary daytime life, so darkness is a local storytelling tool,
-   not the application shell. All values OKLCH.
-*/
+  --font-mono: var(--font-geist-mono, "Geist Mono Variable");
+  --radius-xl: var(--radius);
+  --radius-2xl: calc(var(--radius) + 4px);
+  --radius-3xl: calc(var(--radius) + 4px);
+  --radius-4xl: calc(var(--radius) + 4px);
+  /* Atlas actions, dark fields, and readable field accents. */
+  --color-brand-50: var(--field-sun);
+  --color-brand-100: var(--field-sun);
+  --color-brand-500: var(--brand);
+  --color-brand-600: var(--brand);
+  --color-brand-700: var(--brand);
+  --color-brand-900: var(--field-sun);
+  --color-lumi: var(--brand);
+  --color-lumi-50: var(--field-sun);
+  --color-lumi-100: var(--field-sun);
+  --color-lumi-200: var(--field-sun);
+  --color-lumi-300: var(--brand);
+  --color-lumi-400: var(--brand);
+  --color-lumi-500: var(--brand);
+  --color-lumi-600: var(--brand);
+  --color-lumi-700: var(--field-sun);
+  --color-growth: var(--success);
+  --color-growth-soft: color-mix(in srgb, var(--success) 16%, transparent);
+  --color-hero: var(--surface);
+  --color-hero-surface: var(--card);
+  /* Solid third text tier: 7.60:1 on background, 6.95:1 on card,
+     and at least 5.29:1 on every dark field (WCAG sRGB luminance).
+     Muted foreground is 8.93:1 / 8.16:1 on background / card.
+     Use this solid role instead of fading text with opacity. */
+  --color-subtle: var(--subtle);
+  --color-scrim: var(--scrim);
+  --color-week-spent: var(--week-spent);
+  --color-field-sun: var(--field-sun);
+  --color-field-sun-ink: var(--field-sun-ink);
+  --color-field-sky: var(--field-sky);
+  --color-field-sky-ink: var(--field-sky-ink);
+  --color-field-coral: var(--field-coral);
+  --color-field-coral-ink: var(--field-coral-ink);
+  --color-field-green: var(--field-green);
+  --color-field-green-ink: var(--field-green-ink);
+  --color-field-lilac: var(--field-lilac);
+  --color-field-lilac-ink: var(--field-lilac-ink);
+  --color-field-rose: var(--field-rose);
+  --color-field-rose-ink: var(--field-rose-ink);
+}
+
+/* Owner decision, 11 Oct 2026: dark everywhere, including the landing. */
 :root {
-  --brand: oklch(0.82 0.13 88);
-  --brand-foreground: oklch(0.20 0.025 72);
-  --brand-soft: oklch(0.93 0.06 88);
-  --brand-ink: oklch(0.50 0.12 72);
-  --background: oklch(0.985 0.012 88);
-  --foreground: oklch(0.20 0.025 72);
-  --primary: oklch(0.50 0.12 72);
-  --primary-foreground: oklch(0.985 0.012 88);
-  --secondary: oklch(0.94 0.025 88);
-  --secondary-foreground: oklch(0.24 0.025 72);
-  --muted: oklch(0.95 0.018 88);
-  --muted-foreground: oklch(0.46 0.018 72);
-  --accent: oklch(0.92 0.045 88);
-  --accent-foreground: oklch(0.20 0.025 72);
-  --destructive: oklch(0.56 0.20 25);
-  --border: oklch(0.86 0.025 82);
-  --input: oklch(0.82 0.025 82);
-  --ring: oklch(0.50 0.12 72);
-  --chart-1: oklch(0.68 0.15 82);
-  --chart-2: oklch(0.57 0.13 150);
-  --chart-3: oklch(0.78 0.10 200);
-  --chart-4: oklch(0.70 0.15 50);
-  --chart-5: oklch(0.80 0.08 320);
-  --sidebar: oklch(0.97 0.018 88);
-  --sidebar-accent: oklch(0.92 0.045 88);
-  --sidebar-ring: oklch(0.60 0.14 82);
+  color-scheme: dark;
+  --radius: 0.75rem;
+  --brand: #e7bf57;
+  --brand-foreground: #1d1409;
+  --brand-soft: var(--field-sun);
+  --brand-ink: var(--brand);
+  --background: #120e09;
+  --foreground: #f7f3e9;
+  --card: #1e1812;
+  --card-foreground: var(--foreground);
+  --surface: #17130d;
+  --popover: var(--card);
+  --popover-foreground: var(--foreground);
+  --primary: var(--brand);
+  --primary-foreground: var(--brand-foreground);
+  --secondary: #26211a;
+  --secondary-foreground: var(--foreground);
+  --muted: var(--secondary);
+  --muted-foreground: #b7b0a3;
+  --accent: var(--muted);
+  --accent-foreground: var(--foreground);
+  --destructive: #f66d67;
+  --success: #62bb78;
+  --warning: var(--brand);
+  --border: #3b342a;
+  --hairline: var(--border);
+  --input: var(--border);
+  --ring: var(--brand);
+  --subtle: #aaa293;
+  --scrim: oklch(0 0 0);
+  --week-spent: oklch(0.34 0.012 72);
+  --chart-1: var(--brand);
+  --chart-2: var(--success);
+  --chart-3: var(--field-sky-ink);
+  --chart-4: var(--field-coral-ink);
+  --chart-5: var(--field-lilac-ink);
+  --sidebar: var(--surface);
+  --sidebar-foreground: var(--foreground);
+  --sidebar-primary: var(--primary);
+  --sidebar-primary-foreground: var(--primary-foreground);
+  --sidebar-accent: var(--accent);
+  --sidebar-accent-foreground: var(--foreground);
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--ring);
+  --field-sun: oklch(0.30 0.055 95);
+  --field-sun-ink: oklch(0.86 0.09 95);
+  --field-sky: oklch(0.30 0.05 240);
+  --field-sky-ink: oklch(0.86 0.06 240);
+  --field-coral: oklch(0.30 0.065 40);
+  --field-coral-ink: oklch(0.86 0.06 40);
+  --field-green: oklch(0.30 0.05 145);
+  --field-green-ink: oklch(0.86 0.07 145);
+  --field-lilac: oklch(0.30 0.065 300);
+  --field-lilac-ink: oklch(0.86 0.06 300);
+  --field-rose: oklch(0.30 0.05 350);
+  --field-rose-ink: oklch(0.86 0.06 350);
+  --tone-1: var(--field-coral);
+  --tone-2: var(--field-lilac);
+  --tone-3: var(--field-green);
+  --tone-4: var(--field-sun);
+  --tone-ink: var(--surface);
+  --accent-ink: var(--brand);
 }
 
 @layer base {
   html {
-    color-scheme: light;
+    color-scheme: dark;
   }
   body {
     font-feature-settings: "rlig" 1, "calt" 1;
   }
+  input::placeholder, textarea::placeholder {
+    color: var(--subtle);
+    opacity: 1;
+  }
   ::selection {
-    background: oklch(0.82 0.13 88 / 0.45);
-    color: oklch(0.20 0.025 72);
+    background: var(--brand);
+    color: var(--brand-foreground);
   }
   /* Balance text wrapping on headings by default for better multi-line layout */
   h1, h2, h3 {
@@ -105,7 +150,7 @@
 
 @layer components {
   .field-input {
-    @apply mt-2 min-h-12 w-full rounded-xl border-2 border-[#d9cfbd] bg-white px-4 text-base text-[#211e18] placeholder:text-[#8c8273] focus-visible:border-[#176b4a] focus-visible:outline-none;
+    @apply mt-2 min-h-12 w-full rounded-xl border-2 border-input bg-card px-4 text-base text-foreground placeholder:text-subtle focus-visible:border-ring focus-visible:outline-none;
   }
 }
 
@@ -114,32 +159,32 @@
   /* Subtle elevation — Stripe-like card shadow */
   .shadow-soft {
     box-shadow:
-      0 1px 2px 0 oklch(0 0 0 / 0.05),
-      0 1px 3px 0 oklch(0 0 0 / 0.08);
+      0 1px 2px 0 color-mix(in srgb, var(--scrim) 5%, transparent),
+      0 1px 3px 0 color-mix(in srgb, var(--scrim) 8%, transparent);
   }
   .shadow-elevated {
     box-shadow:
-      0 2px 4px 0 oklch(0 0 0 / 0.06),
-      0 4px 12px 0 oklch(0 0 0 / 0.1);
+      0 2px 4px 0 color-mix(in srgb, var(--scrim) 6%, transparent),
+      0 4px 12px 0 color-mix(in srgb, var(--scrim) 10%, transparent);
   }
   .shadow-float {
     box-shadow:
-      0 4px 8px 0 oklch(0 0 0 / 0.08),
-      0 8px 24px 0 oklch(0 0 0 / 0.12);
+      0 4px 8px 0 color-mix(in srgb, var(--scrim) 8%, transparent),
+      0 8px 24px 0 color-mix(in srgb, var(--scrim) 12%, transparent);
   }
   /* Gold glow for primary CTAs */
   .shadow-glow {
-    box-shadow: 0 0 20px oklch(0.82 0.13 88 / 0.25);
+    box-shadow: 0 0 20px color-mix(in srgb, var(--brand) 25%, transparent);
   }
   .shadow-glow-lg {
-    box-shadow: 0 0 40px oklch(0.82 0.13 88 / 0.3);
+    box-shadow: 0 0 40px color-mix(in srgb, var(--brand) 30%, transparent);
   }
   /* Gradient border — premium card edge */
   .border-gradient {
     border: 1px solid transparent;
     background:
       linear-gradient(var(--card), var(--card)) padding-box,
-      linear-gradient(135deg, oklch(0.82 0.13 88 / 0.3), oklch(0.72 0.13 150 / 0.2)) border-box;
+      linear-gradient(135deg, color-mix(in srgb, var(--brand) 30%, transparent), color-mix(in srgb, var(--success) 20%, transparent)) border-box;
   }
 }
 
@@ -253,8 +298,8 @@
 }
 
 @keyframes glowPulse {
-  0%, 100% { box-shadow: 0 0 20px oklch(0.82 0.13 88 / 0.20), 0 0 40px oklch(0.82 0.13 88 / 0.08); }
-  50%       { box-shadow: 0 0 32px oklch(0.82 0.13 88 / 0.35), 0 0 64px oklch(0.82 0.13 88 / 0.15); }
+  0%, 100% { box-shadow: 0 0 20px color-mix(in srgb, var(--brand) 20%, transparent), 0 0 40px color-mix(in srgb, var(--brand) 8%, transparent); }
+  50%       { box-shadow: 0 0 32px color-mix(in srgb, var(--brand) 35%, transparent), 0 0 64px color-mix(in srgb, var(--brand) 15%, transparent); }
 }
 
 @keyframes shinePass {
@@ -413,8 +458,8 @@
   animation: float2 9s ease-in-out infinite;
 }
 @keyframes lumiGlowPulse {
-  0%, 100% { filter: drop-shadow(0 0 12px oklch(0.82 0.13 88 / 0.55)); }
-  50%       { filter: drop-shadow(0 0 28px oklch(0.82 0.13 88 / 0.85)); }
+  0%, 100% { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--brand) 55%, transparent)); }
+  50%       { filter: drop-shadow(0 0 28px color-mix(in srgb, var(--brand) 85%, transparent)); }
 }
 .animate-lumi-glow {
   animation: lumiGlowPulse 3s ease-in-out infinite;
@@ -429,8 +474,8 @@
   animation: whaleFloat 8s ease-in-out infinite;
 }
 @keyframes whaleGlowPulse {
-  0%, 100% { filter: drop-shadow(0 0 10px oklch(0.82 0.13 88 / 0.35)); }
-  50%      { filter: drop-shadow(0 0 22px oklch(0.82 0.13 88 / 0.6)); }
+  0%, 100% { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--brand) 35%, transparent)); }
+  50%      { filter: drop-shadow(0 0 22px color-mix(in srgb, var(--brand) 60%, transparent)); }
 }
 .animate-whale-glow {
   animation: whaleGlowPulse 6s ease-in-out infinite;
@@ -512,7 +557,7 @@
   min-height: calc(100svh - 4.5rem);
   overflow: hidden;
   isolation: isolate;
-  background: #0b1320 url('/hero/hobby-horizon-poster.jpg') center / cover no-repeat;
+  background: var(--background) url('/hero/hobby-horizon-poster.jpg') center / cover no-repeat;
 }
 
 .landing-cinematic-hero__video,
@@ -536,8 +581,8 @@
 
 .landing-cinematic-hero__scrim {
   background:
-    linear-gradient(90deg, oklch(0.08 0.025 250 / 0.92) 0%, oklch(0.08 0.025 250 / 0.7) 38%, oklch(0.08 0.025 250 / 0.18) 72%),
-    linear-gradient(180deg, oklch(0.08 0.025 250 / 0.48) 0%, transparent 35%, oklch(0.08 0.025 250 / 0.72) 100%);
+    linear-gradient(90deg, color-mix(in srgb, var(--scrim) 92%, transparent) 0%, color-mix(in srgb, var(--scrim) 70%, transparent) 38%, color-mix(in srgb, var(--scrim) 18%, transparent) 72%),
+    linear-gradient(180deg, color-mix(in srgb, var(--scrim) 48%, transparent) 0%, transparent 35%, color-mix(in srgb, var(--scrim) 72%, transparent) 100%);
 }
 
 .landing-cinematic-hero__inner {
@@ -566,7 +611,7 @@
 .landing-cinematic-hero h1 {
   margin: 0;
   max-width: 14ch;
-  color: oklch(0.99 0.004 90);
+  color: var(--foreground);
   font-size: clamp(3rem, 6.8vw, 6rem);
   font-weight: 720;
   letter-spacing: -0.035em;
@@ -581,7 +626,7 @@
 .landing-cinematic-hero__copy > p {
   max-width: 47ch;
   margin: clamp(1.5rem, 3vw, 2rem) 0 0;
-  color: oklch(0.92 0.018 88);
+  color: var(--foreground);
   font-size: clamp(1.05rem, 1.5vw, 1.25rem);
   line-height: 1.55;
   text-wrap: pretty;
@@ -595,8 +640,8 @@
   align-items: center;
   gap: 0.75rem;
   border-radius: 0.75rem;
-  background: oklch(0.84 0.14 85);
-  color: oklch(0.16 0.025 250);
+  background: var(--brand);
+  color: var(--brand-foreground);
   font-size: 0.98rem;
   font-weight: 700;
   text-decoration: none;
@@ -604,24 +649,24 @@
 }
 
 .landing-cinematic-hero__cta:hover {
-  background: oklch(0.91 0.12 85);
+  background: color-mix(in srgb, var(--brand) 90%, var(--foreground));
 }
 
 .landing-cinematic-hero__cta:focus-visible {
-  outline: 3px solid white;
+  outline: 3px solid var(--ring);
   outline-offset: 4px;
 }
 
 .landing-cinematic-hero__copy > .landing-cinematic-hero__note {
   margin-top: 0.85rem;
-  color: oklch(0.81 0.018 88);
+  color: var(--muted-foreground);
   font-size: 0.875rem;
 }
 
 .landing-cinematic-hero__prompt {
   align-self: flex-end;
   margin: 0;
-  color: oklch(0.92 0.018 88);
+  color: var(--foreground);
   font-size: 0.875rem;
 }
 
@@ -647,8 +692,8 @@
 
   .landing-cinematic-hero__scrim {
     background:
-      linear-gradient(90deg, oklch(0.08 0.025 250 / 0.84) 0%, oklch(0.08 0.025 250 / 0.46) 100%),
-      linear-gradient(180deg, oklch(0.08 0.025 250 / 0.56) 0%, transparent 30%, oklch(0.08 0.025 250 / 0.86) 100%);
+      linear-gradient(90deg, color-mix(in srgb, var(--scrim) 84%, transparent) 0%, color-mix(in srgb, var(--scrim) 46%, transparent) 100%),
+      linear-gradient(180deg, color-mix(in srgb, var(--scrim) 56%, transparent) 0%, transparent 30%, color-mix(in srgb, var(--scrim) 86%, transparent) 100%);
   }
 
   .landing-cinematic-hero h1 {
diff --git a/src/app/history/page.tsx b/src/app/history/page.tsx
index 41544a05..543ed5ea 100644
--- a/src/app/history/page.tsx
+++ b/src/app/history/page.tsx
@@ -162,10 +162,10 @@ export default async function LookBackPage() {
 
         <section
           id="personal-timeline"
-          className="mt-8 scroll-mt-24 overflow-hidden rounded-[1.75rem] border border-[#d9cfbd] bg-white"
+          className="mt-8 scroll-mt-24 overflow-hidden rounded-2xl border border-border bg-card"
         >
           <div className="grid lg:grid-cols-[0.72fr_1.28fr]">
-            <div className="relative min-h-72 overflow-hidden bg-[#211e18]">
+            <div className="relative min-h-72 overflow-hidden bg-surface">
               <Image
                 src="/categories/creative-1200.webp"
                 alt="Hands making something as part of a lived hobby chapter"
@@ -173,9 +173,9 @@ export default async function LookBackPage() {
                 sizes="(min-width: 1024px) 34vw, 100vw"
                 className="object-cover opacity-75"
               />
-              <div className="absolute inset-0 bg-gradient-to-t from-[#211e18] via-transparent to-transparent" />
-              <div className="absolute inset-x-0 bottom-0 p-6 text-white sm:p-8">
-                <p className="text-sm font-bold text-[#f7e957]">Your personal timeline</p>
+              <div className="absolute inset-0 bg-gradient-to-t from-scrim via-transparent to-transparent" />
+              <div className="absolute inset-x-0 bottom-0 p-6 text-foreground sm:p-8">
+                <p className="text-sm font-bold text-brand">Your personal timeline</p>
                 <h2 className="mt-2 font-serif text-4xl">The chapters that made you.</h2>
               </div>
             </div>
@@ -218,10 +218,10 @@ export default async function LookBackPage() {
                 <SpotlightCard
                   className={`relative overflow-hidden rounded-2xl border-0 p-8 sm:p-10 ${
                     index % 3 === 0
-                      ? 'bg-[#ffd0bd]'
+                      ? 'bg-field-coral'
                       : index % 3 === 1
-                        ? 'bg-[#d8c8fa]'
-                        : 'bg-white shadow-[0_10px_30px_rgba(66,55,22,0.08)]'
+                        ? 'bg-field-lilac'
+                        : 'bg-card shadow-[0_10px_30px_color-mix(in_srgb,var(--scrim)_8%,transparent)]'
                   }`}
                 >
                   {section.kind === 'opening' && <GradientMesh variant="gold" />}
diff --git a/src/app/hobbies-for-adults/page.tsx b/src/app/hobbies-for-adults/page.tsx
index e73ad4e4..5051b385 100644
--- a/src/app/hobbies-for-adults/page.tsx
+++ b/src/app/hobbies-for-adults/page.tsx
@@ -338,7 +338,7 @@ export default function HobbiesForAdultsPage() {
         </p>
       </FadeIn>
 
-      <Section title="Creative" hobbies={CREATIVE} color="text-purple-700" />
+      <Section title="Creative" hobbies={CREATIVE} color="text-field-lilac-ink" />
       <Section title="Physical" hobbies={PHYSICAL} color="text-foreground" />
 
       <FadeIn className="my-8">
@@ -351,9 +351,9 @@ export default function HobbiesForAdultsPage() {
         </SpotlightCard>
       </FadeIn>
 
-      <Section title="Intellectual" hobbies={INTELLECTUAL} color="text-blue-700" />
-      <Section title="Social" hobbies={SOCIAL} color="text-orange-700" />
-      <Section title="Outdoor" hobbies={OUTDOOR} color="text-teal-700" />
+      <Section title="Intellectual" hobbies={INTELLECTUAL} color="text-field-sky-ink" />
+      <Section title="Social" hobbies={SOCIAL} color="text-field-coral-ink" />
+      <Section title="Outdoor" hobbies={OUTDOOR} color="text-field-green-ink" />
       <Section title="Making" hobbies={MAKING} color="text-foreground" />
 
       <FadeIn className="mt-12">
diff --git a/src/app/hobbies-for-resume/page.tsx b/src/app/hobbies-for-resume/page.tsx
index 075fda21..08da7a6b 100644
--- a/src/app/hobbies-for-resume/page.tsx
+++ b/src/app/hobbies-for-resume/page.tsx
@@ -40,9 +40,9 @@ const CATEGORIES: Category[] = [
   {
     title: 'Leadership & Initiative',
     description: 'These hobbies show you take charge, organize others, and drive outcomes.',
-    color: 'text-blue-700',
-    bgColor: 'bg-blue-50',
-    borderColor: 'border-blue-200',
+    color: 'text-field-sky-ink',
+    bgColor: 'bg-field-sky',
+    borderColor: 'border-field-sky-ink',
     hobbies: [
       {
         name: 'Volunteering',
@@ -75,9 +75,9 @@ const CATEGORIES: Category[] = [
     title: 'Creativity & Innovation',
     description:
       'These signal original thinking, aesthetic judgment, and the ability to produce something from nothing.',
-    color: 'text-purple-700',
-    bgColor: 'bg-purple-50',
-    borderColor: 'border-purple-200',
+    color: 'text-field-lilac-ink',
+    bgColor: 'bg-field-lilac',
+    borderColor: 'border-field-lilac-ink',
     hobbies: [
       {
         name: 'Photography',
@@ -154,9 +154,9 @@ const CATEGORIES: Category[] = [
   {
     title: 'Teamwork & Collaboration',
     description: 'These show you work well with others, support teammates, and share credit.',
-    color: 'text-orange-700',
-    bgColor: 'bg-orange-50',
-    borderColor: 'border-orange-200',
+    color: 'text-field-coral-ink',
+    bgColor: 'bg-field-coral',
+    borderColor: 'border-field-coral-ink',
     hobbies: [
       {
         name: 'Basketball',
@@ -189,9 +189,9 @@ const CATEGORIES: Category[] = [
     title: 'Problem-Solving & Analysis',
     description:
       'These signal a systematic mind — the ability to break down complexity and think through problems.',
-    color: 'text-teal-700',
-    bgColor: 'bg-teal-50',
-    borderColor: 'border-teal-200',
+    color: 'text-field-green-ink',
+    bgColor: 'bg-field-green',
+    borderColor: 'border-field-green-ink',
     hobbies: [
       {
         name: 'Coding',
@@ -321,8 +321,8 @@ export default function HobbiesForResumePage() {
           className="border-primary/30 bg-primary/10 shadow-soft"
           innerClassName="rounded-xl p-5"
         >
-          <h2 className="mb-1 text-sm font-bold text-[#684e00]">How to choose what to include</h2>
-          <ul className="space-y-1.5 text-sm text-[#514630]">
+          <h2 className="mb-1 text-sm font-bold text-brand">How to choose what to include</h2>
+          <ul className="space-y-1.5 text-sm text-muted-foreground">
             <li>
               Include hobbies where you&apos;ve reached a notable level — a rank, a project, a
               milestone
diff --git a/src/app/hobbies-to-try/page.tsx b/src/app/hobbies-to-try/page.tsx
index 35c0d3ea..8c13fc90 100644
--- a/src/app/hobbies-to-try/page.tsx
+++ b/src/app/hobbies-to-try/page.tsx
@@ -261,21 +261,21 @@ const SECTIONS: Section[] = [
     label: 'This Weekend',
     subtitle: '10 low-barrier hobbies to explore in a few hours',
     hobbies: THIS_WEEKEND,
-    badgeColor: 'bg-blue-100 text-blue-800 border-blue-200',
+    badgeColor: 'bg-field-sky text-field-sky-ink border-field-sky-ink',
   },
   {
     id: 'this-month',
     label: 'This Month',
     subtitle: '10 hobbies worth a 30-day honest attempt',
     hobbies: THIS_MONTH,
-    badgeColor: 'bg-purple-100 text-purple-800 border-purple-200',
+    badgeColor: 'bg-field-lilac text-field-lilac-ink border-field-lilac-ink',
   },
   {
     id: 'this-year',
     label: 'This Year',
     subtitle: '10 deep-dive hobbies for people ready to commit',
     hobbies: THIS_YEAR,
-    badgeColor: 'bg-[#fff4c2] text-[#684e00] border-[#c6a935]',
+    badgeColor: 'bg-field-sun text-brand border-brand',
   },
 ];
 
diff --git a/src/app/hobbies/[hobby]/page.tsx b/src/app/hobbies/[hobby]/page.tsx
index 8db6d1ff..f7df2d2c 100644
--- a/src/app/hobbies/[hobby]/page.tsx
+++ b/src/app/hobbies/[hobby]/page.tsx
@@ -37,16 +37,16 @@ export const revalidate = 3600; // 1 hour ISR
 export const dynamicParams = false;
 
 const CATEGORY_COLORS: Record<string, string> = {
-  Creative: 'bg-[#c5abfa]',
-  Music: 'bg-[#f2a4bc]',
-  Physical: 'bg-[#b5d98f]',
-  Intellectual: 'bg-[#b9dcf5]',
-  Gaming: 'bg-[#ff9d7d]',
-  Outdoor: 'bg-[#b5d98f]',
-  Culinary: 'bg-[#f7c36f]',
-  Collecting: 'bg-[#c5abfa]',
-  Making: 'bg-[#ff9d7d]',
-  Social: 'bg-[#b9dcf5]',
+  Creative: 'bg-field-lilac',
+  Music: 'bg-field-rose',
+  Physical: 'bg-field-green',
+  Intellectual: 'bg-field-sky',
+  Gaming: 'bg-field-coral',
+  Outdoor: 'bg-field-green',
+  Culinary: 'bg-field-sun',
+  Collecting: 'bg-field-lilac',
+  Making: 'bg-field-coral',
+  Social: 'bg-field-sky',
 };
 
 export async function generateStaticParams() {
@@ -117,10 +117,10 @@ export default async function HobbyDetailPage({ params }: Props) {
   const mentions = journeysForHobby(hobbyName);
 
   const categoryImage = `/categories/${category.name.toLowerCase()}-1200.webp`;
-  const categoryColor = CATEGORY_COLORS[category.name] ?? 'bg-[#f7e957]';
+  const categoryColor = CATEGORY_COLORS[category.name] ?? 'bg-field-sun';
 
   return (
-    <main className="bg-[#fbf8ef] pb-20 text-[#211e18]">
+    <main className="bg-background pb-20 text-foreground">
       <JsonLd
         data={{
           '@context': 'https://schema.org',
@@ -142,7 +142,7 @@ export default async function HobbyDetailPage({ params }: Props) {
         }}
       />
       <section className="px-4 pb-10 pt-6 sm:pb-14 sm:pt-10">
-        <div className="mx-auto max-w-6xl overflow-hidden rounded-3xl shadow-[0_22px_60px_rgba(65,55,28,0.14)]">
+        <div className="mx-auto max-w-6xl overflow-hidden rounded-3xl shadow-[0_22px_60px_color-mix(in_srgb,var(--scrim)_14%,transparent)]">
           <div className="grid min-h-[34rem] lg:grid-cols-[1.08fr_0.92fr]">
             <div className={`${categoryColor} flex flex-col justify-between p-7 sm:p-10 lg:p-14`}>
               <Link
@@ -159,7 +159,7 @@ export default async function HobbyDetailPage({ params }: Props) {
                 <h1 className="font-serif text-6xl font-medium leading-[0.88] tracking-[-0.045em] text-balance sm:text-8xl">
                   {hobbyName}
                 </h1>
-                <p className="mt-6 max-w-xl text-lg leading-relaxed text-[#39352d]">
+                <p className="mt-6 max-w-xl text-lg leading-relaxed text-muted-foreground">
                   You do not need a five-year plan. You need one honest beginning and enough
                   curiosity to return tomorrow.
                 </p>
@@ -168,11 +168,11 @@ export default async function HobbyDetailPage({ params }: Props) {
               <div className="flex flex-wrap items-center gap-3">
                 <Link
                   href="/timeline/new"
-                  className="inline-flex min-h-12 items-center gap-2 rounded-xl bg-[#211e18] px-6 font-bold text-white transition-transform hover:-translate-y-0.5"
+                  className="inline-flex min-h-12 items-center gap-2 rounded-xl bg-primary px-6 font-bold text-primary-foreground transition-transform hover:-translate-y-0.5"
                 >
                   Begin this hobby <ArrowRight className="size-4" />
                 </Link>
-                <span className="inline-flex min-h-12 items-center gap-2 rounded-xl bg-white/55 px-4 text-sm font-semibold">
+                <span className="inline-flex min-h-12 items-center gap-2 rounded-xl bg-card/55 px-4 text-sm font-semibold">
                   <Users className="size-4" />
                   {popularityCount === 0
                     ? 'Be the first public story'
@@ -190,8 +190,8 @@ export default async function HobbyDetailPage({ params }: Props) {
                 sizes="(min-width: 1024px) 46vw, 100vw"
                 className="object-cover"
               />
-              <div className="absolute inset-0 bg-gradient-to-t from-[#211e18]/35 via-transparent to-transparent" />
-              <p className="absolute bottom-7 left-7 right-7 max-w-md font-serif text-2xl leading-tight text-white drop-shadow-sm sm:bottom-10 sm:left-10">
+              <div className="absolute inset-0 bg-gradient-to-t from-scrim/35 via-transparent to-transparent" />
+              <p className="absolute bottom-7 left-7 right-7 max-w-md font-serif text-2xl leading-tight text-foreground drop-shadow-sm sm:bottom-10 sm:left-10">
                 Start small enough that beginning feels almost obvious.
               </p>
             </div>
@@ -201,7 +201,7 @@ export default async function HobbyDetailPage({ params }: Props) {
 
       <div className="mx-auto max-w-5xl px-4">
         {!isLoggedIn && (
-          <div className="mb-8 flex flex-col justify-between gap-4 rounded-2xl bg-[#f7e957] px-6 py-5 sm:flex-row sm:items-center">
+          <div className="mb-8 flex flex-col justify-between gap-4 rounded-2xl bg-field-sun px-6 py-5 sm:flex-row sm:items-center">
             <p className="font-serif text-xl">
               Keep your {hobbyName.toLowerCase()} story private on this device.
             </p>
@@ -229,7 +229,7 @@ export default async function HobbyDetailPage({ params }: Props) {
                   href={r.url}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className={`group flex items-center gap-4 rounded-2xl border border-[#d8d0bd] bg-white transition-all hover:-translate-y-0.5 hover:shadow-md ${
+                  className={`group flex items-center gap-4 rounded-2xl border border-border bg-card transition-all hover:-translate-y-0.5 hover:shadow-md ${
                     i === 0 ? 'p-5' : 'px-5 py-3'
                   }`}
                 >
@@ -305,7 +305,7 @@ export default async function HobbyDetailPage({ params }: Props) {
             <div className="space-y-3">
               {relatedPosts.map((post) => (
                 <Link key={post.slug} href={`/blog/${post.slug}`} prefetch={false}>
-                  <div className="group rounded-2xl bg-[#b9dcf5] p-5 transition-transform hover:-translate-y-0.5">
+                  <div className="group rounded-2xl bg-field-sky p-5 transition-transform hover:-translate-y-0.5">
                     <h3 className="font-medium text-foreground group-hover:text-foreground transition-colors">
                       {post.title}
                     </h3>
@@ -338,7 +338,7 @@ export default async function HobbyDetailPage({ params }: Props) {
                     })}
                     prefetch={false}
                   >
-                    <div className="group rounded-2xl border border-[#d8d0bd] bg-white p-5 transition-transform hover:-translate-y-0.5">
+                    <div className="group rounded-2xl border border-border bg-card p-5 transition-transform hover:-translate-y-0.5">
                       <h3 className="font-medium text-foreground group-hover:text-foreground transition-colors">
                         {t.title ?? 'Hobby Timeline'}
                       </h3>
@@ -356,8 +356,8 @@ export default async function HobbyDetailPage({ params }: Props) {
               })}
             </div>
           ) : (
-            <div className="rounded-2xl bg-[#f2a4bc] p-8 text-center">
-              <p className="text-[#49333a]">No public timelines feature {hobbyName} yet.</p>
+            <div className="rounded-2xl bg-field-rose p-8 text-center">
+              <p className="text-muted-foreground">No public timelines feature {hobbyName} yet.</p>
               <Link href="/timeline/new">
                 <button className="mt-3 text-sm text-foreground hover:text-foreground">
                   Be the first →
@@ -411,18 +411,20 @@ export default async function HobbyDetailPage({ params }: Props) {
                     className="block h-full"
                     prefetch={false}
                   >
-                    <div className="h-full rounded-2xl bg-[#c5abfa] p-5 transition-transform hover:-translate-y-0.5">
+                    <div className="h-full rounded-2xl bg-field-lilac p-5 transition-transform hover:-translate-y-0.5">
                       <div className="mb-1">
                         <span className="font-semibold text-foreground text-sm group-hover:text-foreground transition-colors">
                           {affinity.name}
                         </span>
                         {affinityCategory && (
-                          <span className="ml-2 text-xs text-[#3f3747]">
+                          <span className="ml-2 text-xs text-muted-foreground">
                             {affinityCategory.name}
                           </span>
                         )}
                       </div>
-                      <p className="text-xs leading-relaxed text-[#3f3747]">{affinity.reason}</p>
+                      <p className="text-xs leading-relaxed text-muted-foreground">
+                        {affinity.reason}
+                      </p>
                     </div>
                   </Link>
                 );
diff --git a/src/app/hobbies/category/[category]/page.tsx b/src/app/hobbies/category/[category]/page.tsx
index 0e11b8f0..07412317 100644
--- a/src/app/hobbies/category/[category]/page.tsx
+++ b/src/app/hobbies/category/[category]/page.tsx
@@ -148,11 +148,15 @@ export default async function CategoryPage({ params }: Props) {
         ) : (
           <div className="absolute inset-0 bg-card" />
         )}
-        <GridBackground variant="lines" size={28} color="oklch(0.97 0.003 285 / 0.10)" />
+        <GridBackground
+          variant="lines"
+          size={28}
+          color="color-mix(in srgb, var(--foreground) 10%, transparent)"
+        />
         <div className="absolute inset-0 bg-gradient-to-t from-background/85 via-background/30 to-transparent" />
         <FadeIn className="absolute bottom-0 left-0 right-0 p-5 sm:p-6" y={16}>
           <h1 className="text-2xl sm:text-3xl font-semibold text-foreground">{cat.name}</h1>
-          <p className="mt-1 text-sm text-foreground/70">{cat.hobbies.length} hobbies</p>
+          <p className="mt-1 text-sm text-muted-foreground">{cat.hobbies.length} hobbies</p>
         </FadeIn>
       </div>
 
diff --git a/src/app/hobbies/page.tsx b/src/app/hobbies/page.tsx
index 8fd271d9..9039a706 100644
--- a/src/app/hobbies/page.tsx
+++ b/src/app/hobbies/page.tsx
@@ -48,7 +48,7 @@ export default function HobbiesPage() {
         {/* Soft gold glow at top */}
         <div
           className="pointer-events-none absolute -top-24 left-1/2 h-48 w-[36rem] -translate-x-1/2 rounded-full opacity-20 blur-3xl"
-          style={{ background: 'oklch(0.82 0.13 88 / 0.5)' }}
+          style={{ background: 'color-mix(in srgb, var(--brand) 50%, transparent)' }}
           aria-hidden="true"
         />
         <FadeIn className="relative px-6 pt-16 pb-12 text-center sm:px-10">
@@ -185,7 +185,7 @@ export default function HobbiesPage() {
         <div className="relative overflow-hidden rounded-2xl border border-border bg-gradient-to-br from-card to-background p-8 text-center shadow-soft sm:p-10">
           <div
             className="pointer-events-none absolute -right-16 -top-16 h-40 w-40 rounded-full opacity-10 blur-2xl"
-            style={{ background: 'oklch(0.82 0.13 88)' }}
+            style={{ background: 'var(--brand)' }}
             aria-hidden="true"
           />
           <h2 className="font-serif text-2xl font-semibold text-foreground sm:text-3xl">
diff --git a/src/app/how-to-make-a-bucket-list/page.tsx b/src/app/how-to-make-a-bucket-list/page.tsx
index 6c7198d9..038594dc 100644
--- a/src/app/how-to-make-a-bucket-list/page.tsx
+++ b/src/app/how-to-make-a-bucket-list/page.tsx
@@ -122,7 +122,7 @@ export default function HowToMakeABucketListPage() {
                 <div className="flex flex-wrap gap-3 justify-center sm:justify-start">
                   <Link
                     href="/"
-                    className="inline-flex items-center gap-2 rounded-full bg-[#211e18] px-6 py-3 text-sm font-semibold text-white shadow-md transition-colors hover:bg-[#39352d]"
+                    className="inline-flex items-center gap-2 rounded-full bg-primary px-6 py-3 text-sm font-semibold text-primary-foreground shadow-md transition-colors hover:bg-primary/90"
                   >
                     Start my bucket list
                   </Link>
@@ -171,7 +171,7 @@ export default function HowToMakeABucketListPage() {
                     className="border border-lumi-200 bg-primary/10 shadow-soft"
                     innerClassName="px-5 py-4"
                   >
-                    <p className="text-sm font-semibold text-[#684e00]">Whale tip: {step.tip}</p>
+                    <p className="text-sm font-semibold text-brand">Whale tip: {step.tip}</p>
                     {step.link && (
                       <Link
                         href={step.link.href}
@@ -225,7 +225,7 @@ export default function HowToMakeABucketListPage() {
               <div className="flex flex-wrap gap-3 justify-center">
                 <Link
                   href="/"
-                  className="inline-flex items-center gap-2 rounded-full bg-[#211e18] px-6 py-3 text-sm font-semibold text-white shadow-md transition-colors hover:bg-[#39352d]"
+                  className="inline-flex items-center gap-2 rounded-full bg-primary px-6 py-3 text-sm font-semibold text-primary-foreground shadow-md transition-colors hover:bg-primary/90"
                 >
                   Start my bucket list
                 </Link>
diff --git a/src/app/journeys/[slug]/page.tsx b/src/app/journeys/[slug]/page.tsx
index 15689248..2902a747 100644
--- a/src/app/journeys/[slug]/page.tsx
+++ b/src/app/journeys/[slug]/page.tsx
@@ -60,16 +60,16 @@ const PHASE_COLORS = [
     pill: 'bg-foreground/10 text-foreground',
   },
   {
-    bg: 'bg-blue-50',
-    border: 'border-blue-300',
-    label: 'text-blue-700',
-    pill: 'bg-blue-100 text-blue-800',
+    bg: 'bg-field-sky',
+    border: 'border-field-sky-ink',
+    label: 'text-field-sky-ink',
+    pill: 'bg-field-sky text-field-sky-ink',
   },
   {
-    bg: 'bg-violet-50',
-    border: 'border-violet-300',
-    label: 'text-violet-700',
-    pill: 'bg-violet-100 text-violet-800',
+    bg: 'bg-field-lilac',
+    border: 'border-field-lilac-ink',
+    label: 'text-field-lilac-ink',
+    pill: 'bg-field-lilac text-field-lilac-ink',
   },
   {
     bg: 'bg-primary/10',
@@ -78,16 +78,16 @@ const PHASE_COLORS = [
     pill: 'bg-primary/15 text-lumi-300',
   },
   {
-    bg: 'bg-rose-50',
-    border: 'border-rose-300',
-    label: 'text-rose-700',
-    pill: 'bg-rose-100 text-rose-800',
+    bg: 'bg-field-rose',
+    border: 'border-field-rose-ink',
+    label: 'text-field-rose-ink',
+    pill: 'bg-field-rose text-field-rose-ink',
   },
   {
-    bg: 'bg-teal-50',
-    border: 'border-teal-300',
-    label: 'text-teal-700',
-    pill: 'bg-teal-100 text-teal-800',
+    bg: 'bg-field-green',
+    border: 'border-field-green-ink',
+    label: 'text-field-green-ink',
+    pill: 'bg-field-green text-field-green-ink',
   },
 ];
 
diff --git a/src/app/life-bingo/page.tsx b/src/app/life-bingo/page.tsx
index fd9791f3..cfae13cb 100644
--- a/src/app/life-bingo/page.tsx
+++ b/src/app/life-bingo/page.tsx
@@ -48,13 +48,13 @@ export default function LifeBingoPage() {
   return (
     <div data-life-bingo-page className="overflow-hidden bg-background text-foreground">
       <section className="px-4 py-10 sm:py-14">
-        <div className="mx-auto grid max-w-6xl items-center gap-12 overflow-hidden rounded-[1.75rem] bg-[#c5abfa] px-6 py-10 shadow-[0_16px_44px_rgba(73,49,112,0.12)] lg:grid-cols-[0.84fr_1.16fr] lg:gap-16 lg:px-12 lg:py-14">
-          <div className="text-[#241a31]">
+        <div className="mx-auto grid max-w-6xl items-center gap-12 overflow-hidden rounded-2xl bg-field-lilac px-6 py-10 shadow-[0_16px_44px_color-mix(in_srgb,var(--scrim)_12%,transparent)] lg:grid-cols-[0.84fr_1.16fr] lg:gap-16 lg:px-12 lg:py-14">
+          <div className="text-foreground">
             <p className="mb-5 text-base font-bold">A bucket list you can play</p>
             <h1 className="max-w-2xl font-serif text-5xl font-medium leading-[0.94] tracking-[-0.035em] sm:text-6xl lg:text-7xl">
               Make life less repetitive.
             </h1>
-            <p className="mt-6 max-w-xl text-base leading-relaxed text-[#4b3861] sm:text-xl">
+            <p className="mt-6 max-w-xl text-base leading-relaxed text-field-lilac-ink sm:text-xl">
               Turn the things you keep saying “someday” about into a board of real experiences. Then
               go live them.
             </p>
@@ -64,7 +64,7 @@ export default function LifeBingoPage() {
                   Make my Life Bingo <ArrowRight className="h-4 w-4" />
                 </Link>
               </Button>
-              <span className="flex min-h-11 items-center gap-2 px-2 text-sm text-[#4b3861]">
+              <span className="flex min-h-11 items-center gap-2 px-2 text-sm text-field-lilac-ink">
                 <Check className="h-4 w-4 text-growth" /> No account needed
               </span>
             </div>
@@ -76,7 +76,7 @@ export default function LifeBingoPage() {
         </div>
       </section>
 
-      <section className="mt-10 bg-[#fffdf3] px-4 py-20 sm:py-28">
+      <section className="mt-10 bg-card px-4 py-20 sm:py-28">
         <div className="mx-auto grid max-w-6xl gap-12 lg:grid-cols-[0.72fr_1.28fr] lg:gap-24">
           <div>
             <p className="text-sm font-semibold text-primary">Not another goal tracker.</p>
@@ -96,10 +96,10 @@ export default function LifeBingoPage() {
         </div>
       </section>
 
-      <section className="bg-[#b9dcf5] px-4 py-20 sm:py-28">
+      <section className="bg-field-sky px-4 py-20 sm:py-28">
         <div className="mx-auto grid max-w-5xl items-end gap-10 border-y border-border py-12 md:grid-cols-[1fr_auto] sm:py-16">
           <div>
-            <p className="text-sm font-semibold text-[#493000]">One list. Two ways to use it.</p>
+            <p className="text-sm font-semibold text-foreground">One list. Two ways to use it.</p>
             <h2 className="mt-4 max-w-3xl font-serif text-4xl font-semibold leading-[1.02] tracking-[-0.03em] sm:text-5xl">
               Plan it as a list. Live it as Bingo.
             </h2>
diff --git a/src/app/life-in-weeks/life-in-weeks-client.tsx b/src/app/life-in-weeks/life-in-weeks-client.tsx
index 002aadfd..85e448cd 100644
--- a/src/app/life-in-weeks/life-in-weeks-client.tsx
+++ b/src/app/life-in-weeks/life-in-weeks-client.tsx
@@ -121,7 +121,7 @@ export function LifeInWeeksClient({
       >
         Your life, in weeks.
       </h1>
-      <p className="mt-5 max-w-[62ch] text-lg text-foreground/80" style={{ lineHeight: 1.6 }}>
+      <p className="mt-5 max-w-[62ch] text-lg text-muted-foreground" style={{ lineHeight: 1.6 }}>
         One square for every week you have lived, and every week people your age tend to have left.
         Your exact date makes the lived weeks precise. The estimate ahead is population context, not
         a prediction.
diff --git a/src/app/life-in-weeks/weeks-grid.tsx b/src/app/life-in-weeks/weeks-grid.tsx
index 91ef270f..b2117997 100644
--- a/src/app/life-in-weeks/weeks-grid.tsx
+++ b/src/app/life-in-weeks/weeks-grid.tsx
@@ -8,13 +8,11 @@ const COLUMNS = 52;
  * Must be **opaque**: this layer sits above the lit one, so any transparency
  * lets gold bleed through and the two states merge into one.
  *
- * No token fits. `--muted` (L 0.23) and `--border` (L 0.27) both sit too close
- * to the L 0.15 page — at that contrast the weeks already lived read as empty
- * space rather than as decades of a life. L 0.34 gives them mass while staying
- * far below the L 0.82 gold, so the remainder still leads. The app has no
- * light theme, so a fixed value is safe here.
+ * The opaque --week-spent token gives lived weeks mass above the night canvas,
+ * while remaining much quieter than atlas gold. It must not blend with gold
+ * underneath, or the two states would merge.
  */
-const SPENT = 'oklch(0.34 0.005 285)';
+const SPENT = 'var(--week-spent)';
 
 type Props = {
   weeksLived: number;
diff --git a/src/app/live-more/page.tsx b/src/app/live-more/page.tsx
index 3367f83f..d0147141 100644
--- a/src/app/live-more/page.tsx
+++ b/src/app/live-more/page.tsx
@@ -35,7 +35,7 @@ export default async function LiveMorePage() {
   });
   const active = items.filter((item) => item.status !== 'done');
   return (
-    <div className="bg-[#fbf8ef] px-4 py-8 text-[#211e18] sm:py-12">
+    <div className="bg-background px-4 py-8 text-foreground sm:py-12">
       <div className="mx-auto max-w-6xl space-y-10 sm:space-y-14">
         <DreamAtlasExplorer
           entries={atlasEntries}
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 0b7384b8..51f06a08 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -25,10 +25,10 @@ export default async function LoginPage({
   const guestRoute = guestRouteFor(callbackUrl);
 
   return (
-    <div className="relative flex min-h-[80vh] items-center justify-center overflow-hidden bg-[#f7e957] px-4 py-12">
+    <div className="relative flex min-h-[80vh] items-center justify-center overflow-hidden bg-field-sun px-4 py-12">
       <FadeIn className="relative w-full max-w-md">
         <SpotlightCard
-          className="border-0 shadow-[0_18px_50px_rgba(66,55,22,0.14)]"
+          className="border-0 shadow-[0_18px_50px_color-mix(in_srgb,var(--scrim)_14%,transparent)]"
           innerClassName="p-7 sm:p-9"
         >
           <div className="mb-8">
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index c35d83c0..2ac977f5 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -8,27 +8,27 @@ const nextPaths = [
     href: '/find-your-hobby',
     title: 'Find a hobby',
     copy: 'Answer a few questions and leave with a real place to begin.',
-    color: 'bg-[#b9dcf5]',
+    color: 'bg-field-sky',
     icon: Compass,
   },
   {
     href: '/experiences',
     title: 'See what is possible',
     copy: 'Browse small experiments, adventures, skills, and stories worth living.',
-    color: 'bg-[#c5abfa]',
+    color: 'bg-field-lilac',
     icon: Sparkles,
   },
 ] as const;
 
 export default function NotFound() {
   return (
-    <main className="bg-[#fbf8ef] px-4 py-8 text-[#211e18] sm:py-12">
+    <main className="bg-background px-4 py-8 text-foreground sm:py-12">
       <div className="mx-auto max-w-6xl">
-        <section className="overflow-hidden rounded-2xl bg-[#f7e957] shadow-[0_18px_45px_rgba(80,67,23,0.12)]">
+        <section className="overflow-hidden rounded-2xl bg-field-sun shadow-[0_18px_45px_color-mix(in_srgb,var(--scrim)_12%,transparent)]">
           <div className="grid min-h-[28rem] lg:grid-cols-[1.35fr_0.65fr]">
             <div className="flex flex-col justify-between p-7 sm:p-10 lg:p-14">
               <div className="flex items-center gap-3 text-sm font-bold">
-                <span className="flex size-10 items-center justify-center rounded-full bg-[#211e18] text-white">
+                <span className="flex size-10 items-center justify-center rounded-full bg-primary text-primary-foreground">
                   404
                 </span>
                 Edge of the atlas
@@ -37,25 +37,25 @@ export default function NotFound() {
                 <h1 className="font-serif text-5xl font-medium leading-[0.96] tracking-[-0.03em] text-balance sm:text-7xl">
                   This path ends here. Your day does not.
                 </h1>
-                <p className="mt-6 max-w-xl text-lg leading-relaxed text-[#514a28]">
+                <p className="mt-6 max-w-xl text-lg leading-relaxed text-muted-foreground">
                   The page may have moved, stayed private, or never existed. Pick another direction
                   and keep going.
                 </p>
               </div>
               <Link
                 href="/"
-                className="inline-flex min-h-12 w-fit items-center gap-2 rounded-xl bg-[#211e18] px-6 font-bold text-white transition-transform hover:-translate-y-0.5 hover:bg-[#37332b]"
+                className="inline-flex min-h-12 w-fit items-center gap-2 rounded-xl bg-primary px-6 font-bold text-primary-foreground transition-transform hover:-translate-y-0.5 hover:bg-primary/90"
               >
                 Return home <ArrowRight className="size-4" />
               </Link>
             </div>
 
-            <div className="relative min-h-72 overflow-hidden bg-[#ff9d7d] p-8 sm:p-10">
+            <div className="relative min-h-72 overflow-hidden bg-field-coral p-8 sm:p-10">
               <Map className="size-8" />
               <div className="absolute inset-x-10 bottom-12 top-24" aria-hidden="true">
-                <div className="absolute left-[8%] top-[12%] size-5 rounded-full bg-[#211e18]" />
-                <div className="absolute bottom-[16%] right-[8%] size-8 rounded-full border-[6px] border-[#211e18] bg-[#f7e957]" />
-                <div className="absolute left-[10%] top-[17%] h-[58%] w-[76%] rotate-6 rounded-[50%] border-b-4 border-dashed border-[#211e18]/70" />
+                <div className="absolute left-[8%] top-[12%] size-5 rounded-full bg-surface" />
+                <div className="absolute bottom-[16%] right-[8%] size-8 rounded-full border-[6px] border-border bg-field-sun" />
+                <div className="absolute left-[10%] top-[17%] h-[58%] w-[76%] rotate-6 rounded-[50%] border-b-4 border-dashed border-border/70" />
               </div>
               <p className="absolute bottom-8 left-8 right-8 font-serif text-2xl leading-tight sm:left-10 sm:right-10">
                 A wrong turn is still information.
@@ -73,12 +73,12 @@ export default function NotFound() {
               <Link
                 key={href}
                 href={href}
-                className={`${color} group flex min-h-44 flex-col justify-between rounded-2xl p-6 text-[#211e18] transition-transform hover:-translate-y-1 sm:p-7`}
+                className={`${color} group flex min-h-44 flex-col justify-between rounded-2xl p-6 text-foreground transition-transform hover:-translate-y-1 sm:p-7`}
               >
                 <Icon className="size-6" />
                 <div className="mt-8">
                   <h3 className="font-serif text-3xl font-medium">{title}</h3>
-                  <p className="mt-2 max-w-md leading-relaxed text-[#4b493d]">{copy}</p>
+                  <p className="mt-2 max-w-md leading-relaxed text-muted-foreground">{copy}</p>
                   <span className="mt-4 inline-flex items-center gap-2 font-bold">
                     Go there{' '}
                     <ArrowRight className="size-4 transition-transform group-hover:translate-x-1" />
diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx
index 94f915d8..e157cb5e 100644
--- a/src/app/settings/page.tsx
+++ b/src/app/settings/page.tsx
@@ -44,7 +44,7 @@ export default async function SettingsPage() {
         </Link>
       )}
 
-      <header className="mb-8 rounded-[1.75rem] bg-[#c5abfa] px-6 py-10 text-[#241a31] shadow-[0_14px_40px_rgba(73,49,112,0.10)] sm:px-10">
+      <header className="mb-8 rounded-2xl bg-field-lilac px-6 py-10 text-foreground shadow-[0_14px_40px_color-mix(in_srgb,var(--scrim)_10%,transparent)] sm:px-10">
         <p className="text-base font-bold">Your corner of the atlas</p>
         <h1 className="mt-4 font-serif text-5xl font-medium leading-none tracking-[-0.03em] sm:text-6xl">
           Settings
diff --git a/src/app/side-quests/side-quests-client.tsx b/src/app/side-quests/side-quests-client.tsx
index a73a6bdd..51f74005 100644
--- a/src/app/side-quests/side-quests-client.tsx
+++ b/src/app/side-quests/side-quests-client.tsx
@@ -31,9 +31,9 @@ const CATEGORY_COLORS: Record<QuestCategory, { border: string; bg: string; text:
     text: 'text-foreground',
   },
   creative: {
-    border: 'border-purple-200',
-    bg: 'bg-purple-50',
-    text: 'text-purple-700',
+    border: 'border-field-lilac-ink',
+    bg: 'bg-field-lilac',
+    text: 'text-field-lilac-ink',
   },
   culinary: {
     border: 'border-primary/30',
@@ -41,19 +41,19 @@ const CATEGORY_COLORS: Record<QuestCategory, { border: string; bg: string; text:
     text: 'text-foreground',
   },
   social: {
-    border: 'border-blue-200',
-    bg: 'bg-blue-50',
-    text: 'text-blue-700',
+    border: 'border-field-sky-ink',
+    bg: 'bg-field-sky',
+    text: 'text-field-sky-ink',
   },
   exploration: {
-    border: 'border-teal-200',
-    bg: 'bg-teal-50',
-    text: 'text-teal-700',
+    border: 'border-field-green-ink',
+    bg: 'bg-field-green',
+    text: 'text-field-green-ink',
   },
   mindful: {
-    border: 'border-violet-200',
-    bg: 'bg-violet-50',
-    text: 'text-violet-700',
+    border: 'border-field-lilac-ink',
+    bg: 'bg-field-lilac',
+    text: 'text-field-lilac-ink',
   },
 };
 
@@ -124,11 +124,11 @@ function QuestCard({
 
   return (
     <SpotlightCard
-      className="mx-auto w-full max-w-4xl overflow-hidden border-0 shadow-[0_18px_50px_rgba(53,80,40,0.12)]"
+      className="mx-auto w-full max-w-4xl overflow-hidden border-0 shadow-[0_18px_50px_color-mix(in_srgb,var(--scrim)_12%,transparent)]"
       innerClassName="p-0"
     >
       <div className="grid md:grid-cols-[0.72fr_1.28fr]">
-        <div className="flex min-h-56 flex-col justify-between bg-[#a8dc91] p-7 text-[#192817] sm:p-9">
+        <div className="flex min-h-56 flex-col justify-between bg-field-green p-7 text-foreground sm:p-9">
           <div className="flex items-center justify-between">
             <span className="font-semibold">A small departure</span>
             <span className="text-5xl" aria-hidden="true">
@@ -164,7 +164,7 @@ function QuestCard({
               {quest.relatedHobbies.map((hobby) => (
                 <span
                   key={hobby}
-                  className="rounded-full bg-[#f1eee5] px-2.5 py-1 text-xs text-muted-foreground"
+                  className="rounded-full bg-muted px-2.5 py-1 text-xs text-muted-foreground"
                 >
                   {hobby}
                 </span>
@@ -456,9 +456,9 @@ function SideQuestsInner() {
     <div className="min-h-screen bg-background">
       {/* Hero */}
       <section className="relative overflow-hidden px-4 py-10 sm:py-14">
-        <FadeIn className="relative mx-auto max-w-6xl rounded-[1.75rem] bg-[#a8dc91] px-6 py-12 text-center text-[#192817] shadow-[0_16px_44px_rgba(53,80,40,0.10)] sm:px-10 sm:py-16">
+        <FadeIn className="relative mx-auto max-w-6xl rounded-2xl bg-field-green px-6 py-12 text-center text-foreground shadow-[0_16px_44px_color-mix(in_srgb,var(--scrim)_10%,transparent)] sm:px-10 sm:py-16">
           <div className="mb-5 inline-flex items-center gap-2 text-base font-bold">
-            <span className="h-2 w-2 rounded-full bg-[#192817]" />
+            <span className="h-2 w-2 rounded-full bg-surface" />
             Side Quests
           </div>
 
@@ -466,7 +466,7 @@ function SideQuestsInner() {
             Take the scenic route through your week.
           </h1>
 
-          <p className="mx-auto max-w-xl text-lg leading-relaxed text-[#344b31] sm:text-xl">
+          <p className="mx-auto max-w-xl text-lg leading-relaxed text-muted-foreground sm:text-xl">
             Fifty small reasons to leave the usual path. Roll one, choose one, or take on the whole
             board.
           </p>
@@ -475,7 +475,7 @@ function SideQuestsInner() {
             {[...Array(5)].map((_, i) => (
               <div
                 key={i}
-                className="h-1.5 w-1.5 rounded-full bg-[#192817]"
+                className="h-1.5 w-1.5 rounded-full bg-surface"
                 style={{ opacity: 0.4 + i * 0.12 }}
               />
             ))}
@@ -485,7 +485,7 @@ function SideQuestsInner() {
 
       {/* Tab bar */}
       <section className="px-4 pt-2">
-        <div className="mx-auto flex max-w-2xl items-center justify-center gap-1 overflow-x-auto rounded-2xl bg-white p-1 shadow-[0_5px_18px_rgba(66,55,22,0.08)]">
+        <div className="mx-auto flex max-w-2xl items-center justify-center gap-1 overflow-x-auto rounded-2xl bg-card p-1 shadow-[0_5px_18px_color-mix(in_srgb,var(--scrim)_8%,transparent)]">
           {TABS.map((tab) => (
             <button
               key={tab.id}
@@ -493,7 +493,7 @@ function SideQuestsInner() {
               onClick={() => setActiveTab(tab.id)}
               className={`relative min-h-12 shrink-0 rounded-xl px-5 text-base font-semibold transition-all ${
                 activeTab === tab.id
-                  ? 'bg-[#a8dc91] text-[#192817]'
+                  ? 'bg-field-green text-foreground'
                   : 'text-muted-foreground hover:text-foreground'
               }`}
             >
@@ -533,10 +533,10 @@ function SideQuestsInner() {
           {activeTab === 'pick' && (
             <div>
               {sourcePossibility ? (
-                <div className="mx-auto mb-5 max-w-lg rounded-2xl bg-[#f7e957] p-5 text-[#211e18]">
+                <div className="mx-auto mb-5 max-w-lg rounded-2xl bg-field-sun p-5 text-foreground">
                   <p className="text-sm font-bold">Make this possibility smaller</p>
                   <p className="mt-1 font-serif text-2xl leading-tight">{sourcePossibility}</p>
-                  <p className="mt-2 text-sm leading-relaxed text-[#575344]">
+                  <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
                     Pick the time and energy you actually have. We will suggest one nearby move, not
                     ask you to finish the whole dream today.
                   </p>
@@ -587,14 +587,16 @@ function SideQuestsInner() {
                     rollLabel="Try Another"
                   />
                 ) : (
-                  <div className="w-full max-w-2xl rounded-2xl bg-[#b9dcf5] p-6 text-[#211e18] sm:p-8">
+                  <div className="w-full max-w-2xl rounded-2xl bg-field-sky p-6 text-foreground sm:p-8">
                     {sourcePossibility ? (
                       <>
-                        <p className="text-sm font-bold text-[#175475]">No honest shortcut yet</p>
+                        <p className="text-sm font-bold text-field-sky-ink">
+                          No honest shortcut yet
+                        </p>
                         <h2 className="mt-2 font-serif text-3xl leading-tight">
                           We will not hand you an unrelated task.
                         </h2>
-                        <p className="mt-3 max-w-xl text-sm leading-relaxed text-[#415968]">
+                        <p className="mt-3 max-w-xl text-sm leading-relaxed text-muted-foreground">
                           Live does not have a small quest that genuinely continues “
                           {sourcePossibility}” yet. Keep the dream intact and research a real first
                           doorway instead.
diff --git a/src/app/starter-kits/page.tsx b/src/app/starter-kits/page.tsx
index 049cfdbc..1f985cf1 100644
--- a/src/app/starter-kits/page.tsx
+++ b/src/app/starter-kits/page.tsx
@@ -21,9 +21,9 @@ export const metadata: Metadata = {
 
 const CATEGORY_STYLES: Record<string, string> = {
   Creative: 'border-foreground/30 bg-foreground/10 text-foreground',
-  Outdoor: 'border-teal-300 bg-teal-50 text-teal-800',
-  Physical: 'border-blue-300 bg-blue-50 text-blue-800',
-  Intellectual: 'border-purple-300 bg-purple-50 text-purple-800',
+  Outdoor: 'border-field-green-ink bg-field-green text-field-green-ink',
+  Physical: 'border-field-sky-ink bg-field-sky text-field-sky-ink',
+  Intellectual: 'border-field-lilac-ink bg-field-lilac text-field-lilac-ink',
   Culinary: 'border-primary/40 bg-primary/10 text-lumi-300',
 };
 
diff --git a/src/app/timeline/new/page.tsx b/src/app/timeline/new/page.tsx
index 16b341ea..090fbfb1 100644
--- a/src/app/timeline/new/page.tsx
+++ b/src/app/timeline/new/page.tsx
@@ -50,7 +50,7 @@ export default async function NewTimelinePage({ searchParams }: Props) {
           offers: { '@type': 'Offer', price: '0' },
         }}
       />
-      <div className="relative mb-8 rounded-[1.75rem] bg-[#b9dcf5] px-6 py-9 text-[#192a36] shadow-[0_14px_40px_rgba(39,74,97,0.10)] sm:px-9">
+      <div className="relative mb-8 rounded-2xl bg-field-sky px-6 py-9 text-foreground shadow-[0_14px_40px_color-mix(in_srgb,var(--scrim)_10%,transparent)] sm:px-9">
         <div className="relative max-w-2xl">
           <Link
             href="/"
@@ -61,7 +61,7 @@ export default async function NewTimelinePage({ searchParams }: Props) {
           <h1 className="font-serif text-5xl font-medium leading-[1.02] tracking-[-0.03em]">
             Build your hobby timeline
           </h1>
-          <p className="mt-4 text-base leading-relaxed text-[#405b6c]">
+          <p className="mt-4 text-base leading-relaxed text-muted-foreground">
             {starter
               ? `We started with ${starter.hobbyName}. Shape it into a story that feels true.`
               : 'Add life phases and the hobbies that defined each one.'}
diff --git a/src/app/tools/time-calculator/time-calculator-client.tsx b/src/app/tools/time-calculator/time-calculator-client.tsx
index fe9a24cd..df4dd80b 100644
--- a/src/app/tools/time-calculator/time-calculator-client.tsx
+++ b/src/app/tools/time-calculator/time-calculator-client.tsx
@@ -38,7 +38,7 @@ const INPUTS: SliderInput[] = [
     min: 0,
     max: 80,
     default: 40,
-    color: '#3B82F6',
+    color: 'var(--field-sky-ink)',
   },
   {
     id: 'commute',
@@ -47,7 +47,7 @@ const INPUTS: SliderInput[] = [
     min: 0,
     max: 20,
     default: 5,
-    color: '#6366F1',
+    color: 'var(--field-lilac-ink)',
   },
   {
     id: 'sleep',
@@ -56,7 +56,7 @@ const INPUTS: SliderInput[] = [
     min: 28,
     max: 70,
     default: 56,
-    color: '#8B5CF6',
+    color: 'var(--field-lilac-ink)',
   },
   {
     id: 'eating',
@@ -65,7 +65,7 @@ const INPUTS: SliderInput[] = [
     min: 0,
     max: 20,
     default: 10,
-    color: '#F59E0B',
+    color: 'var(--brand)',
   },
   {
     id: 'chores',
@@ -74,7 +74,7 @@ const INPUTS: SliderInput[] = [
     min: 0,
     max: 20,
     default: 5,
-    color: '#78716C',
+    color: 'var(--muted-foreground)',
   },
   {
     id: 'family',
@@ -83,7 +83,7 @@ const INPUTS: SliderInput[] = [
     min: 0,
     max: 30,
     default: 10,
-    color: '#EC4899',
+    color: 'var(--field-rose-ink)',
   },
   {
     id: 'exercise',
@@ -92,7 +92,7 @@ const INPUTS: SliderInput[] = [
     min: 0,
     max: 15,
     default: 3,
-    color: '#10B981',
+    color: 'var(--success)',
   },
   {
     id: 'screen',
@@ -101,7 +101,7 @@ const INPUTS: SliderInput[] = [
     min: 0,
     max: 40,
     default: 15,
-    color: '#EF4444',
+    color: 'var(--destructive)',
   },
 ];
 
@@ -160,7 +160,7 @@ export function TimeCalculatorClient() {
     {
       id: 'free',
       label: 'Free time',
-      color: 'oklch(0.72 0.13 150)',
+      color: 'var(--success)',
       hours: freeTime,
       pct: (freeTime / TOTAL_HOURS) * 100,
     },
@@ -344,15 +344,15 @@ export function TimeCalculatorClient() {
                 </div>
               )}
 
-              <div className="rounded-2xl border border-blue-200 bg-blue-50 p-6 shadow-sm">
+              <div className="rounded-2xl border border-field-sky-ink bg-field-sky p-6 shadow-sm">
                 <div className="mb-2 flex items-center gap-2">
                   <Timer className="h-4 w-4 text-primary" aria-hidden="true" />
                   <h3 className="font-bold text-foreground">The 30-minute rule</h3>
                 </div>
                 <p className="text-sm text-muted-foreground">
                   Even 30 minutes a day ={' '}
-                  <span className="font-bold text-blue-700">3.5 hours/week</span> of hobby time.
-                  Consistency beats marathon sessions every time.
+                  <span className="font-bold text-field-sky-ink">3.5 hours/week</span> of hobby
+                  time. Consistency beats marathon sessions every time.
                 </p>
               </div>
             </>
diff --git a/src/app/trajectory/page.tsx b/src/app/trajectory/page.tsx
index 1e8a1c2e..f042332d 100644
--- a/src/app/trajectory/page.tsx
+++ b/src/app/trajectory/page.tsx
@@ -56,27 +56,27 @@ function TrajectorySurface({
 
   return (
     <div className="mx-auto max-w-6xl space-y-10 px-4 py-10 sm:py-14">
-      <header className="relative overflow-hidden rounded-[1.75rem] bg-[#a8dc91] px-6 py-10 text-[#192817] shadow-[0_16px_44px_rgba(53,80,40,0.10)] sm:px-10 sm:py-12">
+      <header className="relative overflow-hidden rounded-2xl bg-field-green px-6 py-10 text-foreground shadow-[0_16px_44px_color-mix(in_srgb,var(--scrim)_10%,transparent)] sm:px-10 sm:py-12">
         <div className="relative max-w-3xl">
           <p className="text-base font-bold">A living decision system</p>
           <h1 className="mt-4 font-serif text-5xl font-medium leading-none tracking-[-0.03em] sm:text-6xl">
             Trajectory
           </h1>
-          <p className="mt-5 max-w-2xl text-base leading-relaxed text-[#344b31]">
+          <p className="mt-5 max-w-2xl text-base leading-relaxed text-muted-foreground">
             Name the reality you are in, choose a direction, decide how you will make tradeoffs,
             then learn from what happens. One active trajectory, no score. For the specific things
             you want to have done, use your{' '}
             <Link
               href="/bucket-list"
-              className="font-semibold text-[#192817] underline decoration-[#192817]/35 underline-offset-4 transition-colors hover:decoration-[#192817]"
+              className="font-semibold text-foreground underline decoration-foreground/35 underline-offset-4 transition-colors hover:decoration-foreground"
             >
               bucket list
             </Link>
             .
           </p>
           {weeksRemaining !== null && (
-            <p className="mt-5 text-base text-[#344b31]">
-              <span className="font-serif font-medium tabular-nums text-[#192817]">
+            <p className="mt-5 text-base text-muted-foreground">
+              <span className="font-serif font-medium tabular-nums text-foreground">
                 {weeksRemaining.toLocaleString()}
               </span>{' '}
               weeks left in the life grid.
diff --git a/src/app/travel-bucket-list/page.tsx b/src/app/travel-bucket-list/page.tsx
index 3333e7ba..01c90476 100644
--- a/src/app/travel-bucket-list/page.tsx
+++ b/src/app/travel-bucket-list/page.tsx
@@ -61,18 +61,18 @@ const REGION_STYLES: Record<
   { bg: string; border: string; text: string; badge: string; dot: string }
 > = {
   sky: {
-    bg: 'bg-sky-50',
-    border: 'border-sky-200',
-    text: 'text-sky-700',
-    badge: 'bg-sky-100 text-sky-700 border-sky-200',
-    dot: 'bg-sky-400',
+    bg: 'bg-field-sky',
+    border: 'border-field-sky-ink',
+    text: 'text-field-sky-ink',
+    badge: 'bg-field-sky text-field-sky-ink border-field-sky-ink',
+    dot: 'bg-field-sky-ink',
   },
   red: {
     bg: 'bg-destructive/10',
     border: 'border-destructive/30',
-    text: 'text-red-800',
-    badge: 'bg-red-100 text-red-800 border-red-300',
-    dot: 'bg-red-700',
+    text: 'text-destructive',
+    badge: 'bg-field-coral text-destructive border-destructive',
+    dot: 'bg-destructive',
   },
   emerald: {
     bg: 'bg-foreground/10',
@@ -89,11 +89,11 @@ const REGION_STYLES: Record<
     dot: 'bg-primary',
   },
   teal: {
-    bg: 'bg-teal-50',
-    border: 'border-teal-200',
-    text: 'text-teal-700',
-    badge: 'bg-teal-100 text-teal-700 border-teal-200',
-    dot: 'bg-teal-400',
+    bg: 'bg-field-green',
+    border: 'border-field-green-ink',
+    text: 'text-field-green-ink',
+    badge: 'bg-field-green text-field-green-ink border-field-green-ink',
+    dot: 'bg-field-green-ink',
   },
 };
 
@@ -159,7 +159,7 @@ export default function TravelBucketListPage() {
                 <div className="flex flex-wrap gap-3 justify-center sm:justify-start">
                   <Link
                     href="/"
-                    className="inline-flex items-center gap-2 rounded-full bg-[#211e18] px-6 py-3 text-sm font-semibold text-white shadow-md transition-colors hover:bg-[#39352d]"
+                    className="inline-flex items-center gap-2 rounded-full bg-primary px-6 py-3 text-sm font-semibold text-primary-foreground shadow-md transition-colors hover:bg-primary/90"
                   >
                     Build my travel list
                   </Link>
@@ -291,7 +291,7 @@ export default function TravelBucketListPage() {
           <div className="flex flex-wrap gap-3 justify-center">
             <Link
               href="/"
-              className="inline-flex items-center gap-2 rounded-full bg-[#211e18] px-6 py-3 text-sm font-semibold text-white shadow-md transition-colors hover:bg-[#39352d]"
+              className="inline-flex items-center gap-2 rounded-full bg-primary px-6 py-3 text-sm font-semibold text-primary-foreground shadow-md transition-colors hover:bg-primary/90"
             >
               Build my bucket list
             </Link>
diff --git a/src/app/u/[username]/page.tsx b/src/app/u/[username]/page.tsx
index 68f4c30c..6b37963c 100644
--- a/src/app/u/[username]/page.tsx
+++ b/src/app/u/[username]/page.tsx
@@ -55,16 +55,16 @@ export async function generateMetadata({ params }: Props) {
 }
 
 const CATEGORY_BADGE_COLORS: Record<string, string> = {
-  Creative: 'border-purple-400/30 bg-purple-400/10 text-purple-300',
-  Music: 'border-pink-400/30 bg-pink-400/10 text-pink-300',
-  Physical: 'border-orange-400/30 bg-orange-400/10 text-orange-300',
-  Intellectual: 'border-blue-400/30 bg-blue-400/10 text-blue-300',
-  Gaming: 'border-violet-400/30 bg-violet-400/10 text-violet-300',
+  Creative: 'border-field-lilac-ink/30 bg-field-lilac-ink/10 text-field-lilac-ink',
+  Music: 'border-field-rose-ink/30 bg-field-rose-ink/10 text-field-rose-ink',
+  Physical: 'border-field-coral-ink/30 bg-field-coral-ink/10 text-field-coral-ink',
+  Intellectual: 'border-field-sky-ink/30 bg-field-sky-ink/10 text-field-sky-ink',
+  Gaming: 'border-field-lilac-ink/30 bg-field-lilac-ink/10 text-field-lilac-ink',
   Outdoor: 'border-foreground/20 bg-foreground/10 text-foreground',
   Culinary: 'border-foreground/20 bg-foreground/10 text-foreground',
   Collecting: 'border-border bg-foreground/5 text-muted-foreground',
   Making: 'border-primary/30 bg-primary/10 text-lumi-300',
-  Social: 'border-teal-400/30 bg-teal-400/10 text-teal-300',
+  Social: 'border-field-green-ink/30 bg-field-green-ink/10 text-field-green-ink',
 };
 
 export default async function ProfilePage({ params }: Props) {
@@ -205,17 +205,17 @@ export default async function ProfilePage({ params }: Props) {
       <div className="relative">
         <div className="flex flex-col items-center text-center pt-8 pb-12">
           {/* Avatar — gold-bordered circle, the face on the plaque */}
-          <div className="rounded-full p-1 ring-1 ring-[oklch(0.82_0.13_88/0.4)] shadow-[0_0_24px_4px_oklch(0.82_0.13_88/0.12)]">
+          <div className="rounded-full p-1 ring-1 ring-brand/40 shadow-[0_0_24px_4px_color-mix(in srgb, var(--brand) 12%, transparent)]">
             {user.image ? (
               <Image
                 src={user.image}
                 alt={displayName}
                 width={96}
                 height={96}
-                className="rounded-full border-2 border-[oklch(0.82_0.13_88/0.5)]"
+                className="rounded-full border-2 border-brand/50"
               />
             ) : (
-              <div className="h-[96px] w-[96px] rounded-full border-2 border-[oklch(0.82_0.13_88/0.5)] bg-foreground/5 flex items-center justify-center text-3xl font-serif font-semibold text-muted-foreground">
+              <div className="h-[96px] w-[96px] rounded-full border-2 border-brand/50 bg-foreground/5 flex items-center justify-center text-3xl font-serif font-semibold text-muted-foreground">
                 {displayName.charAt(0).toUpperCase()}
               </div>
             )}
@@ -228,14 +228,14 @@ export default async function ProfilePage({ params }: Props) {
                 <p className="font-serif text-2xl sm:text-3xl italic leading-relaxed text-foreground">
                   &ldquo;{user.creed}&rdquo;
                 </p>
-                <div className="mx-auto mt-6 h-px w-16 bg-[oklch(0.82_0.13_88/0.4)]" />
+                <div className="mx-auto mt-6 h-px w-16 bg-brand/40" />
               </>
             ) : user.bio ? (
               <>
                 <p className="font-serif text-2xl sm:text-3xl italic leading-relaxed text-foreground">
                   &ldquo;{user.bio}&rdquo;
                 </p>
-                <div className="mx-auto mt-6 h-px w-16 bg-[oklch(0.82_0.13_88/0.4)]" />
+                <div className="mx-auto mt-6 h-px w-16 bg-brand/40" />
               </>
             ) : (
               <p className="font-serif text-xl italic text-muted-foreground">
@@ -278,7 +278,7 @@ export default async function ProfilePage({ params }: Props) {
               <Link href="/timeline/new">
                 <Button
                   variant="outline"
-                  className="border-[oklch(0.82_0.13_88/0.4)] text-foreground hover:bg-[oklch(0.82_0.13_88/0.08)]"
+                  className="border-brand/40 text-foreground hover:bg-brand/8"
                 >
                   <Plus className="mr-1.5 h-4 w-4" />
                   New timeline
@@ -295,7 +295,7 @@ export default async function ProfilePage({ params }: Props) {
       <div className="relative py-12">
         <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
           <SpotlightCard className="shadow-soft h-full" innerClassName="p-5 text-center">
-            <span className="font-serif text-3xl font-semibold text-[oklch(0.82_0.13_88)]">
+            <span className="font-serif text-3xl font-semibold text-brand">
               {timelineList.length}
             </span>
             <p className="mt-1 text-xs text-muted-foreground">
@@ -303,7 +303,7 @@ export default async function ProfilePage({ params }: Props) {
             </p>
           </SpotlightCard>
           <SpotlightCard className="shadow-soft h-full" innerClassName="p-5 text-center">
-            <span className="font-serif text-3xl font-semibold text-[oklch(0.82_0.13_88)]">
+            <span className="font-serif text-3xl font-semibold text-brand">
               {allHobbies.length}
             </span>
             <p className="mt-1 text-xs text-muted-foreground">
@@ -311,7 +311,7 @@ export default async function ProfilePage({ params }: Props) {
             </p>
           </SpotlightCard>
           <SpotlightCard className="shadow-soft h-full" innerClassName="p-5 text-center">
-            <span className="font-serif text-3xl font-semibold text-[oklch(0.82_0.13_88)]">
+            <span className="font-serif text-3xl font-semibold text-brand">
               {completedQuestRows.length}
             </span>
             <p className="mt-1 text-xs text-muted-foreground">
@@ -320,9 +320,7 @@ export default async function ProfilePage({ params }: Props) {
           </SpotlightCard>
           <SpotlightCard className="shadow-soft h-full" innerClassName="p-5 text-center">
             {yearsLived > 0 ? (
-              <span className="font-serif text-3xl font-semibold text-[oklch(0.82_0.13_88)]">
-                {yearsLived}
-              </span>
+              <span className="font-serif text-3xl font-semibold text-brand">{yearsLived}</span>
             ) : (
               <span className="font-serif text-3xl font-semibold text-subtle">&mdash;</span>
             )}
@@ -437,7 +435,7 @@ export default async function ProfilePage({ params }: Props) {
                         {q.title}
                       </h3>
                       <div className="mt-1.5 flex flex-wrap items-center gap-1.5">
-                        <span className="inline-flex items-center gap-1 rounded-full border border-[oklch(0.82_0.13_88/0.3)] bg-[oklch(0.82_0.13_88/0.08)] px-2 py-0.5 text-[10px] font-medium text-[oklch(0.82_0.13_88)]">
+                        <span className="inline-flex items-center gap-1 rounded-full border border-brand/30 bg-brand/8 px-2 py-0.5 text-[10px] font-medium text-brand">
                           Completed
                         </span>
                         {isOwner && (
diff --git a/src/app/what-are-significant-hobbies/page.tsx b/src/app/what-are-significant-hobbies/page.tsx
index 0bcc9978..6bdb25a9 100644
--- a/src/app/what-are-significant-hobbies/page.tsx
+++ b/src/app/what-are-significant-hobbies/page.tsx
@@ -601,7 +601,7 @@ export default function WhatAreSignificantHobbiesPage() {
                     <Link href={href} className="group block" prefetch={false}>
                       <SpotlightCard
                         className={`shadow-soft transition-transform duration-200 group-hover:-translate-y-0.5 ${
-                          accent ? 'border-[#c6a935] bg-[#f7e957]' : ''
+                          accent ? 'border-brand bg-field-sun' : ''
                         }`}
                         innerClassName="flex h-full items-start gap-4 rounded-2xl p-6"
                       >
@@ -610,7 +610,7 @@ export default function WhatAreSignificantHobbiesPage() {
                           <p className="mb-1 font-bold text-foreground">{label}</p>
                           <p
                             className={`text-sm leading-relaxed ${
-                              accent ? 'text-[#3f3a20]' : 'text-muted-foreground'
+                              accent ? 'text-muted-foreground' : 'text-muted-foreground'
                             }`}
                           >
                             {description}
diff --git a/src/components/aceternity/border-beam.tsx b/src/components/aceternity/border-beam.tsx
index d0054ed7..d35c6667 100644
--- a/src/components/aceternity/border-beam.tsx
+++ b/src/components/aceternity/border-beam.tsx
@@ -9,8 +9,8 @@ export function BorderBeam({
   size = 200,
   duration = 12,
   delay = 0,
-  colorFrom = 'oklch(0.82 0.13 88)',
-  colorTo = 'oklch(0.72 0.13 150)',
+  colorFrom = 'var(--brand)',
+  colorTo = 'var(--success)',
 }: {
   className?: string;
   size?: number;
diff --git a/src/components/aceternity/card-hover-effect.tsx b/src/components/aceternity/card-hover-effect.tsx
index 103e9bc0..63e0bf52 100644
--- a/src/components/aceternity/card-hover-effect.tsx
+++ b/src/components/aceternity/card-hover-effect.tsx
@@ -13,7 +13,7 @@ import { cn } from '~/lib/utils';
 export function CardHoverEffect({
   children,
   className,
-  glowColor = 'oklch(0.82 0.13 88 / 0.12)',
+  glowColor = 'color-mix(in srgb, var(--brand) 12%, transparent)',
 }: {
   children: ReactNode;
   className?: string;
diff --git a/src/components/aceternity/gradient-mesh.tsx b/src/components/aceternity/gradient-mesh.tsx
index dd9fcfdb..9253b515 100644
--- a/src/components/aceternity/gradient-mesh.tsx
+++ b/src/components/aceternity/gradient-mesh.tsx
@@ -16,19 +16,22 @@ export function GradientMesh({ className, variant = 'gold' }: Props) {
     variant === 'gold'
       ? [
           {
-            background: 'radial-gradient(circle, oklch(0.82 0.13 88 / 0.08), transparent 60%)',
+            background:
+              'radial-gradient(circle, color-mix(in srgb, var(--brand) 8%, transparent), transparent 60%)',
             top: '-20%',
             right: '10%',
             size: '400px',
           },
           {
-            background: 'radial-gradient(circle, oklch(0.72 0.13 150 / 0.06), transparent 60%)',
+            background:
+              'radial-gradient(circle, color-mix(in srgb, var(--success) 6%, transparent), transparent 60%)',
             bottom: '-30%',
             left: '5%',
             size: '350px',
           },
           {
-            background: 'radial-gradient(circle, oklch(0.82 0.13 88 / 0.04), transparent 50%)',
+            background:
+              'radial-gradient(circle, color-mix(in srgb, var(--brand) 4%, transparent), transparent 50%)',
             top: '20%',
             left: '40%',
             size: '300px',
@@ -36,13 +39,15 @@ export function GradientMesh({ className, variant = 'gold' }: Props) {
         ]
       : [
           {
-            background: 'radial-gradient(circle, oklch(0.72 0.13 150 / 0.08), transparent 60%)',
+            background:
+              'radial-gradient(circle, color-mix(in srgb, var(--success) 8%, transparent), transparent 60%)',
             top: '-20%',
             right: '10%',
             size: '400px',
           },
           {
-            background: 'radial-gradient(circle, oklch(0.82 0.13 88 / 0.05), transparent 60%)',
+            background:
+              'radial-gradient(circle, color-mix(in srgb, var(--brand) 5%, transparent), transparent 60%)',
             bottom: '-30%',
             left: '5%',
             size: '350px',
diff --git a/src/components/aceternity/grid-background.tsx b/src/components/aceternity/grid-background.tsx
index d15988b3..1f3956f4 100644
--- a/src/components/aceternity/grid-background.tsx
+++ b/src/components/aceternity/grid-background.tsx
@@ -8,7 +8,7 @@ export function GridBackground({
   className,
   variant = 'dots',
   size = 20,
-  color = 'oklch(0.97 0.003 285 / 0.04)',
+  color = 'color-mix(in srgb, var(--foreground) 4%, transparent)',
 }: {
   className?: string;
   variant?: 'dots' | 'lines';
diff --git a/src/components/aceternity/spotlight-card.tsx b/src/components/aceternity/spotlight-card.tsx
index f0adeb3c..1f0ce5e8 100644
--- a/src/components/aceternity/spotlight-card.tsx
+++ b/src/components/aceternity/spotlight-card.tsx
@@ -19,7 +19,7 @@ export function SpotlightCard({
   return (
     <div
       className={cn(
-        'group relative overflow-hidden rounded-2xl border border-[#e5ddc4] bg-white shadow-[0_8px_24px_rgba(66,55,22,0.08)] transition-[border-color,transform,box-shadow] duration-200 hover:-translate-y-px hover:border-[#cfc29d] hover:shadow-[0_12px_30px_rgba(66,55,22,0.11)]',
+        'group relative overflow-hidden rounded-2xl border border-border bg-card shadow-[0_8px_24px_color-mix(in_srgb,var(--scrim)_8%,transparent)] transition-[border-color,transform,box-shadow] duration-200 hover:-translate-y-px hover:border-border hover:shadow-[0_12px_30px_color-mix(in_srgb,var(--scrim)_11%,transparent)]',
         className
       )}
     >
diff --git a/src/components/add-to-my-list-button.tsx b/src/components/add-to-my-list-button.tsx
index 86a00310..5ed0e5b6 100644
--- a/src/components/add-to-my-list-button.tsx
+++ b/src/components/add-to-my-list-button.tsx
@@ -63,7 +63,7 @@ export function AddToMyListButton({
           onClick={handleAdd}
           disabled={isPending || added}
           aria-label={`${added ? 'Saved' : 'Save'} ${title} to my list`}
-          className="inline-flex min-h-12 items-center gap-2 rounded-xl bg-[#211e18] px-5 text-sm font-bold text-white transition-colors hover:bg-[#363128] disabled:cursor-default disabled:opacity-70"
+          className="inline-flex min-h-12 items-center gap-2 rounded-xl bg-primary px-5 text-sm font-bold text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-default disabled:opacity-70"
         >
           {isPending ? (
             <Loader2 className="size-4 animate-spin" />
@@ -75,7 +75,7 @@ export function AddToMyListButton({
           {isPending ? 'Saving privately…' : added ? 'In my list' : 'Add to my list'}
         </button>
         {failed ? (
-          <p className="mt-2 text-xs font-medium text-[#8b3329]" role="status">
+          <p className="mt-2 text-xs font-medium text-destructive" role="status">
             Live could not save this yet. Please try again.
           </p>
         ) : null}
@@ -85,7 +85,7 @@ export function AddToMyListButton({
 
   if (added) {
     return (
-      <span className="inline-flex items-center gap-1.5 text-xs font-medium text-[#684e00]">
+      <span className="inline-flex items-center gap-1.5 text-xs font-medium text-brand">
         <span className="inline-flex h-4 w-4 items-center justify-center rounded-full bg-primary text-primary-foreground text-[9px] font-bold">
           ✓
         </span>
@@ -105,7 +105,7 @@ export function AddToMyListButton({
       aria-describedby={
         failed ? `add-${title.replace(/\W+/g, '-').toLowerCase()}-error` : undefined
       }
-      className="inline-flex min-h-11 items-center gap-1.5 rounded-full border border-lumi-200 bg-card px-3 py-1 text-xs font-medium text-[#684e00] transition-colors hover:bg-primary/10 disabled:cursor-not-allowed disabled:opacity-50"
+      className="inline-flex min-h-11 items-center gap-1.5 rounded-full border border-lumi-200 bg-card px-3 py-1 text-xs font-medium text-brand transition-colors hover:bg-primary/10 disabled:cursor-not-allowed disabled:opacity-50"
     >
       {isPending ? 'Adding…' : failed ? 'Could not save — retry' : '+ Add to my list'}
       {failed ? (
diff --git a/src/components/ambient-music.tsx b/src/components/ambient-music.tsx
index 86f21364..6b511fc9 100644
--- a/src/components/ambient-music.tsx
+++ b/src/components/ambient-music.tsx
@@ -146,16 +146,16 @@ export function AmbientMusic({
   return (
     <div ref={playerRef} className={`relative ${className}`}>
       <div
-        className={`inline-flex min-h-11 items-stretch overflow-hidden rounded-full border shadow-[0_3px_0_rgba(44,38,20,0.08)] transition-colors ${
+        className={`inline-flex min-h-11 items-stretch overflow-hidden rounded-full border shadow-[0_3px_0_color-mix(in_srgb,var(--scrim)_8%,transparent)] transition-colors ${
           isPlaying
-            ? 'border-[#aa8b1f]/45 bg-[#fff1a8] text-[#413713]'
+            ? 'border-brand/45 bg-field-sun text-muted-foreground'
             : 'border-border bg-card/95 text-muted-foreground'
         }`}
       >
         <button
           type="button"
           onClick={isPlaying ? stop : play}
-          className="inline-flex min-h-11 items-center gap-2.5 px-3.5 py-2 text-xs font-semibold transition-colors hover:bg-black/[0.035] focus-visible:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-inset"
+          className="inline-flex min-h-11 items-center gap-2.5 px-3.5 py-2 text-xs font-semibold transition-colors hover:bg-scrim/[0.035] focus-visible:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-inset"
           aria-label={isPlaying ? `Stop ${track.label}` : `Play ${track.label} by ${track.artist}`}
           aria-pressed={isPlaying}
         >
@@ -180,7 +180,7 @@ export function AmbientMusic({
               setPlayerOpen(true);
             }
           }}
-          className="inline-flex min-h-11 w-10 items-center justify-center border-l border-current/15 transition-colors hover:bg-black/[0.035] focus-visible:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-inset"
+          className="inline-flex min-h-11 w-10 items-center justify-center border-l border-current/15 transition-colors hover:bg-scrim/[0.035] focus-visible:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-inset"
           aria-label="Choose music"
           aria-expanded={playerOpen}
           aria-controls="soundtrack-player"
@@ -198,18 +198,18 @@ export function AmbientMusic({
           id="soundtrack-player"
           role="dialog"
           aria-label="Music player"
-          className="absolute right-0 top-[calc(100%+0.5rem)] z-50 w-[min(16.5rem,calc(100vw-1.5rem))] rounded-2xl bg-[#fffdf5] p-2.5 text-[#2f2919] shadow-[0_12px_30px_rgba(62,48,16,0.18)] ring-1 ring-[#d9cfad]"
+          className="absolute right-0 top-[calc(100%+0.5rem)] z-50 w-[min(16.5rem,calc(100vw-1.5rem))] rounded-2xl bg-card p-2.5 text-foreground shadow-[0_12px_30px_color-mix(in_srgb,var(--scrim)_18%,transparent)] ring-1 ring-ring"
         >
           <div className="flex min-h-10 items-center justify-between gap-3 px-1 pb-2">
             <p className="font-serif font-medium tracking-[-0.02em]">
               {track.label}{' '}
-              <span className="font-sans text-xs text-[#746b53]">· {track.artist}</span>
+              <span className="font-sans text-xs text-muted-foreground">· {track.artist}</span>
             </p>
             {isPlaying ? (
               <button
                 type="button"
                 onClick={stop}
-                className="inline-flex min-h-10 shrink-0 items-center gap-1.5 rounded-xl px-2 text-xs font-bold hover:bg-[#f4edda] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#9a7411]"
+                className="inline-flex min-h-10 shrink-0 items-center gap-1.5 rounded-xl px-2 text-xs font-bold hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand"
               >
                 <Square className="size-3 fill-current" aria-hidden="true" /> Stop
               </button>
@@ -221,7 +221,7 @@ export function AmbientMusic({
               key={track.youtubeId}
               title={`${track.label} by ${track.artist}`}
               src={getYoutubeEmbedUrl(trackId)}
-              className="aspect-video w-full rounded-xl bg-[#211e18]"
+              className="aspect-video w-full rounded-xl bg-surface"
               allow="autoplay; encrypted-media; picture-in-picture"
               allowFullScreen
             />
@@ -229,11 +229,11 @@ export function AmbientMusic({
             <button
               type="button"
               onClick={play}
-              className="flex aspect-video w-full flex-col items-center justify-center rounded-xl bg-[#211e18] px-5 text-center text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#9a7411] focus-visible:ring-offset-2"
+              className="flex aspect-video w-full flex-col items-center justify-center rounded-xl bg-primary px-5 text-center text-primary-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2"
             >
-              <Music className="mb-2 size-6 text-[#f7e957]" aria-hidden="true" />
+              <Music className="mb-2 size-6 text-brand" aria-hidden="true" />
               <span className="font-bold">Play {track.label}</span>
-              <span className="mt-1 text-xs text-white/65">by {track.artist}</span>
+              <span className="mt-1 text-xs text-muted-foreground">by {track.artist}</span>
             </button>
           )}
 
@@ -249,8 +249,8 @@ export function AmbientMusic({
                   aria-checked={selected}
                   onClick={() => chooseTrack(id)}
                   title={`${option.artist} · ${option.mood}`}
-                  className={`min-h-11 min-w-0 rounded-xl px-1.5 text-center text-[11px] font-bold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#9a7411] ${
-                    selected ? 'bg-[#f4e6a6]' : 'hover:bg-[#f7f1dd]'
+                  className={`min-h-11 min-w-0 rounded-xl px-1.5 text-center text-[11px] font-bold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand ${
+                    selected ? 'bg-field-sun' : 'hover:bg-muted'
                   }`}
                 >
                   {option.label}
@@ -259,7 +259,7 @@ export function AmbientMusic({
             })}
           </div>
 
-          <p className="px-1 pt-2 text-[10px] leading-4 text-[#746b53]">
+          <p className="px-1 pt-2 text-[10px] leading-4 text-muted-foreground">
             YouTube · If autoplay pauses, tap the video once.
           </p>
         </div>
diff --git a/src/components/bucket-list/bingo-board.tsx b/src/components/bucket-list/bingo-board.tsx
index 3f05261f..00c646af 100644
--- a/src/components/bucket-list/bingo-board.tsx
+++ b/src/components/bucket-list/bingo-board.tsx
@@ -5,12 +5,12 @@ import { getBingoProgress, type BucketListDraft, type BucketListItem } from '~/l
 import { cn } from '~/lib/utils';
 
 const TONE_CLASSES: Record<BucketListItem['tone'], string> = {
-  moss: 'border-[#8fa67e] bg-[#d8e6ce] text-[#263529]',
-  clay: 'border-[#c28e72] bg-[#efd0bc] text-[#4a2f28]',
-  marigold: 'border-[#c99f36] bg-[#f4d77a] text-[#493815]',
-  sky: 'border-[#83aeb8] bg-[#cfe3e8] text-[#20383d]',
-  rose: 'border-[#b98991] bg-[#ead0d3] text-[#482d31]',
-  ink: 'border-[#1e3029] bg-[#1e3029] text-[#fffaf0]',
+  moss: 'border-field-green-ink bg-field-green text-foreground',
+  clay: 'border-field-coral-ink bg-field-coral text-foreground',
+  marigold: 'border-brand bg-field-sun text-foreground',
+  sky: 'border-field-sky-ink bg-field-sky text-foreground',
+  rose: 'border-field-rose-ink bg-field-rose text-foreground',
+  ink: 'border-border bg-surface text-foreground',
 };
 
 export function BingoBoard({
@@ -37,7 +37,7 @@ export function BingoBoard({
   return (
     <section
       className={cn(
-        'relative overflow-hidden rounded-[1.5rem] border border-[#cfc2aa] bg-[#fbf5e8] p-4 text-[#1e3029] shadow-[0_20px_60px_rgba(67,54,36,0.13)] sm:p-6',
+        'relative overflow-hidden rounded-2xl border border-border bg-card p-4 text-foreground shadow-[0_20px_60px_color-mix(in_srgb,var(--scrim)_13%,transparent)] sm:p-6',
         className
       )}
       aria-label={`${draft.title} Bingo board`}
@@ -58,7 +58,7 @@ export function BingoBoard({
         )}
       >
         <div className="min-w-0">
-          <p className="mb-1 text-[0.6rem] font-bold uppercase tracking-[0.28em] text-[#597064] sm:text-[0.68rem]">
+          <p className="mb-1 text-[0.6rem] font-bold uppercase tracking-[0.28em] text-muted-foreground sm:text-[0.68rem]">
             A life less ordinary
           </p>
           <h2
@@ -70,7 +70,7 @@ export function BingoBoard({
             {draft.title}
           </h2>
           {!compact && (
-            <p className="mt-2 max-w-xl text-xs leading-relaxed text-[#637169] sm:text-sm">
+            <p className="mt-2 max-w-xl text-xs leading-relaxed text-muted-foreground sm:text-sm">
               {draft.subtitle}
             </p>
           )}
@@ -83,9 +83,9 @@ export function BingoBoard({
             )}
           >
             {progress.completed}
-            <span className="text-[#9aa59e]">/{progress.total}</span>
+            <span className="text-muted-foreground">/{progress.total}</span>
           </p>
-          <p className="mt-1 text-[0.55rem] font-bold uppercase tracking-[0.2em] text-[#6a7a71]">
+          <p className="mt-1 text-[0.55rem] font-bold uppercase tracking-[0.2em] text-muted-foreground">
             moments lived
           </p>
         </div>
@@ -103,7 +103,7 @@ export function BingoBoard({
                 key={`empty-${position}`}
                 onClick={() => onSelectEmpty?.(position)}
                 disabled={!onSelectEmpty}
-                className="aspect-square rounded-lg border border-dashed border-[#c9beaa] bg-white/30 p-1 text-[0.55rem] font-semibold uppercase tracking-wider text-[#998f7e] transition hover:bg-white/60 disabled:cursor-default sm:rounded-xl sm:text-[0.65rem]"
+                className="aspect-square rounded-lg border border-dashed border-border bg-card/30 p-1 text-[0.55rem] font-semibold uppercase tracking-wider text-muted-foreground transition hover:bg-card/60 disabled:cursor-default sm:rounded-xl sm:text-[0.65rem]"
                 aria-label={`Empty Bingo position ${position + 1}`}
               >
                 Add a wish
@@ -116,7 +116,7 @@ export function BingoBoard({
               <span
                 className={cn(
                   'absolute left-1.5 top-1.5 text-[0.5rem] font-bold uppercase tracking-[0.14em] sm:left-2 sm:top-2 sm:text-[0.58rem]',
-                  item.isWildcard ? 'text-[#dce8e1]' : 'text-[#4a463b]'
+                  item.isWildcard ? 'text-foreground' : 'text-muted-foreground'
                 )}
               >
                 {item.isWildcard ? 'wild card' : item.effort}
@@ -124,7 +124,7 @@ export function BingoBoard({
               <span
                 className={cn(
                   'absolute right-1.5 top-1.5 font-serif text-[0.62rem] sm:right-2 sm:top-2 sm:text-xs',
-                  item.isWildcard ? 'text-[#dce8e1]' : 'text-[#514c41]'
+                  item.isWildcard ? 'text-foreground' : 'text-muted-foreground'
                 )}
                 aria-hidden="true"
               >
@@ -141,7 +141,7 @@ export function BingoBoard({
                 {item.text}
               </span>
               {item.completedAt && (
-                <span className="life-bingo-stamp absolute bottom-1.5 right-1.5 z-20 flex h-[43%] w-[43%] rotate-[-8deg] items-center justify-center rounded-full border-2 border-[#0f5a3c] bg-[#f9f2e3] text-[#0f5a3c] mix-blend-multiply sm:bottom-2.5 sm:right-2.5">
+                <span className="life-bingo-stamp absolute bottom-1.5 right-1.5 z-20 flex h-[43%] w-[43%] rotate-[-8deg] items-center justify-center rounded-full border-2 border-growth bg-card text-growth mix-blend-normal sm:bottom-2.5 sm:right-2.5">
                   <span className="flex h-[76%] w-[76%] flex-col items-center justify-center rounded-full border border-current">
                     <Check className="h-1/3 w-1/3 stroke-[3]" aria-hidden="true" />
                     <span className="text-[0.5rem] font-black uppercase tracking-[0.1em] sm:text-[0.58rem]">
@@ -167,7 +167,7 @@ export function BingoBoard({
             position % 4 === 2 && 'rounded-[0.8rem_1rem_0.65rem_1.05rem]',
             position % 4 === 3 && 'rounded-[1.05rem_0.8rem_0.95rem_0.65rem]',
             onSelectItem &&
-              'hover:-translate-y-0.5 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#176b4a] focus-visible:ring-offset-2'
+              'hover:-translate-y-0.5 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-growth focus-visible:ring-offset-2'
           );
 
           return onSelectItem ? (
@@ -188,7 +188,7 @@ export function BingoBoard({
         })}
       </div>
 
-      <footer className="relative mt-4 flex items-center justify-between gap-3 border-t border-[#d8cdb9] pt-3 text-[0.58rem] font-semibold uppercase tracking-[0.16em] text-[#6f7c74] sm:mt-6 sm:pt-4 sm:text-[0.65rem]">
+      <footer className="relative mt-4 flex items-center justify-between gap-3 border-t border-border pt-3 text-[0.58rem] font-semibold uppercase tracking-[0.16em] text-muted-foreground sm:mt-6 sm:pt-4 sm:text-[0.65rem]">
         <span>
           {progress.lines.length > 0
             ? `${progress.lines.length} bingo ${progress.lines.length === 1 ? 'line' : 'lines'}`
diff --git a/src/components/bucket-list/bucket-list-view.tsx b/src/components/bucket-list/bucket-list-view.tsx
index e03f6c99..fb7e62bf 100644
--- a/src/components/bucket-list/bucket-list-view.tsx
+++ b/src/components/bucket-list/bucket-list-view.tsx
@@ -18,15 +18,15 @@ export function BucketListView({
   readonly?: boolean;
 }) {
   return (
-    <div className="overflow-hidden rounded-[1.5rem] border border-stone-200 bg-[#fffdf8] shadow-[0_18px_55px_rgba(73,60,43,0.08)]">
-      <div className="border-b border-stone-200 bg-[#f6efe3] px-5 py-5 sm:px-7">
-        <p className="text-[0.65rem] font-bold uppercase tracking-[0.24em] text-emerald-700">
+    <div className="overflow-hidden rounded-2xl border border-border bg-card shadow-[0_18px_55px_color-mix(in_srgb,var(--scrim)_8%,transparent)]">
+      <div className="border-b border-border bg-muted px-5 py-5 sm:px-7">
+        <p className="text-[0.65rem] font-bold uppercase tracking-[0.24em] text-growth">
           Bucket list
         </p>
-        <h2 className="mt-1 font-serif text-3xl font-semibold tracking-tight text-stone-900 sm:text-4xl">
+        <h2 className="mt-1 font-serif text-3xl font-semibold tracking-tight text-foreground sm:text-4xl">
           {draft.title}
         </h2>
-        <p className="mt-1 text-sm text-stone-500">{draft.subtitle}</p>
+        <p className="mt-1 text-sm text-muted-foreground">{draft.subtitle}</p>
       </div>
 
       <ol className="divide-y divide-stone-100">
@@ -35,20 +35,20 @@ export function BucketListView({
             key={item.id}
             className={cn(
               'group flex items-center gap-3 px-4 py-3.5 sm:px-6',
-              item.completedAt && 'bg-emerald-50/40'
+              item.completedAt && 'bg-field-green/40'
             )}
           >
             <button
               type="button"
               onClick={() => onToggle?.(item)}
               disabled={readonly || !onToggle}
-              className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full text-emerald-700 transition hover:bg-emerald-100 disabled:cursor-default"
+              className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full text-growth transition hover:bg-field-green disabled:cursor-default"
               aria-label={`${item.completedAt ? 'Reopen' : 'Complete'} ${item.text}`}
             >
               {item.completedAt ? (
                 <Check className="h-5 w-5 stroke-[2.5]" />
               ) : (
-                <Circle className="h-5 w-5 text-stone-300" />
+                <Circle className="h-5 w-5 text-muted-foreground" />
               )}
             </button>
 
@@ -60,18 +60,20 @@ export function BucketListView({
             >
               <span
                 className={cn(
-                  'block text-sm font-medium leading-snug text-stone-800 sm:text-[0.95rem]',
-                  item.completedAt && 'text-stone-500 line-through decoration-emerald-600/40'
+                  'block text-sm font-medium leading-snug text-foreground sm:text-[0.95rem]',
+                  item.completedAt && 'text-muted-foreground line-through decoration-emerald-600/40'
                 )}
               >
                 {item.text}
               </span>
-              <span className="mt-1 flex flex-wrap items-center gap-2 text-[0.65rem] font-semibold uppercase tracking-wider text-stone-400">
+              <span className="mt-1 flex flex-wrap items-center gap-2 text-[0.65rem] font-semibold uppercase tracking-wider text-muted-foreground">
                 <span>{item.intention === 'wildcard' ? 'unexpected' : item.intention}</span>
                 <span aria-hidden="true">·</span>
                 <span>{item.effort}</span>
                 {item.note && (
-                  <span className="normal-case tracking-normal text-stone-500">“{item.note}”</span>
+                  <span className="normal-case tracking-normal text-muted-foreground">
+                    “{item.note}”
+                  </span>
                 )}
               </span>
             </button>
@@ -82,7 +84,7 @@ export function BucketListView({
                   type="button"
                   onClick={() => onMove?.(item.id, -1)}
                   disabled={index === 0}
-                  className="flex h-11 w-11 items-center justify-center rounded-md text-stone-500 hover:bg-stone-100 disabled:opacity-20 sm:h-8 sm:w-8"
+                  className="flex h-11 w-11 items-center justify-center rounded-md text-muted-foreground hover:bg-muted disabled:opacity-20 sm:h-8 sm:w-8"
                   aria-label={`Move ${item.text} up`}
                 >
                   <ChevronUp className="h-4 w-4" />
@@ -91,7 +93,7 @@ export function BucketListView({
                   type="button"
                   onClick={() => onMove?.(item.id, 1)}
                   disabled={index === draft.items.length - 1}
-                  className="flex h-11 w-11 items-center justify-center rounded-md text-stone-500 hover:bg-stone-100 disabled:opacity-20 sm:h-8 sm:w-8"
+                  className="flex h-11 w-11 items-center justify-center rounded-md text-muted-foreground hover:bg-muted disabled:opacity-20 sm:h-8 sm:w-8"
                   aria-label={`Move ${item.text} down`}
                 >
                   <ChevronDown className="h-4 w-4" />
@@ -99,7 +101,7 @@ export function BucketListView({
                 <button
                   type="button"
                   onClick={() => onEdit?.(item)}
-                  className="flex h-11 w-11 items-center justify-center rounded-md text-stone-500 hover:bg-stone-100 sm:h-8 sm:w-8"
+                  className="flex h-11 w-11 items-center justify-center rounded-md text-muted-foreground hover:bg-muted sm:h-8 sm:w-8"
                   aria-label={`Edit ${item.text}`}
                 >
                   <PenLine className="h-4 w-4" />
diff --git a/src/components/bucket-list/bucket-list-workspace.tsx b/src/components/bucket-list/bucket-list-workspace.tsx
index 0dda7f39..f8090d69 100644
--- a/src/components/bucket-list/bucket-list-workspace.tsx
+++ b/src/components/bucket-list/bucket-list-workspace.tsx
@@ -399,7 +399,9 @@ export function BucketListWorkspace({
       const dataUrl = await toPng(boardExportRef.current, {
         pixelRatio: 2,
         cacheBust: true,
-        backgroundColor: '#f8f1e4',
+        backgroundColor: getComputedStyle(boardExportRef.current)
+          .getPropertyValue('--background')
+          .trim(),
       });
       const link = document.createElement('a');
       link.download = `${
@@ -445,7 +447,7 @@ export function BucketListWorkspace({
 
   if (!draft) {
     return (
-      <div className="min-h-[calc(100vh-4.5rem)] bg-[#ffd0bd] px-4 py-10 sm:py-14">
+      <div className="min-h-[calc(100vh-4.5rem)] bg-field-coral px-4 py-10 sm:py-14">
         <div className="mx-auto max-w-5xl">
           <Link
             href="/life-bingo"
@@ -454,21 +456,21 @@ export function BucketListWorkspace({
             <ChevronLeft className="h-3.5 w-3.5" /> About Life Bingo
           </Link>
           <div className="grid gap-10 lg:grid-cols-[0.78fr_1.22fr] lg:gap-16">
-            <header className="rounded-[1.5rem] bg-[#ff9d7d] p-7 text-[#261e18] shadow-[0_12px_36px_rgba(102,52,35,0.10)] lg:sticky lg:top-24 lg:self-start sm:p-9">
+            <header className="rounded-2xl bg-field-coral p-7 text-foreground shadow-[0_12px_36px_color-mix(in_srgb,var(--scrim)_10%,transparent)] lg:sticky lg:top-24 lg:self-start sm:p-9">
               <p className="text-base font-bold">Make your list</p>
               <h1 className="mt-4 max-w-xl font-serif text-5xl font-medium leading-[0.98] tracking-[-0.035em] sm:text-6xl">
                 What should this chapter feel like?
               </h1>
-              <p className="mt-5 max-w-md text-base leading-relaxed text-[#49382f]">
+              <p className="mt-5 max-w-md text-base leading-relaxed text-muted-foreground">
                 Choose a horizon and a few things you want more of. We’ll turn them into concrete
                 experiences, not vague goals.
               </p>
-              <p className="mt-8 hidden max-w-sm border-t border-[#261e18]/20 pt-5 font-serif text-xl lg:block">
+              <p className="mt-8 hidden max-w-sm border-t border-border/20 pt-5 font-serif text-xl lg:block">
                 “A good list should make Tuesday feel full of possibility.”
               </p>
             </header>
 
-            <div className="space-y-9 rounded-[1.5rem] bg-white p-6 shadow-[0_12px_36px_rgba(102,52,35,0.10)] sm:p-9">
+            <div className="space-y-9 rounded-2xl bg-card p-6 shadow-[0_12px_36px_color-mix(in_srgb,var(--scrim)_10%,transparent)] sm:p-9">
               <fieldset>
                 <legend className="mb-4 text-sm font-bold text-foreground">
                   <span className="mr-2 font-serif text-xl text-primary">01</span> How far are we
diff --git a/src/components/bucket-list/local-bucket-list.tsx b/src/components/bucket-list/local-bucket-list.tsx
index 13e73e02..bd455da6 100644
--- a/src/components/bucket-list/local-bucket-list.tsx
+++ b/src/components/bucket-list/local-bucket-list.tsx
@@ -75,17 +75,17 @@ export function LocalBucketList() {
 
   return (
     <StorageModeProvider mode="local">
-      <div className="min-h-[calc(100vh-4rem)] bg-[#f7f1e7] px-4 py-10 text-[#211e18] sm:py-14">
+      <div className="min-h-[calc(100vh-4rem)] bg-background px-4 py-10 text-foreground sm:py-14">
         <div className="mx-auto max-w-5xl">
           <div className="flex justify-end">
             <StorageModeStatus />
           </div>
-          <header className="mt-5 overflow-hidden rounded-[2rem] bg-[#a8dc91] px-6 py-10 shadow-[0_18px_55px_rgba(53,80,40,0.13)] sm:px-10 sm:py-12">
-            <p className="text-sm font-bold text-[#0f593c]">Every meaningful someday</p>
+          <header className="mt-5 overflow-hidden rounded-2xl bg-field-green px-6 py-10 shadow-[0_18px_55px_color-mix(in_srgb,var(--scrim)_13%,transparent)] sm:px-10 sm:py-12">
+            <p className="text-sm font-bold text-growth">Every meaningful someday</p>
             <h1 className="mt-3 max-w-3xl font-serif text-5xl font-semibold leading-[0.94] tracking-[-0.045em] sm:text-7xl">
               Your bucket list, all in one place.
             </h1>
-            <p className="mt-5 max-w-2xl text-base leading-relaxed text-[#344b31]">
+            <p className="mt-5 max-w-2xl text-base leading-relaxed text-muted-foreground">
               Keep the things you want to live here. They stay on this device unless you choose to
               sign in.
             </p>
@@ -109,15 +109,15 @@ export function LocalBucketList() {
           </div>
 
           {error && (
-            <p role="alert" className="mt-4 text-sm text-red-800">
+            <p role="alert" className="mt-4 text-sm text-destructive">
               {error}
             </p>
           )}
 
-          <section className="mt-7 rounded-[2rem] border border-[#d9cfbd] bg-[#fffdf8] p-5 sm:p-8">
+          <section className="mt-7 rounded-2xl border border-border bg-card p-5 sm:p-8">
             <div className="flex flex-col items-start justify-between gap-8 sm:flex-row sm:items-end sm:gap-5">
               <div>
-                <p className="text-sm font-bold text-[#176b4a]">Still calling</p>
+                <p className="text-sm font-bold text-growth">Still calling</p>
                 <h2 className="mt-1 font-serif text-4xl leading-[1.05]">What comes next</h2>
               </div>
               <Link
@@ -129,16 +129,16 @@ export function LocalBucketList() {
             </div>
 
             {!loaded ? (
-              <p className="mt-8 text-sm text-[#625b50]">Opening your list…</p>
+              <p className="mt-8 text-sm text-muted-foreground">Opening your list…</p>
             ) : items.length === 0 ? (
-              <div className="mt-8 rounded-2xl bg-[#fff8d6] p-6 sm:p-8">
+              <div className="mt-8 rounded-2xl bg-field-sun p-6 sm:p-8">
                 <p className="font-serif text-3xl">What would make this year feel more alive?</p>
-                <p className="mt-3 max-w-xl text-sm leading-relaxed text-[#625b50]">
+                <p className="mt-3 max-w-xl text-sm leading-relaxed text-muted-foreground">
                   Add your own answer above, or browse ideas when you want a spark.
                 </p>
               </div>
             ) : (
-              <ul className="mt-9 divide-y divide-[#e8dfd1] sm:mt-7">
+              <ul className="mt-9 divide-y divide-border sm:mt-7">
                 {items.map((item, index) => {
                   const done = item.status === 'done';
                   return (
@@ -156,12 +156,12 @@ export function LocalBucketList() {
                             )
                           )
                         }
-                        className={`flex size-10 shrink-0 items-center justify-center rounded-full border-2 ${done ? 'border-[#176b4a] bg-[#176b4a] text-white' : 'border-[#b9af9e] bg-white text-transparent'}`}
+                        className={`flex size-10 shrink-0 items-center justify-center rounded-full border-2 ${done ? 'border-growth bg-growth text-brand-foreground' : 'border-border bg-card text-transparent'}`}
                       >
                         <Check className="size-5" />
                       </button>
                       <p
-                        className={`min-w-0 flex-1 font-serif text-2xl ${done ? 'text-[#766f65] line-through' : ''}`}
+                        className={`min-w-0 flex-1 font-serif text-2xl ${done ? 'text-muted-foreground line-through' : ''}`}
                       >
                         {item.title}
                       </p>
@@ -172,7 +172,7 @@ export function LocalBucketList() {
                         onClick={() =>
                           void persist(items.filter((_, itemIndex) => itemIndex !== index))
                         }
-                        className="flex size-10 shrink-0 items-center justify-center rounded-full text-[#766f65] hover:bg-[#f1e8da] hover:text-[#211e18]"
+                        className="flex size-10 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:bg-muted hover:text-foreground"
                       >
                         <Trash2 className="size-4" />
                       </button>
diff --git a/src/components/bucket-list/manual-item-input.tsx b/src/components/bucket-list/manual-item-input.tsx
index a809ef5f..804bb083 100644
--- a/src/components/bucket-list/manual-item-input.tsx
+++ b/src/components/bucket-list/manual-item-input.tsx
@@ -104,7 +104,7 @@ export function ManualItemInput({
           event.preventDefault();
           if (value.trim()) void add({ title: value.trim() });
         }}
-        className={`flex flex-col gap-3 rounded-2xl p-4 sm:flex-row sm:items-center ${dark ? 'bg-[#211e18] text-white' : 'border border-[#d9cfbd] bg-[#fffdf8]'}`}
+        className={`flex flex-col gap-3 rounded-2xl p-4 sm:flex-row sm:items-center ${dark ? 'bg-surface text-foreground' : 'border border-border bg-card'}`}
       >
         <label htmlFor={id} className="shrink-0 font-serif text-xl">
           I want to…
@@ -125,12 +125,12 @@ export function ManualItemInput({
             setSubmissionMessage('');
           }}
           placeholder="Something I want to do…"
-          className={`min-h-11 min-w-0 flex-1 rounded-xl border px-4 text-base focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#176b4a] ${dark ? 'border-white/20 bg-white/10 text-white placeholder:text-white/60' : 'border-[#d9cfbd] bg-white'}`}
+          className={`min-h-11 min-w-0 flex-1 rounded-xl border px-4 text-base focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-growth ${dark ? 'border-foreground/20 bg-card/10 text-foreground placeholder:text-muted-foreground' : 'border-border bg-card'}`}
         />
         <button
           type="submit"
           disabled={disabled || pending || submitting || !value.trim()}
-          className="min-h-11 rounded-xl bg-[#f7e957] px-5 font-bold text-[#211e18] disabled:opacity-50"
+          className="min-h-11 rounded-xl bg-brand px-5 font-bold text-brand-foreground disabled:opacity-50"
         >
           {pending ? 'Adding…' : 'Add my wording'}
         </button>
diff --git a/src/components/bucket-list/public-bingo.tsx b/src/components/bucket-list/public-bingo.tsx
index 540bc118..23a855cd 100644
--- a/src/components/bucket-list/public-bingo.tsx
+++ b/src/components/bucket-list/public-bingo.tsx
@@ -32,7 +32,9 @@ export function PublicBingo({
       const dataUrl = await toPng(exportRef.current, {
         pixelRatio: 2,
         cacheBust: true,
-        backgroundColor: '#f8f1e4',
+        backgroundColor: getComputedStyle(exportRef.current)
+          .getPropertyValue('--background')
+          .trim(),
       });
       const link = document.createElement('a');
       link.download = 'life-bingo.png';
@@ -58,30 +60,27 @@ export function PublicBingo({
   }
 
   return (
-    <div className="min-h-[calc(100vh-3.5rem)] bg-[#e8e2d6] px-4 py-10 sm:py-16">
+    <div className="min-h-[calc(100vh-3.5rem)] bg-background px-4 py-10 sm:py-16">
       <main className="mx-auto max-w-4xl">
         <header className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
           <div>
-            <p className="text-xs font-bold uppercase tracking-[0.24em] text-emerald-800">
+            <p className="text-xs font-bold uppercase tracking-[0.24em] text-growth">
               {ownerName ? `${ownerName}’s Life Bingo` : 'A Life Bingo'}
             </p>
-            <p className="mt-2 text-sm text-stone-600">A bucket list in its most playable form.</p>
+            <p className="mt-2 text-sm text-muted-foreground">
+              A bucket list in its most playable form.
+            </p>
           </div>
           <div className="flex flex-wrap gap-2">
             <Button
               variant="outline"
               size="sm"
               onClick={exportBoard}
-              className="border-stone-300 bg-[#fffdf8]"
+              className="border-border bg-card"
             >
               <Download className="h-3.5 w-3.5" /> Save image
             </Button>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={share}
-              className="border-stone-300 bg-[#fffdf8]"
-            >
+            <Button variant="outline" size="sm" onClick={share} className="border-border bg-card">
               <Share2 className="h-3.5 w-3.5" /> Share
             </Button>
           </div>
@@ -91,15 +90,15 @@ export function PublicBingo({
           <BingoBoard draft={draft} />
         </div>
 
-        <section className="mt-8 grid gap-5 rounded-[1.5rem] border border-[#cfc4b2] bg-[#fffdf8] p-6 sm:grid-cols-[1fr_auto] sm:items-center sm:p-8">
+        <section className="mt-8 grid gap-5 rounded-2xl border border-border bg-card p-6 sm:grid-cols-[1fr_auto] sm:items-center sm:p-8">
           <div>
-            <p className="text-xs font-bold uppercase tracking-[0.22em] text-emerald-700">
+            <p className="text-xs font-bold uppercase tracking-[0.22em] text-growth">
               Borrow the inspiration
             </p>
-            <h2 className="mt-2 font-serif text-3xl font-semibold leading-tight text-stone-900">
+            <h2 className="mt-2 font-serif text-3xl font-semibold leading-tight text-foreground">
               Keep the ideas. Make the life yours.
             </h2>
-            <p className="mt-2 text-sm leading-relaxed text-stone-500">
+            <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
               Remixing copies the prompts into a fresh private draft. Completed moments and personal
               notes never come with it.
             </p>
@@ -107,7 +106,7 @@ export function PublicBingo({
           <Button
             onClick={remix}
             size="lg"
-            className="rounded-xl bg-[#176b4a] text-white hover:bg-[#10583d]"
+            className="rounded-xl bg-primary text-primary-foreground hover:bg-primary/90"
           >
             <Grid3X3 className="h-4 w-4" /> Make my version
           </Button>
diff --git a/src/components/bucket-list/quest-chain-card.tsx b/src/components/bucket-list/quest-chain-card.tsx
index 67ca4a4d..44c36ead 100644
--- a/src/components/bucket-list/quest-chain-card.tsx
+++ b/src/components/bucket-list/quest-chain-card.tsx
@@ -261,7 +261,7 @@ export function QuestChainCard({
               </div>
 
               {/* Step content */}
-              <div className={`flex-1 min-w-0 ${isLocked ? 'opacity-40' : ''}`}>
+              <div className={`flex-1 min-w-0 ${isLocked ? 'text-muted-foreground' : ''}`}>
                 <div className="flex items-center gap-2">
                   <span className="text-base leading-none">{step.emoji}</span>
                   <p
diff --git a/src/components/commitments/local-commitments.tsx b/src/components/commitments/local-commitments.tsx
index 52922597..7acc0846 100644
--- a/src/components/commitments/local-commitments.tsx
+++ b/src/components/commitments/local-commitments.tsx
@@ -96,12 +96,12 @@ export function LocalCommitments() {
     <StorageModeProvider mode="local">
       <div className="space-y-8">
         <StorageModeStatus />
-        <header className="rounded-[1.75rem] bg-[#a8dc91] px-6 py-10 text-[#192817] shadow-[0_14px_40px_rgba(53,80,40,0.10)] sm:px-9">
+        <header className="rounded-2xl bg-field-green px-6 py-10 text-foreground shadow-[0_14px_40px_color-mix(in_srgb,var(--scrim)_10%,transparent)] sm:px-9">
           <p className="text-base font-bold">Living promises</p>
           <h1 className="mt-4 font-serif text-5xl font-medium leading-none tracking-[-0.03em] sm:text-6xl">
             Commitments
           </h1>
-          <p className="mt-5 max-w-xl text-base leading-relaxed text-[#344b31]">
+          <p className="mt-5 max-w-xl text-base leading-relaxed text-muted-foreground">
             Choose something worth returning to, then keep honest proof of the days you showed up.
           </p>
         </header>
@@ -113,7 +113,7 @@ export function LocalCommitments() {
             {items.map((item) => (
               <section
                 key={item.id}
-                className="rounded-2xl bg-white p-6 shadow-[0_8px_24px_rgba(66,55,22,0.08)]"
+                className="rounded-2xl bg-card p-6 shadow-[0_8px_24px_color-mix(in_srgb,var(--scrim)_8%,transparent)]"
               >
                 <p className="font-serif text-2xl font-medium">{item.hobbyName}</p>
                 <p className="mt-2 text-sm text-muted-foreground">
diff --git a/src/components/commitments/stamp-rail.tsx b/src/components/commitments/stamp-rail.tsx
index a23eb6ea..8e53fc04 100644
--- a/src/components/commitments/stamp-rail.tsx
+++ b/src/components/commitments/stamp-rail.tsx
@@ -69,7 +69,7 @@ export function StampRail({ stamps, goalDays }: Props) {
                   <ExternalLink className="h-2.5 w-2.5 shrink-0 self-center" aria-hidden />
                 </a>
               ) : (
-                <span className="text-foreground/80">{s.proofUrl}</span>
+                <span className="text-muted-foreground">{s.proofUrl}</span>
               )}
               {s.note && <span className="ml-1.5 text-muted-foreground">— {s.note}</span>}
             </span>
diff --git a/src/components/dream-atlas-explorer.tsx b/src/components/dream-atlas-explorer.tsx
index 4338c8f3..b7787c6f 100644
--- a/src/components/dream-atlas-explorer.tsx
+++ b/src/components/dream-atlas-explorer.tsx
@@ -159,12 +159,12 @@ export function DreamAtlasExplorer({
       {!exactQuery && callingDream && callingDoor ? (
         <section
           aria-labelledby="calling-dream-title"
-          className="overflow-hidden rounded-[1.75rem] bg-[#b9dcf5]"
+          className="overflow-hidden rounded-2xl bg-field-sky"
         >
           <div className="grid lg:grid-cols-[1.22fr_0.78fr]">
             <div className="p-6 sm:p-8 lg:p-10">
-              <div className="flex items-center gap-3 text-sm font-bold text-[#22526b]">
-                <span className="flex size-10 items-center justify-center rounded-full bg-[#211e18] text-white">
+              <div className="flex items-center gap-3 text-sm font-bold text-field-sky-ink">
+                <span className="flex size-10 items-center justify-center rounded-full bg-primary text-primary-foreground">
                   <Compass className="size-5" aria-hidden="true" />
                 </span>
                 Calling now
@@ -175,12 +175,12 @@ export function DreamAtlasExplorer({
               >
                 {callingDream.title}
               </h1>
-              <div className="mt-7 border-t border-[#22526b]/25 pt-6">
-                <p className="text-sm font-bold text-[#22526b]">{callingDoor.label}</p>
+              <div className="mt-7 border-t border-border/25 pt-6">
+                <p className="text-sm font-bold text-field-sky-ink">{callingDoor.label}</p>
                 <h2 className="mt-2 max-w-2xl font-serif text-2xl leading-tight sm:text-3xl">
                   {callingDoor.title}
                 </h2>
-                <p className="mt-3 max-w-2xl text-sm leading-relaxed text-[#344f5d] sm:text-base">
+                <p className="mt-3 max-w-2xl text-sm leading-relaxed text-muted-foreground sm:text-base">
                   {callingDoor.description}
                 </p>
                 {callingDoor.href.startsWith('http') ? (
@@ -188,7 +188,7 @@ export function DreamAtlasExplorer({
                     href={callingDoor.href}
                     target="_blank"
                     rel="noreferrer"
-                    className="mt-5 inline-flex min-h-12 items-center gap-2 rounded-xl bg-[#211e18] px-5 font-bold text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#211e18]"
+                    className="mt-5 inline-flex min-h-12 items-center gap-2 rounded-xl bg-primary px-5 font-bold text-primary-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
                   >
                     Open this door <span className="sr-only">(opens in a new tab)</span>
                     <ArrowRight className="size-4" aria-hidden="true" />
@@ -196,7 +196,7 @@ export function DreamAtlasExplorer({
                 ) : (
                   <Link
                     href={callingDoor.href}
-                    className="mt-5 inline-flex min-h-12 items-center gap-2 rounded-xl bg-[#211e18] px-5 font-bold text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#211e18]"
+                    className="mt-5 inline-flex min-h-12 items-center gap-2 rounded-xl bg-primary px-5 font-bold text-primary-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
                   >
                     Open this door <ArrowRight className="size-4" aria-hidden="true" />
                   </Link>
@@ -204,14 +204,14 @@ export function DreamAtlasExplorer({
               </div>
             </div>
 
-            <aside className="bg-[#fffdf8] p-6 sm:p-8 lg:p-10">
-              <p className="text-sm font-bold text-[#176b4a]">Other dreams still calling</p>
-              <p className="mt-2 text-sm leading-relaxed text-[#625b50]">
+            <aside className="bg-card p-6 sm:p-8 lg:p-10">
+              <p className="text-sm font-bold text-growth">Other dreams still calling</p>
+              <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
                 Choose another and Live will bring its next door here. Your other in-progress dreams
                 stay intact.
               </p>
               {items.length > 1 ? (
-                <ul className="mt-4 divide-y divide-[#e8dfd1]">
+                <ul className="mt-4 divide-y divide-border">
                   {items
                     .filter((item) => item.id !== callingDream.id)
                     .slice(0, 3)
@@ -222,7 +222,7 @@ export function DreamAtlasExplorer({
                           type="button"
                           disabled={callingPendingId !== null}
                           onClick={() => callDreamForward(item)}
-                          className="mt-1 inline-flex min-h-11 items-center gap-1.5 text-left text-xs font-bold text-[#6c3d2b] underline decoration-[#d79b7f] underline-offset-4 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#6c3d2b] disabled:opacity-50"
+                          className="mt-1 inline-flex min-h-11 items-center gap-1.5 text-left text-xs font-bold text-field-coral-ink underline decoration-field-coral-ink underline-offset-4 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:opacity-50"
                           aria-label={`Bring ${item.title} forward and find its first door`}
                         >
                           {callingPendingId === item.id ? (
@@ -236,37 +236,37 @@ export function DreamAtlasExplorer({
                     ))}
                 </ul>
               ) : (
-                <p className="mt-4 text-sm leading-relaxed text-[#625b50]">
+                <p className="mt-4 text-sm leading-relaxed text-muted-foreground">
                   One dream is enough. You can add another whenever something new starts tugging at
                   you.
                 </p>
               )}
               {items.length > 4 ? (
-                <p className="mt-3 text-sm text-[#625b50]">
+                <p className="mt-3 text-sm text-muted-foreground">
                   And {items.length - 4} more in your atlas.
                 </p>
               ) : null}
               <Link
                 href="/bucket-list"
-                className="mt-5 inline-flex min-h-11 items-center gap-2 font-bold underline underline-offset-4 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#211e18]"
+                className="mt-5 inline-flex min-h-11 items-center gap-2 font-bold underline underline-offset-4 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
               >
                 Manage the whole atlas <ArrowRight className="size-4" aria-hidden="true" />
               </Link>
             </aside>
           </div>
-          <div className="bg-[#211e18] px-6 py-5 text-white sm:px-8 lg:px-10">
-            <p className="max-w-3xl text-sm leading-relaxed text-white/70">
-              <strong className="text-white">Dreams are not a contract.</strong> Changing direction
-              is part of the atlas, not a failed streak.
+          <div className="bg-surface px-6 py-5 text-foreground sm:px-8 lg:px-10">
+            <p className="max-w-3xl text-sm leading-relaxed text-muted-foreground">
+              <strong className="text-foreground">Dreams are not a contract.</strong> Changing
+              direction is part of the atlas, not a failed streak.
             </p>
           </div>
         </section>
       ) : null}
 
-      <section className="overflow-hidden rounded-[2rem] bg-[#a8dc91] text-[#192817] shadow-[0_18px_55px_rgba(53,80,40,0.13)]">
+      <section className="overflow-hidden rounded-2xl bg-field-green text-foreground shadow-[0_18px_55px_color-mix(in_srgb,var(--scrim)_13%,transparent)]">
         <div className="grid gap-8 px-6 py-9 sm:px-10 sm:py-11 lg:grid-cols-[1.08fr_0.92fr] lg:items-end">
           <div>
-            <p className="text-sm font-bold text-[#0f593c]">An open world. A private atlas.</p>
+            <p className="text-sm font-bold text-growth">An open world. A private atlas.</p>
             {!exactQuery && callingDream ? (
               <h2 className="mt-3 max-w-4xl font-serif text-5xl font-medium leading-[0.94] tracking-[-0.045em] sm:text-7xl">
                 There are more ways to live{name ? `, ${name}` : ''}.
@@ -276,19 +276,19 @@ export function DreamAtlasExplorer({
                 There are more ways to live{name ? `, ${name}` : ''}.
               </h1>
             )}
-            <p className="mt-5 max-w-2xl text-base leading-relaxed text-[#344b31] sm:text-lg">
+            <p className="mt-5 max-w-2xl text-base leading-relaxed text-muted-foreground sm:text-lg">
               Name anything—even if it sounds impossible or only makes sense to you. Live will show
               what it genuinely knows, keep the exact dream, and open the wider world when its own
               atlas ends.
             </p>
           </div>
-          <div className="rounded-[1.5rem] bg-[#211e18] p-4 text-white sm:p-5">
+          <div className="rounded-2xl bg-surface p-4 text-foreground sm:p-5">
             <label htmlFor="dream-atlas-search" className="font-serif text-xl">
               What do you still want to live?
             </label>
             <div className="mt-3 flex gap-2">
-              <span className="flex min-h-12 min-w-0 flex-1 items-center gap-2 rounded-xl bg-white/10 px-3 ring-1 ring-white/20 focus-within:ring-2 focus-within:ring-[#f7e957]">
-                <Search className="size-4 shrink-0 text-white/60" />
+              <span className="flex min-h-12 min-w-0 flex-1 items-center gap-2 rounded-xl bg-card/10 px-3 ring-1 ring-foreground/20 focus-within:ring-2 focus-within:ring-ring">
+                <Search className="size-4 shrink-0 text-muted-foreground" />
                 <input
                   id="dream-atlas-search"
                   value={query}
@@ -297,13 +297,13 @@ export function DreamAtlasExplorer({
                     setStatus('');
                   }}
                   placeholder="go to space, start a band…"
-                  className="min-w-0 flex-1 bg-transparent py-3 text-base text-white outline-none placeholder:text-white/45"
+                  className="min-w-0 flex-1 bg-transparent py-3 text-base text-foreground outline-none placeholder:text-muted-foreground"
                 />
                 {query ? (
                   <button
                     type="button"
                     onClick={() => setQuery('')}
-                    className="flex size-11 shrink-0 items-center justify-center rounded-full text-white/65 hover:bg-white/10 hover:text-white"
+                    className="flex size-11 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:bg-card/10 hover:text-foreground"
                     aria-label="Clear dream search"
                   >
                     <X className="size-4" />
@@ -315,14 +315,14 @@ export function DreamAtlasExplorer({
               <button
                 type="button"
                 onClick={surpriseMe}
-                className="inline-flex min-h-11 items-center gap-2 rounded-xl bg-[#f7e957] px-4 text-sm font-bold text-[#211e18]"
+                className="inline-flex min-h-11 items-center gap-2 rounded-xl bg-brand px-4 text-sm font-bold text-brand-foreground"
               >
                 <Sparkles className="size-4" /> Surprise me
               </button>
               <button
                 type="button"
                 onClick={() => setImportOpen((current) => !current)}
-                className="inline-flex min-h-11 items-center gap-2 rounded-xl border border-white/25 px-4 text-sm font-bold text-white"
+                className="inline-flex min-h-11 items-center gap-2 rounded-xl border border-foreground/25 px-4 text-sm font-bold text-foreground"
               >
                 {importOpen ? <X className="size-4" /> : <ListPlus className="size-4" />}
                 {importOpen ? 'Close list import' : 'Paste a whole list'}
@@ -332,19 +332,19 @@ export function DreamAtlasExplorer({
         </div>
       </section>
 
-      <p aria-live="polite" className="text-sm font-medium text-[#176b4a]">
+      <p aria-live="polite" className="text-sm font-medium text-growth">
         {status}
       </p>
 
       {importOpen ? (
-        <section className="rounded-[1.75rem] border border-[#d9cfbd] bg-[#fffdf8] p-5 sm:p-8">
+        <section className="rounded-2xl border border-border bg-card p-5 sm:p-8">
           <div className="grid gap-6 lg:grid-cols-[0.78fr_1.22fr]">
             <div>
-              <p className="text-sm font-bold text-[#176b4a]">Bring your existing dreams</p>
+              <p className="text-sm font-bold text-growth">Bring your existing dreams</p>
               <h2 className="mt-2 font-serif text-4xl leading-tight">
                 Paste the list exactly as it is.
               </h2>
-              <p className="mt-3 text-sm leading-relaxed text-[#625b50]">
+              <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
                 Numbering and bullets are removed. Your wording is not. Exact duplicates are
                 collapsed before anything is saved.
               </p>
@@ -357,13 +357,13 @@ export function DreamAtlasExplorer({
                 onChange={(event) => setImportText(event.target.value)}
                 rows={10}
                 placeholder={'1. Participate in a car race\n2. Start my band\n3. Go to space'}
-                className="mt-5 w-full resize-y rounded-xl border border-[#cfc3b0] bg-white px-4 py-3 text-base outline-none focus:border-[#176b4a] focus:ring-2 focus:ring-[#176b4a]/20"
+                className="mt-5 w-full resize-y rounded-xl border border-border bg-card px-4 py-3 text-base outline-none focus:border-growth focus:ring-2 focus:ring-growth/20"
               />
             </div>
-            <div className="rounded-2xl bg-[#f6efe3] p-4 sm:p-5">
+            <div className="rounded-2xl bg-muted p-4 sm:p-5">
               <div className="flex items-baseline justify-between gap-4">
                 <div>
-                  <p className="text-sm font-bold text-[#176b4a]">Import preview</p>
+                  <p className="text-sm font-bold text-growth">Import preview</p>
                   <h3 className="mt-1 font-serif text-2xl">Dreams Live will keep</h3>
                 </div>
                 <span className="font-serif text-3xl tabular-nums">{approvedImports.length}</span>
@@ -378,8 +378,8 @@ export function DreamAtlasExplorer({
                         key={key}
                         className={`flex items-start gap-2 rounded-xl px-3 py-2 text-sm ${
                           excluded
-                            ? 'bg-white/40 text-[#8a8175] line-through'
-                            : 'bg-white text-[#211e18]'
+                            ? 'bg-card/40 text-muted-foreground line-through'
+                            : 'bg-card text-foreground'
                         }`}
                       >
                         <span className="min-w-0 flex-1">{title}</span>
@@ -393,7 +393,7 @@ export function DreamAtlasExplorer({
                               return next;
                             })
                           }
-                          className="flex size-11 shrink-0 items-center justify-center rounded-full hover:bg-[#eee4d4]"
+                          className="flex size-11 shrink-0 items-center justify-center rounded-full hover:bg-muted"
                           aria-label={`${excluded ? 'Restore' : 'Exclude'} ${title}`}
                         >
                           {excluded ? <Check className="size-3.5" /> : <X className="size-3.5" />}
@@ -403,7 +403,7 @@ export function DreamAtlasExplorer({
                   })}
                 </ul>
               ) : (
-                <p className="mt-8 text-sm leading-relaxed text-[#766f65]">
+                <p className="mt-8 text-sm leading-relaxed text-muted-foreground">
                   Your preview will appear here. Live accepts up to 100 lines at once.
                 </p>
               )}
@@ -416,7 +416,7 @@ export function DreamAtlasExplorer({
                     `${approvedImports.length} dreams are now in your atlas.`
                   )
                 }
-                className="mt-5 inline-flex min-h-12 w-full items-center justify-center gap-2 rounded-xl bg-[#176b4a] px-5 font-bold text-white disabled:opacity-45"
+                className="mt-5 inline-flex min-h-12 w-full items-center justify-center gap-2 rounded-xl bg-primary px-5 font-bold text-primary-foreground disabled:opacity-45"
               >
                 {isPending ? (
                   <Loader2 className="size-4 animate-spin" />
@@ -434,12 +434,12 @@ export function DreamAtlasExplorer({
         <section aria-label="Dream search results" className="space-y-5">
           <div className="flex flex-wrap items-end justify-between gap-4">
             <div>
-              <p className="text-sm font-bold text-[#176b4a]">
+              <p className="text-sm font-bold text-growth">
                 {hasNativeMatch ? 'Live knows a path into this' : 'The native atlas ends here'}
               </p>
               <h2 className="mt-1 font-serif text-4xl sm:text-5xl">“{exactQuery}”</h2>
             </div>
-            <p className="max-w-md text-sm leading-relaxed text-[#625b50]">
+            <p className="max-w-md text-sm leading-relaxed text-muted-foreground">
               {hasNativeMatch
                 ? 'Keep your exact wording or borrow a developed possibility from Live.'
                 : 'Live will not force this into an unrelated category. Keep it exactly, then explore current doors beyond the catalogue.'}
@@ -447,16 +447,16 @@ export function DreamAtlasExplorer({
           </div>
 
           {hasNativeMatch && exactOwnedDream ? (
-            <div className="flex flex-col gap-4 rounded-2xl bg-[#fff8d6] p-5 sm:flex-row sm:items-center sm:justify-between">
+            <div className="flex flex-col gap-4 rounded-2xl bg-field-sun p-5 sm:flex-row sm:items-center sm:justify-between">
               <div>
-                <p className="text-sm font-bold text-[#176b4a]">Saved exactly as you wrote it</p>
+                <p className="text-sm font-bold text-growth">Saved exactly as you wrote it</p>
                 <p className="mt-1 font-serif text-2xl">{exactOwnedDream.title}</p>
               </div>
               <button
                 type="button"
                 disabled={callingPendingId !== null || exactOwnedDream.id === callingDream?.id}
                 onClick={() => callDreamForward(exactOwnedDream)}
-                className="inline-flex min-h-11 shrink-0 items-center justify-center gap-2 rounded-xl bg-[#211e18] px-4 font-bold text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#211e18] disabled:opacity-55"
+                className="inline-flex min-h-11 shrink-0 items-center justify-center gap-2 rounded-xl bg-primary px-4 font-bold text-primary-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:opacity-55"
               >
                 {callingPendingId === exactOwnedDream.id ? (
                   <Loader2 className="size-4 animate-spin" aria-hidden="true" />
@@ -471,14 +471,14 @@ export function DreamAtlasExplorer({
           ) : null}
 
           {!hasNativeMatch ? (
-            <div className="overflow-hidden rounded-[1.5rem] bg-[#f7e957] p-5 sm:p-7">
+            <div className="overflow-hidden rounded-2xl bg-field-sun p-5 sm:p-7">
               <div className="flex flex-col gap-5 lg:flex-row lg:items-start lg:justify-between">
                 <div className="max-w-xl">
                   <p className="text-sm font-bold">Only yours—for now</p>
                   <h3 className="mt-2 font-serif text-3xl leading-tight">
                     Keep the dream. Open the world.
                   </h3>
-                  <p className="mt-3 text-sm leading-relaxed text-[#575344]">
+                  <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
                     This exact dream is not developed inside Live yet. Saving it does not make a
                     false promise; it gives you a durable place to return while the external world
                     supplies the changing details.
@@ -495,7 +495,7 @@ export function DreamAtlasExplorer({
                         ? callDreamForward(exactOwnedDream)
                         : save([{ title: exactQuery }])
                     }
-                    className="mt-5 inline-flex min-h-11 items-center gap-2 rounded-xl bg-[#211e18] px-4 font-bold text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#211e18] disabled:opacity-55"
+                    className="mt-5 inline-flex min-h-11 items-center gap-2 rounded-xl bg-primary px-4 font-bold text-primary-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:opacity-55"
                   >
                     {pendingTitles.has(normalizeDreamTitle(exactQuery)) ? (
                       <Loader2 className="size-4 animate-spin" />
@@ -522,7 +522,7 @@ export function DreamAtlasExplorer({
 
           {nativeMatches.length > 0 ? (
             <div>
-              <p className="mb-3 text-sm font-bold text-[#176b4a]">Developed in Live</p>
+              <p className="mb-3 text-sm font-bold text-growth">Developed in Live</p>
               <div className="grid gap-3 sm:grid-cols-2">
                 {nativeMatches.map(({ entry }, index) => {
                   const key = normalizeDreamTitle(entry.title);
@@ -535,7 +535,9 @@ export function DreamAtlasExplorer({
                     <article
                       key={entry.slug}
                       className={`flex min-h-56 flex-col justify-between rounded-[1.25rem] p-5 ${
-                        ['bg-[#ffd0bd]', 'bg-[#b9dcf5]', 'bg-[#dceabf]', 'bg-[#c5abfa]'][index % 4]
+                        ['bg-field-coral', 'bg-field-sky', 'bg-field-green', 'bg-field-lilac'][
+                          index % 4
+                        ]
                       } ${index === 0 ? 'sm:col-span-2 sm:min-h-64' : ''}`}
                     >
                       <div>
@@ -571,7 +573,7 @@ export function DreamAtlasExplorer({
                                   },
                                 ])
                           }
-                          className="inline-flex min-h-11 items-center gap-2 rounded-xl bg-[#211e18] px-4 text-sm font-bold text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#211e18] disabled:opacity-55"
+                          className="inline-flex min-h-11 items-center gap-2 rounded-xl bg-primary px-4 text-sm font-bold text-primary-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:opacity-55"
                         >
                           {pending ? (
                             <Loader2 className="size-4 animate-spin" />
@@ -590,7 +592,7 @@ export function DreamAtlasExplorer({
                         </button>
                         <Link
                           href={`/experiences/${entry.slug}`}
-                          className="inline-flex min-h-11 items-center gap-2 rounded-xl border border-[#211e18]/25 px-4 text-sm font-bold"
+                          className="inline-flex min-h-11 items-center gap-2 rounded-xl border border-border/25 px-4 text-sm font-bold"
                         >
                           See the path <ArrowRight className="size-4" />
                         </Link>
@@ -606,28 +608,28 @@ export function DreamAtlasExplorer({
         <section>
           <div className="flex flex-wrap items-end justify-between gap-4">
             <div>
-              <p className="text-sm font-bold text-[#176b4a]">Ways into a larger life</p>
+              <p className="text-sm font-bold text-growth">Ways into a larger life</p>
               <h2 className="mt-1 max-w-3xl font-serif text-4xl leading-tight sm:text-5xl">
                 Wander beyond the categories you already know.
               </h2>
             </div>
             <Link
               href="/experiences"
-              className="inline-flex min-h-11 items-center gap-2 font-bold underline decoration-[#176b4a] underline-offset-4"
+              className="inline-flex min-h-11 items-center gap-2 font-bold underline decoration-growth underline-offset-4"
             >
               Explore the full native atlas <ArrowRight className="size-4" />
             </Link>
           </div>
-          <div className="relative mt-6 overflow-hidden rounded-2xl bg-[#fffdf8] px-5 py-8 sm:px-8 lg:px-12 lg:py-12">
+          <div className="relative mt-6 overflow-hidden rounded-2xl bg-card px-5 py-8 sm:px-8 lg:px-12 lg:py-12">
             <div
               aria-hidden="true"
-              className="absolute bottom-10 left-8 top-10 w-px bg-[#176b4a]/25 lg:hidden"
+              className="absolute bottom-10 left-8 top-10 w-px bg-growth/25 lg:hidden"
             />
             <svg
               aria-hidden="true"
               viewBox="0 0 1000 1500"
               preserveAspectRatio="none"
-              className="absolute inset-12 hidden h-[calc(100%_-_6rem)] w-[calc(100%_-_6rem)] text-[#176b4a]/20 lg:block"
+              className="absolute inset-12 hidden h-[calc(100%_-_6rem)] w-[calc(100%_-_6rem)] text-growth lg:block"
             >
               <path
                 d="M190 0 C 190 190, 790 130, 790 330 S 170 500, 190 700 S 810 850, 770 1050 S 180 1230, 220 1500"
@@ -646,25 +648,25 @@ export function DreamAtlasExplorer({
                   >
                     <span
                       aria-hidden="true"
-                      className={`absolute left-0 top-5 flex size-9 items-center justify-center rounded-full border-4 border-[#fffdf8] font-serif text-lg lg:-left-5 ${territory.color}`}
+                      className={`absolute left-0 top-5 flex size-9 items-center justify-center rounded-full border-4 border-border font-serif text-lg lg:-left-5 ${territory.color}`}
                     >
                       {territory.emoji}
                     </span>
                     <article className={`rounded-2xl p-5 sm:p-6 ${territory.color}`}>
                       <h3 className="font-serif text-3xl leading-tight">{territory.label}</h3>
-                      <p className="mt-3 text-sm leading-relaxed text-[#49433b]">
+                      <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
                         {territory.description}
                       </p>
                       <button
                         type="button"
                         onClick={() => setQuery(territory.prompts[0] ?? '')}
-                        className="group mt-5 flex min-h-11 w-full items-center justify-between gap-3 border-b border-[#211e18]/15 text-left text-sm font-semibold"
+                        className="group mt-5 flex min-h-11 w-full items-center justify-between gap-3 border-b border-border/15 text-left text-sm font-semibold"
                       >
                         <span>{territory.prompts[0]}</span>
                         <ArrowRight className="size-3.5 shrink-0 transition-transform group-hover:translate-x-1" />
                       </button>
                       <details className="group/more mt-1">
-                        <summary className="flex min-h-11 cursor-pointer list-none items-center text-sm font-bold text-[#211e18] marker:content-none">
+                        <summary className="flex min-h-11 cursor-pointer list-none items-center text-sm font-bold text-foreground marker:content-none">
                           Two more ways into this territory
                         </summary>
                         <div className="space-y-1">
@@ -673,7 +675,7 @@ export function DreamAtlasExplorer({
                               key={prompt}
                               type="button"
                               onClick={() => setQuery(prompt)}
-                              className="flex min-h-11 w-full items-center justify-between gap-3 border-b border-[#211e18]/15 text-left text-sm font-semibold"
+                              className="flex min-h-11 w-full items-center justify-between gap-3 border-b border-border/15 text-left text-sm font-semibold"
                             >
                               <span>{prompt}</span>
                               <ArrowRight className="size-3.5 shrink-0" />
@@ -690,7 +692,7 @@ export function DreamAtlasExplorer({
               <button
                 type="button"
                 onClick={() => setTerritoriesExpanded(true)}
-                className="relative mx-auto mt-8 flex min-h-11 items-center gap-2 rounded-xl bg-[#211e18] px-5 text-sm font-bold text-white"
+                className="relative mx-auto mt-8 flex min-h-11 items-center gap-2 rounded-xl bg-primary px-5 text-sm font-bold text-primary-foreground"
               >
                 Continue into three more territories <ArrowRight className="size-4" />
               </button>
diff --git a/src/components/hobby-roadmap-card.tsx b/src/components/hobby-roadmap-card.tsx
index 6a1c7da3..3c356231 100644
--- a/src/components/hobby-roadmap-card.tsx
+++ b/src/components/hobby-roadmap-card.tsx
@@ -79,7 +79,7 @@ export function HobbyRoadmapCard({ roadmap }: { roadmap: HobbyRoadmap }) {
   const allDone = doneCount === total;
 
   return (
-    <section className="overflow-hidden rounded-3xl bg-[#b9dcf5] p-6 text-[#211e18] sm:p-8">
+    <section className="overflow-hidden rounded-3xl bg-field-sky p-6 text-foreground sm:p-8">
       <div className="mb-6 flex flex-wrap items-end justify-between gap-4">
         <div>
           <p className="mb-2 text-xs font-bold uppercase tracking-[0.18em]">
@@ -88,12 +88,12 @@ export function HobbyRoadmapCard({ roadmap }: { roadmap: HobbyRoadmap }) {
           <h2 className="font-serif text-4xl font-medium leading-none sm:text-5xl">
             Your {roadmap.hobby.toLowerCase()} roadmap
           </h2>
-          <p className="mt-3 max-w-2xl text-sm text-[#454a4c] sm:text-base">
+          <p className="mt-3 max-w-2xl text-sm text-muted-foreground sm:text-base">
             A concrete path from today to three months in. Check off as you go — progress saves on
             this device.
           </p>
         </div>
-        <span className="rounded-full bg-white/65 px-4 py-2 text-sm font-bold">
+        <span className="rounded-full bg-card/65 px-4 py-2 text-sm font-bold">
           {hydrated ? `${doneCount}/${total} done` : `${total} steps`}
         </span>
       </div>
@@ -106,8 +106,8 @@ export function HobbyRoadmapCard({ roadmap }: { roadmap: HobbyRoadmap }) {
               <label
                 className={`flex min-h-40 cursor-pointer items-start gap-3 rounded-2xl border p-5 transition-all ${
                   isDone
-                    ? 'border-[#4e7654] bg-[#b5d98f]'
-                    : 'border-white/80 bg-white/80 hover:-translate-y-0.5 hover:bg-white'
+                    ? 'border-field-green-ink bg-field-green'
+                    : 'border-foreground/80 bg-card/80 hover:-translate-y-0.5 hover:bg-card'
                 }`}
               >
                 <input
@@ -139,14 +139,14 @@ export function HobbyRoadmapCard({ roadmap }: { roadmap: HobbyRoadmap }) {
         })}
       </ol>
 
-      <div className="mt-6 rounded-2xl bg-white/65 p-5">
+      <div className="mt-6 rounded-2xl bg-card/65 p-5">
         <label className="text-sm font-bold">What are you noticing?</label>
         <textarea
           value={progress.notes}
           onChange={(e) => updateNotes(e.target.value)}
           rows={3}
           placeholder="What worked, what didn't, what to try next…"
-          className="mt-2 w-full resize-none rounded-xl border border-[#a4b9c8] bg-white px-4 py-3 text-sm outline-none focus:border-[#211e18]"
+          className="mt-2 w-full resize-none rounded-xl border border-field-sky-ink bg-card px-4 py-3 text-sm outline-none focus:border-border"
         />
         {hydrated && progress.updatedAt && (
           <p className="mt-1 text-[11px] text-subtle">
@@ -158,7 +158,7 @@ export function HobbyRoadmapCard({ roadmap }: { roadmap: HobbyRoadmap }) {
       <div className="mt-5 flex flex-wrap items-center gap-3">
         <Link
           href="/timeline/new"
-          className="rounded-xl bg-[#211e18] px-5 py-3 text-sm font-bold text-white transition-transform hover:-translate-y-0.5"
+          className="rounded-xl bg-primary px-5 py-3 text-sm font-bold text-primary-foreground transition-transform hover:-translate-y-0.5"
         >
           {allDone ? 'Log it in a timeline →' : 'Track this in a timeline →'}
         </Link>
diff --git a/src/components/journal-archive.tsx b/src/components/journal-archive.tsx
index 503426ff..5a23cb4c 100644
--- a/src/components/journal-archive.tsx
+++ b/src/components/journal-archive.tsx
@@ -41,11 +41,11 @@ export function JournalArchive({ records }: { records: JournalRecord[] }) {
     <section
       id="journal-history"
       aria-labelledby="journal-history-title"
-      className="scroll-mt-24 overflow-hidden rounded-[1.5rem] bg-white shadow-[0_12px_36px_rgba(66,55,22,0.10)]"
+      className="scroll-mt-24 overflow-hidden rounded-2xl bg-card shadow-[0_12px_36px_color-mix(in_srgb,var(--scrim)_10%,transparent)]"
     >
-      <div className="border-b border-[#e8dfd1] bg-[#ffd0bd] p-5 sm:p-7">
+      <div className="border-b border-border bg-field-coral p-5 sm:p-7">
         <BookOpen className="size-6" />
-        <p className="mt-5 text-sm font-bold text-[#713f2d]">Before the weekly log</p>
+        <p className="mt-5 text-sm font-bold text-field-coral-ink">Before the weekly log</p>
         <div className="mt-1 flex items-end justify-between gap-4">
           <h2 id="journal-history-title" className="font-serif text-3xl sm:text-4xl">
             Earlier daily entries
@@ -57,17 +57,17 @@ export function JournalArchive({ records }: { records: JournalRecord[] }) {
       </div>
 
       {writtenEntries.length ? (
-        <div className="divide-y divide-[#e8dfd1] px-5 sm:px-7">
+        <div className="divide-y divide-border px-5 sm:px-7">
           {writtenEntries.map((entry, index) => (
             <details key={entry.dayDate} open={index === 0} className="group py-1">
               <summary className="flex min-h-14 cursor-pointer list-none items-center justify-between gap-4 py-3 font-serif text-xl marker:content-none">
                 {formatJournalDay(entry.dayDate)}
                 <ChevronDown className="size-4 shrink-0 transition-transform group-open:rotate-180" />
               </summary>
-              <div className="space-y-5 pb-6 text-base leading-7 text-[#514b42]">
+              <div className="space-y-5 pb-6 text-base leading-7 text-muted-foreground">
                 {entry.amEntry?.trim() ? (
                   <div>
-                    <p className="text-xs font-bold uppercase tracking-[0.14em] text-[#176b4a]">
+                    <p className="text-xs font-bold uppercase tracking-[0.14em] text-growth">
                       Morning
                     </p>
                     <p className="mt-2 whitespace-pre-wrap">{entry.amEntry}</p>
@@ -75,7 +75,7 @@ export function JournalArchive({ records }: { records: JournalRecord[] }) {
                 ) : null}
                 {entry.pmEntry?.trim() ? (
                   <div>
-                    <p className="text-xs font-bold uppercase tracking-[0.14em] text-[#7658ad]">
+                    <p className="text-xs font-bold uppercase tracking-[0.14em] text-field-lilac-ink">
                       Evening
                     </p>
                     <p className="mt-2 whitespace-pre-wrap">{entry.pmEntry}</p>
diff --git a/src/components/life-atlas/history-atlas.tsx b/src/components/life-atlas/history-atlas.tsx
index fe9baab1..855bbd90 100644
--- a/src/components/life-atlas/history-atlas.tsx
+++ b/src/components/life-atlas/history-atlas.tsx
@@ -25,21 +25,21 @@ export function HistoryAtlas({
     cadence: 'monthly' as const,
   };
   return (
-    <section className="overflow-hidden rounded-[1.75rem] bg-white shadow-[0_18px_50px_rgba(66,55,22,0.10)]">
+    <section className="overflow-hidden rounded-2xl bg-card shadow-[0_18px_50px_color-mix(in_srgb,var(--scrim)_10%,transparent)]">
       <div className="grid lg:grid-cols-[23rem_1fr]">
-        <div className="border-b border-[#cdbd36] bg-[#f7e957] p-7 text-[#201f18] sm:p-10 lg:border-b-0 lg:border-r">
+        <div className="border-b border-brand bg-field-sun p-7 text-foreground sm:p-10 lg:border-b-0 lg:border-r">
           <p className="text-base font-bold">History</p>
           <h1 className="mt-5 font-serif text-5xl font-medium leading-[1.02] tracking-[-0.03em]">
             Your life so far
           </h1>
-          <p className="mt-5 text-base leading-relaxed text-[#4b493d]">
+          <p className="mt-5 text-base leading-relaxed text-muted-foreground">
             The weeks are finite. The record is not a score—it is evidence that you were here.
           </p>
           <div className="mt-7 flex items-baseline gap-2">
             <span className="font-serif text-5xl tabular-nums">
               {life.weeksRemaining.toLocaleString()}
             </span>
-            <span className="text-base text-[#4b493d]">
+            <span className="text-base text-muted-foreground">
               {birthDate || birthYear ? 'weeks remain, roughly' : 'weeks, roughly'}
             </span>
           </div>
@@ -51,7 +51,7 @@ export function HistoryAtlas({
             Open the full life grid →
           </Link>
         </div>
-        <div className="bg-[#b9dcf5] p-6 text-[#192a36] sm:p-10">
+        <div className="bg-field-sky p-6 text-foreground sm:p-10">
           <div className="flex items-start justify-between gap-4">
             <div>
               <p className="text-base font-bold">Direction</p>
@@ -67,7 +67,7 @@ export function HistoryAtlas({
             </Link>
           </div>
           {!trajectory && (
-            <p className="mt-6 max-w-lg text-base leading-relaxed text-[#344b5a]">
+            <p className="mt-6 max-w-lg text-base leading-relaxed text-muted-foreground">
               Trajectory connects the constraints and intent of the present to a decision policy and
               feedback loop for what comes next.
             </p>
@@ -77,10 +77,10 @@ export function HistoryAtlas({
           </div>
         </div>
       </div>
-      <div className="grid border-t border-[#e4dccb] bg-[#fffdf8] sm:grid-cols-2">
+      <div className="grid border-t border-border bg-card sm:grid-cols-2">
         <Link
           href="/history#personal-timeline"
-          className="p-6 transition-colors hover:bg-[#ffd0bd] sm:p-8"
+          className="p-6 transition-colors hover:bg-field-coral sm:p-8"
         >
           <p className="text-sm font-bold">Personal timeline</p>
           <h3 className="mt-2 font-serif text-3xl">The chapters you have lived</h3>
@@ -90,7 +90,7 @@ export function HistoryAtlas({
         </Link>
         <Link
           href="/journal#journal-history"
-          className="border-t border-[#e4dccb] p-6 transition-colors hover:bg-[#dceabf] sm:border-l sm:border-t-0 sm:p-8"
+          className="border-t border-border p-6 transition-colors hover:bg-field-green sm:border-l sm:border-t-0 sm:p-8"
         >
           <p className="text-sm font-bold">Journal history</p>
           <h3 className="mt-2 font-serif text-3xl">The days in your own words</h3>
@@ -113,7 +113,7 @@ function LifeWeekField({ cells }: { cells: Array<{ weekIndex: number; lived: boo
       {cells.map((cell) => (
         <span
           key={cell.weekIndex}
-          className={`aspect-square min-w-px ${cell.lived ? 'bg-[#201f18]/70' : 'bg-[#201f18]/15'}`}
+          className={`aspect-square min-w-px ${cell.lived ? 'bg-surface/70' : 'bg-surface/15'}`}
           aria-hidden="true"
         />
       ))}
diff --git a/src/components/life-grid.tsx b/src/components/life-grid.tsx
index e848a517..fe674c5f 100644
--- a/src/components/life-grid.tsx
+++ b/src/components/life-grid.tsx
@@ -27,7 +27,7 @@ export function LifeGrid({ grid }: Props) {
         aria-hidden="true"
         style={{
           background:
-            'radial-gradient(ellipse 60% 50% at 70% 40%, oklch(0.82 0.13 88 / 0.06), transparent 70%)',
+            'radial-gradient(ellipse 60% 50% at 70% 40%, color-mix(in srgb, var(--brand) 6%, transparent), transparent 70%)',
         }}
       />
 
diff --git a/src/components/local-live-more.tsx b/src/components/local-live-more.tsx
index 5a9c2b94..9ae41ee0 100644
--- a/src/components/local-live-more.tsx
+++ b/src/components/local-live-more.tsx
@@ -41,7 +41,7 @@ export function LocalLiveMore({ entries }: { entries: DreamAtlasEntry[] }) {
   );
   return (
     <StorageModeProvider mode="local">
-      <div className="bg-[#fbf8ef] px-4 py-8 text-[#211e18] sm:py-12">
+      <div className="bg-background px-4 py-8 text-foreground sm:py-12">
         <div className="mx-auto max-w-6xl space-y-10 sm:space-y-14">
           <div className="flex justify-end">
             <StorageModeStatus />
diff --git a/src/components/local-look-back.tsx b/src/components/local-look-back.tsx
index 0636f4e4..c4c0e7ec 100644
--- a/src/components/local-look-back.tsx
+++ b/src/components/local-look-back.tsx
@@ -101,11 +101,11 @@ export function LocalLookBack({ today }: { today: string }) {
         <HistoryAtlas birthYear={birthYear} birthDate={birthDate} trajectory={trajectory} />
         <section
           id="personal-timeline"
-          className="scroll-mt-24 rounded-[1.75rem] border border-[#d9cfbd] bg-white p-5 sm:p-8"
+          className="scroll-mt-24 rounded-2xl border border-border bg-card p-5 sm:p-8"
         >
           <div className="mb-6 flex items-end justify-between gap-4">
             <div>
-              <p className="text-sm font-bold text-[#176b4a]">Personal timeline</p>
+              <p className="text-sm font-bold text-growth">Personal timeline</p>
               <h2 className="mt-1 font-serif text-3xl">The chapters that shaped you</h2>
             </div>
           </div>
@@ -123,15 +123,15 @@ export function LocalLookBack({ today }: { today: string }) {
               key={section.id}
               className={`rounded-2xl px-6 py-8 sm:px-10 sm:py-10 ${
                 index % 3 === 0
-                  ? 'bg-[#ffd0bd]'
+                  ? 'bg-field-coral'
                   : index % 3 === 1
-                    ? 'bg-[#d8c8fa]'
-                    : 'bg-white shadow-[0_10px_30px_rgba(66,55,22,0.08)]'
+                    ? 'bg-field-lilac'
+                    : 'bg-card shadow-[0_10px_30px_color-mix(in_srgb,var(--scrim)_8%,transparent)]'
               }`}
             >
               <h2 className="font-serif text-3xl font-medium">{section.title}</h2>
               {section.paragraphs.map((paragraph) => (
-                <p key={paragraph} className="mt-4 text-base leading-7 text-foreground/75">
+                <p key={paragraph} className="mt-4 text-base leading-7 text-muted-foreground">
                   {paragraph}
                 </p>
               ))}
diff --git a/src/components/local-onboarding-gate.tsx b/src/components/local-onboarding-gate.tsx
index d57fe814..ea19c26c 100644
--- a/src/components/local-onboarding-gate.tsx
+++ b/src/components/local-onboarding-gate.tsx
@@ -38,7 +38,7 @@ export function LocalOnboardingGate({ children }: { children: React.ReactNode })
 
   if (!complete) {
     return (
-      <div className="grid min-h-[60vh] place-items-center bg-[#fbf8ef] px-4">
+      <div className="grid min-h-[60vh] place-items-center bg-background px-4">
         <p className="text-sm text-muted-foreground" role="status">
           {complete === null ? 'Opening your workspace…' : 'Starting with you…'}
         </p>
diff --git a/src/components/mobile-menu.tsx b/src/components/mobile-menu.tsx
index 777e1a86..dac2d60e 100644
--- a/src/components/mobile-menu.tsx
+++ b/src/components/mobile-menu.tsx
@@ -28,7 +28,7 @@ export function MobileMenu({ links, isLoggedIn }: MobileMenuProps) {
       <button
         type="button"
         onClick={() => setOpen(!open)}
-        className="flex h-11 w-11 items-center justify-center rounded-xl bg-[#f7e957] text-[#201f18] shadow-[0_3px_0_#c8b92e] transition-transform hover:-translate-y-0.5"
+        className="flex h-11 w-11 items-center justify-center rounded-xl bg-brand text-brand-foreground shadow-[0_3px_0_var(--border)] transition-transform hover:-translate-y-0.5"
         aria-label={open ? 'Close menu' : 'Open menu'}
         aria-expanded={open}
         aria-controls="mobile-site-menu"
@@ -39,19 +39,19 @@ export function MobileMenu({ links, isLoggedIn }: MobileMenuProps) {
       {open && (
         <div
           id="mobile-site-menu"
-          className="absolute left-0 top-[4.5rem] z-50 w-full border-b border-[#ddd4b7] bg-[#fffdf3] shadow-[0_16px_32px_rgba(66,55,22,0.14)]"
+          className="absolute left-0 top-[4.5rem] z-50 w-full border-b border-border bg-card shadow-[0_16px_32px_color-mix(in_srgb,var(--scrim)_14%,transparent)]"
         >
           <div className="flex flex-col gap-2 px-4 py-4">
             {links.map((link) => {
               const isActive = pathname === link.href;
               const colorClass =
                 link.href === '/'
-                  ? 'bg-[#fffdf8] text-[#201f18] border border-[#ddd4b7]'
+                  ? 'bg-card text-foreground border border-border'
                   : link.href === '/experiences' || link.href === '/bucket-list'
-                    ? 'bg-[#f7e957] text-[#201f18]'
+                    ? 'bg-field-sun text-foreground'
                     : link.href === '/journal'
-                      ? 'bg-[#c5abfa] text-[#241a31]'
-                      : 'bg-[#b9dcf5] text-[#192a36]';
+                      ? 'bg-field-lilac text-foreground'
+                      : 'bg-field-sky text-foreground';
               return (
                 <Link
                   key={link.href}
@@ -72,7 +72,7 @@ export function MobileMenu({ links, isLoggedIn }: MobileMenuProps) {
                 href="/settings"
                 prefetch={false}
                 onClick={() => setOpen(false)}
-                className="flex min-h-12 items-center justify-center rounded-xl bg-[#201f18] px-4 text-center text-base font-bold text-white transition-colors hover:bg-[#36342a]"
+                className="flex min-h-12 items-center justify-center rounded-xl bg-primary px-4 text-center text-base font-bold text-primary-foreground transition-colors hover:bg-primary/90"
               >
                 Account settings
               </Link>
@@ -81,7 +81,7 @@ export function MobileMenu({ links, isLoggedIn }: MobileMenuProps) {
                 href="/login"
                 prefetch={false}
                 onClick={() => setOpen(false)}
-                className="flex min-h-12 items-center justify-center rounded-xl bg-[#201f18] px-4 text-center text-base font-bold text-white transition-colors hover:bg-[#36342a]"
+                className="flex min-h-12 items-center justify-center rounded-xl bg-primary px-4 text-center text-base font-bold text-primary-foreground transition-colors hover:bg-primary/90"
               >
                 Sign in
               </Link>
diff --git a/src/components/nav-links.tsx b/src/components/nav-links.tsx
index dc8d8123..40ad5cdc 100644
--- a/src/components/nav-links.tsx
+++ b/src/components/nav-links.tsx
@@ -16,17 +16,17 @@ export function NavLinks({ links }: NavLinksProps) {
         const isActive = pathname === link.href || pathname.startsWith(`${link.href}/`);
         const activeClass =
           link.href === '/bucket-list' || link.href === '/experiences'
-            ? 'bg-[#f7e957] text-[#201f18] shadow-[0_2px_0_#c8b92e]'
+            ? 'bg-field-sun text-foreground shadow-[0_2px_0_var(--border)]'
             : link.href === '/journal'
-              ? 'bg-[#c5abfa] text-[#241a31] shadow-[0_2px_0_#9d82d5]'
-              : 'bg-[#b9dcf5] text-[#192a36] shadow-[0_2px_0_#8db9d7]';
+              ? 'bg-field-lilac text-foreground shadow-[0_2px_0_var(--border)]'
+              : 'bg-field-sky text-foreground shadow-[0_2px_0_var(--border)]';
         return (
           <Link
             key={link.href}
             href={link.href}
             aria-current={isActive ? 'page' : undefined}
             className={`inline-flex min-h-11 items-center rounded-xl px-4 text-base font-semibold transition-[background-color,color,transform,box-shadow] hover:-translate-y-px focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
-              isActive ? activeClass : 'text-[#575344] hover:bg-[#f4efe0] hover:text-[#201f18]'
+              isActive ? activeClass : 'text-muted-foreground hover:bg-muted hover:text-foreground'
             }`}
           >
             {link.label}
diff --git a/src/components/nav.tsx b/src/components/nav.tsx
index 756fcbf3..c98947cb 100644
--- a/src/components/nav.tsx
+++ b/src/components/nav.tsx
@@ -29,7 +29,7 @@ export async function Nav() {
   return (
     <nav
       data-site-nav
-      className="sticky top-0 z-50 border-b border-[#ddd4b7] bg-[#fffdf3]/95 shadow-[0_3px_18px_rgba(66,55,22,0.06)] backdrop-blur-md"
+      className="sticky top-0 z-50 border-b border-border bg-card/95 shadow-[0_3px_18px_color-mix(in_srgb,var(--scrim)_6%,transparent)] backdrop-blur-md"
     >
       <div className="mx-auto flex h-[4.5rem] max-w-6xl items-center justify-between px-4">
         <Link
@@ -39,7 +39,7 @@ export async function Nav() {
         >
           <span
             aria-hidden="true"
-            className="flex size-10 items-center justify-center rounded-xl bg-[#f7e957] font-serif text-lg font-bold tracking-[-0.04em] text-[#201f18] shadow-[0_3px_0_#c8b92e] transition-transform group-hover:-rotate-3 group-hover:-translate-y-0.5"
+            className="flex size-10 items-center justify-center rounded-xl bg-brand font-serif text-lg font-bold tracking-[-0.04em] text-brand-foreground shadow-[0_3px_0_var(--border)] transition-transform group-hover:-rotate-3 group-hover:-translate-y-0.5"
           >
             SH
           </span>
@@ -57,7 +57,7 @@ export async function Nav() {
             caught by the content-flywheel overflow check on /blog. Labels and
             order are unchanged; only the switch point moves. */}
         <div className="hidden items-center gap-3 lg:flex">
-          <div className="flex items-center gap-1 rounded-2xl border border-[#e6dec5] bg-white p-1 shadow-[0_2px_8px_rgba(66,55,22,0.05)]">
+          <div className="flex items-center gap-1 rounded-2xl border border-border bg-card p-1 shadow-[0_2px_8px_color-mix(in_srgb,var(--scrim)_5%,transparent)]">
             <NavLinks links={links} />
           </div>
 
@@ -68,7 +68,7 @@ export async function Nav() {
                   aria-label="Open account menu"
                   className="flex size-11 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-foreground/30"
                 >
-                  <Avatar className="h-10 w-10 border-2 border-white shadow-[0_2px_8px_rgba(66,55,22,0.14)]">
+                  <Avatar className="h-10 w-10 border-2 border-foreground shadow-[0_2px_8px_color-mix(in_srgb,var(--scrim)_14%,transparent)]">
                     <AvatarImage src={session.user.image ?? ''} />
                     <AvatarFallback className="bg-foreground/10 text-foreground text-sm">
                       {session.user.name?.[0] ?? 'U'}
@@ -102,7 +102,7 @@ export async function Nav() {
           ) : (
             <Button
               asChild
-              className="h-11 rounded-xl bg-[#201f18] px-5 text-white hover:bg-[#36342a]"
+              className="h-11 rounded-xl bg-primary px-5 text-primary-foreground hover:bg-primary/90"
             >
               <Link href="/login" prefetch={false}>
                 Sign in
@@ -120,7 +120,7 @@ export async function Nav() {
                   aria-label="Open account menu"
                   className="flex size-11 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-foreground/30"
                 >
-                  <Avatar className="h-10 w-10 border-2 border-white shadow-[0_2px_8px_rgba(66,55,22,0.14)]">
+                  <Avatar className="h-10 w-10 border-2 border-foreground shadow-[0_2px_8px_color-mix(in_srgb,var(--scrim)_14%,transparent)]">
                     <AvatarImage src={session.user.image ?? ''} />
                     <AvatarFallback className="bg-foreground/10 text-foreground text-sm">
                       {session.user.name?.[0] ?? 'U'}
diff --git a/src/components/public-landing.tsx b/src/components/public-landing.tsx
index 5611e3d0..62d61d24 100644
--- a/src/components/public-landing.tsx
+++ b/src/components/public-landing.tsx
@@ -71,7 +71,7 @@ const questions = [
 
 export function PublicLandingShell() {
   return (
-    <div className={`${archivo.className} public-landing bg-[#0b1320]`}>
+    <div className={`${archivo.className} public-landing bg-surface`}>
       <section className="landing-cinematic-hero">
         <div className="landing-cinematic-hero__scrim" aria-hidden="true" />
         <div className="landing-cinematic-hero__inner">
@@ -100,7 +100,7 @@ export function PublicLanding() {
   const [videoReady, setVideoReady] = useState(false);
 
   return (
-    <div className={`${archivo.className} public-landing bg-[#fff8d6] text-[#2b261d]`}>
+    <div className={`${archivo.className} public-landing bg-field-sun text-foreground`}>
       <section className="landing-cinematic-hero">
         <video
           className={`landing-cinematic-hero__video ${videoReady ? 'is-ready' : ''}`}
@@ -143,7 +143,7 @@ export function PublicLanding() {
         <div className="mx-auto max-w-6xl">
           <div className="grid gap-10 lg:grid-cols-[0.78fr_1.22fr] lg:items-end lg:gap-20">
             <div>
-              <p className="mb-5 text-base font-semibold text-[#795416]">
+              <p className="mb-5 text-base font-semibold text-brand">
                 A record of what made you, you.
               </p>
               <h2 className="max-w-xl text-4xl font-semibold leading-[1.02] tracking-[-0.035em] sm:text-5xl lg:text-6xl">
@@ -151,7 +151,7 @@ export function PublicLanding() {
               </h2>
             </div>
             <div className="max-w-2xl">
-              <p className="text-lg leading-relaxed text-[#554c3f] sm:text-xl">
+              <p className="text-lg leading-relaxed text-muted-foreground sm:text-xl">
                 Put every hobby you remember on one timeline. The abandoned experiments, lifelong
                 obsessions, and quiet returns become a map of the life you have lived.
               </p>
@@ -159,11 +159,11 @@ export function PublicLanding() {
             </div>
           </div>
 
-          <ol className="mt-16 grid list-none border-y border-[#c9bfa8] sm:grid-cols-2 lg:mt-20 lg:grid-cols-4">
+          <ol className="mt-16 grid list-none border-y border-border sm:grid-cols-2 lg:mt-20 lg:grid-cols-4">
             {phases.map(([label, image, hobbies], index) => (
               <li
                 key={label}
-                className="group py-6 sm:[&:nth-child(odd)]:border-r sm:[&:nth-child(odd)]:border-[#c9bfa8] lg:border-r lg:border-[#c9bfa8] lg:last:border-r-0"
+                className="group py-6 sm:[&:nth-child(odd)]:border-r sm:[&:nth-child(odd)]:border-border lg:border-r lg:border-border lg:last:border-r-0"
               >
                 <div className="relative mx-4 aspect-[4/3] overflow-hidden sm:mx-6">
                   <img
@@ -174,14 +174,14 @@ export function PublicLanding() {
                     height={600}
                     className="size-full object-cover transition-transform duration-700 group-hover:scale-[1.03]"
                   />
-                  <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent" />
-                  <span className="absolute bottom-3 right-3 text-xs font-bold text-[#fff1a8]">
+                  <div className="absolute inset-0 bg-gradient-to-t from-scrim/70 to-transparent" />
+                  <span className="absolute bottom-3 right-3 text-xs font-bold text-brand">
                     0{index + 1}
                   </span>
                 </div>
                 <div className="px-4 pt-5 sm:px-6">
                   <h3 className="text-lg font-bold">{label}</h3>
-                  <p className="mt-2 text-sm leading-relaxed text-[#62594c]">{hobbies}</p>
+                  <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{hobbies}</p>
                 </div>
               </li>
             ))}
@@ -189,14 +189,14 @@ export function PublicLanding() {
         </div>
       </section>
 
-      <section className="border-y border-[#c9bfa8] bg-[#ffd0bd] px-6 py-24 lg:px-12 lg:py-32">
+      <section className="border-y border-border bg-field-coral px-6 py-24 lg:px-12 lg:py-32">
         <div className="mx-auto max-w-6xl">
           <div className="grid gap-8 lg:grid-cols-[1fr_auto] lg:items-end">
             <div className="max-w-3xl">
               <h2 className="text-4xl font-semibold leading-[1.02] tracking-[-0.035em] sm:text-5xl lg:text-6xl">
                 What will you do before you die?
               </h2>
-              <p className="mt-5 max-w-2xl text-lg leading-relaxed text-[#554c3f]">
+              <p className="mt-5 max-w-2xl text-lg leading-relaxed text-muted-foreground">
                 Remarkable people wrote theirs down. Borrow an idea, reject the obvious, then make a
                 list that could only belong to you.
               </p>
@@ -204,12 +204,12 @@ export function PublicLanding() {
             <TextLink href="/bucket-lists">Browse every list</TextLink>
           </div>
 
-          <div className="mt-14 grid gap-px overflow-hidden bg-[#b6aa95] sm:grid-cols-3">
+          <div className="mt-14 grid gap-px overflow-hidden bg-muted sm:grid-cols-3">
             {famousLists.map(([name, slug, image, preview]) => (
               <Link
                 key={slug}
                 href={`/bucket-lists/${slug}`}
-                className="group relative block min-h-[28rem] overflow-hidden bg-[#211e18] sm:min-h-[32rem]"
+                className="group relative block min-h-[28rem] overflow-hidden bg-surface sm:min-h-[32rem]"
               >
                 <img
                   src={image}
@@ -219,9 +219,9 @@ export function PublicLanding() {
                   height={1000}
                   className="absolute inset-0 size-full object-cover transition-transform duration-700 group-hover:scale-[1.03]"
                 />
-                <div className="absolute inset-0 bg-gradient-to-t from-black via-black/35 to-transparent" />
-                <div className="absolute inset-x-0 bottom-0 p-6 text-white sm:p-8">
-                  <p className="text-sm font-semibold text-[#fff1a8]">{name}</p>
+                <div className="absolute inset-0 bg-gradient-to-t from-scrim via-scrim/35 to-transparent" />
+                <div className="absolute inset-x-0 bottom-0 p-6 text-foreground sm:p-8">
+                  <p className="text-sm font-semibold text-brand">{name}</p>
                   <h3 className="mt-3 max-w-[18ch] text-2xl font-semibold leading-tight sm:text-3xl">
                     “{preview}”
                   </h3>
@@ -235,30 +235,34 @@ export function PublicLanding() {
         </div>
       </section>
 
-      <section className="bg-[#c5abfa] px-6 py-24 lg:px-12 lg:py-32">
+      <section className="bg-field-lilac px-6 py-24 lg:px-12 lg:py-32">
         <div className="mx-auto grid max-w-6xl gap-12 lg:grid-cols-[0.8fr_1.2fr] lg:gap-20">
           <div>
-            <p className="mb-5 font-semibold text-[#4b306b]">A life, assembled in three moves.</p>
+            <p className="mb-5 font-semibold text-field-lilac-ink">
+              A life, assembled in three moves.
+            </p>
             <h2 className="text-4xl font-semibold leading-[1.04] tracking-[-0.035em] sm:text-5xl">
               Onboarding should feel like remembering, not paperwork.
             </h2>
             <Link
               href="/onboarding"
-              className="mt-8 inline-flex min-h-12 items-center gap-2 rounded-xl bg-[#281f31] px-6 text-sm font-bold text-white transition-transform hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white"
+              className="mt-8 inline-flex min-h-12 items-center gap-2 rounded-xl bg-primary px-6 text-sm font-bold text-primary-foreground transition-transform hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground"
             >
               Begin onboarding <span aria-hidden="true">→</span>
             </Link>
           </div>
-          <ol className="list-none border-t border-[#8f78bd]">
+          <ol className="list-none border-t border-field-lilac-ink">
             {onboardingSteps.map(([number, title, description, detail]) => (
               <li
                 key={number}
-                className="grid gap-4 border-b border-[#8f78bd] py-8 sm:grid-cols-[3.5rem_1fr_auto] sm:gap-7 sm:py-9"
+                className="grid gap-4 border-b border-field-lilac-ink py-8 sm:grid-cols-[3.5rem_1fr_auto] sm:gap-7 sm:py-9"
               >
-                <span className="text-xl font-bold text-[#4b306b]">{number}</span>
+                <span className="text-xl font-bold text-field-lilac-ink">{number}</span>
                 <div>
                   <h3 className="text-xl font-bold sm:text-2xl">{title}</h3>
-                  <p className="mt-3 max-w-xl leading-relaxed text-[#44375c]">{description}</p>
+                  <p className="mt-3 max-w-xl leading-relaxed text-muted-foreground">
+                    {description}
+                  </p>
                 </div>
                 <p className="self-center text-sm font-bold sm:max-w-28 sm:text-right">{detail}</p>
               </li>
@@ -267,11 +271,11 @@ export function PublicLanding() {
         </div>
       </section>
 
-      <section className="border-y border-[#9fb8c8] bg-[#b9dcf5] px-6 py-24 lg:px-12 lg:py-32">
+      <section className="border-y border-field-sky-ink bg-field-sky px-6 py-24 lg:px-12 lg:py-32">
         <div className="mx-auto max-w-6xl">
           <div className="mb-12 flex flex-col items-start justify-between gap-6 sm:flex-row sm:items-end">
             <div className="max-w-2xl">
-              <p className="mb-4 font-semibold text-[#315d77]">Lives shaped by curiosity</p>
+              <p className="mb-4 font-semibold text-field-sky-ink">Lives shaped by curiosity</p>
               <h2 className="text-4xl font-semibold tracking-[-0.035em] sm:text-5xl">
                 One interest rarely tells the whole story.
               </h2>
@@ -286,7 +290,7 @@ export function PublicLanding() {
               title="From calligraphy to Apple"
               hobbies="Electronics · Calligraphy · Yoga · Meditation · Walking · Reading"
             />
-            <div className="border-t border-[#8eb0c5]">
+            <div className="border-t border-field-sky-ink">
               <JourneyRow
                 href="/u/alberteinstein"
                 image="/categories/music-800.webp"
@@ -306,19 +310,19 @@ export function PublicLanding() {
         </div>
       </section>
 
-      <section className="bg-[#dceabf] px-6 py-24 lg:px-12 lg:py-32">
+      <section className="bg-field-green px-6 py-24 lg:px-12 lg:py-32">
         <div className="mx-auto grid max-w-6xl gap-12 lg:grid-cols-[0.72fr_1.28fr] lg:gap-20">
           <div>
             <h2 className="text-4xl font-semibold tracking-[-0.035em] sm:text-5xl">
               Questions, answered.
             </h2>
-            <p className="mt-5 max-w-sm leading-relaxed text-[#4d5c3e]">
+            <p className="mt-5 max-w-sm leading-relaxed text-muted-foreground">
               Start without an account, keep control of what is public, and make the map your own.
             </p>
           </div>
-          <div className="border-t border-[#9cab82]">
+          <div className="border-t border-field-green-ink">
             {questions.map(([question, answer]) => (
-              <details key={question} className="group border-b border-[#9cab82]">
+              <details key={question} className="group border-b border-field-green-ink">
                 <summary className="flex min-h-20 cursor-pointer list-none items-center justify-between gap-5 py-5 text-left">
                   <h3 className="text-lg font-bold sm:text-xl">{question}</h3>
                   <span
@@ -328,7 +332,7 @@ export function PublicLanding() {
                     +
                   </span>
                 </summary>
-                <p className="max-w-2xl pb-7 pr-14 text-[15px] leading-relaxed text-[#4d5c3e]">
+                <p className="max-w-2xl pb-7 pr-14 text-[15px] leading-relaxed text-muted-foreground">
                   {answer}
                 </p>
               </details>
@@ -346,15 +350,15 @@ export function PublicLanding() {
           height={720}
           className="absolute inset-0 size-full object-cover"
         />
-        <div className="absolute inset-0 bg-gradient-to-r from-[#090f1a] via-[#090f1a]/75 to-[#090f1a]/30" />
+        <div className="absolute inset-0 bg-gradient-to-r from-scrim via-scrim/75 to-scrim/30" />
         <div className="relative mx-auto w-full max-w-6xl">
-          <p className="mb-5 font-semibold text-[#fff1a8]">The rest is still unwritten.</p>
-          <h2 className="max-w-4xl text-5xl font-semibold leading-[0.98] tracking-[-0.035em] text-white sm:text-6xl lg:text-7xl">
+          <p className="mb-5 font-semibold text-brand">The rest is still unwritten.</p>
+          <h2 className="max-w-4xl text-5xl font-semibold leading-[0.98] tracking-[-0.035em] text-foreground sm:text-6xl lg:text-7xl">
             The next chapter needs something worth remembering.
           </h2>
           <Link
             href="/onboarding"
-            className="mt-9 inline-flex min-h-13 items-center gap-3 rounded-xl bg-[#ffe45c] px-7 text-sm font-bold text-[#1d1a14] transition-colors hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white"
+            className="mt-9 inline-flex min-h-13 items-center gap-3 rounded-xl bg-brand px-7 text-sm font-bold text-brand-foreground transition-colors hover:bg-brand/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground"
           >
             Begin your story <span aria-hidden="true">→</span>
           </Link>
@@ -368,7 +372,7 @@ function TextLink({ href, children }: { href: string; children: React.ReactNode
   return (
     <Link
       href={href}
-      className="mt-7 inline-flex min-h-11 items-center gap-2 border-b border-[#795416] pb-1 text-sm font-bold text-[#5f4212] transition-colors hover:text-[#211e18] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#795416]"
+      className="mt-7 inline-flex min-h-11 items-center gap-2 border-b border-brand pb-1 text-sm font-bold text-brand transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand"
     >
       {children} <span aria-hidden="true">→</span>
     </Link>
@@ -401,11 +405,11 @@ function JourneyFeature({
         height={800}
         className="absolute inset-0 size-full object-cover transition-transform duration-700 group-hover:scale-[1.025]"
       />
-      <div className="absolute inset-0 bg-gradient-to-t from-black via-black/35 to-transparent" />
-      <div className="absolute inset-x-0 bottom-0 max-w-2xl p-7 text-white sm:p-10">
-        <p className="text-sm font-semibold text-[#fff1a8]">{person}</p>
+      <div className="absolute inset-0 bg-gradient-to-t from-scrim via-scrim/35 to-transparent" />
+      <div className="absolute inset-x-0 bottom-0 max-w-2xl p-7 text-foreground sm:p-10">
+        <p className="text-sm font-semibold text-brand">{person}</p>
         <h3 className="mt-3 text-3xl font-semibold leading-tight sm:text-5xl">{title}</h3>
-        <p className="mt-4 text-sm leading-relaxed text-white/80 sm:text-base">{hobbies}</p>
+        <p className="mt-4 text-sm leading-relaxed text-muted-foreground sm:text-base">{hobbies}</p>
         <span className="mt-7 inline-flex min-h-11 items-center text-sm font-bold">
           See the full journey <span className="ml-2 group-hover:translate-x-1">→</span>
         </span>
@@ -430,7 +434,7 @@ function JourneyRow({
   return (
     <Link
       href={href}
-      className="group grid grid-cols-[5.5rem_1fr] gap-5 border-b border-[#8eb0c5] py-7 sm:grid-cols-[7rem_1fr] sm:py-9"
+      className="group grid grid-cols-[5.5rem_1fr] gap-5 border-b border-field-sky-ink py-7 sm:grid-cols-[7rem_1fr] sm:py-9"
     >
       <div className="aspect-square overflow-hidden">
         <img
@@ -443,9 +447,9 @@ function JourneyRow({
         />
       </div>
       <div className="self-center">
-        <p className="text-sm font-semibold text-[#315d77]">{person}</p>
+        <p className="text-sm font-semibold text-field-sky-ink">{person}</p>
         <h3 className="mt-2 text-xl font-bold leading-tight sm:text-2xl">{title}</h3>
-        <p className="mt-3 text-sm leading-relaxed text-[#405d6f]">{hobbies}</p>
+        <p className="mt-3 text-sm leading-relaxed text-muted-foreground">{hobbies}</p>
         <span className="mt-4 inline-flex min-h-11 items-center text-sm font-bold">
           View journey <span className="ml-2 group-hover:translate-x-1">→</span>
         </span>
diff --git a/src/components/quiz-result-card.tsx b/src/components/quiz-result-card.tsx
index 59ca04b1..5cf024b5 100644
--- a/src/components/quiz-result-card.tsx
+++ b/src/components/quiz-result-card.tsx
@@ -21,9 +21,9 @@ export function QuizResultCard({
       style={{
         width: '600px',
         height: '400px',
-        background: 'linear-gradient(135deg, #020617 0%, #0f172a 50%, #020617 100%)',
+        background: 'var(--card)',
         fontFamily: 'system-ui, -apple-system, sans-serif',
-        boxShadow: '0 0 60px rgba(16,185,129,0.08)',
+        boxShadow: '0 0 60px color-mix(in srgb, var(--success) 8%, transparent)',
         borderRadius: '16px',
         padding: '40px',
         overflow: 'hidden',
@@ -39,7 +39,7 @@ export function QuizResultCard({
           position: 'absolute',
           inset: 0,
           background:
-            'radial-gradient(ellipse 70% 40% at 50% -5%, rgba(16,185,129,0.18) 0%, transparent 70%)',
+            'radial-gradient(ellipse 70% 40% at 50% -5%, color-mix(in srgb, var(--success) 18%, transparent) 0%, transparent 70%)',
           pointerEvents: 'none',
         }}
       />
@@ -52,7 +52,7 @@ export function QuizResultCard({
             fontWeight: 600,
             letterSpacing: '0.15em',
             textTransform: 'uppercase',
-            color: '#10b981',
+            color: 'var(--success)',
             margin: 0,
           }}
         >
@@ -81,7 +81,7 @@ export function QuizResultCard({
               fontWeight: 600,
               letterSpacing: '0.12em',
               textTransform: 'uppercase',
-              color: '#10b981',
+              color: 'var(--success)',
               margin: '0 0 6px 0',
             }}
           >
@@ -91,7 +91,7 @@ export function QuizResultCard({
             style={{
               fontSize: '32px',
               fontWeight: 800,
-              color: '#f1f5f9',
+              color: 'var(--foreground)',
               margin: 0,
               lineHeight: 1.1,
             }}
@@ -109,9 +109,9 @@ export function QuizResultCard({
                 style={{
                   fontSize: '11px',
                   fontWeight: 500,
-                  color: '#6ee7b7',
-                  background: 'rgba(16,185,129,0.12)',
-                  border: '1px solid rgba(16,185,129,0.25)',
+                  color: 'var(--field-green-ink)',
+                  background: 'var(--field-green)',
+                  border: '1px solid var(--border)',
                   borderRadius: '9999px',
                   padding: '3px 10px',
                 }}
@@ -131,9 +131,9 @@ export function QuizResultCard({
               key={hobby}
               style={{
                 fontSize: '11px',
-                color: '#94a3b8',
-                background: 'rgba(51,65,85,0.8)',
-                border: '1px solid rgba(71,85,105,0.6)',
+                color: 'var(--muted-foreground)',
+                background: 'var(--muted)',
+                border: '1px solid var(--border)',
                 borderRadius: '9999px',
                 padding: '4px 10px',
               }}
@@ -151,15 +151,15 @@ export function QuizResultCard({
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'space-between',
-          borderTop: '1px solid rgba(51,65,85,0.6)',
+          borderTop: '1px solid var(--border)',
           paddingTop: '12px',
           marginTop: '12px',
         }}
       >
-        <p style={{ fontSize: '11px', color: '#475569', margin: 0 }}>
+        <p style={{ fontSize: '11px', color: 'var(--subtle)', margin: 0 }}>
           live.significanthobbies.com/find-your-hobby
         </p>
-        <p style={{ fontSize: '11px', fontWeight: 600, color: '#10b981', margin: 0 }}>
+        <p style={{ fontSize: '11px', fontWeight: 600, color: 'var(--success)', margin: 0 }}>
           Take the quiz →
         </p>
       </div>
diff --git a/src/components/saasmaker-feedback.tsx b/src/components/saasmaker-feedback.tsx
index cdbbd451..fbec1511 100644
--- a/src/components/saasmaker-feedback.tsx
+++ b/src/components/saasmaker-feedback.tsx
@@ -63,8 +63,36 @@ async function submitFeedback(submission: FeedbackSubmission): Promise<void> {
 export function SaaSMakerFeedback() {
   return (
     <>
-      <FeedbackWidget onSubmit={submitFeedback} position="bottom-right" theme="auto" />
+      <FeedbackWidget
+        onSubmit={submitFeedback}
+        position="bottom-right"
+        theme="dark"
+        accentColor="var(--brand)"
+      />
       <style>{`
+        [data-feedback-widget].smw--dark {
+          --smw-bg: var(--card);
+          --smw-bg-secondary: var(--surface);
+          --smw-bg-hover: var(--muted);
+          --smw-text: var(--foreground);
+          --smw-text-secondary: var(--muted-foreground);
+          --smw-text-muted: var(--subtle);
+          --smw-border: var(--border);
+          --smw-input-bg: var(--surface);
+          --smw-input-border: var(--input);
+          --smw-skeleton-bg: var(--muted);
+          --smw-skeleton-shine: var(--border);
+          --smw-bug: var(--destructive);
+          --smw-feature: var(--field-lilac-ink);
+          --smw-feedback: var(--field-sky-ink);
+        }
+        [data-feedback-widget] .smw-trigger,
+        [data-feedback-widget] .smw-btn--primary,
+        [data-feedback-widget] .smw-filter-pill--active,
+        [data-feedback-widget] .smw-filter-pill--active:hover {
+          color: var(--brand-foreground);
+        }
+
         @media (max-width: 639px) {
           [data-feedback-widget] .smw-trigger {
             width: 44px;
diff --git a/src/components/site-footer.tsx b/src/components/site-footer.tsx
index 456bba7a..1d9626ad 100644
--- a/src/components/site-footer.tsx
+++ b/src/components/site-footer.tsx
@@ -40,15 +40,15 @@ const groups = [
 
 export function SiteFooter() {
   return (
-    <footer data-site-footer className="bg-[#f7e957] px-4 py-10 text-[#211e18]">
-      <div className="mx-auto max-w-6xl overflow-hidden rounded-[2rem] border border-[#d4c74c] bg-[#fffdf8] shadow-[0_18px_45px_rgba(80,67,23,0.10)]">
+    <footer data-site-footer className="bg-field-sun px-4 py-10 text-foreground">
+      <div className="mx-auto max-w-6xl overflow-hidden rounded-2xl border border-brand bg-card shadow-[0_18px_45px_color-mix(in_srgb,var(--scrim)_10%,transparent)]">
         <div className="grid gap-9 p-7 sm:p-10 lg:grid-cols-[1.25fr_3fr]">
           <div>
-            <div className="flex size-11 items-center justify-center rounded-full bg-[#f7e957] font-serif text-xl font-bold">
+            <div className="flex size-11 items-center justify-center rounded-full bg-field-sun font-serif text-xl font-bold">
               SH
             </div>
             <p className="mt-4 font-serif text-2xl font-semibold">Significant Hobbies</p>
-            <p className="mt-3 max-w-xs text-sm leading-relaxed text-[#625b50]">
+            <p className="mt-3 max-w-xs text-sm leading-relaxed text-muted-foreground">
               A companion for living intentionally—because life is finite and the rest is still
               unwritten.
             </p>
@@ -57,13 +57,13 @@ export function SiteFooter() {
             {groups.map((group) => (
               <div key={group.title}>
                 <p className="text-sm font-bold">{group.title}</p>
-                <ul className="mt-4 space-y-3 text-sm text-[#625b50]">
+                <ul className="mt-4 space-y-3 text-sm text-muted-foreground">
                   {group.links.map(([label, href]) => (
                     <li key={href}>
                       <Link
                         href={href}
                         prefetch={false}
-                        className="inline-flex min-h-11 items-center hover:text-[#211e18] hover:underline hover:underline-offset-4 sm:min-h-0"
+                        className="inline-flex min-h-11 items-center hover:text-foreground hover:underline hover:underline-offset-4 sm:min-h-0"
                       >
                         {label}
                       </Link>
@@ -74,12 +74,12 @@ export function SiteFooter() {
             ))}
           </div>
         </div>
-        <div className="flex flex-col gap-4 border-t border-[#e4dccb] bg-[#f7f1e7] px-7 py-5 text-xs text-[#625b50] sm:flex-row sm:items-center sm:justify-between sm:px-10">
+        <div className="flex flex-col gap-4 border-t border-border bg-background px-7 py-5 text-xs text-muted-foreground sm:flex-row sm:items-center sm:justify-between sm:px-10">
           <span>
             Made by{' '}
             <a
               href="https://sarthakagrawal.dev"
-              className="font-semibold text-[#211e18] hover:underline"
+              className="font-semibold text-foreground hover:underline"
             >
               Sarthak
             </a>
@@ -87,7 +87,7 @@ export function SiteFooter() {
           <div className="flex flex-wrap gap-x-5 gap-y-2">
             <a
               href="https://github.com/Significant-Hobbies/live/issues"
-              className="inline-flex min-h-11 items-center hover:text-[#211e18] sm:min-h-0"
+              className="inline-flex min-h-11 items-center hover:text-foreground sm:min-h-0"
             >
               Roadmap
             </a>
@@ -97,7 +97,7 @@ export function SiteFooter() {
               title="GitHub repository"
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex min-h-11 items-center hover:text-[#211e18] sm:min-h-0"
+              className="inline-flex min-h-11 items-center hover:text-foreground sm:min-h-0"
             >
               <GitHubIcon />
             </a>
diff --git a/src/components/timeline-builder/builder.tsx b/src/components/timeline-builder/builder.tsx
index 682561b7..e479fab1 100644
--- a/src/components/timeline-builder/builder.tsx
+++ b/src/components/timeline-builder/builder.tsx
@@ -69,36 +69,38 @@ function templateToPhases(template: TimelineTemplate): Phase[] {
 
 function TemplatePicker({ onPick }: { onPick: (template: TimelineTemplate) => void }) {
   return (
-    <div className="mx-auto max-w-4xl rounded-[2rem] border border-[#d9cfbd] bg-[#fffdf8] p-5 shadow-[0_22px_60px_rgba(72,58,38,0.08)] sm:p-9">
+    <div className="mx-auto max-w-4xl rounded-2xl border border-border bg-card p-5 shadow-[0_22px_60px_color-mix(in_srgb,var(--scrim)_8%,transparent)] sm:p-9">
       <div className="mb-8 max-w-2xl">
-        <p className="text-sm font-bold uppercase tracking-[0.18em] text-[#176b4a]">
+        <p className="text-sm font-bold uppercase tracking-[0.18em] text-growth">
           Personal timeline
         </p>
-        <h2 className="mt-2 font-serif text-4xl font-medium tracking-[-0.03em] text-[#211e18]">
+        <h2 className="mt-2 font-serif text-4xl font-medium tracking-[-0.03em] text-foreground">
           Where does your story begin?
         </h2>
-        <p className="mt-3 text-base leading-relaxed text-[#625b50]">
+        <p className="mt-3 text-base leading-relaxed text-muted-foreground">
           Start empty or borrow a shape. Every phase stays editable.
         </p>
       </div>
-      <div className="divide-y divide-[#e8dfd1] border-y border-[#e8dfd1]">
+      <div className="divide-y divide-border border-y border-border">
         {TIMELINE_TEMPLATES.map((template) => (
           <button
             key={template.id}
             type="button"
             onClick={() => onPick(template)}
-            className="group grid w-full grid-cols-[2.5rem_1fr_auto] items-center gap-4 px-2 py-5 text-left transition-colors hover:bg-[#f7f1e7] focus-visible:bg-[#f7e957] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#211e18]"
+            className="group grid w-full grid-cols-[2.5rem_1fr_auto] items-center gap-4 px-2 py-5 text-left transition-colors hover:bg-background focus-visible:bg-field-sun focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
           >
-            <span className="flex size-10 items-center justify-center rounded-full bg-[#b9dcf5] font-serif text-lg font-bold text-[#192a36]">
+            <span className="flex size-10 items-center justify-center rounded-full bg-field-sky font-serif text-lg font-bold text-foreground">
               {template.name.charAt(0)}
             </span>
             <span>
-              <span className="block font-serif text-2xl font-medium text-[#211e18]">
+              <span className="block font-serif text-2xl font-medium text-foreground">
                 {template.name}
               </span>
-              <span className="mt-1 block text-sm text-[#625b50]">{template.description}</span>
+              <span className="mt-1 block text-sm text-muted-foreground">
+                {template.description}
+              </span>
             </span>
-            <span className="rounded-full border border-[#d9cfbd] bg-white px-3 py-1.5 text-xs font-bold text-[#625b50]">
+            <span className="rounded-full border border-border bg-card px-3 py-1.5 text-xs font-bold text-muted-foreground">
               {template.phases.length ? `${template.phases.length} phases` : 'Empty'}
             </span>
           </button>
diff --git a/src/components/timeline-view/export-button.tsx b/src/components/timeline-view/export-button.tsx
index 1c7bb974..017e8adb 100644
--- a/src/components/timeline-view/export-button.tsx
+++ b/src/components/timeline-view/export-button.tsx
@@ -28,7 +28,7 @@ export function ExportButton({ timeline }: Props) {
       const { toPng } = await import('html-to-image');
       const dataUrl = await toPng(cardRef.current, {
         pixelRatio: 2,
-        backgroundColor: '#020617',
+        backgroundColor: getComputedStyle(cardRef.current).getPropertyValue('--background').trim(),
       });
       const link = document.createElement('a');
       link.download = `${timeline.title ?? 'hobby-timeline'}.png`;
diff --git a/src/components/timeline-view/export-card.tsx b/src/components/timeline-view/export-card.tsx
index 068e23de..77378e89 100644
--- a/src/components/timeline-view/export-card.tsx
+++ b/src/components/timeline-view/export-card.tsx
@@ -19,11 +19,11 @@ export function ExportCard({ timeline, exportRef }: Props) {
   return (
     <div
       ref={exportRef}
-      className="w-[600px] rounded-2xl bg-slate-950 p-8 overflow-hidden select-none"
+      className="w-[600px] rounded-2xl bg-background p-8 overflow-hidden select-none"
       style={{
-        background: 'linear-gradient(135deg, #020617 0%, #0f172a 50%, #020617 100%)',
+        background: 'var(--card)',
         fontFamily: 'system-ui, -apple-system, sans-serif',
-        boxShadow: '0 0 60px rgba(16,185,129,0.08)',
+        boxShadow: '0 0 60px color-mix(in srgb, var(--success) 8%, transparent)',
       }}
     >
       {/* Glow */}
@@ -31,7 +31,7 @@ export function ExportCard({ timeline, exportRef }: Props) {
         className="pointer-events-none absolute inset-0"
         style={{
           background:
-            'radial-gradient(ellipse 70% 40% at 50% -5%, rgba(16,185,129,0.15) 0%, transparent 70%)',
+            'radial-gradient(ellipse 70% 40% at 50% -5%, color-mix(in srgb, var(--success) 15%, transparent) 0%, transparent 70%)',
         }}
       />
 
@@ -39,17 +39,17 @@ export function ExportCard({ timeline, exportRef }: Props) {
       <div className="relative mb-6">
         <div className="flex items-start justify-between">
           <div>
-            <p className="text-xs font-medium text-emerald-400 mb-1">significanthobbies</p>
-            <h1 className="text-2xl font-bold text-slate-100">
+            <p className="text-xs font-medium text-growth mb-1">significanthobbies</p>
+            <h1 className="text-2xl font-bold text-foreground">
               {timeline.title ?? 'My Hobby Journey'}
             </h1>
             {timeline.user?.username && (
-              <p className="mt-0.5 text-sm text-slate-400">@{timeline.user.username}</p>
+              <p className="mt-0.5 text-sm text-muted-foreground">@{timeline.user.username}</p>
             )}
           </div>
           <div className="text-right">
-            <div className="text-3xl font-black text-emerald-400">{totalHobbies}</div>
-            <div className="text-xs text-slate-400">hobbies</div>
+            <div className="text-3xl font-black text-growth">{totalHobbies}</div>
+            <div className="text-xs text-muted-foreground">hobbies</div>
           </div>
         </div>
       </div>
@@ -58,7 +58,7 @@ export function ExportCard({ timeline, exportRef }: Props) {
       <div className="relative mb-6">
         <div className="flex gap-px overflow-hidden rounded-lg">
           {phases.map((phase, i) => (
-            <div key={phase.id} className="flex-1 bg-slate-800" style={{ minWidth: 0 }}>
+            <div key={phase.id} className="flex-1 bg-muted" style={{ minWidth: 0 }}>
               <div
                 className="h-2"
                 style={{
@@ -66,8 +66,8 @@ export function ExportCard({ timeline, exportRef }: Props) {
                 }}
               />
               <div className="px-2 py-1.5">
-                <p className="text-xs font-medium text-slate-300 truncate">{phase.label}</p>
-                <p className="text-xs text-slate-500">{phase.hobbies.length} hobbies</p>
+                <p className="text-xs font-medium text-muted-foreground truncate">{phase.label}</p>
+                <p className="text-xs text-muted-foreground">{phase.hobbies.length} hobbies</p>
               </div>
             </div>
           ))}
@@ -81,7 +81,7 @@ export function ExportCard({ timeline, exportRef }: Props) {
           return (
             <span
               key={hobby.name}
-              className="inline-flex items-center gap-1 rounded-full border border-slate-700 bg-slate-800/80 px-2.5 py-0.5 text-xs text-slate-300"
+              className="inline-flex items-center gap-1 rounded-full border border-border bg-muted/80 px-2.5 py-0.5 text-xs text-muted-foreground"
             >
               {cat && <span>{cat.emoji}</span>}
               {hobby.name}
@@ -89,7 +89,7 @@ export function ExportCard({ timeline, exportRef }: Props) {
           );
         })}
         {totalHobbies > 20 && (
-          <span className="inline-flex items-center rounded-full border border-slate-700 bg-slate-800/80 px-2.5 py-0.5 text-xs text-slate-400">
+          <span className="inline-flex items-center rounded-full border border-border bg-muted/80 px-2.5 py-0.5 text-xs text-muted-foreground">
             +{totalHobbies - 20} more
           </span>
         )}
@@ -97,37 +97,39 @@ export function ExportCard({ timeline, exportRef }: Props) {
 
       {/* Personality */}
       {personality && (
-        <div className="mb-6 rounded-lg bg-slate-800/40 border border-slate-700/50 px-4 py-3">
+        <div className="mb-6 rounded-lg bg-muted/40 border border-border/50 px-4 py-3">
           <div className="flex items-center gap-2 mb-1">
             <span className="text-xl leading-none">{personality.archetype.emoji}</span>
-            <span className="font-bold text-emerald-400">{personality.archetype.name}</span>
+            <span className="font-bold text-growth">{personality.archetype.name}</span>
           </div>
-          <p className="text-xs text-slate-400 leading-relaxed">{personality.narrative}</p>
+          <p className="text-xs text-muted-foreground leading-relaxed">{personality.narrative}</p>
         </div>
       )}
 
       {/* Insights row */}
       {insights && (
         <div className="grid grid-cols-3 gap-3 mb-6">
-          <div className="rounded-lg bg-slate-800/60 p-3 text-center">
-            <div className="text-xl font-bold text-orange-400">{insights.rekindled.length}</div>
-            <div className="text-xs text-slate-400">rekindled</div>
+          <div className="rounded-lg bg-muted/60 p-3 text-center">
+            <div className="text-xl font-bold text-field-coral-ink">
+              {insights.rekindled.length}
+            </div>
+            <div className="text-xs text-muted-foreground">rekindled</div>
           </div>
-          <div className="rounded-lg bg-slate-800/60 p-3 text-center">
-            <div className="text-xl font-bold text-blue-400">
+          <div className="rounded-lg bg-muted/60 p-3 text-center">
+            <div className="text-xl font-bold text-field-sky-ink">
               {insights.mostPersistent.filter((h) => h.count >= 2).length}
             </div>
-            <div className="text-xs text-slate-400">persistent</div>
+            <div className="text-xs text-muted-foreground">persistent</div>
           </div>
-          <div className="rounded-lg bg-slate-800/60 p-3 text-center">
-            <div className="text-xl font-bold text-purple-400">{phases.length}</div>
-            <div className="text-xs text-slate-400">phases</div>
+          <div className="rounded-lg bg-muted/60 p-3 text-center">
+            <div className="text-xl font-bold text-field-lilac-ink">{phases.length}</div>
+            <div className="text-xs text-muted-foreground">phases</div>
           </div>
         </div>
       )}
 
       {/* Footer */}
-      <div className="flex items-center justify-between border-t border-slate-800 pt-4">
+      <div className="flex items-center justify-between border-t border-border pt-4">
         <div className="flex gap-1">
           {['🎨', '🎵', '💪', '📚', '🎮'].map((emoji) => (
             <span key={emoji} className="text-sm opacity-60">
@@ -135,7 +137,7 @@ export function ExportCard({ timeline, exportRef }: Props) {
             </span>
           ))}
         </div>
-        <p className="text-xs text-slate-500">live.significanthobbies.com</p>
+        <p className="text-xs text-muted-foreground">live.significanthobbies.com</p>
       </div>
     </div>
   );
diff --git a/src/components/timeline-view/insights-panel.tsx b/src/components/timeline-view/insights-panel.tsx
index 7cf17cc9..a8925d30 100644
--- a/src/components/timeline-view/insights-panel.tsx
+++ b/src/components/timeline-view/insights-panel.tsx
@@ -34,8 +34,8 @@ export function InsightsPanel({ phases }: Props) {
           className="rounded-lg p-3 text-center"
           style={{
             background:
-              'linear-gradient(135deg, rgba(16,185,129,0.08) 0%, rgba(16,185,129,0.03) 100%)',
-            border: '1px solid rgba(16,185,129,0.2)',
+              'linear-gradient(135deg, color-mix(in srgb, var(--success) 8%, transparent) 0%, color-mix(in srgb, var(--success) 3%, transparent) 100%)',
+            border: '1px solid color-mix(in srgb, var(--success) 20%, transparent)',
           }}
         >
           <div className="text-2xl font-bold text-growth">{totalHobbies}</div>
@@ -45,30 +45,30 @@ export function InsightsPanel({ phases }: Props) {
           className="rounded-lg p-3 text-center"
           style={{
             background:
-              'linear-gradient(135deg, rgba(59,130,246,0.08) 0%, rgba(59,130,246,0.03) 100%)',
-            border: '1px solid rgba(59,130,246,0.2)',
+              'linear-gradient(135deg, color-mix(in srgb, var(--field-sky-ink) 8%, transparent) 0%, color-mix(in srgb, var(--field-sky-ink) 3%, transparent) 100%)',
+            border: '1px solid color-mix(in srgb, var(--field-sky-ink) 20%, transparent)',
           }}
         >
-          <div className="text-2xl font-bold text-blue-600">{rekindled.length}</div>
+          <div className="text-2xl font-bold text-field-sky-ink">{rekindled.length}</div>
           <div className="text-xs text-muted-foreground mt-0.5">rekindled</div>
         </div>
         <div
           className="rounded-lg p-3 text-center"
           style={{
             background:
-              'linear-gradient(135deg, rgba(168,85,247,0.08) 0%, rgba(168,85,247,0.03) 100%)',
-            border: '1px solid rgba(168,85,247,0.2)',
+              'linear-gradient(135deg, color-mix(in srgb, var(--field-lilac-ink) 8%, transparent) 0%, color-mix(in srgb, var(--field-lilac-ink) 3%, transparent) 100%)',
+            border: '1px solid color-mix(in srgb, var(--field-lilac-ink) 20%, transparent)',
           }}
         >
-          <div className="text-2xl font-bold text-purple-600">{topPersistent.length}</div>
+          <div className="text-2xl font-bold text-field-lilac-ink">{topPersistent.length}</div>
           <div className="text-xs text-muted-foreground mt-0.5">persistent</div>
         </div>
         <div
           className="rounded-lg p-3 text-center"
           style={{
             background:
-              'linear-gradient(135deg, rgba(245,158,11,0.08) 0%, rgba(245,158,11,0.03) 100%)',
-            border: '1px solid rgba(245,158,11,0.2)',
+              'linear-gradient(135deg, color-mix(in srgb, var(--brand) 8%, transparent) 0%, color-mix(in srgb, var(--brand) 3%, transparent) 100%)',
+            border: '1px solid color-mix(in srgb, var(--brand) 20%, transparent)',
           }}
         >
           <div className="text-2xl font-bold text-primary">{categoryDiversity}</div>
@@ -84,7 +84,7 @@ export function InsightsPanel({ phases }: Props) {
             {rekindled.map((h) => (
               <Badge
                 key={h}
-                className="bg-orange-100 text-orange-700 border border-orange-200 capitalize"
+                className="bg-field-coral text-field-coral-ink border border-field-coral-ink capitalize"
               >
                 {h}
               </Badge>
diff --git a/src/components/timeline-view/personality-card.tsx b/src/components/timeline-view/personality-card.tsx
index 45d2d8f6..4545e6de 100644
--- a/src/components/timeline-view/personality-card.tsx
+++ b/src/components/timeline-view/personality-card.tsx
@@ -8,16 +8,16 @@ interface Props {
 
 // Map category name → Tailwind bg color class for bars
 const CATEGORY_COLORS: Record<string, string> = {
-  Creative: 'bg-pink-400',
-  Music: 'bg-violet-400',
+  Creative: 'bg-field-rose-ink',
+  Music: 'bg-field-lilac-ink',
   Physical: 'bg-growth',
-  Intellectual: 'bg-blue-500',
-  Gaming: 'bg-indigo-400',
-  Outdoor: 'bg-green-400',
+  Intellectual: 'bg-field-sky-ink',
+  Gaming: 'bg-field-lilac-ink',
+  Outdoor: 'bg-growth',
   Culinary: 'bg-primary',
-  Collecting: 'bg-orange-400',
-  Making: 'bg-stone-400',
-  Social: 'bg-teal-400',
+  Collecting: 'bg-field-coral-ink',
+  Making: 'bg-muted',
+  Social: 'bg-field-green-ink',
   Other: 'bg-foreground/15',
 };
 
diff --git a/src/components/timeline-view/phase-swimlane.tsx b/src/components/timeline-view/phase-swimlane.tsx
index 87e946e3..b6dbdcfc 100644
--- a/src/components/timeline-view/phase-swimlane.tsx
+++ b/src/components/timeline-view/phase-swimlane.tsx
@@ -10,16 +10,40 @@ interface Props {
 const INTENSITY_LABELS = ['', 'Trying', 'Casual', 'Regular', 'Passionate', 'Core'];
 
 const PHASE_COLORS = [
-  { border: 'oklch(0.72 0.13 150)', bg: 'oklch(0.72 0.13 150 / 0.06)' }, // sage
-  { border: 'oklch(0.70 0.13 250)', bg: 'oklch(0.70 0.13 250 / 0.06)' }, // blue
-  { border: 'oklch(0.65 0.15 290)', bg: 'oklch(0.65 0.15 290 / 0.06)' }, // violet
-  { border: 'oklch(0.82 0.13 88)', bg: 'oklch(0.82 0.13 88 / 0.06)' }, // gold
-  { border: 'oklch(0.70 0.15 350)', bg: 'oklch(0.70 0.15 350 / 0.06)' }, // pink
-  { border: 'oklch(0.72 0.11 200)', bg: 'oklch(0.72 0.11 200 / 0.06)' }, // teal
-  { border: 'oklch(0.72 0.16 55)', bg: 'oklch(0.72 0.16 55 / 0.06)' }, // orange
-  { border: 'oklch(0.65 0.14 270)', bg: 'oklch(0.65 0.14 270 / 0.06)' }, // indigo
-  { border: 'oklch(0.72 0.12 210)', bg: 'oklch(0.72 0.12 210 / 0.06)' }, // cyan
-  { border: 'oklch(0.65 0.18 15)', bg: 'oklch(0.65 0.18 15 / 0.06)' }, // rose
+  { border: 'var(--success)', bg: 'color-mix(in srgb, var(--success) 6%, transparent)' }, // sage
+  {
+    border: 'var(--field-sky-ink)',
+    bg: 'color-mix(in srgb, var(--field-sky-ink) 6%, transparent)',
+  }, // blue
+  {
+    border: 'var(--field-lilac-ink)',
+    bg: 'color-mix(in srgb, var(--field-lilac-ink) 6%, transparent)',
+  }, // violet
+  { border: 'var(--brand)', bg: 'color-mix(in srgb, var(--brand) 6%, transparent)' }, // gold
+  {
+    border: 'var(--field-rose-ink)',
+    bg: 'color-mix(in srgb, var(--field-rose-ink) 6%, transparent)',
+  }, // pink
+  {
+    border: 'var(--field-green-ink)',
+    bg: 'color-mix(in srgb, var(--field-green-ink) 6%, transparent)',
+  }, // teal
+  {
+    border: 'var(--field-coral-ink)',
+    bg: 'color-mix(in srgb, var(--field-coral-ink) 6%, transparent)',
+  }, // orange
+  {
+    border: 'var(--field-lilac-ink)',
+    bg: 'color-mix(in srgb, var(--field-lilac-ink) 6%, transparent)',
+  }, // indigo
+  {
+    border: 'var(--field-sky-ink)',
+    bg: 'color-mix(in srgb, var(--field-sky-ink) 6%, transparent)',
+  }, // cyan
+  {
+    border: 'var(--field-rose-ink)',
+    bg: 'color-mix(in srgb, var(--field-rose-ink) 6%, transparent)',
+  }, // rose
 ];
 
 function uniqueHobbies(hobbies: Phase['hobbies']) {
diff --git a/src/components/timeline-view/rediscovery-nudges.tsx b/src/components/timeline-view/rediscovery-nudges.tsx
index 27a538da..eec7d828 100644
--- a/src/components/timeline-view/rediscovery-nudges.tsx
+++ b/src/components/timeline-view/rediscovery-nudges.tsx
@@ -36,7 +36,7 @@ export function RediscoveryNudges({ phases }: Props) {
                 {item.name}
               </span>
               {item.type === 'rekindle' ? (
-                <Badge className="shrink-0 bg-orange-100 text-orange-700 border border-orange-200 text-[10px] px-1.5 py-0">
+                <Badge className="shrink-0 bg-field-coral text-field-coral-ink border border-field-coral-ink text-[10px] px-1.5 py-0">
                   rekindle
                 </Badge>
               ) : (
diff --git a/src/components/timeline-view/rediscovery-quests.tsx b/src/components/timeline-view/rediscovery-quests.tsx
index 4d5acb4a..32ba92ee 100644
--- a/src/components/timeline-view/rediscovery-quests.tsx
+++ b/src/components/timeline-view/rediscovery-quests.tsx
@@ -28,7 +28,7 @@ const REDISCOVERY_BADGE: Record<
   },
   dormant: {
     label: 'Dormant',
-    className: 'border-emerald-300/40 bg-emerald-100/60 text-emerald-800',
+    className: 'border-growth/40 bg-field-green/60 text-growth',
   },
   dropped: {
     label: 'Dropped',
diff --git a/src/components/trajectory/trajectory-map.tsx b/src/components/trajectory/trajectory-map.tsx
index cd1e7d8f..c54c34da 100644
--- a/src/components/trajectory/trajectory-map.tsx
+++ b/src/components/trajectory/trajectory-map.tsx
@@ -205,7 +205,7 @@ export function TrajectoryMap({ value, selected, onSelect, mode = 'edit' }: Traj
         })}
       </div>
 
-      <div className="mt-3 flex items-center justify-center gap-2 text-xs font-medium text-[#28733d] md:mt-1">
+      <div className="mt-3 flex items-center justify-center gap-2 text-xs font-medium text-growth md:mt-1">
         <span className="h-px w-8 border-t border-dashed border-growth/60" />
         What you learn changes where you go next
         <span className="h-px w-8 border-t border-dashed border-growth/60" />
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
index 03d5a2fb..db1b838d 100644
--- a/src/components/ui/sonner.tsx
+++ b/src/components/ui/sonner.tsx
@@ -7,17 +7,14 @@ import {
   OctagonXIcon,
   TriangleAlertIcon,
 } from 'lucide-react';
-import { useTheme } from 'next-themes';
 import { Toaster as Sonner, type ToasterProps } from 'sonner';
 
 // Keep the app's Sonner instance: the library currently resolves a separate
 // version, whose toast store would not receive existing app toast calls.
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = 'system' } = useTheme();
-
   return (
     <Sonner
-      theme={theme as ToasterProps['theme']}
+      theme="dark"
       className="toaster group"
       icons={{
         success: <CircleCheckIcon className="size-4" />,
diff --git a/src/components/weekly-log/weekly-log-surface.tsx b/src/components/weekly-log/weekly-log-surface.tsx
index dc484d98..266b86d0 100644
--- a/src/components/weekly-log/weekly-log-surface.tsx
+++ b/src/components/weekly-log/weekly-log-surface.tsx
@@ -110,9 +110,9 @@ export function WeeklyLogSurface({
       />
       <section
         aria-labelledby="weekly-entry-title"
-        className="overflow-hidden rounded-[1.5rem] bg-white shadow-[0_12px_36px_rgba(66,55,22,0.10)]"
+        className="overflow-hidden rounded-2xl bg-card shadow-[0_12px_36px_color-mix(in_srgb,var(--scrim)_10%,transparent)]"
       >
-        <div className="border-b border-[#e8dfd1] px-5 py-5 sm:px-7">
+        <div className="border-b border-border px-5 py-5 sm:px-7">
           <p className="text-sm font-semibold text-subtle">{formatWeekOf(weekOf)}</p>
           <h2
             id="weekly-entry-title"
@@ -137,28 +137,28 @@ export function WeeklyLogSurface({
             rows={7}
             disabled={saving}
             maxLength={8000}
-            className="w-full resize-y rounded-xl border border-[#cfc3b0] bg-[#fffdf8] px-4 py-3 text-base leading-relaxed outline-none focus:border-[#176b4a] focus:ring-2 focus:ring-[#176b4a]/20"
+            className="w-full resize-y rounded-xl border border-border bg-card px-4 py-3 text-base leading-relaxed outline-none focus:border-growth focus:ring-2 focus:ring-growth/20"
           />
           <div className="mt-4 flex flex-wrap items-center gap-3">
             <button
               type="button"
               onClick={handleSave}
               disabled={saving || !textareaValue.trim()}
-              className="inline-flex min-h-12 items-center gap-2 rounded-xl bg-[#176b4a] px-5 font-bold text-white disabled:opacity-45"
+              className="inline-flex min-h-12 items-center gap-2 rounded-xl bg-primary px-5 font-bold text-primary-foreground disabled:opacity-45"
             >
               {saving ? <Loader2 className="size-4 animate-spin" /> : <Check className="size-4" />}
               {currentEntry ? 'Update this week' : 'Keep this week'}
             </button>
-            <p aria-live="polite" className="text-sm font-semibold text-[#176b4a]">
+            <p aria-live="polite" className="text-sm font-semibold text-growth">
               {saved ? 'Kept. This week is on record.' : ''}
             </p>
           </div>
           {saveError ? (
-            <p role="alert" className="mt-3 text-sm font-bold text-red-700">
+            <p role="alert" className="mt-3 text-sm font-bold text-destructive">
               {saveError}
             </p>
           ) : null}
-          <p className="mt-4 text-sm leading-relaxed text-[#625b50]">
+          <p className="mt-4 text-sm leading-relaxed text-muted-foreground">
             Your entry stays private. No daily writing requirement, streaks, or scores.
           </p>
         </div>
@@ -188,7 +188,7 @@ function HeaderCard({
   onWeekStart: (value: WeekStartsOn) => void;
 }) {
   return (
-    <section className="relative overflow-hidden rounded-[1.5rem] bg-[#c5abfa] px-5 py-5 text-[#241a31] shadow-[0_10px_30px_rgba(66,55,22,0.08)] sm:px-7 sm:py-6">
+    <section className="relative overflow-hidden rounded-2xl bg-field-lilac px-5 py-5 text-foreground shadow-[0_10px_30px_color-mix(in_srgb,var(--scrim)_8%,transparent)] sm:px-7 sm:py-6">
       <div className="relative flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
         <div>
           <div className="flex items-center gap-2 text-sm font-semibold">
@@ -204,11 +204,11 @@ function HeaderCard({
         </div>
         <div className="flex flex-wrap items-center gap-2 text-xs font-semibold">
           {weeksRemaining !== null && (
-            <Link href="/life-in-weeks" className="rounded-full bg-white/65 px-3 py-2 tabular-nums">
+            <Link href="/life-in-weeks" className="rounded-full bg-card/65 px-3 py-2 tabular-nums">
               {weeksRemaining.toLocaleString()} weeks
             </Link>
           )}
-          <span className="inline-flex rounded-full bg-white/65 p-1" aria-label="Week starts on">
+          <span className="inline-flex rounded-full bg-card/65 p-1" aria-label="Week starts on">
             {(['monday', 'sunday'] as const).map((value) => (
               <button
                 key={value}
@@ -218,7 +218,7 @@ function HeaderCard({
                 onClick={() => onWeekStart(value)}
                 disabled={weekStartDisabled}
                 className={`min-h-11 rounded-full px-3 capitalize transition-colors ${
-                  weekStartsOn === value ? 'bg-[#241a31] text-white' : 'text-[#241a31]/70'
+                  weekStartsOn === value ? 'bg-surface text-foreground' : 'text-muted-foreground'
                 }`}
               >
                 {value}
@@ -236,10 +236,10 @@ function WeekHistoryCard({ entries }: { entries: WeeklyLogEntryView[] }) {
   return (
     <section
       aria-labelledby="weekly-history-title"
-      className="overflow-hidden rounded-[1.5rem] bg-white shadow-[0_12px_36px_rgba(66,55,22,0.10)]"
+      className="overflow-hidden rounded-2xl bg-card shadow-[0_12px_36px_color-mix(in_srgb,var(--scrim)_10%,transparent)]"
     >
-      <div className="border-b border-[#e8dfd1] bg-[#ffd0bd] p-5 sm:p-7">
-        <p className="text-sm font-bold text-[#713f2d]">Weeks on record</p>
+      <div className="border-b border-border bg-field-coral p-5 sm:p-7">
+        <p className="text-sm font-bold text-field-coral-ink">Weeks on record</p>
         <h2
           id="weekly-history-title"
           className="mt-1 font-serif text-3xl text-foreground sm:text-4xl"
@@ -247,17 +247,17 @@ function WeekHistoryCard({ entries }: { entries: WeeklyLogEntryView[] }) {
           {entries.length} {entries.length === 1 ? 'week' : 'weeks'} written
         </h2>
       </div>
-      <div className="divide-y divide-[#e8dfd1] px-5 sm:px-7">
+      <div className="divide-y divide-border px-5 sm:px-7">
         {entries.map((entry, index) => (
           <details key={entry.id} open={index === 0} className="group py-1">
             <summary className="flex min-h-14 cursor-pointer list-none items-center justify-between gap-4 py-3 marker:content-none">
               <span className="font-serif text-xl">{formatWeekOf(entry.weekOf)}</span>
-              <span className="text-xs font-semibold text-[#625b50]">
+              <span className="text-xs font-semibold text-muted-foreground">
                 {formatWeekSpan(entry.weekOf)}
               </span>
             </summary>
             <div className="pb-5">
-              <p className="mt-2 whitespace-pre-wrap text-sm leading-relaxed text-foreground/80">
+              <p className="mt-2 whitespace-pre-wrap text-sm leading-relaxed text-muted-foreground">
                 {entry.text}
               </p>
             </div>
@@ -278,10 +278,10 @@ function EmailNudgeCard({
   const [on, setOn] = useState(optIn);
   const [pending, setPending] = useState(false);
   return (
-    <section className="flex items-center justify-between gap-4 rounded-[1.5rem] border border-[#d9cfbd] bg-[#fffdf8] px-5 py-4 shadow-[0_12px_36px_rgba(66,55,22,0.06)] sm:px-7">
+    <section className="flex items-center justify-between gap-4 rounded-2xl border border-border bg-card px-5 py-4 shadow-[0_12px_36px_color-mix(in_srgb,var(--scrim)_6%,transparent)] sm:px-7">
       <div>
         <p className="font-serif text-lg">A Sunday nudge, if you want one.</p>
-        <p className="mt-0.5 text-sm text-[#625b50]">
+        <p className="mt-0.5 text-sm text-muted-foreground">
           One quiet email when the week turns — nothing counted, nothing scored.
         </p>
       </div>
@@ -302,11 +302,11 @@ function EmailNudgeCard({
             setPending(false);
           }
         }}
-        className={`relative h-7 w-12 shrink-0 rounded-full transition-colors disabled:opacity-50 ${on ? 'bg-[#176b4a]' : 'bg-[#cfc3b0]'}`}
+        className={`relative h-7 w-12 shrink-0 rounded-full transition-colors disabled:opacity-50 ${on ? 'bg-growth' : 'bg-muted'}`}
         aria-label="Email me a Sunday nudge"
       >
         <span
-          className={`absolute top-0.5 size-6 rounded-full bg-white shadow transition-transform ${on ? 'translate-x-5' : 'translate-x-0.5'}`}
+          className={`absolute top-0.5 size-6 rounded-full bg-card shadow transition-transform ${on ? 'translate-x-5' : 'translate-x-0.5'}`}
         />
       </button>
     </section>
diff --git a/src/components/wider-world-links.tsx b/src/components/wider-world-links.tsx
index 9337c98c..7b3b7fe7 100644
--- a/src/components/wider-world-links.tsx
+++ b/src/components/wider-world-links.tsx
@@ -15,17 +15,17 @@ export function WiderWorldLinks({ query, compact = false }: { query: string; com
           href={link.href}
           target="_blank"
           rel="noreferrer"
-          className={`group flex min-h-12 items-start justify-between gap-3 rounded-xl border border-[#211e18]/15 bg-white/70 text-left transition hover:-translate-y-0.5 hover:bg-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#211e18] ${
+          className={`group flex min-h-12 items-start justify-between gap-3 rounded-xl border border-border/15 bg-card/70 text-left transition hover:-translate-y-0.5 hover:bg-card focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring ${
             compact ? 'px-4 py-3' : 'p-4'
           }`}
         >
           <span>
-            <span className="flex items-center gap-2 text-sm font-bold text-[#211e18]">
+            <span className="flex items-center gap-2 text-sm font-bold text-foreground">
               <Globe2 className="size-4" /> {link.label}
               <span className="sr-only">(opens in a new tab)</span>
             </span>
             {!compact ? (
-              <span className="mt-1 block text-xs leading-relaxed text-[#625b50]">
+              <span className="mt-1 block text-xs leading-relaxed text-muted-foreground">
                 {link.detail}
               </span>
             ) : null}
diff --git a/src/lib/bucket-list-category-styles.ts b/src/lib/bucket-list-category-styles.ts
index e6fc0f68..52c6dd48 100644
--- a/src/lib/bucket-list-category-styles.ts
+++ b/src/lib/bucket-list-category-styles.ts
@@ -7,10 +7,10 @@ export type BucketListCategoryStyle = {
 
 export const BUCKET_LIST_CATEGORY_STYLES: Record<string, BucketListCategoryStyle> = {
   amber: {
-    bg: 'bg-amber-50',
-    border: 'border-amber-200',
-    text: 'text-amber-700',
-    dot: 'bg-amber-400',
+    bg: 'bg-field-sun',
+    border: 'border-brand',
+    text: 'text-brand',
+    dot: 'bg-brand',
   },
   coral: {
     bg: 'bg-primary/10',
@@ -25,46 +25,46 @@ export const BUCKET_LIST_CATEGORY_STYLES: Record<string, BucketListCategoryStyle
     dot: 'bg-foreground',
   },
   indigo: {
-    bg: 'bg-indigo-50',
-    border: 'border-indigo-200',
-    text: 'text-indigo-700',
-    dot: 'bg-indigo-400',
+    bg: 'bg-field-lilac',
+    border: 'border-field-lilac-ink',
+    text: 'text-field-lilac-ink',
+    dot: 'bg-field-lilac-ink',
   },
   lime: {
-    bg: 'bg-lime-50',
-    border: 'border-lime-200',
-    text: 'text-lime-700',
-    dot: 'bg-lime-400',
+    bg: 'bg-field-green',
+    border: 'border-field-green-ink',
+    text: 'text-field-green-ink',
+    dot: 'bg-field-green-ink',
   },
   orange: {
-    bg: 'bg-orange-50',
-    border: 'border-orange-200',
-    text: 'text-orange-700',
-    dot: 'bg-orange-400',
+    bg: 'bg-field-coral',
+    border: 'border-field-coral-ink',
+    text: 'text-field-coral-ink',
+    dot: 'bg-field-coral-ink',
   },
   purple: {
-    bg: 'bg-purple-50',
-    border: 'border-purple-200',
-    text: 'text-purple-700',
-    dot: 'bg-purple-400',
+    bg: 'bg-field-lilac',
+    border: 'border-field-lilac-ink',
+    text: 'text-field-lilac-ink',
+    dot: 'bg-field-lilac-ink',
   },
   rose: {
-    bg: 'bg-rose-50',
-    border: 'border-rose-200',
-    text: 'text-rose-700',
-    dot: 'bg-rose-400',
+    bg: 'bg-field-rose',
+    border: 'border-field-rose-ink',
+    text: 'text-field-rose-ink',
+    dot: 'bg-field-rose-ink',
   },
   sky: {
-    bg: 'bg-sky-50',
-    border: 'border-sky-200',
-    text: 'text-sky-700',
-    dot: 'bg-sky-400',
+    bg: 'bg-field-sky',
+    border: 'border-field-sky-ink',
+    text: 'text-field-sky-ink',
+    dot: 'bg-field-sky-ink',
   },
   teal: {
-    bg: 'bg-teal-50',
-    border: 'border-teal-200',
-    text: 'text-teal-700',
-    dot: 'bg-teal-400',
+    bg: 'bg-field-green',
+    border: 'border-field-green-ink',
+    text: 'text-field-green-ink',
+    dot: 'bg-field-green-ink',
   },
 };
 
diff --git a/src/lib/bucket-list-insights.ts b/src/lib/bucket-list-insights.ts
index 57285a22..ae97d50f 100644
--- a/src/lib/bucket-list-insights.ts
+++ b/src/lib/bucket-list-insights.ts
@@ -25,8 +25,8 @@ const ARCHETYPES: Record<BucketItemCategory, BucketListArchetype> = {
     tagline: 'Home is everywhere',
     description:
       'You measure life in stamps, not steps. Every destination is a door to a new version of yourself.',
-    color: 'bg-sky-500',
-    textColor: 'text-sky-600',
+    color: 'bg-field-sky-ink',
+    textColor: 'text-field-sky-ink',
   },
   adventure: {
     id: 'daredevil',
@@ -35,8 +35,8 @@ const ARCHETYPES: Record<BucketItemCategory, BucketListArchetype> = {
     tagline: 'Fear is just fuel',
     description:
       "You're most alive at the edge. Heights, speed, the unknown — these aren't risks, they're invitations.",
-    color: 'bg-orange-500',
-    textColor: 'text-orange-600',
+    color: 'bg-field-coral-ink',
+    textColor: 'text-field-coral-ink',
   },
   creative: {
     id: 'creator',
@@ -45,8 +45,8 @@ const ARCHETYPES: Record<BucketItemCategory, BucketListArchetype> = {
     tagline: 'Life as a canvas',
     description:
       'You see the world as raw material. Your bucket list reads like a portfolio — performance, craft, expression.',
-    color: 'bg-purple-500',
-    textColor: 'text-purple-600',
+    color: 'bg-field-lilac-ink',
+    textColor: 'text-field-lilac-ink',
   },
   achievement: {
     id: 'achiever',
@@ -55,8 +55,8 @@ const ARCHETYPES: Record<BucketItemCategory, BucketListArchetype> = {
     tagline: 'Every peak has a next one',
     description:
       "You set audacious goals because ordinary ones don't get you out of bed. Mastery is your love language.",
-    color: 'bg-amber-500',
-    textColor: 'text-amber-600',
+    color: 'bg-brand',
+    textColor: 'text-brand',
   },
   relationships: {
     id: 'connector',
@@ -65,8 +65,8 @@ const ARCHETYPES: Record<BucketItemCategory, BucketListArchetype> = {
     tagline: 'People are the point',
     description:
       'For you, experiences only count when shared. Your bucket list is really a list of people you want to show up for.',
-    color: 'bg-rose-500',
-    textColor: 'text-rose-600',
+    color: 'bg-field-rose-ink',
+    textColor: 'text-field-rose-ink',
   },
   contribution: {
     id: 'changemaker',
@@ -75,8 +75,8 @@ const ARCHETYPES: Record<BucketItemCategory, BucketListArchetype> = {
     tagline: 'Leave it better than you found it',
     description:
       "You don't want to just witness history — you want to shape it. Your ambitions scale with the problems you see.",
-    color: 'bg-emerald-500',
-    textColor: 'text-emerald-600',
+    color: 'bg-growth',
+    textColor: 'text-growth',
   },
   food: {
     id: 'epicurean',
@@ -85,8 +85,8 @@ const ARCHETYPES: Record<BucketItemCategory, BucketListArchetype> = {
     tagline: 'Life is tasted, not counted',
     description:
       'You measure your days in flavours, textures, and the meals you shared. Cooking, foraging, tasting — food is your way of being present.',
-    color: 'bg-amber-600',
-    textColor: 'text-amber-700',
+    color: 'bg-brand',
+    textColor: 'text-brand',
   },
   health: {
     id: 'vitalist',
@@ -95,8 +95,8 @@ const ARCHETYPES: Record<BucketItemCategory, BucketListArchetype> = {
     tagline: 'Your body is the project',
     description:
       "You treat your body as the one asset you can't replace. Movement, sleep, strength — vitality is the foundation everything else stands on.",
-    color: 'bg-lime-600',
-    textColor: 'text-lime-700',
+    color: 'bg-field-green-ink',
+    textColor: 'text-field-green-ink',
   },
   mindfulness: {
     id: 'presence-seeker',
@@ -105,8 +105,8 @@ const ARCHETYPES: Record<BucketItemCategory, BucketListArchetype> = {
     tagline: 'Here is the only place',
     description:
       'You are drawn to stillness, ritual, and the present moment. Meditation, nature, silence — your bucket list is a practice of attention.',
-    color: 'bg-teal-600',
-    textColor: 'text-teal-700',
+    color: 'bg-field-green-ink',
+    textColor: 'text-field-green-ink',
   },
   reflection: {
     id: 'wise-elder',
@@ -115,8 +115,8 @@ const ARCHETYPES: Record<BucketItemCategory, BucketListArchetype> = {
     tagline: 'A life worth reviewing',
     description:
       'You are drawn to meaning-making — journaling, memoir, forgiveness, life review. Your bucket list is a conversation with your own story.',
-    color: 'bg-indigo-500',
-    textColor: 'text-indigo-600',
+    color: 'bg-field-lilac-ink',
+    textColor: 'text-field-lilac-ink',
   },
 };
 
@@ -127,8 +127,8 @@ const MIXED_ARCHETYPE: BucketListArchetype = {
   tagline: 'Everything, deeply',
   description:
     "You refuse to be put in a box. Explorer, creator, achiever, connector — you're all of these, and the world is your curriculum.",
-  color: 'bg-violet-500',
-  textColor: 'text-violet-600',
+  color: 'bg-field-lilac-ink',
+  textColor: 'text-field-lilac-ink',
 };
 
 export function getBucketListArchetype(
diff --git a/src/lib/dream-atlas.ts b/src/lib/dream-atlas.ts
index a92212b3..1d7a449b 100644
--- a/src/lib/dream-atlas.ts
+++ b/src/lib/dream-atlas.ts
@@ -36,7 +36,7 @@ export const DREAM_TERRITORIES: DreamTerritory[] = [
       'Skydive from 15,000 feet',
       'Climb a mountain over 4,000 metres',
     ],
-    color: 'bg-[#ffd0bd]',
+    color: 'bg-field-coral',
     emoji: '↗',
   },
   {
@@ -44,7 +44,7 @@ export const DREAM_TERRITORIES: DreamTerritory[] = [
     label: 'Make & perform',
     description: 'Songs, films, books, stages, paint, and things that did not exist before you.',
     prompts: ['Record a song and release it', 'Create a short film', 'Write and finish a novel'],
-    color: 'bg-[#c5abfa]',
+    color: 'bg-field-lilac',
     emoji: '✦',
   },
   {
@@ -56,7 +56,7 @@ export const DREAM_TERRITORIES: DreamTerritory[] = [
       'Experience Carnival in Rio de Janeiro',
       'Visit every continent',
     ],
-    color: 'bg-[#b9dcf5]',
+    color: 'bg-field-sky',
     emoji: '◎',
   },
   {
@@ -68,7 +68,7 @@ export const DREAM_TERRITORIES: DreamTerritory[] = [
       'Attend a multi-day music festival',
       'Join a community choir or theatre group',
     ],
-    color: 'bg-[#f7e957]',
+    color: 'bg-field-sun',
     emoji: '∞',
   },
   {
@@ -80,7 +80,7 @@ export const DREAM_TERRITORIES: DreamTerritory[] = [
       'Do a serious meditation retreat (10+ days)',
       'Learn a new language to conversational fluency',
     ],
-    color: 'bg-[#dceabf]',
+    color: 'bg-field-green',
     emoji: '◇',
   },
   {
@@ -92,7 +92,7 @@ export const DREAM_TERRITORIES: DreamTerritory[] = [
       'Start a foundation',
       'Build something that outlasts you',
     ],
-    color: 'bg-[#a8dc91]',
+    color: 'bg-field-green',
     emoji: '＋',
   },
 ] as const;