diff --git a/packages/react/src/components/design-system.tsx b/packages/react/src/components/design-system.tsx
index 5b3626c828..28697128d9 100644
--- a/packages/react/src/components/design-system.tsx
+++ b/packages/react/src/components/design-system.tsx
@@ -8,7 +8,11 @@ export type DesignSystemProps = ThemeWrapperProps & DeviceContextProviderProps &
 
 export const DesignSystem: FunctionComponent<PropsWithChildren<DesignSystemProps>> = (props) => (
     <DeviceContextProvider staticDevice={props.staticDevice}>
-        <ThemeWrapper theme={props.theme} isolateStyles={props.isolateStyles}>
+        <ThemeWrapper
+            isolateStyles={props.isolateStyles}
+            themeCustomization={props.themeCustomization}
+            displayPreferences={props.displayPreferences}
+        >
             <IntlProvider language={props.language}>
                 <ToastProvider>
                     {props.children}
diff --git a/packages/react/src/components/device-context-provider/device-context-provider.tsx b/packages/react/src/components/device-context-provider/device-context-provider.tsx
index 8eb340456f..3dae4560da 100644
--- a/packages/react/src/components/device-context-provider/device-context-provider.tsx
+++ b/packages/react/src/components/device-context-provider/device-context-provider.tsx
@@ -1,4 +1,13 @@
-import { createContext, FunctionComponent, PropsWithChildren, useContext, useEffect, useState } from 'react';
+import {
+    createContext,
+    FunctionComponent,
+    PropsWithChildren,
+    useCallback,
+    useContext,
+    useEffect,
+    useRef,
+    useState,
+} from 'react';
 import { breakpoints, Breakpoints } from '../../legacy-constants/breakpoints';
 
 export type DeviceType = 'desktop' | 'tablet' | 'mobile';
@@ -15,40 +24,20 @@ export interface DeviceContextProps {
     breakpoints: Breakpoints;
 }
 
-const getDeviceContext = (deviceName: DeviceType | undefined = undefined): DeviceContextProps => {
-    let isDesktop = false;
-    let isTablet = false;
-    let isMobile = false;
-    const defaultContext: DeviceContextProps = {
-        device: 'desktop',
-        isDesktop: true,
-        isTablet: false,
-        isMobile: false,
+function getDeviceContext(deviceName: DeviceType): DeviceContextProps {
+    return {
+        device: deviceName,
+        isDesktop: deviceName === 'desktop',
+        isTablet: deviceName === 'tablet',
+        isMobile: deviceName === 'mobile',
         breakpoints,
     };
+}
 
-    if (deviceName) {
-        if (deviceName === 'desktop') {
-            isDesktop = true;
-        } else if (deviceName === 'tablet') {
-            isTablet = true;
-        } else if (deviceName === 'mobile') {
-            isMobile = true;
-        }
-
-        return {
-            device: deviceName,
-            isDesktop,
-            isTablet,
-            isMobile,
-            breakpoints,
-        };
-    }
-    return defaultContext;
-};
-
-const getDevice = (screenWidth: number): DeviceType => {
+function getDeviceType(): DeviceType {
     let currentDevice: DeviceType = 'desktop';
+    const screenWidth = (window.innerWidth || document.documentElement.clientWidth);
+
     if (screenWidth >= breakpoints.desktop) {
         currentDevice = 'desktop';
     } else if (screenWidth < breakpoints.desktop && screenWidth > breakpoints.mobile) {
@@ -58,39 +47,46 @@ const getDevice = (screenWidth: number): DeviceType => {
     }
 
     return currentDevice;
-};
+}
 
-const DeviceContext = createContext<DeviceContextProps>(getDeviceContext());
+const DeviceContext = createContext<DeviceContextProps>(getDeviceContext(getDeviceType()));
 
-/**
- * @deprecated Use {@link DesignSystem} instead
- */
 export const DeviceContextProvider: FunctionComponent<PropsWithChildren<DeviceContextProviderProps>> = ({
     children,
     staticDevice,
 }) => {
-    const [device, setDevice] = useState<DeviceContextProps>(getDeviceContext(staticDevice));
+    const deviceType = staticDevice || getDeviceType();
 
-    function handleScreenResize(): void {
-        const screenWidth = (window.innerWidth || document.documentElement.clientWidth);
-        const currentDevice = getDevice(screenWidth);
+    const previousDeviceType = useRef<DeviceType>(deviceType);
+    const previousStaticDevice = useRef<DeviceType | undefined>(staticDevice);
+    const [deviceContext, setDeviceContext] = useState<DeviceContextProps>(getDeviceContext(deviceType));
 
-        setDevice(getDeviceContext(currentDevice));
+    if (staticDevice !== previousStaticDevice.current) {
+        previousStaticDevice.current = staticDevice;
+        setDeviceContext(getDeviceContext(deviceType));
     }
 
+    const handleScreenResize = useCallback(() => {
+        const currentDeviceType = getDeviceType();
+
+        if (currentDeviceType !== previousDeviceType.current) {
+            previousDeviceType.current = currentDeviceType;
+            setDeviceContext(getDeviceContext(currentDeviceType));
+        }
+    }, []);
+
     useEffect(() => {
         if (!staticDevice) {
-            handleScreenResize();
             window.addEventListener('resize', handleScreenResize);
             return () => {
                 window.removeEventListener('resize', handleScreenResize);
             };
         }
         return undefined;
-    }, [staticDevice]);
+    }, [handleScreenResize, staticDevice]);
 
     return (
-        <DeviceContext.Provider value={device}>
+        <DeviceContext.Provider value={deviceContext}>
             {children}
         </DeviceContext.Provider>
     );
diff --git a/packages/react/src/components/internationalization-provider/internationalization-provider.tsx b/packages/react/src/components/internationalization-provider/internationalization-provider.tsx
index ec94aedd8f..7e28a60274 100644
--- a/packages/react/src/components/internationalization-provider/internationalization-provider.tsx
+++ b/packages/react/src/components/internationalization-provider/internationalization-provider.tsx
@@ -15,9 +15,6 @@ interface IntlContextProps {
 
 const IntlContext = createContext<IntlContextProps>({ i18n: createI18n() });
 
-/**
- * @deprecated Use {@link DesignSystem} instead
- */
 export const IntlProvider: FunctionComponent<PropsWithChildren<IntlProviderProps>> = ({ children, language }) => {
     const [i18n] = useState(() => createI18n(language));
 
diff --git a/packages/react/src/components/table/sort-button-icon.test.tsx b/packages/react/src/components/table/sort-button-icon.test.tsx
index 1cf2db2e07..679768a917 100644
--- a/packages/react/src/components/table/sort-button-icon.test.tsx
+++ b/packages/react/src/components/table/sort-button-icon.test.tsx
@@ -1,10 +1,12 @@
 import { shallow } from 'enzyme';
 import { useTheme } from '../../hooks/use-theme';
-import { equisoftTheme } from '../../themes';
 import { SortButtonIcon } from './sort-button-icon';
+import { buildTheme, equisoftThemeCustomization } from '../../themes';
 
 jest.mock('../../hooks/use-theme');
 
+const equisoftTheme = buildTheme(equisoftThemeCustomization);
+
 describe('SortButtonIcon', () => {
     beforeEach(() => {
         jest.mocked(useTheme).mockReturnValue(equisoftTheme);
diff --git a/packages/react/src/components/theme-wrapper/theme-wrapper.test.tsx b/packages/react/src/components/theme-wrapper/theme-wrapper.test.tsx
index 85b80ebb3a..bfd970025d 100644
--- a/packages/react/src/components/theme-wrapper/theme-wrapper.test.tsx
+++ b/packages/react/src/components/theme-wrapper/theme-wrapper.test.tsx
@@ -1,8 +1,8 @@
 import { render, shallow } from 'enzyme';
-import { buildTheme, Button } from '../..';
+import { Button } from '../..';
 import { ShadowWrapper } from '../shadow-wrapper/shadow-wrapper';
 import { ThemeWrapper } from './theme-wrapper';
-import { ThemeCustomization } from '../../themes/theme';
+import { ThemeCustomization } from '../../themes';
 
 describe('Theme Wrapper', () => {
     test('Returns component with default theme', () => {
@@ -25,10 +25,8 @@ describe('Theme Wrapper', () => {
             },
         };
 
-        const builtTheme = buildTheme(themeCustomization);
-
         const tree1 = render(
-            <ThemeWrapper theme={builtTheme}>
+            <ThemeWrapper themeCustomization={themeCustomization}>
                 <Button buttonType="primary" />
             </ThemeWrapper>,
         );
diff --git a/packages/react/src/components/theme-wrapper/theme-wrapper.tsx b/packages/react/src/components/theme-wrapper/theme-wrapper.tsx
index c0528eb5e8..55ac95cda5 100644
--- a/packages/react/src/components/theme-wrapper/theme-wrapper.tsx
+++ b/packages/react/src/components/theme-wrapper/theme-wrapper.tsx
@@ -1,9 +1,13 @@
-import { FunctionComponent, PropsWithChildren, ReactNode } from 'react';
+import { FunctionComponent, PropsWithChildren } from 'react';
 import { ThemeProvider } from 'styled-components';
 import { useStyle } from '../../styles';
-import { equisoftTheme } from '../../theme';
-import { ResolvedTheme } from '../../themes/theme';
+import { buildTheme, equisoftThemeCustomization, ThemeCustomization, TokenContext } from '../../themes';
 import { ShadowWrapper } from '../shadow-wrapper/shadow-wrapper';
+import { DeviceContextProps, useDeviceContext } from '../device-context-provider/device-context-provider';
+
+export interface DisplayPreferences {
+    // User-provided preferences for display (density, contrast, motion, etc.)
+}
 
 export interface ThemeWrapperProps {
     /**
@@ -11,29 +15,54 @@ export interface ThemeWrapperProps {
      * @default false
      */
     isolateStyles?: boolean;
-    theme?: ResolvedTheme;
+    themeCustomization?: ThemeCustomization;
+    displayPreferences?: DisplayPreferences;
+}
+
+// Context values should be added in order of importance. Later values will be applied over earlier values.
+function getTokenContext(
+    deviceContext: DeviceContextProps,
+    // @ts-ignore Future use
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    displayPreferences?: DisplayPreferences,
+): TokenContext[] {
+    const context: TokenContext[] = [];
+
+    if (deviceContext.isMobile) {
+        context.push('mobile');
+    }
+
+    if (deviceContext.isTablet) {
+        context.push('tablet');
+    }
+
+    if (deviceContext.isDesktop) {
+        context.push('desktop');
+    }
+
+    return context;
 }
 
-/**
- * @deprecated Use {@link DesignSystem} instead
- */
 export const ThemeWrapper: FunctionComponent<PropsWithChildren<ThemeWrapperProps>> = ({
     children,
     isolateStyles = false,
-    theme = equisoftTheme,
+    themeCustomization = equisoftThemeCustomization,
+    displayPreferences,
 }) => {
-    let content: ReactNode;
-    if (isolateStyles) {
-        content = <ShadowWrapper>{children}</ShadowWrapper>;
-    } else {
-        content = children;
-    }
+    const deviceContext = useDeviceContext();
+
+    const resolvedTheme = buildTheme(
+        themeCustomization,
+        getTokenContext(deviceContext, displayPreferences),
+    );
 
     useStyle(isolateStyles);
 
     return (
-        <ThemeProvider theme={theme}>
-            {content}
+        <ThemeProvider theme={resolvedTheme}>
+            {isolateStyles
+                ? <ShadowWrapper>{children}</ShadowWrapper>
+                : children}
         </ThemeProvider>
     );
 };
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index dde5511eae..b2e1727176 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -42,9 +42,7 @@ export {
 } from './components/password-creation-input/validation-condition';
 
 // Context
-export { ThemeWrapper } from './components/theme-wrapper/theme-wrapper';
-export { DeviceContextProvider, useDeviceContext } from './components/device-context-provider/device-context-provider';
-export { IntlProvider } from './components/internationalization-provider/internationalization-provider';
+export { useDeviceContext } from './components/device-context-provider/device-context-provider';
 
 // Lists
 export { Listbox, ListboxOption } from './components/listbox/listbox';
@@ -105,9 +103,10 @@ export { ProgressCircle } from './components/progress-circle/progress-circle';
 export { Pagination } from './components/pagination/pagination';
 
 // Themes
-export { equisoftTheme, buildTheme } from './themes';
+export {
+    buildTheme, equisoftThemeCustomization, ResolvedTheme as Theme, ThemeCustomization,
+} from './themes';
 export { injectMainCss } from './styles';
-export { ResolvedTheme as Theme, ThemeCustomization } from './themes/theme';
 
 // Hooks
 export { useTheme } from './hooks/use-theme';
diff --git a/packages/react/src/test-utils/renderer.tsx b/packages/react/src/test-utils/renderer.tsx
index 0480a915ae..17c79eb39c 100644
--- a/packages/react/src/test-utils/renderer.tsx
+++ b/packages/react/src/test-utils/renderer.tsx
@@ -11,11 +11,11 @@ import { ThemeWrapper } from '../components/theme-wrapper/theme-wrapper';
 export const AllProviders: FunctionComponent<PropsWithChildren<DesignSystemProps>> = ({
     children,
     language,
-    theme,
+    themeCustomization,
     staticDevice,
 }) => (
     <MemoryRouter>
-        <DesignSystem language={language} staticDevice={staticDevice} theme={theme}>
+        <DesignSystem language={language} staticDevice={staticDevice} themeCustomization={themeCustomization}>
             {children}
         </DesignSystem>
     </MemoryRouter>
diff --git a/packages/react/src/test-utils/testing-library.tsx b/packages/react/src/test-utils/testing-library.tsx
index 7ed5c4828e..c292baa59e 100644
--- a/packages/react/src/test-utils/testing-library.tsx
+++ b/packages/react/src/test-utils/testing-library.tsx
@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import { DesignSystem, DesignSystemProps } from '../components/design-system';
-import { equisoftTheme } from '../theme';
+import { equisoftThemeCustomization } from '../theme';
 
 export function renderWithProviders(
     ui: Parameters<typeof render>[0],
@@ -12,11 +12,11 @@ export function renderWithProviders(
         isolateStyles,
         language,
         staticDevice,
-        theme,
+        themeCustomization,
     } = {
         isolateStyles: false,
         language: 'fr',
-        theme: equisoftTheme,
+        themeCustomization: equisoftThemeCustomization,
         ...wrapperProps,
     };
     return render(
@@ -29,7 +29,7 @@ export function renderWithProviders(
                         isolateStyles={isolateStyles}
                         language={language}
                         staticDevice={staticDevice}
-                        theme={theme}
+                        themeCustomization={themeCustomization}
                     >
                         {children}
                     </DesignSystem>
diff --git a/packages/react/src/theme.ts b/packages/react/src/theme.ts
index b1bf591787..c7694fb56d 100644
--- a/packages/react/src/theme.ts
+++ b/packages/react/src/theme.ts
@@ -1,3 +1,6 @@
-export { equisoftTheme } from './themes/equisoft';
-export { ResolvedTheme, ThemeCustomization } from './themes/theme';
-export { buildTheme } from './themes/build-theme';
+export {
+    buildTheme,
+    equisoftThemeCustomization,
+    ResolvedTheme,
+    ThemeCustomization,
+} from './themes';
diff --git a/packages/react/src/themes/build-theme.test.ts b/packages/react/src/themes/build-theme.test.ts
index 2cc6aec754..de37b3f3d0 100644
--- a/packages/react/src/themes/build-theme.test.ts
+++ b/packages/react/src/themes/build-theme.test.ts
@@ -3,96 +3,139 @@ import { buildTheme } from './build-theme';
 import { ThemeCustomization } from './theme';
 import { defaultRefTokens } from './tokens';
 
-const customization: ThemeCustomization = {
-    ref: {
-        'color-brand-05': 'red',
-        'color-brand-20': 'green',
-        'color-neutral-02': 'blue',
-    },
-    alias: {
-        'color-content': 'color-brand-05',
-        'color-content-subtle': 'color-brand-20',
-    },
-    component: {
-        'button-primary-background-color': 'color-neutral-02',
-        'button-primary-inverted-background-color': 'color-brand-20',
-        'focus-inside-border-color': 'color-content-subtle',
-    },
-};
-
-const expectedTheme = {
-    ref: {
-        ...defaultRefTokens,
-        'color-brand-05': 'red',
-        'color-brand-20': 'green',
-        'color-neutral-02': 'blue',
-    },
-};
 describe('buildTheme', () => {
-    it('should build the defaultRefTokens theme with the customization provided', () => {
-        const builtTheme = buildTheme(customization);
+    test('custom ref tokens override defaults', () => {
+        const colorName = 'crimson-red';
+        const theme = buildTheme({
+            ref: {
+                'color-brand-50': colorName,
+            },
+        });
 
-        expect(builtTheme.ref).toEqual(expectedTheme.ref);
+        expect(theme.ref['color-brand-50']).toEqual(colorName);
     });
 
-    it('should build the defaultAliasTokens theme with the customization provided', () => {
-        const builtTheme = buildTheme(customization);
+    test('custom alias tokens override defaults', () => {
+        const refTokenName = 'color-white';
+        const theme = buildTheme({
+            alias: {
+                'color-content': refTokenName,
+            },
+        });
 
-        expect(builtTheme.alias).toMatchSnapshot();
+        expect(theme.alias['color-content']).toEqual(defaultRefTokens[refTokenName]);
     });
 
-    it('should build the defaultComponentTokens with a customization of a ComponentToken as an AliasToken', () => {
-        const builtTheme = buildTheme(customization);
+    test('custom component tokens override defaults', () => {
+        const refTokenName = 'color-white';
+        const theme = buildTheme({
+            component: {
+                'text-input-text-color': refTokenName,
+            },
+        });
 
-        expect(builtTheme.component['focus-inside-border-color']).toEqual('green');
+        expect(theme.component['text-input-text-color']).toEqual(defaultRefTokens[refTokenName]);
     });
 
-    it('should build the defaultComponentTokens with a customization of a ComponentToken as a RefToken', () => {
-        const builtTheme = buildTheme(customization);
+    test('contextual values are used when the correct context is active', () => {
+        const customization: ThemeCustomization = {
+            ref: {
+                'font-size-350': '0.875rem',
+                'font-size-400': '1rem',
+            },
+            alias: {
+                'text-body-medium-font-size': 'font-size-350',
+                'text-body-medium-font-size:mobile': 'font-size-400',
+            },
+        };
+
+        const theme = buildTheme(customization, ['mobile']);
 
-        expect(builtTheme.component['button-primary-inverted-background-color']).toEqual('green');
+        expect(theme.alias['text-body-medium-font-size']).toEqual(customization.ref?.['font-size-400']);
     });
 
-    it('should build the defaultComponentTokens with a partial customization', () => {
-        const builtTheme = buildTheme(customization);
+    test('contextual values are not used outside of the correct context', () => {
+        const customization: ThemeCustomization = {
+            ref: {
+                'font-size-350': '0.875rem',
+                'font-size-400': '1rem',
+            },
+            alias: {
+                'text-body-medium-font-size': 'font-size-350',
+                'text-body-medium-font-size:mobile': 'font-size-400',
+            },
+        };
+
+        const theme = buildTheme(customization);
 
-        expect(builtTheme.component['button-primary-border-color']).toEqual('#006296');
+        expect(theme.alias['text-body-medium-font-size']).toEqual(customization.ref?.['font-size-350']);
     });
 
-    it('should log an error for for an unresolved token', () => {
+    test('contextual values are discarded when not used', () => {
+        const customization: ThemeCustomization = {
+            ref: {
+                'font-size-350': '0.875rem',
+                'font-size-400': '1rem',
+            },
+            alias: {
+                'text-body-medium-font-size': 'font-size-350',
+                'text-body-medium-font-size:mobile': 'font-size-400',
+            },
+        };
+
+        const theme = buildTheme(customization);
+
+        // @ts-expect-error-discarded-token-test
+        expect(theme.alias['text-body-medium-font-size:mobile']).toBeUndefined();
+    });
+
+    test('component token values are resolved through aliases', () => {
+        const customization: ThemeCustomization = {
+            ref: {
+                'color-brand-50': 'cadmium-yellow',
+            },
+            alias: {
+                'color-content': 'color-brand-50',
+                'color-content-brand': 'color-content',
+            },
+            component: {
+                'button-primary-background-color': 'color-content-brand',
+            },
+        };
+
+        const theme = buildTheme(customization);
+
+        expect(theme.component['button-primary-background-color']).toEqual('cadmium-yellow');
+    });
+
+    test('logs an error with an invalid token', () => {
         const consoleSpy = jest.spyOn(devConsole, 'error');
         consoleSpy.mockImplementation(() => undefined);
 
-        const token = 'invalid-token';
-        const invalidCustomizationWithUnresolvedToken: ThemeCustomization = {
+        buildTheme({
             component: {
-                // @ts-expect-error-unresolved-token-test-purpose
+                // @ts-expect-error-invalid-token-test
                 'button-primary-background-color': 'invalid-token',
             },
-        };
-
-        buildTheme(invalidCustomizationWithUnresolvedToken);
+        });
 
-        expect(consoleSpy).toHaveBeenCalledWith(`Token '${token}' not found in RefTokens or AliasTokens`);
+        expect(consoleSpy).toHaveBeenCalled();
     });
 
-    it('should log an error for self-referencing AliasToken', () => {
+    test('logs an error with self-referencing token', () => {
         const consoleSpy = jest.spyOn(devConsole, 'error');
         consoleSpy.mockImplementation(() => undefined);
 
-        const token = 'color-content';
-        const invalidCustomizationWithSelfReferenced: ThemeCustomization = {
+        buildTheme({
             alias: {
-                // @ts-expect-error-self-referenced-token-test-purpose
+                // @ts-expect-error-self-referencing-test
                 'color-content': 'color-content',
             },
             component: {
                 'button-primary-background-color': 'color-content',
             },
-        };
-
-        buildTheme(invalidCustomizationWithSelfReferenced);
+        });
 
-        expect(consoleSpy).toHaveBeenCalledWith(`Self-referencing AliasToken detected: '${token}'`);
+        expect(consoleSpy).toHaveBeenCalled();
     });
 });
diff --git a/packages/react/src/themes/build-theme.test.ts.snap b/packages/react/src/themes/build-theme.test.ts.snap
deleted file mode 100644
index 3696a15c3c..0000000000
--- a/packages/react/src/themes/build-theme.test.ts.snap
+++ /dev/null
@@ -1,220 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`buildTheme should build the defaultAliasTokens theme with the customization provided 1`] = `
-{
-  "color-action": "#006296",
-  "color-action-destructive": "#CD2C23",
-  "color-action-destructive-disabled": "#F99D99",
-  "color-action-destructive-hover": "#7B1A15",
-  "color-action-disabled": "green",
-  "color-action-hover": "#003A5A",
-  "color-action-inverse": "#FFFFFF",
-  "color-action-inverse-disabled": "#006296",
-  "color-action-inverse-hover": "green",
-  "color-backdrop-background": "rgb(0 0 0 / 0.75)",
-  "color-backdrop-background-subtle": "rgb(0 0 0 / 0.5)",
-  "color-background": "#FFFFFF",
-  "color-background-brand": "#006296",
-  "color-background-brand-bold": "#012639",
-  "color-background-brand-subtle": "green",
-  "color-background-disabled": "#F1F2F2",
-  "color-background-empty": "#DBDEE1",
-  "color-background-hover": "#DBDEE1",
-  "color-background-indicator-active": "#012639",
-  "color-background-indicator-disabled": "#B7BBC2",
-  "color-background-indicator-selected": "#006296",
-  "color-background-isolated": "blue",
-  "color-background-neutral-bold": "#60666E",
-  "color-background-neutral-bold-disabled": "#B7BBC2",
-  "color-background-neutral-subtle": "#F1F2F2",
-  "color-background-neutral-subtlest": "blue",
-  "color-background-overlay": "#FFFFFF",
-  "color-background-selected": "red",
-  "color-background-selected-hover": "#C2E2F4",
-  "color-border": "#DBDEE1",
-  "color-border-bold": "#878F9A",
-  "color-border-brand": "#006296",
-  "color-border-brand-bold": "#003A5A",
-  "color-border-disabled": "#DBDEE1",
-  "color-border-empty": "#B7BBC2",
-  "color-border-focus-inside": "green",
-  "color-border-focus-inside-inverse": "#006296",
-  "color-border-focus-outside": "#006296",
-  "color-border-focus-outside-inverse": "green",
-  "color-border-hover": "#000000",
-  "color-border-inverse": "#FFFFFF",
-  "color-border-overlay": "#878F9A",
-  "color-border-selected": "#006296",
-  "color-border-subtle": "#F1F2F2",
-  "color-box-shadow": "rgb(0 0 0 / 0.2)",
-  "color-content": "red",
-  "color-content-brand": "#006296",
-  "color-content-disabled": "#B7BBC2",
-  "color-content-hover": "#000000",
-  "color-content-inverse": "#FFFFFF",
-  "color-content-selected": "#003A5A",
-  "color-content-subtle": "green",
-  "color-control-auxiliary": "#60666E",
-  "color-control-auxiliary-checked": "#FFFFFF",
-  "color-control-auxiliary-disabled": "#B7BBC2",
-  "color-control-auxiliary-error": "#CD2C23",
-  "color-control-auxiliary-hover": "#000000",
-  "color-control-auxiliary-selected": "#003A5A",
-  "color-control-auxiliary-success": "#008533",
-  "color-control-background": "#FFFFFF",
-  "color-control-background-checked": "#006296",
-  "color-control-background-disabled": "#F1F2F2",
-  "color-control-background-hover": "#DBDEE1",
-  "color-control-background-selected": "red",
-  "color-control-background-selected-hover": "#C2E2F4",
-  "color-control-border": "#60666E",
-  "color-control-border-checked": "#006296",
-  "color-control-border-disabled": "#B7BBC2",
-  "color-control-border-error": "#CD2C23",
-  "color-control-border-hover": "#000000",
-  "color-control-border-selected": "#006296",
-  "color-control-value": "red",
-  "color-control-value-disabled": "#B7BBC2",
-  "color-control-value-hover": "#000000",
-  "color-feedback-background-alert-bold": "#CD2C23",
-  "color-feedback-background-alert-subtle": "#FAEAE9",
-  "color-feedback-background-alert-subtlest": "#FDF7F6",
-  "color-feedback-background-discovery-bold": "#602FA0",
-  "color-feedback-background-discovery-subtle": "#EFEAF5",
-  "color-feedback-background-discovery-subtlest": "#F9F7FB",
-  "color-feedback-background-informative-bold": "#006296",
-  "color-feedback-background-informative-subtle": "#E0F0F9",
-  "color-feedback-background-informative-subtlest": "#F3F9FD",
-  "color-feedback-background-success-bold": "#008533",
-  "color-feedback-background-success-bold-disabled": "#8ADDA9",
-  "color-feedback-background-success-subtle": "#E1F7EA",
-  "color-feedback-background-success-subtlest": "#F6FBF8",
-  "color-feedback-background-warning-bold": "#F5A200",
-  "color-feedback-background-warning-subtle": "#FFF7E5",
-  "color-feedback-background-warning-subtlest": "#FFFBF5",
-  "color-feedback-border-alert": "#CD2C23",
-  "color-feedback-border-discovery": "#602FA0",
-  "color-feedback-border-informative": "#006296",
-  "color-feedback-border-success": "#008533",
-  "color-feedback-border-warning": "#F5A200",
-  "color-feedback-content-alert": "#7B1A15",
-  "color-feedback-content-discovery": "#3A1C60",
-  "color-feedback-content-informative": "#003A5A",
-  "color-feedback-content-success": "#004F1E",
-  "color-feedback-content-warning": "#664400",
-  "color-link-content": "#006296",
-  "color-link-content-disabled": "#8FCEF0",
-  "color-link-content-hover": "#003A5A",
-  "color-link-content-visited": "#006296",
-  "color-menu-background": "#FFFFFF",
-  "color-menu-border": "#878F9A",
-  "color-menu-item-background": "transparent",
-  "color-menu-item-background-hover": "#DBDEE1",
-  "color-menu-item-content": "red",
-  "color-menu-item-content-disabled": "#B7BBC2",
-  "color-menu-item-content-hover": "#000000",
-  "color-menu-item-subcontent": "green",
-  "text-action-medium-font-family": ""Open Sans", sans-serif",
-  "text-action-medium-font-size": "0.75rem",
-  "text-action-medium-font-weight": "700",
-  "text-action-medium-letter-spacing": "0.2px",
-  "text-action-medium-line-height": "1.5rem",
-  "text-action-medium-transform": "uppercase",
-  "text-action-small-font-family": ""Open Sans", sans-serif",
-  "text-action-small-font-size": "0.6875rem",
-  "text-action-small-font-weight": "700",
-  "text-action-small-letter-spacing": "0.2px",
-  "text-action-small-line-height": "1.5rem",
-  "text-action-small-transform": "uppercase",
-  "text-body-large-font-family": ""Open Sans", sans-serif",
-  "text-body-large-font-size": "1rem",
-  "text-body-large-font-weight": "400",
-  "text-body-large-letter-spacing": "0.2px",
-  "text-body-large-line-height": "1.5rem",
-  "text-body-large-transform": "none",
-  "text-body-medium-font-family": ""Open Sans", sans-serif",
-  "text-body-medium-font-size": "0.875rem",
-  "text-body-medium-font-weight": "400",
-  "text-body-medium-letter-spacing": "0.2px",
-  "text-body-medium-line-height": "1.5rem",
-  "text-body-medium-transform": "none",
-  "text-body-small-font-family": ""Open Sans", sans-serif",
-  "text-body-small-font-size": "0.75rem",
-  "text-body-small-font-weight": "400",
-  "text-body-small-letter-spacing": "0.2px",
-  "text-body-small-line-height": "1.25rem",
-  "text-body-small-transform": "none",
-  "text-caption-medium-font-family": ""Open Sans", sans-serif",
-  "text-caption-medium-font-size": "0.875rem",
-  "text-caption-medium-font-weight": "400",
-  "text-caption-medium-letter-spacing": "0.2px",
-  "text-caption-medium-line-height": "1.5rem",
-  "text-caption-medium-transform": "none",
-  "text-heading-large-font-family": ""Open Sans", sans-serif",
-  "text-heading-large-font-size": "1.5rem",
-  "text-heading-large-font-weight": "600",
-  "text-heading-large-letter-spacing": "0.2px",
-  "text-heading-large-line-height": "2rem",
-  "text-heading-large-transform": "none",
-  "text-heading-medium-font-family": ""Open Sans", sans-serif",
-  "text-heading-medium-font-size": "1.25rem",
-  "text-heading-medium-font-weight": "600",
-  "text-heading-medium-letter-spacing": "0.2px",
-  "text-heading-medium-line-height": "1.75rem",
-  "text-heading-medium-transform": "none",
-  "text-heading-small-font-family": ""Open Sans", sans-serif",
-  "text-heading-small-font-size": "1rem",
-  "text-heading-small-font-weight": "600",
-  "text-heading-small-letter-spacing": "0.2px",
-  "text-heading-small-line-height": "1.5rem",
-  "text-heading-small-transform": "none",
-  "text-heading-xlarge-font-family": ""Open Sans", sans-serif",
-  "text-heading-xlarge-font-size": "2rem",
-  "text-heading-xlarge-font-weight": "600",
-  "text-heading-xlarge-letter-spacing": "0.2px",
-  "text-heading-xlarge-line-height": "2.5rem",
-  "text-heading-xlarge-transform": "none",
-  "text-heading-xsmall-font-family": ""Open Sans", sans-serif",
-  "text-heading-xsmall-font-size": "0.875rem",
-  "text-heading-xsmall-font-weight": "600",
-  "text-heading-xsmall-letter-spacing": "0.2px",
-  "text-heading-xsmall-line-height": "1.25rem",
-  "text-heading-xsmall-transform": "none",
-  "text-highlight-large-font-family": ""Open Sans", sans-serif",
-  "text-highlight-large-font-size": "1.5rem",
-  "text-highlight-large-font-weight": "600",
-  "text-highlight-large-letter-spacing": "0.2px",
-  "text-highlight-large-line-height": "2rem",
-  "text-highlight-large-transform": "none",
-  "text-highlight-medium-font-family": ""Open Sans", sans-serif",
-  "text-highlight-medium-font-size": "1.25rem",
-  "text-highlight-medium-font-weight": "600",
-  "text-highlight-medium-letter-spacing": "0.2px",
-  "text-highlight-medium-line-height": "1.75rem",
-  "text-highlight-medium-transform": "none",
-  "text-highlight-small-font-family": ""Open Sans", sans-serif",
-  "text-highlight-small-font-size": "1rem",
-  "text-highlight-small-font-weight": "600",
-  "text-highlight-small-letter-spacing": "0.2px",
-  "text-highlight-small-line-height": "1.5rem",
-  "text-highlight-small-transform": "none",
-  "text-label-medium-font-family": ""Open Sans", sans-serif",
-  "text-label-medium-font-size": "0.875rem",
-  "text-label-medium-font-weight": "400",
-  "text-label-medium-letter-spacing": "0.2px",
-  "text-label-medium-line-height": "1.5rem",
-  "text-label-medium-transform": "none",
-  "text-label-small-font-family": ""Open Sans", sans-serif",
-  "text-label-small-font-size": "0.75rem",
-  "text-label-small-font-weight": "400",
-  "text-label-small-letter-spacing": "0.2px",
-  "text-label-small-line-height": "1.25rem",
-  "text-label-small-transform": "none",
-  "text-legend-small-font-family": ""Open Sans", sans-serif",
-  "text-legend-small-font-size": "0.75rem",
-  "text-legend-small-font-weight": "400",
-  "text-legend-small-letter-spacing": "0.2px",
-  "text-legend-small-line-height": "1.25rem",
-  "text-legend-small-transform": "none",
-}
-`;
diff --git a/packages/react/src/themes/build-theme.ts b/packages/react/src/themes/build-theme.ts
index 9a5d16e549..7cd50d620a 100644
--- a/packages/react/src/themes/build-theme.ts
+++ b/packages/react/src/themes/build-theme.ts
@@ -2,16 +2,41 @@ import { devConsole } from '../utils/dev-console';
 import { ResolvedTheme, ThemeCustomization, ThemeDeclaration } from './theme';
 import {
     AliasToken,
+    AliasTokenMap,
     ComponentToken,
     defaultAliasTokens,
     defaultComponentTokens,
     defaultRefTokens,
     RefToken,
     ResolvedTokenMap,
-    TokenValue,
+    TokenContext,
+    TokenMap,
     TokenName,
+    TokenValue,
 } from './tokens';
 
+type ContextualizedAliasTokenMap = TokenMap<AliasToken, RefToken | AliasToken>;
+
+interface ContextualizedTheme extends ThemeDeclaration {
+    alias: ContextualizedAliasTokenMap;
+}
+
+const themeCache: {
+    // Inputs
+    themeCustomization: ThemeCustomization | undefined;
+    activeContext: TokenContext[] | undefined;
+    // Build stages
+    customizedTheme: ThemeDeclaration | undefined;
+    contextualizedTheme: ContextualizedTheme | undefined;
+    resolvedTheme: ResolvedTheme | undefined;
+} = {
+    themeCustomization: undefined,
+    activeContext: undefined,
+    customizedTheme: undefined,
+    contextualizedTheme: undefined,
+    resolvedTheme: undefined,
+};
+
 function isRefToken(tokenName: TokenName): tokenName is RefToken {
     return tokenName in defaultRefTokens;
 }
@@ -24,66 +49,125 @@ function isComponentToken(tokenName: TokenName): tokenName is ComponentToken {
     return tokenName in defaultComponentTokens;
 }
 
-function customizeTheme(customization: ThemeCustomization): ThemeDeclaration {
-    return {
+function ensureNoSelfReference<T extends TokenName, U>(
+    tokenName: T,
+    tokenValue: T | U,
+): tokenValue is Exclude<T, typeof tokenName> {
+    if (tokenName === tokenValue) {
+        devConsole.error(`Self-referencing token detected: '${tokenName}'`);
+    }
+    return tokenName !== tokenValue;
+}
+
+function applyCustomization(customization: ThemeCustomization): ThemeDeclaration {
+    const customizedTheme = {
         ref: { ...defaultRefTokens, ...customization.ref },
         alias: { ...defaultAliasTokens, ...customization.alias },
         component: { ...defaultComponentTokens, ...customization.component },
     };
+
+    themeCache.themeCustomization = customizedTheme;
+
+    return customizedTheme;
 }
 
-export function buildTheme(customization: ThemeCustomization): ResolvedTheme {
-    const customizedTheme = customizeTheme(customization);
+function applyContext(theme: ThemeDeclaration, activeContext: TokenContext[]): ContextualizedTheme {
+    const contextualTokens: Partial<{ [Context in TokenContext]: AliasToken[] }> = {};
+    const nonContextualTokens: Partial<ContextualizedAliasTokenMap> = {};
 
-    const resolvedTheme: ResolvedTheme = {
-        ...customizedTheme,
-        component: {} as ResolvedTokenMap<ComponentToken>,
-    };
+    Object.entries(theme.alias).forEach(([contextualTokenName, tokenValue]) => {
+        const [tokenName, tokenContext] = contextualTokenName.split(':') as [AliasToken, TokenContext];
 
-    function resolveToken(token: AliasToken | RefToken): TokenValue {
-        if (isRefToken(token)) {
-            return resolvedTheme.ref[token];
+        if (activeContext.includes(tokenContext)) {
+            if (!contextualTokens[tokenContext]) {
+                contextualTokens[tokenContext] = [];
+            }
+            contextualTokens[tokenContext].push(tokenName);
+        } else if (!tokenContext && ensureNoSelfReference(tokenName, tokenValue)) {
+            nonContextualTokens[tokenName] = tokenValue;
         }
+    });
 
-        if (isAliasToken(token)) {
-            const aliasToken = resolvedTheme.alias[token];
+    const contextResolutions: Partial<AliasTokenMap<AliasToken>> = {};
 
-            if (aliasToken === token) {
-                devConsole.error(`Self-referencing AliasToken detected: '${token}'`);
-                return '';
-            }
+    activeContext.forEach((tokenContext) => {
+        contextualTokens[tokenContext]?.forEach((tokenName) => {
+            const contextualValue = theme.alias[`${tokenName}:${tokenContext}`];
 
-            if (isAliasToken(aliasToken) || isRefToken(aliasToken)) {
-                return resolveToken(aliasToken);
+            if (contextualValue !== undefined && ensureNoSelfReference(tokenName, contextualValue)) {
+                contextResolutions[tokenName] = contextualValue;
             }
-            return aliasToken;
+        });
+    });
+
+    return {
+        ...theme,
+        alias: { ...nonContextualTokens, ...contextResolutions } as ContextualizedAliasTokenMap,
+    };
+}
+
+function resolveToken(theme: ThemeDeclaration, tokenName: RefToken | AliasToken): TokenValue {
+    if (isRefToken(tokenName)) {
+        return theme.ref[tokenName];
+    }
+
+    if (isAliasToken(tokenName)) {
+        const tokenValue = theme.alias[tokenName];
+
+        if (!ensureNoSelfReference(tokenValue, tokenName)) {
+            return '';
+        }
+
+        if (isAliasToken(tokenValue) || isRefToken(tokenValue)) {
+            return resolveToken(theme, tokenValue);
         }
 
-        devConsole.error(`Token '${token}' not found in RefTokens or AliasTokens`);
-        return '';
+        return tokenValue;
+    }
+
+    devConsole.error(`Token '${tokenName}' used as value was not found`);
+    return '';
+}
+
+export function buildTheme(customization: ThemeCustomization, activeContext: TokenContext[] = []): ResolvedTheme {
+    if (themeCache.customizedTheme === undefined || themeCache.themeCustomization !== customization) {
+        themeCache.customizedTheme = applyCustomization(customization);
+        themeCache.themeCustomization = customization;
+        themeCache.contextualizedTheme = undefined;
+        themeCache.resolvedTheme = undefined;
     }
 
-    Object.keys(customizedTheme.alias).forEach((token) => {
-        if (isAliasToken(token)) {
-            const tokenToResolve = customizedTheme.alias[token];
-            if (tokenToResolve) {
-                resolvedTheme.alias[token] = resolveToken(tokenToResolve);
-            } else {
-                devConsole.error(`Token "${token}" is undefined.`);
+    const activeContextHasChanged = themeCache.activeContext?.length !== activeContext.length
+        || themeCache.activeContext.some((tc) => !activeContext.includes(tc));
+
+    if (themeCache.contextualizedTheme === undefined || activeContextHasChanged) {
+        themeCache.contextualizedTheme = applyContext(themeCache.customizedTheme, activeContext);
+        themeCache.activeContext = activeContext;
+        themeCache.resolvedTheme = undefined;
+    }
+
+    if (themeCache.resolvedTheme === undefined) {
+        const resolvedAliasTokens: Partial<ResolvedTokenMap<AliasToken>> = {};
+        const resolvedComponentTokens: Partial<ResolvedTokenMap<ComponentToken>> = {};
+
+        Object.entries(themeCache.contextualizedTheme.alias).forEach(([tokenName, tokenValue]) => {
+            if (isAliasToken(tokenName) && themeCache.contextualizedTheme !== undefined) {
+                resolvedAliasTokens[tokenName] = resolveToken(themeCache.contextualizedTheme, tokenValue);
             }
-        }
-    });
+        });
 
-    Object.keys(customizedTheme.component).forEach((token) => {
-        if (isComponentToken(token)) {
-            const tokenToResolve = customizedTheme.component[token];
-            if (tokenToResolve) {
-                resolvedTheme.component[token] = resolveToken(tokenToResolve);
-            } else {
-                devConsole.error(`Token "${token}" is undefined.`);
+        Object.entries(themeCache.contextualizedTheme.component).forEach(([tokenName, tokenValue]) => {
+            if (isComponentToken(tokenName) && themeCache.contextualizedTheme !== undefined) {
+                resolvedComponentTokens[tokenName] = resolveToken(themeCache.contextualizedTheme, tokenValue);
             }
-        }
-    });
+        });
+
+        themeCache.resolvedTheme = {
+            ref: themeCache.contextualizedTheme.ref,
+            alias: resolvedAliasTokens,
+            component: resolvedComponentTokens,
+        } as ResolvedTheme;
+    }
 
-    return resolvedTheme;
+    return themeCache.resolvedTheme;
 }
diff --git a/packages/react/src/themes/equisoft.test.ts b/packages/react/src/themes/equisoft.test.ts
new file mode 100644
index 0000000000..4671c2411c
--- /dev/null
+++ b/packages/react/src/themes/equisoft.test.ts
@@ -0,0 +1,8 @@
+import { buildTheme } from './build-theme';
+import { equisoftThemeCustomization } from './equisoft';
+
+describe('buildTheme', () => {
+    test('equisoft (default) theme snapshot', () => {
+        expect(buildTheme(equisoftThemeCustomization)).toMatchSnapshot();
+    });
+});
diff --git a/packages/react/src/themes/equisoft.test.ts.snap b/packages/react/src/themes/equisoft.test.ts.snap
new file mode 100644
index 0000000000..ebe0192286
--- /dev/null
+++ b/packages/react/src/themes/equisoft.test.ts.snap
@@ -0,0 +1,1075 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`buildTheme equisoft (default) theme snapshot 1`] = `
+{
+  "alias": {
+    "color-action": "#006296",
+    "color-action-destructive": "#CD2C23",
+    "color-action-destructive-disabled": "#F99D99",
+    "color-action-destructive-hover": "#7B1A15",
+    "color-action-disabled": "#84C6EA",
+    "color-action-hover": "#003A5A",
+    "color-action-inverse": "#FFFFFF",
+    "color-action-inverse-disabled": "#006296",
+    "color-action-inverse-hover": "#84C6EA",
+    "color-backdrop-background": "rgb(0 0 0 / 0.75)",
+    "color-backdrop-background-subtle": "rgb(0 0 0 / 0.5)",
+    "color-background": "#FFFFFF",
+    "color-background-brand": "#006296",
+    "color-background-brand-bold": "#012639",
+    "color-background-brand-subtle": "#84C6EA",
+    "color-background-disabled": "#F1F2F2",
+    "color-background-empty": "#DBDEE1",
+    "color-background-hover": "#DBDEE1",
+    "color-background-indicator-active": "#012639",
+    "color-background-indicator-disabled": "#B7BBC2",
+    "color-background-indicator-selected": "#006296",
+    "color-background-isolated": "#FAFAFA",
+    "color-background-neutral-bold": "#60666E",
+    "color-background-neutral-bold-disabled": "#B7BBC2",
+    "color-background-neutral-subtle": "#F1F2F2",
+    "color-background-neutral-subtlest": "#FAFAFA",
+    "color-background-overlay": "#FFFFFF",
+    "color-background-selected": "#E0F0F9",
+    "color-background-selected-hover": "#C2E2F4",
+    "color-border": "#DBDEE1",
+    "color-border-bold": "#878F9A",
+    "color-border-brand": "#006296",
+    "color-border-brand-bold": "#003A5A",
+    "color-border-disabled": "#DBDEE1",
+    "color-border-empty": "#B7BBC2",
+    "color-border-focus-inside": "#84C6EA",
+    "color-border-focus-inside-inverse": "#006296",
+    "color-border-focus-outside": "#006296",
+    "color-border-focus-outside-inverse": "#84C6EA",
+    "color-border-hover": "#000000",
+    "color-border-inverse": "#FFFFFF",
+    "color-border-overlay": "#878F9A",
+    "color-border-selected": "#006296",
+    "color-border-subtle": "#F1F2F2",
+    "color-box-shadow": "rgb(0 0 0 / 0.2)",
+    "color-content": "#1B1C1E",
+    "color-content-brand": "#006296",
+    "color-content-disabled": "#B7BBC2",
+    "color-content-hover": "#000000",
+    "color-content-inverse": "#FFFFFF",
+    "color-content-selected": "#003A5A",
+    "color-content-subtle": "#60666E",
+    "color-control-auxiliary": "#60666E",
+    "color-control-auxiliary-checked": "#FFFFFF",
+    "color-control-auxiliary-disabled": "#B7BBC2",
+    "color-control-auxiliary-error": "#CD2C23",
+    "color-control-auxiliary-hover": "#000000",
+    "color-control-auxiliary-selected": "#003A5A",
+    "color-control-auxiliary-success": "#008533",
+    "color-control-background": "#FFFFFF",
+    "color-control-background-checked": "#006296",
+    "color-control-background-disabled": "#F1F2F2",
+    "color-control-background-hover": "#DBDEE1",
+    "color-control-background-selected": "#E0F0F9",
+    "color-control-background-selected-hover": "#C2E2F4",
+    "color-control-border": "#60666E",
+    "color-control-border-checked": "#006296",
+    "color-control-border-disabled": "#B7BBC2",
+    "color-control-border-error": "#CD2C23",
+    "color-control-border-hover": "#000000",
+    "color-control-border-selected": "#006296",
+    "color-control-value": "#1B1C1E",
+    "color-control-value-disabled": "#B7BBC2",
+    "color-control-value-hover": "#000000",
+    "color-feedback-background-alert-bold": "#CD2C23",
+    "color-feedback-background-alert-subtle": "#FAEAE9",
+    "color-feedback-background-alert-subtlest": "#FDF7F6",
+    "color-feedback-background-discovery-bold": "#602FA0",
+    "color-feedback-background-discovery-subtle": "#EFEAF5",
+    "color-feedback-background-discovery-subtlest": "#F9F7FB",
+    "color-feedback-background-informative-bold": "#006296",
+    "color-feedback-background-informative-subtle": "#E0F0F9",
+    "color-feedback-background-informative-subtlest": "#F3F9FD",
+    "color-feedback-background-success-bold": "#008533",
+    "color-feedback-background-success-bold-disabled": "#8ADDA9",
+    "color-feedback-background-success-subtle": "#E1F7EA",
+    "color-feedback-background-success-subtlest": "#F6FBF8",
+    "color-feedback-background-warning-bold": "#F5A200",
+    "color-feedback-background-warning-subtle": "#FFF7E5",
+    "color-feedback-background-warning-subtlest": "#FFFBF5",
+    "color-feedback-border-alert": "#CD2C23",
+    "color-feedback-border-discovery": "#602FA0",
+    "color-feedback-border-informative": "#006296",
+    "color-feedback-border-success": "#008533",
+    "color-feedback-border-warning": "#F5A200",
+    "color-feedback-content-alert": "#7B1A15",
+    "color-feedback-content-discovery": "#3A1C60",
+    "color-feedback-content-informative": "#003A5A",
+    "color-feedback-content-success": "#004F1E",
+    "color-feedback-content-warning": "#664400",
+    "color-link-content": "#006296",
+    "color-link-content-disabled": "#8FCEF0",
+    "color-link-content-hover": "#003A5A",
+    "color-link-content-visited": "#006296",
+    "color-menu-background": "#FFFFFF",
+    "color-menu-border": "#878F9A",
+    "color-menu-item-background": "transparent",
+    "color-menu-item-background-hover": "#DBDEE1",
+    "color-menu-item-content": "#1B1C1E",
+    "color-menu-item-content-disabled": "#B7BBC2",
+    "color-menu-item-content-hover": "#000000",
+    "color-menu-item-subcontent": "#60666E",
+    "text-action-medium-font-family": ""Open Sans", sans-serif",
+    "text-action-medium-font-size": "0.75rem",
+    "text-action-medium-font-weight": "700",
+    "text-action-medium-letter-spacing": "0.2px",
+    "text-action-medium-line-height": "1.5rem",
+    "text-action-medium-transform": "uppercase",
+    "text-action-small-font-family": ""Open Sans", sans-serif",
+    "text-action-small-font-size": "0.6875rem",
+    "text-action-small-font-weight": "700",
+    "text-action-small-letter-spacing": "0.2px",
+    "text-action-small-line-height": "1.5rem",
+    "text-action-small-transform": "uppercase",
+    "text-body-large-font-family": ""Open Sans", sans-serif",
+    "text-body-large-font-size": "1rem",
+    "text-body-large-font-weight": "400",
+    "text-body-large-letter-spacing": "0.2px",
+    "text-body-large-line-height": "1.5rem",
+    "text-body-large-transform": "none",
+    "text-body-medium-font-family": ""Open Sans", sans-serif",
+    "text-body-medium-font-size": "0.875rem",
+    "text-body-medium-font-weight": "400",
+    "text-body-medium-letter-spacing": "0.2px",
+    "text-body-medium-line-height": "1.5rem",
+    "text-body-medium-transform": "none",
+    "text-body-small-font-family": ""Open Sans", sans-serif",
+    "text-body-small-font-size": "0.75rem",
+    "text-body-small-font-weight": "400",
+    "text-body-small-letter-spacing": "0.2px",
+    "text-body-small-line-height": "1.25rem",
+    "text-body-small-transform": "none",
+    "text-caption-medium-font-family": ""Open Sans", sans-serif",
+    "text-caption-medium-font-size": "0.875rem",
+    "text-caption-medium-font-weight": "400",
+    "text-caption-medium-letter-spacing": "0.2px",
+    "text-caption-medium-line-height": "1.5rem",
+    "text-caption-medium-transform": "none",
+    "text-heading-large-font-family": ""Open Sans", sans-serif",
+    "text-heading-large-font-size": "1.5rem",
+    "text-heading-large-font-weight": "600",
+    "text-heading-large-letter-spacing": "0.2px",
+    "text-heading-large-line-height": "2rem",
+    "text-heading-large-transform": "none",
+    "text-heading-medium-font-family": ""Open Sans", sans-serif",
+    "text-heading-medium-font-size": "1.25rem",
+    "text-heading-medium-font-weight": "600",
+    "text-heading-medium-letter-spacing": "0.2px",
+    "text-heading-medium-line-height": "1.75rem",
+    "text-heading-medium-transform": "none",
+    "text-heading-small-font-family": ""Open Sans", sans-serif",
+    "text-heading-small-font-size": "1rem",
+    "text-heading-small-font-weight": "600",
+    "text-heading-small-letter-spacing": "0.2px",
+    "text-heading-small-line-height": "1.5rem",
+    "text-heading-small-transform": "none",
+    "text-heading-xlarge-font-family": ""Open Sans", sans-serif",
+    "text-heading-xlarge-font-size": "2rem",
+    "text-heading-xlarge-font-weight": "600",
+    "text-heading-xlarge-letter-spacing": "0.2px",
+    "text-heading-xlarge-line-height": "2.5rem",
+    "text-heading-xlarge-transform": "none",
+    "text-heading-xsmall-font-family": ""Open Sans", sans-serif",
+    "text-heading-xsmall-font-size": "0.875rem",
+    "text-heading-xsmall-font-weight": "600",
+    "text-heading-xsmall-letter-spacing": "0.2px",
+    "text-heading-xsmall-line-height": "1.25rem",
+    "text-heading-xsmall-transform": "none",
+    "text-highlight-large-font-family": ""Open Sans", sans-serif",
+    "text-highlight-large-font-size": "1.5rem",
+    "text-highlight-large-font-weight": "600",
+    "text-highlight-large-letter-spacing": "0.2px",
+    "text-highlight-large-line-height": "2rem",
+    "text-highlight-large-transform": "none",
+    "text-highlight-medium-font-family": ""Open Sans", sans-serif",
+    "text-highlight-medium-font-size": "1.25rem",
+    "text-highlight-medium-font-weight": "600",
+    "text-highlight-medium-letter-spacing": "0.2px",
+    "text-highlight-medium-line-height": "1.75rem",
+    "text-highlight-medium-transform": "none",
+    "text-highlight-small-font-family": ""Open Sans", sans-serif",
+    "text-highlight-small-font-size": "1rem",
+    "text-highlight-small-font-weight": "600",
+    "text-highlight-small-letter-spacing": "0.2px",
+    "text-highlight-small-line-height": "1.5rem",
+    "text-highlight-small-transform": "none",
+    "text-label-medium-font-family": ""Open Sans", sans-serif",
+    "text-label-medium-font-size": "0.875rem",
+    "text-label-medium-font-weight": "400",
+    "text-label-medium-letter-spacing": "0.2px",
+    "text-label-medium-line-height": "1.5rem",
+    "text-label-medium-transform": "none",
+    "text-label-small-font-family": ""Open Sans", sans-serif",
+    "text-label-small-font-size": "0.75rem",
+    "text-label-small-font-weight": "400",
+    "text-label-small-letter-spacing": "0.2px",
+    "text-label-small-line-height": "1.25rem",
+    "text-label-small-transform": "none",
+    "text-legend-small-font-family": ""Open Sans", sans-serif",
+    "text-legend-small-font-size": "0.75rem",
+    "text-legend-small-font-weight": "400",
+    "text-legend-small-letter-spacing": "0.2px",
+    "text-legend-small-line-height": "1.25rem",
+    "text-legend-small-transform": "none",
+  },
+  "component": {
+    "accordion-header-background-color": "#FFFFFF",
+    "accordion-header-border-color": "#DBDEE1",
+    "accordion-header-disabled-background-color": "#F1F2F2",
+    "accordion-header-disabled-border-color": "#DBDEE1",
+    "accordion-header-disabled-icon-color": "#B7BBC2",
+    "accordion-header-disabled-text-color": "#B7BBC2",
+    "accordion-header-hover-background-color": "#DBDEE1",
+    "accordion-header-hover-border-color": "#000000",
+    "accordion-header-hover-text-color": "#000000",
+    "accordion-header-text-color": "#1B1C1E",
+    "accordion-panel-background-color": "#FAFAFA",
+    "accordion-panel-border-color": "#DBDEE1",
+    "accordion-panel-text-color": "#1B1C1E",
+    "avatar-background-color": "#F1F2F2",
+    "avatar-text-color": "#60666E",
+    "badge-background-color": "#CD2C23",
+    "badge-text-color": "#FFFFFF",
+    "bento-menu-separator-color": "#DBDEE1",
+    "breadcrumb-link-active-color": "#1B1C1E",
+    "breadcrumb-link-color": "#60666E",
+    "breadcrumb-link-disabled-color": "#B7BBC2",
+    "breadcrumb-link-hover-color": "#000000",
+    "breadcrumb-separator-color": "#60666E",
+    "button-destructive-primary-background-color": "#CD2C23",
+    "button-destructive-primary-border-color": "#CD2C23",
+    "button-destructive-primary-disabled-background-color": "#F99D99",
+    "button-destructive-primary-disabled-border-color": "#F99D99",
+    "button-destructive-primary-disabled-text-color": "#FFFFFF",
+    "button-destructive-primary-hover-background-color": "#7B1A15",
+    "button-destructive-primary-hover-border-color": "#7B1A15",
+    "button-destructive-primary-hover-text-color": "#FFFFFF",
+    "button-destructive-primary-inverted-background-color": "#FFFFFF",
+    "button-destructive-primary-inverted-border-color": "#FFFFFF",
+    "button-destructive-primary-inverted-disabled-background-color": "#FFFFFF",
+    "button-destructive-primary-inverted-disabled-border-color": "#FFFFFF",
+    "button-destructive-primary-inverted-disabled-text-color": "#F99D99",
+    "button-destructive-primary-inverted-hover-background-color": "#FFFFFF",
+    "button-destructive-primary-inverted-hover-border-color": "#FFFFFF",
+    "button-destructive-primary-inverted-hover-text-color": "#7B1A15",
+    "button-destructive-primary-inverted-text-color": "#CD2C23",
+    "button-destructive-primary-text-color": "#FFFFFF",
+    "button-destructive-secondary-background-color": "transparent",
+    "button-destructive-secondary-border-color": "#CD2C23",
+    "button-destructive-secondary-disabled-background-color": "transparent",
+    "button-destructive-secondary-disabled-border-color": "#F99D99",
+    "button-destructive-secondary-disabled-text-color": "#F99D99",
+    "button-destructive-secondary-hover-background-color": "transparent",
+    "button-destructive-secondary-hover-border-color": "#7B1A15",
+    "button-destructive-secondary-hover-text-color": "#7B1A15",
+    "button-destructive-secondary-inverted-background-color": "transparent",
+    "button-destructive-secondary-inverted-border-color": "#CD2C23",
+    "button-destructive-secondary-inverted-disabled-background-color": "transparent",
+    "button-destructive-secondary-inverted-disabled-border-color": "#F99D99",
+    "button-destructive-secondary-inverted-disabled-text-color": "#F99D99",
+    "button-destructive-secondary-inverted-hover-background-color": "transparent",
+    "button-destructive-secondary-inverted-hover-border-color": "#7B1A15",
+    "button-destructive-secondary-inverted-hover-text-color": "#7B1A15",
+    "button-destructive-secondary-inverted-text-color": "#CD2C23",
+    "button-destructive-secondary-text-color": "#CD2C23",
+    "button-destructive-tertiary-background-color": "transparent",
+    "button-destructive-tertiary-border-color": "transparent",
+    "button-destructive-tertiary-disabled-background-color": "transparent",
+    "button-destructive-tertiary-disabled-border-color": "transparent",
+    "button-destructive-tertiary-disabled-text-color": "#F99D99",
+    "button-destructive-tertiary-hover-background-color": "#FAEAE9",
+    "button-destructive-tertiary-hover-border-color": "transparent",
+    "button-destructive-tertiary-hover-text-color": "#7B1A15",
+    "button-destructive-tertiary-inverted-background-color": "transparent",
+    "button-destructive-tertiary-inverted-border-color": "transparent",
+    "button-destructive-tertiary-inverted-disabled-background-color": "transparent",
+    "button-destructive-tertiary-inverted-disabled-border-color": "transparent",
+    "button-destructive-tertiary-inverted-disabled-text-color": "#F99D99",
+    "button-destructive-tertiary-inverted-hover-background-color": "#FAEAE9",
+    "button-destructive-tertiary-inverted-hover-border-color": "transparent",
+    "button-destructive-tertiary-inverted-hover-text-color": "#7B1A15",
+    "button-destructive-tertiary-inverted-text-color": "#CD2C23",
+    "button-destructive-tertiary-text-color": "#CD2C23",
+    "button-input-background-color": "#FFFFFF",
+    "button-input-border-color": "#60666E",
+    "button-input-disabled-background-color": "#F1F2F2",
+    "button-input-disabled-border-color": "#B7BBC2",
+    "button-input-disabled-text-color": "#B7BBC2",
+    "button-input-hover-background-color": "#DBDEE1",
+    "button-input-hover-border-color": "#000000",
+    "button-input-hover-text-color": "#000000",
+    "button-input-text-color": "#60666E",
+    "button-primary-background-color": "#006296",
+    "button-primary-border-color": "#006296",
+    "button-primary-disabled-background-color": "#84C6EA",
+    "button-primary-disabled-border-color": "#84C6EA",
+    "button-primary-disabled-text-color": "#FFFFFF",
+    "button-primary-hover-background-color": "#003A5A",
+    "button-primary-hover-border-color": "#003A5A",
+    "button-primary-hover-text-color": "#FFFFFF",
+    "button-primary-inverted-background-color": "#FFFFFF",
+    "button-primary-inverted-border-color": "#FFFFFF",
+    "button-primary-inverted-disabled-background-color": "#006296",
+    "button-primary-inverted-disabled-border-color": "#006296",
+    "button-primary-inverted-disabled-text-color": "#84C6EA",
+    "button-primary-inverted-hover-background-color": "#84C6EA",
+    "button-primary-inverted-hover-border-color": "#84C6EA",
+    "button-primary-inverted-hover-text-color": "#003A5A",
+    "button-primary-inverted-text-color": "#006296",
+    "button-primary-text-color": "#FFFFFF",
+    "button-secondary-background-color": "transparent",
+    "button-secondary-border-color": "#006296",
+    "button-secondary-disabled-background-color": "transparent",
+    "button-secondary-disabled-border-color": "#84C6EA",
+    "button-secondary-disabled-text-color": "#84C6EA",
+    "button-secondary-hover-background-color": "transparent",
+    "button-secondary-hover-border-color": "#003A5A",
+    "button-secondary-hover-text-color": "#003A5A",
+    "button-secondary-inverted-background-color": "transparent",
+    "button-secondary-inverted-border-color": "#FFFFFF",
+    "button-secondary-inverted-disabled-background-color": "transparent",
+    "button-secondary-inverted-disabled-border-color": "#006296",
+    "button-secondary-inverted-disabled-text-color": "#006296",
+    "button-secondary-inverted-hover-background-color": "transparent",
+    "button-secondary-inverted-hover-border-color": "#84C6EA",
+    "button-secondary-inverted-hover-text-color": "#84C6EA",
+    "button-secondary-inverted-text-color": "#FFFFFF",
+    "button-secondary-text-color": "#006296",
+    "button-tertiary-background-color": "transparent",
+    "button-tertiary-border-color": "transparent",
+    "button-tertiary-disabled-background-color": "transparent",
+    "button-tertiary-disabled-border-color": "transparent",
+    "button-tertiary-disabled-text-color": "#B7BBC2",
+    "button-tertiary-hover-background-color": "rgb(0 0 0 / 0.15)",
+    "button-tertiary-hover-border-color": "transparent",
+    "button-tertiary-hover-text-color": "#000000",
+    "button-tertiary-inverted-background-color": "transparent",
+    "button-tertiary-inverted-border-color": "transparent",
+    "button-tertiary-inverted-disabled-background-color": "transparent",
+    "button-tertiary-inverted-disabled-border-color": "transparent",
+    "button-tertiary-inverted-disabled-text-color": "#006296",
+    "button-tertiary-inverted-hover-background-color": "rgb(0 0 0 / 0.5)",
+    "button-tertiary-inverted-hover-border-color": "transparent",
+    "button-tertiary-inverted-hover-text-color": "#FFFFFF",
+    "button-tertiary-inverted-text-color": "#FFFFFF",
+    "button-tertiary-text-color": "#60666E",
+    "card-background-color": "#FFFFFF",
+    "card-border-color": "#F1F2F2",
+    "card-box-shadow-color": "rgb(0 0 0 / 0.2)",
+    "card-link-border-color": "#878F9A",
+    "card-link-hover-background-color": "#DBDEE1",
+    "card-link-hover-border-color": "#000000",
+    "card-text-color": "#1B1C1E",
+    "carousel-dot-border-color": "transparent",
+    "carousel-dot-selected-background-color": "#006296",
+    "carousel-dot-unselected-background-color": "#DBDEE1",
+    "checkbox-checked-background-color": "#006296",
+    "checkbox-checked-border-color": "#006296",
+    "checkbox-checked-icon-color": "#FFFFFF",
+    "checkbox-disabled-background-color": "#F1F2F2",
+    "checkbox-disabled-border-color": "#B7BBC2",
+    "checkbox-error-border-color": "#CD2C23",
+    "checkbox-hover-background-color": "#DBDEE1",
+    "checkbox-hover-border-color": "#000000",
+    "checkbox-unchecked-background-color": "#FFFFFF",
+    "checkbox-unchecked-border-color": "#60666E",
+    "chooser-background-color": "#FFFFFF",
+    "chooser-border-color": "#60666E",
+    "chooser-disabled-background-color": "#F1F2F2",
+    "chooser-disabled-border-color": "#B7BBC2",
+    "chooser-disabled-text-color": "#B7BBC2",
+    "chooser-hover-background-color": "#DBDEE1",
+    "chooser-hover-border-color": "#000000",
+    "chooser-hover-text-color": "#000000",
+    "chooser-selected-background-color": "#E0F0F9",
+    "chooser-selected-border-color": "#006296",
+    "chooser-selected-text-color": "#003A5A",
+    "chooser-text-color": "#60666E",
+    "combobox-arrow-button-background-color": "transparent",
+    "combobox-arrow-button-disabled-icon-color": "#B7BBC2",
+    "combobox-arrow-button-hover-background-color": "transparent",
+    "combobox-arrow-button-icon-color": "#60666E",
+    "combobox-background-color": "#FFFFFF",
+    "combobox-border-color": "#60666E",
+    "combobox-clear-button-border-right-color": "#60666E",
+    "combobox-clear-button-disabled-icon-color": "#B7BBC2",
+    "combobox-clear-button-icon-color": "#60666E",
+    "combobox-disabled-background-color": "#F1F2F2",
+    "combobox-disabled-border-color": "#B7BBC2",
+    "combobox-disabled-text-color": "#B7BBC2",
+    "combobox-error-border-color": "#CD2C23",
+    "combobox-placeholder-text-color": "#60666E",
+    "datepicker-backdrop-color": "rgb(0 0 0 / 0.5)",
+    "datepicker-background-color": "#FFFFFF",
+    "datepicker-border-color": "#878F9A",
+    "datepicker-box-shadow-color": "rgb(0 0 0 / 0.2)",
+    "datepicker-day-background-color": "transparent",
+    "datepicker-day-border-color": "transparent",
+    "datepicker-day-disabled-text-color": "#B7BBC2",
+    "datepicker-day-hover-background-color": "#DBDEE1",
+    "datepicker-day-outside-month-text-color": "#60666E",
+    "datepicker-day-selected-background-color": "#E0F0F9",
+    "datepicker-day-selected-border-color": "#006296",
+    "datepicker-day-selected-outside-month-background-color": "#E0F0F9",
+    "datepicker-day-selected-outside-month-border-color": "#006296",
+    "datepicker-day-selected-outside-month-text-color": "#003A5A",
+    "datepicker-day-selected-text-color": "#003A5A",
+    "datepicker-day-text-color": "#1B1C1E",
+    "datepicker-day-today-text-color": "#003A5A",
+    "datepicker-header-background-color": "transparent",
+    "disclosure-background-color": "#FFFFFF",
+    "disclosure-border-color": "#878F9A",
+    "disclosure-box-shadow-color": "rgb(0 0 0 / 0.2)",
+    "disclosure-text-color": "#1B1C1E",
+    "dropdown-list-arrow-color": "#60666E",
+    "dropdown-list-arrow-disabled-color": "#B7BBC2",
+    "dropdown-list-input-background-color": "#FFFFFF",
+    "dropdown-list-input-border-color": "#60666E",
+    "dropdown-list-input-disabled-background-color": "#F1F2F2",
+    "dropdown-list-input-disabled-border-color": "#B7BBC2",
+    "dropdown-list-input-disabled-text-color": "#B7BBC2",
+    "dropdown-list-input-error-border-color": "#CD2C23",
+    "dropdown-list-input-icon-color": "#60666E",
+    "dropdown-menu-background-color": "#FFFFFF",
+    "dropdown-menu-border-color": "#878F9A",
+    "dropdown-menu-box-shadow-color": "rgb(0 0 0 / 0.2)",
+    "dropdown-menu-external-item-disabled-text-color": "#B7BBC2",
+    "dropdown-menu-external-item-hover-background-color": "#DBDEE1",
+    "dropdown-menu-external-item-text-color": "#1B1C1E",
+    "dropdown-menu-external-item-visited-icon-color": "#006296",
+    "dropdown-menu-external-item-visited-text-color": "#006296",
+    "dropdown-menu-group-border-color": "#DBDEE1",
+    "dropdown-menu-item-content-description-text-color": "#60666E",
+    "dropdown-menu-item-content-icon-background-color": "#F1F2F2",
+    "dropdown-menu-item-content-icon-border-color": "#DBDEE1",
+    "dropdown-menu-list-item-text-color": "#1B1C1E",
+    "dropdown-menu-nav-item-disabled-background-color": "transparent",
+    "dropdown-menu-nav-item-disabled-icon-color": "#B7BBC2",
+    "dropdown-menu-nav-item-disabled-text-color": "#B7BBC2",
+    "dropdown-menu-nav-item-external-link-icon-color": "#1B1C1E",
+    "dropdown-menu-nav-item-external-link-text-color": "#1B1C1E",
+    "dropdown-menu-nav-item-hover-background-color": "#DBDEE1",
+    "dropdown-menu-nav-item-text-color": "#1B1C1E",
+    "dropdown-menu-text-color": "#1B1C1E",
+    "external-link-visited-text-color": "#006296",
+    "field-error-text-color": "#CD2C23",
+    "field-hint-text-color": "#60666E",
+    "field-input-border-color": "#60666E",
+    "field-input-error-border-color": "#CD2C23",
+    "focus-inside-border-color": "#84C6EA",
+    "focus-inverted-inside-border-color": "#006296",
+    "focus-inverted-outside-border-color": "#84C6EA",
+    "focus-outside-border-color": "#006296",
+    "global-banner-alert-action-button-border-color": "#FFFFFF",
+    "global-banner-alert-action-button-hover-border-color": "rgb(255 255 255 / 0.5)",
+    "global-banner-alert-action-button-hover-text-color": "rgb(255 255 255 / 0.5)",
+    "global-banner-alert-action-button-text-color": "#FFFFFF",
+    "global-banner-alert-background-color": "#CD2C23",
+    "global-banner-alert-text-color": "#FFFFFF",
+    "global-banner-discovery-action-button-border-color": "#FFFFFF",
+    "global-banner-discovery-action-button-hover-border-color": "rgb(255 255 255 / 0.5)",
+    "global-banner-discovery-action-button-hover-text-color": "rgb(255 255 255 / 0.5)",
+    "global-banner-discovery-action-button-text-color": "#FFFFFF",
+    "global-banner-discovery-background-color": "#602FA0",
+    "global-banner-discovery-text-color": "#FFFFFF",
+    "global-banner-neutral-action-button-border-color": "#FFFFFF",
+    "global-banner-neutral-action-button-hover-border-color": "rgb(255 255 255 / 0.5)",
+    "global-banner-neutral-action-button-hover-text-color": "rgb(255 255 255 / 0.5)",
+    "global-banner-neutral-action-button-text-color": "#FFFFFF",
+    "global-banner-neutral-background-color": "#60666E",
+    "global-banner-neutral-text-color": "#FFFFFF",
+    "global-banner-warning-action-button-border-color": "#1B1C1E",
+    "global-banner-warning-action-button-hover-border-color": "rgb(0 0 0 / 0.6)",
+    "global-banner-warning-action-button-hover-text-color": "rgb(0 0 0 / 0.6)",
+    "global-banner-warning-action-button-text-color": "#1B1C1E",
+    "global-banner-warning-background-color": "#F5A200",
+    "global-banner-warning-text-color": "#1B1C1E",
+    "global-header-background-color": "#012639",
+    "global-header-content-text-color": "#FFFFFF",
+    "global-header-logo-content-text-color": "#FFFFFF",
+    "global-header-logo-title-separator-color": "#003A5A",
+    "global-navigation-background-color": "#FFFFFF",
+    "global-navigation-box-shadow-color": "rgb(0 0 0 / 0.2)",
+    "global-navigation-item-hover-background-color": "#DBDEE1",
+    "global-navigation-item-hover-text-color": "#000000",
+    "global-navigation-item-selected-background-color": "#E0F0F9",
+    "global-navigation-item-selected-text-color": "#003A5A",
+    "global-navigation-item-text-color": "#60666E",
+    "global-navigation-separator-border-color": "#DBDEE1",
+    "heading-subtitle-text-color": "#60666E",
+    "heading-text-color": "#1B1C1E",
+    "label-text-color": "#1B1C1E",
+    "legend-disabled-text-color": "#B7BBC2",
+    "legend-item-bullet-color": "#84C6EA",
+    "legend-item-description-text-color": "#60666E",
+    "legend-text-color": "#1B1C1E",
+    "link-disabled-icon-color": "#8FCEF0",
+    "link-disabled-text-color": "#8FCEF0",
+    "link-hover-icon-color": "#003A5A",
+    "link-hover-text-color": "#003A5A",
+    "link-icon-color": "#006296",
+    "link-text-color": "#006296",
+    "link-visited-icon-color": "#006296",
+    "link-visited-text-color": "#006296",
+    "listbox-background-color": "#FFFFFF",
+    "listbox-border-color": "#878F9A",
+    "listbox-box-shadow-depth-color": "rgb(0 0 0 / 0.2)",
+    "listbox-item-disabled-background-color": "transparent",
+    "listbox-item-disabled-text-color": "#B7BBC2",
+    "listbox-item-hover-background-color": "#DBDEE1",
+    "listbox-item-indicator-selected-color": "#006296",
+    "listbox-item-subcontent-disabled-text-color": "#B7BBC2",
+    "listbox-item-subcontent-text-color": "#60666E",
+    "listbox-item-text-color": "#1B1C1E",
+    "lozenge-alert-background-color": "#CD2C23",
+    "lozenge-alert-border-color": "#CD2C23",
+    "lozenge-alert-subtle-background-color": "#FAEAE9",
+    "lozenge-alert-subtle-border-color": "#FAEAE9",
+    "lozenge-alert-subtle-text-color": "#7B1A15",
+    "lozenge-alert-text-color": "#FFFFFF",
+    "lozenge-discovery-background-color": "#602FA0",
+    "lozenge-discovery-border-color": "#602FA0",
+    "lozenge-discovery-subtle-background-color": "#EFEAF5",
+    "lozenge-discovery-subtle-border-color": "#EFEAF5",
+    "lozenge-discovery-subtle-text-color": "#3A1C60",
+    "lozenge-discovery-text-color": "#FFFFFF",
+    "lozenge-info-background-color": "#006296",
+    "lozenge-info-border-color": "#006296",
+    "lozenge-info-subtle-background-color": "#E0F0F9",
+    "lozenge-info-subtle-border-color": "#E0F0F9",
+    "lozenge-info-subtle-text-color": "#003A5A",
+    "lozenge-info-text-color": "#FFFFFF",
+    "lozenge-neutral-background-color": "#60666E",
+    "lozenge-neutral-border-color": "#60666E",
+    "lozenge-neutral-subtle-background-color": "#F1F2F2",
+    "lozenge-neutral-subtle-border-color": "#F1F2F2",
+    "lozenge-neutral-subtle-text-color": "#60666E",
+    "lozenge-neutral-text-color": "#FFFFFF",
+    "lozenge-success-background-color": "#008533",
+    "lozenge-success-border-color": "#008533",
+    "lozenge-success-subtle-background-color": "#E1F7EA",
+    "lozenge-success-subtle-border-color": "#E1F7EA",
+    "lozenge-success-subtle-text-color": "#004F1E",
+    "lozenge-success-text-color": "#FFFFFF",
+    "lozenge-warning-background-color": "#F5A200",
+    "lozenge-warning-border-color": "#F5A200",
+    "lozenge-warning-subtle-background-color": "#FFF7E5",
+    "lozenge-warning-subtle-border-color": "#FFF7E5",
+    "lozenge-warning-subtle-text-color": "#664400",
+    "lozenge-warning-text-color": "#1B1C1E",
+    "menu-background-color": "#FFFFFF",
+    "menu-border-color": "#878F9A",
+    "menu-box-shadow-color": "rgb(0 0 0 / 0.2)",
+    "menu-group-text-color": "#60666E",
+    "menu-item-disabled-text-color": "#B7BBC2",
+    "menu-item-hover-background-color": "#DBDEE1",
+    "menu-item-hover-icon-color": "#000000",
+    "menu-item-hover-text-color": "#000000",
+    "menu-item-icon-color": "#1B1C1E",
+    "menu-item-text-color": "#1B1C1E",
+    "menu-submenu-background-color": "#FFFFFF",
+    "menu-submenu-border-color": "#878F9A",
+    "menu-submenu-box-shadow-color": "rgb(0 0 0 / 0.2)",
+    "modal-backdrop-background-color": "rgb(0 0 0 / 0.75)",
+    "modal-background-color": "#FFFFFF",
+    "modal-border-color": "#878F9A",
+    "modal-dialog-alert-icon-color": "#7B1A15",
+    "nav-list-background-color": "#FFFFFF",
+    "nav-list-border-color": "#878F9A",
+    "nav-list-box-shadow-color": "rgb(0 0 0 / 0.2)",
+    "nav-list-item-disabled-text-color": "#B7BBC2",
+    "nav-list-item-hover-background-color": "#DBDEE1",
+    "nav-list-item-icon-color": "#1B1C1E",
+    "nav-list-item-icon-hover-color": "#000000",
+    "nav-list-item-text-color": "#1B1C1E",
+    "nav-list-item-text-hover-color": "#000000",
+    "numeric-input-background-color": "#FFFFFF",
+    "numeric-input-border-color": "#60666E",
+    "numeric-input-disabled-adornment-text-color": "#B7BBC2",
+    "numeric-input-disabled-background-color": "#F1F2F2",
+    "numeric-input-disabled-border-color": "#B7BBC2",
+    "numeric-input-error-border-color": "#CD2C23",
+    "pagination-page-background-color": "transparent",
+    "pagination-page-hover-background-color": "#DBDEE1",
+    "pagination-page-selected-background-color": "#E0F0F9",
+    "pagination-page-selected-border-color": "#006296",
+    "pagination-page-selected-hover-background-color": "#E0F0F9",
+    "pagination-page-selected-text-color": "#003A5A",
+    "pagination-page-text-color": "#60666E",
+    "password-rule-empty-text-color": "#60666E",
+    "password-rule-error-text-color": "#CD2C23",
+    "password-rule-success-text-color": "#008533",
+    "password-strength-label-text-color": "#60666E",
+    "password-strength-meter-empty-color": "#DBDEE1",
+    "password-strength-meter-fair-color": "#F5A200",
+    "password-strength-meter-good-color": "#008533",
+    "password-strength-meter-strong-color": "#004F1E",
+    "password-strength-meter-weak-color": "#CD2C23",
+    "phone-input-background-color": "transparent",
+    "phone-input-mask-text-color": "#60666E",
+    "progress-circle-empty-track-color": "#DBDEE1",
+    "progress-circle-label-text-color": "#1B1C1E",
+    "progress-circle-result-text-color": "#1B1C1E",
+    "progress-circular-color": "#006296",
+    "progress-circular-inverted-color": "#FFFFFF",
+    "progress-indicator-empty-track-color": "#DBDEE1",
+    "progress-indicator-label-text-color": "#1B1C1E",
+    "progress-tracker-bridge-empty-background-color": "#DBDEE1",
+    "progress-tracker-bridge-filled-background-color": "#006296",
+    "progress-tracker-notification-badge-color": "#FFFFFF",
+    "progress-tracker-notification-badge-fill-color": "#CD2C23",
+    "progress-tracker-step-completed-background-color": "#006296",
+    "progress-tracker-step-completed-border-color": "#006296",
+    "progress-tracker-step-completed-label-text-color": "#006296",
+    "progress-tracker-step-completed-text-color": "#FFFFFF",
+    "progress-tracker-step-current-border-color": "#006296",
+    "progress-tracker-step-current-label-text-color": "#003A5A",
+    "progress-tracker-step-current-text-color": "#003A5A",
+    "progress-tracker-step-todo-background-color": "#FFFFFF",
+    "progress-tracker-step-todo-text-color": "#1B1C1E",
+    "progress-tracker-step-uncompleted-border-color": "#B7BBC2",
+    "progress-tracker-step-uncompleted-label-text-color": "#60666E",
+    "progress-tracker-step-uncompleted-text-color": "#1B1C1E",
+    "radio-button-background-color": "#FFFFFF",
+    "radio-button-border-color": "#60666E",
+    "radio-button-checked-background-color": "#006296",
+    "radio-button-checked-border-color": "#006296",
+    "radio-button-checked-dot-color": "#006296",
+    "radio-button-disabled-background-color": "#F1F2F2",
+    "radio-button-disabled-border-color": "#B7BBC2",
+    "radio-button-disabled-checked-dot-color": "#B7BBC2",
+    "radio-button-disabled-hover-border-color": "#B7BBC2",
+    "radio-button-disabled-label-color": "#B7BBC2",
+    "radio-button-group-legend-text-color": "#1B1C1E",
+    "radio-button-hover-border-color": "#000000",
+    "radio-card-background-color": "#FFFFFF",
+    "radio-card-border-color": "#60666E",
+    "radio-card-disabled-background-color": "#F1F2F2",
+    "radio-card-disabled-border-color": "#B7BBC2",
+    "radio-card-disabled-text-color": "#B7BBC2",
+    "radio-card-hover-background-color": "#DBDEE1",
+    "radio-card-hover-border-color": "#000000",
+    "radio-card-hover-text-color": "#000000",
+    "radio-card-selected-background-color": "#E0F0F9",
+    "radio-card-selected-border-color": "#006296",
+    "radio-card-text-color": "#1B1C1E",
+    "route-link-disabled-text-color": "#8FCEF0",
+    "route-link-hover-text-color": "#003A5A",
+    "route-link-text-color": "#006296",
+    "route-link-visited-text-color": "#006296",
+    "search-input-disabled-icon-color": "#B7BBC2",
+    "search-input-icon-color": "#60666E",
+    "search-input-label-text-color": "#60666E",
+    "search-input-reset-button-background-color": "transparent",
+    "search-input-reset-button-border-color": "transparent",
+    "sectional-banner-alert-background-color": "#FDF7F6",
+    "sectional-banner-alert-border-color": "#CD2C23",
+    "sectional-banner-alert-icon-color": "#7B1A15",
+    "sectional-banner-discovery-background-color": "#F9F7FB",
+    "sectional-banner-discovery-border-color": "#602FA0",
+    "sectional-banner-discovery-icon-color": "#3A1C60",
+    "sectional-banner-info-background-color": "#F3F9FD",
+    "sectional-banner-info-border-color": "#006296",
+    "sectional-banner-info-icon-color": "#003A5A",
+    "sectional-banner-neutral-background-color": "#FAFAFA",
+    "sectional-banner-neutral-border-color": "#878F9A",
+    "sectional-banner-neutral-icon-color": "#60666E",
+    "sectional-banner-success-background-color": "#F6FBF8",
+    "sectional-banner-success-border-color": "#008533",
+    "sectional-banner-success-icon-color": "#004F1E",
+    "sectional-banner-warning-background-color": "#FFFBF5",
+    "sectional-banner-warning-border-color": "#F5A200",
+    "sectional-banner-warning-icon-color": "#664400",
+    "segmented-control-background-color": "transparent",
+    "segmented-control-border-color": "transparent",
+    "segmented-control-disabled-background-color": "#F1F2F2",
+    "segmented-control-disabled-border-color": "#B7BBC2",
+    "segmented-control-disabled-text-color": "#B7BBC2",
+    "segmented-control-hover-background-color": "rgb(0 0 0 / 0.05)",
+    "segmented-control-hover-border-color": "#000000",
+    "segmented-control-hover-text-color": "#000000",
+    "segmented-control-list-background-color": "rgb(0 0 0 / 0.05)",
+    "segmented-control-pressed-background-color": "#E0F0F9",
+    "segmented-control-pressed-border-color": "#006296",
+    "segmented-control-pressed-hover-background-color": "#C2E2F4",
+    "segmented-control-pressed-hover-text-color": "#003A5A",
+    "segmented-control-pressed-text-color": "#003A5A",
+    "segmented-control-text-color": "#60666E",
+    "side-drawer-background-color": "#FFFFFF",
+    "side-drawer-box-shadow-color": "rgb(0 0 0 / 0.2)",
+    "skip-link-background-color": "#FFFFFF",
+    "skip-link-text-color": "#006296",
+    "slider-thumb-background-color": "#FFFFFF",
+    "slider-thumb-border-color": "#006296",
+    "slider-thumb-disabled-border-color": "#B7BBC2",
+    "slider-track-empty-background-color": "#DBDEE1",
+    "slider-track-empty-disabled-background-color": "#F1F2F2",
+    "slider-track-empty-label-text-color": "#60666E",
+    "slider-track-empty-mark-background-color": "#60666E",
+    "slider-track-empty-mark-disabled-background-color": "#B7BBC2",
+    "slider-track-filled-background-color": "#006296",
+    "slider-track-filled-disabled-background-color": "#B7BBC2",
+    "slider-track-filled-mark-background-color": "#FFFFFF",
+    "slider-track-filled-mark-disabled-background-color": "#FFFFFF",
+    "spinner-fill-color": "#006296",
+    "status-circle-blocked-background-color": "#CD2C23",
+    "status-circle-disabled-background-color": "#F1F2F2",
+    "status-circle-disabled-border-color": "#DBDEE1",
+    "status-circle-enabled-background-color": "#008533",
+    "status-disabled-text-color": "#B7BBC2",
+    "stepper-button-background-color": "#FFFFFF",
+    "stepper-button-border-color": "#60666E",
+    "stepper-button-disabled-background-color": "#F1F2F2",
+    "stepper-button-disabled-border-color": "#B7BBC2",
+    "stepper-button-disabled-text-color": "#B7BBC2",
+    "stepper-button-hover-background-color": "#DBDEE1",
+    "stepper-button-text-color": "#60666E",
+    "tab-border-bottom-color": "#DBDEE1",
+    "tab-button-active-text-color": "#1B1C1E",
+    "tab-button-hover-text-color": "#000000",
+    "tab-button-icon-color": "#60666E",
+    "tab-button-indicator-active-background-color": "#012639",
+    "tab-button-indicator-hover-background-color": "#DBDEE1",
+    "tab-button-indicator-selected-background-color": "#006296",
+    "tab-button-selected-text-color": "#1B1C1E",
+    "tab-button-text-color": "#60666E",
+    "tab-global-button-background-color": "transparent",
+    "tab-global-button-selected-background-color": "transparent",
+    "tab-global-list-background-color": "#FFFFFF",
+    "tab-scroll-button-hover-background-color": "#DBDEE1",
+    "tab-section-background-color": "#FFFFFF",
+    "tab-section-border-color": "#DBDEE1",
+    "tab-section-box-shadow-color": "rgb(0 0 0 / 0.2)",
+    "tab-section-button-background-color": "#FFFFFF",
+    "tab-section-button-selected-background-color": "#FFFFFF",
+    "tab-section-list-background-color": "#F1F2F2",
+    "table-background-color": "transparent",
+    "table-body-background-color": "transparent",
+    "table-cell-hover-background-color": "#DBDEE1",
+    "table-cell-number-text-color": "#60666E",
+    "table-footer-background-color": "#FFFFFF",
+    "table-footer-border-color": "#DBDEE1",
+    "table-group-border-color": "#DBDEE1",
+    "table-header-background-color": "#FFFFFF",
+    "table-header-border-color": "#DBDEE1",
+    "table-row-border-color": "#DBDEE1",
+    "table-row-error-background-color": "#FDF7F6",
+    "table-row-odd-background-color": "#FAFAFA",
+    "table-row-selected-background-color": "#E0F0F9",
+    "table-sort-button-ascending-icon-color": "#60666E",
+    "table-sort-button-default-icon-color": "#60666E",
+    "table-sort-button-descending-icon-color": "#60666E",
+    "table-text-color": "#1B1C1E",
+    "tag-background-color": "#F1F2F2",
+    "tag-border-color": "#878F9A",
+    "tag-decorative-01-background-color": "#EBE6EB",
+    "tag-decorative-01-border-color": "#38023B",
+    "tag-decorative-01-icon-color": "#220123",
+    "tag-decorative-01-text-color": "#220123",
+    "tag-decorative-02-background-color": "#FAF3E7",
+    "tag-decorative-02-border-color": "#CE840C",
+    "tag-decorative-02-icon-color": "#7D520B",
+    "tag-decorative-02-text-color": "#7D520B",
+    "tag-decorative-03-background-color": "#E7F0F1",
+    "tag-decorative-03-border-color": "#126773",
+    "tag-decorative-03-icon-color": "#0B3E45",
+    "tag-decorative-03-text-color": "#0B3E45",
+    "tag-decorative-04-background-color": "#F3E6E6",
+    "tag-decorative-04-border-color": "#960000",
+    "tag-decorative-04-icon-color": "#530000",
+    "tag-decorative-04-text-color": "#530000",
+    "tag-decorative-05-background-color": "#F2F5E8",
+    "tag-decorative-05-border-color": "#7B9C1D",
+    "tag-decorative-05-icon-color": "#4A5E11",
+    "tag-decorative-05-text-color": "#4A5E11",
+    "tag-decorative-06-background-color": "#FAEDE6",
+    "tag-decorative-06-border-color": "#CD4B00",
+    "tag-decorative-06-icon-color": "#7B2D00",
+    "tag-decorative-06-text-color": "#7B2D00",
+    "tag-decorative-07-background-color": "#E7EDF5",
+    "tag-decorative-07-border-color": "#104697",
+    "tag-decorative-07-icon-color": "#0A2A5B",
+    "tag-decorative-07-text-color": "#0A2A5B",
+    "tag-decorative-08-background-color": "#E6EDEB",
+    "tag-decorative-08-border-color": "#064633",
+    "tag-decorative-08-icon-color": "#042A1F",
+    "tag-decorative-08-text-color": "#042A1F",
+    "tag-decorative-09-background-color": "#F2E9EF",
+    "tag-decorative-09-border-color": "#7E235A",
+    "tag-decorative-09-icon-color": "#4C1536",
+    "tag-decorative-09-text-color": "#4C1536",
+    "tag-decorative-10-background-color": "#F1F0F7",
+    "tag-decorative-10-border-color": "#766DAB",
+    "tag-decorative-10-icon-color": "#444167",
+    "tag-decorative-10-text-color": "#444167",
+    "tag-hover-background-color": "#DBDEE1",
+    "tag-hover-border-color": "#000000",
+    "tag-hover-icon-color": "#000000",
+    "tag-hover-text-color": "#000000",
+    "tag-icon-color": "#1B1C1E",
+    "tag-selected-background-color": "#E0F0F9",
+    "tag-selected-border-color": "#006296",
+    "tag-selected-icon-color": "#003A5A",
+    "tag-selected-text-color": "#003A5A",
+    "tag-text-color": "#1B1C1E",
+    "text-area-counter-error-text-color": "#CD2C23",
+    "text-area-counter-text-color": "#60666E",
+    "text-input-adornment-color": "#60666E",
+    "text-input-background-color": "#FFFFFF",
+    "text-input-border-color": "#60666E",
+    "text-input-disabled-adornment-text-color": "#B7BBC2",
+    "text-input-disabled-background-color": "#F1F2F2",
+    "text-input-disabled-border-color": "#B7BBC2",
+    "text-input-disabled-text-color": "#B7BBC2",
+    "text-input-error-border-color": "#CD2C23",
+    "text-input-placeholder-disabled-text-color": "#B7BBC2",
+    "text-input-placeholder-text-color": "#60666E",
+    "text-input-text-color": "#1B1C1E",
+    "toast-alert-background-color": "#CD2C23",
+    "toast-alert-icon-color": "#FFFFFF",
+    "toast-alert-text-color": "#FFFFFF",
+    "toast-discovery-background-color": "#602FA0",
+    "toast-discovery-icon-color": "#FFFFFF",
+    "toast-discovery-text-color": "#FFFFFF",
+    "toast-neutral-background-color": "#60666E",
+    "toast-neutral-icon-color": "#FFFFFF",
+    "toast-neutral-text-color": "#FFFFFF",
+    "toast-success-background-color": "#008533",
+    "toast-success-icon-color": "#FFFFFF",
+    "toast-success-text-color": "#FFFFFF",
+    "toast-warning-background-color": "#F5A200",
+    "toast-warning-icon-color": "#1B1C1E",
+    "toast-warning-text-color": "#1B1C1E",
+    "toggle-switch-background-color": "#60666E",
+    "toggle-switch-border-color": "#60666E",
+    "toggle-switch-disabled-background-color": "#B7BBC2",
+    "toggle-switch-disabled-border-color": "#B7BBC2",
+    "toggle-switch-disabled-toggled-background-color": "#8ADDA9",
+    "toggle-switch-disabled-toggled-border-color": "#8ADDA9",
+    "toggle-switch-knob-background-color": "#FFFFFF",
+    "toggle-switch-label-text-color": "#1B1C1E",
+    "toggle-switch-toggled-background-color": "#008533",
+    "toggle-switch-toggled-border-color": "#008533",
+    "toggletip-popper-container-background-color": "#FFFFFF",
+    "toggletip-popper-container-border-color": "#878F9A",
+    "toggletip-popper-container-text-color": "#1B1C1E",
+    "tooltip-icon-color": "#1B1C1E",
+    "tooltip-inverted-icon-color": "#FFFFFF",
+    "tooltip-popper-container-border-color": "#FFFFFF",
+    "tooltip-popper-container-default-background-color": "#60666E",
+    "tooltip-popper-container-success-background-color": "#008533",
+    "tooltip-popper-container-text-color": "#FFFFFF",
+  },
+  "ref": {
+    "color-accent-05": "#FFECEB",
+    "color-accent-10": "#FFD9D7",
+    "color-accent-20": "#FFB3AF",
+    "color-accent-30": "#FF8D88",
+    "color-accent-40": "#FF6760",
+    "color-accent-50": "#FF4138",
+    "color-accent-60": "#CC342D",
+    "color-accent-70": "#992722",
+    "color-accent-80": "#661A16",
+    "color-accent-90": "#330D0B",
+    "color-alert-02": "#FDF7F6",
+    "color-alert-05": "#FAEAE9",
+    "color-alert-10": "#FCCDCC",
+    "color-alert-20": "#F99D99",
+    "color-alert-30": "#F76C65",
+    "color-alert-40": "#F43C32",
+    "color-alert-50": "#CD2C23",
+    "color-alert-60": "#A4231C",
+    "color-alert-70": "#7B1A15",
+    "color-alert-80": "#52110E",
+    "color-alert-90": "#290807",
+    "color-black": "#000000",
+    "color-brand-05": "#E0F0F9",
+    "color-brand-10": "#C2E2F4",
+    "color-brand-20": "#84C6EA",
+    "color-brand-30": "#3F9DD1",
+    "color-brand-40": "#1582BD",
+    "color-brand-50": "#006296",
+    "color-brand-60": "#004E78",
+    "color-brand-70": "#003A5A",
+    "color-brand-80": "#012639",
+    "color-brand-90": "#00131E",
+    "color-decorative-01-05": "#EBE6EB",
+    "color-decorative-01-10": "#D7CCD8",
+    "color-decorative-01-50": "#38023B",
+    "color-decorative-01-70": "#220123",
+    "color-decorative-02-05": "#FAF3E7",
+    "color-decorative-02-10": "#F6E7D0",
+    "color-decorative-02-50": "#CE840C",
+    "color-decorative-02-70": "#7D520B",
+    "color-decorative-03-05": "#E7F0F1",
+    "color-decorative-03-10": "#D0E1E3",
+    "color-decorative-03-50": "#126773",
+    "color-decorative-03-70": "#0B3E45",
+    "color-decorative-04-05": "#F3E6E6",
+    "color-decorative-04-10": "#E8CCCC",
+    "color-decorative-04-50": "#960000",
+    "color-decorative-04-70": "#530000",
+    "color-decorative-05-05": "#F2F5E8",
+    "color-decorative-05-10": "#E5EBD2",
+    "color-decorative-05-50": "#7B9C1D",
+    "color-decorative-05-70": "#4A5E11",
+    "color-decorative-06-05": "#FAEDE6",
+    "color-decorative-06-10": "#F5DBCC",
+    "color-decorative-06-50": "#CD4B00",
+    "color-decorative-06-70": "#7B2D00",
+    "color-decorative-07-05": "#E7EDF5",
+    "color-decorative-07-10": "#CFDAEA",
+    "color-decorative-07-50": "#104697",
+    "color-decorative-07-70": "#0A2A5B",
+    "color-decorative-08-05": "#E6EDEB",
+    "color-decorative-08-10": "#CDDAD6",
+    "color-decorative-08-50": "#064633",
+    "color-decorative-08-70": "#042A1F",
+    "color-decorative-09-05": "#F2E9EF",
+    "color-decorative-09-10": "#E5D3DE",
+    "color-decorative-09-50": "#7E235A",
+    "color-decorative-09-70": "#4C1536",
+    "color-decorative-10-05": "#F1F0F7",
+    "color-decorative-10-10": "#E3E2EE",
+    "color-decorative-10-50": "#766DAB",
+    "color-decorative-10-70": "#444167",
+    "color-discovery-02": "#F9F7FB",
+    "color-discovery-05": "#EFEAF5",
+    "color-discovery-10": "#DFD5EC",
+    "color-discovery-20": "#CFC1E3",
+    "color-discovery-30": "#B097D0",
+    "color-discovery-40": "#8059B3",
+    "color-discovery-50": "#602FA0",
+    "color-discovery-60": "#4D2680",
+    "color-discovery-70": "#3A1C60",
+    "color-discovery-80": "#261340",
+    "color-discovery-90": "#130920",
+    "color-informative-02": "#F3F9FD",
+    "color-informative-05": "#E0F0F9",
+    "color-informative-10": "#C2E2F4",
+    "color-informative-20": "#8FCEF0",
+    "color-informative-30": "#4EADE1",
+    "color-informative-40": "#2286BC",
+    "color-informative-50": "#006296",
+    "color-informative-60": "#004E78",
+    "color-informative-70": "#003A5A",
+    "color-informative-80": "#012639",
+    "color-informative-90": "#00131E",
+    "color-neutral-02": "#FAFAFA",
+    "color-neutral-05": "#F1F2F2",
+    "color-neutral-10": "#E7E8EA",
+    "color-neutral-15": "#DBDEE1",
+    "color-neutral-20": "#CFD2D6",
+    "color-neutral-30": "#B7BBC2",
+    "color-neutral-40": "#9FA5AE",
+    "color-neutral-50": "#878F9A",
+    "color-neutral-60": "#6C727B",
+    "color-neutral-65": "#60666E",
+    "color-neutral-70": "#51555C",
+    "color-neutral-80": "#36393D",
+    "color-neutral-90": "#1B1C1E",
+    "color-success-02": "#F6FBF8",
+    "color-success-05": "#E1F7EA",
+    "color-success-10": "#C4EED5",
+    "color-success-20": "#8ADDA9",
+    "color-success-30": "#50CB7F",
+    "color-success-40": "#1AB655",
+    "color-success-50": "#008533",
+    "color-success-60": "#00661E",
+    "color-success-70": "#004F1E",
+    "color-success-80": "#003514",
+    "color-success-90": "#001A0A",
+    "color-warning-02": "#FFFBF5",
+    "color-warning-05": "#FFF7E5",
+    "color-warning-10": "#FFEECC",
+    "color-warning-20": "#FFDD99",
+    "color-warning-30": "#FFCB66",
+    "color-warning-40": "#FFBA33",
+    "color-warning-50": "#F5A200",
+    "color-warning-60": "#C78500",
+    "color-warning-70": "#9E6900",
+    "color-warning-80": "#664400",
+    "color-warning-90": "#332200",
+    "color-white": "#FFFFFF",
+    "font-family-brand": ""Open Sans", sans-serif",
+    "font-family-sans": ""Open Sans", sans-serif",
+    "font-size-100": "0.25rem",
+    "font-size-1000": "2.5rem",
+    "font-size-1100": "2.75rem",
+    "font-size-1200": "3rem",
+    "font-size-200": "0.5rem",
+    "font-size-275": "0.6875rem",
+    "font-size-300": "0.75rem",
+    "font-size-350": "0.875rem",
+    "font-size-400": "1rem",
+    "font-size-500": "1.25rem",
+    "font-size-600": "1.5rem",
+    "font-size-700": "1.75rem",
+    "font-size-800": "2rem",
+    "font-size-900": "2.25rem",
+    "font-transform-none": "none",
+    "font-transform-uppercase": "uppercase",
+    "font-weight-bold": "700",
+    "font-weight-regular": "400",
+    "font-weight-semibold": "600",
+    "letter-spacing-normal": "0.2px",
+    "line-height-100": "0.25rem",
+    "line-height-1000": "2.5rem",
+    "line-height-1100": "2.75rem",
+    "line-height-1200": "3rem",
+    "line-height-200": "0.5rem",
+    "line-height-300": "0.75rem",
+    "line-height-400": "1rem",
+    "line-height-500": "1.25rem",
+    "line-height-600": "1.5rem",
+    "line-height-700": "1.75rem",
+    "line-height-800": "2rem",
+    "line-height-900": "2.25rem",
+    "transparent-100": "transparent",
+    "transparent-dark-10": "rgb(0 0 0 / 0.1)",
+    "transparent-dark-15": "rgb(0 0 0 / 0.15)",
+    "transparent-dark-20": "rgb(0 0 0 / 0.2)",
+    "transparent-dark-25": "rgb(0 0 0 / 0.25)",
+    "transparent-dark-30": "rgb(0 0 0 / 0.3)",
+    "transparent-dark-35": "rgb(0 0 0 / 0.35)",
+    "transparent-dark-40": "rgb(0 0 0 / 0.4)",
+    "transparent-dark-45": "rgb(0 0 0 / 0.45)",
+    "transparent-dark-5": "rgb(0 0 0 / 0.05)",
+    "transparent-dark-50": "rgb(0 0 0 / 0.5)",
+    "transparent-dark-55": "rgb(0 0 0 / 0.55)",
+    "transparent-dark-60": "rgb(0 0 0 / 0.6)",
+    "transparent-dark-65": "rgb(0 0 0 / 0.65)",
+    "transparent-dark-70": "rgb(0 0 0 / 0.7)",
+    "transparent-dark-75": "rgb(0 0 0 / 0.75)",
+    "transparent-dark-80": "rgb(0 0 0 / 0.8)",
+    "transparent-dark-85": "rgb(0 0 0 / 0.85)",
+    "transparent-dark-90": "rgb(0 0 0 / 0.9)",
+    "transparent-dark-95": "rgb(0 0 0 / 0.95)",
+    "transparent-light-10": "rgb(255 255 255 / 0.1)",
+    "transparent-light-15": "rgb(255 255 255 / 0.15)",
+    "transparent-light-20": "rgb(255 255 255 / 0.2)",
+    "transparent-light-25": "rgb(255 255 255 / 0.25)",
+    "transparent-light-30": "rgb(255 255 255 / 0.3)",
+    "transparent-light-35": "rgb(255 255 255 / 0.35)",
+    "transparent-light-40": "rgb(255 255 255 / 0.4)",
+    "transparent-light-45": "rgb(255 255 255 / 0.45)",
+    "transparent-light-5": "rgb(255 255 255 / 0.05)",
+    "transparent-light-50": "rgb(255 255 255 / 0.5)",
+    "transparent-light-55": "rgb(255 255 255 / 0.55)",
+    "transparent-light-60": "rgb(255 255 255 / 0.6)",
+    "transparent-light-65": "rgb(255 255 255 / 0.65)",
+    "transparent-light-70": "rgb(255 255 255 / 0.7)",
+    "transparent-light-75": "rgb(255 255 255 / 0.75)",
+    "transparent-light-80": "rgb(255 255 255 / 0.8)",
+    "transparent-light-85": "rgb(255 255 255 / 0.85)",
+    "transparent-light-90": "rgb(255 255 255 / 0.9)",
+    "transparent-light-95": "rgb(255 255 255 / 0.95)",
+  },
+}
+`;
diff --git a/packages/react/src/themes/equisoft.ts b/packages/react/src/themes/equisoft.ts
index 70b2f6c7a6..d3fdd1f2ef 100644
--- a/packages/react/src/themes/equisoft.ts
+++ b/packages/react/src/themes/equisoft.ts
@@ -1,11 +1,3 @@
-import { buildTheme } from './build-theme';
 import { ThemeCustomization } from './theme';
-import { defaultAliasTokens, defaultComponentTokens, defaultRefTokens } from './tokens';
 
-const equisoftThemeCustomization: ThemeCustomization = {
-    ref: defaultRefTokens,
-    alias: defaultAliasTokens,
-    component: defaultComponentTokens,
-};
-
-export const equisoftTheme = buildTheme(equisoftThemeCustomization);
+export const equisoftThemeCustomization: ThemeCustomization = {};
diff --git a/packages/react/src/themes/index.ts b/packages/react/src/themes/index.ts
index 91226f8b3c..afb0b1fc90 100644
--- a/packages/react/src/themes/index.ts
+++ b/packages/react/src/themes/index.ts
@@ -1,4 +1,4 @@
 export * from './equisoft';
-export * from './tokens';
+export * from './tokens/tokens';
 export * from './build-theme';
 export * from './theme';
diff --git a/packages/react/src/themes/tokens/tokens.ts b/packages/react/src/themes/tokens/tokens.ts
index 1a4e56c59c..0ee0deca84 100644
--- a/packages/react/src/themes/tokens/tokens.ts
+++ b/packages/react/src/themes/tokens/tokens.ts
@@ -4,12 +4,20 @@ import type { AliasToken } from './alias-tokens';
 export type TokenName = string;
 export type TokenValue = string;
 
+export type TokenContext = 'desktop' | 'tablet' | 'mobile';
+
 export type TokenMap<T extends TokenName, V extends TokenValue> = {
     [Name in T]: Exclude<V, Name>;
 };
 
+export type ContextualToken<T extends TokenName> = `${T}:${TokenContext}`;
+
+export type ContextualTokenMap<T extends TokenName, V extends TokenValue> = TokenMap<T, V> & Partial<{
+    [Name in T as ContextualToken<Name>]: V;
+}>;
+
 export type ResolvedTokenMap<T extends TokenName> = TokenMap<T, TokenValue>;
 
 export type RefTokenMap<T extends TokenName> = ResolvedTokenMap<T>;
-export type AliasTokenMap<T extends TokenName> = TokenMap<T, RefToken | AliasToken>;
+export type AliasTokenMap<T extends TokenName> = ContextualTokenMap<T, RefToken | AliasToken>;
 export type ComponentTokenMap<T extends TokenName> = TokenMap<T, RefToken | AliasToken>;
diff --git a/packages/storybook/stories/1-getting-started.mdx b/packages/storybook/stories/1-getting-started.mdx
index 7fd566c0b8..23bd33da70 100644
--- a/packages/storybook/stories/1-getting-started.mdx
+++ b/packages/storybook/stories/1-getting-started.mdx
@@ -38,10 +38,11 @@ export const App: VoidFunctionComponent = () => (
 
 ## Theming
 
-For most cases, you won't need to provide a theme, as the DesignSystem uses Equisoft's theme by default. However, it's
-possible to override the theme, or parts of the theme. For more details, take a look at the [Theme definition](https://github.com/kronostechnologies/design-elements/blob/master/packages/react/src/themes/theme.ts).
+For most cases, you won't need to provide a theme, as the DesignSystem uses Equisoft's color scheme by default. However,
+it's possible to override parts of the theme by providing a `themeCustomization` object to the `DesignSystem` component.
+For more details, take a look at the [type definitions](https://github.com/kronostechnologies/design-elements/blob/master/packages/react/src/themes/theme.ts)
+and the list of available design tokens.
 
-<Canvas of={GettingStartedStories.Theming} />
 
 ## Internationalization
 
diff --git a/packages/storybook/stories/1-getting-started.stories.tsx b/packages/storybook/stories/1-getting-started.stories.tsx
index 95abb18656..46cbb1fa3e 100644
--- a/packages/storybook/stories/1-getting-started.stories.tsx
+++ b/packages/storybook/stories/1-getting-started.stories.tsx
@@ -1,15 +1,5 @@
-import {
-    Button,
-    DesignSystem,
-    SectionalBanner,
-    DropdownList,
-    DropdownListOption,
-    equisoftTheme,
-    ThemeCustomization,
-    buildTheme,
-} from '@equisoft/design-elements-react';
+import { DesignSystem, SectionalBanner } from '@equisoft/design-elements-react';
 import { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
 
 const meta: Meta = {
     title: 'Getting Started',
@@ -20,148 +10,6 @@ export default meta;
 
 type Story = StoryObj<typeof DesignSystem>;
 
-const flowerThemeCustomization: ThemeCustomization = {
-    ref: {
-        'color-brand-05': '#e9e0f9',
-        'color-brand-20': '#ad84ea',
-        'color-brand-50': '#710096',
-        'color-brand-70': '#36005a',
-        'color-brand-80': '#230139',
-        'color-accent-20': '#f9f5b2',
-        'color-accent-50': '#efbd3e',
-        'color-accent-70': '#d4a714',
-        'color-white': '#FFFFFF',
-        'color-black': '#000000',
-        'color-neutral-02': '#FAFAFA',
-        'color-neutral-05': '#F1F2F2',
-        'color-neutral-15': '#DBDEE1',
-        'color-neutral-30': '#B7BBC2',
-        'color-neutral-50': '#878F9A',
-        'color-neutral-65': '#60666E',
-        'color-neutral-90': '#1B1C1E',
-        'color-alert-02': '#fdfcf6',
-        'color-alert-05': '#faf6e9',
-        'color-alert-20': '#f9e399',
-        'color-alert-50': '#cd9d23',
-        'color-alert-70': '#7b6315',
-        'color-informative-02': '#F9F7FB',
-        'color-informative-05': '#E0F0F9',
-        'color-informative-20': '#84C6EA',
-        'color-informative-50': '#006296',
-        'color-informative-70': '#003A5A',
-        'color-success-02': '#F6FCF8',
-        'color-success-05': '#E1F7EA',
-        'color-success-20': '#8ADDA9',
-        'color-success-50': '#008533',
-        'color-success-70': '#004F1E',
-        'color-warning-02': '#FFFBF5',
-        'color-warning-05': '#FFF7E5',
-        'color-warning-20': '#FFDD99',
-        'color-warning-50': '#F5A200',
-        'color-warning-70': '#9E6900',
-        'color-warning-80': '#664400',
-        'color-discovery-02': '#F9F7FB',
-        'color-discovery-05': '#EFEAF6',
-        'color-discovery-20': '#CFC1E3',
-        'color-discovery-50': '#602FA0',
-        'color-discovery-70': '#3A1C60',
-    },
-};
-
-const flowerTheme = buildTheme(flowerThemeCustomization);
-
-export const Theming: Story = {
-    render() {
-        const [theme, setTheme] = useState(equisoftTheme);
-        const [label, setLabel] = useState('Equisoft Theme');
-
-        function setCustomTheme(newSelectedTheme: DropdownListOption): void {
-            setLabel(newSelectedTheme.label);
-            switch (newSelectedTheme.value) {
-                case 'flowerTheme':
-                    setTheme(flowerTheme);
-                    break;
-                case 'equisoftTheme':
-                default:
-                    setTheme(equisoftTheme);
-                    break;
-            }
-        }
-
-        return (
-            <DesignSystem theme={theme}>
-                <div>
-                    <div style={{ display: 'box', alignItems: 'center', gap: '2rem' }}>
-                        <h3>{label}</h3>
-                        <div style={{ width: '200px' }}>
-                            <DropdownList
-                                onChange={(option: DropdownListOption) => setCustomTheme(option)}
-                                defaultValue="equisoftTheme"
-                                options={[
-                                    {
-                                        label: 'Equisoft Theme',
-                                        value: 'equisoftTheme',
-                                    },
-                                    {
-                                        label: 'Flower Theme',
-                                        value: 'flowerTheme',
-                                    },
-                                ]}
-                            />
-                        </div>
-                    </div>
-                    <div style={{
-                        display: 'table-row', alignItems: 'center',
-                    }}
-                    >
-                        <div style={{ padding: '1rem' }}>
-                            <Button label="Primary" buttonType="primary" />
-                            <Button label="Secondary" buttonType="secondary" />
-                            <Button label="Tertiary" buttonType="tertiary" />
-                            <Button label="Destructive Primary" buttonType="destructive-primary" />
-                            <Button label="Destructive Secondary" buttonType="destructive-secondary" />
-                        </div>
-                        <div style={{ padding: '1rem' }}>
-                            <Button label="Primary" buttonType="primary" disabled />
-                            <Button label="Secondary" buttonType="secondary" disabled />
-                            <Button label="Tertiary" buttonType="tertiary" disabled />
-                            <Button label="Destructive Primary" buttonType="destructive-primary" disabled />
-                            <Button label="Destructive Secondary" buttonType="destructive-secondary" disabled />
-                        </div>
-                        <div style={{
-                            backgroundColor: theme.component['global-header-background-color'],
-                            padding: '1rem',
-                        }}
-                        >
-                            <Button label="Primary" buttonType="primary" inverted />
-                            <Button label="Secondary" buttonType="secondary" inverted />
-                            <Button label="Tertiary" buttonType="tertiary" inverted />
-                            <Button label="Destructive Primary" buttonType="destructive-primary" inverted />
-                            <Button label="Destructive Secondary" buttonType="destructive-secondary" inverted />
-                        </div>
-                        <div style={{
-                            backgroundColor: theme.component['global-header-background-color'],
-                            padding: '1rem',
-                        }}
-                        >
-                            <Button label="Primary" buttonType="primary" inverted disabled />
-                            <Button label="Secondary" buttonType="secondary" inverted disabled />
-                            <Button label="Tertiary" buttonType="tertiary" inverted disabled />
-                            <Button label="Destructive Primary" buttonType="destructive-primary" inverted disabled />
-                            <Button
-                                label="Destructive Secondary"
-                                buttonType="destructive-secondary"
-                                inverted
-                                disabled
-                            />
-                        </div>
-                    </div>
-                </div>
-            </DesignSystem>
-        );
-    },
-};
-
 export const Internationalization: Story = {
     render() {
         return (
diff --git a/packages/storybook/stories/utils/device-context-decorator.tsx b/packages/storybook/stories/utils/device-context-decorator.tsx
index 84219515ee..0dc25193cb 100644
--- a/packages/storybook/stories/utils/device-context-decorator.tsx
+++ b/packages/storybook/stories/utils/device-context-decorator.tsx
@@ -1,12 +1,12 @@
-import { DeviceContextProvider } from '@equisoft/design-elements-react';
+import { DesignSystem } from '@equisoft/design-elements-react';
 import { ComponentType } from 'react';
 import { decorateWith, Decorator } from './decorator';
 
-export const DeviceContextDecorator: Decorator = decorateWith(DeviceContextProvider);
+export const DeviceContextDecorator: Decorator = decorateWith(DesignSystem);
 
 export const DesktopDecorator: Decorator = (Story: ComponentType) => (
-    <DeviceContextProvider staticDevice="desktop"><Story /></DeviceContextProvider>
+    <DesignSystem staticDevice="desktop"><Story /></DesignSystem>
 );
 export const MobileDecorator: Decorator = (Story: ComponentType) => (
-    <DeviceContextProvider staticDevice="mobile"><Story /></DeviceContextProvider>
+    <DesignSystem staticDevice="mobile"><Story /></DesignSystem>
 );
diff --git a/packages/storybook/stories/utils/shadow-dom-decorator.tsx b/packages/storybook/stories/utils/shadow-dom-decorator.tsx
index 4f222935a1..377598c940 100644
--- a/packages/storybook/stories/utils/shadow-dom-decorator.tsx
+++ b/packages/storybook/stories/utils/shadow-dom-decorator.tsx
@@ -1,7 +1,9 @@
-import { ThemeWrapper } from '@equisoft/design-elements-react';
 import { ComponentType } from 'react';
+import { DesignSystem } from '@equisoft/design-elements-react';
 import { Decorator } from './decorator';
 
 export const ShadowDomDecorator: Decorator = (Story: ComponentType) => (
-    <ThemeWrapper isolateStyles><Story /></ThemeWrapper>
+    <DesignSystem isolateStyles>
+        <Story />
+    </DesignSystem>
 );