diff --git a/CHANGELOG.md b/CHANGELOG.md
index 23cc2102..45ed237a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to
 ### Changed
 
 - ⚡️(sw) stop to cache external resources likes videos #1655
+- 💥(frontend) upgrade to ui-kit v2
 
 ### Fixed
 
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/left-panel.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/left-panel.spec.ts
index 558f28bd..cf5ee4c3 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/left-panel.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-impress/left-panel.spec.ts
@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test';
 
-import { createDoc } from './utils-common';
+import { createDoc, goToGridDoc, verifyDocName } from './utils-common';
 
 test.describe('Left panel desktop', () => {
   test.beforeEach(async ({ page }) => {
@@ -10,8 +10,12 @@ test.describe('Left panel desktop', () => {
   test('checks all the elements are visible', async ({ page }) => {
     await expect(page.getByTestId('left-panel-desktop')).toBeVisible();
     await expect(page.getByTestId('left-panel-mobile')).toBeHidden();
-    await expect(page.getByTestId('home-button')).toBeVisible();
+    await expect(page.getByTestId('home-button')).toBeHidden();
     await expect(page.getByTestId('new-doc-button')).toBeVisible();
+
+    await goToGridDoc(page);
+
+    await expect(page.getByTestId('home-button')).toBeVisible();
   });
 
   test('checks resize handle is present and functional on document page', async ({
@@ -88,6 +92,9 @@ test.describe('Left panel mobile', () => {
     await expect(languageButton).not.toBeInViewport();
     await expect(logoutButton).not.toBeInViewport();
 
+    const title = await goToGridDoc(page);
+    await verifyDocName(page, title);
+
     await header.getByLabel('Open the header menu').click();
 
     await expect(page.getByTestId('left-panel-mobile')).toBeInViewport();
diff --git a/src/frontend/apps/impress/cunningham.ts b/src/frontend/apps/impress/cunningham.ts
index 5accadd3..417134cc 100644
--- a/src/frontend/apps/impress/cunningham.ts
+++ b/src/frontend/apps/impress/cunningham.ts
@@ -1,57 +1,25 @@
 import { cunninghamConfig as tokens } from '@gouvfr-lasuite/ui-kit';
+import { defaultTokens } from '@openfun/cunningham-react';
+import merge from 'lodash/merge';
 
-const customColors = {
-  'primary-action': '#1212FF',
-  'primary-bg': '#FAFAFA',
-  'primary-focus': '#0A76F6',
-  'secondary-icon': 'var(--c--theme--colors--primary-text)',
-  'blue-400': '#7AB1E8',
-  'blue-500': '#417DC4',
-  'blue-600': '#3558A2',
-  'brown-400': '#E6BE92',
-  'brown-500': '#BD987A',
-  'brown-600': '#745B47',
-  'cyan-400': '#34BAB5',
-  'cyan-500': '#009099',
-  'cyan-600': '#006A6F',
-  'gold-400': '#FFCA00',
-  'gold-500': '#C3992A',
-  'gold-600': '#695240',
-  'green-400': '#34CB6A',
-  'green-500': '#00A95F',
-  'green-600': '#297254',
-  'olive-400': '#99C221',
-  'olive-500': '#68A532',
-  'olive-600': '#447049',
-  'orange-400': '#FF732C',
-  'orange-500': '#E4794A',
-  'orange-600': '#755348',
-  'pink-400': '#FFB7AE',
-  'pink-500': '#E18B76',
-  'pink-600': '#8D533E',
-  'purple-400': '#CE70CC',
-  'purple-500': '#A558A0',
-  'purple-600': '#6E445A',
-  'yellow-400': '#D8C634',
-  'yellow-500': '#B7A73F',
-  'yellow-600': '#66673D',
+// Uikit does not provide the full list of tokens.
+// To be able to override correctly, we need to merge with the default tokens.
+let mergedColors = merge(
+  defaultTokens.globals.colors,
+  tokens.themes.default.globals.colors,
+);
+
+mergedColors = {
+  ...mergedColors,
+  'logo-1': '#2845C1',
 };
 
-tokens.themes.default.theme = {
-  ...tokens.themes.default.theme,
+tokens.themes.default.globals = {
+  ...tokens.themes.default.globals,
   ...{
-    logo: {
-      src: '',
-      alt: '',
-      widthHeader: '',
-      widthFooter: '',
-    },
-    colors: {
-      ...tokens.themes.default.theme.colors,
-      ...customColors,
-    },
+    colors: mergedColors,
     font: {
-      ...tokens.themes.default.theme.font,
+      ...tokens.themes.default.globals.font,
       families: {
         base: 'sans-serif',
         accent: 'sans-serif',
@@ -63,39 +31,24 @@ tokens.themes.default.theme = {
 tokens.themes.default.components = {
   ...tokens.themes.default.components,
   ...{
+    logo: {
+      src: '',
+      alt: '',
+      widthHeader: '',
+      widthFooter: '',
+    },
     'la-gaufre': false,
     'home-proconnect': false,
-    'image-system-filter': '',
     favicon: {
-      ico: '/assets/favicon-light.ico',
       'png-light': '/assets/favicon-light.png',
       'png-dark': '/assets/favicon-dark.png',
     },
-    button: {
-      ...tokens.themes.default.components.button,
-      primary: {
-        ...tokens.themes.default.components.button.primary,
-        ...{
-          'background--disabled': 'var(--c--theme--colors--greyscale-100)',
-        },
-        disabled: 'var(--c--theme--colors--greyscale-400)',
-      },
-    },
   },
 };
 
 const dsfrTheme = {
   dsfr: {
-    theme: {
-      colors: {
-        'secondary-icon': '#C9191E',
-      },
-      logo: {
-        src: '/assets/logo-gouv.svg',
-        widthHeader: '110px',
-        widthFooter: '220px',
-        alt: 'Gouvernement Logo',
-      },
+    globals: {
       font: {
         families: {
           base: 'Marianne, Inter, Roboto Flex Variable, sans-serif',
@@ -104,6 +57,12 @@ const dsfrTheme = {
       },
     },
     components: {
+      logo: {
+        src: '/assets/logo-gouv.svg',
+        widthHeader: '110px',
+        widthFooter: '220px',
+        alt: 'Gouvernement Logo',
+      },
       'la-gaufre': true,
       'home-proconnect': true,
       favicon: {
@@ -117,131 +76,296 @@ const dsfrTheme = {
 
 const genericTheme = {
   generic: {
-    theme: {
+    globals: {
       colors: {
-        'primary-action': '#206EBD',
-        'primary-focus': '#1E64BF',
-        'primary-text': '#2E2C28',
-        'primary-050': '#F8F8F7',
-        'primary-100': '#F0EFEC',
-        'primary-150': '#F4F4FD',
-        'primary-200': '#E8E7E4',
-        'primary-300': '#CFCDC9',
-        'primary-400': '#979592',
-        'primary-500': '#82807D',
-        'primary-600': '#3F3D39',
-        'primary-700': '#2E2C28',
-        'primary-800': '#302E29',
-        'primary-900': '#282622',
-        'primary-950': '#201F1C',
-        'secondary-text': '#fff',
-        'secondary-50': '#F4F7FA',
-        'secondary-100': '#D7E3EE',
-        'secondary-200': '#B8CCE1',
-        'secondary-300': '#99B4D3',
-        'secondary-400': '#7595BE',
-        'secondary-500': '#5874A0',
-        'secondary-600': '#3A5383',
-        'secondary-700': '#1E3462',
-        'secondary-800': '#091B41',
-        'secondary-900': '#08183B',
-        'secondary-950': '#071636',
-        'greyscale-text': '#3C3B38',
-        'greyscale-000': '#fff',
-        'greyscale-050': '#F8F7F7',
-        'greyscale-100': '#F3F3F2',
-        'greyscale-200': '#ECEBEA',
-        'greyscale-250': '#E4E3E2',
-        'greyscale-300': '#D3D2CF',
-        'greyscale-350': '#eee',
-        'greyscale-400': '#96948E',
-        'greyscale-500': '#817E77',
-        'greyscale-600': '#6A6862',
-        'greyscale-700': '#3C3B38',
-        'greyscale-750': '#383632',
-        'greyscale-800': '#2D2B27',
-        'greyscale-900': '#262522',
-        'greyscale-950': '#201F1C',
-        'greyscale-1000': '#181714',
-        'success-text': '#234935',
-        'success-50': '#F3FBF5',
-        'success-100': '#E4F7EA',
-        'success-200': '#CAEED4',
-        'success-300': '#A0E0B5',
-        'success-400': '#6CC88C',
-        'success-500': '#6CC88C',
-        'success-600': '#358D5C',
-        'success-700': '#2D704B',
-        'success-800': '#28583F',
-        'success-900': '#234935',
-        'success-950': '#0F281B',
-        'info-text': '#212445',
-        'info-50': '#F2F6FB',
-        'info-100': '#E2E9F5',
-        'info-200': '#CCD8EE',
-        'info-300': '#A9C0E3',
-        'info-400': '#809DD4',
-        'info-500': '#617BC7',
-        'info-600': '#4A5CBF',
-        'info-700': '#3E49B2',
-        'info-800': '#353C8F',
-        'info-900': '#303771',
-        'info-950': '#212445',
-        'warning-text': '#D97C3A',
-        'warning-50': '#FDF7F1',
-        'warning-100': '#FBEDDC',
-        'warning-200': '#F5D9B9',
-        'warning-300': '#EDBE8C',
-        'warning-400': '#E2985C',
-        'warning-500': '#D97C3A',
-        'warning-600': '#C96330',
-        'warning-700': '#A34B32',
-        'warning-800': '#813B2C',
-        'warning-900': '#693327',
-        'warning-950': '#381713',
-        'danger-action': '#C0182A',
-        'danger-text': '#FFF',
-        'danger-050': '#FDF5F4',
-        'danger-100': '#FBEBE8',
-        'danger-200': '#F9E0DC',
-        'danger-300': '#F3C3BD',
-        'danger-400': '#E26552',
-        'danger-500': '#C91F00',
-        'danger-600': '#A71901',
-        'danger-700': '#562C2B',
-        'danger-800': '#392425',
-        'danger-900': '#311F20',
-        'danger-950': '#2A191A',
-        'blue-400': '#8BAECC',
-        'blue-500': '#567AA2',
-        'blue-600': '#455784',
-        'brown-400': '#E4C090',
-        'brown-500': '#BA9977',
-        'brown-600': '#735C45',
-        'cyan-400': '#5CBEC9',
-        'cyan-500': '#43A1B3',
-        'cyan-600': '#39809B',
-        'gold-400': '#ECBF50',
-        'gold-500': '#DFA038',
-        'gold-600': '#C17B31',
-        'green-400': '#5DBD9A',
-        'green-500': '#3AA183',
-        'green-600': '#2A816D',
-        'olive-400': '#AFD662',
-        'olive-500': '#90BB4B',
-        'olive-600': '#6E9441',
-        'orange-400': '#E2985C',
-        'orange-500': '#D97C3A',
-        'orange-600': '#C96330',
-        'pink-400': '#BE8FC8',
-        'pink-500': '#A563B1',
-        'pink-600': '#8B44A5',
-        'purple-400': '#BE8FC8',
-        'purple-500': '#A563B1',
-        'purple-600': '#8B44A5',
-        'yellow-400': '#EDC947',
-        'yellow-500': '#DBB13A',
-        'yellow-600': '#B88A34',
+        'brand-050': '#EEF1FA',
+        'brand-100': '#DDE2F5',
+        'brand-150': '#CED3F1',
+        'brand-200': '#BEC5F0',
+        'brand-250': '#AFB5F1',
+        'brand-300': '#A0A5F6',
+        'brand-350': '#8F94FD',
+        'brand-400': '#8184FC',
+        'brand-450': '#7576EE',
+        'brand-500': '#6969DF',
+        'brand-550': '#5E5CD0',
+        'brand-600': '#534FC2',
+        'brand-650': '#4844AD',
+        'brand-700': '#3E3B98',
+        'brand-750': '#36347D',
+        'brand-800': '#2D2F5F',
+        'brand-850': '#262848',
+        'brand-900': '#1C1E32',
+        'brand-950': '#11131F',
+        'gray-000': '#FFFFFF',
+        'gray-025': '#F8F8F9',
+        'gray-050': '#F0F0F3',
+        'gray-100': '#E2E2EA',
+        'gray-150': '#D3D4E0',
+        'gray-200': '#C5C6D5',
+        'gray-250': '#B7B7CB',
+        'gray-300': '#A9A9BF',
+        'gray-350': '#9C9CB2',
+        'gray-400': '#8F8FA4',
+        'gray-450': '#828297',
+        'gray-500': '#75758A',
+        'gray-550': '#69697D',
+        'gray-600': '#5D5D70',
+        'gray-650': '#515164',
+        'gray-700': '#454558',
+        'gray-750': '#3A3A4C',
+        'gray-800': '#2F303D',
+        'gray-850': '#25252F',
+        'gray-900': '#1B1B23',
+        'gray-950': '#111114',
+        'gray-1000': '#000000',
+        'info-050': '#EAF2F9',
+        'info-100': '#D5E4F3',
+        'info-150': '#BFD7F0',
+        'info-200': '#A7CAEE',
+        'info-250': '#8DBDEF',
+        'info-300': '#6EB0F2',
+        'info-350': '#50A2F5',
+        'info-400': '#3593F4',
+        'info-450': '#1185ED',
+        'info-500': '#0077DE',
+        'info-550': '#0069CF',
+        'info-600': '#005BC0',
+        'info-650': '#0D4EAA',
+        'info-700': '#124394',
+        'info-750': '#163878',
+        'info-800': '#192F5A',
+        'info-850': '#192541',
+        'info-900': '#141B2D',
+        'info-950': '#0C111C',
+        'success-050': '#E8F1EA',
+        'success-100': '#CFE4D4',
+        'success-150': '#BAD9C1',
+        'success-200': '#A2CFAD',
+        'success-250': '#86C597',
+        'success-300': '#6CBA83',
+        'success-350': '#4FB070',
+        'success-400': '#40A363',
+        'success-450': '#309556',
+        'success-500': '#1E884A',
+        'success-550': '#027B3E',
+        'success-600': '#016D31',
+        'success-650': '#006024',
+        'success-700': '#005317',
+        'success-750': '#0D4511',
+        'success-800': '#11380E',
+        'success-850': '#132A11',
+        'success-900': '#101E0F',
+        'success-950': '#091209',
+        'warning-050': '#F8F0E9',
+        'warning-100': '#F1E0D3',
+        'warning-150': '#ECD0BC',
+        'warning-200': '#E8C0A4',
+        'warning-250': '#E8AE8A',
+        'warning-300': '#EB9970',
+        'warning-350': '#E98456',
+        'warning-400': '#E57036',
+        'warning-450': '#DA5E18',
+        'warning-500': '#CB5000',
+        'warning-550': '#BC4200',
+        'warning-600': '#AD3300',
+        'warning-650': '#9E2300',
+        'warning-700': '#882011',
+        'warning-750': '#731E16',
+        'warning-800': '#58201A',
+        'warning-850': '#401D18',
+        'warning-900': '#2E1714',
+        'warning-950': '#1D0F0D',
+        'error-050': '#F9EFEC',
+        'error-100': '#F4DFD9',
+        'error-150': '#F0CEC6',
+        'error-200': '#EEBCB2',
+        'error-250': '#EEA99D',
+        'error-300': '#EF9486',
+        'error-350': '#F37C6E',
+        'error-400': '#F65F53',
+        'error-450': '#F0463D',
+        'error-500': '#E82322',
+        'error-550': '#D7010E',
+        'error-600': '#C00100',
+        'error-650': '#AA0000',
+        'error-700': '#910C06',
+        'error-750': '#731E16',
+        'error-800': '#58201A',
+        'error-850': '#401D18',
+        'error-900': '#2E1714',
+        'error-950': '#1D0F0D',
+        'red-050': '#FAEFEE',
+        'red-100': '#F4DEDD',
+        'red-150': '#F1CDCB',
+        'red-200': '#EFBBBA',
+        'red-250': '#EEA8A8',
+        'red-300': '#F09394',
+        'red-350': '#F37B7E',
+        'red-400': '#EF6569',
+        'red-450': '#E94A55',
+        'red-500': '#DA3B49',
+        'red-550': '#CA2A3C',
+        'red-600': '#BB1330',
+        'red-650': '#A90021',
+        'red-700': '#910A13',
+        'red-750': '#731E16',
+        'red-800': '#58201A',
+        'red-850': '#411D18',
+        'red-900': '#2E1714',
+        'red-950': '#1D0F0D',
+        'orange-050': '#F8F0E9',
+        'orange-100': '#F1E0D3',
+        'orange-150': '#ECD0BD',
+        'orange-200': '#EABFA6',
+        'orange-250': '#EBAC90',
+        'orange-300': '#EC9772',
+        'orange-350': '#E5845A',
+        'orange-400': '#D6774D',
+        'orange-450': '#C86A40',
+        'orange-500': '#B95D33',
+        'orange-550': '#AB5025',
+        'orange-600': '#9D4315',
+        'orange-650': '#8F3600',
+        'orange-700': '#812900',
+        'orange-750': '#6C2511',
+        'orange-800': '#572017',
+        'orange-850': '#401D18',
+        'orange-900': '#2E1714',
+        'orange-950': '#1D0F0D',
+        'brown-050': '#F6F0E8',
+        'brown-100': '#F1E0D3',
+        'brown-150': '#EBD0BA',
+        'brown-200': '#E2C0A6',
+        'brown-250': '#D4B398',
+        'brown-300': '#C6A58B',
+        'brown-350': '#B8987E',
+        'brown-400': '#AA8B71',
+        'brown-450': '#9D7E65',
+        'brown-500': '#8F7158',
+        'brown-550': '#82654C',
+        'brown-600': '#765841',
+        'brown-650': '#694C35',
+        'brown-700': '#5D412A',
+        'brown-750': '#51361E',
+        'brown-800': '#452A13',
+        'brown-850': '#392008',
+        'brown-900': '#29180A',
+        'brown-950': '#1B0F08',
+        'yellow-050': '#F3F0E7',
+        'yellow-100': '#E9E2CF',
+        'yellow-150': '#E1D4B7',
+        'yellow-200': '#D9C599',
+        'yellow-250': '#D2B677',
+        'yellow-300': '#CAA756',
+        'yellow-350': '#C2972E',
+        'yellow-400': '#B98900',
+        'yellow-450': '#AB7B00',
+        'yellow-500': '#9D6E00',
+        'yellow-550': '#916100',
+        'yellow-600': '#855400',
+        'yellow-650': '#784700',
+        'yellow-700': '#6C3A00',
+        'yellow-750': '#5F2E00',
+        'yellow-800': '#512302',
+        'yellow-850': '#3E1D10',
+        'yellow-900': '#2D1711',
+        'yellow-950': '#1D0F0D',
+        'green-050': '#E6F1E9',
+        'green-100': '#CFE4D5',
+        'green-150': '#B8D8C1',
+        'green-200': '#A0CFAE',
+        'green-250': '#84C59A',
+        'green-300': '#65BA86',
+        'green-350': '#45B173',
+        'green-400': '#23A562',
+        'green-450': '#029755',
+        'green-500': '#008948',
+        'green-550': '#017B3B',
+        'green-600': '#006E2E',
+        'green-650': '#006022',
+        'green-700': '#005314',
+        'green-750': '#0D4510',
+        'green-800': '#11380E',
+        'green-850': '#132A11',
+        'green-900': '#101E0F',
+        'green-950': '#091209',
+        'blue1-050': '#EBF1F9',
+        'blue1-100': '#D6E4F4',
+        'blue1-150': '#C1D7F0',
+        'blue1-200': '#AACAEF',
+        'blue1-250': '#8FBCEF',
+        'blue1-300': '#7CAFEB',
+        'blue1-350': '#68A1E4',
+        'blue1-400': '#5B94D6',
+        'blue1-450': '#4E86C7',
+        'blue1-500': '#4279B9',
+        'blue1-550': '#356CAC',
+        'blue1-600': '#28609E',
+        'blue1-650': '#1B5390',
+        'blue1-700': '#0B4783',
+        'blue1-750': '#0F3C6E',
+        'blue1-800': '#133059',
+        'blue1-850': '#152641',
+        'blue1-900': '#121C2D',
+        'blue1-950': '#0B111C',
+        'blue2-050': '#E7F3F4',
+        'blue2-100': '#CEE7E9',
+        'blue2-150': '#B2DCE0',
+        'blue2-200': '#91D1D7',
+        'blue2-250': '#68C7D0',
+        'blue2-300': '#43BBC5',
+        'blue2-350': '#00AFBA',
+        'blue2-400': '#01A0AA',
+        'blue2-450': '#00929D',
+        'blue2-500': '#00848F',
+        'blue2-550': '#007682',
+        'blue2-600': '#016874',
+        'blue2-650': '#005B67',
+        'blue2-700': '#004E5A',
+        'blue2-750': '#00424E',
+        'blue2-800': '#003642',
+        'blue2-850': '#002A38',
+        'blue2-900': '#061E28',
+        'blue2-950': '#071219',
+        'purple-050': '#F7F0F6',
+        'purple-100': '#EEE0EE',
+        'purple-150': '#E7D1E7',
+        'purple-200': '#DBBFE4',
+        'purple-250': '#D3AEE2',
+        'purple-300': '#CB99E1',
+        'purple-350': '#C188D9',
+        'purple-400': '#B47BCB',
+        'purple-450': '#A66EBD',
+        'purple-500': '#9961AF',
+        'purple-550': '#8B55A1',
+        'purple-600': '#7E4894',
+        'purple-650': '#723C87',
+        'purple-700': '#633376',
+        'purple-750': '#552A65',
+        'purple-800': '#452551',
+        'purple-850': '#35213D',
+        'purple-900': '#261A2C',
+        'purple-950': '#17111C',
+        'pink-050': '#F8EFF4',
+        'pink-100': '#F0DFEA',
+        'pink-150': '#EACEDF',
+        'pink-200': '#E9BBD1',
+        'pink-250': '#E9A7C2',
+        'pink-300': '#E095B4',
+        'pink-350': '#D685A8',
+        'pink-400': '#C7799B',
+        'pink-450': '#B86C8D',
+        'pink-500': '#AA5F80',
+        'pink-550': '#9C5374',
+        'pink-600': '#8E4767',
+        'pink-650': '#813B5B',
+        'pink-700': '#732E4F',
+        'pink-750': '#632643',
+        'pink-800': '#521F38',
+        'pink-850': '#3E1C2B',
+        'pink-900': '#2D171F',
+        'pink-950': '#1C0E12',
       },
       font: {
         families: {
@@ -250,18 +374,6 @@ const genericTheme = {
         },
       },
     },
-    components: {
-      button: {
-        primary: {
-          background: {
-            'color-hover': 'var(--c--theme--colors--primary-focus)',
-            'color-active': 'var(--c--theme--colors--primary-focus)',
-            'color-focus': 'var(--c--theme--colors--primary-focus)',
-          },
-        },
-      },
-      'image-system-filter': 'saturate(0.2)',
-    },
   },
 };
 
diff --git a/src/frontend/apps/impress/package.json b/src/frontend/apps/impress/package.json
index 5bd8d658..9ace686a 100644
--- a/src/frontend/apps/impress/package.json
+++ b/src/frontend/apps/impress/package.json
@@ -35,11 +35,11 @@
     "@fontsource-variable/material-symbols-outlined": "5.2.28",
     "@fontsource/material-icons": "5.2.7",
     "@gouvfr-lasuite/integration": "1.0.3",
-    "@gouvfr-lasuite/ui-kit": "0.16.2",
+    "@gouvfr-lasuite/ui-kit": "0.18.0",
     "@hocuspocus/provider": "3.4.0",
     "@mantine/core": "8.3.6",
     "@mantine/hooks": "8.3.6",
-    "@openfun/cunningham-react": "3.2.3",
+    "@openfun/cunningham-react": "4.0.0",
     "@react-pdf/renderer": "4.3.1",
     "@sentry/nextjs": "10.27.0",
     "@tanstack/react-query": "5.90.6",
diff --git a/src/frontend/apps/impress/public/assets/favicon-dark.png b/src/frontend/apps/impress/public/assets/favicon-dark.png
index 1d05fec8..43ea493e 100644
Binary files a/src/frontend/apps/impress/public/assets/favicon-dark.png and b/src/frontend/apps/impress/public/assets/favicon-dark.png differ
diff --git a/src/frontend/apps/impress/public/assets/favicon-light.ico b/src/frontend/apps/impress/public/assets/favicon-light.ico
deleted file mode 100644
index b4255b9f..00000000
Binary files a/src/frontend/apps/impress/public/assets/favicon-light.ico and /dev/null differ
diff --git a/src/frontend/apps/impress/public/assets/favicon-light.png b/src/frontend/apps/impress/public/assets/favicon-light.png
index 19cc87d7..5a33afa0 100644
Binary files a/src/frontend/apps/impress/public/assets/favicon-light.png and b/src/frontend/apps/impress/public/assets/favicon-light.png differ
diff --git a/src/frontend/apps/impress/src/components/Box.tsx b/src/frontend/apps/impress/src/components/Box.tsx
index 8510b730..dd57c6fa 100644
--- a/src/frontend/apps/impress/src/components/Box.tsx
+++ b/src/frontend/apps/impress/src/components/Box.tsx
@@ -14,6 +14,7 @@ export interface BoxProps {
   as?: HTMLElementType;
   $align?: CSSProperties['alignItems'];
   $background?: CSSProperties['background'];
+  $border?: CSSProperties['border'];
   $color?: CSSProperties['color'];
   $css?: string | RuleSet<object>;
   $cursor?: CSSProperties['cursor'];
@@ -36,41 +37,34 @@ export interface BoxProps {
   $position?: CSSProperties['position'];
   $radius?: CSSProperties['borderRadius'];
   $shrink?: CSSProperties['flexShrink'];
+  $transition?: CSSProperties['transition'];
+  $width?: CSSProperties['width'];
+  $zIndex?: CSSProperties['zIndex'];
+  $wrap?: CSSProperties['flexWrap'];
+  // Theming props
+  $layer?: 'background' | 'content' | 'border';
   $theme?:
-    | 'primary'
-    | 'primary-text'
-    | 'secondary'
-    | 'secondary-text'
+    | 'brand'
+    | 'error'
+    | 'gray'
     | 'info'
     | 'success'
     | 'warning'
-    | 'danger'
-    | 'greyscale';
-  $transition?: CSSProperties['transition'];
-  $variation?:
-    | 'text'
-    | '000'
-    | '100'
-    | '200'
-    | '300'
-    | '400'
-    | '500'
-    | '600'
-    | '700'
-    | '800'
-    | '900'
-    | '1000';
-  $width?: CSSProperties['width'];
-  $wrap?: CSSProperties['flexWrap'];
-  $zIndex?: CSSProperties['zIndex'];
+    | 'neutral'
+    | 'contextual'
+    | 'disabled'
+    | (string & {});
+  $scope?: 'surface' | 'semantic' | 'palette' | (string & {});
+  $variation?: 'primary' | 'secondary' | 'tertiary' | (string & {});
+  $withThemeBG?: boolean;
+  $withThemeBorder?: boolean;
+  $withThemeInherited?: boolean;
 }
 
 export type BoxType = ComponentPropsWithRef<typeof Box>;
 
 export const Box = styled('div')<BoxProps>`
   ${({ $align }) => $align && `align-items: ${$align};`}
-  ${({ $background }) => $background && `background: ${$background};`}
-  ${({ $color }) => $color && `color: ${$color};`}
   ${({ $cursor }) => $cursor && `cursor: ${$cursor};`}
   ${({ $direction }) => `flex-direction: ${$direction || 'column'};`}
   ${({ $display, as }) =>
@@ -80,9 +74,9 @@ export const Box = styled('div')<BoxProps>`
   ${({ $height }) => $height && `height: ${$height};`}
   ${({ $hasTransition }) =>
     $hasTransition && $hasTransition === 'slow'
-      ? `transition: all 0.5s ease-in-out;`
+      ? `transition: all 0.5s var(--c--globals--transitions--ease-out);`
       : $hasTransition
-        ? `transition: all 0.3s ease-in-out;`
+        ? `transition: all var(--c--globals--transitions--duration) var(--c--globals--transitions--ease-out);`
         : ''}
   ${({ $justify }) => $justify && `justify-content: ${$justify};`}
   ${({ $margin }) => $margin && stylesMargin($margin)}
@@ -96,11 +90,85 @@ export const Box = styled('div')<BoxProps>`
   ${({ $position }) => $position && `position: ${$position};`}
   ${({ $radius }) => $radius && `border-radius: ${$radius};`}
   ${({ $shrink }) => $shrink && `flex-shrink: ${$shrink};`}
-  ${({ $theme, $variation }) => {
-    if (!$theme || !$variation) {
+  ${({
+    $layer = 'border',
+    $theme = 'brand',
+    $variation = 'primary',
+    $scope = 'semantic',
+    $border,
+    $withThemeBorder,
+    $withThemeInherited,
+  }) => {
+    if ($border) {
+      return `border: ${$border};`;
+    }
+
+    if (!$layer || !$scope || !$theme || !$withThemeBorder) {
       return '';
     }
-    return `color: var(--c--theme--colors--${$theme}-${$variation});`;
+
+    if ($withThemeInherited) {
+      return `border: inherit;`;
+    }
+
+    return `border: 1px solid var(--c--contextuals--${$layer}--${$scope}${$theme ? `--${$theme}` : ''}${$variation ? `--${$variation}` : ''});`;
+  }}
+  ${({
+    $layer = 'background',
+    $theme = 'brand',
+    $variation = 'primary',
+    $scope = 'semantic',
+    $background,
+    $withThemeBG,
+    $withThemeInherited,
+  }) => {
+    if ($background) {
+      return `background: ${$background};`;
+    }
+
+    if (!$layer || !$scope || !$theme || !$withThemeBG) {
+      return '';
+    }
+
+    if ($withThemeInherited) {
+      return `background: inherit;`;
+    }
+
+    return `background: var(--c--contextuals--${$layer}--${$scope}${$theme ? `--${$theme}` : ''}${$variation ? `--${$variation}` : ''});`;
+  }}
+  ${({
+    $layer = 'content',
+    $theme = 'neutral',
+    $variation = 'primary',
+    $scope = 'semantic',
+    $color,
+    $withThemeBG,
+    $withThemeInherited,
+  }) => {
+    if ($color) {
+      return `color: ${$color};`;
+    }
+
+    if (!$layer || !$scope) {
+      return '';
+    }
+
+    // There is a special case when primary with background
+    if (
+      $withThemeBG &&
+      $layer === 'content' &&
+      $scope === 'semantic' &&
+      $variation === 'primary' &&
+      $theme
+    ) {
+      $variation = `on-${$theme}`;
+    }
+
+    if ($withThemeInherited) {
+      return `color: inherit;`;
+    }
+
+    return `color: var(--c--contextuals--${$layer}--${$scope}${$theme ? `--${$theme}` : ''}${$variation ? `--${$variation}` : ''});`;
   }}
   ${({ $transition }) => $transition && `transition: ${$transition};`}
   ${({ $width }) => $width && `width: ${$width};`}
@@ -121,7 +189,7 @@ export const Box = styled('div')<BoxProps>`
     return (
       effect &&
       ` 
-        transition: all 0.3s ease-in-out;
+        transition: all var(--c--globals--transitions--duration) var(--c--globals--transitions--ease-out);
         ${effect}
       `
     );
diff --git a/src/frontend/apps/impress/src/components/BoxButton.tsx b/src/frontend/apps/impress/src/components/BoxButton.tsx
index 08715116..76c96bcc 100644
--- a/src/frontend/apps/impress/src/components/BoxButton.tsx
+++ b/src/frontend/apps/impress/src/components/BoxButton.tsx
@@ -24,8 +24,8 @@ export type BoxButtonType = BoxType & {
  */
 const BoxButton = forwardRef<HTMLDivElement, BoxButtonType>(
   ({ $css, ...props }, ref) => {
-    const theme = props.$theme || 'greyscale';
-    const variation = props.$variation || '400';
+    const theme = props.$theme || 'gray';
+    const variation = props.$variation || 'primary';
 
     return (
       <Box
@@ -40,15 +40,14 @@ const BoxButton = forwardRef<HTMLDivElement, BoxButtonType>(
           border: none;
           outline: none;
           font-family: inherit;
-          color: ${props.disabled
-            ? `var(--c--theme--colors--${theme}-400) !important`
-            : `inherit`};
-
+          color: ${props.disabled &&
+          `var(--c--contextuals--content--semantic--disabled--primary)`};
           &:focus-visible {
             transition: none;
-            outline: 2px solid var(--c--theme--colors--${theme}-${variation});
+            outline: 2px solid
+              var(--c--contextuals--content--semantic--${theme}--${variation});
             border-radius: 1px;
-            outline-offset: 4px;
+            outline-offset: var(--c--globals--spacings--st);
           }
           ${$css || ''}
         `}
diff --git a/src/frontend/apps/impress/src/components/Card.tsx b/src/frontend/apps/impress/src/components/Card.tsx
index 4bc35a7f..b9fe4580 100644
--- a/src/frontend/apps/impress/src/components/Card.tsx
+++ b/src/frontend/apps/impress/src/components/Card.tsx
@@ -1,27 +1,23 @@
 import { PropsWithChildren } from 'react';
-import { css } from 'styled-components';
-
-import { useCunninghamTheme } from '@/cunningham';
 
 import { Box, BoxType } from '.';
 
 export const Card = ({
   children,
   className,
-  $css,
   ...props
 }: PropsWithChildren<BoxType>) => {
-  const { colorsTokens } = useCunninghamTheme();
-
   return (
     <Box
+      role="region"
+      $withThemeBG
+      $withThemeBorder
       className={`--docs--card ${className || ''}`}
-      $background="white"
-      $radius="4px"
-      $css={css`
-        border: 1px solid ${colorsTokens['greyscale-200']};
-        ${$css}
-      `}
+      $radius="var(--c--globals--spacings--st)"
+      $padding={{ horizontal: 'xs', vertical: '3xs' }}
+      $scope={props.$theme ? props.$scope || 'semantic' : 'surface'}
+      $theme={props.$theme || 'primary'}
+      $variation={props.$theme ? props.$variation || 'tertiary' : ''}
       {...props}
     >
       {children}
diff --git a/src/frontend/apps/impress/src/components/DropButton.tsx b/src/frontend/apps/impress/src/components/DropButton.tsx
index 09772b4b..f3816d57 100644
--- a/src/frontend/apps/impress/src/components/DropButton.tsx
+++ b/src/frontend/apps/impress/src/components/DropButton.tsx
@@ -14,10 +14,11 @@ import { BoxProps } from './Box';
 
 const StyledPopover = styled(Popover)`
   background-color: white;
-  border-radius: 4px;
-  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
-  border: 1px solid #dddddd;
-  transition: opacity 0.2s ease-in-out;
+  border-radius: var(--c--globals--spacings--st);
+  box-shadow: 0 0 6px 0 rgba(0, 0, 145, 0.1);
+  border: 1px solid var(--c--contextuals--border--surface--primary);
+  transition: opacity var(--c--globals--transitions--duration)
+    var(--c--globals--transitions--ease-out);
 `;
 
 interface StyledButtonProps {
@@ -28,18 +29,22 @@ const StyledButton = styled(Button)<StyledButtonProps>`
   border: none;
   background: none;
   outline: none;
-  font-weight: 500;
-  font-size: 0.938rem;
-  padding: 0;
-  border-radius: 4px;
+  font-weight: var(--c--components--button--font-weight);
+  font-size: var(--c--components--button--medium-font-size);
+  padding: var(--c--globals--spacings--0);
+  border-radius: var(--c--globals--spacings--st);
+  color: var(--c--contextuals--content--semantic--brand--tertiary);
   &:hover {
     background-color: var(
-      --c--components--button--primary-text--background--color-hover
+      --c--contextuals--background--semantic--contextual--primary
     );
   }
   &:focus-visible {
-    box-shadow: 0 0 0 2px var(--c--theme--colors--primary-400);
-    border-radius: 4px;
+    box-shadow: 0 0 0 2px var(--c--globals--colors--brand-400);
+    background-color: var(
+      --c--contextuals--background--semantic--brand--tertiary-hover
+    );
+    border-radius: var(--c--globals--spacings--st);
   }
   ${({ $css }) => $css};
 `;
diff --git a/src/frontend/apps/impress/src/components/Icon.tsx b/src/frontend/apps/impress/src/components/Icon.tsx
index f5c0baa1..39234505 100644
--- a/src/frontend/apps/impress/src/components/Icon.tsx
+++ b/src/frontend/apps/impress/src/components/Icon.tsx
@@ -13,7 +13,7 @@ export const Icon = ({
   iconName,
   disabled,
   variant = 'outlined',
-  $variation = 'text',
+  $theme = 'neutral',
   ...textProps
 }: IconProps) => {
   const hasLabel = 'aria-label' in textProps || 'aria-labelledby' in textProps;
@@ -28,7 +28,7 @@ export const Icon = ({
         'material-icons': variant === 'outlined',
         'material-symbols-outlined': variant === 'symbols-outlined',
       })}
-      $variation={disabled ? '300' : $variation}
+      $theme={disabled ? 'disabled' : $theme}
       aria-disabled={disabled}
       {...textProps}
     >
diff --git a/src/frontend/apps/impress/src/components/InfiniteScroll.tsx b/src/frontend/apps/impress/src/components/InfiniteScroll.tsx
index 5a0ee14b..216de802 100644
--- a/src/frontend/apps/impress/src/components/InfiniteScroll.tsx
+++ b/src/frontend/apps/impress/src/components/InfiniteScroll.tsx
@@ -39,7 +39,8 @@ export const InfiniteScroll = ({
         {!isLoading && hasMore && (
           <Button
             onClick={() => void next()}
-            color="primary-text"
+            color="brand"
+            variant="bordered"
             icon={<Icon iconName="arrow_downward" />}
           >
             {buttonLabel ?? t('Load more')}
diff --git a/src/frontend/apps/impress/src/components/Loading.tsx b/src/frontend/apps/impress/src/components/Loading.tsx
index db6c89de..0e6c4bf4 100644
--- a/src/frontend/apps/impress/src/components/Loading.tsx
+++ b/src/frontend/apps/impress/src/components/Loading.tsx
@@ -24,12 +24,12 @@ export const LoadMoreText = ({
       className="--docs--load-more"
     >
       <Icon
-        $theme="primary"
-        $variation="800"
+        $theme="brand"
+        $variation="secondary"
         iconName="arrow_downward"
         $size="md"
       />
-      <Text $theme="primary" $variation="800">
+      <Text $theme="brand" $variation="secondary">
         {t('Load more')}
       </Text>
     </Box>
diff --git a/src/frontend/apps/impress/src/components/Text.tsx b/src/frontend/apps/impress/src/components/Text.tsx
index 6b0f761c..42a057c1 100644
--- a/src/frontend/apps/impress/src/components/Text.tsx
+++ b/src/frontend/apps/impress/src/components/Text.tsx
@@ -5,7 +5,7 @@ import { tokens } from '@/cunningham';
 
 import { Box, BoxProps } from './Box';
 
-const { sizes } = tokens.themes.default.theme.font;
+const { sizes } = tokens.themes.default.globals.font;
 type TextSizes = keyof typeof sizes;
 
 export interface TextProps extends BoxProps {
@@ -27,24 +27,14 @@ export const TextStyled = styled(Box)<TextProps>`
   ${({ $size }) =>
     $size &&
     `font-size: ${$size in sizes ? sizes[$size as TextSizes] : $size};`}
-  ${({ $color }) => $color && `color: ${$color};`}
   ${({ $ellipsis }) =>
     $ellipsis &&
     `white-space: nowrap; overflow: hidden; text-overflow: ellipsis;`}
 `;
 
 const Text = forwardRef<HTMLElement, ComponentPropsWithRef<typeof TextStyled>>(
-  ({ className, ...props }, ref) => {
-    return (
-      <TextStyled
-        ref={ref}
-        as="span"
-        $theme="greyscale"
-        $variation="text"
-        className={className}
-        {...props}
-      />
-    );
+  (props, ref) => {
+    return <TextStyled ref={ref} as="span" {...props} />;
   },
 );
 
diff --git a/src/frontend/apps/impress/src/components/TextErrors.tsx b/src/frontend/apps/impress/src/components/TextErrors.tsx
index 9bfa6453..7ba52520 100644
--- a/src/frontend/apps/impress/src/components/TextErrors.tsx
+++ b/src/frontend/apps/impress/src/components/TextErrors.tsx
@@ -7,7 +7,7 @@ import { Box, Text, TextType } from '@/components';
 
 const AlertStyled = styled(Alert)`
   & .c__button--tertiary:hover {
-    background-color: var(--c--theme--colors--greyscale-200);
+    background-color: var(--c--globals--colors--gray-200);
   }
 `;
 
@@ -54,8 +54,7 @@ export const TextOnlyErrors = ({
         causes.map((cause, i) => (
           <Text
             key={`causes-${i}`}
-            $theme="danger"
-            $variation="600"
+            $theme="error"
             $textAlign="center"
             {...textProps}
           >
@@ -64,12 +63,7 @@ export const TextOnlyErrors = ({
         ))}
 
       {!causes && (
-        <Text
-          $theme="danger"
-          $variation="600"
-          $textAlign="center"
-          {...textProps}
-        >
+        <Text $theme="error" $textAlign="center" {...textProps}>
           {defaultMessage || t('Something bad happens, please retry.')}
         </Text>
       )}
diff --git a/src/frontend/apps/impress/src/components/dropdown-menu/DropdownMenu.tsx b/src/frontend/apps/impress/src/components/dropdown-menu/DropdownMenu.tsx
index 506a1b6b..cb99e603 100644
--- a/src/frontend/apps/impress/src/components/dropdown-menu/DropdownMenu.tsx
+++ b/src/frontend/apps/impress/src/components/dropdown-menu/DropdownMenu.tsx
@@ -124,18 +124,19 @@ export const DropdownMenu = ({
           >
             <Box>{children}</Box>
             <Icon
-              $variation="600"
               $css={
                 arrowCss ??
                 css`
-                  color: var(--c--theme--colors--primary-600);
+                  color: var(--c--globals--colors--brand-600);
                 `
               }
               iconName={isOpen ? 'arrow_drop_up' : 'arrow_drop_down'}
             />
           </Box>
         ) : (
-          <Box ref={blockButtonRef}>{children}</Box>
+          <Box ref={blockButtonRef} $color="inherit">
+            {children}
+          </Box>
         )
       }
     >
@@ -147,7 +148,6 @@ export const DropdownMenu = ({
       >
         {topMessage && (
           <Text
-            $variation="700"
             $wrap="wrap"
             $size="xs"
             $weight="bold"
@@ -186,8 +186,8 @@ export const DropdownMenu = ({
                 key={option.label}
                 $align="center"
                 $justify="space-between"
-                $background={colorsTokens['greyscale-000']}
-                $color={colorsTokens['primary-600']}
+                $background={colorsTokens['gray-000']}
+                $color={colorsTokens['brand-600']}
                 $padding={{ vertical: 'xs', horizontal: 'base' }}
                 $width="100%"
                 $gap={spacingsTokens['base']}
@@ -200,30 +200,39 @@ export const DropdownMenu = ({
                   `}
                   ${index === options.length - 1 &&
                   css`
-                    border-bottom-left-radius: 4px;
-                    border-bottom-right-radius: 4px;
+                    border-bottom-left-radius: var(--c--globals--spacings--st);
+                    border-bottom-right-radius: var(--c--globals--spacings--st);
                   `}
-                font-size: var(--c--theme--font--sizes--sm);
-                  color: var(--c--theme--colors--greyscale-1000);
-                  font-weight: 500;
+                  font-size: var(--c--globals--font--sizes--sm);
+                  color: var(--c--globals--colors--gray-1000);
+                  font-weight: var(--c--globals--font--weights--medium);
                   cursor: ${isDisabled ? 'not-allowed' : 'pointer'};
                   user-select: none;
 
                   &:hover {
-                    background-color: var(--c--theme--colors--greyscale-050);
+                    background-color: var(
+                      --c--contextuals--background--semantic--contextual--primary
+                    );
                   }
 
                   &:focus-visible {
-                    outline: 2px solid var(--c--theme--colors--primary-400);
+                    outline: 2px solid var(--c--globals--colors--brand-400);
                     outline-offset: -2px;
-                    background-color: var(--c--theme--colors--greyscale-050);
+                    background-color: var(
+                      --c--contextuals--background--semantic--contextual--primary
+                    );
                   }
 
-                  ${isFocused &&
+                  /**
+                  * TODO: This part seems to have a problem with DocToolBox
+                  */
+                  /* ${isFocused &&
                   css`
                     outline-offset: -2px;
-                    background-color: var(--c--theme--colors--greyscale-050);
-                  `}
+                    background-color: var(
+                      --c--contextuals--background--semantic--contextual--primary
+                    );
+                  `} */
                 `}
               >
                 <Box
@@ -234,8 +243,8 @@ export const DropdownMenu = ({
                   {option.icon && typeof option.icon === 'string' && (
                     <Icon
                       $size="20px"
-                      $theme="greyscale"
-                      $variation={isDisabled ? '400' : '1000'}
+                      $theme="gray"
+                      $variation={isDisabled ? 'tertiary' : 'primary'}
                       iconName={option.icon}
                       aria-hidden="true"
                     />
@@ -243,7 +252,7 @@ export const DropdownMenu = ({
                   {option.icon &&
                     typeof option.icon !== 'string' &&
                     option.icon}
-                  <Text $variation={isDisabled ? '400' : '1000'}>
+                  <Text $variation={isDisabled ? 'tertiary' : 'primary'}>
                     {option.label}
                   </Text>
                 </Box>
@@ -252,7 +261,7 @@ export const DropdownMenu = ({
                   <Icon
                     iconName="check"
                     $size="20px"
-                    $theme="greyscale"
+                    $theme="gray"
                     aria-hidden="true"
                   />
                 )}
diff --git a/src/frontend/apps/impress/src/components/filter/FilterDropdown.tsx b/src/frontend/apps/impress/src/components/filter/FilterDropdown.tsx
index ce71f208..af849c06 100644
--- a/src/frontend/apps/impress/src/components/filter/FilterDropdown.tsx
+++ b/src/frontend/apps/impress/src/components/filter/FilterDropdown.tsx
@@ -33,32 +33,27 @@ export const FilterDropdown = ({
       <Box
         $css={css`
           border: 1px solid
-            ${selectedOption
-              ? 'var(--c--theme--colors--primary-500)'
-              : 'var(--c--theme--colors--greyscale-250)'};
-          border-radius: 4px;
-          background-color: ${selectedOption
-            ? 'var(--c--theme--colors--primary-100)'
-            : 'var(--c--theme--colors--greyscale-000)'};
-          gap: var(--c--theme--spacings--2xs);
-          padding: var(--c--theme--spacings--2xs) var(--c--theme--spacings--xs);
+            var(--c--contextuals--border--semantic--neutral--tertiary);
+          border-radius: var(--c--globals--spacings--st);
+          background-color: var(
+            --c--contextuals--background--semantic--neutral--tertiary
+          );
+          gap: var(--c--globals--spacings--2xs);
+          padding: var(--c--globals--spacings--2xs)
+            var(--c--globals--spacings--xs);
         `}
         color="secondary"
         $direction="row"
         $align="center"
       >
-        <Text
-          $weight={400}
-          $variation={selectedOption ? '800' : '600'}
-          $theme={selectedOption ? 'primary' : 'greyscale'}
-        >
+        <Text $weight={400} $variation="tertiary" $theme="neutral">
           {selectedOption?.label ?? options[0].label}
         </Text>
         <Icon
-          $size="16px"
+          $size="s"
           iconName="keyboard_arrow_down"
-          $variation={selectedOption ? '800' : '600'}
-          $theme={selectedOption ? 'primary' : 'greyscale'}
+          $variation="tertiary"
+          $theme="neutral"
         />
       </Box>
     </DropdownMenu>
diff --git a/src/frontend/apps/impress/src/components/modal/AlertModal.tsx b/src/frontend/apps/impress/src/components/modal/AlertModal.tsx
index c1d038f0..9f64ad2c 100644
--- a/src/frontend/apps/impress/src/components/modal/AlertModal.tsx
+++ b/src/frontend/apps/impress/src/components/modal/AlertModal.tsx
@@ -38,7 +38,6 @@ export const AlertModal = ({
           $margin="0"
           id="alert-modal-title"
           $align="flex-start"
-          $variation="1000"
         >
           {title}
         </Text>
@@ -47,7 +46,7 @@ export const AlertModal = ({
         <>
           <Button
             aria-label={`${t('Cancel')} - ${title}`}
-            color="secondary"
+            variant="secondary"
             fullWidth
             onClick={() => onClose()}
           >
@@ -55,7 +54,7 @@ export const AlertModal = ({
           </Button>
           <Button
             aria-label={confirmLabel ?? t('Confirm')}
-            color="danger"
+            color="error"
             onClick={onConfirm}
           >
             {confirmLabel ?? t('Confirm')}
@@ -65,7 +64,7 @@ export const AlertModal = ({
     >
       <Box className="--docs--alert-modal">
         <Box>
-          <Text $variation="600" as="p">
+          <Text $variation="secondary" as="p">
             {description}
           </Text>
         </Box>
diff --git a/src/frontend/apps/impress/src/components/modal/ButtonCloseModal.tsx b/src/frontend/apps/impress/src/components/modal/ButtonCloseModal.tsx
index 983040b4..a778b72e 100644
--- a/src/frontend/apps/impress/src/components/modal/ButtonCloseModal.tsx
+++ b/src/frontend/apps/impress/src/components/modal/ButtonCloseModal.tsx
@@ -1,18 +1,21 @@
 import { Button, type ButtonProps } from '@openfun/cunningham-react';
 import React from 'react';
 
-import { Box } from '@/components';
+import { Icon } from '@/components';
 
 export const ButtonCloseModal = (props: ButtonProps) => {
   return (
     <Button
       type="button"
       size="small"
-      color="primary-text"
+      color="brand"
+      variant="tertiary"
       icon={
-        <Box as="span" aria-hidden="true" className="material-icons-filled">
-          close
-        </Box>
+        <Icon
+          $withThemeInherited
+          iconName="close"
+          className="material-icons-filled"
+        />
       }
       {...props}
     />
diff --git a/src/frontend/apps/impress/src/components/quick-search/QuickSearchGroup.tsx b/src/frontend/apps/impress/src/components/quick-search/QuickSearchGroup.tsx
index 1d63238a..3de706bc 100644
--- a/src/frontend/apps/impress/src/components/quick-search/QuickSearchGroup.tsx
+++ b/src/frontend/apps/impress/src/components/quick-search/QuickSearchGroup.tsx
@@ -59,11 +59,7 @@ export const QuickSearchGroup = <T,>({
           );
         })}
         {group.emptyString && group.elements.length === 0 && (
-          <Text
-            $variation="500"
-            $margin={{ left: '2xs', bottom: '3xs' }}
-            $size="sm"
-          >
+          <Text $margin={{ left: '2xs', bottom: '3xs' }} $size="sm">
             {group.emptyString}
           </Text>
         )}
diff --git a/src/frontend/apps/impress/src/components/quick-search/QuickSearchInput.tsx b/src/frontend/apps/impress/src/components/quick-search/QuickSearchInput.tsx
index ff435768..a088362c 100644
--- a/src/frontend/apps/impress/src/components/quick-search/QuickSearchInput.tsx
+++ b/src/frontend/apps/impress/src/components/quick-search/QuickSearchInput.tsx
@@ -53,7 +53,7 @@ export const QuickSearchInput = ({
         $padding={{ horizontal: 'base', vertical: 'sm' }}
       >
         {!loading && (
-          <Icon iconName="search" $variation="600" aria-hidden="true" />
+          <Icon iconName="search" $variation="secondary" aria-hidden="true" />
         )}
         {loading && (
           <div>
diff --git a/src/frontend/apps/impress/src/components/quick-search/QuickSearchStyle.tsx b/src/frontend/apps/impress/src/components/quick-search/QuickSearchStyle.tsx
index 766db7f1..65bfee18 100644
--- a/src/frontend/apps/impress/src/components/quick-search/QuickSearchStyle.tsx
+++ b/src/frontend/apps/impress/src/components/quick-search/QuickSearchStyle.tsx
@@ -19,25 +19,25 @@ export const QuickSearchStyle = createGlobalStyle`
       border: none;
       width: 100%;
       font-size: 17px;
-      padding: 8px;
+      padding: var(--c--globals--spacings--xs);
       background: white;
       outline: none;
-      color: var(--c--theme--colors--greyscale-1000);
-      border-radius: 0;
+      color: var(--c--globals--colors--gray-1000);
+      border-radius: var(--c--globals--spacings--0);
 
       &::placeholder {
-        color: var(--c--theme--colors--greyscale-500);
+        color: var(--c--globals--colors--gray-500);
       }
     }
 
     [cmdk-item] {
       content-visibility: auto;
       cursor: pointer;
-      border-radius: var(--c--theme--spacings--xs);
-      font-size: 14px;
+      border-radius: var(--c--globals--spacings--xs);
+      font-size: var(--c--globals--font--sizes--sm);
       display: flex;
       align-items: center;
-      gap: 8px;
+      gap:  var(--c--globals--spacings--xs);
       user-select: none;
       will-change: background, color;
       transition: all 150ms ease;
@@ -49,19 +49,19 @@ export const QuickSearchStyle = createGlobalStyle`
 
       &:hover,
       &[data-selected='true'] {
-        background: var(--c--theme--colors--greyscale-100);
+        background: var(--c--contextuals--background--semantic--contextual--primary);
         .show-right-on-focus {
           opacity: 1;
         }
       }
 
       &[data-disabled='true'] {
-        color: var(--c--theme--colors--greyscale-500);
+        color: var(--c--globals--colors--gray-500);
         cursor: not-allowed;
       }
 
       & + [cmdk-item] {
-        margin-top: 4px;
+        margin-top: var(--c--globals--spacings--st);
       }
     }
 
@@ -79,11 +79,11 @@ export const QuickSearchStyle = createGlobalStyle`
       kbd {
         font-size: 12px;
         min-width: 20px;
-        padding: 4px;
+        padding: var(--c--globals--spacings--st);
         height: 20px;
-        border-radius: 4px;
+        border-radius: var(--c--globals--spacings--st);
         color: white;
-        background: var(--c--theme--colors--greyscale-500);
+        background: var(--c--globals--colors--gray-500);
         display: inline-flex;
         align-items: center;
         justify-content: center;
@@ -94,23 +94,23 @@ export const QuickSearchStyle = createGlobalStyle`
     [cmdk-separator] {
       height: 1px;
       width: 100%;
-      background: var(--c--theme--colors--greyscale-500);
-      margin: 4px 0;
+      background: var(--c--globals--colors--gray-500);
+      margin: var(--c--globals--spacings--st) 0;
     }
 
     *:not([hidden]) + [cmdk-group] {
-      margin-top: 8px;
+      margin-top: var(--c--globals--spacings--xs);
     }
 
     [cmdk-group-heading] {
       user-select: none;
-      font-size: var(--c--theme--font--sizes--sm);
-      color: var(--c--theme--colors--greyscale-700);
+      font-size: var(--c--globals--font--sizes--sm);
+      color: var(--c--globals--colors--gray-700);
       font-weight: bold;
 
       display: flex;
       align-items: center;
-      margin-bottom: var(--c--theme--spacings--xs);
+      margin-bottom: var(--c--globals--spacings--xs);
     }
 
     [cmdk-empty] {
@@ -128,9 +128,9 @@ export const QuickSearchStyle = createGlobalStyle`
     }
 
     .c__modal__title {
-      font-size: var(--c--theme--font--sizes--xs);
-      padding: var(--c--theme--spacings--base);
-      margin-bottom: 0;
+      font-size: var(--c--globals--font--sizes--xs);
+      padding: var(--c--globals--spacings--base);
+      margin-bottom: var(--c--globals--spacings--0);
     }
   }
 `;
diff --git a/src/frontend/apps/impress/src/components/separators/HorizontalSeparator.tsx b/src/frontend/apps/impress/src/components/separators/HorizontalSeparator.tsx
index d446f2b0..94faf9a3 100644
--- a/src/frontend/apps/impress/src/components/separators/HorizontalSeparator.tsx
+++ b/src/frontend/apps/impress/src/components/separators/HorizontalSeparator.tsx
@@ -1,26 +1,16 @@
-import { useCunninghamTheme } from '@/cunningham';
 import { Spacings } from '@/utils';
 
 import { Box } from '../Box';
 
-export enum SeparatorVariant {
-  LIGHT = 'light',
-  DARK = 'dark',
-}
-
 type Props = {
-  variant?: SeparatorVariant;
   $withPadding?: boolean;
   customPadding?: Spacings;
 };
 
 export const HorizontalSeparator = ({
-  variant = SeparatorVariant.LIGHT,
   $withPadding = true,
   customPadding,
 }: Props) => {
-  const { colorsTokens } = useCunninghamTheme();
-
   const padding = $withPadding
     ? (customPadding ?? 'base')
     : ('none' as Spacings);
@@ -30,11 +20,7 @@ export const HorizontalSeparator = ({
       $height="1px"
       $width="100%"
       $margin={{ vertical: padding }}
-      $background={
-        variant === SeparatorVariant.DARK
-          ? '#e5e5e533'
-          : colorsTokens['greyscale-100']
-      }
+      $background="var(--c--contextuals--border--surface--primary)"
       className="--docs--horizontal-separator"
     />
   );
diff --git a/src/frontend/apps/impress/src/components/separators/SeparatedSection.tsx b/src/frontend/apps/impress/src/components/separators/SeparatedSection.tsx
index 0411f5b0..fdc46817 100644
--- a/src/frontend/apps/impress/src/components/separators/SeparatedSection.tsx
+++ b/src/frontend/apps/impress/src/components/separators/SeparatedSection.tsx
@@ -13,7 +13,8 @@ export const SeparatedSection = ({
   showSeparator = true,
   children,
 }: PropsWithChildren<Props>) => {
-  const { colorsTokens, spacingsTokens } = useCunninghamTheme();
+  const { spacingsTokens } = useCunninghamTheme();
+
   return (
     <Box
       $css={css`
@@ -21,7 +22,8 @@ export const SeparatedSection = ({
         padding: ${spacingsTokens['sm']} 0;
         ${showSeparator &&
         css`
-          border-bottom: 1px solid ${colorsTokens['greyscale-200']};
+          border-bottom: 1px solid
+            var(--c--contextuals--border--surface--primary);
         `}
       `}
     >
diff --git a/src/frontend/apps/impress/src/cunningham/__tests__/useCunninghamTheme.spec.tsx b/src/frontend/apps/impress/src/cunningham/__tests__/useCunninghamTheme.spec.tsx
index 208d8942..709f6d73 100644
--- a/src/frontend/apps/impress/src/cunningham/__tests__/useCunninghamTheme.spec.tsx
+++ b/src/frontend/apps/impress/src/cunningham/__tests__/useCunninghamTheme.spec.tsx
@@ -2,13 +2,13 @@ import { useCunninghamTheme } from '../useCunninghamTheme';
 
 describe('<useCunninghamTheme />', () => {
   it('has the logo correctly set', () => {
-    expect(useCunninghamTheme.getState().themeTokens.logo?.src).toBe('');
+    expect(useCunninghamTheme.getState().componentTokens.logo?.src).toBe('');
 
     // Change theme
     useCunninghamTheme.getState().setTheme('dsfr');
 
-    const { themeTokens } = useCunninghamTheme.getState();
-    const logo = themeTokens.logo;
+    const { componentTokens } = useCunninghamTheme.getState();
+    const logo = componentTokens.logo;
     expect(logo?.src).toBe('/assets/logo-gouv.svg');
     expect(logo?.widthHeader).toBe('110px');
     expect(logo?.widthFooter).toBe('220px');
diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-style.css b/src/frontend/apps/impress/src/cunningham/cunningham-style.css
index 54d0c67d..84d9b3c6 100644
--- a/src/frontend/apps/impress/src/cunningham/cunningham-style.css
+++ b/src/frontend/apps/impress/src/cunningham/cunningham-style.css
@@ -26,7 +26,7 @@
   * Select
   **/
   --c--components--forms-select--value-color--disabled: var(
-    --c--theme--colors--greyscale-400
+    --c--globals--colors--gray-400
   );
 
   /**
@@ -44,6 +44,14 @@
   contain: content;
 }
 
+.c__button:disabled {
+  cursor: unset;
+}
+
+.c__button:focus-visible {
+  outline: none;
+}
+
 .c__button--medium {
   min-height: var(--c--components--button--medium-height);
   height: auto;
@@ -60,14 +68,11 @@
  * Tooltip
 */
 .c__tooltip {
-  padding: 4px 6px;
+  padding: var(--c--globals--font--sizes--sm) var(--c--globals--spacings--xxs);
 }
 
-/**
- * Image System
-*/
-.c__image-system-filter {
-  filter: var(--c--components--image-system-filter);
+.c__tooltip .react-aria-OverlayArrow svg {
+  display: none;
 }
 
 /**
diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css
index 8bfbc097..2f69739d 100644
--- a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css
+++ b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css
@@ -1,565 +1,2064 @@
 :root {
-  --c--theme--colors--secondary-text: #fff;
-  --c--theme--colors--secondary-100: #fee9ea;
-  --c--theme--colors--secondary-200: #fedfdf;
-  --c--theme--colors--secondary-300: #fdbfbf;
-  --c--theme--colors--secondary-400: #e1020f;
-  --c--theme--colors--secondary-500: #c91a1f;
-  --c--theme--colors--secondary-600: #5e2b2b;
-  --c--theme--colors--secondary-700: #3b2424;
-  --c--theme--colors--secondary-800: #341f1f;
-  --c--theme--colors--secondary-900: #2b1919;
-  --c--theme--colors--info-text: #0078f3;
-  --c--theme--colors--info-100: #e8edff;
-  --c--theme--colors--info-200: #dde5ff;
-  --c--theme--colors--info-300: #bccdff;
-  --c--theme--colors--info-400: #518fff;
-  --c--theme--colors--info-500: #0078f3;
-  --c--theme--colors--info-600: #0063cb;
-  --c--theme--colors--info-700: #273961;
-  --c--theme--colors--info-800: #222a3f;
-  --c--theme--colors--info-900: #1d2437;
-  --c--theme--colors--greyscale-100: #eee;
-  --c--theme--colors--greyscale-200: #e5e5e5;
-  --c--theme--colors--greyscale-300: #cecece;
-  --c--theme--colors--greyscale-400: #929292;
-  --c--theme--colors--greyscale-500: #7c7c7c;
-  --c--theme--colors--greyscale-600: #666;
-  --c--theme--colors--greyscale-700: #3a3a3a;
-  --c--theme--colors--greyscale-800: #2a2a2a;
-  --c--theme--colors--greyscale-900: #242424;
-  --c--theme--colors--greyscale-000: #fff;
-  --c--theme--colors--primary-100: #ececfe;
-  --c--theme--colors--primary-200: #e3e3fd;
-  --c--theme--colors--primary-300: #cacafb;
-  --c--theme--colors--primary-400: #8585f6;
-  --c--theme--colors--primary-500: #6a6af4;
-  --c--theme--colors--primary-600: #313178;
-  --c--theme--colors--primary-700: #272747;
-  --c--theme--colors--primary-800: #000091;
-  --c--theme--colors--primary-900: #21213f;
-  --c--theme--colors--success-100: #dffee6;
-  --c--theme--colors--success-200: #b8fec9;
-  --c--theme--colors--success-300: #88fdaa;
-  --c--theme--colors--success-400: #3bea7e;
-  --c--theme--colors--success-500: #1f8d49;
-  --c--theme--colors--success-600: #18753c;
-  --c--theme--colors--success-700: #204129;
-  --c--theme--colors--success-800: #1e2e22;
-  --c--theme--colors--success-900: #19281d;
-  --c--theme--colors--warning-100: #fff4f3;
-  --c--theme--colors--warning-200: #ffe9e6;
-  --c--theme--colors--warning-300: #ffded9;
-  --c--theme--colors--warning-400: #ffbeb4;
-  --c--theme--colors--warning-500: #d64d00;
-  --c--theme--colors--warning-600: #b34000;
-  --c--theme--colors--warning-700: #5e2c21;
-  --c--theme--colors--warning-800: #3e241e;
-  --c--theme--colors--warning-900: #361e19;
-  --c--theme--colors--danger-100: #ffe9e9;
-  --c--theme--colors--danger-200: #fdd;
-  --c--theme--colors--danger-300: #ffbdbd;
-  --c--theme--colors--danger-400: #ff5655;
-  --c--theme--colors--danger-500: #f60700;
-  --c--theme--colors--danger-600: #ce0500;
-  --c--theme--colors--danger-700: #642626;
-  --c--theme--colors--danger-800: #412121;
-  --c--theme--colors--danger-900: #391c1c;
-  --c--theme--colors--primary-text: #000091;
-  --c--theme--colors--success-text: #1f8d49;
-  --c--theme--colors--warning-text: #d64d00;
-  --c--theme--colors--danger-text: #fff;
-  --c--theme--colors--primary-050: #f5f5fe;
-  --c--theme--colors--primary-150: #f4f4fd;
-  --c--theme--colors--greyscale-text: #303c4b;
-  --c--theme--colors--greyscale-050: #f6f6f6;
-  --c--theme--colors--greyscale-250: #ddd;
-  --c--theme--colors--greyscale-350: #ddd;
-  --c--theme--colors--greyscale-750: #353535;
-  --c--theme--colors--greyscale-950: #1e1e1e;
-  --c--theme--colors--greyscale-1000: #161616;
-  --c--theme--colors--danger-050: #fff4f4;
-  --c--theme--colors--blue-500: #417dc4;
-  --c--theme--colors--brown-500: #bd987a;
-  --c--theme--colors--cyan-500: #009099;
-  --c--theme--colors--gold-500: #c3992a;
-  --c--theme--colors--green-500: #00a95f;
-  --c--theme--colors--olive-500: #68a532;
-  --c--theme--colors--orange-500: #e4794a;
-  --c--theme--colors--purple-500: #a558a0;
-  --c--theme--colors--red-500: #e1000f;
-  --c--theme--colors--yellow-500: #b7a73f;
-  --c--theme--colors--rose-500: #e18b76;
-  --c--theme--colors--primary-action: #1212ff;
-  --c--theme--colors--primary-bg: #fafafa;
-  --c--theme--colors--primary-focus: #0a76f6;
-  --c--theme--colors--secondary-icon: var(--c--theme--colors--primary-text);
-  --c--theme--colors--blue-400: #7ab1e8;
-  --c--theme--colors--blue-600: #3558a2;
-  --c--theme--colors--brown-400: #e6be92;
-  --c--theme--colors--brown-600: #745b47;
-  --c--theme--colors--cyan-400: #34bab5;
-  --c--theme--colors--cyan-600: #006a6f;
-  --c--theme--colors--gold-400: #ffca00;
-  --c--theme--colors--gold-600: #695240;
-  --c--theme--colors--green-400: #34cb6a;
-  --c--theme--colors--green-600: #297254;
-  --c--theme--colors--olive-400: #99c221;
-  --c--theme--colors--olive-600: #447049;
-  --c--theme--colors--orange-400: #ff732c;
-  --c--theme--colors--orange-600: #755348;
-  --c--theme--colors--pink-400: #ffb7ae;
-  --c--theme--colors--pink-500: #e18b76;
-  --c--theme--colors--pink-600: #8d533e;
-  --c--theme--colors--purple-400: #ce70cc;
-  --c--theme--colors--purple-600: #6e445a;
-  --c--theme--colors--yellow-400: #d8c634;
-  --c--theme--colors--yellow-600: #66673d;
-  --c--theme--font--sizes--h1: 2rem;
-  --c--theme--font--sizes--h2: 1.75rem;
-  --c--theme--font--sizes--h3: 1.5rem;
-  --c--theme--font--sizes--h4: 1.375rem;
-  --c--theme--font--sizes--h5: 1.25rem;
-  --c--theme--font--sizes--h6: 1.125rem;
-  --c--theme--font--sizes--l: 1rem;
-  --c--theme--font--sizes--m: 0.8125rem;
-  --c--theme--font--sizes--s: 0.75rem;
-  --c--theme--font--sizes--xs: 0.75rem;
-  --c--theme--font--sizes--sm: 0.875rem;
-  --c--theme--font--sizes--md: 1rem;
-  --c--theme--font--sizes--lg: 1.125rem;
-  --c--theme--font--sizes--ml: 0.938rem;
-  --c--theme--font--sizes--xl: 1.25rem;
-  --c--theme--font--sizes--t: 0.6875rem;
-  --c--theme--font--sizes--xl-alt: 5rem;
-  --c--theme--font--sizes--lg-alt: 4.5rem;
-  --c--theme--font--sizes--md-alt: 4rem;
-  --c--theme--font--sizes--sm-alt: 3.5rem;
-  --c--theme--font--sizes--xs-alt: 3rem;
-  --c--theme--font--weights--thin: 100;
-  --c--theme--font--weights--light: 300;
-  --c--theme--font--weights--regular: 400;
-  --c--theme--font--weights--medium: 500;
-  --c--theme--font--weights--bold: 600;
-  --c--theme--font--weights--extrabold: 800;
-  --c--theme--font--weights--black: 900;
-  --c--theme--font--families--base: sans-serif;
-  --c--theme--font--families--accent: sans-serif;
-  --c--theme--font--letterspacings--h1: normal;
-  --c--theme--font--letterspacings--h2: normal;
-  --c--theme--font--letterspacings--h3: normal;
-  --c--theme--font--letterspacings--h4: normal;
-  --c--theme--font--letterspacings--h5: 1px;
-  --c--theme--font--letterspacings--h6: normal;
-  --c--theme--font--letterspacings--l: normal;
-  --c--theme--font--letterspacings--m: normal;
-  --c--theme--font--letterspacings--s: normal;
-  --c--theme--spacings--0: 0;
-  --c--theme--spacings--xl: 2.5rem;
-  --c--theme--spacings--l: 3rem;
-  --c--theme--spacings--b: 1.625rem;
-  --c--theme--spacings--s: 1rem;
-  --c--theme--spacings--t: 0.5rem;
-  --c--theme--spacings--st: 0.25rem;
-  --c--theme--spacings--none: 0;
-  --c--theme--spacings--auto: auto;
-  --c--theme--spacings--bx: 2.2rem;
-  --c--theme--spacings--full: 100%;
-  --c--theme--spacings--4xs: 0.125rem;
-  --c--theme--spacings--3xs: 0.25rem;
-  --c--theme--spacings--2xs: 0.375rem;
-  --c--theme--spacings--xs: 0.5rem;
-  --c--theme--spacings--sm: 0.75rem;
-  --c--theme--spacings--base: 1rem;
-  --c--theme--spacings--md: 1.5rem;
-  --c--theme--spacings--lg: 2rem;
-  --c--theme--spacings--xxl: 3rem;
-  --c--theme--spacings--xxxl: 3.5rem;
-  --c--theme--spacings--4xl: 4rem;
-  --c--theme--spacings--5xl: 4.5rem;
-  --c--theme--spacings--6xl: 6rem;
-  --c--theme--spacings--7xl: 7.5rem;
-  --c--theme--transitions--ease-in: cubic-bezier(0.32, 0, 0.67, 0);
-  --c--theme--transitions--ease-out: cubic-bezier(0.33, 1, 0.68, 1);
-  --c--theme--transitions--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
-  --c--theme--transitions--duration: 250ms;
-  --c--theme--breakpoints--xs: 480px;
-  --c--theme--breakpoints--sm: 576px;
-  --c--theme--breakpoints--md: 768px;
-  --c--theme--breakpoints--lg: 992px;
-  --c--theme--breakpoints--xl: 1200px;
-  --c--theme--breakpoints--xxl: 1400px;
-  --c--theme--breakpoints--xxs: 320px;
-  --c--theme--breakpoints--mobile: 768px;
-  --c--theme--breakpoints--tablet: 1024px;
-  --c--theme--logo--src: ;
-  --c--theme--logo--alt: ;
-  --c--theme--logo--widthheader: ;
-  --c--theme--logo--widthfooter: ;
+  --c--globals--colors--logo-1: #2845c1;
+  --c--globals--colors--logo-2: #377fdb;
+  --c--globals--colors--logo-1-dark: #95abff;
+  --c--globals--colors--logo-2-dark: #95abff;
+  --c--globals--colors--brand-050: #edf0ff;
+  --c--globals--colors--brand-100: #dae2ff;
+  --c--globals--colors--brand-150: #c8d3ff;
+  --c--globals--colors--brand-200: #b5c4ff;
+  --c--globals--colors--brand-250: #a2b6ff;
+  --c--globals--colors--brand-300: #90a7ff;
+  --c--globals--colors--brand-350: #7e98ff;
+  --c--globals--colors--brand-400: #6c89fe;
+  --c--globals--colors--brand-450: #5c7af7;
+  --c--globals--colors--brand-500: #4c6cef;
+  --c--globals--colors--brand-550: #3e5de7;
+  --c--globals--colors--brand-600: #304ddf;
+  --c--globals--colors--brand-650: #2845c1;
+  --c--globals--colors--brand-700: #223e9e;
+  --c--globals--colors--brand-750: #1f367d;
+  --c--globals--colors--brand-800: #1b2e5f;
+  --c--globals--colors--brand-850: #172446;
+  --c--globals--colors--brand-900: #121b30;
+  --c--globals--colors--brand-950: #0c111a;
+  --c--globals--colors--gray-000: #fff;
+  --c--globals--colors--gray-025: #f6f8f9;
+  --c--globals--colors--gray-050: #eef1f4;
+  --c--globals--colors--gray-100: #dfe2ea;
+  --c--globals--colors--gray-150: #cfd5de;
+  --c--globals--colors--gray-200: #c1c7d3;
+  --c--globals--colors--gray-250: #b2b9c7;
+  --c--globals--colors--gray-300: #a4abbc;
+  --c--globals--colors--gray-350: #969eb0;
+  --c--globals--colors--gray-400: #8891a4;
+  --c--globals--colors--gray-450: #7b8498;
+  --c--globals--colors--gray-500: #6d778c;
+  --c--globals--colors--gray-550: #626a80;
+  --c--globals--colors--gray-600: #555e74;
+  --c--globals--colors--gray-650: #4a5267;
+  --c--globals--colors--gray-700: #3f4759;
+  --c--globals--colors--gray-750: #363b4c;
+  --c--globals--colors--gray-800: #2b303d;
+  --c--globals--colors--gray-850: #222631;
+  --c--globals--colors--gray-900: #181b24;
+  --c--globals--colors--gray-950: #0f1117;
+  --c--globals--colors--gray-1000: #000;
+  --c--globals--colors--info-050: #e7f2ff;
+  --c--globals--colors--info-100: #cfe5ff;
+  --c--globals--colors--info-150: #b7d7ff;
+  --c--globals--colors--info-200: #a0cafe;
+  --c--globals--colors--info-250: #8cbcf9;
+  --c--globals--colors--info-300: #77aef4;
+  --c--globals--colors--info-350: #63a0ee;
+  --c--globals--colors--info-400: #5092e7;
+  --c--globals--colors--info-450: #4185dc;
+  --c--globals--colors--info-500: #3677cc;
+  --c--globals--colors--info-550: #2f6abb;
+  --c--globals--colors--info-600: #265eaa;
+  --c--globals--colors--info-650: #28528f;
+  --c--globals--colors--info-700: #274775;
+  --c--globals--colors--info-750: #243c5e;
+  --c--globals--colors--info-800: #20314a;
+  --c--globals--colors--info-850: #1b2637;
+  --c--globals--colors--info-900: #141c27;
+  --c--globals--colors--info-950: #0d1118;
+  --c--globals--colors--success-050: #def7e6;
+  --c--globals--colors--success-100: #baeecf;
+  --c--globals--colors--success-150: #a5e2c0;
+  --c--globals--colors--success-200: #95d4b3;
+  --c--globals--colors--success-250: #85c6a7;
+  --c--globals--colors--success-300: #74b99b;
+  --c--globals--colors--success-350: #65ab8f;
+  --c--globals--colors--success-400: #579e84;
+  --c--globals--colors--success-450: #4b9079;
+  --c--globals--colors--success-500: #40836f;
+  --c--globals--colors--success-550: #367664;
+  --c--globals--colors--success-600: #2b695a;
+  --c--globals--colors--success-650: #2c5a50;
+  --c--globals--colors--success-700: #2a4d45;
+  --c--globals--colors--success-750: #26403c;
+  --c--globals--colors--success-800: #213430;
+  --c--globals--colors--success-850: #1b2826;
+  --c--globals--colors--success-900: #151d1c;
+  --c--globals--colors--success-950: #0d1212;
+  --c--globals--colors--warning-050: #ffeedf;
+  --c--globals--colors--warning-100: #ffdcbe;
+  --c--globals--colors--warning-150: #ffca9c;
+  --c--globals--colors--warning-200: #ffb778;
+  --c--globals--colors--warning-250: #fda54f;
+  --c--globals--colors--warning-300: #f59425;
+  --c--globals--colors--warning-350: #e78613;
+  --c--globals--colors--warning-400: #d7790c;
+  --c--globals--colors--warning-450: #c86c08;
+  --c--globals--colors--warning-500: #b85f03;
+  --c--globals--colors--warning-550: #a75400;
+  --c--globals--colors--warning-600: #984800;
+  --c--globals--colors--warning-650: #814112;
+  --c--globals--colors--warning-700: #6c3a19;
+  --c--globals--colors--warning-750: #58321c;
+  --c--globals--colors--warning-800: #452a1a;
+  --c--globals--colors--warning-850: #352117;
+  --c--globals--colors--warning-900: #261813;
+  --c--globals--colors--warning-950: #170f0c;
+  --c--globals--colors--error-050: #ffedeb;
+  --c--globals--colors--error-100: #ffdad7;
+  --c--globals--colors--error-150: #ffc7c2;
+  --c--globals--colors--error-200: #ffb3ad;
+  --c--globals--colors--error-250: #ff9f99;
+  --c--globals--colors--error-300: #ff8984;
+  --c--globals--colors--error-350: #ff706e;
+  --c--globals--colors--error-400: #fb5759;
+  --c--globals--colors--error-450: #f63a45;
+  --c--globals--colors--error-500: #e32c39;
+  --c--globals--colors--error-550: #cf202d;
+  --c--globals--colors--error-600: #bd0f23;
+  --c--globals--colors--error-650: #9d2227;
+  --c--globals--colors--error-700: #812727;
+  --c--globals--colors--error-750: #672624;
+  --c--globals--colors--error-800: #512220;
+  --c--globals--colors--error-850: #3d1c1b;
+  --c--globals--colors--error-900: #2a1614;
+  --c--globals--colors--error-950: #190e0d;
+  --c--globals--colors--red-050: #ffedeb;
+  --c--globals--colors--red-100: #ffdad7;
+  --c--globals--colors--red-150: #ffc7c2;
+  --c--globals--colors--red-200: #ffb3ad;
+  --c--globals--colors--red-250: #ff9f99;
+  --c--globals--colors--red-300: #ff8984;
+  --c--globals--colors--red-350: #ff706e;
+  --c--globals--colors--red-400: #fb5759;
+  --c--globals--colors--red-450: #f63a45;
+  --c--globals--colors--red-500: #e32c39;
+  --c--globals--colors--red-550: #cf202d;
+  --c--globals--colors--red-600: #bd0f23;
+  --c--globals--colors--red-650: #9d2227;
+  --c--globals--colors--red-700: #812727;
+  --c--globals--colors--red-750: #672624;
+  --c--globals--colors--red-800: #512220;
+  --c--globals--colors--red-850: #3d1c1b;
+  --c--globals--colors--red-900: #2a1614;
+  --c--globals--colors--red-950: #190e0d;
+  --c--globals--colors--orange-050: #fcedeb;
+  --c--globals--colors--orange-100: #f8dcd7;
+  --c--globals--colors--orange-150: #f1ccc5;
+  --c--globals--colors--orange-200: #eabcb4;
+  --c--globals--colors--orange-250: #e2aca2;
+  --c--globals--colors--orange-300: #da9c92;
+  --c--globals--colors--orange-350: #d28c81;
+  --c--globals--colors--orange-400: #ca7c70;
+  --c--globals--colors--orange-450: #be6e62;
+  --c--globals--colors--orange-500: #ae6257;
+  --c--globals--colors--orange-550: #9e564d;
+  --c--globals--colors--orange-600: #8f4b42;
+  --c--globals--colors--orange-650: #79443d;
+  --c--globals--colors--orange-700: #643c37;
+  --c--globals--colors--orange-750: #513430;
+  --c--globals--colors--orange-800: #412b28;
+  --c--globals--colors--orange-850: #312220;
+  --c--globals--colors--orange-900: #231918;
+  --c--globals--colors--orange-950: #150f0f;
+  --c--globals--colors--brown-050: #f9efea;
+  --c--globals--colors--brown-100: #f3dfd3;
+  --c--globals--colors--brown-150: #eacfc1;
+  --c--globals--colors--brown-200: #e2bfae;
+  --c--globals--colors--brown-250: #d8b19c;
+  --c--globals--colors--brown-300: #d0a189;
+  --c--globals--colors--brown-350: #c3937b;
+  --c--globals--colors--brown-400: #b5866d;
+  --c--globals--colors--brown-450: #a77a62;
+  --c--globals--colors--brown-500: #996d57;
+  --c--globals--colors--brown-550: #8b614d;
+  --c--globals--colors--brown-600: #7c5542;
+  --c--globals--colors--brown-650: #6a4c3c;
+  --c--globals--colors--brown-700: #594236;
+  --c--globals--colors--brown-750: #49382f;
+  --c--globals--colors--brown-800: #3b2e28;
+  --c--globals--colors--brown-850: #2d2420;
+  --c--globals--colors--brown-900: #201a18;
+  --c--globals--colors--brown-950: #13100f;
+  --c--globals--colors--yellow-050: #fdf1c5;
+  --c--globals--colors--yellow-100: #fbe18e;
+  --c--globals--colors--yellow-150: #f4d261;
+  --c--globals--colors--yellow-200: #eac244;
+  --c--globals--colors--yellow-250: #dfb41b;
+  --c--globals--colors--yellow-300: #d1a516;
+  --c--globals--colors--yellow-350: #c49711;
+  --c--globals--colors--yellow-400: #b78a0c;
+  --c--globals--colors--yellow-450: #a87d07;
+  --c--globals--colors--yellow-500: #9b6f02;
+  --c--globals--colors--yellow-550: #8d6300;
+  --c--globals--colors--yellow-600: #7f5600;
+  --c--globals--colors--yellow-650: #6e4c11;
+  --c--globals--colors--yellow-700: #5d4219;
+  --c--globals--colors--yellow-750: #4d371b;
+  --c--globals--colors--yellow-800: #3d2e1a;
+  --c--globals--colors--yellow-850: #2f2417;
+  --c--globals--colors--yellow-900: #221a12;
+  --c--globals--colors--yellow-950: #14100c;
+  --c--globals--colors--green-050: #e7f9b3;
+  --c--globals--colors--green-100: #d5ec98;
+  --c--globals--colors--green-150: #c5de86;
+  --c--globals--colors--green-200: #b5d174;
+  --c--globals--colors--green-250: #a5c464;
+  --c--globals--colors--green-300: #95b755;
+  --c--globals--colors--green-350: #85aa45;
+  --c--globals--colors--green-400: #769d39;
+  --c--globals--colors--green-450: #688f30;
+  --c--globals--colors--green-500: #5a8228;
+  --c--globals--colors--green-550: #4d7621;
+  --c--globals--colors--green-600: #416919;
+  --c--globals--colors--green-650: #3a5b20;
+  --c--globals--colors--green-700: #324e22;
+  --c--globals--colors--green-750: #2c4122;
+  --c--globals--colors--green-800: #24351d;
+  --c--globals--colors--green-850: #1d2919;
+  --c--globals--colors--green-900: #161e13;
+  --c--globals--colors--green-950: #0e120c;
+  --c--globals--colors--blue-1-050: #ebf1ff;
+  --c--globals--colors--blue-1-100: #d6e3fe;
+  --c--globals--colors--blue-1-150: #c2d5fe;
+  --c--globals--colors--blue-1-200: #adc7fe;
+  --c--globals--colors--blue-1-250: #99b8fd;
+  --c--globals--colors--blue-1-300: #84aafd;
+  --c--globals--colors--blue-1-350: #6f9bfd;
+  --c--globals--colors--blue-1-400: #5a8dfb;
+  --c--globals--colors--blue-1-450: #437dfc;
+  --c--globals--colors--blue-1-500: #3d71e4;
+  --c--globals--colors--blue-1-550: #3665cc;
+  --c--globals--colors--blue-1-600: #305ab5;
+  --c--globals--colors--blue-1-650: #315093;
+  --c--globals--colors--blue-1-700: #2e4675;
+  --c--globals--colors--blue-1-750: #293b5e;
+  --c--globals--colors--blue-1-800: #243048;
+  --c--globals--colors--blue-1-850: #1e2635;
+  --c--globals--colors--blue-1-900: #171c25;
+  --c--globals--colors--blue-1-950: #0e1116;
+  --c--globals--colors--blue-2-050: #e2f4f9;
+  --c--globals--colors--blue-2-100: #c5e9f3;
+  --c--globals--colors--blue-2-150: #a7dded;
+  --c--globals--colors--blue-2-200: #88d1e6;
+  --c--globals--colors--blue-2-250: #68c5e0;
+  --c--globals--colors--blue-2-300: #48b8d9;
+  --c--globals--colors--blue-2-350: #3baaca;
+  --c--globals--colors--blue-2-400: #359cb9;
+  --c--globals--colors--blue-2-450: #318ea9;
+  --c--globals--colors--blue-2-500: #2c8199;
+  --c--globals--colors--blue-2-550: #277389;
+  --c--globals--colors--blue-2-600: #236679;
+  --c--globals--colors--blue-2-650: #2a5866;
+  --c--globals--colors--blue-2-700: #2a4b55;
+  --c--globals--colors--blue-2-750: #283f47;
+  --c--globals--colors--blue-2-800: #233337;
+  --c--globals--colors--blue-2-850: #1d272a;
+  --c--globals--colors--blue-2-900: #161c1e;
+  --c--globals--colors--blue-2-950: #0e1112;
+  --c--globals--colors--purple-050: #f5eeff;
+  --c--globals--colors--purple-100: #ecdcff;
+  --c--globals--colors--purple-150: #e2cbff;
+  --c--globals--colors--purple-200: #d9b9ff;
+  --c--globals--colors--purple-250: #d0a7ff;
+  --c--globals--colors--purple-300: #c894fe;
+  --c--globals--colors--purple-350: #be83fa;
+  --c--globals--colors--purple-400: #b570f5;
+  --c--globals--colors--purple-450: #ab5ef0;
+  --c--globals--colors--purple-500: #a04be8;
+  --c--globals--colors--purple-550: #933cdb;
+  --c--globals--colors--purple-600: #8530c8;
+  --c--globals--colors--purple-650: #7033a5;
+  --c--globals--colors--purple-700: #5d3185;
+  --c--globals--colors--purple-750: #4c2c6a;
+  --c--globals--colors--purple-800: #3c2652;
+  --c--globals--colors--purple-850: #2d203c;
+  --c--globals--colors--purple-900: #21182a;
+  --c--globals--colors--purple-950: #130f19;
+  --c--globals--colors--pink-050: #ffebf6;
+  --c--globals--colors--pink-100: #ffd8ed;
+  --c--globals--colors--pink-150: #fcc4e3;
+  --c--globals--colors--pink-200: #f7b2d9;
+  --c--globals--colors--pink-250: #f29fce;
+  --c--globals--colors--pink-300: #ed8cc3;
+  --c--globals--colors--pink-350: #e779b8;
+  --c--globals--colors--pink-400: #e264ad;
+  --c--globals--colors--pink-450: #d2579e;
+  --c--globals--colors--pink-500: #c24b8e;
+  --c--globals--colors--pink-550: #b0417f;
+  --c--globals--colors--pink-600: #9f3670;
+  --c--globals--colors--pink-650: #873560;
+  --c--globals--colors--pink-700: #6f3250;
+  --c--globals--colors--pink-750: #5a2c43;
+  --c--globals--colors--pink-800: #472635;
+  --c--globals--colors--pink-850: #351f29;
+  --c--globals--colors--pink-900: #26171d;
+  --c--globals--colors--pink-950: #170f12;
+  --c--globals--colors--black-000: #0000;
+  --c--globals--colors--black-050: #0000000d;
+  --c--globals--colors--black-100: #0000001a;
+  --c--globals--colors--black-150: #00000026;
+  --c--globals--colors--black-200: #0003;
+  --c--globals--colors--black-250: #00000040;
+  --c--globals--colors--black-300: #0000004d;
+  --c--globals--colors--black-350: #00000059;
+  --c--globals--colors--black-400: #0006;
+  --c--globals--colors--black-450: #00000073;
+  --c--globals--colors--black-500: #00000080;
+  --c--globals--colors--black-550: #0000008c;
+  --c--globals--colors--black-600: #0009;
+  --c--globals--colors--black-650: #000000a6;
+  --c--globals--colors--black-700: #000000b3;
+  --c--globals--colors--black-750: #000000bf;
+  --c--globals--colors--black-800: #000c;
+  --c--globals--colors--black-850: #000000d9;
+  --c--globals--colors--black-900: #000000e6;
+  --c--globals--colors--black-950: #000000f2;
+  --c--globals--colors--white-000: #fff;
+  --c--globals--colors--white-050: #ffffff0d;
+  --c--globals--colors--white-100: #ffffff1a;
+  --c--globals--colors--white-150: #ffffff26;
+  --c--globals--colors--white-200: #fff3;
+  --c--globals--colors--white-250: #ffffff40;
+  --c--globals--colors--white-300: #ffffff4d;
+  --c--globals--colors--white-350: #ffffff59;
+  --c--globals--colors--white-400: #fff6;
+  --c--globals--colors--white-450: #ffffff73;
+  --c--globals--colors--white-500: #ffffff80;
+  --c--globals--colors--white-550: #ffffff8c;
+  --c--globals--colors--white-600: #fff9;
+  --c--globals--colors--white-650: #ffffffa6;
+  --c--globals--colors--white-700: #ffffffb3;
+  --c--globals--colors--white-750: #ffffffbf;
+  --c--globals--colors--white-800: #fffc;
+  --c--globals--colors--white-850: #ffffffd9;
+  --c--globals--colors--white-900: #ffffffe6;
+  --c--globals--colors--white-950: #fffffff2;
+  --c--globals--colors--blue1-050: #e7f2ff;
+  --c--globals--colors--blue1-100: #cfe5ff;
+  --c--globals--colors--blue1-150: #b7d7ff;
+  --c--globals--colors--blue1-200: #a0cafe;
+  --c--globals--colors--blue1-250: #8cbcf9;
+  --c--globals--colors--blue1-300: #77aef4;
+  --c--globals--colors--blue1-350: #63a0ee;
+  --c--globals--colors--blue1-400: #5092e7;
+  --c--globals--colors--blue1-450: #4185dc;
+  --c--globals--colors--blue1-500: #3677cc;
+  --c--globals--colors--blue1-550: #2f6abb;
+  --c--globals--colors--blue1-600: #265eaa;
+  --c--globals--colors--blue1-650: #28528f;
+  --c--globals--colors--blue1-700: #274775;
+  --c--globals--colors--blue1-750: #243c5e;
+  --c--globals--colors--blue1-800: #20314a;
+  --c--globals--colors--blue1-850: #1b2637;
+  --c--globals--colors--blue1-900: #141c27;
+  --c--globals--colors--blue1-950: #0d1118;
+  --c--globals--colors--blue2-050: #e2f4fd;
+  --c--globals--colors--blue2-100: #c4e8f8;
+  --c--globals--colors--blue2-150: #aadcf2;
+  --c--globals--colors--blue2-200: #93cfeb;
+  --c--globals--colors--blue2-250: #7cc2e2;
+  --c--globals--colors--blue2-300: #6cb4d6;
+  --c--globals--colors--blue2-350: #5ca7c9;
+  --c--globals--colors--blue2-400: #5099bc;
+  --c--globals--colors--blue2-450: #458bae;
+  --c--globals--colors--blue2-500: #3a7ea0;
+  --c--globals--colors--blue2-550: #327191;
+  --c--globals--colors--blue2-600: #286483;
+  --c--globals--colors--blue2-650: #2b5770;
+  --c--globals--colors--blue2-700: #294a5e;
+  --c--globals--colors--blue2-750: #263e4d;
+  --c--globals--colors--blue2-800: #22323d;
+  --c--globals--colors--blue2-850: #1c272e;
+  --c--globals--colors--blue2-900: #151d21;
+  --c--globals--colors--blue2-950: #0e1114;
+  --c--globals--transitions--ease-in: cubic-bezier(0.32, 0, 0.67, 0);
+  --c--globals--transitions--ease-out: cubic-bezier(0.33, 1, 0.68, 1);
+  --c--globals--transitions--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --c--globals--transitions--duration: 250ms;
+  --c--globals--font--sizes--xs: 0.75rem;
+  --c--globals--font--sizes--sm: 0.875rem;
+  --c--globals--font--sizes--md: 1rem;
+  --c--globals--font--sizes--lg: 1.125rem;
+  --c--globals--font--sizes--ml: 0.938rem;
+  --c--globals--font--sizes--xl: 1.25rem;
+  --c--globals--font--sizes--t: 0.6875rem;
+  --c--globals--font--sizes--s: 0.75rem;
+  --c--globals--font--sizes--h1: 2rem;
+  --c--globals--font--sizes--h2: 1.75rem;
+  --c--globals--font--sizes--h3: 1.5rem;
+  --c--globals--font--sizes--h4: 1.375rem;
+  --c--globals--font--sizes--h5: 1.25rem;
+  --c--globals--font--sizes--h6: 1.125rem;
+  --c--globals--font--sizes--xl-alt: 5rem;
+  --c--globals--font--sizes--lg-alt: 4.5rem;
+  --c--globals--font--sizes--md-alt: 4rem;
+  --c--globals--font--sizes--sm-alt: 3.5rem;
+  --c--globals--font--sizes--xs-alt: 3rem;
+  --c--globals--font--weights--thin: 100;
+  --c--globals--font--weights--light: 300;
+  --c--globals--font--weights--regular: 400;
+  --c--globals--font--weights--medium: 500;
+  --c--globals--font--weights--bold: 600;
+  --c--globals--font--weights--extrabold: 800;
+  --c--globals--font--weights--black: 900;
+  --c--globals--font--families--base: sans-serif;
+  --c--globals--font--families--accent: sans-serif;
+  --c--globals--spacings--0: 0;
+  --c--globals--spacings--l: 3rem;
+  --c--globals--spacings--b: 1.625rem;
+  --c--globals--spacings--m: 0.8125rem;
+  --c--globals--spacings--s: 1rem;
+  --c--globals--spacings--t: 0.5rem;
+  --c--globals--spacings--st: 0.25rem;
+  --c--globals--spacings--4xs: 0.125rem;
+  --c--globals--spacings--xxxs: 0.25rem;
+  --c--globals--spacings--xxs: 0.375rem;
+  --c--globals--spacings--xs: 0.5rem;
+  --c--globals--spacings--sm: 0.75rem;
+  --c--globals--spacings--base: 1rem;
+  --c--globals--spacings--md: 1.5rem;
+  --c--globals--spacings--lg: 2rem;
+  --c--globals--spacings--xl: 2.5rem;
+  --c--globals--spacings--xxl: 3rem;
+  --c--globals--spacings--xxxl: 3.5rem;
+  --c--globals--spacings--4xl: 4rem;
+  --c--globals--spacings--5xl: 4.5rem;
+  --c--globals--spacings--6xl: 6rem;
+  --c--globals--spacings--7xl: 7.5rem;
+  --c--globals--spacings--none: 0;
+  --c--globals--spacings--auto: auto;
+  --c--globals--spacings--bx: 2.2rem;
+  --c--globals--spacings--full: 100%;
+  --c--globals--spacings--3xs: 0.25rem;
+  --c--globals--spacings--2xs: 0.375rem;
+  --c--globals--breakpoints--xs: 480px;
+  --c--globals--breakpoints--sm: 576px;
+  --c--globals--breakpoints--md: 768px;
+  --c--globals--breakpoints--lg: 992px;
+  --c--globals--breakpoints--xl: 1200px;
+  --c--globals--breakpoints--xxl: 1400px;
+  --c--globals--breakpoints--xxs: 320px;
+  --c--globals--breakpoints--mobile: 768px;
+  --c--globals--breakpoints--tablet: 1024px;
+  --c--contextuals--background--surface--primary: var(
+    --c--globals--colors--gray-000
+  );
+  --c--contextuals--background--surface--secondary: var(
+    --c--globals--colors--gray-000
+  );
+  --c--contextuals--background--surface--tertiary: var(
+    --c--globals--colors--gray-025
+  );
+  --c--contextuals--background--semantic--brand--primary: var(
+    --c--globals--colors--brand-550
+  );
+  --c--contextuals--background--semantic--brand--primary-hover: var(
+    --c--globals--colors--brand-650
+  );
+  --c--contextuals--background--semantic--brand--secondary: var(
+    --c--globals--colors--brand-100
+  );
+  --c--contextuals--background--semantic--brand--secondary-hover: var(
+    --c--globals--colors--brand-150
+  );
+  --c--contextuals--background--semantic--brand--tertiary: var(
+    --c--globals--colors--brand-050
+  );
+  --c--contextuals--background--semantic--brand--tertiary-hover: var(
+    --c--globals--colors--brand-100
+  );
+  --c--contextuals--background--semantic--neutral--primary: var(
+    --c--globals--colors--gray-550
+  );
+  --c--contextuals--background--semantic--neutral--primary-hover: var(
+    --c--globals--colors--gray-650
+  );
+  --c--contextuals--background--semantic--neutral--secondary: var(
+    --c--globals--colors--gray-100
+  );
+  --c--contextuals--background--semantic--neutral--secondary-hover: var(
+    --c--globals--colors--gray-150
+  );
+  --c--contextuals--background--semantic--neutral--tertiary: var(
+    --c--globals--colors--gray-050
+  );
+  --c--contextuals--background--semantic--neutral--tertiary-hover: var(
+    --c--globals--colors--gray-100
+  );
+  --c--contextuals--background--semantic--contextual--primary: var(
+    --c--globals--colors--black-050
+  );
+  --c--contextuals--background--semantic--contextual--primary-hover: var(
+    --c--globals--colors--black-100
+  );
+  --c--contextuals--background--semantic--info--primary: var(
+    --c--globals--colors--info-550
+  );
+  --c--contextuals--background--semantic--info--primary-hover: var(
+    --c--globals--colors--info-650
+  );
+  --c--contextuals--background--semantic--info--secondary: var(
+    --c--globals--colors--info-100
+  );
+  --c--contextuals--background--semantic--info--secondary-hover: var(
+    --c--globals--colors--info-150
+  );
+  --c--contextuals--background--semantic--info--tertiary: var(
+    --c--globals--colors--info-050
+  );
+  --c--contextuals--background--semantic--info--tertiary-hover: var(
+    --c--globals--colors--info-100
+  );
+  --c--contextuals--background--semantic--success--primary: var(
+    --c--globals--colors--success-550
+  );
+  --c--contextuals--background--semantic--success--primary-hover: var(
+    --c--globals--colors--success-650
+  );
+  --c--contextuals--background--semantic--success--secondary: var(
+    --c--globals--colors--success-100
+  );
+  --c--contextuals--background--semantic--success--secondary-hover: var(
+    --c--globals--colors--success-150
+  );
+  --c--contextuals--background--semantic--success--tertiary: var(
+    --c--globals--colors--success-050
+  );
+  --c--contextuals--background--semantic--success--tertiary-hover: var(
+    --c--globals--colors--success-100
+  );
+  --c--contextuals--background--semantic--warning--primary: var(
+    --c--globals--colors--warning-550
+  );
+  --c--contextuals--background--semantic--warning--primary-hover: var(
+    --c--globals--colors--warning-650
+  );
+  --c--contextuals--background--semantic--warning--secondary: var(
+    --c--globals--colors--warning-100
+  );
+  --c--contextuals--background--semantic--warning--secondary-hover: var(
+    --c--globals--colors--warning-150
+  );
+  --c--contextuals--background--semantic--warning--tertiary: var(
+    --c--globals--colors--warning-050
+  );
+  --c--contextuals--background--semantic--warning--tertiary-hover: var(
+    --c--globals--colors--warning-100
+  );
+  --c--contextuals--background--semantic--error--primary: var(
+    --c--globals--colors--error-550
+  );
+  --c--contextuals--background--semantic--error--primary-hover: var(
+    --c--globals--colors--error-650
+  );
+  --c--contextuals--background--semantic--error--secondary: var(
+    --c--globals--colors--error-100
+  );
+  --c--contextuals--background--semantic--error--secondary-hover: var(
+    --c--globals--colors--error-150
+  );
+  --c--contextuals--background--semantic--error--tertiary: var(
+    --c--globals--colors--error-050
+  );
+  --c--contextuals--background--semantic--error--tertiary-hover: var(
+    --c--globals--colors--error-100
+  );
+  --c--contextuals--background--semantic--disabled--primary: var(
+    --c--globals--colors--gray-100
+  );
+  --c--contextuals--background--semantic--disabled--secondary: var(
+    --c--globals--colors--gray-050
+  );
+  --c--contextuals--background--palette--brand--primary: var(
+    --c--globals--colors--brand-500
+  );
+  --c--contextuals--background--palette--brand--secondary: var(
+    --c--globals--colors--brand-350
+  );
+  --c--contextuals--background--palette--brand--tertiary: var(
+    --c--globals--colors--brand-150
+  );
+  --c--contextuals--background--palette--red--primary: var(
+    --c--globals--colors--red-500
+  );
+  --c--contextuals--background--palette--red--secondary: var(
+    --c--globals--colors--red-350
+  );
+  --c--contextuals--background--palette--red--tertiary: var(
+    --c--globals--colors--red-150
+  );
+  --c--contextuals--background--palette--orange--primary: var(
+    --c--globals--colors--orange-500
+  );
+  --c--contextuals--background--palette--orange--secondary: var(
+    --c--globals--colors--orange-350
+  );
+  --c--contextuals--background--palette--orange--tertiary: var(
+    --c--globals--colors--orange-150
+  );
+  --c--contextuals--background--palette--brown--primary: var(
+    --c--globals--colors--brown-500
+  );
+  --c--contextuals--background--palette--brown--secondary: var(
+    --c--globals--colors--brown-350
+  );
+  --c--contextuals--background--palette--brown--tertiary: var(
+    --c--globals--colors--brown-150
+  );
+  --c--contextuals--background--palette--yellow--primary: var(
+    --c--globals--colors--yellow-500
+  );
+  --c--contextuals--background--palette--yellow--secondary: var(
+    --c--globals--colors--yellow-350
+  );
+  --c--contextuals--background--palette--yellow--tertiary: var(
+    --c--globals--colors--yellow-150
+  );
+  --c--contextuals--background--palette--green--primary: var(
+    --c--globals--colors--green-500
+  );
+  --c--contextuals--background--palette--green--secondary: var(
+    --c--globals--colors--green-350
+  );
+  --c--contextuals--background--palette--green--tertiary: var(
+    --c--globals--colors--green-150
+  );
+  --c--contextuals--background--palette--blue-1--primary: var(
+    --c--globals--colors--blue-1-500
+  );
+  --c--contextuals--background--palette--blue-1--secondary: var(
+    --c--globals--colors--blue-1-350
+  );
+  --c--contextuals--background--palette--blue-1--tertiary: var(
+    --c--globals--colors--blue-1-150
+  );
+  --c--contextuals--background--palette--blue-2--primary: var(
+    --c--globals--colors--blue-2-500
+  );
+  --c--contextuals--background--palette--blue-2--secondary: var(
+    --c--globals--colors--blue-2-350
+  );
+  --c--contextuals--background--palette--blue-2--tertiary: var(
+    --c--globals--colors--blue-2-150
+  );
+  --c--contextuals--background--palette--purple--primary: var(
+    --c--globals--colors--purple-500
+  );
+  --c--contextuals--background--palette--purple--secondary: var(
+    --c--globals--colors--purple-350
+  );
+  --c--contextuals--background--palette--purple--tertiary: var(
+    --c--globals--colors--purple-150
+  );
+  --c--contextuals--background--palette--pink--primary: var(
+    --c--globals--colors--pink-500
+  );
+  --c--contextuals--background--palette--pink--secondary: var(
+    --c--globals--colors--pink-350
+  );
+  --c--contextuals--background--palette--pink--tertiary: var(
+    --c--globals--colors--pink-150
+  );
+  --c--contextuals--background--palette--gray--primary: var(
+    --c--globals--colors--gray-500
+  );
+  --c--contextuals--background--palette--gray--secondary: var(
+    --c--globals--colors--gray-350
+  );
+  --c--contextuals--background--palette--gray--tertiary: var(
+    --c--globals--colors--gray-150
+  );
+  --c--contextuals--background--text--primary: var(
+    --c--globals--colors--black-050
+  );
+  --c--contextuals--content--logo1: var(--c--globals--colors--logo-1);
+  --c--contextuals--content--logo2: var(--c--globals--colors--logo-2);
+  --c--contextuals--content--semantic--brand--primary: var(
+    --c--globals--colors--brand-700
+  );
+  --c--contextuals--content--semantic--brand--secondary: var(
+    --c--globals--colors--brand-600
+  );
+  --c--contextuals--content--semantic--brand--tertiary: var(
+    --c--globals--colors--brand-500
+  );
+  --c--contextuals--content--semantic--brand--on-brand: var(
+    --c--globals--colors--brand-050
+  );
+  --c--contextuals--content--semantic--neutral--primary: var(
+    --c--globals--colors--gray-850
+  );
+  --c--contextuals--content--semantic--neutral--secondary: var(
+    --c--globals--colors--gray-600
+  );
+  --c--contextuals--content--semantic--neutral--tertiary: var(
+    --c--globals--colors--gray-500
+  );
+  --c--contextuals--content--semantic--neutral--on-neutral: var(
+    --c--globals--colors--gray-050
+  );
+  --c--contextuals--content--semantic--contextual--primary: var(
+    --c--globals--colors--white-950
+  );
+  --c--contextuals--content--semantic--info--primary: var(
+    --c--globals--colors--info-700
+  );
+  --c--contextuals--content--semantic--info--secondary: var(
+    --c--globals--colors--info-600
+  );
+  --c--contextuals--content--semantic--info--tertiary: var(
+    --c--globals--colors--info-500
+  );
+  --c--contextuals--content--semantic--info--on-info: var(
+    --c--globals--colors--info-050
+  );
+  --c--contextuals--content--semantic--success--primary: var(
+    --c--globals--colors--success-700
+  );
+  --c--contextuals--content--semantic--success--secondary: var(
+    --c--globals--colors--success-600
+  );
+  --c--contextuals--content--semantic--success--tertiary: var(
+    --c--globals--colors--success-500
+  );
+  --c--contextuals--content--semantic--success--on-success: var(
+    --c--globals--colors--success-050
+  );
+  --c--contextuals--content--semantic--warning--primary: var(
+    --c--globals--colors--warning-700
+  );
+  --c--contextuals--content--semantic--warning--secondary: var(
+    --c--globals--colors--warning-600
+  );
+  --c--contextuals--content--semantic--warning--tertiary: var(
+    --c--globals--colors--warning-500
+  );
+  --c--contextuals--content--semantic--warning--on-warning: var(
+    --c--globals--colors--warning-050
+  );
+  --c--contextuals--content--semantic--error--primary: var(
+    --c--globals--colors--error-700
+  );
+  --c--contextuals--content--semantic--error--secondary: var(
+    --c--globals--colors--error-600
+  );
+  --c--contextuals--content--semantic--error--tertiary: var(
+    --c--globals--colors--error-500
+  );
+  --c--contextuals--content--semantic--error--on-error: var(
+    --c--globals--colors--error-050
+  );
+  --c--contextuals--content--semantic--disabled--primary: var(
+    --c--globals--colors--gray-300
+  );
+  --c--contextuals--content--semantic--disabled--secondary: var(
+    --c--globals--colors--white-500
+  );
+  --c--contextuals--content--palette--brand--primary: var(
+    --c--globals--colors--brand-500
+  );
+  --c--contextuals--content--palette--brand--secondary: var(
+    --c--globals--colors--brand-350
+  );
+  --c--contextuals--content--palette--brand--tertiary: var(
+    --c--globals--colors--brand-150
+  );
+  --c--contextuals--content--palette--red--primary: var(
+    --c--globals--colors--red-500
+  );
+  --c--contextuals--content--palette--red--secondary: var(
+    --c--globals--colors--red-350
+  );
+  --c--contextuals--content--palette--red--tertiary: var(
+    --c--globals--colors--red-150
+  );
+  --c--contextuals--content--palette--orange--primary: var(
+    --c--globals--colors--orange-500
+  );
+  --c--contextuals--content--palette--orange--secondary: var(
+    --c--globals--colors--orange-350
+  );
+  --c--contextuals--content--palette--orange--tertiary: var(
+    --c--globals--colors--orange-150
+  );
+  --c--contextuals--content--palette--brown--primary: var(
+    --c--globals--colors--brown-500
+  );
+  --c--contextuals--content--palette--brown--secondary: var(
+    --c--globals--colors--brown-350
+  );
+  --c--contextuals--content--palette--brown--tertiary: var(
+    --c--globals--colors--brown-150
+  );
+  --c--contextuals--content--palette--yellow--primary: var(
+    --c--globals--colors--yellow-500
+  );
+  --c--contextuals--content--palette--yellow--secondary: var(
+    --c--globals--colors--yellow-350
+  );
+  --c--contextuals--content--palette--yellow--tertiary: var(
+    --c--globals--colors--yellow-150
+  );
+  --c--contextuals--content--palette--green--primary: var(
+    --c--globals--colors--green-500
+  );
+  --c--contextuals--content--palette--green--secondary: var(
+    --c--globals--colors--green-350
+  );
+  --c--contextuals--content--palette--green--tertiary: var(
+    --c--globals--colors--green-150
+  );
+  --c--contextuals--content--palette--blue-1--primary: var(
+    --c--globals--colors--blue-1-500
+  );
+  --c--contextuals--content--palette--blue-1--secondary: var(
+    --c--globals--colors--blue-1-350
+  );
+  --c--contextuals--content--palette--blue-1--tertiary: var(
+    --c--globals--colors--blue-1-150
+  );
+  --c--contextuals--content--palette--blue-2--primary: var(
+    --c--globals--colors--blue-2-500
+  );
+  --c--contextuals--content--palette--blue-2--secondary: var(
+    --c--globals--colors--blue-2-350
+  );
+  --c--contextuals--content--palette--blue-2--tertiary: var(
+    --c--globals--colors--blue-2-150
+  );
+  --c--contextuals--content--palette--purple--primary: var(
+    --c--globals--colors--purple-500
+  );
+  --c--contextuals--content--palette--purple--secondary: var(
+    --c--globals--colors--purple-350
+  );
+  --c--contextuals--content--palette--purple--tertiary: var(
+    --c--globals--colors--purple-150
+  );
+  --c--contextuals--content--palette--pink--primary: var(
+    --c--globals--colors--pink-500
+  );
+  --c--contextuals--content--palette--pink--secondary: var(
+    --c--globals--colors--pink-350
+  );
+  --c--contextuals--content--palette--pink--tertiary: var(
+    --c--globals--colors--pink-150
+  );
+  --c--contextuals--content--palette--gray--primary: var(
+    --c--globals--colors--gray-500
+  );
+  --c--contextuals--content--palette--gray--secondary: var(
+    --c--globals--colors--gray-350
+  );
+  --c--contextuals--content--palette--gray--tertiary: var(
+    --c--globals--colors--gray-150
+  );
+  --c--contextuals--border--surface--primary: var(
+    --c--globals--colors--gray-100
+  );
+  --c--contextuals--border--semantic--brand--primary: var(
+    --c--globals--colors--brand-550
+  );
+  --c--contextuals--border--semantic--brand--secondary: var(
+    --c--globals--colors--brand-300
+  );
+  --c--contextuals--border--semantic--brand--tertiary: var(
+    --c--globals--colors--brand-150
+  );
+  --c--contextuals--border--semantic--contextual--primary: var(
+    --c--globals--colors--white-200
+  );
+  --c--contextuals--border--semantic--neutral--primary: var(
+    --c--globals--colors--gray-550
+  );
+  --c--contextuals--border--semantic--neutral--secondary: var(
+    --c--globals--colors--gray-300
+  );
+  --c--contextuals--border--semantic--neutral--tertiary: var(
+    --c--globals--colors--gray-150
+  );
+  --c--contextuals--border--semantic--info--primary: var(
+    --c--globals--colors--info-550
+  );
+  --c--contextuals--border--semantic--info--secondary: var(
+    --c--globals--colors--info-300
+  );
+  --c--contextuals--border--semantic--info--tertiary: var(
+    --c--globals--colors--info-150
+  );
+  --c--contextuals--border--semantic--success--primary: var(
+    --c--globals--colors--success-550
+  );
+  --c--contextuals--border--semantic--success--secondary: var(
+    --c--globals--colors--success-300
+  );
+  --c--contextuals--border--semantic--success--tertiary: var(
+    --c--globals--colors--success-150
+  );
+  --c--contextuals--border--semantic--warning--primary: var(
+    --c--globals--colors--warning-550
+  );
+  --c--contextuals--border--semantic--warning--secondary: var(
+    --c--globals--colors--warning-300
+  );
+  --c--contextuals--border--semantic--warning--tertiary: var(
+    --c--globals--colors--warning-150
+  );
+  --c--contextuals--border--semantic--error--primary: var(
+    --c--globals--colors--error-550
+  );
+  --c--contextuals--border--semantic--error--secondary: var(
+    --c--globals--colors--error-300
+  );
+  --c--contextuals--border--semantic--error--tertiary: var(
+    --c--globals--colors--error-150
+  );
+  --c--contextuals--border--semantic--disabled--primary: var(
+    --c--globals--colors--gray-100
+  );
+  --c--contextuals--border--palette--brand--primary: var(
+    --c--globals--colors--brand-500
+  );
+  --c--contextuals--border--palette--brand--secondary: var(
+    --c--globals--colors--brand-350
+  );
+  --c--contextuals--border--palette--brand--tertiary: var(
+    --c--globals--colors--brand-150
+  );
+  --c--contextuals--border--palette--red--primary: var(
+    --c--globals--colors--red-500
+  );
+  --c--contextuals--border--palette--red--secondary: var(
+    --c--globals--colors--red-350
+  );
+  --c--contextuals--border--palette--red--tertiary: var(
+    --c--globals--colors--red-150
+  );
+  --c--contextuals--border--palette--orange--primary: var(
+    --c--globals--colors--orange-500
+  );
+  --c--contextuals--border--palette--orange--secondary: var(
+    --c--globals--colors--orange-350
+  );
+  --c--contextuals--border--palette--orange--tertiary: var(
+    --c--globals--colors--orange-150
+  );
+  --c--contextuals--border--palette--brown--primary: var(
+    --c--globals--colors--brown-500
+  );
+  --c--contextuals--border--palette--brown--secondary: var(
+    --c--globals--colors--brown-350
+  );
+  --c--contextuals--border--palette--brown--tertiary: var(
+    --c--globals--colors--brown-150
+  );
+  --c--contextuals--border--palette--yellow--primary: var(
+    --c--globals--colors--yellow-500
+  );
+  --c--contextuals--border--palette--yellow--secondary: var(
+    --c--globals--colors--yellow-350
+  );
+  --c--contextuals--border--palette--yellow--tertiary: var(
+    --c--globals--colors--yellow-150
+  );
+  --c--contextuals--border--palette--green--primary: var(
+    --c--globals--colors--green-500
+  );
+  --c--contextuals--border--palette--green--secondary: var(
+    --c--globals--colors--green-350
+  );
+  --c--contextuals--border--palette--green--tertiary: var(
+    --c--globals--colors--green-150
+  );
+  --c--contextuals--border--palette--blue-1--primary: var(
+    --c--globals--colors--blue-1-500
+  );
+  --c--contextuals--border--palette--blue-1--secondary: var(
+    --c--globals--colors--blue-1-350
+  );
+  --c--contextuals--border--palette--blue-1--tertiary: var(
+    --c--globals--colors--blue-1-150
+  );
+  --c--contextuals--border--palette--blue-2--primary: var(
+    --c--globals--colors--blue-2-500
+  );
+  --c--contextuals--border--palette--blue-2--secondary: var(
+    --c--globals--colors--blue-2-350
+  );
+  --c--contextuals--border--palette--blue-2--tertiary: var(
+    --c--globals--colors--blue-2-150
+  );
+  --c--contextuals--border--palette--purple--primary: var(
+    --c--globals--colors--purple-500
+  );
+  --c--contextuals--border--palette--purple--secondary: var(
+    --c--globals--colors--purple-350
+  );
+  --c--contextuals--border--palette--purple--tertiary: var(
+    --c--globals--colors--purple-150
+  );
+  --c--contextuals--border--palette--pink--primary: var(
+    --c--globals--colors--pink-500
+  );
+  --c--contextuals--border--palette--pink--secondary: var(
+    --c--globals--colors--pink-350
+  );
+  --c--contextuals--border--palette--pink--tertiary: var(
+    --c--globals--colors--pink-150
+  );
+  --c--contextuals--border--palette--gray--primary: var(
+    --c--globals--colors--gray-500
+  );
+  --c--contextuals--border--palette--gray--secondary: var(
+    --c--globals--colors--gray-350
+  );
+  --c--contextuals--border--palette--gray--tertiary: var(
+    --c--globals--colors--gray-150
+  );
   --c--components--modal--width-small: 342px;
   --c--components--tooltip--padding: 4px 8px;
   --c--components--tooltip--background-color: var(
-    --c--theme--colors--greyscale-1000
+    --c--contextuals--background--semantic--neutral--tertiary
   );
   --c--components--button--medium-height: 40px;
   --c--components--button--medium-text-height: 40px;
   --c--components--button--border-radius: 4px;
-  --c--components--button--small-height: 26px;
-  --c--components--button--primary--background--color: var(
-    --c--theme--colors--primary-text
-  );
-  --c--components--button--primary--background--color-hover: #1212ff;
-  --c--components--button--primary--background--color-active: #2323ff;
-  --c--components--button--primary--background--color-disabled: var(
-    --c--theme--colors--greyscale-100
-  );
-  --c--components--button--primary--color: #fff;
-  --c--components--button--primary--color-hover: #fff;
-  --c--components--button--primary--color-active: #fff;
-  --c--components--button--primary--color-focus-visible: #fff;
-  --c--components--button--primary--disabled: var(
-    --c--theme--colors--greyscale-400
-  );
-  --c--components--button--primary--background--disabled: var(
-    --c--theme--colors--greyscale-100
-  );
-  --c--components--button--primary-text--background--color: var(
-    --c--theme--colors--primary-text
-  );
-  --c--components--button--primary-text--background--color-hover: var(
-    --c--theme--colors--greyscale-100
-  );
-  --c--components--button--primary-text--background--color-active: var(
-    --c--theme--colors--primary-100
-  );
-  --c--components--button--primary-text--background--color-focus-visible: #fff;
-  --c--components--button--primary-text--background--color-disabled: var(
-    --c--theme--colors--greyscale-000
-  );
-  --c--components--button--primary-text--color: var(
-    --c--theme--colors--primary-800
-  );
-  --c--components--button--primary-text--color-hover: var(
-    --c--theme--colors--primary-800
-  );
-  --c--components--button--primary-text--disabled: var(
-    --c--theme--colors--greyscale-400
-  );
-  --c--components--button--secondary--background--color-hover: #f6f6f6;
-  --c--components--button--secondary--background--color-active: #ededed;
-  --c--components--button--secondary--background--color-focus-visible: var(
-    --c--theme--colors--greyscale-000
-  );
-  --c--components--button--secondary--background--disabled: var(
-    --c--theme--colors--greyscale-000
-  );
-  --c--components--button--secondary--color: var(
-    --c--theme--colors--primary-800
-  );
-  --c--components--button--secondary--border--color: var(
-    --c--theme--colors--greyscale-300
-  );
-  --c--components--button--secondary--border--color-hover: var(
-    --c--theme--colors--greyscale-300
-  );
-  --c--components--button--secondary--border--color-disabled: var(
-    --c--theme--colors--greyscale-300
-  );
-  --c--components--button--secondary--disabled: var(
-    --c--theme--colors--greyscale-400
-  );
-  --c--components--button--tertiary--background--color: var(
-    --c--theme--colors--primary-100
-  );
-  --c--components--button--tertiary--background--color-focus-visible: var(
-    --c--theme--colors--primary-100
-  );
-  --c--components--button--tertiary--background--color-hover: var(
-    --c--theme--colors--primary-300
-  );
-  --c--components--button--tertiary--background--color-active: var(
-    --c--theme--colors--primary-300
-  );
-  --c--components--button--tertiary--background--disabled: var(
-    --c--theme--colors--primary-050
-  );
-  --c--components--button--tertiary--color: var(
-    --c--theme--colors--primary-800
-  );
-  --c--components--button--tertiary--disabled: var(
-    --c--theme--colors--primary-300
-  );
-  --c--components--button--tertiary-text--background--color-hover: var(
-    --c--theme--colors--greyscale-100
-  );
-  --c--components--button--tertiary-text--color-hover: var(
-    --c--theme--colors--primary-text
-  );
-  --c--components--button--tertiary-text--color: var(
-    --c--theme--colors--primary-600
-  );
-  --c--components--button--tertiary-text--disabled: var(
-    --c--theme--colors--primary-300
-  );
-  --c--components--button--danger--color-hover: white;
-  --c--components--button--danger--background--color: var(
-    --c--theme--colors--danger-600
-  );
-  --c--components--button--danger--background--color-hover: #ff2725;
-  --c--components--button--danger--background--color-focus-visible: var(
-    --c--theme--colors--danger-600
-  );
-  --c--components--button--danger--background--color-disabled: var(
-    --c--theme--colors--greyscale-100
-  );
-  --c--components--button--danger--color-disabled: var(
-    --c--theme--colors--greyscale-400
-  );
+  --c--components--button--border-radius--active: 4px;
+  --c--components--button--border-radius--focus: 4px;
   --c--components--datagrid--header--color: var(
-    --c--theme--colors--greyscale-600
+    --c--contextuals--content--semantic--neutral--primary
   );
   --c--components--datagrid--header--size: 12px;
   --c--components--datagrid--header--weight: 500;
   --c--components--datagrid--body--background-color-hover: var(
-    --c--theme--colors--greyscale-100
+    --c--contextuals--background--semantic--neutral--tertiary
   );
-  --c--components--forms-checkbox--border-radius: 4px;
-  --c--components--forms-checkbox--border-color: var(
-    --c--theme--colors--primary-800
+  --c--components--forms-checkbox--font-size: var(
+    --c--globals--font--sizes--sm
   );
-  --c--components--forms-checkbox--background-color--hover: var(
-    --c--theme--colors--greyscale-100
-  );
-  --c--components--forms-checkbox--border--color-disabled: var(
-    --c--theme--colors--greyscale-200
-  );
-  --c--components--forms-checkbox--border--color: var(
-    --c--theme--colors--primary-800
-  );
-  --c--components--forms-checkbox--background--disabled: var(
-    --c--theme--colors--greyscale-200
-  );
-  --c--components--forms-checkbox--background--enable: var(
-    --c--theme--colors--primary-800
-  );
-  --c--components--forms-checkbox--check--disabled: var(
-    --c--theme--colors--greyscale-300
-  );
-  --c--components--forms-checkbox--check--enable: var(
-    --c--theme--colors--greyscale-000
-  );
-  --c--components--forms-checkbox--color: var(--c--theme--colors--primary-text);
-  --c--components--forms-checkbox--label--color: var(
-    --c--theme--colors--greyscale-1000
-  );
-  --c--components--forms-checkbox--label--size: var(
-    --c--theme--font--sizes--sm
-  );
-  --c--components--forms-checkbox--label--weight: 500;
-  --c--components--forms-checkbox--text--color: var(
-    --c--theme--colors--greyscale-600
-  );
-  --c--components--forms-checkbox--text--size: var(--c--theme--font--sizes--s);
-  --c--components--forms-checkbox--text--weight: 400;
-  --c--components--forms-checkbox--text--color-disabled: var(
-    --c--theme--colors--greyscale-300
-  );
-  --c--components--forms-labelledbox--label-color--small: var(
-    --c--theme--colors--greyscale-950
-  );
-  --c--components--forms-labelledbox--label-color--small--disabled: var(
-    --c--theme--colors--greyscale-300
-  );
-  --c--components--forms-labelledbox--label-color--big: var(
-    --c--theme--colors--greyscale-950
-  );
-  --c--components--forms-labelledbox--label-color--big--disabled: var(
-    --c--theme--colors--greyscale-300
-  );
-  --c--components--forms-radio--border-color: var(
-    --c--theme--colors--primary-800
-  );
-  --c--components--forms-radio--background-color: var(
-    --c--theme--colors--greyscale-000
-  );
-  --c--components--forms-radio--accent-color: var(
-    --c--theme--colors--primary-800
-  );
-  --c--components--forms-radio--accent-color-disabled: var(
-    --c--theme--colors--greyscale-300
-  );
-  --c--components--forms-switch--border--color-disabled: var(
-    --c--theme--colors--greyscale-300
-  );
-  --c--components--forms-switch--border--color: var(
-    --c--theme--colors--primary-800
-  );
-  --c--components--forms-switch--handle-background-color: white;
-  --c--components--forms-switch--handle-background-color--disabled: var(
-    --c--theme--colors--greyscale-000
-  );
-  --c--components--forms-switch--rail-background-color--disabled: var(
-    --c--theme--colors--greyscale-000
-  );
-  --c--components--forms-switch--accent-color: var(
-    --c--theme--colors--primary-800
-  );
-  --c--components--forms-textarea--label-color--focus: var(
-    --c--theme--colors--greyscale-1000
-  );
-  --c--components--forms-textarea--border-radius: 4px;
-  --c--components--forms-textarea--border-color: var(
-    --c--theme--colors--greyscale-400
-  );
-  --c--components--forms-textarea--box-shadow--color--hover: var(
-    --c--theme--colors--greyscale-400
-  );
-  --c--components--forms-textarea--box-shadow--color--focus: var(
-    --c--theme--colors--primary-800
-  );
-  --c--components--forms-textarea--value-color: var(
-    --c--theme--colors--greyscale-950
-  );
-  --c--components--forms-textarea--value-color--disabled: var(
-    --c--theme--colors--greyscale-300
-  );
-  --c--components--forms-textarea--font-size: 14px;
-  --c--components--forms-input--label-color--focus: var(
-    --c--theme--colors--greyscale-1000
-  );
-  --c--components--forms-input--border-radius: 4px;
-  --c--components--forms-input--border-color: var(
-    --c--theme--colors--greyscale-400
-  );
-  --c--components--forms-input--box-shadow--color--hover: var(
-    --c--theme--colors--greyscale-400
-  );
-  --c--components--forms-input--box-shadow--color--focus: var(
-    --c--theme--colors--primary-800
-  );
-  --c--components--forms-input--value-color: var(
-    --c--theme--colors--greyscale-950
-  );
-  --c--components--forms-input--value-color--disabled: var(
-    --c--theme--colors--greyscale-300
-  );
-  --c--components--forms-input--font-size: 14px;
-  --c--components--forms-select--label-color--focus: var(
-    --c--theme--colors--greyscale-1000
-  );
-  --c--components--forms-select--item-font-size: 14px;
-  --c--components--forms-select--border-radius: 4px;
-  --c--components--forms-select--border-radius-hover: 4px;
-  --c--components--forms-select--border-color: var(
-    --c--theme--colors--greyscale-400
-  );
-  --c--components--forms-select--box-shadow--color--hover: var(
-    --c--theme--colors--greyscale-400
-  );
-  --c--components--forms-select--box-shadow--color--focus: var(
-    --c--theme--colors--primary-800
-  );
-  --c--components--forms-select--value-color: var(
-    --c--theme--colors--greyscale-950
-  );
-  --c--components--forms-select--font-size: 14px;
-  --c--components--badge--font-size: var(--c--theme--font--sizes--xs);
-  --c--components--badge--border-radius: 4px;
-  --c--components--badge--padding-inline: var(--c--theme--spacings--xs);
-  --c--components--badge--padding-block: var(--c--theme--spacings--2xs);
+  --c--components--badge--font-size: var(--c--globals--font--sizes--xs);
+  --c--components--badge--border-radius: 12px;
+  --c--components--badge--padding-inline: var(--c--globals--spacings--xs);
+  --c--components--badge--padding-block: var(--c--globals--spacings--2xs);
   --c--components--badge--accent--background-color: var(
-    --c--theme--colors--primary-100
+    --c--contextuals--background--semantic--brand--secondary
+  );
+  --c--components--badge--accent--color: var(
+    --c--contextuals--content--semantic--brand--secondary
   );
-  --c--components--badge--accent--color: var(--c--theme--colors--primary-600);
   --c--components--badge--neutral--background-color: var(
-    --c--theme--colors--greyscale-100
+    --c--contextuals--background--semantic--neutral--secondary
   );
   --c--components--badge--neutral--color: var(
-    --c--theme--colors--greyscale-600
+    --c--contextuals--content--semantic--neutral--secondary
   );
   --c--components--badge--danger--background-color: var(
-    --c--theme--colors--danger-100
+    --c--contextuals--background--semantic--error--secondary
+  );
+  --c--components--badge--danger--color: var(
+    --c--contextuals--content--semantic--error--secondary
   );
-  --c--components--badge--danger--color: var(--c--theme--colors--danger-600);
   --c--components--badge--success--background-color: var(
-    --c--theme--colors--success-100
+    --c--contextuals--background--semantic--success--secondary
+  );
+  --c--components--badge--success--color: var(
+    --c--contextuals--content--semantic--success--secondary
   );
-  --c--components--badge--success--color: var(--c--theme--colors--success-600);
   --c--components--badge--warning--background-color: var(
-    --c--theme--colors--warning-100
+    --c--contextuals--background--semantic--warning--secondary
+  );
+  --c--components--badge--warning--color: var(
+    --c--contextuals--content--semantic--warning--secondary
   );
-  --c--components--badge--warning--color: var(--c--theme--colors--warning-600);
   --c--components--badge--info--background-color: var(
-    --c--theme--colors--info-100
+    --c--contextuals--background--semantic--info--secondary
   );
-  --c--components--badge--info--color: var(--c--theme--colors--info-600);
+  --c--components--badge--info--color: var(
+    --c--contextuals--content--semantic--info--secondary
+  );
+  --c--components--logo--src: ;
+  --c--components--logo--alt: ;
+  --c--components--logo--widthheader: ;
+  --c--components--logo--widthfooter: ;
   --c--components--la-gaufre: false;
   --c--components--home-proconnect: false;
-  --c--components--image-system-filter: ;
-  --c--components--favicon--ico: /assets/favicon-light.ico;
   --c--components--favicon--png-light: /assets/favicon-light.png;
   --c--components--favicon--png-dark: /assets/favicon-dark.png;
 }
 
 .cunningham-theme--dark {
-  --c--theme--colors--greyscale-100: #182536;
-  --c--theme--colors--greyscale-200: #303c4b;
-  --c--theme--colors--greyscale-300: #555f6b;
-  --c--theme--colors--greyscale-400: #79818a;
-  --c--theme--colors--greyscale-500: #9ea3aa;
-  --c--theme--colors--greyscale-600: #c2c6ca;
-  --c--theme--colors--greyscale-700: #e7e8ea;
-  --c--theme--colors--greyscale-800: #f3f4f4;
-  --c--theme--colors--greyscale-900: #fafafb;
-  --c--theme--colors--greyscale-000: #0c1a2b;
-  --c--theme--colors--primary-100: #3b4c62;
-  --c--theme--colors--primary-200: #4d6481;
-  --c--theme--colors--primary-300: #6381a6;
-  --c--theme--colors--primary-400: #7fa5d5;
-  --c--theme--colors--primary-500: #8cb5ea;
-  --c--theme--colors--primary-600: #a3c4ee;
-  --c--theme--colors--primary-700: #c3d8f4;
-  --c--theme--colors--primary-800: #dde9f8;
-  --c--theme--colors--primary-900: #f4f8fd;
-  --c--theme--colors--success-100: #eef8d7;
-  --c--theme--colors--success-200: #d9f1b2;
-  --c--theme--colors--success-300: #bde985;
-  --c--theme--colors--success-400: #a0e25d;
-  --c--theme--colors--success-500: #76d628;
-  --c--theme--colors--success-600: #5bb520;
-  --c--theme--colors--success-700: #43941a;
-  --c--theme--colors--success-800: #307414;
-  --c--theme--colors--success-900: #225d10;
-  --c--theme--colors--warning-100: #f7f3d5;
-  --c--theme--colors--warning-200: #f0e5aa;
-  --c--theme--colors--warning-300: #e8d680;
-  --c--theme--colors--warning-400: #e3c95f;
-  --c--theme--colors--warning-500: #d9b32b;
-  --c--theme--colors--warning-600: #bd9721;
-  --c--theme--colors--warning-700: #9d7b1c;
-  --c--theme--colors--warning-800: #7e6016;
-  --c--theme--colors--warning-900: #684d12;
-  --c--theme--colors--danger-100: #f8d0d0;
-  --c--theme--colors--danger-200: #f09898;
-  --c--theme--colors--danger-300: #f09898;
-  --c--theme--colors--danger-400: #ed8585;
-  --c--theme--colors--danger-500: #e96666;
-  --c--theme--colors--danger-600: #d66;
-  --c--theme--colors--danger-700: #c36666;
-  --c--theme--colors--danger-800: #ae6666;
-  --c--theme--colors--danger-900: #9d6666;
+  --c--globals--colors--logo-1: #377fdb;
+  --c--globals--colors--logo-2: #377fdb;
+  --c--globals--colors--logo-1-dark: #95abff;
+  --c--globals--colors--logo-2-dark: #95abff;
+  --c--globals--colors--brand-050: #eaf1fb;
+  --c--globals--colors--brand-100: #d5e4f7;
+  --c--globals--colors--brand-150: #c0d6f4;
+  --c--globals--colors--brand-200: #abc9f0;
+  --c--globals--colors--brand-250: #96bcec;
+  --c--globals--colors--brand-300: #80aee8;
+  --c--globals--colors--brand-350: #6ca0e4;
+  --c--globals--colors--brand-400: #5693e0;
+  --c--globals--colors--brand-450: #4085dc;
+  --c--globals--colors--brand-500: #2976d8;
+  --c--globals--colors--brand-550: #1167d4;
+  --c--globals--colors--brand-600: #0659c5;
+  --c--globals--colors--brand-650: #1a509f;
+  --c--globals--colors--brand-700: #20467f;
+  --c--globals--colors--brand-750: #203c63;
+  --c--globals--colors--brand-800: #1d314c;
+  --c--globals--colors--brand-850: #1a2638;
+  --c--globals--colors--brand-900: #141c28;
+  --c--globals--colors--brand-950: #0c1117;
+  --c--globals--colors--gray-000: #fff;
+  --c--globals--colors--gray-025: #f7f8f8;
+  --c--globals--colors--gray-050: #f0f1f2;
+  --c--globals--colors--gray-100: #e1e2e5;
+  --c--globals--colors--gray-150: #d2d4d8;
+  --c--globals--colors--gray-200: #c4c7cb;
+  --c--globals--colors--gray-250: #b5b9be;
+  --c--globals--colors--gray-300: #a7acb2;
+  --c--globals--colors--gray-350: #999ea5;
+  --c--globals--colors--gray-400: #8d9197;
+  --c--globals--colors--gray-450: #80848a;
+  --c--globals--colors--gray-500: #74777c;
+  --c--globals--colors--gray-550: #686b6f;
+  --c--globals--colors--gray-600: #5c5f63;
+  --c--globals--colors--gray-650: #505356;
+  --c--globals--colors--gray-700: #45474a;
+  --c--globals--colors--gray-750: #3a3b3e;
+  --c--globals--colors--gray-800: #2f3033;
+  --c--globals--colors--gray-850: #252627;
+  --c--globals--colors--gray-900: #1b1c1d;
+  --c--globals--colors--gray-950: #101112;
+  --c--globals--colors--gray-1000: #000;
+  --c--globals--colors--info-050: #eaf1fb;
+  --c--globals--colors--info-100: #d5e4f7;
+  --c--globals--colors--info-150: #c0d6f4;
+  --c--globals--colors--info-200: #abc9f0;
+  --c--globals--colors--info-250: #96bcec;
+  --c--globals--colors--info-300: #80aee8;
+  --c--globals--colors--info-350: #6ca0e4;
+  --c--globals--colors--info-400: #5693e0;
+  --c--globals--colors--info-450: #4085dc;
+  --c--globals--colors--info-500: #2976d8;
+  --c--globals--colors--info-550: #1167d4;
+  --c--globals--colors--info-600: #0659c5;
+  --c--globals--colors--info-650: #1a509f;
+  --c--globals--colors--info-700: #20467f;
+  --c--globals--colors--info-750: #203c63;
+  --c--globals--colors--info-800: #1d314c;
+  --c--globals--colors--info-850: #1a2638;
+  --c--globals--colors--info-900: #141c28;
+  --c--globals--colors--info-950: #0c1117;
+  --c--globals--colors--success-050: #e4f7d4;
+  --c--globals--colors--success-100: #c8eea8;
+  --c--globals--colors--success-150: #aae579;
+  --c--globals--colors--success-200: #89dc45;
+  --c--globals--colors--success-250: #72cf27;
+  --c--globals--colors--success-300: #6ac024;
+  --c--globals--colors--success-350: #61b121;
+  --c--globals--colors--success-400: #59a21e;
+  --c--globals--colors--success-450: #51941c;
+  --c--globals--colors--success-500: #4b851a;
+  --c--globals--colors--success-550: #427816;
+  --c--globals--colors--success-600: #3a6a14;
+  --c--globals--colors--success-650: #385c1f;
+  --c--globals--colors--success-700: #344d24;
+  --c--globals--colors--success-750: #2e4022;
+  --c--globals--colors--success-800: #27341f;
+  --c--globals--colors--success-850: #20281a;
+  --c--globals--colors--success-900: #181d15;
+  --c--globals--colors--success-950: #10120e;
+  --c--globals--colors--warning-050: #fff1bd;
+  --c--globals--colors--warning-100: #ffe176;
+  --c--globals--colors--warning-150: #ffcf25;
+  --c--globals--colors--warning-200: #f4bf06;
+  --c--globals--colors--warning-250: #e3b205;
+  --c--globals--colors--warning-300: #d3a504;
+  --c--globals--colors--warning-350: #c29805;
+  --c--globals--colors--warning-400: #b28c03;
+  --c--globals--colors--warning-450: #a27f03;
+  --c--globals--colors--warning-500: #937303;
+  --c--globals--colors--warning-550: #836703;
+  --c--globals--colors--warning-600: #745b03;
+  --c--globals--colors--warning-650: #625019;
+  --c--globals--colors--warning-700: #524620;
+  --c--globals--colors--warning-750: #443b20;
+  --c--globals--colors--warning-800: #36301d;
+  --c--globals--colors--warning-850: #2a2619;
+  --c--globals--colors--warning-900: #1e1c13;
+  --c--globals--colors--warning-950: #12110c;
+  --c--globals--colors--error-050: #fceded;
+  --c--globals--colors--error-100: #fadbdb;
+  --c--globals--colors--error-150: #f7c9c9;
+  --c--globals--colors--error-200: #f5b7b7;
+  --c--globals--colors--error-250: #f2a4a4;
+  --c--globals--colors--error-300: #ef9191;
+  --c--globals--colors--error-350: #ec7d7d;
+  --c--globals--colors--error-400: #e96868;
+  --c--globals--colors--error-450: #e55050;
+  --c--globals--colors--error-500: #e13131;
+  --c--globals--colors--error-550: #d80000;
+  --c--globals--colors--error-600: #c00101;
+  --c--globals--colors--error-650: #9e2219;
+  --c--globals--colors--error-700: #802820;
+  --c--globals--colors--error-750: #662820;
+  --c--globals--colors--error-800: #4f231e;
+  --c--globals--colors--error-850: #3b1d19;
+  --c--globals--colors--error-900: #2a1614;
+  --c--globals--colors--error-950: #1a0e0c;
+  --c--globals--colors--red-050: #fdeded;
+  --c--globals--colors--red-100: #fadbdb;
+  --c--globals--colors--red-150: #f8c9c9;
+  --c--globals--colors--red-200: #f5b7b6;
+  --c--globals--colors--red-250: #f3a4a3;
+  --c--globals--colors--red-300: #f09190;
+  --c--globals--colors--red-350: #ee7c7b;
+  --c--globals--colors--red-400: #eb6665;
+  --c--globals--colors--red-450: #e74e4d;
+  --c--globals--colors--red-500: #d83f3d;
+  --c--globals--colors--red-550: #c23837;
+  --c--globals--colors--red-600: #ac3231;
+  --c--globals--colors--red-650: #8d3531;
+  --c--globals--colors--red-700: #73332f;
+  --c--globals--colors--red-750: #5b2f2b;
+  --c--globals--colors--red-800: #472826;
+  --c--globals--colors--red-850: #35211f;
+  --c--globals--colors--red-900: #251817;
+  --c--globals--colors--red-950: #160f0e;
+  --c--globals--colors--orange-050: #fdeee2;
+  --c--globals--colors--orange-100: #fcddc5;
+  --c--globals--colors--orange-150: #facba8;
+  --c--globals--colors--orange-200: #f8b98b;
+  --c--globals--colors--orange-250: #f6a76a;
+  --c--globals--colors--orange-300: #f4934b;
+  --c--globals--colors--orange-350: #f27e27;
+  --c--globals--colors--orange-400: #e76e12;
+  --c--globals--colors--orange-450: #d26411;
+  --c--globals--colors--orange-500: #be5b0f;
+  --c--globals--colors--orange-550: #aa510e;
+  --c--globals--colors--orange-600: #97480c;
+  --c--globals--colors--orange-650: #7e431d;
+  --c--globals--colors--orange-700: #673c22;
+  --c--globals--colors--orange-750: #533422;
+  --c--globals--colors--orange-800: #412c1f;
+  --c--globals--colors--orange-850: #31231b;
+  --c--globals--colors--orange-900: #221a14;
+  --c--globals--colors--orange-950: #15100c;
+  --c--globals--colors--brown-050: #f3f0ef;
+  --c--globals--colors--brown-100: #e7e1df;
+  --c--globals--colors--brown-150: #dcd2cf;
+  --c--globals--colors--brown-200: #d0c4bf;
+  --c--globals--colors--brown-250: #c5b6b0;
+  --c--globals--colors--brown-300: #baa7a1;
+  --c--globals--colors--brown-350: #af9992;
+  --c--globals--colors--brown-400: #a48b83;
+  --c--globals--colors--brown-450: #997e74;
+  --c--globals--colors--brown-500: #8f7065;
+  --c--globals--colors--brown-550: #846357;
+  --c--globals--colors--brown-600: #7a5649;
+  --c--globals--colors--brown-650: #684c42;
+  --c--globals--colors--brown-700: #57423c;
+  --c--globals--colors--brown-750: #463833;
+  --c--globals--colors--brown-800: #382e2a;
+  --c--globals--colors--brown-850: #2b2422;
+  --c--globals--colors--brown-900: #1f1b19;
+  --c--globals--colors--brown-950: #121010;
+  --c--globals--colors--yellow-050: #faf0d3;
+  --c--globals--colors--yellow-100: #f5e2a4;
+  --c--globals--colors--yellow-150: #f0d275;
+  --c--globals--colors--yellow-200: #ebc242;
+  --c--globals--colors--yellow-250: #e4b213;
+  --c--globals--colors--yellow-300: #d4a511;
+  --c--globals--colors--yellow-350: #c39810;
+  --c--globals--colors--yellow-400: #b38b0f;
+  --c--globals--colors--yellow-450: #a37f0d;
+  --c--globals--colors--yellow-500: #93730c;
+  --c--globals--colors--yellow-550: #84670b;
+  --c--globals--colors--yellow-600: #755b0a;
+  --c--globals--colors--yellow-650: #63501c;
+  --c--globals--colors--yellow-700: #534521;
+  --c--globals--colors--yellow-750: #443a21;
+  --c--globals--colors--yellow-800: #36301f;
+  --c--globals--colors--yellow-850: #29261a;
+  --c--globals--colors--yellow-900: #1d1c14;
+  --c--globals--colors--yellow-950: #12110c;
+  --c--globals--colors--green-050: #e2f6e5;
+  --c--globals--colors--green-100: #c5ecca;
+  --c--globals--colors--green-150: #a7e3af;
+  --c--globals--colors--green-200: #89d894;
+  --c--globals--colors--green-250: #67ce75;
+  --c--globals--colors--green-300: #4dc25d;
+  --c--globals--colors--green-350: #48b257;
+  --c--globals--colors--green-400: #41a44f;
+  --c--globals--colors--green-450: #3b9548;
+  --c--globals--colors--green-500: #368741;
+  --c--globals--colors--green-550: #30793a;
+  --c--globals--colors--green-600: #2b6b33;
+  --c--globals--colors--green-650: #2f5c34;
+  --c--globals--colors--green-700: #2e4e31;
+  --c--globals--colors--green-750: #2a412c;
+  --c--globals--colors--green-800: #253426;
+  --c--globals--colors--green-850: #1e281f;
+  --c--globals--colors--green-900: #171d17;
+  --c--globals--colors--green-950: #0f120f;
+  --c--globals--colors--blue-1-050: #ebf1ff;
+  --c--globals--colors--blue-1-100: #d6e3fe;
+  --c--globals--colors--blue-1-150: #c2d5fe;
+  --c--globals--colors--blue-1-200: #adc7fe;
+  --c--globals--colors--blue-1-250: #99b8fd;
+  --c--globals--colors--blue-1-300: #84aafd;
+  --c--globals--colors--blue-1-350: #6f9bfd;
+  --c--globals--colors--blue-1-400: #5a8dfb;
+  --c--globals--colors--blue-1-450: #437dfc;
+  --c--globals--colors--blue-1-500: #3d71e4;
+  --c--globals--colors--blue-1-550: #3665cc;
+  --c--globals--colors--blue-1-600: #305ab5;
+  --c--globals--colors--blue-1-650: #315093;
+  --c--globals--colors--blue-1-700: #2e4675;
+  --c--globals--colors--blue-1-750: #293b5e;
+  --c--globals--colors--blue-1-800: #243048;
+  --c--globals--colors--blue-1-850: #1e2635;
+  --c--globals--colors--blue-1-900: #171c25;
+  --c--globals--colors--blue-1-950: #0e1116;
+  --c--globals--colors--blue-2-050: #e2f4f9;
+  --c--globals--colors--blue-2-100: #c5e9f3;
+  --c--globals--colors--blue-2-150: #a7dded;
+  --c--globals--colors--blue-2-200: #88d1e6;
+  --c--globals--colors--blue-2-250: #68c5e0;
+  --c--globals--colors--blue-2-300: #48b8d9;
+  --c--globals--colors--blue-2-350: #3baaca;
+  --c--globals--colors--blue-2-400: #359cb9;
+  --c--globals--colors--blue-2-450: #318ea9;
+  --c--globals--colors--blue-2-500: #2c8199;
+  --c--globals--colors--blue-2-550: #277389;
+  --c--globals--colors--blue-2-600: #236679;
+  --c--globals--colors--blue-2-650: #2a5866;
+  --c--globals--colors--blue-2-700: #2a4b55;
+  --c--globals--colors--blue-2-750: #283f47;
+  --c--globals--colors--blue-2-800: #233337;
+  --c--globals--colors--blue-2-850: #1d272a;
+  --c--globals--colors--blue-2-900: #161c1e;
+  --c--globals--colors--blue-2-950: #0e1112;
+  --c--globals--colors--purple-050: #f6eeff;
+  --c--globals--colors--purple-100: #ecdcff;
+  --c--globals--colors--purple-150: #e3cbfe;
+  --c--globals--colors--purple-200: #dab9fe;
+  --c--globals--colors--purple-250: #d0a7fe;
+  --c--globals--colors--purple-300: #c795fe;
+  --c--globals--colors--purple-350: #bd83fd;
+  --c--globals--colors--purple-400: #b36ffd;
+  --c--globals--colors--purple-450: #a85bfd;
+  --c--globals--colors--purple-500: #9b4bf3;
+  --c--globals--colors--purple-550: #8b43da;
+  --c--globals--colors--purple-600: #7b3cc1;
+  --c--globals--colors--purple-650: #673c9b;
+  --c--globals--colors--purple-700: #56387d;
+  --c--globals--colors--purple-750: #463162;
+  --c--globals--colors--purple-800: #382a4a;
+  --c--globals--colors--purple-850: #2a2237;
+  --c--globals--colors--purple-900: #1e1926;
+  --c--globals--colors--purple-950: #121017;
+  --c--globals--colors--pink-050: #fcedf5;
+  --c--globals--colors--pink-100: #f9daea;
+  --c--globals--colors--pink-150: #f7c7e0;
+  --c--globals--colors--pink-200: #f4b4d5;
+  --c--globals--colors--pink-250: #f1a1ca;
+  --c--globals--colors--pink-300: #ee8cbf;
+  --c--globals--colors--pink-350: #ea77b3;
+  --c--globals--colors--pink-400: #e760a6;
+  --c--globals--colors--pink-450: #e24797;
+  --c--globals--colors--pink-500: #cd4089;
+  --c--globals--colors--pink-550: #b8397b;
+  --c--globals--colors--pink-600: #a3336d;
+  --c--globals--colors--pink-650: #86355e;
+  --c--globals--colors--pink-700: #6e334f;
+  --c--globals--colors--pink-750: #582e42;
+  --c--globals--colors--pink-800: #442834;
+  --c--globals--colors--pink-850: #332028;
+  --c--globals--colors--pink-900: #24181d;
+  --c--globals--colors--pink-950: #160f12;
+  --c--globals--colors--black-000: #0000;
+  --c--globals--colors--black-050: #0000000d;
+  --c--globals--colors--black-100: #0000001a;
+  --c--globals--colors--black-150: #00000026;
+  --c--globals--colors--black-200: #0003;
+  --c--globals--colors--black-250: #00000040;
+  --c--globals--colors--black-300: #0000004d;
+  --c--globals--colors--black-350: #00000059;
+  --c--globals--colors--black-400: #0006;
+  --c--globals--colors--black-450: #00000073;
+  --c--globals--colors--black-500: #00000080;
+  --c--globals--colors--black-550: #0000008c;
+  --c--globals--colors--black-600: #0009;
+  --c--globals--colors--black-650: #000000a6;
+  --c--globals--colors--black-700: #000000b3;
+  --c--globals--colors--black-750: #000000bf;
+  --c--globals--colors--black-800: #000c;
+  --c--globals--colors--black-850: #000000d9;
+  --c--globals--colors--black-900: #000000e6;
+  --c--globals--colors--black-950: #000000f2;
+  --c--globals--colors--white-000: #fff;
+  --c--globals--colors--white-050: #ffffff0d;
+  --c--globals--colors--white-100: #ffffff1a;
+  --c--globals--colors--white-150: #ffffff26;
+  --c--globals--colors--white-200: #fff3;
+  --c--globals--colors--white-250: #ffffff40;
+  --c--globals--colors--white-300: #ffffff4d;
+  --c--globals--colors--white-350: #ffffff59;
+  --c--globals--colors--white-400: #fff6;
+  --c--globals--colors--white-450: #ffffff73;
+  --c--globals--colors--white-500: #ffffff80;
+  --c--globals--colors--white-550: #ffffff8c;
+  --c--globals--colors--white-600: #fff9;
+  --c--globals--colors--white-650: #ffffffa6;
+  --c--globals--colors--white-700: #ffffffb3;
+  --c--globals--colors--white-750: #ffffffbf;
+  --c--globals--colors--white-800: #fffc;
+  --c--globals--colors--white-850: #ffffffd9;
+  --c--globals--colors--white-900: #ffffffe6;
+  --c--globals--colors--white-950: #fffffff2;
+  --c--globals--transitions--ease-in: cubic-bezier(0.32, 0, 0.67, 0);
+  --c--globals--transitions--ease-out: cubic-bezier(0.33, 1, 0.68, 1);
+  --c--globals--transitions--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --c--globals--transitions--duration: 250ms;
+  --c--globals--font--sizes--xs: 0.75rem;
+  --c--globals--font--sizes--sm: 0.875rem;
+  --c--globals--font--sizes--md: 1rem;
+  --c--globals--font--sizes--lg: 1.125rem;
+  --c--globals--font--sizes--ml: 0.938rem;
+  --c--globals--font--sizes--xl: 1.25rem;
+  --c--globals--font--sizes--t: 0.6875rem;
+  --c--globals--font--sizes--s: 0.75rem;
+  --c--globals--font--sizes--h1: 2rem;
+  --c--globals--font--sizes--h2: 1.75rem;
+  --c--globals--font--sizes--h3: 1.5rem;
+  --c--globals--font--sizes--h4: 1.375rem;
+  --c--globals--font--sizes--h5: 1.25rem;
+  --c--globals--font--sizes--h6: 1.125rem;
+  --c--globals--font--sizes--xl-alt: 5rem;
+  --c--globals--font--sizes--lg-alt: 4.5rem;
+  --c--globals--font--sizes--md-alt: 4rem;
+  --c--globals--font--sizes--sm-alt: 3.5rem;
+  --c--globals--font--sizes--xs-alt: 3rem;
+  --c--globals--font--weights--thin: 200;
+  --c--globals--font--weights--light: 300;
+  --c--globals--font--weights--regular: 400;
+  --c--globals--font--weights--medium: 500;
+  --c--globals--font--weights--bold: 600;
+  --c--globals--font--weights--extrabold: 700;
+  --c--globals--font--weights--black: 800;
+  --c--globals--font--families--base: 'Roboto Flex Variable', sans-serif;
+  --c--globals--font--families--accent: 'Roboto Flex Variable', sans-serif;
+  --c--globals--spacings--l: 3rem;
+  --c--globals--spacings--b: 1.625rem;
+  --c--globals--spacings--m: 0.8125rem;
+  --c--globals--spacings--s: 1rem;
+  --c--globals--spacings--t: 0.5rem;
+  --c--globals--spacings--st: 0.25rem;
+  --c--globals--spacings--4xs: 0.125rem;
+  --c--globals--spacings--xxxs: 0.25rem;
+  --c--globals--spacings--xxs: 0.375rem;
+  --c--globals--spacings--xs: 0.5rem;
+  --c--globals--spacings--sm: 0.75rem;
+  --c--globals--spacings--base: 1rem;
+  --c--globals--spacings--md: 1.5rem;
+  --c--globals--spacings--lg: 2rem;
+  --c--globals--spacings--xl: 2.5rem;
+  --c--globals--spacings--xxl: 3rem;
+  --c--globals--spacings--xxxl: 3.5rem;
+  --c--globals--spacings--4xl: 4rem;
+  --c--globals--spacings--5xl: 4.5rem;
+  --c--globals--spacings--6xl: 6rem;
+  --c--globals--spacings--7xl: 7.5rem;
+  --c--globals--breakpoints--xs: 0;
+  --c--globals--breakpoints--sm: 576px;
+  --c--globals--breakpoints--md: 768px;
+  --c--globals--breakpoints--lg: 992px;
+  --c--globals--breakpoints--xl: 1200px;
+  --c--globals--breakpoints--xxl: 1400px;
+  --c--contextuals--background--surface--primary: var(
+    --c--globals--colors--gray-800
+  );
+  --c--contextuals--background--surface--secondary: var(
+    --c--globals--colors--gray-850
+  );
+  --c--contextuals--background--surface--tertiary: var(
+    --c--globals--colors--gray-900
+  );
+  --c--contextuals--background--semantic--brand--primary: var(
+    --c--globals--colors--brand-550
+  );
+  --c--contextuals--background--semantic--brand--primary-hover: var(
+    --c--globals--colors--brand-650
+  );
+  --c--contextuals--background--semantic--brand--secondary: var(
+    --c--globals--colors--brand-700
+  );
+  --c--contextuals--background--semantic--brand--secondary-hover: var(
+    --c--globals--colors--brand-750
+  );
+  --c--contextuals--background--semantic--brand--tertiary: var(
+    --c--globals--colors--brand-750
+  );
+  --c--contextuals--background--semantic--brand--tertiary-hover: var(
+    --c--globals--colors--brand-800
+  );
+  --c--contextuals--background--semantic--neutral--primary: var(
+    --c--globals--colors--gray-550
+  );
+  --c--contextuals--background--semantic--neutral--primary-hover: var(
+    --c--globals--colors--gray-650
+  );
+  --c--contextuals--background--semantic--neutral--secondary: var(
+    --c--globals--colors--gray-700
+  );
+  --c--contextuals--background--semantic--neutral--secondary-hover: var(
+    --c--globals--colors--gray-750
+  );
+  --c--contextuals--background--semantic--neutral--tertiary: var(
+    --c--globals--colors--gray-750
+  );
+  --c--contextuals--background--semantic--neutral--tertiary-hover: var(
+    --c--globals--colors--gray-800
+  );
+  --c--contextuals--background--semantic--contextual--primary: var(
+    --c--globals--colors--white-050
+  );
+  --c--contextuals--background--semantic--contextual--primary-hover: var(
+    --c--globals--colors--white-100
+  );
+  --c--contextuals--background--semantic--info--primary: var(
+    --c--globals--colors--info-550
+  );
+  --c--contextuals--background--semantic--info--primary-hover: var(
+    --c--globals--colors--info-650
+  );
+  --c--contextuals--background--semantic--info--secondary: var(
+    --c--globals--colors--info-700
+  );
+  --c--contextuals--background--semantic--info--secondary-hover: var(
+    --c--globals--colors--info-750
+  );
+  --c--contextuals--background--semantic--info--tertiary: var(
+    --c--globals--colors--info-750
+  );
+  --c--contextuals--background--semantic--info--tertiary-hover: var(
+    --c--globals--colors--info-800
+  );
+  --c--contextuals--background--semantic--success--primary: var(
+    --c--globals--colors--success-550
+  );
+  --c--contextuals--background--semantic--success--primary-hover: var(
+    --c--globals--colors--success-650
+  );
+  --c--contextuals--background--semantic--success--secondary: var(
+    --c--globals--colors--success-700
+  );
+  --c--contextuals--background--semantic--success--secondary-hover: var(
+    --c--globals--colors--success-750
+  );
+  --c--contextuals--background--semantic--success--tertiary: var(
+    --c--globals--colors--success-750
+  );
+  --c--contextuals--background--semantic--success--tertiary-hover: var(
+    --c--globals--colors--success-800
+  );
+  --c--contextuals--background--semantic--warning--primary: var(
+    --c--globals--colors--warning-550
+  );
+  --c--contextuals--background--semantic--warning--primary-hover: var(
+    --c--globals--colors--warning-650
+  );
+  --c--contextuals--background--semantic--warning--secondary: var(
+    --c--globals--colors--warning-700
+  );
+  --c--contextuals--background--semantic--warning--secondary-hover: var(
+    --c--globals--colors--warning-750
+  );
+  --c--contextuals--background--semantic--warning--tertiary: var(
+    --c--globals--colors--warning-750
+  );
+  --c--contextuals--background--semantic--warning--tertiary-hover: var(
+    --c--globals--colors--warning-800
+  );
+  --c--contextuals--background--semantic--error--primary: var(
+    --c--globals--colors--error-550
+  );
+  --c--contextuals--background--semantic--error--primary-hover: var(
+    --c--globals--colors--error-650
+  );
+  --c--contextuals--background--semantic--error--secondary: var(
+    --c--globals--colors--error-700
+  );
+  --c--contextuals--background--semantic--error--secondary-hover: var(
+    --c--globals--colors--error-750
+  );
+  --c--contextuals--background--semantic--error--tertiary: var(
+    --c--globals--colors--error-750
+  );
+  --c--contextuals--background--semantic--error--tertiary-hover: var(
+    --c--globals--colors--error-800
+  );
+  --c--contextuals--background--semantic--disabled--primary: var(
+    --c--globals--colors--gray-750
+  );
+  --c--contextuals--background--semantic--disabled--secondary: var(
+    --c--globals--colors--gray-800
+  );
+  --c--contextuals--background--palette--brand--primary: var(
+    --c--globals--colors--brand-350
+  );
+  --c--contextuals--background--palette--brand--secondary: var(
+    --c--globals--colors--brand-450
+  );
+  --c--contextuals--background--palette--brand--tertiary: var(
+    --c--globals--colors--brand-550
+  );
+  --c--contextuals--background--palette--red--primary: var(
+    --c--globals--colors--red-350
+  );
+  --c--contextuals--background--palette--red--secondary: var(
+    --c--globals--colors--red-450
+  );
+  --c--contextuals--background--palette--red--tertiary: var(
+    --c--globals--colors--red-550
+  );
+  --c--contextuals--background--palette--orange--primary: var(
+    --c--globals--colors--orange-350
+  );
+  --c--contextuals--background--palette--orange--secondary: var(
+    --c--globals--colors--orange-450
+  );
+  --c--contextuals--background--palette--orange--tertiary: var(
+    --c--globals--colors--orange-550
+  );
+  --c--contextuals--background--palette--brown--primary: var(
+    --c--globals--colors--brown-350
+  );
+  --c--contextuals--background--palette--brown--secondary: var(
+    --c--globals--colors--brown-450
+  );
+  --c--contextuals--background--palette--brown--tertiary: var(
+    --c--globals--colors--brown-550
+  );
+  --c--contextuals--background--palette--yellow--primary: var(
+    --c--globals--colors--yellow-350
+  );
+  --c--contextuals--background--palette--yellow--secondary: var(
+    --c--globals--colors--yellow-450
+  );
+  --c--contextuals--background--palette--yellow--tertiary: var(
+    --c--globals--colors--yellow-550
+  );
+  --c--contextuals--background--palette--green--primary: var(
+    --c--globals--colors--green-350
+  );
+  --c--contextuals--background--palette--green--secondary: var(
+    --c--globals--colors--green-450
+  );
+  --c--contextuals--background--palette--green--tertiary: var(
+    --c--globals--colors--green-550
+  );
+  --c--contextuals--background--palette--blue-1--primary: var(
+    --c--globals--colors--blue-1-350
+  );
+  --c--contextuals--background--palette--blue-1--secondary: var(
+    --c--globals--colors--blue-1-450
+  );
+  --c--contextuals--background--palette--blue-1--tertiary: var(
+    --c--globals--colors--blue-1-550
+  );
+  --c--contextuals--background--palette--blue-2--primary: var(
+    --c--globals--colors--blue-2-350
+  );
+  --c--contextuals--background--palette--blue-2--secondary: var(
+    --c--globals--colors--blue-2-450
+  );
+  --c--contextuals--background--palette--blue-2--tertiary: var(
+    --c--globals--colors--blue-2-550
+  );
+  --c--contextuals--background--palette--purple--primary: var(
+    --c--globals--colors--purple-350
+  );
+  --c--contextuals--background--palette--purple--secondary: var(
+    --c--globals--colors--purple-450
+  );
+  --c--contextuals--background--palette--purple--tertiary: var(
+    --c--globals--colors--purple-550
+  );
+  --c--contextuals--background--palette--pink--primary: var(
+    --c--globals--colors--pink-350
+  );
+  --c--contextuals--background--palette--pink--secondary: var(
+    --c--globals--colors--pink-450
+  );
+  --c--contextuals--background--palette--pink--tertiary: var(
+    --c--globals--colors--pink-550
+  );
+  --c--contextuals--background--palette--gray--primary: var(
+    --c--globals--colors--gray-350
+  );
+  --c--contextuals--background--palette--gray--secondary: var(
+    --c--globals--colors--gray-450
+  );
+  --c--contextuals--background--palette--gray--tertiary: var(
+    --c--globals--colors--gray-550
+  );
+  --c--contextuals--content--logo1: var(--c--globals--colors--logo-1-dark);
+  --c--contextuals--content--logo2: var(--c--globals--colors--logo-2-dark);
+  --c--contextuals--content--semantic--brand--primary: var(
+    --c--globals--colors--brand-050
+  );
+  --c--contextuals--content--semantic--brand--secondary: var(
+    --c--globals--colors--brand-100
+  );
+  --c--contextuals--content--semantic--brand--tertiary: var(
+    --c--globals--colors--brand-250
+  );
+  --c--contextuals--content--semantic--brand--on-brand: var(
+    --c--globals--colors--brand-050
+  );
+  --c--contextuals--content--semantic--neutral--primary: var(
+    --c--globals--colors--gray-050
+  );
+  --c--contextuals--content--semantic--neutral--secondary: var(
+    --c--globals--colors--gray-100
+  );
+  --c--contextuals--content--semantic--neutral--tertiary: var(
+    --c--globals--colors--gray-250
+  );
+  --c--contextuals--content--semantic--neutral--on-neutral: var(
+    --c--globals--colors--gray-050
+  );
+  --c--contextuals--content--semantic--contextual--primary: var(
+    --c--globals--colors--black-850
+  );
+  --c--contextuals--content--semantic--info--primary: var(
+    --c--globals--colors--info-050
+  );
+  --c--contextuals--content--semantic--info--secondary: var(
+    --c--globals--colors--info-100
+  );
+  --c--contextuals--content--semantic--info--tertiary: var(
+    --c--globals--colors--info-250
+  );
+  --c--contextuals--content--semantic--info--on-info: var(
+    --c--globals--colors--info-050
+  );
+  --c--contextuals--content--semantic--success--primary: var(
+    --c--globals--colors--success-050
+  );
+  --c--contextuals--content--semantic--success--secondary: var(
+    --c--globals--colors--success-100
+  );
+  --c--contextuals--content--semantic--success--tertiary: var(
+    --c--globals--colors--success-250
+  );
+  --c--contextuals--content--semantic--success--on-success: var(
+    --c--globals--colors--success-050
+  );
+  --c--contextuals--content--semantic--warning--primary: var(
+    --c--globals--colors--warning-050
+  );
+  --c--contextuals--content--semantic--warning--secondary: var(
+    --c--globals--colors--warning-100
+  );
+  --c--contextuals--content--semantic--warning--tertiary: var(
+    --c--globals--colors--warning-250
+  );
+  --c--contextuals--content--semantic--warning--on-warning: var(
+    --c--globals--colors--warning-050
+  );
+  --c--contextuals--content--semantic--error--primary: var(
+    --c--globals--colors--error-050
+  );
+  --c--contextuals--content--semantic--error--secondary: var(
+    --c--globals--colors--error-100
+  );
+  --c--contextuals--content--semantic--error--tertiary: var(
+    --c--globals--colors--error-250
+  );
+  --c--contextuals--content--semantic--error--on-error: var(
+    --c--globals--colors--error-050
+  );
+  --c--contextuals--content--semantic--disabled--primary: var(
+    --c--globals--colors--gray-600
+  );
+  --c--contextuals--content--semantic--disabled--secondary: var(
+    --c--globals--colors--black-300
+  );
+  --c--contextuals--content--palette--brand--primary: var(
+    --c--globals--colors--brand-350
+  );
+  --c--contextuals--content--palette--brand--secondary: var(
+    --c--globals--colors--brand-450
+  );
+  --c--contextuals--content--palette--brand--tertiary: var(
+    --c--globals--colors--brand-550
+  );
+  --c--contextuals--content--palette--red--primary: var(
+    --c--globals--colors--red-350
+  );
+  --c--contextuals--content--palette--red--secondary: var(
+    --c--globals--colors--red-450
+  );
+  --c--contextuals--content--palette--red--tertiary: var(
+    --c--globals--colors--red-550
+  );
+  --c--contextuals--content--palette--orange--primary: var(
+    --c--globals--colors--orange-350
+  );
+  --c--contextuals--content--palette--orange--secondary: var(
+    --c--globals--colors--orange-450
+  );
+  --c--contextuals--content--palette--orange--tertiary: var(
+    --c--globals--colors--orange-550
+  );
+  --c--contextuals--content--palette--brown--primary: var(
+    --c--globals--colors--brown-350
+  );
+  --c--contextuals--content--palette--brown--secondary: var(
+    --c--globals--colors--brown-450
+  );
+  --c--contextuals--content--palette--brown--tertiary: var(
+    --c--globals--colors--brown-550
+  );
+  --c--contextuals--content--palette--yellow--primary: var(
+    --c--globals--colors--yellow-350
+  );
+  --c--contextuals--content--palette--yellow--secondary: var(
+    --c--globals--colors--yellow-450
+  );
+  --c--contextuals--content--palette--yellow--tertiary: var(
+    --c--globals--colors--yellow-550
+  );
+  --c--contextuals--content--palette--green--primary: var(
+    --c--globals--colors--green-350
+  );
+  --c--contextuals--content--palette--green--secondary: var(
+    --c--globals--colors--green-450
+  );
+  --c--contextuals--content--palette--green--tertiary: var(
+    --c--globals--colors--green-550
+  );
+  --c--contextuals--content--palette--blue-1--primary: var(
+    --c--globals--colors--blue-1-350
+  );
+  --c--contextuals--content--palette--blue-1--secondary: var(
+    --c--globals--colors--blue-1-450
+  );
+  --c--contextuals--content--palette--blue-1--tertiary: var(
+    --c--globals--colors--blue-1-550
+  );
+  --c--contextuals--content--palette--blue-2--primary: var(
+    --c--globals--colors--blue-2-350
+  );
+  --c--contextuals--content--palette--blue-2--secondary: var(
+    --c--globals--colors--blue-2-450
+  );
+  --c--contextuals--content--palette--blue-2--tertiary: var(
+    --c--globals--colors--blue-2-550
+  );
+  --c--contextuals--content--palette--purple--primary: var(
+    --c--globals--colors--purple-350
+  );
+  --c--contextuals--content--palette--purple--secondary: var(
+    --c--globals--colors--purple-450
+  );
+  --c--contextuals--content--palette--purple--tertiary: var(
+    --c--globals--colors--purple-550
+  );
+  --c--contextuals--content--palette--pink--primary: var(
+    --c--globals--colors--pink-350
+  );
+  --c--contextuals--content--palette--pink--secondary: var(
+    --c--globals--colors--pink-450
+  );
+  --c--contextuals--content--palette--pink--tertiary: var(
+    --c--globals--colors--pink-550
+  );
+  --c--contextuals--content--palette--gray--primary: var(
+    --c--globals--colors--gray-350
+  );
+  --c--contextuals--content--palette--gray--secondary: var(
+    --c--globals--colors--gray-450
+  );
+  --c--contextuals--content--palette--gray--tertiary: var(
+    --c--globals--colors--gray-550
+  );
+  --c--contextuals--border--surface--primary: var(
+    --c--globals--colors--gray-750
+  );
+  --c--contextuals--border--semantic--brand--primary: var(
+    --c--globals--colors--brand-450
+  );
+  --c--contextuals--border--semantic--brand--secondary: var(
+    --c--globals--colors--brand-600
+  );
+  --c--contextuals--border--semantic--brand--tertiary: var(
+    --c--globals--colors--brand-700
+  );
+  --c--contextuals--border--semantic--contextual--primary: var(
+    --c--globals--colors--black-200
+  );
+  --c--contextuals--border--semantic--neutral--primary: var(
+    --c--globals--colors--gray-450
+  );
+  --c--contextuals--border--semantic--neutral--secondary: var(
+    --c--globals--colors--gray-600
+  );
+  --c--contextuals--border--semantic--neutral--tertiary: var(
+    --c--globals--colors--gray-700
+  );
+  --c--contextuals--border--semantic--info--primary: var(
+    --c--globals--colors--info-450
+  );
+  --c--contextuals--border--semantic--info--secondary: var(
+    --c--globals--colors--info-600
+  );
+  --c--contextuals--border--semantic--info--tertiary: var(
+    --c--globals--colors--info-700
+  );
+  --c--contextuals--border--semantic--success--primary: var(
+    --c--globals--colors--success-450
+  );
+  --c--contextuals--border--semantic--success--secondary: var(
+    --c--globals--colors--success-600
+  );
+  --c--contextuals--border--semantic--success--tertiary: var(
+    --c--globals--colors--success-700
+  );
+  --c--contextuals--border--semantic--warning--primary: var(
+    --c--globals--colors--warning-450
+  );
+  --c--contextuals--border--semantic--warning--secondary: var(
+    --c--globals--colors--warning-600
+  );
+  --c--contextuals--border--semantic--warning--tertiary: var(
+    --c--globals--colors--warning-700
+  );
+  --c--contextuals--border--semantic--error--primary: var(
+    --c--globals--colors--error-450
+  );
+  --c--contextuals--border--semantic--error--secondary: var(
+    --c--globals--colors--error-600
+  );
+  --c--contextuals--border--semantic--error--tertiary: var(
+    --c--globals--colors--error-700
+  );
+  --c--contextuals--border--semantic--disabled--primary: var(
+    --c--globals--colors--gray-800
+  );
+  --c--contextuals--border--palette--brand--primary: var(
+    --c--globals--colors--brand-350
+  );
+  --c--contextuals--border--palette--brand--secondary: var(
+    --c--globals--colors--brand-450
+  );
+  --c--contextuals--border--palette--brand--tertiary: var(
+    --c--globals--colors--brand-550
+  );
+  --c--contextuals--border--palette--red--primary: var(
+    --c--globals--colors--red-350
+  );
+  --c--contextuals--border--palette--red--secondary: var(
+    --c--globals--colors--red-450
+  );
+  --c--contextuals--border--palette--red--tertiary: var(
+    --c--globals--colors--red-550
+  );
+  --c--contextuals--border--palette--orange--primary: var(
+    --c--globals--colors--orange-350
+  );
+  --c--contextuals--border--palette--orange--secondary: var(
+    --c--globals--colors--orange-450
+  );
+  --c--contextuals--border--palette--orange--tertiary: var(
+    --c--globals--colors--orange-550
+  );
+  --c--contextuals--border--palette--brown--primary: var(
+    --c--globals--colors--brown-350
+  );
+  --c--contextuals--border--palette--brown--secondary: var(
+    --c--globals--colors--brown-450
+  );
+  --c--contextuals--border--palette--brown--tertiary: var(
+    --c--globals--colors--brown-550
+  );
+  --c--contextuals--border--palette--yellow--primary: var(
+    --c--globals--colors--yellow-350
+  );
+  --c--contextuals--border--palette--yellow--secondary: var(
+    --c--globals--colors--yellow-450
+  );
+  --c--contextuals--border--palette--yellow--tertiary: var(
+    --c--globals--colors--yellow-550
+  );
+  --c--contextuals--border--palette--green--primary: var(
+    --c--globals--colors--green-350
+  );
+  --c--contextuals--border--palette--green--secondary: var(
+    --c--globals--colors--green-450
+  );
+  --c--contextuals--border--palette--green--tertiary: var(
+    --c--globals--colors--green-550
+  );
+  --c--contextuals--border--palette--blue-1--primary: var(
+    --c--globals--colors--blue-1-350
+  );
+  --c--contextuals--border--palette--blue-1--secondary: var(
+    --c--globals--colors--blue-1-450
+  );
+  --c--contextuals--border--palette--blue-1--tertiary: var(
+    --c--globals--colors--blue-1-550
+  );
+  --c--contextuals--border--palette--blue-2--primary: var(
+    --c--globals--colors--blue-2-350
+  );
+  --c--contextuals--border--palette--blue-2--secondary: var(
+    --c--globals--colors--blue-2-450
+  );
+  --c--contextuals--border--palette--blue-2--tertiary: var(
+    --c--globals--colors--blue-2-550
+  );
+  --c--contextuals--border--palette--purple--primary: var(
+    --c--globals--colors--purple-350
+  );
+  --c--contextuals--border--palette--purple--secondary: var(
+    --c--globals--colors--purple-450
+  );
+  --c--contextuals--border--palette--purple--tertiary: var(
+    --c--globals--colors--purple-550
+  );
+  --c--contextuals--border--palette--pink--primary: var(
+    --c--globals--colors--pink-350
+  );
+  --c--contextuals--border--palette--pink--secondary: var(
+    --c--globals--colors--pink-450
+  );
+  --c--contextuals--border--palette--pink--tertiary: var(
+    --c--globals--colors--pink-550
+  );
+  --c--contextuals--border--palette--gray--primary: var(
+    --c--globals--colors--gray-350
+  );
+  --c--contextuals--border--palette--gray--secondary: var(
+    --c--globals--colors--gray-450
+  );
+  --c--contextuals--border--palette--gray--tertiary: var(
+    --c--globals--colors--gray-550
+  );
 }
 
 .cunningham-theme--dsfr {
-  --c--theme--colors--secondary-icon: #c9191e;
-  --c--theme--logo--src: /assets/logo-gouv.svg;
-  --c--theme--logo--widthHeader: 110px;
-  --c--theme--logo--widthFooter: 220px;
-  --c--theme--logo--alt: gouvernement logo;
-  --c--theme--font--families--base:
+  --c--globals--font--families--base:
     marianne, inter, roboto flex variable, sans-serif;
-  --c--theme--font--families--accent:
+  --c--globals--font--families--accent:
     marianne, inter, roboto flex variable, sans-serif;
+  --c--components--logo--src: /assets/logo-gouv.svg;
+  --c--components--logo--widthHeader: 110px;
+  --c--components--logo--widthFooter: 220px;
+  --c--components--logo--alt: gouvernement logo;
   --c--components--la-gaufre: true;
   --c--components--home-proconnect: true;
   --c--components--favicon--ico: /assets/favicon-dsfr.ico;
@@ -568,2208 +2067,5591 @@
 }
 
 .cunningham-theme--generic {
-  --c--theme--colors--primary-action: #206ebd;
-  --c--theme--colors--primary-focus: #1e64bf;
-  --c--theme--colors--primary-text: #2e2c28;
-  --c--theme--colors--primary-050: #f8f8f7;
-  --c--theme--colors--primary-100: #f0efec;
-  --c--theme--colors--primary-150: #f4f4fd;
-  --c--theme--colors--primary-200: #e8e7e4;
-  --c--theme--colors--primary-300: #cfcdc9;
-  --c--theme--colors--primary-400: #979592;
-  --c--theme--colors--primary-500: #82807d;
-  --c--theme--colors--primary-600: #3f3d39;
-  --c--theme--colors--primary-700: #2e2c28;
-  --c--theme--colors--primary-800: #302e29;
-  --c--theme--colors--primary-900: #282622;
-  --c--theme--colors--primary-950: #201f1c;
-  --c--theme--colors--secondary-text: #fff;
-  --c--theme--colors--secondary-50: #f4f7fa;
-  --c--theme--colors--secondary-100: #d7e3ee;
-  --c--theme--colors--secondary-200: #b8cce1;
-  --c--theme--colors--secondary-300: #99b4d3;
-  --c--theme--colors--secondary-400: #7595be;
-  --c--theme--colors--secondary-500: #5874a0;
-  --c--theme--colors--secondary-600: #3a5383;
-  --c--theme--colors--secondary-700: #1e3462;
-  --c--theme--colors--secondary-800: #091b41;
-  --c--theme--colors--secondary-900: #08183b;
-  --c--theme--colors--secondary-950: #071636;
-  --c--theme--colors--greyscale-text: #3c3b38;
-  --c--theme--colors--greyscale-000: #fff;
-  --c--theme--colors--greyscale-050: #f8f7f7;
-  --c--theme--colors--greyscale-100: #f3f3f2;
-  --c--theme--colors--greyscale-200: #ecebea;
-  --c--theme--colors--greyscale-250: #e4e3e2;
-  --c--theme--colors--greyscale-300: #d3d2cf;
-  --c--theme--colors--greyscale-350: #eee;
-  --c--theme--colors--greyscale-400: #96948e;
-  --c--theme--colors--greyscale-500: #817e77;
-  --c--theme--colors--greyscale-600: #6a6862;
-  --c--theme--colors--greyscale-700: #3c3b38;
-  --c--theme--colors--greyscale-750: #383632;
-  --c--theme--colors--greyscale-800: #2d2b27;
-  --c--theme--colors--greyscale-900: #262522;
-  --c--theme--colors--greyscale-950: #201f1c;
-  --c--theme--colors--greyscale-1000: #181714;
-  --c--theme--colors--success-text: #234935;
-  --c--theme--colors--success-50: #f3fbf5;
-  --c--theme--colors--success-100: #e4f7ea;
-  --c--theme--colors--success-200: #caeed4;
-  --c--theme--colors--success-300: #a0e0b5;
-  --c--theme--colors--success-400: #6cc88c;
-  --c--theme--colors--success-500: #6cc88c;
-  --c--theme--colors--success-600: #358d5c;
-  --c--theme--colors--success-700: #2d704b;
-  --c--theme--colors--success-800: #28583f;
-  --c--theme--colors--success-900: #234935;
-  --c--theme--colors--success-950: #0f281b;
-  --c--theme--colors--info-text: #212445;
-  --c--theme--colors--info-50: #f2f6fb;
-  --c--theme--colors--info-100: #e2e9f5;
-  --c--theme--colors--info-200: #ccd8ee;
-  --c--theme--colors--info-300: #a9c0e3;
-  --c--theme--colors--info-400: #809dd4;
-  --c--theme--colors--info-500: #617bc7;
-  --c--theme--colors--info-600: #4a5cbf;
-  --c--theme--colors--info-700: #3e49b2;
-  --c--theme--colors--info-800: #353c8f;
-  --c--theme--colors--info-900: #303771;
-  --c--theme--colors--info-950: #212445;
-  --c--theme--colors--warning-text: #d97c3a;
-  --c--theme--colors--warning-50: #fdf7f1;
-  --c--theme--colors--warning-100: #fbeddc;
-  --c--theme--colors--warning-200: #f5d9b9;
-  --c--theme--colors--warning-300: #edbe8c;
-  --c--theme--colors--warning-400: #e2985c;
-  --c--theme--colors--warning-500: #d97c3a;
-  --c--theme--colors--warning-600: #c96330;
-  --c--theme--colors--warning-700: #a34b32;
-  --c--theme--colors--warning-800: #813b2c;
-  --c--theme--colors--warning-900: #693327;
-  --c--theme--colors--warning-950: #381713;
-  --c--theme--colors--danger-action: #c0182a;
-  --c--theme--colors--danger-text: #fff;
-  --c--theme--colors--danger-050: #fdf5f4;
-  --c--theme--colors--danger-100: #fbebe8;
-  --c--theme--colors--danger-200: #f9e0dc;
-  --c--theme--colors--danger-300: #f3c3bd;
-  --c--theme--colors--danger-400: #e26552;
-  --c--theme--colors--danger-500: #c91f00;
-  --c--theme--colors--danger-600: #a71901;
-  --c--theme--colors--danger-700: #562c2b;
-  --c--theme--colors--danger-800: #392425;
-  --c--theme--colors--danger-900: #311f20;
-  --c--theme--colors--danger-950: #2a191a;
-  --c--theme--colors--blue-400: #8baecc;
-  --c--theme--colors--blue-500: #567aa2;
-  --c--theme--colors--blue-600: #455784;
-  --c--theme--colors--brown-400: #e4c090;
-  --c--theme--colors--brown-500: #ba9977;
-  --c--theme--colors--brown-600: #735c45;
-  --c--theme--colors--cyan-400: #5cbec9;
-  --c--theme--colors--cyan-500: #43a1b3;
-  --c--theme--colors--cyan-600: #39809b;
-  --c--theme--colors--gold-400: #ecbf50;
-  --c--theme--colors--gold-500: #dfa038;
-  --c--theme--colors--gold-600: #c17b31;
-  --c--theme--colors--green-400: #5dbd9a;
-  --c--theme--colors--green-500: #3aa183;
-  --c--theme--colors--green-600: #2a816d;
-  --c--theme--colors--olive-400: #afd662;
-  --c--theme--colors--olive-500: #90bb4b;
-  --c--theme--colors--olive-600: #6e9441;
-  --c--theme--colors--orange-400: #e2985c;
-  --c--theme--colors--orange-500: #d97c3a;
-  --c--theme--colors--orange-600: #c96330;
-  --c--theme--colors--pink-400: #be8fc8;
-  --c--theme--colors--pink-500: #a563b1;
-  --c--theme--colors--pink-600: #8b44a5;
-  --c--theme--colors--purple-400: #be8fc8;
-  --c--theme--colors--purple-500: #a563b1;
-  --c--theme--colors--purple-600: #8b44a5;
-  --c--theme--colors--yellow-400: #edc947;
-  --c--theme--colors--yellow-500: #dbb13a;
-  --c--theme--colors--yellow-600: #b88a34;
-  --c--theme--font--families--base: inter, roboto flex variable, sans-serif;
-  --c--theme--font--families--accent: inter, roboto flex variable, sans-serif;
-  --c--components--button--primary--background--color-hover: var(
-    --c--theme--colors--primary-focus
-  );
-  --c--components--button--primary--background--color-active: var(
-    --c--theme--colors--primary-focus
-  );
-  --c--components--button--primary--background--color-focus: var(
-    --c--theme--colors--primary-focus
-  );
-  --c--components--image-system-filter: saturate(0.2);
+  --c--globals--colors--brand-050: #eef1fa;
+  --c--globals--colors--brand-100: #dde2f5;
+  --c--globals--colors--brand-150: #ced3f1;
+  --c--globals--colors--brand-200: #bec5f0;
+  --c--globals--colors--brand-250: #afb5f1;
+  --c--globals--colors--brand-300: #a0a5f6;
+  --c--globals--colors--brand-350: #8f94fd;
+  --c--globals--colors--brand-400: #8184fc;
+  --c--globals--colors--brand-450: #7576ee;
+  --c--globals--colors--brand-500: #6969df;
+  --c--globals--colors--brand-550: #5e5cd0;
+  --c--globals--colors--brand-600: #534fc2;
+  --c--globals--colors--brand-650: #4844ad;
+  --c--globals--colors--brand-700: #3e3b98;
+  --c--globals--colors--brand-750: #36347d;
+  --c--globals--colors--brand-800: #2d2f5f;
+  --c--globals--colors--brand-850: #262848;
+  --c--globals--colors--brand-900: #1c1e32;
+  --c--globals--colors--brand-950: #11131f;
+  --c--globals--colors--gray-000: #fff;
+  --c--globals--colors--gray-025: #f8f8f9;
+  --c--globals--colors--gray-050: #f0f0f3;
+  --c--globals--colors--gray-100: #e2e2ea;
+  --c--globals--colors--gray-150: #d3d4e0;
+  --c--globals--colors--gray-200: #c5c6d5;
+  --c--globals--colors--gray-250: #b7b7cb;
+  --c--globals--colors--gray-300: #a9a9bf;
+  --c--globals--colors--gray-350: #9c9cb2;
+  --c--globals--colors--gray-400: #8f8fa4;
+  --c--globals--colors--gray-450: #828297;
+  --c--globals--colors--gray-500: #75758a;
+  --c--globals--colors--gray-550: #69697d;
+  --c--globals--colors--gray-600: #5d5d70;
+  --c--globals--colors--gray-650: #515164;
+  --c--globals--colors--gray-700: #454558;
+  --c--globals--colors--gray-750: #3a3a4c;
+  --c--globals--colors--gray-800: #2f303d;
+  --c--globals--colors--gray-850: #25252f;
+  --c--globals--colors--gray-900: #1b1b23;
+  --c--globals--colors--gray-950: #111114;
+  --c--globals--colors--gray-1000: #000;
+  --c--globals--colors--info-050: #eaf2f9;
+  --c--globals--colors--info-100: #d5e4f3;
+  --c--globals--colors--info-150: #bfd7f0;
+  --c--globals--colors--info-200: #a7caee;
+  --c--globals--colors--info-250: #8dbdef;
+  --c--globals--colors--info-300: #6eb0f2;
+  --c--globals--colors--info-350: #50a2f5;
+  --c--globals--colors--info-400: #3593f4;
+  --c--globals--colors--info-450: #1185ed;
+  --c--globals--colors--info-500: #0077de;
+  --c--globals--colors--info-550: #0069cf;
+  --c--globals--colors--info-600: #005bc0;
+  --c--globals--colors--info-650: #0d4eaa;
+  --c--globals--colors--info-700: #124394;
+  --c--globals--colors--info-750: #163878;
+  --c--globals--colors--info-800: #192f5a;
+  --c--globals--colors--info-850: #192541;
+  --c--globals--colors--info-900: #141b2d;
+  --c--globals--colors--info-950: #0c111c;
+  --c--globals--colors--success-050: #e8f1ea;
+  --c--globals--colors--success-100: #cfe4d4;
+  --c--globals--colors--success-150: #bad9c1;
+  --c--globals--colors--success-200: #a2cfad;
+  --c--globals--colors--success-250: #86c597;
+  --c--globals--colors--success-300: #6cba83;
+  --c--globals--colors--success-350: #4fb070;
+  --c--globals--colors--success-400: #40a363;
+  --c--globals--colors--success-450: #309556;
+  --c--globals--colors--success-500: #1e884a;
+  --c--globals--colors--success-550: #027b3e;
+  --c--globals--colors--success-600: #016d31;
+  --c--globals--colors--success-650: #006024;
+  --c--globals--colors--success-700: #005317;
+  --c--globals--colors--success-750: #0d4511;
+  --c--globals--colors--success-800: #11380e;
+  --c--globals--colors--success-850: #132a11;
+  --c--globals--colors--success-900: #101e0f;
+  --c--globals--colors--success-950: #091209;
+  --c--globals--colors--warning-050: #f8f0e9;
+  --c--globals--colors--warning-100: #f1e0d3;
+  --c--globals--colors--warning-150: #ecd0bc;
+  --c--globals--colors--warning-200: #e8c0a4;
+  --c--globals--colors--warning-250: #e8ae8a;
+  --c--globals--colors--warning-300: #eb9970;
+  --c--globals--colors--warning-350: #e98456;
+  --c--globals--colors--warning-400: #e57036;
+  --c--globals--colors--warning-450: #da5e18;
+  --c--globals--colors--warning-500: #cb5000;
+  --c--globals--colors--warning-550: #bc4200;
+  --c--globals--colors--warning-600: #ad3300;
+  --c--globals--colors--warning-650: #9e2300;
+  --c--globals--colors--warning-700: #882011;
+  --c--globals--colors--warning-750: #731e16;
+  --c--globals--colors--warning-800: #58201a;
+  --c--globals--colors--warning-850: #401d18;
+  --c--globals--colors--warning-900: #2e1714;
+  --c--globals--colors--warning-950: #1d0f0d;
+  --c--globals--colors--error-050: #f9efec;
+  --c--globals--colors--error-100: #f4dfd9;
+  --c--globals--colors--error-150: #f0cec6;
+  --c--globals--colors--error-200: #eebcb2;
+  --c--globals--colors--error-250: #eea99d;
+  --c--globals--colors--error-300: #ef9486;
+  --c--globals--colors--error-350: #f37c6e;
+  --c--globals--colors--error-400: #f65f53;
+  --c--globals--colors--error-450: #f0463d;
+  --c--globals--colors--error-500: #e82322;
+  --c--globals--colors--error-550: #d7010e;
+  --c--globals--colors--error-600: #c00100;
+  --c--globals--colors--error-650: #a00;
+  --c--globals--colors--error-700: #910c06;
+  --c--globals--colors--error-750: #731e16;
+  --c--globals--colors--error-800: #58201a;
+  --c--globals--colors--error-850: #401d18;
+  --c--globals--colors--error-900: #2e1714;
+  --c--globals--colors--error-950: #1d0f0d;
+  --c--globals--colors--red-050: #faefee;
+  --c--globals--colors--red-100: #f4dedd;
+  --c--globals--colors--red-150: #f1cdcb;
+  --c--globals--colors--red-200: #efbbba;
+  --c--globals--colors--red-250: #eea8a8;
+  --c--globals--colors--red-300: #f09394;
+  --c--globals--colors--red-350: #f37b7e;
+  --c--globals--colors--red-400: #ef6569;
+  --c--globals--colors--red-450: #e94a55;
+  --c--globals--colors--red-500: #da3b49;
+  --c--globals--colors--red-550: #ca2a3c;
+  --c--globals--colors--red-600: #bb1330;
+  --c--globals--colors--red-650: #a90021;
+  --c--globals--colors--red-700: #910a13;
+  --c--globals--colors--red-750: #731e16;
+  --c--globals--colors--red-800: #58201a;
+  --c--globals--colors--red-850: #411d18;
+  --c--globals--colors--red-900: #2e1714;
+  --c--globals--colors--red-950: #1d0f0d;
+  --c--globals--colors--orange-050: #f8f0e9;
+  --c--globals--colors--orange-100: #f1e0d3;
+  --c--globals--colors--orange-150: #ecd0bd;
+  --c--globals--colors--orange-200: #eabfa6;
+  --c--globals--colors--orange-250: #ebac90;
+  --c--globals--colors--orange-300: #ec9772;
+  --c--globals--colors--orange-350: #e5845a;
+  --c--globals--colors--orange-400: #d6774d;
+  --c--globals--colors--orange-450: #c86a40;
+  --c--globals--colors--orange-500: #b95d33;
+  --c--globals--colors--orange-550: #ab5025;
+  --c--globals--colors--orange-600: #9d4315;
+  --c--globals--colors--orange-650: #8f3600;
+  --c--globals--colors--orange-700: #812900;
+  --c--globals--colors--orange-750: #6c2511;
+  --c--globals--colors--orange-800: #572017;
+  --c--globals--colors--orange-850: #401d18;
+  --c--globals--colors--orange-900: #2e1714;
+  --c--globals--colors--orange-950: #1d0f0d;
+  --c--globals--colors--brown-050: #f6f0e8;
+  --c--globals--colors--brown-100: #f1e0d3;
+  --c--globals--colors--brown-150: #ebd0ba;
+  --c--globals--colors--brown-200: #e2c0a6;
+  --c--globals--colors--brown-250: #d4b398;
+  --c--globals--colors--brown-300: #c6a58b;
+  --c--globals--colors--brown-350: #b8987e;
+  --c--globals--colors--brown-400: #aa8b71;
+  --c--globals--colors--brown-450: #9d7e65;
+  --c--globals--colors--brown-500: #8f7158;
+  --c--globals--colors--brown-550: #82654c;
+  --c--globals--colors--brown-600: #765841;
+  --c--globals--colors--brown-650: #694c35;
+  --c--globals--colors--brown-700: #5d412a;
+  --c--globals--colors--brown-750: #51361e;
+  --c--globals--colors--brown-800: #452a13;
+  --c--globals--colors--brown-850: #392008;
+  --c--globals--colors--brown-900: #29180a;
+  --c--globals--colors--brown-950: #1b0f08;
+  --c--globals--colors--yellow-050: #f3f0e7;
+  --c--globals--colors--yellow-100: #e9e2cf;
+  --c--globals--colors--yellow-150: #e1d4b7;
+  --c--globals--colors--yellow-200: #d9c599;
+  --c--globals--colors--yellow-250: #d2b677;
+  --c--globals--colors--yellow-300: #caa756;
+  --c--globals--colors--yellow-350: #c2972e;
+  --c--globals--colors--yellow-400: #b98900;
+  --c--globals--colors--yellow-450: #ab7b00;
+  --c--globals--colors--yellow-500: #9d6e00;
+  --c--globals--colors--yellow-550: #916100;
+  --c--globals--colors--yellow-600: #855400;
+  --c--globals--colors--yellow-650: #784700;
+  --c--globals--colors--yellow-700: #6c3a00;
+  --c--globals--colors--yellow-750: #5f2e00;
+  --c--globals--colors--yellow-800: #512302;
+  --c--globals--colors--yellow-850: #3e1d10;
+  --c--globals--colors--yellow-900: #2d1711;
+  --c--globals--colors--yellow-950: #1d0f0d;
+  --c--globals--colors--green-050: #e6f1e9;
+  --c--globals--colors--green-100: #cfe4d5;
+  --c--globals--colors--green-150: #b8d8c1;
+  --c--globals--colors--green-200: #a0cfae;
+  --c--globals--colors--green-250: #84c59a;
+  --c--globals--colors--green-300: #65ba86;
+  --c--globals--colors--green-350: #45b173;
+  --c--globals--colors--green-400: #23a562;
+  --c--globals--colors--green-450: #029755;
+  --c--globals--colors--green-500: #008948;
+  --c--globals--colors--green-550: #017b3b;
+  --c--globals--colors--green-600: #006e2e;
+  --c--globals--colors--green-650: #006022;
+  --c--globals--colors--green-700: #005314;
+  --c--globals--colors--green-750: #0d4510;
+  --c--globals--colors--green-800: #11380e;
+  --c--globals--colors--green-850: #132a11;
+  --c--globals--colors--green-900: #101e0f;
+  --c--globals--colors--green-950: #091209;
+  --c--globals--colors--blue1-050: #ebf1f9;
+  --c--globals--colors--blue1-100: #d6e4f4;
+  --c--globals--colors--blue1-150: #c1d7f0;
+  --c--globals--colors--blue1-200: #aacaef;
+  --c--globals--colors--blue1-250: #8fbcef;
+  --c--globals--colors--blue1-300: #7cafeb;
+  --c--globals--colors--blue1-350: #68a1e4;
+  --c--globals--colors--blue1-400: #5b94d6;
+  --c--globals--colors--blue1-450: #4e86c7;
+  --c--globals--colors--blue1-500: #4279b9;
+  --c--globals--colors--blue1-550: #356cac;
+  --c--globals--colors--blue1-600: #28609e;
+  --c--globals--colors--blue1-650: #1b5390;
+  --c--globals--colors--blue1-700: #0b4783;
+  --c--globals--colors--blue1-750: #0f3c6e;
+  --c--globals--colors--blue1-800: #133059;
+  --c--globals--colors--blue1-850: #152641;
+  --c--globals--colors--blue1-900: #121c2d;
+  --c--globals--colors--blue1-950: #0b111c;
+  --c--globals--colors--blue2-050: #e7f3f4;
+  --c--globals--colors--blue2-100: #cee7e9;
+  --c--globals--colors--blue2-150: #b2dce0;
+  --c--globals--colors--blue2-200: #91d1d7;
+  --c--globals--colors--blue2-250: #68c7d0;
+  --c--globals--colors--blue2-300: #43bbc5;
+  --c--globals--colors--blue2-350: #00afba;
+  --c--globals--colors--blue2-400: #01a0aa;
+  --c--globals--colors--blue2-450: #00929d;
+  --c--globals--colors--blue2-500: #00848f;
+  --c--globals--colors--blue2-550: #007682;
+  --c--globals--colors--blue2-600: #016874;
+  --c--globals--colors--blue2-650: #005b67;
+  --c--globals--colors--blue2-700: #004e5a;
+  --c--globals--colors--blue2-750: #00424e;
+  --c--globals--colors--blue2-800: #003642;
+  --c--globals--colors--blue2-850: #002a38;
+  --c--globals--colors--blue2-900: #061e28;
+  --c--globals--colors--blue2-950: #071219;
+  --c--globals--colors--purple-050: #f7f0f6;
+  --c--globals--colors--purple-100: #eee0ee;
+  --c--globals--colors--purple-150: #e7d1e7;
+  --c--globals--colors--purple-200: #dbbfe4;
+  --c--globals--colors--purple-250: #d3aee2;
+  --c--globals--colors--purple-300: #cb99e1;
+  --c--globals--colors--purple-350: #c188d9;
+  --c--globals--colors--purple-400: #b47bcb;
+  --c--globals--colors--purple-450: #a66ebd;
+  --c--globals--colors--purple-500: #9961af;
+  --c--globals--colors--purple-550: #8b55a1;
+  --c--globals--colors--purple-600: #7e4894;
+  --c--globals--colors--purple-650: #723c87;
+  --c--globals--colors--purple-700: #633376;
+  --c--globals--colors--purple-750: #552a65;
+  --c--globals--colors--purple-800: #452551;
+  --c--globals--colors--purple-850: #35213d;
+  --c--globals--colors--purple-900: #261a2c;
+  --c--globals--colors--purple-950: #17111c;
+  --c--globals--colors--pink-050: #f8eff4;
+  --c--globals--colors--pink-100: #f0dfea;
+  --c--globals--colors--pink-150: #eacedf;
+  --c--globals--colors--pink-200: #e9bbd1;
+  --c--globals--colors--pink-250: #e9a7c2;
+  --c--globals--colors--pink-300: #e095b4;
+  --c--globals--colors--pink-350: #d685a8;
+  --c--globals--colors--pink-400: #c7799b;
+  --c--globals--colors--pink-450: #b86c8d;
+  --c--globals--colors--pink-500: #aa5f80;
+  --c--globals--colors--pink-550: #9c5374;
+  --c--globals--colors--pink-600: #8e4767;
+  --c--globals--colors--pink-650: #813b5b;
+  --c--globals--colors--pink-700: #732e4f;
+  --c--globals--colors--pink-750: #632643;
+  --c--globals--colors--pink-800: #521f38;
+  --c--globals--colors--pink-850: #3e1c2b;
+  --c--globals--colors--pink-900: #2d171f;
+  --c--globals--colors--pink-950: #1c0e12;
+  --c--globals--font--families--base: inter, roboto flex variable, sans-serif;
+  --c--globals--font--families--accent: inter, roboto flex variable, sans-serif;
 }
 
-.clr-secondary-text {
-  color: var(--c--theme--colors--secondary-text);
+.clr-logo-1 {
+  color: var(--c--globals--colors--logo-1);
 }
 
-.clr-secondary-100 {
-  color: var(--c--theme--colors--secondary-100);
+.clr-logo-2 {
+  color: var(--c--globals--colors--logo-2);
 }
 
-.clr-secondary-200 {
-  color: var(--c--theme--colors--secondary-200);
+.clr-logo-1-dark {
+  color: var(--c--globals--colors--logo-1-dark);
 }
 
-.clr-secondary-300 {
-  color: var(--c--theme--colors--secondary-300);
+.clr-logo-2-dark {
+  color: var(--c--globals--colors--logo-2-dark);
 }
 
-.clr-secondary-400 {
-  color: var(--c--theme--colors--secondary-400);
+.clr-brand-050 {
+  color: var(--c--globals--colors--brand-050);
 }
 
-.clr-secondary-500 {
-  color: var(--c--theme--colors--secondary-500);
+.clr-brand-100 {
+  color: var(--c--globals--colors--brand-100);
 }
 
-.clr-secondary-600 {
-  color: var(--c--theme--colors--secondary-600);
+.clr-brand-150 {
+  color: var(--c--globals--colors--brand-150);
 }
 
-.clr-secondary-700 {
-  color: var(--c--theme--colors--secondary-700);
+.clr-brand-200 {
+  color: var(--c--globals--colors--brand-200);
 }
 
-.clr-secondary-800 {
-  color: var(--c--theme--colors--secondary-800);
+.clr-brand-250 {
+  color: var(--c--globals--colors--brand-250);
 }
 
-.clr-secondary-900 {
-  color: var(--c--theme--colors--secondary-900);
+.clr-brand-300 {
+  color: var(--c--globals--colors--brand-300);
 }
 
-.clr-info-text {
-  color: var(--c--theme--colors--info-text);
+.clr-brand-350 {
+  color: var(--c--globals--colors--brand-350);
+}
+
+.clr-brand-400 {
+  color: var(--c--globals--colors--brand-400);
+}
+
+.clr-brand-450 {
+  color: var(--c--globals--colors--brand-450);
+}
+
+.clr-brand-500 {
+  color: var(--c--globals--colors--brand-500);
+}
+
+.clr-brand-550 {
+  color: var(--c--globals--colors--brand-550);
+}
+
+.clr-brand-600 {
+  color: var(--c--globals--colors--brand-600);
+}
+
+.clr-brand-650 {
+  color: var(--c--globals--colors--brand-650);
+}
+
+.clr-brand-700 {
+  color: var(--c--globals--colors--brand-700);
+}
+
+.clr-brand-750 {
+  color: var(--c--globals--colors--brand-750);
+}
+
+.clr-brand-800 {
+  color: var(--c--globals--colors--brand-800);
+}
+
+.clr-brand-850 {
+  color: var(--c--globals--colors--brand-850);
+}
+
+.clr-brand-900 {
+  color: var(--c--globals--colors--brand-900);
+}
+
+.clr-brand-950 {
+  color: var(--c--globals--colors--brand-950);
+}
+
+.clr-gray-000 {
+  color: var(--c--globals--colors--gray-000);
+}
+
+.clr-gray-025 {
+  color: var(--c--globals--colors--gray-025);
+}
+
+.clr-gray-050 {
+  color: var(--c--globals--colors--gray-050);
+}
+
+.clr-gray-100 {
+  color: var(--c--globals--colors--gray-100);
+}
+
+.clr-gray-150 {
+  color: var(--c--globals--colors--gray-150);
+}
+
+.clr-gray-200 {
+  color: var(--c--globals--colors--gray-200);
+}
+
+.clr-gray-250 {
+  color: var(--c--globals--colors--gray-250);
+}
+
+.clr-gray-300 {
+  color: var(--c--globals--colors--gray-300);
+}
+
+.clr-gray-350 {
+  color: var(--c--globals--colors--gray-350);
+}
+
+.clr-gray-400 {
+  color: var(--c--globals--colors--gray-400);
+}
+
+.clr-gray-450 {
+  color: var(--c--globals--colors--gray-450);
+}
+
+.clr-gray-500 {
+  color: var(--c--globals--colors--gray-500);
+}
+
+.clr-gray-550 {
+  color: var(--c--globals--colors--gray-550);
+}
+
+.clr-gray-600 {
+  color: var(--c--globals--colors--gray-600);
+}
+
+.clr-gray-650 {
+  color: var(--c--globals--colors--gray-650);
+}
+
+.clr-gray-700 {
+  color: var(--c--globals--colors--gray-700);
+}
+
+.clr-gray-750 {
+  color: var(--c--globals--colors--gray-750);
+}
+
+.clr-gray-800 {
+  color: var(--c--globals--colors--gray-800);
+}
+
+.clr-gray-850 {
+  color: var(--c--globals--colors--gray-850);
+}
+
+.clr-gray-900 {
+  color: var(--c--globals--colors--gray-900);
+}
+
+.clr-gray-950 {
+  color: var(--c--globals--colors--gray-950);
+}
+
+.clr-gray-1000 {
+  color: var(--c--globals--colors--gray-1000);
+}
+
+.clr-info-050 {
+  color: var(--c--globals--colors--info-050);
 }
 
 .clr-info-100 {
-  color: var(--c--theme--colors--info-100);
+  color: var(--c--globals--colors--info-100);
+}
+
+.clr-info-150 {
+  color: var(--c--globals--colors--info-150);
 }
 
 .clr-info-200 {
-  color: var(--c--theme--colors--info-200);
+  color: var(--c--globals--colors--info-200);
+}
+
+.clr-info-250 {
+  color: var(--c--globals--colors--info-250);
 }
 
 .clr-info-300 {
-  color: var(--c--theme--colors--info-300);
+  color: var(--c--globals--colors--info-300);
+}
+
+.clr-info-350 {
+  color: var(--c--globals--colors--info-350);
 }
 
 .clr-info-400 {
-  color: var(--c--theme--colors--info-400);
+  color: var(--c--globals--colors--info-400);
+}
+
+.clr-info-450 {
+  color: var(--c--globals--colors--info-450);
 }
 
 .clr-info-500 {
-  color: var(--c--theme--colors--info-500);
+  color: var(--c--globals--colors--info-500);
+}
+
+.clr-info-550 {
+  color: var(--c--globals--colors--info-550);
 }
 
 .clr-info-600 {
-  color: var(--c--theme--colors--info-600);
+  color: var(--c--globals--colors--info-600);
+}
+
+.clr-info-650 {
+  color: var(--c--globals--colors--info-650);
 }
 
 .clr-info-700 {
-  color: var(--c--theme--colors--info-700);
+  color: var(--c--globals--colors--info-700);
+}
+
+.clr-info-750 {
+  color: var(--c--globals--colors--info-750);
 }
 
 .clr-info-800 {
-  color: var(--c--theme--colors--info-800);
+  color: var(--c--globals--colors--info-800);
+}
+
+.clr-info-850 {
+  color: var(--c--globals--colors--info-850);
 }
 
 .clr-info-900 {
-  color: var(--c--theme--colors--info-900);
+  color: var(--c--globals--colors--info-900);
 }
 
-.clr-greyscale-100 {
-  color: var(--c--theme--colors--greyscale-100);
+.clr-info-950 {
+  color: var(--c--globals--colors--info-950);
 }
 
-.clr-greyscale-200 {
-  color: var(--c--theme--colors--greyscale-200);
-}
-
-.clr-greyscale-300 {
-  color: var(--c--theme--colors--greyscale-300);
-}
-
-.clr-greyscale-400 {
-  color: var(--c--theme--colors--greyscale-400);
-}
-
-.clr-greyscale-500 {
-  color: var(--c--theme--colors--greyscale-500);
-}
-
-.clr-greyscale-600 {
-  color: var(--c--theme--colors--greyscale-600);
-}
-
-.clr-greyscale-700 {
-  color: var(--c--theme--colors--greyscale-700);
-}
-
-.clr-greyscale-800 {
-  color: var(--c--theme--colors--greyscale-800);
-}
-
-.clr-greyscale-900 {
-  color: var(--c--theme--colors--greyscale-900);
-}
-
-.clr-greyscale-000 {
-  color: var(--c--theme--colors--greyscale-000);
-}
-
-.clr-primary-100 {
-  color: var(--c--theme--colors--primary-100);
-}
-
-.clr-primary-200 {
-  color: var(--c--theme--colors--primary-200);
-}
-
-.clr-primary-300 {
-  color: var(--c--theme--colors--primary-300);
-}
-
-.clr-primary-400 {
-  color: var(--c--theme--colors--primary-400);
-}
-
-.clr-primary-500 {
-  color: var(--c--theme--colors--primary-500);
-}
-
-.clr-primary-600 {
-  color: var(--c--theme--colors--primary-600);
-}
-
-.clr-primary-700 {
-  color: var(--c--theme--colors--primary-700);
-}
-
-.clr-primary-800 {
-  color: var(--c--theme--colors--primary-800);
-}
-
-.clr-primary-900 {
-  color: var(--c--theme--colors--primary-900);
+.clr-success-050 {
+  color: var(--c--globals--colors--success-050);
 }
 
 .clr-success-100 {
-  color: var(--c--theme--colors--success-100);
+  color: var(--c--globals--colors--success-100);
+}
+
+.clr-success-150 {
+  color: var(--c--globals--colors--success-150);
 }
 
 .clr-success-200 {
-  color: var(--c--theme--colors--success-200);
+  color: var(--c--globals--colors--success-200);
+}
+
+.clr-success-250 {
+  color: var(--c--globals--colors--success-250);
 }
 
 .clr-success-300 {
-  color: var(--c--theme--colors--success-300);
+  color: var(--c--globals--colors--success-300);
+}
+
+.clr-success-350 {
+  color: var(--c--globals--colors--success-350);
 }
 
 .clr-success-400 {
-  color: var(--c--theme--colors--success-400);
+  color: var(--c--globals--colors--success-400);
+}
+
+.clr-success-450 {
+  color: var(--c--globals--colors--success-450);
 }
 
 .clr-success-500 {
-  color: var(--c--theme--colors--success-500);
+  color: var(--c--globals--colors--success-500);
+}
+
+.clr-success-550 {
+  color: var(--c--globals--colors--success-550);
 }
 
 .clr-success-600 {
-  color: var(--c--theme--colors--success-600);
+  color: var(--c--globals--colors--success-600);
+}
+
+.clr-success-650 {
+  color: var(--c--globals--colors--success-650);
 }
 
 .clr-success-700 {
-  color: var(--c--theme--colors--success-700);
+  color: var(--c--globals--colors--success-700);
+}
+
+.clr-success-750 {
+  color: var(--c--globals--colors--success-750);
 }
 
 .clr-success-800 {
-  color: var(--c--theme--colors--success-800);
+  color: var(--c--globals--colors--success-800);
+}
+
+.clr-success-850 {
+  color: var(--c--globals--colors--success-850);
 }
 
 .clr-success-900 {
-  color: var(--c--theme--colors--success-900);
+  color: var(--c--globals--colors--success-900);
+}
+
+.clr-success-950 {
+  color: var(--c--globals--colors--success-950);
+}
+
+.clr-warning-050 {
+  color: var(--c--globals--colors--warning-050);
 }
 
 .clr-warning-100 {
-  color: var(--c--theme--colors--warning-100);
+  color: var(--c--globals--colors--warning-100);
+}
+
+.clr-warning-150 {
+  color: var(--c--globals--colors--warning-150);
 }
 
 .clr-warning-200 {
-  color: var(--c--theme--colors--warning-200);
+  color: var(--c--globals--colors--warning-200);
+}
+
+.clr-warning-250 {
+  color: var(--c--globals--colors--warning-250);
 }
 
 .clr-warning-300 {
-  color: var(--c--theme--colors--warning-300);
+  color: var(--c--globals--colors--warning-300);
+}
+
+.clr-warning-350 {
+  color: var(--c--globals--colors--warning-350);
 }
 
 .clr-warning-400 {
-  color: var(--c--theme--colors--warning-400);
+  color: var(--c--globals--colors--warning-400);
+}
+
+.clr-warning-450 {
+  color: var(--c--globals--colors--warning-450);
 }
 
 .clr-warning-500 {
-  color: var(--c--theme--colors--warning-500);
+  color: var(--c--globals--colors--warning-500);
+}
+
+.clr-warning-550 {
+  color: var(--c--globals--colors--warning-550);
 }
 
 .clr-warning-600 {
-  color: var(--c--theme--colors--warning-600);
+  color: var(--c--globals--colors--warning-600);
+}
+
+.clr-warning-650 {
+  color: var(--c--globals--colors--warning-650);
 }
 
 .clr-warning-700 {
-  color: var(--c--theme--colors--warning-700);
+  color: var(--c--globals--colors--warning-700);
+}
+
+.clr-warning-750 {
+  color: var(--c--globals--colors--warning-750);
 }
 
 .clr-warning-800 {
-  color: var(--c--theme--colors--warning-800);
+  color: var(--c--globals--colors--warning-800);
+}
+
+.clr-warning-850 {
+  color: var(--c--globals--colors--warning-850);
 }
 
 .clr-warning-900 {
-  color: var(--c--theme--colors--warning-900);
+  color: var(--c--globals--colors--warning-900);
 }
 
-.clr-danger-100 {
-  color: var(--c--theme--colors--danger-100);
+.clr-warning-950 {
+  color: var(--c--globals--colors--warning-950);
 }
 
-.clr-danger-200 {
-  color: var(--c--theme--colors--danger-200);
+.clr-error-050 {
+  color: var(--c--globals--colors--error-050);
 }
 
-.clr-danger-300 {
-  color: var(--c--theme--colors--danger-300);
+.clr-error-100 {
+  color: var(--c--globals--colors--error-100);
 }
 
-.clr-danger-400 {
-  color: var(--c--theme--colors--danger-400);
+.clr-error-150 {
+  color: var(--c--globals--colors--error-150);
 }
 
-.clr-danger-500 {
-  color: var(--c--theme--colors--danger-500);
+.clr-error-200 {
+  color: var(--c--globals--colors--error-200);
 }
 
-.clr-danger-600 {
-  color: var(--c--theme--colors--danger-600);
+.clr-error-250 {
+  color: var(--c--globals--colors--error-250);
 }
 
-.clr-danger-700 {
-  color: var(--c--theme--colors--danger-700);
+.clr-error-300 {
+  color: var(--c--globals--colors--error-300);
 }
 
-.clr-danger-800 {
-  color: var(--c--theme--colors--danger-800);
+.clr-error-350 {
+  color: var(--c--globals--colors--error-350);
 }
 
-.clr-danger-900 {
-  color: var(--c--theme--colors--danger-900);
+.clr-error-400 {
+  color: var(--c--globals--colors--error-400);
 }
 
-.clr-primary-text {
-  color: var(--c--theme--colors--primary-text);
+.clr-error-450 {
+  color: var(--c--globals--colors--error-450);
 }
 
-.clr-success-text {
-  color: var(--c--theme--colors--success-text);
+.clr-error-500 {
+  color: var(--c--globals--colors--error-500);
 }
 
-.clr-warning-text {
-  color: var(--c--theme--colors--warning-text);
+.clr-error-550 {
+  color: var(--c--globals--colors--error-550);
 }
 
-.clr-danger-text {
-  color: var(--c--theme--colors--danger-text);
+.clr-error-600 {
+  color: var(--c--globals--colors--error-600);
 }
 
-.clr-primary-050 {
-  color: var(--c--theme--colors--primary-050);
+.clr-error-650 {
+  color: var(--c--globals--colors--error-650);
 }
 
-.clr-primary-150 {
-  color: var(--c--theme--colors--primary-150);
+.clr-error-700 {
+  color: var(--c--globals--colors--error-700);
 }
 
-.clr-greyscale-text {
-  color: var(--c--theme--colors--greyscale-text);
+.clr-error-750 {
+  color: var(--c--globals--colors--error-750);
 }
 
-.clr-greyscale-050 {
-  color: var(--c--theme--colors--greyscale-050);
+.clr-error-800 {
+  color: var(--c--globals--colors--error-800);
 }
 
-.clr-greyscale-250 {
-  color: var(--c--theme--colors--greyscale-250);
+.clr-error-850 {
+  color: var(--c--globals--colors--error-850);
 }
 
-.clr-greyscale-350 {
-  color: var(--c--theme--colors--greyscale-350);
+.clr-error-900 {
+  color: var(--c--globals--colors--error-900);
 }
 
-.clr-greyscale-750 {
-  color: var(--c--theme--colors--greyscale-750);
+.clr-error-950 {
+  color: var(--c--globals--colors--error-950);
 }
 
-.clr-greyscale-950 {
-  color: var(--c--theme--colors--greyscale-950);
+.clr-red-050 {
+  color: var(--c--globals--colors--red-050);
 }
 
-.clr-greyscale-1000 {
-  color: var(--c--theme--colors--greyscale-1000);
+.clr-red-100 {
+  color: var(--c--globals--colors--red-100);
 }
 
-.clr-danger-050 {
-  color: var(--c--theme--colors--danger-050);
+.clr-red-150 {
+  color: var(--c--globals--colors--red-150);
 }
 
-.clr-blue-500 {
-  color: var(--c--theme--colors--blue-500);
+.clr-red-200 {
+  color: var(--c--globals--colors--red-200);
 }
 
-.clr-brown-500 {
-  color: var(--c--theme--colors--brown-500);
+.clr-red-250 {
+  color: var(--c--globals--colors--red-250);
 }
 
-.clr-cyan-500 {
-  color: var(--c--theme--colors--cyan-500);
+.clr-red-300 {
+  color: var(--c--globals--colors--red-300);
 }
 
-.clr-gold-500 {
-  color: var(--c--theme--colors--gold-500);
+.clr-red-350 {
+  color: var(--c--globals--colors--red-350);
 }
 
-.clr-green-500 {
-  color: var(--c--theme--colors--green-500);
+.clr-red-400 {
+  color: var(--c--globals--colors--red-400);
 }
 
-.clr-olive-500 {
-  color: var(--c--theme--colors--olive-500);
-}
-
-.clr-orange-500 {
-  color: var(--c--theme--colors--orange-500);
-}
-
-.clr-purple-500 {
-  color: var(--c--theme--colors--purple-500);
+.clr-red-450 {
+  color: var(--c--globals--colors--red-450);
 }
 
 .clr-red-500 {
-  color: var(--c--theme--colors--red-500);
+  color: var(--c--globals--colors--red-500);
 }
 
-.clr-yellow-500 {
-  color: var(--c--theme--colors--yellow-500);
+.clr-red-550 {
+  color: var(--c--globals--colors--red-550);
 }
 
-.clr-rose-500 {
-  color: var(--c--theme--colors--rose-500);
+.clr-red-600 {
+  color: var(--c--globals--colors--red-600);
 }
 
-.clr-primary-action {
-  color: var(--c--theme--colors--primary-action);
+.clr-red-650 {
+  color: var(--c--globals--colors--red-650);
 }
 
-.clr-primary-bg {
-  color: var(--c--theme--colors--primary-bg);
+.clr-red-700 {
+  color: var(--c--globals--colors--red-700);
 }
 
-.clr-primary-focus {
-  color: var(--c--theme--colors--primary-focus);
+.clr-red-750 {
+  color: var(--c--globals--colors--red-750);
 }
 
-.clr-secondary-icon {
-  color: var(--c--theme--colors--secondary-icon);
+.clr-red-800 {
+  color: var(--c--globals--colors--red-800);
 }
 
-.clr-blue-400 {
-  color: var(--c--theme--colors--blue-400);
+.clr-red-850 {
+  color: var(--c--globals--colors--red-850);
 }
 
-.clr-blue-600 {
-  color: var(--c--theme--colors--blue-600);
+.clr-red-900 {
+  color: var(--c--globals--colors--red-900);
 }
 
-.clr-brown-400 {
-  color: var(--c--theme--colors--brown-400);
+.clr-red-950 {
+  color: var(--c--globals--colors--red-950);
 }
 
-.clr-brown-600 {
-  color: var(--c--theme--colors--brown-600);
+.clr-orange-050 {
+  color: var(--c--globals--colors--orange-050);
 }
 
-.clr-cyan-400 {
-  color: var(--c--theme--colors--cyan-400);
+.clr-orange-100 {
+  color: var(--c--globals--colors--orange-100);
 }
 
-.clr-cyan-600 {
-  color: var(--c--theme--colors--cyan-600);
+.clr-orange-150 {
+  color: var(--c--globals--colors--orange-150);
 }
 
-.clr-gold-400 {
-  color: var(--c--theme--colors--gold-400);
+.clr-orange-200 {
+  color: var(--c--globals--colors--orange-200);
 }
 
-.clr-gold-600 {
-  color: var(--c--theme--colors--gold-600);
+.clr-orange-250 {
+  color: var(--c--globals--colors--orange-250);
 }
 
-.clr-green-400 {
-  color: var(--c--theme--colors--green-400);
+.clr-orange-300 {
+  color: var(--c--globals--colors--orange-300);
 }
 
-.clr-green-600 {
-  color: var(--c--theme--colors--green-600);
-}
-
-.clr-olive-400 {
-  color: var(--c--theme--colors--olive-400);
-}
-
-.clr-olive-600 {
-  color: var(--c--theme--colors--olive-600);
+.clr-orange-350 {
+  color: var(--c--globals--colors--orange-350);
 }
 
 .clr-orange-400 {
-  color: var(--c--theme--colors--orange-400);
+  color: var(--c--globals--colors--orange-400);
+}
+
+.clr-orange-450 {
+  color: var(--c--globals--colors--orange-450);
+}
+
+.clr-orange-500 {
+  color: var(--c--globals--colors--orange-500);
+}
+
+.clr-orange-550 {
+  color: var(--c--globals--colors--orange-550);
 }
 
 .clr-orange-600 {
-  color: var(--c--theme--colors--orange-600);
+  color: var(--c--globals--colors--orange-600);
 }
 
-.clr-pink-400 {
-  color: var(--c--theme--colors--pink-400);
+.clr-orange-650 {
+  color: var(--c--globals--colors--orange-650);
 }
 
-.clr-pink-500 {
-  color: var(--c--theme--colors--pink-500);
+.clr-orange-700 {
+  color: var(--c--globals--colors--orange-700);
 }
 
-.clr-pink-600 {
-  color: var(--c--theme--colors--pink-600);
+.clr-orange-750 {
+  color: var(--c--globals--colors--orange-750);
 }
 
-.clr-purple-400 {
-  color: var(--c--theme--colors--purple-400);
+.clr-orange-800 {
+  color: var(--c--globals--colors--orange-800);
 }
 
-.clr-purple-600 {
-  color: var(--c--theme--colors--purple-600);
+.clr-orange-850 {
+  color: var(--c--globals--colors--orange-850);
+}
+
+.clr-orange-900 {
+  color: var(--c--globals--colors--orange-900);
+}
+
+.clr-orange-950 {
+  color: var(--c--globals--colors--orange-950);
+}
+
+.clr-brown-050 {
+  color: var(--c--globals--colors--brown-050);
+}
+
+.clr-brown-100 {
+  color: var(--c--globals--colors--brown-100);
+}
+
+.clr-brown-150 {
+  color: var(--c--globals--colors--brown-150);
+}
+
+.clr-brown-200 {
+  color: var(--c--globals--colors--brown-200);
+}
+
+.clr-brown-250 {
+  color: var(--c--globals--colors--brown-250);
+}
+
+.clr-brown-300 {
+  color: var(--c--globals--colors--brown-300);
+}
+
+.clr-brown-350 {
+  color: var(--c--globals--colors--brown-350);
+}
+
+.clr-brown-400 {
+  color: var(--c--globals--colors--brown-400);
+}
+
+.clr-brown-450 {
+  color: var(--c--globals--colors--brown-450);
+}
+
+.clr-brown-500 {
+  color: var(--c--globals--colors--brown-500);
+}
+
+.clr-brown-550 {
+  color: var(--c--globals--colors--brown-550);
+}
+
+.clr-brown-600 {
+  color: var(--c--globals--colors--brown-600);
+}
+
+.clr-brown-650 {
+  color: var(--c--globals--colors--brown-650);
+}
+
+.clr-brown-700 {
+  color: var(--c--globals--colors--brown-700);
+}
+
+.clr-brown-750 {
+  color: var(--c--globals--colors--brown-750);
+}
+
+.clr-brown-800 {
+  color: var(--c--globals--colors--brown-800);
+}
+
+.clr-brown-850 {
+  color: var(--c--globals--colors--brown-850);
+}
+
+.clr-brown-900 {
+  color: var(--c--globals--colors--brown-900);
+}
+
+.clr-brown-950 {
+  color: var(--c--globals--colors--brown-950);
+}
+
+.clr-yellow-050 {
+  color: var(--c--globals--colors--yellow-050);
+}
+
+.clr-yellow-100 {
+  color: var(--c--globals--colors--yellow-100);
+}
+
+.clr-yellow-150 {
+  color: var(--c--globals--colors--yellow-150);
+}
+
+.clr-yellow-200 {
+  color: var(--c--globals--colors--yellow-200);
+}
+
+.clr-yellow-250 {
+  color: var(--c--globals--colors--yellow-250);
+}
+
+.clr-yellow-300 {
+  color: var(--c--globals--colors--yellow-300);
+}
+
+.clr-yellow-350 {
+  color: var(--c--globals--colors--yellow-350);
 }
 
 .clr-yellow-400 {
-  color: var(--c--theme--colors--yellow-400);
+  color: var(--c--globals--colors--yellow-400);
+}
+
+.clr-yellow-450 {
+  color: var(--c--globals--colors--yellow-450);
+}
+
+.clr-yellow-500 {
+  color: var(--c--globals--colors--yellow-500);
+}
+
+.clr-yellow-550 {
+  color: var(--c--globals--colors--yellow-550);
 }
 
 .clr-yellow-600 {
-  color: var(--c--theme--colors--yellow-600);
+  color: var(--c--globals--colors--yellow-600);
 }
 
-.bg-secondary-text {
-  background-color: var(--c--theme--colors--secondary-text);
+.clr-yellow-650 {
+  color: var(--c--globals--colors--yellow-650);
 }
 
-.bg-secondary-100 {
-  background-color: var(--c--theme--colors--secondary-100);
+.clr-yellow-700 {
+  color: var(--c--globals--colors--yellow-700);
 }
 
-.bg-secondary-200 {
-  background-color: var(--c--theme--colors--secondary-200);
+.clr-yellow-750 {
+  color: var(--c--globals--colors--yellow-750);
 }
 
-.bg-secondary-300 {
-  background-color: var(--c--theme--colors--secondary-300);
+.clr-yellow-800 {
+  color: var(--c--globals--colors--yellow-800);
 }
 
-.bg-secondary-400 {
-  background-color: var(--c--theme--colors--secondary-400);
+.clr-yellow-850 {
+  color: var(--c--globals--colors--yellow-850);
 }
 
-.bg-secondary-500 {
-  background-color: var(--c--theme--colors--secondary-500);
+.clr-yellow-900 {
+  color: var(--c--globals--colors--yellow-900);
 }
 
-.bg-secondary-600 {
-  background-color: var(--c--theme--colors--secondary-600);
+.clr-yellow-950 {
+  color: var(--c--globals--colors--yellow-950);
 }
 
-.bg-secondary-700 {
-  background-color: var(--c--theme--colors--secondary-700);
+.clr-green-050 {
+  color: var(--c--globals--colors--green-050);
 }
 
-.bg-secondary-800 {
-  background-color: var(--c--theme--colors--secondary-800);
+.clr-green-100 {
+  color: var(--c--globals--colors--green-100);
 }
 
-.bg-secondary-900 {
-  background-color: var(--c--theme--colors--secondary-900);
+.clr-green-150 {
+  color: var(--c--globals--colors--green-150);
 }
 
-.bg-info-text {
-  background-color: var(--c--theme--colors--info-text);
+.clr-green-200 {
+  color: var(--c--globals--colors--green-200);
+}
+
+.clr-green-250 {
+  color: var(--c--globals--colors--green-250);
+}
+
+.clr-green-300 {
+  color: var(--c--globals--colors--green-300);
+}
+
+.clr-green-350 {
+  color: var(--c--globals--colors--green-350);
+}
+
+.clr-green-400 {
+  color: var(--c--globals--colors--green-400);
+}
+
+.clr-green-450 {
+  color: var(--c--globals--colors--green-450);
+}
+
+.clr-green-500 {
+  color: var(--c--globals--colors--green-500);
+}
+
+.clr-green-550 {
+  color: var(--c--globals--colors--green-550);
+}
+
+.clr-green-600 {
+  color: var(--c--globals--colors--green-600);
+}
+
+.clr-green-650 {
+  color: var(--c--globals--colors--green-650);
+}
+
+.clr-green-700 {
+  color: var(--c--globals--colors--green-700);
+}
+
+.clr-green-750 {
+  color: var(--c--globals--colors--green-750);
+}
+
+.clr-green-800 {
+  color: var(--c--globals--colors--green-800);
+}
+
+.clr-green-850 {
+  color: var(--c--globals--colors--green-850);
+}
+
+.clr-green-900 {
+  color: var(--c--globals--colors--green-900);
+}
+
+.clr-green-950 {
+  color: var(--c--globals--colors--green-950);
+}
+
+.clr-blue-1-050 {
+  color: var(--c--globals--colors--blue-1-050);
+}
+
+.clr-blue-1-100 {
+  color: var(--c--globals--colors--blue-1-100);
+}
+
+.clr-blue-1-150 {
+  color: var(--c--globals--colors--blue-1-150);
+}
+
+.clr-blue-1-200 {
+  color: var(--c--globals--colors--blue-1-200);
+}
+
+.clr-blue-1-250 {
+  color: var(--c--globals--colors--blue-1-250);
+}
+
+.clr-blue-1-300 {
+  color: var(--c--globals--colors--blue-1-300);
+}
+
+.clr-blue-1-350 {
+  color: var(--c--globals--colors--blue-1-350);
+}
+
+.clr-blue-1-400 {
+  color: var(--c--globals--colors--blue-1-400);
+}
+
+.clr-blue-1-450 {
+  color: var(--c--globals--colors--blue-1-450);
+}
+
+.clr-blue-1-500 {
+  color: var(--c--globals--colors--blue-1-500);
+}
+
+.clr-blue-1-550 {
+  color: var(--c--globals--colors--blue-1-550);
+}
+
+.clr-blue-1-600 {
+  color: var(--c--globals--colors--blue-1-600);
+}
+
+.clr-blue-1-650 {
+  color: var(--c--globals--colors--blue-1-650);
+}
+
+.clr-blue-1-700 {
+  color: var(--c--globals--colors--blue-1-700);
+}
+
+.clr-blue-1-750 {
+  color: var(--c--globals--colors--blue-1-750);
+}
+
+.clr-blue-1-800 {
+  color: var(--c--globals--colors--blue-1-800);
+}
+
+.clr-blue-1-850 {
+  color: var(--c--globals--colors--blue-1-850);
+}
+
+.clr-blue-1-900 {
+  color: var(--c--globals--colors--blue-1-900);
+}
+
+.clr-blue-1-950 {
+  color: var(--c--globals--colors--blue-1-950);
+}
+
+.clr-blue-2-050 {
+  color: var(--c--globals--colors--blue-2-050);
+}
+
+.clr-blue-2-100 {
+  color: var(--c--globals--colors--blue-2-100);
+}
+
+.clr-blue-2-150 {
+  color: var(--c--globals--colors--blue-2-150);
+}
+
+.clr-blue-2-200 {
+  color: var(--c--globals--colors--blue-2-200);
+}
+
+.clr-blue-2-250 {
+  color: var(--c--globals--colors--blue-2-250);
+}
+
+.clr-blue-2-300 {
+  color: var(--c--globals--colors--blue-2-300);
+}
+
+.clr-blue-2-350 {
+  color: var(--c--globals--colors--blue-2-350);
+}
+
+.clr-blue-2-400 {
+  color: var(--c--globals--colors--blue-2-400);
+}
+
+.clr-blue-2-450 {
+  color: var(--c--globals--colors--blue-2-450);
+}
+
+.clr-blue-2-500 {
+  color: var(--c--globals--colors--blue-2-500);
+}
+
+.clr-blue-2-550 {
+  color: var(--c--globals--colors--blue-2-550);
+}
+
+.clr-blue-2-600 {
+  color: var(--c--globals--colors--blue-2-600);
+}
+
+.clr-blue-2-650 {
+  color: var(--c--globals--colors--blue-2-650);
+}
+
+.clr-blue-2-700 {
+  color: var(--c--globals--colors--blue-2-700);
+}
+
+.clr-blue-2-750 {
+  color: var(--c--globals--colors--blue-2-750);
+}
+
+.clr-blue-2-800 {
+  color: var(--c--globals--colors--blue-2-800);
+}
+
+.clr-blue-2-850 {
+  color: var(--c--globals--colors--blue-2-850);
+}
+
+.clr-blue-2-900 {
+  color: var(--c--globals--colors--blue-2-900);
+}
+
+.clr-blue-2-950 {
+  color: var(--c--globals--colors--blue-2-950);
+}
+
+.clr-purple-050 {
+  color: var(--c--globals--colors--purple-050);
+}
+
+.clr-purple-100 {
+  color: var(--c--globals--colors--purple-100);
+}
+
+.clr-purple-150 {
+  color: var(--c--globals--colors--purple-150);
+}
+
+.clr-purple-200 {
+  color: var(--c--globals--colors--purple-200);
+}
+
+.clr-purple-250 {
+  color: var(--c--globals--colors--purple-250);
+}
+
+.clr-purple-300 {
+  color: var(--c--globals--colors--purple-300);
+}
+
+.clr-purple-350 {
+  color: var(--c--globals--colors--purple-350);
+}
+
+.clr-purple-400 {
+  color: var(--c--globals--colors--purple-400);
+}
+
+.clr-purple-450 {
+  color: var(--c--globals--colors--purple-450);
+}
+
+.clr-purple-500 {
+  color: var(--c--globals--colors--purple-500);
+}
+
+.clr-purple-550 {
+  color: var(--c--globals--colors--purple-550);
+}
+
+.clr-purple-600 {
+  color: var(--c--globals--colors--purple-600);
+}
+
+.clr-purple-650 {
+  color: var(--c--globals--colors--purple-650);
+}
+
+.clr-purple-700 {
+  color: var(--c--globals--colors--purple-700);
+}
+
+.clr-purple-750 {
+  color: var(--c--globals--colors--purple-750);
+}
+
+.clr-purple-800 {
+  color: var(--c--globals--colors--purple-800);
+}
+
+.clr-purple-850 {
+  color: var(--c--globals--colors--purple-850);
+}
+
+.clr-purple-900 {
+  color: var(--c--globals--colors--purple-900);
+}
+
+.clr-purple-950 {
+  color: var(--c--globals--colors--purple-950);
+}
+
+.clr-pink-050 {
+  color: var(--c--globals--colors--pink-050);
+}
+
+.clr-pink-100 {
+  color: var(--c--globals--colors--pink-100);
+}
+
+.clr-pink-150 {
+  color: var(--c--globals--colors--pink-150);
+}
+
+.clr-pink-200 {
+  color: var(--c--globals--colors--pink-200);
+}
+
+.clr-pink-250 {
+  color: var(--c--globals--colors--pink-250);
+}
+
+.clr-pink-300 {
+  color: var(--c--globals--colors--pink-300);
+}
+
+.clr-pink-350 {
+  color: var(--c--globals--colors--pink-350);
+}
+
+.clr-pink-400 {
+  color: var(--c--globals--colors--pink-400);
+}
+
+.clr-pink-450 {
+  color: var(--c--globals--colors--pink-450);
+}
+
+.clr-pink-500 {
+  color: var(--c--globals--colors--pink-500);
+}
+
+.clr-pink-550 {
+  color: var(--c--globals--colors--pink-550);
+}
+
+.clr-pink-600 {
+  color: var(--c--globals--colors--pink-600);
+}
+
+.clr-pink-650 {
+  color: var(--c--globals--colors--pink-650);
+}
+
+.clr-pink-700 {
+  color: var(--c--globals--colors--pink-700);
+}
+
+.clr-pink-750 {
+  color: var(--c--globals--colors--pink-750);
+}
+
+.clr-pink-800 {
+  color: var(--c--globals--colors--pink-800);
+}
+
+.clr-pink-850 {
+  color: var(--c--globals--colors--pink-850);
+}
+
+.clr-pink-900 {
+  color: var(--c--globals--colors--pink-900);
+}
+
+.clr-pink-950 {
+  color: var(--c--globals--colors--pink-950);
+}
+
+.clr-black-000 {
+  color: var(--c--globals--colors--black-000);
+}
+
+.clr-black-050 {
+  color: var(--c--globals--colors--black-050);
+}
+
+.clr-black-100 {
+  color: var(--c--globals--colors--black-100);
+}
+
+.clr-black-150 {
+  color: var(--c--globals--colors--black-150);
+}
+
+.clr-black-200 {
+  color: var(--c--globals--colors--black-200);
+}
+
+.clr-black-250 {
+  color: var(--c--globals--colors--black-250);
+}
+
+.clr-black-300 {
+  color: var(--c--globals--colors--black-300);
+}
+
+.clr-black-350 {
+  color: var(--c--globals--colors--black-350);
+}
+
+.clr-black-400 {
+  color: var(--c--globals--colors--black-400);
+}
+
+.clr-black-450 {
+  color: var(--c--globals--colors--black-450);
+}
+
+.clr-black-500 {
+  color: var(--c--globals--colors--black-500);
+}
+
+.clr-black-550 {
+  color: var(--c--globals--colors--black-550);
+}
+
+.clr-black-600 {
+  color: var(--c--globals--colors--black-600);
+}
+
+.clr-black-650 {
+  color: var(--c--globals--colors--black-650);
+}
+
+.clr-black-700 {
+  color: var(--c--globals--colors--black-700);
+}
+
+.clr-black-750 {
+  color: var(--c--globals--colors--black-750);
+}
+
+.clr-black-800 {
+  color: var(--c--globals--colors--black-800);
+}
+
+.clr-black-850 {
+  color: var(--c--globals--colors--black-850);
+}
+
+.clr-black-900 {
+  color: var(--c--globals--colors--black-900);
+}
+
+.clr-black-950 {
+  color: var(--c--globals--colors--black-950);
+}
+
+.clr-white-000 {
+  color: var(--c--globals--colors--white-000);
+}
+
+.clr-white-050 {
+  color: var(--c--globals--colors--white-050);
+}
+
+.clr-white-100 {
+  color: var(--c--globals--colors--white-100);
+}
+
+.clr-white-150 {
+  color: var(--c--globals--colors--white-150);
+}
+
+.clr-white-200 {
+  color: var(--c--globals--colors--white-200);
+}
+
+.clr-white-250 {
+  color: var(--c--globals--colors--white-250);
+}
+
+.clr-white-300 {
+  color: var(--c--globals--colors--white-300);
+}
+
+.clr-white-350 {
+  color: var(--c--globals--colors--white-350);
+}
+
+.clr-white-400 {
+  color: var(--c--globals--colors--white-400);
+}
+
+.clr-white-450 {
+  color: var(--c--globals--colors--white-450);
+}
+
+.clr-white-500 {
+  color: var(--c--globals--colors--white-500);
+}
+
+.clr-white-550 {
+  color: var(--c--globals--colors--white-550);
+}
+
+.clr-white-600 {
+  color: var(--c--globals--colors--white-600);
+}
+
+.clr-white-650 {
+  color: var(--c--globals--colors--white-650);
+}
+
+.clr-white-700 {
+  color: var(--c--globals--colors--white-700);
+}
+
+.clr-white-750 {
+  color: var(--c--globals--colors--white-750);
+}
+
+.clr-white-800 {
+  color: var(--c--globals--colors--white-800);
+}
+
+.clr-white-850 {
+  color: var(--c--globals--colors--white-850);
+}
+
+.clr-white-900 {
+  color: var(--c--globals--colors--white-900);
+}
+
+.clr-white-950 {
+  color: var(--c--globals--colors--white-950);
+}
+
+.clr-blue1-050 {
+  color: var(--c--globals--colors--blue1-050);
+}
+
+.clr-blue1-100 {
+  color: var(--c--globals--colors--blue1-100);
+}
+
+.clr-blue1-150 {
+  color: var(--c--globals--colors--blue1-150);
+}
+
+.clr-blue1-200 {
+  color: var(--c--globals--colors--blue1-200);
+}
+
+.clr-blue1-250 {
+  color: var(--c--globals--colors--blue1-250);
+}
+
+.clr-blue1-300 {
+  color: var(--c--globals--colors--blue1-300);
+}
+
+.clr-blue1-350 {
+  color: var(--c--globals--colors--blue1-350);
+}
+
+.clr-blue1-400 {
+  color: var(--c--globals--colors--blue1-400);
+}
+
+.clr-blue1-450 {
+  color: var(--c--globals--colors--blue1-450);
+}
+
+.clr-blue1-500 {
+  color: var(--c--globals--colors--blue1-500);
+}
+
+.clr-blue1-550 {
+  color: var(--c--globals--colors--blue1-550);
+}
+
+.clr-blue1-600 {
+  color: var(--c--globals--colors--blue1-600);
+}
+
+.clr-blue1-650 {
+  color: var(--c--globals--colors--blue1-650);
+}
+
+.clr-blue1-700 {
+  color: var(--c--globals--colors--blue1-700);
+}
+
+.clr-blue1-750 {
+  color: var(--c--globals--colors--blue1-750);
+}
+
+.clr-blue1-800 {
+  color: var(--c--globals--colors--blue1-800);
+}
+
+.clr-blue1-850 {
+  color: var(--c--globals--colors--blue1-850);
+}
+
+.clr-blue1-900 {
+  color: var(--c--globals--colors--blue1-900);
+}
+
+.clr-blue1-950 {
+  color: var(--c--globals--colors--blue1-950);
+}
+
+.clr-blue2-050 {
+  color: var(--c--globals--colors--blue2-050);
+}
+
+.clr-blue2-100 {
+  color: var(--c--globals--colors--blue2-100);
+}
+
+.clr-blue2-150 {
+  color: var(--c--globals--colors--blue2-150);
+}
+
+.clr-blue2-200 {
+  color: var(--c--globals--colors--blue2-200);
+}
+
+.clr-blue2-250 {
+  color: var(--c--globals--colors--blue2-250);
+}
+
+.clr-blue2-300 {
+  color: var(--c--globals--colors--blue2-300);
+}
+
+.clr-blue2-350 {
+  color: var(--c--globals--colors--blue2-350);
+}
+
+.clr-blue2-400 {
+  color: var(--c--globals--colors--blue2-400);
+}
+
+.clr-blue2-450 {
+  color: var(--c--globals--colors--blue2-450);
+}
+
+.clr-blue2-500 {
+  color: var(--c--globals--colors--blue2-500);
+}
+
+.clr-blue2-550 {
+  color: var(--c--globals--colors--blue2-550);
+}
+
+.clr-blue2-600 {
+  color: var(--c--globals--colors--blue2-600);
+}
+
+.clr-blue2-650 {
+  color: var(--c--globals--colors--blue2-650);
+}
+
+.clr-blue2-700 {
+  color: var(--c--globals--colors--blue2-700);
+}
+
+.clr-blue2-750 {
+  color: var(--c--globals--colors--blue2-750);
+}
+
+.clr-blue2-800 {
+  color: var(--c--globals--colors--blue2-800);
+}
+
+.clr-blue2-850 {
+  color: var(--c--globals--colors--blue2-850);
+}
+
+.clr-blue2-900 {
+  color: var(--c--globals--colors--blue2-900);
+}
+
+.clr-blue2-950 {
+  color: var(--c--globals--colors--blue2-950);
+}
+
+.bg-logo-1 {
+  background-color: var(--c--globals--colors--logo-1);
+}
+
+.bg-logo-2 {
+  background-color: var(--c--globals--colors--logo-2);
+}
+
+.bg-logo-1-dark {
+  background-color: var(--c--globals--colors--logo-1-dark);
+}
+
+.bg-logo-2-dark {
+  background-color: var(--c--globals--colors--logo-2-dark);
+}
+
+.bg-brand-050 {
+  background-color: var(--c--globals--colors--brand-050);
+}
+
+.bg-brand-100 {
+  background-color: var(--c--globals--colors--brand-100);
+}
+
+.bg-brand-150 {
+  background-color: var(--c--globals--colors--brand-150);
+}
+
+.bg-brand-200 {
+  background-color: var(--c--globals--colors--brand-200);
+}
+
+.bg-brand-250 {
+  background-color: var(--c--globals--colors--brand-250);
+}
+
+.bg-brand-300 {
+  background-color: var(--c--globals--colors--brand-300);
+}
+
+.bg-brand-350 {
+  background-color: var(--c--globals--colors--brand-350);
+}
+
+.bg-brand-400 {
+  background-color: var(--c--globals--colors--brand-400);
+}
+
+.bg-brand-450 {
+  background-color: var(--c--globals--colors--brand-450);
+}
+
+.bg-brand-500 {
+  background-color: var(--c--globals--colors--brand-500);
+}
+
+.bg-brand-550 {
+  background-color: var(--c--globals--colors--brand-550);
+}
+
+.bg-brand-600 {
+  background-color: var(--c--globals--colors--brand-600);
+}
+
+.bg-brand-650 {
+  background-color: var(--c--globals--colors--brand-650);
+}
+
+.bg-brand-700 {
+  background-color: var(--c--globals--colors--brand-700);
+}
+
+.bg-brand-750 {
+  background-color: var(--c--globals--colors--brand-750);
+}
+
+.bg-brand-800 {
+  background-color: var(--c--globals--colors--brand-800);
+}
+
+.bg-brand-850 {
+  background-color: var(--c--globals--colors--brand-850);
+}
+
+.bg-brand-900 {
+  background-color: var(--c--globals--colors--brand-900);
+}
+
+.bg-brand-950 {
+  background-color: var(--c--globals--colors--brand-950);
+}
+
+.bg-gray-000 {
+  background-color: var(--c--globals--colors--gray-000);
+}
+
+.bg-gray-025 {
+  background-color: var(--c--globals--colors--gray-025);
+}
+
+.bg-gray-050 {
+  background-color: var(--c--globals--colors--gray-050);
+}
+
+.bg-gray-100 {
+  background-color: var(--c--globals--colors--gray-100);
+}
+
+.bg-gray-150 {
+  background-color: var(--c--globals--colors--gray-150);
+}
+
+.bg-gray-200 {
+  background-color: var(--c--globals--colors--gray-200);
+}
+
+.bg-gray-250 {
+  background-color: var(--c--globals--colors--gray-250);
+}
+
+.bg-gray-300 {
+  background-color: var(--c--globals--colors--gray-300);
+}
+
+.bg-gray-350 {
+  background-color: var(--c--globals--colors--gray-350);
+}
+
+.bg-gray-400 {
+  background-color: var(--c--globals--colors--gray-400);
+}
+
+.bg-gray-450 {
+  background-color: var(--c--globals--colors--gray-450);
+}
+
+.bg-gray-500 {
+  background-color: var(--c--globals--colors--gray-500);
+}
+
+.bg-gray-550 {
+  background-color: var(--c--globals--colors--gray-550);
+}
+
+.bg-gray-600 {
+  background-color: var(--c--globals--colors--gray-600);
+}
+
+.bg-gray-650 {
+  background-color: var(--c--globals--colors--gray-650);
+}
+
+.bg-gray-700 {
+  background-color: var(--c--globals--colors--gray-700);
+}
+
+.bg-gray-750 {
+  background-color: var(--c--globals--colors--gray-750);
+}
+
+.bg-gray-800 {
+  background-color: var(--c--globals--colors--gray-800);
+}
+
+.bg-gray-850 {
+  background-color: var(--c--globals--colors--gray-850);
+}
+
+.bg-gray-900 {
+  background-color: var(--c--globals--colors--gray-900);
+}
+
+.bg-gray-950 {
+  background-color: var(--c--globals--colors--gray-950);
+}
+
+.bg-gray-1000 {
+  background-color: var(--c--globals--colors--gray-1000);
+}
+
+.bg-info-050 {
+  background-color: var(--c--globals--colors--info-050);
 }
 
 .bg-info-100 {
-  background-color: var(--c--theme--colors--info-100);
+  background-color: var(--c--globals--colors--info-100);
+}
+
+.bg-info-150 {
+  background-color: var(--c--globals--colors--info-150);
 }
 
 .bg-info-200 {
-  background-color: var(--c--theme--colors--info-200);
+  background-color: var(--c--globals--colors--info-200);
+}
+
+.bg-info-250 {
+  background-color: var(--c--globals--colors--info-250);
 }
 
 .bg-info-300 {
-  background-color: var(--c--theme--colors--info-300);
+  background-color: var(--c--globals--colors--info-300);
+}
+
+.bg-info-350 {
+  background-color: var(--c--globals--colors--info-350);
 }
 
 .bg-info-400 {
-  background-color: var(--c--theme--colors--info-400);
+  background-color: var(--c--globals--colors--info-400);
+}
+
+.bg-info-450 {
+  background-color: var(--c--globals--colors--info-450);
 }
 
 .bg-info-500 {
-  background-color: var(--c--theme--colors--info-500);
+  background-color: var(--c--globals--colors--info-500);
+}
+
+.bg-info-550 {
+  background-color: var(--c--globals--colors--info-550);
 }
 
 .bg-info-600 {
-  background-color: var(--c--theme--colors--info-600);
+  background-color: var(--c--globals--colors--info-600);
+}
+
+.bg-info-650 {
+  background-color: var(--c--globals--colors--info-650);
 }
 
 .bg-info-700 {
-  background-color: var(--c--theme--colors--info-700);
+  background-color: var(--c--globals--colors--info-700);
+}
+
+.bg-info-750 {
+  background-color: var(--c--globals--colors--info-750);
 }
 
 .bg-info-800 {
-  background-color: var(--c--theme--colors--info-800);
+  background-color: var(--c--globals--colors--info-800);
+}
+
+.bg-info-850 {
+  background-color: var(--c--globals--colors--info-850);
 }
 
 .bg-info-900 {
-  background-color: var(--c--theme--colors--info-900);
+  background-color: var(--c--globals--colors--info-900);
 }
 
-.bg-greyscale-100 {
-  background-color: var(--c--theme--colors--greyscale-100);
+.bg-info-950 {
+  background-color: var(--c--globals--colors--info-950);
 }
 
-.bg-greyscale-200 {
-  background-color: var(--c--theme--colors--greyscale-200);
-}
-
-.bg-greyscale-300 {
-  background-color: var(--c--theme--colors--greyscale-300);
-}
-
-.bg-greyscale-400 {
-  background-color: var(--c--theme--colors--greyscale-400);
-}
-
-.bg-greyscale-500 {
-  background-color: var(--c--theme--colors--greyscale-500);
-}
-
-.bg-greyscale-600 {
-  background-color: var(--c--theme--colors--greyscale-600);
-}
-
-.bg-greyscale-700 {
-  background-color: var(--c--theme--colors--greyscale-700);
-}
-
-.bg-greyscale-800 {
-  background-color: var(--c--theme--colors--greyscale-800);
-}
-
-.bg-greyscale-900 {
-  background-color: var(--c--theme--colors--greyscale-900);
-}
-
-.bg-greyscale-000 {
-  background-color: var(--c--theme--colors--greyscale-000);
-}
-
-.bg-primary-100 {
-  background-color: var(--c--theme--colors--primary-100);
-}
-
-.bg-primary-200 {
-  background-color: var(--c--theme--colors--primary-200);
-}
-
-.bg-primary-300 {
-  background-color: var(--c--theme--colors--primary-300);
-}
-
-.bg-primary-400 {
-  background-color: var(--c--theme--colors--primary-400);
-}
-
-.bg-primary-500 {
-  background-color: var(--c--theme--colors--primary-500);
-}
-
-.bg-primary-600 {
-  background-color: var(--c--theme--colors--primary-600);
-}
-
-.bg-primary-700 {
-  background-color: var(--c--theme--colors--primary-700);
-}
-
-.bg-primary-800 {
-  background-color: var(--c--theme--colors--primary-800);
-}
-
-.bg-primary-900 {
-  background-color: var(--c--theme--colors--primary-900);
+.bg-success-050 {
+  background-color: var(--c--globals--colors--success-050);
 }
 
 .bg-success-100 {
-  background-color: var(--c--theme--colors--success-100);
+  background-color: var(--c--globals--colors--success-100);
+}
+
+.bg-success-150 {
+  background-color: var(--c--globals--colors--success-150);
 }
 
 .bg-success-200 {
-  background-color: var(--c--theme--colors--success-200);
+  background-color: var(--c--globals--colors--success-200);
+}
+
+.bg-success-250 {
+  background-color: var(--c--globals--colors--success-250);
 }
 
 .bg-success-300 {
-  background-color: var(--c--theme--colors--success-300);
+  background-color: var(--c--globals--colors--success-300);
+}
+
+.bg-success-350 {
+  background-color: var(--c--globals--colors--success-350);
 }
 
 .bg-success-400 {
-  background-color: var(--c--theme--colors--success-400);
+  background-color: var(--c--globals--colors--success-400);
+}
+
+.bg-success-450 {
+  background-color: var(--c--globals--colors--success-450);
 }
 
 .bg-success-500 {
-  background-color: var(--c--theme--colors--success-500);
+  background-color: var(--c--globals--colors--success-500);
+}
+
+.bg-success-550 {
+  background-color: var(--c--globals--colors--success-550);
 }
 
 .bg-success-600 {
-  background-color: var(--c--theme--colors--success-600);
+  background-color: var(--c--globals--colors--success-600);
+}
+
+.bg-success-650 {
+  background-color: var(--c--globals--colors--success-650);
 }
 
 .bg-success-700 {
-  background-color: var(--c--theme--colors--success-700);
+  background-color: var(--c--globals--colors--success-700);
+}
+
+.bg-success-750 {
+  background-color: var(--c--globals--colors--success-750);
 }
 
 .bg-success-800 {
-  background-color: var(--c--theme--colors--success-800);
+  background-color: var(--c--globals--colors--success-800);
+}
+
+.bg-success-850 {
+  background-color: var(--c--globals--colors--success-850);
 }
 
 .bg-success-900 {
-  background-color: var(--c--theme--colors--success-900);
+  background-color: var(--c--globals--colors--success-900);
+}
+
+.bg-success-950 {
+  background-color: var(--c--globals--colors--success-950);
+}
+
+.bg-warning-050 {
+  background-color: var(--c--globals--colors--warning-050);
 }
 
 .bg-warning-100 {
-  background-color: var(--c--theme--colors--warning-100);
+  background-color: var(--c--globals--colors--warning-100);
+}
+
+.bg-warning-150 {
+  background-color: var(--c--globals--colors--warning-150);
 }
 
 .bg-warning-200 {
-  background-color: var(--c--theme--colors--warning-200);
+  background-color: var(--c--globals--colors--warning-200);
+}
+
+.bg-warning-250 {
+  background-color: var(--c--globals--colors--warning-250);
 }
 
 .bg-warning-300 {
-  background-color: var(--c--theme--colors--warning-300);
+  background-color: var(--c--globals--colors--warning-300);
+}
+
+.bg-warning-350 {
+  background-color: var(--c--globals--colors--warning-350);
 }
 
 .bg-warning-400 {
-  background-color: var(--c--theme--colors--warning-400);
+  background-color: var(--c--globals--colors--warning-400);
+}
+
+.bg-warning-450 {
+  background-color: var(--c--globals--colors--warning-450);
 }
 
 .bg-warning-500 {
-  background-color: var(--c--theme--colors--warning-500);
+  background-color: var(--c--globals--colors--warning-500);
+}
+
+.bg-warning-550 {
+  background-color: var(--c--globals--colors--warning-550);
 }
 
 .bg-warning-600 {
-  background-color: var(--c--theme--colors--warning-600);
+  background-color: var(--c--globals--colors--warning-600);
+}
+
+.bg-warning-650 {
+  background-color: var(--c--globals--colors--warning-650);
 }
 
 .bg-warning-700 {
-  background-color: var(--c--theme--colors--warning-700);
+  background-color: var(--c--globals--colors--warning-700);
+}
+
+.bg-warning-750 {
+  background-color: var(--c--globals--colors--warning-750);
 }
 
 .bg-warning-800 {
-  background-color: var(--c--theme--colors--warning-800);
+  background-color: var(--c--globals--colors--warning-800);
+}
+
+.bg-warning-850 {
+  background-color: var(--c--globals--colors--warning-850);
 }
 
 .bg-warning-900 {
-  background-color: var(--c--theme--colors--warning-900);
+  background-color: var(--c--globals--colors--warning-900);
 }
 
-.bg-danger-100 {
-  background-color: var(--c--theme--colors--danger-100);
+.bg-warning-950 {
+  background-color: var(--c--globals--colors--warning-950);
 }
 
-.bg-danger-200 {
-  background-color: var(--c--theme--colors--danger-200);
+.bg-error-050 {
+  background-color: var(--c--globals--colors--error-050);
 }
 
-.bg-danger-300 {
-  background-color: var(--c--theme--colors--danger-300);
+.bg-error-100 {
+  background-color: var(--c--globals--colors--error-100);
 }
 
-.bg-danger-400 {
-  background-color: var(--c--theme--colors--danger-400);
+.bg-error-150 {
+  background-color: var(--c--globals--colors--error-150);
 }
 
-.bg-danger-500 {
-  background-color: var(--c--theme--colors--danger-500);
+.bg-error-200 {
+  background-color: var(--c--globals--colors--error-200);
 }
 
-.bg-danger-600 {
-  background-color: var(--c--theme--colors--danger-600);
+.bg-error-250 {
+  background-color: var(--c--globals--colors--error-250);
 }
 
-.bg-danger-700 {
-  background-color: var(--c--theme--colors--danger-700);
+.bg-error-300 {
+  background-color: var(--c--globals--colors--error-300);
 }
 
-.bg-danger-800 {
-  background-color: var(--c--theme--colors--danger-800);
+.bg-error-350 {
+  background-color: var(--c--globals--colors--error-350);
 }
 
-.bg-danger-900 {
-  background-color: var(--c--theme--colors--danger-900);
+.bg-error-400 {
+  background-color: var(--c--globals--colors--error-400);
 }
 
-.bg-primary-text {
-  background-color: var(--c--theme--colors--primary-text);
+.bg-error-450 {
+  background-color: var(--c--globals--colors--error-450);
 }
 
-.bg-success-text {
-  background-color: var(--c--theme--colors--success-text);
+.bg-error-500 {
+  background-color: var(--c--globals--colors--error-500);
 }
 
-.bg-warning-text {
-  background-color: var(--c--theme--colors--warning-text);
+.bg-error-550 {
+  background-color: var(--c--globals--colors--error-550);
 }
 
-.bg-danger-text {
-  background-color: var(--c--theme--colors--danger-text);
+.bg-error-600 {
+  background-color: var(--c--globals--colors--error-600);
 }
 
-.bg-primary-050 {
-  background-color: var(--c--theme--colors--primary-050);
+.bg-error-650 {
+  background-color: var(--c--globals--colors--error-650);
 }
 
-.bg-primary-150 {
-  background-color: var(--c--theme--colors--primary-150);
+.bg-error-700 {
+  background-color: var(--c--globals--colors--error-700);
 }
 
-.bg-greyscale-text {
-  background-color: var(--c--theme--colors--greyscale-text);
+.bg-error-750 {
+  background-color: var(--c--globals--colors--error-750);
 }
 
-.bg-greyscale-050 {
-  background-color: var(--c--theme--colors--greyscale-050);
+.bg-error-800 {
+  background-color: var(--c--globals--colors--error-800);
 }
 
-.bg-greyscale-250 {
-  background-color: var(--c--theme--colors--greyscale-250);
+.bg-error-850 {
+  background-color: var(--c--globals--colors--error-850);
 }
 
-.bg-greyscale-350 {
-  background-color: var(--c--theme--colors--greyscale-350);
+.bg-error-900 {
+  background-color: var(--c--globals--colors--error-900);
 }
 
-.bg-greyscale-750 {
-  background-color: var(--c--theme--colors--greyscale-750);
+.bg-error-950 {
+  background-color: var(--c--globals--colors--error-950);
 }
 
-.bg-greyscale-950 {
-  background-color: var(--c--theme--colors--greyscale-950);
+.bg-red-050 {
+  background-color: var(--c--globals--colors--red-050);
 }
 
-.bg-greyscale-1000 {
-  background-color: var(--c--theme--colors--greyscale-1000);
+.bg-red-100 {
+  background-color: var(--c--globals--colors--red-100);
 }
 
-.bg-danger-050 {
-  background-color: var(--c--theme--colors--danger-050);
+.bg-red-150 {
+  background-color: var(--c--globals--colors--red-150);
 }
 
-.bg-blue-500 {
-  background-color: var(--c--theme--colors--blue-500);
+.bg-red-200 {
+  background-color: var(--c--globals--colors--red-200);
 }
 
-.bg-brown-500 {
-  background-color: var(--c--theme--colors--brown-500);
+.bg-red-250 {
+  background-color: var(--c--globals--colors--red-250);
 }
 
-.bg-cyan-500 {
-  background-color: var(--c--theme--colors--cyan-500);
+.bg-red-300 {
+  background-color: var(--c--globals--colors--red-300);
 }
 
-.bg-gold-500 {
-  background-color: var(--c--theme--colors--gold-500);
+.bg-red-350 {
+  background-color: var(--c--globals--colors--red-350);
 }
 
-.bg-green-500 {
-  background-color: var(--c--theme--colors--green-500);
+.bg-red-400 {
+  background-color: var(--c--globals--colors--red-400);
 }
 
-.bg-olive-500 {
-  background-color: var(--c--theme--colors--olive-500);
-}
-
-.bg-orange-500 {
-  background-color: var(--c--theme--colors--orange-500);
-}
-
-.bg-purple-500 {
-  background-color: var(--c--theme--colors--purple-500);
+.bg-red-450 {
+  background-color: var(--c--globals--colors--red-450);
 }
 
 .bg-red-500 {
-  background-color: var(--c--theme--colors--red-500);
+  background-color: var(--c--globals--colors--red-500);
 }
 
-.bg-yellow-500 {
-  background-color: var(--c--theme--colors--yellow-500);
+.bg-red-550 {
+  background-color: var(--c--globals--colors--red-550);
 }
 
-.bg-rose-500 {
-  background-color: var(--c--theme--colors--rose-500);
+.bg-red-600 {
+  background-color: var(--c--globals--colors--red-600);
 }
 
-.bg-primary-action {
-  background-color: var(--c--theme--colors--primary-action);
+.bg-red-650 {
+  background-color: var(--c--globals--colors--red-650);
 }
 
-.bg-primary-bg {
-  background-color: var(--c--theme--colors--primary-bg);
+.bg-red-700 {
+  background-color: var(--c--globals--colors--red-700);
 }
 
-.bg-primary-focus {
-  background-color: var(--c--theme--colors--primary-focus);
+.bg-red-750 {
+  background-color: var(--c--globals--colors--red-750);
 }
 
-.bg-secondary-icon {
-  background-color: var(--c--theme--colors--secondary-icon);
+.bg-red-800 {
+  background-color: var(--c--globals--colors--red-800);
 }
 
-.bg-blue-400 {
-  background-color: var(--c--theme--colors--blue-400);
+.bg-red-850 {
+  background-color: var(--c--globals--colors--red-850);
 }
 
-.bg-blue-600 {
-  background-color: var(--c--theme--colors--blue-600);
+.bg-red-900 {
+  background-color: var(--c--globals--colors--red-900);
 }
 
-.bg-brown-400 {
-  background-color: var(--c--theme--colors--brown-400);
+.bg-red-950 {
+  background-color: var(--c--globals--colors--red-950);
 }
 
-.bg-brown-600 {
-  background-color: var(--c--theme--colors--brown-600);
+.bg-orange-050 {
+  background-color: var(--c--globals--colors--orange-050);
 }
 
-.bg-cyan-400 {
-  background-color: var(--c--theme--colors--cyan-400);
+.bg-orange-100 {
+  background-color: var(--c--globals--colors--orange-100);
 }
 
-.bg-cyan-600 {
-  background-color: var(--c--theme--colors--cyan-600);
+.bg-orange-150 {
+  background-color: var(--c--globals--colors--orange-150);
 }
 
-.bg-gold-400 {
-  background-color: var(--c--theme--colors--gold-400);
+.bg-orange-200 {
+  background-color: var(--c--globals--colors--orange-200);
 }
 
-.bg-gold-600 {
-  background-color: var(--c--theme--colors--gold-600);
+.bg-orange-250 {
+  background-color: var(--c--globals--colors--orange-250);
 }
 
-.bg-green-400 {
-  background-color: var(--c--theme--colors--green-400);
+.bg-orange-300 {
+  background-color: var(--c--globals--colors--orange-300);
 }
 
-.bg-green-600 {
-  background-color: var(--c--theme--colors--green-600);
-}
-
-.bg-olive-400 {
-  background-color: var(--c--theme--colors--olive-400);
-}
-
-.bg-olive-600 {
-  background-color: var(--c--theme--colors--olive-600);
+.bg-orange-350 {
+  background-color: var(--c--globals--colors--orange-350);
 }
 
 .bg-orange-400 {
-  background-color: var(--c--theme--colors--orange-400);
+  background-color: var(--c--globals--colors--orange-400);
+}
+
+.bg-orange-450 {
+  background-color: var(--c--globals--colors--orange-450);
+}
+
+.bg-orange-500 {
+  background-color: var(--c--globals--colors--orange-500);
+}
+
+.bg-orange-550 {
+  background-color: var(--c--globals--colors--orange-550);
 }
 
 .bg-orange-600 {
-  background-color: var(--c--theme--colors--orange-600);
+  background-color: var(--c--globals--colors--orange-600);
 }
 
-.bg-pink-400 {
-  background-color: var(--c--theme--colors--pink-400);
+.bg-orange-650 {
+  background-color: var(--c--globals--colors--orange-650);
 }
 
-.bg-pink-500 {
-  background-color: var(--c--theme--colors--pink-500);
+.bg-orange-700 {
+  background-color: var(--c--globals--colors--orange-700);
 }
 
-.bg-pink-600 {
-  background-color: var(--c--theme--colors--pink-600);
+.bg-orange-750 {
+  background-color: var(--c--globals--colors--orange-750);
 }
 
-.bg-purple-400 {
-  background-color: var(--c--theme--colors--purple-400);
+.bg-orange-800 {
+  background-color: var(--c--globals--colors--orange-800);
 }
 
-.bg-purple-600 {
-  background-color: var(--c--theme--colors--purple-600);
+.bg-orange-850 {
+  background-color: var(--c--globals--colors--orange-850);
+}
+
+.bg-orange-900 {
+  background-color: var(--c--globals--colors--orange-900);
+}
+
+.bg-orange-950 {
+  background-color: var(--c--globals--colors--orange-950);
+}
+
+.bg-brown-050 {
+  background-color: var(--c--globals--colors--brown-050);
+}
+
+.bg-brown-100 {
+  background-color: var(--c--globals--colors--brown-100);
+}
+
+.bg-brown-150 {
+  background-color: var(--c--globals--colors--brown-150);
+}
+
+.bg-brown-200 {
+  background-color: var(--c--globals--colors--brown-200);
+}
+
+.bg-brown-250 {
+  background-color: var(--c--globals--colors--brown-250);
+}
+
+.bg-brown-300 {
+  background-color: var(--c--globals--colors--brown-300);
+}
+
+.bg-brown-350 {
+  background-color: var(--c--globals--colors--brown-350);
+}
+
+.bg-brown-400 {
+  background-color: var(--c--globals--colors--brown-400);
+}
+
+.bg-brown-450 {
+  background-color: var(--c--globals--colors--brown-450);
+}
+
+.bg-brown-500 {
+  background-color: var(--c--globals--colors--brown-500);
+}
+
+.bg-brown-550 {
+  background-color: var(--c--globals--colors--brown-550);
+}
+
+.bg-brown-600 {
+  background-color: var(--c--globals--colors--brown-600);
+}
+
+.bg-brown-650 {
+  background-color: var(--c--globals--colors--brown-650);
+}
+
+.bg-brown-700 {
+  background-color: var(--c--globals--colors--brown-700);
+}
+
+.bg-brown-750 {
+  background-color: var(--c--globals--colors--brown-750);
+}
+
+.bg-brown-800 {
+  background-color: var(--c--globals--colors--brown-800);
+}
+
+.bg-brown-850 {
+  background-color: var(--c--globals--colors--brown-850);
+}
+
+.bg-brown-900 {
+  background-color: var(--c--globals--colors--brown-900);
+}
+
+.bg-brown-950 {
+  background-color: var(--c--globals--colors--brown-950);
+}
+
+.bg-yellow-050 {
+  background-color: var(--c--globals--colors--yellow-050);
+}
+
+.bg-yellow-100 {
+  background-color: var(--c--globals--colors--yellow-100);
+}
+
+.bg-yellow-150 {
+  background-color: var(--c--globals--colors--yellow-150);
+}
+
+.bg-yellow-200 {
+  background-color: var(--c--globals--colors--yellow-200);
+}
+
+.bg-yellow-250 {
+  background-color: var(--c--globals--colors--yellow-250);
+}
+
+.bg-yellow-300 {
+  background-color: var(--c--globals--colors--yellow-300);
+}
+
+.bg-yellow-350 {
+  background-color: var(--c--globals--colors--yellow-350);
 }
 
 .bg-yellow-400 {
-  background-color: var(--c--theme--colors--yellow-400);
+  background-color: var(--c--globals--colors--yellow-400);
+}
+
+.bg-yellow-450 {
+  background-color: var(--c--globals--colors--yellow-450);
+}
+
+.bg-yellow-500 {
+  background-color: var(--c--globals--colors--yellow-500);
+}
+
+.bg-yellow-550 {
+  background-color: var(--c--globals--colors--yellow-550);
 }
 
 .bg-yellow-600 {
-  background-color: var(--c--theme--colors--yellow-600);
+  background-color: var(--c--globals--colors--yellow-600);
+}
+
+.bg-yellow-650 {
+  background-color: var(--c--globals--colors--yellow-650);
+}
+
+.bg-yellow-700 {
+  background-color: var(--c--globals--colors--yellow-700);
+}
+
+.bg-yellow-750 {
+  background-color: var(--c--globals--colors--yellow-750);
+}
+
+.bg-yellow-800 {
+  background-color: var(--c--globals--colors--yellow-800);
+}
+
+.bg-yellow-850 {
+  background-color: var(--c--globals--colors--yellow-850);
+}
+
+.bg-yellow-900 {
+  background-color: var(--c--globals--colors--yellow-900);
+}
+
+.bg-yellow-950 {
+  background-color: var(--c--globals--colors--yellow-950);
+}
+
+.bg-green-050 {
+  background-color: var(--c--globals--colors--green-050);
+}
+
+.bg-green-100 {
+  background-color: var(--c--globals--colors--green-100);
+}
+
+.bg-green-150 {
+  background-color: var(--c--globals--colors--green-150);
+}
+
+.bg-green-200 {
+  background-color: var(--c--globals--colors--green-200);
+}
+
+.bg-green-250 {
+  background-color: var(--c--globals--colors--green-250);
+}
+
+.bg-green-300 {
+  background-color: var(--c--globals--colors--green-300);
+}
+
+.bg-green-350 {
+  background-color: var(--c--globals--colors--green-350);
+}
+
+.bg-green-400 {
+  background-color: var(--c--globals--colors--green-400);
+}
+
+.bg-green-450 {
+  background-color: var(--c--globals--colors--green-450);
+}
+
+.bg-green-500 {
+  background-color: var(--c--globals--colors--green-500);
+}
+
+.bg-green-550 {
+  background-color: var(--c--globals--colors--green-550);
+}
+
+.bg-green-600 {
+  background-color: var(--c--globals--colors--green-600);
+}
+
+.bg-green-650 {
+  background-color: var(--c--globals--colors--green-650);
+}
+
+.bg-green-700 {
+  background-color: var(--c--globals--colors--green-700);
+}
+
+.bg-green-750 {
+  background-color: var(--c--globals--colors--green-750);
+}
+
+.bg-green-800 {
+  background-color: var(--c--globals--colors--green-800);
+}
+
+.bg-green-850 {
+  background-color: var(--c--globals--colors--green-850);
+}
+
+.bg-green-900 {
+  background-color: var(--c--globals--colors--green-900);
+}
+
+.bg-green-950 {
+  background-color: var(--c--globals--colors--green-950);
+}
+
+.bg-blue-1-050 {
+  background-color: var(--c--globals--colors--blue-1-050);
+}
+
+.bg-blue-1-100 {
+  background-color: var(--c--globals--colors--blue-1-100);
+}
+
+.bg-blue-1-150 {
+  background-color: var(--c--globals--colors--blue-1-150);
+}
+
+.bg-blue-1-200 {
+  background-color: var(--c--globals--colors--blue-1-200);
+}
+
+.bg-blue-1-250 {
+  background-color: var(--c--globals--colors--blue-1-250);
+}
+
+.bg-blue-1-300 {
+  background-color: var(--c--globals--colors--blue-1-300);
+}
+
+.bg-blue-1-350 {
+  background-color: var(--c--globals--colors--blue-1-350);
+}
+
+.bg-blue-1-400 {
+  background-color: var(--c--globals--colors--blue-1-400);
+}
+
+.bg-blue-1-450 {
+  background-color: var(--c--globals--colors--blue-1-450);
+}
+
+.bg-blue-1-500 {
+  background-color: var(--c--globals--colors--blue-1-500);
+}
+
+.bg-blue-1-550 {
+  background-color: var(--c--globals--colors--blue-1-550);
+}
+
+.bg-blue-1-600 {
+  background-color: var(--c--globals--colors--blue-1-600);
+}
+
+.bg-blue-1-650 {
+  background-color: var(--c--globals--colors--blue-1-650);
+}
+
+.bg-blue-1-700 {
+  background-color: var(--c--globals--colors--blue-1-700);
+}
+
+.bg-blue-1-750 {
+  background-color: var(--c--globals--colors--blue-1-750);
+}
+
+.bg-blue-1-800 {
+  background-color: var(--c--globals--colors--blue-1-800);
+}
+
+.bg-blue-1-850 {
+  background-color: var(--c--globals--colors--blue-1-850);
+}
+
+.bg-blue-1-900 {
+  background-color: var(--c--globals--colors--blue-1-900);
+}
+
+.bg-blue-1-950 {
+  background-color: var(--c--globals--colors--blue-1-950);
+}
+
+.bg-blue-2-050 {
+  background-color: var(--c--globals--colors--blue-2-050);
+}
+
+.bg-blue-2-100 {
+  background-color: var(--c--globals--colors--blue-2-100);
+}
+
+.bg-blue-2-150 {
+  background-color: var(--c--globals--colors--blue-2-150);
+}
+
+.bg-blue-2-200 {
+  background-color: var(--c--globals--colors--blue-2-200);
+}
+
+.bg-blue-2-250 {
+  background-color: var(--c--globals--colors--blue-2-250);
+}
+
+.bg-blue-2-300 {
+  background-color: var(--c--globals--colors--blue-2-300);
+}
+
+.bg-blue-2-350 {
+  background-color: var(--c--globals--colors--blue-2-350);
+}
+
+.bg-blue-2-400 {
+  background-color: var(--c--globals--colors--blue-2-400);
+}
+
+.bg-blue-2-450 {
+  background-color: var(--c--globals--colors--blue-2-450);
+}
+
+.bg-blue-2-500 {
+  background-color: var(--c--globals--colors--blue-2-500);
+}
+
+.bg-blue-2-550 {
+  background-color: var(--c--globals--colors--blue-2-550);
+}
+
+.bg-blue-2-600 {
+  background-color: var(--c--globals--colors--blue-2-600);
+}
+
+.bg-blue-2-650 {
+  background-color: var(--c--globals--colors--blue-2-650);
+}
+
+.bg-blue-2-700 {
+  background-color: var(--c--globals--colors--blue-2-700);
+}
+
+.bg-blue-2-750 {
+  background-color: var(--c--globals--colors--blue-2-750);
+}
+
+.bg-blue-2-800 {
+  background-color: var(--c--globals--colors--blue-2-800);
+}
+
+.bg-blue-2-850 {
+  background-color: var(--c--globals--colors--blue-2-850);
+}
+
+.bg-blue-2-900 {
+  background-color: var(--c--globals--colors--blue-2-900);
+}
+
+.bg-blue-2-950 {
+  background-color: var(--c--globals--colors--blue-2-950);
+}
+
+.bg-purple-050 {
+  background-color: var(--c--globals--colors--purple-050);
+}
+
+.bg-purple-100 {
+  background-color: var(--c--globals--colors--purple-100);
+}
+
+.bg-purple-150 {
+  background-color: var(--c--globals--colors--purple-150);
+}
+
+.bg-purple-200 {
+  background-color: var(--c--globals--colors--purple-200);
+}
+
+.bg-purple-250 {
+  background-color: var(--c--globals--colors--purple-250);
+}
+
+.bg-purple-300 {
+  background-color: var(--c--globals--colors--purple-300);
+}
+
+.bg-purple-350 {
+  background-color: var(--c--globals--colors--purple-350);
+}
+
+.bg-purple-400 {
+  background-color: var(--c--globals--colors--purple-400);
+}
+
+.bg-purple-450 {
+  background-color: var(--c--globals--colors--purple-450);
+}
+
+.bg-purple-500 {
+  background-color: var(--c--globals--colors--purple-500);
+}
+
+.bg-purple-550 {
+  background-color: var(--c--globals--colors--purple-550);
+}
+
+.bg-purple-600 {
+  background-color: var(--c--globals--colors--purple-600);
+}
+
+.bg-purple-650 {
+  background-color: var(--c--globals--colors--purple-650);
+}
+
+.bg-purple-700 {
+  background-color: var(--c--globals--colors--purple-700);
+}
+
+.bg-purple-750 {
+  background-color: var(--c--globals--colors--purple-750);
+}
+
+.bg-purple-800 {
+  background-color: var(--c--globals--colors--purple-800);
+}
+
+.bg-purple-850 {
+  background-color: var(--c--globals--colors--purple-850);
+}
+
+.bg-purple-900 {
+  background-color: var(--c--globals--colors--purple-900);
+}
+
+.bg-purple-950 {
+  background-color: var(--c--globals--colors--purple-950);
+}
+
+.bg-pink-050 {
+  background-color: var(--c--globals--colors--pink-050);
+}
+
+.bg-pink-100 {
+  background-color: var(--c--globals--colors--pink-100);
+}
+
+.bg-pink-150 {
+  background-color: var(--c--globals--colors--pink-150);
+}
+
+.bg-pink-200 {
+  background-color: var(--c--globals--colors--pink-200);
+}
+
+.bg-pink-250 {
+  background-color: var(--c--globals--colors--pink-250);
+}
+
+.bg-pink-300 {
+  background-color: var(--c--globals--colors--pink-300);
+}
+
+.bg-pink-350 {
+  background-color: var(--c--globals--colors--pink-350);
+}
+
+.bg-pink-400 {
+  background-color: var(--c--globals--colors--pink-400);
+}
+
+.bg-pink-450 {
+  background-color: var(--c--globals--colors--pink-450);
+}
+
+.bg-pink-500 {
+  background-color: var(--c--globals--colors--pink-500);
+}
+
+.bg-pink-550 {
+  background-color: var(--c--globals--colors--pink-550);
+}
+
+.bg-pink-600 {
+  background-color: var(--c--globals--colors--pink-600);
+}
+
+.bg-pink-650 {
+  background-color: var(--c--globals--colors--pink-650);
+}
+
+.bg-pink-700 {
+  background-color: var(--c--globals--colors--pink-700);
+}
+
+.bg-pink-750 {
+  background-color: var(--c--globals--colors--pink-750);
+}
+
+.bg-pink-800 {
+  background-color: var(--c--globals--colors--pink-800);
+}
+
+.bg-pink-850 {
+  background-color: var(--c--globals--colors--pink-850);
+}
+
+.bg-pink-900 {
+  background-color: var(--c--globals--colors--pink-900);
+}
+
+.bg-pink-950 {
+  background-color: var(--c--globals--colors--pink-950);
+}
+
+.bg-black-000 {
+  background-color: var(--c--globals--colors--black-000);
+}
+
+.bg-black-050 {
+  background-color: var(--c--globals--colors--black-050);
+}
+
+.bg-black-100 {
+  background-color: var(--c--globals--colors--black-100);
+}
+
+.bg-black-150 {
+  background-color: var(--c--globals--colors--black-150);
+}
+
+.bg-black-200 {
+  background-color: var(--c--globals--colors--black-200);
+}
+
+.bg-black-250 {
+  background-color: var(--c--globals--colors--black-250);
+}
+
+.bg-black-300 {
+  background-color: var(--c--globals--colors--black-300);
+}
+
+.bg-black-350 {
+  background-color: var(--c--globals--colors--black-350);
+}
+
+.bg-black-400 {
+  background-color: var(--c--globals--colors--black-400);
+}
+
+.bg-black-450 {
+  background-color: var(--c--globals--colors--black-450);
+}
+
+.bg-black-500 {
+  background-color: var(--c--globals--colors--black-500);
+}
+
+.bg-black-550 {
+  background-color: var(--c--globals--colors--black-550);
+}
+
+.bg-black-600 {
+  background-color: var(--c--globals--colors--black-600);
+}
+
+.bg-black-650 {
+  background-color: var(--c--globals--colors--black-650);
+}
+
+.bg-black-700 {
+  background-color: var(--c--globals--colors--black-700);
+}
+
+.bg-black-750 {
+  background-color: var(--c--globals--colors--black-750);
+}
+
+.bg-black-800 {
+  background-color: var(--c--globals--colors--black-800);
+}
+
+.bg-black-850 {
+  background-color: var(--c--globals--colors--black-850);
+}
+
+.bg-black-900 {
+  background-color: var(--c--globals--colors--black-900);
+}
+
+.bg-black-950 {
+  background-color: var(--c--globals--colors--black-950);
+}
+
+.bg-white-000 {
+  background-color: var(--c--globals--colors--white-000);
+}
+
+.bg-white-050 {
+  background-color: var(--c--globals--colors--white-050);
+}
+
+.bg-white-100 {
+  background-color: var(--c--globals--colors--white-100);
+}
+
+.bg-white-150 {
+  background-color: var(--c--globals--colors--white-150);
+}
+
+.bg-white-200 {
+  background-color: var(--c--globals--colors--white-200);
+}
+
+.bg-white-250 {
+  background-color: var(--c--globals--colors--white-250);
+}
+
+.bg-white-300 {
+  background-color: var(--c--globals--colors--white-300);
+}
+
+.bg-white-350 {
+  background-color: var(--c--globals--colors--white-350);
+}
+
+.bg-white-400 {
+  background-color: var(--c--globals--colors--white-400);
+}
+
+.bg-white-450 {
+  background-color: var(--c--globals--colors--white-450);
+}
+
+.bg-white-500 {
+  background-color: var(--c--globals--colors--white-500);
+}
+
+.bg-white-550 {
+  background-color: var(--c--globals--colors--white-550);
+}
+
+.bg-white-600 {
+  background-color: var(--c--globals--colors--white-600);
+}
+
+.bg-white-650 {
+  background-color: var(--c--globals--colors--white-650);
+}
+
+.bg-white-700 {
+  background-color: var(--c--globals--colors--white-700);
+}
+
+.bg-white-750 {
+  background-color: var(--c--globals--colors--white-750);
+}
+
+.bg-white-800 {
+  background-color: var(--c--globals--colors--white-800);
+}
+
+.bg-white-850 {
+  background-color: var(--c--globals--colors--white-850);
+}
+
+.bg-white-900 {
+  background-color: var(--c--globals--colors--white-900);
+}
+
+.bg-white-950 {
+  background-color: var(--c--globals--colors--white-950);
+}
+
+.bg-blue1-050 {
+  background-color: var(--c--globals--colors--blue1-050);
+}
+
+.bg-blue1-100 {
+  background-color: var(--c--globals--colors--blue1-100);
+}
+
+.bg-blue1-150 {
+  background-color: var(--c--globals--colors--blue1-150);
+}
+
+.bg-blue1-200 {
+  background-color: var(--c--globals--colors--blue1-200);
+}
+
+.bg-blue1-250 {
+  background-color: var(--c--globals--colors--blue1-250);
+}
+
+.bg-blue1-300 {
+  background-color: var(--c--globals--colors--blue1-300);
+}
+
+.bg-blue1-350 {
+  background-color: var(--c--globals--colors--blue1-350);
+}
+
+.bg-blue1-400 {
+  background-color: var(--c--globals--colors--blue1-400);
+}
+
+.bg-blue1-450 {
+  background-color: var(--c--globals--colors--blue1-450);
+}
+
+.bg-blue1-500 {
+  background-color: var(--c--globals--colors--blue1-500);
+}
+
+.bg-blue1-550 {
+  background-color: var(--c--globals--colors--blue1-550);
+}
+
+.bg-blue1-600 {
+  background-color: var(--c--globals--colors--blue1-600);
+}
+
+.bg-blue1-650 {
+  background-color: var(--c--globals--colors--blue1-650);
+}
+
+.bg-blue1-700 {
+  background-color: var(--c--globals--colors--blue1-700);
+}
+
+.bg-blue1-750 {
+  background-color: var(--c--globals--colors--blue1-750);
+}
+
+.bg-blue1-800 {
+  background-color: var(--c--globals--colors--blue1-800);
+}
+
+.bg-blue1-850 {
+  background-color: var(--c--globals--colors--blue1-850);
+}
+
+.bg-blue1-900 {
+  background-color: var(--c--globals--colors--blue1-900);
+}
+
+.bg-blue1-950 {
+  background-color: var(--c--globals--colors--blue1-950);
+}
+
+.bg-blue2-050 {
+  background-color: var(--c--globals--colors--blue2-050);
+}
+
+.bg-blue2-100 {
+  background-color: var(--c--globals--colors--blue2-100);
+}
+
+.bg-blue2-150 {
+  background-color: var(--c--globals--colors--blue2-150);
+}
+
+.bg-blue2-200 {
+  background-color: var(--c--globals--colors--blue2-200);
+}
+
+.bg-blue2-250 {
+  background-color: var(--c--globals--colors--blue2-250);
+}
+
+.bg-blue2-300 {
+  background-color: var(--c--globals--colors--blue2-300);
+}
+
+.bg-blue2-350 {
+  background-color: var(--c--globals--colors--blue2-350);
+}
+
+.bg-blue2-400 {
+  background-color: var(--c--globals--colors--blue2-400);
+}
+
+.bg-blue2-450 {
+  background-color: var(--c--globals--colors--blue2-450);
+}
+
+.bg-blue2-500 {
+  background-color: var(--c--globals--colors--blue2-500);
+}
+
+.bg-blue2-550 {
+  background-color: var(--c--globals--colors--blue2-550);
+}
+
+.bg-blue2-600 {
+  background-color: var(--c--globals--colors--blue2-600);
+}
+
+.bg-blue2-650 {
+  background-color: var(--c--globals--colors--blue2-650);
+}
+
+.bg-blue2-700 {
+  background-color: var(--c--globals--colors--blue2-700);
+}
+
+.bg-blue2-750 {
+  background-color: var(--c--globals--colors--blue2-750);
+}
+
+.bg-blue2-800 {
+  background-color: var(--c--globals--colors--blue2-800);
+}
+
+.bg-blue2-850 {
+  background-color: var(--c--globals--colors--blue2-850);
+}
+
+.bg-blue2-900 {
+  background-color: var(--c--globals--colors--blue2-900);
+}
+
+.bg-blue2-950 {
+  background-color: var(--c--globals--colors--blue2-950);
+}
+
+.bg-surface-primary {
+  background-color: var(--c--contextuals--background--surface--primary);
+}
+
+.bg-surface-secondary {
+  background-color: var(--c--contextuals--background--surface--secondary);
+}
+
+.bg-surface-tertiary {
+  background-color: var(--c--contextuals--background--surface--tertiary);
+}
+
+.bg-semantic-brand-primary {
+  background-color: var(--c--contextuals--background--semantic--brand--primary);
+}
+
+.bg-semantic-brand-primary-hover {
+  background-color: var(
+    --c--contextuals--background--semantic--brand--primary-hover
+  );
+}
+
+.bg-semantic-brand-secondary {
+  background-color: var(
+    --c--contextuals--background--semantic--brand--secondary
+  );
+}
+
+.bg-semantic-brand-secondary-hover {
+  background-color: var(
+    --c--contextuals--background--semantic--brand--secondary-hover
+  );
+}
+
+.bg-semantic-brand-tertiary {
+  background-color: var(
+    --c--contextuals--background--semantic--brand--tertiary
+  );
+}
+
+.bg-semantic-brand-tertiary-hover {
+  background-color: var(
+    --c--contextuals--background--semantic--brand--tertiary-hover
+  );
+}
+
+.bg-semantic-neutral-primary {
+  background-color: var(
+    --c--contextuals--background--semantic--neutral--primary
+  );
+}
+
+.bg-semantic-neutral-primary-hover {
+  background-color: var(
+    --c--contextuals--background--semantic--neutral--primary-hover
+  );
+}
+
+.bg-semantic-neutral-secondary {
+  background-color: var(
+    --c--contextuals--background--semantic--neutral--secondary
+  );
+}
+
+.bg-semantic-neutral-secondary-hover {
+  background-color: var(
+    --c--contextuals--background--semantic--neutral--secondary-hover
+  );
+}
+
+.bg-semantic-neutral-tertiary {
+  background-color: var(
+    --c--contextuals--background--semantic--neutral--tertiary
+  );
+}
+
+.bg-semantic-neutral-tertiary-hover {
+  background-color: var(
+    --c--contextuals--background--semantic--neutral--tertiary-hover
+  );
+}
+
+.bg-semantic-contextual-primary {
+  background-color: var(
+    --c--contextuals--background--semantic--contextual--primary
+  );
+}
+
+.bg-semantic-contextual-primary-hover {
+  background-color: var(
+    --c--contextuals--background--semantic--contextual--primary-hover
+  );
+}
+
+.bg-semantic-info-primary {
+  background-color: var(--c--contextuals--background--semantic--info--primary);
+}
+
+.bg-semantic-info-primary-hover {
+  background-color: var(
+    --c--contextuals--background--semantic--info--primary-hover
+  );
+}
+
+.bg-semantic-info-secondary {
+  background-color: var(
+    --c--contextuals--background--semantic--info--secondary
+  );
+}
+
+.bg-semantic-info-secondary-hover {
+  background-color: var(
+    --c--contextuals--background--semantic--info--secondary-hover
+  );
+}
+
+.bg-semantic-info-tertiary {
+  background-color: var(--c--contextuals--background--semantic--info--tertiary);
+}
+
+.bg-semantic-info-tertiary-hover {
+  background-color: var(
+    --c--contextuals--background--semantic--info--tertiary-hover
+  );
+}
+
+.bg-semantic-success-primary {
+  background-color: var(
+    --c--contextuals--background--semantic--success--primary
+  );
+}
+
+.bg-semantic-success-primary-hover {
+  background-color: var(
+    --c--contextuals--background--semantic--success--primary-hover
+  );
+}
+
+.bg-semantic-success-secondary {
+  background-color: var(
+    --c--contextuals--background--semantic--success--secondary
+  );
+}
+
+.bg-semantic-success-secondary-hover {
+  background-color: var(
+    --c--contextuals--background--semantic--success--secondary-hover
+  );
+}
+
+.bg-semantic-success-tertiary {
+  background-color: var(
+    --c--contextuals--background--semantic--success--tertiary
+  );
+}
+
+.bg-semantic-success-tertiary-hover {
+  background-color: var(
+    --c--contextuals--background--semantic--success--tertiary-hover
+  );
+}
+
+.bg-semantic-warning-primary {
+  background-color: var(
+    --c--contextuals--background--semantic--warning--primary
+  );
+}
+
+.bg-semantic-warning-primary-hover {
+  background-color: var(
+    --c--contextuals--background--semantic--warning--primary-hover
+  );
+}
+
+.bg-semantic-warning-secondary {
+  background-color: var(
+    --c--contextuals--background--semantic--warning--secondary
+  );
+}
+
+.bg-semantic-warning-secondary-hover {
+  background-color: var(
+    --c--contextuals--background--semantic--warning--secondary-hover
+  );
+}
+
+.bg-semantic-warning-tertiary {
+  background-color: var(
+    --c--contextuals--background--semantic--warning--tertiary
+  );
+}
+
+.bg-semantic-warning-tertiary-hover {
+  background-color: var(
+    --c--contextuals--background--semantic--warning--tertiary-hover
+  );
+}
+
+.bg-semantic-error-primary {
+  background-color: var(--c--contextuals--background--semantic--error--primary);
+}
+
+.bg-semantic-error-primary-hover {
+  background-color: var(
+    --c--contextuals--background--semantic--error--primary-hover
+  );
+}
+
+.bg-semantic-error-secondary {
+  background-color: var(
+    --c--contextuals--background--semantic--error--secondary
+  );
+}
+
+.bg-semantic-error-secondary-hover {
+  background-color: var(
+    --c--contextuals--background--semantic--error--secondary-hover
+  );
+}
+
+.bg-semantic-error-tertiary {
+  background-color: var(
+    --c--contextuals--background--semantic--error--tertiary
+  );
+}
+
+.bg-semantic-error-tertiary-hover {
+  background-color: var(
+    --c--contextuals--background--semantic--error--tertiary-hover
+  );
+}
+
+.bg-semantic-disabled-primary {
+  background-color: var(
+    --c--contextuals--background--semantic--disabled--primary
+  );
+}
+
+.bg-semantic-disabled-secondary {
+  background-color: var(
+    --c--contextuals--background--semantic--disabled--secondary
+  );
+}
+
+.bg-palette-brand-primary {
+  background-color: var(--c--contextuals--background--palette--brand--primary);
+}
+
+.bg-palette-brand-secondary {
+  background-color: var(
+    --c--contextuals--background--palette--brand--secondary
+  );
+}
+
+.bg-palette-brand-tertiary {
+  background-color: var(--c--contextuals--background--palette--brand--tertiary);
+}
+
+.bg-palette-red-primary {
+  background-color: var(--c--contextuals--background--palette--red--primary);
+}
+
+.bg-palette-red-secondary {
+  background-color: var(--c--contextuals--background--palette--red--secondary);
+}
+
+.bg-palette-red-tertiary {
+  background-color: var(--c--contextuals--background--palette--red--tertiary);
+}
+
+.bg-palette-orange-primary {
+  background-color: var(--c--contextuals--background--palette--orange--primary);
+}
+
+.bg-palette-orange-secondary {
+  background-color: var(
+    --c--contextuals--background--palette--orange--secondary
+  );
+}
+
+.bg-palette-orange-tertiary {
+  background-color: var(
+    --c--contextuals--background--palette--orange--tertiary
+  );
+}
+
+.bg-palette-brown-primary {
+  background-color: var(--c--contextuals--background--palette--brown--primary);
+}
+
+.bg-palette-brown-secondary {
+  background-color: var(
+    --c--contextuals--background--palette--brown--secondary
+  );
+}
+
+.bg-palette-brown-tertiary {
+  background-color: var(--c--contextuals--background--palette--brown--tertiary);
+}
+
+.bg-palette-yellow-primary {
+  background-color: var(--c--contextuals--background--palette--yellow--primary);
+}
+
+.bg-palette-yellow-secondary {
+  background-color: var(
+    --c--contextuals--background--palette--yellow--secondary
+  );
+}
+
+.bg-palette-yellow-tertiary {
+  background-color: var(
+    --c--contextuals--background--palette--yellow--tertiary
+  );
+}
+
+.bg-palette-green-primary {
+  background-color: var(--c--contextuals--background--palette--green--primary);
+}
+
+.bg-palette-green-secondary {
+  background-color: var(
+    --c--contextuals--background--palette--green--secondary
+  );
+}
+
+.bg-palette-green-tertiary {
+  background-color: var(--c--contextuals--background--palette--green--tertiary);
+}
+
+.bg-palette-blue-1-primary {
+  background-color: var(--c--contextuals--background--palette--blue-1--primary);
+}
+
+.bg-palette-blue-1-secondary {
+  background-color: var(
+    --c--contextuals--background--palette--blue-1--secondary
+  );
+}
+
+.bg-palette-blue-1-tertiary {
+  background-color: var(
+    --c--contextuals--background--palette--blue-1--tertiary
+  );
+}
+
+.bg-palette-blue-2-primary {
+  background-color: var(--c--contextuals--background--palette--blue-2--primary);
+}
+
+.bg-palette-blue-2-secondary {
+  background-color: var(
+    --c--contextuals--background--palette--blue-2--secondary
+  );
+}
+
+.bg-palette-blue-2-tertiary {
+  background-color: var(
+    --c--contextuals--background--palette--blue-2--tertiary
+  );
+}
+
+.bg-palette-purple-primary {
+  background-color: var(--c--contextuals--background--palette--purple--primary);
+}
+
+.bg-palette-purple-secondary {
+  background-color: var(
+    --c--contextuals--background--palette--purple--secondary
+  );
+}
+
+.bg-palette-purple-tertiary {
+  background-color: var(
+    --c--contextuals--background--palette--purple--tertiary
+  );
+}
+
+.bg-palette-pink-primary {
+  background-color: var(--c--contextuals--background--palette--pink--primary);
+}
+
+.bg-palette-pink-secondary {
+  background-color: var(--c--contextuals--background--palette--pink--secondary);
+}
+
+.bg-palette-pink-tertiary {
+  background-color: var(--c--contextuals--background--palette--pink--tertiary);
+}
+
+.bg-palette-gray-primary {
+  background-color: var(--c--contextuals--background--palette--gray--primary);
+}
+
+.bg-palette-gray-secondary {
+  background-color: var(--c--contextuals--background--palette--gray--secondary);
+}
+
+.bg-palette-gray-tertiary {
+  background-color: var(--c--contextuals--background--palette--gray--tertiary);
+}
+
+.bg-text-primary {
+  background-color: var(--c--contextuals--background--text--primary);
 }
 
 .fw-thin {
-  font-weight: var(--c--theme--font--weights--thin);
+  font-weight: var(--c--globals--font--weights--thin);
 }
 
 .fw-light {
-  font-weight: var(--c--theme--font--weights--light);
+  font-weight: var(--c--globals--font--weights--light);
 }
 
 .fw-regular {
-  font-weight: var(--c--theme--font--weights--regular);
+  font-weight: var(--c--globals--font--weights--regular);
 }
 
 .fw-medium {
-  font-weight: var(--c--theme--font--weights--medium);
+  font-weight: var(--c--globals--font--weights--medium);
 }
 
 .fw-bold {
-  font-weight: var(--c--theme--font--weights--bold);
+  font-weight: var(--c--globals--font--weights--bold);
 }
 
 .fw-extrabold {
-  font-weight: var(--c--theme--font--weights--extrabold);
+  font-weight: var(--c--globals--font--weights--extrabold);
 }
 
 .fw-black {
-  font-weight: var(--c--theme--font--weights--black);
-}
-
-.fs-h1 {
-  font-size: var(--c--theme--font--sizes--h1);
-  letter-spacing: var(--c--theme--font--letterspacings--h1);
-}
-
-.fs-h2 {
-  font-size: var(--c--theme--font--sizes--h2);
-  letter-spacing: var(--c--theme--font--letterspacings--h2);
-}
-
-.fs-h3 {
-  font-size: var(--c--theme--font--sizes--h3);
-  letter-spacing: var(--c--theme--font--letterspacings--h3);
-}
-
-.fs-h4 {
-  font-size: var(--c--theme--font--sizes--h4);
-  letter-spacing: var(--c--theme--font--letterspacings--h4);
-}
-
-.fs-h5 {
-  font-size: var(--c--theme--font--sizes--h5);
-  letter-spacing: var(--c--theme--font--letterspacings--h5);
-}
-
-.fs-h6 {
-  font-size: var(--c--theme--font--sizes--h6);
-  letter-spacing: var(--c--theme--font--letterspacings--h6);
-}
-
-.fs-l {
-  font-size: var(--c--theme--font--sizes--l);
-  letter-spacing: var(--c--theme--font--letterspacings--l);
-}
-
-.fs-m {
-  font-size: var(--c--theme--font--sizes--m);
-  letter-spacing: var(--c--theme--font--letterspacings--m);
-}
-
-.fs-s {
-  font-size: var(--c--theme--font--sizes--s);
-  letter-spacing: var(--c--theme--font--letterspacings--s);
+  font-weight: var(--c--globals--font--weights--black);
 }
 
 .fs-xs {
-  font-size: var(--c--theme--font--sizes--xs);
-  letter-spacing: var(--c--theme--font--letterspacings--xs);
+  font-size: var(--c--globals--font--sizes--xs);
+  letter-spacing: var(--c--globals--font--letterspacings--xs);
 }
 
 .fs-sm {
-  font-size: var(--c--theme--font--sizes--sm);
-  letter-spacing: var(--c--theme--font--letterspacings--sm);
+  font-size: var(--c--globals--font--sizes--sm);
+  letter-spacing: var(--c--globals--font--letterspacings--sm);
 }
 
 .fs-md {
-  font-size: var(--c--theme--font--sizes--md);
-  letter-spacing: var(--c--theme--font--letterspacings--md);
+  font-size: var(--c--globals--font--sizes--md);
+  letter-spacing: var(--c--globals--font--letterspacings--md);
 }
 
 .fs-lg {
-  font-size: var(--c--theme--font--sizes--lg);
-  letter-spacing: var(--c--theme--font--letterspacings--lg);
+  font-size: var(--c--globals--font--sizes--lg);
+  letter-spacing: var(--c--globals--font--letterspacings--lg);
 }
 
 .fs-ml {
-  font-size: var(--c--theme--font--sizes--ml);
-  letter-spacing: var(--c--theme--font--letterspacings--ml);
+  font-size: var(--c--globals--font--sizes--ml);
+  letter-spacing: var(--c--globals--font--letterspacings--ml);
 }
 
 .fs-xl {
-  font-size: var(--c--theme--font--sizes--xl);
-  letter-spacing: var(--c--theme--font--letterspacings--xl);
+  font-size: var(--c--globals--font--sizes--xl);
+  letter-spacing: var(--c--globals--font--letterspacings--xl);
 }
 
 .fs-t {
-  font-size: var(--c--theme--font--sizes--t);
-  letter-spacing: var(--c--theme--font--letterspacings--t);
+  font-size: var(--c--globals--font--sizes--t);
+  letter-spacing: var(--c--globals--font--letterspacings--t);
+}
+
+.fs-s {
+  font-size: var(--c--globals--font--sizes--s);
+  letter-spacing: var(--c--globals--font--letterspacings--s);
+}
+
+.fs-h1 {
+  font-size: var(--c--globals--font--sizes--h1);
+  letter-spacing: var(--c--globals--font--letterspacings--h1);
+}
+
+.fs-h2 {
+  font-size: var(--c--globals--font--sizes--h2);
+  letter-spacing: var(--c--globals--font--letterspacings--h2);
+}
+
+.fs-h3 {
+  font-size: var(--c--globals--font--sizes--h3);
+  letter-spacing: var(--c--globals--font--letterspacings--h3);
+}
+
+.fs-h4 {
+  font-size: var(--c--globals--font--sizes--h4);
+  letter-spacing: var(--c--globals--font--letterspacings--h4);
+}
+
+.fs-h5 {
+  font-size: var(--c--globals--font--sizes--h5);
+  letter-spacing: var(--c--globals--font--letterspacings--h5);
+}
+
+.fs-h6 {
+  font-size: var(--c--globals--font--sizes--h6);
+  letter-spacing: var(--c--globals--font--letterspacings--h6);
 }
 
 .fs-xl-alt {
-  font-size: var(--c--theme--font--sizes--xl-alt);
-  letter-spacing: var(--c--theme--font--letterspacings--xl-alt);
+  font-size: var(--c--globals--font--sizes--xl-alt);
+  letter-spacing: var(--c--globals--font--letterspacings--xl-alt);
 }
 
 .fs-lg-alt {
-  font-size: var(--c--theme--font--sizes--lg-alt);
-  letter-spacing: var(--c--theme--font--letterspacings--lg-alt);
+  font-size: var(--c--globals--font--sizes--lg-alt);
+  letter-spacing: var(--c--globals--font--letterspacings--lg-alt);
 }
 
 .fs-md-alt {
-  font-size: var(--c--theme--font--sizes--md-alt);
-  letter-spacing: var(--c--theme--font--letterspacings--md-alt);
+  font-size: var(--c--globals--font--sizes--md-alt);
+  letter-spacing: var(--c--globals--font--letterspacings--md-alt);
 }
 
 .fs-sm-alt {
-  font-size: var(--c--theme--font--sizes--sm-alt);
-  letter-spacing: var(--c--theme--font--letterspacings--sm-alt);
+  font-size: var(--c--globals--font--sizes--sm-alt);
+  letter-spacing: var(--c--globals--font--letterspacings--sm-alt);
 }
 
 .fs-xs-alt {
-  font-size: var(--c--theme--font--sizes--xs-alt);
-  letter-spacing: var(--c--theme--font--letterspacings--xs-alt);
+  font-size: var(--c--globals--font--sizes--xs-alt);
+  letter-spacing: var(--c--globals--font--letterspacings--xs-alt);
 }
 
 .f-base {
-  font-family: var(--c--theme--font--families--base);
+  font-family: var(--c--globals--font--families--base);
 }
 
 .f-accent {
-  font-family: var(--c--theme--font--families--accent);
+  font-family: var(--c--globals--font--families--accent);
 }
 
 .m-0 {
-  margin: var(--c--theme--spacings--0);
+  margin: var(--c--globals--spacings--0);
 }
 
 .mb-0 {
-  margin-bottom: var(--c--theme--spacings--0);
+  margin-bottom: var(--c--globals--spacings--0);
 }
 
 .mt-0 {
-  margin-top: var(--c--theme--spacings--0);
+  margin-top: var(--c--globals--spacings--0);
 }
 
 .ml-0 {
-  margin-left: var(--c--theme--spacings--0);
+  margin-left: var(--c--globals--spacings--0);
 }
 
 .mr-0 {
-  margin-right: var(--c--theme--spacings--0);
-}
-
-.m-xl {
-  margin: var(--c--theme--spacings--xl);
-}
-
-.mb-xl {
-  margin-bottom: var(--c--theme--spacings--xl);
-}
-
-.mt-xl {
-  margin-top: var(--c--theme--spacings--xl);
-}
-
-.ml-xl {
-  margin-left: var(--c--theme--spacings--xl);
-}
-
-.mr-xl {
-  margin-right: var(--c--theme--spacings--xl);
+  margin-right: var(--c--globals--spacings--0);
 }
 
 .m-l {
-  margin: var(--c--theme--spacings--l);
+  margin: var(--c--globals--spacings--l);
 }
 
 .mb-l {
-  margin-bottom: var(--c--theme--spacings--l);
+  margin-bottom: var(--c--globals--spacings--l);
 }
 
 .mt-l {
-  margin-top: var(--c--theme--spacings--l);
+  margin-top: var(--c--globals--spacings--l);
 }
 
 .ml-l {
-  margin-left: var(--c--theme--spacings--l);
+  margin-left: var(--c--globals--spacings--l);
 }
 
 .mr-l {
-  margin-right: var(--c--theme--spacings--l);
+  margin-right: var(--c--globals--spacings--l);
 }
 
 .m-b {
-  margin: var(--c--theme--spacings--b);
+  margin: var(--c--globals--spacings--b);
 }
 
 .mb-b {
-  margin-bottom: var(--c--theme--spacings--b);
+  margin-bottom: var(--c--globals--spacings--b);
 }
 
 .mt-b {
-  margin-top: var(--c--theme--spacings--b);
+  margin-top: var(--c--globals--spacings--b);
 }
 
 .ml-b {
-  margin-left: var(--c--theme--spacings--b);
+  margin-left: var(--c--globals--spacings--b);
 }
 
 .mr-b {
-  margin-right: var(--c--theme--spacings--b);
+  margin-right: var(--c--globals--spacings--b);
+}
+
+.m-m {
+  margin: var(--c--globals--spacings--m);
+}
+
+.mb-m {
+  margin-bottom: var(--c--globals--spacings--m);
+}
+
+.mt-m {
+  margin-top: var(--c--globals--spacings--m);
+}
+
+.ml-m {
+  margin-left: var(--c--globals--spacings--m);
+}
+
+.mr-m {
+  margin-right: var(--c--globals--spacings--m);
 }
 
 .m-s {
-  margin: var(--c--theme--spacings--s);
+  margin: var(--c--globals--spacings--s);
 }
 
 .mb-s {
-  margin-bottom: var(--c--theme--spacings--s);
+  margin-bottom: var(--c--globals--spacings--s);
 }
 
 .mt-s {
-  margin-top: var(--c--theme--spacings--s);
+  margin-top: var(--c--globals--spacings--s);
 }
 
 .ml-s {
-  margin-left: var(--c--theme--spacings--s);
+  margin-left: var(--c--globals--spacings--s);
 }
 
 .mr-s {
-  margin-right: var(--c--theme--spacings--s);
+  margin-right: var(--c--globals--spacings--s);
 }
 
 .m-t {
-  margin: var(--c--theme--spacings--t);
+  margin: var(--c--globals--spacings--t);
 }
 
 .mb-t {
-  margin-bottom: var(--c--theme--spacings--t);
+  margin-bottom: var(--c--globals--spacings--t);
 }
 
 .mt-t {
-  margin-top: var(--c--theme--spacings--t);
+  margin-top: var(--c--globals--spacings--t);
 }
 
 .ml-t {
-  margin-left: var(--c--theme--spacings--t);
+  margin-left: var(--c--globals--spacings--t);
 }
 
 .mr-t {
-  margin-right: var(--c--theme--spacings--t);
+  margin-right: var(--c--globals--spacings--t);
 }
 
 .m-st {
-  margin: var(--c--theme--spacings--st);
+  margin: var(--c--globals--spacings--st);
 }
 
 .mb-st {
-  margin-bottom: var(--c--theme--spacings--st);
+  margin-bottom: var(--c--globals--spacings--st);
 }
 
 .mt-st {
-  margin-top: var(--c--theme--spacings--st);
+  margin-top: var(--c--globals--spacings--st);
 }
 
 .ml-st {
-  margin-left: var(--c--theme--spacings--st);
+  margin-left: var(--c--globals--spacings--st);
 }
 
 .mr-st {
-  margin-right: var(--c--theme--spacings--st);
-}
-
-.m-none {
-  margin: var(--c--theme--spacings--none);
-}
-
-.mb-none {
-  margin-bottom: var(--c--theme--spacings--none);
-}
-
-.mt-none {
-  margin-top: var(--c--theme--spacings--none);
-}
-
-.ml-none {
-  margin-left: var(--c--theme--spacings--none);
-}
-
-.mr-none {
-  margin-right: var(--c--theme--spacings--none);
-}
-
-.m-auto {
-  margin: var(--c--theme--spacings--auto);
-}
-
-.mb-auto {
-  margin-bottom: var(--c--theme--spacings--auto);
-}
-
-.mt-auto {
-  margin-top: var(--c--theme--spacings--auto);
-}
-
-.ml-auto {
-  margin-left: var(--c--theme--spacings--auto);
-}
-
-.mr-auto {
-  margin-right: var(--c--theme--spacings--auto);
-}
-
-.m-bx {
-  margin: var(--c--theme--spacings--bx);
-}
-
-.mb-bx {
-  margin-bottom: var(--c--theme--spacings--bx);
-}
-
-.mt-bx {
-  margin-top: var(--c--theme--spacings--bx);
-}
-
-.ml-bx {
-  margin-left: var(--c--theme--spacings--bx);
-}
-
-.mr-bx {
-  margin-right: var(--c--theme--spacings--bx);
-}
-
-.m-full {
-  margin: var(--c--theme--spacings--full);
-}
-
-.mb-full {
-  margin-bottom: var(--c--theme--spacings--full);
-}
-
-.mt-full {
-  margin-top: var(--c--theme--spacings--full);
-}
-
-.ml-full {
-  margin-left: var(--c--theme--spacings--full);
-}
-
-.mr-full {
-  margin-right: var(--c--theme--spacings--full);
+  margin-right: var(--c--globals--spacings--st);
 }
 
 .m-4xs {
-  margin: var(--c--theme--spacings--4xs);
+  margin: var(--c--globals--spacings--4xs);
 }
 
 .mb-4xs {
-  margin-bottom: var(--c--theme--spacings--4xs);
+  margin-bottom: var(--c--globals--spacings--4xs);
 }
 
 .mt-4xs {
-  margin-top: var(--c--theme--spacings--4xs);
+  margin-top: var(--c--globals--spacings--4xs);
 }
 
 .ml-4xs {
-  margin-left: var(--c--theme--spacings--4xs);
+  margin-left: var(--c--globals--spacings--4xs);
 }
 
 .mr-4xs {
-  margin-right: var(--c--theme--spacings--4xs);
+  margin-right: var(--c--globals--spacings--4xs);
 }
 
-.m-3xs {
-  margin: var(--c--theme--spacings--3xs);
+.m-xxxs {
+  margin: var(--c--globals--spacings--xxxs);
 }
 
-.mb-3xs {
-  margin-bottom: var(--c--theme--spacings--3xs);
+.mb-xxxs {
+  margin-bottom: var(--c--globals--spacings--xxxs);
 }
 
-.mt-3xs {
-  margin-top: var(--c--theme--spacings--3xs);
+.mt-xxxs {
+  margin-top: var(--c--globals--spacings--xxxs);
 }
 
-.ml-3xs {
-  margin-left: var(--c--theme--spacings--3xs);
+.ml-xxxs {
+  margin-left: var(--c--globals--spacings--xxxs);
 }
 
-.mr-3xs {
-  margin-right: var(--c--theme--spacings--3xs);
+.mr-xxxs {
+  margin-right: var(--c--globals--spacings--xxxs);
 }
 
-.m-2xs {
-  margin: var(--c--theme--spacings--2xs);
+.m-xxs {
+  margin: var(--c--globals--spacings--xxs);
 }
 
-.mb-2xs {
-  margin-bottom: var(--c--theme--spacings--2xs);
+.mb-xxs {
+  margin-bottom: var(--c--globals--spacings--xxs);
 }
 
-.mt-2xs {
-  margin-top: var(--c--theme--spacings--2xs);
+.mt-xxs {
+  margin-top: var(--c--globals--spacings--xxs);
 }
 
-.ml-2xs {
-  margin-left: var(--c--theme--spacings--2xs);
+.ml-xxs {
+  margin-left: var(--c--globals--spacings--xxs);
 }
 
-.mr-2xs {
-  margin-right: var(--c--theme--spacings--2xs);
+.mr-xxs {
+  margin-right: var(--c--globals--spacings--xxs);
 }
 
 .m-xs {
-  margin: var(--c--theme--spacings--xs);
+  margin: var(--c--globals--spacings--xs);
 }
 
 .mb-xs {
-  margin-bottom: var(--c--theme--spacings--xs);
+  margin-bottom: var(--c--globals--spacings--xs);
 }
 
 .mt-xs {
-  margin-top: var(--c--theme--spacings--xs);
+  margin-top: var(--c--globals--spacings--xs);
 }
 
 .ml-xs {
-  margin-left: var(--c--theme--spacings--xs);
+  margin-left: var(--c--globals--spacings--xs);
 }
 
 .mr-xs {
-  margin-right: var(--c--theme--spacings--xs);
+  margin-right: var(--c--globals--spacings--xs);
 }
 
 .m-sm {
-  margin: var(--c--theme--spacings--sm);
+  margin: var(--c--globals--spacings--sm);
 }
 
 .mb-sm {
-  margin-bottom: var(--c--theme--spacings--sm);
+  margin-bottom: var(--c--globals--spacings--sm);
 }
 
 .mt-sm {
-  margin-top: var(--c--theme--spacings--sm);
+  margin-top: var(--c--globals--spacings--sm);
 }
 
 .ml-sm {
-  margin-left: var(--c--theme--spacings--sm);
+  margin-left: var(--c--globals--spacings--sm);
 }
 
 .mr-sm {
-  margin-right: var(--c--theme--spacings--sm);
+  margin-right: var(--c--globals--spacings--sm);
 }
 
 .m-base {
-  margin: var(--c--theme--spacings--base);
+  margin: var(--c--globals--spacings--base);
 }
 
 .mb-base {
-  margin-bottom: var(--c--theme--spacings--base);
+  margin-bottom: var(--c--globals--spacings--base);
 }
 
 .mt-base {
-  margin-top: var(--c--theme--spacings--base);
+  margin-top: var(--c--globals--spacings--base);
 }
 
 .ml-base {
-  margin-left: var(--c--theme--spacings--base);
+  margin-left: var(--c--globals--spacings--base);
 }
 
 .mr-base {
-  margin-right: var(--c--theme--spacings--base);
+  margin-right: var(--c--globals--spacings--base);
 }
 
 .m-md {
-  margin: var(--c--theme--spacings--md);
+  margin: var(--c--globals--spacings--md);
 }
 
 .mb-md {
-  margin-bottom: var(--c--theme--spacings--md);
+  margin-bottom: var(--c--globals--spacings--md);
 }
 
 .mt-md {
-  margin-top: var(--c--theme--spacings--md);
+  margin-top: var(--c--globals--spacings--md);
 }
 
 .ml-md {
-  margin-left: var(--c--theme--spacings--md);
+  margin-left: var(--c--globals--spacings--md);
 }
 
 .mr-md {
-  margin-right: var(--c--theme--spacings--md);
+  margin-right: var(--c--globals--spacings--md);
 }
 
 .m-lg {
-  margin: var(--c--theme--spacings--lg);
+  margin: var(--c--globals--spacings--lg);
 }
 
 .mb-lg {
-  margin-bottom: var(--c--theme--spacings--lg);
+  margin-bottom: var(--c--globals--spacings--lg);
 }
 
 .mt-lg {
-  margin-top: var(--c--theme--spacings--lg);
+  margin-top: var(--c--globals--spacings--lg);
 }
 
 .ml-lg {
-  margin-left: var(--c--theme--spacings--lg);
+  margin-left: var(--c--globals--spacings--lg);
 }
 
 .mr-lg {
-  margin-right: var(--c--theme--spacings--lg);
+  margin-right: var(--c--globals--spacings--lg);
+}
+
+.m-xl {
+  margin: var(--c--globals--spacings--xl);
+}
+
+.mb-xl {
+  margin-bottom: var(--c--globals--spacings--xl);
+}
+
+.mt-xl {
+  margin-top: var(--c--globals--spacings--xl);
+}
+
+.ml-xl {
+  margin-left: var(--c--globals--spacings--xl);
+}
+
+.mr-xl {
+  margin-right: var(--c--globals--spacings--xl);
 }
 
 .m-xxl {
-  margin: var(--c--theme--spacings--xxl);
+  margin: var(--c--globals--spacings--xxl);
 }
 
 .mb-xxl {
-  margin-bottom: var(--c--theme--spacings--xxl);
+  margin-bottom: var(--c--globals--spacings--xxl);
 }
 
 .mt-xxl {
-  margin-top: var(--c--theme--spacings--xxl);
+  margin-top: var(--c--globals--spacings--xxl);
 }
 
 .ml-xxl {
-  margin-left: var(--c--theme--spacings--xxl);
+  margin-left: var(--c--globals--spacings--xxl);
 }
 
 .mr-xxl {
-  margin-right: var(--c--theme--spacings--xxl);
+  margin-right: var(--c--globals--spacings--xxl);
 }
 
 .m-xxxl {
-  margin: var(--c--theme--spacings--xxxl);
+  margin: var(--c--globals--spacings--xxxl);
 }
 
 .mb-xxxl {
-  margin-bottom: var(--c--theme--spacings--xxxl);
+  margin-bottom: var(--c--globals--spacings--xxxl);
 }
 
 .mt-xxxl {
-  margin-top: var(--c--theme--spacings--xxxl);
+  margin-top: var(--c--globals--spacings--xxxl);
 }
 
 .ml-xxxl {
-  margin-left: var(--c--theme--spacings--xxxl);
+  margin-left: var(--c--globals--spacings--xxxl);
 }
 
 .mr-xxxl {
-  margin-right: var(--c--theme--spacings--xxxl);
+  margin-right: var(--c--globals--spacings--xxxl);
 }
 
 .m-4xl {
-  margin: var(--c--theme--spacings--4xl);
+  margin: var(--c--globals--spacings--4xl);
 }
 
 .mb-4xl {
-  margin-bottom: var(--c--theme--spacings--4xl);
+  margin-bottom: var(--c--globals--spacings--4xl);
 }
 
 .mt-4xl {
-  margin-top: var(--c--theme--spacings--4xl);
+  margin-top: var(--c--globals--spacings--4xl);
 }
 
 .ml-4xl {
-  margin-left: var(--c--theme--spacings--4xl);
+  margin-left: var(--c--globals--spacings--4xl);
 }
 
 .mr-4xl {
-  margin-right: var(--c--theme--spacings--4xl);
+  margin-right: var(--c--globals--spacings--4xl);
 }
 
 .m-5xl {
-  margin: var(--c--theme--spacings--5xl);
+  margin: var(--c--globals--spacings--5xl);
 }
 
 .mb-5xl {
-  margin-bottom: var(--c--theme--spacings--5xl);
+  margin-bottom: var(--c--globals--spacings--5xl);
 }
 
 .mt-5xl {
-  margin-top: var(--c--theme--spacings--5xl);
+  margin-top: var(--c--globals--spacings--5xl);
 }
 
 .ml-5xl {
-  margin-left: var(--c--theme--spacings--5xl);
+  margin-left: var(--c--globals--spacings--5xl);
 }
 
 .mr-5xl {
-  margin-right: var(--c--theme--spacings--5xl);
+  margin-right: var(--c--globals--spacings--5xl);
 }
 
 .m-6xl {
-  margin: var(--c--theme--spacings--6xl);
+  margin: var(--c--globals--spacings--6xl);
 }
 
 .mb-6xl {
-  margin-bottom: var(--c--theme--spacings--6xl);
+  margin-bottom: var(--c--globals--spacings--6xl);
 }
 
 .mt-6xl {
-  margin-top: var(--c--theme--spacings--6xl);
+  margin-top: var(--c--globals--spacings--6xl);
 }
 
 .ml-6xl {
-  margin-left: var(--c--theme--spacings--6xl);
+  margin-left: var(--c--globals--spacings--6xl);
 }
 
 .mr-6xl {
-  margin-right: var(--c--theme--spacings--6xl);
+  margin-right: var(--c--globals--spacings--6xl);
 }
 
 .m-7xl {
-  margin: var(--c--theme--spacings--7xl);
+  margin: var(--c--globals--spacings--7xl);
 }
 
 .mb-7xl {
-  margin-bottom: var(--c--theme--spacings--7xl);
+  margin-bottom: var(--c--globals--spacings--7xl);
 }
 
 .mt-7xl {
-  margin-top: var(--c--theme--spacings--7xl);
+  margin-top: var(--c--globals--spacings--7xl);
 }
 
 .ml-7xl {
-  margin-left: var(--c--theme--spacings--7xl);
+  margin-left: var(--c--globals--spacings--7xl);
 }
 
 .mr-7xl {
-  margin-right: var(--c--theme--spacings--7xl);
+  margin-right: var(--c--globals--spacings--7xl);
+}
+
+.m-none {
+  margin: var(--c--globals--spacings--none);
+}
+
+.mb-none {
+  margin-bottom: var(--c--globals--spacings--none);
+}
+
+.mt-none {
+  margin-top: var(--c--globals--spacings--none);
+}
+
+.ml-none {
+  margin-left: var(--c--globals--spacings--none);
+}
+
+.mr-none {
+  margin-right: var(--c--globals--spacings--none);
+}
+
+.m-auto {
+  margin: var(--c--globals--spacings--auto);
+}
+
+.mb-auto {
+  margin-bottom: var(--c--globals--spacings--auto);
+}
+
+.mt-auto {
+  margin-top: var(--c--globals--spacings--auto);
+}
+
+.ml-auto {
+  margin-left: var(--c--globals--spacings--auto);
+}
+
+.mr-auto {
+  margin-right: var(--c--globals--spacings--auto);
+}
+
+.m-bx {
+  margin: var(--c--globals--spacings--bx);
+}
+
+.mb-bx {
+  margin-bottom: var(--c--globals--spacings--bx);
+}
+
+.mt-bx {
+  margin-top: var(--c--globals--spacings--bx);
+}
+
+.ml-bx {
+  margin-left: var(--c--globals--spacings--bx);
+}
+
+.mr-bx {
+  margin-right: var(--c--globals--spacings--bx);
+}
+
+.m-full {
+  margin: var(--c--globals--spacings--full);
+}
+
+.mb-full {
+  margin-bottom: var(--c--globals--spacings--full);
+}
+
+.mt-full {
+  margin-top: var(--c--globals--spacings--full);
+}
+
+.ml-full {
+  margin-left: var(--c--globals--spacings--full);
+}
+
+.mr-full {
+  margin-right: var(--c--globals--spacings--full);
+}
+
+.m-3xs {
+  margin: var(--c--globals--spacings--3xs);
+}
+
+.mb-3xs {
+  margin-bottom: var(--c--globals--spacings--3xs);
+}
+
+.mt-3xs {
+  margin-top: var(--c--globals--spacings--3xs);
+}
+
+.ml-3xs {
+  margin-left: var(--c--globals--spacings--3xs);
+}
+
+.mr-3xs {
+  margin-right: var(--c--globals--spacings--3xs);
+}
+
+.m-2xs {
+  margin: var(--c--globals--spacings--2xs);
+}
+
+.mb-2xs {
+  margin-bottom: var(--c--globals--spacings--2xs);
+}
+
+.mt-2xs {
+  margin-top: var(--c--globals--spacings--2xs);
+}
+
+.ml-2xs {
+  margin-left: var(--c--globals--spacings--2xs);
+}
+
+.mr-2xs {
+  margin-right: var(--c--globals--spacings--2xs);
 }
 
 .p-0 {
-  padding: var(--c--theme--spacings--0);
+  padding: var(--c--globals--spacings--0);
 }
 
 .pb-0 {
-  padding-bottom: var(--c--theme--spacings--0);
+  padding-bottom: var(--c--globals--spacings--0);
 }
 
 .pt-0 {
-  padding-top: var(--c--theme--spacings--0);
+  padding-top: var(--c--globals--spacings--0);
 }
 
 .pl-0 {
-  padding-left: var(--c--theme--spacings--0);
+  padding-left: var(--c--globals--spacings--0);
 }
 
 .pr-0 {
-  padding-right: var(--c--theme--spacings--0);
-}
-
-.p-xl {
-  padding: var(--c--theme--spacings--xl);
-}
-
-.pb-xl {
-  padding-bottom: var(--c--theme--spacings--xl);
-}
-
-.pt-xl {
-  padding-top: var(--c--theme--spacings--xl);
-}
-
-.pl-xl {
-  padding-left: var(--c--theme--spacings--xl);
-}
-
-.pr-xl {
-  padding-right: var(--c--theme--spacings--xl);
+  padding-right: var(--c--globals--spacings--0);
 }
 
 .p-l {
-  padding: var(--c--theme--spacings--l);
+  padding: var(--c--globals--spacings--l);
 }
 
 .pb-l {
-  padding-bottom: var(--c--theme--spacings--l);
+  padding-bottom: var(--c--globals--spacings--l);
 }
 
 .pt-l {
-  padding-top: var(--c--theme--spacings--l);
+  padding-top: var(--c--globals--spacings--l);
 }
 
 .pl-l {
-  padding-left: var(--c--theme--spacings--l);
+  padding-left: var(--c--globals--spacings--l);
 }
 
 .pr-l {
-  padding-right: var(--c--theme--spacings--l);
+  padding-right: var(--c--globals--spacings--l);
 }
 
 .p-b {
-  padding: var(--c--theme--spacings--b);
+  padding: var(--c--globals--spacings--b);
 }
 
 .pb-b {
-  padding-bottom: var(--c--theme--spacings--b);
+  padding-bottom: var(--c--globals--spacings--b);
 }
 
 .pt-b {
-  padding-top: var(--c--theme--spacings--b);
+  padding-top: var(--c--globals--spacings--b);
 }
 
 .pl-b {
-  padding-left: var(--c--theme--spacings--b);
+  padding-left: var(--c--globals--spacings--b);
 }
 
 .pr-b {
-  padding-right: var(--c--theme--spacings--b);
+  padding-right: var(--c--globals--spacings--b);
+}
+
+.p-m {
+  padding: var(--c--globals--spacings--m);
+}
+
+.pb-m {
+  padding-bottom: var(--c--globals--spacings--m);
+}
+
+.pt-m {
+  padding-top: var(--c--globals--spacings--m);
+}
+
+.pl-m {
+  padding-left: var(--c--globals--spacings--m);
+}
+
+.pr-m {
+  padding-right: var(--c--globals--spacings--m);
 }
 
 .p-s {
-  padding: var(--c--theme--spacings--s);
+  padding: var(--c--globals--spacings--s);
 }
 
 .pb-s {
-  padding-bottom: var(--c--theme--spacings--s);
+  padding-bottom: var(--c--globals--spacings--s);
 }
 
 .pt-s {
-  padding-top: var(--c--theme--spacings--s);
+  padding-top: var(--c--globals--spacings--s);
 }
 
 .pl-s {
-  padding-left: var(--c--theme--spacings--s);
+  padding-left: var(--c--globals--spacings--s);
 }
 
 .pr-s {
-  padding-right: var(--c--theme--spacings--s);
+  padding-right: var(--c--globals--spacings--s);
 }
 
 .p-t {
-  padding: var(--c--theme--spacings--t);
+  padding: var(--c--globals--spacings--t);
 }
 
 .pb-t {
-  padding-bottom: var(--c--theme--spacings--t);
+  padding-bottom: var(--c--globals--spacings--t);
 }
 
 .pt-t {
-  padding-top: var(--c--theme--spacings--t);
+  padding-top: var(--c--globals--spacings--t);
 }
 
 .pl-t {
-  padding-left: var(--c--theme--spacings--t);
+  padding-left: var(--c--globals--spacings--t);
 }
 
 .pr-t {
-  padding-right: var(--c--theme--spacings--t);
+  padding-right: var(--c--globals--spacings--t);
 }
 
 .p-st {
-  padding: var(--c--theme--spacings--st);
+  padding: var(--c--globals--spacings--st);
 }
 
 .pb-st {
-  padding-bottom: var(--c--theme--spacings--st);
+  padding-bottom: var(--c--globals--spacings--st);
 }
 
 .pt-st {
-  padding-top: var(--c--theme--spacings--st);
+  padding-top: var(--c--globals--spacings--st);
 }
 
 .pl-st {
-  padding-left: var(--c--theme--spacings--st);
+  padding-left: var(--c--globals--spacings--st);
 }
 
 .pr-st {
-  padding-right: var(--c--theme--spacings--st);
-}
-
-.p-none {
-  padding: var(--c--theme--spacings--none);
-}
-
-.pb-none {
-  padding-bottom: var(--c--theme--spacings--none);
-}
-
-.pt-none {
-  padding-top: var(--c--theme--spacings--none);
-}
-
-.pl-none {
-  padding-left: var(--c--theme--spacings--none);
-}
-
-.pr-none {
-  padding-right: var(--c--theme--spacings--none);
-}
-
-.p-auto {
-  padding: var(--c--theme--spacings--auto);
-}
-
-.pb-auto {
-  padding-bottom: var(--c--theme--spacings--auto);
-}
-
-.pt-auto {
-  padding-top: var(--c--theme--spacings--auto);
-}
-
-.pl-auto {
-  padding-left: var(--c--theme--spacings--auto);
-}
-
-.pr-auto {
-  padding-right: var(--c--theme--spacings--auto);
-}
-
-.p-bx {
-  padding: var(--c--theme--spacings--bx);
-}
-
-.pb-bx {
-  padding-bottom: var(--c--theme--spacings--bx);
-}
-
-.pt-bx {
-  padding-top: var(--c--theme--spacings--bx);
-}
-
-.pl-bx {
-  padding-left: var(--c--theme--spacings--bx);
-}
-
-.pr-bx {
-  padding-right: var(--c--theme--spacings--bx);
-}
-
-.p-full {
-  padding: var(--c--theme--spacings--full);
-}
-
-.pb-full {
-  padding-bottom: var(--c--theme--spacings--full);
-}
-
-.pt-full {
-  padding-top: var(--c--theme--spacings--full);
-}
-
-.pl-full {
-  padding-left: var(--c--theme--spacings--full);
-}
-
-.pr-full {
-  padding-right: var(--c--theme--spacings--full);
+  padding-right: var(--c--globals--spacings--st);
 }
 
 .p-4xs {
-  padding: var(--c--theme--spacings--4xs);
+  padding: var(--c--globals--spacings--4xs);
 }
 
 .pb-4xs {
-  padding-bottom: var(--c--theme--spacings--4xs);
+  padding-bottom: var(--c--globals--spacings--4xs);
 }
 
 .pt-4xs {
-  padding-top: var(--c--theme--spacings--4xs);
+  padding-top: var(--c--globals--spacings--4xs);
 }
 
 .pl-4xs {
-  padding-left: var(--c--theme--spacings--4xs);
+  padding-left: var(--c--globals--spacings--4xs);
 }
 
 .pr-4xs {
-  padding-right: var(--c--theme--spacings--4xs);
+  padding-right: var(--c--globals--spacings--4xs);
 }
 
-.p-3xs {
-  padding: var(--c--theme--spacings--3xs);
+.p-xxxs {
+  padding: var(--c--globals--spacings--xxxs);
 }
 
-.pb-3xs {
-  padding-bottom: var(--c--theme--spacings--3xs);
+.pb-xxxs {
+  padding-bottom: var(--c--globals--spacings--xxxs);
 }
 
-.pt-3xs {
-  padding-top: var(--c--theme--spacings--3xs);
+.pt-xxxs {
+  padding-top: var(--c--globals--spacings--xxxs);
 }
 
-.pl-3xs {
-  padding-left: var(--c--theme--spacings--3xs);
+.pl-xxxs {
+  padding-left: var(--c--globals--spacings--xxxs);
 }
 
-.pr-3xs {
-  padding-right: var(--c--theme--spacings--3xs);
+.pr-xxxs {
+  padding-right: var(--c--globals--spacings--xxxs);
 }
 
-.p-2xs {
-  padding: var(--c--theme--spacings--2xs);
+.p-xxs {
+  padding: var(--c--globals--spacings--xxs);
 }
 
-.pb-2xs {
-  padding-bottom: var(--c--theme--spacings--2xs);
+.pb-xxs {
+  padding-bottom: var(--c--globals--spacings--xxs);
 }
 
-.pt-2xs {
-  padding-top: var(--c--theme--spacings--2xs);
+.pt-xxs {
+  padding-top: var(--c--globals--spacings--xxs);
 }
 
-.pl-2xs {
-  padding-left: var(--c--theme--spacings--2xs);
+.pl-xxs {
+  padding-left: var(--c--globals--spacings--xxs);
 }
 
-.pr-2xs {
-  padding-right: var(--c--theme--spacings--2xs);
+.pr-xxs {
+  padding-right: var(--c--globals--spacings--xxs);
 }
 
 .p-xs {
-  padding: var(--c--theme--spacings--xs);
+  padding: var(--c--globals--spacings--xs);
 }
 
 .pb-xs {
-  padding-bottom: var(--c--theme--spacings--xs);
+  padding-bottom: var(--c--globals--spacings--xs);
 }
 
 .pt-xs {
-  padding-top: var(--c--theme--spacings--xs);
+  padding-top: var(--c--globals--spacings--xs);
 }
 
 .pl-xs {
-  padding-left: var(--c--theme--spacings--xs);
+  padding-left: var(--c--globals--spacings--xs);
 }
 
 .pr-xs {
-  padding-right: var(--c--theme--spacings--xs);
+  padding-right: var(--c--globals--spacings--xs);
 }
 
 .p-sm {
-  padding: var(--c--theme--spacings--sm);
+  padding: var(--c--globals--spacings--sm);
 }
 
 .pb-sm {
-  padding-bottom: var(--c--theme--spacings--sm);
+  padding-bottom: var(--c--globals--spacings--sm);
 }
 
 .pt-sm {
-  padding-top: var(--c--theme--spacings--sm);
+  padding-top: var(--c--globals--spacings--sm);
 }
 
 .pl-sm {
-  padding-left: var(--c--theme--spacings--sm);
+  padding-left: var(--c--globals--spacings--sm);
 }
 
 .pr-sm {
-  padding-right: var(--c--theme--spacings--sm);
+  padding-right: var(--c--globals--spacings--sm);
 }
 
 .p-base {
-  padding: var(--c--theme--spacings--base);
+  padding: var(--c--globals--spacings--base);
 }
 
 .pb-base {
-  padding-bottom: var(--c--theme--spacings--base);
+  padding-bottom: var(--c--globals--spacings--base);
 }
 
 .pt-base {
-  padding-top: var(--c--theme--spacings--base);
+  padding-top: var(--c--globals--spacings--base);
 }
 
 .pl-base {
-  padding-left: var(--c--theme--spacings--base);
+  padding-left: var(--c--globals--spacings--base);
 }
 
 .pr-base {
-  padding-right: var(--c--theme--spacings--base);
+  padding-right: var(--c--globals--spacings--base);
 }
 
 .p-md {
-  padding: var(--c--theme--spacings--md);
+  padding: var(--c--globals--spacings--md);
 }
 
 .pb-md {
-  padding-bottom: var(--c--theme--spacings--md);
+  padding-bottom: var(--c--globals--spacings--md);
 }
 
 .pt-md {
-  padding-top: var(--c--theme--spacings--md);
+  padding-top: var(--c--globals--spacings--md);
 }
 
 .pl-md {
-  padding-left: var(--c--theme--spacings--md);
+  padding-left: var(--c--globals--spacings--md);
 }
 
 .pr-md {
-  padding-right: var(--c--theme--spacings--md);
+  padding-right: var(--c--globals--spacings--md);
 }
 
 .p-lg {
-  padding: var(--c--theme--spacings--lg);
+  padding: var(--c--globals--spacings--lg);
 }
 
 .pb-lg {
-  padding-bottom: var(--c--theme--spacings--lg);
+  padding-bottom: var(--c--globals--spacings--lg);
 }
 
 .pt-lg {
-  padding-top: var(--c--theme--spacings--lg);
+  padding-top: var(--c--globals--spacings--lg);
 }
 
 .pl-lg {
-  padding-left: var(--c--theme--spacings--lg);
+  padding-left: var(--c--globals--spacings--lg);
 }
 
 .pr-lg {
-  padding-right: var(--c--theme--spacings--lg);
+  padding-right: var(--c--globals--spacings--lg);
+}
+
+.p-xl {
+  padding: var(--c--globals--spacings--xl);
+}
+
+.pb-xl {
+  padding-bottom: var(--c--globals--spacings--xl);
+}
+
+.pt-xl {
+  padding-top: var(--c--globals--spacings--xl);
+}
+
+.pl-xl {
+  padding-left: var(--c--globals--spacings--xl);
+}
+
+.pr-xl {
+  padding-right: var(--c--globals--spacings--xl);
 }
 
 .p-xxl {
-  padding: var(--c--theme--spacings--xxl);
+  padding: var(--c--globals--spacings--xxl);
 }
 
 .pb-xxl {
-  padding-bottom: var(--c--theme--spacings--xxl);
+  padding-bottom: var(--c--globals--spacings--xxl);
 }
 
 .pt-xxl {
-  padding-top: var(--c--theme--spacings--xxl);
+  padding-top: var(--c--globals--spacings--xxl);
 }
 
 .pl-xxl {
-  padding-left: var(--c--theme--spacings--xxl);
+  padding-left: var(--c--globals--spacings--xxl);
 }
 
 .pr-xxl {
-  padding-right: var(--c--theme--spacings--xxl);
+  padding-right: var(--c--globals--spacings--xxl);
 }
 
 .p-xxxl {
-  padding: var(--c--theme--spacings--xxxl);
+  padding: var(--c--globals--spacings--xxxl);
 }
 
 .pb-xxxl {
-  padding-bottom: var(--c--theme--spacings--xxxl);
+  padding-bottom: var(--c--globals--spacings--xxxl);
 }
 
 .pt-xxxl {
-  padding-top: var(--c--theme--spacings--xxxl);
+  padding-top: var(--c--globals--spacings--xxxl);
 }
 
 .pl-xxxl {
-  padding-left: var(--c--theme--spacings--xxxl);
+  padding-left: var(--c--globals--spacings--xxxl);
 }
 
 .pr-xxxl {
-  padding-right: var(--c--theme--spacings--xxxl);
+  padding-right: var(--c--globals--spacings--xxxl);
 }
 
 .p-4xl {
-  padding: var(--c--theme--spacings--4xl);
+  padding: var(--c--globals--spacings--4xl);
 }
 
 .pb-4xl {
-  padding-bottom: var(--c--theme--spacings--4xl);
+  padding-bottom: var(--c--globals--spacings--4xl);
 }
 
 .pt-4xl {
-  padding-top: var(--c--theme--spacings--4xl);
+  padding-top: var(--c--globals--spacings--4xl);
 }
 
 .pl-4xl {
-  padding-left: var(--c--theme--spacings--4xl);
+  padding-left: var(--c--globals--spacings--4xl);
 }
 
 .pr-4xl {
-  padding-right: var(--c--theme--spacings--4xl);
+  padding-right: var(--c--globals--spacings--4xl);
 }
 
 .p-5xl {
-  padding: var(--c--theme--spacings--5xl);
+  padding: var(--c--globals--spacings--5xl);
 }
 
 .pb-5xl {
-  padding-bottom: var(--c--theme--spacings--5xl);
+  padding-bottom: var(--c--globals--spacings--5xl);
 }
 
 .pt-5xl {
-  padding-top: var(--c--theme--spacings--5xl);
+  padding-top: var(--c--globals--spacings--5xl);
 }
 
 .pl-5xl {
-  padding-left: var(--c--theme--spacings--5xl);
+  padding-left: var(--c--globals--spacings--5xl);
 }
 
 .pr-5xl {
-  padding-right: var(--c--theme--spacings--5xl);
+  padding-right: var(--c--globals--spacings--5xl);
 }
 
 .p-6xl {
-  padding: var(--c--theme--spacings--6xl);
+  padding: var(--c--globals--spacings--6xl);
 }
 
 .pb-6xl {
-  padding-bottom: var(--c--theme--spacings--6xl);
+  padding-bottom: var(--c--globals--spacings--6xl);
 }
 
 .pt-6xl {
-  padding-top: var(--c--theme--spacings--6xl);
+  padding-top: var(--c--globals--spacings--6xl);
 }
 
 .pl-6xl {
-  padding-left: var(--c--theme--spacings--6xl);
+  padding-left: var(--c--globals--spacings--6xl);
 }
 
 .pr-6xl {
-  padding-right: var(--c--theme--spacings--6xl);
+  padding-right: var(--c--globals--spacings--6xl);
 }
 
 .p-7xl {
-  padding: var(--c--theme--spacings--7xl);
+  padding: var(--c--globals--spacings--7xl);
 }
 
 .pb-7xl {
-  padding-bottom: var(--c--theme--spacings--7xl);
+  padding-bottom: var(--c--globals--spacings--7xl);
 }
 
 .pt-7xl {
-  padding-top: var(--c--theme--spacings--7xl);
+  padding-top: var(--c--globals--spacings--7xl);
 }
 
 .pl-7xl {
-  padding-left: var(--c--theme--spacings--7xl);
+  padding-left: var(--c--globals--spacings--7xl);
 }
 
 .pr-7xl {
-  padding-right: var(--c--theme--spacings--7xl);
+  padding-right: var(--c--globals--spacings--7xl);
+}
+
+.p-none {
+  padding: var(--c--globals--spacings--none);
+}
+
+.pb-none {
+  padding-bottom: var(--c--globals--spacings--none);
+}
+
+.pt-none {
+  padding-top: var(--c--globals--spacings--none);
+}
+
+.pl-none {
+  padding-left: var(--c--globals--spacings--none);
+}
+
+.pr-none {
+  padding-right: var(--c--globals--spacings--none);
+}
+
+.p-auto {
+  padding: var(--c--globals--spacings--auto);
+}
+
+.pb-auto {
+  padding-bottom: var(--c--globals--spacings--auto);
+}
+
+.pt-auto {
+  padding-top: var(--c--globals--spacings--auto);
+}
+
+.pl-auto {
+  padding-left: var(--c--globals--spacings--auto);
+}
+
+.pr-auto {
+  padding-right: var(--c--globals--spacings--auto);
+}
+
+.p-bx {
+  padding: var(--c--globals--spacings--bx);
+}
+
+.pb-bx {
+  padding-bottom: var(--c--globals--spacings--bx);
+}
+
+.pt-bx {
+  padding-top: var(--c--globals--spacings--bx);
+}
+
+.pl-bx {
+  padding-left: var(--c--globals--spacings--bx);
+}
+
+.pr-bx {
+  padding-right: var(--c--globals--spacings--bx);
+}
+
+.p-full {
+  padding: var(--c--globals--spacings--full);
+}
+
+.pb-full {
+  padding-bottom: var(--c--globals--spacings--full);
+}
+
+.pt-full {
+  padding-top: var(--c--globals--spacings--full);
+}
+
+.pl-full {
+  padding-left: var(--c--globals--spacings--full);
+}
+
+.pr-full {
+  padding-right: var(--c--globals--spacings--full);
+}
+
+.p-3xs {
+  padding: var(--c--globals--spacings--3xs);
+}
+
+.pb-3xs {
+  padding-bottom: var(--c--globals--spacings--3xs);
+}
+
+.pt-3xs {
+  padding-top: var(--c--globals--spacings--3xs);
+}
+
+.pl-3xs {
+  padding-left: var(--c--globals--spacings--3xs);
+}
+
+.pr-3xs {
+  padding-right: var(--c--globals--spacings--3xs);
+}
+
+.p-2xs {
+  padding: var(--c--globals--spacings--2xs);
+}
+
+.pb-2xs {
+  padding-bottom: var(--c--globals--spacings--2xs);
+}
+
+.pt-2xs {
+  padding-top: var(--c--globals--spacings--2xs);
+}
+
+.pl-2xs {
+  padding-left: var(--c--globals--spacings--2xs);
+}
+
+.pr-2xs {
+  padding-right: var(--c--globals--spacings--2xs);
+}
+
+.border-clr-surface-primary {
+  border-color: var(--c--contextuals--border--surface--primary);
+}
+
+.border-thin-surface-primary {
+  border: 1px solid var(--c--contextuals--border--surface--primary);
+}
+
+.border-clr-semantic-brand-primary {
+  border-color: var(--c--contextuals--border--semantic--brand--primary);
+}
+
+.border-thin-semantic-brand-primary {
+  border: 1px solid var(--c--contextuals--border--semantic--brand--primary);
+}
+
+.border-clr-semantic-brand-secondary {
+  border-color: var(--c--contextuals--border--semantic--brand--secondary);
+}
+
+.border-thin-semantic-brand-secondary {
+  border: 1px solid var(--c--contextuals--border--semantic--brand--secondary);
+}
+
+.border-clr-semantic-brand-tertiary {
+  border-color: var(--c--contextuals--border--semantic--brand--tertiary);
+}
+
+.border-thin-semantic-brand-tertiary {
+  border: 1px solid var(--c--contextuals--border--semantic--brand--tertiary);
+}
+
+.border-clr-semantic-contextual-primary {
+  border-color: var(--c--contextuals--border--semantic--contextual--primary);
+}
+
+.border-thin-semantic-contextual-primary {
+  border: 1px solid var(--c--contextuals--border--semantic--contextual--primary);
+}
+
+.border-clr-semantic-neutral-primary {
+  border-color: var(--c--contextuals--border--semantic--neutral--primary);
+}
+
+.border-thin-semantic-neutral-primary {
+  border: 1px solid var(--c--contextuals--border--semantic--neutral--primary);
+}
+
+.border-clr-semantic-neutral-secondary {
+  border-color: var(--c--contextuals--border--semantic--neutral--secondary);
+}
+
+.border-thin-semantic-neutral-secondary {
+  border: 1px solid var(--c--contextuals--border--semantic--neutral--secondary);
+}
+
+.border-clr-semantic-neutral-tertiary {
+  border-color: var(--c--contextuals--border--semantic--neutral--tertiary);
+}
+
+.border-thin-semantic-neutral-tertiary {
+  border: 1px solid var(--c--contextuals--border--semantic--neutral--tertiary);
+}
+
+.border-clr-semantic-info-primary {
+  border-color: var(--c--contextuals--border--semantic--info--primary);
+}
+
+.border-thin-semantic-info-primary {
+  border: 1px solid var(--c--contextuals--border--semantic--info--primary);
+}
+
+.border-clr-semantic-info-secondary {
+  border-color: var(--c--contextuals--border--semantic--info--secondary);
+}
+
+.border-thin-semantic-info-secondary {
+  border: 1px solid var(--c--contextuals--border--semantic--info--secondary);
+}
+
+.border-clr-semantic-info-tertiary {
+  border-color: var(--c--contextuals--border--semantic--info--tertiary);
+}
+
+.border-thin-semantic-info-tertiary {
+  border: 1px solid var(--c--contextuals--border--semantic--info--tertiary);
+}
+
+.border-clr-semantic-success-primary {
+  border-color: var(--c--contextuals--border--semantic--success--primary);
+}
+
+.border-thin-semantic-success-primary {
+  border: 1px solid var(--c--contextuals--border--semantic--success--primary);
+}
+
+.border-clr-semantic-success-secondary {
+  border-color: var(--c--contextuals--border--semantic--success--secondary);
+}
+
+.border-thin-semantic-success-secondary {
+  border: 1px solid var(--c--contextuals--border--semantic--success--secondary);
+}
+
+.border-clr-semantic-success-tertiary {
+  border-color: var(--c--contextuals--border--semantic--success--tertiary);
+}
+
+.border-thin-semantic-success-tertiary {
+  border: 1px solid var(--c--contextuals--border--semantic--success--tertiary);
+}
+
+.border-clr-semantic-warning-primary {
+  border-color: var(--c--contextuals--border--semantic--warning--primary);
+}
+
+.border-thin-semantic-warning-primary {
+  border: 1px solid var(--c--contextuals--border--semantic--warning--primary);
+}
+
+.border-clr-semantic-warning-secondary {
+  border-color: var(--c--contextuals--border--semantic--warning--secondary);
+}
+
+.border-thin-semantic-warning-secondary {
+  border: 1px solid var(--c--contextuals--border--semantic--warning--secondary);
+}
+
+.border-clr-semantic-warning-tertiary {
+  border-color: var(--c--contextuals--border--semantic--warning--tertiary);
+}
+
+.border-thin-semantic-warning-tertiary {
+  border: 1px solid var(--c--contextuals--border--semantic--warning--tertiary);
+}
+
+.border-clr-semantic-error-primary {
+  border-color: var(--c--contextuals--border--semantic--error--primary);
+}
+
+.border-thin-semantic-error-primary {
+  border: 1px solid var(--c--contextuals--border--semantic--error--primary);
+}
+
+.border-clr-semantic-error-secondary {
+  border-color: var(--c--contextuals--border--semantic--error--secondary);
+}
+
+.border-thin-semantic-error-secondary {
+  border: 1px solid var(--c--contextuals--border--semantic--error--secondary);
+}
+
+.border-clr-semantic-error-tertiary {
+  border-color: var(--c--contextuals--border--semantic--error--tertiary);
+}
+
+.border-thin-semantic-error-tertiary {
+  border: 1px solid var(--c--contextuals--border--semantic--error--tertiary);
+}
+
+.border-clr-semantic-disabled-primary {
+  border-color: var(--c--contextuals--border--semantic--disabled--primary);
+}
+
+.border-thin-semantic-disabled-primary {
+  border: 1px solid var(--c--contextuals--border--semantic--disabled--primary);
+}
+
+.border-clr-palette-brand-primary {
+  border-color: var(--c--contextuals--border--palette--brand--primary);
+}
+
+.border-thin-palette-brand-primary {
+  border: 1px solid var(--c--contextuals--border--palette--brand--primary);
+}
+
+.border-clr-palette-brand-secondary {
+  border-color: var(--c--contextuals--border--palette--brand--secondary);
+}
+
+.border-thin-palette-brand-secondary {
+  border: 1px solid var(--c--contextuals--border--palette--brand--secondary);
+}
+
+.border-clr-palette-brand-tertiary {
+  border-color: var(--c--contextuals--border--palette--brand--tertiary);
+}
+
+.border-thin-palette-brand-tertiary {
+  border: 1px solid var(--c--contextuals--border--palette--brand--tertiary);
+}
+
+.border-clr-palette-red-primary {
+  border-color: var(--c--contextuals--border--palette--red--primary);
+}
+
+.border-thin-palette-red-primary {
+  border: 1px solid var(--c--contextuals--border--palette--red--primary);
+}
+
+.border-clr-palette-red-secondary {
+  border-color: var(--c--contextuals--border--palette--red--secondary);
+}
+
+.border-thin-palette-red-secondary {
+  border: 1px solid var(--c--contextuals--border--palette--red--secondary);
+}
+
+.border-clr-palette-red-tertiary {
+  border-color: var(--c--contextuals--border--palette--red--tertiary);
+}
+
+.border-thin-palette-red-tertiary {
+  border: 1px solid var(--c--contextuals--border--palette--red--tertiary);
+}
+
+.border-clr-palette-orange-primary {
+  border-color: var(--c--contextuals--border--palette--orange--primary);
+}
+
+.border-thin-palette-orange-primary {
+  border: 1px solid var(--c--contextuals--border--palette--orange--primary);
+}
+
+.border-clr-palette-orange-secondary {
+  border-color: var(--c--contextuals--border--palette--orange--secondary);
+}
+
+.border-thin-palette-orange-secondary {
+  border: 1px solid var(--c--contextuals--border--palette--orange--secondary);
+}
+
+.border-clr-palette-orange-tertiary {
+  border-color: var(--c--contextuals--border--palette--orange--tertiary);
+}
+
+.border-thin-palette-orange-tertiary {
+  border: 1px solid var(--c--contextuals--border--palette--orange--tertiary);
+}
+
+.border-clr-palette-brown-primary {
+  border-color: var(--c--contextuals--border--palette--brown--primary);
+}
+
+.border-thin-palette-brown-primary {
+  border: 1px solid var(--c--contextuals--border--palette--brown--primary);
+}
+
+.border-clr-palette-brown-secondary {
+  border-color: var(--c--contextuals--border--palette--brown--secondary);
+}
+
+.border-thin-palette-brown-secondary {
+  border: 1px solid var(--c--contextuals--border--palette--brown--secondary);
+}
+
+.border-clr-palette-brown-tertiary {
+  border-color: var(--c--contextuals--border--palette--brown--tertiary);
+}
+
+.border-thin-palette-brown-tertiary {
+  border: 1px solid var(--c--contextuals--border--palette--brown--tertiary);
+}
+
+.border-clr-palette-yellow-primary {
+  border-color: var(--c--contextuals--border--palette--yellow--primary);
+}
+
+.border-thin-palette-yellow-primary {
+  border: 1px solid var(--c--contextuals--border--palette--yellow--primary);
+}
+
+.border-clr-palette-yellow-secondary {
+  border-color: var(--c--contextuals--border--palette--yellow--secondary);
+}
+
+.border-thin-palette-yellow-secondary {
+  border: 1px solid var(--c--contextuals--border--palette--yellow--secondary);
+}
+
+.border-clr-palette-yellow-tertiary {
+  border-color: var(--c--contextuals--border--palette--yellow--tertiary);
+}
+
+.border-thin-palette-yellow-tertiary {
+  border: 1px solid var(--c--contextuals--border--palette--yellow--tertiary);
+}
+
+.border-clr-palette-green-primary {
+  border-color: var(--c--contextuals--border--palette--green--primary);
+}
+
+.border-thin-palette-green-primary {
+  border: 1px solid var(--c--contextuals--border--palette--green--primary);
+}
+
+.border-clr-palette-green-secondary {
+  border-color: var(--c--contextuals--border--palette--green--secondary);
+}
+
+.border-thin-palette-green-secondary {
+  border: 1px solid var(--c--contextuals--border--palette--green--secondary);
+}
+
+.border-clr-palette-green-tertiary {
+  border-color: var(--c--contextuals--border--palette--green--tertiary);
+}
+
+.border-thin-palette-green-tertiary {
+  border: 1px solid var(--c--contextuals--border--palette--green--tertiary);
+}
+
+.border-clr-palette-blue-1-primary {
+  border-color: var(--c--contextuals--border--palette--blue-1--primary);
+}
+
+.border-thin-palette-blue-1-primary {
+  border: 1px solid var(--c--contextuals--border--palette--blue-1--primary);
+}
+
+.border-clr-palette-blue-1-secondary {
+  border-color: var(--c--contextuals--border--palette--blue-1--secondary);
+}
+
+.border-thin-palette-blue-1-secondary {
+  border: 1px solid var(--c--contextuals--border--palette--blue-1--secondary);
+}
+
+.border-clr-palette-blue-1-tertiary {
+  border-color: var(--c--contextuals--border--palette--blue-1--tertiary);
+}
+
+.border-thin-palette-blue-1-tertiary {
+  border: 1px solid var(--c--contextuals--border--palette--blue-1--tertiary);
+}
+
+.border-clr-palette-blue-2-primary {
+  border-color: var(--c--contextuals--border--palette--blue-2--primary);
+}
+
+.border-thin-palette-blue-2-primary {
+  border: 1px solid var(--c--contextuals--border--palette--blue-2--primary);
+}
+
+.border-clr-palette-blue-2-secondary {
+  border-color: var(--c--contextuals--border--palette--blue-2--secondary);
+}
+
+.border-thin-palette-blue-2-secondary {
+  border: 1px solid var(--c--contextuals--border--palette--blue-2--secondary);
+}
+
+.border-clr-palette-blue-2-tertiary {
+  border-color: var(--c--contextuals--border--palette--blue-2--tertiary);
+}
+
+.border-thin-palette-blue-2-tertiary {
+  border: 1px solid var(--c--contextuals--border--palette--blue-2--tertiary);
+}
+
+.border-clr-palette-purple-primary {
+  border-color: var(--c--contextuals--border--palette--purple--primary);
+}
+
+.border-thin-palette-purple-primary {
+  border: 1px solid var(--c--contextuals--border--palette--purple--primary);
+}
+
+.border-clr-palette-purple-secondary {
+  border-color: var(--c--contextuals--border--palette--purple--secondary);
+}
+
+.border-thin-palette-purple-secondary {
+  border: 1px solid var(--c--contextuals--border--palette--purple--secondary);
+}
+
+.border-clr-palette-purple-tertiary {
+  border-color: var(--c--contextuals--border--palette--purple--tertiary);
+}
+
+.border-thin-palette-purple-tertiary {
+  border: 1px solid var(--c--contextuals--border--palette--purple--tertiary);
+}
+
+.border-clr-palette-pink-primary {
+  border-color: var(--c--contextuals--border--palette--pink--primary);
+}
+
+.border-thin-palette-pink-primary {
+  border: 1px solid var(--c--contextuals--border--palette--pink--primary);
+}
+
+.border-clr-palette-pink-secondary {
+  border-color: var(--c--contextuals--border--palette--pink--secondary);
+}
+
+.border-thin-palette-pink-secondary {
+  border: 1px solid var(--c--contextuals--border--palette--pink--secondary);
+}
+
+.border-clr-palette-pink-tertiary {
+  border-color: var(--c--contextuals--border--palette--pink--tertiary);
+}
+
+.border-thin-palette-pink-tertiary {
+  border: 1px solid var(--c--contextuals--border--palette--pink--tertiary);
+}
+
+.border-clr-palette-gray-primary {
+  border-color: var(--c--contextuals--border--palette--gray--primary);
+}
+
+.border-thin-palette-gray-primary {
+  border: 1px solid var(--c--contextuals--border--palette--gray--primary);
+}
+
+.border-clr-palette-gray-secondary {
+  border-color: var(--c--contextuals--border--palette--gray--secondary);
+}
+
+.border-thin-palette-gray-secondary {
+  border: 1px solid var(--c--contextuals--border--palette--gray--secondary);
+}
+
+.border-clr-palette-gray-tertiary {
+  border-color: var(--c--contextuals--border--palette--gray--tertiary);
+}
+
+.border-thin-palette-gray-tertiary {
+  border: 1px solid var(--c--contextuals--border--palette--gray--tertiary);
+}
+
+.clr-content-logo1 {
+  color: var(--c--contextuals--content--logo1);
+}
+
+.clr-content-logo2 {
+  color: var(--c--contextuals--content--logo2);
+}
+
+.clr-content-semantic-brand-primary {
+  color: var(--c--contextuals--content--semantic--brand--primary);
+}
+
+.clr-content-semantic-brand-secondary {
+  color: var(--c--contextuals--content--semantic--brand--secondary);
+}
+
+.clr-content-semantic-brand-tertiary {
+  color: var(--c--contextuals--content--semantic--brand--tertiary);
+}
+
+.clr-content-semantic-brand-on-brand {
+  color: var(--c--contextuals--content--semantic--brand--on-brand);
+}
+
+.clr-content-semantic-neutral-primary {
+  color: var(--c--contextuals--content--semantic--neutral--primary);
+}
+
+.clr-content-semantic-neutral-secondary {
+  color: var(--c--contextuals--content--semantic--neutral--secondary);
+}
+
+.clr-content-semantic-neutral-tertiary {
+  color: var(--c--contextuals--content--semantic--neutral--tertiary);
+}
+
+.clr-content-semantic-neutral-on-neutral {
+  color: var(--c--contextuals--content--semantic--neutral--on-neutral);
+}
+
+.clr-content-semantic-contextual-primary {
+  color: var(--c--contextuals--content--semantic--contextual--primary);
+}
+
+.clr-content-semantic-info-primary {
+  color: var(--c--contextuals--content--semantic--info--primary);
+}
+
+.clr-content-semantic-info-secondary {
+  color: var(--c--contextuals--content--semantic--info--secondary);
+}
+
+.clr-content-semantic-info-tertiary {
+  color: var(--c--contextuals--content--semantic--info--tertiary);
+}
+
+.clr-content-semantic-info-on-info {
+  color: var(--c--contextuals--content--semantic--info--on-info);
+}
+
+.clr-content-semantic-success-primary {
+  color: var(--c--contextuals--content--semantic--success--primary);
+}
+
+.clr-content-semantic-success-secondary {
+  color: var(--c--contextuals--content--semantic--success--secondary);
+}
+
+.clr-content-semantic-success-tertiary {
+  color: var(--c--contextuals--content--semantic--success--tertiary);
+}
+
+.clr-content-semantic-success-on-success {
+  color: var(--c--contextuals--content--semantic--success--on-success);
+}
+
+.clr-content-semantic-warning-primary {
+  color: var(--c--contextuals--content--semantic--warning--primary);
+}
+
+.clr-content-semantic-warning-secondary {
+  color: var(--c--contextuals--content--semantic--warning--secondary);
+}
+
+.clr-content-semantic-warning-tertiary {
+  color: var(--c--contextuals--content--semantic--warning--tertiary);
+}
+
+.clr-content-semantic-warning-on-warning {
+  color: var(--c--contextuals--content--semantic--warning--on-warning);
+}
+
+.clr-content-semantic-error-primary {
+  color: var(--c--contextuals--content--semantic--error--primary);
+}
+
+.clr-content-semantic-error-secondary {
+  color: var(--c--contextuals--content--semantic--error--secondary);
+}
+
+.clr-content-semantic-error-tertiary {
+  color: var(--c--contextuals--content--semantic--error--tertiary);
+}
+
+.clr-content-semantic-error-on-error {
+  color: var(--c--contextuals--content--semantic--error--on-error);
+}
+
+.clr-content-semantic-disabled-primary {
+  color: var(--c--contextuals--content--semantic--disabled--primary);
+}
+
+.clr-content-semantic-disabled-secondary {
+  color: var(--c--contextuals--content--semantic--disabled--secondary);
+}
+
+.clr-content-palette-brand-primary {
+  color: var(--c--contextuals--content--palette--brand--primary);
+}
+
+.clr-content-palette-brand-secondary {
+  color: var(--c--contextuals--content--palette--brand--secondary);
+}
+
+.clr-content-palette-brand-tertiary {
+  color: var(--c--contextuals--content--palette--brand--tertiary);
+}
+
+.clr-content-palette-red-primary {
+  color: var(--c--contextuals--content--palette--red--primary);
+}
+
+.clr-content-palette-red-secondary {
+  color: var(--c--contextuals--content--palette--red--secondary);
+}
+
+.clr-content-palette-red-tertiary {
+  color: var(--c--contextuals--content--palette--red--tertiary);
+}
+
+.clr-content-palette-orange-primary {
+  color: var(--c--contextuals--content--palette--orange--primary);
+}
+
+.clr-content-palette-orange-secondary {
+  color: var(--c--contextuals--content--palette--orange--secondary);
+}
+
+.clr-content-palette-orange-tertiary {
+  color: var(--c--contextuals--content--palette--orange--tertiary);
+}
+
+.clr-content-palette-brown-primary {
+  color: var(--c--contextuals--content--palette--brown--primary);
+}
+
+.clr-content-palette-brown-secondary {
+  color: var(--c--contextuals--content--palette--brown--secondary);
+}
+
+.clr-content-palette-brown-tertiary {
+  color: var(--c--contextuals--content--palette--brown--tertiary);
+}
+
+.clr-content-palette-yellow-primary {
+  color: var(--c--contextuals--content--palette--yellow--primary);
+}
+
+.clr-content-palette-yellow-secondary {
+  color: var(--c--contextuals--content--palette--yellow--secondary);
+}
+
+.clr-content-palette-yellow-tertiary {
+  color: var(--c--contextuals--content--palette--yellow--tertiary);
+}
+
+.clr-content-palette-green-primary {
+  color: var(--c--contextuals--content--palette--green--primary);
+}
+
+.clr-content-palette-green-secondary {
+  color: var(--c--contextuals--content--palette--green--secondary);
+}
+
+.clr-content-palette-green-tertiary {
+  color: var(--c--contextuals--content--palette--green--tertiary);
+}
+
+.clr-content-palette-blue-1-primary {
+  color: var(--c--contextuals--content--palette--blue-1--primary);
+}
+
+.clr-content-palette-blue-1-secondary {
+  color: var(--c--contextuals--content--palette--blue-1--secondary);
+}
+
+.clr-content-palette-blue-1-tertiary {
+  color: var(--c--contextuals--content--palette--blue-1--tertiary);
+}
+
+.clr-content-palette-blue-2-primary {
+  color: var(--c--contextuals--content--palette--blue-2--primary);
+}
+
+.clr-content-palette-blue-2-secondary {
+  color: var(--c--contextuals--content--palette--blue-2--secondary);
+}
+
+.clr-content-palette-blue-2-tertiary {
+  color: var(--c--contextuals--content--palette--blue-2--tertiary);
+}
+
+.clr-content-palette-purple-primary {
+  color: var(--c--contextuals--content--palette--purple--primary);
+}
+
+.clr-content-palette-purple-secondary {
+  color: var(--c--contextuals--content--palette--purple--secondary);
+}
+
+.clr-content-palette-purple-tertiary {
+  color: var(--c--contextuals--content--palette--purple--tertiary);
+}
+
+.clr-content-palette-pink-primary {
+  color: var(--c--contextuals--content--palette--pink--primary);
+}
+
+.clr-content-palette-pink-secondary {
+  color: var(--c--contextuals--content--palette--pink--secondary);
+}
+
+.clr-content-palette-pink-tertiary {
+  color: var(--c--contextuals--content--palette--pink--tertiary);
+}
+
+.clr-content-palette-gray-primary {
+  color: var(--c--contextuals--content--palette--gray--primary);
+}
+
+.clr-content-palette-gray-secondary {
+  color: var(--c--contextuals--content--palette--gray--secondary);
+}
+
+.clr-content-palette-gray-tertiary {
+  color: var(--c--contextuals--content--palette--gray--tertiary);
 }
diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts
index 6261deb3..57d10a41 100644
--- a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts
+++ b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts
@@ -1,136 +1,387 @@
 export const tokens = {
   themes: {
     default: {
-      theme: {
+      globals: {
         colors: {
-          'secondary-text': '#fff',
-          'secondary-100': '#fee9ea',
-          'secondary-200': '#fedfdf',
-          'secondary-300': '#fdbfbf',
-          'secondary-400': '#e1020f',
-          'secondary-500': '#c91a1f',
-          'secondary-600': '#5e2b2b',
-          'secondary-700': '#3b2424',
-          'secondary-800': '#341f1f',
-          'secondary-900': '#2b1919',
-          'info-text': '#0078f3',
-          'info-100': '#E8EDFF',
-          'info-200': '#DDE5FF',
-          'info-300': '#BCCDFF',
-          'info-400': '#518FFF',
-          'info-500': '#0078F3',
-          'info-600': '#0063CB',
-          'info-700': '#273961',
-          'info-800': '#222A3F',
-          'info-900': '#1D2437',
-          'greyscale-100': '#eee',
-          'greyscale-200': '#E5E5E5',
-          'greyscale-300': '#CECECE',
-          'greyscale-400': '#929292',
-          'greyscale-500': '#7C7C7C',
-          'greyscale-600': '#666666',
-          'greyscale-700': '#3A3A3A',
-          'greyscale-800': '#2A2A2A',
-          'greyscale-900': '#242424',
-          'greyscale-000': '#fff',
-          'primary-100': '#ECECFE',
-          'primary-200': '#E3E3FD',
-          'primary-300': '#CACAFB',
-          'primary-400': '#8585F6',
-          'primary-500': '#6A6AF4',
-          'primary-600': '#313178',
-          'primary-700': '#272747',
-          'primary-800': '#000091',
-          'primary-900': '#21213F',
-          'success-100': '#dffee6',
-          'success-200': '#b8fec9',
-          'success-300': '#88fdaa',
-          'success-400': '#3bea7e',
-          'success-500': '#1f8d49',
-          'success-600': '#18753c',
-          'success-700': '#204129',
-          'success-800': '#1e2e22',
-          'success-900': '#19281d',
-          'warning-100': '#fff4f3',
-          'warning-200': '#ffe9e6',
-          'warning-300': '#ffded9',
-          'warning-400': '#ffbeb4',
-          'warning-500': '#d64d00',
-          'warning-600': '#b34000',
-          'warning-700': '#5e2c21',
-          'warning-800': '#3e241e',
-          'warning-900': '#361e19',
-          'danger-100': '#FFE9E9',
-          'danger-200': '#FFDDDD',
-          'danger-300': '#FFBDBD',
-          'danger-400': '#FF5655',
-          'danger-500': '#F60700',
-          'danger-600': '#CE0500',
-          'danger-700': '#642626',
-          'danger-800': '#412121',
-          'danger-900': '#391C1C',
-          'primary-text': '#000091',
-          'success-text': '#1f8d49',
-          'warning-text': '#d64d00',
-          'danger-text': '#FFF',
-          'primary-050': '#F5F5FE',
-          'primary-150': '#F4F4FD',
-          'greyscale-text': '#303C4B',
-          'greyscale-050': '#F6F6F6',
-          'greyscale-250': '#ddd',
-          'greyscale-350': '#ddd',
-          'greyscale-750': '#353535',
-          'greyscale-950': '#1E1E1E',
-          'greyscale-1000': '#161616',
-          'danger-050': '#FFF4F4',
-          'blue-500': '#417DC4',
-          'brown-500': '#BD987A',
-          'cyan-500': '#009099',
-          'gold-500': '#C3992A',
-          'green-500': '#00A95F',
-          'olive-500': '#68A532',
-          'orange-500': '#E4794A',
-          'purple-500': '#A558A0',
-          'red-500': '#E1000F',
-          'yellow-500': '#B7A73F',
-          'rose-500': '#E18B76',
-          'primary-action': '#1212FF',
-          'primary-bg': '#FAFAFA',
-          'primary-focus': '#0A76F6',
-          'secondary-icon': 'var(--c--theme--colors--primary-text)',
-          'blue-400': '#7AB1E8',
-          'blue-600': '#3558A2',
-          'brown-400': '#E6BE92',
-          'brown-600': '#745B47',
-          'cyan-400': '#34BAB5',
-          'cyan-600': '#006A6F',
-          'gold-400': '#FFCA00',
-          'gold-600': '#695240',
-          'green-400': '#34CB6A',
-          'green-600': '#297254',
-          'olive-400': '#99C221',
-          'olive-600': '#447049',
-          'orange-400': '#FF732C',
-          'orange-600': '#755348',
-          'pink-400': '#FFB7AE',
-          'pink-500': '#E18B76',
-          'pink-600': '#8D533E',
-          'purple-400': '#CE70CC',
-          'purple-600': '#6E445A',
-          'yellow-400': '#D8C634',
-          'yellow-600': '#66673D',
+          'logo-1': '#2845C1',
+          'logo-2': '#377FDB',
+          'logo-1-dark': '#95ABFF',
+          'logo-2-dark': '#95ABFF',
+          'brand-050': '#EDF0FF',
+          'brand-100': '#DAE2FF',
+          'brand-150': '#C8D3FF',
+          'brand-200': '#B5C4FF',
+          'brand-250': '#A2B6FF',
+          'brand-300': '#90A7FF',
+          'brand-350': '#7E98FF',
+          'brand-400': '#6C89FE',
+          'brand-450': '#5C7AF7',
+          'brand-500': '#4C6CEF',
+          'brand-550': '#3E5DE7',
+          'brand-600': '#304DDF',
+          'brand-650': '#2845C1',
+          'brand-700': '#223E9E',
+          'brand-750': '#1F367D',
+          'brand-800': '#1B2E5F',
+          'brand-850': '#172446',
+          'brand-900': '#121B30',
+          'brand-950': '#0C111A',
+          'gray-000': '#FFFFFF',
+          'gray-025': '#F6F8F9',
+          'gray-050': '#EEF1F4',
+          'gray-100': '#DFE2EA',
+          'gray-150': '#CFD5DE',
+          'gray-200': '#C1C7D3',
+          'gray-250': '#B2B9C7',
+          'gray-300': '#A4ABBC',
+          'gray-350': '#969EB0',
+          'gray-400': '#8891A4',
+          'gray-450': '#7B8498',
+          'gray-500': '#6D778C',
+          'gray-550': '#626A80',
+          'gray-600': '#555E74',
+          'gray-650': '#4A5267',
+          'gray-700': '#3F4759',
+          'gray-750': '#363B4C',
+          'gray-800': '#2B303D',
+          'gray-850': '#222631',
+          'gray-900': '#181B24',
+          'gray-950': '#0F1117',
+          'gray-1000': '#000000',
+          'info-050': '#E7F2FF',
+          'info-100': '#CFE5FF',
+          'info-150': '#B7D7FF',
+          'info-200': '#A0CAFE',
+          'info-250': '#8CBCF9',
+          'info-300': '#77AEF4',
+          'info-350': '#63A0EE',
+          'info-400': '#5092E7',
+          'info-450': '#4185DC',
+          'info-500': '#3677CC',
+          'info-550': '#2F6ABB',
+          'info-600': '#265EAA',
+          'info-650': '#28528F',
+          'info-700': '#274775',
+          'info-750': '#243C5E',
+          'info-800': '#20314A',
+          'info-850': '#1B2637',
+          'info-900': '#141C27',
+          'info-950': '#0D1118',
+          'success-050': '#DEF7E6',
+          'success-100': '#BAEECF',
+          'success-150': '#A5E2C0',
+          'success-200': '#95D4B3',
+          'success-250': '#85C6A7',
+          'success-300': '#74B99B',
+          'success-350': '#65AB8F',
+          'success-400': '#579E84',
+          'success-450': '#4B9079',
+          'success-500': '#40836F',
+          'success-550': '#367664',
+          'success-600': '#2B695A',
+          'success-650': '#2C5A50',
+          'success-700': '#2A4D45',
+          'success-750': '#26403C',
+          'success-800': '#213430',
+          'success-850': '#1B2826',
+          'success-900': '#151D1C',
+          'success-950': '#0D1212',
+          'warning-050': '#FFEEDF',
+          'warning-100': '#FFDCBE',
+          'warning-150': '#FFCA9C',
+          'warning-200': '#FFB778',
+          'warning-250': '#FDA54F',
+          'warning-300': '#F59425',
+          'warning-350': '#E78613',
+          'warning-400': '#D7790C',
+          'warning-450': '#C86C08',
+          'warning-500': '#B85F03',
+          'warning-550': '#A75400',
+          'warning-600': '#984800',
+          'warning-650': '#814112',
+          'warning-700': '#6C3A19',
+          'warning-750': '#58321C',
+          'warning-800': '#452A1A',
+          'warning-850': '#352117',
+          'warning-900': '#261813',
+          'warning-950': '#170F0C',
+          'error-050': '#FFEDEB',
+          'error-100': '#FFDAD7',
+          'error-150': '#FFC7C2',
+          'error-200': '#FFB3AD',
+          'error-250': '#FF9F99',
+          'error-300': '#FF8984',
+          'error-350': '#FF706E',
+          'error-400': '#FB5759',
+          'error-450': '#F63A45',
+          'error-500': '#E32C39',
+          'error-550': '#CF202D',
+          'error-600': '#BD0F23',
+          'error-650': '#9D2227',
+          'error-700': '#812727',
+          'error-750': '#672624',
+          'error-800': '#512220',
+          'error-850': '#3D1C1B',
+          'error-900': '#2A1614',
+          'error-950': '#190E0D',
+          'red-050': '#FFEDEB',
+          'red-100': '#FFDAD7',
+          'red-150': '#FFC7C2',
+          'red-200': '#FFB3AD',
+          'red-250': '#FF9F99',
+          'red-300': '#FF8984',
+          'red-350': '#FF706E',
+          'red-400': '#FB5759',
+          'red-450': '#F63A45',
+          'red-500': '#E32C39',
+          'red-550': '#CF202D',
+          'red-600': '#BD0F23',
+          'red-650': '#9D2227',
+          'red-700': '#812727',
+          'red-750': '#672624',
+          'red-800': '#512220',
+          'red-850': '#3D1C1B',
+          'red-900': '#2A1614',
+          'red-950': '#190E0D',
+          'orange-050': '#FCEDEB',
+          'orange-100': '#F8DCD7',
+          'orange-150': '#F1CCC5',
+          'orange-200': '#EABCB4',
+          'orange-250': '#E2ACA2',
+          'orange-300': '#DA9C92',
+          'orange-350': '#D28C81',
+          'orange-400': '#CA7C70',
+          'orange-450': '#BE6E62',
+          'orange-500': '#AE6257',
+          'orange-550': '#9E564D',
+          'orange-600': '#8F4B42',
+          'orange-650': '#79443D',
+          'orange-700': '#643C37',
+          'orange-750': '#513430',
+          'orange-800': '#412B28',
+          'orange-850': '#312220',
+          'orange-900': '#231918',
+          'orange-950': '#150F0F',
+          'brown-050': '#F9EFEA',
+          'brown-100': '#F3DFD3',
+          'brown-150': '#EACFC1',
+          'brown-200': '#E2BFAE',
+          'brown-250': '#D8B19C',
+          'brown-300': '#D0A189',
+          'brown-350': '#C3937B',
+          'brown-400': '#B5866D',
+          'brown-450': '#A77A62',
+          'brown-500': '#996D57',
+          'brown-550': '#8B614D',
+          'brown-600': '#7C5542',
+          'brown-650': '#6A4C3C',
+          'brown-700': '#594236',
+          'brown-750': '#49382F',
+          'brown-800': '#3B2E28',
+          'brown-850': '#2D2420',
+          'brown-900': '#201A18',
+          'brown-950': '#13100F',
+          'yellow-050': '#FDF1C5',
+          'yellow-100': '#FBE18E',
+          'yellow-150': '#F4D261',
+          'yellow-200': '#EAC244',
+          'yellow-250': '#DFB41B',
+          'yellow-300': '#D1A516',
+          'yellow-350': '#C49711',
+          'yellow-400': '#B78A0C',
+          'yellow-450': '#A87D07',
+          'yellow-500': '#9B6F02',
+          'yellow-550': '#8D6300',
+          'yellow-600': '#7F5600',
+          'yellow-650': '#6E4C11',
+          'yellow-700': '#5D4219',
+          'yellow-750': '#4D371B',
+          'yellow-800': '#3D2E1A',
+          'yellow-850': '#2F2417',
+          'yellow-900': '#221A12',
+          'yellow-950': '#14100C',
+          'green-050': '#E7F9B3',
+          'green-100': '#D5EC98',
+          'green-150': '#C5DE86',
+          'green-200': '#B5D174',
+          'green-250': '#A5C464',
+          'green-300': '#95B755',
+          'green-350': '#85AA45',
+          'green-400': '#769D39',
+          'green-450': '#688F30',
+          'green-500': '#5A8228',
+          'green-550': '#4D7621',
+          'green-600': '#416919',
+          'green-650': '#3A5B20',
+          'green-700': '#324E22',
+          'green-750': '#2C4122',
+          'green-800': '#24351D',
+          'green-850': '#1D2919',
+          'green-900': '#161E13',
+          'green-950': '#0E120C',
+          'blue-1-050': '#EBF1FF',
+          'blue-1-100': '#D6E3FE',
+          'blue-1-150': '#C2D5FE',
+          'blue-1-200': '#ADC7FE',
+          'blue-1-250': '#99B8FD',
+          'blue-1-300': '#84AAFD',
+          'blue-1-350': '#6F9BFD',
+          'blue-1-400': '#5A8DFB',
+          'blue-1-450': '#437DFC',
+          'blue-1-500': '#3D71E4',
+          'blue-1-550': '#3665CC',
+          'blue-1-600': '#305AB5',
+          'blue-1-650': '#315093',
+          'blue-1-700': '#2E4675',
+          'blue-1-750': '#293B5E',
+          'blue-1-800': '#243048',
+          'blue-1-850': '#1E2635',
+          'blue-1-900': '#171C25',
+          'blue-1-950': '#0E1116',
+          'blue-2-050': '#E2F4F9',
+          'blue-2-100': '#C5E9F3',
+          'blue-2-150': '#A7DDED',
+          'blue-2-200': '#88D1E6',
+          'blue-2-250': '#68C5E0',
+          'blue-2-300': '#48B8D9',
+          'blue-2-350': '#3BAACA',
+          'blue-2-400': '#359CB9',
+          'blue-2-450': '#318EA9',
+          'blue-2-500': '#2C8199',
+          'blue-2-550': '#277389',
+          'blue-2-600': '#236679',
+          'blue-2-650': '#2A5866',
+          'blue-2-700': '#2A4B55',
+          'blue-2-750': '#283F47',
+          'blue-2-800': '#233337',
+          'blue-2-850': '#1D272A',
+          'blue-2-900': '#161C1E',
+          'blue-2-950': '#0E1112',
+          'purple-050': '#F5EEFF',
+          'purple-100': '#ECDCFF',
+          'purple-150': '#E2CBFF',
+          'purple-200': '#D9B9FF',
+          'purple-250': '#D0A7FF',
+          'purple-300': '#C894FE',
+          'purple-350': '#BE83FA',
+          'purple-400': '#B570F5',
+          'purple-450': '#AB5EF0',
+          'purple-500': '#A04BE8',
+          'purple-550': '#933CDB',
+          'purple-600': '#8530C8',
+          'purple-650': '#7033A5',
+          'purple-700': '#5D3185',
+          'purple-750': '#4C2C6A',
+          'purple-800': '#3C2652',
+          'purple-850': '#2D203C',
+          'purple-900': '#21182A',
+          'purple-950': '#130F19',
+          'pink-050': '#FFEBF6',
+          'pink-100': '#FFD8ED',
+          'pink-150': '#FCC4E3',
+          'pink-200': '#F7B2D9',
+          'pink-250': '#F29FCE',
+          'pink-300': '#ED8CC3',
+          'pink-350': '#E779B8',
+          'pink-400': '#E264AD',
+          'pink-450': '#D2579E',
+          'pink-500': '#C24B8E',
+          'pink-550': '#B0417F',
+          'pink-600': '#9F3670',
+          'pink-650': '#873560',
+          'pink-700': '#6F3250',
+          'pink-750': '#5A2C43',
+          'pink-800': '#472635',
+          'pink-850': '#351F29',
+          'pink-900': '#26171D',
+          'pink-950': '#170F12',
+          'black-000': '#00000000',
+          'black-050': '#0000000D',
+          'black-100': '#0000001A',
+          'black-150': '#00000026',
+          'black-200': '#00000033',
+          'black-250': '#00000040',
+          'black-300': '#0000004D',
+          'black-350': '#00000059',
+          'black-400': '#00000066',
+          'black-450': '#00000073',
+          'black-500': '#00000080',
+          'black-550': '#0000008C',
+          'black-600': '#00000099',
+          'black-650': '#000000A6',
+          'black-700': '#000000B3',
+          'black-750': '#000000BF',
+          'black-800': '#000000CC',
+          'black-850': '#000000D9',
+          'black-900': '#000000E6',
+          'black-950': '#000000F2',
+          'white-000': '#FFFFFF',
+          'white-050': '#FFFFFF0D',
+          'white-100': '#FFFFFF1A',
+          'white-150': '#FFFFFF26',
+          'white-200': '#FFFFFF33',
+          'white-250': '#FFFFFF40',
+          'white-300': '#FFFFFF4D',
+          'white-350': '#FFFFFF59',
+          'white-400': '#FFFFFF66',
+          'white-450': '#FFFFFF73',
+          'white-500': '#FFFFFF80',
+          'white-550': '#FFFFFF8C',
+          'white-600': '#FFFFFF99',
+          'white-650': '#FFFFFFA6',
+          'white-700': '#FFFFFFB3',
+          'white-750': '#FFFFFFBF',
+          'white-800': '#FFFFFFCC',
+          'white-850': '#FFFFFFD9',
+          'white-900': '#FFFFFFE6',
+          'white-950': '#FFFFFFF2',
+          'blue1-050': '#E7F2FF',
+          'blue1-100': '#CFE5FF',
+          'blue1-150': '#B7D7FF',
+          'blue1-200': '#A0CAFE',
+          'blue1-250': '#8CBCF9',
+          'blue1-300': '#77AEF4',
+          'blue1-350': '#63A0EE',
+          'blue1-400': '#5092E7',
+          'blue1-450': '#4185DC',
+          'blue1-500': '#3677CC',
+          'blue1-550': '#2F6ABB',
+          'blue1-600': '#265EAA',
+          'blue1-650': '#28528F',
+          'blue1-700': '#274775',
+          'blue1-750': '#243C5E',
+          'blue1-800': '#20314A',
+          'blue1-850': '#1B2637',
+          'blue1-900': '#141C27',
+          'blue1-950': '#0D1118',
+          'blue2-050': '#E2F4FD',
+          'blue2-100': '#C4E8F8',
+          'blue2-150': '#AADCF2',
+          'blue2-200': '#93CFEB',
+          'blue2-250': '#7CC2E2',
+          'blue2-300': '#6CB4D6',
+          'blue2-350': '#5CA7C9',
+          'blue2-400': '#5099BC',
+          'blue2-450': '#458BAE',
+          'blue2-500': '#3A7EA0',
+          'blue2-550': '#327191',
+          'blue2-600': '#286483',
+          'blue2-650': '#2B5770',
+          'blue2-700': '#294A5E',
+          'blue2-750': '#263E4D',
+          'blue2-800': '#22323D',
+          'blue2-850': '#1C272E',
+          'blue2-900': '#151D21',
+          'blue2-950': '#0E1114',
+        },
+        transitions: {
+          'ease-in': 'cubic-bezier(0.32, 0, 0.67, 0)',
+          'ease-out': 'cubic-bezier(0.33, 1, 0.68, 1)',
+          'ease-in-out': 'cubic-bezier(0.65, 0, 0.35, 1)',
+          duration: '250ms',
         },
         font: {
           sizes: {
-            h1: '2rem',
-            h2: '1.75rem',
-            h3: '1.5rem',
-            h4: '1.375rem',
-            h5: '1.25rem',
-            h6: '1.125rem',
-            l: '1rem',
-            m: '0.8125rem',
-            s: '0.75rem',
             xs: '0.75rem',
             sm: '0.875rem',
             md: '1rem',
@@ -138,6 +389,13 @@ export const tokens = {
             ml: '0.938rem',
             xl: '1.25rem',
             t: '0.6875rem',
+            s: '0.75rem',
+            h1: '2rem',
+            h2: '1.75rem',
+            h3: '1.5rem',
+            h4: '1.375rem',
+            h5: '1.25rem',
+            h6: '1.125rem',
             'xl-alt': '5rem',
             'lg-alt': '4.5rem',
             'md-alt': '4rem',
@@ -154,50 +412,36 @@ export const tokens = {
             black: 900,
           },
           families: { base: 'sans-serif', accent: 'sans-serif' },
-          letterSpacings: {
-            h1: 'normal',
-            h2: 'normal',
-            h3: 'normal',
-            h4: 'normal',
-            h5: '1px',
-            h6: 'normal',
-            l: 'normal',
-            m: 'normal',
-            s: 'normal',
-          },
         },
         spacings: {
           '0': '0',
-          xl: '2.5rem',
           l: '3rem',
           b: '1.625rem',
+          m: '0.8125rem',
           s: '1rem',
           t: '0.5rem',
           st: '0.25rem',
-          none: '0',
-          auto: 'auto',
-          bx: '2.2rem',
-          full: '100%',
           '4xs': '0.125rem',
-          '3xs': '0.25rem',
-          '2xs': '0.375rem',
+          xxxs: '0.25rem',
+          xxs: '0.375rem',
           xs: '0.5rem',
           sm: '0.75rem',
           base: '1rem',
           md: '1.5rem',
           lg: '2rem',
+          xl: '2.5rem',
           xxl: '3rem',
           xxxl: '3.5rem',
           '4xl': '4rem',
           '5xl': '4.5rem',
           '6xl': '6rem',
           '7xl': '7.5rem',
-        },
-        transitions: {
-          'ease-in': 'cubic-bezier(0.32, 0, 0.67, 0)',
-          'ease-out': 'cubic-bezier(0.33, 1, 0.68, 1)',
-          'ease-in-out': 'cubic-bezier(0.65, 0, 0.35, 1)',
-          duration: '250ms',
+          none: '0',
+          auto: 'auto',
+          bx: '2.2rem',
+          full: '100%',
+          '3xs': '0.25rem',
+          '2xs': '0.375rem',
         },
         breakpoints: {
           xs: '480px',
@@ -210,232 +454,1085 @@ export const tokens = {
           mobile: '768px',
           tablet: '1024px',
         },
-        logo: { src: '', alt: '', widthHeader: '', widthFooter: '' },
+      },
+      contextuals: {
+        background: {
+          surface: {
+            primary: '#FFFFFF',
+            secondary: '#FFFFFF',
+            tertiary: '#F6F8F9',
+          },
+          semantic: {
+            brand: {
+              primary: '#3E5DE7',
+              'primary-hover': '#2845C1',
+              secondary: '#DAE2FF',
+              'secondary-hover': '#C8D3FF',
+              tertiary: '#EDF0FF',
+              'tertiary-hover': '#DAE2FF',
+            },
+            neutral: {
+              primary: '#626A80',
+              'primary-hover': '#4A5267',
+              secondary: '#DFE2EA',
+              'secondary-hover': '#CFD5DE',
+              tertiary: '#EEF1F4',
+              'tertiary-hover': '#DFE2EA',
+            },
+            contextual: { primary: '#0000000D', 'primary-hover': '#0000001A' },
+            info: {
+              primary: '#2F6ABB',
+              'primary-hover': '#28528F',
+              secondary: '#CFE5FF',
+              'secondary-hover': '#B7D7FF',
+              tertiary: '#E7F2FF',
+              'tertiary-hover': '#CFE5FF',
+            },
+            success: {
+              primary: '#367664',
+              'primary-hover': '#2C5A50',
+              secondary: '#BAEECF',
+              'secondary-hover': '#A5E2C0',
+              tertiary: '#DEF7E6',
+              'tertiary-hover': '#BAEECF',
+            },
+            warning: {
+              primary: '#A75400',
+              'primary-hover': '#814112',
+              secondary: '#FFDCBE',
+              'secondary-hover': '#FFCA9C',
+              tertiary: '#FFEEDF',
+              'tertiary-hover': '#FFDCBE',
+            },
+            error: {
+              primary: '#CF202D',
+              'primary-hover': '#9D2227',
+              secondary: '#FFDAD7',
+              'secondary-hover': '#FFC7C2',
+              tertiary: '#FFEDEB',
+              'tertiary-hover': '#FFDAD7',
+            },
+            disabled: { primary: '#DFE2EA', secondary: '#EEF1F4' },
+          },
+          palette: {
+            brand: {
+              primary: '#4C6CEF',
+              secondary: '#7E98FF',
+              tertiary: '#C8D3FF',
+            },
+            red: {
+              primary: '#E32C39',
+              secondary: '#FF706E',
+              tertiary: '#FFC7C2',
+            },
+            orange: {
+              primary: '#AE6257',
+              secondary: '#D28C81',
+              tertiary: '#F1CCC5',
+            },
+            brown: {
+              primary: '#996D57',
+              secondary: '#C3937B',
+              tertiary: '#EACFC1',
+            },
+            yellow: {
+              primary: '#9B6F02',
+              secondary: '#C49711',
+              tertiary: '#F4D261',
+            },
+            green: {
+              primary: '#5A8228',
+              secondary: '#85AA45',
+              tertiary: '#C5DE86',
+            },
+            'blue-1': {
+              primary: '#3D71E4',
+              secondary: '#6F9BFD',
+              tertiary: '#C2D5FE',
+            },
+            'blue-2': {
+              primary: '#2C8199',
+              secondary: '#3BAACA',
+              tertiary: '#A7DDED',
+            },
+            purple: {
+              primary: '#A04BE8',
+              secondary: '#BE83FA',
+              tertiary: '#E2CBFF',
+            },
+            pink: {
+              primary: '#C24B8E',
+              secondary: '#E779B8',
+              tertiary: '#FCC4E3',
+            },
+            gray: {
+              primary: '#6D778C',
+              secondary: '#969EB0',
+              tertiary: '#CFD5DE',
+            },
+          },
+          text: { primary: '#0000000D' },
+        },
+        content: {
+          logo1: '#2845C1',
+          logo2: '#377FDB',
+          semantic: {
+            brand: {
+              primary: '#223E9E',
+              secondary: '#304DDF',
+              tertiary: '#4C6CEF',
+              'on-brand': '#EDF0FF',
+            },
+            neutral: {
+              primary: '#222631',
+              secondary: '#555E74',
+              tertiary: '#6D778C',
+              'on-neutral': '#EEF1F4',
+            },
+            contextual: { primary: '#FFFFFFF2' },
+            info: {
+              primary: '#274775',
+              secondary: '#265EAA',
+              tertiary: '#3677CC',
+              'on-info': '#E7F2FF',
+            },
+            success: {
+              primary: '#2A4D45',
+              secondary: '#2B695A',
+              tertiary: '#40836F',
+              'on-success': '#DEF7E6',
+            },
+            warning: {
+              primary: '#6C3A19',
+              secondary: '#984800',
+              tertiary: '#B85F03',
+              'on-warning': '#FFEEDF',
+            },
+            error: {
+              primary: '#812727',
+              secondary: '#BD0F23',
+              tertiary: '#E32C39',
+              'on-error': '#FFEDEB',
+            },
+            disabled: { primary: '#A4ABBC', secondary: '#FFFFFF80' },
+          },
+          palette: {
+            brand: {
+              primary: '#4C6CEF',
+              secondary: '#7E98FF',
+              tertiary: '#C8D3FF',
+            },
+            red: {
+              primary: '#E32C39',
+              secondary: '#FF706E',
+              tertiary: '#FFC7C2',
+            },
+            orange: {
+              primary: '#AE6257',
+              secondary: '#D28C81',
+              tertiary: '#F1CCC5',
+            },
+            brown: {
+              primary: '#996D57',
+              secondary: '#C3937B',
+              tertiary: '#EACFC1',
+            },
+            yellow: {
+              primary: '#9B6F02',
+              secondary: '#C49711',
+              tertiary: '#F4D261',
+            },
+            green: {
+              primary: '#5A8228',
+              secondary: '#85AA45',
+              tertiary: '#C5DE86',
+            },
+            'blue-1': {
+              primary: '#3D71E4',
+              secondary: '#6F9BFD',
+              tertiary: '#C2D5FE',
+            },
+            'blue-2': {
+              primary: '#2C8199',
+              secondary: '#3BAACA',
+              tertiary: '#A7DDED',
+            },
+            purple: {
+              primary: '#A04BE8',
+              secondary: '#BE83FA',
+              tertiary: '#E2CBFF',
+            },
+            pink: {
+              primary: '#C24B8E',
+              secondary: '#E779B8',
+              tertiary: '#FCC4E3',
+            },
+            gray: {
+              primary: '#6D778C',
+              secondary: '#969EB0',
+              tertiary: '#CFD5DE',
+            },
+          },
+        },
+        border: {
+          surface: { primary: '#DFE2EA' },
+          semantic: {
+            brand: {
+              primary: '#3E5DE7',
+              secondary: '#90A7FF',
+              tertiary: '#C8D3FF',
+            },
+            contextual: { primary: '#FFFFFF33' },
+            neutral: {
+              primary: '#626A80',
+              secondary: '#A4ABBC',
+              tertiary: '#CFD5DE',
+            },
+            info: {
+              primary: '#2F6ABB',
+              secondary: '#77AEF4',
+              tertiary: '#B7D7FF',
+            },
+            success: {
+              primary: '#367664',
+              secondary: '#74B99B',
+              tertiary: '#A5E2C0',
+            },
+            warning: {
+              primary: '#A75400',
+              secondary: '#F59425',
+              tertiary: '#FFCA9C',
+            },
+            error: {
+              primary: '#CF202D',
+              secondary: '#FF8984',
+              tertiary: '#FFC7C2',
+            },
+            disabled: { primary: '#DFE2EA' },
+          },
+          palette: {
+            brand: {
+              primary: '#4C6CEF',
+              secondary: '#7E98FF',
+              tertiary: '#C8D3FF',
+            },
+            red: {
+              primary: '#E32C39',
+              secondary: '#FF706E',
+              tertiary: '#FFC7C2',
+            },
+            orange: {
+              primary: '#AE6257',
+              secondary: '#D28C81',
+              tertiary: '#F1CCC5',
+            },
+            brown: {
+              primary: '#996D57',
+              secondary: '#C3937B',
+              tertiary: '#EACFC1',
+            },
+            yellow: {
+              primary: '#9B6F02',
+              secondary: '#C49711',
+              tertiary: '#F4D261',
+            },
+            green: {
+              primary: '#5A8228',
+              secondary: '#85AA45',
+              tertiary: '#C5DE86',
+            },
+            'blue-1': {
+              primary: '#3D71E4',
+              secondary: '#6F9BFD',
+              tertiary: '#C2D5FE',
+            },
+            'blue-2': {
+              primary: '#2C8199',
+              secondary: '#3BAACA',
+              tertiary: '#A7DDED',
+            },
+            purple: {
+              primary: '#A04BE8',
+              secondary: '#BE83FA',
+              tertiary: '#E2CBFF',
+            },
+            pink: {
+              primary: '#C24B8E',
+              secondary: '#E779B8',
+              tertiary: '#FCC4E3',
+            },
+            gray: {
+              primary: '#6D778C',
+              secondary: '#969EB0',
+              tertiary: '#CFD5DE',
+            },
+          },
+        },
       },
       components: {
         modal: { 'width-small': '342px' },
-        tooltip: { padding: '4px 8px', 'background-color': '#161616' },
+        tooltip: { padding: '4px 8px', 'background-color': '#EEF1F4' },
         button: {
           'medium-height': '40px',
           'medium-text-height': '40px',
           'border-radius': '4px',
-          'small-height': '26px',
-          primary: {
-            'background--color': '#000091',
-            'background--color-hover': '#1212ff',
-            'background--color-active': '#2323ff',
-            'background--color-disabled': '#eee',
-            color: '#fff',
-            'color-hover': '#fff',
-            'color-active': '#fff',
-            'color-focus-visible': '#fff',
-            disabled: 'var(--c--theme--colors--greyscale-400)',
-            'background--disabled': 'var(--c--theme--colors--greyscale-100)',
-          },
-          'primary-text': {
-            'background--color': '#000091',
-            'background--color-hover': '#eee',
-            'background--color-active': '#ECECFE',
-            'background--color-focus-visible': '#fff',
-            'background--color-disabled': '#fff',
-            color: '#000091',
-            'color-hover': '#000091',
-            disabled: '#929292',
-          },
-          secondary: {
-            'background--color-hover': '#F6F6F6',
-            'background--color-active': '#EDEDED',
-            'background--color-focus-visible': '#fff',
-            'background--disabled': '#fff',
-            color: '#000091',
-            'border--color': '#CECECE',
-            'border--color-hover': '#CECECE',
-            'border--color-disabled': '#CECECE',
-            disabled: '#929292',
-          },
-          tertiary: {
-            'background--color': '#ECECFE',
-            'background--color-focus-visible': '#ECECFE',
-            'background--color-hover': '#CACAFB',
-            'background--color-active': '#CACAFB',
-            'background--disabled': '#F5F5FE',
-            color: '#000091',
-            disabled: '#CACAFB',
-          },
-          'tertiary-text': {
-            'background--color-hover': '#eee',
-            'color-hover': '#000091',
-            color: '#313178',
-            disabled: '#CACAFB',
-          },
-          danger: {
-            'color-hover': 'white',
-            'background--color': '#CE0500',
-            'background--color-hover': '#FF2725',
-            'background--color-focus-visible': '#CE0500',
-            'background--color-disabled': '#eee',
-            'color-disabled': '#929292',
-          },
+          'border-radius--active': '4px',
+          'border-radius--focus': '4px',
         },
         datagrid: {
-          'header--color': '#666666',
+          'header--color': '#222631',
           'header--size': '12px',
           'header--weight': '500',
-          'body--background-color-hover': '#eee',
-        },
-        'forms-checkbox': {
-          'border-radius': '4px',
-          'border-color': '#000091',
-          'background-color--hover': '#eee',
-          'border--color-disabled': '#E5E5E5',
-          'border--color': '#000091',
-          'background--disabled': '#E5E5E5',
-          'background--enable': '#000091',
-          'check--disabled': '#CECECE',
-          'check--enable': '#fff',
-          color: '#000091',
-          'label--color': '#161616',
-          'label--size': '0.875rem',
-          'label--weight': '500',
-          'text--color': '#666666',
-          'text--size': '0.75rem',
-          'text--weight': '400',
-          'text--color-disabled': '#CECECE',
-        },
-        'forms-labelledbox': {
-          'label-color--small': '#1E1E1E',
-          'label-color--small--disabled': '#CECECE',
-          'label-color--big': '#1E1E1E',
-          'label-color--big--disabled': '#CECECE',
-        },
-        'forms-radio': {
-          'border-color': '#000091',
-          'background-color': '#fff',
-          'accent-color': '#000091',
-          'accent-color-disabled': '#CECECE',
-        },
-        'forms-switch': {
-          'border--color-disabled': '#CECECE',
-          'border--color': '#000091',
-          'handle-background-color': 'white',
-          'handle-background-color--disabled': '#fff',
-          'rail-background-color--disabled': '#fff',
-          'accent-color': '#000091',
-        },
-        'forms-textarea': {
-          'label-color--focus': '#161616',
-          'border-radius': '4px',
-          'border-color': '#929292',
-          'box-shadow--color--hover': '#929292',
-          'box-shadow--color--focus': '#000091',
-          'value-color': '#1E1E1E',
-          'value-color--disabled': '#CECECE',
-          'font-size': '14px',
-        },
-        'forms-input': {
-          'label-color--focus': '#161616',
-          'border-radius': '4px',
-          'border-color': '#929292',
-          'box-shadow--color--hover': '#929292',
-          'box-shadow--color--focus': '#000091',
-          'value-color': '#1E1E1E',
-          'value-color--disabled': '#CECECE',
-          'font-size': '14px',
-        },
-        'forms-select': {
-          'label-color--focus': '#161616',
-          'item-font-size': '14px',
-          'border-radius': '4px',
-          'border-radius-hover': '4px',
-          'border-color': '#929292',
-          'box-shadow--color--hover': '#929292',
-          'box-shadow--color--focus': '#000091',
-          'value-color': '#1E1E1E',
-          'font-size': '14px',
+          'body--background-color-hover': '#EEF1F4',
         },
+        'forms-checkbox': { 'font-size': '0.875rem' },
         badge: {
           'font-size': '0.75rem',
-          'border-radius': '4px',
+          'border-radius': '12px',
           'padding-inline': '0.5rem',
           'padding-block': '0.375rem',
-          accent: { 'background-color': '#ECECFE', color: '#313178' },
-          neutral: { 'background-color': '#eee', color: '#666666' },
-          danger: { 'background-color': '#FFE9E9', color: '#CE0500' },
-          success: { 'background-color': '#dffee6', color: '#18753c' },
-          warning: { 'background-color': '#fff4f3', color: '#b34000' },
-          info: { 'background-color': '#E8EDFF', color: '#0063CB' },
+          accent: { 'background-color': '#DAE2FF', color: '#304DDF' },
+          neutral: { 'background-color': '#DFE2EA', color: '#555E74' },
+          danger: { 'background-color': '#FFDAD7', color: '#BD0F23' },
+          success: { 'background-color': '#BAEECF', color: '#2B695A' },
+          warning: { 'background-color': '#FFDCBE', color: '#984800' },
+          info: { 'background-color': '#CFE5FF', color: '#265EAA' },
         },
+        logo: { src: '', alt: '', widthHeader: '', widthFooter: '' },
         'la-gaufre': false,
         'home-proconnect': false,
-        'image-system-filter': '',
         favicon: {
-          ico: '/assets/favicon-light.ico',
           'png-light': '/assets/favicon-light.png',
           'png-dark': '/assets/favicon-dark.png',
         },
       },
     },
     dark: {
-      theme: {
+      globals: {
         colors: {
-          'greyscale-100': '#182536',
-          'greyscale-200': '#303C4B',
-          'greyscale-300': '#555F6B',
-          'greyscale-400': '#79818A',
-          'greyscale-500': '#9EA3AA',
-          'greyscale-600': '#C2C6CA',
-          'greyscale-700': '#E7E8EA',
-          'greyscale-800': '#F3F4F4',
-          'greyscale-900': '#FAFAFB',
-          'greyscale-000': '#0C1A2B',
-          'primary-100': '#3B4C62',
-          'primary-200': '#4D6481',
-          'primary-300': '#6381A6',
-          'primary-400': '#7FA5D5',
-          'primary-500': '#8CB5EA',
-          'primary-600': '#A3C4EE',
-          'primary-700': '#C3D8F4',
-          'primary-800': '#DDE9F8',
-          'primary-900': '#F4F8FD',
-          'success-100': '#EEF8D7',
-          'success-200': '#D9F1B2',
-          'success-300': '#BDE985',
-          'success-400': '#A0E25D',
-          'success-500': '#76D628',
-          'success-600': '#5BB520',
-          'success-700': '#43941A',
-          'success-800': '#307414',
-          'success-900': '#225D10',
-          'warning-100': '#F7F3D5',
-          'warning-200': '#F0E5AA',
-          'warning-300': '#E8D680',
-          'warning-400': '#E3C95F',
-          'warning-500': '#D9B32B',
-          'warning-600': '#BD9721',
-          'warning-700': '#9D7B1C',
-          'warning-800': '#7E6016',
-          'warning-900': '#684D12',
-          'danger-100': '#F8D0D0',
-          'danger-200': '#F09898',
-          'danger-300': '#F09898',
-          'danger-400': '#ED8585',
-          'danger-500': '#E96666',
-          'danger-600': '#DD6666',
-          'danger-700': '#C36666',
-          'danger-800': '#AE6666',
-          'danger-900': '#9D6666',
+          'logo-1': '#377FDB',
+          'logo-2': '#377FDB',
+          'logo-1-dark': '#95ABFF',
+          'logo-2-dark': '#95ABFF',
+          'brand-050': '#EAF1FB',
+          'brand-100': '#D5E4F7',
+          'brand-150': '#C0D6F4',
+          'brand-200': '#ABC9F0',
+          'brand-250': '#96BCEC',
+          'brand-300': '#80AEE8',
+          'brand-350': '#6CA0E4',
+          'brand-400': '#5693E0',
+          'brand-450': '#4085DC',
+          'brand-500': '#2976D8',
+          'brand-550': '#1167D4',
+          'brand-600': '#0659C5',
+          'brand-650': '#1A509F',
+          'brand-700': '#20467F',
+          'brand-750': '#203C63',
+          'brand-800': '#1D314C',
+          'brand-850': '#1A2638',
+          'brand-900': '#141C28',
+          'brand-950': '#0C1117',
+          'gray-000': '#FFFFFF',
+          'gray-025': '#F7F8F8',
+          'gray-050': '#F0F1F2',
+          'gray-100': '#E1E2E5',
+          'gray-150': '#D2D4D8',
+          'gray-200': '#C4C7CB',
+          'gray-250': '#B5B9BE',
+          'gray-300': '#A7ACB2',
+          'gray-350': '#999EA5',
+          'gray-400': '#8D9197',
+          'gray-450': '#80848A',
+          'gray-500': '#74777C',
+          'gray-550': '#686B6F',
+          'gray-600': '#5C5F63',
+          'gray-650': '#505356',
+          'gray-700': '#45474A',
+          'gray-750': '#3A3B3E',
+          'gray-800': '#2F3033',
+          'gray-850': '#252627',
+          'gray-900': '#1B1C1D',
+          'gray-950': '#101112',
+          'gray-1000': '#000000',
+          'info-050': '#EAF1FB',
+          'info-100': '#D5E4F7',
+          'info-150': '#C0D6F4',
+          'info-200': '#ABC9F0',
+          'info-250': '#96BCEC',
+          'info-300': '#80AEE8',
+          'info-350': '#6CA0E4',
+          'info-400': '#5693E0',
+          'info-450': '#4085DC',
+          'info-500': '#2976D8',
+          'info-550': '#1167D4',
+          'info-600': '#0659C5',
+          'info-650': '#1A509F',
+          'info-700': '#20467F',
+          'info-750': '#203C63',
+          'info-800': '#1D314C',
+          'info-850': '#1A2638',
+          'info-900': '#141C28',
+          'info-950': '#0C1117',
+          'success-050': '#E4F7D4',
+          'success-100': '#C8EEA8',
+          'success-150': '#AAE579',
+          'success-200': '#89DC45',
+          'success-250': '#72CF27',
+          'success-300': '#6AC024',
+          'success-350': '#61B121',
+          'success-400': '#59A21E',
+          'success-450': '#51941C',
+          'success-500': '#4B851A',
+          'success-550': '#427816',
+          'success-600': '#3A6A14',
+          'success-650': '#385C1F',
+          'success-700': '#344D24',
+          'success-750': '#2E4022',
+          'success-800': '#27341F',
+          'success-850': '#20281A',
+          'success-900': '#181D15',
+          'success-950': '#10120E',
+          'warning-050': '#FFF1BD',
+          'warning-100': '#FFE176',
+          'warning-150': '#FFCF25',
+          'warning-200': '#F4BF06',
+          'warning-250': '#E3B205',
+          'warning-300': '#D3A504',
+          'warning-350': '#C29805',
+          'warning-400': '#B28C03',
+          'warning-450': '#A27F03',
+          'warning-500': '#937303',
+          'warning-550': '#836703',
+          'warning-600': '#745B03',
+          'warning-650': '#625019',
+          'warning-700': '#524620',
+          'warning-750': '#443B20',
+          'warning-800': '#36301D',
+          'warning-850': '#2A2619',
+          'warning-900': '#1E1C13',
+          'warning-950': '#12110C',
+          'error-050': '#FCEDED',
+          'error-100': '#FADBDB',
+          'error-150': '#F7C9C9',
+          'error-200': '#F5B7B7',
+          'error-250': '#F2A4A4',
+          'error-300': '#EF9191',
+          'error-350': '#EC7D7D',
+          'error-400': '#E96868',
+          'error-450': '#E55050',
+          'error-500': '#E13131',
+          'error-550': '#D80000',
+          'error-600': '#C00101',
+          'error-650': '#9E2219',
+          'error-700': '#802820',
+          'error-750': '#662820',
+          'error-800': '#4F231E',
+          'error-850': '#3B1D19',
+          'error-900': '#2A1614',
+          'error-950': '#1A0E0C',
+          'red-050': '#FDEDED',
+          'red-100': '#FADBDB',
+          'red-150': '#F8C9C9',
+          'red-200': '#F5B7B6',
+          'red-250': '#F3A4A3',
+          'red-300': '#F09190',
+          'red-350': '#EE7C7B',
+          'red-400': '#EB6665',
+          'red-450': '#E74E4D',
+          'red-500': '#D83F3D',
+          'red-550': '#C23837',
+          'red-600': '#AC3231',
+          'red-650': '#8D3531',
+          'red-700': '#73332F',
+          'red-750': '#5B2F2B',
+          'red-800': '#472826',
+          'red-850': '#35211F',
+          'red-900': '#251817',
+          'red-950': '#160F0E',
+          'orange-050': '#FDEEE2',
+          'orange-100': '#FCDDC5',
+          'orange-150': '#FACBA8',
+          'orange-200': '#F8B98B',
+          'orange-250': '#F6A76A',
+          'orange-300': '#F4934B',
+          'orange-350': '#F27E27',
+          'orange-400': '#E76E12',
+          'orange-450': '#D26411',
+          'orange-500': '#BE5B0F',
+          'orange-550': '#AA510E',
+          'orange-600': '#97480C',
+          'orange-650': '#7E431D',
+          'orange-700': '#673C22',
+          'orange-750': '#533422',
+          'orange-800': '#412C1F',
+          'orange-850': '#31231B',
+          'orange-900': '#221A14',
+          'orange-950': '#15100C',
+          'brown-050': '#F3F0EF',
+          'brown-100': '#E7E1DF',
+          'brown-150': '#DCD2CF',
+          'brown-200': '#D0C4BF',
+          'brown-250': '#C5B6B0',
+          'brown-300': '#BAA7A1',
+          'brown-350': '#AF9992',
+          'brown-400': '#A48B83',
+          'brown-450': '#997E74',
+          'brown-500': '#8F7065',
+          'brown-550': '#846357',
+          'brown-600': '#7A5649',
+          'brown-650': '#684C42',
+          'brown-700': '#57423C',
+          'brown-750': '#463833',
+          'brown-800': '#382E2A',
+          'brown-850': '#2B2422',
+          'brown-900': '#1F1B19',
+          'brown-950': '#121010',
+          'yellow-050': '#FAF0D3',
+          'yellow-100': '#F5E2A4',
+          'yellow-150': '#F0D275',
+          'yellow-200': '#EBC242',
+          'yellow-250': '#E4B213',
+          'yellow-300': '#D4A511',
+          'yellow-350': '#C39810',
+          'yellow-400': '#B38B0F',
+          'yellow-450': '#A37F0D',
+          'yellow-500': '#93730C',
+          'yellow-550': '#84670B',
+          'yellow-600': '#755B0A',
+          'yellow-650': '#63501C',
+          'yellow-700': '#534521',
+          'yellow-750': '#443A21',
+          'yellow-800': '#36301F',
+          'yellow-850': '#29261A',
+          'yellow-900': '#1D1C14',
+          'yellow-950': '#12110C',
+          'green-050': '#E2F6E5',
+          'green-100': '#C5ECCA',
+          'green-150': '#A7E3AF',
+          'green-200': '#89D894',
+          'green-250': '#67CE75',
+          'green-300': '#4DC25D',
+          'green-350': '#48B257',
+          'green-400': '#41A44F',
+          'green-450': '#3B9548',
+          'green-500': '#368741',
+          'green-550': '#30793A',
+          'green-600': '#2B6B33',
+          'green-650': '#2F5C34',
+          'green-700': '#2E4E31',
+          'green-750': '#2A412C',
+          'green-800': '#253426',
+          'green-850': '#1E281F',
+          'green-900': '#171D17',
+          'green-950': '#0F120F',
+          'blue-1-050': '#EBF1FF',
+          'blue-1-100': '#D6E3FE',
+          'blue-1-150': '#C2D5FE',
+          'blue-1-200': '#ADC7FE',
+          'blue-1-250': '#99B8FD',
+          'blue-1-300': '#84AAFD',
+          'blue-1-350': '#6F9BFD',
+          'blue-1-400': '#5A8DFB',
+          'blue-1-450': '#437DFC',
+          'blue-1-500': '#3D71E4',
+          'blue-1-550': '#3665CC',
+          'blue-1-600': '#305AB5',
+          'blue-1-650': '#315093',
+          'blue-1-700': '#2E4675',
+          'blue-1-750': '#293B5E',
+          'blue-1-800': '#243048',
+          'blue-1-850': '#1E2635',
+          'blue-1-900': '#171C25',
+          'blue-1-950': '#0E1116',
+          'blue-2-050': '#E2F4F9',
+          'blue-2-100': '#C5E9F3',
+          'blue-2-150': '#A7DDED',
+          'blue-2-200': '#88D1E6',
+          'blue-2-250': '#68C5E0',
+          'blue-2-300': '#48B8D9',
+          'blue-2-350': '#3BAACA',
+          'blue-2-400': '#359CB9',
+          'blue-2-450': '#318EA9',
+          'blue-2-500': '#2C8199',
+          'blue-2-550': '#277389',
+          'blue-2-600': '#236679',
+          'blue-2-650': '#2A5866',
+          'blue-2-700': '#2A4B55',
+          'blue-2-750': '#283F47',
+          'blue-2-800': '#233337',
+          'blue-2-850': '#1D272A',
+          'blue-2-900': '#161C1E',
+          'blue-2-950': '#0E1112',
+          'purple-050': '#F6EEFF',
+          'purple-100': '#ECDCFF',
+          'purple-150': '#E3CBFE',
+          'purple-200': '#DAB9FE',
+          'purple-250': '#D0A7FE',
+          'purple-300': '#C795FE',
+          'purple-350': '#BD83FD',
+          'purple-400': '#B36FFD',
+          'purple-450': '#A85BFD',
+          'purple-500': '#9B4BF3',
+          'purple-550': '#8B43DA',
+          'purple-600': '#7B3CC1',
+          'purple-650': '#673C9B',
+          'purple-700': '#56387D',
+          'purple-750': '#463162',
+          'purple-800': '#382A4A',
+          'purple-850': '#2A2237',
+          'purple-900': '#1E1926',
+          'purple-950': '#121017',
+          'pink-050': '#FCEDF5',
+          'pink-100': '#F9DAEA',
+          'pink-150': '#F7C7E0',
+          'pink-200': '#F4B4D5',
+          'pink-250': '#F1A1CA',
+          'pink-300': '#EE8CBF',
+          'pink-350': '#EA77B3',
+          'pink-400': '#E760A6',
+          'pink-450': '#E24797',
+          'pink-500': '#CD4089',
+          'pink-550': '#B8397B',
+          'pink-600': '#A3336D',
+          'pink-650': '#86355E',
+          'pink-700': '#6E334F',
+          'pink-750': '#582E42',
+          'pink-800': '#442834',
+          'pink-850': '#332028',
+          'pink-900': '#24181D',
+          'pink-950': '#160F12',
+          'black-000': '#00000000',
+          'black-050': '#0000000D',
+          'black-100': '#0000001A',
+          'black-150': '#00000026',
+          'black-200': '#00000033',
+          'black-250': '#00000040',
+          'black-300': '#0000004D',
+          'black-350': '#00000059',
+          'black-400': '#00000066',
+          'black-450': '#00000073',
+          'black-500': '#00000080',
+          'black-550': '#0000008C',
+          'black-600': '#00000099',
+          'black-650': '#000000A6',
+          'black-700': '#000000B3',
+          'black-750': '#000000BF',
+          'black-800': '#000000CC',
+          'black-850': '#000000D9',
+          'black-900': '#000000E6',
+          'black-950': '#000000F2',
+          'white-000': '#FFFFFF',
+          'white-050': '#FFFFFF0D',
+          'white-100': '#FFFFFF1A',
+          'white-150': '#FFFFFF26',
+          'white-200': '#FFFFFF33',
+          'white-250': '#FFFFFF40',
+          'white-300': '#FFFFFF4D',
+          'white-350': '#FFFFFF59',
+          'white-400': '#FFFFFF66',
+          'white-450': '#FFFFFF73',
+          'white-500': '#FFFFFF80',
+          'white-550': '#FFFFFF8C',
+          'white-600': '#FFFFFF99',
+          'white-650': '#FFFFFFA6',
+          'white-700': '#FFFFFFB3',
+          'white-750': '#FFFFFFBF',
+          'white-800': '#FFFFFFCC',
+          'white-850': '#FFFFFFD9',
+          'white-900': '#FFFFFFE6',
+          'white-950': '#FFFFFFF2',
+        },
+        transitions: {
+          'ease-in': 'cubic-bezier(0.32, 0, 0.67, 0)',
+          'ease-out': 'cubic-bezier(0.33, 1, 0.68, 1)',
+          'ease-in-out': 'cubic-bezier(0.65, 0, 0.35, 1)',
+          duration: '250ms',
+        },
+        font: {
+          sizes: {
+            xs: '0.75rem',
+            sm: '0.875rem',
+            md: '1rem',
+            lg: '1.125rem',
+            ml: '0.938rem',
+            xl: '1.25rem',
+            t: '0.6875rem',
+            s: '0.75rem',
+            h1: '2rem',
+            h2: '1.75rem',
+            h3: '1.5rem',
+            h4: '1.375rem',
+            h5: '1.25rem',
+            h6: '1.125rem',
+            'xl-alt': '5rem',
+            'lg-alt': '4.5rem',
+            'md-alt': '4rem',
+            'sm-alt': '3.5rem',
+            'xs-alt': '3rem',
+          },
+          weights: {
+            thin: 200,
+            light: 300,
+            regular: 400,
+            medium: 500,
+            bold: 600,
+            extrabold: 700,
+            black: 800,
+          },
+          families: {
+            base: '"Roboto Flex Variable", sans-serif',
+            accent: '"Roboto Flex Variable", sans-serif',
+          },
+        },
+        spacings: {
+          l: '3rem',
+          b: '1.625rem',
+          m: '0.8125rem',
+          s: '1rem',
+          t: '0.5rem',
+          st: '0.25rem',
+          '4xs': '0.125rem',
+          xxxs: '0.25rem',
+          xxs: '0.375rem',
+          xs: '0.5rem',
+          sm: '0.75rem',
+          base: '1rem',
+          md: '1.5rem',
+          lg: '2rem',
+          xl: '2.5rem',
+          xxl: '3rem',
+          xxxl: '3.5rem',
+          '4xl': '4rem',
+          '5xl': '4.5rem',
+          '6xl': '6rem',
+          '7xl': '7.5rem',
+        },
+        breakpoints: {
+          xs: 0,
+          sm: '576px',
+          md: '768px',
+          lg: '992px',
+          xl: '1200px',
+          xxl: '1400px',
+        },
+      },
+      contextuals: {
+        background: {
+          surface: {
+            primary: '#2B303D',
+            secondary: '#222631',
+            tertiary: '#181B24',
+          },
+          semantic: {
+            brand: {
+              primary: '#3E5DE7',
+              'primary-hover': '#2845C1',
+              secondary: '#223E9E',
+              'secondary-hover': '#1F367D',
+              tertiary: '#1F367D',
+              'tertiary-hover': '#1B2E5F',
+            },
+            neutral: {
+              primary: '#626A80',
+              'primary-hover': '#4A5267',
+              secondary: '#3F4759',
+              'secondary-hover': '#363B4C',
+              tertiary: '#363B4C',
+              'tertiary-hover': '#2B303D',
+            },
+            contextual: { primary: '#FFFFFF0D', 'primary-hover': '#FFFFFF1A' },
+            info: {
+              primary: '#2F6ABB',
+              'primary-hover': '#28528F',
+              secondary: '#274775',
+              'secondary-hover': '#243C5E',
+              tertiary: '#243C5E',
+              'tertiary-hover': '#20314A',
+            },
+            success: {
+              primary: '#367664',
+              'primary-hover': '#2C5A50',
+              secondary: '#2A4D45',
+              'secondary-hover': '#26403C',
+              tertiary: '#26403C',
+              'tertiary-hover': '#213430',
+            },
+            warning: {
+              primary: '#A75400',
+              'primary-hover': '#814112',
+              secondary: '#6C3A19',
+              'secondary-hover': '#58321C',
+              tertiary: '#58321C',
+              'tertiary-hover': '#452A1A',
+            },
+            error: {
+              primary: '#CF202D',
+              'primary-hover': '#9D2227',
+              secondary: '#812727',
+              'secondary-hover': '#672624',
+              tertiary: '#672624',
+              'tertiary-hover': '#512220',
+            },
+            disabled: { primary: '#363B4C', secondary: '#2B303D' },
+          },
+          palette: {
+            brand: {
+              primary: '#7E98FF',
+              secondary: '#5C7AF7',
+              tertiary: '#3E5DE7',
+            },
+            red: {
+              primary: '#FF706E',
+              secondary: '#F63A45',
+              tertiary: '#CF202D',
+            },
+            orange: {
+              primary: '#D28C81',
+              secondary: '#BE6E62',
+              tertiary: '#9E564D',
+            },
+            brown: {
+              primary: '#C3937B',
+              secondary: '#A77A62',
+              tertiary: '#8B614D',
+            },
+            yellow: {
+              primary: '#C49711',
+              secondary: '#A87D07',
+              tertiary: '#8D6300',
+            },
+            green: {
+              primary: '#85AA45',
+              secondary: '#688F30',
+              tertiary: '#4D7621',
+            },
+            'blue-1': {
+              primary: '#6F9BFD',
+              secondary: '#437DFC',
+              tertiary: '#3665CC',
+            },
+            'blue-2': {
+              primary: '#3BAACA',
+              secondary: '#318EA9',
+              tertiary: '#277389',
+            },
+            purple: {
+              primary: '#BE83FA',
+              secondary: '#AB5EF0',
+              tertiary: '#933CDB',
+            },
+            pink: {
+              primary: '#E779B8',
+              secondary: '#D2579E',
+              tertiary: '#B0417F',
+            },
+            gray: {
+              primary: '#969EB0',
+              secondary: '#7B8498',
+              tertiary: '#626A80',
+            },
+          },
+        },
+        content: {
+          logo1: '#95ABFF',
+          logo2: '#95ABFF',
+          semantic: {
+            brand: {
+              primary: '#EDF0FF',
+              secondary: '#DAE2FF',
+              tertiary: '#A2B6FF',
+              'on-brand': '#EDF0FF',
+            },
+            neutral: {
+              primary: '#EEF1F4',
+              secondary: '#DFE2EA',
+              tertiary: '#B2B9C7',
+              'on-neutral': '#EEF1F4',
+            },
+            contextual: { primary: '#000000D9' },
+            info: {
+              primary: '#E7F2FF',
+              secondary: '#CFE5FF',
+              tertiary: '#8CBCF9',
+              'on-info': '#E7F2FF',
+            },
+            success: {
+              primary: '#DEF7E6',
+              secondary: '#BAEECF',
+              tertiary: '#85C6A7',
+              'on-success': '#DEF7E6',
+            },
+            warning: {
+              primary: '#FFEEDF',
+              secondary: '#FFDCBE',
+              tertiary: '#FDA54F',
+              'on-warning': '#FFEEDF',
+            },
+            error: {
+              primary: '#FFEDEB',
+              secondary: '#FFDAD7',
+              tertiary: '#FF9F99',
+              'on-error': '#FFEDEB',
+            },
+            disabled: { primary: '#555E74', secondary: '#0000004D' },
+          },
+          palette: {
+            brand: {
+              primary: '#7E98FF',
+              secondary: '#5C7AF7',
+              tertiary: '#3E5DE7',
+            },
+            red: {
+              primary: '#FF706E',
+              secondary: '#F63A45',
+              tertiary: '#CF202D',
+            },
+            orange: {
+              primary: '#D28C81',
+              secondary: '#BE6E62',
+              tertiary: '#9E564D',
+            },
+            brown: {
+              primary: '#C3937B',
+              secondary: '#A77A62',
+              tertiary: '#8B614D',
+            },
+            yellow: {
+              primary: '#C49711',
+              secondary: '#A87D07',
+              tertiary: '#8D6300',
+            },
+            green: {
+              primary: '#85AA45',
+              secondary: '#688F30',
+              tertiary: '#4D7621',
+            },
+            'blue-1': {
+              primary: '#6F9BFD',
+              secondary: '#437DFC',
+              tertiary: '#3665CC',
+            },
+            'blue-2': {
+              primary: '#3BAACA',
+              secondary: '#318EA9',
+              tertiary: '#277389',
+            },
+            purple: {
+              primary: '#BE83FA',
+              secondary: '#AB5EF0',
+              tertiary: '#933CDB',
+            },
+            pink: {
+              primary: '#E779B8',
+              secondary: '#D2579E',
+              tertiary: '#B0417F',
+            },
+            gray: {
+              primary: '#969EB0',
+              secondary: '#7B8498',
+              tertiary: '#626A80',
+            },
+          },
+        },
+        border: {
+          surface: { primary: '#363B4C' },
+          semantic: {
+            brand: {
+              primary: '#5C7AF7',
+              secondary: '#304DDF',
+              tertiary: '#223E9E',
+            },
+            contextual: { primary: '#00000033' },
+            neutral: {
+              primary: '#7B8498',
+              secondary: '#555E74',
+              tertiary: '#3F4759',
+            },
+            info: {
+              primary: '#4185DC',
+              secondary: '#265EAA',
+              tertiary: '#274775',
+            },
+            success: {
+              primary: '#4B9079',
+              secondary: '#2B695A',
+              tertiary: '#2A4D45',
+            },
+            warning: {
+              primary: '#C86C08',
+              secondary: '#984800',
+              tertiary: '#6C3A19',
+            },
+            error: {
+              primary: '#F63A45',
+              secondary: '#BD0F23',
+              tertiary: '#812727',
+            },
+            disabled: { primary: '#2B303D' },
+          },
+          palette: {
+            brand: {
+              primary: '#7E98FF',
+              secondary: '#5C7AF7',
+              tertiary: '#3E5DE7',
+            },
+            red: {
+              primary: '#FF706E',
+              secondary: '#F63A45',
+              tertiary: '#CF202D',
+            },
+            orange: {
+              primary: '#D28C81',
+              secondary: '#BE6E62',
+              tertiary: '#9E564D',
+            },
+            brown: {
+              primary: '#C3937B',
+              secondary: '#A77A62',
+              tertiary: '#8B614D',
+            },
+            yellow: {
+              primary: '#C49711',
+              secondary: '#A87D07',
+              tertiary: '#8D6300',
+            },
+            green: {
+              primary: '#85AA45',
+              secondary: '#688F30',
+              tertiary: '#4D7621',
+            },
+            'blue-1': {
+              primary: '#6F9BFD',
+              secondary: '#437DFC',
+              tertiary: '#3665CC',
+            },
+            'blue-2': {
+              primary: '#3BAACA',
+              secondary: '#318EA9',
+              tertiary: '#277389',
+            },
+            purple: {
+              primary: '#BE83FA',
+              secondary: '#AB5EF0',
+              tertiary: '#933CDB',
+            },
+            pink: {
+              primary: '#E779B8',
+              secondary: '#D2579E',
+              tertiary: '#B0417F',
+            },
+            gray: {
+              primary: '#969EB0',
+              secondary: '#7B8498',
+              tertiary: '#626A80',
+            },
+          },
         },
       },
     },
     dsfr: {
-      theme: {
-        colors: { 'secondary-icon': '#C9191E' },
-        logo: {
-          src: '/assets/logo-gouv.svg',
-          widthHeader: '110px',
-          widthFooter: '220px',
-          alt: 'Gouvernement Logo',
-        },
+      globals: {
         font: {
           families: {
             base: 'Marianne, Inter, Roboto Flex Variable, sans-serif',
@@ -444,6 +1541,12 @@ export const tokens = {
         },
       },
       components: {
+        logo: {
+          src: '/assets/logo-gouv.svg',
+          widthHeader: '110px',
+          widthFooter: '220px',
+          alt: 'Gouvernement Logo',
+        },
         'la-gaufre': true,
         'home-proconnect': true,
         favicon: {
@@ -454,131 +1557,296 @@ export const tokens = {
       },
     },
     generic: {
-      theme: {
+      globals: {
         colors: {
-          'primary-action': '#206EBD',
-          'primary-focus': '#1E64BF',
-          'primary-text': '#2E2C28',
-          'primary-050': '#F8F8F7',
-          'primary-100': '#F0EFEC',
-          'primary-150': '#F4F4FD',
-          'primary-200': '#E8E7E4',
-          'primary-300': '#CFCDC9',
-          'primary-400': '#979592',
-          'primary-500': '#82807D',
-          'primary-600': '#3F3D39',
-          'primary-700': '#2E2C28',
-          'primary-800': '#302E29',
-          'primary-900': '#282622',
-          'primary-950': '#201F1C',
-          'secondary-text': '#fff',
-          'secondary-50': '#F4F7FA',
-          'secondary-100': '#D7E3EE',
-          'secondary-200': '#B8CCE1',
-          'secondary-300': '#99B4D3',
-          'secondary-400': '#7595BE',
-          'secondary-500': '#5874A0',
-          'secondary-600': '#3A5383',
-          'secondary-700': '#1E3462',
-          'secondary-800': '#091B41',
-          'secondary-900': '#08183B',
-          'secondary-950': '#071636',
-          'greyscale-text': '#3C3B38',
-          'greyscale-000': '#fff',
-          'greyscale-050': '#F8F7F7',
-          'greyscale-100': '#F3F3F2',
-          'greyscale-200': '#ECEBEA',
-          'greyscale-250': '#E4E3E2',
-          'greyscale-300': '#D3D2CF',
-          'greyscale-350': '#eee',
-          'greyscale-400': '#96948E',
-          'greyscale-500': '#817E77',
-          'greyscale-600': '#6A6862',
-          'greyscale-700': '#3C3B38',
-          'greyscale-750': '#383632',
-          'greyscale-800': '#2D2B27',
-          'greyscale-900': '#262522',
-          'greyscale-950': '#201F1C',
-          'greyscale-1000': '#181714',
-          'success-text': '#234935',
-          'success-50': '#F3FBF5',
-          'success-100': '#E4F7EA',
-          'success-200': '#CAEED4',
-          'success-300': '#A0E0B5',
-          'success-400': '#6CC88C',
-          'success-500': '#6CC88C',
-          'success-600': '#358D5C',
-          'success-700': '#2D704B',
-          'success-800': '#28583F',
-          'success-900': '#234935',
-          'success-950': '#0F281B',
-          'info-text': '#212445',
-          'info-50': '#F2F6FB',
-          'info-100': '#E2E9F5',
-          'info-200': '#CCD8EE',
-          'info-300': '#A9C0E3',
-          'info-400': '#809DD4',
-          'info-500': '#617BC7',
-          'info-600': '#4A5CBF',
-          'info-700': '#3E49B2',
-          'info-800': '#353C8F',
-          'info-900': '#303771',
-          'info-950': '#212445',
-          'warning-text': '#D97C3A',
-          'warning-50': '#FDF7F1',
-          'warning-100': '#FBEDDC',
-          'warning-200': '#F5D9B9',
-          'warning-300': '#EDBE8C',
-          'warning-400': '#E2985C',
-          'warning-500': '#D97C3A',
-          'warning-600': '#C96330',
-          'warning-700': '#A34B32',
-          'warning-800': '#813B2C',
-          'warning-900': '#693327',
-          'warning-950': '#381713',
-          'danger-action': '#C0182A',
-          'danger-text': '#FFF',
-          'danger-050': '#FDF5F4',
-          'danger-100': '#FBEBE8',
-          'danger-200': '#F9E0DC',
-          'danger-300': '#F3C3BD',
-          'danger-400': '#E26552',
-          'danger-500': '#C91F00',
-          'danger-600': '#A71901',
-          'danger-700': '#562C2B',
-          'danger-800': '#392425',
-          'danger-900': '#311F20',
-          'danger-950': '#2A191A',
-          'blue-400': '#8BAECC',
-          'blue-500': '#567AA2',
-          'blue-600': '#455784',
-          'brown-400': '#E4C090',
-          'brown-500': '#BA9977',
-          'brown-600': '#735C45',
-          'cyan-400': '#5CBEC9',
-          'cyan-500': '#43A1B3',
-          'cyan-600': '#39809B',
-          'gold-400': '#ECBF50',
-          'gold-500': '#DFA038',
-          'gold-600': '#C17B31',
-          'green-400': '#5DBD9A',
-          'green-500': '#3AA183',
-          'green-600': '#2A816D',
-          'olive-400': '#AFD662',
-          'olive-500': '#90BB4B',
-          'olive-600': '#6E9441',
-          'orange-400': '#E2985C',
-          'orange-500': '#D97C3A',
-          'orange-600': '#C96330',
-          'pink-400': '#BE8FC8',
-          'pink-500': '#A563B1',
-          'pink-600': '#8B44A5',
-          'purple-400': '#BE8FC8',
-          'purple-500': '#A563B1',
-          'purple-600': '#8B44A5',
-          'yellow-400': '#EDC947',
-          'yellow-500': '#DBB13A',
-          'yellow-600': '#B88A34',
+          'brand-050': '#EEF1FA',
+          'brand-100': '#DDE2F5',
+          'brand-150': '#CED3F1',
+          'brand-200': '#BEC5F0',
+          'brand-250': '#AFB5F1',
+          'brand-300': '#A0A5F6',
+          'brand-350': '#8F94FD',
+          'brand-400': '#8184FC',
+          'brand-450': '#7576EE',
+          'brand-500': '#6969DF',
+          'brand-550': '#5E5CD0',
+          'brand-600': '#534FC2',
+          'brand-650': '#4844AD',
+          'brand-700': '#3E3B98',
+          'brand-750': '#36347D',
+          'brand-800': '#2D2F5F',
+          'brand-850': '#262848',
+          'brand-900': '#1C1E32',
+          'brand-950': '#11131F',
+          'gray-000': '#FFFFFF',
+          'gray-025': '#F8F8F9',
+          'gray-050': '#F0F0F3',
+          'gray-100': '#E2E2EA',
+          'gray-150': '#D3D4E0',
+          'gray-200': '#C5C6D5',
+          'gray-250': '#B7B7CB',
+          'gray-300': '#A9A9BF',
+          'gray-350': '#9C9CB2',
+          'gray-400': '#8F8FA4',
+          'gray-450': '#828297',
+          'gray-500': '#75758A',
+          'gray-550': '#69697D',
+          'gray-600': '#5D5D70',
+          'gray-650': '#515164',
+          'gray-700': '#454558',
+          'gray-750': '#3A3A4C',
+          'gray-800': '#2F303D',
+          'gray-850': '#25252F',
+          'gray-900': '#1B1B23',
+          'gray-950': '#111114',
+          'gray-1000': '#000000',
+          'info-050': '#EAF2F9',
+          'info-100': '#D5E4F3',
+          'info-150': '#BFD7F0',
+          'info-200': '#A7CAEE',
+          'info-250': '#8DBDEF',
+          'info-300': '#6EB0F2',
+          'info-350': '#50A2F5',
+          'info-400': '#3593F4',
+          'info-450': '#1185ED',
+          'info-500': '#0077DE',
+          'info-550': '#0069CF',
+          'info-600': '#005BC0',
+          'info-650': '#0D4EAA',
+          'info-700': '#124394',
+          'info-750': '#163878',
+          'info-800': '#192F5A',
+          'info-850': '#192541',
+          'info-900': '#141B2D',
+          'info-950': '#0C111C',
+          'success-050': '#E8F1EA',
+          'success-100': '#CFE4D4',
+          'success-150': '#BAD9C1',
+          'success-200': '#A2CFAD',
+          'success-250': '#86C597',
+          'success-300': '#6CBA83',
+          'success-350': '#4FB070',
+          'success-400': '#40A363',
+          'success-450': '#309556',
+          'success-500': '#1E884A',
+          'success-550': '#027B3E',
+          'success-600': '#016D31',
+          'success-650': '#006024',
+          'success-700': '#005317',
+          'success-750': '#0D4511',
+          'success-800': '#11380E',
+          'success-850': '#132A11',
+          'success-900': '#101E0F',
+          'success-950': '#091209',
+          'warning-050': '#F8F0E9',
+          'warning-100': '#F1E0D3',
+          'warning-150': '#ECD0BC',
+          'warning-200': '#E8C0A4',
+          'warning-250': '#E8AE8A',
+          'warning-300': '#EB9970',
+          'warning-350': '#E98456',
+          'warning-400': '#E57036',
+          'warning-450': '#DA5E18',
+          'warning-500': '#CB5000',
+          'warning-550': '#BC4200',
+          'warning-600': '#AD3300',
+          'warning-650': '#9E2300',
+          'warning-700': '#882011',
+          'warning-750': '#731E16',
+          'warning-800': '#58201A',
+          'warning-850': '#401D18',
+          'warning-900': '#2E1714',
+          'warning-950': '#1D0F0D',
+          'error-050': '#F9EFEC',
+          'error-100': '#F4DFD9',
+          'error-150': '#F0CEC6',
+          'error-200': '#EEBCB2',
+          'error-250': '#EEA99D',
+          'error-300': '#EF9486',
+          'error-350': '#F37C6E',
+          'error-400': '#F65F53',
+          'error-450': '#F0463D',
+          'error-500': '#E82322',
+          'error-550': '#D7010E',
+          'error-600': '#C00100',
+          'error-650': '#AA0000',
+          'error-700': '#910C06',
+          'error-750': '#731E16',
+          'error-800': '#58201A',
+          'error-850': '#401D18',
+          'error-900': '#2E1714',
+          'error-950': '#1D0F0D',
+          'red-050': '#FAEFEE',
+          'red-100': '#F4DEDD',
+          'red-150': '#F1CDCB',
+          'red-200': '#EFBBBA',
+          'red-250': '#EEA8A8',
+          'red-300': '#F09394',
+          'red-350': '#F37B7E',
+          'red-400': '#EF6569',
+          'red-450': '#E94A55',
+          'red-500': '#DA3B49',
+          'red-550': '#CA2A3C',
+          'red-600': '#BB1330',
+          'red-650': '#A90021',
+          'red-700': '#910A13',
+          'red-750': '#731E16',
+          'red-800': '#58201A',
+          'red-850': '#411D18',
+          'red-900': '#2E1714',
+          'red-950': '#1D0F0D',
+          'orange-050': '#F8F0E9',
+          'orange-100': '#F1E0D3',
+          'orange-150': '#ECD0BD',
+          'orange-200': '#EABFA6',
+          'orange-250': '#EBAC90',
+          'orange-300': '#EC9772',
+          'orange-350': '#E5845A',
+          'orange-400': '#D6774D',
+          'orange-450': '#C86A40',
+          'orange-500': '#B95D33',
+          'orange-550': '#AB5025',
+          'orange-600': '#9D4315',
+          'orange-650': '#8F3600',
+          'orange-700': '#812900',
+          'orange-750': '#6C2511',
+          'orange-800': '#572017',
+          'orange-850': '#401D18',
+          'orange-900': '#2E1714',
+          'orange-950': '#1D0F0D',
+          'brown-050': '#F6F0E8',
+          'brown-100': '#F1E0D3',
+          'brown-150': '#EBD0BA',
+          'brown-200': '#E2C0A6',
+          'brown-250': '#D4B398',
+          'brown-300': '#C6A58B',
+          'brown-350': '#B8987E',
+          'brown-400': '#AA8B71',
+          'brown-450': '#9D7E65',
+          'brown-500': '#8F7158',
+          'brown-550': '#82654C',
+          'brown-600': '#765841',
+          'brown-650': '#694C35',
+          'brown-700': '#5D412A',
+          'brown-750': '#51361E',
+          'brown-800': '#452A13',
+          'brown-850': '#392008',
+          'brown-900': '#29180A',
+          'brown-950': '#1B0F08',
+          'yellow-050': '#F3F0E7',
+          'yellow-100': '#E9E2CF',
+          'yellow-150': '#E1D4B7',
+          'yellow-200': '#D9C599',
+          'yellow-250': '#D2B677',
+          'yellow-300': '#CAA756',
+          'yellow-350': '#C2972E',
+          'yellow-400': '#B98900',
+          'yellow-450': '#AB7B00',
+          'yellow-500': '#9D6E00',
+          'yellow-550': '#916100',
+          'yellow-600': '#855400',
+          'yellow-650': '#784700',
+          'yellow-700': '#6C3A00',
+          'yellow-750': '#5F2E00',
+          'yellow-800': '#512302',
+          'yellow-850': '#3E1D10',
+          'yellow-900': '#2D1711',
+          'yellow-950': '#1D0F0D',
+          'green-050': '#E6F1E9',
+          'green-100': '#CFE4D5',
+          'green-150': '#B8D8C1',
+          'green-200': '#A0CFAE',
+          'green-250': '#84C59A',
+          'green-300': '#65BA86',
+          'green-350': '#45B173',
+          'green-400': '#23A562',
+          'green-450': '#029755',
+          'green-500': '#008948',
+          'green-550': '#017B3B',
+          'green-600': '#006E2E',
+          'green-650': '#006022',
+          'green-700': '#005314',
+          'green-750': '#0D4510',
+          'green-800': '#11380E',
+          'green-850': '#132A11',
+          'green-900': '#101E0F',
+          'green-950': '#091209',
+          'blue1-050': '#EBF1F9',
+          'blue1-100': '#D6E4F4',
+          'blue1-150': '#C1D7F0',
+          'blue1-200': '#AACAEF',
+          'blue1-250': '#8FBCEF',
+          'blue1-300': '#7CAFEB',
+          'blue1-350': '#68A1E4',
+          'blue1-400': '#5B94D6',
+          'blue1-450': '#4E86C7',
+          'blue1-500': '#4279B9',
+          'blue1-550': '#356CAC',
+          'blue1-600': '#28609E',
+          'blue1-650': '#1B5390',
+          'blue1-700': '#0B4783',
+          'blue1-750': '#0F3C6E',
+          'blue1-800': '#133059',
+          'blue1-850': '#152641',
+          'blue1-900': '#121C2D',
+          'blue1-950': '#0B111C',
+          'blue2-050': '#E7F3F4',
+          'blue2-100': '#CEE7E9',
+          'blue2-150': '#B2DCE0',
+          'blue2-200': '#91D1D7',
+          'blue2-250': '#68C7D0',
+          'blue2-300': '#43BBC5',
+          'blue2-350': '#00AFBA',
+          'blue2-400': '#01A0AA',
+          'blue2-450': '#00929D',
+          'blue2-500': '#00848F',
+          'blue2-550': '#007682',
+          'blue2-600': '#016874',
+          'blue2-650': '#005B67',
+          'blue2-700': '#004E5A',
+          'blue2-750': '#00424E',
+          'blue2-800': '#003642',
+          'blue2-850': '#002A38',
+          'blue2-900': '#061E28',
+          'blue2-950': '#071219',
+          'purple-050': '#F7F0F6',
+          'purple-100': '#EEE0EE',
+          'purple-150': '#E7D1E7',
+          'purple-200': '#DBBFE4',
+          'purple-250': '#D3AEE2',
+          'purple-300': '#CB99E1',
+          'purple-350': '#C188D9',
+          'purple-400': '#B47BCB',
+          'purple-450': '#A66EBD',
+          'purple-500': '#9961AF',
+          'purple-550': '#8B55A1',
+          'purple-600': '#7E4894',
+          'purple-650': '#723C87',
+          'purple-700': '#633376',
+          'purple-750': '#552A65',
+          'purple-800': '#452551',
+          'purple-850': '#35213D',
+          'purple-900': '#261A2C',
+          'purple-950': '#17111C',
+          'pink-050': '#F8EFF4',
+          'pink-100': '#F0DFEA',
+          'pink-150': '#EACEDF',
+          'pink-200': '#E9BBD1',
+          'pink-250': '#E9A7C2',
+          'pink-300': '#E095B4',
+          'pink-350': '#D685A8',
+          'pink-400': '#C7799B',
+          'pink-450': '#B86C8D',
+          'pink-500': '#AA5F80',
+          'pink-550': '#9C5374',
+          'pink-600': '#8E4767',
+          'pink-650': '#813B5B',
+          'pink-700': '#732E4F',
+          'pink-750': '#632643',
+          'pink-800': '#521F38',
+          'pink-850': '#3E1C2B',
+          'pink-900': '#2D171F',
+          'pink-950': '#1C0E12',
         },
         font: {
           families: {
@@ -587,18 +1855,6 @@ export const tokens = {
           },
         },
       },
-      components: {
-        button: {
-          primary: {
-            background: {
-              'color-hover': 'var(--c--theme--colors--primary-focus)',
-              'color-active': 'var(--c--theme--colors--primary-focus)',
-              'color-focus': 'var(--c--theme--colors--primary-focus)',
-            },
-          },
-        },
-        'image-system-filter': 'saturate(0.2)',
-      },
     },
   },
 };
diff --git a/src/frontend/apps/impress/src/cunningham/useCunninghamTheme.tsx b/src/frontend/apps/impress/src/cunningham/useCunninghamTheme.tsx
index 0e266199..038bb113 100644
--- a/src/frontend/apps/impress/src/cunningham/useCunninghamTheme.tsx
+++ b/src/frontend/apps/impress/src/cunningham/useCunninghamTheme.tsx
@@ -5,21 +5,23 @@ import { tokens } from './cunningham-tokens';
 
 type Tokens = typeof tokens.themes.default &
   Partial<(typeof tokens.themes)[keyof typeof tokens.themes]>;
-type ColorsTokens = Tokens['theme']['colors'];
-type FontSizesTokens = Tokens['theme']['font']['sizes'];
-type SpacingsTokens = Tokens['theme']['spacings'];
+type ColorsTokens = Tokens['globals']['colors'];
+type FontSizesTokens = Tokens['globals']['font']['sizes'];
+type SpacingsTokens = Tokens['globals']['spacings'];
 type ComponentTokens = Tokens['components'];
+type ContextualTokens = Tokens['contextuals'];
 export type Theme = keyof typeof tokens.themes;
 
 interface ThemeStore {
   colorsTokens: Partial<ColorsTokens>;
   componentTokens: ComponentTokens;
+  contextualTokens: ContextualTokens;
   currentTokens: Partial<Tokens>;
   fontSizesTokens: Partial<FontSizesTokens>;
   setTheme: (theme: Theme) => void;
   spacingsTokens: Partial<SpacingsTokens>;
   theme: Theme;
-  themeTokens: Partial<Tokens['theme']>;
+  themeTokens: Partial<Tokens['globals']>;
 }
 
 const getMergedTokens = (theme: Theme) => {
@@ -30,14 +32,15 @@ const DEFAULT_THEME: Theme = 'generic';
 const defaultTokens = getMergedTokens(DEFAULT_THEME);
 
 const initialState: ThemeStore = {
-  colorsTokens: defaultTokens.theme.colors,
+  colorsTokens: defaultTokens.globals.colors,
   componentTokens: defaultTokens.components,
+  contextualTokens: defaultTokens.contextuals,
   currentTokens: tokens.themes[DEFAULT_THEME] as Partial<Tokens>,
-  fontSizesTokens: defaultTokens.theme.font.sizes,
+  fontSizesTokens: defaultTokens.globals.font.sizes,
   setTheme: () => {},
-  spacingsTokens: defaultTokens.theme.spacings,
+  spacingsTokens: defaultTokens.globals.spacings,
   theme: DEFAULT_THEME,
-  themeTokens: defaultTokens.theme,
+  themeTokens: defaultTokens.globals,
 };
 
 export const useCunninghamTheme = create<ThemeStore>((set) => ({
@@ -46,13 +49,14 @@ export const useCunninghamTheme = create<ThemeStore>((set) => ({
     const newTokens = getMergedTokens(theme);
 
     set({
-      colorsTokens: newTokens.theme.colors,
+      colorsTokens: newTokens.globals.colors,
       componentTokens: newTokens.components,
+      contextualTokens: newTokens.contextuals,
       currentTokens: tokens.themes[theme] as Partial<Tokens>,
-      fontSizesTokens: newTokens.theme.font.sizes,
-      spacingsTokens: newTokens.theme.spacings,
+      fontSizesTokens: newTokens.globals.font.sizes,
+      spacingsTokens: newTokens.globals.spacings,
       theme,
-      themeTokens: newTokens.theme,
+      themeTokens: newTokens.globals,
     });
   },
 }));
diff --git a/src/frontend/apps/impress/src/features/auth/components/ButtonLogin.tsx b/src/frontend/apps/impress/src/features/auth/components/ButtonLogin.tsx
index c12a5be5..15aa7536 100644
--- a/src/frontend/apps/impress/src/features/auth/components/ButtonLogin.tsx
+++ b/src/frontend/apps/impress/src/features/auth/components/ButtonLogin.tsx
@@ -18,7 +18,8 @@ export const ButtonLogin = () => {
     return (
       <Button
         onClick={() => gotoLogin()}
-        color="primary-text"
+        color="brand"
+        variant="tertiary"
         aria-label={t('Login')}
         className="--docs--button-login"
       >
@@ -31,14 +32,15 @@ export const ButtonLogin = () => {
     <Box
       $css={css`
         .--docs--button-logout:focus-visible {
-          box-shadow: 0 0 0 2px ${colorsTokens['primary-400']} !important;
-          border-radius: 4px;
+          box-shadow: 0 0 0 2px ${colorsTokens['brand-400']} !important;
+          border-radius: var(--c--globals--spacings--st);
         }
       `}
     >
       <Button
         onClick={gotoLogout}
-        color="primary-text"
+        color="brand"
+        variant="tertiary"
         aria-label={t('Logout')}
         className="--docs--button-logout"
       >
@@ -56,9 +58,13 @@ export const ProConnectButton = () => {
       onClick={() => gotoLogin()}
       aria-label={t('Proconnect Login')}
       $css={css`
-        background-color: var(--c--theme--colors--primary-text);
+        background-color: var(
+          --c--contextuals--background--semantic--brand--primary
+        );
         &:hover {
-          background-color: var(--c--theme--colors--primary-action);
+          background-color: var(
+            --c--contextuals--background--semantic--brand--primary-hover
+          );
         }
       `}
       $radius="4px"
diff --git a/src/frontend/apps/impress/src/features/auth/components/UserAvatar.tsx b/src/frontend/apps/impress/src/features/auth/components/UserAvatar.tsx
index 9bf836c5..21c234fc 100644
--- a/src/frontend/apps/impress/src/features/auth/components/UserAvatar.tsx
+++ b/src/frontend/apps/impress/src/features/auth/components/UserAvatar.tsx
@@ -4,15 +4,12 @@ import { tokens } from '@/cunningham';
 
 import { AvatarSvg } from './AvatarSvg';
 
-const colors = tokens.themes.default.theme.colors;
+const colors = tokens.themes.default.globals.colors;
 
 const avatarsColors = [
-  colors['blue-500'],
+  colors['blue-1-500'],
   colors['brown-500'],
-  colors['cyan-500'],
-  colors['gold-500'],
   colors['green-500'],
-  colors['olive-500'],
   colors['orange-500'],
   colors['pink-500'],
   colors['purple-500'],
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/MarkdownButton.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/MarkdownButton.tsx
index 6555303c..1848f8d2 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/MarkdownButton.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/MarkdownButton.tsx
@@ -91,7 +91,7 @@ export function MarkdownButton() {
         <Text
           aria-hidden={true}
           $css={css`
-            font-family: var(--c--theme--font--families--base);
+            font-family: var(--c--globals--font--families--base);
           `}
           $weight="bold"
         >
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/ModalConfirmDownloadUnsafe.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/ModalConfirmDownloadUnsafe.tsx
index a0d93842..974d3582 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/ModalConfirmDownloadUnsafe.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/ModalConfirmDownloadUnsafe.tsx
@@ -24,14 +24,14 @@ export const ModalConfirmDownloadUnsafe = ({
         <>
           <Button
             aria-label={t('Cancel the download')}
-            color="secondary"
+            variant="secondary"
             onClick={() => onClose()}
           >
             {t('Cancel')}
           </Button>
           <Button
             aria-label={t('Download')}
-            color="danger"
+            color="error"
             data-testid="modal-download-unsafe-button"
             onClick={() => {
               if (onConfirm) {
@@ -52,7 +52,6 @@ export const ModalConfirmDownloadUnsafe = ({
           $gap="0.7rem"
           $size="h6"
           $align="flex-start"
-          $variation="1000"
           $direction="row"
           $margin="0"
         >
@@ -67,8 +66,10 @@ export const ModalConfirmDownloadUnsafe = ({
       >
         <Box>
           <Box $direction="column" $gap="0.35rem" $margin={{ top: 'sm' }}>
-            <Text $variation="700">{t('This file is flagged as unsafe.')}</Text>
-            <Text $variation="600">
+            <Text $variation="secondary">
+              {t('This file is flagged as unsafe.')}
+            </Text>
+            <Text $variation="secondary">
               {t('Please download it only if it comes from a trusted source.')}
             </Text>
           </Box>
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/CommentToolbarButton.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/CommentToolbarButton.tsx
index 76202f91..26067c18 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/CommentToolbarButton.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/CommentToolbarButton.tsx
@@ -46,20 +46,18 @@ export const CommentToolbarButton = () => {
           <Icon
             iconName="comment"
             className="--docs--icon-bg"
-            $theme="greyscale"
-            $variation="600"
+            $theme="gray"
             $padding="0.15rem"
-            $size="16px"
-            $color={colorsTokens['greyscale-600']}
+            $size="md"
           />
           {t('Comment')}
         </Box>
       </Components.Generic.Toolbar.Button>
       <Box
-        $background={colorsTokens['greyscale-100']}
+        $background={colorsTokens['gray-100']}
         $width="1px"
         $height="70%"
-        $margin={{ left: '2px' }}
+        $margin={{ left: 'var(--c--globals--spacings--4xs)' }}
         $css={css`
           align-self: center;
         `}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/styles.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/styles.tsx
index 15a37774..324a86c5 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/styles.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/styles.tsx
@@ -11,7 +11,7 @@ export const cssComments = (
       .bn-thread-mark:not([data-orphan='true']),
       .bn-thread-mark-selected:not([data-orphan='true']) {
         background: ${canSeeComment ? '#EDB40066' : 'transparent'};
-        color: var(--c--theme--colors--greyscale-700);
+        color: var(--c--globals--colors--greyscale-700);
       }
     }
 
@@ -31,7 +31,7 @@ export const cssComments = (
       max-height: 500px;
 
       .bn-default-styles {
-        font-family: var(--c--theme--font--families--base);
+        font-family: var(--c--globals--font--families--base);
       }
 
       .bn-block {
@@ -52,21 +52,22 @@ export const cssComments = (
         padding: 8px;
 
         & .bn-editor {
-          padding-left: 32px;
+          padding-left: var(--c--globals--spacings--lg);
           .bn-inline-content {
-            color: var(--c--theme--colors--greyscale-700);
+            color: var(--c--globals--colors--greyscale-700);
           }
         }
 
         // Emoji
         & .bn-badge-group {
-          padding-left: 32px;
+          padding-left: var(--c--globals--spacings--lg);
           .bn-badge label {
-            padding: 0 4px;
+            padding: var(--c--globals--spacings--0)
+              var(--c--globals--spacings--st);
             background: none;
-            border: 1px solid var(--c--theme--colors--greyscale-300);
-            border-radius: 4px;
-            height: 24px;
+            border: 1px solid var(--c--globals--colors--greyscale-300);
+            border-radius: var(--c--globals--spacings--st);
+            height: var(--c--globals--spacings--md);
           }
         }
 
@@ -102,17 +103,17 @@ export const cssComments = (
               background-color: transparent;
 
               &:hover {
-                background-color: var(--c--theme--colors--greyscale-100);
+                background-color: var(--c--globals--colors--greyscale-100);
               }
             }
 
             button[role='menuitem'] svg {
-              color: var(--c--theme--colors--greyscale-600);
+              color: var(--c--globals--colors--greyscale-600);
             }
           }
 
           & svg {
-            color: var(--c--theme--colors--info-600);
+            color: var(--c--globals--colors--info-600);
           }
         }
 
@@ -125,19 +126,19 @@ export const cssComments = (
             gap: 0.4rem !important;
 
             & > button {
-              height: 24px;
-              padding-inline: 4px;
+              height: var(--c--globals--spacings--md);
+              padding-inline: var(--c--globals--spacings--st);
 
               &[data-test='save'] {
-                border: 1px solid var(--c--theme--colors--info-600);
-                background: var(--c--theme--colors--info-600);
+                border: 1px solid var(--c--globals--colors--info-600);
+                background: var(--c--globals--colors--info-600);
                 color: white;
               }
 
               &[data-test='cancel'] {
                 background: white;
-                border: 1px solid var(--c--theme--colors--greyscale-300);
-                color: var(--c--theme--colors--info-600);
+                border: 1px solid var(--c--globals--colors--greyscale-300);
+                color: var(--c--globals--colors--info-600);
               }
             }
           }
@@ -179,19 +180,19 @@ export const cssComments = (
 
           button {
             font-size: 0;
-            background: var(--c--theme--colors--info-600);
-            width: 24px;
-            height: 24px;
-            padding: 0;
+            background: var(--c--globals--colors--info-600);
+            width: var(--c--globals--spacings--md);
+            height: var(--c--globals--spacings--md);
+            padding: var(--c--globals--spacings--0);
 
             &:disabled {
-              background: var(--c--theme--colors--greyscale-300);
+              background: var(--c--globals--colors--greyscale-300);
             }
 
             & .mantine-Button-label::before {
               content: '🡡';
               font-size: 13px;
-              color: var(--c--theme--colors--greyscale-100);
+              color: var(--c--globals--colors--greyscale-100);
             }
           }
         }
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/CalloutBlock.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/CalloutBlock.tsx
index 15ad01f3..72999f3f 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/CalloutBlock.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/CalloutBlock.tsx
@@ -21,8 +21,8 @@ import emojidata from './initEmojiCallout';
 
 const CalloutBlockStyle = createGlobalStyle`
   .bn-block-content[data-content-type="callout"][data-background-color] {
-    padding: var(--c--theme--spacings--3xs) var(--c--theme--spacings--3xs);
-    border-radius: var(--c--theme--spacings--3xs);
+    padding: var(--c--globals--spacings--3xs) var(--c--globals--spacings--3xs);
+    border-radius: var(--c--globals--spacings--3xs);
   }
 `;
 
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/InterlinkingLinkInlineContent.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/InterlinkingLinkInlineContent.tsx
index 846fa54a..1860dd3a 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/InterlinkingLinkInlineContent.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/InterlinkingLinkInlineContent.tsx
@@ -91,9 +91,10 @@ const LinkSelected = ({ url, title }: LinkSelectedProps) => {
           margin-right: 0.2rem;
         }
         &:hover {
-          background-color: ${colorsTokens['greyscale-100']};
+          background-color: ${colorsTokens['gray-100']};
         }
-        transition: background-color 0.2s ease-in-out;
+        transition: background-color var(--c--globals--transitions--duration)
+          var(--c--globals--transitions--ease-out);
 
         .--docs--doc-deleted & {
           pointer-events: none;
@@ -103,7 +104,7 @@ const LinkSelected = ({ url, title }: LinkSelectedProps) => {
       {emoji ? (
         <Text $size="16px">{emoji}</Text>
       ) : (
-        <SelectedPageIcon width={11.5} color={colorsTokens['primary-400']} />
+        <SelectedPageIcon width={11.5} color={colorsTokens['brand-400']} />
       )}
       <Text
         $weight="500"
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/SearchPage.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/SearchPage.tsx
index 2edebee6..1d88be88 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/SearchPage.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/SearchPage.tsx
@@ -35,11 +35,11 @@ import { DocSearchSubPageContent, DocSearchTarget } from '@/docs/doc-search';
 import { useResponsiveStore } from '@/stores';
 
 const inputStyle = css`
-  background-color: var(--c--theme--colors--greyscale-100);
+  background-color: var(--c--globals--colors--gray-100);
   border: none;
   outline: none;
-  color: var(--c--theme--colors--greyscale-700);
-  font-size: 16px;
+  color: var(--c--globals--colors--gray-700);
+  font-size: var(--c--globals--font--sizes--md);
   width: 100%;
   font-family: 'Inter';
 `;
@@ -159,8 +159,8 @@ export const SearchPage = ({
       <Box
         as="span"
         className="inline-content"
-        $background={colorsTokens['greyscale-100']}
-        $color="var(--c--theme--colors--greyscale-700)"
+        $background={colorsTokens['gray-100']}
+        $color="var(--c--globals--colors--gray-700)"
         $direction="row"
         $radius="3px"
         $padding="1px"
@@ -198,9 +198,9 @@ export const SearchPage = ({
         <QuickSearch showInput={false}>
           <Card
             $css={css`
-              box-shadow: 0 0 3px 0px var(--c--theme--colors--greyscale-200);
+              box-shadow: 0 0 3px 0px var(--c--globals--colors--gray-200);
               & > div {
-                margin-top: 0;
+                margin-top: var(--c--globals--spacings--0);
                 & [cmdk-group-heading] {
                   padding: 0.4rem;
                   margin: 0;
@@ -287,8 +287,8 @@ export const SearchPage = ({
                         </Box>
 
                         <Text
-                          $size="14px"
-                          $color="var(--c--theme--colors--greyscale-1000)"
+                          $size="sm"
+                          $color="var(--c--globals--colors--gray-1000)"
                           spellCheck="false"
                         >
                           {titleWithoutEmoji}
@@ -296,11 +296,7 @@ export const SearchPage = ({
                       </Box>
                     }
                     right={
-                      <Icon
-                        iconName="keyboard_return"
-                        $variation="600"
-                        spellCheck="false"
-                      />
+                      <Icon iconName="keyboard_return" spellCheck="false" />
                     }
                   />
                 );
@@ -317,7 +313,7 @@ export const SearchPage = ({
                       <Box
                         $css={css`
                           border-top: 1px solid
-                            var(--c--theme--colors--greyscale-200);
+                            var(--c--globals--colors--gray-200);
                         `}
                         $width="100%"
                       >
@@ -332,15 +328,15 @@ export const SearchPage = ({
                           $css={css`
                             &:hover {
                               background-color: var(
-                                --c--theme--colors--greyscale-100
+                                --c--globals--colors--gray-100
                               );
                             }
                           `}
                         >
                           <AddPageIcon />
                           <Text
-                            $size="14px"
-                            $color="var(--c--theme--colors--greyscale-1000)"
+                            $size="sm"
+                            $color="var(--c--globals--colors--gray-1000)"
                             contentEditable={false}
                           >
                             {t('New sub-doc')}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx
index a5b7c65a..3e4f1efb 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx
@@ -8,7 +8,7 @@ export const cssEditor = css`
   }
 
   & .bn-editor {
-    color: var(--c--theme--colors--greyscale-700);
+    color: var(--c--globals--colors--greyscale-700);
   }
 
   /**
@@ -104,14 +104,14 @@ export const cssEditor = css`
   * Callout, Paragraph and Heading blocks
   */
   .bn-block {
-    border-radius: var(--c--theme--spacings--3xs);
+    border-radius: var(--c--globals--spacings--3xs);
   }
   .bn-block-outer {
-    border-radius: var(--c--theme--spacings--3xs);
+    border-radius: var(--c--globals--spacings--3xs);
   }
   .bn-block > .bn-block-content[data-background-color] {
-    padding: var(--c--theme--spacings--3xs) var(--c--theme--spacings--3xs);
-    border-radius: var(--c--theme--spacings--3xs);
+    padding: var(--c--globals--spacings--3xs) var(--c--globals--spacings--3xs);
+    border-radius: var(--c--globals--spacings--3xs);
   }
   .bn-block-content[data-content-type='checkListItem'][data-checked='true']
     .bn-inline-content {
@@ -127,7 +127,7 @@ export const cssEditor = css`
     font-size: 1.25rem;
   }
   a {
-    color: var(--c--theme--colors--greyscale-600);
+    color: var(--c--globals--colors--greyscale-600);
     cursor: pointer;
   }
   .bn-block-group
@@ -144,7 +144,7 @@ export const cssEditor = css`
   * Quotes
   */
   blockquote {
-    border-left: 4px solid var(--c--theme--colors--greyscale-300);
+    border-left: 4px solid var(--c--globals--colors--gray-300);
     font-style: italic;
   }
 
diff --git a/src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx b/src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx
index 64bb077d..4d0338a2 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx
@@ -174,7 +174,7 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
         <>
           <Button
             aria-label={t('Cancel the download')}
-            color="secondary"
+            variant="secondary"
             fullWidth
             onClick={() => onClose()}
           >
@@ -183,7 +183,7 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
           <Button
             data-testid="doc-export-download-button"
             aria-label={t('Download')}
-            color="primary"
+            variant="primary"
             fullWidth
             onClick={() => void onSubmit()}
             disabled={isExporting}
@@ -205,7 +205,6 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
             $margin="0"
             id="modal-export-title"
             $size="h6"
-            $variation="1000"
             $align="flex-start"
             data-testid="modal-export-title"
           >
@@ -225,7 +224,7 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
         $gap="1rem"
         className="--docs--modal-export-content"
       >
-        <Text $variation="600" $size="sm" as="p">
+        <Text $variation="secondary" $size="sm" as="p">
           {t('Download your document in a .docx, .odt or .pdf format.')}
         </Text>
         <Select
diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertNetwork.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertNetwork.tsx
index 758705af..c2458694 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertNetwork.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertNetwork.tsx
@@ -2,36 +2,37 @@ import { Button, Modal, ModalSize } from '@openfun/cunningham-react';
 import { t } from 'i18next';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { css } from 'styled-components';
 
-import { Box, BoxButton, Icon, Text } from '@/components';
+import { Box, BoxButton, Card, Icon, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 
 export const AlertNetwork = () => {
   const { t } = useTranslation();
-  const { colorsTokens, spacingsTokens } = useCunninghamTheme();
+  const { spacingsTokens } = useCunninghamTheme();
   const [isModalOpen, setIsModalOpen] = useState(false);
 
   return (
     <>
       <Box>
-        <Box
+        <Card
           $direction="row"
           $justify="space-between"
           $width="100%"
-          $background={colorsTokens['warning-100']}
           $radius={spacingsTokens['3xs']}
           $padding="xs"
           $flex={1}
           $align="center"
           $gap={spacingsTokens['2xs']}
-          $css={css`
-            border: 1px solid var(--c--theme--colors--warning-300);
-          `}
+          $theme="warning"
         >
-          <Box $direction="row" $gap={spacingsTokens['2xs']} $align="center">
-            <Icon iconName="mobiledata_off" $theme="warning" $variation="600" />
-            <Text $theme="warning" $variation="600" $weight={500}>
+          <Box
+            $direction="row"
+            $gap={spacingsTokens['2xs']}
+            $align="center"
+            $withThemeInherited
+          >
+            <Icon iconName="mobiledata_off" $withThemeInherited />
+            <Text $withThemeInherited $weight={500}>
               {t('Others are editing. Your network prevent changes.')}
             </Text>
           </Box>
@@ -40,20 +41,20 @@ export const AlertNetwork = () => {
             $gap={spacingsTokens['3xs']}
             $align="center"
             onClick={() => setIsModalOpen(true)}
+            $withThemeInherited
           >
             <Icon
               iconName="info"
-              $theme="warning"
-              $variation="600"
-              $size="16px"
+              $withThemeInherited
+              $size="md"
               $weight="500"
               $margin={{ top: 'auto' }}
             />
-            <Text $theme="warning" $variation="600" $weight="500" $size="xs">
+            <Text $withThemeInherited $weight="500" $size="xs">
               {t('Learn more')}
             </Text>
           </BoxButton>
-        </Box>
+        </Card>
       </Box>
       {isModalOpen && (
         <AlertNetworkModal onClose={() => setIsModalOpen(false)} />
@@ -74,20 +75,14 @@ export const AlertNetworkModal = ({ onClose }: AlertNetworkModalProps) => {
       onClose={() => onClose()}
       rightActions={
         <>
-          <Button aria-label={t('OK')} onClick={onClose} color="danger">
+          <Button aria-label={t('OK')} onClick={onClose} color="error">
             {t('I understand')}
           </Button>
         </>
       }
       size={ModalSize.MEDIUM}
       title={
-        <Text
-          $size="h6"
-          as="h6"
-          $margin={{ all: '0' }}
-          $align="flex-start"
-          $variation="1000"
-        >
+        <Text $size="h6" as="h6" $margin={{ all: '0' }} $align="flex-start">
           {t("Why you can't edit the document?")}
         </Text>
       }
@@ -97,14 +92,14 @@ export const AlertNetworkModal = ({ onClose }: AlertNetworkModalProps) => {
         className="--docs--modal-alert-network"
         $margin={{ top: 'md' }}
       >
-        <Text $size="sm" $variation="600">
+        <Text $size="sm" $variation="secondary">
           {t(
             'Others are editing this document. Unfortunately your network blocks WebSockets, the technology enabling real-time co-editing.',
           )}
         </Text>
         <Text
           $size="sm"
-          $variation="600"
+          $variation="secondary"
           $margin={{ top: 'xs' }}
           $weight="bold"
           $display="inline"
@@ -112,7 +107,7 @@ export const AlertNetworkModal = ({ onClose }: AlertNetworkModalProps) => {
           {t("This means you can't edit until others leave.")}{' '}
           <Text
             $size="sm"
-            $variation="600"
+            $variation="secondary"
             $margin={{ top: 'xs' }}
             $weight="normal"
             $display="inline"
diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertPublic.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertPublic.tsx
index 513fd999..97e9190a 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertPublic.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertPublic.tsx
@@ -1,39 +1,33 @@
 import { useTranslation } from 'react-i18next';
-import { css } from 'styled-components';
 
-import { Box, Icon, Text } from '@/components';
+import { Card, Icon, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 
 export const AlertPublic = ({ isPublicDoc }: { isPublicDoc: boolean }) => {
   const { t } = useTranslation();
-  const { colorsTokens, spacingsTokens } = useCunninghamTheme();
+  const { spacingsTokens } = useCunninghamTheme();
 
   return (
-    <Box
+    <Card
       aria-label={t('Public document')}
-      $color={colorsTokens['primary-800']}
-      $background={colorsTokens['primary-050']}
       $radius={spacingsTokens['3xs']}
       $direction="row"
       $padding="xs"
       $flex={1}
       $align="center"
       $gap={spacingsTokens['2xs']}
-      $css={css`
-        border: 1px solid var(--c--theme--colors--primary-300, #e3e3fd);
-      `}
+      $theme="brand"
     >
       <Icon
-        $theme="primary"
-        $variation="800"
+        $withThemeInherited
         data-testid="public-icon"
         iconName={isPublicDoc ? 'public' : 'vpn_lock'}
       />
-      <Text $theme="primary" $variation="800" $weight="500">
+      <Text $withThemeInherited $weight="500">
         {isPublicDoc
           ? t('Public document')
           : t('Document accessible to any connected person')}
       </Text>
-    </Box>
+    </Card>
   );
 };
diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertRestore.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertRestore.tsx
index 236feab0..21feaa6f 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertRestore.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertRestore.tsx
@@ -1,9 +1,12 @@
 import { useTreeContext } from '@gouvfr-lasuite/ui-kit';
-import { VariantType, useToastProvider } from '@openfun/cunningham-react';
+import {
+  Button,
+  VariantType,
+  useToastProvider,
+} from '@openfun/cunningham-react';
 import { useTranslation } from 'react-i18next';
-import { css } from 'styled-components';
 
-import { Box, BoxButton, Icon, Text } from '@/components';
+import { Box, Card, Icon } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 import {
   Doc,
@@ -17,7 +20,7 @@ export const AlertRestore = ({ doc }: { doc: Doc }) => {
   const { t } = useTranslation();
   const { toast } = useToastProvider();
   const treeContext = useTreeContext<Doc>();
-  const { colorsTokens, spacingsTokens } = useCunninghamTheme();
+  const { spacingsTokens } = useCunninghamTheme();
   const { mutate: restoreDoc, error } = useRestoreDoc({
     listInvalidQueries: [KEY_LIST_DOC, KEY_LIST_DOC_TRASHBIN, KEY_DOC],
     options: {
@@ -44,57 +47,52 @@ export const AlertRestore = ({ doc }: { doc: Doc }) => {
   });
 
   return (
-    <Box
+    <Card
       className="--docs--alert-restore"
       aria-label={t('Alert deleted document')}
-      $color={colorsTokens['danger-800']}
-      $background={colorsTokens['danger-100']}
       $radius={spacingsTokens['3xs']}
       $direction="row"
       $padding="xs"
       $flex={1}
       $align="center"
       $gap={spacingsTokens['3xs']}
-      $css={css`
-        border: 1px solid var(--c--theme--colors--danger-300, #e3e3fd);
-      `}
       $justify="space-between"
+      $theme="error"
     >
-      <Box $direction="row" $align="center" $gap={spacingsTokens['2xs']}>
+      <Box
+        $withThemeInherited
+        $direction="row"
+        $align="center"
+        $gap={spacingsTokens['2xs']}
+      >
         <Icon
-          $theme="danger"
-          $variation="700"
+          $withThemeInherited
           data-testid="public-icon"
           iconName="delete"
           variant="symbols-outlined"
         />
-        <Text $theme="danger" $variation="700" $weight="500">
-          {t('Document deleted')}
-        </Text>
+        {t('Document deleted')}
       </Box>
-      <BoxButton
+      <Button
         onClick={() =>
           restoreDoc({
             docId: doc.id,
           })
         }
-        $direction="row"
-        $gap="0.2rem"
-        $theme="danger"
-        $variation="600"
-        $align="center"
+        color="error"
+        variant="tertiary"
+        size="nano"
+        icon={
+          <Icon
+            iconName="undo"
+            $withThemeInherited
+            $size="18px"
+            variant="symbols-outlined"
+          />
+        }
       >
-        <Icon
-          iconName="undo"
-          $theme="danger"
-          $variation="600"
-          $size="18px"
-          variant="symbols-outlined"
-        />
-        <Text $theme="danger" $variation="600" $size="s" $css="line-height:1;">
-          {t('Restore')}
-        </Text>
-      </BoxButton>
-    </Box>
+        Restore
+      </Button>
+    </Card>
   );
 };
diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/BoutonShare.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/BoutonShare.tsx
index c821e5ac..8a3c5055 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/BoutonShare.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/BoutonShare.tsx
@@ -46,20 +46,19 @@ export const BoutonShare = ({
       <Box
         $css={css`
           .c__button--medium {
-            height: 32px;
-            padding: 10px var(--c--theme--spacings--xs);
+            height: var(--c--globals--spacings--lg);
+            padding: 10px var(--c--globals--spacings--xs);
             gap: 7px;
           }
         `}
       >
         <Button
-          color="tertiary"
           aria-label={t('Share button')}
+          variant="secondary"
           icon={
             <Icon
               iconName="group"
-              $theme="primary"
-              $variation="800"
+              $color="inherit"
               variant="filled"
               disabled={isDisabled}
             />
@@ -76,7 +75,8 @@ export const BoutonShare = ({
 
   return (
     <Button
-      color="primary-text"
+      color="brand"
+      variant="tertiary"
       onClick={open}
       size="medium"
       disabled={isDisabled}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeaderInfo.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeaderInfo.tsx
index 998dce3f..534f5050 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeaderInfo.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeaderInfo.tsx
@@ -47,15 +47,15 @@ export const DocHeaderInfo = ({ doc }: DocHeaderInfoProps) => {
     return (
       <>
         <Text
-          $variation="600"
+          $variation="tertiary"
           $size="s"
           $weight="bold"
-          $theme={isEditable ? 'greyscale' : 'warning'}
+          $theme={isEditable ? 'gray' : 'warning'}
         >
           {transRole(isEditable ? doc.user_role || doc.link_role : Role.READER)}
           &nbsp;·&nbsp;
         </Text>
-        <Text $variation="600" $size="s">
+        <Text $variation="tertiary" $size="s">
           {dateToDisplay}
         </Text>
       </>
@@ -64,11 +64,11 @@ export const DocHeaderInfo = ({ doc }: DocHeaderInfoProps) => {
 
   return (
     <>
-      <Text $variation="400" $size="s">
+      <Text $variation="tertiary" $size="s">
         {hasChildren ? relativeOnly : dateToDisplay}
       </Text>
       {hasChildren && (
-        <Text $variation="400" $size="s">
+        <Text $variation="tertiary" $size="s">
           &nbsp;•&nbsp;
           {t('Contains {{count}} sub-documents', {
             count: childrenCount,
diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx
index 4fdbdad9..043efb45 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx
@@ -43,7 +43,6 @@ export const DocTitleText = () => {
       as="h2"
       $margin={{ all: 'none', left: 'none' }}
       $size={isMobile ? 'h4' : 'h2'}
-      $variation="1000"
     >
       {currentDoc?.title || untitledDocument}
     </Text>
@@ -71,10 +70,11 @@ const DocTitleEmojiPicker = ({ doc }: DocTitleProps) => {
           padding-top: 3px;
           cursor: pointer;
           &:hover {
-            background-color: ${colorsTokens['greyscale-100']};
-            border-radius: 4px;
+            background-color: ${colorsTokens['gray-100']};
+            border-radius: var(--c--globals--spacings--st);
           }
-          transition: background-color 0.2s ease-in-out;
+          transition: background-color var(--c--globals--transitions--duration)
+            var(--c--globals--transitions--ease-out);
         `}
       >
         <DocIcon
@@ -95,7 +95,7 @@ const DocTitleEmojiPicker = ({ doc }: DocTitleProps) => {
               height="25px"
               aria-hidden="true"
               aria-label={t('Simple document icon')}
-              color={colorsTokens['primary-500']}
+              color={colorsTokens['brand-500']}
             />
           }
         />
@@ -107,7 +107,6 @@ const DocTitleEmojiPicker = ({ doc }: DocTitleProps) => {
 const DocTitleInput = ({ doc }: DocTitleProps) => {
   const { isDesktop } = useResponsiveStore();
   const { t } = useTranslation();
-  const { colorsTokens } = useCunninghamTheme();
   const { isTopRoot } = useDocUtils(doc);
   const { untitledDocument } = useTrans();
   const { emoji, titleWithoutEmoji } = getEmojiAndTitle(doc.title ?? '');
@@ -177,18 +176,19 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
           onBlurCapture={(event) =>
             handleTitleSubmit(event.target.textContent || '')
           }
-          $color={colorsTokens['greyscale-1000']}
           $padding={{ right: 'big' }}
           $css={css`
             &[contenteditable='true']:empty:not(:focus):before {
               content: '${untitledDocument}';
-              color: grey;
+              color: var(
+                --c--contextuals--content--semantic--neutral--tertiary
+              );
               pointer-events: none;
               font-style: italic;
             }
             font-size: ${isDesktop
-              ? css`var(--c--theme--font--sizes--h2)`
-              : css`var(--c--theme--font--sizes--sm)`};
+              ? css`var(--c--globals--font--sizes--h2)`
+              : css`var(--c--globals--font--sizes--sm)`};
             font-weight: 700;
             outline: none;
           `}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx
index 823e34a4..f3a1fa77 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx
@@ -215,14 +215,9 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
         {!isSmallMobile && ModalExport && (
           <Button
             data-testid="doc-open-modal-download-button"
-            color="tertiary-text"
+            variant="tertiary"
             icon={
-              <Icon
-                iconName="download"
-                $theme="primary"
-                $variation="800"
-                aria-hidden={true}
-              />
+              <Icon iconName="download" $color="inherit" aria-hidden={true} />
             }
             onClick={() => {
               setIsModalExportOpen(true);
@@ -236,17 +231,14 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
           label={t('Open the document options')}
           buttonCss={css`
             padding: ${spacingsTokens['xs']};
-            &:hover {
-              background-color: ${colorsTokens['greyscale-100']};
-            }
             ${isSmallMobile
               ? css`
-                  border: 1px solid ${colorsTokens['greyscale-300']};
+                  border: 1px solid ${colorsTokens['gray-300']};
                 `
               : ''}
           `}
         >
-          <IconOptions aria-hidden="true" isHorizontal $theme="primary" />
+          <IconOptions aria-hidden="true" isHorizontal $color="inherit" />
         </DropdownMenu>
       </Box>
 
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/DocIcon.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/DocIcon.tsx
index 5c68b1ca..2218bb6e 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-management/components/DocIcon.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/DocIcon.tsx
@@ -21,7 +21,7 @@ export const DocIcon = ({
   emoji,
   defaultIcon,
   $size = 'sm',
-  $variation = '1000',
+  $variation = 'secondary',
   $weight = '400',
   docId,
   title,
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/DocPage403.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/DocPage403.tsx
index b7614290..42519ebf 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-management/components/DocPage403.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/DocPage403.tsx
@@ -65,7 +65,6 @@ export const DocPage403 = ({ id }: DocProps) => {
         $padding={{ bottom: '2rem' }}
       >
         <Image
-          className="c__image-system-filter"
           src={img403}
           alt={t('Image 403')}
           width={300}
@@ -77,7 +76,7 @@ export const DocPage403 = ({ id }: DocProps) => {
         />
 
         <Box $align="center" $gap="0.8rem">
-          <Text as="p" $textAlign="center" $maxWidth="350px" $theme="primary">
+          <Text as="p" $textAlign="center" $maxWidth="350px" $theme="brand">
             {hasRequested
               ? t('Your access request for this document is pending.')
               : t('Insufficient access rights to view the document.')}
@@ -88,7 +87,6 @@ export const DocPage403 = ({ id }: DocProps) => {
               as="p"
               $maxWidth="320px"
               $textAlign="center"
-              $variation="600"
               $size="sm"
               $margin={{ top: '0' }}
             >
@@ -101,8 +99,9 @@ export const DocPage403 = ({ id }: DocProps) => {
           <Box $direction="row" $gap="0.7rem">
             <StyledLink href="/">
               <StyledButton
-                icon={<Icon iconName="house" $theme="primary" />}
-                color="tertiary"
+                icon={<Icon iconName="house" $withThemeInherited />}
+                color="brand"
+                variant="secondary"
               >
                 {t('Home')}
               </StyledButton>
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx
index 5edaf2ee..d98458f9 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx
@@ -98,7 +98,7 @@ export const ModalRemoveDoc = ({
           <Button
             ref={cancelButtonRef}
             aria-label={t('Cancel the deletion')}
-            color="secondary"
+            variant="secondary"
             fullWidth
             onClick={handleClose}
             onKeyDown={handleCloseKeyDown}
@@ -107,7 +107,7 @@ export const ModalRemoveDoc = ({
           </Button>
           <Button
             aria-label={t('Delete document')}
-            color="danger"
+            color="error"
             fullWidth
             onClick={handleDelete}
             onKeyDown={handleDeleteKeyDown}
@@ -130,7 +130,6 @@ export const ModalRemoveDoc = ({
             id="modal-remove-doc-title"
             $margin="0"
             $align="flex-start"
-            $variation="1000"
           >
             {t('Delete a doc')}
           </Text>
@@ -144,7 +143,12 @@ export const ModalRemoveDoc = ({
     >
       <Box className="--docs--modal-remove-doc">
         {!isError && (
-          <Text $size="sm" $variation="600" $display="inline-block" as="p">
+          <Text
+            $size="sm"
+            $variation="secondary"
+            $display="inline-block"
+            as="p"
+          >
             {hasChildren ? (
               <Trans t={t}>
                 This document and <strong>any sub-documents</strong> will be
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx
index 45e41256..6b4be46b 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx
@@ -33,7 +33,7 @@ export const SimpleDocItem = ({
   showAccesses = false,
 }: SimpleDocItemProps) => {
   const { t } = useTranslation();
-  const { spacingsTokens, colorsTokens } = useCunninghamTheme();
+  const { spacingsTokens } = useCunninghamTheme();
   const { isDesktop } = useResponsiveStore();
   const { untitledDocument } = useTrans();
   const { isChild } = useDocUtils(doc);
@@ -63,13 +63,13 @@ export const SimpleDocItem = ({
           <PinnedDocumentIcon
             aria-hidden="true"
             data-testid="doc-pinned-icon"
-            color={colorsTokens['primary-500']}
+            color="var(--c--contextuals--content--semantic--info--tertiary)"
           />
         ) : isChild ? (
           <ChildDocument
             aria-hidden="true"
             data-testid="doc-child-icon"
-            color={colorsTokens['primary-500']}
+            color="var(--c--contextuals--content--semantic--info--tertiary)"
           />
         ) : (
           <SimpleFileIcon
@@ -77,14 +77,13 @@ export const SimpleDocItem = ({
             height="32px"
             aria-hidden="true"
             data-testid="doc-simple-icon"
-            color={colorsTokens['primary-500']}
+            color="var(--c--contextuals--content--semantic--info--tertiary)"
           />
         )}
       </Box>
       <Box $justify="center" $overflow="auto">
         <Text
           $size="sm"
-          $variation="1000"
           $weight="500"
           $css={ItemTextCss}
           data-testid="doc-title"
@@ -99,7 +98,7 @@ export const SimpleDocItem = ({
             $margin={{ top: '-2px' }}
             aria-hidden="true"
           >
-            <Text $variation="600" $size="xs">
+            <Text $size="xs" $variation="tertiary">
               {DateTime.fromISO(doc.updated_at).toRelative()}
             </Text>
           </Box>
diff --git a/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchFilters.tsx b/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchFilters.tsx
index 96edcf71..74025caf 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchFilters.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchFilters.tsx
@@ -58,7 +58,7 @@ export const DocSearchFilters = ({
         />
       </Box>
       {hasFilters && (
-        <Button color="primary-text" size="small" onClick={onReset}>
+        <Button color="brand" variant="tertiary" size="small" onClick={onReset}>
           {t('Reset')}
         </Button>
       )}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchItem.tsx
index 59b9b47b..8e5f8cdc 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchItem.tsx
@@ -24,7 +24,11 @@ export const DocSearchItem = ({ doc }: DocSearchItemProps) => {
           </Box>
         }
         right={
-          <Icon iconName="keyboard_return" $theme="primary" $variation="800" />
+          <Icon
+            iconName="keyboard_return"
+            $theme="brand"
+            $variation="secondary"
+          />
         }
       />
     </Box>
diff --git a/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx b/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx
index ab23a672..cce153fc 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx
@@ -85,7 +85,8 @@ const DocSearchModalGlobal = ({
             aria-label={t('Close the search modal')}
             onClick={modalProps.onClose}
             size="small"
-            color="primary-text"
+            color="brand"
+            variant="tertiary"
           />
         </Box>
         <QuickSearch
@@ -112,7 +113,6 @@ const DocSearchModalGlobal = ({
                 $justify="center"
               >
                 <Image
-                  className="c__image-system-filter"
                   width={320}
                   src={EmptySearchIcon}
                   alt={t('No active search')}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/assets/desynchro.svg b/src/frontend/apps/impress/src/features/docs/doc-share/assets/desynchro.svg
index 48efb1b2..d682fe52 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/assets/desynchro.svg
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/assets/desynchro.svg
@@ -9,7 +9,7 @@
     <path
       id="&#244;&#128;&#153;&#160;"
       d="M5.99986 12.2256C5.99986 11.7946 6.25238 11.5791 6.75741 11.5791H10.4145C10.802 11.5791 11.2156 11.4811 11.6553 11.2852C12.0994 11.0893 12.5413 10.8302 12.981 10.508C13.4208 10.1902 13.8235 9.84192 14.1892 9.46314C14.5593 9.08437 14.864 8.70778 15.1035 8.33336L15.4496 7.80438C15.5802 7.59105 15.7718 7.48438 16.0243 7.48438C16.1897 7.48438 16.3334 7.5388 16.4553 7.64765C16.5816 7.76084 16.6447 7.91758 16.6447 8.11785C16.6447 8.30506 16.5837 8.48791 16.4618 8.66641L16.2398 9.01254C15.996 9.37389 15.7086 9.7309 15.3778 10.0835C15.0469 10.4362 14.6964 10.7606 14.3263 11.0566C13.9606 11.357 13.6058 11.6073 13.2619 11.8076C12.9179 12.0122 12.6153 12.1472 12.3541 12.2125V12.2386C12.6153 12.2996 12.9179 12.4324 13.2619 12.637C13.6058 12.8416 13.9606 13.0941 14.3263 13.3945C14.6921 13.695 15.0404 14.0193 15.3712 14.3676C15.7065 14.7203 15.996 15.0794 16.2398 15.4451L16.4618 15.7847C16.5837 15.9632 16.6447 16.1461 16.6447 16.3333C16.6447 16.5292 16.5837 16.6838 16.4618 16.797C16.3443 16.9102 16.1963 16.9668 16.0178 16.9668C15.7696 16.9668 15.5802 16.8601 15.4496 16.6468L15.1035 16.1243C14.864 15.7499 14.5593 15.3711 14.1892 14.988C13.8235 14.6092 13.4208 14.2588 12.981 13.9366C12.5413 13.6188 12.0994 13.3619 11.6553 13.166C11.2156 12.9701 10.802 12.8721 10.4145 12.8721H6.75741C6.25238 12.8721 5.99986 12.6566 5.99986 12.2256ZM14.3068 7.64112C14.1065 7.48438 14.0303 7.32329 14.0782 7.15785C14.1261 6.99677 14.2697 6.88139 14.5092 6.81173L17.0822 6.03459C17.2782 5.97364 17.4392 5.99323 17.5655 6.09337C17.6918 6.1935 17.7505 6.34371 17.7418 6.54398L17.6308 9.23457C17.6221 9.48274 17.5437 9.64818 17.3957 9.7309C17.252 9.81362 17.0822 9.78097 16.8863 9.63294L14.3068 7.64112ZM14.3198 16.7251L16.9516 14.8117C17.1519 14.6637 17.3239 14.6354 17.4675 14.7268C17.6112 14.8182 17.6831 14.9858 17.6831 15.2296L17.7157 17.9268C17.7157 18.127 17.6504 18.2729 17.5198 18.3643C17.3935 18.4601 17.2324 18.4753 17.0365 18.41L14.4896 17.5545C14.2545 17.4805 14.1152 17.3608 14.0717 17.1953C14.0281 17.0299 14.1108 16.8732 14.3198 16.7251Z"
-      fill="#000091"
+      fill="currentColor"
     />
   </g>
 </svg>
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/assets/undo.svg b/src/frontend/apps/impress/src/features/docs/doc-share/assets/undo.svg
index 6d715a0c..139ce42d 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/assets/undo.svg
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/assets/undo.svg
@@ -9,7 +9,7 @@
     <path
       id="v"
       d="M4.6665 12.667V11.3337H9.39984C10.0998 11.3337 10.7082 11.1114 11.2248 10.667C11.7415 10.2225 11.9998 9.66699 11.9998 9.00033C11.9998 8.33366 11.7415 7.7781 11.2248 7.33366C10.7082 6.88921 10.0998 6.66699 9.39984 6.66699H5.19984L6.93317 8.40033L5.99984 9.33366L2.6665 6.00033L5.99984 2.66699L6.93317 3.60033L5.19984 5.33366H9.39984C10.4776 5.33366 11.4026 5.68366 12.1748 6.38366C12.9471 7.08366 13.3332 7.95588 13.3332 9.00033C13.3332 10.0448 12.9471 10.917 12.1748 11.617C11.4026 12.317 10.4776 12.667 9.39984 12.667H4.6665Z"
-      fill="#000091"
+      fill="currentColor"
     />
   </g>
 </svg>
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocDesynchronized.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocDesynchronized.tsx
index 2dead48e..87038abf 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocDesynchronized.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocDesynchronized.tsx
@@ -1,8 +1,7 @@
 import { Button } from '@openfun/cunningham-react';
 import { useTranslation } from 'react-i18next';
-import { css } from 'styled-components';
 
-import { Box, Text } from '@/components';
+import { Box, Card, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 import { Doc, KEY_DOC, KEY_LIST_DOC } from '@/docs/doc-management';
 
@@ -17,29 +16,29 @@ interface DocDesynchronizedProps {
 
 export const DocDesynchronized = ({ doc }: DocDesynchronizedProps) => {
   const { t } = useTranslation();
-  const { spacingsTokens, colorsTokens } = useCunninghamTheme();
+  const { spacingsTokens } = useCunninghamTheme();
 
   const { mutate: updateDocLink } = useUpdateDocLink({
     listInvalidQueries: [KEY_LIST_DOC, KEY_DOC],
   });
 
   return (
-    <Box
-      $background={colorsTokens['primary-100']}
+    <Card
       $padding="3xs"
       $direction="row"
       $align="center"
       $justify="space-between"
       $gap={spacingsTokens['4xs']}
-      $color={colorsTokens['primary-800']}
-      $css={css`
-        border: 1px solid ${colorsTokens['primary-300']};
-        border-radius: ${spacingsTokens['2xs']};
-      `}
+      $theme="brand"
     >
-      <Box $direction="row" $align="center" $gap={spacingsTokens['3xs']}>
+      <Box
+        $withThemeInherited
+        $direction="row"
+        $align="center"
+        $gap={spacingsTokens['3xs']}
+      >
         <Desync />
-        <Text $size="xs" $theme="primary" $variation="800" $weight="400">
+        <Text $size="xs" $withThemeInherited $weight="400">
           {t('The link sharing rules differ from the parent document')}
         </Text>
       </Box>
@@ -53,12 +52,13 @@ export const DocDesynchronized = ({ doc }: DocDesynchronizedProps) => {
             })
           }
           size="small"
-          color="primary-text"
+          color="brand"
+          variant="tertiary"
           icon={<Undo />}
         >
           {t('Restore')}
         </Button>
       )}
-    </Box>
+    </Card>
   );
 };
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocInheritedShareContent.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocInheritedShareContent.tsx
index 86175eda..4c0a133f 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocInheritedShareContent.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocInheritedShareContent.tsx
@@ -41,21 +41,16 @@ export const DocInheritedShareContent = ({
         }}
       >
         <Box $direction="row" $align="center" $gap={spacingsTokens['4xs']}>
-          <Text $variation="1000" $weight="bold" $size="sm">
+          <Text $weight="bold" $size="sm">
             {t('People with access via the parent document')}
           </Text>
           <Box>
             <StyledLink href={`/docs/${rawAccesses[0].document.id}`}>
               <Button
                 size="small"
-                icon={
-                  <Icon
-                    $theme="greyscale"
-                    $variation="600"
-                    iconName="open_in_new"
-                  />
-                }
-                color="tertiary-text"
+                icon={<Icon iconName="open_in_new" />}
+                color="neutral"
+                variant="tertiary"
               />
             </StyledLink>
           </Box>
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocRoleDropdown.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocRoleDropdown.tsx
index 0b28b589..67656d61 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocRoleDropdown.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocRoleDropdown.tsx
@@ -106,7 +106,12 @@ export const DocRoleDropdown = ({
 
   if (!canUpdate) {
     return (
-      <Text aria-label={t('Document role text')} $variation="600">
+      <Text
+        $variation="tertiary"
+        aria-label={t('Document role text')}
+        $weight={500}
+        $size="s"
+      >
         {transRole(currentRole)}
       </Text>
     );
@@ -121,7 +126,8 @@ export const DocRoleDropdown = ({
       })}
       showArrow={true}
       arrowCss={css`
-        color: var(--c--theme--colors--primary-800) !important;
+        color: var(--c--contextuals--content--semantic--brand--tertiary);
+        font-size: 16px;
       `}
       testId="doc-role-dropdown"
       options={[
@@ -132,8 +138,14 @@ export const DocRoleDropdown = ({
           callback: onRemove,
         },
       ]}
+      buttonCss={css`
+        &:hover {
+          background: none;
+        }
+        font-size: 12px;
+      `}
     >
-      <Text $theme="primary" $variation="800">
+      <Text $theme="brand" $variation="tertiary">
         {transRole(currentRole)}
       </Text>
     </DropdownMenu>
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAccessRequest.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAccessRequest.tsx
index fca2e134..3b4bcc39 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAccessRequest.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAccessRequest.tsx
@@ -83,7 +83,8 @@ const DocShareAccessRequestItem = ({ doc, accessRequest }: Props) => {
               })}
             />
             <Button
-              color="tertiary"
+              color="brand"
+              variant="tertiary"
               onClick={() =>
                 acceptDocAccessRequests({
                   docId: doc.id,
@@ -106,7 +107,7 @@ const DocShareAccessRequestItem = ({ doc, accessRequest }: Props) => {
                 }
                 aria-label={t('Close the access request modal')}
               >
-                <Icon iconName="close" $variation="600" $size="16px" />
+                <Icon iconName="close" $size="16px" />
               </BoxButton>
             )}
           </Box>
@@ -197,7 +198,7 @@ export const ButtonAccessRequest = ({
 
   if (docAccessError?.status === 404) {
     return (
-      <Text $maxWidth="320px" $textAlign="center" $variation="600" $size="sm">
+      <Text $maxWidth="320px" $textAlign="center" $size="sm">
         {t(
           'As this is a sub-document, please request access to the parent document to enable these features.',
         )}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberList.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberList.tsx
index b197cd30..bf30ec0f 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberList.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberList.tsx
@@ -5,10 +5,9 @@ import {
 } from '@openfun/cunningham-react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { css } from 'styled-components';
 
 import { APIError } from '@/api';
-import { Box } from '@/components';
+import { Box, Card } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 import { Doc, Role } from '@/docs/doc-management';
 import { User } from '@/features/auth';
@@ -41,7 +40,7 @@ export const DocShareAddMemberList = ({
   const { toast } = useToastProvider();
 
   const [isLoading, setIsLoading] = useState(false);
-  const { spacingsTokens, colorsTokens } = useCunninghamTheme();
+  const { spacingsTokens } = useCunninghamTheme();
   const [invitationRole, setInvitationRole] = useState<Role>(Role.EDITOR);
   const canShare = doc.abilities.accesses_manage;
   const { mutateAsync: createInvitation } = useCreateDocInvitation();
@@ -116,17 +115,16 @@ export const DocShareAddMemberList = ({
       : t('Invite {{count}} members', { count: selectedUsers.length });
 
   return (
-    <Box
+    <Card
+      className="--docs--doc-share-add-member-list"
       data-testid="doc-share-add-member-list"
       $direction="row"
-      $padding={spacingsTokens.sm}
       $align="center"
-      $background={colorsTokens['greyscale-050']}
-      $radius={spacingsTokens['3xs']}
-      $css={css`
-        border: 1px solid ${colorsTokens['greyscale-200']};
-      `}
-      className="--docs--doc-share-add-member-list"
+      $padding={spacingsTokens.sm}
+      $scope="surface"
+      $theme="tertiary"
+      $variation=""
+      $border="1px solid var(--c--contextuals--border--semantic--contextual--primary)"
     >
       <Box
         $direction="row"
@@ -148,6 +146,7 @@ export const DocShareAddMemberList = ({
           canUpdate={canShare}
           currentRole={invitationRole}
           onSelectRole={setInvitationRole}
+          ariaLabel={t('Invite new members')}
         />
         <Button
           onClick={() => void onInvite()}
@@ -158,6 +157,6 @@ export const DocShareAddMemberList = ({
           {t('Invite')}
         </Button>
       </Box>
-    </Box>
+    </Card>
   );
 };
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberListItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberListItem.tsx
index fe678923..7205ac8c 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberListItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberListItem.tsx
@@ -1,8 +1,6 @@
-import { Button } from '@openfun/cunningham-react';
 import { useTranslation } from 'react-i18next';
-import { css } from 'styled-components';
 
-import { Box, Icon, Text } from '@/components';
+import { Box, BoxButton, Icon, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 import { User } from '@/features/auth';
 
@@ -12,11 +10,11 @@ type Props = {
 };
 export const DocShareAddMemberListItem = ({ user, onRemoveUser }: Props) => {
   const { t } = useTranslation();
-  const { spacingsTokens, colorsTokens, fontSizesTokens } =
-    useCunninghamTheme();
+  const { spacingsTokens } = useCunninghamTheme();
 
   return (
     <Box
+      className="--docs--doc-share-add-member-list-item"
       data-testid={`doc-share-add-member-${user.email}`}
       $radius={spacingsTokens['3xs']}
       $direction="row"
@@ -24,30 +22,27 @@ export const DocShareAddMemberListItem = ({ user, onRemoveUser }: Props) => {
       $justify="center"
       $align="center"
       $gap={spacingsTokens['3xs']}
-      $background={colorsTokens['greyscale-250']}
       $padding={{
         left: spacingsTokens['xs'],
         right: spacingsTokens['4xs'],
         vertical: spacingsTokens['4xs'],
       }}
-      $css={css`
-        color: ${colorsTokens['greyscale-1000']};
-        font-size: ${fontSizesTokens['xs']};
-      `}
-      className="--docs--doc-share-add-member-list-item"
+      $withThemeBG
+      $theme="neutral"
+      $variation="secondary"
     >
-      <Text $variation="1000" $size="xs">
+      <Text $withThemeInherited $size="xs">
         {user.full_name || user.email}
       </Text>
-      <Button
-        color="tertiary-text"
-        size="nano"
+      <BoxButton
         onClick={() => onRemoveUser?.(user)}
-        icon={<Icon $variation="600" $size="sm" iconName="close" />}
         aria-label={t('Remove {{name}} from the invite list', {
           name: user.full_name || user.email,
         })}
-      />
+        $withThemeInherited
+      >
+        <Icon $withThemeInherited $size="sm" iconName="close" />
+      </BoxButton>
     </Box>
   );
 };
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx
index 33d7a1bb..c6ca0682 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx
@@ -262,7 +262,7 @@ export const DocShareModal = ({ doc, onClose, isRootDoc = true }: Props) => {
                   <Text
                     $maxWidth="320px"
                     $textAlign="center"
-                    $variation="600"
+                    $variation="secondary"
                     $size="sm"
                     as="p"
                   >
@@ -272,7 +272,7 @@ export const DocShareModal = ({ doc, onClose, isRootDoc = true }: Props) => {
                   </Text>
                   <ButtonAccessRequest
                     docId={doc.id}
-                    color="tertiary"
+                    variant="secondary"
                     size="small"
                   />
                 </Box>
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModalFooter.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModalFooter.tsx
index 951aa82f..59c3e178 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModalFooter.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModalFooter.tsx
@@ -2,7 +2,7 @@ import { Button } from '@openfun/cunningham-react';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
-import { Box, HorizontalSeparator } from '@/components';
+import { Box, HorizontalSeparator, Icon } from '@/components';
 import { Doc, useCopyDocLink } from '@/docs/doc-management';
 
 import { DocVisibility } from './DocVisibility';
@@ -38,18 +38,12 @@ export const DocShareModalFooter = ({
         <Button
           fullWidth={false}
           onClick={copyDocLink}
-          color="tertiary"
-          icon={
-            <span className="material-icons" aria-hidden={true}>
-              add_link
-            </span>
-          }
+          variant="secondary"
+          icon={<Icon iconName="add_link" $withThemeInherited />}
         >
           {t('Copy link')}
         </Button>
-        <Button onClick={onClose} color="primary">
-          {t('OK')}
-        </Button>
+        <Button onClick={onClose}>{t('OK')}</Button>
       </Box>
     </Box>
   );
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocVisibility.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocVisibility.tsx
index baf35a30..9971434d 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocVisibility.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocVisibility.tsx
@@ -34,7 +34,7 @@ interface DocVisibilityProps {
 export const DocVisibility = ({ doc }: DocVisibilityProps) => {
   const { t } = useTranslation();
   const { isDesktop } = useResponsiveStore();
-  const { spacingsTokens, colorsTokens } = useCunninghamTheme();
+  const { spacingsTokens } = useCunninghamTheme();
   const canManage = doc.abilities.accesses_manage;
   const docLinkReach = getDocLinkReach(doc);
   const docLinkRole = getDocLinkRole(doc);
@@ -123,7 +123,7 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => {
       $gap={spacingsTokens['base']}
       className="--docs--doc-visibility"
     >
-      <Text $weight="700" $size="sm" $variation="700">
+      <Text $weight="700" $size="sm">
         {t('Link settings')}
       </Text>
       {isDesynchronized && <DocDesynchronized doc={doc} />}
@@ -145,7 +145,9 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => {
             testId="doc-visibility"
             label={t('Document visibility')}
             arrowCss={css`
-              color: ${colorsTokens['primary-800']} !important;
+              color: var(
+                --c--contextuals--content--semantic--brand--tertiary
+              ) !important;
             `}
             buttonCss={css`
               &:hover {
@@ -163,24 +165,24 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => {
             }
             options={linkReachOptions}
           >
-            <Box $direction="row" $align="center" $gap={spacingsTokens['3xs']}>
+            <Box
+              $theme={canManage ? 'brand' : 'gray'}
+              $variation={canManage ? 'tertiary' : 'primary'}
+              $direction="row"
+              $align="center"
+              $gap={spacingsTokens['3xs']}
+            >
               <Icon
-                $theme={canManage ? 'primary' : 'greyscale'}
-                $variation={canManage ? '800' : '600'}
                 iconName={linkReachChoices[docLinkReach].icon}
+                $withThemeInherited
               />
-              <Text
-                $theme={canManage ? 'primary' : 'greyscale'}
-                $variation={canManage ? '800' : '600'}
-                $weight="500"
-                $size="md"
-              >
+              <Text $weight="500" $size="md" $withThemeInherited>
                 {linkReachChoices[docLinkReach].label}
               </Text>
             </Box>
           </DropdownMenu>
           {isDesktop && (
-            <Text $size="xs" $variation="600" $weight="400">
+            <Text $size="xs" $variation="secondary" $weight="400">
               {description}
             </Text>
           )}
@@ -193,6 +195,13 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => {
                 &:hover {
                   background-color: unset;
                 }
+                font-size: 12px;
+              `}
+              arrowCss={css`
+                color: var(
+                  --c--contextuals--content--semantic--brand--tertiary
+                ) !important;
+                font-size: 16px;
               `}
               disabled={!canManage}
               showArrow={true}
@@ -206,7 +215,7 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => {
               }
               label={t('Document access mode')}
             >
-              <Text $weight="initial" $variation="600" $theme="primary">
+              <Text $weight="initial" $theme="brand" $variation="tertiary">
                 {linkModeTranslations[docLinkRole]}
               </Text>
             </DropdownMenu>
@@ -214,7 +223,7 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => {
         )}
       </Box>
       {!isDesktop && (
-        <Text $size="xs" $variation="600">
+        <Text $size="xs" $variation="secondary">
           {description}
         </Text>
       )}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/SearchUserRow.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/SearchUserRow.tsx
index 1ff6f67a..3ba97e5d 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/SearchUserRow.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/SearchUserRow.tsx
@@ -35,16 +35,14 @@ export const SearchUserRow = ({
         >
           <UserAvatar
             fullName={user.full_name || user.email}
-            background={
-              isInvitation ? colorsTokens['greyscale-400'] : undefined
-            }
+            background={isInvitation ? colorsTokens['gray-400'] : undefined}
           />
           <Box $direction="column">
-            <Text $size="sm" $weight="500" $variation="1000">
+            <Text $size="sm" $weight="500">
               {hasFullName ? user.full_name : user.email}
             </Text>
             {hasFullName && (
-              <Text $size="xs" $margin={{ top: '-2px' }} $variation="600">
+              <Text $size="xs" $margin={{ top: '-2px' }} $variation="secondary">
                 {user.email}
               </Text>
             )}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-table-content/components/Heading.tsx b/src/frontend/apps/impress/src/features/docs/doc-table-content/components/Heading.tsx
index a7c1fcfc..bef06b54 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-table-content/components/Heading.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-table-content/components/Heading.tsx
@@ -57,15 +57,15 @@ export const Heading = ({
           block: 'start',
         });
       }}
-      $radius="4px"
-      $background={isActive ? `${colorsTokens['greyscale-100']}` : 'none'}
+      $radius="var(--c--globals--spacings--st)"
+      $background={isActive ? `${colorsTokens['gray-100']}` : 'none'}
       $css={css`
         text-align: left;
         &:focus-visible {
           /* Scoped focus style: same footprint as hover, with theme shadow */
           outline: none;
-          box-shadow: 0 0 0 2px ${colorsTokens['primary-400']};
-          border-radius: 4px;
+          box-shadow: 0 0 0 2px ${colorsTokens['brand-400']};
+          border-radius: var(--c--globals--spacings--st);
         }
       `}
       className="--docs--table-content-heading"
@@ -76,7 +76,6 @@ export const Heading = ({
       <Text
         $width="100%"
         $padding={{ vertical: 'xtiny', left: leftPaddingMap[level] }}
-        $variation={isActive ? '1000' : '700'}
         $weight={isHighlight ? 'bold' : 'normal'}
         $css="overflow-wrap: break-word;"
         $hasTransition
diff --git a/src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx b/src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx
index 46360cb5..8fdd946e 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx
@@ -111,11 +111,11 @@ export const TableContent = () => {
       $position="sticky"
       aria-label={t('Summary')}
       $css={css`
-        top: 0;
-        border: 1px solid ${colorsTokens['greyscale-300']};
+        top: var(--c--globals--spacings--0);
+        border: 1px solid ${colorsTokens['brand-100']};
         overflow: hidden;
         border-radius: ${spacingsTokens['3xs']};
-        background: ${colorsTokens['greyscale-000']};
+        background: ${colorsTokens['gray-000']};
         ${isHover &&
         css`
           display: flex;
@@ -138,22 +138,19 @@ export const TableContent = () => {
           aria-expanded={isHover}
           aria-controls="toc-list"
           $css={css`
-            &:hover {
-              background: ${colorsTokens['primary-100']};
-            }
             &:focus-visible {
               outline: none;
-              box-shadow: 0 0 0 4px ${colorsTokens['primary-400']};
-              background: ${colorsTokens['primary-100']};
+              box-shadow: 0 0 0 4px ${colorsTokens['brand-400']};
+              background: ${colorsTokens['brand-100']};
               width: 90%;
               height: 90%;
             }
           `}
         >
           <Icon
+            $theme="brand"
+            $variation="tertiary"
             iconName="list"
-            $theme="primary"
-            $variation="800"
             variant="symbols-outlined"
           />
         </BoxButton>
@@ -173,7 +170,7 @@ export const TableContent = () => {
             $justify="space-between"
             $align="center"
           >
-            <Text $weight="500" $size="sm" $variation="800" $theme="primary">
+            <Text $weight="500" $size="sm">
               {t('Summary')}
             </Text>
             <BoxButton
@@ -188,12 +185,12 @@ export const TableContent = () => {
                 transform: rotate(180deg);
                 &:focus-visible {
                   outline: none;
-                  box-shadow: 0 0 0 2px ${colorsTokens['primary-400']};
-                  border-radius: 4px;
+                  box-shadow: 0 0 0 2px ${colorsTokens['brand-400']};
+                  border-radius: var(--c--globals--spacings--st);
                 }
               `}
             >
-              <Icon iconName="menu_open" $theme="primary" $variation="800" />
+              <Icon iconName="menu_open" $theme="brand" $variation="tertiary" />
             </BoxButton>
           </Box>
           <Box
diff --git a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx
index d5156cbb..4a4a95b8 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx
@@ -1,4 +1,5 @@
 import {
+  TreeViewDataType,
   TreeViewItem,
   TreeViewNodeProps,
   useTreeContext,
@@ -39,7 +40,7 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
   const treeContext = useTreeContext<Doc>();
   const { untitledDocument } = useTrans();
   const { node } = props;
-  const { spacingsTokens, colorsTokens } = useCunninghamTheme();
+  const { spacingsTokens } = useCunninghamTheme();
   const { isDesktop } = useResponsiveStore();
   const { t } = useTranslation();
 
@@ -68,7 +69,10 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
           node.open();
 
           router.push(`/docs/${createdDoc.id}`);
-          treeContext?.treeData.setChildren(node.data.value.id, allChildren);
+          treeContext?.treeData.setChildren(
+            node.data.value.id,
+            allChildren as TreeViewDataType<Doc>[],
+          );
           treeContext?.treeData.setSelectedNode(createdDoc);
           togglePanel();
         })
@@ -114,33 +118,24 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
       aria-expanded={hasChildren ? isExpanded : undefined}
       aria-disabled={isDisabled}
       $css={css`
-        background-color: ${menuOpen
-          ? 'var(--c--theme--colors--greyscale-100)'
-          : 'var(--c--theme--colors--greyscale-000)'};
+        background-color: var(--c--globals--colors--gray-000);
         .light-doc-item-actions {
           display: ${menuOpen || !isDesktop ? 'flex' : 'none'};
           position: absolute;
-          right: 0;
-          background: ${isDesktop
-            ? 'var(--c--theme--colors--greyscale-100)'
-            : 'var(--c--theme--colors--greyscale-000)'};
-        }
-        .c__tree-view--node.isSelected {
-          .light-doc-item-actions {
-            background: var(--c--theme--colors--greyscale-100);
-          }
+          right: var(--c--globals--spacings--0);
         }
         .c__tree-view--node.isFocused {
           outline: none !important;
-          box-shadow: 0 0 0 2px var(--c--theme--colors--primary-500) !important;
-          border-radius: 4px;
+          box-shadow: 0 0 0 2px var(--c--globals--colors--brand-500) !important;
+          border-radius: var(--c--globals--spacings--st);
         }
         &:hover {
-          background-color: var(--c--theme--colors--greyscale-100);
-          border-radius: 4px;
+          background-color: var(
+            --c--contextuals--background--semantic--gray--tertiary
+          );
+          border-radius: var(--c--globals--spacings--st);
           .light-doc-item-actions {
             display: flex;
-            background: var(--c--theme--colors--greyscale-100);
           }
         }
         .row.preview & {
@@ -152,7 +147,9 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
         <DocIcon
           emoji={emoji}
           withEmojiPicker={doc.abilities.partial_update}
-          defaultIcon={<SubPageIcon color={colorsTokens['primary-400']} />}
+          defaultIcon={
+            <SubPageIcon color="var(--c--contextuals--content--semantic--info--tertiary)" />
+          }
           $size="sm"
           docId={doc.id}
           title={doc.title}
@@ -187,15 +184,14 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
               overflow: hidden;
             `}
           >
-            <Text $css={ItemTextCss} $size="sm" $variation="1000">
+            <Text $css={ItemTextCss} $size="sm">
               {displayTitle}
             </Text>
             {doc.nb_accesses_direct >= 1 && (
               <Icon
                 variant="filled"
                 iconName="group"
-                $size="16px"
-                $variation="400"
+                $size="md"
                 aria-hidden="true"
               />
             )}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx
index 1a0c3864..8a599d12 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx
@@ -215,24 +215,26 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => {
           onKeyDown={handleRootKeyDown}
           $css={css`
             padding: ${spacingsTokens['2xs']};
-            border-radius: 4px;
+            border-radius: var(--c--globals--spacings--st);
             width: 100%;
             background-color: ${rootIsSelected || rootActionsOpen
-              ? 'var(--c--theme--colors--greyscale-100)'
+              ? 'var(--c--contextuals--background--semantic--contextual--primary)'
               : 'transparent'};
 
             &:hover {
-              background-color: var(--c--theme--colors--greyscale-100);
+              background-color: var(
+                --c--contextuals--background--semantic--contextual--primary
+              );
             }
 
             &:focus-visible {
               outline: none !important;
-              box-shadow: 0 0 0 2px var(--c--theme--colors--primary-500) !important;
-              border-radius: 4px;
+              box-shadow: 0 0 0 2px var(--c--globals--colors--brand-500) !important;
+              border-radius: var(--c--globals--spacings--st);
             }
 
             .doc-tree-root-item-actions {
-              display: 'flex';
+              display: flex;
               opacity: ${rootActionsOpen ? '1' : '0'};
 
               &:has(.isOpen) {
diff --git a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTreeItemActions.tsx b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTreeItemActions.tsx
index da056301..4ce70ef6 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTreeItemActions.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTreeItemActions.tsx
@@ -119,7 +119,7 @@ export const DocTreeItemActions = ({
       : []),
     {
       label: t('Duplicate'),
-      icon: <Icon $variation="600" iconName="content_copy" />,
+      icon: <Icon iconName="content_copy" />,
       isDisabled: !doc.abilities.duplicate,
       callback: () => {
         duplicateDoc({
@@ -180,8 +180,8 @@ export const DocTreeItemActions = ({
             }}
             iconName="more_horiz"
             variant="filled"
-            $theme="primary"
-            $variation="600"
+            $theme="brand"
+            $variation="secondary"
             aria-label={t('More options')}
           />
         </DropdownMenu>
@@ -195,16 +195,12 @@ export const DocTreeItemActions = ({
                 parentId: doc.id,
               });
             }}
-            color="primary"
+            $theme="brand"
+            $variation="secondary"
             aria-label={t('Add a sub page')}
             data-testid="doc-tree-item-actions-add-child"
           >
-            <Icon
-              variant="filled"
-              $variation="800"
-              $theme="primary"
-              iconName="add_box"
-            />
+            <Icon variant="filled" $color="inherit" iconName="add_box" />
           </BoxButton>
         )}
       </Box>
diff --git a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalConfirmationVersion.tsx b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalConfirmationVersion.tsx
index 7cbb73d0..2b0693e7 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalConfirmationVersion.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalConfirmationVersion.tsx
@@ -74,7 +74,7 @@ export const ModalConfirmationVersion = ({
         <>
           <Button
             aria-label={`${t('Cancel')} - ${t('Warning')}`}
-            color="secondary"
+            variant="secondary"
             fullWidth
             onClick={() => onClose()}
           >
@@ -82,7 +82,7 @@ export const ModalConfirmationVersion = ({
           </Button>
           <Button
             aria-label={t('Restore')}
-            color="danger"
+            color="error"
             fullWidth
             onClick={() => {
               if (!version?.content) {
@@ -109,7 +109,6 @@ export const ModalConfirmationVersion = ({
           id="modal-confirmation-version-title"
           $size="h6"
           $align="flex-start"
-          $variation="1000"
         >
           {t('Warning')}
         </Text>
@@ -117,10 +116,10 @@ export const ModalConfirmationVersion = ({
     >
       <Box className="--docs--modal-confirmation-version">
         <Box>
-          <Text $variation="600" as="p">
+          <Text $variation="secondary" as="p">
             {t('Your current document will revert to this version.')}
           </Text>
-          <Text $variation="600" as="p">
+          <Text $variation="secondary" as="p">
             {t('If a member is editing, his works can be lost.')}
           </Text>
         </Box>
diff --git a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalSelectVersion.tsx b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalSelectVersion.tsx
index 8c8b9a63..88d3d953 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalSelectVersion.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalSelectVersion.tsx
@@ -102,7 +102,7 @@ export const ModalSelectVersion = ({
             $height="calc(100vh - 2em - 12px)"
             $css={css`
               overflow-y: hidden;
-              border-left: 1px solid var(--c--theme--colors--greyscale-200);
+              border-left: 1px solid var(--c--globals--colors--gray-200);
             `}
           >
             <Box
@@ -118,12 +118,11 @@ export const ModalSelectVersion = ({
                 $direction="row"
                 $align="center"
                 $css={css`
-                  border-bottom: 1px solid
-                    var(--c--theme--colors--greyscale-200);
+                  border-bottom: 1px solid var(--c--globals--colors--gray-200);
                 `}
                 $padding="sm"
               >
-                <Text $size="h6" $variation="1000" $weight="bold">
+                <Text $size="h6" $weight="bold">
                   {t('History')}
                 </Text>
                 <ButtonCloseModal
@@ -143,14 +142,13 @@ export const ModalSelectVersion = ({
               <Box
                 $padding="xs"
                 $css={css`
-                  border-top: 1px solid var(--c--theme--colors--greyscale-200);
+                  border-top: 1px solid var(--c--globals--colors--gray-200);
                 `}
               >
                 <Button
                   fullWidth
                   disabled={!selectedVersionId}
                   onClick={restoreModal.open}
-                  color="primary"
                 >
                   {t('Restore')}
                 </Button>
diff --git a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/VersionItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/VersionItem.tsx
index efb4f783..558d0f10 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/VersionItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/VersionItem.tsx
@@ -32,13 +32,13 @@ export const VersionItem = ({
       <Box
         $width="100%"
         as="li"
-        $background={isActive ? colorsTokens['greyscale-100'] : 'transparent'}
+        $background={isActive ? colorsTokens['gray-100'] : 'transparent'}
         $radius={spacingsTokens['3xs']}
         $css={`
           cursor: pointer;
 
           &:hover {
-            background: ${colorsTokens['greyscale-100']};
+            background: ${colorsTokens['gray-100']};
           }
         `}
         $hasTransition
@@ -53,7 +53,7 @@ export const VersionItem = ({
           $width="100%"
         >
           <Box $direction="row" $gap="0.5rem" $align="center">
-            <Text $weight="bold" $size="sm" $variation="1000">
+            <Text $weight="bold" $size="sm">
               {text}
             </Text>
           </Box>
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocGridContentList.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocGridContentList.tsx
index 6351e65f..da81bbe3 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocGridContentList.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocGridContentList.tsx
@@ -6,7 +6,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import { useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { AlertModal, Box, Text } from '@/components';
+import { AlertModal, Card, Text } from '@/components';
 import { Doc, KEY_LIST_DOC } from '@/docs/doc-management';
 import {
   getDocAccesses,
@@ -147,19 +147,8 @@ export const DraggableDocGridContentList = ({
     return selectedDoc?.title || t('Unnamed document');
   }, [canDrag, canDrop, selectedDoc, t]);
 
-  const overlayBgColor = useMemo(() => {
-    if (!canDrag) {
-      return 'var(--c--theme--colors--danger-600)';
-    }
-    if (canDrop !== undefined && !canDrop) {
-      return 'var(--c--theme--colors--danger-600)';
-    }
-    if (isError) {
-      return 'var(--c--theme--colors--danger-600)';
-    }
-
-    return '#5858D3';
-  }, [canDrag, canDrop, isError]);
+  const cannotMoveDoc =
+    !canDrag || (canDrop !== undefined && !canDrop) || isError;
 
   if (docs.length === 0) {
     return null;
@@ -183,20 +172,20 @@ export const DraggableDocGridContentList = ({
           />
         ))}
         <DragOverlay dropAnimation={null}>
-          <Box
+          <Card
             $width="fit-content"
-            $padding={{ horizontal: 'xs', vertical: '3xs' }}
             $radius="12px"
-            $background={overlayBgColor}
             data-testid="drag-doc-overlay"
-            $height="auto"
             role="alert"
-            aria-label={t('Drag  and drop status')}
+            aria-label={t('Drag and drop status')}
+            $theme={cannotMoveDoc ? 'error' : 'brand'}
+            $variation="tertiary"
+            $scope="semantic"
           >
-            <Text $size="xs" $variation="000" $weight="500">
+            <Text $size="xs" $weight="500" $withThemeInherited>
               {overlayText}
             </Text>
-          </Box>
+          </Card>
         </DragOverlay>
       </DndContext>
       {modalConfirmation.isOpen && (
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
index f8aade75..625d9946 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
@@ -98,18 +98,13 @@ export const DocsGrid = ({
           bottom: 'md',
         }}
       >
-        <Text
-          as="h2"
-          $size="h4"
-          $variation="1000"
-          $margin={{ top: '0px', bottom: '10px' }}
-        >
+        <Text as="h2" $size="h4" $margin={{ top: '0px', bottom: '10px' }}>
           {title}
         </Text>
 
         {!hasDocs && !loading && (
           <Box $padding={{ vertical: 'sm' }} $align="center" $justify="center">
-            <Text $size="sm" $variation="600" $weight="700">
+            <Text $size="sm" $weight="700">
               {t('No documents found')}
             </Text>
           </Box>
@@ -126,7 +121,7 @@ export const DocsGrid = ({
                   role="row"
                 >
                   <Box $flex={flexLeft} $padding="3xs" role="columnheader">
-                    <Text $size="xs" $variation="600" $weight="500">
+                    <Text $size="xs" $variation="secondary" $weight="500">
                       {t('Name')}
                     </Text>
                   </Box>
@@ -136,7 +131,7 @@ export const DocsGrid = ({
                       $padding={{ vertical: '3xs' }}
                       role="columnheader"
                     >
-                      <Text $size="xs" $weight="500" $variation="600">
+                      <Text $size="xs" $weight="500" $variation="secondary">
                         {DocDefaultFilter.TRASHBIN === target
                           ? t('Days remaining')
                           : t('Updated at')}
@@ -162,7 +157,8 @@ export const DocsGrid = ({
                 {!isFetching && hasNextPage && (
                   <Button
                     onClick={() => void fetchNextPage()}
-                    color="primary-text"
+                    color="brand"
+                    variant="tertiary"
                   >
                     {t('More docs')}
                   </Button>
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx
index f37a982e..2ece1ca9 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx
@@ -89,12 +89,17 @@ export const DocsGridActions = ({
         options={options}
         label={menuLabel}
         aria-label={t('More options')}
+        buttonCss={css`
+          &:hover {
+            background-color: unset;
+          }
+        `}
       >
         <Icon
           data-testid={`docs-grid-actions-button-${doc.id}`}
           iconName="more_horiz"
-          $theme="primary"
-          $variation="600"
+          $theme="brand"
+          $variation="secondary"
           $css={css`
             cursor: pointer;
             &:hover {
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx
index f6e2876f..3b263ba3 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx
@@ -63,7 +63,7 @@ export const DocsGridItem = ({ doc, dragMode = false }: DocsGridItemProps) => {
           &:hover {
             background-color: ${dragMode
               ? 'none'
-              : 'var(--c--theme--colors--greyscale-100)'};
+              : 'var(--c--contextuals--background--semantic--contextual--primary)'};
           }
         `}
         className="--docs--doc-grid-item"
@@ -111,8 +111,9 @@ export const DocsGridItem = ({ doc, dragMode = false }: DocsGridItemProps) => {
                   {dragMode && (
                     <>
                       <Icon
-                        $theme="greyscale"
-                        $variation="600"
+                        $layer="background"
+                        $theme="neutral"
+                        $variation="primary"
                         $size="14px"
                         iconName={isPublic ? 'public' : 'vpn_lock'}
                       />
@@ -126,7 +127,7 @@ export const DocsGridItem = ({ doc, dragMode = false }: DocsGridItemProps) => {
                   {!dragMode && (
                     <Tooltip
                       content={
-                        <Text $textAlign="center" $variation="000">
+                        <Text $textAlign="center">
                           {isPublic
                             ? t('Accessible to anyone')
                             : t('Accessible to authenticated users')}
@@ -136,9 +137,10 @@ export const DocsGridItem = ({ doc, dragMode = false }: DocsGridItemProps) => {
                     >
                       <div>
                         <Icon
-                          $theme="greyscale"
-                          $variation="600"
-                          $size="14px"
+                          $layer="background"
+                          $theme="neutral"
+                          $variation="primary"
+                          $size="sm"
                           iconName={isPublic ? 'public' : 'vpn_lock'}
                         />
                         <span className="sr-only">
@@ -222,7 +224,12 @@ export const DocsGridItemDate = ({
 
   return (
     <StyledLink href={`/docs/${doc.id}`}>
-      <Text $variation="600" $size="xs">
+      <Text
+        $size="xs"
+        $layer="background"
+        $theme="neutral"
+        $variation="primary"
+      >
         {dateToDisplay}
       </Text>
     </StyledLink>
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItemSharedButton.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItemSharedButton.tsx
index d8d255cf..d43af79f 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItemSharedButton.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItemSharedButton.tsx
@@ -25,7 +25,7 @@ export const DocsGridItemSharedButton = ({
   return (
     <Tooltip
       content={
-        <Text $textAlign="center" $variation="000">
+        <Text $textAlign="center">
           {t('Shared with {{count}} users', { count: sharedCount })}
         </Text>
       }
@@ -37,17 +37,25 @@ export const DocsGridItemSharedButton = ({
         aria-label={t('Open the sharing settings for the document')}
         data-testid={`docs-grid-item-shared-button-${doc.id}`}
         style={{
-          minWidth: '50px',
-          justifyContent: 'center',
+          padding: `0 var(--c--globals--spacings--xxxs) 0 var(--c--globals--spacings--xxxs)`,
         }}
         onClick={(event) => {
           event.preventDefault();
           event.stopPropagation();
           handleClick();
         }}
-        color="tertiary"
+        color="brand"
+        variant="secondary"
         size="nano"
-        icon={<Icon $theme="primary" iconName="group" disabled={disabled} />}
+        icon={
+          <Icon
+            $theme="brand"
+            $variation="secondary"
+            iconName="group"
+            disabled={disabled}
+            variant="filled"
+          />
+        }
         disabled={disabled}
       >
         {sharedCount}
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridTrashbinActions.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridTrashbinActions.tsx
index 6ebd89f0..0839032a 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridTrashbinActions.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridTrashbinActions.tsx
@@ -44,8 +44,6 @@ export const DocsGridTrashbinActions = ({
       icon: (
         <Icon
           $size="20px"
-          $theme="greyscale"
-          $variation="1000"
           iconName="undo"
           aria-hidden="true"
           variant="symbols-outlined"
@@ -70,12 +68,17 @@ export const DocsGridTrashbinActions = ({
       options={options}
       label={menuLabel}
       aria-label={t('More options')}
+      buttonCss={css`
+        &:hover {
+          background-color: unset;
+        }
+      `}
     >
       <Icon
         data-testid={`docs-grid-actions-button-${doc.id}`}
         iconName="more_horiz"
-        $theme="primary"
-        $variation="600"
+        $theme="brand"
+        $variation="secondary"
         $css={css`
           cursor: pointer;
           &:hover {
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/Droppable.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/Droppable.tsx
index 4039f284..6678c10a 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/Droppable.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/Droppable.tsx
@@ -37,13 +37,13 @@ export const Droppable = ({
       data-testid={`droppable-doc-${id}`}
       role="none"
       $css={css`
-        border-radius: 4px;
+        border-radius: var(--c--globals--spacings--st);
         background-color: ${enableHover
-          ? 'var(--c--theme--colors--primary-100)'
+          ? 'var(--c--globals--colors--brand-100)'
           : 'transparent'};
         border: 1.5px solid
           ${enableHover
-            ? 'var(--c--theme--colors--primary-500)'
+            ? 'var(--c--globals--colors--brand-500)'
             : 'transparent'};
       `}
       className="--docs--grid-droppable"
diff --git a/src/frontend/apps/impress/src/features/footer/Footer.tsx b/src/frontend/apps/impress/src/features/footer/Footer.tsx
index f3824645..e2033d94 100644
--- a/src/frontend/apps/impress/src/features/footer/Footer.tsx
+++ b/src/frontend/apps/impress/src/features/footer/Footer.tsx
@@ -15,7 +15,7 @@ const BlueStripe = styled.div`
   position: absolute;
   height: 2px;
   width: 100%;
-  background: var(--c--theme--colors--primary-600);
+  background: var(--c--globals--colors--brand-700);
   top: 0;
 `;
 
@@ -83,7 +83,6 @@ export const Footer = () => {
                 >
                   {logo?.src && (
                     <Image
-                      className="c__image-system-filter"
                       priority
                       src={logo.src}
                       alt={logo?.alt || t('Logo')}
@@ -116,11 +115,14 @@ export const Footer = () => {
                   key={label}
                   href={href}
                   target="__blank"
-                  $css={`
-                    gap:0.2rem;
+                  $css={css`
+                    gap: 0.2rem;
                     transition: box-shadow 0.3s;
                     &:hover {
-                      box-shadow: 0px 2px 0 0 var(--c--theme--colors--greyscale-text);
+                      box-shadow: 0px 2px 0 0
+                        var(
+                          --c--contextuals--content--semantic--neutral--secondary
+                        );
                     }
                   `}
                 >
@@ -136,7 +138,7 @@ export const Footer = () => {
           $padding={{ top: 'tiny' }}
           $css={`
             flex-wrap: wrap;
-            border-top: 1px solid var(--c--theme--colors--greyscale-200); 
+            border-top: 1px solid var(--c--globals--colors--gray-200); 
             column-gap: 1rem;
             row-gap: .5rem;
           `}
@@ -151,18 +153,20 @@ export const Footer = () => {
                   padding-right: 1rem;
                   &:not(:last-child) {
                     box-shadow: inset -1px 0px 0px 0px
-                      var(--c--theme--colors--greyscale-200);
+                      var(--c--globals--colors--gray-200);
                   }
                 `}
               >
                 <Text
-                  $variation="600"
-                  $size="m"
+                  $size="s"
+                  $variation="secondary"
                   $transition="box-shadow 0.3s"
                   $css={css`
                     &:hover {
                       box-shadow: 0px 2px 0 0
-                        var(--c--theme--colors--greyscale-text);
+                        var(
+                          --c--contextuals--content--semantic--neutral--secondary
+                        );
                     }
                   `}
                 >
@@ -174,9 +178,9 @@ export const Footer = () => {
         {bottomInformation && (
           <Text
             as="p"
-            $size="m"
+            $size="s"
             $margin={{ top: 'big' }}
-            $variation="600"
+            $variation="secondary"
             $display="inline"
             className="--docs--footer-licence"
           >
@@ -188,11 +192,11 @@ export const Footer = () => {
                 $css={css`
                   display: inline-flex;
                   box-shadow: 0px 1px 0 0
-                    var(--c--theme--colors--greyscale-text);
+                    var(--c--contextuals--content--semantic--neutral--secondary);
                   gap: 0.2rem;
                 `}
               >
-                <Text $variation="600">{bottomInformation.link.label}</Text>
+                <Text>{bottomInformation.link.label}</Text>
                 <IconLink width={14} />
               </StyledLink>
             )}
diff --git a/src/frontend/apps/impress/src/features/header/components/ButtonTogglePanel.tsx b/src/frontend/apps/impress/src/features/header/components/ButtonTogglePanel.tsx
index c11fab07..f53c0425 100644
--- a/src/frontend/apps/impress/src/features/header/components/ButtonTogglePanel.tsx
+++ b/src/frontend/apps/impress/src/features/header/components/ButtonTogglePanel.tsx
@@ -13,13 +13,9 @@ export const ButtonTogglePanel = () => {
       size="medium"
       onClick={() => togglePanel()}
       aria-label={t('Open the header menu')}
-      color="tertiary-text"
+      variant="tertiary"
       icon={
-        <Icon
-          $variation="800"
-          $theme="primary"
-          iconName={isPanelOpen ? 'close' : 'menu'}
-        />
+        <Icon $withThemeInherited iconName={isPanelOpen ? 'close' : 'menu'} />
       }
       className="--docs--button-toggle-panel"
     />
diff --git a/src/frontend/apps/impress/src/features/header/components/Header.tsx b/src/frontend/apps/impress/src/features/header/components/Header.tsx
index 3ab65661..f6f42f3c 100644
--- a/src/frontend/apps/impress/src/features/header/components/Header.tsx
+++ b/src/frontend/apps/impress/src/features/header/components/Header.tsx
@@ -18,7 +18,7 @@ import { Title } from './Title';
 export const Header = () => {
   const { t } = useTranslation();
   const { data: config } = useConfig();
-  const { spacingsTokens, colorsTokens } = useCunninghamTheme();
+  const { spacingsTokens } = useCunninghamTheme();
   const { isDesktop } = useResponsiveStore();
 
   const logo = config?.theme_customization?.header?.logo;
@@ -38,8 +38,8 @@ export const Header = () => {
         justify-content: space-between;
         height: ${HEADER_HEIGHT}px;
         padding: 0 ${spacingsTokens['base']};
-        background-color: ${colorsTokens['greyscale-000']};
-        border-bottom: 1px solid ${colorsTokens['greyscale-200']};
+        background-color: var(--c--contextuals--background--surface--primary);
+        border-bottom: 1px solid var(--c--contextuals--border--surface--primary);
       `}
       className="--docs--header"
     >
@@ -51,8 +51,8 @@ export const Header = () => {
         $css={css`
           outline: none;
           &:focus-visible {
-            box-shadow: 0 0 0 2px var(--c--theme--colors--primary-400) !important;
-            border-radius: 4px;
+            box-shadow: 0 0 0 2px var(--c--globals--colors--brand-400) !important;
+            border-radius: var(--c--globals--spacings--st);
           }
         `}
       >
diff --git a/src/frontend/apps/impress/src/features/header/components/LaGaufre.tsx b/src/frontend/apps/impress/src/features/header/components/LaGaufre.tsx
index 39c4f1ea..1910124a 100644
--- a/src/frontend/apps/impress/src/features/header/components/LaGaufre.tsx
+++ b/src/frontend/apps/impress/src/features/header/components/LaGaufre.tsx
@@ -9,6 +9,12 @@ import { useCunninghamTheme } from '@/cunningham';
 const GaufreStyle = createGlobalStyle`
   .lasuite-gaufre-btn{
     box-shadow: inset 0 0 0 0 !important;
+    border-radius: var(--c--components--button--border-radius) !important;
+    transition: all var(--c--globals--transitions--duration) var(--c--globals--transitions--ease-out) !important;
+    &:hover, &:focus-visible {
+      background: var(--c--contextuals--background--semantic--contextual--primary) !important;
+    }
+    color: var(--c--contextuals--content--semantic--brand--tertiary) !important;
   }
 `;
 
diff --git a/src/frontend/apps/impress/src/features/header/components/Title.tsx b/src/frontend/apps/impress/src/features/header/components/Title.tsx
index 451b8220..a5095d7c 100644
--- a/src/frontend/apps/impress/src/features/header/components/Title.tsx
+++ b/src/frontend/apps/impress/src/features/header/components/Title.tsx
@@ -1,7 +1,6 @@
 import { useTranslation } from 'react-i18next';
 
-import { Box, Text } from '@/components/';
-import { useCunninghamTheme } from '@/cunningham';
+import { Text } from '@/components/';
 
 type TitleSemanticsProps = {
   headingLevel?: 'h1' | 'h2' | 'h3';
@@ -9,24 +8,19 @@ type TitleSemanticsProps = {
 
 export const Title = ({ headingLevel = 'h2' }: TitleSemanticsProps) => {
   const { t } = useTranslation();
-  const { spacingsTokens, colorsTokens } = useCunninghamTheme();
 
   return (
-    <Box
+    <Text
+      className="--docs--title"
       $direction="row"
       $align="center"
-      $gap={spacingsTokens['2xs']}
-      className="--docs--title"
+      $margin="none"
+      as={headingLevel}
+      $zIndex={1}
+      $size="1.375rem"
+      $color="var(--c--contextuals--content--logo1)"
     >
-      <Text
-        $margin="none"
-        as={headingLevel}
-        $color={colorsTokens['primary-text']}
-        $zIndex={1}
-        $size="1.375rem"
-      >
-        {t('Docs')}
-      </Text>
-    </Box>
+      {t('Docs')}
+    </Text>
   );
 };
diff --git a/src/frontend/apps/impress/src/features/home/components/HomeBanner.tsx b/src/frontend/apps/impress/src/features/home/components/HomeBanner.tsx
index 5f176775..513ae722 100644
--- a/src/frontend/apps/impress/src/features/home/components/HomeBanner.tsx
+++ b/src/frontend/apps/impress/src/features/home/components/HomeBanner.tsx
@@ -3,8 +3,8 @@ import Image from 'next/image';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
-import IconDocs from '@/assets/icons/icon-docs.svg';
 import { Box, Icon, Text } from '@/components';
+import { useConfig } from '@/core';
 import { useCunninghamTheme } from '@/cunningham';
 import { ProConnectButton, gotoLogin } from '@/features/auth';
 import { useResponsiveStore } from '@/stores';
@@ -15,10 +15,13 @@ import { getHeaderHeight } from './HomeHeader';
 
 export default function HomeBanner() {
   const { t } = useTranslation();
-  const { componentTokens, spacingsTokens, colorsTokens } =
-    useCunninghamTheme();
+  const { componentTokens, spacingsTokens } = useCunninghamTheme();
   const { isMobile, isSmallMobile } = useResponsiveStore();
   const withProConnect = componentTokens['home-proconnect'];
+  const { data: config } = useConfig();
+
+  const icon =
+    config?.theme_customization?.header?.icon || componentTokens.icon;
 
   return (
     <Box
@@ -47,15 +50,21 @@ export default function HomeBanner() {
           $align="center"
           $gap={spacingsTokens['sm']}
         >
-          <IconDocs
-            aria-label={t('Back to homepage')}
-            width={64}
-            color={colorsTokens['primary-text']}
+          <Image
+            data-testid="header-icon-docs"
+            src={icon.src || ''}
+            alt=""
+            width={0}
+            height={0}
+            style={{
+              width: '64px',
+              height: 'auto',
+            }}
+            priority
           />
           <Text
             as="h2"
             $size={!isMobile ? 'xs-alt' : '2.3rem'}
-            $variation="800"
             $weight="bold"
             $textAlign="center"
             $margin="none"
@@ -67,9 +76,9 @@ export default function HomeBanner() {
           </Text>
           <Text
             $size="lg"
-            $variation="700"
             $textAlign="center"
             $margin={{ bottom: 'small' }}
+            $variation="secondary"
           >
             {t(
               'Collaborate and write in real time, without layout constraints.',
@@ -88,7 +97,6 @@ export default function HomeBanner() {
         </Box>
         {!isMobile && (
           <Image
-            className="c__image-system-filter"
             src={banner}
             alt={t('Banner image')}
             priority
@@ -104,10 +112,9 @@ export default function HomeBanner() {
       </Box>
       <Box $css="bottom: 3rem" $position="absolute">
         <Button
-          color="secondary"
-          icon={
-            <Icon $theme="primary" $variation="800" iconName="expand_more" />
-          }
+          color="brand"
+          variant="secondary"
+          icon={<Icon $color="inherit" iconName="expand_more" />}
           onClick={(e) => {
             e.preventDefault();
             document
diff --git a/src/frontend/apps/impress/src/features/home/components/HomeBottom.tsx b/src/frontend/apps/impress/src/features/home/components/HomeBottom.tsx
index 0c498347..8f9715d4 100644
--- a/src/frontend/apps/impress/src/features/home/components/HomeBottom.tsx
+++ b/src/frontend/apps/impress/src/features/home/components/HomeBottom.tsx
@@ -20,7 +20,7 @@ export function HomeBottom() {
 
 function HomeProConnect() {
   const { t } = useTranslation();
-  const { spacingsTokens, colorsTokens } = useCunninghamTheme();
+  const { spacingsTokens } = useCunninghamTheme();
   const { isMobile } = useResponsiveStore();
   const parentGap = '230px';
 
@@ -43,15 +43,12 @@ function HomeProConnect() {
           $position="relative"
           $height="fit-content"
           $css="zoom: 1.9;"
+          $theme="brand"
         >
-          <IconDocs
-            aria-label={t('Docs Logo')}
-            width={34}
-            color={colorsTokens['primary-text']}
-          />
+          <IconDocs aria-label={t('Docs Logo')} width={34} />
           <Title />
         </Box>
-        <Text $size="md" $variation="1000" $textAlign="center">
+        <Text $size="md" $variation="secondary" $textAlign="center">
           {t('Docs is already available, log in to use it now.')}
         </Text>
         <ProConnectButton />
diff --git a/src/frontend/apps/impress/src/features/home/components/HomeContent.tsx b/src/frontend/apps/impress/src/features/home/components/HomeContent.tsx
index 3674cfb4..714657c3 100644
--- a/src/frontend/apps/impress/src/features/home/components/HomeContent.tsx
+++ b/src/frontend/apps/impress/src/features/home/components/HomeContent.tsx
@@ -3,7 +3,6 @@ import { Trans, useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
 import { Box, Icon, Text } from '@/components';
-import { useCunninghamTheme } from '@/cunningham';
 import { Footer } from '@/features/footer';
 import { LeftPanel } from '@/features/left-panel';
 import { useResponsiveStore } from '@/stores';
@@ -28,7 +27,6 @@ import { HomeSection } from './HomeSection';
 
 export function HomeContent() {
   const { i18n, t } = useTranslation();
-  const { colorsTokens } = useCunninghamTheme();
   const { isMobile, isSmallMobile, isTablet } = useResponsiveStore();
   const isFrLanguage = i18n.resolvedLanguage === 'fr';
 
@@ -76,84 +74,89 @@ export function HomeContent() {
                 textWidth="60%"
                 $css={`min-height: calc(100vh - ${getHeaderHeight(isSmallMobile)}px);`}
                 description={
-                  <Box
-                    $css={css`
-                      & a {
-                        color: ${colorsTokens['primary-600']};
-                      }
-                    `}
-                  >
-                    <Text as="p" $display="inline">
-                      <Trans t={t} i18nKey="home-content-open-source-part1">
-                        Docs is built on top of{' '}
-                        <a
-                          href="https://www.django-rest-framework.org/"
-                          target="_blank"
-                        >
-                          Django Rest Framework
-                        </a>{' '}
-                        and{' '}
-                        <a href="https://nextjs.org/" target="_blank">
-                          Next.js
-                        </a>
-                        . We also use{' '}
-                        <a href="https://github.com/yjs" target="_blank">
-                          Yjs
-                        </a>{' '}
-                        and{' '}
-                        <a href="https://www.blocknotejs.org/" target="_blank">
-                          BlockNote.js
-                        </a>
-                        , both of which we are proud to sponsor.
-                      </Trans>
-                    </Text>
-                    <Text as="p" $display="inline">
-                      <Trans t={t} i18nKey="home-content-open-source-part2">
-                        You can easily self-host Docs (check our installation{' '}
-                        <a
-                          href="https://github.com/suitenumerique/docs/tree/main/docs"
-                          target="_blank"
-                        >
-                          documentation
-                        </a>
-                        ).
-                        <br />
-                        Docs uses an innovation and business friendly{' '}
-                        <a
-                          href="https://github.com/suitenumerique/docs/blob/main/LICENSE"
-                          target="_blank"
-                        >
-                          licence
-                        </a>{' '}
-                        (MIT).
-                        <br />
-                        Contributions are welcome (see our roadmap{' '}
-                        <a
-                          href="https://github.com/orgs/numerique-gouv/projects/13/views/11"
-                          target="_blank"
-                        >
-                          here
-                        </a>
-                        ).
-                      </Trans>
-                    </Text>
-                    <Text as="p" $display="inline">
-                      <Trans t={t} i18nKey="home-content-open-source-part3">
-                        Docs is the result of a joint effort lead by the French
-                        🇫🇷🥖
-                        <a
-                          href="https://www.numerique.gouv.fr/dinum/"
-                          target="_blank"
-                        >
-                          (DINUM)
-                        </a>{' '}
-                        and German 🇩🇪🥨 governments{' '}
-                        <a href="https://zendis.de/" target="_blank">
-                          (ZenDiS)
-                        </a>
-                        .
-                      </Trans>
-                    </Text>
+                  <Box>
+                    <Box
+                      $css={css`
+                        & a {
+                          color: inherit;
+                        }
+                      `}
+                    >
+                      <Text as="p" $display="inline" $variation="secondary">
+                        <Trans t={t} i18nKey="home-content-open-source-part1">
+                          Docs is built on top of{' '}
+                          <a
+                            href="https://www.django-rest-framework.org/"
+                            target="_blank"
+                          >
+                            Django Rest Framework
+                          </a>{' '}
+                          and{' '}
+                          <a href="https://nextjs.org/" target="_blank">
+                            Next.js
+                          </a>
+                          . We also use{' '}
+                          <a href="https://github.com/yjs" target="_blank">
+                            Yjs
+                          </a>{' '}
+                          and{' '}
+                          <a
+                            href="https://www.blocknotejs.org/"
+                            target="_blank"
+                          >
+                            BlockNote.js
+                          </a>
+                          , both of which we are proud to sponsor.
+                        </Trans>
+                      </Text>
+                      <Text as="p" $display="inline">
+                        <Trans t={t} i18nKey="home-content-open-source-part2">
+                          You can easily self-host Docs (check our installation{' '}
+                          <a
+                            href="https://github.com/suitenumerique/docs/tree/main/docs"
+                            target="_blank"
+                          >
+                            documentation
+                          </a>
+                          ).
+                          <br />
+                          Docs uses an innovation and business friendly{' '}
+                          <a
+                            href="https://github.com/suitenumerique/docs/blob/main/LICENSE"
+                            target="_blank"
+                          >
+                            licence
+                          </a>{' '}
+                          (MIT).
+                          <br />
+                          Contributions are welcome (see our roadmap{' '}
+                          <a
+                            href="https://github.com/orgs/numerique-gouv/projects/13/views/11"
+                            target="_blank"
+                          >
+                            here
+                          </a>
+                          ).
+                        </Trans>
+                      </Text>
+                      <Text as="p" $display="inline">
+                        <Trans t={t} i18nKey="home-content-open-source-part3">
+                          Docs is the result of a joint effort lead by the
+                          French 🇫🇷🥖
+                          <a
+                            href="https://www.numerique.gouv.fr/dinum/"
+                            target="_blank"
+                          >
+                            (DINUM)
+                          </a>{' '}
+                          and German 🇩🇪🥨 governments{' '}
+                          <a href="https://zendis.de/" target="_blank">
+                            (ZenDiS)
+                          </a>
+                          .
+                        </Trans>
+                      </Text>
+                    </Box>
                     <Box
                       $direction="row"
                       $gap="1rem"
@@ -164,10 +167,11 @@ export function HomeContent() {
                         href="https://matrix.to/#/#docs-official:matrix.org"
                         target="_blank"
                       >
-                        <Text $color="white">Matrix</Text>
+                        Matrix
                       </Button>
                       <Button
-                        color="secondary"
+                        color="neutral"
+                        variant="secondary"
                         icon={<GithubIcon />}
                         href="https://github.com/suitenumerique/docs"
                         target="_blank"
diff --git a/src/frontend/apps/impress/src/features/home/components/HomeSection.tsx b/src/frontend/apps/impress/src/features/home/components/HomeSection.tsx
index 3e6ae79d..53141418 100644
--- a/src/frontend/apps/impress/src/features/home/components/HomeSection.tsx
+++ b/src/frontend/apps/impress/src/features/home/components/HomeSection.tsx
@@ -117,7 +117,6 @@ export const HomeSection = ({
             $css={css`
               line-height: ${!isSmallDevice ? '50px' : 'normal'};
             `}
-            $variation="1000"
             $weight="bold"
             $size={!isSmallDevice ? 'xs-alt' : isSmallMobile ? 'h6' : 'h4'}
             $textAlign="left"
@@ -127,7 +126,7 @@ export const HomeSection = ({
           </Text>
           <Text
             as="div"
-            $variation="700"
+            $variation="secondary"
             $weight="400"
             $size={isSmallMobile ? 'ml' : 'md'}
           >
@@ -175,7 +174,6 @@ export const HomeSection = ({
 
         {illustration && (isSmallDevice || !video) && (
           <Image
-            className="c__image-system-filter"
             src={illustration}
             alt={t('Illustration')}
             style={{
@@ -200,28 +198,19 @@ const SectionTag = ({
   tag: string;
   availableSoon?: boolean;
 }) => {
-  const { colorsTokens, spacingsTokens } = useCunninghamTheme();
+  const { spacingsTokens } = useCunninghamTheme();
   return (
     <Box
-      $background={
-        !availableSoon
-          ? colorsTokens['primary-100']
-          : colorsTokens['warning-100']
-      }
       $padding={{ horizontal: spacingsTokens['sm'], vertical: '6px' }}
       $css={css`
         align-self: flex-start;
-        border-radius: 4px;
+        border-radius: var(--c--globals--spacings--st);
       `}
+      $theme={availableSoon ? 'warning' : 'brand'}
+      $variation="tertiary"
+      $withThemeBG
     >
-      <Text
-        $size="md"
-        $variation={availableSoon ? '600' : '800'}
-        $weight="bold"
-        $theme={availableSoon ? 'warning' : 'primary'}
-      >
-        {tag}
-      </Text>
+      {tag}
     </Box>
   );
 };
diff --git a/src/frontend/apps/impress/src/features/language/components/LanguagePicker.tsx b/src/frontend/apps/impress/src/features/language/components/LanguagePicker.tsx
index 41992cab..5a7f19ee 100644
--- a/src/frontend/apps/impress/src/features/language/components/LanguagePicker.tsx
+++ b/src/frontend/apps/impress/src/features/language/components/LanguagePicker.tsx
@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
-import { DropdownMenu, Icon, Text } from '@/components/';
+import { Box, DropdownMenu, Icon } from '@/components/';
 import { useConfig } from '@/core';
 import { useAuthQuery } from '@/features/auth';
 import {
@@ -41,32 +41,32 @@ export const LanguagePicker = () => {
       showArrow
       label={t('Select language')}
       buttonCss={css`
-        transition: all 0.15s ease-in-out !important;
-        border-radius: 4px;
+        transition: all var(--c--globals--transitions--duration)
+          var(--c--globals--transitions--ease-out) !important;
+        border-radius: var(--c--globals--spacings--st);
         padding: 0.5rem 0.6rem;
         & > div {
           gap: 0.2rem;
           display: flex;
         }
         & .material-icons {
-          color: var(--c--components--button--primary-text--color) !important;
+          color: var(
+            --c--contextuals--content--palette--brand--primary
+          ) !important;
         }
       `}
     >
-      <Text
-        $theme="primary"
+      <Box
+        className="--docs--language-picker-text"
+        $theme="brand"
+        $variation="tertiary"
         $direction="row"
         $gap="0.5rem"
-        className="--docs--language-picker-text"
+        $align="center"
       >
-        <Icon
-          iconName="translate"
-          $color="inherit"
-          $size="xl"
-          aria-hidden="true"
-        />
+        <Icon iconName="translate" $color="inherit" $size="xl" />
         {currentLanguageLabel}
-      </Text>
+      </Box>
     </DropdownMenu>
   );
 };
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LefPanelTargetFilters.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LefPanelTargetFilters.tsx
index 66430865..75f13cb6 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LefPanelTargetFilters.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LefPanelTargetFilters.tsx
@@ -78,29 +78,26 @@ export const LeftPanelTargetFilters = () => {
               padding: ${spacingsTokens['2xs']};
               border-radius: ${spacingsTokens['3xs']};
               background-color: ${isActive
-                ? colorsTokens['greyscale-100']
+                ? 'var(--c--contextuals--background--semantic--contextual--primary)'
                 : 'transparent'};
               font-weight: ${isActive ? 700 : 400};
               color: inherit;
               text-decoration: none;
               cursor: pointer;
               &:hover {
-                background-color: ${colorsTokens['greyscale-100']};
+                background-color: var(
+                  --c--contextuals--background--semantic--contextual--primary
+                );
               }
               &:focus-visible {
                 outline: none !important;
-                box-shadow: 0 0 0 2px ${colorsTokens['primary-500']} !important;
-                border-radius: 4px;
+                box-shadow: 0 0 0 2px ${colorsTokens['brand-400']} !important;
+                border-radius: var(--c--globals--spacings--st);
               }
             `}
           >
-            <Icon
-              $variation={isActive ? '1000' : '700'}
-              iconName={query.icon}
-            />
-            <Text $variation={isActive ? '1000' : '700'} $size="sm">
-              {query.label}
-            </Text>
+            <Icon iconName={query.icon} />
+            <Text $size="sm">{query.label}</Text>
           </StyledLink>
         );
       })}
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx
index ff6ef43c..6c2238f0 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx
@@ -25,7 +25,7 @@ export const LeftPanel = () => {
   const { isDesktop } = useResponsiveStore();
   const { t } = useTranslation();
 
-  const { colorsTokens, spacingsTokens } = useCunninghamTheme();
+  const { spacingsTokens } = useCunninghamTheme();
   const { togglePanel, isPanelOpen } = useLeftPanelStore();
 
   const pathname = usePathname();
@@ -43,7 +43,7 @@ export const LeftPanel = () => {
             height: calc(100vh - ${HEADER_HEIGHT}px);
             width: 100%;
             overflow: hidden;
-            background-color: ${colorsTokens['greyscale-000']};
+            background-color: var(--c--globals--colors--gray-000);
           `}
           className="--docs--left-panel-desktop"
           as="nav"
@@ -69,10 +69,10 @@ export const LeftPanel = () => {
               z-index: 999;
               width: 100dvw;
               height: calc(100dvh - 52px);
-              border-right: 1px solid var(--c--theme--colors--greyscale-200);
+              border-right: 1px solid var(--c--globals--colors--gray-200);
               position: fixed;
               transform: translateX(${isPanelOpen ? '0' : '-100dvw'});
-              background-color: var(--c--theme--colors--greyscale-000);
+              background-color: var(--c--globals--colors--gray-000);
               overflow-y: auto;
               overflow-x: hidden;
             `}
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavoriteItem.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavoriteItem.tsx
index 87a4a32b..0fd2afb4 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavoriteItem.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavoriteItem.tsx
@@ -32,11 +32,16 @@ export const LeftPanelFavoriteItem = ({ doc }: LeftPanelFavoriteItemProps) => {
           opacity: ${isDesktop ? 0 : 1};
         }
         &:hover {
-          background-color: ${colorsTokens['greyscale-100']};
+          background-color: var(
+            --c--contextuals--background--semantic--contextual--primary
+          );
+          .pinned-actions {
+            opacity: 1;
+          }
         }
         &:focus-within {
           cursor: pointer;
-          box-shadow: 0 0 0 2px ${colorsTokens['primary-500']} !important;
+          box-shadow: 0 0 0 2px ${colorsTokens['brand-400']} !important;
           .pinned-actions {
             opacity: 1;
           }
@@ -55,9 +60,9 @@ export const LeftPanelFavoriteItem = ({ doc }: LeftPanelFavoriteItemProps) => {
       >
         <SimpleDocItem showAccesses doc={doc} />
       </StyledLink>
-      <div className="pinned-actions">
+      <Box className="pinned-actions" $align="center">
         <DocsGridActions doc={doc} openShareModal={shareModal.open} />
-      </div>
+      </Box>
       {shareModal.isOpen && (
         <DocShareModal doc={doc} onClose={shareModal.close} />
       )}
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavorites.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavorites.tsx
index d917394c..7710bfbe 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavorites.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavorites.tsx
@@ -38,7 +38,6 @@ export const LeftPanelFavorites = () => {
       >
         <Text
           $size="sm"
-          $variation="700"
           $padding={{ horizontal: '3xs' }}
           $weight="700"
           id="pinned-docs-title"
@@ -46,7 +45,7 @@ export const LeftPanelFavorites = () => {
           {t('Pinned documents')}
         </Text>
         <Box>
-          <Box as="ul" $padding="none">
+          <Box as="ul" $padding="none" $margin={{ top: '4xs' }}>
             {favoriteDocs.map((doc) => (
               <LeftPanelFavoriteItem key={doc.id} doc={doc} />
             ))}
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx
index cb1d7d35..11554ec6 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx
@@ -52,42 +52,45 @@ export const LeftPanelHeader = ({ children }: PropsWithChildren) => {
             $justify="space-between"
             $align="center"
           >
-            <Box $direction="row" $gap="2px">
-              <Button
-                data-testid="home-button"
-                onClick={goToHome}
-                aria-label={t('Back to homepage')}
-                size="medium"
-                color="tertiary-text"
-                icon={
-                  <Icon
-                    $variation="800"
-                    $theme="primary"
-                    iconName="house"
-                    aria-hidden="true"
-                  />
-                }
-              />
-              {authenticated && (
-                <Button
-                  data-testid="search-docs-button"
-                  onClick={openSearchModal}
-                  size="medium"
-                  color="tertiary-text"
-                  aria-label={t('Search docs')}
-                  icon={
-                    <Icon
-                      $variation="800"
-                      $theme="primary"
-                      iconName="search"
-                      aria-hidden="true"
-                    />
-                  }
-                />
-              )}
-            </Box>
-
             {authenticated && <LeftPanelHeaderButton />}
+            {(router.pathname !== '/' || authenticated) && (
+              <Box $direction="row" $gap="2px">
+                {router.pathname !== '/' && (
+                  <Button
+                    data-testid="home-button"
+                    onClick={goToHome}
+                    aria-label={t('Back to homepage')}
+                    size="medium"
+                    color="brand"
+                    variant="tertiary"
+                    icon={
+                      <Icon
+                        $color="inherit"
+                        iconName="house"
+                        aria-hidden="true"
+                      />
+                    }
+                  />
+                )}
+                {authenticated && (
+                  <Button
+                    data-testid="search-docs-button"
+                    onClick={openSearchModal}
+                    size="medium"
+                    color="brand"
+                    variant="tertiary"
+                    aria-label={t('Search docs')}
+                    icon={
+                      <Icon
+                        $color="inherit"
+                        iconName="search"
+                        aria-hidden="true"
+                      />
+                    }
+                  />
+                )}
+              </Box>
+            )}
           </Box>
         </SeparatedSection>
         {children}
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeaderButton.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeaderButton.tsx
index 4a623ce8..bcb7dbfa 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeaderButton.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeaderButton.tsx
@@ -50,9 +50,9 @@ export const LeftPanelHeaderButton = () => {
   return (
     <Button
       data-testid="new-doc-button"
-      color="primary"
+      color="brand"
       onClick={handleClick}
-      icon={<Icon $variation="000" iconName="add" aria-hidden="true" />}
+      icon={<Icon $color="inherit" iconName="add" aria-hidden="true" />}
       disabled={isLoading}
     >
       {t('New doc')}
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/ResizableLeftPanel.tsx b/src/frontend/apps/impress/src/features/left-panel/components/ResizableLeftPanel.tsx
index e9b4960e..3691504d 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/ResizableLeftPanel.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/ResizableLeftPanel.tsx
@@ -6,8 +6,6 @@ import {
   PanelResizeHandle,
 } from 'react-resizable-panels';
 
-import { useCunninghamTheme } from '@/cunningham';
-
 // Convert a target pixel width to a percentage of the current viewport width.
 const pxToPercent = (px: number) => {
   return (px / window.innerWidth) * 100;
@@ -26,7 +24,6 @@ export const ResizableLeftPanel = ({
   minPanelSizePx = 300,
   maxPanelSizePx = 450,
 }: ResizableLeftPanelProps) => {
-  const { colorsTokens } = useCunninghamTheme();
   const ref = useRef<ImperativePanelHandle>(null);
   const savedWidthPxRef = useRef<number>(minPanelSizePx);
 
@@ -76,7 +73,7 @@ export const ResizableLeftPanel = ({
           style={{
             borderRightWidth: '1px',
             borderRightStyle: 'solid',
-            borderRightColor: colorsTokens['greyscale-200'],
+            borderRightColor: 'var(--c--contextuals--border--surface--primary)',
             width: '1px',
             cursor: 'col-resize',
           }}
diff --git a/src/frontend/apps/impress/src/features/skeletons/components/DocEditorSkeleton.tsx b/src/frontend/apps/impress/src/features/skeletons/components/DocEditorSkeleton.tsx
index 92584011..d09f6b28 100644
--- a/src/frontend/apps/impress/src/features/skeletons/components/DocEditorSkeleton.tsx
+++ b/src/frontend/apps/impress/src/features/skeletons/components/DocEditorSkeleton.tsx
@@ -29,9 +29,9 @@ export const DocEditorSkeleton = () => {
         $css={css`
           background: linear-gradient(
             90deg,
-            ${colorsTokens['greyscale-100']} 0%,
-            ${colorsTokens['greyscale-200']} 50%,
-            ${colorsTokens['greyscale-100']} 100%
+            ${colorsTokens['black-050']} 0%,
+            ${colorsTokens['black-100']} 50%,
+            ${colorsTokens['black-050']} 100%
           );
           background-size: 1000px 100%;
           animation: ${shimmer} 2s infinite linear;
@@ -51,9 +51,9 @@ export const DocEditorSkeleton = () => {
         $css={css`
           background: linear-gradient(
             90deg,
-            ${colorsTokens['greyscale-100']} 0%,
-            ${colorsTokens['greyscale-200']} 50%,
-            ${colorsTokens['greyscale-100']} 100%
+            ${colorsTokens['black-050']} 0%,
+            ${colorsTokens['black-100']} 50%,
+            ${colorsTokens['black-050']} 100%
           );
           background-size: 1000px 100%;
           animation: ${shimmer} 2s infinite linear;
@@ -100,7 +100,7 @@ export const DocEditorSkeleton = () => {
               >
                 {/* Title and metadata skeleton */}
                 <Box $gap="0.25rem" $css="flex:1;">
-                  {/* Title - "Document sans titre" style */}
+                  {/* Title - "Untitled Document" style */}
                   <SkeletonLine $width="35%" $height="40px" />
 
                   {/* Metadata (role and last update) */}
@@ -111,7 +111,7 @@ export const DocEditorSkeleton = () => {
 
                 {/* Toolbox skeleton (buttons) */}
                 <Box $direction="row" $gap="0.75rem" $align="center">
-                  {/* Partager button */}
+                  {/* Share button */}
                   <SkeletonLine $width="90px" $height="40px" />
                   {/* Download icon */}
                   <SkeletonCircle $width="40px" $height="40px" />
diff --git a/src/frontend/apps/impress/src/features/skeletons/components/Skeleton.tsx b/src/frontend/apps/impress/src/features/skeletons/components/Skeleton.tsx
index be42bb93..5b89ba5c 100644
--- a/src/frontend/apps/impress/src/features/skeletons/components/Skeleton.tsx
+++ b/src/frontend/apps/impress/src/features/skeletons/components/Skeleton.tsx
@@ -54,7 +54,7 @@ export const Skeleton = ({ children }: PropsWithChildren) => {
       $align="center"
       $width="100%"
       $height="100%"
-      $background={colorsTokens['greyscale-000']}
+      $background={colorsTokens['gray-000']}
       $css={css`
         position: absolute;
         inset: 0;
diff --git a/src/frontend/apps/impress/src/layouts/MainLayout.tsx b/src/frontend/apps/impress/src/layouts/MainLayout.tsx
index 3862dd56..413404dc 100644
--- a/src/frontend/apps/impress/src/layouts/MainLayout.tsx
+++ b/src/frontend/apps/impress/src/layouts/MainLayout.tsx
@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
 import { Box } from '@/components';
-import { useCunninghamTheme } from '@/cunningham';
 import { Header } from '@/features/header';
 import { HEADER_HEIGHT } from '@/features/header/conf';
 import { LeftPanel, ResizableLeftPanel } from '@/features/left-panel';
@@ -53,7 +52,6 @@ export function MainLayoutContent({
   enableResizablePanel = false,
 }: PropsWithChildren<MainLayoutContentProps>) {
   const { isDesktop } = useResponsiveStore();
-  const { colorsTokens } = useCunninghamTheme();
   const { t } = useTranslation();
   const currentBackgroundColor = !isDesktop ? 'white' : backgroundColor;
 
@@ -73,8 +71,8 @@ export function MainLayoutContent({
       }}
       $background={
         currentBackgroundColor === 'white'
-          ? colorsTokens['greyscale-000']
-          : colorsTokens['greyscale-050']
+          ? 'var(--c--contextuals--background--surface--primary)'
+          : 'var(--c--contextuals--background--surface--tertiary)'
       }
       $css={css`
         overflow-y: auto;
@@ -110,8 +108,8 @@ export function MainLayoutContent({
       <Box
         $css={css`
           width: 300px;
-          min-width: 300px;
-          border-right: 1px solid ${colorsTokens['greyscale-200']};
+          border-right: 1px solid
+            var(--c--contextuals--border--surface--primary);
         `}
       >
         <LeftPanel />
diff --git a/src/frontend/apps/impress/src/pages/401.tsx b/src/frontend/apps/impress/src/pages/401.tsx
index 06cce57b..31ef8427 100644
--- a/src/frontend/apps/impress/src/pages/401.tsx
+++ b/src/frontend/apps/impress/src/pages/401.tsx
@@ -43,7 +43,6 @@ const Page: NextPageWithLayout = () => {
           {t('401 Unauthorized')} - {t('Docs')}
         </Text>
         <Image
-          className="c__image-system-filter"
           src={img401}
           alt=""
           width={300}
@@ -55,7 +54,7 @@ const Page: NextPageWithLayout = () => {
         />
 
         <Box $align="center" $gap="0.8rem">
-          <Text as="p" $textAlign="center" $maxWidth="350px" $theme="primary">
+          <Text as="p" $textAlign="center" $maxWidth="350px" $theme="brand">
             {t('Log in to access the document.')}
           </Text>
 
diff --git a/src/frontend/apps/impress/src/pages/404.tsx b/src/frontend/apps/impress/src/pages/404.tsx
index 394f0a47..739fe9b6 100644
--- a/src/frontend/apps/impress/src/pages/404.tsx
+++ b/src/frontend/apps/impress/src/pages/404.tsx
@@ -39,7 +39,6 @@ const Page: NextPageWithLayout = () => {
           {t('Page Not Found - Error 404')} - {t('Docs')}
         </Text>
         <Image
-          className="c__image-system-filter"
           src={img403}
           alt=""
           width={300}
@@ -51,7 +50,7 @@ const Page: NextPageWithLayout = () => {
         />
 
         <Box $align="center" $gap="0.8rem">
-          <Text as="p" $textAlign="center" $maxWidth="350px" $theme="primary">
+          <Text as="p" $textAlign="center" $maxWidth="350px" $theme="brand">
             {t(
               'It seems that the page you are looking for does not exist or cannot be displayed correctly.',
             )}
diff --git a/src/frontend/apps/impress/src/pages/_app.tsx b/src/frontend/apps/impress/src/pages/_app.tsx
index 75596c5e..dbe9bec4 100644
--- a/src/frontend/apps/impress/src/pages/_app.tsx
+++ b/src/frontend/apps/impress/src/pages/_app.tsx
@@ -33,7 +33,6 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
             'Docs: Your new companion to collaborate on documents efficiently, intuitively, and securely.',
           )}
         />
-        <link rel="icon" href={favicon['ico']} sizes="any" />
         <link rel="icon" href={favicon['png-light']} type="image/png" />
         <link
           rel="icon"
diff --git a/src/frontend/apps/impress/src/pages/docs/[id]/index.tsx b/src/frontend/apps/impress/src/pages/docs/[id]/index.tsx
index 81c3d18c..3c077b7f 100644
--- a/src/frontend/apps/impress/src/pages/docs/[id]/index.tsx
+++ b/src/frontend/apps/impress/src/pages/docs/[id]/index.tsx
@@ -43,9 +43,12 @@ export function DocLayout() {
 
       <TreeProvider
         initialNodeId={id}
-        onLoadChildren={async (docId: string) => {
-          const doc = await getDocChildren({ docId });
-          return subPageToTree(doc.results);
+        onLoadChildren={async (docId: string, page: number) => {
+          const doc = await getDocChildren({ docId, page });
+          return {
+            children: subPageToTree(doc.results),
+            hasMore: !!doc.next,
+          };
         }}
       >
         <MainLayout enableResizablePanel={true}>
@@ -101,6 +104,10 @@ const DocPage = ({ id }: DocProps) => {
     if (!doc && !isError && !isSkeletonVisible) {
       setIsSkeletonVisible(true);
     }
+
+    if (isError) {
+      setIsSkeletonVisible(false);
+    }
   }, [doc, isError, isSkeletonVisible, setIsSkeletonVisible]);
 
   /**
@@ -140,13 +147,7 @@ const DocPage = ({ id }: DocProps) => {
 
     setDoc(docQuery);
     setCurrentDoc(docQuery);
-  }, [
-    docQuery,
-    setCurrentDoc,
-    isFetching,
-    isSkeletonVisible,
-    setIsSkeletonVisible,
-  ]);
+  }, [docQuery, setCurrentDoc, isFetching]);
 
   useEffect(() => {
     return () => {
@@ -196,7 +197,7 @@ const DocPage = ({ id }: DocProps) => {
           causes={error.cause}
           icon={
             error.status === 502 ? (
-              <Icon iconName="wifi_off" $theme="danger" $variation="600" />
+              <Icon iconName="wifi_off" $theme="danger" $withThemeInherited />
             ) : undefined
           }
         />
diff --git a/src/frontend/apps/impress/src/pages/offline/index.tsx b/src/frontend/apps/impress/src/pages/offline/index.tsx
index 4b9be103..91b3d6e8 100644
--- a/src/frontend/apps/impress/src/pages/offline/index.tsx
+++ b/src/frontend/apps/impress/src/pages/offline/index.tsx
@@ -21,7 +21,7 @@ const Page: NextPageWithLayout = () => {
     <Box $align="center" $margin="auto" $height="70vh" $gap="2rem">
       <Icon404 aria-label="Image 404" role="img" />
 
-      <Text $size="h2" $weight="700" $theme="greyscale" $variation="900">
+      <Text $size="h2" $weight="700">
         {t('Offline ?!')}
       </Text>
 
diff --git a/src/frontend/apps/impress/src/tests/utils.tsx b/src/frontend/apps/impress/src/tests/utils.tsx
index 523fa01d..bd11f63f 100644
--- a/src/frontend/apps/impress/src/tests/utils.tsx
+++ b/src/frontend/apps/impress/src/tests/utils.tsx
@@ -15,10 +15,12 @@ export const AppWrapper = ({ children }: PropsWithChildren) => {
   });
 
   return (
-    <TreeProvider initialTreeData={[]}>
-      <QueryClientProvider client={queryClient}>
-        <CunninghamProvider theme="default">{children}</CunninghamProvider>
-      </QueryClientProvider>
-    </TreeProvider>
+    <CunninghamProvider theme="default">
+      <TreeProvider initialTreeData={[]}>
+        <QueryClientProvider client={queryClient}>
+          {children}
+        </QueryClientProvider>
+      </TreeProvider>
+    </CunninghamProvider>
   );
 };
diff --git a/src/frontend/apps/impress/src/utils/styleBuilder.ts b/src/frontend/apps/impress/src/utils/styleBuilder.ts
index f45f3cb5..ff48f9ba 100644
--- a/src/frontend/apps/impress/src/utils/styleBuilder.ts
+++ b/src/frontend/apps/impress/src/utils/styleBuilder.ts
@@ -10,16 +10,16 @@ const {
   bx,
   l,
   ...spacingsLight
-} = tokens.themes.default.theme.spacings;
+} = tokens.themes.default.globals.spacings;
 /* eslint-enable @typescript-eslint/no-unused-vars */
 
 const spacings = {
-  xtiny: tokens.themes.default.theme.spacings['st'],
-  tiny: tokens.themes.default.theme.spacings['t'],
-  small: tokens.themes.default.theme.spacings['s'],
-  big: tokens.themes.default.theme.spacings['b'],
-  xbig: tokens.themes.default.theme.spacings['bx'],
-  large: tokens.themes.default.theme.spacings['l'],
+  xtiny: tokens.themes.default.globals.spacings['st'],
+  tiny: tokens.themes.default.globals.spacings['t'],
+  small: tokens.themes.default.globals.spacings['s'],
+  big: tokens.themes.default.globals.spacings['b'],
+  xbig: tokens.themes.default.globals.spacings['bx'],
+  large: tokens.themes.default.globals.spacings['l'],
   ...spacingsLight,
 };
 
diff --git a/src/frontend/yarn.lock b/src/frontend/yarn.lock
index ddb7b82b..5479ba12 100644
--- a/src/frontend/yarn.lock
+++ b/src/frontend/yarn.lock
@@ -1796,17 +1796,17 @@
   resolved "https://registry.yarnpkg.com/@gouvfr-lasuite/integration/-/integration-1.0.3.tgz#7aca824ba61d343a7905dc90c8a8bbdbce8f9a09"
   integrity sha512-OgP28CqlPi35wQPul1Dr52SngACXAk8buLGqHYXDp23fbTOJThqarrZE/pgJHoc9Ndwiu7ngwBSO4rZ7OPyMpA==
 
-"@gouvfr-lasuite/ui-kit@0.16.2":
-  version "0.16.2"
-  resolved "https://registry.yarnpkg.com/@gouvfr-lasuite/ui-kit/-/ui-kit-0.16.2.tgz#74bbe2c23421d69a2e49ed98f6791329886399bd"
-  integrity sha512-MQ1azK/RMjE5LQLpHF9pzTSO5UOe7VcUQwi4nRXCQL06IEYx38kMdsBzryty8GWdws3U3xfL0XG5vmvMHaoktg==
+"@gouvfr-lasuite/ui-kit@0.18.0":
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/@gouvfr-lasuite/ui-kit/-/ui-kit-0.18.0.tgz#5d55d492e2e3749c04fd737f892b72cd41ffe30b"
+  integrity sha512-vvruHtBid5SmIvfPaNGMCrdevNJ7bEyVM9h0rnK2avFtsfnVoOXwZTomgafjF7gIJGxEIYUYpzeOotuP9v1mzQ==
   dependencies:
     "@dnd-kit/core" "6.3.1"
     "@dnd-kit/modifiers" "9.0.0"
     "@dnd-kit/sortable" "10.0.0"
     "@fontsource/material-icons" "5.2.5"
     "@gouvfr-lasuite/integration" "1.0.2"
-    "@openfun/cunningham-react" "3.2.3"
+    "@openfun/cunningham-react" "4.0.0"
     "@types/node" "22.10.7"
     clsx "2.1.1"
     cmdk "1.0.4"
@@ -2535,10 +2535,10 @@
   resolved "https://registry.yarnpkg.com/@nolyfill/is-core-module/-/is-core-module-1.0.39.tgz#3dc35ba0f1e66b403c00b39344f870298ebb1c8e"
   integrity sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==
 
-"@openfun/cunningham-react@3.2.3":
-  version "3.2.3"
-  resolved "https://registry.yarnpkg.com/@openfun/cunningham-react/-/cunningham-react-3.2.3.tgz#107bddbbe3b487734e4c6fedee38461f45f8035e"
-  integrity sha512-itmlw1nxts+iUcPpXsTl7LWpDzA9OfQh8ox2P7HxR4a7kmQpN7Z3OGcrsiaj8jwsbJpdgOSouWubvQ3OZ25BAg==
+"@openfun/cunningham-react@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@openfun/cunningham-react/-/cunningham-react-4.0.0.tgz#5d273c72a2ced76cf060931b546238b7ee75c6ec"
+  integrity sha512-2JgIRDl2UE/PMcOrjjfxbhFRwEwF7JFAaPoN/Xjq+sOYHP6WasRxFRrkwhnuZ5ZU7lOpzaAFyPtkawoBF6GsEQ==
   dependencies:
     "@fontsource-variable/roboto-flex" "5.2.5"
     "@fontsource/material-icons-outlined" "5.2.5"