diff --git a/apps/web/src/components/chat/chat-step/index.vue b/apps/web/src/components/chat/chat-step/index.vue
index e090263c0..0375d3422 100644
--- a/apps/web/src/components/chat/chat-step/index.vue
+++ b/apps/web/src/components/chat/chat-step/index.vue
@@ -2,7 +2,7 @@
   <section
     class="inline-flex items-center ml-1 gap-1 text-xs text-muted-foreground"
   >
-    <i class="w-1.25 aspect-square bg-blue-500 rounded-full" />
+    <i class="w-1.25 aspect-square bg-info rounded-full" />
     推理中
   </section>
-</template>
\ No newline at end of file
+</template>
diff --git a/apps/web/src/components/context-window-badge/index.vue b/apps/web/src/components/context-window-badge/index.vue
index b3c948864..be8d1e0e0 100644
--- a/apps/web/src/components/context-window-badge/index.vue
+++ b/apps/web/src/components/context-window-badge/index.vue
@@ -25,10 +25,10 @@ const formatted = computed(() => {
 
 const badgeClass = computed(() => {
   const ctx = props.contextWindow ?? 0
-  if (ctx >= 1_000_000) return 'bg-violet-50 text-violet-700 dark:bg-violet-950 dark:text-violet-300'
-  if (ctx >= 100_000) return 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-300'
-  if (ctx >= 32_000) return 'bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300'
-  if (ctx >= 8_000) return 'bg-amber-50 text-amber-700 dark:bg-amber-950 dark:text-amber-300'
-  return 'bg-neutral-100 text-neutral-600 dark:bg-neutral-800 dark:text-neutral-400'
+  if (ctx >= 1_000_000) return 'bg-context-window-xl text-context-window-foreground'
+  if (ctx >= 100_000) return 'bg-context-window-lg text-context-window-foreground'
+  if (ctx >= 32_000) return 'bg-context-window-md text-context-window-foreground'
+  if (ctx >= 8_000) return 'bg-context-window-sm text-context-window-foreground'
+  return 'bg-context-window-xs text-muted-foreground'
 })
 </script>
diff --git a/apps/web/src/components/file-manager/file-list.vue b/apps/web/src/components/file-manager/file-list.vue
index 8aa707585..58b4a6e2f 100644
--- a/apps/web/src/components/file-manager/file-list.vue
+++ b/apps/web/src/components/file-manager/file-list.vue
@@ -95,7 +95,7 @@ function handleClick(entry: HandlersFsFileInfo) {
             <div class="flex flex-1 items-center gap-2 min-w-0">
               <component
                 :is="entry.isDir ? Folder : File"
-                :class="entry.isDir ? 'text-blue-500' : 'text-muted-foreground'"
+                :class="entry.isDir ? 'text-info' : 'text-muted-foreground'"
                 class="size-4 shrink-0"
               />
               <span class="truncate">{{ entry.name }}</span>
diff --git a/apps/web/src/components/file-manager/file-viewer.vue b/apps/web/src/components/file-manager/file-viewer.vue
index 3dfb9f3c8..91d06eb51 100644
--- a/apps/web/src/components/file-manager/file-viewer.vue
+++ b/apps/web/src/components/file-manager/file-viewer.vue
@@ -165,7 +165,7 @@ onBeforeUnmount(() => {
       v-if="isText"
       type="button"
       size="sm"
-      class="absolute top-2 right-2 z-10 gap-1.5 bg-[#8B56E3] text-white shadow-md hover:bg-[#7c47d6] disabled:bg-[#8B56E3]/40 disabled:text-white/80"
+      class="absolute top-2 right-2 z-10 gap-1.5 bg-primary text-primary-foreground shadow-md hover:bg-brand-hover disabled:bg-primary/40 disabled:text-primary-foreground/80"
       :disabled="!isDirty || saving"
       :title="t('bots.files.save')"
       @click="handleSave"
diff --git a/apps/web/src/components/model-capabilities/index.vue b/apps/web/src/components/model-capabilities/index.vue
index c946e17b9..819f98212 100644
--- a/apps/web/src/components/model-capabilities/index.vue
+++ b/apps/web/src/components/model-capabilities/index.vue
@@ -29,10 +29,10 @@ const ICONS: Record<string, Component> = {
 }
 
 const CLASSES: Record<string, string> = {
-  'tool-call': 'bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300',
-  'vision': 'bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300',
-  'image-output': 'bg-pink-50 text-pink-700 dark:bg-pink-950 dark:text-pink-300',
-  'reasoning': 'bg-amber-50 text-amber-700 dark:bg-amber-950 dark:text-amber-300',
+  'tool-call': 'bg-capability-tool-soft text-capability-tool-foreground',
+  'vision': 'bg-capability-vision-soft text-capability-vision-foreground',
+  'image-output': 'bg-capability-image-soft text-capability-image-foreground',
+  'reasoning': 'bg-capability-reasoning-soft text-capability-reasoning-foreground',
 }
 
 function iconOf(cap: string): Component {
diff --git a/apps/web/src/components/settings-sidebar/index.vue b/apps/web/src/components/settings-sidebar/index.vue
index 15cdc7272..30a54c410 100644
--- a/apps/web/src/components/settings-sidebar/index.vue
+++ b/apps/web/src/components/settings-sidebar/index.vue
@@ -38,7 +38,7 @@
                   :tooltip="item.title"
                   :is-active="isItemActive(item.name)"
                   :aria-current="isItemActive(item.name) ? 'page' : undefined"
-                  class="h-9 gap-2 relative before:absolute before:w-0.5 before:top-1.5 before:bottom-1.5 before:left-0 before:rounded-full data-[active=true]:before:bg-[#8B56E3] group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0"
+                  class="h-9 gap-2 relative before:absolute before:w-0.5 before:top-1.5 before:bottom-1.5 before:left-0 before:rounded-full data-[active=true]:before:bg-sidebar-primary group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0"
                   @click="router.push({ name: item.name })"
                 >
                   <component
@@ -63,7 +63,7 @@ import { computed, inject, type Component } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useRouter, useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import { ChevronLeft, Bot, Boxes, Globe, Brain, Volume2, AudioLines, Mail, ChartLine, User, Store, Info } from 'lucide-vue-next'
+import { ChevronLeft, Bot, Boxes, Globe, Brain, Volume2, AudioLines, Mail, ChartLine, User, Store, Info, Palette } from 'lucide-vue-next'
 import { useChatSelectionStore } from '@/store/chat-selection'
 import {
   Sidebar,
@@ -120,6 +120,7 @@ const allNavItems: { title: string; name: string; icon: Component }[] = [
   { title: t('sidebar.email'), name: 'email', icon: Mail },
   { title: t('sidebar.supermarket'), name: 'supermarket', icon: Store },
   { title: t('sidebar.usage'), name: 'usage', icon: ChartLine },
+  { title: t('sidebar.appearance'), name: 'appearance', icon: Palette },
   { title: t('sidebar.profile'), name: 'profile', icon: User },
   { title: t('sidebar.about'), name: 'about', icon: Info },
 ]
diff --git a/apps/web/src/components/status-dot/index.vue b/apps/web/src/components/status-dot/index.vue
index bffba39d6..630e03e52 100644
--- a/apps/web/src/components/status-dot/index.vue
+++ b/apps/web/src/components/status-dot/index.vue
@@ -16,9 +16,9 @@ const props = withDefaults(defineProps<{
 
 const colorClass = computed(() => {
   switch (props.status) {
-    case 'success': return 'bg-green-500'
-    case 'error': return 'bg-red-500'
-    case 'warning': return 'bg-yellow-500'
+    case 'success': return 'bg-success'
+    case 'error': return 'bg-destructive'
+    case 'warning': return 'bg-warning'
     default: return 'bg-muted-foreground'
   }
 })
diff --git a/apps/web/src/constants/color-schemes.ts b/apps/web/src/constants/color-schemes.ts
new file mode 100644
index 000000000..94dcb1866
--- /dev/null
+++ b/apps/web/src/constants/color-schemes.ts
@@ -0,0 +1,47 @@
+export const colorSchemeIds = ['memoh', 'ocean', 'forest', 'rose', 'amber'] as const
+
+export type ColorSchemeId = typeof colorSchemeIds[number]
+
+export interface ColorSchemeOption {
+  id: ColorSchemeId
+  labelKey: string
+  descriptionKey: string
+  swatches: string[]
+}
+
+export const colorSchemes: ColorSchemeOption[] = [
+  {
+    id: 'memoh',
+    labelKey: 'settings.appearance.colorSchemes.memoh',
+    descriptionKey: 'settings.appearance.colorSchemeDescriptions.memoh',
+    swatches: ['oklch(0.22 0.006 286)', 'oklch(0.985 0.001 286)', 'oklch(0.967 0.001 286.375)', 'oklch(0.92 0.004 286.32)', 'oklch(0.55 0.22 290)', 'oklch(0.62 0.16 150)', 'oklch(0.72 0.15 75)', 'oklch(0.60 0.19 355)'],
+  },
+  {
+    id: 'ocean',
+    labelKey: 'settings.appearance.colorSchemes.ocean',
+    descriptionKey: 'settings.appearance.colorSchemeDescriptions.ocean',
+    swatches: ['oklch(0.22 0.006 286)', 'oklch(0.985 0.001 286)', 'oklch(0.967 0.001 286.375)', 'oklch(0.92 0.004 286.32)', 'oklch(0.56 0.15 230)', 'oklch(0.62 0.14 170)', 'oklch(0.72 0.14 80)', 'oklch(0.60 0.17 345)'],
+  },
+  {
+    id: 'forest',
+    labelKey: 'settings.appearance.colorSchemes.forest',
+    descriptionKey: 'settings.appearance.colorSchemeDescriptions.forest',
+    swatches: ['oklch(0.22 0.006 286)', 'oklch(0.985 0.001 286)', 'oklch(0.967 0.001 286.375)', 'oklch(0.92 0.004 286.32)', 'oklch(0.50 0.14 150)', 'oklch(0.58 0.15 145)', 'oklch(0.72 0.14 80)', 'oklch(0.58 0.16 20)'],
+  },
+  {
+    id: 'rose',
+    labelKey: 'settings.appearance.colorSchemes.rose',
+    descriptionKey: 'settings.appearance.colorSchemeDescriptions.rose',
+    swatches: ['oklch(0.22 0.006 286)', 'oklch(0.985 0.001 286)', 'oklch(0.967 0.001 286.375)', 'oklch(0.92 0.004 286.32)', 'oklch(0.58 0.18 355)', 'oklch(0.62 0.14 155)', 'oklch(0.72 0.14 75)', 'oklch(0.58 0.14 250)'],
+  },
+  {
+    id: 'amber',
+    labelKey: 'settings.appearance.colorSchemes.amber',
+    descriptionKey: 'settings.appearance.colorSchemeDescriptions.amber',
+    swatches: ['oklch(0.22 0.006 286)', 'oklch(0.985 0.001 286)', 'oklch(0.967 0.001 286.375)', 'oklch(0.92 0.004 286.32)', 'oklch(0.62 0.15 70)', 'oklch(0.58 0.14 145)', 'oklch(0.70 0.15 75)', 'oklch(0.56 0.14 230)'],
+  },
+]
+
+export function isColorSchemeId(value: string): value is ColorSchemeId {
+  return colorSchemeIds.includes(value as ColorSchemeId)
+}
diff --git a/apps/web/src/i18n/locales/en.json b/apps/web/src/i18n/locales/en.json
index a7a6a9b03..38b2e7622 100644
--- a/apps/web/src/i18n/locales/en.json
+++ b/apps/web/src/i18n/locales/en.json
@@ -74,6 +74,7 @@
     "mcp": "MCP",
     "platform": "Platform",
     "usage": "Usage",
+    "appearance": "Appearance",
     "supermarket": "Supermarket",
     "about": "About"
   },
@@ -114,6 +115,28 @@
     "themePlaceholder": "Select theme",
     "themeLight": "Light",
     "themeDark": "Dark",
+    "appearance": {
+      "title": "Appearance",
+      "description": "Adjust language, theme, and the semantic color palette used across Memoh.",
+      "interface": "Interface",
+      "interfaceDescription": "These preferences apply immediately and are stored on this device.",
+      "colorScheme": "Color scheme",
+      "colorSchemeDescription": "Choose a palette for base, brand, status, event, chart, terminal, and diff colors.",
+      "colorSchemes": {
+        "memoh": "Memoh",
+        "ocean": "Ocean",
+        "forest": "Forest",
+        "rose": "Rose",
+        "amber": "Amber"
+      },
+      "colorSchemeDescriptions": {
+        "memoh": "The default restrained purple palette.",
+        "ocean": "Cool blue with clear info states.",
+        "forest": "Green-focused and quiet.",
+        "rose": "Warm rose accents with soft contrast.",
+        "amber": "Golden highlights with practical status colors."
+      }
+    },
     "langZh": "中文",
     "langEn": "English",
     "version": "Version",
diff --git a/apps/web/src/i18n/locales/zh.json b/apps/web/src/i18n/locales/zh.json
index a5020f9e0..e2183bee3 100644
--- a/apps/web/src/i18n/locales/zh.json
+++ b/apps/web/src/i18n/locales/zh.json
@@ -74,6 +74,7 @@
     "mcp": "MCP",
     "platform": "接入平台",
     "usage": "用量统计",
+    "appearance": "外观",
     "supermarket": "市场",
     "about": "关于"
   },
@@ -110,6 +111,28 @@
     "themePlaceholder": "选择主题",
     "themeLight": "浅色",
     "themeDark": "深色",
+    "appearance": {
+      "title": "外观",
+      "description": "调整语言、主题，以及 Memoh 全局使用的语义化配色。",
+      "interface": "界面",
+      "interfaceDescription": "这些偏好会立即生效，并保存在当前设备上。",
+      "colorScheme": "配色方案",
+      "colorSchemeDescription": "选择基础、品牌、状态、事件、图表、终端和 diff 颜色使用的调色盘。",
+      "colorSchemes": {
+        "memoh": "Memoh",
+        "ocean": "海洋",
+        "forest": "森林",
+        "rose": "玫瑰",
+        "amber": "琥珀"
+      },
+      "colorSchemeDescriptions": {
+        "memoh": "默认的克制紫色方案。",
+        "ocean": "冷静蓝色，信息状态更清晰。",
+        "forest": "以绿色为核心，更安静稳重。",
+        "rose": "温暖玫瑰色，保持柔和对比。",
+        "amber": "金色强调，搭配实用状态色。"
+      }
+    },
     "langZh": "中文",
     "langEn": "English",
     "version": "版本",
diff --git a/apps/web/src/pages/about/index.vue b/apps/web/src/pages/about/index.vue
index c6e509b3d..e7af62e14 100644
--- a/apps/web/src/pages/about/index.vue
+++ b/apps/web/src/pages/about/index.vue
@@ -51,7 +51,7 @@
           v-if="checkResult.isUpToDate"
           class="flex items-center gap-2 text-xs text-muted-foreground"
         >
-          <CircleCheck class="size-3.5 text-green-500" />
+          <CircleCheck class="size-3.5 text-success" />
           {{ $t('about.upToDate') }}
         </div>
 
@@ -59,7 +59,7 @@
           <Separator />
 
           <div class="flex items-center gap-2">
-            <Badge class="bg-[#8B56E3] text-white hover:bg-[#8B56E3]/90">
+            <Badge class="bg-primary text-primary-foreground hover:bg-primary/90">
               {{ $t('about.newVersionAvailable', { version: checkResult.latestVersion }) }}
             </Badge>
           </div>
@@ -85,55 +85,6 @@
 
       <section>
         <Separator class="mb-4" />
-        <div class="grid grid-cols-[1fr_auto_1fr] gap-4 px-3 mb-3">
-          <div class="flex items-center gap-2">
-            <Globe class="size-3.5 shrink-0 text-muted-foreground" />
-            <span class="flex-1 text-xs">{{ $t('settings.language') }}</span>
-            <Select
-              :model-value="language"
-              @update:model-value="(v) => v && setLanguage(v as Locale)"
-            >
-              <SelectTrigger
-                class="w-24"
-                :aria-label="$t('settings.language')"
-              >
-                <SelectValue :placeholder="$t('settings.languagePlaceholder')" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  <SelectItem value="zh">
-                    {{ $t('settings.langZh') }}
-                  </SelectItem>
-                  <SelectItem value="en">
-                    {{ $t('settings.langEn') }}
-                  </SelectItem>
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-          </div>
-          <Separator orientation="vertical" />
-          <div class="flex items-center gap-2">
-            <span class="flex-1 text-xs">{{ $t('settings.theme') }}</span>
-            <div class="flex h-9 items-center rounded-md border border-input p-1">
-              <button
-                class="flex size-7 items-center justify-center rounded-sm transition-colors"
-                :class="theme === 'light' ? 'bg-accent text-accent-foreground' : 'text-muted-foreground hover:text-foreground'"
-                :aria-label="$t('settings.themeLight')"
-                @click="setTheme('light')"
-              >
-                <Sun class="size-4" />
-              </button>
-              <button
-                class="flex size-7 items-center justify-center rounded-sm transition-colors"
-                :class="theme === 'dark' ? 'bg-accent text-accent-foreground' : 'text-muted-foreground hover:text-foreground'"
-                :aria-label="$t('settings.themeDark')"
-                @click="setTheme('dark')"
-              >
-                <Moon class="size-4" />
-              </button>
-            </div>
-          </div>
-        </div>
         <div class="space-y-1">
           <a
             href="https://github.com/memohai/memoh"
@@ -176,12 +127,11 @@ import { computed, ref, onMounted } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useI18n } from 'vue-i18n'
 import { toast } from 'vue-sonner'
-import { RefreshCw, ExternalLink, Github, BookOpen, MessageSquare, CircleCheck, Globe, Sun, Moon } from 'lucide-vue-next'
-import { Badge, Button, Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Separator, Spinner } from '@memohai/ui'
+import { RefreshCw, ExternalLink, Github, BookOpen, MessageSquare, CircleCheck } from 'lucide-vue-next'
+import { Badge, Button, Separator, Spinner } from '@memohai/ui'
 import MarkdownRender from 'markstream-vue'
 import { useCapabilitiesStore } from '@/store/capabilities'
 import { useSettingsStore } from '@/store/settings'
-import type { Locale } from '@/i18n'
 
 const GITHUB_REPO = 'memohai/memoh'
 
@@ -200,8 +150,6 @@ const normalizeVersion = (version?: string | null) => (version ?? '').replace(/^
 const normalizedServerVersion = computed(() => normalizeVersion(serverVersion.value))
 
 const settingsStore = useSettingsStore()
-const { language, theme } = storeToRefs(settingsStore)
-const { setLanguage, setTheme } = settingsStore
 const isDark = computed(() => settingsStore.theme === 'dark')
 
 const checking = ref(false)
diff --git a/apps/web/src/pages/appearance/index.vue b/apps/web/src/pages/appearance/index.vue
new file mode 100644
index 000000000..b42d5fc22
--- /dev/null
+++ b/apps/web/src/pages/appearance/index.vue
@@ -0,0 +1,146 @@
+<template>
+  <section class="max-w-7xl mx-auto p-4 pb-12">
+    <div class="max-w-3xl mx-auto space-y-6">
+      <div>
+        <h1 class="text-lg font-semibold">
+          {{ t('settings.appearance.title') }}
+        </h1>
+        <p class="mt-1 text-xs text-muted-foreground">
+          {{ t('settings.appearance.description') }}
+        </p>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle class="text-sm">
+            {{ t('settings.appearance.interface') }}
+          </CardTitle>
+          <CardDescription class="text-xs">
+            {{ t('settings.appearance.interfaceDescription') }}
+          </CardDescription>
+        </CardHeader>
+        <CardContent class="space-y-5">
+          <div class="grid gap-2">
+            <Label>{{ t('settings.language') }}</Label>
+            <Select
+              :model-value="language"
+              @update:model-value="(value) => value && setLanguage(value as Locale)"
+            >
+              <SelectTrigger class="w-full sm:w-56">
+                <SelectValue :placeholder="t('settings.languagePlaceholder')" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="en">
+                  {{ t('settings.langEn') }}
+                </SelectItem>
+                <SelectItem value="zh">
+                  {{ t('settings.langZh') }}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div class="grid gap-2">
+            <Label>{{ t('settings.theme') }}</Label>
+            <div class="grid grid-cols-2 gap-2 sm:flex">
+              <Button
+                type="button"
+                variant="outline"
+                class="justify-start gap-2"
+                :class="theme === 'light' ? 'border-foreground bg-accent text-foreground' : ''"
+                @click="setTheme('light')"
+              >
+                <Sun class="size-4" />
+                {{ t('settings.themeLight') }}
+              </Button>
+              <Button
+                type="button"
+                variant="outline"
+                class="justify-start gap-2"
+                :class="theme === 'dark' ? 'border-foreground bg-accent text-foreground' : ''"
+                @click="setTheme('dark')"
+              >
+                <Moon class="size-4" />
+                {{ t('settings.themeDark') }}
+              </Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle class="text-sm">
+            {{ t('settings.appearance.colorScheme') }}
+          </CardTitle>
+          <CardDescription class="text-xs">
+            {{ t('settings.appearance.colorSchemeDescription') }}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div class="grid gap-3 sm:grid-cols-2">
+            <button
+              v-for="scheme in colorSchemes"
+              :key="scheme.id"
+              type="button"
+              class="rounded-lg border bg-background p-3 text-left transition-colors hover:bg-accent"
+              :class="colorScheme === scheme.id ? 'border-foreground' : 'border-border'"
+              @click="setColorScheme(scheme.id)"
+            >
+              <div class="flex items-center justify-between gap-3">
+                <div class="min-w-0">
+                  <p class="text-xs font-medium">
+                    {{ t(scheme.labelKey) }}
+                  </p>
+                  <p class="mt-1 text-[11px] text-muted-foreground">
+                    {{ t(scheme.descriptionKey) }}
+                  </p>
+                </div>
+                <Check
+                  v-if="colorScheme === scheme.id"
+                  class="size-4 shrink-0"
+                />
+              </div>
+              <div class="mt-3 flex gap-1.5">
+                <span
+                  v-for="swatch in scheme.swatches"
+                  :key="swatch"
+                  class="size-5 rounded-full border border-border"
+                  :style="{ backgroundColor: swatch }"
+                />
+              </div>
+            </button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@memohai/ui'
+import { Check, Moon, Sun } from 'lucide-vue-next'
+import { storeToRefs } from 'pinia'
+import { useI18n } from 'vue-i18n'
+import type { Locale } from '@/i18n'
+import { colorSchemes } from '@/constants/color-schemes'
+import { useSettingsStore } from '@/store/settings'
+
+const { t } = useI18n()
+const settingsStore = useSettingsStore()
+const { language, theme, colorScheme } = storeToRefs(settingsStore)
+const { setLanguage, setTheme, setColorScheme } = settingsStore
+</script>
diff --git a/apps/web/src/pages/bots/components/bot-access.vue b/apps/web/src/pages/bots/components/bot-access.vue
index 4b670bb26..7c20d3fef 100644
--- a/apps/web/src/pages/bots/components/bot-access.vue
+++ b/apps/web/src/pages/bots/components/bot-access.vue
@@ -31,15 +31,14 @@
           type="button"
           class="rounded-lg border p-4 text-left transition-colors"
           :class="defaultEffectDraft === 'allow'
-            ? 'border-foreground bg-foreground text-background'
+            ? 'border-ring bg-secondary text-foreground ring-1 ring-ring/20'
             : 'border-border bg-background text-foreground hover:bg-accent'"
           :disabled="isSavingDefaultEffect"
           @click="handleSetDefaultEffect('allow')"
         >
           <span class="text-sm font-medium">{{ $t('bots.access.blacklistMode') }}</span>
           <span
-            class="mt-1 block text-xs"
-            :class="defaultEffectDraft === 'allow' ? 'text-background/75' : 'text-muted-foreground'"
+            class="mt-1 block text-xs text-muted-foreground"
           >
             {{ $t('bots.access.blacklistModeDescription') }}
           </span>
@@ -48,15 +47,14 @@
           type="button"
           class="rounded-lg border p-4 text-left transition-colors"
           :class="defaultEffectDraft === 'deny'
-            ? 'border-foreground bg-foreground text-background'
+            ? 'border-ring bg-secondary text-foreground ring-1 ring-ring/20'
             : 'border-border bg-background text-foreground hover:bg-accent'"
           :disabled="isSavingDefaultEffect"
           @click="handleSetDefaultEffect('deny')"
         >
           <span class="text-sm font-medium">{{ $t('bots.access.whitelistMode') }}</span>
           <span
-            class="mt-1 block text-xs"
-            :class="defaultEffectDraft === 'deny' ? 'text-background/75' : 'text-muted-foreground'"
+            class="mt-1 block text-xs text-muted-foreground"
           >
             {{ $t('bots.access.whitelistModeDescription') }}
           </span>
@@ -142,7 +140,7 @@
               </p>
               <span
                 class="shrink-0 rounded-full px-2 py-0.5 text-[11px]"
-                :class="rule.enabled ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-500' : 'bg-muted text-muted-foreground'"
+                :class="rule.enabled ? 'bg-success-soft text-success-foreground' : 'bg-muted text-muted-foreground'"
               >
                 {{ rule.enabled ? $t('bots.access.ruleEnabled') : $t('bots.access.ruleDisabled') }}
               </span>
@@ -406,8 +404,8 @@
               type="button"
               class="rounded-md border px-2 py-1.5 text-xs font-medium transition-colors text-center"
               :class="ruleForm.sourceConversationType === scope.value
-                ? 'border-foreground bg-foreground text-background'
-                : 'border-border text-muted-foreground hover:bg-accent'"
+                ? 'border-ring bg-secondary text-foreground ring-1 ring-ring/20'
+                : 'border-border bg-background text-muted-foreground hover:bg-accent hover:text-foreground'"
               @click="setChatScope(scope.value)"
             >
               {{ scope.label }}
diff --git a/apps/web/src/pages/bots/components/bot-channels.vue b/apps/web/src/pages/bots/components/bot-channels.vue
index e8e677d53..013189c5e 100644
--- a/apps/web/src/pages/bots/components/bot-channels.vue
+++ b/apps/web/src/pages/bots/components/bot-channels.vue
@@ -53,7 +53,7 @@
               <div class="text-xs">
                 <span
                   v-if="!item.config?.disabled"
-                  class="text-green-600 dark:text-green-400"
+                  class="text-success-foreground"
                 >
                   {{ $t('bots.channels.statusActive') }}
                 </span>
diff --git a/apps/web/src/pages/bots/components/bot-container.vue b/apps/web/src/pages/bots/components/bot-container.vue
index bf2db9d49..18c32c270 100644
--- a/apps/web/src/pages/bots/components/bot-container.vue
+++ b/apps/web/src/pages/bots/components/bot-container.vue
@@ -730,7 +730,7 @@ watch([activeTab, botId], ([tab]) => {
 
     <div
       v-if="botLifecyclePending"
-      class="rounded-md border border-yellow-300/50 bg-yellow-50/70 p-3 text-xs text-yellow-800 dark:border-yellow-800/50 dark:bg-yellow-900/10 dark:text-yellow-200"
+      class="rounded-md border border-warning-border bg-warning-soft p-3 text-xs text-warning-foreground"
     >
       {{ $t('bots.container.botNotReady') }}
     </div>
@@ -873,9 +873,9 @@ watch([activeTab, botId], ([tab]) => {
     >
       <div
         v-if="isLegacy"
-        class="flex items-center justify-between gap-3 rounded-md border border-amber-300/50 bg-amber-50/70 p-3 dark:border-amber-800/50 dark:bg-amber-900/10"
+        class="flex items-center justify-between gap-3 rounded-md border border-warning-border bg-warning-soft p-3"
       >
-        <p class="text-xs text-amber-800 dark:text-amber-200">
+        <p class="text-xs text-warning-foreground">
           {{ $t('bots.container.legacyWarning') }}
         </p>
         <Button
diff --git a/apps/web/src/pages/bots/components/bot-mcp.vue b/apps/web/src/pages/bots/components/bot-mcp.vue
index 0df4da9e2..0a596f327 100644
--- a/apps/web/src/pages/bots/components/bot-mcp.vue
+++ b/apps/web/src/pages/bots/components/bot-mcp.vue
@@ -284,7 +284,7 @@
                 <Badge
                   v-if="selectedItem.status === 'connected'"
                   variant="outline"
-                  class="text-[10px] text-green-600"
+                  class="text-[10px] text-success-foreground"
                 >
                   {{ $t('mcp.statusConnected') }}
                 </Badge>
@@ -330,7 +330,7 @@
 
             <div
               v-if="probeAuthRequired"
-              class="text-xs text-amber-600 bg-amber-50 dark:bg-amber-900/20 rounded-md p-3 flex items-center gap-2"
+              class="text-xs text-warning-foreground bg-warning-soft rounded-md p-3 flex items-center gap-2"
             >
               <Lock />
               {{ $t('mcp.authRequired') }}
@@ -348,14 +348,14 @@
                 <Badge
                   v-if="oauthStatus?.has_token && !oauthStatus?.expired"
                   variant="outline"
-                  class="text-[10px] text-green-600"
+                  class="text-[10px] text-success-foreground"
                 >
                   {{ $t('mcp.oauth.authorized') }}
                 </Badge>
                 <Badge
                   v-else-if="oauthStatus?.has_token && oauthStatus?.expired"
                   variant="outline"
-                  class="text-[10px] text-amber-600"
+                  class="text-[10px] text-warning-foreground"
                 >
                   {{ $t('mcp.oauth.expired') }}
                 </Badge>
@@ -806,9 +806,9 @@ function statusDotClass(item: McpItem): string {
   if (!item.id) return 'bg-muted-foreground/40'
   if (!item.is_active) return 'bg-muted-foreground/40'
   switch (item.status) {
-    case 'connected': return 'bg-green-500'
+    case 'connected': return 'bg-success'
     case 'error': return 'bg-destructive'
-    default: return 'bg-amber-400'
+    default: return 'bg-warning'
   }
 }
 
diff --git a/apps/web/src/pages/bots/components/bot-memory.vue b/apps/web/src/pages/bots/components/bot-memory.vue
index 2088d9807..294766035 100644
--- a/apps/web/src/pages/bots/components/bot-memory.vue
+++ b/apps/web/src/pages/bots/components/bot-memory.vue
@@ -481,6 +481,7 @@ import { useI18n } from 'vue-i18n'
 import ConfirmPopover from '@/components/confirm-popover/index.vue'
 import { useClipboard } from '@/composables/useClipboard'
 import { formatDateTimeSeconds } from '@/utils/date-time'
+import { useSettingsStore } from '@/store/settings'
 
 use([CanvasRenderer, LineChart, BarChart, GridComponent, TooltipComponent])
 
@@ -521,6 +522,7 @@ const props = defineProps<{
 
 const { t } = useI18n()
 const colorMode = useColorMode()
+const settingsStore = useSettingsStore()
 const { copyText } = useClipboard()
 const loading = ref(false)
 const actionLoading = ref(false)
@@ -583,12 +585,13 @@ const denseCumulativeSeries = computed(() => {
 })
 
 const chartPalette = computed(() => {
-  // Depend on theme so echarts colors recalculate on light/dark switch.
+  // Depend on theme and palette so echarts colors recalculate on appearance changes.
   void colorMode.value
+  void settingsStore.colorScheme
   return {
-    tooltipBackground: resolveCssColor('var(--popover)', '#ffffff'),
+    tooltipBackground: resolveCssColor('var(--popover)', 'white'),
     tooltipBorder: resolveCssColor('var(--border)', 'rgba(0,0,0,0.12)'),
-    tooltipText: resolveCssColor('var(--popover-foreground)', '#111827'),
+    tooltipText: resolveCssColor('var(--popover-foreground)', 'CanvasText'),
     axisText: resolveCssColor('var(--muted-foreground)', 'rgba(107,114,128,0.9)'),
     splitLine: resolveCssColor('color-mix(in oklab, var(--muted-foreground) 8%, transparent)', 'rgba(107,114,128,0.12)'),
     topKBar: resolveCssColor('color-mix(in oklab, var(--primary) 16%, transparent)', 'rgba(99,102,241,0.18)'),
diff --git a/apps/web/src/pages/bots/components/bot-tool-approval.vue b/apps/web/src/pages/bots/components/bot-tool-approval.vue
index e5bafe635..7423fed48 100644
--- a/apps/web/src/pages/bots/components/bot-tool-approval.vue
+++ b/apps/web/src/pages/bots/components/bot-tool-approval.vue
@@ -62,7 +62,7 @@
             <div class="flex flex-col gap-2">
               <div class="flex items-center justify-between">
                 <Label class="flex items-center gap-1.5 text-xs font-medium">
-                  <ShieldCheck class="size-3.5 text-emerald-600 dark:text-emerald-500" />
+                  <ShieldCheck class="size-3.5 text-success-foreground" />
                   {{ $t('bots.toolApproval.bypass') }}
                 </Label>
                 <span class="text-xs text-muted-foreground tabular-nums">
@@ -83,7 +83,7 @@
             <div class="flex flex-col gap-2">
               <div class="flex items-center justify-between">
                 <Label class="flex items-center gap-1.5 text-xs font-medium">
-                  <ShieldAlert class="size-3.5 text-amber-600 dark:text-amber-500" />
+                  <ShieldAlert class="size-3.5 text-warning-foreground" />
                   {{ $t('bots.toolApproval.mustReview') }}
                 </Label>
                 <span class="text-xs text-muted-foreground tabular-nums">
diff --git a/apps/web/src/pages/bots/components/network-node-select.vue b/apps/web/src/pages/bots/components/network-node-select.vue
index 39b778e8f..60b493554 100644
--- a/apps/web/src/pages/bots/components/network-node-select.vue
+++ b/apps/web/src/pages/bots/components/network-node-select.vue
@@ -21,7 +21,7 @@
           <CircleDot
             v-if="selected"
             class="size-3.5"
-            :class="selectedOption?.online ? 'text-emerald-500' : 'text-muted-foreground'"
+            :class="selectedOption?.online ? 'text-success' : 'text-muted-foreground'"
           />
           <span class="truncate">{{ displayLabel || placeholder }}</span>
         </span>
@@ -33,7 +33,7 @@
       <CircleDot
         v-if="option.value"
         class="size-3.5"
-        :class="option.meta?.online ? 'text-emerald-500' : 'text-muted-foreground'"
+        :class="option.meta?.online ? 'text-success' : 'text-muted-foreground'"
       />
     </template>
   </SearchableSelectPopover>
diff --git a/apps/web/src/pages/bots/components/weixin-qr-login.vue b/apps/web/src/pages/bots/components/weixin-qr-login.vue
index ee050afdf..b8af6e468 100644
--- a/apps/web/src/pages/bots/components/weixin-qr-login.vue
+++ b/apps/web/src/pages/bots/components/weixin-qr-login.vue
@@ -100,9 +100,9 @@
       v-else-if="qrState === 'success'"
       class="flex flex-col items-center gap-3 py-4"
     >
-      <div class="flex size-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-900">
+      <div class="flex size-12 items-center justify-center rounded-full bg-success-soft">
         <Check
-          class="size-5 text-green-600 dark:text-green-400"
+          class="size-5 text-success-foreground"
         />
       </div>
       <p class="text-xs font-medium">
diff --git a/apps/web/src/pages/bots/new.vue b/apps/web/src/pages/bots/new.vue
index 190567bbf..1c2032be8 100644
--- a/apps/web/src/pages/bots/new.vue
+++ b/apps/web/src/pages/bots/new.vue
@@ -101,7 +101,7 @@
                   :placeholder="$t('bots.localWorkspacePathPlaceholder')"
                 />
               </div>
-              <div class="rounded-md border border-amber-500/30 bg-amber-500/5 px-3 py-2 text-xs text-amber-700 dark:text-amber-400">
+              <div class="rounded-md border border-warning-border bg-warning-soft px-3 py-2 text-xs text-warning-foreground">
                 {{ $t('bots.localWorkspaceWarning') }}
               </div>
             </template>
diff --git a/apps/web/src/pages/home/components/background-task-block.vue b/apps/web/src/pages/home/components/background-task-block.vue
index bd3cf18a7..89b498457 100644
--- a/apps/web/src/pages/home/components/background-task-block.vue
+++ b/apps/web/src/pages/home/components/background-task-block.vue
@@ -60,12 +60,12 @@ const iconClass = computed(() => {
     case 'running':
       return 'animate-spin text-muted-foreground'
     case 'completed':
-      return 'text-emerald-600 dark:text-emerald-500'
+      return 'text-success-foreground'
     case 'failed':
     case 'killed':
       return 'text-destructive'
     case 'stalled':
-      return 'text-amber-600 dark:text-amber-500'
+      return 'text-warning-foreground'
     default:
       return 'text-muted-foreground'
   }
@@ -74,12 +74,12 @@ const iconClass = computed(() => {
 const labelClass = computed(() => {
   switch (normalizedStatus.value) {
     case 'completed':
-      return 'text-emerald-700 dark:text-emerald-400'
+      return 'text-success-foreground'
     case 'failed':
     case 'killed':
       return 'text-destructive'
     case 'stalled':
-      return 'text-amber-700 dark:text-amber-400'
+      return 'text-warning-foreground'
     default:
       return ''
   }
diff --git a/apps/web/src/pages/home/components/chat-pane.vue b/apps/web/src/pages/home/components/chat-pane.vue
index d2901d75f..88d0e0e3e 100644
--- a/apps/web/src/pages/home/components/chat-pane.vue
+++ b/apps/web/src/pages/home/components/chat-pane.vue
@@ -230,7 +230,7 @@
                   size="icon"
                   :disabled="(!inputText.trim() && !pendingFiles.length) || !currentBotId || activeChatReadOnly"
                   aria-label="Send message"
-                  class="size-7 rounded-full bg-[#8B56E3] text-white"
+                  class="size-7 rounded-full bg-primary text-primary-foreground"
                   @click="handleSend"
                 >
                   <Send
diff --git a/apps/web/src/pages/home/components/chat-sidebar-mcp.vue b/apps/web/src/pages/home/components/chat-sidebar-mcp.vue
index ab9c8335a..35142f2c7 100644
--- a/apps/web/src/pages/home/components/chat-sidebar-mcp.vue
+++ b/apps/web/src/pages/home/components/chat-sidebar-mcp.vue
@@ -179,9 +179,9 @@ function reload() {
 function statusDotClass(item: McpItem): string {
   if (!item.is_active) return 'bg-muted-foreground/40'
   switch (item.status) {
-    case 'connected': return 'bg-green-500'
+    case 'connected': return 'bg-success'
     case 'error': return 'bg-destructive'
-    default: return 'bg-amber-400'
+    default: return 'bg-warning'
   }
 }
 
diff --git a/apps/web/src/pages/home/components/chat-sidebar-sessions.vue b/apps/web/src/pages/home/components/chat-sidebar-sessions.vue
index 3118dd709..b927f0eba 100644
--- a/apps/web/src/pages/home/components/chat-sidebar-sessions.vue
+++ b/apps/web/src/pages/home/components/chat-sidebar-sessions.vue
@@ -189,10 +189,10 @@ const filterIconComponent = computed<Component>(() => {
 
 const filterIconClass = computed(() => {
   switch (filterType.value) {
-    case 'discuss': return 'text-sky-400'
-    case 'heartbeat': return 'text-rose-400'
-    case 'schedule': return 'text-amber-400'
-    case 'subagent': return 'text-violet-400'
+    case 'discuss': return 'text-event-discuss'
+    case 'heartbeat': return 'text-event-heartbeat'
+    case 'schedule': return 'text-event-schedule'
+    case 'subagent': return 'text-event-subagent'
     default: return 'text-muted-foreground'
   }
 })
diff --git a/apps/web/src/pages/home/components/chat-sidebar.vue b/apps/web/src/pages/home/components/chat-sidebar.vue
index b5ee42fce..5f375d5ef 100644
--- a/apps/web/src/pages/home/components/chat-sidebar.vue
+++ b/apps/web/src/pages/home/components/chat-sidebar.vue
@@ -12,7 +12,7 @@
             type="button"
             class="relative flex items-center justify-center size-8 shrink-0 rounded-md transition-colors before:absolute before:h-0.5 before:left-1.5 before:right-1.5 before:top-0 before:rounded-full"
             :class="activeTab === tab.id
-              ? 'bg-sidebar-accent text-sidebar-accent-foreground before:bg-[#8B56E3]'
+              ? 'bg-sidebar-accent text-sidebar-accent-foreground before:bg-sidebar-primary'
               : 'text-muted-foreground hover:bg-sidebar-accent/40 hover:text-foreground before:bg-transparent'"
             :title="tab.label"
             :aria-label="tab.label"
diff --git a/apps/web/src/pages/home/components/display-pane.vue b/apps/web/src/pages/home/components/display-pane.vue
index 87b9e8e0a..57a08ddb4 100644
--- a/apps/web/src/pages/home/components/display-pane.vue
+++ b/apps/web/src/pages/home/components/display-pane.vue
@@ -1,19 +1,18 @@
 <template>
   <div
     ref="rootRef"
-    class=" inset-0 flex flex-col bg-black z-10 "
+    class=" inset-0 flex flex-col bg-foreground z-10 "
     :class="isFullScroll?'fixed':'absolute'"
     @click="closeStatsMenu"
   >
     <Maximize
       ref="fullScreenIcon"
-      color="#ccc"
-      class="absolute top-4 right-4  transition-all opacity-0 duration-500"
+      class="absolute top-4 right-4 text-background/80 transition-all opacity-0 duration-500"
       @click="()=>toggle()"
     />
     <video
       ref="videoRef"
-      class="size-full min-h-0 flex-1 bg-black object-contain"
+      class="size-full min-h-0 flex-1 bg-foreground object-contain"
       autoplay
       playsinline
       muted
diff --git a/apps/web/src/pages/home/components/heartbeat-trigger-block.vue b/apps/web/src/pages/home/components/heartbeat-trigger-block.vue
index 4cd18a591..e79b1baa8 100644
--- a/apps/web/src/pages/home/components/heartbeat-trigger-block.vue
+++ b/apps/web/src/pages/home/components/heartbeat-trigger-block.vue
@@ -1,14 +1,14 @@
 <template>
   <div
-    class="w-full rounded-lg border border-rose-200 dark:border-rose-400/20 bg-rose-50/50 dark:bg-rose-950/20 px-4 py-3 cursor-pointer transition-colors hover:bg-rose-50 dark:hover:bg-rose-950/30"
+    class="w-full rounded-lg border border-event-heartbeat-border bg-event-heartbeat-soft px-4 py-3 cursor-pointer transition-colors hover:bg-event-heartbeat-soft/80"
     @click="navigateToLogs"
   >
     <div class="flex items-center justify-between mb-2">
-      <div class="flex items-center gap-2 text-xs font-medium text-rose-600 dark:text-rose-400">
+      <div class="flex items-center gap-2 text-xs font-medium text-event-heartbeat-foreground">
         <HeartPulse class="size-3.5" />
         {{ t('chat.heartbeatTrigger') }}
       </div>
-      <div class="flex items-center gap-1 text-[11px] text-rose-500/70 dark:text-rose-400/60">
+      <div class="flex items-center gap-1 text-[11px] text-event-heartbeat-foreground/70">
         {{ t('chat.viewHeartbeatLogs') }}
         <ExternalLink class="size-3" />
       </div>
@@ -58,7 +58,7 @@ const parsed = computed<HeartbeatInfo>(() => {
   const frontmatterMatch = text.match(/---\n([\s\S]*?)\n---/)
   if (!frontmatterMatch) return {}
 
-  const lines = frontmatterMatch[1].split('\n')
+  const lines = (frontmatterMatch[1] ?? '').split('\n')
   const info: HeartbeatInfo = {}
   for (const line of lines) {
     const idx = line.indexOf(':')
diff --git a/apps/web/src/pages/home/components/message-item.vue b/apps/web/src/pages/home/components/message-item.vue
index 40351a6d2..d871844ac 100644
--- a/apps/web/src/pages/home/components/message-item.vue
+++ b/apps/web/src/pages/home/components/message-item.vue
@@ -129,7 +129,7 @@
       >
         <div
           v-if="message.text"
-          class="w-full rounded-lg border border-violet-200 dark:border-violet-400/20 bg-violet-50/50 dark:bg-violet-950/20 px-4 py-3"
+          class="w-full rounded-lg border border-event-subagent-border bg-event-subagent-soft px-4 py-3"
         >
           <div class="prose prose-sm dark:prose-invert max-w-none *:first:mt-0">
             <MarkdownRender
@@ -162,13 +162,12 @@
           v-if="cleanUserText(message.text) || message.forward || message.reply"
           class="rounded-2xl px-3 py-2 text-xs whitespace-pre-wrap break-all"
           :class="isSelf
-            ? 'rounded-tr-sm bg-foreground text-background'
-            : 'rounded-tl-sm bg-accent text-foreground'"
+            ? 'rounded-tr-sm bg-accent text-foreground'
+            : 'rounded-tl-sm bg-muted text-foreground'"
         >
           <div
             v-if="message.forward"
-            class="mb-1 text-[11px] font-medium leading-snug"
-            :class="isSelf ? 'text-background/70' : 'text-muted-foreground'"
+            class="mb-1 text-[11px] font-medium leading-snug text-muted-foreground"
           >
             {{ t('chat.forwardedFrom', { sender: forwardSenderLabel }) }}
           </div>
@@ -177,28 +176,27 @@
             type="button"
             class="relative mb-1 min-w-0 overflow-hidden rounded-sm py-1 pl-3 pr-2 leading-snug break-normal"
             :class="[
-              isSelf ? 'bg-background/10' : 'bg-background/40',
-              canJumpReply ? 'block w-full text-left cursor-pointer hover:bg-background/15 focus:outline-none focus:ring-1 focus:ring-primary/40' : 'block w-full text-left cursor-default',
+              'bg-background/55 dark:bg-background/20',
+              canJumpReply ? 'block w-full text-left cursor-pointer hover:bg-background/70 dark:hover:bg-background/30 focus:outline-none focus:ring-1 focus:ring-primary/40' : 'block w-full text-left cursor-default',
             ]"
             :disabled="!canJumpReply"
             @click.stop="handleReplyClick"
           >
             <span
               class="absolute inset-y-0 left-0 w-[3px]"
-              :class="isSelf ? 'bg-background/60' : 'bg-primary/70'"
+              :class="isSelf ? 'bg-border' : 'bg-primary/70'"
             />
             <div class="flex min-w-0 items-start gap-2">
               <div class="min-w-0 flex-1">
                 <div
                   class="truncate text-[11px] font-semibold"
-                  :class="isSelf ? 'text-background' : 'text-primary'"
+                  :class="isSelf ? 'text-foreground' : 'text-primary'"
                 >
                   {{ replySenderLabel }}
                 </div>
                 <div
                   v-if="replyPreviewLabel"
-                  class="mt-0.5 line-clamp-2 text-[11px] whitespace-pre-wrap break-words"
-                  :class="isSelf ? 'text-background/75' : 'text-muted-foreground'"
+                  class="mt-0.5 line-clamp-2 text-[11px] whitespace-pre-wrap break-words text-muted-foreground"
                 >
                   {{ replyPreviewLabel }}
                 </div>
diff --git a/apps/web/src/pages/home/components/schedule-trigger-block.vue b/apps/web/src/pages/home/components/schedule-trigger-block.vue
index 6c5ed6286..6ebe3a058 100644
--- a/apps/web/src/pages/home/components/schedule-trigger-block.vue
+++ b/apps/web/src/pages/home/components/schedule-trigger-block.vue
@@ -1,14 +1,14 @@
 <template>
   <div
-    class="w-full rounded-lg border border-amber-200 dark:border-amber-400/20 bg-amber-50/50 dark:bg-amber-950/20 px-4 py-3 cursor-pointer transition-colors hover:bg-amber-50 dark:hover:bg-amber-950/30"
+    class="w-full rounded-lg border border-event-schedule-border bg-event-schedule-soft px-4 py-3 cursor-pointer transition-colors hover:bg-event-schedule-soft/80"
     @click="navigateToSchedule"
   >
     <div class="flex items-center justify-between mb-2">
-      <div class="flex items-center gap-2 text-xs font-medium text-amber-600 dark:text-amber-400">
+      <div class="flex items-center gap-2 text-xs font-medium text-event-schedule-foreground">
         <Clock class="size-3.5" />
         {{ t('chat.scheduleTrigger') }}
       </div>
-      <div class="flex items-center gap-1 text-[11px] text-amber-500/70 dark:text-amber-400/60">
+      <div class="flex items-center gap-1 text-[11px] text-event-schedule-foreground/70">
         {{ t('chat.viewSchedule') }}
         <ExternalLink class="size-3" />
       </div>
@@ -24,7 +24,7 @@
         class="text-muted-foreground"
       >{{ t('chat.schedulePattern') }}</span>
       <span v-if="parsed.pattern">
-        <code class="text-[11px] px-1 py-0.5 rounded bg-amber-100/50 dark:bg-amber-900/30">{{ parsed.pattern }}</code>
+        <code class="text-[11px] px-1 py-0.5 rounded bg-event-schedule/10">{{ parsed.pattern }}</code>
       </span>
       <span
         v-if="parsed.description"
@@ -39,7 +39,7 @@
     </div>
     <div
       v-if="parsed.command"
-      class="mt-2 text-xs text-muted-foreground border-t border-amber-200/50 dark:border-amber-400/10 pt-2"
+      class="mt-2 text-xs text-muted-foreground border-t border-event-schedule-border/60 pt-2"
     >
       <pre class="whitespace-pre-wrap break-all font-mono text-[11px]">{{ parsed.command }}</pre>
     </div>
@@ -73,7 +73,7 @@ const parsed = computed<ScheduleInfo>(() => {
   const frontmatterMatch = text.match(/---\n([\s\S]*?)\n---/)
   if (!frontmatterMatch) return {}
 
-  const lines = frontmatterMatch[1].split('\n')
+  const lines = (frontmatterMatch[1] ?? '').split('\n')
   const info: ScheduleInfo = {}
   for (const line of lines) {
     const idx = line.indexOf(':')
diff --git a/apps/web/src/pages/home/components/session-info-panel.vue b/apps/web/src/pages/home/components/session-info-panel.vue
index 14f5d1089..167717dde 100644
--- a/apps/web/src/pages/home/components/session-info-panel.vue
+++ b/apps/web/src/pages/home/components/session-info-panel.vue
@@ -57,7 +57,6 @@
             <span class="text-muted-foreground">{{ $t('chat.infoCacheRead') }}</span>
             <span class="font-medium text-foreground tabular-nums">{{ formatTokenCount(info?.cache_stats?.cache_read_tokens ?? 0) }}</span>
           </div>
-
         </div>
 
         <!-- Compact Now -->
@@ -165,7 +164,7 @@ const { data: skillCatalog } = useQuery({
 
 const contextBarColor = computed(() => {
   if (contextPercent.value >= 90) return 'bg-destructive'
-  if (contextPercent.value >= 70) return 'bg-amber-500'
+  if (contextPercent.value >= 70) return 'bg-warning'
   return 'bg-foreground'
 })
 
diff --git a/apps/web/src/pages/home/components/session-info-ring.vue b/apps/web/src/pages/home/components/session-info-ring.vue
index f2c0780c8..fae18a828 100644
--- a/apps/web/src/pages/home/components/session-info-ring.vue
+++ b/apps/web/src/pages/home/components/session-info-ring.vue
@@ -91,7 +91,7 @@ const dashOffset = computed(() => {
 
 const ringColorClass = computed(() => {
   if (contextPercent.value >= 90) return 'text-destructive'
-  if (contextPercent.value >= 70) return 'text-amber-500'
+  if (contextPercent.value >= 70) return 'text-warning'
   return 'text-foreground'
 })
 
diff --git a/apps/web/src/pages/home/components/session-item.vue b/apps/web/src/pages/home/components/session-item.vue
index a9732277c..bc588ea6e 100644
--- a/apps/web/src/pages/home/components/session-item.vue
+++ b/apps/web/src/pages/home/components/session-item.vue
@@ -142,9 +142,9 @@ const iconComponent = computed<Component>(() => {
 
 const iconClass = computed(() => {
   switch (props.session.type) {
-    case 'heartbeat': return 'text-rose-400'
-    case 'schedule': return 'text-amber-400'
-    case 'subagent': return 'text-violet-400'
+    case 'heartbeat': return 'text-event-heartbeat'
+    case 'schedule': return 'text-event-schedule'
+    case 'subagent': return 'text-event-subagent'
     default: return 'text-muted-foreground'
   }
 })
diff --git a/apps/web/src/pages/home/components/terminal-pane.vue b/apps/web/src/pages/home/components/terminal-pane.vue
index c7e45df8c..df05af4ad 100644
--- a/apps/web/src/pages/home/components/terminal-pane.vue
+++ b/apps/web/src/pages/home/components/terminal-pane.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="absolute inset-0 flex flex-col bg-[#1a1b26]">
+  <div class="absolute inset-0 flex flex-col bg-[var(--terminal-background)]">
     <div
       ref="wrapperRef"
       class="flex-1 relative min-h-0 terminal-wrapper"
@@ -38,6 +38,7 @@ import {
   terminalCacheKey,
   writeTerminalSnapshot,
 } from '@/composables/useTerminalCache'
+import { useSettingsStore } from '@/store/settings'
 import '@xterm/xterm/css/xterm.css'
 
 const props = withDefaults(defineProps<{
@@ -49,17 +50,26 @@ const props = withDefaults(defineProps<{
 })
 
 const { t } = useI18n()
+const settingsStore = useSettingsStore()
+
+function cssVar(name: string): string {
+  if (typeof document === 'undefined') return ''
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+}
+
+function resolveTerminalTheme() {
+  return {
+    background: cssVar('--terminal-background') || 'black',
+    foreground: cssVar('--terminal-foreground') || 'white',
+    cursor: cssVar('--terminal-cursor') || 'white',
+    selectionBackground: cssVar('--terminal-selection') || 'gray',
+  }
+}
 
 const TERMINAL_OPTIONS = {
   cursorBlink: true,
   fontSize: 14,
   fontFamily: 'Menlo, Monaco, "Courier New", monospace',
-  theme: {
-    background: '#1a1b26',
-    foreground: '#a9b1d6',
-    cursor: '#c0caf5',
-    selectionBackground: '#33467c',
-  },
 } as const
 
 const wrapperRef = ref<HTMLDivElement | null>(null)
@@ -197,7 +207,7 @@ function setupResizeObserver() {
 
 onMounted(() => {
   if (!containerRef.value) return
-  const term = new Terminal({ ...TERMINAL_OPTIONS })
+  const term = new Terminal({ ...TERMINAL_OPTIONS, theme: resolveTerminalTheme() })
   const fa = new FitAddon()
   const sa = new SerializeAddon()
   term.loadAddon(fa)
@@ -248,6 +258,15 @@ watch(
   { flush: 'post' },
 )
 
+watch(
+  [() => settingsStore.theme, () => settingsStore.colorScheme],
+  () => {
+    if (terminal) {
+      terminal.options.theme = resolveTerminalTheme()
+    }
+  },
+)
+
 onBeforeUnmount(() => {
   persistSnapshot()
   if (fitTimer) {
@@ -265,9 +284,3 @@ onBeforeUnmount(() => {
   serializeAddon = null
 })
 </script>
-
-<style scoped>
-.terminal-wrapper {
-  background-color: #1a1b26;
-}
-</style>
diff --git a/apps/web/src/pages/home/components/tool-call-detail-edit.vue b/apps/web/src/pages/home/components/tool-call-detail-edit.vue
index 1209d491c..1f9349628 100644
--- a/apps/web/src/pages/home/components/tool-call-detail-edit.vue
+++ b/apps/web/src/pages/home/components/tool-call-detail-edit.vue
@@ -64,11 +64,11 @@ onMounted(() => {
   background: transparent !important;
 }
 .shiki-diff-container .diff-remove {
-  background-color: oklch(0.55 0.12 25 / 0.12);
-  border-left: 3px solid oklch(0.55 0.12 25 / 0.5);
+  background-color: var(--diff-remove);
+  border-left: 3px solid var(--diff-remove-border);
 }
 .shiki-diff-container .diff-add {
-  background-color: oklch(0.55 0.12 145 / 0.12);
-  border-left: 3px solid oklch(0.55 0.12 145 / 0.5);
+  background-color: var(--diff-add);
+  border-left: 3px solid var(--diff-add-border);
 }
 </style>
diff --git a/apps/web/src/pages/home/components/tool-call-detail-spawn.vue b/apps/web/src/pages/home/components/tool-call-detail-spawn.vue
index cba7ac447..0aa67f5ac 100644
--- a/apps/web/src/pages/home/components/tool-call-detail-spawn.vue
+++ b/apps/web/src/pages/home/components/tool-call-detail-spawn.vue
@@ -31,7 +31,7 @@
       >
         <CircleCheck
           v-if="result.success"
-          class="size-3 text-emerald-500 shrink-0"
+          class="size-3 text-success shrink-0"
         />
         <CircleX
           v-else
diff --git a/apps/web/src/pages/home/components/tool-call-inline.vue b/apps/web/src/pages/home/components/tool-call-inline.vue
index 6237879b0..ecc852e2c 100644
--- a/apps/web/src/pages/home/components/tool-call-inline.vue
+++ b/apps/web/src/pages/home/components/tool-call-inline.vue
@@ -36,11 +36,11 @@
       >{{ display.target }}</span>
       <span
         v-if="display.diffAdd"
-        class="font-mono shrink-0 text-emerald-600 dark:text-emerald-500"
+        class="font-mono shrink-0 text-success-foreground"
       >+{{ display.diffAdd }}</span>
       <span
         v-if="display.diffRemove"
-        class="font-mono shrink-0 text-rose-600 dark:text-rose-500"
+        class="font-mono shrink-0 text-destructive"
       >-{{ display.diffRemove }}</span>
       <span
         v-if="display.errorSuffix"
@@ -48,7 +48,7 @@
       >{{ display.errorSuffix }}</span>
       <span
         v-if="approvalLabel"
-        class="font-mono shrink-0 text-xs text-amber-600 dark:text-amber-500"
+        class="font-mono shrink-0 text-xs text-warning-foreground"
       >{{ approvalLabel }}</span>
       <ChevronRight
         v-if="!open"
@@ -91,11 +91,11 @@
       >{{ display.target }}</span>
       <span
         v-if="display.diffAdd"
-        class="font-mono shrink-0 text-emerald-600 dark:text-emerald-500"
+        class="font-mono shrink-0 text-success-foreground"
       >+{{ display.diffAdd }}</span>
       <span
         v-if="display.diffRemove"
-        class="font-mono shrink-0 text-rose-600 dark:text-rose-500"
+        class="font-mono shrink-0 text-destructive"
       >-{{ display.diffRemove }}</span>
       <span
         v-if="display.errorSuffix"
@@ -103,7 +103,7 @@
       >{{ display.errorSuffix }}</span>
       <span
         v-if="approvalLabel"
-        class="font-mono shrink-0 text-xs text-amber-600 dark:text-amber-500"
+        class="font-mono shrink-0 text-xs text-warning-foreground"
       >{{ approvalLabel }}</span>
     </div>
 
@@ -128,7 +128,7 @@
     >
       <Button
         size="sm"
-        class="bg-emerald-600 hover:bg-emerald-700 text-white"
+        class="bg-success hover:bg-success/90 text-success-foreground"
         @click="handleApproval('approve')"
       >
         {{ t('chat.tools.approve', 'Allow') }}
diff --git a/apps/web/src/pages/oauth/mcp-callback.vue b/apps/web/src/pages/oauth/mcp-callback.vue
index 9843b1ea3..6effca77a 100644
--- a/apps/web/src/pages/oauth/mcp-callback.vue
+++ b/apps/web/src/pages/oauth/mcp-callback.vue
@@ -7,7 +7,7 @@
       />
       <CircleCheck
         v-else-if="success"
-        class="size-8 text-green-500"
+        class="size-8 text-success"
       />
       <CircleX
         v-else
diff --git a/apps/web/src/pages/providers/components/model-item.vue b/apps/web/src/pages/providers/components/model-item.vue
index c60b7d1ea..59413f6f3 100644
--- a/apps/web/src/pages/providers/components/model-item.vue
+++ b/apps/web/src/pages/providers/components/model-item.vue
@@ -123,10 +123,10 @@ const typeIcon = computed(() => {
 
 const statusDotClass = computed(() => {
   switch (testResult.value?.status) {
-    case 'ok': return 'bg-green-500'
-    case 'auth_error': return 'bg-yellow-500'
-    case 'error': return 'bg-red-500'
-    default: return 'bg-gray-400'
+    case 'ok': return 'bg-success'
+    case 'auth_error': return 'bg-warning'
+    case 'error': return 'bg-destructive'
+    default: return 'bg-muted-foreground'
   }
 })
 
diff --git a/apps/web/src/router.ts b/apps/web/src/router.ts
index ff9d66404..001013f52 100644
--- a/apps/web/src/router.ts
+++ b/apps/web/src/router.ts
@@ -121,6 +121,14 @@ const routes = [
           breadcrumb: i18nRef('sidebar.usage'),
         },
       },
+      {
+        name: 'appearance',
+        path: 'appearance',
+        component: () => import('@/pages/appearance/index.vue'),
+        meta: {
+          breadcrumb: i18nRef('sidebar.appearance'),
+        },
+      },
       {
         name: 'profile',
         path: 'profile',
diff --git a/apps/web/src/store/settings.ts b/apps/web/src/store/settings.ts
index b79a26716..42073fa64 100644
--- a/apps/web/src/store/settings.ts
+++ b/apps/web/src/store/settings.ts
@@ -2,10 +2,12 @@ import type { Locale } from '@/i18n'
 import { defineStore } from 'pinia'
 import { useColorMode, useStorage } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
+import { isColorSchemeId, type ColorSchemeId } from '@/constants/color-schemes'
 
 export interface Settings {
   language: Locale;
   theme: 'light' | 'dark';
+  colorScheme: ColorSchemeId;
 }
 
 export const useSettingsStore = defineStore('settings', () => {
@@ -13,9 +15,19 @@ export const useSettingsStore = defineStore('settings', () => {
   const i18n = useI18n()
   const language = useStorage<Locale>('language', 'en')
   const theme = useStorage<'light' | 'dark'>('theme', 'light')
+  const colorScheme = useStorage<ColorSchemeId>('color-scheme', 'memoh')
+
+  const applyColorScheme = (value: ColorSchemeId) => {
+    if (typeof document === 'undefined') return
+    document.documentElement.dataset.colorScheme = value
+  }
 
   colorMode.value = theme.value
   i18n.locale.value = language.value
+  if (!isColorSchemeId(colorScheme.value)) {
+    colorScheme.value = 'memoh'
+  }
+  applyColorScheme(colorScheme.value)
 
   const setLanguage = (value: Locale) => {
     language.value = value
@@ -27,10 +39,17 @@ export const useSettingsStore = defineStore('settings', () => {
     colorMode.value = value
   }
 
+  const setColorScheme = (value: ColorSchemeId) => {
+    colorScheme.value = value
+    applyColorScheme(value)
+  }
+
   return {
     language,
     theme,
+    colorScheme,
     setLanguage,
     setTheme,
+    setColorScheme,
   }
 })
diff --git a/packages/ui/DESIGN.md b/packages/ui/DESIGN.md
index 9c5382b12..48cddfd14 100644
--- a/packages/ui/DESIGN.md
+++ b/packages/ui/DESIGN.md
@@ -2,18 +2,20 @@
 
 ## Overview
 
-A modern, clean, and highly functional interface designed for the Memoh AI Agent platform. The design emphasizes a "high-contrast, flat" aesthetic. It moves away from mushy, ubiquitous soft shadows (`shadow-sm`) and brand-colored primary buttons, favoring a starker monochrome foundation with pure whites, light greys, and pure blacks. Brand colors are used extremely sparingly for distinct active states and primary conversion actions (like the chat "Send" button).
+A modern, clean, and highly functional interface designed for the Memoh AI Agent platform. The design emphasizes a "high-contrast, flat" aesthetic. It moves away from mushy, ubiquitous soft shadows (`shadow-sm`) and brand-colored primary buttons, favoring a tempered base palette with soft whites, light greys, and charcoal blacks. Brand colors are used extremely sparingly for distinct active states and primary conversion actions (like the chat "Send" button).
 
 ## Colors
 
-- **Primary** (`#8b56e3`): Brand purple. Its usage is heavily restricted to specific active indicators (sidebar selection, "Send" action, status dots). It is **not** used for generic primary buttons.
+- **Primary / Brand** (`--primary`, `--brand`): Scheme-aware brand accent. It drives explicit brand actions, active indicators, and status dots. Default filled controls should use pale natural surfaces from the base palette instead of brand tint.
 - **Primary Foreground** (`#fafafa`): Used heavily as the background for sidebars (Navigation, Session List, Metadata) to separate them from the main content area.
-- **Background** (`#ffffff`): Pure white, used for the central chat area, cards, alerts, and major input fields.
-- **Foreground** (`#171717` or `#0a0a0a`): Near black. Now acts as the default visual weight for **Primary Buttons** and **Default Badges**.
+- **Background** (`--background`): Soft off-white, used for the central chat area, cards, alerts, and major input fields. Avoid pure white unless an asset or overlay requires it.
+- **Foreground** (`--foreground`): Charcoal black. Now acts as the default visual weight for standard controls and default badges. Avoid pure black for normal UI fills.
 - **Muted Foreground** (`#737373`): Mid-grey, extensively used for timestamps, secondary labels, placeholders, and inactive icons.
 - **Accent** (`#f5f5f5`): Light grey, used for hover states, secondary buttons, code/badge backgrounds, and model selectors.
 - **Border** (`#e5e5e5`): Very light grey, used uniformly for all structural dividers and component borders.
-- **Destructive** (`#dc2626`): Pure red. Used exclusively for text or icons in critical actions (e.g., delete). It does not use colored backgrounds (e.g., no `bg-red-50`).
+- **Destructive** (`--destructive`): Scheme-aware critical action color. Used exclusively for text or icons in critical actions (e.g., delete). It does not use raw colored backgrounds (e.g., no `bg-red-50`).
+- **Semantic Colors**: Status, event, capability, diff, terminal, and chart colors must use global tokens (`--success`, `--warning`, `--success-solid-foreground`, `--warning-solid-foreground`, `--info`, `--event-*`, `--capability-*`, `--diff-*`, `--terminal-*`, `--chart-*`) rather than hardcoded Tailwind color families. If component states need more colors, extend the global palette tokens rather than adding component-specific color namespaces.
+- **Color Schemes**: Palettes are selected with `html[data-color-scheme]` and must provide light and dark values for the full semantic set. The default scheme is `memoh`.
 
 ## Typography
 
@@ -37,16 +39,16 @@ The system employs a **bimodal elevation strategy**:
 ### Base Atoms
 
 - **Avatars**: 26px rounded full. Default fallback uses `accent`. Status badges require a 2px knockout border matching the background.
-- **Badges**: 4px radius (`rounded-sm`). Default is pure black (`bg-foreground text-background`). Secondary is `bg-accent text-foreground`. Destructive is pure red background. Success is `bg-green-500 text-white`. Warning is `bg-amber-500 text-white`. Outline is `bg-background border-border text-foreground`. Supports `size="sm"` (`text-[11px] px-2`) alongside default.
-- **BadgeCount**: Circular numeric counter. `rounded-full`, `h-[18px] min-w-[18px] px-1`, `text-[11px] font-medium`. Variants: default (`bg-foreground text-background`), destructive (`bg-destructive text-destructive-foreground`), secondary (`bg-accent text-foreground`). Values above 99 display as "99+".
+- **Badges**: 4px radius (`rounded-sm`). Default uses `secondary/secondary-foreground` with `border-border`. Secondary uses `accent/foreground`. Destructive, success, and warning map to global status tokens. Outline uses `background/border/foreground`. Supports `size="sm"` (`text-[11px] px-2`) alongside default.
+- **BadgeCount**: Circular numeric counter. `rounded-full`, `h-[18px] min-w-[18px] px-1`, `text-[11px] font-medium`. Uses the same base/status mapping as Badge. Values above 99 display as "99+".
 - **Buttons**:
-  - Primary (Default): 8px radius, **`foreground` (black) background**, white text. Flat.
-  - Secondary / Outline: 8px radius, `accent` background, 1px `border`. Flat.
+  - Default: 8px radius, `secondary` background, `secondary-foreground` text, and `border-border`. Flat.
+  - Secondary / Outline: 8px radius, `accent` / `background` colors, 1px `border` where applicable. Flat.
   - Ghost: Icon buttons use `muted-foreground` defaulting to `foreground` on hover.
   - Grouped (`ButtonGroup`): Unified outer border (`border-border`, 8px radius). Internal items divided by `border-r` or `border-b`, no individual borders or radiuses.
-  - Brand Primary: Use `variant="primary"` explicitly for Send button or active CTA. This is the **only** case where `bg-primary` is used.
+  - Brand Primary: Use `variant="primary"` explicitly for Send button or active CTA. This maps directly to the active palette brand color.
 - **Inputs**: Flat design. 1px `border`, pure `background` fill, 8px/10px outer radius. Text must be `text-[16px]`. Focus state uses a stark black/grey ring, **not** primary purple.
-- **Checkboxes/Radios**: Flat, pure white background (`bg-background`). 1px `border`. The checked state marker (tick/dot) is `foreground` (black), avoiding brand colors.
+- **Checkboxes/Radios**: Flat, soft background (`bg-background`). 1px `border`. The checked state marker (tick/dot) is `foreground` (charcoal), avoiding brand colors.
 - **Separators**: Uniformly use the 1px `border` color. Do not use padding/margins that detach them from the container edges (e.g., use full width `border-b` in menus instead of `<Separator mx-1>`).
 
 ### Containers & Layouts
@@ -97,17 +99,17 @@ The system employs a **bimodal elevation strategy**:
 
 To ensure visual consistency when generating images or extrapolating designs via AI based on this system, strictly adhere to the following composition rules:
 
-1. **The "Flat Atom" Law:** If it's a basic interactive element (button, badge, input, toggle, checkbox), it **cannot** have a shadow. It must rely on `#e5e5e5` borders and background contrast (`#ffffff` vs `#f5f5f5` vs `#0a0a0a`).
+1. **The "Flat Atom" Law:** If it's a basic interactive element (button, badge, input, toggle, checkbox), it **cannot** have a shadow. It must rely on tokenized borders and background contrast (`--background` vs `--accent` vs `--foreground`).
 2. **The "Menu Underline" Law:** Whenever rendering a list of items inside a container (Dropdowns, Comboboxes, Sidebar Sub-menus, Collapsibles), items must be divided by a full-width, 1px horizontal line (`border-b`), terminating cleanly on the last item. Do not leave floating separators with margins.
-3. **The "Monochrome Hover" Law:** Focus and hover states for secondary items must always snap to `bg-[#f5f5f5]` and `text-[#0a0a0a]`. Never apply the brand purple (`#8b56e3`) as a background highlight for menus.
+3. **The "Monochrome Hover" Law:** Focus and hover states for secondary items must use `bg-accent` and `text-foreground`. Never apply the brand purple (`#8b56e3`) as a background highlight for menus.
 4. **The "Bimodal Elevation" Trigger:** Only use heavy, soft shadows (like `shadow-lg`) when rendering a standalone focal piece (like a login modal or a central dashboard card) that sits distinctly above a complex, flat background layer.
-5. **The "Purple Scarcity" Law:** The brand purple (`#8b56e3`) is the most expensive pixel on the screen. It can only be used for:
+5. **The "Brand Scarcity" Law:** The scheme brand color (`--brand` / `--primary`) is the most expensive pixel on the screen. It can only be used for:
    - The absolute primary completion action on a screen (e.g., the Chat "Send" button).
    - Micro-indicators of "current active state" (e.g., a 2px vertical bar next to an active sidebar menu item, or a 5px status dot).
 
 ## Do's and Don'ts
 
-- **Do** use `bg-foreground` (black) for standard primary actions like "Login" or "Register" instead of the brand purple.
+- **Do** use `bg-secondary` with `border-border` for standard filled controls; reserve `bg-primary` / `bg-brand` for explicit brand actions and high-emphasis CTAs.
 - **Don't** use `shadow-sm` on buttons, inputs, or alerts. Keep atomic components strictly flat.
 - **Do** use `shadow-lg` for large focal cards to make them pop against the flat UI.
 - **Don't** use colored backgrounds for Alert or Badge variants (like `bg-red-50`). Keep them white and use text/icon color to convey meaning (or solid red for destructive badges).
diff --git a/packages/ui/src/components/badge/BadgeCount.vue b/packages/ui/src/components/badge/BadgeCount.vue
index 4e4cc9ea7..8412b1162 100644
--- a/packages/ui/src/components/badge/BadgeCount.vue
+++ b/packages/ui/src/components/badge/BadgeCount.vue
@@ -10,7 +10,7 @@ const badgeCountVariants = cva(
   {
     variants: {
       variant: {
-        default: 'bg-foreground text-background',
+        default: 'border border-border bg-secondary text-secondary-foreground',
         destructive: 'bg-destructive text-destructive-foreground',
         secondary: 'bg-accent text-foreground',
       },
diff --git a/packages/ui/src/components/badge/index.ts b/packages/ui/src/components/badge/index.ts
index b0392262e..84e68d4ec 100644
--- a/packages/ui/src/components/badge/index.ts
+++ b/packages/ui/src/components/badge/index.ts
@@ -10,15 +10,15 @@ export const badgeVariants = cva(
     variants: {
       variant: {
         default:
-          'border-transparent bg-foreground text-background [a&]:hover:bg-foreground/90',
+          'border-border bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/80',
         secondary:
           'border-transparent bg-accent text-foreground [a&]:hover:bg-accent/80',
         destructive:
           'border-transparent bg-destructive text-destructive-foreground [a&]:hover:bg-destructive/90',
         success:
-          'border-transparent bg-green-500 text-white [a&]:hover:bg-green-500/90',
+          'border-transparent bg-success text-success-solid-foreground [a&]:hover:bg-success/90',
         warning:
-          'border-transparent bg-amber-500 text-white [a&]:hover:bg-amber-500/90',
+          'border-transparent bg-warning text-warning-solid-foreground [a&]:hover:bg-warning/90',
         outline:
           'text-foreground border-border bg-background [a&]:hover:bg-accent',
       },
diff --git a/packages/ui/src/components/button/index.ts b/packages/ui/src/components/button/index.ts
index e36be55f3..5badbb8ef 100644
--- a/packages/ui/src/components/button/index.ts
+++ b/packages/ui/src/components/button/index.ts
@@ -9,16 +9,16 @@ export const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          'bg-foreground text-background hover:bg-foreground/90',
+          'border border-border bg-secondary text-secondary-foreground hover:bg-secondary/80',
         destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
         outline:
-          'border border-border bg-background hover:bg-accent',
+          'border border-border bg-background text-foreground hover:bg-accent',
         secondary:
           'bg-accent text-foreground border border-border hover:bg-accent/80',
         ghost:
-          'hover:bg-accent hover:text-accent-foreground bg-transparent text-foreground',
+          'bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
-        primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        primary: 'bg-brand text-brand-foreground hover:bg-brand-hover',
       },
       size: {
         default: 'h-9 px-4 py-2 has-[>svg]:px-3',
diff --git a/packages/ui/src/components/input-group/InputGroup.vue b/packages/ui/src/components/input-group/InputGroup.vue
index 02f7de2e5..eb6b3e2cd 100644
--- a/packages/ui/src/components/input-group/InputGroup.vue
+++ b/packages/ui/src/components/input-group/InputGroup.vue
@@ -22,7 +22,7 @@ const props = defineProps<{
       'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',
 
       // Focus state.
-      'has-[[data-slot=input-group-control]:focus-visible]:border-primary has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-primary/20',
+      'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/20',
 
       // Error state.
       'has-[[data-slot][aria-invalid=true]]:ring-2 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive',
diff --git a/packages/ui/src/style.css b/packages/ui/src/style.css
index 75c005228..a840904a1 100644
--- a/packages/ui/src/style.css
+++ b/packages/ui/src/style.css
@@ -23,22 +23,22 @@
 
 :root {
   --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.141 0.005 286.375);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.141 0.005 286.375);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.141 0.005 286.375);
+  --background: oklch(0.985 0.001 286);
+  --foreground: oklch(0.22 0.006 286);
+  --card: oklch(0.995 0.001 286);
+  --card-foreground: oklch(0.22 0.006 286);
+  --popover: oklch(0.995 0.001 286);
+  --popover-foreground: oklch(0.22 0.006 286);
   --primary: oklch(0.37 0.015 285);
-  --primary-foreground: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.985 0.001 286);
   --secondary: oklch(0.967 0.001 286.375);
-  --secondary-foreground: oklch(0.141 0.005 286.375);
+  --secondary-foreground: oklch(0.22 0.006 286);
   --muted: oklch(0.967 0.001 286.375);
   --muted-foreground: #737373;
   --accent: oklch(97.1% 0 0deg);
-  --accent-foreground: oklch(0.141 0.005 286.375);
+  --accent-foreground: oklch(0.22 0.006 286);
   --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(1 0 0);
+  --destructive-foreground: oklch(0.985 0.001 286);
   --border: oklch(0.92 0.004 286.32);
   --input: oklch(0.92 0.004 286.32);
   --ring: oklch(57.5% 0 0deg / 1);
@@ -47,53 +47,363 @@
   --chart-3: oklch(0.398 0.07 227.392);
   --chart-4: oklch(0.828 0.189 84.429);
   --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.141 0.005 286.375);
+  --sidebar: oklch(0.975 0.001 286);
+  --sidebar-foreground: oklch(0.22 0.006 286);
   --sidebar-primary: oklch(0.55 0.22 290);
-  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0.001 286);
   --sidebar-accent: oklch(0.967 0.001 286.375);
-  --sidebar-accent-foreground: oklch(0.141 0.005 286.375);
+  --sidebar-accent-foreground: oklch(0.22 0.006 286);
   --sidebar-border: oklch(0.92 0.004 286.32);
   --sidebar-ring: oklch(0.55 0.22 290);
   --scrollbar-thumb: oklch(0 0 0 / 0.18);
   --scrollbar-thumb-hover: oklch(0 0 0 / 0.32);
+  --primary: var(--brand);
+  --primary-foreground: var(--brand-foreground);
+  --brand: oklch(0.55 0.22 290);
+  --brand-foreground: oklch(0.985 0.001 286);
+  --brand-soft: oklch(0.96 0.025 290);
+  --brand-border: oklch(0.84 0.08 290);
+  --brand-hover: oklch(0.49 0.23 290);
+  --sidebar-primary: var(--brand);
+  --sidebar-ring: var(--brand);
+  --success: oklch(0.62 0.16 150);
+  --success-foreground: oklch(0.33 0.12 150);
+  --success-solid-foreground: oklch(0.985 0.001 286);
+  --success-soft: oklch(0.96 0.035 150);
+  --success-border: oklch(0.84 0.08 150);
+  --warning: oklch(0.72 0.15 75);
+  --warning-foreground: oklch(0.43 0.11 70);
+  --warning-solid-foreground: oklch(0.18 0.02 75);
+  --warning-soft: oklch(0.97 0.045 80);
+  --warning-border: oklch(0.86 0.10 80);
+  --info: oklch(0.62 0.15 235);
+  --info-foreground: oklch(0.36 0.12 235);
+  --info-soft: oklch(0.96 0.035 235);
+  --info-border: oklch(0.84 0.08 235);
+  --event-schedule: var(--warning);
+  --event-schedule-foreground: var(--warning-foreground);
+  --event-schedule-soft: var(--warning-soft);
+  --event-schedule-border: var(--warning-border);
+  --event-heartbeat: oklch(0.60 0.19 355);
+  --event-heartbeat-foreground: oklch(0.40 0.15 355);
+  --event-heartbeat-soft: oklch(0.96 0.035 355);
+  --event-heartbeat-border: oklch(0.84 0.09 355);
+  --event-subagent: var(--brand);
+  --event-subagent-foreground: oklch(0.38 0.16 290);
+  --event-subagent-soft: var(--brand-soft);
+  --event-subagent-border: var(--brand-border);
+  --event-discuss: var(--info);
+  --event-discuss-foreground: var(--info-foreground);
+  --event-discuss-soft: var(--info-soft);
+  --event-discuss-border: var(--info-border);
+  --capability-tool: var(--info);
+  --capability-tool-foreground: var(--info-foreground);
+  --capability-tool-soft: var(--info-soft);
+  --capability-vision: var(--brand);
+  --capability-vision-foreground: var(--event-subagent-foreground);
+  --capability-vision-soft: var(--brand-soft);
+  --capability-image: oklch(0.60 0.18 340);
+  --capability-image-foreground: oklch(0.40 0.15 340);
+  --capability-image-soft: oklch(0.96 0.035 340);
+  --capability-reasoning: var(--warning);
+  --capability-reasoning-foreground: var(--warning-foreground);
+  --capability-reasoning-soft: var(--warning-soft);
+  --context-window-xs: oklch(0.93 0 0);
+  --context-window-sm: var(--warning-soft);
+  --context-window-md: var(--info-soft);
+  --context-window-lg: var(--success-soft);
+  --context-window-xl: var(--brand-soft);
+  --context-window-foreground: var(--foreground);
+  --diff-add: oklch(0.55 0.12 145 / 0.12);
+  --diff-add-border: oklch(0.55 0.12 145 / 0.5);
+  --diff-remove: oklch(0.55 0.12 25 / 0.12);
+  --diff-remove-border: oklch(0.55 0.12 25 / 0.5);
+  --terminal-background: #1a1b26;
+  --terminal-foreground: #a9b1d6;
+  --terminal-cursor: #c0caf5;
+  --terminal-selection: #33467c;
+  --chart-1: var(--brand);
+  --chart-2: var(--success);
+  --chart-3: var(--info);
+  --chart-4: var(--warning);
+  --chart-5: var(--destructive);
 }
 
 .dark {
-  --background: oklch(0.141 0.005 286.375);
-   --foreground: oklch(0.88 0.005 285);
+  --background: oklch(0.165 0.006 286);
+  --foreground: oklch(0.86 0.005 285);
   --card: oklch(0.21 0.006 285.885);
-  --card-foreground: oklch(0.985 0 0);
+  --card-foreground: oklch(0.90 0.003 285);
   --popover: oklch(0.21 0.006 285.885);
-  --popover-foreground: oklch(0.985 0 0);
+  --popover-foreground: oklch(0.90 0.003 285);
   --primary: oklch(0.84 0.006 285);
-  --primary-foreground: oklch(1 0 0);
+  --primary-foreground: oklch(0.985 0.001 286);
   --secondary: oklch(0.274 0.006 286.033);
-  --secondary-foreground: oklch(0.985 0 0);
+  --secondary-foreground: oklch(0.86 0.005 285);
   --muted: oklch(0.274 0.006 286.033);
   --muted-foreground: oklch(0.552 0.016 285.938);
   --accent: oklch(0.274 0.006 286.033);
-  --accent-foreground: oklch(0.985 0 0);
+  --accent-foreground: oklch(0.86 0.005 285);
   --destructive: oklch(0.704 0.191 22.216);
-  --destructive-foreground: oklch(1 0 0);
+  --destructive-foreground: oklch(0.985 0.001 286);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 14%);
-  --ring: oklch(0.985 0 0);
+  --ring: oklch(0.86 0.005 285);
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
   --chart-3: oklch(0.769 0.188 70.08);
   --chart-4: oklch(0.627 0.265 303.9);
   --chart-5: oklch(0.645 0.246 16.439);
   --sidebar: oklch(0.18 0.005 286);
-  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.90 0.003 285);
   --sidebar-primary: oklch(0.62 0.22 290);
-  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0.001 286);
   --sidebar-accent: oklch(0.274 0.006 286.033);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-accent-foreground: oklch(0.86 0.005 285);
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.62 0.22 290);
   --scrollbar-thumb: oklch(1 0 0 / 0.14);
   --scrollbar-thumb-hover: oklch(1 0 0 / 0.26);
+  --primary: var(--brand);
+  --primary-foreground: var(--brand-foreground);
+  --brand: oklch(0.72 0.16 290);
+  --brand-foreground: oklch(0.985 0.001 286);
+  --brand-soft: oklch(0.30 0.07 290 / 0.45);
+  --brand-border: oklch(0.72 0.16 290 / 0.35);
+  --brand-hover: oklch(0.78 0.15 290);
+  --sidebar-primary: var(--brand);
+  --sidebar-ring: var(--brand);
+  --success: oklch(0.70 0.15 150);
+  --success-foreground: oklch(0.82 0.13 150);
+  --success-solid-foreground: var(--background);
+  --success-soft: oklch(0.30 0.07 150 / 0.35);
+  --success-border: oklch(0.70 0.15 150 / 0.32);
+  --warning: oklch(0.78 0.14 75);
+  --warning-foreground: oklch(0.84 0.13 75);
+  --warning-solid-foreground: var(--background);
+  --warning-soft: oklch(0.33 0.08 75 / 0.35);
+  --warning-border: oklch(0.78 0.14 75 / 0.32);
+  --info: oklch(0.72 0.13 235);
+  --info-foreground: oklch(0.80 0.12 235);
+  --info-soft: oklch(0.30 0.07 235 / 0.35);
+  --info-border: oklch(0.72 0.13 235 / 0.32);
+  --event-heartbeat: oklch(0.72 0.15 355);
+  --event-heartbeat-foreground: oklch(0.82 0.13 355);
+  --event-heartbeat-soft: oklch(0.30 0.07 355 / 0.35);
+  --event-heartbeat-border: oklch(0.72 0.15 355 / 0.32);
+  --event-subagent-foreground: oklch(0.82 0.13 290);
+  --capability-tool: var(--info);
+  --capability-tool-foreground: var(--info-foreground);
+  --capability-tool-soft: var(--info-soft);
+  --capability-vision: var(--brand);
+  --capability-vision-foreground: var(--brand);
+  --capability-vision-soft: var(--brand-soft);
+  --capability-image: oklch(0.76 0.13 340);
+  --capability-image-foreground: oklch(0.84 0.12 340);
+  --capability-image-soft: oklch(0.30 0.07 340 / 0.35);
+  --capability-reasoning: var(--warning);
+  --capability-reasoning-foreground: var(--warning-foreground);
+  --capability-reasoning-soft: var(--warning-soft);
+  --context-window-xs: oklch(0.28 0.006 286);
+  --context-window-sm: var(--warning-soft);
+  --context-window-md: var(--info-soft);
+  --context-window-lg: var(--success-soft);
+  --context-window-xl: var(--brand-soft);
+  --context-window-foreground: var(--foreground);
+  --diff-add: oklch(0.70 0.12 145 / 0.16);
+  --diff-add-border: oklch(0.70 0.12 145 / 0.48);
+  --diff-remove: oklch(0.70 0.12 25 / 0.16);
+  --diff-remove-border: oklch(0.70 0.12 25 / 0.48);
+  --chart-1: var(--brand);
+  --chart-2: var(--success);
+  --chart-3: var(--info);
+  --chart-4: var(--warning);
+  --chart-5: var(--destructive);
+}
+
+:root[data-color-scheme="ocean"] {
+  --brand: oklch(0.56 0.15 230);
+  --brand-soft: oklch(0.96 0.035 230);
+  --brand-border: oklch(0.84 0.08 230);
+  --brand-hover: oklch(0.50 0.16 230);
+  --success: oklch(0.62 0.14 170);
+  --success-foreground: oklch(0.34 0.11 170);
+  --success-soft: oklch(0.96 0.035 170);
+  --success-border: oklch(0.84 0.08 170);
+  --warning: oklch(0.72 0.14 80);
+  --warning-foreground: oklch(0.43 0.10 80);
+  --warning-soft: oklch(0.97 0.045 80);
+  --warning-border: oklch(0.86 0.10 80);
+  --info: oklch(0.60 0.16 250);
+  --info-foreground: oklch(0.36 0.12 250);
+  --info-soft: oklch(0.96 0.035 250);
+  --info-border: oklch(0.84 0.08 250);
+  --destructive: oklch(0.58 0.21 25);
+  --event-heartbeat: oklch(0.60 0.17 345);
+  --event-heartbeat-foreground: oklch(0.40 0.14 345);
+  --event-heartbeat-soft: oklch(0.96 0.035 345);
+  --event-heartbeat-border: oklch(0.84 0.09 345);
+}
+
+.dark[data-color-scheme="ocean"] {
+  --brand: oklch(0.72 0.13 230);
+  --brand-soft: oklch(0.30 0.07 230 / 0.35);
+  --brand-border: oklch(0.72 0.13 230 / 0.32);
+  --brand-hover: oklch(0.78 0.12 230);
+  --success: oklch(0.78 0.12 170);
+  --success-foreground: oklch(0.82 0.13 170);
+  --success-soft: oklch(0.30 0.07 170 / 0.35);
+  --success-border: oklch(0.78 0.12 170 / 0.32);
+  --warning: oklch(0.88 0.12 80);
+  --warning-foreground: oklch(0.82 0.13 80);
+  --warning-soft: oklch(0.30 0.07 80 / 0.35);
+  --warning-border: oklch(0.88 0.12 80 / 0.32);
+  --info: oklch(0.76 0.14 250);
+  --info-foreground: oklch(0.82 0.13 250);
+  --info-soft: oklch(0.30 0.07 250 / 0.35);
+  --info-border: oklch(0.76 0.14 250 / 0.32);
+  --event-heartbeat: oklch(0.76 0.15 345);
+  --event-heartbeat-foreground: oklch(0.82 0.13 345);
+  --event-heartbeat-soft: oklch(0.30 0.07 345 / 0.35);
+  --event-heartbeat-border: oklch(0.76 0.15 345 / 0.32);
+}
+
+:root[data-color-scheme="forest"] {
+  --brand: oklch(0.50 0.14 150);
+  --brand-soft: oklch(0.96 0.035 150);
+  --brand-border: oklch(0.84 0.08 150);
+  --brand-hover: oklch(0.44 0.15 150);
+  --success: oklch(0.58 0.15 145);
+  --success-foreground: oklch(0.34 0.11 145);
+  --success-soft: oklch(0.96 0.035 145);
+  --success-border: oklch(0.84 0.08 145);
+  --warning: oklch(0.72 0.14 80);
+  --warning-foreground: oklch(0.43 0.10 80);
+  --warning-soft: oklch(0.97 0.045 80);
+  --warning-border: oklch(0.86 0.10 80);
+  --info: oklch(0.57 0.13 215);
+  --info-foreground: oklch(0.36 0.10 215);
+  --info-soft: oklch(0.96 0.035 215);
+  --info-border: oklch(0.84 0.08 215);
+  --event-heartbeat: oklch(0.58 0.16 20);
+  --event-heartbeat-foreground: oklch(0.38 0.13 20);
+  --event-heartbeat-soft: oklch(0.96 0.035 20);
+  --event-heartbeat-border: oklch(0.84 0.09 20);
+}
+
+.dark[data-color-scheme="forest"] {
+  --brand: oklch(0.66 0.12 150);
+  --brand-soft: oklch(0.30 0.07 150 / 0.35);
+  --brand-border: oklch(0.66 0.12 150 / 0.32);
+  --brand-hover: oklch(0.72 0.11 150);
+  --success: oklch(0.74 0.13 145);
+  --success-foreground: oklch(0.82 0.13 145);
+  --success-soft: oklch(0.30 0.07 145 / 0.35);
+  --success-border: oklch(0.74 0.13 145 / 0.32);
+  --warning: oklch(0.88 0.12 80);
+  --warning-foreground: oklch(0.82 0.13 80);
+  --warning-soft: oklch(0.30 0.07 80 / 0.35);
+  --warning-border: oklch(0.88 0.12 80 / 0.32);
+  --info: oklch(0.73 0.11 215);
+  --info-foreground: oklch(0.82 0.13 215);
+  --info-soft: oklch(0.30 0.07 215 / 0.35);
+  --info-border: oklch(0.73 0.11 215 / 0.32);
+  --event-heartbeat: oklch(0.74 0.14 20);
+  --event-heartbeat-foreground: oklch(0.82 0.13 20);
+  --event-heartbeat-soft: oklch(0.30 0.07 20 / 0.35);
+  --event-heartbeat-border: oklch(0.74 0.14 20 / 0.32);
+}
+
+:root[data-color-scheme="rose"] {
+  --brand: oklch(0.58 0.18 355);
+  --brand-soft: oklch(0.96 0.035 355);
+  --brand-border: oklch(0.84 0.09 355);
+  --brand-hover: oklch(0.51 0.19 355);
+  --success: oklch(0.62 0.14 155);
+  --success-foreground: oklch(0.34 0.11 155);
+  --success-soft: oklch(0.96 0.035 155);
+  --success-border: oklch(0.84 0.08 155);
+  --warning: oklch(0.72 0.14 75);
+  --warning-foreground: oklch(0.43 0.10 75);
+  --warning-soft: oklch(0.97 0.045 75);
+  --warning-border: oklch(0.86 0.10 75);
+  --info: oklch(0.58 0.14 250);
+  --info-foreground: oklch(0.36 0.11 250);
+  --info-soft: oklch(0.96 0.035 250);
+  --info-border: oklch(0.84 0.08 250);
+  --event-heartbeat: oklch(0.60 0.19 355);
+  --event-heartbeat-foreground: oklch(0.40 0.15 355);
+  --event-heartbeat-soft: oklch(0.96 0.035 355);
+  --event-heartbeat-border: oklch(0.84 0.09 355);
+}
+
+.dark[data-color-scheme="rose"] {
+  --brand: oklch(0.74 0.16 355);
+  --brand-soft: oklch(0.30 0.07 355 / 0.35);
+  --brand-border: oklch(0.74 0.16 355 / 0.32);
+  --brand-hover: oklch(0.80 0.15 355);
+  --success: oklch(0.78 0.12 155);
+  --success-foreground: oklch(0.82 0.13 155);
+  --success-soft: oklch(0.30 0.07 155 / 0.35);
+  --success-border: oklch(0.78 0.12 155 / 0.32);
+  --warning: oklch(0.88 0.12 75);
+  --warning-foreground: oklch(0.82 0.13 75);
+  --warning-soft: oklch(0.30 0.07 75 / 0.35);
+  --warning-border: oklch(0.88 0.12 75 / 0.32);
+  --info: oklch(0.74 0.12 250);
+  --info-foreground: oklch(0.82 0.13 250);
+  --info-soft: oklch(0.30 0.07 250 / 0.35);
+  --info-border: oklch(0.74 0.12 250 / 0.32);
+  --event-heartbeat: oklch(0.76 0.17 355);
+  --event-heartbeat-foreground: oklch(0.82 0.13 355);
+  --event-heartbeat-soft: oklch(0.30 0.07 355 / 0.35);
+  --event-heartbeat-border: oklch(0.76 0.17 355 / 0.32);
+}
+
+:root[data-color-scheme="amber"] {
+  --brand: oklch(0.62 0.15 70);
+  --brand-soft: oklch(0.97 0.045 75);
+  --brand-border: oklch(0.86 0.10 75);
+  --brand-hover: oklch(0.55 0.16 70);
+  --success: oklch(0.58 0.14 145);
+  --success-foreground: oklch(0.34 0.11 145);
+  --success-soft: oklch(0.96 0.035 145);
+  --success-border: oklch(0.84 0.08 145);
+  --warning: oklch(0.70 0.15 75);
+  --warning-foreground: oklch(0.43 0.11 75);
+  --warning-soft: oklch(0.97 0.045 75);
+  --warning-border: oklch(0.86 0.10 75);
+  --info: oklch(0.56 0.14 230);
+  --info-foreground: oklch(0.36 0.11 230);
+  --info-soft: oklch(0.96 0.035 230);
+  --info-border: oklch(0.84 0.08 230);
+  --event-heartbeat: oklch(0.60 0.17 350);
+  --event-heartbeat-foreground: oklch(0.40 0.14 350);
+  --event-heartbeat-soft: oklch(0.96 0.035 350);
+  --event-heartbeat-border: oklch(0.84 0.09 350);
+}
+
+.dark[data-color-scheme="amber"] {
+  --brand: oklch(0.78 0.13 70);
+  --brand-soft: oklch(0.30 0.07 70 / 0.35);
+  --brand-border: oklch(0.78 0.13 70 / 0.32);
+  --brand-hover: oklch(0.84 0.12 70);
+  --success: oklch(0.74 0.12 145);
+  --success-foreground: oklch(0.82 0.13 145);
+  --success-soft: oklch(0.30 0.07 145 / 0.35);
+  --success-border: oklch(0.74 0.12 145 / 0.32);
+  --warning: oklch(0.86 0.13 75);
+  --warning-foreground: oklch(0.82 0.13 75);
+  --warning-soft: oklch(0.30 0.07 75 / 0.35);
+  --warning-border: oklch(0.86 0.13 75 / 0.32);
+  --info: oklch(0.72 0.12 230);
+  --info-foreground: oklch(0.82 0.13 230);
+  --info-soft: oklch(0.30 0.07 230 / 0.35);
+  --info-border: oklch(0.72 0.12 230 / 0.32);
+  --event-heartbeat: oklch(0.76 0.15 350);
+  --event-heartbeat-foreground: oklch(0.82 0.13 350);
+  --event-heartbeat-soft: oklch(0.30 0.07 350 / 0.35);
+  --event-heartbeat-border: oklch(0.76 0.15 350 / 0.32);
 }
 
 @theme inline {
@@ -133,6 +443,63 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+  --color-brand: var(--brand);
+  --color-brand-foreground: var(--brand-foreground);
+  --color-brand-soft: var(--brand-soft);
+  --color-brand-border: var(--brand-border);
+  --color-brand-hover: var(--brand-hover);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-success-solid-foreground: var(--success-solid-foreground);
+  --color-success-soft: var(--success-soft);
+  --color-success-border: var(--success-border);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-warning-solid-foreground: var(--warning-solid-foreground);
+  --color-warning-soft: var(--warning-soft);
+  --color-warning-border: var(--warning-border);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-info-soft: var(--info-soft);
+  --color-info-border: var(--info-border);
+  --color-event-schedule: var(--event-schedule);
+  --color-event-schedule-foreground: var(--event-schedule-foreground);
+  --color-event-schedule-soft: var(--event-schedule-soft);
+  --color-event-schedule-border: var(--event-schedule-border);
+  --color-event-heartbeat: var(--event-heartbeat);
+  --color-event-heartbeat-foreground: var(--event-heartbeat-foreground);
+  --color-event-heartbeat-soft: var(--event-heartbeat-soft);
+  --color-event-heartbeat-border: var(--event-heartbeat-border);
+  --color-event-subagent: var(--event-subagent);
+  --color-event-subagent-foreground: var(--event-subagent-foreground);
+  --color-event-subagent-soft: var(--event-subagent-soft);
+  --color-event-subagent-border: var(--event-subagent-border);
+  --color-event-discuss: var(--event-discuss);
+  --color-event-discuss-foreground: var(--event-discuss-foreground);
+  --color-event-discuss-soft: var(--event-discuss-soft);
+  --color-event-discuss-border: var(--event-discuss-border);
+  --color-capability-tool: var(--capability-tool);
+  --color-capability-tool-foreground: var(--capability-tool-foreground);
+  --color-capability-tool-soft: var(--capability-tool-soft);
+  --color-capability-vision: var(--capability-vision);
+  --color-capability-vision-foreground: var(--capability-vision-foreground);
+  --color-capability-vision-soft: var(--capability-vision-soft);
+  --color-capability-image: var(--capability-image);
+  --color-capability-image-foreground: var(--capability-image-foreground);
+  --color-capability-image-soft: var(--capability-image-soft);
+  --color-capability-reasoning: var(--capability-reasoning);
+  --color-capability-reasoning-foreground: var(--capability-reasoning-foreground);
+  --color-capability-reasoning-soft: var(--capability-reasoning-soft);
+  --color-context-window-xs: var(--context-window-xs);
+  --color-context-window-sm: var(--context-window-sm);
+  --color-context-window-md: var(--context-window-md);
+  --color-context-window-lg: var(--context-window-lg);
+  --color-context-window-xl: var(--context-window-xl);
+  --color-context-window-foreground: var(--context-window-foreground);
+  --color-diff-add: var(--diff-add);
+  --color-diff-add-border: var(--diff-add-border);
+  --color-diff-remove: var(--diff-remove);
+  --color-diff-remove-border: var(--diff-remove-border);
 }
 
 @layer base {
@@ -169,7 +536,3 @@
     background-color: var(--scrollbar-thumb-hover);
   }
 }
-
-
-
-