diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
index 2f511331c7..273312f821 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -130,6 +130,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-background-item-selected": "#f1faff",
   "color-background-layout-main": "#f2f3f3",
   "color-background-layout-mobile-panel": "#ffffff",
+  "color-background-layout-panel": "#ffffff",
   "color-background-layout-panel-content": "#ffffff",
   "color-background-layout-panel-hover": "#eaeded",
   "color-background-layout-toggle-active": "#2a2e33",
@@ -1023,6 +1024,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-background-item-selected": "#12293b",
   "color-background-layout-main": "#16191f",
   "color-background-layout-mobile-panel": "#2a2e33",
+  "color-background-layout-panel": "#2a2e33",
   "color-background-layout-panel-content": "#2a2e33",
   "color-background-layout-panel-hover": "#414750",
   "color-background-layout-toggle-active": "#2a2e33",
@@ -1916,6 +1918,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-background-item-selected": "#f1faff",
   "color-background-layout-main": "#f2f3f3",
   "color-background-layout-mobile-panel": "#ffffff",
+  "color-background-layout-panel": "#ffffff",
   "color-background-layout-panel-content": "#ffffff",
   "color-background-layout-panel-hover": "#eaeded",
   "color-background-layout-toggle-active": "#2a2e33",
@@ -2809,6 +2812,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-background-item-selected": "#f1faff",
   "color-background-layout-main": "#f2f3f3",
   "color-background-layout-mobile-panel": "#ffffff",
+  "color-background-layout-panel": "#ffffff",
   "color-background-layout-panel-content": "#ffffff",
   "color-background-layout-panel-hover": "#eaeded",
   "color-background-layout-toggle-active": "#2a2e33",
@@ -3702,6 +3706,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-background-item-selected": "#f0fbff",
   "color-background-layout-main": "#ffffff",
   "color-background-layout-mobile-panel": "#0f141a",
+  "color-background-layout-panel": "#ffffff",
   "color-background-layout-panel-content": "#ffffff",
   "color-background-layout-panel-hover": "#ebebf0",
   "color-background-layout-toggle-active": "#424650",
@@ -4595,6 +4600,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-item-selected": "#f0fbff",
   "color-background-layout-main": "#ffffff",
   "color-background-layout-mobile-panel": "#0f141a",
+  "color-background-layout-panel": "#ffffff",
   "color-background-layout-panel-content": "#ffffff",
   "color-background-layout-panel-hover": "#ebebf0",
   "color-background-layout-toggle-active": "#424650",
@@ -5488,6 +5494,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-item-selected": "#001129",
   "color-background-layout-main": "#0f141a",
   "color-background-layout-mobile-panel": "#0f141a",
+  "color-background-layout-panel": "#161d26",
   "color-background-layout-panel-content": "#161d26",
   "color-background-layout-panel-hover": "#333843",
   "color-background-layout-toggle-active": "#424650",
@@ -6381,6 +6388,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-item-selected": "#001129",
   "color-background-layout-main": "#161d26",
   "color-background-layout-mobile-panel": "#0f141a",
+  "color-background-layout-panel": "#161d26",
   "color-background-layout-panel-content": "#161d26",
   "color-background-layout-panel-hover": "#333843",
   "color-background-layout-toggle-active": "#424650",
diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
index b1c343d1cf..4d51a42a90 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
@@ -455,6 +455,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#f2f3f3",
           },
         },
+        "color-background-layout-panel": {
+          "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer.",
+          "$value": {
+            "dark": "#2a2e33",
+            "light": "#ffffff",
+          },
+        },
         "color-background-layout-toggle-active": {
           "$description": "The background color of the app layout toggle button when it's active.",
           "$value": {
@@ -3846,6 +3853,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#f2f3f3",
           },
         },
+        "color-background-layout-panel": {
+          "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer.",
+          "$value": {
+            "dark": "#2a2e33",
+            "light": "#ffffff",
+          },
+        },
         "color-background-layout-toggle-active": {
           "$description": "The background color of the app layout toggle button when it's active.",
           "$value": {
@@ -7237,6 +7251,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#f2f3f3",
           },
         },
+        "color-background-layout-panel": {
+          "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer.",
+          "$value": {
+            "dark": "#2a2e33",
+            "light": "#ffffff",
+          },
+        },
         "color-background-layout-toggle-active": {
           "$description": "The background color of the app layout toggle button when it's active.",
           "$value": {
@@ -10628,6 +10649,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#f2f3f3",
           },
         },
