From 84222409678958ddbafa3b8ce453618bc4e39084 Mon Sep 17 00:00:00 2001
From: Zyy <zyycn@users.noreply.github.com>
Date: Mon, 24 Aug 2026 04:04:22 +0800
Subject: [PATCH] feat(theme): add runtime token theme editor

Introduce Seed-to-Component token derivation, isolated live previews, semantic base component theming, and responsive theme controls.

Co-authored-by: Codex <noreply@openai.com>
---
 frontend/package.json                         |    1 +
 frontend/pnpm-lock.yaml                       |   16 +
 frontend/src/App.vue                          |    3 -
 .../components/AccountGroupCheckboxGrid.vue   |    6 +-
 frontend/src/components/AccountGroupMarks.vue |    2 +-
 .../components/AccountGroupMultiSelect.vue    |   20 +-
 frontend/src/components/AppBrandMark.vue      |  117 ++
 frontend/src/components/ProviderIconGroup.vue |    8 +-
 frontend/src/components/base/BaseButton.vue   |   18 +-
 frontend/src/components/base/BaseCard.vue     |    6 +-
 frontend/src/components/base/BaseCheckbox.vue |   14 +-
 .../components/base/BaseColorPicker/color.ts  |   31 +-
 .../components/base/BaseColorPicker/index.vue |  110 +-
 .../src/components/base/BaseConfirmModal.vue  |    2 +-
 frontend/src/components/base/BaseEmpty.vue    |    8 +-
 .../src/components/base/BaseForm/FormItem.vue |    8 +-
 .../src/components/base/BaseIconButton.vue    |   18 +-
 frontend/src/components/base/BaseInput.vue    |   45 +-
 frontend/src/components/base/BaseMenuItem.vue |   10 +-
 .../src/components/base/BaseModal/index.vue   |   16 +-
 .../src/components/base/BaseNumberInput.vue   |  127 ++
 .../src/components/base/BasePageHeader.vue    |    6 +-
 frontend/src/components/base/BasePopover.vue  |    2 +-
 frontend/src/components/base/BaseRadio.vue    |   10 +-
 frontend/src/components/base/BaseRange.vue    |  142 ++
 .../src/components/base/BaseScrollbar.vue     |   16 +-
 .../src/components/base/BaseSegmented.vue     |   18 +-
 frontend/src/components/base/BaseSelect.vue   |   44 +-
 frontend/src/components/base/BaseSkeleton.vue |   38 +
 frontend/src/components/base/BaseSwitch.vue   |   12 +-
 .../base/BaseTable/BaseTablePagination.vue    |   10 +-
 .../src/components/base/BaseTable/columns.ts  |   10 +-
 .../src/components/base/BaseTable/index.vue   |   46 +-
 frontend/src/components/base/BaseTextarea.vue |   12 +-
 .../components/base/BaseToast/BaseToast.vue   |   14 +-
 frontend/src/components/charts/BaseChart.vue  |   25 +-
 frontend/src/components/charts/tooltip.ts     |    2 +-
 frontend/src/composables/useChartPalette.ts   |   30 +-
 frontend/src/composables/useThemeColor.ts     |   29 +-
 frontend/src/directives/loading.ts            |    6 +-
 .../src/layout/components/AppAboutModal.vue   |   18 +-
 frontend/src/layout/components/AppSidebar.vue |   55 +-
 .../components/FloatingSidebarToggle.vue      |    4 +-
 .../components/SystemUpdateModal/index.vue    |   66 +-
 .../components/SystemUpdateModal/presenter.ts |   12 +-
 frontend/src/layout/index.vue                 |    2 +-
 frontend/src/main.ts                          |   17 +-
 frontend/src/router/routes.ts                 |   12 +-
 frontend/src/stores/modules/theme.ts          |  330 +++++
 frontend/src/stores/modules/ui.ts             |  200 +--
 frontend/src/styles/base.css                  |   22 +-
 frontend/src/styles/index.css                 |  198 +--
 frontend/src/styles/tokens.css                |  227 +--
 frontend/src/theme/browser.ts                 |   36 +
 frontend/src/theme/constants.ts               |  215 +++
 frontend/src/theme/index.ts                   | 1214 +++++++++++++++++
 frontend/src/utils/color.ts                   |   12 +-
 .../components/AccountGroupActions.vue        |    4 +-
 .../components/AccountGroupFilters.vue        |    2 +-
 .../components/AccountGroupMetricsCell.vue    |    6 +-
 frontend/src/views/account-groups/index.vue   |    8 +-
 .../components/AccountBatchEditModal.vue      |    2 +-
 .../components/AccountConnectionTestModal.vue |   56 +-
 .../AccountProviderChooser.vue                |    4 +-
 .../components/AccountCreateModal/index.vue   |   18 +-
 .../accounts/components/AccountEditModal.vue  |    4 +-
 .../accounts/components/AccountFilters.vue    |   10 +-
 .../components/AccountIdentityCell.vue        |   16 +-
 .../components/AccountOverviewCards.vue       |    8 +-
 .../accounts/components/AccountPlanBadge.vue  |   10 +-
 .../accounts/components/AccountQuotaPanel.vue |    8 +-
 .../components/AccountQuotaPanelEntry.vue     |   20 +-
 .../components/AccountQuotaSummaryEntry.vue   |   34 +-
 .../components/AccountQuotaWindowGroup.vue    |    4 +-
 .../components/AccountResetCredits.vue        |   44 +-
 .../components/AccountStatusBadge/index.vue   |   46 +-
 .../AccountStatusBadge/presenter.ts           |   16 +-
 .../components/AccountTableActions.vue        |   14 +-
 .../accounts/components/AccountUsagePanel.vue |   32 +-
 .../AccountRequestTimeline.vue                |    2 +-
 .../components/AccountUsageWindow/index.vue   |   12 +-
 .../AccountUsageWindow/presenter.ts           |   28 +-
 .../composables/useAccountConnectionTest.ts   |    8 +-
 frontend/src/views/accounts/constants.ts      |    6 +-
 frontend/src/views/accounts/index.vue         |    4 +-
 .../api-keys/components/ApiKeyActions.vue     |    8 +-
 .../api-keys/components/ApiKeyCreateModal.vue |    8 +-
 .../api-keys/components/ApiKeyFilters.vue     |    2 +-
 .../components/ApiKeyIdentityCell.vue         |    4 +-
 .../api-keys/components/ApiKeyPrefixCell.vue  |    2 +-
 .../api-keys/components/ApiKeyScopeCell.vue   |    2 +-
 .../api-keys/components/ApiKeyStatusBadge.vue |    4 +-
 .../api-keys/components/ApiKeyUseModal.vue    |    8 +-
 .../components/AccountOverviewCard.vue        |   62 +-
 .../dashboard/components/DashboardContent.vue |  106 ++
 .../components/HealthTimelinePointPopover.vue |   32 +-
 .../views/dashboard/components/MetricCard.vue |   16 +-
 .../components/RequestHealthTimelineCard.vue  |    8 +-
 .../dashboard/components/RequestTrendCard.vue |   12 +-
 .../dashboard/components/WireProfileCard.vue  |   40 +-
 .../dashboard/composables/useDashboard.ts     |   24 +-
 .../composables/useRequestTrendChart.ts       |   30 +-
 frontend/src/views/dashboard/constants.ts     |   30 +-
 frontend/src/views/dashboard/index.vue        |   85 +-
 .../login/components/LoginBackground.vue      |   94 +-
 .../src/views/login/components/LoginPanel.vue |  123 +-
 frontend/src/views/login/index.vue            |  239 ++--
 .../settings/components/AdminApiKeyCard.vue   |   12 +-
 .../settings/components/ModelAliasesCard.vue  |   18 +-
 .../components/RotationStrategyCard.vue       |   14 +-
 .../components/backup/BackupRecordsCard.vue   |   12 +-
 .../components/backup/BackupStatusBadge.vue   |   12 +-
 .../components/backup/BackupStorageCard.vue   |    4 +-
 .../components/backup/R2GuideModal.vue        |   24 +-
 frontend/src/views/settings/index.vue         |   23 +-
 .../components/AppearanceSettingsSection.vue  |  183 +++
 .../theme/components/ThemeColorTokenField.vue |   65 +
 .../components/ThemeComponentPreview.vue      |  460 +++++++
 .../components/ThemeComponentTokenPanel.vue   |  229 ++++
 .../components/ThemeDashboardPreview.vue      |   33 +
 .../theme/components/ThemeEditorPreview.vue   |   44 +
 .../components/ThemeGlobalTokenPanel.vue      |  316 +++++
 .../components/ThemeNumberTokenField.vue      |   66 +
 .../theme/components/ThemePreviewCanvas.vue   |  133 ++
 .../theme/components/ThemePreviewScope.vue    |   65 +
 .../theme/components/ThemeTextTokenField.vue  |   44 +
 .../views/theme/composables/useThemeEditor.ts |  326 +++++
 .../composables/useThemePreviewCanvas.ts      |  216 +++
 .../src/views/theme/fixtures/dashboard.ts     |  386 ++++++
 frontend/src/views/theme/index.vue            |    9 +
 .../usage/components/OpsErrorDetailModal.vue  |   16 +-
 .../views/usage/components/OpsErrorPanel.vue  |    6 +-
 .../usage/components/UsageBillingCell.vue     |    8 +-
 .../usage/components/UsageClientIpCell.vue    |    2 +-
 .../usage/components/UsageDetailCodePanel.vue |    6 +-
 .../usage/components/UsageDetailFieldGrid.vue |    2 +-
 .../usage/components/UsageDetailPopover.vue   |    6 +-
 .../usage/components/UsageDiagnosticCard.vue  |   14 +-
 .../views/usage/components/UsageFilters.vue   |    2 +-
 .../usage/components/UsageLatencyCell.vue     |   28 +-
 .../views/usage/components/UsageModelCell.vue |    6 +-
 .../components/UsageReasoningEffortCell.vue   |    2 +-
 .../components/UsageRecordDetailModal.vue     |   22 +-
 .../usage/components/UsageRecordsTable.vue    |    8 +-
 .../usage/components/UsageStatusCodeBadge.vue |    6 +-
 .../usage/components/UsageSummaryCards.vue    |   10 +-
 .../views/usage/components/UsageTokenCell.vue |   10 +-
 frontend/src/views/usage/index.vue            |    4 +-
 frontend/src/views/usage/utils/detail.ts      |    4 +-
 frontend/src/views/usage/utils/records.ts     |    2 +-
 150 files changed, 6281 insertions(+), 1640 deletions(-)
 create mode 100644 frontend/src/components/AppBrandMark.vue
 create mode 100644 frontend/src/components/base/BaseNumberInput.vue
 create mode 100644 frontend/src/components/base/BaseRange.vue
 create mode 100644 frontend/src/components/base/BaseSkeleton.vue
 create mode 100644 frontend/src/stores/modules/theme.ts
 create mode 100644 frontend/src/theme/browser.ts
 create mode 100644 frontend/src/theme/constants.ts
 create mode 100644 frontend/src/theme/index.ts
 create mode 100644 frontend/src/views/dashboard/components/DashboardContent.vue
 create mode 100644 frontend/src/views/theme/components/AppearanceSettingsSection.vue
 create mode 100644 frontend/src/views/theme/components/ThemeColorTokenField.vue
 create mode 100644 frontend/src/views/theme/components/ThemeComponentPreview.vue
 create mode 100644 frontend/src/views/theme/components/ThemeComponentTokenPanel.vue
 create mode 100644 frontend/src/views/theme/components/ThemeDashboardPreview.vue
 create mode 100644 frontend/src/views/theme/components/ThemeEditorPreview.vue
 create mode 100644 frontend/src/views/theme/components/ThemeGlobalTokenPanel.vue
 create mode 100644 frontend/src/views/theme/components/ThemeNumberTokenField.vue
 create mode 100644 frontend/src/views/theme/components/ThemePreviewCanvas.vue
 create mode 100644 frontend/src/views/theme/components/ThemePreviewScope.vue
 create mode 100644 frontend/src/views/theme/components/ThemeTextTokenField.vue
 create mode 100644 frontend/src/views/theme/composables/useThemeEditor.ts
 create mode 100644 frontend/src/views/theme/composables/useThemePreviewCanvas.ts
 create mode 100644 frontend/src/views/theme/fixtures/dashboard.ts
 create mode 100644 frontend/src/views/theme/index.vue

diff --git a/frontend/package.json b/frontend/package.json
index 518e1def4..704b47055 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,6 +14,7 @@
     "format:check": "pnpm run lint"
   },
   "dependencies": {
+    "@ant-design/colors": "^8.0.1",
     "@boxicons/vue": "1.0.1",
     "@fontsource-variable/inter": "^5.3.0",
     "@fontsource-variable/jetbrains-mono": "^5.3.0",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 0f4035ed9..919e7ea55 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@ant-design/colors':
+        specifier: ^8.0.1
+        version: 8.0.1
       '@boxicons/vue':
         specifier: 1.0.1
         version: 1.0.1(vue@3.5.41(typescript@6.0.3))
@@ -96,6 +99,13 @@ importers:
 
 packages:
 
+  '@ant-design/colors@8.0.1':
+    resolution: {integrity: sha512-foPVl0+SWIslGUtD/xBr1p9U4AKzPhNYEseXYRRo5QSzGACYZrQbe11AYJbYfAWnWSpGBx6JjBmSeugUsD9vqQ==}
+
+  '@ant-design/fast-color@3.0.1':
+    resolution: {integrity: sha512-esKJegpW4nckh0o6kV3Tkb7NPIZYbPnnFxmQDUmL08ukXZAvV85TZBr70eGuke/CIArLaP6aw8lt9KILjnWuOw==}
+    engines: {node: '>=8.x'}
+
   '@antfu/eslint-config@9.3.0':
     resolution: {integrity: sha512-+CIC4G6MowUl1RHiT01Ah9Obo/wwVynw7uNlN8ODwEn2opo9W1KzaatCrmu4WhGGJjOkOkyT5w7kKfQ//agHrQ==}
     hasBin: true
@@ -2431,6 +2441,12 @@ packages:
 
 snapshots:
 
+  '@ant-design/colors@8.0.1':
+    dependencies:
+      '@ant-design/fast-color': 3.0.1
+
+  '@ant-design/fast-color@3.0.1': {}
+
   '@antfu/eslint-config@9.3.0(@typescript-eslint/typescript-estree@8.66.0(typescript@6.0.3))(@typescript-eslint/utils@8.66.0(eslint@10.8.1(jiti@2.7.0))(typescript@6.0.3))(@vue/compiler-sfc@3.5.41)(eslint-plugin-format@2.0.1(eslint@10.8.1(jiti@2.7.0)))(eslint-plugin-vuejs-accessibility@2.6.0(eslint@10.8.1(jiti@2.7.0))(globals@17.9.0))(eslint@10.8.1(jiti@2.7.0))(typescript@6.0.3)':
     dependencies:
       '@antfu/install-pkg': 2.0.1
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 7825528b5..1dfbad621 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -2,9 +2,6 @@
 import { RouterView } from 'vue-router'
 
 import { BaseToast } from '@/components/base/BaseToast'
-import { useUiStore } from '@/stores/modules/ui'
-
-useUiStore().initializeTheme()
 </script>
 
 <template>
diff --git a/frontend/src/components/AccountGroupCheckboxGrid.vue b/frontend/src/components/AccountGroupCheckboxGrid.vue
index 0bc884aac..a1b2d2c9c 100644
--- a/frontend/src/components/AccountGroupCheckboxGrid.vue
+++ b/frontend/src/components/AccountGroupCheckboxGrid.vue
@@ -32,7 +32,7 @@ function updateGroup(groupId: string, selected: boolean) {
     <div
       v-for="group in groups"
       :key="group.id"
-      class="flex min-h-11 items-center justify-between gap-3 rounded-cp-control bg-cp-subtle px-3.5 py-2.5"
+      class="flex min-h-11 items-center justify-between gap-3 rounded-cp bg-cp-fill-quaternary px-3.5 py-2.5"
     >
       <span class="flex min-w-0 items-center gap-2.5">
         <span
@@ -50,7 +50,7 @@ function updateGroup(groupId: string, selected: boolean) {
       </span>
       <span
         v-if="!group.enabled"
-        class="shrink-0 text-[11px] font-emphasis text-cp-muted-text"
+        class="shrink-0 text-cp-xs font-emphasis text-cp-text-quaternary"
       >
         已禁用
       </span>
@@ -58,7 +58,7 @@ function updateGroup(groupId: string, selected: boolean) {
   </div>
   <p
     v-else
-    class="m-0 rounded-cp-control bg-cp-subtle px-3.5 py-3 text-[12px] font-emphasis text-cp-secondary"
+    class="m-0 rounded-cp bg-cp-fill-quaternary px-3.5 py-3 text-cp-sm font-emphasis text-cp-text-secondary"
   >
     {{ loading ? '正在加载分组...' : '暂无分组，请先在分组管理中创建。' }}
   </p>
diff --git a/frontend/src/components/AccountGroupMarks.vue b/frontend/src/components/AccountGroupMarks.vue
index 39495c472..2f32dc4d4 100644
--- a/frontend/src/components/AccountGroupMarks.vue
+++ b/frontend/src/components/AccountGroupMarks.vue
@@ -27,5 +27,5 @@ const fullNames = computed(() => props.groups
       aria-hidden="true"
     />
   </div>
-  <span v-else class="text-xs text-cp-muted-text">—</span>
+  <span v-else class="text-xs text-cp-text-quaternary">—</span>
 </template>
diff --git a/frontend/src/components/AccountGroupMultiSelect.vue b/frontend/src/components/AccountGroupMultiSelect.vue
index 41ad6f93e..bcf53f0c7 100644
--- a/frontend/src/components/AccountGroupMultiSelect.vue
+++ b/frontend/src/components/AccountGroupMultiSelect.vue
@@ -90,7 +90,7 @@ function providerSummary(group: AccountGroup) {
       :disabled="disabled || loading"
     >
       <template #prefix>
-        <Search class="size-4 text-cp-tertiary" />
+        <Search class="size-4 text-cp-text-tertiary" />
       </template>
     </BaseInput>
 
@@ -102,10 +102,10 @@ function providerSummary(group: AccountGroup) {
         <div
           v-for="group in visibleGroups"
           :key="group.id"
-          class="flex w-full items-start gap-3 rounded-cp-control border-0 px-3 py-3 text-left outline-none transition-colors focus-visible:ring-2 focus-visible:ring-cp-info-border"
+          class="flex w-full items-start gap-3 rounded-cp border-0 px-3 py-3 text-left outline-none transition-colors focus-visible:ring-2 focus-visible:ring-cp-control-outline"
           :class="selectedIds.includes(group.id)
-            ? 'bg-cp-info-bg'
-            : 'bg-cp-subtle hover:bg-cp-default-hover'"
+            ? 'bg-cp-control-item-bg-active'
+            : 'bg-cp-fill-quaternary hover:bg-cp-bg-text-hover'"
         >
           <BaseCheckbox
             :model-value="selectedIds.includes(group.id)"
@@ -115,7 +115,7 @@ function providerSummary(group: AccountGroup) {
           />
           <span class="min-w-0 flex-1">
             <span class="flex min-w-0 items-center gap-2">
-              <strong class="min-w-0 truncate text-[13px] text-cp-primary">
+              <strong class="min-w-0 truncate text-cp text-cp-text">
                 {{ group.name }}
               </strong>
               <span
@@ -125,7 +125,7 @@ function providerSummary(group: AccountGroup) {
                 已禁用
               </span>
             </span>
-            <span class="mt-1 block text-[11px] font-emphasis text-cp-secondary">
+            <span class="mt-1 block text-cp-xs font-emphasis text-cp-text-secondary">
               {{ group.memberCount }} 个账号<template v-if="providerSummary(group)"> · {{ providerSummary(group) }}</template>
             </span>
           </span>
@@ -148,15 +148,15 @@ function providerSummary(group: AccountGroup) {
 
     <div
       v-if="selectedIds.length === 0"
-      class="rounded-cp-control px-3.5 py-3"
+      class="rounded-cp px-3.5 py-3"
       :class="emptyCopy.tone === 'warning'
         ? 'bg-cp-warning-bg text-cp-warning-text'
-        : 'bg-cp-subtle text-cp-secondary'"
+        : 'bg-cp-fill-quaternary text-cp-text-secondary'"
     >
-      <p class="m-0 text-[12px] font-bold">
+      <p class="m-0 text-cp-sm font-bold">
         {{ emptyCopy.title }}
       </p>
-      <p class="mt-1 mb-0 text-[11px] leading-normal font-emphasis">
+      <p class="mt-1 mb-0 text-cp-xs leading-normal font-emphasis">
         {{ emptyCopy.description }}
       </p>
     </div>
diff --git a/frontend/src/components/AppBrandMark.vue b/frontend/src/components/AppBrandMark.vue
new file mode 100644
index 000000000..ab84e4b1e
--- /dev/null
+++ b/frontend/src/components/AppBrandMark.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { useId } from 'vue'
+
+const id = useId().replaceAll(':', '')
+const noiseFilterId = `${id}-brand-noise`
+const wornFilterId = `${id}-brand-worn`
+const mistGradientId = `${id}-brand-mist`
+</script>
+
+<template>
+  <svg
+    class="app-brand-mark"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="48 48 416 416"
+    aria-hidden="true"
+    focusable="false"
+  >
+    <defs>
+      <filter :id="noiseFilterId" x="0" y="0" width="100%" height="100%">
+        <feTurbulence
+          type="fractalNoise"
+          baseFrequency="1.7"
+          numOctaves="2"
+          seed="31"
+          result="noise"
+        />
+        <feColorMatrix
+          in="noise"
+          type="matrix"
+          values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  2.56 2.56 2.56 0 -4.76"
+          result="speckle"
+        />
+        <feComposite operator="in" in="SourceGraphic" in2="speckle" />
+      </filter>
+      <filter :id="wornFilterId" x="-12%" y="-12%" width="124%" height="124%">
+        <feTurbulence
+          type="fractalNoise"
+          baseFrequency="0.12"
+          numOctaves="2"
+          seed="41"
+          result="noise"
+        />
+        <feDisplacementMap in="SourceGraphic" in2="noise" scale="2.2" />
+      </filter>
+      <radialGradient :id="mistGradientId" cx="0.5" cy="0.45" r="0.75">
+        <stop offset="0" stop-color="currentColor" stop-opacity="0.1" />
+        <stop offset="0.55" stop-color="currentColor" stop-opacity="0.045" />
+        <stop offset="1" stop-color="currentColor" stop-opacity="0.012" />
+      </radialGradient>
+    </defs>
+
+    <rect class="app-brand-mark__surface" x="48" y="48" width="416" height="416" rx="88" />
+    <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="36">
+      <path d="M156 307A112 112 0 0 1 307 156" />
+      <path d="M356 205A112 112 0 0 1 205 356" />
+    </g>
+    <path d="m407 105-119 153-183 149 124-157Z" fill="currentColor" />
+
+    <g
+      :filter="`url(#${wornFilterId})`"
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="square"
+    >
+      <path d="M92 170 136 148" stroke-width="1" opacity="0.38" />
+      <path d="M98 178 142 156" stroke-width="0.5" opacity="0.3" />
+      <path d="M308 398 346 378" stroke-width="0.9" opacity="0.36" />
+      <path d="M314 406 352 386" stroke-width="0.5" opacity="0.3" />
+      <path d="M364 132 398 118" stroke-width="0.9" opacity="0.38" />
+      <path d="M402 118 410 126" stroke-width="0.5" opacity="0.28" />
+      <path d="M108 350 142 334" stroke-width="1" opacity="0.4" />
+      <path d="M158 238 190 226" stroke-width="0.8" opacity="0.34" />
+      <path d="M296 292 320 280" stroke-width="0.7" opacity="0.3" />
+      <path d="M126 118 136 110" stroke-width="0.6" opacity="0.26" />
+      <path d="M400 96 410 88" stroke-width="0.6" opacity="0.24" />
+    </g>
+    <g :filter="`url(#${wornFilterId})`" fill="currentColor">
+      <path
+        d="M98 176 104 173 108 175 114 170 118 173 124 167 130 170 136 164 142 167 148 161 154 164 160 158Z"
+        opacity="0.34"
+      />
+      <path
+        d="M314 395 320 392 324 394 330 389 336 392 342 386 348 389 354 383Z"
+        opacity="0.3"
+      />
+    </g>
+
+    <rect
+      x="48"
+      y="48"
+      width="416"
+      height="416"
+      rx="88"
+      fill="currentColor"
+      :filter="`url(#${noiseFilterId})`"
+      opacity="0.08"
+    />
+    <rect
+      x="48"
+      y="48"
+      width="416"
+      height="416"
+      rx="88"
+      :fill="`url(#${mistGradientId})`"
+    />
+  </svg>
+</template>
+
+<style scoped>
+.app-brand-mark {
+  color: var(--cp-color-text-light-solid);
+}
+
+.app-brand-mark__surface {
+  fill: var(--cp-brand-mark-bg);
+}
+</style>
diff --git a/frontend/src/components/ProviderIconGroup.vue b/frontend/src/components/ProviderIconGroup.vue
index b0b06f579..2ba7abd22 100644
--- a/frontend/src/components/ProviderIconGroup.vue
+++ b/frontend/src/components/ProviderIconGroup.vue
@@ -39,18 +39,18 @@ const authenticationLabel = computed(() => {
 <template>
   <span class="inline-flex items-center whitespace-nowrap" :class="groupGapClass">
     <span
-      class="inline-flex shrink-0 items-center justify-center bg-cp-muted text-cp-primary"
+      class="inline-flex shrink-0 items-center justify-center bg-cp-fill-tertiary text-cp-text"
       :class="iconContainerClass"
       :title="providerLabel"
     >
       <Openai v-if="normalizedProvider === 'openai'" :class="iconClass" aria-hidden="true" />
       <Xai v-else-if="normalizedProvider === 'xai'" :class="iconClass" aria-hidden="true" />
-      <span v-else class="text-[10px] font-heavy text-cp-muted-text">?</span>
+      <span v-else class="text-[10px] font-heavy text-cp-text-quaternary">?</span>
     </span>
 
     <span
       v-if="showAuthenticationKind"
-      class="inline-flex shrink-0 items-center justify-center bg-cp-muted text-cp-primary"
+      class="inline-flex shrink-0 items-center justify-center bg-cp-fill-tertiary text-cp-text"
       :class="iconContainerClass"
       :title="authenticationLabel"
     >
@@ -64,7 +64,7 @@ const authenticationLabel = computed(() => {
         :class="iconClass"
         aria-hidden="true"
       />
-      <span v-else class="text-[10px] font-heavy text-cp-muted-text">?</span>
+      <span v-else class="text-[10px] font-heavy text-cp-text-quaternary">?</span>
     </span>
 
     <span class="sr-only">
diff --git a/frontend/src/components/base/BaseButton.vue b/frontend/src/components/base/BaseButton.vue
index 574ee3019..e8cd9a44e 100644
--- a/frontend/src/components/base/BaseButton.vue
+++ b/frontend/src/components/base/BaseButton.vue
@@ -30,19 +30,19 @@ defineSlots<{
 
 const variantClasses: Record<ButtonVariant, string> = {
   primary:
-    'bg-cp-accent text-cp-accent-on shadow-cp-control hover:bg-cp-accent-hover active:bg-cp-accent-pressed',
+    'bg-(--cp-button-primary-bg) text-(--cp-button-primary-color) shadow-cp-tertiary hover:bg-(--cp-button-primary-hover-bg) active:bg-(--cp-button-primary-active-bg)',
   secondary:
-    'bg-cp-muted text-cp-primary shadow-cp-control hover:bg-cp-default-active active:bg-cp-nav-active',
+    'bg-cp-fill-tertiary text-cp-text shadow-cp-tertiary hover:bg-cp-bg-text-active active:bg-cp-bg-text-active',
   ghost:
-    'bg-transparent text-cp-secondary shadow-none hover:bg-cp-subtle hover:text-cp-primary active:bg-cp-muted',
+    'bg-transparent text-cp-text-secondary shadow-none hover:bg-cp-fill-quaternary hover:text-cp-text active:bg-cp-fill-tertiary',
   destructive:
-    'bg-cp-danger-bg text-cp-danger-text shadow-none hover:bg-cp-danger-bg-hover active:bg-cp-danger-bg-active',
+    'bg-cp-error-bg text-cp-error-text shadow-none hover:bg-cp-error-bg-hover active:bg-cp-error-bg-active',
 }
 
 const sizeClasses: Record<ButtonSize, string> = {
   sm: 'h-cp-control-sm gap-1.5 px-3 text-xs',
-  md: 'h-cp-control-md gap-2 px-4 text-[13px]',
-  lg: 'h-cp-control-lg gap-2.5 px-5 text-[14px]',
+  md: 'h-cp-control gap-2 px-4 text-cp',
+  lg: 'h-cp-control-lg gap-2.5 px-5 text-cp-lg',
 }
 
 const spinnerSizes: Record<ButtonSize, number> = {
@@ -52,9 +52,9 @@ const spinnerSizes: Record<ButtonSize, number> = {
 }
 
 const classes = computed(() => [
-  'inline-flex shrink-0 touch-manipulation items-center justify-center rounded-cp-control-sm border-0 font-bold leading-none outline-none transition-[background-color,box-shadow,color,opacity,transform] duration-150 motion-safe:active:translate-y-px motion-safe:active:scale-[0.985] motion-reduce:transition-none',
-  'focus-visible:ring-2 focus-visible:ring-cp-accent-border focus-visible:ring-offset-2 focus-visible:ring-offset-cp-surface',
-  'disabled:cursor-not-allowed disabled:transform-none disabled:bg-cp-disabled disabled:text-cp-disabled-text disabled:shadow-none',
+  'inline-flex shrink-0 touch-manipulation items-center justify-center rounded-cp-sm border-0 font-bold leading-none outline-none transition-[background-color,box-shadow,color,opacity,transform] duration-150 motion-safe:active:translate-y-px motion-safe:active:scale-[0.985] motion-reduce:transition-none',
+  'focus-visible:ring-2 focus-visible:ring-cp-control-outline focus-visible:ring-offset-2 focus-visible:ring-offset-cp-bg-container',
+  'disabled:cursor-not-allowed disabled:transform-none disabled:bg-cp-bg-container-disabled disabled:text-cp-text-disabled disabled:shadow-none',
   sizeClasses[props.size],
   variantClasses[props.variant],
 ])
diff --git a/frontend/src/components/base/BaseCard.vue b/frontend/src/components/base/BaseCard.vue
index b34729675..797c7becd 100644
--- a/frontend/src/components/base/BaseCard.vue
+++ b/frontend/src/components/base/BaseCard.vue
@@ -45,7 +45,7 @@ const contentClasses = computed(() => [
 <template>
   <component
     :is="props.as"
-    class="[--cp-input-current-bg:var(--cp-input-soft-bg)] [--cp-input-current-bg-hover:var(--cp-input-soft-bg-hover)] overflow-hidden rounded-cp-surface bg-cp-surface shadow-cp-card"
+    class="overflow-hidden rounded-cp-card bg-(--cp-card-bg) shadow-cp-card"
     :class="[paddingClasses[padding], hasHeader ? 'flex min-h-0 flex-col' : undefined]"
   >
     <template v-if="$slots.header || hasManagedHeader || $slots.body">
@@ -55,7 +55,7 @@ const contentClasses = computed(() => [
             <div class="min-w-0 pt-0.5">
               <h2
                 v-if="props.title || $slots.title"
-                class="m-0 text-xl leading-[1.15] font-heavy text-cp-primary text-balance"
+                class="m-0 text-xl leading-[1.15] font-heavy text-cp-text text-balance"
               >
                 <slot name="title">
                   {{ props.title }}
@@ -63,7 +63,7 @@ const contentClasses = computed(() => [
               </h2>
               <p
                 v-if="props.description || $slots.description"
-                class="mt-1.75 mb-0 text-[13px] leading-[1.3] font-emphasis text-cp-secondary text-pretty"
+                class="mt-1.75 mb-0 text-cp leading-[1.3] font-emphasis text-cp-text-secondary text-pretty"
               >
                 <slot name="description">
                   {{ props.description }}
diff --git a/frontend/src/components/base/BaseCheckbox.vue b/frontend/src/components/base/BaseCheckbox.vue
index 5127c2495..f93c833e1 100644
--- a/frontend/src/components/base/BaseCheckbox.vue
+++ b/frontend/src/components/base/BaseCheckbox.vue
@@ -26,12 +26,12 @@ watchEffect(() => {
 })
 
 const boxClasses = computed(() => [
-  'relative inline-flex size-4 shrink-0 items-center justify-center rounded-cp-control-sm border-0 transition-[background-color,box-shadow,color] duration-150 motion-reduce:transition-none',
+  'relative inline-flex size-4 shrink-0 items-center justify-center rounded-cp-sm border-0 transition-[background-color,box-shadow,color] duration-150 motion-reduce:transition-none',
   props.disabled
-    ? 'bg-cp-disabled text-cp-disabled-icon'
+    ? 'bg-cp-bg-container-disabled text-cp-text-disabled'
     : checked.value
-      ? 'bg-cp-accent text-cp-accent-on'
-      : 'bg-cp-surface text-transparent shadow-[inset_0_0_0_1px_var(--cp-default-border-hover)]',
+      ? 'bg-cp-primary text-(--cp-button-primary-color)'
+      : 'bg-cp-bg-container text-transparent shadow-[inset_0_0_0_1px_var(--cp-color-border)]',
 ])
 </script>
 
@@ -39,7 +39,7 @@ const boxClasses = computed(() => [
   <!-- The native checkbox is nested; the rule does not resolve this Vue template pattern. -->
   <!-- eslint-disable-next-line vue-a11y/label-has-for -->
   <label
-    class="group relative inline-flex min-h-4 min-w-4 items-center gap-2.5 text-[13px] leading-none font-emphasis"
+    class="group relative inline-flex min-h-4 min-w-4 items-center gap-2.5 text-cp leading-none font-emphasis"
     :class="disabled ? 'cursor-not-allowed opacity-55' : 'cursor-pointer'"
   >
     <input
@@ -52,7 +52,7 @@ const boxClasses = computed(() => [
     >
     <span
       :class="boxClasses"
-      class="peer-focus-visible:ring-2 peer-focus-visible:ring-cp-accent-border peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-cp-surface"
+      class="peer-focus-visible:ring-2 peer-focus-visible:ring-cp-control-outline peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-cp-bg-container"
       aria-hidden="true"
     >
       <Minus
@@ -64,6 +64,6 @@ const boxClasses = computed(() => [
         :class="!indeterminate && model ? 'opacity-100' : 'opacity-0'"
       />
     </span>
-    <span v-if="showLabel" class="text-[13px] leading-none font-emphasis">{{ label }}</span>
+    <span v-if="showLabel" class="text-cp leading-none font-emphasis">{{ label }}</span>
   </label>
 </template>
diff --git a/frontend/src/components/base/BaseColorPicker/color.ts b/frontend/src/components/base/BaseColorPicker/color.ts
index 2fd6dfd90..a1f9eb702 100644
--- a/frontend/src/components/base/BaseColorPicker/color.ts
+++ b/frontend/src/components/base/BaseColorPicker/color.ts
@@ -1,9 +1,9 @@
-import { normalizeRgbaHexColor } from '@/utils/color'
+import { normalizeHexColor, normalizeRgbaHexColor } from '@/utils/color'
 
 const RGBA_COLOR_PATTERN
   = /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(0(?:\.\d+)?|1(?:\.0+)?)\s*\)$/i
 
-interface HsvColor {
+export interface HsvaColor {
   h: number
   s: number
   v: number
@@ -17,8 +17,23 @@ interface RgbaColor {
   a: number
 }
 
-export function hexToHsv(value: string): HsvColor | null {
-  const normalized = normalizeRgbaHexColor(value)
+export function normalizePickerHexColor(value: string, allowAlpha: boolean) {
+  if (allowAlpha) {
+    const rgba = normalizeRgbaHexColor(value)
+    if (rgba)
+      return rgba
+    const rgb = normalizeHexColor(value)
+    return rgb ? `${rgb}FF` : null
+  }
+
+  const rgb = normalizeHexColor(value)
+  if (rgb)
+    return rgb
+  return normalizeRgbaHexColor(value)?.slice(0, 7) ?? null
+}
+
+export function hexToHsva(value: string): HsvaColor | null {
+  const normalized = normalizePickerHexColor(value, true)
   if (!normalized)
     return null
 
@@ -48,7 +63,7 @@ export function hexToHsv(value: string): HsvColor | null {
   }
 }
 
-export function hsvToHex(color: HsvColor) {
+export function hsvaToHex(color: HsvaColor, allowAlpha: boolean) {
   const hue = ((color.h % 360) + 360) % 360
   const saturation = clamp(color.s, 0, 100) / 100
   const brightness = clamp(color.v, 0, 100) / 100
@@ -71,7 +86,9 @@ export function hsvToHex(color: HsvColor) {
   const rgb = [red, green, blue]
     .map(channel => Math.round((channel + offset) * 255).toString(16).padStart(2, '0'))
     .join('')
-  const alpha = Math.round(clamp(color.a, 0, 1) * 255).toString(16).padStart(2, '0')
+  const alpha = allowAlpha
+    ? Math.round(clamp(color.a, 0, 1) * 255).toString(16).padStart(2, '0')
+    : ''
   return `#${rgb}${alpha}`.toUpperCase()
 }
 
@@ -97,7 +114,7 @@ export function rgbaToHexColor(color: RgbaColor) {
 }
 
 export function formatRgbaColor(value: string) {
-  const normalized = normalizeRgbaHexColor(value)
+  const normalized = normalizePickerHexColor(value, true)
   if (!normalized)
     return null
 
diff --git a/frontend/src/components/base/BaseColorPicker/index.vue b/frontend/src/components/base/BaseColorPicker/index.vue
index f3ef2def1..131cc78a9 100644
--- a/frontend/src/components/base/BaseColorPicker/index.vue
+++ b/frontend/src/components/base/BaseColorPicker/index.vue
@@ -3,14 +3,15 @@ import { Check, ChevronDown } from '@lucide/vue'
 import { clamp } from 'es-toolkit'
 import { computed, shallowRef, useTemplateRef, watch } from 'vue'
 
-import { normalizeRgbaHexColor } from '@/utils/color'
+import { normalizeHexColor } from '@/utils/color'
 import BaseButton from '../BaseButton.vue'
 import BaseInput from '../BaseInput.vue'
 import BasePopover from '../BasePopover.vue'
 import {
   formatRgbaColor,
-  hexToHsv,
-  hsvToHex,
+  hexToHsva,
+  hsvaToHex,
+  normalizePickerHexColor,
   parseRgbaColor,
   rgbaToHexColor,
 } from './color'
@@ -20,11 +21,13 @@ const props = withDefaults(
     presets?: readonly string[]
     disabled?: boolean
     label?: string
+    allowAlpha?: boolean
   }>(),
   {
     presets: () => [],
     disabled: false,
     label: '选择颜色',
+    allowAlpha: true,
   },
 )
 
@@ -39,13 +42,22 @@ const svPanel = useTemplateRef<HTMLElement>('svPanel')
 const hueSlider = useTemplateRef<HTMLElement>('hueSlider')
 const alphaSlider = useTemplateRef<HTMLElement>('alphaSlider')
 
-const normalizedModel = computed(() => normalizeRgbaHexColor(model.value) ?? '#60A5FA80')
-const draftColor = computed(() => hsvToHex({
+const normalizedModel = computed(() =>
+  normalizePickerHexColor(model.value, props.allowAlpha)
+  ?? (props.allowAlpha ? '#60A5FA80' : '#2563EB'),
+)
+const triggerSwatchStyle = computed(() => props.allowAlpha
+  ? {
+      backgroundImage: `linear-gradient(${normalizedModel.value}, ${normalizedModel.value}), conic-gradient(#d8dee8 25%, #fff 0 50%, #d8dee8 0 75%, #fff 0)`,
+      backgroundSize: '100% 100%, 8px 8px',
+    }
+  : { backgroundColor: normalizedModel.value })
+const draftColor = computed(() => hsvaToHex({
   h: hue.value,
   s: saturation.value,
   v: brightness.value,
   a: alpha.value,
-}))
+}, props.allowAlpha))
 const hueColor = computed(() => `hsl(${hue.value} 100% 50%)`)
 const svCursorStyle = computed(() => ({
   left: `${saturation.value}%`,
@@ -63,8 +75,11 @@ const alphaTrackStyle = computed(() => {
     backgroundSize: '100% 100%, 8px 8px',
   }
 })
-const inputError = computed(() => customInput.value && !parseRgbaColor(customInput.value)
-  ? '请输入 rgba(r, g, b, a)'
+const inputValid = computed(() => props.allowAlpha
+  ? Boolean(parseRgbaColor(customInput.value))
+  : Boolean(normalizeHexColor(customInput.value)))
+const inputError = computed(() => customInput.value && !inputValid.value
+  ? props.allowAlpha ? '请输入 rgba(r, g, b, a)' : '请输入六位 HEX 颜色，例如 #2563EB'
   : undefined)
 
 watch(open, (isOpen) => {
@@ -78,16 +93,19 @@ watch(model, (value) => {
 })
 
 function resetDraft(value: string) {
-  const color = hexToHsv(value) ?? { h: 213, s: 62, v: 98, a: 0.5 }
+  const color = hexToHsva(normalizePickerHexColor(value, props.allowAlpha) ?? '')
+    ?? { h: 213, s: 62, v: 98, a: props.allowAlpha ? 0.5 : 1 }
   hue.value = color.h
   saturation.value = color.s
   brightness.value = color.v
-  alpha.value = color.a
-  customInput.value = formatRgbaColor(hsvToHex(color)) ?? ''
+  alpha.value = props.allowAlpha ? color.a : 1
+  syncInput()
 }
 
 function syncInput() {
-  customInput.value = formatRgbaColor(draftColor.value) ?? ''
+  customInput.value = props.allowAlpha
+    ? formatRgbaColor(draftColor.value) ?? ''
+    : normalizeHexColor(draftColor.value) ?? ''
 }
 
 function updateSaturationBrightness(event: PointerEvent) {
@@ -189,31 +207,31 @@ function handleAlphaKeydown(event: KeyboardEvent) {
 }
 
 function updateFromInput() {
-  const rgba = parseRgbaColor(customInput.value)
-  const color = rgba ? hexToHsv(rgbaToHexColor(rgba)) : null
+  const inputColor = normalizedInputColor()
+  const color = inputColor ? hexToHsva(inputColor) : null
   if (!color)
     return
 
   hue.value = color.h
   saturation.value = color.s
   brightness.value = color.v
-  alpha.value = color.a
-  customInput.value = formatRgbaColor(hsvToHex(color)) ?? ''
+  alpha.value = props.allowAlpha ? color.a : 1
+  syncInput()
 }
 
 function choosePreset(value: string) {
-  const normalized = normalizeRgbaHexColor(value)
+  const normalized = normalizePickerHexColor(value, props.allowAlpha)
   if (normalized)
     resetDraft(normalized)
 }
 
 function isPresetSelected(value: string) {
-  const normalized = normalizeRgbaHexColor(value)
+  const normalized = normalizePickerHexColor(value, props.allowAlpha)
   return normalized?.slice(0, 7) === draftColor.value.slice(0, 7)
 }
 
 function presetCheckClass(value: string) {
-  const normalized = normalizeRgbaHexColor(value)
+  const normalized = normalizePickerHexColor(value, props.allowAlpha)
   if (!normalized)
     return 'text-white'
 
@@ -227,13 +245,21 @@ function presetCheckClass(value: string) {
 
 function confirm() {
   updateFromInput()
-  const rgba = parseRgbaColor(customInput.value)
-  if (!rgba)
+  const normalized = normalizedInputColor()
+  if (!normalized)
     return
 
-  model.value = rgbaToHexColor(rgba)
+  model.value = normalized
   open.value = false
 }
+
+function normalizedInputColor() {
+  if (!props.allowAlpha)
+    return normalizeHexColor(customInput.value)
+
+  const rgba = parseRgbaColor(customInput.value)
+  return rgba ? rgbaToHexColor(rgba) : null
+}
 </script>
 
 <template>
@@ -246,14 +272,17 @@ function confirm() {
     <template #trigger>
       <button
         type="button"
-        class="group inline-flex size-8 items-center justify-center rounded-sm border-0 bg-transparent p-0 outline-none transition-opacity duration-150 hover:opacity-90 focus-visible:ring-2 focus-visible:ring-cp-info-border disabled:cursor-not-allowed disabled:opacity-60"
+        class="group inline-flex size-8 items-center justify-center rounded-sm border-0 bg-transparent p-0 outline-none transition-opacity duration-150 hover:opacity-90 focus-visible:ring-2 focus-visible:ring-cp-control-outline disabled:cursor-not-allowed disabled:opacity-60"
         :disabled="props.disabled"
         :aria-label="props.label"
         aria-haspopup="dialog"
         :aria-expanded="open"
       >
-        <span class="base-color-picker__checker relative flex size-full items-center justify-center overflow-hidden rounded-sm" aria-hidden="true">
-          <span class="absolute inset-0" :style="{ backgroundColor: normalizedModel }" />
+        <span
+          class="relative flex size-full items-center justify-center overflow-hidden rounded-sm"
+          :style="triggerSwatchStyle"
+          aria-hidden="true"
+        >
           <ChevronDown class="relative size-3.5 text-white drop-shadow-[0_1px_2px_rgb(0_0_0/0.65)]" />
         </span>
       </button>
@@ -263,7 +292,7 @@ function confirm() {
       <div class="grid h-43 grid-cols-[1fr_14px] gap-2">
         <div
           ref="svPanel"
-          class="base-color-picker__sv relative touch-none overflow-hidden rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-cp-info-border"
+          class="base-color-picker__sv relative touch-none overflow-hidden rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-cp-control-outline"
           :style="{ backgroundColor: hueColor }"
           role="slider"
           tabindex="0"
@@ -285,7 +314,7 @@ function confirm() {
 
         <div
           ref="hueSlider"
-          class="base-color-picker__hue relative touch-none rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-cp-info-border"
+          class="base-color-picker__hue relative touch-none rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-cp-control-outline"
           role="slider"
           tabindex="0"
           aria-label="色相"
@@ -305,10 +334,10 @@ function confirm() {
         </div>
       </div>
 
-      <div class="grid grid-cols-[1fr_36px] items-center gap-2">
+      <div v-if="props.allowAlpha" class="grid grid-cols-[1fr_36px] items-center gap-2">
         <div
           ref="alphaSlider"
-          class="base-color-picker__alpha relative h-3 touch-none rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-cp-info-border"
+          class="base-color-picker__alpha relative h-3 touch-none rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-cp-control-outline"
           :style="alphaTrackStyle"
           role="slider"
           tabindex="0"
@@ -328,7 +357,7 @@ function confirm() {
             aria-hidden="true"
           />
         </div>
-        <span class="text-right font-mono text-[11px] tabular-nums text-cp-secondary">
+        <span class="text-right font-mono text-cp-xs tabular-nums text-cp-text-secondary">
           {{ Math.round(alpha * 100) }}%
         </span>
       </div>
@@ -343,7 +372,7 @@ function confirm() {
           v-for="color in props.presets"
           :key="color"
           type="button"
-          class="relative flex size-6.5 items-center justify-center rounded-sm border-0 outline-none transition-transform duration-150 hover:scale-105 focus-visible:ring-2 focus-visible:ring-cp-info-border focus-visible:ring-offset-2 focus-visible:ring-offset-cp-surface"
+          class="relative flex size-6.5 items-center justify-center rounded-sm border-0 outline-none transition-transform duration-150 hover:scale-105 focus-visible:ring-2 focus-visible:ring-cp-control-outline focus-visible:ring-offset-2 focus-visible:ring-offset-cp-bg-container"
           :style="{ backgroundColor: color }"
           role="radio"
           :aria-label="color"
@@ -364,8 +393,9 @@ function confirm() {
         <div class="min-w-0 flex-1">
           <BaseInput
             v-model="customInput"
-            aria-label="RGBA 颜色"
-            placeholder="rgba(96, 165, 250, 1)"
+            class="bg-cp-fill-tertiary!"
+            :aria-label="props.allowAlpha ? 'RGBA 颜色' : 'HEX 颜色'"
+            :placeholder="props.allowAlpha ? 'rgba(96, 165, 250, 1)' : '#2563EB'"
             autocomplete="off"
             :disabled="props.disabled"
             :aria-invalid="Boolean(inputError) || undefined"
@@ -376,13 +406,13 @@ function confirm() {
           <p
             v-if="inputError"
             id="color-input-error"
-            class="mt-1.5 mb-0 text-xs font-emphasis text-cp-danger-text"
+            class="mt-1.5 mb-0 text-xs font-emphasis text-cp-error-text"
             aria-live="polite"
           >
             {{ inputError }}
           </p>
         </div>
-        <BaseButton size="md" variant="secondary" :disabled="!parseRgbaColor(customInput)" @click="confirm">
+        <BaseButton size="md" variant="secondary" :disabled="!inputValid" @click="confirm">
           确定
         </BaseButton>
       </div>
@@ -391,16 +421,6 @@ function confirm() {
 </template>
 
 <style scoped>
-.base-color-picker__checker,
-.base-color-picker__hue,
-.base-color-picker__sv {
-  --cp-color-picker-checker: conic-gradient(#d8dee8 25%, #fff 0 50%, #d8dee8 0 75%, #fff 0) 0 / 8px 8px;
-}
-
-.base-color-picker__checker {
-  background: var(--cp-color-picker-checker);
-}
-
 .base-color-picker__sv::before,
 .base-color-picker__sv::after {
   position: absolute;
diff --git a/frontend/src/components/base/BaseConfirmModal.vue b/frontend/src/components/base/BaseConfirmModal.vue
index 09a56ef15..12b8c81dc 100644
--- a/frontend/src/components/base/BaseConfirmModal.vue
+++ b/frontend/src/components/base/BaseConfirmModal.vue
@@ -52,7 +52,7 @@ function handleConfirm() {
   >
     <div
       v-if="$slots.default"
-      class="text-[14px] leading-[1.55] font-emphasis text-cp-secondary"
+      class="text-cp-lg leading-[1.55] font-emphasis text-cp-text-secondary"
     >
       <slot />
     </div>
diff --git a/frontend/src/components/base/BaseEmpty.vue b/frontend/src/components/base/BaseEmpty.vue
index 978a1b6c6..903555057 100644
--- a/frontend/src/components/base/BaseEmpty.vue
+++ b/frontend/src/components/base/BaseEmpty.vue
@@ -28,22 +28,22 @@ const resolvedIcon = computed(() => props.icon ?? Inbox)
   <div
     class="grid justify-items-center text-center"
     :class="[
-      surface === 'none' ? 'bg-transparent' : 'rounded-cp-overlay bg-cp-subtle',
+      surface === 'none' ? 'bg-transparent' : 'rounded-cp-lg bg-cp-bg-elevated',
       size === 'sm' ? 'gap-2 px-4 py-5' : 'gap-3 px-6 py-8',
     ]"
   >
     <span
-      class="inline-flex items-center justify-center rounded-cp-control bg-cp-muted text-cp-muted-text"
+      class="inline-flex items-center justify-center rounded-cp bg-cp-fill-tertiary text-cp-text-quaternary"
       :class="size === 'sm' ? 'size-8' : 'size-10'"
     >
       <component :is="resolvedIcon" :size="size === 'sm' ? 16 : 18" />
     </span>
-    <p class="m-0 text-[13px] leading-[1.15] font-heavy text-cp-primary">
+    <p class="m-0 text-cp leading-[1.15] font-heavy text-cp-text">
       {{ resolvedTitle }}
     </p>
     <p
       v-if="description"
-      class="m-0 max-w-72 text-xs leading-[1.45] font-semibold text-cp-secondary"
+      class="m-0 max-w-72 text-xs leading-[1.45] font-semibold text-cp-text-secondary"
     >
       {{ description }}
     </p>
diff --git a/frontend/src/components/base/BaseForm/FormItem.vue b/frontend/src/components/base/BaseForm/FormItem.vue
index 3719b06ce..b0bf4fff5 100644
--- a/frontend/src/components/base/BaseForm/FormItem.vue
+++ b/frontend/src/components/base/BaseForm/FormItem.vue
@@ -43,10 +43,10 @@ provide(formFieldKey, {
       <!-- eslint-disable-next-line vue-a11y/label-has-for -->
       <label
         :for="resolvedControlId"
-        class="flex min-w-0 items-center gap-1.5 text-[13px] leading-none font-medium text-cp-secondary"
+        class="flex min-w-0 items-center gap-1.5 text-cp leading-none font-medium text-cp-text-secondary"
       >
         <slot name="label">{{ label }}</slot>
-        <span v-if="required" class="font-bold text-cp-danger" aria-hidden="true">*</span>
+        <span v-if="required" class="font-bold text-cp-error" aria-hidden="true">*</span>
         <span v-if="required" class="sr-only">必填</span>
       </label>
       <div v-if="$slots.extra" class="inline-flex shrink-0 items-center">
@@ -56,7 +56,7 @@ provide(formFieldKey, {
     <p
       v-if="description"
       :id="descriptionId"
-      class="mt-0 mb-2 text-xs leading-[1.35] font-emphasis text-cp-muted-text"
+      class="mt-0 mb-2 text-xs leading-[1.35] font-emphasis text-cp-text-quaternary"
     >
       {{ description }}
     </p>
@@ -66,7 +66,7 @@ provide(formFieldKey, {
     <p
       v-if="error"
       :id="errorId"
-      class="mt-2 mb-0 text-xs leading-[1.35] font-emphasis text-cp-danger-text"
+      class="mt-2 mb-0 text-xs leading-[1.35] font-emphasis text-cp-error-text"
       aria-live="polite"
     >
       {{ error }}
diff --git a/frontend/src/components/base/BaseIconButton.vue b/frontend/src/components/base/BaseIconButton.vue
index e7ff4e71c..f93ae926c 100644
--- a/frontend/src/components/base/BaseIconButton.vue
+++ b/frontend/src/components/base/BaseIconButton.vue
@@ -32,20 +32,20 @@ defineSlots<{
 
 const variantClasses: Record<IconButtonVariant, string> = {
   primary:
-    'bg-cp-accent text-cp-accent-on shadow-cp-control hover:bg-cp-accent-hover active:bg-cp-accent-pressed',
+    'bg-(--cp-button-primary-bg) text-(--cp-button-primary-color) shadow-cp-tertiary hover:bg-(--cp-button-primary-hover-bg) active:bg-(--cp-button-primary-active-bg)',
   secondary:
-    'bg-cp-surface text-cp-secondary shadow-cp-control hover:bg-cp-default-hover hover:text-cp-primary active:bg-cp-default-active',
+    'bg-cp-bg-container text-cp-text-secondary shadow-cp-tertiary hover:bg-cp-bg-text-hover hover:text-cp-text active:bg-cp-bg-text-active',
   success:
     'bg-cp-success-bg text-cp-success-text shadow-none hover:bg-cp-success-bg-hover active:bg-cp-success-bg-active',
   ghost:
-    'bg-transparent text-cp-secondary shadow-none hover:bg-cp-subtle hover:text-cp-primary active:bg-cp-muted',
+    'bg-transparent text-cp-text-secondary shadow-none hover:bg-cp-fill-quaternary hover:text-cp-text active:bg-cp-fill-tertiary',
   destructive:
-    'bg-transparent text-cp-danger-text shadow-none hover:bg-cp-danger-bg-hover active:bg-cp-danger-bg-active',
+    'bg-transparent text-cp-error-text shadow-none hover:bg-cp-error-bg-hover active:bg-cp-error-bg-active',
 }
 
 const sizeClasses: Record<IconButtonSize, string> = {
   sm: 'size-cp-control-sm [&>svg]:size-3.5',
-  md: 'size-cp-control-md [&>svg]:size-4',
+  md: 'size-cp-control [&>svg]:size-4',
   lg: 'size-cp-control-lg [&>svg]:size-4.5',
 }
 
@@ -56,12 +56,12 @@ const spinnerSizes: Record<IconButtonSize, number> = {
 }
 
 const classes = computed(() => [
-  'inline-grid shrink-0 touch-manipulation place-items-center rounded-cp-control border-0 leading-none outline-none transition-[background-color,box-shadow,color,opacity,transform] duration-150 motion-safe:active:scale-[0.96] motion-reduce:transition-none',
-  'focus-visible:ring-2 focus-visible:ring-cp-accent-border focus-visible:ring-offset-2 focus-visible:ring-offset-cp-surface',
-  'disabled:cursor-not-allowed disabled:transform-none disabled:bg-cp-disabled disabled:text-cp-disabled-text disabled:shadow-none',
+  'inline-grid shrink-0 touch-manipulation place-items-center rounded-cp border-0 leading-none outline-none transition-[background-color,box-shadow,color,opacity,transform] duration-150 motion-safe:active:scale-[0.96] motion-reduce:transition-none',
+  'focus-visible:ring-2 focus-visible:ring-cp-control-outline focus-visible:ring-offset-2 focus-visible:ring-offset-cp-bg-container',
+  'disabled:cursor-not-allowed disabled:transform-none disabled:bg-cp-bg-container-disabled disabled:text-cp-text-disabled disabled:shadow-none',
   sizeClasses[props.size],
   variantClasses[props.variant],
-  props.pressed ? 'bg-cp-default-active text-cp-primary' : undefined,
+  props.pressed ? 'bg-cp-bg-text-active text-cp-text' : undefined,
 ])
 </script>
 
diff --git a/frontend/src/components/base/BaseInput.vue b/frontend/src/components/base/BaseInput.vue
index 6f5c2879d..d61d927f1 100644
--- a/frontend/src/components/base/BaseInput.vue
+++ b/frontend/src/components/base/BaseInput.vue
@@ -48,31 +48,31 @@ const controlAttrs = computed(() => Object.fromEntries(
 
 const sizeClasses: Record<InputSize, string> = {
   sm: 'h-cp-control-sm gap-2 px-3 text-xs',
-  md: 'h-cp-control-md gap-2.5 px-3.5 text-[13px]',
-  lg: 'h-cp-control-lg gap-3 px-4 text-[14px]',
+  md: 'h-cp-control gap-2.5 px-3.5 text-cp',
+  lg: 'h-cp-control-lg gap-3 px-4 text-cp-lg',
 }
 
 const containerClasses = computed(() => [
-  'relative inline-flex w-full min-w-0 items-center overflow-visible rounded-cp-control border-0 text-cp-primary shadow-cp-input transition-[background-color,box-shadow,color] duration-[160ms] motion-reduce:transition-none',
+  'relative inline-flex w-full min-w-0 items-center overflow-visible rounded-cp border-0 text-cp-text shadow-cp-input transition-[background-color,box-shadow,color] duration-[160ms] motion-reduce:transition-none',
   sizeClasses[props.size],
   props.disabled
-    ? 'cursor-not-allowed bg-cp-disabled text-cp-disabled-text shadow-none'
+    ? 'cursor-not-allowed bg-cp-bg-container-disabled text-cp-text-disabled shadow-none'
     : invalid.value
-      ? 'bg-(--cp-input-error-soft-bg) shadow-cp-input-error'
+      ? 'bg-(--cp-input-error-active-bg) shadow-cp-input-error-active'
       : [
-          'bg-[var(--cp-input-current-bg,var(--cp-input-context-bg))]',
-          'hover:bg-[var(--cp-input-current-bg-hover,var(--cp-input-context-bg-hover))] hover:shadow-cp-input-hover',
-          'focus-within:bg-(--cp-input-soft-bg-focus) focus-within:shadow-cp-input-focus',
+          'bg-[var(--cp-input-bg)]',
+          'hover:bg-[var(--cp-input-hover-bg)] hover:shadow-cp-input-hover',
+          'focus-within:bg-(--cp-input-active-bg) focus-within:shadow-cp-input-active',
         ],
 ])
 
 const iconClasses = computed(() => [
   'inline-flex shrink-0',
   props.disabled
-    ? 'text-cp-disabled-icon'
+    ? 'text-cp-text-disabled'
     : invalid.value
-      ? 'text-cp-danger'
-      : 'text-cp-muted-text',
+      ? 'text-cp-error'
+      : 'text-cp-text-quaternary',
 ])
 
 function updateModel(event: Event) {
@@ -90,7 +90,7 @@ function updateModel(event: Event) {
         v-bind="controlAttrs"
         :id="controlId"
         :value="model"
-        class="base-input__field h-full min-w-0 flex-1 border-0 bg-transparent font-emphasis leading-[1.15] text-cp-primary outline-0 placeholder:text-cp-muted-text disabled:cursor-not-allowed disabled:text-cp-disabled-text"
+        class="base-input__field h-full min-w-0 flex-1 border-0 bg-transparent font-emphasis leading-[1.15] text-cp-text outline-0 placeholder:text-cp-text-quaternary disabled:cursor-not-allowed disabled:text-cp-text-disabled"
         :placeholder="placeholder"
         :type="type"
         :disabled="disabled"
@@ -109,24 +109,35 @@ function updateModel(event: Event) {
 
 <style scoped>
 .base-input__control {
-  --base-input-autofill-bg: var(--cp-input-current-bg, var(--cp-input-context-bg));
+  --base-input-autofill-bg: var(--cp-input-bg);
 }
 
 .base-input__control:hover {
-  --base-input-autofill-bg: var(--cp-input-current-bg-hover, var(--cp-input-context-bg-hover));
+  --base-input-autofill-bg: var(--cp-input-hover-bg);
 }
 
 .base-input__control:focus-within {
-  --base-input-autofill-bg: var(--cp-input-soft-bg-focus);
+  --base-input-autofill-bg: var(--cp-input-active-bg);
 }
 
 .base-input__field:-webkit-autofill,
 .base-input__field:-webkit-autofill:hover,
 .base-input__field:-webkit-autofill:focus,
 .base-input__field:autofill {
-  caret-color: var(--cp-text-primary);
-  -webkit-text-fill-color: var(--cp-text-primary) !important;
+  caret-color: var(--cp-color-text);
+  -webkit-text-fill-color: var(--cp-color-text) !important;
   -webkit-box-shadow: 0 0 0 1000px var(--base-input-autofill-bg) inset !important;
   box-shadow: 0 0 0 1000px var(--base-input-autofill-bg) inset !important;
 }
+
+/* 普通数字表单保留键盘步进，但不混入浏览器原生微调器外观。 */
+.base-input__field[type='number'] {
+  appearance: textfield;
+}
+
+.base-input__field[type='number']::-webkit-inner-spin-button,
+.base-input__field[type='number']::-webkit-outer-spin-button {
+  margin: 0;
+  appearance: none;
+}
 </style>
diff --git a/frontend/src/components/base/BaseMenuItem.vue b/frontend/src/components/base/BaseMenuItem.vue
index 0205a7a27..d5b69fbbb 100644
--- a/frontend/src/components/base/BaseMenuItem.vue
+++ b/frontend/src/components/base/BaseMenuItem.vue
@@ -22,12 +22,12 @@ defineSlots<{
 }>()
 
 const classes = computed(() => [
-  'flex min-h-9 w-full touch-manipulation items-center gap-2 rounded-cp-control-sm border-0 bg-transparent px-3 text-left text-[13px] leading-none font-emphasis outline-none transition-[background-color,color] duration-150 motion-reduce:transition-none',
-  'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-cp-accent-border',
-  'disabled:cursor-not-allowed disabled:text-cp-disabled-text',
+  'flex min-h-9 w-full touch-manipulation items-center gap-2 rounded-cp-sm border-0 bg-transparent px-3 text-left text-cp leading-none font-emphasis outline-none transition-[background-color,color] duration-150 motion-reduce:transition-none',
+  'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-cp-control-outline',
+  'disabled:cursor-not-allowed disabled:text-cp-text-disabled',
   props.tone === 'destructive'
-    ? 'text-cp-danger-text hover:bg-cp-danger-bg-hover'
-    : 'text-cp-primary hover:bg-cp-default-hover',
+    ? 'text-cp-error-text hover:bg-cp-error-bg-hover'
+    : 'text-cp-text hover:bg-cp-bg-text-hover',
 ])
 </script>
 
diff --git a/frontend/src/components/base/BaseModal/index.vue b/frontend/src/components/base/BaseModal/index.vue
index b039f8a96..12f18a90c 100644
--- a/frontend/src/components/base/BaseModal/index.vue
+++ b/frontend/src/components/base/BaseModal/index.vue
@@ -72,8 +72,8 @@ const toneClasses: Record<ModalTone, { iconBg: string, icon: string }> = {
     icon: 'text-cp-warning',
   },
   danger: {
-    iconBg: 'bg-cp-danger-bg',
-    icon: 'text-cp-danger',
+    iconBg: 'bg-cp-error-bg',
+    icon: 'text-cp-error',
   },
   success: {
     iconBg: 'bg-cp-success-bg',
@@ -186,12 +186,12 @@ onBeforeUnmount(() => {
           type="button"
           tabindex="-1"
           aria-label="关闭弹窗"
-          class="absolute inset-0 cursor-default border-0 bg-cp-overlay p-0"
+          class="absolute inset-0 cursor-default border-0 bg-cp-bg-mask p-0"
           @click="closeModal"
         />
         <section
           ref="panel"
-          class="cp-modal-panel [--cp-input-current-bg:var(--cp-input-soft-bg)] [--cp-input-current-bg-hover:var(--cp-input-soft-bg-hover)] relative grid max-h-[calc(100dvh-1.5rem)] w-full min-w-0 overflow-hidden rounded-cp-surface bg-cp-surface shadow-cp-popover sm:max-h-[calc(100dvh-3rem)]"
+          class="cp-modal-panel relative grid max-h-[calc(100dvh-1.5rem)] w-full min-w-0 overflow-hidden rounded-cp-card bg-cp-bg-container shadow-cp sm:max-h-[calc(100dvh-3rem)]"
           :class="[
             sizeClasses[size],
             $slots.default ? 'grid-rows-[auto_minmax(0,1fr)_auto]' : 'grid-rows-[auto_auto]',
@@ -213,21 +213,21 @@ onBeforeUnmount(() => {
           >
             <span
               v-if="tone !== 'neutral'"
-              class="inline-flex size-11 items-center justify-center rounded-cp-control"
-              :class="$slots.icon ? 'bg-cp-subtle' : toneClasses[tone].iconBg"
+              class="inline-flex size-11 items-center justify-center rounded-cp"
+              :class="$slots.icon ? 'bg-cp-fill-quaternary' : toneClasses[tone].iconBg"
             >
               <slot name="icon">
                 <component :is="iconMap[tone]" :size="18" :class="toneClasses[tone].icon" />
               </slot>
             </span>
             <div class="min-w-0">
-              <h2 :id="titleId" class="m-0 text-lg leading-[1.15] font-heavy text-cp-primary">
+              <h2 :id="titleId" class="m-0 text-lg leading-[1.15] font-heavy text-cp-text">
                 {{ title }}
               </h2>
               <p
                 v-if="description"
                 :id="descriptionId"
-                class="mt-2 mb-0 text-[13px] leading-[1.45] font-semibold text-cp-secondary"
+                class="mt-2 mb-0 text-cp leading-[1.45] font-semibold text-cp-text-secondary"
               >
                 {{ description }}
               </p>
diff --git a/frontend/src/components/base/BaseNumberInput.vue b/frontend/src/components/base/BaseNumberInput.vue
new file mode 100644
index 000000000..838efaa40
--- /dev/null
+++ b/frontend/src/components/base/BaseNumberInput.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { Minus, Plus } from '@lucide/vue'
+import { computed, useAttrs } from 'vue'
+
+import BaseIconButton from './BaseIconButton.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    label: string
+    min?: number
+    max?: number
+    step?: number
+    unit?: string
+    disabled?: boolean
+  }>(),
+  {
+    min: undefined,
+    max: undefined,
+    step: 1,
+    unit: undefined,
+    disabled: false,
+  },
+)
+
+const model = defineModel<number>({ required: true })
+const attrs = useAttrs()
+
+const rootAttrs = computed(() => ({ class: attrs.class, style: attrs.style }))
+const controlAttrs = computed(() => Object.fromEntries(
+  Object.entries(attrs).filter(([key]) => !['class', 'style'].includes(key)),
+))
+const canDecrease = computed(() => !props.disabled && (props.min === undefined || model.value > props.min))
+const canIncrease = computed(() => !props.disabled && (props.max === undefined || model.value < props.max))
+
+function clampValue(value: number) {
+  return Math.min(props.max ?? Number.POSITIVE_INFINITY, Math.max(props.min ?? Number.NEGATIVE_INFINITY, value))
+}
+
+function stepPrecision() {
+  const decimal = String(props.step).split('.')[1]
+  return decimal?.length ?? 0
+}
+
+function updateModel(event: Event) {
+  const value = (event.target as HTMLInputElement).valueAsNumber
+  if (Number.isFinite(value))
+    model.value = clampValue(value)
+}
+
+function restoreValue(event: Event) {
+  const input = event.target as HTMLInputElement
+  input.value = String(model.value)
+}
+
+function stepBy(direction: -1 | 1) {
+  const next = clampValue(model.value + props.step * direction)
+  model.value = Number(next.toFixed(stepPrecision()))
+}
+</script>
+
+<template>
+  <div
+    v-bind="rootAttrs"
+    class="inline-flex h-8 items-center rounded-cp bg-cp-fill-tertiary p-0.5 text-cp-text transition-[background-color,box-shadow] duration-150 focus-within:bg-cp-bg-container focus-within:shadow-cp-input-active motion-reduce:transition-none"
+  >
+    <BaseIconButton
+      :label="`减少${label}`"
+      size="sm"
+      variant="ghost"
+      class="size-7!"
+      :disabled="!canDecrease"
+      @click="stepBy(-1)"
+    >
+      <Minus class="size-3" />
+    </BaseIconButton>
+
+    <span class="inline-flex min-w-0 items-baseline justify-center gap-1 px-1">
+      <input
+        v-bind="controlAttrs"
+        :value="model"
+        type="number"
+        inputmode="decimal"
+        :aria-label="label"
+        :min="min"
+        :max="max"
+        :step="step"
+        :disabled="disabled"
+        class="base-number-input__field w-9 min-w-0 border-0 bg-transparent p-0 text-right font-mono text-cp-xs font-bold tabular-nums text-cp-text outline-none disabled:text-cp-text-disabled"
+        @input="updateModel"
+        @blur="restoreValue"
+      >
+      <span
+        v-if="unit"
+        class="shrink-0 text-[9px] font-emphasis text-cp-text-quaternary"
+        aria-hidden="true"
+      >
+        {{ unit }}
+      </span>
+    </span>
+
+    <BaseIconButton
+      :label="`增加${label}`"
+      size="sm"
+      variant="ghost"
+      class="size-7!"
+      :disabled="!canIncrease"
+      @click="stepBy(1)"
+    >
+      <Plus class="size-3" />
+    </BaseIconButton>
+  </div>
+</template>
+
+<style scoped>
+/* 隐藏浏览器原生微调器，统一使用两侧的减号和加号。 */
+.base-number-input__field {
+  appearance: textfield;
+}
+
+.base-number-input__field::-webkit-inner-spin-button,
+.base-number-input__field::-webkit-outer-spin-button {
+  margin: 0;
+  appearance: none;
+}
+</style>
diff --git a/frontend/src/components/base/BasePageHeader.vue b/frontend/src/components/base/BasePageHeader.vue
index d60a2d4eb..94893d673 100644
--- a/frontend/src/components/base/BasePageHeader.vue
+++ b/frontend/src/components/base/BasePageHeader.vue
@@ -10,12 +10,12 @@ defineProps<{
     class="flex min-h-17 shrink-0 flex-wrap items-start justify-between gap-x-4 gap-y-3"
   >
     <div class="min-w-0 flex-1 basis-64">
-      <h1 class="m-0 text-[34px] leading-[1.15] font-extrabold text-cp-primary">
+      <h1 class="m-0 text-[34px] leading-[1.15] font-extrabold text-cp-text">
         {{ title }}
       </h1>
       <p
         v-if="description || $slots.description"
-        class="mt-2.5 mb-0 flex items-center gap-2 text-[15px] leading-[1.15] font-semibold text-cp-secondary"
+        class="mt-2.5 mb-0 flex items-center gap-2 text-cp-xl leading-[1.15] font-semibold text-cp-text-secondary"
       >
         <slot name="description">
           {{ description }}
@@ -24,7 +24,7 @@ defineProps<{
     </div>
     <div
       v-if="$slots.actions"
-      class="mt-0.5 flex shrink-0 items-center justify-end gap-2"
+      class="flex min-w-0 basis-full flex-wrap items-center justify-start gap-2 min-[640px]:mt-0.5 min-[640px]:basis-auto min-[640px]:shrink-0 min-[640px]:justify-end"
     >
       <slot name="actions" />
     </div>
diff --git a/frontend/src/components/base/BasePopover.vue b/frontend/src/components/base/BasePopover.vue
index 0b6d46f65..dd037ea07 100644
--- a/frontend/src/components/base/BasePopover.vue
+++ b/frontend/src/components/base/BasePopover.vue
@@ -56,7 +56,7 @@ const hoverOpenTimer = shallowRef<number>()
 const viewportTarget = computed(() => (open.value && typeof window !== 'undefined' ? window : null))
 
 const popoverClasses = computed(() => [
-  'fixed z-50 overflow-visible rounded-cp-overlay border-0 bg-cp-surface text-left text-cp-primary shadow-cp-popover',
+  'fixed z-50 overflow-visible rounded-cp-lg border-0 bg-cp-bg-container text-left text-cp-text shadow-cp',
   props.animatePosition
     ? 'transition-[left,top] duration-150 ease-out motion-reduce:transition-none'
     : undefined,
diff --git a/frontend/src/components/base/BaseRadio.vue b/frontend/src/components/base/BaseRadio.vue
index 38fdd2117..4bdf21039 100644
--- a/frontend/src/components/base/BaseRadio.vue
+++ b/frontend/src/components/base/BaseRadio.vue
@@ -24,10 +24,10 @@ const checked = computed(() => model.value === props.value)
 const indicatorClasses = computed(() => [
   'relative inline-grid size-4 shrink-0 place-items-center rounded-full transition-colors duration-150 motion-reduce:transition-none',
   props.disabled
-    ? 'bg-cp-disabled text-cp-disabled-icon'
+    ? 'bg-cp-bg-container-disabled text-cp-text-disabled'
     : checked.value
-      ? 'bg-cp-accent text-cp-accent-on'
-      : 'bg-cp-muted text-transparent group-hover:bg-cp-default-active',
+      ? 'bg-cp-primary text-(--cp-button-primary-color)'
+      : 'bg-cp-fill-tertiary text-transparent group-hover:bg-cp-bg-text-active',
 ])
 </script>
 
@@ -49,7 +49,7 @@ const indicatorClasses = computed(() => [
     >
     <span
       :class="indicatorClasses"
-      class="peer-focus-visible:ring-2 peer-focus-visible:ring-cp-accent-border peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-cp-surface"
+      class="peer-focus-visible:ring-2 peer-focus-visible:ring-cp-control-outline peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-cp-bg-container"
       aria-hidden="true"
     >
       <span class="size-1.5 rounded-full bg-current" />
@@ -57,7 +57,7 @@ const indicatorClasses = computed(() => [
     <span v-if="$slots.default" class="min-w-0 flex-1">
       <slot />
     </span>
-    <span v-else-if="showLabel" class="text-[13px] leading-none font-emphasis">
+    <span v-else-if="showLabel" class="text-cp leading-none font-emphasis">
       {{ label }}
     </span>
   </label>
diff --git a/frontend/src/components/base/BaseRange.vue b/frontend/src/components/base/BaseRange.vue
new file mode 100644
index 000000000..1e11f5b8e
--- /dev/null
+++ b/frontend/src/components/base/BaseRange.vue
@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    label: string
+    min?: number
+    max?: number
+    step?: number
+    unit?: string
+    disabled?: boolean
+  }>(),
+  {
+    min: 0,
+    max: 100,
+    step: 1,
+    unit: undefined,
+    disabled: false,
+  },
+)
+
+const model = defineModel<number>({ required: true })
+
+const rangeStyle = computed<CSSProperties>(() => {
+  const span = props.max - props.min
+  const progress = span > 0 ? ((model.value - props.min) / span) * 100 : 0
+  return {
+    '--base-range-progress': `${Math.min(100, Math.max(0, progress))}%`,
+  }
+})
+
+const valueText = computed(() => `${model.value}${props.unit ?? ''}`)
+
+function updateModel(event: Event) {
+  const value = (event.target as HTMLInputElement).valueAsNumber
+  if (Number.isFinite(value))
+    model.value = value
+}
+</script>
+
+<template>
+  <input
+    :value="model"
+    type="range"
+    :min="min"
+    :max="max"
+    :step="step"
+    :disabled="disabled"
+    :aria-label="label"
+    :aria-valuetext="valueText"
+    class="base-range h-5 w-full"
+    :style="rangeStyle"
+    @input="updateModel"
+  >
+</template>
+
+<style scoped>
+.base-range {
+  appearance: none;
+  cursor: pointer;
+  background: transparent;
+  outline: none;
+}
+
+.base-range::-webkit-slider-runnable-track {
+  height: 4px;
+  border-radius: 999px;
+  background: linear-gradient(
+    to right,
+    var(--cp-color-primary) 0 var(--base-range-progress),
+    var(--cp-color-fill-secondary) var(--base-range-progress) 100%
+  );
+}
+
+.base-range::-webkit-slider-thumb {
+  width: 14px;
+  height: 14px;
+  margin-top: -5px;
+  appearance: none;
+  border: 2px solid var(--cp-color-bg-container);
+  border-radius: 999px;
+  background: var(--cp-color-primary);
+  transition:
+    box-shadow 150ms ease,
+    transform 150ms ease;
+}
+
+.base-range::-moz-range-track {
+  height: 4px;
+  border-radius: 999px;
+  background: var(--cp-color-fill-secondary);
+}
+
+.base-range::-moz-range-progress {
+  height: 4px;
+  border-radius: 999px;
+  background: var(--cp-color-primary);
+}
+
+.base-range::-moz-range-thumb {
+  width: 10px;
+  height: 10px;
+  border: 2px solid var(--cp-color-bg-container);
+  border-radius: 999px;
+  background: var(--cp-color-primary);
+  transition:
+    box-shadow 150ms ease,
+    transform 150ms ease;
+}
+
+.base-range:hover::-webkit-slider-thumb {
+  transform: scale(1.08);
+}
+
+.base-range:hover::-moz-range-thumb {
+  transform: scale(1.08);
+}
+
+.base-range:focus-visible::-webkit-slider-thumb {
+  box-shadow: 0 0 0 3px var(--cp-color-primary-bg-hover);
+}
+
+.base-range:focus-visible::-moz-range-thumb {
+  box-shadow: 0 0 0 3px var(--cp-color-primary-bg-hover);
+}
+
+.base-range:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .base-range::-webkit-slider-thumb {
+    transition: none;
+  }
+
+  .base-range::-moz-range-thumb {
+    transition: none;
+  }
+}
+</style>
diff --git a/frontend/src/components/base/BaseScrollbar.vue b/frontend/src/components/base/BaseScrollbar.vue
index 8a1d94fd0..6b8e7b250 100644
--- a/frontend/src/components/base/BaseScrollbar.vue
+++ b/frontend/src/components/base/BaseScrollbar.vue
@@ -9,12 +9,14 @@ const props = withDefaults(
     height?: string
     horizontal?: boolean
     vertical?: boolean
+    alwaysVisible?: boolean
   }>(),
   {
     maxHeight: undefined,
     height: undefined,
     horizontal: false,
     vertical: true,
+    alwaysVisible: false,
   },
 )
 
@@ -64,10 +66,10 @@ const { start: startHideTimer, stop: stopHideTimer } = useTimeoutFn(hideScrollba
 const canScrollY = computed(() => thumbHeight.value > 0)
 const canScrollX = computed(() => horizontalThumbWidth.value > 0)
 const verticalScrollbarVisible = computed(
-  () => dragging.value || verticalTrackHovering.value || visible.value,
+  () => props.alwaysVisible || dragging.value || verticalTrackHovering.value || visible.value,
 )
 const horizontalScrollbarVisible = computed(
-  () => horizontalDragging.value || horizontalTrackHovering.value || visible.value,
+  () => props.alwaysVisible || horizontalDragging.value || horizontalTrackHovering.value || visible.value,
 )
 const thumbStyle = computed(() => ({
   height: `${thumbHeight.value}px`,
@@ -510,8 +512,8 @@ defineExpose({
       ]"
     >
       <div
-        class="w-1.5 rounded-full bg-(--cp-scrollbar-thumb) transition-colors duration-200 hover:bg-(--cp-scrollbar-thumb-hover)"
-        :class="dragging ? 'bg-(--cp-scrollbar-thumb-hover)' : ''"
+        class="w-1.5 rounded-full bg-(--cp-scrollbar-thumb-bg) transition-colors duration-200 hover:bg-(--cp-scrollbar-thumb-hover-bg)"
+        :class="dragging ? 'bg-(--cp-scrollbar-thumb-hover-bg)' : ''"
         :style="thumbStyle"
         @pointerdown="handleThumbPointerDown"
       />
@@ -528,8 +530,8 @@ defineExpose({
       ]"
     >
       <div
-        class="h-1.5 rounded-full bg-(--cp-scrollbar-thumb) transition-colors duration-200 hover:bg-(--cp-scrollbar-thumb-hover)"
-        :class="horizontalDragging ? 'bg-(--cp-scrollbar-thumb-hover)' : ''"
+        class="h-1.5 rounded-full bg-(--cp-scrollbar-thumb-bg) transition-colors duration-200 hover:bg-(--cp-scrollbar-thumb-hover-bg)"
+        :class="horizontalDragging ? 'bg-(--cp-scrollbar-thumb-hover-bg)' : ''"
         :style="horizontalThumbStyle"
         @pointerdown="handleHorizontalThumbPointerDown"
       />
@@ -549,6 +551,6 @@ defineExpose({
 }
 
 .base-scrollbar-track-y {
-  top: var(--cp-scrollbar-track-top, 0.25rem);
+  top: var(--cp-scrollbar-track-inset-block-start, 0.25rem);
 }
 </style>
diff --git a/frontend/src/components/base/BaseSegmented.vue b/frontend/src/components/base/BaseSegmented.vue
index d7815c1ac..34fcf69d2 100644
--- a/frontend/src/components/base/BaseSegmented.vue
+++ b/frontend/src/components/base/BaseSegmented.vue
@@ -45,13 +45,13 @@ const indicatorStyle = computed(() => ({
 
 const rootClasses: Record<SegmentedSize, string> = {
   sm: 'h-cp-control-sm',
-  md: 'h-cp-control-md',
+  md: 'h-cp-control',
   lg: 'h-cp-control-lg',
 }
 const optionClasses: Record<SegmentedSize, string> = {
-  sm: 'h-6.5 px-2 text-[11px]',
+  sm: 'h-6.5 px-2 text-cp-xs',
   md: 'h-8 px-3 text-xs',
-  lg: 'h-9.5 px-4 text-[13px]',
+  lg: 'h-9.5 px-4 text-cp',
 }
 
 function enabledIndexes() {
@@ -97,7 +97,7 @@ async function handleKeydown(event: KeyboardEvent, index: number) {
 
 <template>
   <div
-    class="relative inline-grid items-center rounded-cp-control bg-cp-muted p-0.75"
+    class="relative inline-grid items-center rounded-cp bg-cp-fill-tertiary p-0.75"
     :class="rootClasses[size]"
     :style="gridStyle"
     role="radiogroup"
@@ -106,20 +106,20 @@ async function handleKeydown(event: KeyboardEvent, index: number) {
   >
     <span
       v-if="options.length > 0"
-      class="pointer-events-none absolute inset-y-0.75 left-0.75 rounded-cp-control bg-cp-surface shadow-cp-control transition-transform duration-200 ease-out motion-reduce:transition-none"
+      class="pointer-events-none absolute inset-y-0.75 left-0.75 rounded-cp bg-cp-bg-container shadow-cp-tertiary transition-transform duration-200 ease-out motion-reduce:transition-none"
       :style="indicatorStyle"
       aria-hidden="true"
     />
     <button
       v-for="(option, index) in options"
       :key="option.value"
-      class="relative z-10 inline-flex min-w-0 touch-manipulation items-center justify-center gap-1.5 rounded-cp-control border-0 bg-transparent leading-none font-emphasis outline-none transition-colors duration-150 focus-visible:ring-2 focus-visible:ring-cp-accent-border motion-reduce:transition-none"
+      class="relative z-10 inline-flex min-w-0 touch-manipulation items-center justify-center gap-1.5 rounded-cp border-0 bg-transparent leading-none font-emphasis outline-none transition-colors duration-150 focus-visible:ring-2 focus-visible:ring-cp-control-outline motion-reduce:transition-none"
       :class="[
         optionClasses[size],
         model === option.value
-          ? 'text-cp-primary'
-          : 'text-cp-secondary hover:text-cp-primary',
-        disabled || option.disabled ? 'cursor-not-allowed opacity-60 hover:text-cp-secondary' : undefined,
+          ? 'text-cp-text'
+          : 'text-cp-text-secondary hover:text-cp-text',
+        disabled || option.disabled ? 'cursor-not-allowed opacity-60 hover:text-cp-text-secondary' : undefined,
         display === 'icon' ? 'px-0' : undefined,
       ]"
       type="button"
diff --git a/frontend/src/components/base/BaseSelect.vue b/frontend/src/components/base/BaseSelect.vue
index cde57ba89..7007ec125 100644
--- a/frontend/src/components/base/BaseSelect.vue
+++ b/frontend/src/components/base/BaseSelect.vue
@@ -76,18 +76,18 @@ const sizeConfig: Record<
 > = {
   md: {
     trigger:
-      'h-cp-control-md px-3.5 pr-9 text-[13px] rounded-cp-control',
-    option: 'h-8.5 px-3 text-[13px]',
+      'h-cp-control px-3.5 pr-9 text-cp rounded-cp',
+    option: 'h-8.5 px-3 text-cp',
     icon: 16,
   },
   sm: {
-    trigger: 'h-cp-control-sm px-2.5 pr-7 text-xs rounded-cp-control',
+    trigger: 'h-cp-control-sm px-2.5 pr-7 text-xs rounded-cp',
     option: 'h-8 px-2.5 text-xs',
     icon: 14,
   },
   lg: {
-    trigger: 'h-cp-control-lg px-4 pr-10 text-[14px] rounded-cp-control',
-    option: 'h-10 px-3.5 text-[14px]',
+    trigger: 'h-cp-control-lg px-4 pr-10 text-cp-lg rounded-cp',
+    option: 'h-10 px-3.5 text-cp-lg',
     icon: 17,
   },
 }
@@ -98,20 +98,20 @@ const triggerClasses = computed(() => [
   'relative inline-flex w-full min-w-0 items-center gap-2 overflow-visible border-0 text-left font-emphasis leading-none shadow-cp-input outline-none transition-[background-color,box-shadow,color] duration-[160ms]',
   sizeConfig[props.size].trigger,
   props.disabled
-    ? 'cursor-not-allowed bg-cp-disabled text-cp-disabled-text shadow-none'
+    ? 'cursor-not-allowed bg-cp-bg-container-disabled text-cp-text-disabled shadow-none'
     : invalid.value
-      ? 'cursor-pointer bg-(--cp-input-error-soft-bg) text-cp-danger-text shadow-cp-input-error'
+      ? 'cursor-pointer bg-(--cp-input-error-active-bg) text-cp-error-text shadow-cp-input-error-active'
       : open.value
-        ? 'cursor-pointer bg-(--cp-input-soft-bg-focus) text-cp-primary shadow-cp-input-focus'
+        ? 'cursor-pointer bg-(--cp-input-active-bg) text-cp-text shadow-cp-input-active'
         : [
-            'cursor-pointer bg-[var(--cp-input-current-bg,var(--cp-input-context-bg))] text-cp-primary',
-            'hover:bg-[var(--cp-input-current-bg-hover,var(--cp-input-context-bg-hover))] hover:shadow-cp-input-hover',
-            'focus-visible:bg-(--cp-input-soft-bg-focus) focus-visible:shadow-cp-input-focus',
+            'cursor-pointer bg-[var(--cp-input-bg)] text-cp-text',
+            'hover:bg-[var(--cp-input-hover-bg)] hover:shadow-cp-input-hover',
+            'focus-visible:bg-(--cp-input-active-bg) focus-visible:shadow-cp-input-active',
           ],
 ])
 
 const popoverClasses = computed(() => [
-  'fixed z-50 flex flex-col gap-1 rounded-cp-overlay border-0 bg-cp-surface p-1 shadow-cp-popover',
+  'fixed z-50 flex flex-col gap-1 rounded-cp-lg border-0 bg-cp-bg-container p-1 shadow-cp',
   props.options.length > 6 ? 'cp-scrollbar overflow-y-auto' : 'overflow-visible',
 ])
 
@@ -255,15 +255,15 @@ function handleTriggerKeydown(event: KeyboardEvent) {
 
 function optionClasses(option: SelectOption, index: number) {
   return [
-    'flex w-full touch-manipulation items-center gap-2 rounded-cp-control-sm border-0 px-3 text-left font-emphasis leading-none outline-none transition-colors motion-reduce:transition-none',
+    'flex w-full touch-manipulation items-center gap-2 rounded-cp-sm border-0 px-3 text-left font-emphasis leading-none outline-none transition-colors motion-reduce:transition-none',
     sizeConfig[props.size].option,
     option.disabled
-      ? 'cursor-not-allowed bg-transparent text-cp-disabled-text'
+      ? 'cursor-not-allowed bg-transparent text-cp-text-disabled'
       : option.value === model.value
-        ? 'cursor-pointer bg-cp-info-bg text-cp-info-text'
+        ? 'cursor-pointer bg-cp-control-item-bg-active text-cp-primary-text'
         : activeIndex.value === index
-          ? 'cursor-pointer bg-cp-default-hover text-cp-primary'
-          : 'cursor-pointer bg-transparent text-cp-primary hover:bg-cp-default-hover',
+          ? 'cursor-pointer bg-cp-bg-text-hover text-cp-text'
+          : 'cursor-pointer bg-transparent text-cp-text hover:bg-cp-bg-text-hover',
   ]
 }
 
@@ -316,10 +316,10 @@ useEventListener(window, 'scroll', updatePopoverPositionThrottled, { capture: tr
         class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 transition-transform"
         :class="
           disabled
-            ? 'text-cp-disabled-icon'
+            ? 'text-cp-text-disabled'
             : open
-              ? 'rotate-180 text-cp-info'
-              : 'text-cp-muted-text'
+              ? 'rotate-180 text-cp-primary-text'
+              : 'text-cp-text-quaternary'
         "
         :size="sizeConfig[size].icon"
         aria-hidden="true"
@@ -346,7 +346,7 @@ useEventListener(window, 'scroll', updatePopoverPositionThrottled, { capture: tr
         >
           <div
             v-if="options.length === 0"
-            class="flex h-8.5 items-center rounded-cp-control-sm px-3 text-[13px] leading-none font-emphasis text-cp-muted-text"
+            class="flex h-8.5 items-center rounded-cp-sm px-3 text-cp leading-none font-emphasis text-cp-text-quaternary"
           >
             {{ emptyText }}
           </div>
@@ -369,7 +369,7 @@ useEventListener(window, 'scroll', updatePopoverPositionThrottled, { capture: tr
               <span class="min-w-0 flex-1 truncate">{{ option.label }}</span>
               <Check
                 v-if="option.value === model"
-                class="shrink-0 text-cp-info"
+                class="shrink-0 text-cp-primary-text"
                 :size="size === 'sm' ? 13 : size === 'lg' ? 17 : 15"
                 aria-hidden="true"
               />
diff --git a/frontend/src/components/base/BaseSkeleton.vue b/frontend/src/components/base/BaseSkeleton.vue
new file mode 100644
index 000000000..647fa0a71
--- /dev/null
+++ b/frontend/src/components/base/BaseSkeleton.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+type SkeletonShape = 'text' | 'block' | 'circle'
+
+const props = withDefaults(
+  defineProps<{
+    as?: keyof HTMLElementTagNameMap
+    shape?: SkeletonShape
+    animated?: boolean
+  }>(),
+  {
+    as: 'span',
+    shape: 'block',
+    animated: true,
+  },
+)
+
+const shapeClasses: Record<SkeletonShape, string> = {
+  text: 'h-3 rounded-full',
+  block: 'rounded-cp',
+  circle: 'rounded-full',
+}
+
+const classes = computed(() => [
+  'block bg-cp-fill-secondary',
+  shapeClasses[props.shape],
+  props.animated ? 'motion-safe:animate-cp-skeleton motion-reduce:animate-none' : undefined,
+])
+</script>
+
+<template>
+  <component
+    :is="as"
+    aria-hidden="true"
+    :class="classes"
+  />
+</template>
diff --git a/frontend/src/components/base/BaseSwitch.vue b/frontend/src/components/base/BaseSwitch.vue
index 69a51f5cb..76fdc515a 100644
--- a/frontend/src/components/base/BaseSwitch.vue
+++ b/frontend/src/components/base/BaseSwitch.vue
@@ -18,10 +18,10 @@ const model = defineModel<boolean>({ default: false })
 const trackClasses = computed(() => [
   'relative inline-flex h-6 w-11 shrink-0 items-center rounded-full p-0.5 transition-[background-color,box-shadow] duration-180 motion-reduce:transition-none',
   props.disabled
-    ? 'bg-cp-disabled shadow-none'
+    ? 'bg-cp-bg-container-disabled shadow-none'
     : model.value
-      ? 'bg-cp-accent shadow-cp-control group-hover:bg-cp-accent-hover'
-      : 'bg-cp-muted shadow-cp-control group-hover:bg-cp-default-active',
+      ? 'bg-cp-primary shadow-cp-tertiary group-hover:bg-cp-primary-hover'
+      : 'bg-cp-fill-tertiary shadow-cp-tertiary group-hover:bg-cp-bg-text-active',
 ])
 </script>
 
@@ -42,14 +42,14 @@ const trackClasses = computed(() => [
     >
     <span
       :class="trackClasses"
-      class="peer-focus-visible:ring-2 peer-focus-visible:ring-cp-accent-border peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-cp-surface"
+      class="peer-focus-visible:ring-2 peer-focus-visible:ring-cp-control-outline peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-cp-bg-container"
       aria-hidden="true"
     >
       <span
-        class="size-5 rounded-full bg-cp-surface shadow-cp-control transition-transform duration-180 ease-out motion-reduce:transition-none"
+        class="size-5 rounded-full bg-cp-bg-container shadow-cp-tertiary transition-transform duration-180 ease-out motion-reduce:transition-none"
         :class="model ? 'translate-x-5' : 'translate-x-0'"
       />
     </span>
-    <span v-if="showLabel" class="text-[13px] font-emphasis text-cp-primary">{{ label }}</span>
+    <span v-if="showLabel" class="text-cp font-emphasis text-cp-text">{{ label }}</span>
   </label>
 </template>
diff --git a/frontend/src/components/base/BaseTable/BaseTablePagination.vue b/frontend/src/components/base/BaseTable/BaseTablePagination.vue
index 5de89d684..7e0a44e9b 100644
--- a/frontend/src/components/base/BaseTable/BaseTablePagination.vue
+++ b/frontend/src/components/base/BaseTable/BaseTablePagination.vue
@@ -51,10 +51,10 @@ function goToPage(page: number) {
 
 function paginationPageClass(page: number) {
   return [
-    'inline-flex size-8 items-center justify-center rounded-cp-control border-0 text-xs font-bold leading-none transition-colors duration-150 outline-none',
+    'inline-flex size-8 items-center justify-center rounded-cp border-0 text-xs font-bold leading-none transition-colors duration-150 outline-none',
     page === currentPage.value
-      ? 'cursor-default bg-cp-accent text-cp-accent-on'
-      : 'cursor-pointer bg-cp-subtle text-cp-primary hover:bg-cp-default-hover focus-visible:ring-2 focus-visible:ring-cp-accent-border focus-visible:ring-offset-2 focus-visible:ring-offset-cp-surface',
+      ? 'cursor-default bg-(--cp-button-primary-bg) text-(--cp-button-primary-color)'
+      : 'cursor-pointer bg-cp-fill-quaternary text-cp-text hover:bg-cp-bg-text-hover focus-visible:ring-2 focus-visible:ring-cp-control-outline focus-visible:ring-offset-2 focus-visible:ring-offset-cp-bg-container',
   ]
 }
 </script>
@@ -64,7 +64,7 @@ function paginationPageClass(page: number) {
     class="mt-2 flex min-h-10 shrink-0 flex-wrap items-center justify-between gap-3 px-0 py-1"
   >
     <div
-      class="flex min-w-0 items-center gap-2.5 text-[12px] font-emphasis text-cp-secondary"
+      class="flex min-w-0 items-center gap-2.5 text-cp-sm font-emphasis text-cp-text-secondary"
     >
       <span class="whitespace-nowrap">共 {{ pagination.total }} 条</span>
     </div>
@@ -93,7 +93,7 @@ function paginationPageClass(page: number) {
         <template v-for="(item, index) in pagerItems" :key="`${item}-${index}`">
           <span
             v-if="item === 'ellipsis'"
-            class="inline-flex size-8 items-center justify-center text-xs font-bold text-cp-muted-text"
+            class="inline-flex size-8 items-center justify-center text-xs font-bold text-cp-text-quaternary"
           >
             …
           </span>
diff --git a/frontend/src/components/base/BaseTable/columns.ts b/frontend/src/components/base/BaseTable/columns.ts
index eea873967..5d245655d 100644
--- a/frontend/src/components/base/BaseTable/columns.ts
+++ b/frontend/src/components/base/BaseTable/columns.ts
@@ -83,7 +83,7 @@ const columnRecipes: Record<TableColumnKind, ColumnRecipe> = {
     size: 'lg',
     align: 'left',
     truncate: true,
-    contentClass: 'text-cp-secondary',
+    contentClass: 'text-cp-text-secondary',
   },
   status: {
     size: 'md',
@@ -94,25 +94,25 @@ const columnRecipes: Record<TableColumnKind, ColumnRecipe> = {
     size: 'md',
     align: 'right',
     truncate: false,
-    contentClass: 'font-mono tabular-nums text-cp-secondary',
+    contentClass: 'font-mono tabular-nums text-cp-text-secondary',
   },
   datetime: {
     size: 'xl',
     align: 'left',
     truncate: false,
-    contentClass: 'whitespace-nowrap font-mono text-[12px] tabular-nums text-cp-secondary',
+    contentClass: 'whitespace-nowrap font-mono text-cp-sm tabular-nums text-cp-text-secondary',
   },
   mono: {
     size: 'xl',
     align: 'left',
     truncate: true,
-    contentClass: 'font-mono text-[12px] font-emphasis',
+    contentClass: 'font-mono text-cp-sm font-emphasis',
   },
   index: {
     size: 'xs',
     align: 'center',
     truncate: false,
-    contentClass: 'font-mono tabular-nums text-cp-secondary',
+    contentClass: 'font-mono tabular-nums text-cp-text-secondary',
   },
   selection: {
     size: 'xs',
diff --git a/frontend/src/components/base/BaseTable/index.vue b/frontend/src/components/base/BaseTable/index.vue
index 9f3faddce..99192399e 100644
--- a/frontend/src/components/base/BaseTable/index.vue
+++ b/frontend/src/components/base/BaseTable/index.vue
@@ -85,14 +85,14 @@ watch([() => displayRows.value.length, () => props.columns], async () => {
 })
 
 const headerRowClass = computed(() => [
-  props.density === 'compact' ? 'h-8 text-[11px]' : 'h-10 text-[12px]',
-  'font-bold text-cp-secondary',
+  props.density === 'compact' ? 'h-8 text-cp-xs' : 'h-10 text-cp-sm',
+  'font-bold text-cp-text-secondary',
 ])
 const bodyRowClass = computed(() =>
-  props.density === 'compact' ? 'h-cp-table-row-min-compact' : 'h-cp-table-row-min',
+  props.density === 'compact' ? 'h-cp-table-row-sm' : 'h-cp-table-row',
 )
 const cellPaddingClass = computed(() => props.density === 'compact' ? 'px-3' : 'px-4')
-const bodyTextClass = computed(() => props.density === 'compact' ? 'text-[12px]' : 'text-[13px]')
+const bodyTextClass = computed(() => props.density === 'compact' ? 'text-cp-sm' : 'text-cp')
 const bodyCellFrameClass = computed(() => props.density === 'compact'
   ? 'border-y-2 border-transparent bg-clip-padding'
   : 'border-y-[3px] border-transparent bg-clip-padding')
@@ -100,8 +100,8 @@ const firstRowTopGapClass = computed(() =>
   props.density === 'compact' ? 'border-t-4' : 'border-t-[6px]',
 )
 const bodyCellContentClass = computed(() => props.density === 'compact'
-  ? 'min-h-[calc(var(--cp-table-row-min-height-compact)-4px)]'
-  : 'min-h-[calc(var(--cp-table-row-min-height)-6px)]')
+  ? 'min-h-[calc(var(--cp-table-row-height-sm)-4px)]'
+  : 'min-h-[calc(var(--cp-table-row-height)-6px)]')
 
 function getRowKey(row: Row, index: number) {
   if (typeof props.rowKey === 'function')
@@ -120,16 +120,16 @@ function isRowExpanded(row: Row, index: number) {
 
 function rowBackgroundClass(row: Row, index: number) {
   if (isRowSelected(row, index))
-    return 'bg-cp-tertiary-bg'
+    return 'bg-(--cp-table-row-selected-bg)'
   if (index % 2 === 1)
-    return 'bg-cp-subtle'
-  return 'bg-cp-surface'
+    return 'bg-(--cp-table-row-stripe-bg)'
+  return 'bg-(--cp-table-row-bg)'
 }
 
 function rowClass() {
   return [
     bodyRowClass.value,
-    'hover:[&>td]:bg-cp-default-hover',
+    'hover:[&>td]:bg-(--cp-table-row-hover-bg)',
   ]
 }
 
@@ -142,8 +142,8 @@ function stickyClass(column: ResolvedTableColumn<Row>, header = false) {
     header ? 'z-40' : 'z-20',
     showShadow
       ? column.sticky === 'left'
-        ? 'shadow-[8px_0_14px_-14px_var(--cp-shadow-sticky)]'
-        : 'shadow-[-8px_0_14px_-14px_var(--cp-shadow-sticky)]'
+        ? 'shadow-[8px_0_14px_-14px_var(--cp-color-shadow)]'
+        : 'shadow-[-8px_0_14px_-14px_var(--cp-color-shadow)]'
       : undefined,
   ]
 }
@@ -194,8 +194,8 @@ function sortButtonLabel(column: ResolvedTableColumn<Row>) {
         ref="scrollbar"
         class="min-h-0 flex-1"
         :class="density === 'compact'
-          ? '[--cp-scrollbar-track-top:2.25rem]'
-          : '[--cp-scrollbar-track-top:2.75rem]'"
+          ? '[--cp-scrollbar-track-inset-block-start:2.25rem]'
+          : '[--cp-scrollbar-track-inset-block-start:2.75rem]'"
         horizontal
         @scroll="handleTableScroll"
       >
@@ -216,12 +216,12 @@ function sortButtonLabel(column: ResolvedTableColumn<Row>) {
               <th
                 v-for="(column, columnIndex) in computedColumns"
                 :key="column.key"
-                class="sticky top-0 z-30 whitespace-nowrap bg-cp-muted shadow-[0_10px_16px_-18px_var(--cp-shadow-sticky)]"
+                class="sticky top-0 z-30 whitespace-nowrap bg-(--cp-table-header-bg) shadow-[0_10px_16px_-18px_var(--cp-color-shadow)]"
                 :class="[
                   column.paddingClass ?? cellPaddingClass,
                   alignClass(column),
-                  columnIndex === 0 ? 'rounded-l-cp-control' : undefined,
-                  columnIndex === computedColumns.length - 1 ? 'rounded-r-cp-control' : undefined,
+                  columnIndex === 0 ? 'rounded-l-cp' : undefined,
+                  columnIndex === computedColumns.length - 1 ? 'rounded-r-cp' : undefined,
                   columnIndex === computedColumns.length - 1 ? 'pr-6' : undefined,
                   stickyClass(column, true),
                 ]"
@@ -233,7 +233,7 @@ function sortButtonLabel(column: ResolvedTableColumn<Row>) {
                   <button
                     v-if="column.sortable"
                     type="button"
-                    class="inline-flex max-w-full touch-manipulation items-center gap-1 border-0 bg-transparent p-0 text-inherit outline-none transition-colors hover:text-cp-primary focus-visible:text-cp-accent motion-reduce:transition-none"
+                    class="inline-flex max-w-full touch-manipulation items-center gap-1 border-0 bg-transparent p-0 text-inherit outline-none transition-colors hover:text-cp-text focus-visible:text-cp-primary-text motion-reduce:transition-none"
                     :aria-label="sortButtonLabel(column)"
                     :title="sortButtonLabel(column)"
                     @click="toggleColumnSort(column)"
@@ -244,12 +244,12 @@ function sortButtonLabel(column: ResolvedTableColumn<Row>) {
                     <span class="inline-flex shrink-0 -translate-y-px flex-col gap-px" aria-hidden="true">
                       <Triangle
                         class="size-1.25 fill-current"
-                        :class="columnSortDirection(column) === 'asc' ? 'text-cp-accent' : 'text-cp-tertiary'"
+                        :class="columnSortDirection(column) === 'asc' ? 'text-cp-primary-text' : 'text-cp-text-tertiary'"
                         :stroke-width="0"
                       />
                       <Triangle
                         class="size-1.25 rotate-180 fill-current"
-                        :class="columnSortDirection(column) === 'desc' ? 'text-cp-accent' : 'text-cp-tertiary'"
+                        :class="columnSortDirection(column) === 'desc' ? 'text-cp-primary-text' : 'text-cp-text-tertiary'"
                         :stroke-width="0"
                       />
                     </span>
@@ -275,8 +275,8 @@ function sortButtonLabel(column: ResolvedTableColumn<Row>) {
                     column.contentClass,
                     alignClass(column),
                     index === 0 ? firstRowTopGapClass : undefined,
-                    columnIndex === 0 ? 'rounded-l-cp-control' : undefined,
-                    columnIndex === computedColumns.length - 1 ? 'rounded-r-cp-control pr-6' : undefined,
+                    columnIndex === 0 ? 'rounded-l-cp' : undefined,
+                    columnIndex === computedColumns.length - 1 ? 'rounded-r-cp pr-6' : undefined,
                     stickyClass(column),
                     rowBackgroundClass(row, index),
                   ]"
@@ -300,7 +300,7 @@ function sortButtonLabel(column: ResolvedTableColumn<Row>) {
               <tr v-if="isRowExpanded(row, index)">
                 <td
                   :colspan="computedColumns.length"
-                  class="rounded-cp-control border-y-transparent bg-cp-subtle bg-clip-padding p-0"
+                  class="rounded-cp border-y-transparent bg-cp-fill-quaternary bg-clip-padding p-0"
                   :class="bodyCellFrameClass"
                 >
                   <slot name="expanded" :row="row" :index="index" />
diff --git a/frontend/src/components/base/BaseTextarea.vue b/frontend/src/components/base/BaseTextarea.vue
index d21c2ebce..606799838 100644
--- a/frontend/src/components/base/BaseTextarea.vue
+++ b/frontend/src/components/base/BaseTextarea.vue
@@ -47,17 +47,17 @@ const controlAttrs = computed(() => Object.fromEntries(
 
 const sizeClasses: Record<TextareaSize, string> = {
   sm: 'px-3 py-2.5 text-xs',
-  md: 'px-3.5 py-3 text-[13px]',
-  lg: 'px-4 py-3.5 text-[14px]',
+  md: 'px-3.5 py-3 text-cp',
+  lg: 'px-4 py-3.5 text-cp-lg',
 }
 
 const textareaClasses = computed(() => [
-  'cp-scrollbar w-full resize-none rounded-cp-control border-0 bg-[var(--cp-input-current-bg,var(--cp-input-context-bg))] text-cp-primary shadow-cp-input outline-none transition-[background-color,box-shadow,color] duration-160 placeholder:text-cp-muted-text motion-reduce:transition-none',
-  'hover:bg-[var(--cp-input-current-bg-hover,var(--cp-input-context-bg-hover))] hover:shadow-cp-input-hover focus:bg-(--cp-input-soft-bg-focus) focus:shadow-cp-input-focus',
-  'disabled:cursor-not-allowed disabled:bg-cp-disabled disabled:text-cp-disabled-text disabled:shadow-none',
+  'cp-scrollbar w-full resize-none rounded-cp border-0 bg-[var(--cp-input-bg)] text-cp-text shadow-cp-input outline-none transition-[background-color,box-shadow,color] duration-160 placeholder:text-cp-text-quaternary motion-reduce:transition-none',
+  'hover:bg-[var(--cp-input-hover-bg)] hover:shadow-cp-input-hover focus:bg-(--cp-input-active-bg) focus:shadow-cp-input-active',
+  'disabled:cursor-not-allowed disabled:bg-cp-bg-container-disabled disabled:text-cp-text-disabled disabled:shadow-none',
   'leading-[1.55] font-emphasis',
   sizeClasses[props.size],
-  invalid.value ? 'bg-(--cp-input-error-soft-bg) shadow-cp-input-error' : undefined,
+  invalid.value ? 'bg-(--cp-input-error-active-bg) shadow-cp-input-error-active' : undefined,
 ])
 </script>
 
diff --git a/frontend/src/components/base/BaseToast/BaseToast.vue b/frontend/src/components/base/BaseToast/BaseToast.vue
index fe1631a97..51f11faea 100644
--- a/frontend/src/components/base/BaseToast/BaseToast.vue
+++ b/frontend/src/components/base/BaseToast/BaseToast.vue
@@ -24,8 +24,8 @@ const colorClasses = {
     icon: 'text-cp-success',
   },
   error: {
-    iconBg: 'bg-cp-danger-bg',
-    icon: 'text-cp-danger',
+    iconBg: 'bg-cp-error-bg',
+    icon: 'text-cp-error',
   },
   warning: {
     iconBg: 'bg-cp-warning-bg',
@@ -45,12 +45,12 @@ const colorClasses = {
         <article
           v-for="message in toast.messages"
           :key="message.id"
-          class="pointer-events-auto flex min-h-16 w-90 max-w-[calc(100vw-1.5rem)] items-center gap-3 rounded-cp-surface bg-cp-surface px-3.5 py-3 shadow-cp-popover"
+          class="pointer-events-auto flex min-h-16 w-90 max-w-[calc(100vw-1.5rem)] items-center gap-3 rounded-cp-card bg-cp-bg-container px-3.5 py-3 shadow-cp"
           :role="message.type === 'error' ? 'alert' : 'status'"
           aria-atomic="true"
         >
           <div
-            class="flex size-8.5 shrink-0 items-center justify-center rounded-cp-control"
+            class="flex size-8.5 shrink-0 items-center justify-center rounded-cp"
             :class="colorClasses[message.type].iconBg"
           >
             <component
@@ -61,11 +61,11 @@ const colorClasses = {
           </div>
 
           <div class="flex min-w-0 flex-1 flex-col gap-1">
-            <p class="m-0 truncate text-[13px] leading-[1.15] font-bold text-cp-primary">
+            <p class="m-0 truncate text-cp leading-[1.15] font-bold text-cp-text">
               {{ message.title ?? titleMap[message.type] }}
             </p>
             <p
-              class="m-0 max-h-8 overflow-hidden text-xs leading-tight font-semibold text-cp-secondary"
+              class="m-0 max-h-8 overflow-hidden text-xs leading-tight font-semibold text-cp-text-secondary"
             >
               {{ message.message }}
             </p>
@@ -77,7 +77,7 @@ const colorClasses = {
             :label="`关闭${message.title ?? titleMap[message.type]}通知`"
             @click="toast.remove(message.id)"
           >
-            <X :size="16" class="text-cp-muted-text" />
+            <X :size="16" class="text-cp-text-quaternary" />
           </BaseIconButton>
         </article>
       </TransitionGroup>
diff --git a/frontend/src/components/charts/BaseChart.vue b/frontend/src/components/charts/BaseChart.vue
index d9288c9f2..de5562038 100644
--- a/frontend/src/components/charts/BaseChart.vue
+++ b/frontend/src/components/charts/BaseChart.vue
@@ -3,10 +3,8 @@ import type { EChartsOption } from 'echarts'
 import type { EChartsType } from 'echarts/core'
 import { useRafFn, useResizeObserver } from '@vueuse/core'
 import { init } from 'echarts/core'
-import { storeToRefs } from 'pinia'
-import { computed, nextTick, onBeforeUnmount, shallowRef, useTemplateRef, watch } from 'vue'
+import { computed, onBeforeUnmount, shallowRef, useTemplateRef, watch } from 'vue'
 
-import { useUiStore } from '@/stores/modules/ui'
 import '@/plugins/echarts'
 
 const props = withDefaults(
@@ -23,7 +21,6 @@ const chartElement = useTemplateRef<HTMLElement>('chart')
 const chartOption = shallowRef<EChartsOption>(props.option)
 const chart = shallowRef<EChartsType>()
 const pendingInitElement = shallowRef<HTMLElement>()
-const { themeRevision } = storeToRefs(useUiStore())
 
 const style = computed(() => ({
   height: `${props.height}px`,
@@ -71,18 +68,6 @@ function applyOption(option: EChartsOption) {
   chart.value.setOption(option, true)
 }
 
-async function recreateChartAfterThemeChange() {
-  await nextTick()
-  requestAnimationFrame(() => {
-    const element = chartElement.value
-    if (!element)
-      return
-    dispose()
-    ensureChart(element)
-    resize()
-  })
-}
-
 function dispose() {
   cancelPendingInit()
   chart.value?.dispose()
@@ -104,14 +89,6 @@ watch(
   { flush: 'post' },
 )
 
-watch(
-  themeRevision,
-  () => {
-    recreateChartAfterThemeChange()
-  },
-  { flush: 'post' },
-)
-
 watch(
   chartElement,
   (element) => {
diff --git a/frontend/src/components/charts/tooltip.ts b/frontend/src/components/charts/tooltip.ts
index c33f8ce39..9543e8202 100644
--- a/frontend/src/components/charts/tooltip.ts
+++ b/frontend/src/components/charts/tooltip.ts
@@ -30,7 +30,7 @@ export function chartTooltipStyle(
       fontFamily: options.fontFamily ?? 'Inter Variable, Inter, system-ui, sans-serif',
       fontWeight: options.fontWeight ?? 650,
     },
-    extraCssText: 'border-radius: 12px; box-shadow: var(--cp-shadow-popover);',
+    extraCssText: 'border-radius: 12px; box-shadow: var(--cp-box-shadow);',
   }
 
   if (!options.axisPointer)
diff --git a/frontend/src/composables/useChartPalette.ts b/frontend/src/composables/useChartPalette.ts
index 2d2731cab..9317c23ef 100644
--- a/frontend/src/composables/useChartPalette.ts
+++ b/frontend/src/composables/useChartPalette.ts
@@ -5,21 +5,21 @@ import { useThemeColor } from '@/composables/useThemeColor'
 export function useChartPalette() {
   const color = useThemeColor()
   const palette = computed(() => ({
-    textPrimary: color('--cp-text-primary', '#0E1726'),
-    textSecondary: color('--cp-text-secondary', '#64748B'),
-    textMuted: color('--cp-text-muted', '#94A3B8'),
-    surface: color('--cp-bg-surface', '#FFFFFF'),
-    surfaceMuted: color('--cp-bg-muted', '#F1F5F9'),
-    grid: color('--cp-bg-muted', '#F1F5F9'),
-    divider: color('--cp-divider-subtle', '#E2E8F0'),
-    border: color('--cp-default-border', '#E2E8F0'),
-    pointer: color('--cp-default-border-hover', '#CBD5E1'),
-    info: color('--cp-info', '#2563EB'),
-    success: color('--cp-success', '#10B981'),
-    warning: color('--cp-warning', '#F59E0B'),
-    danger: color('--cp-danger', '#EF4444'),
-    normal: color('--cp-normal', '#0F9F9A'),
-    reasoning: color('--cp-reasoning', '#8B5CF6'),
+    textPrimary: color('--cp-color-text', '#0E1726'),
+    textSecondary: color('--cp-color-text-secondary', '#64748B'),
+    textMuted: color('--cp-color-text-quaternary', '#94A3B8'),
+    surface: color('--cp-color-bg-container', '#FFFFFF'),
+    surfaceMuted: color('--cp-color-fill-tertiary', '#F1F5F9'),
+    grid: color('--cp-color-fill-tertiary', '#F1F5F9'),
+    divider: color('--cp-color-split', '#E2E8F0'),
+    border: color('--cp-color-border-secondary', '#E2E8F0'),
+    pointer: color('--cp-color-border', '#CBD5E1'),
+    info: color('--cp-color-info', '#2563EB'),
+    success: color('--cp-color-success', '#10B981'),
+    warning: color('--cp-color-warning', '#F59E0B'),
+    danger: color('--cp-color-error', '#EF4444'),
+    normal: color('--cp-color-status-normal', '#0F9F9A'),
+    reasoning: color('--cp-color-reasoning', '#8B5CF6'),
   }))
 
   return { color, palette }
diff --git a/frontend/src/composables/useThemeColor.ts b/frontend/src/composables/useThemeColor.ts
index 6c00e8e09..cb22fce77 100644
--- a/frontend/src/composables/useThemeColor.ts
+++ b/frontend/src/composables/useThemeColor.ts
@@ -1,12 +1,33 @@
-import { storeToRefs } from 'pinia'
+import type { InjectionKey, Ref } from 'vue'
 
-import { useUiStore } from '@/stores/modules/ui'
+import { storeToRefs } from 'pinia'
+import { inject, provide } from 'vue'
+
+import { useThemeStore } from '@/stores/modules/theme'
+
+export type ThemeColorTokens = Readonly<Record<string, string | number | undefined>>
+
+const themeColorTokensKey: InjectionKey<Readonly<Ref<ThemeColorTokens>>> = Symbol('theme-color-tokens')
+
+export function provideThemeColorTokens(tokens: Readonly<Ref<ThemeColorTokens>>) {
+  provide(themeColorTokensKey, tokens)
+}
 
 // 主题感知的 CSS 变量读取：themeRevision 作为响应式依赖，主题切换后
-// 引用该函数的 computed 会重算并读到新变量值。
+// 引用该函数的 computed 会重算并读到新变量值；影子预览优先读取其局部 Token。
 export function useThemeColor() {
-  const { themeRevision } = storeToRefs(useUiStore())
+  const scopedTokens = inject(themeColorTokensKey, null)
+  const { themeRevision } = storeToRefs(useThemeStore())
   return (name: string, fallback: string) => {
+    if (scopedTokens) {
+      const scopedValue = scopedTokens.value[name]
+      if (typeof scopedValue === 'string' && scopedValue.trim())
+        return scopedValue.trim()
+      if (typeof scopedValue === 'number')
+        return String(scopedValue)
+      return fallback
+    }
+
     void themeRevision.value
     return readCssVariable(name, fallback)
   }
diff --git a/frontend/src/directives/loading.ts b/frontend/src/directives/loading.ts
index b45e92c59..f17716481 100644
--- a/frontend/src/directives/loading.ts
+++ b/frontend/src/directives/loading.ts
@@ -28,7 +28,7 @@ const OVERLAY_BASE_CLASS = [
   'place-items-center',
   'rounded-[inherit]',
 ].join(' ')
-const OVERLAY_MASK_CLASS = 'bg-cp-surface/82 backdrop-blur-[4px]'
+const OVERLAY_MASK_CLASS = 'bg-cp-bg-container/82 backdrop-blur-[4px]'
 const PANEL_CLASS = [
   'inline-flex',
   'min-h-10',
@@ -41,14 +41,14 @@ const PANEL_CLASS = [
   'text-xs',
   'leading-[1.15]',
   'font-heavy',
-  'text-cp-secondary',
+  'text-cp-text-secondary',
 ].join(' ')
 const MARK_CLASS = [
   'inline-block',
   'size-4',
   'rounded-full',
   'animate-spin',
-  'bg-[radial-gradient(circle_at_center,var(--cp-bg-surface)_0_44%,transparent_46%),conic-gradient(from_0deg,var(--cp-normal)_0deg_105deg,var(--cp-info)_105deg_200deg,var(--cp-bg-muted)_200deg_360deg)]',
+  'bg-[radial-gradient(circle_at_center,var(--cp-color-bg-container)_0_44%,transparent_46%),conic-gradient(from_0deg,var(--cp-color-status-normal)_0deg_105deg,var(--cp-color-info)_105deg_200deg,var(--cp-color-fill-tertiary)_200deg_360deg)]',
 ].join(' ')
 const LABEL_CLASS = 'whitespace-nowrap'
 
diff --git a/frontend/src/layout/components/AppAboutModal.vue b/frontend/src/layout/components/AppAboutModal.vue
index d781890b4..38c66376c 100644
--- a/frontend/src/layout/components/AppAboutModal.vue
+++ b/frontend/src/layout/components/AppAboutModal.vue
@@ -53,15 +53,15 @@ const linkItems = [
     <div class="grid gap-5">
       <section class="flex min-w-0 items-center gap-3">
         <span
-          class="inline-flex size-9 shrink-0 items-center justify-center rounded-cp-control bg-cp-subtle font-mono text-[15px] leading-none font-extrabold text-cp-primary"
+          class="inline-flex size-9 shrink-0 items-center justify-center rounded-cp bg-cp-fill-quaternary font-mono text-cp-xl leading-none font-extrabold text-cp-text"
         >
           Z
         </span>
         <div class="min-w-0">
-          <p class="m-0 truncate text-[15px] leading-none font-heavy text-cp-primary">
+          <p class="m-0 truncate text-cp-xl leading-none font-heavy text-cp-text">
             {{ author }}
           </p>
-          <p class="mt-1.5 mb-0 text-[12px] leading-none font-emphasis text-cp-secondary">
+          <p class="mt-1.5 mb-0 text-cp-sm leading-none font-emphasis text-cp-text-secondary">
             Built by Zyy · Codex Proxy RS
           </p>
         </div>
@@ -71,20 +71,20 @@ const linkItems = [
         <div
           v-for="item in linkItems"
           :key="item.label"
-          class="group flex min-w-0 items-center justify-between gap-3 rounded-cp-control px-1 py-2.5 transition-colors hover:bg-cp-subtle"
+          class="group flex min-w-0 items-center justify-between gap-3 rounded-cp px-1 py-2.5 transition-colors hover:bg-cp-fill-quaternary"
         >
           <div class="flex min-w-0 items-center gap-3">
             <span
-              class="inline-flex size-8 shrink-0 items-center justify-center rounded-cp-control bg-cp-muted text-cp-primary"
+              class="inline-flex size-8 shrink-0 items-center justify-center rounded-cp bg-cp-fill-tertiary text-cp-text"
             >
               <component :is="item.icon" class="size-5" />
             </span>
             <div class="min-w-0">
-              <p class="m-0 text-[11px] leading-none font-heavy text-cp-muted-text">
+              <p class="m-0 text-cp-xs leading-none font-heavy text-cp-text-quaternary">
                 {{ item.label }}
               </p>
               <p
-                class="mt-2 mb-0 truncate font-mono text-[12px] leading-none font-bold text-cp-primary"
+                class="mt-2 mb-0 truncate font-mono text-cp-sm leading-none font-bold text-cp-text"
                 :title="item.value"
               >
                 {{ item.value }}
@@ -96,7 +96,7 @@ const linkItems = [
             :href="item.href"
             target="_blank"
             rel="noreferrer"
-            class="inline-flex size-7 shrink-0 items-center justify-center rounded-cp-control text-cp-muted-text transition-colors hover:bg-cp-muted hover:text-cp-info"
+            class="inline-flex size-7 shrink-0 items-center justify-center rounded-cp text-cp-text-quaternary transition-colors hover:bg-cp-fill-tertiary hover:text-cp-link"
             :aria-label="`打开 ${item.label}`"
           >
             <ExternalLink class="size-3.5" />
@@ -104,7 +104,7 @@ const linkItems = [
         </div>
       </section>
 
-      <p class="m-0 font-mono text-[11px] leading-none font-emphasis text-cp-muted-text">
+      <p class="m-0 font-mono text-cp-xs leading-none font-emphasis text-cp-text-quaternary">
         {{ versionLine }}
       </p>
     </div>
diff --git a/frontend/src/layout/components/AppSidebar.vue b/frontend/src/layout/components/AppSidebar.vue
index d09db24bb..6a4f86cf1 100644
--- a/frontend/src/layout/components/AppSidebar.vue
+++ b/frontend/src/layout/components/AppSidebar.vue
@@ -8,6 +8,7 @@ import {
   LayoutDashboard,
   LogOut,
   Moon,
+  Palette,
   PanelLeftClose,
   PanelLeftOpen,
   Settings,
@@ -29,11 +30,12 @@ import {
 } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
+import AppBrandMark from '@/components/AppBrandMark.vue'
 import BaseIconButton from '@/components/base/BaseIconButton.vue'
 import BaseMotionIcon from '@/components/base/BaseMotionIcon.vue'
 import { useAuthStore } from '@/stores/modules/auth'
 import { useSystemUpdateStore } from '@/stores/modules/system-update'
-import { useUiStore } from '@/stores/modules/ui'
+import { useThemeStore } from '@/stores/modules/theme'
 
 const props = withDefaults(
   defineProps<{
@@ -56,10 +58,10 @@ const route = useRoute()
 const router = useRouter()
 const authStore = useAuthStore()
 const systemUpdateStore = useSystemUpdateStore()
-const uiStore = useUiStore()
+const themeStore = useThemeStore()
 const { version, hasUpdate } = storeToRefs(systemUpdateStore)
-const { effectiveTheme } = storeToRefs(uiStore)
-const { toggleTheme } = uiStore
+const { effectiveTheme } = storeToRefs(themeStore)
+const { toggleTheme } = themeStore
 const preferredMotion = usePreferredReducedMotion()
 
 const navItems = [
@@ -68,6 +70,7 @@ const navItems = [
   { label: '分组管理', icon: FolderTree, path: '/account-groups' },
   { label: 'API 密钥', icon: KeyRound, path: '/api-keys' },
   { label: '使用统计', icon: ChartNoAxesColumn, path: '/usage' },
+  { label: '主题设置', icon: Palette, path: '/theme' },
   { label: '系统设置', icon: Settings, path: '/settings' },
 ]
 
@@ -328,7 +331,7 @@ onBeforeUnmount(() => {
 <template>
   <aside
     ref="sidebarEl"
-    class="z-20 h-dvh shrink-0 flex-col overflow-hidden bg-cp-surface px-4 shadow-cp-sidebar"
+    class="z-20 h-dvh shrink-0 flex-col overflow-hidden bg-(--cp-layout-sider-bg) px-4 shadow-cp-layout-sider"
     :class="[
       mobile ? 'flex' : 'hidden min-[961px]:flex',
       isCollapsed ? 'w-22 basis-22 items-center' : 'w-62.75 basis-62.75',
@@ -341,35 +344,30 @@ onBeforeUnmount(() => {
       <BaseMotionIcon
         aria-hidden="true"
         variant="brand"
-        class="inline-flex size-11 items-center justify-center relative -top-0.5 rounded-cp-control"
+        class="inline-flex size-11 items-center justify-center relative -top-0.5 rounded-cp"
       >
-        <img
-          src="/favicon.svg"
-          alt=""
-          class="block size-11 select-none"
-          draggable="false"
-        >
+        <AppBrandMark class="block size-11 select-none" />
       </BaseMotionIcon>
       <span
         v-show="brandLabelVisible"
         ref="brandLabelEl"
         class="grid min-w-33 content-center overflow-hidden"
       >
-        <strong class="text-base leading-[1.1] font-heavy text-cp-primary">
+        <strong class="text-base leading-[1.1] font-heavy text-cp-text">
           Codex Proxy
         </strong>
         <span class="mt-1.5 flex h-4.5 min-w-0 items-center gap-2">
-          <span class="shrink-0 text-xs leading-none font-emphasis text-cp-secondary">
+          <span class="shrink-0 text-xs leading-none font-emphasis text-cp-text-secondary">
             Rust build
           </span>
           <button
             v-if="hasVersionLabel"
             type="button"
-            class="inline-flex h-4.5 min-w-0 cursor-pointer items-center gap-1 rounded-cp-control-sm border-0 px-1.5 font-mono text-[10px] leading-none font-bold transition-colors outline-none focus-visible:ring-2 focus-visible:ring-cp-info-border focus-visible:ring-offset-2 focus-visible:ring-offset-cp-surface"
+            class="inline-flex h-4.5 min-w-0 cursor-pointer items-center gap-1 rounded-cp-sm border-0 px-1.5 font-mono text-[10px] leading-none font-bold transition-colors outline-none focus-visible:ring-2 focus-visible:ring-cp-control-outline focus-visible:ring-offset-2 focus-visible:ring-offset-cp-bg-container"
             :class="[
               hasUpdate
                 ? 'bg-cp-success-bg text-cp-success-text hover:bg-cp-success-bg-hover'
-                : 'bg-cp-subtle text-cp-muted-text hover:bg-cp-muted hover:text-cp-secondary',
+                : 'bg-cp-fill-quaternary text-cp-text-quaternary hover:bg-cp-fill-tertiary hover:text-cp-text-secondary',
             ]"
             :title="updateButtonLabel"
             @click="openSystemUpdate"
@@ -388,7 +386,7 @@ onBeforeUnmount(() => {
     >
       <span
         aria-hidden="true"
-        class="pointer-events-none absolute inset-x-0 top-0 h-11.5 overflow-hidden rounded-cp-control bg-cp-nav-active transition-transform duration-260 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none"
+        class="pointer-events-none absolute inset-x-0 top-0 h-11.5 overflow-hidden rounded-cp bg-cp-menu-item-selected-bg transition-transform duration-260 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none"
         :style="activeNavIndicatorStyle"
       >
         <span ref="navSignal" class="sidebar-active-signal absolute inset-y-0 left-0 w-2/3" />
@@ -397,16 +395,16 @@ onBeforeUnmount(() => {
         v-for="item in navItems"
         :key="item.label"
         type="button"
-        class="relative z-10 inline-flex h-11.5 cursor-pointer items-center rounded-cp-control border-0 text-sm leading-[1.15] outline-none focus-visible:ring-2 focus-visible:ring-cp-info-border focus-visible:ring-offset-2 focus-visible:ring-offset-cp-surface"
+        class="relative z-10 inline-flex h-11.5 cursor-pointer items-center rounded-cp border-0 text-sm leading-[1.15] outline-none focus-visible:ring-2 focus-visible:ring-cp-control-outline focus-visible:ring-offset-2 focus-visible:ring-offset-cp-bg-container"
         :class="[
           isCollapsed ? 'w-11.5 justify-center' : 'w-full gap-3 px-4',
           isActive(item.path)
             ? navFeedbackMuted
-              ? 'bg-transparent font-bold text-cp-primary transition-none'
-              : 'bg-transparent font-bold text-cp-primary transition-colors duration-200'
+              ? 'bg-transparent font-bold text-cp-text transition-none'
+              : 'bg-transparent font-bold text-cp-text transition-colors duration-200'
             : navFeedbackMuted
-              ? 'bg-transparent font-semibold text-cp-secondary transition-none'
-              : 'bg-transparent font-semibold text-cp-secondary transition-colors duration-200 hover:bg-cp-subtle hover:text-cp-primary',
+              ? 'bg-transparent font-semibold text-cp-text-secondary transition-none'
+              : 'bg-transparent font-semibold text-cp-text-secondary transition-colors duration-200 hover:bg-cp-fill-quaternary hover:text-cp-text',
         ]"
         @click="navigate(item.path)"
       >
@@ -422,11 +420,11 @@ onBeforeUnmount(() => {
 
     <div class="mt-auto mb-6" :class="isCollapsed ? 'w-11' : 'w-full'">
       <div
-        class="bg-cp-subtle"
+        class="bg-cp-fill-quaternary"
         :class="
           isCollapsed
-            ? 'grid gap-1 rounded-cp-control p-1'
-            : 'flex h-11 items-center justify-between rounded-cp-overlay px-2'
+            ? 'grid gap-1 rounded-cp p-1'
+            : 'flex h-11 items-center justify-between rounded-cp-lg px-2'
         "
       >
         <span
@@ -505,6 +503,11 @@ onBeforeUnmount(() => {
 
 <style scoped>
 .sidebar-active-signal {
-  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cp-info) 9%, transparent), transparent);
+  background: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in srgb, var(--cp-color-info) 9%, transparent),
+    transparent
+  );
 }
 </style>
diff --git a/frontend/src/layout/components/FloatingSidebarToggle.vue b/frontend/src/layout/components/FloatingSidebarToggle.vue
index 9951d6739..26a6a15c2 100644
--- a/frontend/src/layout/components/FloatingSidebarToggle.vue
+++ b/frontend/src/layout/components/FloatingSidebarToggle.vue
@@ -220,10 +220,10 @@ onScopeDispose(() => {
   >
     <button
       type="button"
-      class="inline-flex size-11.5 items-center justify-center rounded-cp-control border-0 bg-cp-surface text-cp-primary shadow-[0_18px_34px_-18px_var(--cp-shadow-sticky)] outline-none transition-[background-color,box-shadow,color,opacity,transform] duration-150 hover:bg-cp-default-hover hover:text-cp-normal active:scale-95 focus-visible:ring-2 focus-visible:ring-cp-info-border focus-visible:ring-offset-2 focus-visible:ring-offset-cp-page"
+      class="inline-flex size-11.5 items-center justify-center rounded-cp border-0 bg-cp-bg-container text-cp-text shadow-[0_18px_34px_-18px_var(--cp-color-shadow)] outline-none transition-[background-color,box-shadow,color,opacity,transform] duration-150 hover:bg-cp-bg-text-hover hover:text-cp-status-normal active:scale-95 focus-visible:ring-2 focus-visible:ring-cp-control-outline focus-visible:ring-offset-2 focus-visible:ring-offset-cp-bg-layout"
       :class="
         isDragging
-          ? 'scale-95 cursor-grabbing shadow-[0_14px_28px_-20px_var(--cp-shadow-sticky)]'
+          ? 'scale-95 cursor-grabbing shadow-[0_14px_28px_-20px_var(--cp-color-shadow)]'
           : 'cursor-grab'
       "
       aria-label="打开侧边栏"
diff --git a/frontend/src/layout/components/SystemUpdateModal/index.vue b/frontend/src/layout/components/SystemUpdateModal/index.vue
index b0e6e3b0e..d9176b88b 100644
--- a/frontend/src/layout/components/SystemUpdateModal/index.vue
+++ b/frontend/src/layout/components/SystemUpdateModal/index.vue
@@ -198,18 +198,18 @@ watch(
     :dismissible="!updating && !restarting"
   >
     <div class="grid gap-3.5">
-      <section class="grid gap-4 rounded-cp-surface bg-cp-subtle px-4 py-4">
+      <section class="grid gap-4 rounded-cp-card bg-cp-fill-quaternary px-4 py-4">
         <div class="flex flex-wrap items-center justify-between gap-3">
           <div class="min-w-0">
-            <p class="m-0 text-[11px] leading-none font-heavy text-cp-muted-text">
+            <p class="m-0 text-cp-xs leading-none font-heavy text-cp-text-quaternary">
               Codex Proxy RS
             </p>
-            <p class="mt-2 mb-0 text-lg leading-none font-heavy text-cp-primary">
+            <p class="mt-2 mb-0 text-lg leading-none font-heavy text-cp-text">
               应用包更新
             </p>
           </div>
           <span
-            class="inline-flex h-7 shrink-0 items-center gap-1.5 rounded-full px-2.5 text-[12px] font-heavy"
+            class="inline-flex h-7 shrink-0 items-center gap-1.5 rounded-full px-2.5 text-cp-sm font-heavy"
             :class="presentation.status.badge"
           >
             <component
@@ -225,10 +225,10 @@ watch(
           <div
             v-for="item in presentation.summaryItems"
             :key="item.key"
-            class="min-w-0 rounded-cp-control bg-cp-surface px-3 py-2.5"
+            class="min-w-0 rounded-cp bg-cp-bg-container px-3 py-2.5"
           >
             <div class="flex min-w-0 items-center justify-between gap-2">
-              <p class="m-0 truncate text-[11px] leading-none font-heavy text-cp-muted-text">
+              <p class="m-0 truncate text-cp-xs leading-none font-heavy text-cp-text-quaternary">
                 {{ item.label }}
               </p>
               <a
@@ -236,14 +236,14 @@ watch(
                 :href="item.releaseUrl"
                 target="_blank"
                 rel="noreferrer"
-                class="inline-flex shrink-0 items-center gap-1 text-[11px] leading-none font-bold text-cp-info-text transition-colors hover:text-cp-info"
+                class="inline-flex shrink-0 items-center gap-1 text-cp-xs leading-none font-bold text-cp-link transition-colors hover:text-cp-link-hover"
               >
                 发布页
                 <ExternalLink class="size-3" />
               </a>
             </div>
             <p
-              class="mt-2 mb-0 truncate font-mono text-[13px] leading-none font-bold text-cp-primary"
+              class="mt-2 mb-0 truncate font-mono text-cp leading-none font-bold text-cp-text"
               :title="item.title || item.value"
             >
               {{ item.value }}
@@ -253,7 +253,7 @@ watch(
 
         <p
           v-if="updateError || updateInfo?.warning"
-          class="m-0 rounded-cp-control bg-cp-danger-bg px-3 py-2 text-[12px] leading-normal font-bold text-cp-danger-text"
+          class="m-0 rounded-cp bg-cp-error-bg px-3 py-2 text-cp-sm leading-normal font-bold text-cp-error-text"
         >
           {{ updateError || updateInfo?.warning }}
         </p>
@@ -261,13 +261,13 @@ watch(
 
       <section
         v-if="renderedReleaseNotes"
-        class="grid gap-2 rounded-cp-surface bg-cp-subtle px-4 py-3.5"
+        class="grid gap-2 rounded-cp-card bg-cp-fill-quaternary px-4 py-3.5"
       >
         <div class="flex items-center justify-between gap-3">
-          <p class="m-0 text-[13px] font-heavy text-cp-primary">
+          <p class="m-0 text-cp font-heavy text-cp-text">
             发布说明
           </p>
-          <span class="font-mono text-[11px] font-emphasis text-cp-muted-text">
+          <span class="font-mono text-cp-xs font-emphasis text-cp-text-quaternary">
             {{ presentation.releaseVersion }}
           </span>
         </div>
@@ -280,22 +280,22 @@ watch(
 
       <section
         v-if="showUpdateProgress"
-        class="overflow-hidden rounded-cp-surface bg-cp-subtle"
+        class="overflow-hidden rounded-cp-card bg-cp-fill-quaternary"
       >
         <header class="flex items-center justify-between gap-3 px-4 pt-3.5 pb-2.5">
           <div class="flex min-w-0 items-center gap-2">
             <Terminal class="size-4 shrink-0 text-cp-success" />
-            <p class="m-0 text-[13px] leading-none font-heavy text-cp-primary">
+            <p class="m-0 text-cp leading-none font-heavy text-cp-text">
               更新进度
             </p>
           </div>
           <span
-            class="inline-flex h-6 items-center gap-1.5 rounded-full bg-cp-subtle px-2 text-[11px] leading-none font-bold text-cp-secondary"
+            class="inline-flex h-6 items-center gap-1.5 rounded-full bg-cp-fill-quaternary px-2 text-cp-xs leading-none font-bold text-cp-text-secondary"
             :title="updateStreamError || presentation.streamStatusLabel"
           >
             <i
               class="size-1.5 rounded-full"
-              :class="updateStreaming ? 'bg-cp-success' : 'bg-cp-muted-text'"
+              :class="updateStreaming ? 'bg-cp-success' : 'bg-cp-text-quaternary'"
             />
             {{ presentation.streamStatusLabel }}
           </span>
@@ -310,16 +310,16 @@ watch(
             <div
               v-for="log in updateLogRows"
               :key="log.id"
-              class="grid grid-cols-[68px_14px_minmax(0,1fr)] items-start gap-2 rounded-cp-control bg-cp-surface px-3 py-2 font-mono text-[11px] leading-[1.55]"
+              class="grid grid-cols-[68px_14px_minmax(0,1fr)] items-start gap-2 rounded-cp bg-cp-bg-container px-3 py-2 font-mono text-cp-xs leading-[1.55]"
             >
-              <span class="tabular-nums text-cp-muted-text">{{ log.time }}</span>
+              <span class="tabular-nums text-cp-text-quaternary">{{ log.time }}</span>
               <Circle
                 class="mt-1 size-2.5"
                 :class="log.classes.marker"
                 fill="currentColor"
               />
               <p class="m-0 min-w-0 wrap-break-word" :class="log.classes.text">
-                <span v-if="log.step" class="mr-1 text-cp-muted-text">[{{ log.step }}]</span>
+                <span v-if="log.step" class="mr-1 text-cp-text-quaternary">[{{ log.step }}]</span>
                 {{ log.message }}
               </p>
             </div>
@@ -383,23 +383,23 @@ watch(
     @confirm="handleConfirmUpdate"
   >
     <div class="grid gap-3">
-      <div class="grid gap-2 rounded-cp-control bg-cp-subtle p-3">
+      <div class="grid gap-2 rounded-cp bg-cp-fill-quaternary p-3">
         <div
           v-for="item in presentation.confirmRows"
           :key="item.key"
           class="flex min-w-0 items-center justify-between gap-3"
         >
-          <span class="text-[12px] leading-none font-bold text-cp-muted-text">
+          <span class="text-cp-sm leading-none font-bold text-cp-text-quaternary">
             {{ item.label }}
           </span>
           <span
-            class="truncate font-mono text-[13px] leading-none font-heavy text-cp-primary"
+            class="truncate font-mono text-cp leading-none font-heavy text-cp-text"
           >
             {{ item.value }}
           </span>
         </div>
       </div>
-      <p class="m-0 text-[12px] leading-relaxed font-emphasis text-cp-muted-text">
+      <p class="m-0 text-cp-sm leading-relaxed font-emphasis text-cp-text-quaternary">
         点击确认后弹窗会关闭，并按远端最新目标版本开始更新
       </p>
     </div>
@@ -408,7 +408,7 @@ watch(
 
 <style scoped>
 .release-notes {
-  color: var(--cp-text-primary);
+  color: var(--cp-color-text);
   font-size: 12px;
   font-weight: var(--font-weight-emphasis);
   line-height: 1.65;
@@ -432,7 +432,7 @@ watch(
 .release-notes :deep(h3),
 .release-notes :deep(h4) {
   margin: 12px 0 6px;
-  color: var(--cp-text-primary);
+  color: var(--cp-color-text);
   font-size: 12px;
   font-weight: var(--font-weight-heavy);
   line-height: 1.4;
@@ -453,19 +453,19 @@ watch(
 }
 
 .release-notes :deep(a) {
-  color: var(--cp-info-text);
+  color: var(--cp-color-link);
   font-weight: 700;
   text-decoration: none;
 }
 
 .release-notes :deep(a:hover) {
-  color: var(--cp-info);
+  color: var(--cp-color-link-hover);
 }
 
 .release-notes :deep(code) {
   border-radius: 5px;
-  background: var(--cp-bg-muted);
-  color: var(--cp-text-primary);
+  background: var(--cp-color-fill-tertiary);
+  color: var(--cp-color-text);
   font-family: var(--font-mono);
   font-size: 11px;
   padding: 1px 5px;
@@ -474,8 +474,8 @@ watch(
 .release-notes :deep(pre) {
   margin: 8px 0;
   overflow-x: auto;
-  border-radius: var(--cp-radius-control);
-  background: var(--cp-bg-surface);
+  border-radius: var(--cp-border-radius);
+  background: var(--cp-color-bg-container);
   padding: 8px 10px;
 }
 
@@ -486,8 +486,8 @@ watch(
 
 .release-notes :deep(blockquote) {
   margin: 8px 0;
-  border-left: 3px solid var(--cp-divider-subtle);
-  color: var(--cp-text-secondary);
+  border-left: 3px solid var(--cp-color-split);
+  color: var(--cp-color-text-secondary);
   padding-left: 10px;
 }
 </style>
diff --git a/frontend/src/layout/components/SystemUpdateModal/presenter.ts b/frontend/src/layout/components/SystemUpdateModal/presenter.ts
index 56e239e26..5d0468fa2 100644
--- a/frontend/src/layout/components/SystemUpdateModal/presenter.ts
+++ b/frontend/src/layout/components/SystemUpdateModal/presenter.ts
@@ -36,9 +36,9 @@ export function resolveSystemUpdateLogClasses(level: string) {
     case 'warning':
       return { marker: 'text-cp-warning', text: 'text-cp-warning' }
     case 'error':
-      return { marker: 'text-cp-danger', text: 'text-cp-danger' }
+      return { marker: 'text-cp-error', text: 'text-cp-error' }
     default:
-      return { marker: 'text-cp-info', text: 'text-cp-primary' }
+      return { marker: 'text-cp-info', text: 'text-cp-text' }
   }
 }
 
@@ -55,8 +55,8 @@ function resolveStatus(input: SystemUpdatePresentationInput) {
     return {
       label: '异常',
       icon: XCircle,
-      badge: 'bg-cp-danger-bg text-cp-danger-text',
-      iconClass: 'text-cp-danger',
+      badge: 'bg-cp-error-bg text-cp-error-text',
+      iconClass: 'text-cp-error',
     }
   }
   if (input.updateSuccess || input.hasUpdate || input.updateInfo) {
@@ -70,8 +70,8 @@ function resolveStatus(input: SystemUpdatePresentationInput) {
   return {
     label: '未检查',
     icon: CheckCircle2,
-    badge: 'bg-cp-muted text-cp-secondary',
-    iconClass: 'text-cp-muted-text',
+    badge: 'bg-cp-fill-tertiary text-cp-text-secondary',
+    iconClass: 'text-cp-text-quaternary',
   }
 }
 
diff --git a/frontend/src/layout/index.vue b/frontend/src/layout/index.vue
index a756938d2..fd1e8628a 100644
--- a/frontend/src/layout/index.vue
+++ b/frontend/src/layout/index.vue
@@ -70,7 +70,7 @@ watch(
 </script>
 
 <template>
-  <div class="relative flex h-dvh overflow-hidden bg-cp-page">
+  <div class="relative flex h-dvh overflow-hidden bg-cp-bg-layout">
     <AppSidebar
       :collapsed="sidebarCollapsed"
       @toggle="toggleSidebar"
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 144767941..ba84f3387 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -5,14 +5,19 @@ import { loading } from './directives/loading'
 import { authPlugin } from './plugins/auth'
 import { router } from './router'
 import { pinia } from './stores'
+import { useThemeStore } from './stores/modules/theme'
 import '@fontsource-variable/inter'
 import '@fontsource-variable/jetbrains-mono'
 
 import './styles/index.css'
 
-createApp(App)
-  .directive('loading', loading)
-  .use(pinia)
-  .use(router)
-  .use(authPlugin)
-  .mount('#app')
+const app = createApp(App)
+
+app.directive('loading', loading)
+app.use(pinia)
+
+useThemeStore(pinia).initializeTheme()
+
+app.use(router)
+app.use(authPlugin)
+app.mount('#app')
diff --git a/frontend/src/router/routes.ts b/frontend/src/router/routes.ts
index 63080503e..1272e31f6 100644
--- a/frontend/src/router/routes.ts
+++ b/frontend/src/router/routes.ts
@@ -36,10 +36,20 @@ export const routes: RouteRecordRaw[] = [
         component: () => import('@/views/usage/index.vue'),
       },
       {
-        path: 'settings/:section?',
+        path: 'theme',
+        name: 'theme',
+        component: () => import('@/views/theme/index.vue'),
+      },
+      {
+        path: 'settings',
         name: 'settings',
         component: () => import('@/views/settings/index.vue'),
       },
+      {
+        path: 'settings/backup',
+        name: 'settings-backup',
+        component: () => import('@/views/settings/index.vue'),
+      },
     ],
   },
   {
diff --git a/frontend/src/stores/modules/theme.ts b/frontend/src/stores/modules/theme.ts
new file mode 100644
index 000000000..d8d65403e
--- /dev/null
+++ b/frontend/src/stores/modules/theme.ts
@@ -0,0 +1,330 @@
+// @env browser
+
+import type {
+  ResolvedTheme,
+  ThemeColorId,
+  ThemeCustomization,
+  ThemeMode,
+} from '@/theme'
+
+import { usePreferredDark, usePreferredReducedMotion, useTimeoutFn } from '@vueuse/core'
+import { defineStore } from 'pinia'
+import { computed, ref, shallowRef, watch } from 'vue'
+
+import {
+  applyResolvedTheme,
+  DEFAULT_CUSTOM_THEME_COLOR,
+  DEFAULT_THEME_COLOR,
+  DEFAULT_THEME_MODE,
+  isThemeColorId,
+  isThemeMode,
+  normalizeThemeCustomization,
+  resolveTheme,
+  resolveThemeName,
+} from '@/theme'
+import { normalizeHexColor } from '@/utils/color'
+
+interface ThemeTransitionOrigin {
+  x: number
+  y: number
+}
+
+interface ThemeConfigurationInput {
+  mode: ThemeMode
+  color: ThemeColorId
+  customColor: string
+  customization: ThemeCustomization
+}
+
+interface ViewTransition {
+  ready: Promise<void>
+  finished: Promise<void>
+}
+
+type ViewTransitionDocument = Document & {
+  startViewTransition?: (callback: () => void) => ViewTransition
+}
+
+export const useThemeStore = defineStore(
+  'theme',
+  () => {
+    const themeMode = shallowRef<ThemeMode>(DEFAULT_THEME_MODE)
+    const themeColor = shallowRef<ThemeColorId>(DEFAULT_THEME_COLOR)
+    const customThemeColor = shallowRef(DEFAULT_CUSTOM_THEME_COLOR)
+    const themeCustomization = ref<ThemeCustomization>({})
+    const themeRevision = shallowRef(0)
+    const themeTransitioning = shallowRef(false)
+    const preferredDark = usePreferredDark()
+    const preferredMotion = usePreferredReducedMotion()
+    let appliedThemeSignature: string | undefined
+    let themeTransitionOrigin: ThemeTransitionOrigin | undefined
+    let themeTransitionRequested = false
+
+    const effectiveTheme = computed(() => resolveThemeName(themeMode.value, preferredDark.value))
+    const resolvedTheme = computed(() =>
+      resolveTheme(
+        effectiveTheme.value,
+        themeColor.value,
+        customThemeColor.value,
+        themeCustomization.value,
+      ),
+    )
+
+    const { start: startFallbackTransitionTimer, stop: stopFallbackTransitionTimer } = useTimeoutFn(
+      () => {
+        document.documentElement.classList.remove('theme-fallback-transition')
+        themeTransitioning.value = false
+      },
+      180,
+      { immediate: false },
+    )
+
+    watch(resolvedTheme, theme => applyTheme(theme))
+
+    function initializeTheme(): void {
+      normalizePersistedTheme()
+      applyTheme(resolvedTheme.value)
+    }
+
+    function normalizePersistedTheme(): void {
+      if (!isThemeMode(themeMode.value))
+        themeMode.value = DEFAULT_THEME_MODE
+      if (!isThemeColorId(themeColor.value))
+        themeColor.value = DEFAULT_THEME_COLOR
+      customThemeColor.value = normalizeHexColor(customThemeColor.value) ?? DEFAULT_CUSTOM_THEME_COLOR
+      themeCustomization.value = normalizeThemeCustomization(themeCustomization.value)
+    }
+
+    function applyTheme(theme: ResolvedTheme): void {
+      if (typeof document === 'undefined')
+        return
+
+      const signature = themeSignature(theme)
+      if (appliedThemeSignature === signature) {
+        clearThemeTransitionRequest()
+        return
+      }
+
+      if (
+        appliedThemeSignature === undefined
+        || !themeTransitionRequested
+        || preferredMotion.value === 'reduce'
+        || themeTransitioning.value
+      ) {
+        commitTheme(theme)
+        clearThemeTransitionRequest()
+        return
+      }
+
+      runThemeTransition(theme)
+      clearThemeTransitionRequest()
+    }
+
+    function commitTheme(theme: ResolvedTheme): void {
+      applyResolvedTheme(document.documentElement, theme)
+      appliedThemeSignature = themeSignature(theme)
+      themeRevision.value += 1
+    }
+
+    function runThemeTransition(theme: ResolvedTheme): void {
+      const transitionDocument = document as ViewTransitionDocument
+      const shrinkingDarkLayer
+        = document.documentElement.dataset.theme === 'dark' && theme.name === 'light'
+
+      if (!transitionDocument.startViewTransition) {
+        runFallbackThemeTransition(theme)
+        return
+      }
+
+      const origin = themeTransitionOrigin ?? {
+        x: window.innerWidth - 44,
+        y: 44,
+      }
+      const maxX = Math.max(origin.x, window.innerWidth - origin.x)
+      const maxY = Math.max(origin.y, window.innerHeight - origin.y)
+      const radius = Math.hypot(maxX, maxY)
+      document.documentElement.classList.toggle('theme-view-transition-shrink', shrinkingDarkLayer)
+      themeTransitioning.value = true
+      let transition: ViewTransition
+      try {
+        transition = transitionDocument.startViewTransition(() => commitTheme(theme))
+      }
+      catch {
+        document.documentElement.classList.remove('theme-view-transition-shrink')
+        themeTransitioning.value = false
+        runFallbackThemeTransition(theme)
+        return
+      }
+
+      let cleaned = false
+      const cleanupTransition = (): void => {
+        if (cleaned)
+          return
+        cleaned = true
+        requestAnimationFrame(() => {
+          document.documentElement.classList.remove('theme-view-transition-shrink')
+          themeTransitioning.value = false
+        })
+      }
+      const cleanupTimer = window.setTimeout(cleanupTransition, 1200)
+      void transition.finished.catch(() => undefined)
+      let activeAnimation: Animation | undefined
+      void transition.ready
+        .then(() => {
+          const animation = document.documentElement.animate(
+            {
+              clipPath: shrinkingDarkLayer
+                ? [
+                    `circle(${radius}px at ${origin.x}px ${origin.y}px)`,
+                    `circle(0px at ${origin.x}px ${origin.y}px)`,
+                  ]
+                : [
+                    `circle(0px at ${origin.x}px ${origin.y}px)`,
+                    `circle(${radius}px at ${origin.x}px ${origin.y}px)`,
+                  ],
+            },
+            {
+              duration: 420,
+              easing: 'cubic-bezier(0.22, 1, 0.36, 1)',
+              fill: 'both',
+              pseudoElement: shrinkingDarkLayer
+                ? '::view-transition-old(root)'
+                : '::view-transition-new(root)',
+            },
+          )
+          activeAnimation = animation
+          return animation.finished.catch(() => undefined)
+        })
+        .catch(() => undefined)
+        .finally(() => {
+          activeAnimation?.cancel()
+          window.clearTimeout(cleanupTimer)
+          cleanupTransition()
+        })
+    }
+
+    function runFallbackThemeTransition(theme: ResolvedTheme): void {
+      themeTransitioning.value = true
+      stopFallbackTransitionTimer()
+      document.documentElement.classList.add('theme-fallback-transition')
+      commitTheme(theme)
+      startFallbackTransitionTimer()
+    }
+
+    function setThemeMode(mode: ThemeMode, event?: MouseEvent): void {
+      if (mode === themeMode.value) {
+        clearThemeTransitionRequest()
+        return
+      }
+      requestThemeTransition(event)
+      themeMode.value = mode
+    }
+
+    function setThemeColor(color: ThemeColorId, event?: MouseEvent): void {
+      if (color === themeColor.value) {
+        clearThemeTransitionRequest()
+        return
+      }
+      requestThemeTransition(event)
+      themeColor.value = color
+    }
+
+    function setCustomThemeColor(color: string, event?: MouseEvent): boolean {
+      const normalized = normalizeHexColor(color)
+      if (!normalized)
+        return false
+      if (themeColor.value === 'custom' && customThemeColor.value === normalized) {
+        clearThemeTransitionRequest()
+        return true
+      }
+      requestThemeTransition(event)
+      customThemeColor.value = normalized
+      themeColor.value = 'custom'
+      return true
+    }
+
+    function setThemeConfiguration(
+      configuration: ThemeConfigurationInput,
+      event?: MouseEvent,
+    ): boolean {
+      const customColor = normalizeHexColor(configuration.customColor)
+      if (!isThemeMode(configuration.mode) || !isThemeColorId(configuration.color) || !customColor)
+        return false
+
+      requestThemeTransition(event)
+      themeMode.value = configuration.mode
+      themeColor.value = configuration.color
+      customThemeColor.value = customColor
+      themeCustomization.value = normalizeThemeCustomization(configuration.customization)
+      return true
+    }
+
+    function resetTheme(event?: MouseEvent): void {
+      const unchanged
+        = themeMode.value === DEFAULT_THEME_MODE
+          && themeColor.value === DEFAULT_THEME_COLOR
+          && customThemeColor.value === DEFAULT_CUSTOM_THEME_COLOR
+          && Object.keys(themeCustomization.value).length === 0
+      if (unchanged) {
+        clearThemeTransitionRequest()
+        return
+      }
+      requestThemeTransition(event)
+      themeMode.value = DEFAULT_THEME_MODE
+      themeColor.value = DEFAULT_THEME_COLOR
+      customThemeColor.value = DEFAULT_CUSTOM_THEME_COLOR
+      themeCustomization.value = {}
+    }
+
+    function toggleTheme(event?: MouseEvent): void {
+      if (themeTransitioning.value)
+        return
+      requestThemeTransition(event)
+      themeMode.value = effectiveTheme.value === 'dark' ? 'light' : 'dark'
+    }
+
+    function requestThemeTransition(event?: MouseEvent): void {
+      themeTransitionOrigin = event
+        ? { x: event.clientX, y: event.clientY }
+        : undefined
+      themeTransitionRequested = Boolean(event)
+    }
+
+    function clearThemeTransitionRequest(): void {
+      themeTransitionOrigin = undefined
+      themeTransitionRequested = false
+    }
+
+    return {
+      themeMode,
+      themeColor,
+      customThemeColor,
+      themeCustomization,
+      themeRevision,
+      themeTransitioning,
+      effectiveTheme,
+      initializeTheme,
+      setThemeMode,
+      setThemeColor,
+      setCustomThemeColor,
+      setThemeConfiguration,
+      resetTheme,
+      toggleTheme,
+    }
+  },
+  {
+    persist: {
+      key: 'codex-proxy-rs-theme',
+      pick: [
+        'themeMode',
+        'themeColor',
+        'customThemeColor',
+        'themeCustomization',
+      ],
+    },
+  },
+)
+
+function themeSignature(theme: ResolvedTheme): string {
+  return `${theme.name}:${theme.colorId}:${theme.seed}:${JSON.stringify(theme.tokens)}`
+}
diff --git a/frontend/src/stores/modules/ui.ts b/frontend/src/stores/modules/ui.ts
index c262f6f55..f86ceab03 100644
--- a/frontend/src/stores/modules/ui.ts
+++ b/frontend/src/stores/modules/ui.ts
@@ -1,218 +1,24 @@
-import { useDark, usePreferredReducedMotion, useTimeoutFn } from '@vueuse/core'
 import { defineStore } from 'pinia'
-import { computed, shallowRef } from 'vue'
-
-type ThemeMode = 'system' | 'light' | 'dark'
-type ThemeName = 'light' | 'dark'
-type ColorModeStorageValue = 'auto' | ThemeName
-interface ThemeTransitionOrigin { x: number, y: number }
-interface ViewTransition {
-  ready: Promise<void>
-  finished: Promise<void>
-}
-
-type ViewTransitionDocument = Document & {
-  startViewTransition?: (callback: () => void) => ViewTransition
-}
+import { shallowRef } from 'vue'
 
 export const useUiStore = defineStore(
   'ui',
   () => {
     const sidebarCollapsed = shallowRef(false)
-    const themeMode = shallowRef<ThemeMode>('system')
-    const themeRevision = shallowRef(0)
-    const themeTransitioning = shallowRef(false)
-    const preferredMotion = usePreferredReducedMotion()
-    let themeApplied = false
-    let themeTransitionOrigin: ThemeTransitionOrigin | undefined
-    let themeTransitionRequested = false
 
-    const { start: startFallbackTransitionTimer, stop: stopFallbackTransitionTimer } = useTimeoutFn(
-      () => {
-        document.documentElement.classList.remove('theme-fallback-transition')
-        themeTransitioning.value = false
-      },
-      180,
-      { immediate: false },
-    )
-
-    const colorModeStorage = computed<ColorModeStorageValue>({
-      get: () => (themeMode.value === 'system' ? 'auto' : themeMode.value),
-      set: (mode) => {
-        themeMode.value = mode === 'auto' ? 'system' : mode
-      },
-    })
-
-    const isDark = useDark({
-      storageRef: colorModeStorage,
-      onChanged: (dark) => {
-        applyTheme(dark ? 'dark' : 'light')
-      },
-    })
-
-    const effectiveTheme = computed<ThemeName>(() => (isDark.value ? 'dark' : 'light'))
-
-    function toggleSidebar() {
+    function toggleSidebar(): void {
       sidebarCollapsed.value = !sidebarCollapsed.value
     }
 
-    function applyTheme(theme: ThemeName) {
-      if (themeApplied && document.documentElement.dataset.theme === theme) {
-        themeTransitionRequested = false
-        return
-      }
-
-      if (
-        !themeApplied
-        || !themeTransitionRequested
-        || preferredMotion.value === 'reduce'
-        || themeTransitioning.value
-      ) {
-        commitTheme(theme)
-        themeApplied = true
-        themeTransitionRequested = false
-        return
-      }
-
-      runThemeTransition(theme)
-      themeApplied = true
-      themeTransitionRequested = false
-    }
-
-    function commitTheme(theme: ThemeName) {
-      document.documentElement.dataset.theme = theme
-      document.documentElement.style.colorScheme = theme
-      themeRevision.value += 1
-    }
-
-    function runThemeTransition(theme: ThemeName) {
-      const transitionDocument = document as ViewTransitionDocument
-      const shrinkingDarkLayer
-        = document.documentElement.dataset.theme === 'dark' && theme === 'light'
-
-      if (!transitionDocument.startViewTransition) {
-        runFallbackThemeTransition(theme)
-        return
-      }
-
-      const origin = themeTransitionOrigin ?? {
-        x: window.innerWidth - 44,
-        y: 44,
-      }
-      themeTransitionOrigin = undefined
-      const maxX = Math.max(origin.x, window.innerWidth - origin.x)
-      const maxY = Math.max(origin.y, window.innerHeight - origin.y)
-      const radius = Math.hypot(maxX, maxY)
-      document.documentElement.classList.toggle('theme-view-transition-shrink', shrinkingDarkLayer)
-      themeTransitioning.value = true
-      let transition: ViewTransition
-      try {
-        transition = transitionDocument.startViewTransition(() => commitTheme(theme))
-      }
-      catch {
-        document.documentElement.classList.remove('theme-view-transition-shrink')
-        themeTransitioning.value = false
-        runFallbackThemeTransition(theme)
-        return
-      }
-
-      let cleaned = false
-      const cleanupTransition = () => {
-        if (cleaned) {
-          return
-        }
-        cleaned = true
-        requestAnimationFrame(() => {
-          document.documentElement.classList.remove('theme-view-transition-shrink')
-          themeTransitioning.value = false
-        })
-      }
-      const cleanupTimer = window.setTimeout(cleanupTransition, 1200)
-      void transition.finished.catch(() => undefined)
-      let activeAnimation: Animation | undefined
-      void transition.ready
-        .then(() => {
-          const animation = document.documentElement.animate(
-            {
-              clipPath: shrinkingDarkLayer
-                ? [
-                    `circle(${radius}px at ${origin.x}px ${origin.y}px)`,
-                    `circle(0px at ${origin.x}px ${origin.y}px)`,
-                  ]
-                : [
-                    `circle(0px at ${origin.x}px ${origin.y}px)`,
-                    `circle(${radius}px at ${origin.x}px ${origin.y}px)`,
-                  ],
-            },
-            {
-              duration: 420,
-              easing: 'cubic-bezier(0.22, 1, 0.36, 1)',
-              fill: 'both',
-              pseudoElement: shrinkingDarkLayer
-                ? '::view-transition-old(root)'
-                : '::view-transition-new(root)',
-            },
-          )
-          activeAnimation = animation
-          return animation.finished.catch(() => undefined)
-        })
-        .catch(() => undefined)
-        .finally(() => {
-          activeAnimation?.cancel()
-          window.clearTimeout(cleanupTimer)
-          cleanupTransition()
-        })
-    }
-
-    function runFallbackThemeTransition(theme: ThemeName) {
-      themeTransitioning.value = true
-      stopFallbackTransitionTimer()
-      document.documentElement.classList.add('theme-fallback-transition')
-      commitTheme(theme)
-      startFallbackTransitionTimer()
-    }
-
-    function initializeTheme() {
-      if (!themeApplied) {
-        applyTheme(effectiveTheme.value)
-      }
-    }
-
-    function setThemeMode(mode: ThemeMode) {
-      themeMode.value = mode
-    }
-
-    function toggleTheme(event?: MouseEvent) {
-      if (themeTransitioning.value) {
-        return
-      }
-
-      if (event) {
-        themeTransitionOrigin = {
-          x: event.clientX,
-          y: event.clientY,
-        }
-        themeTransitionRequested = true
-      }
-      themeMode.value = effectiveTheme.value === 'dark' ? 'light' : 'dark'
-    }
-
     return {
       sidebarCollapsed,
-      themeMode,
-      themeRevision,
-      themeTransitioning,
-      effectiveTheme,
       toggleSidebar,
-      initializeTheme,
-      setThemeMode,
-      toggleTheme,
     }
   },
   {
     persist: {
       key: 'codex-proxy-rs-ui',
-      pick: ['sidebarCollapsed', 'themeMode'],
+      pick: ['sidebarCollapsed'],
     },
   },
 )
diff --git a/frontend/src/styles/base.css b/frontend/src/styles/base.css
index 726f9fe1b..817ef7bb2 100644
--- a/frontend/src/styles/base.css
+++ b/frontend/src/styles/base.css
@@ -1,6 +1,6 @@
 html {
-  background: var(--cp-bg-page);
-  color: var(--cp-text-primary);
+  background: var(--cp-color-bg-layout, #f6f8fb);
+  color: var(--cp-color-text, #0e1726);
   font-family: var(--font-sans);
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -9,7 +9,17 @@ html {
 }
 
 body {
-  background: var(--cp-bg-page);
+  background: var(--cp-color-bg-layout, #f6f8fb);
+  font-size: var(--cp-font-size, 13px);
+}
+
+/* 主题作用域同时驱动 Tailwind 数值间距，保证预览草稿与已保存主题使用同一密度算法。 */
+[data-theme] {
+  --spacing: var(--cp-size-unit, 4px);
+}
+
+[data-theme]:not(html) {
+  font-size: var(--cp-font-size, 13px);
 }
 
 html.theme-fallback-transition,
@@ -51,7 +61,7 @@ button:disabled {
 }
 
 .cp-scrollbar {
-  scrollbar-color: var(--cp-scrollbar-thumb) transparent;
+  scrollbar-color: var(--cp-scrollbar-thumb-bg) transparent;
   scrollbar-width: thin;
 }
 
@@ -65,14 +75,14 @@ button:disabled {
 }
 
 .cp-scrollbar::-webkit-scrollbar-thumb {
-  background: var(--cp-scrollbar-thumb);
+  background: var(--cp-scrollbar-thumb-bg);
   border: 3px solid transparent;
   border-radius: 999px;
   background-clip: content-box;
 }
 
 .cp-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: var(--cp-scrollbar-thumb-hover);
+  background: var(--cp-scrollbar-thumb-hover-bg);
   border: 3px solid transparent;
   background-clip: content-box;
 }
diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css
index fa731de5c..7964f1e47 100644
--- a/frontend/src/styles/index.css
+++ b/frontend/src/styles/index.css
@@ -6,87 +6,127 @@
   --font-sans:
     'Inter Variable', Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
-  /* 界面字重刻度：正文强调 650 / 加粗 700(font-bold) / 重标题 760 / 极重 800(font-extrabold)。
-     新代码从这四档取值，不再使用任意字重。 */
+  /* 界面字重刻度：正文强调 650 / 加粗 700(font-bold) / 重标题 760 / 极重 800(font-extrabold)。 */
   --font-weight-emphasis: 650;
   --font-weight-heavy: 760;
-  --color-cp-page: var(--cp-bg-page);
-  --color-cp-surface: var(--cp-bg-surface);
-  --color-cp-subtle: var(--cp-bg-subtle);
-  --color-cp-muted: var(--cp-bg-muted);
-  --color-cp-tertiary-bg: var(--cp-bg-tertiary);
-  --color-cp-nav-active: var(--cp-bg-nav-active);
-  --color-cp-primary: var(--cp-text-primary);
-  --color-cp-strong: var(--cp-text-strong);
-  --color-cp-secondary: var(--cp-text-secondary);
-  --color-cp-tertiary: var(--cp-text-tertiary);
-  --color-cp-muted-text: var(--cp-text-muted);
-  --color-cp-accent: var(--cp-accent);
-  --color-cp-accent-hover: var(--cp-accent-hover);
-  --color-cp-accent-pressed: var(--cp-accent-pressed);
-  --color-cp-accent-border: var(--cp-accent-border);
-  --color-cp-accent-on: var(--cp-accent-on);
-  --color-cp-default-hover: var(--cp-default-bg-hover);
-  --color-cp-default-active: var(--cp-default-bg-active);
-  --color-cp-default-border: var(--cp-default-border);
-  --color-cp-default-border-hover: var(--cp-default-border-hover);
-  --color-cp-border: var(--cp-border-primary);
-  --color-cp-divider: var(--cp-divider-subtle);
-  --color-cp-progress: var(--cp-progress-track);
-  --color-cp-overlay: var(--cp-overlay-scrim);
-  --color-cp-disabled: var(--cp-disabled-bg);
-  --color-cp-disabled-text: var(--cp-disabled-text);
-  --color-cp-disabled-icon: var(--cp-disabled-icon);
-  --color-cp-info: var(--cp-info);
-  --color-cp-info-hover: var(--cp-info-hover);
-  --color-cp-info-pressed: var(--cp-info-pressed);
-  --color-cp-info-bg: var(--cp-info-bg);
-  --color-cp-info-border: var(--cp-info-border);
-  --color-cp-info-text: var(--cp-info-text);
-  --color-cp-info-on: var(--cp-info-on);
-  --color-cp-normal: var(--cp-normal);
-  --color-cp-normal-hover: var(--cp-normal-hover);
-  --color-cp-normal-pressed: var(--cp-normal-pressed);
-  --color-cp-normal-bg: var(--cp-normal-bg);
-  --color-cp-normal-border: var(--cp-normal-border);
-  --color-cp-normal-text: var(--cp-normal-text);
-  --color-cp-success: var(--cp-success);
-  --color-cp-success-bg: var(--cp-success-bg);
-  --color-cp-success-bg-hover: var(--cp-success-bg-hover);
-  --color-cp-success-bg-active: var(--cp-success-bg-active);
-  --color-cp-success-border: var(--cp-success-border);
-  --color-cp-success-text: var(--cp-success-text);
-  --color-cp-warning: var(--cp-warning);
-  --color-cp-warning-bg: var(--cp-warning-bg);
-  --color-cp-warning-bg-hover: var(--cp-warning-bg-hover);
-  --color-cp-warning-bg-active: var(--cp-warning-bg-active);
-  --color-cp-warning-border: var(--cp-warning-border);
-  --color-cp-warning-text: var(--cp-warning-text);
-  --color-cp-danger: var(--cp-danger);
-  --color-cp-danger-bg: var(--cp-danger-bg);
-  --color-cp-danger-bg-hover: var(--cp-danger-bg-hover);
-  --color-cp-danger-bg-active: var(--cp-danger-bg-active);
-  --color-cp-danger-border: var(--cp-danger-border);
-  --color-cp-danger-text: var(--cp-danger-text);
-  --color-cp-plan-pro-bg: var(--cp-plan-pro-bg);
-  --color-cp-plan-pro-text: var(--cp-plan-pro-text);
-  --color-cp-plan-prolite-bg: var(--cp-plan-prolite-bg);
-  --color-cp-plan-prolite-text: var(--cp-plan-prolite-text);
-  --radius-cp-control-sm: var(--cp-radius-control-sm);
-  --radius-cp-control: var(--cp-radius-control);
-  --radius-cp-overlay: var(--cp-radius-overlay);
-  --radius-cp-surface: var(--cp-radius-surface);
-  --shadow-cp-card: var(--cp-shadow-card);
-  --shadow-cp-control: var(--cp-shadow-control);
-  --shadow-cp-popover: var(--cp-shadow-popover);
-  --shadow-cp-input: var(--cp-shadow-input);
-  --shadow-cp-input-hover: var(--cp-shadow-input-hover);
-  --shadow-cp-input-focus: var(--cp-shadow-input-focus);
-  --shadow-cp-input-error: var(--cp-shadow-input-error);
-  --shadow-cp-sidebar: var(--cp-shadow-sidebar);
+  --animate-cp-skeleton: cp-skeleton-breathe 2.8s cubic-bezier(0.37, 0, 0.63, 1) infinite;
+
+  --text-cp-xs: var(--cp-font-size-xs);
+  --text-cp-sm: var(--cp-font-size-sm);
+  --text-cp: var(--cp-font-size);
+  --text-cp-lg: var(--cp-font-size-lg);
+  --text-cp-xl: var(--cp-font-size-xl);
+
+  --color-cp-white: var(--cp-color-white);
+  --color-cp-transparent: var(--cp-color-transparent);
+  --color-cp-bg-layout: var(--cp-color-bg-layout);
+  --color-cp-bg-container: var(--cp-color-bg-container);
+  --color-cp-bg-elevated: var(--cp-color-bg-elevated);
+  --color-cp-bg-spotlight: var(--cp-color-bg-spotlight);
+  --color-cp-bg-mask: var(--cp-color-bg-mask);
+  --color-cp-bg-text-hover: var(--cp-color-bg-text-hover);
+  --color-cp-bg-text-active: var(--cp-color-bg-text-active);
+  --color-cp-bg-container-disabled: var(--cp-color-bg-container-disabled);
+  --color-cp-fill-secondary: var(--cp-color-fill-secondary);
+  --color-cp-fill-tertiary: var(--cp-color-fill-tertiary);
+  --color-cp-fill-quaternary: var(--cp-color-fill-quaternary);
+  --color-cp-border: var(--cp-color-border);
+  --color-cp-border-secondary: var(--cp-color-border-secondary);
+  --color-cp-split: var(--cp-color-split);
+  --color-cp-text: var(--cp-color-text);
+  --color-cp-text-heading: var(--cp-color-text-heading);
+  --color-cp-text-secondary: var(--cp-color-text-secondary);
+  --color-cp-text-tertiary: var(--cp-color-text-tertiary);
+  --color-cp-text-quaternary: var(--cp-color-text-quaternary);
+  --color-cp-text-disabled: var(--cp-color-text-disabled);
+  --color-cp-text-light-solid: var(--cp-color-text-light-solid);
+
+  --color-cp-primary-bg: var(--cp-color-primary-bg);
+  --color-cp-primary-bg-hover: var(--cp-color-primary-bg-hover);
+  --color-cp-primary-border: var(--cp-color-primary-border);
+  --color-cp-primary-border-hover: var(--cp-color-primary-border-hover);
+  --color-cp-primary-hover: var(--cp-color-primary-hover);
+  --color-cp-primary: var(--cp-color-primary);
+  --color-cp-primary-active: var(--cp-color-primary-active);
+  --color-cp-primary-text-hover: var(--cp-color-primary-text-hover);
+  --color-cp-primary-text: var(--cp-color-primary-text);
+  --color-cp-primary-text-active: var(--cp-color-primary-text-active);
+  --color-cp-link: var(--cp-color-link);
+  --color-cp-link-hover: var(--cp-color-link-hover);
+  --color-cp-link-active: var(--cp-color-link-active);
+  --color-cp-control-item-bg-active: var(--cp-control-item-bg-active);
+  --color-cp-control-item-bg-active-hover: var(--cp-control-item-bg-active-hover);
+  --color-cp-control-outline: var(--cp-control-outline);
+  --color-cp-menu-item-selected-bg: var(--cp-menu-item-selected-bg);
+  --color-cp-progress-remaining: var(--cp-progress-remaining-color);
+
+  --color-cp-info: var(--cp-color-info);
+  --color-cp-info-hover: var(--cp-color-info-hover);
+  --color-cp-info-active: var(--cp-color-info-active);
+  --color-cp-info-bg: var(--cp-color-info-bg);
+  --color-cp-info-border: var(--cp-color-info-border);
+  --color-cp-info-text: var(--cp-color-info-text);
+  --color-cp-status-normal: var(--cp-color-status-normal);
+  --color-cp-status-normal-hover: var(--cp-color-status-normal-hover);
+  --color-cp-status-normal-active: var(--cp-color-status-normal-active);
+  --color-cp-status-normal-bg: var(--cp-color-status-normal-bg);
+  --color-cp-status-normal-border: var(--cp-color-status-normal-border);
+  --color-cp-status-normal-text: var(--cp-color-status-normal-text);
+  --color-cp-success: var(--cp-color-success);
+  --color-cp-success-bg: var(--cp-color-success-bg);
+  --color-cp-success-bg-hover: var(--cp-color-success-bg-hover);
+  --color-cp-success-bg-active: var(--cp-color-success-bg-active);
+  --color-cp-success-border: var(--cp-color-success-border);
+  --color-cp-success-text: var(--cp-color-success-text);
+  --color-cp-warning: var(--cp-color-warning);
+  --color-cp-warning-bg: var(--cp-color-warning-bg);
+  --color-cp-warning-bg-hover: var(--cp-color-warning-bg-hover);
+  --color-cp-warning-bg-active: var(--cp-color-warning-bg-active);
+  --color-cp-warning-border: var(--cp-color-warning-border);
+  --color-cp-warning-text: var(--cp-color-warning-text);
+  --color-cp-error: var(--cp-color-error);
+  --color-cp-error-bg: var(--cp-color-error-bg);
+  --color-cp-error-bg-hover: var(--cp-color-error-bg-hover);
+  --color-cp-error-bg-active: var(--cp-color-error-bg-active);
+  --color-cp-error-border: var(--cp-color-error-border);
+  --color-cp-error-text: var(--cp-color-error-text);
+  --color-cp-reasoning: var(--cp-color-reasoning);
+
+  --color-cp-account-plan-pro-bg: var(--cp-account-plan-pro-bg);
+  --color-cp-account-plan-pro: var(--cp-account-plan-pro-color);
+  --color-cp-account-plan-pro-lite-bg: var(--cp-account-plan-pro-lite-bg);
+  --color-cp-account-plan-pro-lite: var(--cp-account-plan-pro-lite-color);
+
+  --radius-cp-sm: var(--cp-border-radius-sm);
+  --radius-cp: var(--cp-border-radius);
+  --radius-cp-lg: var(--cp-border-radius-lg);
+  --radius-cp-card: var(--cp-card-border-radius);
+
+  --shadow-cp: var(--cp-box-shadow);
+  --shadow-cp-secondary: var(--cp-box-shadow-secondary);
+  --shadow-cp-tertiary: var(--cp-box-shadow-tertiary);
+  --shadow-cp-card: var(--cp-card-shadow);
+  --shadow-cp-input: var(--cp-input-shadow);
+  --shadow-cp-input-hover: var(--cp-input-hover-shadow);
+  --shadow-cp-input-active: var(--cp-input-active-shadow);
+  --shadow-cp-input-error-active: var(--cp-input-error-active-shadow);
+  --shadow-cp-layout-sider: var(--cp-layout-sider-shadow);
+
   --spacing-cp-control-sm: var(--cp-control-height-sm);
-  --spacing-cp-control-md: var(--cp-control-height-md);
+  --spacing-cp-control: var(--cp-control-height);
   --spacing-cp-control-lg: var(--cp-control-height-lg);
-  --spacing-cp-table-row-min: var(--cp-table-row-min-height);
-  --spacing-cp-table-row-min-compact: var(--cp-table-row-min-height-compact);
+  --spacing-cp-size-step: var(--cp-size-step);
+  --spacing-cp-table-row: var(--cp-table-row-height);
+  --spacing-cp-table-row-sm: var(--cp-table-row-height-sm);
+}
+
+@keyframes cp-skeleton-breathe {
+  0%,
+  100% {
+    background-color: var(--cp-color-fill-tertiary);
+  }
+
+  50% {
+    background-color: var(--cp-color-fill-secondary);
+  }
 }
diff --git a/frontend/src/styles/tokens.css b/frontend/src/styles/tokens.css
index 54bce8e7c..0570c7514 100644
--- a/frontend/src/styles/tokens.css
+++ b/frontend/src/styles/tokens.css
@@ -1,209 +1,42 @@
-:root {
+/* :root 提供首屏浅色兜底；data-theme 允许预览区域独立于宿主切换明暗。 */
+:root,
+[data-theme='light'] {
   color-scheme: light;
 
-  --cp-bg-page: #f6f8fb;
-  --cp-bg-surface: #ffffff;
-  --cp-bg-subtle: #f8fafc;
-  --cp-bg-muted: #f1f5f9;
-  --cp-bg-tertiary: #eef6ff;
-  --cp-bg-nav-active: #e9eef5;
-  --cp-bg-dark: #111827;
-  --cp-brand-mark-bg: #1c2a3d;
-  --cp-white: #ffffff;
-  --cp-transparent: #ffffff00;
-  --cp-overlay-scrim: #0e17264d;
+  /* 静态常量。皮肤 Token 由主题 Store 在 Vue 挂载前生成。 */
+  --cp-color-white: #ffffff;
+  --cp-color-transparent: #ffffff00;
 
-  --cp-text-primary: #0e1726;
-  --cp-text-strong: #111827;
-  --cp-text-secondary: #64748b;
-  --cp-text-tertiary: #94a3b8;
-  --cp-text-muted: #94a3b8;
-  --cp-brand-accent: #2563eb;
-  --cp-accent: #2563eb;
-  --cp-accent-hover: #1d4ed8;
-  --cp-accent-pressed: #1e40af;
-  --cp-accent-border: #93c5fd;
-  --cp-accent-on: #ffffff;
-  --cp-reasoning: #8b5cf6;
-  --cp-plan-pro-bg: #ede9fe;
-  --cp-plan-pro-text: #5b21b6;
-  --cp-plan-prolite-bg: #f5f3ff;
-  --cp-plan-prolite-text: #7c3aed;
+  /* 稳定的业务语义色，不参与主题编辑器派生。 */
+  --cp-color-status-normal: #0f9f9a;
+  --cp-color-status-normal-hover: #0d8d88;
+  --cp-color-status-normal-active: #0b7370;
+  --cp-color-status-normal-bg: #ecfdfd;
+  --cp-color-status-normal-border: #a7dfdd;
+  --cp-color-status-normal-text: #0b7370;
 
-  --cp-default-bg-hover: #f1f5f9;
-  --cp-default-bg-active: #e9eef5;
-  --cp-default-border: #e2e8f0;
-  --cp-default-border-hover: #cbd5e1;
-  --cp-border-primary: #d8e0ea;
-  --cp-divider-subtle: #d8e0ea6b;
-  --cp-progress-track: #e2e8f0;
+  --cp-color-reasoning: #8b5cf6;
 
-  --cp-control-focus-ring: #dbeafe;
-  --cp-input-soft-bg: #eef2f7;
-  --cp-input-soft-bg-hover: #f2f6fa;
-  --cp-input-soft-bg-focus: #f8fafc;
-  --cp-input-context-bg: #eef2f7;
-  --cp-input-context-bg-hover: #f2f6fa;
-  --cp-input-error-soft-bg: #fff1f1;
-
-  --cp-disabled-bg: #f1f5f9;
-  --cp-disabled-text: #94a3b8;
-  --cp-disabled-icon: #cbd5e1;
-
-  --cp-info: #2563eb;
-  --cp-info-hover: #1d4ed8;
-  --cp-info-pressed: #1e40af;
-  --cp-info-bg: #eef6ff;
-  --cp-info-border: #93c5fd;
-  --cp-info-text: #2563eb;
-  --cp-info-on: #ffffff;
-
-  --cp-normal: #0f9f9a;
-  --cp-normal-hover: #0d8d88;
-  --cp-normal-pressed: #0b7370;
-  --cp-normal-bg: #ecfdfd;
-  --cp-normal-border: #a7dfdd;
-  --cp-normal-text: #0b7370;
-
-  --cp-success: #12b981;
-  --cp-success-bg: #ecfdf5;
-  --cp-success-bg-hover: #ddfbea;
-  --cp-success-bg-active: #c8f5dc;
-  --cp-success-border: #b7ead0;
-  --cp-success-text: #047857;
-
-  --cp-warning: #f59e0b;
-  --cp-warning-bg: #fffbeb;
-  --cp-warning-bg-hover: #fef3c7;
-  --cp-warning-bg-active: #fde68a;
-  --cp-warning-border: #fcd34d;
-  --cp-warning-text: #b45309;
-
-  --cp-danger: #ef4444;
-  --cp-danger-bg: #fef2f2;
-  --cp-danger-bg-hover: #fee2e2;
-  --cp-danger-bg-active: #fecaca;
-  --cp-danger-border: #fca5a5;
-  --cp-danger-text: #b91c1c;
-  --cp-control-height-sm: 32px;
-  --cp-control-height-md: 38px;
-  --cp-control-height-lg: 44px;
-  --cp-table-row-min-height: 60px;
-  --cp-table-row-min-height-compact: 40px;
-  --cp-radius-control-sm: 6px;
-  --cp-radius-control: 8px;
-  --cp-radius-overlay: 12px;
-  --cp-radius-surface: 18px;
-
-  --cp-shadow-card: 0 10px 22px -18px #0e172614;
-  --cp-shadow-control: 0 9px 18px -14px #0e172616;
-  --cp-shadow-popover: 0 18px 38px -18px #0e17262b;
-  --cp-shadow-input: inset 0 1px 0 #ffffff66, 0 9px 18px -14px #0e172616;
-  --cp-shadow-input-hover: inset 0 1px 0 #ffffffcc, 0 0 0 3px var(--cp-control-focus-ring), 0 12px 24px -16px #0e17261f;
-  --cp-shadow-input-focus: inset 0 1px 0 #ffffff, 0 0 0 3px #dbeafe;
-  --cp-shadow-input-error: inset 0 1px 0 #ffffffcc, 0 0 0 3px #fee2e2;
-  --cp-shadow-sidebar: 2px 0 12px -12px #0e172607;
-  --cp-shadow-sticky: #0f172a61;
-  --cp-scrollbar-thumb: #cbd7e6;
-  --cp-scrollbar-thumb-hover: #aebed0;
+  --cp-account-plan-pro-bg: #ede9fe;
+  --cp-account-plan-pro-color: #5b21b6;
+  --cp-account-plan-pro-lite-bg: #f5f3ff;
+  --cp-account-plan-pro-lite-color: #7c3aed;
 }
 
-html[data-theme='dark'] {
+[data-theme='dark'] {
   color-scheme: dark;
 
-  --cp-bg-page: #0b111c;
-  --cp-bg-surface: #111a29;
-  --cp-bg-subtle: #162133;
-  --cp-bg-muted: #1c2a3d;
-  --cp-bg-tertiary: #142946;
-  --cp-bg-nav-active: #1b2a40;
-  --cp-bg-dark: #050913;
-  --cp-white: #ffffff;
-  --cp-transparent: #ffffff00;
-  --cp-overlay-scrim: #030712a6;
+  --cp-color-status-normal: #2dd4bf;
+  --cp-color-status-normal-hover: #5eead4;
+  --cp-color-status-normal-active: #14b8a6;
+  --cp-color-status-normal-bg: #0c332f;
+  --cp-color-status-normal-border: #1f6f67;
+  --cp-color-status-normal-text: #5eead4;
 
-  --cp-text-primary: #d8e2ee;
-  --cp-text-strong: #f5f8fc;
-  --cp-text-secondary: #8fa0b7;
-  --cp-text-tertiary: #71839c;
-  --cp-text-muted: #64748b;
-  --cp-brand-accent: #6ea8ff;
-  --cp-accent: #3b82f6;
-  --cp-accent-hover: #4f8ee8;
-  --cp-accent-pressed: #2563eb;
-  --cp-accent-border: #2e5e92;
-  --cp-accent-on: var(--cp-text-primary);
-  --cp-reasoning: #a78bfa;
-  --cp-plan-pro-bg: #35136f;
-  --cp-plan-pro-text: #ddd6fe;
-  --cp-plan-prolite-bg: #24143e;
-  --cp-plan-prolite-text: #c4b5fd;
+  --cp-color-reasoning: #a78bfa;
 
-  --cp-default-bg-hover: #1b2a40;
-  --cp-default-bg-active: #23354f;
-  --cp-default-border: #26364c;
-  --cp-default-border-hover: #344760;
-  --cp-border-primary: #29384d;
-  --cp-divider-subtle: #26364c80;
-  --cp-progress-track: #24334a;
-
-  --cp-control-focus-ring: #1f3f68;
-  --cp-input-soft-bg: #182437;
-  --cp-input-soft-bg-hover: #1d2d43;
-  --cp-input-soft-bg-focus: #111d2d;
-  --cp-input-context-bg: #182437;
-  --cp-input-context-bg-hover: #1d2d43;
-  --cp-input-error-soft-bg: #311b24;
-
-  --cp-disabled-bg: #182231;
-  --cp-disabled-text: #53647a;
-  --cp-disabled-icon: #44556b;
-
-  --cp-info: #3b82f6;
-  --cp-info-hover: #4f8ee8;
-  --cp-info-pressed: #2563eb;
-  --cp-info-bg: #102747;
-  --cp-info-border: #2e5e92;
-  --cp-info-text: #93c5fd;
-  --cp-info-on: var(--cp-text-primary);
-
-  --cp-normal: #2dd4bf;
-  --cp-normal-hover: #5eead4;
-  --cp-normal-pressed: #14b8a6;
-  --cp-normal-bg: #0c332f;
-  --cp-normal-border: #1f6f67;
-  --cp-normal-text: #5eead4;
-
-  --cp-success: #34d399;
-  --cp-success-bg: #0e3427;
-  --cp-success-bg-hover: #13432f;
-  --cp-success-bg-active: #18543b;
-  --cp-success-border: #247554;
-  --cp-success-text: #86efac;
-
-  --cp-warning: #fbbf24;
-  --cp-warning-bg: #38280c;
-  --cp-warning-bg-hover: #4a3510;
-  --cp-warning-bg-active: #5d4314;
-  --cp-warning-border: #7a581a;
-  --cp-warning-text: #fcd34d;
-
-  --cp-danger: #fb7185;
-  --cp-danger-bg: #3b1620;
-  --cp-danger-bg-hover: #4b1c28;
-  --cp-danger-bg-active: #612333;
-  --cp-danger-border: #7f2d42;
-  --cp-danger-text: #fda4af;
-
-  --cp-shadow-card: 0 18px 34px -26px #000000a3, inset 0 1px 0 #ffffff08;
-  --cp-shadow-control: 0 12px 24px -20px #000000a8, inset 0 1px 0 #ffffff08;
-  --cp-shadow-popover: 0 24px 52px -26px #000000d1, inset 0 1px 0 #ffffff0a;
-  --cp-shadow-input: inset 0 1px 0 #ffffff08, 0 12px 24px -20px #000000a8;
-  --cp-shadow-input-hover: inset 0 1px 0 #ffffff10, 0 0 0 3px var(--cp-control-focus-ring), 0 14px 28px -22px #000000b8;
-  --cp-shadow-input-focus: inset 0 1px 0 #ffffff12, 0 0 0 3px #1f3f68;
-  --cp-shadow-input-error: inset 0 1px 0 #ffffff0d, 0 0 0 3px #5a1f2d;
-  --cp-shadow-sidebar: 2px 0 18px -14px #000000b8;
-  --cp-shadow-sticky: #000000bf;
-  --cp-scrollbar-thumb: #2b3e56;
-  --cp-scrollbar-thumb-hover: #405774;
+  --cp-account-plan-pro-bg: #35136f;
+  --cp-account-plan-pro-color: #ddd6fe;
+  --cp-account-plan-pro-lite-bg: #24143e;
+  --cp-account-plan-pro-lite-color: #c4b5fd;
 }
diff --git a/frontend/src/theme/browser.ts b/frontend/src/theme/browser.ts
new file mode 100644
index 000000000..7e316672d
--- /dev/null
+++ b/frontend/src/theme/browser.ts
@@ -0,0 +1,36 @@
+// @env browser
+
+import type { ResolvedTheme } from './index'
+
+const RUNTIME_THEME_STYLE_ID = 'cp-runtime-theme'
+
+export function applyResolvedTheme(root: HTMLElement, theme: ResolvedTheme): void {
+  root.dataset.theme = theme.name
+  root.dataset.themeColor = theme.colorId
+
+  const style = ensureRuntimeThemeStyle(root.ownerDocument)
+  style.dataset.theme = theme.name
+  style.dataset.themeColor = theme.colorId
+  style.textContent = serializeTheme(theme)
+}
+
+function ensureRuntimeThemeStyle(document: Document): HTMLStyleElement {
+  const existing = document.getElementById(RUNTIME_THEME_STYLE_ID)
+  if (existing?.tagName === 'STYLE')
+    return existing as HTMLStyleElement
+
+  existing?.remove()
+  const style = document.createElement('style')
+  style.id = RUNTIME_THEME_STYLE_ID
+  style.setAttribute('data-cp-runtime-theme', '')
+  document.head.append(style)
+  return style
+}
+
+function serializeTheme(theme: ResolvedTheme): string {
+  const declarations = Object.entries(theme.tokens)
+    .map(([name, value]) => `  ${name}: ${value};`)
+    .join('\n')
+
+  return `:root[data-theme='${theme.name}'][data-theme-color='${theme.colorId}'] {\n  color-scheme: ${theme.name};\n${declarations}\n}\n`
+}
diff --git a/frontend/src/theme/constants.ts b/frontend/src/theme/constants.ts
new file mode 100644
index 000000000..0c7bd1764
--- /dev/null
+++ b/frontend/src/theme/constants.ts
@@ -0,0 +1,215 @@
+import type {
+  ThemeColorPreset,
+  ThemeColorPresetId,
+  ThemeCustomization,
+  ThemeMode,
+  ThemeTokenName,
+} from './index'
+
+export const DEFAULT_THEME_MODE: ThemeMode = 'system'
+export const DEFAULT_THEME_COLOR: ThemeColorPresetId = 'relay-blue'
+export const DEFAULT_CUSTOM_THEME_COLOR = '#5983F4'
+export const DEFAULT_THEME_CUSTOMIZATION: ThemeCustomization = {}
+
+export const DEFAULT_SEED_COLORS = {
+  colorSuccess: '#12B981',
+  colorWarning: '#F59E0B',
+  colorError: '#EF4444',
+  colorInfo: '#5983F4',
+} as const
+
+export const DEFAULT_DIMENSIONS = {
+  fontSize: 13,
+  sizeUnit: 4,
+  sizeStep: 4,
+  controlHeight: 38,
+  tableRowHeight: 60,
+  borderRadius: 8,
+  cardBorderRadius: 18,
+  shadowStrength: 100,
+} as const
+
+export const THEME_COLOR_PRESETS: readonly ThemeColorPreset[] = [
+  {
+    id: 'relay-blue',
+    label: '中继蓝',
+    description: '石墨表面上的清晰交互信号',
+    seed: '#5983F4',
+  },
+  {
+    id: 'deep-teal',
+    label: '深海青',
+    description: '氧化铜落入深水玻璃的冷静层次',
+    seed: '#0E7C72',
+    appearance: {
+      light: {
+        colorBgBase: '#FBFEFD',
+        colorTextBase: '#122C2A',
+      },
+      dark: {
+        colorBgBase: '#102321',
+        colorTextBase: '#D7EAE6',
+      },
+    },
+  },
+  {
+    id: 'signal-violet',
+    label: '古风色',
+    description: '赭石落在宣纸与松烟墨上的温厚层次',
+    seed: '#A0583D',
+    appearance: {
+      light: {
+        colorBgBase: '#F9F3E8',
+        colorTextBase: '#2B211B',
+      },
+      dark: {
+        colorBgBase: '#1E1713',
+        colorTextBase: '#EEE3D3',
+      },
+    },
+  },
+  {
+    id: 'graphite',
+    label: '石墨',
+    description: '铅笔粉末与工作室灰纸的材料质感',
+    seed: '#525B66',
+    appearance: {
+      light: {
+        colorBgBase: '#FAF9F6',
+        colorTextBase: '#25272B',
+      },
+      dark: {
+        colorBgBase: '#1B1C1E',
+        colorTextBase: '#E5E1D9',
+      },
+    },
+  },
+] as const
+
+export const LIGHT_FOREGROUND = '#FFFFFF'
+export const LIGHT_CONTAINER_BASE = '#FFFFFF'
+export const LIGHT_TEXT_BASE = '#0E1726'
+export const DARK_CONTAINER_BASE = '#111A29'
+export const DARK_SPOTLIGHT_BASE = '#030710'
+export const DARK_TEXT_BASE = '#D8E2EE'
+export const BLACK = '#000000'
+export const WHITE = '#FFFFFF'
+
+export const NEUTRAL_LIGHT_SURFACES = {
+  colorBgLayout: '#F6F8FB',
+  colorBgContainer: LIGHT_CONTAINER_BASE,
+  colorBgElevated: '#F8FAFC',
+  colorBgSpotlight: '#111827',
+  colorBgMask: '#0E17264D',
+  colorBgTextHover: '#F1F5F9',
+  colorBgTextActive: '#E9EEF5',
+  colorBgContainerDisabled: '#F1F5F9',
+  colorFillSecondary: '#E9EEF5',
+  colorFillTertiary: '#F1F5F9',
+  colorFillQuaternary: '#F8FAFC',
+  colorBorder: '#D8E0EA',
+  colorBorderSecondary: '#E2E8F0',
+  colorSplit: '#D8E0EA6B',
+  colorTextHeading: '#111827',
+  colorTextSecondary: '#64748B',
+  colorTextTertiary: '#94A3B8',
+  colorTextQuaternary: '#94A3B8',
+  colorTextDisabled: '#94A3B8',
+} as const
+
+export const NEUTRAL_DARK_SURFACES = {
+  colorBgLayout: '#0B111C',
+  colorBgContainer: DARK_CONTAINER_BASE,
+  colorBgElevated: '#162133',
+  colorBgSpotlight: '#050913',
+  colorBgMask: '#030712A6',
+  colorBgTextHover: '#1B2A40',
+  colorBgTextActive: '#23354F',
+  colorBgContainerDisabled: '#182231',
+  colorFillSecondary: '#23354F',
+  colorFillTertiary: '#1C2A3D',
+  colorFillQuaternary: '#162133',
+  colorBorder: '#29384D',
+  colorBorderSecondary: '#26364C',
+  colorSplit: '#26364C80',
+  colorTextHeading: '#F5F8FC',
+  colorTextSecondary: '#8FA0B7',
+  colorTextTertiary: '#71839C',
+  colorTextQuaternary: '#64748B',
+  colorTextDisabled: '#53647A',
+} as const
+
+export const NEUTRAL_LIGHT_INPUT = {
+  bg: '#EEF2F7',
+  hoverBg: '#F2F6FA',
+  activeBg: '#F8FAFC',
+} as const
+
+export const NEUTRAL_DARK_INPUT = {
+  bg: '#182437',
+  hoverBg: '#1D2D43',
+  activeBg: '#111D2D',
+} as const
+
+export const NEUTRAL_DARK_SEMANTIC_TEXT = {
+  info: '#93C5FD',
+  success: '#86EFAC',
+  warning: '#FCD34D',
+  error: '#FDA4AF',
+} as const
+
+/** 阴影保持中性，不跟随主题主色染色。 */
+export const NEUTRAL_LIGHT_SHADOWS = {
+  boxShadow: '0 18px 38px -18px #0E17262B',
+  boxShadowSecondary: '0 10px 22px -18px #0E172614',
+  boxShadowTertiary: '0 9px 18px -14px #0E172616',
+  cardShadow: '0 10px 22px -18px #0E172614',
+  inputShadow: '0 9px 18px -14px #0E172616',
+  inputHoverDropShadow: '0 12px 24px -16px #0E17261F',
+  layoutSiderShadow: '2px 0 12px -12px #0E172607',
+} as const
+
+export const NEUTRAL_DARK_SHADOWS = {
+  boxShadow: '0 24px 52px -26px #000000D1',
+  boxShadowSecondary: '0 18px 34px -26px #000000A3',
+  boxShadowTertiary: '0 12px 24px -20px #000000A8',
+  cardShadow: '0 18px 34px -26px #000000A3',
+  inputShadow: '0 12px 24px -20px #000000A8',
+  inputHoverDropShadow: '0 14px 28px -22px #000000B8',
+  layoutSiderShadow: '2px 0 18px -14px #000000B8',
+} as const
+
+export const EDITABLE_COLOR_TOKEN_NAMES = new Set<ThemeTokenName>([
+  '--cp-color-bg-elevated',
+  '--cp-color-bg-text-hover',
+  '--cp-color-bg-text-active',
+  '--cp-control-item-bg-active',
+  '--cp-control-item-bg-active-hover',
+  '--cp-menu-item-selected-bg',
+  '--cp-input-bg',
+  '--cp-input-hover-bg',
+  '--cp-input-active-bg',
+  '--cp-button-primary-color',
+  '--cp-button-primary-bg',
+  '--cp-button-primary-hover-bg',
+  '--cp-button-primary-active-bg',
+  '--cp-card-bg',
+  '--cp-table-header-bg',
+  '--cp-table-row-bg',
+  '--cp-table-row-stripe-bg',
+  '--cp-table-row-hover-bg',
+  '--cp-table-row-selected-bg',
+  '--cp-progress-remaining-color',
+  '--cp-layout-sider-bg',
+  '--cp-scrollbar-thumb-bg',
+  '--cp-scrollbar-thumb-hover-bg',
+])
+
+export const EDITABLE_SHADOW_TOKEN_NAMES = new Set<ThemeTokenName>([
+  '--cp-box-shadow',
+  '--cp-input-shadow',
+  '--cp-input-hover-shadow',
+  '--cp-input-active-shadow',
+  '--cp-card-shadow',
+  '--cp-layout-sider-shadow',
+])
diff --git a/frontend/src/theme/index.ts b/frontend/src/theme/index.ts
new file mode 100644
index 000000000..f2c9afc38
--- /dev/null
+++ b/frontend/src/theme/index.ts
@@ -0,0 +1,1214 @@
+import { generate } from '@ant-design/colors'
+
+import { normalizeHexColor } from '@/utils/color'
+
+import {
+  BLACK,
+  DARK_CONTAINER_BASE,
+  DARK_TEXT_BASE,
+  DEFAULT_CUSTOM_THEME_COLOR,
+  DEFAULT_DIMENSIONS,
+  DEFAULT_SEED_COLORS,
+  DEFAULT_THEME_CUSTOMIZATION,
+  EDITABLE_COLOR_TOKEN_NAMES,
+  EDITABLE_SHADOW_TOKEN_NAMES,
+  LIGHT_CONTAINER_BASE,
+  LIGHT_FOREGROUND,
+  LIGHT_TEXT_BASE,
+  NEUTRAL_DARK_INPUT,
+  NEUTRAL_DARK_SEMANTIC_TEXT,
+  NEUTRAL_DARK_SHADOWS,
+  NEUTRAL_DARK_SURFACES,
+  NEUTRAL_LIGHT_INPUT,
+  NEUTRAL_LIGHT_SHADOWS,
+  NEUTRAL_LIGHT_SURFACES,
+  THEME_COLOR_PRESETS,
+  WHITE,
+} from './constants'
+
+export { applyResolvedTheme } from './browser'
+export {
+  DEFAULT_CUSTOM_THEME_COLOR,
+  DEFAULT_THEME_COLOR,
+  DEFAULT_THEME_CUSTOMIZATION,
+  DEFAULT_THEME_MODE,
+  THEME_COLOR_PRESETS,
+} from './constants'
+
+export type ThemeMode = 'system' | 'light' | 'dark'
+export type ThemeName = 'light' | 'dark'
+export type ThemeColorPresetId = 'relay-blue' | 'deep-teal' | 'signal-violet' | 'graphite'
+export type ThemeColorId = ThemeColorPresetId | 'custom'
+
+export interface ThemeAppearanceSeed {
+  colorBgBase: string
+  colorTextBase: string
+}
+
+export interface ThemeColorPreset {
+  id: ThemeColorPresetId
+  label: string
+  description: string
+  seed: string
+  appearance?: Partial<Record<ThemeName, ThemeAppearanceSeed>>
+}
+
+export type ThemeTokenName
+  = '--cp-color-bg-layout'
+    | '--cp-color-bg-container'
+    | '--cp-color-bg-elevated'
+    | '--cp-color-bg-spotlight'
+    | '--cp-color-bg-mask'
+    | '--cp-color-bg-text-hover'
+    | '--cp-color-bg-text-active'
+    | '--cp-color-bg-container-disabled'
+    | '--cp-color-fill-secondary'
+    | '--cp-color-fill-tertiary'
+    | '--cp-color-fill-quaternary'
+    | '--cp-color-border'
+    | '--cp-color-border-secondary'
+    | '--cp-color-split'
+    | '--cp-color-text'
+    | '--cp-color-text-heading'
+    | '--cp-color-text-secondary'
+    | '--cp-color-text-tertiary'
+    | '--cp-color-text-quaternary'
+    | '--cp-color-text-disabled'
+    | '--cp-color-text-light-solid'
+    | '--cp-color-shadow'
+    | '--cp-color-primary-bg'
+    | '--cp-color-primary-bg-hover'
+    | '--cp-color-primary-border'
+    | '--cp-color-primary-border-hover'
+    | '--cp-color-primary-hover'
+    | '--cp-color-primary'
+    | '--cp-color-primary-active'
+    | '--cp-color-primary-text-hover'
+    | '--cp-color-primary-text'
+    | '--cp-color-primary-text-active'
+    | '--cp-color-link'
+    | '--cp-color-link-hover'
+    | '--cp-color-link-active'
+    | '--cp-control-item-bg-active'
+    | '--cp-control-item-bg-active-hover'
+    | '--cp-control-outline'
+    | '--cp-menu-item-selected-bg'
+    | '--cp-input-bg'
+    | '--cp-input-hover-bg'
+    | '--cp-input-active-bg'
+    | '--cp-input-error-active-bg'
+    | '--cp-button-primary-color'
+    | '--cp-button-primary-bg'
+    | '--cp-button-primary-hover-bg'
+    | '--cp-button-primary-active-bg'
+    | '--cp-brand-mark-bg'
+    | '--cp-card-bg'
+    | '--cp-table-header-bg'
+    | '--cp-table-row-bg'
+    | '--cp-table-row-stripe-bg'
+    | '--cp-table-row-hover-bg'
+    | '--cp-table-row-selected-bg'
+    | '--cp-progress-remaining-color'
+    | '--cp-layout-sider-bg'
+    | '--cp-box-shadow'
+    | '--cp-box-shadow-secondary'
+    | '--cp-box-shadow-tertiary'
+    | '--cp-card-shadow'
+    | '--cp-input-shadow'
+    | '--cp-input-hover-shadow'
+    | '--cp-input-active-shadow'
+    | '--cp-input-error-active-shadow'
+    | '--cp-layout-sider-shadow'
+    | '--cp-scrollbar-thumb-bg'
+    | '--cp-scrollbar-thumb-hover-bg'
+    | '--cp-color-info'
+    | '--cp-color-info-hover'
+    | '--cp-color-info-active'
+    | '--cp-color-info-bg'
+    | '--cp-color-info-border'
+    | '--cp-color-info-text'
+    | '--cp-color-success'
+    | '--cp-color-success-bg'
+    | '--cp-color-success-bg-hover'
+    | '--cp-color-success-bg-active'
+    | '--cp-color-success-border'
+    | '--cp-color-success-text'
+    | '--cp-color-warning'
+    | '--cp-color-warning-bg'
+    | '--cp-color-warning-bg-hover'
+    | '--cp-color-warning-bg-active'
+    | '--cp-color-warning-border'
+    | '--cp-color-warning-text'
+    | '--cp-color-error'
+    | '--cp-color-error-bg'
+    | '--cp-color-error-bg-hover'
+    | '--cp-color-error-bg-active'
+    | '--cp-color-error-border'
+    | '--cp-color-error-text'
+    | '--cp-control-height-sm'
+    | '--cp-control-height'
+    | '--cp-control-height-lg'
+    | '--cp-font-size-xs'
+    | '--cp-font-size-sm'
+    | '--cp-font-size'
+    | '--cp-font-size-lg'
+    | '--cp-font-size-xl'
+    | '--cp-line-height-xs'
+    | '--cp-line-height-sm'
+    | '--cp-line-height'
+    | '--cp-line-height-lg'
+    | '--cp-line-height-xl'
+    | '--cp-size-unit'
+    | '--cp-size-step'
+    | '--cp-table-row-height'
+    | '--cp-table-row-height-sm'
+    | '--cp-border-radius-sm'
+    | '--cp-border-radius'
+    | '--cp-border-radius-lg'
+    | '--cp-card-border-radius'
+
+export type ThemeTokens = Record<ThemeTokenName, string>
+
+export interface ThemeSeedOverrides {
+  colorSuccess?: string
+  colorWarning?: string
+  colorError?: string
+  colorInfo?: string
+  colorLink?: string
+  colorTextBase?: string
+  colorBgBase?: string
+  fontSize?: number
+  sizeUnit?: number
+  sizeStep?: number
+  controlHeight?: number
+  borderRadius?: number
+  shadowStrength?: number
+}
+
+export interface ThemeComponentOverrides {
+  tableRowHeight?: number
+  cardBorderRadius?: number
+}
+
+export interface ThemeCustomization {
+  seed?: ThemeSeedOverrides
+  component?: ThemeComponentOverrides
+  tokenOverrides?: Partial<ThemeTokens>
+}
+
+export interface ResolvedThemeSeedTokens {
+  colorPrimary: string
+  colorSuccess: string
+  colorWarning: string
+  colorError: string
+  colorInfo: string
+  colorLink: string
+  colorTextBase: string
+  colorBgBase: string
+  fontSize: number
+  sizeUnit: number
+  sizeStep: number
+  controlHeight: number
+  borderRadius: number
+  shadowStrength: number
+}
+
+export interface ResolvedTheme {
+  name: ThemeName
+  colorId: ThemeColorId
+  seed: string
+  seedTokens: ResolvedThemeSeedTokens
+  tokens: ThemeTokens
+}
+
+interface RgbColor {
+  red: number
+  green: number
+  blue: number
+}
+
+/** Seed 派生出的主色 Map。页面和组件不得直接消费这一层。 */
+interface ThemePrimaryMap {
+  colorPrimaryBg: string
+  colorPrimaryBgHover: string
+  colorPrimaryBorder: string
+  colorPrimaryBorderHover: string
+  colorPrimaryHover: string
+  colorPrimary: string
+  colorPrimaryActive: string
+  colorPrimaryTextHover: string
+  colorPrimaryText: string
+  colorPrimaryTextActive: string
+  colorPrimarySolid: string
+  colorPrimarySolidHover: string
+  colorPrimarySolidActive: string
+  colorTextLightSolid: string
+}
+
+/** 背景与文字 Seed 派生出的中性表面 Map；品牌主色不得进入这一层。 */
+interface ThemeSurfaceMap {
+  colorBgLayout: string
+  colorBgContainer: string
+  colorBgElevated: string
+  colorBgSpotlight: string
+  colorBgMask: string
+  colorBgTextHover: string
+  colorBgTextActive: string
+  colorBgContainerDisabled: string
+  colorFillSecondary: string
+  colorFillTertiary: string
+  colorFillQuaternary: string
+  colorBorder: string
+  colorBorderSecondary: string
+  colorSplit: string
+  colorText: string
+  colorTextHeading: string
+  colorTextSecondary: string
+  colorTextTertiary: string
+  colorTextQuaternary: string
+  colorTextDisabled: string
+  colorShadow: string
+}
+
+interface ThemeShadowMap {
+  boxShadow: string
+  boxShadowSecondary: string
+  boxShadowTertiary: string
+}
+
+interface ThemeComponentMap {
+  menuItemSelectedBg: string
+  inputBg: string
+  inputHoverBg: string
+  inputActiveBg: string
+  inputErrorActiveBg: string
+  buttonPrimaryColor: string
+  buttonPrimaryBg: string
+  buttonPrimaryHoverBg: string
+  buttonPrimaryActiveBg: string
+  brandMarkBg: string
+  cardBg: string
+  tableHeaderBg: string
+  tableRowBg: string
+  tableRowStripeBg: string
+  tableRowHoverBg: string
+  tableRowSelectedBg: string
+  progressRemainingColor: string
+  layoutSiderBg: string
+  cardShadow: string
+  inputShadow: string
+  inputHoverShadow: string
+  inputActiveShadow: string
+  inputErrorActiveShadow: string
+  layoutSiderShadow: string
+  scrollbarThumbBg: string
+  scrollbarThumbHoverBg: string
+}
+
+interface FunctionalColorMap {
+  color: string
+  hover: string
+  active: string
+  background: string
+  backgroundHover: string
+  backgroundActive: string
+  border: string
+  text: string
+}
+
+interface ThemeSemanticMap {
+  info: FunctionalColorMap
+  success: FunctionalColorMap
+  warning: FunctionalColorMap
+  error: FunctionalColorMap
+}
+
+interface ThemeDimensionMap {
+  fontSizeXs: string
+  fontSizeSm: string
+  fontSize: string
+  fontSizeLg: string
+  fontSizeXl: string
+  lineHeightXs: string
+  lineHeightSm: string
+  lineHeight: string
+  lineHeightLg: string
+  lineHeightXl: string
+  sizeUnit: string
+  sizeStep: string
+  controlHeightSm: string
+  controlHeight: string
+  controlHeightLg: string
+  tableRowHeight: string
+  tableRowHeightSm: string
+  borderRadiusSm: string
+  borderRadius: string
+  borderRadiusLg: string
+  cardBorderRadius: string
+}
+
+export function resolveThemeName(mode: ThemeMode, prefersDark: boolean): ThemeName {
+  if (mode === 'system')
+    return prefersDark ? 'dark' : 'light'
+  return mode
+}
+
+export function resolveThemeSeed(colorId: ThemeColorId, customColor: string): string {
+  if (colorId === 'custom')
+    return normalizeHexColor(customColor) ?? DEFAULT_CUSTOM_THEME_COLOR
+  return themeColorPreset(colorId).seed
+}
+
+export function resolveTheme(
+  name: ThemeName,
+  colorId: ThemeColorId,
+  customColor: string,
+  customization: ThemeCustomization = DEFAULT_THEME_CUSTOMIZATION,
+): ResolvedTheme {
+  const seed = resolveThemeSeed(colorId, customColor)
+  const normalizedCustomization = normalizeThemeCustomization(customization)
+  const appearance = colorId === 'custom'
+    ? deriveCustomThemeAppearance(name, seed)
+    : themeColorPreset(colorId).appearance?.[name]
+  const seedTokens = resolveThemeSeedTokens(
+    name,
+    seed,
+    normalizedCustomization.seed,
+    appearance,
+  )
+  const surfaces = deriveThemeSurfaceMap(name, seedTokens)
+  const primary = deriveThemePrimaryMap(seed, name, surfaces.colorBgContainer)
+  const link = seedTokens.colorLink === seed
+    ? primary
+    : deriveThemePrimaryMap(seedTokens.colorLink, name, surfaces.colorBgContainer)
+  const semantics = deriveThemeSemanticMap(name, surfaces.colorBgContainer, seedTokens)
+  const shadows = deriveThemeShadowMap(name, seedTokens.shadowStrength)
+  const components = deriveThemeComponentMap(
+    name,
+    surfaces,
+    primary,
+    semantics.error,
+    seedTokens.shadowStrength,
+  )
+  const dimensions = deriveThemeDimensionMap(seedTokens, normalizedCustomization.component)
+  const tokens = toThemeTokens(surfaces, primary, link, semantics, shadows, components, dimensions)
+  const mergedTokens: ThemeTokens = {
+    ...tokens,
+    ...normalizedCustomization.tokenOverrides,
+  }
+  mergedTokens['--cp-button-primary-color']
+    = normalizedCustomization.tokenOverrides?.['--cp-button-primary-color']
+      ?? solidControlTextColor(mergedTokens['--cp-button-primary-bg'])
+
+  return {
+    name,
+    colorId,
+    seed,
+    seedTokens,
+    tokens: mergedTokens,
+  }
+}
+
+export function normalizeThemeCustomization(value: unknown): ThemeCustomization {
+  if (!value || typeof value !== 'object')
+    return {}
+
+  const source = value as { seed?: unknown, component?: unknown, tokenOverrides?: unknown }
+  const seed = normalizeThemeSeedOverrides(source.seed)
+  const component = normalizeThemeComponentOverrides(source.component)
+  const tokenOverrides = normalizeThemeTokenOverrides(source.tokenOverrides)
+  return {
+    ...(Object.keys(seed).length > 0 ? { seed } : {}),
+    ...(Object.keys(component).length > 0 ? { component } : {}),
+    ...(Object.keys(tokenOverrides).length > 0 ? { tokenOverrides } : {}),
+  }
+}
+
+export function themeColorPreset(id: ThemeColorPresetId): ThemeColorPreset {
+  return THEME_COLOR_PRESETS.find(preset => preset.id === id) ?? THEME_COLOR_PRESETS[0]!
+}
+
+export function isThemeMode(value: unknown): value is ThemeMode {
+  return value === 'system' || value === 'light' || value === 'dark'
+}
+
+export function isThemeColorId(value: unknown): value is ThemeColorId {
+  return value === 'custom' || THEME_COLOR_PRESETS.some(preset => preset.id === value)
+}
+
+function resolveThemeSeedTokens(
+  theme: ThemeName,
+  colorPrimary: string,
+  overrides: ThemeSeedOverrides | undefined,
+  appearance: ThemeAppearanceSeed | undefined,
+): ResolvedThemeSeedTokens {
+  return {
+    colorPrimary,
+    colorSuccess: overrides?.colorSuccess ?? DEFAULT_SEED_COLORS.colorSuccess,
+    colorWarning: overrides?.colorWarning ?? DEFAULT_SEED_COLORS.colorWarning,
+    colorError: overrides?.colorError ?? DEFAULT_SEED_COLORS.colorError,
+    colorInfo: overrides?.colorInfo ?? DEFAULT_SEED_COLORS.colorInfo,
+    colorLink: overrides?.colorLink ?? colorPrimary,
+    colorTextBase: overrides?.colorTextBase
+      ?? appearance?.colorTextBase
+      ?? (theme === 'dark' ? DARK_TEXT_BASE : LIGHT_TEXT_BASE),
+    colorBgBase: overrides?.colorBgBase
+      ?? appearance?.colorBgBase
+      ?? (theme === 'dark' ? DARK_CONTAINER_BASE : LIGHT_CONTAINER_BASE),
+    fontSize: overrides?.fontSize ?? DEFAULT_DIMENSIONS.fontSize,
+    sizeUnit: overrides?.sizeUnit ?? DEFAULT_DIMENSIONS.sizeUnit,
+    sizeStep: overrides?.sizeStep ?? DEFAULT_DIMENSIONS.sizeStep,
+    controlHeight: overrides?.controlHeight ?? DEFAULT_DIMENSIONS.controlHeight,
+    borderRadius: overrides?.borderRadius ?? DEFAULT_DIMENSIONS.borderRadius,
+    shadowStrength: overrides?.shadowStrength ?? DEFAULT_DIMENSIONS.shadowStrength,
+  }
+}
+
+/**
+ * 自定义品牌色只为中性界面注入少量色温，再进入统一 Surface Map。
+ * 主色负责交互与状态反馈，不能直接把所有容器和浮层染成同一块高色度表面。
+ * 显式的背景或文字 Seed 会在上一层覆盖这里。
+ */
+function deriveCustomThemeAppearance(
+  theme: ThemeName,
+  colorPrimary: string,
+): ThemeAppearanceSeed {
+  if (theme === 'dark') {
+    const [paletteBackground] = generate(colorPrimary, { theme: 'dark' })
+    const tintedBackground = normalizeHexColor(paletteBackground) ?? DARK_CONTAINER_BASE
+    return {
+      colorBgBase: mix(DARK_CONTAINER_BASE, tintedBackground, 0.3),
+      colorTextBase: DARK_TEXT_BASE,
+    }
+  }
+
+  return {
+    colorBgBase: mix(LIGHT_CONTAINER_BASE, colorPrimary, 0.028),
+    colorTextBase: LIGHT_TEXT_BASE,
+  }
+}
+
+function deriveThemeSurfaceMap(
+  theme: ThemeName,
+  seedTokens: ResolvedThemeSeedTokens,
+): ThemeSurfaceMap {
+  return theme === 'dark'
+    ? deriveNeutralDarkSurfaceMap(seedTokens)
+    : deriveNeutralLightSurfaceMap(seedTokens)
+}
+
+function deriveNeutralDarkSurfaceMap(seedTokens: ResolvedThemeSeedTokens): ThemeSurfaceMap {
+  const background = seedTokens.colorBgBase
+  const baselineBackground = background === DARK_CONTAINER_BASE
+  const colorText = seedTokens.colorTextBase
+  const colorFillQuaternary = baselineBackground
+    ? NEUTRAL_DARK_SURFACES.colorFillQuaternary
+    : mix(background, colorText, 0.045)
+  const colorFillTertiary = baselineBackground
+    ? NEUTRAL_DARK_SURFACES.colorFillTertiary
+    : mix(background, colorText, 0.075)
+  const colorFillSecondary = baselineBackground
+    ? NEUTRAL_DARK_SURFACES.colorFillSecondary
+    : mix(background, colorText, 0.12)
+  const colorBorderSecondary = baselineBackground
+    ? NEUTRAL_DARK_SURFACES.colorBorderSecondary
+    : mix(background, colorText, 0.105)
+  const colorBorder = baselineBackground
+    ? NEUTRAL_DARK_SURFACES.colorBorder
+    : mix(background, colorText, 0.155)
+  const colorBgTextHover = baselineBackground
+    ? NEUTRAL_DARK_SURFACES.colorBgTextHover
+    : mix(background, colorText, 0.08)
+  const baselineText = colorText === DARK_TEXT_BASE
+
+  return {
+    colorBgLayout: baselineBackground
+      ? NEUTRAL_DARK_SURFACES.colorBgLayout
+      : mix(background, BLACK, 0.3),
+    colorBgContainer: background,
+    colorBgElevated: baselineBackground
+      ? NEUTRAL_DARK_SURFACES.colorBgElevated
+      : mix(background, WHITE, 0.045),
+    colorBgSpotlight: baselineBackground
+      ? NEUTRAL_DARK_SURFACES.colorBgSpotlight
+      : mix(background, BLACK, 0.74),
+    colorBgMask: baselineBackground
+      ? NEUTRAL_DARK_SURFACES.colorBgMask
+      : withAlpha(mix(background, BLACK, 0.8), 0.68),
+    // 静态弱填充比 Hover 更安静，避免所有内容块都呈现为交互态。
+    colorBgTextHover,
+    colorBgTextActive: baselineBackground
+      ? NEUTRAL_DARK_SURFACES.colorBgTextActive
+      : colorFillSecondary,
+    colorBgContainerDisabled: baselineBackground
+      ? NEUTRAL_DARK_SURFACES.colorBgContainerDisabled
+      : mix(background, colorText, 0.035),
+    colorFillSecondary,
+    colorFillTertiary,
+    colorFillQuaternary,
+    colorBorder,
+    colorBorderSecondary,
+    colorSplit: baselineBackground
+      ? NEUTRAL_DARK_SURFACES.colorSplit
+      : withAlpha(colorBorderSecondary, 0.5),
+    colorText,
+    colorTextHeading: baselineText
+      ? NEUTRAL_DARK_SURFACES.colorTextHeading
+      : mix(colorText, WHITE, 0.74),
+    colorTextSecondary: baselineText
+      ? NEUTRAL_DARK_SURFACES.colorTextSecondary
+      : mix(colorText, background, 0.36),
+    colorTextTertiary: baselineText
+      ? NEUTRAL_DARK_SURFACES.colorTextTertiary
+      : mix(colorText, background, 0.5),
+    colorTextQuaternary: baselineText
+      ? NEUTRAL_DARK_SURFACES.colorTextQuaternary
+      : mix(colorText, background, 0.58),
+    colorTextDisabled: baselineText
+      ? NEUTRAL_DARK_SURFACES.colorTextDisabled
+      : mix(colorText, background, 0.66),
+    colorShadow: withAlpha(BLACK, 0.75),
+  }
+}
+
+function deriveNeutralLightSurfaceMap(seedTokens: ResolvedThemeSeedTokens): ThemeSurfaceMap {
+  const background = seedTokens.colorBgBase
+  const baselineBackground = background === LIGHT_CONTAINER_BASE
+  const colorFillQuaternary = baselineBackground
+    ? NEUTRAL_LIGHT_SURFACES.colorFillQuaternary
+    : mix(background, seedTokens.colorTextBase, 0.035)
+  const colorFillTertiary = baselineBackground
+    ? NEUTRAL_LIGHT_SURFACES.colorFillTertiary
+    : mix(background, seedTokens.colorTextBase, 0.06)
+  const colorFillSecondary = baselineBackground
+    ? NEUTRAL_LIGHT_SURFACES.colorFillSecondary
+    : mix(background, seedTokens.colorTextBase, 0.09)
+  const colorBorderSecondary = baselineBackground
+    ? NEUTRAL_LIGHT_SURFACES.colorBorderSecondary
+    : mix(background, seedTokens.colorTextBase, 0.105)
+  const colorBorder = baselineBackground
+    ? NEUTRAL_LIGHT_SURFACES.colorBorder
+    : mix(background, seedTokens.colorTextBase, 0.145)
+  const colorBgTextHover = baselineBackground
+    ? NEUTRAL_LIGHT_SURFACES.colorBgTextHover
+    : mix(background, seedTokens.colorTextBase, 0.06)
+  const colorText = seedTokens.colorTextBase
+  const baselineText = colorText === LIGHT_TEXT_BASE
+
+  return {
+    colorBgLayout: baselineBackground
+      ? NEUTRAL_LIGHT_SURFACES.colorBgLayout
+      : mix(background, colorText, 0.035),
+    colorBgContainer: background,
+    colorBgElevated: baselineBackground
+      ? NEUTRAL_LIGHT_SURFACES.colorBgElevated
+      : mix(background, colorText, 0.018),
+    colorBgSpotlight: baselineBackground
+      ? NEUTRAL_LIGHT_SURFACES.colorBgSpotlight
+      : mix(colorText, BLACK, 0.08),
+    colorBgMask: baselineBackground
+      ? NEUTRAL_LIGHT_SURFACES.colorBgMask
+      : withAlpha(colorText, 0.3),
+    colorBgTextHover,
+    colorBgTextActive: baselineBackground
+      ? NEUTRAL_LIGHT_SURFACES.colorBgTextActive
+      : colorFillSecondary,
+    colorBgContainerDisabled: baselineBackground
+      ? NEUTRAL_LIGHT_SURFACES.colorBgContainerDisabled
+      : colorFillTertiary,
+    colorFillSecondary,
+    colorFillTertiary,
+    colorFillQuaternary,
+    colorBorder,
+    colorBorderSecondary,
+    colorSplit: baselineBackground
+      ? NEUTRAL_LIGHT_SURFACES.colorSplit
+      : withAlpha(colorBorder, 0.42),
+    colorText,
+    colorTextHeading: baselineText
+      ? NEUTRAL_LIGHT_SURFACES.colorTextHeading
+      : mix(colorText, BLACK, 0.18),
+    colorTextSecondary: baselineText
+      ? NEUTRAL_LIGHT_SURFACES.colorTextSecondary
+      : mix(colorText, background, 0.36),
+    colorTextTertiary: baselineText
+      ? NEUTRAL_LIGHT_SURFACES.colorTextTertiary
+      : mix(colorText, background, 0.55),
+    colorTextQuaternary: baselineText
+      ? NEUTRAL_LIGHT_SURFACES.colorTextQuaternary
+      : mix(colorText, background, 0.6),
+    colorTextDisabled: baselineText
+      ? NEUTRAL_LIGHT_SURFACES.colorTextDisabled
+      : mix(colorText, background, 0.62),
+    colorShadow: withAlpha(colorText, 0.38),
+  }
+}
+
+function deriveThemePrimaryMap(
+  seed: string,
+  theme: ThemeName,
+  containerBg: string,
+): ThemePrimaryMap {
+  const palette = generate(seed, theme === 'dark'
+    ? { theme: 'dark', backgroundColor: containerBg }
+    : undefined).map(color => normalizeHexColor(color) ?? DEFAULT_CUSTOM_THEME_COLOR)
+  const primaryIndex = theme === 'dark' ? 6 : 5
+  const hoverIndex = theme === 'dark' ? 7 : 4
+  const activeIndex = theme === 'dark' ? 5 : 6
+  const colorPrimary = normalizeHexColor(seed) ?? DEFAULT_CUSTOM_THEME_COLOR
+  const colorPrimaryHover = palette[hoverIndex]!
+  const colorPrimaryActive = palette[activeIndex]!
+  const colorPrimarySolid = colorPrimary
+  const colorPrimarySolidHover = mix(colorPrimarySolid, WHITE, 0.06)
+  const colorPrimarySolidActive = mix(colorPrimarySolid, BLACK, 0.08)
+  const colorPrimaryText = ensureContrast(palette[primaryIndex]!, containerBg, 4.5)
+  const colorPrimaryTextHover = ensureContrast(palette[hoverIndex]!, containerBg, 4.5)
+  const colorPrimaryTextActive = ensureContrast(palette[activeIndex]!, containerBg, 4.5)
+  const borderMix = theme === 'dark' ? 0.52 : 0.46
+  const borderHoverMix = theme === 'dark' ? 0.62 : 0.56
+  const backgroundMix = theme === 'dark' ? 0.17 : 0.09
+  const backgroundHoverMix = theme === 'dark' ? 0.24 : 0.14
+
+  return {
+    // 任意深浅 Seed 的弱背景都从当前 surface 混合，避免低明度 Seed 生成脏灰色块。
+    colorPrimaryBg: mix(containerBg, colorPrimary, backgroundMix),
+    colorPrimaryBgHover: mix(containerBg, colorPrimaryHover, backgroundHoverMix),
+    colorPrimaryBorder: ensureContrast(mix(containerBg, colorPrimary, borderMix), containerBg, 3),
+    colorPrimaryBorderHover: ensureContrast(
+      mix(containerBg, colorPrimaryHover, borderHoverMix),
+      containerBg,
+      3,
+    ),
+    colorPrimaryHover,
+    colorPrimary,
+    colorPrimaryActive,
+    colorPrimaryTextHover,
+    colorPrimaryText,
+    colorPrimaryTextActive,
+    colorPrimarySolid,
+    colorPrimarySolidHover,
+    colorPrimarySolidActive,
+    colorTextLightSolid: LIGHT_FOREGROUND,
+  }
+}
+
+function deriveThemeSemanticMap(
+  theme: ThemeName,
+  containerBg: string,
+  seedTokens: ResolvedThemeSeedTokens,
+): ThemeSemanticMap {
+  const usesNeutralDarkText = theme === 'dark' && containerBg === DARK_CONTAINER_BASE
+
+  return {
+    info: deriveFunctionalColorMap(
+      seedTokens.colorInfo,
+      theme,
+      containerBg,
+      usesNeutralDarkText && normalizeHexColor(seedTokens.colorInfo) === DEFAULT_SEED_COLORS.colorInfo
+        ? NEUTRAL_DARK_SEMANTIC_TEXT.info
+        : undefined,
+    ),
+    success: deriveFunctionalColorMap(
+      seedTokens.colorSuccess,
+      theme,
+      containerBg,
+      usesNeutralDarkText && normalizeHexColor(seedTokens.colorSuccess) === DEFAULT_SEED_COLORS.colorSuccess
+        ? NEUTRAL_DARK_SEMANTIC_TEXT.success
+        : undefined,
+    ),
+    warning: deriveFunctionalColorMap(
+      seedTokens.colorWarning,
+      theme,
+      containerBg,
+      usesNeutralDarkText && normalizeHexColor(seedTokens.colorWarning) === DEFAULT_SEED_COLORS.colorWarning
+        ? NEUTRAL_DARK_SEMANTIC_TEXT.warning
+        : undefined,
+    ),
+    error: deriveFunctionalColorMap(
+      seedTokens.colorError,
+      theme,
+      containerBg,
+      usesNeutralDarkText && normalizeHexColor(seedTokens.colorError) === DEFAULT_SEED_COLORS.colorError
+        ? NEUTRAL_DARK_SEMANTIC_TEXT.error
+        : undefined,
+    ),
+  }
+}
+
+function deriveFunctionalColorMap(
+  seed: string,
+  theme: ThemeName,
+  containerBg: string,
+  baselineText?: string,
+): FunctionalColorMap {
+  const palette = generate(seed, theme === 'dark'
+    ? { theme: 'dark', backgroundColor: containerBg }
+    : undefined).map(color => normalizeHexColor(color) ?? seed)
+  const color = palette[theme === 'dark' ? 6 : 5]!
+  const hover = palette[theme === 'dark' ? 7 : 4]!
+  const active = palette[theme === 'dark' ? 5 : 6]!
+  const backgroundMix = theme === 'dark' ? 0.18 : 0.08
+  const backgroundHoverMix = theme === 'dark' ? 0.24 : 0.12
+  const backgroundActiveMix = theme === 'dark' ? 0.3 : 0.18
+  const text = baselineText ?? palette[theme === 'dark' ? 8 : 5]!
+
+  return {
+    color: ensureContrast(color, containerBg, 3),
+    hover: ensureContrast(hover, containerBg, 3),
+    active: ensureContrast(active, containerBg, 3),
+    background: mix(containerBg, color, backgroundMix),
+    backgroundHover: mix(containerBg, hover, backgroundHoverMix),
+    backgroundActive: mix(containerBg, active, backgroundActiveMix),
+    border: ensureContrast(mix(containerBg, color, theme === 'dark' ? 0.46 : 0.4), containerBg, 3),
+    // 暗色语义文字使用更亮的色阶，避免把实心状态色直接当作小字号文字色。
+    text: ensureContrast(text, containerBg, 4.5),
+  }
+}
+
+function deriveThemeDimensionMap(
+  seedTokens: ResolvedThemeSeedTokens,
+  componentOverrides: ThemeComponentOverrides | undefined,
+): ThemeDimensionMap {
+  const fontSize = seedTokens.fontSize
+  const fontSizeXs = Math.max(9, fontSize - 2)
+  const fontSizeSm = Math.max(10, fontSize - 1)
+  const fontSizeLg = fontSize + 1
+  const fontSizeXl = fontSize + 2
+  const controlHeight = seedTokens.controlHeight
+  const controlHeightStep = Math.max(2, Math.round(seedTokens.sizeStep * 1.5))
+  const tableRowHeight = componentOverrides?.tableRowHeight ?? DEFAULT_DIMENSIONS.tableRowHeight
+  const borderRadius = seedTokens.borderRadius
+  const radiusStep = Math.max(1, Math.round(seedTokens.sizeStep / 2))
+  const cardBorderRadius = componentOverrides?.cardBorderRadius ?? DEFAULT_DIMENSIONS.cardBorderRadius
+
+  return {
+    fontSizeXs: `${fontSizeXs}px`,
+    fontSizeSm: `${fontSizeSm}px`,
+    fontSize: `${fontSize}px`,
+    fontSizeLg: `${fontSizeLg}px`,
+    fontSizeXl: `${fontSizeXl}px`,
+    lineHeightXs: `${fontSizeXs + 5}px`,
+    lineHeightSm: `${fontSizeSm + 6}px`,
+    lineHeight: `${fontSize + 7}px`,
+    lineHeightLg: `${fontSizeLg + 8}px`,
+    lineHeightXl: `${fontSizeXl + 9}px`,
+    sizeUnit: `${seedTokens.sizeUnit}px`,
+    sizeStep: `${seedTokens.sizeStep}px`,
+    controlHeightSm: `${Math.max(24, controlHeight - controlHeightStep)}px`,
+    controlHeight: `${controlHeight}px`,
+    controlHeightLg: `${controlHeight + controlHeightStep}px`,
+    tableRowHeight: `${tableRowHeight}px`,
+    tableRowHeightSm: `${Math.max(32, tableRowHeight - 20)}px`,
+    borderRadiusSm: `${Math.max(0, borderRadius - radiusStep)}px`,
+    borderRadius: `${borderRadius}px`,
+    borderRadiusLg: `${borderRadius + seedTokens.sizeStep}px`,
+    cardBorderRadius: `${cardBorderRadius}px`,
+  }
+}
+
+function deriveThemeShadowMap(theme: ThemeName, shadowStrength: number): ThemeShadowMap {
+  const shadows = theme === 'dark' ? NEUTRAL_DARK_SHADOWS : NEUTRAL_LIGHT_SHADOWS
+  return {
+    boxShadow: scaleShadowAlpha(shadows.boxShadow, shadowStrength),
+    boxShadowSecondary: scaleShadowAlpha(shadows.boxShadowSecondary, shadowStrength),
+    boxShadowTertiary: scaleShadowAlpha(shadows.boxShadowTertiary, shadowStrength),
+  }
+}
+
+function deriveThemeComponentMap(
+  theme: ThemeName,
+  surfaces: ThemeSurfaceMap,
+  primary: ThemePrimaryMap,
+  error: FunctionalColorMap,
+  shadowStrength: number,
+): ThemeComponentMap {
+  if (theme === 'dark') {
+    const usesNeutralInput = surfaces.colorBgContainer === DARK_CONTAINER_BASE
+    const inputOutlineColor = 'var(--cp-color-primary-bg-hover)'
+    return {
+      menuItemSelectedBg: surfaces.colorBgTextHover,
+      inputBg: usesNeutralInput
+        ? NEUTRAL_DARK_INPUT.bg
+        : mix(surfaces.colorBgContainer, surfaces.colorFillSecondary, 0.375),
+      inputHoverBg: usesNeutralInput
+        ? NEUTRAL_DARK_INPUT.hoverBg
+        : mix(surfaces.colorBgContainer, surfaces.colorFillSecondary, 0.69),
+      inputActiveBg: usesNeutralInput
+        ? NEUTRAL_DARK_INPUT.activeBg
+        : mix(surfaces.colorBgContainer, surfaces.colorBgElevated, 0.4),
+      inputErrorActiveBg: error.background,
+      buttonPrimaryColor: solidControlTextColor(primary.colorPrimarySolid),
+      buttonPrimaryBg: primary.colorPrimarySolid,
+      buttonPrimaryHoverBg: primary.colorPrimarySolidHover,
+      buttonPrimaryActiveBg: primary.colorPrimarySolidActive,
+      brandMarkBg: surfaces.colorBgElevated,
+      cardBg: surfaces.colorBgContainer,
+      tableHeaderBg: surfaces.colorFillTertiary,
+      tableRowBg: surfaces.colorBgContainer,
+      tableRowStripeBg: surfaces.colorBgElevated,
+      tableRowHoverBg: surfaces.colorBgTextHover,
+      tableRowSelectedBg: primary.colorPrimaryBg,
+      progressRemainingColor: mix(surfaces.colorBgContainer, surfaces.colorBorderSecondary, 0.92),
+      layoutSiderBg: surfaces.colorBgContainer,
+      cardShadow: scaleShadowAlpha(NEUTRAL_DARK_SHADOWS.cardShadow, shadowStrength),
+      inputShadow: scaleShadowAlpha(NEUTRAL_DARK_SHADOWS.inputShadow, shadowStrength),
+      inputHoverShadow: scaleShadowAlpha(
+        `0 0 0 3px ${inputOutlineColor}, ${NEUTRAL_DARK_SHADOWS.inputHoverDropShadow}`,
+        shadowStrength,
+      ),
+      inputActiveShadow: `0 0 0 3px ${inputOutlineColor}`,
+      inputErrorActiveShadow: `0 0 0 3px ${withAlpha(error.color, 0.28)}`,
+      layoutSiderShadow: scaleShadowAlpha(NEUTRAL_DARK_SHADOWS.layoutSiderShadow, shadowStrength),
+      scrollbarThumbBg: mix(surfaces.colorBorderSecondary, surfaces.colorTextSecondary, 0.16),
+      scrollbarThumbHoverBg: mix(surfaces.colorBorderSecondary, surfaces.colorTextSecondary, 0.3),
+    }
+  }
+
+  const usesNeutralInput = surfaces.colorBgContainer === LIGHT_CONTAINER_BASE
+  const inputOutlineColor = 'var(--cp-color-primary-bg-hover)'
+  return {
+    menuItemSelectedBg: surfaces.colorBgTextActive,
+    inputBg: usesNeutralInput
+      ? NEUTRAL_LIGHT_INPUT.bg
+      : mix(surfaces.colorBgContainer, surfaces.colorFillSecondary, 0.78),
+    inputHoverBg: usesNeutralInput
+      ? NEUTRAL_LIGHT_INPUT.hoverBg
+      : mix(surfaces.colorBgContainer, surfaces.colorFillTertiary, 0.88),
+    inputActiveBg: usesNeutralInput ? NEUTRAL_LIGHT_INPUT.activeBg : surfaces.colorBgElevated,
+    inputErrorActiveBg: error.background,
+    buttonPrimaryColor: solidControlTextColor(primary.colorPrimarySolid),
+    buttonPrimaryBg: primary.colorPrimarySolid,
+    buttonPrimaryHoverBg: primary.colorPrimarySolidHover,
+    buttonPrimaryActiveBg: primary.colorPrimarySolidActive,
+    brandMarkBg: surfaces.colorBgSpotlight,
+    cardBg: surfaces.colorBgContainer,
+    tableHeaderBg: surfaces.colorFillTertiary,
+    tableRowBg: surfaces.colorBgContainer,
+    tableRowStripeBg: surfaces.colorBgElevated,
+    tableRowHoverBg: surfaces.colorBgTextHover,
+    tableRowSelectedBg: primary.colorPrimaryBg,
+    progressRemainingColor: surfaces.colorBorderSecondary,
+    layoutSiderBg: surfaces.colorBgContainer,
+    cardShadow: scaleShadowAlpha(NEUTRAL_LIGHT_SHADOWS.cardShadow, shadowStrength),
+    inputShadow: scaleShadowAlpha(NEUTRAL_LIGHT_SHADOWS.inputShadow, shadowStrength),
+    inputHoverShadow: scaleShadowAlpha(
+      `0 0 0 3px ${inputOutlineColor}, ${NEUTRAL_LIGHT_SHADOWS.inputHoverDropShadow}`,
+      shadowStrength,
+    ),
+    inputActiveShadow: `0 0 0 3px ${inputOutlineColor}`,
+    inputErrorActiveShadow: `0 0 0 3px ${withAlpha(error.color, 0.18)}`,
+    layoutSiderShadow: scaleShadowAlpha(NEUTRAL_LIGHT_SHADOWS.layoutSiderShadow, shadowStrength),
+    scrollbarThumbBg: mix(surfaces.colorBgLayout, surfaces.colorTextSecondary, 0.2),
+    scrollbarThumbHoverBg: mix(surfaces.colorBgLayout, surfaces.colorTextSecondary, 0.34),
+  }
+}
+
+function toThemeTokens(
+  surfaces: ThemeSurfaceMap,
+  primary: ThemePrimaryMap,
+  link: ThemePrimaryMap,
+  semantics: ThemeSemanticMap,
+  shadows: ThemeShadowMap,
+  components: ThemeComponentMap,
+  dimensions: ThemeDimensionMap,
+): ThemeTokens {
+  return {
+    '--cp-color-bg-layout': surfaces.colorBgLayout,
+    '--cp-color-bg-container': surfaces.colorBgContainer,
+    '--cp-color-bg-elevated': surfaces.colorBgElevated,
+    '--cp-color-bg-spotlight': surfaces.colorBgSpotlight,
+    '--cp-color-bg-mask': surfaces.colorBgMask,
+    '--cp-color-bg-text-hover': surfaces.colorBgTextHover,
+    '--cp-color-bg-text-active': surfaces.colorBgTextActive,
+    '--cp-color-bg-container-disabled': surfaces.colorBgContainerDisabled,
+    '--cp-color-fill-secondary': surfaces.colorFillSecondary,
+    '--cp-color-fill-tertiary': surfaces.colorFillTertiary,
+    '--cp-color-fill-quaternary': surfaces.colorFillQuaternary,
+    '--cp-color-border': surfaces.colorBorder,
+    '--cp-color-border-secondary': surfaces.colorBorderSecondary,
+    '--cp-color-split': surfaces.colorSplit,
+    '--cp-color-text': surfaces.colorText,
+    '--cp-color-text-heading': surfaces.colorTextHeading,
+    '--cp-color-text-secondary': surfaces.colorTextSecondary,
+    '--cp-color-text-tertiary': surfaces.colorTextTertiary,
+    '--cp-color-text-quaternary': surfaces.colorTextQuaternary,
+    '--cp-color-text-disabled': surfaces.colorTextDisabled,
+    '--cp-color-text-light-solid': primary.colorTextLightSolid,
+    '--cp-color-shadow': surfaces.colorShadow,
+    '--cp-color-primary-bg': primary.colorPrimaryBg,
+    '--cp-color-primary-bg-hover': primary.colorPrimaryBgHover,
+    '--cp-color-primary-border': primary.colorPrimaryBorder,
+    '--cp-color-primary-border-hover': primary.colorPrimaryBorderHover,
+    '--cp-color-primary-hover': primary.colorPrimaryHover,
+    '--cp-color-primary': primary.colorPrimary,
+    '--cp-color-primary-active': primary.colorPrimaryActive,
+    '--cp-color-primary-text-hover': primary.colorPrimaryTextHover,
+    '--cp-color-primary-text': primary.colorPrimaryText,
+    '--cp-color-primary-text-active': primary.colorPrimaryTextActive,
+    '--cp-color-link': link.colorPrimaryText,
+    '--cp-color-link-hover': link.colorPrimaryTextHover,
+    '--cp-color-link-active': link.colorPrimaryTextActive,
+    '--cp-control-item-bg-active': primary.colorPrimaryBg,
+    '--cp-control-item-bg-active-hover': primary.colorPrimaryBgHover,
+    '--cp-control-outline': primary.colorPrimaryBorder,
+    '--cp-menu-item-selected-bg': components.menuItemSelectedBg,
+    '--cp-input-bg': components.inputBg,
+    '--cp-input-hover-bg': components.inputHoverBg,
+    '--cp-input-active-bg': components.inputActiveBg,
+    '--cp-input-error-active-bg': components.inputErrorActiveBg,
+    '--cp-button-primary-color': components.buttonPrimaryColor,
+    '--cp-button-primary-bg': components.buttonPrimaryBg,
+    '--cp-button-primary-hover-bg': components.buttonPrimaryHoverBg,
+    '--cp-button-primary-active-bg': components.buttonPrimaryActiveBg,
+    '--cp-brand-mark-bg': components.brandMarkBg,
+    '--cp-card-bg': components.cardBg,
+    '--cp-table-header-bg': components.tableHeaderBg,
+    '--cp-table-row-bg': components.tableRowBg,
+    '--cp-table-row-stripe-bg': components.tableRowStripeBg,
+    '--cp-table-row-hover-bg': components.tableRowHoverBg,
+    '--cp-table-row-selected-bg': components.tableRowSelectedBg,
+    '--cp-progress-remaining-color': components.progressRemainingColor,
+    '--cp-layout-sider-bg': components.layoutSiderBg,
+    '--cp-box-shadow': shadows.boxShadow,
+    '--cp-box-shadow-secondary': shadows.boxShadowSecondary,
+    '--cp-box-shadow-tertiary': shadows.boxShadowTertiary,
+    '--cp-card-shadow': components.cardShadow,
+    '--cp-input-shadow': components.inputShadow,
+    '--cp-input-hover-shadow': components.inputHoverShadow,
+    '--cp-input-active-shadow': components.inputActiveShadow,
+    '--cp-input-error-active-shadow': components.inputErrorActiveShadow,
+    '--cp-layout-sider-shadow': components.layoutSiderShadow,
+    '--cp-scrollbar-thumb-bg': components.scrollbarThumbBg,
+    '--cp-scrollbar-thumb-hover-bg': components.scrollbarThumbHoverBg,
+    '--cp-color-info': semantics.info.color,
+    '--cp-color-info-hover': semantics.info.hover,
+    '--cp-color-info-active': semantics.info.active,
+    '--cp-color-info-bg': semantics.info.background,
+    '--cp-color-info-border': semantics.info.border,
+    '--cp-color-info-text': semantics.info.text,
+    '--cp-color-success': semantics.success.color,
+    '--cp-color-success-bg': semantics.success.background,
+    '--cp-color-success-bg-hover': semantics.success.backgroundHover,
+    '--cp-color-success-bg-active': semantics.success.backgroundActive,
+    '--cp-color-success-border': semantics.success.border,
+    '--cp-color-success-text': semantics.success.text,
+    '--cp-color-warning': semantics.warning.color,
+    '--cp-color-warning-bg': semantics.warning.background,
+    '--cp-color-warning-bg-hover': semantics.warning.backgroundHover,
+    '--cp-color-warning-bg-active': semantics.warning.backgroundActive,
+    '--cp-color-warning-border': semantics.warning.border,
+    '--cp-color-warning-text': semantics.warning.text,
+    '--cp-color-error': semantics.error.color,
+    '--cp-color-error-bg': semantics.error.background,
+    '--cp-color-error-bg-hover': semantics.error.backgroundHover,
+    '--cp-color-error-bg-active': semantics.error.backgroundActive,
+    '--cp-color-error-border': semantics.error.border,
+    '--cp-color-error-text': semantics.error.text,
+    '--cp-font-size-xs': dimensions.fontSizeXs,
+    '--cp-font-size-sm': dimensions.fontSizeSm,
+    '--cp-font-size': dimensions.fontSize,
+    '--cp-font-size-lg': dimensions.fontSizeLg,
+    '--cp-font-size-xl': dimensions.fontSizeXl,
+    '--cp-line-height-xs': dimensions.lineHeightXs,
+    '--cp-line-height-sm': dimensions.lineHeightSm,
+    '--cp-line-height': dimensions.lineHeight,
+    '--cp-line-height-lg': dimensions.lineHeightLg,
+    '--cp-line-height-xl': dimensions.lineHeightXl,
+    '--cp-size-unit': dimensions.sizeUnit,
+    '--cp-size-step': dimensions.sizeStep,
+    '--cp-control-height-sm': dimensions.controlHeightSm,
+    '--cp-control-height': dimensions.controlHeight,
+    '--cp-control-height-lg': dimensions.controlHeightLg,
+    '--cp-table-row-height': dimensions.tableRowHeight,
+    '--cp-table-row-height-sm': dimensions.tableRowHeightSm,
+    '--cp-border-radius-sm': dimensions.borderRadiusSm,
+    '--cp-border-radius': dimensions.borderRadius,
+    '--cp-border-radius-lg': dimensions.borderRadiusLg,
+    '--cp-card-border-radius': dimensions.cardBorderRadius,
+  }
+}
+
+function normalizeThemeSeedOverrides(value: unknown): ThemeSeedOverrides {
+  if (!value || typeof value !== 'object')
+    return {}
+
+  const source = value as Record<string, unknown>
+  const colors = [
+    'colorSuccess',
+    'colorWarning',
+    'colorError',
+    'colorInfo',
+    'colorLink',
+    'colorTextBase',
+    'colorBgBase',
+  ] as const
+  const result: ThemeSeedOverrides = {}
+
+  for (const key of colors) {
+    const normalized = normalizeHexColor(source[key])
+    if (normalized)
+      result[key] = normalized
+  }
+
+  assignBoundedNumber(result, source, 'fontSize', 11, 17)
+  assignBoundedNumber(result, source, 'sizeUnit', 3, 6)
+  assignBoundedNumber(result, source, 'sizeStep', 2, 8)
+  assignBoundedNumber(result, source, 'controlHeight', 28, 52)
+  assignBoundedNumber(result, source, 'borderRadius', 0, 20)
+  assignBoundedNumber(result, source, 'shadowStrength', 0, 140)
+  return result
+}
+
+function normalizeThemeComponentOverrides(value: unknown): ThemeComponentOverrides {
+  if (!value || typeof value !== 'object')
+    return {}
+
+  const source = value as Record<string, unknown>
+  const result: ThemeComponentOverrides = {}
+  assignBoundedNumber(result, source, 'tableRowHeight', 44, 84)
+  assignBoundedNumber(result, source, 'cardBorderRadius', 0, 32)
+  return result
+}
+
+function assignBoundedNumber<T extends object, K extends keyof T>(
+  target: T,
+  source: Record<string, unknown>,
+  key: K,
+  min: number,
+  max: number,
+) {
+  const value = source[key as string]
+  if (typeof value === 'number' && Number.isFinite(value))
+    target[key] = Math.round(Math.min(max, Math.max(min, value))) as T[K]
+}
+
+function normalizeThemeTokenOverrides(value: unknown): Partial<ThemeTokens> {
+  if (!value || typeof value !== 'object')
+    return {}
+
+  const result: Partial<ThemeTokens> = {}
+  for (const [rawName, rawValue] of Object.entries(value)) {
+    const name = rawName as ThemeTokenName
+    if (typeof rawValue !== 'string')
+      continue
+
+    if (EDITABLE_COLOR_TOKEN_NAMES.has(name)) {
+      const normalized = normalizeHexColor(rawValue)
+      if (normalized)
+        result[name] = normalized
+      continue
+    }
+
+    if (EDITABLE_SHADOW_TOKEN_NAMES.has(name) && isSafeShadowValue(rawValue))
+      result[name] = rawValue.trim()
+  }
+  return result
+}
+
+function isSafeShadowValue(value: string) {
+  const normalized = value.trim()
+  return normalized.length > 0
+    && normalized.length <= 240
+    && !/[;{}]/.test(normalized)
+    && !/url\s*\(/i.test(normalized)
+}
+
+function scaleShadowAlpha(shadow: string, strength: number): string {
+  if (strength === DEFAULT_DIMENSIONS.shadowStrength)
+    return shadow
+  if (strength <= 0)
+    return 'none'
+
+  const scale = strength / DEFAULT_DIMENSIONS.shadowStrength
+  return shadow.replace(/#([\dA-F]{6})([\dA-F]{2})/gi, (_match, color: string, alpha: string) => {
+    const scaledAlpha = Math.min(255, Math.round(Number.parseInt(alpha, 16) * scale))
+      .toString(16)
+      .padStart(2, '0')
+      .toUpperCase()
+    return `#${color.toUpperCase()}${scaledAlpha}`
+  })
+}
+
+function ensureContrast(color: string, background: string, target: number): string {
+  if (contrastRatio(color, background) >= target)
+    return normalizeHexColor(color) ?? color
+
+  let bestColor = color
+  let bestRatio = contrastRatio(color, background)
+
+  for (let step = 1; step <= 100; step += 1) {
+    const amount = step / 100
+    for (const direction of [BLACK, WHITE]) {
+      const candidate = mix(color, direction, amount)
+      const ratio = contrastRatio(candidate, background)
+      if (ratio > bestRatio) {
+        bestColor = candidate
+        bestRatio = ratio
+      }
+      if (ratio >= target)
+        return candidate
+    }
+  }
+
+  return bestColor
+}
+
+/** 与 Ant Design Button 的 isBright 阈值一致；仅极亮实心色切换为深色前景。 */
+function solidControlTextColor(background: string): string {
+  const { red, green, blue } = hexToRgb(background)
+  return red * 0.299 + green * 0.587 + blue * 0.114 > 192
+    ? BLACK
+    : LIGHT_FOREGROUND
+}
+
+function contrastRatio(first: string, second: string): number {
+  const firstLuminance = relativeLuminance(hexToRgb(first))
+  const secondLuminance = relativeLuminance(hexToRgb(second))
+  const lightest = Math.max(firstLuminance, secondLuminance)
+  const darkest = Math.min(firstLuminance, secondLuminance)
+  return (lightest + 0.05) / (darkest + 0.05)
+}
+
+function relativeLuminance(color: RgbColor): number {
+  const channels = [color.red, color.green, color.blue].map((channel) => {
+    const value = channel / 255
+    return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4
+  })
+  return channels[0]! * 0.2126 + channels[1]! * 0.7152 + channels[2]! * 0.0722
+}
+
+function mix(first: string, second: string, secondWeight: number): string {
+  const from = hexToRgb(first)
+  const to = hexToRgb(second)
+  const weight = Math.min(1, Math.max(0, secondWeight))
+  return rgbToHex({
+    red: from.red + (to.red - from.red) * weight,
+    green: from.green + (to.green - from.green) * weight,
+    blue: from.blue + (to.blue - from.blue) * weight,
+  })
+}
+
+function withAlpha(color: string, alpha: number): string {
+  const normalized = normalizeHexColor(color) ?? DEFAULT_CUSTOM_THEME_COLOR
+  const alphaHex = Math.round(Math.min(1, Math.max(0, alpha)) * 255)
+    .toString(16)
+    .padStart(2, '0')
+    .toUpperCase()
+  return `${normalized}${alphaHex}`
+}
+
+function hexToRgb(value: string): RgbColor {
+  const normalized = normalizeHexColor(value) ?? DEFAULT_CUSTOM_THEME_COLOR
+  return {
+    red: Number.parseInt(normalized.slice(1, 3), 16),
+    green: Number.parseInt(normalized.slice(3, 5), 16),
+    blue: Number.parseInt(normalized.slice(5, 7), 16),
+  }
+}
+
+function rgbToHex(color: RgbColor): string {
+  const value = [color.red, color.green, color.blue]
+    .map(channel => Math.round(Math.min(255, Math.max(0, channel))).toString(16).padStart(2, '0'))
+    .join('')
+  return `#${value}`.toUpperCase()
+}
diff --git a/frontend/src/utils/color.ts b/frontend/src/utils/color.ts
index 65587c85d..0e81bbbc8 100644
--- a/frontend/src/utils/color.ts
+++ b/frontend/src/utils/color.ts
@@ -1,6 +1,16 @@
+const HEX_COLOR_PATTERN = /^#[0-9A-F]{6}$/i
 const RGBA_HEX_COLOR_PATTERN = /^#[0-9A-F]{8}$/i
 
-export function normalizeRgbaHexColor(value: string) {
+export function normalizeHexColor(value: unknown) {
+  if (typeof value !== 'string')
+    return null
+  const normalized = value.trim().toUpperCase()
+  return HEX_COLOR_PATTERN.test(normalized) ? normalized : null
+}
+
+export function normalizeRgbaHexColor(value: unknown) {
+  if (typeof value !== 'string')
+    return null
   const normalized = value.trim().toUpperCase()
   return RGBA_HEX_COLOR_PATTERN.test(normalized) ? normalized : null
 }
diff --git a/frontend/src/views/account-groups/components/AccountGroupActions.vue b/frontend/src/views/account-groups/components/AccountGroupActions.vue
index 3e2d3f495..86b3e9174 100644
--- a/frontend/src/views/account-groups/components/AccountGroupActions.vue
+++ b/frontend/src/views/account-groups/components/AccountGroupActions.vue
@@ -24,7 +24,7 @@ const emit = defineEmits<{
       label="编辑分组"
       @click.stop="emit('edit', group)"
     >
-      <Pencil class="size-3.5 text-cp-info" />
+      <Pencil class="size-3.5 text-cp-link" />
     </BaseIconButton>
     <BaseIconButton
       variant="ghost"
@@ -45,7 +45,7 @@ const emit = defineEmits<{
       :disabled="deleting"
       @click.stop="emit('delete', group)"
     >
-      <Trash2 class="size-3.5 text-cp-danger" />
+      <Trash2 class="size-3.5 text-cp-error" />
     </BaseIconButton>
   </div>
 </template>
diff --git a/frontend/src/views/account-groups/components/AccountGroupFilters.vue b/frontend/src/views/account-groups/components/AccountGroupFilters.vue
index 385663fcb..c10ea424b 100644
--- a/frontend/src/views/account-groups/components/AccountGroupFilters.vue
+++ b/frontend/src/views/account-groups/components/AccountGroupFilters.vue
@@ -27,7 +27,7 @@ const status = defineModel<string>('status', { required: true })
       placeholder="搜索分组名称..."
     >
       <template #prefix>
-        <Search class="size-4.5 text-cp-tertiary" />
+        <Search class="size-4.5 text-cp-text-tertiary" />
       </template>
     </BaseInput>
     <BaseSelect
diff --git a/frontend/src/views/account-groups/components/AccountGroupMetricsCell.vue b/frontend/src/views/account-groups/components/AccountGroupMetricsCell.vue
index 84bfb78ad..e922f8a8a 100644
--- a/frontend/src/views/account-groups/components/AccountGroupMetricsCell.vue
+++ b/frontend/src/views/account-groups/components/AccountGroupMetricsCell.vue
@@ -27,8 +27,8 @@ const props = defineProps<{
 }>()
 
 const toneClasses: Record<MetricTone, string> = {
-  primary: 'text-cp-primary',
-  secondary: 'text-cp-secondary',
+  primary: 'text-cp-text',
+  secondary: 'text-cp-text-secondary',
   success: 'text-cp-success-text',
   warning: 'text-cp-warning',
   active: 'text-cp-success',
@@ -82,7 +82,7 @@ const metrics = computed<MetricItem[]>(() => {
     class="m-0 grid grid-cols-[auto_auto] justify-start gap-x-2 gap-y-0.5 text-xs leading-4"
   >
     <template v-for="metric in metrics" :key="metric.label">
-      <dt class="text-cp-muted-text">
+      <dt class="text-cp-text-quaternary">
         {{ metric.label }}
       </dt>
       <dd class="m-0 font-mono font-semibold tabular-nums" :class="toneClasses[metric.tone]">
diff --git a/frontend/src/views/account-groups/index.vue b/frontend/src/views/account-groups/index.vue
index 1d04b5bba..74280ea91 100644
--- a/frontend/src/views/account-groups/index.vue
+++ b/frontend/src/views/account-groups/index.vue
@@ -99,10 +99,10 @@ const { allSelected, indeterminate, selectedRowKeys, toggleSelection, toggleAll
             </template>
             <template #identity="{ row }">
               <div class="grid min-w-0 gap-1">
-                <strong class="truncate text-[13px] text-cp-primary">
+                <strong class="truncate text-cp text-cp-text">
                   {{ row.name }}
                 </strong>
-                <span class="truncate text-[11px] font-emphasis text-cp-muted-text">
+                <span class="truncate text-cp-xs font-emphasis text-cp-text-quaternary">
                   {{ row.description || '未填写描述' }}
                 </span>
               </div>
@@ -119,10 +119,10 @@ const { allSelected, indeterminate, selectedRowKeys, toggleSelection, toggleAll
 
             <template #enabled="{ row }">
               <span
-                class="inline-flex h-6 items-center rounded-lg px-2 text-[11px] font-bold"
+                class="inline-flex h-6 items-center rounded-lg px-2 text-cp-xs font-bold"
                 :class="row.enabled
                   ? 'bg-cp-success-bg text-cp-success-text'
-                  : 'bg-cp-muted text-cp-muted-text'"
+                  : 'bg-cp-fill-tertiary text-cp-text-quaternary'"
               >
                 {{ row.enabled ? '已启用' : '已禁用' }}
               </span>
diff --git a/frontend/src/views/accounts/components/AccountBatchEditModal.vue b/frontend/src/views/accounts/components/AccountBatchEditModal.vue
index f58fd2bb1..550ec80a7 100644
--- a/frontend/src/views/accounts/components/AccountBatchEditModal.vue
+++ b/frontend/src/views/accounts/components/AccountBatchEditModal.vue
@@ -36,7 +36,7 @@ const selectedGroupIds = defineModel<string[]>('selectedGroupIds', { required: t
   >
     <div class="grid gap-5">
       <div class="flex min-h-6 items-center justify-between gap-3">
-        <span class="text-[13px] leading-none font-medium text-cp-secondary">调度</span>
+        <span class="text-cp leading-none font-medium text-cp-text-secondary">调度</span>
         <BaseSwitch
           v-model="enabled"
           label="切换所选账号调度"
diff --git a/frontend/src/views/accounts/components/AccountConnectionTestModal.vue b/frontend/src/views/accounts/components/AccountConnectionTestModal.vue
index d7071cd24..21da5d9c2 100644
--- a/frontend/src/views/accounts/components/AccountConnectionTestModal.vue
+++ b/frontend/src/views/accounts/components/AccountConnectionTestModal.vue
@@ -38,10 +38,10 @@ function connectionLogClass(tone: string) {
   if (tone === 'success')
     return 'text-cp-success-text'
   if (tone === 'danger')
-    return 'text-cp-danger-text'
+    return 'text-cp-error-text'
   if (tone === 'info')
     return 'text-cp-info-text'
-  return 'text-cp-secondary'
+  return 'text-cp-text-secondary'
 }
 </script>
 
@@ -55,7 +55,7 @@ function connectionLogClass(tone: string) {
   >
     <div v-if="account" class="flex flex-col gap-4">
       <section
-        class="flex items-center justify-between gap-4 rounded-cp-surface bg-cp-subtle px-4 py-3"
+        class="flex items-center justify-between gap-4 rounded-cp-card bg-cp-fill-quaternary px-4 py-3"
       >
         <AccountIdentityCell :account="account" size="lg" show-plan />
         <AccountStatusBadge
@@ -67,10 +67,10 @@ function connectionLogClass(tone: string) {
         />
       </section>
 
-      <section class="rounded-cp-surface bg-cp-subtle px-4 py-3">
+      <section class="rounded-cp-card bg-cp-fill-quaternary px-4 py-3">
         <div class="grid gap-2">
           <div class="flex min-h-8 items-center justify-between gap-3">
-            <span class="text-[12px] font-heavy text-cp-muted-text">
+            <span class="text-cp-sm font-heavy text-cp-text-quaternary">
               测试模型
             </span>
             <BaseIconButton
@@ -98,7 +98,7 @@ function connectionLogClass(tone: string) {
         </div>
       </section>
 
-      <section class="rounded-cp-surface bg-cp-subtle p-4">
+      <section class="rounded-cp-card bg-cp-fill-quaternary p-4">
         <div class="flex items-start justify-between gap-4">
           <div class="flex min-w-0 items-start gap-3">
             <span
@@ -112,18 +112,18 @@ function connectionLogClass(tone: string) {
               />
             </span>
             <div class="min-w-0">
-              <p class="m-0 text-[16px] font-heavy text-cp-primary">
+              <p class="m-0 text-[16px] font-heavy text-cp-text">
                 {{ statusView.label }}
               </p>
               <p
-                class="mt-1.5 mb-0 text-[13px] leading-normal font-emphasis text-cp-secondary"
+                class="mt-1.5 mb-0 text-cp leading-normal font-emphasis text-cp-text-secondary"
               >
                 {{ statusView.description }}
               </p>
             </div>
           </div>
           <span
-            class="inline-flex h-7 shrink-0 items-center rounded-full px-2.5 text-[12px] font-heavy"
+            class="inline-flex h-7 shrink-0 items-center rounded-full px-2.5 text-cp-sm font-heavy"
             :class="statusView.badge"
           >
             {{ status === 'running' ? '检测中' : statusView.label }}
@@ -131,60 +131,60 @@ function connectionLogClass(tone: string) {
         </div>
 
         <div class="mt-4 grid gap-3 sm:grid-cols-3">
-          <div class="rounded-lg bg-cp-surface px-3 py-2.5">
-            <p class="m-0 text-[11px] font-heavy text-cp-muted-text">
+          <div class="rounded-lg bg-cp-bg-container px-3 py-2.5">
+            <p class="m-0 text-cp-xs font-heavy text-cp-text-quaternary">
               开始时间
             </p>
-            <p class="mt-1.5 mb-0 font-mono text-[12px] font-emphasis text-cp-primary">
+            <p class="mt-1.5 mb-0 font-mono text-cp-sm font-emphasis text-cp-text">
               {{ startedAt || '-' }}
             </p>
           </div>
-          <div class="rounded-lg bg-cp-surface px-3 py-2.5">
-            <p class="m-0 text-[11px] font-heavy text-cp-muted-text">
+          <div class="rounded-lg bg-cp-bg-container px-3 py-2.5">
+            <p class="m-0 text-cp-xs font-heavy text-cp-text-quaternary">
               完成时间
             </p>
-            <p class="mt-1.5 mb-0 font-mono text-[12px] font-emphasis text-cp-primary">
+            <p class="mt-1.5 mb-0 font-mono text-cp-sm font-emphasis text-cp-text">
               {{ finishedAt || '-' }}
             </p>
           </div>
-          <div class="rounded-lg bg-cp-surface px-3 py-2.5">
-            <p class="m-0 text-[11px] font-heavy text-cp-muted-text">
+          <div class="rounded-lg bg-cp-bg-container px-3 py-2.5">
+            <p class="m-0 text-cp-xs font-heavy text-cp-text-quaternary">
               响应耗时
             </p>
-            <p class="mt-1.5 mb-0 font-mono text-[12px] font-emphasis text-cp-primary">
+            <p class="mt-1.5 mb-0 font-mono text-cp-sm font-emphasis text-cp-text">
               {{ durationMs !== null ? `${durationMs}ms` : '-' }}
             </p>
           </div>
         </div>
 
-        <div class="mt-3 rounded-lg bg-cp-surface px-3 py-2.5">
-          <p class="m-0 text-[11px] font-heavy text-cp-muted-text">
+        <div class="mt-3 rounded-lg bg-cp-bg-container px-3 py-2.5">
+          <p class="m-0 text-cp-xs font-heavy text-cp-text-quaternary">
             测试模型
           </p>
           <p
-            class="mt-1.5 mb-0 truncate font-mono text-[12px] font-emphasis text-cp-primary"
+            class="mt-1.5 mb-0 truncate font-mono text-cp-sm font-emphasis text-cp-text"
             :title="model || '-'"
           >
             {{ model || '-' }}
           </p>
         </div>
 
-        <div class="mt-3 rounded-lg bg-cp-surface px-3 py-2.5">
-          <p class="m-0 text-[11px] font-heavy text-cp-muted-text">
+        <div class="mt-3 rounded-lg bg-cp-bg-container px-3 py-2.5">
+          <p class="m-0 text-cp-xs font-heavy text-cp-text-quaternary">
             事件轨迹
           </p>
           <BaseScrollbar max-height="260px">
             <div class="pt-2">
-              <div v-if="logs.length === 0" class="text-[12px] font-emphasis text-cp-muted-text">
+              <div v-if="logs.length === 0" class="text-cp-sm font-emphasis text-cp-text-quaternary">
                 -
               </div>
               <div v-else class="flex flex-col gap-1.5">
                 <div
                   v-for="item in logs"
                   :key="item.key"
-                  class="grid grid-cols-[54px_minmax(0,1fr)] gap-2 text-[12px] leading-[1.45] font-emphasis"
+                  class="grid grid-cols-[54px_minmax(0,1fr)] gap-2 text-cp-sm leading-[1.45] font-emphasis"
                 >
-                  <span class="font-mono text-cp-muted-text">{{ item.time }}</span>
+                  <span class="font-mono text-cp-text-quaternary">{{ item.time }}</span>
                   <div class="min-w-0">
                     <p
                       class="m-0 wrap-break-word"
@@ -192,11 +192,11 @@ function connectionLogClass(tone: string) {
                     >
                       {{ item.text }}
                     </p>
-                    <div v-if="item.detail" class="mt-2 rounded-lg bg-cp-subtle px-3 py-2">
+                    <div v-if="item.detail" class="mt-2 rounded-lg bg-cp-fill-quaternary px-3 py-2">
                       <BaseScrollbar max-height="138px">
                         <div>
                           <pre
-                            class="m-0 whitespace-pre-wrap wrap-break-word font-mono text-[11px] leading-[1.6] font-emphasis text-cp-primary"
+                            class="m-0 whitespace-pre-wrap wrap-break-word font-mono text-cp-xs leading-[1.6] font-emphasis text-cp-text"
                             v-text="item.detail"
                           />
                         </div>
diff --git a/frontend/src/views/accounts/components/AccountCreateModal/AccountProviderChooser.vue b/frontend/src/views/accounts/components/AccountCreateModal/AccountProviderChooser.vue
index 1a57a50b9..cc0fd4616 100644
--- a/frontend/src/views/accounts/components/AccountCreateModal/AccountProviderChooser.vue
+++ b/frontend/src/views/accounts/components/AccountCreateModal/AccountProviderChooser.vue
@@ -45,14 +45,14 @@ const providers = [
       v-for="provider in providers"
       :key="provider.value"
       type="button"
-      class="group inline-flex size-[88px] cursor-pointer items-center justify-center rounded-cp-overlay border-0 bg-transparent text-cp-primary outline-none transition-colors duration-150 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-cp-default-border-hover disabled:cursor-not-allowed disabled:opacity-55"
+      class="group inline-flex size-[88px] cursor-pointer items-center justify-center rounded-cp-lg border-0 bg-transparent text-cp-text outline-none transition-colors duration-150 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-cp-border disabled:cursor-not-allowed disabled:opacity-55"
       :disabled="disabled"
       :aria-label="`导入 ${provider.label} 账号`"
       :title="provider.label"
       @click="emit('select', provider.value)"
     >
       <span
-        class="inline-flex size-16 items-center justify-center rounded-cp-overlay bg-cp-subtle transition-colors duration-150 group-hover:bg-cp-muted"
+        class="inline-flex size-16 items-center justify-center rounded-cp-lg bg-cp-fill-quaternary transition-colors duration-150 group-hover:bg-cp-fill-tertiary"
       >
         <component :is="provider.icon" aria-hidden="true" :width="36" :height="36" />
       </span>
diff --git a/frontend/src/views/accounts/components/AccountCreateModal/index.vue b/frontend/src/views/accounts/components/AccountCreateModal/index.vue
index b4b9faf53..cdc05ce9f 100644
--- a/frontend/src/views/accounts/components/AccountCreateModal/index.vue
+++ b/frontend/src/views/accounts/components/AccountCreateModal/index.vue
@@ -129,9 +129,9 @@ async function copyText(value: string, successText: string) {
     :dismissible="!saving"
   >
     <template #icon>
-      <LayoutGrid v-if="view.isBatch" class="text-cp-primary" aria-hidden="true" :width="20" :height="20" />
-      <Xai v-else-if="view.isXai" class="text-cp-primary" aria-hidden="true" :width="20" :height="20" />
-      <Openai v-else class="text-cp-primary" aria-hidden="true" :width="20" :height="20" />
+      <LayoutGrid v-if="view.isBatch" class="text-cp-text" aria-hidden="true" :width="20" :height="20" />
+      <Xai v-else-if="view.isXai" class="text-cp-text" aria-hidden="true" :width="20" :height="20" />
+      <Openai v-else class="text-cp-text" aria-hidden="true" :width="20" :height="20" />
     </template>
 
     <AccountProviderChooser
@@ -150,18 +150,18 @@ async function copyText(value: string, successText: string) {
       />
 
       <div v-if="mode === 'oauth'" class="flex flex-col gap-4">
-        <div class="rounded-cp-control bg-cp-subtle px-4 py-3">
+        <div class="rounded-cp bg-cp-fill-quaternary px-4 py-3">
           <div class="flex items-start gap-3">
             <div
-              class="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-cp-control bg-cp-surface text-cp-info"
+              class="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-cp bg-cp-bg-container text-cp-primary-text"
             >
               <KeyRound class="size-4" />
             </div>
             <div class="min-w-0 flex-1">
-              <p class="m-0 text-[13px] font-bold text-cp-primary">
+              <p class="m-0 text-cp font-bold text-cp-text">
                 {{ view.oauth.panelTitle }}
               </p>
-              <p class="m-0 mt-1 text-[12px] leading-[1.55] font-medium text-cp-secondary">
+              <p class="m-0 mt-1 text-cp-sm leading-[1.55] font-medium text-cp-text-secondary">
                 {{ view.oauth.panelDescription }}
               </p>
             </div>
@@ -196,9 +196,9 @@ async function copyText(value: string, successText: string) {
             <BaseScrollbar
               max-height="92px"
             >
-              <div class="rounded-cp-control bg-[var(--cp-input-current-bg,var(--cp-input-context-bg))] px-3.5 py-3 shadow-cp-input">
+              <div class="rounded-cp bg-[var(--cp-input-bg)] px-3.5 py-3 shadow-cp-input">
                 <pre
-                  class="m-0 whitespace-pre-wrap wrap-break-word font-mono text-[12px] leading-[1.6] font-emphasis text-cp-secondary"
+                  class="m-0 whitespace-pre-wrap wrap-break-word font-mono text-cp-sm leading-[1.6] font-emphasis text-cp-text-secondary"
                   v-text="view.oauth.authUrl"
                 />
               </div>
diff --git a/frontend/src/views/accounts/components/AccountEditModal.vue b/frontend/src/views/accounts/components/AccountEditModal.vue
index 9dd7f3537..f05ced914 100644
--- a/frontend/src/views/accounts/components/AccountEditModal.vue
+++ b/frontend/src/views/accounts/components/AccountEditModal.vue
@@ -40,7 +40,7 @@ const selectedGroupIds = defineModel<string[]>('selectedGroupIds', { required: t
   >
     <div v-if="account" class="grid gap-5">
       <div
-        class="flex flex-wrap items-center justify-between gap-4 rounded-cp-control bg-cp-subtle px-4 py-3.5"
+        class="flex flex-wrap items-center justify-between gap-4 rounded-cp bg-cp-fill-quaternary px-4 py-3.5"
       >
         <AccountIdentityCell
           class="min-w-0 flex-1"
@@ -57,7 +57,7 @@ const selectedGroupIds = defineModel<string[]>('selectedGroupIds', { required: t
       </div>
 
       <div class="flex min-h-6 items-center justify-between gap-3">
-        <span class="text-[13px] leading-none font-medium text-cp-secondary">调度</span>
+        <span class="text-cp leading-none font-medium text-cp-text-secondary">调度</span>
         <BaseSwitch
           v-model="enabled"
           label="切换账号调度"
diff --git a/frontend/src/views/accounts/components/AccountFilters.vue b/frontend/src/views/accounts/components/AccountFilters.vue
index a2bcdb7aa..0dba269d3 100644
--- a/frontend/src/views/accounts/components/AccountFilters.vue
+++ b/frontend/src/views/accounts/components/AccountFilters.vue
@@ -48,10 +48,10 @@ const groupOptions = computed(() => [
       <BaseInput
         v-model="search"
         placeholder="搜索账号"
-        class="min-w-0 flex-1 [--cp-input-current-bg:var(--cp-input-soft-bg)] [--cp-input-current-bg-hover:var(--cp-input-soft-bg-hover)] md:w-80 md:flex-none"
+        class="min-w-0 flex-1 md:w-80 md:flex-none"
       >
         <template #prefix>
-          <Search class="size-4.5 text-cp-tertiary" />
+          <Search class="size-4.5 text-cp-text-tertiary" />
         </template>
       </BaseInput>
 
@@ -59,7 +59,7 @@ const groupOptions = computed(() => [
         v-model="status"
         :options="accountStatusFilterOptions"
         aria-label="按账号状态筛选"
-        class="w-34 shrink-0 [--cp-input-current-bg:var(--cp-input-soft-bg)] [--cp-input-current-bg-hover:var(--cp-input-soft-bg-hover)] md:w-40"
+        class="w-34 shrink-0 md:w-40"
       />
 
       <BaseSelect
@@ -67,7 +67,7 @@ const groupOptions = computed(() => [
         :options="groupOptions"
         :disabled="groupsLoading"
         aria-label="按账号分组筛选"
-        class="w-34 shrink-0 [--cp-input-current-bg:var(--cp-input-soft-bg)] [--cp-input-current-bg-hover:var(--cp-input-soft-bg-hover)] md:w-40"
+        class="w-34 shrink-0 md:w-40"
       />
 
       <ProviderFilterSegmented
@@ -85,7 +85,7 @@ const groupOptions = computed(() => [
         class="w-full whitespace-nowrap md:w-auto"
         @click="emit('editSelected')"
       >
-        <Pencil class="size-4 text-cp-info" />
+        <Pencil class="size-4 text-cp-link" />
         批量编辑账号
       </BaseButton>
       <BaseButton
diff --git a/frontend/src/views/accounts/components/AccountIdentityCell.vue b/frontend/src/views/accounts/components/AccountIdentityCell.vue
index c49b22bf0..b5e0bb6b2 100644
--- a/frontend/src/views/accounts/components/AccountIdentityCell.vue
+++ b/frontend/src/views/accounts/components/AccountIdentityCell.vue
@@ -45,21 +45,21 @@ const secondaryText = computed(() =>
 const initial = computed(() => displayTitle.value.slice(0, 1).toUpperCase())
 
 const avatarSizeClass = computed(() =>
-  props.size === 'lg' ? 'size-10 text-[15px]' : 'size-9 text-[13px]',
+  props.size === 'lg' ? 'size-10 text-cp-xl' : 'size-9 text-cp',
 )
 
 const secondaryClass = computed(() =>
   props.size === 'lg'
-    ? 'mt-1 text-[12px] text-cp-secondary'
-    : 'mt-0.5 font-mono text-[11px] text-cp-muted-text',
+    ? 'mt-1 text-cp-sm text-cp-text-secondary'
+    : 'mt-0.5 font-mono text-cp-xs text-cp-text-quaternary',
 )
 
 const avatarClass = computed(() => {
   const palettes = [
-    'bg-cp-info-bg text-cp-info-text shadow-[inset_0_0_0_1px_var(--cp-info-border)]',
-    'bg-cp-success-bg text-cp-success-text shadow-[inset_0_0_0_1px_var(--cp-success-border)]',
-    'bg-cp-normal-bg text-cp-normal-text shadow-[inset_0_0_0_1px_var(--cp-normal-border)]',
-    'bg-cp-warning-bg text-cp-warning-text shadow-[inset_0_0_0_1px_var(--cp-warning-border)]',
+    'bg-cp-info-bg text-cp-info-text shadow-[inset_0_0_0_1px_var(--cp-color-info-border)]',
+    'bg-cp-success-bg text-cp-success-text shadow-[inset_0_0_0_1px_var(--cp-color-success-border)]',
+    'bg-cp-status-normal-bg text-cp-status-normal-text shadow-[inset_0_0_0_1px_var(--cp-color-status-normal-border)]',
+    'bg-cp-warning-bg text-cp-warning-text shadow-[inset_0_0_0_1px_var(--cp-color-warning-border)]',
   ]
   const key = String(props.account.id || props.account.email || displayTitle.value)
   const hash = sumBy([...key], char => char.charCodeAt(0))
@@ -77,7 +77,7 @@ const avatarClass = computed(() => {
     </span>
     <div class="min-w-0 flex-1">
       <div class="flex min-w-0 items-center gap-2">
-        <span class="min-w-0 flex-1 truncate text-[14px] font-heavy text-cp-primary">
+        <span class="min-w-0 flex-1 truncate text-cp-lg font-heavy text-cp-text">
           {{ displayTitle }}
         </span>
         <span
diff --git a/frontend/src/views/accounts/components/AccountOverviewCards.vue b/frontend/src/views/accounts/components/AccountOverviewCards.vue
index a03f29c75..98698284f 100644
--- a/frontend/src/views/accounts/components/AccountOverviewCards.vue
+++ b/frontend/src/views/accounts/components/AccountOverviewCards.vue
@@ -50,7 +50,7 @@ function overviewIconClass(tone: string) {
     return 'bg-cp-warning-bg text-cp-warning-text'
   }
   if (tone === 'danger') {
-    return 'bg-cp-danger-bg text-cp-danger-text'
+    return 'bg-cp-error-bg text-cp-error-text'
   }
   return 'bg-cp-info-bg text-cp-info-text'
 }
@@ -66,15 +66,15 @@ function overviewIconClass(tone: string) {
     >
       <div class="flex items-stretch justify-between gap-3">
         <div class="flex min-w-0 flex-col">
-          <p class="m-0 text-[12px] leading-none font-heavy text-cp-secondary">
+          <p class="m-0 text-cp-sm leading-none font-heavy text-cp-text-secondary">
             {{ item.label }}
           </p>
           <strong
-            class="my-2 block font-mono text-[26px] leading-none font-extrabold text-cp-primary"
+            class="my-2 block font-mono text-[26px] leading-none font-extrabold text-cp-text"
           >
             {{ item.value }}
           </strong>
-          <p class="m-0 truncate text-[12px] leading-none font-emphasis text-cp-muted-text">
+          <p class="m-0 truncate text-cp-sm leading-none font-emphasis text-cp-text-quaternary">
             {{ item.caption }}
           </p>
         </div>
diff --git a/frontend/src/views/accounts/components/AccountPlanBadge.vue b/frontend/src/views/accounts/components/AccountPlanBadge.vue
index 0ff8ccadc..69585e56a 100644
--- a/frontend/src/views/accounts/components/AccountPlanBadge.vue
+++ b/frontend/src/views/accounts/components/AccountPlanBadge.vue
@@ -15,21 +15,21 @@ const props = withDefaults(
 const fallbackPalettes = [
   'bg-cp-info-bg text-cp-info-text shadow-cp-input',
   'bg-cp-success-bg text-cp-success-text shadow-cp-input',
-  'bg-cp-normal-bg text-cp-normal-text shadow-cp-input',
+  'bg-cp-status-normal-bg text-cp-status-normal-text shadow-cp-input',
   'bg-cp-warning-bg text-cp-warning-text shadow-cp-input',
 ]
 
 const usageTierPalettes: Record<string, string> = {
-  pro: 'bg-cp-plan-pro-bg text-cp-plan-pro-text shadow-cp-input',
-  prolite: 'bg-cp-plan-prolite-bg text-cp-plan-prolite-text shadow-cp-input',
+  pro: 'bg-cp-account-plan-pro-bg text-cp-account-plan-pro shadow-cp-input',
+  prolite: 'bg-cp-account-plan-pro-lite-bg text-cp-account-plan-pro-lite shadow-cp-input',
 }
 
 const label = computed(() => props.planType?.trim() || 'Free')
 
 const sizeClass = computed(() =>
   props.size === 'sm'
-    ? 'h-5 rounded-full px-1.75 text-[11px] font-bold'
-    : 'h-5.5 rounded-full px-2 text-[11px] font-heavy',
+    ? 'h-5 rounded-full px-1.75 text-cp-xs font-bold'
+    : 'h-5.5 rounded-full px-2 text-cp-xs font-heavy',
 )
 
 const paletteClass = computed(() => {
diff --git a/frontend/src/views/accounts/components/AccountQuotaPanel.vue b/frontend/src/views/accounts/components/AccountQuotaPanel.vue
index 3b1bc1777..fe1f80f8d 100644
--- a/frontend/src/views/accounts/components/AccountQuotaPanel.vue
+++ b/frontend/src/views/accounts/components/AccountQuotaPanel.vue
@@ -25,14 +25,14 @@ const quotaEntries = computed(() => groupedAccountQuotaWindows(
 </script>
 
 <template>
-  <section class="flex min-h-0 flex-col rounded-lg bg-cp-surface p-4 shadow-cp-control">
+  <section class="flex min-h-0 flex-col rounded-lg bg-cp-bg-container p-4 shadow-cp-tertiary">
     <div class="mb-3 flex shrink-0 items-start justify-between gap-3">
       <div class="min-w-0">
-        <h3 class="m-0 text-[14px] font-heavy text-cp-primary">
+        <h3 class="m-0 text-cp-lg font-heavy text-cp-text">
           账号额度
         </h3>
         <p
-          class="m-0 mt-1 flex min-w-0 items-center gap-1.5 text-[11px] font-emphasis text-cp-secondary"
+          class="m-0 mt-1 flex min-w-0 items-center gap-1.5 text-cp-xs font-emphasis text-cp-text-secondary"
         >
           <span>{{ account.provider === 'xai' ? 'xAI 用量窗口' : 'Codex 额度' }}</span>
           <template v-if="account.provider === 'openai'">
@@ -72,7 +72,7 @@ const quotaEntries = computed(() => groupedAccountQuotaWindows(
         :label="entry.label"
         :windows="entry.windows"
       />
-      <p v-if="quotaEntries.length === 0" class="m-0 text-[12px] font-emphasis text-cp-secondary">
+      <p v-if="quotaEntries.length === 0" class="m-0 text-cp-sm font-emphasis text-cp-text-secondary">
         额度待观测
       </p>
     </div>
diff --git a/frontend/src/views/accounts/components/AccountQuotaPanelEntry.vue b/frontend/src/views/accounts/components/AccountQuotaPanelEntry.vue
index 4368cd381..62098e094 100644
--- a/frontend/src/views/accounts/components/AccountQuotaPanelEntry.vue
+++ b/frontend/src/views/accounts/components/AccountQuotaPanelEntry.vue
@@ -53,7 +53,7 @@ const items = computed(() => props.windows.map((window) => {
   <section class="grid min-w-0 gap-2">
     <h4
       v-if="grouped && label"
-      class="m-0 truncate text-[11px] leading-4 font-heavy text-cp-secondary"
+      class="m-0 truncate text-cp-xs leading-4 font-heavy text-cp-text-secondary"
       :title="label"
     >
       {{ label }}
@@ -65,12 +65,12 @@ const items = computed(() => props.windows.map((window) => {
     >
       <div v-for="item in items" :key="item.key" class="grid min-w-0 gap-1.5">
         <template v-if="item.local">
-          <div class="flex min-w-0 items-baseline justify-between gap-2 text-[11px] leading-3.5">
-            <span class="min-w-0 truncate font-bold text-cp-muted-text">
+          <div class="flex min-w-0 items-baseline justify-between gap-2 text-cp-xs leading-3.5">
+            <span class="min-w-0 truncate font-bold text-cp-text-quaternary">
               {{ item.localLabel }}
             </span>
             <strong
-              class="shrink-0 font-mono font-heavy tabular-nums text-cp-primary"
+              class="shrink-0 font-mono font-heavy tabular-nums text-cp-text"
               :title="`窗口请求：${item.requestDisplay} 次`"
             >
               {{ item.requestDisplay }} 次
@@ -83,7 +83,7 @@ const items = computed(() => props.windows.map((window) => {
             :label="item.timelineTitle"
           />
 
-          <p class="m-0 flex min-w-0 items-center justify-between gap-2 text-[10px] leading-3.5 text-cp-tertiary">
+          <p class="m-0 flex min-w-0 items-center justify-between gap-2 text-[10px] leading-3.5 text-cp-text-tertiary">
             <span class="shrink-0 font-emphasis">统计范围</span>
             <span
               class="min-w-0 truncate font-mono font-emphasis tabular-nums"
@@ -94,14 +94,14 @@ const items = computed(() => props.windows.map((window) => {
           </p>
         </template>
         <template v-else>
-          <div class="flex min-w-0 items-baseline justify-between gap-2 text-[11px] leading-3.5">
-            <span class="min-w-0 truncate font-bold text-cp-muted-text">
+          <div class="flex min-w-0 items-baseline justify-between gap-2 text-cp-xs leading-3.5">
+            <span class="min-w-0 truncate font-bold text-cp-text-quaternary">
               {{ item.label }}
             </span>
             <span class="flex shrink-0 items-baseline gap-1.5 font-mono font-heavy tabular-nums">
               <strong
                 v-if="item.localUsageDisplay"
-                class="text-cp-muted-text"
+                class="text-cp-text-quaternary"
                 :title="`窗口消耗：${item.localUsageDisplay}`"
               >
                 {{ item.localUsageDisplay }}
@@ -116,7 +116,7 @@ const items = computed(() => props.windows.map((window) => {
           </div>
 
           <div
-            class="h-1.5 w-full overflow-hidden rounded-full bg-cp-default-border"
+            class="h-1.5 w-full overflow-hidden rounded-full bg-cp-border-secondary"
             role="progressbar"
             :aria-label="item.ariaLabel"
             aria-valuemin="0"
@@ -131,7 +131,7 @@ const items = computed(() => props.windows.map((window) => {
             />
           </div>
 
-          <p class="m-0 flex min-w-0 items-center justify-between gap-2 text-[10px] leading-3.5 text-cp-tertiary">
+          <p class="m-0 flex min-w-0 items-center justify-between gap-2 text-[10px] leading-3.5 text-cp-text-tertiary">
             <span class="shrink-0 font-emphasis">重置</span>
             <span class="min-w-0 truncate font-mono font-emphasis tabular-nums" :title="item.resetAtDisplay">
               {{ item.resetAtDisplay }}
diff --git a/frontend/src/views/accounts/components/AccountQuotaSummaryEntry.vue b/frontend/src/views/accounts/components/AccountQuotaSummaryEntry.vue
index c9177e4ec..59568d8a6 100644
--- a/frontend/src/views/accounts/components/AccountQuotaSummaryEntry.vue
+++ b/frontend/src/views/accounts/components/AccountQuotaSummaryEntry.vue
@@ -94,7 +94,7 @@ function quotaWindowCode(
     <template #trigger="{ open }">
       <button
         type="button"
-        class="block w-full cursor-help rounded-sm border-0 bg-transparent p-0 text-left outline-none focus-visible:ring-2 focus-visible:ring-cp-info-border"
+        class="block w-full cursor-help rounded-sm border-0 bg-transparent p-0 text-left outline-none focus-visible:ring-2 focus-visible:ring-cp-control-outline"
         :aria-label="`查看${detailTitle}详情`"
         :aria-expanded="open"
         aria-haspopup="dialog"
@@ -116,16 +116,16 @@ function quotaWindowCode(
     </template>
 
     <section
-      class="w-84 overflow-hidden rounded-cp-overlay"
+      class="w-84 overflow-hidden rounded-cp-lg"
       role="dialog"
       :aria-label="`${detailTitle}详情`"
     >
       <header
         v-if="detailHeading"
-        class="bg-cp-subtle px-3 py-2.5"
+        class="bg-cp-fill-quaternary px-3 py-2.5"
       >
         <h3
-          class="m-0 truncate text-[13px] leading-5 font-heavy text-cp-primary"
+          class="m-0 truncate text-cp leading-5 font-heavy text-cp-text"
           :title="detailHeading"
         >
           {{ detailHeading }}
@@ -142,17 +142,17 @@ function quotaWindowCode(
         >
           <div class="grid grid-cols-[32px_minmax(0,1fr)_auto] items-center gap-2.5">
             <span
-              class="grid h-5 w-8 place-items-center rounded-sm bg-cp-muted font-mono text-[9px] leading-none font-heavy tracking-[0.04em] text-cp-info-text"
+              class="grid h-5 w-8 place-items-center rounded-sm bg-cp-fill-tertiary font-mono text-[9px] leading-none font-heavy tracking-[0.04em] text-cp-info-text"
               aria-hidden="true"
             >
               {{ item.code }}
             </span>
-            <h4 class="m-0 min-w-0 truncate text-[12px] leading-4 font-heavy text-cp-secondary">
+            <h4 class="m-0 min-w-0 truncate text-cp-sm leading-4 font-heavy text-cp-text-secondary">
               {{ item.local ? item.localLabel : item.label }}
             </h4>
             <strong
-              class="font-mono text-[11px] leading-none font-heavy tabular-nums"
-              :class="item.local ? 'text-cp-primary' : item.percentTextClass"
+              class="font-mono text-cp-xs leading-none font-heavy tabular-nums"
+              :class="item.local ? 'text-cp-text' : item.percentTextClass"
             >
               {{ item.local ? `${item.requestDisplay} 次` : item.usedPercentDisplay }}
             </strong>
@@ -166,7 +166,7 @@ function quotaWindowCode(
           />
           <template v-else>
             <div
-              class="mt-2 h-1 w-full overflow-hidden rounded-full bg-cp-default-border"
+              class="mt-2 h-1 w-full overflow-hidden rounded-full bg-cp-border-secondary"
               role="progressbar"
               :aria-label="item.label"
               aria-valuemin="0"
@@ -184,30 +184,30 @@ function quotaWindowCode(
 
           <dl class="mt-2.5 grid grid-cols-[auto_minmax(0,1fr)] gap-x-4 gap-y-1.5 text-[10px] leading-4">
             <template v-if="item.local">
-              <dt class="font-emphasis text-cp-tertiary">
+              <dt class="font-emphasis text-cp-text-tertiary">
                 统计方式
               </dt>
-              <dd class="m-0 text-right font-mono font-heavy tabular-nums text-cp-primary">
+              <dd class="m-0 text-right font-mono font-heavy tabular-nums text-cp-text">
                 滚动窗口
               </dd>
-              <dt class="font-emphasis text-cp-tertiary">
+              <dt class="font-emphasis text-cp-text-tertiary">
                 统计范围
               </dt>
-              <dd class="m-0 truncate text-right font-mono font-emphasis tabular-nums text-cp-secondary">
+              <dd class="m-0 truncate text-right font-mono font-emphasis tabular-nums text-cp-text-secondary">
                 {{ item.durationDisplay }}
               </dd>
             </template>
             <template v-else>
-              <dt class="font-emphasis text-cp-tertiary">
+              <dt class="font-emphasis text-cp-text-tertiary">
                 窗口消耗
               </dt>
-              <dd class="m-0 text-right font-mono font-heavy tabular-nums text-cp-primary">
+              <dd class="m-0 text-right font-mono font-heavy tabular-nums text-cp-text">
                 {{ item.localUsageDisplay }}
               </dd>
-              <dt class="font-emphasis text-cp-tertiary">
+              <dt class="font-emphasis text-cp-text-tertiary">
                 重置时间
               </dt>
-              <dd class="m-0 truncate text-right font-mono font-emphasis tabular-nums text-cp-secondary">
+              <dd class="m-0 truncate text-right font-mono font-emphasis tabular-nums text-cp-text-secondary">
                 {{ item.resetAtDisplay }}
               </dd>
             </template>
diff --git a/frontend/src/views/accounts/components/AccountQuotaWindowGroup.vue b/frontend/src/views/accounts/components/AccountQuotaWindowGroup.vue
index 41c4468e9..7202b73c1 100644
--- a/frontend/src/views/accounts/components/AccountQuotaWindowGroup.vue
+++ b/frontend/src/views/accounts/components/AccountQuotaWindowGroup.vue
@@ -24,7 +24,7 @@ const trackGridStyle = computed(() => ({
 
 <template>
   <div class="flex min-w-0 flex-col">
-    <div class="mb-1 min-w-0 truncate text-[11px] leading-3.5 font-bold text-cp-muted-text">
+    <div class="mb-1 min-w-0 truncate text-cp-xs leading-3.5 font-bold text-cp-text-quaternary">
       {{ label }}
     </div>
 
@@ -32,7 +32,7 @@ const trackGridStyle = computed(() => ({
       <div
         v-for="item in windowItems"
         :key="item.key"
-        class="h-0.75 w-full overflow-hidden rounded-full bg-cp-default-border"
+        class="h-0.75 w-full overflow-hidden rounded-full bg-cp-border-secondary"
         role="progressbar"
         :aria-label="item.labelTooltip"
         aria-valuemin="0"
diff --git a/frontend/src/views/accounts/components/AccountResetCredits.vue b/frontend/src/views/accounts/components/AccountResetCredits.vue
index ba7137e89..b9cb0a628 100644
--- a/frontend/src/views/accounts/components/AccountResetCredits.vue
+++ b/frontend/src/views/accounts/components/AccountResetCredits.vue
@@ -86,10 +86,10 @@ function expiryLabel(value: string | null) {
 
 function creditOptionClasses(creditId: string) {
   return [
-    'w-full min-w-0 rounded-cp-control px-4 py-3 outline-none transition-colors duration-150 motion-reduce:transition-none',
+    'w-full min-w-0 rounded-cp px-4 py-3 outline-none transition-colors duration-150 motion-reduce:transition-none',
     selectedCreditId.value === creditId
-      ? 'bg-cp-info-bg'
-      : 'bg-cp-subtle hover:bg-cp-default-hover',
+      ? 'bg-cp-control-item-bg-active'
+      : 'bg-cp-fill-quaternary hover:bg-cp-bg-text-hover',
   ]
 }
 
@@ -106,7 +106,7 @@ async function handleConfirmConsume() {
 <template>
   <button
     type="button"
-    class="inline-flex shrink-0 touch-manipulation items-center justify-center rounded-cp-control border-0 bg-transparent text-cp-secondary outline-none transition-[background-color,color,opacity,transform] duration-150 hover:bg-cp-subtle hover:text-cp-primary active:bg-cp-muted focus-visible:ring-2 focus-visible:ring-cp-accent-border focus-visible:ring-offset-2 focus-visible:ring-offset-cp-surface motion-safe:active:scale-[0.96] motion-reduce:transition-none"
+    class="inline-flex shrink-0 touch-manipulation items-center justify-center rounded-cp border-0 bg-transparent text-cp-text-secondary outline-none transition-[background-color,color,opacity,transform] duration-150 hover:bg-cp-fill-quaternary hover:text-cp-text active:bg-cp-fill-tertiary focus-visible:ring-2 focus-visible:ring-cp-control-outline focus-visible:ring-offset-2 focus-visible:ring-offset-cp-bg-container motion-safe:active:scale-[0.96] motion-reduce:transition-none"
     :class="showTriggerCount ? 'h-cp-control-sm gap-1 px-2' : 'size-cp-control-sm'"
     :aria-label="triggerLabel"
     :aria-pressed="panelOpen || undefined"
@@ -132,16 +132,16 @@ async function handleConfirmConsume() {
     :dismissible="!consuming"
   >
     <div v-if="showConfirm" class="grid gap-3">
-      <section class="rounded-cp-control bg-cp-subtle px-4 py-3.5">
-        <p class="m-0 text-[11px] font-heavy text-cp-muted-text">
+      <section class="rounded-cp bg-cp-fill-quaternary px-4 py-3.5">
+        <p class="m-0 text-cp-xs font-heavy text-cp-text-quaternary">
           本次使用
         </p>
-        <p class="mt-1.5 mb-0 text-[14px] leading-snug font-heavy text-cp-primary">
+        <p class="mt-1.5 mb-0 text-cp-lg leading-snug font-heavy text-cp-text">
           {{ confirmCreditTitle }}
         </p>
         <p
           v-if="consumptionCredit"
-          class="mt-1 mb-0 font-mono text-[10px] leading-normal font-emphasis text-cp-muted-text"
+          class="mt-1 mb-0 font-mono text-[10px] leading-normal font-emphasis text-cp-text-quaternary"
         >
           {{ expiryLabel(consumptionCredit.expiresAt) }}
         </p>
@@ -151,44 +151,44 @@ async function handleConfirmConsume() {
     <div v-else class="grid gap-4">
       <section
         v-if="ambiguous"
-        class="flex items-start gap-3 rounded-cp-control bg-cp-warning-bg px-4 py-3.5"
+        class="flex items-start gap-3 rounded-cp bg-cp-warning-bg px-4 py-3.5"
         role="status"
       >
         <AlertTriangle class="mt-0.5 size-4 shrink-0 text-cp-warning-text" />
         <div class="min-w-0">
-          <p class="m-0 text-[12px] font-heavy text-cp-warning-text">
+          <p class="m-0 text-cp-sm font-heavy text-cp-warning-text">
             上次操作结果待确认
           </p>
-          <p class="mt-1 mb-0 text-[11px] leading-normal font-emphasis text-cp-secondary">
+          <p class="mt-1 mb-0 text-cp-xs leading-normal font-emphasis text-cp-text-secondary">
             再确认一次即可。
           </p>
         </div>
       </section>
 
-      <section class="flex items-center gap-3 rounded-cp-control bg-cp-subtle px-4 py-3.5">
+      <section class="flex items-center gap-3 rounded-cp bg-cp-fill-quaternary px-4 py-3.5">
         <span
-          class="inline-grid size-9 shrink-0 place-items-center rounded-cp-control bg-cp-muted text-cp-info-text"
+          class="inline-grid size-9 shrink-0 place-items-center rounded-cp bg-cp-fill-tertiary text-cp-primary-text"
           aria-hidden="true"
         >
           <TicketCheck class="size-4" />
         </span>
         <div class="min-w-0">
-          <p class="m-0 text-[12px] font-heavy text-cp-primary">
+          <p class="m-0 text-cp-sm font-heavy text-cp-text">
             可用重置卡
           </p>
-          <p class="mt-1 mb-0 text-[11px] leading-none font-emphasis text-cp-secondary">
+          <p class="mt-1 mb-0 text-cp-xs leading-none font-emphasis text-cp-text-secondary">
             每次操作消费一张
           </p>
         </div>
-        <strong class="ml-auto font-mono text-[22px] leading-none font-extrabold text-cp-primary">
+        <strong class="ml-auto font-mono text-[22px] leading-none font-extrabold text-cp-text">
           {{ availableCount }}
-          <span class="ml-0.5 text-[11px] font-heavy text-cp-muted-text">张</span>
+          <span class="ml-0.5 text-cp-xs font-heavy text-cp-text-quaternary">张</span>
         </strong>
       </section>
 
       <section class="grid gap-2.5">
         <div class="flex min-h-8 items-center justify-between gap-3">
-          <h3 class="m-0 text-[12px] font-heavy text-cp-muted-text">
+          <h3 class="m-0 text-cp-sm font-heavy text-cp-text-quaternary">
             选择重置卡
           </h3>
           <BaseIconButton
@@ -208,7 +208,7 @@ async function handleConfirmConsume() {
 
         <p
           v-if="loadError"
-          class="m-0 rounded-cp-control bg-cp-danger-bg px-4 py-3 text-[11px] leading-normal font-emphasis text-cp-danger-text"
+          class="m-0 rounded-cp bg-cp-error-bg px-4 py-3 text-cp-xs leading-normal font-emphasis text-cp-error-text"
           role="status"
         >
           {{ loadError }}，请刷新重试。
@@ -232,17 +232,17 @@ async function handleConfirmConsume() {
             @update:model-value="selectCredit"
           >
             <span class="block min-w-0">
-              <span class="block truncate text-[12px] font-heavy text-cp-primary">
+              <span class="block truncate text-cp-sm font-heavy text-cp-text">
                 {{ credit.title || 'Codex 主动重置卡' }}
               </span>
-              <span class="mt-1 block truncate font-mono text-[10px] font-emphasis text-cp-muted-text">
+              <span class="mt-1 block truncate font-mono text-[10px] font-emphasis text-cp-text-quaternary">
                 {{ expiryLabel(credit.expiresAt) }}
               </span>
             </span>
           </BaseRadio>
         </div>
 
-        <div v-else class="overflow-hidden rounded-cp-control bg-cp-subtle">
+        <div v-else class="overflow-hidden rounded-cp bg-cp-fill-quaternary">
           <BaseEmpty
             :icon="TicketCheck"
             size="sm"
diff --git a/frontend/src/views/accounts/components/AccountStatusBadge/index.vue b/frontend/src/views/accounts/components/AccountStatusBadge/index.vue
index 3ba445ab2..55844573e 100644
--- a/frontend/src/views/accounts/components/AccountStatusBadge/index.vue
+++ b/frontend/src/views/accounts/components/AccountStatusBadge/index.vue
@@ -53,14 +53,14 @@ const presentation = computed(() => resolveAccountStatusPresentation({
       >
         <span
           v-if="variant === 'pill'"
-          class="inline-flex h-7 shrink-0 items-center rounded-full px-2.5 text-[12px] leading-none font-heavy transition-colors duration-150 motion-reduce:transition-none"
+          class="inline-flex h-7 shrink-0 items-center rounded-full px-2.5 text-cp-sm leading-none font-heavy transition-colors duration-150 motion-reduce:transition-none"
           :class="presentation.statusStyle.text"
         >
           {{ presentation.label }}
         </span>
         <span
           v-else
-          class="inline-flex min-w-16 items-center gap-1.5 rounded-md px-1.5 py-1 text-[12px] leading-none font-emphasis transition-colors duration-150 motion-reduce:transition-none"
+          class="inline-flex min-w-16 items-center gap-1.5 rounded-md px-1.5 py-1 text-cp-sm leading-none font-emphasis transition-colors duration-150 motion-reduce:transition-none"
           :class="presentation.statusStyle.text"
         >
           <span aria-hidden="true" class="size-1.5 rounded-full" :class="presentation.statusStyle.dot" />
@@ -69,21 +69,21 @@ const presentation = computed(() => resolveAccountStatusPresentation({
       </component>
     </template>
 
-    <section class="w-88 overflow-hidden rounded-cp-overlay">
-      <header class="flex items-start gap-3 bg-cp-subtle px-4 py-3">
+    <section class="w-88 overflow-hidden rounded-cp-lg">
+      <header class="flex items-start gap-3 bg-cp-fill-quaternary px-4 py-3">
         <span
           aria-hidden="true"
-          class="inline-flex size-9 shrink-0 items-center justify-center rounded-cp-control"
+          class="inline-flex size-9 shrink-0 items-center justify-center rounded-cp"
           :class="presentation.statusStyle.icon"
         >
           <component :is="presentation.icon" class="size-4.5" />
         </span>
 
         <div class="min-w-0 flex-1">
-          <p class="m-0 text-[11px] leading-none font-heavy tracking-[0.08em] text-cp-tertiary">
+          <p class="m-0 text-cp-xs leading-none font-heavy tracking-[0.08em] text-cp-text-tertiary">
             账号状态
           </p>
-          <h3 class="mt-1.5 mb-0 text-[14px] leading-5 font-heavy text-cp-primary text-balance">
+          <h3 class="mt-1.5 mb-0 text-cp-lg leading-5 font-heavy text-cp-text text-balance">
             {{ presentation.title }}
           </h3>
         </div>
@@ -96,51 +96,51 @@ const presentation = computed(() => resolveAccountStatusPresentation({
         </span>
       </header>
 
-      <div class="grid gap-3 px-4 py-3 text-[12px] leading-5">
-        <p class="m-0 text-pretty font-emphasis text-cp-secondary">
+      <div class="grid gap-3 px-4 py-3 text-cp-sm leading-5">
+        <p class="m-0 text-pretty font-emphasis text-cp-text-secondary">
           {{ presentation.description }}
         </p>
 
         <div
           v-if="presentation.rateLimitRecovery"
-          class="flex items-center justify-between gap-3 rounded-cp-control bg-cp-subtle px-3 py-2"
+          class="flex items-center justify-between gap-3 rounded-cp bg-cp-fill-quaternary px-3 py-2"
         >
-          <span class="font-heavy text-cp-tertiary">预计恢复</span>
-          <span class="font-mono font-emphasis tabular-nums text-cp-primary">
+          <span class="font-heavy text-cp-text-tertiary">预计恢复</span>
+          <span class="font-mono font-emphasis tabular-nums text-cp-text">
             {{ presentation.rateLimitRecovery }}
           </span>
         </div>
 
         <div
           v-if="presentation.nextRefreshDisplay"
-          class="flex items-center justify-between gap-3 rounded-cp-control bg-cp-subtle px-3 py-2"
+          class="flex items-center justify-between gap-3 rounded-cp bg-cp-fill-quaternary px-3 py-2"
         >
-          <span class="font-heavy text-cp-tertiary">下次尝试</span>
-          <span class="font-mono font-emphasis tabular-nums text-cp-primary">
+          <span class="font-heavy text-cp-text-tertiary">下次尝试</span>
+          <span class="font-mono font-emphasis tabular-nums text-cp-text">
             {{ presentation.nextRefreshDisplay }}
           </span>
         </div>
 
-        <div class="rounded-cp-control bg-cp-subtle px-3 py-2.5">
-          <p class="m-0 text-[11px] leading-none font-heavy text-cp-tertiary">
+        <div class="rounded-cp bg-cp-fill-quaternary px-3 py-2.5">
+          <p class="m-0 text-cp-xs leading-none font-heavy text-cp-text-tertiary">
             建议操作
           </p>
-          <p class="mt-1.5 mb-0 text-pretty font-emphasis text-cp-primary">
+          <p class="mt-1.5 mb-0 text-pretty font-emphasis text-cp-text">
             {{ presentation.recoveryHint }}
           </p>
         </div>
 
         <div
           v-if="presentation.errorText"
-          class="overflow-hidden rounded-cp-control bg-cp-muted"
+          class="overflow-hidden rounded-cp bg-cp-fill-tertiary"
         >
           <div class="flex items-center justify-between gap-3 px-3 pt-2.5 pb-1.5">
-            <span class="text-[11px] leading-none font-heavy text-cp-tertiary">上游原始反馈</span>
-            <span class="shrink-0 text-[10px] leading-none font-emphasis text-cp-muted-text">仅供排查</span>
+            <span class="text-cp-xs leading-none font-heavy text-cp-text-tertiary">上游原始反馈</span>
+            <span class="shrink-0 text-[10px] leading-none font-emphasis text-cp-text-quaternary">仅供排查</span>
           </div>
-          <BaseScrollbar class="bg-cp-subtle" max-height="124px">
+          <BaseScrollbar class="bg-cp-fill-quaternary" max-height="124px">
             <div class="px-3 py-2">
-              <pre class="m-0 whitespace-pre-wrap wrap-break-word font-mono text-[11px] leading-[1.55] font-emphasis text-cp-secondary">{{ presentation.errorText }}</pre>
+              <pre class="m-0 whitespace-pre-wrap wrap-break-word font-mono text-cp-xs leading-[1.55] font-emphasis text-cp-text-secondary">{{ presentation.errorText }}</pre>
             </div>
           </BaseScrollbar>
         </div>
diff --git a/frontend/src/views/accounts/components/AccountStatusBadge/presenter.ts b/frontend/src/views/accounts/components/AccountStatusBadge/presenter.ts
index b43632675..b6be604f4 100644
--- a/frontend/src/views/accounts/components/AccountStatusBadge/presenter.ts
+++ b/frontend/src/views/accounts/components/AccountStatusBadge/presenter.ts
@@ -57,10 +57,10 @@ const statusStyles: Record<AccountStatusTone, AccountStatusStyle> = {
     icon: 'bg-cp-success-bg text-cp-success-text',
   },
   danger: {
-    text: 'text-cp-danger-text',
-    dot: 'bg-cp-danger',
-    badge: 'bg-cp-danger-bg text-cp-danger-text',
-    icon: 'bg-cp-danger-bg text-cp-danger-text',
+    text: 'text-cp-error-text',
+    dot: 'bg-cp-error',
+    badge: 'bg-cp-error-bg text-cp-error-text',
+    icon: 'bg-cp-error-bg text-cp-error-text',
   },
   warning: {
     text: 'text-cp-warning-text',
@@ -75,10 +75,10 @@ const statusStyles: Record<AccountStatusTone, AccountStatusStyle> = {
     icon: 'bg-cp-info-bg text-cp-info-text',
   },
   normal: {
-    text: 'text-cp-secondary',
-    dot: 'bg-cp-muted-text',
-    badge: 'bg-cp-subtle text-cp-secondary',
-    icon: 'bg-cp-subtle text-cp-secondary',
+    text: 'text-cp-text-secondary',
+    dot: 'bg-cp-text-quaternary',
+    badge: 'bg-cp-fill-quaternary text-cp-text-secondary',
+    icon: 'bg-cp-fill-quaternary text-cp-text-secondary',
   },
 }
 
diff --git a/frontend/src/views/accounts/components/AccountTableActions.vue b/frontend/src/views/accounts/components/AccountTableActions.vue
index 7f65a7796..a9b12ad93 100644
--- a/frontend/src/views/accounts/components/AccountTableActions.vue
+++ b/frontend/src/views/accounts/components/AccountTableActions.vue
@@ -32,7 +32,7 @@ const emit = defineEmits<{
       label="编辑账号"
       @click.stop="emit('edit', account)"
     >
-      <Pencil class="size-3.5 text-cp-info" />
+      <Pencil class="size-3.5 text-cp-link" />
     </BaseIconButton>
 
     <BaseIconButton
@@ -42,7 +42,7 @@ const emit = defineEmits<{
       :disabled="deleting"
       @click.stop="emit('delete', account)"
     >
-      <Trash2 class="size-3.5 text-cp-danger" />
+      <Trash2 class="size-3.5 text-cp-error" />
     </BaseIconButton>
 
     <BasePopover placement="bottom-end">
@@ -60,7 +60,7 @@ const emit = defineEmits<{
             @click.stop="(close(), emit('test', account))"
           >
             <template #icon>
-              <Wifi class="size-3.5 text-cp-muted-text" />
+              <Wifi class="size-3.5 text-cp-text-quaternary" />
             </template>
             测试连接
           </BaseMenuItem>
@@ -70,16 +70,16 @@ const emit = defineEmits<{
             @click.stop="(close(), emit('refresh', account.id))"
           >
             <template #loading>
-              <RefreshCw class="size-3.5 animate-spin text-cp-muted-text motion-reduce:animate-none" />
+              <RefreshCw class="size-3.5 animate-spin text-cp-text-quaternary motion-reduce:animate-none" />
             </template>
             <template #icon>
-              <RefreshCw class="size-3.5 text-cp-muted-text" />
+              <RefreshCw class="size-3.5 text-cp-text-quaternary" />
             </template>
             刷新令牌
           </BaseMenuItem>
           <BaseMenuItem @click.stop="(close(), emit('reauthorize', account))">
             <template #icon>
-              <KeyRound class="size-3.5 text-cp-muted-text" />
+              <KeyRound class="size-3.5 text-cp-text-quaternary" />
             </template>
             重新授权
           </BaseMenuItem>
@@ -89,7 +89,7 @@ const emit = defineEmits<{
             @click.stop="(close(), emit('recover', account.id))"
           >
             <template #icon>
-              <RotateCcw class="size-3.5 text-cp-muted-text" />
+              <RotateCcw class="size-3.5 text-cp-text-quaternary" />
             </template>
             恢复状态
           </BaseMenuItem>
diff --git a/frontend/src/views/accounts/components/AccountUsagePanel.vue b/frontend/src/views/accounts/components/AccountUsagePanel.vue
index 51a97b6ed..76f0d0395 100644
--- a/frontend/src/views/accounts/components/AccountUsagePanel.vue
+++ b/frontend/src/views/accounts/components/AccountUsagePanel.vue
@@ -25,43 +25,43 @@ const modelUsageColumns = defineTableColumns<AccountModelUsage>([
 
 <template>
   <section
-    class="grid gap-4 rounded-lg bg-cp-surface p-4 shadow-cp-control xl:grid-cols-[0.52fr_1.48fr]"
+    class="grid gap-4 rounded-lg bg-cp-bg-container p-4 shadow-cp-tertiary xl:grid-cols-[0.52fr_1.48fr]"
   >
     <div>
       <div class="mb-3 flex items-baseline justify-between gap-3">
-        <h3 class="m-0 text-[14px] font-heavy text-cp-primary">
+        <h3 class="m-0 text-cp-lg font-heavy text-cp-text">
           Token 结构
         </h3>
-        <span class="text-[11px] font-emphasis text-cp-muted-text">当前额度窗口</span>
+        <span class="text-cp-xs font-emphasis text-cp-text-quaternary">当前额度窗口</span>
       </div>
       <div class="grid gap-2">
         <div class="flex items-center justify-between rounded-lg bg-cp-success-bg px-3 py-2">
-          <span class="text-[12px] font-bold text-cp-success-text">输入 Tokens</span>
-          <strong class="font-mono text-[13px] text-cp-primary">
+          <span class="text-cp-sm font-bold text-cp-success-text">输入 Tokens</span>
+          <strong class="font-mono text-cp text-cp-text">
             {{ account.usage.inputTokensDisplay }}
           </strong>
         </div>
         <div class="flex items-center justify-between rounded-lg bg-cp-warning-bg px-3 py-2">
-          <span class="text-[12px] font-bold text-cp-warning-text">输出 Tokens</span>
-          <strong class="font-mono text-[13px] text-cp-primary">
+          <span class="text-cp-sm font-bold text-cp-warning-text">输出 Tokens</span>
+          <strong class="font-mono text-cp text-cp-text">
             {{ account.usage.outputTokensDisplay }}
           </strong>
         </div>
-        <div class="flex items-center justify-between rounded-lg bg-cp-normal-bg px-3 py-2">
-          <span class="text-[12px] font-bold text-cp-normal-text">缓存 Tokens</span>
-          <strong class="font-mono text-[13px] text-cp-primary">
+        <div class="flex items-center justify-between rounded-lg bg-cp-status-normal-bg px-3 py-2">
+          <span class="text-cp-sm font-bold text-cp-status-normal-text">缓存 Tokens</span>
+          <strong class="font-mono text-cp text-cp-text">
             {{ account.usage.cachedTokensDisplay }}
           </strong>
         </div>
         <div class="flex items-center justify-between rounded-lg bg-cp-info-bg px-3 py-2">
-          <span class="text-[12px] font-bold text-cp-info-text">创建</span>
-          <strong class="font-mono text-[13px] text-cp-primary">
+          <span class="text-cp-sm font-bold text-cp-info-text">创建</span>
+          <strong class="font-mono text-cp text-cp-text">
             {{ account.usage.createdTokensDisplay }}
           </strong>
         </div>
         <div class="flex items-center justify-between rounded-lg bg-cp-info-bg px-3 py-2">
-          <span class="text-[12px] font-bold text-cp-info-text">读取</span>
-          <strong class="font-mono text-[13px] text-cp-primary">
+          <span class="text-cp-sm font-bold text-cp-info-text">读取</span>
+          <strong class="font-mono text-cp text-cp-text">
             {{ account.usage.readTokensDisplay }}
           </strong>
         </div>
@@ -72,10 +72,10 @@ const modelUsageColumns = defineTableColumns<AccountModelUsage>([
       class="min-w-0 pt-4 xl:pt-0 xl:pl-4"
     >
       <div class="mb-3 flex items-center justify-between">
-        <h3 class="m-0 text-[14px] font-heavy text-cp-primary">
+        <h3 class="m-0 text-cp-lg font-heavy text-cp-text">
           模型使用排行
         </h3>
-        <span class="text-[11px] font-emphasis text-cp-muted-text">当前额度窗口</span>
+        <span class="text-cp-xs font-emphasis text-cp-text-quaternary">当前额度窗口</span>
       </div>
 
       <div class="h-52 min-w-0">
diff --git a/frontend/src/views/accounts/components/AccountUsageWindow/AccountRequestTimeline.vue b/frontend/src/views/accounts/components/AccountUsageWindow/AccountRequestTimeline.vue
index bbc734726..11b436d82 100644
--- a/frontend/src/views/accounts/components/AccountUsageWindow/AccountRequestTimeline.vue
+++ b/frontend/src/views/accounts/components/AccountUsageWindow/AccountRequestTimeline.vue
@@ -23,7 +23,7 @@ withDefaults(
     <span
       v-for="bar in bars"
       :key="bar.key"
-      class="relative min-w-0 flex-1 bg-cp-default-border"
+      class="relative min-w-0 flex-1 bg-cp-border-secondary"
       :title="showNativeTooltip ? bar.title : undefined"
     >
       <span
diff --git a/frontend/src/views/accounts/components/AccountUsageWindow/index.vue b/frontend/src/views/accounts/components/AccountUsageWindow/index.vue
index b1e5253e9..b35a6bffd 100644
--- a/frontend/src/views/accounts/components/AccountUsageWindow/index.vue
+++ b/frontend/src/views/accounts/components/AccountUsageWindow/index.vue
@@ -48,7 +48,7 @@ const view = computed(() => resolveAccountUsageWindowPresentation({
         >
           <span
             v-if="view.quota.localUsageVisible"
-            class="text-right text-cp-muted-text"
+            class="text-right text-cp-text-quaternary"
             :class="view.classes.value"
             :title="showNativeTooltip ? `窗口消耗：${view.quota.localUsageDisplay}` : undefined"
           >
@@ -69,7 +69,7 @@ const view = computed(() => resolveAccountUsageWindowPresentation({
         >
           <span
             v-if="view.quota.localUsageVisible"
-            class="text-cp-muted-text"
+            class="text-cp-text-quaternary"
             :class="view.classes.value"
           >
             {{ view.quota.localUsageDisplay }}
@@ -98,7 +98,7 @@ const view = computed(() => resolveAccountUsageWindowPresentation({
       </div>
       <div
         v-if="view.quota.resetVisible"
-        class="mt-3 text-[12px] font-emphasis text-cp-secondary"
+        class="mt-3 text-cp-sm font-emphasis text-cp-text-secondary"
       >
         重置时间: {{ window.resetAtDisplay }}
       </div>
@@ -111,7 +111,7 @@ const view = computed(() => resolveAccountUsageWindowPresentation({
         </span>
         <strong
           v-if="view.local.requestValueVisible"
-          class="shrink-0 font-mono tabular-nums text-cp-primary"
+          class="shrink-0 font-mono tabular-nums text-cp-text"
           :class="view.classes.value"
         >
           {{ view.local.requestDisplay }}
@@ -126,8 +126,8 @@ const view = computed(() => resolveAccountUsageWindowPresentation({
     </template>
 
     <div v-else :class="view.classes.header">
-      <span class="min-w-0 text-cp-secondary">额度待观测</span>
-      <span class="shrink-0 font-mono text-cp-muted-text" :class="view.classes.value">—</span>
+      <span class="min-w-0 text-cp-text-secondary">额度待观测</span>
+      <span class="shrink-0 font-mono text-cp-text-quaternary" :class="view.classes.value">—</span>
     </div>
   </div>
 </template>
diff --git a/frontend/src/views/accounts/components/AccountUsageWindow/presenter.ts b/frontend/src/views/accounts/components/AccountUsageWindow/presenter.ts
index fddfff107..52ffef262 100644
--- a/frontend/src/views/accounts/components/AccountUsageWindow/presenter.ts
+++ b/frontend/src/views/accounts/components/AccountUsageWindow/presenter.ts
@@ -55,9 +55,9 @@ const variantDefinitions: Record<
 > = {
   metric: {
     rootClass: 'grid min-w-0 grid-rows-[14px_14px] gap-1',
-    headerClass: 'flex items-center justify-between gap-2 text-[11px] leading-[14px] font-bold',
-    labelClass: 'truncate text-cp-muted-text',
-    valueClass: 'text-[11px] leading-none font-bold',
+    headerClass: 'flex items-center justify-between gap-2 text-cp-xs leading-[14px] font-bold',
+    labelClass: 'truncate text-cp-text-quaternary',
+    valueClass: 'text-cp-xs leading-none font-bold',
     trackOffsetClass: 'self-center',
     trackShapeClass: 'h-1.5 w-full overflow-hidden rounded-full',
     minimumBarWidth: '6px',
@@ -67,8 +67,8 @@ const variantDefinitions: Record<
   },
   compact: {
     rootClass: 'flex min-w-0 flex-col',
-    headerClass: 'mb-1 flex items-baseline justify-between gap-2 text-[11px] leading-[14px] font-bold',
-    labelClass: 'truncate text-cp-muted-text',
+    headerClass: 'mb-1 flex items-baseline justify-between gap-2 text-cp-xs leading-[14px] font-bold',
+    labelClass: 'truncate text-cp-text-quaternary',
     valueClass: 'text-[10px] leading-[14px] font-heavy',
     trackOffsetClass: 'mt-auto',
     trackShapeClass: 'h-[3px] w-full overflow-hidden rounded-full',
@@ -78,10 +78,10 @@ const variantDefinitions: Record<
     showResetTime: false,
   },
   detail: {
-    rootClass: 'rounded-lg bg-cp-subtle p-2',
-    headerClass: 'flex items-center justify-between gap-3 text-[12px] font-bold',
-    labelClass: 'text-cp-secondary',
-    valueClass: 'text-[12px] font-heavy',
+    rootClass: 'rounded-lg bg-cp-fill-quaternary p-2',
+    headerClass: 'flex items-center justify-between gap-3 text-cp-sm font-bold',
+    labelClass: 'text-cp-text-secondary',
+    valueClass: 'text-cp-sm font-heavy',
     trackOffsetClass: 'mt-2',
     trackShapeClass: 'h-2 overflow-hidden rounded-full',
     minimumBarWidth: '8px',
@@ -102,12 +102,12 @@ const quotaToneClasses: Record<
   { bar: string, text: string }
 > = {
   unknown: {
-    bar: 'bg-cp-default-border-hover',
-    text: 'text-cp-muted-text',
+    bar: 'bg-cp-border',
+    text: 'text-cp-text-quaternary',
   },
   danger: {
-    bar: 'bg-cp-danger',
-    text: 'text-cp-danger-text',
+    bar: 'bg-cp-error',
+    text: 'text-cp-error-text',
   },
   warning: {
     bar: 'bg-cp-warning',
@@ -147,7 +147,7 @@ export function resolveAccountUsageWindowPresentation(
       value: definition.valueClass,
       trackOffset: definition.trackOffsetClass,
       trackShape: definition.trackShapeClass,
-      track: `${definition.trackShapeClass} bg-cp-default-border`,
+      track: `${definition.trackShapeClass} bg-cp-border-secondary`,
     },
     quota: {
       valueVisible: typeof input.window?.usedPercent === 'number'
diff --git a/frontend/src/views/accounts/composables/useAccountConnectionTest.ts b/frontend/src/views/accounts/composables/useAccountConnectionTest.ts
index dfb860417..3988ee207 100644
--- a/frontend/src/views/accounts/composables/useAccountConnectionTest.ts
+++ b/frontend/src/views/accounts/composables/useAccountConnectionTest.ts
@@ -110,16 +110,16 @@ export function useAccountConnectionTest(options: { reload: () => Promise<unknow
         label: '测试失败',
         description: '请求未完成，请在下方查看上游错误与事件轨迹',
         icon: XCircle,
-        badge: 'bg-cp-danger-bg text-cp-danger-text',
-        iconClass: 'text-cp-danger',
+        badge: 'bg-cp-error-bg text-cp-error-text',
+        iconClass: 'text-cp-error',
       }
     }
     return {
       label: '准备测试',
       description: '选择模型后，点击“开始测试”发送真实请求',
       icon: Wifi,
-      badge: 'bg-cp-subtle text-cp-secondary',
-      iconClass: 'text-cp-muted-text',
+      badge: 'bg-cp-fill-quaternary text-cp-text-secondary',
+      iconClass: 'text-cp-text-quaternary',
     }
   })
 
diff --git a/frontend/src/views/accounts/constants.ts b/frontend/src/views/accounts/constants.ts
index 33239164c..8a86bb3dd 100644
--- a/frontend/src/views/accounts/constants.ts
+++ b/frontend/src/views/accounts/constants.ts
@@ -143,14 +143,14 @@ export function groupedAccountQuotaWindows(windows: AccountQuotaWindow[]) {
 
 export function modelSuccessRateTextClass(successRate: number | null) {
   if (successRate === null)
-    return 'text-cp-muted-text'
+    return 'text-cp-text-quaternary'
   if (successRate >= 99.5)
     return 'text-cp-success-text'
   if (successRate >= 98)
-    return 'text-cp-normal-text'
+    return 'text-cp-status-normal-text'
   if (successRate >= 95)
     return 'text-cp-warning-text'
-  return 'text-cp-danger-text'
+  return 'text-cp-error-text'
 }
 
 function compareQuotaWindows(left: AccountQuotaWindow, right: AccountQuotaWindow) {
diff --git a/frontend/src/views/accounts/index.vue b/frontend/src/views/accounts/index.vue
index b6a6097ee..c1e42f9d7 100644
--- a/frontend/src/views/accounts/index.vue
+++ b/frontend/src/views/accounts/index.vue
@@ -190,7 +190,7 @@ const {
       <template #body>
         <div class="flex h-full min-h-0 flex-col">
           <BaseTable
-            class="min-h-0 flex-1 [--cp-table-row-min-height:72px]"
+            class="min-h-0 flex-1 [--cp-table-row-height:72px]"
             :columns="accountColumns"
             :rows="accounts"
             :loading="loading"
@@ -203,7 +203,7 @@ const {
             <template #expander="{ row }">
               <button
                 type="button"
-                class="inline-flex size-6 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent text-cp-secondary transition hover:bg-cp-default-hover hover:text-cp-primary"
+                class="inline-flex size-6 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent text-cp-text-secondary transition hover:bg-cp-bg-text-hover hover:text-cp-text"
                 :title="expandedAccountIds.has(row.id) ? '收起统计' : '展开统计'"
                 @click.stop="toggleExpanded(row.id)"
               >
diff --git a/frontend/src/views/api-keys/components/ApiKeyActions.vue b/frontend/src/views/api-keys/components/ApiKeyActions.vue
index 486845c92..8fc4fca9e 100644
--- a/frontend/src/views/api-keys/components/ApiKeyActions.vue
+++ b/frontend/src/views/api-keys/components/ApiKeyActions.vue
@@ -30,7 +30,7 @@ const emit = defineEmits<{
       label="编辑密钥"
       @click.stop="emit('edit', apiKey)"
     >
-      <Pencil class="size-3.5 text-cp-info" />
+      <Pencil class="size-3.5 text-cp-link" />
     </BaseIconButton>
     <BaseIconButton
       variant="ghost"
@@ -40,7 +40,7 @@ const emit = defineEmits<{
       :disabled="revealing"
       @click.stop="emit('use', apiKey)"
     >
-      <Terminal class="size-3.5 text-cp-normal" />
+      <Terminal class="size-3.5 text-cp-status-normal" />
     </BaseIconButton>
 
     <BaseIconButton
@@ -50,7 +50,7 @@ const emit = defineEmits<{
       :disabled="revealing"
       @click.stop="emit('importCcs', apiKey)"
     >
-      <Upload class="size-3.5 text-cp-info" />
+      <Upload class="size-3.5 text-cp-link" />
     </BaseIconButton>
 
     <BaseIconButton
@@ -73,7 +73,7 @@ const emit = defineEmits<{
       :disabled="deleting"
       @click.stop="emit('delete', apiKey)"
     >
-      <Trash2 class="size-3.5 text-cp-danger" />
+      <Trash2 class="size-3.5 text-cp-error" />
     </BaseIconButton>
   </div>
 </template>
diff --git a/frontend/src/views/api-keys/components/ApiKeyCreateModal.vue b/frontend/src/views/api-keys/components/ApiKeyCreateModal.vue
index 964679175..8a81c1d30 100644
--- a/frontend/src/views/api-keys/components/ApiKeyCreateModal.vue
+++ b/frontend/src/views/api-keys/components/ApiKeyCreateModal.vue
@@ -110,17 +110,17 @@ const title = computed(() => props.editing ? '编辑 API Key' : '创建 API Key'
     size="md"
   >
     <div class="flex flex-col gap-4">
-      <div class="rounded-cp-control border border-cp-warning-border bg-cp-warning-bg px-4 py-3">
-        <p class="m-0 text-[13px] font-semibold text-cp-warning-text">
+      <div class="rounded-cp border border-cp-warning-border bg-cp-warning-bg px-4 py-3">
+        <p class="m-0 text-cp font-semibold text-cp-warning-text">
           该密钥具有网关访问权限，请仅发送给可信调用方
         </p>
       </div>
       <div>
-        <p class="mb-2 text-[13px] font-medium text-cp-secondary">
+        <p class="mb-2 text-cp font-medium text-cp-text-secondary">
           API Key
         </p>
         <div class="flex items-center gap-2">
-          <code class="flex-1 rounded-cp-control bg-cp-subtle px-3 py-2.5 font-mono text-[13px] break-all text-cp-primary">
+          <code class="flex-1 rounded-cp bg-cp-fill-quaternary px-3 py-2.5 font-mono text-cp break-all text-cp-text">
             {{ createdKey }}
           </code>
           <BaseIconButton size="md" label="复制" @click="emit('copy', createdKey)">
diff --git a/frontend/src/views/api-keys/components/ApiKeyFilters.vue b/frontend/src/views/api-keys/components/ApiKeyFilters.vue
index 7fd56d8bb..2d386519a 100644
--- a/frontend/src/views/api-keys/components/ApiKeyFilters.vue
+++ b/frontend/src/views/api-keys/components/ApiKeyFilters.vue
@@ -26,7 +26,7 @@ const search = defineModel<string>('search', { required: true })
     <div class="min-w-0 flex-1 md:w-96 md:flex-none">
       <BaseInput v-model="search" placeholder="搜索名称、标签或 ID" class="w-full">
         <template #prefix>
-          <Search class="size-4.5 text-cp-tertiary" />
+          <Search class="size-4.5 text-cp-text-tertiary" />
         </template>
       </BaseInput>
     </div>
diff --git a/frontend/src/views/api-keys/components/ApiKeyIdentityCell.vue b/frontend/src/views/api-keys/components/ApiKeyIdentityCell.vue
index a47539205..7bd1a7897 100644
--- a/frontend/src/views/api-keys/components/ApiKeyIdentityCell.vue
+++ b/frontend/src/views/api-keys/components/ApiKeyIdentityCell.vue
@@ -10,10 +10,10 @@ defineProps<{
 
 <template>
   <div class="flex flex-col gap-0.5">
-    <span class="text-[13px] font-bold text-cp-primary">
+    <span class="text-cp font-bold text-cp-text">
       {{ apiKey.name }}
     </span>
-    <span v-if="apiKey.label" class="text-[12px] font-emphasis text-cp-tertiary">
+    <span v-if="apiKey.label" class="text-cp-sm font-emphasis text-cp-text-tertiary">
       {{ apiKey.label }}
     </span>
   </div>
diff --git a/frontend/src/views/api-keys/components/ApiKeyPrefixCell.vue b/frontend/src/views/api-keys/components/ApiKeyPrefixCell.vue
index eee78b4bb..1ec35a603 100644
--- a/frontend/src/views/api-keys/components/ApiKeyPrefixCell.vue
+++ b/frontend/src/views/api-keys/components/ApiKeyPrefixCell.vue
@@ -15,7 +15,7 @@ const emit = defineEmits<{
 
 <template>
   <div class="flex items-center gap-2">
-    <code class="block min-w-0 truncate font-mono text-[12px] font-emphasis text-cp-primary">
+    <code class="block min-w-0 truncate font-mono text-cp-sm font-emphasis text-cp-text">
       {{ prefix }}••••••••••••••••
     </code>
     <BaseIconButton
diff --git a/frontend/src/views/api-keys/components/ApiKeyScopeCell.vue b/frontend/src/views/api-keys/components/ApiKeyScopeCell.vue
index ca059d7c3..1fb38f099 100644
--- a/frontend/src/views/api-keys/components/ApiKeyScopeCell.vue
+++ b/frontend/src/views/api-keys/components/ApiKeyScopeCell.vue
@@ -11,7 +11,7 @@ defineProps<{
 <template>
   <div class="grid w-full justify-items-center gap-1.5">
     <div v-if="apiKey.routingScope === 'all'" class="flex items-center justify-center gap-2">
-      <span class="inline-flex h-6 items-center rounded-lg bg-cp-warning-bg px-2 text-[11px] font-bold text-cp-warning-text">
+      <span class="inline-flex h-6 items-center rounded-lg bg-cp-warning-bg px-2 text-cp-xs font-bold text-cp-warning-text">
         全部账号权限
       </span>
     </div>
diff --git a/frontend/src/views/api-keys/components/ApiKeyStatusBadge.vue b/frontend/src/views/api-keys/components/ApiKeyStatusBadge.vue
index b37b05d8b..402fae1b1 100644
--- a/frontend/src/views/api-keys/components/ApiKeyStatusBadge.vue
+++ b/frontend/src/views/api-keys/components/ApiKeyStatusBadge.vue
@@ -8,10 +8,10 @@ defineProps<{
 
 <template>
   <span
-    class="inline-flex h-6 min-w-14 items-center justify-center rounded-full px-2 text-[12px] leading-none font-bold"
+    class="inline-flex h-6 min-w-14 items-center justify-center rounded-full px-2 text-cp-sm leading-none font-bold"
     :class="{
       'bg-cp-success-bg text-cp-success-text': apiKey.enabled,
-      'bg-cp-subtle text-cp-secondary': !apiKey.enabled,
+      'bg-cp-fill-quaternary text-cp-text-secondary': !apiKey.enabled,
     }"
   >
     {{ apiKey.enabled ? '已启用' : '已禁用' }}
diff --git a/frontend/src/views/api-keys/components/ApiKeyUseModal.vue b/frontend/src/views/api-keys/components/ApiKeyUseModal.vue
index 2d5389e07..e63ccdd37 100644
--- a/frontend/src/views/api-keys/components/ApiKeyUseModal.vue
+++ b/frontend/src/views/api-keys/components/ApiKeyUseModal.vue
@@ -83,11 +83,11 @@ const visibleFiles = computed(() => [
         <section
           v-for="file in visibleFiles"
           :key="file.path"
-          class="overflow-hidden rounded-cp-surface bg-cp-subtle shadow-cp-control"
+          class="overflow-hidden rounded-cp-card bg-cp-fill-quaternary shadow-cp-tertiary"
         >
           <div class="flex items-center justify-between gap-3 px-4 py-2.5">
             <span
-              class="min-w-0 truncate font-mono text-[12px] font-emphasis text-cp-secondary"
+              class="min-w-0 truncate font-mono text-cp-sm font-emphasis text-cp-text-secondary"
             >
               {{ file.path }}
             </span>
@@ -103,9 +103,9 @@ const visibleFiles = computed(() => [
           <BaseScrollbar
             max-height="360px"
           >
-            <div class="mx-3 mb-3 rounded-cp-control bg-cp-surface px-3.5 py-3 shadow-cp-input">
+            <div class="mx-3 mb-3 rounded-cp bg-cp-bg-container px-3.5 py-3 shadow-cp-input">
               <pre
-                class="m-0 whitespace-pre-wrap wrap-break-word font-mono text-[12px] leading-[1.65] font-emphasis text-cp-primary"
+                class="m-0 whitespace-pre-wrap wrap-break-word font-mono text-cp-sm leading-[1.65] font-emphasis text-cp-text"
                 v-text="file.content"
               />
             </div>
diff --git a/frontend/src/views/dashboard/components/AccountOverviewCard.vue b/frontend/src/views/dashboard/components/AccountOverviewCard.vue
index 0bdcd9101..db706f922 100644
--- a/frontend/src/views/dashboard/components/AccountOverviewCard.vue
+++ b/frontend/src/views/dashboard/components/AccountOverviewCard.vue
@@ -151,8 +151,8 @@ const statusBars = computed(() => {
   return [
     { pct: (counts.normal / counts.total) * 100, cls: 'bg-cp-success' },
     { pct: (counts.quotaExhausted / counts.total) * 100, cls: 'bg-cp-warning' },
-    { pct: (counts.rateLimited / counts.total) * 100, cls: 'bg-cp-normal' },
-    { pct: ((counts.disabled + counts.error) / counts.total) * 100, cls: 'bg-cp-danger' },
+    { pct: (counts.rateLimited / counts.total) * 100, cls: 'bg-cp-status-normal' },
+    { pct: ((counts.disabled + counts.error) / counts.total) * 100, cls: 'bg-cp-error' },
   ].filter(b => b.pct > 0)
 })
 </script>
@@ -163,25 +163,25 @@ const statusBars = computed(() => {
       class="grid xl:grid-cols-[minmax(0,0.9fr)_minmax(0,1.28fr)_minmax(280px,0.9fr)] xl:gap-7"
     >
       <section class="min-w-0 w-full pb-6 xl:h-100.5 xl:pb-0">
-        <h2 class="m-0 text-xl leading-[1.15] font-heavy text-cp-primary">
+        <h2 class="m-0 text-xl leading-[1.15] font-heavy text-cp-text">
           账号调度
         </h2>
-        <p class="mt-1.75 mb-0 text-[13px] leading-[1.15] font-semibold text-cp-secondary">
+        <p class="mt-1.75 mb-0 text-cp leading-[1.15] font-semibold text-cp-text-secondary">
           容量、并发与分配策略
         </p>
 
         <div class="mt-6.75 grid gap-4 xl:h-82.5 xl:grid-rows-[122px_90px_minmax(0,1fr)]">
-          <div class="grid h-30.5 content-between rounded-cp-overlay bg-cp-subtle p-4 xl:h-auto">
-            <span class="block h-3.5 text-xs leading-[1.15] font-emphasis text-cp-secondary">槽位占用</span>
+          <div class="grid h-30.5 content-between rounded-cp-lg bg-cp-bg-elevated p-4 xl:h-auto">
+            <span class="block h-3.5 text-xs leading-[1.15] font-emphasis text-cp-text-secondary">槽位占用</span>
             <div>
               <div class="h-8.5">
                 <strong
-                  class="font-mono text-[32px] leading-[1.05] font-heavy tabular-nums text-cp-primary"
+                  class="font-mono text-[32px] leading-[1.05] font-heavy tabular-nums text-cp-text"
                 >
                   {{ usedRatio }}
                 </strong>
               </div>
-              <div class="mt-4 h-2.5 w-full overflow-hidden rounded-full bg-cp-progress">
+              <div class="mt-4 h-2.5 w-full overflow-hidden rounded-full bg-cp-progress-remaining">
                 <i
                   class="block h-2.5 rounded-full bg-cp-success"
                   :style="usedProgressStyle"
@@ -191,21 +191,21 @@ const statusBars = computed(() => {
           </div>
 
           <div
-            class="grid h-22.5 grid-cols-3 gap-4 rounded-cp-overlay bg-cp-subtle p-4 xl:h-auto"
+            class="grid h-22.5 grid-cols-3 gap-4 rounded-cp-lg bg-cp-bg-elevated p-4 xl:h-auto"
           >
             <div v-for="stat in scheduleStats" :key="stat.label" class="grid content-between">
-              <span class="text-xs leading-[1.15] font-emphasis text-cp-secondary">{{ stat.label }}</span>
+              <span class="text-xs leading-[1.15] font-emphasis text-cp-text-secondary">{{ stat.label }}</span>
               <strong
-                class="block font-mono text-[21px] leading-[1.1] font-heavy tabular-nums text-cp-primary"
+                class="block font-mono text-[21px] leading-[1.1] font-heavy tabular-nums text-cp-text"
               >
                 {{ stat.value }}
               </strong>
             </div>
           </div>
 
-          <div class="grid h-20.5 content-between rounded-cp-overlay bg-cp-subtle p-4 xl:h-auto">
-            <span class="text-xs leading-[1.15] font-emphasis text-cp-secondary">分配策略</span>
-            <strong class="block text-[17px] leading-[1.15] font-emphasis text-cp-primary">
+          <div class="grid h-20.5 content-between rounded-cp-lg bg-cp-bg-elevated p-4 xl:h-auto">
+            <span class="text-xs leading-[1.15] font-emphasis text-cp-text-secondary">分配策略</span>
+            <strong class="block text-[17px] leading-[1.15] font-emphasis text-cp-text">
               {{ strategyLabel }}
             </strong>
           </div>
@@ -213,10 +213,10 @@ const statusBars = computed(() => {
       </section>
 
       <section class="min-w-0 w-full">
-        <h2 class="m-0 text-xl leading-[1.15] font-heavy text-cp-primary">
+        <h2 class="m-0 text-xl leading-[1.15] font-heavy text-cp-text">
           活跃账号用量
         </h2>
-        <p class="mt-1.75 mb-0 text-[13px] leading-[1.15] font-semibold text-cp-secondary">
+        <p class="mt-1.75 mb-0 text-cp leading-[1.15] font-semibold text-cp-text-secondary">
           最近使用排序
         </p>
 
@@ -232,7 +232,7 @@ const statusBars = computed(() => {
             <article
               v-for="account in accounts"
               :key="account.id"
-              class="grid w-full shrink-0 grid-cols-1 gap-3 rounded-xl bg-cp-subtle px-3.5 py-3.5 transition-colors xl:h-19.5 xl:grid-cols-[minmax(0,1fr)_minmax(70px,0.36fr)_minmax(74px,0.38fr)_minmax(82px,0.46fr)] xl:items-center xl:gap-4 xl:py-0"
+              class="grid w-full shrink-0 grid-cols-1 gap-3 rounded-xl bg-cp-bg-elevated px-3.5 py-3.5 transition-colors xl:h-19.5 xl:grid-cols-[minmax(0,1fr)_minmax(70px,0.36fr)_minmax(74px,0.38fr)_minmax(82px,0.46fr)] xl:items-center xl:gap-4 xl:py-0"
             >
               <AccountIdentityCell
                 :account="account"
@@ -253,20 +253,20 @@ const statusBars = computed(() => {
                 class="grid min-w-0 grid-cols-[minmax(0,0.82fr)_minmax(0,0.64fr)_minmax(104px,1fr)] items-start gap-3 xl:contents"
               >
                 <span class="grid min-w-0 gap-1">
-                  <span class="text-[11px] leading-none font-bold text-cp-muted-text">
+                  <span class="text-cp-xs leading-none font-bold text-cp-text-quaternary">
                     {{ account.metricLabel }}
                   </span>
                   <strong
-                    class="font-mono text-sm leading-[1.15] font-heavy tabular-nums text-cp-primary"
+                    class="font-mono text-sm leading-[1.15] font-heavy tabular-nums text-cp-text"
                   >
                     {{ account.metricValue }}
                   </strong>
                 </span>
 
                 <span class="grid min-w-0 gap-1">
-                  <span class="text-[11px] leading-none font-bold text-cp-muted-text">最近</span>
+                  <span class="text-cp-xs leading-none font-bold text-cp-text-quaternary">最近</span>
                   <span
-                    class="min-w-0 truncate text-xs leading-[1.15] font-bold text-cp-secondary xl:whitespace-nowrap"
+                    class="min-w-0 truncate text-xs leading-[1.15] font-bold text-cp-text-secondary xl:whitespace-nowrap"
                   >
                     {{ account.lastUsed }}
                   </span>
@@ -286,10 +286,10 @@ const statusBars = computed(() => {
       <section class="min-w-0 w-full pt-6 xl:h-100.5 xl:pt-0">
         <header class="flex h-12.5 items-start justify-between">
           <div>
-            <h2 class="m-0 text-xl leading-[1.15] font-heavy text-cp-primary">
+            <h2 class="m-0 text-xl leading-[1.15] font-heavy text-cp-text">
               账号状态
             </h2>
-            <p class="mt-1 mb-0 text-[13px] leading-[1.15] font-emphasis text-cp-secondary">
+            <p class="mt-1 mb-0 text-cp leading-[1.15] font-emphasis text-cp-text-secondary">
               账号池健康结构
             </p>
           </div>
@@ -299,16 +299,16 @@ const statusBars = computed(() => {
             >
               {{ normalRate }}
             </strong>
-            <span class="mt-0.5 text-xs leading-[1.15] font-bold text-cp-secondary">正常率</span>
+            <span class="mt-0.5 text-xs leading-[1.15] font-bold text-cp-text-secondary">正常率</span>
           </div>
         </header>
 
         <div class="mt-5.5 h-10.5 w-full">
           <div class="flex h-4 items-center justify-between">
-            <span class="text-xs leading-[1.15] font-emphasis text-cp-secondary">状态分布</span>
-            <span class="text-xs leading-[1.15] font-emphasis text-cp-danger-text">不可用 {{ accountStatusCounts?.unavailable ?? '—' }}</span>
+            <span class="text-xs leading-[1.15] font-emphasis text-cp-text-secondary">状态分布</span>
+            <span class="text-xs leading-[1.15] font-emphasis text-cp-error-text">不可用 {{ accountStatusCounts?.unavailable ?? '—' }}</span>
           </div>
-          <div class="mt-2.5 flex h-3 w-full overflow-hidden rounded-full bg-cp-muted">
+          <div class="mt-2.5 flex h-3 w-full overflow-hidden rounded-full bg-cp-fill-tertiary">
             <i
               v-for="(bar, bi) in statusBars"
               :key="bi"
@@ -323,19 +323,19 @@ const statusBars = computed(() => {
           <div
             v-for="row in statusRows"
             :key="row.label"
-            class="grid h-14.5 grid-cols-[28px_14px_minmax(0,1fr)_76px] items-center rounded-cp-overlay bg-cp-subtle px-3.5"
+            class="grid h-14.5 grid-cols-[28px_14px_minmax(0,1fr)_76px] items-center rounded-cp-lg bg-cp-bg-elevated px-3.5"
           >
             <span
-              class="inline-flex size-7 items-center justify-center rounded-cp-control"
+              class="inline-flex size-7 items-center justify-center rounded-cp"
               :class="toneIconClass(row.tone)"
             >
               <component :is="row.icon" :size="16" />
             </span>
             <span class="col-start-3 grid gap-1">
-              <strong class="text-sm leading-[1.15] font-emphasis text-cp-primary">
+              <strong class="text-sm leading-[1.15] font-emphasis text-cp-text">
                 {{ row.label }}
               </strong>
-              <span class="text-xs leading-[1.15] font-emphasis text-cp-secondary">{{ row.description }}</span>
+              <span class="text-xs leading-[1.15] font-emphasis text-cp-text-secondary">{{ row.description }}</span>
             </span>
             <strong
               class="col-start-4 text-right font-mono text-[17px] leading-[1.15] font-heavy tabular-nums"
diff --git a/frontend/src/views/dashboard/components/DashboardContent.vue b/frontend/src/views/dashboard/components/DashboardContent.vue
new file mode 100644
index 000000000..c529317b9
--- /dev/null
+++ b/frontend/src/views/dashboard/components/DashboardContent.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import type { dashboardSnapshotView, dashboardTrendView } from '../composables/useDashboard'
+import type { DashboardTrendKind } from '@/api/modules/dashboard'
+import { RefreshCw } from '@lucide/vue'
+
+import BaseIconButton from '@/components/base/BaseIconButton.vue'
+import BasePageHeader from '@/components/base/BasePageHeader.vue'
+
+import AccountOverviewCard from './AccountOverviewCard.vue'
+import DashboardHeartbeat from './DashboardHeartbeat.vue'
+import MetricCard from './MetricCard.vue'
+import RequestHealthTimelineCard from './RequestHealthTimelineCard.vue'
+import RequestTrendCard from './RequestTrendCard.vue'
+import UsageRecordCard from './UsageRecordCard.vue'
+import WireProfileCard from './WireProfileCard.vue'
+
+type DashboardSnapshotView = ReturnType<typeof dashboardSnapshotView>
+type DashboardTrendView = ReturnType<typeof dashboardTrendView>
+
+withDefaults(
+  defineProps<{
+    loading?: boolean
+    refreshing?: boolean
+    lastRefreshedAt?: string
+    metrics: DashboardSnapshotView['metrics']
+    trendPoints: DashboardTrendView['points']
+    trendSummary: DashboardTrendView['summary']
+    healthTimeline: DashboardSnapshotView['healthTimeline']
+    accountUsage: DashboardSnapshotView['accountUsage']
+    wireProfiles: DashboardSnapshotView['wireProfiles']
+    usageRecords: DashboardSnapshotView['usageRecords']
+    poolSummary: DashboardSnapshotView['poolSummary']
+    capacityInfo: DashboardSnapshotView['capacityInfo']
+    rotationStrategy: DashboardSnapshotView['rotationStrategy']
+  }>(),
+  {
+    loading: false,
+    refreshing: false,
+    lastRefreshedAt: '',
+  },
+)
+
+const emit = defineEmits<{
+  refresh: []
+  trendChange: [kind: DashboardTrendKind]
+}>()
+
+const trendKind = defineModel<DashboardTrendKind>('trendKind', { required: true })
+</script>
+
+<template>
+  <div class="w-full">
+    <BasePageHeader title="系统概览">
+      <template #description>
+        <span>当日统计</span>
+        <DashboardHeartbeat :updated-at="lastRefreshedAt" />
+      </template>
+      <template #actions>
+        <BaseIconButton
+          class="text-cp-status-normal"
+          size="md"
+          label="刷新概览"
+          :loading="loading || refreshing"
+          :disabled="loading || refreshing"
+          @click="emit('refresh')"
+        >
+          <template #loading>
+            <RefreshCw class="animate-spin motion-reduce:animate-none" :size="19" />
+          </template>
+          <RefreshCw :size="19" />
+        </BaseIconButton>
+      </template>
+    </BasePageHeader>
+
+    <section
+      class="mt-6 grid grid-cols-1 gap-4 md:grid-cols-2 2xl:grid-cols-4 2xl:gap-6"
+      aria-label="核心指标"
+    >
+      <MetricCard v-for="metric in metrics" :key="metric.title" :metric="metric" />
+    </section>
+
+    <section
+      class="mt-6 grid grid-cols-1 gap-6 2xl:grid-cols-[minmax(0,948fr)_minmax(0,608fr)] 2xl:gap-7"
+    >
+      <RequestTrendCard
+        v-model:kind="trendKind"
+        :points="trendPoints"
+        :summary="trendSummary"
+        @trend-change="emit('trendChange', $event)"
+      />
+      <WireProfileCard :profiles="wireProfiles" />
+    </section>
+
+    <AccountOverviewCard
+      :accounts="accountUsage"
+      :pool="poolSummary"
+      :capacity="capacityInfo"
+      :rotation-strategy="rotationStrategy"
+      class="mt-6"
+    />
+
+    <RequestHealthTimelineCard :timeline="healthTimeline" class="mt-6" />
+
+    <UsageRecordCard :rows="usageRecords" class="mt-6" />
+  </div>
+</template>
diff --git a/frontend/src/views/dashboard/components/HealthTimelinePointPopover.vue b/frontend/src/views/dashboard/components/HealthTimelinePointPopover.vue
index 5d405f693..1c9d2c66d 100644
--- a/frontend/src/views/dashboard/components/HealthTimelinePointPopover.vue
+++ b/frontend/src/views/dashboard/components/HealthTimelinePointPopover.vue
@@ -29,14 +29,14 @@ const outcomeMeta = computed(() => [
   {
     label: '服务失败',
     value: props.point.failedRequests,
-    dotClass: 'bg-cp-danger',
-    valueClass: 'text-cp-danger-text',
+    dotClass: 'bg-cp-error',
+    valueClass: 'text-cp-error-text',
   },
   {
     label: '客户端取消',
     value: props.point.cancelledRequests,
-    dotClass: 'bg-cp-normal',
-    valueClass: 'text-cp-normal-text',
+    dotClass: 'bg-cp-status-normal',
+    valueClass: 'text-cp-status-normal-text',
   },
   {
     label: '调用方错误',
@@ -65,12 +65,12 @@ const metricItems = outcomeMeta
   <section
     role="dialog"
     :aria-label="`${point.time} 请求健康详情`"
-    class="overflow-hidden rounded-cp-overlay"
+    class="overflow-hidden rounded-cp-lg"
   >
-    <header class="flex items-center justify-between gap-3 bg-cp-subtle px-3.5 py-3">
+    <header class="flex items-center justify-between gap-3 bg-cp-fill-quaternary px-3.5 py-3">
       <div class="flex min-w-0 items-center gap-2">
         <span class="size-2 shrink-0 rounded-full" :class="status.cellClass" />
-        <strong class="font-mono text-[13px] leading-none font-heavy text-cp-primary">
+        <strong class="font-mono text-cp leading-none font-heavy text-cp-text">
           {{ point.time }}
         </strong>
         <span
@@ -80,7 +80,7 @@ const metricItems = outcomeMeta
           {{ status.label }}
         </span>
       </div>
-      <span class="shrink-0 text-[10px] leading-none font-emphasis text-cp-muted-text">
+      <span class="shrink-0 text-[10px] leading-none font-emphasis text-cp-text-quaternary">
         15 分钟
       </span>
     </header>
@@ -88,7 +88,7 @@ const metricItems = outcomeMeta
     <div class="grid gap-3.5 px-3.5 py-3.5">
       <div class="flex items-end justify-between gap-4">
         <div>
-          <p class="m-0 text-[11px] leading-none font-emphasis text-cp-muted-text">
+          <p class="m-0 text-cp-xs leading-none font-emphasis text-cp-text-quaternary">
             有效请求可用性
           </p>
           <strong
@@ -99,11 +99,11 @@ const metricItems = outcomeMeta
           </strong>
         </div>
         <div class="text-right">
-          <span class="block text-[10px] leading-none font-emphasis text-cp-muted-text">
+          <span class="block text-[10px] leading-none font-emphasis text-cp-text-quaternary">
             有效请求
           </span>
           <strong
-            class="mt-2 block font-mono text-[15px] leading-none font-heavy tabular-nums text-cp-primary"
+            class="mt-2 block font-mono text-cp-xl leading-none font-heavy tabular-nums text-cp-text"
           >
             {{ formatHealthCount(eligibleRequests) }}
           </strong>
@@ -111,7 +111,7 @@ const metricItems = outcomeMeta
       </div>
 
       <div
-        class="flex h-1.5 w-full overflow-hidden rounded-full bg-cp-muted"
+        class="flex h-1.5 w-full overflow-hidden rounded-full bg-cp-fill-tertiary"
         aria-hidden="true"
       >
         <span
@@ -127,14 +127,14 @@ const metricItems = outcomeMeta
         <div
           v-for="item in metricItems"
           :key="item.label"
-          class="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-2 rounded-cp-control bg-cp-subtle px-2.5 py-2.5"
+          class="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-2 rounded-cp bg-cp-fill-quaternary px-2.5 py-2.5"
         >
           <span class="size-1.5 rounded-full" :class="item.dotClass" />
-          <span class="truncate text-[10px] leading-none font-emphasis text-cp-secondary">
+          <span class="truncate text-[10px] leading-none font-emphasis text-cp-text-secondary">
             {{ item.label }}
           </span>
           <strong
-            class="font-mono text-[12px] leading-none font-heavy tabular-nums"
+            class="font-mono text-cp-sm leading-none font-heavy tabular-nums"
             :class="item.valueClass"
           >
             {{ formatHealthCount(item.value) }}
@@ -143,7 +143,7 @@ const metricItems = outcomeMeta
       </div>
 
       <p
-        class="m-0 border-t border-cp-divider pt-3 text-[10px] leading-[1.45] font-emphasis text-cp-muted-text"
+        class="m-0 border-t border-cp-split pt-3 text-[10px] leading-[1.45] font-emphasis text-cp-text-quaternary"
       >
         客户端取消与调用方错误单独记录，不计入可用性。
       </p>
diff --git a/frontend/src/views/dashboard/components/MetricCard.vue b/frontend/src/views/dashboard/components/MetricCard.vue
index e333bb936..854f5e36e 100644
--- a/frontend/src/views/dashboard/components/MetricCard.vue
+++ b/frontend/src/views/dashboard/components/MetricCard.vue
@@ -15,11 +15,11 @@ const props = defineProps<{
 }>()
 
 const trendToneClasses: Record<MetricTone, string> = {
-  normal: 'bg-cp-normal-text',
+  normal: 'bg-cp-status-normal-text',
   info: 'bg-cp-info-text',
   success: 'bg-cp-success-text',
   warning: 'bg-cp-warning-text',
-  danger: 'bg-cp-danger-text',
+  danger: 'bg-cp-error-text',
 }
 
 const sparklineColors: Record<MetricTone, string> = {
@@ -73,17 +73,17 @@ const sparklineOption = computed<EChartsOption | null>(() => {
     <div class="flex items-start gap-3">
       <BaseMotionIcon
         aria-hidden="true"
-        class="inline-flex size-8.5 shrink-0 items-center justify-center rounded-cp-overlay"
+        class="inline-flex size-8.5 shrink-0 items-center justify-center rounded-cp-lg"
         :class="metricToneIconClasses[metric.tone]"
       >
         <component :is="metric.icon" :size="18" />
       </BaseMotionIcon>
-      <span class="mt-1 text-[13px] leading-[1.15] font-emphasis text-cp-secondary">{{ metric.title }}</span>
+      <span class="mt-1 text-cp leading-[1.15] font-emphasis text-cp-text-secondary">{{ metric.title }}</span>
     </div>
 
     <div class="mt-3.25 flex h-7.75 items-end gap-2">
       <strong
-        class="font-mono text-[28px] leading-[1.05] font-heavy tabular-nums text-cp-primary"
+        class="font-mono text-[28px] leading-[1.05] font-heavy tabular-nums text-cp-text"
       >
         <AnimatedMetricValue
           :value="metric.value"
@@ -108,12 +108,12 @@ const sparklineOption = computed<EChartsOption | null>(() => {
     </div>
 
     <div
-      class="mt-3 grid h-7.5 w-full grid-cols-[minmax(0,1fr)_minmax(0,1fr)] items-center rounded-cp-overlay bg-cp-subtle px-3"
+      class="mt-3 grid h-7.5 w-full grid-cols-[minmax(0,1fr)_minmax(0,1fr)] items-center rounded-cp-lg bg-cp-fill-quaternary px-3"
     >
       <span
         class="inline-grid min-w-0 w-full grid-cols-[auto_minmax(0,1fr)] items-baseline gap-2.5"
       >
-        <span class="shrink-0 text-[11px] leading-none font-emphasis text-cp-muted-text">{{ metric.details[0]?.label }}</span>
+        <span class="shrink-0 text-cp-xs leading-none font-emphasis text-cp-text-quaternary">{{ metric.details[0]?.label }}</span>
         <b
           class="min-w-0 truncate font-mono text-xs leading-none font-bold tabular-nums"
           :class="metric.details[0]?.tone ? metricToneValueClasses[metric.details[0].tone] : undefined"
@@ -124,7 +124,7 @@ const sparklineOption = computed<EChartsOption | null>(() => {
       <span
         class="inline-grid min-w-0 w-full grid-cols-[auto_minmax(0,auto)] items-baseline justify-end gap-2.5"
       >
-        <span class="shrink-0 text-[11px] leading-none font-emphasis text-cp-muted-text">{{ metric.details[1]?.label }}</span>
+        <span class="shrink-0 text-cp-xs leading-none font-emphasis text-cp-text-quaternary">{{ metric.details[1]?.label }}</span>
         <b
           class="min-w-0 truncate font-mono text-xs leading-none font-bold tabular-nums"
           :class="metric.details[1]?.tone ? metricToneValueClasses[metric.details[1].tone] : undefined"
diff --git a/frontend/src/views/dashboard/components/RequestHealthTimelineCard.vue b/frontend/src/views/dashboard/components/RequestHealthTimelineCard.vue
index 47f3d7951..d8f12b354 100644
--- a/frontend/src/views/dashboard/components/RequestHealthTimelineCard.vue
+++ b/frontend/src/views/dashboard/components/RequestHealthTimelineCard.vue
@@ -214,7 +214,7 @@ onBeforeUnmount(() => {
     <template #actions>
       <div class="flex w-full flex-wrap items-center justify-between gap-x-4 gap-y-2">
         <div
-          class="flex max-w-full flex-wrap items-center gap-x-2 gap-y-1 text-[11px] leading-none font-emphasis text-cp-muted-text"
+          class="flex max-w-full flex-wrap items-center gap-x-2 gap-y-1 text-cp-xs leading-none font-emphasis text-cp-text-quaternary"
         >
           <span
             v-for="item in healthLegend"
@@ -277,11 +277,11 @@ onBeforeUnmount(() => {
                 <span
                   aria-hidden="true"
                   data-health-timeline-cell
-                  class="block h-3.5 w-full origin-bottom rounded-xs transition-[filter,box-shadow] duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none group-focus-visible:shadow-[0_0_0_2px_var(--cp-bg-surface),0_0_0_4px_var(--cp-info-border)]"
+                  class="block h-3.5 w-full origin-bottom rounded-xs transition-[filter,box-shadow] duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none group-focus-visible:shadow-[0_0_0_2px_var(--cp-color-bg-container),0_0_0_4px_var(--cp-control-outline)]"
                   :class="[
                     healthStatusMeta[point.status].cellClass,
                     isActivePoint(point)
-                      ? 'brightness-105 shadow-[0_5px_10px_-5px_var(--cp-shadow-sticky)]'
+                      ? 'brightness-105 shadow-[0_5px_10px_-5px_var(--cp-color-shadow)]'
                       : isInteractivePoint(point)
                         ? 'group-hover:brightness-95'
                         : undefined,
@@ -291,7 +291,7 @@ onBeforeUnmount(() => {
             </div>
           </template>
 
-          <div class="w-72 overflow-hidden rounded-cp-overlay">
+          <div class="w-72 overflow-hidden rounded-cp-lg">
             <HealthTimelinePointPopover v-if="activePoint" :point="activePoint" />
           </div>
         </BasePopover>
diff --git a/frontend/src/views/dashboard/components/RequestTrendCard.vue b/frontend/src/views/dashboard/components/RequestTrendCard.vue
index 80ea9c2a1..2d339cbd7 100644
--- a/frontend/src/views/dashboard/components/RequestTrendCard.vue
+++ b/frontend/src/views/dashboard/components/RequestTrendCard.vue
@@ -53,7 +53,7 @@ const {
     <template #body>
       <div class="grid gap-3.5">
         <div
-          class="grid h-14.25 min-w-0 grid-cols-3 gap-1.5 rounded-xl bg-cp-subtle/45 p-1.5"
+          class="grid h-14.25 min-w-0 grid-cols-3 gap-1.5 rounded-xl bg-cp-fill-quaternary/45 p-1.5"
         >
           <button
             v-for="item in props.summary"
@@ -61,7 +61,7 @@ const {
             type="button"
             :aria-label="`突出显示${item.label}曲线`"
             :aria-pressed="pinnedSummaryLabel === item.label"
-            class="group grid min-w-0 grid-cols-[8px_minmax(0,1fr)] items-center gap-x-2 rounded-lg border-0 bg-transparent px-2.5 py-2 text-left outline-none focus-visible:ring-2 focus-visible:ring-cp-info-border"
+            class="group grid min-w-0 grid-cols-[8px_minmax(0,1fr)] items-center gap-x-2 rounded-lg border-0 bg-transparent px-2.5 py-2 text-left outline-none focus-visible:ring-2 focus-visible:ring-cp-control-outline"
             @click="toggleSummarySeries(item.label)"
           >
             <i
@@ -74,17 +74,17 @@ const {
                   'bg-cp-info': item.tone === 'info',
                   'bg-cp-success': item.tone === 'success',
                   'bg-cp-warning': item.tone === 'warning',
-                  'bg-cp-danger': item.tone === 'danger',
-                  'bg-cp-normal': item.tone === 'normal',
+                  'bg-cp-error': item.tone === 'danger',
+                  'bg-cp-status-normal': item.tone === 'normal',
                 },
               ]"
             />
             <span class="grid min-w-0 gap-1">
-              <span class="truncate text-[10px] leading-none font-bold text-cp-secondary">
+              <span class="truncate text-[10px] leading-none font-bold text-cp-text-secondary">
                 {{ item.label }}
               </span>
               <strong
-                class="truncate font-mono text-[15px] leading-none font-heavy tabular-nums text-cp-primary"
+                class="truncate font-mono text-cp-xl leading-none font-heavy tabular-nums text-cp-text"
                 :title="item.value"
               >
                 {{ item.value }}
diff --git a/frontend/src/views/dashboard/components/WireProfileCard.vue b/frontend/src/views/dashboard/components/WireProfileCard.vue
index 0a069cd01..4c0460b8d 100644
--- a/frontend/src/views/dashboard/components/WireProfileCard.vue
+++ b/frontend/src/views/dashboard/components/WireProfileCard.vue
@@ -103,14 +103,14 @@ const releaseStatus = computed(() => {
     return {
       label: '检查失败',
       title: current.release.error || '官方版本检查失败',
-      tone: 'bg-cp-danger-bg text-cp-danger-text',
+      tone: 'bg-cp-error-bg text-cp-error-text',
       icon: TriangleAlert,
     }
   }
   return {
     label: '待检查',
     title: '尚未检查官方发布渠道',
-    tone: 'bg-cp-normal-bg text-cp-normal-text',
+    tone: 'bg-cp-status-normal-bg text-cp-status-normal-text',
     icon: RefreshCw,
   }
 })
@@ -205,22 +205,22 @@ function providerLabel(provider: string) {
       <div v-else class="flex flex-1">
         <section
           aria-label="请求身份组成"
-          class="grid min-w-0 flex-1 content-between gap-6 rounded-cp-overlay bg-cp-subtle px-5 py-5.5 sm:px-6 sm:py-5"
+          class="grid min-w-0 flex-1 content-between gap-6 rounded-cp-lg bg-cp-bg-elevated px-5 py-5.5 sm:px-6 sm:py-5"
           :class="verifiedLabel || checkedLabel
             ? 'sm:grid-rows-[auto_minmax(0,1fr)_auto_auto]'
             : 'sm:grid-rows-[auto_minmax(0,1fr)_auto]'"
         >
           <div class="flex min-w-0 items-center justify-between gap-3">
-            <div class="flex min-w-0 items-center gap-2 text-cp-primary">
+            <div class="flex min-w-0 items-center gap-2 text-cp-text">
               <span
-                class="inline-flex size-7 shrink-0 items-center justify-center rounded-lg bg-cp-muted"
+                class="inline-flex size-7 shrink-0 items-center justify-center rounded-lg bg-cp-fill-tertiary"
               >
-                <Box aria-hidden="true" class="size-3.75 text-cp-secondary" />
+                <Box aria-hidden="true" class="size-3.75 text-cp-text-secondary" />
               </span>
-              <span class="truncate text-[11px] leading-none font-heavy">{{ profile.product }}</span>
+              <span class="truncate text-cp-xs leading-none font-heavy">{{ profile.product }}</span>
             </div>
             <span
-              class="inline-flex h-7 shrink-0 items-center gap-1.5 rounded-lg px-2.5 text-[12px] leading-none font-bold"
+              class="inline-flex h-7 shrink-0 items-center gap-1.5 rounded-lg px-2.5 text-cp-sm leading-none font-bold"
               :class="releaseStatus.tone"
               :title="releaseStatus.title"
             >
@@ -236,20 +236,20 @@ function providerLabel(provider: string) {
                 class="inline-flex max-w-full min-w-0 items-baseline gap-2 font-mono leading-none tabular-nums"
                 :title="profile.version"
               >
-                <span class="wrap-break-word text-[27px] leading-[1.05] font-heavy text-cp-primary">
+                <span class="wrap-break-word text-[27px] leading-[1.05] font-heavy text-cp-text">
                   {{ versionParts.release }}
                 </span>
                 <span
                   v-if="versionParts.prerelease"
                   aria-hidden="true"
-                  class="truncate text-[12px] font-bold text-cp-secondary"
+                  class="truncate text-cp-sm font-bold text-cp-text-secondary"
                 >
                   {{ versionParts.prerelease }}
                 </span>
               </strong>
               <span
                 v-if="profile.build"
-                class="shrink-0 font-mono text-[10px] leading-none font-emphasis tabular-nums text-cp-muted-text"
+                class="shrink-0 font-mono text-[10px] leading-none font-emphasis tabular-nums text-cp-text-quaternary"
               >
                 Build {{ profile.build }}
               </span>
@@ -264,13 +264,13 @@ function providerLabel(provider: string) {
           >
             <div v-if="profile.provider === 'xai'" class="min-w-0">
               <dt
-                class="flex items-center gap-1.5 text-[10px] leading-none font-bold text-cp-muted-text"
+                class="flex items-center gap-1.5 text-[10px] leading-none font-bold text-cp-text-quaternary"
               >
                 <ShieldCheck aria-hidden="true" class="size-3.25 text-cp-info" />
                 认证协议
               </dt>
               <dd
-                class="mt-2 mb-0 truncate font-mono text-[14px] leading-none font-bold tabular-nums text-cp-primary"
+                class="mt-2 mb-0 truncate font-mono text-cp-lg leading-none font-bold tabular-nums text-cp-text"
                 :title="authProtocol"
               >
                 {{ authProtocol }}
@@ -279,19 +279,19 @@ function providerLabel(provider: string) {
 
             <div class="min-w-0">
               <dt
-                class="flex items-center gap-1.5 text-[10px] leading-none font-bold text-cp-muted-text"
+                class="flex items-center gap-1.5 text-[10px] leading-none font-bold text-cp-text-quaternary"
               >
-                <Monitor aria-hidden="true" class="size-3.25 text-cp-normal" />
+                <Monitor aria-hidden="true" class="size-3.25 text-cp-status-normal" />
                 {{ profile.provider === 'openai' ? '模拟运行环境' : '运行环境' }}
               </dt>
               <dd
-                class="mt-2 mb-0 truncate font-mono text-[14px] leading-none font-bold tabular-nums text-cp-primary"
+                class="mt-2 mb-0 truncate font-mono text-cp-lg leading-none font-bold tabular-nums text-cp-text"
                 :title="runtimeEnvironment.title"
               >
                 {{ runtimeEnvironment.primary }}
                 <span
                   v-if="runtimeEnvironment.details.length"
-                  class="text-[11px] font-emphasis text-cp-secondary"
+                  class="text-cp-xs font-emphasis text-cp-text-secondary"
                 >
                   <template v-for="detail in runtimeEnvironment.details" :key="detail">
                     · {{ detail }}
@@ -302,13 +302,13 @@ function providerLabel(provider: string) {
 
             <div class="min-w-0">
               <dt
-                class="flex items-center gap-1.5 text-[10px] leading-none font-bold text-cp-muted-text"
+                class="flex items-center gap-1.5 text-[10px] leading-none font-bold text-cp-text-quaternary"
               >
                 <Terminal aria-hidden="true" class="size-3.25 text-cp-info" />
                 客户端标识
               </dt>
               <dd
-                class="mt-2 mb-0 truncate font-mono text-[16px] leading-none font-heavy tabular-nums text-cp-primary"
+                class="mt-2 mb-0 truncate font-mono text-[16px] leading-none font-heavy tabular-nums text-cp-text"
                 :title="clientIdentity"
               >
                 {{ clientIdentity }}
@@ -318,7 +318,7 @@ function providerLabel(provider: string) {
 
           <footer
             v-if="verifiedLabel || checkedLabel"
-            class="flex min-w-0 flex-wrap items-center justify-between gap-x-4 gap-y-1 text-[10px] leading-none font-emphasis text-cp-muted-text"
+            class="flex min-w-0 flex-wrap items-center justify-between gap-x-4 gap-y-1 text-[10px] leading-none font-emphasis text-cp-text-quaternary"
           >
             <span v-if="verifiedLabel" :title="profile.userAgent">{{ verifiedLabel }}</span>
             <span v-if="checkedLabel">{{ checkedLabel }}</span>
diff --git a/frontend/src/views/dashboard/composables/useDashboard.ts b/frontend/src/views/dashboard/composables/useDashboard.ts
index 7ce22a4ae..7d9311d7e 100644
--- a/frontend/src/views/dashboard/composables/useDashboard.ts
+++ b/frontend/src/views/dashboard/composables/useDashboard.ts
@@ -421,19 +421,19 @@ function usageTrendSummary(points: ReturnType<typeof aggregateUsageTrend>) {
       label: '输入',
       value: formatCompactNumber(inputTokens),
       tone: 'info',
-      colorVar: '--cp-info',
+      colorVar: '--cp-color-info',
     },
     {
       label: '输出',
       value: formatCompactNumber(outputTokens),
       tone: 'success',
-      colorVar: '--cp-success',
+      colorVar: '--cp-color-success',
     },
     {
       label: '缓存',
       value: formatCompactNumber(cachedTokens),
       tone: 'normal',
-      colorVar: '--cp-text-tertiary',
+      colorVar: '--cp-color-text-tertiary',
     },
   ]
 }
@@ -555,21 +555,21 @@ function trendSummaryTone(label: string) {
 function trendSummaryColorVar(kind: DashboardTrendKind, label: string) {
   if (kind === 'latency') {
     if (label.includes('最高'))
-      return '--cp-warning'
+      return '--cp-color-warning'
     if (label.includes('最低'))
-      return '--cp-success'
-    return '--cp-normal'
+      return '--cp-color-success'
+    return '--cp-color-status-normal'
   }
   if (kind === 'errors') {
     if (label.includes('错误'))
-      return '--cp-danger'
+      return '--cp-color-error'
     if (label.includes('成功'))
-      return '--cp-success'
-    return '--cp-info'
+      return '--cp-color-success'
+    return '--cp-color-info'
   }
   if (label.includes('输出'))
-    return '--cp-success'
+    return '--cp-color-success'
   if (label.includes('缓存'))
-    return '--cp-text-tertiary'
-  return '--cp-info'
+    return '--cp-color-text-tertiary'
+  return '--cp-color-info'
 }
diff --git a/frontend/src/views/dashboard/composables/useRequestTrendChart.ts b/frontend/src/views/dashboard/composables/useRequestTrendChart.ts
index 4dea1f3fc..91412ecd8 100644
--- a/frontend/src/views/dashboard/composables/useRequestTrendChart.ts
+++ b/frontend/src/views/dashboard/composables/useRequestTrendChart.ts
@@ -149,8 +149,8 @@ export function useRequestTrendChart(options: {
           axisLabel: {
             show: activeKind.value !== 'latency',
             color: activeKind.value === 'usage'
-              ? trendColor('输出', '--cp-success', '#10B981')
-              : trendColor('成功', '--cp-success', '#10B981'),
+              ? trendColor('输出', '--cp-color-success', '#10B981')
+              : trendColor('成功', '--cp-color-success', '#10B981'),
             fontSize: 9,
             fontFamily: 'JetBrains Mono Variable, JetBrains Mono',
             formatter: formatSecondaryAxisValue,
@@ -182,17 +182,17 @@ export function useRequestTrendChart(options: {
     if (activeKind.value === 'usage') {
       return [
         title,
-        tooltipItem('输入', point?.inputTokens, trendColor('输入', '--cp-info', '#2563EB')),
-        tooltipItem('输出', point?.outputTokens, trendColor('输出', '--cp-success', '#10B981')),
+        tooltipItem('输入', point?.inputTokens, trendColor('输入', '--cp-color-info', '#2563EB')),
+        tooltipItem('输出', point?.outputTokens, trendColor('输出', '--cp-color-success', '#10B981')),
         tooltipItem(
           '缓存',
           point?.cachedTokens,
-          trendColor('缓存', '--cp-text-tertiary', '#94A3B8'),
+          trendColor('缓存', '--cp-color-text-tertiary', '#94A3B8'),
         ),
         tooltipItem(
           '缓存命中',
           trendPointText(point, 'cacheHitRate'),
-          trendColor('缓存', '--cp-text-tertiary', '#94A3B8'),
+          trendColor('缓存', '--cp-color-text-tertiary', '#94A3B8'),
         ),
         tooltipItem('请求', point?.requests, palette.value.textSecondary),
       ]
@@ -237,9 +237,9 @@ export function useRequestTrendChart(options: {
 
   function getSeries() {
     if (activeKind.value === 'usage') {
-      const cacheColor = trendColor('缓存', '--cp-text-tertiary', '#94A3B8')
-      const inputColor = trendColor('输入', '--cp-info', '#2563EB')
-      const outputColor = trendColor('输出', '--cp-success', '#10B981')
+      const cacheColor = trendColor('缓存', '--cp-color-text-tertiary', '#94A3B8')
+      const inputColor = trendColor('输入', '--cp-color-info', '#2563EB')
+      const outputColor = trendColor('输出', '--cp-color-success', '#10B981')
       return [
         lineSeries('缓存', activeSeriesValues('cachedTokensValue'), cacheColor, {
           area: true,
@@ -274,7 +274,7 @@ export function useRequestTrendChart(options: {
         lineSeries(
           '最低',
           activeSeriesValues('minLatencyValue'),
-          trendColor('最低', '--cp-success', '#10B981'),
+          trendColor('最低', '--cp-color-success', '#10B981'),
           {
             lineType: 'dotted',
             smooth: 0.2,
@@ -286,7 +286,7 @@ export function useRequestTrendChart(options: {
         lineSeries(
           '最高',
           latencyRangeValues(),
-          trendColor('最高', '--cp-warning', '#F59E0B'),
+          trendColor('最高', '--cp-color-warning', '#F59E0B'),
           {
             area: true,
             areaStartAlpha: '26',
@@ -301,7 +301,7 @@ export function useRequestTrendChart(options: {
         lineSeries(
           '平均',
           activeSeriesValues('latencyValue'),
-          trendColor('平均', '--cp-normal', '#0F9F9A'),
+          trendColor('平均', '--cp-color-status-normal', '#0F9F9A'),
           { smooth: 0.24, width: 2.5, z: 4 },
         ),
       ]
@@ -311,18 +311,18 @@ export function useRequestTrendChart(options: {
       barSeries(
         '错误数',
         seriesValues('errorsValue'),
-        trendColor('错误', '--cp-danger', '#EF4444'),
+        trendColor('错误', '--cp-color-error', '#EF4444'),
       ),
       lineSeries(
         '成功率',
         seriesValues('successRateValue'),
-        trendColor('成功', '--cp-success', '#10B981'),
+        trendColor('成功', '--cp-color-success', '#10B981'),
         { width: 2.4, yAxisIndex: 1 },
       ),
       lineSeries(
         '总请求',
         seriesValues('requestsValue'),
-        trendColor('请求', '--cp-info', '#2563EB'),
+        trendColor('请求', '--cp-color-info', '#2563EB'),
         { lineType: 'dashed', width: 1.8 },
       ),
     ]
diff --git a/frontend/src/views/dashboard/constants.ts b/frontend/src/views/dashboard/constants.ts
index 32816dc72..3947db0e2 100644
--- a/frontend/src/views/dashboard/constants.ts
+++ b/frontend/src/views/dashboard/constants.ts
@@ -3,19 +3,19 @@ import { formatInteger } from '@/utils/number'
 
 // tone 到 Tailwind 类的唯一映射；仪表盘各卡片共用。
 export const metricToneIconClasses: Record<MetricTone, string> = {
-  normal: 'bg-cp-normal-bg text-cp-normal',
+  normal: 'bg-cp-status-normal-bg text-cp-status-normal',
   info: 'bg-cp-info-bg text-cp-info',
   success: 'bg-cp-success-bg text-cp-success',
   warning: 'bg-cp-warning-bg text-cp-warning',
-  danger: 'bg-cp-danger-bg text-cp-danger',
+  danger: 'bg-cp-error-bg text-cp-error',
 }
 
 export const metricToneValueClasses: Record<MetricTone, string> = {
-  normal: 'text-cp-normal-text',
+  normal: 'text-cp-status-normal-text',
   info: 'text-cp-info-text',
   success: 'text-cp-success-text',
   warning: 'text-cp-warning-text',
-  danger: 'text-cp-danger-text',
+  danger: 'text-cp-error-text',
 }
 
 export type HealthStatus
@@ -60,18 +60,18 @@ export const healthLegend = [
 export const healthStatusMeta: Record<HealthStatus, HealthStatusMeta> = {
   future: {
     label: '未来',
-    cellClass: 'bg-cp-disabled opacity-60',
-    badgeClass: 'bg-cp-muted text-cp-muted-text',
+    cellClass: 'bg-cp-bg-container-disabled opacity-60',
+    badgeClass: 'bg-cp-fill-tertiary text-cp-text-quaternary',
   },
   no_data: {
     label: '无有效样本',
-    cellClass: 'bg-cp-default-border-hover',
-    badgeClass: 'bg-cp-muted text-cp-secondary',
+    cellClass: 'bg-cp-border',
+    badgeClass: 'bg-cp-fill-tertiary text-cp-text-secondary',
   },
   unavailable: {
     label: '不可达',
-    cellClass: 'bg-cp-danger',
-    badgeClass: 'bg-cp-danger-bg text-cp-danger-text',
+    cellClass: 'bg-cp-error',
+    badgeClass: 'bg-cp-error-bg text-cp-error-text',
   },
   unstable: {
     label: '不稳定',
@@ -80,8 +80,8 @@ export const healthStatusMeta: Record<HealthStatus, HealthStatusMeta> = {
   },
   low_sample: {
     label: '低样本',
-    cellClass: 'bg-cp-normal',
-    badgeClass: 'bg-cp-normal-bg text-cp-normal-text',
+    cellClass: 'bg-cp-status-normal',
+    badgeClass: 'bg-cp-status-normal-bg text-cp-status-normal-text',
   },
   stable: {
     label: '稳定',
@@ -93,16 +93,16 @@ export const healthStatusMeta: Record<HealthStatus, HealthStatusMeta> = {
 export function healthReliabilityValueClass(successRequests: number, failedRequests: number) {
   const eligibleRequests = Math.max(0, successRequests) + Math.max(0, failedRequests)
   if (eligibleRequests === 0)
-    return 'text-cp-muted-text'
+    return 'text-cp-text-quaternary'
 
   const reliability = (Math.max(0, successRequests) / eligibleRequests) * 100
   if (reliability >= 99.5)
     return 'text-cp-success-text'
   if (reliability >= 98)
-    return 'text-cp-normal-text'
+    return 'text-cp-status-normal-text'
   if (reliability >= 95)
     return 'text-cp-warning-text'
-  return 'text-cp-danger-text'
+  return 'text-cp-error-text'
 }
 
 export function formatHealthCount(value: number) {
diff --git a/frontend/src/views/dashboard/index.vue b/frontend/src/views/dashboard/index.vue
index d596d2f09..8fb3a06b9 100644
--- a/frontend/src/views/dashboard/index.vue
+++ b/frontend/src/views/dashboard/index.vue
@@ -1,16 +1,5 @@
 <script setup lang="ts">
-import { RefreshCw } from '@lucide/vue'
-
-import BaseIconButton from '@/components/base/BaseIconButton.vue'
-import BasePageHeader from '@/components/base/BasePageHeader.vue'
-
-import AccountOverviewCard from './components/AccountOverviewCard.vue'
-import DashboardHeartbeat from './components/DashboardHeartbeat.vue'
-import MetricCard from './components/MetricCard.vue'
-import RequestHealthTimelineCard from './components/RequestHealthTimelineCard.vue'
-import RequestTrendCard from './components/RequestTrendCard.vue'
-import UsageRecordCard from './components/UsageRecordCard.vue'
-import WireProfileCard from './components/WireProfileCard.vue'
+import DashboardContent from './components/DashboardContent.vue'
 import { useDashboard } from './composables/useDashboard'
 
 const {
@@ -34,58 +23,22 @@ const {
 </script>
 
 <template>
-  <div class="w-full">
-    <BasePageHeader title="系统概览">
-      <template #description>
-        <span>当日统计</span>
-        <DashboardHeartbeat :updated-at="lastRefreshedAt" />
-      </template>
-      <template #actions>
-        <BaseIconButton
-          class="text-cp-normal"
-          size="md"
-          label="刷新概览"
-          :loading="loading || refreshing"
-          :disabled="loading || refreshing"
-          @click="refresh"
-        >
-          <template #loading>
-            <RefreshCw class="animate-spin motion-reduce:animate-none" :size="19" />
-          </template>
-          <RefreshCw :size="19" />
-        </BaseIconButton>
-      </template>
-    </BasePageHeader>
-
-    <section
-      class="mt-6 grid grid-cols-1 gap-4 md:grid-cols-2 2xl:grid-cols-4 2xl:gap-6"
-      aria-label="核心指标"
-    >
-      <MetricCard v-for="metric in metrics" :key="metric.title" :metric="metric" />
-    </section>
-
-    <section
-      class="mt-6 grid grid-cols-1 gap-6 2xl:grid-cols-[minmax(0,948fr)_minmax(0,608fr)] 2xl:gap-7"
-    >
-      <RequestTrendCard
-        v-model:kind="activeTrendKind"
-        :points="trendPoints"
-        :summary="trendSummary"
-        @trend-change="loadTrend"
-      />
-      <WireProfileCard :profiles="wireProfiles" />
-    </section>
-
-    <AccountOverviewCard
-      :accounts="accountUsage"
-      :pool="poolSummary"
-      :capacity="capacityInfo"
-      :rotation-strategy="rotationStrategy"
-      class="mt-6"
-    />
-
-    <RequestHealthTimelineCard :timeline="healthTimeline" class="mt-6" />
-
-    <UsageRecordCard :rows="usageRecords" class="mt-6" />
-  </div>
+  <DashboardContent
+    v-model:trend-kind="activeTrendKind"
+    :loading="loading"
+    :refreshing="refreshing"
+    :last-refreshed-at="lastRefreshedAt"
+    :metrics="metrics"
+    :trend-points="trendPoints"
+    :trend-summary="trendSummary"
+    :health-timeline="healthTimeline"
+    :account-usage="accountUsage"
+    :wire-profiles="wireProfiles"
+    :usage-records="usageRecords"
+    :pool-summary="poolSummary"
+    :capacity-info="capacityInfo"
+    :rotation-strategy="rotationStrategy"
+    @refresh="refresh"
+    @trend-change="loadTrend"
+  />
 </template>
diff --git a/frontend/src/views/login/components/LoginBackground.vue b/frontend/src/views/login/components/LoginBackground.vue
index a472ecd4b..eee4f2a4a 100644
--- a/frontend/src/views/login/components/LoginBackground.vue
+++ b/frontend/src/views/login/components/LoginBackground.vue
@@ -23,7 +23,7 @@ const routeClusters: readonly RouteCluster[] = [
     <div class="login-bg-grain" />
 
     <span
-      class="login-watermark absolute top-[9.63%] left-[6.15%] whitespace-nowrap font-mono text-[13px] leading-none font-medium text-(--login-watermark)"
+      class="login-watermark absolute top-[9.63%] left-[6.15%] whitespace-nowrap font-mono text-cp leading-none font-medium text-(--cp-login-watermark-color)"
     >
       CODEX_PROXY_RS // ROUTE_TOPOLOGY // AUTH_GATEWAY
     </span>
@@ -32,7 +32,7 @@ const routeClusters: readonly RouteCluster[] = [
       <span
         v-for="protocol in ingressProtocols"
         :key="protocol"
-        class="inline-flex w-fit items-center gap-2 rounded-sm bg-(--login-stack-bg) px-2.5 py-1.75 opacity-(--login-stack-item-opacity) before:size-1.5 before:shrink-0 before:rounded-full before:bg-(--login-stack-dot) before:content-['']"
+        class="inline-flex w-fit items-center gap-2 rounded-sm bg-(--cp-login-stack-bg) px-2.5 py-1.75 opacity-(--cp-login-stack-item-opacity) before:size-1.5 before:shrink-0 before:rounded-full before:bg-(--cp-login-stack-dot-color) before:content-['']"
       >
         {{ protocol }}
       </span>
@@ -42,7 +42,7 @@ const routeClusters: readonly RouteCluster[] = [
       <span
         v-for="protocol in upstreamProtocols"
         :key="protocol"
-        class="inline-flex w-fit items-center gap-2 rounded-sm bg-(--login-stack-bg) px-2.5 py-1.75 opacity-(--login-stack-item-opacity) before:size-1.5 before:shrink-0 before:rounded-full before:bg-(--login-stack-dot) before:content-['']"
+        class="inline-flex w-fit items-center gap-2 rounded-sm bg-(--cp-login-stack-bg) px-2.5 py-1.75 opacity-(--cp-login-stack-item-opacity) before:size-1.5 before:shrink-0 before:rounded-full before:bg-(--cp-login-stack-dot-color) before:content-['']"
       >
         {{ protocol }}
       </span>
@@ -182,16 +182,16 @@ const routeClusters: readonly RouteCluster[] = [
     <div
       v-for="cluster in routeClusters"
       :key="cluster.id"
-      class="login-route-cluster absolute grid gap-1.5 font-mono text-[10px] leading-none font-medium text-(--login-cluster-text)"
+      class="login-route-cluster absolute grid gap-1.5 font-mono text-[10px] leading-none font-medium text-(--cp-login-cluster-text-color)"
       :class="cluster.className"
     >
       <span
         v-for="label in cluster.labels"
         :key="label"
-        class="inline-flex w-fit items-center gap-2 rounded-sm bg-(--login-cluster-bg) px-2 py-1"
+        class="inline-flex w-fit items-center gap-2 rounded-sm bg-(--cp-login-cluster-bg) px-2 py-1"
       >
         <i
-          class="inline-block h-0.5 w-4.5 rounded-xs bg-(--login-cluster-pulse)"
+          class="inline-block h-0.5 w-4.5 rounded-xs bg-(--cp-login-cluster-pulse-color)"
           aria-hidden="true"
         />
         {{ label }}
@@ -215,11 +215,11 @@ const routeClusters: readonly RouteCluster[] = [
   background:
     radial-gradient(
       ellipse 59% 48% at 55% 48%,
-      var(--login-base-a) 0%,
-      var(--login-base-b) 50%,
-      var(--login-base-c) 100%
+      var(--cp-login-canvas-bg-start) 0%,
+      var(--cp-login-canvas-bg-middle) 50%,
+      var(--cp-login-canvas-bg-end) 100%
     ),
-    var(--login-base-c);
+    var(--cp-login-canvas-bg-end);
 }
 
 .login-bg-base::after {
@@ -227,44 +227,52 @@ const routeClusters: readonly RouteCluster[] = [
   background: radial-gradient(
     ellipse 52.5% 44% at 54% 47%,
     transparent 0%,
-    var(--login-edge-mid) 72%,
-    var(--login-edge-end) 100%
+    var(--cp-login-edge-color-middle) 72%,
+    var(--cp-login-edge-color-end) 100%
   );
 }
 
 .login-bg-grid {
   background:
-    repeating-linear-gradient(90deg, var(--login-grid) 0 1px, transparent 1px 80px),
-    repeating-linear-gradient(180deg, var(--login-grid) 0 1px, transparent 1px 80px);
+    repeating-linear-gradient(90deg, var(--cp-login-grid-color) 0 1px, transparent 1px 80px),
+    repeating-linear-gradient(180deg, var(--cp-login-grid-color) 0 1px, transparent 1px 80px);
 }
 
 .login-bg-striations {
   background:
-    linear-gradient(var(--login-striation), var(--login-striation)) 0 126px / 100% 1px no-repeat,
-    linear-gradient(var(--login-striation), var(--login-striation)) 0 214px / 100% 1px no-repeat,
-    linear-gradient(var(--login-striation), var(--login-striation)) 0 338px / 100% 1px no-repeat,
-    linear-gradient(var(--login-striation), var(--login-striation)) 0 462px / 100% 1px no-repeat,
-    linear-gradient(var(--login-striation), var(--login-striation)) 0 586px / 100% 1px no-repeat,
-    linear-gradient(var(--login-striation), var(--login-striation)) 0 714px / 100% 1px no-repeat,
-    linear-gradient(var(--login-striation), var(--login-striation)) 0 846px / 100% 1px no-repeat,
-    linear-gradient(var(--login-striation), var(--login-striation)) 0 982px / 100% 1px no-repeat;
+    linear-gradient(var(--cp-login-striation-color), var(--cp-login-striation-color)) 0 126px / 100% 1px no-repeat,
+    linear-gradient(var(--cp-login-striation-color), var(--cp-login-striation-color)) 0 214px / 100% 1px no-repeat,
+    linear-gradient(var(--cp-login-striation-color), var(--cp-login-striation-color)) 0 338px / 100% 1px no-repeat,
+    linear-gradient(var(--cp-login-striation-color), var(--cp-login-striation-color)) 0 462px / 100% 1px no-repeat,
+    linear-gradient(var(--cp-login-striation-color), var(--cp-login-striation-color)) 0 586px / 100% 1px no-repeat,
+    linear-gradient(var(--cp-login-striation-color), var(--cp-login-striation-color)) 0 714px / 100% 1px no-repeat,
+    linear-gradient(var(--cp-login-striation-color), var(--cp-login-striation-color)) 0 846px / 100% 1px no-repeat,
+    linear-gradient(var(--cp-login-striation-color), var(--cp-login-striation-color)) 0 982px / 100% 1px no-repeat;
 }
 
 .login-bg-grain {
   opacity: 0.68;
   background-image:
-    linear-gradient(var(--login-grain), var(--login-grain)) 139px 109px / 3px 2px no-repeat,
-    linear-gradient(var(--login-grain-alt-a), var(--login-grain-alt-a)) 288px 192px / 1px 1px no-repeat,
-    linear-gradient(var(--login-grain-alt-b), var(--login-grain-alt-b)) 437px 275px / 1px 1px no-repeat,
-    linear-gradient(var(--login-grain), var(--login-grain)) 586px 358px / 2px 1px no-repeat,
-    linear-gradient(var(--login-grain-alt-a), var(--login-grain-alt-a)) 735px 441px / 1px 2px no-repeat,
-    linear-gradient(var(--login-grain-alt-b), var(--login-grain-alt-b)) 884px 524px / 3px 1px no-repeat,
-    linear-gradient(var(--login-grain), var(--login-grain)) 1033px 607px / 2px 1px no-repeat,
-    linear-gradient(var(--login-grain-alt-a), var(--login-grain-alt-a)) 1182px 690px / 1px 1px no-repeat,
-    linear-gradient(var(--login-grain-alt-b), var(--login-grain-alt-b)) 1331px 773px / 1px 2px no-repeat,
-    linear-gradient(var(--login-grain), var(--login-grain)) 1480px 856px / 2px 1px no-repeat,
-    linear-gradient(var(--login-grain-alt-a), var(--login-grain-alt-a)) 1629px 939px / 3px 1px no-repeat,
-    linear-gradient(var(--login-grain-alt-b), var(--login-grain-alt-b)) 1778px 67px / 1px 1px no-repeat;
+    linear-gradient(var(--cp-login-grain-color), var(--cp-login-grain-color)) 139px 109px / 3px 2px no-repeat,
+    linear-gradient(var(--cp-login-grain-primary-color), var(--cp-login-grain-primary-color)) 288px 192px / 1px 1px
+      no-repeat,
+    linear-gradient(var(--cp-login-grain-secondary-color), var(--cp-login-grain-secondary-color)) 437px 275px / 1px 1px
+      no-repeat,
+    linear-gradient(var(--cp-login-grain-color), var(--cp-login-grain-color)) 586px 358px / 2px 1px no-repeat,
+    linear-gradient(var(--cp-login-grain-primary-color), var(--cp-login-grain-primary-color)) 735px 441px / 1px 2px
+      no-repeat,
+    linear-gradient(var(--cp-login-grain-secondary-color), var(--cp-login-grain-secondary-color)) 884px 524px / 3px 1px
+      no-repeat,
+    linear-gradient(var(--cp-login-grain-color), var(--cp-login-grain-color)) 1033px 607px / 2px 1px no-repeat,
+    linear-gradient(var(--cp-login-grain-primary-color), var(--cp-login-grain-primary-color)) 1182px 690px / 1px 1px
+      no-repeat,
+    linear-gradient(var(--cp-login-grain-secondary-color), var(--cp-login-grain-secondary-color)) 1331px 773px / 1px 2px
+      no-repeat,
+    linear-gradient(var(--cp-login-grain-color), var(--cp-login-grain-color)) 1480px 856px / 2px 1px no-repeat,
+    linear-gradient(var(--cp-login-grain-primary-color), var(--cp-login-grain-primary-color)) 1629px 939px / 3px 1px
+      no-repeat,
+    linear-gradient(var(--cp-login-grain-secondary-color), var(--cp-login-grain-secondary-color)) 1778px 67px / 1px 1px
+      no-repeat;
 }
 
 .login-protocol-stack {
@@ -272,7 +280,7 @@ const routeClusters: readonly RouteCluster[] = [
   display: grid;
   gap: 8px;
   width: 156px;
-  color: var(--login-stack-text);
+  color: var(--cp-login-stack-text-color);
   font-family: var(--font-mono);
   font-size: 11px;
   font-weight: 500;
@@ -282,13 +290,13 @@ const routeClusters: readonly RouteCluster[] = [
 .login-protocol-stack--ingress {
   top: 36.1111%;
   left: 6.5625%;
-  --login-stack-item-opacity: var(--login-stack-opacity);
+  --cp-login-stack-item-opacity: var(--cp-login-stack-opacity);
 }
 
 .login-protocol-stack--upstream {
   top: 36.1111%;
   right: 3.4375%;
-  --login-stack-item-opacity: var(--login-stack-upstream-opacity);
+  --cp-login-stack-item-opacity: var(--cp-login-stack-upstream-opacity);
 }
 
 .login-topology {
@@ -309,15 +317,15 @@ const routeClusters: readonly RouteCluster[] = [
 }
 
 .login-route-line--bundle {
-  stroke: var(--login-route-bundle);
+  stroke: var(--cp-login-route-bundle-color);
 }
 
 .login-route-line--stream {
-  stroke: var(--login-route-stream);
+  stroke: var(--cp-login-route-stream-color);
 }
 
 .login-route-line--audit {
-  stroke: var(--login-route-audit);
+  stroke: var(--cp-login-route-audit-color);
 }
 
 .login-particle-tracks path {
@@ -327,15 +335,15 @@ const routeClusters: readonly RouteCluster[] = [
 
 .login-particle {
   opacity: 0;
-  filter: drop-shadow(0 0 8px var(--login-particle-glow));
+  filter: drop-shadow(0 0 8px var(--cp-login-particle-glow-color));
 }
 
 .login-particle circle {
-  fill: var(--login-particle);
+  fill: var(--cp-login-particle-color);
 }
 
 .login-packets--semantic circle {
-  fill: var(--login-semantic);
+  fill: var(--cp-login-semantic-color);
 }
 
 .login-route-cluster--edge {
diff --git a/frontend/src/views/login/components/LoginPanel.vue b/frontend/src/views/login/components/LoginPanel.vue
index 19cef0085..ecfabce69 100644
--- a/frontend/src/views/login/components/LoginPanel.vue
+++ b/frontend/src/views/login/components/LoginPanel.vue
@@ -2,6 +2,7 @@
 import { ArrowRight, CircleAlert, Eye, EyeOff, KeyRound, Mail, Moon, Sun } from '@lucide/vue'
 import { computed, shallowRef } from 'vue'
 
+import AppBrandMark from '@/components/AppBrandMark.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 import BaseCard from '@/components/base/BaseCard.vue'
 import BaseIconButton from '@/components/base/BaseIconButton.vue'
@@ -58,21 +59,16 @@ function togglePasswordVisible(): void {
     <header class="flex min-w-0 items-center justify-between gap-4.5 max-[560px]:gap-3.5">
       <div class="flex min-w-0 items-center gap-3">
         <BaseMotionIcon aria-hidden="true" variant="brand" class="login-logo">
-          <img
-            src="/favicon.svg"
-            alt=""
-            class="block size-9.5 select-none"
-            draggable="false"
-          >
+          <AppBrandMark class="block size-9.5 select-none" />
         </BaseMotionIcon>
         <span class="grid min-w-0 gap-1">
           <strong
-            class="text-[17px] leading-[1.12] font-semibold text-(--login-brand-title) max-[560px]:text-[15px]"
+            class="text-[17px] leading-[1.12] font-semibold text-(--cp-login-brand-title-color) max-[560px]:text-cp-xl"
           >
             Codex Proxy RS
           </strong>
           <span
-            class="font-mono text-[10px] leading-[1.2] font-normal text-(--login-brand-caption)"
+            class="font-mono text-[10px] leading-[1.2] font-normal text-(--cp-login-brand-caption-color)"
           >
             ADMIN REALM
           </span>
@@ -96,11 +92,11 @@ function togglePasswordVisible(): void {
     <section class="grid min-w-0 gap-1.5" aria-labelledby="login-title">
       <h1
         id="login-title"
-        class="m-0 text-[34px] leading-[1.02] font-semibold text-(--login-title) max-[560px]:text-[30px]"
+        class="m-0 text-[34px] leading-[1.02] font-semibold text-(--cp-login-title-color) max-[560px]:text-[30px]"
       >
         控制台登录
       </h1>
-      <p class="m-0 -ml-2 text-sm leading-[1.45] font-normal text-(--login-description)">
+      <p class="m-0 -ml-2 text-sm leading-[1.45] font-normal text-(--cp-login-description-color)">
         「 欢迎回来，登录以开始您的数据之旅 」
       </p>
     </section>
@@ -112,7 +108,7 @@ function togglePasswordVisible(): void {
       </div>
 
       <div class="grid min-w-0 gap-2">
-        <span class="text-[13px] leading-[1.1] font-bold text-(--login-label)">管理员账号</span>
+        <span class="text-cp leading-[1.1] font-bold text-(--cp-login-label-color)">管理员账号</span>
         <BaseInput
           v-model="username"
           name="username"
@@ -127,7 +123,7 @@ function togglePasswordVisible(): void {
       </div>
 
       <div class="grid min-w-0 gap-2">
-        <span class="text-[13px] leading-[1.1] font-bold text-(--login-label)">访问密钥</span>
+        <span class="text-cp leading-[1.1] font-bold text-(--cp-login-label-color)">访问密钥</span>
         <BaseInput
           v-model="password"
           name="password"
@@ -174,42 +170,36 @@ function togglePasswordVisible(): void {
 
 <style scoped>
 .login-form {
-  --cp-bg-surface: transparent;
-  --cp-bg-subtle: var(--login-toggle-bg);
-  --cp-bg-muted: var(--login-input-bg);
-  --cp-text-primary: var(--login-title);
-  --cp-text-secondary: var(--login-description);
-  --cp-text-muted: var(--login-placeholder);
-  --cp-accent: var(--login-button);
-  --cp-accent-hover: var(--login-button-hover);
-  --cp-accent-pressed: var(--login-button-active);
-  --cp-accent-border: var(--login-input-icon);
-  --cp-accent-on: var(--cp-white);
-  --cp-info: var(--login-button);
-  --cp-info-hover: var(--login-button-hover);
-  --cp-info-pressed: var(--login-button-active);
-  --cp-info-on: var(--cp-white);
-  --cp-info-border: var(--login-input-icon);
-  --cp-danger-bg: var(--login-error-bg);
-  --cp-danger-border: transparent;
-  --cp-danger-text: var(--login-error-text);
-  --cp-danger: var(--login-error-icon);
-  --cp-disabled-bg: var(--login-disabled-bg);
-  --cp-disabled-text: var(--login-disabled-text);
-  --cp-disabled-icon: var(--login-disabled-text);
-  --cp-input-current-bg: var(--login-input-bg);
-  --cp-input-current-bg-hover: var(--login-input-bg-hover);
-  --cp-input-soft-bg-focus: var(--login-input-focus);
-  --cp-radius-control-sm: 6px;
-  --cp-radius-control: 6px;
-  --cp-shadow-control: none;
-  --cp-shadow-popover: none;
-  --cp-control-height-md: 43px;
+  --cp-color-bg-container: transparent;
+  --cp-color-fill-quaternary: var(--cp-login-toggle-bg);
+  --cp-color-fill-tertiary: var(--cp-login-input-bg);
+  --cp-color-text: var(--cp-login-title-color);
+  --cp-color-text-secondary: var(--cp-login-description-color);
+  --cp-color-text-quaternary: var(--cp-login-placeholder-color);
+  --cp-color-error-bg: var(--cp-login-error-bg);
+  --cp-color-error-border: transparent;
+  --cp-color-error-text: var(--cp-login-error-text-color);
+  --cp-color-error: var(--cp-login-error-icon-color);
+  --cp-color-bg-container-disabled: var(--cp-login-disabled-bg);
+  --cp-color-text-disabled: var(--cp-login-disabled-text-color);
+  --cp-input-bg: var(--cp-login-input-bg);
+  --cp-input-hover-bg: var(--cp-login-input-hover-bg);
+  --cp-input-active-bg: var(--cp-login-input-active-bg);
+  --cp-border-radius-sm: 6px;
+  --cp-border-radius: 6px;
+  --cp-box-shadow-tertiary: none;
+  --cp-box-shadow: none;
+  --cp-control-height: 43px;
 
   background:
-    linear-gradient(118deg, var(--login-form-bg-a), var(--login-form-bg-b) 56%, var(--login-form-bg-c)),
-    var(--login-form-bg-b);
-  box-shadow: 0 18px 38px -20px var(--login-form-shadow);
+    linear-gradient(
+      118deg,
+      var(--cp-login-panel-bg-start),
+      var(--cp-login-panel-bg-middle) 56%,
+      var(--cp-login-panel-bg-end)
+    ),
+    var(--cp-login-panel-bg-middle);
+  box-shadow: 0 18px 38px -20px var(--cp-login-panel-shadow-color);
   backdrop-filter: blur(18px) saturate(1.08);
   -webkit-backdrop-filter: blur(18px) saturate(1.08);
 }
@@ -220,7 +210,12 @@ function togglePasswordVisible(): void {
   left: 22px;
   width: calc(100% - 44px);
   height: 2px;
-  background: linear-gradient(90deg, var(--cp-transparent), var(--login-form-line), var(--cp-transparent));
+  background: linear-gradient(
+    90deg,
+    var(--cp-color-transparent),
+    var(--cp-login-panel-line-color),
+    var(--cp-color-transparent)
+  );
   opacity: 0.42;
   pointer-events: none;
 }
@@ -237,7 +232,7 @@ function togglePasswordVisible(): void {
   align-items: center;
   justify-content: center;
   border-radius: 8px;
-  color: var(--login-logo-text);
+  color: var(--cp-login-logo-color);
   font-family: var(--font-mono);
   font-size: 12px;
   font-weight: 600;
@@ -255,8 +250,8 @@ function togglePasswordVisible(): void {
   padding: 0;
   border: 0;
   border-radius: 20px;
-  background: var(--login-toggle-bg);
-  color: var(--login-toggle-moon);
+  background: var(--cp-login-toggle-bg);
+  color: var(--cp-login-toggle-moon-color);
   cursor: pointer;
   outline: none;
   transition:
@@ -265,7 +260,7 @@ function togglePasswordVisible(): void {
 }
 
 .login-theme-toggle:focus-visible {
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--login-input-icon) 46%, transparent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cp-login-input-icon-color) 46%, transparent);
 }
 
 .login-theme-toggle > svg {
@@ -274,11 +269,11 @@ function togglePasswordVisible(): void {
 }
 
 .login-theme-toggle > svg:first-child {
-  color: var(--login-toggle-sun);
+  color: var(--cp-login-toggle-sun-color);
 }
 
 .login-theme-toggle > svg:last-child {
-  color: var(--login-toggle-moon);
+  color: var(--cp-login-toggle-moon-color);
 }
 
 .login-theme-knob {
@@ -288,8 +283,8 @@ function togglePasswordVisible(): void {
   width: 24px;
   height: 24px;
   border-radius: 50%;
-  background: var(--login-toggle-knob);
-  box-shadow: 0 0 10px var(--login-toggle-shadow);
+  background: var(--cp-login-toggle-knob);
+  box-shadow: 0 0 10px var(--cp-login-toggle-shadow-color);
   transition: transform 0.2s ease;
 }
 
@@ -303,40 +298,40 @@ function togglePasswordVisible(): void {
   align-items: center;
   gap: 10px;
   border-radius: 6px;
-  background: var(--login-error-bg);
+  background: var(--cp-login-error-bg);
   padding: 0 12px;
-  color: var(--login-error-icon);
+  color: var(--cp-login-error-icon-color);
 }
 
 .login-error p {
   min-width: 0;
   margin: 0;
-  color: var(--login-error-text);
+  color: var(--cp-login-error-text-color);
   font-size: 12px;
   font-weight: 600;
   line-height: 1.35;
 }
 
 .login-password-toggle {
-  --cp-bg-subtle: color-mix(in srgb, var(--cp-input-context-bg-hover) 62%, transparent);
-  --cp-bg-muted: color-mix(in srgb, var(--cp-input-context-bg-hover) 88%, transparent);
+  --cp-color-fill-quaternary: color-mix(in srgb, var(--cp-input-hover-bg) 62%, transparent);
+  --cp-color-fill-tertiary: color-mix(in srgb, var(--cp-input-hover-bg) 88%, transparent);
 
-  color: var(--login-placeholder);
+  color: var(--cp-login-placeholder-color);
   border-radius: 6px;
 }
 
 .login-password-toggle:hover {
-  color: var(--login-title);
+  color: var(--cp-login-title-color);
 }
 
 .login-submit {
   width: 100%;
   height: 44px;
-  box-shadow: 0 14px 24px -18px var(--login-button-shadow);
+  box-shadow: 0 14px 24px -18px var(--cp-login-button-shadow-color);
 }
 
 .login-submit:disabled {
-  background: var(--login-disabled-bg);
+  background: var(--cp-login-disabled-bg);
   box-shadow: none;
   transform: none;
 }
diff --git a/frontend/src/views/login/index.vue b/frontend/src/views/login/index.vue
index 4d5deed8d..09f0f9545 100644
--- a/frontend/src/views/login/index.vue
+++ b/frontend/src/views/login/index.vue
@@ -4,16 +4,16 @@ import { computed, shallowRef } from 'vue'
 import { useRouter } from 'vue-router'
 
 import { useAuthStore } from '@/stores/modules/auth'
-import { useUiStore } from '@/stores/modules/ui'
+import { useThemeStore } from '@/stores/modules/theme'
 
 import LoginBackground from './components/LoginBackground.vue'
 import LoginPanel from './components/LoginPanel.vue'
 
 const router = useRouter()
 const authStore = useAuthStore()
-const uiStore = useUiStore()
-const { effectiveTheme } = storeToRefs(uiStore)
-const { toggleTheme } = uiStore
+const themeStore = useThemeStore()
+const { effectiveTheme } = storeToRefs(themeStore)
+const { toggleTheme } = themeStore
 
 const username = shallowRef('')
 const password = shallowRef('')
@@ -51,7 +51,7 @@ async function handleSubmit(): Promise<void> {
 </script>
 
 <template>
-  <main class="login-page relative isolate min-h-dvh overflow-hidden text-(--login-title)">
+  <main class="login-page relative isolate min-h-dvh overflow-hidden text-(--cp-login-title-color)">
     <LoginBackground />
 
     <section
@@ -74,126 +74,123 @@ async function handleSubmit(): Promise<void> {
 
 <style scoped>
 .login-page {
-  --login-page-a: color-mix(in srgb, var(--cp-bg-page) 82%, var(--cp-white));
-  --login-page-b: color-mix(in srgb, var(--cp-bg-page) 72%, var(--cp-info-bg));
-  --login-page-c: color-mix(in srgb, var(--cp-bg-muted) 78%, var(--cp-info-bg));
-  --login-base-a: var(--cp-bg-surface);
-  --login-base-b: color-mix(in srgb, var(--cp-bg-page) 70%, var(--cp-white));
-  --login-base-c: color-mix(in srgb, var(--cp-bg-muted) 78%, var(--cp-info-bg));
-  --login-edge-mid: color-mix(in srgb, var(--cp-border-primary) 55%, transparent);
-  --login-edge-end: color-mix(in srgb, var(--cp-text-secondary) 32%, transparent);
-  --login-grid: color-mix(in srgb, var(--cp-text-secondary) 5%, transparent);
-  --login-striation: color-mix(in srgb, var(--cp-text-secondary) 18%, transparent);
-  --login-grain: color-mix(in srgb, var(--cp-text-secondary) 13%, transparent);
-  --login-grain-alt-a: color-mix(in srgb, var(--cp-info) 11%, transparent);
-  --login-grain-alt-b: color-mix(in srgb, var(--cp-normal) 9%, transparent);
-  --login-route-bundle: color-mix(in srgb, var(--cp-text-secondary) 20%, transparent);
-  --login-route-stream: color-mix(in srgb, var(--cp-info) 17%, transparent);
-  --login-route-audit: color-mix(in srgb, var(--cp-text-tertiary) 18%, transparent);
-  --login-semantic: color-mix(in srgb, var(--cp-info) 26%, transparent);
-  --login-particle: var(--cp-brand-accent);
-  --login-particle-glow: color-mix(in srgb, var(--cp-info) 62%, transparent);
-  --login-watermark: color-mix(in srgb, var(--cp-text-primary) 55%, transparent);
-  --login-stack-text: color-mix(in srgb, var(--cp-text-primary) 84%, transparent);
-  --login-stack-bg: color-mix(in srgb, var(--cp-bg-surface) 72%, transparent);
-  --login-stack-dot: color-mix(in srgb, var(--cp-info) 62%, transparent);
-  --login-stack-opacity: 0.55;
-  --login-stack-upstream-opacity: 0.62;
-  --login-cluster-bg: color-mix(in srgb, var(--cp-bg-surface) 72%, transparent);
-  --login-cluster-pulse: color-mix(in srgb, var(--cp-info) 66%, transparent);
-  --login-cluster-text: color-mix(in srgb, var(--cp-text-primary) 78%, transparent);
-  --login-form-bg-a: color-mix(in srgb, var(--cp-bg-surface) 95%, transparent);
-  --login-form-bg-b: color-mix(in srgb, var(--cp-bg-surface) 82%, var(--cp-info-bg));
-  --login-form-bg-c: color-mix(in srgb, var(--cp-bg-muted) 78%, var(--cp-info-bg));
-  --login-form-shadow: color-mix(in srgb, var(--cp-text-primary) 20%, transparent);
-  --login-form-line: color-mix(in srgb, var(--cp-info-border) 54%, transparent);
-  --login-logo-bg: var(--cp-brand-mark-bg);
-  --login-logo-text: var(--cp-brand-accent);
-  --login-title: var(--cp-text-primary);
-  --login-brand-title: var(--cp-text-strong);
-  --login-brand-caption: var(--cp-text-secondary);
-  --login-description: color-mix(in srgb, var(--cp-text-secondary) 82%, var(--cp-text-primary));
-  --login-label: color-mix(in srgb, var(--cp-text-primary) 84%, var(--cp-text-secondary));
-  --login-input-bg: color-mix(in srgb, var(--cp-input-soft-bg) 82%, var(--cp-bg-surface));
-  --login-input-bg-hover: color-mix(in srgb, var(--cp-input-soft-bg-hover) 86%, var(--cp-bg-surface));
-  --login-input-focus: var(--cp-input-soft-bg-focus);
-  --login-input-icon: var(--cp-info);
-  --login-placeholder: var(--cp-text-secondary);
-  --login-error-bg: var(--cp-danger-bg);
-  --login-error-icon: var(--cp-danger);
-  --login-error-text: var(--cp-danger-text);
-  --login-button: var(--cp-brand-accent);
-  --login-button-hover: var(--cp-info-hover);
-  --login-button-active: var(--cp-info-pressed);
-  --login-button-shadow: color-mix(in srgb, var(--cp-brand-accent) 30%, transparent);
-  --login-footer: color-mix(in srgb, var(--cp-text-secondary) 82%, var(--cp-text-tertiary));
-  --login-toggle-bg: color-mix(in srgb, var(--cp-bg-muted) 74%, transparent);
-  --login-toggle-sun: var(--login-logo-text);
-  --login-toggle-moon: var(--cp-text-secondary);
-  --login-toggle-knob: var(--cp-bg-surface);
-  --login-toggle-shadow: color-mix(in srgb, var(--cp-info) 20%, transparent);
-  --login-disabled-bg: var(--cp-disabled-bg);
-  --login-disabled-text: var(--cp-disabled-text);
+  --cp-login-page-bg-start: color-mix(in srgb, var(--cp-color-bg-layout) 82%, var(--cp-color-white));
+  --cp-login-page-bg-middle: color-mix(in srgb, var(--cp-color-bg-layout) 72%, var(--cp-control-item-bg-active));
+  --cp-login-page-bg-end: color-mix(in srgb, var(--cp-color-fill-tertiary) 78%, var(--cp-control-item-bg-active));
+  --cp-login-canvas-bg-start: var(--cp-color-bg-container);
+  --cp-login-canvas-bg-middle: color-mix(in srgb, var(--cp-color-bg-layout) 70%, var(--cp-color-white));
+  --cp-login-canvas-bg-end: color-mix(in srgb, var(--cp-color-fill-tertiary) 78%, var(--cp-control-item-bg-active));
+  --cp-login-edge-color-middle: color-mix(in srgb, var(--cp-color-border) 55%, transparent);
+  --cp-login-edge-color-end: color-mix(in srgb, var(--cp-color-text-secondary) 32%, transparent);
+  --cp-login-grid-color: color-mix(in srgb, var(--cp-color-text-secondary) 5%, transparent);
+  --cp-login-striation-color: color-mix(in srgb, var(--cp-color-text-secondary) 18%, transparent);
+  --cp-login-grain-color: color-mix(in srgb, var(--cp-color-text-secondary) 13%, transparent);
+  --cp-login-grain-primary-color: color-mix(in srgb, var(--cp-color-primary-text) 11%, transparent);
+  --cp-login-grain-secondary-color: color-mix(in srgb, var(--cp-color-status-normal) 9%, transparent);
+  --cp-login-route-bundle-color: color-mix(in srgb, var(--cp-color-text-secondary) 20%, transparent);
+  --cp-login-route-stream-color: color-mix(in srgb, var(--cp-color-primary-text) 17%, transparent);
+  --cp-login-route-audit-color: color-mix(in srgb, var(--cp-color-text-tertiary) 18%, transparent);
+  --cp-login-semantic-color: color-mix(in srgb, var(--cp-color-primary-text) 26%, transparent);
+  --cp-login-particle-color: var(--cp-color-primary-text);
+  --cp-login-particle-glow-color: color-mix(in srgb, var(--cp-color-primary-text) 62%, transparent);
+  --cp-login-watermark-color: color-mix(in srgb, var(--cp-color-text) 55%, transparent);
+  --cp-login-stack-text-color: color-mix(in srgb, var(--cp-color-text) 84%, transparent);
+  --cp-login-stack-bg: color-mix(in srgb, var(--cp-color-bg-container) 72%, transparent);
+  --cp-login-stack-dot-color: color-mix(in srgb, var(--cp-color-primary-text) 62%, transparent);
+  --cp-login-stack-opacity: 0.55;
+  --cp-login-stack-upstream-opacity: 0.62;
+  --cp-login-cluster-bg: color-mix(in srgb, var(--cp-color-bg-container) 72%, transparent);
+  --cp-login-cluster-pulse-color: color-mix(in srgb, var(--cp-color-primary-text) 66%, transparent);
+  --cp-login-cluster-text-color: color-mix(in srgb, var(--cp-color-text) 78%, transparent);
+  --cp-login-panel-bg-start: color-mix(in srgb, var(--cp-color-bg-container) 95%, transparent);
+  --cp-login-panel-bg-middle: color-mix(in srgb, var(--cp-color-bg-container) 82%, var(--cp-control-item-bg-active));
+  --cp-login-panel-bg-end: color-mix(in srgb, var(--cp-color-fill-tertiary) 78%, var(--cp-control-item-bg-active));
+  --cp-login-panel-shadow-color: color-mix(in srgb, var(--cp-color-text) 20%, transparent);
+  --cp-login-panel-line-color: color-mix(in srgb, var(--cp-color-primary-border) 54%, transparent);
+  --cp-login-logo-color: var(--cp-color-primary-text);
+  --cp-login-title-color: var(--cp-color-text);
+  --cp-login-brand-title-color: var(--cp-color-text-heading);
+  --cp-login-brand-caption-color: var(--cp-color-text-secondary);
+  --cp-login-description-color: color-mix(in srgb, var(--cp-color-text-secondary) 82%, var(--cp-color-text));
+  --cp-login-label-color: color-mix(in srgb, var(--cp-color-text) 84%, var(--cp-color-text-secondary));
+  --cp-login-input-bg: color-mix(in srgb, var(--cp-input-bg) 82%, var(--cp-color-bg-container));
+  --cp-login-input-hover-bg: color-mix(in srgb, var(--cp-input-hover-bg) 86%, var(--cp-color-bg-container));
+  --cp-login-input-active-bg: var(--cp-input-active-bg);
+  --cp-login-input-icon-color: var(--cp-color-primary-text);
+  --cp-login-placeholder-color: var(--cp-color-text-secondary);
+  --cp-login-error-bg: var(--cp-color-error-bg);
+  --cp-login-error-icon-color: var(--cp-color-error);
+  --cp-login-error-text-color: var(--cp-color-error-text);
+  --cp-login-button-shadow-color: color-mix(in srgb, var(--cp-color-primary) 30%, transparent);
+  --cp-login-footer-color: color-mix(in srgb, var(--cp-color-text-secondary) 82%, var(--cp-color-text-tertiary));
+  --cp-login-toggle-bg: color-mix(in srgb, var(--cp-color-fill-tertiary) 74%, transparent);
+  --cp-login-toggle-sun-color: var(--cp-login-logo-color);
+  --cp-login-toggle-moon-color: var(--cp-color-text-secondary);
+  --cp-login-toggle-knob: var(--cp-color-bg-container);
+  --cp-login-toggle-shadow-color: color-mix(in srgb, var(--cp-color-primary-text) 20%, transparent);
+  --cp-login-disabled-bg: var(--cp-color-bg-container-disabled);
+  --cp-login-disabled-text-color: var(--cp-color-text-disabled);
 
-  background: linear-gradient(118deg, var(--login-page-a), var(--login-page-b) 52%, var(--login-page-c));
+  background: linear-gradient(
+    118deg,
+    var(--cp-login-page-bg-start),
+    var(--cp-login-page-bg-middle) 52%,
+    var(--cp-login-page-bg-end)
+  );
   isolation: isolate;
 }
 
 :global(html[data-theme='dark'] .login-page) {
-  --login-page-a: color-mix(in srgb, var(--cp-bg-page) 86%, var(--cp-bg-dark));
-  --login-page-b: color-mix(in srgb, var(--cp-bg-surface) 68%, var(--cp-bg-page));
-  --login-page-c: color-mix(in srgb, var(--cp-bg-dark) 76%, var(--cp-normal-bg));
-  --login-base-a: color-mix(in srgb, var(--cp-bg-surface) 82%, var(--cp-bg-muted));
-  --login-base-b: color-mix(in srgb, var(--cp-bg-page) 88%, var(--cp-bg-surface));
-  --login-base-c: color-mix(in srgb, var(--cp-bg-dark) 88%, var(--cp-bg-page));
-  --login-edge-mid: color-mix(in srgb, var(--cp-bg-dark) 32%, transparent);
-  --login-edge-end: color-mix(in srgb, var(--cp-bg-dark) 66%, transparent);
-  --login-grid: color-mix(in srgb, var(--cp-info-text) 5%, transparent);
-  --login-striation: color-mix(in srgb, var(--cp-info-text) 5%, transparent);
-  --login-grain: color-mix(in srgb, var(--cp-text-secondary) 9%, transparent);
-  --login-grain-alt-a: color-mix(in srgb, var(--cp-info-text) 7%, transparent);
-  --login-grain-alt-b: color-mix(in srgb, var(--cp-normal-text) 5%, transparent);
-  --login-route-bundle: color-mix(in srgb, var(--cp-info-text) 17%, transparent);
-  --login-route-stream: color-mix(in srgb, var(--cp-info-text) 14%, transparent);
-  --login-route-audit: color-mix(in srgb, var(--cp-text-secondary) 12%, transparent);
-  --login-semantic: color-mix(in srgb, var(--cp-info-text) 27%, transparent);
-  --login-particle: color-mix(in srgb, var(--cp-info-text) 72%, var(--cp-normal));
-  --login-particle-glow: color-mix(in srgb, var(--cp-info-text) 80%, transparent);
-  --login-watermark: color-mix(in srgb, var(--cp-info-text) 40%, transparent);
-  --login-stack-text: color-mix(in srgb, var(--cp-text-primary) 80%, transparent);
-  --login-stack-bg: color-mix(in srgb, var(--cp-bg-surface) 54%, transparent);
-  --login-stack-dot: color-mix(in srgb, var(--cp-info-text) 72%, transparent);
-  --login-stack-opacity: 0.76;
-  --login-stack-upstream-opacity: 0.76;
-  --login-cluster-bg: color-mix(in srgb, var(--cp-bg-surface) 52%, transparent);
-  --login-cluster-pulse: color-mix(in srgb, var(--cp-info-text) 70%, transparent);
-  --login-cluster-text: color-mix(in srgb, var(--cp-text-primary) 66%, transparent);
-  --login-form-bg-a: color-mix(in srgb, var(--cp-bg-muted) 82%, transparent);
-  --login-form-bg-b: color-mix(in srgb, var(--cp-bg-surface) 86%, transparent);
-  --login-form-bg-c: color-mix(in srgb, var(--cp-bg-page) 90%, transparent);
-  --login-form-shadow: color-mix(in srgb, var(--cp-bg-dark) 70%, transparent);
-  --login-form-line: color-mix(in srgb, var(--cp-info-text) 66%, transparent);
-  --login-logo-bg: var(--cp-brand-mark-bg);
-  --login-logo-text: var(--cp-info-text);
-  --login-title: var(--cp-text-strong);
-  --login-brand-title: var(--cp-white);
-  --login-brand-caption: var(--cp-text-tertiary);
-  --login-description: color-mix(in srgb, var(--cp-text-secondary) 82%, var(--cp-text-primary));
-  --login-label: color-mix(in srgb, var(--cp-text-primary) 86%, var(--cp-white));
-  --login-input-bg: color-mix(in srgb, var(--cp-bg-dark) 58%, transparent);
-  --login-input-bg-hover: color-mix(in srgb, var(--cp-bg-muted) 62%, transparent);
-  --login-input-focus: color-mix(in srgb, var(--cp-bg-muted) 72%, transparent);
-  --login-input-icon: var(--cp-info-text);
-  --login-placeholder: var(--cp-text-muted);
-  --login-button: color-mix(in srgb, var(--cp-info) 76%, var(--cp-normal));
-  --login-button-hover: color-mix(in srgb, var(--cp-info-hover) 78%, var(--cp-normal-hover));
-  --login-button-active: color-mix(in srgb, var(--cp-info-pressed) 78%, var(--cp-normal-pressed));
-  --login-button-shadow: color-mix(in srgb, var(--cp-info) 30%, transparent);
-  --login-footer: color-mix(in srgb, var(--cp-text-secondary) 80%, var(--cp-text-muted));
-  --login-toggle-bg: color-mix(in srgb, var(--cp-bg-surface) 84%, transparent);
-  --login-toggle-sun: var(--cp-text-tertiary);
-  --login-toggle-moon: var(--cp-white);
-  --login-toggle-knob: var(--login-button-hover);
-  --login-toggle-shadow: color-mix(in srgb, var(--cp-info) 30%, transparent);
+  --cp-login-page-bg-start: color-mix(in srgb, var(--cp-color-bg-layout) 86%, var(--cp-color-bg-spotlight));
+  --cp-login-page-bg-middle: color-mix(in srgb, var(--cp-color-bg-container) 68%, var(--cp-color-bg-layout));
+  --cp-login-page-bg-end: color-mix(in srgb, var(--cp-color-bg-spotlight) 76%, var(--cp-color-status-normal-bg));
+  --cp-login-canvas-bg-start: color-mix(in srgb, var(--cp-color-bg-container) 82%, var(--cp-color-fill-tertiary));
+  --cp-login-canvas-bg-middle: color-mix(in srgb, var(--cp-color-bg-layout) 88%, var(--cp-color-bg-container));
+  --cp-login-canvas-bg-end: color-mix(in srgb, var(--cp-color-bg-spotlight) 88%, var(--cp-color-bg-layout));
+  --cp-login-edge-color-middle: color-mix(in srgb, var(--cp-color-bg-spotlight) 32%, transparent);
+  --cp-login-edge-color-end: color-mix(in srgb, var(--cp-color-bg-spotlight) 66%, transparent);
+  --cp-login-grid-color: color-mix(in srgb, var(--cp-color-primary-text) 5%, transparent);
+  --cp-login-striation-color: color-mix(in srgb, var(--cp-color-primary-text) 5%, transparent);
+  --cp-login-grain-color: color-mix(in srgb, var(--cp-color-text-secondary) 9%, transparent);
+  --cp-login-grain-primary-color: color-mix(in srgb, var(--cp-color-primary-text) 7%, transparent);
+  --cp-login-grain-secondary-color: color-mix(in srgb, var(--cp-color-status-normal-text) 5%, transparent);
+  --cp-login-route-bundle-color: color-mix(in srgb, var(--cp-color-primary-text) 17%, transparent);
+  --cp-login-route-stream-color: color-mix(in srgb, var(--cp-color-primary-text) 14%, transparent);
+  --cp-login-route-audit-color: color-mix(in srgb, var(--cp-color-text-secondary) 12%, transparent);
+  --cp-login-semantic-color: color-mix(in srgb, var(--cp-color-primary-text) 27%, transparent);
+  --cp-login-particle-color: color-mix(in srgb, var(--cp-color-primary-text) 72%, var(--cp-color-status-normal));
+  --cp-login-particle-glow-color: color-mix(in srgb, var(--cp-color-primary-text) 80%, transparent);
+  --cp-login-watermark-color: color-mix(in srgb, var(--cp-color-primary-text) 40%, transparent);
+  --cp-login-stack-text-color: color-mix(in srgb, var(--cp-color-text) 80%, transparent);
+  --cp-login-stack-bg: color-mix(in srgb, var(--cp-color-bg-container) 54%, transparent);
+  --cp-login-stack-dot-color: color-mix(in srgb, var(--cp-color-primary-text) 72%, transparent);
+  --cp-login-stack-opacity: 0.76;
+  --cp-login-stack-upstream-opacity: 0.76;
+  --cp-login-cluster-bg: color-mix(in srgb, var(--cp-color-bg-container) 52%, transparent);
+  --cp-login-cluster-pulse-color: color-mix(in srgb, var(--cp-color-primary-text) 70%, transparent);
+  --cp-login-cluster-text-color: color-mix(in srgb, var(--cp-color-text) 66%, transparent);
+  --cp-login-panel-bg-start: color-mix(in srgb, var(--cp-color-fill-tertiary) 82%, transparent);
+  --cp-login-panel-bg-middle: color-mix(in srgb, var(--cp-color-bg-container) 86%, transparent);
+  --cp-login-panel-bg-end: color-mix(in srgb, var(--cp-color-bg-layout) 90%, transparent);
+  --cp-login-panel-shadow-color: color-mix(in srgb, var(--cp-color-bg-spotlight) 70%, transparent);
+  --cp-login-panel-line-color: color-mix(in srgb, var(--cp-color-primary-border) 66%, transparent);
+  --cp-login-logo-color: var(--cp-color-primary-text);
+  --cp-login-title-color: var(--cp-color-text-heading);
+  --cp-login-brand-title-color: var(--cp-color-white);
+  --cp-login-brand-caption-color: var(--cp-color-text-tertiary);
+  --cp-login-description-color: color-mix(in srgb, var(--cp-color-text-secondary) 82%, var(--cp-color-text));
+  --cp-login-label-color: color-mix(in srgb, var(--cp-color-text) 86%, var(--cp-color-white));
+  --cp-login-input-bg: color-mix(in srgb, var(--cp-color-bg-spotlight) 58%, transparent);
+  --cp-login-input-hover-bg: color-mix(in srgb, var(--cp-color-fill-tertiary) 62%, transparent);
+  --cp-login-input-active-bg: color-mix(in srgb, var(--cp-color-fill-tertiary) 72%, transparent);
+  --cp-login-input-icon-color: var(--cp-color-primary-text);
+  --cp-login-placeholder-color: var(--cp-color-text-quaternary);
+  --cp-login-button-shadow-color: color-mix(in srgb, var(--cp-color-primary) 30%, transparent);
+  --cp-login-footer-color: color-mix(in srgb, var(--cp-color-text-secondary) 80%, var(--cp-color-text-quaternary));
+  --cp-login-toggle-bg: color-mix(in srgb, var(--cp-color-bg-container) 84%, transparent);
+  --cp-login-toggle-sun-color: var(--cp-color-text-tertiary);
+  --cp-login-toggle-moon-color: var(--cp-color-white);
+  --cp-login-toggle-knob: var(--cp-color-primary-hover);
+  --cp-login-toggle-shadow-color: color-mix(in srgb, var(--cp-color-primary-text) 30%, transparent);
 }
 </style>
diff --git a/frontend/src/views/settings/components/AdminApiKeyCard.vue b/frontend/src/views/settings/components/AdminApiKeyCard.vue
index 5f73abbe5..aa5930003 100644
--- a/frontend/src/views/settings/components/AdminApiKeyCard.vue
+++ b/frontend/src/views/settings/components/AdminApiKeyCard.vue
@@ -58,21 +58,21 @@ const emit = defineEmits<{
 
     <div class="grid max-w-6xl gap-4">
       <div
-        class="flex min-h-16 items-center justify-between gap-4 rounded-cp-control bg-cp-subtle px-4 py-3"
+        class="flex min-h-16 items-center justify-between gap-4 rounded-cp bg-cp-fill-quaternary px-4 py-3"
       >
         <div class="flex min-w-0 items-center gap-3">
           <BaseMotionIcon
             aria-hidden="true"
-            class="inline-flex size-9 shrink-0 items-center justify-center rounded-cp-control bg-cp-surface text-cp-normal shadow-cp-control"
+            class="inline-flex size-9 shrink-0 items-center justify-center rounded-cp bg-cp-bg-container text-cp-status-normal shadow-cp-tertiary"
           >
             <KeyRound class="size-4" />
           </BaseMotionIcon>
           <div class="min-w-0">
-            <p class="m-0 text-[13px] leading-[1.15] font-bold text-cp-primary">
+            <p class="m-0 text-cp leading-[1.15] font-bold text-cp-text">
               {{ status.exists ? '已启用' : '未生成' }}
             </p>
             <p
-              class="mt-1.5 mb-0 truncate text-[12px] leading-[1.15] font-emphasis text-cp-secondary"
+              class="mt-1.5 mb-0 truncate text-cp-sm leading-[1.15] font-emphasis text-cp-text-secondary"
             >
               {{
                 loading
@@ -87,12 +87,12 @@ const emit = defineEmits<{
       </div>
 
       <div v-if="generatedKey" class="grid gap-2">
-        <p class="m-0 text-[13px] leading-[1.15] font-emphasis text-cp-secondary">
+        <p class="m-0 text-cp leading-[1.15] font-emphasis text-cp-text-secondary">
           完整 Key 仅显示一次，请立即保存
         </p>
         <div class="flex min-w-0 items-center gap-2">
           <code
-            class="min-w-0 flex-1 rounded-cp-control bg-cp-subtle px-3 py-2.5 font-mono text-[12px] leading-normal font-emphasis break-all text-cp-primary"
+            class="min-w-0 flex-1 rounded-cp bg-cp-fill-quaternary px-3 py-2.5 font-mono text-cp-sm leading-normal font-emphasis break-all text-cp-text"
           >
             {{ generatedKey }}
           </code>
diff --git a/frontend/src/views/settings/components/ModelAliasesCard.vue b/frontend/src/views/settings/components/ModelAliasesCard.vue
index 50c182096..fc7389952 100644
--- a/frontend/src/views/settings/components/ModelAliasesCard.vue
+++ b/frontend/src/views/settings/components/ModelAliasesCard.vue
@@ -35,28 +35,28 @@ const emit = defineEmits<{
           </template>
           添加映射
         </BaseButton>
-        <span v-if="error" class="text-xs font-emphasis text-cp-danger-text">{{ error }}</span>
+        <span v-if="error" class="text-xs font-emphasis text-cp-error-text">{{ error }}</span>
       </div>
 
-      <div class="flex items-center gap-2 text-[12px] font-emphasis text-cp-secondary">
-        <GitBranch class="size-4 text-cp-info" />
+      <div class="flex items-center gap-2 text-cp-sm font-emphasis text-cp-text-secondary">
+        <GitBranch class="size-4 text-cp-primary-text" />
         全局模型映射
       </div>
 
       <div
         v-if="loading"
-        class="rounded-cp-control bg-cp-subtle px-4 py-4 text-[13px] font-emphasis text-cp-muted-text"
+        class="rounded-cp bg-cp-fill-quaternary px-4 py-4 text-cp font-emphasis text-cp-text-quaternary"
       >
         正在加载模型映射...
       </div>
       <div
         v-else-if="mappings.length === 0"
-        class="rounded-cp-control bg-cp-subtle px-4 py-4 text-[13px] font-emphasis text-cp-muted-text"
+        class="rounded-cp bg-cp-fill-quaternary px-4 py-4 text-cp font-emphasis text-cp-text-quaternary"
       >
         暂无模型映射
       </div>
       <div v-else class="grid gap-3">
-        <div class="grid grid-cols-[1fr_auto_1fr_auto] items-center gap-3 px-1 text-[12px] font-bold text-cp-muted-text">
+        <div class="grid grid-cols-[1fr_auto_1fr_auto] items-center gap-3 px-1 text-cp-sm font-bold text-cp-text-quaternary">
           <span>请求模型</span>
           <span />
           <span>上游模型</span>
@@ -65,7 +65,7 @@ const emit = defineEmits<{
         <div
           v-for="(row, index) in mappings"
           :key="index"
-          class="grid grid-cols-[1fr_auto_1fr_auto] items-center gap-3 rounded-cp-surface bg-cp-subtle p-3"
+          class="grid grid-cols-[1fr_auto_1fr_auto] items-center gap-3 rounded-cp-card bg-cp-fill-quaternary p-3"
         >
           <BaseInput
             :model-value="row.requestedModel"
@@ -73,7 +73,7 @@ const emit = defineEmits<{
             aria-label="请求模型"
             @update:model-value="emit('updateMapping', index, 'requestedModel', $event)"
           />
-          <span class="text-cp-muted-text">→</span>
+          <span class="text-cp-text-quaternary">→</span>
           <BaseInput
             :model-value="row.upstreamModel"
             placeholder="gpt-5.5"
@@ -85,7 +85,7 @@ const emit = defineEmits<{
             label="删除映射"
             @click="emit('removeMapping', index)"
           >
-            <Trash2 class="size-4 text-cp-danger" />
+            <Trash2 class="size-4 text-cp-error" />
           </BaseIconButton>
         </div>
       </div>
diff --git a/frontend/src/views/settings/components/RotationStrategyCard.vue b/frontend/src/views/settings/components/RotationStrategyCard.vue
index b01bef0db..e26b3987c 100644
--- a/frontend/src/views/settings/components/RotationStrategyCard.vue
+++ b/frontend/src/views/settings/components/RotationStrategyCard.vue
@@ -22,27 +22,27 @@ const model = defineModel<RotationStrategy | ''>({ required: true })
         v-for="option in options"
         :key="option.value"
         type="button"
-        class="min-h-25 cursor-pointer rounded-cp-control border-0 px-4 py-3.5 text-left shadow-cp-input outline-none transition-[background-color,box-shadow,color] duration-160 focus-visible:ring-2 focus-visible:ring-cp-info-border"
+        class="min-h-25 cursor-pointer rounded-cp border-0 px-4 py-3.5 text-left shadow-cp-input outline-none transition-[background-color,box-shadow,color] duration-160 focus-visible:ring-2 focus-visible:ring-cp-control-outline"
         :class="
           model === option.value
-            ? 'bg-cp-info-bg text-cp-info-text shadow-cp-control'
-            : 'bg-(--cp-input-current-bg,var(--cp-input-context-bg)) text-cp-primary hover:bg-(--cp-input-current-bg-hover,var(--cp-input-context-bg-hover)) hover:shadow-cp-input-hover'
+            ? 'bg-cp-control-item-bg-active text-cp-primary-text shadow-cp-tertiary'
+            : 'bg-(--cp-input-bg,var(--cp-input-bg)) text-cp-text hover:bg-(--cp-input-hover-bg,var(--cp-input-hover-bg)) hover:shadow-cp-input-hover'
         "
         :aria-pressed="model === option.value"
         @click="model = option.value"
       >
         <span class="flex items-center gap-2">
           <span
-            class="inline-flex size-4 shrink-0 items-center justify-center rounded-full bg-cp-surface shadow-[inset_0_0_0_1px_var(--cp-default-border-hover)]"
+            class="inline-flex size-4 shrink-0 items-center justify-center rounded-full bg-cp-bg-container shadow-[inset_0_0_0_1px_var(--cp-color-border)]"
           >
             <span
               class="size-2 rounded-full transition-opacity duration-150"
-              :class="model === option.value ? 'bg-cp-info opacity-100' : 'opacity-0'"
+              :class="model === option.value ? 'bg-cp-primary opacity-100' : 'opacity-0'"
             />
           </span>
-          <span class="text-[14px] leading-[1.15] font-heavy">{{ option.label }}</span>
+          <span class="text-cp-lg leading-[1.15] font-heavy">{{ option.label }}</span>
         </span>
-        <span class="mt-2 block text-[13px] leading-normal font-emphasis text-cp-secondary">
+        <span class="mt-2 block text-cp leading-normal font-emphasis text-cp-text-secondary">
           {{ option.description }}
         </span>
       </button>
diff --git a/frontend/src/views/settings/components/backup/BackupRecordsCard.vue b/frontend/src/views/settings/components/backup/BackupRecordsCard.vue
index e5b53a0b5..43eddbf0c 100644
--- a/frontend/src/views/settings/components/backup/BackupRecordsCard.vue
+++ b/frontend/src/views/settings/components/backup/BackupRecordsCard.vue
@@ -135,7 +135,7 @@ function canDelete(record: BackupRecord): boolean {
         empty-text="暂无备份记录"
       >
         <template #id="{ row }">
-          <span class="text-cp-secondary" :title="row.id">{{ shortId(row.id) }}</span>
+          <span class="text-cp-text-secondary" :title="row.id">{{ shortId(row.id) }}</span>
         </template>
 
         <template #status="{ row }">
@@ -143,27 +143,27 @@ function canDelete(record: BackupRecord): boolean {
         </template>
 
         <template #fileName="{ row }">
-          <span class="text-cp-secondary" :title="row.objectKey">{{ formatFileName(row) }}</span>
+          <span class="text-cp-text-secondary" :title="row.objectKey">{{ formatFileName(row) }}</span>
         </template>
 
         <template #sizeBytes="{ row }">
-          <span class="text-cp-secondary">{{ formatSize(row.sizeBytes) }}</span>
+          <span class="text-cp-text-secondary">{{ formatSize(row.sizeBytes) }}</span>
         </template>
 
         <template #expiresAt="{ row }">
-          <span class="text-cp-secondary">
+          <span class="text-cp-text-secondary">
             {{ row.expiresAt ? formatDateTime(row.expiresAt) : '—' }}
           </span>
         </template>
 
         <template #trigger="{ row }">
-          <span class="text-cp-secondary">
+          <span class="text-cp-text-secondary">
             {{ triggerLabel(row.triggerKind) }}
           </span>
         </template>
 
         <template #startedAt="{ row }">
-          <span class="text-cp-secondary">
+          <span class="text-cp-text-secondary">
             {{ row.startedAt ? formatDateTime(row.startedAt) : '—' }}
           </span>
         </template>
diff --git a/frontend/src/views/settings/components/backup/BackupStatusBadge.vue b/frontend/src/views/settings/components/backup/BackupStatusBadge.vue
index 81d08a75c..81a33c970 100644
--- a/frontend/src/views/settings/components/backup/BackupStatusBadge.vue
+++ b/frontend/src/views/settings/components/backup/BackupStatusBadge.vue
@@ -39,13 +39,13 @@ const textClass = computed(() => {
     case 'success':
       return 'text-cp-success-text'
     case 'danger':
-      return 'text-cp-danger-text'
+      return 'text-cp-error-text'
     case 'warning':
       return 'text-cp-warning-text'
     case 'info':
       return 'text-cp-info-text'
     default:
-      return 'text-cp-secondary'
+      return 'text-cp-text-secondary'
   }
 })
 
@@ -54,13 +54,13 @@ const dotClass = computed(() => {
     case 'success':
       return 'bg-cp-success'
     case 'danger':
-      return 'bg-cp-danger'
+      return 'bg-cp-error'
     case 'warning':
       return 'bg-cp-warning'
     case 'info':
       return 'bg-cp-info'
     default:
-      return 'bg-cp-muted-text'
+      return 'bg-cp-text-quaternary'
   }
 })
 </script>
@@ -68,14 +68,14 @@ const dotClass = computed(() => {
 <template>
   <span
     v-if="variant === 'pill'"
-    class="inline-flex h-7 shrink-0 items-center rounded-full px-2.5 text-[12px] font-heavy"
+    class="inline-flex h-7 shrink-0 items-center rounded-full px-2.5 text-cp-sm font-heavy"
     :class="textClass"
   >
     {{ label }}
   </span>
   <span
     v-else
-    class="inline-flex min-w-16 items-center gap-1.5 text-[12px] leading-none font-emphasis"
+    class="inline-flex min-w-16 items-center gap-1.5 text-cp-sm leading-none font-emphasis"
     :class="textClass"
   >
     <span class="size-1.5 rounded-full" :class="dotClass" />
diff --git a/frontend/src/views/settings/components/backup/BackupStorageCard.vue b/frontend/src/views/settings/components/backup/BackupStorageCard.vue
index 7345cd581..422f5ee10 100644
--- a/frontend/src/views/settings/components/backup/BackupStorageCard.vue
+++ b/frontend/src/views/settings/components/backup/BackupStorageCard.vue
@@ -55,11 +55,11 @@ function toggleSecretVisible(): void {
     title="S3 存储配置"
   >
     <template #description>
-      <span class="text-cp-secondary">
+      <span class="text-cp-text-secondary">
         配置 S3 兼容存储（支持
         <button
           type="button"
-          class="cursor-pointer border-0 bg-transparent p-0 text-cp-info underline underline-offset-2"
+          class="cursor-pointer border-0 bg-transparent p-0 text-cp-link underline underline-offset-2 hover:text-cp-link-hover"
           @click="emit('openR2Guide')"
         >
           Cloudflare R2
diff --git a/frontend/src/views/settings/components/backup/R2GuideModal.vue b/frontend/src/views/settings/components/backup/R2GuideModal.vue
index 13cc898c3..4ecbb5f60 100644
--- a/frontend/src/views/settings/components/backup/R2GuideModal.vue
+++ b/frontend/src/views/settings/components/backup/R2GuideModal.vue
@@ -11,48 +11,48 @@ const open = defineModel<boolean>({ default: false })
     title="Cloudflare R2 接入指南"
     size="lg"
   >
-    <div class="flex flex-col gap-4 text-[13px] leading-relaxed text-cp-secondary">
+    <div class="flex flex-col gap-4 text-cp leading-relaxed text-cp-text-secondary">
       <section class="flex flex-col gap-1.5">
-        <h3 class="text-[14px] font-heavy text-cp-normal">
+        <h3 class="text-cp-lg font-heavy text-cp-status-normal">
           1. 创建存储桶
         </h3>
         <p class="m-0">
           在 Cloudflare Dashboard 进入 R2，创建一个私有存储桶（例如
-          <code class="rounded bg-cp-subtle px-1.5 py-0.5">codex-proxy-backups</code>）。
+          <code class="rounded bg-cp-fill-quaternary px-1.5 py-0.5">codex-proxy-backups</code>）。
           桶必须保持私有，不要开放公共读取。
         </p>
       </section>
 
       <section class="flex flex-col gap-1.5">
-        <h3 class="text-[14px] font-heavy text-cp-normal">
+        <h3 class="text-cp-lg font-heavy text-cp-status-normal">
           2. 创建 API Token
         </h3>
         <p class="m-0">
           在「管理 API Token」创建对象存储专用 Token，只授予目标桶的对象
-          <code class="rounded bg-cp-subtle px-1.5 py-0.5">对象读</code>、
-          <code class="rounded bg-cp-subtle px-1.5 py-0.5">对象写</code>、
-          <code class="rounded bg-cp-subtle px-1.5 py-0.5">对象查看</code> 与
-          <code class="rounded bg-cp-subtle px-1.5 py-0.5">对象删除</code> 权限，
+          <code class="rounded bg-cp-fill-quaternary px-1.5 py-0.5">对象读</code>、
+          <code class="rounded bg-cp-fill-quaternary px-1.5 py-0.5">对象写</code>、
+          <code class="rounded bg-cp-fill-quaternary px-1.5 py-0.5">对象查看</code> 与
+          <code class="rounded bg-cp-fill-quaternary px-1.5 py-0.5">对象删除</code> 权限，
           不要授予整个账号权限。
         </p>
       </section>
 
       <section class="flex flex-col gap-1.5">
-        <h3 class="text-[14px] font-heavy text-cp-normal">
+        <h3 class="text-cp-lg font-heavy text-cp-status-normal">
           3. 填写连接参数
         </h3>
         <ul class="m-0 list-disc space-y-1 pl-5">
           <li>
-            Endpoint：<code class="rounded bg-cp-subtle px-1.5 py-0.5">https://&#123;ACCOUNT_ID&#125;.r2.cloudflarestorage.com</code>
+            Endpoint：<code class="rounded bg-cp-fill-quaternary px-1.5 py-0.5">https://&#123;ACCOUNT_ID&#125;.r2.cloudflarestorage.com</code>
           </li>
-          <li>Region：<code class="rounded bg-cp-subtle px-1.5 py-0.5">auto</code>（R2 固定值）</li>
+          <li>Region：<code class="rounded bg-cp-fill-quaternary px-1.5 py-0.5">auto</code>（R2 固定值）</li>
           <li>Access Key ID / Secret Access Key：上一步生成的 Token</li>
           <li>Force Path Style：关闭</li>
         </ul>
       </section>
 
       <section class="flex flex-col gap-1.5">
-        <h3 class="text-[14px] font-heavy text-cp-normal">
+        <h3 class="text-cp-lg font-heavy text-cp-status-normal">
           4. 完成连接测试
         </h3>
         <p class="m-0">
diff --git a/frontend/src/views/settings/index.vue b/frontend/src/views/settings/index.vue
index ec1ba5440..4c9cc90d9 100644
--- a/frontend/src/views/settings/index.vue
+++ b/frontend/src/views/settings/index.vue
@@ -20,10 +20,19 @@ import { rotationOptions } from './constants'
 const route = useRoute()
 const router = useRouter()
 
-const section = computed(() => (route.params.section === 'backup' ? 'backup' : 'runtime'))
+type SettingsSection = 'runtime' | 'backup'
+
+const section = computed<SettingsSection>(() =>
+  route.name === 'settings-backup' ? 'backup' : 'runtime',
+)
 
 function switchSection(value: string): void {
-  void router.push(value === 'backup' ? '/settings/backup' : '/settings')
+  const paths: Record<SettingsSection, string> = {
+    runtime: '/settings',
+    backup: '/settings/backup',
+  }
+  const nextSection: SettingsSection = value === 'backup' ? 'backup' : 'runtime'
+  void router.push(paths[nextSection])
 }
 
 const {
@@ -71,13 +80,13 @@ watch(
 
 <template>
   <div class="w-full">
-    <BasePageHeader title="系统设置" description="管理运行参数、调度策略、模型映射与备份配置" />
+    <BasePageHeader title="系统设置" description="管理运行参数、管理员凭据与备份配置" />
 
-    <div class="mt-4 flex min-h-cp-control-md flex-wrap items-center justify-between gap-3">
+    <div class="mt-4 flex min-h-cp-control flex-wrap items-center justify-between gap-3">
       <BaseSegmented
         :model-value="section"
         label="设置分区"
-        class="bg-(--cp-input-soft-bg)!"
+        class="bg-(--cp-input-bg)!"
         :options="[
           { label: '运行设置', value: 'runtime' },
           { label: '备份', value: 'backup' },
@@ -98,7 +107,7 @@ watch(
       </BaseButton>
     </div>
 
-    <div v-show="section === 'runtime'" class="mt-5 grid w-full gap-5">
+    <div v-if="section === 'runtime'" class="mt-5 grid w-full gap-5">
       <AdminApiKeyCard
         :status="adminApiKeyStatus"
         :loading="adminKeyLoading"
@@ -143,7 +152,7 @@ watch(
       </BaseConfirmModal>
     </div>
 
-    <div v-show="section === 'backup'" class="mt-5">
+    <div v-else class="mt-5">
       <SettingsBackupSection :active="section === 'backup'" />
     </div>
   </div>
diff --git a/frontend/src/views/theme/components/AppearanceSettingsSection.vue b/frontend/src/views/theme/components/AppearanceSettingsSection.vue
new file mode 100644
index 000000000..a3f16fd1e
--- /dev/null
+++ b/frontend/src/views/theme/components/AppearanceSettingsSection.vue
@@ -0,0 +1,183 @@
+<script setup lang="ts">
+import {
+  Check,
+  Moon,
+  RotateCcw,
+  Save,
+  Search,
+  Sun,
+  Undo2,
+} from '@lucide/vue'
+
+import BaseButton from '@/components/base/BaseButton.vue'
+import BaseInput from '@/components/base/BaseInput.vue'
+import BasePageHeader from '@/components/base/BasePageHeader.vue'
+import BaseScrollbar from '@/components/base/BaseScrollbar.vue'
+import BaseSegmented from '@/components/base/BaseSegmented.vue'
+import { toast } from '@/components/base/BaseToast'
+
+import { useThemeEditor } from '../composables/useThemeEditor'
+import ThemeComponentTokenPanel from './ThemeComponentTokenPanel.vue'
+import ThemeEditorPreview from './ThemeEditorPreview.vue'
+import ThemeGlobalTokenPanel from './ThemeGlobalTokenPanel.vue'
+
+const {
+  draft,
+  scope,
+  globalCategory,
+  preview,
+  previewTheme,
+  component,
+  query,
+  resolvedPreview,
+  previewStyle,
+  modificationCount,
+  dirty,
+  selectPreset,
+  setPrimaryColor,
+  setMode,
+  setSeedColor,
+  setSeedNumber,
+  resetSeed,
+  setComponentNumber,
+  resetComponentNumber,
+  setTokenOverride,
+  resetTokenOverride,
+  resetDraft,
+  restoreDefaults,
+  save,
+} = useThemeEditor()
+
+const scopeOptions = [
+  { label: '全局', value: 'global' },
+  { label: '组件', value: 'component' },
+]
+const previewThemeOptions = [
+  { label: '浅色预览', value: 'light', icon: Sun },
+  { label: '深色预览', value: 'dark', icon: Moon },
+]
+
+function switchScope(value: string) {
+  scope.value = value === 'component' ? 'component' : 'global'
+}
+
+function saveTheme(event: MouseEvent) {
+  if (!save(event)) {
+    toast.error('主题设置无效，请检查编辑值')
+    return
+  }
+  toast.success('主题已保存并应用')
+}
+</script>
+
+<template>
+  <div class="flex min-h-0 w-full flex-col">
+    <BasePageHeader class="xl:h-17" title="主题设置">
+      <template #description>
+        <span class="flex flex-wrap items-center gap-x-2 gap-y-1">
+          <span>自定义当前浏览器中的管理端配色与界面风格</span>
+          <span
+            class="inline-flex items-center gap-1.5 text-cp-sm font-heavy"
+            :class="dirty ? 'text-cp-primary-text' : 'text-cp-text-tertiary'"
+          >
+            <span class="size-1.5 rounded-full bg-current" aria-hidden="true" />
+            {{ dirty ? `${modificationCount} 处修改待应用` : '已同步' }}
+          </span>
+        </span>
+      </template>
+
+      <template #actions>
+        <div class="flex flex-wrap items-center justify-end gap-2">
+          <BaseSegmented
+            :model-value="scope"
+            label="主题编辑层级"
+            :options="scopeOptions"
+            size="sm"
+            @update:model-value="switchScope"
+          />
+          <BaseSegmented
+            v-model="previewTheme"
+            label="预览明暗模式"
+            display="icon"
+            :options="previewThemeOptions"
+            size="sm"
+          />
+          <BaseButton size="sm" variant="ghost" :disabled="!dirty" @click="resetDraft">
+            <template #icon>
+              <Undo2 class="size-3.5" />
+            </template>
+            撤销草稿
+          </BaseButton>
+          <BaseButton size="sm" variant="secondary" @click="restoreDefaults">
+            <template #icon>
+              <RotateCcw class="size-3.5" />
+            </template>
+            恢复默认
+          </BaseButton>
+          <BaseButton
+            size="sm"
+            variant="primary"
+            :disabled="!dirty"
+            @click="saveTheme"
+          >
+            <template #icon>
+              <Save v-if="dirty" class="size-3.5" />
+              <Check v-else class="size-3.5" />
+            </template>
+            {{ dirty ? '保存并应用' : '已保存' }}
+          </BaseButton>
+        </div>
+      </template>
+    </BasePageHeader>
+
+    <section class="theme-workbench isolate mt-5 overflow-hidden rounded-cp-card bg-cp-bg-layout shadow-cp-card xl:flex xl:min-h-0 xl:flex-1 xl:flex-col" aria-label="主题编辑器">
+      <div class="theme-workbench-body grid min-h-180 gap-3 xl:min-h-0 xl:flex-1 xl:overflow-hidden xl:grid-cols-[370px_minmax(0,1fr)]">
+        <aside class="grid h-full min-h-0 grid-rows-[auto_minmax(0,1fr)] gap-3 overflow-hidden rounded-cp-lg bg-cp-bg-container pt-3 pr-0 pb-3 pl-3 shadow-cp-secondary" aria-label="主题 Token 编辑面板">
+          <BaseInput v-model="query" class="mr-3" aria-label="搜索 Token" placeholder="搜索 Seed、Alias 或 Component Token">
+            <template #prefix>
+              <Search class="size-4" />
+            </template>
+          </BaseInput>
+
+          <BaseScrollbar class="h-full min-h-0">
+            <div class="pr-4">
+              <ThemeGlobalTokenPanel
+                v-if="scope === 'global'"
+                v-model:category="globalCategory"
+                :draft="draft"
+                :resolved="resolvedPreview"
+                :query="query"
+                @mode="setMode"
+                @preset="selectPreset"
+                @primary="setPrimaryColor"
+                @seed-color="setSeedColor"
+                @seed-number="setSeedNumber"
+                @reset-seed="resetSeed"
+              />
+              <ThemeComponentTokenPanel
+                v-else
+                v-model="component"
+                :draft="draft"
+                :resolved="resolvedPreview"
+                :query="query"
+                @change="setTokenOverride"
+                @reset="resetTokenOverride"
+                @component-number="setComponentNumber"
+                @reset-component-number="resetComponentNumber"
+              />
+            </div>
+          </BaseScrollbar>
+        </aside>
+
+        <div class="hidden min-h-0 min-[768px]:block">
+          <ThemeEditorPreview
+            v-model="preview"
+            class="h-full"
+            :theme="previewTheme"
+            :style="previewStyle"
+          />
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
diff --git a/frontend/src/views/theme/components/ThemeColorTokenField.vue b/frontend/src/views/theme/components/ThemeColorTokenField.vue
new file mode 100644
index 000000000..ebbc4f650
--- /dev/null
+++ b/frontend/src/views/theme/components/ThemeColorTokenField.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { RotateCcw } from '@lucide/vue'
+
+import BaseColorPicker from '@/components/base/BaseColorPicker/index.vue'
+import BaseIconButton from '@/components/base/BaseIconButton.vue'
+
+withDefaults(defineProps<{
+  label: string
+  token: string
+  value: string
+  description?: string
+  presets?: readonly string[]
+  overridden?: boolean
+}>(), {
+  description: undefined,
+  presets: () => [],
+  overridden: false,
+})
+
+const emit = defineEmits<{
+  change: [value: string]
+  reset: []
+}>()
+</script>
+
+<template>
+  <div class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3 rounded-cp-lg bg-cp-fill-quaternary px-3 py-3">
+    <div class="min-w-0">
+      <div class="flex flex-wrap items-center gap-2">
+        <strong class="text-cp-sm font-bold text-cp-text">{{ label }}</strong>
+        <span v-if="overridden" class="rounded-full bg-cp-primary-bg px-1.5 py-0.5 text-[9px] font-heavy text-cp-primary-text">
+          已修改
+        </span>
+      </div>
+      <code class="mt-1 block truncate font-mono text-[10px] text-cp-text-quaternary">{{ token }}</code>
+      <p
+        v-if="description"
+        class="mt-1.5 mb-0 truncate text-[10px] leading-[1.45] font-emphasis text-cp-text-secondary"
+        :title="description"
+      >
+        {{ description }}
+      </p>
+    </div>
+
+    <div class="flex items-center gap-1.5 rounded-cp bg-cp-bg-container p-1 shadow-cp-tertiary">
+      <BaseColorPicker
+        :model-value="value"
+        :presets="presets"
+        :allow-alpha="false"
+        :label="`编辑 ${label}`"
+        @update:model-value="emit('change', $event)"
+      />
+      <span class="min-w-17 font-mono text-[10px] tabular-nums text-cp-text-secondary">{{ value }}</span>
+      <BaseIconButton
+        v-if="overridden"
+        label="恢复派生值"
+        size="sm"
+        variant="ghost"
+        @click="emit('reset')"
+      >
+        <RotateCcw class="size-3.5" />
+      </BaseIconButton>
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/views/theme/components/ThemeComponentPreview.vue b/frontend/src/views/theme/components/ThemeComponentPreview.vue
new file mode 100644
index 000000000..7bd15436d
--- /dev/null
+++ b/frontend/src/views/theme/components/ThemeComponentPreview.vue
@@ -0,0 +1,460 @@
+<script setup lang="ts">
+import type { BaseTablePagination as BaseTablePaginationState } from '@/components/base/BaseTable/pagination'
+
+import {
+  Bell,
+  Check,
+  CircleAlert,
+  Download,
+  Info,
+  KeyRound,
+  MoreHorizontal,
+  Plus,
+  Search,
+  Trash2,
+  TriangleAlert,
+} from '@lucide/vue'
+import { shallowRef } from 'vue'
+
+import BaseButton from '@/components/base/BaseButton.vue'
+import BaseCard from '@/components/base/BaseCard.vue'
+import BaseCheckbox from '@/components/base/BaseCheckbox.vue'
+import BaseColorPicker from '@/components/base/BaseColorPicker/index.vue'
+import BaseEmpty from '@/components/base/BaseEmpty.vue'
+import FormItem from '@/components/base/BaseForm/FormItem.vue'
+import BaseForm from '@/components/base/BaseForm/index.vue'
+import BaseIconButton from '@/components/base/BaseIconButton.vue'
+import BaseInput from '@/components/base/BaseInput.vue'
+import BaseMenuItem from '@/components/base/BaseMenuItem.vue'
+import BaseMotionIcon from '@/components/base/BaseMotionIcon.vue'
+import BaseNumberInput from '@/components/base/BaseNumberInput.vue'
+import BasePopover from '@/components/base/BasePopover.vue'
+import BaseRadio from '@/components/base/BaseRadio.vue'
+import BaseRange from '@/components/base/BaseRange.vue'
+import BaseSegmented from '@/components/base/BaseSegmented.vue'
+import BaseSelect from '@/components/base/BaseSelect.vue'
+import BaseSkeleton from '@/components/base/BaseSkeleton.vue'
+import BaseSwitch from '@/components/base/BaseSwitch.vue'
+import BaseTablePagination from '@/components/base/BaseTable/BaseTablePagination.vue'
+import { defineTableColumns } from '@/components/base/BaseTable/columns'
+import BaseTable from '@/components/base/BaseTable/index.vue'
+import BaseTextarea from '@/components/base/BaseTextarea.vue'
+
+interface PreviewTableRow {
+  id: string
+  account: string
+  provider: string
+  status: '正常' | '限流' | '停用' | '异常'
+  requests: string
+  latency: string
+  updatedAt: string
+}
+
+const search = shallowRef('中继账号')
+const notes = shallowRef('优先保持当前账号，额度耗尽后再切换。')
+const brandColor = shallowRef('#5983F4')
+const invalidKey = shallowRef('sk-invalid')
+const disabledText = shallowRef('不可编辑')
+const provider = shallowRef('openai')
+const view = shallowRef('all')
+const notifications = shallowRef(true)
+const autoRotate = shallowRef(false)
+const selected = shallowRef(true)
+const partialSelected = shallowRef(false)
+const strategy = shallowRef('balanced')
+const controlHeight = shallowRef(38)
+
+const providerOptions = [
+  { label: 'OpenAI', value: 'openai' },
+  { label: 'xAI', value: 'xai' },
+  { label: '全部平台', value: 'all' },
+]
+const viewOptions = [
+  { label: '全部', value: 'all' },
+  { label: '正常', value: 'active' },
+  { label: '受限', value: 'limited' },
+]
+const themeSwatches = [
+  { label: 'Surface', className: 'bg-cp-bg-container' },
+  { label: 'Accent', className: 'bg-cp-primary' },
+  { label: 'Success', className: 'bg-cp-success' },
+  { label: 'Warning', className: 'bg-cp-warning' },
+  { label: 'Error', className: 'bg-cp-error' },
+]
+const progressItems = [
+  { label: '账号可用率', value: '94%', width: '94%' },
+  { label: '今日额度', value: '68%', width: '68%' },
+  { label: '批量导入', value: '12 / 20', width: '60%' },
+]
+const tableColumns = defineTableColumns<PreviewTableRow>([
+  { key: 'account', label: '账号', kind: 'identity', size: '3xl' },
+  { key: 'provider', label: '平台', kind: 'status', size: 'md' },
+  { key: 'status', label: '状态', kind: 'status', size: 'md' },
+  { key: 'requests', label: '今日请求', kind: 'numeric', size: 'lg' },
+  { key: 'latency', label: '首字延迟', kind: 'numeric', size: 'lg' },
+  { key: 'updatedAt', label: '最近使用', kind: 'datetime', size: 'lg' },
+])
+const tableRows: PreviewTableRow[] = [
+  { id: 'relay', account: 'relay@example.com', provider: 'OpenAI', status: '正常', requests: '12,840', latency: '228 ms', updatedAt: '刚刚' },
+  { id: 'gateway', account: 'gateway@example.com', provider: 'xAI', status: '正常', requests: '9,462', latency: '316 ms', updatedAt: '2 分钟前' },
+  { id: 'quota', account: 'quota@example.com', provider: 'OpenAI', status: '限流', requests: '7,318', latency: '486 ms', updatedAt: '5 分钟前' },
+  { id: 'batch', account: 'batch@example.com', provider: 'OpenAI', status: '正常', requests: '5,904', latency: '264 ms', updatedAt: '8 分钟前' },
+  { id: 'fallback', account: 'fallback@example.com', provider: 'xAI', status: '异常', requests: '3,172', latency: '—', updatedAt: '12 分钟前' },
+  { id: 'disabled', account: 'disabled@example.com', provider: 'OpenAI', status: '停用', requests: '0', latency: '—', updatedAt: '2 小时前' },
+]
+const pagination: BaseTablePaginationState = {
+  page: 2,
+  pageSize: 20,
+  total: 1_182,
+}
+
+function statusClass(status: PreviewTableRow['status']) {
+  if (status === '正常')
+    return 'bg-cp-success-bg text-cp-success-text'
+  if (status === '限流')
+    return 'bg-cp-warning-bg text-cp-warning-text'
+  if (status === '异常')
+    return 'bg-cp-error-bg text-cp-error-text'
+  return 'bg-cp-fill-tertiary text-cp-text-secondary'
+}
+</script>
+
+<template>
+  <div class="grid h-full min-w-0 grid-rows-[80px_352px_290px_520px_374px] gap-5 overflow-hidden rounded-cp-card bg-(--cp-card-bg) p-6 shadow-cp-card">
+    <header class="flex items-center justify-between gap-8 px-1">
+      <div class="min-w-0">
+        <p class="m-0 font-mono text-cp-xs font-heavy tracking-[0.16em] text-cp-primary-text uppercase">
+          Component specimen
+        </p>
+        <h1 class="mt-2 mb-0 text-[30px] leading-none font-extrabold text-cp-text">
+          组件概览
+        </h1>
+        <p class="mt-2 mb-0 text-cp font-emphasis text-cp-text-secondary">
+          在同一张校样板中检查控制态、数据密度与浮层关系
+        </p>
+      </div>
+
+      <div class="flex shrink-0 items-center gap-6">
+        <span class="rounded-full bg-cp-primary-bg px-3 py-1.5 font-mono text-[10px] font-heavy tracking-wide text-cp-primary-text uppercase">
+          20 Base Components
+        </span>
+        <div class="flex items-center gap-5" aria-label="当前主题语义色">
+          <div
+            v-for="item in themeSwatches"
+            :key="item.label"
+            class="grid justify-items-center gap-1.5"
+          >
+            <span class="size-6 rounded-cp shadow-cp-tertiary" :class="item.className" />
+            <span class="font-mono text-[10px] font-heavy text-cp-text-quaternary">{{ item.label }}</span>
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <section class="grid min-w-0 grid-cols-12 gap-6" aria-label="基础控制组件">
+      <BaseCard padding="compact" class="col-span-7 h-full min-w-0 bg-cp-fill-quaternary! shadow-none!" title="按钮与动作" description="BaseButton · BaseIconButton · BaseMotionIcon">
+        <template #body>
+          <div class="grid flex-1 content-start gap-6">
+            <div>
+              <p class="mt-0 mb-3 font-mono text-cp-xs font-heavy text-cp-text-quaternary">
+                Button / action
+              </p>
+              <div class="flex flex-wrap items-center gap-3">
+                <BaseButton variant="primary">
+                  <template #icon>
+                    <Plus class="size-4" />
+                  </template>
+                  创建账号
+                </BaseButton>
+                <BaseButton variant="secondary">
+                  <template #icon>
+                    <Download class="size-4" />
+                  </template>
+                  导出数据
+                </BaseButton>
+                <BaseButton variant="ghost">
+                  稍后处理
+                </BaseButton>
+                <BaseButton variant="destructive">
+                  <template #icon>
+                    <Trash2 class="size-4" />
+                  </template>
+                  删除
+                </BaseButton>
+              </div>
+            </div>
+
+            <div class="grid grid-cols-[1fr_auto] items-end gap-5 rounded-cp-lg bg-cp-fill-quaternary p-4">
+              <div>
+                <p class="mt-0 mb-3 text-cp-sm font-heavy text-cp-text-secondary">
+                  尺寸与禁用状态
+                </p>
+                <div class="flex flex-wrap items-center gap-3">
+                  <BaseButton size="sm" variant="primary">
+                    Small
+                  </BaseButton>
+                  <BaseButton size="md" variant="primary">
+                    Medium
+                  </BaseButton>
+                  <BaseButton size="lg" variant="primary">
+                    Large
+                  </BaseButton>
+                  <BaseButton disabled>
+                    不可操作
+                  </BaseButton>
+                  <BaseButton loading>
+                    处理中
+                  </BaseButton>
+                </div>
+              </div>
+              <div class="flex items-center gap-2">
+                <BaseIconButton label="通知" variant="secondary">
+                  <BaseMotionIcon>
+                    <Bell />
+                  </BaseMotionIcon>
+                </BaseIconButton>
+                <BaseIconButton label="更多操作" variant="secondary">
+                  <MoreHorizontal />
+                </BaseIconButton>
+                <BaseIconButton label="删除记录" variant="destructive">
+                  <Trash2 />
+                </BaseIconButton>
+              </div>
+            </div>
+          </div>
+        </template>
+      </BaseCard>
+
+      <BaseCard padding="compact" class="col-span-5 h-full min-w-0 bg-cp-fill-quaternary! shadow-none!" title="表单与输入" description="BaseInput · BaseSelect · BaseNumberInput · BaseRange · BaseTextarea · BaseColorPicker">
+        <template #body>
+          <BaseForm class="grid-cols-2 gap-3!">
+            <BaseInput v-model="search" aria-label="搜索账号" placeholder="搜索账号">
+              <template #prefix>
+                <Search class="size-4" />
+              </template>
+            </BaseInput>
+            <BaseSelect v-model="provider" aria-label="选择平台" :options="providerOptions" />
+            <BaseInput v-model="invalidKey" aria-label="访问密钥错误示例" aria-invalid="true">
+              <template #prefix>
+                <KeyRound class="size-4" />
+              </template>
+            </BaseInput>
+            <BaseInput v-model="disabledText" aria-label="禁用输入框" disabled />
+            <FormItem label="品牌颜色" description="BaseColorPicker">
+              <BaseColorPicker
+                v-model="brandColor"
+                label="编辑品牌颜色"
+                :allow-alpha="false"
+                :presets="['#5983F4', '#0F766E', '#7C3AED', '#475569']"
+              />
+            </FormItem>
+            <FormItem label="调度备注" description="BaseTextarea">
+              <BaseTextarea v-model="notes" aria-label="调度备注" :rows="2" />
+            </FormItem>
+            <FormItem class="col-span-2" label="控件高度" description="BaseNumberInput · BaseRange">
+              <div class="flex items-center gap-3">
+                <BaseNumberInput
+                  v-model="controlHeight"
+                  label="组件示例控件高度"
+                  :min="28"
+                  :max="52"
+                  unit="px"
+                />
+                <BaseRange
+                  v-model="controlHeight"
+                  class="min-w-0 flex-1"
+                  label="组件示例控件高度"
+                  :min="28"
+                  :max="52"
+                  unit="px"
+                />
+              </div>
+            </FormItem>
+          </BaseForm>
+        </template>
+      </BaseCard>
+    </section>
+
+    <section class="grid min-w-0 grid-cols-12 gap-6" aria-label="选择与反馈组件">
+      <BaseCard padding="compact" class="col-span-4 h-full min-w-0 bg-cp-fill-quaternary! shadow-none!" title="选择与切换" description="BaseSegmented · BaseSwitch · BaseCheckbox · BaseRadio">
+        <template #body>
+          <div class="grid gap-5">
+            <BaseSegmented v-model="view" label="账号视图" :options="viewOptions" class="w-full" />
+            <div class="flex flex-wrap items-center gap-x-7 gap-y-4">
+              <BaseSwitch v-model="notifications" label="实时通知" show-label />
+              <BaseSwitch v-model="autoRotate" label="自动轮换" show-label />
+              <BaseCheckbox v-model="selected" label="选择当前页" show-label />
+              <BaseCheckbox v-model="partialSelected" label="部分选择" indeterminate show-label />
+            </div>
+            <div class="flex items-center gap-6">
+              <BaseRadio v-model="strategy" value="balanced" name="strategy" label="均衡" show-label />
+              <BaseRadio v-model="strategy" value="sticky" name="strategy" label="粘性" show-label />
+              <BaseRadio v-model="strategy" value="manual" name="strategy" label="手动" show-label />
+            </div>
+          </div>
+        </template>
+      </BaseCard>
+
+      <BaseCard padding="compact" class="col-span-4 h-full min-w-0 bg-cp-fill-quaternary! shadow-none!" title="反馈语义" description="Success · Warning · Error · Info">
+        <template #body>
+          <div class="grid gap-2.5">
+            <div class="flex items-center gap-3 rounded-cp bg-cp-success-bg px-3.5 py-3 text-cp-success-text">
+              <Check class="size-4 shrink-0" /><strong class="text-cp-sm">主题设置已保存</strong>
+            </div>
+            <div class="flex items-center gap-3 rounded-cp bg-cp-warning-bg px-3.5 py-3 text-cp-warning-text">
+              <TriangleAlert class="size-4 shrink-0" /><strong class="text-cp-sm">3 个账号额度接近上限</strong>
+            </div>
+            <div class="flex items-center gap-3 rounded-cp bg-cp-error-bg px-3.5 py-3 text-cp-error-text">
+              <CircleAlert class="size-4 shrink-0" /><strong class="text-cp-sm">连接测试未通过</strong>
+            </div>
+            <div class="flex items-center gap-3 rounded-cp bg-cp-info-bg px-3.5 py-3 text-cp-info-text">
+              <Info class="size-4 shrink-0" /><strong class="text-cp-sm">调度规则将在下次请求生效</strong>
+            </div>
+          </div>
+        </template>
+      </BaseCard>
+
+      <BaseCard padding="compact" class="col-span-4 h-full min-w-0 bg-cp-fill-quaternary! shadow-none!" title="状态与进度" description="Alias Token · Progress Token">
+        <template #body>
+          <div class="grid gap-4">
+            <div class="flex flex-wrap gap-2">
+              <span class="rounded-full bg-cp-success-bg px-3 py-1.5 text-cp-xs font-heavy text-cp-success-text">运行正常</span>
+              <span class="rounded-full bg-cp-warning-bg px-3 py-1.5 text-cp-xs font-heavy text-cp-warning-text">额度受限</span>
+              <span class="rounded-full bg-cp-error-bg px-3 py-1.5 text-cp-xs font-heavy text-cp-error-text">需要处理</span>
+              <span class="rounded-full bg-cp-info-bg px-3 py-1.5 text-cp-xs font-heavy text-cp-info-text">同步中</span>
+            </div>
+            <div v-for="item in progressItems" :key="item.label" class="grid gap-2">
+              <div class="flex justify-between text-cp-sm font-heavy text-cp-text-secondary">
+                <span>{{ item.label }}</span><span class="font-mono text-cp-text">{{ item.value }}</span>
+              </div>
+              <div class="h-2 overflow-hidden rounded-full bg-cp-progress-remaining">
+                <div class="h-full rounded-full bg-cp-primary" :style="{ width: item.width }" />
+              </div>
+            </div>
+          </div>
+        </template>
+      </BaseCard>
+    </section>
+
+    <BaseCard padding="compact" class="h-full min-w-0 bg-cp-fill-quaternary! shadow-none!" title="数据表格" description="BaseTable · BaseScrollbar · BaseTablePagination（标准行高）">
+      <template #actions>
+        <BaseInput aria-label="筛选表格" size="sm" placeholder="筛选账号" class="w-64">
+          <template #prefix>
+            <Search class="size-3.5" />
+          </template>
+        </BaseInput>
+      </template>
+      <template #body>
+        <div class="grid min-h-0 flex-1 grid-rows-[minmax(0,1fr)_auto]">
+          <BaseTable :columns="tableColumns" :rows="tableRows">
+            <template #account="{ row }">
+              <div class="grid gap-1">
+                <strong class="font-mono text-cp-sm text-cp-text">{{ row.account }}</strong>
+                <span class="text-[10px] font-emphasis text-cp-text-quaternary">credential_{{ row.id }}</span>
+              </div>
+            </template>
+            <template #status="{ row }">
+              <span class="inline-flex rounded-full px-2.5 py-1 text-cp-xs font-heavy" :class="statusClass(row.status)">
+                {{ row.status }}
+              </span>
+            </template>
+          </BaseTable>
+          <BaseTablePagination :pagination="pagination" :loading="false" />
+        </div>
+      </template>
+    </BaseCard>
+
+    <section class="grid min-w-0 grid-cols-12 gap-6 overflow-hidden" aria-label="边界状态组件">
+      <BaseCard padding="compact" class="col-span-4 h-full min-w-0 bg-cp-fill-quaternary! shadow-none!" title="空状态" description="BaseEmpty · BaseButton">
+        <template #body>
+          <BaseEmpty title="暂无匹配账号" description="调整筛选条件，或添加一个新的上游账号。" class="flex-1">
+            <template #action>
+              <BaseButton size="sm" variant="primary">
+                添加账号
+              </BaseButton>
+            </template>
+          </BaseEmpty>
+        </template>
+      </BaseCard>
+
+      <BaseCard padding="compact" class="col-span-4 h-full min-w-0 bg-cp-fill-quaternary! shadow-none!" title="加载与骨架" description="BaseSkeleton · BaseButton loading">
+        <template #body>
+          <div class="grid flex-1 content-between gap-5 rounded-cp-lg bg-cp-fill-quaternary p-4">
+            <div class="grid gap-4">
+              <div class="flex items-center gap-3">
+                <BaseSkeleton class="size-10 shrink-0" />
+                <div class="grid flex-1 gap-2">
+                  <BaseSkeleton shape="text" class="w-2/5" />
+                  <BaseSkeleton shape="text" class="h-2.5 w-3/5 opacity-60" />
+                </div>
+              </div>
+              <BaseSkeleton class="h-18 opacity-60" />
+              <div class="grid grid-cols-3 gap-3">
+                <BaseSkeleton v-for="index in 3" :key="index" class="h-12 opacity-60" />
+              </div>
+            </div>
+            <div class="flex items-center justify-between">
+              <span class="text-cp-sm font-emphasis text-cp-text-secondary">正在同步账号状态</span>
+              <BaseButton size="sm" loading>
+                同步中
+              </BaseButton>
+            </div>
+          </div>
+        </template>
+      </BaseCard>
+
+      <BaseCard padding="compact" class="col-span-4 h-full min-w-0 bg-cp-fill-quaternary! shadow-none!" title="浮层与菜单" description="BasePopover · BaseMenuItem · Elevated Surface">
+        <template #body>
+          <div class="grid min-w-0 flex-1 grid-rows-[auto_1fr_auto] overflow-hidden rounded-cp-lg bg-cp-bg-container p-4">
+            <div class="flex items-center justify-between rounded-cp bg-cp-bg-container px-4 py-3 shadow-cp-tertiary">
+              <div>
+                <strong class="block text-cp-sm text-cp-text">relay@example.com</strong>
+                <span class="mt-1 block text-[10px] text-cp-text-quaternary">OpenAI · OAuth</span>
+              </div>
+              <BasePopover>
+                <template #trigger>
+                  <BaseIconButton label="账号操作" variant="secondary">
+                    <MoreHorizontal />
+                  </BaseIconButton>
+                </template>
+                <div class="w-64 max-w-full p-2">
+                  <BaseMenuItem>编辑账号</BaseMenuItem>
+                  <BaseMenuItem>测试连接</BaseMenuItem>
+                  <BaseMenuItem tone="destructive">
+                    停用账号
+                  </BaseMenuItem>
+                </div>
+              </BasePopover>
+            </div>
+
+            <div class="mt-3 ml-auto w-64 max-w-full self-start rounded-cp-lg bg-cp-bg-elevated p-2 shadow-cp">
+              <BaseMenuItem>
+                <template #icon>
+                  <KeyRound class="size-3.5" />
+                </template>
+                编辑账号
+              </BaseMenuItem>
+              <BaseMenuItem>
+                <template #icon>
+                  <Info class="size-3.5" />
+                </template>
+                测试连接
+              </BaseMenuItem>
+              <BaseMenuItem tone="destructive">
+                <template #icon>
+                  <Trash2 class="size-3.5" />
+                </template>
+                停用账号
+              </BaseMenuItem>
+            </div>
+
+            <div class="flex min-w-0 items-center gap-3 rounded-cp bg-cp-bg-spotlight px-4 py-3 text-cp-text-light-solid shadow-cp-popup">
+              <Info class="size-4 shrink-0" />
+              <span class="min-w-0 text-cp-xs font-heavy">浮层始终使用独立 Surface 与 Shadow Token</span>
+            </div>
+          </div>
+        </template>
+      </BaseCard>
+    </section>
+  </div>
+</template>
diff --git a/frontend/src/views/theme/components/ThemeComponentTokenPanel.vue b/frontend/src/views/theme/components/ThemeComponentTokenPanel.vue
new file mode 100644
index 000000000..dff2c0d35
--- /dev/null
+++ b/frontend/src/views/theme/components/ThemeComponentTokenPanel.vue
@@ -0,0 +1,229 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+import type {
+  ThemeEditorComponent,
+  ThemeEditorDraft,
+} from '../composables/useThemeEditor'
+import type { ResolvedTheme, ThemeComponentOverrides, ThemeTokenName } from '@/theme'
+
+import {
+  AppWindow,
+  Bell,
+  CheckSquare,
+  Compass,
+  CreditCard,
+  FormInput,
+  LayoutPanelLeft,
+  MousePointerClick,
+  TableProperties,
+} from '@lucide/vue'
+import { computed } from 'vue'
+
+import ThemeColorTokenField from './ThemeColorTokenField.vue'
+import ThemeNumberTokenField from './ThemeNumberTokenField.vue'
+import ThemeTextTokenField from './ThemeTextTokenField.vue'
+
+interface ComponentOption {
+  id: ThemeEditorComponent
+  label: string
+  description: string
+  icon: Component
+}
+
+interface EditableToken {
+  name: ThemeTokenName
+  label: string
+  kind: 'color' | 'shadow' | 'number'
+  description: string
+  componentKey?: keyof ThemeComponentOverrides
+  min?: number
+  max?: number
+}
+
+const props = defineProps<{
+  draft: ThemeEditorDraft
+  resolved: ResolvedTheme
+  query: string
+}>()
+
+const emit = defineEmits<{
+  change: [name: ThemeTokenName, value: string]
+  reset: [name: ThemeTokenName]
+  componentNumber: [key: keyof ThemeComponentOverrides, value: number]
+  resetComponentNumber: [key: keyof ThemeComponentOverrides]
+}>()
+
+const component = defineModel<ThemeEditorComponent>({ required: true })
+
+const components: readonly ComponentOption[] = [
+  { id: 'action', label: 'Action', description: '按钮与动作', icon: MousePointerClick },
+  { id: 'form', label: 'Form', description: '表单与输入', icon: FormInput },
+  { id: 'selection', label: 'Selection', description: '选择控件', icon: CheckSquare },
+  { id: 'surface', label: 'Surface', description: '卡片与容器', icon: CreditCard },
+  { id: 'data', label: 'Data Display', description: '数据展示', icon: TableProperties },
+  { id: 'feedback', label: 'Feedback', description: '反馈与浮层', icon: Bell },
+  { id: 'navigation', label: 'Navigation', description: '导航', icon: Compass },
+  { id: 'layout', label: 'Layout', description: '布局与滚动', icon: LayoutPanelLeft },
+]
+
+const tokenCatalog: Record<ThemeEditorComponent, readonly EditableToken[]> = {
+  action: [
+    { name: '--cp-button-primary-color', label: '主按钮文字', kind: 'color', description: 'primaryColor' },
+    { name: '--cp-button-primary-bg', label: '主按钮背景', kind: 'color', description: 'primaryBg' },
+    { name: '--cp-button-primary-hover-bg', label: '主按钮 Hover', kind: 'color', description: 'primaryHoverBg' },
+    { name: '--cp-button-primary-active-bg', label: '主按钮 Active', kind: 'color', description: 'primaryActiveBg' },
+  ],
+  form: [
+    { name: '--cp-input-bg', label: '输入框背景', kind: 'color', description: 'activeBg' },
+    { name: '--cp-input-hover-bg', label: '输入框 Hover', kind: 'color', description: 'hoverBg' },
+    { name: '--cp-input-active-bg', label: '输入框 Active', kind: 'color', description: 'activeBg' },
+    { name: '--cp-input-shadow', label: '输入框阴影', kind: 'shadow', description: 'shadow' },
+    { name: '--cp-input-hover-shadow', label: '输入框 Hover 阴影', kind: 'shadow', description: 'hoverShadow' },
+    { name: '--cp-input-active-shadow', label: '输入框焦点阴影', kind: 'shadow', description: 'activeShadow' },
+  ],
+  selection: [
+    { name: '--cp-control-item-bg-active', label: '选择背景', kind: 'color', description: 'optionSelectedBg' },
+    { name: '--cp-control-item-bg-active-hover', label: '选择 Hover', kind: 'color', description: 'optionSelectedHoverBg' },
+  ],
+  surface: [
+    { name: '--cp-card-bg', label: '卡片背景', kind: 'color', description: 'colorBgContainer' },
+    {
+      name: '--cp-card-border-radius',
+      label: '卡片圆角',
+      kind: 'number',
+      description: 'borderRadius',
+      componentKey: 'cardBorderRadius',
+      min: 0,
+      max: 32,
+    },
+    { name: '--cp-card-shadow', label: '卡片阴影', kind: 'shadow', description: 'cardShadow' },
+  ],
+  data: [
+    {
+      name: '--cp-table-row-height',
+      label: '表格行高',
+      kind: 'number',
+      description: 'rowHeight',
+      componentKey: 'tableRowHeight',
+      min: 44,
+      max: 84,
+    },
+    { name: '--cp-table-header-bg', label: '表头背景', kind: 'color', description: 'headerBg' },
+    { name: '--cp-table-row-bg', label: '行背景', kind: 'color', description: 'rowBg' },
+    { name: '--cp-table-row-stripe-bg', label: '斑马纹背景', kind: 'color', description: 'rowStripeBg' },
+    { name: '--cp-table-row-hover-bg', label: '行 Hover', kind: 'color', description: 'rowHoverBg' },
+    { name: '--cp-table-row-selected-bg', label: '选中行背景', kind: 'color', description: 'rowSelectedBg' },
+    { name: '--cp-progress-remaining-color', label: '进度轨道', kind: 'color', description: 'progressRemainingColor' },
+  ],
+  feedback: [
+    { name: '--cp-color-bg-elevated', label: '浮层背景', kind: 'color', description: 'colorBgElevated' },
+    { name: '--cp-box-shadow', label: '浮层阴影', kind: 'shadow', description: 'boxShadow' },
+  ],
+  navigation: [
+    { name: '--cp-menu-item-selected-bg', label: '菜单选中背景', kind: 'color', description: 'itemSelectedBg' },
+    { name: '--cp-color-bg-text-hover', label: '导航 Hover', kind: 'color', description: 'itemHoverBg' },
+    { name: '--cp-color-bg-text-active', label: '导航 Active', kind: 'color', description: 'itemActiveBg' },
+  ],
+  layout: [
+    { name: '--cp-layout-sider-bg', label: '侧栏背景', kind: 'color', description: 'siderBg' },
+    { name: '--cp-layout-sider-shadow', label: '侧栏阴影', kind: 'shadow', description: 'siderShadow' },
+    { name: '--cp-scrollbar-thumb-bg', label: '滚动条滑块', kind: 'color', description: 'scrollbarThumbBg' },
+    { name: '--cp-scrollbar-thumb-hover-bg', label: '滚动条 Hover', kind: 'color', description: 'scrollbarThumbHoverBg' },
+  ],
+}
+
+const activeComponent = computed(() =>
+  components.find(option => option.id === component.value) ?? components[0]!,
+)
+const visibleTokens = computed(() => tokenCatalog[component.value].filter((token) => {
+  const query = props.query.trim().toLocaleLowerCase()
+  return !query || `${token.label} ${token.name} ${token.description}`.toLocaleLowerCase().includes(query)
+}))
+
+function overridden(name: ThemeTokenName) {
+  return Object.hasOwn(props.draft.customization.tokenOverrides ?? {}, name)
+}
+
+function componentOverridden(key: keyof ThemeComponentOverrides | undefined) {
+  return key ? Object.hasOwn(props.draft.customization.component ?? {}, key) : false
+}
+
+function numericTokenValue(name: ThemeTokenName) {
+  return Number.parseFloat(props.resolved.tokens[name])
+}
+</script>
+
+<template>
+  <div class="grid gap-4">
+    <section aria-labelledby="component-catalog-title">
+      <div class="mb-2 flex items-center gap-2 px-1">
+        <AppWindow class="size-3.5 text-cp-primary-text" />
+        <h3 id="component-catalog-title" class="m-0 text-cp font-heavy text-cp-text">
+          Component Token
+        </h3>
+      </div>
+      <div class="grid grid-cols-2 gap-2" role="listbox" aria-label="Component Token 组件族">
+        <button
+          v-for="option in components"
+          :key="option.id"
+          type="button"
+          role="option"
+          class="flex min-h-14 items-center gap-2.5 rounded-cp-lg bg-cp-fill-quaternary px-3 text-left outline-none transition-[background-color,box-shadow] duration-150 hover:bg-cp-bg-text-hover focus-visible:ring-2 focus-visible:ring-cp-control-outline"
+          :class="component === option.id ? 'bg-cp-control-item-bg-active shadow-cp-tertiary' : undefined"
+          :aria-selected="component === option.id"
+          @click="component = option.id"
+        >
+          <component :is="option.icon" class="size-4 shrink-0" :class="component === option.id ? 'text-cp-primary-text' : 'text-cp-text-tertiary'" />
+          <span class="min-w-0">
+            <strong class="block truncate text-cp-xs font-bold text-cp-text">{{ option.label }}</strong>
+            <span class="mt-0.5 block text-[9px] font-emphasis text-cp-text-quaternary">{{ option.description }}</span>
+          </span>
+        </button>
+      </div>
+    </section>
+
+    <section class="grid gap-2" :aria-label="`${activeComponent.label} Component Token`">
+      <div class="rounded-cp-lg bg-cp-bg-container px-3 py-3 shadow-cp-tertiary">
+        <p class="m-0 text-[10px] leading-normal font-emphasis text-cp-text-secondary">
+          调整 {{ activeComponent.label }} 的 Component / Alias Token；未修改的值继续由全局 Seed / Alias 算法生成。
+        </p>
+      </div>
+
+      <template v-for="token in visibleTokens" :key="token.name">
+        <ThemeColorTokenField
+          v-if="token.kind === 'color'"
+          :label="token.label"
+          :token="token.description"
+          :value="resolved.tokens[token.name]"
+          :overridden="overridden(token.name)"
+          @change="emit('change', token.name, $event)"
+          @reset="emit('reset', token.name)"
+        />
+        <ThemeTextTokenField
+          v-else-if="token.kind === 'shadow'"
+          :label="token.label"
+          :token="token.description"
+          :value="resolved.tokens[token.name]"
+          :overridden="overridden(token.name)"
+          @change="emit('change', token.name, $event)"
+          @reset="emit('reset', token.name)"
+        />
+        <ThemeNumberTokenField
+          v-else-if="token.componentKey"
+          :label="token.label"
+          :token="token.description"
+          :value="numericTokenValue(token.name)"
+          :min="token.min ?? 0"
+          :max="token.max ?? 100"
+          :overridden="componentOverridden(token.componentKey)"
+          @change="emit('componentNumber', token.componentKey, $event)"
+          @reset="emit('resetComponentNumber', token.componentKey)"
+        />
+      </template>
+
+      <div v-if="visibleTokens.length === 0" class="rounded-cp-lg bg-cp-fill-quaternary px-3 py-6 text-center text-cp-xs font-emphasis text-cp-text-quaternary">
+        没有匹配的 Component Token
+      </div>
+    </section>
+  </div>
+</template>
diff --git a/frontend/src/views/theme/components/ThemeDashboardPreview.vue b/frontend/src/views/theme/components/ThemeDashboardPreview.vue
new file mode 100644
index 000000000..a86846dc1
--- /dev/null
+++ b/frontend/src/views/theme/components/ThemeDashboardPreview.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { DashboardTrendKind } from '@/api/modules/dashboard'
+import { shallowRef } from 'vue'
+
+import DashboardContent from '@/views/dashboard/components/DashboardContent.vue'
+import {
+  dashboardSnapshotView,
+  dashboardTrendView,
+} from '@/views/dashboard/composables/useDashboard'
+
+import { themeDashboardSummary } from '../fixtures/dashboard'
+
+const snapshot = dashboardSnapshotView(themeDashboardSummary)
+const trend = dashboardTrendView(themeDashboardSummary.trend)
+const trendKind = shallowRef<DashboardTrendKind>('usage')
+</script>
+
+<template>
+  <DashboardContent
+    v-model:trend-kind="trendKind"
+    last-refreshed-at="刚刚更新"
+    :metrics="snapshot.metrics"
+    :trend-points="trend.points"
+    :trend-summary="trend.summary"
+    :health-timeline="snapshot.healthTimeline"
+    :account-usage="snapshot.accountUsage"
+    :wire-profiles="snapshot.wireProfiles"
+    :usage-records="snapshot.usageRecords"
+    :pool-summary="snapshot.poolSummary"
+    :capacity-info="snapshot.capacityInfo"
+    :rotation-strategy="snapshot.rotationStrategy"
+  />
+</template>
diff --git a/frontend/src/views/theme/components/ThemeEditorPreview.vue b/frontend/src/views/theme/components/ThemeEditorPreview.vue
new file mode 100644
index 000000000..66d6804a1
--- /dev/null
+++ b/frontend/src/views/theme/components/ThemeEditorPreview.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+import type { ThemeEditorPreview } from '../composables/useThemeEditor'
+import type { ThemeName } from '@/theme'
+
+import BaseSegmented from '@/components/base/BaseSegmented.vue'
+
+import ThemeComponentPreview from './ThemeComponentPreview.vue'
+import ThemeDashboardPreview from './ThemeDashboardPreview.vue'
+import ThemePreviewCanvas from './ThemePreviewCanvas.vue'
+
+defineProps<{
+  theme: ThemeName
+  style: CSSProperties
+}>()
+
+const preview = defineModel<ThemeEditorPreview>({ required: true })
+
+const previewOptions = [
+  { label: '首页画板', value: 'page' },
+  { label: '组件概览', value: 'components' },
+]
+</script>
+
+<template>
+  <section class="grid h-full min-h-0 grid-rows-[auto_minmax(0,1fr)] gap-3 overflow-hidden" aria-label="主题实时预览">
+    <header class="shrink-0 flex flex-wrap items-center justify-between gap-3 rounded-cp-lg bg-cp-bg-container px-3 py-2.5 shadow-cp-tertiary">
+      <div>
+        <strong class="block text-cp-sm font-heavy text-cp-text">实时预览</strong>
+        <span class="mt-0.5 block text-[9px] font-emphasis text-cp-text-quaternary">真实组件在影子环境隔离渲染，拖动画板并缩放检查细节</span>
+      </div>
+      <BaseSegmented v-model="preview" label="预览类型" size="sm" :options="previewOptions" />
+    </header>
+
+    <ThemePreviewCanvas
+      class="h-full min-h-0"
+      :theme="theme"
+      :style="style"
+    >
+      <ThemeDashboardPreview v-if="preview === 'page'" />
+      <ThemeComponentPreview v-else />
+    </ThemePreviewCanvas>
+  </section>
+</template>
diff --git a/frontend/src/views/theme/components/ThemeGlobalTokenPanel.vue b/frontend/src/views/theme/components/ThemeGlobalTokenPanel.vue
new file mode 100644
index 000000000..07b075cbd
--- /dev/null
+++ b/frontend/src/views/theme/components/ThemeGlobalTokenPanel.vue
@@ -0,0 +1,316 @@
+<script setup lang="ts">
+import type {
+  ThemeEditorDraft,
+  ThemeEditorGlobalCategory,
+} from '../composables/useThemeEditor'
+import type {
+  ResolvedTheme,
+  ThemeColorPreset,
+  ThemeColorPresetId,
+  ThemeMode,
+  ThemeSeedOverrides,
+} from '@/theme'
+
+import { Check, ChevronDown, Laptop, Moon, Sun } from '@lucide/vue'
+import { computed } from 'vue'
+
+import BaseSegmented from '@/components/base/BaseSegmented.vue'
+import { THEME_COLOR_PRESETS } from '@/theme'
+
+import ThemeColorTokenField from './ThemeColorTokenField.vue'
+import ThemeNumberTokenField from './ThemeNumberTokenField.vue'
+
+const props = defineProps<{
+  draft: ThemeEditorDraft
+  resolved: ResolvedTheme
+  query: string
+}>()
+
+const emit = defineEmits<{
+  mode: [value: ThemeMode]
+  preset: [value: ThemeColorPresetId]
+  primary: [value: string]
+  seedColor: [
+    key: Exclude<
+      keyof ThemeSeedOverrides,
+      'fontSize' | 'sizeUnit' | 'sizeStep' | 'controlHeight' | 'borderRadius' | 'shadowStrength'
+    >,
+    value: string,
+  ]
+  seedNumber: [
+    key: 'fontSize' | 'sizeUnit' | 'sizeStep' | 'controlHeight' | 'borderRadius' | 'shadowStrength',
+    value: number,
+  ]
+  resetSeed: [key: keyof ThemeSeedOverrides]
+}>()
+
+const category = defineModel<ThemeEditorGlobalCategory>('category', { required: true })
+
+const colorPresets = THEME_COLOR_PRESETS.map(preset => preset.seed)
+const categoryOptions = [
+  { label: '颜色', value: 'color' },
+  { label: '尺寸', value: 'size' },
+  { label: '风格', value: 'style' },
+]
+const modeOptions = [
+  { label: '跟随系统', value: 'system', icon: Laptop },
+  { label: '浅色', value: 'light', icon: Sun },
+  { label: '深色', value: 'dark', icon: Moon },
+]
+
+const colorFields = computed(() => [
+  {
+    key: 'colorSuccess' as const,
+    label: '成功色',
+    token: 'colorSuccess',
+    value: props.resolved.seedTokens.colorSuccess,
+    description: '成功反馈与状态',
+  },
+  {
+    key: 'colorWarning' as const,
+    label: '警告色',
+    token: 'colorWarning',
+    value: props.resolved.seedTokens.colorWarning,
+    description: '额度与风险提醒',
+  },
+  {
+    key: 'colorError' as const,
+    label: '错误色',
+    token: 'colorError',
+    value: props.resolved.seedTokens.colorError,
+    description: '失败与破坏性操作',
+  },
+  {
+    key: 'colorInfo' as const,
+    label: '信息色',
+    token: 'colorInfo',
+    value: props.resolved.seedTokens.colorInfo,
+    description: '系统与请求信息',
+  },
+  {
+    key: 'colorLink' as const,
+    label: '链接色',
+    token: 'colorLink',
+    value: props.resolved.seedTokens.colorLink,
+    description: '链接与跳转',
+  },
+  {
+    key: 'colorTextBase' as const,
+    label: '基础文本色',
+    token: 'colorTextBase',
+    value: props.resolved.seedTokens.colorTextBase,
+    description: '正文与信息层级',
+  },
+  {
+    key: 'colorBgBase' as const,
+    label: '基础背景色',
+    token: 'colorBgBase',
+    value: props.resolved.seedTokens.colorBgBase,
+    description: '页面与容器基底',
+  },
+].filter(field => matches(`${field.label} ${field.token} ${field.description}`)))
+
+const derivedTokens = computed(() => Object.entries(props.resolved.tokens)
+  .filter(([name]) => name.startsWith('--cp-color-primary')
+    || name.startsWith('--cp-color-bg-')
+    || name.startsWith('--cp-color-fill-')
+    || name.startsWith('--cp-color-text-'))
+  .filter(([name]) => matches(name))
+  .slice(0, 28))
+
+function matches(value: string) {
+  const query = props.query.trim().toLocaleLowerCase()
+  return !query || value.toLocaleLowerCase().includes(query)
+}
+
+function seedOverridden(key: keyof ThemeSeedOverrides) {
+  return Object.hasOwn(props.draft.customization.seed ?? {}, key)
+}
+
+function presetSwatches(preset: ThemeColorPreset) {
+  return [
+    preset.appearance?.light?.colorBgBase ?? '#FFFFFF',
+    preset.seed,
+    preset.appearance?.dark?.colorBgBase ?? '#111A29',
+  ]
+}
+</script>
+
+<template>
+  <div class="grid gap-4">
+    <div class="grid gap-2 rounded-cp-lg bg-cp-bg-container p-2 shadow-cp-tertiary">
+      <BaseSegmented
+        :model-value="draft.mode"
+        label="主题模式"
+        display="icon"
+        :options="modeOptions"
+        class="w-full"
+        @update:model-value="emit('mode', $event as ThemeMode)"
+      />
+    </div>
+
+    <BaseSegmented
+      v-model="category"
+      label="全局 Token 分类"
+      :options="categoryOptions"
+      class="w-full"
+    />
+
+    <template v-if="category === 'color'">
+      <section v-if="matches('预置主题 品牌色 colorPrimary')" class="grid gap-2" aria-labelledby="theme-preset-title">
+        <div class="flex items-center justify-between px-1">
+          <h3 id="theme-preset-title" class="m-0 text-cp font-heavy text-cp-text">
+            品牌色
+          </h3>
+          <code class="font-mono text-[10px] text-cp-text-quaternary">colorPrimary</code>
+        </div>
+        <div class="grid grid-cols-2 gap-2" role="radiogroup" aria-label="预置主题">
+          <button
+            v-for="preset in THEME_COLOR_PRESETS"
+            :key="preset.id"
+            type="button"
+            role="radio"
+            class="relative flex min-h-20 flex-col items-stretch justify-between gap-2 rounded-cp-lg bg-cp-fill-quaternary p-2.5 text-left outline-none transition-[background-color,box-shadow] duration-150 hover:bg-cp-bg-text-hover focus-visible:ring-2 focus-visible:ring-cp-control-outline"
+            :class="draft.color === preset.id ? 'bg-cp-control-item-bg-active shadow-cp-tertiary' : undefined"
+            :aria-checked="draft.color === preset.id"
+            :aria-label="`${preset.label}：${preset.description}`"
+            :title="preset.description"
+            @click="emit('preset', preset.id)"
+          >
+            <span class="flex h-4 overflow-hidden rounded-full shadow-cp-tertiary" aria-hidden="true">
+              <span
+                v-for="swatch in presetSwatches(preset)"
+                :key="swatch"
+                class="flex-1"
+                :style="{ backgroundColor: swatch }"
+              />
+            </span>
+            <span class="min-w-0 pr-4">
+              <strong class="block text-cp-xs font-heavy text-cp-text">{{ preset.label }}</strong>
+              <span class="mt-0.5 block truncate text-[9px] font-emphasis text-cp-text-quaternary">{{ preset.description }}</span>
+            </span>
+            <Check v-if="draft.color === preset.id" class="absolute right-2 bottom-2 size-3 text-cp-primary-text" stroke-width="3" />
+          </button>
+        </div>
+        <ThemeColorTokenField
+          label="品牌主色"
+          token="colorPrimary"
+          :value="resolved.seedTokens.colorPrimary"
+          description="完整色阶与界面基调"
+          :presets="colorPresets"
+          :overridden="draft.color === 'custom'"
+          @change="emit('primary', $event)"
+          @reset="emit('preset', 'relay-blue')"
+        />
+      </section>
+
+      <section v-if="colorFields.length > 0" class="grid gap-2" aria-labelledby="theme-semantic-title">
+        <h3 id="theme-semantic-title" class="m-0 px-1 text-cp font-heavy text-cp-text">
+          功能色与中性色
+        </h3>
+        <ThemeColorTokenField
+          v-for="field in colorFields"
+          :key="field.key"
+          :label="field.label"
+          :token="field.token"
+          :value="field.value"
+          :description="field.description"
+          :presets="colorPresets"
+          :overridden="seedOverridden(field.key)"
+          @change="emit('seedColor', field.key, $event)"
+          @reset="emit('resetSeed', field.key)"
+        />
+      </section>
+
+      <details v-if="derivedTokens.length > 0" class="group rounded-cp-lg bg-cp-bg-container shadow-cp-tertiary">
+        <summary class="flex cursor-pointer list-none items-center justify-between gap-3 px-3 py-3 text-cp-sm font-bold text-cp-text">
+          派生变量 Map / Alias Token
+          <ChevronDown class="size-3.5 transition-transform duration-150 group-open:rotate-180" />
+        </summary>
+        <div class="grid gap-1 px-2 pb-2">
+          <div
+            v-for="([name, value]) in derivedTokens"
+            :key="name"
+            class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3 rounded-cp bg-cp-fill-quaternary px-2.5 py-2"
+          >
+            <code class="truncate font-mono text-[9px] text-cp-text-secondary">{{ name.replace('--cp-', '') }}</code>
+            <span class="flex items-center gap-2">
+              <span class="size-3 rounded-full shadow-cp-tertiary" :style="{ backgroundColor: value }" />
+              <code class="font-mono text-[9px] text-cp-text-quaternary">{{ value }}</code>
+            </span>
+          </div>
+        </div>
+      </details>
+    </template>
+
+    <section v-else-if="category === 'size'" class="grid gap-2" aria-label="尺寸 Token">
+      <ThemeNumberTokenField
+        label="基础字号"
+        token="fontSize"
+        :value="resolved.seedTokens.fontSize"
+        :min="11"
+        :max="17"
+        :overridden="seedOverridden('fontSize')"
+        @change="emit('seedNumber', 'fontSize', $event)"
+        @reset="emit('resetSeed', 'fontSize')"
+      />
+      <ThemeNumberTokenField
+        label="基础间距"
+        token="sizeUnit"
+        :value="resolved.seedTokens.sizeUnit"
+        :min="3"
+        :max="6"
+        :overridden="seedOverridden('sizeUnit')"
+        @change="emit('seedNumber', 'sizeUnit', $event)"
+        @reset="emit('resetSeed', 'sizeUnit')"
+      />
+      <ThemeNumberTokenField
+        label="尺寸步长"
+        token="sizeStep"
+        :value="resolved.seedTokens.sizeStep"
+        :min="2"
+        :max="8"
+        :overridden="seedOverridden('sizeStep')"
+        @change="emit('seedNumber', 'sizeStep', $event)"
+        @reset="emit('resetSeed', 'sizeStep')"
+      />
+      <ThemeNumberTokenField
+        label="控件高度"
+        token="controlHeight"
+        :value="resolved.seedTokens.controlHeight"
+        :min="28"
+        :max="52"
+        :overridden="seedOverridden('controlHeight')"
+        @change="emit('seedNumber', 'controlHeight', $event)"
+        @reset="emit('resetSeed', 'controlHeight')"
+      />
+    </section>
+
+    <section v-else class="grid gap-2" aria-label="风格 Token">
+      <div class="rounded-cp-lg bg-cp-primary-bg px-3 py-3 text-[10px] leading-[1.5] font-emphasis text-cp-primary-text">
+        固定无边设计；圆角塑形，阴影分层。
+      </div>
+      <ThemeNumberTokenField
+        label="通用圆角"
+        token="borderRadius"
+        :value="resolved.seedTokens.borderRadius"
+        :min="0"
+        :max="20"
+        :overridden="seedOverridden('borderRadius')"
+        @change="emit('seedNumber', 'borderRadius', $event)"
+        @reset="emit('resetSeed', 'borderRadius')"
+      />
+      <ThemeNumberTokenField
+        label="阴影强度"
+        token="shadowStrength"
+        :value="resolved.seedTokens.shadowStrength"
+        :min="0"
+        :max="140"
+        unit="%"
+        :overridden="seedOverridden('shadowStrength')"
+        @change="emit('seedNumber', 'shadowStrength', $event)"
+        @reset="emit('resetSeed', 'shadowStrength')"
+      />
+    </section>
+  </div>
+</template>
diff --git a/frontend/src/views/theme/components/ThemeNumberTokenField.vue b/frontend/src/views/theme/components/ThemeNumberTokenField.vue
new file mode 100644
index 000000000..8e7acfada
--- /dev/null
+++ b/frontend/src/views/theme/components/ThemeNumberTokenField.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { RotateCcw } from '@lucide/vue'
+
+import BaseIconButton from '@/components/base/BaseIconButton.vue'
+import BaseNumberInput from '@/components/base/BaseNumberInput.vue'
+import BaseRange from '@/components/base/BaseRange.vue'
+
+defineProps<{
+  label: string
+  token: string
+  value: number
+  min: number
+  max: number
+  step?: number
+  unit?: string
+  overridden?: boolean
+}>()
+
+const emit = defineEmits<{
+  change: [value: number]
+  reset: []
+}>()
+</script>
+
+<template>
+  <div class="grid gap-3 rounded-cp-lg bg-cp-fill-quaternary px-3 py-3">
+    <div class="flex items-start justify-between gap-3">
+      <div class="min-w-0">
+        <div class="flex items-center gap-2">
+          <strong class="text-cp-sm font-bold text-cp-text">{{ label }}</strong>
+          <span v-if="overridden" class="rounded-full bg-cp-primary-bg px-1.5 py-0.5 text-[9px] font-heavy text-cp-primary-text">已修改</span>
+        </div>
+        <code class="mt-1 block truncate font-mono text-[10px] text-cp-text-quaternary">{{ token }}</code>
+      </div>
+      <div class="flex items-center gap-1">
+        <BaseNumberInput
+          :model-value="value"
+          :label="label"
+          :min="min"
+          :max="max"
+          :step="step ?? 1"
+          :unit="unit ?? 'px'"
+          @update:model-value="emit('change', $event)"
+        />
+        <BaseIconButton
+          v-if="overridden"
+          label="恢复派生值"
+          size="sm"
+          variant="ghost"
+          @click="emit('reset')"
+        >
+          <RotateCcw class="size-3.5" />
+        </BaseIconButton>
+      </div>
+    </div>
+    <BaseRange
+      :model-value="value"
+      :min="min"
+      :max="max"
+      :step="step ?? 1"
+      :label="label"
+      :unit="unit ?? 'px'"
+      @update:model-value="emit('change', $event)"
+    />
+  </div>
+</template>
diff --git a/frontend/src/views/theme/components/ThemePreviewCanvas.vue b/frontend/src/views/theme/components/ThemePreviewCanvas.vue
new file mode 100644
index 000000000..a5c9946f4
--- /dev/null
+++ b/frontend/src/views/theme/components/ThemePreviewCanvas.vue
@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+import type { ThemeName } from '@/theme'
+import { Maximize2, Minus, Move, Plus } from '@lucide/vue'
+import { computed, useTemplateRef } from 'vue'
+
+import BaseButton from '@/components/base/BaseButton.vue'
+import BaseIconButton from '@/components/base/BaseIconButton.vue'
+
+import { useThemePreviewCanvas } from '../composables/useThemePreviewCanvas'
+import ThemePreviewScope from './ThemePreviewScope.vue'
+
+defineProps<{
+  theme: ThemeName
+  style: CSSProperties
+}>()
+
+const viewport = useTemplateRef<HTMLElement>('viewport')
+const stage = useTemplateRef<HTMLElement>('stage')
+const boardWidth = 1600
+const boardHeight = 1808
+const {
+  canZoomIn,
+  canZoomOut,
+  dragging,
+  fitToViewport,
+  resetScale,
+  scale,
+  scalePercent,
+  zoomIn,
+  zoomOut,
+} = useThemePreviewCanvas({ viewport, stage, boardWidth, boardHeight })
+
+const stageStyle = computed<CSSProperties>(() => ({
+  width: `${boardWidth * scale.value}px`,
+  height: `${boardHeight * scale.value}px`,
+}))
+const boardStyle = computed<CSSProperties>(() => ({
+  width: `${boardWidth}px`,
+  height: `${boardHeight}px`,
+  zoom: scale.value,
+}))
+</script>
+
+<template>
+  <div
+    ref="viewport"
+    class="theme-preview-canvas relative min-h-0 overflow-hidden rounded-cp-lg bg-cp-bg-layout shadow-cp-secondary select-none"
+    :class="dragging ? 'cursor-grabbing' : 'cursor-grab'"
+    role="application"
+    tabindex="0"
+    aria-label="首页主题预览画板"
+  >
+    <div
+      ref="stage"
+      class="pointer-events-none absolute top-0 left-0 z-0 overflow-hidden"
+      data-theme-preview-stage
+      :data-scale="scalePercent"
+      :style="stageStyle"
+    >
+      <ThemePreviewScope
+        :theme="theme"
+        :style="style"
+      >
+        <div
+          class="overflow-hidden bg-cp-bg-layout p-6"
+          data-theme-preview-board
+          :style="boardStyle"
+        >
+          <slot />
+        </div>
+      </ThemePreviewScope>
+    </div>
+
+    <div
+      class="pointer-events-none absolute top-3 left-3 z-10 inline-flex items-center gap-2 rounded-cp bg-cp-bg-container/92 px-2.5 py-2 text-[10px] font-emphasis text-cp-text-secondary shadow-cp-tertiary backdrop-blur-sm"
+    >
+      <Move class="size-3.5 text-cp-primary-text" />
+      拖动空白处平移 · 滚轮缩放
+    </div>
+
+    <div
+      class="absolute top-3 right-3 z-10 flex items-center gap-1 rounded-cp-lg bg-cp-bg-container/94 p-1.5 shadow-cp-popup backdrop-blur-md"
+      data-canvas-control
+      @pointerdown.stop
+      @dblclick.stop
+      @wheel.stop
+    >
+      <BaseIconButton
+        label="缩小画板"
+        size="sm"
+        variant="ghost"
+        :disabled="!canZoomOut"
+        @click="zoomOut"
+      >
+        <Minus class="size-3.5" />
+      </BaseIconButton>
+      <BaseButton
+        size="sm"
+        variant="ghost"
+        class="min-w-14 px-2! font-mono tabular-nums"
+        title="恢复 100%"
+        @click="resetScale"
+      >
+        {{ scalePercent }}%
+      </BaseButton>
+      <BaseIconButton
+        label="放大画板"
+        size="sm"
+        variant="ghost"
+        :disabled="!canZoomIn"
+        @click="zoomIn"
+      >
+        <Plus class="size-3.5" />
+      </BaseIconButton>
+      <span class="mx-0.5 h-4 w-px bg-cp-fill-secondary" aria-hidden="true" />
+      <BaseIconButton label="适应画板" size="sm" variant="ghost" @click="fitToViewport()">
+        <Maximize2 class="size-3.5" />
+      </BaseIconButton>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.theme-preview-canvas {
+  background-image: radial-gradient(
+    circle,
+    color-mix(in srgb, var(--cp-color-text-quaternary) 24%, transparent) 1px,
+    transparent 1px
+  );
+  background-size: 18px 18px;
+}
+</style>
diff --git a/frontend/src/views/theme/components/ThemePreviewScope.vue b/frontend/src/views/theme/components/ThemePreviewScope.vue
new file mode 100644
index 000000000..18c806521
--- /dev/null
+++ b/frontend/src/views/theme/components/ThemePreviewScope.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+import type { ThemeColorTokens } from '@/composables/useThemeColor'
+import type { ThemeName } from '@/theme'
+
+import { computed, onMounted, shallowRef, useTemplateRef } from 'vue'
+
+import { provideThemeColorTokens } from '@/composables/useThemeColor'
+
+const props = defineProps<{
+  theme: ThemeName
+  style: CSSProperties
+}>()
+
+const host = useTemplateRef<HTMLElement>('host')
+const contentRoot = shallowRef<HTMLElement | null>(null)
+const themeTokens = computed<ThemeColorTokens>(() => props.style as ThemeColorTokens)
+
+provideThemeColorTokens(themeTokens)
+
+function serializeDocumentStyles() {
+  return Array.from(document.styleSheets, (styleSheet) => {
+    try {
+      return Array.from(styleSheet.cssRules, rule => rule.cssText).join('\n')
+    }
+    catch {
+      return ''
+    }
+  }).filter(Boolean).join('\n')
+}
+
+onMounted(() => {
+  if (!host.value)
+    return
+
+  const shadowRoot = host.value.attachShadow({ mode: 'open' })
+  const applicationStyles = document.createElement('style')
+  const previewRoot = document.createElement('div')
+
+  applicationStyles.dataset.themePreviewStyles = ''
+  applicationStyles.textContent = serializeDocumentStyles()
+  previewRoot.dataset.themePreviewRoot = ''
+
+  shadowRoot.append(applicationStyles, previewRoot)
+  contentRoot.value = previewRoot
+})
+</script>
+
+<template>
+  <div
+    ref="host"
+    class="block h-full min-h-0 w-full min-w-0"
+    data-theme-preview-shadow-host
+  >
+    <Teleport v-if="contentRoot" :to="contentRoot">
+      <div
+        class="h-full min-h-0 w-full min-w-0 bg-cp-bg-layout font-sans text-cp-text"
+        :data-theme="theme"
+        :style="style"
+      >
+        <slot />
+      </div>
+    </Teleport>
+  </div>
+</template>
diff --git a/frontend/src/views/theme/components/ThemeTextTokenField.vue b/frontend/src/views/theme/components/ThemeTextTokenField.vue
new file mode 100644
index 000000000..21d13cfa2
--- /dev/null
+++ b/frontend/src/views/theme/components/ThemeTextTokenField.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { RotateCcw } from '@lucide/vue'
+
+import BaseIconButton from '@/components/base/BaseIconButton.vue'
+import BaseInput from '@/components/base/BaseInput.vue'
+
+defineProps<{
+  label: string
+  token: string
+  value: string
+  overridden: boolean
+}>()
+
+const emit = defineEmits<{
+  change: [value: string]
+  reset: []
+}>()
+</script>
+
+<template>
+  <div class="grid gap-2 rounded-cp-lg bg-cp-fill-quaternary px-3 py-3">
+    <div class="flex items-center justify-between gap-3">
+      <div class="min-w-0">
+        <strong class="text-cp-sm font-bold text-cp-text">{{ label }}</strong>
+        <code class="mt-1 block truncate font-mono text-[10px] text-cp-text-quaternary">{{ token }}</code>
+      </div>
+      <BaseIconButton
+        v-if="overridden"
+        label="恢复派生值"
+        size="sm"
+        variant="ghost"
+        @click="emit('reset')"
+      >
+        <RotateCcw class="size-3.5" />
+      </BaseIconButton>
+    </div>
+    <BaseInput
+      :model-value="value"
+      :aria-label="label"
+      class="font-mono"
+      @update:model-value="emit('change', $event)"
+    />
+  </div>
+</template>
diff --git a/frontend/src/views/theme/composables/useThemeEditor.ts b/frontend/src/views/theme/composables/useThemeEditor.ts
new file mode 100644
index 000000000..17415ea3b
--- /dev/null
+++ b/frontend/src/views/theme/composables/useThemeEditor.ts
@@ -0,0 +1,326 @@
+import type {
+  ThemeColorId,
+  ThemeColorPresetId,
+  ThemeComponentOverrides,
+  ThemeCustomization,
+  ThemeMode,
+  ThemeName,
+  ThemeSeedOverrides,
+  ThemeTokenName,
+} from '@/theme'
+
+import { storeToRefs } from 'pinia'
+import { computed, ref, shallowRef, watch } from 'vue'
+
+import { useThemeStore } from '@/stores/modules/theme'
+import {
+  DEFAULT_CUSTOM_THEME_COLOR,
+  DEFAULT_THEME_COLOR,
+  DEFAULT_THEME_MODE,
+  isThemeColorId,
+  isThemeMode,
+  normalizeThemeCustomization,
+  resolveTheme,
+} from '@/theme'
+import { normalizeHexColor } from '@/utils/color'
+
+export type ThemeEditorScope = 'global' | 'component'
+export type ThemeEditorGlobalCategory = 'color' | 'size' | 'style'
+export type ThemeEditorPreview = 'page' | 'components'
+export type ThemeEditorComponent
+  = 'action'
+    | 'form'
+    | 'selection'
+    | 'surface'
+    | 'data'
+    | 'feedback'
+    | 'navigation'
+    | 'layout'
+
+export interface ThemeEditorDraft {
+  mode: ThemeMode
+  color: ThemeColorId
+  customColor: string
+  customization: ThemeCustomization
+}
+
+type NumericSeedKey = 'fontSize' | 'sizeUnit' | 'sizeStep' | 'controlHeight' | 'borderRadius' | 'shadowStrength'
+type ComponentNumberKey = keyof ThemeComponentOverrides
+type ColorSeedKey = Exclude<keyof ThemeSeedOverrides, NumericSeedKey>
+
+export function useThemeEditor() {
+  const themeStore = useThemeStore()
+  const {
+    themeMode,
+    themeColor,
+    customThemeColor,
+    themeCustomization,
+    effectiveTheme,
+  } = storeToRefs(themeStore)
+
+  const saved = ref(createStoreDraft())
+  const draft = ref(cloneDraft(saved.value))
+  const scope = shallowRef<ThemeEditorScope>('global')
+  const globalCategory = shallowRef<ThemeEditorGlobalCategory>('color')
+  const preview = shallowRef<ThemeEditorPreview>('page')
+  const previewTheme = shallowRef<ThemeName>(effectiveTheme.value)
+  const component = shallowRef<ThemeEditorComponent>('action')
+  const query = shallowRef('')
+
+  const resolvedPreview = computed(() => resolveTheme(
+    previewTheme.value,
+    draft.value.color,
+    draft.value.customColor,
+    draft.value.customization,
+  ))
+  const previewStyle = computed<Record<string, string>>(() => ({
+    ...resolvedPreview.value.tokens,
+    colorScheme: previewTheme.value,
+  }))
+  const modificationCount = computed(() => countDraftChanges(saved.value, draft.value))
+  const dirty = computed(() => modificationCount.value > 0)
+
+  watch(
+    [themeMode, themeColor, customThemeColor, themeCustomization],
+    () => {
+      const hadUnsavedChanges = dirty.value
+      saved.value = createStoreDraft()
+      if (!hadUnsavedChanges) {
+        draft.value = cloneDraft(saved.value)
+        previewTheme.value = resolvedDraftTheme(draft.value)
+      }
+    },
+    { deep: true },
+  )
+
+  watch(effectiveTheme, () => {
+    if (draft.value.mode === 'system')
+      previewTheme.value = effectiveTheme.value
+  })
+
+  function createStoreDraft(): ThemeEditorDraft {
+    return {
+      mode: themeMode.value,
+      color: themeColor.value,
+      customColor: customThemeColor.value,
+      customization: normalizeThemeCustomization(themeCustomization.value),
+    }
+  }
+
+  function selectPreset(color: ThemeColorPresetId) {
+    draft.value = {
+      ...draft.value,
+      color,
+    }
+  }
+
+  function setPrimaryColor(color: string) {
+    const normalized = normalizeHexColor(color)
+    if (!normalized)
+      return
+    draft.value = {
+      ...draft.value,
+      color: 'custom',
+      customColor: normalized,
+    }
+  }
+
+  function setMode(mode: ThemeMode) {
+    draft.value = { ...draft.value, mode }
+    previewTheme.value = mode === 'system' ? effectiveTheme.value : mode
+  }
+
+  function setSeedColor(key: ColorSeedKey, color: string) {
+    const normalized = normalizeHexColor(color)
+    if (!normalized)
+      return
+    updateSeed({ [key]: normalized })
+  }
+
+  function setSeedNumber(key: NumericSeedKey, value: number) {
+    if (!Number.isFinite(value))
+      return
+    updateSeed({ [key]: value })
+  }
+
+  function resetSeed(key: keyof ThemeSeedOverrides) {
+    const nextSeed = { ...(draft.value.customization.seed ?? {}) }
+    delete nextSeed[key]
+    setCustomization({
+      ...draft.value.customization,
+      seed: Object.keys(nextSeed).length > 0 ? nextSeed : undefined,
+    })
+  }
+
+  function setComponentNumber(key: ComponentNumberKey, value: number) {
+    if (!Number.isFinite(value))
+      return
+    setCustomization(normalizeThemeCustomization({
+      ...draft.value.customization,
+      component: {
+        ...(draft.value.customization.component ?? {}),
+        [key]: value,
+      },
+    }))
+  }
+
+  function resetComponentNumber(key: ComponentNumberKey) {
+    const component = { ...(draft.value.customization.component ?? {}) }
+    delete component[key]
+    setCustomization({
+      ...draft.value.customization,
+      component: Object.keys(component).length > 0 ? component : undefined,
+    })
+  }
+
+  function setTokenOverride(name: ThemeTokenName, value: string) {
+    setCustomization(normalizeThemeCustomization({
+      ...draft.value.customization,
+      tokenOverrides: {
+        ...(draft.value.customization.tokenOverrides ?? {}),
+        [name]: value,
+      },
+    }))
+  }
+
+  function resetTokenOverride(name: ThemeTokenName) {
+    const tokenOverrides = { ...(draft.value.customization.tokenOverrides ?? {}) }
+    delete tokenOverrides[name]
+    setCustomization({
+      ...draft.value.customization,
+      tokenOverrides: Object.keys(tokenOverrides).length > 0 ? tokenOverrides : undefined,
+    })
+  }
+
+  function resetDraft() {
+    draft.value = cloneDraft(saved.value)
+    previewTheme.value = resolvedDraftTheme(draft.value)
+  }
+
+  function restoreDefaults() {
+    draft.value = {
+      mode: DEFAULT_THEME_MODE,
+      color: DEFAULT_THEME_COLOR,
+      customColor: DEFAULT_CUSTOM_THEME_COLOR,
+      customization: {},
+    }
+    previewTheme.value = effectiveTheme.value
+  }
+
+  function save(event?: MouseEvent) {
+    const normalizedDraft = normalizeDraft(draft.value)
+    if (!normalizedDraft)
+      return false
+    const savedSuccessfully = themeStore.setThemeConfiguration(normalizedDraft, event)
+    if (!savedSuccessfully)
+      return false
+    saved.value = cloneDraft(normalizedDraft)
+    draft.value = cloneDraft(normalizedDraft)
+    return true
+  }
+
+  function updateSeed(patch: Partial<ThemeSeedOverrides>) {
+    setCustomization(normalizeThemeCustomization({
+      ...draft.value.customization,
+      seed: {
+        ...(draft.value.customization.seed ?? {}),
+        ...patch,
+      },
+    }))
+  }
+
+  function setCustomization(customization: ThemeCustomization) {
+    draft.value = {
+      ...draft.value,
+      customization: normalizeThemeCustomization(customization),
+    }
+  }
+
+  function resolvedDraftTheme(value: ThemeEditorDraft): ThemeName {
+    return value.mode === 'system' ? effectiveTheme.value : value.mode
+  }
+
+  return {
+    draft,
+    scope,
+    globalCategory,
+    preview,
+    previewTheme,
+    component,
+    query,
+    resolvedPreview,
+    previewStyle,
+    modificationCount,
+    dirty,
+    selectPreset,
+    setPrimaryColor,
+    setMode,
+    setSeedColor,
+    setSeedNumber,
+    resetSeed,
+    setComponentNumber,
+    resetComponentNumber,
+    setTokenOverride,
+    resetTokenOverride,
+    resetDraft,
+    restoreDefaults,
+    save,
+  }
+}
+
+function normalizeDraft(value: ThemeEditorDraft): ThemeEditorDraft | null {
+  const customColor = normalizeHexColor(value.customColor)
+  if (!isThemeMode(value.mode) || !isThemeColorId(value.color) || !customColor)
+    return null
+  return {
+    mode: value.mode,
+    color: value.color,
+    customColor,
+    customization: normalizeThemeCustomization(value.customization),
+  }
+}
+
+function cloneDraft(value: ThemeEditorDraft): ThemeEditorDraft {
+  return {
+    ...value,
+    customization: normalizeThemeCustomization({
+      seed: { ...(value.customization.seed ?? {}) },
+      component: { ...(value.customization.component ?? {}) },
+      tokenOverrides: { ...(value.customization.tokenOverrides ?? {}) },
+    }),
+  }
+}
+
+function countDraftChanges(saved: ThemeEditorDraft, draft: ThemeEditorDraft) {
+  let count = 0
+  if (saved.mode !== draft.mode)
+    count += 1
+  if (saved.color !== draft.color || saved.customColor !== draft.customColor)
+    count += 1
+
+  const savedSeed = saved.customization.seed ?? {}
+  const draftSeed = draft.customization.seed ?? {}
+  for (const key of new Set([...Object.keys(savedSeed), ...Object.keys(draftSeed)])) {
+    if (savedSeed[key as keyof ThemeSeedOverrides] !== draftSeed[key as keyof ThemeSeedOverrides])
+      count += 1
+  }
+
+  const savedTokens = saved.customization.tokenOverrides ?? {}
+  const draftTokens = draft.customization.tokenOverrides ?? {}
+  for (const key of new Set([...Object.keys(savedTokens), ...Object.keys(draftTokens)])) {
+    if (savedTokens[key as ThemeTokenName] !== draftTokens[key as ThemeTokenName])
+      count += 1
+  }
+
+  const savedComponent = saved.customization.component ?? {}
+  const draftComponent = draft.customization.component ?? {}
+  for (const key of new Set([...Object.keys(savedComponent), ...Object.keys(draftComponent)])) {
+    if (
+      savedComponent[key as keyof ThemeComponentOverrides]
+      !== draftComponent[key as keyof ThemeComponentOverrides]
+    ) {
+      count += 1
+    }
+  }
+  return count
+}
diff --git a/frontend/src/views/theme/composables/useThemePreviewCanvas.ts b/frontend/src/views/theme/composables/useThemePreviewCanvas.ts
new file mode 100644
index 000000000..20f11f2b8
--- /dev/null
+++ b/frontend/src/views/theme/composables/useThemePreviewCanvas.ts
@@ -0,0 +1,216 @@
+import type { ShallowRef } from 'vue'
+import { useResizeObserver } from '@vueuse/core'
+import { gsap } from 'gsap'
+import { Draggable } from 'gsap/Draggable'
+import { computed, nextTick, onBeforeUnmount, onMounted, readonly, shallowRef } from 'vue'
+
+gsap.registerPlugin(Draggable)
+
+interface ThemePreviewCanvasOptions {
+  viewport: ShallowRef<HTMLElement | null>
+  stage: ShallowRef<HTMLElement | null>
+  boardWidth: number
+  boardHeight: number
+}
+
+const minimumScale = 0.25
+const maximumScale = 1.5
+const zoomStep = 0.1
+const scaleGrid = 0.05
+const viewportPadding = 48
+
+export function useThemePreviewCanvas(options: ThemePreviewCanvasOptions) {
+  const scale = shallowRef(1)
+  const x = shallowRef(0)
+  const y = shallowRef(0)
+  const ready = shallowRef(false)
+  const fitted = shallowRef(true)
+  const dragging = shallowRef(false)
+  let draggable: Draggable | undefined
+
+  const scalePercent = computed(() => Math.round(scale.value * 100))
+  const canZoomOut = computed(() => scale.value > minimumScale)
+  const canZoomIn = computed(() => scale.value < maximumScale)
+
+  function clampScale(value: number) {
+    const clamped = Math.min(maximumScale, Math.max(minimumScale, value))
+    return Math.round(Math.round(clamped / scaleGrid) * scaleGrid * 100) / 100
+  }
+
+  function applyPosition() {
+    const stage = options.stage.value
+    if (!stage)
+      return
+
+    gsap.killTweensOf(stage)
+    gsap.set(stage, {
+      left: x.value,
+      top: y.value,
+      clearProps: 'transform',
+    })
+    draggable?.update()
+  }
+
+  function viewportCenter() {
+    const rect = options.viewport.value?.getBoundingClientRect()
+    return {
+      x: (rect?.width ?? 0) / 2,
+      y: (rect?.height ?? 0) / 2,
+    }
+  }
+
+  function setScale(nextScale: number, anchor = viewportCenter()) {
+    const normalizedScale = clampScale(nextScale)
+    if (normalizedScale === scale.value)
+      return
+
+    const previousScale = scale.value
+    const boardX = (anchor.x - x.value) / previousScale
+    const boardY = (anchor.y - y.value) / previousScale
+
+    scale.value = normalizedScale
+    x.value = Math.round(anchor.x - boardX * normalizedScale)
+    y.value = Math.round(anchor.y - boardY * normalizedScale)
+    fitted.value = false
+    applyPosition()
+  }
+
+  function zoomIn() {
+    setScale(scale.value + zoomStep)
+  }
+
+  function zoomOut() {
+    setScale(scale.value - zoomStep)
+  }
+
+  function resetScale() {
+    setScale(1)
+  }
+
+  function fitToViewport() {
+    const viewport = options.viewport.value
+    if (!viewport)
+      return
+
+    const rect = viewport.getBoundingClientRect()
+    const availableWidth = Math.max(0, rect.width - viewportPadding * 2)
+    const availableHeight = Math.max(0, rect.height - viewportPadding * 2)
+    const rawScale = Math.min(
+      availableWidth / options.boardWidth,
+      availableHeight / options.boardHeight,
+    )
+    const nextScale = clampScale(Math.floor(rawScale / scaleGrid) * scaleGrid)
+
+    scale.value = nextScale
+    x.value = Math.round((rect.width - options.boardWidth * nextScale) / 2)
+    y.value = Math.round((rect.height - options.boardHeight * nextScale) / 2)
+    fitted.value = true
+    applyPosition()
+  }
+
+  function handleWheel(event: WheelEvent) {
+    event.preventDefault()
+    const viewport = options.viewport.value
+    if (!viewport)
+      return
+
+    const rect = viewport.getBoundingClientRect()
+    const direction = event.deltaY > 0 ? -1 : 1
+    setScale(
+      scale.value + direction * zoomStep,
+      { x: event.clientX - rect.left, y: event.clientY - rect.top },
+    )
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === '+' || event.key === '=') {
+      event.preventDefault()
+      zoomIn()
+      return
+    }
+    if (event.key === '-') {
+      event.preventDefault()
+      zoomOut()
+      return
+    }
+    if (event.key === '0') {
+      event.preventDefault()
+      fitToViewport()
+    }
+  }
+
+  function handleDoubleClick() {
+    fitToViewport()
+  }
+
+  function createDraggable() {
+    const viewport = options.viewport.value
+    const stage = options.stage.value
+    if (!viewport || !stage)
+      return
+
+    draggable = Draggable.create(stage, {
+      type: 'left,top',
+      trigger: viewport,
+      cursor: 'grab',
+      activeCursor: 'grabbing',
+      dragClickables: false,
+      zIndexBoost: false,
+      liveSnap: {
+        x: value => Math.round(value),
+        y: value => Math.round(value),
+      },
+      onPress() {
+        dragging.value = true
+        fitted.value = false
+        gsap.killTweensOf(stage)
+      },
+      onDrag() {
+        x.value = Math.round(this.x)
+        y.value = Math.round(this.y)
+      },
+      onRelease() {
+        dragging.value = false
+      },
+      onDragEnd() {
+        dragging.value = false
+      },
+    })[0]
+  }
+
+  useResizeObserver(options.viewport, () => {
+    if (ready.value && fitted.value)
+      fitToViewport()
+  })
+
+  onMounted(async () => {
+    await nextTick()
+    options.viewport.value?.addEventListener('wheel', handleWheel, { passive: false })
+    options.viewport.value?.addEventListener('keydown', handleKeydown)
+    options.viewport.value?.addEventListener('dblclick', handleDoubleClick)
+    createDraggable()
+    fitToViewport()
+    ready.value = true
+  })
+
+  onBeforeUnmount(() => {
+    draggable?.kill()
+    options.viewport.value?.removeEventListener('wheel', handleWheel)
+    options.viewport.value?.removeEventListener('keydown', handleKeydown)
+    options.viewport.value?.removeEventListener('dblclick', handleDoubleClick)
+    if (options.stage.value)
+      gsap.killTweensOf(options.stage.value)
+  })
+
+  return {
+    canZoomIn,
+    canZoomOut,
+    dragging,
+    fitToViewport,
+    resetScale,
+    scale: readonly(scale),
+    scalePercent,
+    zoomIn,
+    zoomOut,
+  }
+}
diff --git a/frontend/src/views/theme/fixtures/dashboard.ts b/frontend/src/views/theme/fixtures/dashboard.ts
new file mode 100644
index 000000000..47f4e2641
--- /dev/null
+++ b/frontend/src/views/theme/fixtures/dashboard.ts
@@ -0,0 +1,386 @@
+import type {
+  DashboardHealthStatus,
+  DashboardSummaryResponse,
+  DashboardTrendPoint,
+} from '@/api/modules/dashboard'
+import type { UsageRecord } from '@/api/modules/usage'
+
+interface PreviewUsageRecordOptions {
+  id: string
+  accountEmail: string
+  provider: 'openai' | 'xai'
+  authenticationKind: 'oauth' | 'api_key'
+  model: string
+  transport: 'http_sse' | 'websocket' | 'http'
+  reasoningEffort: string
+  inputTokens: number
+  outputTokens: number
+  cachedTokens: number
+  firstTokenMs: number
+  latencyMs: number
+  estimatedCost: string
+  createdAt: string
+  createdAtDisplay: string
+  clientIp: string
+  userAgent: string
+  compact?: boolean
+}
+
+const requestSeries = [
+  860,
+  920,
+  780,
+  1120,
+  1280,
+  1050,
+  1360,
+  1490,
+  1320,
+  1720,
+  1600,
+  1880,
+  2010,
+  1940,
+  2240,
+  2180,
+  2480,
+  2350,
+  2670,
+  2530,
+  2860,
+  2720,
+  3040,
+  3180,
+]
+
+function previewTrendPoint(requestsValue: number, index: number): DashboardTrendPoint {
+  const inputTokensValue = requestsValue * (58 + (index % 4) * 4)
+  const outputTokensValue = requestsValue * (18 + (index % 3) * 3)
+  const cachedTokensValue = Math.round(inputTokensValue * (0.36 + (index % 5) * 0.035))
+  const errorsValue = index % 7 === 0 ? Math.max(2, Math.round(requestsValue * 0.012)) : 0
+  const hour = String(index).padStart(2, '0')
+  const successRateValue = ((requestsValue - errorsValue) / requestsValue) * 100
+
+  return {
+    time: `${hour}:00`,
+    bucket: `2026-08-23T${hour}:00:00+08:00`,
+    label: `${hour}:00`,
+    requests: requestsValue.toLocaleString('zh-CN'),
+    requestsValue,
+    inputTokens: inputTokensValue.toLocaleString('zh-CN'),
+    inputTokensValue,
+    outputTokens: outputTokensValue.toLocaleString('zh-CN'),
+    outputTokensValue,
+    cachedTokens: cachedTokensValue.toLocaleString('zh-CN'),
+    cachedTokensValue,
+    cacheHitRateValue: cachedTokensValue / inputTokensValue,
+    tokensValue: inputTokensValue + outputTokensValue,
+    errors: errorsValue.toLocaleString('zh-CN'),
+    errorsValue,
+    latency: `${410 + index * 7} ms`,
+    latencyValue: 410 + index * 7,
+    maxLatency: `${760 + index * 12} ms`,
+    maxLatencyValue: 760 + index * 12,
+    minLatency: `${180 + index * 3} ms`,
+    minLatencyValue: 180 + index * 3,
+    successRate: `${successRateValue.toFixed(1)}%`,
+    successRateValue,
+  }
+}
+
+function previewHealthStatus(index: number): DashboardHealthStatus {
+  if (index === 17)
+    return 'unstable'
+  if (index === 31)
+    return 'low_sample'
+  return 'stable'
+}
+
+function previewUsageRecord(options: PreviewUsageRecordOptions): UsageRecord {
+  const totalTokens = options.inputTokens + options.outputTokens
+  const reasoningTokens = Math.round(options.outputTokens * 0.32)
+  const stream = options.transport !== 'http'
+
+  return {
+    id: options.id,
+    requestId: `req_${options.id}`,
+    clientApiKeyId: 'preview-client-key',
+    kind: 'request.completed',
+    provider: options.provider,
+    authenticationKind: options.authenticationKind,
+    accountId: `account_${options.id}`,
+    accountEmail: options.accountEmail,
+    accountName: options.accountEmail.split('@')[0] ?? null,
+    route: stream ? '/v1/responses' : '/v1/chat/completions',
+    model: options.model,
+    requestedModel: options.model,
+    upstreamModel: options.model,
+    serviceTier: options.provider === 'openai' ? 'priority' : 'standard',
+    statusCode: 200,
+    transport: options.transport,
+    protocol: stream ? 'responses' : 'chat_completions',
+    httpVersion: options.transport === 'websocket' ? null : 'HTTP/2',
+    clientStatusCode: 200,
+    upstreamStatusCode: 200,
+    websocketPool: options.transport === 'websocket' ? { kind: 'warm' } : null,
+    imageGenerationRequested: false,
+    imageGenerationSucceeded: null,
+    latencyDetails: {
+      transportDecisionWaitMs: 4,
+      upstreamHeadersMs: Math.max(24, options.firstTokenMs - 36),
+      firstEventMs: options.firstTokenMs,
+      firstReasoningMs: options.firstTokenMs + 18,
+      firstTextMs: options.firstTokenMs + 64,
+      firstTokenMs: options.firstTokenMs,
+      openaiProcessingMs: options.provider === 'openai' ? options.latencyMs - 72 : undefined,
+    },
+    attemptIndex: 0,
+    attemptCount: 1,
+    responseId: `resp_${options.id}`,
+    upstreamRequestId: `up_${options.id}`,
+    latencyMs: options.latencyMs,
+    firstTokenMs: options.firstTokenMs,
+    inputTokens: options.inputTokens,
+    outputTokens: options.outputTokens,
+    cachedTokens: options.cachedTokens,
+    cacheWriteTokens: 0,
+    reasoningTokens,
+    imageInputTokens: 0,
+    imageOutputTokens: 0,
+    message: '请求成功',
+    metadata: {
+      stream,
+      apiKind: stream ? 'responses' : 'chat',
+    },
+    createdAt: options.createdAt,
+    createdAtDisplay: options.createdAtDisplay,
+    clientIp: options.clientIp,
+    userAgent: options.userAgent,
+    reasoningEffort: options.reasoningEffort,
+    reasoningPreset: options.reasoningEffort,
+    compact: options.compact ?? false,
+    requestKind: stream ? 'responses' : 'chat',
+    subagentKind: null,
+    tokenDetails: {
+      inputTokens: options.inputTokens,
+      outputTokens: options.outputTokens,
+      cachedTokens: options.cachedTokens,
+      cacheWriteTokens: 0,
+      reasoningTokens,
+      imageInputTokens: 0,
+      imageOutputTokens: 0,
+      totalTokens,
+      inputTokensDisplay: options.inputTokens.toLocaleString('zh-CN'),
+      outputTokensDisplay: options.outputTokens.toLocaleString('zh-CN'),
+      cachedTokensDisplay: options.cachedTokens.toLocaleString('zh-CN'),
+      cacheWriteTokensDisplay: '0',
+      reasoningTokensDisplay: reasoningTokens.toLocaleString('zh-CN'),
+      imageInputTokensDisplay: '0',
+      imageOutputTokensDisplay: '0',
+      totalTokensDisplay: totalTokens.toLocaleString('zh-CN'),
+    },
+    billing: {
+      inputAmountDisplay: options.estimatedCost,
+      outputAmountDisplay: options.estimatedCost,
+      cacheReadAmountDisplay: '$0.0004',
+      cacheWriteAmountDisplay: '$0.0000',
+      standardAmountDisplay: options.estimatedCost,
+      totalAmountDisplay: options.estimatedCost,
+      inputPriceDisplay: '$1.25 / 1M',
+      outputPriceDisplay: '$10.00 / 1M',
+      cacheReadPriceDisplay: '$0.125 / 1M',
+      cacheWritePriceDisplay: '$0.00 / 1M',
+      serviceTierDisplay: options.provider === 'openai' ? 'Priority' : 'Standard',
+      multiplierDisplay: '1.0x',
+    },
+    costs: [{ currency: 'USD', estimatedAmount: options.estimatedCost }],
+    costCoverage: { known: 1, partial: 0, unknown: 0, notBillable: 0 },
+    firstTokenLatencyMs: options.firstTokenMs,
+    firstTokenLatencyMsDisplay: `${options.firstTokenMs} ms`,
+    latencyMsDisplay: `${options.latencyMs} ms`,
+    logicalOutcome: 'success',
+  }
+}
+
+export const themeDashboardSummary: DashboardSummaryResponse = {
+  cards: {
+    credentials: {
+      total: '52',
+      totalValue: 52,
+      available: '47',
+      availableValue: 47,
+      unavailable: '5',
+      unavailableValue: 5,
+    },
+    traffic: {
+      todayRequests: '46.9K',
+      todayRequestsValue: 46_930,
+      yesterdayRequestsValue: 39_640,
+      totalRequests: '3.82M',
+    },
+    tokens: {
+      todayTokens: '3.21M',
+      todayTokensValue: 3_214_800,
+      yesterdayTokensValue: 2_884_100,
+      totalTokens: '253M',
+      totalBillingAmountUsd: '$195.15',
+    },
+    cache: {
+      todayHitRate: '43.8%',
+      todayHitRateValue: 0.438,
+      yesterdayHitRateValue: 0.397,
+      totalHitRate: '41.2%',
+      totalCachedTokens: '86.4M',
+      averageFirstTokenLatencyMs: '486 ms',
+    },
+  },
+  trend: {
+    kind: 'usage',
+    points: requestSeries.map(previewTrendPoint),
+    summary: [],
+  },
+  healthTimeline: {
+    title: '请求健康时间线',
+    description: '有效请求可用性',
+    reliabilityDisplay: '99.2%',
+    status: 'stable',
+    successRequests: 46_518,
+    failedRequests: 412,
+    cancelledRequests: 63,
+    incompleteRequests: 28,
+    callerErrorRequests: 186,
+    points: Array.from({ length: 48 }, (_, index) => {
+      const hour = String(Math.floor(index / 2)).padStart(2, '0')
+      const minute = index % 2 === 0 ? '00' : '30'
+      const status = previewHealthStatus(index)
+      const failedRequests = status === 'unstable' ? 18 : status === 'low_sample' ? 2 : index % 11
+
+      return {
+        time: `${hour}:${minute}`,
+        status,
+        reliabilityDisplay: status === 'unstable' ? '94.8%' : status === 'low_sample' ? '98.2%' : '99.8%',
+        successRequests: 820 + index * 9,
+        failedRequests,
+        cancelledRequests: index % 9 === 0 ? 2 : 0,
+        incompleteRequests: index % 13 === 0 ? 1 : 0,
+        callerErrorRequests: index % 6,
+      }
+    }),
+  },
+  wireProfiles: [
+    {
+      provider: 'openai',
+      product: 'Codex CLI',
+      version: '0.34.0',
+      build: '20260820',
+      target: {
+        osType: 'Mac OS',
+        osVersion: '15.6',
+        arch: 'arm64',
+        terminal: 'iTerm.app',
+      },
+      userAgent: 'codex_cli_rs/0.34.0',
+      attributes: [
+        { label: '客户端标识', value: 'codex_cli_rs' },
+        { label: 'Token 认证', value: 'bearer' },
+      ],
+      verifiedAt: '2026-08-23T10:28:00+08:00',
+      release: {
+        status: 'aligned',
+        checkedAt: '2026-08-23T10:30:00+08:00',
+        latestVersion: '0.34.0',
+        latestBuild: '20260820',
+      },
+    },
+    {
+      provider: 'xai',
+      product: 'Grok CLI',
+      version: '0.7.3',
+      target: {
+        osType: 'Linux',
+        osVersion: '6.8',
+        arch: 'x86_64',
+        terminal: 'xterm-256color',
+      },
+      userAgent: 'grok_cli/0.7.3',
+      attributes: [
+        { label: '客户端标识', value: 'grok_cli' },
+        { label: 'Token 认证', value: 'bearer' },
+      ],
+      verifiedAt: '2026-08-23T10:25:00+08:00',
+      release: {
+        status: 'review_required',
+        checkedAt: '2026-08-23T10:30:00+08:00',
+        latestVersion: '0.7.4',
+      },
+    },
+  ],
+  accountUsage: [
+    {
+      id: 'preview-openai-1',
+      provider: 'openai',
+      authenticationKind: 'oauth',
+      email: 'relay@example.com',
+      planType: 'team',
+      tokens: '926K',
+      requestCount: 1_284,
+      requestBuckets: [],
+      quotaUsedPercent: 32,
+      lastUsed: '刚刚',
+    },
+    {
+      id: 'preview-xai-1',
+      provider: 'xai',
+      authenticationKind: 'oauth',
+      email: 'gateway@example.com',
+      planType: 'free',
+      tokens: '684K',
+      requestCount: 894,
+      requestBuckets: requestSeries.slice(-12).map((requestCount, index) => ({
+        bucketStart: `2026-08-23T${String(index + 12).padStart(2, '0')}:00:00+08:00`,
+        requestCount: Math.round(requestCount / 3),
+      })),
+      quotaUsedPercent: null,
+      lastUsed: '2 分钟前',
+    },
+    {
+      id: 'preview-openai-2',
+      provider: 'openai',
+      authenticationKind: 'oauth',
+      email: 'control@example.com',
+      planType: 'pro',
+      tokens: '512K',
+      requestCount: 742,
+      requestBuckets: [],
+      quotaUsedPercent: 68,
+      lastUsed: '5 分钟前',
+    },
+  ],
+  usageRecords: [
+    previewUsageRecord({ id: 'preview-01', accountEmail: 'relay@example.com', provider: 'openai', authenticationKind: 'oauth', model: 'gpt-5.6-codex', transport: 'http_sse', reasoningEffort: 'high', inputTokens: 18_420, outputTokens: 3_860, cachedTokens: 8_192, firstTokenMs: 486, latencyMs: 3_280, estimatedCost: '$0.0618', createdAt: '2026-08-23T14:42:16+08:00', createdAtDisplay: '14:42:16', clientIp: '10.24.8.16', userAgent: 'codex-cli/0.34.0' }),
+    previewUsageRecord({ id: 'preview-02', accountEmail: 'gateway@example.com', provider: 'xai', authenticationKind: 'oauth', model: 'grok-code-fast-1', transport: 'websocket', reasoningEffort: 'medium', inputTokens: 12_760, outputTokens: 2_140, cachedTokens: 4_096, firstTokenMs: 318, latencyMs: 2_460, estimatedCost: '$0.0286', createdAt: '2026-08-23T14:39:52+08:00', createdAtDisplay: '14:39:52', clientIp: '10.24.8.21', userAgent: 'grok-cli/0.7.3' }),
+    previewUsageRecord({ id: 'preview-03', accountEmail: 'control@example.com', provider: 'openai', authenticationKind: 'oauth', model: 'gpt-5.5', transport: 'http_sse', reasoningEffort: 'xhigh', inputTokens: 32_840, outputTokens: 6_720, cachedTokens: 16_384, firstTokenMs: 572, latencyMs: 5_840, estimatedCost: '$0.1042', createdAt: '2026-08-23T14:35:08+08:00', createdAtDisplay: '14:35:08', clientIp: '10.24.9.11', userAgent: 'codex-desktop/26.818.41705', compact: true }),
+    previewUsageRecord({ id: 'preview-04', accountEmail: 'batch@example.com', provider: 'openai', authenticationKind: 'api_key', model: 'gpt-5.2', transport: 'http', reasoningEffort: 'low', inputTokens: 4_860, outputTokens: 920, cachedTokens: 0, firstTokenMs: 264, latencyMs: 1_180, estimatedCost: '$0.0124', createdAt: '2026-08-23T14:31:44+08:00', createdAtDisplay: '14:31:44', clientIp: '10.24.12.9', userAgent: 'openai-node/6.4.0' }),
+    previewUsageRecord({ id: 'preview-05', accountEmail: 'analysis@example.com', provider: 'xai', authenticationKind: 'api_key', model: 'grok-4.20', transport: 'http_sse', reasoningEffort: 'high', inputTokens: 21_640, outputTokens: 4_380, cachedTokens: 7_168, firstTokenMs: 426, latencyMs: 4_120, estimatedCost: '$0.0731', createdAt: '2026-08-23T14:28:19+08:00', createdAtDisplay: '14:28:19', clientIp: '10.24.15.32', userAgent: 'curl/8.14.1' }),
+    previewUsageRecord({ id: 'preview-06', accountEmail: 'scheduler@example.com', provider: 'openai', authenticationKind: 'oauth', model: 'gpt-5.6-codex', transport: 'websocket', reasoningEffort: 'medium', inputTokens: 9_760, outputTokens: 1_840, cachedTokens: 3_072, firstTokenMs: 296, latencyMs: 2_020, estimatedCost: '$0.0248', createdAt: '2026-08-23T14:24:03+08:00', createdAtDisplay: '14:24:03', clientIp: '10.24.4.18', userAgent: 'codex-cli/0.34.0' }),
+    previewUsageRecord({ id: 'preview-07', accountEmail: 'review@example.com', provider: 'openai', authenticationKind: 'oauth', model: 'gpt-5.5', transport: 'http_sse', reasoningEffort: 'high', inputTokens: 15_280, outputTokens: 3_120, cachedTokens: 6_144, firstTokenMs: 448, latencyMs: 3_740, estimatedCost: '$0.0527', createdAt: '2026-08-23T14:18:37+08:00', createdAtDisplay: '14:18:37', clientIp: '10.24.18.7', userAgent: 'codex-desktop/26.818.41705' }),
+    previewUsageRecord({ id: 'preview-08', accountEmail: 'fallback@example.com', provider: 'xai', authenticationKind: 'oauth', model: 'grok-code-fast-1', transport: 'websocket', reasoningEffort: 'medium', inputTokens: 7_940, outputTokens: 1_460, cachedTokens: 2_048, firstTokenMs: 342, latencyMs: 1_920, estimatedCost: '$0.0194', createdAt: '2026-08-23T14:13:25+08:00', createdAtDisplay: '14:13:25', clientIp: '10.24.6.23', userAgent: 'grok-cli/0.7.3' }),
+    previewUsageRecord({ id: 'preview-09', accountEmail: 'desktop@example.com', provider: 'openai', authenticationKind: 'oauth', model: 'gpt-5.6-codex', transport: 'http_sse', reasoningEffort: 'xhigh', inputTokens: 28_420, outputTokens: 5_940, cachedTokens: 12_288, firstTokenMs: 618, latencyMs: 5_260, estimatedCost: '$0.0925', createdAt: '2026-08-23T14:07:11+08:00', createdAtDisplay: '14:07:11', clientIp: '10.24.7.40', userAgent: 'codex-desktop/26.818.41705', compact: true }),
+    previewUsageRecord({ id: 'preview-10', accountEmail: 'api@example.com', provider: 'openai', authenticationKind: 'api_key', model: 'gpt-5.2', transport: 'http', reasoningEffort: 'low', inputTokens: 3_620, outputTokens: 680, cachedTokens: 0, firstTokenMs: 238, latencyMs: 980, estimatedCost: '$0.0091', createdAt: '2026-08-23T13:58:46+08:00', createdAtDisplay: '13:58:46', clientIp: '10.24.3.14', userAgent: 'openai-python/1.99.0' }),
+  ],
+  poolSummary: {
+    total: 52,
+    normal: 47,
+    quotaExhausted: 3,
+    rateLimited: 1,
+    disabled: 0,
+    error: 1,
+  },
+  capacityInfo: {
+    maxConcurrentPerAccount: 3,
+    totalSlots: 156,
+    usedSlots: 84,
+    availableSlots: 72,
+  },
+  rotationStrategy: 'smart',
+}
diff --git a/frontend/src/views/theme/index.vue b/frontend/src/views/theme/index.vue
new file mode 100644
index 000000000..5a84f9f81
--- /dev/null
+++ b/frontend/src/views/theme/index.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import AppearanceSettingsSection from './components/AppearanceSettingsSection.vue'
+</script>
+
+<template>
+  <div class="min-h-0 w-full xl:h-[calc(100dvh-3rem)] xl:flex-none">
+    <AppearanceSettingsSection class="h-full" />
+  </div>
+</template>
diff --git a/frontend/src/views/usage/components/OpsErrorDetailModal.vue b/frontend/src/views/usage/components/OpsErrorDetailModal.vue
index c79888dfc..0f08f323b 100644
--- a/frontend/src/views/usage/components/OpsErrorDetailModal.vue
+++ b/frontend/src/views/usage/components/OpsErrorDetailModal.vue
@@ -60,23 +60,23 @@ function providerKindLabel(record: Awaited<ReturnType<typeof getOpsErrors>>['ite
     size="xl"
   >
     <template v-if="record">
-      <section class="rounded-cp-surface bg-cp-subtle px-4 py-3.5">
+      <section class="rounded-cp-card bg-cp-fill-quaternary px-4 py-3.5">
         <div class="flex flex-wrap items-center gap-3">
           <UsageStatusCodeBadge :status-code="record.clientStatusCode" />
-          <span class="text-[12px] font-bold text-cp-secondary">
+          <span class="text-cp-sm font-bold text-cp-text-secondary">
             客户端 {{ displayValue(record.clientStatusCode) }}
           </span>
-          <span class="text-[12px] font-bold text-cp-secondary">
+          <span class="text-cp-sm font-bold text-cp-text-secondary">
             上游 {{ displayValue(record.upstreamStatusCode) }}
           </span>
         </div>
-        <p class="mt-3 mb-0 text-[13px] leading-relaxed font-bold text-cp-primary">
+        <p class="mt-3 mb-0 text-cp leading-relaxed font-bold text-cp-text">
           {{ displayValue(record.message) }}
         </p>
       </section>
 
       <dl
-        class="mt-3 grid grid-cols-1 gap-3 rounded-cp-surface bg-cp-subtle px-4 py-3.5 sm:grid-cols-2"
+        class="mt-3 grid grid-cols-1 gap-3 rounded-cp-card bg-cp-fill-quaternary px-4 py-3.5 sm:grid-cols-2"
       >
         <div
           v-for="field in fields"
@@ -84,11 +84,11 @@ function providerKindLabel(record: Awaited<ReturnType<typeof getOpsErrors>>['ite
           class="min-w-0"
           :class="field.wide ? 'sm:col-span-2' : undefined"
         >
-          <dt class="text-[11px] leading-none font-bold text-cp-muted-text">
+          <dt class="text-cp-xs leading-none font-bold text-cp-text-quaternary">
             {{ field.label }}
           </dt>
           <dd
-            class="mt-1.5 mb-0 truncate font-mono text-[12px] leading-normal font-emphasis text-cp-primary"
+            class="mt-1.5 mb-0 truncate font-mono text-cp-sm leading-normal font-emphasis text-cp-text"
             :title="displayValue(field.value)"
           >
             {{ displayValue(field.value) }}
@@ -98,7 +98,7 @@ function providerKindLabel(record: Awaited<ReturnType<typeof getOpsErrors>>['ite
 
       <section
         v-if="metadataText"
-        class="mt-3 rounded-cp-surface bg-cp-subtle px-4 py-3.5"
+        class="mt-3 rounded-cp-card bg-cp-fill-quaternary px-4 py-3.5"
       >
         <UsageDetailCodePanel title="Metadata" max-height="260px" :content="metadataText" />
       </section>
diff --git a/frontend/src/views/usage/components/OpsErrorPanel.vue b/frontend/src/views/usage/components/OpsErrorPanel.vue
index 613ab3905..1b5323d7d 100644
--- a/frontend/src/views/usage/components/OpsErrorPanel.vue
+++ b/frontend/src/views/usage/components/OpsErrorPanel.vue
@@ -56,7 +56,7 @@ function showDetail(record: Awaited<ReturnType<typeof getOpsErrors>>['items'][nu
             class="min-w-0 sm:col-span-2 lg:min-w-64 lg:flex-1 lg:max-w-96"
           >
             <template #prefix>
-              <Search class="size-4.5 text-cp-tertiary" />
+              <Search class="size-4.5 text-cp-text-tertiary" />
             </template>
           </BaseInput>
           <BaseInput v-model="failureClass" placeholder="失败分类（精确）" class="min-w-0" />
@@ -100,13 +100,13 @@ function showDetail(record: Awaited<ReturnType<typeof getOpsErrors>>['items'][nu
           />
         </template>
         <template #failureClass="{ row }">
-          <span class="font-mono text-[12px] font-bold text-cp-danger-text">
+          <span class="font-mono text-cp-sm font-bold text-cp-error-text">
             {{ row.failureClass || '—' }}
           </span>
         </template>
         <template #accountId="{ row }">
           <span
-            class="block max-w-full truncate font-mono text-[12px] font-bold text-cp-primary"
+            class="block max-w-full truncate font-mono text-cp-sm font-bold text-cp-text"
             :title="row.accountId || ''"
           >
             {{ row.metadata.accountLabel || '—' }}
diff --git a/frontend/src/views/usage/components/UsageBillingCell.vue b/frontend/src/views/usage/components/UsageBillingCell.vue
index fb2918b53..b3344262b 100644
--- a/frontend/src/views/usage/components/UsageBillingCell.vue
+++ b/frontend/src/views/usage/components/UsageBillingCell.vue
@@ -44,18 +44,18 @@ function itemValueClass(tone?: string, accent?: boolean) {
     return 'text-cp-success-text'
   if (tone === 'info' || accent)
     return 'text-cp-info-text'
-  return 'text-cp-primary'
+  return 'text-cp-text'
 }
 </script>
 
 <template>
   <div class="flex items-center justify-end gap-1.5">
-    <span class="font-mono text-[12px] font-heavy tabular-nums text-cp-success-text">
+    <span class="font-mono text-cp-sm font-heavy tabular-nums text-cp-success-text">
       {{ usageBillingText(record) }}
     </span>
 
     <UsageDetailPopover v-if="billing" title="计费明细" trigger-label="查看费用明细">
-      <div class="grid gap-1.5 text-cp-secondary">
+      <div class="grid gap-1.5 text-cp-text-secondary">
         <div v-for="item in amountItems" :key="item.label" class="grid grid-cols-[auto_minmax(0,1fr)] items-center gap-4">
           <span class="whitespace-nowrap">{{ item.label }}</span>
           <span class="justify-self-end whitespace-nowrap font-mono font-heavy" :class="itemValueClass(undefined, item.accent)">
@@ -63,7 +63,7 @@ function itemValueClass(tone?: string, accent?: boolean) {
           </span>
         </div>
       </div>
-      <div class="mt-1 grid gap-1.5 rounded-cp-control bg-cp-subtle p-2 text-cp-secondary">
+      <div class="mt-1 grid gap-1.5 rounded-cp bg-cp-fill-quaternary p-2 text-cp-text-secondary">
         <div v-for="item in billingItems" :key="item.label" class="grid grid-cols-[auto_minmax(0,1fr)] items-center gap-4">
           <span class="whitespace-nowrap">{{ item.label }}</span>
           <span class="justify-self-end whitespace-nowrap font-mono font-heavy" :class="itemValueClass(item.tone)">
diff --git a/frontend/src/views/usage/components/UsageClientIpCell.vue b/frontend/src/views/usage/components/UsageClientIpCell.vue
index 0f7d42d9a..670a5a64c 100644
--- a/frontend/src/views/usage/components/UsageClientIpCell.vue
+++ b/frontend/src/views/usage/components/UsageClientIpCell.vue
@@ -13,7 +13,7 @@ const clientIp = computed(() => usageClientIp(props.record))
 
 <template>
   <span
-    class="inline-flex h-6 max-w-full items-center rounded-full bg-cp-info-bg px-2.5 font-mono text-[12px] leading-none font-bold text-cp-info-text"
+    class="inline-flex h-6 max-w-full items-center rounded-full bg-cp-info-bg px-2.5 font-mono text-cp-sm leading-none font-bold text-cp-info-text"
     :title="clientIp"
   >
     <span class="min-w-0 truncate">
diff --git a/frontend/src/views/usage/components/UsageDetailCodePanel.vue b/frontend/src/views/usage/components/UsageDetailCodePanel.vue
index 0be405661..e872ef624 100644
--- a/frontend/src/views/usage/components/UsageDetailCodePanel.vue
+++ b/frontend/src/views/usage/components/UsageDetailCodePanel.vue
@@ -8,9 +8,9 @@ defineProps<{
   content: string
 }>()
 
-const panelTitleClass = 'm-0 text-[12px] leading-none font-heavy text-cp-secondary'
+const panelTitleClass = 'm-0 text-cp-sm leading-none font-heavy text-cp-text-secondary'
 const codeBlockClass
-  = 'm-0 whitespace-pre-wrap wrap-break-word font-mono text-[12px] leading-[1.65] text-cp-primary'
+  = 'm-0 whitespace-pre-wrap wrap-break-word font-mono text-cp-sm leading-[1.65] text-cp-text'
 </script>
 
 <template>
@@ -18,7 +18,7 @@ const codeBlockClass
     {{ title }}
   </h3>
   <BaseScrollbar :max-height="maxHeight">
-    <div class="rounded-cp-control bg-cp-surface px-3 py-2.5">
+    <div class="rounded-cp bg-cp-bg-container px-3 py-2.5">
       <pre :class="codeBlockClass">{{ content }}</pre>
     </div>
   </BaseScrollbar>
diff --git a/frontend/src/views/usage/components/UsageDetailFieldGrid.vue b/frontend/src/views/usage/components/UsageDetailFieldGrid.vue
index b13a181ff..841954343 100644
--- a/frontend/src/views/usage/components/UsageDetailFieldGrid.vue
+++ b/frontend/src/views/usage/components/UsageDetailFieldGrid.vue
@@ -9,7 +9,7 @@ defineProps<{
 function valueClass(item: { mono?: boolean, wrap?: boolean }) {
   if (item.wrap) {
     return [
-      'mt-1.5 mb-0 min-w-0 text-[12px] leading-snug font-bold text-cp-primary',
+      'mt-1.5 mb-0 min-w-0 text-cp-sm leading-snug font-bold text-cp-text',
       item.mono ? 'font-mono tabular-nums break-words' : undefined,
     ]
   }
diff --git a/frontend/src/views/usage/components/UsageDetailPopover.vue b/frontend/src/views/usage/components/UsageDetailPopover.vue
index c8d6fe73f..ffa4ffe99 100644
--- a/frontend/src/views/usage/components/UsageDetailPopover.vue
+++ b/frontend/src/views/usage/components/UsageDetailPopover.vue
@@ -18,15 +18,15 @@ defineProps<{
     <template #trigger>
       <button
         type="button"
-        class="inline-flex size-4 items-center justify-center rounded-full bg-cp-info-bg text-cp-info outline-none hover:bg-cp-default-hover"
+        class="inline-flex size-4 items-center justify-center rounded-full bg-cp-primary-bg text-cp-primary-text outline-none hover:bg-cp-primary-bg-hover focus-visible:ring-2 focus-visible:ring-cp-control-outline"
         :aria-label="triggerLabel"
       >
         <Info class="size-3" />
       </button>
     </template>
 
-    <div class="grid w-60 gap-2 p-3 text-[12px] leading-none">
-      <p class="m-0 font-heavy text-cp-primary">
+    <div class="grid w-60 gap-2 p-3 text-cp-sm leading-none">
+      <p class="m-0 font-heavy text-cp-text">
         {{ title }}
       </p>
       <slot />
diff --git a/frontend/src/views/usage/components/UsageDiagnosticCard.vue b/frontend/src/views/usage/components/UsageDiagnosticCard.vue
index 1ea3e44f1..a76111e35 100644
--- a/frontend/src/views/usage/components/UsageDiagnosticCard.vue
+++ b/frontend/src/views/usage/components/UsageDiagnosticCard.vue
@@ -139,20 +139,20 @@ function diagnosticNameDisplay(name: string) {
         <template #nameDisplay="{ row }">
           <div class="inline-grid max-w-full min-w-0 gap-1" :title="row.nameDisplay.full">
             <code
-              class="block max-w-full truncate font-mono text-[12px] leading-none font-heavy text-cp-primary"
+              class="block max-w-full truncate font-mono text-cp-sm leading-none font-heavy text-cp-text"
             >
               {{ row.nameDisplay.primary }}
             </code>
             <div
               v-if="row.nameDisplay.secondary"
-              class="flex min-w-0 items-center gap-1.25 text-cp-secondary"
+              class="flex min-w-0 items-center gap-1.25 text-cp-text-secondary"
             >
               <CornerDownRight
                 v-if="resultDimension !== 'account'"
                 class="size-3.25 shrink-0 text-cp-info"
                 stroke-width="2.4"
               />
-              <code class="block truncate font-mono text-[11px] leading-none font-bold">
+              <code class="block truncate font-mono text-cp-xs leading-none font-bold">
                 {{ row.nameDisplay.secondary }}
               </code>
             </div>
@@ -164,10 +164,10 @@ function diagnosticNameDisplay(name: string) {
             class="grid justify-items-end gap-1 font-mono leading-none tabular-nums"
             :title="`成功 ${formatCompactNumber(row.successCount)}`"
           >
-            <strong class="font-bold text-cp-primary">
+            <strong class="font-bold text-cp-text">
               {{ formatCompactNumber(row.requestCount) }}
             </strong>
-            <small class="text-[10px] font-emphasis text-cp-muted-text">
+            <small class="text-[10px] font-emphasis text-cp-text-quaternary">
               {{ formatPercent(row.requestShare) }}
             </small>
           </span>
@@ -177,13 +177,13 @@ function diagnosticNameDisplay(name: string) {
           <span class="grid justify-items-end gap-1 font-mono leading-none tabular-nums">
             <strong
               class="font-bold"
-              :class="row.errorCount > 0 ? 'text-cp-danger-text' : 'text-cp-primary'"
+              :class="row.errorCount > 0 ? 'text-cp-error-text' : 'text-cp-text'"
             >
               {{ formatCompactNumber(row.errorCount) }}
             </strong>
             <small
               class="text-[10px] font-emphasis"
-              :class="row.errorRate > 0 ? 'text-cp-danger-text' : 'text-cp-muted-text'"
+              :class="row.errorRate > 0 ? 'text-cp-error-text' : 'text-cp-text-quaternary'"
             >
               {{ formatPercent(row.errorRate) }}
             </small>
diff --git a/frontend/src/views/usage/components/UsageFilters.vue b/frontend/src/views/usage/components/UsageFilters.vue
index 3d8871e17..3089149e5 100644
--- a/frontend/src/views/usage/components/UsageFilters.vue
+++ b/frontend/src/views/usage/components/UsageFilters.vue
@@ -21,7 +21,7 @@ const search = defineModel<string>('search', { required: true })
     <div class="min-w-0 flex-1 sm:w-96 sm:flex-none">
       <BaseInput v-model="search" placeholder="搜索请求 ID、端点、模型或消息" class="w-full">
         <template #prefix>
-          <Search class="size-4.5 text-cp-tertiary" />
+          <Search class="size-4.5 text-cp-text-tertiary" />
         </template>
       </BaseInput>
     </div>
diff --git a/frontend/src/views/usage/components/UsageLatencyCell.vue b/frontend/src/views/usage/components/UsageLatencyCell.vue
index b3d21ea87..376564404 100644
--- a/frontend/src/views/usage/components/UsageLatencyCell.vue
+++ b/frontend/src/views/usage/components/UsageLatencyCell.vue
@@ -15,18 +15,18 @@ const latencyDetails = computed(() => usageLatencyDetails(props.record))
 <template>
   <div class="flex items-center justify-end gap-1.5">
     <div
-      class="grid grid-cols-[auto_auto] items-center justify-end gap-x-2 gap-y-1.5 whitespace-nowrap font-mono text-[12px] leading-none font-heavy tabular-nums"
+      class="grid grid-cols-[auto_auto] items-center justify-end gap-x-2 gap-y-1.5 whitespace-nowrap font-mono text-cp-sm leading-none font-heavy tabular-nums"
     >
-      <span class="text-[11px] text-cp-muted-text">{{ latencyDetails.firstOutputLabel }}</span>
-      <span class="text-cp-secondary">{{ latencyDetails.firstOutputDisplay }}</span>
-      <span class="text-[11px] text-cp-muted-text">总耗时</span>
-      <span class="text-cp-primary">{{ latencyDetails.totalDisplay }}</span>
+      <span class="text-cp-xs text-cp-text-quaternary">{{ latencyDetails.firstOutputLabel }}</span>
+      <span class="text-cp-text-secondary">{{ latencyDetails.firstOutputDisplay }}</span>
+      <span class="text-cp-xs text-cp-text-quaternary">总耗时</span>
+      <span class="text-cp-text">{{ latencyDetails.totalDisplay }}</span>
     </div>
 
     <UsageDetailPopover title="延迟明细" trigger-label="查看延迟明细">
       <div
         v-if="latencyDetails.breakdownItems.length"
-        class="grid gap-1.5 text-cp-secondary"
+        class="grid gap-1.5 text-cp-text-secondary"
       >
         <div
           v-for="item in latencyDetails.breakdownItems"
@@ -34,17 +34,17 @@ const latencyDetails = computed(() => usageLatencyDetails(props.record))
           class="flex justify-between gap-4"
         >
           <span class="whitespace-nowrap">{{ item.label }}</span>
-          <span class="whitespace-nowrap font-mono font-heavy text-cp-primary">
+          <span class="whitespace-nowrap font-mono font-heavy text-cp-text">
             {{ item.value }}
           </span>
         </div>
       </div>
-      <p v-else class="m-0 text-cp-muted-text">
+      <p v-else class="m-0 text-cp-text-quaternary">
         此记录未采集完整的阶段耗时。
       </p>
 
-      <div class="flex justify-between border-t border-cp-divider pt-2">
-        <span class="whitespace-nowrap text-cp-secondary">总耗时</span>
+      <div class="flex justify-between border-t border-cp-split pt-2">
+        <span class="whitespace-nowrap text-cp-text-secondary">总耗时</span>
         <span class="whitespace-nowrap font-mono font-heavy text-cp-info-text">
           {{ latencyDetails.totalDisplay }}
         </span>
@@ -52,9 +52,9 @@ const latencyDetails = computed(() => usageLatencyDetails(props.record))
 
       <div
         v-if="latencyDetails.transportItems.length"
-        class="grid gap-1.5 border-t border-cp-divider pt-2 text-cp-secondary"
+        class="grid gap-1.5 border-t border-cp-split pt-2 text-cp-text-secondary"
       >
-        <p class="m-0 font-heavy text-cp-primary">
+        <p class="m-0 font-heavy text-cp-text">
           传输观测
         </p>
         <div
@@ -63,11 +63,11 @@ const latencyDetails = computed(() => usageLatencyDetails(props.record))
           class="flex justify-between gap-4"
         >
           <span class="whitespace-nowrap">{{ item.label }}</span>
-          <span class="whitespace-nowrap font-mono font-heavy text-cp-primary">
+          <span class="whitespace-nowrap font-mono font-heavy text-cp-text">
             {{ item.value }}
           </span>
         </div>
-        <p class="m-0 text-[11px] leading-snug text-cp-muted-text">
+        <p class="m-0 text-cp-xs leading-snug text-cp-text-quaternary">
           与阶段耗时可能重叠，不参与总耗时相加。
         </p>
       </div>
diff --git a/frontend/src/views/usage/components/UsageModelCell.vue b/frontend/src/views/usage/components/UsageModelCell.vue
index d5d839318..e484af7a8 100644
--- a/frontend/src/views/usage/components/UsageModelCell.vue
+++ b/frontend/src/views/usage/components/UsageModelCell.vue
@@ -15,16 +15,16 @@ const modelDisplay = computed(() => usageModelDisplay(props.record))
 <template>
   <div class="inline-grid max-w-full gap-1">
     <code
-      class="block max-w-full truncate font-mono text-[12px] leading-none font-heavy text-cp-primary"
+      class="block max-w-full truncate font-mono text-cp-sm leading-none font-heavy text-cp-text"
     >
       {{ modelDisplay.primary }}
     </code>
     <div
       v-if="modelDisplay.secondary"
-      class="flex min-w-0 items-center gap-1.25 text-cp-secondary"
+      class="flex min-w-0 items-center gap-1.25 text-cp-text-secondary"
     >
       <CornerDownRight class="size-3.25 shrink-0 text-cp-info" stroke-width="2.4" />
-      <code class="block truncate font-mono text-[11px] leading-none font-bold">
+      <code class="block truncate font-mono text-cp-xs leading-none font-bold">
         {{ modelDisplay.secondary }}
       </code>
     </div>
diff --git a/frontend/src/views/usage/components/UsageReasoningEffortCell.vue b/frontend/src/views/usage/components/UsageReasoningEffortCell.vue
index 57d0cc3c4..9ec7814a9 100644
--- a/frontend/src/views/usage/components/UsageReasoningEffortCell.vue
+++ b/frontend/src/views/usage/components/UsageReasoningEffortCell.vue
@@ -11,7 +11,7 @@ defineProps<{
 
 <template>
   <span
-    class="inline-flex items-center gap-1 whitespace-nowrap text-[12px] font-bold text-cp-primary"
+    class="inline-flex items-center gap-1 whitespace-nowrap text-cp-sm font-bold text-cp-text"
   >
     <span>{{ usageReasoningEffort(record) }}</span>
     <span
diff --git a/frontend/src/views/usage/components/UsageRecordDetailModal.vue b/frontend/src/views/usage/components/UsageRecordDetailModal.vue
index e581f18de..6f0df63ec 100644
--- a/frontend/src/views/usage/components/UsageRecordDetailModal.vue
+++ b/frontend/src/views/usage/components/UsageRecordDetailModal.vue
@@ -47,8 +47,8 @@ const tokenDetails = computed(() => props.record ? usageTokenDetails(props.recor
 const billing = computed(() => props.record ? usageBilling(props.record) : null)
 const latencyDetails = computed(() => props.record ? usageLatencyDetails(props.record) : null)
 
-const panelClass = 'rounded-cp-surface bg-cp-subtle px-4 py-3.5'
-const panelTitleClass = 'm-0 text-[12px] leading-none font-heavy text-cp-secondary'
+const panelClass = 'rounded-cp-card bg-cp-fill-quaternary px-4 py-3.5'
+const panelTitleClass = 'm-0 text-cp-sm leading-none font-heavy text-cp-text-secondary'
 
 const accountDisplay = computed(() => props.record ? usageAccountText(props.record) : '—')
 const finalAttemptIndex = computed(() => {
@@ -164,8 +164,8 @@ function attemptOutcomeClass(outcome: string) {
   if (outcome === 'succeeded')
     return 'text-cp-success-text'
   if (outcome === 'failed')
-    return 'text-cp-danger-text'
-  return 'text-cp-secondary'
+    return 'text-cp-error-text'
+  return 'text-cp-text-secondary'
 }
 
 const billingItems = computed(() => {
@@ -289,7 +289,7 @@ const tokenDonutOption = computed<EChartsOption>(() => {
         <div class="min-w-0">
           <span :class="fieldLabelClass">账号</span>
           <p
-            class="mt-1.5 mb-0 truncate font-mono text-[13px] leading-none font-heavy text-cp-primary"
+            class="mt-1.5 mb-0 truncate font-mono text-cp leading-none font-heavy text-cp-text"
             :title="displayValue(accountDisplay)"
           >
             {{ displayValue(accountDisplay) }}
@@ -344,11 +344,11 @@ const tokenDonutOption = computed<EChartsOption>(() => {
                 <BaseChart :option="tokenDonutOption" :height="152" />
                 <div class="pointer-events-none absolute inset-0 flex items-center justify-center">
                   <div class="grid text-center">
-                    <span class="text-[11px] leading-none font-bold text-cp-muted-text">
+                    <span class="text-cp-xs leading-none font-bold text-cp-text-quaternary">
                       总计
                     </span>
                     <strong
-                      class="mt-1 font-mono text-[16px] leading-none font-extrabold tabular-nums text-cp-primary"
+                      class="mt-1 font-mono text-[16px] leading-none font-extrabold tabular-nums text-cp-text"
                     >
                       {{ tokenDetails?.totalTokensDisplay ?? '—' }}
                     </strong>
@@ -400,7 +400,7 @@ const tokenDonutOption = computed<EChartsOption>(() => {
             尝试链路
           </h3>
           <span
-            class="text-[11px] leading-none font-emphasis text-cp-muted-text"
+            class="text-cp-xs leading-none font-emphasis text-cp-text-quaternary"
             title="中间尝试可能有缺口，仅展示可观测到的记录"
           >
             尽力观测
@@ -425,14 +425,14 @@ const tokenDonutOption = computed<EChartsOption>(() => {
           </template>
           <template #accountLabel="{ row }">
             <span
-              class="block max-w-full truncate font-mono text-[12px] font-bold text-cp-primary"
+              class="block max-w-full truncate font-mono text-cp-sm font-bold text-cp-text"
               :title="row.accountId || ''"
             >
               {{ row.accountLabel }}
             </span>
           </template>
           <template #latencyMs="{ row }">
-            <span class="font-mono font-bold tabular-nums text-cp-primary">
+            <span class="font-mono font-bold tabular-nums text-cp-text">
               {{ formatDuration(row.latencyMs) }}
             </span>
           </template>
@@ -480,6 +480,6 @@ const tokenDonutOption = computed<EChartsOption>(() => {
 }
 
 .attempt-table :deep(tbody td) {
-  background-color: var(--cp-bg-muted);
+  background-color: var(--cp-color-fill-tertiary);
 }
 </style>
diff --git a/frontend/src/views/usage/components/UsageRecordsTable.vue b/frontend/src/views/usage/components/UsageRecordsTable.vue
index d4006fb34..8bf3fd261 100644
--- a/frontend/src/views/usage/components/UsageRecordsTable.vue
+++ b/frontend/src/views/usage/components/UsageRecordsTable.vue
@@ -50,7 +50,7 @@ withDefaults(
 
     <template #accountEmail="{ row }">
       <span
-        class="block max-w-full truncate font-mono text-[12px] leading-none font-bold text-cp-primary"
+        class="block max-w-full truncate font-mono text-cp-sm leading-none font-bold text-cp-text"
         :title="usageAccountText(row)"
       >
         {{ usageAccountText(row) }}
@@ -62,7 +62,7 @@ withDefaults(
     </template>
 
     <template #userAgent="{ row }">
-      <span class="block max-w-full wrap-break-word whitespace-normal font-mono text-[12px] leading-[1.4] font-emphasis text-cp-secondary">
+      <span class="block max-w-full wrap-break-word whitespace-normal font-mono text-cp-sm leading-[1.4] font-emphasis text-cp-text-secondary">
         {{ usageUserAgent(row) }}
       </span>
     </template>
@@ -77,7 +77,7 @@ withDefaults(
 
     <template #route="{ row }">
       <div class="inline-flex max-w-full items-center gap-1.5 whitespace-nowrap">
-        <code class="font-mono text-[12px] font-emphasis">{{ row.route || '—' }}</code>
+        <code class="font-mono text-cp-sm font-emphasis">{{ row.route || '—' }}</code>
         <span
           v-if="usageIsCompact(row)"
           class="inline-flex shrink-0 text-cp-warning-text"
@@ -91,7 +91,7 @@ withDefaults(
 
     <template #recordType="{ row }">
       <span
-        class="inline-flex h-6 min-w-12 items-center justify-center rounded-full px-2 text-[12px] leading-none font-bold"
+        class="inline-flex h-6 min-w-12 items-center justify-center rounded-full px-2 text-cp-sm leading-none font-bold"
         :class="usageRecordTypeClass(row)"
       >
         {{ usageRecordType(row) }}
diff --git a/frontend/src/views/usage/components/UsageStatusCodeBadge.vue b/frontend/src/views/usage/components/UsageStatusCodeBadge.vue
index 3368d7bf0..aa3b32da0 100644
--- a/frontend/src/views/usage/components/UsageStatusCodeBadge.vue
+++ b/frontend/src/views/usage/components/UsageStatusCodeBadge.vue
@@ -5,7 +5,7 @@ defineProps<{
 
 function statusClass(statusCode?: number | null) {
   if (statusCode === undefined || statusCode === null) {
-    return 'bg-cp-subtle text-cp-secondary'
+    return 'bg-cp-fill-quaternary text-cp-text-secondary'
   }
 
   if (statusCode >= 200 && statusCode < 300) {
@@ -16,13 +16,13 @@ function statusClass(statusCode?: number | null) {
     return 'bg-cp-warning-bg text-cp-warning-text'
   }
 
-  return 'bg-cp-danger-bg text-cp-danger-text'
+  return 'bg-cp-error-bg text-cp-error-text'
 }
 </script>
 
 <template>
   <span
-    class="inline-flex h-6 min-w-12 items-center justify-center rounded-full px-2 font-mono text-[12px] leading-none font-bold"
+    class="inline-flex h-6 min-w-12 items-center justify-center rounded-full px-2 font-mono text-cp-sm leading-none font-bold"
     :class="statusClass(statusCode)"
   >
     {{ statusCode ?? '—' }}
diff --git a/frontend/src/views/usage/components/UsageSummaryCards.vue b/frontend/src/views/usage/components/UsageSummaryCards.vue
index 9ec2d29a8..e1fcdc542 100644
--- a/frontend/src/views/usage/components/UsageSummaryCards.vue
+++ b/frontend/src/views/usage/components/UsageSummaryCards.vue
@@ -45,7 +45,7 @@ const items = computed(() => [
     icon: Timer,
     value: averageLatencyDisplay(props.summary.averageLatencyMs),
     detail: '成功请求平均值',
-    tone: 'text-cp-normal-text bg-cp-normal-bg',
+    tone: 'text-cp-status-normal-text bg-cp-status-normal-bg',
   },
 ])
 </script>
@@ -64,21 +64,21 @@ const items = computed(() => [
     >
       <BaseMotionIcon
         aria-hidden="true"
-        class="inline-flex size-9 shrink-0 items-center justify-center rounded-cp-control"
+        class="inline-flex size-9 shrink-0 items-center justify-center rounded-cp"
         :class="item.tone"
       >
         <component :is="item.icon" class="size-4.5" />
       </BaseMotionIcon>
       <div class="flex min-w-0 flex-col justify-between py-0.5">
-        <span class="block text-[12px] leading-none font-bold text-cp-muted-text">
+        <span class="block text-cp-sm leading-none font-bold text-cp-text-quaternary">
           {{ item.label }}
         </span>
         <strong
-          class="block truncate text-[22px] leading-none font-extrabold text-cp-primary"
+          class="block truncate text-[22px] leading-none font-extrabold text-cp-text"
         >
           {{ item.value }}
         </strong>
-        <span class="block truncate text-[12px] leading-none font-emphasis text-cp-secondary">
+        <span class="block truncate text-cp-sm leading-none font-emphasis text-cp-text-secondary">
           {{ item.detail }}
         </span>
       </div>
diff --git a/frontend/src/views/usage/components/UsageTokenCell.vue b/frontend/src/views/usage/components/UsageTokenCell.vue
index 10ce2fbee..bda35960a 100644
--- a/frontend/src/views/usage/components/UsageTokenCell.vue
+++ b/frontend/src/views/usage/components/UsageTokenCell.vue
@@ -23,7 +23,7 @@ const tokenItems = computed(() => [
 <template>
   <div class="flex items-center justify-end gap-1.5">
     <div
-      class="grid grid-cols-[auto_auto] items-center justify-end gap-x-2 gap-y-1 font-mono text-[12px] leading-none font-bold tabular-nums"
+      class="grid grid-cols-[auto_auto] items-center justify-end gap-x-2 gap-y-1 font-mono text-cp-sm leading-none font-bold tabular-nums"
     >
       <span class="inline-flex items-center gap-1 text-cp-success-text">
         <ArrowDown class="size-3" />
@@ -40,16 +40,16 @@ const tokenItems = computed(() => [
     </div>
 
     <UsageDetailPopover title="Token 明细" trigger-label="查看 Token 明细">
-      <div class="grid gap-1.5 text-cp-secondary">
+      <div class="grid gap-1.5 text-cp-text-secondary">
         <div v-for="item in tokenItems" :key="item.label" class="flex justify-between gap-4">
           <span class="whitespace-nowrap">{{ item.label }}</span>
-          <span class="whitespace-nowrap font-mono font-heavy text-cp-primary">
+          <span class="whitespace-nowrap font-mono font-heavy text-cp-text">
             {{ item.value }}
           </span>
         </div>
       </div>
-      <div class="mt-1 flex justify-between border-t border-cp-divider pt-2">
-        <span class="whitespace-nowrap text-cp-secondary">总 Token</span>
+      <div class="mt-1 flex justify-between border-t border-cp-split pt-2">
+        <span class="whitespace-nowrap text-cp-text-secondary">总 Token</span>
         <span class="whitespace-nowrap font-mono font-heavy text-cp-info-text">
           {{ tokenDetails.totalTokensDisplay }}
         </span>
diff --git a/frontend/src/views/usage/index.vue b/frontend/src/views/usage/index.vue
index 0daaea3c1..c9b9ad9e2 100644
--- a/frontend/src/views/usage/index.vue
+++ b/frontend/src/views/usage/index.vue
@@ -85,11 +85,11 @@ watch(timeRange, () => {
       <template #header>
         <div class="flex flex-wrap items-center justify-between gap-3">
           <div>
-            <h2 class="m-0 text-xl leading-[1.15] font-heavy text-cp-primary">
+            <h2 class="m-0 text-xl leading-[1.15] font-heavy text-cp-text">
               请求明细
             </h2>
             <p
-              class="mt-1.75 mb-0 text-[13px] leading-[1.15] font-emphasis text-cp-secondary"
+              class="mt-1.75 mb-0 text-cp leading-[1.15] font-emphasis text-cp-text-secondary"
             >
               成功请求与失败请求明细
             </p>
diff --git a/frontend/src/views/usage/utils/detail.ts b/frontend/src/views/usage/utils/detail.ts
index 75224d402..af5dddeb3 100644
--- a/frontend/src/views/usage/utils/detail.ts
+++ b/frontend/src/views/usage/utils/detail.ts
@@ -1,7 +1,7 @@
 // 详情弹窗共享的字段展示约定：占位符、标签/值样式，供弹窗与其子组件复用。
-export const fieldLabelClass = 'text-[11px] leading-none font-bold text-cp-muted-text'
+export const fieldLabelClass = 'text-cp-xs leading-none font-bold text-cp-text-quaternary'
 export const fieldValueBaseClass
-  = 'mt-1.5 mb-0 min-w-0 truncate text-[12px] leading-none font-bold text-cp-primary'
+  = 'mt-1.5 mb-0 min-w-0 truncate text-cp-sm leading-none font-bold text-cp-text'
 
 export function displayValue(value: unknown) {
   if (value === undefined || value === null || value === '')
diff --git a/frontend/src/views/usage/utils/records.ts b/frontend/src/views/usage/utils/records.ts
index 55ab7ad32..9713282dd 100644
--- a/frontend/src/views/usage/utils/records.ts
+++ b/frontend/src/views/usage/utils/records.ts
@@ -213,7 +213,7 @@ export function usageRecordTypeClass(record: UsageDisplayRecord) {
     return 'bg-cp-success-bg text-cp-success-text'
   if (type === 'Chat')
     return 'bg-cp-warning-bg text-cp-warning-text'
-  return 'bg-cp-muted text-cp-info-text'
+  return 'bg-cp-fill-tertiary text-cp-info-text'
 }
 
 export function usageAccountText(record: UsageDisplayRecord) {