diff --git a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxColorSchemeDialog/auto.svg b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxColorSchemeDialog/auto.svg
index 2701723a91..01fdff6910 100644
--- a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxColorSchemeDialog/auto.svg
+++ b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxColorSchemeDialog/auto.svg
@@ -5,52 +5,52 @@
 </mask>
 <g mask="url(#mask0_4499_144781)">
 <path d="M0.5 4C0.5 2.06701 2.067 0.5 4 0.5H162C163.933 0.5 165.5 2.067 165.5 4V100C165.5 101.933 163.933 103.5 162 103.5H4C2.067 103.5 0.5 101.933 0.5 100V4Z" fill="white"/>
-<path d="M0.5 4C0.5 2.06701 2.067 0.5 4 0.5H162C163.933 0.5 165.5 2.067 165.5 4V100C165.5 101.933 163.933 103.5 162 103.5H4C2.067 103.5 0.5 101.933 0.5 100V4Z" stroke="var(--onyx-color-themed-neutral-300)"/>
+<path d="M0.5 4C0.5 2.06701 2.067 0.5 4 0.5H162C163.933 0.5 165.5 2.067 165.5 4V100C165.5 101.933 163.933 103.5 162 103.5H4C2.067 103.5 0.5 101.933 0.5 100V4Z" stroke="var(--onyx-color-steel-300)"/>
 <g filter="url(#filter0_d_4499_144781)">
 <g clip-path="url(#clip1_4499_144781)">
 <mask id="path-5-inside-1_4499_144781" fill="white">
 <path d="M16 16H166V36H16V16Z"/>
 </mask>
 <path d="M16 16H166V36H16V16Z" fill="white"/>
-<path d="M166 35H16V37H166V35Z" fill="var(--onyx-color-themed-neutral-300)" mask="url(#path-5-inside-1_4499_144781)"/>
+<path d="M166 35H16V37H166V35Z" fill="var(--onyx-color-steel-300)" mask="url(#path-5-inside-1_4499_144781)"/>
 <rect x="28" y="24" width="40" height="4" fill="var(--onyx-color-themed-primary-500)"/>
-<rect x="77" y="24" width="40" height="4" fill="var(--onyx-color-themed-neutral-300)"/>
+<rect x="77" y="24" width="40" height="4" fill="var(--onyx-color-steel-300)"/>
 <mask id="path-9-inside-2_4499_144781" fill="white">
 <path d="M16 36H44V104H16V36Z"/>
 </mask>
 <path d="M16 36H44V104H16V36Z" fill="white"/>
-<path d="M43 36V104H45V36H43Z" fill="var(--onyx-color-themed-neutral-300)" mask="url(#path-9-inside-2_4499_144781)"/>
-<rect width="122" height="68" transform="translate(44 36)" fill="var(--onyx-color-themed-neutral-100)"/>
-<rect x="56" y="48" width="54" height="8" fill="var(--onyx-color-themed-neutral-600)"/>
-<rect x="56" y="64" width="82" height="4" fill="var(--onyx-color-themed-neutral-500)"/>
-<rect x="56" y="76" width="66" height="4" fill="var(--onyx-color-themed-neutral-500)"/>
-<rect x="56" y="88" width="97" height="4" fill="var(--onyx-color-themed-neutral-500)"/>
+<path d="M43 36V104H45V36H43Z" fill="var(--onyx-color-steel-300)" mask="url(#path-9-inside-2_4499_144781)"/>
+<rect width="122" height="68" transform="translate(44 36)" fill="var(--onyx-color-steel-100)"/>
+<rect x="56" y="48" width="54" height="8" fill="var(--onyx-color-steel-600)"/>
+<rect x="56" y="64" width="82" height="4" fill="var(--onyx-color-steel-500)"/>
+<rect x="56" y="76" width="66" height="4" fill="var(--onyx-color-steel-500)"/>
+<rect x="56" y="88" width="97" height="4" fill="var(--onyx-color-steel-500)"/>
 </g>
-<path d="M16.5 32C16.5 23.4396 23.4396 16.5 32 16.5H165.5V103.5H16.5V32Z" stroke="var(--onyx-color-themed-neutral-300)" shape-rendering="crispEdges"/>
+<path d="M16.5 32C16.5 23.4396 23.4396 16.5 32 16.5H165.5V103.5H16.5V32Z" stroke="var(--onyx-color-steel-300)" shape-rendering="crispEdges"/>
 </g>
 </g>
 <mask id="mask1_4499_144781" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="83" y="0" width="83" height="104">
 <path d="M83 0H166V100C166 102.209 164.209 104 162 104H83V0Z" fill="#D9D9D9"/>
 </mask>
 <g mask="url(#mask1_4499_144781)">