+        "color-background-layout-panel": {
+          "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer.",
+          "$value": {
+            "dark": "#2a2e33",
+            "light": "#ffffff",
+          },
+        },
         "color-background-layout-toggle-active": {
           "$description": "The background color of the app layout toggle button when it's active.",
           "$value": {
@@ -14019,6 +14047,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#f2f3f3",
           },
         },
+        "color-background-layout-panel": {
+          "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer.",
+          "$value": {
+            "dark": "#2a2e33",
+            "light": "#ffffff",
+          },
+        },
         "color-background-layout-toggle-active": {
           "$description": "The background color of the app layout toggle button when it's active.",
           "$value": {
@@ -17410,6 +17445,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#16191f",
           },
         },
+        "color-background-layout-panel": {
+          "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer.",
+          "$value": {
+            "dark": "#232f3e",
+            "light": "#232f3e",
+          },
+        },
         "color-background-layout-toggle-active": {
           "$description": "The background color of the app layout toggle button when it's active.",
           "$value": {
@@ -20801,6 +20843,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "light": "#f2f3f3",
       },
     },
+    "color-background-layout-panel": {
+      "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer.",
+      "$value": {
+        "dark": "#2a2e33",
+        "light": "#ffffff",
+      },
+    },
     "color-background-layout-toggle-active": {
       "$description": "The background color of the app layout toggle button when it's active.",
       "$value": {
@@ -24197,6 +24246,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#ffffff",
           },
         },
+        "color-background-layout-panel": {
+          "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#ffffff",
+          },
+        },
         "color-background-layout-toggle-active": {
           "$description": "The background color of the app layout toggle button when it's active.",
           "$value": {
@@ -27588,6 +27644,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#161d26",
           },
         },
+        "color-background-layout-panel": {
+          "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
         "color-background-layout-toggle-active": {
           "$description": "The background color of the app layout toggle button when it's active.",
           "$value": {
@@ -30979,6 +31042,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#fcfcfd",
           },
         },
+        "color-background-layout-panel": {
+          "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#ffffff",
+          },
+        },
         "color-background-layout-toggle-active": {
           "$description": "The background color of the app layout toggle button when it's active.",
           "$value": {
@@ -34370,6 +34440,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#ffffff",
           },
         },
+        "color-background-layout-panel": {
+          "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#ffffff",
+          },
+        },
         "color-background-layout-toggle-active": {
           "$description": "The background color of the app layout toggle button when it's active.",
           "$value": {
@@ -37761,6 +37838,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#ffffff",
           },
         },
+        "color-background-layout-panel": {
+          "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#ffffff",
+          },
+        },
         "color-background-layout-toggle-active": {
           "$description": "The background color of the app layout toggle button when it's active.",
           "$value": {
@@ -41152,6 +41236,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#ffffff",
           },
         },
+        "color-background-layout-panel": {
+          "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#ffffff",
+          },
+        },
         "color-background-layout-toggle-active": {
           "$description": "The background color of the app layout toggle button when it's active.",
           "$value": {
@@ -44543,6 +44634,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#0f141a",
           },
         },
