diff --git a/build-tools/utils/themes.js b/build-tools/utils/themes.js
index 5066477bbf..9e97d1a6a6 100644
--- a/build-tools/utils/themes.js
+++ b/build-tools/utils/themes.js
@@ -13,7 +13,7 @@ const themes = [
     designTokensPackageJson: { name: '@cloudscape-design/design-tokens' },
     outputPath: path.join(workspace.targetPath, 'components'),
     primaryThemePath: './classic/index.js',
-    secondaryThemePaths: ['./visual-refresh-secondary/index.js'],
+    secondaryThemePaths: ['./visual-refresh-secondary/index.js', './one-theme-secondary/index.js'],
   },
 ];
 
diff --git a/pages/app/app-context.tsx b/pages/app/app-context.tsx
index b0b2d48bd8..5ccb49794b 100644
--- a/pages/app/app-context.tsx
+++ b/pages/app/app-context.tsx
@@ -14,6 +14,7 @@ interface AppUrlParams {
   visualRefresh: boolean;
   motionDisabled: boolean;
   appLayoutWidget: boolean;
+  oneTheme: boolean;
   mode?: Mode;
 }
 
@@ -34,6 +35,7 @@ const appContextDefaults: AppContextType = {
     visualRefresh: THEME === 'default',
     motionDisabled: false,
     appLayoutWidget: false,
+    oneTheme: false,
   },
   setMode: () => {},
   setUrlParams: () => {},
diff --git a/pages/app/components/theme-switcher.tsx b/pages/app/components/theme-switcher.tsx
index d6afde3416..7f8c2034fb 100644
--- a/pages/app/components/theme-switcher.tsx
+++ b/pages/app/components/theme-switcher.tsx
@@ -9,31 +9,46 @@ import SpaceBetween from '~components/space-between';
 
 import AppContext from '../app-context';
 
