diff --git a/packages/ui/package.json b/packages/ui/package.json
index 10f016b947..6620835a24 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -15,7 +15,8 @@
     "lint": "eslint src --ext .ts,.tsx --fix",
     "type-check": "tsc --noEmit -p tsconfig.json --composite false",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "tokens:build": "node scripts/generate-theme-from-tokens.mjs"
   },
   "keywords": [
     "ui",
diff --git a/packages/ui/src/styles/theme.css b/packages/ui/src/styles/theme.css
index c415bfb75f..3df84b22a7 100644
--- a/packages/ui/src/styles/theme.css
+++ b/packages/ui/src/styles/theme.css
@@ -1,443 +1,450 @@
 /**
- * CherryStudio Theme - Tailwind CSS 主题配置
+ * Generated from Design Tokens
  *
- * 用途：映射设计师的设计系统（--cs-*）到 Tailwind 标准命名
- * 使用场景：
- * - 主包：完全使用设计系统
- * - npm 用户：可选择导入，会覆盖 Tailwind 默认主题
+ * ⚠️  DO NOT EDIT DIRECTLY!
+ * This file is auto-generated from tokens/ directory.
+ * To make changes, edit files in tokens/ and run: npm run tokens:build
  *
- * 生成的工具类：bg-primary, bg-red-500, p-md 等（无前缀）
+ * Generated on: 2025-11-07T08:56:09.444Z
  */
 
-@import 'tailwindcss';
-@import './tokens.css';
+@import "tailwindcss";
 
 @custom-variant dark (&:is(.dark *));
 
 @theme {
-  /* ==================== */
-  /* 语义化颜色（覆盖 Tailwind 标准命名） */
-  /* ==================== */
-  --color-primary: var(--cs-primary);
-  --color-primary-hover: var(--cs-primary-hover);
-  --color-primary-foreground: var(--cs-white);
-
-  --color-destructive: var(--cs-destructive);
-  --color-destructive-hover: var(--cs-destructive-hover);
-  --color-destructive-foreground: var(--cs-white);
-
-  --color-success: var(--cs-success);
-  --color-success-foreground: var(--cs-white);
-
-  --color-warning: var(--cs-warning);
-  --color-warning-foreground: var(--cs-black);
-
-  --color-background: var(--cs-background);
-  --color-foreground: var(--cs-foreground);
-
-  --color-card: var(--cs-card);
-  --color-card-foreground: var(--cs-foreground);
-
-  --color-popover: var(--cs-popover);
-  --color-popover-foreground: var(--cs-foreground);
-
-  --color-secondary: var(--cs-secondary);
-  --color-secondary-foreground: var(--cs-foreground);
-
-  --color-muted: var(--cs-muted);
-  --color-muted-foreground: var(--cs-foreground-muted);
-
-  --color-accent: var(--cs-accent);
-  --color-accent-foreground: var(--cs-foreground);
-
-  --color-border: var(--cs-border);
-  --color-input: var(--cs-border);
-  --color-ring: var(--cs-ring);
-
-  /* 侧边栏 */
-  --color-sidebar: var(--cs-sidebar);
-  --color-sidebar-foreground: var(--cs-foreground);
-  --color-sidebar-primary: var(--cs-primary);
-  --color-sidebar-primary-foreground: var(--cs-white);
-  --color-sidebar-accent: var(--cs-sidebar-accent);
-  --color-sidebar-accent-foreground: var(--cs-foreground);
-  --color-sidebar-border: var(--cs-border);
-  --color-sidebar-ring: var(--cs-ring);
-
-  /* 图表颜色 */
-  --color-chart-1: var(--cs-blue-500);
-  --color-chart-2: var(--cs-emerald-500);
-  --color-chart-3: var(--cs-purple-500);
-  --color-chart-4: var(--cs-amber-500);
-  --color-chart-5: var(--cs-orange-500);
 
   /* ==================== */
-  /* Primitive 颜色（覆盖 Tailwind 默认色板） */
+  /* Primitive Colors */
   /* ==================== */
-
-  /* Neutral */
-  --color-neutral-50: var(--cs-neutral-50);
-  --color-neutral-100: var(--cs-neutral-100);
-  --color-neutral-200: var(--cs-neutral-200);
-  --color-neutral-300: var(--cs-neutral-300);
-  --color-neutral-400: var(--cs-neutral-400);
-  --color-neutral-500: var(--cs-neutral-500);
-  --color-neutral-600: var(--cs-neutral-600);
-  --color-neutral-700: var(--cs-neutral-700);
-  --color-neutral-800: var(--cs-neutral-800);
-  --color-neutral-900: var(--cs-neutral-900);
-  --color-neutral-950: var(--cs-neutral-950);
-
-  /* Stone */
-  --color-stone-50: var(--cs-stone-50);
-  --color-stone-100: var(--cs-stone-100);
-  --color-stone-200: var(--cs-stone-200);
-  --color-stone-300: var(--cs-stone-300);
-  --color-stone-400: var(--cs-stone-400);
-  --color-stone-500: var(--cs-stone-500);
-  --color-stone-600: var(--cs-stone-600);
-  --color-stone-700: var(--cs-stone-700);
-  --color-stone-800: var(--cs-stone-800);
-  --color-stone-900: var(--cs-stone-900);
-  --color-stone-950: var(--cs-stone-950);
-
-  /* Zinc */
-  --color-zinc-50: var(--cs-zinc-50);
-  --color-zinc-100: var(--cs-zinc-100);
-  --color-zinc-200: var(--cs-zinc-200);
-  --color-zinc-300: var(--cs-zinc-300);
-  --color-zinc-400: var(--cs-zinc-400);
-  --color-zinc-500: var(--cs-zinc-500);
-  --color-zinc-600: var(--cs-zinc-600);
-  --color-zinc-700: var(--cs-zinc-700);
-  --color-zinc-800: var(--cs-zinc-800);
-  --color-zinc-900: var(--cs-zinc-900);
-  --color-zinc-950: var(--cs-zinc-950);
-
-  /* Slate */
-  --color-slate-50: var(--cs-slate-50);
-  --color-slate-100: var(--cs-slate-100);
-  --color-slate-200: var(--cs-slate-200);
-  --color-slate-300: var(--cs-slate-300);
-  --color-slate-400: var(--cs-slate-400);
-  --color-slate-500: var(--cs-slate-500);
-  --color-slate-600: var(--cs-slate-600);
-  --color-slate-700: var(--cs-slate-700);
-  --color-slate-800: var(--cs-slate-800);
-  --color-slate-900: var(--cs-slate-900);
-  --color-slate-950: var(--cs-slate-950);
-
-  /* Gray */
-  --color-gray-50: var(--cs-gray-50);
-  --color-gray-100: var(--cs-gray-100);
-  --color-gray-200: var(--cs-gray-200);
-  --color-gray-300: var(--cs-gray-300);
-  --color-gray-400: var(--cs-gray-400);
-  --color-gray-500: var(--cs-gray-500);
-  --color-gray-600: var(--cs-gray-600);
-  --color-gray-700: var(--cs-gray-700);
-  --color-gray-800: var(--cs-gray-800);
-  --color-gray-900: var(--cs-gray-900);
-  --color-gray-950: var(--cs-gray-950);
-
-  /* Red */
-  --color-red-50: var(--cs-red-50);
-  --color-red-100: var(--cs-red-100);
-  --color-red-200: var(--cs-red-200);
-  --color-red-300: var(--cs-red-300);
-  --color-red-400: var(--cs-red-400);
-  --color-red-500: var(--cs-red-500);
-  --color-red-600: var(--cs-red-600);
-  --color-red-700: var(--cs-red-700);
-  --color-red-800: var(--cs-red-800);
-  --color-red-900: var(--cs-red-900);
-  --color-red-950: var(--cs-red-950);
-
-  /* Orange */
-  --color-orange-50: var(--cs-orange-50);
-  --color-orange-100: var(--cs-orange-100);
-  --color-orange-200: var(--cs-orange-200);
-  --color-orange-300: var(--cs-orange-300);
-  --color-orange-400: var(--cs-orange-400);
-  --color-orange-500: var(--cs-orange-500);
-  --color-orange-600: var(--cs-orange-600);
-  --color-orange-700: var(--cs-orange-700);
-  --color-orange-800: var(--cs-orange-800);
-  --color-orange-900: var(--cs-orange-900);
-  --color-orange-950: var(--cs-orange-950);
-
-  /* Amber */
-  --color-amber-50: var(--cs-amber-50);
-  --color-amber-100: var(--cs-amber-100);
-  --color-amber-200: var(--cs-amber-200);
-  --color-amber-300: var(--cs-amber-300);
-  --color-amber-400: var(--cs-amber-400);
-  --color-amber-500: var(--cs-amber-500);
-  --color-amber-600: var(--cs-amber-600);
-  --color-amber-700: var(--cs-amber-700);
-  --color-amber-800: var(--cs-amber-800);
-  --color-amber-900: var(--cs-amber-900);
-  --color-amber-950: var(--cs-amber-950);
-
-  /* Yellow */
-  --color-yellow-50: var(--cs-yellow-50);
-  --color-yellow-100: var(--cs-yellow-100);
-  --color-yellow-200: var(--cs-yellow-200);
-  --color-yellow-300: var(--cs-yellow-300);
-  --color-yellow-400: var(--cs-yellow-400);
-  --color-yellow-500: var(--cs-yellow-500);
-  --color-yellow-600: var(--cs-yellow-600);
-  --color-yellow-700: var(--cs-yellow-700);
-  --color-yellow-800: var(--cs-yellow-800);
-  --color-yellow-900: var(--cs-yellow-900);
-  --color-yellow-950: var(--cs-yellow-950);
-
-  /* Lime (品牌主色) */
-  --color-lime-50: var(--cs-lime-50);
-  --color-lime-100: var(--cs-lime-100);
-  --color-lime-200: var(--cs-lime-200);
-  --color-lime-300: var(--cs-lime-300);
-  --color-lime-400: var(--cs-lime-400);
-  --color-lime-500: var(--cs-lime-500);
-  --color-lime-600: var(--cs-lime-600);
-  --color-lime-700: var(--cs-lime-700);
-  --color-lime-800: var(--cs-lime-800);
-  --color-lime-900: var(--cs-lime-900);
-  --color-lime-950: var(--cs-lime-950);
-
-  /* Green */
-  --color-green-50: var(--cs-green-50);
-  --color-green-100: var(--cs-green-100);
-  --color-green-200: var(--cs-green-200);
-  --color-green-300: var(--cs-green-300);
-  --color-green-400: var(--cs-green-400);
-  --color-green-500: var(--cs-green-500);
-  --color-green-600: var(--cs-green-600);
-  --color-green-700: var(--cs-green-700);
-  --color-green-800: var(--cs-green-800);
-  --color-green-900: var(--cs-green-900);
-  --color-green-950: var(--cs-green-950);
-
-  /* Emerald */
-  --color-emerald-50: var(--cs-emerald-50);
-  --color-emerald-100: var(--cs-emerald-100);
-  --color-emerald-200: var(--cs-emerald-200);
-  --color-emerald-300: var(--cs-emerald-300);
-  --color-emerald-400: var(--cs-emerald-400);
-  --color-emerald-500: var(--cs-emerald-500);
-  --color-emerald-600: var(--cs-emerald-600);
-  --color-emerald-700: var(--cs-emerald-700);
-  --color-emerald-800: var(--cs-emerald-800);
-  --color-emerald-900: var(--cs-emerald-900);
-  --color-emerald-950: var(--cs-emerald-950);
-
-  /* Teal */
-  --color-teal-50: var(--cs-teal-50);
-  --color-teal-100: var(--cs-teal-100);
-  --color-teal-200: var(--cs-teal-200);
-  --color-teal-300: var(--cs-teal-300);
-  --color-teal-400: var(--cs-teal-400);
-  --color-teal-500: var(--cs-teal-500);
-  --color-teal-600: var(--cs-teal-600);
-  --color-teal-700: var(--cs-teal-700);
-  --color-teal-800: var(--cs-teal-800);
-  --color-teal-900: var(--cs-teal-900);
-  --color-teal-950: var(--cs-teal-950);
-
-  /* Cyan */
-  --color-cyan-50: var(--cs-cyan-50);
-  --color-cyan-100: var(--cs-cyan-100);
-  --color-cyan-200: var(--cs-cyan-200);
-  --color-cyan-300: var(--cs-cyan-300);
-  --color-cyan-400: var(--cs-cyan-400);
-  --color-cyan-500: var(--cs-cyan-500);
-  --color-cyan-600: var(--cs-cyan-600);
-  --color-cyan-700: var(--cs-cyan-700);
-  --color-cyan-800: var(--cs-cyan-800);
-  --color-cyan-900: var(--cs-cyan-900);
-  --color-cyan-950: var(--cs-cyan-950);
-
-  /* Sky */
-  --color-sky-50: var(--cs-sky-50);
-  --color-sky-100: var(--cs-sky-100);
-  --color-sky-200: var(--cs-sky-200);
-  --color-sky-300: var(--cs-sky-300);
-  --color-sky-400: var(--cs-sky-400);
-  --color-sky-500: var(--cs-sky-500);
-  --color-sky-600: var(--cs-sky-600);
-  --color-sky-700: var(--cs-sky-700);
-  --color-sky-800: var(--cs-sky-800);
-  --color-sky-900: var(--cs-sky-900);
-  --color-sky-950: var(--cs-sky-950);
-
-  /* Blue */
-  --color-blue-50: var(--cs-blue-50);
-  --color-blue-100: var(--cs-blue-100);
-  --color-blue-200: var(--cs-blue-200);
-  --color-blue-300: var(--cs-blue-300);
-  --color-blue-400: var(--cs-blue-400);
-  --color-blue-500: var(--cs-blue-500);
-  --color-blue-600: var(--cs-blue-600);
-  --color-blue-700: var(--cs-blue-700);
-  --color-blue-800: var(--cs-blue-800);
-  --color-blue-900: var(--cs-blue-900);
-  --color-blue-950: var(--cs-blue-950);
-
-  /* Indigo */
-  --color-indigo-50: var(--cs-indigo-50);
-  --color-indigo-100: var(--cs-indigo-100);
-  --color-indigo-200: var(--cs-indigo-200);
-  --color-indigo-300: var(--cs-indigo-300);
-  --color-indigo-400: var(--cs-indigo-400);
-  --color-indigo-500: var(--cs-indigo-500);
-  --color-indigo-600: var(--cs-indigo-600);
-  --color-indigo-700: var(--cs-indigo-700);
-  --color-indigo-800: var(--cs-indigo-800);
-  --color-indigo-900: var(--cs-indigo-900);
-  --color-indigo-950: var(--cs-indigo-950);
-
-  /* Violet */
-  --color-violet-50: var(--cs-violet-50);
-  --color-violet-100: var(--cs-violet-100);
-  --color-violet-200: var(--cs-violet-200);
-  --color-violet-300: var(--cs-violet-300);
-  --color-violet-400: var(--cs-violet-400);
-  --color-violet-500: var(--cs-violet-500);
-  --color-violet-600: var(--cs-violet-600);
-  --color-violet-700: var(--cs-violet-700);
-  --color-violet-800: var(--cs-violet-800);
-  --color-violet-900: var(--cs-violet-900);
-  --color-violet-950: var(--cs-violet-950);
-
-  /* Purple */
-  --color-purple-50: var(--cs-purple-50);
-  --color-purple-100: var(--cs-purple-100);
-  --color-purple-200: var(--cs-purple-200);
-  --color-purple-300: var(--cs-purple-300);
-  --color-purple-400: var(--cs-purple-400);
-  --color-purple-500: var(--cs-purple-500);
-  --color-purple-600: var(--cs-purple-600);
-  --color-purple-700: var(--cs-purple-700);
-  --color-purple-800: var(--cs-purple-800);
-  --color-purple-900: var(--cs-purple-900);
-  --color-purple-950: var(--cs-purple-950);
-
-  /* Fuchsia */
-  --color-fuchsia-50: var(--cs-fuchsia-50);
-  --color-fuchsia-100: var(--cs-fuchsia-100);
-  --color-fuchsia-200: var(--cs-fuchsia-200);
-  --color-fuchsia-300: var(--cs-fuchsia-300);
-  --color-fuchsia-400: var(--cs-fuchsia-400);
-  --color-fuchsia-500: var(--cs-fuchsia-500);
-  --color-fuchsia-600: var(--cs-fuchsia-600);
-  --color-fuchsia-700: var(--cs-fuchsia-700);
-  --color-fuchsia-800: var(--cs-fuchsia-800);
-  --color-fuchsia-900: var(--cs-fuchsia-900);
-  --color-fuchsia-950: var(--cs-fuchsia-950);
-
-  /* Pink */
-  --color-pink-50: var(--cs-pink-50);
-  --color-pink-100: var(--cs-pink-100);
-  --color-pink-200: var(--cs-pink-200);
-  --color-pink-300: var(--cs-pink-300);
-  --color-pink-400: var(--cs-pink-400);
-  --color-pink-500: var(--cs-pink-500);
-  --color-pink-600: var(--cs-pink-600);
-  --color-pink-700: var(--cs-pink-700);
-  --color-pink-800: var(--cs-pink-800);
-  --color-pink-900: var(--cs-pink-900);
-  --color-pink-950: var(--cs-pink-950);
-
-  /* Rose */
-  --color-rose-50: var(--cs-rose-50);
-  --color-rose-100: var(--cs-rose-100);
-  --color-rose-200: var(--cs-rose-200);
-  --color-rose-300: var(--cs-rose-300);
-  --color-rose-400: var(--cs-rose-400);
-  --color-rose-500: var(--cs-rose-500);
-  --color-rose-600: var(--cs-rose-600);
-  --color-rose-700: var(--cs-rose-700);
-  --color-rose-800: var(--cs-rose-800);
-  --color-rose-900: var(--cs-rose-900);
-  --color-rose-950: var(--cs-rose-950);
-
-  /* Black & White */
-  --color-black: var(--cs-black);
-  --color-white: var(--cs-white);
-
-  /* Brand (Cherry Studio 品牌色) */
-  --color-brand-50: var(--cs-brand-50);
-  --color-brand-100: var(--cs-brand-100);
-  --color-brand-200: var(--cs-brand-200);
-  --color-brand-300: var(--cs-brand-300);
-  --color-brand-400: var(--cs-brand-400);
-  --color-brand-500: var(--cs-brand-500);
-  --color-brand-600: var(--cs-brand-600);
-  --color-brand-700: var(--cs-brand-700);
-  --color-brand-800: var(--cs-brand-800);
-  --color-brand-900: var(--cs-brand-900);
-  --color-brand-950: var(--cs-brand-950);
+  --color-neutral-50: hsla(0, 0%, 98%, 1);
+  --color-neutral-100: hsla(0, 0%, 96%, 1);
+  --color-neutral-200: hsla(0, 0%, 90%, 1);
+  --color-neutral-300: hsla(0, 0%, 83%, 1);
+  --color-neutral-400: hsla(0, 0%, 64%, 1);
+  --color-neutral-500: hsla(0, 0%, 45%, 1);
+  --color-neutral-600: hsla(215, 14%, 34%, 1);
+  --color-neutral-700: hsla(0, 0%, 25%, 1);
+  --color-neutral-800: hsla(0, 0%, 15%, 1);
+  --color-neutral-900: hsla(0, 0%, 9%, 1);
+  --color-neutral-950: hsla(0, 0%, 4%, 1);
+  --color-stone-50: hsla(60, 9%, 98%, 1);
+  --color-stone-100: hsla(60, 5%, 96%, 1);
+  --color-stone-200: hsla(20, 6%, 90%, 1);
+  --color-stone-300: hsla(24, 6%, 83%, 1);
+  --color-stone-400: hsla(24, 5%, 64%, 1);
+  --color-stone-500: hsla(25, 5%, 45%, 1);
+  --color-stone-600: hsla(33, 5%, 32%, 1);
+  --color-stone-700: hsla(30, 6%, 25%, 1);
+  --color-stone-800: hsla(12, 6%, 15%, 1);
+  --color-stone-900: hsla(24, 10%, 10%, 1);
+  --color-stone-950: hsla(20, 14%, 4%, 1);
+  --color-zinc-50: hsla(0, 0%, 98%, 1);
+  --color-zinc-100: hsla(240, 5%, 96%, 1);
+  --color-zinc-200: hsla(240, 6%, 90%, 1);
+  --color-zinc-300: hsla(240, 5%, 84%, 1);
+  --color-zinc-400: hsla(240, 5%, 65%, 1);
+  --color-zinc-500: hsla(240, 4%, 46%, 1);
+  --color-zinc-600: hsla(240, 5%, 34%, 1);
+  --color-zinc-700: hsla(240, 5%, 26%, 1);
+  --color-zinc-800: hsla(240, 4%, 16%, 1);
+  --color-zinc-900: hsla(240, 6%, 10%, 1);
+  --color-zinc-950: hsla(240, 10%, 4%, 1);
+  --color-slate-50: hsla(210, 40%, 98%, 1);
+  --color-slate-100: hsla(210, 40%, 96%, 1);
+  --color-slate-200: hsla(214, 32%, 91%, 1);
+  --color-slate-300: hsla(213, 27%, 84%, 1);
+  --color-slate-400: hsla(215, 20%, 65%, 1);
+  --color-slate-500: hsla(215, 16%, 47%, 1);
+  --color-slate-600: hsla(215, 19%, 35%, 1);
+  --color-slate-700: hsla(215, 25%, 27%, 1);
+  --color-slate-800: hsla(217, 33%, 17%, 1);
+  --color-slate-900: hsla(222, 47%, 11%, 1);
+  --color-slate-950: hsla(229, 84%, 5%, 1);
+  --color-gray-50: hsla(210, 20%, 98%, 1);
+  --color-gray-100: hsla(220, 14%, 96%, 1);
+  --color-gray-200: hsla(220, 13%, 91%, 1);
+  --color-gray-300: hsla(216, 12%, 84%, 1);
+  --color-gray-400: hsla(218, 11%, 65%, 1);
+  --color-gray-500: hsla(220, 9%, 46%, 1);
+  --color-gray-600: hsla(0, 0%, 32%, 1);
+  --color-gray-700: hsla(217, 19%, 27%, 1);
+  --color-gray-800: hsla(215, 28%, 17%, 1);
+  --color-gray-900: hsla(221, 39%, 11%, 1);
+  --color-gray-950: hsla(224, 71%, 4%, 1);
+  --color-red-50: hsla(0, 86%, 97%, 1);
+  --color-red-100: hsla(0, 93%, 94%, 1);
+  --color-red-200: hsla(0, 96%, 89%, 1);
+  --color-red-300: hsla(0, 94%, 82%, 1);
+  --color-red-400: hsla(0, 91%, 71%, 1);
+  --color-red-500: hsla(0, 84%, 60%, 1);
+  --color-red-600: hsla(0, 72%, 51%, 1);
+  --color-red-700: hsla(0, 74%, 42%, 1);
+  --color-red-800: hsla(0, 70%, 35%, 1);
+  --color-red-900: hsla(0, 63%, 31%, 1);
+  --color-red-950: hsla(0, 75%, 15%, 1);
+  --color-orange-50: hsla(33, 100%, 96%, 1);
+  --color-orange-100: hsla(34, 100%, 92%, 1);
+  --color-orange-200: hsla(32, 98%, 83%, 1);
+  --color-orange-300: hsla(31, 97%, 72%, 1);
+  --color-orange-400: hsla(27, 96%, 61%, 1);
+  --color-orange-500: hsla(25, 95%, 53%, 1);
+  --color-orange-600: hsla(21, 90%, 48%, 1);
+  --color-orange-700: hsla(17, 88%, 40%, 1);
+  --color-orange-800: hsla(15, 79%, 34%, 1);
+  --color-orange-900: hsla(15, 75%, 28%, 1);
+  --color-orange-950: hsla(13, 81%, 15%, 1);
+  --color-amber-50: hsla(48, 100%, 96%, 1);
+  --color-amber-100: hsla(48, 96%, 89%, 1);
+  --color-amber-200: hsla(48, 97%, 77%, 1);
+  --color-amber-300: hsla(46, 97%, 65%, 1);
+  --color-amber-400: hsla(43, 96%, 56%, 1);
+  --color-amber-500: hsla(38, 92%, 50%, 1);
+  --color-amber-600: hsla(32, 95%, 44%, 1);
+  --color-amber-700: hsla(26, 90%, 37%, 1);
+  --color-amber-800: hsla(23, 83%, 31%, 1);
+  --color-amber-900: hsla(22, 78%, 26%, 1);
+  --color-amber-950: hsla(21, 92%, 14%, 1);
+  --color-yellow-50: hsla(55, 92%, 95%, 1);
+  --color-yellow-100: hsla(55, 97%, 88%, 1);
+  --color-yellow-200: hsla(53, 98%, 77%, 1);
+  --color-yellow-300: hsla(50, 98%, 64%, 1);
+  --color-yellow-400: hsla(48, 96%, 53%, 1);
+  --color-yellow-500: hsla(45, 93%, 47%, 1);
+  --color-yellow-600: hsla(41, 96%, 40%, 1);
+  --color-yellow-700: hsla(35, 92%, 33%, 1);
+  --color-yellow-800: hsla(32, 81%, 29%, 1);
+  --color-yellow-900: hsla(28, 73%, 26%, 1);
+  --color-yellow-950: hsla(26, 83%, 14%, 1);
+  --color-lime-50: hsla(78, 92%, 95%, 1);
+  --color-lime-100: hsla(80, 89%, 89%, 1);
+  --color-lime-200: hsla(81, 88%, 80%, 1);
+  --color-lime-300: hsla(82, 85%, 67%, 1);
+  --color-lime-400: hsla(83, 78%, 55%, 1);
+  --color-lime-500: hsla(84, 81%, 44%, 1);
+  --color-lime-600: hsla(85, 85%, 35%, 1);
+  --color-lime-700: hsla(86, 78%, 27%, 1);
+  --color-lime-800: hsla(86, 69%, 23%, 1);
+  --color-lime-900: hsla(88, 61%, 20%, 1);
+  --color-lime-950: hsla(89, 80%, 10%, 1);
+  --color-green-50: hsla(138, 76%, 97%, 1);
+  --color-green-100: hsla(141, 84%, 93%, 1);
+  --color-green-200: hsla(141, 79%, 85%, 1);
+  --color-green-300: hsla(142, 77%, 73%, 1);
+  --color-green-400: hsla(142, 69%, 58%, 1);
+  --color-green-500: hsla(142, 71%, 45%, 1);
+  --color-green-600: hsla(142, 76%, 36%, 1);
+  --color-green-700: hsla(142, 72%, 29%, 1);
+  --color-green-800: hsla(143, 64%, 24%, 1);
+  --color-green-900: hsla(144, 61%, 20%, 1);
+  --color-green-950: hsla(145, 80%, 10%, 1);
+  --color-emerald-50: hsla(152, 81%, 96%, 1);
+  --color-emerald-100: hsla(149, 80%, 90%, 1);
+  --color-emerald-200: hsla(152, 76%, 80%, 1);
+  --color-emerald-300: hsla(156, 72%, 67%, 1);
+  --color-emerald-400: hsla(158, 64%, 52%, 1);
+  --color-emerald-500: hsla(160, 84%, 39%, 1);
+  --color-emerald-600: hsla(161, 94%, 30%, 1);
+  --color-emerald-700: hsla(163, 94%, 24%, 1);
+  --color-emerald-800: hsla(163, 88%, 20%, 1);
+  --color-emerald-900: hsla(164, 86%, 16%, 1);
+  --color-emerald-950: hsla(166, 91%, 9%, 1);
+  --color-teal-50: hsla(166, 76%, 97%, 1);
+  --color-teal-100: hsla(167, 85%, 89%, 1);
+  --color-teal-200: hsla(168, 84%, 78%, 1);
+  --color-teal-300: hsla(171, 77%, 64%, 1);
+  --color-teal-400: hsla(172, 66%, 50%, 1);
+  --color-teal-500: hsla(173, 80%, 40%, 1);
+  --color-teal-600: hsla(175, 84%, 32%, 1);
+  --color-teal-700: hsla(175, 77%, 26%, 1);
+  --color-teal-800: hsla(176, 69%, 22%, 1);
+  --color-teal-900: hsla(176, 61%, 19%, 1);
+  --color-teal-950: hsla(179, 84%, 10%, 1);
+  --color-cyan-50: hsla(183, 100%, 96%, 1);
+  --color-cyan-100: hsla(185, 96%, 90%, 1);
+  --color-cyan-200: hsla(186, 94%, 82%, 1);
+  --color-cyan-300: hsla(187, 92%, 69%, 1);
+  --color-cyan-400: hsla(188, 86%, 53%, 1);
+  --color-cyan-500: hsla(189, 94%, 43%, 1);
+  --color-cyan-600: hsla(192, 91%, 36%, 1);
+  --color-cyan-700: hsla(193, 82%, 31%, 1);
+  --color-cyan-800: hsla(194, 70%, 27%, 1);
+  --color-cyan-900: hsla(196, 64%, 24%, 1);
+  --color-cyan-950: hsla(197, 79%, 15%, 1);
+  --color-sky-50: hsla(204, 100%, 97%, 1);
+  --color-sky-100: hsla(204, 94%, 94%, 1);
+  --color-sky-200: hsla(201, 94%, 86%, 1);
+  --color-sky-300: hsla(199, 95%, 74%, 1);
+  --color-sky-400: hsla(198, 93%, 60%, 1);
+  --color-sky-500: hsla(199, 89%, 48%, 1);
+  --color-sky-600: hsla(200, 98%, 39%, 1);
+  --color-sky-700: hsla(201, 96%, 32%, 1);
+  --color-sky-800: hsla(201, 90%, 27%, 1);
+  --color-sky-900: hsla(202, 80%, 24%, 1);
+  --color-sky-950: hsla(204, 80%, 16%, 1);
+  --color-blue-50: hsla(214, 100%, 97%, 1);
+  --color-blue-100: hsla(214, 95%, 93%, 1);
+  --color-blue-200: hsla(213, 97%, 87%, 1);
+  --color-blue-300: hsla(212, 96%, 78%, 1);
+  --color-blue-400: hsla(213, 94%, 68%, 1);
+  --color-blue-500: hsla(217, 91%, 60%, 1);
+  --color-blue-600: hsla(221, 83%, 53%, 1);
+  --color-blue-700: hsla(224, 76%, 48%, 1);
+  --color-blue-800: hsla(226, 71%, 40%, 1);
+  --color-blue-900: hsla(224, 64%, 33%, 1);
+  --color-blue-950: hsla(226, 57%, 21%, 1);
+  --color-indigo-50: hsla(226, 100%, 97%, 1);
+  --color-indigo-100: hsla(226, 100%, 94%, 1);
+  --color-indigo-200: hsla(228, 96%, 89%, 1);
+  --color-indigo-300: hsla(230, 94%, 82%, 1);
+  --color-indigo-400: hsla(234, 89%, 74%, 1);
+  --color-indigo-500: hsla(239, 84%, 67%, 1);
+  --color-indigo-600: hsla(243, 75%, 59%, 1);
+  --color-indigo-700: hsla(245, 58%, 51%, 1);
+  --color-indigo-800: hsla(244, 55%, 41%, 1);
+  --color-indigo-900: hsla(242, 47%, 34%, 1);
+  --color-indigo-950: hsla(244, 47%, 20%, 1);
+  --color-violet-50: hsla(250, 100%, 98%, 1);
+  --color-violet-100: hsla(251, 91%, 95%, 1);
+  --color-violet-200: hsla(251, 95%, 92%, 1);
+  --color-violet-300: hsla(253, 95%, 85%, 1);
+  --color-violet-400: hsla(255, 92%, 76%, 1);
+  --color-violet-500: hsla(258, 90%, 66%, 1);
+  --color-violet-600: hsla(262, 83%, 58%, 1);
+  --color-violet-700: hsla(263, 70%, 50%, 1);
+  --color-violet-800: hsla(263, 69%, 42%, 1);
+  --color-violet-900: hsla(264, 67%, 35%, 1);
+  --color-violet-950: hsla(262, 78%, 23%, 1);
+  --color-purple-50: hsla(270, 100%, 98%, 1);
+  --color-purple-100: hsla(269, 100%, 95%, 1);
+  --color-purple-200: hsla(269, 100%, 92%, 1);
+  --color-purple-300: hsla(269, 97%, 85%, 1);
+  --color-purple-400: hsla(270, 95%, 75%, 1);
+  --color-purple-500: hsla(271, 91%, 65%, 1);
+  --color-purple-600: hsla(271, 81%, 56%, 1);
+  --color-purple-700: hsla(272, 72%, 47%, 1);
+  --color-purple-800: hsla(273, 67%, 39%, 1);
+  --color-purple-900: hsla(274, 66%, 32%, 1);
+  --color-purple-950: hsla(274, 87%, 21%, 1);
+  --color-fuchsia-50: hsla(289, 100%, 98%, 1);
+  --color-fuchsia-100: hsla(287, 100%, 95%, 1);
+  --color-fuchsia-200: hsla(288, 96%, 91%, 1);
+  --color-fuchsia-300: hsla(291, 93%, 83%, 1);
+  --color-fuchsia-400: hsla(292, 91%, 73%, 1);
+  --color-fuchsia-500: hsla(292, 84%, 61%, 1);
+  --color-fuchsia-600: hsla(293, 69%, 49%, 1);
+  --color-fuchsia-700: hsla(295, 72%, 40%, 1);
+  --color-fuchsia-800: hsla(295, 70%, 33%, 1);
+  --color-fuchsia-900: hsla(297, 64%, 28%, 1);
+  --color-fuchsia-950: hsla(297, 90%, 16%, 1);
+  --color-pink-50: hsla(327, 73%, 97%, 1);
+  --color-pink-100: hsla(326, 78%, 95%, 1);
+  --color-pink-200: hsla(326, 85%, 90%, 1);
+  --color-pink-300: hsla(327, 87%, 82%, 1);
+  --color-pink-400: hsla(329, 86%, 70%, 1);
+  --color-pink-500: hsla(330, 81%, 60%, 1);
+  --color-pink-600: hsla(333, 71%, 51%, 1);
+  --color-pink-700: hsla(335, 78%, 42%, 1);
+  --color-pink-800: hsla(336, 74%, 35%, 1);
+  --color-pink-900: hsla(336, 69%, 30%, 1);
+  --color-pink-950: hsla(336, 84%, 17%, 1);
+  --color-rose-50: hsla(356, 100%, 97%, 1);
+  --color-rose-100: hsla(356, 100%, 95%, 1);
+  --color-rose-200: hsla(353, 96%, 90%, 1);
+  --color-rose-300: hsla(353, 96%, 82%, 1);
+  --color-rose-400: hsla(351, 95%, 71%, 1);
+  --color-rose-500: hsla(350, 89%, 60%, 1);
+  --color-rose-600: hsla(347, 77%, 50%, 1);
+  --color-rose-700: hsla(345, 83%, 41%, 1);
+  --color-rose-800: hsla(343, 80%, 35%, 1);
+  --color-rose-900: hsla(342, 75%, 30%, 1);
+  --color-rose-950: hsla(343, 88%, 16%, 1);
+  --color-brand-50: hsla(132, 64%, 97%, 1);
+  --color-brand-100: hsla(132, 64%, 93%, 1);
+  --color-brand-200: hsla(132, 64%, 85%, 1);
+  --color-brand-300: hsla(132, 64%, 73%, 1);
+  --color-brand-400: hsla(132, 64%, 63%, 1);
+  --color-brand-500: hsla(132, 64%, 53%, 1);
+  --color-brand-600: hsla(132, 64%, 43%, 1);
+  --color-brand-700: hsla(132, 64%, 33%, 1);
+  --color-brand-800: hsla(132, 64%, 23%, 1);
+  --color-brand-900: hsla(132, 64%, 13%, 1);
+  --color-brand-950: hsla(132, 64%, 8%, 1);
 
   /* ==================== */
-  /* Spacing & Sizing（自定义尺寸，额外扩展） */
+  /* Semantic Colors */
   /* ==================== */
-
-  --spacing-5xs: var(--cs-size-5xs);
-  --spacing-4xs: var(--cs-size-4xs);
-  --spacing-3xs: var(--cs-size-3xs);
-  --spacing-2xs: var(--cs-size-2xs);
-  --spacing-xs: var(--cs-size-xs);
-  --spacing-sm: var(--cs-size-sm);
-  --spacing-md: var(--cs-size-md);
-  --spacing-lg: var(--cs-size-lg);
-  --spacing-xl: var(--cs-size-xl);
-  --spacing-2xl: var(--cs-size-2xl);
-  --spacing-3xl: var(--cs-size-3xl);
-  --spacing-4xl: var(--cs-size-4xl);
-  --spacing-5xl: var(--cs-size-5xl);
-  --spacing-6xl: var(--cs-size-6xl);
-  --spacing-7xl: var(--cs-size-7xl);
-  --spacing-8xl: var(--cs-size-8xl);
+  --color-primary: hsla(132, 64%, 53%, 1);
+  --color-primary-hover: hsla(132, 64%, 73%, 1);
+  --color-destructive: hsla(0, 84%, 60%, 1);
+  --color-destructive-hover: hsla(0, 91%, 71%, 1);
+  --color-background: hsla(0, 0%, 98%, 1);
+  --color-background-subtle: hsla(0, 0%, 0%, 0.02);
+  --color-foreground: hsla(0, 0%, 0%, 0.9);
+  --color-foreground-secondary: hsla(0, 0%, 0%, 0.6);
+  --color-foreground-muted: hsla(0, 0%, 0%, 0.4);
+  --color-card: hsla(0, 0%, 100%, 1);
+  --color-popover: hsla(0, 0%, 100%, 1);
+  --color-border: hsla(0, 0%, 0%, 0.1);
+  --color-border-hover: hsla(0, 0%, 0%, 0.2);
+  --color-border-active: hsla(0, 0%, 0%, 0.3);
+  --color-ring: color-mix(in srgb, hsla(132, 64%, 53%, 1) 40%, transparent);
+  --color-secondary: hsla(0, 0%, 0%, 0.05);
+  --color-secondary-hover: hsla(0, 0%, 0%, 0.85);
+  --color-secondary-active: hsla(0, 0%, 0%, 0.7);
+  --color-muted: hsla(0, 0%, 0%, 0.05);
+  --color-accent: hsla(0, 0%, 0%, 0.05);
+  --color-ghost-hover: hsla(0, 0%, 0%, 0.05);
+  --color-ghost-active: hsla(0, 0%, 0%, 0.1);
+  --color-sidebar: hsla(0, 0%, 100%, 1);
+  --color-sidebar-accent: hsla(0, 0%, 0%, 0.05);
+  --color-border-width-sm: 1px;
+  --color-border-width-md: 2px;
+  --color-border-width-lg: 3px;
 
   /* ==================== */
-  /* Border Radius（自定义圆角，额外扩展） */
+  /* Status Colors */
   /* ==================== */
+  --color-error-base: hsla(0, 84%, 60%, 1);
+  --color-error-text: hsla(0, 70%, 35%, 1);
+  --color-error-bg: hsla(0, 86%, 97%, 1);
+  --color-error-text-hover: hsla(0, 74%, 42%, 1);
+  --color-error-bg-hover: hsla(0, 93%, 94%, 1);
+  --color-error-border: hsla(0, 96%, 89%, 1);
+  --color-error-border-hover: hsla(0, 94%, 82%, 1);
+  --color-error-active: hsla(0, 72%, 51%, 1);
+  --color-success-base: hsla(142, 71%, 45%, 1);
+  --color-success-text-hover: hsla(142, 72%, 29%, 1);
+  --color-success-bg: hsla(138, 76%, 97%, 1);
+  --color-success-bg-hover: hsla(141, 79%, 85%, 1);
+  --color-warning-base: hsla(43, 96%, 56%, 1);
+  --color-warning-text-hover: hsla(26, 90%, 37%, 1);
+  --color-warning-bg: hsla(48, 100%, 96%, 1);
+  --color-warning-bg-hover: hsla(48, 96%, 89%, 1);
+  --color-warning-active: hsla(32, 95%, 44%, 1);
 
-  --radius-4xs: var(--cs-radius-4xs);
-  --radius-3xs: var(--cs-radius-3xs);
-  --radius-2xs: var(--cs-radius-2xs);
-  --radius-xs: var(--cs-radius-xs);
-  --radius-sm: var(--cs-radius-sm);
-  --radius-md: var(--cs-radius-md);
-  --radius-lg: var(--cs-radius-lg);
-  --radius-xl: var(--cs-radius-xl);
-  --radius-2xl: var(--cs-radius-2xl);
-  --radius-3xl: var(--cs-radius-3xl);
-  --radius-round: var(--cs-radius-round);
+  /* ==================== */
+  /* Spacing */
+  /* ==================== */
+  --spacing-5xs: 0.25rem;
+  --spacing-4xs: 0.5rem;
+  --spacing-3xs: 0.75rem;
+  --spacing-2xs: 1rem;
+  --spacing-xs: 1.5rem;
+  --spacing-sm: 2rem;
+  --spacing-md: 2.5rem;
+  --spacing-lg: 3rem;
+  --spacing-xl: 3.5rem;
+  --spacing-2xl: 4rem;
+  --spacing-3xl: 4.5rem;
+  --spacing-4xl: 5rem;
+  --spacing-5xl: 5.5rem;
+  --spacing-6xl: 6rem;
+  --spacing-7xl: 6.5rem;
+  --spacing-8xl: 7rem;
+
+  /* ==================== */
+  /* Radius */
+  /* ==================== */
+  --radius-4xs: 4px;
+  --radius-3xs: 8px;
+  --radius-2xs: 12px;
+  --radius-xs: 16px;
+  --radius-sm: 24px;
+  --radius-md: 32px;
+  --radius-lg: 2.5rem;
+  --radius-xl: 48px;
+  --radius-2xl: 56px;
+  --radius-3xl: 64px;
+  --radius-round: 999px;
+
+  /* ==================== */
+  /* Typography */
+  /* ==================== */
+  --font-family-heading: Inter;
+  --font-family-body: Inter;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-bold: 700;
+  --font-size-body-xs: 0.75rem;
+  --font-size-body-sm: 0.875rem;
+  --font-size-body-md: 1rem;
+  --font-size-body-lg: 1.125rem;
+  --font-size-heading-xs: 1.25rem;
+  --font-size-heading-sm: 1.5rem;
+  --font-size-heading-md: 2rem;
+  --font-size-heading-lg: 2.5rem;
+  --font-size-heading-xl: 3rem;
+  --font-size-heading-2xl: 3.75rem;
+  --line-height-body-xs: 1.25rem;
+  --line-height-body-sm: 1.5rem;
+  --line-height-body-md: 1.5rem;
+  --line-height-body-lg: 1.75rem;
+  --line-height-heading-xs: 2rem;
+  --line-height-heading-sm: 2.5rem;
+  --line-height-heading-md: 3rem;
+  --line-height-heading-lg: 3.75rem;
+  --line-height-heading-xl: 5rem;
+  --paragraph-spacing-body-xs: 0.75rem;
+  --paragraph-spacing-body-sm: 0.875rem;
+  --paragraph-spacing-body-md: 1rem;
+  --paragraph-spacing-body-lg: 1.125rem;
+  --paragraph-spacing-heading-xs: 1.25rem;
+  --paragraph-spacing-heading-sm: 1.5rem;
+  --paragraph-spacing-heading-md: 2rem;
+  --paragraph-spacing-heading-lg: 2.5rem;
+  --paragraph-spacing-heading-xl: 3rem;
+  --paragraph-spacing-heading-2xl: 3.75rem;
 }
 
 /* ==================== */
-/* Dark Mode 覆盖 */
+/* Dark Mode */
 /* ==================== */
-
-/* @theme dark {
-  --color-background: var(--cs-background);
-  --color-foreground: var(--cs-foreground);
-  --color-card: var(--cs-card);
-  --color-popover: var(--cs-popover);
-  --color-border: var(--cs-border);
-  --color-input: var(--cs-border);
-  --color-secondary: var(--cs-secondary);
-  --color-muted: var(--cs-muted);
-  --color-accent: var(--cs-accent);
-  --color-sidebar: var(--cs-sidebar);
-  --color-sidebar-accent: var(--cs-sidebar-accent);
-} */
+@layer theme {
+  .dark {
+    --color-background: hsla(240, 6%, 10%, 1);
+    --color-background-subtle: hsla(0, 0%, 100%, 0.02);
+    --color-foreground: hsla(0, 0%, 100%, 0.9);
+    --color-foreground-secondary: hsla(0, 0%, 100%, 0.6);
+    --color-foreground-muted: hsla(0, 0%, 100%, 0.4);
+    --color-card: hsla(0, 0%, 0%, 1);
+    --color-popover: hsla(0, 0%, 0%, 1);
+    --color-border: hsla(0, 0%, 100%, 0.1);
+    --color-border-hover: hsla(0, 0%, 100%, 0.2);
+    --color-border-active: hsla(0, 0%, 100%, 0.3);
+    --color-ring: hsla(84, 81%, 44%, 0.4);
+    --color-secondary: hsla(0, 0%, 100%, 0.1);
+    --color-secondary-hover: hsla(0, 0%, 100%, 0.2);
+    --color-secondary-active: hsla(0, 0%, 100%, 0.25);
+    --color-muted: hsla(0, 0%, 100%, 0.1);
+    --color-accent: hsla(0, 0%, 100%, 0.1);
+    --color-ghost-hover: hsla(0, 0%, 100%, 0.1);
+    --color-ghost-active: hsla(0, 0%, 100%, 0.15);
+    --color-sidebar: hsla(0, 0%, 0%, 1);
+    --color-sidebar-accent: hsla(0, 0%, 100%, 0.1);
+    --color-error-base: hsla(0, 91%, 71%, 1);
+    --color-error-text: hsla(0, 93%, 94%, 1);
+    --color-error-bg: hsla(0, 63%, 31%, 1);
+    --color-error-text-hover: hsla(0, 96%, 89%, 1);
+    --color-error-bg-hover: hsla(0, 70%, 35%, 1);
+    --color-error-border: hsla(0, 74%, 42%, 1);
+    --color-error-border-hover: hsla(0, 72%, 51%, 1);
+    --color-error-active: hsla(0, 94%, 82%, 1);
+    --color-success-base: hsla(142, 69%, 58%, 1);
+    --color-success-text-hover: hsla(141, 79%, 85%, 1);
+    --color-success-bg: hsla(144, 61%, 20%, 1);
+    --color-success-bg-hover: hsla(143, 64%, 24%, 1);
+    --color-warning-base: hsla(43, 96%, 56%, 1);
+    --color-warning-text-hover: hsla(48, 97%, 77%, 1);
+    --color-warning-bg: hsla(22, 78%, 26%, 1);
+    --color-warning-bg-hover: hsla(23, 83%, 31%, 1);
+    --color-warning-active: hsla(32, 95%, 44%, 1);
+  }
+}
 
 /* ==================== */
-/* Base Styles（可选） */
+/* Base Styles */
 /* ==================== */
-
 @layer base {
   * {
     @apply border-border outline-ring/50;
diff --git a/packages/ui/src/styles/tokens.css b/packages/ui/src/styles/tokens.css
index 663b0ba8bc..b4ab133cea 100644
--- a/packages/ui/src/styles/tokens.css
+++ b/packages/ui/src/styles/tokens.css
@@ -1,495 +1,5 @@
 /**
  * CherryStudio Design Tokens
- *
- * 基于 todocss.css 转换的设计令牌
- * - 所有变量使用 --cs-* 前缀（CherryStudio）
- * - 合并重复的 Spacing/Sizing
- * - 修正错误（如 font-weight 单位）
- * - 删除 Opacity 变量（使用 Tailwind 修饰符）
- * - 正确分离 Light/Dark Mode
  */
 
-:root {
-  /* ==================== */
-  /* Primitive Colors - Light Mode */
-  /* ==================== */
-
-  /* Neutral */
-  --cs-neutral-50: hsla(0, 0%, 98%, 1);
-  --cs-neutral-100: hsla(0, 0%, 96%, 1);
-  --cs-neutral-200: hsla(0, 0%, 90%, 1);
-  --cs-neutral-300: hsla(0, 0%, 83%, 1);
-  --cs-neutral-400: hsla(0, 0%, 64%, 1);
-  --cs-neutral-500: hsla(0, 0%, 45%, 1);
-  --cs-neutral-600: hsla(215, 14%, 34%, 1);
-  --cs-neutral-700: hsla(0, 0%, 25%, 1);
-  --cs-neutral-800: hsla(0, 0%, 15%, 1);
-  --cs-neutral-900: hsla(0, 0%, 9%, 1);
-  --cs-neutral-950: hsla(0, 0%, 4%, 1);
-
-  /* Stone */
-  --cs-stone-50: hsla(60, 9%, 98%, 1);
-  --cs-stone-100: hsla(60, 5%, 96%, 1);
-  --cs-stone-200: hsla(20, 6%, 90%, 1);
-  --cs-stone-300: hsla(24, 6%, 83%, 1);
-  --cs-stone-400: hsla(24, 5%, 64%, 1);
-  --cs-stone-500: hsla(25, 5%, 45%, 1);
-  --cs-stone-600: hsla(33, 5%, 32%, 1);
-  --cs-stone-700: hsla(30, 6%, 25%, 1);
-  --cs-stone-800: hsla(12, 6%, 15%, 1);
-  --cs-stone-900: hsla(24, 10%, 10%, 1);
-  --cs-stone-950: hsla(20, 14%, 4%, 1);
-
-  /* Zinc */
-  --cs-zinc-50: hsla(0, 0%, 98%, 1);
-  --cs-zinc-100: hsla(240, 5%, 96%, 1);
-  --cs-zinc-200: hsla(240, 6%, 90%, 1);
-  --cs-zinc-300: hsla(240, 5%, 84%, 1);
-  --cs-zinc-400: hsla(240, 5%, 65%, 1);
-  --cs-zinc-500: hsla(240, 4%, 46%, 1);
-  --cs-zinc-600: hsla(240, 5%, 34%, 1);
-  --cs-zinc-700: hsla(240, 5%, 26%, 1);
-  --cs-zinc-800: hsla(240, 4%, 16%, 1);
-  --cs-zinc-900: hsla(240, 6%, 10%, 1);
-  --cs-zinc-950: hsla(240, 10%, 4%, 1);
-
-  /* Slate */
-  --cs-slate-50: hsla(210, 40%, 98%, 1);
-  --cs-slate-100: hsla(210, 40%, 96%, 1);
-  --cs-slate-200: hsla(214, 32%, 91%, 1);
-  --cs-slate-300: hsla(213, 27%, 84%, 1);
-  --cs-slate-400: hsla(215, 20%, 65%, 1);
-  --cs-slate-500: hsla(215, 16%, 47%, 1);
-  --cs-slate-600: hsla(215, 19%, 35%, 1);
-  --cs-slate-700: hsla(215, 25%, 27%, 1);
-  --cs-slate-800: hsla(217, 33%, 17%, 1);
-  --cs-slate-900: hsla(222, 47%, 11%, 1);
-  --cs-slate-950: hsla(229, 84%, 5%, 1);
-
-  /* Gray */
-  --cs-gray-50: hsla(210, 20%, 98%, 1);
-  --cs-gray-100: hsla(220, 14%, 96%, 1);
-  --cs-gray-200: hsla(220, 13%, 91%, 1);
-  --cs-gray-300: hsla(216, 12%, 84%, 1);
-  --cs-gray-400: hsla(218, 11%, 65%, 1);
-  --cs-gray-500: hsla(220, 9%, 46%, 1);
-  --cs-gray-600: hsla(0, 0%, 32%, 1);
-  --cs-gray-700: hsla(217, 19%, 27%, 1);
-  --cs-gray-800: hsla(215, 28%, 17%, 1);
-  --cs-gray-900: hsla(221, 39%, 11%, 1);
-  --cs-gray-950: hsla(224, 71%, 4%, 1);
-
-  /* Red */
-  --cs-red-50: hsla(0, 86%, 97%, 1);
-  --cs-red-100: hsla(0, 93%, 94%, 1);
-  --cs-red-200: hsla(0, 96%, 89%, 1);
-  --cs-red-300: hsla(0, 94%, 82%, 1);
-  --cs-red-400: hsla(0, 91%, 71%, 1);
-  --cs-red-500: hsla(0, 84%, 60%, 1);
-  --cs-red-600: hsla(0, 72%, 51%, 1);
-  --cs-red-700: hsla(0, 74%, 42%, 1);
-  --cs-red-800: hsla(0, 70%, 35%, 1);
-  --cs-red-900: hsla(0, 63%, 31%, 1);
-  --cs-red-950: hsla(0, 75%, 15%, 1);
-
-  /* Orange */
-  --cs-orange-50: hsla(33, 100%, 96%, 1);
-  --cs-orange-100: hsla(34, 100%, 92%, 1);
-  --cs-orange-200: hsla(32, 98%, 83%, 1);
-  --cs-orange-300: hsla(31, 97%, 72%, 1);
-  --cs-orange-400: hsla(27, 96%, 61%, 1);
-  --cs-orange-500: hsla(25, 95%, 53%, 1);
-  --cs-orange-600: hsla(21, 90%, 48%, 1);
-  --cs-orange-700: hsla(17, 88%, 40%, 1);
-  --cs-orange-800: hsla(15, 79%, 34%, 1);
-  --cs-orange-900: hsla(15, 75%, 28%, 1);
-  --cs-orange-950: hsla(13, 81%, 15%, 1);
-
-  /* Amber */
-  --cs-amber-50: hsla(48, 100%, 96%, 1);
-  --cs-amber-100: hsla(48, 96%, 89%, 1);
-  --cs-amber-200: hsla(48, 97%, 77%, 1);
-  --cs-amber-300: hsla(46, 97%, 65%, 1);
-  --cs-amber-400: hsla(43, 96%, 56%, 1);
-  --cs-amber-500: hsla(38, 92%, 50%, 1);
-  --cs-amber-600: hsla(32, 95%, 44%, 1);
-  --cs-amber-700: hsla(26, 90%, 37%, 1);
-  --cs-amber-800: hsla(23, 83%, 31%, 1);
-  --cs-amber-900: hsla(22, 78%, 26%, 1);
-  --cs-amber-950: hsla(21, 92%, 14%, 1);
-
-  /* Yellow */
-  --cs-yellow-50: hsla(55, 92%, 95%, 1);
-  --cs-yellow-100: hsla(55, 97%, 88%, 1);
-  --cs-yellow-200: hsla(53, 98%, 77%, 1);
-  --cs-yellow-300: hsla(50, 98%, 64%, 1);
-  --cs-yellow-400: hsla(48, 96%, 53%, 1);
-  --cs-yellow-500: hsla(45, 93%, 47%, 1);
-  --cs-yellow-600: hsla(41, 96%, 40%, 1);
-  --cs-yellow-700: hsla(35, 92%, 33%, 1);
-  --cs-yellow-800: hsla(32, 81%, 29%, 1);
-  --cs-yellow-900: hsla(28, 73%, 26%, 1);
-  --cs-yellow-950: hsla(26, 83%, 14%, 1);
-
-  /* Lime (品牌主色) */
-  --cs-lime-50: hsla(78, 92%, 95%, 1);
-  --cs-lime-100: hsla(80, 89%, 89%, 1);
-  --cs-lime-200: hsla(81, 88%, 80%, 1);
-  --cs-lime-300: hsla(82, 85%, 67%, 1);
-  --cs-lime-400: hsla(83, 78%, 55%, 1);
-  --cs-lime-500: hsla(84, 81%, 44%, 1);
-  --cs-lime-600: hsla(85, 85%, 35%, 1);
-  --cs-lime-700: hsla(86, 78%, 27%, 1);
-  --cs-lime-800: hsla(86, 69%, 23%, 1);
-  --cs-lime-900: hsla(88, 61%, 20%, 1);
-  --cs-lime-950: hsla(89, 80%, 10%, 1);
-
-  /* Green */
-  --cs-green-50: hsla(138, 76%, 97%, 1);
-  --cs-green-100: hsla(141, 84%, 93%, 1);
-  --cs-green-200: hsla(141, 79%, 85%, 1);
-  --cs-green-300: hsla(142, 77%, 73%, 1);
-  --cs-green-400: hsla(142, 69%, 58%, 1);
-  --cs-green-500: hsla(142, 71%, 45%, 1);
-  --cs-green-600: hsla(142, 76%, 36%, 1);
-  --cs-green-700: hsla(142, 72%, 29%, 1);
-  --cs-green-800: hsla(143, 64%, 24%, 1);
-  --cs-green-900: hsla(144, 61%, 20%, 1);
-  --cs-green-950: hsla(145, 80%, 10%, 1);
-
-  /* Emerald */
-  --cs-emerald-50: hsla(152, 81%, 96%, 1);
-  --cs-emerald-100: hsla(149, 80%, 90%, 1);
-  --cs-emerald-200: hsla(152, 76%, 80%, 1);
-  --cs-emerald-300: hsla(156, 72%, 67%, 1);
-  --cs-emerald-400: hsla(158, 64%, 52%, 1);
-  --cs-emerald-500: hsla(160, 84%, 39%, 1);
-  --cs-emerald-600: hsla(161, 94%, 30%, 1);
-  --cs-emerald-700: hsla(163, 94%, 24%, 1);
-  --cs-emerald-800: hsla(163, 88%, 20%, 1);
-  --cs-emerald-900: hsla(164, 86%, 16%, 1);
-  --cs-emerald-950: hsla(166, 91%, 9%, 1);
-
-  /* Teal */
-  --cs-teal-50: hsla(166, 76%, 97%, 1);
-  --cs-teal-100: hsla(167, 85%, 89%, 1);
-  --cs-teal-200: hsla(168, 84%, 78%, 1);
-  --cs-teal-300: hsla(171, 77%, 64%, 1);
-  --cs-teal-400: hsla(172, 66%, 50%, 1);
-  --cs-teal-500: hsla(173, 80%, 40%, 1);
-  --cs-teal-600: hsla(175, 84%, 32%, 1);
-  --cs-teal-700: hsla(175, 77%, 26%, 1);
-  --cs-teal-800: hsla(176, 69%, 22%, 1);
-  --cs-teal-900: hsla(176, 61%, 19%, 1);
-  --cs-teal-950: hsla(179, 84%, 10%, 1);
-
-  /* Cyan */
-  --cs-cyan-50: hsla(183, 100%, 96%, 1);
-  --cs-cyan-100: hsla(185, 96%, 90%, 1);
-  --cs-cyan-200: hsla(186, 94%, 82%, 1);
-  --cs-cyan-300: hsla(187, 92%, 69%, 1);
-  --cs-cyan-400: hsla(188, 86%, 53%, 1);
-  --cs-cyan-500: hsla(189, 94%, 43%, 1);
-  --cs-cyan-600: hsla(192, 91%, 36%, 1);
-  --cs-cyan-700: hsla(193, 82%, 31%, 1);
-  --cs-cyan-800: hsla(194, 70%, 27%, 1);
-  --cs-cyan-900: hsla(196, 64%, 24%, 1);
-  --cs-cyan-950: hsla(197, 79%, 15%, 1);
-
-  /* Sky */
-  --cs-sky-50: hsla(204, 100%, 97%, 1);
-  --cs-sky-100: hsla(204, 94%, 94%, 1);
-  --cs-sky-200: hsla(201, 94%, 86%, 1);
-  --cs-sky-300: hsla(199, 95%, 74%, 1);
-  --cs-sky-400: hsla(198, 93%, 60%, 1);
-  --cs-sky-500: hsla(199, 89%, 48%, 1);
-  --cs-sky-600: hsla(200, 98%, 39%, 1);
-  --cs-sky-700: hsla(201, 96%, 32%, 1);
-  --cs-sky-800: hsla(201, 90%, 27%, 1);
-  --cs-sky-900: hsla(202, 80%, 24%, 1);
-  --cs-sky-950: hsla(204, 80%, 16%, 1);
-
-  /* Blue */
-  --cs-blue-50: hsla(214, 100%, 97%, 1);
-  --cs-blue-100: hsla(214, 95%, 93%, 1);
-  --cs-blue-200: hsla(213, 97%, 87%, 1);
-  --cs-blue-300: hsla(212, 96%, 78%, 1);
-  --cs-blue-400: hsla(213, 94%, 68%, 1);
-  --cs-blue-500: hsla(217, 91%, 60%, 1);
-  --cs-blue-600: hsla(221, 83%, 53%, 1);
-  --cs-blue-700: hsla(224, 76%, 48%, 1);
-  --cs-blue-800: hsla(226, 71%, 40%, 1);
-  --cs-blue-900: hsla(224, 64%, 33%, 1);
-  --cs-blue-950: hsla(226, 57%, 21%, 1);
-
-  /* Indigo */
-  --cs-indigo-50: hsla(226, 100%, 97%, 1);
-  --cs-indigo-100: hsla(226, 100%, 94%, 1);
-  --cs-indigo-200: hsla(228, 96%, 89%, 1);
-  --cs-indigo-300: hsla(230, 94%, 82%, 1);
-  --cs-indigo-400: hsla(234, 89%, 74%, 1);
-  --cs-indigo-500: hsla(239, 84%, 67%, 1);
-  --cs-indigo-600: hsla(243, 75%, 59%, 1);
-  --cs-indigo-700: hsla(245, 58%, 51%, 1);
-  --cs-indigo-800: hsla(244, 55%, 41%, 1);
-  --cs-indigo-900: hsla(242, 47%, 34%, 1);
-  --cs-indigo-950: hsla(244, 47%, 20%, 1);
-
-  /* Violet */
-  --cs-violet-50: hsla(250, 100%, 98%, 1);
-  --cs-violet-100: hsla(251, 91%, 95%, 1);
-  --cs-violet-200: hsla(251, 95%, 92%, 1);
-  --cs-violet-300: hsla(253, 95%, 85%, 1);
-  --cs-violet-400: hsla(255, 92%, 76%, 1);
-  --cs-violet-500: hsla(258, 90%, 66%, 1);
-  --cs-violet-600: hsla(262, 83%, 58%, 1);
-  --cs-violet-700: hsla(263, 70%, 50%, 1);
-  --cs-violet-800: hsla(263, 69%, 42%, 1);
-  --cs-violet-900: hsla(264, 67%, 35%, 1);
-  --cs-violet-950: hsla(262, 78%, 23%, 1);
-
-  /* Purple */
-  --cs-purple-50: hsla(270, 100%, 98%, 1);
-  --cs-purple-100: hsla(269, 100%, 95%, 1);
-  --cs-purple-200: hsla(269, 100%, 92%, 1);
-  --cs-purple-300: hsla(269, 97%, 85%, 1);
-  --cs-purple-400: hsla(270, 95%, 75%, 1);
-  --cs-purple-500: hsla(271, 91%, 65%, 1);
-  --cs-purple-600: hsla(271, 81%, 56%, 1);
-  --cs-purple-700: hsla(272, 72%, 47%, 1);
-  --cs-purple-800: hsla(273, 67%, 39%, 1);
-  --cs-purple-900: hsla(274, 66%, 32%, 1);
-  --cs-purple-950: hsla(274, 87%, 21%, 1);
-
-  /* Fuchsia */
-  --cs-fuchsia-50: hsla(289, 100%, 98%, 1);
-  --cs-fuchsia-100: hsla(287, 100%, 95%, 1);
-  --cs-fuchsia-200: hsla(288, 96%, 91%, 1);
-  --cs-fuchsia-300: hsla(291, 93%, 83%, 1);
-  --cs-fuchsia-400: hsla(292, 91%, 73%, 1);
-  --cs-fuchsia-500: hsla(292, 84%, 61%, 1);
-  --cs-fuchsia-600: hsla(293, 69%, 49%, 1);
-  --cs-fuchsia-700: hsla(295, 72%, 40%, 1);
-  --cs-fuchsia-800: hsla(295, 70%, 33%, 1);
-  --cs-fuchsia-900: hsla(297, 64%, 28%, 1);
-  --cs-fuchsia-950: hsla(297, 90%, 16%, 1);
-
-  /* Pink */
-  --cs-pink-50: hsla(327, 73%, 97%, 1);
-  --cs-pink-100: hsla(326, 78%, 95%, 1);
-  --cs-pink-200: hsla(326, 85%, 90%, 1);
-  --cs-pink-300: hsla(327, 87%, 82%, 1);
-  --cs-pink-400: hsla(329, 86%, 70%, 1);
-  --cs-pink-500: hsla(330, 81%, 60%, 1);
-  --cs-pink-600: hsla(333, 71%, 51%, 1);
-  --cs-pink-700: hsla(335, 78%, 42%, 1);
-  --cs-pink-800: hsla(336, 74%, 35%, 1);
-  --cs-pink-900: hsla(336, 69%, 30%, 1);
-  --cs-pink-950: hsla(336, 84%, 17%, 1);
-
-  /* Rose */
-  --cs-rose-50: hsla(356, 100%, 97%, 1);
-  --cs-rose-100: hsla(356, 100%, 95%, 1);
-  --cs-rose-200: hsla(353, 96%, 90%, 1);
-  --cs-rose-300: hsla(353, 96%, 82%, 1);
-  --cs-rose-400: hsla(351, 95%, 71%, 1);
-  --cs-rose-500: hsla(350, 89%, 60%, 1);
-  --cs-rose-600: hsla(347, 77%, 50%, 1);
-  --cs-rose-700: hsla(345, 83%, 41%, 1);
-  --cs-rose-800: hsla(343, 80%, 35%, 1);
-  --cs-rose-900: hsla(342, 75%, 30%, 1);
-  --cs-rose-950: hsla(343, 88%, 16%, 1);
-
-  /* Black & White */
-  --cs-black: hsla(0, 0%, 0%, 1);
-  --cs-white: hsla(0, 0%, 100%, 1);
-
-  /* Brand (Cherry Studio 品牌专属色) */
-  --cs-brand-50: hsla(132, 64%, 97%, 1);
-  --cs-brand-100: hsla(132, 64%, 93%, 1);
-  --cs-brand-200: hsla(132, 64%, 85%, 1);
-  --cs-brand-300: hsla(132, 64%, 73%, 1);
-  --cs-brand-400: hsla(132, 64%, 63%, 1);
-  --cs-brand-500: hsla(132, 64%, 53%, 1);
-  --cs-brand-600: hsla(132, 64%, 43%, 1);
-  --cs-brand-700: hsla(132, 64%, 33%, 1);
-  --cs-brand-800: hsla(132, 64%, 23%, 1);
-  --cs-brand-900: hsla(132, 64%, 13%, 1);
-  --cs-brand-950: hsla(132, 64%, 8%, 1);
-
-  /* ==================== */
-  /* Semantic Tokens - Light Mode */
-  /* ==================== */
-
-  /* Brand Colors */
-  --cs-primary: var(--cs-brand-500);
-  --cs-primary-hover: var(--cs-brand-300);
-  --cs-destructive: var(--cs-red-500);
-  --cs-destructive-hover: var(--cs-red-400);
-  --cs-success: var(--cs-green-500);
-  --cs-warning: var(--cs-amber-500);
-
-  /* Background & Foreground */
-  --cs-background: var(--cs-zinc-50);
-  --cs-background-subtle: hsla(0, 0%, 0%, 0.02);
-  --cs-foreground: hsla(0, 0%, 0%, 0.9);
-  --cs-foreground-secondary: hsla(0, 0%, 0%, 0.6);
-  --cs-foreground-muted: hsla(0, 0%, 0%, 0.4);
-
-  /* Card & Popover */
-  --cs-card: var(--cs-white);
-  --cs-popover: var(--cs-white);
-
-  /* Border */
-  --cs-border: hsla(0, 0%, 0%, 0.1);
-  --cs-border-hover: hsla(0, 0%, 0%, 0.2);
-  --cs-border-active: hsla(0, 0%, 0%, 0.3);
-
-  /* Ring (Focus) */
-  --cs-ring: color-mix(in srgb, var(--cs-primary) 40%, transparent);
-
-  /* UI Element Colors */
-  --cs-secondary: hsla(0, 0%, 0%, 0.05); /* Secondary Button Background */
-  --cs-secondary-hover: hsla(0, 0%, 0%, 0.85);
-  --cs-secondary-active: hsla(0, 0%, 0%, 0.7);
-  --cs-muted: hsla(0, 0%, 0%, 0.05); /* Muted/Subtle Background */
-  --cs-accent: hsla(0, 0%, 0%, 0.05); /* Accent Background */
-  --cs-ghost-hover: hsla(0, 0%, 0%, 0.05); /* Ghost Button Hover */
-  --cs-ghost-active: hsla(0, 0%, 0%, 0.1); /* Ghost Button Active */
-
-  /* Sidebar */
-  --cs-sidebar: var(--cs-white);
-  --cs-sidebar-accent: hsla(0, 0%, 0%, 0.05);
-
-  /* ==================== */
-  /* Spacing & Sizing (合并) */
-  /* ==================== */
-
-  --cs-size-5xs: 0.25rem; /* 4px */
-  --cs-size-4xs: 0.5rem; /* 8px */
-  --cs-size-3xs: 0.75rem; /* 12px */
-  --cs-size-2xs: 1rem; /* 16px */
-  --cs-size-xs: 1.5rem; /* 24px */
-  --cs-size-sm: 2rem; /* 32px */
-  --cs-size-md: 2.5rem; /* 40px */
-  --cs-size-lg: 3rem; /* 48px */
-  --cs-size-xl: 3.5rem; /* 56px */
-  --cs-size-2xl: 4rem; /* 64px */
-  --cs-size-3xl: 4.5rem; /* 72px */
-  --cs-size-4xl: 5rem; /* 80px */
-  --cs-size-5xl: 5.5rem; /* 88px */
-  --cs-size-6xl: 6rem; /* 96px */
-  --cs-size-7xl: 6.5rem; /* 104px */
-  --cs-size-8xl: 7rem; /* 112px */
-
-  /* ==================== */
-  /* Border Radius */
-  /* ==================== */
-
-  --cs-radius-4xs: 4px; /* 4px */
-  --cs-radius-3xs: 8px; /* 8px */
-  --cs-radius-2xs: 12px; /* 12px */
-  --cs-radius-xs: 16px; /* 16px */
-  --cs-radius-sm: 24px; /* 24px */
-  --cs-radius-md: 32px; /* 32px */
-  --cs-radius-lg: 2.5rem; /* 40px */
-  --cs-radius-xl: 48px; /* 48px */
-  --cs-radius-2xl: 56px; /* 56px */
-  --cs-radius-3xl: 64px; /* 64px */
-  --cs-radius-round: 999px; /* 保持 px，因为是特殊值 */
-
-  /* Border Width */
-  --cs-border-width-sm: 1px; /* 1px */
-  --cs-border-width-md: 2px; /* 2px */
-  --cs-border-width-lg: 3px; /* 3px */
-
-  /* ==================== */
-  /* Typography */
-  /* ==================== */
-
-  /* Font Families */
-  --cs-font-family-heading: Inter;
-  --cs-font-family-body: Inter;
-
-  /* Font Weights (修正单位错误) */
-  --cs-font-weight-regular: 400;
-  --cs-font-weight-medium: 500;
-  --cs-font-weight-bold: 700;
-
-  /* Font Sizes - Body */
-  --cs-font-size-body-xs: 0.75rem; /* 12px */
-  --cs-font-size-body-sm: 0.875rem; /* 14px */
-  --cs-font-size-body-md: 1rem; /* 16px */
-  --cs-font-size-body-lg: 1.125rem; /* 18px */
-
-  /* Font Sizes - Heading */
-  --cs-font-size-heading-xs: 1.25rem; /* 20px */
-  --cs-font-size-heading-sm: 1.5rem; /* 24px */
-  --cs-font-size-heading-md: 2rem; /* 32px */
-  --cs-font-size-heading-lg: 2.5rem; /* 40px */
-  --cs-font-size-heading-xl: 3rem; /* 48px */
-  --cs-font-size-heading-2xl: 3.75rem; /* 60px */
-
-  /* Line Heights - Body */
-  --cs-line-height-body-xs: 1.25rem; /* 20px */
-  --cs-line-height-body-sm: 1.5rem; /* 24px */
-  --cs-line-height-body-md: 1.5rem; /* 24px */
-  --cs-line-height-body-lg: 1.75rem; /* 28px */
-
-  /* Line Heights - Heading */
-  --cs-line-height-heading-xs: 2rem; /* 32px */
-  --cs-line-height-heading-sm: 2.5rem; /* 40px */
-  --cs-line-height-heading-md: 3rem; /* 48px */
-  --cs-line-height-heading-lg: 3.75rem; /* 60px */
-  --cs-line-height-heading-xl: 5rem; /* 80px */
-
-  /* Paragraph Spacing */
-  --cs-paragraph-spacing-body-xs: 0.75rem; /* 12px */
-  --cs-paragraph-spacing-body-sm: 0.875rem; /* 14px */
-  --cs-paragraph-spacing-body-md: 1rem; /* 16px */
-  --cs-paragraph-spacing-body-lg: 1.125rem; /* 18px */
-  --cs-paragraph-spacing-heading-xs: 1.25rem; /* 20px */
-  --cs-paragraph-spacing-heading-sm: 1.5rem; /* 24px */
-  --cs-paragraph-spacing-heading-md: 2rem; /* 32px */
-  --cs-paragraph-spacing-heading-lg: 2.5rem; /* 40px */
-  --cs-paragraph-spacing-heading-xl: 3rem; /* 48px */
-  --cs-paragraph-spacing-heading-2xl: 3.75rem; /* 60px */
-}
-
-/* ==================== */
-/* Dark Mode */
-/* ==================== */
-
-.dark {
-  /* Background & Foreground */
-  --cs-background: var(--cs-zinc-900);
-  --cs-background-subtle: hsla(0, 0%, 100%, 0.02);
-  --cs-foreground: hsla(0, 0%, 100%, 0.9);
-  --cs-foreground-secondary: hsla(0, 0%, 100%, 0.6);
-  --cs-foreground-muted: hsla(0, 0%, 100%, 0.4);
-
-  /* Card & Popover */
-  --cs-card: var(--cs-black);
-  --cs-popover: var(--cs-black);
-
-  /* Border */
-  --cs-border: hsla(0, 0%, 100%, 0.1);
-  --cs-border-hover: hsla(0, 0%, 100%, 0.2);
-  --cs-border-active: hsla(0, 0%, 100%, 0.3);
-
-  /* Ring (Focus) - 保持不变 */
-  --cs-ring: hsla(84, 81%, 44%, 0.4);
-
-  /* UI Element Colors - Dark Mode */
-  --cs-secondary: hsla(0, 0%, 100%, 0.1); /* Secondary Button Background */
-  --cs-secondary-hover: hsla(0, 0%, 100%, 0.2);
-  --cs-secondary-active: hsla(0, 0%, 100%, 0.25);
-  --cs-muted: hsla(0, 0%, 100%, 0.1); /* Muted/Subtle Background */
-  --cs-accent: hsla(0, 0%, 100%, 0.1); /* Accent Background */
-  --cs-ghost-hover: hsla(0, 0%, 100%, 0.1); /* Ghost Button Hover */
-  --cs-ghost-active: hsla(0, 0%, 100%, 0.15); /* Ghost Button Active */
-
-  /* Sidebar */
-  --cs-sidebar: var(--cs-black);
-  --cs-sidebar-accent: hsla(0, 0%, 100%, 0.1);
-}
+@import './tokens/index.css';
diff --git a/packages/ui/src/styles/tokens/colors/primitive.css b/packages/ui/src/styles/tokens/colors/primitive.css
new file mode 100644
index 0000000000..7ac9155e9d
--- /dev/null
+++ b/packages/ui/src/styles/tokens/colors/primitive.css
@@ -0,0 +1,309 @@
+/**
+ * Primitive Colors - Light Mode
+ * 基础色板 - 所有原始颜色定义
+ */
+
+:root {
+  /* Neutral */
+  --cs-neutral-50: hsla(0, 0%, 98%, 1);
+  --cs-neutral-100: hsla(0, 0%, 96%, 1);
+  --cs-neutral-200: hsla(0, 0%, 90%, 1);
+  --cs-neutral-300: hsla(0, 0%, 83%, 1);
+  --cs-neutral-400: hsla(0, 0%, 64%, 1);
+  --cs-neutral-500: hsla(0, 0%, 45%, 1);
+  --cs-neutral-600: hsla(215, 14%, 34%, 1);
+  --cs-neutral-700: hsla(0, 0%, 25%, 1);
+  --cs-neutral-800: hsla(0, 0%, 15%, 1);
+  --cs-neutral-900: hsla(0, 0%, 9%, 1);
+  --cs-neutral-950: hsla(0, 0%, 4%, 1);
+
+  /* Stone */
+  --cs-stone-50: hsla(60, 9%, 98%, 1);
+  --cs-stone-100: hsla(60, 5%, 96%, 1);
+  --cs-stone-200: hsla(20, 6%, 90%, 1);
+  --cs-stone-300: hsla(24, 6%, 83%, 1);
+  --cs-stone-400: hsla(24, 5%, 64%, 1);
+  --cs-stone-500: hsla(25, 5%, 45%, 1);
+  --cs-stone-600: hsla(33, 5%, 32%, 1);
+  --cs-stone-700: hsla(30, 6%, 25%, 1);
+  --cs-stone-800: hsla(12, 6%, 15%, 1);
+  --cs-stone-900: hsla(24, 10%, 10%, 1);
+  --cs-stone-950: hsla(20, 14%, 4%, 1);
+
+  /* Zinc */
+  --cs-zinc-50: hsla(0, 0%, 98%, 1);
+  --cs-zinc-100: hsla(240, 5%, 96%, 1);
+  --cs-zinc-200: hsla(240, 6%, 90%, 1);
+  --cs-zinc-300: hsla(240, 5%, 84%, 1);
+  --cs-zinc-400: hsla(240, 5%, 65%, 1);
+  --cs-zinc-500: hsla(240, 4%, 46%, 1);
+  --cs-zinc-600: hsla(240, 5%, 34%, 1);
+  --cs-zinc-700: hsla(240, 5%, 26%, 1);
+  --cs-zinc-800: hsla(240, 4%, 16%, 1);
+  --cs-zinc-900: hsla(240, 6%, 10%, 1);
+  --cs-zinc-950: hsla(240, 10%, 4%, 1);
+
+  /* Slate */
+  --cs-slate-50: hsla(210, 40%, 98%, 1);
+  --cs-slate-100: hsla(210, 40%, 96%, 1);
+  --cs-slate-200: hsla(214, 32%, 91%, 1);
+  --cs-slate-300: hsla(213, 27%, 84%, 1);
+  --cs-slate-400: hsla(215, 20%, 65%, 1);
+  --cs-slate-500: hsla(215, 16%, 47%, 1);
+  --cs-slate-600: hsla(215, 19%, 35%, 1);
+  --cs-slate-700: hsla(215, 25%, 27%, 1);
+  --cs-slate-800: hsla(217, 33%, 17%, 1);
+  --cs-slate-900: hsla(222, 47%, 11%, 1);
+  --cs-slate-950: hsla(229, 84%, 5%, 1);
+
+  /* Gray */
+  --cs-gray-50: hsla(210, 20%, 98%, 1);
+  --cs-gray-100: hsla(220, 14%, 96%, 1);
+  --cs-gray-200: hsla(220, 13%, 91%, 1);
+  --cs-gray-300: hsla(216, 12%, 84%, 1);
+  --cs-gray-400: hsla(218, 11%, 65%, 1);
+  --cs-gray-500: hsla(220, 9%, 46%, 1);
+  --cs-gray-600: hsla(0, 0%, 32%, 1);
+  --cs-gray-700: hsla(217, 19%, 27%, 1);
+  --cs-gray-800: hsla(215, 28%, 17%, 1);
+  --cs-gray-900: hsla(221, 39%, 11%, 1);
+  --cs-gray-950: hsla(224, 71%, 4%, 1);
+
+  /* Red */
+  --cs-red-50: hsla(0, 86%, 97%, 1);
+  --cs-red-100: hsla(0, 93%, 94%, 1);
+  --cs-red-200: hsla(0, 96%, 89%, 1);
+  --cs-red-300: hsla(0, 94%, 82%, 1);
+  --cs-red-400: hsla(0, 91%, 71%, 1);
+  --cs-red-500: hsla(0, 84%, 60%, 1);
+  --cs-red-600: hsla(0, 72%, 51%, 1);
+  --cs-red-700: hsla(0, 74%, 42%, 1);
+  --cs-red-800: hsla(0, 70%, 35%, 1);
+  --cs-red-900: hsla(0, 63%, 31%, 1);
+  --cs-red-950: hsla(0, 75%, 15%, 1);
+
+  /* Orange */
+  --cs-orange-50: hsla(33, 100%, 96%, 1);
+  --cs-orange-100: hsla(34, 100%, 92%, 1);
+  --cs-orange-200: hsla(32, 98%, 83%, 1);
+  --cs-orange-300: hsla(31, 97%, 72%, 1);
+  --cs-orange-400: hsla(27, 96%, 61%, 1);
+  --cs-orange-500: hsla(25, 95%, 53%, 1);
+  --cs-orange-600: hsla(21, 90%, 48%, 1);
+  --cs-orange-700: hsla(17, 88%, 40%, 1);
+  --cs-orange-800: hsla(15, 79%, 34%, 1);
+  --cs-orange-900: hsla(15, 75%, 28%, 1);
+  --cs-orange-950: hsla(13, 81%, 15%, 1);
+
+  /* Amber */
+  --cs-amber-50: hsla(48, 100%, 96%, 1);
+  --cs-amber-100: hsla(48, 96%, 89%, 1);
+  --cs-amber-200: hsla(48, 97%, 77%, 1);
+  --cs-amber-300: hsla(46, 97%, 65%, 1);
+  --cs-amber-400: hsla(43, 96%, 56%, 1);
+  --cs-amber-500: hsla(38, 92%, 50%, 1);
+  --cs-amber-600: hsla(32, 95%, 44%, 1);
+  --cs-amber-700: hsla(26, 90%, 37%, 1);
+  --cs-amber-800: hsla(23, 83%, 31%, 1);
+  --cs-amber-900: hsla(22, 78%, 26%, 1);
+  --cs-amber-950: hsla(21, 92%, 14%, 1);
+
+  /* Yellow */
+  --cs-yellow-50: hsla(55, 92%, 95%, 1);
+  --cs-yellow-100: hsla(55, 97%, 88%, 1);
+  --cs-yellow-200: hsla(53, 98%, 77%, 1);
+  --cs-yellow-300: hsla(50, 98%, 64%, 1);
+  --cs-yellow-400: hsla(48, 96%, 53%, 1);
+  --cs-yellow-500: hsla(45, 93%, 47%, 1);
+  --cs-yellow-600: hsla(41, 96%, 40%, 1);
+  --cs-yellow-700: hsla(35, 92%, 33%, 1);
+  --cs-yellow-800: hsla(32, 81%, 29%, 1);
+  --cs-yellow-900: hsla(28, 73%, 26%, 1);
+  --cs-yellow-950: hsla(26, 83%, 14%, 1);
+
+  /* Lime (品牌主色) */
+  --cs-lime-50: hsla(78, 92%, 95%, 1);
+  --cs-lime-100: hsla(80, 89%, 89%, 1);
+  --cs-lime-200: hsla(81, 88%, 80%, 1);
+  --cs-lime-300: hsla(82, 85%, 67%, 1);
+  --cs-lime-400: hsla(83, 78%, 55%, 1);
+  --cs-lime-500: hsla(84, 81%, 44%, 1);
+  --cs-lime-600: hsla(85, 85%, 35%, 1);
+  --cs-lime-700: hsla(86, 78%, 27%, 1);
+  --cs-lime-800: hsla(86, 69%, 23%, 1);
+  --cs-lime-900: hsla(88, 61%, 20%, 1);
+  --cs-lime-950: hsla(89, 80%, 10%, 1);
+
+  /* Green */
+  --cs-green-50: hsla(138, 76%, 97%, 1);
+  --cs-green-100: hsla(141, 84%, 93%, 1);
+  --cs-green-200: hsla(141, 79%, 85%, 1);
+  --cs-green-300: hsla(142, 77%, 73%, 1);
+  --cs-green-400: hsla(142, 69%, 58%, 1);
+  --cs-green-500: hsla(142, 71%, 45%, 1);
+  --cs-green-600: hsla(142, 76%, 36%, 1);
+  --cs-green-700: hsla(142, 72%, 29%, 1);
+  --cs-green-800: hsla(143, 64%, 24%, 1);
+  --cs-green-900: hsla(144, 61%, 20%, 1);
+  --cs-green-950: hsla(145, 80%, 10%, 1);
+
+  /* Emerald */
+  --cs-emerald-50: hsla(152, 81%, 96%, 1);
+  --cs-emerald-100: hsla(149, 80%, 90%, 1);
+  --cs-emerald-200: hsla(152, 76%, 80%, 1);
+  --cs-emerald-300: hsla(156, 72%, 67%, 1);
+  --cs-emerald-400: hsla(158, 64%, 52%, 1);
+  --cs-emerald-500: hsla(160, 84%, 39%, 1);
+  --cs-emerald-600: hsla(161, 94%, 30%, 1);
+  --cs-emerald-700: hsla(163, 94%, 24%, 1);
+  --cs-emerald-800: hsla(163, 88%, 20%, 1);
+  --cs-emerald-900: hsla(164, 86%, 16%, 1);
+  --cs-emerald-950: hsla(166, 91%, 9%, 1);
+
+  /* Teal */
+  --cs-teal-50: hsla(166, 76%, 97%, 1);
+  --cs-teal-100: hsla(167, 85%, 89%, 1);
+  --cs-teal-200: hsla(168, 84%, 78%, 1);
+  --cs-teal-300: hsla(171, 77%, 64%, 1);
+  --cs-teal-400: hsla(172, 66%, 50%, 1);
+  --cs-teal-500: hsla(173, 80%, 40%, 1);
+  --cs-teal-600: hsla(175, 84%, 32%, 1);
+  --cs-teal-700: hsla(175, 77%, 26%, 1);
+  --cs-teal-800: hsla(176, 69%, 22%, 1);
+  --cs-teal-900: hsla(176, 61%, 19%, 1);
+  --cs-teal-950: hsla(179, 84%, 10%, 1);
+
+  /* Cyan */
+  --cs-cyan-50: hsla(183, 100%, 96%, 1);
+  --cs-cyan-100: hsla(185, 96%, 90%, 1);
+  --cs-cyan-200: hsla(186, 94%, 82%, 1);
+  --cs-cyan-300: hsla(187, 92%, 69%, 1);
+  --cs-cyan-400: hsla(188, 86%, 53%, 1);
+  --cs-cyan-500: hsla(189, 94%, 43%, 1);
+  --cs-cyan-600: hsla(192, 91%, 36%, 1);
+  --cs-cyan-700: hsla(193, 82%, 31%, 1);
+  --cs-cyan-800: hsla(194, 70%, 27%, 1);
+  --cs-cyan-900: hsla(196, 64%, 24%, 1);
+  --cs-cyan-950: hsla(197, 79%, 15%, 1);
+
+  /* Sky */
+  --cs-sky-50: hsla(204, 100%, 97%, 1);
+  --cs-sky-100: hsla(204, 94%, 94%, 1);
+  --cs-sky-200: hsla(201, 94%, 86%, 1);
+  --cs-sky-300: hsla(199, 95%, 74%, 1);
+  --cs-sky-400: hsla(198, 93%, 60%, 1);
+  --cs-sky-500: hsla(199, 89%, 48%, 1);
+  --cs-sky-600: hsla(200, 98%, 39%, 1);
+  --cs-sky-700: hsla(201, 96%, 32%, 1);
+  --cs-sky-800: hsla(201, 90%, 27%, 1);
+  --cs-sky-900: hsla(202, 80%, 24%, 1);
+  --cs-sky-950: hsla(204, 80%, 16%, 1);
+
+  /* Blue */
+  --cs-blue-50: hsla(214, 100%, 97%, 1);
+  --cs-blue-100: hsla(214, 95%, 93%, 1);
+  --cs-blue-200: hsla(213, 97%, 87%, 1);
+  --cs-blue-300: hsla(212, 96%, 78%, 1);
+  --cs-blue-400: hsla(213, 94%, 68%, 1);
+  --cs-blue-500: hsla(217, 91%, 60%, 1);
+  --cs-blue-600: hsla(221, 83%, 53%, 1);
+  --cs-blue-700: hsla(224, 76%, 48%, 1);
+  --cs-blue-800: hsla(226, 71%, 40%, 1);
+  --cs-blue-900: hsla(224, 64%, 33%, 1);
+  --cs-blue-950: hsla(226, 57%, 21%, 1);
+
+  /* Indigo */
+  --cs-indigo-50: hsla(226, 100%, 97%, 1);
+  --cs-indigo-100: hsla(226, 100%, 94%, 1);
+  --cs-indigo-200: hsla(228, 96%, 89%, 1);
+  --cs-indigo-300: hsla(230, 94%, 82%, 1);
+  --cs-indigo-400: hsla(234, 89%, 74%, 1);
+  --cs-indigo-500: hsla(239, 84%, 67%, 1);
+  --cs-indigo-600: hsla(243, 75%, 59%, 1);
+  --cs-indigo-700: hsla(245, 58%, 51%, 1);
+  --cs-indigo-800: hsla(244, 55%, 41%, 1);
+  --cs-indigo-900: hsla(242, 47%, 34%, 1);
+  --cs-indigo-950: hsla(244, 47%, 20%, 1);
+
+  /* Violet */
+  --cs-violet-50: hsla(250, 100%, 98%, 1);
+  --cs-violet-100: hsla(251, 91%, 95%, 1);
+  --cs-violet-200: hsla(251, 95%, 92%, 1);
+  --cs-violet-300: hsla(253, 95%, 85%, 1);
+  --cs-violet-400: hsla(255, 92%, 76%, 1);
+  --cs-violet-500: hsla(258, 90%, 66%, 1);
+  --cs-violet-600: hsla(262, 83%, 58%, 1);
+  --cs-violet-700: hsla(263, 70%, 50%, 1);
+  --cs-violet-800: hsla(263, 69%, 42%, 1);
+  --cs-violet-900: hsla(264, 67%, 35%, 1);
+  --cs-violet-950: hsla(262, 78%, 23%, 1);
+
+  /* Purple */
+  --cs-purple-50: hsla(270, 100%, 98%, 1);
+  --cs-purple-100: hsla(269, 100%, 95%, 1);
+  --cs-purple-200: hsla(269, 100%, 92%, 1);
+  --cs-purple-300: hsla(269, 97%, 85%, 1);
+  --cs-purple-400: hsla(270, 95%, 75%, 1);
+  --cs-purple-500: hsla(271, 91%, 65%, 1);
+  --cs-purple-600: hsla(271, 81%, 56%, 1);
+  --cs-purple-700: hsla(272, 72%, 47%, 1);
+  --cs-purple-800: hsla(273, 67%, 39%, 1);
+  --cs-purple-900: hsla(274, 66%, 32%, 1);
+  --cs-purple-950: hsla(274, 87%, 21%, 1);
+
+  /* Fuchsia */
+  --cs-fuchsia-50: hsla(289, 100%, 98%, 1);
+  --cs-fuchsia-100: hsla(287, 100%, 95%, 1);
+  --cs-fuchsia-200: hsla(288, 96%, 91%, 1);
+  --cs-fuchsia-300: hsla(291, 93%, 83%, 1);
+  --cs-fuchsia-400: hsla(292, 91%, 73%, 1);
+  --cs-fuchsia-500: hsla(292, 84%, 61%, 1);
+  --cs-fuchsia-600: hsla(293, 69%, 49%, 1);
+  --cs-fuchsia-700: hsla(295, 72%, 40%, 1);
+  --cs-fuchsia-800: hsla(295, 70%, 33%, 1);
+  --cs-fuchsia-900: hsla(297, 64%, 28%, 1);
+  --cs-fuchsia-950: hsla(297, 90%, 16%, 1);
+
+  /* Pink */
+  --cs-pink-50: hsla(327, 73%, 97%, 1);
+  --cs-pink-100: hsla(326, 78%, 95%, 1);
+  --cs-pink-200: hsla(326, 85%, 90%, 1);
+  --cs-pink-300: hsla(327, 87%, 82%, 1);
+  --cs-pink-400: hsla(329, 86%, 70%, 1);
+  --cs-pink-500: hsla(330, 81%, 60%, 1);
+  --cs-pink-600: hsla(333, 71%, 51%, 1);
+  --cs-pink-700: hsla(335, 78%, 42%, 1);
+  --cs-pink-800: hsla(336, 74%, 35%, 1);
+  --cs-pink-900: hsla(336, 69%, 30%, 1);
+  --cs-pink-950: hsla(336, 84%, 17%, 1);
+
+  /* Rose */
+  --cs-rose-50: hsla(356, 100%, 97%, 1);
+  --cs-rose-100: hsla(356, 100%, 95%, 1);
+  --cs-rose-200: hsla(353, 96%, 90%, 1);
+  --cs-rose-300: hsla(353, 96%, 82%, 1);
+  --cs-rose-400: hsla(351, 95%, 71%, 1);
+  --cs-rose-500: hsla(350, 89%, 60%, 1);
+  --cs-rose-600: hsla(347, 77%, 50%, 1);
+  --cs-rose-700: hsla(345, 83%, 41%, 1);
+  --cs-rose-800: hsla(343, 80%, 35%, 1);
+  --cs-rose-900: hsla(342, 75%, 30%, 1);
+  --cs-rose-950: hsla(343, 88%, 16%, 1);
+
+  /* Black & White */
+  --cs-black: hsla(0, 0%, 0%, 1);
+  --cs-white: hsla(0, 0%, 100%, 1);
+
+  /* Brand (Cherry Studio 品牌专属色) */
+  --cs-brand-50: hsla(132, 64%, 97%, 1);
+  --cs-brand-100: hsla(132, 64%, 93%, 1);
+  --cs-brand-200: hsla(132, 64%, 85%, 1);
+  --cs-brand-300: hsla(132, 64%, 73%, 1);
+  --cs-brand-400: hsla(132, 64%, 63%, 1);
+  --cs-brand-500: hsla(132, 64%, 53%, 1);
+  --cs-brand-600: hsla(132, 64%, 43%, 1);
+  --cs-brand-700: hsla(132, 64%, 33%, 1);
+  --cs-brand-800: hsla(132, 64%, 23%, 1);
+  --cs-brand-900: hsla(132, 64%, 13%, 1);
+  --cs-brand-950: hsla(132, 64%, 8%, 1);
+}
diff --git a/packages/ui/src/styles/tokens/colors/semantic.css b/packages/ui/src/styles/tokens/colors/semantic.css
new file mode 100644
index 0000000000..0291c108f3
--- /dev/null
+++ b/packages/ui/src/styles/tokens/colors/semantic.css
@@ -0,0 +1,81 @@
+/**
+ * Semantic Colors - Light Mode
+ * 语义化颜色 - 基于 Primitive Colors 的语义化映射
+ */
+
+:root {
+  /* Brand Colors */
+  --cs-primary: var(--cs-brand-500);
+  --cs-primary-hover: var(--cs-brand-300);
+  --cs-destructive: var(--cs-red-500);
+  --cs-destructive-hover: var(--cs-red-400);
+  --cs-success: var(--cs-green-500);
+  --cs-warning: var(--cs-amber-500);
+
+  /* Background & Foreground */
+  --cs-background: var(--cs-zinc-50);
+  --cs-background-subtle: hsla(0, 0%, 0%, 0.02);
+  --cs-foreground: hsla(0, 0%, 0%, 0.9);
+  --cs-foreground-secondary: hsla(0, 0%, 0%, 0.6);
+  --cs-foreground-muted: hsla(0, 0%, 0%, 0.4);
+
+  /* Card & Popover */
+  --cs-card: var(--cs-white);
+  --cs-popover: var(--cs-white);
+
+  /* Border */
+  --cs-border: hsla(0, 0%, 0%, 0.1);
+  --cs-border-hover: hsla(0, 0%, 0%, 0.2);
+  --cs-border-active: hsla(0, 0%, 0%, 0.3);
+
+  /* Ring (Focus) */
+  --cs-ring: color-mix(in srgb, var(--cs-primary) 40%, transparent);
+
+  /* UI Element Colors */
+  --cs-secondary: hsla(0, 0%, 0%, 0.05); /* Secondary Button Background */
+  --cs-secondary-hover: hsla(0, 0%, 0%, 0.85);
+  --cs-secondary-active: hsla(0, 0%, 0%, 0.7);
+  --cs-muted: hsla(0, 0%, 0%, 0.05); /* Muted/Subtle Background */
+  --cs-accent: hsla(0, 0%, 0%, 0.05); /* Accent Background */
+  --cs-ghost-hover: hsla(0, 0%, 0%, 0.05); /* Ghost Button Hover */
+  --cs-ghost-active: hsla(0, 0%, 0%, 0.1); /* Ghost Button Active */
+
+  /* Sidebar */
+  --cs-sidebar: var(--cs-white);
+  --cs-sidebar-accent: hsla(0, 0%, 0%, 0.05);
+}
+
+/* Dark Mode */
+.dark {
+  /* Background & Foreground */
+  --cs-background: var(--cs-zinc-900);
+  --cs-background-subtle: hsla(0, 0%, 100%, 0.02);
+  --cs-foreground: hsla(0, 0%, 100%, 0.9);
+  --cs-foreground-secondary: hsla(0, 0%, 100%, 0.6);
+  --cs-foreground-muted: hsla(0, 0%, 100%, 0.4);
+
+  /* Card & Popover */
+  --cs-card: var(--cs-black);
+  --cs-popover: var(--cs-black);
+
+  /* Border */
+  --cs-border: hsla(0, 0%, 100%, 0.1);
+  --cs-border-hover: hsla(0, 0%, 100%, 0.2);
+  --cs-border-active: hsla(0, 0%, 100%, 0.3);
+
+  /* Ring (Focus) - 保持不变 */
+  --cs-ring: hsla(84, 81%, 44%, 0.4);
+
+  /* UI Element Colors - Dark Mode */
+  --cs-secondary: hsla(0, 0%, 100%, 0.1); /* Secondary Button Background */
+  --cs-secondary-hover: hsla(0, 0%, 100%, 0.2);
+  --cs-secondary-active: hsla(0, 0%, 100%, 0.25);
+  --cs-muted: hsla(0, 0%, 100%, 0.1); /* Muted/Subtle Background */
+  --cs-accent: hsla(0, 0%, 100%, 0.1); /* Accent Background */
+  --cs-ghost-hover: hsla(0, 0%, 100%, 0.1); /* Ghost Button Hover */
+  --cs-ghost-active: hsla(0, 0%, 100%, 0.15); /* Ghost Button Active */
+
+  /* Sidebar */
+  --cs-sidebar: var(--cs-black);
+  --cs-sidebar-accent: hsla(0, 0%, 100%, 0.1);
+}
diff --git a/packages/ui/src/styles/tokens/colors/status.css b/packages/ui/src/styles/tokens/colors/status.css
new file mode 100644
index 0000000000..d49019a1b5
--- /dev/null
+++ b/packages/ui/src/styles/tokens/colors/status.css
@@ -0,0 +1,55 @@
+/**
+ * Status Colors - Light Mode & Dark Mode
+ * 状态颜色 - Error, Success, Warning
+ */
+
+:root {
+  /* Status Colors - Error */
+  --cs-error-base: var(--cs-red-500); /* #ef4444 */
+  --cs-error-text: var(--cs-red-800); /* #991b1b */
+  --cs-error-bg: var(--cs-red-50); /* #fef2f2 */
+  --cs-error-text-hover: var(--cs-red-700); /* #b91c1c */
+  --cs-error-bg-hover: var(--cs-red-100); /* #fee2e2 */
+  --cs-error-border: var(--cs-red-200); /* #fecaca */
+  --cs-error-border-hover: var(--cs-red-300); /* #fca5a5 */
+  --cs-error-active: var(--cs-red-600); /* #dc2626 */
+
+  /* Status Colors - Success */
+  --cs-success-base: var(--cs-green-500); /* #22c55e */
+  --cs-success-text-hover: var(--cs-green-700); /* #15803d */
+  --cs-success-bg: var(--cs-green-50); /* #f0fdf4 */
+  --cs-success-bg-hover: var(--cs-green-200); /* #bbf7d0 */
+
+  /* Status Colors - Warning */
+  --cs-warning-base: var(--cs-amber-400); /* #fbbf24 */
+  --cs-warning-text-hover: var(--cs-amber-700); /* #b45309 */
+  --cs-warning-bg: var(--cs-amber-50); /* #fffbeb */
+  --cs-warning-bg-hover: var(--cs-amber-100); /* #fef3c7 */
+  --cs-warning-active: var(--cs-amber-600); /* #d97706 */
+}
+
+/* Dark Mode */
+.dark {
+  /* Status Colors - Error (Dark Mode) */
+  --cs-error-base: var(--cs-red-400); /* #f87171 */
+  --cs-error-text: var(--cs-red-100); /* #fee2e2 */
+  --cs-error-bg: var(--cs-red-900); /* #7f1d1d */
+  --cs-error-text-hover: var(--cs-red-200); /* #fecaca */
+  --cs-error-bg-hover: var(--cs-red-800); /* #991b1b */
+  --cs-error-border: var(--cs-red-700); /* #b91c1c */
+  --cs-error-border-hover: var(--cs-red-600); /* #dc2626 */
+  --cs-error-active: var(--cs-red-300); /* #fca5a5 */
+
+  /* Status Colors - Success (Dark Mode) */
+  --cs-success-base: var(--cs-green-400); /* #4ade80 */
+  --cs-success-text-hover: var(--cs-green-200); /* #bbf7d0 */
+  --cs-success-bg: var(--cs-green-900); /* #14532d */
+  --cs-success-bg-hover: var(--cs-green-800); /* #166534 */
+
+  /* Status Colors - Warning (Dark Mode) */
+  --cs-warning-base: var(--cs-amber-400); /* #fbbf24 */
+  --cs-warning-text-hover: var(--cs-amber-200); /* #fde68a */
+  --cs-warning-bg: var(--cs-amber-900); /* #78350f */
+  --cs-warning-bg-hover: var(--cs-amber-800); /* #92400e */
+  --cs-warning-active: var(--cs-amber-600); /* #d97706 */
+}
diff --git a/packages/ui/src/styles/tokens/index.css b/packages/ui/src/styles/tokens/index.css
new file mode 100644
index 0000000000..83d23a8acc
--- /dev/null
+++ b/packages/ui/src/styles/tokens/index.css
@@ -0,0 +1,23 @@
+/**
+ * CherryStudio Design Tokens
+ *
+ * Design tokens based on Figma design system
+ * - All variables use --cs-* prefix (CherryStudio)
+ * - Layered architecture: Primitive → Semantic
+ * - Properly separated Light/Dark Mode
+ *
+ * File structure:
+ * - colors/primitive.css: Base color palette
+ * - colors/semantic.css: Semantic color mappings
+ * - colors/status.css: Status colors (Error, Success, Warning)
+ * - spacing.css: Spacing and sizing
+ * - radius.css: Border radius
+ * - typography.css: Typography system
+ */
+
+@import './colors/primitive.css';
+@import './colors/semantic.css';
+@import './colors/status.css';
+@import './spacing.css';
+@import './radius.css';
+@import './typography.css';
diff --git a/packages/ui/src/styles/tokens/radius.css b/packages/ui/src/styles/tokens/radius.css
new file mode 100644
index 0000000000..2a7cbaf9b1
--- /dev/null
+++ b/packages/ui/src/styles/tokens/radius.css
@@ -0,0 +1,23 @@
+/**
+ * Border Radius
+ * 圆角半径
+ */
+
+:root {
+  --cs-radius-4xs: 4px; /* 4px */
+  --cs-radius-3xs: 8px; /* 8px */
+  --cs-radius-2xs: 12px; /* 12px */
+  --cs-radius-xs: 16px; /* 16px */
+  --cs-radius-sm: 24px; /* 24px */
+  --cs-radius-md: 32px; /* 32px */
+  --cs-radius-lg: 2.5rem; /* 40px */
+  --cs-radius-xl: 48px; /* 48px */
+  --cs-radius-2xl: 56px; /* 56px */
+  --cs-radius-3xl: 64px; /* 64px */
+  --cs-radius-round: 999px; /* 保持 px，因为是特殊值 */
+
+  /* Border Width */
+  --cs-border-width-sm: 1px; /* 1px */
+  --cs-border-width-md: 2px; /* 2px */
+  --cs-border-width-lg: 3px; /* 3px */
+}
diff --git a/packages/ui/src/styles/tokens/spacing.css b/packages/ui/src/styles/tokens/spacing.css
new file mode 100644
index 0000000000..6d5d8d60fb
--- /dev/null
+++ b/packages/ui/src/styles/tokens/spacing.css
@@ -0,0 +1,23 @@
+/**
+ * Spacing & Sizing
+ * 间距与尺寸
+ */
+
+:root {
+  --cs-size-5xs: 0.25rem; /* 4px */
+  --cs-size-4xs: 0.5rem; /* 8px */
+  --cs-size-3xs: 0.75rem; /* 12px */
+  --cs-size-2xs: 1rem; /* 16px */
+  --cs-size-xs: 1.5rem; /* 24px */
+  --cs-size-sm: 2rem; /* 32px */
+  --cs-size-md: 2.5rem; /* 40px */
+  --cs-size-lg: 3rem; /* 48px */
+  --cs-size-xl: 3.5rem; /* 56px */
+  --cs-size-2xl: 4rem; /* 64px */
+  --cs-size-3xl: 4.5rem; /* 72px */
+  --cs-size-4xl: 5rem; /* 80px */
+  --cs-size-5xl: 5.5rem; /* 88px */
+  --cs-size-6xl: 6rem; /* 96px */
+  --cs-size-7xl: 6.5rem; /* 104px */
+  --cs-size-8xl: 7rem; /* 112px */
+}
diff --git a/packages/ui/src/styles/tokens/typography.css b/packages/ui/src/styles/tokens/typography.css
new file mode 100644
index 0000000000..a0c25db941
--- /dev/null
+++ b/packages/ui/src/styles/tokens/typography.css
@@ -0,0 +1,54 @@
+/**
+ * Typography
+ * 排版系统 - 字体、字号、行高、段落间距
+ */
+
+:root {
+  /* Font Families */
+  --cs-font-family-heading: Inter;
+  --cs-font-family-body: Inter;
+
+  /* Font Weights (修正单位错误) */
+  --cs-font-weight-regular: 400;
+  --cs-font-weight-medium: 500;
+  --cs-font-weight-bold: 700;
+
+  /* Font Sizes - Body */
+  --cs-font-size-body-xs: 0.75rem; /* 12px */
+  --cs-font-size-body-sm: 0.875rem; /* 14px */
+  --cs-font-size-body-md: 1rem; /* 16px */
+  --cs-font-size-body-lg: 1.125rem; /* 18px */
+
+  /* Font Sizes - Heading */
+  --cs-font-size-heading-xs: 1.25rem; /* 20px */
+  --cs-font-size-heading-sm: 1.5rem; /* 24px */
+  --cs-font-size-heading-md: 2rem; /* 32px */
+  --cs-font-size-heading-lg: 2.5rem; /* 40px */
+  --cs-font-size-heading-xl: 3rem; /* 48px */
+  --cs-font-size-heading-2xl: 3.75rem; /* 60px */
+
+  /* Line Heights - Body */
+  --cs-line-height-body-xs: 1.25rem; /* 20px */
+  --cs-line-height-body-sm: 1.5rem; /* 24px */
+  --cs-line-height-body-md: 1.5rem; /* 24px */
+  --cs-line-height-body-lg: 1.75rem; /* 28px */
+
+  /* Line Heights - Heading */
+  --cs-line-height-heading-xs: 2rem; /* 32px */
+  --cs-line-height-heading-sm: 2.5rem; /* 40px */
+  --cs-line-height-heading-md: 3rem; /* 48px */
+  --cs-line-height-heading-lg: 3.75rem; /* 60px */
+  --cs-line-height-heading-xl: 5rem; /* 80px */
+
+  /* Paragraph Spacing */
+  --cs-paragraph-spacing-body-xs: 0.75rem; /* 12px */
+  --cs-paragraph-spacing-body-sm: 0.875rem; /* 14px */
+  --cs-paragraph-spacing-body-md: 1rem; /* 16px */
+  --cs-paragraph-spacing-body-lg: 1.125rem; /* 18px */
+  --cs-paragraph-spacing-heading-xs: 1.25rem; /* 20px */
+  --cs-paragraph-spacing-heading-sm: 1.5rem; /* 24px */
+  --cs-paragraph-spacing-heading-md: 2rem; /* 32px */
+  --cs-paragraph-spacing-heading-lg: 2.5rem; /* 40px */
+  --cs-paragraph-spacing-heading-xl: 3rem; /* 48px */
+  --cs-paragraph-spacing-heading-2xl: 3.75rem; /* 60px */
+}
diff --git a/packages/ui/stories/tailwind.css b/packages/ui/stories/tailwind.css
index 5ea3861389..1cb29821f5 100644
--- a/packages/ui/stories/tailwind.css
+++ b/packages/ui/stories/tailwind.css
@@ -10,3 +10,150 @@
 
 /* Dark mode support */
 @custom-variant dark (&:is(.dark *));
+
+@import 'tw-animate-css';
+
+:root {
+  --icon: #00000099;
+
+  /* Shadcn Variables */
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --icon: #ffffff99;
+
+  /* Shadcn Dark Mode Variables */
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+/* 应用特定的变量和动画（不与 UI 库冲突） */
+@theme inline {
+  /* Icon 颜色 - 应用特定变量 */
+  --color-icon: var(--icon);
+
+  /* Shadcn Tailwind Mappings - 只映射 UI 库缺少的变量 */
+  /* 注意：--color-primary, --color-background 等核心变量由 UI 库的 theme.css 提供 */
+
+  /* Foreground colors - UI 库缺少的 */
+  --color-primary-foreground: var(--primary-foreground);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  /* Input - UI 库缺少的 */
+  --color-input: var(--input);
+
+  /* Chart colors - UI 库缺少的 */
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  /* Sidebar extensions - UI 库缺少的 */
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* 跑马灯动画 - 应用特定 */
+  --animate-marquee: marquee var(--duration) infinite linear;
+  --animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
+
+  @keyframes marquee {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(calc(-100% - var(--gap)));
+    }
+  }
+  @keyframes marquee-vertical {
+    from {
+      transform: translateY(0);
+    }
+    to {
+      transform: translateY(calc(-100% - var(--gap)));
+    }
+  }
+}
+
+@layer base {
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+}
+
+:root {
+  background-color: unset;
+}
diff --git a/src/renderer/src/assets/styles/tailwind.css b/src/renderer/src/assets/styles/tailwind.css
index 80d1649953..eaf203995c 100644
--- a/src/renderer/src/assets/styles/tailwind.css
+++ b/src/renderer/src/assets/styles/tailwind.css
@@ -3,8 +3,6 @@
 
 @import '../../../../../packages/ui/src/styles/theme.css';
 
-@custom-variant dark (&:is(.dark *));
-
 /* 如需自定义:
 1. 清晰地组织自定义 CSS 到相应的层中。
 2. 基础样式（如全局重置、链接样式）放入 base 层；
@@ -21,17 +19,89 @@
 /* 应用特定的原始变量 */
 :root {
   --icon: #00000099;
+
+  /* Shadcn Variables - 只保留 @theme inline 中使用的变量 */
+  --primary-foreground: oklch(0.985 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --input: oklch(0.922 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
 }
 
 .dark {
   --icon: #ffffff99;
+
+  /* Shadcn Dark Mode Variables - 只保留 @theme inline 中使用的变量 */
+  --primary-foreground: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --input: oklch(0.269 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
 }
 
-/* 应用特定的变量和动画（不与 UI 库冲突） */
+/* shadcn中的默认变量(排除了与ui库冲突的变量，只映射ui库缺少的变量) */
 @theme inline {
   /* Icon 颜色 - 应用特定变量 */
   --color-icon: var(--icon);
 
+  /* Shadcn Tailwind Mappings - 只映射 UI 库缺少的变量 */
+  /* 注意：--color-primary, --color-background 等核心变量由 UI 库的 theme.css 提供 */
+
+  /* Foreground colors - UI 库缺少的 */
+  --color-primary-foreground: var(--primary-foreground);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  /* Input - UI 库缺少的 */
+  --color-input: var(--input);
+
+  /* Chart colors - UI 库缺少的 */
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  /* Sidebar extensions - UI 库缺少的 */
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
   /* 跑马灯动画 - 应用特定 */
   --animate-marquee: marquee var(--duration) infinite linear;
   --animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
@@ -77,4 +147,4 @@
 
 :root {
   background-color: unset;
-}
\ No newline at end of file
+}