diff --git a/polaris-react/.storybook/preview.js b/polaris-react/.storybook/preview.js
index 4a5db4d336d..de439490344 100644
--- a/polaris-react/.storybook/preview.js
+++ b/polaris-react/.storybook/preview.js
@@ -5,7 +5,11 @@ import enTranslations from '../locales/en.json';
 import {GridOverlay} from './GridOverlay';
 import {RenderPerformanceProfiler} from './RenderPerformanceProfiler';
 import {gridOptions, featureFlagOptions} from './manager';
-import {breakpoints} from '@shopify/polaris-tokens';
+import {
+  breakpoints,
+  themeNameDefault,
+  themeNames,
+} from '@shopify/polaris-tokens';
 
 function StrictModeDecorator(Story, context) {
   const {strictMode} = context.globals;
@@ -22,12 +26,14 @@ function AppProviderDecorator(Story, context) {
   const {
     polarisSummerEditions2023,
     polarisSummerEditions2023ShadowBevelOptOut,
+    theme,
   } = context.globals;
 
   if (context.args.omitAppProvider) return <Story {...context} />;
 
   return (
     <AppProvider
+      theme={theme}
       features={{
         polarisSummerEditions2023:
           process.env.STORYBOOK_SE23 === 'on'
@@ -129,6 +135,16 @@ export const globalTypes = {
       ],
     },
   },
+  theme: {
+    description: 'Global theme for components',
+    defaultValue: themeNameDefault,
+    toolbar: {
+      title: 'Theme',
+      icon: 'circlehollow',
+      items: themeNames,
+      dynamicTitle: true,
+    },
+  },
   ...featureFlagOptions,
   ...gridOptions,
 };
diff --git a/polaris-react/playground/Playground.tsx b/polaris-react/playground/Playground.tsx
index 355f6b984f2..6d054f8a4d1 100644
--- a/polaris-react/playground/Playground.tsx
+++ b/polaris-react/playground/Playground.tsx
@@ -1,8 +1,12 @@
 import React from 'react';
 
-import {Page} from '../src';
+import {Page, useThemeVars} from '../src';
 
 export function Playground() {
+  const themeVars = useThemeVars();
+
+  console.log('themeVars:', themeVars);
+
   return (
     <Page title="Playground">
       {/* Add the code you want to test in here */}
diff --git a/polaris-react/src/components/AppProvider/AppProvider.tsx b/polaris-react/src/components/AppProvider/AppProvider.tsx
index 16729d935aa..1979aa717a9 100644
--- a/polaris-react/src/components/AppProvider/AppProvider.tsx
+++ b/polaris-react/src/components/AppProvider/AppProvider.tsx
@@ -1,10 +1,17 @@
 import React, {Component} from 'react';
+import type {ThemeName} from '@shopify/polaris-tokens';
+import {
+  themeNames,
+  themeNameDefault,
+  createThemeClassName,
+} from '@shopify/polaris-tokens';
 
 import {EphemeralPresenceManager} from '../EphemeralPresenceManager';
 import {MediaQueryProvider} from '../MediaQueryProvider';
 import {FocusManager} from '../FocusManager';
 import {PortalsManager} from '../PortalsManager';
 import {I18n, I18nContext} from '../../utilities/i18n';
+import {ThemeNameContext} from '../../utilities/use-theme-name';
 import {
   ScrollLockManager,
   ScrollLockManagerContext,
@@ -31,6 +38,7 @@ interface State {
 }
 
 export interface AppProviderProps {
+  theme?: ThemeName;
   /** A locale object or array of locale objects that overrides default translations. If specifying an array then your primary language dictionary should come first, followed by your fallback language dictionaries */
   i18n: ConstructorParameters<typeof I18n>[0];
   /** A custom component to use for all links used by Polaris components */
@@ -92,6 +100,14 @@ export class AppProvider extends Component<AppProviderProps, State> {
 
   setRootAttributes = () => {
     const features = this.getFeatures();
+    const theme = this.getTheme();
+
+    themeNames.forEach((themeName) => {
+      document.documentElement.classList.toggle(
+        createThemeClassName(themeName),
+        theme === themeName,
+      );
+    });
 
     document.documentElement.classList.toggle(
       classNamePolarisSummerEditions2023,
@@ -104,6 +120,8 @@ export class AppProvider extends Component<AppProviderProps, State> {
     );
   };
 
+  getTheme = () => this.props.theme ?? themeNameDefault;
+
   getFeatures = () => {
     const {features} = this.props;
 
@@ -118,29 +136,32 @@ export class AppProvider extends Component<AppProviderProps, State> {
   render() {
     const {children} = this.props;
     const features = this.getFeatures();
+    const theme = this.getTheme();
 
     const {intl, link} = this.state;
 
     return (
-      <FeaturesContext.Provider value={features}>
-        <I18nContext.Provider value={intl}>
-          <ScrollLockManagerContext.Provider value={this.scrollLockManager}>
-            <StickyManagerContext.Provider value={this.stickyManager}>
-              <LinkContext.Provider value={link}>
-                <MediaQueryProvider>
-                  <PortalsManager>
-                    <FocusManager>
-                      <EphemeralPresenceManager>
-                        {children}
-                      </EphemeralPresenceManager>
-                    </FocusManager>
-                  </PortalsManager>
-                </MediaQueryProvider>
-              </LinkContext.Provider>
-            </StickyManagerContext.Provider>
-          </ScrollLockManagerContext.Provider>
-        </I18nContext.Provider>
-      </FeaturesContext.Provider>
+      <ThemeNameContext.Provider value={theme}>
+        <FeaturesContext.Provider value={features}>
+          <I18nContext.Provider value={intl}>
+            <ScrollLockManagerContext.Provider value={this.scrollLockManager}>
+              <StickyManagerContext.Provider value={this.stickyManager}>
+                <LinkContext.Provider value={link}>
+                  <MediaQueryProvider>
+                    <PortalsManager>
+                      <FocusManager>
+                        <EphemeralPresenceManager>
+                          {children}
+                        </EphemeralPresenceManager>
+                      </FocusManager>
+                    </PortalsManager>
+                  </MediaQueryProvider>
+                </LinkContext.Provider>
+              </StickyManagerContext.Provider>
+            </ScrollLockManagerContext.Provider>
+          </I18nContext.Provider>
+        </FeaturesContext.Provider>
+      </ThemeNameContext.Provider>
     );
   }
 }
diff --git a/polaris-react/src/index.ts b/polaris-react/src/index.ts
index 9c2e91164ca..06eaae0b0e6 100644
--- a/polaris-react/src/index.ts
+++ b/polaris-react/src/index.ts
@@ -1,5 +1,7 @@
 import './configure';
 
+export {themeVars} from '@shopify/polaris-tokens';
+
 // Key is an enum, not a type. It probably shouldn't live in a file called types
 export {Key} from './types';
 
@@ -422,6 +424,7 @@ export {
 
 export {ScrollLockManagerContext as _SECRET_INTERNAL_SCROLL_LOCK_MANAGER_CONTEXT} from './utilities/scroll-lock-manager';
 export {WithinContentContext as _SECRET_INTERNAL_WITHIN_CONTENT_CONTEXT} from './utilities/within-content-context';
+export {useThemeVarDecl} from './utilities/use-theme-var-decl';
 export {useEventListener} from './utilities/use-event-listener';
 export {useIndexResourceState} from './utilities/use-index-resource-state';
 export {
diff --git a/polaris-react/src/utilities/use-css-decl.ts b/polaris-react/src/utilities/use-css-decl.ts
new file mode 100644
index 00000000000..d107c28a32f
--- /dev/null
+++ b/polaris-react/src/utilities/use-css-decl.ts
@@ -0,0 +1,94 @@
+import {useReducer} from 'react';
+
+import {useIsomorphicLayoutEffect} from './use-isomorphic-layout-effect';
+
+export type CSSDeclAction =
+  | {
+      type: 'updated';
+      declValue: string;
+      element: Element;
+    }
+  | {
+      type: 'errored';
+      error: string;
+    };
+
+export interface CSSDeclState {
+  prop: string;
+  value: string;
+  element: Element | null;
+  status: 'init' | 'success' | 'error';
+  error: string | undefined;
+}
+
+function cssDeclReducer(
+  state: CSSDeclState,
+  action: CSSDeclAction,
+): CSSDeclState {
+  switch (action.type) {
+    case 'updated':
+      return {
+        ...state,
+        status: 'success',
+        value: action.declValue.trim(),
+        element: action.element,
+        error: undefined,
+      };
+    case 'errored':
+      return {
+        ...state,
+        status: 'error',
+        value: '',
+        element: null,
+        error: action.error,
+      };
+    default:
+      return state;
+  }
+}
+
+// Derived from https://github.com/JCofman/react-use-css-custom-property/blob/73e89aac1260ec9e120c8b259975cb95735c1171/src/index.tsx#L74
+export function useCSSDecl(
+  declProp: string,
+  selectors = ':root',
+): CSSDeclState {
+  const [state, dispatch] = useReducer(cssDeclReducer, {
+    status: 'init',
+    prop: declProp,
+    value: '',
+    element: null,
+    error: undefined,
+  });
+
+  useIsomorphicLayoutEffect(() => {
+    const element = document.querySelector(selectors);
+
+    if (!element) {
+      dispatch({
+        type: 'errored',
+        error: `No element matching ${selectors}`,
+      });
+      return;
+    }
+
+    const declValue = window
+      .getComputedStyle(element)
+      .getPropertyValue(declProp);
+
+    if (!declValue) {
+      dispatch({
+        type: 'errored',
+        error: `No CSS declaration value for ${declProp} on ${selectors}`,
+      });
+      return;
+    }
+
+    dispatch({
+      type: 'updated',
+      declValue,
+      element,
+    });
+  }, [declProp, selectors]);
+
+  return state;
+}
diff --git a/polaris-react/src/utilities/use-theme-name.ts b/polaris-react/src/utilities/use-theme-name.ts
new file mode 100644
index 00000000000..15fc2a3f15a
--- /dev/null
+++ b/polaris-react/src/utilities/use-theme-name.ts
@@ -0,0 +1,17 @@
+import type {ThemeName} from '@shopify/polaris-tokens';
+import {themeNameDefault} from '@shopify/polaris-tokens';
+import {createContext, useContext} from 'react';
+
+export const ThemeNameContext = createContext<ThemeName>(themeNameDefault);
+
+export function useThemeName() {
+  const themeName = useContext(ThemeNameContext);
+
+  if (!themeName) {
+    throw new Error(
+      'No themeName was provided. Your application must be wrapped in an <AppProvider> component. See https://polaris.shopify.com/components/app-provider for implementation instructions.',
+    );
+  }
+
+  return themeName;
+}
diff --git a/polaris-react/src/utilities/use-theme-var-decl.ts b/polaris-react/src/utilities/use-theme-var-decl.ts
new file mode 100644
index 00000000000..77805b6b65a
--- /dev/null
+++ b/polaris-react/src/utilities/use-theme-var-decl.ts
@@ -0,0 +1,14 @@
+import type {ThemeVarName} from '@shopify/polaris-tokens';
+import {createThemeSelector, themeNameDefault} from '@shopify/polaris-tokens';
+
+import {useCSSDecl} from './use-css-decl';
+import {useThemeName} from './use-theme-name';
+
+export function useThemeVarDecl(themeVarName: ThemeVarName) {
+  const themeName = useThemeName();
+
+  return useCSSDecl(
+    themeVarName,
+    themeName === themeNameDefault ? ':root' : createThemeSelector(themeName),
+  );
+}
diff --git a/polaris-tokens/package.json b/polaris-tokens/package.json
index 83e2e831061..01bc76b69c7 100644
--- a/polaris-tokens/package.json
+++ b/polaris-tokens/package.json
@@ -14,6 +14,11 @@
       "import": "./dist/esm/build/index.mjs",
       "require": "./dist/cjs/build/index.js"
     },
+    "./themes": {
+      "types": "./dist/types/build/themes.d.ts",
+      "import": "./dist/esm/build/themes.mjs",
+      "require": "./dist/cjs/build/themes.js"
+    },
     "./json/*": "./dist/json/*",
     "./css/*": "./dist/css/*",
     "./scss/*": "./dist/scss/*"
@@ -55,5 +60,11 @@
   ],
   "files": [
     "dist"
-  ]
+  ],
+  "dependencies": {
+    "deepmerge": "^4.3.1"
+  },
+  "devDependencies": {
+    "change-case": "^4.1.2"
+  }
 }
diff --git a/polaris-tokens/rollup.config.mjs b/polaris-tokens/rollup.config.mjs
index 7e81969c9db..021fec68362 100644
--- a/polaris-tokens/rollup.config.mjs
+++ b/polaris-tokens/rollup.config.mjs
@@ -11,7 +11,7 @@ const extensions = ['.js', '.jsx', '.ts', '.tsx'];
 
 /** @type {import('rollup').RollupOptions} */
 export default {
-  input: 'build/index.ts',
+  input: ['build/index.ts', 'build/themes.ts'],
   output: [
     {
       format: /** @type {const} */ ('cjs'),
diff --git a/polaris-tokens/scripts/index.ts b/polaris-tokens/scripts/index.ts
index d8897dcdc21..ee156d0f419 100644
--- a/polaris-tokens/scripts/index.ts
+++ b/polaris-tokens/scripts/index.ts
@@ -1,15 +1,15 @@
-import {metadata} from '../src';
+import {themes, themesPartials} from '../src/themes';
 
-import {toTokenValues} from './toTokenValues';
+import {toValues} from './toValues';
 import {toJSON} from './toJSON';
 import {toMediaConditions} from './toMediaConditions';
 import {toStyleSheet} from './toStyleSheet';
 
 (async () => {
   await Promise.all([
-    toTokenValues(metadata),
-    toJSON(metadata),
-    toMediaConditions(metadata.breakpoints),
-    toStyleSheet(metadata),
+    toValues(themes),
+    toJSON(themes),
+    toMediaConditions(themes.light.breakpoints),
+    toStyleSheet(themes, themesPartials),
   ]);
 })();
diff --git a/polaris-tokens/scripts/toJSON.ts b/polaris-tokens/scripts/toJSON.ts
index c21dbc4c7dd..2dd6108dcf8 100644
--- a/polaris-tokens/scripts/toJSON.ts
+++ b/polaris-tokens/scripts/toJSON.ts
@@ -1,22 +1,33 @@
 import fs from 'fs';
 import path from 'path';
 
-import type {Metadata, MetadataGroup} from '../src';
+import type {Themes} from '../src/themes';
 
 const outputDir = path.join(__dirname, '../dist/json');
+const outputThemesDir = path.join(outputDir, 'themes');
 
-export async function toJSON(metadata: Metadata) {
-  if (!fs.existsSync(outputDir)) {
-    await fs.promises.mkdir(outputDir, {recursive: true});
-  }
+export async function toJSON(themes: Themes) {
+  await fs.promises.mkdir(outputDir, {recursive: true}).catch((error) => {
+    if (error.code !== 'EEXIST') {
+      throw error;
+    }
+  });
+
+  await fs.promises.mkdir(outputThemesDir, {recursive: true}).catch((error) => {
+    if (error.code !== 'EEXIST') {
+      throw error;
+    }
+  });
 
-  for (const entry of Object.entries(metadata)) {
-    const [tokenGroupName, tokenGroup] = entry as [
-      keyof Metadata,
-      MetadataGroup,
-    ];
+  for (const [tokenGroupName, tokenGroup] of Object.entries(themes.light)) {
     const filePath = path.join(outputDir, `${tokenGroupName}.json`);
 
     await fs.promises.writeFile(filePath, JSON.stringify(tokenGroup));
   }
+
+  for (const [themeName, theme] of Object.entries(themes)) {
+    const filePath = path.join(outputThemesDir, `${themeName}.json`);
+
+    await fs.promises.writeFile(filePath, JSON.stringify(theme));
+  }
 }
diff --git a/polaris-tokens/scripts/toStyleSheet.ts b/polaris-tokens/scripts/toStyleSheet.ts
index 7833680ed6b..51e187db2fe 100644
--- a/polaris-tokens/scripts/toStyleSheet.ts
+++ b/polaris-tokens/scripts/toStyleSheet.ts
@@ -1,66 +1,36 @@
 import fs from 'fs';
 import path from 'path';
 
-import type {Metadata, MetadataGroup} from '../src';
-import type {MetadataBase} from '../src/types';
+import type {Themes, ThemesPartials} from '../src/themes';
+import type {ThemeShape, TokenGroupShape} from '../src/themes/types';
+import {createThemeSelector} from '../src/themes/utils';
+import {createVar} from '../src/utilities';
 
 const cssOutputDir = path.join(__dirname, '../dist/css');
 const sassOutputDir = path.join(__dirname, '../dist/scss');
 const cssOutputPath = path.join(cssOutputDir, 'styles.css');
 const sassOutputPath = path.join(sassOutputDir, 'styles.scss');
 
-/**
- * Creates static CSS custom properties.
- * Note: These values don't vary by color-scheme.
- */
-export function getStaticCustomProperties(metadata: Metadata) {
-  return Object.entries(metadata)
-    .map(([_, tokenGroup]) => getCustomProperties(tokenGroup))
+/** Creates CSS custom properties from a base or variant partial theme. */
+export function getThemeDecls(theme: ThemeShape) {
+  return Object.values(theme)
+    .map((tokenGroup) => getTokenGroupDecls(tokenGroup))
     .join('');
 }
 
-/**
- * Creates static CSS custom properties overrides.
- * Note: These values don't vary by color-scheme.
- */
-export function getStaticCustomPropertiesExperimental(metadata: MetadataBase) {
-  return Object.entries(metadata)
-    .map(([_, tokenGroup]) =>
-      getCustomProperties(
-        Object.fromEntries(
-          Object.entries(tokenGroup)
-            // Only include tokens with `valueExperimental` prop
-            .filter(([_, metadataProperties]) =>
-              Boolean(metadataProperties.valueExperimental),
-            )
-            // Move `valueExperimental` to `value` position
-            .map(([tokenName, metadataProperties]) => [
-              tokenName,
-              {value: metadataProperties.valueExperimental!},
-            ]),
-        ),
-      ),
-    )
-    .join('');
-}
-
-/**
- * Creates CSS custom properties for a given metadata object.
- */
-export function getCustomProperties(tokenGroup: MetadataGroup) {
+/** Creates CSS custom properties from a token group. */
+export function getTokenGroupDecls(tokenGroup: TokenGroupShape) {
   return Object.entries(tokenGroup)
     .map(([token, {value}]) =>
       token.startsWith('motion-keyframes') || token.startsWith('keyframes')
-        ? `--p-${token}:p-${token};`
-        : `--p-${token}:${value};`,
+        ? `${createVar(token)}:p-${token};`
+        : `${createVar(token)}:${value};`,
     )
     .join('');
 }
 
-/**
- * Concatenates the `keyframes` token-group into a single string.
- */
-export function getKeyframes(motion: MetadataGroup) {
+/** Creates `@keyframes` rules for `motion-keyframes-*` tokens. */
+export function getKeyframes(motion: TokenGroupShape) {
   return Object.entries(motion)
     .filter(
       ([token]) =>
@@ -70,7 +40,10 @@ export function getKeyframes(motion: MetadataGroup) {
     .join('');
 }
 
-export async function toStyleSheet(metadata: Metadata) {
+export async function toStyleSheet(
+  themes: Themes,
+  themesPartials: ThemesPartials,
+) {
   if (!fs.existsSync(cssOutputDir)) {
     await fs.promises.mkdir(cssOutputDir, {recursive: true});
   }
@@ -79,12 +52,20 @@ export async function toStyleSheet(metadata: Metadata) {
   }
 
   const styles = `
-  :root{color-scheme:light;${getStaticCustomProperties(metadata)}}
-  html.Polaris-Summer-Editions-2023{${getStaticCustomPropertiesExperimental(
-    metadata,
-  )}}
-  ${getKeyframes(metadata.motion)}
-`;
+
+  :root{color-scheme:light;${getThemeDecls(themes.light)}}
+
+  ${Object.entries(themesPartials)
+    .map(
+      ([themeName, themePartial]) =>
+        `${createThemeSelector(themeName)}{${getThemeDecls(themePartial)}}`,
+    )
+    .join('\n')}
+
+  ${getKeyframes(themes.light.motion)}
+
+`.trim();
+  // TODO: Add support for multi-theme keyframes
 
   await fs.promises.writeFile(cssOutputPath, styles);
   await fs.promises.writeFile(sassOutputPath, styles);
diff --git a/polaris-tokens/scripts/toTokenValues.ts b/polaris-tokens/scripts/toTokenValues.ts
deleted file mode 100644
index 1faf783c1c5..00000000000
--- a/polaris-tokens/scripts/toTokenValues.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-
-import {removeMetadata} from '../src';
-import type {Metadata} from '../src';
-import type {Entry, Entries, Tokens} from '../src/types';
-
-const outputDir = path.join(__dirname, '../build');
-const outputFile = path.join(outputDir, 'index.ts');
-
-export async function toTokenValues(metadata: Metadata) {
-  if (!fs.existsSync(outputDir)) {
-    await fs.promises.mkdir(outputDir);
-  }
-
-  const tokensEntries: Entries<Tokens> = Object.entries(metadata).map(
-    (entry): Entry<Tokens> => {
-      const [tokenGroupName, tokenGroup] = entry as Entry<Metadata>;
-
-      return [tokenGroupName, removeMetadata(tokenGroup)];
-    },
-  );
-
-  await fs.promises.writeFile(
-    outputFile,
-    [
-      `export * from '../src/index'`,
-      tokensEntries.map(createExport),
-      createExport(['tokens', Object.fromEntries(tokensEntries)]),
-    ]
-      .flat()
-      .join('\n'),
-  );
-}
-
-function createExport(
-  entry: [string, {[key: string]: unknown}] | Entry<Tokens>,
-) {
-  return `export const ${entry[0]} = ${JSON.stringify(entry[1])} as const;`;
-}
diff --git a/polaris-tokens/scripts/toValues.ts b/polaris-tokens/scripts/toValues.ts
new file mode 100644
index 00000000000..f70b267f205
--- /dev/null
+++ b/polaris-tokens/scripts/toValues.ts
@@ -0,0 +1,85 @@
+import fs from 'fs';
+import path from 'path';
+
+import {camelCase, camelCaseTransformMerge} from 'change-case';
+
+import type {Entry, Entries} from '../src/types';
+import type {Themes} from '../src/themes';
+import type {ThemeShape, TokenGroupShape} from '../src/themes/types';
+
+const outputDir = path.join(__dirname, '../build');
+
+export async function toValues(themes: Themes) {
+  await fs.promises.mkdir(outputDir).catch((error) => {
+    if (error.code !== 'EEXIST') {
+      throw error;
+    }
+  });
+
+  const themeLightEntries: Entries<ExtractValues<ThemeShape>> = Object.entries(
+    themes.light,
+  ).map(
+    ([tokenGroupName, tokenGroup]): Entry<ExtractValues<ThemeShape>> => [
+      tokenGroupName,
+      extractValue(tokenGroup),
+    ],
+  );
+
+  await fs.promises.writeFile(
+    path.join(outputDir, 'index.ts'),
+    [
+      `export * from '../src/index';`,
+      themeLightEntries.map(createExport),
+      createExport(['tokens', Object.fromEntries(themeLightEntries)]),
+    ]
+      .flat()
+      .join('\n'),
+  );
+
+  await fs.promises.writeFile(
+    path.join(outputDir, 'themes.ts'),
+    Object.entries(themes)
+      .map(([themeName, theme]): string =>
+        createExport([
+          // https://github.com/blakeembrey/change-case/blob/040a079f007879cb0472ba4f7cc2e1d3185e90ba/packages/camel-case/README.md?plain=1#L28
+          camelCase(themeName, {transform: camelCaseTransformMerge}),
+          extractValues(theme),
+        ]),
+      )
+      .join('\n'),
+  );
+}
+
+function createExport(entry: [string | number, any]) {
+  return `export const ${entry[0]} = ${JSON.stringify(entry[1])} as const;`;
+}
+
+export type ExtractValue<T extends TokenGroupShape> = {
+  [K in keyof T]: T[K]['value'];
+};
+
+export function extractValue<T extends TokenGroupShape>(tokenGroup: T) {
+  return Object.fromEntries(
+    Object.entries(tokenGroup).map(
+      ([tokenName, {value}]): Entry<ExtractValue<TokenGroupShape>> => [
+        tokenName,
+        value,
+      ],
+    ),
+  ) as ExtractValue<T>;
+}
+
+export type ExtractValues<T extends ThemeShape> = {
+  [K in keyof T]: ExtractValue<T[K]>;
+};
+
+export function extractValues<T extends ThemeShape>(theme: T) {
+  return Object.fromEntries(
+    Object.entries(theme).map(
+      ([tokenGroupName, tokenGroup]): Entry<ExtractValues<ThemeShape>> => [
+        tokenGroupName,
+        extractValue(tokenGroup),
+      ],
+    ),
+  ) as ExtractValues<T>;
+}
diff --git a/polaris-tokens/src/index.ts b/polaris-tokens/src/index.ts
index bbe6810d07e..7e79213ffe1 100644
--- a/polaris-tokens/src/index.ts
+++ b/polaris-tokens/src/index.ts
@@ -1,6 +1,12 @@
 export * from './metadata';
 export * from './utilities';
 export {breakpointsAliases} from './token-groups/breakpoints';
+
+export type {ThemeName, ThemeVarName, ThemeVars} from './themes';
+export {themeNames, themeVars} from './themes';
+export {themeNameDefault} from './themes/constants';
+export {createThemeClassName, createThemeSelector} from './themes/utils';
+
 export type {
   TokenGroup,
   Tokens,
diff --git a/polaris-tokens/src/themes/base.ts b/polaris-tokens/src/themes/base.ts
new file mode 100644
index 00000000000..46b7852199e
--- /dev/null
+++ b/polaris-tokens/src/themes/base.ts
@@ -0,0 +1,24 @@
+import {tokensToRems} from '../utilities';
+import {border} from '../token-groups/border';
+import {breakpoints} from '../token-groups/breakpoints';
+import {color} from '../token-groups/color';
+import {font} from '../token-groups/font';
+import {motion} from '../token-groups/motion';
+import {shadow} from '../token-groups/shadow';
+import {space} from '../token-groups/space';
+import {zIndex} from '../token-groups/zIndex';
+
+import {createThemeBase} from './utils';
+
+export const themeBase = createThemeBase({
+  breakpoints: tokensToRems(breakpoints),
+  border: tokensToRems(border),
+  color,
+  font: tokensToRems(font),
+  motion,
+  shadow: tokensToRems(shadow),
+  space: tokensToRems(space),
+  zIndex,
+});
+
+export type ThemeBase = typeof themeBase;
diff --git a/polaris-tokens/src/themes/constants.ts b/polaris-tokens/src/themes/constants.ts
new file mode 100644
index 00000000000..222abaf03e1
--- /dev/null
+++ b/polaris-tokens/src/themes/constants.ts
@@ -0,0 +1,2 @@
+export const themeNameDefault = 'light';
+export const themeNameLightUplift = 'Polaris-Summer-Editions-2023';
diff --git a/polaris-tokens/src/themes/index.ts b/polaris-tokens/src/themes/index.ts
new file mode 100644
index 00000000000..6703666883d
--- /dev/null
+++ b/polaris-tokens/src/themes/index.ts
@@ -0,0 +1,78 @@
+import {createVar} from '../utilities';
+
+import type {ThemeVariantPartialShape, CreateVarName} from './types';
+import type {ThemeBase} from './base';
+import {themeBase} from './base';
+import {themeLight} from './light';
+import {themeLightUplift, themeLightUpliftPartial} from './light-uplift';
+import {themeNameDefault, themeNameLightUplift} from './constants';
+
+export const themeNames = [themeNameDefault, themeNameLightUplift] as const;
+
+export type ThemeName = typeof themeNames[number];
+
+export type Themes = {[T in ThemeName]: ThemeBase};
+
+export const themes: Themes = {
+  light: themeLight,
+  'Polaris-Summer-Editions-2023': themeLightUplift,
+} as const;
+
+export type ThemesPartials = {
+  [T in Exclude<ThemeName, typeof themeNameDefault>]: ThemeVariantPartialShape;
+};
+
+export const themesPartials: ThemesPartials = {
+  'Polaris-Summer-Editions-2023': themeLightUpliftPartial,
+};
+
+export type ThemeVars = {
+  [TokenGroupName in keyof ThemeBase]: {
+    [TokenName in keyof ThemeBase[TokenGroupName]]: string;
+  };
+};
+
+/**
+ * `themeBase` token properties converted to CSS variables.
+ *
+ * @example
+ * const themeBase = {
+ *   color: { 'color-bg': { value: '#111', description: '...' } }
+ *   font: { 'font-family': { value: 'Inter', description: '...' } }
+ * }
+ *
+ * const themeVars = {
+ *   color: { 'color-bg': 'var(--p-color-bg)' }
+ *   font: { 'font-family': 'var(--p-font-family)' }
+ * }
+ */
+export const themeVars = Object.fromEntries(
+  Object.entries(themeBase).map(([tokenGroupName, tokenGroup]) => [
+    tokenGroupName,
+    Object.fromEntries(
+      Object.keys(tokenGroup).map((tokenName) => [
+        tokenName,
+        `var(${createVar(tokenName)})`,
+      ]),
+    ),
+  ]),
+) as ThemeVars;
+
+/**
+ * `themeVars` token names converted to CSS variable names.
+ *
+ * @example
+ * const themeVars = {
+ *   color: { 'color-bg': 'var(--p-color-bg)' }
+ *   font: { 'font-family': 'var(--p-font-family)' }
+ * }
+ *
+ * type ThemeVarName = '--p-color-bg' | '--p-font-family' | ...
+ */
+export type ThemeVarName = {
+  [TokenGroupName in keyof ThemeVars]: {
+    [TokenName in keyof ThemeVars[TokenGroupName]]: TokenName extends string
+      ? CreateVarName<TokenName>
+      : never;
+  }[keyof ThemeVars[TokenGroupName]];
+}[keyof ThemeVars];
diff --git a/polaris-tokens/src/themes/light-uplift.ts b/polaris-tokens/src/themes/light-uplift.ts
new file mode 100644
index 00000000000..27ca1649e6b
--- /dev/null
+++ b/polaris-tokens/src/themes/light-uplift.ts
@@ -0,0 +1,196 @@
+import deepmerge from 'deepmerge';
+
+import * as colors from '../colors-experimental';
+
+import {createThemeVariantPartial} from './utils';
+import type {ThemeBase} from './base';
+import {themeBase} from './base';
+
+// Note: This partial theme is separate from the complete variant theme below
+// (as partials are inserted in a dedicated selector to reduce duplication)
+export const themeLightUpliftPartial = createThemeVariantPartial({
+  motion: {
+    'motion-ease-out': {value: 'cubic-bezier(0.19, 0.91, 0.38, 1)'},
+  },
+  font: {
+    'font-family-sans': {
+      value:
+        "'Inter', -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
+    },
+    'font-size-500': {value: '30px'},
+    'font-size-600': {value: '36px'},
+  },
+  shadow: {
+    'shadow-inset-lg': {
+      value:
+        'inset -1px 0px 1px rgba(0, 0, 0, 0.2), inset 1px 0px 1px rgba(0, 0, 0, 0.2), inset 0px 2px 1px rgba(0, 0, 0, 0.6)',
+    },
+    'shadow-inset-md': {
+      value:
+        'inset -1px 0px 1px rgba(0, 0, 0, 0.12), inset 1px 0px 1px rgba(0, 0, 0, 0.12), inset 0px 2px 1px rgba(0, 0, 0, 0.2)',
+    },
+    'shadow-inset-sm': {
+      value:
+        'inset 0px 1px 1px rgba(0, 0, 0, 0.15), inset 0px 1px 2px rgba(255, 255, 255, 0.15)',
+    },
+    'shadow-xs': {
+      value: '0px 1px 0px rgba(0, 0, 0, 0.07)',
+    },
+    'shadow-sm': {
+      value: '0px 3px 1px -1px rgba(0, 0, 0, 0.07)',
+    },
+    'shadow-md': {
+      value: '0px 4px 6px -2px rgba(0, 0, 0, 0.2)',
+    },
+    'shadow-lg': {
+      value: '0px 8px 16px -4px rgba(0, 0, 0, 0.22)',
+    },
+    'shadow-xl': {
+      value: '0px 12px 20px -8px rgba(0, 0, 0, 0.24)',
+    },
+    'shadow-2xl': {
+      value: '0px 20px 20px -8px rgba(0, 0, 0, 0.28)',
+    },
+  },
+  color: {
+    'color-bg-inverse': {value: colors.gray[16]()},
+    'color-bg-inset-strong': {value: colors.gray[15]()},
+    'color-bg-inverse-hover': {value: colors.gray[14]()},
+    'color-bg-inverse-active': {value: colors.gray[13]()},
+    'color-bg-strong-hover': {value: colors.gray[9]()},
+    'color-bg-strong-active': {value: colors.gray[10]()},
+    'color-bg-strong': {value: colors.gray[8]()},
+    'color-bg-subdued-active': {value: colors.gray[7]()},
+    'color-bg-disabled': {value: colors.gray[7]()},
+    'color-bg-interactive-disabled': {value: colors.gray[7]()},
+    'color-bg-app': {value: colors.gray[6]()},
+    'color-bg-app-hover': {value: colors.gray[2]()},
+    'color-bg-app-selected': {value: colors.gray[3]()},
+    'color-bg-active': {value: colors.gray[4]()},
+    'color-bg-subdued-hover': {value: colors.gray[6]()},
+    'color-bg-inset': {value: colors.gray[6]()},
+    'color-bg-hover': {value: colors.gray[3]()},
+    'color-bg-subdued': {value: colors.gray[4]()},
+    'color-bg-input': {value: colors.gray[1]()},
+    'color-bg': {value: colors.gray[1]()},
+    'color-bg-primary-active': {value: colors.gray[16]()},
+    'color-bg-primary-hover': {value: colors.gray[16]()},
+    'color-bg-primary': {value: colors.gray[15]()},
+    'color-bg-success-strong': {value: colors.green[12]},
+    'color-bg-success': {value: colors.green[3]},
+    'color-bg-primary-subdued-active': {value: colors.gray[6]()},
+    'color-bg-success-subdued': {value: colors.green[3]},
+    'color-bg-primary-subdued-hover': {value: colors.gray[7]()},
+    'color-bg-success-subdued-hover': {value: colors.green[5]},
+    'color-bg-primary-subdued': {value: colors.gray[8]()},
+    'color-bg-primary-subdued-selected': {value: colors.gray[6]()},
+    'color-bg-critical-strong-active': {value: colors.red[14]},
+    'color-bg-critical-strong-hover': {value: colors.red[13]},
+    'color-bg-critical-strong': {value: colors.red[12]},
+    'color-bg-critical-subdued-active': {value: colors.red[6]},
+    'color-bg-critical': {value: colors.red[6]},
+    'color-bg-critical-subdued': {value: colors.red[4]},
+    'color-bg-critical-subdued-hover': {value: colors.red[5]},
+    'color-bg-caution-strong': {value: colors.yellow[6]},
+    'color-bg-caution': {value: colors.yellow[4]},
+    'color-bg-caution-subdued-active': {value: colors.yellow[4]},
+    'color-bg-caution-subdued': {value: colors.yellow[2]},
+    'color-bg-caution-subdued-hover': {value: colors.yellow[3]},
+    'color-bg-info-strong': {value: colors.azure[9]},
+    'color-bg-info-subdued-active': {value: colors.azure[6]},
+    'color-bg-info': {value: colors.azure[4]},
+    'color-bg-info-subdued': {value: colors.azure[3]},
+    'color-bg-info-subdued-hover': {value: colors.azure[4]},
+    'color-bg-interactive-active': {value: colors.gray[14]()},
+    'color-bg-interactive-hover': {value: colors.gray[15]()},
+    'color-bg-interactive': {value: colors.gray[16]()},
+    'color-bg-interactive-subdued-active': {value: colors.gray[6]()},
+    'color-bg-interactive-subdued-hover': {value: colors.gray[7]()},
+    'color-bg-interactive-subdued': {value: colors.gray[8]()},
+    'color-bg-interactive-selected': {value: colors.gray[6]()},
+    'color-bg-warning': {value: colors.orange[7]},
+    'color-bg-magic-strong': {value: colors.purple[12]},
+    'color-bg-magic-hover': {value: colors.purple[7]},
+    'color-bg-magic-active': {value: colors.purple[8]},
+    'color-bg-magic': {value: colors.purple[6]},
+    'color-bg-magic-subdued-hover': {value: colors.purple[4]},
+    'color-bg-magic-subdued-active': {value: colors.purple[6]},
+    'color-bg-magic-subdued': {value: colors.purple[3]},
+    'color-border-input-hover': {value: colors.gray[13]()},
+    'color-border-inverse': {value: colors.gray[13]()},
+    'color-border-strong-hover': {value: colors.gray[11]()},
+    'color-border-input': {value: colors.gray[12]()},
+    'color-border-hover': {value: colors.gray[10]()},
+    'color-border-strong': {value: colors.gray[10]()},
+    'color-border': {value: colors.gray[8]()},
+    'color-border-disabled': {value: colors.gray[7]()},
+    'color-border-subdued': {value: colors.gray[7]()},
+    'color-border-interactive-disabled': {value: colors.gray[7]()},
+    'color-border-primary': {value: colors.gray[8]()},
+    'color-border-success': {value: colors.green[5]},
+    'color-border-success-subdued': {value: colors.green[5]},
+    'color-border-critical-active': {value: colors.red[11]},
+    'color-border-critical-hover': {value: colors.red[10]},
+    'color-border-critical': {value: colors.red[9]},
+    'color-border-critical-subdued': {value: colors.red[9]},
+    'color-border-caution': {value: colors.yellow[5]},
+    'color-border-caution-subdued': {value: colors.yellow[5]},
+    'color-border-info': {value: colors.azure[9]},
+    'color-border-info-subdued': {value: colors.azure[9]},
+    'color-border-interactive-active': {value: colors.blue[15]},
+    'color-border-interactive-hover': {value: colors.blue[14]},
+    'color-border-interactive': {value: colors.blue[13]},
+    'color-border-interactive-focus': {value: colors.blue[13]},
+    'color-border-interactive-subdued': {value: colors.blue[13]},
+    'color-border-magic-strong': {value: colors.purple[12]},
+    'color-border-magic': {value: colors.purple[10]},
+    'color-icon-hover': {value: colors.gray[15]()},
+    'color-icon': {value: colors.gray[14]()},
+    'color-icon-subdued': {value: colors.gray[12]()},
+    'color-icon-disabled': {value: colors.gray[10]()},
+    'color-icon-interactive-disabled': {value: colors.gray[10]()},
+    'color-icon-inverse': {value: colors.gray[8]()},
+    'color-icon-on-color': {value: colors.gray[1]()},
+    'color-icon-primary': {value: colors.gray[16]()},
+    'color-icon-success': {value: colors.green[12]},
+    'color-icon-critical': {value: colors.red[11]},
+    'color-icon-caution': {value: colors.yellow[11]},
+    'color-icon-info': {value: colors.azure[11]},
+    'color-icon-warning': {value: colors.orange[11]},
+    'color-icon-interactive-active': {value: colors.blue[15]},
+    'color-icon-interactive-hover': {value: colors.blue[14]},
+    'color-icon-interactive': {value: colors.blue[13]},
+    'color-icon-interactive-inverse': {value: colors.blue[8]},
+    'color-icon-magic': {value: colors.purple[13]},
+    'color-text': {value: colors.gray[15]()},
+    'color-text-subdued': {value: colors.gray[13]()},
+    'color-text-disabled': {value: colors.gray[11]()},
+    'color-text-interactive-disabled': {value: colors.gray[10]()},
+    'color-text-inverse-subdued': {value: colors.gray[10]()},
+    'color-text-inverse': {value: colors.gray[8]()},
+    'color-text-on-color': {value: colors.gray[1]()},
+    'color-text-success-strong': {value: colors.green[15]},
+    'color-text-success': {value: colors.green[15]},
+    'color-text-primary': {value: colors.gray[14]()},
+    'color-text-primary-hover': {value: colors.gray[14]()},
+    'color-text-critical-strong': {value: colors.red[14]},
+    'color-text-critical-active': {value: colors.red[16]},
+    'color-text-critical': {value: colors.red[14]},
+    'color-text-caution-strong': {value: colors.yellow[15]},
+    'color-text-caution': {value: colors.yellow[15]},
+    'color-text-info-strong': {value: colors.azure[16]},
+    'color-text-info': {value: colors.azure[14]},
+    'color-text-warning-strong': {value: colors.orange[16]},
+    'color-text-interactive-active': {value: colors.blue[15]},
+    'color-text-interactive-hover': {value: colors.blue[14]},
+    'color-text-interactive': {value: colors.blue[13]},
+    'color-text-interactive-inverse': {value: colors.blue[8]},
+    'color-text-magic-strong': {value: colors.purple[15]},
+    'color-text-magic': {value: colors.purple[14]},
+  },
+});
+
+export const themeLightUplift = deepmerge(
+  themeBase,
+  themeLightUpliftPartial,
+) as ThemeBase;
diff --git a/polaris-tokens/src/themes/light.ts b/polaris-tokens/src/themes/light.ts
new file mode 100644
index 00000000000..30b06dee218
--- /dev/null
+++ b/polaris-tokens/src/themes/light.ts
@@ -0,0 +1,3 @@
+import {themeBase} from './base';
+
+export const themeLight = themeBase;
diff --git a/polaris-tokens/src/themes/types.ts b/polaris-tokens/src/themes/types.ts
new file mode 100644
index 00000000000..bfba593cd37
--- /dev/null
+++ b/polaris-tokens/src/themes/types.ts
@@ -0,0 +1,22 @@
+import type {ThemeBase} from './base';
+
+export interface TokenProperties {
+  value: string;
+  description?: string;
+}
+
+export interface TokenGroupShape {
+  [tokenName: string]: TokenProperties;
+}
+
+export interface ThemeShape {
+  [tokenGroupName: string]: TokenGroupShape;
+}
+
+export type ThemeVariantPartialShape = {
+  [TokenGroupName in keyof Omit<ThemeBase, 'breakpoints'>]?: {
+    [TokenName in keyof ThemeBase[TokenGroupName]]?: TokenProperties;
+  };
+};
+
+export type CreateVarName<T extends string> = `--p-${T}`;
diff --git a/polaris-tokens/src/themes/utils.ts b/polaris-tokens/src/themes/utils.ts
new file mode 100644
index 00000000000..922f43a663e
--- /dev/null
+++ b/polaris-tokens/src/themes/utils.ts
@@ -0,0 +1,43 @@
+import type {Exact} from '../types';
+
+import type {ThemeShape, ThemeVariantPartialShape} from './types';
+import {themeNameLightUplift} from './constants';
+
+/**
+ * Identity function creator that simply returns the provided theme,
+ * but additionally validates the input matches the type exactly
+ * and infers all members.
+ *
+ * TODO: Replace all instances with `satisfies` when we upgrade
+ * to TypeScript >=4.9
+ *
+ * @example
+ * ```
+ * type ExampleShape = { [key: string]: string }
+ * const createExample = createExact<ExampleShape>()
+ *
+ * const example = createExample({
+ *  foo: 'bar',
+ * })
+ * ```
+ *
+ * Where `typeof example` is inferred as `{ foo: string }`
+ */
+function createExact<T extends object>() {
+  return <U extends Exact<T, U>>(obj: U) => obj;
+}
+
+export const createThemeBase = createExact<ThemeShape>();
+
+export const createThemeVariantPartial =
+  createExact<ThemeVariantPartialShape>();
+
+export function createThemeClassName(themeName: string) {
+  return themeName === themeNameLightUplift
+    ? themeName
+    : `p-theme-${themeName}`;
+}
+
+export function createThemeSelector(themeName: string) {
+  return `html.${createThemeClassName(themeName)}`;
+}
diff --git a/polaris-tokens/src/token-groups/color.ts b/polaris-tokens/src/token-groups/color.ts
index 19a6555ee58..60890d87213 100644
--- a/polaris-tokens/src/token-groups/color.ts
+++ b/polaris-tokens/src/token-groups/color.ts
@@ -219,57 +219,46 @@ export const color: {
 } = {
   'color-bg-inverse': {
     value: colors.gray[900],
-    valueExperimental: colorsExperimental.gray[16](),
     description: '',
   },
   'color-bg-inset-strong': {
     value: colors.gray[800],
-    valueExperimental: colorsExperimental.gray[15](),
     description: '',
   },
   'color-bg-inverse-hover': {
     value: colors.gray[800],
-    valueExperimental: colorsExperimental.gray[14](),
     description: '',
   },
   'color-bg-inverse-active': {
     value: colors.gray[700],
-    valueExperimental: colorsExperimental.gray[13](),
     description: '',
   },
   'color-bg-strong-hover': {
     value: colors.gray[500],
-    valueExperimental: colorsExperimental.gray[9](),
     description: '',
   },
   'color-bg-strong-active': {
     value: colors.gray[500],
-    valueExperimental: colorsExperimental.gray[10](),
     description: '',
   },
   'color-bg-strong': {
     value: colors.gray[400],
-    valueExperimental: colorsExperimental.gray[8](),
     description: '',
   },
   'color-bg-subdued-active': {
     value: colors.gray[300],
-    valueExperimental: colorsExperimental.gray[7](),
     description: '',
   },
   'color-bg-disabled': {
     value: colors.gray[300],
-    valueExperimental: colorsExperimental.gray[7](),
     description: '',
   },
   'color-bg-interactive-disabled': {
     value: colors.gray[300],
-    valueExperimental: colorsExperimental.gray[7](),
     description: '',
   },
   'color-bg-app': {
     value: colors.gray[200],
-    valueExperimental: colorsExperimental.gray[6](),
     description: '',
   },
   'color-bg-app-active': {
@@ -278,77 +267,62 @@ export const color: {
   },
   'color-bg-app-hover': {
     value: colors.gray[300],
-    valueExperimental: colorsExperimental.gray[2](),
     description: '',
   },
   'color-bg-app-selected': {
     value: colors.gray[300],
-    valueExperimental: colorsExperimental.gray[3](),
     description: '',
   },
   'color-bg-active': {
     value: colors.gray[300],
-    valueExperimental: colorsExperimental.gray[4](),
     description: '',
   },
   'color-bg-subdued-hover': {
     value: colors.gray[200],
-    valueExperimental: colorsExperimental.gray[6](),
     description: '',
   },
   'color-bg-inset': {
     value: colors.gray[200],
-    valueExperimental: colorsExperimental.gray[6](),
     description: '',
   },
   'color-bg-hover': {
     value: colors.gray[200],
-    valueExperimental: colorsExperimental.gray[3](),
     description: '',
   },
   'color-bg-subdued': {
     value: colors.gray[100],
-    valueExperimental: colorsExperimental.gray[4](),
     description: '',
   },
   'color-bg-input': {
     value: colors.gray[50],
-    valueExperimental: colorsExperimental.gray[1](),
     description: '',
   },
   'color-bg': {
     value: colors.gray[50],
-    valueExperimental: colorsExperimental.gray[1](),
     description: '',
   },
   'color-bg-primary-active': {
     value: colors.green[900],
-    valueExperimental: colorsExperimental.gray[16](),
     description: '',
   },
   'color-bg-primary-hover': {
     value: colors.green[800],
-    valueExperimental: colorsExperimental.gray[16](),
     description: '',
   },
   'color-bg-primary': {
     value: colors.green[700],
-    valueExperimental: colorsExperimental.gray[15](),
     description: '',
   },
   'color-bg-success-strong': {
     value: colors.green[600],
-    valueExperimental: colorsExperimental.green[12],
     description: '',
   },
   'color-bg-success': {
     value: colors.green[300],
-    valueExperimental: colorsExperimental.green[3],
     description: '',
   },
   'color-bg-primary-subdued-active': {
     value: colors.green[200],
-    valueExperimental: colorsExperimental.gray[6](),
     description: '',
   },
   'color-bg-success-subdued-active': {
@@ -357,337 +331,270 @@ export const color: {
   },
   'color-bg-success-subdued': {
     value: colors.green[100],
-    valueExperimental: colorsExperimental.green[3],
     description: '',
   },
   'color-bg-primary-subdued-hover': {
     value: colors.green[100],
-    valueExperimental: colorsExperimental.gray[7](),
     description: '',
   },
   'color-bg-success-subdued-hover': {
     value: colors.green[50],
-    valueExperimental: colorsExperimental.green[5],
     description: '',
   },
   'color-bg-primary-subdued': {
     value: colors.green[50],
-    valueExperimental: colorsExperimental.gray[8](),
     description: '',
   },
   'color-bg-primary-subdued-selected': {
     value: colors.green[50],
-    valueExperimental: colorsExperimental.gray[6](),
     description: '',
   },
   'color-bg-critical-strong-active': {
     value: colors.red[800],
-    valueExperimental: colorsExperimental.red[14],
     description: '',
   },
   'color-bg-critical-strong-hover': {
     value: colors.red[700],
-    valueExperimental: colorsExperimental.red[13],
     description: '',
   },
   'color-bg-critical-strong': {
     value: colors.red[600],
-    valueExperimental: colorsExperimental.red[12],
     description: '',
   },
   'color-bg-critical-subdued-active': {
     value: colors.red[200],
-    valueExperimental: colorsExperimental.red[6],
     description: '',
   },
   'color-bg-critical': {
     value: colors.red[200],
-    valueExperimental: colorsExperimental.red[6],
     description: '',
   },
   'color-bg-critical-subdued': {
     value: colors.red[100],
-    valueExperimental: colorsExperimental.red[4],
     description: '',
   },
   'color-bg-critical-subdued-hover': {
     value: colors.red[50],
-    valueExperimental: colorsExperimental.red[5],
     description: '',
   },
   'color-bg-caution-strong': {
     value: colors.yellow[600],
-    valueExperimental: colorsExperimental.yellow[6],
     description: '',
   },
   'color-bg-caution': {
     value: colors.yellow[300],
-    valueExperimental: colorsExperimental.yellow[4],
     description: '',
   },
   'color-bg-caution-subdued-active': {
     value: colors.yellow[200],
-    valueExperimental: colorsExperimental.yellow[4],
     description: '',
   },
   'color-bg-caution-subdued': {
     value: colors.yellow[100],
-    valueExperimental: colorsExperimental.yellow[2],
     description: '',
   },
   'color-bg-caution-subdued-hover': {
     value: colors.yellow[50],
-    valueExperimental: colorsExperimental.yellow[3],
     description: '',
   },
   'color-bg-info-strong': {
     value: colors.teal[600],
-    valueExperimental: colorsExperimental.azure[9],
     description: '',
   },
   'color-bg-info-subdued-active': {
     value: colors.teal[200],
-    valueExperimental: colorsExperimental.azure[6],
     description: '',
   },
   'color-bg-info': {
     value: colors.teal[200],
-    valueExperimental: colorsExperimental.azure[4],
     description: '',
   },
   'color-bg-info-subdued': {
     value: colors.teal[100],
-    valueExperimental: colorsExperimental.azure[3],
     description: '',
   },
   'color-bg-info-subdued-hover': {
     value: colors.teal[50],
-    valueExperimental: colorsExperimental.azure[4],
     description: '',
   },
   'color-bg-interactive-active': {
     value: colors.blue[800],
-    valueExperimental: colorsExperimental.gray[14](),
     description: '',
   },
   'color-bg-interactive-hover': {
     value: colors.blue[700],
-    valueExperimental: colorsExperimental.gray[15](),
     description: '',
   },
   'color-bg-interactive': {
     value: colors.blue[600],
-    valueExperimental: colorsExperimental.gray[16](),
     description: '',
   },
   'color-bg-interactive-subdued-active': {
     value: colors.blue[200],
-    valueExperimental: colorsExperimental.gray[6](),
     description: '',
   },
   'color-bg-interactive-subdued-hover': {
     value: colors.blue[100],
-    valueExperimental: colorsExperimental.gray[7](),
     description: '',
   },
   'color-bg-interactive-subdued': {
     value: colors.blue[50],
-    valueExperimental: colorsExperimental.gray[8](),
     description: '',
   },
   'color-bg-interactive-selected': {
     value: colors.blue[50],
-    valueExperimental: colorsExperimental.gray[6](),
     description: '',
   },
   'color-bg-warning': {
     value: colors.orange[200],
-    valueExperimental: colorsExperimental.orange[7],
     description: '',
   },
   'color-bg-magic-strong': {
     value: colors.purple[500],
-    valueExperimental: colorsExperimental.purple[12],
     description: '',
   },
   'color-bg-magic-hover': {
     value: colors.purple[200],
-    valueExperimental: colorsExperimental.purple[7],
     description: '',
   },
   'color-bg-magic-active': {
     value: colors.purple[300],
-    valueExperimental: colorsExperimental.purple[8],
     description: '',
   },
   'color-bg-magic': {
     value: colors.purple[100],
-    valueExperimental: colorsExperimental.purple[6],
     description: '',
   },
   'color-bg-magic-subdued-hover': {
     value: colors.purple[100],
-    valueExperimental: colorsExperimental.purple[4],
     description: '',
   },
   'color-bg-magic-subdued-active': {
     value: colors.purple[200],
-    valueExperimental: colorsExperimental.purple[6],
     description: '',
   },
   'color-bg-magic-subdued': {
     value: colors.purple[50],
-    valueExperimental: colorsExperimental.purple[3],
     description: '',
   },
   'color-border-input-hover': {
     value: colors.gray[800],
-    valueExperimental: colorsExperimental.gray[13](),
     description: '',
   },
   'color-border-inverse': {
     value: colors.gray[800],
-    valueExperimental: colorsExperimental.gray[13](),
     description: '',
   },
   'color-border-strong-hover': {
     value: colors.gray[700],
-    valueExperimental: colorsExperimental.gray[11](),
     description: '',
   },
   'color-border-input': {
     value: colors.gray[600],
-    valueExperimental: colorsExperimental.gray[12](),
     description: '',
   },
   'color-border-hover': {
     value: colors.gray[600],
-    valueExperimental: colorsExperimental.gray[10](),
     description: '',
   },
   'color-border-strong': {
     value: colors.gray[600],
-    valueExperimental: colorsExperimental.gray[10](),
     description: '',
   },
   'color-border': {
     value: colors.gray[500],
-    valueExperimental: colorsExperimental.gray[8](),
     description: '',
   },
   'color-border-disabled': {
     value: colors.gray[400],
-    valueExperimental: colorsExperimental.gray[7](),
     description: '',
   },
   'color-border-subdued': {
     value: colors.gray[400],
-    valueExperimental: colorsExperimental.gray[7](),
     description: '',
   },
   'color-border-interactive-disabled': {
     value: colors.gray[400],
-    valueExperimental: colorsExperimental.gray[7](),
     description: '',
   },
   'color-border-primary': {
     value: colors.green[700],
-    valueExperimental: colorsExperimental.gray[8](),
     description: '',
   },
   'color-border-success': {
     value: colors.green[600],
-    valueExperimental: colorsExperimental.green[5],
     description: '',
   },
   'color-border-success-subdued': {
     value: colors.green[400],
-    valueExperimental: colorsExperimental.green[5],
     description: '',
   },
   'color-border-critical-active': {
     value: colors.red[900],
-    valueExperimental: colorsExperimental.red[11],
     description: '',
   },
   'color-border-critical-hover': {
     value: colors.red[800],
-    valueExperimental: colorsExperimental.red[10],
     description: '',
   },
   'color-border-critical': {
     value: colors.red[600],
-    valueExperimental: colorsExperimental.red[9],
     description: '',
   },
   'color-border-critical-subdued': {
     value: colors.red[400],
-    valueExperimental: colorsExperimental.red[9],
     description: '',
   },
   'color-border-caution': {
     value: colors.yellow[600],
-    valueExperimental: colorsExperimental.yellow[5],
     description: '',
   },
   'color-border-caution-subdued': {
     value: colors.yellow[400],
-    valueExperimental: colorsExperimental.yellow[5],
     description: '',
   },
   'color-border-info': {
     value: colors.teal[500],
-    valueExperimental: colorsExperimental.azure[9],
     description: '',
   },
   'color-border-info-subdued': {
     value: colors.teal[400],
-    valueExperimental: colorsExperimental.azure[9],
     description: '',
   },
   'color-border-interactive-active': {
     value: colors.blue[800],
-    valueExperimental: colorsExperimental.blue[15],
     description: '',
   },
   'color-border-interactive-hover': {
     value: colors.blue[700],
-    valueExperimental: colorsExperimental.blue[14],
     description: '',
   },
   'color-border-interactive': {
     value: colors.blue[500],
-    valueExperimental: colorsExperimental.blue[13],
     description: '',
   },
   'color-border-interactive-focus': {
     value: colors.blue[500],
-    valueExperimental: colorsExperimental.blue[13],
     description: '',
   },
   'color-border-interactive-subdued': {
     value: colors.blue[200],
-    valueExperimental: colorsExperimental.blue[13],
     description: '',
   },
   'color-border-magic-strong': {
     value: colors.purple[500],
-    valueExperimental: colorsExperimental.purple[12],
     description: '',
   },
   'color-border-magic': {
     value: colors.purple[400],
-    valueExperimental: colorsExperimental.purple[10],
     description: '',
   },
   'color-icon-hover': {
     value: colors.gray[900],
-    valueExperimental: colorsExperimental.gray[15](),
     description: '',
   },
   'color-icon': {
     value: colors.gray[800],
-    valueExperimental: colorsExperimental.gray[14](),
     description: '',
   },
   'color-icon-active': {
@@ -696,207 +603,166 @@ export const color: {
   },
   'color-icon-subdued': {
     value: colors.gray[700],
-    valueExperimental: colorsExperimental.gray[12](),
     description: '',
   },
   'color-icon-disabled': {
     value: colors.gray[600],
-    valueExperimental: colorsExperimental.gray[10](),
     description: '',
   },
   'color-icon-interactive-disabled': {
     value: colors.gray[600],
-    valueExperimental: colorsExperimental.gray[10](),
     description: '',
   },
   'color-icon-inverse': {
     value: colors.gray[400],
-    valueExperimental: colorsExperimental.gray[8](),
     description: '',
   },
   'color-icon-on-color': {
     value: colors.gray[50],
-    valueExperimental: colorsExperimental.gray[1](),
     description: '',
   },
   'color-icon-primary': {
     value: colors.green[700],
-    valueExperimental: colorsExperimental.gray[16](),
     description: '',
   },
   'color-icon-success': {
     value: colors.green[600],
-    valueExperimental: colorsExperimental.green[12],
     description: '',
   },
   'color-icon-critical': {
     value: colors.red[600],
-    valueExperimental: colorsExperimental.red[11],
     description: '',
   },
   'color-icon-caution': {
     value: colors.yellow[700],
-    valueExperimental: colorsExperimental.yellow[11],
     description: '',
   },
   'color-icon-info': {
     value: colors.teal[600],
-    valueExperimental: colorsExperimental.azure[11],
     description: '',
   },
   'color-icon-warning': {
     value: colors.orange[500],
-    valueExperimental: colorsExperimental.orange[11],
     description: '',
   },
   'color-icon-interactive-active': {
     value: colors.blue[800],
-    valueExperimental: colorsExperimental.blue[15],
     description: '',
   },
   'color-icon-interactive-hover': {
     value: colors.blue[700],
-    valueExperimental: colorsExperimental.blue[14],
     description: '',
   },
   'color-icon-interactive': {
     value: colors.blue[600],
-    valueExperimental: colorsExperimental.blue[13],
     description: '',
   },
   'color-icon-interactive-inverse': {
     value: colors.blue[400],
-    valueExperimental: colorsExperimental.blue[8],
     description: '',
   },
   'color-icon-magic': {
     value: colors.purple[500],
-    valueExperimental: colorsExperimental.purple[13],
     description: '',
   },
   'color-text': {
     value: colors.gray[900],
-    valueExperimental: colorsExperimental.gray[15](),
     description: '',
   },
   'color-text-subdued': {
     value: colors.gray[800],
-    valueExperimental: colorsExperimental.gray[13](),
     description: '',
   },
   'color-text-disabled': {
     value: colors.gray[700],
-    valueExperimental: colorsExperimental.gray[11](),
     description: '',
   },
   'color-text-interactive-disabled': {
     value: colors.gray[700],
-    valueExperimental: colorsExperimental.gray[10](),
     description: '',
   },
   'color-text-inverse-subdued': {
     value: colors.gray[600],
-    valueExperimental: colorsExperimental.gray[10](),
     description: '',
   },
   'color-text-inverse': {
     value: colors.gray[200],
-    valueExperimental: colorsExperimental.gray[8](),
     description: '',
   },
   'color-text-on-color': {
     value: colors.gray[50],
-    valueExperimental: colorsExperimental.gray[1](),
     description: '',
   },
   'color-text-success-strong': {
     value: colors.green[900],
-    valueExperimental: colorsExperimental.green[15],
     description: '',
   },
   'color-text-success': {
     value: colors.green[700],
-    valueExperimental: colorsExperimental.green[15],
     description: '',
   },
   'color-text-primary': {
     value: colors.green[700],
-    valueExperimental: colorsExperimental.gray[14](),
     description: '',
   },
   'color-text-primary-hover': {
     value: colors.green[800],
-    valueExperimental: colorsExperimental.gray[14](),
     description: '',
   },
   'color-text-critical-strong': {
     value: colors.red[900],
-    valueExperimental: colorsExperimental.red[14],
     description: '',
   },
   'color-text-critical-active': {
     value: colors.red[800],
-    valueExperimental: colorsExperimental.red[16],
     description: '',
   },
   'color-text-critical': {
     value: colors.red[600],
-    valueExperimental: colorsExperimental.red[14],
     description: '',
   },
   'color-text-caution-strong': {
     value: colors.yellow[900],
-    valueExperimental: colorsExperimental.yellow[15],
     description: '',
   },
   'color-text-caution': {
     value: colors.yellow[800],
-    valueExperimental: colorsExperimental.yellow[15],
     description: '',
   },
   'color-text-info-strong': {
     value: colors.teal[900],
-    valueExperimental: colorsExperimental.azure[16],
     description: '',
   },
   'color-text-info': {
     value: colors.teal[700],
-    valueExperimental: colorsExperimental.azure[14],
     description: '',
   },
   'color-text-warning-strong': {
     value: colors.orange[900],
-    valueExperimental: colorsExperimental.orange[16],
     description: '',
   },
   'color-text-interactive-active': {
     value: colors.blue[800],
-    valueExperimental: colorsExperimental.blue[15],
     description: '',
   },
   'color-text-interactive-hover': {
     value: colors.blue[700],
-    valueExperimental: colorsExperimental.blue[14],
     description: '',
   },
   'color-text-interactive': {
     value: colors.blue[600],
-    valueExperimental: colorsExperimental.blue[13],
     description: '',
   },
   'color-text-interactive-inverse': {
     value: colors.blue[400],
-    valueExperimental: colorsExperimental.blue[8],
     description: '',
   },
   'color-text-magic-strong': {
     value: colors.purple[800],
-    valueExperimental: colorsExperimental.purple[15],
     description: '',
   },
   'color-text-magic': {
     value: colors.purple[600],
-    valueExperimental: colorsExperimental.purple[14],
     description: '',
   },
   // Experimental tokens
diff --git a/polaris-tokens/src/token-groups/font.ts b/polaris-tokens/src/token-groups/font.ts
index a3c4dc0ff44..e6bf8605ab6 100644
--- a/polaris-tokens/src/token-groups/font.ts
+++ b/polaris-tokens/src/token-groups/font.ts
@@ -45,8 +45,6 @@ export const font: {
   'font-family-sans': {
     value:
       "-apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
-    valueExperimental:
-      "'Inter', -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
   },
   'font-family-mono': {
     value:
@@ -75,11 +73,9 @@ export const font: {
   },
   'font-size-500': {
     value: '28px',
-    valueExperimental: '30px',
   },
   'font-size-600': {
     value: '32px',
-    valueExperimental: '36px',
   },
   'font-size-700': {
     value: '40px',
diff --git a/polaris-tokens/src/token-groups/motion.ts b/polaris-tokens/src/token-groups/motion.ts
index 6a3417d470c..6bf7428badd 100644
--- a/polaris-tokens/src/token-groups/motion.ts
+++ b/polaris-tokens/src/token-groups/motion.ts
@@ -88,7 +88,6 @@ export const motion: {
   },
   'motion-ease-out': {
     value: 'cubic-bezier(0, 0, 0.58, 1)',
-    valueExperimental: 'cubic-bezier(0.19,0.91,0.38,1)',
     description: 'Starts at top speed and finishes slowly. Use sparingly.',
   },
   'motion-ease-in-out': {
diff --git a/polaris-tokens/src/token-groups/shadow.ts b/polaris-tokens/src/token-groups/shadow.ts
index 88a2ae9cfdb..c8461b0b547 100644
--- a/polaris-tokens/src/token-groups/shadow.ts
+++ b/polaris-tokens/src/token-groups/shadow.ts
@@ -41,49 +41,37 @@ export const shadow: {
 } = {
   'shadow-inset-lg': {
     value: 'inset 0px 0px 7px 2px rgba(31, 33, 36, 0.18)',
-    valueExperimental:
-      'inset -1px 0px 1px rgba(0, 0, 0, 0.2), inset 1px 0px 1px rgba(0, 0, 0, 0.2), inset 0px 2px 1px rgba(0, 0, 0, 0.6)',
   },
   'shadow-inset-md': {
     value: 'inset 0px 2px 4px rgba(31, 33, 36, 0.32)',
-    valueExperimental:
-      'inset -1px 0px 1px rgba(0, 0, 0, 0.12), inset 1px 0px 1px rgba(0, 0, 0, 0.12), inset 0px 2px 1px rgba(0, 0, 0, 0.2)',
   },
   'shadow-inset-sm': {
     value: 'inset 0px 0px 3px rgba(31, 33, 36, 0.56)',
-    valueExperimental:
-      'inset 0px 1px 1px rgba(0, 0, 0, 0.15), inset 0px 1px 2px rgba(255, 255, 255, 0.15)',
   },
   'shadow-none': {
     value: 'none',
   },
   'shadow-xs': {
     value: '0px 0px 2px rgba(31, 33, 36, 0.24)',
-    valueExperimental: '0px 1px 0px rgba(0, 0, 0, 0.07)',
   },
   'shadow-sm': {
     value: '0px 1px 1px rgba(31, 33, 36, 0.1)',
-    valueExperimental: '0px 3px 1px -1px rgba(0, 0, 0, 0.07)',
   },
   'shadow-md': {
     value:
       '0px 2px 4px rgba(31, 33, 36, 0.1), 0px 1px 6px rgba(31, 33, 36, 0.05)',
-    valueExperimental: '0px 4px 6px -2px rgba(0, 0, 0, 0.2)',
   },
   'shadow-lg': {
     value:
       '0px 4px 12px rgba(31, 33, 36, 0.2), 0px 2px 6px rgba(31, 33, 36, 0.05)',
-    valueExperimental: '0px 8px 16px -4px rgba(0, 0, 0, 0.22)',
   },
   'shadow-xl': {
     value:
       '0px 4px 18px -2px rgba(31, 33, 36, 0.08), 0px 12px 18px -2px rgba(31, 33, 36, 0.15)',
-    valueExperimental: '0px 12px 20px -8px rgba(0, 0, 0, 0.24)',
   },
   'shadow-2xl': {
     value:
       '0px 32px 32px rgba(31, 33, 36, 0.15), 0px 32px 56px -2px rgba(31, 33, 36, 0.16)',
-    valueExperimental: '0px 20px 20px -8px rgba(0, 0, 0, 0.28)',
   },
   'shadow-bevel-experimental': {
     value:
diff --git a/polaris-tokens/src/types.ts b/polaris-tokens/src/types.ts
index 3292c500bd2..10a12863242 100644
--- a/polaris-tokens/src/types.ts
+++ b/polaris-tokens/src/types.ts
@@ -5,9 +5,8 @@ export type Entries<T> = Entry<T>[];
 export type Experimental<T extends string> = `${T}-experimental`;
 
 export interface MetadataProperties {
-  description?: string;
   value: string;
-  valueExperimental?: string;
+  description?: string;
 }
 
 export interface MetadataGroup {
diff --git a/yarn.lock b/yarn.lock
index 1e1758c517d..1e91abcfe82 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7863,6 +7863,11 @@ deepmerge@^4.2.2:
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
   integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
 
+deepmerge@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
+  integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
+
 default-browser-id@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/default-browser-id/-/default-browser-id-1.0.4.tgz#e59d09a5d157b828b876c26816e61c3d2a2c203a"