From 7e48de8b627facfc155ec2af26848a7ea1910ffd Mon Sep 17 00:00:00 2001
From: huyan <huyanxius@Gmail.com>
Date: Thu, 13 Aug 2026 16:30:23 +0800
Subject: [PATCH 1/2] refactor(ui): unify product color tokens

Product pages used separate palettes and inconsistent surface roles.

Introduce shared semantic color tokens and migrate authenticated UI consumers.

Keep product colors consistent without changing workflows or backend behavior.
---
 frontend/src/app/layout/app-header.tsx        |  28 +--
 frontend/src/app/layout/index.tsx             |   2 +-
 frontend/src/app/layout/page-back-button.tsx  |   2 +-
 frontend/src/index.css                        |  52 +++++-
 frontend/src/pages/account/account.css        |  30 +--
 frontend/src/pages/account/index.test.tsx     |   2 +-
 frontend/src/pages/account/index.tsx          |  62 +++---
 frontend/src/pages/asset-library/index.tsx    |  28 +--
 frontend/src/pages/character-detail/index.tsx |  78 ++++----
 frontend/src/pages/playtest/entry.tsx         |  62 +++---
 frontend/src/pages/playtest/index.tsx         |   4 +-
 .../src/pages/playtest/workbench/index.tsx    |  26 +--
 frontend/src/pages/project-create/index.tsx   |  52 +++---
 frontend/src/pages/project-detail/index.tsx   |  36 ++--
 frontend/src/pages/projects/index.tsx         |  54 +++---
 frontend/src/pages/quick-start/index.tsx      | 176 +++++++++---------
 frontend/src/pages/workflow-editor/index.tsx  |  80 ++++----
 .../pages/workflow-editor/workflow-editor.css |  38 ++--
 frontend/src/pages/workspace/index.tsx        | 138 +++++++-------
 frontend/src/pages/workspace/workspace.css    |  21 +--
 .../src/shared/ui/app-color-system.test.ts    |  79 ++++++++
 frontend/src/shared/ui/pagination.tsx         |   6 +-
 22 files changed, 585 insertions(+), 471 deletions(-)
 create mode 100644 frontend/src/shared/ui/app-color-system.test.ts