+        "color-background-layout-panel": {
+          "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
         "color-background-layout-toggle-active": {
           "$description": "The background color of the app layout toggle button when it's active.",
           "$value": {
@@ -47934,6 +48032,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#161d26",
           },
         },
+        "color-background-layout-panel": {
+          "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
         "color-background-layout-toggle-active": {
           "$description": "The background color of the app layout toggle button when it's active.",
           "$value": {
@@ -51325,6 +51430,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "light": "#ffffff",
       },
     },
+    "color-background-layout-panel": {
+      "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer.",
+      "$value": {
+        "dark": "#161d26",
+        "light": "#ffffff",
+      },
+    },
     "color-background-layout-toggle-active": {
       "$description": "The background color of the app layout toggle button when it's active.",
       "$value": {
diff --git a/src/app-layout/visual-refresh-toolbar/drawer/styles.scss b/src/app-layout/visual-refresh-toolbar/drawer/styles.scss
index fe2e323083..3ad9318e2f 100644
--- a/src/app-layout/visual-refresh-toolbar/drawer/styles.scss
+++ b/src/app-layout/visual-refresh-toolbar/drawer/styles.scss
@@ -28,7 +28,7 @@ $ai-drawer-heider-height: 42px;
 .drawer {
   position: sticky;
   z-index: constants.$drawer-z-index;
-  background-color: awsui.$color-background-container-content;
+  background-color: awsui.$color-background-layout-panel-content;
   display: grid;
   grid-template-columns: awsui.$space-m 1fr;
   inline-size: var(#{custom-props.$drawerSize});
diff --git a/src/app-layout/visual-refresh-toolbar/navigation/styles.scss b/src/app-layout/visual-refresh-toolbar/navigation/styles.scss
index 9a0d4039cf..adabab1191 100644
--- a/src/app-layout/visual-refresh-toolbar/navigation/styles.scss
+++ b/src/app-layout/visual-refresh-toolbar/navigation/styles.scss
@@ -12,7 +12,7 @@
 .navigation-container {
   position: sticky;
   z-index: constants.$drawer-z-index;
-  background-color: awsui.$color-background-container-content;
+  background-color: awsui.$color-background-layout-panel-content;
   inset-block-end: 0;
   overflow-x: hidden;
   word-wrap: break-word;
diff --git a/src/app-layout/visual-refresh/drawers.scss b/src/app-layout/visual-refresh/drawers.scss
index 422ca166b2..f468554e10 100644
--- a/src/app-layout/visual-refresh/drawers.scss
+++ b/src/app-layout/visual-refresh/drawers.scss
@@ -22,6 +22,12 @@
     background-color: awsui.$color-background-container-content;
   }
 
+  &.one-theme {
+    &.has-open-drawer {
+      background-color: awsui.$color-background-layout-panel-content;
+    }
+  }
+
   @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
     max-inline-size: calc(
       var(#{custom-props.$layoutWidth}) - var(#{custom-props.$mainOffsetLeft}) - var(
@@ -66,6 +72,12 @@
     background-color: awsui.$color-background-container-content;
   }
 
+  &.one-theme {
+    &.has-multiple-triggers.has-open-drawer {
+      background-color: awsui.$color-background-layout-panel-content;
+    }
+  }
+
   &:not(.has-multiple-triggers):not(.has-open-drawer) {
     inline-size: calc((awsui.$space-layout-toggle-padding * 2) + awsui.$space-layout-toggle-diameter);
   }
@@ -125,6 +137,10 @@
   pointer-events: auto;
   word-wrap: break-word;
 
+  &.one-theme {
+    background-color: awsui.$color-background-layout-panel-content;
+  }
+
   > .drawer-content-container {
     grid-column: 1 / span 2;
     grid-row: 1;
diff --git a/src/app-layout/visual-refresh/drawers.tsx b/src/app-layout/visual-refresh/drawers.tsx
index c4ed58e5bd..2ed4d7d5d5 100644
--- a/src/app-layout/visual-refresh/drawers.tsx
+++ b/src/app-layout/visual-refresh/drawers.tsx
@@ -4,6 +4,7 @@ import React, { useRef } from 'react';
 import clsx from 'clsx';
 
 import { useContainerQuery } from '@cloudscape-design/component-toolkit';
+import { isThemeActive, Theme } from '@cloudscape-design/component-toolkit/internal';
 
 import { InternalButton } from '../../button/internal';
 import customCssProps from '../../internal/generated/custom-css-properties';
@@ -109,6 +110,7 @@ function ActiveDrawer() {
       className={clsx(styles.drawer, {
         [styles['is-drawer-open']]: activeDrawerId,
         [styles.unfocusable]: isUnfocusable,
+        [styles['one-theme']]: isThemeActive(Theme.OneTheme),
         [testutilStyles['active-drawer']]: activeDrawerId,
         [testutilStyles.tools]: isToolsDrawer,
       })}
@@ -233,6 +235,7 @@ function DesktopTriggers() {
       className={clsx(styles['drawers-desktop-triggers-container'], {
         [styles['has-multiple-triggers']]: hasMultipleTriggers,
         [styles['has-open-drawer']]: hasOpenDrawer,
+        [styles['one-theme']]: isThemeActive(Theme.OneTheme),
       })}
       aria-label={drawersAriaLabel}
       ref={triggersContainerRef}
diff --git a/src/app-layout/visual-refresh/navigation.scss b/src/app-layout/visual-refresh/navigation.scss
index 8ca5dd3831..3a3567d35c 100644
--- a/src/app-layout/visual-refresh/navigation.scss
+++ b/src/app-layout/visual-refresh/navigation.scss
@@ -82,7 +82,7 @@ nav.show-navigation {
 }
 
 nav.navigation {
-  background-color: awsui.$color-background-container-content;
+  background-color: awsui.$color-background-layout-panel-content;
   inset-block-end: 0;
   block-size: 100%;
   overflow-x: hidden;
diff --git a/src/app-layout/visual-refresh/tools.scss b/src/app-layout/visual-refresh/tools.scss
index 4b0428bce0..c4e5745d19 100644
--- a/src/app-layout/visual-refresh/tools.scss
+++ b/src/app-layout/visual-refresh/tools.scss
@@ -95,6 +95,10 @@ viewport size and state of the Tools drawer.
     }
   }
 
+  &.one-theme {
+    background-color: awsui.$color-background-layout-panel-content;
+  }
+
   /*
   A non-semantic node is added with a fixed width equal to the final Tools
   width. This will create the visual appearance of horizontal movement and
diff --git a/src/app-layout/visual-refresh/tools.tsx b/src/app-layout/visual-refresh/tools.tsx
index 516a2b6d0d..f5e7484a34 100644
--- a/src/app-layout/visual-refresh/tools.tsx
+++ b/src/app-layout/visual-refresh/tools.tsx
@@ -3,6 +3,8 @@
 import React from 'react';
 import clsx from 'clsx';
 
+import { isThemeActive, Theme } from '@cloudscape-design/component-toolkit/internal';
+
 import { InternalButton } from '../../button/internal';
 import { Transition } from '../../internal/components/transition';
 import customCssProps from '../../internal/generated/custom-css-properties';
@@ -101,6 +103,7 @@ export default function Tools({ children }: ToolsProps) {
                   [styles.animating]: state === 'entering',
                   [styles['has-tools-form-persistence']]: hasToolsFormPersistence,
                   [styles['is-tools-open']]: isToolsOpen,
+                  [styles['one-theme']]: isThemeActive(Theme.OneTheme),
                   [testutilStyles['drawer-closed']]: !isToolsOpen,
                 },
                 testutilStyles.tools
diff --git a/style-dictionary/one-theme/color-palette.ts b/style-dictionary/one-theme/color-palette.ts
index 2db72ff372..a34c4fd602 100644
--- a/style-dictionary/one-theme/color-palette.ts
+++ b/style-dictionary/one-theme/color-palette.ts
@@ -19,7 +19,7 @@ import { StyleDictionary } from '../utils/interfaces.js';
  *
  * Reference tokens provide better semantic meaning and consistency across themes.
  */
-const tokens: StyleDictionary.ColorPaletteDictionary = {
+const paletteTokens: StyleDictionary.ColorPaletteDictionary = {
   ...pick(brand, [
     'colorNeutralGrey50',
     'colorNeutralGrey100',
@@ -82,7 +82,7 @@ const tokens: StyleDictionary.ColorPaletteDictionary = {
   ]),
 };
 
-// Reference tokens for visual-refresh theme
+// Reference tokens for one-theme theme
 const referenceTokens: ReferenceTokens = {
   color: {
     primary: {
@@ -99,26 +99,7 @@ const referenceTokens: ReferenceTokens = {
       1000: brand.colorIndigo1000,
     },
     neutral: {
-      50: brand.colorNeutralGrey50,
-      100: brand.colorNeutralGrey100,
-      150: brand.colorNeutralGrey150,
-      200: brand.colorNeutralGrey200,
-      250: brand.colorNeutralGrey250,
-      300: brand.colorNeutralGrey300,
-      350: brand.colorNeutralGrey350,
-      400: brand.colorNeutralGrey400,
-      450: brand.colorNeutralGrey450,
-      500: brand.colorNeutralGrey500,
-      550: brand.colorNeutralGrey550,
-      600: brand.colorNeutralGrey600,
-      650: brand.colorNeutralGrey650,
-      700: brand.colorNeutralGrey700,
-      750: brand.colorNeutralGrey750,
-      800: brand.colorNeutralGrey800,
-      850: brand.colorNeutralGrey850,
-      900: brand.colorNeutralGrey900,
-      950: brand.colorNeutralGrey950,
-      1000: brand.colorNeutralGrey1000,
+      seed: '#000000',
     },
     error: {
       50: brand.colorRed50,
@@ -160,15 +141,33 @@ const referenceTokens: ReferenceTokens = {
       500: brand.colorIndigo500,
       600: brand.colorIndigo600,
       700: brand.colorIndigo700,
+      800: brand.colorIndigo800,
       950: brand.colorIndigo950,
       1000: brand.colorIndigo1000,
     },
   },
 };
 
-const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens);
+const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(paletteTokens);
+
+// Override the primary color scale (VR uses blue; one-theme uses indigo).
+// These go through addTokens so they win over the reference tokens generated by buildVisualRefresh.
+const primaryOverrides: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary({
+  colorPrimary50: brand.colorIndigo50,
+  colorPrimary100: brand.colorIndigo100,
+  colorPrimary200: brand.colorIndigo200,
+  colorPrimary300: brand.colorIndigo300,
+  colorPrimary400: brand.colorIndigo400,
+  colorPrimary500: brand.colorIndigo500,
+  colorPrimary600: brand.colorIndigo600,
+  colorPrimary700: brand.colorIndigo700,
+  colorPrimary800: brand.colorIndigo800,
+  colorPrimary900: brand.colorIndigo900,
+  colorPrimary1000: brand.colorIndigo1000,
+});
+
 const expandedReferenceTokens: ReferenceTokens = expandReferenceTokens(referenceTokens);
 
 export const mode: StyleDictionary.ModeIdentifier = 'color';
-export { expandedTokens as tokens };
 export { expandedReferenceTokens as referenceTokens };
+export const tokens: StyleDictionary.ExpandedColorScopeDictionary = { ...expandedTokens, ...primaryOverrides };
diff --git a/style-dictionary/one-theme/colors.ts b/style-dictionary/one-theme/colors.ts
index c218c26500..7c8352f5d6 100644
--- a/style-dictionary/one-theme/colors.ts
+++ b/style-dictionary/one-theme/colors.ts
@@ -6,19 +6,25 @@ import { StyleDictionary } from '../utils/interfaces.js';
 // One Theme color overrides on top of the visual-refresh baseline.
 // Tokens not listed here fall back to the visual-refresh value via ThemeBuilder.addTokens in ./index.ts.
 const tokens: StyleDictionary.ColorsDictionary = {
+  // ── Opaque ─────────────────────────────────────────────────────────────
+  colorGreyOpaque70: { light: 'rgba(0, 0, 0, 0.7)', dark: 'rgba(0, 0, 0, 0.7)' },
+
   // ── Body text ─────────────────────────────────────────────────────────────
   colorTextBodyDefault: { light: '{colorNeutralGrey950}', dark: '{colorNeutralGrey350}' },
   colorTextBodySecondary: { light: '{colorNeutralGrey600}', dark: '{colorNeutralGrey450}' },
 
   // ── Container / layout ────────────────────────────────────────────────────
-  colorBackgroundLayoutMain: { light: '{colorNeutralGrey50}', dark: '{colorNeutralGrey950}' },
+  colorBackgroundLayoutMain: { light: '{colorNeutralGrey50}', dark: '{colorNeutralGrey1000}' },
+  colorBackgroundLayoutPanelContent: { light: '{colorNeutralGrey50}', dark: '{colorNeutralGrey1000}' },
+
   colorBackgroundContainerHeader: { light: '{colorWhite}', dark: '{colorNeutralGrey950}' },
   colorBackgroundContainerContent: { light: '{colorWhite}', dark: '{colorNeutralGrey950}' },
   colorBorderDividerDefault: { light: '{colorNeutralGrey300}', dark: '{colorNeutralGrey750}' },
   colorBorderDividerInteractiveDefault: { light: '{colorNeutralGrey500}', dark: '{colorNeutralGrey600}' },
   colorBorderDividerSecondary: { light: '{colorNeutralGrey200}', dark: '{colorNeutralGrey800}' },
   colorBorderLayout: { light: '{colorNeutralGrey300}', dark: '{colorNeutralGrey750}' },
-  colorGapGlobalDrawer: { light: '{colorNeutralGrey250}', dark: '{colorNeutralGrey1000}' },
+  colorGapGlobalDrawer: { light: '{colorNeutralGrey250}', dark: '{colorBlack}' },
+  colorBackgroundModalOverlay: '{colorGreyOpaque70}',
 
   // ── Normal button ─────────────────────────────────────────────────────────
   colorBorderButtonNormalDefault: { light: '{colorNeutralGrey500}', dark: '{colorNeutralGrey600}' },
@@ -56,7 +62,7 @@ const tokens: StyleDictionary.ColorsDictionary = {
 
   // ── Toggle button ─────────────────────────────────────────────────────────
   colorBackgroundToggleButtonNormalPressed: { light: '{colorWhite}', dark: '{colorNeutralGrey850}' },
-  colorBorderToggleButtonNormalPressed: { light: '{colorIndigo600}', dark: '{colorIndigo500}' },
+  colorBorderToggleButtonNormalPressed: { light: '{colorPrimary600}', dark: '{colorPrimary500}' },
   colorTextToggleButtonNormalPressed: { light: '{colorNeutralGrey900}', dark: '{colorWhite}' },
 
   // ── Input / form ──────────────────────────────────────────────────────────
@@ -77,28 +83,28 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorTextLinkDefault: { light: '{colorNeutralGrey950}', dark: '{colorNeutralGrey350}' },
   colorTextLinkHover: { light: '{colorNeutralGrey650}', dark: '{colorNeutralGrey200}' },
   colorTextLinkSecondaryDefault: { light: '{colorNeutralGrey600}', dark: '{colorNeutralGrey450}' },
-  colorTextLinkInfoDefault: { light: '{colorIndigo600}', dark: '{colorIndigo400}' },
-  colorTextLinkInfoHover: { light: '{colorIndigo800}', dark: '{colorIndigo300}' },
-  colorTextAccent: { light: '{colorIndigo600}', dark: '{colorIndigo500}' },
+  colorTextLinkInfoDefault: { light: '{colorPrimary600}', dark: '{colorPrimary400}' },
+  colorTextLinkInfoHover: { light: '{colorPrimary800}', dark: '{colorPrimary300}' },
+  colorTextAccent: { light: '{colorPrimary600}', dark: '{colorPrimary500}' },
   colorTextLinkDecorationDefault: { light: '{colorNeutralGrey650}', dark: '{colorNeutralGrey600}' },
 
   // ── Selection / focus ─────────────────────────────────────────────────────
-  colorBorderItemFocused: { light: '{colorIndigo600}', dark: '{colorIndigo500}' },
-  colorBorderItemSelected: { light: '{colorIndigo600}', dark: '{colorIndigo500}' },
+  colorBorderItemFocused: { light: '{colorPrimary600}', dark: '{colorPrimary500}' },
+  colorBorderItemSelected: { light: '{colorPrimary600}', dark: '{colorPrimary500}' },
   colorBackgroundItemSelected: { light: '{colorNeutralGrey150}', dark: '{colorNeutralGrey1000}' },
-  colorBackgroundLayoutToggleSelectedDefault: { light: '{colorIndigo100}', dark: '#5c7fff20' },
-  colorBackgroundLayoutToggleSelectedHover: { light: '{colorIndigo200}', dark: '#5c7fff40' },
-  colorBackgroundLayoutToggleSelectedActive: { light: '{colorIndigo100}', dark: '{colorIndigo1000}' },
-  colorTextLayoutToggleSelected: { light: '{colorIndigo600}', dark: '{colorIndigo300}' },
+  colorBackgroundLayoutToggleSelectedDefault: { light: '{colorPrimary100}', dark: '#5c7fff20' },
+  colorBackgroundLayoutToggleSelectedHover: { light: '{colorPrimary200}', dark: '#5c7fff40' },
+  colorBackgroundLayoutToggleSelectedActive: { light: '{colorPrimary100}', dark: '{colorPrimary1000}' },
+  colorTextLayoutToggleSelected: { light: '{colorPrimary600}', dark: '{colorPrimary300}' },
 
   // ── Segmented control ─────────────────────────────────────────────────────
   colorBackgroundSegmentActive: { light: '{colorNeutralGrey800}', dark: '{colorNeutralGrey300}' },
   colorBackgroundSegmentDefault: { light: 'transparent', dark: 'transparent' },
 
   // ── Slider / progress ─────────────────────────────────────────────────────
-  colorBackgroundSliderRangeDefault: { light: '{colorIndigo600}', dark: '{colorIndigo500}' },
-  colorBackgroundSliderHandleDefault: { light: '{colorIndigo600}', dark: '{colorIndigo500}' },
-  colorBackgroundProgressBarValueDefault: { light: '{colorIndigo600}', dark: '{colorIndigo500}' },
+  colorBackgroundSliderRangeDefault: { light: '{colorPrimary600}', dark: '{colorPrimary500}' },
+  colorBackgroundSliderHandleDefault: { light: '{colorPrimary600}', dark: '{colorPrimary500}' },
+  colorBackgroundProgressBarValueDefault: { light: '{colorPrimary600}', dark: '{colorPrimary500}' },
 
   // ── Notifications ─────────────────────────────────────────────────────────
   colorBackgroundNotificationGreen: { light: '{colorSuccess600}', dark: '{colorSuccess950}' },
@@ -108,20 +114,20 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorTextNotificationDefault: { light: '{colorWhite}', dark: '{colorWhite}' },
 
   // ── Status text ───────────────────────────────────────────────────────────
-  colorTextStatusInfo: { light: '{colorIndigo600}', dark: '{colorIndigo300}' },
+  colorTextStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo300}' },
   colorTextStatusSuccess: { light: '{colorSuccess600}', dark: '{colorSuccess200}' },
   colorTextStatusWarning: { light: '{colorWarning800}', dark: '{colorWarning300}' },
   colorTextStatusError: { light: '{colorError600}', dark: '{colorError300}' },
   colorTextStatusInactive: { light: '{colorNeutralGrey650}', dark: '{colorNeutralGrey450}' },
 
   // ── Dropdown ─────────────────────────────────────────────────
-  colorTextDropdownItemFilterMatch: { light: '{colorIndigo600}', dark: '{colorIndigo500}' },
+  colorTextDropdownItemFilterMatch: { light: '{colorPrimary600}', dark: '{colorPrimary500}' },
   colorBackgroundDropdownItemFilterMatch: { light: '{colorNeutralGrey200}', dark: '{colorNeutralGrey1000}' },
   colorBackgroundDropdownItemDefault: { light: '{colorWhite}', dark: '{colorNeutralGrey800}' },
   colorBackgroundDropdownItemHover: { light: '{colorNeutralGrey200}', dark: '{colorNeutralGrey900}' },
 
   // ── Status indicator backgrounds (alpha values — no palette token available) ──
-  colorBackgroundStatusIndicatorInfo: { light: '{colorIndigo50}', dark: '#5c7fff20' },
+  colorBackgroundStatusIndicatorInfo: { light: '{colorInfo50}', dark: '#5c7fff20' },
   colorBackgroundStatusIndicatorWarning: { light: '{colorWarning50}', dark: '#fbd33220' },
   colorBackgroundStatusIndicatorSuccess: { light: '{colorSuccess50}', dark: '#2bb53420' },
   colorBackgroundStatusIndicatorError: { light: '{colorError50}', dark: '#ff7a7a20' },
@@ -133,6 +139,9 @@ const tokens: StyleDictionary.ColorsDictionary = {
 
   // ── Breadcrumb ────────────────────────────────────────────────────────────
   colorTextBreadcrumbCurrent: { light: '{colorNeutralGrey600}', dark: '{colorNeutralGrey500}' },
+
+  // ── Tile ─────────────────────────────────────────────────────────────────
+  colorBackgroundTilesDisabled: { light: '{colorNeutralGrey250}', dark: '{colorNeutralGrey800}' },
 };
 
 const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens);
diff --git a/style-dictionary/one-theme/contexts/app-layout-toolbar.ts b/style-dictionary/one-theme/contexts/app-layout-toolbar.ts
index 0dd81d13ad..c305890b41 100644
--- a/style-dictionary/one-theme/contexts/app-layout-toolbar.ts
+++ b/style-dictionary/one-theme/contexts/app-layout-toolbar.ts
@@ -7,6 +7,8 @@ import { StyleDictionary } from '../../utils/interfaces.js';
 
 const tokens: StyleDictionary.ColorsDictionary = {
   colorBackgroundLayoutMain: { light: '{colorNeutralGrey50}', dark: '{colorNeutralGrey1000}' },
+  colorBackgroundLayoutPanelContent: { light: '{colorNeutralGrey50}', dark: '{colorNeutralGrey1000}' },
+  colorBackgroundLayoutToolbar: { light: '{colorNeutralGrey50}', dark: '{colorNeutralGrey1000}' },
   colorGapGlobalDrawer: { light: '{colorNeutralGrey250}', dark: '{colorNeutralGrey1000}' },
 };
 
diff --git a/style-dictionary/one-theme/index.ts b/style-dictionary/one-theme/index.ts
index 909afce9b7..e8cf8e79c2 100644
--- a/style-dictionary/one-theme/index.ts
+++ b/style-dictionary/one-theme/index.ts
@@ -26,6 +26,7 @@ const overrides = [
   await import('./colors.js'),
   await import('./typography.js'),
   await import('./borders.js'),
+  await import('./shadows.js'),
   await import('./spacing.js'),
   await import('./sizes.js'),
 ] as Array<StyleDictionary.CategoryModule>;
diff --git a/style-dictionary/one-theme/shadows.ts b/style-dictionary/one-theme/shadows.ts
new file mode 100644
index 0000000000..d0d4b5085d
--- /dev/null
+++ b/style-dictionary/one-theme/shadows.ts
@@ -0,0 +1,57 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { expandColorDictionary } from '../utils/index.js';
+import { StyleDictionary } from '../utils/interfaces.js';
+
+const tokens: StyleDictionary.ShadowsDictionary = {
+  shadowCard: 'none',
+  shadowItemCard: '{shadowCard}',
+  shadowContainer: {
+    light: '0px 0px 1px 1px #ebebeb, 0px 1px 8px 2px rgba(0, 0, 0, 0.12)', // 1px grey-200 faux border
+    dark: '0px 1px 8px 2px rgba(0, 0, 0, 0.6)',
+  },
+  shadowContainerActive: {
+    light: '0px 1px 1px 1px #ebebeb, 0px 6px 36px #0606061a',
+    dark: '0px 1px 1px 1px #222222, 0px 6px 36px #030303',
+  },
+  shadowDropdown: { light: '0px 4px 20px 1px rgba(0, 0, 0, 0.10)', dark: '0px 4px 20px 1px rgba(0, 0, 0, 1)' },
+  shadowDropup: '{shadowDropdown}',
+  shadowFlashCollapsed: '0px 4px 4px rgba(0, 0, 0, 0.25)',
+  shadowFlashSticky: {
+    light: '0px 4px 8px rgba(0, 0, 0, 0.10)',
+    dark: '0px 4px 8px rgba(0, 0, 0, 0.5)',
+  },
+  shadowModal: '{shadowDropdown}',
+  shadowPanel: {
+    light: '0px 0px 0px 1px #bebebe',
+    dark: '0px 0px 0px 1px #4b4b4b',
+  },
+  shadowPanelToggle: { light: '0px 6px 12px 1px rgba(0, 0, 0, 0.12)', dark: '0px 6px 12px 1px rgba(0, 0, 0, 1)' },
+  shadowPopover: '{shadowDropdown}',
+  shadowSplitBottom: {
+    light: '0px -36px 36px -36px rgba(0, 0, 0, 0.10)',
+    dark: '0px -36px 36px -36px rgba(0, 0, 0, 1)',
+  },
+  shadowSplitSide: {
+    light: '-1px 0px 1px 0px #ebebeb, -36px 6px 36px -36px rgba(0, 0, 0, 0.10)',
+    dark: '-1px 0px 1px 0px #222222, -36px 6px 36px -36px rgba(0, 0, 0, 1)',
+  },
+  shadowSticky: { light: '0px 4px 8px 1px rgba(0, 0, 0, 0.10)', dark: '0px 4px 8px 1px rgba(0, 0, 0, 0.5)' },
+  shadowStickyEmbedded: {
+    light: '0px 2px 0px 0px #ebebeb, 0px 16px 16px -12px rgba(0, 0, 0, 0.10)', // 2px grey-200 faux bottom border
+    dark: '0px 2px 0px 0px #4b4b4b, 0px 16px 16px -12px rgba(0, 0, 0, 1)', // 2px grey-600 faux bottom border
+  },
+  shadowStickyColumnFirst: {
+    light: '4px 0px 8px 1px rgba(0, 0, 0, 0.1)',
+    dark: '0px 4px 8px 1px rgba(0, 0, 0, 0.5)',
+  },
+  shadowStickyColumnLast: {
+    light: '-4px 0 8px 1px rgba(0, 0, 0, 0.1)',
+    dark: '0px 4px 8px 1px rgba(0, 0, 0, 0.5)',
+  },
+};
+
+const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens);
+
+export { expandedTokens as tokens };
+export const mode: StyleDictionary.ModeIdentifier = 'color';
diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts
index 35b14f9a09..428c43a201 100644
--- a/style-dictionary/utils/token-names.ts
+++ b/style-dictionary/utils/token-names.ts
@@ -581,6 +581,7 @@ export type ColorsTokenName =
   | 'colorBackgroundDrawer'
   | 'colorBackgroundDrawerBackdrop'
   | 'colorBackgroundLayoutMobilePanel'
+  | 'colorBackgroundLayoutPanel'
   | 'colorBackgroundLayoutPanelContent'
   | 'colorBackgroundLayoutPanelHover'
   | 'colorBackgroundLayoutToolbar'
diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts
index 05551544a2..228bc59ee6 100644
--- a/style-dictionary/visual-refresh/colors.ts
+++ b/style-dictionary/visual-refresh/colors.ts
@@ -64,6 +64,7 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBackgroundDrawer: '{colorBackgroundLayoutPanelContent}',
   colorBackgroundDrawerBackdrop: '{colorGreyOpaque70}',
   colorBackgroundLayoutMobilePanel: '{colorNeutral950}',
+  colorBackgroundLayoutPanel: '{colorBackgroundContainerContent}',
   colorBackgroundLayoutPanelContent: '{colorBackgroundContainerContent}',
   colorBackgroundLayoutPanelHover: { light: '{colorNeutral250}', dark: '{colorNeutral700}' },
   colorBackgroundLayoutToolbar: '{colorBackgroundLayoutPanelContent}',
diff --git a/style-dictionary/visual-refresh/metadata/colors.ts b/style-dictionary/visual-refresh/metadata/colors.ts
index e583f0039e..34b9ee96e8 100644
--- a/style-dictionary/visual-refresh/metadata/colors.ts
+++ b/style-dictionary/visual-refresh/metadata/colors.ts
@@ -165,6 +165,12 @@ const metadata: StyleDictionary.MetadataIndex = {
     public: true,
     themeable: true,
   },
+  colorBackgroundLayoutPanel: {
+    description:
+      'The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer.',
+    themeable: true,
+    public: true,
+  },
   colorBackgroundLayoutPanelContent: {
     description:
       'The background color of app layout panel content area. For example: The side navigation and tools panel content background color.',