diff --git a/docs/migrations/web/MIGRATION-v3.md b/docs/migrations/web/MIGRATION-v3.md
index 19e95eb5cb..a56d73f18b 100644
--- a/docs/migrations/web/MIGRATION-v3.md
+++ b/docs/migrations/web/MIGRATION-v3.md
@@ -131,6 +131,8 @@ Removed utility classes:
 - `.bg-basic`
 - `.bg-cover`
 - `.bg-inverted`
+- `.bg-brand-primary`
+- `.bg-brand-secondary`
 
 New utility classes:
 
diff --git a/packages/demo/scss/index.scss b/packages/demo/scss/index.scss
index 6cfa931e2c..9d0542be5c 100644
--- a/packages/demo/scss/index.scss
+++ b/packages/demo/scss/index.scss
@@ -14,7 +14,7 @@ body {
 .docs-Card {
     display: block;
     padding: var(--spirit-space-700);
-    border: var(--spirit-border-width-100) solid var(--spirit-color-border-interactive-default);
+    border: var(--spirit-border-width-100) solid var(--spirit-color-border-interactive-state-default);
     border-radius: var(--spirit-radius-300);
     background-color: var(--spirit-color-background-primary);
     font-size: var(--spirit-typography-body-large-semibold-mobile-font-size);
@@ -24,14 +24,14 @@ body {
 
     @media (hover: hover) {
         &:hover {
-            border-color: var(--spirit-color-border-interactive-hover);
+            border-color: var(--spirit-color-border-interactive-state-hover);
             text-decoration: none;
             box-shadow: var(--spirit-shadow-100);
         }
     }
 
     &:active {
-        border-color: var(--spirit-color-border-interactive-active);
+        border-color: var(--spirit-color-border-interactive-state-active);
         text-decoration: none;
     }
 
diff --git a/packages/design-tokens/src/js/generated/borders.ts b/packages/design-tokens/src/js/generated/borders.ts
deleted file mode 100644
index 4bc1e06ab3..0000000000
--- a/packages/design-tokens/src/js/generated/borders.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-export const borderStyle0 = 'none';
-export const borderStyle100 = 'solid';
-export const borderStyle200 = 'dashed';
-export const borderStyle = {
-  0: borderStyle0,
-  100: borderStyle100,
-  200: borderStyle200,
-};
-
-export const borderWidth0 = 0;
-export const borderWidth100 = '1px';
-export const borderWidth200 = '2px';
-export const borderWidth = {
-  0: borderWidth0,
-  100: borderWidth100,
-  200: borderWidth200,
-};
-
-export const borders = {
-  borderStyle,
-  borderWidth,
-  style: borderStyle,
-  width: borderWidth,
-};
diff --git a/packages/design-tokens/src/js/generated/colors.ts b/packages/design-tokens/src/js/generated/colors.ts
deleted file mode 100644
index 2e1990f241..0000000000
--- a/packages/design-tokens/src/js/generated/colors.ts
+++ /dev/null
@@ -1,301 +0,0 @@
-export const actionInvertedActive = '#d4d4d4';
-export const actionInvertedDefault = '#e9e9e9';
-export const actionInvertedDisabled = '#c4c4c4';
-export const actionInvertedHover = '#dbdbdb';
-export const actionInverted = {
-  active: actionInvertedActive,
-  default: actionInvertedDefault,
-  disabled: actionInvertedDisabled,
-  hover: actionInvertedHover,
-};
-
-export const actionLinkInvertedActive = '#d4d4d4';
-export const actionLinkInvertedDefault = '#e9e9e9';
-export const actionLinkInvertedDisabled = '#c4c4c4';
-export const actionLinkInvertedHover = '#dbdbdb';
-export const actionLinkInvertedVisited = '#a7bcc2';
-export const actionLinkInverted = {
-  active: actionLinkInvertedActive,
-  default: actionLinkInvertedDefault,
-  disabled: actionLinkInvertedDisabled,
-  hover: actionLinkInvertedHover,
-  visited: actionLinkInvertedVisited,
-};
-
-export const actionLinkPrimaryActive = '#0b3a46';
-export const actionLinkPrimaryDefault = '#29616f';
-export const actionLinkPrimaryDisabled = '#979797';
-export const actionLinkPrimaryHover = '#1b5260';
-export const actionLinkPrimaryVisited = '#835ea1';
-export const actionLinkPrimary = {
-  active: actionLinkPrimaryActive,
-  default: actionLinkPrimaryDefault,
-  disabled: actionLinkPrimaryDisabled,
-  hover: actionLinkPrimaryHover,
-  visited: actionLinkPrimaryVisited,
-};
-
-export const actionLinkSecondaryActive = '#454b4e';
-export const actionLinkSecondaryDefault = '#758185';
-export const actionLinkSecondaryDisabled = '#979797';
-export const actionLinkSecondaryHover = '#5b6568';
-export const actionLinkSecondaryVisited = '#835ea1';
-export const actionLinkSecondary = {
-  active: actionLinkSecondaryActive,
-  default: actionLinkSecondaryDefault,
-  disabled: actionLinkSecondaryDisabled,
-  hover: actionLinkSecondaryHover,
-  visited: actionLinkSecondaryVisited,
-};
-
-export const actionLink = {
-  primary: actionLinkPrimary,
-  secondary: actionLinkSecondary,
-  inverted: actionLinkInverted,
-};
-
-export const actionPrimaryActive = '#0b3a46';
-export const actionPrimaryDefault = '#29616f';
-export const actionPrimaryDisabled = '#f5f5f5';
-export const actionPrimaryHover = '#1b5260';
-export const actionPrimary = {
-  active: actionPrimaryActive,
-  default: actionPrimaryDefault,
-  disabled: actionPrimaryDisabled,
-  hover: actionPrimaryHover,
-};
-
-export const actionSecondaryActive = '#c4c4c4';
-export const actionSecondaryDefault = '#a0a0a0';
-export const actionSecondaryDisabled = '#f5f5f5';
-export const actionSecondaryHover = '#737373';
-export const actionSecondary = {
-  active: actionSecondaryActive,
-  default: actionSecondaryDefault,
-  disabled: actionSecondaryDisabled,
-  hover: actionSecondaryHover,
-};
-
-export const actionSelectedActive = '#0b3a46';
-export const actionSelectedDefault = '#29616f';
-export const actionSelectedDisabled = '#a6a6a6';
-export const actionSelectedHover = '#1b5260';
-export const actionSelected = {
-  active: actionSelectedActive,
-  default: actionSelectedDefault,
-  disabled: actionSelectedDisabled,
-  hover: actionSelectedHover,
-};
-
-export const actionTertiaryActive = '#d4d4d4';
-export const actionTertiaryDefault = '#e9e9e9';
-export const actionTertiaryDisabled = '#f5f5f5';
-export const actionTertiaryHover = '#dbdbdb';
-export const actionTertiary = {
-  active: actionTertiaryActive,
-  default: actionTertiaryDefault,
-  disabled: actionTertiaryDisabled,
-  hover: actionTertiaryHover,
-};
-
-export const actionUnselectedActive = '#091417';
-export const actionUnselectedDefault = '#132930';
-export const actionUnselectedDisabled = '#a6a6a6';
-export const actionUnselectedHover = '#0b1c21';
-export const actionUnselected = {
-  active: actionUnselectedActive,
-  default: actionUnselectedDefault,
-  disabled: actionUnselectedDisabled,
-  hover: actionUnselectedHover,
-};
-
-export const action = {
-  inverted: actionInverted,
-  link: {
-    inverted: actionLinkInverted,
-    primary: actionLinkPrimary,
-    secondary: actionLinkSecondary,
-  },
-  primary: actionPrimary,
-  secondary: actionSecondary,
-  selected: actionSelected,
-  tertiary: actionTertiary,
-  unselected: actionUnselected,
-};
-
-export const backgroundColorBackdrop = '#0b1c2199';
-export const backgroundColorBasic = '#fff';
-export const backgroundColorCover = '#f0f0f0';
-export const backgroundColor = {
-  backdrop: backgroundColorBackdrop,
-  basic: backgroundColorBasic,
-  cover: backgroundColorCover,
-};
-
-export const backgroundInteractiveActive = '#a4a4a44d';
-export const backgroundInteractiveDefault = '#fff0';
-export const backgroundInteractiveHover = '#b0b0b033';
-export const backgroundInteractive = {
-  active: backgroundInteractiveActive,
-  default: backgroundInteractiveDefault,
-  hover: backgroundInteractiveHover,
-};
-
-export const backgroundInteractiveInvertedActive = '#9f9f9fcc';
-export const backgroundInteractiveInvertedDefault = '#fff0';
-export const backgroundInteractiveInvertedHover = '#bbb6';
-export const backgroundInteractiveInverted = {
-  active: backgroundInteractiveInvertedActive,
-  default: backgroundInteractiveInvertedDefault,
-  hover: backgroundInteractiveInvertedHover,
-};
-
-export const backgroundInverted = '#132930';
-
-export const background = {
-  ...backgroundColor,
-  interactive: {
-    ...backgroundInteractive,
-    inverted: backgroundInteractiveInverted,
-  },
-  inverted: backgroundInverted,
-};
-
-export const borderPrimaryActive = '#b1b1b1';
-export const borderPrimaryDefault = '#d8d8d8';
-export const borderPrimaryDisabled = '#dfdfe0';
-export const borderPrimaryHover = '#c5c5c5';
-export const borderPrimarySelected = '#29616f';
-export const borderPrimary = {
-  active: borderPrimaryActive,
-  default: borderPrimaryDefault,
-  disabled: borderPrimaryDisabled,
-  hover: borderPrimaryHover,
-  selected: borderPrimarySelected,
-};
-
-export const borderSecondaryDefault = '#e9e9e9';
-
-export const border = {
-  primary: borderPrimary,
-  secondary: {
-    default: borderSecondaryDefault,
-  },
-};
-
-export const brandPrimary = '#0b1c21';
-export const brandSecondary = '#30588c';
-export const brand = {
-  primary: brandPrimary,
-  secondary: brandSecondary,
-};
-
-export const emotionDangerActive = '#6f2535';
-export const emotionDangerBackground = '#fbeef1';
-export const emotionDangerDefault = '#ba3e5a';
-export const emotionDangerDisabled = '#f5f5f5';
-export const emotionDangerHover = '#953248';
-export const emotionDanger = {
-  active: emotionDangerActive,
-  background: emotionDangerBackground,
-  default: emotionDangerDefault,
-  disabled: emotionDangerDisabled,
-  hover: emotionDangerHover,
-};
-
-export const emotionInformativeActive = '#26456e';
-export const emotionInformativeBackground = '#e8eff7';
-export const emotionInformativeDefault = '#3b6bab';
-export const emotionInformativeDisabled = '#f5f5f5';
-export const emotionInformativeHover = '#30588c';
-export const emotionInformative = {
-  active: emotionInformativeActive,
-  background: emotionInformativeBackground,
-  default: emotionInformativeDefault,
-  disabled: emotionInformativeDisabled,
-  hover: emotionInformativeHover,
-};
-
-export const emotionSuccessActive = '#33420a';
-export const emotionSuccessBackground = '#f6fbe9';
-export const emotionSuccessDefault = '#607c13';
-export const emotionSuccessDisabled = '#f5f5f5';
-export const emotionSuccessHover = '#485d0e';
-export const emotionSuccess = {
-  active: emotionSuccessActive,
-  background: emotionSuccessBackground,
-  default: emotionSuccessDefault,
-  disabled: emotionSuccessDisabled,
-  hover: emotionSuccessHover,
-};
-
-export const emotionWarningActive = '#423400';
-export const emotionWarningBackground = '#f8f2e4';
-export const emotionWarningDefault = '#a98300';
-export const emotionWarningDisabled = '#f5f5f5';
-export const emotionWarningHover = '#755b00';
-export const emotionWarning = {
-  active: emotionWarningActive,
-  background: emotionWarningBackground,
-  default: emotionWarningDefault,
-  disabled: emotionWarningDisabled,
-  hover: emotionWarningHover,
-};
-
-export const emotion = {
-  danger: emotionDanger,
-  informative: emotionInformative,
-  success: emotionSuccess,
-  warning: emotionWarning,
-};
-
-export const focusDefault = '#4666ae';
-
-export const textPrimaryDefault = '#132930';
-export const textPrimaryDisabled = '#a6a6a6';
-export const textPrimary = {
-  default: textPrimaryDefault,
-  disabled: textPrimaryDisabled,
-};
-
-export const textPrimaryInvertedDefault = '#fff';
-export const textPrimaryInvertedDisabled = '#a6a6a6';
-export const textPrimaryInverted = {
-  default: textPrimaryInvertedDefault,
-  disabled: textPrimaryInvertedDisabled,
-};
-
-export const textSecondaryDefault = '#5c747b';
-export const textSecondaryDisabled = '#a6a6a6';
-export const textSecondary = {
-  default: textSecondaryDefault,
-  disabled: textSecondaryDisabled,
-};
-
-export const textSecondaryInvertedDefault = '#e9e9e9';
-export const textSecondaryInvertedDisabled = '#737373';
-export const textSecondaryInverted = {
-  default: textSecondaryInvertedDefault,
-  disabled: textSecondaryInvertedDisabled,
-};
-
-export const text = {
-  primary: textPrimary,
-  secondary: textSecondary,
-  inverted: {
-    primary: textPrimaryInverted,
-    secondary: textSecondaryInverted,
-  },
-};
-
-export const colors = {
-  action,
-  background,
-  border,
-  brand,
-  emotion,
-  focus: {
-    default: focusDefault,
-  },
-  text,
-};
diff --git a/packages/design-tokens/src/js/generated/gradients.ts b/packages/design-tokens/src/js/generated/gradients.ts
deleted file mode 100644
index 74479be532..0000000000
--- a/packages/design-tokens/src/js/generated/gradients.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export const gradientBackgroundBasicOverlay = 'linear-gradient(var(--gradient-angle, 90deg), #fff 0%, #fff0 100%)';
-
-export const gradients = {
-  backgroundBasicOverlay: gradientBackgroundBasicOverlay,
-};
diff --git a/packages/design-tokens/src/js/generated/measures.ts b/packages/design-tokens/src/js/generated/measures.ts
deleted file mode 100644
index e4d9e2d431..0000000000
--- a/packages/design-tokens/src/js/generated/measures.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-export const space0 = 0;
-export const space100 = '1px';
-export const space200 = '2px';
-export const space300 = '4px';
-export const space400 = '8px';
-export const space500 = '12px';
-export const space600 = '16px';
-export const space700 = '24px';
-export const space800 = '32px';
-export const space900 = '40px';
-export const space1000 = '48px';
-export const space1100 = '64px';
-export const space1200 = '80px';
-
-export const space = {
-  0: space0,
-  100: space100,
-  200: space200,
-  300: space300,
-  400: space400,
-  500: space500,
-  600: space600,
-  700: space700,
-  800: space800,
-  900: space900,
-  1000: space1000,
-  1100: space1100,
-  1200: space1200,
-};
-
-export const spaces = {
-  space,
-};
diff --git a/packages/design-tokens/src/js/generated/radii.ts b/packages/design-tokens/src/js/generated/radii.ts
deleted file mode 100644
index fe313f0c7b..0000000000
--- a/packages/design-tokens/src/js/generated/radii.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export const radius0 = 0;
-export const radius100 = '4px';
-export const radius200 = '8px';
-export const radius300 = '12px';
-
-export const radius = {
-  0: radius0,
-  100: radius100,
-  200: radius200,
-  300: radius300,
-};
-
-export const radii = {
-  radius,
-};
diff --git a/packages/design-tokens/src/js/generated/shadows.ts b/packages/design-tokens/src/js/generated/shadows.ts
deleted file mode 100644
index f9ea3fab2a..0000000000
--- a/packages/design-tokens/src/js/generated/shadows.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export const focus = '0 0 0 2px #d2c2ff99';
-
-export const shadow100 = '0 2px 8px 0 #00000026';
-export const shadow200 = '0 4px 12px 0 #0003';
-export const shadow300 = '0 8px 24px 0 #00000040';
-export const shadow400 = '0 12px 32px 0 #00000040';
-
-export const shadow = {
-  100: shadow100,
-  200: shadow200,
-  300: shadow300,
-  400: shadow400,
-};
-
-export const shadows = {
-  focus,
-  shadow,
-};
diff --git a/packages/design-tokens/src/js/generated/typography.ts b/packages/design-tokens/src/js/generated/typography.ts
deleted file mode 100644
index bc3c366177..0000000000
--- a/packages/design-tokens/src/js/generated/typography.ts
+++ /dev/null
@@ -1,374 +0,0 @@
-export const bodyLargeTextBold = {
-  mobile: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '1.125rem',
-    fontStyle: 'normal',
-    fontWeight: 600,
-    lineHeight: 1.55,
-  },
-};
-
-export const bodyLargeTextItalic = {
-  mobile: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '1.125rem',
-    fontStyle: 'italic',
-    fontWeight: 400,
-    lineHeight: 1.55,
-  },
-};
-
-export const bodyLargeTextRegular = {
-  mobile: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '1.125rem',
-    fontStyle: 'normal',
-    fontWeight: 400,
-    lineHeight: 1.55,
-  },
-};
-
-export const bodyLargeTextSemibold = {
-  mobile: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '1.125rem',
-    fontStyle: 'normal',
-    fontWeight: 500,
-    lineHeight: 1.55,
-  },
-};
-
-export const bodyLarge = {
-  bold: bodyLargeTextBold,
-  italic: bodyLargeTextItalic,
-  regular: bodyLargeTextRegular,
-  semibold: bodyLargeTextSemibold,
-};
-
-export const bodyMediumTextBold = {
-  mobile: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '1rem',
-    fontStyle: 'normal',
-    fontWeight: 600,
-    lineHeight: 1.5,
-  },
-};
-
-export const bodyMediumTextItalic = {
-  mobile: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '1rem',
-    fontStyle: 'italic',
-    fontWeight: 400,
-    lineHeight: 1.5,
-  },
-};
-
-export const bodyMediumTextRegular = {
-  mobile: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '1rem',
-    fontStyle: 'normal',
-    fontWeight: 400,
-    lineHeight: 1.5,
-  },
-};
-
-export const bodyMediumTextSemibold = {
-  mobile: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '1rem',
-    fontStyle: 'normal',
-    fontWeight: 500,
-    lineHeight: 1.5,
-  },
-};
-
-export const bodyMedium = {
-  bold: bodyMediumTextBold,
-  italic: bodyMediumTextItalic,
-  regular: bodyMediumTextRegular,
-  semibold: bodyMediumTextSemibold,
-};
-
-export const bodySmallTextBold = {
-  mobile: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '0.875rem',
-    fontStyle: 'normal',
-    fontWeight: 600,
-    lineHeight: 1.42,
-  },
-};
-
-export const bodySmallTextItalic = {
-  mobile: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '0.875rem',
-    fontStyle: 'italic',
-    fontWeight: 400,
-    lineHeight: 1.42,
-  },
-};
-
-export const bodySmallTextRegular = {
-  mobile: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '0.875rem',
-    fontStyle: 'normal',
-    fontWeight: 400,
-    lineHeight: 1.42,
-  },
-};
-
-export const bodySmallTextSemibold = {
-  mobile: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '0.875rem',
-    fontStyle: 'normal',
-    fontWeight: 500,
-    lineHeight: 1.42,
-  },
-};
-
-export const bodySmall = {
-  bold: bodySmallTextBold,
-  italic: bodySmallTextItalic,
-  regular: bodySmallTextRegular,
-  semibold: bodySmallTextSemibold,
-};
-
-export const bodyXLargeTextBold = {
-  mobile: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '1.25rem',
-    fontStyle: 'normal',
-    fontWeight: 700,
-    lineHeight: 1.6,
-  },
-};
-
-export const bodyXLargeTextItalic = {
-  mobile: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '1.25rem',
-    fontStyle: 'italic',
-    fontWeight: 400,
-    lineHeight: 1.6,
-  },
-};
-
-export const bodyXLargeTextRegular = {
-  mobile: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '1.25rem',
-    fontStyle: 'normal',
-    fontWeight: 400,
-    lineHeight: 1.6,
-  },
-};
-
-export const bodyXLargeTextSemibold = {
-  mobile: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '1.25rem',
-    fontStyle: 'normal',
-    fontWeight: 500,
-    lineHeight: 1.6,
-  },
-};
-
-export const bodyXLarge = {
-  bold: bodyXLargeTextBold,
-  italic: bodyXLargeTextItalic,
-  regular: bodyXLargeTextRegular,
-  semibold: bodyXLargeTextSemibold,
-};
-
-export const bodyXSmallTextBold = {
-  mobile: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '0.75rem',
-    fontStyle: 'normal',
-    fontWeight: 600,
-    lineHeight: 1.32,
-  },
-};
-
-export const bodyXSmallTextItalic = {
-  mobile: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '0.75rem',
-    fontStyle: 'italic',
-    fontWeight: 400,
-    lineHeight: 1.32,
-  },
-};
-
-export const bodyXSmallTextRegular = {
-  mobile: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '0.75rem',
-    fontStyle: 'normal',
-    fontWeight: 400,
-    lineHeight: 1.32,
-  },
-};
-
-export const bodyXSmallTextSemibold = {
-  mobile: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '0.75rem',
-    fontStyle: 'normal',
-    fontWeight: 500,
-    lineHeight: 1.32,
-  },
-};
-
-export const bodyXSmall = {
-  bold: bodyXSmallTextBold,
-  italic: bodyXSmallTextItalic,
-  regular: bodyXSmallTextRegular,
-  semibold: bodyXSmallTextSemibold,
-};
-
-export const body = {
-  large: bodyLarge,
-  medium: bodyMedium,
-  small: bodySmall,
-  xlarge: bodyXLarge,
-  xsmall: bodyXSmall,
-};
-
-export const headingLargeText = {
-  mobile: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '2rem',
-    fontStyle: 'normal',
-    fontWeight: 700,
-    lineHeight: 1.2,
-  },
-  tablet: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '3rem',
-    fontStyle: 'normal',
-    fontWeight: 700,
-    lineHeight: 1.2,
-  },
-  desktop: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '3rem',
-    fontStyle: 'normal',
-    fontWeight: 700,
-    lineHeight: 1.2,
-  },
-};
-
-export const headingMediumText = {
-  mobile: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '1.25rem',
-    fontStyle: 'normal',
-    fontWeight: 700,
-    lineHeight: 1.2,
-  },
-  tablet: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '2rem',
-    fontStyle: 'normal',
-    fontWeight: 700,
-    lineHeight: 1.2,
-  },
-  desktop: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '2rem',
-    fontStyle: 'normal',
-    fontWeight: 700,
-    lineHeight: 1.2,
-  },
-};
-
-export const headingSmallText = {
-  mobile: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '1.125rem',
-    fontStyle: 'normal',
-    fontWeight: 700,
-    lineHeight: 1.2,
-  },
-  tablet: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '1.5rem',
-    fontStyle: 'normal',
-    fontWeight: 700,
-    lineHeight: 1.2,
-  },
-  desktop: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '1.5rem',
-    fontStyle: 'normal',
-    fontWeight: 700,
-    lineHeight: 1.2,
-  },
-};
-
-export const headingXLargeText = {
-  mobile: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '3rem',
-    fontStyle: 'normal',
-    fontWeight: 700,
-    lineHeight: 1.2,
-  },
-  tablet: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '4rem',
-    fontStyle: 'normal',
-    fontWeight: 700,
-    lineHeight: 1.2,
-  },
-  desktop: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '4rem',
-    fontStyle: 'normal',
-    fontWeight: 700,
-    lineHeight: 1.2,
-  },
-};
-
-export const headingXSmallText = {
-  mobile: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '1rem',
-    fontStyle: 'normal',
-    fontWeight: 700,
-    lineHeight: 1.2,
-  },
-  tablet: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '1.25rem',
-    fontStyle: 'normal',
-    fontWeight: 700,
-    lineHeight: 1.2,
-  },
-  desktop: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '1.25rem',
-    fontStyle: 'normal',
-    fontWeight: 700,
-    lineHeight: 1.2,
-  },
-};
-export const heading = {
-  large: headingLargeText,
-  medium: headingMediumText,
-  small: headingSmallText,
-  xlarge: headingXLargeText,
-  xsmall: headingXSmallText,
-};
-
-export const styles = {
-  body,
-  heading,
-};
diff --git a/packages/design-tokens/src/js/global/borders.ts b/packages/design-tokens/src/js/global/borders.ts
new file mode 100644
index 0000000000..081a896e7e
--- /dev/null
+++ b/packages/design-tokens/src/js/global/borders.ts
@@ -0,0 +1,4 @@
+/* This file was generated by Supernova, don't change manually */
+export const borderWidth0 = 0;
+export const borderWidth100 = '1px';
+export const borderWidth200 = '2px';
diff --git a/packages/design-tokens/src/js/global/gradients.ts b/packages/design-tokens/src/js/global/gradients.ts
new file mode 100644
index 0000000000..47bb95930a
--- /dev/null
+++ b/packages/design-tokens/src/js/global/gradients.ts
@@ -0,0 +1,8 @@
+/* This file was generated by Supernova, don't change manually */
+// eslint-disable-next-line operator-linebreak
+export const gradientBasicOverlay =
+  'linear-gradient(var(--gradient-angle, 90deg), var(--spirit-color-gradient-basic-overlay-color-01, #fff) 0%, var(--spirit-color-gradient-basic-overlay-color-02, #fff0) 100%)';
+
+export const gradients = {
+  basicOverlay: gradientBasicOverlay,
+};
diff --git a/packages/design-tokens/src/js/generated/index.ts b/packages/design-tokens/src/js/global/index.ts
similarity index 75%
rename from packages/design-tokens/src/js/generated/index.ts
rename to packages/design-tokens/src/js/global/index.ts
index c3bd7c48cc..a147e4dfd0 100644
--- a/packages/design-tokens/src/js/generated/index.ts
+++ b/packages/design-tokens/src/js/global/index.ts
@@ -1,8 +1,7 @@
 export * from './borders';
-export * from './colors';
 export * from './gradients';
-export * from './measures';
 export * from './other';
 export * from './radii';
 export * from './shadows';
+export * from './spacing';
 export * from './typography';
diff --git a/packages/design-tokens/src/js/generated/other.ts b/packages/design-tokens/src/js/global/other.ts
similarity index 51%
rename from packages/design-tokens/src/js/generated/other.ts
rename to packages/design-tokens/src/js/global/other.ts
index b9bb992016..04123e242e 100644
--- a/packages/design-tokens/src/js/generated/other.ts
+++ b/packages/design-tokens/src/js/global/other.ts
@@ -1,47 +1,42 @@
-export const containerMaxWidth = '1280px';
+/* This file was generated by Supernova, don't change manually */
+export const containerPaddingMobile = '16px';
+export const containerPaddingTablet = '32px';
+export const containerPaddingDesktop = '32px';
 
-export const gridColumns = 12;
+export const containerMaxWidth = '1280px';
 
 export const breakpointMobile = 0;
-export const containerPaddingMobile = '16px';
-export const gridGutterMobile = '16px';
-
 export const breakpointTablet = '768px';
-export const containerPaddingTablet = '32px';
-export const gridGutterTablet = '32px';
-
 export const breakpointDesktop = '1280px';
-export const containerPaddingDesktop = '32px';
-export const gridGutterDesktop = '32px';
+
+export const gridSpacingMobile = '16px';
+export const gridSpacingDesktop = '32px';
+export const gridSpacingTablet = '32px';
+
+export const gridColumns = '12';
+
+export const tokenPrefix = 'spirit-';
 
 export const containers = {
+  padding: {
+    mobile: containerPaddingMobile,
+    tablet: containerPaddingTablet,
+    desktop: containerPaddingDesktop,
+  },
   maxWidth: containerMaxWidth,
 };
 
-export const grids = {
-  columns: gridColumns,
-};
-
 export const breakpoints = {
   mobile: breakpointMobile,
   tablet: breakpointTablet,
   desktop: breakpointDesktop,
 };
 
