From 85d3bc25d615466c8dc21c23698659e3778253fa Mon Sep 17 00:00:00 2001
From: Comfy Org PR Bot <snomiao+comfy-pr@gmail.com>
Date: Thu, 13 Nov 2025 09:56:21 +0900
Subject: [PATCH] [backport core/1.30] Style: Token renaming and style
 organization (#6667)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Backport of #6337 to `core/1.30`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6667-backport-core-1-30-Style-Token-renaming-and-style-organization-2aa6d73d3650811ca3acfdb00dd52fed)
by [Unito](https://www.unito.io)

Co-authored-by: Alexander Brown <drjkl@comfy.org>
---
 packages/design-system/src/css/style.css      | 172 +++++++++--------
 packages/tailwind-utils/README.md             |   2 +-
 src/components/common/FormImageUpload.vue     |   4 +-
 .../dialog/content/setting/UsageLogsTable.vue |   2 +-
 .../dialog/content/setting/UserPanel.vue      |   2 +-
 .../graph/modals/ZoomControlsModal.vue        |   2 +-
 .../graph/selectionToolbox/MenuOptionItem.vue |   2 +-
 .../graph/selectionToolbox/SubmenuPopover.vue |   6 +-
 .../selectionToolbox/VerticalDivider.vue      |   4 +-
 .../graph/widgets/ChatHistoryWidget.vue       |   4 +-
 .../graph/widgets/chatHistory/CopyButton.vue  |   2 +-
 .../MultiSelect.accessibility.stories.ts      |  42 ++---
 src/components/input/MultiSelect.vue          |   2 +-
 .../SingleSelect.accessibility.stories.ts     |  58 +++---
 src/components/input/SingleSelect.vue         |   4 +-
 src/components/load3d/Load3DControls.vue      |   6 +-
 .../load3d/controls/RecordingControls.vue     |   2 +-
 .../load3d/controls/ViewerControls.vue        |   2 +-
 src/components/topbar/TopbarBadge.test.ts     |   4 +-
 src/components/topbar/TopbarBadge.vue         |   6 +-
 .../widget/layout/BaseModalLayout.vue         |   4 +-
 src/components/widget/nav/NavItem.vue         |   4 +-
 src/core/graph/subgraph/SubgraphNode.vue      |   4 +-
 .../assets/components/AssetBadgeGroup.vue     |   8 +-
 .../components/AssetBrowserModal.stories.ts   |   6 +-
 .../assets/components/AssetCard.stories.ts    |  12 +-
 src/platform/assets/components/AssetCard.vue  |  18 +-
 .../components/AssetFilterBar.stories.ts      |  10 +-
 src/platform/assets/components/AssetGrid.vue  |   4 +-
 .../assets/components/MediaImageTop.vue       |   2 +-
 .../useAssetBrowserDialog.stories.ts          |  10 +-
 .../extensions/vueNodes/VideoPreview.vue      |  14 +-
 .../vueNodes/components/ImagePreview.vue      |  10 +-
 .../vueNodes/components/LivePreview.vue       |   6 +-
 .../widgets/components/WidgetChart.vue        |   2 +-
 .../widgets/components/WidgetRecordAudio.vue  |   6 +-
 .../components/audio/AudioPreviewPlayer.vue   |  16 +-
 src/scripts/ui/menu/menu.css                  | 177 ------------------
 38 files changed, 235 insertions(+), 406 deletions(-)

diff --git a/packages/design-system/src/css/style.css b/packages/design-system/src/css/style.css
index 4b559c4b3..21553a439 100644
--- a/packages/design-system/src/css/style.css
+++ b/packages/design-system/src/css/style.css
@@ -9,29 +9,18 @@
 
 @config '../../tailwind.config.ts';
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --fg-color: #fff;
-    --bg-color: #202020;
-    --content-bg: #4e4e4e;
-    --content-fg: #fff;
-    --content-hover-bg: #222;
-    --content-hover-fg: #fff;
-  }
-}
-
 @theme {
   --text-xxs: 0.625rem;
   --text-xxs--line-height: calc(1 / 0.625);
 
-  /* Spacing */
-  --spacing-xs: 8px;
+  --text-xxxs: 0.5625rem;
+  --text-xxxs--line-height: calc(1 / 0.5625);
 
   /* Font Families */
   --font-inter: 'Inter', sans-serif;
 
   /* Palette Colors */
-  --color-charcoal-100: #171718;
+  --color-charcoal-100: #55565e;
   --color-charcoal-200: #494a50;
   --color-charcoal-300: #3c3d42;
   --color-charcoal-400: #313235;
@@ -42,43 +31,45 @@
 
   --color-neutral-550: #636363;
 
-  --color-stone-100: #828282;
-  --color-stone-200: #444444;
-  --color-stone-300: #bbbbbb;
+  --color-ash-300: #bbbbbb;
+  --color-ash-500: #828282;
+  --color-ash-800: #444444;
 
   --color-ivory-100: #fdfbfa;
   --color-ivory-200: #faf9f5;
   --color-ivory-300: #f0eee6;
 
-  --color-gray-100: #f3f3f3;
-  --color-gray-200: #e9e9e9;
-  --color-gray-300: #e1e1e1;
-  --color-gray-400: #d9d9d9;
-  --color-gray-500: #c5c5c5;
-  --color-gray-600: #b4b4b4;
-  --color-gray-700: #a0a0a0;
-  --color-gray-800: #8a8a8a;
+  --color-smoke-100: #f3f3f3;
+  --color-smoke-200: #e9e9e9;
+  --color-smoke-300: #e1e1e1;
+  --color-smoke-400: #d9d9d9;
+  --color-smoke-500: #c5c5c5;
+  --color-smoke-600: #b4b4b4;
+  --color-smoke-700: #a0a0a0;
+  --color-smoke-800: #8a8a8a;
 
   --color-sand-100: #e1ded5;
   --color-sand-200: #d6cfc2;
   --color-sand-300: #888682;
 
-  --color-pure-black: #000000;
-  --color-pure-white: #ffffff;
-
   --color-slate-100: #9c9eab;
   --color-slate-200: #9fa2bd;
   --color-slate-300: #5b5e7d;
 
-  --color-brand-yellow: #f0ff41;
-  --color-brand-blue: #172dd7;
+  --color-electric-400: #f0ff41;
+  --color-sapphire-700: #172dd7;
+  --color-brand-yellow: var(--color-electric-400);
+  --color-brand-blue: var(--color-sapphire-700);
+
+  --color-azure-400: #31b9f4;
+  --color-azure-600: #0b8ce9;
+
+  --color-jade-400: #47e469;
+  --color-jade-600: #00cd72;
+
+  --color-gold-400: #fcbf64;
+  --color-gold-600: #fd9903;
 
-  --color-blue-100: #0b8ce9;
-  --color-blue-200: #31b9f4;
-  --color-success-100: #00cd72;
-  --color-success-200: #47e469;
-  --color-warning-100: #fd9903;
-  --color-warning-200: #fcbf64;
   --color-danger-100: #c02323;
   --color-danger-200: #d62952;
 
@@ -90,26 +81,24 @@
   --color-error: #962a2a;
 
   --color-comfy-menu-secondary: var(--comfy-menu-secondary-bg);
-  --text-xxxs: 0.5625rem;
-  --text-xxxs--line-height: calc(1 / 0.5625);
 
-  --color-blue-selection: rgb(from var(--color-blue-100) r g b / 0.3);
-  --color-node-hover-100: rgb(from var(--color-charcoal-100) r g b/ 0.15);
-  --color-node-hover-200: rgb(from var(--color-charcoal-100) r g b/ 0.1);
-  --color-modal-tag: rgb(from var(--color-gray-400) r g b/ 0.4);
+  --color-blue-selection: rgb(from var(--color-azure-600) r g b / 0.3);
+  --color-node-hover-100: rgb(from var(--color-charcoal-800) r g b/ 0.15);
+  --color-node-hover-200: rgb(from var(--color-charcoal-800) r g b/ 0.1);
+  --color-modal-tag: rgb(from var(--color-smoke-400) r g b/ 0.4);
   --color-alpha-charcoal-600-30: color-mix(
     in srgb,
     var(--color-charcoal-600) 30%,
     transparent
   );
-  --color-alpha-stone-100-20: color-mix(
+  --color-alpha-ash-500-20: color-mix(
     in srgb,
-    var(--color-stone-100) 20%,
+    var(--color-ash-500) 20%,
     transparent
   );
-  --color-alpha-gray-500-50: color-mix(
+  --color-alpha-smoke-500-50: color-mix(
     in srgb,
-    var(--color-gray-500) 50%,
+    var(--color-smoke-500) 50%,
     transparent
   );
 
@@ -145,8 +134,8 @@
   --content-hover-bg: #adadad;
   --content-hover-fg: #000;
 
-  --button-surface: var(--color-pure-white);
-  --button-surface-contrast: var(--color-pure-black);
+  --button-surface: var(--color-white);
+  --button-surface-contrast: var(--color-black);
 
   /* Code styling colors for help menu*/
   --code-text-color: rgb(0 122 255 / 1);
@@ -157,31 +146,36 @@
 
   --accent-primary: var(--color-charcoal-700);
   --backdrop: var(--color-white);
-  --button-hover-surface: var(--color-gray-200);
-  --button-active-surface: var(--color-gray-400);
-  --button-icon: var(--color-gray-600);
+
+  --button-hover-surface: var(--color-smoke-200);
+  --button-active-surface: var(--color-smoke-400);
+  --button-icon: var(--color-smoke-600);
+
   --dialog-surface: var(--color-neutral-200);
-  --interface-menu-component-surface-hovered: var(--color-gray-200);
-  --interface-menu-component-surface-selected: var(--color-gray-400);
-  --interface-menu-keybind-surface-default: var(--color-gray-500);
-  --interface-panel-surface: var(--color-pure-white);
-  --interface-stroke: var(--color-gray-300);
-  --nav-background: var(--color-pure-white);
-  --node-border: var(--color-gray-300);
-  --node-component-border: var(--color-gray-400);
-  --node-component-disabled: var(--color-alpha-stone-100-20);
+
+  --interface-menu-component-surface-hovered: var(--color-smoke-200);
+  --interface-menu-component-surface-selected: var(--color-smoke-400);
+  --interface-menu-keybind-surface-default: var(--color-smoke-500);
+  --interface-panel-surface: var(--color-white);
+  --interface-stroke: var(--color-smoke-300);
+
+  --nav-background: var(--color-white);
+
+  --node-border: var(--color-smoke-300);
+  --node-component-border: var(--color-smoke-400);
+  --node-component-disabled: var(--color-alpha-ash-500-20);
   --node-component-executing: var(--color-blue-500);
   --node-component-header: var(--fg-color);
-  --node-component-header-icon: var(--color-stone-200);
+  --node-component-header-icon: var(--color-ash-800);
   --node-component-header-surface: var(--color-white);
   --node-component-outline: var(--color-black);
-  --node-component-ring: rgb(from var(--color-gray-500) r g b / 50%);
+  --node-component-ring: rgb(from var(--color-smoke-500) r g b / 50%);
   --node-component-slot-dot-outline-opacity-mult: 1;
   --node-component-slot-dot-outline-opacity: 5%;
   --node-component-slot-dot-outline: var(--color-black);
-  --node-component-slot-text: var(--color-stone-200);
-  --node-component-surface-highlight: var(--color-stone-100);
-  --node-component-surface-hovered: var(--color-gray-200);
+  --node-component-slot-text: var(--color-ash-800);
+  --node-component-surface-highlight: var(--color-ash-500);
+  --node-component-surface-hovered: var(--color-smoke-200);
   --node-component-surface-selected: var(--color-charcoal-200);
   --node-component-surface: var(--color-white);
   --node-component-tooltip: var(--color-charcoal-700);
@@ -193,40 +187,53 @@
   );
   --node-component-widget-skeleton-surface: var(--color-zinc-300);
   --node-divider: var(--color-sand-100);
-  --node-icon-disabled: var(--color-alpha-gray-500-50);
-  --node-stroke: var(--color-gray-400);
+  --node-icon-disabled: var(--color-alpha-smoke-500-50);
+  --node-stroke: var(--color-smoke-400);
   --node-stroke-selected: var(--color-accent-primary);
   --node-stroke-error: var(--color-error);
-  --node-stroke-executing: var(--color-blue-100);
-  --text-secondary: var(--color-stone-100);
+  --node-stroke-executing: var(--color-azure-600);
+
+  --text-secondary: var(--color-ash-500);
   --text-primary: var(--color-charcoal-700);
   --input-surface: rgb(0 0 0 / 0.15);
 }
 
 .dark-theme {
-  --accent-primary: var(--color-pure-white);
+  --fg-color: #fff;
+  --bg-color: #202020;
+  --content-bg: #4e4e4e;
+  --content-fg: #fff;
+  --content-hover-bg: #222;
+  --content-hover-fg: #fff;
+
+  --accent-primary: var(--color-white);
   --backdrop: var(--color-neutral-900);
+
   --button-surface: var(--color-charcoal-600);
-  --button-surface-contrast: var(--color-pure-white);
+  --button-surface-contrast: var(--color-white);
   --button-hover-surface: var(--color-charcoal-600);
   --button-active-surface: var(--color-charcoal-600);
-  --button-icon: var(--color-gray-800);
+  --button-icon: var(--color-smoke-800);
+
   --dialog-surface: var(--color-neutral-700);
+
   --interface-menu-component-surface-hovered: var(--color-charcoal-400);
   --interface-menu-component-surface-selected: var(--color-charcoal-300);
   --interface-menu-keybind-surface-default: var(--color-charcoal-200);
-  --interface-panel-surface: var(--color-charcoal-100);
+  --interface-panel-surface: var(--color-charcoal-800);
   --interface-stroke: var(--color-charcoal-400);
-  --nav-background: var(--color-charcoal-100);
+
+  --nav-background: var(--color-charcoal-800);
+
   --node-border: var(--color-charcoal-500);
-  --node-component-border: var(--color-stone-200);
+  --node-component-border: var(--color-ash-800);
   --node-component-border-error: var(--color-danger-100);
   --node-component-border-executing: var(--color-blue-500);
   --node-component-border-selected: var(--color-charcoal-200);
   --node-component-header-icon: var(--color-slate-300);
   --node-component-header-surface: var(--color-charcoal-800);
   --node-component-outline: var(--color-white);
-  --node-component-ring: rgb(var(--color-gray-500) / 20%);
+  --node-component-ring: rgb(var(--color-smoke-500) / 20%);
   --node-component-slot-dot-outline-opacity: 10%;
   --node-component-slot-dot-outline: var(--color-white);
   --node-component-slot-text: var(--color-slate-200);
@@ -240,13 +247,15 @@
   --node-component-widget-skeleton-surface: var(--color-zinc-800);
   --node-component-disabled: var(--color-alpha-charcoal-600-30);
   --node-divider: var(--color-charcoal-500);
-  --node-icon-disabled: var(--color-alpha-stone-100-20);
-  --node-stroke: var(--color-stone-200);
-  --node-stroke-selected: var(--color-pure-white);
+  --node-icon-disabled: var(--color-alpha-ash-500-20);
+  --node-stroke: var(--color-ash-800);
+  --node-stroke-selected: var(--color-white);
   --node-stroke-error: var(--color-error);
-  --node-stroke-executing: var(--color-blue-100);
+  --node-stroke-executing: var(--color-azure-600);
+
   --text-secondary: var(--color-slate-100);
-  --text-primary: var(--color-pure-white);
+  --text-primary: var(--color-white);
+
   --input-surface: rgb(130 130 130 / 0.1);
 }
 
@@ -330,7 +339,6 @@
   }
 }
 