-<path d="M0.5 4C0.5 2.06701 2.067 0.5 4 0.5H162C163.933 0.5 165.5 2.067 165.5 4V100C165.5 101.933 163.933 103.5 162 103.5H4C2.067 103.5 0.5 101.933 0.5 100V4Z" fill="var(--onyx-color-themed-neutral-1100)"/>
-<path d="M0.5 4C0.5 2.06701 2.067 0.5 4 0.5H162C163.933 0.5 165.5 2.067 165.5 4V100C165.5 101.933 163.933 103.5 162 103.5H4C2.067 103.5 0.5 101.933 0.5 100V4Z" stroke="var(--onyx-color-themed-neutral-900)"/>
+<path d="M0.5 4C0.5 2.06701 2.067 0.5 4 0.5H162C163.933 0.5 165.5 2.067 165.5 4V100C165.5 101.933 163.933 103.5 162 103.5H4C2.067 103.5 0.5 101.933 0.5 100V4Z" fill="var(--onyx-color-steel-1100)"/>
+<path d="M0.5 4C0.5 2.06701 2.067 0.5 4 0.5H162C163.933 0.5 165.5 2.067 165.5 4V100C165.5 101.933 163.933 103.5 162 103.5H4C2.067 103.5 0.5 101.933 0.5 100V4Z" stroke="var(--onyx-color-steel-900)"/>
 <g filter="url(#filter1_d_4499_144781)">
 <g clip-path="url(#clip2_4499_144781)">
 <mask id="path-19-inside-3_4499_144781" fill="white">
 <path d="M16 16H166V36H16V16Z"/>
 </mask>
-<path d="M16 16H166V36H16V16Z" fill="var(--onyx-color-themed-neutral-1100)"/>
-<path d="M166 35H16V37H166V35Z" fill="var(--onyx-color-themed-neutral-900)" mask="url(#path-19-inside-3_4499_144781)"/>
-<rect x="77" y="24" width="40" height="4" fill="var(--onyx-color-themed-neutral-900)"/>
-<rect x="126" y="24" width="40" height="4" fill="var(--onyx-color-themed-neutral-900)"/>
-<rect width="122" height="68" transform="translate(44 36)" fill="var(--onyx-color-themed-neutral-1200)"/>
-<rect x="56" y="48" width="54" height="8" fill="var(--onyx-color-themed-neutral-400)"/>
-<rect x="56" y="64" width="82" height="4" fill="var(--onyx-color-themed-neutral-500)"/>
-<rect x="56" y="76" width="66" height="4" fill="var(--onyx-color-themed-neutral-500)"/>
-<rect x="56" y="88" width="97" height="4" fill="var(--onyx-color-themed-neutral-500)"/>
+<path d="M16 16H166V36H16V16Z" fill="var(--onyx-color-steel-1100)"/>
+<path d="M166 35H16V37H166V35Z" fill="var(--onyx-color-steel-900)" mask="url(#path-19-inside-3_4499_144781)"/>
+<rect x="77" y="24" width="40" height="4" fill="var(--onyx-color-steel-900)"/>
+<rect x="126" y="24" width="40" height="4" fill="var(--onyx-color-steel-900)"/>
+<rect width="122" height="68" transform="translate(44 36)" fill="var(--onyx-color-steel-1200)"/>
+<rect x="56" y="48" width="54" height="8" fill="var(--onyx-color-steel-400)"/>
+<rect x="56" y="64" width="82" height="4" fill="var(--onyx-color-steel-500)"/>
+<rect x="56" y="76" width="66" height="4" fill="var(--onyx-color-steel-500)"/>
+<rect x="56" y="88" width="97" height="4" fill="var(--onyx-color-steel-500)"/>
 </g>
-<path d="M16.5 32C16.5 23.4396 23.4396 16.5 32 16.5H165.5V103.5H16.5V32Z" stroke="var(--onyx-color-themed-neutral-900)" shape-rendering="crispEdges"/>
+<path d="M16.5 32C16.5 23.4396 23.4396 16.5 32 16.5H165.5V103.5H16.5V32Z" stroke="var(--onyx-color-steel-900)" shape-rendering="crispEdges"/>
 </g>
 </g>
 </g>