-export const containerPaddings = {
-  mobile: containerPaddingMobile,
-  tablet: containerPaddingTablet,
-  desktop: containerPaddingDesktop,
-};
-
-export const gridGutters = {
-  mobile: gridGutterMobile,
-  tablet: gridGutterTablet,
-  desktop: gridGutterDesktop,
-};
-
-export const others = {
-  breakpoints,
-  containerPaddings,
-  gridGutters,
+export const grids = {
+  spacing: {
+    mobile: gridSpacingMobile,
+    desktop: gridSpacingDesktop,
+    tablet: gridSpacingTablet,
+  },
+  columns: gridColumns,
 };
diff --git a/packages/design-tokens/src/js/global/radii.ts b/packages/design-tokens/src/js/global/radii.ts
new file mode 100644
index 0000000000..530dd226a1
--- /dev/null
+++ b/packages/design-tokens/src/js/global/radii.ts
@@ -0,0 +1,18 @@
+/* This file was generated by Supernova, don't change manually */
+export const radius0 = 0;
+export const radius100 = '2px';
+export const radius200 = '4px';
+export const radius300 = '8px';
+export const radius400 = '12px';
+export const radius500 = '16px';
+export const radiusFull = '9999px';
+
+export const radii = {
+  0: radius0,
+  100: radius100,
+  200: radius200,
+  300: radius300,
+  400: radius400,
+  500: radius500,
+  full: radiusFull,
+};
diff --git a/packages/design-tokens/src/js/global/shadows.ts b/packages/design-tokens/src/js/global/shadows.ts
new file mode 100644
index 0000000000..1e61e6976c
--- /dev/null
+++ b/packages/design-tokens/src/js/global/shadows.ts
@@ -0,0 +1,18 @@
+/* This file was generated by Supernova, don't change manually */
+export const focusRing = '0 0 0 2px var(--spirit-color-focus-focus-ring-color-01, #d2c2ffb2)';
+
+export const shadow100 = '0 2px 8px 0 var(--spirit-color-shadow-shadow-100-color-01, #00000026)';
+export const shadow200 = '0 4px 12px 0 var(--spirit-color-shadow-shadow-200-color-01, #0003)';
+export const shadow300 = '0 8px 24px 0 var(--spirit-color-shadow-shadow-300-color-01, #00000040)';
+export const shadow400 = '0 12px 32px 0 var(--spirit-color-shadow-shadow-400-color-01, #00000040)';
+
+export const focus = {
+  focusRing,
+};
+
+export const shadows = {
+  100: shadow100,
+  200: shadow200,
+  300: shadow300,
+  400: shadow400,
+};
diff --git a/packages/design-tokens/src/js/global/spacing.ts b/packages/design-tokens/src/js/global/spacing.ts
new file mode 100644
index 0000000000..4e2d7c792a
--- /dev/null
+++ b/packages/design-tokens/src/js/global/spacing.ts
@@ -0,0 +1,40 @@
+/* This file was generated by Supernova, don't change manually */
+export const space0 = 0;
+export const space100 = '1px';
+export const space200 = '2px';
+export const space300 = '4px';
+export const space400 = '6px';
+export const space500 = '8px';
+export const space600 = '12px';
+export const space700 = '16px';
+export const space800 = '20px';
+export const space900 = '24px';
+export const space1000 = '32px';
+export const space1100 = '40px';
+export const space1200 = '48px';
+export const space1300 = '56px';
+export const space1400 = '64px';
+export const space1500 = '72px';
+export const space1600 = '80px';
+export const space1700 = '96px';
+
+export const spaces = {
+  0: space0,
+  100: space100,
+  200: space200,
+  300: space300,
+  400: space400,
+  500: space500,
+  600: space600,
+  700: space700,
+  800: space800,
+  900: space900,
+  1000: space1000,
+  1100: space1100,
+  1200: space1200,
+  1300: space1300,
+  1400: space1400,
+  1500: space1500,
+  1600: space1600,
+  1700: space1700,
+};
diff --git a/packages/design-tokens/src/js/global/typography.ts b/packages/design-tokens/src/js/global/typography.ts
new file mode 100644
index 0000000000..a6d9791d58
--- /dev/null
+++ b/packages/design-tokens/src/js/global/typography.ts
@@ -0,0 +1,723 @@
+/* This file was generated by Supernova, don't change manually */
+export const headingXlargeRegular = {
+  desktop: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '64px',
+    fontStyle: 'normal',
+    fontWeight: 400,
+    lineHeight: 1.2,
+  },
+  tablet: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '64px',
+    fontStyle: 'normal',
+    fontWeight: 400,
+    lineHeight: 1.2,
+  },
+  mobile: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '48px',
+    fontStyle: 'normal',
+    fontWeight: 400,
+    lineHeight: 1.2,
+  },
+};
+
+export const headingXlargeSemibold = {
+  desktop: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '64px',
+    fontStyle: 'normal',
+    fontWeight: 600,
+    lineHeight: 1.2,
+  },
+  tablet: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '64px',
+    fontStyle: 'normal',
+    fontWeight: 600,
+    lineHeight: 1.2,
+  },
+  mobile: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '48px',
+    fontStyle: 'normal',
+    fontWeight: 600,
+    lineHeight: 1.2,
+  },
+};
+
+export const headingXlargeBold = {
+  desktop: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '64px',
+    fontStyle: 'normal',
+    fontWeight: 700,
+    lineHeight: 1.2,
+  },
+  tablet: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '64px',
+    fontStyle: 'normal',
+    fontWeight: 700,
+    lineHeight: 1.2,
+  },
+  mobile: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '48px',
+    fontStyle: 'normal',
+    fontWeight: 700,
+    lineHeight: 1.2,
+  },
+};
+
+export const headingXlargeItalic = {
+  desktop: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '64px',
+    fontStyle: 'italic',
+    fontWeight: 400,
+    lineHeight: 1.2,
+  },
+  tablet: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '64px',
+    fontStyle: 'italic',
+    fontWeight: 400,
+    lineHeight: 1.2,
+  },
+  mobile: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '48px',
+    fontStyle: 'italic',
+    fontWeight: 400,
+    lineHeight: 1.2,
+  },
+};
+
+export const headingLargeRegular = {
+  desktop: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '48px',
+    fontStyle: 'normal',
+    fontWeight: 400,
+    lineHeight: 1.2,
+  },
+  tablet: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '48px',
+    fontStyle: 'normal',
+    fontWeight: 400,
+    lineHeight: 1.2,
+  },
+  mobile: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '32px',
+    fontStyle: 'normal',
+    fontWeight: 400,
+    lineHeight: 1.2,
+  },
+};
+
+export const headingLargeSemibold = {
+  desktop: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '48px',
+    fontStyle: 'normal',
+    fontWeight: 600,
+    lineHeight: 1.2,
+  },
+  tablet: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '48px',
+    fontStyle: 'normal',
+    fontWeight: 600,
+    lineHeight: 1.2,
+  },
+  mobile: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '32px',
+    fontStyle: 'normal',
+    fontWeight: 600,
+    lineHeight: 1.2,
+  },
+};
+
+export const headingLargeBold = {
+  desktop: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '48px',
+    fontStyle: 'normal',
+    fontWeight: 700,
+    lineHeight: 1.2,
+  },
+  tablet: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '48px',
+    fontStyle: 'normal',
+    fontWeight: 700,
+    lineHeight: 1.2,
+  },
+  mobile: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '32px',
+    fontStyle: 'normal',
+    fontWeight: 700,
+    lineHeight: 1.2,
+  },
+};
+
+export const headingLargeItalic = {
+  desktop: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '48px',
+    fontStyle: 'italic',
+    fontWeight: 400,
+    lineHeight: 1.2,
+  },
+  tablet: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '48px',
+    fontStyle: 'italic',
+    fontWeight: 400,
+    lineHeight: 1.2,
+  },
+  mobile: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '32px',
+    fontStyle: 'italic',
+    fontWeight: 400,
+    lineHeight: 1.2,
+  },
+};
+
+export const headingMediumRegular = {
+  desktop: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '32px',
+    fontStyle: 'normal',
+    fontWeight: 400,
+    lineHeight: 1.2,
+  },
+  tablet: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '32px',
+    fontStyle: 'normal',
+    fontWeight: 400,
+    lineHeight: 1.2,
+  },
+  mobile: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '20px',
+    fontStyle: 'normal',
+    fontWeight: 400,
+    lineHeight: 1.2,
+  },
+};
+
+export const headingMediumSemibold = {
+  desktop: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '32px',
+    fontStyle: 'normal',
+    fontWeight: 600,
+    lineHeight: 1.2,
+  },
+  tablet: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '32px',
+    fontStyle: 'normal',
+    fontWeight: 600,
+    lineHeight: 1.2,
+  },
+  mobile: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '20px',
+    fontStyle: 'normal',
+    fontWeight: 600,
+    lineHeight: 1.2,
+  },
+};
+
+export const headingMediumBold = {
+  desktop: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '32px',
+    fontStyle: 'normal',
+    fontWeight: 700,
+    lineHeight: 1.2,
+  },
+  tablet: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '32px',
+    fontStyle: 'normal',
+    fontWeight: 700,
+    lineHeight: 1.2,
+  },
+  mobile: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '20px',
+    fontStyle: 'normal',
+    fontWeight: 700,
+    lineHeight: 1.2,
+  },
+};
+
+export const headingMediumItalic = {
+  desktop: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '32px',
+    fontStyle: 'italic',
+    fontWeight: 400,
+    lineHeight: 1.2,
+  },
+  tablet: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '32px',
+    fontStyle: 'italic',
+    fontWeight: 400,
+    lineHeight: 1.2,
+  },
+  mobile: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '20px',
+    fontStyle: 'italic',
+    fontWeight: 400,
+    lineHeight: 1.2,
+  },
+};
+
+export const headingSmallRegular = {
+  desktop: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '24px',
+    fontStyle: 'normal',
+    fontWeight: 400,
+    lineHeight: 1.2,
+  },
+  tablet: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '24px',
+    fontStyle: 'normal',
+    fontWeight: 400,
+    lineHeight: 1.2,
+  },
+  mobile: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '18px',
+    fontStyle: 'normal',
+    fontWeight: 400,
+    lineHeight: 1.2,
+  },
+};
+
+export const headingSmallSemibold = {
+  desktop: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '24px',
+    fontStyle: 'normal',
+    fontWeight: 600,
+    lineHeight: 1.2,
+  },
+  tablet: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '24px',
+    fontStyle: 'normal',
+    fontWeight: 600,
+    lineHeight: 1.2,
+  },
+  mobile: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '18px',
+    fontStyle: 'normal',
+    fontWeight: 600,
+    lineHeight: 1.2,
+  },
+};
+
+export const headingSmallBold = {
+  desktop: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '24px',
+    fontStyle: 'normal',
+    fontWeight: 700,
+    lineHeight: 1.2,
+  },
+  tablet: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '24px',
+    fontStyle: 'normal',
+    fontWeight: 700,
+    lineHeight: 1.2,
+  },
+  mobile: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '18px',
+    fontStyle: 'normal',
+    fontWeight: 700,
+    lineHeight: 1.2,
+  },
+};
+
+export const headingSmallItalic = {
+  desktop: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '24px',
+    fontStyle: 'italic',
+    fontWeight: 400,
+    lineHeight: 1.2,
+  },
+  tablet: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '24px',
+    fontStyle: 'italic',
+    fontWeight: 400,
+    lineHeight: 1.2,
+  },
+  mobile: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '18px',
+    fontStyle: 'italic',
+    fontWeight: 400,
+    lineHeight: 1.2,
+  },
+};
+
+export const headingXsmallRegular = {
+  desktop: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '20px',
+    fontStyle: 'normal',
+    fontWeight: 400,
+    lineHeight: 1.2,
+  },
+  tablet: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '20px',
+    fontStyle: 'normal',
+    fontWeight: 400,
+    lineHeight: 1.2,
+  },
+  mobile: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '16px',
+    fontStyle: 'normal',
+    fontWeight: 400,
+    lineHeight: 1.2,
+  },
+};
+
+export const headingXsmallSemibold = {
+  desktop: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '20px',
+    fontStyle: 'normal',
+    fontWeight: 600,
+    lineHeight: 1.2,
+  },
+  tablet: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '20px',
+    fontStyle: 'normal',
+    fontWeight: 600,
+    lineHeight: 1.2,
+  },
+  mobile: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '16px',
+    fontStyle: 'normal',
+    fontWeight: 600,
+    lineHeight: 1.2,
+  },
+};
+
+export const headingXsmallBold = {
+  desktop: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '20px',
+    fontStyle: 'normal',
+    fontWeight: 700,
+    lineHeight: 1.2,
+  },
+  tablet: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '20px',
+    fontStyle: 'normal',
+    fontWeight: 700,
+    lineHeight: 1.2,
+  },
+  mobile: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '16px',
+    fontStyle: 'normal',
+    fontWeight: 700,
+    lineHeight: 1.2,
+  },
+};
+
+export const headingXsmallItalic = {
+  desktop: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '20px',
+    fontStyle: 'italic',
+    fontWeight: 400,
+    lineHeight: 1.2,
+  },
+  tablet: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '20px',
+    fontStyle: 'italic',
+    fontWeight: 400,
+    lineHeight: 1.2,
+  },
+  mobile: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '16px',
+    fontStyle: 'italic',
+    fontWeight: 400,
+    lineHeight: 1.2,
+  },
+};
+
+export const bodyXlargeRegular = {
+  mobile: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '20px',
+    fontStyle: 'normal',
+    fontWeight: 400,
+    lineHeight: 1.6,
+  },
+};
+
+export const bodyXlargeSemibold = {
+  mobile: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '20px',
+    fontStyle: 'normal',
+    fontWeight: 600,
+    lineHeight: 1.6,
+  },
+};
+
+export const bodyXlargeBold = {
+  mobile: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '20px',
+    fontStyle: 'normal',
+    fontWeight: 700,
+    lineHeight: 1.6,
+  },
+};
+
+export const bodyXlargeItalic = {
+  mobile: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '20px',
+    fontStyle: 'italic',
+    fontWeight: 400,
+    lineHeight: 1.6,
+  },
+};
+
+export const bodyLargeRegular = {
+  mobile: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '18px',
+    fontStyle: 'normal',
+    fontWeight: 400,
+    lineHeight: 1.55,
+  },
+};
+
+export const bodyLargeSemibold = {
+  mobile: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '18px',
+    fontStyle: 'normal',
+    fontWeight: 600,
+    lineHeight: 1.55,
+  },
+};
+
+export const bodyLargeBold = {
+  mobile: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '18px',
+    fontStyle: 'normal',
+    fontWeight: 700,
+    lineHeight: 1.55,
+  },
+};
+
+export const bodyLargeItalic = {
+  mobile: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '18px',
+    fontStyle: 'italic',
+    fontWeight: 400,
+    lineHeight: 1.55,
+  },
+};
+
+export const bodyMediumRegular = {
+  mobile: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '16px',
+    fontStyle: 'normal',
+    fontWeight: 400,
+    lineHeight: 1.5,
+  },
+};
+
+export const bodyMediumSemibold = {
+  mobile: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '16px',
+    fontStyle: 'normal',
+    fontWeight: 600,
+    lineHeight: 1.5,
+  },
+};
+
+export const bodyMediumBold = {
+  mobile: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '16px',
+    fontStyle: 'normal',
+    fontWeight: 700,
+    lineHeight: 1.5,
+  },
+};
+
+export const bodyMediumItalic = {
+  mobile: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '16px',
+    fontStyle: 'italic',
+    fontWeight: 400,
+    lineHeight: 1.5,
+  },
+};
+
+export const bodySmallRegular = {
+  mobile: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '14px',
+    fontStyle: 'normal',
+    fontWeight: 400,
+    lineHeight: 1.42,
+  },
+};
+
+export const bodySmallSemibold = {
+  mobile: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '14px',
+    fontStyle: 'normal',
+    fontWeight: 600,
+    lineHeight: 1.42,
+  },
+};
+
+export const bodySmallBold = {
+  mobile: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '14px',
+    fontStyle: 'normal',
+    fontWeight: 700,
+    lineHeight: 1.42,
+  },
+};
+
+export const bodySmallItalic = {
+  mobile: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '14px',
+    fontStyle: 'italic',
+    fontWeight: 400,
+    lineHeight: 1.42,
+  },
+};
+
+export const bodyXsmallRegular = {
+  mobile: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '12px',
+    fontStyle: 'normal',
+    fontWeight: 400,
+    lineHeight: 1.32,
+  },
+};
+
+export const bodyXsmallSemibold = {
+  mobile: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '12px',
+    fontStyle: 'normal',
+    fontWeight: 600,
+    lineHeight: 1.32,
+  },
+};
+
+export const bodyXsmallBold = {
+  mobile: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '12px',
+    fontStyle: 'normal',
+    fontWeight: 700,
+    lineHeight: 1.32,
+  },
+};
+
+export const bodyXsmallItalic = {
+  mobile: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '12px',
+    fontStyle: 'italic',
+    fontWeight: 400,
+    lineHeight: 1.32,
+  },
+};
+
+export const styles = {
+  headingXlargeRegular,
+  headingXlargeSemibold,
+  headingXlargeBold,
+  headingXlargeItalic,
+  headingLargeRegular,
+  headingLargeSemibold,
+  headingLargeBold,
+  headingLargeItalic,
+  headingMediumRegular,
+  headingMediumSemibold,
+  headingMediumBold,
+  headingMediumItalic,
+  headingSmallRegular,
+  headingSmallSemibold,
+  headingSmallBold,
+  headingSmallItalic,
+  headingXsmallRegular,
+  headingXsmallSemibold,
+  headingXsmallBold,
+  headingXsmallItalic,
+  bodyXlargeRegular,
+  bodyXlargeSemibold,
+  bodyXlargeBold,
+  bodyXlargeItalic,
+  bodyLargeRegular,
+  bodyLargeSemibold,
+  bodyLargeBold,
+  bodyLargeItalic,
+  bodyMediumRegular,
+  bodyMediumSemibold,
+  bodyMediumBold,
+  bodyMediumItalic,
+  bodySmallRegular,
+  bodySmallSemibold,
+  bodySmallBold,
+  bodySmallItalic,
+  bodyXsmallRegular,
+  bodyXsmallSemibold,
+  bodyXsmallBold,
+  bodyXsmallItalic,
+};
diff --git a/packages/design-tokens/src/js/index.ts b/packages/design-tokens/src/js/index.ts
index 69e4e4eb8b..443bd31499 100644
--- a/packages/design-tokens/src/js/index.ts
+++ b/packages/design-tokens/src/js/index.ts
@@ -1 +1,2 @@
-export * from './generated';
+export * from './global';
+export * from './themes';
diff --git a/packages/design-tokens/src/js/themes/index.ts b/packages/design-tokens/src/js/themes/index.ts
new file mode 100644
index 0000000000..b01df12bbe
--- /dev/null
+++ b/packages/design-tokens/src/js/themes/index.ts
@@ -0,0 +1,12 @@
+import * as themeLightDefault from './theme-light-default';
+import * as themeLightOnBrand from './theme-light-on-brand';
+
+// The first theme is the default theme, as the left column in the Figma table.
+export const themes = {
+  themeLightDefault: {
+    colors: themeLightDefault.colors,
+  },
+  themeLightOnBrand: {
+    colors: themeLightOnBrand.colors,
+  },
+};
diff --git a/packages/design-tokens/src/js/themes/theme-light-default/colors.ts b/packages/design-tokens/src/js/themes/theme-light-default/colors.ts
new file mode 100644
index 0000000000..580cdf8fe6
--- /dev/null
+++ b/packages/design-tokens/src/js/themes/theme-light-default/colors.ts
@@ -0,0 +1,958 @@
+/* This file was generated by Supernova, don't change manually */
+export const backgroundBackdrop = '#1a1b1b80';
+
+export const backgroundInteractiveStateActive = '#f1edff';
+export const backgroundInteractiveStateDefault = '#fff0';
+export const backgroundInteractiveStateHover = '#f8f6ff';
+
+export const backgroundPrimary = '#fff';
+export const backgroundSecondary = '#f2f2f2';
+export const backgroundTertiary = '#f1edff';
+
+export const borderBasic = '#d9d9d9';
+export const borderFocus = '#7847ff';
+
+export const borderInteractiveStateActive = '#a5a5a5';
+export const borderInteractiveStateDefault = '#bfbfbf';
+export const borderInteractiveStateHover = '#b2b2b2';
+export const borderInteractiveStateSelected = '#7847ff';
+
+export const componentButtonPlainBorder = '#fff0';
+export const componentButtonPlainContent = '#6039cc';
+export const componentButtonPlainStateActive = '#e4daff';
+export const componentButtonPlainStateDefault = '#fff0';
+export const componentButtonPlainStateHover = '#f1edff';
+
+export const componentButtonPrimaryBorder = '#4e2ea6';
+export const componentButtonPrimaryContent = '#fff';
+export const componentButtonPrimaryStateActive = '#6039cc';
+export const componentButtonPrimaryStateDefault = '#7847ff';
+export const componentButtonPrimaryStateHover = '#6c40e5';
+
+export const componentButtonSecondaryBorder = '#7847ff';
+export const componentButtonSecondaryContent = '#6039cc';
+export const componentButtonSecondaryStateActive = '#e4daff';
+export const componentButtonSecondaryStateDefault = '#fff';
+export const componentButtonSecondaryStateHover = '#f1edff';
+
+export const componentButtonTertiaryBorder = '#e5e5e5';
+export const componentButtonTertiaryContent = '#202020';
+export const componentButtonTertiaryStateActive = '#d9d9d9';
+export const componentButtonTertiaryStateDefault = '#f2f2f2';
+export const componentButtonTertiaryStateHover = '#e5e5e5';
+
+export const componentHeaderBackground = '#fff';
+export const componentHeaderItemBackgroundStateActive = '#f1edff';
+export const componentHeaderItemBackgroundStateDefault = '#fff0';
+export const componentHeaderItemBackgroundStateHover = '#f8f6ff';
+export const componentHeaderItemBackgroundStateSelected = '#fff0';
+export const componentHeaderItemStateActive = '#4e2ea6';
+export const componentHeaderItemStateDefault = '#404040';
+export const componentHeaderItemStateHover = '#6039cc';
+export const componentHeaderItemStateSelected = '#6039cc';
+export const componentHeaderStripeStateSelected = '#ffbe00';
+export const componentHeaderStripeStateUnselected = '#e4daff';
+
+export const componentToggleSelectedBorder = '#327c3f';
+export const componentToggleSelectedContent = '#fff';
+export const componentToggleSelectedStateActive = '#3e9b4f';
+export const componentToggleSelectedStateDefault = '#327c3f';
+export const componentToggleSelectedStateHover = '#388b47';
+export const componentToggleUnselectedBorder = '#a5a5a5';
+export const componentToggleUnselectedContent = '#404040';
+export const componentToggleUnselectedStateActive = '#f2f2f2';
+export const componentToggleUnselectedStateDefault = '#fff';
+export const componentToggleUnselectedStateHover = '#f9f9f9';
+
+export const disabledBackground = '#f9f9f9';
+export const disabledBorder = '#e5e5e5';
+export const disabledContent = '#a5a5a5';
+export const disabledForeground = '#d9d9d9';
+
+export const emotionDangerBackgroundBasic = '#b60000';
+export const emotionDangerBackgroundSubtle = '#fef2f2';
+export const emotionDangerBorderBasic = '#b60000';
+export const emotionDangerBorderSubtle = '#f18080';
+export const emotionDangerContentBasic = '#940000';
+export const emotionDangerContentSubtle = '#fff';
+export const emotionDangerStateActive = '#e40000';
+export const emotionDangerStateDefault = '#b60000';
+export const emotionDangerStateHover = '#cd0000';
+
+export const emotionInformativeBackgroundBasic = '#0052ad';
+export const emotionInformativeBackgroundSubtle = '#f2f7fd';
+export const emotionInformativeBorderBasic = '#0052ad';
+export const emotionInformativeBorderSubtle = '#80b2eb';
+export const emotionInformativeContentBasic = '#00428c';
+export const emotionInformativeContentSubtle = '#fff';
+export const emotionInformativeStateActive = '#0066d8';
+export const emotionInformativeStateDefault = '#0052ad';
+export const emotionInformativeStateHover = '#005cc2';
+
+export const emotionSuccessBackgroundBasic = '#327c3f';
+export const emotionSuccessBackgroundSubtle = '#f5faf6';
+export const emotionSuccessBorderBasic = '#327c3f';
+export const emotionSuccessBorderSubtle = '#9ecda7';
+export const emotionSuccessContentBasic = '#286533';
+export const emotionSuccessContentSubtle = '#fff';
+export const emotionSuccessStateActive = '#3e9b4f';
+export const emotionSuccessStateDefault = '#327c3f';
+export const emotionSuccessStateHover = '#388b47';
+
+export const emotionWarningBackgroundBasic = '#c26400';
+export const emotionWarningBackgroundSubtle = '#fef8f2';
+export const emotionWarningBorderBasic = '#c26400';
+export const emotionWarningBorderSubtle = '#f9be80';
+export const emotionWarningContentBasic = '#9d5100';
+export const emotionWarningContentSubtle = '#fff';
+export const emotionWarningStateActive = '#f27d00';
+export const emotionWarningStateDefault = '#c26400';
+export const emotionWarningStateHover = '#da7100';
+
+export const focusFocusRingColor01 = '#d2c2ffb2';
+
+export const formFieldDanger = '#b60000';
+
+export const formFieldFilledBackgroundStateActive = '#fff';
+export const formFieldFilledBackgroundStateDefault = '#fff';
+export const formFieldFilledBackgroundStateHover = '#f9f9f9';
+export const formFieldFilledBorderStateActive = '#7f7f7f';
+export const formFieldFilledBorderStateDefault = '#a5a5a5';
+export const formFieldFilledBorderStateHover = '#999';
+export const formFieldFilledBorderStateSelected = '#7847ff';
+export const formFieldFilledContent = '#202020';
+export const formFieldFilledPlaceholder = '#666';
+
+export const formFieldHelperText = '#7f7f7f';
+export const formFieldLabel = '#202020';
+export const formFieldSuccess = '#327c3f';
+export const formFieldWarning = '#c26400';
+
+export const gradientBasicOverlayColor01 = '#fff';
+export const gradientBasicOverlayColor02 = '#fff0';
+
+export const lightDefaultAlphaDark0 = '#1a1b1b00';
+export const lightDefaultAlphaDark100 = '#1a1b1b0d';
+export const lightDefaultAlphaDark1000 = '#1a1b1b80';
+export const lightDefaultAlphaDark200 = '#1a1b1b1a';
+export const lightDefaultAlphaDark300 = '#1a1b1b26';
+export const lightDefaultAlphaDark400 = '#1a1b1b33';
+export const lightDefaultAlphaDark500 = '#1a1b1b40';
+export const lightDefaultAlphaDark600 = '#1a1b1b4d';
+export const lightDefaultAlphaDark700 = '#1a1b1b59';
+export const lightDefaultAlphaDark800 = '#1a1b1b66';
+export const lightDefaultAlphaDark900 = '#1a1b1b73';
+
+export const lightDefaultAlphaLight0 = '#fff0';
+export const lightDefaultAlphaLight100 = '#ffffff0d';
+export const lightDefaultAlphaLight1000 = '#ffffff80';
+export const lightDefaultAlphaLight200 = '#ffffff1a';
+export const lightDefaultAlphaLight300 = '#ffffff26';
+export const lightDefaultAlphaLight400 = '#fff3';
+export const lightDefaultAlphaLight500 = '#ffffff40';
+export const lightDefaultAlphaLight600 = '#ffffff4d';
+export const lightDefaultAlphaLight700 = '#ffffff59';
+export const lightDefaultAlphaLight800 = '#fff6';
+export const lightDefaultAlphaLight900 = '#ffffff73';
+
+export const lightDefaultBlack = '#000';
+
+export const lightDefaultBlue100 = '#f2f7fd';
+export const lightDefaultBlue1000 = '#0066d8';
+export const lightDefaultBlue1100 = '#005cc2';
+export const lightDefaultBlue1200 = '#0052ad';
+export const lightDefaultBlue1300 = '#00428c';
+export const lightDefaultBlue1400 = '#00336c';
+export const lightDefaultBlue1500 = '#001a36';
+export const lightDefaultBlue200 = '#e5f0fb';
+export const lightDefaultBlue300 = '#cce0f7';
+export const lightDefaultBlue400 = '#b2d1f3';
+export const lightDefaultBlue500 = '#99c2ef';
+export const lightDefaultBlue600 = '#80b2eb';
+export const lightDefaultBlue700 = '#66a3e8';
+export const lightDefaultBlue800 = '#4d94e4';
+export const lightDefaultBlue900 = '#3385e0';
+
+export const lightDefaultCloudy100 = '#f9f9f9';
+export const lightDefaultCloudy1000 = '#7f7f7f';
+export const lightDefaultCloudy1100 = '#727272';
+export const lightDefaultCloudy1200 = '#666';
+export const lightDefaultCloudy1300 = '#535353';
+export const lightDefaultCloudy1400 = '#404040';
+export const lightDefaultCloudy1500 = '#202020';
+export const lightDefaultCloudy200 = '#f2f2f2';
+export const lightDefaultCloudy300 = '#e5e5e5';
+export const lightDefaultCloudy400 = '#d9d9d9';
+export const lightDefaultCloudy500 = '#ccc';
+export const lightDefaultCloudy600 = '#bfbfbf';
+export const lightDefaultCloudy700 = '#b2b2b2';
+export const lightDefaultCloudy800 = '#a5a5a5';
+export const lightDefaultCloudy900 = '#999';
+
+export const lightDefaultGreen100 = '#f5faf6';
+export const lightDefaultGreen1000 = '#3e9b4f';
+export const lightDefaultGreen1100 = '#388b47';
+export const lightDefaultGreen1200 = '#327c3f';
+export const lightDefaultGreen1300 = '#286533';
+export const lightDefaultGreen1400 = '#1f4e28';
+export const lightDefaultGreen1500 = '#102714';
+export const lightDefaultGreen200 = '#ecf5ed';
+export const lightDefaultGreen300 = '#d8ebdc';
+export const lightDefaultGreen400 = '#c5e1ca';
+export const lightDefaultGreen500 = '#b2d7b9';
+export const lightDefaultGreen600 = '#9ecda7';
+export const lightDefaultGreen700 = '#8bc395';
+export const lightDefaultGreen800 = '#78b984';
+export const lightDefaultGreen900 = '#65af72';
+
+export const lightDefaultOrange100 = '#fef8f2';
+export const lightDefaultOrange1000 = '#f27d00';
+export const lightDefaultOrange1100 = '#da7100';
+export const lightDefaultOrange1200 = '#c26400';
+export const lightDefaultOrange1300 = '#9d5100';
+export const lightDefaultOrange1400 = '#793f00';
+export const lightDefaultOrange1500 = '#3d1f00';
+export const lightDefaultOrange200 = '#fef2e5';
+export const lightDefaultOrange300 = '#fce5cc';
+export const lightDefaultOrange400 = '#fbd8b2';
+export const lightDefaultOrange500 = '#facb99';
+export const lightDefaultOrange600 = '#f9be80';
+export const lightDefaultOrange700 = '#f7b166';
+export const lightDefaultOrange800 = '#f6a44d';
+export const lightDefaultOrange900 = '#f59733';
+
+export const lightDefaultPurple100 = '#f8f6ff';
+export const lightDefaultPurple1000 = '#7847ff';
+export const lightDefaultPurple1100 = '#6c40e5';
+export const lightDefaultPurple1200 = '#6039cc';
+export const lightDefaultPurple1300 = '#4e2ea6';
+export const lightDefaultPurple1400 = '#3c2480';
+export const lightDefaultPurple1500 = '#1e1240';
+export const lightDefaultPurple200 = '#f1edff';
+export const lightDefaultPurple300 = '#e4daff';
+export const lightDefaultPurple400 = '#d6c8ff';
+export const lightDefaultPurple500 = '#c9b5ff';
+export const lightDefaultPurple600 = '#bba3ff';
+export const lightDefaultPurple700 = '#ae91ff';
+export const lightDefaultPurple800 = '#a07eff';
+export const lightDefaultPurple900 = '#936cff';
+
+export const lightDefaultRed100 = '#fef2f2';
+export const lightDefaultRed1000 = '#e40000';
+export const lightDefaultRed1100 = '#cd0000';
+export const lightDefaultRed1200 = '#b60000';
+export const lightDefaultRed1300 = '#940000';
+export const lightDefaultRed1400 = '#720000';
+export const lightDefaultRed1500 = '#390000';
+export const lightDefaultRed200 = '#fce5e5';
+export const lightDefaultRed300 = '#facccc';
+export const lightDefaultRed400 = '#f7b2b2';
+export const lightDefaultRed500 = '#f49999';
+export const lightDefaultRed600 = '#f18080';
+export const lightDefaultRed700 = '#ef6666';
+export const lightDefaultRed800 = '#ec4d4d';
+export const lightDefaultRed900 = '#e93333';
+
+export const lightDefaultWhite = '#fff';
+
+export const lightDefaultYellow100 = '#fffcf2';
+export const lightDefaultYellow1000 = '#ffbe00';
+export const lightDefaultYellow1100 = '#e5ab00';
+export const lightDefaultYellow1200 = '#cc9800';
+export const lightDefaultYellow1300 = '#a67c00';
+export const lightDefaultYellow1400 = '#805f00';
+export const lightDefaultYellow1500 = '#403000';
+export const lightDefaultYellow200 = '#fff8e5';
+export const lightDefaultYellow300 = '#fff2cc';
+export const lightDefaultYellow400 = '#ffebb2';
+export const lightDefaultYellow500 = '#ffe599';
+export const lightDefaultYellow600 = '#ffdf80';
+export const lightDefaultYellow700 = '#ffd866';
+export const lightDefaultYellow800 = '#ffd24d';
+export const lightDefaultYellow900 = '#ffcb33';
+
+export const lightOnBrandAlphaDark0 = '#1a1b1b00';
+export const lightOnBrandAlphaDark100 = '#1a1b1b0d';
+export const lightOnBrandAlphaDark1000 = '#1a1b1b80';
+export const lightOnBrandAlphaDark200 = '#1a1b1b1a';
+export const lightOnBrandAlphaDark300 = '#1a1b1b26';
+export const lightOnBrandAlphaDark400 = '#1a1b1b33';
+export const lightOnBrandAlphaDark500 = '#1a1b1b40';
+export const lightOnBrandAlphaDark600 = '#1a1b1b4d';
+export const lightOnBrandAlphaDark700 = '#1a1b1b59';
+export const lightOnBrandAlphaDark800 = '#1a1b1b66';
+export const lightOnBrandAlphaDark900 = '#1a1b1b73';
+
+export const lightOnBrandAlphaLight0 = '#fff0';
+export const lightOnBrandAlphaLight100 = '#ffffff0d';
+export const lightOnBrandAlphaLight1000 = '#ffffff80';
+export const lightOnBrandAlphaLight200 = '#ffffff1a';
+export const lightOnBrandAlphaLight300 = '#ffffff26';
+export const lightOnBrandAlphaLight400 = '#fff3';
+export const lightOnBrandAlphaLight500 = '#ffffff40';
+export const lightOnBrandAlphaLight600 = '#ffffff4d';
+export const lightOnBrandAlphaLight700 = '#ffffff59';
+export const lightOnBrandAlphaLight800 = '#fff6';
+export const lightOnBrandAlphaLight900 = '#ffffff73';
+
+export const lightOnBrandBlack = '#000';
+
+export const lightOnBrandBlue100 = '#f2f7fd';
+export const lightOnBrandBlue1000 = '#0066d8';
+export const lightOnBrandBlue1100 = '#005cc2';
+export const lightOnBrandBlue1200 = '#0052ad';
+export const lightOnBrandBlue1300 = '#00428c';
+export const lightOnBrandBlue1400 = '#00336c';
+export const lightOnBrandBlue1500 = '#001a36';
+export const lightOnBrandBlue200 = '#e5f0fb';
+export const lightOnBrandBlue300 = '#cce0f7';
+export const lightOnBrandBlue400 = '#b2d1f3';
+export const lightOnBrandBlue500 = '#99c2ef';
+export const lightOnBrandBlue600 = '#80b2eb';
+export const lightOnBrandBlue700 = '#66a3e8';
+export const lightOnBrandBlue800 = '#4d94e4';
+export const lightOnBrandBlue900 = '#3385e0';
+
+export const lightOnBrandCloudy100 = '#f9f9f9';
+export const lightOnBrandCloudy1000 = '#7f7f7f';
+export const lightOnBrandCloudy1100 = '#727272';
+export const lightOnBrandCloudy1200 = '#666';
+export const lightOnBrandCloudy1300 = '#535353';
+export const lightOnBrandCloudy1400 = '#404040';
+export const lightOnBrandCloudy1500 = '#202020';
+export const lightOnBrandCloudy200 = '#f2f2f2';
+export const lightOnBrandCloudy300 = '#e5e5e5';
+export const lightOnBrandCloudy400 = '#d9d9d9';
+export const lightOnBrandCloudy500 = '#ccc';
+export const lightOnBrandCloudy600 = '#bfbfbf';
+export const lightOnBrandCloudy700 = '#b2b2b2';
+export const lightOnBrandCloudy800 = '#a5a5a5';
+export const lightOnBrandCloudy900 = '#999';
+
+export const lightOnBrandGreen100 = '#f5faf6';
+export const lightOnBrandGreen1000 = '#3e9b4f';
+export const lightOnBrandGreen1100 = '#388b47';
+export const lightOnBrandGreen1200 = '#327c3f';
+export const lightOnBrandGreen1300 = '#286533';
+export const lightOnBrandGreen1400 = '#1f4e28';
+export const lightOnBrandGreen1500 = '#102714';
+export const lightOnBrandGreen200 = '#ecf5ed';
+export const lightOnBrandGreen300 = '#d8ebdc';
+export const lightOnBrandGreen400 = '#c5e1ca';
+export const lightOnBrandGreen500 = '#b2d7b9';
+export const lightOnBrandGreen600 = '#9ecda7';
+export const lightOnBrandGreen700 = '#8bc395';
+export const lightOnBrandGreen800 = '#78b984';
+export const lightOnBrandGreen900 = '#65af72';
+
+export const lightOnBrandOrange100 = '#fef8f2';
+export const lightOnBrandOrange1000 = '#f27d00';
+export const lightOnBrandOrange1100 = '#da7100';
+export const lightOnBrandOrange1200 = '#c26400';
+export const lightOnBrandOrange1300 = '#9d5100';
+export const lightOnBrandOrange1400 = '#793f00';
+export const lightOnBrandOrange1500 = '#3d1f00';
+export const lightOnBrandOrange200 = '#fef2e5';
+export const lightOnBrandOrange300 = '#fce5cc';
+export const lightOnBrandOrange400 = '#fbd8b2';
+export const lightOnBrandOrange500 = '#facb99';
+export const lightOnBrandOrange600 = '#f9be80';
+export const lightOnBrandOrange700 = '#f7b166';
+export const lightOnBrandOrange800 = '#f6a44d';
+export const lightOnBrandOrange900 = '#f59733';
+
+export const lightOnBrandPurple100 = '#f8f6ff';
+export const lightOnBrandPurple1000 = '#7847ff';
+export const lightOnBrandPurple1100 = '#6c40e5';
+export const lightOnBrandPurple1200 = '#6039cc';
+export const lightOnBrandPurple1300 = '#4e2ea6';
+export const lightOnBrandPurple1400 = '#3c2480';
+export const lightOnBrandPurple1500 = '#1e1240';
+export const lightOnBrandPurple200 = '#f1edff';
+export const lightOnBrandPurple300 = '#e4daff';
+export const lightOnBrandPurple400 = '#d6c8ff';
+export const lightOnBrandPurple500 = '#c9b5ff';
+export const lightOnBrandPurple600 = '#bba3ff';
+export const lightOnBrandPurple700 = '#ae91ff';
+export const lightOnBrandPurple800 = '#a07eff';
+export const lightOnBrandPurple900 = '#936cff';
+
+export const lightOnBrandRed100 = '#fef2f2';
+export const lightOnBrandRed1000 = '#e40000';
+export const lightOnBrandRed1100 = '#cd0000';
+export const lightOnBrandRed1200 = '#b60000';
+export const lightOnBrandRed1300 = '#940000';
+export const lightOnBrandRed1400 = '#720000';
+export const lightOnBrandRed1500 = '#390000';
+export const lightOnBrandRed200 = '#fce5e5';
+export const lightOnBrandRed300 = '#facccc';
+export const lightOnBrandRed400 = '#f7b2b2';
+export const lightOnBrandRed500 = '#f49999';
+export const lightOnBrandRed600 = '#f18080';
+export const lightOnBrandRed700 = '#ef6666';
+export const lightOnBrandRed800 = '#ec4d4d';
+export const lightOnBrandRed900 = '#e93333';
+
+export const lightOnBrandWhite = '#fff';
+
+export const lightOnBrandYellow100 = '#fffcf2';
+export const lightOnBrandYellow1000 = '#ffbe00';
+export const lightOnBrandYellow1100 = '#e5ab00';
+export const lightOnBrandYellow1200 = '#cc9800';
+export const lightOnBrandYellow1300 = '#a67c00';
+export const lightOnBrandYellow1400 = '#805f00';
+export const lightOnBrandYellow1500 = '#403000';
+export const lightOnBrandYellow200 = '#fff8e5';
+export const lightOnBrandYellow300 = '#fff2cc';
+export const lightOnBrandYellow400 = '#ffebb2';
+export const lightOnBrandYellow500 = '#ffe599';
+export const lightOnBrandYellow600 = '#ffdf80';
+export const lightOnBrandYellow700 = '#ffd866';
+export const lightOnBrandYellow800 = '#ffd24d';
+export const lightOnBrandYellow900 = '#ffcb33';
+
+export const linkPrimaryStateActive = '#3c2480';
+export const linkPrimaryStateDefault = '#6039cc';
+export const linkPrimaryStateHover = '#4e2ea6';
+
+export const linkSecondaryStateActive = '#3c2480';
+export const linkSecondaryStateDefault = '#535353';
+export const linkSecondaryStateHover = '#4e2ea6';
+
+export const linkStateVisited = '#3c2480';
+
+export const linkTertiaryStateActive = '#3c2480';
+export const linkTertiaryStateDefault = '#7f7f7f';
+export const linkTertiaryStateHover = '#4e2ea6';
+
+export const neutralBackgroundBasic = '#202020';
+export const neutralBackgroundSubtle = '#f2f2f2';
+export const neutralBorderBasic = '#202020';
+export const neutralBorderSubtle = '#bfbfbf';
+export const neutralContentBasic = '#202020';
+export const neutralContentSubtle = '#fff';
+export const neutralStateActive = '#535353';
+export const neutralStateDefault = '#202020';
+export const neutralStateHover = '#404040';
+
+export const selectedContentBasic = '#4e2ea6';
+export const selectedContentSubtle = '#fff';
+export const selectedStateActive = '#6039cc';
+export const selectedStateDefault = '#7847ff';
+export const selectedStateHover = '#6c40e5';
+
+export const shadowShadow100Color01 = '#00000026';
+
+export const shadowShadow200Color01 = '#0003';
+
+export const shadowShadow300Color01 = '#00000040';
+
+export const shadowShadow400Color01 = '#00000040';
+
+export const textPrimary = '#202020';
+export const textSecondary = '#535353';
+export const textTertiary = '#7f7f7f';
+
+export const backgroundColors = {
+  backdrop: backgroundBackdrop,
+  interactive: {
+    stateActive: backgroundInteractiveStateActive,
+    stateDefault: backgroundInteractiveStateDefault,
+    stateHover: backgroundInteractiveStateHover,
+  },
+  primary: backgroundPrimary,
+  secondary: backgroundSecondary,
+  tertiary: backgroundTertiary,
+};
+
+export const borderColors = {
+  basic: borderBasic,
+  focus: borderFocus,
+  interactive: {
+    stateActive: borderInteractiveStateActive,
+    stateDefault: borderInteractiveStateDefault,
+    stateHover: borderInteractiveStateHover,
+    stateSelected: borderInteractiveStateSelected,
+  },
+};
+
+export const componentColors = {
+  button: {
+    plain: {
+      border: componentButtonPlainBorder,
+      content: componentButtonPlainContent,
+      stateActive: componentButtonPlainStateActive,
+      stateDefault: componentButtonPlainStateDefault,
+      stateHover: componentButtonPlainStateHover,
+    },
+    primary: {
+      border: componentButtonPrimaryBorder,
+      content: componentButtonPrimaryContent,
+      stateActive: componentButtonPrimaryStateActive,
+      stateDefault: componentButtonPrimaryStateDefault,
+      stateHover: componentButtonPrimaryStateHover,
+    },
+    secondary: {
+      border: componentButtonSecondaryBorder,
+      content: componentButtonSecondaryContent,
+      stateActive: componentButtonSecondaryStateActive,
+      stateDefault: componentButtonSecondaryStateDefault,
+      stateHover: componentButtonSecondaryStateHover,
+    },
+    tertiary: {
+      border: componentButtonTertiaryBorder,
+      content: componentButtonTertiaryContent,
+      stateActive: componentButtonTertiaryStateActive,
+      stateDefault: componentButtonTertiaryStateDefault,
+      stateHover: componentButtonTertiaryStateHover,
+    },
+  },
+  header: {
+    background: componentHeaderBackground,
+    itemBackgroundStateActive: componentHeaderItemBackgroundStateActive,
+    itemBackgroundStateDefault: componentHeaderItemBackgroundStateDefault,
+    itemBackgroundStateHover: componentHeaderItemBackgroundStateHover,
+    itemBackgroundStateSelected: componentHeaderItemBackgroundStateSelected,
+    itemStateActive: componentHeaderItemStateActive,
+    itemStateDefault: componentHeaderItemStateDefault,
+    itemStateHover: componentHeaderItemStateHover,
+    itemStateSelected: componentHeaderItemStateSelected,
+    stripeStateSelected: componentHeaderStripeStateSelected,
+    stripeStateUnselected: componentHeaderStripeStateUnselected,
+  },
+  toggle: {
+    selectedBorder: componentToggleSelectedBorder,
+    selectedContent: componentToggleSelectedContent,
+    selectedStateActive: componentToggleSelectedStateActive,
+    selectedStateDefault: componentToggleSelectedStateDefault,
+    selectedStateHover: componentToggleSelectedStateHover,
+    unselectedBorder: componentToggleUnselectedBorder,
+    unselectedContent: componentToggleUnselectedContent,
+    unselectedStateActive: componentToggleUnselectedStateActive,
+    unselectedStateDefault: componentToggleUnselectedStateDefault,
+    unselectedStateHover: componentToggleUnselectedStateHover,
+  },
+};
+
+export const disabledColors = {
+  background: disabledBackground,
+  border: disabledBorder,
+  content: disabledContent,
+  foreground: disabledForeground,
+};
+
+export const emotionColors = {
+  danger: {
+    backgroundBasic: emotionDangerBackgroundBasic,
+    backgroundSubtle: emotionDangerBackgroundSubtle,
+    borderBasic: emotionDangerBorderBasic,
+    borderSubtle: emotionDangerBorderSubtle,
+    contentBasic: emotionDangerContentBasic,
+    contentSubtle: emotionDangerContentSubtle,
+    stateActive: emotionDangerStateActive,
+    stateDefault: emotionDangerStateDefault,
+    stateHover: emotionDangerStateHover,
+  },
+  informative: {
+    backgroundBasic: emotionInformativeBackgroundBasic,
+    backgroundSubtle: emotionInformativeBackgroundSubtle,
+    borderBasic: emotionInformativeBorderBasic,
+    borderSubtle: emotionInformativeBorderSubtle,
+    contentBasic: emotionInformativeContentBasic,
+    contentSubtle: emotionInformativeContentSubtle,
+    stateActive: emotionInformativeStateActive,
+    stateDefault: emotionInformativeStateDefault,
+    stateHover: emotionInformativeStateHover,
+  },
+  success: {
+    backgroundBasic: emotionSuccessBackgroundBasic,
+    backgroundSubtle: emotionSuccessBackgroundSubtle,
+    borderBasic: emotionSuccessBorderBasic,
+    borderSubtle: emotionSuccessBorderSubtle,
+    contentBasic: emotionSuccessContentBasic,
+    contentSubtle: emotionSuccessContentSubtle,
+    stateActive: emotionSuccessStateActive,
+    stateDefault: emotionSuccessStateDefault,
+    stateHover: emotionSuccessStateHover,
+  },
+  warning: {
+    backgroundBasic: emotionWarningBackgroundBasic,
+    backgroundSubtle: emotionWarningBackgroundSubtle,
+    borderBasic: emotionWarningBorderBasic,
+    borderSubtle: emotionWarningBorderSubtle,
+    contentBasic: emotionWarningContentBasic,
+    contentSubtle: emotionWarningContentSubtle,
+    stateActive: emotionWarningStateActive,
+    stateDefault: emotionWarningStateDefault,
+    stateHover: emotionWarningStateHover,
+  },
+};
+
+export const focusColors = {
+  focusRing: {
+    color01: focusFocusRingColor01,
+  },
+};
+
+export const formFieldColors = {
+  danger: formFieldDanger,
+  filled: {
+    backgroundStateActive: formFieldFilledBackgroundStateActive,
+    backgroundStateDefault: formFieldFilledBackgroundStateDefault,
+    backgroundStateHover: formFieldFilledBackgroundStateHover,
+    borderStateActive: formFieldFilledBorderStateActive,
+    borderStateDefault: formFieldFilledBorderStateDefault,
+    borderStateHover: formFieldFilledBorderStateHover,
+    borderStateSelected: formFieldFilledBorderStateSelected,
+    content: formFieldFilledContent,
+    placeholder: formFieldFilledPlaceholder,
+  },
+  helperText: formFieldHelperText,
+  label: formFieldLabel,
+  success: formFieldSuccess,
+  warning: formFieldWarning,
+};
+
+export const gradientColors = {
+  basicOverlay: {
+    color02: gradientBasicOverlayColor02,
+  },
+};
+
+export const lightDefaultColors = {
+  alphaDark: {
+    _900: lightDefaultAlphaDark900,
+  },
+  alphaLight: {
+    _900: lightDefaultAlphaLight900,
+  },
+  black: lightDefaultBlack,
+  blue: {
+    _100: lightDefaultBlue100,
+    _1000: lightDefaultBlue1000,
+    _1100: lightDefaultBlue1100,
+    _1200: lightDefaultBlue1200,
+    _1300: lightDefaultBlue1300,
+    _1400: lightDefaultBlue1400,
+    _1500: lightDefaultBlue1500,
+    _200: lightDefaultBlue200,
+    _300: lightDefaultBlue300,
+    _400: lightDefaultBlue400,
+    _500: lightDefaultBlue500,
+    _600: lightDefaultBlue600,
+    _700: lightDefaultBlue700,
+    _800: lightDefaultBlue800,
+    _900: lightDefaultBlue900,
+  },
+  cloudy: {
+    _100: lightDefaultCloudy100,
+    _1000: lightDefaultCloudy1000,
+    _1100: lightDefaultCloudy1100,
+    _1200: lightDefaultCloudy1200,
+    _1300: lightDefaultCloudy1300,
+    _1400: lightDefaultCloudy1400,
+    _1500: lightDefaultCloudy1500,
+    _200: lightDefaultCloudy200,
+    _300: lightDefaultCloudy300,
+    _400: lightDefaultCloudy400,
+    _500: lightDefaultCloudy500,
+    _600: lightDefaultCloudy600,
+    _700: lightDefaultCloudy700,
+    _800: lightDefaultCloudy800,
+    _900: lightDefaultCloudy900,
+  },
+  green: {
+    _100: lightDefaultGreen100,
+    _1000: lightDefaultGreen1000,
+    _1100: lightDefaultGreen1100,
+    _1200: lightDefaultGreen1200,
+    _1300: lightDefaultGreen1300,
+    _1400: lightDefaultGreen1400,
+    _1500: lightDefaultGreen1500,
+    _200: lightDefaultGreen200,
+    _300: lightDefaultGreen300,
+    _400: lightDefaultGreen400,
+    _500: lightDefaultGreen500,
+    _600: lightDefaultGreen600,
+    _700: lightDefaultGreen700,
+    _800: lightDefaultGreen800,
+    _900: lightDefaultGreen900,
+  },
+  orange: {
+    _100: lightDefaultOrange100,
+    _1000: lightDefaultOrange1000,
+    _1100: lightDefaultOrange1100,
+    _1200: lightDefaultOrange1200,
+    _1300: lightDefaultOrange1300,
+    _1400: lightDefaultOrange1400,
+    _1500: lightDefaultOrange1500,
+    _200: lightDefaultOrange200,
+    _300: lightDefaultOrange300,
+    _400: lightDefaultOrange400,
+    _500: lightDefaultOrange500,
+    _600: lightDefaultOrange600,
+    _700: lightDefaultOrange700,
+    _800: lightDefaultOrange800,
+    _900: lightDefaultOrange900,
+  },
+  purple: {
+    _100: lightDefaultPurple100,
+    _1000: lightDefaultPurple1000,
+    _1100: lightDefaultPurple1100,
+    _1200: lightDefaultPurple1200,
+    _1300: lightDefaultPurple1300,
+    _1400: lightDefaultPurple1400,
+    _1500: lightDefaultPurple1500,
+    _200: lightDefaultPurple200,
+    _300: lightDefaultPurple300,
+    _400: lightDefaultPurple400,
+    _500: lightDefaultPurple500,
+    _600: lightDefaultPurple600,
+    _700: lightDefaultPurple700,
+    _800: lightDefaultPurple800,
+    _900: lightDefaultPurple900,
+  },
+  red: {
+    _100: lightDefaultRed100,
+    _1000: lightDefaultRed1000,
+    _1100: lightDefaultRed1100,
+    _1200: lightDefaultRed1200,
+    _1300: lightDefaultRed1300,
+    _1400: lightDefaultRed1400,
+    _1500: lightDefaultRed1500,
+    _200: lightDefaultRed200,
+    _300: lightDefaultRed300,
+    _400: lightDefaultRed400,
+    _500: lightDefaultRed500,
+    _600: lightDefaultRed600,
+    _700: lightDefaultRed700,
+    _800: lightDefaultRed800,
+    _900: lightDefaultRed900,
+  },
+  white: lightDefaultWhite,
+  yellow: {
+    _100: lightDefaultYellow100,
+    _1000: lightDefaultYellow1000,
+    _1100: lightDefaultYellow1100,
+    _1200: lightDefaultYellow1200,
+    _1300: lightDefaultYellow1300,
+    _1400: lightDefaultYellow1400,
+    _1500: lightDefaultYellow1500,
+    _200: lightDefaultYellow200,
+    _300: lightDefaultYellow300,
+    _400: lightDefaultYellow400,
+    _500: lightDefaultYellow500,
+    _600: lightDefaultYellow600,
+    _700: lightDefaultYellow700,
+    _800: lightDefaultYellow800,
+    _900: lightDefaultYellow900,
+  },
+};
+
+export const lightOnBrandColors = {
+  alphaDark: {
+    _900: lightOnBrandAlphaDark900,
+  },
+  alphaLight: {
+    _900: lightOnBrandAlphaLight900,
+  },
+  black: lightOnBrandBlack,
+  blue: {
+    _100: lightOnBrandBlue100,
+    _1000: lightOnBrandBlue1000,
+    _1100: lightOnBrandBlue1100,
+    _1200: lightOnBrandBlue1200,
+    _1300: lightOnBrandBlue1300,
+    _1400: lightOnBrandBlue1400,
+    _1500: lightOnBrandBlue1500,
+    _200: lightOnBrandBlue200,
+    _300: lightOnBrandBlue300,
+    _400: lightOnBrandBlue400,
+    _500: lightOnBrandBlue500,
+    _600: lightOnBrandBlue600,
+    _700: lightOnBrandBlue700,
+    _800: lightOnBrandBlue800,
+    _900: lightOnBrandBlue900,
+  },
+  cloudy: {
+    _100: lightOnBrandCloudy100,
+    _1000: lightOnBrandCloudy1000,
+    _1100: lightOnBrandCloudy1100,
+    _1200: lightOnBrandCloudy1200,
+    _1300: lightOnBrandCloudy1300,
+    _1400: lightOnBrandCloudy1400,
+    _1500: lightOnBrandCloudy1500,
+    _200: lightOnBrandCloudy200,
+    _300: lightOnBrandCloudy300,
+    _400: lightOnBrandCloudy400,
+    _500: lightOnBrandCloudy500,
+    _600: lightOnBrandCloudy600,
+    _700: lightOnBrandCloudy700,
+    _800: lightOnBrandCloudy800,
+    _900: lightOnBrandCloudy900,
+  },
+  green: {
+    _100: lightOnBrandGreen100,
+    _1000: lightOnBrandGreen1000,
+    _1100: lightOnBrandGreen1100,
+    _1200: lightOnBrandGreen1200,
+    _1300: lightOnBrandGreen1300,
+    _1400: lightOnBrandGreen1400,
+    _1500: lightOnBrandGreen1500,
+    _200: lightOnBrandGreen200,
+    _300: lightOnBrandGreen300,
+    _400: lightOnBrandGreen400,
+    _500: lightOnBrandGreen500,
+    _600: lightOnBrandGreen600,
+    _700: lightOnBrandGreen700,
+    _800: lightOnBrandGreen800,
+    _900: lightOnBrandGreen900,
+  },
+  orange: {
+    _100: lightOnBrandOrange100,
+    _1000: lightOnBrandOrange1000,
+    _1100: lightOnBrandOrange1100,
+    _1200: lightOnBrandOrange1200,
+    _1300: lightOnBrandOrange1300,
+    _1400: lightOnBrandOrange1400,
+    _1500: lightOnBrandOrange1500,
+    _200: lightOnBrandOrange200,
+    _300: lightOnBrandOrange300,
+    _400: lightOnBrandOrange400,
+    _500: lightOnBrandOrange500,
+    _600: lightOnBrandOrange600,
+    _700: lightOnBrandOrange700,
+    _800: lightOnBrandOrange800,
+    _900: lightOnBrandOrange900,
+  },
+  purple: {
+    _100: lightOnBrandPurple100,
+    _1000: lightOnBrandPurple1000,
+    _1100: lightOnBrandPurple1100,
+    _1200: lightOnBrandPurple1200,
+    _1300: lightOnBrandPurple1300,
+    _1400: lightOnBrandPurple1400,
+    _1500: lightOnBrandPurple1500,
+    _200: lightOnBrandPurple200,
+    _300: lightOnBrandPurple300,
+    _400: lightOnBrandPurple400,
+    _500: lightOnBrandPurple500,
+    _600: lightOnBrandPurple600,
+    _700: lightOnBrandPurple700,
+    _800: lightOnBrandPurple800,
+    _900: lightOnBrandPurple900,
+  },
+  red: {
+    _100: lightOnBrandRed100,
+    _1000: lightOnBrandRed1000,
+    _1100: lightOnBrandRed1100,
+    _1200: lightOnBrandRed1200,
+    _1300: lightOnBrandRed1300,
+    _1400: lightOnBrandRed1400,
+    _1500: lightOnBrandRed1500,
+    _200: lightOnBrandRed200,
+    _300: lightOnBrandRed300,
+    _400: lightOnBrandRed400,
+    _500: lightOnBrandRed500,
+    _600: lightOnBrandRed600,
+    _700: lightOnBrandRed700,
+    _800: lightOnBrandRed800,
+    _900: lightOnBrandRed900,
+  },
+  white: lightOnBrandWhite,
+  yellow: {
+    _100: lightOnBrandYellow100,
+    _1000: lightOnBrandYellow1000,
+    _1100: lightOnBrandYellow1100,
+    _1200: lightOnBrandYellow1200,
+    _1300: lightOnBrandYellow1300,
+    _1400: lightOnBrandYellow1400,
+    _1500: lightOnBrandYellow1500,
+    _200: lightOnBrandYellow200,
+    _300: lightOnBrandYellow300,
+    _400: lightOnBrandYellow400,
+    _500: lightOnBrandYellow500,
+    _600: lightOnBrandYellow600,
+    _700: lightOnBrandYellow700,
+    _800: lightOnBrandYellow800,
+    _900: lightOnBrandYellow900,
+  },
+};
+
+export const linkColors = {
+  primary: {
+    stateActive: linkPrimaryStateActive,
+    stateDefault: linkPrimaryStateDefault,
+    stateHover: linkPrimaryStateHover,
+  },
+  secondary: {
+    stateActive: linkSecondaryStateActive,
+    stateDefault: linkSecondaryStateDefault,
+    stateHover: linkSecondaryStateHover,
+  },
+  stateVisited: linkStateVisited,
+  tertiary: {
+    stateActive: linkTertiaryStateActive,
+    stateDefault: linkTertiaryStateDefault,
+    stateHover: linkTertiaryStateHover,
+  },
+};
+
+export const neutralColors = {
+  backgroundBasic: neutralBackgroundBasic,
+  backgroundSubtle: neutralBackgroundSubtle,
+  borderBasic: neutralBorderBasic,
+  borderSubtle: neutralBorderSubtle,
+  contentBasic: neutralContentBasic,
+  contentSubtle: neutralContentSubtle,
+  stateActive: neutralStateActive,
+  stateDefault: neutralStateDefault,
+  stateHover: neutralStateHover,
+};
+
+export const selectedColors = {
+  contentBasic: selectedContentBasic,
+  contentSubtle: selectedContentSubtle,
+  stateActive: selectedStateActive,
+  stateDefault: selectedStateDefault,
+  stateHover: selectedStateHover,
+};
+
+export const shadowColors = {
+  shadow100: {
+    color01: shadowShadow100Color01,
+  },
+  shadow200: {
+    color01: shadowShadow200Color01,
+  },
+  shadow300: {
+    color01: shadowShadow300Color01,
+  },
+  shadow400: {
+    color01: shadowShadow400Color01,
+  },
+};
+
+export const textColors = {
+  primary: textPrimary,
+  secondary: textSecondary,
+  tertiary: textTertiary,
+};
+
+export const colors = {
+  background: backgroundColors,
+  border: borderColors,
+  component: componentColors,
+  disabled: disabledColors,
+  emotion: emotionColors,
+  focus: focusColors,
+  formField: formFieldColors,
+  gradient: gradientColors,
+  lightDefault: lightDefaultColors,
+  lightOnBrand: lightOnBrandColors,
+  link: linkColors,
+  neutral: neutralColors,
+  selected: selectedColors,
+  shadow: shadowColors,
+  text: textColors,
+};
diff --git a/packages/design-tokens/src/js/themes/theme-light-default/index.ts b/packages/design-tokens/src/js/themes/theme-light-default/index.ts
new file mode 100644
index 0000000000..1bae1c0e49
--- /dev/null
+++ b/packages/design-tokens/src/js/themes/theme-light-default/index.ts
@@ -0,0 +1 @@
+export * from './colors';
diff --git a/packages/design-tokens/src/js/themes/theme-light-on-brand/colors.ts b/packages/design-tokens/src/js/themes/theme-light-on-brand/colors.ts
new file mode 100644
index 0000000000..638ac0c49a
--- /dev/null
+++ b/packages/design-tokens/src/js/themes/theme-light-on-brand/colors.ts
@@ -0,0 +1,958 @@
+/* This file was generated by Supernova, don't change manually */
+export const backgroundBackdrop = '#1a1b1b80';
+
+export const backgroundInteractiveStateActive = '#ffffff1a';
+export const backgroundInteractiveStateDefault = '#fff0';
+export const backgroundInteractiveStateHover = '#ffffff0d';
+
+export const backgroundPrimary = '#6039cc';
+export const backgroundSecondary = '#3c2480';
+export const backgroundTertiary = '#1e1240';
+
+export const borderBasic = '#a07eff';
+export const borderFocus = '#1e1240';
+
+export const borderInteractiveStateActive = '#bba3ff';
+export const borderInteractiveStateDefault = '#a07eff';
+export const borderInteractiveStateHover = '#ae91ff';
+export const borderInteractiveStateSelected = '#ffbe00';
+
+export const componentButtonPlainBorder = '#fff0';
+export const componentButtonPlainContent = '#fff';
+export const componentButtonPlainStateActive = '#ffffff26';
+export const componentButtonPlainStateDefault = '#fff0';
+export const componentButtonPlainStateHover = '#ffffff1a';
+
+export const componentButtonPrimaryBorder = '#1e1240';
+export const componentButtonPrimaryContent = '#3c2480';
+export const componentButtonPrimaryStateActive = '#e4daff';
+export const componentButtonPrimaryStateDefault = '#fff';
+export const componentButtonPrimaryStateHover = '#f1edff';
+
+export const componentButtonSecondaryBorder = '#f8f6ff';
+export const componentButtonSecondaryContent = '#fff';
+export const componentButtonSecondaryStateActive = '#1a1b1b26';
+export const componentButtonSecondaryStateDefault = '#1a1b1b00';
+export const componentButtonSecondaryStateHover = '#1a1b1b1a';
+
+export const componentButtonTertiaryBorder = '#1a1b1b00';
+export const componentButtonTertiaryContent = '#fff';
+export const componentButtonTertiaryStateActive = '#1a1b1b4d';
+export const componentButtonTertiaryStateDefault = '#1a1b1b33';
+export const componentButtonTertiaryStateHover = '#1a1b1b40';
+
+export const componentHeaderBackground = '#6039cc';
+export const componentHeaderItemBackgroundStateActive = '#1a1b1b26';
+export const componentHeaderItemBackgroundStateDefault = '#fff0';
+export const componentHeaderItemBackgroundStateHover = '#1a1b1b1a';
+export const componentHeaderItemBackgroundStateSelected = '#fff0';
+export const componentHeaderItemStateActive = '#e5e5e5';
+export const componentHeaderItemStateDefault = '#fff';
+export const componentHeaderItemStateHover = '#f2f2f2';
+export const componentHeaderItemStateSelected = '#ffbe00';
+export const componentHeaderStripeStateSelected = '#fff';
+export const componentHeaderStripeStateUnselected = '#ffffff40';
+
+export const componentToggleSelectedBorder = '#a07eff';
+export const componentToggleSelectedContent = '#fff';
+export const componentToggleSelectedStateActive = '#3e9b4f';
+export const componentToggleSelectedStateDefault = '#327c3f';
+export const componentToggleSelectedStateHover = '#388b47';
+export const componentToggleUnselectedBorder = '#a07eff';
+export const componentToggleUnselectedContent = '#4e2ea6';
+export const componentToggleUnselectedStateActive = '#e4daff';
+export const componentToggleUnselectedStateDefault = '#fff';
+export const componentToggleUnselectedStateHover = '#f1edff';
+
+export const disabledBackground = '#ffffff1a';
+export const disabledBorder = '#fff3';
+export const disabledContent = '#ffffff80';
+export const disabledForeground = '#fff3';
+
+export const emotionDangerBackgroundBasic = '#e40000';
+export const emotionDangerBackgroundSubtle = '#fce5e5';
+export const emotionDangerBorderBasic = '#e93333';
+export const emotionDangerBorderSubtle = '#ef6666';
+export const emotionDangerContentBasic = '#720000';
+export const emotionDangerContentSubtle = '#fff';
+export const emotionDangerStateActive = '#ec4d4d';
+export const emotionDangerStateDefault = '#e40000';
+export const emotionDangerStateHover = '#e93333';
+
+export const emotionInformativeBackgroundBasic = '#0066d8';
+export const emotionInformativeBackgroundSubtle = '#e5f0fb';
+export const emotionInformativeBorderBasic = '#3385e0';
+export const emotionInformativeBorderSubtle = '#66a3e8';
+export const emotionInformativeContentBasic = '#00336c';
+export const emotionInformativeContentSubtle = '#fff';
+export const emotionInformativeStateActive = '#4d94e4';
+export const emotionInformativeStateDefault = '#0066d8';
+export const emotionInformativeStateHover = '#3385e0';
+
+export const emotionSuccessBackgroundBasic = '#3e9b4f';
+export const emotionSuccessBackgroundSubtle = '#ecf5ed';
+export const emotionSuccessBorderBasic = '#65af72';
+export const emotionSuccessBorderSubtle = '#8bc395';
+export const emotionSuccessContentBasic = '#1f4e28';
+export const emotionSuccessContentSubtle = '#fff';
+export const emotionSuccessStateActive = '#78b984';
+export const emotionSuccessStateDefault = '#3e9b4f';
+export const emotionSuccessStateHover = '#65af72';
+
+export const emotionWarningBackgroundBasic = '#f27d00';
+export const emotionWarningBackgroundSubtle = '#fef2e5';
+export const emotionWarningBorderBasic = '#f59733';
+export const emotionWarningBorderSubtle = '#f7b166';
+export const emotionWarningContentBasic = '#793f00';
+export const emotionWarningContentSubtle = '#fff';
+export const emotionWarningStateActive = '#f6a44d';
+export const emotionWarningStateDefault = '#f27d00';
+export const emotionWarningStateHover = '#f59733';
+
+export const focusFocusRingColor01 = '#d2c2ffb2';
+
+export const formFieldDanger = '#ec4d4d';
+
+export const formFieldFilledBackgroundStateActive = '#fff';
+export const formFieldFilledBackgroundStateDefault = '#f9f9f9';
+export const formFieldFilledBackgroundStateHover = '#f1edff';
+export const formFieldFilledBorderStateDefault = '#ae91ff';
+export const formFieldFilledBorderStateActive = '#936cff';
+export const formFieldFilledBorderStateHover = '#a07eff';
+export const formFieldFilledBorderStateSelected = '#ffbe00';
+export const formFieldFilledContent = '#202020';
+export const formFieldFilledPlaceholder = '#666';
+
+export const formFieldHelperText = '#c9b5ff';
+export const formFieldLabel = '#fff';
+export const formFieldSuccess = '#78b984';
+export const formFieldWarning = '#f6a44d';
+
+export const gradientBasicOverlayColor01 = '#606060';
+export const gradientBasicOverlayColor02 = '#60606000';
+
+export const lightDefaultAlphaDark0 = '#1a1b1b00';
+export const lightDefaultAlphaDark100 = '#1a1b1b0d';
+export const lightDefaultAlphaDark1000 = '#1a1b1b80';
+export const lightDefaultAlphaDark200 = '#1a1b1b1a';
+export const lightDefaultAlphaDark300 = '#1a1b1b26';
+export const lightDefaultAlphaDark400 = '#1a1b1b33';
+export const lightDefaultAlphaDark500 = '#1a1b1b40';
+export const lightDefaultAlphaDark600 = '#1a1b1b4d';
+export const lightDefaultAlphaDark700 = '#1a1b1b59';
+export const lightDefaultAlphaDark800 = '#1a1b1b66';
+export const lightDefaultAlphaDark900 = '#1a1b1b73';
+
+export const lightDefaultAlphaLight0 = '#fff0';
+export const lightDefaultAlphaLight100 = '#ffffff0d';
+export const lightDefaultAlphaLight1000 = '#ffffff80';
+export const lightDefaultAlphaLight200 = '#ffffff1a';
+export const lightDefaultAlphaLight300 = '#ffffff26';
+export const lightDefaultAlphaLight400 = '#fff3';
+export const lightDefaultAlphaLight500 = '#ffffff40';
+export const lightDefaultAlphaLight600 = '#ffffff4d';
+export const lightDefaultAlphaLight700 = '#ffffff59';
+export const lightDefaultAlphaLight800 = '#fff6';
+export const lightDefaultAlphaLight900 = '#ffffff73';
+
+export const lightDefaultBlack = '#000';
+
+export const lightDefaultBlue100 = '#f2f7fd';
+export const lightDefaultBlue1000 = '#0066d8';
+export const lightDefaultBlue1100 = '#005cc2';
+export const lightDefaultBlue1200 = '#0052ad';
+export const lightDefaultBlue1300 = '#00428c';
+export const lightDefaultBlue1400 = '#00336c';
+export const lightDefaultBlue1500 = '#001a36';
+export const lightDefaultBlue200 = '#e5f0fb';
+export const lightDefaultBlue300 = '#cce0f7';
+export const lightDefaultBlue400 = '#b2d1f3';
+export const lightDefaultBlue500 = '#99c2ef';
+export const lightDefaultBlue600 = '#80b2eb';
+export const lightDefaultBlue700 = '#66a3e8';
+export const lightDefaultBlue800 = '#4d94e4';
+export const lightDefaultBlue900 = '#3385e0';
+
+export const lightDefaultCloudy100 = '#f9f9f9';
+export const lightDefaultCloudy1000 = '#7f7f7f';
+export const lightDefaultCloudy1100 = '#727272';
+export const lightDefaultCloudy1200 = '#666';
+export const lightDefaultCloudy1300 = '#535353';
+export const lightDefaultCloudy1400 = '#404040';
+export const lightDefaultCloudy1500 = '#202020';
+export const lightDefaultCloudy200 = '#f2f2f2';
+export const lightDefaultCloudy300 = '#e5e5e5';
+export const lightDefaultCloudy400 = '#d9d9d9';
+export const lightDefaultCloudy500 = '#ccc';
+export const lightDefaultCloudy600 = '#bfbfbf';
+export const lightDefaultCloudy700 = '#b2b2b2';
+export const lightDefaultCloudy800 = '#a5a5a5';
+export const lightDefaultCloudy900 = '#999';
+
+export const lightDefaultGreen100 = '#f5faf6';
+export const lightDefaultGreen1000 = '#3e9b4f';
+export const lightDefaultGreen1100 = '#388b47';
+export const lightDefaultGreen1200 = '#327c3f';
+export const lightDefaultGreen1300 = '#286533';
+export const lightDefaultGreen1400 = '#1f4e28';
+export const lightDefaultGreen1500 = '#102714';
+export const lightDefaultGreen200 = '#ecf5ed';
+export const lightDefaultGreen300 = '#d8ebdc';
+export const lightDefaultGreen400 = '#c5e1ca';
+export const lightDefaultGreen500 = '#b2d7b9';
+export const lightDefaultGreen600 = '#9ecda7';
+export const lightDefaultGreen700 = '#8bc395';
+export const lightDefaultGreen800 = '#78b984';
+export const lightDefaultGreen900 = '#65af72';
+
+export const lightDefaultOrange100 = '#fef8f2';
+export const lightDefaultOrange1000 = '#f27d00';
+export const lightDefaultOrange1100 = '#da7100';
+export const lightDefaultOrange1200 = '#c26400';
+export const lightDefaultOrange1300 = '#9d5100';
+export const lightDefaultOrange1400 = '#793f00';
+export const lightDefaultOrange1500 = '#3d1f00';
+export const lightDefaultOrange200 = '#fef2e5';
+export const lightDefaultOrange300 = '#fce5cc';
+export const lightDefaultOrange400 = '#fbd8b2';
+export const lightDefaultOrange500 = '#facb99';
+export const lightDefaultOrange600 = '#f9be80';
+export const lightDefaultOrange700 = '#f7b166';
+export const lightDefaultOrange800 = '#f6a44d';
+export const lightDefaultOrange900 = '#f59733';
+
+export const lightDefaultPurple100 = '#f8f6ff';
+export const lightDefaultPurple1000 = '#7847ff';
+export const lightDefaultPurple1100 = '#6c40e5';
+export const lightDefaultPurple1200 = '#6039cc';
+export const lightDefaultPurple1300 = '#4e2ea6';
+export const lightDefaultPurple1400 = '#3c2480';
+export const lightDefaultPurple1500 = '#1e1240';
+export const lightDefaultPurple200 = '#f1edff';
+export const lightDefaultPurple300 = '#e4daff';
+export const lightDefaultPurple400 = '#d6c8ff';
+export const lightDefaultPurple500 = '#c9b5ff';
+export const lightDefaultPurple600 = '#bba3ff';
+export const lightDefaultPurple700 = '#ae91ff';
+export const lightDefaultPurple800 = '#a07eff';
+export const lightDefaultPurple900 = '#936cff';
+
+export const lightDefaultRed100 = '#fef2f2';
+export const lightDefaultRed1000 = '#e40000';
+export const lightDefaultRed1100 = '#cd0000';
+export const lightDefaultRed1200 = '#b60000';
+export const lightDefaultRed1300 = '#940000';
+export const lightDefaultRed1400 = '#720000';
+export const lightDefaultRed1500 = '#390000';
+export const lightDefaultRed200 = '#fce5e5';
+export const lightDefaultRed300 = '#facccc';
+export const lightDefaultRed400 = '#f7b2b2';
+export const lightDefaultRed500 = '#f49999';
+export const lightDefaultRed600 = '#f18080';
+export const lightDefaultRed700 = '#ef6666';
+export const lightDefaultRed800 = '#ec4d4d';
+export const lightDefaultRed900 = '#e93333';
+
+export const lightDefaultWhite = '#fff';
+
+export const lightDefaultYellow100 = '#fffcf2';
+export const lightDefaultYellow1000 = '#ffbe00';
+export const lightDefaultYellow1100 = '#e5ab00';
+export const lightDefaultYellow1200 = '#cc9800';
+export const lightDefaultYellow1300 = '#a67c00';
+export const lightDefaultYellow1400 = '#805f00';
+export const lightDefaultYellow1500 = '#403000';
+export const lightDefaultYellow200 = '#fff8e5';
+export const lightDefaultYellow300 = '#fff2cc';
+export const lightDefaultYellow400 = '#ffebb2';
+export const lightDefaultYellow500 = '#ffe599';
+export const lightDefaultYellow600 = '#ffdf80';
+export const lightDefaultYellow700 = '#ffd866';
+export const lightDefaultYellow800 = '#ffd24d';
+export const lightDefaultYellow900 = '#ffcb33';
+
+export const lightOnBrandAlphaDark0 = '#1a1b1b00';
+export const lightOnBrandAlphaDark100 = '#1a1b1b0d';
+export const lightOnBrandAlphaDark1000 = '#1a1b1b80';
+export const lightOnBrandAlphaDark200 = '#1a1b1b1a';
+export const lightOnBrandAlphaDark300 = '#1a1b1b26';
+export const lightOnBrandAlphaDark400 = '#1a1b1b33';
+export const lightOnBrandAlphaDark500 = '#1a1b1b40';
+export const lightOnBrandAlphaDark600 = '#1a1b1b4d';
+export const lightOnBrandAlphaDark700 = '#1a1b1b59';
+export const lightOnBrandAlphaDark800 = '#1a1b1b66';
+export const lightOnBrandAlphaDark900 = '#1a1b1b73';
+
+export const lightOnBrandAlphaLight0 = '#fff0';
+export const lightOnBrandAlphaLight100 = '#ffffff0d';
+export const lightOnBrandAlphaLight1000 = '#ffffff80';
+export const lightOnBrandAlphaLight200 = '#ffffff1a';
+export const lightOnBrandAlphaLight300 = '#ffffff26';
+export const lightOnBrandAlphaLight400 = '#fff3';
+export const lightOnBrandAlphaLight500 = '#ffffff40';
+export const lightOnBrandAlphaLight600 = '#ffffff4d';
+export const lightOnBrandAlphaLight700 = '#ffffff59';
+export const lightOnBrandAlphaLight800 = '#fff6';
+export const lightOnBrandAlphaLight900 = '#ffffff73';
+
+export const lightOnBrandBlack = '#000';
+
+export const lightOnBrandBlue100 = '#f2f7fd';
+export const lightOnBrandBlue1000 = '#0066d8';
+export const lightOnBrandBlue1100 = '#005cc2';
+export const lightOnBrandBlue1200 = '#0052ad';
+export const lightOnBrandBlue1300 = '#00428c';
+export const lightOnBrandBlue1400 = '#00336c';
+export const lightOnBrandBlue1500 = '#001a36';
+export const lightOnBrandBlue200 = '#e5f0fb';
+export const lightOnBrandBlue300 = '#cce0f7';
+export const lightOnBrandBlue400 = '#b2d1f3';
+export const lightOnBrandBlue500 = '#99c2ef';
+export const lightOnBrandBlue600 = '#80b2eb';
+export const lightOnBrandBlue700 = '#66a3e8';
+export const lightOnBrandBlue800 = '#4d94e4';
+export const lightOnBrandBlue900 = '#3385e0';
+
+export const lightOnBrandCloudy100 = '#f9f9f9';
+export const lightOnBrandCloudy1000 = '#7f7f7f';
+export const lightOnBrandCloudy1100 = '#727272';
+export const lightOnBrandCloudy1200 = '#666';
+export const lightOnBrandCloudy1300 = '#535353';
+export const lightOnBrandCloudy1400 = '#404040';
+export const lightOnBrandCloudy1500 = '#202020';
+export const lightOnBrandCloudy200 = '#f2f2f2';
+export const lightOnBrandCloudy300 = '#e5e5e5';
+export const lightOnBrandCloudy400 = '#d9d9d9';
+export const lightOnBrandCloudy500 = '#ccc';
+export const lightOnBrandCloudy600 = '#bfbfbf';
+export const lightOnBrandCloudy700 = '#b2b2b2';
+export const lightOnBrandCloudy800 = '#a5a5a5';
+export const lightOnBrandCloudy900 = '#999';
+
+export const lightOnBrandGreen100 = '#f5faf6';
+export const lightOnBrandGreen1000 = '#3e9b4f';
+export const lightOnBrandGreen1100 = '#388b47';
+export const lightOnBrandGreen1200 = '#327c3f';
+export const lightOnBrandGreen1300 = '#286533';
+export const lightOnBrandGreen1400 = '#1f4e28';
+export const lightOnBrandGreen1500 = '#102714';
+export const lightOnBrandGreen200 = '#ecf5ed';
+export const lightOnBrandGreen300 = '#d8ebdc';
+export const lightOnBrandGreen400 = '#c5e1ca';
+export const lightOnBrandGreen500 = '#b2d7b9';
+export const lightOnBrandGreen600 = '#9ecda7';
+export const lightOnBrandGreen700 = '#8bc395';
+export const lightOnBrandGreen800 = '#78b984';
+export const lightOnBrandGreen900 = '#65af72';
+
+export const lightOnBrandOrange100 = '#fef8f2';
+export const lightOnBrandOrange1000 = '#f27d00';
+export const lightOnBrandOrange1100 = '#da7100';
+export const lightOnBrandOrange1200 = '#c26400';
+export const lightOnBrandOrange1300 = '#9d5100';
+export const lightOnBrandOrange1400 = '#793f00';
+export const lightOnBrandOrange1500 = '#3d1f00';
+export const lightOnBrandOrange200 = '#fef2e5';
+export const lightOnBrandOrange300 = '#fce5cc';
+export const lightOnBrandOrange400 = '#fbd8b2';
+export const lightOnBrandOrange500 = '#facb99';
+export const lightOnBrandOrange600 = '#f9be80';
+export const lightOnBrandOrange700 = '#f7b166';
+export const lightOnBrandOrange800 = '#f6a44d';
+export const lightOnBrandOrange900 = '#f59733';
+
+export const lightOnBrandPurple100 = '#f8f6ff';
+export const lightOnBrandPurple1000 = '#7847ff';
+export const lightOnBrandPurple1100 = '#6c40e5';
+export const lightOnBrandPurple1200 = '#6039cc';
+export const lightOnBrandPurple1300 = '#4e2ea6';
+export const lightOnBrandPurple1400 = '#3c2480';
+export const lightOnBrandPurple1500 = '#1e1240';
+export const lightOnBrandPurple200 = '#f1edff';
+export const lightOnBrandPurple300 = '#e4daff';
+export const lightOnBrandPurple400 = '#d6c8ff';
+export const lightOnBrandPurple500 = '#c9b5ff';
+export const lightOnBrandPurple600 = '#bba3ff';
+export const lightOnBrandPurple700 = '#ae91ff';
+export const lightOnBrandPurple800 = '#a07eff';
+export const lightOnBrandPurple900 = '#936cff';
+
+export const lightOnBrandRed100 = '#fef2f2';
+export const lightOnBrandRed1000 = '#e40000';
+export const lightOnBrandRed1100 = '#cd0000';
+export const lightOnBrandRed1200 = '#b60000';
+export const lightOnBrandRed1300 = '#940000';
+export const lightOnBrandRed1400 = '#720000';
+export const lightOnBrandRed1500 = '#390000';
+export const lightOnBrandRed200 = '#fce5e5';
+export const lightOnBrandRed300 = '#facccc';
+export const lightOnBrandRed400 = '#f7b2b2';
+export const lightOnBrandRed500 = '#f49999';
+export const lightOnBrandRed600 = '#f18080';
+export const lightOnBrandRed700 = '#ef6666';
+export const lightOnBrandRed800 = '#ec4d4d';
+export const lightOnBrandRed900 = '#e93333';
+
+export const lightOnBrandWhite = '#fff';
+
+export const lightOnBrandYellow100 = '#fffcf2';
+export const lightOnBrandYellow1000 = '#ffbe00';
+export const lightOnBrandYellow1100 = '#e5ab00';
+export const lightOnBrandYellow1200 = '#cc9800';
+export const lightOnBrandYellow1300 = '#a67c00';
+export const lightOnBrandYellow1400 = '#805f00';
+export const lightOnBrandYellow1500 = '#403000';
+export const lightOnBrandYellow200 = '#fff8e5';
+export const lightOnBrandYellow300 = '#fff2cc';
+export const lightOnBrandYellow400 = '#ffebb2';
+export const lightOnBrandYellow500 = '#ffe599';
+export const lightOnBrandYellow600 = '#ffdf80';
+export const lightOnBrandYellow700 = '#ffd866';
+export const lightOnBrandYellow800 = '#ffd24d';
+export const lightOnBrandYellow900 = '#ffcb33';
+
+export const linkPrimaryStateActive = '#e5e5e5';
+export const linkPrimaryStateDefault = '#fff';
+export const linkPrimaryStateHover = '#f2f2f2';
+
+export const linkSecondaryStateActive = '#e5e5e5';
+export const linkSecondaryStateDefault = '#d6c8ff';
+export const linkSecondaryStateHover = '#f2f2f2';
+
+export const linkStateVisited = '#ffbe00';
+
+export const linkTertiaryStateActive = '#e5e5e5';
+export const linkTertiaryStateDefault = '#bba3ff';
+export const linkTertiaryStateHover = '#f2f2f2';
+
+export const neutralBackgroundBasic = '#202020';
+export const neutralBackgroundSubtle = '#f2f2f2';
+export const neutralBorderBasic = '#202020';
+export const neutralBorderSubtle = '#bfbfbf';
+export const neutralContentBasic = '#202020';
+export const neutralContentSubtle = '#fff';
+export const neutralStateActive = '#535353';
+export const neutralStateDefault = '#202020';
+export const neutralStateHover = '#404040';
+
+export const selectedContentBasic = '#fff';
+export const selectedContentSubtle = '#3c2480';
+export const selectedStateActive = '#ffd24d';
+export const selectedStateDefault = '#ffbe00';
+export const selectedStateHover = '#ffcb33';
+
+export const shadowShadow100Color01 = '#00000026';
+
+export const shadowShadow200Color01 = '#0003';
+
+export const shadowShadow300Color01 = '#00000040';
+
+export const shadowShadow400Color01 = '#00000040';
+
+export const textPrimary = '#f9f9f9';
+export const textSecondary = '#d9d9d9';
+export const textTertiary = '#b2b2b2';
+
+export const backgroundColors = {
+  backdrop: backgroundBackdrop,
+  interactive: {
+    stateActive: backgroundInteractiveStateActive,
+    stateDefault: backgroundInteractiveStateDefault,
+    stateHover: backgroundInteractiveStateHover,
+  },
+  primary: backgroundPrimary,
+  secondary: backgroundSecondary,
+  tertiary: backgroundTertiary,
+};
+
+export const borderColors = {
+  basic: borderBasic,
+  focus: borderFocus,
+  interactive: {
+    stateActive: borderInteractiveStateActive,
+    stateDefault: borderInteractiveStateDefault,
+    stateHover: borderInteractiveStateHover,
+    stateSelected: borderInteractiveStateSelected,
+  },
+};
+
+export const componentColors = {
+  button: {
+    plain: {
+      border: componentButtonPlainBorder,
+      content: componentButtonPlainContent,
+      stateActive: componentButtonPlainStateActive,
+      stateDefault: componentButtonPlainStateDefault,
+      stateHover: componentButtonPlainStateHover,
+    },
+    primary: {
+      border: componentButtonPrimaryBorder,
+      content: componentButtonPrimaryContent,
+      stateActive: componentButtonPrimaryStateActive,
+      stateDefault: componentButtonPrimaryStateDefault,
+      stateHover: componentButtonPrimaryStateHover,
+    },
+    secondary: {
+      border: componentButtonSecondaryBorder,
+      content: componentButtonSecondaryContent,
+      stateActive: componentButtonSecondaryStateActive,
+      stateDefault: componentButtonSecondaryStateDefault,
+      stateHover: componentButtonSecondaryStateHover,
+    },
+    tertiary: {
+      border: componentButtonTertiaryBorder,
+      content: componentButtonTertiaryContent,
+      stateActive: componentButtonTertiaryStateActive,
+      stateDefault: componentButtonTertiaryStateDefault,
+      stateHover: componentButtonTertiaryStateHover,
+    },
+  },
+  header: {
+    background: componentHeaderBackground,
+    itemBackgroundStateActive: componentHeaderItemBackgroundStateActive,
+    itemBackgroundStateDefault: componentHeaderItemBackgroundStateDefault,
+    itemBackgroundStateHover: componentHeaderItemBackgroundStateHover,
+    itemBackgroundStateSelected: componentHeaderItemBackgroundStateSelected,
+    itemStateActive: componentHeaderItemStateActive,
+    itemStateDefault: componentHeaderItemStateDefault,
+    itemStateHover: componentHeaderItemStateHover,
+    itemStateSelected: componentHeaderItemStateSelected,
+    stripeStateSelected: componentHeaderStripeStateSelected,
+    stripeStateUnselected: componentHeaderStripeStateUnselected,
+  },
+  toggle: {
+    selectedBorder: componentToggleSelectedBorder,
+    selectedContent: componentToggleSelectedContent,
+    selectedStateActive: componentToggleSelectedStateActive,
+    selectedStateDefault: componentToggleSelectedStateDefault,
+    selectedStateHover: componentToggleSelectedStateHover,
+    unselectedBorder: componentToggleUnselectedBorder,
+    unselectedContent: componentToggleUnselectedContent,
+    unselectedStateActive: componentToggleUnselectedStateActive,
+    unselectedStateDefault: componentToggleUnselectedStateDefault,
+    unselectedStateHover: componentToggleUnselectedStateHover,
+  },
+};
+
+export const disabledColors = {
+  background: disabledBackground,
+  border: disabledBorder,
+  content: disabledContent,
+  foreground: disabledForeground,
+};
+
+export const emotionColors = {
+  danger: {
+    backgroundBasic: emotionDangerBackgroundBasic,
+    backgroundSubtle: emotionDangerBackgroundSubtle,
+    borderBasic: emotionDangerBorderBasic,
+    borderSubtle: emotionDangerBorderSubtle,
+    contentBasic: emotionDangerContentBasic,
+    contentSubtle: emotionDangerContentSubtle,
+    stateActive: emotionDangerStateActive,
+    stateDefault: emotionDangerStateDefault,
+    stateHover: emotionDangerStateHover,
+  },
+  informative: {
+    backgroundBasic: emotionInformativeBackgroundBasic,
+    backgroundSubtle: emotionInformativeBackgroundSubtle,
+    borderBasic: emotionInformativeBorderBasic,
+    borderSubtle: emotionInformativeBorderSubtle,
+    contentBasic: emotionInformativeContentBasic,
+    contentSubtle: emotionInformativeContentSubtle,
+    stateActive: emotionInformativeStateActive,
+    stateDefault: emotionInformativeStateDefault,
+    stateHover: emotionInformativeStateHover,
+  },
+  success: {
+    backgroundBasic: emotionSuccessBackgroundBasic,
+    backgroundSubtle: emotionSuccessBackgroundSubtle,
+    borderBasic: emotionSuccessBorderBasic,
+    borderSubtle: emotionSuccessBorderSubtle,
+    contentBasic: emotionSuccessContentBasic,
+    contentSubtle: emotionSuccessContentSubtle,
+    stateActive: emotionSuccessStateActive,
+    stateDefault: emotionSuccessStateDefault,
+    stateHover: emotionSuccessStateHover,
+  },
+  warning: {
+    backgroundBasic: emotionWarningBackgroundBasic,
+    backgroundSubtle: emotionWarningBackgroundSubtle,
+    borderBasic: emotionWarningBorderBasic,
+    borderSubtle: emotionWarningBorderSubtle,
+    contentBasic: emotionWarningContentBasic,
+    contentSubtle: emotionWarningContentSubtle,
+    stateActive: emotionWarningStateActive,
+    stateDefault: emotionWarningStateDefault,
+    stateHover: emotionWarningStateHover,
+  },
+};
+
+export const focusColors = {
+  focusRing: {
+    color01: focusFocusRingColor01,
+  },
+};
+
+export const formFieldColors = {
+  danger: formFieldDanger,
+  filled: {
+    backgroundStateActive: formFieldFilledBackgroundStateActive,
+    backgroundStateDefault: formFieldFilledBackgroundStateDefault,
+    backgroundStateHover: formFieldFilledBackgroundStateHover,
+    borderStateActive: formFieldFilledBorderStateActive,
+    borderStateDefault: formFieldFilledBorderStateDefault,
+    borderStateHover: formFieldFilledBorderStateHover,
+    borderStateSelected: formFieldFilledBorderStateSelected,
+    content: formFieldFilledContent,
+    placeholder: formFieldFilledPlaceholder,
+  },
+  helperText: formFieldHelperText,
+  label: formFieldLabel,
+  success: formFieldSuccess,
+  warning: formFieldWarning,
+};
+
+export const gradientColors = {
+  basicOverlay: {
+    color02: gradientBasicOverlayColor02,
+  },
+};
+
+export const lightDefaultColors = {
+  alphaDark: {
+    _900: lightDefaultAlphaDark900,
+  },
+  alphaLight: {
+    _900: lightDefaultAlphaLight900,
+  },
+  black: lightDefaultBlack,
+  blue: {
+    _100: lightDefaultBlue100,
+    _1000: lightDefaultBlue1000,
+    _1100: lightDefaultBlue1100,
+    _1200: lightDefaultBlue1200,
+    _1300: lightDefaultBlue1300,
+    _1400: lightDefaultBlue1400,
+    _1500: lightDefaultBlue1500,
+    _200: lightDefaultBlue200,
+    _300: lightDefaultBlue300,
+    _400: lightDefaultBlue400,
+    _500: lightDefaultBlue500,
+    _600: lightDefaultBlue600,
+    _700: lightDefaultBlue700,
+    _800: lightDefaultBlue800,
+    _900: lightDefaultBlue900,
+  },
+  cloudy: {
+    _100: lightDefaultCloudy100,
+    _1000: lightDefaultCloudy1000,
+    _1100: lightDefaultCloudy1100,
+    _1200: lightDefaultCloudy1200,
+    _1300: lightDefaultCloudy1300,
+    _1400: lightDefaultCloudy1400,
+    _1500: lightDefaultCloudy1500,
+    _200: lightDefaultCloudy200,
+    _300: lightDefaultCloudy300,
+    _400: lightDefaultCloudy400,
+    _500: lightDefaultCloudy500,
+    _600: lightDefaultCloudy600,
+    _700: lightDefaultCloudy700,
+    _800: lightDefaultCloudy800,
+    _900: lightDefaultCloudy900,
+  },
+  green: {
+    _100: lightDefaultGreen100,
+    _1000: lightDefaultGreen1000,
+    _1100: lightDefaultGreen1100,
+    _1200: lightDefaultGreen1200,
+    _1300: lightDefaultGreen1300,
+    _1400: lightDefaultGreen1400,
+    _1500: lightDefaultGreen1500,
+    _200: lightDefaultGreen200,
+    _300: lightDefaultGreen300,
+    _400: lightDefaultGreen400,
+    _500: lightDefaultGreen500,
+    _600: lightDefaultGreen600,
+    _700: lightDefaultGreen700,
+    _800: lightDefaultGreen800,
+    _900: lightDefaultGreen900,
+  },
+  orange: {
+    _100: lightDefaultOrange100,
+    _1000: lightDefaultOrange1000,
+    _1100: lightDefaultOrange1100,
+    _1200: lightDefaultOrange1200,
+    _1300: lightDefaultOrange1300,
+    _1400: lightDefaultOrange1400,
+    _1500: lightDefaultOrange1500,
+    _200: lightDefaultOrange200,
+    _300: lightDefaultOrange300,
+    _400: lightDefaultOrange400,
+    _500: lightDefaultOrange500,
+    _600: lightDefaultOrange600,
+    _700: lightDefaultOrange700,
+    _800: lightDefaultOrange800,
+    _900: lightDefaultOrange900,
+  },
+  purple: {
+    _100: lightDefaultPurple100,
+    _1000: lightDefaultPurple1000,
+    _1100: lightDefaultPurple1100,
+    _1200: lightDefaultPurple1200,
+    _1300: lightDefaultPurple1300,
+    _1400: lightDefaultPurple1400,
+    _1500: lightDefaultPurple1500,
+    _200: lightDefaultPurple200,
+    _300: lightDefaultPurple300,
+    _400: lightDefaultPurple400,
+    _500: lightDefaultPurple500,
+    _600: lightDefaultPurple600,
+    _700: lightDefaultPurple700,
+    _800: lightDefaultPurple800,
+    _900: lightDefaultPurple900,
+  },
+  red: {
+    _100: lightDefaultRed100,
+    _1000: lightDefaultRed1000,
+    _1100: lightDefaultRed1100,
+    _1200: lightDefaultRed1200,
+    _1300: lightDefaultRed1300,
+    _1400: lightDefaultRed1400,
+    _1500: lightDefaultRed1500,
+    _200: lightDefaultRed200,
+    _300: lightDefaultRed300,
+    _400: lightDefaultRed400,
+    _500: lightDefaultRed500,
+    _600: lightDefaultRed600,
+    _700: lightDefaultRed700,
+    _800: lightDefaultRed800,
+    _900: lightDefaultRed900,
+  },
+  white: lightDefaultWhite,
+  yellow: {
+    _100: lightDefaultYellow100,
+    _1000: lightDefaultYellow1000,
+    _1100: lightDefaultYellow1100,
+    _1200: lightDefaultYellow1200,
+    _1300: lightDefaultYellow1300,
+    _1400: lightDefaultYellow1400,
+    _1500: lightDefaultYellow1500,
+    _200: lightDefaultYellow200,
+    _300: lightDefaultYellow300,
+    _400: lightDefaultYellow400,
+    _500: lightDefaultYellow500,
+    _600: lightDefaultYellow600,
+    _700: lightDefaultYellow700,
+    _800: lightDefaultYellow800,
+    _900: lightDefaultYellow900,
+  },
+};
+
+export const lightOnBrandColors = {
+  alphaDark: {
+    _900: lightOnBrandAlphaDark900,
+  },
+  alphaLight: {
+    _900: lightOnBrandAlphaLight900,
+  },
+  black: lightOnBrandBlack,
+  blue: {
+    _100: lightOnBrandBlue100,
+    _1000: lightOnBrandBlue1000,
+    _1100: lightOnBrandBlue1100,
+    _1200: lightOnBrandBlue1200,
+    _1300: lightOnBrandBlue1300,
+    _1400: lightOnBrandBlue1400,
+    _1500: lightOnBrandBlue1500,
+    _200: lightOnBrandBlue200,
+    _300: lightOnBrandBlue300,
+    _400: lightOnBrandBlue400,
+    _500: lightOnBrandBlue500,
+    _600: lightOnBrandBlue600,
+    _700: lightOnBrandBlue700,
+    _800: lightOnBrandBlue800,
+    _900: lightOnBrandBlue900,
+  },
+  cloudy: {
+    _100: lightOnBrandCloudy100,
+    _1000: lightOnBrandCloudy1000,
+    _1100: lightOnBrandCloudy1100,
+    _1200: lightOnBrandCloudy1200,
+    _1300: lightOnBrandCloudy1300,
+    _1400: lightOnBrandCloudy1400,
+    _1500: lightOnBrandCloudy1500,
+    _200: lightOnBrandCloudy200,
+    _300: lightOnBrandCloudy300,
+    _400: lightOnBrandCloudy400,
+    _500: lightOnBrandCloudy500,
+    _600: lightOnBrandCloudy600,
+    _700: lightOnBrandCloudy700,
+    _800: lightOnBrandCloudy800,
+    _900: lightOnBrandCloudy900,
+  },
+  green: {
+    _100: lightOnBrandGreen100,
+    _1000: lightOnBrandGreen1000,
+    _1100: lightOnBrandGreen1100,
+    _1200: lightOnBrandGreen1200,
+    _1300: lightOnBrandGreen1300,
+    _1400: lightOnBrandGreen1400,
+    _1500: lightOnBrandGreen1500,
+    _200: lightOnBrandGreen200,
+    _300: lightOnBrandGreen300,
+    _400: lightOnBrandGreen400,
+    _500: lightOnBrandGreen500,
+    _600: lightOnBrandGreen600,
+    _700: lightOnBrandGreen700,
+    _800: lightOnBrandGreen800,
+    _900: lightOnBrandGreen900,
+  },
+  orange: {
+    _100: lightOnBrandOrange100,
+    _1000: lightOnBrandOrange1000,
+    _1100: lightOnBrandOrange1100,
+    _1200: lightOnBrandOrange1200,
+    _1300: lightOnBrandOrange1300,
+    _1400: lightOnBrandOrange1400,
+    _1500: lightOnBrandOrange1500,
+    _200: lightOnBrandOrange200,
+    _300: lightOnBrandOrange300,
+    _400: lightOnBrandOrange400,
+    _500: lightOnBrandOrange500,
+    _600: lightOnBrandOrange600,
+    _700: lightOnBrandOrange700,
+    _800: lightOnBrandOrange800,
+    _900: lightOnBrandOrange900,
+  },
+  purple: {
+    _100: lightOnBrandPurple100,
+    _1000: lightOnBrandPurple1000,
+    _1100: lightOnBrandPurple1100,
+    _1200: lightOnBrandPurple1200,
+    _1300: lightOnBrandPurple1300,
+    _1400: lightOnBrandPurple1400,
+    _1500: lightOnBrandPurple1500,
+    _200: lightOnBrandPurple200,
+    _300: lightOnBrandPurple300,
+    _400: lightOnBrandPurple400,
+    _500: lightOnBrandPurple500,
+    _600: lightOnBrandPurple600,
+    _700: lightOnBrandPurple700,
+    _800: lightOnBrandPurple800,
+    _900: lightOnBrandPurple900,
+  },
+  red: {
+    _100: lightOnBrandRed100,
+    _1000: lightOnBrandRed1000,
+    _1100: lightOnBrandRed1100,
+    _1200: lightOnBrandRed1200,
+    _1300: lightOnBrandRed1300,
+    _1400: lightOnBrandRed1400,
+    _1500: lightOnBrandRed1500,
+    _200: lightOnBrandRed200,
+    _300: lightOnBrandRed300,
+    _400: lightOnBrandRed400,
+    _500: lightOnBrandRed500,
+    _600: lightOnBrandRed600,
+    _700: lightOnBrandRed700,
+    _800: lightOnBrandRed800,
+    _900: lightOnBrandRed900,
+  },
+  white: lightOnBrandWhite,
+  yellow: {
+    _100: lightOnBrandYellow100,
+    _1000: lightOnBrandYellow1000,
+    _1100: lightOnBrandYellow1100,
+    _1200: lightOnBrandYellow1200,
+    _1300: lightOnBrandYellow1300,
+    _1400: lightOnBrandYellow1400,
+    _1500: lightOnBrandYellow1500,
+    _200: lightOnBrandYellow200,
+    _300: lightOnBrandYellow300,
+    _400: lightOnBrandYellow400,
+    _500: lightOnBrandYellow500,
+    _600: lightOnBrandYellow600,
+    _700: lightOnBrandYellow700,
+    _800: lightOnBrandYellow800,
+    _900: lightOnBrandYellow900,
+  },
+};
+
+export const linkColors = {
+  primary: {
+    stateActive: linkPrimaryStateActive,
+    stateDefault: linkPrimaryStateDefault,
+    stateHover: linkPrimaryStateHover,
+  },
+  secondary: {
+    stateActive: linkSecondaryStateActive,
+    stateDefault: linkSecondaryStateDefault,
+    stateHover: linkSecondaryStateHover,
+  },
+  stateVisited: linkStateVisited,
+  tertiary: {
+    stateActive: linkTertiaryStateActive,
+    stateDefault: linkTertiaryStateDefault,
+    stateHover: linkTertiaryStateHover,
+  },
+};
+
+export const neutralColors = {
+  backgroundBasic: neutralBackgroundBasic,
+  backgroundSubtle: neutralBackgroundSubtle,
+  borderBasic: neutralBorderBasic,
+  borderSubtle: neutralBorderSubtle,
+  contentBasic: neutralContentBasic,
+  contentSubtle: neutralContentSubtle,
+  stateActive: neutralStateActive,
+  stateDefault: neutralStateDefault,
+  stateHover: neutralStateHover,
+};
+
+export const selectedColors = {
+  contentBasic: selectedContentBasic,
+  contentSubtle: selectedContentSubtle,
+  stateActive: selectedStateActive,
+  stateDefault: selectedStateDefault,
+  stateHover: selectedStateHover,
+};
+
+export const shadowColors = {
+  shadow100: {
+    color01: shadowShadow100Color01,
+  },
+  shadow200: {
+    color01: shadowShadow200Color01,
+  },
+  shadow300: {
+    color01: shadowShadow300Color01,
+  },
+  shadow400: {
+    color01: shadowShadow400Color01,
+  },
+};
+
+export const textColors = {
+  primary: textPrimary,
+  secondary: textSecondary,
+  tertiary: textTertiary,
+};
+
+export const colors = {
+  background: backgroundColors,
+  border: borderColors,
+  component: componentColors,
+  disabled: disabledColors,
+  emotion: emotionColors,
+  focus: focusColors,
+  formField: formFieldColors,
+  gradient: gradientColors,
+  lightDefault: lightDefaultColors,
+  lightOnBrand: lightOnBrandColors,
+  link: linkColors,
+  neutral: neutralColors,
+  selected: selectedColors,
+  shadow: shadowColors,
+  text: textColors,
+};
diff --git a/packages/design-tokens/src/js/themes/theme-light-on-brand/index.ts b/packages/design-tokens/src/js/themes/theme-light-on-brand/index.ts
new file mode 100644
index 0000000000..1bae1c0e49
--- /dev/null
+++ b/packages/design-tokens/src/js/themes/theme-light-on-brand/index.ts
@@ -0,0 +1 @@
+export * from './colors';
diff --git a/packages/design-tokens/src/scss/themes/_color-tokens.scss b/packages/design-tokens/src/scss/themes/_color-tokens.scss
index bd00cf0fb6..c5f26a6fdb 100644
--- a/packages/design-tokens/src/scss/themes/_color-tokens.scss
+++ b/packages/design-tokens/src/scss/themes/_color-tokens.scss
@@ -2,62 +2,11 @@
 // The theme CSS classes and custom properties are generated in the `web` package from the `themes` directory here.
 
 // Manually created from Figma