+type ThemeOption = 'classic' | 'visual-refresh' | 'one-theme';
+
 export default function ThemeSwitcher() {
   const { mode, urlParams, setUrlParams, setMode } = useContext(AppContext);
 
-  const vrSwitchProps: React.InputHTMLAttributes<HTMLInputElement> = {
-    id: 'visual-refresh-toggle',
-    type: 'checkbox',
+  const currentTheme: ThemeOption = urlParams.oneTheme
+    ? 'one-theme'
+    : urlParams.visualRefresh
+      ? 'visual-refresh'
+      : 'classic';
+
+  const setTheme = (next: ThemeOption) => {
+    setUrlParams({
+      visualRefresh: next === 'visual-refresh' || !!ALWAYS_VISUAL_REFRESH,
+      oneTheme: next === 'one-theme',
+    });
+    window.location.reload();
   };
 
-  if (ALWAYS_VISUAL_REFRESH) {
-    vrSwitchProps.checked = true;
-    vrSwitchProps.readOnly = true;
-  } else {
-    vrSwitchProps.checked = urlParams.visualRefresh;
-    vrSwitchProps.onChange = event => {
-      setUrlParams({ visualRefresh: event.target.checked });
-      window.location.reload();
-    };
-  }
+  const themeOptions: Array<{ value: ThemeOption; label: string; id: string; disabled?: boolean }> = [
+    { value: 'classic', label: 'Classic', id: 'classic-toggle', disabled: !!ALWAYS_VISUAL_REFRESH },
+    { value: 'visual-refresh', label: 'Visual refresh', id: 'visual-refresh-toggle' },
+    { value: 'one-theme', label: 'One theme', id: 'one-theme-toggle' },
+  ];
 
   return (
     <SpaceBetween direction="horizontal" size="xs">
-      <label>
-        <input {...vrSwitchProps} />
-        Visual refresh
-      </label>
+      {themeOptions.map(option => (
+        <label key={option.value}>
+          <input
+            id={option.id}
+            type="radio"
+            name="theme"
+            checked={currentTheme === option.value}
+            disabled={option.disabled}
+            onChange={() => setTheme(option.value)}
+          />
+          {option.label}
+        </label>
+      ))}
       <label>
         <input
           id="mode-toggle"
diff --git a/pages/app/index.tsx b/pages/app/index.tsx
index 10dcf497e5..02a201bb3c 100644
--- a/pages/app/index.tsx
+++ b/pages/app/index.tsx
@@ -95,7 +95,7 @@ function App() {
 }
 
 const history = createHashHistory();
-const { direction, visualRefresh, appLayoutWidget, appLayoutToolbar, appLayoutDelayedWidget } = parseQuery(
+const { direction, visualRefresh, appLayoutWidget, appLayoutToolbar, appLayoutDelayedWidget, oneTheme } = parseQuery(
   history.location.search
 );
 
@@ -114,6 +114,10 @@ window[awsuiCustomFlagsSymbol].appLayoutDelayedWidget = appLayoutDelayedWidget;
 // Apply the direction value to the HTML element dir attribute
 document.documentElement.setAttribute('dir', direction);
 
+if (oneTheme) {
+  document.body.classList.add('awsui-one-theme');
+}
+
 // Apply Safari-specific class to hide flaky scrollbars in tests
 const lowerCaseUserAgent = navigator.userAgent.toLowerCase();
 const isSafari = lowerCaseUserAgent.indexOf('safari') > -1 && lowerCaseUserAgent.indexOf('chrome') === -1;
diff --git a/style-dictionary/one-theme-secondary/index.ts b/style-dictionary/one-theme-secondary/index.ts
new file mode 100644
index 0000000000..f7cf111bd4
--- /dev/null
+++ b/style-dictionary/one-theme-secondary/index.ts
@@ -0,0 +1,17 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { ThemeBuilder } from '@cloudscape-design/theming-build';
+
+import { buildVisualRefresh } from '../one-theme/index.js';
+import { createColorMode, createDensityMode, createMotionMode } from '../utils/modes.js';
+
+const modes = [
+  createColorMode('.awsui-dark-mode'),
+  createDensityMode('.awsui-compact-mode'),
+  createMotionMode('.awsui-motion-disabled'),
+];
+
+const builder = new ThemeBuilder('one-theme', '.awsui-one-theme', modes);
+const theme = buildVisualRefresh(builder);
+
+export default theme;
diff --git a/style-dictionary/one-theme/borders.ts b/style-dictionary/one-theme/borders.ts
new file mode 100644
index 0000000000..854c637ca0
--- /dev/null
+++ b/style-dictionary/one-theme/borders.ts
@@ -0,0 +1,74 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { StyleDictionary } from '../utils/interfaces.js';
+
+export const tokens: StyleDictionary.BordersDictionary = {
+  borderActiveWidth: '4px',
+  borderCodeEditorStatusDividerWidth: '{borderDividerSectionWidth}',
+  borderContainerStickyWidth: '0px',
+  borderContainerTopWidth: '0px',
+  borderControlFocusRingShadowSpread: '1px',
+  borderControlInvalidFocusRingShadowSpread: '2px',
+  borderDividerListWidth: '1px',
+  borderDividerSectionWidth: '1px',
+  borderDropdownVirtualOffsetWidth: '2px',
+  borderInvalidWidth: '8px',
+  borderItemWidth: '2px',
+  borderLineChartDashArray: '3 5',
+  borderLineChartLineJoin: 'round',
+  borderLineChartWidth: '2px',
+  borderPanelHeaderWidth: '1px',
+  borderPanelTopWidth: '1px',
+  borderRadiusAlert: '{borderRadiusFlashbar}',
+  borderRadiusBadge: '4px',
+  borderRadiusButton: '8px',
+  borderRadiusCalendarDayFocusRing: '3px',
+  borderRadiusCodeEditor: '{borderRadiusInput}',
+  borderRadiusCardDefault: '{borderRadiusContainer}',
+  borderRadiusCardEmbedded: '{borderRadiusChatBubble}',
+  borderRadiusItemCardDefault: '{borderRadiusCardDefault}',
+  borderRadiusItemCardEmbedded: '{borderRadiusCardEmbedded}',
+  borderRadiusContainer: '16px',
+  borderRadiusControlCircularFocusRing: '4px',
+  borderRadiusControlDefaultFocusRing: '4px',
+  borderRadiusDropdown: '{borderRadiusItem}',
+  borderRadiusDropzone: '12px',
+  borderRadiusFlashbar: '12px',
+  borderRadiusItem: '8px',
+  borderRadiusInput: '8px',
+  borderRadiusPopover: '{borderRadiusInput}',
+  borderRadiusTabsFocusRing: '20px',
+  borderRadiusTiles: '{borderRadiusInput}',
+  borderRadiusToken: '{borderRadiusInput}',
+  borderRadiusChatBubble: '8px',
+  borderRadiusTutorialPanelItem: '{borderRadiusInput}',
+  borderTableStickyWidth: '1px',
+  borderLinkFocusRingOutline: '0',
+  borderLinkFocusRingShadowSpread: '2px',
+  borderWidthCard: '{borderDividerSectionWidth}',
+  borderWidthCardSelected: '{borderItemWidth}',
+  borderWidthItemCard: '{borderWidthCard}',
+  borderWidthItemCardHighlighted: '{borderWidthCardSelected}',
+  borderWidthItemSelected: '2px',
+  borderWidthAlert: '2px',
+  borderWidthAlertBlockStart: '{borderWidthAlert}',
+  borderWidthAlertBlockEnd: '{borderWidthAlert}',
+  borderWidthAlertInlineStart: '{borderWidthAlert}',
+  borderWidthAlertInlineEnd: '{borderWidthAlert}',
+  borderWidthButton: '2px',
+  borderWidthDropdown: '2px',
+  borderWidthField: '1px',
+  borderWidthPopover: '2px',
+  borderWidthToken: '2px',
+  borderWidthIconSmall: '2px',
+  borderWidthIconNormal: '2px',
+  borderWidthIconMedium: '2px',
+  borderWidthIconBig: '3px',
+  borderWidthIconLarge: '4px',
+  borderRadiusActionCardDefault: '{borderRadiusCardDefault}',
+  borderRadiusActionCardEmbedded: '{borderRadiusCardEmbedded}',
+  borderWidthActionCardDefault: '{borderWidthCard}',
+  borderWidthActionCardHover: '{borderWidthCard}',
+  borderWidthActionCardActive: '{borderWidthCard}',
+  borderWidthActionCardDisabled: '{borderWidthCard}',
+};
diff --git a/style-dictionary/one-theme/color-charts.ts b/style-dictionary/one-theme/color-charts.ts
new file mode 100644
index 0000000000..b57f3e64bf
--- /dev/null
+++ b/style-dictionary/one-theme/color-charts.ts
@@ -0,0 +1,167 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { expandColorDictionary } from '../utils/index.js';
+import { StyleDictionary } from '../utils/interfaces.js';
+
+const tokens: StyleDictionary.ColorChartsDictionary = {
+  colorChartsRed300: { light: '#ea7158', dark: '#d63f38' },
+  colorChartsRed400: { light: '#dc5032', dark: '#ed5958' },
+  colorChartsRed500: { light: '#d13313', dark: '#fe6e73' },
+  colorChartsRed600: { light: '#ba2e0f', dark: '#ff8a8a' },
+  colorChartsRed700: { light: '#a82a0c', dark: '#ffa09e' },
+  colorChartsRed800: { light: '#972709', dark: '#ffb3b0' },
+  colorChartsRed900: { light: '#892407', dark: '#ffc4c0' },
+  colorChartsRed1000: { light: '#7d2105', dark: '#ffd2cf' },
+  colorChartsRed1100: { light: '#721e03', dark: '#ffe0dd' },
+  colorChartsRed1200: { light: '#671c00', dark: '#ffecea' },
+  colorChartsOrange300: { light: '#e07941', dark: '#c55305' },
+  colorChartsOrange400: { light: '#cc5f21', dark: '#de6923' },
+  colorChartsOrange500: { light: '#bc4d01', dark: '#f27c36' },
+  colorChartsOrange600: { light: '#a84401', dark: '#f89256' },
+  colorChartsOrange700: { light: '#983c02', dark: '#fca572' },
+  colorChartsOrange800: { light: '#8a3603', dark: '#ffb68b' },
+  colorChartsOrange900: { light: '#7e3103', dark: '#ffc6a4' },
+  colorChartsOrange1000: { light: '#732c02', dark: '#ffd4bb' },
+  colorChartsOrange1100: { light: '#692801', dark: '#ffe1cf' },
+  colorChartsOrange1200: { light: '#602400', dark: '#ffede2' },
+  colorChartsYellow300: { light: '#b2911c', dark: '#977001' },
+  colorChartsYellow400: { light: '#9c7b0b', dark: '#b08400' },
+  colorChartsYellow500: { light: '#8a6b05', dark: '#c59600' },
+  colorChartsYellow600: { light: '#7b5f04', dark: '#d3a61c' },
+  colorChartsYellow700: { light: '#6f5504', dark: '#dfb52c' },
+  colorChartsYellow800: { light: '#654d03', dark: '#eac33a' },
+  colorChartsYellow900: { light: '#5d4503', dark: '#f1cf65' },
+  colorChartsYellow1000: { light: '#553f03', dark: '#f7db8a' },
+  colorChartsYellow1100: { light: '#4d3901', dark: '#fce5a8' },
+  colorChartsYellow1200: { light: '#483300', dark: '#ffefc9' },
+  colorChartsGreen300: { light: '#67a353', dark: '#48851a' },
+  colorChartsGreen400: { light: '#41902c', dark: '#5a9b29' },
+  colorChartsGreen500: { light: '#1f8104', dark: '#69ae34' },
+  colorChartsGreen600: { light: '#1a7302', dark: '#7dbd4c' },
+  colorChartsGreen700: { light: '#176702', dark: '#8fca61' },
+  colorChartsGreen800: { light: '#145d02', dark: '#9fd673' },
+  colorChartsGreen900: { light: '#125502', dark: '#b2df8d' },
+  colorChartsGreen1000: { light: '#104d01', dark: '#c5e7a8' },
+  colorChartsGreen1100: { light: '#0f4601', dark: '#d5efbe' },
+  colorChartsGreen1200: { light: '#0d4000', dark: '#e4f7d5' },
+  colorChartsTeal300: { light: '#2ea597', dark: '#018977' },
+  colorChartsTeal400: { light: '#1c8e81', dark: '#009d89' },
+  colorChartsTeal500: { light: '#0d7d70', dark: '#00b09b' },
+  colorChartsTeal600: { light: '#096f64', dark: '#40bfa9' },
+  colorChartsTeal700: { light: '#06645a', dark: '#5fccb7' },
+  colorChartsTeal800: { light: '#045b52', dark: '#77d7c3' },
+  colorChartsTeal900: { light: '#03524a', dark: '#94e0d0' },
+  colorChartsTeal1000: { light: '#014b44', dark: '#ace9db' },
+  colorChartsTeal1100: { light: '#01443e', dark: '#c2f0e6' },
+  colorChartsTeal1200: { light: '#003e38', dark: '#d7f7f0' },
+  colorChartsBlue1300: { light: '#529ccb', dark: '#00819c' },
+  colorChartsBlue1400: { light: '#3184c2', dark: '#0497ba' },
+  colorChartsBlue1500: { light: '#0273bb', dark: '#08aad2' },
+  colorChartsBlue1600: { light: '#0166ab', dark: '#44b9dd' },
+  colorChartsBlue1700: { light: '#015b9d', dark: '#63c6e7' },
+  colorChartsBlue1800: { light: '#015292', dark: '#79d2f0' },
+  colorChartsBlue1900: { light: '#014a87', dark: '#98dcf5' },
+  colorChartsBlue11000: { light: '#01437d', dark: '#b3e4f8' },
+  colorChartsBlue11100: { light: '#003c75', dark: '#caedfc' },
+  colorChartsBlue11200: { light: '#00366d', dark: '#ddf4ff' },
+  colorChartsBlue2300: { light: '#688ae8', dark: '#486de8' },
+  colorChartsBlue2400: { light: '#5978e3', dark: '#6384f5' },
+  colorChartsBlue2500: { light: '#4066df', dark: '#7698fe' },
+  colorChartsBlue2600: { light: '#3759ce', dark: '#8ea9ff' },
+  colorChartsBlue2700: { light: '#314fbf', dark: '#a2b8ff' },
+  colorChartsBlue2800: { light: '#2c46b1', dark: '#b1c5ff' },
+  colorChartsBlue2900: { light: '#273ea5', dark: '#c3d1ff' },
+  colorChartsBlue21000: { light: '#23379b', dark: '#d2dcff' },
+  colorChartsBlue21100: { light: '#1f3191', dark: '#dfe6ff' },
+  colorChartsBlue21200: { light: '#1b2b88', dark: '#ecf0ff' },
+  colorChartsPurple300: { light: '#a783e1', dark: '#8d59de' },
+  colorChartsPurple400: { light: '#9469d6', dark: '#a173ea' },
+  colorChartsPurple500: { light: '#8456ce', dark: '#b088f5' },
+  colorChartsPurple600: { light: '#7749bf', dark: '#bf9bf9' },
+  colorChartsPurple700: { light: '#6b40b2', dark: '#cbabfc' },
+  colorChartsPurple800: { light: '#6237a7', dark: '#d6baff' },
+  colorChartsPurple900: { light: '#59309d', dark: '#dfc8ff' },
+  colorChartsPurple1000: { light: '#512994', dark: '#e8d5ff' },
+  colorChartsPurple1100: { light: '#4a238b', dark: '#efe2ff' },
+  colorChartsPurple1200: { light: '#431d84', dark: '#f5edff' },
+  colorChartsPink300: { light: '#da7596', dark: '#c64a70' },
+  colorChartsPink400: { light: '#ce567c', dark: '#d56889' },
+  colorChartsPink500: { light: '#c33d69', dark: '#e07f9d' },
+  colorChartsPink600: { light: '#b1325c', dark: '#eb92ad' },
+  colorChartsPink700: { light: '#a32952', dark: '#f5a2bb' },
+  colorChartsPink800: { light: '#962249', dark: '#ffb0c8' },
+  colorChartsPink900: { light: '#8b1b42', dark: '#ffc1d4' },
+  colorChartsPink1000: { light: '#81143b', dark: '#ffd1de' },
+  colorChartsPink1100: { light: '#780d35', dark: '#ffdfe8' },
+  colorChartsPink1200: { light: '#6f062f', dark: '#ffecf1' },
+  colorChartsStatusCritical: { light: '{colorChartsRed1000}', dark: '{colorChartsRed300}' },
+  colorChartsStatusHigh: { light: '{colorChartsRed600}', dark: '{colorChartsRed500}' },
+  colorChartsStatusMedium: { light: '{colorChartsOrange400}', dark: '{colorChartsOrange600}' },
+  colorChartsStatusLow: { light: '{colorChartsYellow300}', dark: '{colorChartsYellow700}' },
+  colorChartsStatusPositive: { light: '{colorChartsGreen300}', dark: '{colorChartsGreen500}' },
+  colorChartsStatusInfo: { light: '{colorChartsBlue1400}', dark: '{colorChartsBlue1500}' },
+  colorChartsStatusNeutral: '{colorNeutral500}',
+  colorChartsThresholdNegative: { light: '{colorError600}', dark: '{colorError400}' },
+  colorChartsThresholdPositive: { light: '{colorSuccess600}', dark: '{colorSuccess500}' },
+  colorChartsThresholdInfo: { light: '{colorInfo600}', dark: '{colorInfo300}' },
+  colorChartsThresholdNeutral: { light: '{colorNeutral600}', dark: '{colorNeutral450}' },
+  colorChartsLineGrid: { light: '{colorNeutral300}', dark: '{colorNeutral650}' },
+  colorChartsLineTick: { light: '{colorNeutral300}', dark: '{colorNeutral650}' },
+  colorChartsLineAxis: { light: '{colorNeutral300}', dark: '{colorNeutral650}' },
+  colorChartsPaletteCategorical1: '{colorChartsBlue2300}',
+  colorChartsPaletteCategorical2: '{colorChartsPink500}',
+  colorChartsPaletteCategorical3: '{colorChartsTeal300}',
+  colorChartsPaletteCategorical4: '{colorChartsPurple500}',
+  colorChartsPaletteCategorical5: '{colorChartsOrange300}',
+  colorChartsPaletteCategorical6: '{colorChartsBlue2600}',
+  colorChartsPaletteCategorical7: '{colorChartsPink800}',
+  colorChartsPaletteCategorical8: '{colorChartsTeal600}',
+  colorChartsPaletteCategorical9: '{colorChartsPurple800}',
+  colorChartsPaletteCategorical10: '{colorChartsOrange600}',
+  colorChartsPaletteCategorical11: '{colorChartsBlue2900}',
+  colorChartsPaletteCategorical12: '{colorChartsPink1100}',
+  colorChartsPaletteCategorical13: '{colorChartsTeal900}',
+  colorChartsPaletteCategorical14: '{colorChartsPurple1100}',
+  colorChartsPaletteCategorical15: '{colorChartsOrange900}',
+  colorChartsPaletteCategorical16: '{colorChartsBlue21200}',
+  colorChartsPaletteCategorical17: '{colorChartsPink400}',
+  colorChartsPaletteCategorical18: '{colorChartsTeal1200}',
+  colorChartsPaletteCategorical19: '{colorChartsPurple400}',
+  colorChartsPaletteCategorical20: '{colorChartsOrange1200}',
+  colorChartsPaletteCategorical21: '{colorChartsBlue2500}',
+  colorChartsPaletteCategorical22: '{colorChartsPink700}',
+  colorChartsPaletteCategorical23: '{colorChartsTeal500}',
+  colorChartsPaletteCategorical24: '{colorChartsPurple700}',
+  colorChartsPaletteCategorical25: '{colorChartsOrange500}',
+  colorChartsPaletteCategorical26: '{colorChartsBlue2800}',
+  colorChartsPaletteCategorical27: '{colorChartsPink1000}',
+  colorChartsPaletteCategorical28: '{colorChartsTeal800}',
+  colorChartsPaletteCategorical29: '{colorChartsPurple1000}',
+  colorChartsPaletteCategorical30: '{colorChartsOrange800}',
+  colorChartsPaletteCategorical31: '{colorChartsBlue21100}',
+  colorChartsPaletteCategorical32: '{colorChartsPink300}',
+  colorChartsPaletteCategorical33: '{colorChartsTeal1100}',
+  colorChartsPaletteCategorical34: '{colorChartsPurple300}',
+  colorChartsPaletteCategorical35: '{colorChartsOrange1100}',
+  colorChartsPaletteCategorical36: '{colorChartsBlue2400}',
+  colorChartsPaletteCategorical37: '{colorChartsPink600}',
+  colorChartsPaletteCategorical38: '{colorChartsTeal400}',
+  colorChartsPaletteCategorical39: '{colorChartsPurple600}',
+  colorChartsPaletteCategorical40: '{colorChartsOrange400}',
+  colorChartsPaletteCategorical41: '{colorChartsBlue2700}',
+  colorChartsPaletteCategorical42: '{colorChartsPink900}',
+  colorChartsPaletteCategorical43: '{colorChartsTeal700}',
+  colorChartsPaletteCategorical44: '{colorChartsPurple900}',
+  colorChartsPaletteCategorical45: '{colorChartsOrange700}',
+  colorChartsPaletteCategorical46: '{colorChartsBlue21000}',
+  colorChartsPaletteCategorical47: '{colorChartsPink1200}',
+  colorChartsPaletteCategorical48: '{colorChartsTeal1000}',
+  colorChartsPaletteCategorical49: '{colorChartsPurple1200}',
+  colorChartsPaletteCategorical50: '{colorChartsOrange1000}',
+  colorChartsErrorBarMarker: { light: '{colorNeutral900}', dark: '{colorWhite}' },
+};
+
+const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens);
+
+export { expandedTokens as tokens };
+export const mode: StyleDictionary.ModeIdentifier = 'color';
diff --git a/style-dictionary/one-theme/color-palette.ts b/style-dictionary/one-theme/color-palette.ts
new file mode 100644
index 0000000000..b9c75b7770
--- /dev/null
+++ b/style-dictionary/one-theme/color-palette.ts
@@ -0,0 +1,151 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import pick from 'lodash/pick.js';
+
+import { ReferenceTokens } from '@cloudscape-design/theming-build';
+
+import { paletteTokens as brand } from '../core/color-palette.js';
+import { expandColorDictionary, expandReferenceTokens } from '../utils/index.js';
+import { StyleDictionary } from '../utils/interfaces.js';
+
+/**
+ * @deprecated These color palette tokens are deprecated and may be removed in a future version.
+ * Use semantic reference tokens instead:
+ * - colorGrey* → colorNeutral*
+ * - colorBlue* → colorPrimary* or colorInfo*
+ * - colorRed* → colorError*
+ * - colorGreen* → colorSuccess*
+ * - colorYellow* → colorWarning*
+ *
+ * Reference tokens provide better semantic meaning and consistency across themes.
+ */
+const tokens: StyleDictionary.ColorPaletteDictionary = {
+  ...pick(brand, [
+    'colorGrey50',
+    'colorGrey100',
+    'colorGrey150',
+    'colorGrey200',
+    'colorGrey250',
+    'colorGrey300',
+    'colorGrey350',
+    'colorGrey400',
+    'colorGrey450',
+    'colorGrey500',
+    'colorGrey600',
+    'colorGrey650',
+    'colorGrey700',
+    'colorGrey750',
+    'colorGrey800',
+    'colorGrey850',
+    'colorGrey900',
+    'colorGrey950',
+    'colorGrey1000',
+    'colorBlue50',
+    'colorBlue100',
+    'colorBlue200',
+    'colorBlue300',
+    'colorBlue400',
+    'colorBlue600',
+    'colorBlue700',
+    'colorBlue900',
+    'colorBlue1000',
+    'colorGreen50',
+    'colorGreen500',
+    'colorGreen600',
+    'colorGreen900',
+    'colorGreen1000',
+    'colorRed50',
+    'colorRed400',
+    'colorRed600',
+    'colorRed900',
+    'colorRed1000',
+    'colorYellow50',
+    'colorYellow400',
+    'colorYellow500',
+    'colorYellow900',
+    'colorYellow1000',
+    'colorPurple400',
+    'colorPurple700',
+    'colorAmber400',
+    'colorAmber500',
+    'colorAwsSquidInk',
+    'colorTransparent',
+    'colorBlack',
+    'colorWhite',
+  ]),
+};
+
+// Reference tokens for visual-refresh theme
+const referenceTokens: ReferenceTokens = {
+  color: {
+    primary: {
+      50: brand.colorBlue50,
+      100: brand.colorBlue100,
+      200: brand.colorBlue200,
+      300: brand.colorBlue300,
+      400: brand.colorBlue400,
+      500: brand.colorBlue500,
+      600: brand.colorBlue600, // a11y
+      700: brand.colorBlue700,
+      800: brand.colorBlue800,
+      900: brand.colorBlue900,
+      1000: brand.colorBlue1000,
+    },
+    neutral: {
+      50: brand.colorGrey50,
+      100: brand.colorGrey100,
+      150: brand.colorGrey150,
+      200: brand.colorGrey200,
+      250: brand.colorGrey250,
+      300: brand.colorGrey300,
+      350: brand.colorGrey350,
+      400: brand.colorGrey400,
+      450: brand.colorGrey450,
+      500: brand.colorGrey500, // a11y
+      550: brand.colorGrey550,
+      600: brand.colorGrey600,
+      650: brand.colorGrey650,
+      700: brand.colorGrey700,
+      750: brand.colorGrey750,
+      800: brand.colorGrey800,
+      850: brand.colorGrey850,
+      900: brand.colorGrey900,
+      950: brand.colorGrey950,
+      1000: brand.colorGrey1000,
+    },
+    error: {
+      50: brand.colorRed50,
+      400: brand.colorRed400,
+      600: brand.colorRed600,
+      900: brand.colorRed900,
+      1000: brand.colorRed1000,
+    },
+    success: {
+      50: brand.colorGreen50,
+      500: brand.colorGreen500,
+      600: brand.colorGreen600,
+      1000: brand.colorGreen1000,
+    },
+    warning: {
+      50: brand.colorYellow50,
+      400: brand.colorYellow400,
+      500: brand.colorYellow500,
+      900: brand.colorYellow900,
+      1000: brand.colorYellow1000,
+    },
+    info: {
+      50: brand.colorBlue50,
+      300: brand.colorBlue300,
+      400: brand.colorBlue400,
+      600: brand.colorBlue600,
+      1000: brand.colorBlue1000,
+    },
+  },
+};
+
+const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens);
+const expandedReferenceTokens: ReferenceTokens = expandReferenceTokens(referenceTokens);
+
+export const mode: StyleDictionary.ModeIdentifier = 'color';
+export { expandedTokens as tokens };
+export { expandedReferenceTokens as referenceTokens };
diff --git a/style-dictionary/one-theme/color-severity.ts b/style-dictionary/one-theme/color-severity.ts
new file mode 100644
index 0000000000..9d538bd812
--- /dev/null
+++ b/style-dictionary/one-theme/color-severity.ts
@@ -0,0 +1,30 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { expandColorDictionary } from '../utils/index.js';
+import { StyleDictionary } from '../utils/interfaces.js';
+
+const tokens: StyleDictionary.ColorSeverityDictionary = {
+  // note: these should not be used directly. Instead, use the semantic tokens defined below.
+  colorSeverityDarkRed: { light: '#870303', dark: '#d63f38' },
+  colorSeverityRed: { light: '#ce3311', dark: '#fe6e73' },
+  colorSeverityOrange: { light: '#f89256', dark: '#f89256' },
+  colorSeverityYellow: { light: '#f2cd54', dark: '#f2cd54' },
+  colorSeverityGrey: '{colorNeutral600}',
+
+  colorBackgroundNotificationSeverityCritical: '{colorSeverityDarkRed}',
+  colorBackgroundNotificationSeverityHigh: '{colorSeverityRed}',
+  colorBackgroundNotificationSeverityMedium: '{colorSeverityOrange}',
+  colorBackgroundNotificationSeverityLow: '{colorSeverityYellow}',
+  colorBackgroundNotificationSeverityNeutral: '{colorSeverityGrey}',
+
+  colorTextNotificationSeverityCritical: { light: '{colorNeutral100}', dark: '{colorBlack}' },
+  colorTextNotificationSeverityHigh: { light: '{colorNeutral100}', dark: '{colorNeutral950}' },
+  colorTextNotificationSeverityMedium: '{colorNeutral950}',
+  colorTextNotificationSeverityLow: '{colorNeutral950}',
+  colorTextNotificationSeverityNeutral: '{colorNeutral100}',
+};
+
+const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens);
+
+export { expandedTokens as tokens };
+export const mode: StyleDictionary.ModeIdentifier = 'color';
diff --git a/style-dictionary/one-theme/colors.ts b/style-dictionary/one-theme/colors.ts
new file mode 100644
index 0000000000..b76615125b
--- /dev/null
+++ b/style-dictionary/one-theme/colors.ts
@@ -0,0 +1,333 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { expandColorDictionary } from '../utils/index.js';
+import { StyleDictionary } from '../utils/interfaces.js';
+
+const tokens: StyleDictionary.ColorsDictionary = {
+  colorGreyOpaque10: 'rgba(0, 0, 0, 0.1)',
+  colorGreyOpaque25: 'rgba(255, 255, 255, 0.25)',
+  colorGreyOpaque40: 'rgba(0, 0, 0, 0.4)',
+  colorGreyOpaque50: 'rgba(0, 0, 0, 0.5)',
+  colorGreyOpaque70: { light: 'rgba(35, 43, 55, 0.7)', dark: 'rgba(15, 20, 26, 0.7)' },
+  colorGreyOpaque80: 'rgba(22, 25, 31, 0.8)',
+  colorGreyOpaque90: 'rgba(242, 243, 243, 0.9)',
+  colorGreyTransparent: { light: 'rgba(15, 20, 26, 0.12)', dark: 'rgba(15, 20, 26, 1)' },
+  colorGreyTransparentHeavy: { light: 'rgba(15, 20, 26, 0.12)', dark: 'rgba(15, 20, 26, 1)' },
+  colorGreyTransparentLight: { light: 'rgba(15, 20, 26, 0.12)', dark: 'rgba(15, 20, 26, 1)' },
+  colorBackgroundBadgeIcon: { light: '{colorError600}', dark: '{colorError400}' },
+  colorBackgroundButtonLinkActive: { light: '{colorPrimary100}', dark: '{colorNeutral700}' },
+  colorBackgroundButtonLinkDefault: { light: 'transparent', dark: 'transparent' },
+  colorBackgroundButtonLinkDisabled: { light: 'transparent', dark: 'transparent' },
+  colorBackgroundButtonLinkHover: { light: '{colorPrimary50}', dark: '{colorNeutral800}' },
+  colorBackgroundButtonNormalActive: { light: '{colorPrimary100}', dark: '{colorNeutral700}' },
+  colorBackgroundButtonNormalDefault: { light: '{colorWhite}', dark: '{colorNeutral850}' },
+  colorBackgroundButtonNormalDisabled: { light: '{colorWhite}', dark: '{colorNeutral850}' },
+  colorBackgroundButtonNormalHover: { light: '{colorPrimary50}', dark: '{colorNeutral800}' },
+  colorBackgroundToggleButtonNormalPressed: { light: '{colorPrimary100}', dark: '{colorNeutral700}' },
+  colorBackgroundButtonPrimaryActive: { light: '#5c7fff', dark: '#5c7fff' },
+  colorBackgroundButtonPrimaryDefault: { light: '#5c7fff', dark: '#5c7fff' },
+  colorBackgroundButtonPrimaryDisabled: { light: '{colorNeutral250}', dark: '{colorNeutral750}' },
+  colorBackgroundButtonPrimaryHover: { light: '#7598ff', dark: '#7598ff' },
+  colorBackgroundDirectionButtonActive: '{colorNeutral750}',
+  colorBackgroundDirectionButtonDefault: '{colorNeutral650}',
+  colorBackgroundDirectionButtonDisabled: { light: '{colorNeutral250}', dark: '{colorNeutral750}' },
+  colorBackgroundDirectionButtonHover: '{colorNeutral700}',
+  colorTextDirectionButtonDefault: '{colorWhite}',
+  colorTextDirectionButtonDisabled: '{colorTextInteractiveDisabled}',
+  colorBackgroundCalendarCurrentDate: { light: '{colorNeutral200}', dark: '{colorNeutral700}' },
+  colorBackgroundCellShaded: { light: '{colorNeutral150}', dark: '{colorNeutral800}' },
+  colorBackgroundCodeEditorGutterActiveLineDefault: { light: '{colorNeutral600}', dark: '{colorNeutral500}' },
+  colorBackgroundCodeEditorGutterActiveLineError: '{colorTextStatusError}',
+  colorBackgroundCodeEditorGutterDefault: { light: '{colorNeutral200}', dark: '{colorNeutral800}' },
+  colorBackgroundCodeEditorLoading: { light: '{colorNeutral100}', dark: '{colorNeutral800}' },
+  colorBackgroundCodeEditorPaneItemHover: { light: '{colorNeutral250}', dark: '{colorNeutral700}' },
+  colorBackgroundCodeEditorStatusBar: { light: '{colorNeutral200}', dark: '{colorNeutral800}' },
+  colorBackgroundCard: '{colorBackgroundContainerContent}',
+  colorBackgroundItemCard: '{colorBackgroundCard}',
+  colorBackgroundContainerContent: { light: '{colorWhite}', dark: '{colorNeutral850}' },
+  colorBackgroundContainerHeader: { light: '{colorWhite}', dark: '{colorNeutral850}' },
+  colorBackgroundControlChecked: { light: '{colorPrimary600}', dark: '{colorPrimary400}' },
+  colorBackgroundControlDefault: { light: '{colorWhite}', dark: '{colorNeutral850}' },
+  colorBackgroundControlDisabled: { light: '{colorNeutral300}', dark: '{colorNeutral700}' },
+  colorBackgroundDropdownItemDefault: { light: '{colorWhite}', dark: '{colorNeutral800}' },
+  colorBackgroundDropdownItemDimmed: 'transparent',
+  colorBackgroundDropdownItemFilterMatch: { light: '{colorPrimary50}', dark: '{colorNeutral700}' },
+  colorBackgroundDropdownItemHover: { light: '{colorNeutral200}', dark: '{colorNeutral900}' },
+  colorBackgroundDropdownItemSelected: '{colorBackgroundItemSelected}',
+  colorBackgroundHomeHeader: '{colorNeutral950}',
+  colorBackgroundInlineCode: { light: 'rgba(0, 0, 0, 0.1)', dark: 'rgba(255, 255, 255, 0.1)' },
+  colorBackgroundInputDefault: { light: '{colorWhite}', dark: '{colorNeutral850}' },
+  colorBackgroundInputDisabled: { light: '{colorNeutral250}', dark: '{colorNeutral800}' },
+  colorBackgroundItemSelected: { light: '{colorPrimary50}', dark: '{colorPrimary1000}' },
+  colorBackgroundLayoutMain: { light: '{colorWhite}', dark: '{colorNeutral850}' },
+  colorBackgroundDrawer: '{colorBackgroundLayoutPanelContent}',
+  colorBackgroundDrawerBackdrop: '{colorGreyOpaque70}',
+  colorBackgroundLayoutMobilePanel: '{colorNeutral950}',
+  colorBackgroundLayoutPanelContent: '{colorBackgroundContainerContent}',
+  colorBackgroundLayoutPanelHover: { light: '{colorNeutral250}', dark: '{colorNeutral700}' },
+  colorBackgroundLayoutToolbar: '{colorBackgroundLayoutPanelContent}',
+  colorBackgroundLayoutToggleActive: '{colorNeutral650}',
+  colorBackgroundLayoutToggleDefault: '{colorNeutral650}',
+  colorBackgroundLayoutToggleHover: '{colorNeutral600}',
+  colorBackgroundLayoutToggleSelectedActive: { light: '{colorPrimary600}', dark: '{colorPrimary400}' },
+  colorBackgroundLayoutToggleSelectedDefault: { light: '{colorPrimary600}', dark: '{colorPrimary400}' },
+  colorBackgroundLayoutToggleSelectedHover: { light: '{colorPrimary700}', dark: '{colorPrimary300}' },
+  colorBackgroundModalOverlay: '{colorGreyOpaque70}',
+  colorBackgroundNotificationBlue: '{colorInfo600}',
+  colorBackgroundNotificationGreen: '{colorSuccess600}',
+  colorBackgroundNotificationGrey: { light: '{colorNeutral650}', dark: '{colorNeutral600}' },
+  colorBackgroundNotificationRed: '{colorError600}',
+  colorBackgroundNotificationYellow: '{colorWarning400}',
+  colorBackgroundNotificationStackBar: '{colorNeutral750}',
+  colorBackgroundNotificationStackBarActive: '{colorNeutral750}',
+  colorBackgroundNotificationStackBarHover: '{colorNeutral650}',
+  colorBackgroundPopover: { light: '{colorWhite}', dark: '{colorNeutral800}' },
+  colorBackgroundProgressBarValueDefault: { light: '{colorPrimary600}', dark: '{colorPrimary400}' },
+  colorBackgroundProgressBarDefault: { light: '{colorNeutral250}', dark: '{colorNeutral700}' },
+  colorBackgroundSegmentActive: { light: '{colorPrimary600}', dark: '{colorPrimary400}' },
+  colorBackgroundSegmentDefault: '{colorBackgroundButtonNormalDefault}',
+  colorBackgroundSegmentDisabled: '{colorBackgroundButtonNormalDisabled}',
+  colorBackgroundSegmentHover: '{colorBackgroundButtonNormalHover}',
+  colorBackgroundSegmentWrapper: '{colorBackgroundContainerContent}',
+  colorBackgroundSliderRangeDefault: '{colorBackgroundSliderHandleDefault}',
+  colorBackgroundSliderRangeActive: '{colorBackgroundSliderHandleActive}',
+  colorBackgroundSliderHandleDefault: { light: '{colorPrimary600}', dark: '{colorPrimary400}' },
+  colorBackgroundSliderHandleActive: { light: '{colorPrimary700}', dark: '{colorPrimary300}' },
+  colorBackgroundSliderTrackDefault: { light: '{colorNeutral500}', dark: '{colorNeutral600}' },
+  colorBackgroundSliderHandleRing: { light: '{colorWhite}', dark: '{colorNeutral850}' },
+  colorBackgroundSliderHandleErrorDefault: '{colorTextStatusError}',
+  colorBackgroundSliderHandleErrorActive: '{colorTextStatusError}',
+  colorBackgroundSliderHandleWarningDefault: '{colorTextStatusWarning}',
+  colorBackgroundSliderHandleWarningActive: '{colorTextStatusWarning}',
+  colorBackgroundSliderRangeErrorDefault: '{colorTextStatusError}',
+  colorBackgroundSliderRangeErrorActive: '{colorTextStatusError}',
+  colorBackgroundSliderRangeWarningDefault: '{colorTextStatusWarning}',
+  colorBackgroundSliderRangeWarningActive: '{colorTextStatusWarning}',
+  colorBackgroundStatusError: { light: '{colorError50}', dark: '{colorError1000}' },
+  colorBackgroundStatusInfo: { light: '{colorInfo50}', dark: '{colorInfo1000}' },
+  colorBackgroundDialog: '{colorBackgroundStatusInfo}',
+  colorBackgroundStatusSuccess: { light: '{colorSuccess50}', dark: '{colorSuccess1000}' },
+  colorBackgroundStatusWarning: { light: '{colorWarning50}', dark: '{colorWarning1000}' },
+  colorBackgroundTableHeader: '{colorBackgroundContainerHeader}',
+  colorBackgroundTilesDisabled: { light: '{colorNeutral250}', dark: '{colorNeutral800}' },
+  colorBackgroundToggleCheckedDisabled: { light: '{colorPrimary200}', dark: '{colorPrimary900}' },
+  colorBackgroundToggleDefault: { light: '{colorNeutral650}', dark: '{colorNeutral500}' },
+  colorBackgroundAvatarGenAi:
+    'radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)',
+  colorBackgroundAvatarDefault: '{colorNeutral650}',
+  colorTextAvatar: '{colorWhite}',
+  colorBackgroundLoadingBarGenAi:
+    'linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)',
+  colorBackgroundChatBubbleOutgoing: 'transparent',
+  colorBackgroundChatBubbleIncoming: { light: '{colorNeutral150}', dark: '{colorNeutral950}' },
+  colorTextChatBubbleOutgoing: '{colorTextBodyDefault}',
+  colorTextChatBubbleIncoming: '{colorTextBodyDefault}',
+  colorBorderButtonLinkDisabled: '{colorBackgroundButtonLinkDisabled}',
+  colorBorderButtonNormalActive: { light: '{colorPrimary900}', dark: '{colorPrimary300}' },
+  colorBorderButtonNormalDefault: { light: '{colorPrimary600}', dark: '{colorPrimary400}' },
+  colorBorderToggleButtonNormalPressed: { light: '{colorPrimary600}', dark: '{colorPrimary400}' },
+  colorBorderButtonNormalDisabled: { light: '{colorNeutral400}', dark: '{colorNeutral600}' },
+  colorTextButtonNormalDisabled: { light: '{colorNeutral500}', dark: '{colorNeutral500}' },
+  colorBorderButtonNormalHover: { light: '{colorPrimary900}', dark: '{colorPrimary300}' },
+  colorTextButtonIconDisabled: { light: '{colorNeutral500}', dark: '{colorNeutral500}' },
+  colorBorderButtonPrimaryActive: '{colorBackgroundButtonPrimaryActive}',
+  colorBorderButtonPrimaryDefault: '{colorBackgroundButtonPrimaryDefault}',
+  colorBorderButtonPrimaryDisabled: '{colorBackgroundButtonPrimaryDisabled}',
+  colorBorderButtonPrimaryHover: '{colorBackgroundButtonPrimaryHover}',
+  colorTextButtonPrimaryDisabled: { light: '{colorNeutral500}', dark: '{colorNeutral500}' },
+  colorItemSelected: { light: '{colorPrimary600}', dark: '{colorPrimary400}' },
+  colorBorderCalendarGrid: 'transparent',
+  colorBorderCalendarGridSelectedFocusRing: { light: '{colorNeutral100}', dark: '{colorNeutral850}' },
+  colorBorderCellShaded: { light: '{colorNeutral300}', dark: '{colorNeutral700}' },
+  colorBorderCodeEditorAceActiveLineLightTheme: '{colorNeutral300}',
+  colorBorderCodeEditorAceActiveLineDarkTheme: '{colorNeutral600}',
+  colorBorderCodeEditorDefault: { light: '{colorNeutral300}', dark: '{colorNeutral600}' },
+  colorBorderCodeEditorPaneItemHover: '{colorBorderDropdownItemHover}',
+  colorBorderCard: '{colorBorderDividerDefault}',
+  colorBorderCardHighlighted: '{colorBorderItemSelected}',
+  colorBorderItemCard: '{colorBorderCard}',
+  colorBorderItemCardHighlighted: '{colorBorderCardHighlighted}',
+  colorBorderContainerDivider: 'transparent',
+  colorBorderContainerTop: 'transparent',
+  colorBorderControlChecked: '{colorBackgroundControlChecked}',
+  colorBorderControlDefault: '{colorNeutral500}',
+  colorBorderControlDisabled: '{colorBackgroundControlDisabled}',
+  colorBorderDividerActive: { light: '{colorNeutral950}', dark: '{colorNeutral100}' },
+  colorBorderDividerDefault: { light: '{colorNeutral350}', dark: '{colorNeutral650}' },
+  colorBorderDividerPanelBottom: '{colorBorderDividerDefault}',
+  colorBorderDividerPanelSide: '{colorBorderDividerDefault}',
+  colorBorderDividerSecondary: { light: '{colorNeutral250}', dark: '{colorNeutral750}' },
+  colorBorderDropdownContainer: { light: '{colorNeutral400}', dark: '{colorNeutral600}' },
+  colorBorderDropdownGroup: '{colorBorderDropdownItemDefault}',
+  colorBorderDropdownItemDefault: '{colorBorderDividerDefault}',
+  colorBorderDropdownItemHover: { light: '{colorNeutral500}', dark: '{colorNeutral600}' },
+  colorBorderDropdownItemDimmedHover: '{colorNeutral500}',
+  colorBorderDropdownItemSelected: '{colorBorderItemSelected}',
+  colorBorderDropdownItemTop: 'transparent',
+  colorBorderEditableCellHover: '{colorBorderDropdownItemHover}',
+  colorBorderInputDefault: { light: '{colorNeutral500}', dark: '{colorNeutral600}' },
+  colorBorderInputDisabled: '{colorBackgroundInputDisabled}',
+  colorBorderInputFocused: { light: '{colorPrimary600}', dark: '{colorPrimary400}' },
+  colorBorderItemFocused: { light: '{colorPrimary600}', dark: '{colorPrimary400}' },
+  colorBorderDropdownItemFocused: { light: '{colorNeutral650}', dark: '{colorNeutral300}' },
+  colorBorderItemPlaceholder: '{colorBorderItemSelected}',
+  colorBorderItemSelected: '{colorItemSelected}',
+  colorBorderLayout: { light: '{colorNeutral350}', dark: '{colorNeutral650}' },
+  colorBorderNotificationStackBar: '{colorNeutral750}',
+  colorBorderPanelHeader: '{colorBorderDividerDefault}',
+  colorBorderPopover: '{colorBorderDropdownContainer}',
+  colorBorderSegmentActive: '{colorBorderSegmentDefault}',
+  colorBorderSegmentDefault: { light: '{colorNeutral650}', dark: '{colorNeutral300}' },
+  colorBorderSegmentDisabled: '{colorBorderSegmentDefault}',
+  colorBorderSegmentHover: '{colorBorderSegmentDefault}',
+  colorBorderStatusError: { light: '{colorError600}', dark: '{colorError400}' },
+  colorBorderStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo400}' },
+  colorBorderStatusSuccess: { light: '{colorSuccess600}', dark: '{colorSuccess500}' },
+  colorBorderStatusWarning: { light: '{colorWarning900}', dark: '{colorWarning500}' },
+  colorBorderDialog: '{colorBorderStatusInfo}',
+  colorBorderDividerInteractiveDefault: { light: '{colorNeutral500}', dark: '{colorNeutral300}' },
+  colorBorderTabsDivider: { light: '{colorNeutral350}', dark: '{colorNeutral650}' },
+  colorBorderTabsShadow: '{colorGreyTransparent}',
+  colorBorderTabsUnderline: '{colorTextAccent}',
+  colorBorderTilesDisabled: '{colorBackgroundTilesDisabled}',
+  colorBorderTutorial: { light: '{colorNeutral300}', dark: '{colorNeutral650}' },
+  colorForegroundControlDefault: { light: '{colorWhite}', dark: '{colorNeutral950}' },
+  colorForegroundControlDisabled: { light: '{colorWhite}', dark: '{colorNeutral850}' },
+  colorForegroundControlReadOnly: { light: '{colorNeutral600}', dark: '{colorNeutral450}' },
+  colorShadowDefault: '{colorGreyTransparentHeavy}',
+  colorShadowMedium: '{colorGreyTransparent}',
+  colorShadowSide: '{colorGreyTransparentLight}',
+  colorStrokeChartLine: '{colorNeutral500}',
+  colorStrokeCodeEditorGutterActiveLineDefault: { light: '{colorNeutral300}', dark: '{colorNeutral800}' },
+  colorStrokeCodeEditorGutterActiveLineHover: { light: '{colorNeutral100}', dark: '{colorNeutral950}' },
+  colorTextAccent: { light: '{colorPrimary600}', dark: '{colorPrimary400}' },
+  colorTextBodyDefault: { light: '{colorNeutral950}', dark: '{colorNeutral350}' },
+  colorTextBodySecondary: { light: '{colorNeutral650}', dark: '{colorNeutral350}' },
+  colorTextBreadcrumbCurrent: { light: '{colorNeutral600}', dark: '{colorNeutral500}' },
+  colorTextBreadcrumbIcon: { light: '{colorNeutral500}', dark: '{colorTextInteractiveDisabled}' },
+  colorTextButtonInlineIconDefault: '{colorTextLinkDefault}',
+  colorTextButtonInlineIconDisabled: '{colorTextInteractiveDisabled}',
+  colorTextButtonInlineIconHover: '{colorTextLinkHover}',
+  colorTextButtonNormalActive: { light: '{colorPrimary900}', dark: '{colorPrimary300}' },
+  colorTextToggleButtonNormalPressed: { light: '{colorPrimary900}', dark: '{colorPrimary300}' },
+  colorTextButtonNormalDefault: { light: '{colorPrimary600}', dark: '{colorPrimary400}' },
+  colorTextButtonNormalHover: { light: '{colorPrimary900}', dark: '{colorPrimary300}' },
+  colorTextLinkButtonNormalDefault: '{colorTextButtonNormalDefault}',
+  colorTextLinkButtonNormalHover: '{colorTextButtonNormalHover}',
+  colorTextLinkButtonNormalActive: '{colorTextButtonNormalActive}',
+  colorTextButtonLinkActive: '{colorTextButtonNormalActive}',
+  colorTextButtonLinkDefault: '{colorTextButtonNormalDefault}',
+  colorTextButtonLinkDisabled: '{colorTextInteractiveDisabled}',
+  colorTextButtonLinkHover: '{colorTextButtonNormalHover}',
+  colorTextButtonPrimaryActive: { light: '{colorWhite}', dark: '{colorNeutral950}' },
+  colorTextButtonPrimaryDefault: { light: '{colorWhite}', dark: '{colorNeutral950}' },
+  colorTextButtonPrimaryHover: { light: '{colorWhite}', dark: '{colorNeutral950}' },
+  colorTextCalendarDateHover: '{colorTextDropdownItemDefault}',
+  colorTextCalendarMonth: { light: '{colorNeutral600}', dark: '{colorNeutral450}' },
+  colorTextCodeEditorGutterActiveLine: { light: '{colorWhite}', dark: '{colorNeutral950}' },
+  colorTextCodeEditorGutterDefault: { light: '{colorNeutral950}', dark: '{colorNeutral300}' },
+  colorTextCodeEditorStatusBarDisabled: { light: '{colorNeutral500}', dark: '{colorNeutral600}' },
+  colorTextCodeEditorTabButtonError: { light: '{colorWhite}', dark: '{colorNeutral950}' },
+  colorTextColumnHeader: { light: '{colorNeutral650}', dark: '{colorNeutral400}' },
+  colorTextColumnSortingIcon: '{colorTextColumnHeader}',
+  colorTextControlDisabled: '{colorTextInteractiveDisabled}',
+  colorTextCounter: { light: '{colorNeutral600}', dark: '{colorNeutral450}' },
+  colorTextDisabled: { light: '{colorNeutral400}', dark: '{colorNeutral600}' },
+  colorTextDisabledInlineEdit: { light: '{colorNeutral650}', dark: '{colorNeutral400}' },
+  colorTextDropdownFooter: '{colorTextFormSecondary}',
+  colorTextDropdownGroupLabel: '{colorTextGroupLabel}',
+  colorTextDropdownItemDefault: { light: '{colorNeutral950}', dark: '{colorNeutral300}' },
+  colorTextDropdownItemDimmed: '{colorTextInteractiveDisabled}',
+  colorTextDropdownItemDisabled: '{colorTextInteractiveDisabled}',
+  colorTextDropdownItemFilterMatch: { light: '{colorPrimary600}', dark: '{colorPrimary300}' },
+  colorTextDropdownItemHighlighted: { light: '{colorNeutral950}', dark: '{colorNeutral250}' },
+  colorTextDropdownItemSecondary: '{colorTextFormSecondary}',
+  colorTextDropdownItemSecondaryHover: { light: '{colorNeutral600}', dark: '{colorNeutral300}' },
+  colorTextEmpty: { light: '{colorNeutral600}', dark: '{colorNeutral300}' },
+  colorTextExpandableSectionDefault: { light: '{colorNeutral950}', dark: '{colorNeutral300}' },
+  colorTextExpandableSectionHover: '{colorTextAccent}',
+  colorTextExpandableSectionNavigationIconDefault: '{colorTextInteractiveDefault}',
+  colorTextFormDefault: { light: '{colorNeutral950}', dark: '{colorNeutral300}' },
+  colorTextFormLabel: '{colorTextFormDefault}',
+  colorTextFormSecondary: { light: '{colorNeutral600}', dark: '{colorNeutral450}' },
+  colorTextGroupLabel: { light: '{colorNeutral650}', dark: '{colorNeutral350}' },
+  colorTextLabelGenAi: { light: '{colorPurple700}', dark: '{colorPurple400}' },
+  colorTextHeadingDefault: { light: '{colorNeutral950}', dark: '{colorNeutral250}' },
+  colorTextHeadingSecondary: { light: '{colorNeutral650}', dark: '{colorNeutral450}' },
+  colorTextHomeHeaderDefault: '{colorNeutral250}',
+  colorTextHomeHeaderSecondary: '{colorNeutral350}',
+  colorTextIconCaret: { light: '{colorNeutral500}', dark: '{colorNeutral450}' },
+  colorTextIconSubtle: { light: '{colorNeutral600}', dark: '{colorNeutral400}' },
+  colorTextInputDisabled: { light: '{colorNeutral400}', dark: '{colorNeutral600}' },
+  colorTextInputPlaceholder: { light: '{colorNeutral600}', dark: '{colorNeutral450}' },
+  colorTextInputPlaceholderDisabled: '{colorTextInputDisabled}',
+  colorTextInteractiveActive: { light: '{colorNeutral950}', dark: '{colorNeutral100}' },
+  colorTextInteractiveDefault: { light: '{colorNeutral650}', dark: '{colorNeutral300}' },
+  colorTextInteractiveDisabled: { light: '{colorNeutral400}', dark: '{colorNeutral600}' },
+  colorTextInteractiveHover: { light: '{colorNeutral950}', dark: '{colorNeutral100}' },
+  colorTextToggleButtonIconPressed: { light: '{colorNeutral950}', dark: '{colorNeutral100}' },
+  colorTextInteractiveInvertedDefault: '{colorNeutral300}',
+  colorTextInteractiveInvertedHover: '{colorNeutral100}',
+  colorTextInverted: { light: '{colorWhite}', dark: '{colorNeutral950}' },
+  colorTextLabel: '{colorTextFormLabel}',
+  colorTextLayoutToggle: '{colorWhite}',
+  colorTextLayoutToggleActive: { light: '{colorWhite}', dark: '{colorNeutral850}' },
+  colorTextLayoutToggleHover: { light: '{colorPrimary600}', dark: '{colorPrimary400}' },
+  colorTextLayoutToggleSelected: { light: '{colorWhite}', dark: '{colorNeutral950}' },
+  colorTextLinkDefault: { light: '{colorPrimary600}', dark: '{colorPrimary400}' },
+  colorTextLinkHover: { light: '{colorPrimary900}', dark: '{colorPrimary300}' },
+  colorTextLinkSecondaryDefault: '{colorTextLinkDefault}',
+  colorTextLinkSecondaryHover: '{colorTextLinkHover}',
+  colorTextLinkInfoDefault: '{colorTextLinkDefault}',
+  colorTextLinkInfoHover: '{colorTextLinkHover}',
+  colorTextLinkInvertedHover: '{colorWhite}',
+  colorTextLinkButtonUnderline: 'transparent',
+  colorTextLinkButtonUnderlineHover: 'transparent',
+  colorTextNotificationDefault: '{colorNeutral100}',
+  colorTextNotificationStackBar: '{colorWhite}',
+  colorTextNotificationYellow: '{colorNeutral950}',
+  colorTextPaginationPageNumberActiveDisabled: '{colorTextInteractiveDisabled}',
+  colorTextPaginationPageNumberDefault: { light: '{colorTextInteractiveDefault}', dark: '{colorNeutral400}' },
+  colorTextSegmentActive: { light: '{colorWhite}', dark: '{colorNeutral950}' },
+  colorTextSegmentDefault: { light: '{colorNeutral650}', dark: '{colorNeutral300}' },
+  colorTextSegmentHover: '{colorTextButtonNormalHover}',
+  colorTextSmall: { light: '{colorNeutral600}', dark: '{colorNeutral450}' },
+  colorTextStatusError: { light: '{colorError600}', dark: '{colorError400}' },
+  colorTextStatusInactive: { light: '{colorNeutral600}', dark: '{colorNeutral450}' },
+  colorTextStatusInfo: { light: '{colorInfo600}', dark: '{colorInfo400}' },
+  colorTextStatusSuccess: { light: '{colorSuccess600}', dark: '{colorSuccess500}' },
+  colorTextStatusWarning: { light: '{colorWarning900}', dark: '{colorWarning500}' },
+  colorTextTopNavigationTitle: { light: '{colorNeutral950}', dark: '{colorNeutral100}' },
+  colorTextTutorialHotspotDefault: '{colorTextLinkDefault}',
+  colorTextTutorialHotspotHover: '{colorTextLinkHover}',
+  colorBoardPlaceholderActive: { light: '{colorNeutral250}', dark: '{colorNeutral600}' },
+  colorBoardPlaceholderHover: { light: '{colorPrimary100}', dark: '{colorPrimary600}' },
+  colorDragPlaceholderActive: { light: '{colorNeutral250}', dark: '{colorNeutral600}' },
+  colorDragPlaceholderHover: { light: '{colorPrimary100}', dark: '{colorPrimary600}' },
+  colorDropzoneBackgroundDefault: { light: '{colorWhite}', dark: '{colorNeutral850}' },
+  colorDropzoneBackgroundHover: { light: '{colorPrimary50}', dark: '{colorPrimary1000}' },
+  colorDropzoneTextDefault: { light: '{colorNeutral650}', dark: '{colorNeutral350}' },
+  colorDropzoneTextHover: { light: '{colorNeutral650}', dark: '{colorNeutral350}' },
+  colorDropzoneBorderDefault: { light: '{colorNeutral500}', dark: '{colorNeutral600}' },
+  colorDropzoneBorderHover: { light: '{colorPrimary900}', dark: '{colorPrimary300}' },
+  colorGapGlobalDrawer: { light: '{colorNeutral250}', dark: '{colorNeutral950}' },
+  colorTreeViewConnectorLine: { light: '{colorNeutral500}', dark: '{colorNeutral300}' },
+  colorBackgroundActionCardDefault: { light: '{colorWhite}', dark: '{colorNeutral850}' },
+  colorBackgroundActionCardHover: { light: '{colorPrimary50}', dark: '{colorNeutral800}' },
+  colorBackgroundActionCardActive: { light: '{colorPrimary100}', dark: '{colorNeutral700}' },
+  colorBorderActionCardDefault: { light: '{colorPrimary600}', dark: '{colorPrimary400}' },
+  colorBorderActionCardHover: { light: '{colorPrimary900}', dark: '{colorPrimary300}' },
+  colorBorderActionCardActive: { light: '{colorPrimary900}', dark: '{colorPrimary300}' },
+  colorBorderActionCardDisabled: { light: '{colorNeutral400}', dark: '{colorNeutral600}' },
+  colorBackgroundActionCardDisabled: { light: '{colorWhite}', dark: '{colorNeutral850}' },
+  colorTextActionCardDisabled: { light: '{colorNeutral500}', dark: '{colorNeutral500}' },
+  colorIconActionCardDefault: { light: '{colorPrimary600}', dark: '{colorPrimary400}' },
+  colorIconActionCardHover: { light: '{colorPrimary900}', dark: '{colorPrimary300}' },
+  colorIconActionCardActive: { light: '{colorPrimary900}', dark: '{colorPrimary300}' },
+  colorIconActionCardDisabled: { light: '{colorNeutral400}', dark: '{colorNeutral600}' },
+};
+
+const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens);
+
+export { expandedTokens as tokens };
+export const mode: StyleDictionary.ModeIdentifier = 'color';
diff --git a/style-dictionary/one-theme/contexts/alert.ts b/style-dictionary/one-theme/contexts/alert.ts
new file mode 100644
index 0000000000..66565e2666
--- /dev/null
+++ b/style-dictionary/one-theme/contexts/alert.ts
@@ -0,0 +1,67 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import merge from 'lodash/merge.js';
+
+import { expandColorDictionary } from '../../utils/index.js';
+import { StyleDictionary } from '../../utils/interfaces.js';
+import { tokens as parentTokens } from '../colors.js';
+
+export const alertButtonTokens: StyleDictionary.ColorsDictionary = {
+  colorTextButtonNormalDefault: {
+    light: '{colorNeutral650}',
+    dark: '{colorNeutral300}',
+  },
+  colorBorderButtonNormalDefault: '{colorTextButtonNormalDefault}',
+  colorBackgroundButtonNormalDefault: 'transparent',
+  colorTextButtonNormalHover: {
+    light: '{colorNeutral950}',
+    dark: '{colorWhite}',
+  },
+  colorBorderButtonNormalHover: '{colorTextButtonNormalHover}',
+  colorBackgroundButtonNormalHover: {
+    light: 'rgba(0, 7, 22, 0.05)',
+    dark: 'rgba(255, 255, 255, 0.1)',
+  },
+  colorTextButtonNormalActive: '{colorTextButtonNormalHover}',
+  colorBorderButtonNormalActive: '{colorTextButtonNormalHover}',
+  colorBackgroundButtonNormalActive: {
+    light: 'rgba(0, 7, 22, 0.1)',
+    dark: 'rgba(255, 255, 255, 0.15)',
+  },
+  colorTextLinkButtonNormalDefault: '{colorTextLinkDefault}',
+  colorTextLinkButtonNormalHover: '{colorTextLinkHover}',
+};
+
+const alertExpandableSectionTokens: StyleDictionary.ColorsDictionary = {
+  colorBorderDividerDefault: '{colorTextButtonNormalDefault}',
+  colorTextExpandableSectionDefault: '{colorTextButtonNormalDefault}',
+  colorTextExpandableSectionHover: '{colorTextButtonNormalHover}',
+};
+
+const colorTokens: StyleDictionary.ColorsDictionary = {
+  ...alertButtonTokens,
+  ...alertExpandableSectionTokens,
+  colorBorderItemFocused: {
+    dark: '{colorNeutral100}',
+  },
+};
+
+const alertExpandableSectionFontTokens: StyleDictionary.TypographyDictionary = {
+  fontExpandableHeadingSize: '14px',
+};
+
+const alertExpandableSectionBorderTokens: StyleDictionary.BordersDictionary = {
+  borderDividerSectionWidth: '1px',
+};
+
+export const expandedColorTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(
+  merge({}, parentTokens, colorTokens)
+);
+
+const expandedTokens = {
+  ...expandedColorTokens,
+  ...alertExpandableSectionFontTokens,
+  ...alertExpandableSectionBorderTokens,
+};
+
+export { expandedTokens as tokens };
diff --git a/style-dictionary/one-theme/contexts/app-layout-toolbar.ts b/style-dictionary/one-theme/contexts/app-layout-toolbar.ts
new file mode 100644
index 0000000000..985715608b
--- /dev/null
+++ b/style-dictionary/one-theme/contexts/app-layout-toolbar.ts
@@ -0,0 +1,14 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import merge from 'lodash/merge.js';
+
+import { expandColorDictionary } from '../../utils/index.js';
+import { StyleDictionary } from '../../utils/interfaces.js';
+
+const tokens = {
+  colorBackgroundLayoutMain: { light: '{colorNeutral50}', dark: '{colorNeutral900}' },
+};
+
+const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(merge({}, { ...tokens }));
+
+export { expandedTokens as tokens };
diff --git a/style-dictionary/one-theme/contexts/compact-table.ts b/style-dictionary/one-theme/contexts/compact-table.ts
new file mode 100644
index 0000000000..ebc31378e1
--- /dev/null
+++ b/style-dictionary/one-theme/contexts/compact-table.ts
@@ -0,0 +1,29 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import merge from 'lodash/merge.js';
+
+import { expandDensityDictionary } from '../../utils/index.js';
+import { StyleDictionary } from '../../utils/interfaces.js';
+import { tokens as parentTokens } from '../spacing.js';
+
+const spacingTokens: StyleDictionary.SpacingDictionary = {
+  spaceScaledXxxs: '{spaceNone}',
+  spaceScaledXxs: '{spaceXxxs}',
+  spaceScaledXs: '{spaceXxs}',
+  spaceScaledS: '{spaceXs}',
+  spaceScaledM: '{spaceS}',
+  spaceScaledL: '{spaceM}',
+  spaceScaledXl: '{spaceL}',
+  spaceScaledXxl: '{spaceXl}',
+  spaceScaledXxxl: '{spaceXxl}',
+};
+
+const sizeTokens: StyleDictionary.SizesDictionary = {
+  sizeVerticalInput: '28px',
+};
+
+const expandedTokens: StyleDictionary.ExpandedDensityScopeDictionary = expandDensityDictionary(
+  merge({}, parentTokens, { ...spacingTokens, ...sizeTokens })
+);
+
+export { expandedTokens as tokens };
diff --git a/style-dictionary/one-theme/contexts/flashbar-warning.ts b/style-dictionary/one-theme/contexts/flashbar-warning.ts
new file mode 100644
index 0000000000..5fac6a6e01
--- /dev/null
+++ b/style-dictionary/one-theme/contexts/flashbar-warning.ts
@@ -0,0 +1,66 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import merge from 'lodash/merge.js';
+
+import { expandColorDictionary, pickState } from '../../utils/index.js';
+import { StyleDictionary } from '../../utils/interfaces.js';
+import { tokens as parentTokens } from '../colors.js';
+import { alertButtonTokens } from './alert.js';
+
+const baseTokens: StyleDictionary.ColorsDictionary = {
+  // Links in flash should be using color="inverted", which makes them underlined by default in flashbars
+  // and changes their color to match the surrounding text.
+  colorTextNotificationDefault: '{colorTextNotificationYellow}',
+  colorTextLinkInvertedHover: '{colorTextNotificationYellow}',
+
+  // Focus outline matches the text color to align with other flashbar types and to ensure color contrast.
+  colorBorderItemFocused: '{colorTextNotificationYellow}',
+
+  // Dismiss button
+  colorTextInteractiveInvertedDefault: '{colorNeutral650}',
+  colorTextInteractiveInvertedHover: '{colorNeutral950}',
+
+  // Progress bars
+  colorBackgroundProgressBarValueDefault: '{colorNeutral950}',
+  colorBackgroundProgressBarDefault: '{colorGreyOpaque10}',
+
+  // Expandable sections
+  colorTextExpandableSectionDefault: '{colorTextNotificationYellow}',
+  colorTextExpandableSectionHover: '{colorTextNotificationYellow}',
+  // Bottom border of the header when expanded (default variant)
+  colorBorderDividerDefault: '{colorTextNotificationYellow}',
+  // Description
+  colorTextHeadingSecondary: '{colorTextNotificationYellow}',
+  // Content
+  colorTextBodyDefault: '{colorTextNotificationYellow}',
+  colorTextBodySecondary: '{colorTextNotificationYellow}',
+
+  // Tutorial hotspot
+  colorTextTutorialHotspotDefault: '{colorNeutral600}',
+  colorTextTutorialHotspotHover: '{colorNeutral900}',
+
+  // Inline-code variant background in Box
+  colorBackgroundInlineCode: 'rgba(0, 0, 0, 0.1)',
+
+  // Key-value pairs
+  colorTextLabel: '{colorTextNotificationYellow}',
+
+  // Info links
+  colorTextLinkDefault: '{colorTextNotificationYellow}',
+  colorTextLinkHover: '{colorTextNotificationYellow}',
+};
+
+// Token configuration that is shared between classic and visual refresh
+export const sharedTokens: StyleDictionary.ColorsDictionary = {
+  ...baseTokens,
+
+  // For buttons we use the same tokens as alert. But because the warning flash messages
+  // look the same in light and dark mode, we only pick the light mode colors.
+  ...pickState(expandColorDictionary(alertButtonTokens), 'light'),
+};
+
+const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(
+  merge({}, parentTokens, sharedTokens)
+);
+
+export { expandedTokens as tokens };
diff --git a/style-dictionary/one-theme/contexts/flashbar.ts b/style-dictionary/one-theme/contexts/flashbar.ts
new file mode 100644
index 0000000000..6d5a88c2dd
--- /dev/null
+++ b/style-dictionary/one-theme/contexts/flashbar.ts
@@ -0,0 +1,46 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import merge from 'lodash/merge.js';
+
+import { expandColorDictionary } from '../../utils/index.js';
+import { StyleDictionary } from '../../utils/interfaces.js';
+import { tokens as parentTokens } from '../colors.js';
+
+// Token configuration that is shared between classic and visual refresh
+export const sharedTokens: StyleDictionary.ColorsDictionary = {
+  colorTextButtonNormalDefault: '{colorNeutral100}',
+  colorBorderButtonNormalDefault: '{colorNeutral100}',
+  colorBackgroundButtonNormalDefault: 'transparent',
+  colorTextButtonNormalHover: '{colorWhite}',
+  colorBorderButtonNormalHover: '{colorWhite}',
+  colorBackgroundButtonNormalHover: 'rgba(0, 7, 22, 0.15)',
+  colorTextButtonNormalActive: '{colorWhite}',
+  colorBorderButtonNormalActive: '{colorWhite}',
+  colorBackgroundButtonNormalActive: 'rgba(0, 7, 22, 0.2)',
+  colorBorderItemFocused: '{colorNeutral100}',
+  colorTextExpandableSectionDefault: '{colorNeutral100}',
+  colorTextExpandableSectionHover: '{colorWhite}',
+  colorTextBodyDefault: '{colorNeutral100}',
+  colorTextBodySecondary: '{colorNeutral100}',
+  colorTextHeadingSecondary: '{colorNeutral100}',
+  colorBorderDividerDefault: '{colorNeutral100}',
+  colorTextTutorialHotspotDefault: '{colorNeutral300}',
+  colorTextTutorialHotspotHover: '{colorNeutral100}',
+  colorBackgroundInlineCode: 'rgba(0, 0, 0, 0.2)',
+  // Key-value pairs
+  colorTextLabel: '{colorNeutral100}',
+
+  // Info links
+  colorTextLinkDefault: '{colorNeutral100}',
+  colorTextLinkHover: '{colorWhite}',
+
+  // Progress Bar
+  colorBackgroundProgressBarValueDefault: '{colorWhite}',
+  colorBackgroundProgressBarDefault: '{colorGreyOpaque25}',
+};
+
+const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(
+  merge({}, parentTokens, sharedTokens)
+);
+
+export { expandedTokens as tokens };
diff --git a/style-dictionary/one-theme/contexts/header-alert.ts b/style-dictionary/one-theme/contexts/header-alert.ts
new file mode 100644
index 0000000000..1b78f2e723
--- /dev/null
+++ b/style-dictionary/one-theme/contexts/header-alert.ts
@@ -0,0 +1,16 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import merge from 'lodash/merge.js';
+
+import { expandColorDictionary, pickState } from '../../utils/index.js';
+import { StyleDictionary } from '../../utils/interfaces.js';
+import { expandedColorTokens as alertTokens } from './alert.js';
+
+const darkModeColorValues = pickState(alertTokens, 'dark');
+
+const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(
+  merge({}, alertTokens, darkModeColorValues)
+);
+
+export default expandedTokens;
+export { expandedTokens as tokens };
diff --git a/style-dictionary/one-theme/contexts/header.ts b/style-dictionary/one-theme/contexts/header.ts
new file mode 100644
index 0000000000..b8f6bd7918
--- /dev/null
+++ b/style-dictionary/one-theme/contexts/header.ts
@@ -0,0 +1,38 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import merge from 'lodash/merge.js';
+
+import { expandColorDictionary, pickState } from '../../utils/index.js';
+import { StyleDictionary } from '../../utils/interfaces.js';
+import { tokens as parentColorTokens } from '../colors.js';
+import { tokens as parentShadowsTokens } from '../shadows.js';
+
+const background = '{colorNeutral950}';
+
+const colorTokens: StyleDictionary.ColorsDictionary = {
+  colorBackgroundLayoutMain: background,
+  colorBackgroundButtonNormalDefault: background,
+  colorBackgroundButtonNormalDisabled: background,
+  colorBackgroundControlDefault: background,
+  colorBackgroundInputDefault: background,
+  colorBackgroundSegmentDefault: background,
+  colorBackgroundSegmentDisabled: background,
+  colorBackgroundTableHeader: background,
+  colorBackgroundSegmentWrapper: background,
+};
+
+const shadowsTokens: StyleDictionary.ShadowsDictionary = {
+  shadowFlashSticky: parentShadowsTokens.shadowFlashSticky,
+  shadowPanel: parentShadowsTokens.shadowPanel,
+  shadowPanelToggle: parentShadowsTokens.shadowPanelToggle,
+};
+
+const darkModeColorValues = pickState(parentColorTokens, 'dark');
+const darkModeShadowsValues = pickState(parentShadowsTokens, 'dark');
+
+const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(
+  merge({}, darkModeShadowsValues, darkModeColorValues, shadowsTokens, colorTokens)
+);
+
+export const mode: StyleDictionary.ModeIdentifier = 'color';
+export { expandedTokens as tokens };
diff --git a/style-dictionary/one-theme/contexts/top-navigation.ts b/style-dictionary/one-theme/contexts/top-navigation.ts
new file mode 100644
index 0000000000..1b8b6f2a60
--- /dev/null
+++ b/style-dictionary/one-theme/contexts/top-navigation.ts
@@ -0,0 +1,21 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import merge from 'lodash/merge.js';
+
+import { expandColorDictionary, pickState } from '../../utils/index.js';
+import { StyleDictionary } from '../../utils/interfaces.js';
+import { tokens as parentTokens } from '../colors.js';
+
+const tokens = {
+  colorBackgroundContainerContent: '{colorNeutral850}',
+  colorBackgroundDropdownItemDefault: '{colorNeutral850}',
+};
+
+const darkModeValues = pickState(parentTokens, 'dark');
+
+const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(
+  merge({}, darkModeValues, tokens)
+);
+
+export const mode: StyleDictionary.ModeIdentifier = 'color';
+export { expandedTokens as tokens };
diff --git a/style-dictionary/one-theme/index.ts b/style-dictionary/one-theme/index.ts
new file mode 100644
index 0000000000..f838dd584d
--- /dev/null
+++ b/style-dictionary/one-theme/index.ts
@@ -0,0 +1,62 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { ThemeBuilder } from '@cloudscape-design/theming-build';
+
+import {
+  createAlertContext,
+  createAppLayoutToolbarContext,
+  createCompactTableContext,
+  createFlashbarContext,
+  createFlashbarWarningContext,
+  createHeaderAlertContext,
+  createHeaderContext,
+  createTopNavigationContext,
+} from '../utils/contexts.js';
+import { StyleDictionary } from '../utils/interfaces.js';
+import { createColorMode, createDensityMode, createMotionMode } from '../utils/modes.js';
+
+const modes = [
+  createColorMode('.awsui-dark-mode'),
+  createDensityMode('.awsui-compact-mode'),
+  createMotionMode('.awsui-motion-disabled'),
+];
+
+const tokenCategories: Array<StyleDictionary.CategoryModule> = [
+  await import('./color-palette.js'), // Still needed for now for non-deprecated palette tokens like colorWhite, colorBlack
+  await import('./color-charts.js'),
+  await import('./color-severity.js'),
+  await import('./colors.js'),
+  await import('./typography.js'),
+  await import('./borders.js'),
+  await import('./motion.js'),
+  await import('./sizes.js'),
+  await import('./spacing.js'),
+  await import('./shadows.js'),
+];
+
+export async function buildVisualRefresh(builder: ThemeBuilder) {
+  tokenCategories.forEach(({ tokens, mode: modeId, referenceTokens }) => {
+    const mode = modes.find(mode => mode.id === modeId);
+    if (referenceTokens) {
+      builder.addReferenceTokens(referenceTokens, mode);
+    }
+    builder.addTokens(tokens, mode);
+  });
+
+  // Add contexts for component-specific overrides
+  builder.addContext(createCompactTableContext((await import('./contexts/compact-table.js')).tokens));
+  builder.addContext(createTopNavigationContext((await import('./contexts/top-navigation.js')).tokens));
+  builder.addContext(createHeaderContext((await import('./contexts/header.js')).tokens));
+  builder.addContext(createFlashbarContext((await import('./contexts/flashbar.js')).tokens));
+  builder.addContext(createFlashbarWarningContext((await import('./contexts/flashbar-warning.js')).tokens));
+  builder.addContext(createAlertContext((await import('./contexts/alert.js')).tokens));
+  builder.addContext(createHeaderAlertContext((await import('./contexts/header-alert.js')).tokens));
+  builder.addContext(createAppLayoutToolbarContext((await import('./contexts/app-layout-toolbar.js')).tokens));
+
+  return builder.build();
+}
+
+const builder = new ThemeBuilder('visual-refresh', 'body', modes);
+const theme = await buildVisualRefresh(builder);
+
+export default theme;
diff --git a/style-dictionary/one-theme/metadata.ts b/style-dictionary/one-theme/metadata.ts
new file mode 100644
index 0000000000..2cd8815640
--- /dev/null
+++ b/style-dictionary/one-theme/metadata.ts
@@ -0,0 +1,5 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import metadata from './metadata/index.js';
+
+export default metadata;
diff --git a/style-dictionary/one-theme/metadata/borders.ts b/style-dictionary/one-theme/metadata/borders.ts
new file mode 100644
index 0000000000..6329b6a6f5
--- /dev/null
+++ b/style-dictionary/one-theme/metadata/borders.ts
@@ -0,0 +1,224 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { StyleDictionary } from '../../utils/interfaces.js';
+
+const metadata: StyleDictionary.MetadataIndex = {
+  borderActiveWidth: { description: 'The height of the active tab indicator.' },
+  borderDividerListWidth: { description: 'Used for divider between repeated items such as dropdowns and tables.' },
+  borderDividerSectionWidth: {
+    description:
+      'The default system divider width - used for dividers between sections of content such as key/value pairs and tabs, for both full width and inset dividers.',
+  },
+  borderInvalidWidth: { description: 'Used for invalid input left border width.' },
+  borderPanelHeaderWidth: { description: 'The split panel header bottom divider width.' },
+  borderPanelTopWidth: { description: 'The split panel top border width.' },
+  borderWidthItemSelected: {
+    description: 'The border width of selected items, like table rows.',
+    public: true,
+    themeable: true,
+  },
+  borderRadiusAlert: {
+    description: 'The border radius of alerts.',
+    public: true,
+    themeable: true,
+  },
+  borderRadiusBadge: {
+    description: 'The border radius of badges.',
+    public: true,
+    themeable: true,
+  },
+  borderRadiusButton: {
+    description: "The border radius of buttons and segmented control's segments.",
+    public: true,
+    themeable: true,
+  },
+  borderRadiusCalendarDayFocusRing: {
+    description: 'The border radius of the focused day in date picker and date range picker.',
+    public: true,
+    themeable: true,
+  },
+  borderRadiusCodeEditor: {
+    description: 'The border radius of code editors.',
+  },
+  borderRadiusContainer: {
+    description:
+      'The border radius of containers. Also used in container-based components like table, cards, expandable section, and modal.',
+    public: true,
+    themeable: true,
+  },
+  borderRadiusControlCircularFocusRing: {
+    description: 'The border radius of the focus indicator of circular controls. For example: radio button.',
+    public: true,
+    themeable: true,
+  },
+  borderRadiusControlDefaultFocusRing: {
+    description:
+      'The border radius of the focus indicator of interactive elements. For example: button, link, toggle, pagination controls, expandable section header, popover trigger.',
+    public: true,
+    themeable: true,
+  },
+  borderRadiusDropdown: {
+    description:
+      'The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker.',
+    public: true,
+    themeable: true,
+  },
+  borderRadiusDropzone: {
+    description: 'The border radius of file upload dropzone.',
+    public: true,
+    themeable: true,
+  },
+  borderRadiusFlashbar: {
+    description: 'The border radius of flash messages in flashbars.',
+    public: true,
+    themeable: true,
+  },
+  borderRadiusItem: {
+    description:
+      'The border radius of items that can be selected from a list. For example: select options, table rows, calendar days.',
+    public: true,
+    themeable: true,
+  },
+  borderRadiusInput: {
+    description: 'The border radius of form controls. For example: input, select.',
+    public: true,
+    themeable: true,
+  },
+  borderRadiusPopover: {
+    description: 'The border radius of popovers.',
+    public: true,
+    themeable: true,
+  },
+  borderRadiusTabsFocusRing: {
+    description: "The border radius of tabs' focus indicator. Used in tabs and in the code editor status bar.",
+    public: true,
+    themeable: true,
+  },
+  borderRadiusTiles: {
+    description: 'The border radius of tiles.',
+    public: true,
+    themeable: true,
+  },
+  borderRadiusToken: {
+    description: 'The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.',
+    public: true,
+    themeable: true,
+  },
+  borderRadiusChatBubble: {
+    description: 'The border radius of chat bubbles.',
+    public: true,
+    themeable: false,
+  },
+  borderRadiusTutorialPanelItem: {
+    description: 'The border radius of tutorials inside a tutorial panel.',
+    public: true,
+    themeable: true,
+  },
+  borderWidthAlert: {
+    description: 'The border width of alerts.',
+    public: true,
+    themeable: true,
+  },
+  borderWidthAlertBlockStart: {
+    description: 'The block-start border width of alerts.',
+    public: true,
+    themeable: true,
+  },
+  borderWidthAlertBlockEnd: {
+    description: 'The block-end border width of alerts.',
+    public: true,
+    themeable: true,
+  },
+  borderWidthAlertInlineStart: {
+    description: 'The inline-start border width of alerts.',
+    public: true,
+    themeable: true,
+  },
+  borderWidthAlertInlineEnd: {
+    description: 'The inline-end border width of alerts.',
+    public: true,
+    themeable: true,
+  },
+  borderWidthCard: {
+    description: 'The border width of a card.',
+    public: true,
+    themeable: true,
+  },
+  borderWidthCardSelected: {
+    description: 'The border width of a selected card.',
+    public: true,
+    themeable: true,
+  },
+  borderWidthButton: {
+    description: 'The border width of buttons.',
+    public: true,
+    themeable: true,
+  },
+  borderWidthDropdown: {
+    description: 'The border width of dropdowns.',
+    public: true,
+    themeable: true,
+  },
+  borderWidthField: {
+    description: 'The border width of form fields.',
+    public: true,
+    themeable: true,
+  },
+  borderWidthPopover: {
+    description: 'The border width of popovers.',
+    public: true,
+    themeable: true,
+  },
+  borderWidthToken: {
+    description: 'The border width of tokens.',
+    public: true,
+    themeable: true,
+  },
+  borderWidthIconSmall: {
+    description: 'The visual stroke width of small icons.',
+    public: true,
+    themeable: true,
+  },
+  borderWidthIconNormal: {
+    description: 'The visual stroke width of normal icons.',
+    public: true,
+    themeable: true,
+  },
+  borderWidthIconMedium: {
+    description: 'The visual stroke width of medium icons.',
+    public: true,
+    themeable: true,
+  },
+  borderWidthIconBig: {
+    description: 'The visual stroke width of big icons.',
+    public: true,
+    themeable: true,
+  },
+  borderWidthIconLarge: {
+    description: 'The visual stroke width of large icons.',
+    public: true,
+    themeable: true,
+  },
+  borderRadiusCardDefault: {
+    description: 'The border radius of default cards.',
+    public: true,
+    themeable: true,
+  },
+  borderRadiusCardEmbedded: {
+    description: 'The border radius of embedded cards.',
+    public: true,
+    themeable: true,
+  },
+  borderRadiusActionCardDefault: {
+    description: 'The border radius of default action cards.',
+    public: true,
+    themeable: true,
+  },
+  borderRadiusActionCardEmbedded: {
+    description: 'The border radius of embedded action cards.',
+    public: true,
+    themeable: true,
+  },
+};
+
+export default metadata;
diff --git a/style-dictionary/one-theme/metadata/color-charts.ts b/style-dictionary/one-theme/metadata/color-charts.ts
new file mode 100644
index 0000000000..b349c4e62d
--- /dev/null
+++ b/style-dictionary/one-theme/metadata/color-charts.ts
@@ -0,0 +1,713 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { StyleDictionary } from '../../utils/interfaces.js';
+
+const metadata: StyleDictionary.MetadataIndex = {
+  colorChartsRed300: {
+    description: "Color from the 'red' data visualization palette at a contrast ratio of 3:1",
+    public: true,
+  },
+  colorChartsRed400: {
+    description: "Color from the 'red' data visualization palette at a contrast ratio of 4:1",
+    public: true,
+  },
+  colorChartsRed500: {
+    description: "Color from the 'red' data visualization palette at a contrast ratio of 5:1",
+    public: true,
+  },
+  colorChartsRed600: {
+    description: "Color from the 'red' data visualization palette at a contrast ratio of 6:1",
+    public: true,
+  },
+  colorChartsRed700: {
+    description: "Color from the 'red' data visualization palette at a contrast ratio of 7:1",
+    public: true,
+  },
+  colorChartsRed800: {
+    description: "Color from the 'red' data visualization palette at a contrast ratio of 8:1",
+    public: true,
+  },
+  colorChartsRed900: {
+    description: "Color from the 'red' data visualization palette at a contrast ratio of 9:1",
+    public: true,
+  },
+  colorChartsRed1000: {
+    description: "Color from the 'red' data visualization palette at a contrast ratio of 10:1",
+    public: true,
+  },
+  colorChartsRed1100: {
+    description: "Color from the 'red' data visualization palette at a contrast ratio of 11:1",
+    public: true,
+  },
+  colorChartsRed1200: {
+    description: "Color from the 'red' data visualization palette at a contrast ratio of 12:1",
+    public: true,
+  },
+  colorChartsOrange300: {
+    description: "Color from the 'orange' data visualization palette at a contrast ratio of 3:1",
+    public: true,
+  },
+  colorChartsOrange400: {
+    description: "Color from the 'orange' data visualization palette at a contrast ratio of 4:1",
+    public: true,
+  },
+  colorChartsOrange500: {
+    description: "Color from the 'orange' data visualization palette at a contrast ratio of 5:1",
+    public: true,
+  },
+  colorChartsOrange600: {
+    description: "Color from the 'orange' data visualization palette at a contrast ratio of 6:1",
+    public: true,
+  },
+  colorChartsOrange700: {
+    description: "Color from the 'orange' data visualization palette at a contrast ratio of 7:1",
+    public: true,
+  },
+  colorChartsOrange800: {
+    description: "Color from the 'orange' data visualization palette at a contrast ratio of 8:1",
+    public: true,
+  },
+  colorChartsOrange900: {
+    description: "Color from the 'orange' data visualization palette at a contrast ratio of 9:1",
+    public: true,
+  },
+  colorChartsOrange1000: {
+    description: "Color from the 'orange' data visualization palette at a contrast ratio of 10:1",
+    public: true,
+  },
+  colorChartsOrange1100: {
+    description: "Color from the 'orange' data visualization palette at a contrast ratio of 11:1",
+    public: true,
+  },
+  colorChartsOrange1200: {
+    description: "Color from the 'orange' data visualization palette at a contrast ratio of 12:1",
+    public: true,
+  },
+  colorChartsYellow300: {
+    description: "Color from the 'yellow' data visualization palette at a contrast ratio of 3:1",
+    public: true,
+  },
+  colorChartsYellow400: {
+    description: "Color from the 'yellow' data visualization palette at a contrast ratio of 4:1",
+    public: true,
+  },
+  colorChartsYellow500: {
+    description: "Color from the 'yellow' data visualization palette at a contrast ratio of 5:1",
+    public: true,
+  },
+  colorChartsYellow600: {
+    description: "Color from the 'yellow' data visualization palette at a contrast ratio of 6:1",
+    public: true,
+  },
+  colorChartsYellow700: {
+    description: "Color from the 'yellow' data visualization palette at a contrast ratio of 7:1",
+    public: true,
+  },
+  colorChartsYellow800: {
+    description: "Color from the 'yellow' data visualization palette at a contrast ratio of 8:1",
+    public: true,
+  },
+  colorChartsYellow900: {
+    description: "Color from the 'yellow' data visualization palette at a contrast ratio of 9:1",
+    public: true,
+  },
+  colorChartsYellow1000: {
+    description: "Color from the 'yellow' data visualization palette at a contrast ratio of 10:1",
+    public: true,
+  },
+  colorChartsYellow1100: {
+    description: "Color from the 'yellow' data visualization palette at a contrast ratio of 11:1",
+    public: true,
+  },
+  colorChartsYellow1200: {
+    description: "Color from the 'yellow' data visualization palette at a contrast ratio of 12:1",
+    public: true,
+  },
+  colorChartsGreen300: {
+    description: "Color from the 'green' data visualization palette at a contrast ratio of 3:1",
+    public: true,
+  },
+  colorChartsGreen400: {
+    description: "Color from the 'green' data visualization palette at a contrast ratio of 4:1",
+    public: true,
+  },
+  colorChartsGreen500: {
+    description: "Color from the 'green' data visualization palette at a contrast ratio of 5:1",
+    public: true,
+  },
+  colorChartsGreen600: {
+    description: "Color from the 'green' data visualization palette at a contrast ratio of 6:1",
+    public: true,
+  },
+  colorChartsGreen700: {
+    description: "Color from the 'green' data visualization palette at a contrast ratio of 7:1",
+    public: true,
+  },
+  colorChartsGreen800: {
+    description: "Color from the 'green' data visualization palette at a contrast ratio of 8:1",
+    public: true,
+  },
+  colorChartsGreen900: {
+    description: "Color from the 'green' data visualization palette at a contrast ratio of 9:1",
+    public: true,
+  },
+  colorChartsGreen1000: {
+    description: "Color from the 'green' data visualization palette at a contrast ratio of 10:1",
+    public: true,
+  },
+  colorChartsGreen1100: {
+    description: "Color from the 'green' data visualization palette at a contrast ratio of 11:1",
+    public: true,
+  },
+  colorChartsGreen1200: {
+    description: "Color from the 'green' data visualization palette at a contrast ratio of 12:1",
+    public: true,
+  },
+  colorChartsTeal300: {
+    description: "Color from the 'teal' data visualization palette at a contrast ratio of 3:1",
+    public: true,
+  },
+  colorChartsTeal400: {
+    description: "Color from the 'teal' data visualization palette at a contrast ratio of 4:1",
+    public: true,
+  },
+  colorChartsTeal500: {
+    description: "Color from the 'teal' data visualization palette at a contrast ratio of 5:1",
+    public: true,
+  },
+  colorChartsTeal600: {
+    description: "Color from the 'teal' data visualization palette at a contrast ratio of 6:1",
+    public: true,
+  },
+  colorChartsTeal700: {
+    description: "Color from the 'teal' data visualization palette at a contrast ratio of 7:1",
+    public: true,
+  },
+  colorChartsTeal800: {
+    description: "Color from the 'teal' data visualization palette at a contrast ratio of 8:1",
+    public: true,
+  },
+  colorChartsTeal900: {
+    description: "Color from the 'teal' data visualization palette at a contrast ratio of 9:1",
+    public: true,
+  },
+  colorChartsTeal1000: {
+    description: "Color from the 'teal' data visualization palette at a contrast ratio of 10:1",
+    public: true,
+  },
+  colorChartsTeal1100: {
+    description: "Color from the 'teal' data visualization palette at a contrast ratio of 11:1",
+    public: true,
+  },
+  colorChartsTeal1200: {
+    description: "Color from the 'teal' data visualization palette at a contrast ratio of 12:1",
+    public: true,
+  },
+  colorChartsBlue1300: {
+    description: "Color from the 'blue-1' data visualization palette at a contrast ratio of 3:1",
+    public: true,
+    sassName: '$color-charts-blue-1-300',
+  },
+  colorChartsBlue1400: {
+    description: "Color from the 'blue-1' data visualization palette at a contrast ratio of 4:1",
+    public: true,
+    sassName: '$color-charts-blue-1-400',
+  },
+  colorChartsBlue1500: {
+    description: "Color from the 'blue-1' data visualization palette at a contrast ratio of 5:1",
+    public: true,
+    sassName: '$color-charts-blue-1-500',
+  },
+  colorChartsBlue1600: {
+    description: "Color from the 'blue-1' data visualization palette at a contrast ratio of 6:1",
+    public: true,
+    sassName: '$color-charts-blue-1-600',
+  },
+  colorChartsBlue1700: {
+    description: "Color from the 'blue-1' data visualization palette at a contrast ratio of 7:1",
+    public: true,
+    sassName: '$color-charts-blue-1-700',
+  },
+  colorChartsBlue1800: {
+    description: "Color from the 'blue-1' data visualization palette at a contrast ratio of 8:1",
+    public: true,
+    sassName: '$color-charts-blue-1-800',
+  },
+  colorChartsBlue1900: {
+    description: "Color from the 'blue-1' data visualization palette at a contrast ratio of 9:1",
+    public: true,
+    sassName: '$color-charts-blue-1-900',
+  },
+  colorChartsBlue11000: {
+    description: "Color from the 'blue-1' data visualization palette at a contrast ratio of 10:1",
+    public: true,
+    sassName: '$color-charts-blue-1-1000',
+  },
+  colorChartsBlue11100: {
+    description: "Color from the 'blue-1' data visualization palette at a contrast ratio of 11:1",
+    public: true,
+    sassName: '$color-charts-blue-1-1100',
+  },
+  colorChartsBlue11200: {
+    description: "Color from the 'blue-1' data visualization palette at a contrast ratio of 12:1",
+    public: true,
+    sassName: '$color-charts-blue-1-1200',
+  },
+  colorChartsBlue2300: {
+    description: "Color from the 'blue-2' data visualization palette at a contrast ratio of 3:1",
+    public: true,
+    sassName: '$color-charts-blue-2-300',
+  },
+  colorChartsBlue2400: {
+    description: "Color from the 'blue-2' data visualization palette at a contrast ratio of 4:1",
+    public: true,
+    sassName: '$color-charts-blue-2-400',
+  },
+  colorChartsBlue2500: {
+    description: "Color from the 'blue-2' data visualization palette at a contrast ratio of 5:1",
+    public: true,
+    sassName: '$color-charts-blue-2-500',
+  },
+  colorChartsBlue2600: {
+    description: "Color from the 'blue-2' data visualization palette at a contrast ratio of 6:1",
+    public: true,
+    sassName: '$color-charts-blue-2-600',
+  },
+  colorChartsBlue2700: {
+    description: "Color from the 'blue-2' data visualization palette at a contrast ratio of 7:1",
+    public: true,
+    sassName: '$color-charts-blue-2-700',
+  },
+  colorChartsBlue2800: {
+    description: "Color from the 'blue-2' data visualization palette at a contrast ratio of 8:1",
+    public: true,
+    sassName: '$color-charts-blue-2-800',
+  },
+  colorChartsBlue2900: {
+    description: "Color from the 'blue-2' data visualization palette at a contrast ratio of 9:1",
+    public: true,
+    sassName: '$color-charts-blue-2-900',
+  },
+  colorChartsBlue21000: {
+    description: "Color from the 'blue-2' data visualization palette at a contrast ratio of 10:1",
+    public: true,
+    sassName: '$color-charts-blue-2-1000',
+  },
+  colorChartsBlue21100: {
+    description: "Color from the 'blue-2' data visualization palette at a contrast ratio of 11:1",
+    public: true,
+    sassName: '$color-charts-blue-2-1100',
+  },
+  colorChartsBlue21200: {
+    description: "Color from the 'blue-2' data visualization palette at a contrast ratio of 12:1",
+    public: true,
+    sassName: '$color-charts-blue-2-1200',
+  },
+  colorChartsPurple300: {
+    description: "Color from the 'purple' data visualization palette at a contrast ratio of 3:1",
+    public: true,
+  },
+  colorChartsPurple400: {
+    description: "Color from the 'purple' data visualization palette at a contrast ratio of 4:1",
+    public: true,
+  },
+  colorChartsPurple500: {
+    description: "Color from the 'purple' data visualization palette at a contrast ratio of 5:1",
+    public: true,
+  },
+  colorChartsPurple600: {
+    description: "Color from the 'purple' data visualization palette at a contrast ratio of 6:1",
+    public: true,
+  },
+  colorChartsPurple700: {
+    description: "Color from the 'purple' data visualization palette at a contrast ratio of 7:1",
+    public: true,
+  },
+  colorChartsPurple800: {
+    description: "Color from the 'purple' data visualization palette at a contrast ratio of 8:1",
+    public: true,
+  },
+  colorChartsPurple900: {
+    description: "Color from the 'purple' data visualization palette at a contrast ratio of 9:1",
+    public: true,
+  },
+  colorChartsPurple1000: {
+    description: "Color from the 'purple' data visualization palette at a contrast ratio of 10:1",
+    public: true,
+  },
+  colorChartsPurple1100: {
+    description: "Color from the 'purple' data visualization palette at a contrast ratio of 11:1",
+    public: true,
+  },
+  colorChartsPurple1200: {
+    description: "Color from the 'purple' data visualization palette at a contrast ratio of 12:1",
+    public: true,
+  },
+  colorChartsPink300: {
+    description: "Color from the 'pink' data visualization palette at a contrast ratio of 3:1",
+    public: true,
+  },
+  colorChartsPink400: {
+    description: "Color from the 'pink' data visualization palette at a contrast ratio of 4:1",
+    public: true,
+  },
+  colorChartsPink500: {
+    description: "Color from the 'pink' data visualization palette at a contrast ratio of 5:1",
+    public: true,
+  },
+  colorChartsPink600: {
+    description: "Color from the 'pink' data visualization palette at a contrast ratio of 6:1",
+    public: true,
+  },
+  colorChartsPink700: {
+    description: "Color from the 'pink' data visualization palette at a contrast ratio of 7:1",
+    public: true,
+  },
+  colorChartsPink800: {
+    description: "Color from the 'pink' data visualization palette at a contrast ratio of 8:1",
+    public: true,
+  },
+  colorChartsPink900: {
+    description: "Color from the 'pink' data visualization palette at a contrast ratio of 9:1",
+    public: true,
+  },
+  colorChartsPink1000: {
+    description: "Color from the 'pink' data visualization palette at a contrast ratio of 10:1",
+    public: true,
+  },
+  colorChartsPink1100: {
+    description: "Color from the 'pink' data visualization palette at a contrast ratio of 11:1",
+    public: true,
+  },
+  colorChartsPink1200: {
+    description: "Color from the 'pink' data visualization palette at a contrast ratio of 12:1",
+    public: true,
+  },
+  colorChartsStatusCritical: {
+    description: 'Color to represent a critical error or a critically high-level of severity. For example: "Sev-1"',
+    public: true,
+    themeable: true,
+  },
+  colorChartsStatusHigh: {
+    description:
+      'Color to represent an error status or a high-level of severity. Use this color to represent a default error status when there is only one applicable to a chart. For example: "Failed" or "Sev-2"',
+    public: true,
+    themeable: true,
+  },
+  colorChartsStatusMedium: {
+    description: 'Color to represent a medium-level of severity. For example: "Sev-3"',
+    public: true,
+    themeable: true,
+  },
+  colorChartsStatusLow: {
+    description: 'Color to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"',
+    public: true,
+    themeable: true,
+  },
+  colorChartsStatusPositive: {
+    description: 'Color to represent a positive status. *For example: "Success" or "Running"',
+    public: true,
+    themeable: true,
+  },
+  colorChartsStatusInfo: {
+    description: 'Color to represent an informational status. For example: "In-progress" or "Updating"',
+    public: true,
+    themeable: true,
+  },
+  colorChartsStatusNeutral: {
+    description:
+      'Color to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"',
+    public: true,
+    themeable: true,
+  },
+  colorChartsThresholdNegative: {
+    description: 'The color to represent a threshold with a negative outcome. For example: A maximum limit',
+    public: true,
+    themeable: true,
+  },
+  colorChartsThresholdPositive: {
+    description: 'The color to represent a threshold with a positive outcome. For example: A designated pass rate',
+    public: true,
+    themeable: true,
+  },
+  colorChartsThresholdInfo: {
+    description:
+      'The color to represent an informational threshold to highlight special circumstances that may have or will occur. For example: A forecasted estimate',
+    public: true,
+    themeable: true,
+  },
+  colorChartsThresholdNeutral: {
+    description: 'The color to represent a threshold with a neutral outcome. For example: An average or baseline',
+    public: true,
+    themeable: true,
+  },
+  colorChartsLineGrid: {
+    description: 'Color of the grid lines in a chart.',
+    public: true,
+  },
+  colorChartsLineTick: {
+    description: 'Color of the tick marks in a chart.',
+    public: true,
+  },
+  colorChartsLineAxis: {
+    description: 'Color of the axis lines in a chart.',
+    public: true,
+  },
+  colorChartsPaletteCategorical1: {
+    description: 'Color #1 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical2: {
+    description: 'Color #2 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical3: {
+    description: 'Color #3 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical4: {
+    description: 'Color #4 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical5: {
+    description: 'Color #5 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical6: {
+    description: 'Color #6 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical7: {
+    description: 'Color #7 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical8: {
+    description: 'Color #8 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical9: {
+    description: 'Color #9 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical10: {
+    description: 'Color #10 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical11: {
+    description: 'Color #11 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical12: {
+    description: 'Color #12 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical13: {
+    description: 'Color #13 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical14: {
+    description: 'Color #14 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical15: {
+    description: 'Color #15 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical16: {
+    description: 'Color #16 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical17: {
+    description: 'Color #17 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical18: {
+    description: 'Color #18 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical19: {
+    description: 'Color #19 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical20: {
+    description: 'Color #20 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical21: {
+    description: 'Color #21 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical22: {
+    description: 'Color #22 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical23: {
+    description: 'Color #23 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical24: {
+    description: 'Color #24 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical25: {
+    description: 'Color #25 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical26: {
+    description: 'Color #26 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical27: {
+    description: 'Color #27 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical28: {
+    description: 'Color #28 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical29: {
+    description: 'Color #29 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical30: {
+    description: 'Color #30 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical31: {
+    description: 'Color #31 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical32: {
+    description: 'Color #32 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical33: {
+    description: 'Color #33 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical34: {
+    description: 'Color #34 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical35: {
+    description: 'Color #35 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical36: {
+    description: 'Color #36 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical37: {
+    description: 'Color #37 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical38: {
+    description: 'Color #38 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical39: {
+    description: 'Color #39 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical40: {
+    description: 'Color #40 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical41: {
+    description: 'Color #41 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical42: {
+    description: 'Color #42 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical43: {
+    description: 'Color #43 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical44: {
+    description: 'Color #44 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical45: {
+    description: 'Color #45 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical46: {
+    description: 'Color #46 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical47: {
+    description: 'Color #47 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical48: {
+    description: 'Color #48 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical49: {
+    description: 'Color #49 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsPaletteCategorical50: {
+    description: 'Color #50 on the categorical data visualization palette.',
+    public: true,
+    themeable: true,
+  },
+  colorChartsErrorBarMarker: {
+    description: 'Color for the error bar marker in charts.',
+    public: true,
+    themeable: true,
+  },
+};
+
+export default metadata;
diff --git a/style-dictionary/one-theme/metadata/color-palette.ts b/style-dictionary/one-theme/metadata/color-palette.ts
new file mode 100644
index 0000000000..96390e317a
--- /dev/null
+++ b/style-dictionary/one-theme/metadata/color-palette.ts
@@ -0,0 +1,7 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { StyleDictionary } from '../../utils/interfaces.js';
+
+const metadata: StyleDictionary.MetadataIndex = {};
+
+export default metadata;
diff --git a/style-dictionary/one-theme/metadata/color-severity.ts b/style-dictionary/one-theme/metadata/color-severity.ts
new file mode 100644
index 0000000000..7b5d404a2b
--- /dev/null
+++ b/style-dictionary/one-theme/metadata/color-severity.ts
@@ -0,0 +1,66 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { StyleDictionary } from '../../utils/interfaces.js';
+
+const metadata: StyleDictionary.MetadataIndex = {
+  colorBackgroundNotificationSeverityCritical: {
+    description:
+      'Background color in a notification to represent a critical error or a critically high-level of severity. For example: "Sev-1"',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundNotificationSeverityHigh: {
+    description:
+      'Background color in a notification to represent an error status or a high-level of severity. For example: "Failed" or "Sev-2"',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundNotificationSeverityMedium: {
+    description: 'Background color in a notification to represent a medium-level of severity. For example: "Sev-3"',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundNotificationSeverityLow: {
+    description:
+      'Background color in a notification to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundNotificationSeverityNeutral: {
+    description:
+      'Background color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"',
+    public: true,
+    themeable: true,
+  },
+  colorTextNotificationSeverityCritical: {
+    description:
+      'Text color in a notification to represent a critical error or a critically high-level of severity. For example: "Sev-1"',
+    public: true,
+    themeable: true,
+  },
+  colorTextNotificationSeverityHigh: {
+    description:
+      'Text color in a notification to represent an error status or a high-level of severity. For example: "Failed" or "Sev-2"',
+    public: true,
+    themeable: true,
+  },
+  colorTextNotificationSeverityMedium: {
+    description: 'Text color in a notification to represent a medium-level of severity. For example: "Sev-3"',
+    public: true,
+    themeable: true,
+  },
+  colorTextNotificationSeverityLow: {
+    description:
+      'Text color in a notification to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"',
+    public: true,
+    themeable: true,
+  },
+  colorTextNotificationSeverityNeutral: {
+    description:
+      'Text color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"',
+    public: true,
+    themeable: true,
+  },
+};
+
+export default metadata;
diff --git a/style-dictionary/one-theme/metadata/colors.ts b/style-dictionary/one-theme/metadata/colors.ts
new file mode 100644
index 0000000000..7421baae11
--- /dev/null
+++ b/style-dictionary/one-theme/metadata/colors.ts
@@ -0,0 +1,995 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { StyleDictionary } from '../../utils/interfaces.js';
+
+const metadata: StyleDictionary.MetadataIndex = {
+  colorBackgroundButtonNormalActive: {
+    description: 'The background color of normal buttons in active state.',
+    themeable: true,
+    public: true,
+  },
+  colorBackgroundButtonNormalDefault: {
+    description: 'The default background color of normal buttons.',
+    themeable: true,
+    public: true,
+  },
+  colorBackgroundButtonNormalDisabled: {
+    description: 'The background color of normal buttons in disabled state.',
+    themeable: true,
+    public: true,
+  },
+  colorBackgroundButtonNormalHover: {
+    description: 'The background color of normal buttons in hover state.',
+    themeable: true,
+    public: true,
+  },
+  colorBackgroundButtonLinkActive: {
+    description: 'The background color of link buttons in active state.',
+    themeable: true,
+    public: true,
+  },
+  colorBackgroundButtonLinkDefault: {
+    description: 'The background color of link buttons in default state.',
+    themeable: true,
+    public: true,
+  },
+  colorBackgroundButtonLinkHover: {
+    description: 'The background color of link buttons in hover state.',
+    themeable: true,
+    public: true,
+  },
+  colorBackgroundButtonLinkDisabled: {
+    description: 'The background color of link buttons in disabled state.',
+    themeable: true,
+    public: true,
+  },
+  colorBackgroundToggleButtonNormalPressed: {
+    description: 'The background color of normal toggle buttons in pressed state.',
+    themeable: true,
+    public: true,
+  },
+  colorBackgroundButtonPrimaryActive: {
+    description: 'The background color of primary buttons in active state.',
+    themeable: true,
+    public: true,
+  },
+  colorBackgroundButtonPrimaryDefault: {
+    description: 'The default background color of primary buttons.',
+    themeable: true,
+    public: true,
+  },
+  colorBackgroundButtonPrimaryDisabled: {
+    description: 'The background color of primary buttons in disabled state.',
+    themeable: true,
+    public: true,
+  },
+  colorBackgroundButtonPrimaryHover: {
+    description: 'The background color of primary buttons in hover state.',
+    themeable: true,
+    public: true,
+  },
+  colorBackgroundCellShaded: {
+    description: 'The background color of shaded table cells.',
+    themeable: true,
+    public: true,
+  },
+  colorBackgroundCard: {
+    description: 'The background color of a card.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundContainerContent: {
+    description:
+      'The background color of container main content areas. For example: content areas of form sections, containers, tables, and cards.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundContainerHeader: {
+    description:
+      'The background color of container headers. For example: headers of form sections, containers, tables, and card collections.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundControlChecked: {
+    description:
+      'The background color of a checked form control. For example: background fill of a selected radio button, checked checkbox, and toggle that is switched on.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundControlDefault: {
+    description:
+      'The default background color of form controls. For example: radio buttons and checkboxes default background fill color.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundControlDisabled: {
+    description:
+      'The background color of a disabled form control. For example: background fill of a disabled radio button and checkbox.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundDropdownItemDefault: {
+    description:
+      'The default background color of dropdown items. For example: select, multiselect, autosuggest, and datepicker dropdown backgrounds.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundDropdownItemFilterMatch: {
+    description:
+      "The background color of text that matches a user's query. For example: the background of text matching a query entered into a table filter, select, multiselect, or autosuggest.",
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundDropdownItemHover: {
+    description:
+      'The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundDropdownItemSelected: {
+    description:
+      'The background color of selected dropdown items. For example: background of selected items in select, multiselect, autosuggest, and datepicker dropdowns.',
+  },
+  colorBackgroundHomeHeader: {
+    description: "The background color of the home header, displayed on the Service's home page.",
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundInputDefault: {
+    description:
+      'The default background color of form inputs. For example: background fill of an input, textarea, autosuggest, and trigger of a select and multiselect.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundInputDisabled: {
+    description:
+      'The background color of a disabled form input. For example: background fill of a disabled input, textarea, autosuggest, and trigger of a select and multiselect.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundItemSelected: {
+    description:
+      'The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundLayoutMain: {
+    description: 'The background color of the main content area on a page. For example: content area in app layout.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundLayoutPanelContent: {
+    description:
+      'The background color of app layout panel content area. For example: The side navigation and tools panel content background color.',
+  },
+  colorBackgroundLayoutToolbar: {
+    description:
+      "The background color of the app layout's toolbar. For example: The toolbar bar containing breadcrumbs and toggle buttons.",
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundLayoutToggleActive: {
+    description: "The background color of the app layout toggle button when it's active.",
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundLayoutToggleDefault: {
+    description: 'The default background color of the app layout toggle button.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundLayoutToggleHover: {
+    description: 'The background color of the app layout toggle button on hover.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundLayoutToggleSelectedActive: {
+    description: "The background color of the app layout toggle button when it's selected and active.",
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundLayoutToggleSelectedDefault: {
+    description: "The default background color of the app layout toggle button when it's selected.",
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundLayoutToggleSelectedHover: {
+    description: "The background color of the app layout toggle button on hover when it's selected.",
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundNotificationBlue: {
+    description: 'Background color for blue notifications. For example: blue badges and info flash messages.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundNotificationGreen: {
+    description: 'Background color for green notifications. For example: green badges and success flash messages.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundNotificationRed: {
+    description: 'Background color for red notifications. For example: red badges and error flash messages.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundNotificationYellow: {
+    description: 'Background color for yellow notifications. For example: yellow badges and warning flash messages.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundNotificationGrey: {
+    description: 'Background color for grey notifications. For example: grey badges.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundPopover: {
+    description: 'Background color for the popover container.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundProgressBarValueDefault: {
+    description: 'The default background color of the progress bar value.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundProgressBarDefault: {
+    description: 'The default background color of the progress bar.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundSegmentActive: {
+    description: 'The background color of the active segment in a segmented control.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundSegmentDefault: {
+    description: 'The background color of inactive segments in a segmented control.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundSegmentDisabled: {
+    description: 'The background color of disabled segments in a segmented control.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundSegmentHover: {
+    description: 'The background color of inactive segments in a segmented control on hover.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundSegmentWrapper: {
+    description: 'The background color of segmented control wrapper.',
+    public: false,
+    themeable: true,
+  },
+  colorBackgroundSliderHandleDefault: {
+    description: 'The default background color of the slider handle.',
+    themeable: true,
+    public: true,
+  },
+  colorBackgroundSliderHandleActive: {
+    description: 'The background color of the slider handle in active state.',
+    themeable: true,
+    public: true,
+  },
+  colorBackgroundSliderRangeDefault: {
+    description: 'The default background color of the slider range.',
+    themeable: true,
+    public: true,
+  },
+  colorBackgroundSliderRangeActive: {
+    description: 'The background color of the slider range in active state.',
+    themeable: true,
+    public: true,
+  },
+  colorBackgroundSliderTrackDefault: {
+    description: 'The default background color of the slider track.',
+    themeable: true,
+    public: true,
+  },
+  colorBackgroundStatusError: {
+    description: 'The background color of an item in error state. For example: error alerts.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundStatusInfo: {
+    description: 'The background color of an informational item. For example: information alerts.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundDialog: {
+    description: 'The background color of the feedback/input dialogue box.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundStatusSuccess: {
+    description: 'The background color of an item in success state. For example: success alerts.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundStatusWarning: {
+    description: 'The background color of an item in warning state. For example: warning alerts.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundToggleCheckedDisabled: {
+    description: 'The background color of checked toggles in disabled state.',
+    themeable: true,
+    public: true,
+  },
+  colorBackgroundAvatarDefault: {
+    description: 'The default background color of avatars.',
+    themeable: false,
+    public: true,
+  },
+  colorBackgroundAvatarGenAi: {
+    description: 'The gen-ai background color of avatars.',
+    themeable: false,
+    public: true,
+  },
+  colorTextAvatar: {
+    description: 'The text and icon color of avatars.',
+    themeable: false,
+    public: true,
+  },
+  colorBackgroundLoadingBarGenAi: {
+    description: 'The background color of gen-ai loading bars.',
+    themeable: false,
+    public: true,
+  },
+  colorBackgroundChatBubbleOutgoing: {
+    description: 'The background color of `outgoing` chat bubble.',
+    themeable: true,
+    public: true,
+  },
+  colorBackgroundChatBubbleIncoming: {
+    description: 'The background color of `incoming` chat bubble.',
+    themeable: true,
+    public: true,
+  },
+  colorTextChatBubbleOutgoing: {
+    description: 'Text color of `outgoing` chat bubble.',
+    themeable: true,
+    public: true,
+  },
+  colorTextChatBubbleIncoming: {
+    description: 'Text color of `incoming` chat bubble.',
+    themeable: true,
+    public: true,
+  },
+  colorBorderButtonNormalActive: {
+    description: 'The border color of normal buttons in active state.',
+    themeable: true,
+    public: true,
+  },
+  colorBorderButtonLinkDisabled: {
+    description: 'The border color of link buttons in disabled state.',
+    themeable: true,
+    public: true,
+  },
+  colorBorderButtonNormalDefault: { description: 'The border color of normal buttons.', themeable: true, public: true },
+  colorBorderToggleButtonNormalPressed: {
+    description: 'The border color of normal toggle buttons in pressed state.',
+    themeable: true,
+    public: true,
+  },
+  colorBorderButtonNormalDisabled: {
+    description: 'The border color of normal buttons in disabled state.',
+    themeable: true,
+    public: true,
+  },
+  colorTextButtonNormalDisabled: {
+    description: 'The text color of normal buttons in disabled state.',
+    themeable: true,
+    public: true,
+  },
+  colorBorderButtonNormalHover: {
+    description: 'The border color of normal buttons in hover state.',
+    themeable: true,
+    public: true,
+  },
+  colorTextButtonIconDisabled: {
+    description: 'The color of icon buttons in disabled state.',
+    themeable: true,
+    public: true,
+  },
+  colorBorderButtonPrimaryActive: {
+    description: 'The border color of primary buttons in active state.',
+    themeable: true,
+    public: true,
+  },
+  colorBorderButtonPrimaryDefault: {
+    description: 'The border color of primary buttons.',
+    themeable: true,
+    public: true,
+  },
+  colorBorderButtonPrimaryDisabled: {
+    description: 'The border color of primary buttons in disabled state.',
+    themeable: true,
+    public: true,
+  },
+  colorBorderButtonPrimaryHover: {
+    description: 'The border color of primary buttons in hover state.',
+    themeable: true,
+    public: true,
+  },
+  colorTextButtonPrimaryDisabled: {
+    description: 'The text color of primary buttons in disabled state.',
+    themeable: true,
+    public: true,
+  },
+  colorItemSelected: {
+    description:
+      'The highlight color for selected items. For example: borders of tokens and selected table rows, and check icons in selected dropdown items.',
+    public: true,
+    themeable: true,
+  },
+  colorBorderCard: {
+    description: 'The border color of a card.',
+    public: true,
+    themeable: true,
+  },
+  colorBorderContainerTop: {
+    description:
+      'The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.',
+    public: true,
+    themeable: true,
+  },
+  colorBorderControlDefault: {
+    description: 'The default border color of form controls. For example: radio buttons and checkboxes.',
+    public: true,
+    themeable: true,
+  },
+  colorBorderControlDisabled: {
+    description: 'The border color of disabled form controls. For example: disabled radio buttons and checkboxes.',
+  },
+  colorBorderDividerDefault: {
+    description:
+      'The default color for dividers. For example: dividers in column layout, expanding sections, side nav, help panel, between table rows and dropdown items, and inside containers.',
+    public: true,
+    themeable: true,
+  },
+  colorBorderDividerSecondary: {
+    description: 'The border color for row dividers. For example: row dividers for table and collection preferences.',
+    public: true,
+    themeable: true,
+  },
+  colorBorderDropdownContainer: {
+    description:
+      'The border color of the dropdown container. For example: border color of the dropdown container in button dropdown, select, and multi-select.',
+    public: true,
+    themeable: true,
+  },
+  colorBorderPopover: {
+    description: 'The border color of the popover.',
+    public: true,
+    themeable: true,
+  },
+  colorBorderDropdownItemHover: {
+    description:
+      'The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker.',
+    public: true,
+    themeable: true,
+  },
+  colorBorderInputDefault: {
+    description:
+      'The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.',
+    public: true,
+    themeable: true,
+  },
+  colorBorderItemFocused: {
+    description: 'The color of focus states. For example: the focus ring around interactive elements.',
+    public: true,
+    themeable: true,
+  },
+  colorBorderInputFocused: {
+    description:
+      'The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.',
+    public: true,
+    themeable: true,
+  },
+  colorBorderItemPlaceholder: {
+    description: 'The border color for dividers.',
+  },
+  colorBorderItemSelected: {
+    description:
+      'The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders.',
+    public: true,
+    themeable: true,
+  },
+  colorBorderDropdownItemFocused: {
+    description:
+      'The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select.',
+    public: true,
+    themeable: true,
+  },
+  colorBorderSegmentActive: {
+    description: 'Deprecated - this token is no longer in use.',
+    public: true,
+    themeable: true,
+  },
+  colorBorderSegmentDefault: {
+    description: 'Deprecated - this token is no longer in use.',
+    public: true,
+    themeable: true,
+  },
+  colorBorderSegmentDisabled: {
+    description: 'Deprecated - this token is no longer in use.',
+    public: true,
+    themeable: true,
+  },
+  colorBorderSegmentHover: {
+    description: 'Deprecated - this token is no longer in use.',
+    public: true,
+    themeable: true,
+  },
+  colorBorderStatusError: {
+    description: 'The border color of an item in error state. For example: error alerts.',
+    public: true,
+    themeable: true,
+  },
+  colorBorderStatusInfo: {
+    description: 'The border color of an informational item. For example: information alerts.',
+    public: true,
+    themeable: true,
+  },
+  colorBorderStatusSuccess: {
+    description: 'The border color of an item in success state. For example: success alerts.',
+    public: true,
+    themeable: true,
+  },
+  colorBorderStatusWarning: {
+    description: 'The border color of an item in warning state. For example: warning alerts.',
+    public: true,
+    themeable: true,
+  },
+  colorBorderDialog: {
+    description: 'The border color of the feedback/input dialogue box.',
+    public: true,
+    themeable: true,
+  },
+  colorBorderTutorial: { description: 'The border color of tutorials in the tutorials list in the tutorial panel.' },
+  colorForegroundControlDefault: {
+    description:
+      'The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.',
+    public: true,
+    themeable: true,
+  },
+  colorForegroundControlDisabled: {
+    description:
+      'The color used to mark disabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.',
+    public: true,
+    themeable: true,
+  },
+  colorForegroundControlReadOnly: {
+    description:
+      'The color used to mark readonly form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.',
+    public: true,
+    themeable: true,
+  },
+  colorTextAccent: {
+    description:
+      'The accent text color used to guide a user. For example: the highlighted page in the side navigation, active tab text, selected day text color in date picker, and hover state in expandable section.',
+    public: true,
+    themeable: true,
+  },
+  colorTextBodyDefault: {
+    description:
+      'The default color of non-heading text and body content. For example: text in a paragraph tag, table cell data, form field labels and values.',
+    public: true,
+    themeable: true,
+  },
+  colorTextBodySecondary: {
+    description:
+      'The color of text that is secondary to base text. For example: text in the navigation and tools panels.',
+    public: true,
+    themeable: true,
+  },
+  colorTextBreadcrumbCurrent: {
+    description: 'The text color that marks the breadcrumb item for the page the user is currently viewing.',
+    themeable: true,
+    public: true,
+  },
+  colorTextBreadcrumbIcon: {
+    description: 'The color used for the icon delimiter between breadcrumb items.',
+    themeable: true,
+    public: true,
+  },
+  colorTextButtonInlineIconDefault: {
+    description: 'The default color of inline button icons.',
+    themeable: true,
+    public: true,
+  },
+  colorTextButtonInlineIconDisabled: {
+    description: 'The color of inline button icons in disabled state.',
+    themeable: true,
+    public: true,
+  },
+  colorTextButtonInlineIconHover: {
+    description: 'The color of inline button icons in hover state.',
+    themeable: true,
+    public: true,
+  },
+  colorTextButtonNormalActive: {
+    description: 'The active text color of normal buttons. For example: Active text color in normal and link buttons.',
+    themeable: true,
+    public: true,
+  },
+  colorTextToggleButtonNormalPressed: {
+    description: 'The pressed text color of normal toggle buttons.',
+    themeable: true,
+    public: true,
+  },
+  colorTextButtonNormalDefault: {
+    description: 'The default text color of normal buttons.',
+    themeable: true,
+    public: true,
+  },
+  colorTextButtonNormalHover: {
+    description: 'The hover text color of normal buttons.',
+    themeable: true,
+    public: true,
+  },
+  colorTextButtonPrimaryActive: {
+    description: 'The active text color of primary buttons.',
+    themeable: true,
+    public: true,
+  },
+  colorTextLinkButtonNormalDefault: {
+    description: 'The default text color of link buttons.',
+    themeable: true,
+    public: false,
+  },
+  colorTextLinkButtonNormalHover: {
+    description: 'The hover text color of link buttons.',
+    themeable: true,
+    public: false,
+  },
+  colorTextLinkButtonNormalActive: {
+    description: 'The active text color of link buttons.',
+    themeable: true,
+    public: false,
+  },
+  colorTextButtonLinkActive: {
+    description: 'The text color of link buttons in active state.',
+    themeable: true,
+    public: true,
+  },
+  colorTextButtonLinkDefault: {
+    description: 'The default text color of link buttons.',
+    themeable: true,
+    public: true,
+  },
+  colorTextButtonLinkHover: {
+    description: 'The text color of link buttons in hover state.',
+    themeable: true,
+    public: true,
+  },
+  colorTextButtonLinkDisabled: {
+    description: 'The text color of link buttons in disabled state.',
+    themeable: true,
+    public: true,
+  },
+  colorTextButtonPrimaryDefault: {
+    description: 'The default text color of primary buttons.',
+    themeable: true,
+    public: true,
+  },
+  colorTextButtonPrimaryHover: {
+    description: 'The hover text color of primary buttons.',
+    themeable: true,
+    public: true,
+  },
+  colorTextControlDisabled: {
+    description:
+      'The text color of a disabled control. For example: the label and description on a disabled checkbox, radio button, or toggle.',
+  },
+  colorTextCounter: {
+    description: 'The default color for counters. For example: counters in table headers',
+    themeable: true,
+    public: true,
+  },
+  colorTextDropdownFooter: {
+    description:
+      'The default color of dropdown footer text. For example: end of results text in an asynchrounous select and autosuggest.',
+  },
+  colorTextDropdownItemDefault: {
+    description:
+      'The default text color of dropdown items. For example: label and label tag text color for autosuggest, select, and multiselect.',
+    themeable: true,
+    public: true,
+  },
+  colorTextDropdownItemDisabled: {
+    description:
+      'The text color of disabled dropdown items. For example: label, label tag, description, and tag text color of a disabled item in a select, multiselect, and autosuggest.',
+    themeable: true,
+    public: true,
+  },
+  colorTextDropdownItemFilterMatch: {
+    description:
+      "The color of text matching a user's query. For example: the text matching a query entered into a table filter, select, multiselect, or autosuggest.",
+    public: true,
+    themeable: true,
+  },
+  colorTextDropdownItemHighlighted: {
+    description:
+      'The text color of hovered or selected dropdown items. For example: label text color of the item on hover in a select, multiselect, and autosuggest.',
+    public: true,
+    themeable: true,
+  },
+  colorTextDropdownItemSecondary: {
+    description:
+      'The text color of secondary information in dropdown items. For example: descriptions and tags text color in a select, multiselect, and autosuggest.',
+  },
+  colorTextEmpty: {
+    description:
+      'The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text.',
+    public: true,
+    themeable: true,
+  },
+  colorTextFormDefault: {
+    description:
+      'The default color of form field labels and values. For example: the label in form fields, checkboxes, radio buttons, toggles, and the value in inputs and text areas.',
+    public: true,
+    themeable: true,
+  },
+  colorTextFormLabel: { description: 'Component specific: Special because control group is different.' },
+  colorTextFormSecondary: {
+    description:
+      'The color of secondary text in form fields and controls. For example: the description and constraint text in form fields, the descriptions in checkboxes, radio buttons, toggles, and any additional info in an attribute editor.',
+    public: true,
+    themeable: true,
+  },
+  colorTextGroupLabel: {
+    description:
+      "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector.",
+    public: true,
+    themeable: true,
+  },
+  colorTextLabelGenAi: {
+    description: 'The default color for labels indicating that content is produced by generative AI.',
+    public: true,
+    themeable: false,
+  },
+  colorTextHeadingDefault: {
+    description:
+      'The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels.',
+    public: true,
+    themeable: true,
+  },
+  colorTextHeadingSecondary: {
+    description:
+      'The default color for secondary heading text such as page and container descriptions. For example: descriptions in containers such as form sections, tables, and card collections, as well as form page descriptions.',
+    public: true,
+    themeable: true,
+  },
+  colorTextHomeHeaderDefault: {
+    description: "The color of the home header's text, displayed on the Service's home page.",
+    public: true,
+    themeable: true,
+  },
+  colorTextHomeHeaderSecondary: {
+    description: "The color of the home header's secondary text, displayed on the Service's home page.",
+    public: true,
+    themeable: true,
+  },
+  colorTextInputDisabled: {
+    description:
+      'The color of the text value in a disabled input. For example: text in a disabled input, autosuggest, datepicker, and the trigger of a select and multiselect.',
+    public: true,
+    themeable: true,
+  },
+  colorTextInputPlaceholder: {
+    description:
+      'The color of placeholder text in an input. For example: placeholder text in an input, autosuggest, datepicker, and the trigger of a select and multiselect.',
+    public: true,
+    themeable: true,
+  },
+  colorTextInteractiveActive: {
+    description: 'The color of clickable elements in their active state. For example: tabs and icons.',
+    public: true,
+    themeable: true,
+  },
+  colorTextInteractiveDefault: {
+    description: 'The color of clickable elements in their default state. For example: tabs, and icons.',
+    public: true,
+    themeable: true,
+  },
+  colorTextInteractiveDisabled: {
+    description:
+      'The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons.',
+    public: true,
+    themeable: true,
+  },
+  colorTextInteractiveHover: {
+    description: 'The color of clickable elements on hover. For example: icons on hover.',
+    public: true,
+    themeable: true,
+  },
+  colorTextToggleButtonIconPressed: {
+    description: 'The pressed text color of icon toggle buttons.',
+    public: true,
+    themeable: true,
+  },
+  colorTextInteractiveInvertedDefault: {
+    description:
+      'The default color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar.',
+    themeable: true,
+    public: true,
+  },
+  colorTextInteractiveInvertedHover: {
+    description:
+      'The hover color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar.',
+    themeable: true,
+    public: true,
+  },
+  colorTextLayoutToggle: {
+    description: 'The default color of the app layout toggle.',
+    public: true,
+    themeable: true,
+  },
+  colorTextLayoutToggleActive: {
+    description: "The color of the app layout toggle button when it's active.",
+    public: true,
+    themeable: true,
+  },
+  colorTextLayoutToggleHover: {
+    description: 'The color of the app layout toggle button on hover.',
+    public: true,
+    themeable: true,
+  },
+  colorTextLayoutToggleSelected: {
+    description: "The color of the app layout toggle button when it's selected.",
+    public: true,
+    themeable: true,
+  },
+  colorTextLabel: {
+    description:
+      "The default color for non-form labels. For example: the key in key/value pairs and card's sections labels.",
+    public: true,
+    themeable: true,
+  },
+  colorTextLinkDefault: {
+    description:
+      'The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.',
+    public: true,
+    themeable: true,
+  },
+  colorTextLinkHover: {
+    description:
+      'The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.',
+    public: true,
+    themeable: true,
+  },
+  colorTextLinkSecondaryDefault: {
+    description:
+      'The default color for secondary links. For example: links with lower visual emphasis or supplementary content.',
+    public: true,
+    themeable: true,
+  },
+  colorTextLinkSecondaryHover: {
+    description:
+      'The hover color for secondary links. For example: links with lower visual emphasis or supplementary content.',
+    public: true,
+    themeable: true,
+  },
+  colorTextLinkInfoDefault: {
+    description: 'The default color for info links.',
+    public: true,
+    themeable: true,
+  },
+  colorTextLinkInfoHover: {
+    description: 'The hover color for info links.',
+    public: true,
+    themeable: true,
+  },
+  colorTextNotificationDefault: {
+    description: 'Default text color for notifications. For example: the text on badges and flashes.',
+    public: true,
+    themeable: true,
+  },
+  colorTextSegmentActive: {
+    description: 'The text color of the active segment in a segmented control.',
+    public: true,
+    themeable: true,
+  },
+  colorTextSegmentDefault: {
+    description: 'The text color of inactive segments in a segmented control.',
+    public: true,
+    themeable: true,
+  },
+  colorTextSegmentHover: {
+    description: 'The text color of inactive segments in a segmented control on hover.',
+    public: true,
+    themeable: true,
+  },
+  colorTextStatusError: {
+    description: 'The color of error text and icons. For example: form field error text and error status indicators.',
+    public: true,
+    themeable: true,
+  },
+  colorTextStatusInactive: {
+    description:
+      'The color of inactive and loading text and icons. For example: table and card collection loading states icon and text and inactive and pending status indicators.',
+    public: true,
+    themeable: true,
+  },
+  colorTextStatusInfo: {
+    description: 'The color of info text and icons. For example: info status indicators and info alert icon.',
+    public: true,
+    themeable: true,
+  },
+  colorTextStatusSuccess: {
+    description: 'The color of success text and icons. For example: success status indicators and success alert icon.',
+    public: true,
+    themeable: true,
+  },
+  colorTextStatusWarning: {
+    description: 'The color of warning icons.',
+    themeable: true,
+    public: true,
+  },
+  colorTextTopNavigationTitle: {
+    description: 'The color of the title in the top navigation.',
+    public: true,
+    themeable: true,
+  },
+  colorTreeViewConnectorLine: {
+    description: 'The color of the tree view connector lines.',
+    public: true,
+    themeable: true,
+  },
+  colorBoardPlaceholderActive: {
+    description: 'The color of board placeholder in active state.',
+    themeable: false,
+    public: true,
+  },
+  colorBoardPlaceholderHover: {
+    description: 'The color of board placeholder in hovered state.',
+    themeable: false,
+    public: true,
+  },
+  colorDragPlaceholderActive: {
+    description: 'The color of drag placeholder in active state.',
+    themeable: false,
+    public: true,
+  },
+  colorDragPlaceholderHover: {
+    description: 'The color of drag placeholder in hovered state.',
+    themeable: false,
+    public: true,
+  },
+  colorDropzoneBackgroundDefault: {
+    description: 'The default color of file upload dropzone background.',
+    themeable: true,
+    public: true,
+  },
+  colorDropzoneBackgroundHover: {
+    description: 'The color of file upload dropzone background in hovered state.',
+    themeable: true,
+    public: true,
+  },
+  colorDropzoneTextDefault: {
+    description: 'The default color of file upload dropzone text.',
+    themeable: true,
+    public: true,
+  },
+  colorDropzoneTextHover: {
+    description: 'The color of file upload dropzone text in hovered state.',
+    themeable: true,
+    public: true,
+  },
+  colorDropzoneBorderDefault: {
+    description: 'The default color of file upload dropzone border.',
+    themeable: true,
+    public: true,
+  },
+  colorDropzoneBorderHover: {
+    description: 'The color of file upload dropzone border in hovered state.',
+    themeable: true,
+    public: true,
+  },
+};
+
+export default metadata;
diff --git a/style-dictionary/one-theme/metadata/index.ts b/style-dictionary/one-theme/metadata/index.ts
new file mode 100644
index 0000000000..134d7a991c
--- /dev/null
+++ b/style-dictionary/one-theme/metadata/index.ts
@@ -0,0 +1,38 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import mapValues from 'lodash/mapValues.js';
+import merge from 'lodash/merge.js';
+
+import { StyleDictionary } from '../../utils/interfaces.js';
+import { expandMetadata } from '../../utils/metadata.js';
+import theme from '../index.js';
+import borders from './borders.js';
+import colorCharts from './color-charts.js';
+import colorPalette from './color-palette.js';
+import colorSeverity from './color-severity.js';
+import colors from './colors.js';
+import motion from './motion.js';
+import shadows from './shadows.js';
+import sizes from './sizes.js';
+import spacing from './spacing.js';
+import typography from './typography.js';
+
+const allTokens = mapValues(theme.tokens, () => ({}));
+
+const metadata: StyleDictionary.MetadataIndex = expandMetadata(
+  merge(
+    {},
+    allTokens,
+    borders,
+    colorCharts,
+    colorSeverity,
+    colorPalette,
+    colors,
+    motion,
+    shadows,
+    sizes,
+    spacing,
+    typography
+  )
+);
+export default metadata;
diff --git a/style-dictionary/one-theme/metadata/motion.ts b/style-dictionary/one-theme/metadata/motion.ts
new file mode 100644
index 0000000000..dc0a2994fc
--- /dev/null
+++ b/style-dictionary/one-theme/metadata/motion.ts
@@ -0,0 +1,78 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { StyleDictionary } from '../../utils/interfaces.js';
+
+const metadata: StyleDictionary.MetadataIndex = {
+  motionEasingResponsive: {
+    description: 'The easing curve for providing responsive yet smooth visual feedback.',
+    public: true,
+    themeable: false,
+  },
+  motionEasingSticky: {
+    description: 'The easing curve for making an element sticky to a certain state.',
+    public: true,
+    themeable: false,
+  },
+  motionEasingExpressive: {
+    description: "The easing curve for drawing a user's attention in an expressive way.",
+    public: true,
+    themeable: false,
+  },
+
+  motionDurationResponsive: {
+    description: 'The duration for making the motion feel quick and responsive.',
+    public: true,
+    themeable: false,
+  },
+  motionDurationExpressive: {
+    description: 'The duration for accommodating the motion with more expressiveness.',
+    public: true,
+    themeable: false,
+  },
+  motionDurationComplex: {
+    description: 'The duration for drawing more attention or accommodating for more complexity.',
+    public: true,
+    themeable: false,
+  },
+
+  motionDurationAvatarGenAiGradient: {
+    description: 'The duration for gradient motion of gen-ai avatars.',
+    public: true,
+    themeable: false,
+  },
+  motionDurationAvatarLoadingDots: {
+    description: 'The duration for loading motion of avatars.',
+    public: true,
+    themeable: false,
+  },
+  motionEasingAvatarGenAiGradient: {
+    description: 'The easing curve for gradient motion of gen-ai avatars.',
+    public: true,
+    themeable: false,
+  },
+
+  motionKeyframesFadeIn: {
+    description: 'The CSS keyframes for showing an element.',
+    public: true,
+    themeable: false,
+  },
+  motionKeyframesFadeOut: {
+    description: 'The CSS keyframes for hiding an element.',
+    public: true,
+    themeable: false,
+  },
+  motionKeyframesScalePopup: {
+    description: "The CSS keyframes for scaling up an element to draw the user's attention.",
+    public: true,
+    themeable: false,
+    visualRefreshOnly: true,
+  },
+  motionKeyframesStatusIconError: {
+    description: "The CSS keyframes applied to an error status icon to draw the user's attention.",
+    public: true,
+    themeable: false,
+    visualRefreshOnly: true,
+  },
+};
+
+export default metadata;
diff --git a/style-dictionary/one-theme/metadata/shadows.ts b/style-dictionary/one-theme/metadata/shadows.ts
new file mode 100644
index 0000000000..9b9c0ebe37
--- /dev/null
+++ b/style-dictionary/one-theme/metadata/shadows.ts
@@ -0,0 +1,29 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { StyleDictionary } from '../../utils/interfaces.js';
+
+const metadata: StyleDictionary.MetadataIndex = {
+  shadowCard: {
+    description: 'The shadow of a card.',
+    public: true,
+    themeable: true,
+  },
+  shadowContainer: { description: 'Shadow for containers and cards.' },
+  shadowContainerActive: { description: 'Shadow for containers and cards in active state.', public: true },
+  shadowDropup: {
+    description:
+      'Shadow for dropdown elements that pop up above the trigger, for example a dropdown at the bottom of the screen.',
+  },
+  shadowPanel: { description: 'Shadow for global elements like app layout panels and top navigation.' },
+  shadowPanelToggle: { description: 'Shadow for circular toggles in visual refresh.' },
+  shadowSplitBottom: {
+    description:
+      'Adjustment to the panel shadow so it displays the same for panels positioned at the bottom of the screen.',
+  },
+  shadowSplitSide: {
+    description: 'Adjustment to the panel shadow so it does not bleed onto adjacent panels to the right of it.',
+  },
+  shadowSticky: { description: 'Shadow for sticky elements or inner elements that already have shadow around.' },
+};
+
+export default metadata;
diff --git a/style-dictionary/one-theme/metadata/sizes.ts b/style-dictionary/one-theme/metadata/sizes.ts
new file mode 100644
index 0000000000..5231424e5b
--- /dev/null
+++ b/style-dictionary/one-theme/metadata/sizes.ts
@@ -0,0 +1,14 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { StyleDictionary } from '../../utils/interfaces.js';
+
+const metadata: StyleDictionary.MetadataIndex = {
+  sizeVerticalInput: {
+    description:
+      'The height of form input components. For example: input, select, multiselect, autosuggest, and datepicker.',
+    public: true,
+    themeable: true,
+  },
+};
+
+export default metadata;
diff --git a/style-dictionary/one-theme/metadata/spacing.ts b/style-dictionary/one-theme/metadata/spacing.ts
new file mode 100644
index 0000000000..40c0879139
--- /dev/null
+++ b/style-dictionary/one-theme/metadata/spacing.ts
@@ -0,0 +1,189 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { StyleDictionary } from '../../utils/interfaces.js';
+
+const metadata: StyleDictionary.MetadataIndex = {
+  spaceAlertVertical: {
+    description: 'The vertical padding inside alert components.',
+    public: true,
+    themeable: true,
+  },
+  spaceScaled2xL: { sassName: '$space-scaled-2x-l' },
+  spaceScaled2xM: { sassName: '$space-scaled-2x-m' },
+  spaceScaled2xNone: { sassName: '$space-scaled-2x-none' },
+  spaceScaled2xS: { sassName: '$space-scaled-2x-s' },
+  spaceScaled2xXl: { sassName: '$space-scaled-2x-xl' },
+  spaceScaled2xXs: { sassName: '$space-scaled-2x-xs' },
+  spaceScaled2xXxl: { sassName: '$space-scaled-2x-xxl' },
+  spaceScaled2xXxs: { sassName: '$space-scaled-2x-xxs' },
+  spaceScaled2xXxxl: { sassName: '$space-scaled-2x-xxxl' },
+  spaceScaled2xXxxs: { sassName: '$space-scaled-2x-xxxs' },
+
+  spaceStaticL: {
+    description: 'The static L spacing unit.',
+    public: true,
+    themeable: false,
+  },
+  spaceStaticM: {
+    description: 'The static M spacing unit.',
+    public: true,
+    themeable: false,
+  },
+  spaceStaticS: {
+    description: 'The static S spacing unit.',
+    public: true,
+    themeable: false,
+  },
+  spaceStaticXl: {
+    description: 'The static XL spacing unit.',
+    public: true,
+    themeable: false,
+  },
+  spaceStaticXs: {
+    description: 'The static XS spacing unit.',
+    public: true,
+    themeable: false,
+  },
+  spaceStaticXxl: {
+    description: 'The static XXL spacing unit.',
+    public: true,
+    themeable: false,
+  },
+  spaceStaticXxs: {
+    description: 'The static XXS spacing unit.',
+    public: true,
+    themeable: false,
+  },
+  spaceStaticXxxl: {
+    description: 'The static XXXL spacing unit.',
+    public: true,
+    themeable: false,
+  },
+  spaceStaticXxxs: {
+    description: 'The static XXXS spacing unit.',
+    public: true,
+    themeable: false,
+  },
+  spaceScaledL: {
+    description: 'The L spacing unit which scales between modes. For example: vertical space between form fields.',
+    public: true,
+    themeable: false,
+  },
+  spaceScaledM: {
+    description: 'The M spacing unit which scales between modes. For example: horizontal padding inside a popover.',
+    public: true,
+    themeable: false,
+  },
+  spaceScaledS: {
+    description: 'The S spacing unit which scales between modes. For example: vertical padding inside a popover.',
+    public: true,
+    themeable: false,
+  },
+  spaceScaledXl: {
+    description:
+      'The XL spacing unit which scales between modes. For example: horizontal space between wizard navigation and content.',
+    public: true,
+    themeable: false,
+  },
+  spaceScaledXs: {
+    description:
+      'The XS spacing unit which scales between modes. For example: horizontal space between buttons in an action stripe.',
+    public: true,
+    themeable: false,
+  },
+  spaceScaledXxl: {
+    description:
+      'The XXL spacing unit which scales between modes. For example: left indentation of grouped options in a select.',
+    public: true,
+    themeable: false,
+  },
+  spaceScaledXxs: {
+    description:
+      'The XXS spacing unit which scales between modes. For example: vertical space between form field label and control.',
+    public: true,
+    themeable: false,
+  },
+  spaceScaledXxxl: {
+    description:
+      'The XXXL spacing unit which scales between modes. For example: horizontal padding for app layout and split panel content on large screens.',
+    public: true,
+    themeable: false,
+  },
+  spaceScaledXxxs: {
+    description: 'The XXXS spacing unit which scales between modes.',
+    public: true,
+    themeable: false,
+  },
+  spaceCardHorizontalDefault: {
+    description: 'The default horizontal padding inside a card.',
+    public: true,
+    themeable: true,
+  },
+  spaceCardHorizontalEmbedded: {
+    description: 'The horizontal padding inside embedded a card.',
+    public: true,
+    themeable: true,
+  },
+  spaceCardVerticalDefault: {
+    description: 'The default vertical padding inside a card.',
+    public: true,
+    themeable: true,
+  },
+  spaceCardVerticalEmbedded: {
+    description: 'The vertical padding inside embedded a card.',
+    public: true,
+    themeable: true,
+  },
+  spaceContainerHorizontal: {
+    description: 'The horizontal padding inside a container.',
+    public: true,
+    themeable: false,
+  },
+  spaceFieldHorizontal: {
+    description: 'The horizontal padding inside field components.',
+    public: true,
+    themeable: false,
+  },
+  spaceTabsVertical: {
+    description: 'The vertical padding inside tabs.',
+    public: true,
+    themeable: true,
+  },
+  spaceTreeViewIndentation: {
+    description: 'The indentation of tree view items.',
+    public: true,
+    themeable: false,
+  },
+  spaceButtonHorizontal: {
+    description: 'The horizontal padding inside buttons.',
+    public: true,
+    themeable: true,
+  },
+  spaceButtonVertical: {
+    description: 'The vertical padding inside buttons.',
+    public: true,
+    themeable: true,
+  },
+  spaceTokenVertical: {
+    description: 'The vertical padding inside tokens.',
+    public: true,
+    themeable: true,
+  },
+  spaceFieldVertical: {
+    description: 'The vertical padding inside control components.',
+    public: true,
+    themeable: true,
+  },
+  spaceOptionPaddingVertical: {
+    description: 'The vertical padding inside dropdown option items.',
+    public: true,
+    themeable: false,
+  },
+  spaceOptionPaddingHorizontal: {
+    description: 'The horizontal padding inside dropdown option items.',
+    public: true,
+    themeable: false,
+  },
+};
+
+export default metadata;
diff --git a/style-dictionary/one-theme/metadata/typography.ts b/style-dictionary/one-theme/metadata/typography.ts
new file mode 100644
index 0000000000..fe32a92f1d
--- /dev/null
+++ b/style-dictionary/one-theme/metadata/typography.ts
@@ -0,0 +1,237 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { StyleDictionary } from '../../utils/interfaces.js';
+
+const metadata: StyleDictionary.MetadataIndex = {
+  fontButtonLetterSpacing: {
+    description: 'The default letter spacing for button text.',
+  },
+  fontChartDetailSize: {
+    description: 'Used for secondary chart text, e.g. mixed chart axes and pie chart label descriptions.',
+  },
+  fontDisplayLabelWeight: {
+    description: 'The default font weight for labels. For example, keys in key-value pairs, or form field labels.',
+  },
+  fontFamilyBase: {
+    description: 'The default font family that will be applied globally to the product interface.',
+    themeable: true,
+    public: true,
+  },
+  fontFamilyDisplay: {
+    description: 'The font family for display text. Defaults to the base font family.',
+    themeable: true,
+    public: true,
+  },
+  fontFamilyHeading: {
+    description: 'The font family for headings and component headers. Defaults to the base font family.',
+    themeable: true,
+    public: true,
+  },
+  fontFamilyMonospace: {
+    description: 'The monospace font family that will be applied globally to the product interface.',
+    themeable: true,
+    public: true,
+  },
+  fontHeaderH2DescriptionLineHeight: { sassName: '$font-header-h2-description-line-height' },
+  fontHeaderH2DescriptionSize: { sassName: '$font-header-h2-description-size' },
+  fontSizeBodyM: {
+    description: 'The default font size for regular body text. For example, <p> tags in text content, or button text.',
+    themeable: true,
+    public: true,
+  },
+  fontSizeBodyS: {
+    description: 'The default font size for small body text. For example, form field descriptions, or badge text.',
+    themeable: true,
+    public: true,
+  },
+  fontSizeDisplayL: {
+    description: 'The default font size for large display text.',
+    themeable: true,
+    public: true,
+  },
+  fontSizeHeadingXl: {
+    description: 'The default font size for h1s.',
+    themeable: true,
+    public: true,
+  },
+  fontSizeHeadingL: {
+    description: 'The default font size for h2s.',
+    themeable: true,
+    public: true,
+  },
+  fontSizeHeadingM: {
+    description: 'The default font size for h3s.',
+    themeable: true,
+    public: true,
+  },
+  fontSizeHeadingS: {
+    description: 'The default font size for h4s.',
+    themeable: true,
+    public: true,
+  },
+  fontSizeHeadingXs: {
+    description: 'The default font size for h5s.',
+    themeable: true,
+    public: true,
+  },
+  fontWeightNormal: {
+    description: 'The default normal font weight.',
+    themeable: true,
+    public: true,
+  },
+  fontWeightBold: {
+    description: 'The default bold font weight for body text. For example, <strong> and <b> tags in text content.',
+    themeable: true,
+    public: true,
+  },
+  fontWeightLighter: {
+    description: 'The default lighter font weight.',
+    themeable: true,
+    public: true,
+  },
+  fontWeightHeavy: {
+    description: 'The default heavy font weight.',
+    themeable: true,
+    public: true,
+  },
+  fontWeightButton: {
+    description: 'The default font weight for button text.',
+    themeable: true,
+    public: true,
+  },
+  fontWeightAlertHeader: {
+    description: 'The default font weight for alert header text.',
+    themeable: true,
+    public: true,
+  },
+  fontWeightFlashbarHeader: {
+    description: 'The default font weight for flashbar header text.',
+    themeable: true,
+    public: true,
+  },
+  fontWeightHeadingXl: {
+    description: 'The default font weight for h1s.',
+    themeable: true,
+    public: true,
+  },
+  fontWeightHeadingL: {
+    description: 'The default font weight for h2s.',
+    themeable: true,
+    public: true,
+  },
+  fontWeightHeadingM: {
+    description: 'The default font weight for h3s.',
+    themeable: true,
+    public: true,
+  },
+  fontWeightHeadingS: {
+    description: 'The default font weight for h4s.',
+    themeable: true,
+    public: true,
+  },
+  fontWeightHeadingXs: {
+    description: 'The default font weight for h5s.',
+    themeable: true,
+    public: true,
+  },
+  fontWeightDisplayL: {
+    description: 'The default font weight for large display text.',
+    themeable: true,
+    public: true,
+  },
+  fontSizeTabs: {
+    description: 'The default font size for tabs.',
+    themeable: true,
+    public: true,
+  },
+  fontWeightTabs: {
+    description: 'The default font weight for tabs.',
+    themeable: true,
+    public: true,
+  },
+  fontWeightTabsDisabled: {
+    description: 'The default font weight for disabled tabs.',
+    themeable: true,
+    public: true,
+  },
+  letterSpacingBodyS: {
+    description: 'The default letter spacing for small body text.',
+  },
+  letterSpacingDisplayL: {
+    description: 'The default letter spacing for large display text.',
+    themeable: true,
+    public: true,
+  },
+  letterSpacingHeadingXl: {
+    description: 'The default letter spacing for h1s.',
+    themeable: true,
+    public: true,
+  },
+  letterSpacingHeadingL: {
+    description: 'The default letter spacing for h2s.',
+    themeable: true,
+    public: true,
+  },
+  letterSpacingHeadingM: {
+    description: 'The default letter spacing for h3s.',
+    themeable: true,
+    public: true,
+  },
+  letterSpacingHeadingS: {
+    description: 'The default letter spacing for h4s.',
+    themeable: true,
+    public: true,
+  },
+  letterSpacingHeadingXs: {
+    description: 'The default letter spacing for h5s.',
+    themeable: true,
+    public: true,
+  },
+  lineHeightBodyM: {
+    description: 'The default line height for regular body text.',
+    themeable: true,
+    public: true,
+  },
+  lineHeightBodyS: {
+    description: 'The default line height for small body text.',
+    themeable: true,
+    public: true,
+  },
+  lineHeightDisplayL: {
+    description: 'The default line height for large display text.',
+    themeable: true,
+    public: true,
+  },
+  lineHeightHeadingXl: {
+    description: 'The default line height for h1s.',
+    themeable: true,
+    public: true,
+  },
+  lineHeightHeadingL: {
+    description: 'The default line height for h2s.',
+    themeable: true,
+    public: true,
+  },
+  lineHeightHeadingM: {
+    description: 'The default line height for h3s.',
+    themeable: true,
+    public: true,
+  },
+  lineHeightHeadingS: {
+    description: 'The default line height for h4s.',
+    themeable: true,
+    public: true,
+  },
+  lineHeightHeadingXs: {
+    description: 'The default line height for h5s.',
+    themeable: true,
+    public: true,
+  },
+  lineHeightTabs: {
+    description: 'The default line height for tabs.',
+    themeable: true,
+    public: true,
+  },
+};
+
+export default metadata;
diff --git a/style-dictionary/one-theme/motion.ts b/style-dictionary/one-theme/motion.ts
new file mode 100644
index 0000000000..b80aa856b8
--- /dev/null
+++ b/style-dictionary/one-theme/motion.ts
@@ -0,0 +1,58 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { tokenStylesSuffix } from '../utils/environment.js';
+import { expandMotionDictionary } from '../utils/index.js';
+import { StyleDictionary } from '../utils/interfaces.js';
+
+const tokens: StyleDictionary.MotionDictionary = {
+  motionDurationExtraFast: { default: '45ms', disabled: '0ms' },
+  motionDurationExtraSlow: { default: '270ms', disabled: '0ms' },
+  motionDurationFast: { default: '90ms', disabled: '0ms' },
+  motionDurationModerate: { default: '135ms', disabled: '0ms' },
+  motionDurationRefreshOnlyAmbient: { default: '2000ms', disabled: '0ms' },
+  motionDurationRefreshOnlyFast: { default: '115ms', disabled: '0ms' },
+  motionDurationRefreshOnlyMedium: { default: '165ms', disabled: '0ms' },
+  motionDurationRefreshOnlySlow: { default: '250ms', disabled: '0ms' },
+  motionDurationAvatarGenAiGradient: { default: '3600ms', disabled: '0ms' },
+  motionDurationAvatarLoadingDots: { default: '1200ms', disabled: '0ms' },
+  motionDurationRotate180: '{motionDurationModerate}',
+  motionDurationRotate90: '{motionDurationModerate}',
+  motionDurationShowPaced: '{motionDurationSlow}',
+  motionDurationShowQuick: '{motionDurationModerate}',
+  motionDurationSlow: { default: '180ms', disabled: '0ms' },
+  motionDurationTransitionQuick: '{motionDurationFast}',
+  motionDurationTransitionShowPaced: '{motionDurationSlow}',
+  motionDurationTransitionShowQuick: '{motionDurationFast}',
+
+  motionEasingEaseOutQuart: 'cubic-bezier(0.165, 0.84, 0.44, 1)',
+  motionEasingRefreshOnlyA: 'cubic-bezier(0, 0, 0, 1)',
+  motionEasingRefreshOnlyB: 'cubic-bezier(1, 0, 0.83, 1)',
+  motionEasingRefreshOnlyC: 'cubic-bezier(0.84, 0, 0.16, 1)',
+  motionEasingRefreshOnlyD: 'cubic-bezier(0.33, 0, 0.67, 1)',
+  motionEasingAvatarGenAiGradient: 'cubic-bezier(0.7, 0, 0.3, 1)',
+  motionEasingRotate180: '{motionEasingEaseOutQuart}',
+  motionEasingRotate90: '{motionEasingEaseOutQuart}',
+  motionEasingShowPaced: 'ease-out',
+  motionEasingShowQuick: 'ease-out',
+  motionEasingTransitionQuick: 'linear',
+  motionEasingTransitionShowPaced: 'ease-out',
+  motionEasingTransitionShowQuick: 'linear',
+
+  motionEasingResponsive: '{motionEasingRefreshOnlyA}',
+  motionEasingSticky: '{motionEasingRefreshOnlyB}',
+  motionEasingExpressive: '{motionEasingRefreshOnlyC}',
+
+  motionDurationResponsive: '{motionDurationRefreshOnlyFast}',
+  motionDurationExpressive: '{motionDurationRefreshOnlyMedium}',
+  motionDurationComplex: '{motionDurationRefreshOnlySlow}',
+
+  motionKeyframesFadeIn: 'awsui-fade-in-' + tokenStylesSuffix,
+  motionKeyframesFadeOut: 'awsui-fade-out-' + tokenStylesSuffix,
+  motionKeyframesStatusIconError: 'awsui-status-icon-error-' + tokenStylesSuffix,
+  motionKeyframesScalePopup: 'awsui-scale-popup-' + tokenStylesSuffix,
+};
+
+const expandedTokens: StyleDictionary.ExpandedMotionScopeDictionary = expandMotionDictionary(tokens);
+
+export { expandedTokens as tokens };
+export const mode: StyleDictionary.ModeIdentifier = 'motion';
diff --git a/style-dictionary/one-theme/shadows.ts b/style-dictionary/one-theme/shadows.ts
new file mode 100644
index 0000000000..7ae686037d
--- /dev/null
+++ b/style-dictionary/one-theme/shadows.ts
@@ -0,0 +1,57 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { expandColorDictionary } from '../utils/index.js';
+import { StyleDictionary } from '../utils/interfaces.js';
+
+const tokens: StyleDictionary.ShadowsDictionary = {
+  shadowCard: 'none',
+  shadowItemCard: '{shadowCard}',
+  shadowContainer: {
+    light: '0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12)', // 1px grey-200 faux border
+    dark: '0px 1px 8px 2px rgba(0, 7, 22, 0.6)',
+  },
+  shadowContainerActive: {
+    light: '0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a',
+    dark: '0px 1px 1px 1px #192534, 0px 6px 36px #00040c',
+  },
+  shadowDropdown: { light: '0px 4px 20px 1px rgba(0, 7, 22, 0.10)', dark: '0px 4px 20px 1px rgba(0, 4, 12, 1)' },
+  shadowDropup: '{shadowDropdown}',
+  shadowFlashCollapsed: '0px 4px 4px rgba(0, 0, 0, 0.25)',
+  shadowFlashSticky: {
+    light: '0px 4px 8px rgba(0, 7, 22, 0.10)',
+    dark: '0px 4px 8px rgba(0, 7, 22, 0.5)',
+  },
+  shadowModal: '{shadowDropdown}',
+  shadowPanel: {
+    light: '0px 0px 0px 1px #b6bec9',
+    dark: '0px 0px 0px 1px #414d5c',
+  },
+  shadowPanelToggle: { light: '0px 6px 12px 1px rgba(0, 7, 22, 0.12)', dark: '0px 6px 12px 1px rgba(0, 7, 22, 1)' },
+  shadowPopover: '{shadowDropdown}',
+  shadowSplitBottom: {
+    light: '0px -36px 36px -36px rgba(0, 7, 22, 0.10)',
+    dark: '0px -36px 36px -36px rgba(0, 7, 22, 1)',
+  },
+  shadowSplitSide: {
+    light: '-1px 0px 1px 0px #e9ebed, -36px 6px 36px -36px rgba(0, 7, 22, 0.10)',
+    dark: '-1px 0px 1px 0px #192534, -36px 6px 36px -36px rgba(0, 7, 22, 1)',
+  },
+  shadowSticky: { light: '0px 4px 8px 1px rgba(0, 7, 22, 0.10)', dark: '0px 4px 8px 1px rgba(0, 7, 22, 0.5)' },
+  shadowStickyEmbedded: {
+    light: '0px 2px 0px 0px #e9ebed, 0px 16px 16px -12px rgba(0, 7, 22, 0.10)', // 2px grey-200 faux bottom border
+    dark: '0px 2px 0px 0px #414d5c, 0px 16px 16px -12px rgba(0, 7, 22, 1)', // 2px grey-600 faux bottom border
+  },
+  shadowStickyColumnFirst: {
+    light: '4px 0px 8px 1px rgba(0, 7, 22, 0.1)',
+    dark: '0px 4px 8px 1px rgba(0, 7, 22, 0.5)',
+  },
+  shadowStickyColumnLast: {
+    light: '-4px 0 8px 1px rgba(0, 28, 36, 0.1)',
+    dark: '0px 4px 8px 1px rgba(0, 7, 22, 0.5)',
+  },
+};
+
+const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens);
+
+export { expandedTokens as tokens };
+export const mode: StyleDictionary.ModeIdentifier = 'color';
diff --git a/style-dictionary/one-theme/sizes.ts b/style-dictionary/one-theme/sizes.ts
new file mode 100644
index 0000000000..d80230db33
--- /dev/null
+++ b/style-dictionary/one-theme/sizes.ts
@@ -0,0 +1,21 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { expandDensityDictionary } from '../utils/index.js';
+import { StyleDictionary } from '../utils/interfaces.js';
+
+const tokens: StyleDictionary.SizesDictionary = {
+  sizeCalendarGridWidth: '238px',
+  sizeControl: '16px',
+  sizeIconBig: '32px',
+  sizeIconLarge: '48px',
+  sizeIconMedium: '20px',
+  sizeIconNormal: '16px',
+  sizeTableSelectionHorizontal: '40px',
+  sizeVerticalInput: { comfortable: '32px', compact: '28px' },
+  sizeVerticalPanelIconOffset: { comfortable: '15px', compact: '13px' },
+};
+
+const expandedTokens: StyleDictionary.ExpandedDensityScopeDictionary = expandDensityDictionary(tokens);
+
+export { expandedTokens as tokens };
+export const mode: StyleDictionary.ModeIdentifier = 'density';
diff --git a/style-dictionary/one-theme/spacing.ts b/style-dictionary/one-theme/spacing.ts
new file mode 100644
index 0000000000..ba27185bbb
--- /dev/null
+++ b/style-dictionary/one-theme/spacing.ts
@@ -0,0 +1,135 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { expandDensityDictionary } from '../utils/index.js';
+import { StyleDictionary } from '../utils/interfaces.js';
+
+const tokens: StyleDictionary.SpacingDictionary = {
+  spaceAlertActionLeft: '{spaceS}',
+  spaceAlertHorizontal: '{spaceFlashbarHorizontal}',
+  spaceAlertMessageRight: '{spaceXxs}',
+  spaceAlertVertical: '{spaceFlashbarVertical}',
+  spaceButtonFocusOutlineGutter: '4px',
+  spaceButtonHorizontal: '{spaceScaledL}',
+  spaceButtonVertical: '{spaceScaledXxs}',
+  spaceTokenVertical: '{spaceScaledXxs}',
+  spaceFieldVertical: { comfortable: '5px', compact: '3px' },
+  spaceButtonIconFocusOutlineGutterVertical: '0px',
+  spaceButtonIconOnlyHorizontal: { comfortable: '6px', compact: '{spaceXxs}' },
+  spaceButtonInlineIconFocusOutlineGutter: '0px',
+  spaceButtonModalDismissVertical: '{spaceScaledXxxs}',
+  spaceCalendarGridFocusOutlineGutter: '-5px',
+  spaceCalendarGridSelectedFocusOutlineGutter: '{spaceCalendarGridFocusOutlineGutter}',
+  spaceCalendarGridGutter: '6px',
+  spaceCardHorizontalDefault: '{spaceContainerHorizontal}',
+  spaceCardHorizontalEmbedded: { comfortable: '{spaceS}', compact: '10px' },
+  spaceCardVerticalDefault: '{spaceScaledM}',
+  spaceCardVerticalEmbedded: { comfortable: '10px', compact: '{spaceXs}' },
+  spaceItemCardHorizontalDefault: '{spaceCardHorizontalDefault}',
+  spaceItemCardHorizontalEmbedded: '{spaceCardHorizontalEmbedded}',
+  spaceItemCardVerticalDefault: '{spaceCardVerticalDefault}',
+  spaceItemCardVerticalEmbedded: '{spaceCardVerticalEmbedded}',
+  spaceCodeEditorStatusFocusOutlineGutter: '-7px',
+  spaceContainerContentTop: '{spaceXxs}',
+  spaceContainerHeaderTop: '{spaceS}',
+  spaceContainerHeaderBottom: '{spaceScaledXs}',
+  spaceContainerHorizontal: '{spaceL}',
+  spaceContentHeaderPaddingBottom: '{spaceScaledM}',
+  spaceDarkHeaderOverlapDistance: { comfortable: '36px', compact: '32px' },
+  spaceExpandableSectionIconOffsetTop: '{spaceScaled2xXxs}',
+  spaceFieldHorizontal: '{spaceS}',
+  spaceFieldIconOffset: '36px',
+  spaceFilteringTokenDismissButtonFocusOutlineGutter: '-5px',
+  spaceFilteringTokenOperationSelectFocusOutlineGutter: '-5px',
+  spaceFlashbarActionLeft: '{spaceS}',
+  spaceFlashbarDismissRight: '0px',
+  spaceFlashbarHorizontal: '{spaceM}',
+  spaceFlashbarVertical: '{spaceScaledXs}',
+  spaceGridGutter: { comfortable: '{spaceL}', compact: '{spaceM}' },
+  spaceKeyValueGap: '0px',
+  spaceLayoutContentBottom: '{spaceScaled2xXxxl}',
+  spaceLayoutContentHorizontal: '{spaceScaled2xXl}',
+  spaceLayoutToggleDiameter: '36px',
+  spaceLayoutTogglePadding: '{spaceStaticS}',
+  spaceModalContentBottom: '{spaceScaled2xM}',
+  spaceModalHorizontal: '{spaceContainerHorizontal}',
+  spacePanelContentBottom: '{spaceScaledXxxl}',
+  spacePanelContentTop: '{spaceScaledL}',
+  spacePanelDividerMarginHorizontal: '{spaceXs}',
+  spacePanelHeaderVertical: '{spaceScaledL}',
+  spacePanelNavLeft: '28px',
+  spacePanelSideLeft: '28px',
+  spacePanelSideRight: '{spaceScaledXl}',
+  spacePanelSplitTop: '{spaceScaledL}',
+  spacePanelSplitBottom: '{spaceScaledL}',
+  spaceSegmentedControlFocusOutlineGutter: '6px',
+  spaceTabsContentTop: '{spaceScaledS}',
+  spaceTabsFocusOutlineGutter: '-8px',
+  spaceTabsVertical: '{spaceScaledXxs}',
+  spaceTableContentBottom: '{spaceXxs}',
+  spaceTableEmbeddedHeaderTop: '0px',
+  spaceTableFooterHorizontal: '{spaceTableHeaderHorizontal}',
+  spaceTableHeaderFocusOutlineGutter: { comfortable: '0px', compact: '-1px' },
+  spaceTableHeaderHorizontal: '0px',
+  spaceTableHeaderToolsBottom: '0px',
+  spaceTableHeaderToolsFullPageBottom: '4px',
+  spaceTableHorizontal: '{spaceContainerHorizontal}',
+  spaceTreeViewIndentation: '{spaceXl}',
+  spaceTileGutter: { comfortable: '{spaceXl}', compact: '{spaceM}' },
+  spaceActionCardHorizontalDefault: '{spaceCardHorizontalDefault}',
+  spaceActionCardHorizontalEmbedded: '{spaceCardHorizontalEmbedded}',
+  spaceActionCardVerticalDefault: '{spaceCardVerticalDefault}',
+  spaceActionCardVerticalEmbedded: '{spaceCardVerticalEmbedded}',
+  spaceActionCardDescriptionPaddingTop: '{spaceScaledXxs}',
+  spaceActionCardContentPaddingTop: '{spaceScaledXs}',
+
+  spaceOptionPaddingVertical: '{spaceXxs}',
+  spaceOptionPaddingHorizontal: '{spaceL}',
+
+  spaceScaled2xNone: '{spaceNone}',
+  spaceScaled2xXxxs: { comfortable: '{spaceXxxs}', compact: '{spaceNone}' },
+  spaceScaled2xXxs: { comfortable: '{spaceXxs}', compact: '{spaceNone}' },
+  spaceScaled2xXs: { comfortable: '{spaceXs}', compact: '{spaceNone}' },
+  spaceScaled2xS: { comfortable: '{spaceS}', compact: '{spaceXxs}' },
+  spaceScaled2xM: { comfortable: '{spaceM}', compact: '{spaceXs}' },
+  spaceScaled2xL: { comfortable: '{spaceL}', compact: '{spaceS}' },
+  spaceScaled2xXl: { comfortable: '{spaceXl}', compact: '{spaceM}' },
+  spaceScaled2xXxl: { comfortable: '{spaceXxl}', compact: '{spaceL}' },
+  spaceScaled2xXxxl: { comfortable: '{spaceXxxl}', compact: '{spaceXl}' },
+
+  spaceScaledNone: '{spaceNone}',
+  spaceScaledXxxs: { comfortable: '{spaceXxxs}', compact: '{spaceNone}' },
+  spaceScaledXxs: { comfortable: '{spaceXxs}', compact: '{spaceXxxs}' },
+  spaceScaledXs: { comfortable: '{spaceXs}', compact: '{spaceXxs}' },
+  spaceScaledS: { comfortable: '{spaceS}', compact: '{spaceXs}' },
+  spaceScaledM: { comfortable: '{spaceM}', compact: '{spaceS}' },
+  spaceScaledL: { comfortable: '{spaceL}', compact: '{spaceM}' },
+  spaceScaledXl: { comfortable: '{spaceXl}', compact: '{spaceL}' },
+  spaceScaledXxl: { comfortable: '{spaceXxl}', compact: '{spaceXl}' },
+  spaceScaledXxxl: { comfortable: '{spaceXxxl}', compact: '{spaceXxl}' },
+
+  spaceStaticXxxs: '{spaceXxxs}',
+  spaceStaticXxs: '{spaceXxs}',
+  spaceStaticXs: '{spaceXs}',
+  spaceStaticS: '{spaceS}',
+  spaceStaticM: '{spaceM}',
+  spaceStaticL: '{spaceL}',
+  spaceStaticXl: '{spaceXl}',
+  spaceStaticXxl: '{spaceXxl}',
+  spaceStaticXxxl: '{spaceXxxl}',
+
+  spaceNone: '0px',
+  spaceXxxs: '2px',
+  spaceXxs: '4px',
+  spaceXs: '8px',
+  spaceS: '12px',
+  spaceM: '16px',
+  spaceL: '20px',
+  spaceXl: '24px',
+  spaceXxl: '32px',
+  spaceXxxl: '40px',
+};
+
+const expandedTokens: StyleDictionary.ExpandedDensityScopeDictionary = expandDensityDictionary(tokens);
+
+export { expandedTokens as tokens };
+export const mode: StyleDictionary.ModeIdentifier = 'density';
diff --git a/style-dictionary/one-theme/typography.ts b/style-dictionary/one-theme/typography.ts
new file mode 100644
index 0000000000..0fd488808f
--- /dev/null
+++ b/style-dictionary/one-theme/typography.ts
@@ -0,0 +1,64 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { StyleDictionary } from '../utils/interfaces.js';
+
+export const tokens: StyleDictionary.TypographyDictionary = {
+  fontBoxValueLargeWeight: '700',
+  fontButtonLetterSpacing: '0.005em',
+  fontChartDetailSize: '{fontSizeBodyS}',
+  fontDisplayLabelWeight: '700',
+  fontExpandableHeadingSize: '{fontSizeHeadingS}',
+  fontFamilyBase: "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
+  fontFamilyDisplay: '{fontFamilyBase}',
+  fontFamilyHeading: '{fontFamilyBase}',
+  fontFamilyMonospace: "Monaco, Menlo, Consolas, 'Courier Prime', Courier, 'Courier New', monospace",
+  fontHeaderH2DescriptionLineHeight: '{lineHeightBodyM}',
+  fontHeaderH2DescriptionSize: '{fontSizeBodyM}',
+  fontLinkButtonLetterSpacing: '{fontButtonLetterSpacing}',
+  fontLinkButtonWeight: '{fontWeightButton}',
+  fontPanelHeaderLineHeight: '{lineHeightHeadingM}',
+  fontPanelHeaderSize: '{fontSizeHeadingM}',
+  fontSizeBodyM: '14px',
+  fontSizeBodyS: '12px',
+  fontSizeDisplayL: '42px',
+  fontSizeHeadingXl: '24px',
+  fontSizeHeadingL: '20px',
+  fontSizeHeadingM: '18px',
+  fontSizeHeadingS: '16px',
+  fontSizeHeadingXs: '14px',
+  fontSmoothingMozOsx: 'grayscale',
+  fontSmoothingWebkit: 'antialiased',
+  fontSizeTabs: '{fontSizeHeadingS}',
+  fontWeightTabs: '700',
+  fontWeightTabsDisabled: '{fontWayfindingLinkActiveWeight}',
+  lineHeightTabs: '{lineHeightHeadingS}',
+  fontWayfindingLinkActiveWeight: '700',
+  fontWeightButton: '700',
+  fontWeightAlertHeader: '700',
+  fontWeightFlashbarHeader: '700',
+  fontWeightHeadingXl: '700',
+  fontWeightHeadingL: '700',
+  fontWeightHeadingM: '700',
+  fontWeightHeadingS: '700',
+  fontWeightHeadingXs: '700',
+  fontWeightDisplayL: '700',
+  fontWeightHeavy: '700',
+  fontWeightNormal: '400',
+  fontWeightBold: '700',
+  fontWeightLighter: '300',
+  letterSpacingBodyS: '0.005em',
+  letterSpacingDisplayL: '-0.03em',
+  letterSpacingHeadingXl: '-0.02em',
+  letterSpacingHeadingL: '-0.015em',
+  letterSpacingHeadingM: '-0.010em',
+  letterSpacingHeadingS: '-0.005em',
+  letterSpacingHeadingXs: 'normal',
+  lineHeightBodyM: '20px',
+  lineHeightBodyS: '16px',
+  lineHeightDisplayL: '48px',
+  lineHeightHeadingXl: '30px',
+  lineHeightHeadingL: '24px',
+  lineHeightHeadingM: '22px',
+  lineHeightHeadingS: '20px',
+  lineHeightHeadingXs: '18px',
+};