diff --git a/pages/action-card/style-v2.page.tsx b/pages/action-card/style-v2.page.tsx
new file mode 100644
index 0000000000..3db47bb659
--- /dev/null
+++ b/pages/action-card/style-v2.page.tsx
@@ -0,0 +1,39 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { useState } from 'react';
+
+import { ActionCard, Checkbox, ColumnLayout, Icon, IconProps } from '~components';
+
+import { SimplePage } from '../app/templates';
+
+import styles from './style-v2.scss';
+
+export default function ActionCardStyleV2Page() {
+  const [disabled, setDisabled] = useState(false);
+  const props = (header: string, description: string, iconName: IconProps.Name, className: string) => ({
+    header,
+    description,
+    disabled,
+    icon: <Icon name={iconName} />,
+    classNames: className ? { root: className } : undefined,
+  });
+  return (
+    <SimplePage
+      title="ActionCard with Style API v2"
+      screenshotArea={{}}
+      settings={
+        <Checkbox checked={disabled} onChange={({ detail }) => setDisabled(detail.checked)}>
+          Disable cards
+        </Checkbox>
+      }
+    >
+      <ColumnLayout columns={2}>
+        <ActionCard {...props('Settings', 'Configure preferences', 'settings', '')} />
+        <ActionCard {...props('Run Tests', 'Execute test suite', 'status-positive', styles['card-accent'])} />
+        <ActionCard {...props('Deploy Service', 'Push changes to production', 'upload', styles['card-success'])} />
+        <ActionCard {...props('Review Logs', 'Inspect application logs', 'status-warning', styles['card-warning'])} />
+      </ColumnLayout>
+    </SimplePage>
+  );
+}
diff --git a/pages/action-card/style-v2.scss b/pages/action-card/style-v2.scss
new file mode 100644
index 0000000000..cc979b5774
--- /dev/null
+++ b/pages/action-card/style-v2.scss
@@ -0,0 +1,44 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../app/themes/style-v2-palette' as palette;
+
+@mixin card-theme($border, $border-hover, $bg, $bg-hover, $icon-color: null) {
+  --awsui-style-action-card-background: #{$bg};
+  --awsui-style-action-card-background-hover: #{$bg-hover};
+  --awsui-style-action-card-border-color: #{$border};
+  --awsui-style-action-card-border-color-hover: #{$border-hover};
+  --awsui-style-action-card-border-radius: 12px;
+  --awsui-style-action-card-icon-color-disabled: #{palette.$text-disabled};
+  --awsui-style-transition-duration: 200ms;
+
+  @if $icon-color {
+    --awsui-style-action-card-icon-color: #{$icon-color};
+  }
+}
+
+.card-accent {
+  @include card-theme(palette.$border-accent, palette.$accent-hover, palette.$surface, palette.$surface-alt);
+}
+
+.card-success {
+  @include card-theme(
+    palette.$success,
+    palette.$success,
+    palette.$success-surface,
+    palette.$surface-alt,
+    palette.$success
+  );
+}
+
+.card-warning {
+  @include card-theme(
+    palette.$warning,
+    palette.$warning,
+    palette.$warning-surface,
+    palette.$surface-alt,
+    palette.$warning
+  );
+}
diff --git a/pages/alert/style-v2.page.tsx b/pages/alert/style-v2.page.tsx
new file mode 100644
index 0000000000..929f02fa18
--- /dev/null
+++ b/pages/alert/style-v2.page.tsx
@@ -0,0 +1,82 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import { Alert, AlertProps, Button, Checkbox, SpaceBetween } from '~components';
+
+import { SimplePage } from '../app/templates';
+
+import styles from './style-v2.scss';
+
+export default function AlertStyleV2Page() {
+  const [useCustom, setUseCustom] = useState(true);
+  const [dismissible, setDismissible] = useState(true);
+  const props = (
+    type: AlertProps.Type,
+    header: string,
+    children: string,
+    className: string,
+    dismissClassName: string
+  ) => ({
+    type,
+    header,
+    children,
+    dismissible,
+    classNames: useCustom ? { root: className, dismissButton: dismissClassName } : undefined,
+  });
+  return (
+    <SimplePage
+      title="Alert with Style API v2"
+      screenshotArea={{}}
+      i18n={{}}
+      settings={
+        <SpaceBetween size="xs">
+          <Checkbox checked={useCustom} onChange={({ detail }) => setUseCustom(detail.checked)}>
+            Custom styling
+          </Checkbox>
+          <Checkbox checked={dismissible} onChange={({ detail }) => setDismissible(detail.checked)}>
+            Dismissible
+          </Checkbox>
+        </SpaceBetween>
+      }
+    >
+      <Alert
+        {...props(
+          'info',
+          'Information',
+          'Your instance is running in the us-east-1 region.',
+          styles['custom-alert'],
+          styles['custom-dismiss']
+        )}
+      />
+      <Alert
+        {...props(
+          'success',
+          'Deployment successful',
+          'All 3 stacks have been deployed without errors.',
+          styles['custom-alert-success'],
+          styles['custom-dismiss-success']
+        )}
+      />
+      <Alert
+        {...props(
+          'warning',
+          'Approaching limit',
+          'You have used 85% of your allocated storage.',
+          styles['custom-alert-warning'],
+          styles['custom-dismiss-warning']
+        )}
+      />
+      <Alert
+        {...props(
+          'error',
+          'Connection failed',
+          'Unable to reach the database endpoint. Check your security group rules.',
+          styles['custom-alert-error'],
+          styles['custom-dismiss-error']
+        )}
+        action={<Button>Retry</Button>}
+      />
+    </SimplePage>
+  );
+}
diff --git a/pages/alert/style-v2.scss b/pages/alert/style-v2.scss
new file mode 100644
index 0000000000..024723d06b
--- /dev/null
+++ b/pages/alert/style-v2.scss
@@ -0,0 +1,53 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../app/themes/style-v2-palette' as palette;
+
+@mixin alert-theme($bg, $border, $icon) {
+  --awsui-style-alert-background: #{$bg};
+  --awsui-style-alert-border-color: #{$border};
+  --awsui-style-alert-border-width: 4px;
+  --awsui-style-alert-border-radius: 8px;
+  --awsui-style-alert-color: #{palette.$text};
+  --awsui-style-alert-icon-color: #{$icon};
+}
+
+@mixin dismiss-theme($color) {
+  --awsui-style-button-color-default: #{$color};
+  --awsui-style-button-color-hover: #{$color};
+  --awsui-style-button-color-active: #{palette.$accent-active};
+}
+
+.custom-alert {
+  @include alert-theme(palette.$info-surface, palette.$info, palette.$info);
+}
+
+.custom-dismiss {
+  @include dismiss-theme(palette.$info);
+}
+
+.custom-alert-success {
+  @include alert-theme(palette.$success-surface, palette.$success, palette.$success);
+}
+
+.custom-dismiss-success {
+  @include dismiss-theme(palette.$success);
+}
+
+.custom-alert-warning {
+  @include alert-theme(palette.$warning-surface, palette.$warning, palette.$warning);
+}
+
+.custom-dismiss-warning {
+  @include dismiss-theme(palette.$warning);
+}
+
+.custom-alert-error {
+  @include alert-theme(palette.$error-surface, palette.$error, palette.$error);
+}
+
+.custom-dismiss-error {
+  @include dismiss-theme(palette.$error);
+}
diff --git a/pages/app/themes/style-v2-palette.scss b/pages/app/themes/style-v2-palette.scss
new file mode 100644
index 0000000000..6296eaaeb3
--- /dev/null
+++ b/pages/app/themes/style-v2-palette.scss
@@ -0,0 +1,56 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+// Shared color palette for style API v2 demos.
+// Uses light-dark() for accessible contrast in both color schemes.
+// Light mode: dark text on light backgrounds. Dark mode: light text on dark backgrounds.
+
+// Brand accent
+$accent: light-dark(hsl(330, 75%, 42%), hsl(330, 75%, 68%));
+$accent-hover: light-dark(hsl(330, 75%, 34%), hsl(330, 75%, 78%));
+$accent-active: light-dark(hsl(330, 75%, 26%), hsl(330, 75%, 88%));
+
+// Surfaces
+$surface: light-dark(hsl(220, 30%, 97%), hsl(220, 30%, 15%));
+$surface-alt: light-dark(hsl(220, 30%, 93%), hsl(220, 30%, 20%));
+
+// Text
+$text: light-dark(hsl(220, 30%, 15%), hsl(220, 30%, 95%));
+$text-muted: light-dark(hsl(220, 10%, 45%), hsl(220, 10%, 65%));
+$text-disabled: light-dark(hsl(220, 5%, 65%), hsl(220, 5%, 40%));
+$text-on-accent: light-dark(hsl(0, 0%, 100%), hsl(220, 30%, 10%));
+
+// Borders
+$border: light-dark(hsl(220, 20%, 80%), hsl(220, 20%, 35%));
+$border-accent: light-dark(hsl(330, 75%, 42%), hsl(330, 75%, 68%));
+$border-disabled: light-dark(hsl(220, 5%, 85%), hsl(220, 5%, 30%));
+
+// Status colors
+$success: light-dark(hsl(145, 60%, 40%), hsl(145, 60%, 65%));
+$success-surface: light-dark(hsl(145, 40%, 95%), hsl(145, 40%, 15%));
+$error: light-dark(hsl(0, 65%, 50%), hsl(0, 65%, 70%));
+$error-surface: light-dark(hsl(0, 50%, 95%), hsl(0, 50%, 15%));
+$warning: light-dark(hsl(35, 80%, 45%), hsl(35, 80%, 65%));
+$warning-surface: light-dark(hsl(35, 60%, 95%), hsl(35, 60%, 15%));
+$info: light-dark(hsl(200, 70%, 45%), hsl(200, 70%, 65%));
+$info-surface: light-dark(hsl(200, 50%, 95%), hsl(200, 50%, 15%));
+
+// Controls
+$control-bg: light-dark(hsl(0, 0%, 100%), hsl(220, 20%, 20%));
+$control-bg-checked: light-dark(hsl(330, 75%, 42%), hsl(330, 75%, 68%));
+$control-bg-disabled: light-dark(hsl(220, 5%, 92%), hsl(220, 5%, 25%));
+$control-border: light-dark(hsl(220, 20%, 70%), hsl(220, 20%, 45%));
+$control-border-checked: light-dark(hsl(330, 75%, 42%), hsl(330, 75%, 68%));
+$control-foreground: light-dark(hsl(0, 0%, 100%), hsl(220, 30%, 10%));
+$control-foreground-disabled: light-dark(hsl(220, 5%, 70%), hsl(220, 5%, 40%));
+
+// Focus ring
+$focus-ring: light-dark(hsl(330, 90%, 50%), hsl(330, 90%, 70%));
+$focus-ring-radius: 4px;
+$focus-ring-width: 2px;
+
+// Transition
+$transition-duration: 150ms;
+$transition-easing: ease-in-out;
diff --git a/pages/autosuggest/style-v2.page.tsx b/pages/autosuggest/style-v2.page.tsx
new file mode 100644
index 0000000000..9695720051
--- /dev/null
+++ b/pages/autosuggest/style-v2.page.tsx
@@ -0,0 +1,72 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { useState } from 'react';
+
+import { Autosuggest, Checkbox, SpaceBetween } from '~components';
+
+import { SimplePage } from '../app/templates';
+
+import styles from './style-v2.scss';
+
+export default function StyleV2AutosuggestPage() {
+  const [value, setValue] = useState('');
+  const [styled, setStyled] = useState(true);
+  const [disabled, setDisabled] = useState(false);
+  const [readOnly, setReadOnly] = useState(false);
+  const [invalid, setInvalid] = useState(false);
+
+  const computeValues = ['EC2', 'Lambda', 'ECS'];
+
+  const groupedOptions = [
+    {
+      label: 'Compute',
+      options: [{ value: 'EC2' }, { value: 'Lambda' }, { value: 'ECS' }],
+    },
+    {
+      label: 'Storage',
+      options: [{ value: 'S3' }, { value: 'EBS' }, { value: 'EFS', disabled: true }],
+    },
+  ];
+
+  return (
+    <SimplePage
+      title="Autosuggest with Style API v2"
+      screenshotArea={{}}
+      settings={
+        <SpaceBetween size="xs">
+          <Checkbox checked={styled} onChange={({ detail }) => setStyled(detail.checked)}>
+            styled
+          </Checkbox>
+          <Checkbox checked={disabled} onChange={({ detail }) => setDisabled(detail.checked)}>
+            disabled
+          </Checkbox>
+          <Checkbox checked={readOnly} onChange={({ detail }) => setReadOnly(detail.checked)}>
+            readOnly
+          </Checkbox>
+          <Checkbox checked={invalid} onChange={({ detail }) => setInvalid(detail.checked)}>
+            invalid
+          </Checkbox>
+        </SpaceBetween>
+      }
+    >
+      <Autosuggest
+        value={value}
+        onChange={({ detail }) => setValue(detail.value)}
+        placeholder="Search services..."
+        enteredTextLabel={v => `Use: ${v}`}
+        options={groupedOptions}
+        disabled={disabled}
+        readOnly={readOnly}
+        invalid={invalid}
+        classNames={{
+          root: styled ? (invalid ? styles['styled-autosuggest-invalid'] : styles['styled-autosuggest']) : undefined,
+          options: styled
+            ? ({ option }) =>
+                computeValues.includes(option.value!) ? styles['option-compute'] : styles['option-storage']
+            : undefined,
+        }}
+      />
+    </SimplePage>
+  );
+}
diff --git a/pages/autosuggest/style-v2.scss b/pages/autosuggest/style-v2.scss
new file mode 100644
index 0000000000..e65497bcf8
--- /dev/null
+++ b/pages/autosuggest/style-v2.scss
@@ -0,0 +1,62 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../app/themes/style-v2-palette' as palette;
+
+/* stylelint-disable custom-property-pattern */
+
+.styled-autosuggest {
+  --awsui-style-input-background: #{palette.$surface-alt};
+  --awsui-style-input-background-focus: #{palette.$control-bg};
+  --awsui-style-input-border-color: #{palette.$accent};
+  --awsui-style-input-border-color-focus: #{palette.$accent-hover};
+  --awsui-style-input-color: #{palette.$text};
+  --awsui-style-input-placeholder-color: #{palette.$text-muted};
+  --awsui-style-input-border-radius: 12px;
+  --awsui-style-input-border-width: 2px;
+  --awsui-style-transition-duration: 200ms;
+  --awsui-style-dropdown-border-color: #{palette.$accent};
+  --awsui-style-dropdown-border-radius: 12px;
+  --awsui-style-dropdown-border-width: 2px;
+  --awsui-style-dropdown-item-background-hover: #{palette.$surface-alt};
+  --awsui-style-dropdown-item-background-selected: #{palette.$surface-alt};
+
+  &:hover {
+    --awsui-style-input-border-color: #{palette.$accent-hover};
+  }
+}
+
+.styled-autosuggest-invalid {
+  --awsui-style-input-background: #{palette.$error-surface};
+  --awsui-style-input-border-color: #{palette.$error};
+  --awsui-style-input-border-color-focus: #{palette.$error};
+  --awsui-style-input-color: #{palette.$text};
+  --awsui-style-input-border-radius: 12px;
+  --awsui-style-input-border-width: 2px;
+  --awsui-style-dropdown-border-color: #{palette.$error};
+  --awsui-style-dropdown-border-radius: 12px;
+  --awsui-style-dropdown-item-background-hover: #{palette.$error-surface};
+  --awsui-style-dropdown-item-background-selected: #{palette.$error-surface};
+}
+
+.option-compute {
+  --awsui-style-option-color: #{palette.$accent};
+
+  &[data-highlighted] {
+    --awsui-style-dropdown-item-background-hover: #{palette.$accent};
+    --awsui-style-dropdown-item-color-highlighted: #{palette.$text-on-accent};
+    --awsui-style-option-color: #{palette.$text-on-accent};
+  }
+}
+
+.option-storage {
+  --awsui-style-option-color: #{palette.$success};
+
+  &[data-highlighted] {
+    --awsui-style-dropdown-item-background-hover: #{palette.$success};
+    --awsui-style-dropdown-item-color-highlighted: #{palette.$text-on-accent};
+    --awsui-style-option-color: #{palette.$text-on-accent};
+  }
+}
diff --git a/pages/badge/style-v2.page.tsx b/pages/badge/style-v2.page.tsx
new file mode 100644
index 0000000000..ce463eb5ea
--- /dev/null
+++ b/pages/badge/style-v2.page.tsx
@@ -0,0 +1,27 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import { Badge, SpaceBetween } from '~components';
+
+import { SimplePage } from '../app/templates';
+
+import styles from './style-v2.scss';
+
+export default function StyleV2BadgePage() {
+  return (
+    <SimplePage title="Badge with Style API v2" screenshotArea={{}}>
+      <SpaceBetween size="m" direction="horizontal">
+        <Badge color="blue" classNames={{ root: styles['badge-pill'] }}>
+          Pill shape
+        </Badge>
+        <Badge color="red" classNames={{ root: styles['badge-square'] }}>
+          Error
+        </Badge>
+        <Badge color="blue" classNames={{ root: styles['badge-outline'] }}>
+          Outline
+        </Badge>
+      </SpaceBetween>
+    </SimplePage>
+  );
+}
diff --git a/pages/badge/style-v2.scss b/pages/badge/style-v2.scss
new file mode 100644
index 0000000000..59905ba81d
--- /dev/null
+++ b/pages/badge/style-v2.scss
@@ -0,0 +1,35 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../app/themes/style-v2-palette' as palette;
+
+.badge-pill {
+  --awsui-style-badge-background: #{palette.$accent};
+  --awsui-style-badge-color: #{palette.$text-on-accent};
+  --awsui-style-badge-border-color: transparent;
+  --awsui-style-badge-border-radius: 99px;
+  --awsui-style-badge-padding-block: 4px;
+  --awsui-style-badge-padding-inline: 12px;
+}
+
+.badge-square {
+  --awsui-style-badge-background: #{palette.$error-surface};
+  --awsui-style-badge-color: #{palette.$error};
+  --awsui-style-badge-border-color: #{palette.$error};
+  --awsui-style-badge-border-radius: 2px;
+  --awsui-style-badge-border-width: 2px;
+  --awsui-style-badge-padding-block: 2px;
+  --awsui-style-badge-padding-inline: 6px;
+}
+
+.badge-outline {
+  --awsui-style-badge-background: transparent;
+  --awsui-style-badge-color: #{palette.$accent};
+  --awsui-style-badge-border-color: #{palette.$accent};
+  --awsui-style-badge-border-radius: 4px;
+  --awsui-style-badge-border-width: 2px;
+  --awsui-style-badge-padding-block: 3px;
+  --awsui-style-badge-padding-inline: 10px;
+}
diff --git a/pages/button-group/style-v2.page.tsx b/pages/button-group/style-v2.page.tsx
new file mode 100644
index 0000000000..bdfefffbe0
--- /dev/null
+++ b/pages/button-group/style-v2.page.tsx
@@ -0,0 +1,81 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { useState } from 'react';
+
+import { ButtonGroup, ButtonGroupProps, Checkbox } from '~components';
+
+import { SimplePage } from '../app/templates';
+
+import styles from './style-v2.scss';
+
+export default function ButtonGroupStyleV2Page() {
+  const [isFavorite, setFavorite] = useState(false);
+  const [disabled, setDisabled] = useState(false);
+
+  const items: ButtonGroupProps.ItemOrGroup[] = [
+    {
+      type: 'group',
+      text: 'Actions',
+      items: [
+        { type: 'icon-button', id: 'copy', iconName: 'copy', text: 'Copy', disabled },
+        { type: 'icon-button', id: 'edit', iconName: 'edit', text: 'Edit', disabled },
+        { type: 'icon-button', id: 'delete', iconName: 'remove', text: 'Delete', disabled },
+      ],
+    },
+    {
+      type: 'group',
+      text: 'Toggle',
+      items: [
+        {
+          type: 'icon-toggle-button',
+          id: 'favorite',
+          iconName: 'star',
+          pressedIconName: 'star-filled',
+          text: isFavorite ? 'Unfavorite' : 'Favorite',
+          pressed: isFavorite,
+        },
+      ],
+    },
+    {
+      type: 'menu-dropdown',
+      id: 'more',
+      text: 'More',
+      items: [
+        { id: 'export', text: 'Export' },
+        { id: 'share', text: 'Share' },
+      ],
+    },
+  ];
+
+  const handleClick = ({ detail }: { detail: { id: string; pressed?: boolean } }) => {
+    if (detail.id === 'favorite') {
+      setFavorite(detail.pressed ?? !isFavorite);
+    }
+  };
+
+  return (
+    <SimplePage
+      title="ButtonGroup with Style API v2"
+      screenshotArea={{}}
+      settings={
+        <Checkbox checked={disabled} onChange={({ detail }) => setDisabled(detail.checked)}>
+          Disable actions
+        </Checkbox>
+      }
+    >
+      <ButtonGroup
+        classNames={{ root: styles['button-group-minimal'] }}
+        variant="icon"
+        items={items}
+        onItemClick={handleClick}
+      />
+      <ButtonGroup
+        classNames={{ root: styles['button-group-card'] }}
+        variant="icon"
+        items={items}
+        onItemClick={handleClick}
+      />
+    </SimplePage>
+  );
+}
diff --git a/pages/button-group/style-v2.scss b/pages/button-group/style-v2.scss
new file mode 100644
index 0000000000..15c20096bf
--- /dev/null
+++ b/pages/button-group/style-v2.scss
@@ -0,0 +1,26 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../app/themes/style-v2-palette' as palette;
+
+.button-group-card {
+  --awsui-style-button-group-background: #{palette.$surface};
+  --awsui-style-button-group-border-color: #{palette.$border};
+  --awsui-style-button-group-border-radius: 12px;
+  --awsui-style-button-group-padding-block: 8px;
+  --awsui-style-button-group-padding-inline: 12px;
+  --awsui-style-button-group-inline-size: fit-content;
+  --awsui-style-transition-duration: 200ms;
+}
+
+.button-group-minimal {
+  --awsui-style-button-group-background: transparent;
+  --awsui-style-button-group-border-color: transparent;
+  --awsui-style-button-group-border-radius: 0;
+  --awsui-style-button-group-inline-size: fit-content;
+  --awsui-style-button-color-default: #{palette.$accent};
+  --awsui-style-button-color-hover: #{palette.$accent-hover};
+  --awsui-style-transition-duration: 200ms;
+}
diff --git a/pages/button/style-v2.page.tsx b/pages/button/style-v2.page.tsx
new file mode 100644
index 0000000000..d7baec72e5
--- /dev/null
+++ b/pages/button/style-v2.page.tsx
@@ -0,0 +1,84 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { useState } from 'react';
+
+import { Button, Checkbox, SpaceBetween } from '~components';
+
+import { SimplePage } from '../app/templates';
+
+import styles from './style-v2.scss';
+
+export default function StyleV2ButtonPage() {
+  const [disabled, setDisabled] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  return (
+    <SimplePage
+      title="Button with Style API v2"
+      screenshotArea={{}}
+      settings={
+        <SpaceBetween size="xs">
+          <Checkbox checked={disabled} onChange={({ detail }) => setDisabled(detail.checked)}>
+            disabled
+          </Checkbox>
+          <Checkbox checked={loading} onChange={({ detail }) => setLoading(detail.checked)}>
+            loading
+          </Checkbox>
+        </SpaceBetween>
+      }
+    >
+      <SpaceBetween size="m" direction="horizontal">
+        <Button
+          variant="primary"
+          disabled={disabled}
+          loading={loading}
+          iconName="remove"
+          classNames={{ root: styles['button-danger'] }}
+        >
+          Delete
+        </Button>
+        <Button variant="primary" disabled={disabled} loading={loading} classNames={{ root: styles['button-danger'] }}>
+          Terminate instances
+        </Button>
+      </SpaceBetween>
+      <SpaceBetween size="m" direction="horizontal">
+        <Button
+          variant="icon"
+          iconName="close"
+          ariaLabel="Close"
+          disabled={disabled}
+          classNames={{ root: styles['button-icon-circle'] }}
+        />
+        <Button
+          variant="icon"
+          iconName="copy"
+          ariaLabel="Copy"
+          disabled={disabled}
+          classNames={{ root: styles['button-icon-circle'] }}
+        />
+        <Button
+          variant="icon"
+          iconName="settings"
+          ariaLabel="Settings"
+          disabled={disabled}
+          classNames={{ root: styles['button-icon-circle'] }}
+        />
+      </SpaceBetween>
+      <SpaceBetween size="m" direction="horizontal">
+        <Button variant="link" disabled={disabled} classNames={{ root: styles['button-link-custom'] }}>
+          Learn more
+        </Button>
+        <Button
+          variant="link"
+          iconName="external"
+          iconAlign="right"
+          disabled={disabled}
+          classNames={{ root: styles['button-link-custom'] }}
+        >
+          Documentation
+        </Button>
+      </SpaceBetween>
+    </SimplePage>
+  );
+}
diff --git a/pages/button/style-v2.scss b/pages/button/style-v2.scss
new file mode 100644
index 0000000000..d660c10fb4
--- /dev/null
+++ b/pages/button/style-v2.scss
@@ -0,0 +1,44 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../app/themes/style-v2-palette' as palette;
+
+/* stylelint-disable custom-property-pattern */
+
+.button-danger {
+  --awsui-style-button-background-default: #{palette.$error};
+  --awsui-style-button-background-hover: hsl(0, 65%, 40%);
+  --awsui-style-button-background-active: hsl(0, 65%, 30%);
+  --awsui-style-button-color-default: #{palette.$text-on-accent};
+  --awsui-style-button-color-hover: #{palette.$text-on-accent};
+  --awsui-style-button-color-active: #{palette.$text-on-accent};
+  --awsui-style-button-border-color-default: #{palette.$error};
+  --awsui-style-button-border-color-hover: hsl(0, 65%, 40%);
+  --awsui-style-button-border-color-active: hsl(0, 65%, 30%);
+  --awsui-style-button-border-radius: 8px;
+}
+
+.button-icon-circle {
+  --awsui-style-button-background-default: #{palette.$surface-alt};
+  --awsui-style-button-background-hover: #{palette.$accent};
+  --awsui-style-button-background-active: #{palette.$accent-active};
+  --awsui-style-button-color-default: #{palette.$text-muted};
+  --awsui-style-button-color-hover: #{palette.$text-on-accent};
+  --awsui-style-button-color-active: #{palette.$text-on-accent};
+  --awsui-style-button-border-color-default: #{palette.$border};
+  --awsui-style-button-border-color-hover: #{palette.$accent};
+  --awsui-style-button-border-color-active: #{palette.$accent-active};
+  --awsui-style-button-border-radius: 50%;
+  --awsui-style-button-icon-padding: 6px;
+}
+
+.button-link-custom {
+  --awsui-style-button-color-default: #{palette.$success};
+  --awsui-style-button-color-hover: hsl(145, 60%, 30%);
+  --awsui-style-button-color-active: hsl(145, 60%, 20%);
+  --awsui-style-button-border-color-default: transparent;
+  --awsui-style-button-border-color-hover: transparent;
+  --awsui-style-button-font-family: 'Arial', sans-serif;
+}
diff --git a/pages/checkbox/style-v2.page.tsx b/pages/checkbox/style-v2.page.tsx
new file mode 100644
index 0000000000..2fe691905d
--- /dev/null
+++ b/pages/checkbox/style-v2.page.tsx
@@ -0,0 +1,112 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+import clsx from 'clsx';
+
+import { Checkbox, Container, Multiselect, MultiselectProps, SpaceBetween, Table } from '~components';
+
+import { SimplePage } from '../app/templates';
+import * as tableProps from '../table/shared-configs';
+
+import styles from './style-v2.scss';
+
+export default function CheckboxStyleV2() {
+  const [disabled, setDisabled] = useState(false);
+  const [readOnly, setReadOnly] = useState(false);
+  const [checked1, setChecked1] = useState(false);
+  const [checked2, setChecked2] = useState(false);
+  const shared = { disabled, readOnly, classNames: { root: styles['styled-checkbox'] } };
+
+  const multiselectOptions: MultiselectProps.Options = [
+    { value: '1', label: 'First option', disabled },
+    { value: '2', label: 'Second option', disabled },
+    { value: '3', label: 'Third option', disabled },
+  ];
+
+  const tableItems = tableProps.createSimpleItems(3);
+
+  return (
+    <SimplePage
+      title="Checkbox with Style API v2"
+      screenshotArea={{}}
+      settings={
+        <SpaceBetween size="xs">
+          <Checkbox checked={disabled} onChange={({ detail }) => setDisabled(detail.checked)}>
+            disabled
+          </Checkbox>
+          <Checkbox checked={readOnly} onChange={({ detail }) => setReadOnly(detail.checked)}>
+            readonly
+          </Checkbox>
+        </SpaceBetween>
+      }
+    >
+      <div>
+        <Container header="Standalone checkboxes" variant="stacked">
+          <Checkbox {...shared} checked={checked1} onChange={({ detail }) => setChecked1(detail.checked)}>
+            Checkbox 1
+          </Checkbox>
+          <Checkbox {...shared} checked={checked2} onChange={({ detail }) => setChecked2(detail.checked)}>
+            Checkbox 2
+          </Checkbox>
+          <Checkbox
+            {...shared}
+            indeterminate={(checked1 || checked2) && !(checked1 && checked2)}
+            checked={checked1 && checked2}
+            onChange={({ detail }) => {
+              setChecked1(detail.checked);
+              setChecked2(detail.checked);
+            }}
+          >
+            Checkbox 1+2
+          </Checkbox>
+        </Container>
+        <Container header="Checkboxes in multiselect" variant="stacked">
+          <Multiselect
+            placeholder="Choose option"
+            selectedOptions={[multiselectOptions[1]]}
+            options={multiselectOptions}
+            classNames={{
+              options: ({ option }) => {
+                switch (option.value) {
+                  case '1':
+                    return styles['styled-checkbox-one'];
+                  case '2':
+                    return styles['styled-checkbox-two'];
+                  case '3':
+                    return styles['styled-checkbox-three'];
+                  default:
+                    return undefined;
+                }
+              },
+            }}
+          />
+        </Container>
+        <Container header="Checkboxes in table" variant="stacked">
+          <Table
+            columnDefinitions={tableProps.simpleColumns}
+            items={tableItems}
+            selectionType="multi"
+            selectedItems={[tableItems[1]]}
+            ariaLabels={tableProps.ariaLabels}
+            enableKeyboardNavigation={true}
+            isItemDisabled={() => disabled}
+            classNames={{
+              selection: ({ item }) => {
+                switch (item?.text) {
+                  case 'One':
+                    return clsx(styles['styled-checkbox'], styles['styled-checkbox-one']);
+                  case 'Two':
+                    return clsx(styles['styled-checkbox'], styles['styled-checkbox-two']);
+                  case 'Three':
+                    return clsx(styles['styled-checkbox'], styles['styled-checkbox-three']);
+                  default:
+                    return styles['styled-checkbox'];
+                }
+              },
+            }}
+          />
+        </Container>
+      </div>
+    </SimplePage>
+  );
+}
diff --git a/pages/checkbox/style-v2.scss b/pages/checkbox/style-v2.scss
new file mode 100644
index 0000000000..a0d69b9dea
--- /dev/null
+++ b/pages/checkbox/style-v2.scss
@@ -0,0 +1,49 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@mixin checkbox-theme($accent, $accent-hover, $background) {
+  --awsui-style-color-background-control: #{$background};
+  --awsui-style-color-background-control-checked: #{$accent};
+  --awsui-style-color-border-control: #{$accent};
+  --awsui-style-color-text-label: #{$accent};
+
+  &:hover,
+  &[data-highlighted] {
+    --awsui-style-color-border-control: #{$accent-hover};
+    --awsui-style-color-background-control-checked: #{$accent-hover};
+    --awsui-style-color-text-label: #{$accent-hover};
+  }
+}
+
+.styled-checkbox {
+  @include checkbox-theme($accent: #ff5544, $accent-hover: #cc2200, $background: #ffee88);
+  --awsui-style-color-background-control-disabled: #cccccc;
+  --awsui-style-color-border-control-disabled: #cccccc;
+  --awsui-style-border-width-field: 2px;
+  --awsui-style-color-foreground-control: #ffffff;
+  --awsui-style-color-foreground-control-disabled: #999999;
+  --awsui-style-color-foreground-control-readonly: #777799;
+  --awsui-style-stroke-width-control: 2;
+  --awsui-style-color-text-label-disabled: #999999;
+  --awsui-style-color-text-label-readonly: #777799;
+  --awsui-style-space-control-label: 12px;
+  --awsui-style-focus-ring-border-color: #ff5544;
+  --awsui-style-focus-ring-border-radius: 4px;
+  --awsui-style-focus-ring-border-width: 3px;
+  --awsui-style-transition-duration: 200ms;
+  --awsui-style-transition-easing: ease-in-out;
+}
+
+.styled-checkbox-one {
+  @include checkbox-theme($accent: #33aa55, $accent-hover: #227733, $background: #ccffdd);
+}
+
+.styled-checkbox-two {
+  @include checkbox-theme($accent: #4477dd, $accent-hover: #2255aa, $background: #ccdeff);
+}
+
+.styled-checkbox-three {
+  @include checkbox-theme($accent: #9944cc, $accent-hover: #6b2299, $background: #eeccff);
+}
diff --git a/pages/container/style-v2.page.tsx b/pages/container/style-v2.page.tsx
new file mode 100644
index 0000000000..345ed70fe3
--- /dev/null
+++ b/pages/container/style-v2.page.tsx
@@ -0,0 +1,32 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+
+import { Box, Container, Header } from '~components';
+
+import { SimplePage } from '../app/templates';
+
+import styles from './style-v2.scss';
+
+export default function StyleV2ContainerPage() {
+  return (
+    <SimplePage title="Container with Style API v2" screenshotArea={{}}>
+      <Container
+        classNames={{ root: styles['container-outer'] }}
+        header={<Header variant="h2">Outer container</Header>}
+        footer="Outer container footer"
+      >
+        <Box margin={{ bottom: 's' }}>
+          Content in the outer container with 16px rounded corners and blue header background.
+        </Box>
+        <Container
+          classNames={{ root: styles['container-inner'] }}
+          header={<Header variant="h3">Inner container</Header>}
+        >
+          Content in the inner container with 12px rounded corners and green header background.
+        </Container>
+      </Container>
+    </SimplePage>
+  );
+}
diff --git a/pages/container/style-v2.scss b/pages/container/style-v2.scss
new file mode 100644
index 0000000000..d30f7132cc
--- /dev/null
+++ b/pages/container/style-v2.scss
@@ -0,0 +1,20 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../app/themes/style-v2-palette' as palette;
+
+/* stylelint-disable custom-property-pattern */
+
+.container-outer {
+  --awsui-style-container-border-radius: 16px;
+  --awsui-style-container-header-background: #{palette.$info-surface};
+  --awsui-style-container-top-border-width: 0;
+}
+
+.container-inner {
+  --awsui-style-container-border-radius: 12px;
+  --awsui-style-container-header-background: #{palette.$success-surface};
+  --awsui-style-container-top-border-width: 0;
+}
diff --git a/pages/date-picker/style-v2.page.tsx b/pages/date-picker/style-v2.page.tsx
new file mode 100644
index 0000000000..436bf42ccd
--- /dev/null
+++ b/pages/date-picker/style-v2.page.tsx
@@ -0,0 +1,47 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { useState } from 'react';
+
+import { Checkbox, DatePicker, SpaceBetween } from '~components';
+
+import { SimplePage } from '../app/templates';
+
+import styles from './style-v2.scss';
+
+export default function DatePickerStyleV2Page() {
+  const [disabled, setDisabled] = useState(false);
+  const [readOnly, setReadOnly] = useState(false);
+  const [invalid, setInvalid] = useState(false);
+  const [value, setValue] = useState('2026-06-01');
+
+  return (
+    <SimplePage
+      title="DatePicker with Style API v2"
+      screenshotArea={{}}
+      settings={
+        <SpaceBetween size="xs">
+          <Checkbox checked={disabled} onChange={({ detail }) => setDisabled(detail.checked)}>
+            disabled
+          </Checkbox>
+          <Checkbox checked={readOnly} onChange={({ detail }) => setReadOnly(detail.checked)}>
+            readOnly
+          </Checkbox>
+          <Checkbox checked={invalid} onChange={({ detail }) => setInvalid(detail.checked)}>
+            invalid
+          </Checkbox>
+        </SpaceBetween>
+      }
+    >
+      <DatePicker
+        value={value}
+        onChange={({ detail }) => setValue(detail.value)}
+        placeholder="YYYY/MM/DD"
+        disabled={disabled}
+        readOnly={readOnly}
+        invalid={invalid}
+        classNames={{ root: styles['styled-date-picker'] }}
+      />
+    </SimplePage>
+  );
+}
diff --git a/pages/date-picker/style-v2.scss b/pages/date-picker/style-v2.scss
new file mode 100644
index 0000000000..44e781e57a
--- /dev/null
+++ b/pages/date-picker/style-v2.scss
@@ -0,0 +1,40 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../app/themes/style-v2-palette' as palette;
+
+$dp-accent: #{palette.$success};
+$dp-accent-hover: hsl(145, 60%, 30%);
+$dp-surface: #{palette.$success-surface};
+
+.styled-date-picker {
+  // Input
+  --awsui-style-input-background: #{$dp-surface};
+  --awsui-style-input-background-focus: #{$dp-surface};
+  --awsui-style-input-border-color: #{$dp-accent};
+  --awsui-style-input-border-color-focus: #{$dp-accent-hover};
+  --awsui-style-input-color: #{palette.$text};
+  --awsui-style-input-placeholder-color: #{$dp-accent};
+  --awsui-style-input-border-radius: 12px;
+  --awsui-style-input-border-width: 2px;
+
+  // Calendar icon button
+  --awsui-style-button-color-default: #{$dp-accent};
+  --awsui-style-button-color-hover: #{palette.$text-on-accent};
+  --awsui-style-button-background-hover: #{$dp-accent};
+  --awsui-style-button-background-active: #{$dp-accent-hover};
+  --awsui-style-button-border-color-default: #{$dp-accent};
+  --awsui-style-button-border-color-hover: #{$dp-accent-hover};
+  --awsui-style-button-border-color-active: #{$dp-accent-hover};
+  --awsui-style-button-border-radius: 50%;
+  --awsui-style-button-focus-ring-color: #{$dp-accent};
+
+  // Calendar dates
+  --awsui-style-calendar-selected-background: #{$dp-accent};
+  --awsui-style-calendar-selected-color: #{palette.$text-on-accent};
+  --awsui-style-calendar-hover-background: #{$dp-surface};
+  --awsui-style-calendar-hover-border-color: #{$dp-accent};
+  --awsui-style-calendar-current-background: #{$dp-surface};
+}
diff --git a/pages/drawer/style-v2.page.tsx b/pages/drawer/style-v2.page.tsx
new file mode 100644
index 0000000000..d1a9b19696
--- /dev/null
+++ b/pages/drawer/style-v2.page.tsx
@@ -0,0 +1,63 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import { Box, Button, Checkbox, Drawer, SpaceBetween } from '~components';
+
+import { SimplePage } from '../app/templates';
+
+import styles from './style-v2.scss';
+
+export default function DrawerStyleV2Page() {
+  const [showStyled, setShowStyled] = useState(true);
+  return (
+    <SimplePage
+      title="Drawer with Style API v2"
+      screenshotArea={{}}
+      settings={
+        <Checkbox checked={showStyled} onChange={({ detail }) => setShowStyled(detail.checked)}>
+          Custom styling
+        </Checkbox>
+      }
+    >
+      <div style={{ position: 'relative', height: 400 }}>
+        <Drawer
+          header="Resources"
+          position="absolute"
+          backdrop={true}
+          closeAction={{
+            ariaLabel: 'Close drawer',
+          }}
+          onClose={() => {}}
+          footer={
+            <SpaceBetween direction="horizontal" size="xs">
+              <Button variant="primary">Save</Button>
+              <Button>Cancel</Button>
+            </SpaceBetween>
+          }
+          classNames={
+            showStyled ? { root: styles['styled-drawer'], closeButton: styles['styled-close-action'] } : undefined
+          }
+        >
+          <SpaceBetween size="s">
+            <Box variant="p">
+              <Box variant="strong">Instance i-0abc123</Box>
+              <br />
+              Type: t3.medium | Region: us-east-1
+            </Box>
+            <Box variant="p">
+              <Box variant="strong">Instance i-0def456</Box>
+              <br />
+              Type: m5.large | Region: eu-west-1
+            </Box>
+            <Box variant="p">
+              <Box variant="strong">Instance i-0ghi789</Box>
+              <br />
+              Type: c5.xlarge | Region: ap-south-1
+            </Box>
+          </SpaceBetween>
+        </Drawer>
+      </div>
+    </SimplePage>
+  );
+}
diff --git a/pages/drawer/style-v2.scss b/pages/drawer/style-v2.scss
new file mode 100644
index 0000000000..5ba847d5fb
--- /dev/null
+++ b/pages/drawer/style-v2.scss
@@ -0,0 +1,18 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../app/themes/style-v2-palette' as palette;
+
+.styled-drawer {
+  // Content keeps the default background; only header and footer are tinted.
+  --awsui-style-drawer-header-background: #{palette.$info-surface};
+  --awsui-style-drawer-footer-background: #{palette.$info-surface};
+  --awsui-style-drawer-backdrop-background: hsl(120 120% 15% / 30%);
+}
+
+.styled-close-action {
+  --awsui-style-button-color-default: #{palette.$accent};
+  --awsui-style-button-focus-ring-color: #{palette.$accent};
+}
diff --git a/pages/file-dropzone/style-v2.page.tsx b/pages/file-dropzone/style-v2.page.tsx
new file mode 100644
index 0000000000..26da3a4d54
--- /dev/null
+++ b/pages/file-dropzone/style-v2.page.tsx
@@ -0,0 +1,20 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+
+import { FileDropzone } from '~components';
+
+import { SimplePage } from '../app/templates';
+
+import styles from './style-v2.scss';
+
+export default function FileDropzoneStyleV2Page() {
+  return (
+    <SimplePage title="FileDropzone with Style API v2" screenshotArea={{}}>
+      <FileDropzone onChange={() => undefined} classNames={{ root: styles['styled-dropzone'] }}>
+        Drop files here or click to browse
+      </FileDropzone>
+    </SimplePage>
+  );
+}
diff --git a/pages/file-dropzone/style-v2.scss b/pages/file-dropzone/style-v2.scss
new file mode 100644
index 0000000000..d874d47a17
--- /dev/null
+++ b/pages/file-dropzone/style-v2.scss
@@ -0,0 +1,30 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../app/themes/style-v2-palette' as palette;
+
+.styled-dropzone {
+  --awsui-style-file-dropzone-background: #{palette.$surface};
+  --awsui-style-file-dropzone-border-color: #{palette.$border-accent};
+  --awsui-style-file-dropzone-border-style: dashed;
+  --awsui-style-file-dropzone-border-radius: 16px;
+
+  &:hover {
+    --awsui-style-file-dropzone-background: #{palette.$surface-alt};
+    --awsui-style-file-dropzone-border-color: #{palette.$accent-hover};
+  }
+}
+
+.styled-dropzone-alt {
+  --awsui-style-file-dropzone-background: #{palette.$info-surface};
+  --awsui-style-file-dropzone-border-color: #{palette.$info};
+  --awsui-style-file-dropzone-border-style: dashed;
+  --awsui-style-file-dropzone-border-radius: 8px;
+
+  &:hover {
+    --awsui-style-file-dropzone-background: #{palette.$surface-alt};
+    --awsui-style-file-dropzone-border-color: #{palette.$accent};
+  }
+}
diff --git a/pages/flashbar/style-v2.page.tsx b/pages/flashbar/style-v2.page.tsx
new file mode 100644
index 0000000000..e584cc45b9
--- /dev/null
+++ b/pages/flashbar/style-v2.page.tsx
@@ -0,0 +1,99 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import { Button, Checkbox, Flashbar, FlashbarProps, SpaceBetween } from '~components';
+
+import { SimplePage } from '../app/templates';
+
+import styles from './style-v2.scss';
+
+const baseItems: FlashbarProps.MessageDefinition[] = [
+  {
+    type: 'success',
+    header: 'Deployment complete',
+    content: 'All resources have been successfully deployed to production.',
+    dismissible: true,
+    id: 'success-1',
+    action: <Button>View details</Button>,
+  },
+  {
+    type: 'error',
+    header: 'Build failed',
+    content: 'The pipeline encountered an error during the packaging stage.',
+    dismissible: true,
+    id: 'error-1',
+    action: <Button>Retry</Button>,
+  },
+  {
+    type: 'info',
+    header: 'Maintenance scheduled',
+    content: 'A maintenance window is scheduled for Saturday 2:00 AM UTC.',
+    dismissible: true,
+    id: 'info-1',
+  },
+  {
+    type: 'warning',
+    header: 'Certificate expiring',
+    content: 'Your TLS certificate expires in 7 days. Renew to avoid service disruption.',
+    dismissible: true,
+    id: 'warning-1',
+    action: <Button>Renew now</Button>,
+  },
+  {
+    type: 'in-progress',
+    header: 'Deployment in progress',
+    content: 'Deploying version 2.4.1 to production environment.',
+    loading: true,
+    dismissible: true,
+    id: 'in-progress-1',
+  },
+];
+
+const itemClassNames: Record<string, string> = {
+  success: styles['flash-success'],
+  error: styles['flash-error'],
+  info: styles['flash-info'],
+  warning: styles['flash-warning'],
+};
+
+export default function FlashbarStyleV2Page() {
+  const [stacked, setStacked] = useState(false);
+  const [useCustom, setUseCustom] = useState(true);
+  const [items, setItems] = useState(baseItems);
+
+  return (
+    <SimplePage
+      title="Flashbar with Style API v2"
+      screenshotArea={{}}
+      settings={
+        <SpaceBetween size="xs">
+          <Checkbox checked={useCustom} onChange={({ detail }) => setUseCustom(detail.checked)}>
+            Custom styling
+          </Checkbox>
+          <Checkbox checked={stacked} onChange={({ detail }) => setStacked(detail.checked)}>
+            Stacked
+          </Checkbox>
+        </SpaceBetween>
+      }
+    >
+      <Flashbar
+        items={items.map(item => ({
+          ...item,
+          onDismiss: () => setItems(prev => prev.filter(i => i.id !== item.id)),
+        }))}
+        stackItems={stacked}
+        i18nStrings={{ ariaLabel: 'Notifications' }}
+        classNames={
+          useCustom
+            ? {
+                root: styles['styled-flashbar'],
+                item: ({ item }) => itemClassNames[item.type ?? 'info'],
+                dismissButton: () => styles.dismiss,
+              }
+            : undefined
+        }
+      />
+    </SimplePage>
+  );
+}
diff --git a/pages/flashbar/style-v2.scss b/pages/flashbar/style-v2.scss
new file mode 100644
index 0000000000..a23c105be6
--- /dev/null
+++ b/pages/flashbar/style-v2.scss
@@ -0,0 +1,46 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../app/themes/style-v2-palette' as palette;
+
+// Base theme on the flashbar wrapper. Cascades to all items and to the
+// peeking "stacked" cards (which are rendered without the per-item class).
+.styled-flashbar {
+  --awsui-style-flash-background: #{palette.$surface-alt};
+  --awsui-style-flash-color: #{palette.$text};
+  --awsui-style-flash-border-radius: 12px;
+}
+
+// Per-type item overrides for the flat / expanded view.
+// Text always uses $text for guaranteed contrast in light and dark modes.
+@mixin flash-theme($bg) {
+  --awsui-style-flash-background: #{$bg};
+  --awsui-style-flash-color: #{palette.$text};
+  --awsui-style-flash-border-radius: 12px;
+}
+
+.flash-success {
+  @include flash-theme(palette.$success-surface);
+}
+
+.flash-error {
+  @include flash-theme(palette.$error-surface);
+}
+
+.flash-info {
+  @include flash-theme(palette.$info-surface);
+}
+
+.flash-warning {
+  @include flash-theme(palette.$warning-surface);
+}
+
+// Scoped to the dismiss button wrapper only — does not affect action buttons.
+// $text keeps the icon readable on the tinted surfaces in both color modes.
+.dismiss {
+  --awsui-style-button-color-default: #{palette.$text};
+  --awsui-style-button-color-hover: #{palette.$error};
+  --awsui-style-transition-duration: 200ms;
+}
diff --git a/pages/input/style-v2.page.tsx b/pages/input/style-v2.page.tsx
new file mode 100644
index 0000000000..6697cb614d
--- /dev/null
+++ b/pages/input/style-v2.page.tsx
@@ -0,0 +1,50 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { useState } from 'react';
+
+import { Checkbox, Input, SpaceBetween } from '~components';
+
+import { SimplePage } from '../app/templates';
+
+import styles from './style-v2.scss';
+
+export default function StyleV2InputPage() {
+  const [disabled, setDisabled] = useState(false);
+  const [readOnly, setReadOnly] = useState(false);
+  const [invalid, setInvalid] = useState(false);
+  const [warning, setWarning] = useState(false);
+  const [textValue, setTextValue] = useState('Hello world');
+  return (
+    <SimplePage
+      title="Input with Style API v2"
+      screenshotArea={{}}
+      settings={
+        <SpaceBetween size="xs">
+          <Checkbox checked={disabled} onChange={({ detail }) => setDisabled(detail.checked)}>
+            disabled
+          </Checkbox>
+          <Checkbox checked={readOnly} onChange={({ detail }) => setReadOnly(detail.checked)}>
+            readOnly
+          </Checkbox>
+          <Checkbox checked={invalid} onChange={({ detail }) => setInvalid(detail.checked)}>
+            invalid
+          </Checkbox>
+          <Checkbox checked={warning} onChange={({ detail }) => setWarning(detail.checked)}>
+            warning
+          </Checkbox>
+        </SpaceBetween>
+      }
+    >
+      <Input
+        value={textValue}
+        onChange={({ detail }) => setTextValue(detail.value)}
+        disabled={disabled}
+        readOnly={readOnly}
+        invalid={invalid}
+        warning={warning}
+        classNames={{ root: styles['styled-input'] }}
+      />
+    </SimplePage>
+  );
+}
diff --git a/pages/input/style-v2.scss b/pages/input/style-v2.scss
new file mode 100644
index 0000000000..94c7fb2879
--- /dev/null
+++ b/pages/input/style-v2.scss
@@ -0,0 +1,22 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../app/themes/style-v2-palette' as palette;
+
+.styled-input {
+  --awsui-style-input-background: #{palette.$surface-alt};
+  --awsui-style-input-background-focus: #{palette.$surface};
+  --awsui-style-input-border-color: #{palette.$accent};
+  --awsui-style-input-border-color-focus: #{palette.$accent-hover};
+  --awsui-style-input-color: #{palette.$text};
+  --awsui-style-input-placeholder-color: #{palette.$accent};
+  --awsui-style-input-border-radius: 16px;
+  --awsui-style-input-border-width: 3px;
+  --awsui-style-transition-duration: #{palette.$transition-duration};
+
+  &:hover {
+    --awsui-style-input-border-color: #{palette.$accent-hover};
+  }
+}
diff --git a/pages/item-card/style-v2.page.tsx b/pages/item-card/style-v2.page.tsx
new file mode 100644
index 0000000000..6183e53cb1
--- /dev/null
+++ b/pages/item-card/style-v2.page.tsx
@@ -0,0 +1,31 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+
+import { Box, ColumnLayout, ItemCard } from '~components';
+
+import { SimplePage } from '../app/templates';
+
+import styles from './style-v2.scss';
+
+export default function StyleV2ItemCardPage() {
+  const cards = [
+    { id: '1', header: 'Lambda Function', description: 'Serverless compute', cls: styles['card-one'] },
+    { id: '2', header: 'DynamoDB Table', description: 'NoSQL database', cls: styles['card-two'] },
+    { id: '3', header: 'S3 Bucket', description: 'Object storage', cls: styles['card-three'] },
+  ];
+
+  return (
+    <SimplePage title="ItemCard with Style API v2" screenshotArea={{}}>
+      <ColumnLayout columns={3}>
+        {cards.map(card => (
+          <ItemCard key={card.id} header={card.header} footer="View details" classNames={{ root: card.cls }}>
+            <Box color="text-body-secondary">{card.description}</Box>
+            <div className={styles['image-placeholder']} />
+          </ItemCard>
+        ))}
+      </ColumnLayout>
+    </SimplePage>
+  );
+}
diff --git a/pages/item-card/style-v2.scss b/pages/item-card/style-v2.scss
new file mode 100644
index 0000000000..019b6e4840
--- /dev/null
+++ b/pages/item-card/style-v2.scss
@@ -0,0 +1,41 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../app/themes/style-v2-palette' as palette;
+
+.image-placeholder {
+  block-size: 80px;
+  margin-block-start: 8px;
+  border-start-start-radius: 6px;
+  border-start-end-radius: 6px;
+  border-end-start-radius: 6px;
+  border-end-end-radius: 6px;
+  background: #{palette.$surface-alt};
+}
+
+@mixin item-card-theme($border, $border-hover, $bg, $bg-hover) {
+  --awsui-style-item-card-background-default: #{$bg};
+  --awsui-style-item-card-border-color-default: #{$border};
+  --awsui-style-item-card-border-radius: 12px;
+  --awsui-style-item-card-border-width-default: 2px;
+  --awsui-style-transition-duration: 200ms;
+
+  &:hover {
+    --awsui-style-item-card-border-color-default: #{$border-hover};
+    --awsui-style-item-card-background-default: #{$bg-hover};
+  }
+}
+
+.card-one {
+  @include item-card-theme(palette.$accent, palette.$accent-hover, palette.$surface, palette.$surface-alt);
+}
+
+.card-two {
+  @include item-card-theme(palette.$success, palette.$success, palette.$success-surface, palette.$surface-alt);
+}
+
+.card-three {
+  @include item-card-theme(palette.$warning, palette.$warning, palette.$warning-surface, palette.$surface-alt);
+}
diff --git a/pages/link/style-v2.page.tsx b/pages/link/style-v2.page.tsx
new file mode 100644
index 0000000000..3e2be38bf9
--- /dev/null
+++ b/pages/link/style-v2.page.tsx
@@ -0,0 +1,29 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+
+import { Link } from '~components';
+
+import { SimplePage } from '../app/templates';
+
+import styles from './style-v2.scss';
+
+export default function StyleV2LinkPage() {
+  return (
+    <SimplePage title="Link with Style API v2" screenshotArea={{}}>
+      <Link href="#" variant="primary" classNames={{ root: styles['styled-link'] }}>
+        Primary link
+      </Link>
+      <Link href="#" variant="secondary" classNames={{ root: styles['styled-link'] }}>
+        Secondary link
+      </Link>
+      <Link href="#" external={true} classNames={{ root: styles['styled-link'] }}>
+        External link with icon
+      </Link>
+      <Link href="#" variant="info" classNames={{ root: styles['styled-link'] }}>
+        Info link
+      </Link>
+    </SimplePage>
+  );
+}
diff --git a/pages/link/style-v2.scss b/pages/link/style-v2.scss
new file mode 100644
index 0000000000..b72cd6a781
--- /dev/null
+++ b/pages/link/style-v2.scss
@@ -0,0 +1,15 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../app/themes/style-v2-palette' as palette;
+
+.styled-link {
+  --awsui-style-link-color-default: #{palette.$accent};
+  --awsui-style-link-color-hover: #{palette.$error};
+  --awsui-style-link-color-active: #{palette.$accent-active};
+  --awsui-style-link-font-weight: 700;
+  --awsui-style-link-text-decoration: underline;
+  --awsui-style-transition-duration: #{palette.$transition-duration};
+}
diff --git a/pages/modal/style-v2.page.tsx b/pages/modal/style-v2.page.tsx
new file mode 100644
index 0000000000..532303b9fc
--- /dev/null
+++ b/pages/modal/style-v2.page.tsx
@@ -0,0 +1,55 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import { Box, Button, Modal, SpaceBetween } from '~components';
+
+import { SimplePage } from '../app/templates';
+
+import styles from './style-v2.scss';
+
+export default function ModalStyleV2Page() {
+  const [visible, setVisible] = useState(true);
+  return (
+    <SimplePage title="Modal with Style API v2" screenshotArea={{}}>
+      <SpaceBetween size="l">
+        <Button variant="primary" onClick={() => setVisible(true)}>
+          Open styled modal
+        </Button>
+        <Modal
+          visible={visible}
+          onDismiss={() => setVisible(false)}
+          header="Confirm action"
+          footer={
+            <Box float="right">
+              <SpaceBetween direction="horizontal" size="xs">
+                <Button
+                  variant="link"
+                  onClick={() => setVisible(false)}
+                  classNames={{ root: styles['styled-button-secondary'] }}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  variant="primary"
+                  onClick={() => setVisible(false)}
+                  classNames={{ root: styles['styled-button-primary'] }}
+                >
+                  Confirm
+                </Button>
+              </SpaceBetween>
+            </Box>
+          }
+          classNames={{ root: styles['styled-modal'] }}
+        >
+          <SpaceBetween size="s">
+            <Box>Are you sure you want to proceed with this action? This will update the resource configuration.</Box>
+            <Box variant="small" color="text-body-secondary">
+              This action cannot be undone.
+            </Box>
+          </SpaceBetween>
+        </Modal>
+      </SpaceBetween>
+    </SimplePage>
+  );
+}
diff --git a/pages/modal/style-v2.scss b/pages/modal/style-v2.scss
new file mode 100644
index 0000000000..23d30b81d1
--- /dev/null
+++ b/pages/modal/style-v2.scss
@@ -0,0 +1,30 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../app/themes/style-v2-palette' as palette;
+
+.styled-modal {
+  --awsui-style-modal-header-background: #{palette.$info-surface};
+  --awsui-style-modal-border-radius: 20px;
+  --awsui-style-modal-overlay-background: hsl(220 120% 15% / 75%);
+}
+
+.styled-button-primary {
+  --awsui-style-button-background-default: #{palette.$accent};
+  --awsui-style-button-background-hover: #{palette.$accent-hover};
+  --awsui-style-button-background-active: #{palette.$accent-active};
+  --awsui-style-button-color-default: #{palette.$text-on-accent};
+  --awsui-style-button-color-hover: #{palette.$text-on-accent};
+  --awsui-style-button-color-active: #{palette.$text-on-accent};
+  --awsui-style-button-border-color-default: #{palette.$accent};
+  --awsui-style-button-border-color-hover: #{palette.$accent-hover};
+  --awsui-style-button-border-color-active: #{palette.$accent-active};
+}
+
+.styled-button-secondary {
+  --awsui-style-button-color-default: #{palette.$accent};
+  --awsui-style-button-color-hover: #{palette.$accent-hover};
+  --awsui-style-button-color-active: #{palette.$accent-active};
+}
diff --git a/pages/progress-bar/style-v2.page.tsx b/pages/progress-bar/style-v2.page.tsx
new file mode 100644
index 0000000000..bdaa3e2108
--- /dev/null
+++ b/pages/progress-bar/style-v2.page.tsx
@@ -0,0 +1,35 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+
+import { ProgressBar } from '~components';
+
+import { SimplePage } from '../app/templates';
+
+import styles from './style-v2.scss';
+
+export default function StyleV2ProgressBarPage() {
+  return (
+    <SimplePage title="ProgressBar with Style API v2" screenshotArea={{}}>
+      <ProgressBar
+        value={75}
+        label="Thick rounded"
+        description="75% complete"
+        classNames={{ root: styles['progress-thick'] }}
+      />
+      <ProgressBar
+        value={40}
+        label="Thin flat"
+        description="40% complete"
+        classNames={{ root: styles['progress-thin'] }}
+      />
+      <ProgressBar
+        value={90}
+        label="Error accent"
+        description="90% complete"
+        classNames={{ root: styles['progress-accent'] }}
+      />
+    </SimplePage>
+  );
+}
diff --git a/pages/progress-bar/style-v2.scss b/pages/progress-bar/style-v2.scss
new file mode 100644
index 0000000000..f36ade385c
--- /dev/null
+++ b/pages/progress-bar/style-v2.scss
@@ -0,0 +1,27 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../app/themes/style-v2-palette' as palette;
+
+.progress-thick {
+  --awsui-style-progress-bar-track-color: #{palette.$surface-alt};
+  --awsui-style-progress-bar-value-color: #{palette.$accent};
+  --awsui-style-progress-bar-border-radius: 12px;
+  --awsui-style-progress-bar-height: 16px;
+}
+
+.progress-thin {
+  --awsui-style-progress-bar-track-color: #{palette.$border};
+  --awsui-style-progress-bar-value-color: #{palette.$success};
+  --awsui-style-progress-bar-border-radius: 0;
+  --awsui-style-progress-bar-height: 4px;
+}
+
+.progress-accent {
+  --awsui-style-progress-bar-track-color: #{palette.$error-surface};
+  --awsui-style-progress-bar-value-color: #{palette.$error};
+  --awsui-style-progress-bar-border-radius: 4px;
+  --awsui-style-progress-bar-height: 8px;
+}
diff --git a/pages/prompt-input/style-v2.page.tsx b/pages/prompt-input/style-v2.page.tsx
new file mode 100644
index 0000000000..1d56d14fc7
--- /dev/null
+++ b/pages/prompt-input/style-v2.page.tsx
@@ -0,0 +1,69 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { useState } from 'react';
+
+import { ButtonGroup, Checkbox, FileTokenGroup, PromptInput, SpaceBetween } from '~components';
+
+import { SimplePage } from '../app/templates';
+import { i18nStrings } from '../file-upload/shared';
+
+import styles from './style-v2.scss';
+
+export default function StyleV2PromptInputPage() {
+  const [value, setValue] = useState('Tell me about AWS Lambda cold starts');
+  const [files, setFiles] = useState<File[]>([]);
+  const [disabled, setDisabled] = useState(false);
+  const [invalid, setInvalid] = useState(false);
+
+  return (
+    <SimplePage
+      title="PromptInput with Style API v2"
+      screenshotArea={{}}
+      settings={
+        <SpaceBetween size="xs">
+          <Checkbox checked={disabled} onChange={({ detail }) => setDisabled(detail.checked)}>
+            disabled
+          </Checkbox>
+          <Checkbox checked={invalid} onChange={({ detail }) => setInvalid(detail.checked)}>
+            invalid
+          </Checkbox>
+        </SpaceBetween>
+      }
+    >
+      <PromptInput
+        classNames={{ root: styles['styled-prompt-input'] }}
+        value={value}
+        onChange={({ detail }) => setValue(detail.value)}
+        placeholder="Ask a question..."
+        actionButtonIconName="send"
+        actionButtonAriaLabel="Send"
+        disabled={disabled}
+        invalid={invalid}
+        minRows={2}
+        secondaryActions={
+          <ButtonGroup
+            ariaLabel="Prompt actions"
+            variant="icon"
+            onFilesChange={({ detail }) => detail.id === 'files' && setFiles(detail.files)}
+            items={[
+              { type: 'icon-file-input', id: 'files', text: 'Upload files', multiple: true },
+              { type: 'icon-button', id: 'mic', iconName: 'microphone', text: 'Voice input' },
+            ]}
+          />
+        }
+        secondaryContent={
+          files.length > 0 ? (
+            <FileTokenGroup
+              items={files.map(file => ({ file }))}
+              showFileThumbnail={true}
+              onDismiss={({ detail }) => setFiles(prev => prev.filter((_, i) => i !== detail.fileIndex))}
+              i18nStrings={i18nStrings}
+              alignment="horizontal"
+            />
+          ) : undefined
+        }
+      />
+    </SimplePage>
+  );
+}
diff --git a/pages/prompt-input/style-v2.scss b/pages/prompt-input/style-v2.scss
new file mode 100644
index 0000000000..54ee076bc8
--- /dev/null
+++ b/pages/prompt-input/style-v2.scss
@@ -0,0 +1,29 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../app/themes/style-v2-palette' as palette;
+
+.styled-prompt-input {
+  // Field
+  --awsui-style-prompt-input-background-default: #{palette.$surface-alt};
+  --awsui-style-prompt-input-background-focus: #{palette.$surface};
+  --awsui-style-prompt-input-border-color-default: #{palette.$accent};
+  --awsui-style-prompt-input-border-color-focus: #{palette.$accent-hover};
+  --awsui-style-prompt-input-color-default: #{palette.$text};
+  --awsui-style-prompt-input-placeholder-color: #{palette.$accent};
+  --awsui-style-prompt-input-border-radius: 16px;
+  --awsui-style-prompt-input-border-width: 3px;
+  --awsui-style-transition-duration: #{palette.$transition-duration};
+
+  // Send button + secondary action buttons (cohesive accent theme)
+  --awsui-style-button-color-default: #{palette.$accent};
+  --awsui-style-button-color-hover: #{palette.$text-on-accent};
+  --awsui-style-button-background-hover: #{palette.$accent};
+  --awsui-style-button-border-radius: 50%;
+
+  &:hover {
+    --awsui-style-prompt-input-border-color-default: #{palette.$accent-hover};
+  }
+}
diff --git a/pages/radio-group/style-v2.page.tsx b/pages/radio-group/style-v2.page.tsx
new file mode 100644
index 0000000000..9ace09283b
--- /dev/null
+++ b/pages/radio-group/style-v2.page.tsx
@@ -0,0 +1,58 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { useState } from 'react';
+
+import { Checkbox, Container, RadioGroup } from '~components';
+
+import { SimplePage } from '../app/templates';
+
+import styles from './style-v2.scss';
+
+export default function StyleV2RadioGroupPage() {
+  const [value1, setValue1] = useState('option-1');
+  const [value2, setValue2] = useState('small');
+  const [readOnly, setReadOnly] = useState(false);
+
+  return (
+    <SimplePage
+      title="RadioGroup with Style API v2"
+      screenshotArea={{}}
+      settings={
+        <Checkbox checked={readOnly} onChange={({ detail }) => setReadOnly(detail.checked)}>
+          readOnly
+        </Checkbox>
+      }
+    >
+      <div>
+        <Container header="Accent variant with descriptions" variant="stacked">
+          <RadioGroup
+            value={value1}
+            onChange={({ detail }) => setValue1(detail.value)}
+            readOnly={readOnly}
+            items={[
+              { value: 'option-1', label: 'Standard', description: 'Best for most workloads' },
+              { value: 'option-2', label: 'Performance', description: 'Optimized for high throughput' },
+              { value: 'option-3', label: 'Economy', description: 'Cost-effective for dev/test' },
+              { value: 'option-4', label: 'Legacy', description: 'Not recommended', disabled: true },
+            ]}
+            classNames={{ root: styles['radio-accent'] }}
+          />
+        </Container>
+        <Container header="Success variant" variant="stacked">
+          <RadioGroup
+            value={value2}
+            onChange={({ detail }) => setValue2(detail.value)}
+            readOnly={readOnly}
+            items={[
+              { value: 'small', label: 'Small', description: '1 vCPU, 2 GB RAM' },
+              { value: 'medium', label: 'Medium', description: '2 vCPU, 4 GB RAM' },
+              { value: 'large', label: 'Large', description: '4 vCPU, 8 GB RAM' },
+            ]}
+            classNames={{ root: styles['radio-success'] }}
+          />
+        </Container>
+      </div>
+    </SimplePage>
+  );
+}
diff --git a/pages/radio-group/style-v2.scss b/pages/radio-group/style-v2.scss
new file mode 100644
index 0000000000..13a7679cdc
--- /dev/null
+++ b/pages/radio-group/style-v2.scss
@@ -0,0 +1,30 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../app/themes/style-v2-palette' as palette;
+
+@mixin radio-theme($accent, $accent-hover) {
+  --awsui-style-color-background-control-checked: #{$accent};
+  --awsui-style-color-border-control-default: #{$accent};
+  --awsui-style-color-border-control-checked: #{$accent};
+  --awsui-style-color-foreground-control-default: #{palette.$control-foreground};
+  --awsui-style-color-text-label: #{palette.$text};
+  --awsui-style-color-text-label-disabled: #{palette.$text-disabled};
+  --awsui-style-color-border-control-disabled: #{palette.$border-disabled};
+  --awsui-style-color-background-control-disabled: #{palette.$control-bg-disabled};
+  --awsui-style-transition-duration: #{palette.$transition-duration};
+
+  &:hover {
+    --awsui-style-color-border-control-default: #{$accent-hover};
+  }
+}
+
+.radio-accent {
+  @include radio-theme($accent: palette.$accent, $accent-hover: palette.$accent-hover);
+}
+
+.radio-success {
+  @include radio-theme($accent: palette.$success, $accent-hover: palette.$accent-hover);
+}
diff --git a/pages/segmented-control/style-v2.page.tsx b/pages/segmented-control/style-v2.page.tsx
new file mode 100644
index 0000000000..bd3a2cdfa7
--- /dev/null
+++ b/pages/segmented-control/style-v2.page.tsx
@@ -0,0 +1,43 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { useState } from 'react';
+
+import { SegmentedControl, SpaceBetween } from '~components';
+
+import { SimplePage } from '../app/templates';
+
+import styles from './style-v2.scss';
+
+export default function StyleV2SegmentedControlPage() {
+  const [selectedId, setSelectedId] = useState('seg-1');
+
+  return (
+    <SimplePage title="SegmentedControl with Style API v2" screenshotArea={{}}>
+      <SpaceBetween size="l">
+        <SegmentedControl
+          selectedId={selectedId}
+          onChange={({ detail }) => setSelectedId(detail.selectedId)}
+          options={[
+            { text: 'Overview', iconName: 'view-full', id: 'seg-1' },
+            { text: 'Details', iconName: 'file', id: 'seg-2' },
+            { text: 'Metrics', iconName: 'status-positive', id: 'seg-3' },
+            { text: 'Disabled', iconName: 'lock-private', id: 'seg-4', disabled: true },
+          ]}
+          classNames={{ root: styles['styled-segmented-control'] }}
+        />
+        <SegmentedControl
+          selectedId={selectedId}
+          onChange={({ detail }) => setSelectedId(detail.selectedId)}
+          options={[
+            { text: 'Overview', iconName: 'view-full', id: 'seg-1' },
+            { text: 'Details', iconName: 'file', id: 'seg-2' },
+            { text: 'Metrics', iconName: 'status-positive', id: 'seg-3' },
+            { text: 'Disabled', iconName: 'lock-private', id: 'seg-4', disabled: true },
+          ]}
+          classNames={{ root: styles['square-segmented-control'] }}
+        />
+      </SpaceBetween>
+    </SimplePage>
+  );
+}
diff --git a/pages/segmented-control/style-v2.scss b/pages/segmented-control/style-v2.scss
new file mode 100644
index 0000000000..d9b1df5c79
--- /dev/null
+++ b/pages/segmented-control/style-v2.scss
@@ -0,0 +1,30 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../app/themes/style-v2-palette' as palette;
+
+/* stylelint-disable custom-property-pattern */
+
+.styled-segmented-control {
+  --awsui-style-segmented-control-background-default: #{palette.$surface};
+  --awsui-style-segmented-control-color-default: #{palette.$text-muted};
+  --awsui-style-segmented-control-background-active: #{palette.$accent};
+  --awsui-style-segmented-control-color-active: #{palette.$text-on-accent};
+  --awsui-style-segmented-control-background-hover: #{palette.$surface-alt};
+  --awsui-style-segmented-control-color-hover: #{palette.$accent};
+  --awsui-style-segmented-control-border-radius: 999px;
+  --awsui-style-transition-duration: 200ms;
+}
+
+.square-segmented-control {
+  --awsui-style-segmented-control-background-default: #{palette.$surface};
+  --awsui-style-segmented-control-color-default: #{palette.$text-muted};
+  --awsui-style-segmented-control-background-active: #{palette.$success};
+  --awsui-style-segmented-control-color-active: #{palette.$text-on-accent};
+  --awsui-style-segmented-control-background-hover: #{palette.$success-surface};
+  --awsui-style-segmented-control-color-hover: #{palette.$success};
+  --awsui-style-segmented-control-border-radius: 0;
+  --awsui-style-transition-duration: 150ms;
+}
diff --git a/pages/slider/style-v2.page.tsx b/pages/slider/style-v2.page.tsx
new file mode 100644
index 0000000000..73eaf47c61
--- /dev/null
+++ b/pages/slider/style-v2.page.tsx
@@ -0,0 +1,87 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { useState } from 'react';
+
+import { Box, Checkbox, Container, Slider, SpaceBetween } from '~components';
+
+import { SimplePage } from '../app/templates';
+
+import styles from './style-v2.scss';
+
+export default function StyleV2SliderPage() {
+  const [volume, setVolume] = useState(60);
+  const [quality, setQuality] = useState(80);
+  const [danger, setDanger] = useState(25);
+  const [stepped, setStepped] = useState(50);
+  const [disabled, setDisabled] = useState(false);
+
+  return (
+    <SimplePage
+      title="Slider with Style API v2"
+      screenshotArea={{}}
+      settings={
+        <Checkbox checked={disabled} onChange={({ detail }) => setDisabled(detail.checked)}>
+          disabled
+        </Checkbox>
+      }
+    >
+      <div>
+        <Container header="Success variant" variant="stacked">
+          <SpaceBetween size="xs">
+            <Box variant="small">Volume: {volume}%</Box>
+            <Slider
+              value={volume}
+              onChange={({ detail }) => setVolume(detail.value)}
+              min={0}
+              max={100}
+              disabled={disabled}
+              classNames={{ root: styles['slider-success'] }}
+            />
+          </SpaceBetween>
+        </Container>
+        <Container header="Accent variant" variant="stacked">
+          <SpaceBetween size="xs">
+            <Box variant="small">Quality: {quality}%</Box>
+            <Slider
+              value={quality}
+              onChange={({ detail }) => setQuality(detail.value)}
+              min={0}
+              max={100}
+              disabled={disabled}
+              classNames={{ root: styles['slider-accent'] }}
+            />
+          </SpaceBetween>
+        </Container>
+        <Container header="Danger variant" variant="stacked">
+          <SpaceBetween size="xs">
+            <Box variant="small">Risk tolerance: {danger}%</Box>
+            <Slider
+              value={danger}
+              onChange={({ detail }) => setDanger(detail.value)}
+              min={0}
+              max={100}
+              disabled={disabled}
+              classNames={{ root: styles['slider-danger'] }}
+            />
+          </SpaceBetween>
+        </Container>
+        <Container header="Stepped with tick marks and reference values" variant="stacked">
+          <SpaceBetween size="xs">
+            <Box variant="small">Value: {stepped}</Box>
+            <Slider
+              value={stepped}
+              onChange={({ detail }) => setStepped(detail.value)}
+              min={0}
+              max={100}
+              step={10}
+              tickMarks={true}
+              referenceValues={[25, 75]}
+              disabled={disabled}
+            />
+          </SpaceBetween>
+        </Container>
+      </div>
+    </SimplePage>
+  );
+}
diff --git a/pages/slider/style-v2.scss b/pages/slider/style-v2.scss
new file mode 100644
index 0000000000..d0989460a4
--- /dev/null
+++ b/pages/slider/style-v2.scss
@@ -0,0 +1,36 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../app/themes/style-v2-palette' as palette;
+
+// $hover-color defaults to the base color, so hover matches the styled base
+// color unless a variant explicitly overrides it.
+@mixin slider-theme($color, $hover-color: $color) {
+  --awsui-style-slider-track-background-color: #{palette.$border};
+  --awsui-style-slider-range-background-default: #{$color};
+  --awsui-style-slider-range-background-active: #{$hover-color};
+  --awsui-style-slider-handle-background-default: #{$color};
+  --awsui-style-slider-handle-background-hover: #{$hover-color};
+  --awsui-style-slider-handle-background-active: #{$hover-color};
+  --awsui-style-slider-handle-border-radius: 999px;
+
+  &:hover {
+    --awsui-style-slider-range-background-default: #{$hover-color};
+    --awsui-style-slider-handle-background-default: #{$hover-color};
+  }
+}
+
+// Each variant overrides hover with a darker shade of its own hue.
+.slider-success {
+  @include slider-theme($color: palette.$success, $hover-color: hsl(145, 60%, 30%));
+}
+
+.slider-accent {
+  @include slider-theme($color: palette.$accent, $hover-color: palette.$accent-hover);
+}
+
+.slider-danger {
+  @include slider-theme($color: palette.$error, $hover-color: hsl(0, 65%, 40%));
+}
diff --git a/pages/table/style-v2.page.tsx b/pages/table/style-v2.page.tsx
new file mode 100644
index 0000000000..0bd95aef63
--- /dev/null
+++ b/pages/table/style-v2.page.tsx
@@ -0,0 +1,85 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { useState } from 'react';
+import clsx from 'clsx';
+
+import { Box, Table, TextFilter } from '~components';
+import { TableProps } from '~components/table';
+
+import { SimplePage } from '../app/templates';
+import * as tableProps from '../table/shared-configs';
+
+import styles from './style-v2.scss';
+
+const items = tableProps.createSimpleItems(6);
+
+export default function TableStyleV2Page() {
+  const [sortingColumn, setSortingColumn] = useState<TableProps.SortingColumn<tableProps.Item> | undefined>(undefined);
+  const [sortDescending, setSortDescending] = useState(false);
+  const [selectedItems, setSelectedItems] = useState<tableProps.Item[]>([items[1], items[3]]);
+  const [filterText, setFilterText] = useState('');
+
+  const sortedItems = [...items]
+    .filter(i => !filterText || i.text.toLowerCase().includes(filterText.toLowerCase()))
+    .sort((a, b) => {
+      if (!sortingColumn) {
+        return 0;
+      }
+      const field = sortingColumn.sortingField as keyof tableProps.Item;
+      const cmp = String(a[field]).localeCompare(String(b[field]));
+      return sortDescending ? -cmp : cmp;
+    });
+
+  const columns: TableProps.ColumnDefinition<tableProps.Item>[] = [
+    { id: 'text', header: 'Text', cell: item => item.text, sortingField: 'text' },
+    { id: 'number', header: 'Number', cell: item => item.number, sortingField: 'number' },
+  ];
+
+  return (
+    <SimplePage title="Table with Style API v2" screenshotArea={{}}>
+      <Table
+        classNames={{
+          root: styles['styled-table'],
+          selection: ({ item }) => {
+            if (!item) {
+              return styles['selection-header'];
+            }
+            switch (item.text) {
+              case 'One':
+                return clsx(styles['selection-base'], styles['selection-green']);
+              case 'Two':
+                return clsx(styles['selection-base'], styles['selection-blue']);
+              default:
+                return styles['selection-base'];
+            }
+          },
+        }}
+        columnDefinitions={columns}
+        items={sortedItems}
+        empty={
+          <Box textAlign="center" color="inherit">
+            No items to display
+          </Box>
+        }
+        sortingColumn={sortingColumn}
+        sortingDescending={sortDescending}
+        onSortingChange={({ detail }) => {
+          setSortingColumn(detail.sortingColumn);
+          setSortDescending(detail.isDescending ?? false);
+        }}
+        selectionType="multi"
+        selectedItems={selectedItems}
+        onSelectionChange={({ detail }) => setSelectedItems(detail.selectedItems)}
+        ariaLabels={tableProps.ariaLabels}
+        filter={
+          <TextFilter
+            filteringText={filterText}
+            onChange={({ detail }) => setFilterText(detail.filteringText)}
+            classNames={{ root: styles['styled-filter'] }}
+          />
+        }
+      />
+    </SimplePage>
+  );
+}
diff --git a/pages/table/style-v2.scss b/pages/table/style-v2.scss
new file mode 100644
index 0000000000..6f7383b5f7
--- /dev/null
+++ b/pages/table/style-v2.scss
@@ -0,0 +1,52 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../app/themes/style-v2-palette' as palette;
+
+.styled-table {
+  --awsui-style-table-header-background: #{palette.$accent};
+  --awsui-style-table-header-color: #{palette.$text-on-accent};
+  --awsui-style-table-sorting-icon-color: #{palette.$text-on-accent};
+  --awsui-style-table-border-color: #{palette.$border-accent};
+  --awsui-style-table-selected-background: #{palette.$info-surface};
+  --awsui-style-table-selected-border-color: #{palette.$accent};
+}
+
+.selection-base {
+  --awsui-style-color-background-control: #{palette.$control-bg};
+  --awsui-style-color-background-control-checked: #{palette.$accent};
+  --awsui-style-color-border-control: #{palette.$control-border};
+  --awsui-style-color-foreground-control: #{palette.$control-foreground};
+  --awsui-style-border-width-field: 2px;
+  --awsui-style-transition-duration: 150ms;
+  --awsui-style-transition-easing: ease-in-out;
+}
+
+.selection-header {
+  --awsui-style-color-background-control: #{palette.$surface};
+  --awsui-style-color-background-control-checked: #{palette.$text-on-accent};
+  --awsui-style-color-border-control: #{palette.$text-on-accent};
+  --awsui-style-color-foreground-control: #{palette.$accent};
+}
+
+.selection-green {
+  --awsui-style-color-background-control-checked: #{palette.$success};
+  --awsui-style-color-border-control: #{palette.$success};
+}
+
+.selection-blue {
+  --awsui-style-color-background-control-checked: #{palette.$info};
+  --awsui-style-color-border-control: #{palette.$info};
+}
+
+.styled-filter {
+  --awsui-style-input-border-color: #{palette.$border-accent};
+  --awsui-style-input-border-color-focus: #{palette.$accent};
+  --awsui-style-input-background: #{palette.$surface};
+
+  &:hover {
+    --awsui-style-input-border-color: #{palette.$accent-hover};
+  }
+}
diff --git a/pages/tabs/style-v2.page.tsx b/pages/tabs/style-v2.page.tsx
new file mode 100644
index 0000000000..662c23fe17
--- /dev/null
+++ b/pages/tabs/style-v2.page.tsx
@@ -0,0 +1,31 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { useState } from 'react';
+
+import { Tabs } from '~components';
+
+import { SimplePage } from '../app/templates';
+
+import styles from './style-v2.scss';
+
+export default function TabsStyleV2Page() {
+  const [activeTabId, setActiveTabId] = useState('first');
+
+  return (
+    <SimplePage title="Tabs with Style API v2" screenshotArea={{}}>
+      <Tabs
+        classNames={{ root: styles['styled-tabs'] }}
+        activeTabId={activeTabId}
+        variant="container"
+        onChange={({ detail }) => setActiveTabId(detail.activeTabId)}
+        tabs={[
+          { id: 'first', label: 'Overview', content: 'Alternate color scheme for tabs.' },
+          { id: 'second', label: 'Settings', content: 'Alternate settings view.' },
+          { id: 'third', label: 'Analytics', content: 'Alternate analytics view.' },
+          { id: 'disabled', label: 'Archived', content: '', disabled: true },
+        ]}
+      />
+    </SimplePage>
+  );
+}
diff --git a/pages/tabs/style-v2.scss b/pages/tabs/style-v2.scss
new file mode 100644
index 0000000000..fba0bcdf0c
--- /dev/null
+++ b/pages/tabs/style-v2.scss
@@ -0,0 +1,17 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../app/themes/style-v2-palette' as palette;
+
+.styled-tabs {
+  --awsui-style-tab-color-default: #{palette.$success};
+  --awsui-style-tab-color-active: #{palette.$error};
+  --awsui-style-tab-color-hover: #{palette.$warning};
+  --awsui-style-tab-color-disabled: #{palette.$text-disabled};
+  --awsui-style-tab-active-indicator-color: #{palette.$error};
+  // Header background for the "container" variant.
+  --awsui-style-container-header-background: #{palette.$success-surface};
+  --awsui-style-transition-duration: 150ms;
+}
diff --git a/pages/text-filter/style-v2.page.tsx b/pages/text-filter/style-v2.page.tsx
new file mode 100644
index 0000000000..16c6c457ae
--- /dev/null
+++ b/pages/text-filter/style-v2.page.tsx
@@ -0,0 +1,40 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { useState } from 'react';
+
+import { Checkbox, TextFilter } from '~components';
+
+import { SimplePage } from '../app/templates';
+
+import styles from './style-v2.scss';
+
+export default function StyleV2TextFilterPage() {
+  const [filterText, setFilterText] = useState('instance');
+  const [disabled, setDisabled] = useState(false);
+
+  const matchCount = ['instance-1', 'instance-2', 'instance-3', 'my-server', 'database-primary'].filter(item =>
+    item.includes(filterText.toLowerCase())
+  ).length;
+
+  return (
+    <SimplePage
+      title="TextFilter with Style API v2"
+      screenshotArea={{}}
+      settings={
+        <Checkbox checked={disabled} onChange={({ detail }) => setDisabled(detail.checked)}>
+          disabled
+        </Checkbox>
+      }
+    >
+      <TextFilter
+        filteringText={filterText}
+        onChange={({ detail }) => setFilterText(detail.filteringText)}
+        filteringPlaceholder="Filter resources..."
+        countText={`${matchCount} match${matchCount !== 1 ? 'es' : ''}`}
+        disabled={disabled}
+        classNames={{ root: styles['styled-text-filter'] }}
+      />
+    </SimplePage>
+  );
+}
diff --git a/pages/text-filter/style-v2.scss b/pages/text-filter/style-v2.scss
new file mode 100644
index 0000000000..d8736e0b56
--- /dev/null
+++ b/pages/text-filter/style-v2.scss
@@ -0,0 +1,26 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../app/themes/style-v2-palette' as palette;
+
+.styled-text-filter {
+  --awsui-style-input-background: #{palette.$surface-alt};
+  --awsui-style-input-background-focus: #{palette.$surface};
+  --awsui-style-input-border-color: #{palette.$accent};
+  --awsui-style-input-border-color-focus: #{palette.$accent-hover};
+  --awsui-style-input-color: #{palette.$text};
+  --awsui-style-input-placeholder-color: #{palette.$accent};
+  --awsui-style-input-border-radius: 16px;
+  --awsui-style-input-border-width: 3px;
+  --awsui-style-transition-duration: #{palette.$transition-duration};
+
+  // Clear (X) icon button
+  --awsui-style-button-color-default: #{palette.$accent};
+  --awsui-style-button-color-hover: #{palette.$error};
+
+  &:hover {
+    --awsui-style-input-border-color: #{palette.$accent-hover};
+  }
+}
diff --git a/pages/textarea/style-v2.page.tsx b/pages/textarea/style-v2.page.tsx
new file mode 100644
index 0000000000..a2d5f0df63
--- /dev/null
+++ b/pages/textarea/style-v2.page.tsx
@@ -0,0 +1,47 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { useState } from 'react';
+
+import { Checkbox, SpaceBetween, Textarea } from '~components';
+
+import { SimplePage } from '../app/templates';
+
+import styles from './style-v2.scss';
+
+export default function StyleV2TextareaPage() {
+  const [disabled, setDisabled] = useState(false);
+  const [invalid, setInvalid] = useState(false);
+  const [warning, setWarning] = useState(false);
+  const [content, setContent] = useState('This is styled textarea content.\nIt supports multiple lines of text.');
+
+  return (
+    <SimplePage
+      title="Textarea with Style API v2"
+      screenshotArea={{}}
+      settings={
+        <SpaceBetween size="xs">
+          <Checkbox checked={disabled} onChange={({ detail }) => setDisabled(detail.checked)}>
+            disabled
+          </Checkbox>
+          <Checkbox checked={invalid} onChange={({ detail }) => setInvalid(detail.checked)}>
+            invalid
+          </Checkbox>
+          <Checkbox checked={warning} onChange={({ detail }) => setWarning(detail.checked)}>
+            warning
+          </Checkbox>
+        </SpaceBetween>
+      }
+    >
+      <Textarea
+        value={content}
+        onChange={({ detail }) => setContent(detail.value)}
+        disabled={disabled}
+        invalid={invalid}
+        warning={warning}
+        rows={4}
+        classNames={{ root: styles['styled-textarea'] }}
+      />
+    </SimplePage>
+  );
+}
diff --git a/pages/textarea/style-v2.scss b/pages/textarea/style-v2.scss
new file mode 100644
index 0000000000..905ee359f8
--- /dev/null
+++ b/pages/textarea/style-v2.scss
@@ -0,0 +1,22 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../app/themes/style-v2-palette' as palette;
+
+.styled-textarea {
+  --awsui-style-input-background: #{palette.$surface-alt};
+  --awsui-style-input-background-focus: #{palette.$surface};
+  --awsui-style-input-border-color: #{palette.$accent};
+  --awsui-style-input-border-color-focus: #{palette.$accent-hover};
+  --awsui-style-input-color: #{palette.$text};
+  --awsui-style-input-placeholder-color: #{palette.$accent};
+  --awsui-style-input-border-radius: 16px;
+  --awsui-style-input-border-width: 3px;
+  --awsui-style-transition-duration: #{palette.$transition-duration};
+
+  &:hover {
+    --awsui-style-input-border-color: #{palette.$accent-hover};
+  }
+}
diff --git a/pages/toggle/style-v2.page.tsx b/pages/toggle/style-v2.page.tsx
new file mode 100644
index 0000000000..f966d049b1
--- /dev/null
+++ b/pages/toggle/style-v2.page.tsx
@@ -0,0 +1,43 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { useState } from 'react';
+
+import { Checkbox, SpaceBetween, Toggle } from '~components';
+
+import { SimplePage } from '../app/templates';
+
+import styles from './style-v2.scss';
+
+export default function ToggleStyleV2() {
+  const [notifications, setNotifications] = useState(true);
+  const [disabled, setDisabled] = useState(false);
+  const [readOnly, setReadOnly] = useState(false);
+
+  return (
+    <SimplePage
+      title="Toggle with Style API v2"
+      screenshotArea={{}}
+      settings={
+        <SpaceBetween size="xs">
+          <Checkbox checked={disabled} onChange={({ detail }) => setDisabled(detail.checked)}>
+            disabled
+          </Checkbox>
+          <Checkbox checked={readOnly} onChange={({ detail }) => setReadOnly(detail.checked)}>
+            readOnly
+          </Checkbox>
+        </SpaceBetween>
+      }
+    >
+      <Toggle
+        classNames={{ root: styles['toggle-success'] }}
+        checked={notifications}
+        disabled={disabled}
+        readOnly={readOnly}
+        onChange={({ detail }) => setNotifications(detail.checked)}
+      >
+        Enable notifications
+      </Toggle>
+    </SimplePage>
+  );
+}
diff --git a/pages/toggle/style-v2.scss b/pages/toggle/style-v2.scss
new file mode 100644
index 0000000000..5b97fdc0c2
--- /dev/null
+++ b/pages/toggle/style-v2.scss
@@ -0,0 +1,27 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../app/themes/style-v2-palette' as palette;
+
+@mixin toggle-theme($checked-bg, $hover-bg) {
+  --awsui-style-toggle-background-default: #{palette.$border};
+  --awsui-style-toggle-background-checked: #{$checked-bg};
+  --awsui-style-toggle-background-disabled: #{palette.$control-bg-disabled};
+  --awsui-style-toggle-handle-default: #{palette.$control-bg};
+  --awsui-style-toggle-handle-checked: #{palette.$control-bg};
+  --awsui-style-toggle-handle-disabled: #{palette.$control-foreground-disabled};
+  --awsui-style-color-text-label: #{palette.$text};
+  --awsui-style-color-text-label-disabled: #{palette.$text-disabled};
+  --awsui-style-toggle-border-radius: 4px;
+  --awsui-style-transition-duration: 200ms;
+
+  &:hover {
+    --awsui-style-toggle-background-default: #{$hover-bg};
+  }
+}
+
+.toggle-success {
+  @include toggle-theme($checked-bg: palette.$success, $hover-bg: palette.$text-muted);
+}
diff --git a/pages/token/style-v2.page.tsx b/pages/token/style-v2.page.tsx
new file mode 100644
index 0000000000..b762904c18
--- /dev/null
+++ b/pages/token/style-v2.page.tsx
@@ -0,0 +1,41 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { useState } from 'react';
+
+import { TokenGroup, TokenGroupProps } from '~components';
+
+import { SimplePage } from '../app/templates';
+
+import styles from './style-v2.scss';
+
+const initialTokens: TokenGroupProps.Item[] = [
+  { label: 'us-east-1' },
+  { label: 'eu-west-1' },
+  { label: 'ap-southeast-1' },
+  { label: 'us-west-2' },
+];
+
+export default function StyleV2TokenPage() {
+  const [pillTokens, setPillTokens] = useState<TokenGroupProps.Item[]>(initialTokens);
+  const [outlineTokens, setOutlineTokens] = useState<TokenGroupProps.Item[]>([
+    { label: 'Production' },
+    { label: 'Staging' },
+    { label: 'Development' },
+  ]);
+  return (
+    <SimplePage title="Token with Style API v2" screenshotArea={{}}>
+      <TokenGroup
+        items={pillTokens}
+        onDismiss={({ detail }) => setPillTokens(items => items.filter((_, i) => i !== detail.itemIndex))}
+        classNames={{ root: styles['token-pill'] }}
+      />
+
+      <TokenGroup
+        items={outlineTokens}
+        onDismiss={({ detail }) => setOutlineTokens(items => items.filter((_, i) => i !== detail.itemIndex))}
+        classNames={{ root: styles['token-outline'] }}
+      />
+    </SimplePage>
+  );
+}
diff --git a/pages/token/style-v2.scss b/pages/token/style-v2.scss
new file mode 100644
index 0000000000..7e847c96d2
--- /dev/null
+++ b/pages/token/style-v2.scss
@@ -0,0 +1,24 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../app/themes/style-v2-palette' as palette;
+
+.token-pill {
+  --awsui-style-token-background-default: #{palette.$accent};
+  --awsui-style-token-border-color-default: #{palette.$accent};
+  --awsui-style-token-border-radius: 99px;
+  --awsui-style-token-color-default: #{palette.$text-on-accent};
+  --awsui-style-token-dismiss-color-default: #{palette.$text-on-accent};
+  --awsui-style-token-dismiss-color-hover: #{palette.$text-on-accent};
+}
+
+.token-outline {
+  --awsui-style-token-background-default: transparent;
+  --awsui-style-token-border-color-default: #{palette.$accent};
+  --awsui-style-token-border-radius: 4px;
+  --awsui-style-token-color-default: #{palette.$accent};
+  --awsui-style-token-dismiss-color-default: #{palette.$accent};
+  --awsui-style-token-dismiss-color-hover: #{palette.$accent-hover};
+}
\ No newline at end of file
diff --git a/pages/top-navigation/style-v2.page.tsx b/pages/top-navigation/style-v2.page.tsx
new file mode 100644
index 0000000000..c53e206545
--- /dev/null
+++ b/pages/top-navigation/style-v2.page.tsx
@@ -0,0 +1,84 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { useState } from 'react';
+
+import { Checkbox, Input, TopNavigation } from '~components';
+
+import { SimplePage } from '../app/templates';
+import logo from './logos/simple-logo.svg';
+
+import styles from './style-v2.scss';
+
+export default function TopNavigationStyleV2Page() {
+  const [useCustom, setUseCustom] = useState(true);
+  const [searchValue, setSearchValue] = useState('');
+  return (
+    <SimplePage
+      title="Top Navigation with Style API v2"
+      screenshotArea={{}}
+      settings={
+        <Checkbox checked={useCustom} onChange={({ detail }) => setUseCustom(detail.checked)}>
+          Custom styling
+        </Checkbox>
+      }
+    >
+      <TopNavigation
+        identity={{ title: 'CloudApp', href: '#', logo: { src: logo, alt: 'Logo' } }}
+        search={
+          <Input
+            type="search"
+            placeholder="Search resources..."
+            value={searchValue}
+            onChange={({ detail }) => setSearchValue(detail.value)}
+            classNames={{ root: styles['search-input'] }}
+          />
+        }
+        utilities={[
+          {
+            type: 'button',
+            iconName: 'notification',
+            ariaLabel: 'Notifications',
+            disableUtilityCollapse: true,
+          },
+          {
+            type: 'button',
+            text: 'Settings',
+            iconName: 'settings',
+            href: '#',
+          },
+          {
+            type: 'menu-dropdown',
+            text: 'Jane Doe',
+            description: 'jane.doe@example.com',
+            iconName: 'user-profile',
+            items: [
+              { id: 'profile', text: 'Profile' },
+              { id: 'preferences', text: 'Preferences' },
+              { id: 'signout', text: 'Sign out' },
+            ],
+          },
+        ]}
+        classNames={
+          useCustom
+            ? {
+                root: styles['styled-nav'],
+                utility: ({ utility }) => {
+                  if (utility.iconName === 'notification') {
+                    return styles['utility-notification'];
+                  }
+                  if (utility.text === 'Settings') {
+                    return styles['utility-settings'];
+                  }
+                  if (utility.type === 'menu-dropdown') {
+                    return styles['utility-profile'];
+                  }
+                  return '';
+                },
+              }
+            : undefined
+        }
+      />
+    </SimplePage>
+  );
+}
diff --git a/pages/top-navigation/style-v2.scss b/pages/top-navigation/style-v2.scss
new file mode 100644
index 0000000000..a1390fbdaa
--- /dev/null
+++ b/pages/top-navigation/style-v2.scss
@@ -0,0 +1,53 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../app/themes/style-v2-palette' as palette;
+
+// Subtle, themed hover for items on the pink bar. A soft pink tint in light
+// mode, a dark pink in dark mode — different from the white/dark default text
+// while keeping sufficient contrast against the bar in both modes.
+$util-hover: light-dark(hsl(330, 100%, 90%), hsl(330, 70%, 20%));
+
+// The utilities dropdown menu renders on a dark surface in both color modes,
+// so menu items use fixed light colors for contrast.
+$menu-item: hsl(330, 85%, 82%);
+$menu-item-highlight-bg: hsl(330, 65%, 48%);
+
+.styled-nav {
+  --awsui-style-top-navigation-background: #{palette.$accent};
+  // CloudApp identity title.
+  --awsui-style-top-navigation-title-color: #{palette.$text-on-accent};
+  --awsui-style-top-navigation-title-color-hover: #{$util-hover};
+}
+
+// Search input — themed focus that stays visible against the pink bar.
+.search-input {
+  --awsui-style-input-border-color-focus: #{palette.$accent};
+  --awsui-style-input-focus-ring-shadow: 0 0 0 2px #{palette.$text-on-accent};
+  --awsui-style-button-color-default: #{palette.$accent};
+  --awsui-style-button-color-hover: #{palette.$accent-active};
+}
+
+.utility-notification {
+  // A button utility without `primary-button` variant renders as a link.
+  --awsui-style-link-color-default: #{palette.$text-on-accent};
+  --awsui-style-link-color-hover: #{$util-hover};
+}
+
+.utility-settings {
+  --awsui-style-link-color-default: #{palette.$text-on-accent};
+  --awsui-style-link-color-hover: #{$util-hover};
+}
+
+.utility-profile {
+  // Jane Doe trigger — subtle text-color hover/open, no inverse pill.
+  --awsui-style-menu-trigger-color: #{palette.$text-on-accent};
+  --awsui-style-menu-trigger-color-hover: #{$util-hover};
+  --awsui-style-menu-trigger-color-active: #{$util-hover};
+  // Menu items on the dark dropdown surface.
+  --awsui-style-dropdown-item-color: #{$menu-item};
+  --awsui-style-dropdown-item-color-highlighted: #{hsl(0, 0%, 100%)};
+  --awsui-style-dropdown-item-background-hover: #{$menu-item-highlight-bg};
+}
diff --git a/src/action-card/interfaces.ts b/src/action-card/interfaces.ts
index a6aae2dc54..c759af68b2 100644
--- a/src/action-card/interfaces.ts
+++ b/src/action-card/interfaces.ts
@@ -81,9 +81,21 @@ export interface ActionCardProps extends BaseComponentProps {
    * @awsuiSystem core
    */
   nativeButtonAttributes?: NativeAttributes<React.ButtonHTMLAttributes<HTMLButtonElement>>;
+
+  /**
+   * An object that maps the action card's slots to CSS class names for custom styling.
+   * Use these classes to scope `--awsui-style-*` custom properties.
+   * * `root` - The action card's root element.
+   * @awsuiSystem core
+   */
+  classNames?: ActionCardProps.ClassNames;
 }
 
 export namespace ActionCardProps {
+  export interface ClassNames {
+    root?: string;
+  }
+
   // eslint-disable-next-line @typescript-eslint/no-empty-object-type
   export interface ClickDetail {}
 
diff --git a/src/action-card/internal.tsx b/src/action-card/internal.tsx
index 88f18f301f..5d59af3058 100644
--- a/src/action-card/internal.tsx
+++ b/src/action-card/internal.tsx
@@ -35,6 +35,7 @@ const InternalActionCard = React.forwardRef(
       variant,
       nativeButtonAttributes,
       __internalRootRef,
+      classNames,
       ...rest
     }: InternalActionCardProps,
     ref: React.Ref<ActionCardProps.Ref>
@@ -198,7 +199,8 @@ const InternalActionCard = React.forwardRef(
           !!icon && styles['has-icon'],
           !!icon && styles['icon-align-end'],
           !!icon && styles[`icon-vertical-align-${iconVerticalAlignment}`],
-          baseProps.className
+          baseProps.className,
+          classNames?.root
         )}
         aria-disabled={disabled || undefined}
       >
diff --git a/src/action-card/mixins.scss b/src/action-card/mixins.scss
index 976a59ebee..5c244ac938 100644
--- a/src/action-card/mixins.scss
+++ b/src/action-card/mixins.scss
@@ -7,6 +7,8 @@
 @use '../internal/styles/tokens' as awsui;
 @use './constants' as constants;
 
+/* stylelint-disable custom-property-pattern */
+
 $variant-border-radius: (
   'embedded': awsui.$border-radius-action-card-embedded,
   'default': awsui.$border-radius-action-card-default,
@@ -31,7 +33,7 @@ $variant-padding-inline: (
 
 @mixin state-border-radius($variant: 'default', $state: 'default') {
   $token: map.get($variant-border-radius, $variant);
-  @include border-radius-all($token);
+  @include border-radius-all(var(--awsui-style-action-card-border-radius, #{$token}));
 }
 
 @mixin state-border-radius-all-variants($state: 'default') {
@@ -48,7 +50,10 @@ $variant-padding-inline: (
 @mixin apply-state-styles($state) {
   $s: map.get(constants.$states, $state);
 
-  background-color: map.get($s, 'background');
+  background-color: var(
+    --awsui-style-action-card-background-#{$state},
+    var(--awsui-style-action-card-background, #{map.get($s, 'background')})
+  );
   box-shadow: map.get($s, 'box-shadow');
   color: map.get($s, 'text-color');
 
@@ -57,13 +62,19 @@ $variant-padding-inline: (
   }
 
   &:after {
-    border-color: map.get($s, 'border-color');
+    border-color: var(
+      --awsui-style-action-card-border-color-#{$state},
+      var(--awsui-style-action-card-border-color, #{map.get($s, 'border-color')})
+    );
     border-block-width: map.get($s, 'border-width');
     border-inline-width: map.get($s, 'border-width');
   }
 
   > .icon,
   > .inner-card > .header-row > .icon {
-    color: map.get($s, 'icon-color');
+    color: var(
+      --awsui-style-action-card-icon-color-#{$state},
+      var(--awsui-style-action-card-icon-color, #{map.get($s, 'icon-color')})
+    );
   }
 }
diff --git a/src/action-card/styles.scss b/src/action-card/styles.scss
index a82ba9944d..3d3d742a72 100644
--- a/src/action-card/styles.scss
+++ b/src/action-card/styles.scss
@@ -12,6 +12,8 @@
 @use './mixins' as mixins;
 @use './motion';
 
+/* stylelint-disable custom-property-pattern */
+
 .header {
   &-inner {
     @include styles.font-heading-s;
@@ -51,7 +53,7 @@
 .icon {
   flex-shrink: 0;
   display: flex;
-  color: map.get(constants.$states, 'default', 'icon-color');
+  color: var(--awsui-style-action-card-icon-color, #{map.get(constants.$states, 'default', 'icon-color')});
   pointer-events: none;
 }
 
@@ -108,7 +110,7 @@
   text-align: start;
   display: flex;
   $default-state: map.get(constants.$states, 'default');
-  background: map.get($default-state, 'background');
+  background: var(--awsui-style-action-card-background, #{map.get($default-state, 'background')});
   box-shadow: map.get($default-state, 'box-shadow');
   color: map.get($default-state, 'text-color');
   padding-inline: 0;
@@ -120,8 +122,10 @@
     @include styles.base-pseudo-element;
 
     box-shadow: none;
-    border-block: solid map.get($default-state, 'border-width') map.get($default-state, 'border-color');
-    border-inline: solid map.get($default-state, 'border-width') map.get($default-state, 'border-color');
+    border-block: solid map.get($default-state, 'border-width')
+      var(--awsui-style-action-card-border-color, #{map.get($default-state, 'border-color')});
+    border-inline: solid map.get($default-state, 'border-width')
+      var(--awsui-style-action-card-border-color, #{map.get($default-state, 'border-color')});
   }
 
   &.variant-default,
diff --git a/src/alert/interfaces.ts b/src/alert/interfaces.ts
index 50d1bdbc4f..fcb7c51173 100644
--- a/src/alert/interfaces.ts
+++ b/src/alert/interfaces.ts
@@ -77,6 +77,12 @@ export namespace AlertProps {
       };
     };
   }
+
+  export interface ClassNames {
+    root?: string;
+    dismissButton?: string;
+  }
+
   export interface PersistenceConfig {
     uniqueKey: string;
     crossServicePersistence?: boolean;
@@ -107,6 +113,12 @@ export interface AlertProps extends BaseComponentProps {
    * An `onDismiss` event is fired when a user clicks the button.
    */
   dismissible?: boolean;
+  /**
+   * Specifies a class name applied to the dismiss button wrapper.
+   * Use to scope CSS custom properties for styling the dismiss button.
+   * @deprecated Use `classNames.dismissButton` instead.
+   */
+  dismissClassName?: string;
   /**
    * Adds an aria-label to the dismiss button.
    * @i18n
@@ -162,6 +174,14 @@ export interface AlertProps extends BaseComponentProps {
    * @awsuiSystem core
    */
   style?: AlertProps.Style;
+  /**
+   * An object that maps the alert's slots to CSS class names for custom styling.
+   * Use these classes to scope `--awsui-style-*` custom properties.
+   * * `root` - The alert's root element.
+   * * `dismissButton` - The dismiss button wrapper.
+   * @awsuiSystem core
+   */
+  classNames?: AlertProps.ClassNames;
   /**
    * Config to persist dismiss state for dismissable Alert
    * persistenceConfig contains:
diff --git a/src/alert/internal.tsx b/src/alert/internal.tsx
index 31c78b0f6d..bef22dca24 100644
--- a/src/alert/internal.tsx
+++ b/src/alert/internal.tsx
@@ -53,6 +53,8 @@ const InternalAlert = React.forwardRef(
       i18nStrings,
       visible = true,
       dismissible,
+      dismissClassName,
+      classNames,
       children,
       header,
       buttonText,
@@ -171,6 +173,7 @@ const InternalAlert = React.forwardRef(
         className={clsx(
           styles.root,
           { [styles.hidden]: !visible, [styles['initial-hidden']]: initialHidden },
+          classNames?.root,
           baseProps.className
         )}
         ref={containerRef}
@@ -240,7 +243,7 @@ const InternalAlert = React.forwardRef(
               </div>
               {dismissible && (
                 <div
-                  className={styles.dismiss}
+                  className={clsx(styles.dismiss, dismissClassName, classNames?.dismissButton)}
                   {...getAnalyticsMetadataAttribute({
                     action: 'dismiss',
                   } as Partial<GeneratedAnalyticsMetadataAlertDismiss>)}
diff --git a/src/alert/styles.scss b/src/alert/styles.scss
index c0c7d11f99..3fdc9a597d 100644
--- a/src/alert/styles.scss
+++ b/src/alert/styles.scss
@@ -12,6 +12,8 @@
 
 @use './motion';
 
+/* stylelint-disable custom-property-pattern */
+
 .root {
   @include styles.styles-reset;
   @include styles.text-flex-wrapping;
@@ -29,19 +31,26 @@
   flex-direction: row;
   border-block-start: awsui.$border-width-alert-block-start solid;
   border-block-end: awsui.$border-width-alert-block-end solid;
-  border-inline-start: awsui.$border-width-alert-inline-start solid;
+  border-inline-start: var(--awsui-style-alert-border-width, #{awsui.$border-width-alert-inline-start}) solid;
   border-inline-end: awsui.$border-width-alert-inline-end solid;
-  border-start-start-radius: awsui.$border-radius-alert;
-  border-start-end-radius: awsui.$border-radius-alert;
-  border-end-start-radius: awsui.$border-radius-alert;
-  border-end-end-radius: awsui.$border-radius-alert;
+  border-start-start-radius: var(--awsui-style-alert-border-radius, #{awsui.$border-radius-alert});
+  border-start-end-radius: var(--awsui-style-alert-border-radius, #{awsui.$border-radius-alert});
+  border-end-start-radius: var(--awsui-style-alert-border-radius, #{awsui.$border-radius-alert});
+  border-end-end-radius: var(--awsui-style-alert-border-radius, #{awsui.$border-radius-alert});
   padding-block: awsui.$space-alert-vertical;
   padding-inline: awsui.$space-alert-horizontal;
   background-color: awsui.$color-background-container-content;
+  color: var(--awsui-style-alert-color, inherit);
 
   #{custom-props.$alertFocusRingBoxShadow}: 0 0 0
-    var(#{custom-props.$alertFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
-    var(#{custom-props.$alertFocusRingBorderColor}, awsui.$color-border-item-focused);
+    var(
+      --awsui-style-alert-focus-ring-border-width,
+      var(#{custom-props.$alertFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
+    )
+    var(
+      --awsui-style-alert-focus-ring-border-color,
+      var(#{custom-props.$alertFocusRingBorderColor}, awsui.$color-border-item-focused)
+    );
 }
 
 .alert-wrapper {
@@ -87,7 +96,10 @@
   @include focus-visible.when-visible {
     @include styles.focus-highlight(
       $gutter: awsui.$space-button-focus-outline-gutter,
-      $border-radius: var(#{custom-props.$alertFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),
+      $border-radius: var(
+          --awsui-style-alert-focus-ring-border-radius,
+          var(#{custom-props.$alertFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring)
+        ),
       $box-shadow: var(#{custom-props.$alertFocusRingBoxShadow})
     );
   }
@@ -159,10 +171,13 @@ $_text-colors: (
 
 @each $type in map.keys($_text-colors) {
   .type-#{$type} {
-    border-color: #{map.get($_border-colors, $type)};
-    background-color: #{map.get($_background-colors, $type)};
+    border-color: var(--awsui-style-alert-border-color, #{map.get($_border-colors, $type)});
+    background-color: var(--awsui-style-alert-background, #{map.get($_background-colors, $type)});
     > .alert-wrapper > .alert-focus-wrapper > .icon {
-      color: var(#{custom-props.$alertIconColor}, #{map.get($_text-colors, $type)});
+      color: var(
+        --awsui-style-alert-icon-color,
+        var(#{custom-props.$alertIconColor}, #{map.get($_text-colors, $type)})
+      );
     }
   }
 }
diff --git a/src/autosuggest/autosuggest-option.tsx b/src/autosuggest/autosuggest-option.tsx
index 7b08d7c1b4..e531ab447b 100644
--- a/src/autosuggest/autosuggest-option.tsx
+++ b/src/autosuggest/autosuggest-option.tsx
@@ -1,6 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
+import clsx from 'clsx';
 
 import { BaseComponentProps, getBaseProps } from '../internal/base-component';
 import OptionComponent from '../internal/components/option';
@@ -178,7 +179,7 @@ const AutosuggestOption = (
     <SelectableItem
       {...baseProps}
       disableContentStyling={!!renderResult}
-      className={styles.option}
+      className={clsx(styles.option, (option.option as OptionDefinition)?.className)}
       ariaSelected={current}
       highlighted={highlighted}
       disabled={option.disabled}
diff --git a/src/autosuggest/interfaces.ts b/src/autosuggest/interfaces.ts
index c77115024e..d19273f5bb 100644
--- a/src/autosuggest/interfaces.ts
+++ b/src/autosuggest/interfaces.ts
@@ -165,6 +165,16 @@ export interface AutosuggestProps
    * @awsuiSystem core
    */
   style?: AutosuggestProps.Style;
+
+  /**
+   * An object that maps the autosuggest's slots to CSS class names for custom styling.
+   * Use these classes to scope `--awsui-style-*` custom properties.
+   * * `root` - The autosuggest's root element.
+   * * `options` - Each option item. A string is applied to all; a function receiving
+   *   `{ option }` enables per-option customization.
+   * @awsuiSystem core
+   */
+  classNames?: AutosuggestProps.ClassNames;
 }
 
 export namespace AutosuggestProps {
@@ -174,6 +184,15 @@ export namespace AutosuggestProps {
   export type Option = OptionDefinition;
   export type Options = ReadonlyArray<Option | OptionGroup>;
   export type EnteredTextLabel = (value: string) => string;
+
+  export interface ClassNames {
+    root?: string;
+    /**
+     * Each option item. A string is applied to all; a function receiving
+     * `{ option }` enables per-option customization.
+     */
+    options?: string | ((args: { option: AutosuggestProps.Option }) => string | undefined);
+  }
   export interface OptionGroup extends Option {
     label?: string;
     options: ReadonlyArray<Option>;
diff --git a/src/autosuggest/internal.tsx b/src/autosuggest/internal.tsx
index add7bec288..298292317a 100644
--- a/src/autosuggest/internal.tsx
+++ b/src/autosuggest/internal.tsx
@@ -1,7 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { Ref, useImperativeHandle, useRef } from 'react';
+import React, { Ref, useImperativeHandle, useMemo, useRef } from 'react';
 import clsx from 'clsx';
 
 import { useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';
@@ -61,6 +61,7 @@ const InternalAutosuggest = React.forwardRef((props: InternalAutosuggestProps, r
     renderHighlightedAriaLive,
     style,
     renderOption,
+    classNames,
     __internalRootRef,
     ...restProps
   } = props;
@@ -68,6 +69,26 @@ const InternalAutosuggest = React.forwardRef((props: InternalAutosuggestProps, r
   checkControlled('Autosuggest', 'value', value, 'onChange', onChange);
   checkOptionValueField('Autosuggest', 'options', options);
 
+  const resolvedOptions = useMemo(() => {
+    if (!classNames?.options) {
+      return options || [];
+    }
+    const resolve = (option: AutosuggestProps.Option): string | undefined =>
+      typeof classNames.options === 'function' ? classNames.options({ option }) : classNames.options;
+    const key: keyof AutosuggestProps.OptionGroup = 'options';
+    return (options || []).map(entry =>
+      key in entry
+        ? {
+            ...entry,
+            options: (entry as AutosuggestProps.OptionGroup).options.map(opt => ({
+              ...opt,
+              className: resolve(opt) ?? opt.className,
+            })),
+          }
+        : { ...entry, className: resolve(entry) ?? entry.className }
+    );
+  }, [options, classNames]);
+
   const autosuggestInputRef = useRef<AutosuggestInputRef>(null);
   useImperativeHandle(
     ref,
@@ -88,7 +109,7 @@ const InternalAutosuggest = React.forwardRef((props: InternalAutosuggestProps, r
   }
 
   const [autosuggestItemsState, autosuggestItemsHandlers] = useAutosuggestItems({
-    options: options || [],
+    options: resolvedOptions,
     filterValue: value,
     filterText: value,
     filteringType,
@@ -205,7 +226,7 @@ const InternalAutosuggest = React.forwardRef((props: InternalAutosuggestProps, r
   return (
     <AutosuggestInput
       {...restProps}
-      className={clsx(styles.root, restProps.className)}
+      className={clsx(styles.root, restProps.className, classNames?.root)}
       ref={autosuggestInputRef}
       __internalRootRef={__internalRootRef}
       value={value}
diff --git a/src/badge/index.tsx b/src/badge/index.tsx
index 357f199ca4..1d09d6f7f2 100644
--- a/src/badge/index.tsx
+++ b/src/badge/index.tsx
@@ -15,11 +15,11 @@ import styles from './styles.css.js';
 
 export { BadgeProps };
 
-export default function Badge({ color = 'grey', children, style, nativeAttributes, ...rest }: BadgeProps) {
+export default function Badge({ color = 'grey', children, style, classNames, nativeAttributes, ...rest }: BadgeProps) {
   const { __internalRootRef } = useBaseComponent('Badge', { props: { color } });
   const baseProps = getBaseProps(rest);
 
-  const className = clsx(baseProps.className, styles.badge, styles[`badge-color-${color}`]);
+  const className = clsx(baseProps.className, classNames?.root, styles.badge, styles[`badge-color-${color}`]);
 
   return (
     <WithNativeAttributes
diff --git a/src/badge/interfaces.ts b/src/badge/interfaces.ts
index 8e65378e6a..aeb07c0b36 100644
--- a/src/badge/interfaces.ts
+++ b/src/badge/interfaces.ts
@@ -35,6 +35,14 @@ export interface BadgeProps extends BaseComponentProps {
    */
   style?: BadgeProps.Style;
 
+  /**
+   * An object that maps the badge's slots to CSS class names for custom styling.
+   * Use these classes to scope `--awsui-style-*` custom properties.
+   * * `root` - The badge's root element.
+   * @awsuiSystem core
+   */
+  classNames?: BadgeProps.ClassNames;
+
   /**
    * Attributes to add to the native element.
    * Some attributes will be automatically combined with internal attribute values:
@@ -49,6 +57,10 @@ export interface BadgeProps extends BaseComponentProps {
 }
 
 export namespace BadgeProps {
+  export interface ClassNames {
+    root?: string;
+  }
+
   export interface Style {
     root?: {
       background?: string;
diff --git a/src/badge/styles.scss b/src/badge/styles.scss
index 8d9c9c20cc..6ab2bd2616 100644
--- a/src/badge/styles.scss
+++ b/src/badge/styles.scss
@@ -6,61 +6,64 @@
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
 
+/* stylelint-disable custom-property-pattern */
+
 .badge {
   @include styles.styles-reset;
 
   @include styles.font-body-s;
   line-height: awsui.$line-height-body-m;
   display: inline-block;
-  border-start-start-radius: awsui.$border-radius-badge;
-  border-start-end-radius: awsui.$border-radius-badge;
-  border-end-start-radius: awsui.$border-radius-badge;
-  border-end-end-radius: awsui.$border-radius-badge;
+  border-start-start-radius: var(--awsui-style-badge-border-radius, #{awsui.$border-radius-badge});
+  border-start-end-radius: var(--awsui-style-badge-border-radius, #{awsui.$border-radius-badge});
+  border-end-start-radius: var(--awsui-style-badge-border-radius, #{awsui.$border-radius-badge});
+  border-end-end-radius: var(--awsui-style-badge-border-radius, #{awsui.$border-radius-badge});
   border-block-style: solid;
   border-inline-style: solid;
-  border-width: 0;
-  padding-block: 0;
-  padding-inline: awsui.$space-xs;
-  color: awsui.$color-text-notification-default;
+  border-width: var(--awsui-style-badge-border-width, 0);
+  border-color: var(--awsui-style-badge-border-color, transparent);
+  padding-block: var(--awsui-style-badge-padding-block, 0);
+  padding-inline: var(--awsui-style-badge-padding-inline, #{awsui.$space-xs});
+  color: var(--awsui-style-badge-color, #{awsui.$color-text-notification-default});
 
   &.badge-color-grey {
-    background-color: awsui.$color-background-notification-grey;
+    background-color: var(--awsui-style-badge-background, #{awsui.$color-background-notification-grey});
   }
 
   &.badge-color-green {
-    background-color: awsui.$color-background-notification-green;
+    background-color: var(--awsui-style-badge-background, #{awsui.$color-background-notification-green});
   }
 
   &.badge-color-blue {
-    background-color: awsui.$color-background-notification-blue;
+    background-color: var(--awsui-style-badge-background, #{awsui.$color-background-notification-blue});
   }
 
   &.badge-color-red {
-    background-color: awsui.$color-background-notification-red;
+    background-color: var(--awsui-style-badge-background, #{awsui.$color-background-notification-red});
   }
 
   &.badge-color-severity-critical {
-    background-color: awsui.$color-background-notification-severity-critical;
-    color: awsui.$color-text-notification-severity-critical;
+    background-color: var(--awsui-style-badge-background, #{awsui.$color-background-notification-severity-critical});
+    color: var(--awsui-style-badge-color, #{awsui.$color-text-notification-severity-critical});
   }
 
   &.badge-color-severity-high {
-    background-color: awsui.$color-background-notification-severity-high;
-    color: awsui.$color-text-notification-severity-high;
+    background-color: var(--awsui-style-badge-background, #{awsui.$color-background-notification-severity-high});
+    color: var(--awsui-style-badge-color, #{awsui.$color-text-notification-severity-high});
   }
 
   &.badge-color-severity-medium {
-    background-color: awsui.$color-background-notification-severity-medium;
-    color: awsui.$color-text-notification-severity-medium;
+    background-color: var(--awsui-style-badge-background, #{awsui.$color-background-notification-severity-medium});
+    color: var(--awsui-style-badge-color, #{awsui.$color-text-notification-severity-medium});
   }
 
   &.badge-color-severity-low {
-    background-color: awsui.$color-background-notification-severity-low;
-    color: awsui.$color-text-notification-severity-low;
+    background-color: var(--awsui-style-badge-background, #{awsui.$color-background-notification-severity-low});
+    color: var(--awsui-style-badge-color, #{awsui.$color-text-notification-severity-low});
   }
 
   &.badge-color-severity-neutral {
-    background-color: awsui.$color-background-notification-severity-neutral;
-    color: awsui.$color-text-notification-severity-neutral;
+    background-color: var(--awsui-style-badge-background, #{awsui.$color-background-notification-severity-neutral});
+    color: var(--awsui-style-badge-color, #{awsui.$color-text-notification-severity-neutral});
   }
 }
diff --git a/src/button-dropdown/item-element/styles.scss b/src/button-dropdown/item-element/styles.scss
index 00f45477ad..8a5e4bb84d 100644
--- a/src/button-dropdown/item-element/styles.scss
+++ b/src/button-dropdown/item-element/styles.scss
@@ -6,6 +6,8 @@
 @use '../../internal/styles' as styles;
 @use '../../internal/styles/tokens' as awsui;
 
+/* stylelint-disable custom-property-pattern */
+
 .item-element {
   position: relative;
   z-index: 1;
@@ -14,7 +16,7 @@
   list-style: none;
   padding-block: 0;
   padding-inline: 0;
-  color: awsui.$color-text-dropdown-item-default;
+  color: var(--awsui-style-dropdown-item-color, #{awsui.$color-text-dropdown-item-default});
   margin-block-start: calc(-1 * #{awsui.$border-width-dropdown});
   cursor: pointer;
 
@@ -35,10 +37,10 @@
     border-block-end: awsui.$border-item-width solid awsui.$color-border-dropdown-group;
   }
   &.highlighted {
-    color: awsui.$color-text-dropdown-item-highlighted;
+    color: var(--awsui-style-dropdown-item-color-highlighted, #{awsui.$color-text-dropdown-item-highlighted});
     z-index: 2;
 
-    background-color: awsui.$color-background-dropdown-item-hover;
+    background-color: var(--awsui-style-dropdown-item-background-hover, #{awsui.$color-background-dropdown-item-hover});
     border-color: awsui.$color-border-dropdown-item-hover;
     border-start-start-radius: awsui.$border-radius-item;
     border-start-end-radius: awsui.$border-radius-item;
diff --git a/src/button-group/index.tsx b/src/button-group/index.tsx
index 11049e083d..9a294fe5f2 100644
--- a/src/button-group/index.tsx
+++ b/src/button-group/index.tsx
@@ -17,7 +17,7 @@ export { ButtonGroupProps };
 
 const ButtonGroup = React.forwardRef(
   (
-    { variant, dropdownExpandToViewport = false, style, ...rest }: ButtonGroupProps,
+    { variant, dropdownExpandToViewport = false, style, classNames, ...rest }: ButtonGroupProps,
     ref: React.Ref<ButtonGroupProps.Ref>
   ) => {
     const baseProps = getBaseProps(rest);
@@ -52,6 +52,7 @@ const ButtonGroup = React.forwardRef(
         variant={variant}
         dropdownExpandToViewport={dropdownExpandToViewport}
         style={style}
+        classNames={classNames}
         {...getAnalyticsMetadataAttribute({ component: componentMetadata })}
       />
     );
diff --git a/src/button-group/interfaces.ts b/src/button-group/interfaces.ts
index 26adb23551..2baacfe376 100644
--- a/src/button-group/interfaces.ts
+++ b/src/button-group/interfaces.ts
@@ -105,6 +105,14 @@ export interface ButtonGroupProps extends BaseComponentProps {
    * @awsuiSystem core
    */
   style?: ButtonGroupProps.Style;
+
+  /**
+   * An object that maps the button group's slots to CSS class names for custom styling.
+   * Use these classes to scope `--awsui-style-*` custom properties.
+   * * `root` - The button group's root element.
+   * @awsuiSystem core
+   */
+  classNames?: ButtonGroupProps.ClassNames;
 }
 
 export interface InternalIconButton extends ButtonGroupProps.IconButton {
@@ -228,6 +236,11 @@ export namespace ButtonGroupProps {
      */
     focus(itemId: string): void;
   }
+
+  export interface ClassNames {
+    root?: string;
+  }
+
   export interface Style {
     root?: {
       background?: string;
diff --git a/src/button-group/internal.tsx b/src/button-group/internal.tsx
index 1c5543af3b..fb1fda1545 100644
--- a/src/button-group/internal.tsx
+++ b/src/button-group/internal.tsx
@@ -24,6 +24,7 @@ const InternalButtonGroup = forwardRef(
       ariaLabel,
       dropdownExpandToViewport,
       style,
+      classNames,
       __internalRootRef,
       ...props
     }: InternalButtonGroupProps,
@@ -44,7 +45,7 @@ const InternalButtonGroup = forwardRef(
       <div
         {...baseProps}
         ref={__internalRootRef}
-        className={clsx(styles.root, testUtilStyles['button-group'], baseProps.className)}
+        className={clsx(styles.root, testUtilStyles['button-group'], baseProps.className, classNames?.root)}
         role="toolbar"
         aria-label={ariaLabel}
         style={stylePropertiesAndVariables}
diff --git a/src/button-group/styles.scss b/src/button-group/styles.scss
index 4d7f566f48..3fda2fb6eb 100644
--- a/src/button-group/styles.scss
+++ b/src/button-group/styles.scss
@@ -5,6 +5,7 @@
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles' as styles;
 
+/* stylelint-disable custom-property-pattern */
 .root {
   @include styles.styles-reset;
 
@@ -12,7 +13,21 @@
   flex-direction: row;
   flex-wrap: wrap;
   gap: awsui.$space-scaled-xs;
+  inline-size: var(--awsui-style-button-group-inline-size, auto);
+  padding-block: var(--awsui-style-button-group-padding-block, 0);
+  padding-inline: var(--awsui-style-button-group-padding-inline, 0);
+  background-color: var(--awsui-style-button-group-background, transparent);
+  border-block: var(--awsui-style-button-group-border-width, 1px) solid
+    var(--awsui-style-button-group-border-color, transparent);
+  border-inline: var(--awsui-style-button-group-border-width, 1px) solid
+    var(--awsui-style-button-group-border-color, transparent);
+  border-start-start-radius: var(--awsui-style-button-group-border-radius, 0);
+  border-start-end-radius: var(--awsui-style-button-group-border-radius, 0);
+  border-end-start-radius: var(--awsui-style-button-group-border-radius, 0);
+  border-end-end-radius: var(--awsui-style-button-group-border-radius, 0);
+  box-shadow: var(--awsui-style-button-group-box-shadow, none);
 }
+/* stylelint-enable custom-property-pattern */
 
 .item-wrapper {
   display: inline-block;
diff --git a/src/button/index.tsx b/src/button/index.tsx
index 408a0db0e8..919a2fb313 100644
--- a/src/button/index.tsx
+++ b/src/button/index.tsx
@@ -45,6 +45,7 @@ const Button = React.forwardRef(
       style,
       nativeButtonAttributes,
       nativeAnchorAttributes,
+      classNames,
       ...props
     }: ButtonProps,
     ref: React.Ref<ButtonProps.Ref>
@@ -89,6 +90,7 @@ const Button = React.forwardRef(
         style={style}
         nativeButtonAttributes={nativeButtonAttributes}
         nativeAnchorAttributes={nativeAnchorAttributes}
+        classNames={classNames}
         __injectAnalyticsComponentMetadata={true}
       >
         {children}
diff --git a/src/button/interfaces.ts b/src/button/interfaces.ts
index d89686e680..08025c148b 100644
--- a/src/button/interfaces.ts
+++ b/src/button/interfaces.ts
@@ -219,6 +219,14 @@ export interface ButtonProps extends BaseComponentProps, BaseButtonProps {
    * @awsuiSystem core
    */
   style?: ButtonProps.Style;
+
+  /**
+   * An object that maps the button's slots to CSS class names for custom styling.
+   * Use these classes to scope `--awsui-style-*` custom properties.
+   * * `root` - The button's root element.
+   * @awsuiSystem core
+   */
+  classNames?: ButtonProps.ClassNames;
 }
 
 export namespace ButtonProps {
@@ -244,6 +252,10 @@ export namespace ButtonProps {
     focus(options?: FocusOptions): void;
   }
 
+  export interface ClassNames {
+    root?: string;
+  }
+
   export interface Style {
     root?: {
       background?: {
diff --git a/src/button/internal.tsx b/src/button/internal.tsx
index 8ef126bf7b..0f9aef6a58 100644
--- a/src/button/internal.tsx
+++ b/src/button/internal.tsx
@@ -100,6 +100,7 @@ export const InternalButton = React.forwardRef(
       __emitPerformanceMarks = true,
       __skipNativeAttributesWarnings,
       analyticsAction = 'click',
+      classNames,
       ...props
     }: InternalButtonProps,
     ref: React.Ref<ButtonProps.Ref>
@@ -179,7 +180,7 @@ export const InternalButton = React.forwardRef(
       buttonContext.onClick({ variant });
     };
 
-    const buttonClass = clsx(props.className, styles.button, styles[`variant-${variant}`], {
+    const buttonClass = clsx(props.className, classNames?.root, styles.button, styles[`variant-${variant}`], {
       [styles.disabled]: isNotInteractive,
       [styles['disabled-with-reason']]: isDisabledWithReason,
       [styles['button-no-wrap']]: !wrapText,
diff --git a/src/button/styles.scss b/src/button/styles.scss
index bacfdb3c0b..3ec26ca2b9 100644
--- a/src/button/styles.scss
+++ b/src/button/styles.scss
@@ -11,13 +11,24 @@
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use './constants' as constants;
 
+/* stylelint-disable custom-property-pattern */
+
 @mixin adjust-for-variant($variant) {
-  background: var(#{custom-props.$styleBackgroundDefault}, map.get($variant, 'default-background'));
-  color: var(#{custom-props.$styleColorDefault}, map.get($variant, 'default-color'));
-  border-color: var(#{custom-props.$styleBorderColorDefault}, #{map.get($variant, 'default-border-color')});
-  box-shadow: var(#{custom-props.$styleBoxShadowDefault});
-  border-block-width: map.get($variant, 'border-width');
-  border-inline-width: map.get($variant, 'border-width');
+  background: var(
+    --awsui-style-button-background-default,
+    var(#{custom-props.$styleBackgroundDefault}, #{map.get($variant, 'default-background')})
+  );
+  color: var(
+    --awsui-style-button-color-default,
+    var(#{custom-props.$styleColorDefault}, #{map.get($variant, 'default-color')})
+  );
+  border-color: var(
+    --awsui-style-button-border-color-default,
+    var(#{custom-props.$styleBorderColorDefault}, #{map.get($variant, 'default-border-color')})
+  );
+  box-shadow: var(--awsui-style-button-box-shadow-default, var(#{custom-props.$styleBoxShadowDefault}));
+  border-block-width: var(--awsui-style-button-border-width, #{map.get($variant, 'border-width')});
+  border-inline-width: var(--awsui-style-button-border-width, #{map.get($variant, 'border-width')});
   position: relative;
   text-decoration: none;
   padding-block: map.get($variant, 'padding');
@@ -25,25 +36,52 @@
   font-weight: map.get($variant, 'font-weight');
 
   &:hover {
-    background: var(#{custom-props.$styleBackgroundHover}, map.get($variant, 'hover-background'));
-    border-color: var(#{custom-props.$styleBorderColorHover}, map.get($variant, 'hover-border-color'));
-    color: var(#{custom-props.$styleColorHover}, map.get($variant, 'hover-color'));
-    box-shadow: var(#{custom-props.$styleBoxShadowHover});
+    background: var(
+      --awsui-style-button-background-hover,
+      var(#{custom-props.$styleBackgroundHover}, #{map.get($variant, 'hover-background')})
+    );
+    border-color: var(
+      --awsui-style-button-border-color-hover,
+      var(#{custom-props.$styleBorderColorHover}, #{map.get($variant, 'hover-border-color')})
+    );
+    color: var(
+      --awsui-style-button-color-hover,
+      var(#{custom-props.$styleColorHover}, #{map.get($variant, 'hover-color')})
+    );
+    box-shadow: var(--awsui-style-button-box-shadow-hover, var(#{custom-props.$styleBoxShadowHover}));
     text-decoration: none;
   }
 
   &:active {
-    background: var(#{custom-props.$styleBackgroundActive}, map.get($variant, 'active-background'));
-    border-color: var(#{custom-props.$styleBorderColorActive}, map.get($variant, 'active-border-color'));
-    color: var(#{custom-props.$styleColorActive}, map.get($variant, 'active-color'));
-    box-shadow: var(#{custom-props.$styleBoxShadowActive});
+    background: var(
+      --awsui-style-button-background-active,
+      var(#{custom-props.$styleBackgroundActive}, #{map.get($variant, 'active-background')})
+    );
+    border-color: var(
+      --awsui-style-button-border-color-active,
+      var(#{custom-props.$styleBorderColorActive}, #{map.get($variant, 'active-border-color')})
+    );
+    color: var(
+      --awsui-style-button-color-active,
+      var(#{custom-props.$styleColorActive}, #{map.get($variant, 'active-color')})
+    );
+    box-shadow: var(--awsui-style-button-box-shadow-active, var(#{custom-props.$styleBoxShadowActive}));
   }
 
   &.disabled {
-    background: var(#{custom-props.$styleBackgroundDisabled}, map.get($variant, 'disabled-background'));
-    border-color: var(#{custom-props.$styleBorderColorDisabled}, map.get($variant, 'disabled-border-color'));
-    color: var(#{custom-props.$styleColorDisabled}, map.get($variant, 'disabled-color'));
-    box-shadow: var(#{custom-props.$styleBoxShadowDisabled});
+    background: var(
+      --awsui-style-button-background-disabled,
+      var(#{custom-props.$styleBackgroundDisabled}, map.get($variant, 'disabled-background'))
+    );
+    border-color: var(
+      --awsui-style-button-border-color-disabled,
+      var(#{custom-props.$styleBorderColorDisabled}, map.get($variant, 'disabled-border-color'))
+    );
+    color: var(
+      --awsui-style-button-color-disabled,
+      var(#{custom-props.$styleColorDisabled}, map.get($variant, 'disabled-color'))
+    );
+    box-shadow: var(--awsui-style-button-box-shadow-disabled, var(#{custom-props.$styleBoxShadowDisabled}));
     text-decoration: none;
     cursor: auto;
   }
@@ -57,21 +95,28 @@
   @include styles.styles-reset;
   @include styles.text-wrapping;
   @include styles.font-button;
+  font-family: var(--awsui-style-button-font-family, #{awsui.$font-family-base});
   letter-spacing: awsui.$font-button-letter-spacing;
-  border-start-start-radius: awsui.$border-radius-button;
-  border-start-end-radius: awsui.$border-radius-button;
-  border-end-start-radius: awsui.$border-radius-button;
-  border-end-end-radius: awsui.$border-radius-button;
+  border-start-start-radius: var(--awsui-style-button-border-radius, #{awsui.$border-radius-button});
+  border-start-end-radius: var(--awsui-style-button-border-radius, #{awsui.$border-radius-button});
+  border-end-start-radius: var(--awsui-style-button-border-radius, #{awsui.$border-radius-button});
+  border-end-end-radius: var(--awsui-style-button-border-radius, #{awsui.$border-radius-button});
   border-block: awsui.$border-width-button solid;
   border-inline: awsui.$border-width-button solid;
-  padding-block: awsui.$space-button-vertical;
-  padding-inline: awsui.$space-button-horizontal;
+  padding-block: var(--awsui-style-button-padding-block, #{awsui.$space-button-vertical});
+  padding-inline: var(--awsui-style-button-padding-inline, #{awsui.$space-button-horizontal});
   display: inline-block; // for <a> as a button
   text-decoration: none;
   cursor: pointer;
   #{custom-props.$styleFocusRingBoxShadow}: 0 0 0
-    var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
-    var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused);
+    var(
+      --awsui-style-button-focus-ring-border-width,
+      var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
+    )
+    var(
+      --awsui-style-button-focus-ring-color,
+      var(#{custom-props.$styleFocusRingBorderColor}, #{awsui.$color-border-item-focused})
+    );
 
   @each $variant in map.keys(constants.$variants) {
     &.variant-#{$variant} {
@@ -87,7 +132,10 @@
   @include focus-visible.when-visible {
     @include styles.focus-highlight(
       $gutter: awsui.$space-button-focus-outline-gutter,
-      $border-radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),
+      $border-radius: var(
+          --awsui-style-button-focus-ring-border-radius,
+          var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring)
+        ),
       $box-shadow: var(#{custom-props.$styleFocusRingBoxShadow})
     );
 
@@ -100,8 +148,8 @@
           'horizontal': awsui.$space-button-focus-outline-gutter,
         ),
         $border-radius: var(
-            #{custom-props.$styleFocusRingBorderRadius},
-            awsui.$border-radius-control-default-focus-ring
+            --awsui-style-button-focus-ring-border-radius,
+            var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring)
           ),
         $box-shadow: var(#{custom-props.$styleFocusRingBoxShadow})
       );
@@ -114,8 +162,8 @@
   }
 
   &.button-no-text {
-    padding-inline-start: awsui.$space-button-icon-only-horizontal;
-    padding-inline-end: awsui.$space-button-icon-only-horizontal;
+    padding-inline-start: var(--awsui-style-button-icon-padding, #{awsui.$space-button-icon-only-horizontal});
+    padding-inline-end: var(--awsui-style-button-icon-padding, #{awsui.$space-button-icon-only-horizontal});
   }
 
   &.button-no-wrap {
@@ -133,7 +181,7 @@
   &.variant-flashbar-icon {
     // Icon has vertical padding, but no horizontal, we need to conpensate this
     // in order to have equal height and width
-    padding-inline: awsui.$space-xxs;
+    padding-inline: var(--awsui-style-button-icon-padding, #{awsui.$space-xxs});
   }
 
   &.variant-modal-dismiss {
diff --git a/src/calendar/styles.scss b/src/calendar/styles.scss
index b787a2ed5d..9acbd5e0d8 100644
--- a/src/calendar/styles.scss
+++ b/src/calendar/styles.scss
@@ -11,6 +11,8 @@
 
 @use './calendar' as calendar;
 
+/* stylelint-disable custom-property-pattern */
+
 .root {
   /* used in test-utils */
 }
@@ -106,11 +108,13 @@
         &:hover {
           @include item-border-radius;
           color: awsui.$color-text-calendar-date-hover;
-          background-color: calendar.$grid-hover-background-color;
+          background-color: var(--awsui-style-calendar-hover-background, #{calendar.$grid-hover-background-color});
           &:not(.calendar-date-selected) {
             &::after {
-              border-block: awsui.$border-item-width solid calendar.$grid-hover-border-color;
-              border-inline: awsui.$border-item-width solid calendar.$grid-hover-border-color;
+              border-block: awsui.$border-item-width solid
+                var(--awsui-style-calendar-hover-border-color, #{calendar.$grid-hover-border-color});
+              border-inline: awsui.$border-item-width solid
+                var(--awsui-style-calendar-hover-border-color, #{calendar.$grid-hover-border-color});
             }
           }
         }
@@ -119,7 +123,7 @@
 
     &-current {
       @include item-border-radius;
-      background-color: calendar.$grid-current-date-background-color;
+      background-color: var(--awsui-style-calendar-current-background, #{calendar.$grid-current-date-background-color});
       font-weight: styles.$font-weight-bold;
     }
 
@@ -182,13 +186,15 @@
       }
       &::after {
         @include item-border-radius;
-        background-color: calendar.$grid-selected-background-color;
-        border-block: awsui.$border-item-width solid calendar.$grid-selected-border-color;
-        border-inline: awsui.$border-item-width solid calendar.$grid-selected-border-color;
+        background-color: var(--awsui-style-calendar-selected-background, #{calendar.$grid-selected-background-color});
+        border-block: awsui.$border-item-width solid
+          var(--awsui-style-calendar-selected-background, #{calendar.$grid-selected-border-color});
+        border-inline: awsui.$border-item-width solid
+          var(--awsui-style-calendar-selected-background, #{calendar.$grid-selected-border-color});
       }
       > .date-inner {
         z-index: 2;
-        color: calendar.$grid-selected-text-color;
+        color: var(--awsui-style-calendar-selected-color, #{calendar.$grid-selected-text-color});
         position: relative;
       }
     }
diff --git a/src/checkbox/interfaces.ts b/src/checkbox/interfaces.ts
index f4619a30e9..043f5a6a31 100644
--- a/src/checkbox/interfaces.ts
+++ b/src/checkbox/interfaces.ts
@@ -40,6 +40,14 @@ export interface CheckboxProps extends BaseCheckboxProps {
    */
   style?: CheckboxProps.Style;
 
+  /**
+   * An object that maps the checkbox's slots to CSS class names for custom styling.
+   * Use these classes to scope `--awsui-style-*` custom properties.
+   * * `root` - The checkbox's root element.
+   * @awsuiSystem core
+   */
+  classNames?: CheckboxProps.ClassNames;
+
   /**
    * Attributes to add to the native `input` element.
    * Some attributes will be automatically combined with internal attribute values:
@@ -61,6 +69,10 @@ export namespace CheckboxProps {
     focus(): void;
   }
 
+  export interface ClassNames {
+    root?: string;
+  }
+
   export interface ChangeDetail {
     checked: boolean;
     indeterminate: false;
diff --git a/src/checkbox/internal.tsx b/src/checkbox/internal.tsx
index 93d70d4299..a159e5b1d5 100644
--- a/src/checkbox/internal.tsx
+++ b/src/checkbox/internal.tsx
@@ -49,6 +49,7 @@ const InternalCheckbox = React.forwardRef<CheckboxProps.Ref, InternalProps>(
       showOutline,
       ariaControls,
       style,
+      classNames,
       nativeInputAttributes,
       __internalRootRef,
       __injectAnalyticsComponentMetadata = false,
@@ -86,7 +87,7 @@ const InternalCheckbox = React.forwardRef<CheckboxProps.Ref, InternalProps>(
     return (
       <AbstractSwitch
         {...baseProps}
-        className={clsx(styles.root, baseProps.className)}
+        className={clsx(styles.root, baseProps.className, classNames?.root)}
         controlClassName={styles['checkbox-control']}
         outlineClassName={styles.outline}
         controlId={controlId}
diff --git a/src/checkbox/styles.scss b/src/checkbox/styles.scss
index e7fd0029d9..ef53d13ac0 100644
--- a/src/checkbox/styles.scss
+++ b/src/checkbox/styles.scss
@@ -21,14 +21,25 @@ $checkbox-size: awsui.$size-control;
   @include styles.make-control-size($checkbox-size);
 }
 
+/* stylelint-disable custom-property-pattern */
+
 .outline {
   #{custom-props.$styleFocusRingBoxShadow}: 0 0 0
-    var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
-    var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused);
+    var(
+      --awsui-style-focus-ring-border-width,
+      var(#{custom-props.$styleFocusRingBorderWidth}, #{foundation.$box-shadow-focused-width})
+    )
+    var(
+      --awsui-style-focus-ring-border-color,
+      var(#{custom-props.$styleFocusRingBorderColor}, #{awsui.$color-border-item-focused})
+    );
 
   @include styles.focus-highlight(
     $gutter: 2px,
-    $border-radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),
+    $border-radius: var(
+        --awsui-style-focus-ring-border-radius,
+        var(#{custom-props.$styleFocusRingBorderRadius}, #{awsui.$border-radius-control-default-focus-ring})
+      ),
     $box-shadow: var(#{custom-props.$styleFocusRingBoxShadow})
   );
 }
diff --git a/src/container/interfaces.ts b/src/container/interfaces.ts
index 97f36ff5ca..8f90b622b5 100644
--- a/src/container/interfaces.ts
+++ b/src/container/interfaces.ts
@@ -87,12 +87,24 @@ export interface ContainerProps extends BaseComponentProps {
    * @awsuiSystem core
    */
   style?: ContainerProps.Style;
+
+  /**
+   * An object that maps the container's slots to CSS class names for custom styling.
+   * Use these classes to scope `--awsui-style-*` custom properties.
+   * * `root` - The container's root element.
+   * @awsuiSystem core
+   */
+  classNames?: ContainerProps.ClassNames;
 }
 
 export namespace ContainerProps {
   export interface AnalyticsMetadata {
     instanceIdentifier?: string;
   }
+
+  export interface ClassNames {
+    root?: string;
+  }
   export interface Media {
     /**
      * Use this slot to render your media element. We support `img`, `video`, `picture`, and `iframe` elements.
diff --git a/src/container/internal.tsx b/src/container/internal.tsx
index fd69f793ae..015882ede0 100644
--- a/src/container/internal.tsx
+++ b/src/container/internal.tsx
@@ -76,6 +76,7 @@ export default function InternalContainer({
   fitHeight,
   media,
   style,
+  classNames,
   __stickyOffset,
   __mobileStickyOffset,
   __stickyHeader = false,
@@ -124,6 +125,7 @@ export default function InternalContainer({
       {...__funnelSubStepProps}
       className={clsx(
         baseProps.className,
+        classNames?.root,
         styles.root,
         styles[`variant-${variant}`],
         fitHeight && styles['fit-height'],
diff --git a/src/container/styles.scss b/src/container/styles.scss
index c37e6a61aa..cb2e7e96a4 100644
--- a/src/container/styles.scss
+++ b/src/container/styles.scss
@@ -7,10 +7,13 @@
 @use '../internal/styles' as styles;
 @use './shared' as shared;
 
+/* stylelint-disable custom-property-pattern */
+
 .root {
   @include styles.styles-reset;
   word-wrap: break-word;
   position: relative;
+  color: var(--awsui-style-container-color, inherit);
 
   &.fit-height {
     display: flex;
@@ -24,7 +27,7 @@
   &.variant {
     &-default,
     &-stacked {
-      background-color: awsui.$color-background-container-content;
+      background-color: var(--awsui-style-container-background, #{awsui.$color-background-container-content});
       // Border and shadows are applied with ::before and ::after elements (respectively)
       @include styles.container-style;
     }
@@ -125,9 +128,9 @@
 }
 
 .header {
-  background-color: awsui.$color-background-container-header;
-  border-start-start-radius: awsui.$border-radius-container;
-  border-start-end-radius: awsui.$border-radius-container;
+  background-color: var(--awsui-style-container-header-background, #{awsui.$color-background-container-header});
+  border-start-start-radius: var(--awsui-style-container-border-radius, #{awsui.$border-radius-container});
+  border-start-end-radius: var(--awsui-style-container-border-radius, #{awsui.$border-radius-container});
   &.header-full-page {
     background-color: awsui.$color-background-layout-main;
   }
@@ -183,13 +186,13 @@
   }
 
   &.with-paddings {
-    padding-block-start: awsui.$space-container-header-top;
-    padding-block-end: awsui.$space-container-header-bottom;
-    padding-inline: awsui.$space-container-horizontal;
+    padding-block-start: var(--awsui-style-container-header-padding-block, #{awsui.$space-container-header-top});
+    padding-block-end: var(--awsui-style-container-header-padding-block, #{awsui.$space-container-header-bottom});
+    padding-inline: var(--awsui-style-container-header-padding-inline, #{awsui.$space-container-horizontal});
 
     &.header-variant-cards {
-      padding-block: awsui.$space-container-header-top;
-      padding-inline: awsui.$space-container-horizontal;
+      padding-block: var(--awsui-style-container-header-padding-block, #{awsui.$space-container-header-top});
+      padding-inline: var(--awsui-style-container-header-padding-inline, #{awsui.$space-container-horizontal});
     }
   }
 
@@ -264,8 +267,8 @@
   flex: 1;
 
   &.with-paddings {
-    padding-block: awsui.$space-scaled-l;
-    padding-inline: awsui.$space-container-horizontal;
+    padding-block: var(--awsui-style-container-content-padding-block, #{awsui.$space-scaled-l});
+    padding-inline: var(--awsui-style-container-content-padding-inline, #{awsui.$space-container-horizontal});
 
     &.with-header {
       padding-block-start: awsui.$space-container-content-top;
@@ -275,11 +278,12 @@
 
 .footer {
   &.with-paddings {
-    padding-block: awsui.$space-scaled-s;
-    padding-inline: awsui.$space-container-horizontal;
+    padding-block: var(--awsui-style-container-footer-padding-block, #{awsui.$space-scaled-s});
+    padding-inline: var(--awsui-style-container-footer-padding-inline, #{awsui.$space-container-horizontal});
   }
 
   &.with-divider {
-    @include shared.divider;
+    border-block-start: var(--awsui-style-container-footer-divider-border-width, #{awsui.$border-divider-section-width})
+      solid var(--awsui-style-container-footer-divider-border-color, #{awsui.$color-border-divider-default});
   }
 }
diff --git a/src/date-picker/index.tsx b/src/date-picker/index.tsx
index 3b8c920ed7..a94231b33a 100644
--- a/src/date-picker/index.tsx
+++ b/src/date-picker/index.tsx
@@ -64,6 +64,7 @@ const DatePicker = React.forwardRef(
       granularity = 'day',
       format = 'slashed',
       inputFormat = 'slashed',
+      classNames,
       ...restProps
     }: DatePickerProps,
     ref: Ref<DatePickerProps.Ref>
@@ -178,7 +179,7 @@ const DatePicker = React.forwardRef(
       </div>
     );
 
-    baseProps.className = clsx(baseProps.className, styles.root, styles['date-picker-container']);
+    baseProps.className = clsx(baseProps.className, classNames?.root, styles.root, styles['date-picker-container']);
 
     const referrerId = useUniqueId();
 
diff --git a/src/date-picker/interfaces.ts b/src/date-picker/interfaces.ts
index c236907ff0..ee99ea7a1e 100644
--- a/src/date-picker/interfaces.ts
+++ b/src/date-picker/interfaces.ts
@@ -106,6 +106,14 @@ export interface DatePickerProps
    * @i18n
    */
   i18nStrings?: DatePickerProps.I18nStrings;
+
+  /**
+   * An object that maps the date picker's slots to CSS class names for custom styling.
+   * Use these classes to scope `--awsui-style-*` custom properties.
+   * * `root` - The date picker's root element.
+   * @awsuiSystem core
+   */
+  classNames?: DatePickerProps.ClassNames;
 }
 
 export namespace DatePickerProps {
@@ -116,6 +124,10 @@ export namespace DatePickerProps {
     value: string;
   }
 
+  export interface ClassNames {
+    root?: string;
+  }
+
   export interface IsDateEnabledFunction {
     (date: Date): boolean;
   }
diff --git a/src/drawer/implementation.tsx b/src/drawer/implementation.tsx
index 27a8e49230..63ab1f53fa 100644
--- a/src/drawer/implementation.tsx
+++ b/src/drawer/implementation.tsx
@@ -56,6 +56,7 @@ export function DrawerImplementation({
   ariaLabelledby,
   focusBehavior,
   role,
+  classNames,
   ...restProps
 }: DrawerInternalProps) {
   const containerRef = useRef<HTMLDivElement>(null);
@@ -156,7 +157,13 @@ export function DrawerImplementation({
   const drawer = (
     <div
       {...baseProps}
-      className={clsx(baseProps.className, styles.root, testClasses.root, open === false && styles.hidden)}
+      className={clsx(
+        baseProps.className,
+        classNames?.root,
+        styles.root,
+        testClasses.root,
+        open === false && styles.hidden
+      )}
       ref={__internalRootRef}
     >
       {showBackdrop && (
@@ -190,11 +197,11 @@ export function DrawerImplementation({
                 </div>
               )}
               {closeAction && !hideCloseAction && (
-                <div className={styles['close-action']}>
+                <div className={clsx(styles['close-action'], classNames?.closeButton ?? closeAction.className)}>
                   <InternalButton
                     variant="icon"
                     iconName="close"
-                    {...closeAction}
+                    {...{ ...closeAction, className: undefined }}
                     className={testClasses['close-action']}
                     onClick={() => handleClose('close-action')}
                   />
diff --git a/src/drawer/interfaces.ts b/src/drawer/interfaces.ts
index c57b6e33aa..0a6a3a4470 100644
--- a/src/drawer/interfaces.ts
+++ b/src/drawer/interfaces.ts
@@ -202,6 +202,15 @@ export interface DrawerProps extends BaseComponentProps {
    * Do not use this property when using drawers inside app layout.
    */
   focusBehavior?: DrawerProps.FocusBehavior;
+
+  /**
+   * An object that maps the drawer's slots to CSS class names for custom styling.
+   * Use these classes to scope `--awsui-style-*` custom properties.
+   * * `root` - The drawer's root element.
+   * * `closeButton` - The drawer's close action element.
+   * @awsuiSystem core
+   */
+  classNames?: DrawerProps.ClassNames;
 }
 
 export namespace DrawerProps {
@@ -233,6 +242,10 @@ export namespace DrawerProps {
     iconUrl?: string;
     iconSvg?: React.ReactNode;
     iconAlt?: string;
+    /**
+     * @deprecated Use `classNames.closeButton` instead.
+     */
+    className?: string;
   }
 
   export interface CloseDetail {
@@ -245,6 +258,11 @@ export namespace DrawerProps {
     returnFocus?: () => void;
   }
 
+  export interface ClassNames {
+    root?: string;
+    closeButton?: string;
+  }
+
   export interface Ref {
     /**
      * Moves focus to the drawer element. Use when `focusBehavior.autoFocus`
diff --git a/src/drawer/styles.scss b/src/drawer/styles.scss
index 8ba35672bd..501103ddfc 100644
--- a/src/drawer/styles.scss
+++ b/src/drawer/styles.scss
@@ -8,6 +8,8 @@
 @use '../app-layout/constants.scss' as constants;
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
+/* stylelint-disable custom-property-pattern */
+
 @mixin desktop-only {
   @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
     @content;
@@ -21,7 +23,7 @@
 .drawer {
   @include styles.styles-reset;
   word-wrap: break-word;
-  background-color: awsui.$color-background-drawer;
+  background-color: var(--awsui-style-drawer-background, #{awsui.$color-background-drawer});
 
   &.has-close-action {
     position: relative;
@@ -31,16 +33,20 @@
   &.position-sticky,
   &.position-fixed {
     &.placement-end {
-      border-inline-start: awsui.$border-divider-section-width solid awsui.$color-border-panel-header;
+      border-inline-start: awsui.$border-divider-section-width solid
+        var(--awsui-style-drawer-border-color, #{awsui.$color-border-panel-header});
     }
     &.placement-start {
-      border-inline-end: awsui.$border-divider-section-width solid awsui.$color-border-panel-header;
+      border-inline-end: awsui.$border-divider-section-width solid
+        var(--awsui-style-drawer-border-color, #{awsui.$color-border-panel-header});
     }
     &.placement-top {
-      border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-panel-header;
+      border-block-end: awsui.$border-divider-section-width solid
+        var(--awsui-style-drawer-border-color, #{awsui.$color-border-panel-header});
     }
     &.placement-bottom {
-      border-block-start: awsui.$border-divider-section-width solid awsui.$color-border-panel-header;
+      border-block-start: awsui.$border-divider-section-width solid
+        var(--awsui-style-drawer-border-color, #{awsui.$color-border-panel-header});
     }
   }
 
@@ -70,6 +76,7 @@
   display: flex;
   justify-content: space-between;
   color: awsui.$color-text-heading-default;
+  background-color: var(--awsui-style-drawer-header-background, transparent);
   padding-block: awsui.$space-panel-header-vertical;
   // padding to make sure the header doesn't overlap with the close icon
   border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-panel-header;
@@ -133,7 +140,7 @@
 }
 
 .footer {
-  background-color: awsui.$color-background-container-content;
+  background-color: var(--awsui-style-drawer-footer-background, #{awsui.$color-background-container-content});
   border-block-start: awsui.$border-divider-section-width solid awsui.$color-border-panel-header;
   padding-block: awsui.$space-panel-content-top;
   padding-inline: awsui.$space-panel-side-left awsui.$space-panel-side-right;
@@ -161,7 +168,7 @@
 
 .backdrop {
   inset: 0;
-  background-color: awsui.$color-background-drawer-backdrop;
+  background-color: var(--awsui-style-drawer-backdrop-background, #{awsui.$color-background-drawer-backdrop});
 
   &.backdrop-fixed {
     position: fixed;
diff --git a/src/dropdown/styles.scss b/src/dropdown/styles.scss
index 29df42335e..dda5bf21c7 100644
--- a/src/dropdown/styles.scss
+++ b/src/dropdown/styles.scss
@@ -3,6 +3,8 @@
  SPDX-License-Identifier: Apache-2.0
 */
 
+/* stylelint-disable custom-property-pattern */
+
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
 @use './motion';
@@ -43,12 +45,21 @@
     @include styles.styles-reset;
     white-space: inherit;
     position: relative;
-    background-color: awsui.$color-background-dropdown-item-default;
+    background-color: var(--awsui-style-dropdown-background, awsui.$color-background-dropdown-item-default);
     outline: none;
     @include styles.dropdown-shadow(
-      $border-color: var(#{custom-props.$dropdownContentBorderColor}, #{awsui.$color-border-dropdown-container}),
-      $border-width: var(#{custom-props.$dropdownContentBorderWidth}, #{awsui.$border-width-popover}),
-      $border-radius: var(#{custom-props.$dropdownContentBorderRadius}, #{awsui.$border-radius-dropdown})
+      $border-color: var(
+          --awsui-style-dropdown-border-color,
+          var(#{custom-props.$dropdownContentBorderColor}, #{awsui.$color-border-dropdown-container})
+        ),
+      $border-width: var(
+          --awsui-style-dropdown-border-width,
+          var(#{custom-props.$dropdownContentBorderWidth}, #{awsui.$border-width-popover})
+        ),
+      $border-radius: var(
+          --awsui-style-dropdown-border-radius,
+          var(#{custom-props.$dropdownContentBorderRadius}, #{awsui.$border-radius-dropdown})
+        )
     );
 
     // Don't show dropdown border when there's no dropdown content
diff --git a/src/file-dropzone/interfaces.tsx b/src/file-dropzone/interfaces.tsx
index 70bd900e79..57f70e11d2 100644
--- a/src/file-dropzone/interfaces.tsx
+++ b/src/file-dropzone/interfaces.tsx
@@ -13,10 +13,22 @@ export interface FileDropzoneProps extends BaseComponentProps {
    * Children of the Dropzone.
    */
   children: React.ReactNode;
+
+  /**
+   * An object that maps the file dropzone's slots to CSS class names for custom styling.
+   * Use these classes to scope `--awsui-style-*` custom properties.
+   * * `root` - The file dropzone's root element.
+   * @awsuiSystem core
+   */
+  classNames?: FileDropzoneProps.ClassNames;
 }
 
 export namespace FileDropzoneProps {
   export interface ChangeDetail {
     value: File[];
   }
+
+  export interface ClassNames {
+    root?: string;
+  }
 }
diff --git a/src/file-dropzone/internal.tsx b/src/file-dropzone/internal.tsx
index a67f52651d..29e746e3e8 100644
--- a/src/file-dropzone/internal.tsx
+++ b/src/file-dropzone/internal.tsx
@@ -14,6 +14,7 @@ import styles from './styles.css.js';
 export default function InternalFileDropzone({
   onChange,
   children,
+  classNames,
   __internalRootRef,
   ...restProps
 }: FileDropzoneProps & InternalBaseComponentProps) {
@@ -48,7 +49,7 @@ export default function InternalFileDropzone({
     <div
       {...baseProps}
       ref={__internalRootRef}
-      className={clsx(baseProps.className, styles.root, {
+      className={clsx(baseProps.className, classNames?.root, styles.root, {
         [styles.hovered]: isDropzoneHovered,
       })}
       onDragOver={onDragOver}
diff --git a/src/file-dropzone/styles.scss b/src/file-dropzone/styles.scss
index 7918d2b59d..814f1c513a 100644
--- a/src/file-dropzone/styles.scss
+++ b/src/file-dropzone/styles.scss
@@ -6,18 +6,22 @@
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles' as styles;
 
+/* stylelint-disable custom-property-pattern */
+
 .root {
   padding-block: awsui.$space-static-l;
   padding-inline: awsui.$space-static-l;
-  border-start-start-radius: awsui.$border-radius-dropzone;
-  border-start-end-radius: awsui.$border-radius-dropzone;
-  border-end-start-radius: awsui.$border-radius-dropzone;
-  border-end-end-radius: awsui.$border-radius-dropzone;
+  border-start-start-radius: var(--awsui-style-file-dropzone-border-radius, #{awsui.$border-radius-dropzone});
+  border-start-end-radius: var(--awsui-style-file-dropzone-border-radius, #{awsui.$border-radius-dropzone});
+  border-end-start-radius: var(--awsui-style-file-dropzone-border-radius, #{awsui.$border-radius-dropzone});
+  border-end-end-radius: var(--awsui-style-file-dropzone-border-radius, #{awsui.$border-radius-dropzone});
   color: awsui.$color-dropzone-text-default;
-  background-color: awsui.$color-dropzone-background-default;
-  border-color: awsui.$color-dropzone-border-default;
-  border-block: 1px dashed awsui.$color-dropzone-border-default;
-  border-inline: 1px dashed awsui.$color-dropzone-border-default;
+  background-color: var(--awsui-style-file-dropzone-background, #{awsui.$color-dropzone-background-default});
+  border-color: var(--awsui-style-file-dropzone-border-color, #{awsui.$color-dropzone-border-default});
+  border-block: 1px var(--awsui-style-file-dropzone-border-style, dashed)
+    var(--awsui-style-file-dropzone-border-color, #{awsui.$color-dropzone-border-default});
+  border-inline: 1px var(--awsui-style-file-dropzone-border-style, dashed)
+    var(--awsui-style-file-dropzone-border-color, #{awsui.$color-dropzone-border-default});
 
   &.hovered {
     color: awsui.$color-dropzone-text-hover;
diff --git a/src/flashbar/collapsible-flashbar.tsx b/src/flashbar/collapsible-flashbar.tsx
index ef04cefedb..d29799b8a5 100644
--- a/src/flashbar/collapsible-flashbar.tsx
+++ b/src/flashbar/collapsible-flashbar.tsx
@@ -292,10 +292,6 @@ export default function CollapsibleFlashbar({ items, style, ...restProps }: Inte
               >
                 {showInnerContent(item) && (
                   <Flash
-                    className={clsx(
-                      animateFlash && styles['flash-with-motion'],
-                      isVisualRefresh && styles['flash-refresh']
-                    )}
                     key={getItemId(item)}
                     ref={(el: HTMLDivElement | null) => {
                       // Store the Flash element reference for focus management
@@ -314,6 +310,11 @@ export default function CollapsibleFlashbar({ items, style, ...restProps }: Inte
                     style={style}
                     onDismissed={handleFlashDismissed}
                     {...item}
+                    className={clsx(
+                      animateFlash && styles['flash-with-motion'],
+                      isVisualRefresh && styles['flash-refresh'],
+                      item.className
+                    )}
                   />
                 )}
               </li>
diff --git a/src/flashbar/collapsible.scss b/src/flashbar/collapsible.scss
index 1c0a0df6f6..d29e13bbc0 100644
--- a/src/flashbar/collapsible.scss
+++ b/src/flashbar/collapsible.scss
@@ -2,6 +2,7 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
+/* stylelint-disable custom-property-pattern */
 @use 'sass:map';
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
@@ -199,16 +200,25 @@ the grid layout will be:
 
 .stack > .notification-bar {
   @include styles.text-wrapping;
-  background: var(#{custom-props.$styleBackgroundDefault}, awsui.$color-background-notification-stack-bar);
-  border-color: var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-notification-stack-bar);
-  border-start-start-radius: awsui.$border-radius-button;
-  border-start-end-radius: awsui.$border-radius-button;
-  border-end-start-radius: awsui.$border-radius-button;
-  border-end-end-radius: awsui.$border-radius-button;
+  background: var(
+    --awsui-style-notification-bar-background-default,
+    var(#{custom-props.$styleBackgroundDefault}, awsui.$color-background-notification-stack-bar)
+  );
+  border-color: var(
+    --awsui-style-notification-bar-border-color-default,
+    var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-notification-stack-bar)
+  );
+  border-start-start-radius: var(--awsui-style-notification-bar-border-radius, #{awsui.$border-radius-button});
+  border-start-end-radius: var(--awsui-style-notification-bar-border-radius, #{awsui.$border-radius-button});
+  border-end-start-radius: var(--awsui-style-notification-bar-border-radius, #{awsui.$border-radius-button});
+  border-end-end-radius: var(--awsui-style-notification-bar-border-radius, #{awsui.$border-radius-button});
   border-block-style: solid;
   border-inline-style: solid;
   box-shadow: awsui.$shadow-panel-toggle;
-  color: var(#{custom-props.$styleColorDefault}, awsui.$color-text-notification-stack-bar);
+  color: var(
+    --awsui-style-notification-bar-color-default,
+    var(#{custom-props.$styleColorDefault}, awsui.$color-text-notification-stack-bar)
+  );
   cursor: pointer;
   display: flex;
   flex-direction: row;
@@ -262,28 +272,46 @@ the grid layout will be:
   }
 
   &:hover {
-    background: var(#{custom-props.$styleBackgroundHover}, awsui.$color-background-notification-stack-bar-hover);
-    border-color: var(#{custom-props.$styleBorderColorHover}, awsui.$color-background-notification-stack-bar-hover);
-    color: var(#{custom-props.$styleColorHover}, awsui.$color-text-notification-stack-bar);
+    background: var(
+      --awsui-style-notification-bar-background-hover,
+      var(#{custom-props.$styleBackgroundHover}, awsui.$color-background-notification-stack-bar-hover)
+    );
+    border-color: var(
+      --awsui-style-notification-bar-border-color-hover,
+      var(#{custom-props.$styleBorderColorHover}, awsui.$color-background-notification-stack-bar-hover)
+    );
+    color: var(
+      --awsui-style-notification-bar-color-hover,
+      var(#{custom-props.$styleColorHover}, awsui.$color-text-notification-stack-bar)
+    );
   }
 
   &:active {
-    background: var(#{custom-props.$styleBackgroundActive}, awsui.$color-background-notification-stack-bar-active);
-    border-color: var(#{custom-props.$styleBorderColorActive}, awsui.$color-background-notification-stack-bar);
-    color: var(#{custom-props.$styleColorActive}, awsui.$color-text-notification-stack-bar);
+    background: var(
+      --awsui-style-notification-bar-background-active,
+      var(#{custom-props.$styleBackgroundActive}, awsui.$color-background-notification-stack-bar-active)
+    );
+    border-color: var(
+      --awsui-style-notification-bar-border-color-active,
+      var(#{custom-props.$styleBorderColorActive}, awsui.$color-background-notification-stack-bar)
+    );
+    color: var(
+      --awsui-style-notification-bar-color-active,
+      var(#{custom-props.$styleColorActive}, awsui.$color-text-notification-stack-bar)
+    );
   }
 
   &.visual-refresh {
     $border-width: map.get($notification-bar-border-width, 'visual-refresh');
-    border-block-width: $border-width;
-    border-inline-width: $border-width;
+    border-block-width: var(--awsui-style-notification-bar-border-width, $border-width);
+    border-inline-width: var(--awsui-style-notification-bar-border-width, $border-width);
     padding-inline: awsui.$space-l;
   }
 
   &:not(.visual-refresh) {
     $border-width: map.get($notification-bar-border-width, 'classic');
-    border-block-width: $border-width;
-    border-inline-width: $border-width;
+    border-block-width: var(--awsui-style-notification-bar-border-width, $border-width);
+    border-inline-width: var(--awsui-style-notification-bar-border-width, $border-width);
     padding-inline: awsui.$space-s;
 
     &:focus {
@@ -303,8 +331,14 @@ the grid layout will be:
     border-inline: none;
     padding-block: 0;
     #{custom-props.$styleFocusRingBoxShadow}: 0 0 0
-      var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
-      var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused);
+      var(
+        --awsui-style-notification-bar-focus-ring-border-width,
+        var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
+      )
+      var(
+        --awsui-style-notification-bar-focus-ring-border-color,
+        var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused)
+      );
 
     > .icon {
       @include styles.with-motion {
@@ -323,8 +357,8 @@ the grid layout will be:
       @include styles.focus-highlight(
         $gutter: 0px,
         $border-radius: var(
-            #{custom-props.$styleFocusRingBorderRadius},
-            awsui.$border-radius-control-default-focus-ring
+            --awsui-style-notification-bar-focus-ring-border-radius,
+            var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring)
           ),
         $box-shadow: var(#{custom-props.$styleFocusRingBoxShadow})
       );
diff --git a/src/flashbar/common.tsx b/src/flashbar/common.tsx
index caf270bcf0..cf643250dd 100644
--- a/src/flashbar/common.tsx
+++ b/src/flashbar/common.tsx
@@ -1,6 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { useEffect, useMemo, useRef, useState } from 'react';
+import clsx from 'clsx';
 
 import { useMergeRefs, useReducedMotion, warnOnce } from '@cloudscape-design/component-toolkit/internal';
 
@@ -84,6 +85,7 @@ export function useFlashbar({
   // eslint-disable-next-line no-restricted-syntax -- Optional property existence check
   const allItemsHaveId = useMemo(() => items.every(item => 'id' in item), [items]);
   const baseProps = getBaseProps(restProps);
+  baseProps.className = clsx(baseProps.className, restProps.classNames?.root) || undefined;
   const ref = useRef<HTMLDivElement | null>(null);
   const flashRefs = useRef<Record<string | number, HTMLDivElement | null>>({});
   const mergedRef = useMergeRefs(ref, __internalRootRef);
diff --git a/src/flashbar/flash.tsx b/src/flashbar/flash.tsx
index 22a9ab794a..80f08826fe 100644
--- a/src/flashbar/flash.tsx
+++ b/src/flashbar/flash.tsx
@@ -54,11 +54,12 @@ function dismissButton(
   ref?: React.Ref<ButtonProps.Ref>,
   id?: string,
   onDismissed?: (id?: string, persistenceConfig?: FlashbarProps.PersistenceConfig) => void,
-  persistenceConfig?: FlashbarProps.PersistenceConfig
+  persistenceConfig?: FlashbarProps.PersistenceConfig,
+  dismissButtonClassName?: string
 ) {
   return (
     <div
-      className={styles['dismiss-button-wrapper']}
+      className={clsx(styles['dismiss-button-wrapper'], dismissButtonClassName)}
       {...getAnalyticsMetadataAttribute({ action: 'dismiss' } as Partial<GeneratedAnalyticsMetadataFlashbarDismiss>)}
     >
       <InternalButton
@@ -132,6 +133,7 @@ export const Flash = React.forwardRef(
       onButtonClick,
       onDismiss,
       className,
+      dismissButtonClassName,
       transitionState,
       ariaRole,
       i18nStrings,
@@ -290,7 +292,8 @@ export const Flash = React.forwardRef(
             dismissButtonRefObject,
             id,
             onDismissed,
-            persistenceConfig
+            persistenceConfig,
+            dismissButtonClassName
           )}
         {ariaRole === 'status' && (
           <InternalLiveRegion sources={[statusIconAriaLabel, headerRefObject, contentRefObject]} />
diff --git a/src/flashbar/implementation.tsx b/src/flashbar/implementation.tsx
index 9bf77cc624..367e84f9de 100644
--- a/src/flashbar/implementation.tsx
+++ b/src/flashbar/implementation.tsx
@@ -4,11 +4,33 @@ import React from 'react';
 
 import { createWidgetizedComponent } from '../internal/widgets';
 import CollapsibleFlashbar from './collapsible-flashbar';
-import { InternalFlashbarProps } from './interfaces';
+import { FlashbarProps, InternalFlashbarProps } from './interfaces';
 import NonCollapsibleFlashbar from './non-collapsible-flashbar';
 
-export function FlashbarImplementation(props: InternalFlashbarProps) {
-  if (props.stackItems) {
+function resolveSlot(
+  slot: string | ((args: { item: FlashbarProps.MessageDefinition }) => string) | undefined,
+  item: FlashbarProps.MessageDefinition,
+  fallback: string | undefined
+): string | undefined {
+  if (slot === undefined) {
+    return fallback;
+  }
+  return typeof slot === 'function' ? slot({ item }) : slot;
+}
+
+export function FlashbarImplementation({ items, classNames, ...rest }: InternalFlashbarProps) {
+  const resolvedItems =
+    classNames?.item !== undefined || classNames?.dismissButton !== undefined
+      ? items.map(item => ({
+          ...item,
+          className: resolveSlot(classNames.item, item, item.className),
+          dismissButtonClassName: resolveSlot(classNames.dismissButton, item, item.dismissButtonClassName),
+        }))
+      : items;
+
+  const props = { ...rest, items: resolvedItems, classNames };
+
+  if (rest.stackItems) {
     return <CollapsibleFlashbar {...props} />;
   } else {
     return <NonCollapsibleFlashbar {...props} />;
diff --git a/src/flashbar/interfaces.ts b/src/flashbar/interfaces.ts
index 42c368bed8..fdf7718ccb 100644
--- a/src/flashbar/interfaces.ts
+++ b/src/flashbar/interfaces.ts
@@ -24,6 +24,14 @@ export namespace FlashbarProps {
     onDismiss?: ButtonProps['onClick'];
     analyticsMetadata?: FlashbarProps.ItemAnalyticsMetadata;
     persistenceConfig?: FlashbarProps.PersistenceConfig;
+    /**
+     * @deprecated Use `classNames.item` instead.
+     */
+    className?: string;
+    /**
+     * @deprecated Use `classNames.dismissButton` instead.
+     */
+    dismissButtonClassName?: string;
   }
 
   export interface ItemAnalyticsMetadata {
@@ -153,6 +161,12 @@ export namespace FlashbarProps {
 
   export type Type = 'success' | 'warning' | 'info' | 'error' | 'in-progress';
   export type AriaRole = 'alert' | 'status';
+
+  export interface ClassNames {
+    root?: string;
+    item?: string | ((args: { item: FlashbarProps.MessageDefinition }) => string);
+    dismissButton?: string | ((args: { item: FlashbarProps.MessageDefinition }) => string);
+  }
 }
 
 export interface FlashbarProps extends BaseComponentProps {
@@ -222,6 +236,16 @@ export interface FlashbarProps extends BaseComponentProps {
    * @awsuiSystem core
    */
   style?: FlashbarProps.Style;
+
+  /**
+   * An object that maps the flashbar's slots to CSS class names for custom styling.
+   * Use these classes to scope `--awsui-style-*` custom properties.
+   * * `root` - The flashbar's root element.
+   * * `item` - Applied to each flash item. Can be a string or a function `(args: { item }) => string`.
+   * * `dismissButton` - Applied to each dismiss button wrapper. Can be a string or a function `(args: { item }) => string`.
+   * @awsuiSystem core
+   */
+  classNames?: FlashbarProps.ClassNames;
 }
 
 export type InternalFlashbarProps = FlashbarProps & InternalBaseComponentProps;
diff --git a/src/flashbar/non-collapsible-flashbar.tsx b/src/flashbar/non-collapsible-flashbar.tsx
index a1c1467c03..2220a66328 100644
--- a/src/flashbar/non-collapsible-flashbar.tsx
+++ b/src/flashbar/non-collapsible-flashbar.tsx
@@ -116,7 +116,6 @@ export default function NonCollapsibleFlashbar({ items, i18nStrings, style, ...r
   ) {
     return (
       <Flash
-        className={clsx(animateFlash && styles['flash-with-motion'], isVisualRefresh && styles['flash-refresh'])}
         key={key}
         ref={el => {
           flashRefs.current[key] = el;
@@ -132,6 +131,11 @@ export default function NonCollapsibleFlashbar({ items, i18nStrings, style, ...r
         style={style}
         onDismissed={handleFlashDismissed}
         {...item}
+        className={clsx(
+          animateFlash && styles['flash-with-motion'],
+          isVisualRefresh && styles['flash-refresh'],
+          item.className
+        )}
       />
     );
   }
diff --git a/src/flashbar/styles.scss b/src/flashbar/styles.scss
index d93b760a31..71c5da4936 100644
--- a/src/flashbar/styles.scss
+++ b/src/flashbar/styles.scss
@@ -25,6 +25,7 @@
   @include styles.styles-reset;
 }
 
+/* stylelint-disable custom-property-pattern */
 .flash {
   position: relative;
   display: flex;
@@ -32,18 +33,26 @@
   align-items: flex-start;
   padding-block: awsui.$space-flashbar-vertical;
   padding-inline: awsui.$space-flashbar-horizontal;
-  border-start-start-radius: awsui.$border-radius-flashbar;
-  border-start-end-radius: awsui.$border-radius-flashbar;
-  border-end-start-radius: awsui.$border-radius-flashbar;
-  border-end-end-radius: awsui.$border-radius-flashbar;
-  color: awsui.$color-text-notification-default;
+  border-start-start-radius: var(--awsui-style-flash-border-radius, #{awsui.$border-radius-flashbar});
+  border-start-end-radius: var(--awsui-style-flash-border-radius, #{awsui.$border-radius-flashbar});
+  border-end-start-radius: var(--awsui-style-flash-border-radius, #{awsui.$border-radius-flashbar});
+  border-end-end-radius: var(--awsui-style-flash-border-radius, #{awsui.$border-radius-flashbar});
+  border-block: var(--awsui-style-flash-border-width, 0) solid var(--awsui-style-flash-border-color, transparent);
+  border-inline: var(--awsui-style-flash-border-width, 0) solid var(--awsui-style-flash-border-color, transparent);
+  color: var(--awsui-style-flash-color, #{awsui.$color-text-notification-default});
   overflow-wrap: break-word;
   word-wrap: break-word;
   box-shadow: awsui.$shadow-flash-sticky;
 
   #{custom-props.$styleFocusRingBoxShadow}: 0 0 0
-    var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
-    var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused);
+    var(
+      --awsui-style-flash-focus-ring-border-width,
+      var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
+    )
+    var(
+      --awsui-style-flash-focus-ring-border-color,
+      var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused)
+    );
 }
 
 .initial-hidden {
@@ -84,7 +93,10 @@
   @include focus-visible.when-visible {
     @include styles.focus-highlight(
       $gutter: awsui.$space-button-focus-outline-gutter,
-      $border-radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),
+      $border-radius: var(
+          --awsui-style-flash-focus-ring-border-radius,
+          var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring)
+        ),
       $box-shadow: var(#{custom-props.$styleFocusRingBoxShadow})
     );
   }
@@ -146,19 +158,20 @@
 }
 
 .flash-type-success {
-  background-color: awsui.$color-background-notification-green;
+  background-color: var(--awsui-style-flash-background, #{awsui.$color-background-notification-green});
 }
 
 .flash-type-error {
-  background-color: awsui.$color-background-notification-red;
+  background-color: var(--awsui-style-flash-background, #{awsui.$color-background-notification-red});
 }
 
 .flash-type-info,
 .flash-type-in-progress {
-  background-color: awsui.$color-background-notification-blue;
+  background-color: var(--awsui-style-flash-background, #{awsui.$color-background-notification-blue});
 }
 
 .flash-type-warning {
-  color: awsui.$color-text-notification-yellow;
-  background-color: awsui.$color-background-notification-yellow;
+  color: var(--awsui-style-flash-color, #{awsui.$color-text-notification-yellow});
+  background-color: var(--awsui-style-flash-background, #{awsui.$color-background-notification-yellow});
 }
+/* stylelint-enable custom-property-pattern */
diff --git a/src/input/index.tsx b/src/input/index.tsx
index 351bdf14af..ebed8248d8 100644
--- a/src/input/index.tsx
+++ b/src/input/index.tsx
@@ -44,6 +44,7 @@ const Input = React.forwardRef(
       clearAriaLabel,
       nativeInputAttributes,
       style,
+      classNames,
       ...rest
     }: InputProps,
     ref: Ref<InputProps.Ref>
@@ -101,6 +102,7 @@ const Input = React.forwardRef(
           clearAriaLabel,
           nativeInputAttributes,
           style,
+          classNames,
         }}
         className={clsx(styles.root, baseProps.className)}
         __inheritFormFieldProps={true}
diff --git a/src/input/interfaces.ts b/src/input/interfaces.ts
index 9f24d4d427..98d1f76ae4 100644
--- a/src/input/interfaces.ts
+++ b/src/input/interfaces.ts
@@ -188,6 +188,14 @@ export interface InputProps
    * @awsuiSystem core
    */
   style?: InputProps.Style;
+
+  /**
+   * An object that maps the input's slots to CSS class names for custom styling.
+   * Use these classes to scope `--awsui-style-*` custom properties.
+   * * `root` - The input's root element.
+   * @awsuiSystem core
+   */
+  classNames?: InputProps.ClassNames;
 }
 
 export namespace InputProps {
@@ -195,6 +203,10 @@ export namespace InputProps {
   export type InputMode = 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
   export type Step = number | 'any';
 
+  export interface ClassNames {
+    root?: string;
+  }
+
   export type ChangeDetail = BaseChangeDetail;
   export type KeyDetail = BaseKeyDetail;
 
diff --git a/src/input/internal.tsx b/src/input/internal.tsx
index 57c81b79f3..607757deb0 100644
--- a/src/input/internal.tsx
+++ b/src/input/internal.tsx
@@ -98,6 +98,7 @@ function InternalInput(
     __inlineLabelText,
     __fullWidth,
     style,
+    classNames,
     ...rest
   }: InternalInputProps,
   ref: Ref<HTMLInputElement>
@@ -215,7 +216,7 @@ function InternalInput(
   return (
     <div
       {...baseProps}
-      className={clsx(baseProps.className, styles['input-container'])}
+      className={clsx(baseProps.className, classNames?.root, styles['input-container'])}
       ref={__internalRootRef}
       dir={type === 'email' ? 'ltr' : undefined}
       {...(__injectAnalyticsComponentMetadata
diff --git a/src/input/styles.scss b/src/input/styles.scss
index 4cf24e0338..55dfc2cb25 100644
--- a/src/input/styles.scss
+++ b/src/input/styles.scss
@@ -9,6 +9,8 @@
 @use '../internal/styles/forms/mixins' as forms;
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 
+/* stylelint-disable custom-property-pattern */
+
 @mixin placeholder {
   &::-webkit-input-placeholder {
     @content;
@@ -34,88 +36,149 @@
 
 .input {
   @include styles.styles-reset;
-  padding-block: styles.$control-padding-vertical;
-  padding-inline: styles.$control-padding-horizontal;
-  color: var(#{custom-props.$styleColorDefault}, awsui.$color-text-body-default);
+  padding-block: var(--awsui-style-input-padding-block, #{styles.$control-padding-vertical});
+  padding-inline: var(--awsui-style-input-padding-inline, #{styles.$control-padding-horizontal});
+  color: var(--awsui-style-input-color, var(#{custom-props.$styleColorDefault}, awsui.$color-text-body-default));
   inline-size: 100%;
   cursor: text;
   box-sizing: border-box;
-  background-color: var(#{custom-props.$styleBackgroundDefault}, awsui.$color-background-input-default);
-  border-start-start-radius: styles.$control-border-radius;
-  border-start-end-radius: styles.$control-border-radius;
-  border-end-start-radius: styles.$control-border-radius;
-  border-end-end-radius: styles.$control-border-radius;
-
-  border-block: awsui.$border-width-field solid
-    var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-input-default);
-  border-inline: awsui.$border-width-field solid
-    var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-input-default);
+  background-color: var(
+    --awsui-style-input-background,
+    var(#{custom-props.$styleBackgroundDefault}, awsui.$color-background-input-default)
+  );
+  border-start-start-radius: var(--awsui-style-input-border-radius, #{styles.$control-border-radius});
+  border-start-end-radius: var(--awsui-style-input-border-radius, #{styles.$control-border-radius});
+  border-end-start-radius: var(--awsui-style-input-border-radius, #{styles.$control-border-radius});
+  border-end-end-radius: var(--awsui-style-input-border-radius, #{styles.$control-border-radius});
 
-  box-shadow: var(#{custom-props.$styleBoxShadowDefault});
+  border-block: var(--awsui-style-input-border-width, #{awsui.$border-width-field}) solid
+    var(
+      --awsui-style-input-border-color,
+      var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-input-default)
+    );
+  border-inline: var(--awsui-style-input-border-width, #{awsui.$border-width-field}) solid
+    var(
+      --awsui-style-input-border-color,
+      var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-input-default)
+    );
 
   @include styles.font-body-m;
+  font-size: var(--awsui-style-input-font-size, #{awsui.$font-size-body-m});
+  font-weight: var(--awsui-style-input-font-weight, inherit);
   min-block-size: awsui.$size-vertical-input;
 
+  box-shadow: var(--awsui-style-input-box-shadow-default, var(#{custom-props.$styleBoxShadowDefault}));
+
   &:hover {
     border-color: var(
-      #{custom-props.$styleBorderColorHover},
-      var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-input-default)
+      --awsui-style-input-border-color-hover,
+      var(
+        --awsui-style-input-border-color,
+        var(
+          #{custom-props.$styleBorderColorHover},
+          var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-input-default)
+        )
+      )
     );
     color: var(
-      #{custom-props.$styleColorHover},
-      var(#{custom-props.$styleBorderColorDefault}, awsui.$color-text-body-default)
+      --awsui-style-input-color-hover,
+      var(
+        #{custom-props.$styleColorHover},
+        var(#{custom-props.$styleBorderColorDefault}, awsui.$color-text-body-default)
+      )
     );
     background-color: var(
-      #{custom-props.$styleBackgroundHover},
-      var(#{custom-props.$styleBackgroundDefault}, awsui.$color-background-input-default)
+      --awsui-style-input-background-hover,
+      var(
+        --awsui-style-input-background,
+        var(
+          #{custom-props.$styleBackgroundHover},
+          var(#{custom-props.$styleBackgroundDefault}, awsui.$color-background-input-default)
+        )
+      )
+    );
+    box-shadow: var(
+      --awsui-style-input-box-shadow-hover,
+      var(#{custom-props.$styleBoxShadowHover}, #{custom-props.$styleBoxShadowDefault})
     );
-    box-shadow: var(#{custom-props.$styleBoxShadowHover}, #{custom-props.$styleBoxShadowDefault});
   }
 
   &.input-readonly {
     @include styles.form-readonly-element(
       $background-color: var(
-          #{custom-props.$styleBackgroundReadonly},
-          var(#{custom-props.$styleBackgroundDefault}, awsui.$color-background-input-default)
+          --awsui-style-input-background-readonly,
+          var(
+            #{custom-props.$styleBackgroundReadonly},
+            var(#{custom-props.$styleBackgroundDefault}, awsui.$color-background-input-default)
+          )
         ),
       $border-color: var(
-          #{custom-props.$styleBorderColorReadonly},
-          var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-input-disabled)
+          --awsui-style-input-border-color-readonly,
+          var(
+            #{custom-props.$styleBorderColorReadonly},
+            var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-input-disabled)
+          )
         )
     );
     color: var(
-      #{custom-props.$styleColorReadonly},
-      var(#{custom-props.$styleColorDefault}, awsui.$color-text-body-default)
+      --awsui-style-input-color-readonly,
+      var(#{custom-props.$styleColorReadonly}, var(#{custom-props.$styleColorDefault}, awsui.$color-text-body-default))
     );
-    box-shadow: var(#{custom-props.$styleBoxShadowReadonly});
+    box-shadow: var(--awsui-style-input-box-shadow-readonly, var(#{custom-props.$styleBoxShadowReadonly}));
   }
 
   @include placeholder {
     @include styles.form-placeholder(
-      $color: var(#{custom-props.$stylePlaceholderColor}, awsui.$color-text-input-placeholder),
-      $font-size: var(#{custom-props.$stylePlaceholderFontSize}),
-      $font-style: var(#{custom-props.$stylePlaceholderFontStyle}, italic),
-      $font-weight: var(#{custom-props.$stylePlaceholderFontWeight})
+      $color: var(
+          --awsui-style-input-placeholder-color,
+          var(#{custom-props.$stylePlaceholderColor}, awsui.$color-text-input-placeholder)
+        ),
+      $font-size: var(--awsui-style-input-placeholder-font-size, var(#{custom-props.$stylePlaceholderFontSize})),
+      $font-style: var(
+          --awsui-style-input-placeholder-font-style,
+          var(#{custom-props.$stylePlaceholderFontStyle}, italic)
+        ),
+      $font-weight: var(--awsui-style-input-placeholder-font-weight, var(#{custom-props.$stylePlaceholderFontWeight}))
     );
   }
 
   &:focus {
     @include styles.form-focus-element(
-      $border-color: var(#{custom-props.$styleBorderColorFocus}, awsui.$color-border-input-focused),
-      $box-shadow: var(#{custom-props.$styleBoxShadowFocus}, foundation.$box-shadow-focused-light)
+      $border-radius: var(--awsui-style-input-border-radius, #{styles.$control-border-radius}),
+      $border-width: var(--awsui-style-input-border-width, #{awsui.$border-width-field}),
+      $border-color: var(
+          --awsui-style-input-border-color-focus,
+          var(#{custom-props.$styleBorderColorFocus}, awsui.$color-border-input-focused)
+        ),
+      $box-shadow: var(
+          --awsui-style-input-focus-ring-shadow,
+          var(#{custom-props.$styleBoxShadowFocus}, foundation.$box-shadow-focused-light)
+        )
+    );
+    color: var(--awsui-style-input-color-focus, var(#{custom-props.$styleColorFocus}, awsui.$color-text-body-default));
+    background-color: var(
+      --awsui-style-input-background-focus,
+      var(#{custom-props.$styleBackgroundFocus}, awsui.$color-background-input-default)
     );
-    color: var(#{custom-props.$styleColorFocus}, awsui.$color-text-body-default);
-    background-color: var(#{custom-props.$styleBackgroundFocus}, awsui.$color-background-input-default);
   }
 
   &:disabled {
     @include styles.form-disabled-element(
-      $background-color: var(#{custom-props.$styleBackgroundDisabled}, awsui.$color-background-input-disabled),
-      $border-color: var(#{custom-props.$styleBorderColorDisabled}, awsui.$color-border-input-disabled),
-      $color: var(#{custom-props.$styleColorDisabled}, awsui.$color-text-input-disabled),
+      $background-color: var(
+          --awsui-style-input-background-disabled,
+          var(#{custom-props.$styleBackgroundDisabled}, awsui.$color-background-input-disabled)
+        ),
+      $border-color: var(
+          --awsui-style-input-border-color-disabled,
+          var(#{custom-props.$styleBorderColorDisabled}, awsui.$color-border-input-disabled)
+        ),
+      $color: var(
+          --awsui-style-input-color-disabled,
+          var(#{custom-props.$styleColorDisabled}, awsui.$color-text-input-disabled)
+        ),
       $cursor: default
     );
-    box-shadow: var(#{custom-props.$styleBoxShadowDisabled});
+    box-shadow: var(--awsui-style-input-box-shadow-disabled, var(#{custom-props.$styleBoxShadowDisabled}));
     @include placeholder {
       @include styles.form-placeholder-disabled(
         $color: var(#{custom-props.$stylePlaceholderColor}, awsui.$color-text-input-placeholder-disabled)
diff --git a/src/internal/components/abstract-switch/index.tsx b/src/internal/components/abstract-switch/index.tsx
index 4d8847e612..ae281e6e6b 100644
--- a/src/internal/components/abstract-switch/index.tsx
+++ b/src/internal/components/abstract-switch/index.tsx
@@ -146,7 +146,10 @@ export default function AbstractSwitch({
           {label && (
             <span
               id={labelId}
-              className={clsx(styles.label, analyticsSelectors.label, { [styles['label-disabled']]: disabled })}
+              className={clsx(styles.label, analyticsSelectors.label, {
+                [styles['label-disabled']]: disabled,
+                [styles['label-readonly']]: readOnly && !disabled,
+              })}
               style={{ color: style?.label?.color }}
             >
               {label}
diff --git a/src/internal/components/abstract-switch/styles.scss b/src/internal/components/abstract-switch/styles.scss
index be96eda344..6cb3f35076 100644
--- a/src/internal/components/abstract-switch/styles.scss
+++ b/src/internal/components/abstract-switch/styles.scss
@@ -13,8 +13,13 @@
   display: block;
 }
 
+/* stylelint-disable custom-property-pattern */
+
 .label {
-  color: awsui.$color-text-form-default;
+  color: var(--awsui-style-color-text-label, #{awsui.$color-text-form-default});
+  @include styles.with-motion {
+    transition: color var(--awsui-style-transition-duration, 0s) var(--awsui-style-transition-easing, ease);
+  }
 }
 
 .outline {
@@ -59,9 +64,12 @@
 
 .label,
 .description {
-  padding-inline-start: awsui.$space-xs;
+  padding-inline-start: var(--awsui-style-space-control-label, #{awsui.$space-xs});
   &-disabled {
-    color: awsui.$color-text-control-disabled;
+    color: var(--awsui-style-color-text-label-disabled, #{awsui.$color-text-control-disabled});
+  }
+  &-readonly {
+    color: var(--awsui-style-color-text-label-readonly, #{awsui.$color-text-form-default});
   }
 }
 
diff --git a/src/internal/components/checkbox-icon/styles.scss b/src/internal/components/checkbox-icon/styles.scss
index 120f7a5bc3..f2b056aebb 100644
--- a/src/internal/components/checkbox-icon/styles.scss
+++ b/src/internal/components/checkbox-icon/styles.scss
@@ -6,6 +6,8 @@
 @use '../../styles' as styles;
 @use '../../styles/tokens' as awsui;
 
+/* stylelint-disable custom-property-pattern */
+
 .root {
   position: absolute;
   inline-size: 100%;
@@ -14,35 +16,69 @@
   inset-inline-start: 0;
 
   > .styled-box {
-    fill: awsui.$color-background-control-default;
-    stroke: awsui.$color-border-control-default;
-    stroke-width: awsui.$border-width-field;
+    fill: var(
+      --awsui-style-color-background-control-default,
+      var(--awsui-style-color-background-control, #{awsui.$color-background-control-default})
+    );
+    stroke: var(
+      --awsui-style-color-border-control-default,
+      var(--awsui-style-color-border-control, #{awsui.$color-border-control-default})
+    );
+    stroke-width: var(--awsui-style-border-width-field, #{awsui.$border-width-field});
+
     @include styles.with-motion {
       transition:
-        fill awsui.$motion-duration-transition-quick awsui.$motion-easing-transition-quick,
-        stroke awsui.$motion-duration-transition-quick awsui.$motion-easing-transition-quick;
+        fill var(--awsui-style-transition-duration, #{awsui.$motion-duration-transition-quick})
+          var(--awsui-style-transition-easing, #{awsui.$motion-easing-transition-quick}),
+        stroke var(--awsui-style-transition-duration, #{awsui.$motion-duration-transition-quick})
+          var(--awsui-style-transition-easing, #{awsui.$motion-easing-transition-quick});
     }
+
     &-checked,
     &-indeterminate {
-      fill: awsui.$color-background-control-checked;
-      stroke: awsui.$color-border-control-checked;
+      fill: var(
+        --awsui-style-color-background-control-checked,
+        var(--awsui-style-color-background-control, #{awsui.$color-background-control-checked})
+      );
+      stroke: var(
+        --awsui-style-color-border-control-checked,
+        var(--awsui-style-color-border-control, #{awsui.$color-border-control-checked})
+      );
     }
+
     &-disabled,
     &-readonly {
-      fill: awsui.$color-background-control-disabled;
-      stroke: awsui.$color-border-control-disabled;
+      fill: var(
+        --awsui-style-color-background-control-disabled,
+        var(--awsui-style-color-background-control, #{awsui.$color-background-control-disabled})
+      );
+      stroke: var(
+        --awsui-style-color-border-control-disabled,
+        var(--awsui-style-color-border-control, #{awsui.$color-border-control-disabled})
+      );
     }
   }
 
   > .styled-line {
-    stroke: awsui.$color-foreground-control-default;
-    stroke-width: 2;
+    stroke: var(
+      --awsui-style-color-foreground-control-default,
+      var(--awsui-style-color-foreground-control, #{awsui.$color-foreground-control-default})
+    );
+    stroke-width: var(--awsui-style-stroke-width-control, 2);
     fill: none;
+
     &-disabled {
-      stroke: awsui.$color-foreground-control-disabled;
+      stroke: var(
+        --awsui-style-color-foreground-control-disabled,
+        var(--awsui-style-color-foreground-control, #{awsui.$color-foreground-control-disabled})
+      );
     }
+
     &-readonly {
-      stroke: awsui.$color-foreground-control-read-only;
+      stroke: var(
+        --awsui-style-color-foreground-control-readonly,
+        var(--awsui-style-color-foreground-control, #{awsui.$color-foreground-control-read-only})
+      );
     }
   }
 }
diff --git a/src/internal/components/menu-dropdown/styles.scss b/src/internal/components/menu-dropdown/styles.scss
index 3847f51065..ef27c7fcc0 100644
--- a/src/internal/components/menu-dropdown/styles.scss
+++ b/src/internal/components/menu-dropdown/styles.scss
@@ -7,6 +7,8 @@
 @use '../../styles/tokens' as awsui;
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
+/* stylelint-disable custom-property-pattern */
+
 .button {
   @include styles.styles-reset;
   @include styles.text-wrapping;
@@ -25,21 +27,22 @@
   border-block: transparent;
   border-inline: transparent;
   background: transparent;
-  color: awsui.$color-text-interactive-default;
+  color: var(--awsui-style-menu-trigger-color, #{awsui.$color-text-interactive-default});
 
   &:hover {
-    color: awsui.$color-text-interactive-hover;
+    color: var(--awsui-style-menu-trigger-color-hover, #{awsui.$color-text-interactive-hover});
+    background: var(--awsui-style-menu-trigger-background-hover, transparent);
     text-decoration: none;
   }
 
   &:active,
   &.expanded {
-    background: transparent;
-    color: awsui.$color-text-interactive-active;
+    background: var(--awsui-style-menu-trigger-background-active, transparent);
+    color: var(--awsui-style-menu-trigger-color-active, #{awsui.$color-text-interactive-active});
   }
 
   &.expanded {
-    color: awsui.$color-text-accent;
+    color: var(--awsui-style-menu-trigger-color-active, #{awsui.$color-text-accent});
   }
 
   &:focus {
diff --git a/src/internal/components/option/interfaces.ts b/src/internal/components/option/interfaces.ts
index 3050f4983d..3e489feb48 100644
--- a/src/internal/components/option/interfaces.ts
+++ b/src/internal/components/option/interfaces.ts
@@ -25,6 +25,10 @@ interface BaseOption {
 
 export interface OptionDefinition extends BaseOption {
   __labelPrefix?: string;
+  /**
+   * @deprecated Use the consuming component's `classNames.options` instead.
+   */
+  className?: string;
 }
 
 interface InternalOptionDefinition extends OptionDefinition {
diff --git a/src/internal/components/radio-button/styles.scss b/src/internal/components/radio-button/styles.scss
index f40700c53e..f5c5f30e2e 100644
--- a/src/internal/components/radio-button/styles.scss
+++ b/src/internal/components/radio-button/styles.scss
@@ -8,6 +8,8 @@
 @use '../../styles/foundation' as foundation;
 @use '../../generated/custom-css-properties/index.scss' as custom-props;
 
+/* stylelint-disable custom-property-pattern */
+
 $radio-size: awsui.$size-control;
 
 .radio-control {
@@ -16,29 +18,38 @@ $radio-size: awsui.$size-control;
 
 .outline {
   #{custom-props.$styleFocusRingBoxShadow}: 0 0 0
-    var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
-    var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused);
+    var(
+      --awsui-style-focus-ring-border-width,
+      var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
+    )
+    var(
+      --awsui-style-focus-ring-border-color,
+      var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused)
+    );
 
   @include styles.focus-highlight(
     $gutter: 2px,
-    $border-radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-circular-focus-ring),
+    $border-radius: var(
+        --awsui-style-focus-ring-border-radius,
+        var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-circular-focus-ring)
+      ),
     $box-shadow: var(#{custom-props.$styleFocusRingBoxShadow})
   );
 }
 
 .styled-circle-border {
-  stroke: awsui.$color-border-control-default;
-  fill: awsui.$color-background-control-default;
+  stroke: var(--awsui-style-color-border-control-default, #{awsui.$color-border-control-default});
+  fill: var(--awsui-style-color-background-control-default, #{awsui.$color-background-control-default});
   &.styled-circle-disabled,
   &.styled-circle-readonly {
-    fill: awsui.$color-background-control-disabled;
-    stroke: awsui.$color-background-control-disabled;
+    fill: var(--awsui-style-color-background-control-disabled, #{awsui.$color-background-control-disabled});
+    stroke: var(--awsui-style-color-border-control-disabled, #{awsui.$color-background-control-disabled});
   }
 }
 
 .styled-circle-fill {
-  stroke: awsui.$color-background-control-checked;
-  fill: awsui.$color-foreground-control-default;
+  stroke: var(--awsui-style-color-background-control-checked, #{awsui.$color-background-control-checked});
+  fill: var(--awsui-style-color-foreground-control-default, #{awsui.$color-foreground-control-default});
   opacity: 0;
   @include styles.with-motion {
     transition: opacity awsui.$motion-duration-transition-quick awsui.$motion-easing-transition-quick;
@@ -47,11 +58,11 @@ $radio-size: awsui.$size-control;
     opacity: 1;
   }
   &.styled-circle-disabled {
-    fill: awsui.$color-foreground-control-disabled;
-    stroke: awsui.$color-background-control-disabled;
+    fill: var(--awsui-style-color-foreground-control-disabled, #{awsui.$color-foreground-control-disabled});
+    stroke: var(--awsui-style-color-background-control-disabled, #{awsui.$color-background-control-disabled});
   }
   &.styled-circle-readonly {
-    fill: awsui.$color-foreground-control-read-only;
-    stroke: awsui.$color-background-control-disabled;
+    fill: var(--awsui-style-color-foreground-control-readonly, #{awsui.$color-foreground-control-read-only});
+    stroke: var(--awsui-style-color-background-control-disabled, #{awsui.$color-background-control-disabled});
   }
 }
diff --git a/src/internal/components/selectable-item/index.tsx b/src/internal/components/selectable-item/index.tsx
index 707af46315..17fe40afe8 100644
--- a/src/internal/components/selectable-item/index.tsx
+++ b/src/internal/components/selectable-item/index.tsx
@@ -129,6 +129,7 @@ const SelectableItem = (
     <div
       className={classNames}
       style={style}
+      data-highlighted={highlighted || undefined}
       {...a11yProperties}
       {...rest}
       {...(isParent || disabled
diff --git a/src/internal/components/selectable-item/styles.scss b/src/internal/components/selectable-item/styles.scss
index 012ff84568..8183fc24b7 100644
--- a/src/internal/components/selectable-item/styles.scss
+++ b/src/internal/components/selectable-item/styles.scss
@@ -86,7 +86,7 @@ $neg-divider-w: calc(-1 * #{$divider-w});
 
   border-width: 0;
   background-color: awsui.$color-background-dropdown-item-default;
-  color: awsui.$color-text-dropdown-item-default;
+  color: var(--awsui-style-option-color, #{awsui.$color-text-dropdown-item-default});
 
   @include content-pad(awsui.$border-item-width, awsui.$border-item-width);
 
@@ -116,7 +116,7 @@ $neg-divider-w: calc(-1 * #{$divider-w});
   }
 
   &.has-background {
-    background-color: awsui.$color-background-dropdown-item-hover;
+    background-color: var(--awsui-style-dropdown-item-background-hover, #{awsui.$color-background-dropdown-item-hover});
   }
   &.child {
     padding-inline-start: awsui.$border-item-width;
@@ -131,13 +131,13 @@ $neg-divider-w: calc(-1 * #{$divider-w});
 
   &.highlighted,
   &.selected {
-    color: awsui.$color-text-dropdown-item-highlighted;
+    color: var(--awsui-style-dropdown-item-color-highlighted, #{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(--awsui-style-dropdown-item-background-hover, #{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 +153,7 @@ $neg-divider-w: calc(-1 * #{$divider-w});
 
   &.selected {
     z-index: 2;
-    background-color: awsui.$color-background-dropdown-item-selected;
+    background-color: var(--awsui-style-dropdown-item-background-selected, #{awsui.$color-background-dropdown-item-selected});
     @include selected-shadow;
     &.next-item-selected {
       border-end-start-radius: 0;
diff --git a/src/internal/styles/forms/mixins.scss b/src/internal/styles/forms/mixins.scss
index 74c302e3fd..71f839a9e7 100644
--- a/src/internal/styles/forms/mixins.scss
+++ b/src/internal/styles/forms/mixins.scss
@@ -11,6 +11,8 @@
 @use '../utils' as utils;
 @use './constants' as constants;
 
+/* stylelint-disable custom-property-pattern */
+
 @mixin link-focus(
   $border-color: awsui.$color-border-item-focused,
   $border-radius: awsui.$border-radius-control-default-focus-ring,
@@ -120,14 +122,15 @@
 @mixin form-focus-element(
   $border-radius: constants.$control-border-radius,
   $border-color: awsui.$color-border-input-focused,
-  $box-shadow: foundation.$box-shadow-focused-light
+  $box-shadow: foundation.$box-shadow-focused-light,
+  $border-width: awsui.$border-width-field
 ) {
   // Using a special transparent outline only visible in Windows High Contrast Mode.
   // See focus-highlight above.
   outline: 2px dotted transparent;
 
-  border-block: awsui.$border-width-field solid $border-color;
-  border-inline: awsui.$border-width-field solid $border-color;
+  border-block: $border-width solid $border-color;
+  border-inline: $border-width solid $border-color;
   border-start-start-radius: $border-radius;
   border-start-end-radius: $border-radius;
   border-end-start-radius: $border-radius;
@@ -240,36 +243,39 @@
 }
 
 @mixin container-style {
-  border-start-start-radius: awsui.$border-radius-container;
-  border-start-end-radius: awsui.$border-radius-container;
-  border-end-start-radius: awsui.$border-radius-container;
-  border-end-end-radius: awsui.$border-radius-container;
+  border-start-start-radius: var(--awsui-style-container-border-radius, #{awsui.$border-radius-container});
+  border-start-end-radius: var(--awsui-style-container-border-radius, #{awsui.$border-radius-container});
+  border-end-start-radius: var(--awsui-style-container-border-radius, #{awsui.$border-radius-container});
+  border-end-end-radius: var(--awsui-style-container-border-radius, #{awsui.$border-radius-container});
   box-sizing: border-box;
 
   &.refresh {
-    border-block: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
-    border-inline: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
+    border-block: solid var(--awsui-style-container-border-width, #{awsui.$border-divider-section-width})
+      var(--awsui-style-container-divider-color, #{awsui.$color-border-divider-default});
+    border-inline: solid var(--awsui-style-container-border-width, #{awsui.$border-divider-section-width})
+      var(--awsui-style-container-divider-color, #{awsui.$color-border-divider-default});
   }
 
   &:not(.refresh)::before {
     @include utils.base-pseudo-element;
     // Reset border color to prevent it from flashing black during card selection animation
     border-color: transparent;
-    border-block-start: awsui.$border-container-top-width solid awsui.$color-border-container-top;
-    border-start-start-radius: awsui.$border-radius-container;
-    border-start-end-radius: awsui.$border-radius-container;
-    border-end-start-radius: awsui.$border-radius-container;
-    border-end-end-radius: awsui.$border-radius-container;
+    border-block-start: var(--awsui-style-container-top-border-width, #{awsui.$border-container-top-width}) solid
+      var(--awsui-style-container-top-border-color, #{awsui.$color-border-container-top});
+    border-start-start-radius: var(--awsui-style-container-border-radius, #{awsui.$border-radius-container});
+    border-start-end-radius: var(--awsui-style-container-border-radius, #{awsui.$border-radius-container});
+    border-end-start-radius: var(--awsui-style-container-border-radius, #{awsui.$border-radius-container});
+    border-end-end-radius: var(--awsui-style-container-border-radius, #{awsui.$border-radius-container});
     z-index: 1;
   }
 
   &:not(.refresh)::after {
     @include utils.base-pseudo-element;
-    border-start-start-radius: awsui.$border-radius-container;
-    border-start-end-radius: awsui.$border-radius-container;
-    border-end-start-radius: awsui.$border-radius-container;
-    border-end-end-radius: awsui.$border-radius-container;
-    box-shadow: awsui.$shadow-container;
+    border-start-start-radius: var(--awsui-style-container-border-radius, #{awsui.$border-radius-container});
+    border-start-end-radius: var(--awsui-style-container-border-radius, #{awsui.$border-radius-container});
+    border-end-start-radius: var(--awsui-style-container-border-radius, #{awsui.$border-radius-container});
+    border-end-end-radius: var(--awsui-style-container-border-radius, #{awsui.$border-radius-container});
+    box-shadow: var(--awsui-style-container-box-shadow, #{awsui.$shadow-container});
   }
 }
 
diff --git a/src/internal/styles/links.scss b/src/internal/styles/links.scss
index fe02e9f024..6730cfe3c1 100644
--- a/src/internal/styles/links.scss
+++ b/src/internal/styles/links.scss
@@ -12,11 +12,16 @@
 @use '../../link/constants.scss' as constants;
 @use '../generated/custom-css-properties/index.scss' as custom-props;
 
+/* stylelint-disable custom-property-pattern */
+
 @mixin link-variant-style($variant) {
-  color: var(#{custom-props.$styleColorDefault}, map.get($variant, 'text-color-default'));
-  font-weight: map.get($variant, 'font-weight');
+  color: var(
+    --awsui-style-link-color-default,
+    var(#{custom-props.$styleColorDefault}, #{map.get($variant, 'text-color-default')})
+  );
+  font-weight: var(--awsui-style-link-font-weight, #{map.get($variant, 'font-weight')});
   letter-spacing: map.get($variant, 'letter-spacing');
-  text-decoration-line: map.get($variant, 'decoration-line');
+  text-decoration-line: var(--awsui-style-link-text-decoration, #{map.get($variant, 'decoration-line')});
   text-decoration-color: map.get($variant, 'decoration-color');
 
   @include styles.with-motion {
@@ -26,7 +31,10 @@
 
   &:hover {
     cursor: pointer;
-    color: var(#{custom-props.$styleColorHover}, map.get($variant, 'text-color-hover'));
+    color: var(
+      --awsui-style-link-color-hover,
+      var(#{custom-props.$styleColorHover}, #{map.get($variant, 'text-color-hover')})
+    );
   }
 
   &:focus {
@@ -34,7 +42,10 @@
   }
 
   &:active {
-    color: var(#{custom-props.$styleColorActive}, map.get($variant, 'text-color-active'));
+    color: var(
+      --awsui-style-link-color-active,
+      var(#{custom-props.$styleColorActive}, #{map.get($variant, 'text-color-active')})
+    );
   }
 
   &:active,
diff --git a/src/item-card/interfaces.ts b/src/item-card/interfaces.ts
index 4db3f3b3c9..2c01df1f3c 100644
--- a/src/item-card/interfaces.ts
+++ b/src/item-card/interfaces.ts
@@ -75,6 +75,14 @@ export interface ItemCardProps extends BaseComponentProps {
    */
   style?: ItemCardProps.Style;
 
+  /**
+   * An object that maps the item card's slots to CSS class names for custom styling.
+   * Use these classes to scope `--awsui-style-*` custom properties.
+   * * `root` - The item card's root element.
+   * @awsuiSystem core
+   */
+  classNames?: ItemCardProps.ClassNames;
+
   /**
    * Attributes to add to the native root element.
    * Some attributes will be automatically combined with internal attribute values:
@@ -91,6 +99,10 @@ export interface ItemCardProps extends BaseComponentProps {
 export namespace ItemCardProps {
   export type Variant = 'embedded' | 'default';
 
+  export interface ClassNames {
+    root?: string;
+  }
+
   export interface Style {
     root?: {
       background?: string;
diff --git a/src/item-card/internal.tsx b/src/item-card/internal.tsx
index 0252a9dc37..7fd77a195a 100644
--- a/src/item-card/internal.tsx
+++ b/src/item-card/internal.tsx
@@ -18,6 +18,7 @@ export default function InternalItemCard({
   highlighted,
   children,
   className,
+  classNames,
   header,
   description,
   footer,
@@ -43,6 +44,7 @@ export default function InternalItemCard({
     {
       className: clsx(
         className,
+        classNames?.root,
         styles.root,
         highlighted && styles.highlighted,
         fullHeight && styles['full-height'],
diff --git a/src/item-card/styles.scss b/src/item-card/styles.scss
index f9e34660aa..1f457f47ec 100644
--- a/src/item-card/styles.scss
+++ b/src/item-card/styles.scss
@@ -6,6 +6,8 @@
 @use 'sass:map';
 @use 'sass:math';
 
+/* stylelint-disable custom-property-pattern */
+
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
@@ -32,10 +34,22 @@ $action-padding-horizontal: awsui.$space-xxs;
 
 @mixin apply-border-radius($variant: 'default') {
   $radius: map.get($variant-border-radius, $variant);
-  border-start-start-radius: var(#{custom-props.$styleItemCardBorderRadius}, $radius);
-  border-start-end-radius: var(#{custom-props.$styleItemCardBorderRadius}, $radius);
-  border-end-start-radius: var(#{custom-props.$styleItemCardBorderRadius}, $radius);
-  border-end-end-radius: var(#{custom-props.$styleItemCardBorderRadius}, $radius);
+  border-start-start-radius: var(
+    --awsui-style-item-card-border-radius,
+    var(#{custom-props.$styleItemCardBorderRadius}, $radius)
+  );
+  border-start-end-radius: var(
+    --awsui-style-item-card-border-radius,
+    var(#{custom-props.$styleItemCardBorderRadius}, $radius)
+  );
+  border-end-start-radius: var(
+    --awsui-style-item-card-border-radius,
+    var(#{custom-props.$styleItemCardBorderRadius}, $radius)
+  );
+  border-end-end-radius: var(
+    --awsui-style-item-card-border-radius,
+    var(#{custom-props.$styleItemCardBorderRadius}, $radius)
+  );
 }
 
 .header {
@@ -52,6 +66,10 @@ $action-padding-horizontal: awsui.$space-xxs;
 }
 
 .footer {
+  border-block-start-style: var(--awsui-style-item-card-footer-divider-style, none);
+  border-block-start-color: var(--awsui-style-item-card-footer-divider-border-color, transparent);
+  border-block-start-width: var(--awsui-style-item-card-footer-divider-border-width, 0);
+
   &:first-child {
     margin-block-start: auto;
   }
@@ -61,18 +79,38 @@ $action-padding-horizontal: awsui.$space-xxs;
   @include styles.styles-reset();
   box-sizing: border-box;
   position: relative;
-  background: var(#{custom-props.$styleItemCardBackgroundDefault}, awsui.$color-background-item-card);
+  background: var(
+    --awsui-style-item-card-background-default,
+    var(#{custom-props.$styleItemCardBackgroundDefault}, awsui.$color-background-item-card)
+  );
   min-inline-size: 0;
-  box-shadow: var(#{custom-props.$styleItemCardBoxShadowDefault}, awsui.$shadow-item-card);
+  box-shadow: var(
+    --awsui-style-item-card-box-shadow-default,
+    var(#{custom-props.$styleItemCardBoxShadowDefault}, awsui.$shadow-item-card)
+  );
 
   &:before {
     @include styles.base-pseudo-element;
     box-shadow: none;
     border-color: transparent;
-    border-block: solid var(#{custom-props.$styleItemCardBorderWidthDefault}, awsui.$border-width-item-card)
-      var(#{custom-props.$styleItemCardBorderColorDefault}, awsui.$color-border-item-card);
-    border-inline: solid var(#{custom-props.$styleItemCardBorderWidthDefault}, awsui.$border-width-item-card)
-      var(#{custom-props.$styleItemCardBorderColorDefault}, awsui.$color-border-item-card);
+    border-block: solid
+      var(
+        --awsui-style-item-card-border-width-default,
+        var(#{custom-props.$styleItemCardBorderWidthDefault}, awsui.$border-width-item-card)
+      )
+      var(
+        --awsui-style-item-card-border-color-default,
+        var(#{custom-props.$styleItemCardBorderColorDefault}, awsui.$color-border-item-card)
+      );
+    border-inline: solid
+      var(
+        --awsui-style-item-card-border-width-default,
+        var(#{custom-props.$styleItemCardBorderWidthDefault}, awsui.$border-width-item-card)
+      )
+      var(
+        --awsui-style-item-card-border-color-default,
+        var(#{custom-props.$styleItemCardBorderColorDefault}, awsui.$color-border-item-card)
+      );
   }
 
   &::after {
@@ -80,8 +118,15 @@ $action-padding-horizontal: awsui.$space-xxs;
   }
 
   &:not(.refresh)::before {
-    border-block-start: solid var(#{custom-props.$styleItemCardBorderWidthDefault}, awsui.$border-container-top-width)
-      var(#{custom-props.$styleItemCardBorderColorDefault}, awsui.$color-border-container-top);
+    border-block-start: solid
+      var(
+        --awsui-style-item-card-border-width-default,
+        var(#{custom-props.$styleItemCardBorderWidthDefault}, awsui.$border-container-top-width)
+      )
+      var(
+        --awsui-style-item-card-border-color-default,
+        var(#{custom-props.$styleItemCardBorderColorDefault}, awsui.$color-border-container-top)
+      );
   }
 
   &.highlighted {
diff --git a/src/link/interfaces.ts b/src/link/interfaces.ts
index e55c6d97e6..c8d095418d 100644
--- a/src/link/interfaces.ts
+++ b/src/link/interfaces.ts
@@ -118,6 +118,14 @@ export interface LinkProps extends BaseComponentProps {
    */
   style?: LinkProps.Style;
 
+  /**
+   * An object that maps the link's slots to CSS class names for custom styling.
+   * Use these classes to scope `--awsui-style-*` custom properties.
+   * * `root` - The link's root element.
+   * @awsuiSystem core
+   */
+  classNames?: LinkProps.ClassNames;
+
   /**
    * Attributes to add to the native element.
    * Some attributes will be automatically combined with internal attribute values:
@@ -169,4 +177,8 @@ export namespace LinkProps {
       };
     };
   }
+
+  export interface ClassNames {
+    root?: string;
+  }
 }
diff --git a/src/link/internal.tsx b/src/link/internal.tsx
index e996af82d0..eeb972049f 100644
--- a/src/link/internal.tsx
+++ b/src/link/internal.tsx
@@ -55,6 +55,7 @@ const InternalLink = React.forwardRef(
       nativeAttributes,
       __internalRootRef,
       style,
+      classNames,
       ...props
     }: InternalLinkProps,
     ref: React.Ref<LinkProps.Ref>
@@ -172,6 +173,7 @@ const InternalLink = React.forwardRef(
       className: clsx(
         styles.link,
         baseProps.className,
+        classNames?.root,
         applyButtonStyles ? styles.button : null,
         styles[getVariantStyle(variant)],
         styles[getFontSizeStyle(variant, fontSize)],
diff --git a/src/link/styles.scss b/src/link/styles.scss
index 5a327ce573..1f310c727a 100644
--- a/src/link/styles.scss
+++ b/src/link/styles.scss
@@ -11,14 +11,22 @@
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 @use '../internal/styles/foundation' as foundation;
 
+/* stylelint-disable custom-property-pattern */
+
 .link {
   @include styles.styles-reset;
   display: inline;
   white-space: inherit;
 
   #{custom-props.$styleFocusRingBoxShadow}: 0 0 0
-    var(#{custom-props.$styleFocusRingBorderWidth}, awsui.$border-link-focus-ring-shadow-spread)
-    var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused);
+    var(
+      --awsui-style-link-focus-ring-border-width,
+      var(#{custom-props.$styleFocusRingBorderWidth}, awsui.$border-link-focus-ring-shadow-spread)
+    )
+    var(
+      --awsui-style-link-focus-ring-color,
+      var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused)
+    );
 
   @include styles.link-default;
 
@@ -53,8 +61,14 @@
 
   @include focus-visible.when-visible {
     @include styles.link-focus(
-      $border-color: var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused),
-      $border-radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),
+      $border-color: var(
+          --awsui-style-link-focus-ring-color,
+          var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused)
+        ),
+      $border-radius: var(
+          --awsui-style-link-focus-ring-border-radius,
+          var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring)
+        ),
       $box-shadow: var(#{custom-props.$styleFocusRingBoxShadow})
     );
   }
diff --git a/src/modal/interfaces.ts b/src/modal/interfaces.ts
index 44b216e321..2908929da9 100644
--- a/src/modal/interfaces.ts
+++ b/src/modal/interfaces.ts
@@ -104,12 +104,24 @@ export interface ModalProps extends BaseComponentProps, BaseModalProps {
    * @analytics
    */
   analyticsMetadata?: ModalProps.AnalyticsMetadata;
+
+  /**
+   * An object that maps the modal's slots to CSS class names for custom styling.
+   * Use these classes to scope `--awsui-style-*` custom properties.
+   * * `root` - The modal's root element.
+   * @awsuiSystem core
+   */
+  classNames?: ModalProps.ClassNames;
 }
 
 export namespace ModalProps {
   export type Size = 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'max';
   export type Position = 'center' | 'top';
 
+  export interface ClassNames {
+    root?: string;
+  }
+
   export interface DismissDetail {
     reason: string;
   }
diff --git a/src/modal/internal.tsx b/src/modal/internal.tsx
index 16761199a1..086c3ae86a 100644
--- a/src/modal/internal.tsx
+++ b/src/modal/internal.tsx
@@ -108,6 +108,7 @@ function PortaledModal({
   __subStepRef,
   __subStepFunnelProps,
   referrerId,
+  classNames,
   ...rest
 }: PortaledModalProps) {
   const instanceUniqueId = useUniqueId();
@@ -246,6 +247,7 @@ function PortaledModal({
               styles.root,
               { [styles.hidden]: !visible },
               baseProps.className,
+              classNames?.root,
               isRefresh && styles.refresh
             )}
             role="dialog"
diff --git a/src/modal/styles.scss b/src/modal/styles.scss
index 1c26f4b0be..0ec7f0f9a6 100644
--- a/src/modal/styles.scss
+++ b/src/modal/styles.scss
@@ -9,11 +9,13 @@
 @use './motion';
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 
+/* stylelint-disable custom-property-pattern */
+
 $modal-z-index: 5000;
 
 .root {
   @include styles.styles-reset;
-  background-color: awsui.$color-background-modal-overlay;
+  background-color: var(--awsui-style-modal-overlay-background, #{awsui.$color-background-modal-overlay});
 
   display: flex;
   align-items: center;
@@ -102,13 +104,13 @@ $modal-z-index: 5000;
 .container {
   @include styles.styles-reset;
   display: block;
-  background-color: awsui.$color-background-container-content;
+  background-color: var(--awsui-style-modal-background, #{awsui.$color-background-container-content});
   word-wrap: break-word;
   border-block-start: awsui.$border-container-top-width solid awsui.$color-border-container-top;
-  border-start-start-radius: awsui.$border-radius-container;
-  border-start-end-radius: awsui.$border-radius-container;
-  border-end-start-radius: awsui.$border-radius-container;
-  border-end-end-radius: awsui.$border-radius-container;
+  border-start-start-radius: var(--awsui-style-modal-border-radius, #{awsui.$border-radius-container});
+  border-start-end-radius: var(--awsui-style-modal-border-radius, #{awsui.$border-radius-container});
+  border-end-start-radius: var(--awsui-style-modal-border-radius, #{awsui.$border-radius-container});
+  border-end-end-radius: var(--awsui-style-modal-border-radius, #{awsui.$border-radius-container});
   box-shadow: awsui.$shadow-modal;
 
   &.custom-height-container {
@@ -139,10 +141,10 @@ $modal-z-index: 5000;
   padding-block-start: awsui.$space-container-header-top;
   padding-block-end: awsui.$space-container-header-bottom;
   padding-inline: awsui.$space-modal-horizontal;
-  background-color: awsui.$color-background-container-header;
+  background-color: var(--awsui-style-modal-header-background, #{awsui.$color-background-container-header});
   border-block-end: 1px solid awsui.$color-border-container-divider;
-  border-start-start-radius: awsui.$border-radius-container;
-  border-start-end-radius: awsui.$border-radius-container;
+  border-start-start-radius: var(--awsui-style-modal-border-radius, #{awsui.$border-radius-container});
+  border-start-end-radius: var(--awsui-style-modal-border-radius, #{awsui.$border-radius-container});
   border-end-start-radius: 0;
   border-end-end-radius: 0;
 }
diff --git a/src/multiselect/interfaces.ts b/src/multiselect/interfaces.ts
index e031bfa715..2fa419aa29 100644
--- a/src/multiselect/interfaces.ts
+++ b/src/multiselect/interfaces.ts
@@ -80,6 +80,16 @@ export interface MultiselectProps extends BaseSelectProps {
    * Specifies a render function to render custom options in the dropdown menu.
    */
   renderOption?: MultiselectProps.MultiselectOptionItemRenderer;
+
+  /**
+   * An object that maps the multiselect's slots to CSS class names for custom styling.
+   * Use these classes to scope `--awsui-style-*` custom properties.
+   * * `root` - The multiselect's root element.
+   * * `options` - Each option item. A string is applied to all; a function receiving
+   *   `{ option }` enables per-option customization.
+   * @awsuiSystem core
+   */
+  classNames?: MultiselectProps.ClassNames;
 }
 
 export namespace MultiselectProps {
@@ -121,6 +131,11 @@ export namespace MultiselectProps {
     filterText?: string;
   }) => ReactNode | null;
 
+  export interface ClassNames {
+    root?: string;
+    options?: string | ((args: { option: MultiselectProps.Option }) => string | undefined);
+  }
+
   export type DeselectAriaLabelFunction = (option: Option) => string;
   export type TriggerVariant = 'placeholder' | 'tokens';
 
diff --git a/src/multiselect/internal.tsx b/src/multiselect/internal.tsx
index 28b50ce0e9..d8b99eaca6 100644
--- a/src/multiselect/internal.tsx
+++ b/src/multiselect/internal.tsx
@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useRef, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import clsx from 'clsx';
 
 import { useResizeObserver, useUniqueId } from '@cloudscape-design/component-toolkit/internal';
@@ -10,6 +10,7 @@ import { useInternalI18n } from '../i18n/context';
 import { getBaseProps } from '../internal/base-component';
 import { getBreakpointValue } from '../internal/breakpoints';
 import DropdownFooter from '../internal/components/dropdown-footer/index.js';
+import { isGroup } from '../internal/components/option/utils/filter-options';
 import ScreenreaderOnly from '../internal/components/screenreader-only';
 import { useFormFieldContext } from '../internal/context/form-field-context';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component/index.js';
@@ -63,6 +64,7 @@ const InternalMultiselect = React.forwardRef(
       autoFocus,
       enableSelectAll,
       renderOption,
+      classNames,
       ...restProps
     }: InternalMultiselectProps,
     externalRef: React.Ref<MultiselectProps.Ref>
@@ -71,6 +73,19 @@ const InternalMultiselect = React.forwardRef(
     const formFieldContext = useFormFieldContext(restProps);
     const i18n = useInternalI18n('multiselect');
 
+    const resolvedOptions = useMemo(() => {
+      if (!classNames?.options) {
+        return options;
+      }
+      const resolve = (option: MultiselectProps.Option): string | undefined =>
+        typeof classNames.options === 'function' ? classNames.options({ option }) : classNames.options;
+      return options.map(entry =>
+        isGroup(entry)
+          ? { ...entry, options: entry.options.map(opt => ({ ...opt, className: resolve(opt) ?? opt.className })) }
+          : { ...entry, className: resolve(entry) ?? entry.className }
+      );
+    }, [options, classNames]);
+
     const selfControlId = useUniqueId('trigger');
     const controlId = formFieldContext.controlId ?? selfControlId;
     const ariaLabelId = useUniqueId('multiselect-ariaLabel-');
@@ -78,7 +93,7 @@ const InternalMultiselect = React.forwardRef(
 
     const [filteringValue, setFilteringValue] = useState('');
     const multiselectProps = useMultiselect({
-      options,
+      options: resolvedOptions,
       selectedOptions,
       filteringType,
       disabled,
@@ -167,7 +182,7 @@ const InternalMultiselect = React.forwardRef(
       <div
         {...baseProps}
         ref={__internalRootRef}
-        className={clsx(styles.root, baseProps.className)}
+        className={clsx(styles.root, baseProps.className, classNames?.root)}
         {...multiselectProps.getWrapperProps()}
       >
         <Dropdown
diff --git a/src/progress-bar/index.tsx b/src/progress-bar/index.tsx
index 1c854d12d5..64d8f4db09 100644
--- a/src/progress-bar/index.tsx
+++ b/src/progress-bar/index.tsx
@@ -36,6 +36,7 @@ export default function ProgressBar({
   resultText,
   onResultButtonClick,
   style,
+  classNames,
   ...rest
 }: ProgressBarProps) {
   const { __internalRootRef } = useBaseComponent('ProgressBar', {
@@ -74,7 +75,7 @@ export default function ProgressBar({
   return (
     <div
       {...baseProps}
-      className={clsx(baseProps.className, styles.root, variant && styles[variant])}
+      className={clsx(baseProps.className, classNames?.root, styles.root, variant && styles[variant])}
       ref={__internalRootRef}
     >
       <div className={isInFlash ? styles['flash-container'] : undefined}>
diff --git a/src/progress-bar/interfaces.ts b/src/progress-bar/interfaces.ts
index 72d1abf549..a66b892ba1 100644
--- a/src/progress-bar/interfaces.ts
+++ b/src/progress-bar/interfaces.ts
@@ -89,12 +89,24 @@ export interface ProgressBarProps extends BaseComponentProps {
    * @awsuiSystem core
    */
   style?: ProgressBarProps.Style;
+
+  /**
+   * An object that maps the progress bar's slots to CSS class names for custom styling.
+   * Use these classes to scope `--awsui-style-*` custom properties.
+   * * `root` - The progress bar's root element.
+   * @awsuiSystem core
+   */
+  classNames?: ProgressBarProps.ClassNames;
 }
 
 export namespace ProgressBarProps {
   export type Status = 'in-progress' | 'success' | 'error';
   export type Variant = 'standalone' | 'flash' | 'key-value';
 
+  export interface ClassNames {
+    root?: string;
+  }
+
   export interface Style {
     progressBar?: {
       backgroundColor?: string;
diff --git a/src/progress-bar/styles.scss b/src/progress-bar/styles.scss
index bbb99c06ae..9e1d07f0e8 100644
--- a/src/progress-bar/styles.scss
+++ b/src/progress-bar/styles.scss
@@ -2,21 +2,28 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
+/* stylelint-disable custom-property-pattern */
 
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles' as styles;
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 @use './motion';
 
-$progress-height: var(#{custom-props.$progressBarHeight}, 0.4 * styles.$base-size);
-$progress-border-radius: var(#{custom-props.$progressBarBorderRadius}, 10px);
+$progress-height: var(
+  --awsui-style-progress-bar-height,
+  var(#{custom-props.$progressBarHeight}, 0.4 * styles.$base-size)
+);
+$progress-border-radius: var(
+  --awsui-style-progress-bar-border-radius,
+  var(#{custom-props.$progressBarBorderRadius}, 10px)
+);
 $progress-background-color: var(
-  #{custom-props.$progressBarBackgroundColor},
-  awsui.$color-background-progress-bar-default
+  --awsui-style-progress-bar-track-color,
+  var(#{custom-props.$progressBarBackgroundColor}, awsui.$color-background-progress-bar-default)
 );
 $progress-value-background-color: var(
-  #{custom-props.$progressValueBackgroundColor},
-  awsui.$color-background-progress-bar-value-default
+  --awsui-style-progress-bar-value-color,
+  var(#{custom-props.$progressValueBackgroundColor}, awsui.$color-background-progress-bar-value-default)
 );
 
 .root {
@@ -80,6 +87,9 @@ $progress-value-background-color: var(
 
 .percentage {
   /* used in test-utils */
+  color: var(--awsui-style-progress-bar-percentage-color, inherit);
+  font-size: var(--awsui-style-progress-bar-percentage-font-size, inherit);
+  font-weight: var(--awsui-style-progress-bar-percentage-font-weight, inherit);
 }
 
 @mixin general-progress-background-style {
diff --git a/src/prompt-input/interfaces.ts b/src/prompt-input/interfaces.ts
index 8dbc44fe52..ac7f57ae34 100644
--- a/src/prompt-input/interfaces.ts
+++ b/src/prompt-input/interfaces.ts
@@ -311,9 +311,21 @@ export interface PromptInputProps
    * @awsuiSystem core
    */
   style?: PromptInputProps.Style;
+
+  /**
+   * An object that maps the prompt input's slots to CSS class names for custom styling.
+   * Use these classes to scope `--awsui-style-*` custom properties.
+   * * `root` - The prompt input's root element.
+   * @awsuiSystem core
+   */
+  classNames?: PromptInputProps.ClassNames;
 }
 
 export namespace PromptInputProps {
+  export interface ClassNames {
+    root?: string;
+  }
+
   export type KeyDetail = BaseKeyDetail;
 
   export interface I18nStrings {
diff --git a/src/prompt-input/internal.tsx b/src/prompt-input/internal.tsx
index 2e4ec2a0ee..900aa6826d 100644
--- a/src/prompt-input/internal.tsx
+++ b/src/prompt-input/internal.tsx
@@ -80,6 +80,7 @@ const InternalPromptInput = React.forwardRef(
       onTriggerDetected,
       i18nStrings,
       __internalRootRef,
+      classNames,
       ...rest
     }: InternalPromptInputProps,
     ref: Ref<PromptInputProps.Ref | HTMLTextAreaElement | HTMLInputElement>
@@ -384,7 +385,7 @@ const InternalPromptInput = React.forwardRef(
       <div
         {...baseProps}
         aria-label={ariaLabel}
-        className={clsx(styles.root, testutilStyles.root, baseProps.className, {
+        className={clsx(styles.root, testutilStyles.root, baseProps.className, classNames?.root, {
           [styles['textarea-readonly']]: readOnly,
           [styles['textarea-invalid']]: invalid,
           [styles['textarea-warning']]: warning && !invalid,
diff --git a/src/prompt-input/styles.scss b/src/prompt-input/styles.scss
index 8cb96a7d72..d959100618 100644
--- a/src/prompt-input/styles.scss
+++ b/src/prompt-input/styles.scss
@@ -17,57 +17,85 @@ $invalid-border-offset: constants.$invalid-control-left-padding;
 .root {
   @include styles.styles-reset;
   @include styles.control-border-radius-full();
+  border-start-start-radius: var(--awsui-style-prompt-input-border-radius, #{constants.$control-border-radius});
+  border-start-end-radius: var(--awsui-style-prompt-input-border-radius, #{constants.$control-border-radius});
+  border-end-start-radius: var(--awsui-style-prompt-input-border-radius, #{constants.$control-border-radius});
+  border-end-end-radius: var(--awsui-style-prompt-input-border-radius, #{constants.$control-border-radius});
   cursor: text;
 
-  background-color: var(#{custom-props.$promptInputStyleBackgroundDefault}, awsui.$color-background-input-default);
+  background-color: var(--awsui-style-prompt-input-background-default, var(#{custom-props.$promptInputStyleBackgroundDefault}, awsui.$color-background-input-default));
 
-  border-block: awsui.$border-width-field solid
-    var(#{custom-props.$promptInputStyleBorderColorDefault}, awsui.$color-border-input-default);
-  border-inline: awsui.$border-width-field solid
-    var(#{custom-props.$promptInputStyleBorderColorDefault}, awsui.$color-border-input-default);
+  border-block: var(--awsui-style-prompt-input-border-width, #{awsui.$border-width-field}) solid
+    var(--awsui-style-prompt-input-border-color-default, var(#{custom-props.$promptInputStyleBorderColorDefault}, awsui.$color-border-input-default));
+  border-inline: var(--awsui-style-prompt-input-border-width, #{awsui.$border-width-field}) solid
+    var(--awsui-style-prompt-input-border-color-default, var(#{custom-props.$promptInputStyleBorderColorDefault}, awsui.$color-border-input-default));
 
-  box-shadow: var(#{custom-props.$promptInputStyleBoxShadowDefault});
+  box-shadow: var(--awsui-style-prompt-input-box-shadow-default, var(#{custom-props.$promptInputStyleBoxShadowDefault}));
 
   &:hover {
     background-color: var(
-      #{custom-props.$promptInputStyleBackgroundHover},
-      var(#{custom-props.$promptInputStyleBackgroundDefault}, awsui.$color-background-input-default)
+      --awsui-style-prompt-input-background-hover,
+      var(
+        --awsui-style-prompt-input-background-default,
+        var(
+          #{custom-props.$promptInputStyleBackgroundHover},
+          var(#{custom-props.$promptInputStyleBackgroundDefault}, awsui.$color-background-input-default)
+        )
+      )
     );
     border-color: var(
-      #{custom-props.$promptInputStyleBorderColorHover},
-      var(#{custom-props.$promptInputStyleBorderColorDefault}, awsui.$color-border-input-default)
+      --awsui-style-prompt-input-border-color-hover,
+      var(
+        --awsui-style-prompt-input-border-color-default,
+        var(
+          #{custom-props.$promptInputStyleBorderColorHover},
+          var(#{custom-props.$promptInputStyleBorderColorDefault}, awsui.$color-border-input-default)
+        )
+      )
     );
     box-shadow: var(
-      #{custom-props.$promptInputStyleBoxShadowHover},
-      var(#{custom-props.$promptInputStyleBoxShadowDefault})
+      --awsui-style-prompt-input-box-shadow-hover,
+      var(
+        #{custom-props.$promptInputStyleBoxShadowHover},
+        var(#{custom-props.$promptInputStyleBoxShadowDefault})
+      )
     );
   }
 
   &.textarea-readonly {
     @include styles.form-readonly-element(
       $background-color: var(
-          #{custom-props.$promptInputStyleBackgroundReadonly},
-          var(#{custom-props.$promptInputStyleBackgroundDefault}, awsui.$color-background-input-default)
+          --awsui-style-prompt-input-background-readonly,
+          var(
+            #{custom-props.$promptInputStyleBackgroundReadonly},
+            var(#{custom-props.$promptInputStyleBackgroundDefault}, awsui.$color-background-input-default)
+          )
         ),
       $border-color: var(
-          #{custom-props.$promptInputStyleBorderColorReadonly},
-          var(#{custom-props.$promptInputStyleBorderColorDefault}, awsui.$color-border-input-disabled)
+          --awsui-style-prompt-input-border-color-readonly,
+          var(
+            #{custom-props.$promptInputStyleBorderColorReadonly},
+            var(#{custom-props.$promptInputStyleBorderColorDefault}, awsui.$color-border-input-disabled)
+          )
         )
     );
-    box-shadow: var(#{custom-props.$promptInputStyleBoxShadowReadonly});
+    box-shadow: var(--awsui-style-prompt-input-box-shadow-readonly, var(#{custom-props.$promptInputStyleBoxShadowReadonly}));
   }
 
   &.disabled {
     @include styles.form-disabled-element(
       $background-color: var(
-          #{custom-props.$promptInputStyleBackgroundDisabled},
-          awsui.$color-background-input-disabled
+          --awsui-style-prompt-input-background-disabled,
+          var(
+            #{custom-props.$promptInputStyleBackgroundDisabled},
+            awsui.$color-background-input-disabled
+          )
         ),
-      $border-color: var(#{custom-props.$promptInputStyleBorderColorDisabled}, awsui.$color-border-input-disabled),
-      $color: var(#{custom-props.$promptInputStyleColorDisabled}, awsui.$color-text-input-disabled),
+      $border-color: var(--awsui-style-prompt-input-border-color-disabled, var(#{custom-props.$promptInputStyleBorderColorDisabled}, awsui.$color-border-input-disabled)),
+      $color: var(--awsui-style-prompt-input-color-disabled, var(#{custom-props.$promptInputStyleColorDisabled}, awsui.$color-text-input-disabled)),
       $cursor: default
     );
-    box-shadow: var(#{custom-props.$promptInputStyleBoxShadowDisabled});
+    box-shadow: var(--awsui-style-prompt-input-box-shadow-disabled, var(#{custom-props.$promptInputStyleBoxShadowDisabled}));
   }
 
   &.textarea-invalid {
@@ -130,10 +158,12 @@ $invalid-border-offset: constants.$invalid-control-left-padding;
   &:focus-within:not(.textarea-invalid):not(.textarea-warning),
   &:focus:not(.textarea-invalid):not(.textarea-warning) {
     @include styles.form-focus-element(
-      $border-color: var(#{custom-props.$promptInputStyleBorderColorFocus}, awsui.$color-border-input-focused),
-      $box-shadow: var(#{custom-props.$promptInputStyleBoxShadowFocus}, foundation.$box-shadow-focused-light)
+      $border-radius: var(--awsui-style-prompt-input-border-radius, #{constants.$control-border-radius}),
+      $border-width: var(--awsui-style-prompt-input-border-width, #{awsui.$border-width-field}),
+      $border-color: var(--awsui-style-prompt-input-border-color-focus, var(#{custom-props.$promptInputStyleBorderColorFocus}, awsui.$color-border-input-focused)),
+      $box-shadow: var(--awsui-style-prompt-input-box-shadow-focus, var(#{custom-props.$promptInputStyleBoxShadowFocus}, foundation.$box-shadow-focused-light))
     );
-    background-color: var(#{custom-props.$promptInputStyleBackgroundFocus}, awsui.$color-background-input-default);
+    background-color: var(--awsui-style-prompt-input-background-focus, var(#{custom-props.$promptInputStyleBackgroundFocus}, awsui.$color-background-input-default));
   }
 
   // Prevent general focus styles when disabled
@@ -141,14 +171,17 @@ $invalid-border-offset: constants.$invalid-control-left-padding;
   &.disabled:focus:not(.textarea-invalid):not(.textarea-warning) {
     @include styles.form-disabled-element(
       $background-color: var(
-          #{custom-props.$promptInputStyleBackgroundDisabled},
-          awsui.$color-background-input-disabled
+          --awsui-style-prompt-input-background-disabled,
+          var(
+            #{custom-props.$promptInputStyleBackgroundDisabled},
+            awsui.$color-background-input-disabled
+          )
         ),
-      $border-color: var(#{custom-props.$promptInputStyleBorderColorDisabled}, awsui.$color-border-input-disabled),
-      $color: var(#{custom-props.$promptInputStyleColorDisabled}, awsui.$color-text-input-disabled),
+      $border-color: var(--awsui-style-prompt-input-border-color-disabled, var(#{custom-props.$promptInputStyleBorderColorDisabled}, awsui.$color-border-input-disabled)),
+      $color: var(--awsui-style-prompt-input-color-disabled, var(#{custom-props.$promptInputStyleColorDisabled}, awsui.$color-text-input-disabled)),
       $cursor: default
     );
-    box-shadow: var(#{custom-props.$promptInputStyleBoxShadowDisabled});
+    box-shadow: var(--awsui-style-prompt-input-box-shadow-disabled, var(#{custom-props.$promptInputStyleBoxShadowDisabled}));
   }
 }
 
@@ -167,7 +200,7 @@ $invalid-border-offset: constants.$invalid-control-left-padding;
   padding-block: styles.$control-padding-vertical;
   padding-inline: styles.$control-padding-horizontal;
 
-  color: var(#{custom-props.$promptInputStyleColorDefault}, awsui.$color-text-body-default);
+  color: var(--awsui-style-prompt-input-color-default, var(#{custom-props.$promptInputStyleColorDefault}, awsui.$color-text-body-default));
   max-inline-size: 100%;
   inline-size: 100%;
   display: block;
@@ -195,10 +228,10 @@ $invalid-border-offset: constants.$invalid-control-left-padding;
   &.placeholder-visible::before {
     content: attr(data-placeholder);
     @include styles.form-placeholder(
-      $color: var(#{custom-props.$promptInputStylePlaceholderColor}, awsui.$color-text-input-placeholder),
-      $font-size: var(#{custom-props.$promptInputStylePlaceholderFontSize}),
-      $font-style: var(#{custom-props.$promptInputStylePlaceholderFontStyle}, italic),
-      $font-weight: var(#{custom-props.$promptInputStylePlaceholderFontWeight})
+      $color: var(--awsui-style-prompt-input-placeholder-color, var(#{custom-props.$promptInputStylePlaceholderColor}, awsui.$color-text-input-placeholder)),
+      $font-size: var(--awsui-style-prompt-input-placeholder-font-size, var(#{custom-props.$promptInputStylePlaceholderFontSize})),
+      $font-style: var(--awsui-style-prompt-input-placeholder-font-style, var(#{custom-props.$promptInputStylePlaceholderFontStyle}, italic)),
+      $font-weight: var(--awsui-style-prompt-input-placeholder-font-weight, var(#{custom-props.$promptInputStylePlaceholderFontWeight}))
     );
     opacity: 1;
     pointer-events: none;
@@ -210,16 +243,22 @@ $invalid-border-offset: constants.$invalid-control-left-padding;
 
   &:hover {
     color: var(
-      #{custom-props.$promptInputStyleColorHover},
-      var(#{custom-props.$promptInputStyleColorDefault}, awsui.$color-text-body-default)
+      --awsui-style-prompt-input-color-hover,
+      var(
+        #{custom-props.$promptInputStyleColorHover},
+        var(#{custom-props.$promptInputStyleColorDefault}, awsui.$color-text-body-default)
+      )
     );
   }
 
   &:focus {
     outline: none;
     color: var(
-      #{custom-props.$promptInputStyleColorFocus},
-      var(#{custom-props.$promptInputStyleColorDefault}, awsui.$color-text-body-default)
+      --awsui-style-prompt-input-color-focus,
+      var(
+        #{custom-props.$promptInputStyleColorFocus},
+        var(#{custom-props.$promptInputStyleColorDefault}, awsui.$color-text-body-default)
+      )
     );
   }
 
@@ -231,10 +270,10 @@ $invalid-border-offset: constants.$invalid-control-left-padding;
   // Native placeholder for textarea element
   &::placeholder {
     @include styles.form-placeholder(
-      $color: var(#{custom-props.$promptInputStylePlaceholderColor}, awsui.$color-text-input-placeholder),
-      $font-size: var(#{custom-props.$promptInputStylePlaceholderFontSize}),
-      $font-style: var(#{custom-props.$promptInputStylePlaceholderFontStyle}, italic),
-      $font-weight: var(#{custom-props.$promptInputStylePlaceholderFontWeight})
+      $color: var(--awsui-style-prompt-input-placeholder-color, var(#{custom-props.$promptInputStylePlaceholderColor}, awsui.$color-text-input-placeholder)),
+      $font-size: var(--awsui-style-prompt-input-placeholder-font-size, var(#{custom-props.$promptInputStylePlaceholderFontSize})),
+      $font-style: var(--awsui-style-prompt-input-placeholder-font-style, var(#{custom-props.$promptInputStylePlaceholderFontStyle}, italic)),
+      $font-weight: var(--awsui-style-prompt-input-placeholder-font-weight, var(#{custom-props.$promptInputStylePlaceholderFontWeight}))
     );
     opacity: 1;
   }
@@ -246,7 +285,7 @@ $invalid-border-offset: constants.$invalid-control-left-padding;
 
   &:disabled,
   &.textarea-disabled {
-    color: var(#{custom-props.$promptInputStyleColorDisabled}, awsui.$color-text-input-disabled);
+    color: var(--awsui-style-prompt-input-color-disabled, var(#{custom-props.$promptInputStyleColorDisabled}, awsui.$color-text-input-disabled));
     cursor: default;
     overflow-y: hidden;
 
@@ -258,8 +297,11 @@ $invalid-border-offset: constants.$invalid-control-left-padding;
 
   &-readonly {
     color: var(
-      #{custom-props.$promptInputStyleColorReadonly},
-      var(#{custom-props.$promptInputStyleColorDefault}, awsui.$color-text-body-default)
+      --awsui-style-prompt-input-color-readonly,
+      var(
+        #{custom-props.$promptInputStyleColorReadonly},
+        var(#{custom-props.$promptInputStyleColorDefault}, awsui.$color-text-body-default)
+      )
     );
   }
   
diff --git a/src/radio-group/interfaces.ts b/src/radio-group/interfaces.ts
index 1f1cce4ff0..4dde1f9c47 100644
--- a/src/radio-group/interfaces.ts
+++ b/src/radio-group/interfaces.ts
@@ -71,6 +71,14 @@ export interface RadioGroupProps extends BaseComponentProps, FormFieldControlPro
    */
   style?: RadioGroupProps.Style;
 
+  /**
+   * An object that maps the radio group's slots to CSS class names for custom styling.
+   * Use these classes to scope `--awsui-style-*` custom properties.
+   * * `root` - The radio group's root element.
+   * @awsuiSystem core
+   */
+  classNames?: RadioGroupProps.ClassNames;
+
   /**
    * Defines the direction in which the radio buttons are laid out.
    */
@@ -86,6 +94,10 @@ export namespace RadioGroupProps {
     controlId?: string;
   }
 
+  export interface ClassNames {
+    root?: string;
+  }
+
   export interface ChangeDetail {
     value: string;
   }
diff --git a/src/radio-group/internal.tsx b/src/radio-group/internal.tsx
index d0011fef7a..7840c9cb7f 100644
--- a/src/radio-group/internal.tsx
+++ b/src/radio-group/internal.tsx
@@ -34,6 +34,7 @@ const InternalRadioGroup = React.forwardRef(
       readOnly,
       __internalRootRef,
       style,
+      classNames,
       direction,
       ...props
     }: InternalRadioGroupProps,
@@ -57,6 +58,7 @@ const InternalRadioGroup = React.forwardRef(
         {...baseProps}
         className={clsx(
           baseProps.className,
+          classNames?.root,
           testUtilStyles.root,
           styles['radio-group'],
           direction === 'horizontal' && styles['horizontal-group']
diff --git a/src/segmented-control/interfaces.ts b/src/segmented-control/interfaces.ts
index 042dea2ff8..4b744e4b30 100644
--- a/src/segmented-control/interfaces.ts
+++ b/src/segmented-control/interfaces.ts
@@ -51,9 +51,21 @@ export interface SegmentedControlProps extends BaseComponentProps {
    * @awsuiSystem core
    */
   style?: SegmentedControlProps.Style;
+
+  /**
+   * An object that maps the segmented control's slots to CSS class names for custom styling.
+   * Use these classes to scope `--awsui-style-*` custom properties.
+   * * `root` - The segmented control's root element.
+   * @awsuiSystem core
+   */
+  classNames?: SegmentedControlProps.ClassNames;
 }
 
 export namespace SegmentedControlProps {
+  export interface ClassNames {
+    root?: string;
+  }
+
   export interface Option {
     id: string;
     disabled?: boolean;
diff --git a/src/segmented-control/internal.tsx b/src/segmented-control/internal.tsx
index be30aee213..ac3ee51b63 100644
--- a/src/segmented-control/internal.tsx
+++ b/src/segmented-control/internal.tsx
@@ -23,6 +23,7 @@ export default function InternalSegmentedControl({
   onChange,
   __internalRootRef,
   style,
+  classNames,
   ...props
 }: InternalSegmentedControlProps) {
   const baseProps = getBaseProps(props);
@@ -45,7 +46,7 @@ export default function InternalSegmentedControl({
   };
 
   return (
-    <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={__internalRootRef}>
+    <div {...baseProps} className={clsx(baseProps.className, classNames?.root, styles.root)} ref={__internalRootRef}>
       <InternalSegmentedControlComponent
         selectedId={selectedId}
         options={options}
diff --git a/src/segmented-control/segment.scss b/src/segmented-control/segment.scss
index 5256d4e31f..8fb4b7dfcd 100644
--- a/src/segmented-control/segment.scss
+++ b/src/segmented-control/segment.scss
@@ -11,25 +11,61 @@
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
-$default-background: var(#{custom-props.$styleBackgroundDefault}, awsui.$color-background-segment-default);
-$default-color: var(#{custom-props.$styleColorDefault}, awsui.$color-text-segment-default);
-$hover-background: var(#{custom-props.$styleBackgroundHover}, awsui.$color-background-segment-hover);
-$hover-color: var(#{custom-props.$styleColorHover}, awsui.$color-text-segment-hover);
-$disabled-background: var(#{custom-props.$styleBackgroundDisabled}, awsui.$color-background-segment-disabled);
-$disabled-color: var(#{custom-props.$styleColorDisabled}, awsui.$color-text-interactive-disabled);
-$selected-background: var(#{custom-props.$styleBackgroundActive}, awsui.$color-background-segment-active);
-$selected-color: var(#{custom-props.$styleColorActive}, awsui.$color-text-segment-active);
+/* stylelint-disable custom-property-pattern */
+
+$default-background: var(
+  --awsui-style-segmented-control-background-default,
+  var(#{custom-props.$styleBackgroundDefault}, awsui.$color-background-segment-default)
+);
+$default-color: var(
+  --awsui-style-segmented-control-color-default,
+  var(#{custom-props.$styleColorDefault}, awsui.$color-text-segment-default)
+);
+$hover-background: var(
+  --awsui-style-segmented-control-background-hover,
+  var(#{custom-props.$styleBackgroundHover}, awsui.$color-background-segment-hover)
+);
+$hover-color: var(
+  --awsui-style-segmented-control-color-hover,
+  var(#{custom-props.$styleColorHover}, awsui.$color-text-segment-hover)
+);
+$disabled-background: var(
+  --awsui-style-segmented-control-background-disabled,
+  var(#{custom-props.$styleBackgroundDisabled}, awsui.$color-background-segment-disabled)
+);
+$disabled-color: var(
+  --awsui-style-segmented-control-color-disabled,
+  var(#{custom-props.$styleColorDisabled}, awsui.$color-text-interactive-disabled)
+);
+$selected-background: var(
+  --awsui-style-segmented-control-background-active,
+  var(#{custom-props.$styleBackgroundActive}, awsui.$color-background-segment-active)
+);
+$selected-color: var(
+  --awsui-style-segmented-control-color-active,
+  var(#{custom-props.$styleColorActive}, awsui.$color-text-segment-active)
+);
 $segment-gap: awsui.$space-static-xxs;
 $segment-divider-width: 1px;
-$segment-radius: calc(awsui.$border-radius-button - 3px);
+$segment-radius: var(
+  --awsui-style-segmented-control-segment-border-radius,
+  calc(var(--awsui-style-segmented-control-border-radius, #{awsui.$border-radius-button}) - 3px)
+);
 
 .segment {
   @include styles.font-body-m;
   @include styles.text-flex-wrapping;
   @include styles.font-button;
   letter-spacing: 0.25px;
-  padding-block: calc(awsui.$space-field-vertical - awsui.$border-width-field);
-  padding-inline: calc(awsui.$space-button-horizontal - $segment-gap);
+  font-size: var(--awsui-style-segmented-control-segment-font-size, inherit);
+  padding-block: var(
+    --awsui-style-segmented-control-segment-padding-block,
+    calc(awsui.$space-field-vertical - awsui.$border-width-field)
+  );
+  padding-inline: var(
+    --awsui-style-segmented-control-segment-padding-inline,
+    calc(awsui.$space-button-horizontal - $segment-gap)
+  );
 
   background: $default-background;
   color: $default-color;
@@ -62,13 +98,22 @@ $segment-radius: calc(awsui.$border-radius-button - 3px);
   }
 
   #{custom-props.$styleFocusRingBoxShadow}: 0 0 0
-    var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
-    var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused);
+    var(
+      --awsui-style-segmented-control-focus-ring-border-width,
+      var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
+    )
+    var(
+      --awsui-style-segmented-control-focus-ring-border-color,
+      var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused)
+    );
 
   @include focus-visible.when-visible {
     @include styles.focus-highlight(
       $gutter: awsui.$space-segmented-control-focus-outline-gutter,
-      $border-radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),
+      $border-radius: var(
+          --awsui-style-segmented-control-focus-ring-border-radius,
+          var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring)
+        ),
       $box-shadow: var(#{custom-props.$styleFocusRingBoxShadow}),
       $z-index: 1 // Prevents adjacent segments from overlapping the focus ring
     );
diff --git a/src/segmented-control/styles.scss b/src/segmented-control/styles.scss
index aee9f1f5e3..6f2f68deab 100644
--- a/src/segmented-control/styles.scss
+++ b/src/segmented-control/styles.scss
@@ -8,6 +8,8 @@
 @use 'sass:list' as list;
 @use '../internal/styles/tokens' as awsui;
 
+/* stylelint-disable custom-property-pattern */
+
 @function repeatValue($value, $times) {
   $result: ();
 
@@ -26,10 +28,10 @@
   display: inline-grid;
   border-inline: solid awsui.$border-width-field awsui.$color-border-input-default;
   border-block: solid awsui.$border-width-field awsui.$color-border-input-default;
-  border-start-start-radius: awsui.$border-radius-button;
-  border-start-end-radius: awsui.$border-radius-button;
-  border-end-start-radius: awsui.$border-radius-button;
-  border-end-end-radius: awsui.$border-radius-button;
+  border-start-start-radius: var(--awsui-style-segmented-control-border-radius, #{awsui.$border-radius-button});
+  border-start-end-radius: var(--awsui-style-segmented-control-border-radius, #{awsui.$border-radius-button});
+  border-end-start-radius: var(--awsui-style-segmented-control-border-radius, #{awsui.$border-radius-button});
+  border-end-end-radius: var(--awsui-style-segmented-control-border-radius, #{awsui.$border-radius-button});
   background-color: awsui.$color-background-segment-wrapper;
   align-items: center;
   min-block-size: calc(awsui.$line-height-body-m + awsui.$space-static-xxs);
diff --git a/src/select/parts/multiselect-item.tsx b/src/select/parts/multiselect-item.tsx
index 4b665093c5..639d543742 100644
--- a/src/select/parts/multiselect-item.tsx
+++ b/src/select/parts/multiselect-item.tsx
@@ -1,6 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { useEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
 
 import { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';
 
@@ -158,6 +159,8 @@ const MultiSelectItem = (
 
   return (
     <SelectableItem
+      {...baseProps}
+      className={clsx(baseProps.className, wrappedOption.className)}
       disableContentStyling={!!renderResult}
       ariaSelected={isParent && indeterminate ? undefined : Boolean(selected)}
       ariaChecked={isParent && indeterminate ? 'mixed' : Boolean(selected)}
@@ -182,7 +185,6 @@ const MultiSelectItem = (
       afterHeader={option.afterHeader}
       withScrollbar={withScrollbar}
       sticky={sticky}
-      {...baseProps}
     >
       <div className={className}>
         {!renderResult && hasCheckbox && (
diff --git a/src/slider/interfaces.ts b/src/slider/interfaces.ts
index c2e328bb37..1bd4d31d95 100644
--- a/src/slider/interfaces.ts
+++ b/src/slider/interfaces.ts
@@ -89,9 +89,21 @@ export interface SliderProps extends BaseComponentProps, FormFieldValidationCont
    * @awsuiSystem core
    */
   style?: SliderProps.Style;
+
+  /**
+   * An object that maps the slider's slots to CSS class names for custom styling.
+   * Use these classes to scope `--awsui-style-*` custom properties.
+   * * `root` - The slider's root element.
+   * @awsuiSystem core
+   */
+  classNames?: SliderProps.ClassNames;
 }
 
 export namespace SliderProps {
+  export interface ClassNames {
+    root?: string;
+  }
+
   export interface ChangeDetail {
     value: number;
   }
diff --git a/src/slider/internal.tsx b/src/slider/internal.tsx
index e1de93e7e9..5ed86dc42d 100644
--- a/src/slider/internal.tsx
+++ b/src/slider/internal.tsx
@@ -47,6 +47,7 @@ export default function InternalSlider({
   valueFormatter,
   i18nStrings,
   style,
+  classNames,
   __internalRootRef,
   ...rest
 }: InternalSliderProps) {
@@ -132,7 +133,7 @@ export default function InternalSlider({
     <div
       {...baseProps}
       ref={__internalRootRef}
-      className={clsx(baseProps.className, styles.root)}
+      className={clsx(baseProps.className, classNames?.root, styles.root)}
       style={getSliderStyles(style)}
     >
       <div
diff --git a/src/slider/mixins.scss b/src/slider/mixins.scss
index bf288f35e0..cc858edc7d 100644
--- a/src/slider/mixins.scss
+++ b/src/slider/mixins.scss
@@ -6,20 +6,40 @@
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 
+/* stylelint-disable custom-property-pattern */
+
 $thumb-size: awsui.$space-m;
 $thumb-readonly-size: awsui.$space-s;
 $border-radius-slider-thumb: 50%;
 
 @mixin base-thumb-styles {
   appearance: none;
-  background: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-default);
-  border-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-default);
+  background: var(
+    --awsui-style-slider-handle-background-default,
+    var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-default)
+  );
+  border-color: var(
+    --awsui-style-slider-handle-background-default,
+    var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-default)
+  );
   border-block-width: 2px;
   border-inline-width: 2px;
-  border-start-start-radius: var(#{custom-props.$styleSliderHandleBorderRadius}, $border-radius-slider-thumb);
-  border-start-end-radius: var(#{custom-props.$styleSliderHandleBorderRadius}, $border-radius-slider-thumb);
-  border-end-start-radius: var(#{custom-props.$styleSliderHandleBorderRadius}, $border-radius-slider-thumb);
-  border-end-end-radius: var(#{custom-props.$styleSliderHandleBorderRadius}, $border-radius-slider-thumb);
+  border-start-start-radius: var(
+    --awsui-style-slider-handle-border-radius,
+    var(#{custom-props.$styleSliderHandleBorderRadius}, $border-radius-slider-thumb)
+  );
+  border-start-end-radius: var(
+    --awsui-style-slider-handle-border-radius,
+    var(#{custom-props.$styleSliderHandleBorderRadius}, $border-radius-slider-thumb)
+  );
+  border-end-start-radius: var(
+    --awsui-style-slider-handle-border-radius,
+    var(#{custom-props.$styleSliderHandleBorderRadius}, $border-radius-slider-thumb)
+  );
+  border-end-end-radius: var(
+    --awsui-style-slider-handle-border-radius,
+    var(#{custom-props.$styleSliderHandleBorderRadius}, $border-radius-slider-thumb)
+  );
   box-shadow: none;
 
   cursor: pointer;
@@ -30,10 +50,17 @@ $border-radius-slider-thumb: 50%;
 }
 
 @mixin base-thumb-hover-styles {
-  background: var(#{custom-props.$styleSliderHandleBackgroundHover}, awsui.$color-background-slider-handle-default);
+  background: var(
+    --awsui-style-slider-handle-background-hover,
+    var(#{custom-props.$styleSliderHandleBackgroundHover}, awsui.$color-background-slider-handle-default)
+  );
   box-shadow:
     0px 0 0 2px awsui.$color-background-slider-handle-ring,
-    0 0 0 4px var(#{custom-props.$styleSliderHandleBackgroundHover}, awsui.$color-background-slider-handle-default);
+    0 0 0 4px
+      var(
+        --awsui-style-slider-handle-background-hover,
+        var(#{custom-props.$styleSliderHandleBackgroundHover}, awsui.$color-background-slider-handle-default)
+      );
 }
 
 @mixin base-thumb-focus-styles {
@@ -41,10 +68,20 @@ $border-radius-slider-thumb: 50%;
   inline-size: 20px;
   box-shadow:
     0px 0 0 2px awsui.$color-background-slider-handle-ring,
-    0 0 0 4px var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-handle-active);
-  background: var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-handle-active);
+    0 0 0 4px
+      var(
+        --awsui-style-slider-handle-background-active,
+        var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-handle-active)
+      );
+  background: var(
+    --awsui-style-slider-handle-background-active,
+    var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-handle-active)
+  );
 
-  border-color: var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-handle-active);
+  border-color: var(
+    --awsui-style-slider-handle-background-active,
+    var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-handle-active)
+  );
   border-block-width: 2px;
   border-inline-width: 2px;
 }
@@ -65,8 +102,14 @@ $border-radius-slider-thumb: 50%;
 @mixin base-thumb-disabled-styles {
   block-size: $thumb-size;
   inline-size: $thumb-size;
-  background-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-control-disabled);
-  border-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-control-disabled);
+  background-color: var(
+    --awsui-style-slider-handle-background-default,
+    var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-control-disabled)
+  );
+  border-color: var(
+    --awsui-style-slider-handle-background-default,
+    var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-control-disabled)
+  );
   box-shadow: none;
   pointer-events: none;
 }
@@ -74,66 +117,84 @@ $border-radius-slider-thumb: 50%;
 @mixin base-thumb-readonly-styles {
   block-size: $thumb-readonly-size;
   inline-size: $thumb-readonly-size;
-  background-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-foreground-control-read-only);
-  border-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-foreground-control-read-only);
+  background-color: var(
+    --awsui-style-slider-handle-background-default,
+    var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-foreground-control-read-only)
+  );
+  border-color: var(
+    --awsui-style-slider-handle-background-default,
+    var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-foreground-control-read-only)
+  );
   box-shadow: none;
   pointer-events: none;
 }
 
 @mixin error-thumb-focus-styles {
   background-color: var(
-    #{custom-props.$styleSliderHandleBackgroundActive},
-    awsui.$color-background-slider-handle-error-active
+    --awsui-style-slider-handle-background-active,
+    var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-handle-error-active)
   );
   border-block-width: 2px;
   border-inline-width: 2px;
   border-color: var(
-    #{custom-props.$styleSliderHandleBackgroundActive},
-    awsui.$color-background-slider-handle-error-active
+    --awsui-style-slider-handle-background-active,
+    var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-handle-error-active)
   );
 
   box-shadow:
     0px 0 0 2px awsui.$color-background-slider-handle-ring,
     0 0 0 4px
-      var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-handle-error-active);
+      var(
+        --awsui-style-slider-handle-background-active,
+        var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-handle-error-active)
+      );
 }
 
 @mixin warning-thumb-focus-styles {
   background-color: var(
-    #{custom-props.$styleSliderHandleBackgroundActive},
-    awsui.$color-background-slider-handle-warning-active
+    --awsui-style-slider-handle-background-active,
+    var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-handle-warning-active)
   );
   border-block-width: 2px;
   border-inline-width: 2px;
   border-color: var(
-    #{custom-props.$styleSliderHandleBackgroundActive},
-    awsui.$color-background-slider-handle-warning-active
+    --awsui-style-slider-handle-background-active,
+    var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-handle-warning-active)
   );
 
   box-shadow:
     0px 0 0 2px awsui.$color-background-slider-handle-ring,
     0 0 0 4px
-      var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-handle-warning-active);
+      var(
+        --awsui-style-slider-handle-background-active,
+        var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-handle-warning-active)
+      );
 }
 
 @mixin error-thumb-hover-styles {
   background-color: var(
-    #{custom-props.$styleSliderHandleBackgroundDefault},
-    awsui.$color-background-slider-handle-error-active
+    --awsui-style-slider-handle-background-default,
+    var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-error-active)
   );
   box-shadow:
     0px 0 0 2px awsui.$color-background-slider-handle-ring,
     0 0 0 4px
-      var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-error-active);
+      var(
+        --awsui-style-slider-handle-background-default,
+        var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-error-active)
+      );
 }
 
 @mixin warning-thumb-hover-styles {
   background-color: var(
-    #{custom-props.$styleSliderHandleBackgroundDefault},
-    awsui.$color-background-slider-handle-warning-active
+    --awsui-style-slider-handle-background-default,
+    var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-warning-active)
   );
   box-shadow:
     0px 0 0 2px awsui.$color-background-slider-handle-ring,
     0 0 0 4px
-      var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-warning-active);
+      var(
+        --awsui-style-slider-handle-background-default,
+        var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-warning-active)
+      );
 }
diff --git a/src/slider/styles.scss b/src/slider/styles.scss
index 7adb3c8343..59069762ea 100644
--- a/src/slider/styles.scss
+++ b/src/slider/styles.scss
@@ -8,6 +8,8 @@
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 @use './mixins.scss' as mixins;
 
+/* stylelint-disable custom-property-pattern */
+
 .root {
   @include styles.styles-reset;
   font-size: awsui.$font-size-body-s;
@@ -35,8 +37,8 @@
 
   &-track {
     background-color: var(
-      #{custom-props.$styleSliderTrackBackgroundColor},
-      awsui.$color-background-slider-track-default
+      --awsui-style-slider-track-background-color,
+      var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-background-slider-track-default)
     );
     inline-size: calc(100% + mixins.$thumb-size);
     block-size: 2px;
@@ -44,70 +46,76 @@
 
     &.disabled {
       cursor: default;
-      background-color: var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-background-control-disabled);
+      background-color: var(
+        --awsui-style-slider-track-background-color,
+        var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-background-control-disabled)
+      );
     }
 
     &.readonly:not(&.disabled) {
       cursor: default;
-      background-color: var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-background-control-disabled);
+      background-color: var(
+        --awsui-style-slider-track-background-color,
+        var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-background-control-disabled)
+      );
     }
   }
 
   &-range {
     background-color: var(
-      #{custom-props.$styleSliderRangeBackgroundDefault},
-      awsui.$color-background-slider-range-default
+      --awsui-style-slider-range-background-default,
+      var(#{custom-props.$styleSliderRangeBackgroundDefault}, awsui.$color-background-slider-range-default)
     );
     block-size: 4px;
     inline-size: calc(var(#{custom-props.$sliderRangeInlineSize}) + mixins.$thumb-size);
 
     &.error {
       background-color: var(
-        #{custom-props.$styleSliderRangeBackgroundDefault},
-        awsui.$color-background-slider-range-error-default
+        --awsui-style-slider-range-background-default,
+        var(#{custom-props.$styleSliderRangeBackgroundDefault}, awsui.$color-background-slider-range-error-default)
       );
     }
 
     &.warning {
       background-color: var(
-        #{custom-props.$styleSliderRangeBackgroundDefault},
-        awsui.$color-background-slider-range-warning-default
+        --awsui-style-slider-range-background-default,
+        var(#{custom-props.$styleSliderRangeBackgroundDefault}, awsui.$color-background-slider-range-warning-default)
       );
     }
 
     &.active {
       background-color: var(
-        #{custom-props.$styleSliderRangeBackgroundActive},
-        awsui.$color-background-slider-range-active
+        --awsui-style-slider-range-background-active,
+        var(#{custom-props.$styleSliderRangeBackgroundActive}, awsui.$color-background-slider-range-active)
       );
     }
 
     &.error-active {
       background-color: var(
-        #{custom-props.$styleSliderRangeBackgroundActive},
-        awsui.$color-background-slider-range-error-active
+        --awsui-style-slider-range-background-active,
+        var(#{custom-props.$styleSliderRangeBackgroundActive}, awsui.$color-background-slider-range-error-active)
       );
     }
 
     &.warning-active {
       background-color: var(
-        #{custom-props.$styleSliderRangeBackgroundActive},
-        awsui.$color-background-slider-range-warning-active
+        --awsui-style-slider-range-background-active,
+        var(#{custom-props.$styleSliderRangeBackgroundActive}, awsui.$color-background-slider-range-warning-active)
       );
     }
 
     &.disabled {
       background-color: var(
-        #{custom-props.$styleSliderRangeBackgroundDefault},
-        awsui.$color-background-control-disabled
+        --awsui-style-slider-range-background-default,
+        var(#{custom-props.$styleSliderRangeBackgroundDefault}, awsui.$color-background-control-disabled)
       );
     }
 
     &.readonly:not(&.disabled) {
       inline-size: calc(var(#{custom-props.$sliderRangeInlineSize}) + mixins.$thumb-readonly-size);
       background-color: var(
-        #{custom-props.$styleSliderRangeBackgroundDefault},
-        awsui.$color-foreground-control-read-only
+        --awsui-style-slider-range-background-default,
+        var(#{custom-props.$styleSliderRangeBackgroundDefault}, awsui.$color-foreground-control-read-only)
       );
     }
   }
@@ -196,7 +204,10 @@
   inline-size: awsui.$space-xxxs;
   padding-inline: 0;
   padding-block: 0;
-  background: var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-background-slider-track-default);
+  background: var(
+    --awsui-style-slider-track-background-color,
+    var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-background-slider-track-default)
+  );
   inset-block-start: -4px;
 
   &.middle {
@@ -207,51 +218,66 @@
   }
 
   &.filled {
-    background: var(#{custom-props.$styleSliderRangeBackgroundDefault}, awsui.$color-background-slider-range-default);
+    background: var(
+      --awsui-style-slider-range-background-default,
+      var(#{custom-props.$styleSliderRangeBackgroundDefault}, awsui.$color-background-slider-range-default)
+    );
 
     &.readonly:not(.disabled) {
-      background: var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-foreground-control-read-only);
+      background: var(
+        --awsui-style-slider-track-background-color,
+        var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-foreground-control-read-only)
+      );
     }
   }
 
   &.active {
-    background: var(#{custom-props.$styleSliderRangeBackgroundActive}, awsui.$color-background-slider-range-active);
+    background: var(
+      --awsui-style-slider-range-background-active,
+      var(#{custom-props.$styleSliderRangeBackgroundActive}, awsui.$color-background-slider-range-active)
+    );
   }
 
   &.error {
     background: var(
-      #{custom-props.$styleSliderTrackBackgroundColor},
-      awsui.$color-background-slider-range-error-default
+      --awsui-style-slider-track-background-color,
+      var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-background-slider-range-error-default)
     );
   }
 
   &.warning {
     background: var(
-      #{custom-props.$styleSliderTrackBackgroundColor},
-      awsui.$color-background-slider-range-warning-default
+      --awsui-style-slider-track-background-color,
+      var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-background-slider-range-warning-default)
     );
   }
 
   &.error-active {
     background-color: var(
-      #{custom-props.$styleSliderRangeBackgroundActive},
-      awsui.$color-background-slider-range-error-active
+      --awsui-style-slider-range-background-active,
+      var(#{custom-props.$styleSliderRangeBackgroundActive}, awsui.$color-background-slider-range-error-active)
     );
   }
 
   &.warning-active {
     background-color: var(
-      #{custom-props.$styleSliderRangeBackgroundActive},
-      awsui.$color-background-slider-range-warning-active
+      --awsui-style-slider-range-background-active,
+      var(#{custom-props.$styleSliderRangeBackgroundActive}, awsui.$color-background-slider-range-warning-active)
     );
   }
 
   &.disabled {
-    background: var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-background-control-disabled);
+    background: var(
+      --awsui-style-slider-track-background-color,
+      var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-background-control-disabled)
+    );
   }
 
   &.readonly {
-    background: var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-background-control-disabled);
+    background: var(
+      --awsui-style-slider-track-background-color,
+      var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-background-control-disabled)
+    );
   }
 }
 
@@ -343,23 +369,23 @@
 .error {
   &::-webkit-slider-thumb {
     background-color: var(
-      #{custom-props.$styleSliderHandleBackgroundDefault},
-      awsui.$color-background-slider-handle-error-default
+      --awsui-style-slider-handle-background-default,
+      var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-error-default)
     );
     border-color: var(
-      #{custom-props.$styleSliderHandleBackgroundDefault},
-      awsui.$color-background-slider-handle-error-default
+      --awsui-style-slider-handle-background-default,
+      var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-error-default)
     );
   }
 
   &::-moz-range-thumb {
     background-color: var(
-      #{custom-props.$styleSliderHandleBackgroundDefault},
-      awsui.$color-background-slider-handle-error-default
+      --awsui-style-slider-handle-background-default,
+      var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-error-default)
     );
     border-color: var(
-      #{custom-props.$styleSliderHandleBackgroundDefault},
-      awsui.$color-background-slider-handle-error-default
+      --awsui-style-slider-handle-background-default,
+      var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-error-default)
     );
   }
   &:hover::-webkit-slider-thumb {
@@ -384,23 +410,23 @@
 .warning {
   &::-webkit-slider-thumb {
     background-color: var(
-      #{custom-props.$styleSliderHandleBackgroundDefault},
-      awsui.$color-background-slider-handle-warning-default
+      --awsui-style-slider-handle-background-default,
+      var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-warning-default)
     );
     border-color: var(
-      #{custom-props.$styleSliderHandleBackgroundDefault},
-      awsui.$color-background-slider-handle-warning-default
+      --awsui-style-slider-handle-background-default,
+      var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-warning-default)
     );
   }
 
   &::-moz-range-thumb {
     background-color: var(
-      #{custom-props.$styleSliderHandleBackgroundDefault},
-      awsui.$color-background-slider-handle-warning-default
+      --awsui-style-slider-handle-background-default,
+      var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-warning-default)
     );
     border-color: var(
-      #{custom-props.$styleSliderHandleBackgroundDefault},
-      awsui.$color-background-slider-handle-warning-default
+      --awsui-style-slider-handle-background-default,
+      var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-warning-default)
     );
   }
   &:hover::-webkit-slider-thumb {
diff --git a/src/table/body-cell/styles.scss b/src/table/body-cell/styles.scss
index a25f7f3f55..ac54afb7fe 100644
--- a/src/table/body-cell/styles.scss
+++ b/src/table/body-cell/styles.scss
@@ -7,6 +7,8 @@
 @use '../../internal/styles/tokens' as awsui;
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
+/* stylelint-disable custom-property-pattern */
+
 $cell-vertical-padding: awsui.$space-scaled-xs;
 // Calculate padding to prevent a shift in content after selection due to the difference
 // between selected border widths and normal row divider widths (visual refresh).
@@ -16,8 +18,10 @@ $cell-vertical-padding-w-border: calc(
 $cell-horizontal-padding: awsui.$space-scaled-l;
 $cell-edge-horizontal-padding: calc(#{awsui.$space-l} - #{awsui.$border-item-width});
 $cell-horizontal-padding-w-border: calc(#{$cell-edge-horizontal-padding} + #{awsui.$border-item-width});
-$selected-border: awsui.$border-width-item-selected solid awsui.$color-border-item-selected;
-$selected-border-placeholder: awsui.$border-divider-list-width solid awsui.$color-border-item-placeholder;
+$selected-border: awsui.$border-width-item-selected solid
+  var(--awsui-style-table-selected-border-color, #{awsui.$color-border-item-selected});
+$selected-border-placeholder: awsui.$border-divider-list-width solid
+  var(--awsui-style-table-selected-border-color, #{awsui.$color-border-item-placeholder});
 $border-placeholder: awsui.$border-item-width solid transparent;
 $icon-width-with-spacing: calc(#{awsui.$size-icon-normal} + #{awsui.$space-xs});
 // Right paddings of the absolute positioned icons (success icon is shown next to the edit icon)
@@ -225,7 +229,7 @@ $cell-negative-space-vertical: 2px;
     border-block-end-color: awsui.$color-border-cell-shaded;
   }
   &-selected {
-    background-color: awsui.$color-background-item-selected;
+    background-color: var(--awsui-style-table-selected-background, #{awsui.$color-background-item-selected});
     border-block-start: $selected-border;
     border-block-end: $selected-border;
     @include cell-padding-block-end($cell-vertical-padding);
@@ -268,7 +272,7 @@ $cell-negative-space-vertical: 2px;
       background: awsui.$color-background-cell-shaded;
     }
     &.body-cell-selected {
-      background-color: awsui.$color-background-item-selected;
+      background-color: var(--awsui-style-table-selected-background, #{awsui.$color-background-item-selected});
 
       // Create a background using box-shadow and clip path to hide underlying elements
       &:first-child {
diff --git a/src/table/header-cell/styles.scss b/src/table/header-cell/styles.scss
index d004215c5e..6d9b2fc268 100644
--- a/src/table/header-cell/styles.scss
+++ b/src/table/header-cell/styles.scss
@@ -7,6 +7,8 @@
 @use '../../internal/styles/tokens' as awsui;
 @use '../../internal/styles' as styles;
 
+/* stylelint-disable custom-property-pattern */
+
 $cell-horizontal-padding: awsui.$space-scaled-l;
 
 @mixin when-focus-visible-or-fake {
@@ -53,9 +55,10 @@ $cell-horizontal-padding: awsui.$space-scaled-l;
   position: relative;
   text-align: start;
   box-sizing: border-box;
-  border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
-  background: awsui.$color-background-table-header;
-  color: awsui.$color-text-column-header;
+  border-block-end: awsui.$border-divider-section-width solid
+    var(--awsui-style-table-border-color, #{awsui.$color-border-divider-default});
+  background: var(--awsui-style-table-header-background, #{awsui.$color-background-table-header});
+  color: var(--awsui-style-table-header-color, #{awsui.$color-text-column-header});
   font-weight: awsui.$font-weight-heading-s;
   @include styles.font-smoothing;
   padding-block: awsui.$space-scaled-xxs;
@@ -86,7 +89,7 @@ $cell-horizontal-padding: awsui.$space-scaled-l;
 
   &.sticky-cell {
     position: sticky;
-    background: awsui.$color-background-table-header;
+    background: var(--awsui-style-table-header-background, #{awsui.$color-background-table-header});
     z-index: 798; // Lower than the AppLayout's notification slot z-index(799)
     @include styles.with-motion {
       transition-property: padding;
@@ -128,7 +131,7 @@ $cell-horizontal-padding: awsui.$space-scaled-l;
   inset-block-start: 50%;
   transform: translateY(-50%);
   inset-inline-end: awsui.$space-xxs;
-  color: awsui.$color-text-column-sorting-icon;
+  color: var(--awsui-style-table-sorting-icon-color, #{awsui.$color-text-column-sorting-icon});
 }
 
 .edit-icon {
@@ -166,9 +169,9 @@ $cell-horizontal-padding: awsui.$space-scaled-l;
   }
   & > .header-cell-content:hover,
   &.header-cell-sorted > .header-cell-content {
-    color: awsui.$color-text-interactive-active;
+    color: var(--awsui-style-table-header-color, #{awsui.$color-text-interactive-active});
     & > .sorting-icon {
-      color: awsui.$color-text-interactive-active;
+      color: var(--awsui-style-table-sorting-icon-color, #{awsui.$color-text-interactive-active});
     }
   }
 }
diff --git a/src/table/interfaces.tsx b/src/table/interfaces.tsx
index 1628cf5492..d3a7b698e2 100644
--- a/src/table/interfaces.tsx
+++ b/src/table/interfaces.tsx
@@ -144,6 +144,24 @@ export interface TableProps<T = any> extends BaseComponentProps {
    */
   selectedItems?: ReadonlyArray<T>;
 
+  /**
+   * Specifies a class name applied to each selection cell.
+   * Can be a string (applied to all) or a function receiving `{ item }` for row-level
+   * customization. When called for the header "select all" control, `item` is `undefined`.
+   * @deprecated Use `classNames.selection` instead.
+   */
+  selectionClassName?: string | ((props: { item: T | undefined }) => string);
+
+  /**
+   * An object that maps the table's slots to CSS class names for custom styling.
+   * Use these classes to scope `--awsui-style-*` custom properties.
+   * * `root` - The table's root element.
+   * * `selection` - Each selection cell. A string is applied to all; a function receiving
+   *   `{ item }` enables row-level customization (`item` is `undefined` for the header "select all" control).
+   * @awsuiSystem core
+   */
+  classNames?: TableProps.ClassNames<T>;
+
   /**
    * Use this slot to add filtering controls to the table.
    */
@@ -432,6 +450,11 @@ export interface TableProps<T = any> extends BaseComponentProps {
 }
 
 export namespace TableProps {
+  export interface ClassNames<T = any> {
+    root?: string;
+    selection?: string | ((props: { item: T | undefined }) => string);
+  }
+
   export interface AnalyticsMetadata {
     instanceIdentifier?: string;
     flowType?: 'view-resource';
diff --git a/src/table/internal.tsx b/src/table/internal.tsx
index cf2e4db610..4ea2588af0 100644
--- a/src/table/internal.tsx
+++ b/src/table/internal.tsx
@@ -113,6 +113,8 @@ const InternalTable = React.forwardRef(
       selectionType: externalSelectionType,
       selectedItems,
       isItemDisabled,
+      selectionClassName: selectionClassNameProp,
+      classNames,
       ariaLabels,
       onSelectionChange,
       onSortingChange,
@@ -159,6 +161,9 @@ const InternalTable = React.forwardRef(
 
     const baseProps = getBaseProps(rest);
 
+    // `classNames.selection` supersedes the deprecated `selectionClassName` prop.
+    const selectionClassName = classNames?.selection ?? selectionClassNameProp;
+
     const prevStickyHeader = usePrevious(stickyHeader);
     if (prevStickyHeader !== undefined && !!stickyHeader !== !!prevStickyHeader) {
       warnOnce(
@@ -393,6 +398,8 @@ const InternalTable = React.forwardRef(
     const theadProps: TheadProps = {
       selectionType,
       getSelectAllProps: selection.getSelectAllProps,
+      selectionClassName:
+        typeof selectionClassName === 'function' ? selectionClassName({ item: undefined }) : selectionClassName,
       columnDefinitions: visibleColumnDefinitions,
       variant: computedVariant,
       tableVariant: computedVariant,
@@ -465,7 +472,7 @@ const InternalTable = React.forwardRef(
               {...baseProps}
               {...tableInteractionAttributes}
               __internalRootRef={__internalRootRef}
-              className={clsx(baseProps.className, styles.root)}
+              className={clsx(baseProps.className, classNames?.root, styles.root)}
               __funnelSubStepProps={__funnelSubStepProps}
               __fullPage={variant === 'full-page'}
               header={
@@ -647,6 +654,10 @@ const InternalTable = React.forwardRef(
                                       onFocusUp: moveFocusUp,
                                       rowIndex,
                                       itemKey: rowId,
+                                      selectionClassName:
+                                        typeof selectionClassName === 'function'
+                                          ? selectionClassName({ item: row.item })
+                                          : selectionClassName,
                                     }}
                                     verticalAlign={cellVerticalAlign}
                                     tableVariant={computedVariant}
@@ -744,7 +755,17 @@ const InternalTable = React.forwardRef(
                                     columnId={selectionColumnId}
                                     verticalAlign={cellVerticalAlign}
                                     tableVariant={computedVariant}
-                                    selectionControlProps={selectionType === 'group' ? loaderSelectionProps : undefined}
+                                    selectionControlProps={
+                                      selectionType === 'group' && loaderSelectionProps
+                                        ? {
+                                            ...loaderSelectionProps,
+                                            selectionClassName:
+                                              typeof selectionClassName === 'function'
+                                                ? selectionClassName({ item: row.item ?? undefined })
+                                                : selectionClassName,
+                                          }
+                                        : undefined
+                                    }
                                     isSelected={selectionType === 'group' && !!loaderSelectionProps?.checked}
                                   />
                                 ) : null}
diff --git a/src/table/selection/selection-cell.tsx b/src/table/selection/selection-cell.tsx
index f2b894af81..4ca6e8648e 100644
--- a/src/table/selection/selection-cell.tsx
+++ b/src/table/selection/selection-cell.tsx
@@ -18,6 +18,7 @@ interface TableHeaderSelectionCellProps extends Omit<TableThElementProps, 'child
   singleSelectionHeaderAriaLabel?: string;
   getSelectAllProps?: () => ItemSelectionProps;
   onFocusMove: ((sourceElement: HTMLElement, fromIndex: number, direction: -1 | 1) => void) | undefined;
+  selectionClassName?: string;
 }
 
 interface TableBodySelectionCellProps
@@ -30,6 +31,7 @@ export function TableHeaderSelectionCell({
   singleSelectionHeaderAriaLabel,
   getSelectAllProps,
   onFocusMove,
+  selectionClassName,
   ...props
 }: TableHeaderSelectionCellProps) {
   const selectAllProps = getSelectAllProps ? getSelectAllProps() : undefined;
@@ -50,6 +52,7 @@ export function TableHeaderSelectionCell({
             onFocusMove!(event.target as HTMLElement, -1, +1);
           }}
           focusedComponent={focusedComponent}
+          selectionClassName={selectionClassName}
           {...selectAllProps}
           {...(props.sticky ? { tabIndex: -1 } : {})}
         />
diff --git a/src/table/selection/selection-control.tsx b/src/table/selection/selection-control.tsx
index 7d6b7458f5..f91c86b1f4 100644
--- a/src/table/selection/selection-control.tsx
+++ b/src/table/selection/selection-control.tsx
@@ -23,6 +23,7 @@ export interface SelectionControlProps extends ItemSelectionProps {
   rowIndex?: number;
   itemKey?: string;
   verticalAlign?: 'middle' | 'top';
+  selectionClassName?: string;
 }
 
 export function SelectionControl({
@@ -38,6 +39,7 @@ export function SelectionControl({
   rowIndex,
   itemKey,
   verticalAlign = 'middle',
+  selectionClassName,
   onChange,
   ...sharedProps
 }: SelectionControlProps) {
@@ -123,7 +125,7 @@ export function SelectionControl({
         onMouseUp={setShiftState}
         onClick={handleClick}
         htmlFor={controlId}
-        className={clsx(styles.label, styles.root, verticalAlign === 'top' && styles['label-top'])}
+        className={clsx(styles.label, styles.root, verticalAlign === 'top' && styles['label-top'], selectionClassName)}
         aria-label={ariaLabel}
         title={ariaLabel}
         {...(rowIndex !== undefined && !sharedProps.disabled
diff --git a/src/table/styles.scss b/src/table/styles.scss
index 186090c9bd..2a817981d8 100644
--- a/src/table/styles.scss
+++ b/src/table/styles.scss
@@ -8,6 +8,8 @@
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../container/shared' as container;
 
+/* stylelint-disable custom-property-pattern */
+
 .root {
   @include styles.default-text-style;
   inline-size: 100%;
@@ -153,7 +155,7 @@ filter search icon.
   border-start-end-radius: 0;
   border-end-start-radius: 0;
   border-end-end-radius: 0;
-  background: awsui.$color-background-table-header;
+  background: var(--awsui-style-table-header-background, #{awsui.$color-background-table-header});
   &.variant-full-page {
     background: awsui.$color-background-layout-main;
   }
diff --git a/src/table/thead.tsx b/src/table/thead.tsx
index 10024c014e..52a7e8290d 100644
--- a/src/table/thead.tsx
+++ b/src/table/thead.tsx
@@ -19,6 +19,8 @@ import styles from './styles.css.js';
 
 export interface TheadProps {
   selectionType: undefined | InternalSelectionType;
+  getSelectAllProps?: () => ItemSelectionProps;
+  selectionClassName?: string;
   columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<any>>;
   sortingColumn: TableProps.SortingColumn<any> | undefined;
   sortingDescending: boolean | undefined;
@@ -27,7 +29,6 @@ export interface TheadProps {
   tableVariant?: TableProps.Variant;
   wrapLines: boolean | undefined;
   resizableColumns: boolean | undefined;
-  getSelectAllProps?: () => ItemSelectionProps;
   onFocusMove: ((sourceElement: HTMLElement, fromIndex: number, direction: -1 | 1) => void) | undefined;
   onResizeFinish: (newWidths: Map<PropertyKey, number>) => void;
   onSortingChange: NonCancelableEventHandler<TableProps.SortingState<any>> | undefined;
@@ -52,6 +53,7 @@ const Thead = React.forwardRef(
     {
       selectionType,
       getSelectAllProps,
+      selectionClassName,
       columnDefinitions,
       sortingColumn,
       sortingDisabled,
@@ -115,6 +117,7 @@ const Thead = React.forwardRef(
               getSelectAllProps={getSelectAllProps}
               onFocusMove={onFocusMove}
               singleSelectionHeaderAriaLabel={singleSelectionHeaderAriaLabel}
+              selectionClassName={selectionClassName}
             />
           ) : null}
 
diff --git a/src/tabs/index.tsx b/src/tabs/index.tsx
index ad54fcde07..b9143398f2 100644
--- a/src/tabs/index.tsx
+++ b/src/tabs/index.tsx
@@ -56,6 +56,7 @@ export default function Tabs({
   keyboardActivationMode = 'automatic',
   actions,
   style,
+  classNames,
   ...rest
 }: TabsProps) {
   for (const tab of tabs) {
@@ -165,7 +166,7 @@ export default function Tabs({
         header={header}
         disableHeaderPaddings={true}
         {...baseProps}
-        className={clsx(baseProps.className, styles.root)}
+        className={clsx(baseProps.className, classNames?.root, styles.root)}
         __internalRootRef={__internalRootRef}
         __contentKey={activeTabId}
         disableContentPaddings={true}
@@ -182,7 +183,9 @@ export default function Tabs({
   return (
     <div
       {...baseProps}
-      className={clsx(baseProps.className, styles.root, styles.tabs, { [styles['fit-height']]: fitHeight })}
+      className={clsx(baseProps.className, classNames?.root, styles.root, styles.tabs, {
+        [styles['fit-height']]: fitHeight,
+      })}
       ref={__internalRootRef}
       {...getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata })}
     >
diff --git a/src/tabs/interfaces.ts b/src/tabs/interfaces.ts
index 57090379b8..198fdb41e8 100644
--- a/src/tabs/interfaces.ts
+++ b/src/tabs/interfaces.ts
@@ -109,8 +109,20 @@ export interface TabsProps extends BaseComponentProps {
    * @awsuiSystem core
    */
   style?: TabsProps.Style;
+
+  /**
+   * An object that maps the tabs' slots to CSS class names for custom styling.
+   * Use these classes to scope `--awsui-style-*` custom properties.
+   * * `root` - The tabs' root element.
+   * @awsuiSystem core
+   */
+  classNames?: TabsProps.ClassNames;
 }
 export namespace TabsProps {
+  export interface ClassNames {
+    root?: string;
+  }
+
   export type Variant = 'default' | 'container' | 'stacked';
 
   export interface Tab {
diff --git a/src/tabs/tab-header-bar.scss b/src/tabs/tab-header-bar.scss
index 86f233dee9..7b7446b4f9 100644
--- a/src/tabs/tab-header-bar.scss
+++ b/src/tabs/tab-header-bar.scss
@@ -4,6 +4,7 @@
 */
 
 /* stylelint-disable selector-max-type */
+/* stylelint-disable custom-property-pattern */
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles//foundation' as foundation;
@@ -135,24 +136,30 @@ $label-horizontal-spacing: awsui.$space-xs;
     inset-inline-start: 0;
     inline-size: calc(100% - 1px);
     inset-block-end: calc(-1 * #{awsui.$border-divider-section-width});
-    block-size: var(#{custom-props.$styleTabsActiveIndicatorWidth}, awsui.$border-active-width);
+    block-size: var(
+      --awsui-style-tab-active-indicator-width,
+      var(#{custom-props.$styleTabsActiveIndicatorWidth}, awsui.$border-active-width)
+    );
     border-start-start-radius: var(
-      #{custom-props.$styleTabsActiveIndicatorBorderRadius},
-      awsui.$border-radius-tabs-focus-ring
+      --awsui-style-tab-active-indicator-border-radius,
+      var(#{custom-props.$styleTabsActiveIndicatorBorderRadius}, awsui.$border-radius-tabs-focus-ring)
     );
     border-start-end-radius: var(
-      #{custom-props.$styleTabsActiveIndicatorBorderRadius},
-      awsui.$border-radius-tabs-focus-ring
+      --awsui-style-tab-active-indicator-border-radius,
+      var(#{custom-props.$styleTabsActiveIndicatorBorderRadius}, awsui.$border-radius-tabs-focus-ring)
     );
     border-end-start-radius: var(
-      #{custom-props.$styleTabsActiveIndicatorBorderRadius},
-      awsui.$border-radius-tabs-focus-ring
+      --awsui-style-tab-active-indicator-border-radius,
+      var(#{custom-props.$styleTabsActiveIndicatorBorderRadius}, awsui.$border-radius-tabs-focus-ring)
     );
     border-end-end-radius: var(
-      #{custom-props.$styleTabsActiveIndicatorBorderRadius},
-      awsui.$border-radius-tabs-focus-ring
+      --awsui-style-tab-active-indicator-border-radius,
+      var(#{custom-props.$styleTabsActiveIndicatorBorderRadius}, awsui.$border-radius-tabs-focus-ring)
+    );
+    background: var(
+      --awsui-style-tab-active-indicator-color,
+      var(#{custom-props.$styleTabsActiveIndicatorColor}, #{awsui.$color-border-tabs-underline})
     );
-    background: var(#{custom-props.$styleTabsActiveIndicatorColor}, awsui.$color-border-tabs-underline);
     opacity: 0;
   }
 
@@ -172,8 +179,11 @@ $label-horizontal-spacing: awsui.$space-xs;
     &:before {
       content: '';
       position: absolute;
-      border-inline-end: var(#{custom-props.$styleTabsSeparatorWidth}, awsui.$border-divider-section-width) solid
-        var(#{custom-props.$styleTabsSeparatorColor}, $separator-color);
+      border-inline-end: var(
+          --awsui-style-tab-separator-width,
+          var(#{custom-props.$styleTabsSeparatorWidth}, awsui.$border-divider-section-width)
+        )
+        solid var(--awsui-style-tab-separator-color, var(#{custom-props.$styleTabsSeparatorColor}, $separator-color));
       inset: awsui.$space-scaled-s 0;
       opacity: 1;
     }
@@ -195,14 +205,22 @@ $label-horizontal-spacing: awsui.$space-xs;
 
   padding-inline: 0;
   margin-block-start: 1px;
-  border-block: awsui.$border-divider-section-width solid var(#{custom-props.$styleBorderColorDefault}, transparent);
-  border-inline: awsui.$border-divider-section-width solid var(#{custom-props.$styleBorderColorDefault}, transparent);
+  border-block: awsui.$border-divider-section-width solid
+    var(--awsui-style-tab-border-color-default, var(#{custom-props.$styleBorderColorDefault}, transparent));
+  border-inline: awsui.$border-divider-section-width solid
+    var(--awsui-style-tab-border-color-default, var(#{custom-props.$styleBorderColorDefault}, transparent));
 
   font-size: awsui.$font-size-tabs;
   line-height: awsui.$line-height-tabs;
   font-weight: awsui.$font-weight-tabs;
-  color: var(#{custom-props.$styleColorDefault}, awsui.$color-text-interactive-default);
-  background-color: var(#{custom-props.$styleBackgroundDefault}, transparent);
+  color: var(
+    --awsui-style-tab-color-default,
+    var(#{custom-props.$styleColorDefault}, #{awsui.$color-text-interactive-default})
+  );
+  background-color: var(
+    --awsui-style-tab-background-default,
+    var(#{custom-props.$styleBackgroundDefault}, transparent)
+  );
 
   padding-inline-start: calc(#{awsui.$space-xxs} - 1px);
   padding-inline-end: awsui.$space-xxs;
@@ -216,14 +234,14 @@ $label-horizontal-spacing: awsui.$space-xs;
   }
 
   &:hover {
-    color: var(#{custom-props.$styleColorHover}, awsui.$color-text-accent);
+    color: var(--awsui-style-tab-color-hover, var(#{custom-props.$styleColorHover}, #{awsui.$color-text-accent}));
     border-color: var(
-      #{custom-props.$styleBorderColorHover},
-      var(#{custom-props.$styleBorderColorDefault}, transparent)
+      --awsui-style-tab-border-color-hover,
+      var(#{custom-props.$styleBorderColorHover}, var(#{custom-props.$styleBorderColorDefault}, transparent))
     );
     background-color: var(
-      #{custom-props.$styleBackgroundHover},
-      var(#{custom-props.$styleBackgroundDefault}, transparent)
+      --awsui-style-tab-background-hover,
+      var(#{custom-props.$styleBackgroundHover}, var(#{custom-props.$styleBackgroundDefault}, transparent))
     );
   }
 
@@ -269,17 +287,26 @@ $label-horizontal-spacing: awsui.$space-xs;
   &,
   &:hover {
     cursor: default;
-    color: var(#{custom-props.$styleColorDisabled}, awsui.$color-text-interactive-disabled);
-    border-color: var(#{custom-props.$styleBorderColorDisabled}, transparent);
-    background-color: var(#{custom-props.$styleBackgroundDisabled}, transparent);
+    color: var(
+      --awsui-style-tab-color-disabled,
+      var(#{custom-props.$styleColorDisabled}, #{awsui.$color-text-interactive-disabled})
+    );
+    border-color: var(
+      --awsui-style-tab-border-color-disabled,
+      var(#{custom-props.$styleBorderColorDisabled}, transparent)
+    );
+    background-color: var(
+      --awsui-style-tab-background-disabled,
+      var(#{custom-props.$styleBackgroundDisabled}, transparent)
+    );
     font-weight: awsui.$font-weight-tabs-disabled;
   }
 }
 
 .tabs-tab-active:not(.tabs-tab-disabled) {
-  color: var(#{custom-props.$styleColorActive}, awsui.$color-text-accent);
-  border-color: var(#{custom-props.$styleBorderColorActive}, transparent);
-  background-color: var(#{custom-props.$styleBackgroundActive}, transparent);
+  color: var(--awsui-style-tab-color-active, var(#{custom-props.$styleColorActive}, #{awsui.$color-text-accent}));
+  border-color: var(--awsui-style-tab-border-color-active, var(#{custom-props.$styleBorderColorActive}, transparent));
+  background-color: var(--awsui-style-tab-background-active, var(#{custom-props.$styleBackgroundActive}, transparent));
   &:after {
     opacity: 1;
   }
@@ -292,3 +319,4 @@ $label-horizontal-spacing: awsui.$space-xs;
 .tabs-tab-focusable {
   /* used to manage focusable logic */
 }
+/* stylelint-enable custom-property-pattern */
diff --git a/src/text-filter/interfaces.ts b/src/text-filter/interfaces.ts
index 3ea4613dd0..efab51e310 100644
--- a/src/text-filter/interfaces.ts
+++ b/src/text-filter/interfaces.ts
@@ -66,6 +66,14 @@ export interface TextFilterProps extends BaseComponentProps, FormFieldControlPro
    * @awsuiSystem core
    */
   style?: TextFilterProps.Style;
+
+  /**
+   * An object that maps the text filter's slots to CSS class names for custom styling.
+   * Use these classes to scope `--awsui-style-*` custom properties.
+   * * `root` - The text filter's root element.
+   * @awsuiSystem core
+   */
+  classNames?: TextFilterProps.ClassNames;
 }
 
 export namespace TextFilterProps {
@@ -73,6 +81,10 @@ export namespace TextFilterProps {
     filteringText: string;
   }
 
+  export interface ClassNames {
+    root?: string;
+  }
+
   export interface Ref {
     /**
      * Sets focus on the underlying input control.
diff --git a/src/text-filter/internal.tsx b/src/text-filter/internal.tsx
index 90f1abd513..9f5d6ced9b 100644
--- a/src/text-filter/internal.tsx
+++ b/src/text-filter/internal.tsx
@@ -38,6 +38,7 @@ const InternalTextFilter = React.forwardRef(
       onDelayedChange,
       loading = false,
       style,
+      classNames,
       __internalRootRef,
       ...rest
     }: InternalTextFilterProps,
@@ -62,7 +63,7 @@ const InternalTextFilter = React.forwardRef(
     });
 
     return (
-      <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={__internalRootRef}>
+      <div {...baseProps} className={clsx(baseProps.className, classNames?.root, styles.root)} ref={__internalRootRef}>
         <InternalInput
           __inheritFormFieldProps={true}
           disableBrowserAutocorrect={disableBrowserAutocorrect}
diff --git a/src/textarea/index.tsx b/src/textarea/index.tsx
index c07ae53af0..deb682d9bf 100644
--- a/src/textarea/index.tsx
+++ b/src/textarea/index.tsx
@@ -45,6 +45,7 @@ const Textarea = React.forwardRef(
       ariaLabel,
       nativeTextareaAttributes,
       style,
+      classNames,
       ...rest
     }: TextareaProps,
     ref: Ref<TextareaProps.Ref>
@@ -107,7 +108,7 @@ const Textarea = React.forwardRef(
     return (
       <span
         {...baseProps}
-        className={clsx(styles.root, baseProps.className)}
+        className={clsx(styles.root, baseProps.className, classNames?.root)}
         ref={__internalRootRef}
         {...getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata })}
       >
diff --git a/src/textarea/interfaces.ts b/src/textarea/interfaces.ts
index 66068c0f98..0f20eb2f01 100644
--- a/src/textarea/interfaces.ts
+++ b/src/textarea/interfaces.ts
@@ -57,11 +57,23 @@ export interface TextareaProps
    * @awsuiSystem core
    */
   style?: TextareaProps.Style;
+
+  /**
+   * An object that maps the textarea's slots to CSS class names for custom styling.
+   * Use these classes to scope `--awsui-style-*` custom properties.
+   * * `root` - The textarea's root element.
+   * @awsuiSystem core
+   */
+  classNames?: TextareaProps.ClassNames;
 }
 
 export namespace TextareaProps {
   export type KeyDetail = BaseKeyDetail;
 
+  export interface ClassNames {
+    root?: string;
+  }
+
   export interface ChangeDetail {
     /**
      * The new value of this textarea.
diff --git a/src/textarea/styles.scss b/src/textarea/styles.scss
index 3624bddc81..e4d8f74b60 100644
--- a/src/textarea/styles.scss
+++ b/src/textarea/styles.scss
@@ -8,6 +8,8 @@
 @use '../internal/styles/foundation' as foundation;
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 
+/* stylelint-disable custom-property-pattern */
+
 .root {
   /* used for test-utils */
 }
@@ -21,80 +23,132 @@
   // Allow multi-line placeholders
   white-space: pre-wrap;
 
-  padding-block: styles.$control-padding-vertical;
-  padding-inline: styles.$control-padding-horizontal;
+  padding-block: var(--awsui-style-input-padding-block, #{styles.$control-padding-vertical});
+  padding-inline: var(--awsui-style-input-padding-inline, #{styles.$control-padding-horizontal});
 
-  color: var(#{custom-props.$styleColorDefault}, awsui.$color-text-body-default);
+  color: var(--awsui-style-input-color, var(#{custom-props.$styleColorDefault}, awsui.$color-text-body-default));
   max-inline-size: 100%;
   inline-size: 100%;
   display: block;
   box-sizing: border-box;
-  background-color: var(#{custom-props.$styleBackgroundDefault}, awsui.$color-background-input-default);
-  border-start-start-radius: styles.$control-border-radius;
-  border-start-end-radius: styles.$control-border-radius;
-  border-end-start-radius: styles.$control-border-radius;
-  border-end-end-radius: styles.$control-border-radius;
-
-  border-block: awsui.$border-width-field solid
-    var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-input-default);
-  border-inline: awsui.$border-width-field solid
-    var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-input-default);
+  background-color: var(
+    --awsui-style-input-background,
+    var(#{custom-props.$styleBackgroundDefault}, awsui.$color-background-input-default)
+  );
+  border-start-start-radius: var(--awsui-style-input-border-radius, #{styles.$control-border-radius});
+  border-start-end-radius: var(--awsui-style-input-border-radius, #{styles.$control-border-radius});
+  border-end-start-radius: var(--awsui-style-input-border-radius, #{styles.$control-border-radius});
+  border-end-end-radius: var(--awsui-style-input-border-radius, #{styles.$control-border-radius});
+
+  border-block: var(--awsui-style-input-border-width, #{awsui.$border-width-field}) solid
+    var(
+      --awsui-style-input-border-color,
+      var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-input-default)
+    );
+  border-inline: var(--awsui-style-input-border-width, #{awsui.$border-width-field}) solid
+    var(
+      --awsui-style-input-border-color,
+      var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-input-default)
+    );
 
-  box-shadow: var(#{custom-props.$styleBoxShadowDefault});
+  box-shadow: var(--awsui-style-input-box-shadow-default, var(#{custom-props.$styleBoxShadowDefault}));
 
   @include styles.font-body-m;
+  font-size: var(--awsui-style-input-font-size, #{awsui.$font-size-body-m});
+  font-weight: var(--awsui-style-input-font-weight, inherit);
 
   &:hover {
     border-color: var(
-      #{custom-props.$styleBorderColorHover},
-      var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-input-default)
+      --awsui-style-input-border-color-hover,
+      var(
+        --awsui-style-input-border-color,
+        var(
+          #{custom-props.$styleBorderColorHover},
+          var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-input-default)
+        )
+      )
     );
     color: var(
-      #{custom-props.$styleColorHover},
-      var(#{custom-props.$styleBorderColorDefault}, awsui.$color-text-body-default)
+      --awsui-style-input-color-hover,
+      var(
+        #{custom-props.$styleColorHover},
+        var(#{custom-props.$styleBorderColorDefault}, awsui.$color-text-body-default)
+      )
     );
     background-color: var(
-      #{custom-props.$styleBackgroundHover},
-      var(#{custom-props.$styleBackgroundDefault}, awsui.$color-background-input-default)
+      --awsui-style-input-background-hover,
+      var(
+        --awsui-style-input-background,
+        var(
+          #{custom-props.$styleBackgroundHover},
+          var(#{custom-props.$styleBackgroundDefault}, awsui.$color-background-input-default)
+        )
+      )
+    );
+    box-shadow: var(
+      --awsui-style-input-box-shadow-hover,
+      var(#{custom-props.$styleBoxShadowHover}, #{custom-props.$styleBoxShadowDefault})
     );
-    box-shadow: var(#{custom-props.$styleBoxShadowHover}, #{custom-props.$styleBoxShadowDefault});
   }
 
   &.textarea-readonly {
     @include styles.form-readonly-element(
       $background-color: var(
-          #{custom-props.$styleBackgroundReadonly},
-          var(#{custom-props.$styleBackgroundDefault}, awsui.$color-background-input-default)
+          --awsui-style-input-background-readonly,
+          var(
+            #{custom-props.$styleBackgroundReadonly},
+            var(#{custom-props.$styleBackgroundDefault}, awsui.$color-background-input-default)
+          )
         ),
       $border-color: var(
-          #{custom-props.$styleBorderColorReadonly},
-          var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-input-disabled)
+          --awsui-style-input-border-color-readonly,
+          var(
+            #{custom-props.$styleBorderColorReadonly},
+            var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-input-disabled)
+          )
         )
     );
     color: var(
-      #{custom-props.$styleColorReadonly},
-      var(#{custom-props.$styleColorDefault}, awsui.$color-text-body-default)
+      --awsui-style-input-color-readonly,
+      var(#{custom-props.$styleColorReadonly}, var(#{custom-props.$styleColorDefault}, awsui.$color-text-body-default))
     );
-    box-shadow: var(#{custom-props.$styleBoxShadowReadonly});
+    box-shadow: var(--awsui-style-input-box-shadow-readonly, var(#{custom-props.$styleBoxShadowReadonly}));
   }
 
   &::placeholder {
     @include styles.form-placeholder(
-      $color: var(#{custom-props.$stylePlaceholderColor}, awsui.$color-text-input-placeholder),
-      $font-size: var(#{custom-props.$stylePlaceholderFontSize}),
-      $font-style: var(#{custom-props.$stylePlaceholderFontStyle}, italic),
-      $font-weight: var(#{custom-props.$stylePlaceholderFontWeight})
+      $color: var(
+          --awsui-style-input-placeholder-color,
+          var(#{custom-props.$stylePlaceholderColor}, awsui.$color-text-input-placeholder)
+        ),
+      $font-size: var(--awsui-style-input-placeholder-font-size, var(#{custom-props.$stylePlaceholderFontSize})),
+      $font-style: var(
+          --awsui-style-input-placeholder-font-style,
+          var(#{custom-props.$stylePlaceholderFontStyle}, italic)
+        ),
+      $font-weight: var(--awsui-style-input-placeholder-font-weight, var(#{custom-props.$stylePlaceholderFontWeight}))
     );
     opacity: 1;
   }
 
   &:focus {
     @include styles.form-focus-element(
-      $border-color: var(#{custom-props.$styleBorderColorFocus}, awsui.$color-border-input-focused),
-      $box-shadow: var(#{custom-props.$styleBoxShadowFocus}, foundation.$box-shadow-focused-light)
+      $border-radius: var(--awsui-style-input-border-radius, #{styles.$control-border-radius}),
+      $border-width: var(--awsui-style-input-border-width, #{awsui.$border-width-field}),
+      $border-color: var(
+          --awsui-style-input-border-color-focus,
+          var(#{custom-props.$styleBorderColorFocus}, awsui.$color-border-input-focused)
+        ),
+      $box-shadow: var(
+          --awsui-style-input-focus-ring-shadow,
+          var(#{custom-props.$styleBoxShadowFocus}, foundation.$box-shadow-focused-light)
+        )
+    );
+    color: var(--awsui-style-input-color-focus, var(#{custom-props.$styleColorFocus}, awsui.$color-text-body-default));
+    background-color: var(
+      --awsui-style-input-background-focus,
+      var(#{custom-props.$styleBackgroundFocus}, awsui.$color-background-input-default)
     );
-    color: var(#{custom-props.$styleColorFocus}, awsui.$color-text-body-default);
-    background-color: var(#{custom-props.$styleBackgroundFocus}, awsui.$color-background-input-default);
   }
 
   &:invalid {
@@ -104,12 +158,21 @@
 
   &:disabled {
     @include styles.form-disabled-element(
-      $background-color: var(#{custom-props.$styleBackgroundDisabled}, awsui.$color-background-input-disabled),
-      $border-color: var(#{custom-props.$styleBorderColorDisabled}, awsui.$color-border-input-disabled),
-      $color: var(#{custom-props.$styleColorDisabled}, awsui.$color-text-input-disabled),
+      $background-color: var(
+          --awsui-style-input-background-disabled,
+          var(#{custom-props.$styleBackgroundDisabled}, awsui.$color-background-input-disabled)
+        ),
+      $border-color: var(
+          --awsui-style-input-border-color-disabled,
+          var(#{custom-props.$styleBorderColorDisabled}, awsui.$color-border-input-disabled)
+        ),
+      $color: var(
+          --awsui-style-input-color-disabled,
+          var(#{custom-props.$styleColorDisabled}, awsui.$color-text-input-disabled)
+        ),
       $cursor: default
     );
-    box-shadow: var(#{custom-props.$styleBoxShadowDisabled});
+    box-shadow: var(--awsui-style-input-box-shadow-disabled, var(#{custom-props.$styleBoxShadowDisabled}));
     &::placeholder {
       @include styles.form-placeholder-disabled;
       opacity: 1;
diff --git a/src/toggle/interfaces.ts b/src/toggle/interfaces.ts
index c5e4848eab..0681af1068 100644
--- a/src/toggle/interfaces.ts
+++ b/src/toggle/interfaces.ts
@@ -29,6 +29,14 @@ export interface ToggleProps extends BaseCheckboxProps {
    */
   style?: ToggleProps.Style;
 
+  /**
+   * An object that maps the toggle's slots to CSS class names for custom styling.
+   * Use these classes to scope `--awsui-style-*` custom properties.
+   * * `root` - The toggle's root element.
+   * @awsuiSystem core
+   */
+  classNames?: ToggleProps.ClassNames;
+
   /**
    * Attributes to add to the native `input` element.
    * Some attributes will be automatically combined with internal attribute values:
@@ -50,6 +58,10 @@ export namespace ToggleProps {
     focus(): void;
   }
 
+  export interface ClassNames {
+    root?: string;
+  }
+
   export interface ChangeDetail {
     checked: boolean;
   }
diff --git a/src/toggle/internal.tsx b/src/toggle/internal.tsx
index 480be02bdf..171aef7ada 100644
--- a/src/toggle/internal.tsx
+++ b/src/toggle/internal.tsx
@@ -43,6 +43,7 @@ const InternalToggle = React.forwardRef<ToggleProps.Ref, InternalToggleProps>(
       nativeInputAttributes,
       __internalRootRef,
       style,
+      classNames,
       __injectAnalyticsComponentMetadata,
       ...rest
     },
@@ -73,7 +74,7 @@ const InternalToggle = React.forwardRef<ToggleProps.Ref, InternalToggleProps>(
     return (
       <AbstractSwitch
         {...baseProps}
-        className={clsx(styles.root, baseProps.className)}
+        className={clsx(styles.root, baseProps.className, classNames?.root)}
         controlClassName={clsx(styles['toggle-control'], {
           [styles['toggle-control-checked']]: checked,
           [styles['toggle-control-disabled']]: disabled,
diff --git a/src/toggle/styles.scss b/src/toggle/styles.scss
index e39d3d9322..dc84c5d5f7 100644
--- a/src/toggle/styles.scss
+++ b/src/toggle/styles.scss
@@ -9,6 +9,8 @@
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
+/* stylelint-disable custom-property-pattern */
+
 $toggle-width: 2.4 * styles.$base-size;
 $toggle-height: 1.6 * styles.$base-size;
 $handle-size: 1.2 * styles.$base-size;
@@ -22,12 +24,21 @@ $shadow-color: rgba(0, 0, 0, 0.25);
 
 .outline {
   #{custom-props.$styleFocusRingBoxShadow}: 0 0 0
-    var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
-    var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused);
+    var(
+      --awsui-style-focus-ring-border-width,
+      var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
+    )
+    var(
+      --awsui-style-focus-ring-border-color,
+      var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused)
+    );
 
   @include styles.focus-highlight(
     $gutter: 2px,
-    $border-radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),
+    $border-radius: var(
+        --awsui-style-focus-ring-border-radius,
+        var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring)
+      ),
     $box-shadow: var(#{custom-props.$styleFocusRingBoxShadow})
   );
 }
@@ -37,22 +48,22 @@ $shadow-color: rgba(0, 0, 0, 0.25);
   // background colors in high-contrast/forced-color mode
   forced-color-adjust: none;
   @include styles.make-control-size($toggle-height, $toggle-width);
-  background: awsui.$color-background-toggle-default;
-  border-start-start-radius: 0.8 * styles.$base-size;
-  border-start-end-radius: 0.8 * styles.$base-size;
-  border-end-start-radius: 0.8 * styles.$base-size;
-  border-end-end-radius: 0.8 * styles.$base-size;
+  background: var(--awsui-style-toggle-background-default, #{awsui.$color-background-toggle-default});
+  border-start-start-radius: var(--awsui-style-toggle-border-radius, #{0.8 * styles.$base-size});
+  border-start-end-radius: var(--awsui-style-toggle-border-radius, #{0.8 * styles.$base-size});
+  border-end-start-radius: var(--awsui-style-toggle-border-radius, #{0.8 * styles.$base-size});
+  border-end-end-radius: var(--awsui-style-toggle-border-radius, #{0.8 * styles.$base-size});
   &-checked {
-    background: awsui.$color-background-control-checked;
+    background: var(--awsui-style-toggle-background-checked, #{awsui.$color-background-control-checked});
   }
   &-disabled {
-    background: awsui.$color-background-control-disabled;
+    background: var(--awsui-style-toggle-background-disabled, #{awsui.$color-background-control-disabled});
     &.toggle-control-checked {
-      background: awsui.$color-background-toggle-checked-disabled;
+      background: var(--awsui-style-toggle-background-disabled, #{awsui.$color-background-toggle-checked-disabled});
     }
   }
   &-readonly {
-    background: awsui.$color-background-control-disabled;
+    background: var(--awsui-style-toggle-background-readonly, #{awsui.$color-background-control-disabled});
   }
 }
 
@@ -63,7 +74,7 @@ $shadow-color: rgba(0, 0, 0, 0.25);
   border-start-end-radius: 0.6 * styles.$base-size;
   border-end-start-radius: 0.6 * styles.$base-size;
   border-end-end-radius: 0.6 * styles.$base-size;
-  background: awsui.$color-foreground-control-default;
+  background: var(--awsui-style-toggle-handle-default, #{awsui.$color-foreground-control-default});
   box-shadow: 1px 1px $shadow-color;
   inline-size: $handle-size;
   block-size: $handle-size;
@@ -81,6 +92,7 @@ $shadow-color: rgba(0, 0, 0, 0.25);
 
   &-checked {
     transform: translateX(0.8 * styles.$base-size);
+    background: var(--awsui-style-toggle-handle-checked, #{awsui.$color-foreground-control-default});
 
     @include styles.with-direction('rtl') {
       transform: translateX(-0.8 * styles.$base-size);
@@ -88,14 +100,14 @@ $shadow-color: rgba(0, 0, 0, 0.25);
   }
 
   &-disabled {
-    background: awsui.$color-foreground-control-disabled;
+    background: var(--awsui-style-toggle-handle-disabled, #{awsui.$color-foreground-control-disabled});
     box-shadow: none;
   }
 
   &-readonly:not(&-disabled) {
     box-shadow: none;
     &.toggle-handle-checked {
-      background: awsui.$color-foreground-control-read-only;
+      background: var(--awsui-style-toggle-handle-readonly, #{awsui.$color-foreground-control-read-only});
     }
   }
 }
diff --git a/src/token-group/interfaces.ts b/src/token-group/interfaces.ts
index d5468fe30a..7a77431fa5 100644
--- a/src/token-group/interfaces.ts
+++ b/src/token-group/interfaces.ts
@@ -65,10 +65,22 @@ export interface TokenGroupProps extends BaseComponentProps {
    * user from modifying the value. A read-only control is still focusable.
    */
   readOnly?: boolean;
+
+  /**
+   * An object that maps the token group's slots to CSS class names for custom styling.
+   * Use these classes to scope `--awsui-style-*` custom properties.
+   * * `root` - The token group's root element.
+   * @awsuiSystem core
+   */
+  classNames?: TokenGroupProps.ClassNames;
 }
 
 export namespace TokenGroupProps {
   export type Alignment = 'horizontal' | 'vertical';
+
+  export interface ClassNames {
+    root?: string;
+  }
   export interface Item {
     label?: string;
     disabled?: boolean;
diff --git a/src/token-group/internal.tsx b/src/token-group/internal.tsx
index 5e75b0e676..624bce3974 100644
--- a/src/token-group/internal.tsx
+++ b/src/token-group/internal.tsx
@@ -36,6 +36,7 @@ export default function InternalTokenGroup({
   limitShowMoreAriaLabel,
   readOnly,
   isItemReadOnly,
+  classNames,
   __internalRootRef,
   ...props
 }: InternalTokenGroupProps) {
@@ -60,6 +61,7 @@ export default function InternalTokenGroup({
       {...baseProps}
       className={clsx(
         baseProps.className,
+        classNames?.root,
         styles.root,
         hasItems && styles['has-items'],
         disableOuterPadding && styles['no-padding']
diff --git a/src/token/interfaces.ts b/src/token/interfaces.ts
index e768651da6..75e2e52465 100644
--- a/src/token/interfaces.ts
+++ b/src/token/interfaces.ts
@@ -76,11 +76,23 @@ export interface TokenProps extends BaseComponentProps {
    * @awsuiSystem core
    */
   style?: TokenProps.Style;
+
+  /**
+   * An object that maps the token's slots to CSS class names for custom styling.
+   * Use these classes to scope `--awsui-style-*` custom properties.
+   * * `root` - The token's root element.
+   * @awsuiSystem core
+   */
+  classNames?: TokenProps.ClassNames;
 }
 
 export namespace TokenProps {
   export type Variant = 'normal' | 'inline';
 
+  export interface ClassNames {
+    root?: string;
+  }
+
   export interface Style {
     root?: {
       background?: {
diff --git a/src/token/internal.tsx b/src/token/internal.tsx
index 62aca483af..e53a5c0fa5 100644
--- a/src/token/internal.tsx
+++ b/src/token/internal.tsx
@@ -41,6 +41,7 @@ function InternalToken({
   dismissLabel,
   onDismiss,
   tooltipContent,
+  classNames,
 
   // Internal
   role,
@@ -114,7 +115,8 @@ function InternalToken({
           testUtilStyles.root,
           !isInline ? styles['token-normal'] : styles['token-inline'],
           analyticsSelectors.token,
-          baseProps.className
+          baseProps.className,
+          classNames?.root
         )}
         aria-label={ariaLabel}
         aria-labelledby={!ariaLabel ? ariaLabelledbyId : undefined}
diff --git a/src/token/mixins.scss b/src/token/mixins.scss
index 5241de747d..5b92c56151 100644
--- a/src/token/mixins.scss
+++ b/src/token/mixins.scss
@@ -2,6 +2,7 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
+/* stylelint-disable custom-property-pattern */
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
@@ -11,21 +12,30 @@
   position: relative;
   block-size: 100%;
   border-block: awsui.$border-width-token solid
-    var(#{custom-props.$tokenStyleBorderColorDefault}, constants.$token-border-color);
+    var(
+      --awsui-style-token-border-color-default,
+      var(#{custom-props.$tokenStyleBorderColorDefault}, constants.$token-border-color)
+    );
   border-inline: awsui.$border-width-token solid
-    var(#{custom-props.$tokenStyleBorderColorDefault}, constants.$token-border-color);
+    var(
+      --awsui-style-token-border-color-default,
+      var(#{custom-props.$tokenStyleBorderColorDefault}, constants.$token-border-color)
+    );
   padding-block-start: awsui.$space-token-vertical;
   padding-block-end: awsui.$space-token-vertical;
   padding-inline-start: styles.$control-padding-horizontal;
   padding-inline-end: awsui.$space-xxs;
   display: flex;
   align-items: flex-start;
-  background: var(#{custom-props.$tokenStyleBackgroundDefault}, constants.$token-background);
-  border-start-start-radius: awsui.$border-radius-token;
-  border-start-end-radius: awsui.$border-radius-token;
-  border-end-start-radius: awsui.$border-radius-token;
-  border-end-end-radius: awsui.$border-radius-token;
-  color: awsui.$color-text-body-default;
+  background: var(
+    --awsui-style-token-background-default,
+    var(#{custom-props.$tokenStyleBackgroundDefault}, constants.$token-background)
+  );
+  border-start-start-radius: var(--awsui-style-token-border-radius, #{awsui.$border-radius-token});
+  border-start-end-radius: var(--awsui-style-token-border-radius, #{awsui.$border-radius-token});
+  border-end-start-radius: var(--awsui-style-token-border-radius, #{awsui.$border-radius-token});
+  border-end-end-radius: var(--awsui-style-token-border-radius, #{awsui.$border-radius-token});
+  color: var(--awsui-style-token-color-default, #{awsui.$color-text-body-default});
   box-sizing: border-box;
 }
 
diff --git a/src/token/styles.scss b/src/token/styles.scss
index 17a3d0e544..e0dc5965c2 100644
--- a/src/token/styles.scss
+++ b/src/token/styles.scss
@@ -2,6 +2,7 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
+/* stylelint-disable custom-property-pattern */
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
@@ -23,7 +24,10 @@
   border-inline: awsui.$border-width-field solid transparent;
   padding-block: 0;
   padding-inline: awsui.$space-xxs;
-  color: var(#{custom-props.$tokenStyleDismissColorDefault}, awsui.$color-text-button-inline-icon-default);
+  color: var(
+    --awsui-style-token-dismiss-color-default,
+    var(#{custom-props.$tokenStyleDismissColorDefault}, awsui.$color-text-button-inline-icon-default)
+  );
   background-color: transparent;
   cursor: pointer;
 
@@ -45,7 +49,10 @@
   }
 
   &:hover {
-    color: var(#{custom-props.$tokenStyleDismissColorHover}, awsui.$color-text-button-inline-icon-hover);
+    color: var(
+      --awsui-style-token-dismiss-color-hover,
+      var(#{custom-props.$tokenStyleDismissColorHover}, awsui.$color-text-button-inline-icon-hover)
+    );
   }
 
   &-inline {
@@ -116,22 +123,40 @@
 }
 
 .token-box-readonly {
-  border-color: var(#{custom-props.$tokenStyleBorderColorReadOnly}, awsui.$color-border-input-disabled);
-  background: var(#{custom-props.$tokenStyleBackgroundReadOnly}, awsui.$color-background-container-content);
+  border-color: var(
+    --awsui-style-token-border-color-readonly,
+    var(#{custom-props.$tokenStyleBorderColorReadOnly}, awsui.$color-border-input-disabled)
+  );
+  background: var(
+    --awsui-style-token-background-readonly,
+    var(#{custom-props.$tokenStyleBackgroundReadOnly}, awsui.$color-background-container-content)
+  );
 
   > .dismiss-button {
-    color: var(#{custom-props.$tokenStyleDismissColorReadOnly}, awsui.$color-text-button-inline-icon-disabled);
+    color: var(
+      --awsui-style-token-dismiss-color-readonly,
+      var(#{custom-props.$tokenStyleDismissColorReadOnly}, awsui.$color-text-button-inline-icon-disabled)
+    );
   }
 }
 
 .token-box-disabled {
   pointer-events: none;
-  border-color: var(#{custom-props.$tokenStyleBorderColorDisabled}, awsui.$color-border-control-disabled);
-  background: var(#{custom-props.$tokenStyleBackgroundDisabled}, awsui.$color-background-container-content);
+  border-color: var(
+    --awsui-style-token-border-color-disabled,
+    var(#{custom-props.$tokenStyleBorderColorDisabled}, awsui.$color-border-control-disabled)
+  );
+  background: var(
+    --awsui-style-token-background-disabled,
+    var(#{custom-props.$tokenStyleBackgroundDisabled}, awsui.$color-background-container-content)
+  );
   color: awsui.$color-text-disabled;
 
   // stylelint-disable-next-line no-descending-specificity
   > .dismiss-button {
-    color: var(#{custom-props.$tokenStyleDismissColorDisabled}, awsui.$color-text-button-inline-icon-disabled);
+    color: var(
+      --awsui-style-token-dismiss-color-disabled,
+      var(#{custom-props.$tokenStyleDismissColorDisabled}, awsui.$color-text-button-inline-icon-disabled)
+    );
   }
 }
diff --git a/src/top-navigation/interfaces.ts b/src/top-navigation/interfaces.ts
index 3bad629d32..9aaa6b2bf9 100644
--- a/src/top-navigation/interfaces.ts
+++ b/src/top-navigation/interfaces.ts
@@ -66,9 +66,23 @@ export interface TopNavigationProps extends BaseComponentProps {
    * @i18n
    */
   i18nStrings?: TopNavigationProps.I18nStrings;
+
+  /**
+   * An object that maps the top navigation's slots to CSS class names for custom styling.
+   * Use these classes to scope `--awsui-style-*` custom properties.
+   * * `root` - The top navigation's root element.
+   * * `utility` - Applied to each utility wrapper. Accepts a string or a function receiving `{ utility }` and returning a string.
+   * @awsuiSystem core
+   */
+  classNames?: TopNavigationProps.ClassNames;
 }
 
 export namespace TopNavigationProps {
+  export interface ClassNames {
+    root?: string;
+    utility?: string | ((args: { utility: TopNavigationProps.Utility }) => string);
+  }
+
   export interface Identity {
     title?: string;
     logo?: Logo;
@@ -93,6 +107,10 @@ export namespace TopNavigationProps {
     badge?: boolean;
     disableUtilityCollapse?: boolean;
     disableTextCollapse?: boolean;
+    /**
+     * @deprecated Use `classNames.utility` instead.
+     */
+    className?: string;
   }
 
   export interface MenuDropdownUtility extends BaseUtility {
diff --git a/src/top-navigation/internal.tsx b/src/top-navigation/internal.tsx
index eea5af6761..29b1d4a484 100644
--- a/src/top-navigation/internal.tsx
+++ b/src/top-navigation/internal.tsx
@@ -27,6 +27,7 @@ export default function InternalTopNavigation({
   i18nStrings,
   utilities,
   search,
+  classNames,
   ...restProps
 }: InternalTopNavigationProps) {
   checkSafeUrl('TopNavigation', identity.href);
@@ -47,6 +48,14 @@ export default function InternalTopNavigation({
     }
   };
 
+  const resolvedUtilities = utilities.map(utility => ({
+    ...utility,
+    className:
+      typeof classNames?.utility === 'function'
+        ? classNames.utility({ utility })
+        : (classNames?.utility ?? utility.className),
+  }));
+
   const toggleOverflowMenu = () => {
     setOverflowMenuOpen(overflowMenuOpen => !overflowMenuOpen);
   };
@@ -142,14 +151,14 @@ export default function InternalTopNavigation({
             )}
 
             {showUtilities &&
-              utilities
+              resolvedUtilities
                 .filter(
                   (_utility, i) =>
                     isVirtual || !responsiveState.hideUtilities || responsiveState.hideUtilities.indexOf(i) === -1
                 )
                 .map((utility, i) => {
                   const hideText = !!responsiveState.hideUtilityText;
-                  const isLast = (isVirtual || !showMenuTrigger) && i === utilities.length - 1;
+                  const isLast = (isVirtual || !showMenuTrigger) && i === resolvedUtilities.length - 1;
                   const offsetRight = isLast && isLargeViewport ? 'xxl' : isLast ? 'l' : undefined;
 
                   return (
@@ -173,9 +182,9 @@ export default function InternalTopNavigation({
                 })}
 
             {isVirtual &&
-              utilities.map((utility, i) => {
+              resolvedUtilities.map((utility, i) => {
                 const hideText = !responsiveState.hideUtilityText;
-                const isLast = !showMenuTrigger && i === utilities.length - 1;
+                const isLast = !showMenuTrigger && i === resolvedUtilities.length - 1;
                 const offsetRight = isLast && isLargeViewport ? 'xxl' : isLast ? 'l' : undefined;
 
                 return (
@@ -223,7 +232,7 @@ export default function InternalTopNavigation({
   };
 
   return (
-    <div {...baseProps} ref={__internalRootRef}>
+    <div {...baseProps} className={clsx(baseProps.className, classNames?.root)} ref={__internalRootRef}>
       <VisualContext contextName="top-navigation">
         {/* Render virtual content first to ensure React refs for content will be assigned on the actual nodes. */}
         {content(true)}
@@ -236,7 +245,7 @@ export default function InternalTopNavigation({
               headerText={i18nStrings?.overflowMenuTitleText}
               dismissIconAriaLabel={i18nStrings?.overflowMenuDismissIconAriaLabel}
               backIconAriaLabel={i18nStrings?.overflowMenuBackIconAriaLabel}
-              items={utilities.filter(
+              items={resolvedUtilities.filter(
                 (utility, i) =>
                   (!responsiveState.hideUtilities || responsiveState.hideUtilities.indexOf(i) !== -1) &&
                   !utility.disableUtilityCollapse
diff --git a/src/top-navigation/parts/utility.tsx b/src/top-navigation/parts/utility.tsx
index 6fc0df1003..d63420e40d 100644
--- a/src/top-navigation/parts/utility.tsx
+++ b/src/top-navigation/parts/utility.tsx
@@ -34,7 +34,7 @@ export default function Utility({ hideText, definition, offsetRight }: UtilityPr
     checkSafeUrl('TopNavigation', definition.href);
     if (definition.variant === 'primary-button') {
       return (
-        <span className={styles[`offset-right-${offsetRight}`]}>
+        <span className={clsx(styles[`offset-right-${offsetRight}`], definition.className)}>
           <InternalButton
             variant="primary"
             href={definition.href}
@@ -70,7 +70,7 @@ export default function Utility({ hideText, definition, offsetRight }: UtilityPr
     } else {
       // Link
       return (
-        <span className={styles[`offset-right-${offsetRight}`]}>
+        <span className={clsx(styles[`offset-right-${offsetRight}`], definition.className)}>
           <InternalLink
             variant="top-navigation"
             href={definition.href}
@@ -114,14 +114,16 @@ export default function Utility({ hideText, definition, offsetRight }: UtilityPr
     checkSafeUrlRecursively(definition.items);
 
     return (
-      <MenuDropdown
-        {...definition}
-        title={shouldShowTitle ? title : ''}
-        ariaLabel={ariaLabel}
-        offsetRight={offsetRight}
-      >
-        {!shouldHideText && definition.text}
-      </MenuDropdown>
+      <span className={definition.className} style={{ display: 'contents' }}>
+        <MenuDropdown
+          {...{ ...definition, className: undefined }}
+          title={shouldShowTitle ? title : ''}
+          ariaLabel={ariaLabel}
+          offsetRight={offsetRight}
+        >
+          {!shouldHideText && definition.text}
+        </MenuDropdown>
+      </span>
     );
   }
 
diff --git a/src/top-navigation/styles.scss b/src/top-navigation/styles.scss
index 6167698a8a..1711da593b 100644
--- a/src/top-navigation/styles.scss
+++ b/src/top-navigation/styles.scss
@@ -7,9 +7,11 @@
 @use '../internal/styles/tokens' as awsui;
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
+/* stylelint-disable custom-property-pattern */
+
 .top-navigation {
   @include styles.styles-reset;
-  background: awsui.$color-background-container-content;
+  background: var(--awsui-style-top-navigation-background, #{awsui.$color-background-container-content});
   border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
 
   > .padding-box {
@@ -62,10 +64,10 @@
     display: flex;
     align-items: center;
     text-decoration: none;
-    color: awsui.$color-text-top-navigation-title;
+    color: var(--awsui-style-top-navigation-title-color, #{awsui.$color-text-top-navigation-title});
 
     &:hover {
-      color: awsui.$color-text-accent;
+      color: var(--awsui-style-top-navigation-title-color-hover, #{awsui.$color-text-accent});
     }
 
     @include focus-visible.when-visible {
@@ -217,7 +219,7 @@
 
 .overflow-menu {
   @include styles.styles-reset;
-  background: awsui.$color-background-container-content;
+  background: var(--awsui-style-top-navigation-background, #{awsui.$color-background-container-content});
   block-size: 100%;
 }