-$action-button-plain-active: var(--spirit-color-action-button-plain-active);
-$action-button-plain-border: var(--spirit-color-action-button-plain-border);
-$action-button-plain-content: var(--spirit-color-action-button-plain-content);
-$action-button-plain-default: var(--spirit-color-action-button-plain-default);
-$action-button-plain-hover: var(--spirit-color-action-button-plain-hover);
-
-$action-button-primary-active: var(--spirit-color-action-button-primary-active);
-$action-button-primary-border: var(--spirit-color-action-button-primary-border);
-$action-button-primary-content: var(--spirit-color-action-button-primary-content);
-$action-button-primary-default: var(--spirit-color-action-button-primary-default);
-$action-button-primary-hover: var(--spirit-color-action-button-primary-hover);
-
-$action-button-secondary-active: var(--spirit-color-action-button-secondary-active);
-$action-button-secondary-border: var(--spirit-color-action-button-secondary-border);
-$action-button-secondary-content: var(--spirit-color-action-button-secondary-content);
-$action-button-secondary-default: var(--spirit-color-action-button-secondary-default);
-$action-button-secondary-hover: var(--spirit-color-action-button-secondary-hover);
-
-$action-button-tertiary-active: var(--spirit-color-action-button-tertiary-active);
-$action-button-tertiary-border: var(--spirit-color-action-button-tertiary-border);
-$action-button-tertiary-content: var(--spirit-color-action-button-tertiary-content);
-$action-button-tertiary-default: var(--spirit-color-action-button-tertiary-default);
-$action-button-tertiary-hover: var(--spirit-color-action-button-tertiary-hover);
-
-$action-link-primary-active: var(--spirit-color-action-link-primary-active);
-$action-link-primary-default: var(--spirit-color-action-link-primary-default);
-$action-link-primary-hover: var(--spirit-color-action-link-primary-hover);
-
-$action-link-secondary-active: var(--spirit-color-action-link-secondary-active);
-$action-link-secondary-default: var(--spirit-color-action-link-secondary-default);
-$action-link-secondary-hover: var(--spirit-color-action-link-secondary-hover);
-
-$action-link-tertiary-active: var(--spirit-color-action-link-tertiary-active);
-$action-link-tertiary-default: var(--spirit-color-action-link-tertiary-default);
-$action-link-tertiary-hover: var(--spirit-color-action-link-tertiary-hover);
-
-$action-link-visited-default: var(--spirit-color-action-link-visited-default);
-
-$action-toggle-selected-border: var(--spirit-color-action-toggle-selected-border);
-$action-toggle-selected-content: var(--spirit-color-action-toggle-selected-content);
-$action-toggle-selected-default: var(--spirit-color-action-toggle-selected-default);
-$action-toggle-selected-hover: var(--spirit-color-action-toggle-selected-hover);
-$action-toggle-unselected-border: var(--spirit-color-action-toggle-unselected-border);
-$action-toggle-unselected-content: var(--spirit-color-action-toggle-unselected-content);
-$action-toggle-unselected-default: var(--spirit-color-action-toggle-unselected-default);
-$action-toggle-unselected-hover: var(--spirit-color-action-toggle-unselected-hover);
-
 $background-backdrop: var(--spirit-color-background-backdrop);
 
