diff --git a/src/main/desktop-shell-window.ts b/src/main/desktop-shell-window.ts
index 4dde0bb6..01e17c89 100644
--- a/src/main/desktop-shell-window.ts
+++ b/src/main/desktop-shell-window.ts
@@ -7,6 +7,7 @@ import {
   BrowserWindow,
   dialog,
   nativeImage,
+  nativeTheme,
   net,
   protocol,
   session,
@@ -266,7 +267,7 @@ export function createDesktopShellWindow(deps: DesktopShellWindowDependencies) {
       y: savedWindowState.bounds.y,
       minWidth: 1180,
       minHeight: 760,
-      backgroundColor: "#ffffff",
+      backgroundColor: nativeTheme.shouldUseDarkColors ? "#141413" : "#F5F4ED",
       frame: process.platform === "darwin",
       titleBarStyle: process.platform === "darwin" ? "hiddenInset" : "default",
       ...(isWindows || isLinux ? { titleBarOverlay: false } : {}),
diff --git a/src/renderer/components/communication/MessageItem.tsx b/src/renderer/components/communication/MessageItem.tsx
index c7bbc521..7a39a7f0 100644
--- a/src/renderer/components/communication/MessageItem.tsx
+++ b/src/renderer/components/communication/MessageItem.tsx
@@ -45,7 +45,7 @@ export const AgentAvatar = memo(function AgentAvatar({
   return (
     <div
       className={`flex shrink-0 items-center justify-center rounded-full font-bold ${sizeClass}`}
-      style={{ backgroundColor: `${color}18`, color }}
+      style={{ backgroundColor: `color-mix(in oklab, ${color}, transparent 91%)`, color }}
     >
       {initials}
     </div>
diff --git a/src/renderer/components/communication/SearchResults.tsx b/src/renderer/components/communication/SearchResults.tsx
index 06babb30..46606b7b 100644
--- a/src/renderer/components/communication/SearchResults.tsx
+++ b/src/renderer/components/communication/SearchResults.tsx
@@ -158,7 +158,7 @@ export function SearchResults({ results, query, loading, agents, onNavigateToRes
                       </span>
                       <span
                         className="inline-flex shrink-0 items-center gap-1 rounded-full px-1.5 py-0.5 text-[11px] font-medium"
-                        style={{ backgroundColor: `${config.color}18`, color: config.color }}
+                        style={{ backgroundColor: `color-mix(in oklab, ${config.color}, transparent 91%)`, color: config.color }}
                       >
                         <ChannelIcon size={10} weight="bold" />
                         {t(config.labelKey)}
diff --git a/src/renderer/components/execution/ModelManagementShared.tsx b/src/renderer/components/execution/ModelManagementShared.tsx
index 2a28a37f..7d6d49a4 100644
--- a/src/renderer/components/execution/ModelManagementShared.tsx
+++ b/src/renderer/components/execution/ModelManagementShared.tsx
@@ -77,7 +77,7 @@ export function ToggleSwitch({ checked, onChange, label }: { checked: boolean; o
       aria-label={label}
     >
       <span
-        className={`inline-block h-3.5 w-3.5 rounded-full bg-white shadow-sm transition-transform ${checked ? "translate-x-[18px]" : "translate-x-[3px]"}`}
+        className={`inline-block h-3.5 w-3.5 rounded-full bg-background shadow-sm transition-transform ${checked ? "translate-x-[18px]" : "translate-x-[3px]"}`}
       />
     </button>
   );
diff --git a/src/renderer/components/skills/SkillAgentToggles.tsx b/src/renderer/components/skills/SkillAgentToggles.tsx
index 7f03e061..ef703d19 100644
--- a/src/renderer/components/skills/SkillAgentToggles.tsx
+++ b/src/renderer/components/skills/SkillAgentToggles.tsx
@@ -90,7 +90,7 @@ export function SkillAgentToggles(props: SkillAgentTogglesProps) {
               }`}
             >
               <span
-                className={`block h-[14px] w-[14px] rounded-full bg-white shadow-sm transition-transform ${
+                className={`block h-[14px] w-[14px] rounded-full bg-background shadow-sm transition-transform ${
                   isAssigned ? "translate-x-[14px]" : "translate-x-0"
                 }`}
               />
diff --git a/src/renderer/components/ui/ActionButton.tsx b/src/renderer/components/ui/ActionButton.tsx
index 9075666d..1f40d83a 100644
--- a/src/renderer/components/ui/ActionButton.tsx
+++ b/src/renderer/components/ui/ActionButton.tsx
@@ -25,9 +25,9 @@ export function ActionButton({
   const isDisabled = loading || disabled;
   const toneClass =
     tone === "accent"
-      ? "border-transparent bg-primary text-primary-foreground shadow-[0_1px_3px_rgba(74,93,122,0.35)] hover:bg-primary/90"
+      ? "border-transparent bg-primary text-primary-foreground shadow-[0_0_0_1px_color-mix(in_oklab,var(--primary)_40%,transparent)] hover:bg-primary/90"
       : tone === "danger"
-        ? "border-transparent bg-destructive text-primary-foreground shadow-[0_1px_3px_rgba(220,53,69,0.3)] hover:brightness-90"
+        ? "border-transparent bg-destructive text-primary-foreground shadow-[0_0_0_1px_color-mix(in_oklab,var(--destructive)_40%,transparent)] hover:brightness-90"
         : "border-border bg-card text-foreground hover:bg-muted";
 
   const sizing = iconOnly
diff --git a/src/renderer/views/CommandPaletteView.tsx b/src/renderer/views/CommandPaletteView.tsx
index fcd893b8..a2cd00b0 100644
--- a/src/renderer/views/CommandPaletteView.tsx
+++ b/src/renderer/views/CommandPaletteView.tsx
@@ -140,7 +140,7 @@ export function CommandPaletteView({
             animate={{ opacity: 1, y: 0, scale: 1 }}
             exit={{ opacity: 0, y: 10, scale: 0.98 }}
             transition={panelTransition}
-            className="w-full max-w-[560px] rounded-lg border border-border bg-card px-5 py-4 shadow-[0_18px_40px_rgba(15,23,42,0.08)]"
+            className="w-full max-w-[560px] rounded-lg border border-border bg-card px-5 py-4 shadow-[0_4px_24px_color-mix(in_oklab,var(--foreground)_5%,transparent)]"
             onClick={(event) => event.stopPropagation()}
           >
             <div className="mb-3 flex items-center gap-3">
diff --git a/src/shared/constants.ts b/src/shared/constants.ts
index eec7de9d..8f8fd691 100644
--- a/src/shared/constants.ts
+++ b/src/shared/constants.ts
@@ -21,16 +21,16 @@ export const DEPARTMENT_OPTIONS: Array<{ value: DepartmentId | ""; label: string
 ];
 
 export const DEPARTMENT_COLORS: Record<DepartmentId, string> = {
-  executive: "#8b5cf6",
-  engineering: "#3b82f6",
-  product: "#f59e0b",
-  marketing: "#ec4899",
-  sales: "#10b981",
-  hr: "#6366f1",
-  finance: "#14b8a6",
-  legal: "#a78bfa",
-  operations: "#f97316",
-  customer_support: "#06b6d4",
-  research: "#0ea5e9",
-  design: "#f43f5e",
+  executive: "var(--primary)",
+  engineering: "var(--kami-ink)",
+  product: "var(--kami-dark-warm)",
+  marketing: "var(--kami-olive)",
+  sales: "var(--kami-olive)",
+  hr: "var(--kami-charcoal)",
+  finance: "var(--kami-charcoal)",
+  legal: "var(--kami-stone)",
+  operations: "var(--kami-dark-warm)",
+  customer_support: "var(--kami-stone)",
+  research: "var(--kami-ink)",
+  design: "var(--primary)",
 };