diff --git a/build-tools/utils/custom-css-properties.js b/build-tools/utils/custom-css-properties.js
index 73511df043..273bc569c3 100644
--- a/build-tools/utils/custom-css-properties.js
+++ b/build-tools/utils/custom-css-properties.js
@@ -155,6 +155,23 @@ const customCssPropertiesList = [
   'promptInputStylePlaceholderFontSize',
   'promptInputStylePlaceholderFontStyle',
   'promptInputStylePlaceholderFontWeight',
+  // Prompt input menu/dropdown style properties
+  'promptInputMenuStyleBackgroundColor',
+  'promptInputMenuStyleBorderColor',
+  'promptInputMenuStyleBorderRadius',
+  'promptInputMenuStyleBorderWidth',
+  // Options list style properties (internal contract; consumed by the shared
+  // selectable-item / option components, currently only set by PromptInput's
+  // style.menu). Each is inert unless a host sets it, falling back to tokens.
+  'optionBackgroundDefault',
+  'optionBackgroundHighlighted',
+  'optionBackgroundSelected',
+  'optionColorDefault',
+  'optionColorHighlighted',
+  'optionColorDisabled',
+  'optionGroupLabelColor',
+  'optionFilterMatchBackground',
+  'optionFilterMatchColor',
   // Progress bar style properties
   'progressBarBackgroundColor',
   'progressBarBorderRadius',
diff --git a/pages/prompt-input/menu-style.page.tsx b/pages/prompt-input/menu-style.page.tsx
new file mode 100644
index 0000000000..193e7c4380
--- /dev/null
+++ b/pages/prompt-input/menu-style.page.tsx
@@ -0,0 +1,73 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import PromptInput, { PromptInputProps } from '~components/prompt-input';
+
+import { palette } from '../app/themes/style-api';
+import ScreenshotArea from '../utils/screenshot-area';
+
+// Exercises the full style.menu API: the dropdown surface (background, border,
+// radius) plus the option rows and filtering match highlight. Because the
+// option backgrounds match the surface, the whole menu body reads as themed.
+const menuStyle: PromptInputProps.Style['menu'] = {
+  backgroundColor: `light-dark(${palette.teal20}, ${palette.teal100})`,
+  borderColor: `light-dark(${palette.teal80}, ${palette.teal40})`,
+  borderRadius: '16px',
+  borderWidth: '3px',
+  options: {
+    backgroundColor: {
+      default: `light-dark(${palette.teal20}, ${palette.teal100})`,
+      highlighted: `light-dark(${palette.teal30}, ${palette.teal80})`,
+      selected: `light-dark(${palette.teal40}, ${palette.teal90})`,
+    },
+    color: {
+      default: `light-dark(${palette.teal100}, ${palette.teal10})`,
+      highlighted: `light-dark(${palette.teal100}, ${palette.white})`,
+      disabled: `light-dark(${palette.teal60}, ${palette.teal60})`,
+      groupLabel: `light-dark(${palette.teal90}, ${palette.teal20})`,
+    },
+  },
+  filterMatch: {
+    backgroundColor: `light-dark(${palette.teal40}, ${palette.teal60})`,
+    color: `light-dark(${palette.teal100}, ${palette.white})`,
+  },
+};
+
+const options: PromptInputProps.MenuDefinition['options'] = [
+  { value: 'help', label: '/help', description: 'Show help' },
+  { value: 'search', label: '/search', description: 'Search content' },
+  { value: 'clear', label: '/clear', description: 'Clear the input' },
+];
+
+export default function MenuStylePage() {
+  const [value, setValue] = useState('');
+  const [tokens, setTokens] = useState<readonly PromptInputProps.InputToken[]>([]);
+
+  return (
+    <ScreenshotArea>
+      <h1>PromptInput — menu style override</h1>
+      <p>
+        Type <code>/</code> to open the command menu. The <code>style.menu</code> overrides theme the dropdown surface (
+        <code>backgroundColor</code>, <code>borderColor</code>, <code>borderWidth</code>, <code>borderRadius</code>) as
+        well as the option rows (<code>options.backgroundColor</code>, <code>options.color</code>) and the filtering
+        match highlight (<code>filterMatch</code>). Filter the list to see the match highlight.
+      </p>
+      <PromptInput
+        ariaLabel="Prompt input with styled menu"
+        value={value}
+        tokens={tokens}
+        menus={[{ id: 'commands', trigger: '/', options, filteringType: 'auto' }]}
+        style={{ menu: menuStyle }}
+        onChange={({ detail }) => {
+          setValue(detail.value);
+          if (detail.tokens) {
+            setTokens(detail.tokens);
+          }
+        }}
+        onAction={() => {}}
+        i18nStrings={{ actionButtonAriaLabel: 'Send' }}
+      />
+    </ScreenshotArea>
+  );
+}
diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
index 348cce27f5..c6cebc2238 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -22470,6 +22470,126 @@ inadvertently sending data (such as user passwords) to third parties.",
       "inlineType": {
         "name": "PromptInputProps.Style",
         "properties": [
+          {
+            "inlineType": {
+              "name": "object",
+              "properties": [
+                {
+                  "name": "backgroundColor",
+                  "optional": true,
+                  "type": "string",
+                },
+                {
+                  "name": "borderColor",
+                  "optional": true,
+                  "type": "string",
+                },
+                {
+                  "name": "borderRadius",
+                  "optional": true,
+                  "type": "string",
+                },
+                {
+                  "name": "borderWidth",
+                  "optional": true,
+                  "type": "string",
+                },
+                {
+                  "inlineType": {
+                    "name": "{ backgroundColor?: string | undefined; color?: string | undefined; }",
+                    "properties": [
+                      {
+                        "name": "backgroundColor",
+                        "optional": true,
+                        "type": "string",
+                      },
+                      {
+                        "name": "color",
+                        "optional": true,
+                        "type": "string",
+                      },
+                    ],
+                    "type": "object",
+                  },
+                  "name": "filterMatch",
+                  "optional": true,
+                  "type": "{ backgroundColor?: string | undefined; color?: string | undefined; }",
+                },
+                {
+                  "inlineType": {
+                    "name": "object",
+                    "properties": [
+                      {
+                        "inlineType": {
+                          "name": "{ default?: string | undefined; highlighted?: string | undefined; selected?: string | undefined; }",
+                          "properties": [
+                            {
+                              "name": "default",
+                              "optional": true,
+                              "type": "string",
+                            },
+                            {
+                              "name": "highlighted",
+                              "optional": true,
+                              "type": "string",
+                            },
+                            {
+                              "name": "selected",
+                              "optional": true,
+                              "type": "string",
+                            },
+                          ],
+                          "type": "object",
+                        },
+                        "name": "backgroundColor",
+                        "optional": true,
+                        "type": "{ default?: string | undefined; highlighted?: string | undefined; selected?: string | undefined; }",
+                      },
+                      {
+                        "inlineType": {
+                          "name": "object",
+                          "properties": [
+                            {
+                              "name": "default",
+                              "optional": true,
+                              "type": "string",
+                            },
+                            {
+                              "name": "disabled",
+                              "optional": true,
+                              "type": "string",
+                            },
+                            {
+                              "name": "groupLabel",
+                              "optional": true,
+                              "type": "string",
+                            },
+                            {
+                              "name": "highlighted",
+                              "optional": true,
+                              "type": "string",
+                            },
+                          ],
+                          "type": "object",
+                        },
+                        "name": "color",
+                        "optional": true,
+                        "type": "{ default?: string | undefined; highlighted?: string | undefined; disabled?: string | undefined; groupLabel?: string | undefined; }",
+                      },
+                    ],
+                    "type": "object",
+                  },
+                  "name": "options",
+                  "optional": true,
+                  "type": "{ backgroundColor?: { default?: string | undefined; highlighted?: string | undefined; selected?: string | undefined; } | undefined; color?: { default?: string | undefined; highlighted?: string | undefined; disabled?: string | undefined; groupLabel?: string | undefined; } | undefined; }",
+                },
+              ],
+              "type": "object",
+            },
+            "name": "menu",
+            "optional": true,
+            "type": "{ backgroundColor?: string | undefined; borderColor?: string | undefined; borderRadius?: string | undefined; borderWidth?: string | undefined; options?: { backgroundColor?: { default?: string | undefined; highlighted?: string | undefined; selected?: string | undefined; } | undefined; color?: { ...; } | undefined; } ...",
+          },
           {
             "inlineType": {
               "name": "object",
diff --git a/src/dropdown/__tests__/__snapshots__/styles.test.tsx.snap b/src/dropdown/__tests__/__snapshots__/styles.test.tsx.snap
index e365408648..f13a2d7c9c 100644
--- a/src/dropdown/__tests__/__snapshots__/styles.test.tsx.snap
+++ b/src/dropdown/__tests__/__snapshots__/styles.test.tsx.snap
@@ -6,9 +6,9 @@ exports[`getDropdownStyles handles all possible style configurations 2`] = `unde
 
 exports[`getDropdownStyles handles all possible style configurations 3`] = `
 {
-  "--awsui-dropdown-content-border-color-6b9ypa": "rgb(0, 0, 0)",
-  "--awsui-dropdown-content-border-radius-6b9ypa": "8px",
-  "--awsui-dropdown-content-border-width-6b9ypa": "2px",
+  "--awsui-dropdown-content-border-color-z17rmd": "rgb(0, 0, 0)",
+  "--awsui-dropdown-content-border-radius-z17rmd": "8px",
+  "--awsui-dropdown-content-border-width-z17rmd": "2px",
   "background": "rgb(255, 255, 255)",
 }
 `;
diff --git a/src/input/__tests__/__snapshots__/styles.test.tsx.snap b/src/input/__tests__/__snapshots__/styles.test.tsx.snap
index 85c1053781..c0202a1295 100644
--- a/src/input/__tests__/__snapshots__/styles.test.tsx.snap
+++ b/src/input/__tests__/__snapshots__/styles.test.tsx.snap
@@ -2,30 +2,30 @@
 
 exports[`getInputStyles handles all possible style configurations 1`] = `
 {
-  "--awsui-style-background-default-6b9ypa": undefined,
-  "--awsui-style-background-disabled-6b9ypa": undefined,
-  "--awsui-style-background-focus-6b9ypa": undefined,
-  "--awsui-style-background-hover-6b9ypa": undefined,
-  "--awsui-style-background-readonly-6b9ypa": undefined,
-  "--awsui-style-border-color-default-6b9ypa": undefined,
-  "--awsui-style-border-color-disabled-6b9ypa": undefined,
-  "--awsui-style-border-color-focus-6b9ypa": undefined,
-  "--awsui-style-border-color-hover-6b9ypa": undefined,
-  "--awsui-style-border-color-readonly-6b9ypa": undefined,
-  "--awsui-style-box-shadow-default-6b9ypa": undefined,
-  "--awsui-style-box-shadow-disabled-6b9ypa": undefined,
-  "--awsui-style-box-shadow-focus-6b9ypa": undefined,
-  "--awsui-style-box-shadow-hover-6b9ypa": undefined,
-  "--awsui-style-box-shadow-readonly-6b9ypa": undefined,
-  "--awsui-style-color-default-6b9ypa": undefined,
-  "--awsui-style-color-disabled-6b9ypa": undefined,
-  "--awsui-style-color-focus-6b9ypa": undefined,
-  "--awsui-style-color-hover-6b9ypa": undefined,
-  "--awsui-style-color-readonly-6b9ypa": undefined,
-  "--awsui-style-placeholder-color-6b9ypa": undefined,
-  "--awsui-style-placeholder-font-size-6b9ypa": undefined,
-  "--awsui-style-placeholder-font-style-6b9ypa": undefined,
-  "--awsui-style-placeholder-font-weight-6b9ypa": undefined,
+  "--awsui-style-background-default-z17rmd": undefined,
+  "--awsui-style-background-disabled-z17rmd": undefined,
+  "--awsui-style-background-focus-z17rmd": undefined,
+  "--awsui-style-background-hover-z17rmd": undefined,
+  "--awsui-style-background-readonly-z17rmd": undefined,
+  "--awsui-style-border-color-default-z17rmd": undefined,
+  "--awsui-style-border-color-disabled-z17rmd": undefined,
+  "--awsui-style-border-color-focus-z17rmd": undefined,
+  "--awsui-style-border-color-hover-z17rmd": undefined,
+  "--awsui-style-border-color-readonly-z17rmd": undefined,
+  "--awsui-style-box-shadow-default-z17rmd": undefined,
+  "--awsui-style-box-shadow-disabled-z17rmd": undefined,
+  "--awsui-style-box-shadow-focus-z17rmd": undefined,
+  "--awsui-style-box-shadow-hover-z17rmd": undefined,
+  "--awsui-style-box-shadow-readonly-z17rmd": undefined,
+  "--awsui-style-color-default-z17rmd": undefined,
+  "--awsui-style-color-disabled-z17rmd": undefined,
+  "--awsui-style-color-focus-z17rmd": undefined,
+  "--awsui-style-color-hover-z17rmd": undefined,
+  "--awsui-style-color-readonly-z17rmd": undefined,
+  "--awsui-style-placeholder-color-z17rmd": undefined,
+  "--awsui-style-placeholder-font-size-z17rmd": undefined,
+  "--awsui-style-placeholder-font-style-z17rmd": undefined,
+  "--awsui-style-placeholder-font-weight-z17rmd": undefined,
   "borderRadius": undefined,
   "borderWidth": undefined,
   "fontSize": undefined,
@@ -37,30 +37,30 @@ exports[`getInputStyles handles all possible style configurations 1`] = `
 
 exports[`getInputStyles handles all possible style configurations 2`] = `
 {
-  "--awsui-style-background-default-6b9ypa": undefined,
-  "--awsui-style-background-disabled-6b9ypa": undefined,
-  "--awsui-style-background-focus-6b9ypa": undefined,
-  "--awsui-style-background-hover-6b9ypa": undefined,
-  "--awsui-style-background-readonly-6b9ypa": undefined,
-  "--awsui-style-border-color-default-6b9ypa": undefined,
-  "--awsui-style-border-color-disabled-6b9ypa": undefined,
-  "--awsui-style-border-color-focus-6b9ypa": undefined,
-  "--awsui-style-border-color-hover-6b9ypa": undefined,
-  "--awsui-style-border-color-readonly-6b9ypa": undefined,
-  "--awsui-style-box-shadow-default-6b9ypa": undefined,
-  "--awsui-style-box-shadow-disabled-6b9ypa": undefined,
-  "--awsui-style-box-shadow-focus-6b9ypa": undefined,
-  "--awsui-style-box-shadow-hover-6b9ypa": undefined,
-  "--awsui-style-box-shadow-readonly-6b9ypa": undefined,
-  "--awsui-style-color-default-6b9ypa": undefined,
-  "--awsui-style-color-disabled-6b9ypa": undefined,
-  "--awsui-style-color-focus-6b9ypa": undefined,
-  "--awsui-style-color-hover-6b9ypa": undefined,
-  "--awsui-style-color-readonly-6b9ypa": undefined,
-  "--awsui-style-placeholder-color-6b9ypa": undefined,
-  "--awsui-style-placeholder-font-size-6b9ypa": undefined,
-  "--awsui-style-placeholder-font-style-6b9ypa": undefined,
-  "--awsui-style-placeholder-font-weight-6b9ypa": undefined,
+  "--awsui-style-background-default-z17rmd": undefined,
+  "--awsui-style-background-disabled-z17rmd": undefined,
+  "--awsui-style-background-focus-z17rmd": undefined,
+  "--awsui-style-background-hover-z17rmd": undefined,
+  "--awsui-style-background-readonly-z17rmd": undefined,
+  "--awsui-style-border-color-default-z17rmd": undefined,
+  "--awsui-style-border-color-disabled-z17rmd": undefined,
+  "--awsui-style-border-color-focus-z17rmd": undefined,
+  "--awsui-style-border-color-hover-z17rmd": undefined,
+  "--awsui-style-border-color-readonly-z17rmd": undefined,
+  "--awsui-style-box-shadow-default-z17rmd": undefined,
+  "--awsui-style-box-shadow-disabled-z17rmd": undefined,
+  "--awsui-style-box-shadow-focus-z17rmd": undefined,
+  "--awsui-style-box-shadow-hover-z17rmd": undefined,
+  "--awsui-style-box-shadow-readonly-z17rmd": undefined,
+  "--awsui-style-color-default-z17rmd": undefined,
+  "--awsui-style-color-disabled-z17rmd": undefined,
+  "--awsui-style-color-focus-z17rmd": undefined,
+  "--awsui-style-color-hover-z17rmd": undefined,
+  "--awsui-style-color-readonly-z17rmd": undefined,
+  "--awsui-style-placeholder-color-z17rmd": undefined,
+  "--awsui-style-placeholder-font-size-z17rmd": undefined,
+  "--awsui-style-placeholder-font-style-z17rmd": undefined,
+  "--awsui-style-placeholder-font-weight-z17rmd": undefined,
   "borderRadius": undefined,
   "borderWidth": undefined,
   "fontSize": undefined,
@@ -72,30 +72,30 @@ exports[`getInputStyles handles all possible style configurations 2`] = `
 
 exports[`getInputStyles handles all possible style configurations 3`] = `
 {
-  "--awsui-style-background-default-6b9ypa": "#ffffff",
-  "--awsui-style-background-disabled-6b9ypa": "#f0f0f0",
-  "--awsui-style-background-focus-6b9ypa": "#ffffff",
-  "--awsui-style-background-hover-6b9ypa": "#fafafa",
-  "--awsui-style-background-readonly-6b9ypa": "#ffffff",
-  "--awsui-style-border-color-default-6b9ypa": "#cccccc",
-  "--awsui-style-border-color-disabled-6b9ypa": "#e0e0e0",
-  "--awsui-style-border-color-focus-6b9ypa": "#0073bb",
-  "--awsui-style-border-color-hover-6b9ypa": "#999999",
-  "--awsui-style-border-color-readonly-6b9ypa": "#e0e0e0",
-  "--awsui-style-box-shadow-default-6b9ypa": "none",
-  "--awsui-style-box-shadow-disabled-6b9ypa": "none",
-  "--awsui-style-box-shadow-focus-6b9ypa": "0 0 0 2px #0073bb",
-  "--awsui-style-box-shadow-hover-6b9ypa": "0 1px 2px rgba(0,0,0,0.1)",
-  "--awsui-style-box-shadow-readonly-6b9ypa": "none",
-  "--awsui-style-color-default-6b9ypa": "#000000",
-  "--awsui-style-color-disabled-6b9ypa": "#999999",
-  "--awsui-style-color-focus-6b9ypa": "#000000",
-  "--awsui-style-color-hover-6b9ypa": "#000000",
-  "--awsui-style-color-readonly-6b9ypa": "#000000",
-  "--awsui-style-placeholder-color-6b9ypa": "#999999",
-  "--awsui-style-placeholder-font-size-6b9ypa": "14px",
-  "--awsui-style-placeholder-font-style-6b9ypa": "italic",
-  "--awsui-style-placeholder-font-weight-6b9ypa": "400",
+  "--awsui-style-background-default-z17rmd": "#ffffff",
+  "--awsui-style-background-disabled-z17rmd": "#f0f0f0",
+  "--awsui-style-background-focus-z17rmd": "#ffffff",
+  "--awsui-style-background-hover-z17rmd": "#fafafa",
+  "--awsui-style-background-readonly-z17rmd": "#ffffff",
+  "--awsui-style-border-color-default-z17rmd": "#cccccc",
+  "--awsui-style-border-color-disabled-z17rmd": "#e0e0e0",
+  "--awsui-style-border-color-focus-z17rmd": "#0073bb",
+  "--awsui-style-border-color-hover-z17rmd": "#999999",
+  "--awsui-style-border-color-readonly-z17rmd": "#e0e0e0",
+  "--awsui-style-box-shadow-default-z17rmd": "none",
+  "--awsui-style-box-shadow-disabled-z17rmd": "none",
+  "--awsui-style-box-shadow-focus-z17rmd": "0 0 0 2px #0073bb",
+  "--awsui-style-box-shadow-hover-z17rmd": "0 1px 2px rgba(0,0,0,0.1)",
+  "--awsui-style-box-shadow-readonly-z17rmd": "none",
+  "--awsui-style-color-default-z17rmd": "#000000",
+  "--awsui-style-color-disabled-z17rmd": "#999999",
+  "--awsui-style-color-focus-z17rmd": "#000000",
+  "--awsui-style-color-hover-z17rmd": "#000000",
+  "--awsui-style-color-readonly-z17rmd": "#000000",
+  "--awsui-style-placeholder-color-z17rmd": "#999999",
+  "--awsui-style-placeholder-font-size-z17rmd": "14px",
+  "--awsui-style-placeholder-font-style-z17rmd": "italic",
+  "--awsui-style-placeholder-font-weight-z17rmd": "400",
   "borderRadius": "4px",
   "borderWidth": "1px",
   "fontSize": "14px",
diff --git a/src/internal/components/option/styles.scss b/src/internal/components/option/styles.scss
index b1f49b14c3..94f4cf5ee2 100644
--- a/src/internal/components/option/styles.scss
+++ b/src/internal/components/option/styles.scss
@@ -6,6 +6,7 @@
 @use '../../styles' as styles;
 @use '../../styles/tokens' as awsui;
 @use './constants' as constants;
+@use '../../generated/custom-css-properties/index' as custom-props;
 
 .option {
   @include styles.styles-reset;
@@ -100,8 +101,11 @@
 }
 
 .filtering-match-highlight {
-  background-color: awsui.$color-background-dropdown-item-filter-match;
-  color: awsui.$color-text-dropdown-item-filter-match;
+  background-color: var(
+    #{custom-props.$optionFilterMatchBackground},
+    #{awsui.$color-background-dropdown-item-filter-match}
+  );
+  color: var(#{custom-props.$optionFilterMatchColor}, #{awsui.$color-text-dropdown-item-filter-match});
   font-weight: styles.$font-weight-bold;
 }
 
diff --git a/src/internal/components/options-list/index.tsx b/src/internal/components/options-list/index.tsx
index 8dbd0ce778..b9cf1085c0 100644
--- a/src/internal/components/options-list/index.tsx
+++ b/src/internal/components/options-list/index.tsx
@@ -42,6 +42,12 @@ export interface OptionsListProps extends BaseComponentProps {
   embedded?: boolean;
   stickyItemBlockSize?: number | null;
   isMultiSelect?: boolean;
+  /**
+   * Internal style hook. Custom CSS properties applied to the list root; they
+   * inherit down to the options and their filtering-match highlights, letting a
+   * host theme the option rows via the shared selectable-item/option styles.
+   */
+  customProperties?: React.CSSProperties;
 }
 
 const BOTTOM_TRIGGER_OFFSET = 80;
@@ -78,6 +84,7 @@ const OptionsList = (
     embedded,
     stickyItemBlockSize,
     isMultiSelect,
+    customProperties,
     ...restProps
   }: OptionsListProps,
   ref: React.Ref<HTMLDivElement>
@@ -115,7 +122,7 @@ const OptionsList = (
       {...nativeAttributes}
       className={className}
       ref={mergedRef}
-      style={{ position, scrollPaddingBlockStart: stickyItemBlockSize ?? undefined }}
+      style={{ ...customProperties, position, scrollPaddingBlockStart: stickyItemBlockSize ?? undefined }}
       role={role}
       onScroll={handleScroll}
       onKeyDown={event => fireKeyboardEvent(onKeyDown, event)}
diff --git a/src/internal/components/selectable-item/styles.scss b/src/internal/components/selectable-item/styles.scss
index 012ff84568..b5ff5023b0 100644
--- a/src/internal/components/selectable-item/styles.scss
+++ b/src/internal/components/selectable-item/styles.scss
@@ -5,6 +5,7 @@
 
 @use '../../styles' as styles;
 @use '../../styles/tokens' as awsui;
+@use '../../generated/custom-css-properties/index' as custom-props;
 
 // Box-shadow spread values for simulating borders without layout shifts
 $border-offset: awsui.$border-width-item-selected;
@@ -85,8 +86,8 @@ $neg-divider-w: calc(-1 * #{$divider-w});
   z-index: 1;
 
   border-width: 0;
-  background-color: awsui.$color-background-dropdown-item-default;
-  color: awsui.$color-text-dropdown-item-default;
+  background-color: var(#{custom-props.$optionBackgroundDefault}, #{awsui.$color-background-dropdown-item-default});
+  color: var(#{custom-props.$optionColorDefault}, #{awsui.$color-text-dropdown-item-default});
 
   @include content-pad(awsui.$border-item-width, awsui.$border-item-width);
 
@@ -116,7 +117,7 @@ $neg-divider-w: calc(-1 * #{$divider-w});
   }
 
   &.has-background {
-    background-color: awsui.$color-background-dropdown-item-hover;
+    background-color: var(#{custom-props.$optionBackgroundHighlighted}, #{awsui.$color-background-dropdown-item-hover});
   }
   &.child {
     padding-inline-start: awsui.$border-item-width;
@@ -126,18 +127,18 @@ $neg-divider-w: calc(-1 * #{$divider-w});
   }
 
   &.disabled > .selectable-item-content {
-    color: awsui.$color-text-dropdown-item-disabled;
+    color: var(#{custom-props.$optionColorDisabled}, #{awsui.$color-text-dropdown-item-disabled});
   }
 
   &.highlighted,
   &.selected {
-    color: awsui.$color-text-dropdown-item-highlighted;
+    color: var(#{custom-props.$optionColorHighlighted}, #{awsui.$color-text-dropdown-item-highlighted});
     @include logical-radius(awsui.$border-radius-item);
   }
 
   &.highlighted {
     z-index: 3;
-    background-color: awsui.$color-background-dropdown-item-hover;
+    background-color: var(#{custom-props.$optionBackgroundHighlighted}, #{awsui.$color-background-dropdown-item-hover});
     @include highlighted-shadow;
     &.disabled {
       box-shadow: inset 0 0 0 $border-offset awsui.$color-border-dropdown-item-dimmed-hover;
@@ -153,7 +154,7 @@ $neg-divider-w: calc(-1 * #{$divider-w});
 
   &.selected {
     z-index: 2;
-    background-color: awsui.$color-background-dropdown-item-selected;
+    background-color: var(#{custom-props.$optionBackgroundSelected}, #{awsui.$color-background-dropdown-item-selected});
     @include selected-shadow;
     &.next-item-selected {
       border-end-start-radius: 0;
@@ -176,7 +177,7 @@ $neg-divider-w: calc(-1 * #{$divider-w});
   &.parent {
     &:not(.disabled) {
       > .selectable-item-content {
-        color: awsui.$color-text-dropdown-group-label;
+        color: var(#{custom-props.$optionGroupLabelColor}, #{awsui.$color-text-dropdown-group-label});
       }
     }
     &:not(.interactiveGroups) {
diff --git a/src/item-card/__tests__/__snapshots__/styles.test.tsx.snap b/src/item-card/__tests__/__snapshots__/styles.test.tsx.snap
index ecc1b65139..512bdbb55b 100644
--- a/src/item-card/__tests__/__snapshots__/styles.test.tsx.snap
+++ b/src/item-card/__tests__/__snapshots__/styles.test.tsx.snap
@@ -42,11 +42,11 @@ exports[`getRootStyles handles all possible style configurations 2`] = `{}`;
 
 exports[`getRootStyles handles all possible style configurations 3`] = `
 {
-  "--awsui-style-item-card-background-default-6b9ypa": "#ffffff",
-  "--awsui-style-item-card-border-color-default-6b9ypa": "#e0e0e0",
-  "--awsui-style-item-card-border-radius-6b9ypa": "8px",
-  "--awsui-style-item-card-border-width-default-6b9ypa": "1px",
-  "--awsui-style-item-card-box-shadow-default-6b9ypa": "0 1px 3px rgba(0,0,0,0.1)",
+  "--awsui-style-item-card-background-default-z17rmd": "#ffffff",
+  "--awsui-style-item-card-border-color-default-z17rmd": "#e0e0e0",
+  "--awsui-style-item-card-border-radius-z17rmd": "8px",
+  "--awsui-style-item-card-border-width-default-z17rmd": "1px",
+  "--awsui-style-item-card-box-shadow-default-z17rmd": "0 1px 3px rgba(0,0,0,0.1)",
   "borderRadius": "8px",
 }
 `;
diff --git a/src/prompt-input/__tests__/styles.test.tsx b/src/prompt-input/__tests__/styles.test.tsx
index beee993c47..8aa240630f 100644
--- a/src/prompt-input/__tests__/styles.test.tsx
+++ b/src/prompt-input/__tests__/styles.test.tsx
@@ -1,7 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import customCssProps from '../../internal/generated/custom-css-properties';
-import { getPromptInputStyles } from '../styles';
+import { getMenuOptionsListStyles, getPromptInputStyles } from '../styles';
 
 // Mock the environment module
 jest.mock('../../internal/environment', () => ({
@@ -60,6 +60,12 @@ describe('getPromptInputStyles', () => {
         fontWeight: '400',
         fontStyle: 'italic',
       },
+      menu: {
+        backgroundColor: '#1a1a2e',
+        borderColor: '#7b2d8b',
+        borderRadius: '12px',
+        borderWidth: '1.5px',
+      },
     };
 
     expect(getPromptInputStyles(allStyles)).toEqual({
@@ -93,6 +99,10 @@ describe('getPromptInputStyles', () => {
       [customCssProps.promptInputStylePlaceholderFontSize]: '14px',
       [customCssProps.promptInputStylePlaceholderFontWeight]: '400',
       [customCssProps.promptInputStylePlaceholderFontStyle]: 'italic',
+      [customCssProps.promptInputMenuStyleBackgroundColor]: '#1a1a2e',
+      [customCssProps.promptInputMenuStyleBorderColor]: '#7b2d8b',
+      [customCssProps.promptInputMenuStyleBorderRadius]: '12px',
+      [customCssProps.promptInputMenuStyleBorderWidth]: '1.5px',
     });
   });
 
@@ -115,3 +125,63 @@ describe('getPromptInputStyles', () => {
     expect(result).toEqual({});
   });
 });
+
+describe('getMenuOptionsListStyles', () => {
+  afterEach(() => {
+    jest.resetModules();
+  });
+
+  test('returns undefined when there are no option or filterMatch overrides', () => {
+    expect(getMenuOptionsListStyles(undefined)).toBeUndefined();
+    expect(getMenuOptionsListStyles({})).toBeUndefined();
+    // Surface-only overrides don't produce options-list custom properties.
+    expect(getMenuOptionsListStyles({ backgroundColor: '#fff', borderColor: '#000' })).toBeUndefined();
+  });
+
+  test('maps option and filterMatch overrides to option custom properties', () => {
+    const menuStyle = {
+      options: {
+        backgroundColor: { default: '#101010', highlighted: '#202020', selected: '#303030' },
+        color: { default: '#404040', highlighted: '#505050', disabled: '#606060', groupLabel: '#707070' },
+      },
+      filterMatch: { backgroundColor: '#808080', color: '#909090' },
+    };
+
+    expect(getMenuOptionsListStyles(menuStyle)).toEqual({
+      [customCssProps.optionBackgroundDefault]: '#101010',
+      [customCssProps.optionBackgroundHighlighted]: '#202020',
+      [customCssProps.optionBackgroundSelected]: '#303030',
+      [customCssProps.optionColorDefault]: '#404040',
+      [customCssProps.optionColorHighlighted]: '#505050',
+      [customCssProps.optionColorDisabled]: '#606060',
+      [customCssProps.optionGroupLabelColor]: '#707070',
+      [customCssProps.optionFilterMatchBackground]: '#808080',
+      [customCssProps.optionFilterMatchColor]: '#909090',
+    });
+  });
+
+  test('omits unset values so styles fall back to design tokens', () => {
+    expect(getMenuOptionsListStyles({ options: { backgroundColor: { default: '#101010' } } })).toEqual({
+      [customCssProps.optionBackgroundDefault]: '#101010',
+      [customCssProps.optionBackgroundHighlighted]: undefined,
+      [customCssProps.optionBackgroundSelected]: undefined,
+      [customCssProps.optionColorDefault]: undefined,
+      [customCssProps.optionColorHighlighted]: undefined,
+      [customCssProps.optionColorDisabled]: undefined,
+      [customCssProps.optionGroupLabelColor]: undefined,
+      [customCssProps.optionFilterMatchBackground]: undefined,
+      [customCssProps.optionFilterMatchColor]: undefined,
+    });
+  });
+
+  test('returns undefined when SYSTEM is not core', async () => {
+    jest.resetModules();
+    jest.doMock('../../internal/environment', () => ({
+      SYSTEM: 'visual-refresh',
+    }));
+
+    const { getMenuOptionsListStyles: getMenuOptionsListStylesNonCore } = await import('../styles');
+
+    expect(getMenuOptionsListStylesNonCore({ options: { backgroundColor: { default: '#101010' } } })).toBeUndefined();
+  });
+});
diff --git a/src/prompt-input/components/menu-dropdown.tsx b/src/prompt-input/components/menu-dropdown.tsx
index cef7bce573..5bfe6ad26d 100644
--- a/src/prompt-input/components/menu-dropdown.tsx
+++ b/src/prompt-input/components/menu-dropdown.tsx
@@ -24,6 +24,8 @@ interface MenuDropdownProps {
   hasDropdownStatus?: boolean;
   listBottom?: React.ReactNode;
   ariaDescribedby?: string;
+  /** Custom CSS properties applied to the options list root to theme option rows. */
+  optionsListCustomProperties?: React.CSSProperties;
 }
 
 const createMouseEventHandler = (handler: (index: number) => void) => (itemIndex: number) => {
@@ -45,6 +47,7 @@ export default function MenuDropdown({
   hasDropdownStatus,
   listBottom,
   ariaDescribedby,
+  optionsListCustomProperties,
 }: MenuDropdownProps) {
   const handleMouseUp = createMouseEventHandler(menuItemsHandlers.selectVisibleOptionWithMouse);
   const handleMouseMove = createMouseEventHandler(menuItemsHandlers.highlightVisibleOptionWithMouse);
@@ -91,6 +94,7 @@ export default function MenuDropdown({
           onMouseMove: handleMouseMove,
           ariaDescribedby,
           statusType: statusType ?? 'finished',
+          customProperties: optionsListCustomProperties,
         }}
         screenReaderContent={announcement}
       />
diff --git a/src/prompt-input/components/token-mode.tsx b/src/prompt-input/components/token-mode.tsx
index b5716048bc..7167d96ae4 100644
--- a/src/prompt-input/components/token-mode.tsx
+++ b/src/prompt-input/components/token-mode.tsx
@@ -4,11 +4,13 @@
 import React from 'react';
 import clsx from 'clsx';
 
+import { DropdownProps } from '../../dropdown/interfaces';
 import Dropdown from '../../dropdown/internal';
 import DropdownFooter from '../../internal/components/dropdown-footer';
 import { DropdownStatusResult } from '../../internal/components/dropdown-status';
 import { MenuItemsHandlers, MenuItemsState } from '../core/menu-state';
 import { PromptInputProps } from '../interfaces';
+import { getMenuOptionsListStyles } from '../styles';
 import MenuDropdown from './menu-dropdown';
 
 import styles from '../styles.css.js';
@@ -53,6 +55,7 @@ interface TokenModeProps {
   i18nStrings?: PromptInputProps['i18nStrings'];
 
   maxMenuHeight?: number;
+  menuStyle?: PromptInputProps.Style['menu'];
 }
 
 const MENU_MIN_WIDTH = 300;
@@ -76,6 +79,7 @@ export default function TokenMode({
   menuItemsHandlers,
   menuDropdownStatus,
   maxMenuHeight,
+  menuStyle,
   handleInput,
   handleLoadMore,
   editableElementAttributes,
@@ -117,6 +121,19 @@ export default function TokenMode({
           minWidth={MENU_MIN_WIDTH}
           maxHeight={maxMenuHeight}
           expandToViewport={true}
+          style={
+            menuStyle
+              ? ({
+                  // DropdownProps.Style names the fill `background`; PromptInput exposes it as `backgroundColor`.
+                  dropdown: {
+                    background: menuStyle.backgroundColor,
+                    borderColor: menuStyle.borderColor,
+                    borderRadius: menuStyle.borderRadius,
+                    borderWidth: menuStyle.borderWidth,
+                  },
+                } satisfies DropdownProps.Style)
+              : undefined
+          }
           open={
             !!(
               shouldRenderMenuDropdown &&
@@ -157,6 +174,7 @@ export default function TokenMode({
                   statusType={activeMenu.statusType ?? 'finished'}
                   menuItemsState={menuItemsState}
                   menuItemsHandlers={menuItemsHandlers}
+                  optionsListCustomProperties={getMenuOptionsListStyles(menuStyle)}
                   highlightedOptionId={highlightedMenuOptionId}
                   highlightText={menuFilterText}
                   listId={menuListId}
diff --git a/src/prompt-input/interfaces.ts b/src/prompt-input/interfaces.ts
index 36011abcee..77f693fcd5 100644
--- a/src/prompt-input/interfaces.ts
+++ b/src/prompt-input/interfaces.ts
@@ -574,5 +574,52 @@ export namespace PromptInputProps {
       fontStyle?: string;
       fontWeight?: string;
     };
+    /**
+     * Style overrides for the menus/shortcuts dropdown that appears when a trigger
+     * character is typed. Use this to match the dropdown's visual appearance to a
+     * custom design system theme.
+     *
+     * @awsuiSystem core
+     */
+    menu?: {
+      backgroundColor?: string;
+      borderColor?: string;
+      borderRadius?: string;
+      borderWidth?: string;
+
+      /**
+       * Style overrides for the options rendered inside the menu dropdown.
+       * Unlike `backgroundColor` (which themes the dropdown surface), these
+       * theme the option rows themselves, which are otherwise opaque and cover
+       * the surface. Ensure the text colors keep sufficient contrast against
+       * the corresponding backgrounds, including the highlighted and selected
+       * states.
+       */
+      options?: {
+        backgroundColor?: {
+          default?: string;
+          /** Applied to the hovered/keyboard-highlighted option. */
+          highlighted?: string;
+          selected?: string;
+        };
+        color?: {
+          default?: string;
+          /** Applied to the hovered/keyboard-highlighted option. */
+          highlighted?: string;
+          disabled?: string;
+          /** Applied to non-interactive option group labels. */
+          groupLabel?: string;
+        };
+      };
+
+      /**
+       * Style overrides for the substring highlight shown on options that match
+       * the filtering text.
+       */
+      filterMatch?: {
+        backgroundColor?: string;
+        color?: string;
+      };
+    };
   }
 }
diff --git a/src/prompt-input/internal.tsx b/src/prompt-input/internal.tsx
index 4a042cc067..716e5e3c80 100644
--- a/src/prompt-input/internal.tsx
+++ b/src/prompt-input/internal.tsx
@@ -444,6 +444,7 @@ const InternalPromptInput = React.forwardRef(
               menuItemsHandlers={tokenMode.menuItemsHandlers}
               menuDropdownStatus={tokenMode.menuDropdownStatus}
               maxMenuHeight={maxMenuHeight}
+              menuStyle={style?.menu}
               handleInput={tokenMode.handleInput}
               handleLoadMore={tokenMode.handleLoadMore}
               editableElementAttributes={tokenMode.editableElementAttributes}
diff --git a/src/prompt-input/styles.tsx b/src/prompt-input/styles.tsx
index f993af759d..52399686e5 100644
--- a/src/prompt-input/styles.tsx
+++ b/src/prompt-input/styles.tsx
@@ -1,9 +1,35 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+import type { CSSProperties } from 'react';
+
 import { SYSTEM } from '../internal/environment';
 import customCssProps from '../internal/generated/custom-css-properties';
 import { PromptInputProps } from './interfaces';
 
+/**
+ * Maps the public `style.menu.options`/`filterMatch` overrides to the internal
+ * options-list custom properties consumed by the shared selectable-item/option
+ * styles. Core system only, mirroring getPromptInputStyles. Unset values are
+ * omitted so those styles keep falling back to design tokens. Returns undefined
+ * when there is nothing to apply, so no custom properties are set on the list.
+ */
+export function getMenuOptionsListStyles(menuStyle: PromptInputProps.Style['menu']): CSSProperties | undefined {
+  if (SYSTEM !== 'core' || (!menuStyle?.options && !menuStyle?.filterMatch)) {
+    return undefined;
+  }
+  return {
+    [customCssProps.optionBackgroundDefault]: menuStyle.options?.backgroundColor?.default,
+    [customCssProps.optionBackgroundHighlighted]: menuStyle.options?.backgroundColor?.highlighted,
+    [customCssProps.optionBackgroundSelected]: menuStyle.options?.backgroundColor?.selected,
+    [customCssProps.optionColorDefault]: menuStyle.options?.color?.default,
+    [customCssProps.optionColorHighlighted]: menuStyle.options?.color?.highlighted,
+    [customCssProps.optionColorDisabled]: menuStyle.options?.color?.disabled,
+    [customCssProps.optionGroupLabelColor]: menuStyle.options?.color?.groupLabel,
+    [customCssProps.optionFilterMatchBackground]: menuStyle.filterMatch?.backgroundColor,
+    [customCssProps.optionFilterMatchColor]: menuStyle.filterMatch?.color,
+  } as CSSProperties;
+}
+
 export function getPromptInputStyles(style: PromptInputProps['style']) {
   if (SYSTEM !== 'core') {
     return {};
@@ -40,5 +66,9 @@ export function getPromptInputStyles(style: PromptInputProps['style']) {
     [customCssProps.promptInputStylePlaceholderFontSize]: style?.placeholder?.fontSize,
     [customCssProps.promptInputStylePlaceholderFontWeight]: style?.placeholder?.fontWeight,
     [customCssProps.promptInputStylePlaceholderFontStyle]: style?.placeholder?.fontStyle,
+    [customCssProps.promptInputMenuStyleBackgroundColor]: style?.menu?.backgroundColor,
+    [customCssProps.promptInputMenuStyleBorderColor]: style?.menu?.borderColor,
+    [customCssProps.promptInputMenuStyleBorderRadius]: style?.menu?.borderRadius,
+    [customCssProps.promptInputMenuStyleBorderWidth]: style?.menu?.borderWidth,
   };
 }
diff --git a/src/segmented-control/__tests__/__snapshots__/styles.test.tsx.snap b/src/segmented-control/__tests__/__snapshots__/styles.test.tsx.snap
index 9cfed12417..37eb946e54 100644
--- a/src/segmented-control/__tests__/__snapshots__/styles.test.tsx.snap
+++ b/src/segmented-control/__tests__/__snapshots__/styles.test.tsx.snap
@@ -20,17 +20,17 @@ exports[`getSegmentedControlRootStyles handles all possible style configurations
 
 exports[`getSegmentedControlSegmentStyles handles all possible style configurations 1`] = `
 {
-  "--awsui-style-background-active-6b9ypa": undefined,
-  "--awsui-style-background-default-6b9ypa": undefined,
-  "--awsui-style-background-disabled-6b9ypa": undefined,
-  "--awsui-style-background-hover-6b9ypa": undefined,
-  "--awsui-style-color-active-6b9ypa": undefined,
-  "--awsui-style-color-default-6b9ypa": undefined,
-  "--awsui-style-color-disabled-6b9ypa": undefined,
-  "--awsui-style-color-hover-6b9ypa": undefined,
-  "--awsui-style-focus-ring-border-color-6b9ypa": undefined,
-  "--awsui-style-focus-ring-border-radius-6b9ypa": undefined,
-  "--awsui-style-focus-ring-border-width-6b9ypa": undefined,
+  "--awsui-style-background-active-z17rmd": undefined,
+  "--awsui-style-background-default-z17rmd": undefined,
+  "--awsui-style-background-disabled-z17rmd": undefined,
+  "--awsui-style-background-hover-z17rmd": undefined,
+  "--awsui-style-color-active-z17rmd": undefined,
+  "--awsui-style-color-default-z17rmd": undefined,
+  "--awsui-style-color-disabled-z17rmd": undefined,
+  "--awsui-style-color-hover-z17rmd": undefined,
+  "--awsui-style-focus-ring-border-color-z17rmd": undefined,
+  "--awsui-style-focus-ring-border-radius-z17rmd": undefined,
+  "--awsui-style-focus-ring-border-width-z17rmd": undefined,
   "borderRadius": undefined,
   "fontSize": undefined,
   "paddingBlock": undefined,
@@ -40,17 +40,17 @@ exports[`getSegmentedControlSegmentStyles handles all possible style configurati
 
 exports[`getSegmentedControlSegmentStyles handles all possible style configurations 2`] = `
 {
-  "--awsui-style-background-active-6b9ypa": undefined,
-  "--awsui-style-background-default-6b9ypa": undefined,
-  "--awsui-style-background-disabled-6b9ypa": undefined,
-  "--awsui-style-background-hover-6b9ypa": undefined,
-  "--awsui-style-color-active-6b9ypa": undefined,
-  "--awsui-style-color-default-6b9ypa": undefined,
-  "--awsui-style-color-disabled-6b9ypa": undefined,
-  "--awsui-style-color-hover-6b9ypa": undefined,
-  "--awsui-style-focus-ring-border-color-6b9ypa": undefined,
-  "--awsui-style-focus-ring-border-radius-6b9ypa": undefined,
-  "--awsui-style-focus-ring-border-width-6b9ypa": undefined,
+  "--awsui-style-background-active-z17rmd": undefined,
+  "--awsui-style-background-default-z17rmd": undefined,
+  "--awsui-style-background-disabled-z17rmd": undefined,
+  "--awsui-style-background-hover-z17rmd": undefined,
+  "--awsui-style-color-active-z17rmd": undefined,
+  "--awsui-style-color-default-z17rmd": undefined,
+  "--awsui-style-color-disabled-z17rmd": undefined,
+  "--awsui-style-color-hover-z17rmd": undefined,
+  "--awsui-style-focus-ring-border-color-z17rmd": undefined,
+  "--awsui-style-focus-ring-border-radius-z17rmd": undefined,
+  "--awsui-style-focus-ring-border-width-z17rmd": undefined,
   "borderRadius": undefined,
   "fontSize": undefined,
   "paddingBlock": undefined,
@@ -60,17 +60,17 @@ exports[`getSegmentedControlSegmentStyles handles all possible style configurati
 
 exports[`getSegmentedControlSegmentStyles handles all possible style configurations 3`] = `
 {
-  "--awsui-style-background-active-6b9ypa": "#0073bb",
-  "--awsui-style-background-default-6b9ypa": "#ffffff",
-  "--awsui-style-background-disabled-6b9ypa": "#f0f0f0",
-  "--awsui-style-background-hover-6b9ypa": "#fafafa",
-  "--awsui-style-color-active-6b9ypa": "#ffffff",
-  "--awsui-style-color-default-6b9ypa": "#000000",
-  "--awsui-style-color-disabled-6b9ypa": "#999999",
-  "--awsui-style-color-hover-6b9ypa": "#000000",
-  "--awsui-style-focus-ring-border-color-6b9ypa": "#0073bb",
-  "--awsui-style-focus-ring-border-radius-6b9ypa": "8px",
-  "--awsui-style-focus-ring-border-width-6b9ypa": "2px",
+  "--awsui-style-background-active-z17rmd": "#0073bb",
+  "--awsui-style-background-default-z17rmd": "#ffffff",
+  "--awsui-style-background-disabled-z17rmd": "#f0f0f0",
+  "--awsui-style-background-hover-z17rmd": "#fafafa",
+  "--awsui-style-color-active-z17rmd": "#ffffff",
+  "--awsui-style-color-default-z17rmd": "#000000",
+  "--awsui-style-color-disabled-z17rmd": "#999999",
+  "--awsui-style-color-hover-z17rmd": "#000000",
+  "--awsui-style-focus-ring-border-color-z17rmd": "#0073bb",
+  "--awsui-style-focus-ring-border-radius-z17rmd": "8px",
+  "--awsui-style-focus-ring-border-width-z17rmd": "2px",
   "borderRadius": "6px",
   "fontSize": "14px",
   "paddingBlock": "8px",
diff --git a/src/slider/__tests__/__snapshots__/styles.test.tsx.snap b/src/slider/__tests__/__snapshots__/styles.test.tsx.snap
index 2ee8224105..d449f3943d 100644
--- a/src/slider/__tests__/__snapshots__/styles.test.tsx.snap
+++ b/src/slider/__tests__/__snapshots__/styles.test.tsx.snap
@@ -2,36 +2,36 @@
 
 exports[`getSliderStyles handles all possible style configurations 1`] = `
 {
-  "--awsui-style-slider-handle-background-active-6b9ypa": undefined,
-  "--awsui-style-slider-handle-background-default-6b9ypa": undefined,
-  "--awsui-style-slider-handle-background-hover-6b9ypa": undefined,
-  "--awsui-style-slider-handle-border-radius-6b9ypa": undefined,
-  "--awsui-style-slider-range-background-active-6b9ypa": undefined,
-  "--awsui-style-slider-range-background-default-6b9ypa": undefined,
-  "--awsui-style-slider-track-background-color-6b9ypa": undefined,
+  "--awsui-style-slider-handle-background-active-z17rmd": undefined,
+  "--awsui-style-slider-handle-background-default-z17rmd": undefined,
+  "--awsui-style-slider-handle-background-hover-z17rmd": undefined,
+  "--awsui-style-slider-handle-border-radius-z17rmd": undefined,
+  "--awsui-style-slider-range-background-active-z17rmd": undefined,
+  "--awsui-style-slider-range-background-default-z17rmd": undefined,
+  "--awsui-style-slider-track-background-color-z17rmd": undefined,
 }
 `;
 
 exports[`getSliderStyles handles all possible style configurations 2`] = `
 {
-  "--awsui-style-slider-handle-background-active-6b9ypa": undefined,
-  "--awsui-style-slider-handle-background-default-6b9ypa": undefined,
-  "--awsui-style-slider-handle-background-hover-6b9ypa": undefined,
-  "--awsui-style-slider-handle-border-radius-6b9ypa": undefined,
-  "--awsui-style-slider-range-background-active-6b9ypa": undefined,
-  "--awsui-style-slider-range-background-default-6b9ypa": undefined,
-  "--awsui-style-slider-track-background-color-6b9ypa": undefined,
+  "--awsui-style-slider-handle-background-active-z17rmd": undefined,
+  "--awsui-style-slider-handle-background-default-z17rmd": undefined,
+  "--awsui-style-slider-handle-background-hover-z17rmd": undefined,
+  "--awsui-style-slider-handle-border-radius-z17rmd": undefined,
+  "--awsui-style-slider-range-background-active-z17rmd": undefined,
+  "--awsui-style-slider-range-background-default-z17rmd": undefined,
+  "--awsui-style-slider-track-background-color-z17rmd": undefined,
 }
 `;
 
 exports[`getSliderStyles handles all possible style configurations 3`] = `
 {
-  "--awsui-style-slider-handle-background-active-6b9ypa": "#1d4ed8",
-  "--awsui-style-slider-handle-background-default-6b9ypa": "#3b82f6",
-  "--awsui-style-slider-handle-background-hover-6b9ypa": "#2563eb",
-  "--awsui-style-slider-handle-border-radius-6b9ypa": "50%",
-  "--awsui-style-slider-range-background-active-6b9ypa": "#2563eb",
-  "--awsui-style-slider-range-background-default-6b9ypa": "#3b82f6",
-  "--awsui-style-slider-track-background-color-6b9ypa": "#dbeafe",
+  "--awsui-style-slider-handle-background-active-z17rmd": "#1d4ed8",
+  "--awsui-style-slider-handle-background-default-z17rmd": "#3b82f6",
+  "--awsui-style-slider-handle-background-hover-z17rmd": "#2563eb",
+  "--awsui-style-slider-handle-border-radius-z17rmd": "50%",
+  "--awsui-style-slider-range-background-active-z17rmd": "#2563eb",
+  "--awsui-style-slider-range-background-default-z17rmd": "#3b82f6",
+  "--awsui-style-slider-track-background-color-z17rmd": "#dbeafe",
 }
 `;
diff --git a/src/tabs/__tests__/__snapshots__/styles.test.tsx.snap b/src/tabs/__tests__/__snapshots__/styles.test.tsx.snap
index 369fed8a6e..c57425d5e4 100644
--- a/src/tabs/__tests__/__snapshots__/styles.test.tsx.snap
+++ b/src/tabs/__tests__/__snapshots__/styles.test.tsx.snap
@@ -2,21 +2,21 @@
 
 exports[`getTabStyles transforms tab styles to CSS properties 1`] = `
 {
-  "--awsui-style-background-active-6b9ypa": "#bfdbfe",
-  "--awsui-style-background-default-6b9ypa": "#dbeafe",
-  "--awsui-style-background-disabled-6b9ypa": "#f3f4f6",
-  "--awsui-style-background-hover-6b9ypa": "#eff6ff",
-  "--awsui-style-border-color-active-6b9ypa": "#1d4ed8",
-  "--awsui-style-border-color-default-6b9ypa": "#3b82f6",
-  "--awsui-style-border-color-disabled-6b9ypa": "#93c5fd",
-  "--awsui-style-border-color-hover-6b9ypa": "#2563eb",
-  "--awsui-style-color-active-6b9ypa": "#1e3a8a",
-  "--awsui-style-color-default-6b9ypa": "#1e40af",
-  "--awsui-style-color-disabled-6b9ypa": "#93c5fd",
-  "--awsui-style-color-hover-6b9ypa": "#1e40af",
-  "--awsui-style-focus-ring-border-color-6b9ypa": "#3b82f6",
-  "--awsui-style-focus-ring-border-radius-6b9ypa": "4px",
-  "--awsui-style-focus-ring-border-width-6b9ypa": "2px",
+  "--awsui-style-background-active-z17rmd": "#bfdbfe",
+  "--awsui-style-background-default-z17rmd": "#dbeafe",
+  "--awsui-style-background-disabled-z17rmd": "#f3f4f6",
+  "--awsui-style-background-hover-z17rmd": "#eff6ff",
+  "--awsui-style-border-color-active-z17rmd": "#1d4ed8",
+  "--awsui-style-border-color-default-z17rmd": "#3b82f6",
+  "--awsui-style-border-color-disabled-z17rmd": "#93c5fd",
+  "--awsui-style-border-color-hover-z17rmd": "#2563eb",
+  "--awsui-style-color-active-z17rmd": "#1e3a8a",
+  "--awsui-style-color-default-z17rmd": "#1e40af",
+  "--awsui-style-color-disabled-z17rmd": "#93c5fd",
+  "--awsui-style-color-hover-z17rmd": "#1e40af",
+  "--awsui-style-focus-ring-border-color-z17rmd": "#3b82f6",
+  "--awsui-style-focus-ring-border-radius-z17rmd": "4px",
+  "--awsui-style-focus-ring-border-width-z17rmd": "2px",
   "borderRadius": "4px",
   "borderWidth": "2px",
   "fontSize": "16px",
@@ -28,10 +28,10 @@ exports[`getTabStyles transforms tab styles to CSS properties 1`] = `
 
 exports[`getTabStyles transforms tab styles to CSS properties 2`] = `
 {
-  "--awsui-style-tabs-active-indicator-border-radius-6b9ypa": "2px",
-  "--awsui-style-tabs-active-indicator-color-6b9ypa": "#1d4ed8",
-  "--awsui-style-tabs-active-indicator-width-6b9ypa": "3px",
-  "--awsui-style-tabs-separator-color-6b9ypa": "#cbd5e1",
-  "--awsui-style-tabs-separator-width-6b9ypa": "2px",
+  "--awsui-style-tabs-active-indicator-border-radius-z17rmd": "2px",
+  "--awsui-style-tabs-active-indicator-color-z17rmd": "#1d4ed8",
+  "--awsui-style-tabs-active-indicator-width-z17rmd": "3px",
+  "--awsui-style-tabs-separator-color-z17rmd": "#cbd5e1",
+  "--awsui-style-tabs-separator-width-z17rmd": "2px",
 }
 `;
diff --git a/src/text-filter/__tests__/__snapshots__/styles.test.tsx.snap b/src/text-filter/__tests__/__snapshots__/styles.test.tsx.snap
index daf5208fe6..abaa6411e3 100644
--- a/src/text-filter/__tests__/__snapshots__/styles.test.tsx.snap
+++ b/src/text-filter/__tests__/__snapshots__/styles.test.tsx.snap
@@ -2,30 +2,30 @@
 
 exports[`getTextFilterStyles handles all possible style configurations 1`] = `
 {
-  "--awsui-style-background-default-6b9ypa": undefined,
-  "--awsui-style-background-disabled-6b9ypa": undefined,
-  "--awsui-style-background-focus-6b9ypa": undefined,
-  "--awsui-style-background-hover-6b9ypa": undefined,
-  "--awsui-style-background-readonly-6b9ypa": undefined,
-  "--awsui-style-border-color-default-6b9ypa": undefined,
-  "--awsui-style-border-color-disabled-6b9ypa": undefined,
-  "--awsui-style-border-color-focus-6b9ypa": undefined,
-  "--awsui-style-border-color-hover-6b9ypa": undefined,
-  "--awsui-style-border-color-readonly-6b9ypa": undefined,
-  "--awsui-style-box-shadow-default-6b9ypa": undefined,
-  "--awsui-style-box-shadow-disabled-6b9ypa": undefined,
-  "--awsui-style-box-shadow-focus-6b9ypa": undefined,
-  "--awsui-style-box-shadow-hover-6b9ypa": undefined,
-  "--awsui-style-box-shadow-readonly-6b9ypa": undefined,
-  "--awsui-style-color-default-6b9ypa": undefined,
-  "--awsui-style-color-disabled-6b9ypa": undefined,
-  "--awsui-style-color-focus-6b9ypa": undefined,
-  "--awsui-style-color-hover-6b9ypa": undefined,
-  "--awsui-style-color-readonly-6b9ypa": undefined,
-  "--awsui-style-placeholder-color-6b9ypa": undefined,
-  "--awsui-style-placeholder-font-size-6b9ypa": undefined,
-  "--awsui-style-placeholder-font-style-6b9ypa": undefined,
-  "--awsui-style-placeholder-font-weight-6b9ypa": undefined,
+  "--awsui-style-background-default-z17rmd": undefined,
+  "--awsui-style-background-disabled-z17rmd": undefined,
+  "--awsui-style-background-focus-z17rmd": undefined,
+  "--awsui-style-background-hover-z17rmd": undefined,
+  "--awsui-style-background-readonly-z17rmd": undefined,
+  "--awsui-style-border-color-default-z17rmd": undefined,
+  "--awsui-style-border-color-disabled-z17rmd": undefined,
+  "--awsui-style-border-color-focus-z17rmd": undefined,
+  "--awsui-style-border-color-hover-z17rmd": undefined,
+  "--awsui-style-border-color-readonly-z17rmd": undefined,
+  "--awsui-style-box-shadow-default-z17rmd": undefined,
+  "--awsui-style-box-shadow-disabled-z17rmd": undefined,
+  "--awsui-style-box-shadow-focus-z17rmd": undefined,
+  "--awsui-style-box-shadow-hover-z17rmd": undefined,
+  "--awsui-style-box-shadow-readonly-z17rmd": undefined,
+  "--awsui-style-color-default-z17rmd": undefined,
+  "--awsui-style-color-disabled-z17rmd": undefined,
+  "--awsui-style-color-focus-z17rmd": undefined,
+  "--awsui-style-color-hover-z17rmd": undefined,
+  "--awsui-style-color-readonly-z17rmd": undefined,
+  "--awsui-style-placeholder-color-z17rmd": undefined,
+  "--awsui-style-placeholder-font-size-z17rmd": undefined,
+  "--awsui-style-placeholder-font-style-z17rmd": undefined,
+  "--awsui-style-placeholder-font-weight-z17rmd": undefined,
   "borderRadius": undefined,
   "borderWidth": undefined,
   "fontSize": undefined,
@@ -37,30 +37,30 @@ exports[`getTextFilterStyles handles all possible style configurations 1`] = `
 
 exports[`getTextFilterStyles handles all possible style configurations 2`] = `
 {
-  "--awsui-style-background-default-6b9ypa": undefined,
-  "--awsui-style-background-disabled-6b9ypa": undefined,
-  "--awsui-style-background-focus-6b9ypa": undefined,
-  "--awsui-style-background-hover-6b9ypa": undefined,
-  "--awsui-style-background-readonly-6b9ypa": undefined,
-  "--awsui-style-border-color-default-6b9ypa": undefined,
-  "--awsui-style-border-color-disabled-6b9ypa": undefined,
-  "--awsui-style-border-color-focus-6b9ypa": undefined,
-  "--awsui-style-border-color-hover-6b9ypa": undefined,
-  "--awsui-style-border-color-readonly-6b9ypa": undefined,
-  "--awsui-style-box-shadow-default-6b9ypa": undefined,
-  "--awsui-style-box-shadow-disabled-6b9ypa": undefined,
-  "--awsui-style-box-shadow-focus-6b9ypa": undefined,
-  "--awsui-style-box-shadow-hover-6b9ypa": undefined,
-  "--awsui-style-box-shadow-readonly-6b9ypa": undefined,
-  "--awsui-style-color-default-6b9ypa": undefined,
-  "--awsui-style-color-disabled-6b9ypa": undefined,
-  "--awsui-style-color-focus-6b9ypa": undefined,
-  "--awsui-style-color-hover-6b9ypa": undefined,
-  "--awsui-style-color-readonly-6b9ypa": undefined,
-  "--awsui-style-placeholder-color-6b9ypa": undefined,
-  "--awsui-style-placeholder-font-size-6b9ypa": undefined,
-  "--awsui-style-placeholder-font-style-6b9ypa": undefined,
-  "--awsui-style-placeholder-font-weight-6b9ypa": undefined,
+  "--awsui-style-background-default-z17rmd": undefined,
+  "--awsui-style-background-disabled-z17rmd": undefined,
+  "--awsui-style-background-focus-z17rmd": undefined,
+  "--awsui-style-background-hover-z17rmd": undefined,
+  "--awsui-style-background-readonly-z17rmd": undefined,
+  "--awsui-style-border-color-default-z17rmd": undefined,
+  "--awsui-style-border-color-disabled-z17rmd": undefined,
+  "--awsui-style-border-color-focus-z17rmd": undefined,
+  "--awsui-style-border-color-hover-z17rmd": undefined,
+  "--awsui-style-border-color-readonly-z17rmd": undefined,
+  "--awsui-style-box-shadow-default-z17rmd": undefined,
+  "--awsui-style-box-shadow-disabled-z17rmd": undefined,
+  "--awsui-style-box-shadow-focus-z17rmd": undefined,
+  "--awsui-style-box-shadow-hover-z17rmd": undefined,
+  "--awsui-style-box-shadow-readonly-z17rmd": undefined,
+  "--awsui-style-color-default-z17rmd": undefined,
+  "--awsui-style-color-disabled-z17rmd": undefined,
+  "--awsui-style-color-focus-z17rmd": undefined,
+  "--awsui-style-color-hover-z17rmd": undefined,
+  "--awsui-style-color-readonly-z17rmd": undefined,
+  "--awsui-style-placeholder-color-z17rmd": undefined,
+  "--awsui-style-placeholder-font-size-z17rmd": undefined,
+  "--awsui-style-placeholder-font-style-z17rmd": undefined,
+  "--awsui-style-placeholder-font-weight-z17rmd": undefined,
   "borderRadius": undefined,
   "borderWidth": undefined,
   "fontSize": undefined,
@@ -72,30 +72,30 @@ exports[`getTextFilterStyles handles all possible style configurations 2`] = `
 
 exports[`getTextFilterStyles handles all possible style configurations 3`] = `
 {
-  "--awsui-style-background-default-6b9ypa": "#ffffff",
-  "--awsui-style-background-disabled-6b9ypa": "#f0f0f0",
-  "--awsui-style-background-focus-6b9ypa": "#ffffff",
-  "--awsui-style-background-hover-6b9ypa": "#fafafa",
-  "--awsui-style-background-readonly-6b9ypa": "#ffffff",
-  "--awsui-style-border-color-default-6b9ypa": "#cccccc",
-  "--awsui-style-border-color-disabled-6b9ypa": "#e0e0e0",
-  "--awsui-style-border-color-focus-6b9ypa": "#0073bb",
-  "--awsui-style-border-color-hover-6b9ypa": "#999999",
-  "--awsui-style-border-color-readonly-6b9ypa": "#e0e0e0",
-  "--awsui-style-box-shadow-default-6b9ypa": "none",
-  "--awsui-style-box-shadow-disabled-6b9ypa": "none",
-  "--awsui-style-box-shadow-focus-6b9ypa": "0 0 0 2px #0073bb",
-  "--awsui-style-box-shadow-hover-6b9ypa": "0 1px 2px rgba(0,0,0,0.1)",
-  "--awsui-style-box-shadow-readonly-6b9ypa": "none",
-  "--awsui-style-color-default-6b9ypa": "#000000",
-  "--awsui-style-color-disabled-6b9ypa": "#999999",
-  "--awsui-style-color-focus-6b9ypa": "#000000",
-  "--awsui-style-color-hover-6b9ypa": "#000000",
-  "--awsui-style-color-readonly-6b9ypa": "#000000",
-  "--awsui-style-placeholder-color-6b9ypa": "#999999",
-  "--awsui-style-placeholder-font-size-6b9ypa": "14px",
-  "--awsui-style-placeholder-font-style-6b9ypa": "italic",
-  "--awsui-style-placeholder-font-weight-6b9ypa": "400",
+  "--awsui-style-background-default-z17rmd": "#ffffff",
+  "--awsui-style-background-disabled-z17rmd": "#f0f0f0",
+  "--awsui-style-background-focus-z17rmd": "#ffffff",
+  "--awsui-style-background-hover-z17rmd": "#fafafa",
+  "--awsui-style-background-readonly-z17rmd": "#ffffff",
+  "--awsui-style-border-color-default-z17rmd": "#cccccc",
+  "--awsui-style-border-color-disabled-z17rmd": "#e0e0e0",
+  "--awsui-style-border-color-focus-z17rmd": "#0073bb",
+  "--awsui-style-border-color-hover-z17rmd": "#999999",
+  "--awsui-style-border-color-readonly-z17rmd": "#e0e0e0",
+  "--awsui-style-box-shadow-default-z17rmd": "none",
+  "--awsui-style-box-shadow-disabled-z17rmd": "none",
+  "--awsui-style-box-shadow-focus-z17rmd": "0 0 0 2px #0073bb",
+  "--awsui-style-box-shadow-hover-z17rmd": "0 1px 2px rgba(0,0,0,0.1)",
+  "--awsui-style-box-shadow-readonly-z17rmd": "none",
+  "--awsui-style-color-default-z17rmd": "#000000",
+  "--awsui-style-color-disabled-z17rmd": "#999999",
+  "--awsui-style-color-focus-z17rmd": "#000000",
+  "--awsui-style-color-hover-z17rmd": "#000000",
+  "--awsui-style-color-readonly-z17rmd": "#000000",
+  "--awsui-style-placeholder-color-z17rmd": "#999999",
+  "--awsui-style-placeholder-font-size-z17rmd": "14px",
+  "--awsui-style-placeholder-font-style-z17rmd": "italic",
+  "--awsui-style-placeholder-font-weight-z17rmd": "400",
   "borderRadius": "4px",
   "borderWidth": "1px",
   "fontSize": "14px",
diff --git a/src/token/__tests__/__snapshots__/styles.test.tsx.snap b/src/token/__tests__/__snapshots__/styles.test.tsx.snap
index 6e76a3e401..00a21508b1 100644
--- a/src/token/__tests__/__snapshots__/styles.test.tsx.snap
+++ b/src/token/__tests__/__snapshots__/styles.test.tsx.snap
@@ -2,19 +2,19 @@
 
 exports[`getTokenRootStyles handles all possible style configurations 1`] = `
 {
-  "--awsui-style-focus-ring-border-color-6b9ypa": "#6366f1",
-  "--awsui-style-focus-ring-border-radius-6b9ypa": "12px",
-  "--awsui-style-focus-ring-border-width-6b9ypa": "2px",
-  "--awsui-token-style-background-default-6b9ypa": "#eef2ff",
-  "--awsui-token-style-background-disabled-6b9ypa": "#f1f5f9",
-  "--awsui-token-style-background-read-only-6b9ypa": "#f8fafc",
-  "--awsui-token-style-border-color-default-6b9ypa": "#c7d2fe",
-  "--awsui-token-style-border-color-disabled-6b9ypa": "#e2e8f0",
-  "--awsui-token-style-border-color-read-only-6b9ypa": "#cbd5e1",
-  "--awsui-token-style-dismiss-color-default-6b9ypa": "#6366f1",
-  "--awsui-token-style-dismiss-color-disabled-6b9ypa": "#cbd5e1",
-  "--awsui-token-style-dismiss-color-hover-6b9ypa": "#4338ca",
-  "--awsui-token-style-dismiss-color-read-only-6b9ypa": "#94a3b8",
+  "--awsui-style-focus-ring-border-color-z17rmd": "#6366f1",
+  "--awsui-style-focus-ring-border-radius-z17rmd": "12px",
+  "--awsui-style-focus-ring-border-width-z17rmd": "2px",
+  "--awsui-token-style-background-default-z17rmd": "#eef2ff",
+  "--awsui-token-style-background-disabled-z17rmd": "#f1f5f9",
+  "--awsui-token-style-background-read-only-z17rmd": "#f8fafc",
+  "--awsui-token-style-border-color-default-z17rmd": "#c7d2fe",
+  "--awsui-token-style-border-color-disabled-z17rmd": "#e2e8f0",
+  "--awsui-token-style-border-color-read-only-z17rmd": "#cbd5e1",
+  "--awsui-token-style-dismiss-color-default-z17rmd": "#6366f1",
+  "--awsui-token-style-dismiss-color-disabled-z17rmd": "#cbd5e1",
+  "--awsui-token-style-dismiss-color-hover-z17rmd": "#4338ca",
+  "--awsui-token-style-dismiss-color-read-only-z17rmd": "#94a3b8",
   "borderRadius": "24px",
   "borderWidth": "2px",
   "paddingBlock": "4px",