diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
index 7abca8e..72b2d21 100644
--- a/frontend/src/pages/index.tsx
+++ b/frontend/src/pages/index.tsx
@@ -5,6 +5,27 @@ import Link from 'next/link';
 import LayoutGuest from '../layouts/Guest';
 import { getPageTitle } from '../config';
 
+const ui = {
+  page: 'bg-[#fffdf9] text-[#19192d]',
+  banner: 'bg-gradient-to-r from-[#35b7a5] via-[#95b76e] to-[#c38a25] text-white',
+  navShell: 'rounded-full bg-white shadow-[0_18px_60px_rgba(31,31,50,0.08)] ring-1 ring-[#19192d]/5',
+  ink: 'text-[#19192d]',
+  muted: 'text-[#72798a]',
+  accent: 'text-[#35b7a5]',
+  gold: 'text-[#b17a1e]',
+  border: 'border-[#19192d]/10',
+  surface: 'bg-white',
+  softSurface: 'bg-[#fbf8f1]',
+  darkPanel: 'bg-[#19192d] text-white',
+  darkMuted: 'text-white/70',
+  button: 'bg-gradient-to-r from-[#36b39f] to-[#b98624] text-white shadow-[0_18px_45px_rgba(54,179,159,0.24)] transition hover:brightness-105',
+  section: 'mx-auto max-w-7xl px-5 py-20 lg:px-8',
+  card: 'rounded-[1.75rem] border border-[#19192d]/10 bg-white shadow-[0_18px_50px_rgba(31,31,50,0.05)]',
+  softCard: 'rounded-[1.75rem] border border-[#19192d]/10 bg-[#fbf8f1]',
+  overline: 'text-sm font-bold uppercase tracking-[0.28em] text-[#b17a1e]',
+  heading: 'font-serif font-semibold tracking-tight text-[#19192d]',
+};
+
 const trustItems = ['Coach-reviewed AI', 'Private client records', 'Built for coaching'];
 
 const stats = [
@@ -19,6 +40,13 @@ const workflow = [
   ['Before the next session', 'Surface open commitments, recent patterns, and a focused opening question.'],
 ];
 
+const trustCards = [
+  ['Your method', 'Capture language, frameworks, and recurring patterns from real sessions.'],
+  ['Your approval', 'Review notes, prompts, resources, and messages before they reach the client.'],
+  ['Your data', 'Keep client records structured around confidentiality and role-based access.'],
+  ['Your client portal', 'Share only the commitments, resources, and reflections that move the work forward.'],
+];
+
 const testimonials = [
   [
     'The session recap caught the exact leadership pattern I wanted to revisit. I edited one sentence and sent it.',
@@ -44,27 +72,27 @@ export default function Starter() {
         <title>{getPageTitle('Coaching Workspace')}</title>
       </Head>
 
-      <main className="min-h-screen bg-[#fffdf9] text-[#19192d]">
-        <div className="bg-gradient-to-r from-[#35b7a5] via-[#97b879] to-[#c38a25] px-5 py-5 text-center text-lg text-white">
+      <main className={`min-h-screen ${ui.page}`}>
+        <div className={`${ui.banner} px-5 py-5 text-center text-lg`}>
           <p className="text-xs font-bold uppercase tracking-[0.34em]">Still human</p>
           <p className="mt-2 text-2xl font-medium">AI is not a coach. Keep the real relationship at the center.</p>
           <p className="mt-3 text-lg text-white/90">
             Launch a modern coaching workspace.
             <Link href="/login/" className="ml-2 font-semibold underline decoration-white underline-offset-4">
-            Open workspace
+              Open workspace
             </Link>
           </p>
         </div>
 
         <header className="relative z-20 px-5 pt-7">
-          <div className="mx-auto flex max-w-6xl items-center justify-between gap-5 rounded-full bg-white px-7 py-5 shadow-[0_18px_60px_rgba(31,31,50,0.08)] ring-1 ring-[#19192d]/5">
+          <div className={`mx-auto flex max-w-6xl items-center justify-between gap-5 px-7 py-5 ${ui.navShell}`}>
             <Link href="/" className="flex items-center gap-3 text-lg font-semibold tracking-tight">
-              <span className="flex h-11 w-11 items-center justify-center rounded-2xl bg-[#fff5e7] text-2xl font-black text-[#37ad9f]">
+              <span className="flex h-11 w-11 items-center justify-center rounded-2xl bg-[#f3fbf8] text-2xl font-black text-[#35b7a5]">
                 C
               </span>
               <span className="sr-only">Coaching SaaS Workspace</span>
             </Link>
-            <nav className="hidden items-center gap-8 text-lg font-medium text-[#25263d] md:flex">
+            <nav className={`hidden items-center gap-8 text-lg font-medium ${ui.ink} md:flex`}>
               <a href="#how-it-works">How it works</a>
               <a href="#coachee">Coachee</a>
               <a href="#pricing">Pricing</a>
@@ -73,43 +101,33 @@ export default function Starter() {
               <a href="#events">Events</a>
               <a href="#pricing">Packages</a>
             </nav>
-            <div className="flex items-center gap-3">
-              <Link
-                href="/register/"
-                className="rounded-full bg-gradient-to-r from-[#36b39f] to-[#b98624] px-7 py-3 text-base font-semibold text-white shadow-[0_12px_35px_rgba(54,179,159,0.25)] transition hover:brightness-105"
-              >
-                Join waitlist
-              </Link>
-            </div>
+            <Link href="/register/" className={`rounded-full px-7 py-3 text-base font-semibold ${ui.button}`}>
+              Join waitlist
+            </Link>
           </div>
         </header>
 
         <section className="mx-auto max-w-7xl px-5 pb-20 pt-8 text-center lg:px-8">
           <div className="mx-auto max-w-5xl">
-            <p className="mb-8 text-sm font-bold uppercase tracking-[0.28em] text-[#b17a1e]">
-              For leadership and executive coaches
-            </p>
-            <h1 className="font-serif text-6xl font-semibold leading-[1.12] tracking-tight text-[#19192d] md:text-7xl xl:text-[6.7rem]">
+            <p className={`mb-8 ${ui.overline}`}>For leadership and executive coaches</p>
+            <h1 className={`${ui.heading} text-6xl leading-[1.12] md:text-7xl xl:text-[6.7rem]`}>
               What happens when your best coaching{' '}
-              <span className="text-[#35b7a5]">keeps going.</span>
+              <span className={ui.accent}>keeps going.</span>
             </h1>
-            <p className="mx-auto mt-9 max-w-3xl text-2xl leading-10 text-[#72798a]">
+            <p className={`mx-auto mt-9 max-w-3xl text-2xl leading-10 ${ui.muted}`}>
               Show up fully present. No note-taking. No admin. Your workspace captures what makes
               your coaching yours, so clients stay connected to the work between sessions.
             </p>
             <div className="mt-12 flex justify-center">
-              <Link
-                href="/register/"
-                className="rounded-full bg-gradient-to-r from-[#36b39f] to-[#b98624] px-10 py-5 text-lg font-semibold text-white shadow-[0_18px_45px_rgba(54,179,159,0.24)] transition hover:brightness-105"
-              >
+              <Link href="/register/" className={`rounded-full px-10 py-5 text-lg font-semibold ${ui.button}`}>
                 Join waitlist
               </Link>
             </div>
-            <p className="mt-6 text-lg text-[#5f6575]">$14/client/month. Everything included.</p>
-            <div className="mx-auto mt-10 flex max-w-3xl flex-wrap justify-center gap-x-9 gap-y-4 text-lg text-[#72798a]">
+            <p className={`mt-6 text-lg ${ui.muted}`}>$14/client/month. Everything included.</p>
+            <div className={`mx-auto mt-10 flex max-w-3xl flex-wrap justify-center gap-x-9 gap-y-4 text-lg ${ui.muted}`}>
               {trustItems.map((item) => (
                 <span key={item} className="flex items-center gap-2">
-                  <span className="text-[#35b7a5]">✦</span>
+                  <span className={ui.accent}>✦</span>
                   {item}
                 </span>
               ))}
@@ -118,28 +136,28 @@ export default function Starter() {
 
           <div className="relative mx-auto mt-16 max-w-4xl">
             <div className="absolute -inset-12 rounded-full bg-[#35b7a5]/10 blur-3xl" />
-            <div className="relative rounded-[2rem] border border-[#19192d]/10 bg-white p-4 shadow-[0_24px_80px_rgba(31,31,50,0.10)]">
-              <div className="rounded-[1.5rem] bg-[#17130d] p-4 text-[#fff7ec]">
+            <div className={`relative rounded-[2rem] border p-4 shadow-[0_24px_80px_rgba(31,31,50,0.10)] ${ui.border} ${ui.surface}`}>
+              <div className={`rounded-[1.5rem] p-4 ${ui.darkPanel}`}>
                 <div className="mb-4 flex items-center justify-between">
                   <div>
-                    <p className="text-xs uppercase tracking-[0.16em] text-[#f3b35c]">Session insights</p>
+                    <p className="text-xs uppercase tracking-[0.16em] text-[#c79a38]">Session insights</p>
                     <h2 className="mt-1 text-2xl font-semibold">Maya Chen · Session 4</h2>
                   </div>
-                  <span className="rounded-full bg-[#f3b35c] px-3 py-1 text-sm font-semibold text-[#17130d]">
+                  <span className="rounded-full bg-[#c79a38] px-3 py-1 text-sm font-semibold text-white">
                     Review
                   </span>
                 </div>
 
                 <div className="grid grid-cols-1 gap-3 md:grid-cols-3">
                   {['Delegation trust', 'Decision rights', 'Founder visibility'].map((topic) => (
-                    <div key={topic} className="rounded-2xl bg-[#fff7ec]/10 p-4">
-                      <p className="text-sm font-medium text-[#fff7ec]">{topic}</p>
+                    <div key={topic} className="rounded-2xl bg-white/10 p-4">
+                      <p className="text-sm font-medium text-white">{topic}</p>
                     </div>
                   ))}
                 </div>
 
-                <div className="mt-4 rounded-2xl bg-[#fff7ec] p-5 text-[#17130d]">
-                  <p className="text-sm font-semibold uppercase tracking-[0.14em] text-[#8d6125]">Commitments</p>
+                <div className="mt-4 rounded-2xl bg-white p-5 text-[#19192d]">
+                  <p className={`text-sm font-semibold uppercase tracking-[0.14em] ${ui.gold}`}>Commitments</p>
                   <ul className="mt-4 space-y-3 text-sm leading-6">
                     <li>Draft a decision-rights matrix before Friday.</li>
                     <li>Choose three decisions the team can own without founder approval.</li>
@@ -148,27 +166,27 @@ export default function Starter() {
                 </div>
 
                 <div className="mt-4 grid grid-cols-1 gap-4 lg:grid-cols-[0.9fr_1.1fr]">
-                  <div className="rounded-2xl bg-[#fff7ec]/10 p-5">
-                    <p className="text-sm font-semibold text-[#f3b35c]">Pattern</p>
-                    <p className="mt-2 leading-7 text-[#f6ead5]">
+                  <div className="rounded-2xl bg-white/10 p-5">
+                    <p className="text-sm font-semibold text-[#c79a38]">Pattern</p>
+                    <p className={`mt-2 leading-7 ${ui.darkMuted}`}>
                       Maya is moving from control as quality assurance toward explicit decision boundaries.
                     </p>
                   </div>
-                  <div className="rounded-2xl bg-[#fff7ec]/10 p-5">
-                    <p className="text-sm font-semibold text-[#f3b35c]">Follow-up draft</p>
-                    <p className="mt-2 leading-7 text-[#f6ead5]">
+                  <div className="rounded-2xl bg-white/10 p-5">
+                    <p className="text-sm font-semibold text-[#c79a38]">Follow-up draft</p>
+                    <p className={`mt-2 leading-7 ${ui.darkMuted}`}>
                       This week is about making delegation visible enough that trust can become operational.
                     </p>
                   </div>
                 </div>
               </div>
 
-                <div className="absolute -bottom-8 right-8 hidden w-80 rounded-3xl border border-[#19192d]/10 bg-white p-5 text-left shadow-[0_22px_60px_rgba(31,31,50,0.14)] lg:block">
-                <p className="text-xs font-semibold uppercase tracking-[0.16em] text-[#8d6125]">Client message</p>
-                <p className="mt-3 leading-7 text-[#5c5143]">
+              <div className={`absolute -bottom-8 right-8 hidden w-80 p-5 text-left lg:block ${ui.card}`}>
+                <p className={`text-xs font-semibold uppercase tracking-[0.16em] ${ui.gold}`}>Client message</p>
+                <p className={`mt-3 leading-7 ${ui.muted}`}>
                   “The board conversation went better than expected. I led with the narrative instead of defending the roadmap.”
                 </p>
-                <p className="mt-4 rounded-2xl bg-[#f3eddf] p-3 text-sm font-medium">
+                <p className={`mt-4 rounded-2xl p-3 text-sm font-medium ${ui.softSurface}`}>
                   Suggested reply: What changed in the room when you led that way?
                 </p>
               </div>
@@ -176,34 +194,34 @@ export default function Starter() {
           </div>
         </section>
 
-        <section className="border-y border-[#19192d]/10 bg-[#fbf8f1] px-5 py-10">
+        <section className={`border-y px-5 py-10 ${ui.border} ${ui.softSurface}`}>
           <div className="mx-auto grid max-w-7xl grid-cols-1 gap-6 md:grid-cols-3">
             {stats.map(([value, label]) => (
-              <div key={value} className="border-l border-[#2e2417]/15 pl-5">
-                <p className="font-serif text-5xl font-semibold text-[#17130d]">{value}</p>
-                <p className="mt-3 max-w-sm leading-7 text-[#5c5143]">{label}</p>
+              <div key={value} className={`border-l pl-5 ${ui.border}`}>
+                <p className={`${ui.heading} text-5xl`}>{value}</p>
+                <p className={`mt-3 max-w-sm leading-7 ${ui.muted}`}>{label}</p>
               </div>
             ))}
           </div>
         </section>
 
-        <section id="how-it-works" className="mx-auto max-w-7xl px-5 py-20 lg:px-8">
+        <section id="how-it-works" className={ui.section}>
           <div className="grid grid-cols-1 gap-10 lg:grid-cols-[0.8fr_1.2fr]">
             <div>
-              <p className="text-sm font-semibold uppercase tracking-[0.18em] text-[#8d6125]">The new practice rhythm</p>
-              <h2 className="mt-4 font-serif text-5xl font-semibold leading-tight md:text-6xl">
+              <p className={ui.overline}>The new practice rhythm</p>
+              <h2 className={`${ui.heading} mt-4 text-5xl leading-tight md:text-6xl`}>
                 Before, between, and after every session.
               </h2>
             </div>
             <div className="grid grid-cols-1 gap-4">
               {workflow.map(([title, copy], index) => (
-                <div key={title} className="grid grid-cols-[3rem_1fr] gap-5 rounded-3xl border border-[#2e2417]/10 bg-[#fff8ec] p-5">
-                  <div className="flex h-12 w-12 items-center justify-center rounded-full bg-[#17130d] font-semibold text-[#fff7ec]">
+                <div key={title} className={`grid grid-cols-[3rem_1fr] gap-5 p-5 ${ui.card}`}>
+                  <div className="flex h-12 w-12 items-center justify-center rounded-full bg-[#35b7a5] font-semibold text-white">
                     {index + 1}
                   </div>
                   <div>
                     <h3 className="text-xl font-semibold">{title}</h3>
-                    <p className="mt-2 leading-7 text-[#5c5143]">{copy}</p>
+                    <p className={`mt-2 leading-7 ${ui.muted}`}>{copy}</p>
                   </div>
                 </div>
               ))}
@@ -211,33 +229,33 @@ export default function Starter() {
           </div>
         </section>
 
-        <section id="session-memory" className="bg-[#17130d] px-5 py-20 text-[#fff7ec]">
+        <section id="session-memory" className={`px-5 py-20 ${ui.darkPanel}`}>
           <div className="mx-auto grid max-w-7xl grid-cols-1 gap-10 lg:grid-cols-[0.95fr_1.05fr] lg:px-8">
             <div className="flex flex-col justify-center">
-              <p className="text-sm font-semibold uppercase tracking-[0.18em] text-[#f3b35c]">Session memory</p>
+              <p className="text-sm font-semibold uppercase tracking-[0.18em] text-[#c79a38]">Session memory</p>
               <h2 className="mt-4 font-serif text-5xl font-semibold leading-tight md:text-6xl">
                 Stop opening old notes before every call.
               </h2>
-              <p className="mt-6 text-lg leading-8 text-[#d8cbb6]">
+              <p className={`mt-6 text-lg leading-8 ${ui.darkMuted}`}>
                 The workspace pulls together open commitments, themes across sessions, client messages,
                 and a suggested opening question. You review everything first.
               </p>
               <div className="mt-8 grid grid-cols-2 gap-4">
                 {['Open commitments', 'Client patterns', 'Shared notes', 'Prep questions'].map((item) => (
-                  <div key={item} className="rounded-2xl border border-[#fff7ec]/10 bg-[#fff7ec]/5 p-4">
+                  <div key={item} className="rounded-2xl border border-white/10 bg-white/5 p-4">
                     <p className="font-semibold">{item}</p>
                   </div>
                 ))}
               </div>
             </div>
 
-            <div className="rounded-[2rem] border border-[#fff7ec]/10 bg-[#fff7ec] p-5 text-[#17130d]">
-              <div className="flex flex-wrap items-center justify-between gap-4 border-b border-[#2e2417]/10 pb-5">
+            <div className={`rounded-[2rem] border p-5 ${ui.border} ${ui.surface} ${ui.ink}`}>
+              <div className={`flex flex-wrap items-center justify-between gap-4 border-b pb-5 ${ui.border}`}>
                 <div>
-                  <p className="text-sm font-semibold uppercase tracking-[0.16em] text-[#8d6125]">Session prep</p>
+                  <p className={`text-sm font-semibold uppercase tracking-[0.16em] ${ui.gold}`}>Session prep</p>
                   <h3 className="mt-1 text-2xl font-semibold">Maya Chen · Session 5</h3>
                 </div>
-                <span className="rounded-full bg-[#e7f2df] px-4 py-2 text-sm font-semibold text-[#356133]">
+                <span className="rounded-full bg-[#e8f6f2] px-4 py-2 text-sm font-semibold text-[#248b7e]">
                   Ready when you are
                 </span>
               </div>
@@ -248,23 +266,23 @@ export default function Starter() {
                   ['2', 'open commitments'],
                   ['3', 'goals in focus'],
                 ].map(([value, label]) => (
-                  <div key={label} className="rounded-2xl bg-[#f3eddf] p-4">
+                  <div key={label} className={`rounded-2xl p-4 ${ui.softSurface}`}>
                     <p className="text-3xl font-semibold">{value}</p>
-                    <p className="mt-1 text-sm text-[#5c5143]">{label}</p>
+                    <p className={`mt-1 text-sm ${ui.muted}`}>{label}</p>
                   </div>
                 ))}
               </div>
 
-              <div className="mt-5 rounded-2xl border border-[#2e2417]/10 p-5">
-                <p className="text-sm font-semibold uppercase tracking-[0.14em] text-[#8d6125]">Top thread</p>
+              <div className={`mt-5 rounded-2xl border p-5 ${ui.border}`}>
+                <p className={`text-sm font-semibold uppercase tracking-[0.14em] ${ui.gold}`}>Top thread</p>
                 <p className="mt-3 text-lg font-semibold">Decision rights are clear on paper, but still feel risky in practice.</p>
-                <p className="mt-3 leading-7 text-[#5c5143]">
+                <p className={`mt-3 leading-7 ${ui.muted}`}>
                   The last two sessions both returned to trust, escalation rules, and what Maya needs to see before stepping back.
                 </p>
               </div>
 
-              <div className="mt-5 rounded-2xl bg-[#17130d] p-5 text-[#fff7ec]">
-                <p className="text-sm font-semibold text-[#f3b35c]">Suggested opening</p>
+              <div className={`mt-5 rounded-2xl p-5 ${ui.darkPanel}`}>
+                <p className="text-sm font-semibold text-[#c79a38]">Suggested opening</p>
                 <p className="mt-3 text-xl leading-8">
                   “Where did delegation feel cleaner this week, and where did your body still want to take the wheel?”
                 </p>
@@ -273,52 +291,47 @@ export default function Starter() {
           </div>
         </section>
 
-        <section id="trust" className="mx-auto max-w-7xl px-5 py-20 lg:px-8">
+        <section id="trust" className={ui.section}>
           <div className="grid grid-cols-1 gap-10 lg:grid-cols-[0.9fr_1.1fr]">
             <div>
-              <p className="text-sm font-semibold uppercase tracking-[0.18em] text-[#8d6125]">Coach supervised</p>
-              <h2 className="mt-4 font-serif text-5xl font-semibold leading-tight md:text-6xl">
+              <p className={ui.overline}>Coach supervised</p>
+              <h2 className={`${ui.heading} mt-4 text-5xl leading-tight md:text-6xl`}>
                 The AI proposes. The coach decides.
               </h2>
-              <p className="mt-6 text-lg leading-8 text-[#5c5143]">
+              <p className={`mt-6 text-lg leading-8 ${ui.muted}`}>
                 Private notes stay private. Shared notes are approved. Client-facing content carries the coach's voice,
                 not a generic chatbot voice.
               </p>
             </div>
             <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-              {[
-                ['Your method', 'Capture language, frameworks, and recurring patterns from real sessions.'],
-                ['Your approval', 'Review notes, prompts, resources, and messages before they reach the client.'],
-                ['Your data', 'Keep client records structured around confidentiality and role-based access.'],
-                ['Your client portal', 'Share only the commitments, resources, and reflections that move the work forward.'],
-              ].map(([title, copy]) => (
-                <div key={title} className="rounded-3xl border border-[#2e2417]/10 bg-[#fff8ec] p-6">
+              {trustCards.map(([title, copy]) => (
+                <div key={title} className={`p-6 ${ui.card}`}>
                   <h3 className="text-xl font-semibold">{title}</h3>
-                  <p className="mt-3 leading-7 text-[#5c5143]">{copy}</p>
+                  <p className={`mt-3 leading-7 ${ui.muted}`}>{copy}</p>
                 </div>
               ))}
             </div>
           </div>
         </section>
 
-        <section className="bg-[#fff8ec] px-5 py-20">
+        <section id="events" className={`px-5 py-20 ${ui.softSurface}`}>
           <div className="mx-auto max-w-7xl">
             <div className="mb-8 flex flex-col justify-between gap-4 md:flex-row md:items-end">
               <div>
-                <p className="text-sm font-semibold uppercase tracking-[0.18em] text-[#8d6125]">Built with coaches</p>
-                <h2 className="mt-4 font-serif text-5xl font-semibold">Designed for real client work.</h2>
+                <p className={ui.overline}>Built with coaches</p>
+                <h2 className={`${ui.heading} mt-4 text-5xl`}>Designed for real client work.</h2>
               </div>
-              <Link href="/register/" className="rounded-full bg-[#17130d] px-6 py-3 text-center font-semibold text-[#fff7ec]">
+              <Link href="/register/" className={`rounded-full px-6 py-3 text-center font-semibold ${ui.button}`}>
                 Start your workspace
               </Link>
             </div>
             <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
               {testimonials.map(([quote, name, role]) => (
-                <figure key={name} className="rounded-3xl border border-[#2e2417]/10 bg-[#f3eddf] p-6">
-                  <blockquote className="leading-8 text-[#3b3023]">“{quote}”</blockquote>
+                <figure key={name} className={`p-6 ${ui.card}`}>
+                  <blockquote className={`leading-8 ${ui.ink}`}>“{quote}”</blockquote>
                   <figcaption className="mt-6">
                     <p className="font-semibold">{name}</p>
-                    <p className="text-sm text-[#5c5143]">{role}</p>
+                    <p className={`text-sm ${ui.muted}`}>{role}</p>
                   </figcaption>
                 </figure>
               ))}
@@ -327,37 +340,34 @@ export default function Starter() {
         </section>
 
         <section id="pricing" className="px-5 py-20">
-          <div className="mx-auto grid max-w-7xl grid-cols-1 overflow-hidden rounded-[2rem] border border-[#2e2417]/10 bg-[#17130d] text-[#fff7ec] lg:grid-cols-[0.9fr_1.1fr]">
+          <div className={`mx-auto grid max-w-7xl grid-cols-1 overflow-hidden rounded-[2rem] border lg:grid-cols-[0.9fr_1.1fr] ${ui.border} ${ui.darkPanel}`}>
             <div className="p-8 md:p-12">
-              <p className="text-sm font-semibold uppercase tracking-[0.18em] text-[#f3b35c]">Template package</p>
+              <p className="text-sm font-semibold uppercase tracking-[0.18em] text-[#c79a38]">Template package</p>
               <h2 className="mt-4 font-serif text-5xl font-semibold leading-tight">
                 Launch a coaching practice with the workspace already inside.
               </h2>
             </div>
-            <div className="bg-[#fff7ec] p-8 text-[#17130d] md:p-12">
+            <div className={`p-8 md:p-12 ${ui.surface} ${ui.ink}`}>
               <h3 className="text-2xl font-semibold">Executive Momentum</h3>
-              <p className="mt-3 leading-7 text-[#5c5143]">
+              <p className={`mt-3 leading-7 ${ui.muted}`}>
                 A ready-made package page, client records, session memory, prep briefs, resources, and portal flow.
               </p>
               <div className="mt-7 grid grid-cols-1 gap-3 sm:grid-cols-2">
                 {['6 coaching sessions', 'AI-assisted session notes', 'Shared resources', 'Client portal access'].map((item) => (
-                  <div key={item} className="rounded-2xl bg-[#f3eddf] p-4 font-medium">
+                  <div key={item} className={`rounded-2xl p-4 font-medium ${ui.softSurface}`}>
                     {item}
                   </div>
                 ))}
               </div>
-              <Link
-                href="/register/"
-                className="mt-8 inline-flex rounded-full bg-[#17130d] px-7 py-4 font-semibold text-[#fff7ec]"
-              >
+              <Link href="/register/" className={`mt-8 inline-flex rounded-full px-7 py-4 font-semibold ${ui.button}`}>
                 Create workspace
               </Link>
             </div>
           </div>
         </section>
 
-        <footer className="border-t border-[#2e2417]/10 px-5 py-10">
-          <div className="mx-auto flex max-w-7xl flex-col justify-between gap-5 text-sm text-[#5c5143] md:flex-row">
+        <footer className={`border-t px-5 py-10 ${ui.border}`}>
+          <div className={`mx-auto flex max-w-7xl flex-col justify-between gap-5 text-sm md:flex-row ${ui.muted}`}>
             <p>© 2026 Coaching SaaS Workspace. Coaching beyond the session.</p>
             <div className="flex gap-5">
               <Link href="/privacy-policy/">Privacy Policy</Link>