diff --git a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxColorSchemeDialog/dark.svg b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxColorSchemeDialog/dark.svg
index 99b75aca1b..3a3fcbe49d 100644
--- a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxColorSchemeDialog/dark.svg
+++ b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxColorSchemeDialog/dark.svg
@@ -1,31 +1,31 @@
 <svg width="166" height="104" viewBox="0 0 166 104" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_4499_144833)">
-<path d="M0 4C0 1.79086 1.79086 0 4 0H162C164.209 0 166 1.79086 166 4V100C166 102.209 164.209 104 162 104H4C1.79086 104 0 102.209 0 100V4Z" fill="var(--onyx-color-themed-neutral-1100)"/>
+<path d="M0 4C0 1.79086 1.79086 0 4 0H162C164.209 0 166 1.79086 166 4V100C166 102.209 164.209 104 162 104H4C1.79086 104 0 102.209 0 100V4Z" fill="var(--onyx-color-steel-1100"/>
 <g filter="url(#filter0_d_4499_144833)">
 <g clip-path="url(#clip1_4499_144833)">
 <mask id="path-5-inside-1_4499_144833" fill="white">
 <path d="M16 16H166V36H16V16Z"/>
 </mask>
-<path d="M16 16H166V36H16V16Z" fill="var(--onyx-color-themed-neutral-1100)"/>
-<path d="M166 35H16V37H166V35Z" fill="var(--onyx-color-themed-neutral-900)" mask="url(#path-5-inside-1_4499_144833)"/>
+<path d="M16 16H166V36H16V16Z" fill="var(--onyx-color-steel-1100)"/>
+<path d="M166 35H16V37H166V35Z" fill="var(--onyx-color-steel-900)" mask="url(#path-5-inside-1_4499_144833)"/>
 <rect x="28" y="24" width="40" height="4" fill="var(--onyx-color-themed-primary-500)"/>
-<rect x="77" y="24" width="40" height="4" fill="var(--onyx-color-themed-neutral-900)"/>
-<rect x="126" y="24" width="40" height="4" fill="var(--onyx-color-themed-neutral-900)"/>
+<rect x="77" y="24" width="40" height="4" fill="var(--onyx-color-steel-900)"/>
+<rect x="126" y="24" width="40" height="4" fill="var(--onyx-color-steel-900)"/>
 <mask id="path-10-inside-2_4499_144833" fill="white">
 <path d="M16 36H44V104H16V36Z"/>
 </mask>
-<path d="M16 36H44V104H16V36Z" fill="var(--onyx-color-themed-neutral-1100)"/>
-<path d="M43 36V104H45V36H43Z" fill="var(--onyx-color-themed-neutral-900)" mask="url(#path-10-inside-2_4499_144833)"/>
-<rect width="122" height="68" transform="translate(44 36)" fill="var(--onyx-color-themed-neutral-1200)"/>
-<rect x="56" y="48" width="54" height="8" fill="var(--onyx-color-themed-neutral-400)"/>
-<rect x="56" y="64" width="82" height="4" fill="var(--onyx-color-themed-neutral-500)"/>
-<rect x="56" y="76" width="66" height="4" fill="var(--onyx-color-themed-neutral-500)"/>
-<rect x="56" y="88" width="97" height="4" fill="var(--onyx-color-themed-neutral-500)"/>
+<path d="M16 36H44V104H16V36Z" fill="var(--onyx-color-steel-1100)"/>
+<path d="M43 36V104H45V36H43Z" fill="var(--onyx-color-steel-900)" mask="url(#path-10-inside-2_4499_144833)"/>
+<rect width="122" height="68" transform="translate(44 36)" fill="var(--onyx-color-steel-1200)"/>
+<rect x="56" y="48" width="54" height="8" fill="var(--onyx-color-steel-400)"/>
+<rect x="56" y="64" width="82" height="4" fill="var(--onyx-color-steel-500)"/>
+<rect x="56" y="76" width="66" height="4" fill="var(--onyx-color-steel-500)"/>
+<rect x="56" y="88" width="97" height="4" fill="var(--onyx-color-steel-500)"/>
 </g>
-<path d="M16.5 32C16.5 23.4396 23.4396 16.5 32 16.5H165.5V103.5H16.5V32Z" stroke="var(--onyx-color-themed-neutral-900)" shape-rendering="crispEdges"/>
+<path d="M16.5 32C16.5 23.4396 23.4396 16.5 32 16.5H165.5V103.5H16.5V32Z" stroke="var(--onyx-color-steel-900)" shape-rendering="crispEdges"/>
 </g>
 </g>