-
 /* ===================== Scrollbar Utilities (Tailwind) =====================
    Usage: Add `scrollbar-custom` class to scrollable containers.
    The scrollbar styling adapts to light/dark theme automatically.
diff --git a/packages/tailwind-utils/README.md b/packages/tailwind-utils/README.md
index 5f315600b..35c725e88 100644
--- a/packages/tailwind-utils/README.md
+++ b/packages/tailwind-utils/README.md
@@ -14,7 +14,7 @@ import { cn } from '@comfyorg/tailwind-utils'
 
 // Use with conditional classes (ternary)
 <button
-  :class="cn('px-4 py-2', isActive ? 'bg-blue-500' : 'bg-gray-500')"
+  :class="cn('px-4 py-2', isActive ? 'bg-blue-500' : 'bg-smoke-500')"
 />
 ```
 
diff --git a/src/components/common/FormImageUpload.vue b/src/components/common/FormImageUpload.vue
index 0e7703f13..661c5ceb8 100644
--- a/src/components/common/FormImageUpload.vue
+++ b/src/components/common/FormImageUpload.vue
@@ -3,14 +3,14 @@
     <div class="flex items-center gap-2">
       <div
         class="preview-box flex h-16 w-16 items-center justify-center rounded border p-2"
-        :class="{ 'bg-gray-100 dark-theme:bg-gray-800': !modelValue }"
+        :class="{ 'bg-smoke-100 dark-theme:bg-smoke-800': !modelValue }"
       >
         <img
           v-if="modelValue"
           :src="modelValue"
           class="max-h-full max-w-full object-contain"
         />
-        <i v-else class="pi pi-image text-xl text-gray-400" />
+        <i v-else class="pi pi-image text-xl text-smoke-400" />
       </div>
 
       <div class="flex flex-col gap-2">
diff --git a/src/components/dialog/content/setting/UsageLogsTable.vue b/src/components/dialog/content/setting/UsageLogsTable.vue
index ba7065870..41b6e283c 100644
--- a/src/components/dialog/content/setting/UsageLogsTable.vue
+++ b/src/components/dialog/content/setting/UsageLogsTable.vue
@@ -50,7 +50,7 @@
                 <div class="font-semibold">
                   {{ data.params?.api_name || 'API' }}
                 </div>
-                <div class="text-sm text-gray-400">
+                <div class="text-sm text-smoke-400">
                   {{ $t('credits.model') }}: {{ data.params?.model || '-' }}
                 </div>
               </div>
diff --git a/src/components/dialog/content/setting/UserPanel.vue b/src/components/dialog/content/setting/UserPanel.vue
index 1d604af02..bdaa1400d 100644
--- a/src/components/dialog/content/setting/UserPanel.vue
+++ b/src/components/dialog/content/setting/UserPanel.vue
@@ -78,7 +78,7 @@
 
       <!-- Login Section -->
       <div v-else class="flex flex-col gap-4">
-        <p class="text-gray-600">
+        <p class="text-smoke-600">
           {{ $t('auth.login.title') }}
         </p>
 
diff --git a/src/components/graph/modals/ZoomControlsModal.vue b/src/components/graph/modals/ZoomControlsModal.vue
index 4844b5b99..19cb7a315 100644
--- a/src/components/graph/modals/ZoomControlsModal.vue
+++ b/src/components/graph/modals/ZoomControlsModal.vue
@@ -148,6 +148,6 @@ watch(
 </script>
 <style>
 .zoomInputContainer:focus-within {
-  border: 1px solid var(--color-pure-white);
+  border: 1px solid var(--color-white);
 }
 </style>
diff --git a/src/components/graph/selectionToolbox/MenuOptionItem.vue b/src/components/graph/selectionToolbox/MenuOptionItem.vue
index 57e6595d7..4bc8f4a9e 100644
--- a/src/components/graph/selectionToolbox/MenuOptionItem.vue
+++ b/src/components/graph/selectionToolbox/MenuOptionItem.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="option.type === 'divider'"
-    class="my-1 h-px bg-gray-200 dark-theme:bg-zinc-700"
+    class="my-1 h-px bg-smoke-200 dark-theme:bg-zinc-700"
   />
   <div
     v-else
diff --git a/src/components/graph/selectionToolbox/SubmenuPopover.vue b/src/components/graph/selectionToolbox/SubmenuPopover.vue
index fd376df97..12c1a8571 100644
--- a/src/components/graph/selectionToolbox/SubmenuPopover.vue
+++ b/src/components/graph/selectionToolbox/SubmenuPopover.vue
@@ -20,15 +20,15 @@
         :key="subOption.label"
         :class="
           isColorSubmenu
-            ? 'w-7 h-7 flex items-center justify-center hover:bg-gray-100 dark-theme:hover:bg-zinc-700 rounded cursor-pointer'
-            : 'flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-gray-100 dark-theme:hover:bg-zinc-700 rounded cursor-pointer'
+            ? 'w-7 h-7 flex items-center justify-center hover:bg-smoke-100 dark-theme:hover:bg-zinc-700 rounded cursor-pointer'
+            : 'flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-smoke-100 dark-theme:hover:bg-zinc-700 rounded cursor-pointer'
         "
         :title="subOption.label"
         @click="handleSubmenuClick(subOption)"
       >
         <div
           v-if="subOption.color"
-          class="h-5 w-5 rounded-full border border-gray-300 dark-theme:border-zinc-600"
+          class="h-5 w-5 rounded-full border border-smoke-300 dark-theme:border-zinc-600"
           :style="{ backgroundColor: subOption.color }"
         />
         <template v-else-if="!subOption.color">
diff --git a/src/components/graph/selectionToolbox/VerticalDivider.vue b/src/components/graph/selectionToolbox/VerticalDivider.vue
index 0d5587fb2..ac6768a2c 100644
--- a/src/components/graph/selectionToolbox/VerticalDivider.vue
+++ b/src/components/graph/selectionToolbox/VerticalDivider.vue
@@ -1,3 +1,5 @@
 <template>
-  <div class="h-6 w-px self-center bg-gray-300/10 dark-theme:bg-gray-600/10" />
+  <div
+    class="h-6 w-px self-center bg-smoke-300/10 dark-theme:bg-smoke-600/10"
+  />
 </template>
diff --git a/src/components/graph/widgets/ChatHistoryWidget.vue b/src/components/graph/widgets/ChatHistoryWidget.vue
index f749d5951..37bb8a266 100644
--- a/src/components/graph/widgets/ChatHistoryWidget.vue
+++ b/src/components/graph/widgets/ChatHistoryWidget.vue
@@ -13,7 +13,7 @@
       >
         <div class="mb-1 flex justify-end">
           <div
-            class="max-w-[80%] rounded-xl bg-gray-300 px-4 py-1 text-right dark-theme:bg-gray-800"
+            class="max-w-[80%] rounded-xl bg-smoke-300 px-4 py-1 text-right dark-theme:bg-smoke-800"
           >
             <div class="text-[12px] break-words">{{ item.prompt }}</div>
           </div>
@@ -26,7 +26,7 @@
             "
             text
             rounded
-            class="h-4! w-4! p-1! text-gray-400 transition hover:text-gray-600 hover:dark-theme:text-gray-200"
+            class="h-4! w-4! p-1! text-smoke-400 transition hover:text-smoke-600 hover:dark-theme:text-smoke-200"
             pt:icon:class="text-xs!"
             :icon="editIndex === i ? 'pi pi-times' : 'pi pi-pencil'"
             :aria-label="
diff --git a/src/components/graph/widgets/chatHistory/CopyButton.vue b/src/components/graph/widgets/chatHistory/CopyButton.vue
index 933a1b921..4a44d05ce 100644
--- a/src/components/graph/widgets/chatHistory/CopyButton.vue
+++ b/src/components/graph/widgets/chatHistory/CopyButton.vue
@@ -5,7 +5,7 @@
     "
     text
     rounded
-    class="h-4! w-6! p-1! text-gray-400 transition hover:text-gray-600 hover:dark-theme:text-gray-200"
+    class="h-4! w-6! p-1! text-smoke-400 transition hover:text-smoke-600 hover:dark-theme:text-smoke-200"
     pt:icon:class="text-xs!"
     :icon="copied ? 'pi pi-check' : 'pi pi-copy'"
     :aria-label="
diff --git a/src/components/input/MultiSelect.accessibility.stories.ts b/src/components/input/MultiSelect.accessibility.stories.ts
index 716bfab0f..3decd2a21 100644
--- a/src/components/input/MultiSelect.accessibility.stories.ts
+++ b/src/components/input/MultiSelect.accessibility.stories.ts
@@ -119,12 +119,12 @@ export const KeyboardNavigationDemo: Story = {
     },
     template: `
       <div class="space-y-4 p-4">
-        <div class="bg-blue-50 dark-theme:bg-blue-900/20 border border-blue-200 dark-theme:border-blue-700 rounded-lg p-4">
+        <div class="bg-blue-50 dark-theme:bg-blue-900/20 border border-azure-400 dark-theme:border-blue-700 rounded-lg p-4">
           <h3 class="text-lg font-semibold mb-2">🎯 Keyboard Navigation Test</h3>
-          <p class="text-sm text-gray-600 dark-theme:text-gray-300 mb-4">
+          <p class="text-sm text-smoke-600 dark-theme:text-smoke-300 mb-4">
             Use your keyboard to navigate this MultiSelect:
           </p>
-          <ol class="text-sm text-gray-600 list-decimal list-inside space-y-1">
+          <ol class="text-sm text-smoke-600 list-decimal list-inside space-y-1">
             <li><strong>Tab</strong> to focus the dropdown</li>
             <li><strong>Enter/Space</strong> to open dropdown</li>
             <li><strong>Arrow Up/Down</strong> to navigate options</li>
@@ -134,11 +134,11 @@ export const KeyboardNavigationDemo: Story = {
         </div>
 
         <div class="space-y-2">
-          <label class="block text-sm font-medium text-gray-700">
+          <label class="block text-sm font-medium text-smoke-700">
             Select Frameworks (Keyboard Navigation Test)
           </label>
           <MultiSelect v-bind="args" class="w-80" />
-          <p class="text-xs text-gray-500">
+          <p class="text-xs text-smoke-500">
             Selected: {{ selectedFrameworks.map(f => f.name).join(', ') || 'None' }}
           </p>
         </div>
@@ -186,10 +186,10 @@ export const ScreenReaderFriendly: Story = {
       <div class="space-y-6 p-4">
         <div class="bg-green-50 dark-theme:bg-green-900/20 border border-green-200 dark-theme:border-green-700 rounded-lg p-4">
           <h3 class="text-lg font-semibold mb-2">♿ Screen Reader Test</h3>
-          <p class="text-sm text-gray-600 mb-2">
+          <p class="text-sm text-smoke-600 mb-2">
             These dropdowns have proper ARIA attributes and labels for screen readers:
           </p>
-          <ul class="text-sm text-gray-600 list-disc list-inside space-y-1">
+          <ul class="text-sm text-smoke-600 list-disc list-inside space-y-1">
             <li><code>role="combobox"</code> identifies as dropdown</li>
             <li><code>aria-haspopup="listbox"</code> indicates popup type</li>
             <li><code>aria-expanded</code> shows open/closed state</li>
@@ -200,7 +200,7 @@ export const ScreenReaderFriendly: Story = {
 
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
           <div class="space-y-2">
-            <label class="block text-sm font-medium text-gray-700">
+            <label class="block text-sm font-medium text-smoke-700">
               Color Preferences
             </label>
             <MultiSelect
@@ -211,13 +211,13 @@ export const ScreenReaderFriendly: Story = {
               :show-clear-button="true"
               class="w-full"
             />
-            <p class="text-xs text-gray-500" aria-live="polite">
+            <p class="text-xs text-smoke-500" aria-live="polite">
               {{ selectedColors.length }} color(s) selected
             </p>
           </div>
 
           <div class="space-y-2">
-            <label class="block text-sm font-medium text-gray-700">
+            <label class="block text-sm font-medium text-smoke-700">
               Size Preferences
             </label>
             <MultiSelect
@@ -228,7 +228,7 @@ export const ScreenReaderFriendly: Story = {
               :show-search-box="true"
               class="w-full"
             />
-            <p class="text-xs text-gray-500" aria-live="polite">
+            <p class="text-xs text-smoke-500" aria-live="polite">
               {{ selectedSizes.length }} size(s) selected
             </p>
           </div>
@@ -259,25 +259,25 @@ export const FocusManagement: Story = {
       <div class="space-y-4 p-4">
         <div class="bg-purple-50 dark-theme:bg-purple-900/20 border border-purple-200 dark-theme:border-purple-700 rounded-lg p-4">
           <h3 class="text-lg font-semibold mb-2">🎯 Focus Management Test</h3>
-          <p class="text-sm text-gray-600 dark-theme:text-gray-300 mb-4">
+          <p class="text-sm text-smoke-600 dark-theme:text-smoke-300 mb-4">
             Test focus behavior with multiple form elements:
           </p>
         </div>
 
         <div class="space-y-4">
           <div>
-            <label class="block text-sm font-medium text-gray-700 mb-1">
+            <label class="block text-sm font-medium text-smoke-700 mb-1">
               Before MultiSelect
             </label>
             <input
               type="text"
               placeholder="Previous field"
-              class="block w-64 px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              class="block w-64 px-3 py-2 border border-smoke-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
             />
           </div>
 
           <div>
-            <label class="block text-sm font-medium text-gray-700 mb-1">
+            <label class="block text-sm font-medium text-smoke-700 mb-1">
               MultiSelect (Test Focus Ring)
             </label>
             <MultiSelect
@@ -290,13 +290,13 @@ export const FocusManagement: Story = {
           </div>
 
           <div>
-            <label class="block text-sm font-medium text-gray-700 mb-1">
+            <label class="block text-sm font-medium text-smoke-700 mb-1">
               After MultiSelect
             </label>
             <input
               type="text"
               placeholder="Next field"
-              class="block w-64 px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              class="block w-64 px-3 py-2 border border-smoke-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
             />
           </div>
 
@@ -307,7 +307,7 @@ export const FocusManagement: Story = {
           </button>
         </div>
 
-        <div class="text-sm text-gray-600 mt-4">
+        <div class="text-sm text-smoke-600 mt-4">
           <strong>Test:</strong> Tab through all elements and verify focus rings are visible and logical.
         </div>
       </div>
@@ -319,7 +319,7 @@ export const AccessibilityChecklist: Story = {
   render: () => ({
     template: `
       <div class="max-w-4xl mx-auto p-6 space-y-6">
-        <div class="bg-gray-50 dark-theme:bg-zinc-800 border border-gray-200 dark-theme:border-zinc-700 rounded-lg p-6">
+        <div class="bg-gray-50 dark-theme:bg-zinc-800 border border-smoke-200 dark-theme:border-zinc-700 rounded-lg p-6">
           <h2 class="text-2xl font-bold mb-4">♿ MultiSelect Accessibility Checklist</h2>
 
           <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -366,9 +366,9 @@ export const AccessibilityChecklist: Story = {
             </div>
           </div>
 
-          <div class="mt-6 p-4 bg-blue-50 dark-theme:bg-blue-900/20 border border-blue-200 dark-theme:border-blue-700 rounded-lg">
+          <div class="mt-6 p-4 bg-blue-50 dark-theme:bg-blue-900/20 border border-azure-400 dark-theme:border-blue-700 rounded-lg">
             <h4 class="font-semibold mb-2">🎯 Quick Test</h4>
-            <p class="text-sm text-gray-700 dark-theme:text-gray-300">
+            <p class="text-sm text-smoke-700 dark-theme:text-smoke-300">
               Close your eyes, use only the keyboard, and try to select multiple options from any dropdown above.
               If you can successfully navigate and make selections, the accessibility implementation is working!
             </p>
diff --git a/src/components/input/MultiSelect.vue b/src/components/input/MultiSelect.vue
index e461eed32..e5f878f06 100644
--- a/src/components/input/MultiSelect.vue
+++ b/src/components/input/MultiSelect.vue
@@ -62,7 +62,7 @@
 
     <!-- Trigger value (keep text scale identical) -->
     <template #value>
-      <span class="text-sm text-zinc-700 dark-theme:text-gray-200">
+      <span class="text-sm text-zinc-700 dark-theme:text-smoke-200">
         {{ label }}
       </span>
       <span
diff --git a/src/components/input/SingleSelect.accessibility.stories.ts b/src/components/input/SingleSelect.accessibility.stories.ts
index cc58466d1..b671ae59c 100644
--- a/src/components/input/SingleSelect.accessibility.stories.ts
+++ b/src/components/input/SingleSelect.accessibility.stories.ts
@@ -101,12 +101,12 @@ export const KeyboardNavigationDemo: Story = {
     },
     template: `
       <div class="space-y-6 p-4">
-        <div class="bg-blue-50 dark-theme:bg-blue-900/20 border border-blue-200 dark-theme:border-blue-700 rounded-lg p-4">
+        <div class="bg-blue-50 dark-theme:bg-blue-900/20 border border-azure-400 dark-theme:border-blue-700 rounded-lg p-4">
           <h3 class="text-lg font-semibold mb-2">🎯 Keyboard Navigation Test</h3>
-          <p class="text-sm text-gray-600 dark-theme:text-gray-300 mb-4">
+          <p class="text-sm text-smoke-600 dark-theme:text-smoke-300 mb-4">
             Use your keyboard to navigate these SingleSelect dropdowns:
           </p>
-          <ol class="text-sm text-gray-600 dark-theme:text-gray-300 list-decimal list-inside space-y-1">
+          <ol class="text-sm text-smoke-600 dark-theme:text-smoke-300 list-decimal list-inside space-y-1">
             <li><strong>Tab</strong> to focus the dropdown</li>
             <li><strong>Enter/Space</strong> to open dropdown</li>
             <li><strong>Arrow Up/Down</strong> to navigate options</li>
@@ -117,7 +117,7 @@ export const KeyboardNavigationDemo: Story = {
 
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
           <div class="space-y-2">
-            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200">
+            <label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200">
               Sort Order
             </label>
             <SingleSelect
@@ -126,13 +126,13 @@ export const KeyboardNavigationDemo: Story = {
               label="Choose sort order"
               class="w-full"
             />
-            <p class="text-xs text-gray-500">
+            <p class="text-xs text-smoke-500">
               Selected: {{ selectedSort ? sortOptions.find(o => o.value === selectedSort)?.name : 'None' }}
             </p>
           </div>
 
           <div class="space-y-2">
-            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200">
+            <label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200">
               Task Priority (With Icon)
             </label>
             <SingleSelect
@@ -147,7 +147,7 @@ export const KeyboardNavigationDemo: Story = {
                 </svg>
               </template>
             </SingleSelect>
-            <p class="text-xs text-gray-500">
+            <p class="text-xs text-smoke-500">
               Selected: {{ selectedPriority ? priorityOptions.find(o => o.value === selectedPriority)?.name : 'None' }}
             </p>
           </div>
@@ -191,10 +191,10 @@ export const ScreenReaderFriendly: Story = {
       <div class="space-y-6 p-4">
         <div class="bg-green-50 dark-theme:bg-green-900/20 border border-green-200 dark-theme:border-green-700 rounded-lg p-4">
           <h3 class="text-lg font-semibold mb-2">♿ Screen Reader Test</h3>
-          <p class="text-sm text-gray-600 dark-theme:text-gray-300 mb-2">
+          <p class="text-sm text-smoke-600 dark-theme:text-smoke-300 mb-2">
             These dropdowns have proper ARIA attributes and labels for screen readers:
           </p>
-          <ul class="text-sm text-gray-600 dark-theme:text-gray-300 list-disc list-inside space-y-1">
+          <ul class="text-sm text-smoke-600 dark-theme:text-smoke-300 list-disc list-inside space-y-1">
             <li><code>role="combobox"</code> identifies as dropdown</li>
             <li><code>aria-haspopup="listbox"</code> indicates popup type</li>
             <li><code>aria-expanded</code> shows open/closed state</li>
@@ -205,7 +205,7 @@ export const ScreenReaderFriendly: Story = {
 
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
           <div class="space-y-2">
-            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200" id="language-label">
+            <label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200" id="language-label">
               Preferred Language
             </label>
             <SingleSelect
@@ -215,13 +215,13 @@ export const ScreenReaderFriendly: Story = {
               class="w-full"
               aria-labelledby="language-label"
             />
-            <p class="text-xs text-gray-500" aria-live="polite">
+            <p class="text-xs text-smoke-500" aria-live="polite">
               Current: {{ selectedLanguage ? languageOptions.find(o => o.value === selectedLanguage)?.name : 'None selected' }}
             </p>
           </div>
 
           <div class="space-y-2">
-            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200" id="theme-label">
+            <label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200" id="theme-label">
               Interface Theme
             </label>
             <SingleSelect
@@ -231,7 +231,7 @@ export const ScreenReaderFriendly: Story = {
               class="w-full"
               aria-labelledby="theme-label"
             />
-            <p class="text-xs text-gray-500" aria-live="polite">
+            <p class="text-xs text-smoke-500" aria-live="polite">
               Current: {{ selectedTheme ? themeOptions.find(o => o.value === selectedTheme)?.name : 'No theme selected' }}
             </p>
           </div>
@@ -239,7 +239,7 @@ export const ScreenReaderFriendly: Story = {
 
         <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
           <h4 class="font-semibold mb-2">🎧 Screen Reader Testing Tips</h4>
-          <ul class="text-sm text-gray-600 dark-theme:text-gray-300 space-y-1">
+          <ul class="text-sm text-smoke-600 dark-theme:text-smoke-300 space-y-1">
             <li>• Listen for role announcements when focusing</li>
             <li>• Verify dropdown state changes are announced</li>
             <li>• Check that selected values are spoken clearly</li>
@@ -299,7 +299,7 @@ export const FormIntegration: Story = {
       <div class="max-w-2xl mx-auto p-6">
         <div class="bg-purple-50 dark-theme:bg-purple-900/20 border border-purple-200 dark-theme:border-purple-700 rounded-lg p-4 mb-6">
           <h3 class="text-lg font-semibold mb-2">📝 Form Integration Test</h3>
-          <p class="text-sm text-gray-600 dark-theme:text-gray-300">
+          <p class="text-sm text-smoke-600 dark-theme:text-smoke-300">
             Test keyboard navigation through a complete form with SingleSelect components.
             Tab order should be logical and all elements should be accessible.
           </p>
@@ -307,19 +307,19 @@ export const FormIntegration: Story = {
 
         <form @submit.prevent="handleSubmit" class="space-y-6">
           <div>
-            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200 mb-1">
+            <label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200 mb-1">
               Title *
             </label>
             <input
               type="text"
               required
               placeholder="Enter a title"
-              class="block w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              class="block w-full px-3 py-2 border border-smoke-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
             />
           </div>
 
           <div>
-            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200 mb-1">
+            <label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200 mb-1">
               Category *
             </label>
             <SingleSelect
@@ -332,7 +332,7 @@ export const FormIntegration: Story = {
           </div>
 
           <div>
-            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200 mb-1">
+            <label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200 mb-1">
               Status
             </label>
             <SingleSelect
@@ -344,7 +344,7 @@ export const FormIntegration: Story = {
           </div>
 
           <div>
-            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200 mb-1">
+            <label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200 mb-1">
               Assignee
             </label>
             <SingleSelect
@@ -356,13 +356,13 @@ export const FormIntegration: Story = {
           </div>
 
           <div>
-            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200 mb-1">
+            <label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200 mb-1">
               Description
             </label>
             <textarea
               rows="4"
               placeholder="Enter description"
-              class="block w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              class="block w-full px-3 py-2 border border-smoke-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
             />
           </div>
 
@@ -375,16 +375,16 @@ export const FormIntegration: Story = {
             </button>
             <button
               type="button"
-              class="px-4 py-2 bg-gray-300 dark-theme:bg-gray-600 text-gray-700 dark-theme:text-gray-200 rounded-md hover:bg-gray-400 dark-theme:hover:bg-gray-500 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
+              class="px-4 py-2 bg-smoke-300 dark-theme:bg-smoke-600 text-smoke-700 dark-theme:text-smoke-200 rounded-md hover:bg-smoke-400 dark-theme:hover:bg-smoke-500 focus:ring-2 focus:ring-smoke-500 focus:ring-offset-2"
             >
               Cancel
             </button>
           </div>
         </form>
 
-        <div class="mt-6 p-4 bg-gray-50 dark-theme:bg-zinc-800 border border-gray-200 dark-theme:border-zinc-700 rounded-lg">
+        <div class="mt-6 p-4 bg-gray-50 dark-theme:bg-zinc-800 border border-smoke-200 dark-theme:border-zinc-700 rounded-lg">
           <h4 class="font-semibold mb-2">Current Form Data:</h4>
-          <pre class="text-xs text-gray-600 dark-theme:text-gray-300">{{ JSON.stringify(formData, null, 2) }}</pre>
+          <pre class="text-xs text-smoke-600 dark-theme:text-smoke-300">{{ JSON.stringify(formData, null, 2) }}</pre>
         </div>
       </div>
     `
@@ -395,7 +395,7 @@ export const AccessibilityChecklist: Story = {
   render: () => ({
     template: `
       <div class="max-w-4xl mx-auto p-6 space-y-6">
-        <div class="bg-gray-50 dark-theme:bg-zinc-800 border border-gray-200 dark-theme:border-zinc-700 rounded-lg p-6">
+        <div class="bg-gray-50 dark-theme:bg-zinc-800 border border-smoke-200 dark-theme:border-zinc-700 rounded-lg p-6">
           <h2 class="text-2xl font-bold mb-4">♿ SingleSelect Accessibility Checklist</h2>
 
           <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -442,9 +442,9 @@ export const AccessibilityChecklist: Story = {
             </div>
           </div>
 
-          <div class="mt-6 p-4 bg-blue-50 dark-theme:bg-blue-900/20 border border-blue-200 dark-theme:border-blue-700 rounded-lg">
+          <div class="mt-6 p-4 bg-blue-50 dark-theme:bg-blue-900/20 border border-azure-400 dark-theme:border-blue-700 rounded-lg">
             <h4 class="font-semibold mb-2">🎯 Quick Test</h4>
-            <p class="text-sm text-gray-700 dark-theme:text-gray-200">
+            <p class="text-sm text-smoke-700 dark-theme:text-smoke-200">
               Close your eyes, use only the keyboard, and try to select different options from any dropdown above.
               If you can successfully navigate and make selections, the accessibility implementation is working!
             </p>
@@ -452,7 +452,7 @@ export const AccessibilityChecklist: Story = {
 
           <div class="mt-4 p-4 bg-orange-50 border border-orange-200 rounded-lg">
             <h4 class="font-semibold mb-2">⚡ Performance Note</h4>
-            <p class="text-sm text-gray-700 dark-theme:text-gray-200">
+            <p class="text-sm text-smoke-700 dark-theme:text-smoke-200">
               These accessibility features are built into the component with minimal performance impact.
               The ARIA attributes and keyboard handlers add less than 1KB to the bundle size.
             </p>
diff --git a/src/components/input/SingleSelect.vue b/src/components/input/SingleSelect.vue
index f1e8a86ea..98465b51d 100644
--- a/src/components/input/SingleSelect.vue
+++ b/src/components/input/SingleSelect.vue
@@ -26,11 +26,11 @@
         <slot name="icon" />
         <span
           v-if="slotProps.value !== null && slotProps.value !== undefined"
-          class="text-zinc-700 dark-theme:text-gray-200"
+          class="text-zinc-700 dark-theme:text-smoke-200"
         >
           {{ getLabel(slotProps.value) }}
         </span>
-        <span v-else class="text-zinc-700 dark-theme:text-gray-200">
+        <span v-else class="text-zinc-700 dark-theme:text-smoke-200">
           {{ label }}
         </span>
       </div>
diff --git a/src/components/load3d/Load3DControls.vue b/src/components/load3d/Load3DControls.vue
index 21a4dc0b0..16684f869 100644
--- a/src/components/load3d/Load3DControls.vue
+++ b/src/components/load3d/Load3DControls.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="pointer-events-auto absolute top-12 left-2 z-20 flex flex-col rounded-lg bg-gray-700/30"
+    class="pointer-events-auto absolute top-12 left-2 z-20 flex flex-col rounded-lg bg-smoke-700/30"
   >
     <div class="show-menu relative">
       <Button class="p-button-rounded p-button-text" @click="toggleMenu">
@@ -16,7 +16,7 @@
             v-for="category in availableCategories"
             :key="category"
             class="p-button-text flex w-full items-center justify-start"
-            :class="{ 'bg-gray-600': activeCategory === category }"
+            :class="{ 'bg-smoke-600': activeCategory === category }"
             @click="selectCategory(category)"
           >
             <i :class="getCategoryIcon(category)" />
@@ -26,7 +26,7 @@
       </div>
     </div>
 
-    <div v-show="activeCategory" class="rounded-lg bg-gray-700/30">
+    <div v-show="activeCategory" class="rounded-lg bg-smoke-700/30">
       <SceneControls
         v-if="activeCategory === 'scene'"
         ref="sceneControlsRef"
diff --git a/src/components/load3d/controls/RecordingControls.vue b/src/components/load3d/controls/RecordingControls.vue
index f37f2b6ae..0728289b9 100644
--- a/src/components/load3d/controls/RecordingControls.vue
+++ b/src/components/load3d/controls/RecordingControls.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relative rounded-lg bg-gray-700/30">
+  <div class="relative rounded-lg bg-smoke-700/30">
     <div class="flex flex-col gap-2">
       <Button
         class="p-button-rounded p-button-text"
diff --git a/src/components/load3d/controls/ViewerControls.vue b/src/components/load3d/controls/ViewerControls.vue
index 2930aea0b..93f9f8b77 100644
--- a/src/components/load3d/controls/ViewerControls.vue
+++ b/src/components/load3d/controls/ViewerControls.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relative rounded-lg bg-gray-700/30">
+  <div class="relative rounded-lg bg-smoke-700/30">
     <div class="flex flex-col gap-2">
       <Button class="p-button-rounded p-button-text" @click="openIn3DViewer">
         <i
diff --git a/src/components/topbar/TopbarBadge.test.ts b/src/components/topbar/TopbarBadge.test.ts
index c95a714e8..ffb8abdcd 100644
--- a/src/components/topbar/TopbarBadge.test.ts
+++ b/src/components/topbar/TopbarBadge.test.ts
@@ -160,8 +160,8 @@ describe('TopbarBadge', () => {
         'full'
       )
 
-      expect(wrapper.find('.bg-warning-100').exists()).toBe(true)
-      expect(wrapper.find('.text-warning-100').exists()).toBe(true)
+      expect(wrapper.find('.bg-gold-600').exists()).toBe(true)
+      expect(wrapper.find('.text-gold-600').exists()).toBe(true)
     })
 
     it('uses default error icon for error variant', () => {
diff --git a/src/components/topbar/TopbarBadge.vue b/src/components/topbar/TopbarBadge.vue
index 9a766f85a..e521afad1 100644
--- a/src/components/topbar/TopbarBadge.vue
+++ b/src/components/topbar/TopbarBadge.vue
@@ -162,7 +162,7 @@ const labelClasses = computed(() => {
     case 'error':
       return 'bg-danger-100 text-white'
     case 'warning':
-      return 'bg-warning-100 text-black'
+      return 'bg-gold-600 text-black'
     case 'info':
     default:
       return 'bg-white text-black'
@@ -174,7 +174,7 @@ const textClasses = computed(() => {
     case 'error':
       return 'text-danger-100'
     case 'warning':
-      return 'text-warning-100'
+      return 'text-gold-600'
     case 'info':
     default:
       return 'text-slate-100'
@@ -205,7 +205,7 @@ const dotClasses = computed(() => {
     case 'error':
       return 'bg-danger-100'
     case 'warning':
-      return 'bg-warning-100'
+      return 'bg-gold-600'
     case 'info':
     default:
       return 'bg-slate-100'
diff --git a/src/components/widget/layout/BaseModalLayout.vue b/src/components/widget/layout/BaseModalLayout.vue
index e2e8f49e7..23b87cc0c 100644
--- a/src/components/widget/layout/BaseModalLayout.vue
+++ b/src/components/widget/layout/BaseModalLayout.vue
@@ -133,7 +133,7 @@ const toggleRightPanel = () => {
 const layoutClasses = cn(
   'base-widget-layout',
   'rounded-2xl overflow-hidden relative',
-  'bg-gray-50 dark-theme:bg-gray-800'
+  'bg-gray-50 dark-theme:bg-smoke-800'
 )
 
 const rightPanelButtonClasses = computed(() => {
@@ -150,7 +150,7 @@ const closeButtonClasses = cn(
 
 const mainContainerClasses = cn(
   'flex-1 flex',
-  'bg-gray-100 dark-theme:bg-neutral-900'
+  'bg-smoke-100 dark-theme:bg-neutral-900'
 )
 
 const headerClasses = cn(
diff --git a/src/components/widget/nav/NavItem.vue b/src/components/widget/nav/NavItem.vue
index 655ccb0ee..46b810b13 100644
--- a/src/components/widget/nav/NavItem.vue
+++ b/src/components/widget/nav/NavItem.vue
@@ -3,8 +3,8 @@
     class="flex cursor-pointer items-center gap-2 rounded-md px-4 py-3 text-sm transition-colors"
     :class="
       active
-        ? 'bg-gray-400 dark-theme:bg-charcoal-300 text-neutral'
-        : 'text-neutral hover:bg-gray-100 dark-theme:hover:bg-charcoal-300'
+        ? 'bg-smoke-400 dark-theme:bg-charcoal-300 text-neutral'
+        : 'text-neutral hover:bg-smoke-100 dark-theme:hover:bg-charcoal-300'
     "
     role="button"
     @click="onClick"
diff --git a/src/core/graph/subgraph/SubgraphNode.vue b/src/core/graph/subgraph/SubgraphNode.vue
index e40bdeef2..9c74eb13b 100644
--- a/src/core/graph/subgraph/SubgraphNode.vue
+++ b/src/core/graph/subgraph/SubgraphNode.vue
@@ -255,7 +255,7 @@ onBeforeUnmount(() => {
         {{ $t('subgraphStore.shown') }}
       </div>
       <a
-        class="cursor-pointer text-right text-[11px] font-normal text-blue-100"
+        class="cursor-pointer text-right text-[11px] font-normal text-azure-600"
         @click.stop="hideAll"
       >
         {{ $t('subgraphStore.hideAll') }}</a
@@ -280,7 +280,7 @@ onBeforeUnmount(() => {
         {{ $t('subgraphStore.hidden') }}
       </div>
       <a
-        class="cursor-pointer text-right text-[11px] font-normal text-blue-100"
+        class="cursor-pointer text-right text-[11px] font-normal text-azure-600"
         @click.stop="showAll"
       >
         {{ $t('subgraphStore.showAll') }}</a
diff --git a/src/platform/assets/components/AssetBadgeGroup.vue b/src/platform/assets/components/AssetBadgeGroup.vue
index 7723667db..9c5604acd 100644
--- a/src/platform/assets/components/AssetBadgeGroup.vue
+++ b/src/platform/assets/components/AssetBadgeGroup.vue
@@ -30,13 +30,13 @@ defineProps<{
 function getBadgeColor(type: AssetBadge['type']): string {
   switch (type) {
     case 'type':
-      return 'bg-blue-100/90 dark-theme:bg-blue-100/80'
+      return 'bg-azure-600/90 dark-theme:bg-azure-600/80'
     case 'base':
-      return 'bg-success-100/90 dark-theme:bg-success-100/80'
+      return 'bg-jade-600/90 dark-theme:bg-jade-600/80'
     case 'size':
-      return 'bg-stone-100/90 dark-theme:bg-charcoal-700/80'
+      return 'bg-ash-500/90 dark-theme:bg-charcoal-700/80'
     default:
-      return 'bg-stone-100/90 dark-theme:bg-charcoal-700/80'
+      return 'bg-ash-500/90 dark-theme:bg-charcoal-700/80'
   }
 }
 </script>
diff --git a/src/platform/assets/components/AssetBrowserModal.stories.ts b/src/platform/assets/components/AssetBrowserModal.stories.ts
index cad836ae3..e1d8b7b34 100644
--- a/src/platform/assets/components/AssetBrowserModal.stories.ts
+++ b/src/platform/assets/components/AssetBrowserModal.stories.ts
@@ -70,7 +70,7 @@ export const Default: Story = {
       }
     },
     template: `
-      <div class="flex items-center justify-center min-h-screen bg-stone-200 dark-theme:bg-stone-200 p-4">
+      <div class="flex items-center justify-center min-h-screen bg-ash-800 dark-theme:bg-ash-800 p-4">
         <AssetBrowserModal
           :node-type="nodeType"
           :input-name="inputName"
@@ -111,7 +111,7 @@ export const SingleAssetType: Story = {
       return { ...args, onAssetSelect, onClose, assets: singleTypeAssets }
     },
     template: `
-      <div class="flex items-center justify-center min-h-screen bg-stone-200 dark-theme:bg-stone-200 p-4">
+      <div class="flex items-center justify-center min-h-screen bg-ash-800 dark-theme:bg-ash-800 p-4">
         <AssetBrowserModal
           :node-type="nodeType"
           :input-name="inputName"
@@ -154,7 +154,7 @@ export const NoLeftPanel: Story = {
       return { ...args, onAssetSelect, onClose, assets: mockAssets }
     },
     template: `
-      <div class="flex items-center justify-center min-h-screen bg-stone-200 dark-theme:bg-stone-200 p-4">
+      <div class="flex items-center justify-center min-h-screen bg-ash-800 dark-theme:bg-ash-800 p-4">
         <AssetBrowserModal
           :node-type="nodeType"
           :input-name="inputName"
diff --git a/src/platform/assets/components/AssetCard.stories.ts b/src/platform/assets/components/AssetCard.stories.ts
index 9fdb7b7d8..e85f47fbb 100644
--- a/src/platform/assets/components/AssetCard.stories.ts
+++ b/src/platform/assets/components/AssetCard.stories.ts
@@ -33,7 +33,7 @@ const meta: Meta<typeof AssetCard> = {
   decorators: [
     () => ({
       template:
-        '<div class="p-8 bg-gray-50 dark-theme:bg-gray-900"><story /></div>'
+        '<div class="p-8 bg-gray-50 dark-theme:bg-smoke-900"><story /></div>'
     })
   ]
 }
@@ -49,7 +49,7 @@ export const Interactive: Story = {
   decorators: [
     () => ({
       template:
-        '<div class="p-8 bg-gray-50 dark-theme:bg-gray-900 max-w-96"><story /></div>'
+        '<div class="p-8 bg-gray-50 dark-theme:bg-smoke-900 max-w-96"><story /></div>'
     })
   ],
   parameters: {
@@ -70,7 +70,7 @@ export const NonInteractive: Story = {
   decorators: [
     () => ({
       template:
-        '<div class="p-8 bg-gray-50 dark-theme:bg-gray-900 max-w-96"><story /></div>'
+        '<div class="p-8 bg-gray-50 dark-theme:bg-smoke-900 max-w-96"><story /></div>'
     })
   ],
   parameters: {
@@ -93,7 +93,7 @@ export const WithPreviewImage: Story = {
   decorators: [
     () => ({
       template:
-        '<div class="p-8 bg-gray-50 dark-theme:bg-gray-900 max-w-96"><story /></div>'
+        '<div class="p-8 bg-gray-50 dark-theme:bg-smoke-900 max-w-96"><story /></div>'
     })
   ],
   parameters: {
@@ -115,7 +115,7 @@ export const FallbackGradient: Story = {
   decorators: [
     () => ({
       template:
-        '<div class="p-8 bg-gray-50 dark-theme:bg-gray-900 max-w-96"><story /></div>'
+        '<div class="p-8 bg-gray-50 dark-theme:bg-smoke-900 max-w-96"><story /></div>'
     })
   ],
   parameters: {
@@ -203,7 +203,7 @@ export const EdgeCases: Story = {
       return { edgeCases }
     },
     template: `
-      <div class="grid grid-cols-4 gap-6 p-8 bg-gray-50 dark-theme:bg-gray-900">
+      <div class="grid grid-cols-4 gap-6 p-8 bg-gray-50 dark-theme:bg-smoke-900">
         <AssetCard
           v-for="asset in edgeCases"
           :key="asset.id"
diff --git a/src/platform/assets/components/AssetCard.vue b/src/platform/assets/components/AssetCard.vue
index dd35b4fc1..d561b00a7 100644
--- a/src/platform/assets/components/AssetCard.vue
+++ b/src/platform/assets/components/AssetCard.vue
@@ -16,7 +16,7 @@
       />
       <div
         v-else
-        class="flex h-full w-full items-center justify-center bg-gradient-to-br from-gray-400 via-gray-800 to-charcoal-400"
+        class="flex h-full w-full items-center justify-center bg-gradient-to-br from-smoke-400 via-smoke-800 to-charcoal-400"
       ></div>
       <AssetBadgeGroup :badges="asset.badges" />
     </div>
@@ -39,7 +39,7 @@
           :class="
             cn(
               'm-0 text-sm leading-6 overflow-hidden [-webkit-box-orient:vertical] [-webkit-line-clamp:2] [display:-webkit-box]',
-              'text-stone-100',
+              'text-ash-500',
               'dark-theme:text-slate-100'
             )
           "
@@ -50,11 +50,7 @@
       </div>
       <div
         :class="
-          cn(
-            'flex gap-4 text-xs',
-            'text-stone-400',
-            'dark-theme:text-stone-300'
-          )
+          cn('flex gap-4 text-xs', 'text-stone-400', 'dark-theme:text-ash-300')
         "
       >
         <span v-if="asset.stats.stars" class="flex items-center gap-1">
@@ -106,7 +102,7 @@ const cardClasses = computed(() => {
   ]
 
   if (!props.interactive) {
-    return cn(...base, 'bg-gray-100 dark-theme:bg-charcoal-800')
+    return cn(...base, 'bg-smoke-100 dark-theme:bg-charcoal-800')
   }
 
   return cn(
@@ -114,10 +110,10 @@ const cardClasses = computed(() => {
     'group',
     'appearance-none bg-transparent p-0 m-0',
     'font-inherit text-inherit outline-none cursor-pointer text-left',
-    'bg-gray-100 dark-theme:bg-charcoal-800',
-    'hover:bg-gray-200 dark-theme:hover:bg-charcoal-600',
+    'bg-smoke-100 dark-theme:bg-charcoal-800',
+    'hover:bg-smoke-200 dark-theme:hover:bg-charcoal-600',
     'border-none',
-    'focus:outline-solid outline-blue-100 outline-4'
+    'focus:outline-solid outline-azure-600 outline-4'
   )
 })
 
diff --git a/src/platform/assets/components/AssetFilterBar.stories.ts b/src/platform/assets/components/AssetFilterBar.stories.ts
index a4f48794a..f1d377db7 100644
--- a/src/platform/assets/components/AssetFilterBar.stories.ts
+++ b/src/platform/assets/components/AssetFilterBar.stories.ts
@@ -27,10 +27,10 @@ const meta: Meta<typeof AssetFilterBar> = {
     () => ({
       template: `
         <div class="min-h-screen bg-white dark-theme:bg-charcoal-900">
-          <div class="bg-gray-50 dark-theme:bg-charcoal-800 border-b border-gray-200 dark-theme:border-charcoal-600">
+          <div class="bg-gray-50 dark-theme:bg-charcoal-800 border-b border-smoke-200 dark-theme:border-charcoal-600">
             <story />
           </div>
-          <div class="p-6 text-sm text-gray-600 dark-theme:text-gray-400">
+          <div class="p-6 text-sm text-smoke-600 dark-theme:text-smoke-400">
             <p>Filter bar with proper chrome styling showing contextual background and borders.</p>
           </div>
         </div>
@@ -222,7 +222,7 @@ export const CategorySwitchingReactivity: Story = {
               'px-4 py-2 rounded border',
               selectedCategory === 'all'
                 ? 'bg-blue-500 text-white border-blue-600'
-                : 'bg-white dark-theme:bg-charcoal-700 border-gray-300 dark-theme:border-charcoal-600'
+                : 'bg-white dark-theme:bg-charcoal-700 border-smoke-300 dark-theme:border-charcoal-600'
             ]"
           >
             All (.safetensors + .pt, sd15 + sdxl)
@@ -233,7 +233,7 @@ export const CategorySwitchingReactivity: Story = {
               'px-4 py-2 rounded border',
               selectedCategory === 'checkpoints'
                 ? 'bg-blue-500 text-white border-blue-600'
-                : 'bg-white dark-theme:bg-charcoal-700 border-gray-300 dark-theme:border-charcoal-600'
+                : 'bg-white dark-theme:bg-charcoal-700 border-smoke-300 dark-theme:border-charcoal-600'
             ]"
           >
             Checkpoints (.safetensors, sd15 + sdxl)
@@ -244,7 +244,7 @@ export const CategorySwitchingReactivity: Story = {
               'px-4 py-2 rounded border',
               selectedCategory === 'loras'
                 ? 'bg-blue-500 text-white border-blue-600'
-                : 'bg-white dark-theme:bg-charcoal-700 border-gray-300 dark-theme:border-charcoal-600'
+                : 'bg-white dark-theme:bg-charcoal-700 border-smoke-300 dark-theme:border-charcoal-600'
             ]"
           >
             LoRAs (.pt, sd15 only)
diff --git a/src/platform/assets/components/AssetGrid.vue b/src/platform/assets/components/AssetGrid.vue
index 9d0169fe2..beeeabe39 100644
--- a/src/platform/assets/components/AssetGrid.vue
+++ b/src/platform/assets/components/AssetGrid.vue
@@ -23,7 +23,7 @@
       :class="
         cn(
           'col-span-full flex flex-col items-center justify-center py-16',
-          'text-stone-300 dark-theme:text-stone-200'
+          'text-ash-300 dark-theme:text-ash-800'
         )
       "
     >
@@ -42,7 +42,7 @@
       <i
         class="icon-[lucide--loader]"
         :class="
-          cn('size-12 animate-spin', 'text-stone-300 dark-theme:text-stone-200')
+          cn('size-12 animate-spin', 'text-ash-300 dark-theme:text-ash-800')
         "
       />
     </div>
diff --git a/src/platform/assets/components/MediaImageTop.vue b/src/platform/assets/components/MediaImageTop.vue
index 40adba435..1dfb6a272 100644
--- a/src/platform/assets/components/MediaImageTop.vue
+++ b/src/platform/assets/components/MediaImageTop.vue
@@ -11,7 +11,7 @@
       v-else
       class="flex h-full w-full items-center justify-center bg-zinc-200 dark-theme:bg-zinc-700/50"
     >
-      <i class="pi pi-image text-3xl text-gray-400" />
+      <i class="pi pi-image text-3xl text-smoke-400" />
     </div>
   </div>
 </template>
diff --git a/src/platform/assets/composables/useAssetBrowserDialog.stories.ts b/src/platform/assets/composables/useAssetBrowserDialog.stories.ts
index c72cbccc8..970a4c437 100644
--- a/src/platform/assets/composables/useAssetBrowserDialog.stories.ts
+++ b/src/platform/assets/composables/useAssetBrowserDialog.stories.ts
@@ -91,12 +91,12 @@ const DialogDemoComponent = {
             >
               Change Current Model
             </button>
-            <p class="text-sm text-gray-600 mt-1">
+            <p class="text-sm text-smoke-600 mt-1">
               Opens with "realistic_vision_v5.safetensors" as current value
             </p>
           </div>
 
-          <div class="mt-8 p-4 bg-gray-100 rounded">
+          <div class="mt-8 p-4 bg-smoke-100 rounded">
             <h4 class="font-semibold mb-2">Instructions:</h4>
             <ul class="text-sm space-y-1">
               <li>• Click any button to open the Asset Browser dialog</li>
@@ -154,9 +154,9 @@ export const Demo: Story = {
         <DialogDemoComponent />
 
         <!-- Code Example Section -->
-        <div class="p-8 border-t border-gray-200 bg-gray-50">
+        <div class="p-8 border-t border-smoke-200 bg-gray-50">
           <h2 class="text-2xl font-bold mb-4">Code Example</h2>
-          <p class="text-gray-600 mb-4">
+          <p class="text-smoke-600 mb-4">
             This is how you would use the composable in your component:
           </p>
           <div class="bg-white p-4 rounded-lg border shadow-sm">
@@ -182,7 +182,7 @@ export default {
   }
 }</code></pre>
           </div>
-          <div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded">
+          <div class="mt-4 p-3 bg-blue-50 border border-azure-400 rounded">
             <p class="text-sm text-blue-800">
               <strong>💡 Try it:</strong> Use the interactive buttons above to see this code in action!
             </p>
diff --git a/src/renderer/extensions/vueNodes/VideoPreview.vue b/src/renderer/extensions/vueNodes/VideoPreview.vue
index 07f0b7436..a6ebc2c6b 100644
--- a/src/renderer/extensions/vueNodes/VideoPreview.vue
+++ b/src/renderer/extensions/vueNodes/VideoPreview.vue
@@ -16,11 +16,11 @@
       <!-- Error State -->
       <div
         v-if="videoError"
-        class="flex size-full flex-col items-center justify-center bg-gray-800/50 text-center text-white"
+        class="flex size-full flex-col items-center justify-center bg-smoke-800/50 text-center text-white"
       >
-        <i class="mb-2 icon-[lucide--video-off] h-12 w-12 text-gray-400" />
-        <p class="text-sm text-gray-300">{{ $t('g.videoFailedToLoad') }}</p>
-        <p class="mt-1 text-xs text-gray-400">
+        <i class="mb-2 icon-[lucide--video-off] h-12 w-12 text-smoke-400" />
+        <p class="text-sm text-smoke-300">{{ $t('g.videoFailedToLoad') }}</p>
+        <p class="mt-1 text-xs text-smoke-400">
           {{ getVideoFilename(currentVideoUrl) }}
         </p>
       </div>
@@ -44,7 +44,7 @@
       <div v-if="isHovered" class="actions absolute top-2 right-2 flex gap-1">
         <!-- Download Button -->
         <button
-          class="action-btn cursor-pointer rounded-lg border-0 bg-white p-2 text-black shadow-sm transition-all duration-200 hover:bg-gray-100"
+          class="action-btn cursor-pointer rounded-lg border-0 bg-white p-2 text-black shadow-sm transition-all duration-200 hover:bg-smoke-100"
           :title="$t('g.downloadVideo')"
           :aria-label="$t('g.downloadVideo')"
           @click="handleDownload"
@@ -54,7 +54,7 @@
 
         <!-- Close Button -->
         <button
-          class="action-btn cursor-pointer rounded-lg border-0 bg-white p-2 text-black shadow-sm transition-all duration-200 hover:bg-gray-100"
+          class="action-btn cursor-pointer rounded-lg border-0 bg-white p-2 text-black shadow-sm transition-all duration-200 hover:bg-smoke-100"
           :title="$t('g.removeVideo')"
           :aria-label="$t('g.removeVideo')"
           @click="handleRemove"
@@ -89,7 +89,7 @@
         <span v-if="videoError" class="text-red-400">
           {{ $t('g.errorLoadingVideo') }}
         </span>
-        <span v-else-if="isLoading" class="text-gray-400">
+        <span v-else-if="isLoading" class="text-smoke-400">
           {{ $t('g.loading') }}...
         </span>
         <span v-else>
diff --git a/src/renderer/extensions/vueNodes/components/ImagePreview.vue b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
index 06fd1af2d..209705cfe 100644
--- a/src/renderer/extensions/vueNodes/components/ImagePreview.vue
+++ b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
@@ -16,11 +16,11 @@
       <!-- Error State -->
       <div
         v-if="imageError"
-        class="flex size-full flex-col items-center justify-center bg-gray-800/50 text-center text-white"
+        class="flex size-full flex-col items-center justify-center bg-smoke-800/50 text-center text-white"
       >
-        <i class="mb-2 icon-[lucide--image-off] h-12 w-12 text-gray-400" />
-        <p class="text-sm text-gray-300">{{ $t('g.imageFailedToLoad') }}</p>
-        <p class="mt-1 text-xs text-gray-400">
+        <i class="mb-2 icon-[lucide--image-off] h-12 w-12 text-smoke-400" />
+        <p class="text-sm text-smoke-300">{{ $t('g.imageFailedToLoad') }}</p>
+        <p class="mt-1 text-xs text-smoke-400">
           {{ getImageFilename(currentImageUrl) }}
         </p>
       </div>
@@ -99,7 +99,7 @@
         <span v-if="imageError" class="text-red-400">
           {{ $t('g.errorLoadingImage') }}
         </span>
-        <span v-else-if="isLoading" class="text-gray-400">
+        <span v-else-if="isLoading" class="text-smoke-400">
           {{ $t('g.loading') }}...
         </span>
         <span v-else>
diff --git a/src/renderer/extensions/vueNodes/components/LivePreview.vue b/src/renderer/extensions/vueNodes/components/LivePreview.vue
index 84042cb41..a4b090b19 100644
--- a/src/renderer/extensions/vueNodes/components/LivePreview.vue
+++ b/src/renderer/extensions/vueNodes/components/LivePreview.vue
@@ -7,10 +7,10 @@
       <!-- Error State -->
       <div
         v-if="imageError"
-        class="flex h-full w-full flex-col items-center justify-center text-center text-pure-white"
+        class="text-pure-white flex h-full w-full flex-col items-center justify-center text-center"
       >
-        <i-lucide:image-off class="mb-1 size-8 text-gray-500" />
-        <p class="text-xs text-gray-400">{{ $t('g.imageFailedToLoad') }}</p>
+        <i-lucide:image-off class="mb-1 size-8 text-smoke-500" />
+        <p class="text-xs text-smoke-400">{{ $t('g.imageFailedToLoad') }}</p>
       </div>
 
       <!-- Main Image -->
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue
index afa290e48..6d31626a1 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-1">
     <div
-      class="max-h-[48rem] rounded border border-gray-300 p-4 dark-theme:border-gray-600"
+      class="max-h-[48rem] rounded border border-smoke-300 p-4 dark-theme:border-smoke-600"
     >
       <Chart
         :type="chartType"
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue
index 5ee2f167f..8ec4c2087 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue
@@ -45,7 +45,7 @@
       <button
         v-if="isRecording"
         :title="t('g.stopRecording', 'Stop Recording')"
-        class="flex size-8 animate-pulse items-center justify-center rounded-full border-0 bg-gray-500/33 transition-colors"
+        class="flex size-8 animate-pulse items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
         @click="handleStopRecording"
       >
         <div class="size-2.5 rounded-sm bg-[#C02323]" />
@@ -54,7 +54,7 @@
       <button
         v-else-if="!isRecording && recordedURL && !isPlaying"
         :title="t('g.playRecording') || 'Play Recording'"
-        class="flex size-8 items-center justify-center rounded-full border-0 bg-gray-500/33 transition-colors"
+        class="flex size-8 items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
         @click="handlePlayRecording"
       >
         <i
@@ -65,7 +65,7 @@
       <button
         v-else-if="isPlaying"
         :title="t('g.stopPlayback') || 'Stop Playback'"
-        class="flex size-8 items-center justify-center rounded-full border-0 bg-gray-500/33 transition-colors"
+        class="flex size-8 items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
         @click="handleStopPlayback"
       >
         <i
diff --git a/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue b/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
index ccdf6e47a..550fb8aef 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
@@ -29,11 +29,11 @@
         >
           <i
             v-if="!isPlaying"
-            class="icon-[lucide--play] size-4 text-gray-600 dark-theme:text-gray-800"
+            class="icon-[lucide--play] size-4 text-smoke-600 dark-theme:text-smoke-800"
           />
           <i
             v-else
-            class="icon-[lucide--pause] size-4 text-gray-600 dark-theme:text-gray-800"
+            class="icon-[lucide--pause] size-4 text-smoke-600 dark-theme:text-smoke-800"
           />
         </div>
 
@@ -47,10 +47,10 @@
 
       <!-- Progress Bar -->
       <div
-        class="relative h-0.5 flex-1 rounded-full bg-gray-300 dark-theme:bg-stone-200"
+        class="relative h-0.5 flex-1 rounded-full bg-smoke-300 dark-theme:bg-ash-800"
       >
         <div
-          class="absolute top-0 left-0 h-full rounded-full bg-gray-600 transition-all dark-theme:bg-white/50"
+          class="absolute top-0 left-0 h-full rounded-full bg-smoke-600 transition-all dark-theme:bg-white/50"
           :style="{ width: `${progressPercentage}%` }"
         />
         <input
@@ -77,15 +77,15 @@
         >
           <i
             v-if="showVolumeTwo"
-            class="icon-[lucide--volume-2] size-4 text-gray-600 dark-theme:text-gray-800"
+            class="icon-[lucide--volume-2] size-4 text-smoke-600 dark-theme:text-smoke-800"
           />
           <i
             v-else-if="showVolumeOne"
-            class="icon-[lucide--volume-1] size-4 text-gray-600 dark-theme:text-gray-800"
+            class="icon-[lucide--volume-1] size-4 text-smoke-600 dark-theme:text-smoke-800"
           />
           <i
             v-else
-            class="icon-[lucide--volume-x] size-4 text-gray-600 dark-theme:text-gray-800"
+            class="icon-[lucide--volume-x] size-4 text-smoke-600 dark-theme:text-smoke-800"
           />
         </div>
 
@@ -100,7 +100,7 @@
           @click="toggleOptionsMenu"
         >
           <i
-            class="icon-[lucide--more-vertical] size-4 text-gray-600 dark-theme:text-gray-800"
+            class="icon-[lucide--more-vertical] size-4 text-smoke-600 dark-theme:text-smoke-800"
           />
         </div>
       </div>
diff --git a/src/scripts/ui/menu/menu.css b/src/scripts/ui/menu/menu.css
index 31404df5a..601331232 100644
--- a/src/scripts/ui/menu/menu.css
+++ b/src/scripts/ui/menu/menu.css
@@ -1,7 +1,3 @@
-.mdi.rotate270::before {
-  transform: rotate(270deg);
-}
-
 /* Generic */
 .comfyui-button {
   display: flex;
@@ -121,177 +117,4 @@
   border-radius: 0;
 }
 