-$background-brand-primary: var(--spirit-color-background-brand-primary);
-$background-brand-secondary: var(--spirit-color-background-brand-secondary);
-
-$background-interactive-active: var(--spirit-color-background-interactive-active);
-$background-interactive-default: var(--spirit-color-background-interactive-default);
-$background-interactive-hover: var(--spirit-color-background-interactive-hover);
-$background-interactive-selected: var(--spirit-color-background-interactive-selected);
+$background-interactive-state-active: var(--spirit-color-background-interactive-state-active);
+$background-interactive-state-default: var(--spirit-color-background-interactive-state-default);
+$background-interactive-state-hover: var(--spirit-color-background-interactive-state-hover);
 
 $background-primary: var(--spirit-color-background-primary);
 $background-secondary: var(--spirit-color-background-secondary);
@@ -66,199 +15,173 @@ $background-tertiary: var(--spirit-color-background-tertiary);
 $border-basic: var(--spirit-color-border-basic);
 $border-focus: var(--spirit-color-border-focus);
 
-$border-interactive-active: var(--spirit-color-border-interactive-active);
-$border-interactive-danger: var(--spirit-color-border-interactive-danger);
-$border-interactive-default: var(--spirit-color-border-interactive-default);
-$border-interactive-hover: var(--spirit-color-border-interactive-hover);
-$border-interactive-informative: var(--spirit-color-border-interactive-informative);
-$border-interactive-selected: var(--spirit-color-border-interactive-selected);
-$border-interactive-success: var(--spirit-color-border-interactive-success);
-$border-interactive-warning: var(--spirit-color-border-interactive-warning);
-
-$custom-01-active: var(--spirit-color-custom-01-active);
-$custom-01-background-basic: var(--spirit-color-custom-01-background-basic);
-$custom-01-background-subtle: var(--spirit-color-custom-01-background-subtle);
-$custom-01-border-basic: var(--spirit-color-custom-01-border-basic);
-$custom-01-border-subtle: var(--spirit-color-custom-01-border-subtle);
-$custom-01-content-basic: var(--spirit-color-custom-01-content-basic);
-$custom-01-content-subtle: var(--spirit-color-custom-01-content-subtle);
-$custom-01-default: var(--spirit-color-custom-01-default);
-$custom-01-hover: var(--spirit-color-custom-01-hover);
-
-$custom-02-active: var(--spirit-color-custom-02-active);
-$custom-02-background-basic: var(--spirit-color-custom-02-background-basic);
-$custom-02-background-subtle: var(--spirit-color-custom-02-background-subtle);
-$custom-02-border-basic: var(--spirit-color-custom-02-border-basic);
-$custom-02-border-subtle: var(--spirit-color-custom-02-border-subtle);
-$custom-02-content-basic: var(--spirit-color-custom-02-content-basic);
-$custom-02-content-subtle: var(--spirit-color-custom-02-content-subtle);
-$custom-02-default: var(--spirit-color-custom-02-default);
-$custom-02-hover: var(--spirit-color-custom-02-hover);
+$border-interactive-state-active: var(--spirit-color-border-interactive-state-active);
+$border-interactive-state-default: var(--spirit-color-border-interactive-state-default);
+$border-interactive-state-hover: var(--spirit-color-border-interactive-state-hover);
+$border-interactive-state-selected: var(--spirit-color-border-interactive-state-selected);
+
+$component-button-plain-border: var(--spirit-color-component-button-plain-border);
+$component-button-plain-content: var(--spirit-color-component-button-plain-content);
+$component-button-plain-state-active: var(--spirit-color-component-button-plain-state-active);
+$component-button-plain-state-default: var(--spirit-color-component-button-plain-state-default);
+$component-button-plain-state-hover: var(--spirit-color-component-button-plain-state-hover);
+
+$component-button-primary-border: var(--spirit-color-component-button-primary-border);
+$component-button-primary-content: var(--spirit-color-component-button-primary-content);
+$component-button-primary-state-active: var(--spirit-color-component-button-primary-state-active);
+$component-button-primary-state-default: var(--spirit-color-component-button-primary-state-default);
+$component-button-primary-state-hover: var(--spirit-color-component-button-primary-state-hover);
+
+$component-button-secondary-border: var(--spirit-color-component-button-secondary-border);
+$component-button-secondary-content: var(--spirit-color-component-button-secondary-content);
+$component-button-secondary-state-active: var(--spirit-color-component-button-secondary-state-active);
+$component-button-secondary-state-default: var(--spirit-color-component-button-secondary-state-default);
+$component-button-secondary-state-hover: var(--spirit-color-component-button-secondary-state-hover);
+
+$component-button-tertiary-border: var(--spirit-color-component-button-tertiary-border);
+$component-button-tertiary-content: var(--spirit-color-component-button-tertiary-content);
+$component-button-tertiary-state-active: var(--spirit-color-component-button-tertiary-state-active);
+$component-button-tertiary-state-default: var(--spirit-color-component-button-tertiary-state-default);
+$component-button-tertiary-state-hover: var(--spirit-color-component-button-tertiary-state-hover);
+
+$component-header-background: var(--spirit-color-component-header-background);
+$component-header-item-background-state-active: var(--spirit-color-component-header-item-background-state-active);
+$component-header-item-background-state-default: var(--spirit-color-component-header-item-background-state-default);
+$component-header-item-background-state-hover: var(--spirit-color-component-header-item-background-state-hover);
+$component-header-item-background-state-selected: var(--spirit-color-component-header-item-background-state-selected);
+$component-header-item-state-active: var(--spirit-color-component-header-item-state-active);
+$component-header-item-state-default: var(--spirit-color-component-header-item-state-default);
+$component-header-item-state-hover: var(--spirit-color-component-header-item-state-hover);
+$component-header-item-state-selected: var(--spirit-color-component-header-item-state-selected);
+$component-header-stripe-state-selected: var(--spirit-color-component-header-stripe-state-selected);
+$component-header-stripe-state-unselected: var(--spirit-color-component-header-stripe-state-unselected);
+
+$component-toggle-selected-border: var(--spirit-color-component-toggle-selected-border);
+$component-toggle-selected-content: var(--spirit-color-component-toggle-selected-content);
+$component-toggle-selected-state-active: var(--spirit-color-component-toggle-selected-state-active);
+$component-toggle-selected-state-default: var(--spirit-color-component-toggle-selected-state-default);
+$component-toggle-selected-state-hover: var(--spirit-color-component-toggle-selected-state-hover);
+$component-toggle-unselected-border: var(--spirit-color-component-toggle-unselected-border);
+$component-toggle-unselected-content: var(--spirit-color-component-toggle-unselected-content);
+$component-toggle-unselected-state-active: var(--spirit-color-component-toggle-unselected-state-active);
+$component-toggle-unselected-state-default: var(--spirit-color-component-toggle-unselected-state-default);
+$component-toggle-unselected-state-hover: var(--spirit-color-component-toggle-unselected-state-hover);
 
 $disabled-background: var(--spirit-color-disabled-background);
 $disabled-border: var(--spirit-color-disabled-border);
 $disabled-content: var(--spirit-color-disabled-content);
 $disabled-foreground: var(--spirit-color-disabled-foreground);
 
-$emotion-danger-active: var(--spirit-color-emotion-danger-active);
-$emotion-danger-background-subtle: var(--spirit-color-emotion-danger-background-subtle);
 $emotion-danger-background-basic: var(--spirit-color-emotion-danger-background-basic);
-$emotion-danger-border-subtle: var(--spirit-color-emotion-danger-border-subtle);
+$emotion-danger-background-subtle: var(--spirit-color-emotion-danger-background-subtle);
 $emotion-danger-border-basic: var(--spirit-color-emotion-danger-border-basic);
+$emotion-danger-border-subtle: var(--spirit-color-emotion-danger-border-subtle);
 $emotion-danger-content-basic: var(--spirit-color-emotion-danger-content-basic);
 $emotion-danger-content-subtle: var(--spirit-color-emotion-danger-content-subtle);
-$emotion-danger-default: var(--spirit-color-emotion-danger-default);
-$emotion-danger-hover: var(--spirit-color-emotion-danger-hover);
+$emotion-danger-state-active: var(--spirit-color-emotion-danger-state-active);
+$emotion-danger-state-default: var(--spirit-color-emotion-danger-state-default);
+$emotion-danger-state-hover: var(--spirit-color-emotion-danger-state-hover);
 
-$emotion-informative-active: var(--spirit-color-emotion-informative-active);
 $emotion-informative-background-basic: var(--spirit-color-emotion-informative-background-basic);
 $emotion-informative-background-subtle: var(--spirit-color-emotion-informative-background-subtle);
 $emotion-informative-border-basic: var(--spirit-color-emotion-informative-border-basic);
 $emotion-informative-border-subtle: var(--spirit-color-emotion-informative-border-subtle);
 $emotion-informative-content-basic: var(--spirit-color-emotion-informative-content-basic);
 $emotion-informative-content-subtle: var(--spirit-color-emotion-informative-content-subtle);
-$emotion-informative-default: var(--spirit-color-emotion-informative-default);
-$emotion-informative-hover: var(--spirit-color-emotion-informative-hover);
+$emotion-informative-state-active: var(--spirit-color-emotion-informative-state-active);
+$emotion-informative-state-default: var(--spirit-color-emotion-informative-state-default);
+$emotion-informative-state-hover: var(--spirit-color-emotion-informative-state-hover);
 