-<path d="M0.5 4C0.5 2.06701 2.067 0.5 4 0.5H162C163.933 0.5 165.5 2.067 165.5 4V100C165.5 101.933 163.933 103.5 162 103.5H4C2.067 103.5 0.5 101.933 0.5 100V4Z" stroke="var(--onyx-color-themed-neutral-900)"/>
+<path d="M0.5 4C0.5 2.06701 2.067 0.5 4 0.5H162C163.933 0.5 165.5 2.067 165.5 4V100C165.5 101.933 163.933 103.5 162 103.5H4C2.067 103.5 0.5 101.933 0.5 100V4Z" stroke="var(--onyx-color-steel-900)"/>
 <defs>
 <filter id="filter0_d_4499_144833" x="8" y="10" width="166" height="104" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
diff --git a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxColorSchemeDialog/light.svg b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxColorSchemeDialog/light.svg
index dfc29a75e4..b8677fd8d4 100644
--- a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxColorSchemeDialog/light.svg
+++ b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxColorSchemeDialog/light.svg
@@ -7,25 +7,25 @@
 <path d="M16 16H166V36H16V16Z"/>
 </mask>
 <path d="M16 16H166V36H16V16Z" fill="white"/>
-<path d="M166 35H16V37H166V35Z" fill="var(--onyx-color-themed-neutral-300)" mask="url(#path-5-inside-1_4499_144816)"/>
+<path d="M166 35H16V37H166V35Z" fill="var(--onyx-color-steel-300)" mask="url(#path-5-inside-1_4499_144816)"/>
 <rect x="28" y="24" width="40" height="4" fill="var(--onyx-color-themed-primary-500)"/>
-<rect x="77" y="24" width="40" height="4" fill="var(--onyx-color-themed-neutral-300)"/>
-<rect x="126" y="24" width="40" height="4" fill="var(--onyx-color-themed-neutral-300)"/>
+<rect x="77" y="24" width="40" height="4" fill="var(--onyx-color-steel-300)"/>
+<rect x="126" y="24" width="40" height="4" fill="var(--onyx-color-steel-300)"/>
 <mask id="path-10-inside-2_4499_144816" fill="white">
 <path d="M16 36H44V104H16V36Z"/>
 </mask>
 <path d="M16 36H44V104H16V36Z" fill="white"/>
-<path d="M43 36V104H45V36H43Z" fill="var(--onyx-color-themed-neutral-300)" mask="url(#path-10-inside-2_4499_144816)"/>
-<rect width="122" height="68" transform="translate(44 36)" fill="var(--onyx-color-themed-neutral-100)"/>
-<rect x="56" y="48" width="54" height="8" fill="var(--onyx-color-themed-neutral-600)"/>
-<rect x="56" y="64" width="82" height="4" fill="var(--onyx-color-themed-neutral-500)"/>
-<rect x="56" y="76" width="66" height="4" fill="var(--onyx-color-themed-neutral-500)"/>
-<rect x="56" y="88" width="97" height="4" fill="var(--onyx-color-themed-neutral-500)"/>
+<path d="M43 36V104H45V36H43Z" fill="var(--onyx-color-steel-300)" mask="url(#path-10-inside-2_4499_144816)"/>
+<rect width="122" height="68" transform="translate(44 36)" fill="var(--onyx-color-steel-100)"/>
+<rect x="56" y="48" width="54" height="8" fill="var(--onyx-color-steel-600)"/>
+<rect x="56" y="64" width="82" height="4" fill="var(--onyx-color-steel-500)"/>
+<rect x="56" y="76" width="66" height="4" fill="var(--onyx-color-steel-500)"/>
+<rect x="56" y="88" width="97" height="4" fill="var(--onyx-color-steel-500)"/>
 </g>
-<path d="M16.5 32C16.5 23.4396 23.4396 16.5 32 16.5H165.5V103.5H16.5V32Z" stroke="var(--onyx-color-themed-neutral-300)" shape-rendering="crispEdges"/>
+<path d="M16.5 32C16.5 23.4396 23.4396 16.5 32 16.5H165.5V103.5H16.5V32Z" stroke="var(--onyx-color-steel-300)" shape-rendering="crispEdges"/>
 </g>
 </g>
