diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 403bf74..735044e 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -19,6 +19,9 @@ jobs:
       - name: Install
         run: npm ci
 
+      - name: No raw colors
+        run: npm run check:colors
+
       - name: Test
         run: npm test
 
diff --git a/.gitignore b/.gitignore
index 0a1de36..cdf0a71 100644
--- a/.gitignore
+++ b/.gitignore
@@ -15,3 +15,4 @@ prisma/*.db-journal
 # Keep generated SFX (small, needed to mix)
 # data/voices.json is committed as the default character map
 .vercel
+*.tsbuildinfo
diff --git a/README.md b/README.md
index cf5ac04..3d21f63 100644
--- a/README.md
+++ b/README.md
@@ -87,7 +87,8 @@ Default routing (not intelligent): Indic languages → Sarvam `bulbul:v3`. Engli
 
 ## Stack (grows only when the audio works)
 
-- Next.js App Router + TypeScript + Tailwind
+- Next.js App Router + TypeScript + Tailwind for layout
+- House design system (`@house/tokens`, `@house/react`, vendored in `vendor/`) for color, type, and controls; `npm run check:colors` fails on raw colors
 - Local JSON + wavs on disk, then Prisma (SQLite locally; Postgres when you need it)
 - FFmpeg via `ffmpeg-static` (system `ffmpeg` used if on PATH)
 - Sarvam first. ElevenLabs TTS only, as a week-4 benchmark. No Music API.
diff --git a/app/create-form.tsx b/app/create-form.tsx
index 3a31622..1720e40 100644
--- a/app/create-form.tsx
+++ b/app/create-form.tsx
@@ -1,7 +1,8 @@
 "use client";
 
-import { useMemo, useState } from "react";
+import { useId, useMemo, useState } from "react";
 import { useRouter } from "next/navigation";
+import { Button, Field, Stack, Surface, Text } from "@house/react";
 import { USE_CASES, type UseCaseId } from "@/lib/use-cases";
 import { parseCanonicalScript } from "@/server/pipeline/parse";
 import { useOptionalOnboarding } from "./onboarding/provider";
@@ -23,6 +24,7 @@ export function CreateEpisodeForm() {
   const [script, setScript] = useState(selected.script);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const scriptId = useId();
 
   const parsed = useMemo(() => tryParse(script), [script]);
 
@@ -58,7 +60,7 @@ export function CreateEpisodeForm() {
   return (
     <form onSubmit={onSubmit} className="mt-8 space-y-6">
       <div>
-        <p className="text-sm uppercase tracking-widest text-[var(--muted)]">Use case</p>
+        <p className="text-sm uppercase tracking-widest text-[var(--text-muted)]">Use case</p>
         <div data-tour="use-cases" className="mt-3 grid gap-3 sm:grid-cols-3">
           {USE_CASES.map((useCase) => {
             const on = useCase.id === active;
@@ -69,13 +71,16 @@ export function CreateEpisodeForm() {
                 onClick={() => pick(useCase.id)}
                 className={`rounded-lg border px-3 py-3 text-left ${
                   on
-                    ? "border-[var(--accent)] bg-[var(--panel)]"
-                    : "border-[var(--line)] bg-transparent hover:border-[var(--accent)]"
+                    ? "border-[var(--accent)] bg-[var(--accent-subtle)]"
+                    : "border-[var(--border)] bg-transparent hover:border-[var(--accent)]"
                 }`}
+                aria-pressed={on}
               >
                 <p className="text-sm">{useCase.title}</p>
-                <p className="mt-1 text-xs text-[var(--muted)]">{useCase.who}</p>
-                <p className="mt-2 text-xs leading-relaxed text-[var(--muted)]">{useCase.blurb}</p>
+                <p className="mt-1 text-xs text-[var(--text-muted)]">{useCase.who}</p>
+                <p className="mt-2 text-xs leading-relaxed text-[var(--text-muted)]">
+                  {useCase.blurb}
+                </p>
               </button>
             );
           })}
@@ -83,65 +88,62 @@ export function CreateEpisodeForm() {
       </div>
 
       <div className="grid gap-6 lg:grid-cols-[1fr_16rem]">
-        <div className="space-y-4">
-          <label className="block text-sm text-[var(--muted)]">
-            Title
-            <input
-              value={title}
-              onChange={(e) => setTitle(e.target.value)}
-              className="mt-1 w-full rounded-md border border-[var(--line)] bg-[var(--panel)] px-3 py-2 text-[var(--text)]"
-            />
-          </label>
-          <label className="block text-sm text-[var(--muted)]">
-            Script
+        <Stack gap={4}>
+          <Field label="Title" value={title} onChange={(e) => setTitle(e.target.value)} />
+          <Stack gap={1}>
+            <Text as="label" size="sm" weight="medium" htmlFor={scriptId}>
+              Script
+            </Text>
             <textarea
+              id={scriptId}
               value={script}
               onChange={(e) => setScript(e.target.value)}
               rows={16}
-              className="mt-1 w-full rounded-md border border-[var(--line)] bg-[var(--panel)] px-3 py-2 font-mono text-sm text-[var(--text)]"
+              className="w-full rounded-[var(--radius-md)] border border-[var(--border-strong)] bg-[var(--surface)] px-3 py-2 font-mono text-sm text-[var(--text)]"
             />
-          </label>
-        </div>
+          </Stack>
+        </Stack>
 
-        <aside
-          data-tour="parse-panel"
-          className="h-fit rounded-lg border border-[var(--line)] bg-[var(--panel)] p-4"
-        >
-          <p className="mono text-xs uppercase tracking-widest text-[var(--muted)]">Parse</p>
+        <Surface as="aside" data-tour="parse-panel" className="h-fit">
+          <p className="mono text-xs uppercase tracking-widest text-[var(--text-muted)]">Parse</p>
           {parsed ? (
             <>
               <p className="mt-3 text-2xl">{parsed.plan.lines.length}</p>
-              <p className="text-xs text-[var(--muted)]">lines · {parsed.plan.sfx.length} SFX</p>
+              <p className="text-xs text-[var(--text-muted)]">
+                lines · {parsed.plan.sfx.length} SFX
+              </p>
               <div className="mt-4 space-y-2">
                 {parsed.plan.characters.map((character) => (
                   <p key={character.name} className="text-sm">
                     {character.name}
-                    <span className="mono ml-2 text-xs text-[var(--muted)]">{character.role}</span>
+                    <span className="mono ml-2 text-xs text-[var(--text-muted)]">
+                      {character.role}
+                    </span>
                   </p>
                 ))}
               </div>
               {parsed.plan.sfx.length > 0 && (
-                <p className="mono mt-4 text-xs text-[var(--muted)]">
+                <p className="mono mt-4 text-xs text-[var(--text-muted)]">
                   {parsed.plan.sfx.map((s) => s.tag).join(" · ")}
                 </p>
               )}
             </>
           ) : (
-            <p className="mt-3 text-sm text-[var(--muted)]">
+            <p className="mt-3 text-sm text-[var(--text-muted)]">
               Add [CHARACTER] headers to see the plan.
             </p>
           )}
-        </aside>
+        </Surface>
       </div>
 
-      {error && <p className="text-[var(--bad)]">{error}</p>}
-      <button
-        type="submit"
-        disabled={busy || !parsed}
-        className="rounded-md bg-[var(--accent)] px-4 py-2 text-black disabled:opacity-50"
-      >
+      {error && (
+        <Text as="p" status="danger">
+          {error}
+        </Text>
+      )}
+      <Button type="submit" variant="primary" disabled={busy || !parsed}>
         {busy ? "Creating…" : "Open review desk"}
-      </button>
+      </Button>
     </form>
   );
 }
diff --git a/app/demo-player.tsx b/app/demo-player.tsx
index f9a4bfa..0970d40 100644
--- a/app/demo-player.tsx
+++ b/app/demo-player.tsx
@@ -22,7 +22,7 @@ export function OpenDeskLink({ href, children }: { href: string; children: React
     <Link
       href={href}
       data-tour="open-desk"
-      className="rounded-md bg-[var(--accent)] px-3 py-2 text-sm text-black"
+      className="rounded-[var(--radius-sm)] bg-[var(--accent)] px-4 py-2 text-sm font-medium text-[var(--accent-contrast)]"
       onClick={() => onboarding?.completeAction("open-desk")}
     >
       {children}
diff --git a/app/globals.css b/app/globals.css
index 70ad70f..2617a7f 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,22 +1,16 @@
 @import "tailwindcss";
 
+/* Colors come from @house/tokens. AudioForge keeps its editorial serif. */
 :root {
-  --bg: #0f1115;
-  --panel: #171a21;
-  --line: #2a2f3a;
-  --text: #ece8df;
-  --muted: #9a9386;
-  --ok: #7dcea0;
-  --warn: #e6b566;
-  --bad: #e07a6b;
-  --accent: #d4a574;
+  --font-sans: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
+  --scrim: color-mix(in srgb, var(--bg) 72%, transparent);
 }
 
 html,
 body {
   background: var(--bg);
   color: var(--text);
-  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
+  font-family: var(--font-sans);
 }
 
 body {
@@ -29,5 +23,5 @@ button {
 
 code,
 .mono {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-family: var(--font-mono);
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index b4c8bb0..4ee0ab2 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
 import { OnboardingShell } from "./onboarding/shell";
 import { WebVitals } from "./web-vitals";
+import "@house/tokens/theme.css";
+import "@house/react/styles.css";
 import "./globals.css";
 
 export const metadata: Metadata = {
@@ -10,7 +12,7 @@ export const metadata: Metadata = {
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en">
+    <html lang="en" data-theme="dark">
       <body className="antialiased">
         <OnboardingShell>{children}</OnboardingShell>
         <WebVitals />
diff --git a/app/onboarding/badge.tsx b/app/onboarding/badge.tsx
index b79c471..035599b 100644
--- a/app/onboarding/badge.tsx
+++ b/app/onboarding/badge.tsx
@@ -4,7 +4,7 @@ import { formatKn } from "./steps";
 
 export function StepBadge({ index, total }: { index: number; total: number }) {
   return (
-    <span className="mono rounded-full border border-[var(--accent)] bg-[var(--bg)] px-2 py-0.5 text-xs text-[var(--accent)]">
+    <span className="mono rounded-full border border-[var(--accent)] bg-[var(--accent-subtle)] px-2 py-0.5 text-xs text-[var(--accent)]">
       {formatKn(index, total)}
     </span>
   );
diff --git a/app/onboarding/banner.tsx b/app/onboarding/banner.tsx
index e731934..c2d742c 100644
--- a/app/onboarding/banner.tsx
+++ b/app/onboarding/banner.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { Button } from "@house/react";
 import { StepBadge } from "./badge";
 import { useOnboarding } from "./provider";
 
@@ -8,31 +9,23 @@ export function OnboardingBanner() {
   if (completed || paused || !step || step.kind !== "tour") return null;
 
   return (
-    <div className="sticky top-0 z-30 border-b border-[var(--line)] bg-[var(--panel)]">
+    <div className="sticky top-0 z-30 border-b border-[var(--border)] bg-[var(--surface)]">
       <div className="mx-auto flex max-w-5xl flex-wrap items-center gap-3 px-6 py-3">
         <StepBadge index={index} total={total} />
         <p className="min-w-0 flex-1 text-sm">
           <span className="text-[var(--text)]">{step.title}. </span>
-          <span className="text-[var(--muted)]">{step.body}</span>
+          <span className="text-[var(--text-muted)]">{step.body}</span>
         </p>
         <div className="flex flex-wrap items-center gap-2">
           {index > 1 && (
-            <button
-              type="button"
-              onClick={back}
-              className="rounded border border-[var(--line)] px-2 py-1 text-sm"
-            >
+            <Button size="sm" onClick={back}>
               Back
-            </button>
+            </Button>
           )}
-          <button
-            type="button"
-            onClick={next}
-            className="rounded-md bg-[var(--accent)] px-3 py-1 text-sm text-black"
-          >
+          <Button size="sm" variant="primary" onClick={next}>
             Next
-          </button>
-          <button type="button" onClick={skip} className="text-sm text-[var(--muted)]">
+          </Button>
+          <button type="button" onClick={skip} className="text-sm text-[var(--text-muted)]">
             Skip
           </button>
         </div>
diff --git a/app/onboarding/coachmark.tsx b/app/onboarding/coachmark.tsx
index 5a5ac8d..b1b2682 100644
--- a/app/onboarding/coachmark.tsx
+++ b/app/onboarding/coachmark.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { Button, Surface } from "@house/react";
 import { StepBadge } from "./badge";
 import { useOnboarding } from "./provider";
 
@@ -59,7 +60,7 @@ export function OnboardingCoachmark() {
           left: hole.left,
           width: hole.width,
           height: hole.height,
-          boxShadow: "0 0 0 9999px rgba(0,0,0,0.55)",
+          boxShadow: "0 0 0 9999px var(--scrim)",
         }}
       />
       <div
@@ -68,8 +69,9 @@ export function OnboardingCoachmark() {
       >
         <StepBadge index={index} total={total} />
       </div>
-      <div
-        className="pointer-events-auto absolute w-[min(20rem,calc(100vw-2rem))] rounded-lg border border-[var(--line)] bg-[var(--panel)] p-4"
+      <Surface
+        raised
+        className="pointer-events-auto absolute w-[min(20rem,calc(100vw-2rem))]"
         style={{
           top: tipTop,
           left: Math.min(hole.left, window.innerWidth - 336),
@@ -79,7 +81,7 @@ export function OnboardingCoachmark() {
           <StepBadge index={index} total={total} />
         </div>
         <p className="mt-2 text-sm">{step.title}</p>
-        <p className="mt-1 text-sm text-[var(--muted)]">{step.body}</p>
+        <p className="mt-1 text-sm text-[var(--text-muted)]">{step.body}</p>
         {step.cheat && (
           <ul className="mono mt-3 space-y-1 text-xs text-[var(--accent)]">
             {step.cheat.map((line) => (
@@ -89,23 +91,15 @@ export function OnboardingCoachmark() {
         )}
         <div className="mt-3 flex gap-2">
           {index > 1 && (
-            <button
-              type="button"
-              onClick={back}
-              className="rounded border border-[var(--line)] px-2 py-1 text-sm"
-            >
+            <Button size="sm" onClick={back}>
               Back
-            </button>
+            </Button>
           )}
-          <button
-            type="button"
-            onClick={next}
-            className="rounded-md bg-[var(--accent)] px-3 py-1 text-sm text-black"
-          >
+          <Button size="sm" variant="primary" onClick={next}>
             Next
-          </button>
+          </Button>
         </div>
-      </div>
+      </Surface>
     </div>
   );
 }
diff --git a/app/onboarding/menu.tsx b/app/onboarding/menu.tsx
index 9f82535..ebe5d35 100644
--- a/app/onboarding/menu.tsx
+++ b/app/onboarding/menu.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { Button, Surface } from "@house/react";
 import { useOnboarding } from "./provider";
 import { STEPS, formatKn } from "./steps";
 
@@ -8,16 +9,17 @@ export function HowToMenu() {
 
   return (
     <div className="relative">
-      <button
-        type="button"
+      <Button
+        size="sm"
+        className="mono"
+        aria-expanded={menuOpen}
         onClick={() => setMenuOpen(!menuOpen)}
-        className="mono rounded-md border border-[var(--line)] bg-[var(--panel)] px-3 py-1.5 text-xs"
       >
         {completed ? "How to · Done" : `How to · ${formatKn(Math.max(index, 1), total)}`}
-      </button>
+      </Button>
       {menuOpen && (
-        <div className="absolute right-0 z-50 mt-2 w-72 rounded-lg border border-[var(--line)] bg-[var(--panel)] p-3 shadow-xl">
-          <p className="mono text-xs uppercase tracking-widest text-[var(--muted)]">How to</p>
+        <Surface raised padding={3} className="absolute right-0 z-50 mt-2 w-72">
+          <p className="mono text-xs uppercase tracking-widest text-[var(--text-muted)]">How to</p>
           <ol className="mt-2 space-y-1">
             {STEPS.map((item) => {
               const current = !completed && item.index === index;
@@ -30,10 +32,12 @@ export function HowToMenu() {
                       setMenuOpen(false);
                     }}
                     className={`flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm ${
-                      current ? "bg-[var(--bg)] text-[var(--accent)]" : "hover:bg-[var(--bg)]"
+                      current
+                        ? "bg-[var(--accent-subtle)] text-[var(--accent)]"
+                        : "hover:bg-[var(--bg-subtle)]"
                     }`}
                   >
-                    <span className="mono text-xs text-[var(--muted)]">
+                    <span className="mono text-xs text-[var(--text-muted)]">
                       {formatKn(item.index, total)}
                     </span>
                     <span>{item.title}</span>
@@ -45,11 +49,11 @@ export function HowToMenu() {
           <button
             type="button"
             onClick={replay}
-            className="mt-3 text-sm text-[var(--muted)]"
+            className="mt-3 text-sm text-[var(--text-muted)]"
           >
             Replay from 1/{total}
           </button>
-        </div>
+        </Surface>
       )}
     </div>
   );
diff --git a/app/onboarding/popup.tsx b/app/onboarding/popup.tsx
index 5d73497..30e58e1 100644
--- a/app/onboarding/popup.tsx
+++ b/app/onboarding/popup.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { Button, IconButton, Surface } from "@house/react";
 import { StepBadge } from "./badge";
 import { useOnboarding } from "./provider";
 import { formatKn } from "./steps";
@@ -15,32 +16,26 @@ export function OnboardingPopup() {
       <button
         type="button"
         aria-label="Dismiss"
-        className="absolute inset-0 bg-black/60"
+        className="absolute inset-0 bg-[var(--scrim)]"
         onClick={pause}
       />
-      <div className="relative w-full max-w-md rounded-lg border border-[var(--line)] bg-[var(--panel)] p-6 shadow-xl">
+      <Surface raised padding={6} className="relative w-full max-w-md">
         <div className="flex items-center justify-between gap-3">
           <StepBadge index={index} total={total} />
-          <button type="button" onClick={pause} className="text-sm text-[var(--muted)]">
-            ×
-          </button>
+          <IconButton size="sm" label="Pause tour" icon="×" onClick={pause} />
         </div>
         <h2 className="mt-4 text-2xl">{step.title}</h2>
-        <p className="mt-2 text-[var(--muted)]">{step.body}</p>
+        <p className="mt-2 text-[var(--text-muted)]">{step.body}</p>
         <div className="mt-6 flex flex-wrap items-center justify-between gap-3">
-          <button type="button" onClick={skip} className="text-sm text-[var(--muted)]">
+          <button type="button" onClick={skip} className="text-sm text-[var(--text-muted)]">
             Skip
           </button>
-          <button
-            type="button"
-            onClick={next}
-            className="rounded-md bg-[var(--accent)] px-4 py-2 text-black"
-          >
+          <Button variant="primary" onClick={next}>
             {finish ? "Finish" : "Start"}
-          </button>
+          </Button>
         </div>
-        <p className="mono mt-4 text-xs text-[var(--muted)]">{formatKn(index, total)}</p>
-      </div>
+        <p className="mono mt-4 text-xs text-[var(--text-muted)]">{formatKn(index, total)}</p>
+      </Surface>
     </div>
   );
 }
diff --git a/app/onboarding/shell.tsx b/app/onboarding/shell.tsx
index 1a73893..9a7dca2 100644
--- a/app/onboarding/shell.tsx
+++ b/app/onboarding/shell.tsx
@@ -9,7 +9,7 @@ import { OnboardingProvider } from "./provider";
 export function OnboardingShell({ children }: { children: React.ReactNode }) {
   return (
     <OnboardingProvider>
-      <div className="sticky top-0 z-40 flex justify-end border-b border-[var(--line)] bg-[var(--bg)]/90 px-6 py-3 backdrop-blur">
+      <div className="sticky top-0 z-40 flex justify-end border-b border-[var(--border)] bg-[var(--bg)]/90 px-6 py-3 backdrop-blur">
         <HowToMenu />
       </div>
       <OnboardingBanner />
diff --git a/app/page.tsx b/app/page.tsx
index 4cddaba..5205e4f 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -18,22 +18,22 @@ export default function HomePage() {
 
   return (
     <main className="mx-auto max-w-3xl px-6 py-12">
-      <p className="mono text-xs tracking-widest text-[var(--muted)] uppercase">AudioForge</p>
+      <p className="mono text-xs tracking-widest text-[var(--text-muted)] uppercase">AudioForge</p>
       <h1 className="mt-3 text-4xl leading-tight">Script in. Episode out.</h1>
-      <p className="mt-3 max-w-xl text-[var(--muted)]">
+      <p className="mt-3 max-w-xl text-[var(--text-muted)]">
         Hindi multi-character audio from a canonical script. Listen first. Then try a
         use case.
       </p>
 
       {demo && (
-        <section className="mt-10 rounded-lg border border-[var(--accent)] bg-[var(--panel)] p-5">
+        <section className="mt-10 rounded-lg border border-[var(--accent)] bg-[var(--surface)] p-5">
           <div className="flex flex-wrap items-end justify-between gap-3">
             <div>
-              <p className="mono text-xs uppercase tracking-widest text-[var(--muted)]">
+              <p className="mono text-xs uppercase tracking-widest text-[var(--text-muted)]">
                 Seeded demo
               </p>
               <h2 className="mt-1 text-2xl">{demo.title}</h2>
-              <p className="mono mt-2 text-sm text-[var(--muted)]">
+              <p className="mono mt-2 text-sm text-[var(--text-muted)]">
                 ₹{(g?.costInr ?? 0).toFixed(2)} · {clock(g?.durationMs ?? 0)} ·{" "}
                 {demo.plan.lines.length} lines · {demo.plan.characters.length} voices
               </p>
@@ -46,7 +46,7 @@ export default function HomePage() {
 
       <section className="mt-14">
         <h2 className="text-2xl">Try a use case</h2>
-        <p className="mt-2 text-[var(--muted)]">
+        <p className="mt-2 text-[var(--text-muted)]">
           Pick one, watch the parse, then open the desk. Generate lives on the next
           screen.
         </p>
@@ -55,17 +55,17 @@ export default function HomePage() {
 
       {others.length > 0 && (
         <section className="mt-12">
-          <h2 className="text-sm uppercase tracking-widest text-[var(--muted)]">Recent</h2>
+          <h2 className="text-sm uppercase tracking-widest text-[var(--text-muted)]">Recent</h2>
           <ul className="mt-4 space-y-2">
             {others.map((ep) => (
               <li key={ep.id}>
                 <Link
                   href={`/review/${ep.id}`}
-                  className="block rounded-lg border border-[var(--line)] bg-[var(--panel)] px-4 py-3 hover:border-[var(--accent)]"
+                  className="block rounded-lg border border-[var(--border)] bg-[var(--surface)] px-4 py-3 hover:border-[var(--accent)]"
                 >
                   <div className="flex justify-between gap-4">
                     <span>{ep.title}</span>
-                    <span className="mono text-sm text-[var(--muted)]">
+                    <span className="mono text-sm text-[var(--text-muted)]">
                       {ep.plan.lines.length} lines
                     </span>
                   </div>
diff --git a/app/review/[episodeId]/review-desk.tsx b/app/review/[episodeId]/review-desk.tsx
index be2e739..9145fca 100644
--- a/app/review/[episodeId]/review-desk.tsx
+++ b/app/review/[episodeId]/review-desk.tsx
@@ -2,6 +2,7 @@
 
 import { useMemo, useRef, useState } from "react";
 import Link from "next/link";
+import { Button, Surface, Text } from "@house/react";
 import type { EpisodeRecord, LineStatus } from "@/server/types";
 import { useOptionalOnboarding } from "../../onboarding/provider";
 
@@ -83,14 +84,14 @@ export function ReviewDesk({ episode: initial }: { episode: EpisodeRecord }) {
 
   return (
     <main className="mx-auto max-w-5xl px-6 py-8">
-      <Link href="/" className="text-sm text-[var(--muted)]">
+      <Link href="/" className="text-sm text-[var(--text-muted)]">
         ← Use cases
       </Link>
       <header className="mt-4 flex flex-wrap items-end justify-between gap-4">
         <div>
-          <p className="mono text-xs uppercase tracking-widest text-[var(--muted)]">Review desk</p>
+          <p className="mono text-xs uppercase tracking-widest text-[var(--text-muted)]">Review desk</p>
           <h1 className="mt-1 text-3xl">{episode.title}</h1>
-          <p className="mono mt-2 text-sm text-[var(--muted)]">
+          <p className="mono mt-2 text-sm text-[var(--text-muted)]">
             ₹{(g?.costInr ?? 0).toFixed(2)} · {clock(g?.durationMs ?? 0)} · Regenerations{" "}
             {g?.regenerations ?? 0}
           </p>
@@ -99,7 +100,7 @@ export function ReviewDesk({ episode: initial }: { episode: EpisodeRecord }) {
               {voices.map((v) => (
                 <span
                   key={v.character}
-                  className="rounded-full border border-[var(--line)] px-2 py-1 text-xs"
+                  className="rounded-full border border-[var(--border)] px-2 py-1 text-xs"
                 >
                   {v.character} → {v.voice}
                 </span>
@@ -108,42 +109,41 @@ export function ReviewDesk({ episode: initial }: { episode: EpisodeRecord }) {
           )}
         </div>
         <div className="flex flex-wrap gap-2">
-          <button
+          <Button
+            variant="primary"
             data-tour="generate"
             disabled={!!busy}
             onClick={() => run(`/api/episodes/${episode.id}/generate`, undefined, "generating")}
-            className="rounded-md bg-[var(--accent)] px-3 py-2 text-black disabled:opacity-50"
           >
             {busy === "generating" ? "Generating…" : "Generate"}
-          </button>
-          <button
+          </Button>
+          <Button
             disabled={!!busy || flagged.length === 0}
             onClick={() =>
               run(`/api/episodes/${episode.id}/regenerate`, { orders: flagged }, "regen-flagged")
             }
-            className="rounded-md border border-[var(--line)] px-3 py-2 disabled:opacity-40"
           >
             Regenerate flagged ({flagged.length})
-          </button>
-          <button
+          </Button>
+          <Button
             disabled={!!busy}
             onClick={() => run(`/api/episodes/${episode.id}/mix`, undefined, "mixing")}
-            className="rounded-md border border-[var(--line)] px-3 py-2 disabled:opacity-40"
           >
             {busy === "mixing" ? "Mixing…" : "Remix"}
-          </button>
+          </Button>
         </div>
       </header>
 
-      {error && <p className="mt-4 text-[var(--bad)]">{error}</p>}
+      {error && (
+        <Text as="p" status="danger" className="mt-4">
+          {error}
+        </Text>
+      )}
 
       {episode.mixMp3 && (
-        <section
-          data-tour="mix-player"
-          className="mt-8 rounded-lg border border-[var(--line)] bg-[var(--panel)] p-4"
-        >
+        <Surface as="section" data-tour="mix-player" className="mt-8">
           <div className="flex items-center justify-between gap-4">
-            <p className="text-sm text-[var(--muted)]">Final mix</p>
+            <p className="text-sm text-[var(--text-muted)]">Final mix</p>
             <a
               className="text-sm text-[var(--accent)]"
               href={`/api/audio/${episode.id}/episode.mp3`}
@@ -166,10 +166,10 @@ export function ReviewDesk({ episode: initial }: { episode: EpisodeRecord }) {
               setActiveOrder(order);
             }}
           />
-        </section>
+        </Surface>
       )}
 
-      <p className="mono mt-8 text-sm text-[var(--muted)]">
+      <p className="mono mt-8 text-sm text-[var(--text-muted)]">
         {episode.plan.lines
           .map((l) => {
             const s = episode.lineStatuses[l.order];
@@ -199,15 +199,15 @@ export function ReviewDesk({ episode: initial }: { episode: EpisodeRecord }) {
                   onboarding?.completeAction("line");
                 }
               }}
-              className={`cursor-pointer rounded-lg border bg-[var(--panel)] px-4 py-3 ${
+              className={`cursor-pointer rounded-lg border bg-[var(--surface)] px-4 py-3 ${
                 activeOrder === line.order
                   ? "border-[var(--accent)]"
-                  : "border-[var(--line)]"
+                  : "border-[var(--border)]"
               }`}
             >
               <div className="flex flex-wrap items-start justify-between gap-3">
                 <div className="min-w-0 flex-1">
-                  <p className="mono text-xs text-[var(--muted)]">
+                  <p className="mono text-xs text-[var(--text-muted)]">
                     {statusIcon(status)} {line.order} · {line.character}
                     {line.emotion ? ` · ${line.emotion}` : ""}
                   </p>
@@ -225,7 +225,8 @@ export function ReviewDesk({ episode: initial }: { episode: EpisodeRecord }) {
                       src={`/api/audio/${episode.id}/line_${String(line.order).padStart(3, "0")}.wav`}
                     />
                   )}
-                  <button
+                  <Button
+                    size="sm"
                     disabled={!!busy}
                     onClick={() => {
                       onboarding?.completeAction("qa");
@@ -235,32 +236,33 @@ export function ReviewDesk({ episode: initial }: { episode: EpisodeRecord }) {
                         `regen-${line.order}`,
                       );
                     }}
-                    className="rounded border border-[var(--line)] px-2 py-1 text-sm"
                   >
                     Regenerate
-                  </button>
-                  <button
+                  </Button>
+                  <Button
+                    size="sm"
                     disabled={!!busy}
+                    aria-pressed={status === "needs_regeneration"}
                     onClick={() => {
                       onboarding?.completeAction("qa");
                       void run(`/api/episodes/${episode.id}/lines/${line.order}`, {
                         status: "needs_regeneration",
                       });
                     }}
-                    className="rounded border border-[var(--line)] px-2 py-1 text-sm"
                   >
                     Flag
-                  </button>
-                  <button
+                  </Button>
+                  <Button
+                    size="sm"
                     disabled={!!busy}
+                    aria-pressed={status === "approved"}
                     onClick={() => {
                       onboarding?.completeAction("qa");
                       void run(`/api/episodes/${episode.id}/lines/${line.order}`, { status: "approved" });
                     }}
-                    className="rounded border border-[var(--ok)] px-2 py-1 text-sm text-[var(--ok)]"
                   >
                     Approve
-                  </button>
+                  </Button>
                 </div>
               </div>
             </li>
diff --git a/package-lock.json b/package-lock.json
index 7c8fa43..56fed46 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,8 @@
       "name": "audioforge",
       "version": "0.1.0",
       "dependencies": {
+        "@house/react": "file:vendor/house-react-0.2.0.tgz",
+        "@house/tokens": "file:vendor/house-tokens-0.2.0.tgz",
         "@prisma/client": "^6.16.1",
         "ffmpeg-static": "^5.2.0",
         "ffprobe-static": "^3.1.0",
@@ -677,6 +679,25 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@house/react": {
+      "version": "0.2.0",
+      "resolved": "file:vendor/house-react-0.2.0.tgz",
+      "integrity": "sha512-lnHeeMEA/ZG6oSHkS41xwSNG4TF+txjMT0iaFwccrQZPJLD/8Eta2wHSyiiSMAmF5oldeSmnsaCmZ2k5iSUwMA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@house/tokens": "*",
+        "react": ">=18"
+      }
+    },
+    "node_modules/@house/tokens": {
+      "version": "0.2.0",
+      "resolved": "file:vendor/house-tokens-0.2.0.tgz",
+      "integrity": "sha512-TRInyc9nssgDye35EKt8A5LiqHoBFQ8Z++Cutjq5NGjcPcHkry3KTkXqhSpEyausO9jXNtpIkrsJbIArRpy30A==",
+      "license": "MIT",
+      "bin": {
+        "house-check-raw-color": "bin/check-raw-color.mjs"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.2",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.2.tgz",
diff --git a/package.json b/package.json
index f934e6b..c028b55 100644
--- a/package.json
+++ b/package.json
@@ -21,9 +21,12 @@
     "test:parser": "tsx scripts/test-parser.ts",
     "db:sync": "tsx scripts/sync-prisma.ts",
     "db:push": "prisma db push",
-    "db:generate": "prisma generate"
+    "db:generate": "prisma generate",
+    "check:colors": "house-check-raw-color app lib server scripts"
   },
   "dependencies": {
+    "@house/react": "file:vendor/house-react-0.2.0.tgz",
+    "@house/tokens": "file:vendor/house-tokens-0.2.0.tgz",
     "@prisma/client": "^6.16.1",
     "ffmpeg-static": "^5.2.0",
     "ffprobe-static": "^3.1.0",
diff --git a/vendor/house-react-0.2.0.tgz b/vendor/house-react-0.2.0.tgz
new file mode 100644
index 0000000..566244c
Binary files /dev/null and b/vendor/house-react-0.2.0.tgz differ
diff --git a/vendor/house-tokens-0.2.0.tgz b/vendor/house-tokens-0.2.0.tgz
new file mode 100644
index 0000000..20d7850
Binary files /dev/null and b/vendor/house-tokens-0.2.0.tgz differ