diff --git a/CLAUDE.md b/CLAUDE.md
index 022b9c31..64be3737 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -71,7 +71,7 @@ We enforce this with a Claude hook (`scripts/hooks/reuse_surface_reminder.sh`) t
 
 ## Styling & Tokens
 
-- **Semantic Tokens are Canonical:** Style with semantic Tailwind classes (e.g., `bg-surface`, `text-ink`, `border-border`, `text-brand-primary`). 
+- **Semantic Tokens are Canonical:** Style with semantic Tailwind classes (e.g., `bg-surface-card`, `text-content-primary`, `border-border-light`, `text-brand-amber`). 
 - **No Hardcoded Colors:** Never hardcode hex values (`#ef4444`) or raw Tailwind palette colors (`bg-red-500`, `text-slate-400`) in feature code. 
 - **Typography:** Rely on global typography settings. If custom typography components are introduced (e.g., a `<Text>` wrapper), they must be imported from the shared UI directory, never hand-styled inline.
 
diff --git a/src/components/DropZone.tsx b/src/components/DropZone.tsx
index a52ecd55..20cdaee4 100644
--- a/src/components/DropZone.tsx
+++ b/src/components/DropZone.tsx
@@ -55,8 +55,8 @@ export function DropZone({ onFile, disabled, status }: DropZoneProps) {
         "rounded-xl border-2 border-dashed px-6 py-12 text-center",
         "transition-colors",
         dragOver
-          ? "border-neutral-900 bg-neutral-100 dark:border-neutral-100 dark:bg-neutral-800"
-          : "border-neutral-300 hover:border-neutral-500 dark:border-neutral-700 dark:hover:border-neutral-500",
+          ? "border-content-primary bg-surface-hover"
+          : "border-border hover:border-border-strong",
         disabled && "cursor-not-allowed opacity-60",
       ]
         .filter(Boolean)
@@ -74,16 +74,16 @@ export function DropZone({ onFile, disabled, status }: DropZoneProps) {
       <p className="text-sm font-medium">
         Drop a resume PDF here, or click to pick one
       </p>
-      <p className="text-xs text-neutral-500 dark:text-neutral-400">
+      <p className="text-xs text-content-muted">
         Your file stays in this browser tab.
       </p>
       {status && (
-        <p className="mt-2 text-xs text-neutral-600 dark:text-neutral-300">
+        <p className="mt-2 text-xs text-content-tertiary">
           {status}
         </p>
       )}
       {error && (
-        <p className="mt-2 text-xs text-red-600 dark:text-red-400">{error}</p>
+        <p className="mt-2 text-xs text-feedback-error-text">{error}</p>
       )}
     </label>
   );