-$emotion-success-active: var(--spirit-color-emotion-success-active);
 $emotion-success-background-basic: var(--spirit-color-emotion-success-background-basic);
 $emotion-success-background-subtle: var(--spirit-color-emotion-success-background-subtle);
 $emotion-success-border-basic: var(--spirit-color-emotion-success-border-basic);
 $emotion-success-border-subtle: var(--spirit-color-emotion-success-border-subtle);
 $emotion-success-content-basic: var(--spirit-color-emotion-success-content-basic);
 $emotion-success-content-subtle: var(--spirit-color-emotion-success-content-subtle);
-$emotion-success-default: var(--spirit-color-emotion-success-default);
-$emotion-success-hover: var(--spirit-color-emotion-success-hover);
+$emotion-success-state-active: var(--spirit-color-emotion-success-state-active);
+$emotion-success-state-default: var(--spirit-color-emotion-success-state-default);
+$emotion-success-state-hover: var(--spirit-color-emotion-success-state-hover);
 
-$emotion-warning-active: var(--spirit-color-emotion-warning-active);
 $emotion-warning-background-basic: var(--spirit-color-emotion-warning-background-basic);
 $emotion-warning-background-subtle: var(--spirit-color-emotion-warning-background-subtle);
 $emotion-warning-border-basic: var(--spirit-color-emotion-warning-border-basic);
 $emotion-warning-border-subtle: var(--spirit-color-emotion-warning-border-subtle);
 $emotion-warning-content-basic: var(--spirit-color-emotion-warning-content-basic);
 $emotion-warning-content-subtle: var(--spirit-color-emotion-warning-content-subtle);
-$emotion-warning-default: var(--spirit-color-emotion-warning-default);
-$emotion-warning-hover: var(--spirit-color-emotion-warning-hover);
+$emotion-warning-state-active: var(--spirit-color-emotion-warning-state-active);
+$emotion-warning-state-default: var(--spirit-color-emotion-warning-state-default);
+$emotion-warning-state-hover: var(--spirit-color-emotion-warning-state-hover);
 
 $focus-focus-ring-color-01: var(--spirit-color-focus-focus-ring-color-01);
 
-$form-field-active: var(--spirit-color-form-field-active);
-$form-field-border-active: var(--spirit-color-form-field-border-active);
-$form-field-border-default: var(--spirit-color-form-field-border-default);
-$form-field-border-hover: var(--spirit-color-form-field-border-hover);
-$form-field-border-selected: var(--spirit-color-form-field-border-selected);
-$form-field-content: var(--spirit-color-form-field-content);
 $form-field-danger: var(--spirit-color-form-field-danger);
-$form-field-default: var(--spirit-color-form-field-default);
+
+$form-field-filled-background-state-active: var(--spirit-color-form-field-filled-background-state-active);
+$form-field-filled-background-state-default: var(--spirit-color-form-field-filled-background-state-default);
+$form-field-filled-background-state-hover: var(--spirit-color-form-field-filled-background-state-hover);
+$form-field-filled-border-state-active: var(--spirit-color-form-field-filled-border-state-active);
+$form-field-filled-border-state-default: var(--spirit-color-form-field-filled-border-state-default);
+$form-field-filled-border-state-hover: var(--spirit-color-form-field-filled-border-state-hover);
+$form-field-filled-border-state-selected: var(--spirit-color-form-field-filled-border-state-selected);
+$form-field-filled-content: var(--spirit-color-form-field-filled-content);
+$form-field-filled-placeholder: var(--spirit-color-form-field-filled-placeholder);
+
 $form-field-helper-text: var(--spirit-color-form-field-helper-text);
-$form-field-hover: var(--spirit-color-form-field-hover);
 $form-field-label: var(--spirit-color-form-field-label);
-$form-field-placeholder: var(--spirit-color-form-field-placeholder);
 $form-field-success: var(--spirit-color-form-field-success);
 $form-field-warning: var(--spirit-color-form-field-warning);
 
-$gradients-basic-overlay-color-01: var(--spirit-color-gradients-basic-overlay-color-01);
-$gradients-basic-overlay-color-02: var(--spirit-color-gradients-basic-overlay-color-02);
+$gradient-basic-overlay-color-01: var(--spirit-color-gradient-basic-overlay-color-01);
+$gradient-basic-overlay-color-02: var(--spirit-color-gradient-basic-overlay-color-02);
+
+$link-primary-state-active: var(--spirit-color-link-primary-state-active);
+$link-primary-state-default: var(--spirit-color-link-primary-state-default);
+$link-primary-state-hover: var(--spirit-color-link-primary-state-hover);
+
+$link-secondary-state-active: var(--spirit-color-link-secondary-state-active);
+$link-secondary-state-default: var(--spirit-color-link-secondary-state-default);
+$link-secondary-state-hover: var(--spirit-color-link-secondary-state-hover);
+
+$link-state-visited: var(--spirit-color-link-state-visited);
+
+$link-tertiary-state-active: var(--spirit-color-link-tertiary-state-active);
+$link-tertiary-state-default: var(--spirit-color-link-tertiary-state-default);
+$link-tertiary-state-hover: var(--spirit-color-link-tertiary-state-hover);
 
-$neutral-active: var(--spirit-color-neutral-active);
 $neutral-background-basic: var(--spirit-color-neutral-background-basic);
 $neutral-background-subtle: var(--spirit-color-neutral-background-subtle);
 $neutral-border-basic: var(--spirit-color-neutral-border-basic);
 $neutral-border-subtle: var(--spirit-color-neutral-border-subtle);
 $neutral-content-basic: var(--spirit-color-neutral-content-basic);
 $neutral-content-subtle: var(--spirit-color-neutral-content-subtle);
-$neutral-default: var(--spirit-color-neutral-default);
-$neutral-hover: var(--spirit-color-neutral-hover);
+$neutral-state-active: var(--spirit-color-neutral-state-active);
+$neutral-state-default: var(--spirit-color-neutral-state-default);
+$neutral-state-hover: var(--spirit-color-neutral-state-hover);
 
-$selected-active: var(--spirit-color-selected-active);
 $selected-content-basic: var(--spirit-color-selected-content-basic);
 $selected-content-subtle: var(--spirit-color-selected-content-subtle);
-$selected-default: var(--spirit-color-selected-default);
-$selected-hover: var(--spirit-color-selected-hover);
+$selected-state-active: var(--spirit-color-selected-state-active);
+$selected-state-default: var(--spirit-color-selected-state-default);
+$selected-state-hover: var(--spirit-color-selected-state-hover);
+
+$shadow-shadow-100-color-01: var(--spirit-color-shadow-shadow-100-color-01);
+
+$shadow-shadow-200-color-01: var(--spirit-color-shadow-shadow-200-color-01);
 
-$shadows-shadow-100-color-01: var(--spirit-color-shadows-shadow-100-color-01);
-$shadows-shadow-200-color-01: var(--spirit-color-shadows-shadow-200-color-01);
-$shadows-shadow-300-color-01: var(--spirit-color-shadows-shadow-300-color-01);
-$shadows-shadow-400-color-01: var(--spirit-color-shadows-shadow-400-color-01);
+$shadow-shadow-300-color-01: var(--spirit-color-shadow-shadow-300-color-01);
+
+$shadow-shadow-400-color-01: var(--spirit-color-shadow-shadow-400-color-01);
 
 $text-primary: var(--spirit-color-text-primary);
 $text-secondary: var(--spirit-color-text-secondary);
 $text-tertiary: var(--spirit-color-text-tertiary);
 