diff --git a/frontend/src/app/layout/app-header.tsx b/frontend/src/app/layout/app-header.tsx
index 97611102..9660b4cd 100644
--- a/frontend/src/app/layout/app-header.tsx
+++ b/frontend/src/app/layout/app-header.tsx
@@ -111,7 +111,7 @@ export function AppHeader() {
     <header
       data-layout="unified"
       data-surface="frosted-bar"
-      className="fixed inset-x-0 top-0 z-50 border-b border-[#1c231e]/10 bg-transparent text-[#1c231e] shadow-[inset_0_1px_0_rgba(255,255,255,0.55)] backdrop-blur-xl"
+      className="fixed inset-x-0 top-0 z-50 border-b border-app-ink/10 bg-transparent text-app-ink shadow-app-header backdrop-blur-xl"
     >
       <div className="relative mx-auto grid min-h-14 w-full max-w-[90rem] grid-cols-[auto_1fr_auto] items-center gap-4 px-4 sm:px-6 lg:px-8">
         <div className="flex min-w-0 items-center gap-1.5">
@@ -121,7 +121,7 @@ export function AppHeader() {
             aria-label="返回 Windup 工作台"
             data-motion="text-wave"
             onClick={() => playTextWave('brand')}
-            className={`flex min-h-11 shrink-0 items-center gap-2.5 pr-1 text-[#1c231e] focus-visible:rounded-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#284331] max-[360px]:hidden ${
+            className={`flex min-h-11 shrink-0 items-center gap-2.5 pr-1 text-app-ink focus-visible:rounded-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-accent max-[360px]:hidden ${
               wave.entry === 'brand' ? 'app-header-text-wave' : ''
             }`}
           >
@@ -147,10 +147,10 @@ export function AppHeader() {
                 aria-current={active ? 'page' : undefined}
                 data-motion="text-wave"
                 onClick={() => playTextWave(item.motionKey)}
-                className={`relative inline-flex min-h-11 items-center px-1.5 text-[12px] font-medium whitespace-nowrap transition-colors after:absolute after:inset-x-1.5 after:bottom-0 after:h-[2px] after:origin-center after:bg-[#284331] after:transition-transform focus-visible:rounded-md focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#284331] sm:px-3 sm:text-[13px] sm:after:inset-x-3 ${
+                className={`relative inline-flex min-h-11 items-center px-1.5 text-[12px] font-medium whitespace-nowrap transition-colors after:absolute after:inset-x-1.5 after:bottom-0 after:h-[2px] after:origin-center after:bg-app-accent after:transition-transform focus-visible:rounded-md focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-app-accent sm:px-3 sm:text-[13px] sm:after:inset-x-3 ${
                   active
-                    ? 'text-[#243c2c] after:scale-x-100'
-                    : 'text-[#667068] after:scale-x-0 hover:text-[#26372c]'
+                    ? 'text-app-accent after:scale-x-100'
+                    : 'text-app-muted after:scale-x-0 hover:text-app-accent'
                 } ${wave.entry === item.motionKey ? 'app-header-text-wave' : ''}`}
               >
                 {item.compactLabel ? (
@@ -183,7 +183,7 @@ export function AppHeader() {
           {session.state.status === 'booting' ? (
             <span
               aria-label="正在恢复登录状态"
-              className="inline-grid min-h-11 min-w-11 place-items-center text-sm text-[#778078]"
+              className="inline-grid min-h-11 min-w-11 place-items-center text-sm text-app-faint"
             >
               …
             </span>
@@ -191,7 +191,7 @@ export function AppHeader() {
             <Link
               to={accountEntry}
               aria-label="登录 / 注册"
-              className="inline-flex min-h-10 items-center rounded-lg border border-[#2d3b31]/14 bg-white/45 px-3 text-[13px] font-medium whitespace-nowrap text-[#34483a] transition-colors hover:bg-white/75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#284331]"
+              className="inline-flex min-h-10 items-center rounded-lg border border-app-ink/14 bg-app-surface-raised/45 px-3 text-[13px] font-medium whitespace-nowrap text-app-ink-soft transition-colors hover:bg-app-surface-raised/75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-accent"
             >
               <span className="hidden sm:inline">登录 / 注册</span>
               <span className="sm:hidden">登录</span>
@@ -204,12 +204,12 @@ export function AppHeader() {
                 aria-expanded={accountMenuOpen}
                 title={session.state.user.email}
                 onClick={toggleAccountMenu}
-                className={`inline-flex min-h-10 max-w-24 items-center gap-2 rounded-lg px-2.5 text-xs font-medium text-[#3e4941] transition-[color,background-color,transform] duration-150 ease-out hover:bg-[#e5e8e3] hover:text-[#26372c] active:translate-y-px active:scale-[0.97] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#284331] motion-reduce:transform-none sm:max-w-36 ${
-                  accountMenuOpen ? 'bg-[#e5e8e3] text-[#26372c]' : ''
+                className={`inline-flex min-h-10 max-w-24 items-center gap-2 rounded-lg px-2.5 text-xs font-medium text-app-ink-soft transition-[color,background-color,transform] duration-150 ease-out hover:bg-app-accent-muted hover:text-app-accent active:translate-y-px active:scale-[0.97] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-accent motion-reduce:transform-none sm:max-w-36 ${
+                  accountMenuOpen ? 'bg-app-accent-muted text-app-accent' : ''
                 }`}
               >
                 <span
-                  className={`grid h-7 w-7 shrink-0 place-items-center rounded-full bg-[#dfe5df] font-serif text-[11px] text-[#284331] transition-transform duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] motion-reduce:transition-none ${
+                  className={`grid h-7 w-7 shrink-0 place-items-center rounded-full bg-app-accent-muted font-serif text-[11px] text-app-accent transition-transform duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] motion-reduce:transition-none ${
                     accountMenuOpen ? 'scale-110' : 'scale-100'
                   }`}
                 >
@@ -220,7 +220,7 @@ export function AppHeader() {
                 </span>
                 <span
                   aria-hidden="true"
-                  className={`text-[10px] text-[#7b847d] transition-transform duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] motion-reduce:transition-none ${
+                  className={`text-[10px] text-app-faint transition-transform duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] motion-reduce:transition-none ${
                     accountMenuOpen ? 'rotate-180' : 'rotate-0'
                   }`}
                 >
@@ -235,7 +235,7 @@ export function AppHeader() {
                 aria-hidden={accountMenuOpen ? undefined : true}
                 inert={!accountMenuOpen}
                 onAnimationEnd={finishAccountMenuMotion}
-                className={`absolute top-[calc(100%+0.5rem)] right-0 grid min-w-44 origin-top-right overflow-hidden rounded-lg border border-[#1c231e]/12 bg-[#f8f7f2] p-1.5 shadow-[0_8px_24px_rgba(28,35,30,0.10)] ${
+                className={`absolute top-[calc(100%+0.5rem)] right-0 grid min-w-44 origin-top-right overflow-hidden rounded-lg border border-app-ink/12 bg-app-surface-raised p-1.5 shadow-app-menu ${
                   accountMenuState === 'open'
                     ? 'visible app-header-account-menu-in'
                     : accountMenuState === 'closing'
@@ -248,7 +248,7 @@ export function AppHeader() {
                   aria-label="打开账号中心"
                   aria-current={pathname.startsWith('/account') ? 'page' : undefined}
                   onClick={() => setAccountMenuState('closing')}
-                  className="flex min-h-10 items-center rounded-md px-3 text-[13px] text-[#3f4942] transition-colors hover:bg-[#e8ebe7] focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[#284331]"
+                  className="flex min-h-10 items-center rounded-md px-3 text-[13px] text-app-ink-soft transition-colors hover:bg-app-accent-muted focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-app-accent"
                 >
                   账号中心
                 </Link>
@@ -256,7 +256,7 @@ export function AppHeader() {
                   type="button"
                   onClick={signOut}
                   aria-label="退出登录"
-                  className="flex min-h-10 items-center rounded-md px-3 text-left text-[13px] text-[#707871] transition-colors hover:bg-[#e8ebe7] hover:text-[#26372c] focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[#284331]"
+                  className="flex min-h-10 items-center rounded-md px-3 text-left text-[13px] text-app-muted transition-colors hover:bg-app-accent-muted hover:text-app-accent focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-app-accent"
                 >
                   退出登录
                 </button>
diff --git a/frontend/src/app/layout/index.tsx b/frontend/src/app/layout/index.tsx
index f6bb9f30..4838eaef 100644
--- a/frontend/src/app/layout/index.tsx
+++ b/frontend/src/app/layout/index.tsx
@@ -13,7 +13,7 @@ export interface AppShellProps {
 /** 登录产品外壳；只服务工作台与受保护业务页。 */
 export function AppShell({ children }: AppShellProps) {
   return (
-    <div className="min-h-screen bg-white text-slate-900">
+    <div className="min-h-screen bg-app-canvas text-app-ink">
       <AppHeader />
       {/*
         外壳只管顶栏。页面自己决定宽度与留白，不在这里统一夹到屏幕中间，
diff --git a/frontend/src/app/layout/page-back-button.tsx b/frontend/src/app/layout/page-back-button.tsx
index 14fe9cda..058fb8c1 100644
--- a/frontend/src/app/layout/page-back-button.tsx
+++ b/frontend/src/app/layout/page-back-button.tsx
@@ -36,7 +36,7 @@ export function PageBackButton() {
       aria-label="返回上一页"
       title="返回上一页"
       onClick={goBack}
-      className="inline-grid h-9 w-9 shrink-0 place-items-center rounded-md border border-[#25342a]/12 bg-white/35 text-[#34483a] transition-[background-color,color,transform] duration-150 hover:bg-white/75 hover:text-[#1f3326] active:translate-y-px active:scale-[0.96] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#284331] motion-reduce:transform-none"
+      className="inline-grid h-9 w-9 shrink-0 place-items-center rounded-md border border-app-accent/12 bg-app-surface-raised/35 text-app-ink-soft transition-[background-color,color,transform] duration-150 hover:bg-app-surface-raised/75 hover:text-app-accent-hover active:translate-y-px active:scale-[0.96] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-accent motion-reduce:transform-none"
     >
       <span aria-hidden="true" className="text-[1.2rem] leading-none">
         ←
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 47e82a26..b622fe2f 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -108,6 +108,46 @@ body,
   --color-accent-deep: #1b2f22;
   --color-spark: #555b54;
 
+  /*
+   * 登录后产品界面的共享色彩语义。页面只选择角色，不选择具体色值：这样工作台、
+   * 项目资产、创作与预览台共享同一层级，错误/警告/信息仍保留各自含义。
+   */
+  --color-app-canvas: #f3f2ec;
+  --color-app-surface: #f7f8f4;
+  --color-app-surface-raised: #ffffff;
+  --color-app-surface-muted: #e7eae5;
+  --color-app-surface-strong: #dfe3df;
+  --color-app-ink: #1d251f;
+  --color-app-ink-soft: #303a32;
+  --color-app-muted: #687169;
+  --color-app-faint: #778078;
+  --color-app-line: #cbd1ca;
+  --color-app-line-strong: #8fa092;
+  --color-app-accent: #284331;
+  --color-app-accent-hover: #1f3828;
+  --color-app-accent-soft: #dce9df;
+  --color-app-accent-muted: #edf2ec;
+  --color-app-on-accent: #f7f8f4;
+  --color-app-danger: #6f3928;
+  --color-app-danger-hover: #593022;
+  --color-app-danger-muted: #7a5548;
+  --color-app-danger-line: #d6c1b6;
+  --color-app-danger-soft: #fff8f3;
+  --color-app-warning: #67552e;
+  --color-app-warning-line: #c7a967;
+  --color-app-warning-soft: #f4eddc;
+  --color-app-info: #2a5284;
+  --color-app-info-hover: #3668a0;
+
+  --shadow-app-card: 0 18px 45px rgb(29 37 31 / 9%);
+  --shadow-app-panel: 0 22px 60px rgb(29 37 31 / 12%);
+  --shadow-app-page: 0 26px 80px rgb(29 37 31 / 10%);
+  --shadow-app-header: inset 0 1px 0 rgb(255 255 255 / 55%);
+  --shadow-app-menu: 0 8px 24px rgb(29 37 31 / 10%);
+  --shadow-app-stage-panel: 0 12px 32px rgb(29 37 31 / 18%);
+  --shadow-app-float: 0 16px 40px rgb(29 37 31 / 24%);
+  --shadow-app-pulse: 0 0 0 16px rgb(40 67 49 / 5%);
+
   /*
    * 字阶按约 1.3 递进，display 与 body 之间留了 title / subtitle / lead 三档，
    * 补上原先 100px 直接跳到 14px 的断层。
@@ -336,9 +376,9 @@ body,
   width: 5px;
   height: 5px;
   border-radius: 1px;
-  background: #bfc6bf;
+  background: var(--color-app-line);
   opacity: 0.62;
-  box-shadow: 0 0 0 1px rgb(255 255 255 / 18%);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-app-surface-raised) 18%, transparent);
   animation: project-pixel-field 4.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
 }
 
@@ -375,7 +415,7 @@ body,
 }
 
 .project-pixel-mark i.is-active {
-  background: #202120;
+  background: var(--color-app-ink-soft);
   opacity: 0.9;
   box-shadow: none;
   animation: project-pixel-frame 3.4s ease-in-out infinite;
@@ -394,14 +434,14 @@ body,
 }
 
 .project-pixel-mark i.is-handle {
-  background: #050505;
+  background: var(--color-app-ink);
   opacity: 1;
-  box-shadow: 0 0 0 4px rgb(17 18 17 / 9%);
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-app-ink) 9%, transparent);
   animation: project-pixel-handle 3.8s ease-in-out infinite;
 }
 
 .project-pixel-mark i.is-cursor {
-  background: #090a09;
+  background: var(--color-app-accent);
   opacity: 1;
   animation: project-pixel-cursor 2.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
 }
diff --git a/frontend/src/pages/account/account.css b/frontend/src/pages/account/account.css
index 5ad8c5b1..9ff5bd87 100644
--- a/frontend/src/pages/account/account.css
+++ b/frontend/src/pages/account/account.css
@@ -2,10 +2,10 @@
   width: 100%;
   min-height: 3rem;
   padding-inline: 0.875rem;
-  border: 1px solid #c7cbc5;
+  border: 1px solid var(--color-app-line);
   border-radius: 10px;
-  background: #fbfbf8;
-  color: #202720;
+  background: var(--color-app-surface);
+  color: var(--color-app-ink);
   font-size: 1rem;
   outline: none;
   transition:
@@ -15,23 +15,23 @@
 }
 
 .account-field::placeholder {
-  color: #8a8f88;
+  color: var(--color-app-faint);
 }
 
 .account-field:hover {
-  border-color: #adb4ac;
+  border-color: var(--color-app-line-strong);
 }
 
 .account-field:focus {
-  border-color: #526b59;
-  background: white;
-  box-shadow: 0 0 0 3px rgb(82 107 89 / 10%);
+  border-color: var(--color-app-accent);
+  background: var(--color-app-surface-raised);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-app-accent) 10%, transparent);
 }
 
 .account-field:disabled {
   cursor: not-allowed;
-  background: #eff0ec;
-  color: #7a8079;
+  background: var(--color-app-surface-muted);
+  color: var(--color-app-faint);
 }
 
 .account-primary-button {
@@ -41,25 +41,25 @@
   justify-content: center;
   padding-inline: 1rem;
   border-radius: 0.5rem;
-  background: #284331;
-  color: #f7f6f0;
+  background: var(--color-app-accent);
+  color: var(--color-app-on-accent);
   font-size: 0.875rem;
   font-weight: 600;
   transition: background-color 150ms;
 }
 
 .account-primary-button:hover {
-  background: #1f3627;
+  background: var(--color-app-accent-hover);
 }
 
 .account-primary-button:focus-visible {
-  outline: 2px solid #284331;
+  outline: 2px solid var(--color-app-accent);
   outline-offset: 2px;
 }
 
 .account-primary-button:disabled {
   cursor: not-allowed;
-  background: #8a8f89;
+  background: var(--color-app-line-strong);
 }
 
 .account-badge-button {
diff --git a/frontend/src/pages/account/index.test.tsx b/frontend/src/pages/account/index.test.tsx
index d526b595..c7e957f5 100644
--- a/frontend/src/pages/account/index.test.tsx
+++ b/frontend/src/pages/account/index.test.tsx
@@ -111,7 +111,7 @@ describe('AccountPage', () => {
 
     expect(await screen.findByRole('heading', { name: '账号中心' })).toBeTruthy()
     const page = container.querySelector('[data-account-page]')
-    expect(page?.className).toContain('bg-[#f3f2ec]')
+    expect(page?.className).toContain('bg-app-canvas')
     const shell = container.querySelector('[data-account-shell]')
     expect(shell?.className).toContain('max-w-[1560px]')
     expect(screen.getByRole('heading', { name: '账号中心' }).className).toContain(
diff --git a/frontend/src/pages/account/index.tsx b/frontend/src/pages/account/index.tsx
index ace90329..09ec3cb8 100644
--- a/frontend/src/pages/account/index.tsx
+++ b/frontend/src/pages/account/index.tsx
@@ -144,18 +144,18 @@ export function AccountPage() {
   const initial = Array.from(displayName)[0]?.toUpperCase() ?? 'W'
 
   return (
-    <div data-account-page className="min-h-[100dvh] bg-[#f3f2ec] text-[#252b26]">
+    <div data-account-page className="min-h-[100dvh] bg-app-canvas text-app-ink">
       <div
         data-account-shell
         className="mx-auto w-full max-w-[1560px] px-4 pt-[clamp(4.75rem,11vh,7rem)] pb-10 sm:px-6 xl:px-8"
       >
         <header className="min-h-[clamp(9rem,16vw,12rem)]">
           <div>
-            <p className="font-mono text-[0.65rem] tracking-[0.12em] text-[#737b74] uppercase">
+            <p className="font-mono text-[0.65rem] tracking-[0.12em] text-app-faint uppercase">
               Account
             </p>
             <div className="mt-2 flex items-center gap-[clamp(0.5rem,1.5vw,1.25rem)]">
-              <h1 className="font-serif text-[clamp(2.15rem,4.5vw,4rem)] leading-none font-medium tracking-[-0.055em] text-[#1d251f]">
+              <h1 className="font-serif text-[clamp(2.15rem,4.5vw,4rem)] leading-none font-medium tracking-[-0.055em] text-app-ink">
                 账号中心
               </h1>
               <button
@@ -167,7 +167,7 @@ export function AccountPage() {
                   void event.currentTarget.offsetWidth
                   event.currentTarget.classList.add('account-badge-shake')
                 }}
-                className="account-badge-button h-[clamp(11rem,19vw,14rem)] w-[clamp(7.5rem,13vw,10rem)] shrink-0 cursor-pointer border-0 bg-transparent p-0 focus-visible:rounded-lg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#284331]"
+                className="account-badge-button h-[clamp(11rem,19vw,14rem)] w-[clamp(7.5rem,13vw,10rem)] shrink-0 cursor-pointer border-0 bg-transparent p-0 focus-visible:rounded-lg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-accent"
               >
                 <img
                   data-testid="account-pixel-mark"
@@ -188,7 +188,7 @@ export function AccountPage() {
           className="grid gap-6 md:grid-cols-[14rem_minmax(0,1fr)] md:gap-[clamp(2rem,4vw,4.5rem)]"
         >
           <aside className="flex flex-col">
-            <nav aria-label="账号设置" className="grid gap-1 border-t border-[#d0d2cc] pt-4">
+            <nav aria-label="账号设置" className="grid gap-1 border-t border-app-line pt-4">
               {(
                 [
                   ['profile', '个人资料'],
@@ -200,10 +200,10 @@ export function AccountPage() {
                   type="button"
                   onClick={() => selectSection(section)}
                   aria-current={activeSection === section ? 'page' : undefined}
-                  className={`min-h-10 rounded-lg px-3 text-left text-sm transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#284331] ${
+                  className={`min-h-10 rounded-lg px-3 text-left text-sm transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-accent ${
                     activeSection === section
-                      ? 'bg-[#dde2db] font-semibold text-[#284331]'
-                      : 'text-[#687069] hover:bg-[#e9ebe6] hover:text-[#303832]'
+                      ? 'bg-app-accent-soft font-semibold text-app-accent'
+                      : 'text-app-muted hover:bg-app-accent-muted hover:text-app-ink-soft'
                   }`}
                 >
                   {label}
@@ -214,38 +214,38 @@ export function AccountPage() {
             <button
               type="button"
               onClick={signOut}
-              className="mt-5 min-h-10 rounded-lg px-3 text-left text-sm text-[#865046] transition-colors hover:bg-[#f0e7e3] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#8a4338]"
+              className="mt-5 min-h-10 rounded-lg px-3 text-left text-sm text-app-danger transition-colors hover:bg-app-danger-soft focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-danger"
             >
               退出当前账号
             </button>
           </aside>
 
-          <section className="min-w-0 rounded-[1.1rem] border border-[#d1d7d0] bg-white p-6 sm:p-7">
+          <section className="min-w-0 rounded-[1.1rem] border border-app-line bg-app-surface-raised p-6 sm:p-7">
             {activeSection === 'profile' ? (
               <div>
                 <header>
-                  <h2 className="text-xl font-semibold tracking-[-0.025em] text-[#29302a]">
+                  <h2 className="text-xl font-semibold tracking-[-0.025em] text-app-ink-soft">
                     个人资料
                   </h2>
-                  <p className="mt-1.5 text-sm text-[#747a74]">管理你的公开身份和账号邮箱。</p>
+                  <p className="mt-1.5 text-sm text-app-muted">管理你的公开身份和账号邮箱。</p>
                 </header>
 
-                <div className="mt-5 flex items-center gap-4 border-b border-[#d9dad5] pb-5">
-                  <span className="grid size-14 shrink-0 place-items-center rounded-full bg-[#dce1da] font-serif text-2xl text-[#284331]">
+                <div className="mt-5 flex items-center gap-4 border-b border-app-line pb-5">
+                  <span className="grid size-14 shrink-0 place-items-center rounded-full bg-app-accent-soft font-serif text-2xl text-app-accent">
                     {initial}
                   </span>
                   <div className="min-w-0">
-                    <p className="truncate text-base font-semibold text-[#29302a]">{displayName}</p>
-                    <p className="mt-1 truncate text-sm text-[#717670]">{currentUser.email}</p>
+                    <p className="truncate text-base font-semibold text-app-ink-soft">{displayName}</p>
+                    <p className="mt-1 truncate text-sm text-app-muted">{currentUser.email}</p>
                   </div>
-                  <span className="ml-auto rounded-full bg-[#e5ede5] px-2.5 py-1 text-xs font-medium text-[#31533b]">
+                  <span className="ml-auto rounded-full bg-app-accent-soft px-2.5 py-1 text-xs font-medium text-app-accent">
                     {currentUser.emailVerifiedAt ? '已验证' : '未验证'}
                   </span>
                 </div>
 
                 <form className="mt-5 grid gap-4" onSubmit={saveNickname} noValidate>
                   <div className="grid max-w-xl gap-1.5">
-                    <label htmlFor={nicknameId} className="text-sm font-medium text-[#414741]">
+                    <label htmlFor={nicknameId} className="text-sm font-medium text-app-ink-soft">
                       昵称
                     </label>
                     <input
@@ -259,14 +259,14 @@ export function AccountPage() {
                       className="account-field"
                       aria-describedby={`${nicknameId}-hint`}
                     />
-                    <span id={`${nicknameId}-hint`} className="text-xs leading-5 text-[#7a7f79]">
+                    <span id={`${nicknameId}-hint`} className="text-xs leading-5 text-app-faint">
                       1–{MAX_NICKNAME_LENGTH} 个字符，保存后同步显示在页面顶栏。
                     </span>
                   </div>
 
-                  <dl className="grid max-w-xl gap-1 rounded-lg bg-[#eff0ec] px-4 py-3 text-sm sm:grid-cols-[8rem_1fr] sm:items-center">
-                    <dt className="text-[#747a74]">邮箱验证时间</dt>
-                    <dd className="text-[#414741]">
+                  <dl className="grid max-w-xl gap-1 rounded-lg bg-app-surface-muted px-4 py-3 text-sm sm:grid-cols-[8rem_1fr] sm:items-center">
+                    <dt className="text-app-muted">邮箱验证时间</dt>
+                    <dd className="text-app-ink-soft">
                       {currentUser.emailVerifiedAt ? (
                         <time dateTime={currentUser.emailVerifiedAt}>
                           {formatVerificationTime(currentUser.emailVerifiedAt)}
@@ -280,7 +280,7 @@ export function AccountPage() {
                   {profileError && (
                     <p
                       role="alert"
-                      className="max-w-xl rounded-lg bg-[#f7ebe7] px-3 py-2.5 text-sm text-[#8a4338]"
+                      className="max-w-xl rounded-lg bg-app-danger-soft px-3 py-2.5 text-sm text-app-danger"
                     >
                       {profileError}
                     </p>
@@ -288,14 +288,14 @@ export function AccountPage() {
                   {profileSuccess && (
                     <p
                       role="status"
-                      className="max-w-xl rounded-lg bg-[#e9f0e9] px-3 py-2.5 text-sm text-[#31533b]"
+                      className="max-w-xl rounded-lg bg-app-accent-muted px-3 py-2.5 text-sm text-app-accent"
                     >
                       {profileSuccess}
                     </p>
                   )}
 
                   <div className="flex max-w-xl flex-wrap items-center justify-between gap-4">
-                    <span className="text-xs text-[#7a7f79]">
+                    <span className="text-xs text-app-faint">
                       {isProfileLoading
                         ? '正在同步最新资料…'
                         : isProfileFresh
@@ -315,10 +315,10 @@ export function AccountPage() {
             ) : (
               <div>
                 <header>
-                  <h2 className="text-xl font-semibold tracking-[-0.025em] text-[#29302a]">
+                  <h2 className="text-xl font-semibold tracking-[-0.025em] text-app-ink-soft">
                     登录安全
                   </h2>
-                  <p className="mt-1.5 text-sm leading-6 text-[#747a74]">
+                  <p className="mt-1.5 text-sm leading-6 text-app-muted">
                     修改密码后，当前会话会退出。
                   </p>
                 </header>
@@ -326,7 +326,7 @@ export function AccountPage() {
                 <form className="mt-5 grid max-w-xl gap-4" onSubmit={changePassword} noValidate>
                   <label
                     htmlFor={oldPasswordId}
-                    className="grid gap-1.5 text-sm font-medium text-[#414741]"
+                    className="grid gap-1.5 text-sm font-medium text-app-ink-soft"
                   >
                     当前密码
                     <input
@@ -339,7 +339,7 @@ export function AccountPage() {
                       className="account-field"
                     />
                   </label>
-                  <div className="grid gap-1.5 text-sm font-medium text-[#414741]">
+                  <div className="grid gap-1.5 text-sm font-medium text-app-ink-soft">
                     <label htmlFor={newPasswordId}>新密码</label>
                     <input
                       id={newPasswordId}
@@ -353,7 +353,7 @@ export function AccountPage() {
                     />
                     <span
                       id={`${newPasswordId}-hint`}
-                      className="text-xs font-normal text-[#7a7f79]"
+                      className="text-xs font-normal text-app-faint"
                     >
                       8–128 位
                     </span>
@@ -361,7 +361,7 @@ export function AccountPage() {
                   {passwordError && (
                     <p
                       role="alert"
-                      className="rounded-lg bg-[#f7ebe7] px-3 py-2.5 text-sm text-[#8a4338]"
+                      className="rounded-lg bg-app-danger-soft px-3 py-2.5 text-sm text-app-danger"
                     >
                       {passwordError}
                     </p>
diff --git a/frontend/src/pages/asset-library/index.tsx b/frontend/src/pages/asset-library/index.tsx
index 06887983..33f60e34 100644
--- a/frontend/src/pages/asset-library/index.tsx
+++ b/frontend/src/pages/asset-library/index.tsx
@@ -59,7 +59,7 @@ export function AssetLibraryPage() {
             aria-label="新建角色"
             disabled
             title="角色生成应进入 Workflow Editor"
-            className="cursor-not-allowed rounded-full border border-[#cbd1c8] px-4 py-2 text-xs font-semibold text-[#858c84]"
+            className="cursor-not-allowed rounded-full border border-app-line px-4 py-2 text-xs font-semibold text-app-faint"
           >
             ＋ 新建角色
           </button>
@@ -67,12 +67,12 @@ export function AssetLibraryPage() {
         {error ? (
           <p
             role="alert"
-            className="mt-6 rounded-xl border border-[#d8c7bd] bg-[#fff8f2] p-5 text-sm text-[#7a3f2a]"
+            className="mt-6 rounded-xl border border-app-danger-line bg-app-danger-soft p-5 text-sm text-app-danger"
           >
             {error}
           </p>
         ) : charactersPage === null ? (
-          <p className="mt-8 text-sm text-[#70766f]">正在建立资产索引…</p>
+          <p className="mt-8 text-sm text-app-muted">正在建立资产索引…</p>
         ) : (
           <>
             <CharacterGrid projectId={projectId ?? ''} characters={charactersPage.items} />
@@ -103,9 +103,9 @@ function CharacterGrid({ projectId, characters }: { projectId: string; character
             key={character.id}
             to={`/projects/${projectId}/assets/${character.id}`}
             aria-label={`查看角色 ${name}`}
-            className="group overflow-hidden rounded-[1.25rem] border border-[#d7dbd4] bg-white transition hover:border-[#9ca79c]"
+            className="group overflow-hidden rounded-[1.25rem] border border-app-line bg-app-surface-raised transition hover:border-app-line-strong"
           >
-            <div className="relative aspect-[4/3] overflow-hidden bg-[#f0f2ed]">
+            <div className="relative aspect-[4/3] overflow-hidden bg-app-surface-muted">
               {outfit?.previewUrl ? (
                 <img
                   src={outfit.previewUrl}
@@ -113,8 +113,8 @@ function CharacterGrid({ projectId, characters }: { projectId: string; character
                   className="h-full w-full object-contain p-5 [image-rendering:pixelated] transition group-hover:scale-[1.025]"
                 />
               ) : (
-                <div className="grid h-full place-items-center bg-[linear-gradient(135deg,#eef0eb_25%,#f7f7f4_25%,#f7f7f4_50%,#eef0eb_50%,#eef0eb_75%,#f7f7f4_75%)] bg-[length:24px_24px]">
-                  <span className="rounded-full border border-[#d7dbd4] bg-white px-2.5 py-1 text-xs font-medium text-[#677068]">
+                <div className="grid h-full place-items-center bg-[linear-gradient(135deg,var(--color-app-surface-muted)_25%,var(--color-app-surface)_25%,var(--color-app-surface)_50%,var(--color-app-surface-muted)_50%,var(--color-app-surface-muted)_75%,var(--color-app-surface)_75%)] bg-[length:24px_24px]">
+                  <span className="rounded-full border border-app-line bg-app-surface-raised px-2.5 py-1 text-xs font-medium text-app-muted">
                     暂无造型预览
                   </span>
                 </div>
@@ -123,14 +123,14 @@ function CharacterGrid({ projectId, characters }: { projectId: string; character
             <div className="p-4">
               <div className="flex items-start justify-between gap-3">
                 <div>
-                  <h3 className="font-semibold text-[#242a24]">{name}</h3>
-                  <p className="mt-1 text-xs text-[#767d75]">{outfit?.name ?? '尚未创建造型'}</p>
+                  <h3 className="font-semibold text-app-ink">{name}</h3>
+                  <p className="mt-1 text-xs text-app-faint">{outfit?.name ?? '尚未创建造型'}</p>
                 </div>
-                <span aria-hidden="true" className="text-[#899189]">
+                <span aria-hidden="true" className="text-app-faint">
                   ↗
                 </span>
               </div>
-              <div className="mt-4 flex gap-2 border-t border-[#ecefe9] pt-3 text-xs text-[#697169]">
+              <div className="mt-4 flex gap-2 border-t border-app-line pt-3 text-xs text-app-muted">
                 <span>{character.outfits.length} 套造型</span>
                 <span>·</span>
                 <span>{actionCount} 个动作</span>
@@ -145,9 +145,9 @@ function CharacterGrid({ projectId, characters }: { projectId: string; character
 
 function EmptyState() {
   return (
-    <div className="mt-5 rounded-[1.25rem] border border-dashed border-[#cbd1c8] bg-[#f8f9f6] p-7">
-      <h3 className="font-semibold text-[#252a25]">这个项目还没有角色</h3>
-      <p className="mt-2 text-sm text-[#6d736c]">角色会在创建工作流确认后进入这里。</p>
+    <div className="mt-5 rounded-[1.25rem] border border-dashed border-app-line bg-app-surface-raised p-7">
+      <h3 className="font-semibold text-app-ink">这个项目还没有角色</h3>
+      <p className="mt-2 text-sm text-app-muted">角色会在创建工作流确认后进入这里。</p>
     </div>
   )
 }
diff --git a/frontend/src/pages/character-detail/index.tsx b/frontend/src/pages/character-detail/index.tsx
index abf4f37a..af1a0bba 100644
--- a/frontend/src/pages/character-detail/index.tsx
+++ b/frontend/src/pages/character-detail/index.tsx
@@ -64,13 +64,13 @@ export function CharacterDetailPage() {
     return (
       <p
         role="alert"
-        className="m-6 rounded-xl border border-[#d8c7bd] bg-[#fff8f2] p-5 text-sm text-[#7a3f2a]"
+        className="m-6 rounded-xl border border-app-danger-line bg-app-danger-soft p-5 text-sm text-app-danger"
       >
         {error}
       </p>
     )
   }
-  if (!character) return <p className="p-6 text-sm text-[#70766f]">正在读取角色资产…</p>
+  if (!character) return <p className="p-6 text-sm text-app-muted">正在读取角色资产…</p>
 
   const name = characterName(character)
   const selectedOutfit =
@@ -85,27 +85,27 @@ export function CharacterDetailPage() {
         <div>
           <Link
             to={`/projects/${projectId}/assets`}
-            className="text-xs font-semibold text-[#657066] underline decoration-[#b9c0b8] underline-offset-4 hover:text-[#263f2d]"
+            className="text-xs font-semibold text-app-muted underline decoration-app-line underline-offset-4 hover:text-app-accent"
           >
             返回资产库
           </Link>
           <h2
             id="character-title"
-            className="mt-2 text-2xl font-semibold tracking-[-0.035em] text-[#20241f]"
+            className="mt-2 text-2xl font-semibold tracking-[-0.035em] text-app-ink"
           >
             {name}
           </h2>
-          <p className="mt-1 text-xs text-[#6d736c]">选择动作卡片查看完整帧序列。</p>
+          <p className="mt-1 text-xs text-app-muted">选择动作卡片查看完整帧序列。</p>
         </div>
         <div className="flex flex-col items-end gap-2">
           {selectedOutfit ? (
-            <label className="flex items-center gap-2 text-xs font-medium text-[#697169]">
+            <label className="flex items-center gap-2 text-xs font-medium text-app-muted">
               <span>造型</span>
               <select
                 aria-label="选择造型"
                 value={selectedOutfit.id}
                 onChange={(event) => setSelectedOutfitId(event.target.value)}
-                className="rounded-full border border-[#ccd2ca] bg-white px-3 py-2 text-sm font-semibold text-[#2e382f] outline-none focus:border-[#748478]"
+                className="rounded-full border border-app-line bg-app-surface-raised px-3 py-2 text-sm font-semibold text-app-ink-soft outline-none focus:border-app-accent"
               >
                 {character.outfits.map((outfit) => (
                   <option key={outfit.id} value={outfit.id}>
@@ -120,7 +120,7 @@ export function CharacterDetailPage() {
               <Link
                 to={`/playtest/${character.id}/${selectedOutfit.id}`}
                 aria-label="在预览台打开当前造型"
-                className="inline-flex min-h-9 items-center rounded-full bg-[#294433] px-4 text-xs font-semibold text-white transition-colors hover:bg-[#1f3828] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#294433]"
+                className="inline-flex min-h-9 items-center rounded-full bg-app-accent px-4 text-xs font-semibold text-app-on-accent transition-colors hover:bg-app-accent-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-accent"
               >
                 在预览台打开
               </Link>
@@ -129,20 +129,20 @@ export function CharacterDetailPage() {
               type="button"
               disabled
               aria-label="导出资产包"
-              className="cursor-not-allowed rounded-full border border-[#cbd1c8] px-3 py-1.5 text-xs font-semibold text-[#858c84]"
+              className="cursor-not-allowed rounded-full border border-app-line px-3 py-1.5 text-xs font-semibold text-app-faint"
             >
               导出资产包
             </button>
           </div>
-          <p className="max-w-xs text-right text-[0.62rem] text-[#858c84]">
+          <p className="max-w-xs text-right text-[0.62rem] text-app-faint">
             导出能力待 PR #97 合并并完成资产字段接线
           </p>
         </div>
       </div>
 
       {character.outfits.length === 0 || !selectedOutfit ? (
-        <div className="mt-6 rounded-[1.5rem] border border-dashed border-[#cbd0c8] bg-[#f8f8f4] p-7">
-          <h3 className="font-semibold text-[#252a25]">这个角色还没有造型</h3>
+        <div className="mt-6 rounded-[1.5rem] border border-dashed border-app-line bg-app-surface-raised p-7">
+          <h3 className="font-semibold text-app-ink">这个角色还没有造型</h3>
         </div>
       ) : (
         <>
@@ -168,8 +168,8 @@ function OutfitMaster({ character, outfit }: { character: Character; outfit: Out
             className="h-full w-full object-contain [image-rendering:pixelated]"
           />
         ) : (
-          <div className="flex h-full items-center justify-center bg-[linear-gradient(135deg,#eceee7_25%,#f7f6f1_25%,#f7f6f1_50%,#eceee7_50%,#eceee7_75%,#f7f6f1_75%)] bg-[length:28px_28px]">
-            <span className="rounded-full border border-[#b7bdb4] bg-[#fbfaf6]/90 px-3 py-1 text-xs font-semibold text-[#5f685f]">
+          <div className="flex h-full items-center justify-center bg-[linear-gradient(135deg,var(--color-app-surface-muted)_25%,var(--color-app-surface)_25%,var(--color-app-surface)_50%,var(--color-app-surface-muted)_50%,var(--color-app-surface-muted)_75%,var(--color-app-surface)_75%)] bg-[length:28px_28px]">
+            <span className="rounded-full border border-app-line bg-app-surface-raised/90 px-3 py-1 text-xs font-semibold text-app-muted">
               暂无造型预览
             </span>
           </div>
@@ -178,14 +178,14 @@ function OutfitMaster({ character, outfit }: { character: Character; outfit: Out
       <div className="min-w-0 flex-1">
         <h3
           id="outfit-master-title"
-          className="text-lg font-semibold tracking-[-0.03em] text-[#222722]"
+          className="text-lg font-semibold tracking-[-0.03em] text-app-ink"
         >
           {outfit.name}
         </h3>
         {outfit.description ? (
-          <p className="mt-1 text-xs leading-5 text-[#6a716a]">{outfit.description}</p>
+          <p className="mt-1 text-xs leading-5 text-app-muted">{outfit.description}</p>
         ) : null}
-        <p className="mt-2 text-[0.7rem] font-medium text-[#687068]">
+        <p className="mt-2 text-[0.7rem] font-medium text-app-muted">
           {outfit.actions.length} 个动作
         </p>
       </div>
@@ -200,17 +200,17 @@ function ActionList({ character, outfit }: { character: Character; outfit: Outfi
   return (
     <section aria-labelledby="action-list-title" className="mt-3">
       <div className="flex items-end justify-between gap-4">
-        <h3 id="action-list-title" className="text-lg font-semibold text-[#252a25]">
+        <h3 id="action-list-title" className="text-lg font-semibold text-app-ink">
           动作与帧
         </h3>
         <div className="flex items-center gap-3">
-          <span className="text-[0.7rem] text-[#7c837b]">点击卡片展开完整帧</span>
+          <span className="text-[0.7rem] text-app-faint">点击卡片展开完整帧</span>
           <button
             type="button"
             aria-label="增加动作"
             disabled
             title="动作生成应进入 Workflow Editor"
-            className="cursor-not-allowed rounded-full border border-[#cbd1c8] px-3 py-1.5 text-xs font-semibold text-[#858c84]"
+            className="cursor-not-allowed rounded-full border border-app-line px-3 py-1.5 text-xs font-semibold text-app-faint"
           >
             ＋ 增加动作
           </button>
@@ -218,9 +218,9 @@ function ActionList({ character, outfit }: { character: Character; outfit: Outfi
       </div>
 
       {outfit.actions.length === 0 ? (
-        <div className="mt-4 rounded-[1.5rem] border border-dashed border-[#cbd0c8] bg-[#f8f8f4] p-7">
-          <h4 className="font-semibold text-[#252a25]">这个造型还没有动作</h4>
-          <p className="mt-2 text-sm leading-6 text-[#6d736c]">生成并保存动作后会显示在这里。</p>
+        <div className="mt-4 rounded-[1.5rem] border border-dashed border-app-line bg-app-surface-raised p-7">
+          <h4 className="font-semibold text-app-ink">这个造型还没有动作</h4>
+          <p className="mt-2 text-sm leading-6 text-app-muted">生成并保存动作后会显示在这里。</p>
         </div>
       ) : (
         <>
@@ -243,9 +243,9 @@ function ActionList({ character, outfit }: { character: Character; outfit: Outfi
                     aria-label={`${expanded ? '收起' : '展开'}${action.name}`}
                     aria-expanded={expanded}
                     onClick={() => setSelectedActionId(expanded ? null : action.id)}
-                    className={`block w-full overflow-hidden rounded-[1.4rem] border bg-white text-left transition duration-500 group-hover:-translate-y-2 ${expanded ? 'border-[#718876] ring-4 ring-[#dfe8df]' : 'border-[#cfd5cd]'}`}
+                    className={`block w-full overflow-hidden rounded-[1.4rem] border bg-app-surface-raised text-left transition duration-500 group-hover:-translate-y-2 ${expanded ? 'border-app-accent ring-4 ring-app-accent-soft' : 'border-app-line'}`}
                   >
-                    <div className="relative aspect-[16/10] overflow-hidden bg-[#eef1ec]">
+                    <div className="relative aspect-[16/10] overflow-hidden bg-app-surface-muted">
                       {previewFrame ? (
                         <img
                           src={previewFrame.imageUrl}
@@ -253,17 +253,17 @@ function ActionList({ character, outfit }: { character: Character; outfit: Outfi
                           className="h-full w-full object-contain p-2 [image-rendering:pixelated]"
                         />
                       ) : (
-                        <span className="grid h-full place-items-center text-xs text-[#687068]">
+                        <span className="grid h-full place-items-center text-xs text-app-muted">
                           暂无帧
                         </span>
                       )}
                     </div>
                     <div className="p-3">
                       <div className="flex items-center justify-between gap-3">
-                        <h4 className="font-semibold text-[#252b25]">{action.name}</h4>
-                        <span className="text-sm text-[#69756b]">{expanded ? '−' : '↗'}</span>
+                        <h4 className="font-semibold text-app-ink">{action.name}</h4>
+                        <span className="text-sm text-app-muted">{expanded ? '−' : '↗'}</span>
                       </div>
-                      <p className="mt-1 text-xs text-[#747b73]">
+                      <p className="mt-1 text-xs text-app-faint">
                         {actionTypeLabel(action.type)} · {action.fps} FPS · {action.frameCount} 帧 ·{' '}
                         {action.loop ? '循环' : '单次'}
                       </p>
@@ -277,17 +277,17 @@ function ActionList({ character, outfit }: { character: Character; outfit: Outfi
           {selectedAction ? (
             <section
               aria-label={`${selectedAction.name}完整帧序列`}
-              className="action-reveal overflow-hidden rounded-[1.35rem] border border-[#d6dbd4] bg-white p-4"
+              className="action-reveal overflow-hidden rounded-[1.35rem] border border-app-line bg-app-surface-raised p-4"
             >
               <div className="flex flex-wrap items-start justify-between gap-4">
                 <div>
                   <div className="flex flex-wrap items-center gap-2">
-                    <h4 className="text-lg font-semibold text-[#242924]">{selectedAction.name}</h4>
-                    <span className="rounded-full bg-[#edf0ea] px-2.5 py-1 text-[0.68rem] font-semibold text-[#566258]">
+                    <h4 className="text-lg font-semibold text-app-ink">{selectedAction.name}</h4>
+                    <span className="rounded-full bg-app-surface-muted px-2.5 py-1 text-[0.68rem] font-semibold text-app-ink-soft">
                       {actionTypeLabel(selectedAction.type)}
                     </span>
                   </div>
-                  <p className="mt-2 text-xs text-[#747b73]">
+                  <p className="mt-2 text-xs text-app-faint">
                     {selectedAction.fps} FPS · {selectedAction.frameCount} 帧 ·{' '}
                     {selectedAction.loop ? '循环播放' : '单次播放'}
                   </p>
@@ -298,7 +298,7 @@ function ActionList({ character, outfit }: { character: Character; outfit: Outfi
                     aria-label={`重新生成${selectedAction.name}`}
                     disabled
                     title="需要原 WorkflowRun 的步骤上下文"
-                    className="cursor-not-allowed rounded-full border border-[#d8dcd5] px-3 py-1.5 text-xs font-semibold text-[#959b94]"
+                    className="cursor-not-allowed rounded-full border border-app-line px-3 py-1.5 text-xs font-semibold text-app-faint"
                   >
                     重新生成
                   </button>
@@ -307,28 +307,28 @@ function ActionList({ character, outfit }: { character: Character; outfit: Outfi
                     disabled
                     aria-label="保存为动作模板"
                     title="动作模板后端未提供"
-                    className="cursor-not-allowed rounded-full border border-[#d8dcd5] px-3 py-1.5 text-xs font-semibold text-[#959b94]"
+                    className="cursor-not-allowed rounded-full border border-app-line px-3 py-1.5 text-xs font-semibold text-app-faint"
                   >
                     保存为动作模板
                   </button>
                 </div>
               </div>
-              <p className="mt-2 text-[0.65rem] text-[#8a9088]">动作模板后端未提供</p>
-              <p className="mt-2 text-[0.68rem] font-medium text-[#687068]">
+              <p className="mt-2 text-[0.65rem] text-app-faint">动作模板后端未提供</p>
+              <p className="mt-2 text-[0.68rem] font-medium text-app-muted">
                 {characterName(character)} / {outfit.name} / {selectedAction.name}
               </p>
               <div className="mt-3 overflow-x-auto pb-1">
                 <ol className="flex min-w-max gap-2.5">
                   {orderedFrames(selectedAction).map((frame) => (
                     <li key={`${selectedAction.id}-${frame.index}`} className="w-20 shrink-0">
-                      <div className="overflow-hidden rounded-xl border border-[#dde0d9]">
+                      <div className="overflow-hidden rounded-xl border border-app-line">
                         <img
                           src={frame.imageUrl}
                           alt={`${selectedAction.name}第 ${frame.index + 1} 帧`}
                           className="aspect-square w-full object-contain p-1 [image-rendering:pixelated]"
                         />
                       </div>
-                      <div className="mt-2 flex items-center justify-between gap-1 text-[0.65rem] text-[#7b827a]">
+                      <div className="mt-2 flex items-center justify-between gap-1 text-[0.65rem] text-app-faint">
                         <span>#{String(frame.index + 1).padStart(2, '0')}</span>
                         <span>
                           {frame.durationMs === null
diff --git a/frontend/src/pages/playtest/entry.tsx b/frontend/src/pages/playtest/entry.tsx
index f5acdb3b..93c315a8 100644
--- a/frontend/src/pages/playtest/entry.tsx
+++ b/frontend/src/pages/playtest/entry.tsx
@@ -88,24 +88,24 @@ export function PlaytestEntryPage() {
   return (
     <PageContainer>
       <section aria-labelledby="playtest-entry-title">
-        <header className="relative overflow-hidden border-b border-[#d8dbd4] bg-[linear-gradient(105deg,#fff_0%,#fff_54%,#f1f4ef_100%)] pb-7 md:min-h-64 md:px-2 md:py-7">
+        <header className="relative overflow-hidden border-b border-app-line bg-[linear-gradient(105deg,var(--color-app-surface-raised)_0%,var(--color-app-surface-raised)_54%,var(--color-app-surface)_100%)] pb-7 md:min-h-64 md:px-2 md:py-7">
           <div className="relative z-10 max-w-xl">
-            <p className="font-mono text-[0.68rem] font-semibold tracking-[0.2em] text-[#778078] uppercase">
+            <p className="font-mono text-[0.68rem] font-semibold tracking-[0.2em] text-app-faint uppercase">
               Character field test
             </p>
             <div className="mt-3">
               <h1
                 id="playtest-entry-title"
-                className="font-serif text-4xl font-medium tracking-[-0.045em] text-[#1f211e]"
+                className="font-serif text-4xl font-medium tracking-[-0.045em] text-app-ink"
               >
                 选择可预览资产
               </h1>
-              <p className="mt-2 max-w-2xl text-sm leading-6 text-[#696e67]">
+              <p className="mt-2 max-w-2xl text-sm leading-6 text-app-muted">
                 选择一套已有造型，检查动作衔接、移动反馈和实际播放效果。
               </p>
             </div>
-            <div className="mt-5 flex items-center gap-3 font-mono text-[0.68rem] text-[#747c74]">
-              <span className="inline-block h-1.5 w-1.5 bg-[#294433]" />
+            <div className="mt-5 flex items-center gap-3 font-mono text-[0.68rem] text-app-faint">
+              <span className="inline-block h-1.5 w-1.5 bg-app-accent" />
               <span>{state.groups !== null ? `${outfitCount} 套造型已接入` : '正在接入资产'}</span>
             </div>
           </div>
@@ -116,7 +116,7 @@ export function PlaytestEntryPage() {
         {state.error ? (
           <ErrorState />
         ) : state.groups === null ? (
-          <p className="mt-8 text-sm text-[#70766f]">正在整理可预览资产…</p>
+          <p className="mt-8 text-sm text-app-muted">正在整理可预览资产…</p>
         ) : outfitCount === 0 ? (
           <EmptyState />
         ) : (
@@ -132,13 +132,13 @@ export function PlaytestEntryPage() {
                   <div className="flex items-center justify-between gap-4">
                     <h2
                       id={`project-${group.project.id}`}
-                      className="text-sm font-semibold text-[#343a34]"
+                      className="text-sm font-semibold text-app-ink-soft"
                     >
                       {group.project.name}
                     </h2>
                     <Link
                       to={`/projects/${group.project.id}/assets`}
-                      className="text-xs font-medium text-[#687268] underline decoration-[#b8c0b8] underline-offset-4 hover:text-[#294433]"
+                      className="text-xs font-medium text-app-muted underline decoration-app-line underline-offset-4 hover:text-app-accent"
                     >
                       查看项目资产
                     </Link>
@@ -169,13 +169,13 @@ function OutfitCard({ character, outfit }: { character: Character; outfit: Outfi
   const name = characterName(character)
   const content = (
     <article
-      className={`group overflow-hidden rounded-[1.4rem] border bg-[#f4f5f1] ${
+      className={`group overflow-hidden rounded-[1.4rem] border bg-app-surface ${
         playable
-          ? 'border-[#d3d8d1] transition duration-300 hover:-translate-y-0.5 hover:border-[#88988b] hover:bg-white'
-          : 'border-[#dfe2dc] text-[#7b827b]'
+          ? 'border-app-line transition duration-300 hover:-translate-y-0.5 hover:border-app-line-strong hover:bg-app-surface-raised'
+          : 'border-app-line text-app-faint'
       }`}
     >
-      <div className="relative aspect-[16/9] overflow-hidden border-b border-[#dde1da] bg-[#e8ece7]">
+      <div className="relative aspect-[16/9] overflow-hidden border-b border-app-line bg-app-surface-muted">
         {outfit.previewUrl ? (
           <img
             src={outfit.previewUrl}
@@ -187,8 +187,8 @@ function OutfitCard({ character, outfit }: { character: Character; outfit: Outfi
             }`}
           />
         ) : (
-          <div className="grid h-full place-items-center bg-[linear-gradient(135deg,#e3e7e1_25%,#f1f2ee_25%,#f1f2ee_50%,#e3e7e1_50%,#e3e7e1_75%,#f1f2ee_75%)] bg-[length:24px_24px]">
-            <span className="rounded-full border border-[#c9cec7] bg-[#f8f9f6]/90 px-3 py-1 text-xs font-medium text-[#707870]">
+          <div className="grid h-full place-items-center bg-[linear-gradient(135deg,var(--color-app-surface-muted)_25%,var(--color-app-surface)_25%,var(--color-app-surface)_50%,var(--color-app-surface-muted)_50%,var(--color-app-surface-muted)_75%,var(--color-app-surface)_75%)] bg-[length:24px_24px]">
+            <span className="rounded-full border border-app-line bg-app-surface-raised/90 px-3 py-1 text-xs font-medium text-app-muted">
               暂无造型预览
             </span>
           </div>
@@ -196,24 +196,24 @@ function OutfitCard({ character, outfit }: { character: Character; outfit: Outfi
         <span
           className={`absolute right-3 top-3 rounded-full border px-2.5 py-1 text-[0.65rem] font-semibold ${
             playable
-              ? 'border-[#9eafa1] bg-[#edf3ed]/95 text-[#294433]'
-              : 'border-[#cdd2cc] bg-[#f4f5f1]/95 text-[#7a817a]'
+              ? 'border-app-line-strong bg-app-accent-muted/95 text-app-accent'
+              : 'border-app-line bg-app-surface/95 text-app-faint'
           }`}
         >
           {playable ? '可预览' : '待补帧'}
         </span>
       </div>
       <div className="p-4">
-        <p className="text-xs text-[#747b73]">{name}</p>
+        <p className="text-xs text-app-faint">{name}</p>
         <div className="mt-1 flex items-start justify-between gap-3">
-          <h3 className="font-serif text-xl font-medium tracking-[-0.03em] text-[#252925]">
+          <h3 className="font-serif text-xl font-medium tracking-[-0.03em] text-app-ink">
             {outfit.name}
           </h3>
-          <span aria-hidden="true" className="text-[#7a877d]">
+          <span aria-hidden="true" className="text-app-faint">
             {playable ? '↗' : '—'}
           </span>
         </div>
-        <p className="mt-4 border-t border-[#dfe2dc] pt-3 text-xs text-[#687168]">
+        <p className="mt-4 border-t border-app-line pt-3 text-xs text-app-muted">
           {playable ? `${outfit.actions.length} 个动作 · ${frameCount} 帧` : '尚无可播放帧'}
         </p>
       </div>
@@ -226,7 +226,7 @@ function OutfitCard({ character, outfit }: { character: Character; outfit: Outfi
     <Link
       to={`/playtest/${character.id}/${outfit.id}`}
       aria-label={`预览 ${name} · ${outfit.name}`}
-      className="block rounded-[1.4rem] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#294433]"
+      className="block rounded-[1.4rem] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-accent"
     >
       {content}
     </Link>
@@ -235,23 +235,23 @@ function OutfitCard({ character, outfit }: { character: Character; outfit: Outfi
 
 function EmptyState() {
   return (
-    <div className="mt-7 rounded-[1.5rem] border border-dashed border-[#c9cec6] bg-[#f7f8f4] p-7 sm:p-9">
-      <h2 className="font-serif text-2xl font-medium tracking-[-0.03em] text-[#252a25]">
+    <div className="mt-7 rounded-[1.5rem] border border-dashed border-app-line bg-app-surface-raised p-7 sm:p-9">
+      <h2 className="font-serif text-2xl font-medium tracking-[-0.03em] text-app-ink">
         还没有可预览的角色
       </h2>
-      <p className="mt-2 max-w-xl text-sm leading-6 text-[#6d736c]">
+      <p className="mt-2 max-w-xl text-sm leading-6 text-app-muted">
         完成角色与动作制作后，可以在这里检查移动和动画效果。
       </p>
       <div className="mt-6 flex flex-wrap gap-3">
         <Link
           to="/quick-start"
-          className="inline-flex min-h-10 items-center rounded-full bg-[#294433] px-5 text-sm font-semibold text-white hover:bg-[#1f3828] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#294433]"
+          className="inline-flex min-h-10 items-center rounded-full bg-app-accent px-5 text-sm font-semibold text-app-on-accent hover:bg-app-accent-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-accent"
         >
           开始创作
         </Link>
         <Link
           to="/projects"
-          className="inline-flex min-h-10 items-center rounded-full border border-[#c7cec6] px-5 text-sm font-semibold text-[#465047] hover:border-[#939f95] hover:bg-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#294433]"
+          className="inline-flex min-h-10 items-center rounded-full border border-app-line px-5 text-sm font-semibold text-app-ink-soft hover:border-app-line-strong hover:bg-app-surface-raised focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-accent"
         >
           查看项目资产
         </Link>
@@ -262,12 +262,12 @@ function EmptyState() {
 
 function ErrorState() {
   return (
-    <div className="mt-7 rounded-[1.5rem] border border-[#d8c7bd] bg-[#fff8f2] p-7">
-      <h2 className="font-semibold text-[#6f3928]">可预览资产暂时无法读取</h2>
-      <p className="mt-2 text-sm text-[#7a5548]">稍后刷新页面，或先回项目资产检查角色数据。</p>
+    <div className="mt-7 rounded-[1.5rem] border border-app-danger-line bg-app-danger-soft p-7">
+      <h2 className="font-semibold text-app-danger">可预览资产暂时无法读取</h2>
+      <p className="mt-2 text-sm text-app-danger-muted">稍后刷新页面，或先回项目资产检查角色数据。</p>
       <Link
         to="/projects"
-        className="mt-5 inline-flex min-h-10 items-center rounded-full border border-[#c9a99b] px-5 text-sm font-semibold text-[#6f3928]"
+        className="mt-5 inline-flex min-h-10 items-center rounded-full border border-app-danger-line px-5 text-sm font-semibold text-app-danger"
       >
         查看项目资产
       </Link>
diff --git a/frontend/src/pages/playtest/index.tsx b/frontend/src/pages/playtest/index.tsx
index 0060fd30..f0c118c3 100644
--- a/frontend/src/pages/playtest/index.tsx
+++ b/frontend/src/pages/playtest/index.tsx
@@ -76,8 +76,8 @@ export function PlaytestPage() {
 
 function PlaytestPageMessage({ children }: { children: string }) {
   return (
-    <main aria-label="预览台" className="grid min-h-screen place-items-center bg-[#dfe3df] p-6">
-      <p className="text-sm font-medium text-[#3d443f]">{children}</p>
+    <main aria-label="预览台" className="grid min-h-screen place-items-center bg-app-surface-strong p-6">
+      <p className="text-sm font-medium text-app-ink-soft">{children}</p>
     </main>
   )
 }
diff --git a/frontend/src/pages/playtest/workbench/index.tsx b/frontend/src/pages/playtest/workbench/index.tsx
index efaf09be..558c7c0d 100644
--- a/frontend/src/pages/playtest/workbench/index.tsx
+++ b/frontend/src/pages/playtest/workbench/index.tsx
@@ -27,8 +27,8 @@ export function PlaytestWorkbench({
 
   if (!result.ok) {
     return (
-      <main aria-label="预览台" className="grid min-h-screen place-items-center bg-[#dfe3df] p-6">
-        <p className="rounded-full border border-[#c6ccc6] bg-[#f4f3ed] px-5 py-3 text-sm text-[#555b56]">
+      <main aria-label="预览台" className="grid min-h-screen place-items-center bg-app-surface-strong p-6">
+        <p className="rounded-full border border-app-line bg-app-surface px-5 py-3 text-sm text-app-ink-soft">
           找不到指定造型，无法进入预览台。
         </p>
       </main>
@@ -61,12 +61,12 @@ function PlaytestExperience({
   return (
     <main
       aria-label="预览台"
-      className="flex h-screen flex-col bg-[#dfe3df] px-3 pb-4 pt-24 text-[#171817] sm:px-5 sm:pb-5"
+      className="flex h-screen flex-col bg-app-surface-strong px-3 pb-4 pt-24 text-app-ink sm:px-5 sm:pb-5"
     >
       <div className="mx-auto flex w-full max-w-[1600px] flex-1 flex-col gap-4">
         <header className="flex flex-wrap items-end justify-between gap-3 px-1">
           <div>
-            <p className="font-mono text-[10px] font-semibold tracking-[0.2em] text-[#747973]">
+            <p className="font-mono text-[10px] font-semibold tracking-[0.2em] text-app-faint">
               预览台
             </p>
             <h1
@@ -76,7 +76,7 @@ function PlaytestExperience({
               {model.outfitName}
             </h1>
           </div>
-          <p className="text-xs text-[#666c67]">A / D 或方向键操控角色</p>
+          <p className="text-xs text-app-muted">A / D 或方向键操控角色</p>
         </header>
 
         {/*
@@ -94,9 +94,9 @@ function PlaytestExperience({
 
           <aside
             aria-label="动作绑定"
-            className="absolute left-4 top-4 w-[150px] rounded-2xl border border-white/55 bg-[#f4f3ed]/95 p-2.5 shadow-[0_12px_32px_rgba(0,0,0,0.18)] backdrop-blur-xl sm:left-5 sm:top-5 sm:w-[176px]"
+            className="absolute left-4 top-4 w-[150px] rounded-2xl border border-app-surface-raised/55 bg-app-surface/95 p-2.5 shadow-app-stage-panel backdrop-blur-xl sm:left-5 sm:top-5 sm:w-[176px]"
           >
-            <p className="px-2 pb-2 font-mono text-[9px] font-semibold tracking-[0.16em] text-[#747973]">
+            <p className="px-2 pb-2 font-mono text-[9px] font-semibold tracking-[0.16em] text-app-faint">
               BOUND ACTIONS
             </p>
             <div className="space-y-1">
@@ -110,14 +110,14 @@ function PlaytestExperience({
                     aria-pressed={selected}
                     onClick={() => runtime.selectAction(action.id)}
                     className={`flex w-full items-center justify-between rounded-xl px-3 py-2.5 text-left text-xs font-medium transition-colors ${
-                      selected ? 'bg-[#263f2d] text-white' : 'text-[#343834] hover:bg-[#e3e5df]'
+                      selected ? 'bg-app-accent text-app-on-accent' : 'text-app-ink-soft hover:bg-app-surface-muted'
                     }`}
                   >
                     <span>{action.name}</span>
                     <span
                       aria-hidden="true"
                       className={`h-1.5 w-1.5 rounded-full ${
-                        selected ? 'bg-[#b8d0bc]' : 'bg-[#b9beb9]'
+                        selected ? 'bg-app-accent-soft' : 'bg-app-line'
                       }`}
                     />
                   </button>
@@ -129,7 +129,7 @@ function PlaytestExperience({
           <div
             role="group"
             aria-label="角色操控"
-            className="absolute bottom-4 left-1/2 flex -translate-x-1/2 items-center gap-2 rounded-full border border-white/60 bg-[#f4f3ed]/95 p-2 shadow-[0_16px_40px_rgba(0,0,0,0.24)] backdrop-blur-2xl sm:bottom-5"
+            className="absolute bottom-4 left-1/2 flex -translate-x-1/2 items-center gap-2 rounded-full border border-app-surface-raised/60 bg-app-surface/95 p-2 shadow-app-float backdrop-blur-2xl sm:bottom-5"
           >
             {(['left', 'right'] as const).map((direction) => (
               <button
@@ -149,15 +149,15 @@ function PlaytestExperience({
                 }
                 className={`grid h-11 w-14 touch-none place-items-center rounded-full border font-mono text-sm transition-colors ${
                   runtime.runtime.held[direction]
-                    ? 'border-[#263f2d] bg-[#263f2d] text-white'
-                    : 'border-[#cfd1ca] bg-white/80 text-[#2e322f] hover:border-[#929a93]'
+                    ? 'border-app-accent bg-app-accent text-app-on-accent'
+                    : 'border-app-line bg-app-surface-raised/80 text-app-ink-soft hover:border-app-line-strong'
                 }`}
               >
                 {direction === 'left' ? '←' : '→'}
               </button>
             ))}
             <div className="hidden min-w-[116px] px-3 sm:block">
-              <p className="text-[10px] text-[#747973]">当前动作</p>
+              <p className="text-[10px] text-app-faint">当前动作</p>
               <p className="mt-0.5 truncate text-xs font-semibold">
                 {runtime.action?.name ?? '无'}
               </p>
diff --git a/frontend/src/pages/project-create/index.tsx b/frontend/src/pages/project-create/index.tsx
index 61521256..4c7961c0 100644
--- a/frontend/src/pages/project-create/index.tsx
+++ b/frontend/src/pages/project-create/index.tsx
@@ -16,14 +16,14 @@ import { ProjectCreatePixelMark } from './pixel-mark'
 
 /**
  * 项目名称上限跟随 main 上 `windup_project.project_name` 的 `String(20)`。
- * 尚未合入的两个后端 PR 在这里不一致（#75 限 20、#126 放宽到 64），取更严的一边，
+ * 尚未合入的两个后端 PR 在这里不一致（PR 75 限 20、PR 126 放宽到 64），取更严的一边，
  * 哪条先落地都能提交成功；放宽是加法，反过来会立刻退回重名与截断。
  */
 const NAME_MAX_LENGTH = 20
 
 /**
  * 精灵宽高的合法区间。写在前端是因为 main 的后端还没有 `/projects` 路由，
- * 取值依据是 issue #141 的产品规则（与未合入的 #75 / #126 请求校验一致）。
+ * 取值依据是 Issue 141 的产品规则（与未合入的 PR 75 / PR 126 请求校验一致）。
  */
 const SPRITE_MIN = 32
 const SPRITE_MAX = 2048
@@ -116,16 +116,16 @@ export function ProjectCreatePage() {
   }
 
   return (
-    <div className="grid min-h-[calc(100vh-4rem)] w-full bg-[#e5e8e3] text-[#191b18] lg:grid-cols-[minmax(0,0.85fr)_minmax(0,1.15fr)]">
+    <div className="grid min-h-[calc(100vh-4rem)] w-full bg-app-canvas text-app-ink lg:grid-cols-[minmax(0,0.85fr)_minmax(0,1.15fr)]">
       <aside className="hidden place-content-center justify-items-center gap-8 px-10 pb-16 pt-24 lg:grid">
         <ProjectCreatePixelMark />
-        <p className="max-w-72 text-center text-xs leading-6 text-[#747973]">
+        <p className="max-w-72 text-center text-xs leading-6 text-app-muted">
           项目决定角色资产的视角、朝向与精灵尺寸。这些约束建立之后会跟着项目下的每一个角色。
         </p>
       </aside>
 
       {/* pt-24 与 PageContainer 同源：给 fixed 顶栏（top-3.5 加最小高 3.625rem）让位，改顶栏尺寸时一起改。 */}
-      <section className="bg-white/70 px-6 pb-12 pt-24 sm:px-12 lg:px-16 lg:pb-20 lg:pt-28">
+      <section className="bg-app-surface-raised/70 px-6 pb-12 pt-24 sm:px-12 lg:px-16 lg:pb-20 lg:pt-28">
         <form
           noValidate
           onSubmit={submit}
@@ -133,17 +133,17 @@ export function ProjectCreatePage() {
           className="mx-auto grid max-w-2xl gap-7"
         >
           <header>
-            <p className="font-mono text-[10px] font-semibold tracking-[0.18em] text-[#8b9089]">
+            <p className="font-mono text-[10px] font-semibold tracking-[0.18em] text-app-faint">
               PROJECT SETUP
             </p>
             <h1 className="mt-3 font-serif text-4xl font-medium tracking-[-0.045em]">新建项目</h1>
-            <p className="mt-3 text-sm leading-6 text-[#666b64]">
+            <p className="mt-3 text-sm leading-6 text-app-muted">
               只确定项目级的题材与规格；角色和动作在项目内再逐个创建。
             </p>
           </header>
 
           <div className="grid gap-2">
-            <label className="text-xs font-semibold text-[#41473f]" htmlFor="project-name">
+            <label className="text-xs font-semibold text-app-ink-soft" htmlFor="project-name">
               项目名称
             </label>
             <input
@@ -153,16 +153,16 @@ export function ProjectCreatePage() {
               maxLength={NAME_MAX_LENGTH}
               placeholder="例如：雾港来信"
               onChange={(event) => setName(event.target.value)}
-              className="rounded-xl border border-[#d5d9d2] bg-[#f5f5f2] px-4 py-3 text-sm outline-none focus-visible:border-[#8f978d]"
+              className="rounded-xl border border-app-line bg-app-surface px-4 py-3 text-sm outline-none focus-visible:border-app-accent"
             />
-            <small className="text-[10px] text-[#8b9089]">
+            <small className="text-[10px] text-app-faint">
               最多 {NAME_MAX_LENGTH} 个字，同一账号下不能重名。
             </small>
           </div>
 
           <div className="grid gap-5 sm:grid-cols-2">
             <div className="grid gap-2">
-              <label className="text-xs font-semibold text-[#41473f]" htmlFor="project-perspective">
+              <label className="text-xs font-semibold text-app-ink-soft" htmlFor="project-perspective">
                 游戏视角
               </label>
               <select
@@ -170,7 +170,7 @@ export function ProjectCreatePage() {
                 value={perspective}
                 disabled={createdProject !== null}
                 onChange={(event) => setPerspective(event.target.value as CharacterPerspective)}
-                className="rounded-xl border border-[#d5d9d2] bg-[#f5f5f2] px-4 py-3 text-sm outline-none focus-visible:border-[#8f978d]"
+                className="rounded-xl border border-app-line bg-app-surface px-4 py-3 text-sm outline-none focus-visible:border-app-accent"
               >
                 {Object.entries(CHARACTER_PERSPECTIVE).map(([value, label]) => (
                   <option key={value} value={value}>
@@ -181,7 +181,7 @@ export function ProjectCreatePage() {
             </div>
 
             <div className="grid gap-2">
-              <label className="text-xs font-semibold text-[#41473f]" htmlFor="project-movement">
+              <label className="text-xs font-semibold text-app-ink-soft" htmlFor="project-movement">
                 朝向
               </label>
               <select
@@ -191,7 +191,7 @@ export function ProjectCreatePage() {
                 onChange={(event) =>
                   setDirectionalMovement(event.target.value as DirectionalMovement)
                 }
-                className="rounded-xl border border-[#d5d9d2] bg-[#f5f5f2] px-4 py-3 text-sm outline-none focus-visible:border-[#8f978d]"
+                className="rounded-xl border border-app-line bg-app-surface px-4 py-3 text-sm outline-none focus-visible:border-app-accent"
               >
                 {Object.entries(DIRECTIONAL_MOVEMENT).map(([value, label]) => (
                   <option key={value} value={value}>
@@ -203,7 +203,7 @@ export function ProjectCreatePage() {
           </div>
 
           <fieldset className="grid gap-3">
-            <legend className="text-xs font-semibold text-[#41473f]">精灵尺寸</legend>
+            <legend className="text-xs font-semibold text-app-ink-soft">精灵尺寸</legend>
             <div className="flex flex-wrap gap-2">
               {SPRITE_PRESETS.map((preset) => (
                 <button
@@ -217,7 +217,7 @@ export function ProjectCreatePage() {
                     setError(null)
                   }}
                   aria-pressed={spriteWidth === String(preset) && spriteHeight === String(preset)}
-                  className="rounded-full border border-[#d5d9d2] px-4 py-1.5 text-xs text-[#41473f] aria-pressed:border-[#252825] aria-pressed:bg-[#252825] aria-pressed:text-white"
+                  className="rounded-full border border-app-line px-4 py-1.5 text-xs text-app-ink-soft aria-pressed:border-app-accent aria-pressed:bg-app-accent aria-pressed:text-app-on-accent"
                 >
                   {preset} × {preset}
                 </button>
@@ -225,7 +225,7 @@ export function ProjectCreatePage() {
             </div>
             <div className="grid gap-5 sm:grid-cols-2">
               <div className="grid gap-2">
-                <label className="text-[10px] text-[#8b9089]" htmlFor="project-sprite-width">
+                <label className="text-[10px] text-app-faint" htmlFor="project-sprite-width">
                   宽度（像素）
                 </label>
                 <input
@@ -237,11 +237,11 @@ export function ProjectCreatePage() {
                   value={spriteWidth}
                   disabled={createdProject !== null}
                   onChange={(event) => setSpriteWidth(event.target.value)}
-                  className="rounded-xl border border-[#d5d9d2] bg-[#f5f5f2] px-4 py-3 text-sm outline-none focus-visible:border-[#8f978d]"
+                  className="rounded-xl border border-app-line bg-app-surface px-4 py-3 text-sm outline-none focus-visible:border-app-accent"
                 />
               </div>
               <div className="grid gap-2">
-                <label className="text-[10px] text-[#8b9089]" htmlFor="project-sprite-height">
+                <label className="text-[10px] text-app-faint" htmlFor="project-sprite-height">
                   高度（像素）
                 </label>
                 <input
@@ -253,14 +253,14 @@ export function ProjectCreatePage() {
                   value={spriteHeight}
                   disabled={createdProject !== null}
                   onChange={(event) => setSpriteHeight(event.target.value)}
-                  className="rounded-xl border border-[#d5d9d2] bg-[#f5f5f2] px-4 py-3 text-sm outline-none focus-visible:border-[#8f978d]"
+                  className="rounded-xl border border-app-line bg-app-surface px-4 py-3 text-sm outline-none focus-visible:border-app-accent"
                 />
               </div>
             </div>
           </fieldset>
 
           <div className="grid gap-2">
-            <label className="text-xs font-semibold text-[#41473f]" htmlFor="project-style">
+            <label className="text-xs font-semibold text-app-ink-soft" htmlFor="project-style">
               画风约束
             </label>
             <textarea
@@ -271,23 +271,23 @@ export function ProjectCreatePage() {
               maxLength={GAME_STYLE_MAX_LENGTH}
               placeholder="例如：低饱和像素风、细长比例、深灰旅行服"
               onChange={(event) => setGameStyle(event.target.value)}
-              className="resize-none rounded-xl border border-[#d5d9d2] bg-[#f5f5f2] px-4 py-3 text-sm outline-none focus-visible:border-[#8f978d]"
+              className="resize-none rounded-xl border border-app-line bg-app-surface px-4 py-3 text-sm outline-none focus-visible:border-app-accent"
             />
           </div>
 
           {error ? (
             <p
               role="alert"
-              className="rounded-xl border border-[#d8c7bd] bg-[#fff8f2] px-4 py-3 text-sm text-[#7a3f2a]"
+              className="rounded-xl border border-app-danger-line bg-app-danger-soft px-4 py-3 text-sm text-app-danger"
             >
               {error}
             </p>
           ) : null}
 
-          <footer className="flex flex-wrap items-center justify-between gap-4 border-t border-[#d8dbd4] pt-6">
+          <footer className="flex flex-wrap items-center justify-between gap-4 border-t border-app-line pt-6">
             <small
               id="project-create-hint"
-              className="max-w-sm text-[11px] leading-5 text-[#747973]"
+              className="max-w-sm text-[11px] leading-5 text-app-muted"
             >
               {signedIn
                 ? opensWorkflowEditor
@@ -301,7 +301,7 @@ export function ProjectCreatePage() {
               type="submit"
               disabled={submitting || !signedIn}
               aria-describedby="project-create-hint"
-              className="rounded-full bg-[#252825] px-6 py-3 text-sm font-semibold text-white disabled:cursor-not-allowed disabled:bg-[#a4aaa2]"
+              className="rounded-full bg-app-accent px-6 py-3 text-sm font-semibold text-app-on-accent hover:bg-app-accent-hover disabled:cursor-not-allowed disabled:bg-app-line-strong"
             >
               {submitting
                 ? createdProject
diff --git a/frontend/src/pages/project-detail/index.tsx b/frontend/src/pages/project-detail/index.tsx
index 3fc3e64c..38e738cb 100644
--- a/frontend/src/pages/project-detail/index.tsx
+++ b/frontend/src/pages/project-detail/index.tsx
@@ -58,13 +58,13 @@ export function ProjectDetailPage() {
     return (
       <p
         role="alert"
-        className="m-6 rounded-xl border border-[#d8c7bd] bg-[#fff8f2] p-5 text-sm text-[#7a3f2a]"
+        className="m-6 rounded-xl border border-app-danger-line bg-app-danger-soft p-5 text-sm text-app-danger"
       >
         {error}
       </p>
     )
   }
-  if (!project) return <p className="p-6 text-sm text-[#6f746d]">正在读取项目…</p>
+  if (!project) return <p className="bg-app-canvas p-6 text-sm text-app-muted">正在读取项目…</p>
 
   const constraints = [
     ['视角', CHARACTER_PERSPECTIVE[project.perspective]],
@@ -78,13 +78,13 @@ export function ProjectDetailPage() {
   }
 
   return (
-    <div className="grid min-h-screen gap-3 bg-[#f7f8f5] p-3 md:h-screen md:grid-cols-[13rem_minmax(0,1fr)] md:overflow-hidden xl:grid-cols-[14rem_minmax(0,1fr)]">
-      <aside className="flex min-h-0 flex-col overflow-hidden rounded-[1.35rem] border border-[#d9ddd6] bg-[#fbfbf8] text-[#222520]">
-        <div className="border-b border-[#dfe2dc] px-4 py-4">
+    <div className="grid min-h-screen gap-3 bg-app-canvas p-3 text-app-ink md:h-screen md:grid-cols-[13rem_minmax(0,1fr)] md:overflow-hidden xl:grid-cols-[14rem_minmax(0,1fr)]">
+      <aside className="flex min-h-0 flex-col overflow-hidden rounded-[1.35rem] border border-app-line bg-app-surface-raised text-app-ink">
+        <div className="border-b border-app-line px-4 py-4">
           <Link
             to="/projects"
             aria-label="返回项目中心"
-            className="text-xs font-medium text-[#687067] hover:text-[#242824]"
+            className="text-xs font-medium text-app-muted hover:text-app-accent"
           >
             ‹ 项目中心
           </Link>
@@ -92,24 +92,24 @@ export function ProjectDetailPage() {
         </div>
 
         <nav aria-label="资产分类" className="p-2.5">
-          <p className="px-2 pb-2 pt-1 text-[0.65rem] font-semibold uppercase tracking-[0.12em] text-[#858c84]">
+          <p className="px-2 pb-2 pt-1 text-[0.65rem] font-semibold uppercase tracking-[0.12em] text-app-faint">
             资产库
           </p>
           <div className="space-y-0.5">
             <Link
               to={`/projects/${project.id}/assets`}
               aria-current="page"
-              className="flex h-9 items-center justify-between rounded-xl bg-[#dfe7dd] px-2.5 text-sm font-semibold text-[#263f2d] transition"
+              className="flex h-9 items-center justify-between rounded-xl bg-app-accent-soft px-2.5 text-sm font-semibold text-app-accent transition"
             >
               <span>角色</span>
-              <span className="text-xs tabular-nums text-[#7d857d]">{characterCount}</span>
+              <span className="text-xs tabular-nums text-app-muted">{characterCount}</span>
             </Link>
             <button
               type="button"
               disabled
               aria-label="动作模板"
               title="动作模板后端能力不在本期范围"
-              className="flex h-9 w-full cursor-not-allowed items-center justify-between rounded-xl px-2.5 text-left text-sm text-[#858c84]"
+              className="flex h-9 w-full cursor-not-allowed items-center justify-between rounded-xl px-2.5 text-left text-sm text-app-faint"
             >
               <span>动作模板</span>
               <span className="text-[0.62rem] font-medium">后端未提供</span>
@@ -117,8 +117,8 @@ export function ProjectDetailPage() {
           </div>
         </nav>
 
-        <div className="mt-2 border-t border-[#e3e6e0] p-3">
-          <p className="px-2 pb-1 text-[0.65rem] font-semibold uppercase tracking-[0.12em] text-[#858c84]">
+        <div className="mt-2 border-t border-app-line p-3">
+          <p className="px-2 pb-1 text-[0.65rem] font-semibold uppercase tracking-[0.12em] text-app-faint">
             项目规格
           </p>
           <dl className="space-y-0.5">
@@ -127,27 +127,27 @@ export function ProjectDetailPage() {
                 key={label}
                 className="flex min-w-0 items-center justify-between gap-2 px-2 py-1.5 text-[0.7rem]"
               >
-                <dt className="text-[#858c84]">{label}</dt>
-                <dd className="truncate font-medium text-[#454b44]">{value}</dd>
+                <dt className="text-app-faint">{label}</dt>
+                <dd className="truncate font-medium text-app-ink-soft">{value}</dd>
               </div>
             ))}
           </dl>
         </div>
 
         {session.state.status === 'authenticated' ? (
-          <div aria-label="当前账号" className="mt-auto border-t border-[#e3e6e0] p-3">
+          <div aria-label="当前账号" className="mt-auto border-t border-app-line p-3">
             <div className="min-w-0 px-2 py-1">
-              <p className="truncate text-xs font-semibold text-[#343a34]">
+              <p className="truncate text-xs font-semibold text-app-ink-soft">
                 {session.state.user.nickname || session.state.user.email}
               </p>
-              <p className="mt-0.5 truncate text-[0.68rem] text-[#7a8279]">
+              <p className="mt-0.5 truncate text-[0.68rem] text-app-faint">
                 {session.state.user.email}
               </p>
             </div>
             <button
               type="button"
               onClick={signOut}
-              className="mt-2 inline-flex min-h-11 w-full items-center justify-center rounded-xl border border-[#cfd5cc] px-3 text-xs font-semibold text-[#59635a] transition-colors hover:bg-[#edf1eb] hover:text-[#26372c] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#284331]"
+              className="mt-2 inline-flex min-h-11 w-full items-center justify-center rounded-xl border border-app-line px-3 text-xs font-semibold text-app-muted transition-colors hover:bg-app-accent-muted hover:text-app-accent focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-app-accent"
             >
               退出登录
             </button>
diff --git a/frontend/src/pages/projects/index.tsx b/frontend/src/pages/projects/index.tsx
index ff755670..d549893a 100644
--- a/frontend/src/pages/projects/index.tsx
+++ b/frontend/src/pages/projects/index.tsx
@@ -63,23 +63,23 @@ export function ProjectsPage() {
       <section aria-labelledby="projects-title">
         <header
           data-projects-intro
-          className="projects-intro flex flex-col gap-4 border-b border-[#d8dbd4] pb-6 sm:flex-row sm:items-end sm:justify-between"
+          className="projects-intro flex flex-col gap-4 border-b border-app-line pb-6 sm:flex-row sm:items-end sm:justify-between"
         >
           <div>
             <h1
               id="projects-title"
-              className="font-serif text-4xl font-medium tracking-[-0.045em] text-[#1f211e]"
+              className="font-serif text-4xl font-medium tracking-[-0.045em] text-app-ink"
             >
               项目中心
             </h1>
-            <p className="mt-2 max-w-2xl text-sm leading-6 text-[#696e67]">
+            <p className="mt-2 max-w-2xl text-sm leading-6 text-app-muted">
               项目隔离角色资产与生成规格；先选项目，再管理其资产。
             </p>
           </div>
           <Link
             to="/projects/new"
             aria-label="新建项目"
-            className="rounded-full border border-[#cbd1c8] px-5 py-2.5 text-sm font-semibold text-[#3a403a] transition hover:border-[#9da59b] hover:bg-white"
+            className="rounded-full border border-app-line px-5 py-2.5 text-sm font-semibold text-app-ink-soft transition hover:border-app-line-strong hover:bg-app-surface-raised"
           >
             ＋ 新建项目
           </Link>
@@ -88,16 +88,16 @@ export function ProjectsPage() {
         {error ? (
           <p
             role="alert"
-            className="mt-6 rounded-2xl border border-[#d8c7bd] bg-[#fff8f2] p-5 text-sm text-[#7a3f2a]"
+            className="mt-6 rounded-2xl border border-app-danger-line bg-app-danger-soft p-5 text-sm text-app-danger"
           >
             {error}
           </p>
         ) : projectsPage === null ? (
-          <p className="mt-6 text-sm text-[#70766f]">正在读取项目…</p>
+          <p className="mt-6 text-sm text-app-muted">正在读取项目…</p>
         ) : projectsPage.total === 0 ? (
-          <div className="mt-6 rounded-2xl border border-dashed border-[#c9cec6] p-7">
-            <h2 className="font-semibold text-[#252a25]">还没有项目</h2>
-            <p className="mt-2 text-sm text-[#6d736c]">
+          <div className="mt-6 rounded-2xl border border-dashed border-app-line p-7">
+            <h2 className="font-semibold text-app-ink">还没有项目</h2>
+            <p className="mt-2 text-sm text-app-muted">
               从右上角新建一个项目，之后它会显示在这里。
             </p>
           </div>
@@ -153,35 +153,35 @@ function ProjectCard({
     <article
       data-project-card
       style={{ '--project-card-order': motionOrder } as CSSProperties}
-      className="projects-card-enter relative min-h-64 rounded-[1.5rem] border border-[#d8dbd4] bg-[#f4f5f1] transition duration-300 ease-out hover:-translate-y-0.5 hover:border-[#9da59b] hover:bg-white"
+      className="projects-card-enter relative min-h-64 rounded-[1.5rem] border border-app-line bg-app-surface transition duration-300 ease-out hover:-translate-y-0.5 hover:border-app-line-strong hover:bg-app-surface-raised"
     >
       <Link
         to={`/projects/${project.id}/assets`}
         aria-label={`打开项目 ${project.name}`}
-        className="flex h-full min-h-64 flex-col p-6 pr-14 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#252825]"
+        className="flex h-full min-h-64 flex-col p-6 pr-14 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-ink"
       >
         <div className="mt-auto pt-10">
-          <h2 className="font-serif text-2xl font-medium tracking-[-0.035em] text-[#222520]">
+          <h2 className="font-serif text-2xl font-medium tracking-[-0.035em] text-app-ink">
             {project.name}
           </h2>
-          <p className="mt-2 text-xs text-[#747b73]">更新于 {updatedAt}</p>
-          <dl className="mt-4 grid grid-cols-2 gap-x-5 gap-y-3 border-t border-[#dfe1dc] pt-4 text-xs">
+          <p className="mt-2 text-xs text-app-faint">更新于 {updatedAt}</p>
+          <dl className="mt-4 grid grid-cols-2 gap-x-5 gap-y-3 border-t border-app-line pt-4 text-xs">
             <div>
-              <dt className="text-[#898e87]">视角 / 朝向</dt>
-              <dd className="mt-1 font-medium text-[#41473f]">
+              <dt className="text-app-faint">视角 / 朝向</dt>
+              <dd className="mt-1 font-medium text-app-ink-soft">
                 {CHARACTER_PERSPECTIVE[project.perspective]} ·{' '}
                 {DIRECTIONAL_MOVEMENT[project.directionalMovement]}
               </dd>
             </div>
             <div>
-              <dt className="text-[#898e87]">精灵尺寸</dt>
-              <dd className="mt-1 font-medium text-[#41473f]">
+              <dt className="text-app-faint">精灵尺寸</dt>
+              <dd className="mt-1 font-medium text-app-ink-soft">
                 {project.spriteSize.width} × {project.spriteSize.height}
               </dd>
             </div>
             <div className="col-span-2">
-              <dt className="text-[#898e87]">画风约束</dt>
-              <dd className="mt-1 truncate font-medium text-[#41473f]">
+              <dt className="text-app-faint">画风约束</dt>
+              <dd className="mt-1 truncate font-medium text-app-ink-soft">
                 {project.gameStyle ?? '尚未设定'}
               </dd>
             </div>
@@ -192,7 +192,7 @@ function ProjectCard({
         type="button"
         aria-label={`删除项目 ${project.name}`}
         onClick={onDelete}
-        className="absolute right-4 top-4 rounded-full px-2 py-1 text-sm text-[#7a8179] hover:bg-[#eceee9] hover:text-[#7a3f2a]"
+        className="absolute right-4 top-4 rounded-full px-2 py-1 text-sm text-app-faint hover:bg-app-surface hover:text-app-danger"
       >
         ⋯
       </button>
@@ -212,15 +212,15 @@ function DeleteProjectDialog({
   onConfirm: () => Promise<void>
 }) {
   return (
-    <div className="projects-dialog-backdrop fixed inset-0 z-50 grid place-items-center bg-[#1f241f]/20 p-4 backdrop-blur-sm">
+    <div className="projects-dialog-backdrop fixed inset-0 z-50 grid place-items-center bg-app-ink/20 p-4 backdrop-blur-sm">
       <section
         role="dialog"
         aria-modal="true"
         aria-label="删除项目"
-        className="projects-dialog-panel w-full max-w-md rounded-[1.5rem] border border-[#d9d5cf] bg-white p-6"
+        className="projects-dialog-panel w-full max-w-md rounded-[1.5rem] border border-app-line bg-app-surface-raised p-6"
       >
-        <h2 className="text-lg font-semibold text-[#292b27]">删除“{project.name}”？</h2>
-        <p className="mt-2 text-sm leading-6 text-[#6f716c]">
+        <h2 className="text-lg font-semibold text-app-ink">删除“{project.name}”？</h2>
+        <p className="mt-2 text-sm leading-6 text-app-muted">
           删除后无法恢复这条项目记录。请先确认项目下资产已经妥善处理。
         </p>
         <div className="mt-6 flex justify-end gap-2">
@@ -228,7 +228,7 @@ function DeleteProjectDialog({
             type="button"
             disabled={pending}
             onClick={onClose}
-            className="rounded-full border border-[#cfd4cc] px-4 py-2 text-sm disabled:opacity-50"
+            className="rounded-full border border-app-line px-4 py-2 text-sm disabled:opacity-50"
           >
             取消
           </button>
@@ -237,7 +237,7 @@ function DeleteProjectDialog({
             aria-label="确认删除项目"
             disabled={pending}
             onClick={() => void onConfirm()}
-            className="rounded-full bg-[#7a3f2a] px-4 py-2 text-sm font-semibold text-white disabled:opacity-50"
+            className="rounded-full bg-app-danger px-4 py-2 text-sm font-semibold text-app-on-accent disabled:opacity-50"
           >
             {pending ? '正在删除…' : '删除项目'}
           </button>
diff --git a/frontend/src/pages/quick-start/index.tsx b/frontend/src/pages/quick-start/index.tsx
index 37e4c317..1966a327 100644
--- a/frontend/src/pages/quick-start/index.tsx
+++ b/frontend/src/pages/quick-start/index.tsx
@@ -124,38 +124,38 @@ function QuickStartActionInput({
   }
 
   return (
-    <section className="min-h-[560px] border border-[#c9d0ca] bg-[#dfe3df] p-6 text-[#171817] sm:p-10">
+    <section className="min-h-[560px] border border-app-line bg-app-canvas p-6 text-app-ink sm:p-10">
       <Link
         to={playtestPath(target.characterId, target.outfitId)}
-        className="text-xs font-semibold text-[#59635b] hover:text-[#2f4e38]"
+        className="text-xs font-semibold text-app-muted hover:text-app-accent"
       >
         ← 返回当前预览台
       </Link>
       <div className="mx-auto mt-14 max-w-2xl">
-        <p className="font-mono text-[10px] font-bold text-[#687069]">ADD ACTION</p>
+        <p className="font-mono text-[10px] font-bold text-app-muted">ADD ACTION</p>
         <h1 className="mt-3 font-serif text-4xl">给当前角色增加动作</h1>
-        <p className="mt-3 text-sm text-[#687069]">
+        <p className="mt-3 text-sm text-app-muted">
           新动作会追加到角色 {target.characterId} 的当前造型，不会新建角色或覆盖已有动作。
         </p>
         <form onSubmit={submit} className="mt-8 space-y-4">
-          <label className="block text-xs font-semibold text-[#4f5b52]">
+          <label className="block text-xs font-semibold text-app-ink-soft">
             动作描述
             <textarea
               value={description}
               onChange={(event) => setDescription(event.target.value)}
               placeholder="例如：挥手打招呼、蹲下查看地面、举起画笔作画"
-              className="mt-2 min-h-32 w-full resize-y rounded-lg border border-[#aeb8b0] bg-white p-4 text-base outline-none focus:border-[#35583f]"
+              className="mt-2 min-h-32 w-full resize-y rounded-lg border border-app-line-strong bg-app-surface-raised p-4 text-base outline-none focus:border-app-accent"
             />
           </label>
           {error ? (
-            <p role="alert" className="text-sm text-[#983c32]">
+            <p role="alert" className="text-sm text-app-danger">
               {error}
             </p>
           ) : null}
           <button
             type="submit"
             disabled={!description.trim() || submitting || Boolean(service.unavailableReason)}
-            className="min-h-11 rounded-lg bg-[#35583f] px-5 text-sm font-semibold text-white disabled:opacity-50"
+            className="min-h-11 rounded-lg bg-app-accent px-5 text-sm font-semibold text-app-on-accent disabled:opacity-50"
           >
             {submitting ? '正在开始生成…' : '开始生成新动作'}
           </button>
@@ -231,13 +231,13 @@ function QuickStartInput({
   }
 
   return (
-    <section className="relative min-h-screen overflow-hidden border border-[#c9d0ca] bg-[#dfe3df] text-[#171817] shadow-[0_26px_80px_rgba(31,43,35,0.10)]">
+    <section className="relative min-h-screen overflow-hidden border border-app-line bg-app-canvas text-app-ink shadow-app-page">
       <AmbientGrid />
 
       <div className="relative z-10 grid min-h-screen grid-rows-[auto_1fr_auto] p-5 sm:p-8">
         <header className="flex items-start justify-between gap-6">
           <div>
-            <p className="font-mono text-[10px] font-bold tracking-[0.16em] text-[#687069]">
+            <p className="font-mono text-[10px] font-bold tracking-[0.16em] text-app-muted">
               QUICK START / CREATE CHARACTER
             </p>
             <h1 className="mt-3 max-w-3xl font-serif text-3xl leading-tight tracking-[-0.035em] sm:text-5xl">
@@ -246,7 +246,7 @@ function QuickStartInput({
               开始一条可追踪的制作流程。
             </h1>
           </div>
-          <span className="hidden rounded-full border border-[#bcc6be] bg-[#f3f5f1]/80 px-4 py-2 text-xs font-semibold text-[#35583f] sm:inline-flex">
+          <span className="hidden rounded-full border border-app-line-strong bg-app-surface/80 px-4 py-2 text-xs font-semibold text-app-accent sm:inline-flex">
             AI 快捷创作
           </span>
         </header>
@@ -255,16 +255,16 @@ function QuickStartInput({
           <button
             type="button"
             onClick={() => setPrompt(EXAMPLES[0].prompt)}
-            className="group flex min-h-24 w-full items-center gap-4 rounded-full border border-[#c4cbc5] bg-[#f7f8f4] px-7 text-left shadow-[0_18px_45px_rgba(31,43,35,0.09)] transition hover:-translate-y-0.5 hover:border-[#8fa092] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#35583f] motion-reduce:transform-none"
+            className="group flex min-h-24 w-full items-center gap-4 rounded-full border border-app-line bg-app-surface-raised px-7 text-left shadow-app-card transition hover:-translate-y-0.5 hover:border-app-line-strong focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-app-accent motion-reduce:transform-none"
           >
-            <span className="shrink-0 text-sm font-semibold text-[#747973]">你可能想做：</span>
-            <strong className="text-base font-semibold text-[#35583f] sm:text-xl">
+            <span className="shrink-0 text-sm font-semibold text-app-faint">你可能想做：</span>
+            <strong className="text-base font-semibold text-app-accent sm:text-xl">
               {EXAMPLES[0].prompt}
             </strong>
           </button>
 
           <div
-            className="mx-auto grid aspect-square w-44 grid-cols-7 gap-1 rounded-[1.4rem] border border-[#c4cbc5] bg-[#eef1ed] p-5 shadow-[0_18px_45px_rgba(31,43,35,0.08)]"
+            className="mx-auto grid aspect-square w-44 grid-cols-7 gap-1 rounded-[1.4rem] border border-app-line bg-app-surface p-5 shadow-app-card"
             aria-hidden="true"
           >
             {Array.from({ length: 49 }, (_, index) => {
@@ -277,7 +277,7 @@ function QuickStartInput({
               return (
                 <i
                   key={index}
-                  className={`rounded-[2px] ${active ? 'bg-[#35583f]' : 'bg-[#d9ded8]'}`}
+                  className={`rounded-[2px] ${active ? 'bg-app-accent' : 'bg-app-line'}`}
                 />
               )
             })}
@@ -291,7 +291,7 @@ function QuickStartInput({
                 key={example.label}
                 type="button"
                 onClick={() => setPrompt(example.prompt)}
-                className="rounded-full border border-[#c4cbc5] bg-[#f3f5f1] px-3 py-1.5 text-[11px] font-medium text-[#687069] hover:border-[#8fa092] hover:text-[#35583f]"
+                className="rounded-full border border-app-line bg-app-surface px-3 py-1.5 text-[11px] font-medium text-app-muted hover:border-app-line-strong hover:text-app-accent"
               >
                 {example.label}
               </button>
@@ -300,7 +300,7 @@ function QuickStartInput({
 
           <form
             onSubmit={(event) => void submit(event)}
-            className="grid gap-3 rounded-[1.4rem] border border-[#bdc7bf] bg-[#f7f8f4] p-4 shadow-[0_22px_60px_rgba(31,43,35,0.12)] sm:grid-cols-[1fr_auto]"
+            className="grid gap-3 rounded-[1.4rem] border border-app-line-strong bg-app-surface-raised p-4 shadow-app-panel sm:grid-cols-[1fr_auto]"
           >
             <label className="grid gap-2" htmlFor="quick-start-prompt">
               <span className="sr-only">创作指令</span>
@@ -315,10 +315,10 @@ function QuickStartInput({
                     ? '例如：挥手打招呼、提灯前行（可留空生成待机动作）'
                     : '描述你想生成的角色、身份特征和视觉风格…'
                 }
-                className="min-h-16 w-full resize-none border-0 bg-transparent px-2 py-1 text-[15px] leading-relaxed text-[#1d251f] outline-none placeholder:text-[#7a817b]"
+                className="min-h-16 w-full resize-none border-0 bg-transparent px-2 py-1 text-[15px] leading-relaxed text-app-ink outline-none placeholder:text-app-faint"
               />
-              <span className="flex flex-wrap items-center gap-2 px-2 text-[10px] text-[#747973]">
-                <b className="rounded-full border border-[#c9d0ca] bg-[#e7ebe5] px-2.5 py-1 font-medium text-[#515a53]">
+              <span className="flex flex-wrap items-center gap-2 px-2 text-[10px] text-app-faint">
+                <b className="rounded-full border border-app-line bg-app-surface-muted px-2.5 py-1 font-medium text-app-ink-soft">
                   文字创建
                 </b>
                 {templateFile
@@ -326,12 +326,12 @@ function QuickStartInput({
                   : '角色图生成后仍需人工选择候选'}
               </span>
               {templateFile ? (
-                <span className="flex flex-wrap items-center gap-2 px-2 text-[11px] text-[#515a53]">
+                <span className="flex flex-wrap items-center gap-2 px-2 text-[11px] text-app-ink-soft">
                   <b className="max-w-full truncate font-medium">{templateFile.name}</b>
                   <button
                     type="button"
                     onClick={removeTemplateFile}
-                    className="rounded-full border border-[#b9c3bb] px-2 py-0.5 text-[10px] hover:border-[#8fa092] hover:text-[#35583f]"
+                    className="rounded-full border border-app-line-strong px-2 py-0.5 text-[10px] hover:border-app-line-strong hover:text-app-accent"
                   >
                     移除图片
                   </button>
@@ -351,7 +351,7 @@ function QuickStartInput({
               <button
                 type="button"
                 onClick={() => fileInput.current?.click()}
-                className="min-h-9 rounded-xl border border-[#aeb8b0] bg-[#eef1ed] px-4 text-xs font-semibold text-[#515a53] transition hover:border-[#8fa092] hover:text-[#35583f]"
+                className="min-h-9 rounded-xl border border-app-line-strong bg-app-surface px-4 text-xs font-semibold text-app-ink-soft transition hover:border-app-line-strong hover:text-app-accent"
               >
                 {templateFile ? '更换图片' : '上传角色母版'}
               </button>
@@ -360,7 +360,7 @@ function QuickStartInput({
                 disabled={
                   (!prompt.trim() && !templateFile) || submitting || Boolean(unavailableReason)
                 }
-                className="min-h-14 rounded-[1rem] bg-[#35583f] px-5 text-sm font-bold text-[#f3f6f2] transition hover:bg-[#456c51] disabled:cursor-not-allowed disabled:opacity-45"
+                className="min-h-14 rounded-[1rem] bg-app-accent px-5 text-sm font-bold text-app-on-accent transition hover:bg-app-accent-hover disabled:cursor-not-allowed disabled:opacity-45"
               >
                 {submitting ? '正在创建…' : '开始生成'}
               </button>
@@ -368,14 +368,14 @@ function QuickStartInput({
           </form>
 
           {unavailableReason ? (
-            <p className="mt-3 rounded-xl border border-[#c7a967] bg-[#f4eddc] px-4 py-3 text-sm text-[#67552e]">
+            <p className="mt-3 rounded-xl border border-app-warning-line bg-app-warning-soft px-4 py-3 text-sm text-app-warning">
               {unavailableReason}
             </p>
           ) : null}
           {error ? (
             <p
               role="alert"
-              className="mt-3 rounded-xl bg-[#311b19] px-4 py-3 text-sm text-[#ffd3cc]"
+              className="mt-3 rounded-xl bg-app-danger px-4 py-3 text-sm text-app-danger-soft"
             >
               {error}
             </p>
@@ -512,24 +512,24 @@ function QuickStartRun({
 
   if (!run) {
     return (
-      <section className="min-h-[520px] rounded-[2rem] border border-[#c9d0ca] bg-[#e8ebe7] p-8 text-[#26302a]">
-        <p className="font-mono text-[10px] font-bold tracking-[0.16em] text-[#687069]">
+      <section className="min-h-[520px] rounded-[2rem] border border-app-line bg-app-canvas p-8 text-app-ink">
+        <p className="font-mono text-[10px] font-bold tracking-[0.16em] text-app-muted">
           QUICK START / RECOVERY
         </p>
         <h1 className="mt-4 font-serif text-4xl">
           {restoring ? '正在恢复这次创作' : '无法恢复这次创作'}
         </h1>
         {restoring ? (
-          <p className="mt-4 max-w-xl text-sm leading-7 text-[#687069]">正在读取工作流状态…</p>
+          <p className="mt-4 max-w-xl text-sm leading-7 text-app-muted">正在读取工作流状态…</p>
         ) : (
           <>
-            <p role="alert" className="mt-4 max-w-xl text-sm leading-7 text-[#687069]">
+            <p role="alert" className="mt-4 max-w-xl text-sm leading-7 text-app-muted">
               {error || `没有找到运行记录 ${runId}`}
             </p>
             <button
               type="button"
               onClick={() => navigate('/quick-start')}
-              className="mt-8 rounded-xl bg-[#35583f] px-5 py-3 text-sm font-semibold text-white"
+              className="mt-8 rounded-xl bg-app-accent px-5 py-3 text-sm font-semibold text-app-on-accent"
             >
               返回快速开始
             </button>
@@ -617,12 +617,12 @@ function QuickStartRun({
   }
 
   return (
-    <section className="relative min-h-screen overflow-hidden border border-[#c9d0ca] bg-[#e3e7e2] text-[#171817] shadow-[0_26px_80px_rgba(31,43,35,0.10)]">
+    <section className="relative min-h-screen overflow-hidden border border-app-line bg-app-canvas text-app-ink shadow-app-page">
       <AmbientGrid />
       <div className="relative z-10 grid min-h-screen grid-rows-[auto_1fr_auto] gap-6 p-5 sm:p-8">
         <header className="flex flex-wrap items-start justify-between gap-4">
           <div>
-            <p className="font-mono text-[10px] font-bold tracking-[0.16em] text-[#687069]">
+            <p className="font-mono text-[10px] font-bold tracking-[0.16em] text-app-muted">
               QUICK START / RUN {run.id}
             </p>
             <h1 className="mt-2 font-serif text-3xl tracking-[-0.03em] sm:text-4xl">
@@ -630,26 +630,26 @@ function QuickStartRun({
             </h1>
           </div>
           <div
-            className="flex items-center gap-3 rounded-xl border border-[#c4cbc5] bg-[#f7f8f4]/90 px-4 py-3"
+            className="flex items-center gap-3 rounded-xl border border-app-line bg-app-surface-raised/90 px-4 py-3"
             aria-live="polite"
           >
             <i
               className={`h-2.5 w-2.5 rounded-full ${
-                workflowIsActive(run) ? 'animate-pulse bg-[#4f7b5b]' : 'bg-[#8c938d]'
+                workflowIsActive(run) ? 'animate-pulse bg-app-accent' : 'bg-app-faint'
               } motion-reduce:animate-none`}
               aria-hidden="true"
             />
             <span>
-              <small className="block font-mono text-[8px] tracking-[0.12em] text-[#747973]">
+              <small className="block font-mono text-[8px] tracking-[0.12em] text-app-faint">
                 CURRENT STATUS
               </small>
-              <b className="text-sm text-[#35583f]">{status.title}</b>
+              <b className="text-sm text-app-accent">{status.title}</b>
             </span>
           </div>
         </header>
 
         <div className="grid min-h-0 gap-5 lg:grid-cols-[1.35fr_0.65fr]">
-          <section className="grid min-h-[340px] place-items-center overflow-hidden rounded-[1.4rem] border border-[#c4cbc5] bg-[#eef1ed]/90 p-5">
+          <section className="grid min-h-[340px] place-items-center overflow-hidden rounded-[1.4rem] border border-app-line bg-app-surface/90 p-5">
             {actionFrames.length > 0 ? (
               <div className="grid w-full grid-cols-4 gap-2 sm:grid-cols-8">
                 {actionFrames.map((frame, index) => (
@@ -657,34 +657,34 @@ function QuickStartRun({
                     key={`${frame.imageUrl}:${index}`}
                     src={frame.imageUrl}
                     alt={`动作第 ${index + 1} 帧`}
-                    className="aspect-square w-full border border-[#c7cec8] bg-[#e7ebe6] object-contain [image-rendering:pixelated]"
+                    className="aspect-square w-full border border-app-line bg-app-surface-muted object-contain [image-rendering:pixelated]"
                   />
                 ))}
               </div>
             ) : isActionActive ? (
               <div className="grid place-items-center gap-5 text-center">
-                <div className="relative grid h-44 w-44 place-items-center rounded-[1.4rem] border border-dashed border-[#aeb9b0] bg-[#e5e9e4]">
-                  <i className="h-12 w-12 animate-pulse rounded-full border border-[#819184] bg-[#d5ddd6] shadow-[0_0_0_16px_rgba(53,88,63,0.05)] motion-reduce:animate-none" />
+                <div className="relative grid h-44 w-44 place-items-center rounded-[1.4rem] border border-dashed border-app-line-strong bg-app-surface-muted">
+                  <i className="h-12 w-12 animate-pulse rounded-full border border-app-line-strong bg-app-accent-soft shadow-app-pulse motion-reduce:animate-none" />
                 </div>
                 <span>
-                  <b className="block text-base text-[#354039]">正在生成动作</b>
-                  <small className="mt-2 block max-w-md leading-6 text-[#687069]">
+                  <b className="block text-base text-app-ink-soft">正在生成动作</b>
+                  <small className="mt-2 block max-w-md leading-6 text-app-muted">
                     正在生成动作帧，请稍候…
                   </small>
                 </span>
               </div>
             ) : isActionFailed ? (
               <div className="grid place-items-center gap-5 text-center">
-                <b className="text-base text-[#8b332a]">动作生成失败</b>
-                <small className="max-w-md leading-6 text-[#687069]">
+                <b className="text-base text-app-danger">动作生成失败</b>
+                <small className="max-w-md leading-6 text-app-muted">
                   {typeof actionStep?.error === 'string' ? actionStep.error : '动作生成失败'}
                 </small>
               </div>
             ) : isFirstFrameSelecting && firstFrameCandidates.length ? (
               <div className="grid w-full gap-4">
                 <div className="mx-auto max-w-xl text-center">
-                  <h2 className="text-lg font-semibold text-[#354039]">选择动作首帧</h2>
-                  <p className="mt-2 text-sm leading-6 text-[#687069]">
+                  <h2 className="text-lg font-semibold text-app-ink-soft">选择动作首帧</h2>
+                  <p className="mt-2 text-sm leading-6 text-app-muted">
                     确认首帧后，系统会自动使用视频裁剪路线生成 32 帧完整动作。
                   </p>
                 </div>
@@ -696,8 +696,8 @@ function QuickStartRun({
                       onClick={() => setSelectedFirstFrame(frame.imageUrl)}
                       className={`overflow-hidden rounded-xl border-2 p-2 text-left transition ${
                         selectedFirstFrame === frame.imageUrl
-                          ? 'border-[#35583f] bg-[#d5e5d8]'
-                          : 'border-[#c7cec8] bg-[#e7ebe6] hover:border-[#8fa092]'
+                          ? 'border-app-accent bg-app-accent-soft'
+                          : 'border-app-line bg-app-surface-muted hover:border-app-line-strong'
                       }`}
                     >
                       <img
@@ -705,7 +705,7 @@ function QuickStartRun({
                         alt={`动作首帧候选 ${index + 1}`}
                         className="aspect-square w-full object-contain [image-rendering:pixelated]"
                       />
-                      <p className="mt-2 font-mono text-[9px] tracking-[0.1em] text-[#687069]">
+                      <p className="mt-2 font-mono text-[9px] tracking-[0.1em] text-app-muted">
                         FIRST FRAME {String(index + 1).padStart(2, '0')}
                       </p>
                     </button>
@@ -716,7 +716,7 @@ function QuickStartRun({
                     type="button"
                     onClick={() => void confirmFirstFrame()}
                     disabled={!selectedFirstFrame || confirmingFirstFrame}
-                    className="rounded-xl bg-[#35583f] px-6 py-3 text-sm font-bold text-white transition hover:bg-[#456c51] disabled:cursor-not-allowed disabled:opacity-50"
+                    className="rounded-xl bg-app-accent px-6 py-3 text-sm font-bold text-app-on-accent transition hover:bg-app-accent-hover disabled:cursor-not-allowed disabled:opacity-50"
                   >
                     {confirmingFirstFrame ? '正在确认…' : '确认首帧，生成完整动作'}
                   </button>
@@ -724,20 +724,20 @@ function QuickStartRun({
               </div>
             ) : isFirstFrameGenerating ? (
               <div className="grid place-items-center gap-5 text-center">
-                <div className="relative grid h-44 w-44 place-items-center rounded-[1.4rem] border border-dashed border-[#aeb9b0] bg-[#e5e9e4]">
-                  <i className="h-12 w-12 animate-pulse rounded-full border border-[#819184] bg-[#d5ddd6] shadow-[0_0_0_16px_rgba(53,88,63,0.05)] motion-reduce:animate-none" />
+                <div className="relative grid h-44 w-44 place-items-center rounded-[1.4rem] border border-dashed border-app-line-strong bg-app-surface-muted">
+                  <i className="h-12 w-12 animate-pulse rounded-full border border-app-line-strong bg-app-accent-soft shadow-app-pulse motion-reduce:animate-none" />
                 </div>
                 <span>
-                  <b className="block text-base text-[#354039]">正在生成动作首帧</b>
-                  <small className="mt-2 block max-w-md leading-6 text-[#687069]">
+                  <b className="block text-base text-app-ink-soft">正在生成动作首帧</b>
+                  <small className="mt-2 block max-w-md leading-6 text-app-muted">
                     首帧就绪后，需要确认一次，再自动生成 32 帧完整动作。
                   </small>
                 </span>
               </div>
             ) : isFirstFrameFailed ? (
               <div className="grid place-items-center gap-5 text-center">
-                <b className="text-base text-[#8b332a]">动作首帧生成失败</b>
-                <small className="max-w-md leading-6 text-[#687069]">
+                <b className="text-base text-app-danger">动作首帧生成失败</b>
+                <small className="max-w-md leading-6 text-app-muted">
                   {typeof firstFrameStep?.error === 'string'
                     ? firstFrameStep.error
                     : '动作首帧生成失败'}
@@ -753,8 +753,8 @@ function QuickStartRun({
                       onClick={() => setSelectedCandidate(candidateUrl)}
                       className={`overflow-hidden rounded-xl border-2 p-2 text-left transition ${
                         selectedCandidate === candidateUrl
-                          ? 'border-[#35583f] bg-[#d5e5d8]'
-                          : 'border-[#c7cec8] bg-[#e7ebe6] hover:border-[#8fa092]'
+                          ? 'border-app-accent bg-app-accent-soft'
+                          : 'border-app-line bg-app-surface-muted hover:border-app-line-strong'
                       }`}
                     >
                       <img
@@ -762,7 +762,7 @@ function QuickStartRun({
                         alt={`角色图候选 ${index + 1}`}
                         className="aspect-square w-full object-contain [image-rendering:pixelated]"
                       />
-                      <p className="mt-2 font-mono text-[9px] tracking-[0.1em] text-[#687069]">
+                      <p className="mt-2 font-mono text-[9px] tracking-[0.1em] text-app-muted">
                         CANDIDATE {String(index + 1).padStart(2, '0')}
                       </p>
                     </button>
@@ -770,7 +770,7 @@ function QuickStartRun({
                 </div>
                 <div className="mx-auto flex w-full max-w-xl flex-col gap-3">
                   <label className="grid gap-1.5" htmlFor="quick-start-action-description">
-                    <span className="text-[11px] font-semibold text-[#515a53]">
+                    <span className="text-[11px] font-semibold text-app-ink-soft">
                       动作描述（可选，留空生成待机动作）
                     </span>
                     <input
@@ -778,14 +778,14 @@ function QuickStartRun({
                       value={actionDescription}
                       onChange={(event) => setActionDescription(event.target.value)}
                       placeholder="例如：在画板上画画、挥舞灯笼、扫地…"
-                      className="rounded-xl border border-[#c7cec8] bg-white px-4 py-2.5 text-sm text-[#1d251f] outline-none placeholder:text-[#7a817b] focus:border-[#8fa092]"
+                      className="rounded-xl border border-app-line bg-app-surface-raised px-4 py-2.5 text-sm text-app-ink outline-none placeholder:text-app-faint focus:border-app-line-strong"
                     />
                   </label>
                   <div className="flex justify-center gap-3">
                     <button
                       type="button"
                       onClick={() => void regenerate()}
-                      className="rounded-xl border border-[#aeb8b0] px-5 py-3 text-sm font-semibold text-[#515a53] transition hover:border-[#8fa092]"
+                      className="rounded-xl border border-app-line-strong px-5 py-3 text-sm font-semibold text-app-ink-soft transition hover:border-app-line-strong"
                     >
                       重新生成
                     </button>
@@ -794,7 +794,7 @@ function QuickStartRun({
                         type="button"
                         onClick={() => void confirmSelection()}
                         disabled={confirmingCandidate}
-                        className="rounded-xl bg-[#35583f] px-6 py-3 text-sm font-bold text-white transition hover:bg-[#456c51]"
+                        className="rounded-xl bg-app-accent px-6 py-3 text-sm font-bold text-app-on-accent transition hover:bg-app-accent-hover"
                       >
                         {confirmingCandidate ? '正在提交…' : '确认选择，继续下一步'}
                       </button>
@@ -804,12 +804,12 @@ function QuickStartRun({
               </div>
             ) : (
               <div className="grid place-items-center gap-5 text-center">
-                <div className="relative grid h-44 w-44 place-items-center rounded-[1.4rem] border border-dashed border-[#aeb9b0] bg-[#e5e9e4]">
-                  <i className="h-12 w-12 animate-pulse rounded-full border border-[#819184] bg-[#d5ddd6] shadow-[0_0_0_16px_rgba(53,88,63,0.05)] motion-reduce:animate-none" />
+                <div className="relative grid h-44 w-44 place-items-center rounded-[1.4rem] border border-dashed border-app-line-strong bg-app-surface-muted">
+                  <i className="h-12 w-12 animate-pulse rounded-full border border-app-line-strong bg-app-accent-soft shadow-app-pulse motion-reduce:animate-none" />
                 </div>
                 <span>
-                  <b className="block text-base text-[#354039]">{status.title}</b>
-                  <small className="mt-2 block max-w-md leading-6 text-[#687069]">
+                  <b className="block text-base text-app-ink-soft">{status.title}</b>
+                  <small className="mt-2 block max-w-md leading-6 text-app-muted">
                     {status.description}
                   </small>
                 </span>
@@ -817,12 +817,12 @@ function QuickStartRun({
             )}
           </section>
 
-          <aside className="rounded-[1.4rem] border border-[#c4cbc5] bg-[#f7f8f4]/95 p-5">
-            <p className="font-mono text-[9px] font-bold tracking-[0.13em] text-[#747973]">
+          <aside className="rounded-[1.4rem] border border-app-line bg-app-surface-raised/95 p-5">
+            <p className="font-mono text-[9px] font-bold tracking-[0.13em] text-app-faint">
               WORKFLOW RUN
             </p>
             <h2 className="mt-2 text-lg font-semibold">制作进度</h2>
-            <p className="mt-2 text-xs leading-6 text-[#687069]">
+            <p className="mt-2 text-xs leading-6 text-app-muted">
               Quick Start 隐藏节点操作，但每一步仍写入同一条 WorkflowRun。
             </p>
 
@@ -832,45 +832,45 @@ function QuickStartRun({
                   key={node.id}
                   className={`grid grid-cols-[28px_1fr_auto] items-center gap-3 rounded-lg border px-3 py-2 ${
                     node.status === 'active'
-                      ? 'border-[#91a394] bg-[#e4ebe2]'
-                      : 'border-[#d5dad5] bg-[#f0f2ef]'
+                      ? 'border-app-line-strong bg-app-accent-muted'
+                      : 'border-app-line bg-app-surface'
                   }`}
                 >
                   <i
                     className={`grid h-7 w-7 place-items-center rounded-full text-[9px] not-italic ${
                       node.status === 'passed'
-                        ? 'bg-[#35583f] text-white'
+                        ? 'bg-app-accent text-app-on-accent'
                         : node.status === 'active'
-                          ? 'border border-[#6f8874] text-[#35583f]'
-                          : 'border border-[#d0d6d1] text-[#8b918c]'
+                          ? 'border border-app-accent text-app-accent'
+                          : 'border border-app-line text-app-faint'
                     }`}
                   >
                     {node.status === 'passed' ? '✓' : String(index + 1).padStart(2, '0')}
                   </i>
-                  <span className="text-xs font-semibold text-[#515a53]">
+                  <span className="text-xs font-semibold text-app-ink-soft">
                     {STEP_LABELS[node.type]}
                   </span>
-                  <small className="text-[9px] text-[#7a817b]">{nodeStatusLabel(node)}</small>
+                  <small className="text-[9px] text-app-faint">{nodeStatusLabel(node)}</small>
                 </li>
               ))}
             </ol>
           </aside>
         </div>
 
-        <footer className="rounded-[1.3rem] border border-[#c4cbc5] bg-[#f7f8f4]/95 p-4 shadow-[0_18px_50px_rgba(31,43,35,0.10)]">
+        <footer className="rounded-[1.3rem] border border-app-line bg-app-surface-raised/95 p-4 shadow-app-card">
           <div className="flex flex-wrap items-center justify-between gap-4">
             <span>
-              <small className="font-mono text-[8px] tracking-[0.12em] text-[#747973]">
+              <small className="font-mono text-[8px] tracking-[0.12em] text-app-faint">
                 {passedCount} / {revision.nodes.length} STEPS PASSED
               </small>
-              <b className="mt-1 block text-sm text-[#354039]">{status.title}</b>
+              <b className="mt-1 block text-sm text-app-ink-soft">{status.title}</b>
             </span>
             <div className="flex flex-wrap gap-2">
               {workflowIsActive(run) ? (
                 <button
                   type="button"
                   onClick={() => void interrupt()}
-                  className="rounded-xl border border-[#aeb8b0] px-4 py-2 text-xs font-semibold text-[#515a53]"
+                  className="rounded-xl border border-app-line-strong px-4 py-2 text-xs font-semibold text-app-ink-soft"
                 >
                   中断自动制作
                 </button>
@@ -880,7 +880,7 @@ function QuickStartRun({
                   type="button"
                   onClick={() => void publishToPlaytest()}
                   disabled={publishing}
-                  className="rounded-lg bg-[#2a5284] px-4 py-2 text-xs font-bold text-white transition hover:bg-[#3668a0] disabled:cursor-wait disabled:opacity-60"
+                  className="rounded-lg bg-app-info px-4 py-2 text-xs font-bold text-app-on-accent transition hover:bg-app-info-hover disabled:cursor-wait disabled:opacity-60"
                 >
                   {publishing ? '正在自动导入…' : '重新导入预览台'}
                 </button>
@@ -889,7 +889,7 @@ function QuickStartRun({
                 <button
                   type="button"
                   onClick={() => navigate('/quick-start')}
-                  className="rounded-xl bg-[#35583f] px-4 py-2 text-xs font-semibold text-white"
+                  className="rounded-xl bg-app-accent px-4 py-2 text-xs font-semibold text-app-on-accent"
                 >
                   新建一次创作
                 </button>
@@ -897,12 +897,12 @@ function QuickStartRun({
             </div>
           </div>
           {error ? (
-            <p role="alert" className="mt-3 text-sm text-[#8b332a]">
+            <p role="alert" className="mt-3 text-sm text-app-danger">
               {error}
             </p>
           ) : null}
           {status.error ? (
-            <p role="alert" className="mt-3 text-sm text-[#8b332a]">
+            <p role="alert" className="mt-3 text-sm text-app-danger">
               {status.error}
             </p>
           ) : null}
@@ -919,7 +919,7 @@ function AmbientGrid() {
       aria-hidden="true"
       style={{
         backgroundImage:
-          'linear-gradient(rgba(53, 88, 63, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(53, 88, 63, 0.045) 1px, transparent 1px)',
+          'linear-gradient(color-mix(in srgb, var(--color-app-accent) 4.5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--color-app-accent) 4.5%, transparent) 1px, transparent 1px)',
         backgroundSize: '32px 32px',
         maskImage: 'linear-gradient(to bottom, black, transparent 84%)',
       }}
diff --git a/frontend/src/pages/workflow-editor/index.tsx b/frontend/src/pages/workflow-editor/index.tsx
index cb9bf07c..869ac6d7 100644
--- a/frontend/src/pages/workflow-editor/index.tsx
+++ b/frontend/src/pages/workflow-editor/index.tsx
@@ -82,44 +82,44 @@ const SHARED_BRANCH = 'shared'
 const CARD_STACK = 'grid gap-[17px] nodrag nopan nowheel'
 
 const CARD_BUTTON =
-  'min-h-[42px] rounded-lg border border-[#34533d] bg-[#34533d] px-3 py-[9px] text-[11px] ' +
-  'font-[750] text-[#edf4ee] enabled:hover:border-[#263f2e] enabled:hover:bg-[#263f2e] ' +
-  'aria-pressed:border-[#263f2e] aria-pressed:bg-[#263f2e] disabled:cursor-not-allowed ' +
-  'disabled:border-[#e2e5e1] disabled:bg-[#e2e5e1] disabled:text-[#969d97]'
+  'min-h-[42px] rounded-lg border border-app-accent bg-app-accent px-3 py-[9px] text-[11px] ' +
+  'font-[750] text-app-on-accent enabled:hover:border-app-accent-hover enabled:hover:bg-app-accent-hover ' +
+  'aria-pressed:border-app-accent-hover aria-pressed:bg-app-accent-hover disabled:cursor-not-allowed ' +
+  'disabled:border-app-line disabled:bg-app-surface-muted disabled:text-app-faint'
 
 /** 缩略图按钮：沿用卡片按钮的尺寸约定，但换成浅底，让图片自己当主角。 */
 const THUMB_BUTTON =
-  'min-h-[42px] rounded-lg border border-[var(--editor-line)] bg-[#fbfcfb] p-1 ' +
-  'aria-pressed:border-[var(--editor-ink)] aria-pressed:bg-white ' +
-  'aria-pressed:shadow-[0_0_0_2px_rgb(31_35_41_/_12%)] disabled:cursor-not-allowed'
+  'min-h-[42px] rounded-lg border border-[var(--color-app-line)] bg-app-surface-raised p-1 ' +
+  'aria-pressed:border-[var(--color-app-ink)] aria-pressed:bg-app-surface-raised ' +
+  'aria-pressed:shadow-app-pulse disabled:cursor-not-allowed'
 
 const THUMB_IMAGE = 'block aspect-square w-full rounded-lg object-cover'
 
 /** 已确认的母版/首帧：像素资产按原样放大，不做平滑。 */
 const MASTER_IMAGE =
-  'block aspect-square w-full rounded-xl border border-[var(--editor-line)] bg-[#f6f7f6] ' +
+  'block aspect-square w-full rounded-xl border border-[var(--color-app-line)] bg-app-surface ' +
   'object-cover [image-rendering:pixelated]'
 
 const CARD_SUMMARY =
-  'm-0 rounded-[10px] border border-[var(--editor-line)] bg-[#f6f7f6] px-3 py-2.5 ' +
-  'text-[11px] leading-[1.6] text-[var(--editor-muted)]'
+  'm-0 rounded-[10px] border border-[var(--color-app-line)] bg-app-surface px-3 py-2.5 ' +
+  'text-[11px] leading-[1.6] text-[var(--color-app-muted)]'
 
-const CARD_TEXT = 'm-0 text-[11px] leading-[1.6] text-[var(--editor-muted)]'
+const CARD_TEXT = 'm-0 text-[11px] leading-[1.6] text-[var(--color-app-muted)]'
 
 /** 加号菜单里的条目：撑满菜单宽度的两行文字，跟卡片主按钮完全不同。 */
 const MENU_ITEM =
   'flex min-h-0 cursor-pointer flex-col gap-0.5 border-0 px-3 py-[9px] text-left ' +
-  'text-[var(--editor-ink)] not-first:border-t not-first:border-t-[rgb(31_35_41_/_6%)] ' +
-  'enabled:hover:bg-[#f2f4f2] disabled:cursor-not-allowed disabled:opacity-45'
+  'text-[var(--color-app-ink)] not-first:border-t not-first:border-t-app-line ' +
+  'enabled:hover:bg-app-accent-muted disabled:cursor-not-allowed disabled:opacity-45'
 
 /**
  * 菜单里的头一条：返回上一级，或 root 层的主入口。比其余条目弱一档，
  * 原样式靠 :first-child 选择器实现，这里改成显式挂类，位置换了也不会失灵。
  */
-const MENU_ITEM_LEAD = 'font-medium text-[var(--editor-muted)]'
+const MENU_ITEM_LEAD = 'font-medium text-[var(--color-app-muted)]'
 
 const MENU_ITEM_TITLE = 'text-xs font-semibold'
-const MENU_ITEM_HINT = 'text-[10px] text-[var(--editor-muted)]'
+const MENU_ITEM_HINT = 'text-[10px] text-[var(--color-app-muted)]'
 
 const nodeTypes = { 'workflow-card': WorkflowCard }
 
@@ -348,29 +348,29 @@ export function WorkflowEditorPage({ loadSession }: WorkflowEditorPageProps = {}
   const visibleError = error ?? resumeError ?? generationReadError
 
   return (
-    <div className="workflow-editor-shell fixed inset-0 z-30 overflow-hidden bg-[var(--editor-paper)] text-[var(--editor-ink)]">
+    <div className="workflow-editor-shell fixed inset-0 z-30 overflow-hidden bg-[var(--color-app-canvas)] text-[var(--color-app-ink)]">
       <aside
-        className="pointer-events-none absolute bottom-[18px] left-[18px] z-15 grid min-w-[250px] max-w-[min(380px,calc(100vw-112px))] gap-1 rounded-[10px] border border-[rgb(36_49_39_/_12%)] bg-[rgb(249_250_247_/_90%)] px-[15px] py-3 shadow-[0_8px_24px_rgb(31_40_33_/_9%)] backdrop-blur-[14px]"
+        className="pointer-events-none absolute bottom-[18px] left-[18px] z-15 grid min-w-[250px] max-w-[min(380px,calc(100vw-112px))] gap-1 rounded-[10px] border border-app-line bg-app-surface-raised/90 px-[15px] py-3 shadow-app-menu backdrop-blur-[14px]"
         aria-label="当前项目"
       >
         <div>
-          <p className="m-0 mb-[5px] text-[8px] font-extrabold tracking-[0.12em] text-[#7b827b]">
+          <p className="m-0 mb-[5px] text-[8px] font-extrabold tracking-[0.12em] text-app-faint">
             PROJECT
           </p>
-          <h1 className="m-0 text-sm font-bold text-[#29342c]">{session.project.name}</h1>
+          <h1 className="m-0 text-sm font-bold text-app-ink-soft">{session.project.name}</h1>
         </div>
-        <p className="m-0 overflow-hidden text-ellipsis whitespace-nowrap text-[9px] leading-[1.5] text-[#777f78]">
+        <p className="m-0 overflow-hidden text-ellipsis whitespace-nowrap text-[9px] leading-[1.5] text-app-faint">
           {constraints.join(' · ')}
         </p>
         <div className="mt-1 flex justify-end">
-          <small className="font-mono text-[8px] font-bold text-[var(--editor-muted)]">
+          <small className="font-mono text-[8px] font-bold text-[var(--color-app-muted)]">
             Run {run.id} · v{run.version}
           </small>
         </div>
       </aside>
       {visibleError ? (
         <div
-          className="absolute left-1/2 top-[150px] z-10 flex -translate-x-1/2 items-center gap-3 border border-[#b66e62] bg-[#f7e9e5] px-[14px] py-2.5 text-xs text-[#7b3027]"
+          className="absolute left-1/2 top-[150px] z-10 flex -translate-x-1/2 items-center gap-3 border border-app-danger-line bg-app-danger-soft px-[14px] py-2.5 text-xs text-app-danger"
           role="alert"
         >
           <span>{visibleError}</span>
@@ -572,28 +572,28 @@ function CharacterSetupContent({
   return (
     <div className={CARD_STACK}>
       <label className="grid gap-[7px]">
-        <span className="text-[9px] font-[750] text-[#626b64]">角色描述</span>
+        <span className="text-[9px] font-[750] text-app-muted">角色描述</span>
         <textarea
           aria-label="角色描述"
           rows={4}
-          className="min-h-[84px] w-full resize-y rounded-lg border border-[var(--editor-line)] bg-[#fbfcfb] px-3 py-2.5 font-[inherit] text-[11px] leading-[1.55] text-[var(--editor-ink)] focus:border-[#69866f] focus:outline focus:outline-2 focus:outline-offset-1 focus:outline-[rgb(105_134_111_/_18%)]"
+          className="min-h-[84px] w-full resize-y rounded-lg border border-[var(--color-app-line)] bg-app-surface-raised px-3 py-2.5 font-[inherit] text-[11px] leading-[1.55] text-[var(--color-app-ink)] focus:border-app-accent focus:outline focus:outline-2 focus:outline-offset-1 focus:outline-app-accent-soft"
           value={prompt}
           disabled={branchBusy || uploadingReference}
           onChange={(event) => setPrompt(event.target.value)}
         />
         {node.input.referenceMedia.length > 0 ? (
-          <small className="text-[9px] font-[750] text-[#626b64]">
+          <small className="text-[9px] font-[750] text-app-muted">
             已关联 {node.input.referenceMedia.length} 个参考媒体
           </small>
         ) : null}
       </label>
       <div className="grid gap-[7px]">
-        <span className="text-[9px] font-[750] text-[#626b64]">角色参考图（选填）</span>
+        <span className="text-[9px] font-[750] text-app-muted">角色参考图（选填）</span>
         <input
           type="file"
           accept="image/*"
           aria-label="角色参考图"
-          className="block w-full rounded-lg border border-[var(--editor-line)] bg-[#f6f7f6] text-[10px] text-[var(--editor-muted)] file:mr-3 file:border-0 file:border-r file:border-[var(--editor-line)] file:bg-transparent file:px-3 file:py-2 file:text-[10px] file:font-[700] file:text-[var(--editor-ink)]"
+          className="block w-full rounded-lg border border-[var(--color-app-line)] bg-app-surface text-[10px] text-[var(--color-app-muted)] file:mr-3 file:border-0 file:border-r file:border-[var(--color-app-line)] file:bg-transparent file:px-3 file:py-2 file:text-[10px] file:font-[700] file:text-[var(--color-app-ink)]"
           disabled={branchBusy || uploadingReference}
           onChange={(event) => {
             const file = event.currentTarget.files?.[0]
@@ -602,14 +602,14 @@ function CharacterSetupContent({
           }}
         />
         {uploadingReference ? (
-          <small role="status" className="text-[9px] font-[750] text-[#626b64]">
+          <small role="status" className="text-[9px] font-[750] text-app-muted">
             正在上传参考图…
           </small>
         ) : null}
         {uploadError ? (
           <p
             role="alert"
-            className="m-0 rounded-lg border border-[#c98e82] bg-[#f7e9e5] px-2.5 py-2 text-[9px] leading-[1.5] text-[#7b3027]"
+            className="m-0 rounded-lg border border-app-danger-line bg-app-danger-soft px-2.5 py-2 text-[9px] leading-[1.5] text-app-danger"
           >
             {uploadError}
           </p>
@@ -715,10 +715,10 @@ function CharacterTemplateContent({
     return (
       <div className={CARD_STACK}>
         <img className={MASTER_IMAGE} src={node.selectedImageUrl} alt="已确认身份母版" />
-        <span className="text-center text-[11px] text-[var(--editor-muted)]">身份已锁定</span>
+        <span className="text-center text-[11px] text-[var(--color-app-muted)]">身份已锁定</span>
         <button
           type="button"
-          className="absolute -bottom-4 -right-4 z-8 grid h-8 min-h-8 w-8 place-items-center rounded-full border border-[var(--editor-ink)] bg-white p-0 text-[15px] leading-none text-[var(--editor-ink)] shadow-[var(--editor-shadow)] hover:bg-[var(--editor-ink)] hover:text-white"
+          className="absolute -bottom-4 -right-4 z-8 grid h-8 min-h-8 w-8 place-items-center rounded-full border border-[var(--color-app-ink)] bg-app-surface-raised p-0 text-[15px] leading-none text-[var(--color-app-ink)] shadow-[var(--shadow-app-panel)] hover:bg-[var(--color-app-ink)] hover:text-app-on-accent"
           aria-label="添加动作分支"
           onClick={() => {
             input.setActionMenuLevel('root')
@@ -729,7 +729,7 @@ function CharacterTemplateContent({
           ＋
         </button>
         {input.actionMenuOpen ? (
-          <div className="absolute left-[calc(100%+24px)] top-[calc(100%-16px)] z-7 flex min-w-[190px] flex-col overflow-hidden rounded-xl border border-[var(--editor-line)] bg-white shadow-[var(--editor-shadow)]">
+          <div className="absolute left-[calc(100%+24px)] top-[calc(100%-16px)] z-7 flex min-w-[190px] flex-col overflow-hidden rounded-xl border border-[var(--color-app-line)] bg-app-surface-raised shadow-[var(--shadow-app-panel)]">
             <ActionMenu input={input} templateNodeId={node.id} />
           </div>
         ) : null}
@@ -1007,7 +1007,7 @@ function AnimationContent({
         {frames.map((frame, index) => (
           <img
             key={`${frame.url}-${index}`}
-            className="block aspect-square w-full rounded border border-[var(--editor-line)] object-cover"
+            className="block aspect-square w-full rounded border border-[var(--color-app-line)] object-cover"
             src={frame.url}
             alt={`动画帧 ${index + 1}`}
           />
@@ -1049,19 +1049,19 @@ function WorkflowCard({ data }: NodeProps<WorkflowCardNode>) {
   return (
     <article
       className={[
-        'w-[368px] overflow-visible rounded-xl border border-[var(--editor-line)] bg-[rgba(249,250,247,0.98)] shadow-[var(--editor-shadow)]',
+        'w-[368px] overflow-visible rounded-xl border border-[var(--color-app-line)] bg-app-surface-raised/98 shadow-[var(--shadow-app-panel)]',
         data.status === 'failed' ? 'border-dashed' : 'border-solid',
         data.status === 'locked' ? 'opacity-45' : '',
       ].join(' ')}
     >
       <Handle type="target" position={Position.Left} isConnectable={false} />
-      <header className="workflow-card__handle grid min-h-[62px] cursor-grab select-none content-center gap-0.5 rounded-t-[11px] bg-[#26352b] px-[18px] py-3 text-[#f2f5f1] active:cursor-grabbing">
-        <span className="text-[8px] font-extrabold tracking-[0.12em] text-[#aebcb1]">
+      <header className="workflow-card__handle grid min-h-[62px] cursor-grab select-none content-center gap-0.5 rounded-t-[11px] bg-app-accent px-[18px] py-3 text-app-on-accent active:cursor-grabbing">
+        <span className="text-[8px] font-extrabold tracking-[0.12em] text-app-line">
           {data.eyebrow}
         </span>
         <strong className="text-sm font-bold">{data.title}</strong>
       </header>
-      <div className="rounded-b-[11px] bg-[rgba(249,250,247,0.98)] p-[21px]">{data.content}</div>
+      <div className="rounded-b-[11px] bg-app-surface-raised/98 p-[21px]">{data.content}</div>
       <Handle type="source" position={Position.Right} isConnectable={false} />
     </article>
   )
@@ -1099,12 +1099,12 @@ function StatusText({ node, input }: { node: WorkflowNode; input: ProjectionInpu
 
 function EditorBoundary({ message }: { message: string }) {
   return (
-    <div className="grid min-h-screen place-content-center gap-2 bg-[#dfe3df] text-center">
-      <p className="m-0 text-[10px] font-extrabold tracking-[0.16em] text-[#737378]">
+    <div className="grid min-h-screen place-content-center gap-2 bg-app-canvas text-center">
+      <p className="m-0 text-[10px] font-extrabold tracking-[0.16em] text-app-muted">
         MANUAL WORKFLOW
       </p>
       <h1 className="m-0 text-3xl font-semibold">工作流编辑器</h1>
-      <span className="m-0 text-[13px] text-[#737378]">{message}</span>
+      <span className="m-0 text-[13px] text-app-muted">{message}</span>
     </div>
   )
 }
diff --git a/frontend/src/pages/workflow-editor/workflow-editor.css b/frontend/src/pages/workflow-editor/workflow-editor.css
index c20b069f..faa19415 100644
--- a/frontend/src/pages/workflow-editor/workflow-editor.css
+++ b/frontend/src/pages/workflow-editor/workflow-editor.css
@@ -5,18 +5,14 @@
   3. 关键帧动画。
 */
 
-.workflow-editor-shell {
-  --editor-ink: #1d1d1f;
-  --editor-muted: #737378;
-  --editor-paper: #dfe3df;
-  --editor-line: rgb(27 38 30 / 20%);
-  --editor-shadow: 0 14px 36px rgb(30 39 32 / 13%), 0 2px 5px rgb(30 39 32 / 8%);
-}
-
 /* 画布底纹：radial-gradient 平铺，工具类写不出来。 */
 .workflow-editor-canvas {
-  background-color: var(--editor-paper);
-  background-image: radial-gradient(circle, rgb(46 62 50 / 18%) 1px, transparent 1.25px);
+  background-color: var(--color-app-canvas);
+  background-image: radial-gradient(
+    circle,
+    color-mix(in srgb, var(--color-app-accent) 18%, transparent) 1px,
+    transparent 1.25px
+  );
   background-size: 21px 21px;
 }
 
@@ -24,26 +20,26 @@
 
 .workflow-editor-canvas .react-flow__controls {
   overflow: hidden;
-  border: 1px solid rgb(36 49 39 / 12%);
+  border: 1px solid color-mix(in srgb, var(--color-app-ink) 12%, transparent);
   border-radius: 10px;
-  background: rgb(249 250 247 / 90%);
-  box-shadow: 0 8px 24px rgb(31 40 33 / 9%);
+  background: color-mix(in srgb, var(--color-app-surface-raised) 90%, transparent);
+  box-shadow: var(--shadow-app-menu);
   backdrop-filter: blur(14px);
 }
 
 .workflow-editor-canvas .react-flow__controls-button {
-  border-color: var(--editor-line);
-  color: var(--editor-ink);
-  background: rgb(255 255 255 / 76%);
+  border-color: var(--color-app-line);
+  color: var(--color-app-ink);
+  background: color-mix(in srgb, var(--color-app-surface-raised) 76%, transparent);
 }
 
 .workflow-editor-canvas .react-flow__handle {
   top: 38px;
   width: 22px;
   height: 22px;
-  border: 4px solid #f5f7f4;
-  background: #68836e;
-  box-shadow: 0 0 0 1px #435849;
+  border: 4px solid var(--color-app-surface);
+  background: var(--color-app-line-strong);
+  box-shadow: 0 0 0 1px var(--color-app-accent);
 }
 
 /*
@@ -51,12 +47,12 @@
   颜色写在这里而不是节点数据里，改配色只动这一处。
 */
 .workflow-editor-canvas .workflow-edge--confirmed path {
-  stroke: #69866f;
+  stroke: var(--color-app-line-strong);
   stroke-width: 3;
 }
 
 .workflow-editor-canvas .workflow-edge--flowing path {
-  stroke: rgb(72 101 80 / 42%);
+  stroke: color-mix(in srgb, var(--color-app-accent) 42%, transparent);
   stroke-width: 3;
   stroke-dasharray: 9 8;
   animation: workflow-edge-flow 900ms linear infinite;
diff --git a/frontend/src/pages/workspace/index.tsx b/frontend/src/pages/workspace/index.tsx
index 574336b0..34739586 100644
--- a/frontend/src/pages/workspace/index.tsx
+++ b/frontend/src/pages/workspace/index.tsx
@@ -349,7 +349,7 @@ export function WorkspacePage() {
     <div className="workspace-page h-svh overflow-hidden">
       <div className="workspace-shell mx-auto flex h-full w-full max-w-[1560px] flex-col px-4 sm:px-6 xl:px-8">
         <header className="mb-3 shrink-0 sm:mb-4">
-          <h1 className="font-serif text-[clamp(2.15rem,4.5vw,4rem)] leading-none font-medium tracking-[-0.055em] text-[#1d251f]">
+          <h1 className="font-serif text-[clamp(2.15rem,4.5vw,4rem)] leading-none font-medium tracking-[-0.055em] text-app-ink">
             工作台
           </h1>
         </header>
@@ -395,13 +395,13 @@ export function WorkspacePage() {
               <div>
                 <h2
                   id="workspace-context-title"
-                  className="font-sans text-[clamp(1.2rem,2.2vw,1.65rem)] leading-none font-semibold tracking-[-0.025em] text-[#202822]"
+                  className="font-sans text-[clamp(1.2rem,2.2vw,1.65rem)] leading-none font-semibold tracking-[-0.025em] text-app-ink"
                 >
                   {title}
                 </h2>
               </div>
               {mode === 'projects' ? null : (
-                <p className="mt-2 max-w-md text-xs leading-5 text-[#6f776f]">
+                <p className="mt-2 max-w-md text-xs leading-5 text-app-muted">
                   {contextDescription(mode)}
                 </p>
               )}
@@ -440,7 +440,7 @@ interface EntranceCardProps {
 }
 
 const entranceCardClass =
-  'workspace-entrance-card group relative flex h-full min-h-0 w-full flex-col overflow-hidden p-0 text-left focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#284331]'
+  'workspace-entrance-card group relative flex h-full min-h-0 w-full flex-col overflow-hidden p-0 text-left focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-accent'
 
 function EntranceCardContent({
   description,
@@ -450,22 +450,22 @@ function EntranceCardContent({
 }: Omit<EntranceCardProps, 'ariaLabel'> & { selected?: boolean }) {
   return (
     <>
-      <div className="relative min-h-0 flex-[1.35] overflow-hidden px-2 text-[#35583f]">
+      <div className="relative min-h-0 flex-[1.35] overflow-hidden px-2 text-app-accent">
         <WorkspaceEntranceVisual kind={kind} selected={selected} />
       </div>
       <div className="flex shrink-0 items-end justify-between gap-3 px-2 pb-3">
         <div>
-          <h3 className="font-serif text-[clamp(1.05rem,2.2vw,1.5rem)] leading-tight font-medium tracking-[-0.035em] text-[#202721]">
+          <h3 className="font-serif text-[clamp(1.05rem,2.2vw,1.5rem)] leading-tight font-medium tracking-[-0.035em] text-app-ink">
             {title}
           </h3>
-          <p className="mt-1 max-w-xs text-[clamp(0.65rem,1.05vw,0.75rem)] leading-[1.55] text-[#687169]">
+          <p className="mt-1 max-w-xs text-[clamp(0.65rem,1.05vw,0.75rem)] leading-[1.55] text-app-muted">
             {description}
           </p>
         </div>
         <span
           aria-hidden="true"
           className={`grid h-8 w-8 shrink-0 place-items-center text-lg transition-colors ${
-            selected ? 'text-[#284331]' : 'text-[#7b847d] group-hover:text-[#284331]'
+            selected ? 'text-app-accent' : 'text-app-faint group-hover:text-app-accent'
           }`}
         >
           {selected ? '✓' : '↗'}
@@ -486,7 +486,7 @@ function DirectEntranceCard({
     <Link
       to={to}
       aria-label={ariaLabel}
-      className={`${entranceCardClass} bg-transparent hover:bg-white/28`}
+      className={`${entranceCardClass} bg-transparent hover:bg-app-surface-raised/28`}
     >
       <EntranceCardContent kind={kind} title={title} description={description} />
     </Link>
@@ -508,7 +508,7 @@ function SelectableEntranceCard({
       aria-pressed={selected}
       onClick={onClick}
       className={`${entranceCardClass} ${
-        selected ? 'bg-white/42' : 'bg-transparent hover:bg-white/28'
+        selected ? 'bg-app-surface-raised/42' : 'bg-transparent hover:bg-app-surface-raised/28'
       }`}
     >
       <EntranceCardContent
@@ -531,25 +531,25 @@ function WorkflowEntranceCard({
   return (
     <div
       className={`${entranceCardClass} workflow-entrance-card group ${
-        selected ? 'bg-white/42' : 'bg-transparent'
+        selected ? 'bg-app-surface-raised/42' : 'bg-transparent'
       }`}
     >
-      <div className="relative min-h-0 flex-[1.35] overflow-hidden px-2 text-[#35583f]">
+      <div className="relative min-h-0 flex-[1.35] overflow-hidden px-2 text-app-accent">
         <WorkspaceEntranceVisual kind="workflow" selected={selected} />
       </div>
       <div className="relative h-[5.4rem] shrink-0 px-2 pb-3">
         <div className="workflow-card-copy flex h-full items-end justify-between gap-3">
           <div>
-            <h3 className="font-serif text-[clamp(1.05rem,2.2vw,1.5rem)] leading-tight font-medium tracking-[-0.035em] text-[#202721]">
+            <h3 className="font-serif text-[clamp(1.05rem,2.2vw,1.5rem)] leading-tight font-medium tracking-[-0.035em] text-app-ink">
               工作流画布
             </h3>
-            <p className="mt-1 text-[clamp(0.65rem,1.05vw,0.75rem)] leading-[1.55] text-[#687169]">
+            <p className="mt-1 text-[clamp(0.65rem,1.05vw,0.75rem)] leading-[1.55] text-app-muted">
               新建制作流程，或继续已有进度。
             </p>
           </div>
           <span
             aria-hidden="true"
-            className="grid h-8 w-8 shrink-0 place-items-center text-lg text-[#7b847d]"
+            className="grid h-8 w-8 shrink-0 place-items-center text-lg text-app-faint"
           >
             {selected ? '✓' : '↗'}
           </span>
@@ -561,14 +561,14 @@ function WorkflowEntranceCard({
           <Link
             to="/projects/new?entry=workflow-editor"
             aria-label="创建新项目"
-            className="workflow-card-action workflow-card-action-create group/action flex items-center justify-between text-left focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#284331]"
+            className="workflow-card-action workflow-card-action-create group/action flex items-center justify-between text-left focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-accent"
           >
-            <strong className="font-serif text-[clamp(0.9rem,1.5vw,1.1rem)] font-medium tracking-[-0.025em] text-[#263028]">
+            <strong className="font-serif text-[clamp(0.9rem,1.5vw,1.1rem)] font-medium tracking-[-0.025em] text-app-ink">
               创建新项目
             </strong>
             <span
               aria-hidden="true"
-              className="text-sm text-[#667169] transition-transform group-hover/action:translate-x-0.5"
+              className="text-sm text-app-muted transition-transform group-hover/action:translate-x-0.5"
             >
               ↗
             </span>
@@ -578,14 +578,14 @@ function WorkflowEntranceCard({
             aria-label="继续已有工作流"
             aria-pressed={selected}
             onClick={onContinue}
-            className="workflow-card-action workflow-card-action-continue group/action flex items-center justify-between text-left focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#284331]"
+            className="workflow-card-action workflow-card-action-continue group/action flex items-center justify-between text-left focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-accent"
           >
-            <strong className="font-serif text-[clamp(0.9rem,1.5vw,1.1rem)] font-medium tracking-[-0.025em] text-[#263028]">
+            <strong className="font-serif text-[clamp(0.9rem,1.5vw,1.1rem)] font-medium tracking-[-0.025em] text-app-ink">
               继续已有工作流
             </strong>
             <span
               aria-hidden="true"
-              className="text-sm text-[#667169] transition-transform group-hover/action:translate-x-0.5"
+              className="text-sm text-app-muted transition-transform group-hover/action:translate-x-0.5"
             >
               →
             </span>
@@ -599,7 +599,7 @@ function WorkflowEntranceCard({
 function ResumeProjects({ projects }: { projects: Project[] }) {
   return (
     <div>
-      <div className="mb-2 flex min-h-9 items-center justify-between rounded-[0.625rem] bg-[#e5e5df] px-3 font-sans text-[0.65rem] font-medium tracking-[0.02em] text-[#677068]">
+      <div className="mb-2 flex min-h-9 items-center justify-between rounded-[0.625rem] bg-app-surface-muted px-3 font-sans text-[0.65rem] font-medium tracking-[0.02em] text-app-muted">
         <span>{projects.length} 个项目</span>
         <span>项目列表</span>
       </div>
@@ -609,19 +609,19 @@ function ResumeProjects({ projects }: { projects: Project[] }) {
             key={project.id}
             to={`/projects/${project.id}/assets`}
             aria-label={`打开项目 ${project.name}`}
-            className="group flex items-center justify-between gap-4 rounded-md px-3 py-3 font-sans transition-colors hover:bg-white/55 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#284331]"
+            className="group flex items-center justify-between gap-4 rounded-md px-3 py-3 font-sans transition-colors hover:bg-app-surface-raised/55 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-accent"
           >
             <span className="min-w-0">
-              <strong className="block truncate text-[0.95rem] font-semibold tracking-[-0.015em] text-[#252d27]">
+              <strong className="block truncate text-[0.95rem] font-semibold tracking-[-0.015em] text-app-ink">
                 {project.name}
               </strong>
-              <span className="mt-0.5 block text-[0.68rem] text-[#778078]">
+              <span className="mt-0.5 block text-[0.68rem] text-app-faint">
                 {formatProjectDate(project.updatedAt)} 更新
               </span>
             </span>
             <span
               aria-hidden="true"
-              className="shrink-0 text-sm text-[#758178] group-hover:text-[#284331]"
+              className="shrink-0 text-sm text-app-faint group-hover:text-app-accent"
             >
               ↗
             </span>
@@ -641,7 +641,7 @@ interface ProjectSelectionProps {
 function ProjectSelection({ onPageChange, onSelect, projects }: ProjectSelectionProps) {
   return (
     <div>
-      <p className="mb-3 text-xs leading-5 text-[#6d766e]">选择这次工作的项目边界。</p>
+      <p className="mb-3 text-xs leading-5 text-app-muted">选择这次工作的项目边界。</p>
       <div className="grid gap-3 sm:grid-cols-2">
         {projects.items.map((project) => (
           <button
@@ -649,15 +649,15 @@ function ProjectSelection({ onPageChange, onSelect, projects }: ProjectSelection
             type="button"
             aria-label={`选择项目 ${project.name}`}
             onClick={() => onSelect(project)}
-            className="group min-h-24 rounded-[1.1rem] border border-[#d1d7d0] bg-white px-4 py-3 text-left transition hover:border-[#87988b] hover:bg-[#f4f7f3] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#284331]"
+            className="group min-h-24 rounded-[1.1rem] border border-app-line bg-app-surface-raised px-4 py-3 text-left transition hover:border-app-line-strong hover:bg-app-surface focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-accent"
           >
-            <span className="flex items-center justify-between gap-3 text-[0.62rem] text-[#7a827b]">
+            <span className="flex items-center justify-between gap-3 text-[0.62rem] text-app-faint">
               PROJECT · {project.id}
-              <span aria-hidden="true" className="text-sm group-hover:text-[#284331]">
+              <span aria-hidden="true" className="text-sm group-hover:text-app-accent">
                 →
               </span>
             </span>
-            <strong className="mt-4 block font-serif text-lg font-medium tracking-[-0.025em] text-[#263028]">
+            <strong className="mt-4 block font-serif text-lg font-medium tracking-[-0.025em] text-app-ink">
               {project.name}
             </strong>
           </button>
@@ -693,25 +693,25 @@ function WorkflowSelection({
               key={run.id}
               to={`/workflow-editor/${run.id}`}
               aria-label={`打开工作流 ${name}`}
-              className="group block rounded-[1.15rem] border border-[#d1d7d0] bg-white p-4 transition hover:border-[#87988b] hover:bg-[#fbfcf9] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#284331]"
+              className="group block rounded-[1.15rem] border border-app-line bg-app-surface-raised p-4 transition hover:border-app-line-strong hover:bg-app-surface-raised focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-accent"
             >
-              <span className="flex items-center justify-between gap-3 font-mono text-[0.6rem] font-semibold tracking-[0.08em] text-[#788179] uppercase">
+              <span className="flex items-center justify-between gap-3 font-mono text-[0.6rem] font-semibold tracking-[0.08em] text-app-faint uppercase">
                 WorkflowRun #{run.id}
-                <span aria-hidden="true" className="text-sm group-hover:text-[#284331]">
+                <span aria-hidden="true" className="text-sm group-hover:text-app-accent">
                   ↗
                 </span>
               </span>
-              <strong className="mt-2 block font-serif text-xl font-medium tracking-[-0.03em] text-[#253027]">
+              <strong className="mt-2 block font-serif text-xl font-medium tracking-[-0.03em] text-app-ink">
                 {name}
               </strong>
               <span className="mt-4 flex items-center gap-3">
-                <span className="h-1.5 flex-1 overflow-hidden rounded-full bg-[#e2e6e1]">
+                <span className="h-1.5 flex-1 overflow-hidden rounded-full bg-app-surface-muted">
                   <span
-                    className="block h-full rounded-full bg-[#35583f]"
+                    className="block h-full rounded-full bg-app-accent"
                     style={{ width: `${percentage}%` }}
                   />
                 </span>
-                <span className="shrink-0 text-[0.68rem] text-[#687169]">
+                <span className="shrink-0 text-[0.68rem] text-app-muted">
                   {completed} / {total} 节点完成
                 </span>
               </span>
@@ -740,7 +740,7 @@ function CharacterSelection({
 }) {
   return (
     <div>
-      <p className="mb-3 text-xs leading-5 text-[#6d766e]">选择要核验的角色。</p>
+      <p className="mb-3 text-xs leading-5 text-app-muted">选择要核验的角色。</p>
       <div className="grid gap-3 sm:grid-cols-2">
         {characters.items.map((character) => {
           const name = character.name ?? '未命名角色'
@@ -750,18 +750,18 @@ function CharacterSelection({
               type="button"
               aria-label={`选择角色 ${name}`}
               onClick={() => onSelect(character)}
-              className="group min-h-24 rounded-[1.1rem] border border-[#d1d7d0] bg-white px-4 py-3 text-left transition hover:border-[#87988b] hover:bg-[#f4f7f3] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#284331]"
+              className="group min-h-24 rounded-[1.1rem] border border-app-line bg-app-surface-raised px-4 py-3 text-left transition hover:border-app-line-strong hover:bg-app-surface focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-accent"
             >
-              <span className="flex items-center justify-between gap-3 text-[0.62rem] text-[#7a827b]">
+              <span className="flex items-center justify-between gap-3 text-[0.62rem] text-app-faint">
                 CHARACTER · {character.id}
-                <span aria-hidden="true" className="text-sm group-hover:text-[#284331]">
+                <span aria-hidden="true" className="text-sm group-hover:text-app-accent">
                   →
                 </span>
               </span>
-              <strong className="mt-3 block font-serif text-lg font-medium tracking-[-0.025em] text-[#263028]">
+              <strong className="mt-3 block font-serif text-lg font-medium tracking-[-0.025em] text-app-ink">
                 {name}
               </strong>
-              <span className="mt-1 block text-[0.68rem] text-[#778078]">
+              <span className="mt-1 block text-[0.68rem] text-app-faint">
                 {character.outfits.length} 套造型
               </span>
             </button>
@@ -793,7 +793,7 @@ function OutfitSelection({
 
   return (
     <div>
-      <p className="mb-3 text-xs leading-5 text-[#6d766e]">只有包含真实动作帧的造型可以进入。</p>
+      <p className="mb-3 text-xs leading-5 text-app-muted">只有包含真实动作帧的造型可以进入。</p>
       <div className="space-y-3">
         {outfits.map((outfit) => {
           const playback = getOutfitPlayback(outfit)
@@ -801,19 +801,19 @@ function OutfitSelection({
             <div
               className={`rounded-[1.1rem] border px-4 py-3 ${
                 playback.playable
-                  ? 'border-[#ced5cd] bg-white transition group-hover:border-[#819287] group-hover:bg-[#fbfcf9]'
-                  : 'border-[#d9ddd8] bg-[#f0f2ee] text-[#767d76]'
+                  ? 'border-app-line bg-app-surface-raised transition group-hover:border-app-line-strong group-hover:bg-app-surface-raised'
+                  : 'border-app-line bg-app-surface text-app-faint'
               }`}
             >
               <span className="flex items-center justify-between gap-3 text-[0.62rem]">
-                <span className="font-mono tracking-[0.08em] text-[#7a827b] uppercase">
+                <span className="font-mono tracking-[0.08em] text-app-faint uppercase">
                   Outfit · {outfit.id}
                 </span>
                 <span
                   className={`rounded-full border px-2 py-0.5 text-[0.58rem] font-semibold ${
                     playback.playable
-                      ? 'border-[#a8b9aa] bg-[#edf4ed] text-[#35583f]'
-                      : 'border-[#cdd2cc] bg-[#f4f5f1] text-[#777e77]'
+                      ? 'border-app-line-strong bg-app-accent-muted text-app-accent'
+                      : 'border-app-line bg-app-surface text-app-faint'
                   }`}
                 >
                   {playback.playable ? '可预览' : '待补帧'}
@@ -821,16 +821,16 @@ function OutfitSelection({
               </span>
               <span className="mt-2 flex items-end justify-between gap-3">
                 <span>
-                  <strong className="block font-serif text-lg font-medium tracking-[-0.025em] text-[#263028]">
+                  <strong className="block font-serif text-lg font-medium tracking-[-0.025em] text-app-ink">
                     {outfit.name}
                   </strong>
-                  <span className="mt-1 block text-[0.68rem] text-[#707970]">
+                  <span className="mt-1 block text-[0.68rem] text-app-muted">
                     {playback.playable
                       ? `${outfit.actions.length} 个动作 · ${playback.frameCount} 帧`
                       : '尚无可播放帧'}
                   </span>
                 </span>
-                <span aria-hidden="true" className="text-sm text-[#647067]">
+                <span aria-hidden="true" className="text-sm text-app-muted">
                   {playback.playable ? '↗' : '—'}
                 </span>
               </span>
@@ -842,7 +842,7 @@ function OutfitSelection({
               key={outfit.id}
               to={`/playtest/${character.id}/${outfit.id}`}
               aria-label={`预览 ${name} · ${outfit.name}`}
-              className="group block rounded-[1.1rem] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#284331]"
+              className="group block rounded-[1.1rem] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-accent"
             >
               {card}
             </Link>
@@ -875,12 +875,12 @@ function SelectedContext({
   value: string
 }) {
   return (
-    <div className="flex items-center justify-between gap-3 rounded-xl border border-[#cbd3cb] bg-[#edf2ec] px-3.5 py-3">
+    <div className="flex items-center justify-between gap-3 rounded-xl border border-app-line bg-app-accent-muted px-3.5 py-3">
       <span className="min-w-0">
-        <span className="block font-mono text-[0.56rem] font-semibold tracking-[0.12em] text-[#718075] uppercase">
+        <span className="block font-mono text-[0.56rem] font-semibold tracking-[0.12em] text-app-faint uppercase">
           已选{label}
         </span>
-        <strong className="mt-0.5 block truncate text-xs font-semibold text-[#324238]">
+        <strong className="mt-0.5 block truncate text-xs font-semibold text-app-ink-soft">
           {value}
         </strong>
       </span>
@@ -888,7 +888,7 @@ function SelectedContext({
         type="button"
         aria-label={actionLabel}
         onClick={onReset}
-        className="min-h-9 shrink-0 rounded-full border border-[#aab7ac] bg-[#f8faf7] px-3 text-[0.68rem] font-semibold text-[#4c5b50] transition hover:border-[#6f8574] hover:text-[#284331] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#284331]"
+        className="min-h-9 shrink-0 rounded-full border border-app-line-strong bg-app-surface-raised px-3 text-[0.68rem] font-semibold text-app-ink-soft transition hover:border-app-line-strong hover:text-app-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-accent"
       >
         更换
       </button>
@@ -898,8 +898,8 @@ function SelectedContext({
 
 function LoadingState({ label }: { label: string }) {
   return (
-    <div role="status" className="rounded-[1.25rem] border border-[#d4dad3] bg-white p-5">
-      <p className="text-xs font-medium text-[#687169]">{label}</p>
+    <div role="status" className="rounded-[1.25rem] border border-app-line bg-app-surface-raised p-5">
+      <p className="text-xs font-medium text-app-muted">{label}</p>
       <div aria-hidden="true" className="mt-5 space-y-3">
         <span className="workspace-loading-line block h-3 w-2/3 rounded-full" />
         <span className="workspace-loading-line block h-3 w-full rounded-full" />
@@ -923,15 +923,15 @@ function ErrorState({
   title: string
 }) {
   return (
-    <div role="alert" className="rounded-[1.25rem] border border-[#d6c1b6] bg-[#fff8f3] p-5">
-      <p className="font-serif text-xl font-medium tracking-[-0.025em] text-[#6f3928]">{title}</p>
-      <p className="mt-2 text-xs leading-5 text-[#7a5548]">{description}</p>
+    <div role="alert" className="rounded-[1.25rem] border border-app-danger-line bg-app-danger-soft p-5">
+      <p className="font-serif text-xl font-medium tracking-[-0.025em] text-app-danger">{title}</p>
+      <p className="mt-2 text-xs leading-5 text-app-danger-muted">{description}</p>
       <div className="mt-5 flex flex-wrap gap-2.5">
         <button
           type="button"
           aria-label={retryLabel}
           onClick={onRetry}
-          className="inline-flex min-h-10 items-center rounded-full bg-[#6f3928] px-4 text-xs font-semibold text-white transition hover:bg-[#593022] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#6f3928]"
+          className="inline-flex min-h-10 items-center rounded-full bg-app-danger px-4 text-xs font-semibold text-app-on-accent transition hover:bg-app-danger-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-danger"
         >
           重试
         </button>
@@ -951,11 +951,11 @@ function EmptyState({
   title: string
 }) {
   return (
-    <div className="rounded-[1.25rem] border border-dashed border-[#c3cbc3] bg-[#f4f6f2] p-5 sm:p-6">
-      <strong className="font-serif text-xl font-medium tracking-[-0.025em] text-[#303a32]">
+    <div className="rounded-[1.25rem] border border-dashed border-app-line bg-app-surface p-5 sm:p-6">
+      <strong className="font-serif text-xl font-medium tracking-[-0.025em] text-app-ink-soft">
         {title}
       </strong>
-      <p className="mt-2 max-w-md text-xs leading-5 text-[#6e776f]">{description}</p>
+      <p className="mt-2 max-w-md text-xs leading-5 text-app-muted">{description}</p>
       {children ? <div className="mt-5 flex flex-wrap gap-2.5">{children}</div> : null}
     </div>
   )
@@ -969,7 +969,7 @@ function ContextLink({ children, ...props }: Omit<React.ComponentProps<typeof Li
   return (
     <Link
       {...props}
-      className="inline-flex min-h-10 items-center rounded-full border border-[#c1c9c1] bg-[#fbfcf9] px-4 text-xs font-semibold text-[#536057] transition hover:border-[#809083] hover:text-[#284331] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#284331]"
+      className="inline-flex min-h-10 items-center rounded-full border border-app-line bg-app-surface-raised px-4 text-xs font-semibold text-app-ink-soft transition hover:border-app-line-strong hover:text-app-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-accent"
     >
       {children}
     </Link>
@@ -983,7 +983,7 @@ function PrimaryContextLink({
   return (
     <Link
       {...props}
-      className="inline-flex min-h-10 items-center rounded-full bg-[#284331] px-4 text-xs font-semibold text-white transition hover:bg-[#1f3828] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#284331]"
+      className="inline-flex min-h-10 items-center rounded-full bg-app-accent px-4 text-xs font-semibold text-app-on-accent transition hover:bg-app-accent-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-accent"
     >
       {children}
     </Link>
diff --git a/frontend/src/pages/workspace/workspace.css b/frontend/src/pages/workspace/workspace.css
index 2bd06e4f..eb392d9a 100644
--- a/frontend/src/pages/workspace/workspace.css
+++ b/frontend/src/pages/workspace/workspace.css
@@ -1,12 +1,6 @@
 .workspace-page {
-  --workspace-ink: #1d251f;
-  --workspace-muted: #687169;
-  --workspace-paper: #f7f8f4;
-  --workspace-canvas: #e7eae5;
-  --workspace-line: #cbd1ca;
-  --workspace-moss: #284331;
-  color: var(--workspace-ink);
-  background: #f3f2ec;
+  color: var(--color-app-ink);
+  background: var(--color-app-canvas);
 }
 
 .workspace-shell {
@@ -42,7 +36,7 @@
 }
 
 .workflow-card-action {
-  color: var(--workspace-ink);
+  color: var(--color-app-ink);
   background: transparent;
   transition:
     color 170ms ease,
@@ -59,7 +53,7 @@
 
 .workflow-card-action:hover,
 .workflow-card-action:focus-visible {
-  color: var(--workspace-moss);
+  color: var(--color-app-accent);
 }
 
 .workflow-entrance-card:hover .workflow-card-actions,
@@ -113,7 +107,12 @@
 }
 
 .workspace-loading-line {
-  background-image: linear-gradient(90deg, #e7eae5 20%, #f2f4ef 50%, #e7eae5 80%);
+  background-image: linear-gradient(
+    90deg,
+    var(--color-app-surface-muted) 20%,
+    var(--color-app-surface) 50%,
+    var(--color-app-surface-muted) 80%
+  );
   background-size: 220% 100%;
   animation: workspace-loading 1.2s ease-in-out infinite;
 }
diff --git a/frontend/src/shared/ui/app-color-system.test.ts b/frontend/src/shared/ui/app-color-system.test.ts
new file mode 100644
index 00000000..fa012c57
--- /dev/null
+++ b/frontend/src/shared/ui/app-color-system.test.ts
@@ -0,0 +1,79 @@
+import { readFileSync } from 'node:fs'
+
+import { describe, expect, it } from 'vitest'
+
+const source = (relativePath: string) =>
+  readFileSync(new URL(relativePath, import.meta.url), 'utf8')
+
+const productColorConsumers = [
+  '../../app/layout/app-header.tsx',
+  '../../app/layout/page-back-button.tsx',
+  '../../pages/workspace/index.tsx',
+  '../../pages/workspace/workspace.css',
+  '../../pages/account/index.tsx',
+  '../../pages/account/account.css',
+  '../../pages/projects/index.tsx',
+  '../../pages/project-create/index.tsx',
+  '../../pages/project-detail/index.tsx',
+  '../../pages/asset-library/index.tsx',
+  '../../pages/character-detail/index.tsx',
+  '../../pages/quick-start/index.tsx',
+  '../../pages/workflow-editor/index.tsx',
+  '../../pages/workflow-editor/workflow-editor.css',
+  '../../pages/playtest/entry.tsx',
+  '../../pages/playtest/index.tsx',
+  '../../pages/playtest/workbench/index.tsx',
+  './pagination.tsx',
+]
+
+const builtInPaletteUtility =
+  /(?:bg|text|border|outline|decoration|placeholder|from|via|to)-(?:white|black|slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)\b/
+
+describe('product color system', () => {
+  it('defines one semantic palette for authenticated product pages', () => {
+    const theme = source('../../index.css')
+
+    for (const token of [
+      '--color-app-canvas:',
+      '--color-app-surface:',
+      '--color-app-surface-muted:',
+      '--color-app-ink:',
+      '--color-app-muted:',
+      '--color-app-line:',
+      '--color-app-accent:',
+      '--color-app-accent-soft:',
+      '--color-app-danger:',
+      '--color-app-warning:',
+      '--color-app-info:',
+    ]) {
+      expect(theme, token).toContain(token)
+    }
+  })
+
+  it('keeps the four product pages on shared semantic colors', () => {
+    for (const path of productColorConsumers) {
+      const content = source(path)
+      expect(content, `${path} contains a private color value`).not.toMatch(
+        /#[0-9a-f]{3,8}\b|rgba?\(|hsla?\(|oklch\(/i,
+      )
+      expect(content, `${path} declares or consumes a page-owned palette`).not.toMatch(
+        /--(?:editor|account)-/,
+      )
+      expect(content, `${path} bypasses the product palette`).not.toMatch(
+        builtInPaletteUtility,
+      )
+    }
+  })
+
+  it('uses the shared canvas for full-page product backgrounds', () => {
+    for (const path of [
+      '../../pages/quick-start/index.tsx',
+      '../../pages/project-create/index.tsx',
+      '../../pages/project-detail/index.tsx',
+    ]) {
+      expect(source(path), `${path} does not consume the shared canvas`).toContain(
+        'bg-app-canvas',
+      )
+    }
+  })
+})
diff --git a/frontend/src/shared/ui/pagination.tsx b/frontend/src/shared/ui/pagination.tsx
index 59c7ba3b..793c7789 100644
--- a/frontend/src/shared/ui/pagination.tsx
+++ b/frontend/src/shared/ui/pagination.tsx
@@ -24,11 +24,11 @@ export function Pagination({
         aria-label="上一页"
         disabled={disabled || page <= 1}
         onClick={() => onPageChange(page - 1)}
-        className="rounded-full border border-[#cbd1c8] px-3 py-1.5 font-semibold text-[#4d564e] disabled:cursor-not-allowed disabled:opacity-40"
+        className="rounded-full border border-app-line px-3 py-1.5 font-semibold text-app-ink-soft disabled:cursor-not-allowed disabled:opacity-40"
       >
         上一页
       </button>
-      <span className="tabular-nums text-[#747b73]">
+      <span className="tabular-nums text-app-faint">
         第 {page} / {totalPages} 页 · 共 {total} 项
       </span>
       <button
@@ -36,7 +36,7 @@ export function Pagination({
         aria-label="下一页"
         disabled={disabled || page >= totalPages}
         onClick={() => onPageChange(page + 1)}
-        className="rounded-full border border-[#cbd1c8] px-3 py-1.5 font-semibold text-[#4d564e] disabled:cursor-not-allowed disabled:opacity-40"
+        className="rounded-full border border-app-line px-3 py-1.5 font-semibold text-app-ink-soft disabled:cursor-not-allowed disabled:opacity-40"
       >
         下一页
       </button>

From 2c238db2c1e4a9214d4c7be23d4fa5c3c2d0e739 Mon Sep 17 00:00:00 2001
From: huyan <huyanxius@Gmail.com>
Date: Thu, 13 Aug 2026 16:35:14 +0800
Subject: [PATCH 2/2] style(frontend): apply project formatting

Frontend CI rejected seven files during the formatting check.

Apply the repository formatter only to the reported files.

Allow the existing frontend checks to continue past formatting.
---
 frontend/src/pages/account/index.tsx            |  4 +++-
 frontend/src/pages/playtest/entry.tsx           |  4 +++-
 frontend/src/pages/playtest/index.tsx           |  5 ++++-
 frontend/src/pages/playtest/workbench/index.tsx |  9 +++++++--
 frontend/src/pages/project-create/index.tsx     |  5 ++++-
 frontend/src/pages/workspace/index.tsx          | 10 ++++++++--
 frontend/src/shared/ui/app-color-system.test.ts |  8 ++------
 7 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/frontend/src/pages/account/index.tsx b/frontend/src/pages/account/index.tsx
index 09ec3cb8..f0c515aa 100644
--- a/frontend/src/pages/account/index.tsx
+++ b/frontend/src/pages/account/index.tsx
@@ -235,7 +235,9 @@ export function AccountPage() {
                     {initial}
                   </span>
                   <div className="min-w-0">
-                    <p className="truncate text-base font-semibold text-app-ink-soft">{displayName}</p>
+                    <p className="truncate text-base font-semibold text-app-ink-soft">
+                      {displayName}
+                    </p>
                     <p className="mt-1 truncate text-sm text-app-muted">{currentUser.email}</p>
                   </div>
                   <span className="ml-auto rounded-full bg-app-accent-soft px-2.5 py-1 text-xs font-medium text-app-accent">
diff --git a/frontend/src/pages/playtest/entry.tsx b/frontend/src/pages/playtest/entry.tsx
index 93c315a8..0805acbd 100644
--- a/frontend/src/pages/playtest/entry.tsx
+++ b/frontend/src/pages/playtest/entry.tsx
@@ -264,7 +264,9 @@ function ErrorState() {
   return (
     <div className="mt-7 rounded-[1.5rem] border border-app-danger-line bg-app-danger-soft p-7">
       <h2 className="font-semibold text-app-danger">可预览资产暂时无法读取</h2>
-      <p className="mt-2 text-sm text-app-danger-muted">稍后刷新页面，或先回项目资产检查角色数据。</p>
+      <p className="mt-2 text-sm text-app-danger-muted">
+        稍后刷新页面，或先回项目资产检查角色数据。
+      </p>
       <Link
         to="/projects"
         className="mt-5 inline-flex min-h-10 items-center rounded-full border border-app-danger-line px-5 text-sm font-semibold text-app-danger"
diff --git a/frontend/src/pages/playtest/index.tsx b/frontend/src/pages/playtest/index.tsx
index f0c118c3..55d0ad22 100644
--- a/frontend/src/pages/playtest/index.tsx
+++ b/frontend/src/pages/playtest/index.tsx
@@ -76,7 +76,10 @@ export function PlaytestPage() {
 
 function PlaytestPageMessage({ children }: { children: string }) {
   return (
-    <main aria-label="预览台" className="grid min-h-screen place-items-center bg-app-surface-strong p-6">
+    <main
+      aria-label="预览台"
+      className="grid min-h-screen place-items-center bg-app-surface-strong p-6"
+    >
       <p className="text-sm font-medium text-app-ink-soft">{children}</p>
     </main>
   )
diff --git a/frontend/src/pages/playtest/workbench/index.tsx b/frontend/src/pages/playtest/workbench/index.tsx
index 558c7c0d..1ca9ae37 100644
--- a/frontend/src/pages/playtest/workbench/index.tsx
+++ b/frontend/src/pages/playtest/workbench/index.tsx
@@ -27,7 +27,10 @@ export function PlaytestWorkbench({
 
   if (!result.ok) {
     return (
-      <main aria-label="预览台" className="grid min-h-screen place-items-center bg-app-surface-strong p-6">
+      <main
+        aria-label="预览台"
+        className="grid min-h-screen place-items-center bg-app-surface-strong p-6"
+      >
         <p className="rounded-full border border-app-line bg-app-surface px-5 py-3 text-sm text-app-ink-soft">
           找不到指定造型，无法进入预览台。
         </p>
@@ -110,7 +113,9 @@ function PlaytestExperience({
                     aria-pressed={selected}
                     onClick={() => runtime.selectAction(action.id)}
                     className={`flex w-full items-center justify-between rounded-xl px-3 py-2.5 text-left text-xs font-medium transition-colors ${
-                      selected ? 'bg-app-accent text-app-on-accent' : 'text-app-ink-soft hover:bg-app-surface-muted'
+                      selected
+                        ? 'bg-app-accent text-app-on-accent'
+                        : 'text-app-ink-soft hover:bg-app-surface-muted'
                     }`}
                   >
                     <span>{action.name}</span>
diff --git a/frontend/src/pages/project-create/index.tsx b/frontend/src/pages/project-create/index.tsx
index 4c7961c0..cebb692c 100644
--- a/frontend/src/pages/project-create/index.tsx
+++ b/frontend/src/pages/project-create/index.tsx
@@ -162,7 +162,10 @@ export function ProjectCreatePage() {
 
           <div className="grid gap-5 sm:grid-cols-2">
             <div className="grid gap-2">
-              <label className="text-xs font-semibold text-app-ink-soft" htmlFor="project-perspective">
+              <label
+                className="text-xs font-semibold text-app-ink-soft"
+                htmlFor="project-perspective"
+              >
                 游戏视角
               </label>
               <select
diff --git a/frontend/src/pages/workspace/index.tsx b/frontend/src/pages/workspace/index.tsx
index 34739586..659728d2 100644
--- a/frontend/src/pages/workspace/index.tsx
+++ b/frontend/src/pages/workspace/index.tsx
@@ -898,7 +898,10 @@ function SelectedContext({
 
 function LoadingState({ label }: { label: string }) {
   return (
-    <div role="status" className="rounded-[1.25rem] border border-app-line bg-app-surface-raised p-5">
+    <div
+      role="status"
+      className="rounded-[1.25rem] border border-app-line bg-app-surface-raised p-5"
+    >
       <p className="text-xs font-medium text-app-muted">{label}</p>
       <div aria-hidden="true" className="mt-5 space-y-3">
         <span className="workspace-loading-line block h-3 w-2/3 rounded-full" />
@@ -923,7 +926,10 @@ function ErrorState({
   title: string
 }) {
   return (
-    <div role="alert" className="rounded-[1.25rem] border border-app-danger-line bg-app-danger-soft p-5">
+    <div
+      role="alert"
+      className="rounded-[1.25rem] border border-app-danger-line bg-app-danger-soft p-5"
+    >
       <p className="font-serif text-xl font-medium tracking-[-0.025em] text-app-danger">{title}</p>
       <p className="mt-2 text-xs leading-5 text-app-danger-muted">{description}</p>
       <div className="mt-5 flex flex-wrap gap-2.5">
diff --git a/frontend/src/shared/ui/app-color-system.test.ts b/frontend/src/shared/ui/app-color-system.test.ts
index fa012c57..24c74111 100644
--- a/frontend/src/shared/ui/app-color-system.test.ts
+++ b/frontend/src/shared/ui/app-color-system.test.ts
@@ -59,9 +59,7 @@ describe('product color system', () => {
       expect(content, `${path} declares or consumes a page-owned palette`).not.toMatch(
         /--(?:editor|account)-/,
       )
-      expect(content, `${path} bypasses the product palette`).not.toMatch(
-        builtInPaletteUtility,
-      )
+      expect(content, `${path} bypasses the product palette`).not.toMatch(builtInPaletteUtility)
     }
   })
 
@@ -71,9 +69,7 @@ describe('product color system', () => {
       '../../pages/project-create/index.tsx',
       '../../pages/project-detail/index.tsx',
     ]) {
-      expect(source(path), `${path} does not consume the shared canvas`).toContain(
-        'bg-app-canvas',
-      )
+      expect(source(path), `${path} does not consume the shared canvas`).toContain('bg-app-canvas')
     }
   })
 })