diff --git a/src/components/PdfPreview.tsx b/src/components/PdfPreview.tsx
index d82b8a8b..739be36f 100644
--- a/src/components/PdfPreview.tsx
+++ b/src/components/PdfPreview.tsx
@@ -39,7 +39,7 @@ export function PdfPreview({ bytes, maxPages = 2 }: PdfPreviewProps) {
           canvas.width = viewport.width;
           canvas.height = viewport.height;
           canvas.className =
-            "w-full rounded border border-neutral-200 dark:border-neutral-800";
+            "w-full rounded border border-border-light";
           const ctx = canvas.getContext("2d");
           if (!ctx) continue;
           await page.render({ canvasContext: ctx, viewport }).promise;
@@ -61,7 +61,7 @@ export function PdfPreview({ bytes, maxPages = 2 }: PdfPreviewProps) {
   return (
     <div className="flex flex-col gap-2" ref={containerRef}>
       {error && (
-        <p className="text-xs text-red-600 dark:text-red-400">
+        <p className="text-xs text-feedback-error-text">
           Preview failed: {error}
         </p>
       )}
diff --git a/src/components/Result.tsx b/src/components/Result.tsx
index e7cdcb37..4163ed16 100644
--- a/src/components/Result.tsx
+++ b/src/components/Result.tsx
@@ -43,8 +43,8 @@ function StatusPill({
 }) {
   const cls =
     tone === "ok"
-      ? "bg-emerald-100 text-emerald-900 dark:bg-emerald-900/40 dark:text-emerald-200"
-      : "bg-amber-100 text-amber-900 dark:bg-amber-900/40 dark:text-amber-200";
+      ? "bg-feedback-success-bg text-feedback-success-text"
+      : "bg-feedback-warning-bg text-feedback-warning-text";
   return (
     <span
       className={`inline-flex rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider ${cls}`}
@@ -66,11 +66,11 @@ function ParsedCard({
   onReset: () => void;
 }) {
   return (
-    <section className="flex flex-col gap-6 rounded-xl border border-neutral-200 bg-white p-5 shadow-sm dark:border-neutral-800 dark:bg-neutral-900">
+    <section className="flex flex-col gap-6 rounded-xl border border-border-light bg-surface-card p-5 shadow-sm">
       <header className="flex items-center justify-between">
         <div className="flex items-center gap-3">
           <StatusPill tone="ok">Parsed</StatusPill>
-          <span className="text-xs text-neutral-500 dark:text-neutral-400">
+          <span className="text-xs text-content-muted">
             {result.diagnostics.pages} page
             {result.diagnostics.pages === 1 ? "" : "s"} ·{" "}
             {result.diagnostics.elapsedMs} ms
@@ -79,7 +79,7 @@ function ParsedCard({
         <button
           type="button"
           onClick={onReset}
-          className="text-xs text-neutral-600 hover:underline dark:text-neutral-300"
+          className="text-xs text-content-tertiary hover:underline"
         >
           Try another PDF
         </button>
@@ -87,16 +87,16 @@ function ParsedCard({
 
       <div className="grid gap-4 md:grid-cols-2">
         <div className="flex flex-col gap-2">
-          <h2 className="text-xs font-semibold uppercase tracking-wider text-neutral-500">
+          <h2 className="text-xs font-semibold uppercase tracking-wider text-content-muted">
             Source PDF
           </h2>
           <PdfPreview bytes={bytes} />
         </div>
         <div className="flex flex-col gap-2">
-          <h2 className="text-xs font-semibold uppercase tracking-wider text-neutral-500">
+          <h2 className="text-xs font-semibold uppercase tracking-wider text-content-muted">
             Extracted plain text
           </h2>
-          <pre className="max-h-[600px] overflow-auto rounded border border-neutral-200 bg-neutral-50 p-3 text-xs leading-relaxed dark:border-neutral-800 dark:bg-neutral-950">
+          <pre className="max-h-[600px] overflow-auto rounded border border-border-light bg-surface-subtle p-3 text-xs leading-relaxed">
             {result.rawText || "(no text extracted)"}
           </pre>
         </div>
@@ -112,21 +112,21 @@ function ParsedCard({
 function LayoutFlagsList({ triggers }: { triggers: readonly LayoutTrigger[] }) {
   return (
     <section className="flex flex-col gap-2">
-      <h2 className="text-xs font-semibold uppercase tracking-wider text-neutral-500">
+      <h2 className="text-xs font-semibold uppercase tracking-wider text-content-muted">
         Layout flags
       </h2>
       {triggers.length === 0 ? (
-        <p className="text-sm text-neutral-600 dark:text-neutral-400">
+        <p className="text-sm text-content-tertiary">
           None — single-column, text-PDF layout.
         </p>
       ) : (
         <ul className="flex flex-col gap-1.5">
           {triggers.map((t) => (
             <li key={t} className="text-sm">
-              <span className="font-mono text-xs text-neutral-700 dark:text-neutral-200">
+              <span className="font-mono text-xs text-content-secondary">
                 {t}
               </span>{" "}
-              <span className="text-neutral-600 dark:text-neutral-400">
+              <span className="text-content-tertiary">
                 — {LAYOUT_TRIGGER_BLURBS[t]}
               </span>
             </li>
@@ -141,23 +141,23 @@ function AtsScoreReadout({ score }: { score: AnonymousAtsScore }) {
   return (
     <section className="flex flex-col gap-2">
       <div className="flex items-baseline gap-2">
-        <h2 className="text-xs font-semibold uppercase tracking-wider text-neutral-500">
+        <h2 className="text-xs font-semibold uppercase tracking-wider text-content-muted">
           Reference ATS score
         </h2>
-        <span className="rounded bg-neutral-200 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wider text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300">
+        <span className="rounded bg-surface-subtle px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wider text-content-secondary">
           alpha
         </span>
         {score.algoVersion && (
-          <span className="text-[10px] text-neutral-500">
+          <span className="text-[10px] text-content-muted">
             algo v{score.algoVersion}
           </span>
         )}
       </div>
       <div className="flex items-baseline gap-3">
         <span className="text-3xl font-semibold">{score.overall}</span>
-        <span className="text-sm text-neutral-500">/ 100</span>
+        <span className="text-sm text-content-muted">/ 100</span>
       </div>
-      <p className="max-w-prose text-xs text-neutral-600 dark:text-neutral-400">
+      <p className="max-w-prose text-xs text-content-tertiary">
         Our reference number for iterating on the parser. Not a universal
         score — different ATSes weigh things differently. See the dimensions
         below.
@@ -190,7 +190,7 @@ function AtsScoreReadout({ score }: { score: AnonymousAtsScore }) {
         />
       </dl>
       {score.layout.multiplier < 1 && (
-        <p className="text-[11px] text-amber-700 dark:text-amber-300">
+        <p className="text-[11px] text-feedback-warning-text">
           Layout penalty applied (multiplier {score.layout.multiplier.toFixed(2)}
           ): pre-layout score was {score.preLayoutOverall}.
         </p>
@@ -213,21 +213,21 @@ function Dimension({
   hint: string;
 }) {
   return (
-    <div className="flex flex-col gap-1 rounded border border-neutral-200 p-2 dark:border-neutral-800">
-      <dt className="text-[10px] font-semibold uppercase tracking-wider text-neutral-500">
+    <div className="flex flex-col gap-1 rounded border border-border-light p-2">
+      <dt className="text-[10px] font-semibold uppercase tracking-wider text-content-muted">
         {label}
       </dt>
       <dd className="text-base font-medium">
         {gradable ? (
           <>
             {value}
-            <span className="text-xs text-neutral-500"> / {max}</span>
+            <span className="text-xs text-content-muted"> / {max}</span>
           </>
         ) : (
-          <span className="text-neutral-400">—</span>
+          <span className="text-content-muted">—</span>
         )}
       </dd>
-      <p className="text-[10px] text-neutral-500 dark:text-neutral-400">
+      <p className="text-[10px] text-content-muted">
         {hint}
       </p>
     </div>
@@ -242,10 +242,10 @@ function PerBulletFeedback({
   if (!bullets || bullets.length === 0) {
     return (
       <section className="flex flex-col gap-2">
-        <h2 className="text-xs font-semibold uppercase tracking-wider text-neutral-500">
+        <h2 className="text-xs font-semibold uppercase tracking-wider text-content-muted">
           Per-bullet feedback
         </h2>
-        <p className="text-sm text-neutral-600 dark:text-neutral-400">
+        <p className="text-sm text-content-tertiary">
           No bullet-shaped lines detected.
         </p>
       </section>
@@ -262,10 +262,10 @@ function PerBulletFeedback({
 
   return (
     <section className="flex flex-col gap-2">
-      <h2 className="text-xs font-semibold uppercase tracking-wider text-neutral-500">
+      <h2 className="text-xs font-semibold uppercase tracking-wider text-content-muted">
         Per-bullet feedback
       </h2>
-      <p className="max-w-prose text-xs text-neutral-600 dark:text-neutral-400">
+      <p className="max-w-prose text-xs text-content-tertiary">
         Each bullet checked against three rules: an action verb, the 8–30-word
         length window, and a metric. {summary}
       </p>
@@ -288,13 +288,13 @@ function BulletRow({ bullet }: { bullet: BulletObservation }) {
     bullet.hasMetric && bullet.startsWithActionVerb && bullet.wellFormedLength;
 
   const containerCls = attention
-    ? "border-amber-300 bg-amber-50/40 dark:border-amber-700/60 dark:bg-amber-950/20"
+    ? "border-feedback-warning-border bg-feedback-warning-bg"
     : allPass
-      ? "border-neutral-200 dark:border-neutral-800"
-      : "border-neutral-300 dark:border-neutral-700";
+      ? "border-border-light"
+      : "border-border";
   const textCls = allPass
-    ? "text-neutral-500 dark:text-neutral-400"
-    : "text-neutral-800 dark:text-neutral-100";
+    ? "text-content-muted"
+    : "text-content-primary";
 
   const lengthLabel = bullet.wellFormedLength
     ? `${bullet.wordCount} words`
@@ -307,7 +307,7 @@ function BulletRow({ bullet }: { bullet: BulletObservation }) {
       className={`flex flex-col gap-1.5 rounded border p-2 ${containerCls}`}
     >
       <p className={`text-xs leading-snug ${textCls}`}>
-        <span className="mr-1.5 font-mono text-[10px] text-neutral-400">
+        <span className="mr-1.5 font-mono text-[10px] text-content-muted">
           #{bullet.index + 1}
         </span>
         {bullet.text}
@@ -343,8 +343,8 @@ function CheckPill({
   failLabel: string;
 }) {
   const cls = ok
-    ? "bg-emerald-50 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-200"
-    : "bg-amber-100 text-amber-900 dark:bg-amber-900/40 dark:text-amber-200";
+    ? "bg-feedback-success-bg text-feedback-success-text"
+    : "bg-feedback-warning-bg text-feedback-warning-text";
   return (
     <span
       className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium ${cls}`}
@@ -366,13 +366,13 @@ function LimitedParsingCard({
   const uniqueUrls = Array.from(new Set(links.map((l) => l.url)));
 
   return (
-    <section className="flex flex-col gap-5 rounded-xl border border-neutral-200 bg-white p-5 shadow-sm dark:border-neutral-800 dark:bg-neutral-900">
+    <section className="flex flex-col gap-5 rounded-xl border border-border-light bg-surface-card p-5 shadow-sm">
       <header className="flex items-center justify-between">
         <StatusPill tone="limited">Limited parsing</StatusPill>
         <button
           type="button"
           onClick={onReset}
-          className="text-xs font-medium text-neutral-900 hover:underline dark:text-neutral-100"
+          className="text-xs font-medium text-content-primary hover:underline"
         >
           Try a different PDF
         </button>
@@ -382,7 +382,7 @@ function LimitedParsingCard({
         <h2 className="text-base font-semibold">
           Some text wasn't readable in this PDF
         </h2>
-        <p className="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
+        <p className="mt-1 text-sm text-content-tertiary">
           {result.diagnostics.pages} page
           {result.diagnostics.pages === 1 ? "" : "s"} scanned. Below is what we
           could recover.
@@ -390,11 +390,11 @@ function LimitedParsingCard({
       </div>
 
       <section className="flex flex-col gap-2">
-        <h3 className="text-xs font-semibold uppercase tracking-wider text-neutral-500">
+        <h3 className="text-xs font-semibold uppercase tracking-wider text-content-muted">
           Recovered links
         </h3>
         {uniqueUrls.length === 0 ? (
-          <p className="text-sm text-neutral-500">
+          <p className="text-sm text-content-muted">
             No link annotations were embedded in this PDF.
           </p>
         ) : (
@@ -405,7 +405,7 @@ function LimitedParsingCard({
                   href={url}
                   target="_blank"
                   rel="noreferrer noopener"
-                  className="font-mono text-xs text-neutral-700 underline decoration-dotted hover:decoration-solid dark:text-neutral-200"
+                  className="font-mono text-xs text-content-secondary underline decoration-dotted hover:decoration-solid"
                 >
                   {url}
                 </a>
@@ -415,13 +415,13 @@ function LimitedParsingCard({
         )}
       </section>
 
-      <hr className="border-neutral-200 dark:border-neutral-800" />
+      <hr className="border-border-light" />
 
       <section className="flex flex-col gap-2">
-        <h3 className="text-xs font-semibold uppercase tracking-wider text-neutral-500">
+        <h3 className="text-xs font-semibold uppercase tracking-wider text-content-muted">
           What happened
         </h3>
-        <p className="text-sm text-neutral-700 dark:text-neutral-300">
+        <p className="text-sm text-content-secondary">
           {LAYOUT_TRIGGER_BLURBS.fonts_unmappable}
         </p>
       </section>
diff --git a/src/styles.css b/src/styles.css
index 038be9d2..4ffcd981 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -4,14 +4,90 @@
 
 :root {
   color-scheme: light dark;
-}
 
-body {
-  @apply bg-white text-neutral-900 antialiased;
+  --color-brand-navy: #1a365d;
+  --color-brand-navy-dark: #132a4a;
+  --color-brand-amber: #b8860b;
+  --color-brand-amber-light: #d4a017;
+  --color-brand-cream: #FAFAF8;
+  --color-bg-base: #FAFAF8;
+  --color-bg-card: #ffffff;
+  --color-bg-card-warm: #f7f5f0;
+  --color-bg-subtle: #f3f4f6;
+  --color-bg-hover: #f0ede8;
+  --color-text-primary: #111827;
+  --color-text-secondary: #374151;
+  --color-text-tertiary: #4b5563;
+  --color-text-muted: #9ca3af;
+  --color-text-inverse: #ffffff;
+  --color-border-light: #e5e7eb;
+  --color-border-default: #d1d5db;
+  --color-border-strong: #9ca3af;
+  --color-accent-primary: #1a365d;
+  --color-accent-primary-hover: #132a4a;
+  --color-accent-forward: #4f46e5;
+  --color-accent-forward-bg: #EEF2FF;
+  --color-feedback-error-bg: #fef2f2;
+  --color-feedback-error-border: #fecaca;
+  --color-feedback-error-text: #b91c1c;
+  --color-feedback-error-icon: #dc2626;
+  --color-feedback-warning-bg: #fffbeb;
+  --color-feedback-warning-border: #fde68a;
+  --color-feedback-warning-text: #92400e;
+  --color-feedback-warning-icon: #f59e0b;
+  --color-feedback-info-bg: #eff6ff;
+  --color-feedback-info-border: #bfdbfe;
+  --color-feedback-info-text: #1e40af;
+  --color-feedback-info-icon: #2563eb;
+  --color-feedback-success-bg: #ecfdf5;
+  --color-feedback-success-border: #a7f3d0;
+  --color-feedback-success-text: #065f46;
+  --color-feedback-success-icon: #059669;
 }
 
 @media (prefers-color-scheme: dark) {
-  body {
-    @apply bg-neutral-950 text-neutral-100;
+  :root {
+    --color-brand-navy: #4a90c4;
+    --color-brand-navy-dark: #3a7aad;
+    --color-brand-amber: #f0c760;
+    --color-brand-amber-light: #f5d47a;
+    --color-brand-cream: #0f1419;
+    --color-bg-base: #0f1419;
+    --color-bg-card: #1a2030;
+    --color-bg-card-warm: #1e2538;
+    --color-bg-subtle: #252d3f;
+    --color-bg-hover: #2c3549;
+    --color-text-primary: #f0f2f5;
+    --color-text-secondary: #b8bfcc;
+    --color-text-tertiary: #8892a4;
+    --color-text-muted: #4d5668;
+    --color-text-inverse: #0f1419;
+    --color-border-light: #2c3549;
+    --color-border-default: #3a4459;
+    --color-border-strong: #4d5668;
+    --color-accent-primary: #6ba3d9;
+    --color-accent-primary-hover: #84b6e5;
+    --color-accent-forward: #818cf8;
+    --color-accent-forward-bg: #1e1b4b;
+    --color-feedback-error-bg: #2d1215;
+    --color-feedback-error-border: #5c1d24;
+    --color-feedback-error-text: #f87171;
+    --color-feedback-error-icon: #ef4444;
+    --color-feedback-warning-bg: #2d2310;
+    --color-feedback-warning-border: #5c4a1d;
+    --color-feedback-warning-text: #fbbf24;
+    --color-feedback-warning-icon: #f59e0b;
+    --color-feedback-info-bg: #1a2540;
+    --color-feedback-info-border: #1d3a6e;
+    --color-feedback-info-text: #60a5fa;
+    --color-feedback-info-icon: #3b82f6;
+    --color-feedback-success-bg: #0d2818;
+    --color-feedback-success-border: #145c33;
+    --color-feedback-success-text: #34d399;
+    --color-feedback-success-icon: #10b981;
   }
 }
+
+body {
+  @apply bg-surface-base text-content-primary antialiased;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 1899223a..34ea7cf3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -22,6 +22,66 @@ export default {
           "monospace",
         ],
       },
+      colors: {
+        brand: {
+          navy: "var(--color-brand-navy)",
+          "navy-dark": "var(--color-brand-navy-dark)",
+          amber: "var(--color-brand-amber)",
+          "amber-light": "var(--color-brand-amber-light)",
+          cream: "var(--color-brand-cream)",
+        },
+        surface: {
+          base: "var(--color-bg-base)",
+          card: "var(--color-bg-card)",
+          "card-warm": "var(--color-bg-card-warm)",
+          subtle: "var(--color-bg-subtle)",
+          hover: "var(--color-bg-hover)",
+        },
+        content: {
+          primary: "var(--color-text-primary)",
+          secondary: "var(--color-text-secondary)",
+          tertiary: "var(--color-text-tertiary)",
+          muted: "var(--color-text-muted)",
+          inverse: "var(--color-text-inverse)",
+        },
+        border: {
+          light: "var(--color-border-light)",
+          DEFAULT: "var(--color-border-default)",
+          strong: "var(--color-border-strong)",
+        },
+        accent: {
+          primary: "var(--color-accent-primary)",
+          "primary-hover": "var(--color-accent-primary-hover)",
+          forward: "var(--color-accent-forward)",
+          "forward-bg": "var(--color-accent-forward-bg)",
+        },
+        feedback: {
+          error: {
+            bg: "var(--color-feedback-error-bg)",
+            border: "var(--color-feedback-error-border)",
+            text: "var(--color-feedback-error-text)",
+            icon: "var(--color-feedback-error-icon)",
+          },
+          warning: {
+            bg: "var(--color-feedback-warning-bg)",
+            border: "var(--color-feedback-warning-border)",
+            text: "var(--color-feedback-warning-text)",
+            icon: "var(--color-feedback-warning-icon)",
+          },
+          info: {
+            bg: "var(--color-feedback-info-bg)",
+            border: "var(--color-feedback-info-border)",
+            text: "var(--color-feedback-info-text)",
+            icon: "var(--color-feedback-info-icon)",
+          },
+          success: {
+            bg: "var(--color-feedback-success-bg)",
+            border: "var(--color-feedback-success-border)",
+            text: "var(--color-feedback-success-text)",
+            icon: "var(--color-feedback-success-icon)",
+          },
+        },
+      },
     },
   },
   plugins: [],