-$action-colors: (
-    button: (
-        primary: (
-            active: $action-button-primary-active,
-            border: $action-button-primary-border,
-            content: $action-button-primary-content,
-            default: $action-button-primary-default,
-            hover: $action-button-primary-hover,
-        ),
-        secondary: (
-            active: $action-button-secondary-active,
-            border: $action-button-secondary-border,
-            content: $action-button-secondary-content,
-            default: $action-button-secondary-default,
-            hover: $action-button-secondary-hover,
-        ),
-        tertiary: (
-            active: $action-button-tertiary-active,
-            border: $action-button-tertiary-border,
-            content: $action-button-tertiary-content,
-            default: $action-button-tertiary-default,
-            hover: $action-button-tertiary-hover,
-        ),
-        plain: (
-            active: $action-button-plain-active,
-            border: $action-button-plain-border,
-            content: $action-button-plain-content,
-            default: $action-button-plain-default,
-            hover: $action-button-plain-hover,
-        ),
-    ),
-    link: (
-        primary: (
-            active: $action-link-primary-active,
-            default: $action-link-primary-default,
-            hover: $action-link-primary-hover,
-        ),
-        secondary: (
-            active: $action-link-secondary-active,
-            default: $action-link-secondary-default,
-            hover: $action-link-secondary-hover,
-        ),
-        tertiary: (
-            active: $action-link-tertiary-active,
-            default: $action-link-tertiary-default,
-            hover: $action-link-tertiary-hover,
-        ),
-        visited: (
-            default: $action-link-visited-default,
-        ),
-    ),
-    toggle: (
-        selected-border: $action-toggle-selected-border,
-        selected-content: $action-toggle-selected-content,
-        selected-default: $action-toggle-selected-default,
-        selected-hover: $action-toggle-selected-hover,
-        unselected-border: $action-toggle-unselected-border,
-        unselected-content: $action-toggle-unselected-content,
-        unselected-default: $action-toggle-unselected-default,
-        unselected-hover: $action-toggle-unselected-hover,
-    ),
-) !default;
-
 $background-colors: (
     backdrop: $background-backdrop,
-    brand: (
-        primary: $background-brand-primary,
-        secondary: $background-brand-secondary,
-    ),
     interactive: (
-        active: $background-interactive-active,
-        default: $background-interactive-default,
-        hover: $background-interactive-hover,
-        selected: $background-interactive-selected,
+        state-active: $background-interactive-state-active,
+        state-default: $background-interactive-state-default,
+        state-hover: $background-interactive-state-hover,
     ),
     primary: $background-primary,
     secondary: $background-secondary,
@@ -269,39 +192,68 @@ $border-colors: (
     basic: $border-basic,
     focus: $border-focus,
     interactive: (
-        active: $border-interactive-active,
-        danger: $border-interactive-danger,
-        default: $border-interactive-default,
-        hover: $border-interactive-hover,
-        informative: $border-interactive-informative,
-        selected: $border-interactive-selected,
-        success: $border-interactive-success,
-        warning: $border-interactive-warning,
+        state-active: $border-interactive-state-active,
+        state-default: $border-interactive-state-default,
+        state-hover: $border-interactive-state-hover,
+        state-selected: $border-interactive-state-selected,
     ),
 ) !default;
 
-$custom-colors: (
-    01: (
-        active: $custom-01-active,
-        background-basic: $custom-01-background-basic,
-        background-subtle: $custom-01-background-subtle,
-        border-basic: $custom-01-border-basic,
-        border-subtle: $custom-01-border-subtle,
-        content-basic: $custom-01-content-basic,
-        content-subtle: $custom-01-content-subtle,
-        default: $custom-01-default,
-        hover: $custom-01-hover,
+$component-colors: (
+    button: (
+        plain: (
+            border: $component-button-plain-border,
+            content: $component-button-plain-content,
+            state-active: $component-button-plain-state-active,
+            state-default: $component-button-plain-state-default,
+            state-hover: $component-button-plain-state-hover,
+        ),
+        primary: (
+            border: $component-button-primary-border,
+            content: $component-button-primary-content,
+            state-active: $component-button-primary-state-active,
+            state-default: $component-button-primary-state-default,
+            state-hover: $component-button-primary-state-hover,
+        ),
+        secondary: (
+            border: $component-button-secondary-border,
+            content: $component-button-secondary-content,
+            state-active: $component-button-secondary-state-active,
+            state-default: $component-button-secondary-state-default,
+            state-hover: $component-button-secondary-state-hover,
+        ),
+        tertiary: (
+            border: $component-button-tertiary-border,
+            content: $component-button-tertiary-content,
+            state-active: $component-button-tertiary-state-active,
+            state-default: $component-button-tertiary-state-default,
+            state-hover: $component-button-tertiary-state-hover,
+        ),
+    ),
+    header: (
+        background: $component-header-background,
+        item-background-state-active: $component-header-item-background-state-active,
+        item-background-state-default: $component-header-item-background-state-default,
+        item-background-state-hover: $component-header-item-background-state-hover,
+        item-background-state-selected: $component-header-item-background-state-selected,
+        item-state-active: $component-header-item-state-active,
+        item-state-default: $component-header-item-state-default,
+        item-state-hover: $component-header-item-state-hover,
+        item-state-selected: $component-header-item-state-selected,
+        stripe-state-selected: $component-header-stripe-state-selected,
+        stripe-state-unselected: $component-header-stripe-state-unselected,
     ),
-    02: (
-        active: $custom-02-active,
-        background-basic: $custom-02-background-basic,
-        background-subtle: $custom-02-background-subtle,
-        border-basic: $custom-02-border-basic,
-        border-subtle: $custom-02-border-subtle,
-        content-basic: $custom-02-content-basic,
-        content-subtle: $custom-02-content-subtle,
-        default: $custom-02-default,
-        hover: $custom-02-hover,
+    toggle: (
+        selected-border: $component-toggle-selected-border,
+        selected-content: $component-toggle-selected-content,
+        selected-state-active: $component-toggle-selected-state-active,
+        selected-state-default: $component-toggle-selected-state-default,
+        selected-state-hover: $component-toggle-selected-state-hover,
+        unselected-border: $component-toggle-unselected-border,
+        unselected-content: $component-toggle-unselected-content,
+        unselected-state-active: $component-toggle-unselected-state-active,
+        unselected-state-default: $component-toggle-unselected-state-default,
+        unselected-state-hover: $component-toggle-unselected-state-hover,
     ),
 ) !default;
 
@@ -314,48 +266,48 @@ $disabled-colors: (
 
 $emotion-colors: (
     danger: (
-        active: $emotion-danger-active,
         background-basic: $emotion-danger-background-basic,
         background-subtle: $emotion-danger-background-subtle,
         border-basic: $emotion-danger-border-basic,
         border-subtle: $emotion-danger-border-subtle,
         content-basic: $emotion-danger-content-basic,
         content-subtle: $emotion-danger-content-subtle,
-        default: $emotion-danger-default,
-        hover: $emotion-danger-hover,
+        state-active: $emotion-danger-state-active,
+        state-default: $emotion-danger-state-default,
+        state-hover: $emotion-danger-state-hover,
     ),
     informative: (
-        active: $emotion-informative-active,
         background-basic: $emotion-informative-background-basic,
         background-subtle: $emotion-informative-background-subtle,
         border-basic: $emotion-informative-border-basic,
         border-subtle: $emotion-informative-border-subtle,
         content-basic: $emotion-informative-content-basic,
         content-subtle: $emotion-informative-content-subtle,
-        default: $emotion-informative-default,
-        hover: $emotion-informative-hover,
+        state-active: $emotion-informative-state-active,
+        state-default: $emotion-informative-state-default,
+        state-hover: $emotion-informative-state-hover,
     ),
     success: (
-        active: $emotion-success-active,
         background-basic: $emotion-success-background-basic,
         background-subtle: $emotion-success-background-subtle,
         border-basic: $emotion-success-border-basic,
         border-subtle: $emotion-success-border-subtle,
         content-basic: $emotion-success-content-basic,
         content-subtle: $emotion-success-content-subtle,
-        default: $emotion-success-default,
-        hover: $emotion-success-hover,
+        state-active: $emotion-success-state-active,
+        state-default: $emotion-success-state-default,
+        state-hover: $emotion-success-state-hover,
     ),
     warning: (
-        active: $emotion-warning-active,
         background-basic: $emotion-warning-background-basic,
         background-subtle: $emotion-warning-background-subtle,
         border-basic: $emotion-warning-border-basic,
         border-subtle: $emotion-warning-border-subtle,
         content-basic: $emotion-warning-content-basic,
         content-subtle: $emotion-warning-content-subtle,
-        default: $emotion-warning-default,
-        hover: $emotion-warning-hover,
+        state-active: $emotion-warning-state-active,
+        state-default: $emotion-warning-state-default,
+        state-hover: $emotion-warning-state-hover,
     ),
 ) !default;
 
@@ -366,61 +318,82 @@ $focus-colors: (
 ) !default;
 
 $form-field-colors: (
-    active: $form-field-active,
-    border-active: $form-field-border-active,
-    border-default: $form-field-border-default,
-    border-hover: $form-field-border-hover,
-    border-selected: $form-field-border-selected,
-    content: $form-field-content,
     danger: $form-field-danger,
-    default: $form-field-default,
+    filled: (
+        background-state-active: $form-field-filled-background-state-active,
+        background-state-default: $form-field-filled-background-state-default,
+        background-state-hover: $form-field-filled-background-state-hover,
+        border-state-active: $form-field-filled-border-state-active,
+        border-state-default: $form-field-filled-border-state-default,
+        border-state-hover: $form-field-filled-border-state-hover,
+        border-state-selected: $form-field-filled-border-state-selected,
+        content: $form-field-filled-content,
+        placeholder: $form-field-filled-placeholder,
+    ),
     helper-text: $form-field-helper-text,
-    hover: $form-field-hover,
     label: $form-field-label,
-    placeholder: $form-field-placeholder,
     success: $form-field-success,
     warning: $form-field-warning,
 ) !default;
 
 $gradient-colors: (
     basic-overlay: (
-        color-01: $gradients-basic-overlay-color-01,
-        color-02: $gradients-basic-overlay-color-02,
+        color-01: $gradient-basic-overlay-color-01,
+        color-02: $gradient-basic-overlay-color-02,
+    ),
+) !default;
+
+$link-colors: (
+    primary: (
+        state-active: $link-primary-state-active,
+        state-default: $link-primary-state-default,
+        state-hover: $link-primary-state-hover,
+    ),
+    secondary: (
+        state-active: $link-secondary-state-active,
+        state-default: $link-secondary-state-default,
+        state-hover: $link-secondary-state-hover,
+    ),
+    state-visited: $link-state-visited,
+    tertiary: (
+        state-active: $link-tertiary-state-active,
+        state-default: $link-tertiary-state-default,
+        state-hover: $link-tertiary-state-hover,
     ),
 ) !default;
 
 $neutral-colors: (
-    active: $neutral-active,
     background-basic: $neutral-background-basic,
     background-subtle: $neutral-background-subtle,
     border-basic: $neutral-border-basic,
     border-subtle: $neutral-border-subtle,
     content-basic: $neutral-content-basic,
     content-subtle: $neutral-content-subtle,
-    default: $neutral-default,
-    hover: $neutral-hover,
+    state-active: $neutral-state-active,
+    state-default: $neutral-state-default,
+    state-hover: $neutral-state-hover,
 ) !default;
 
 $selected-colors: (
-    active: $selected-active,
     content-basic: $selected-content-basic,
     content-subtle: $selected-content-subtle,
-    default: $selected-default,
-    hover: $selected-hover,
+    state-active: $selected-state-active,
+    state-default: $selected-state-default,
+    state-hover: $selected-state-hover,
 ) !default;
 
 $shadow-colors: (
     shadow-100: (
-        color-01: $shadows-shadow-100-color-01,
+        color-01: $shadow-shadow-100-color-01,
     ),
     shadow-200: (
-        color-01: $shadows-shadow-200-color-01,
+        color-01: $shadow-shadow-200-color-01,
     ),
     shadow-300: (
-        color-01: $shadows-shadow-300-color-01,
+        color-01: $shadow-shadow-300-color-01,
     ),
     shadow-400: (
-        color-01: $shadows-shadow-400-color-01,
+        color-01: $shadow-shadow-400-color-01,
     ),
 ) !default;
 
@@ -431,15 +404,15 @@ $text-colors: (
 ) !default;
 
 $colors: (
-    action: $action-colors,
     background: $background-colors,
     border: $border-colors,
-    custom: $custom-colors,
+    component: $component-colors,
     disabled: $disabled-colors,
     emotion: $emotion-colors,
     focus: $focus-colors,
     form-field: $form-field-colors,
     gradient: $gradient-colors,
+    link: $link-colors,
     neutral: $neutral-colors,
     selected: $selected-colors,
     shadow: $shadow-colors,
diff --git a/packages/design-tokens/src/scss/themes/theme-light-default/_colors.scss b/packages/design-tokens/src/scss/themes/theme-light-default/_colors.scss
index a9edb8d354..c890a4ccba 100644
--- a/packages/design-tokens/src/scss/themes/theme-light-default/_colors.scss
+++ b/packages/design-tokens/src/scss/themes/theme-light-default/_colors.scss
@@ -1,261 +1,184 @@
-// Manually created from Figma
-$action-button-plain-active: #e7e7e7 !default;
-$action-button-plain-border: #fff !default;
-$action-button-plain-content: #132930 !default;
-$action-button-plain-default: #fff !default;
-$action-button-plain-hover: #f1f1f1 !default;
-
-$action-button-primary-active: #0b3a46 !default;
-$action-button-primary-border: #0b3a46 !default;
-$action-button-primary-content: #fff !default;
-$action-button-primary-default: #29616f !default;
-$action-button-primary-hover: #1b5260 !default;
-
-$action-button-secondary-active: #e5e5e5 !default;
-$action-button-secondary-border: #ddd !default;
-$action-button-secondary-content: #132930 !default;
-$action-button-secondary-default: #fff !default;
-$action-button-secondary-hover: #efefef !default;
-
-$action-button-tertiary-active: #dbdbdb !default;
-$action-button-tertiary-border: #ececec !default;
-$action-button-tertiary-content: #132930 !default;
-$action-button-tertiary-default: #f1f1f1 !default;
-$action-button-tertiary-hover: #e7e7e7 !default;
-
-$action-link-primary-active: #0b3a46 !default;
-$action-link-primary-default: #29616f !default;
-$action-link-primary-hover: #1b5260 !default;
-
-$action-link-secondary-active: #454b4e !default;
-$action-link-secondary-default: #758185 !default;
-$action-link-secondary-hover: #5b6568 !default;
-
-$action-link-tertiary-active: #969696 !default;
-$action-link-tertiary-default: #bdbdbd !default;
-$action-link-tertiary-hover: #ababab !default;
-
-$action-link-visited-default: #835ea1 !default;
-
-$action-toggle-selected-border: #ffa53b !default;
-$action-toggle-selected-content: #fff !default;
-$action-toggle-selected-default: #ffb951 !default;
-$action-toggle-selected-hover: #ffca7b !default;
-$action-toggle-unselected-border: #898989 !default;
-$action-toggle-unselected-content: #fff !default;
-$action-toggle-unselected-default: #1c1c1c !default;
-$action-toggle-unselected-hover: #4b4b4b !default;
-
-$background-backdrop: #0b1c2199 !default;
-
-$background-brand-primary: #0b1c21 !default;
-$background-brand-secondary: #30588c !default;
-
-$background-interactive-active: #f1f1f1 !default;
-$background-interactive-default: #fff0 !default;
-$background-interactive-hover: #f5f5f5 !default;
-$background-interactive-selected: #29616f !default;
+/* This file was generated by Supernova, don't change manually */
+$background-backdrop: #1a1b1b80 !default;
+
+$background-interactive-state-active: #f1edff !default;
+$background-interactive-state-default: #fff0 !default;
+$background-interactive-state-hover: #f8f6ff !default;
 
 $background-primary: #fff !default;
-$background-secondary: #f0f0f0 !default;
-$background-tertiary: #000 !default;
-
-$border-basic: #e9e9e9 !default;
-$border-focus: #4666ae !default;
-
-$border-interactive-active: #b1b1b1 !default;
-$border-interactive-danger: #ba3e5a !default;
-$border-interactive-default: #d8d8d8 !default;
-$border-interactive-hover: #c5c5c5 !default;
-$border-interactive-informative: #3b6bab !default;
-$border-interactive-selected: #5314da !default;
-$border-interactive-success: #009824 !default;
-$border-interactive-warning: #a98300 !default;
-
-$custom-01-active: #cca22f !default;
-$custom-01-background-basic: #fff !default;
-$custom-01-background-subtle: #fff !default;
-$custom-01-border-basic: #c610b3 !default;
-$custom-01-border-subtle: #c610b3 !default;
-$custom-01-content-basic: #d311c0 !default;
-$custom-01-content-subtle: #fff !default;
-$custom-01-default: #ffcb3b !default;
-$custom-01-hover: #e6b735 !default;
-
-$custom-02-active: #fff !default;
-$custom-02-background-basic: #fff !default;
-$custom-02-background-subtle: #fff !default;
-$custom-02-border-basic: #fff !default;
-$custom-02-border-subtle: #fff !default;
-$custom-02-content-basic: #000 !default;
-$custom-02-content-subtle: #fff !default;
-$custom-02-default: #fff !default;
-$custom-02-hover: #fff !default;
-
-$disabled-background: #f5f5f5 !default;
-$disabled-border: #e3e3e3 !default;
-$disabled-content: #a6a6a6 !default;
-$disabled-foreground: #a6a6a6 !default;
-
-$emotion-danger-active: #6f2535 !default;
-$emotion-danger-background-subtle: #fbeef1 !default;
-$emotion-danger-background-basic: #ba3e5a !default;
-$emotion-danger-border-subtle: #fff !default;
-$emotion-danger-border-basic: #ba3e5a !default;
-$emotion-danger-content-basic: #ba3e5a !default;
+$background-secondary: #f2f2f2 !default;
+$background-tertiary: #f1edff !default;
+
+$border-basic: #d9d9d9 !default;
+$border-focus: #7847ff !default;
+
+$border-interactive-state-active: #a5a5a5 !default;
+$border-interactive-state-default: #bfbfbf !default;
+$border-interactive-state-hover: #b2b2b2 !default;
+$border-interactive-state-selected: #7847ff !default;
+
+$component-button-plain-border: #fff0 !default;
+$component-button-plain-content: #6039cc !default;
+$component-button-plain-state-active: #e4daff !default;
+$component-button-plain-state-default: #fff0 !default;
+$component-button-plain-state-hover: #f1edff !default;
+
+$component-button-primary-border: #4e2ea6 !default;
+$component-button-primary-content: #fff !default;
+$component-button-primary-state-active: #6039cc !default;
+$component-button-primary-state-default: #7847ff !default;
+$component-button-primary-state-hover: #6c40e5 !default;
+
+$component-button-secondary-border: #7847ff !default;
+$component-button-secondary-content: #6039cc !default;
+$component-button-secondary-state-active: #e4daff !default;
+$component-button-secondary-state-default: #fff !default;
+$component-button-secondary-state-hover: #f1edff !default;
+
+$component-button-tertiary-border: #e5e5e5 !default;
+$component-button-tertiary-content: #202020 !default;
+$component-button-tertiary-state-active: #d9d9d9 !default;
+$component-button-tertiary-state-default: #f2f2f2 !default;
+$component-button-tertiary-state-hover: #e5e5e5 !default;
+
+$component-header-background: #fff !default;
+$component-header-item-background-state-active: #f1edff !default;
+$component-header-item-background-state-default: #fff0 !default;
+$component-header-item-background-state-hover: #f8f6ff !default;
+$component-header-item-background-state-selected: #fff0 !default;
+$component-header-item-state-active: #4e2ea6 !default;
+$component-header-item-state-default: #404040 !default;
+$component-header-item-state-hover: #6039cc !default;
+$component-header-item-state-selected: #6039cc !default;
+$component-header-stripe-state-selected: #ffbe00 !default;
+$component-header-stripe-state-unselected: #e4daff !default;
+
+$component-toggle-selected-border: #327c3f !default;
+$component-toggle-selected-content: #fff !default;
+$component-toggle-selected-state-active: #3e9b4f !default;
+$component-toggle-selected-state-default: #327c3f !default;
+$component-toggle-selected-state-hover: #388b47 !default;
+$component-toggle-unselected-border: #a5a5a5 !default;
+$component-toggle-unselected-content: #404040 !default;
+$component-toggle-unselected-state-active: #f2f2f2 !default;
+$component-toggle-unselected-state-default: #fff !default;
+$component-toggle-unselected-state-hover: #f9f9f9 !default;
+
+$disabled-background: #f9f9f9 !default;
+$disabled-border: #e5e5e5 !default;
+$disabled-content: #a5a5a5 !default;
+$disabled-foreground: #d9d9d9 !default;
+
+$emotion-danger-background-basic: #b60000 !default;
+$emotion-danger-background-subtle: #fef2f2 !default;
+$emotion-danger-border-basic: #b60000 !default;
+$emotion-danger-border-subtle: #f18080 !default;
+$emotion-danger-content-basic: #940000 !default;
 $emotion-danger-content-subtle: #fff !default;
-$emotion-danger-default: #ba3e5a !default;
-$emotion-danger-hover: #953248 !default;
-
-$emotion-informative-active: #26456e !default;
-$emotion-informative-background-basic: #3b6bab !default;
-$emotion-informative-background-subtle: #e8eff7 !default;
-$emotion-informative-border-basic: #3b6bab !default;
-$emotion-informative-border-subtle: #fff !default;
-$emotion-informative-content-basic: #3b6bab !default;
+$emotion-danger-state-active: #e40000 !default;
+$emotion-danger-state-default: #b60000 !default;
+$emotion-danger-state-hover: #cd0000 !default;
+
+$emotion-informative-background-basic: #0052ad !default;
+$emotion-informative-background-subtle: #f2f7fd !default;
+$emotion-informative-border-basic: #0052ad !default;
+$emotion-informative-border-subtle: #80b2eb !default;
+$emotion-informative-content-basic: #00428c !default;
 $emotion-informative-content-subtle: #fff !default;
-$emotion-informative-default: #3b6bab !default;
-$emotion-informative-hover: #30588c !default;
-
-$emotion-success-active: #33420a !default;
-$emotion-success-background-basic: #607c13 !default;
-$emotion-success-background-subtle: #f6fbe9 !default;
-$emotion-success-border-basic: #607c13 !default;
-$emotion-success-border-subtle: #fff !default;
-$emotion-success-content-basic: #607c13 !default;
+$emotion-informative-state-active: #0066d8 !default;
+$emotion-informative-state-default: #0052ad !default;
+$emotion-informative-state-hover: #005cc2 !default;
+
+$emotion-success-background-basic: #327c3f !default;
+$emotion-success-background-subtle: #f5faf6 !default;
+$emotion-success-border-basic: #327c3f !default;
+$emotion-success-border-subtle: #9ecda7 !default;
+$emotion-success-content-basic: #286533 !default;
 $emotion-success-content-subtle: #fff !default;
-$emotion-success-default: #607c13 !default;
-$emotion-success-hover: #485d0e !default;
-
-$emotion-warning-active: #423400 !default;
-$emotion-warning-background-basic: #a98300 !default;
-$emotion-warning-background-subtle: #f8f2e4 !default;
-$emotion-warning-border-basic: #a98300 !default;
-$emotion-warning-border-subtle: #fff !default;
-$emotion-warning-content-basic: #a98300 !default;
+$emotion-success-state-active: #3e9b4f !default;
+$emotion-success-state-default: #327c3f !default;
+$emotion-success-state-hover: #388b47 !default;
+
+$emotion-warning-background-basic: #c26400 !default;
+$emotion-warning-background-subtle: #fef8f2 !default;
+$emotion-warning-border-basic: #c26400 !default;
+$emotion-warning-border-subtle: #f9be80 !default;
+$emotion-warning-content-basic: #9d5100 !default;
 $emotion-warning-content-subtle: #fff !default;
-$emotion-warning-default: #a98300 !default;
-$emotion-warning-hover: #755b00 !default;
+$emotion-warning-state-active: #f27d00 !default;
+$emotion-warning-state-default: #c26400 !default;
+$emotion-warning-state-hover: #da7100 !default;
 
 $focus-focus-ring-color-01: #d2c2ffb2 !default;
 
-$form-field-active: #fff !default;
-$form-field-border-active: #b1b1b1 !default;
-$form-field-border-default: #d8d8d8 !default;
-$form-field-border-hover: #c5c5c5 !default;
-$form-field-border-selected: #5314da !default;
-$form-field-content: #132930 !default;
-$form-field-danger: #ba3e5a !default;
-$form-field-default: #fff !default;
-$form-field-helper-text: #666 !default;
-$form-field-hover: #fafafa !default;
-$form-field-label: #132930 !default;
-$form-field-placeholder: #666 !default;
-$form-field-success: #009824 !default;
-$form-field-warning: #a98300 !default;
-
-$gradients-basic-overlay-color-01: #fff !default;
-$gradients-basic-overlay-color-02: #fff0 !default;
-
-$neutral-active: #344448 !default;
-$neutral-background-basic: #132930 !default;
-$neutral-background-subtle: #f7f7f7 !default;
-$neutral-border-basic: #d8d8d8 !default;
-$neutral-border-subtle: #fff !default;
-$neutral-content-basic: #132930 !default;
-$neutral-content-subtle: #f2f2f2 !default;
-$neutral-default: #0e2025 !default;
-$neutral-hover: #223439 !default;
-
-$selected-active: #7e4fe3 !default;
-$selected-content-basic: #5314da !default;
+$form-field-danger: #b60000 !default;
+
+$form-field-filled-background-state-active: #fff !default;
+$form-field-filled-background-state-default: #fff !default;
+$form-field-filled-background-state-hover: #f9f9f9 !default;
+$form-field-filled-border-state-active: #7f7f7f !default;
+$form-field-filled-border-state-default: #a5a5a5 !default;
+$form-field-filled-border-state-hover: #999 !default;
+$form-field-filled-border-state-selected: #7847ff !default;
+$form-field-filled-content: #202020 !default;
+$form-field-filled-placeholder: #666 !default;
+
+$form-field-helper-text: #7f7f7f !default;
+$form-field-label: #202020 !default;
+$form-field-success: #327c3f !default;
+$form-field-warning: #c26400 !default;
+
+$gradient-basic-overlay-color-01: #fff !default;
+$gradient-basic-overlay-color-02: #fff0 !default;
+
+$link-primary-state-active: #3c2480 !default;
+$link-primary-state-default: #6039cc !default;
+$link-primary-state-hover: #4e2ea6 !default;
+
+$link-secondary-state-active: #3c2480 !default;
+$link-secondary-state-default: #535353 !default;
+$link-secondary-state-hover: #4e2ea6 !default;
+
+$link-state-visited: #3c2480 !default;
+
+$link-tertiary-state-active: #3c2480 !default;
+$link-tertiary-state-default: #7f7f7f !default;
+$link-tertiary-state-hover: #4e2ea6 !default;
+
+$neutral-background-basic: #202020 !default;
+$neutral-background-subtle: #f2f2f2 !default;
+$neutral-border-basic: #202020 !default;
+$neutral-border-subtle: #bfbfbf !default;
+$neutral-content-basic: #202020 !default;
+$neutral-content-subtle: #fff !default;
+$neutral-state-active: #535353 !default;
+$neutral-state-default: #202020 !default;
+$neutral-state-hover: #404040 !default;
+
+$selected-content-basic: #4e2ea6 !default;
 $selected-content-subtle: #fff !default;
-$selected-default: #5314da !default;
-$selected-hover: #7543e1 !default;
+$selected-state-active: #6039cc !default;
+$selected-state-default: #7847ff !default;
+$selected-state-hover: #6c40e5 !default;
 
-$shadows-shadow-100-color-01: #00000026 !default;
-$shadows-shadow-200-color-01: #0003 !default;
-$shadows-shadow-300-color-01: #00000040 !default;
-$shadows-shadow-400-color-01: #00000040 !default;
+$shadow-shadow-100-color-01: #00000026 !default;
 
-$text-primary: #132930 !default;
-$text-secondary: #5c747b !default;
-$text-tertiary: #e4e4e4 !default;
+$shadow-shadow-200-color-01: #0003 !default;
 
-$action-colors: (
-    button: (
-        primary: (
-            active: $action-button-primary-active,
-            border: $action-button-primary-border,
-            content: $action-button-primary-content,
-            default: $action-button-primary-default,
-            hover: $action-button-primary-hover,
-        ),
-        secondary: (
-            active: $action-button-secondary-active,
-            border: $action-button-secondary-border,
-            content: $action-button-secondary-content,
-            default: $action-button-secondary-default,
-            hover: $action-button-secondary-hover,
-        ),
-        tertiary: (
-            active: $action-button-tertiary-active,
-            border: $action-button-tertiary-border,
-            content: $action-button-tertiary-content,
-            default: $action-button-tertiary-default,
-            hover: $action-button-tertiary-hover,
-        ),
-        plain: (
-            active: $action-button-plain-active,
-            border: $action-button-plain-border,
-            content: $action-button-plain-content,
-            default: $action-button-plain-default,
-            hover: $action-button-plain-hover,
-        ),
-    ),
-    link: (
-        primary: (
-            active: $action-link-primary-active,
-            default: $action-link-primary-default,
-            hover: $action-link-primary-hover,
-        ),
-        secondary: (
-            active: $action-link-secondary-active,
-            default: $action-link-secondary-default,
-            hover: $action-link-secondary-hover,
-        ),
-        tertiary: (
-            active: $action-link-tertiary-active,
-            default: $action-link-tertiary-default,
-            hover: $action-link-tertiary-hover,
-        ),
-        visited: (
-            default: $action-link-visited-default,
-        ),
-    ),
-    toggle: (
-        selected-border: $action-toggle-selected-border,
-        selected-content: $action-toggle-selected-content,
-        selected-default: $action-toggle-selected-default,
-        selected-hover: $action-toggle-selected-hover,
-        unselected-border: $action-toggle-unselected-border,
-        unselected-content: $action-toggle-unselected-content,
-        unselected-default: $action-toggle-unselected-default,
-        unselected-hover: $action-toggle-unselected-hover,
-    ),
-) !default;
+$shadow-shadow-300-color-01: #00000040 !default;
+
+$shadow-shadow-400-color-01: #00000040 !default;
+
+$text-primary: #202020 !default;
+$text-secondary: #535353 !default;
+$text-tertiary: #7f7f7f !default;
 
 $background-colors: (
     backdrop: $background-backdrop,
-    brand: (
-        primary: $background-brand-primary,
-        secondary: $background-brand-secondary,
-    ),
     interactive: (
-        active: $background-interactive-active,
-        default: $background-interactive-default,
-        hover: $background-interactive-hover,
-        selected: $background-interactive-selected,
+        state-active: $background-interactive-state-active,
+        state-default: $background-interactive-state-default,
+        state-hover: $background-interactive-state-hover,
     ),
     primary: $background-primary,
     secondary: $background-secondary,
@@ -266,39 +189,68 @@ $border-colors: (
     basic: $border-basic,
     focus: $border-focus,
     interactive: (
-        active: $border-interactive-active,
-        danger: $border-interactive-danger,
-        default: $border-interactive-default,
-        hover: $border-interactive-hover,
-        informative: $border-interactive-informative,
-        selected: $border-interactive-selected,
-        success: $border-interactive-success,
-        warning: $border-interactive-warning,
+        state-active: $border-interactive-state-active,
+        state-default: $border-interactive-state-default,
+        state-hover: $border-interactive-state-hover,
+        state-selected: $border-interactive-state-selected,
     ),
 ) !default;
 
-$custom-colors: (
-    01: (
-        active: $custom-01-active,
-        background-basic: $custom-01-background-basic,
-        background-subtle: $custom-01-background-subtle,
-        border-basic: $custom-01-border-basic,
-        border-subtle: $custom-01-border-subtle,
-        content-basic: $custom-01-content-basic,
-        content-subtle: $custom-01-content-subtle,
-        default: $custom-01-default,
-        hover: $custom-01-hover,
+$component-colors: (
+    button: (
+        plain: (
+            border: $component-button-plain-border,
+            content: $component-button-plain-content,
+            state-active: $component-button-plain-state-active,
+            state-default: $component-button-plain-state-default,
+            state-hover: $component-button-plain-state-hover,
+        ),
+        primary: (
+            border: $component-button-primary-border,
+            content: $component-button-primary-content,
+            state-active: $component-button-primary-state-active,
+            state-default: $component-button-primary-state-default,
+            state-hover: $component-button-primary-state-hover,
+        ),
+        secondary: (
+            border: $component-button-secondary-border,
+            content: $component-button-secondary-content,
+            state-active: $component-button-secondary-state-active,
+            state-default: $component-button-secondary-state-default,
+            state-hover: $component-button-secondary-state-hover,
+        ),
+        tertiary: (
+            border: $component-button-tertiary-border,
+            content: $component-button-tertiary-content,
+            state-active: $component-button-tertiary-state-active,
+            state-default: $component-button-tertiary-state-default,
+            state-hover: $component-button-tertiary-state-hover,
+        ),
     ),
-    02: (
-        active: $custom-02-active,
-        background-basic: $custom-02-background-basic,
-        background-subtle: $custom-02-background-subtle,
-        border-basic: $custom-02-border-basic,
-        border-subtle: $custom-02-border-subtle,
-        content-basic: $custom-02-content-basic,
-        content-subtle: $custom-02-content-subtle,
-        default: $custom-02-default,
-        hover: $custom-02-hover,
+    header: (
+        background: $component-header-background,
+        item-background-state-active: $component-header-item-background-state-active,
+        item-background-state-default: $component-header-item-background-state-default,
+        item-background-state-hover: $component-header-item-background-state-hover,
+        item-background-state-selected: $component-header-item-background-state-selected,
+        item-state-active: $component-header-item-state-active,
+        item-state-default: $component-header-item-state-default,
+        item-state-hover: $component-header-item-state-hover,
+        item-state-selected: $component-header-item-state-selected,
+        stripe-state-selected: $component-header-stripe-state-selected,
+        stripe-state-unselected: $component-header-stripe-state-unselected,
+    ),
+    toggle: (
+        selected-border: $component-toggle-selected-border,
+        selected-content: $component-toggle-selected-content,
+        selected-state-active: $component-toggle-selected-state-active,
+        selected-state-default: $component-toggle-selected-state-default,
+        selected-state-hover: $component-toggle-selected-state-hover,
+        unselected-border: $component-toggle-unselected-border,
+        unselected-content: $component-toggle-unselected-content,
+        unselected-state-active: $component-toggle-unselected-state-active,
+        unselected-state-default: $component-toggle-unselected-state-default,
+        unselected-state-hover: $component-toggle-unselected-state-hover,
     ),
 ) !default;
 
@@ -311,48 +263,48 @@ $disabled-colors: (
 
 $emotion-colors: (
     danger: (
-        active: $emotion-danger-active,
         background-basic: $emotion-danger-background-basic,
         background-subtle: $emotion-danger-background-subtle,
         border-basic: $emotion-danger-border-basic,
         border-subtle: $emotion-danger-border-subtle,
         content-basic: $emotion-danger-content-basic,
         content-subtle: $emotion-danger-content-subtle,
-        default: $emotion-danger-default,
-        hover: $emotion-danger-hover,
+        state-active: $emotion-danger-state-active,
+        state-default: $emotion-danger-state-default,
+        state-hover: $emotion-danger-state-hover,
     ),
     informative: (
-        active: $emotion-informative-active,
         background-basic: $emotion-informative-background-basic,
         background-subtle: $emotion-informative-background-subtle,
         border-basic: $emotion-informative-border-basic,
         border-subtle: $emotion-informative-border-subtle,
         content-basic: $emotion-informative-content-basic,
         content-subtle: $emotion-informative-content-subtle,
-        default: $emotion-informative-default,
-        hover: $emotion-informative-hover,
+        state-active: $emotion-informative-state-active,
+        state-default: $emotion-informative-state-default,
+        state-hover: $emotion-informative-state-hover,
     ),
     success: (
-        active: $emotion-success-active,
         background-basic: $emotion-success-background-basic,
         background-subtle: $emotion-success-background-subtle,
         border-basic: $emotion-success-border-basic,
         border-subtle: $emotion-success-border-subtle,
         content-basic: $emotion-success-content-basic,
         content-subtle: $emotion-success-content-subtle,
-        default: $emotion-success-default,
-        hover: $emotion-success-hover,
+        state-active: $emotion-success-state-active,
+        state-default: $emotion-success-state-default,
+        state-hover: $emotion-success-state-hover,
     ),
     warning: (
-        active: $emotion-warning-active,
         background-basic: $emotion-warning-background-basic,
         background-subtle: $emotion-warning-background-subtle,
         border-basic: $emotion-warning-border-basic,
         border-subtle: $emotion-warning-border-subtle,
         content-basic: $emotion-warning-content-basic,
         content-subtle: $emotion-warning-content-subtle,
-        default: $emotion-warning-default,
-        hover: $emotion-warning-hover,
+        state-active: $emotion-warning-state-active,
+        state-default: $emotion-warning-state-default,
+        state-hover: $emotion-warning-state-hover,
     ),
 ) !default;
 
@@ -363,61 +315,82 @@ $focus-colors: (
 ) !default;
 
 $form-field-colors: (
-    active: $form-field-active,
-    border-active: $form-field-border-active,
-    border-default: $form-field-border-default,
-    border-hover: $form-field-border-hover,
-    border-selected: $form-field-border-selected,
-    content: $form-field-content,
     danger: $form-field-danger,
-    default: $form-field-default,
+    filled: (
+        background-state-active: $form-field-filled-background-state-active,
+        background-state-default: $form-field-filled-background-state-default,
+        background-state-hover: $form-field-filled-background-state-hover,
+        border-state-active: $form-field-filled-border-state-active,
+        border-state-default: $form-field-filled-border-state-default,
+        border-state-hover: $form-field-filled-border-state-hover,
+        border-state-selected: $form-field-filled-border-state-selected,
+        content: $form-field-filled-content,
+        placeholder: $form-field-filled-placeholder,
+    ),
     helper-text: $form-field-helper-text,
-    hover: $form-field-hover,
     label: $form-field-label,
-    placeholder: $form-field-placeholder,
     success: $form-field-success,
     warning: $form-field-warning,
 ) !default;
 
 $gradient-colors: (
     basic-overlay: (
-        color-01: $gradients-basic-overlay-color-01,
-        color-02: $gradients-basic-overlay-color-02,
+        color-01: $gradient-basic-overlay-color-01,
+        color-02: $gradient-basic-overlay-color-02,
+    ),
+) !default;
+
+$link-colors: (
+    primary: (
+        state-active: $link-primary-state-active,
+        state-default: $link-primary-state-default,
+        state-hover: $link-primary-state-hover,
+    ),
+    secondary: (
+        state-active: $link-secondary-state-active,
+        state-default: $link-secondary-state-default,
+        state-hover: $link-secondary-state-hover,
+    ),
+    state-visited: $link-state-visited,
+    tertiary: (
+        state-active: $link-tertiary-state-active,
+        state-default: $link-tertiary-state-default,
+        state-hover: $link-tertiary-state-hover,
     ),
 ) !default;
 
 $neutral-colors: (
-    active: $neutral-active,
     background-basic: $neutral-background-basic,
     background-subtle: $neutral-background-subtle,
     border-basic: $neutral-border-basic,
     border-subtle: $neutral-border-subtle,
     content-basic: $neutral-content-basic,
     content-subtle: $neutral-content-subtle,
-    default: $neutral-default,
-    hover: $neutral-hover,
+    state-active: $neutral-state-active,
+    state-default: $neutral-state-default,
+    state-hover: $neutral-state-hover,
 ) !default;
 
 $selected-colors: (
-    active: $selected-active,
     content-basic: $selected-content-basic,
     content-subtle: $selected-content-subtle,
-    default: $selected-default,
-    hover: $selected-hover,
+    state-active: $selected-state-active,
+    state-default: $selected-state-default,
+    state-hover: $selected-state-hover,
 ) !default;
 
 $shadow-colors: (
     shadow-100: (
-        color-01: $shadows-shadow-100-color-01,
+        color-01: $shadow-shadow-100-color-01,
     ),
     shadow-200: (
-        color-01: $shadows-shadow-200-color-01,
+        color-01: $shadow-shadow-200-color-01,
     ),
     shadow-300: (
-        color-01: $shadows-shadow-300-color-01,
+        color-01: $shadow-shadow-300-color-01,
     ),
     shadow-400: (
-        color-01: $shadows-shadow-400-color-01,
+        color-01: $shadow-shadow-400-color-01,
     ),
 ) !default;
 
@@ -428,15 +401,15 @@ $text-colors: (
 ) !default;
 
 $colors: (
-    action: $action-colors,
     background: $background-colors,
     border: $border-colors,
-    custom: $custom-colors,
+    component: $component-colors,
     disabled: $disabled-colors,
     emotion: $emotion-colors,
     focus: $focus-colors,
     form-field: $form-field-colors,
     gradient: $gradient-colors,
+    link: $link-colors,
     neutral: $neutral-colors,
     selected: $selected-colors,
     shadow: $shadow-colors,
diff --git a/packages/design-tokens/src/scss/themes/theme-light-on-brand/_colors.scss b/packages/design-tokens/src/scss/themes/theme-light-on-brand/_colors.scss
index 55e8437e39..78fa98df14 100644
--- a/packages/design-tokens/src/scss/themes/theme-light-on-brand/_colors.scss
+++ b/packages/design-tokens/src/scss/themes/theme-light-on-brand/_colors.scss
@@ -1,261 +1,184 @@
-// Manually created from Figma
-$action-button-plain-active: #fff !default;
-$action-button-plain-border: #fff !default;
-$action-button-plain-content: #fff !default;
-$action-button-plain-default: #fff !default;
-$action-button-plain-hover: #fff !default;
-
-$action-button-primary-active: #0b3a46 !default;
-$action-button-primary-border: #0b3a4680 !default;
-$action-button-primary-content: #fff !default;
-$action-button-primary-default: #29616f !default;
-$action-button-primary-hover: #1b5260 !default;
-
-$action-button-secondary-active: #fedb7a !default;
-$action-button-secondary-border: #edbb2f !default;
-$action-button-secondary-content: #132930 !default;
-$action-button-secondary-default: #fff !default;
-$action-button-secondary-hover: #ffe9ac !default;
-
-$action-button-tertiary-active: #fee59e !default;
-$action-button-tertiary-border: #fff6 !default;
-$action-button-tertiary-content: #132930 !default;
-$action-button-tertiary-default: #ffd358 !default;
-$action-button-tertiary-hover: #ffde83 !default;
-
-$action-link-primary-active: #565656 !default;
-$action-link-primary-default: #1d1d1d !default;
-$action-link-primary-hover: #3c3c3c !default;
-
-$action-link-secondary-active: #454b4e !default;
-$action-link-secondary-default: #758185 !default;
-$action-link-secondary-hover: #5b6568 !default;
-
-$action-link-tertiary-active: #969696 !default;
-$action-link-tertiary-default: #bdbdbd !default;
-$action-link-tertiary-hover: #ababab !default;
-
-$action-link-visited-default: #835ea1 !default;
-
-$action-toggle-selected-border: #ffa53b !default;
-$action-toggle-selected-content: #fff !default;
-$action-toggle-selected-default: #f90 !default;
-$action-toggle-selected-hover: #ffc165 !default;
-$action-toggle-unselected-border: #898989 !default;
-$action-toggle-unselected-content: #fff !default;
-$action-toggle-unselected-default: #1c1c1c !default;
-$action-toggle-unselected-hover: #4b4b4b !default;
-
-$background-backdrop: #0b1c2199 !default;
-
-$background-brand-primary: #fff !default;
-$background-brand-secondary: #fff !default;
-
-$background-interactive-active: #ffe9ac !default;
-$background-interactive-default: #fff0 !default;
-$background-interactive-hover: #ffda73 !default;
-$background-interactive-selected: #fff !default;
-
-$background-primary: #ffcb3b !default;
-$background-secondary: #07181e !default;
-$background-tertiary: #fff !default;
-
-$border-basic: #ffffff80 !default;
-$border-focus: #fff !default;
-
-$border-interactive-active: #fff !default;
-$border-interactive-danger: #942300 !default;
-$border-interactive-default: #1d1d1d !default;
-$border-interactive-hover: #fff !default;
-$border-interactive-informative: #fff !default;
-$border-interactive-selected: #1d1d1d !default;
-$border-interactive-success: #597900 !default;
-$border-interactive-warning: #ee3900 !default;
-
-$custom-01-active: #ffecb8 !default;
-$custom-01-background-basic: #fff !default;
-$custom-01-background-subtle: #fff !default;
-$custom-01-border-basic: #fff !default;
-$custom-01-border-subtle: #fff !default;
-$custom-01-content-basic: #000 !default;
-$custom-01-content-subtle: #fff !default;
-$custom-01-default: #fff !default;
-$custom-01-hover: #fff4d6 !default;
-
-$custom-02-active: #fff !default;
-$custom-02-background-basic: #fff !default;
-$custom-02-background-subtle: #fff !default;
-$custom-02-border-basic: #fff !default;
-$custom-02-border-subtle: #fff !default;
-$custom-02-content-basic: #fff !default;
-$custom-02-content-subtle: #fff !default;
-$custom-02-default: #fff !default;
-$custom-02-hover: #fff !default;
-
-$disabled-background: #fff3 !default;
-$disabled-border: #1329304d !default;
-$disabled-content: #13293066 !default;
-$disabled-foreground: #d3a832 !default;
-
-$emotion-danger-active: #6f2535 !default;
-$emotion-danger-background-subtle: #fbeef1 !default;
-$emotion-danger-background-basic: #942300 !default;
-$emotion-danger-border-subtle: #fff !default;
-$emotion-danger-border-basic: #ba3e5a !default;
-$emotion-danger-content-basic: #ba3e5a !default;
+/* This file was generated by Supernova, don't change manually */
+$background-backdrop: #1a1b1b80 !default;
+
+$background-interactive-state-active: #ffffff1a !default;
+$background-interactive-state-default: #fff0 !default;
+$background-interactive-state-hover: #ffffff0d !default;
+
+$background-primary: #6039cc !default;
+$background-secondary: #3c2480 !default;
+$background-tertiary: #1e1240 !default;
+
+$border-basic: #a07eff !default;
+$border-focus: #1e1240 !default;
+
+$border-interactive-state-active: #bba3ff !default;
+$border-interactive-state-default: #a07eff !default;
+$border-interactive-state-hover: #ae91ff !default;
+$border-interactive-state-selected: #ffbe00 !default;
+
+$component-button-plain-border: #fff0 !default;
+$component-button-plain-content: #fff !default;
+$component-button-plain-state-active: #ffffff26 !default;
+$component-button-plain-state-default: #fff0 !default;
+$component-button-plain-state-hover: #ffffff1a !default;
+
+$component-button-primary-border: #1e1240 !default;
+$component-button-primary-content: #3c2480 !default;
+$component-button-primary-state-active: #e4daff !default;
+$component-button-primary-state-default: #fff !default;
+$component-button-primary-state-hover: #f1edff !default;
+
+$component-button-secondary-border: #f8f6ff !default;
+$component-button-secondary-content: #fff !default;
+$component-button-secondary-state-active: #1a1b1b26 !default;
+$component-button-secondary-state-default: #1a1b1b00 !default;
+$component-button-secondary-state-hover: #1a1b1b1a !default;
+
+$component-button-tertiary-border: #1a1b1b00 !default;
+$component-button-tertiary-content: #fff !default;
+$component-button-tertiary-state-active: #1a1b1b4d !default;
+$component-button-tertiary-state-default: #1a1b1b33 !default;
+$component-button-tertiary-state-hover: #1a1b1b40 !default;
+
+$component-header-background: #6039cc !default;
+$component-header-item-background-state-active: #1a1b1b26 !default;
+$component-header-item-background-state-default: #fff0 !default;
+$component-header-item-background-state-hover: #1a1b1b1a !default;
+$component-header-item-background-state-selected: #fff0 !default;
+$component-header-item-state-active: #e5e5e5 !default;
+$component-header-item-state-default: #fff !default;
+$component-header-item-state-hover: #f2f2f2 !default;
+$component-header-item-state-selected: #ffbe00 !default;
+$component-header-stripe-state-selected: #fff !default;
+$component-header-stripe-state-unselected: #ffffff40 !default;
+
+$component-toggle-selected-border: #a07eff !default;
+$component-toggle-selected-content: #fff !default;
+$component-toggle-selected-state-active: #3e9b4f !default;
+$component-toggle-selected-state-default: #327c3f !default;
+$component-toggle-selected-state-hover: #388b47 !default;
+$component-toggle-unselected-border: #a07eff !default;
+$component-toggle-unselected-content: #4e2ea6 !default;
+$component-toggle-unselected-state-active: #e4daff !default;
+$component-toggle-unselected-state-default: #fff !default;
+$component-toggle-unselected-state-hover: #f1edff !default;
+
+$disabled-background: #ffffff1a !default;
+$disabled-border: #fff3 !default;
+$disabled-content: #ffffff80 !default;
+$disabled-foreground: #fff3 !default;
+
+$emotion-danger-background-basic: #e40000 !default;
+$emotion-danger-background-subtle: #fce5e5 !default;
+$emotion-danger-border-basic: #e93333 !default;
+$emotion-danger-border-subtle: #ef6666 !default;
+$emotion-danger-content-basic: #720000 !default;
 $emotion-danger-content-subtle: #fff !default;
-$emotion-danger-default: #ba3e5a !default;
-$emotion-danger-hover: #953248 !default;
-
-$emotion-informative-active: #26456e !default;
-$emotion-informative-background-basic: #3b6bab !default;
-$emotion-informative-background-subtle: #e8eff7 !default;
-$emotion-informative-border-basic: #3b6bab !default;
-$emotion-informative-border-subtle: #fff !default;
-$emotion-informative-content-basic: #3b6bab !default;
+$emotion-danger-state-active: #ec4d4d !default;
+$emotion-danger-state-default: #e40000 !default;
+$emotion-danger-state-hover: #e93333 !default;
+
+$emotion-informative-background-basic: #0066d8 !default;
+$emotion-informative-background-subtle: #e5f0fb !default;
+$emotion-informative-border-basic: #3385e0 !default;
+$emotion-informative-border-subtle: #66a3e8 !default;
+$emotion-informative-content-basic: #00336c !default;
 $emotion-informative-content-subtle: #fff !default;
-$emotion-informative-default: #3b6bab !default;
-$emotion-informative-hover: #30588c !default;
-
-$emotion-success-active: #33420a !default;
-$emotion-success-background-basic: #607c13 !default;
-$emotion-success-background-subtle: #f6fbe9 !default;
-$emotion-success-border-basic: #607c13 !default;
-$emotion-success-border-subtle: #fff !default;
-$emotion-success-content-basic: #607c13 !default;
+$emotion-informative-state-active: #4d94e4 !default;
+$emotion-informative-state-default: #0066d8 !default;
+$emotion-informative-state-hover: #3385e0 !default;
+
+$emotion-success-background-basic: #3e9b4f !default;
+$emotion-success-background-subtle: #ecf5ed !default;
+$emotion-success-border-basic: #65af72 !default;
+$emotion-success-border-subtle: #8bc395 !default;
+$emotion-success-content-basic: #1f4e28 !default;
 $emotion-success-content-subtle: #fff !default;
-$emotion-success-default: #607c13 !default;
-$emotion-success-hover: #485d0e !default;
-
-$emotion-warning-active: #423400 !default;
-$emotion-warning-background-basic: #a98300 !default;
-$emotion-warning-background-subtle: #f8f2e4 !default;
-$emotion-warning-border-basic: #765b00 !default;
-$emotion-warning-border-subtle: #fff !default;
-$emotion-warning-content-basic: #765b00 !default;
+$emotion-success-state-active: #78b984 !default;
+$emotion-success-state-default: #3e9b4f !default;
+$emotion-success-state-hover: #65af72 !default;
+
+$emotion-warning-background-basic: #f27d00 !default;
+$emotion-warning-background-subtle: #fef2e5 !default;
+$emotion-warning-border-basic: #f59733 !default;
+$emotion-warning-border-subtle: #f7b166 !default;
+$emotion-warning-content-basic: #793f00 !default;
 $emotion-warning-content-subtle: #fff !default;
-$emotion-warning-default: #a98300 !default;
-$emotion-warning-hover: #755b00 !default;
+$emotion-warning-state-active: #f6a44d !default;
+$emotion-warning-state-default: #f27d00 !default;
+$emotion-warning-state-hover: #f59733 !default;
 
 $focus-focus-ring-color-01: #d2c2ffb2 !default;
 
-$form-field-active: #fff !default;
-$form-field-border-active: #b1b1b1 !default;
-$form-field-border-default: #d8d8d8 !default;
-$form-field-border-hover: #c5c5c5 !default;
-$form-field-border-selected: #5314da !default;
-$form-field-content: #132930 !default;
-$form-field-danger: #ba3e5a !default;
-$form-field-default: #fff !default;
-$form-field-helper-text: #666 !default;
-$form-field-hover: #00000005 !default;
-$form-field-label: #132930 !default;
-$form-field-placeholder: #666 !default;
-$form-field-success: #009824 !default;
-$form-field-warning: #a98300 !default;
-
-$gradients-basic-overlay-color-01: #606060 !default;
-$gradients-basic-overlay-color-02: #60606000 !default;
-
-$neutral-active: #344448 !default;
-$neutral-background-basic: #132930 !default;
-$neutral-background-subtle: #132930 !default;
-$neutral-border-basic: #d8d8d8 !default;
-$neutral-border-subtle: #fff !default;
-$neutral-content-basic: #132930 !default;
-$neutral-content-subtle: #f2f2f2 !default;
-$neutral-default: #0e2025 !default;
-$neutral-hover: #223439 !default;
-
-$selected-active: #fff !default;
-$selected-content-basic: #1d1d1d !default;
-$selected-content-subtle: #fff !default;
-$selected-default: #1d1d1d !default;
-$selected-hover: #fff !default;
-
-$shadows-shadow-100-color-01: #00000026 !default;
-$shadows-shadow-200-color-01: #0003 !default;
-$shadows-shadow-300-color-01: #00000040 !default;
-$shadows-shadow-400-color-01: #00000040 !default;
-
-$text-primary: #132930 !default;
-$text-secondary: #4a5254 !default;
-$text-tertiary: #d6d6d6 !default;
-
-$action-colors: (
-    button: (
-        primary: (
-            active: $action-button-primary-active,
-            border: $action-button-primary-border,
-            content: $action-button-primary-content,
-            default: $action-button-primary-default,
-            hover: $action-button-primary-hover,
-        ),
-        secondary: (
-            active: $action-button-secondary-active,
-            border: $action-button-secondary-border,
-            content: $action-button-secondary-content,
-            default: $action-button-secondary-default,
-            hover: $action-button-secondary-hover,
-        ),
-        tertiary: (
-            active: $action-button-tertiary-active,
-            border: $action-button-tertiary-border,
-            content: $action-button-tertiary-content,
-            default: $action-button-tertiary-default,
-            hover: $action-button-tertiary-hover,
-        ),
-        plain: (
-            active: $action-button-plain-active,
-            border: $action-button-plain-border,
-            content: $action-button-plain-content,
-            default: $action-button-plain-default,
-            hover: $action-button-plain-hover,
-        ),
-    ),
-    link: (
-        primary: (
-            active: $action-link-primary-active,
-            default: $action-link-primary-default,
-            hover: $action-link-primary-hover,
-        ),
-        secondary: (
-            active: $action-link-secondary-active,
-            default: $action-link-secondary-default,
-            hover: $action-link-secondary-hover,
-        ),
-        tertiary: (
-            active: $action-link-tertiary-active,
-            default: $action-link-tertiary-default,
-            hover: $action-link-tertiary-hover,
-        ),
-        visited: (
-            default: $action-link-visited-default,
-        ),
-    ),
-    toggle: (
-        selected-border: $action-toggle-selected-border,
-        selected-content: $action-toggle-selected-content,
-        selected-default: $action-toggle-selected-default,
-        selected-hover: $action-toggle-selected-hover,
-        unselected-border: $action-toggle-unselected-border,
-        unselected-content: $action-toggle-unselected-content,
-        unselected-default: $action-toggle-unselected-default,
-        unselected-hover: $action-toggle-unselected-hover,
-    ),
-) !default;
+$form-field-danger: #ec4d4d !default;
+
+$form-field-filled-background-state-active: #fff !default;
+$form-field-filled-background-state-default: #f9f9f9 !default;
+$form-field-filled-background-state-hover: #f1edff !default;
+$form-field-filled-border-state-active: #936cff !default;
+$form-field-filled-border-state-default: #ae91ff !default;
+$form-field-filled-border-state-hover: #a07eff !default;
+$form-field-filled-border-state-selected: #ffbe00 !default;
+$form-field-filled-content: #202020 !default;
+$form-field-filled-placeholder: #666 !default;
+
+$form-field-helper-text: #c9b5ff !default;
+$form-field-label: #fff !default;
+$form-field-success: #78b984 !default;
+$form-field-warning: #f6a44d !default;
+
+$gradient-basic-overlay-color-01: #606060 !default;
+$gradient-basic-overlay-color-02: #60606000 !default;
+
+$link-primary-state-active: #e5e5e5 !default;
+$link-primary-state-default: #fff !default;
+$link-primary-state-hover: #f2f2f2 !default;
+
+$link-secondary-state-active: #e5e5e5 !default;
+$link-secondary-state-default: #d6c8ff !default;
+$link-secondary-state-hover: #f2f2f2 !default;
+
+$link-state-visited: #ffbe00 !default;
+
+$link-tertiary-state-active: #e5e5e5 !default;
+$link-tertiary-state-default: #bba3ff !default;
+$link-tertiary-state-hover: #f2f2f2 !default;
+
+$neutral-background-basic: #202020 !default;
+$neutral-background-subtle: #f2f2f2 !default;
+$neutral-border-basic: #202020 !default;
+$neutral-border-subtle: #bfbfbf !default;
+$neutral-content-basic: #202020 !default;
+$neutral-content-subtle: #fff !default;
+$neutral-state-active: #535353 !default;
+$neutral-state-default: #202020 !default;
+$neutral-state-hover: #404040 !default;
+
+$selected-content-basic: #fff !default;
+$selected-content-subtle: #3c2480 !default;
+$selected-state-active: #ffd24d !default;
+$selected-state-default: #ffbe00 !default;
+$selected-state-hover: #ffcb33 !default;
+
+$shadow-shadow-100-color-01: #00000026 !default;
+
+$shadow-shadow-200-color-01: #0003 !default;
+
+$shadow-shadow-300-color-01: #00000040 !default;
+
+$shadow-shadow-400-color-01: #00000040 !default;
+
+$text-primary: #f9f9f9 !default;
+$text-secondary: #d9d9d9 !default;
+$text-tertiary: #b2b2b2 !default;
 
 $background-colors: (
     backdrop: $background-backdrop,
-    brand: (
-        primary: $background-brand-primary,
-        secondary: $background-brand-secondary,
-    ),
     interactive: (
-        active: $background-interactive-active,
-        default: $background-interactive-default,
-        hover: $background-interactive-hover,
-        selected: $background-interactive-selected,
+        state-active: $background-interactive-state-active,
+        state-default: $background-interactive-state-default,
+        state-hover: $background-interactive-state-hover,
     ),
     primary: $background-primary,
     secondary: $background-secondary,
@@ -266,39 +189,68 @@ $border-colors: (
     basic: $border-basic,
     focus: $border-focus,
     interactive: (
-        active: $border-interactive-active,
-        danger: $border-interactive-danger,
-        default: $border-interactive-default,
-        hover: $border-interactive-hover,
-        informative: $border-interactive-informative,
-        selected: $border-interactive-selected,
-        success: $border-interactive-success,
-        warning: $border-interactive-warning,
+        state-active: $border-interactive-state-active,
+        state-default: $border-interactive-state-default,
+        state-hover: $border-interactive-state-hover,
+        state-selected: $border-interactive-state-selected,
     ),
 ) !default;
 
-$custom-colors: (
-    01: (
-        active: $custom-01-active,
-        background-basic: $custom-01-background-basic,
-        background-subtle: $custom-01-background-subtle,
-        border-basic: $custom-01-border-basic,
-        border-subtle: $custom-01-border-subtle,
-        content-basic: $custom-01-content-basic,
-        content-subtle: $custom-01-content-subtle,
-        default: $custom-01-default,
-        hover: $custom-01-hover,
+$component-colors: (
+    button: (
+        plain: (
+            border: $component-button-plain-border,
+            content: $component-button-plain-content,
+            state-active: $component-button-plain-state-active,
+            state-default: $component-button-plain-state-default,
+            state-hover: $component-button-plain-state-hover,
+        ),
+        primary: (
+            border: $component-button-primary-border,
+            content: $component-button-primary-content,
+            state-active: $component-button-primary-state-active,
+            state-default: $component-button-primary-state-default,
+            state-hover: $component-button-primary-state-hover,
+        ),
+        secondary: (
+            border: $component-button-secondary-border,
+            content: $component-button-secondary-content,
+            state-active: $component-button-secondary-state-active,
+            state-default: $component-button-secondary-state-default,
+            state-hover: $component-button-secondary-state-hover,
+        ),
+        tertiary: (
+            border: $component-button-tertiary-border,
+            content: $component-button-tertiary-content,
+            state-active: $component-button-tertiary-state-active,
+            state-default: $component-button-tertiary-state-default,
+            state-hover: $component-button-tertiary-state-hover,
+        ),
+    ),
+    header: (
+        background: $component-header-background,
+        item-background-state-active: $component-header-item-background-state-active,
+        item-background-state-default: $component-header-item-background-state-default,
+        item-background-state-hover: $component-header-item-background-state-hover,
+        item-background-state-selected: $component-header-item-background-state-selected,
+        item-state-active: $component-header-item-state-active,
+        item-state-default: $component-header-item-state-default,
+        item-state-hover: $component-header-item-state-hover,
+        item-state-selected: $component-header-item-state-selected,
+        stripe-state-selected: $component-header-stripe-state-selected,
+        stripe-state-unselected: $component-header-stripe-state-unselected,
     ),
-    02: (
-        active: $custom-02-active,
-        background-basic: $custom-02-background-basic,
-        background-subtle: $custom-02-background-subtle,
-        border-basic: $custom-02-border-basic,
-        border-subtle: $custom-02-border-subtle,
-        content-basic: $custom-02-content-basic,
-        content-subtle: $custom-02-content-subtle,
-        default: $custom-02-default,
-        hover: $custom-02-hover,
+    toggle: (
+        selected-border: $component-toggle-selected-border,
+        selected-content: $component-toggle-selected-content,
+        selected-state-active: $component-toggle-selected-state-active,
+        selected-state-default: $component-toggle-selected-state-default,
+        selected-state-hover: $component-toggle-selected-state-hover,
+        unselected-border: $component-toggle-unselected-border,
+        unselected-content: $component-toggle-unselected-content,
+        unselected-state-active: $component-toggle-unselected-state-active,
+        unselected-state-default: $component-toggle-unselected-state-default,
+        unselected-state-hover: $component-toggle-unselected-state-hover,
     ),
 ) !default;
 
@@ -311,48 +263,48 @@ $disabled-colors: (
 
 $emotion-colors: (
     danger: (
-        active: $emotion-danger-active,
         background-basic: $emotion-danger-background-basic,
         background-subtle: $emotion-danger-background-subtle,
         border-basic: $emotion-danger-border-basic,
         border-subtle: $emotion-danger-border-subtle,
         content-basic: $emotion-danger-content-basic,
         content-subtle: $emotion-danger-content-subtle,
-        default: $emotion-danger-default,
-        hover: $emotion-danger-hover,
+        state-active: $emotion-danger-state-active,
+        state-default: $emotion-danger-state-default,
+        state-hover: $emotion-danger-state-hover,
     ),
     informative: (
-        active: $emotion-informative-active,
         background-basic: $emotion-informative-background-basic,
         background-subtle: $emotion-informative-background-subtle,
         border-basic: $emotion-informative-border-basic,
         border-subtle: $emotion-informative-border-subtle,
         content-basic: $emotion-informative-content-basic,
         content-subtle: $emotion-informative-content-subtle,
-        default: $emotion-informative-default,
-        hover: $emotion-informative-hover,
+        state-active: $emotion-informative-state-active,
+        state-default: $emotion-informative-state-default,
+        state-hover: $emotion-informative-state-hover,
     ),
     success: (
-        active: $emotion-success-active,
         background-basic: $emotion-success-background-basic,
         background-subtle: $emotion-success-background-subtle,
         border-basic: $emotion-success-border-basic,
         border-subtle: $emotion-success-border-subtle,
         content-basic: $emotion-success-content-basic,
         content-subtle: $emotion-success-content-subtle,
-        default: $emotion-success-default,
-        hover: $emotion-success-hover,
+        state-active: $emotion-success-state-active,
+        state-default: $emotion-success-state-default,
+        state-hover: $emotion-success-state-hover,
     ),
     warning: (
-        active: $emotion-warning-active,
         background-basic: $emotion-warning-background-basic,
         background-subtle: $emotion-warning-background-subtle,
         border-basic: $emotion-warning-border-basic,
         border-subtle: $emotion-warning-border-subtle,
         content-basic: $emotion-warning-content-basic,
         content-subtle: $emotion-warning-content-subtle,
-        default: $emotion-warning-default,
-        hover: $emotion-warning-hover,
+        state-active: $emotion-warning-state-active,
+        state-default: $emotion-warning-state-default,
+        state-hover: $emotion-warning-state-hover,
     ),
 ) !default;
 
@@ -363,61 +315,82 @@ $focus-colors: (
 ) !default;
 
 $form-field-colors: (
-    active: $form-field-active,
-    border-active: $form-field-border-active,
-    border-default: $form-field-border-default,
-    border-hover: $form-field-border-hover,
-    border-selected: $form-field-border-selected,
-    content: $form-field-content,
     danger: $form-field-danger,
-    default: $form-field-default,
+    filled: (
+        background-state-active: $form-field-filled-background-state-active,
+        background-state-default: $form-field-filled-background-state-default,
+        background-state-hover: $form-field-filled-background-state-hover,
+        border-state-active: $form-field-filled-border-state-active,
+        border-state-default: $form-field-filled-border-state-default,
+        border-state-hover: $form-field-filled-border-state-hover,
+        border-state-selected: $form-field-filled-border-state-selected,
+        content: $form-field-filled-content,
+        placeholder: $form-field-filled-placeholder,
+    ),
     helper-text: $form-field-helper-text,
-    hover: $form-field-hover,
     label: $form-field-label,
-    placeholder: $form-field-placeholder,
     success: $form-field-success,
     warning: $form-field-warning,
 ) !default;
 
 $gradient-colors: (
     basic-overlay: (
-        color-01: $gradients-basic-overlay-color-01,
-        color-02: $gradients-basic-overlay-color-02,
+        color-01: $gradient-basic-overlay-color-01,
+        color-02: $gradient-basic-overlay-color-02,
+    ),
+) !default;
+
+$link-colors: (
+    primary: (
+        state-active: $link-primary-state-active,
+        state-default: $link-primary-state-default,
+        state-hover: $link-primary-state-hover,
+    ),
+    secondary: (
+        state-active: $link-secondary-state-active,
+        state-default: $link-secondary-state-default,
+        state-hover: $link-secondary-state-hover,
+    ),
+    state-visited: $link-state-visited,
+    tertiary: (
+        state-active: $link-tertiary-state-active,
+        state-default: $link-tertiary-state-default,
+        state-hover: $link-tertiary-state-hover,
     ),
 ) !default;
 
 $neutral-colors: (
-    active: $neutral-active,
     background-basic: $neutral-background-basic,
     background-subtle: $neutral-background-subtle,
     border-basic: $neutral-border-basic,
     border-subtle: $neutral-border-subtle,
     content-basic: $neutral-content-basic,
     content-subtle: $neutral-content-subtle,
-    default: $neutral-default,
-    hover: $neutral-hover,
+    state-active: $neutral-state-active,
+    state-default: $neutral-state-default,
+    state-hover: $neutral-state-hover,
 ) !default;
 
 $selected-colors: (
-    active: $selected-active,
     content-basic: $selected-content-basic,
     content-subtle: $selected-content-subtle,
-    default: $selected-default,
-    hover: $selected-hover,
+    state-active: $selected-state-active,
+    state-default: $selected-state-default,
+    state-hover: $selected-state-hover,
 ) !default;
 
 $shadow-colors: (
     shadow-100: (
-        color-01: $shadows-shadow-100-color-01,
+        color-01: $shadow-shadow-100-color-01,
     ),
     shadow-200: (
-        color-01: $shadows-shadow-200-color-01,
+        color-01: $shadow-shadow-200-color-01,
     ),
     shadow-300: (
-        color-01: $shadows-shadow-300-color-01,
+        color-01: $shadow-shadow-300-color-01,
     ),
     shadow-400: (
-        color-01: $shadows-shadow-400-color-01,
+        color-01: $shadow-shadow-400-color-01,
     ),
 ) !default;
 
@@ -428,15 +401,15 @@ $text-colors: (
 ) !default;
 
 $colors: (
-    action: $action-colors,
     background: $background-colors,
     border: $border-colors,
-    custom: $custom-colors,
+    component: $component-colors,
     disabled: $disabled-colors,
     emotion: $emotion-colors,
     focus: $focus-colors,
     form-field: $form-field-colors,
     gradient: $gradient-colors,
+    link: $link-colors,
     neutral: $neutral-colors,
     selected: $selected-colors,
     shadow: $shadow-colors,
diff --git a/packages/web-react/src/types/shared/tokens.ts b/packages/web-react/src/types/shared/tokens.ts
index 25a776b4c0..b48edd8365 100644
--- a/packages/web-react/src/types/shared/tokens.ts
+++ b/packages/web-react/src/types/shared/tokens.ts
@@ -1,6 +1,6 @@
-import { breakpoints, space } from '@lmc-eu/spirit-design-tokens';
+import { breakpoints, spaces } from '@lmc-eu/spirit-design-tokens';
 
 export const BREAKPOINT_MOBILE = 'mobile';
 
 export type BreakpointToken = keyof typeof breakpoints | string;
-export type SpaceToken = `${'space-'}${Extract<keyof typeof space, string>}` | `${'space-'}${number}`;
+export type SpaceToken = `${'space-'}${Extract<keyof typeof spaces, string>}` | `${'space-'}${number}`;
diff --git a/packages/web/src/scss/components/Accordion/_Accordion.scss b/packages/web/src/scss/components/Accordion/_Accordion.scss
index cdb682bd5a..85a0e7fe64 100644
--- a/packages/web/src/scss/components/Accordion/_Accordion.scss
+++ b/packages/web/src/scss/components/Accordion/_Accordion.scss
@@ -68,7 +68,7 @@
         inset: 0;
         z-index: -1; // 7.
         border-radius: theme.$accordion-border-radius;
-        background-color: theme.$accordion-item-background-color-default; // 3.a
+        background-color: theme.$accordion-item-background-color-state-default; // 3.a
     }
 
     &[aria-expanded='true'] {
@@ -85,7 +85,7 @@
     // 3.b
     // stylelint-disable-next-line selector-max-specificity -- High specificity to target the background pseudo element (2).
     .Accordion__itemHeader:hover .Accordion__itemToggle:first-of-type::before {
-        background-color: theme.$accordion-item-background-color-hover;
+        background-color: theme.$accordion-item-background-color-state-hover;
     }
 }
 
@@ -93,7 +93,7 @@
     // 3.c
     // stylelint-disable-next-line selector-max-specificity -- High specificity to override the hover state selector 3.b.
     .Accordion__itemHeader .Accordion__itemToggle:active:first-of-type::before {
-        background-color: theme.$accordion-item-background-color-active;
+        background-color: theme.$accordion-item-background-color-state-active;
     }
 }
 
diff --git a/packages/web/src/scss/components/Accordion/_theme.scss b/packages/web/src/scss/components/Accordion/_theme.scss
index 783f439eed..6b796ba1bb 100644
--- a/packages/web/src/scss/components/Accordion/_theme.scss
+++ b/packages/web/src/scss/components/Accordion/_theme.scss
@@ -1,8 +1,8 @@
 @use '@tokens' as tokens;
 
-$accordion-item-background-color-default: tokens.$background-interactive-default;
-$accordion-item-background-color-hover: tokens.$background-interactive-hover;
-$accordion-item-background-color-active: tokens.$background-interactive-active;
+$accordion-item-background-color-state-default: tokens.$background-interactive-state-default;
+$accordion-item-background-color-state-hover: tokens.$background-interactive-state-hover;
+$accordion-item-background-color-state-active: tokens.$background-interactive-state-active;
 $accordion-header-typography: tokens.$body-medium-regular;
 $accordion-header-typography-active: tokens.$body-medium-bold;
 $accordion-header-typography-color: tokens.$text-primary;
diff --git a/packages/web/src/scss/components/Button/_Button.scss b/packages/web/src/scss/components/Button/_Button.scss
index a9edb52d1d..8bcc6ce82f 100644
--- a/packages/web/src/scss/components/Button/_Button.scss
+++ b/packages/web/src/scss/components/Button/_Button.scss
@@ -34,11 +34,11 @@
     }
 
     &:hover {
-        background-color: var(--#{tokens.$token-prefix}button-background-color-hover);
+        background-color: var(--#{tokens.$token-prefix}button-background-color-state-hover);
     }
 
     &:active {
-        background-color: var(--#{tokens.$token-prefix}button-background-color-active);
+        background-color: var(--#{tokens.$token-prefix}button-background-color-state-active);
     }
 
     &:disabled,
@@ -51,7 +51,7 @@
 
 @include dictionaries.generate-colors(
     $class-name: 'Button',
-    $dictionary-values: theme.$color-action-button-dictionary,
+    $dictionary-values: theme.$color-component-button-dictionary,
     $config: theme.$color-action-button-dictionary-config
 );
 @include dictionaries.generate-colors(
diff --git a/packages/web/src/scss/components/Button/_theme.scss b/packages/web/src/scss/components/Button/_theme.scss
index 0e9a2cfdba..c70b68892e 100644
--- a/packages/web/src/scss/components/Button/_theme.scss
+++ b/packages/web/src/scss/components/Button/_theme.scss
@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '@tokens' as tokens;
 @use '../../settings/dictionaries';
 
@@ -12,8 +13,8 @@ $disabled-color: tokens.$disabled-content;
 $disabled-border-color: tokens.$disabled-border;
 $disabled-background-color: tokens.$disabled-background;
 
-$color-action-button-dictionary: (
-    action-button: dictionaries.$action-button-colors,
+$color-component-button-dictionary: (
+    component-button: map.keys(map.get(tokens.$component-colors, button)),
 );
 
 $color-emotion-dictionary: (
@@ -23,17 +24,17 @@ $color-emotion-dictionary: (
 $color-action-button-dictionary-config: (
     color: 'content',
     border-color: 'border',
-    background-color: 'default',
-    background-color-hover: 'hover',
-    background-color-active: 'active',
+    background-color: 'state-default',
+    background-color-state-hover: 'state-hover',
+    background-color-state-active: 'state-active',
 );
 
 $color-emotion-dictionary-config: (
     color: 'content-subtle',
     border-color: 'border-basic',
-    background-color: 'default',
-    background-color-hover: 'hover',
-    background-color-active: 'active',
+    background-color: 'state-default',
+    background-color-state-hover: 'state-hover',
+    background-color-state-active: 'state-active',
 );
 
 $loading-color-dictionary-config: (
diff --git a/packages/web/src/scss/components/Checkbox/_Checkbox.scss b/packages/web/src/scss/components/Checkbox/_Checkbox.scss
index 52f54576cc..4445b8c1f7 100644
--- a/packages/web/src/scss/components/Checkbox/_Checkbox.scss
+++ b/packages/web/src/scss/components/Checkbox/_Checkbox.scss
@@ -111,8 +111,8 @@ $_field-name: 'Checkbox';
 .Checkbox > .Checkbox__input:disabled {
     @include form-fields-tools.input-disabled();
 
-    border-color: form-fields-theme.$input-border-color-disabled;
-    background-color: form-fields-theme.$input-background-color-disabled;
+    border-color: form-fields-theme.$input-border-color-state-disabled;
+    background-color: form-fields-theme.$input-background-color-state-disabled;
 
     &:checked,
     &:indeterminate {
diff --git a/packages/web/src/scss/components/FileUploader/_FileUploaderInput.scss b/packages/web/src/scss/components/FileUploader/_FileUploaderInput.scss
index a8458c0051..fe8e9ff272 100644
--- a/packages/web/src/scss/components/FileUploader/_FileUploaderInput.scss
+++ b/packages/web/src/scss/components/FileUploader/_FileUploaderInput.scss
@@ -86,13 +86,13 @@ $_field-name: 'FileUploaderInput';
 }
 
 .FileUploaderInput .FileUploaderInput__dropZone:hover {
-    border-color: theme.$input-drop-zone-border-color-hover;
-    background-color: theme.$input-drop-zone-background-hover;
+    border-color: theme.$input-drop-zone-border-color-state-hover;
+    background-color: theme.$input-drop-zone-background-state-hover;
 }
 
 .FileUploaderInput > .FileUploaderInput__input:active ~ .FileUploaderInput__dropZone {
-    border-color: theme.$input-drop-zone-border-color-active;
-    background-color: theme.$input-drop-zone-background-active;
+    border-color: theme.$input-drop-zone-border-color-state-active;
+    background-color: theme.$input-drop-zone-background-state-active;
 }
 
 // 2.
@@ -123,7 +123,7 @@ $_field-name: 'FileUploaderInput';
     ~ .FileUploaderInput__dropZone
     > .FileUploaderInput__dropZoneLabel
     > .FileUploaderInput__link {
-    color: form-fields-theme.$input-color-disabled;
+    color: form-fields-theme.$input-color-state-disabled;
 }
 
 .FileUploaderInput
@@ -136,8 +136,8 @@ $_field-name: 'FileUploaderInput';
 // stylelint-enable selector-max-compound-selectors, selector-max-specificity
 
 .FileUploaderInput > .FileUploaderInput__input:disabled ~ .FileUploaderInput__dropZone {
-    border-color: form-fields-theme.$input-border-color-disabled;
-    background-color: form-fields-theme.$input-background-color-disabled;
+    border-color: form-fields-theme.$input-border-color-state-disabled;
+    background-color: form-fields-theme.$input-background-color-state-disabled;
 }
 // stylelint-enable selector-max-class
 
diff --git a/packages/web/src/scss/components/FileUploader/_theme.scss b/packages/web/src/scss/components/FileUploader/_theme.scss
index b2906f6451..74260dbeb4 100644
--- a/packages/web/src/scss/components/FileUploader/_theme.scss
+++ b/packages/web/src/scss/components/FileUploader/_theme.scss
@@ -2,18 +2,18 @@
 
 $input-drop-zone-padding: tokens.$space-700;
 $input-drop-zone-column-gap: tokens.$space-700;
-$input-drop-zone-border: tokens.$border-width-200 solid tokens.$form-field-border-default;
-$input-drop-zone-draggable-border: tokens.$border-width-200 dashed tokens.$form-field-border-default;
-$input-drop-zone-dragging-border: tokens.$border-width-200 dashed tokens.$form-field-border-selected;
-$input-drop-zone-border-color-hover: tokens.$form-field-border-hover;
-$input-drop-zone-border-color-active: tokens.$form-field-border-active;
+$input-drop-zone-border: tokens.$border-width-200 solid tokens.$form-field-filled-border-state-default;
+$input-drop-zone-draggable-border: tokens.$border-width-200 dashed tokens.$form-field-filled-border-state-default;
+$input-drop-zone-dragging-border: tokens.$border-width-200 dashed tokens.$form-field-filled-border-state-selected;
+$input-drop-zone-border-color-state-hover: tokens.$form-field-filled-border-state-hover;
+$input-drop-zone-border-color-state-active: tokens.$form-field-filled-border-state-active;
 $input-drop-zone-border-radius: tokens.$radius-300;
-$input-drop-zone-background: tokens.$background-interactive-default;
-$input-drop-zone-background-hover: tokens.$background-interactive-hover;
-$input-drop-zone-background-active: tokens.$background-interactive-active;
+$input-drop-zone-background: tokens.$background-interactive-state-default;
+$input-drop-zone-background-state-hover: tokens.$background-interactive-state-hover;
+$input-drop-zone-background-state-active: tokens.$background-interactive-state-active;
 $input-drop-zone-label-typography: tokens.$body-medium-regular;
 $input-drop-zone-label-color: tokens.$text-primary;
-$input-drop-zone-icon-color: tokens.$action-link-primary-default;
+$input-drop-zone-icon-color: tokens.$link-primary-state-default;
 
 $list-row-gap: tokens.$space-700;
 
diff --git a/packages/web/src/scss/components/Header/_theme.scss b/packages/web/src/scss/components/Header/_theme.scss
index 32670dd7c9..72a7b5e3cf 100644
--- a/packages/web/src/scss/components/Header/_theme.scss
+++ b/packages/web/src/scss/components/Header/_theme.scss
@@ -17,16 +17,16 @@ $header-desktop-actions-gap: tokens.$space-900;
 // HeaderLink
 $header-link-padding-x: tokens.$space-700;
 $header-link-padding-y: tokens.$space-600;
-$header-link-color: tokens.$action-link-primary-default;
-$header-link-background-color: tokens.$background-interactive-default;
-$header-link-color-hover: tokens.$action-link-primary-hover;
-$header-link-background-color-hover: tokens.$background-interactive-hover;
-$header-link-color-active: tokens.$action-link-primary-active;
-$header-link-background-color-active: tokens.$background-interactive-active;
-$header-link-color-current: tokens.$selected-default;
-$header-link-background-color-current: tokens.$background-interactive-active;
+$header-link-color: tokens.$link-primary-state-default;
+$header-link-background-color: tokens.$background-interactive-state-default;
+$header-link-color-state-hover: tokens.$link-primary-state-hover;
+$header-link-background-color-state-hover: tokens.$background-interactive-state-hover;
+$header-link-color-state-active: tokens.$link-primary-state-active;
+$header-link-background-color-state-active: tokens.$background-interactive-state-active;
+$header-link-color-current: tokens.$selected-state-default;
+$header-link-background-color-current: tokens.$background-interactive-state-active;
 $header-link-current-border-thickness: tokens.$border-width-200;
-$header-link-current-border-color: tokens.$selected-default;
+$header-link-current-border-color: tokens.$selected-state-default;
 $header-link-transition-duration: transitions.$duration-200;
 $header-link-transition-timing: transitions.$timing-eased-out;
 
diff --git a/packages/web/src/scss/components/Header/_tools.scss b/packages/web/src/scss/components/Header/_tools.scss
index 4fcc61cc45..629444e367 100644
--- a/packages/web/src/scss/components/Header/_tools.scss
+++ b/packages/web/src/scss/components/Header/_tools.scss
@@ -29,14 +29,14 @@
 
     &:hover {
         text-decoration: none;
-        color: theme.$header-link-color-hover;
-        background-color: theme.$header-link-background-color-hover;
+        color: theme.$header-link-color-state-hover;
+        background-color: theme.$header-link-background-color-state-hover;
     }
 
     &:active {
         text-decoration: none;
-        color: theme.$header-link-color-active;
-        background-color: theme.$header-link-background-color-active;
+        color: theme.$header-link-color-state-active;
+        background-color: theme.$header-link-background-color-state-active;
     }
 
     @media (prefers-reduced-motion: no-preference) {
diff --git a/packages/web/src/scss/components/Item/_Item.scss b/packages/web/src/scss/components/Item/_Item.scss
index 541a038b25..9284a78ea5 100644
--- a/packages/web/src/scss/components/Item/_Item.scss
+++ b/packages/web/src/scss/components/Item/_Item.scss
@@ -49,7 +49,7 @@
 .Item__icon {
     display: flex;
     grid-row: span 2; // 1.
-    color: theme.$icon-color-default;
+    color: theme.$icon-color-state-default;
 }
 
 .Item__icon--start {
@@ -78,11 +78,6 @@
     @include form-fields.helper-text-disabled();
 }
 
-.Item:not(.Item--disabled):hover .Item__helperText,
-.Item:not(.Item--disabled):active .Item__helperText {
-    color: inherit;
-}
-
 .Item--disabled .Item__icon {
-    color: theme.$icon-color-disabled;
+    color: theme.$icon-color-state-disabled;
 }
diff --git a/packages/web/src/scss/components/Item/_theme.scss b/packages/web/src/scss/components/Item/_theme.scss
index 9c2eefabe5..642d0931c7 100644
--- a/packages/web/src/scss/components/Item/_theme.scss
+++ b/packages/web/src/scss/components/Item/_theme.scss
@@ -1,5 +1,5 @@
 @use '@tokens' as tokens;
 
 $gap: tokens.$space-500;
-$icon-color-default: tokens.$selected-content-basic;
-$icon-color-disabled: tokens.$disabled-content;
+$icon-color-state-default: tokens.$selected-content-basic;
+$icon-color-state-disabled: tokens.$disabled-content;
diff --git a/packages/web/src/scss/components/Pagination/_theme.scss b/packages/web/src/scss/components/Pagination/_theme.scss
index 68815f5827..e4d5dd31fa 100644
--- a/packages/web/src/scss/components/Pagination/_theme.scss
+++ b/packages/web/src/scss/components/Pagination/_theme.scss
@@ -10,18 +10,18 @@ $item-border-width: tokens.$border-width-100;
 $item-border-style: solid;
 $item-border-radius: tokens.$radius-full;
 
-$item-default-color: tokens.$action-button-secondary-content;
-$item-default-border-color: tokens.$action-button-secondary-border;
-$item-default-background-color: tokens.$action-button-secondary-default;
+$item-default-color: tokens.$component-button-secondary-content;
+$item-default-border-color: tokens.$component-button-secondary-border;
+$item-default-background-color: tokens.$component-button-secondary-state-default;
 
-$item-active-color: tokens.$action-button-secondary-content;
-$item-active-border-color: tokens.$action-button-secondary-border;
-$item-active-background-color: tokens.$action-button-secondary-active;
+$item-active-color: tokens.$component-button-secondary-content;
+$item-active-border-color: tokens.$component-button-secondary-border;
+$item-active-background-color: tokens.$component-button-secondary-state-active;
 
-$item-hover-color: tokens.$action-button-secondary-content;
-$item-hover-border-color: tokens.$action-button-secondary-border;
-$item-hover-background-color: tokens.$action-button-secondary-hover;
+$item-hover-color: tokens.$component-button-secondary-content;
+$item-hover-border-color: tokens.$component-button-secondary-border;
+$item-hover-background-color: tokens.$component-button-secondary-state-hover;
 
-$item-selected-color: tokens.$action-button-primary-content;
-$item-selected-border-color: tokens.$action-button-primary-border;
-$item-selected-background-color: tokens.$action-button-primary-default;
+$item-selected-color: tokens.$component-button-primary-content;
+$item-selected-border-color: tokens.$component-button-primary-border;
+$item-selected-background-color: tokens.$component-button-primary-state-default;
diff --git a/packages/web/src/scss/components/Pill/_theme.scss b/packages/web/src/scss/components/Pill/_theme.scss
index 2d81ee7055..d707ac5e33 100644
--- a/packages/web/src/scss/components/Pill/_theme.scss
+++ b/packages/web/src/scss/components/Pill/_theme.scss
@@ -24,5 +24,5 @@ $color-selected-dictionary: (
 
 $color-selected-dictionary-config: (
     color: 'content-subtle',
-    background-color: 'default',
+    background-color: 'state-default',
 );
diff --git a/packages/web/src/scss/components/Radio/_Radio.scss b/packages/web/src/scss/components/Radio/_Radio.scss
index f828bdcf91..1b1bd7e3fd 100644
--- a/packages/web/src/scss/components/Radio/_Radio.scss
+++ b/packages/web/src/scss/components/Radio/_Radio.scss
@@ -105,15 +105,15 @@ $_field-name: 'Radio';
 .Radio > .Radio__input:disabled {
     @include form-fields-tools.input-disabled();
 
-    border-color: form-fields-theme.$input-border-color-disabled;
-    background-color: form-fields-theme.$input-background-color-disabled;
+    border-color: form-fields-theme.$input-border-color-state-disabled;
+    background-color: form-fields-theme.$input-background-color-state-disabled;
 
     &:checked {
-        border-color: form-fields-theme.$input-border-color-disabled;
+        border-color: form-fields-theme.$input-border-color-state-disabled;
     }
 
     &::before {
-        background-color: theme.$input-background-color-disabled;
+        background-color: theme.$input-background-color-state-disabled;
     }
 }
 
diff --git a/packages/web/src/scss/components/Radio/_theme.scss b/packages/web/src/scss/components/Radio/_theme.scss
index 089561584e..00dfad3997 100644
--- a/packages/web/src/scss/components/Radio/_theme.scss
+++ b/packages/web/src/scss/components/Radio/_theme.scss
@@ -7,7 +7,7 @@ $input-size: 20px;
 $input-margin: tokens.$space-200;
 $input-inner-dot-size: 10px;
 $input-background-color: form-fields-theme.$inline-field-input-background-color-checked;
-$input-background-color-disabled: form-fields-theme.$input-color-disabled;
+$input-background-color-state-disabled: form-fields-theme.$input-color-state-disabled;
 $input-transition-duration: transitions.$duration-100;
 $input-transition-timing: transitions.$timing-eased-in-out;
 $input-focus-shadow: tokens.$focus;
diff --git a/packages/web/src/scss/components/Select/_Select.scss b/packages/web/src/scss/components/Select/_Select.scss
index f785846653..5af53b7323 100644
--- a/packages/web/src/scss/components/Select/_Select.scss
+++ b/packages/web/src/scss/components/Select/_Select.scss
@@ -38,7 +38,7 @@ $_field-name: 'Select';
     align-items: center;
     justify-content: center;
     aspect-ratio: 1;
-    color: form-fields-theme.$box-field-input-color-default;
+    color: form-fields-theme.$box-field-input-color-state-default;
     pointer-events: none;
 }
 
@@ -89,7 +89,7 @@ $_field-name: 'Select';
 }
 
 :is(.Select--disabled, .Select.is-disabled) .Select__icon {
-    color: form-fields-theme.$input-color-disabled;
+    color: form-fields-theme.$input-color-state-disabled;
 }
 
 :is(.Select--disabled, .Select.is-disabled) > :is(.Select__validationText, [data-spirit-element='validation_text']) {
diff --git a/packages/web/src/scss/components/Tabs/_Tabs.scss b/packages/web/src/scss/components/Tabs/_Tabs.scss
index c7da43a850..0b5f1df5a5 100644
--- a/packages/web/src/scss/components/Tabs/_Tabs.scss
+++ b/packages/web/src/scss/components/Tabs/_Tabs.scss
@@ -49,24 +49,24 @@
     @include typography.generate(theme.$item-typography);
 
     padding-block: theme.$link-padding-y;
-    color: theme.$link-color-default;
+    color: theme.$link-color-state-default;
 
     @media (hover: hover) {
         &:hover {
             text-decoration: none;
-            color: theme.$link-color-hover;
+            color: theme.$link-color-state-hover;
         }
     }
 
     &:active {
         text-decoration: none;
-        color: theme.$link-color-active;
+        color: theme.$link-color-state-active;
     }
 }
 
 .Tabs__link.is-selected {
     position: relative;
-    color: theme.$link-color-selected;
+    color: theme.$link-color-state-selected;
 
     &::after {
         content: '';
diff --git a/packages/web/src/scss/components/Tabs/_theme.scss b/packages/web/src/scss/components/Tabs/_theme.scss
index a764f7b8cb..c47b6845d1 100644
--- a/packages/web/src/scss/components/Tabs/_theme.scss
+++ b/packages/web/src/scss/components/Tabs/_theme.scss
@@ -3,10 +3,10 @@
 $breakpoints: tokens.$breakpoints;
 $item-padding-x: tokens.$space-700;
 $link-padding-y: tokens.$space-500;
-$link-color-default: tokens.$action-link-secondary-default;
-$link-color-hover: tokens.$action-link-secondary-hover;
-$link-color-active: tokens.$action-link-secondary-active;
-$link-color-selected: $link-color-active;
+$link-color-state-default: tokens.$link-secondary-state-default;
+$link-color-state-hover: tokens.$link-secondary-state-hover;
+$link-color-state-active: tokens.$link-secondary-state-active;
+$link-color-state-selected: $link-color-state-active;
 $spacing-fallback: tokens.$space-900;
 $item-typography: tokens.$body-medium-semibold;
 $item-selected-underline-border-radius: tokens.$radius-100;
diff --git a/packages/web/src/scss/components/Tag/_Tag.scss b/packages/web/src/scss/components/Tag/_Tag.scss
index 0cacd4387e..c02ac725ec 100644
--- a/packages/web/src/scss/components/Tag/_Tag.scss
+++ b/packages/web/src/scss/components/Tag/_Tag.scss
@@ -19,6 +19,7 @@
 
 .Tag--subtle {
     color: var(--#{tokens.$token-prefix}tag-subtle-color);
+    border-color: var(--#{tokens.$token-prefix}tag-subtle-border-color);
     background-color: var(--#{tokens.$token-prefix}tag-subtle-background-color);
 }
 
diff --git a/packages/web/src/scss/components/Tag/_theme.scss b/packages/web/src/scss/components/Tag/_theme.scss
index afeca4feaa..1ef6cbd0ca 100644
--- a/packages/web/src/scss/components/Tag/_theme.scss
+++ b/packages/web/src/scss/components/Tag/_theme.scss
@@ -16,6 +16,7 @@ $color-dictionary-config: (
     border-color: 'border-basic',
     background-color: 'background-basic',
     subtle-color: 'content-basic',
+    subtle-border-color: 'border-subtle',
     subtle-background-color: 'background-subtle',
 );
 
diff --git a/packages/web/src/scss/components/TextField/_TextField.scss b/packages/web/src/scss/components/TextField/_TextField.scss
index 07b4683743..e5a05be7ee 100644
--- a/packages/web/src/scss/components/TextField/_TextField.scss
+++ b/packages/web/src/scss/components/TextField/_TextField.scss
@@ -98,7 +98,7 @@ $_field-name: 'TextField';
     align-items: center;
     justify-content: center;
     padding: theme.$input-password-toggle-padding;
-    color: form-fields-theme.$box-field-input-color-default;
+    color: form-fields-theme.$box-field-input-color-state-default;
     border-radius: 0 form-fields-theme.$box-field-input-border-radius form-fields-theme.$box-field-input-border-radius 0;
     background-color: form-fields-theme.$input-background-color;
 
@@ -121,12 +121,12 @@ $_field-name: 'TextField';
 }
 
 .TextField__input:hover + .TextField__passwordToggle__button {
-    background-color: form-fields-theme.$input-background-color-hover;
+    background-color: form-fields-theme.$input-background-color-state-hover;
 }
 
 .TextField__input:active + .TextField__passwordToggle__button,
 .TextField__input:focus-within + .TextField__passwordToggle__button {
-    background-color: form-fields-theme.$input-background-color-active;
+    background-color: form-fields-theme.$input-background-color-state-active;
 }
 
 .TextField__passwordToggle__icon {
@@ -196,14 +196,14 @@ $_field-name: 'TextField';
 :is(.TextField--disabled, .TextField.is-disabled)
     .TextField__passwordToggle
     .TextField__passwordToggle__button::before {
-    border-color: form-fields-theme.$input-border-color-disabled;
+    border-color: form-fields-theme.$input-border-color-state-disabled;
 }
 
 .TextField .TextField__input:disabled ~ .TextField__passwordToggle__button,
 :is(.TextField--disabled, .TextField.is-disabled) .TextField__passwordToggle__button {
     @include form-fields-tools.input-disabled();
 
-    background-color: form-fields-theme.$input-background-color-disabled;
+    background-color: form-fields-theme.$input-background-color-state-disabled;
     pointer-events: none;
     cursor: cursors.$disabled;
 }
diff --git a/packages/web/src/scss/components/UNSTABLE_Slider/_UNSTABLE_Slider.scss b/packages/web/src/scss/components/UNSTABLE_Slider/_UNSTABLE_Slider.scss
index de8b810fc0..e255c6f887 100644
--- a/packages/web/src/scss/components/UNSTABLE_Slider/_UNSTABLE_Slider.scss
+++ b/packages/web/src/scss/components/UNSTABLE_Slider/_UNSTABLE_Slider.scss
@@ -45,18 +45,18 @@ $_field-name: 'UNSTABLE_Slider';
         &:hover {
             --slider-track-background: #{theme.$track-background-hover};
             --slider-track-lower-background: #{theme.$track-lower-background-hover};
-            --slider-thumb-border-color: #{theme.$thumb-border-color-hover};
-            --slider-thumb-background-color: #{theme.$thumb-background-color-hover};
-            --slider-thumb-box-shadow: #{theme.$thumb-box-shadow-hover};
+            --slider-thumb-border-color: #{theme.$thumb-border-color-state-hover};
+            --slider-thumb-background-color: #{theme.$thumb-background-color-state-hover};
+            --slider-thumb-box-shadow: #{theme.$thumb-box-shadow-state-hover};
         }
     }
 
     &:active {
         --slider-track-background: #{theme.$track-background-active};
         --slider-track-lower-background: #{theme.$track-lower-background-active};
-        --slider-thumb-border-color: #{theme.$thumb-border-color-active};
-        --slider-thumb-background-color: #{theme.$thumb-background-color-active};
-        --slider-thumb-box-shadow: #{theme.$thumb-box-shadow-active};
+        --slider-thumb-border-color: #{theme.$thumb-border-color-state-active};
+        --slider-thumb-background-color: #{theme.$thumb-background-color-state-active};
+        --slider-thumb-box-shadow: #{theme.$thumb-box-shadow-state-active};
     }
 
     &:focus {
@@ -144,11 +144,11 @@ $_field-name: 'UNSTABLE_Slider';
 :is(.UNSTABLE_Slider--disabled, .UNSTABLE_Slider.is-disabled) .UNSTABLE_Slider__input {
     --slider-track-background: #{theme.$track-background-disabled};
     --slider-track-lower-background: #{theme.$track-lower-background-disabled};
-    --slider-thumb-border-width: #{theme.$thumb-border-width-disabled};
-    --slider-thumb-border-color: #{theme.$thumb-border-color-disabled};
-    --slider-thumb-background-color: #{theme.$thumb-background-color-disabled};
+    --slider-thumb-border-width: #{theme.$thumb-border-width-state-disabled};
+    --slider-thumb-border-color: #{theme.$thumb-border-color-state-disabled};
+    --slider-thumb-background-color: #{theme.$thumb-background-color-state-disabled};
     --slider-thumb-background-image: #{svg.escape(theme.$thumb-background-image-disabled)};
-    --slider-thumb-box-shadow: #{theme.$thumb-box-shadow-disabled};
+    --slider-thumb-box-shadow: #{theme.$thumb-box-shadow-state-disabled};
 
     @include form-fields-tools.input-disabled();
 
diff --git a/packages/web/src/scss/components/UNSTABLE_Slider/_theme.scss b/packages/web/src/scss/components/UNSTABLE_Slider/_theme.scss
index c0b33b7b23..7ec135eb68 100644
--- a/packages/web/src/scss/components/UNSTABLE_Slider/_theme.scss
+++ b/packages/web/src/scss/components/UNSTABLE_Slider/_theme.scss
@@ -8,34 +8,34 @@ $transition-timing: transitions.$timing-eased-out;
 
 $track-height: tokens.$space-300;
 $track-border-radius: tokens.$radius-100;
-$track-background: tokens.$border-interactive-default;
-$track-background-hover: tokens.$border-interactive-hover;
-$track-background-active: tokens.$border-interactive-active;
+$track-background: tokens.$border-interactive-state-default;
+$track-background-hover: tokens.$border-interactive-state-hover;
+$track-background-active: tokens.$border-interactive-state-active;
 $track-background-disabled: tokens.$disabled-background;
-$track-lower-background: tokens.$selected-default;
-$track-lower-background-hover: tokens.$selected-default;
-$track-lower-background-active: tokens.$selected-default;
+$track-lower-background: tokens.$selected-state-default;
+$track-lower-background-hover: tokens.$selected-state-default;
+$track-lower-background-active: tokens.$selected-state-default;
 $track-lower-background-disabled: tokens.$disabled-foreground;
 
 $thumb-width: tokens.$space-900;
 $thumb-height: tokens.$space-1100;
 $thumb-border-width: tokens.$border-width-200;
-$thumb-border-width-disabled: tokens.$border-width-100;
+$thumb-border-width-state-disabled: tokens.$border-width-100;
 $thumb-border-style: solid;
-$thumb-border-color: tokens.$form-field-border-default;
-$thumb-border-color-hover: tokens.$form-field-border-hover;
-$thumb-border-color-active: tokens.$selected-default;
-$thumb-border-color-disabled: tokens.$disabled-foreground;
+$thumb-border-color: tokens.$form-field-filled-border-state-default;
+$thumb-border-color-state-hover: tokens.$form-field-filled-border-state-hover;
+$thumb-border-color-state-active: tokens.$selected-state-default;
+$thumb-border-color-state-disabled: tokens.$disabled-foreground;
 $thumb-border-radius: tokens.$radius-200;
-$thumb-background-color: tokens.$form-field-default;
-$thumb-background-color-hover: tokens.$form-field-hover;
-$thumb-background-color-active: tokens.$form-field-active;
-$thumb-background-color-disabled: tokens.$disabled-background;
+$thumb-background-color: tokens.$form-field-filled-background-state-default;
+$thumb-background-color-state-hover: tokens.$form-field-filled-background-state-hover;
+$thumb-background-color-state-active: tokens.$form-field-filled-background-state-active;
+$thumb-background-color-state-disabled: tokens.$disabled-background;
 $thumb-background-image: var(--#{tokens.$token-prefix}slider-thumb-background-image-url);
 $thumb-background-image-disabled: var(--#{tokens.$token-prefix}slider-thumb-disabled-background-image-url);
 $thumb-background-size: tokens.$space-500 tokens.$space-700;
 $thumb-box-shadow: tokens.$shadow-100;
-$thumb-box-shadow-hover: tokens.$shadow-100;
-$thumb-box-shadow-active: tokens.$shadow-200;
-$thumb-box-shadow-disabled: none;
-$thumb-box-shadow-focus: tokens.$focus;
+$thumb-box-shadow-state-hover: tokens.$shadow-100;
+$thumb-box-shadow-state-active: tokens.$shadow-200;
+$thumb-box-shadow-state-disabled: none;
+$thumb-box-shadow-state-focus: tokens.$focus;
diff --git a/packages/web/src/scss/components/UNSTABLE_Slider/_tools.scss b/packages/web/src/scss/components/UNSTABLE_Slider/_tools.scss
index a577ec679f..76663d972a 100644
--- a/packages/web/src/scss/components/UNSTABLE_Slider/_tools.scss
+++ b/packages/web/src/scss/components/UNSTABLE_Slider/_tools.scss
@@ -29,5 +29,5 @@
 }
 
 @mixin thumb-focus() {
-    box-shadow: theme.$thumb-box-shadow-focus;
+    box-shadow: theme.$thumb-box-shadow-state-focus;
 }
diff --git a/packages/web/src/scss/components/UNSTABLE_Toggle/_UNSTABLE_Toggle.scss b/packages/web/src/scss/components/UNSTABLE_Toggle/_UNSTABLE_Toggle.scss
index 1af45e56b9..5e720cb95d 100644
--- a/packages/web/src/scss/components/UNSTABLE_Toggle/_UNSTABLE_Toggle.scss
+++ b/packages/web/src/scss/components/UNSTABLE_Toggle/_UNSTABLE_Toggle.scss
@@ -61,7 +61,6 @@ $_field-name: 'UNSTABLE_Toggle';
         height: theme.$input-mark-size;
         margin: theme.$input-mark-spacing;
         border-radius: theme.$input-mark-border-radius;
-        background-color: theme.$input-mark-background-color;
         box-shadow: theme.$input-mark-shadow;
         transform: translateX(0);
 
@@ -73,11 +72,13 @@ $_field-name: 'UNSTABLE_Toggle';
     }
 
     &::before {
+        background-color: theme.$input-mark-background-color;
         visibility: visible;
         opacity: 1;
     }
 
     &::after {
+        background-color: theme.$input-mark-background-color-checked;
         visibility: hidden;
         opacity: 0;
     }
@@ -87,8 +88,8 @@ $_field-name: 'UNSTABLE_Toggle';
     }
 
     &:checked {
-        border-color: theme.$input-border-color-checked;
-        background-color: theme.$input-background-color-checked;
+        border-color: theme.$input-border-color-state-checked;
+        background-color: theme.$input-background-color-state-checked;
 
         &::before,
         &::after {
@@ -109,12 +110,12 @@ $_field-name: 'UNSTABLE_Toggle';
     @media (hover: hover) {
         &:hover,
         &:active {
-            background-color: theme.$input-background-color-hover;
+            background-color: theme.$input-background-color-state-hover;
         }
 
         &:checked:hover,
         &:checked:active {
-            background-color: theme.$input-background-color-checked-hover;
+            background-color: theme.$input-background-color-state-checked-hover;
         }
     }
 }
@@ -130,7 +131,7 @@ $_field-name: 'UNSTABLE_Toggle';
 }
 
 .UNSTABLE_Toggle__input--indicators::after {
-    background-image: theme.$input-mark-image-checked;
+    background-image: theme.$input-mark-image-state-checked;
 }
 
 .UNSTABLE_Toggle__validationText,
@@ -156,12 +157,12 @@ $_field-name: 'UNSTABLE_Toggle';
 .UNSTABLE_Toggle > .UNSTABLE_Toggle__input:disabled {
     @include form-fields-tools.input-disabled();
 
-    border-color: theme.$input-border-color-disabled;
-    background-color: theme.$input-background-color-disabled;
+    border-color: theme.$input-border-color-state-disabled;
+    background-color: theme.$input-background-color-state-disabled;
 
     &::before,
     &::after {
-        background-color: theme.$input-mark-background-color-disabled;
+        background-color: theme.$input-mark-background-color-state-disabled;
         box-shadow: none;
     }
 }
@@ -174,11 +175,11 @@ $_field-name: 'UNSTABLE_Toggle';
     }
 
     &::before {
-        background-image: theme.$input-mark-image-disabled;
+        background-image: theme.$input-mark-image-state-disabled;
     }
 
     &::after {
-        background-image: theme.$input-mark-image-checked-disabled;
+        background-image: theme.$input-mark-image-state-checked-disabled;
     }
 }
 
diff --git a/packages/web/src/scss/components/UNSTABLE_Toggle/_theme.scss b/packages/web/src/scss/components/UNSTABLE_Toggle/_theme.scss
index 139cf9b604..b08f0a1338 100644
--- a/packages/web/src/scss/components/UNSTABLE_Toggle/_theme.scss
+++ b/packages/web/src/scss/components/UNSTABLE_Toggle/_theme.scss
@@ -5,14 +5,14 @@ $max-width: 21rem;
 $input-width: 44px;
 $input-height: 24px;
 $input-border-width: tokens.$border-width-100;
-$input-border-color: tokens.$action-toggle-unselected-border;
-$input-border-color-checked: tokens.$action-toggle-selected-border;
-$input-border-color-disabled: tokens.$disabled-border;
-$input-background-color: tokens.$action-toggle-unselected-default;
-$input-background-color-hover: tokens.$action-toggle-unselected-hover;
-$input-background-color-checked: tokens.$action-toggle-selected-default;
-$input-background-color-checked-hover: tokens.$action-toggle-selected-hover;
-$input-background-color-disabled: tokens.$disabled-background;
+$input-border-color: tokens.$component-toggle-unselected-border;
+$input-border-color-state-checked: tokens.$component-toggle-selected-border;
+$input-border-color-state-disabled: tokens.$disabled-border;
+$input-background-color: tokens.$component-toggle-unselected-state-default;
+$input-background-color-state-hover: tokens.$component-toggle-unselected-state-hover;
+$input-background-color-state-checked: tokens.$component-toggle-selected-state-default;
+$input-background-color-state-checked-hover: tokens.$component-toggle-selected-state-hover;
+$input-background-color-state-disabled: tokens.$disabled-background;
 $input-border-radius: tokens.$radius-400;
 $input-focus-shadow: tokens.$focus;
 
@@ -21,12 +21,13 @@ $input-mark-spacing: tokens.$space-100;
 $input-mark-position-x: tokens.$space-100;
 $input-mark-position-y: tokens.$space-100;
 $input-mark-border-radius: tokens.$radius-full;
-$input-mark-background-color: tokens.$action-toggle-selected-content;
-$input-mark-background-color-disabled: tokens.$disabled-foreground;
+$input-mark-background-color: tokens.$component-toggle-unselected-content;
+$input-mark-background-color-checked: tokens.$component-toggle-selected-content;
+$input-mark-background-color-state-disabled: tokens.$disabled-foreground;
 $input-mark-image: var(--#{tokens.$token-prefix}toggle-input-mark-background-image-url);
-$input-mark-image-checked: var(--#{tokens.$token-prefix}toggle-input-mark-checked-background-image-url);
-$input-mark-image-disabled: var(--#{tokens.$token-prefix}toggle-input-mark-disabled-background-image-url);
-$input-mark-image-checked-disabled: var(
+$input-mark-image-state-checked: var(--#{tokens.$token-prefix}toggle-input-mark-checked-background-image-url);
+$input-mark-image-state-disabled: var(--#{tokens.$token-prefix}toggle-input-mark-disabled-background-image-url);
+$input-mark-image-state-checked-disabled: var(
     --#{tokens.$token-prefix}toggle-input-mark-checked-disabled-background-image-url
 );
 $input-mark-shadow: tokens.$shadow-200;
diff --git a/packages/web/src/scss/helpers/links/_links.scss b/packages/web/src/scss/helpers/links/_links.scss
index 13bd4fd81b..d855235e4b 100644
--- a/packages/web/src/scss/helpers/links/_links.scss
+++ b/packages/web/src/scss/helpers/links/_links.scss
@@ -16,13 +16,10 @@
 @use '../../tools/links' as links-tools;
 
 // 1.
-@include dictionaries.prepare-button-links(dictionaries-settings.$action-link-colors);
+@include dictionaries.prepare-button-links(links-settings.$colors);
 
 // 2.
-@include dictionaries.generate-link-colors(
-    $selector: '.link',
-    $dictionary-values: dictionaries-settings.$action-link-colors
-);
+@include dictionaries.generate-link-colors($selector: '.link', $dictionary-values: links-settings.$colors);
 
 // 3.
 [class*='typography-heading'] a {
@@ -38,7 +35,7 @@
 
 // 5.
 .link-allow-visited-style:visited {
-    color: var(--#{tokens.$token-prefix}color-action-link-visited-default);
+    color: tokens.$link-state-visited;
 }
 
 // 6.
diff --git a/packages/web/src/scss/settings/_dictionaries.scss b/packages/web/src/scss/settings/_dictionaries.scss
index f172cc319d..a9f2703626 100644
--- a/packages/web/src/scss/settings/_dictionaries.scss
+++ b/packages/web/src/scss/settings/_dictionaries.scss
@@ -6,9 +6,6 @@ $_placement-sides: top, bottom, left, right;
 $_placement-side-corners: top-start, top-end, bottom-start, bottom-end, left-start, left-end, right-start, right-end;
 $_size-extended: xsmall, xlarge;
 
-$action-colors: primary, secondary, tertiary, inverted;
-$action-button-colors: primary, secondary, tertiary;
-$action-link-colors: primary, secondary, tertiary;
 $alignments-x: left, center, right;
 $alignments-x-extended: list.join($alignments-x, $_alignments-x-extended);
 $alignments-y: top, center, bottom;
diff --git a/packages/web/src/scss/settings/_links.scss b/packages/web/src/scss/settings/_links.scss
index da2694c054..64eff32bcd 100644
--- a/packages/web/src/scss/settings/_links.scss
+++ b/packages/web/src/scss/settings/_links.scss
@@ -1,3 +1,16 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+@use '@tokens' as tokens;
+
+$colors: ();
+
+@each $key, $value in tokens.$link-colors {
+    @if meta.type-of($value) == 'map' {
+        $colors: list.append($colors, $key);
+    }
+}
+
 $text-decoration-default: none;
 $text-decoration-hover: underline;
 $text-decoration-skip-ink: none;
diff --git a/packages/web/src/scss/settings/_utilities.scss b/packages/web/src/scss/settings/_utilities.scss
index 24db4a31b6..18618905a6 100644
--- a/packages/web/src/scss/settings/_utilities.scss
+++ b/packages/web/src/scss/settings/_utilities.scss
@@ -148,8 +148,6 @@ $utilities: (
             primary: tokens.$background-primary,
             secondary: tokens.$background-secondary,
             tertiary: tokens.$background-tertiary,
-            brand-primary: tokens.$background-brand-primary,
-            brand-secondary: tokens.$background-brand-secondary,
         ),
     ),
     'border-radius': (
diff --git a/packages/web/src/scss/theme/_form-fields.scss b/packages/web/src/scss/theme/_form-fields.scss
index bba3e9225d..53b7706f64 100644
--- a/packages/web/src/scss/theme/_form-fields.scss
+++ b/packages/web/src/scss/theme/_form-fields.scss
@@ -2,51 +2,51 @@
 
 // Common for all form components
 $input-typography: tokens.$body-medium-regular;
-$input-color-disabled: tokens.$disabled-content;
-$input-background-color: tokens.$form-field-default;
-$input-background-color-hover: tokens.$form-field-hover;
-$input-background-color-active: tokens.$form-field-active;
-$input-background-color-disabled: tokens.$disabled-background;
-$input-border-color: tokens.$form-field-border-default;
+$input-color-state-disabled: tokens.$disabled-content;
+$input-background-color: tokens.$form-field-filled-background-state-default;
+$input-background-color-state-hover: tokens.$form-field-filled-background-state-hover;
+$input-background-color-state-active: tokens.$form-field-filled-background-state-active;
+$input-background-color-state-disabled: tokens.$disabled-background;
+$input-border-color: tokens.$form-field-filled-border-state-default;
 $input-border-color-success: tokens.$form-field-success;
 $input-border-color-warning: tokens.$form-field-warning;
 $input-border-color-danger: tokens.$form-field-danger;
-$input-border-color-disabled: tokens.$disabled-border;
+$input-border-color-state-disabled: tokens.$disabled-border;
 $input-focus-shadow: tokens.$focus;
-$label-color-default: tokens.$form-field-label;
-$label-color-disabled: tokens.$disabled-content;
+$label-color-state-default: tokens.$form-field-label;
+$label-color-state-disabled: tokens.$disabled-content;
 $label-required-typography: tokens.$body-small-regular;
 $label-required-margin-left: tokens.$space-200;
 $label-required-color: tokens.$form-field-danger;
 $validation-text-typography: tokens.$body-small-semibold;
 $validation-text-margin-top: tokens.$space-400;
-$validation-text-color-disabled: tokens.$disabled-content;
+$validation-text-color-state-disabled: tokens.$disabled-content;
 $validation-text-color-success: tokens.$form-field-success;
 $validation-text-color-warning: tokens.$form-field-warning;
 $validation-text-color-danger: tokens.$form-field-danger;
 $helper-text-typography: tokens.$body-small-regular;
 $helper-text-margin-top: tokens.$space-400;
-$helper-text-color-default: tokens.$form-field-helper-text;
-$helper-text-color-disabled: tokens.$disabled-content;
+$helper-text-color-state-default: tokens.$form-field-helper-text;
+$helper-text-color-state-disabled: tokens.$disabled-content;
 
 // Inline field form components – Checkbox, Radio, etc.
 $inline-field-gap: tokens.$space-500;
 $inline-field-margin-y: tokens.$space-500;
-$inline-field-input-border-color-checked: tokens.$form-field-border-selected;
+$inline-field-input-border-color-checked: tokens.$form-field-filled-border-state-selected;
 $inline-field-input-border-color-checked-disabled: tokens.$disabled-background;
 $inline-field-input-border-width: tokens.$border-width-200;
-$inline-field-input-background-color-checked: tokens.$selected-default;
+$inline-field-input-background-color-checked: tokens.$selected-state-default;
 
 // Box field form components – TextField, TextArea, etc.
-$box-field-input-color-default: tokens.$form-field-content;
+$box-field-input-color-state-default: tokens.$form-field-filled-content;
 $box-field-input-border-width: tokens.$border-width-100;
 $box-field-input-border-style: solid;
 $box-field-input-border-color-focus: tokens.$border-focus;
 $box-field-input-focus-shadow: tokens.$focus;
 
 $box-field-input-border-radius: tokens.$radius-300;
-$box-field-input-placeholder-color-default: tokens.$form-field-placeholder;
-$box-field-input-placeholder-color-disabled: tokens.$disabled-content;
+$box-field-input-placeholder-color-state-default: tokens.$form-field-filled-placeholder;
+$box-field-input-placeholder-color-state-disabled: tokens.$disabled-content;
 $box-field-input-padding-x: tokens.$space-600;
 $box-field-input-padding-y: calc(#{tokens.$space-500} - #{tokens.$border-width-100});
 $box-field-input-width: 18rem;
@@ -72,9 +72,9 @@ $validation-states: (
 $item-padding-x: tokens.$space-700;
 $item-padding-y: tokens.$space-500;
 $item-border-radius: tokens.$radius-200;
-$item-background-color-default: tokens.$background-interactive-default;
-$item-background-color-hover: tokens.$background-interactive-hover;
-$item-background-color-active: tokens.$background-interactive-active;
+$item-background-color-state-default: tokens.$background-interactive-state-default;
+$item-background-color-state-hover: tokens.$background-interactive-state-hover;
+$item-background-color-state-active: tokens.$background-interactive-state-active;
 $item-label-typography: tokens.$body-medium-semibold;
 $item-validation-text-typography: tokens.$body-small-semibold;
 $item-helper-text-typography: tokens.$body-small-regular;
diff --git a/packages/web/src/scss/tools/__tests__/_dictionaries.test.scss b/packages/web/src/scss/tools/__tests__/_dictionaries.test.scss
index 11935d3848..efc109cd89 100644
--- a/packages/web/src/scss/tools/__tests__/_dictionaries.test.scss
+++ b/packages/web/src/scss/tools/__tests__/_dictionaries.test.scss
@@ -1,5 +1,6 @@
 @use 'true' as test;
 @use '../../settings/dictionaries' as dictionaries-settings;
+@use '../../settings/links' as links-settings;
 @use '../dictionaries';
 
 @include test.describe('generate-alignments mixin') {
@@ -51,8 +52,11 @@
                 @include dictionaries.generate-colors(
                     $class-name: 'Test',
                     $dictionary-values: (
-                        this-is-long-so-prettier-breaks-the-output-to-new-line:
-                            dictionaries-settings.$action-button-colors,
+                        this-is-long-so-prettier-breaks-the-output-to-new-line: (
+                            primary,
+                            secondary,
+                            tertiary,
+                        ),
                     ),
                     $config: (
                         color: 'content',
@@ -88,8 +92,11 @@
                 @include dictionaries.generate-colors(
                     $class-name: 'Test',
                     $dictionary-values: (
-                        this-is-long-so-prettier-breaks-the-output-to-new-line:
-                            dictionaries-settings.$action-button-colors,
+                        this-is-long-so-prettier-breaks-the-output-to-new-line: (
+                            primary,
+                            secondary,
+                            tertiary,
+                        ),
                     ),
                     $config: (
                         color: 'content',
@@ -129,7 +136,11 @@
         @include test.assert() {
             @include test.output() {
                 @include dictionaries.prepare-button-links(
-                    $dictionary-values: dictionaries-settings.$action-button-colors
+                    $dictionary-values: (
+                        primary,
+                        secondary,
+                        tertiary,
+                    )
                 );
             }
 
@@ -180,45 +191,45 @@
             @include test.output() {
                 @include dictionaries.generate-link-colors(
                     $selector: '.link',
-                    $dictionary-values: dictionaries-settings.$action-link-colors
+                    $dictionary-values: links-settings.$colors
                 );
             }
 
             @include test.expect() {
                 .link-primary {
-                    color: var(--spirit-color-action-link-primary-default);
+                    color: var(--spirit-color-link-primary-state-default);
                 }
 
                 .link-primary:hover {
-                    color: var(--spirit-color-action-link-primary-hover);
+                    color: var(--spirit-color-link-primary-state-hover);
                 }
 
                 .link-primary:active {
-                    color: var(--spirit-color-action-link-primary-active);
+                    color: var(--spirit-color-link-primary-state-active);
                 }
 
                 .link-secondary {
-                    color: var(--spirit-color-action-link-secondary-default);
+                    color: var(--spirit-color-link-secondary-state-default);
                 }
 
                 .link-secondary:hover {
-                    color: var(--spirit-color-action-link-secondary-hover);
+                    color: var(--spirit-color-link-secondary-state-hover);
                 }
 
                 .link-secondary:active {
-                    color: var(--spirit-color-action-link-secondary-active);
+                    color: var(--spirit-color-link-secondary-state-active);
                 }
 
                 .link-tertiary {
-                    color: var(--spirit-color-action-link-tertiary-default);
+                    color: var(--spirit-color-link-tertiary-state-default);
                 }
 
                 .link-tertiary:hover {
-                    color: var(--spirit-color-action-link-tertiary-hover);
+                    color: var(--spirit-color-link-tertiary-state-hover);
                 }
 
                 .link-tertiary:active {
-                    color: var(--spirit-color-action-link-tertiary-active);
+                    color: var(--spirit-color-link-tertiary-state-active);
                 }
             }
         }
diff --git a/packages/web/src/scss/tools/__tests__/_form-fields.test.scss b/packages/web/src/scss/tools/__tests__/_form-fields.test.scss
index 3ccf5f1d5d..a7c47e1a2e 100644
--- a/packages/web/src/scss/tools/__tests__/_form-fields.test.scss
+++ b/packages/web/src/scss/tools/__tests__/_form-fields.test.scss
@@ -14,10 +14,10 @@
 
             @include test.expect() {
                 .label-disabled-test {
-                    color: form-fields-theme.$label-color-disabled;
+                    color: form-fields-theme.$label-color-state-disabled;
 
                     &::after {
-                        color: form-fields-theme.$label-color-disabled;
+                        color: form-fields-theme.$label-color-state-disabled;
                     }
                 }
             }
@@ -34,7 +34,7 @@
 
             @include test.expect() {
                 .input-disabled-test {
-                    color: form-fields-theme.$input-color-disabled;
+                    color: form-fields-theme.$input-color-state-disabled;
                     cursor: cursors.$disabled;
                 }
             }
diff --git a/packages/web/src/scss/tools/_dictionaries.scss b/packages/web/src/scss/tools/_dictionaries.scss
index 42e9f72bc8..da60a9d223 100644
--- a/packages/web/src/scss/tools/_dictionaries.scss
+++ b/packages/web/src/scss/tools/_dictionaries.scss
@@ -101,7 +101,7 @@
 
             #{$selector}-#{string.unquote($variant-class)} {
                 color: var(
-                    --#{tokens.$token-prefix}color-action-link-#{string.unquote($dictionary-value)}-#{string.unquote(
+                    --#{tokens.$token-prefix}color-link-#{string.unquote($dictionary-value)}-state-#{string.unquote(
                             $state
                         )}
                 );
diff --git a/packages/web/src/scss/tools/_form-fields.scss b/packages/web/src/scss/tools/_form-fields.scss
index 2f6c0fe9b2..52461736fb 100644
--- a/packages/web/src/scss/tools/_form-fields.scss
+++ b/packages/web/src/scss/tools/_form-fields.scss
@@ -7,10 +7,10 @@
 @use 'typography';
 
 @mixin label-disabled() {
-    color: form-fields-theme.$label-color-disabled;
+    color: form-fields-theme.$label-color-state-disabled;
 
     &::after {
-        color: form-fields-theme.$label-color-disabled;
+        color: form-fields-theme.$label-color-state-disabled;
     }
 }
 
@@ -27,7 +27,7 @@
 }
 
 @mixin input-disabled() {
-    color: form-fields-theme.$input-color-disabled;
+    color: form-fields-theme.$input-color-state-disabled;
     cursor: cursors.$disabled;
 }
 
@@ -40,7 +40,7 @@
 }
 
 @mixin validation-text-disabled() {
-    color: form-fields-theme.$validation-text-color-disabled;
+    color: form-fields-theme.$validation-text-color-state-disabled;
 }
 
 @mixin inline-field-root() {
@@ -62,7 +62,7 @@
     @include typography.generate(form-fields-theme.$input-typography);
 
     display: inline-block;
-    color: form-fields-theme.$label-color-default;
+    color: form-fields-theme.$label-color-state-default;
 }
 
 @mixin box-field-label() {
@@ -70,7 +70,7 @@
 
     display: block;
     margin-bottom: form-fields-theme.$box-field-label-margin-bottom;
-    color: form-fields-theme.$label-color-default;
+    color: form-fields-theme.$label-color-state-default;
 }
 
 @mixin inline-field-input() {
@@ -87,12 +87,12 @@
 
     @media (hover: hover) {
         &:hover {
-            background-color: form-fields-theme.$input-background-color-hover;
+            background-color: form-fields-theme.$input-background-color-state-hover;
         }
     }
 
     &:active {
-        background-color: form-fields-theme.$input-background-color-active;
+        background-color: form-fields-theme.$input-background-color-state-active;
     }
 }
 
@@ -102,26 +102,26 @@
     display: block;
     width: 100%;
     padding: form-fields-theme.$box-field-input-padding-y form-fields-theme.$box-field-input-padding-x;
-    color: form-fields-theme.$box-field-input-color-default;
+    color: form-fields-theme.$box-field-input-color-state-default;
     border: form-fields-theme.$box-field-input-border-width form-fields-theme.$box-field-input-border-style
         form-fields-theme.$input-border-color;
     border-radius: form-fields-theme.$box-field-input-border-radius;
     background: form-fields-theme.$input-background-color;
 
     &::placeholder {
-        color: form-fields-theme.$box-field-input-placeholder-color-default;
+        color: form-fields-theme.$box-field-input-placeholder-color-state-default;
         opacity: 1;
     }
 
     @media (hover: hover) {
         &:hover {
-            background-color: form-fields-theme.$input-background-color-hover;
+            background-color: form-fields-theme.$input-background-color-state-hover;
         }
     }
 
     &:active,
     &:focus-within {
-        background-color: form-fields-theme.$input-background-color-active;
+        background-color: form-fields-theme.$input-background-color-state-active;
     }
 }
 
@@ -196,11 +196,11 @@
 @mixin box-field-disabled-input() {
     @include input-disabled();
 
-    border-color: form-fields-theme.$input-border-color-disabled;
-    background-color: form-fields-theme.$input-background-color-disabled;
+    border-color: form-fields-theme.$input-border-color-state-disabled;
+    background-color: form-fields-theme.$input-background-color-state-disabled;
 
     &::placeholder {
-        color: form-fields-theme.$box-field-input-placeholder-color-disabled;
+        color: form-fields-theme.$box-field-input-placeholder-color-state-disabled;
     }
 }
 
@@ -210,21 +210,21 @@
     padding: form-fields-theme.$item-padding-y form-fields-theme.$item-padding-x;
     margin-block: 0;
     border-radius: form-fields-theme.$item-border-radius;
-    background-color: form-fields-theme.$item-background-color-default;
+    background-color: form-fields-theme.$item-background-color-state-default;
 
     @media (hover: hover) {
         &:hover {
-            background-color: form-fields-theme.$item-background-color-hover;
+            background-color: form-fields-theme.$item-background-color-state-hover;
         }
     }
 
     &:active {
-        background-color: form-fields-theme.$item-background-color-active;
+        background-color: form-fields-theme.$item-background-color-state-active;
     }
 }
 
 @mixin item-disabled() {
-    background-color: form-fields-theme.$item-background-color-default;
+    background-color: form-fields-theme.$item-background-color-state-default;
 }
 
 @mixin item-validation-text() {
@@ -234,7 +234,7 @@
 @mixin item-label() {
     @include typography.generate(form-fields-theme.$item-label-typography);
 
-    color: form-fields-theme.$label-color-default;
+    color: form-fields-theme.$label-color-state-default;
 }
 
 @mixin helper-text() {
@@ -242,11 +242,11 @@
 
     display: block;
     margin-top: form-fields-theme.$helper-text-margin-top;
-    color: form-fields-theme.$helper-text-color-default;
+    color: form-fields-theme.$helper-text-color-state-default;
 }
 
 @mixin helper-text-disabled() {
-    color: form-fields-theme.$helper-text-color-disabled;
+    color: form-fields-theme.$helper-text-color-state-disabled;
 }
 
 @mixin item-helper-text() {
diff --git a/packages/web/src/scss/tools/_links.scss b/packages/web/src/scss/tools/_links.scss
index db1d3e59ff..9376b89d4d 100644
--- a/packages/web/src/scss/tools/_links.scss
+++ b/packages/web/src/scss/tools/_links.scss
@@ -6,7 +6,7 @@
     text-underline-offset: links.$text-underline-offset;
 
     @if $set-color {
-        color: tokens.$action-link-primary-default;
+        color: tokens.$link-primary-state-default;
     }
 
     @media (hover: hover) {
@@ -14,7 +14,7 @@
             text-decoration: links.$text-decoration-hover;
 
             @if $set-color {
-                color: tokens.$action-link-primary-hover;
+                color: tokens.$link-primary-state-hover;
             }
         }
     }
@@ -23,7 +23,7 @@
         text-decoration: links.$text-decoration-hover;
 
         @if $set-color {
-            color: tokens.$action-link-primary-active;
+            color: tokens.$link-primary-state-active;
         }
     }
 }
diff --git a/packages/web/src/scss/tools/_themes.scss b/packages/web/src/scss/tools/_themes.scss
index a1fb8ba75c..12e3312019 100644
--- a/packages/web/src/scss/tools/_themes.scss
+++ b/packages/web/src/scss/tools/_themes.scss
@@ -64,13 +64,13 @@
 
     // Toggle
     --#{tokens.$token-prefix}toggle-input-mark-background-image-url: #{svg.escape(
-            url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path fill="#{map.get($themed-tokens, colors, action, toggle, unselected-content)}" fill-rule="evenodd" d="M20 0H0v20h20V0Zm-7.302 6.177a.58.58 0 0 1 .823 0 .585.585 0 0 1 0 .816l-2.853 2.853 2.853 2.852a.58.58 0 1 1-.823.823l-2.852-2.853-2.853 2.853a.58.58 0 1 1-.822-.823l2.852-2.852-2.852-2.853a.58.58 0 1 1 .822-.822l2.853 2.852 2.852-2.846Z" clip-rule="evenodd"/></svg>')
+            url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path fill="#{map.get($themed-tokens, colors, component, toggle, unselected-content)}" fill-rule="evenodd" d="M20 0H0v20h20V0Zm-7.302 6.177a.58.58 0 0 1 .823 0 .585.585 0 0 1 0 .816l-2.853 2.853 2.853 2.852a.58.58 0 1 1-.823.823l-2.852-2.853-2.853 2.853a.58.58 0 1 1-.822-.823l2.852-2.852-2.852-2.853a.58.58 0 1 1 .822-.822l2.853 2.852 2.852-2.846Z" clip-rule="evenodd"/></svg>')
         )};
     --#{tokens.$token-prefix}toggle-input-mark-disabled-background-image-url: #{svg.escape(
             url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path fill="#{map.get($themed-tokens, colors, disabled, foreground)}" fill-rule="evenodd" d="M20 0H0v20h20V0Zm-7.302 6.177a.58.58 0 0 1 .823 0 .585.585 0 0 1 0 .816l-2.853 2.853 2.853 2.852a.58.58 0 1 1-.823.823l-2.852-2.853-2.853 2.853a.58.58 0 1 1-.822-.823l2.852-2.852-2.852-2.853a.58.58 0 1 1 .822-.822l2.853 2.852 2.852-2.846Z" clip-rule="evenodd"/></svg>')
         )};
     --#{tokens.$token-prefix}toggle-input-mark-checked-background-image-url: #{svg.escape(
-            url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path fill="#{map.get($themed-tokens, colors, action, toggle, selected-content)}" fill-rule="evenodd" d="M20 0H0v20h20V0ZM5.987 9.904l2.042 2.042 5.775-5.775a.574.574 0 0 1 .817 0 .574.574 0 0 1 0 .816l-6.184 6.178a.58.58 0 0 1-.822 0L5.17 10.72a.574.574 0 0 1 0-.817.574.574 0 0 1 .816 0Z" clip-rule="evenodd"/></svg>')
+            url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path fill="#{map.get($themed-tokens, colors, component, toggle, selected-content)}" fill-rule="evenodd" d="M20 0H0v20h20V0ZM5.987 9.904l2.042 2.042 5.775-5.775a.574.574 0 0 1 .817 0 .574.574 0 0 1 0 .816l-6.184 6.178a.58.58 0 0 1-.822 0L5.17 10.72a.574.574 0 0 1 0-.817.574.574 0 0 1 .816 0Z" clip-rule="evenodd"/></svg>')
         )};
     --#{tokens.$token-prefix}toggle-input-mark-checked-disabled-background-image-url: #{svg.escape(
             url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path fill="#{map.get($themed-tokens, colors, disabled, foreground)}" fill-rule="evenodd" d="M20 0H0v20h20V0ZM5.987 9.904l2.042 2.042 5.775-5.775a.574.574 0 0 1 .817 0 .574.574 0 0 1 0 .816l-6.184 6.178a.58.58 0 0 1-.822 0L5.17 10.72a.574.574 0 0 1 0-.817.574.574 0 0 1 .816 0Z" clip-rule="evenodd"/></svg>')
diff --git a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-basic-chromium-linux.png b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-basic-chromium-linux.png
index 8e0872d527..2863107489 100644
Binary files a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-basic-chromium-linux.png and b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-basic-chromium-linux.png differ
diff --git a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-closed-modals-chromium-linux.png b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-closed-modals-chromium-linux.png
index 67f5a1a9ee..b6bf5945fe 100644
Binary files a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-closed-modals-chromium-linux.png and b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-closed-modals-chromium-linux.png differ
diff --git a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-disabled-backdrop-click-chromium-linux.png b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-disabled-backdrop-click-chromium-linux.png
index 09a6ccf454..d9f2799e23 100644
Binary files a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-disabled-backdrop-click-chromium-linux.png and b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-disabled-backdrop-click-chromium-linux.png differ
diff --git a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-hidden-close-button-chromium-linux.png b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-hidden-close-button-chromium-linux.png
index 2188530473..0bf2410973 100644
Binary files a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-hidden-close-button-chromium-linux.png and b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-hidden-close-button-chromium-linux.png differ
diff --git a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-stacking-chromium-linux.png b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-stacking-chromium-linux.png
index 85fe41efac..907853e0bf 100644
Binary files a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-stacking-chromium-linux.png and b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-stacking-chromium-linux.png differ
diff --git a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-custom-height-chromium-linux.png b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-custom-height-chromium-linux.png
index 201c548a0e..17f542e69c 100644
Binary files a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-custom-height-chromium-linux.png and b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-custom-height-chromium-linux.png differ
diff --git a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-dropdown-chromium-linux.png b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-dropdown-chromium-linux.png
index c76075ae04..f3984b48fe 100644
Binary files a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-dropdown-chromium-linux.png and b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-dropdown-chromium-linux.png differ
diff --git a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-form-chromium-linux.png b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-form-chromium-linux.png
index f019a87556..ac009da96b 100644
Binary files a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-form-chromium-linux.png and b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-form-chromium-linux.png differ
diff --git a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-scrolling-inside-chromium-linux.png b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-scrolling-inside-chromium-linux.png
index 5d0885deca..af7edfbe56 100644
Binary files a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-scrolling-inside-chromium-linux.png and b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-scrolling-inside-chromium-linux.png differ
diff --git a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-scrollview-chromium-linux.png b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-scrollview-chromium-linux.png
index 54218e4a76..69c216a7b8 100644
Binary files a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-scrollview-chromium-linux.png and b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-scrollview-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/alert-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/alert-chromium-linux.png
index 0d23cb883a..9b97673dbb 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/alert-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/alert-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/button-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/button-chromium-linux.png
index a719106540..9407f65225 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/button-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/button-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/buttonlink-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/buttonlink-chromium-linux.png
index d33511832c..017e623ef3 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/buttonlink-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/buttonlink-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/checkbox-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/checkbox-chromium-linux.png
index 5c193d936e..14a5f95413 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/checkbox-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/checkbox-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/collapse-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/collapse-chromium-linux.png
index 810d47d9e9..bf08b874bb 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/collapse-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/collapse-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/dropdown-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/dropdown-chromium-linux.png
index cdd1f187f7..7464183c33 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/dropdown-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/dropdown-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/fieldgroup-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/fieldgroup-chromium-linux.png
index cdc7a4160a..c340399ec5 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/fieldgroup-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/fieldgroup-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/fileuploader-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/fileuploader-chromium-linux.png
index c53ef5b361..64b9187f93 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/fileuploader-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/fileuploader-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/header-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/header-chromium-linux.png
index 54d77114ef..5e0cd25809 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/header-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/header-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/link-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/link-chromium-linux.png
index 4f2184e0ab..e95c175a44 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/link-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/link-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/modal-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/modal-chromium-linux.png
index 67f5a1a9ee..b6bf5945fe 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/modal-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/modal-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/pagination-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/pagination-chromium-linux.png
index 57b46b942d..0ecd28d849 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/pagination-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/pagination-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/pill-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/pill-chromium-linux.png
index 6969406bd6..a10a1cb572 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/pill-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/pill-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/radio-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/radio-chromium-linux.png
index f50c0185a3..cf9e91b1ad 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/radio-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/radio-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/select-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/select-chromium-linux.png
index 8d8db7bbff..c10afcd7d9 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/select-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/select-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/stack-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/stack-chromium-linux.png
index c6fea0ad08..82e9be7fc4 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/stack-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/stack-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/tag-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/tag-chromium-linux.png
index 819429e486..8cf0e394b2 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/tag-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/tag-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/textarea-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/textarea-chromium-linux.png
index 3f67ac97a3..dd56c9d537 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/textarea-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/textarea-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/textfield-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/textfield-chromium-linux.png
index 9c44568ebf..3b69012e1c 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/textfield-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/textfield-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/toast-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/toast-chromium-linux.png
index 5674f57ca0..9dce5320ee 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/toast-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/toast-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/tooltip-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/tooltip-chromium-linux.png
index 9a76fe4f91..8e20382759 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/tooltip-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/tooltip-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-actionlayout-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-actionlayout-chromium-linux.png
index ce44031730..8ba0c68369 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-actionlayout-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-actionlayout-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-emptystate-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-emptystate-chromium-linux.png
index 320a23417d..96c5a12eba 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-emptystate-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-emptystate-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-section-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-section-chromium-linux.png
index a8007378ff..71bc533948 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-section-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-section-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-slider-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-slider-chromium-linux.png
index ce31840481..5a15ca54ee 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-slider-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-slider-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-toggle-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-toggle-chromium-linux.png
index 68c41b83e6..1f45d43552 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-toggle-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-toggle-chromium-linux.png differ
diff --git a/tests/e2e/demo-homepages.spec.ts-snapshots/web-chromium-linux.png b/tests/e2e/demo-homepages.spec.ts-snapshots/web-chromium-linux.png
index cda1199a7a..f96cf36c72 100644
Binary files a/tests/e2e/demo-homepages.spec.ts-snapshots/web-chromium-linux.png and b/tests/e2e/demo-homepages.spec.ts-snapshots/web-chromium-linux.png differ
diff --git a/tests/e2e/demo-homepages.spec.ts-snapshots/web-react-chromium-linux.png b/tests/e2e/demo-homepages.spec.ts-snapshots/web-react-chromium-linux.png
index 3f3e3ac301..4f2cd16201 100644
Binary files a/tests/e2e/demo-homepages.spec.ts-snapshots/web-react-chromium-linux.png and b/tests/e2e/demo-homepages.spec.ts-snapshots/web-react-chromium-linux.png differ