diff --git a/frontend/src/app.css b/frontend/src/app.css
index 9d9d2a9..47962ea 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -1,5 +1,52 @@
 @import "tailwindcss";
 
+/* Tailwind v4 theme tokens — 모든 color/radius/z/spacing은 여기서 노출 */
+/* 이후 컴포넌트는 bg-surface, text-dim, border-default, bg-success/10, */
+/* bg-domain-engineering, rounded-card, z-modal, w-rail 형태로 작성한다. */
+/* 새 코드에서 bg-[var(--*)] 작성 금지 (lint:tokens 으로 차단). */
+@theme {
+  --color-bg: #0f1117;
+  --color-surface: #1a1d27;
+  --color-surface-hover: #222636;
+  --color-surface-active: #2a2f42;
+  --color-sidebar: #141720;
+  --color-default: #2a2d3a;
+  --color-border-strong: #3a3e52;
+  --color-text: #e4e4e7;
+  --color-dim: #8b8d98;
+  --color-faint: #5e616c;
+  --color-accent: #6c8aff;
+  --color-accent-hover: #859dff;
+  --color-accent-ring: #6c8aff80;
+  --color-error: #f5564e;
+  --color-success: #4ade80;
+  --color-warning: #fbbf24;
+  --color-scrim: #00000099;
+
+  --color-domain-philosophy: #a78bfa;
+  --color-domain-language: #f472b6;
+  --color-domain-engineering: #38bdf8;
+  --color-domain-safety: #fb923c;
+  --color-domain-programming: #34d399;
+  --color-domain-general: #94a3b8;
+  --color-domain-reference: #fbbf24;
+
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 10px;
+  --radius-card: 12px;
+
+  --z-dropdown: 30;
+  --z-drawer: 40;
+  --z-modal: 50;
+  --z-toast: 60;
+
+  --spacing-sidebar: 320px;
+  --spacing-rail: 320px;
+}
+
+/* 기존 :root 변수는 .markdown-body와의 호환을 위해 유지 (공존 layer). */
+/* 후속 phase에서 markdown-body도 토큰 마이그레이션 검토 가능. */
 :root {
   --bg: #0f1117;
   --surface: #1a1d27;
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 3512d28..05862c2 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -60,7 +60,7 @@
   {#if showChrome}
     <div class="h-screen flex flex-col">
       <!-- 상단 nav -->
-      <nav class="flex items-center justify-between px-4 py-2 border-b border-[var(--border)] bg-[var(--surface)] shrink-0">
+      <nav class="flex items-center justify-between px-4 py-2 border-b border-default bg-surface shrink-0">
         <div class="flex items-center gap-3">
           {#if !$page.url.pathname.startsWith('/news')}
           <button