diff --git a/eslint.config.ts b/eslint.config.ts
index 0bc70372f1..c7019b8624 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -131,8 +131,12 @@ export default defineConfig([
       'no-console': ['error', { allow: ['warn', 'error'] }],
       'tailwindcss/no-custom-classname': 'off', // TODO: fix
       'vue/no-v-html': 'off',
-      // Enforce dark-theme: instead of dark: prefix
-      'vue/no-restricted-class': ['error', '/^dark:/'],
+      // Enforce semantic CSS tokens:
+      'vue/no-restricted-class': [
+        'error',
+        '/^dark:/',
+        '/^(bg|text|border|fill|stroke)-\\[#/'
+      ],
       'vue/multi-word-component-names': 'off', // TODO: fix
       'vue/no-template-shadow': 'off', // TODO: fix
       'vue/match-component-import-name': 'error',
diff --git a/packages/design-system/src/css/style.css b/packages/design-system/src/css/style.css
index c1cb42ce55..4b95f2a895 100644
--- a/packages/design-system/src/css/style.css
+++ b/packages/design-system/src/css/style.css
@@ -200,6 +200,81 @@
   --text-secondary: var(--color-stone-100);
   --text-primary: var(--color-charcoal-700);
   --input-surface: rgba(0, 0, 0, 0.15);
+
+  /* Semantic tokens from tokens.csv - Light Mode */
+  --text-contrast: var(--color-pure-white);
+  --text-danger-error: var(--color-danger-200);
+  --text-warning: var(--color-warning-200);
+  --text-success: var(--color-success-200);
+  --text-blue: var(--color-blue-100);
+  --text-highlight: var(--color-blue-selection);
+  --accent-secondary: var(--color-stone-100);
+  --accent-contrast: var(--color-pure-white);
+  --accent-danger-error: var(--color-danger-200);
+  --accent-warning: var(--color-warning-200);
+  --accent-success: var(--color-success-200);
+  --accent-blue: var(--color-blue-100);
+  --accent-white: var(--color-pure-white);
+  --button-surface: var(--color-gray-100);
+  --button-surface-hovered: var(--color-gray-300);
+  --button-surface-danger: var(--color-danger-200);
+  --button-surface-blue: var(--color-blue-200);
+  --button-surface-contrast: var(--color-pure-black);
+  --button-bkg-secondary: var(--color-gray-400);
+  --button-bkg-info: var(--color-slate-100);
+  --button-icon: var(--color-stone-200);
+  --button-icon-disabled: var(--color-alpha-gray-500-50);
+  --interface-canvas-background: var(--color-gray-400);
+  --interface-icon: var(--color-slate-100);
+  --interface-panel-component-surface-hovered: var(--color-gray-200);
+  --interface-panel-component-surface-selected: var(--color-gray-400);
+  --interface-panel-card-surface: var(--color-gray-100);
+  --interface-panel-card-surface-hover: var(--color-gray-200);
+  --interface-panel-job-progress-primary: var(--color-blue-400);
+  --interface-panel-job-progress-secondary: var(--color-blue-selection);
+  --interface-menu-surface: var(--color-pure-white);
+  --interface-menu-stroke: var(--color-gray-400);
+  --interface-menu-keybind-surface-blue: var(--color-blue-400);
+  --interface-workflow-tab-surface: var(--color-gray-300);
+  --interface-workflow-tab-surface-active: var(--color-interface-panel-surface);
+  --interface-workflow-tab-surface-hovered: var(--color-gray-100);
+  --interface-workflow-tab-stroke: var(--color-gray-500);
+  --interface-workflow-tab-button-highlight: var(--color-gray-400);
+  --node-surface: var(--color-pure-white);
+  --node-component-hovered: var(--color-gray-300);
+  --node-component-selected: var(--color-gray-500);
+  --node-component-highlighted: var(--color-stone-100);
+  --node-ring-hover: var(--color-alpha-gray-500-50);
+  --node-bypass-surface: color-mix(in srgb, #ceaac9 60%, transparent);
+  --node-seed-control-surface: var(--color-alpha-gray-500-50);
+  --node-seed-control-icon: var(--color-blue-100);
+  --node-button-filled-primary-border: var(--color-sand-100);
+  --node-button-filled-primary-bkg-hover: var(--color-pure-white);
+  --node-button-filled-primary-bkg-selected: var(--color-pure-white);
+  --node-button-filled-primary-border-hover: var(--color-sand-100);
+  --node-button-filled-info-border-hover: var(--color-slate-300);
+  --node-button-outline-primary-border: var(--color-sand-300);
+  --node-button-outline-secondary-border: var(--color-sand-100);
+  --node-button-outline-secondary-border-hover: var(--color-sand-300);
+  --node-note-default-surface: var(--color-sand-100);
+  --node-note-scrollbar-track: var(--color-alpha-gray-500-50);
+  --node-note-text-primary: var(--color-charcoal-700);
+  --modal-background: var(--color-gray-200);
+  --modal-button-surface: var(--color-ivory-100);
+  --modal-button-surface-hovered: var(--color-gray-400);
+  --modal-contrast-surface: var(--color-charcoal-500);
+  --modal-panel-surface: var(--color-ivory-100);
+  --modal-panel-component-surface-hovered: var(--color-gray-200);
+  --modal-panel-component-surface-selected: var(--color-gray-300);
+  --modal-card-surface: var(--color-ivory-100);
+  --modal-card-surface-hovered: var(--color-gray-400);
+  --modal-card-button-surface: var(--color-gray-300);
+  --modal-card-button-surface-hovered: var(--color-gray-500);
+  --modal-card-tag-surface: color-mix(in srgb, var(--color-gray-400) 40%, transparent);
+  --modal-card-stroke-highlight: var(--accent-primary);
+  --modal-menu-surface: var(--color-pure-white);
+  --tooltip-background: var(--color-pure-white);
+  --tooltip-border: var(--color-sand-100);
 }
 
 .dark-theme {
@@ -246,6 +321,81 @@
   --text-secondary: var(--color-slate-100);
   --text-primary: var(--color-pure-white);
   --input-surface: rgba(130, 130, 130, 0.1);
+
+  /* Semantic tokens from tokens.csv - Dark Mode */
+  --text-contrast: var(--color-pure-black);
+  --text-danger-error: var(--color-danger-100);
+  --text-warning: var(--color-warning-100);
+  --text-success: var(--color-success-100);
+  --text-blue: var(--color-blue-100);
+  --text-highlight: var(--color-blue-selection);
+  --accent-secondary: var(--color-slate-100);
+  --accent-contrast: var(--color-charcoal-700);
+  --accent-danger-error: var(--color-danger-100);
+  --accent-warning: var(--color-warning-100);
+  --accent-success: var(--color-success-100);
+  --accent-blue: var(--color-blue-100);
+  --accent-white: var(--color-pure-white);
+  --button-surface: var(--color-charcoal-500);
+  --button-surface-hovered: var(--color-charcoal-300);
+  --button-surface-danger: var(--color-danger-100);
+  --button-surface-blue: var(--color-blue-100);
+  --button-surface-contrast: var(--color-pure-white);
+  --button-bkg-secondary: var(--color-pure-black);
+  --button-bkg-info: var(--color-slate-300);
+  --button-icon: var(--color-gray-800);
+  --button-icon-disabled: var(--color-alpha-stone-100-20);
+  --interface-canvas-background: var(--color-pure-black);
+  --interface-icon: var(--color-slate-100);
+  --interface-panel-component-surface-hovered: var(--color-charcoal-600);
+  --interface-panel-component-surface-selected: var(--color-charcoal-400);
+  --interface-panel-card-surface: var(--color-charcoal-600);
+  --interface-panel-card-surface-hover: var(--color-charcoal-400);
+  --interface-panel-job-progress-primary: var(--color-blue-300);
+  --interface-panel-job-progress-secondary: var(--color-blue-selection);
+  --interface-menu-surface: var(--color-charcoal-800);
+  --interface-menu-stroke: var(--color-stone-200);
+  --interface-menu-keybind-surface-blue: var(--color-blue-300);
+  --interface-workflow-tab-surface: var(--color-charcoal-800);
+  --interface-workflow-tab-surface-active: var(--color-charcoal-400);
+  --interface-workflow-tab-surface-hovered: var(--color-charcoal-600);
+  --interface-workflow-tab-stroke: var(--color-charcoal-400);
+  --interface-workflow-tab-button-highlight: var(--color-charcoal-200);
+  --node-surface: var(--color-charcoal-800);
+  --node-component-hovered: var(--color-charcoal-400);
+  --node-component-selected: var(--color-charcoal-200);
+  --node-component-highlighted: var(--color-slate-100);
+  --node-ring-hover: color-mix(in srgb, var(--color-gray-500) 20%, transparent);
+  --node-bypass-surface: color-mix(in srgb, #6a246a 60%, transparent);
+  --node-seed-control-surface: var(--color-blue-selection);
+  --node-seed-control-icon: var(--color-blue-100);
+  --node-button-filled-primary-border: var(--color-charcoal-600);
+  --node-button-filled-primary-bkg-hover: var(--color-charcoal-600);
+  --node-button-filled-primary-bkg-selected: var(--color-charcoal-600);
+  --node-button-filled-primary-border-hover: var(--color-slate-300);
+  --node-button-filled-info-border-hover: var(--color-slate-100);
+  --node-button-outline-primary-border: var(--color-slate-100);
+  --node-button-outline-secondary-border: var(--color-stone-100);
+  --node-button-outline-secondary-border-hover: var(--color-pure-white);
+  --node-note-default-surface: var(--color-sand-200);
+  --node-note-scrollbar-track: var(--color-alpha-stone-100-20);
+  --node-note-text-primary: var(--color-charcoal-700);
+  --modal-background: var(--color-charcoal-800);
+  --modal-button-surface: var(--color-charcoal-400);
+  --modal-button-surface-hovered: var(--color-charcoal-300);
+  --modal-contrast-surface: var(--color-ivory-100);
+  --modal-panel-surface: var(--color-charcoal-600);
+  --modal-panel-component-surface-hovered: var(--color-charcoal-400);
+  --modal-panel-component-surface-selected: var(--color-charcoal-300);
+  --modal-card-surface: var(--color-charcoal-600);
+  --modal-card-surface-hovered: var(--color-charcoal-400);
+  --modal-card-button-surface: var(--color-charcoal-300);
+  --modal-card-button-surface-hovered: var(--color-charcoal-200);
+  --modal-card-tag-surface: color-mix(in srgb, var(--color-gray-400) 40%, transparent);
+  --modal-card-stroke-highlight: var(--accent-primary);
+  --modal-menu-surface: var(--color-charcoal-400);
+  --tooltip-background: var(--color-charcoal-800);
+  --tooltip-border: var(--color-slate-300);
 }
 
 @theme inline {
@@ -303,6 +453,81 @@
   --color-text-secondary: var(--text-secondary);
   --color-text-primary: var(--text-primary);
   --color-input-surface: var(--input-surface);
+
+  /* Tailwind mappings for new semantic tokens */
+  --color-text-contrast: var(--text-contrast);
+  --color-text-danger-error: var(--text-danger-error);
+  --color-text-warning: var(--text-warning);
+  --color-text-success: var(--text-success);
+  --color-text-blue: var(--text-blue);
+  --color-text-highlight: var(--text-highlight);
+  --color-accent-secondary: var(--accent-secondary);
+  --color-accent-contrast: var(--accent-contrast);
+  --color-accent-danger-error: var(--accent-danger-error);
+  --color-accent-warning: var(--accent-warning);
+  --color-accent-success: var(--accent-success);
+  --color-accent-blue: var(--accent-blue);
+  --color-accent-white: var(--accent-white);
+  --color-button-surface: var(--button-surface);
+  --color-button-surface-hovered: var(--button-surface-hovered);
+  --color-button-surface-danger: var(--button-surface-danger);
+  --color-button-surface-blue: var(--button-surface-blue);
+  --color-button-surface-contrast: var(--button-surface-contrast);
+  --color-button-bkg-secondary: var(--button-bkg-secondary);
+  --color-button-bkg-info: var(--button-bkg-info);
+  --color-button-icon: var(--button-icon);
+  --color-button-icon-disabled: var(--button-icon-disabled);
+  --color-interface-canvas-background: var(--interface-canvas-background);
+  --color-interface-icon: var(--interface-icon);
+  --color-interface-panel-component-surface-hovered: var(--interface-panel-component-surface-hovered);
+  --color-interface-panel-component-surface-selected: var(--interface-panel-component-surface-selected);
+  --color-interface-panel-card-surface: var(--interface-panel-card-surface);
+  --color-interface-panel-card-surface-hover: var(--interface-panel-card-surface-hover);
+  --color-interface-panel-job-progress-primary: var(--interface-panel-job-progress-primary);
+  --color-interface-panel-job-progress-secondary: var(--interface-panel-job-progress-secondary);
+  --color-interface-menu-surface: var(--interface-menu-surface);
+  --color-interface-menu-stroke: var(--interface-menu-stroke);
+  --color-interface-menu-keybind-surface-blue: var(--interface-menu-keybind-surface-blue);
+  --color-interface-workflow-tab-surface: var(--interface-workflow-tab-surface);
+  --color-interface-workflow-tab-surface-active: var(--interface-workflow-tab-surface-active);
+  --color-interface-workflow-tab-surface-hovered: var(--interface-workflow-tab-surface-hovered);
+  --color-interface-workflow-tab-stroke: var(--interface-workflow-tab-stroke);
+  --color-interface-workflow-tab-button-highlight: var(--interface-workflow-tab-button-highlight);
+  --color-node-surface: var(--node-surface);
+  --color-node-component-hovered: var(--node-component-hovered);
+  --color-node-component-selected: var(--node-component-selected);
+  --color-node-component-highlighted: var(--node-component-highlighted);
+  --color-node-ring-hover: var(--node-ring-hover);
+  --color-node-bypass-surface: var(--node-bypass-surface);
+  --color-node-seed-control-surface: var(--node-seed-control-surface);
+  --color-node-seed-control-icon: var(--node-seed-control-icon);
+  --color-node-button-filled-primary-border: var(--node-button-filled-primary-border);
+  --color-node-button-filled-primary-bkg-hover: var(--node-button-filled-primary-bkg-hover);
+  --color-node-button-filled-primary-bkg-selected: var(--node-button-filled-primary-bkg-selected);
+  --color-node-button-filled-primary-border-hover: var(--node-button-filled-primary-border-hover);
+  --color-node-button-filled-info-border-hover: var(--node-button-filled-info-border-hover);
+  --color-node-button-outline-primary-border: var(--node-button-outline-primary-border);
+  --color-node-button-outline-secondary-border: var(--node-button-outline-secondary-border);
+  --color-node-button-outline-secondary-border-hover: var(--node-button-outline-secondary-border-hover);
+  --color-node-note-default-surface: var(--node-note-default-surface);
+  --color-node-note-scrollbar-track: var(--node-note-scrollbar-track);
+  --color-node-note-text-primary: var(--node-note-text-primary);
+  --color-modal-background: var(--modal-background);
+  --color-modal-button-surface: var(--modal-button-surface);
+  --color-modal-button-surface-hovered: var(--modal-button-surface-hovered);
+  --color-modal-contrast-surface: var(--modal-contrast-surface);
+  --color-modal-panel-surface: var(--modal-panel-surface);
+  --color-modal-panel-component-surface-hovered: var(--modal-panel-component-surface-hovered);
+  --color-modal-panel-component-surface-selected: var(--modal-panel-component-surface-selected);
+  --color-modal-card-surface: var(--modal-card-surface);
+  --color-modal-card-surface-hovered: var(--modal-card-surface-hovered);
+  --color-modal-card-button-surface: var(--modal-card-button-surface);
+  --color-modal-card-button-surface-hovered: var(--modal-card-button-surface-hovered);
+  --color-modal-card-tag-surface: var(--modal-card-tag-surface);
+  --color-modal-card-stroke-highlight: var(--modal-card-stroke-highlight);
+  --color-modal-menu-surface: var(--modal-menu-surface);
+  --color-tooltip-background: var(--tooltip-background);
+  --color-tooltip-border: var(--tooltip-border);
 }
 
 @custom-variant dark-theme {
diff --git a/src/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue b/src/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue
index 1481b012f7..1954ad18a6 100644
--- a/src/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue
+++ b/src/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue
@@ -7,7 +7,7 @@
         class="flex flex-col"
       >
         <h3
-          class="subcategory-title mb-4 text-xs font-bold tracking-wide text-surface-600 uppercase dark-theme:text-surface-400"
+          class="subcategory-title mb-4 text-xs font-bold tracking-wide text-text-secondary uppercase"
         >
           {{ getSubcategoryTitle(subcategory) }}
         </h3>
@@ -16,7 +16,7 @@
           <div
             v-for="command in subcategoryCommands"
             :key="command.id"
-            class="shortcut-item flex items-center justify-between rounded py-2 transition-colors duration-200 hover:bg-surface-100 dark-theme:hover:bg-surface-700"
+            class="shortcut-item flex items-center justify-between rounded py-2 transition-colors duration-200 hover:bg-interface-panel-component-surface-hovered"
           >
             <div class="shortcut-info grow pr-4">
               <div class="shortcut-name text-sm font-medium">
@@ -32,7 +32,7 @@
                 <span
                   v-for="key in command.keybinding!.combo.getKeySequences()"
                   :key="key"
-                  class="key-badge min-w-6 rounded border bg-surface-200 px-2 py-1 text-center font-mono text-xs dark-theme:bg-surface-600"
+                  class="key-badge min-w-6 rounded border bg-interface-menu-keybind-surface-default px-2 py-1 text-center font-mono text-xs"
                 >
                   {{ formatKey(key) }}
                 </span>
diff --git a/src/components/button/IconGroup.vue b/src/components/button/IconGroup.vue
index 9e73edfab4..b10fd57b56 100644
--- a/src/components/button/IconGroup.vue
+++ b/src/components/button/IconGroup.vue
@@ -10,8 +10,8 @@ import { cn } from '@/utils/tailwindUtil'
 const iconGroupClasses = cn(
   'flex justify-center items-center shrink-0',
   'outline-hidden border-none p-0 rounded-lg',
-  'bg-white dark-theme:bg-zinc-700',
-  'text-neutral-950 dark-theme:text-white',
+  'bg-button-surface',
+  'text-text-primary',
   'transition-all duration-200',
   'cursor-pointer'
 )
diff --git a/src/components/button/MoreButton.vue b/src/components/button/MoreButton.vue
index 2cdf394fef..257d43441d 100644
--- a/src/components/button/MoreButton.vue
+++ b/src/components/button/MoreButton.vue
@@ -65,10 +65,10 @@ const pt = computed(() => ({
   content: {
     class: cn(
       'mt-1 rounded-lg',
-      'bg-white dark-theme:bg-zinc-800',
-      'text-neutral dark-theme:text-white',
+      'bg-interface-menu-surface',
+      'text-text-primary',
       'shadow-lg',
-      'border border-zinc-200 dark-theme:border-zinc-700'
+      'border border-interface-menu-stroke'
     )
   }
 }))
diff --git a/src/components/card/CardContainer.vue b/src/components/card/CardContainer.vue
index 7b0822aec7..6639a89507 100644
--- a/src/components/card/CardContainer.vue
+++ b/src/components/card/CardContainer.vue
@@ -47,8 +47,8 @@ const containerClasses = computed(() => {
   // Variant styles
   const variantClasses = {
     default: cn(
-      hasBackground && 'bg-white dark-theme:bg-zinc-800',
-      hasBorder && 'border border-zinc-200 dark-theme:border-zinc-700',
+      hasBackground && 'bg-interface-panel-card-surface',
+      hasBorder && 'border border-interface-stroke',
       hasShadow && 'shadow-sm',
       hasCursor && 'cursor-pointer'
     ),
@@ -57,9 +57,9 @@ const containerClasses = computed(() => {
       'p-2 transition-colors duration-200'
     ),
     outline: cn(
-      hasBorder && 'border-2 border-zinc-300 dark-theme:border-zinc-600',
+      hasBorder && 'border-2 border-interface-stroke',
       hasCursor && 'cursor-pointer',
-      'hover:border-zinc-400 dark-theme:hover:border-zinc-500 transition-colors'
+      'hover:border-interface-panel-component-surface-hovered transition-colors'
     )
   }
 
diff --git a/src/components/card/CardDescription.vue b/src/components/card/CardDescription.vue
index 0b5e2de5c2..12af3b1f21 100644
--- a/src/components/card/CardDescription.vue
+++ b/src/components/card/CardDescription.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="line-clamp-2 h-7 text-xs text-zinc-500 dark-theme:text-zinc-400">
+  <div class="line-clamp-2 h-7 text-xs text-text-secondary">
     <slot></slot>
   </div>
 </template>
diff --git a/src/components/chip/SquareChip.vue b/src/components/chip/SquareChip.vue
index 6a47bb643a..f12340f5f7 100644
--- a/src/components/chip/SquareChip.vue
+++ b/src/components/chip/SquareChip.vue
@@ -19,7 +19,7 @@ const baseClasses =
 
 const variantStyles = {
   dark: 'bg-zinc-500/40 text-white/90',
-  light: 'backdrop-blur-[2px] bg-white/50 text-zinc-900 dark-theme:text-white'
+  light: 'backdrop-blur-[2px] bg-white/50 text-text-primary'
 }
 
 const chipClasses = computed(() => {
diff --git a/src/components/common/FormImageUpload.vue b/src/components/common/FormImageUpload.vue
index 0e7703f13a..a348db8333 100644
--- a/src/components/common/FormImageUpload.vue
+++ b/src/components/common/FormImageUpload.vue
@@ -3,7 +3,7 @@
     <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-button-surface': !modelValue }"
       >
         <img
           v-if="modelValue"
diff --git a/src/components/common/LazyImage.vue b/src/components/common/LazyImage.vue
index 0716beee75..c5c2f8db7f 100644
--- a/src/components/common/LazyImage.vue
+++ b/src/components/common/LazyImage.vue
@@ -23,7 +23,7 @@
     />
     <div
       v-if="hasError"
-      class="absolute inset-0 flex items-center justify-center bg-surface-50 text-muted dark-theme:bg-surface-800"
+      class="absolute inset-0 flex items-center justify-center bg-interface-panel-surface text-muted"
     >
       <img
         src="/assets/images/default-template.png"
diff --git a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue b/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
index c64a8e19d0..6f6731e15b 100644
--- a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
+++ b/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
@@ -144,7 +144,7 @@
             size="compact"
             variant="ghost"
             rounded="lg"
-            class="hover:bg-white dark-theme:hover:bg-zinc-800"
+            class="hover:bg-interface-panel-surface"
           >
             <template #top>
               <CardTop ratio="landscape">
@@ -178,7 +178,7 @@
             variant="ghost"
             rounded="lg"
             :data-testid="`template-workflow-${template.name}`"
-            class="hover:bg-white dark-theme:hover:bg-zinc-800"
+            class="hover:bg-interface-panel-surface"
             @mouseenter="hoveredTemplate = template.name"
             @mouseleave="hoveredTemplate = null"
             @click="onLoadWorkflow(template)"
@@ -323,7 +323,7 @@
             size="compact"
             variant="ghost"
             rounded="lg"
-            class="hover:bg-white dark-theme:hover:bg-zinc-800"
+            class="hover:bg-interface-panel-surface"
           >
             <template #top>
               <CardTop ratio="square">
@@ -362,10 +362,7 @@
       </div>
 
       <!-- Results Summary -->
-      <div
-        v-if="!isLoading"
-        class="mt-6 px-6 text-sm text-neutral-600 dark-theme:text-neutral-400"
-      >
+      <div v-if="!isLoading" class="mt-6 px-6 text-sm text-text-secondary">
         {{
           $t('templateWorkflows.resultsCount', {
             count: filteredCount,
diff --git a/src/components/dialog/content/MissingCoreNodesMessage.vue b/src/components/dialog/content/MissingCoreNodesMessage.vue
index 0489ac20b5..0bfd074f19 100644
--- a/src/components/dialog/content/MissingCoreNodesMessage.vue
+++ b/src/components/dialog/content/MissingCoreNodesMessage.vue
@@ -24,16 +24,14 @@
         :key="version"
         class="ml-4"
       >
-        <div
-          class="text-sm font-medium text-surface-600 dark-theme:text-surface-400"
-        >
+        <div class="text-sm font-medium text-text-secondary">
           {{
             $t('loadWorkflowWarning.coreNodesFromVersion', {
               version: version || 'unknown'
             })
           }}
         </div>
-        <div class="ml-4 text-sm text-surface-500 dark-theme:text-surface-500">
+        <div class="ml-4 text-sm text-text-secondary">
           {{ getUniqueNodeNames(nodes).join(', ') }}
         </div>
       </div>
diff --git a/src/components/graph/selectionToolbox/BypassButton.test.ts b/src/components/graph/selectionToolbox/BypassButton.test.ts
index c966e180a0..9fdcd971f8 100644
--- a/src/components/graph/selectionToolbox/BypassButton.test.ts
+++ b/src/components/graph/selectionToolbox/BypassButton.test.ts
@@ -84,18 +84,6 @@ describe('BypassButton', () => {
     )
   })
 
-  it('should show normal styling when node is not bypassed', () => {
-    const normalNode = { ...mockLGraphNode, mode: LGraphEventMode.ALWAYS }
-    canvasStore.selectedItems = [normalNode] as any
-
-    const wrapper = mountComponent()
-    const button = wrapper.find('button')
-
-    expect(button.classes()).not.toContain(
-      'dark-theme:[&:not(:active)]:!bg-[#262729]'
-    )
-  })
-
   it('should show bypassed styling when node is bypassed', async () => {
     const bypassedNode = { ...mockLGraphNode, mode: LGraphEventMode.BYPASS }
     canvasStore.selectedItems = [bypassedNode] as any
diff --git a/src/components/graph/selectionToolbox/BypassButton.vue b/src/components/graph/selectionToolbox/BypassButton.vue
index 84882a2858..91a699288e 100644
--- a/src/components/graph/selectionToolbox/BypassButton.vue
+++ b/src/components/graph/selectionToolbox/BypassButton.vue
@@ -7,7 +7,7 @@
     severity="secondary"
     text
     data-testid="bypass-button"
-    class="hover:bg-[#E7E6E6] hover:dark-theme:bg-charcoal-600"
+    class="hover:bg-button-hover-surface"
     @click="toggleBypass"
   >
     <template #icon>
diff --git a/src/components/graph/selectionToolbox/ExecuteButton.vue b/src/components/graph/selectionToolbox/ExecuteButton.vue
index e37568a4d7..9d45753a35 100644
--- a/src/components/graph/selectionToolbox/ExecuteButton.vue
+++ b/src/components/graph/selectionToolbox/ExecuteButton.vue
@@ -4,7 +4,7 @@
       value: t('selectionToolbox.executeButton.tooltip'),
       showDelay: 1000
     }"
-    class="size-8 bg-[#31B9F4] !p-0 dark-theme:bg-[#0B8CE9]"
+    class="size-8 bg-button-surface-blue !p-0"
     text
     @mouseenter="() => handleMouseEnter()"
     @mouseleave="() => handleMouseLeave()"
diff --git a/src/components/graph/selectionToolbox/MenuOptionItem.vue b/src/components/graph/selectionToolbox/MenuOptionItem.vue
index 57e6595d79..d51dac3fc2 100644
--- a/src/components/graph/selectionToolbox/MenuOptionItem.vue
+++ b/src/components/graph/selectionToolbox/MenuOptionItem.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    v-if="option.type === 'divider'"
-    class="my-1 h-px bg-gray-200 dark-theme:bg-zinc-700"
-  />
+  <div v-if="option.type === 'divider'" class="my-1 h-px bg-interface-stroke" />
   <div
     v-else
     role="button"
@@ -27,10 +24,8 @@
       :severity="option.badge === 'new' ? 'info' : 'secondary'"
       :value="t(option.badge)"
       :class="{
-        'rounded-4xl bg-[#31B9F4] dark-theme:bg-[#0B8CE9]':
-          option.badge === 'new',
-        'rounded-4xl bg-[#9C9EAB] dark-theme:bg-[#000]':
-          option.badge === 'deprecated',
+        'rounded-4xl bg-button-surface-blue': option.badge === 'new',
+        'rounded-4xl bg-button-bkg-secondary': option.badge === 'deprecated',
         'h-4 gap-2.5 px-1 text-[9px] text-white uppercase': true
       }"
     />
diff --git a/src/components/graph/selectionToolbox/NodeOptions.vue b/src/components/graph/selectionToolbox/NodeOptions.vue
index 9965ffa6d4..1b762eeacc 100644
--- a/src/components/graph/selectionToolbox/NodeOptions.vue
+++ b/src/components/graph/selectionToolbox/NodeOptions.vue
@@ -259,8 +259,8 @@ const pt = computed(() => ({
   },
   content: {
     class: [
-      'mt-2 text-neutral dark-theme:text-white rounded-lg',
-      'shadow-lg border border-zinc-200 dark-theme:border-zinc-700',
+      'mt-2 text-text-primary rounded-lg',
+      'shadow-lg border border-interface-stroke',
       'bg-interface-panel-surface'
     ]
   }
diff --git a/src/components/graph/selectionToolbox/SubmenuPopover.vue b/src/components/graph/selectionToolbox/SubmenuPopover.vue
index fd376df976..e3962e86e5 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-interface-menu-component-surface-hovered rounded cursor-pointer'
+            : 'flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-interface-menu-component-surface-hovered 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-interface-stroke"
           :style="{ backgroundColor: subOption.color }"
         />
         <template v-else-if="!subOption.color">
@@ -109,8 +109,8 @@ const submenuPt = computed(() => ({
   },
   content: {
     class: [
-      'text-neutral dark-theme:text-white rounded-lg',
-      'shadow-lg border border-zinc-200 dark-theme:border-zinc-700',
+      'text-text-primary rounded-lg',
+      'shadow-lg border border-interface-stroke',
       'bg-interface-panel-surface'
     ]
   }
diff --git a/src/components/graph/selectionToolbox/VerticalDivider.vue b/src/components/graph/selectionToolbox/VerticalDivider.vue
index 0d5587fb21..f53ec61f7f 100644
--- a/src/components/graph/selectionToolbox/VerticalDivider.vue
+++ b/src/components/graph/selectionToolbox/VerticalDivider.vue
@@ -1,3 +1,3 @@
 <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-interface-stroke opacity-10" />
 </template>
diff --git a/src/components/graph/widgets/ChatHistoryWidget.vue b/src/components/graph/widgets/ChatHistoryWidget.vue
index f749d59519..9f3c8ccf77 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-node-component-surface-hovered px-4 py-1 text-right"
           >
             <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-text-secondary transition hover:text-text-primary"
             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 933a1b921d..9a7cda6d16 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-text-secondary transition hover:text-text-primary"
     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 716bfab0fc..a87fd9fd0a 100644
--- a/src/components/input/MultiSelect.accessibility.stories.ts
+++ b/src/components/input/MultiSelect.accessibility.stories.ts
@@ -119,9 +119,9 @@ 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-accent-blue/10 border border-accent-blue/30 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-text-secondary mb-4">
             Use your keyboard to navigate this MultiSelect:
           </p>
           <ol class="text-sm text-gray-600 list-decimal list-inside space-y-1">
@@ -184,7 +184,7 @@ export const ScreenReaderFriendly: Story = {
     },
     template: `
       <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">
+        <div class="bg-accent-success/10 border border-accent-success/30 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">
             These dropdowns have proper ARIA attributes and labels for screen readers:
@@ -257,9 +257,9 @@ export const FocusManagement: Story = {
     },
     template: `
       <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">
+        <div class="bg-purple-500/10 border border-purple-500/30 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-text-secondary mb-4">
             Test focus behavior with multiple form elements:
           </p>
         </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-modal-panel-surface border border-interface-stroke 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-accent-blue/10 border border-accent-blue/30 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-text-primary">
               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.stories.ts b/src/components/input/MultiSelect.stories.ts
index e6b5d91443..1c20fd4c45 100644
--- a/src/components/input/MultiSelect.stories.ts
+++ b/src/components/input/MultiSelect.stories.ts
@@ -102,7 +102,7 @@ export const Default: Story = {
           :showClearButton="args.showClearButton"
           :searchPlaceholder="args.searchPlaceholder"
         />
-        <div class="mt-4 p-3 bg-gray-50 dark-theme:bg-zinc-800 rounded">
+        <div class="mt-4 p-3 bg-modal-panel-surface rounded">
           <p class="text-sm">Selected: {{ selected.length > 0 ? selected.map(s => s.name).join(', ') : 'None' }}</p>
         </div>
       </div>
@@ -135,7 +135,7 @@ export const WithPreselectedValues: Story = {
           :showClearButton="args.showClearButton"
           :searchPlaceholder="args.searchPlaceholder"
         />
-        <div class="mt-4 p-3 bg-gray-50 dark-theme:bg-zinc-800 rounded">
+        <div class="mt-4 p-3 bg-modal-panel-surface rounded">
           <p class="text-sm">Selected: {{ selected.map(s => s.name).join(', ') }}</p>
         </div>
       </div>
@@ -229,7 +229,7 @@ export const MultipleSelectors: Story = {
           />
         </div>
         
-        <div class="p-4 bg-gray-50 dark-theme:bg-zinc-800 rounded">
+        <div class="p-4 bg-modal-panel-surface rounded">
           <h4 class="font-medium mt-0">Current Selection:</h4>
           <div class="flex flex-col text-sm">
             <p>Frameworks: {{ selectedFrameworks.length > 0 ? selectedFrameworks.map(s => s.name).join(', ') : 'None' }}</p>
diff --git a/src/components/input/MultiSelect.vue b/src/components/input/MultiSelect.vue
index 1469d0f869..978103f2c9 100644
--- a/src/components/input/MultiSelect.vue
+++ b/src/components/input/MultiSelect.vue
@@ -39,7 +39,7 @@
         >
           <span
             v-if="showSelectedCount"
-            class="px-1 text-sm text-neutral-400 dark-theme:text-zinc-500"
+            class="px-1 text-sm text-text-secondary"
           >
             {{
               selectedCount > 0
@@ -52,22 +52,22 @@
             :label="$t('g.clearAll')"
             type="transparent"
             size="fit-content"
-            class="text-sm text-blue-500 dark-theme:text-blue-600"
+            class="text-sm text-text-blue"
             @click.stop="selectedItems = []"
           />
         </div>
-        <div class="my-4 h-px bg-zinc-200 dark-theme:bg-zinc-700"></div>
+        <div class="my-4 h-px bg-interface-stroke"></div>
       </div>
     </template>
 
     <!-- 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-text-primary">
         {{ label }}
       </span>
       <span
         v-if="selectedCount > 0"
-        class="pointer-events-none absolute -top-2 -right-2 z-10 flex h-5 w-5 items-center justify-center rounded-full bg-blue-400 text-xs font-semibold text-white dark-theme:bg-blue-500"
+        class="pointer-events-none absolute -top-2 -right-2 z-10 flex h-5 w-5 items-center justify-center rounded-full bg-accent-blue text-xs font-semibold text-text-contrast"
       >
         {{ selectedCount }}
       </span>
@@ -83,11 +83,7 @@
       <div class="flex items-center gap-2" :style="popoverStyle">
         <div
           class="flex h-4 w-4 shrink-0 items-center justify-center rounded p-0.5 transition-all duration-200"
-          :class="
-            slotProps.selected
-              ? 'bg-blue-400 dark-theme:border-blue-500 dark-theme:bg-blue-500'
-              : 'bg-neutral-100 dark-theme:bg-zinc-700'
-          "
+          :class="slotProps.selected ? 'bg-accent-blue' : 'bg-button-surface'"
         >
           <i
             v-if="slotProps.selected"
@@ -208,13 +204,11 @@ const pt = computed(() => ({
   root: ({ props }: MultiSelectPassThroughMethodOptions) => ({
     class: cn(
       'h-10 relative inline-flex cursor-pointer select-none',
-      'rounded-lg bg-white dark-theme:bg-zinc-800 text-neutral dark-theme:text-white',
+      'rounded-lg bg-button-surface text-text-primary',
       'transition-all duration-200 ease-in-out',
       'border-[2.5px] border-solid',
-      selectedCount.value > 0
-        ? 'border-blue-400 dark-theme:border-blue-500'
-        : 'border-transparent',
-      'focus-within:border-blue-400 dark-theme:focus-within:border-blue-500',
+      selectedCount.value > 0 ? 'border-accent-blue' : 'border-transparent',
+      'focus-within:border-accent-blue',
       { 'opacity-60 cursor-default': props.disabled }
     )
   }),
@@ -236,9 +230,9 @@ const pt = computed(() => ({
   overlay: {
     class: cn(
       'mt-2 rounded-lg py-2 px-2',
-      'bg-white dark-theme:bg-zinc-800',
-      'text-neutral dark-theme:text-white',
-      'border border-solid border-neutral-200 dark-theme:border-zinc-700'
+      'bg-interface-menu-surface',
+      'text-text-primary',
+      'border border-solid border-interface-menu-stroke'
     )
   },
   listContainer: () => ({
@@ -252,10 +246,10 @@ const pt = computed(() => ({
   option: ({ context }: MultiSelectPassThroughMethodOptions) => ({
     class: [
       'flex gap-2 items-center h-10 px-2 rounded-lg',
-      'hover:bg-neutral-100/50 dark-theme:hover:bg-zinc-700/50',
+      'hover:bg-interface-menu-component-surface-hovered',
       // Add focus/highlight state for keyboard navigation
       {
-        'bg-neutral-100/50 dark-theme:bg-zinc-700/50': context?.focused
+        'bg-interface-menu-component-surface-hovered': context?.focused
       }
     ]
   }),
diff --git a/src/components/input/SearchBox.vue b/src/components/input/SearchBox.vue
index 8cc5e5f364..67d00a4a4c 100644
--- a/src/components/input/SearchBox.vue
+++ b/src/components/input/SearchBox.vue
@@ -74,7 +74,7 @@ onMounted(() => autofocus && focusInput())
 const wrapperStyle = computed(() => {
   const baseClasses = [
     'relative flex w-full items-center gap-2',
-    'bg-white dark-theme:bg-zinc-800',
+    'bg-interface-panel-surface',
     'cursor-text'
   ]
 
@@ -83,7 +83,7 @@ const wrapperStyle = computed(() => {
       ...baseClasses,
       'rounded p-2',
       'border border-solid',
-      'border-zinc-200 dark-theme:border-zinc-700'
+      'border-interface-stroke'
     )
   }
 
@@ -100,13 +100,11 @@ const inputStyle = computed(() => {
   return cn(
     'absolute inset-0 w-full h-full pl-11',
     'border-none outline-none bg-transparent',
-    'text-sm text-neutral dark-theme:text-white'
+    'text-sm text-text-primary'
   )
 })
 
 const iconColorStyle = computed(() => {
-  return cn(
-    !showBorder ? 'text-neutral' : ['text-zinc-300', 'dark-theme:text-zinc-700']
-  )
+  return cn(!showBorder ? 'text-neutral' : 'text-text-secondary')
 })
 </script>
diff --git a/src/components/input/SingleSelect.accessibility.stories.ts b/src/components/input/SingleSelect.accessibility.stories.ts
index cc58466d1b..0b77ce8103 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-accent-blue/10 border border-accent-blue/30 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-text-secondary 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-text-secondary 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-text-primary">
               Sort Order
             </label>
             <SingleSelect
@@ -132,7 +132,7 @@ export const KeyboardNavigationDemo: Story = {
           </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-text-primary">
               Task Priority (With Icon)
             </label>
             <SingleSelect
@@ -189,12 +189,12 @@ export const ScreenReaderFriendly: Story = {
     },
     template: `
       <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">
+        <div class="bg-accent-success/10 border border-accent-success/30 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-text-secondary 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-text-secondary 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-text-primary" id="language-label">
               Preferred Language
             </label>
             <SingleSelect
@@ -221,7 +221,7 @@ export const ScreenReaderFriendly: Story = {
           </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-text-primary" id="theme-label">
               Interface Theme
             </label>
             <SingleSelect
@@ -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-text-secondary 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>
@@ -297,9 +297,9 @@ export const FormIntegration: Story = {
     },
     template: `
       <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">
+        <div class="bg-purple-500/10 border border-purple-500/30 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-text-secondary">
             Test keyboard navigation through a complete form with SingleSelect components.
             Tab order should be logical and all elements should be accessible.
           </p>
@@ -307,7 +307,7 @@ 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-text-primary mb-1">
               Title *
             </label>
             <input
@@ -319,7 +319,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-text-primary 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-text-primary 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-text-primary mb-1">
               Assignee
             </label>
             <SingleSelect
@@ -356,7 +356,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-text-primary mb-1">
               Description
             </label>
             <textarea
@@ -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-button-surface text-text-primary rounded-md hover:bg-button-surface-hovered focus:ring-2 focus:ring-accent-blue 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-modal-panel-surface border border-interface-stroke 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-text-secondary">{{ 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-modal-panel-surface border border-interface-stroke 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-accent-blue/10 border border-accent-blue/30 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-text-primary">
               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-text-primary">
               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.stories.ts b/src/components/input/SingleSelect.stories.ts
index b130780e22..1ce4deccc2 100644
--- a/src/components/input/SingleSelect.stories.ts
+++ b/src/components/input/SingleSelect.stories.ts
@@ -58,7 +58,7 @@ export const Default: Story = {
     template: `
       <div>
         <SingleSelect v-model="selected" :options="options" :label="args.label" />
-        <div class="mt-4 p-3 bg-gray-50 dark-theme:bg-zinc-800 rounded">
+        <div class="mt-4 p-3 bg-modal-panel-surface rounded">
           <p class="text-sm">Selected: {{ selected ?? 'None' }}</p>
         </div>
       </div>
@@ -81,7 +81,7 @@ export const WithIcon: Story = {
             <i class="icon-[lucide--arrow-up-down] w-3.5 h-3.5" />
           </template>
         </SingleSelect>
-        <div class="mt-4 p-3 bg-gray-50 dark-theme:bg-zinc-800 rounded">
+        <div class="mt-4 p-3 bg-modal-panel-surface rounded">
           <p class="text-sm">Selected: {{ selected }}</p>
         </div>
       </div>
diff --git a/src/components/input/SingleSelect.vue b/src/components/input/SingleSelect.vue
index 01be97eb44..bff913f8f4 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-text-primary"
         >
           {{ getLabel(slotProps.value) }}
         </span>
-        <span v-else class="text-zinc-700 dark-theme:text-gray-200">
+        <span v-else class="text-text-primary">
           {{ label }}
         </span>
       </div>
@@ -48,10 +48,7 @@
         :style="optionStyle"
       >
         <span class="truncate">{{ option.name }}</span>
-        <i
-          v-if="selected"
-          class="icon-[lucide--check] text-neutral-600 dark-theme:text-white"
-        />
+        <i v-if="selected" class="icon-[lucide--check] text-text-primary" />
       </div>
     </template>
   </Select>
@@ -132,10 +129,10 @@ const pt = computed(() => ({
       'h-10 relative inline-flex cursor-pointer select-none items-center',
       // trigger surface
       'rounded-lg',
-      'bg-white dark-theme:bg-zinc-800 text-neutral dark-theme:text-white',
+      'bg-button-surface text-text-primary',
       'border-[2.5px] border-solid border-transparent',
       'transition-all duration-200 ease-in-out',
-      'focus-within:border-blue-400 dark-theme:focus-within:border-blue-500',
+      'focus-within:border-accent-blue',
       // disabled
       { 'opacity-60 cursor-default': props.disabled }
     ]
@@ -153,8 +150,8 @@ const pt = computed(() => ({
   overlay: {
     class: cn(
       'mt-2 p-2 rounded-lg',
-      'bg-white dark-theme:bg-zinc-800 text-neutral dark-theme:text-white',
-      'border border-solid border-neutral-200 dark-theme:border-zinc-700'
+      'bg-interface-menu-surface text-text-primary',
+      'border border-solid border-interface-menu-stroke'
     )
   },
   listContainer: () => ({
@@ -170,22 +167,21 @@ const pt = computed(() => ({
     class: [
       // Row layout
       'flex items-center justify-between gap-3 px-2 py-3 rounded',
-      'hover:bg-neutral-100/50 dark-theme:hover:bg-zinc-700/50',
+      'hover:bg-interface-menu-component-surface-hovered',
       // Selected state + check icon
-      { 'bg-neutral-100/50 dark-theme:bg-zinc-700/50': context.selected },
+      { 'bg-interface-menu-component-surface-hovered': context.selected },
       // Add focus state for keyboard navigation
-      { 'bg-neutral-100/50 dark-theme:bg-zinc-700/50': context.focused }
+      { 'bg-interface-menu-component-surface-hovered': context.focused }
     ]
   }),
   optionLabel: {
     class: 'truncate'
   },
   optionGroupLabel: {
-    class:
-      'px-3 py-2 text-xs uppercase tracking-wide text-zinc-500 dark-theme:text-zinc-400'
+    class: 'px-3 py-2 text-xs uppercase tracking-wide text-text-secondary'
   },
   emptyMessage: {
-    class: 'px-3 py-2 text-sm text-zinc-500 dark-theme:text-zinc-400'
+    class: 'px-3 py-2 text-sm text-text-secondary'
   }
 }))
 </script>
diff --git a/src/components/widget/layout/BaseModalLayout.vue b/src/components/widget/layout/BaseModalLayout.vue
index e2e8f49e79..a8a8160351 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-modal-background'
 )
 
 const rightPanelButtonClasses = computed(() => {
@@ -148,10 +148,7 @@ const closeButtonClasses = cn(
   'transition-opacity duration-200'
 )
 
-const mainContainerClasses = cn(
-  'flex-1 flex',
-  'bg-gray-100 dark-theme:bg-neutral-900'
-)
+const mainContainerClasses = cn('flex-1 flex', 'bg-modal-panel-surface')
 
 const headerClasses = cn(
   'w-full h-18 px-6',
diff --git a/src/components/widget/nav/NavItem.vue b/src/components/widget/nav/NavItem.vue
index 655ccb0ee0..464baea09a 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-interface-menu-component-surface-selected text-neutral'
+        : 'text-neutral hover:bg-interface-menu-component-surface-hovered'
     "
     role="button"
     @click="onClick"
diff --git a/src/components/widget/nav/NavTitle.vue b/src/components/widget/nav/NavTitle.vue
index 6494168849..3cd00b52ce 100644
--- a/src/components/widget/nav/NavTitle.vue
+++ b/src/components/widget/nav/NavTitle.vue
@@ -8,16 +8,14 @@
     "
     @click="collapsible && toggleCollapse()"
   >
-    <h3
-      class="text-xs font-bold text-neutral-400 uppercase dark-theme:text-neutral-400"
-    >
+    <h3 class="text-xs font-bold text-text-secondary uppercase">
       {{ title }}
     </h3>
     <i
       v-if="collapsible"
       :class="
         cn(
-          'pi transition-transform duration-200 text-xs text-neutral-400 dark-theme:text-neutral-400',
+          'pi transition-transform duration-200 text-xs text-text-secondary',
           isCollapsed ? 'pi-chevron-right' : 'pi-chevron-down'
         )
       "
diff --git a/src/components/widget/panel/LeftSidePanel.vue b/src/components/widget/panel/LeftSidePanel.vue
index b1e2d6b90a..a66eaef3ac 100644
--- a/src/components/widget/panel/LeftSidePanel.vue
+++ b/src/components/widget/panel/LeftSidePanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex h-full w-full flex-col bg-white dark-theme:bg-charcoal-600">
+  <div class="flex h-full w-full flex-col bg-interface-panel-surface">
     <PanelHeader>
       <template #icon>
         <slot name="header-icon"></slot>
diff --git a/src/components/widget/panel/RightSidePanel.vue b/src/components/widget/panel/RightSidePanel.vue
index 5b6a4eb5eb..7b9c16d199 100644
--- a/src/components/widget/panel/RightSidePanel.vue
+++ b/src/components/widget/panel/RightSidePanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full w-full bg-white pr-6 pb-8 pl-4 dark-theme:bg-charcoal-600">
+  <div class="h-full w-full bg-interface-panel-surface pr-6 pb-8 pl-4">
     <slot></slot>
   </div>
 </template>
diff --git a/src/platform/assets/components/AssetBadgeGroup.vue b/src/platform/assets/components/AssetBadgeGroup.vue
index 7723667db0..82fe5528c9 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-accent-blue/90'
     case 'base':
-      return 'bg-success-100/90 dark-theme:bg-success-100/80'
+      return 'bg-accent-success/90'
     case 'size':
-      return 'bg-stone-100/90 dark-theme:bg-charcoal-700/80'
+      return 'bg-accent-secondary/90'
     default:
-      return 'bg-stone-100/90 dark-theme:bg-charcoal-700/80'
+      return 'bg-accent-secondary/90'
   }
 }
 </script>
diff --git a/src/platform/assets/components/AssetBrowserModal.stories.ts b/src/platform/assets/components/AssetBrowserModal.stories.ts
index cad836ae35..275c884c2f 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-modal-background 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-modal-background 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-modal-background 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 2915a219af..ee66a031e2 100644
--- a/src/platform/assets/components/AssetCard.stories.ts
+++ b/src/platform/assets/components/AssetCard.stories.ts
@@ -33,8 +33,7 @@ const meta: Meta<typeof AssetCard> = {
   },
   decorators: [
     () => ({
-      template:
-        '<div class="p-8 bg-gray-50 dark-theme:bg-gray-900"><story /></div>'
+      template: '<div class="p-8 bg-modal-background"><story /></div>'
     })
   ]
 }
@@ -49,8 +48,7 @@ export const Interactive: Story = {
   },
   decorators: [
     () => ({
-      template:
-        '<div class="p-8 bg-gray-50 dark-theme:bg-gray-900 max-w-96"><story /></div>'
+      template: '<div class="p-8 bg-modal-background max-w-96"><story /></div>'
     })
   ],
   parameters: {
@@ -70,8 +68,7 @@ export const NonInteractive: Story = {
   },
   decorators: [
     () => ({
-      template:
-        '<div class="p-8 bg-gray-50 dark-theme:bg-gray-900 max-w-96"><story /></div>'
+      template: '<div class="p-8 bg-modal-background max-w-96"><story /></div>'
     })
   ],
   parameters: {
@@ -204,7 +201,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-modal-background">
         <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 dd35b4fc14..910f8a98bf 100644
--- a/src/platform/assets/components/AssetCard.vue
+++ b/src/platform/assets/components/AssetCard.vue
@@ -39,8 +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',
-              'dark-theme:text-slate-100'
+              'text-text-secondary'
             )
           "
           :title="asset.description"
@@ -48,15 +47,7 @@
           {{ asset.description }}
         </p>
       </div>
-      <div
-        :class="
-          cn(
-            'flex gap-4 text-xs',
-            'text-stone-400',
-            'dark-theme:text-stone-300'
-          )
-        "
-      >
+      <div :class="cn('flex gap-4 text-xs', 'text-text-secondary')">
         <span v-if="asset.stats.stars" class="flex items-center gap-1">
           <i class="icon-[lucide--star] size-3" />
           {{ asset.stats.stars }}
diff --git a/src/platform/assets/components/AssetFilterBar.stories.ts b/src/platform/assets/components/AssetFilterBar.stories.ts
index a4f48794ac..ef43f6b709 100644
--- a/src/platform/assets/components/AssetFilterBar.stories.ts
+++ b/src/platform/assets/components/AssetFilterBar.stories.ts
@@ -26,11 +26,11 @@ const meta: Meta<typeof AssetFilterBar> = {
   decorators: [
     () => ({
       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="min-h-screen bg-interface-panel-surface">
+          <div class="bg-modal-background border-b border-interface-stroke">
             <story />
           </div>
-          <div class="p-6 text-sm text-gray-600 dark-theme:text-gray-400">
+          <div class="p-6 text-sm text-text-secondary">
             <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-button-surface border-interface-stroke'
             ]"
           >
             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-button-surface border-interface-stroke'
             ]"
           >
             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-button-surface border-interface-stroke'
             ]"
           >
             LoRAs (.pt, sd15 only)
diff --git a/src/platform/assets/components/AssetGrid.vue b/src/platform/assets/components/AssetGrid.vue
index 2bf77461cd..aa9709acdd 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-text-secondary'
         )
       "
     >
@@ -41,9 +41,7 @@
     >
       <i
         class="icon-[lucide--loader]"
-        :class="
-          cn('size-6 animate-spin', 'text-stone-300 dark-theme:text-stone-200')
-        "
+        :class="cn('size-6 animate-spin', 'text-text-secondary')"
       />
     </div>
   </div>
diff --git a/src/platform/assets/components/Media3DBottom.vue b/src/platform/assets/components/Media3DBottom.vue
index 4d3c15c0b1..57cb64fc97 100644
--- a/src/platform/assets/components/Media3DBottom.vue
+++ b/src/platform/assets/components/Media3DBottom.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col items-center gap-1">
     <h3
-      class="m-0 line-clamp-1 text-sm font-bold text-zinc-900 dark-theme:text-white"
+      class="m-0 line-clamp-1 text-sm font-bold text-text-primary"
       :title="asset.name"
     >
       {{ fileName }}
diff --git a/src/platform/assets/components/Media3DTop.vue b/src/platform/assets/components/Media3DTop.vue
index 535e5de6c1..9810ae2bdb 100644
--- a/src/platform/assets/components/Media3DTop.vue
+++ b/src/platform/assets/components/Media3DTop.vue
@@ -1,14 +1,10 @@
 <template>
   <div class="relative h-full w-full overflow-hidden rounded">
     <div
-      class="flex h-full w-full flex-col items-center justify-center gap-2 bg-zinc-200 dark-theme:bg-zinc-700/50"
+      class="flex h-full w-full flex-col items-center justify-center gap-2 bg-interface-panel-card-surface"
     >
-      <i
-        class="icon-[lucide--box] text-3xl text-zinc-600 dark-theme:text-zinc-200"
-      />
-      <span class="text-zinc-600 dark-theme:text-zinc-200">{{
-        $t('3D Model')
-      }}</span>
+      <i class="icon-[lucide--box] text-3xl text-text-secondary" />
+      <span class="text-text-secondary">{{ $t('3D Model') }}</span>
     </div>
   </div>
 </template>
diff --git a/src/platform/assets/components/MediaAssetButtonDivider.vue b/src/platform/assets/components/MediaAssetButtonDivider.vue
index d395ca0996..b87e58dcae 100644
--- a/src/platform/assets/components/MediaAssetButtonDivider.vue
+++ b/src/platform/assets/components/MediaAssetButtonDivider.vue
@@ -1,4 +1,4 @@
 <template>
-  <div class="h-[1px] bg-neutral-200 dark-theme:bg-neutral-700"></div>
+  <div class="h-[1px] bg-interface-stroke"></div>
 </template>
 <script setup lang="ts"></script>
diff --git a/src/platform/assets/components/MediaAssetCard.vue b/src/platform/assets/components/MediaAssetCard.vue
index 1681dcf3ef..1a10b2fb82 100644
--- a/src/platform/assets/components/MediaAssetCard.vue
+++ b/src/platform/assets/components/MediaAssetCard.vue
@@ -23,7 +23,7 @@
         <!-- Loading State -->
         <template v-if="loading">
           <div
-            class="h-full w-full animate-pulse rounded-lg bg-zinc-200 dark-theme:bg-zinc-700"
+            class="h-full w-full animate-pulse rounded-lg bg-interface-panel-card-surface"
           />
         </template>
 
@@ -98,10 +98,10 @@
         <template v-if="loading">
           <div class="flex flex-col items-center justify-between gap-1">
             <div
-              class="h-4 w-2/3 animate-pulse rounded bg-zinc-200 dark-theme:bg-zinc-700"
+              class="h-4 w-2/3 animate-pulse rounded bg-interface-panel-card-surface"
             />
             <div
-              class="h-3 w-1/2 animate-pulse rounded bg-zinc-200 dark-theme:bg-zinc-700"
+              class="h-3 w-1/2 animate-pulse rounded bg-interface-panel-card-surface"
             />
           </div>
         </template>
@@ -195,8 +195,8 @@ const containerClasses = computed(() =>
   cn(
     'gap-1',
     selected
-      ? 'border-3 border-zinc-900 dark-theme:border-white bg-zinc-200 dark-theme:bg-zinc-700'
-      : 'hover:bg-zinc-100 dark-theme:hover:bg-zinc-800'
+      ? 'border-3 border-accent-primary bg-interface-panel-card-surface'
+      : 'hover:bg-interface-panel-card-surface-hover'
   )
 )
 
diff --git a/src/platform/assets/components/MediaAssetMoreMenu.vue b/src/platform/assets/components/MediaAssetMoreMenu.vue
index 62f793aa26..3c9cb669ae 100644
--- a/src/platform/assets/components/MediaAssetMoreMenu.vue
+++ b/src/platform/assets/components/MediaAssetMoreMenu.vue
@@ -3,7 +3,7 @@
     <IconTextButton
       v-if="asset?.kind !== '3D'"
       type="transparent"
-      class="dark-theme:text-white"
+      class="text-text-primary"
       label="Inspect asset"
       @click="handleInspect"
     >
@@ -14,7 +14,7 @@
 
     <IconTextButton
       type="transparent"
-      class="dark-theme:text-white"
+      class="text-text-primary"
       label="Add to current workflow"
       @click="handleAddToWorkflow"
     >
@@ -25,7 +25,7 @@
 
     <IconTextButton
       type="transparent"
-      class="dark-theme:text-white"
+      class="text-text-primary"
       label="Download"
       @click="handleDownload"
     >
@@ -39,7 +39,7 @@
     <IconTextButton
       v-if="showWorkflowOptions"
       type="transparent"
-      class="dark-theme:text-white"
+      class="text-text-primary"
       label="Open as workflow in new tab"
       @click="handleOpenWorkflow"
     >
@@ -51,7 +51,7 @@
     <IconTextButton
       v-if="showWorkflowOptions"
       type="transparent"
-      class="dark-theme:text-white"
+      class="text-text-primary"
       label="Export workflow"
       @click="handleExportWorkflow"
     >
@@ -64,7 +64,7 @@
 
     <IconTextButton
       type="transparent"
-      class="dark-theme:text-white"
+      class="text-text-primary"
       label="Copy job ID"
       @click="handleCopyJobId"
     >
@@ -77,7 +77,7 @@
 
     <IconTextButton
       type="transparent"
-      class="dark-theme:text-white"
+      class="text-text-primary"
       label="Delete"
       @click="handleDelete"
     >
diff --git a/src/platform/assets/components/MediaAudioBottom.vue b/src/platform/assets/components/MediaAudioBottom.vue
index 9b9e103fa1..401b986cfd 100644
--- a/src/platform/assets/components/MediaAudioBottom.vue
+++ b/src/platform/assets/components/MediaAudioBottom.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col items-center gap-1">
     <h3
-      class="m-0 line-clamp-1 text-sm font-bold text-zinc-900 dark-theme:text-white"
+      class="m-0 line-clamp-1 text-sm font-bold text-text-primary"
       :title="asset.name"
     >
       {{ fileName }}
diff --git a/src/platform/assets/components/MediaAudioTop.vue b/src/platform/assets/components/MediaAudioTop.vue
index 038aaf2900..1d46b4aac3 100644
--- a/src/platform/assets/components/MediaAudioTop.vue
+++ b/src/platform/assets/components/MediaAudioTop.vue
@@ -1,14 +1,10 @@
 <template>
   <div class="relative h-full w-full overflow-hidden rounded">
     <div
-      class="flex h-full w-full flex-col items-center justify-center gap-2 bg-zinc-200 dark-theme:bg-zinc-700/50"
+      class="flex h-full w-full flex-col items-center justify-center gap-2 bg-interface-panel-card-surface"
     >
-      <i
-        class="icon-[lucide--music] text-3xl text-zinc-600 dark-theme:text-zinc-200"
-      />
-      <span class="text-zinc-600 dark-theme:text-zinc-200">{{
-        $t('Audio')
-      }}</span>
+      <i class="icon-[lucide--music] text-3xl text-text-secondary" />
+      <span class="text-text-secondary">{{ $t('Audio') }}</span>
     </div>
     <audio
       controls
diff --git a/src/platform/assets/components/MediaImageBottom.vue b/src/platform/assets/components/MediaImageBottom.vue
index 295c5bd6e9..140c320690 100644
--- a/src/platform/assets/components/MediaImageBottom.vue
+++ b/src/platform/assets/components/MediaImageBottom.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col items-center gap-1">
     <h3
-      class="m-0 line-clamp-1 text-sm font-bold text-zinc-900 dark-theme:text-white"
+      class="m-0 line-clamp-1 text-sm font-bold text-text-primary"
       :title="asset.name"
     >
       {{ fileName }}
diff --git a/src/platform/assets/components/MediaImageTop.vue b/src/platform/assets/components/MediaImageTop.vue
index 40adba4356..925de9839d 100644
--- a/src/platform/assets/components/MediaImageTop.vue
+++ b/src/platform/assets/components/MediaImageTop.vue
@@ -9,7 +9,7 @@
     />
     <div
       v-else
-      class="flex h-full w-full items-center justify-center bg-zinc-200 dark-theme:bg-zinc-700/50"
+      class="flex h-full w-full items-center justify-center bg-interface-panel-card-surface"
     >
       <i class="pi pi-image text-3xl text-gray-400" />
     </div>
diff --git a/src/platform/assets/components/MediaVideoBottom.vue b/src/platform/assets/components/MediaVideoBottom.vue
index 295c5bd6e9..140c320690 100644
--- a/src/platform/assets/components/MediaVideoBottom.vue
+++ b/src/platform/assets/components/MediaVideoBottom.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col items-center gap-1">
     <h3
-      class="m-0 line-clamp-1 text-sm font-bold text-zinc-900 dark-theme:text-white"
+      class="m-0 line-clamp-1 text-sm font-bold text-text-primary"
       :title="asset.name"
     >
       {{ fileName }}
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue
index afa290e48d..0eb637099d 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue
@@ -1,8 +1,6 @@
 <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"
-    >
+    <div class="max-h-[48rem] rounded border border-interface-stroke p-4">
       <Chart
         :type="chartType"
         :data="chartData"
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue
index 0ef51cce21..cdbffd057f 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue
@@ -52,8 +52,7 @@
         <!-- Edit button -->
         <button
           :aria-label="$t('g.editImage')"
-          class="flex h-6 w-6 items-center justify-center rounded border-none transition-all duration-150 focus:outline-none"
-          style="background-color: #262729"
+          class="flex h-6 w-6 items-center justify-center rounded border-none bg-node-component-border transition-all duration-150 focus:outline-none"
           @click="handleEdit"
         >
           <i class="pi pi-pencil text-xs text-white"></i>
@@ -61,8 +60,7 @@
         <!-- Delete button -->
         <button
           :aria-label="$t('g.deleteImage')"
-          class="flex h-6 w-6 items-center justify-center rounded border-none transition-all duration-150 focus:outline-none"
-          style="background-color: #262729"
+          class="flex h-6 w-6 items-center justify-center rounded border-none bg-node-component-border transition-all duration-150 focus:outline-none"
           @click="clearFile"
         >
           <i class="pi pi-times text-xs text-white"></i>
@@ -110,8 +108,7 @@
     <!-- Audio player -->
     <div class="group relative px-2">
       <div
-        class="flex items-center gap-4 rounded-lg bg-[#1a1b1e] p-4"
-        style="border: 1px solid #262729"
+        class="flex items-center gap-4 rounded-lg border border-solid border-node-component-border bg-node-component-surface p-4"
       >
         <!-- Audio icon -->
         <div class="flex-shrink-0">
@@ -146,12 +143,10 @@
   <!-- Show normal file upload UI when no image or audio is loaded -->
   <div
     v-else
-    class="flex w-full flex-col gap-1 rounded-lg border border-solid p-1"
-    :style="{ borderColor: '#262729' }"
+    class="flex w-full flex-col gap-1 rounded-lg border border-solid border-node-component-border p-1"
   >
     <div
-      class="rounded-md border border-dashed p-1 transition-colors duration-200 hover:border-slate-300"
-      :style="{ borderColor: '#262729' }"
+      class="rounded-md border border-dashed border-node-component-border p-1 transition-colors duration-200 hover:border-slate-300"
     >
       <div class="flex w-full flex-col items-center gap-2 py-4">
         <span class="text-xs opacity-60"> {{ $t('Drop your file or') }} </span>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue
index 666f88fa94..80c3fabeee 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue
@@ -2,7 +2,7 @@
   <div class="relative">
     <div class="mb-4">
       <Button
-        class="w-[413px] border-0 bg-zinc-500/10 text-zinc-400 dark-theme:bg-charcoal-600 dark-theme:text-white"
+        class="w-[413px] border-0 bg-node-component-widget-input-surface text-text-secondary"
         :disabled="isRecording || readonly"
         @click="handleStartRecording"
       >
@@ -12,7 +12,7 @@
     </div>
     <div
       v-if="isRecording || isPlaying || recordedURL"
-      class="flex h-14 w-[413px] items-center gap-4 rounded-lg bg-zinc-500/10 px-4 text-zinc-400 dark-theme:bg-node-component-surface dark-theme:text-white"
+      class="flex h-14 w-[413px] items-center gap-4 rounded-lg bg-node-component-surface px-4 text-text-primary"
     >
       <!-- Recording Status -->
       <div class="flex min-w-30 items-center gap-2">
@@ -48,7 +48,7 @@
         class="flex size-8 animate-pulse items-center justify-center rounded-full border-0 bg-gray-500/33 transition-colors"
         @click="handleStopRecording"
       >
-        <div class="size-2.5 rounded-sm bg-[#C02323]" />
+        <div class="size-2.5 rounded-sm bg-button-surface-danger" />
       </button>
 
       <button
@@ -57,9 +57,7 @@
         class="flex size-8 items-center justify-center rounded-full border-0 bg-gray-500/33 transition-colors"
         @click="handlePlayRecording"
       >
-        <i
-          class="icon-[lucide--play] size-4 text-zinc-400 dark-theme:text-white"
-        />
+        <i class="icon-[lucide--play] size-4 text-text-primary" />
       </button>
 
       <button
@@ -68,9 +66,7 @@
         class="flex size-8 items-center justify-center rounded-full border-0 bg-gray-500/33 transition-colors"
         @click="handleStopPlayback"
       >
-        <i
-          class="icon-[lucide--square] size-4 text-zinc-400 dark-theme:text-white"
-        />
+        <i class="icon-[lucide--square] size-4 text-text-primary" />
       </button>
     </div>
     <audio
diff --git a/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue b/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
index 59ed07bde0..7f244f1ce6 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
@@ -4,7 +4,7 @@
       v-if="!hidden"
       :class="
         cn(
-          'bg-zinc-500/10 dark-theme:bg-charcoal-600 box-border flex gap-4 items-center justify-start relative rounded-lg w-full h-16 px-4 py-0',
+          'bg-node-component-widget-input-surface box-border flex gap-4 items-center justify-start relative rounded-lg w-full h-16 px-4 py-0',
           { hidden: hideWhenEmpty && !hasAudio }
         )
       "
@@ -24,33 +24,31 @@
           role="button"
           :tabindex="0"
           aria-label="Play/Pause"
-          class="flex size-6 cursor-pointer items-center justify-center rounded hover:bg-black/10 dark-theme:hover:bg-white/10"
+          class="flex size-6 cursor-pointer items-center justify-center rounded hover:bg-node-ring-hover"
           @click="togglePlayPause"
         >
           <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-node-component-header-icon"
           />
           <i
             v-else
-            class="icon-[lucide--pause] size-4 text-gray-600 dark-theme:text-gray-800"
+            class="icon-[lucide--pause] size-4 text-node-component-header-icon"
           />
         </div>
 
         <!-- Time Display -->
-        <div
-          class="text-sm font-normal text-nowrap text-black dark-theme:text-white"
-        >
+        <div class="text-sm font-normal text-nowrap text-text-primary">
           {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
         </div>
       </div>
 
       <!-- 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-node-component-slot-text"
       >
         <div
-          class="absolute top-0 left-0 h-full rounded-full bg-gray-600 transition-all dark-theme:bg-white/50"
+          class="bg-accent-primary absolute top-0 left-0 h-full rounded-full transition-all"
           :style="{ width: `${progressPercentage}%` }"
         />
         <input
@@ -72,20 +70,20 @@
           role="button"
           :tabindex="0"
           aria-label="Volume"
-          class="flex size-6 cursor-pointer items-center justify-center rounded hover:bg-black/10 dark-theme:hover:bg-white/10"
+          class="flex size-6 cursor-pointer items-center justify-center rounded hover:bg-node-ring-hover"
           @click="toggleMute"
         >
           <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-node-component-header-icon"
           />
           <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-node-component-header-icon"
           />
           <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-node-component-header-icon"
           />
         </div>
 
@@ -96,11 +94,11 @@
           role="button"
           :tabindex="0"
           aria-label="More Options"
-          class="flex size-6 cursor-pointer items-center justify-center rounded hover:bg-black/10 dark-theme:hover:bg-white/10"
+          class="flex size-6 cursor-pointer items-center justify-center rounded hover:bg-node-ring-hover"
           @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-node-component-header-icon"
           />
         </div>
       </div>
@@ -111,15 +109,14 @@
         :model="menuItems"
         popup
         class="audio-player-menu"
-        pt:root:class="!bg-white dark-theme:!bg-charcoal-800 !border-sand-100 dark-theme:!border-charcoal-600"
-        pt:submenu:class="!bg-white dark-theme:!bg-charcoal-800"
+        pt:root:class="!bg-node-component-tooltip-surface !border-node-component-tooltip-border"
+        pt:submenu:class="!bg-node-component-tooltip-surface"
       >
         <template #item="{ item }">
           <div v-if="item.key === 'volume'" class="w-48 px-4 py-2">
-            <label
-              class="mb-2 block text-xs text-black dark-theme:text-white"
-              >{{ item.label }}</label
-            >
+            <label class="mb-2 block text-xs text-text-primary">{{
+              item.label
+            }}</label>
             <Slider
               :model-value="volume * 10"
               :min="0"
@@ -134,12 +131,10 @@
             class="flex cursor-pointer items-center px-4 py-2 text-xs hover:bg-white/10"
             @click="item.onClick?.()"
           >
-            <span class="text-black dark-theme:text-white">{{
-              item.label
-            }}</span>
+            <span class="text-text-primary">{{ item.label }}</span>
             <i
               v-if="item.selected"
-              class="ml-auto icon-[lucide--check] size-4 text-black dark-theme:text-white"
+              class="ml-auto icon-[lucide--check] size-4 text-text-primary"
             />
           </div>
         </template>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
index d70ab0e7b3..1be5e71164 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
@@ -16,12 +16,12 @@ const searchQuery = defineModel<string>('searchQuery')
 const sortSelected = defineModel<OptionId>('sortSelected')
 
 const actionButtonStyle =
-  'h-8 bg-zinc-500/20 rounded-lg outline outline-1 outline-offset-[-1px] outline-sand-100 dark-theme:outline-neutral-700 transition-all duration-150'
+  'h-8 bg-node-component-widget-input-surface rounded-lg outline outline-1 outline-offset-[-1px] outline-node-divider transition-all duration-150'
 
 const resetInputStyle = 'bg-transparent border-0 outline-0 ring-0 text-left'
 
 const layoutSwitchItemStyle =
-  'size-6 flex justify-center items-center rounded-sm cursor-pointer transition-all duration-150 hover:scale-108 hover:text-black hover:dark-theme:text-white active:scale-95'
+  'size-6 flex justify-center items-center rounded-sm cursor-pointer transition-all duration-150 hover:scale-108 hover:text-text-primary active:scale-95'
 
 const sortPopoverRef = useTemplateRef('sortPopoverRef')
 const sortTriggerRef = useTemplateRef('sortTriggerRef')
@@ -50,7 +50,7 @@ function handleSortSelected(item: SortOption) {
         cn(
           actionButtonStyle,
           'flex-1 flex px-2 items-center text-base leading-none cursor-text',
-          searchQuery?.trim() !== '' ? 'text-black dark-theme:text-white' : '',
+          searchQuery?.trim() !== '' ? 'text-text-primary' : '',
           'hover:!outline-blue-500/80',
           'focus-within:!outline-blue-500/80'
         )
@@ -109,8 +109,8 @@ function handleSortSelected(item: SortOption) {
         :class="
           cn(
             'flex flex-col gap-2 p-2 min-w-32',
-            'bg-zinc-200 dark-theme:bg-charcoal-700',
-            'rounded-lg outline outline-offset-[-1px] outline-sand-200 dark-theme:outline-zinc-700'
+            'bg-node-component-surface',
+            'rounded-lg outline outline-offset-[-1px] outline-node-divider'
           )
         "
       >
@@ -150,7 +150,7 @@ function handleSortSelected(item: SortOption) {
             resetInputStyle,
             layoutSwitchItemStyle,
             layoutMode === 'list'
-              ? 'bg-neutral-500/50 text-black dark-theme:text-white'
+              ? 'bg-node-component-surface-hovered text-text-primary'
               : ''
           )
         "
@@ -164,7 +164,7 @@ function handleSortSelected(item: SortOption) {
             resetInputStyle,
             layoutSwitchItemStyle,
             layoutMode === 'grid'
-              ? 'bg-neutral-500/50 text-black dark-theme:text-white'
+              ? 'bg-node-component-surface-hovered text-text-primary'
               : ''
           )
         "
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue
index d047fa2c06..a5d5a0b4ac 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue
@@ -19,10 +19,10 @@ const filterSelected = defineModel<OptionId>('filterSelected')
         cn(
           'px-4 py-2 rounded-md inline-flex justify-center items-center cursor-pointer select-none',
           'transition-all duration-150',
-          'hover:text-black hover:dark-theme:text-white hover:bg-zinc-500/10',
+          'hover:text-text-primary hover:bg-node-component-widget-input-surface',
           'active:scale-95',
           filterSelected === option.id
-            ? '!bg-zinc-500/20 text-black dark-theme:text-white'
+            ? '!bg-node-component-widget-input-surface text-text-primary'
             : 'bg-transparent'
         )
       "
diff --git a/src/types/buttonTypes.ts b/src/types/buttonTypes.ts
index 5c9fed88af..2916134c1e 100644
--- a/src/types/buttonTypes.ts
+++ b/src/types/buttonTypes.ts
@@ -23,12 +23,9 @@ export const getButtonSizeClasses = (size: ButtonSize = 'md') => {
 
 export const getButtonTypeClasses = (type: ButtonType = 'primary') => {
   const baseByType = {
-    primary:
-      'bg-neutral-900 border-none text-white dark-theme:bg-white dark-theme:text-neutral-900',
-    secondary:
-      'bg-white border-none text-neutral-950 dark-theme:bg-zinc-700 dark-theme:text-white',
-    transparent:
-      'bg-transparent border-none text-neutral-600 dark-theme:text-neutral-400'
+    primary: 'bg-button-surface-contrast border-none text-accent-contrast',
+    secondary: 'bg-button-surface border-none text-text-primary',
+    transparent: 'bg-transparent border-none text-text-secondary'
   } as const
 
   return baseByType[type]
@@ -36,18 +33,15 @@ export const getButtonTypeClasses = (type: ButtonType = 'primary') => {
 
 export const getBorderButtonTypeClasses = (type: ButtonType = 'primary') => {
   const baseByType = {
-    primary:
-      'bg-neutral-900 text-white dark-theme:bg-white dark-theme:text-neutral-900',
-    secondary:
-      'bg-white text-neutral-950 dark-theme:bg-zinc-700 dark-theme:text-white',
-    transparent: 'bg-transparent text-neutral-600 dark-theme:text-neutral-400'
+    primary: 'bg-button-surface-contrast text-accent-contrast',
+    secondary: 'bg-button-surface text-text-primary',
+    transparent: 'bg-transparent text-text-secondary'
   } as const
 
   const borderByType = {
-    primary: 'border border-solid border-white dark-theme:border-neutral-900',
-    secondary: 'border border-solid border-neutral-950 dark-theme:border-white',
-    transparent:
-      'border border-solid border-neutral-950 dark-theme:border-white'
+    primary: 'border border-solid border-accent-contrast',
+    secondary: 'border border-solid border-accent-primary',
+    transparent: 'border border-solid border-accent-primary'
   } as const
 
   return `${baseByType[type]} ${borderByType[type]}`
diff --git a/src/workbench/extensions/manager/components/ManagerProgressDialogContent.vue b/src/workbench/extensions/manager/components/ManagerProgressDialogContent.vue
index 97fafd43d6..0ca994a321 100644
--- a/src/workbench/extensions/manager/components/ManagerProgressDialogContent.vue
+++ b/src/workbench/extensions/manager/components/ManagerProgressDialogContent.vue
@@ -22,7 +22,7 @@
         <Panel
           :expanded="collapsedPanels[index] === true"
           toggleable
-          class="shadow-elevation-1 mt-2 rounded-lg dark-theme:border-black dark-theme:bg-black"
+          class="shadow-elevation-1 mt-2 rounded-lg border-modal-card-surface bg-modal-card-surface"
         >
           <template #header>
             <div class="flex w-full items-center justify-between py-2">
@@ -67,7 +67,7 @@
               <div
                 v-for="(logLine, logIndex) in log.logs"
                 :key="logIndex"
-                class="text-neutral-400 dark-theme:text-muted"
+                class="text-text-secondary"
               >
                 <pre class="break-words whitespace-pre-wrap">{{ logLine }}</pre>
               </div>
diff --git a/src/workbench/extensions/manager/components/ManagerProgressFooter.vue b/src/workbench/extensions/manager/components/ManagerProgressFooter.vue
index e008d95e9a..3677206441 100644
--- a/src/workbench/extensions/manager/components/ManagerProgressFooter.vue
+++ b/src/workbench/extensions/manager/components/ManagerProgressFooter.vue
@@ -32,7 +32,7 @@
           v-if="!isInProgress && !isRestartCompleted"
           rounded
           outlined
-          class="!dark-theme:bg-transparent mr-4 rounded-md border-2 border-neutral-900 px-3 text-neutral-600 hover:bg-neutral-100 dark-theme:border-white dark-theme:text-white dark-theme:hover:bg-neutral-800"
+          class="border-accent-primary mr-4 rounded-md border-2 px-3 text-text-secondary hover:bg-button-surface-hovered"
           @click="handleRestart"
         >
           {{ $t('manager.applyChanges') }}
diff --git a/src/workbench/extensions/manager/components/manager/ManagerDialogContent.vue b/src/workbench/extensions/manager/components/manager/ManagerDialogContent.vue
index 91e021f69a..8a823319cc 100644
--- a/src/workbench/extensions/manager/components/manager/ManagerDialogContent.vue
+++ b/src/workbench/extensions/manager/components/manager/ManagerDialogContent.vue
@@ -20,7 +20,7 @@
         :tabs="tabs"
       />
       <div
-        class="flex-1 overflow-auto bg-gray-50 dark-theme:bg-neutral-900"
+        class="flex-1 overflow-auto bg-modal-background"
         :class="{
           'transition-all duration-300': isSmallScreen
         }"
@@ -51,9 +51,7 @@
               type="transparent"
               @click="dismissWarningBanner"
             >
-              <i
-                class="pi pi-times text-xs text-neutral-900 dark-theme:text-white"
-              ></i>
+              <i class="pi pi-times text-xs text-text-primary"></i>
             </IconButton>
           </div>
           <RegistrySearchBar
diff --git a/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue b/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue
index 1425a21c4a..0ee14c79c8 100644
--- a/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue
+++ b/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue
@@ -4,9 +4,7 @@
     <div class="flex h-full w-full flex-col gap-2 px-4 py-6">
       <!-- Description -->
       <div v-if="showAfterWhatsNew">
-        <p
-          class="m-0 mb-4 text-sm leading-4 text-neutral-800 dark-theme:text-white"
-        >
+        <p class="m-0 mb-4 text-sm leading-4 text-text-primary">
           {{ $t('manager.conflicts.description') }}
           <br /><br />
           {{ $t('manager.conflicts.info') }}
@@ -16,7 +14,7 @@
       <!-- Import Failed List Wrapper -->
       <div
         v-if="importFailedConflicts.length > 0"
-        class="flex min-h-8 w-full flex-col rounded-lg bg-neutral-200 dark-theme:bg-black"
+        class="flex min-h-8 w-full flex-col rounded-lg bg-modal-panel-surface"
       >
         <div
           data-testid="conflict-dialog-panel-toggle"
@@ -24,14 +22,12 @@
           @click="toggleImportFailedPanel"
         >
           <div class="flex flex-1">
-            <span
-              class="mr-2 text-xs font-bold text-yellow-600 dark-theme:text-yellow-400"
-              >{{ importFailedConflicts.length }}</span
-            >
-            <span
-              class="text-xs font-bold text-neutral-600 dark-theme:text-white"
-              >{{ $t('manager.conflicts.importFailedExtensions') }}</span
-            >
+            <span class="mr-2 text-xs font-bold text-text-warning">{{
+              importFailedConflicts.length
+            }}</span>
+            <span class="text-xs font-bold text-text-primary">{{
+              $t('manager.conflicts.importFailedExtensions')
+            }}</span>
           </div>
           <div>
             <Button
@@ -41,7 +37,7 @@
                   : 'pi pi-chevron-right text-xs'
               "
               text
-              class="!bg-transparent text-neutral-600 dark-theme:text-neutral-300"
+              class="!bg-transparent text-text-secondary"
             />
           </div>
         </div>
@@ -56,7 +52,7 @@
             :key="i"
             class="conflict-list-item flex h-6 flex-shrink-0 items-center justify-between px-4"
           >
-            <span class="text-xs text-neutral-600 dark-theme:text-neutral-300">
+            <span class="text-xs text-text-secondary">
               {{ packageName }}
             </span>
             <span class="pi pi-info-circle text-sm"></span>
@@ -65,7 +61,7 @@
       </div>
       <!-- Conflict List Wrapper -->
       <div
-        class="flex min-h-8 w-full flex-col rounded-lg bg-neutral-200 dark-theme:bg-black"
+        class="flex min-h-8 w-full flex-col rounded-lg bg-modal-panel-surface"
       >
         <div
           data-testid="conflict-dialog-panel-toggle"
@@ -73,14 +69,12 @@
           @click="toggleConflictsPanel"
         >
           <div class="flex flex-1">
-            <span
-              class="mr-2 text-xs font-bold text-yellow-600 dark-theme:text-yellow-400"
-              >{{ allConflictDetails.length }}</span
-            >
-            <span
-              class="text-xs font-bold text-neutral-600 dark-theme:text-white"
-              >{{ $t('manager.conflicts.conflicts') }}</span
-            >
+            <span class="mr-2 text-xs font-bold text-text-warning">{{
+              allConflictDetails.length
+            }}</span>
+            <span class="text-xs font-bold text-text-primary">{{
+              $t('manager.conflicts.conflicts')
+            }}</span>
           </div>
           <div>
             <Button
@@ -90,7 +84,7 @@
                   : 'pi pi-chevron-right text-xs'
               "
               text
-              class="!bg-transparent text-neutral-600 dark-theme:text-neutral-300"
+              class="!bg-transparent text-text-secondary"
             />
           </div>
         </div>
@@ -105,17 +99,16 @@
             :key="i"
             class="conflict-list-item flex h-6 flex-shrink-0 items-center justify-between px-4"
           >
-            <span
-              class="text-xs text-neutral-600 dark-theme:text-neutral-300"
-              >{{ getConflictMessage(conflict, t) }}</span
-            >
+            <span class="text-xs text-text-secondary">{{
+              getConflictMessage(conflict, t)
+            }}</span>
             <span class="pi pi-info-circle text-sm"></span>
           </div>
         </div>
       </div>
       <!-- Extension List Wrapper -->
       <div
-        class="flex min-h-8 w-full flex-col rounded-lg bg-neutral-200 dark-theme:bg-black"
+        class="flex min-h-8 w-full flex-col rounded-lg bg-modal-panel-surface"
       >
         <div
           data-testid="conflict-dialog-panel-toggle"
@@ -123,14 +116,12 @@
           @click="toggleExtensionsPanel"
         >
           <div class="flex flex-1">
-            <span
-              class="mr-2 text-xs font-bold text-yellow-600 dark-theme:text-yellow-400"
-              >{{ conflictData.length }}</span
-            >
-            <span
-              class="text-xs font-bold text-neutral-600 dark-theme:text-white"
-              >{{ $t('manager.conflicts.extensionAtRisk') }}</span
-            >
+            <span class="mr-2 text-xs font-bold text-text-warning">{{
+              conflictData.length
+            }}</span>
+            <span class="text-xs font-bold text-text-primary">{{
+              $t('manager.conflicts.extensionAtRisk')
+            }}</span>
           </div>
           <div>
             <Button
@@ -140,7 +131,7 @@
                   : 'pi pi-chevron-right text-xs'
               "
               text
-              class="!bg-transparent text-neutral-600 dark-theme:text-neutral-300"
+              class="!bg-transparent text-text-secondary"
             />
           </div>
         </div>
@@ -155,7 +146,7 @@
             :key="conflictResult.package_id"
             class="conflict-list-item flex h-6 flex-shrink-0 items-center justify-between px-4"
           >
-            <span class="text-xs text-neutral-600 dark-theme:text-neutral-300">
+            <span class="text-xs text-text-secondary">
               {{ conflictResult.package_name }}
             </span>
             <span class="pi pi-info-circle text-sm"></span>
diff --git a/src/workbench/extensions/manager/components/manager/PackVersionSelectorPopover.vue b/src/workbench/extensions/manager/components/manager/PackVersionSelectorPopover.vue
index 643427d796..bf7c645722 100644
--- a/src/workbench/extensions/manager/components/manager/PackVersionSelectorPopover.vue
+++ b/src/workbench/extensions/manager/components/manager/PackVersionSelectorPopover.vue
@@ -71,7 +71,7 @@
       <Button
         severity="secondary"
         :label="$t('g.install')"
-        class="dark-theme:bg-unset dark-theme:text-unset rounded-lg bg-black/80 px-4 py-2.5 text-sm text-neutral-100"
+        class="rounded-lg bg-button-surface-contrast px-4 py-2.5 text-sm text-text-contrast"
         :disabled="isQueueing"
         @click="handleSubmit"
       />
diff --git a/src/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue
index 853728074e..0ee1620af8 100644
--- a/src/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue
@@ -6,7 +6,7 @@
       @click="showImportFailedDialog"
     >
       <i class="pi pi-code text-base"></i>
-      <span class="text-sm dark-theme:text-white">{{
+      <span class="text-sm text-text-primary">{{
         t('serverStart.openLogs')
       }}</span>
     </button>
diff --git a/src/workbench/extensions/manager/components/manager/packCard/PackCard.vue b/src/workbench/extensions/manager/components/manager/packCard/PackCard.vue
index 9013b5e550..46174704ae 100644
--- a/src/workbench/extensions/manager/components/manager/packCard/PackCard.vue
+++ b/src/workbench/extensions/manager/components/manager/packCard/PackCard.vue
@@ -1,6 +1,6 @@
 <template>
   <Card
-    class="shadow-elevation-3 inline-flex h-full w-full flex-col items-start justify-between overflow-hidden rounded-lg transition-all duration-200 dark-theme:bg-dark-elevation-2"
+    class="shadow-elevation-3 inline-flex h-full w-full flex-col items-start justify-between overflow-hidden rounded-lg bg-modal-card-surface transition-all duration-200"
     :class="{
       'selected-card': isSelected,
       'opacity-60': isDisabled
diff --git a/tests-ui/tests/components/dialog/content/manager/NodeConflictDialogContent.test.ts b/tests-ui/tests/components/dialog/content/manager/NodeConflictDialogContent.test.ts
index 51a1821a88..081f13b8b9 100644
--- a/tests-ui/tests/components/dialog/content/manager/NodeConflictDialogContent.test.ts
+++ b/tests-ui/tests/components/dialog/content/manager/NodeConflictDialogContent.test.ts
@@ -186,14 +186,14 @@ describe('NodeConflictDialogContent', () => {
 
       // Import Failed Extensions section should show 1 package
       const importFailedSection = wrapper.findAll(
-        '.w-full.flex.flex-col.bg-neutral-200'
+        '.w-full.flex.flex-col.bg-modal-panel-surface'
       )[0]
       expect(importFailedSection.text()).toContain('1')
       expect(importFailedSection.text()).toContain('Import Failed Extensions')
 
       // Conflicts section should show 3 conflicts (excluding import_failed)
       const conflictsSection = wrapper.findAll(
-        '.w-full.flex.flex-col.bg-neutral-200'
+        '.w-full.flex.flex-col.bg-modal-panel-surface'
       )[1]
       expect(conflictsSection.text()).toContain('3')
       expect(conflictsSection.text()).toContain('Conflicts')