-<path d="M0.5 4C0.5 2.06701 2.067 0.5 4 0.5H162C163.933 0.5 165.5 2.067 165.5 4V100C165.5 101.933 163.933 103.5 162 103.5H4C2.067 103.5 0.5 101.933 0.5 100V4Z" stroke="var(--onyx-color-themed-neutral-300)"/>
+<path d="M0.5 4C0.5 2.06701 2.067 0.5 4 0.5H162C163.933 0.5 165.5 2.067 165.5 4V100C165.5 101.933 163.933 103.5 162 103.5H4C2.067 103.5 0.5 101.933 0.5 100V4Z" stroke="var(--onyx-color-steel-300)"/>
 <defs>
 <filter id="filter0_d_4499_144816" x="8" y="10" width="166" height="104" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
diff --git a/packages/storybook-utils/src/style.css b/packages/storybook-utils/src/style.css
index f6a7cf7af8..1420d3fd9b 100644
--- a/packages/storybook-utils/src/style.css
+++ b/packages/storybook-utils/src/style.css
@@ -40,18 +40,18 @@
  */
 :where(:root),
 .onyx-theme-default {
-  --onyx-color-themed-neutral-100: #fafbfc;
-  --onyx-color-themed-neutral-200: #e3eaf0;
-  --onyx-color-themed-neutral-300: #c9d6e0;
-  --onyx-color-themed-neutral-400: #9db3c4;
-  --onyx-color-themed-neutral-500: #7392aa;
-  --onyx-color-themed-neutral-600: #506e84;
-  --onyx-color-themed-neutral-700: #3e596e;
-  --onyx-color-themed-neutral-800: #31495c;
-  --onyx-color-themed-neutral-900: #22384a;
-  --onyx-color-themed-neutral-1000: #11212d;
-  --onyx-color-themed-neutral-1100: #081723;
-  --onyx-color-themed-neutral-1200: #000e19;
+  --onyx-color-steel-100: #fafbfc;
+  --onyx-color-steel-200: #e3eaf0;
+  --onyx-color-steel-300: #c9d6e0;
+  --onyx-color-steel-400: #9db3c4;
+  --onyx-color-steel-500: #7392aa;
+  --onyx-color-steel-600: #506e84;
+  --onyx-color-steel-700: #3e596e;
+  --onyx-color-steel-800: #31495c;
+  --onyx-color-steel-900: #22384a;
+  --onyx-color-steel-1000: #11212d;
+  --onyx-color-steel-1100: #081723;
+  --onyx-color-steel-1200: #000e19;
   --onyx-color-themed-primary-100: #e8fcfc;
   --onyx-color-themed-primary-200: #bbeaed;
   --onyx-color-themed-primary-300: #79dde2;
diff --git a/packages/storybook-utils/src/theme.ts b/packages/storybook-utils/src/theme.ts
index 7b25dcefb6..e969b3fe7a 100644
--- a/packages/storybook-utils/src/theme.ts
+++ b/packages/storybook-utils/src/theme.ts
@@ -44,20 +44,20 @@ export const createTheme = (base: "light" | "dark" = "light", brandDetails?: Bra
 const getLightTheme = (): Partial<ThemeVars> => {
   return defineTheme({
     background: getCustomProperty("--onyx-color-universal-grayscale-white"),
-    contentBackground: getCustomProperty("--onyx-color-themed-neutral-100"),
-    text: getCustomProperty("--onyx-color-themed-neutral-700"),
-    textMuted: getCustomProperty("--onyx-color-themed-neutral-600"),
-    border: getCustomProperty("--onyx-color-themed-neutral-300"),
+    contentBackground: getCustomProperty("--onyx-color-steel-100"),
+    text: getCustomProperty("--onyx-color-steel-700"),
+    textMuted: getCustomProperty("--onyx-color-steel-600"),
+    border: getCustomProperty("--onyx-color-steel-300"),
   });
 };
 
 const getDarkTheme = (): Partial<ThemeVars> => {
   return defineTheme({
-    background: getCustomProperty("--onyx-color-themed-neutral-1100"),
-    contentBackground: getCustomProperty("--onyx-color-themed-neutral-1200"),
-    text: getCustomProperty("--onyx-color-themed-neutral-200"),
-    textMuted: getCustomProperty("--onyx-color-themed-neutral-400"),
-    border: getCustomProperty("--onyx-color-themed-neutral-900"),
+    background: getCustomProperty("--onyx-color-steel-1100"),
+    contentBackground: getCustomProperty("--onyx-color-steel-1200"),
+    text: getCustomProperty("--onyx-color-steel-200"),
+    textMuted: getCustomProperty("--onyx-color-steel-400"),
+    border: getCustomProperty("--onyx-color-steel-900"),
   });
 };