-/* Menu */
-.comfyui-menu .mdi::before {
-  font-size: 18px;
-}
 
-.comfyui-menu .comfyui-button {
-  background: var(--comfy-input-bg);
-  color: var(--fg-color);
-  white-space: nowrap;
-}
-
-.comfyui-menu .comfyui-button:not(:disabled):hover {
-  background: var(--border-color);
-  color: var(--content-fg);
-}
-
-.comfyui-menu .comfyui-split-button-popup > .comfyui-button {
-  border-radius: 0;
-  background-color: transparent;
-}
-
-.comfyui-menu .comfyui-split-button-popup > .comfyui-button:not(:disabled):hover {
-  background-color: var(--comfy-input-bg);
-}
-
-.comfyui-menu .comfyui-split-button-popup.left {
-  border-top-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-}
-
-.comfyui-menu .comfyui-button.popup-open {
-  background-color: var(--content-bg);
-  color: var(--content-fg);
-}
-
-.comfyui-menu-push {
-  margin-left: -0.8em;
-  flex: auto;
-}
-
-/** Send to workflow widget selection dialog */
-.comfy-widget-selection-dialog {
-  border: none;
-}
-
-.comfy-widget-selection-dialog div {
-  color: var(--fg-color);
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-.comfy-widget-selection-dialog h2 {
-  margin-top: 0;
-}
-
-.comfy-widget-selection-dialog section {
-  width: fit-content;
-  display: flex;
-  flex-direction: column;
-}
-
-.comfy-widget-selection-item {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-}
-
-.comfy-widget-selection-item span {
-  margin-right: auto;
-}
-
-.comfy-widget-selection-item span::before {
-  content: '#' attr(data-id);
-  opacity: 0.5;
-  margin-right: 5px;
-}
-
-.comfy-modal .comfy-widget-selection-item button {
-  font-size: 1em;
-}
-
-/***** Responsive *****/
-.lg.comfyui-menu .lt-lg-show {
-  display: none !important;
-}
-.comfyui-menu:not(.lg) .nlg-hide {
-  display: none !important;
-}
-/** Large screen */
-.lg.comfyui-menu>.comfyui-menu-mobile-collapse .comfyui-button span,
-.lg.comfyui-menu>.comfyui-menu-mobile-collapse.comfyui-button span {
-  display: none;
-}
-.lg.comfyui-menu>.comfyui-menu-mobile-collapse .comfyui-popup .comfyui-button span {
-  display: unset;
-}
-
-/** Non large screen */
-.lt-lg.comfyui-menu {
-  flex-wrap: wrap;
-}
-
-.lt-lg.comfyui-menu > *:not(.comfyui-menu-mobile-collapse) {
-  order: 1;
-}
-
-.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse {
-  order: 9999;
-  width: 100%;
-}
-
-.comfyui-body-bottom .lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse {
-  order: -1;
-}
-
-.comfyui-body-bottom .lt-lg.comfyui-menu > .comfyui-menu-button {
-  top: unset;
-  bottom: 4px;
-}
-
-.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse.comfyui-button-group {
-  flex-wrap: wrap;
-}
-
-.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse .comfyui-button,
-.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse.comfyui-button {
-  padding: 10px;
-}
-.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse .comfyui-button,
-.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse .comfyui-button-wrapper {
-  width: 100%;
-}
-
-.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse .comfyui-popup {
-  position: static;
-  background-color: var(--comfy-input-bg);
-  max-width: unset;
-  max-height: 50vh;
-  overflow: auto;
-}
-
-.lt-lg.comfyui-menu:not(.expanded) > .comfyui-menu-mobile-collapse {
-  display: none;
-}
-
-.lt-lg .comfyui-menu-button {
-  position: absolute;
-  top: 4px;
-  right: 8px;
-}
-
-.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse .comfyui-view-list-popup {
-  border-radius: 0;
-}
-
-.lt-lg.comfyui-menu .comfyui-workflows-popup {
-  width: 100vw;
-}
-
-/** Small */
-.lt-md .comfyui-workflows-button-inner {
-  width: unset !important;
-}
-.lt-md  .comfyui-workflows-label {
-  display: none;
-}
-
-/** Extra small */
-.lt-sm .comfyui-interrupt-button {
-  margin-right: 45px;
-}
-.comfyui-body-bottom .lt-sm.comfyui-menu > .comfyui-menu-button{
-  bottom: 41px;
-}