diff --git a/packages/design-tokens/src/css/brand-colors.css b/packages/design-tokens/src/css/brand-colors.css
index b9979d80..4bfe22ee 100644
--- a/packages/design-tokens/src/css/brand-colors.css
+++ b/packages/design-tokens/src/css/brand-colors.css
@@ -7,17 +7,17 @@
 
 :root {
   /* Grey */
-  --brand-colors-grey-grey100: #dadce5;
-  --brand-colors-grey-grey200: #b7bbc8;
-  --brand-colors-grey-grey300: #9ca1af;
-  --brand-colors-grey-grey400: #858b9a;
-  --brand-colors-grey-grey500: #686e7d;
-  --brand-colors-grey-grey600: #4b505c;
-  --brand-colors-grey-grey700: #2a2c32;
-  --brand-colors-grey-grey800: #232426;
-  --brand-colors-grey-grey900: #121314;
+  --brand-colors-grey-grey100: #ededed;
+  --brand-colors-grey-grey200: #babbbe;
+  --brand-colors-grey-grey300: #a3a4a7;
+  --brand-colors-grey-grey400: #949596;
+  --brand-colors-grey-grey500: #66676a;
+  --brand-colors-grey-grey600: #47484a;
+  --brand-colors-grey-grey700: #252628;
+  --brand-colors-grey-grey800: #1c1d1f;
+  --brand-colors-grey-grey900: #131416;
   --brand-colors-grey-grey1000: #000000;
-  --brand-colors-grey-grey050: #f3f5f9;
+  --brand-colors-grey-grey050: #f3f3f4;
   --brand-colors-grey-grey000: #ffffff;
   --brand-colors-grey-grey025: #f7f9fc;
   /* Blue */
diff --git a/packages/design-tokens/src/css/dark-theme-colors.css b/packages/design-tokens/src/css/dark-theme-colors.css
index 39c2eee1..ccda3044 100644
--- a/packages/design-tokens/src/css/dark-theme-colors.css
+++ b/packages/design-tokens/src/css/dark-theme-colors.css
@@ -3,60 +3,63 @@
  */
 [data-theme='dark'],
 .dark {
-  /* For default neutral surface (#121314) */
+  /* Background default should be the darkest shade, 0 elevation.
+  Section is +1 elevation, subsection is +2 elevation.
+  Alternative should be deprecated. */
   --color-background-default: var(--brand-colors-grey-grey900);
-  /* For sunken neutral surface below background/default (#000000) */
-  --color-background-alternative: var(--brand-colors-grey-grey1000);
-  /* For section bg usually over background/default (#202123) */
   --color-background-section: var(--brand-colors-grey-grey800);
-  /* For subsection bg usually over background/section (#2A2C32) */
   --color-background-subsection: var(--brand-colors-grey-grey700);
-  /* For muted neutral surface (#E0E5FF14) */
-  --color-background-muted: #e0e5ff14;
-  /* Hover state surface for background/default (#1a1b1c) */
-  --color-background-default-hover: #1a1b1c;
-  /* Pressed state surface for background/default (#222424) */
-  --color-background-default-pressed: #222424;
+  --color-background-alternative: var(--brand-colors-grey-grey1000);
+
+  /* Applied to interactive elements, such as buttons.
+  For dark mode, we apply pure white with 4% opacity so these
+  tokens inherit the background hue of 264.5. */
+  --color-background-muted: #ffffff0a;
+  --color-background-muted-hover: #ffffff14;
+  --color-background-muted-pressed: #ffffff1f;
+
+  /* Ensures visual consistency with section and subsection. */
+  --color-background-default-hover: var(--brand-colors-grey-grey800);
+  --color-background-default-pressed: var(--brand-colors-grey-grey700);
+
   /* Hover state surface for background/alternative (#0d0d0e) */
   --color-background-alternative-hover: #0d0d0e;
-  /* Pressed state surface for background/alternative (#161617) */
   --color-background-alternative-pressed: #161617;
-  /* Hover state surface for background/muted (#E0E5FF26) */
-  --color-background-muted-hover: #e0e5ff26;
-  /* Pressed state surface for background/muted (#E0E5FF33) */
-  --color-background-muted-pressed: #e0e5ff33;
-  /* General purpose hover state tint (#dadce50a) */
-  --color-background-hover: #dadce50a;
-  /* General purpose pressed state tint (#dadce514) */
-  --color-background-pressed: #dadce514;
-  /* Default color for text (#ffffff) */
+
+  /* These have opacities of pure white for general usage. 
+  We set 8% for hover and 12% for pressed so these tokens pick up
+  background hues and are consistent with +1 and +2 elevations.*/
+  --color-background-hover: #ffffff0a;
+  --color-background-pressed: #ffffff1f;
+
+  /* These are our content colors. 
+  Contrast ratio of alternative: 7.4 on default, 8.5 on section. 
+  Contrast ratio of muted: 2.0 on default, 1.8 on section.*/
   --color-text-default: var(--brand-colors-grey-grey000);
-  /* Softer color for text (#858b9a) */
   --color-text-alternative: var(--brand-colors-grey-grey300);
-  /* Muted color for text (Not accessible) (#686e7d) */
   --color-text-muted: var(--brand-colors-grey-grey600);
-  /* Default color for icons (#ffffff) */
+
   --color-icon-default: var(--brand-colors-grey-grey000);
-  /* Hover state surface for icon.default (#f0f0f0) */
   --color-icon-default-hover: #f0f0f0;
-  /* Pressed state surface for icon.default (#d0d0d0) */
   --color-icon-default-pressed: #d0d0d0;
-  /* Softer color for icons (#858b9a) */
+
   --color-icon-alternative: var(--brand-colors-grey-grey300);
-  /* Muted color for icons (Not accessible) (#686e7d) */
   --color-icon-muted: var(--brand-colors-grey-grey600);
-  /* For elements placed on top of icon.default fill (#121314) */
   --color-icon-inverse: var(--brand-colors-grey-grey900);
-  /* Default color for borders (#9ca1af) */
-  --color-border-default: var(--brand-colors-grey-grey400);
-  /* Muted color for borders (#858b9a33) */
-  --color-border-muted: #858b9a33;
-  /* Default color for overlays (scrim) (#00000099) */
-  --color-overlay-default: #00000099;
-  /* Dimmer color for overlays (scrim) (black-80%) */
-  --color-overlay-alternative: #000000cc;
-  /* For elements placed on top of overlay/alternative (#ffffff) */
+
+  /* Contrast of border-default: 3:3 on bg-default, 3.0 on section.
+  We use 8% opacify of pure white for border-muted so it maintains
+  sufficient contrast on bg-default and bg-section.*/
+  --color-border-default: var(--brand-colors-grey-grey500);
+  --color-border-muted: #ffffff14;
+
+  /* Derived from the same hue as bg-default, 264.5, for visual
+  consistency. Ensures we don't have too much "red".
+  Opacities are 72% and 84% for default and alternative. */
+  --color-overlay-default: #030304b8;
+  --color-overlay-alternative: #030304d6;
   --color-overlay-inverse: var(--brand-colors-grey-grey000);
+
   /* For primary semantic elements: interactive, active, selected (#8b99ff) */
   --color-primary-default: var(--brand-colors-blue-blue300);
   /* Stronger color for primary semantic elements (#adb6fe) */
diff --git a/packages/design-tokens/src/css/light-theme-colors.css b/packages/design-tokens/src/css/light-theme-colors.css
index 514a9684..5d8107ed 100644
--- a/packages/design-tokens/src/css/light-theme-colors.css
+++ b/packages/design-tokens/src/css/light-theme-colors.css
@@ -4,60 +4,64 @@
 :root,
 [data-theme='light'],
 .light {
-  /* For default neutral surface (#ffffff) */
+  /* Background default should be the darkest shade, 0 elevation.
+  Section is +1 elevation, subsection is +2 elevation.
+  Alternative should be deprecated. */
   --color-background-default: var(--brand-colors-grey-grey000);
-  /* For sunken neutral surface below background/default (#f3f5f9) */
-  --color-background-alternative: var(--brand-colors-grey-grey050);
-  /* For section bg usually over background/default (#f3f5f9) */
   --color-background-section: var(--brand-colors-grey-grey050);
-  /* For subsection bg usually over background/section (#ffffff) */
   --color-background-subsection: var(--brand-colors-grey-grey000);
-  /* For muted neutral surface (#3c4d9d0f) */
-  --color-background-muted: #3c4d9d0f;
-  /* Hover state surface for background/default (#f6f6f7) */
-  --color-background-default-hover: #f6f6f7;
-  /* Pressed state surface for background/default (#ebecef) */
-  --color-background-default-pressed: #ebecef;
-  /* Hover state surface for background/alternative (#ebedf1) */
+  --color-background-alternative: var(--brand-colors-grey-grey050);
+
+  /* Applied to interactive elements, such as buttons. 
+  For light mode, we use 8% increments of opacity to offer
+  sufficient affordance for usability. */
+  --color-background-muted: #b4b4b528;
+  --color-background-muted-hover: #b4b4b53d;
+  --color-background-muted-pressed: #b4b4b552;
+
+  /* Ensures visual consistency with section and subsection. */
+  --color-background-default-hover: var(--brand-colors-grey-grey050);
+  --color-background-default-pressed: var(--brand-colors-grey-grey100);
+
+  /* These colors should be deprecated eventuallly for simplicty */
   --color-background-alternative-hover: #ebedf1;
-  /* Pressed state surface for background/alternative (#e1e4ea) */
   --color-background-alternative-pressed: #e1e4ea;
-  /* Hover state surface for background/muted (#3c4d9d1a) */
-  --color-background-muted-hover: #3c4d9d1a;
-  /* Pressed state surface for background/muted (#3c4d9d26) */
-  --color-background-muted-pressed: #3c4d9d26;
-  /* General purpose hover state tint (#858b9a14) */
-  --color-background-hover: #858b9a14;
-  /* General purpose pressed state tint (#858b9a29) */
-  --color-background-pressed: #858b9a29;
-  /* Default color for text (#121314) */
+
+  /* These have opacities of pure white for general usage. 
+  Visually, they align with section and subsection.*/
+  --color-background-hover: #b4b4b528;
+  --color-background-pressed: #b4b4b53d;
+
+  /* These are our content colors. 
+  Contrast ratio of alternative: 5.7 on default, 5.1 on section. 
+  Contrast ratio of muted: 1.9 on default, 1.7 on section.*/
   --color-text-default: var(--brand-colors-grey-grey900);
-  /* Softer color for text (#686e7d) */
   --color-text-alternative: var(--brand-colors-grey-grey500);
-  /* Muted color for text (Not accessible) (#9ca1af) */
   --color-text-muted: var(--brand-colors-grey-grey200);
-  /* Default color for icons (#121314) */
+
   --color-icon-default: var(--brand-colors-grey-grey900);
-  /* Hover state surface for icon.default (#2a2b2c) */
   --color-icon-default-hover: #2a2b2c;
-  /* Pressed state surface for icon.default (#414243) */
   --color-icon-default-pressed: #414243;
-  /* Softer color for icons (#686e7d) */
+
   --color-icon-alternative: var(--brand-colors-grey-grey500);
-  /* Muted color for icons (Not accessible) (#9ca1af) */
   --color-icon-muted: var(--brand-colors-grey-grey200);
-  /* For elements placed on top of icon.default fill (#ffffff) */
-  --color-icon-inverse: var(--brand-colors-grey-grey000);
-  /* Default color for borders (#b7bbc8) */
-  --color-border-default: var(--brand-colors-grey-grey200);
-  /* Muted color for borders (b7bbc8-40%) */
-  --color-border-muted: #b7bbc866;
-  /* Default color for overlays (scrim) (#3f434a66) */
-  --color-overlay-default: #3f434a66;
-  /* Dimmer color for overlays (scrim) (black-80%) */
-  --color-overlay-alternative: #000000cc;
-  /* For elements placed on top of overlay/alternative (#ffffff) */
+  --color-icon-inverse: var(--brand-colors-grey-grey900);
+
+  /* Border default has a 3:3 ratio when applied on bg-default
+  and 3.0 on section. We use opacity for border-muted so it
+  maintains sufficient contrast on bg-default and bg-section.*/
+  --color-border-default: var(--brand-colors-grey-grey400);
+  --color-border-muted: #b4b4b566;
+
+  /* Derived from the background hue, 264.5, for consistency.
+  Opacity for default is 36%, alternative is 56%. Default is meant
+  to be the inverse of dark mode so the layering feels consistent
+  across themes. Alternative is relatively darker in light mode for
+  better contrast.*/
+  --color-overlay-default: #0a0d135c;
+  --color-overlay-alternative: #0a0d138f;
   --color-overlay-inverse: var(--brand-colors-grey-grey000);
+
   /* For primary semantic elements: interactive, active, selected (#4459ff) */
   --color-primary-default: var(--brand-colors-blue-blue500);
   /* Stronger color for primary semantic elements (#2c3dc5) */
diff --git a/packages/design-tokens/src/figma/brandColors.json b/packages/design-tokens/src/figma/brandColors.json
index f694d6dd..354187db 100644
--- a/packages/design-tokens/src/figma/brandColors.json
+++ b/packages/design-tokens/src/figma/brandColors.json
@@ -1,55 +1,55 @@
 {
   "grey": {
     "100": {
-      "value": "#dadce5",
+      "value": "#ededed",
       "type": "color",
       "parent": "Brand Colors/v2- brand evo (preview)",
       "description": ""
     },
     "200": {
-      "value": "#b7bbc8",
+      "value": "#babbbe",
       "type": "color",
       "parent": "Brand Colors/v2- brand evo (preview)",
       "description": ""
     },
     "300": {
-      "value": "#9ca1af",
+      "value": "#a3a4a7",
       "type": "color",
       "parent": "Brand Colors/v2- brand evo (preview)",
       "description": ""
     },
     "400": {
-      "value": "#858b9a",
+      "value": "#949596",
       "type": "color",
       "parent": "Brand Colors/v2- brand evo (preview)",
       "description": ""
     },
     "500": {
-      "value": "#686e7d",
+      "value": "#66676a",
       "type": "color",
       "parent": "Brand Colors/v2- brand evo (preview)",
       "description": ""
     },
     "600": {
-      "value": "#4b505c",
+      "value": "#47484a",
       "type": "color",
       "parent": "Brand Colors/v2- brand evo (preview)",
       "description": ""
     },
     "700": {
-      "value": "#2a2c32",
+      "value": "#252628",
       "type": "color",
       "parent": "Brand Colors/v2- brand evo (preview)",
       "description": ""
     },
     "800": {
-      "value": "#232426",
+      "value": "#1c1d1f",
       "type": "color",
       "parent": "Brand Colors/v2- brand evo (preview)",
       "description": ""
     },
     "900": {
-      "value": "#121314",
+      "value": "#131416",
       "type": "color",
       "parent": "Brand Colors/v2- brand evo (preview)",
       "description": ""
@@ -61,7 +61,7 @@
       "description": ""
     },
     "050": {
-      "value": "#f3f5f9",
+      "value": "#f3f3f4",
       "type": "color",
       "parent": "Brand Colors/v2- brand evo (preview)",
       "description": ""
diff --git a/packages/design-tokens/src/figma/darkTheme.json b/packages/design-tokens/src/figma/darkTheme.json
index 771cefe4..ae2ba337 100644
--- a/packages/design-tokens/src/figma/darkTheme.json
+++ b/packages/design-tokens/src/figma/darkTheme.json
@@ -25,19 +25,19 @@
       "description": "For subsection bg usually over background/section."
     },
     "muted": {
-      "value": "#e0e5ff14",
+      "value": "#ffffff0a",
       "type": "color",
       "parent": "Theme Colors/Dark mode",
       "description": "For muted neutral surface."
     },
     "default-hover": {
-      "value": "#1a1b1c",
+      "value": "{grey.800}",
       "type": "color",
       "parent": "Theme Colors/Dark mode",
       "description": "Hover state surface for background/default."
     },
     "default-pressed": {
-      "value": "#222424",
+      "value": "{grey.700}",
       "type": "color",
       "parent": "Theme Colors/Dark mode",
       "description": "Pressed state surface for background/default."
@@ -55,25 +55,25 @@
       "description": "Pressed state surface for background/alternative."
     },
     "muted-hover": {
-      "value": "#e0e5ff26",
+      "value": "#ffffff14",
       "type": "color",
       "parent": "Theme Colors/Dark mode",
       "description": "Hover state surface for background/muted."
     },
     "muted-pressed": {
-      "value": "#e0e5ff33",
+      "value": "#ffffff1f",
       "type": "color",
       "parent": "Theme Colors/Dark mode",
       "description": "Pressed state surface for background/muted."
     },
     "hover": {
-      "value": "#dadce50a",
+      "value": "#ffffff0a",
       "type": "color",
       "parent": "Theme Colors/Dark mode",
       "description": "General purpose hover state tint."
     },
     "pressed": {
-      "value": "#dadce514",
+      "value": "#ffffff1f",
       "type": "color",
       "parent": "Theme Colors/Dark mode",
       "description": "General purpose pressed state tint."
@@ -139,13 +139,13 @@
   },
   "border": {
     "default": {
-      "value": "{grey.400}",
+      "value": "{grey.500}",
       "type": "color",
       "parent": "Theme Colors/Dark mode",
       "description": "Default color for borders."
     },
     "muted": {
-      "value": "#858b9a33",
+      "value": "#ffffff14",
       "type": "color",
       "parent": "Theme Colors/Dark mode",
       "description": "Muted color for borders."
@@ -153,13 +153,13 @@
   },
   "overlay": {
     "default": {
-      "value": "#00000099",
+      "value": "#030304b8",
       "type": "color",
       "parent": "Theme Colors/Dark mode",
       "description": "Default color for overlays(scrim)."
     },
     "alternative": {
-      "value": "#000000cc",
+      "value": "#030304d6",
       "type": "color",
       "parent": "Theme Colors/Dark mode",
       "description": "Dimmer color for overlays(scrim)."
diff --git a/packages/design-tokens/src/figma/lightTheme.json b/packages/design-tokens/src/figma/lightTheme.json
index 7ac97a11..a913603a 100644
--- a/packages/design-tokens/src/figma/lightTheme.json
+++ b/packages/design-tokens/src/figma/lightTheme.json
@@ -25,19 +25,19 @@
       "description": "For subsection bg usually over background/section."
     },
     "muted": {
-      "value": "#3c4d9d0f",
+      "value": "#b4b4b528",
       "type": "color",
       "parent": "Theme Colors/Light mode",
       "description": "For muted neutral surface."
     },
     "default-hover": {
-      "value": "#f6f6f7",
+      "value": "{grey.050}",
       "type": "color",
       "parent": "Theme Colors/Light mode",
       "description": "Hover state surface for background/default."
     },
     "default-pressed": {
-      "value": "#ebecef",
+      "value": "{grey.100}",
       "type": "color",
       "parent": "Theme Colors/Light mode",
       "description": "Pressed state surface for background/default."
@@ -55,25 +55,25 @@
       "description": "Pressed state surface for background/alternative."
     },
     "muted-hover": {
-      "value": "#3c4d9d1a",
+      "value": "#b4b4b53d",
       "type": "color",
       "parent": "Theme Colors/Light mode",
       "description": "Hover state surface for background/muted."
     },
     "muted-pressed": {
-      "value": "#3c4d9d26",
+      "value": "#b4b4b552",
       "type": "color",
       "parent": "Theme Colors/Light mode",
       "description": "Pressed state surface for background/muted."
     },
     "hover": {
-      "value": "#858b9a14",
+      "value": "#b4b4b528",
       "type": "color",
       "parent": "Theme Colors/Light mode",
       "description": "General purpose hover state tint."
     },
     "pressed": {
-      "value": "#858b9a29",
+      "value": "#b4b4b53d",
       "type": "color",
       "parent": "Theme Colors/Light mode",
       "description": "General purpose pressed state tint."
@@ -131,7 +131,7 @@
       "description": "Muted color for icons (Not accessible), following text/muted."
     },
     "inverse": {
-      "value": "{grey.000}",
+      "value": "{grey.900}",
       "type": "color",
       "parent": "Theme Colors/Light mode",
       "description": "For elements placed on top of icon.default fill."
@@ -139,13 +139,13 @@
   },
   "border": {
     "default": {
-      "value": "{grey.200}",
+      "value": "{grey.400}",
       "type": "color",
       "parent": "Theme Colors/Light mode",
       "description": "Default color for borders."
     },
     "muted": {
-      "value": "#b7bbc866",
+      "value": "#b4b4b566",
       "type": "color",
       "parent": "Theme Colors/Light mode",
       "description": "Muted color for borders."
@@ -153,13 +153,13 @@
   },
   "overlay": {
     "default": {
-      "value": "#3f434a66",
+      "value": "#0a0d135c",
       "type": "color",
       "parent": "Theme Colors/Light mode",
       "description": "Default color for overlays(scrim)."
     },
     "alternative": {
-      "value": "#000000cc",
+      "value": "#0a0d138f",
       "type": "color",
       "parent": "Theme Colors/Light mode",
       "description": "Dimmer color for overlays(scrim)."
diff --git a/packages/design-tokens/src/js/brandColor/brandColor.ts b/packages/design-tokens/src/js/brandColor/brandColor.ts
index 4c0ca11f..9cbb6f34 100644
--- a/packages/design-tokens/src/js/brandColor/brandColor.ts
+++ b/packages/design-tokens/src/js/brandColor/brandColor.ts
@@ -2,27 +2,27 @@ import type { BrandColor } from './brandColor.types';
 
 export const brandColor: BrandColor = {
   // Grey
-  grey100: '#dadce5',
+  grey100: '#ededed',
   // Grey
-  grey200: '#b7bbc8',
+  grey200: '#babbbe',
   // Grey
-  grey300: '#9ca1af',
+  grey300: '#a3a4a7',
   // Grey
-  grey400: '#858b9a',
+  grey400: '#949596',
   // Grey
-  grey500: '#686e7d',
+  grey500: '#66676a',
   // Grey
-  grey600: '#4b505c',
+  grey600: '#47484a',
   // Grey
-  grey700: '#2a2c32',
+  grey700: '#252628',
   // Grey
-  grey800: '#232426',
+  grey800: '#1c1d1f',
   // Grey
-  grey900: '#121314',
+  grey900: '#131416',
   // Grey
   grey1000: '#000000',
   // Grey
-  grey050: '#f3f5f9',
+  grey050: '#f3f3f4',
   // Grey
   grey000: '#ffffff',
   // Grey
diff --git a/packages/design-tokens/src/js/themes/darkTheme/colors.ts b/packages/design-tokens/src/js/themes/darkTheme/colors.ts
index ef45209b..bf5e0633 100644
--- a/packages/design-tokens/src/js/themes/darkTheme/colors.ts
+++ b/packages/design-tokens/src/js/themes/darkTheme/colors.ts
@@ -11,24 +11,24 @@ export const colors: ThemeColors = {
     section: brandColor.grey800,
     /** For subsection bg usually over background/section (#222325) */
     subsection: brandColor.grey700,
-    /** For muted neutral surface (#e0e5ff14) */
-    muted: '#e0e5ff14',
-    /** Hover state surface for background/default (#1a1b1c) */
-    defaultHover: '#1a1b1c',
-    /** Pressed state surface for background/default (#222424) */
-    defaultPressed: '#222424',
+    /** For muted neutral surface (#ffffff0a) */
+    muted: '#ffffff0a',
+    /** Hover state surface for background/default */
+    defaultHover: '#1c1d1f',
+    /** Pressed state surface for background/default */
+    defaultPressed: '#252628',
     /** Hover state surface for background/alternative (#0d0d0e) */
     alternativeHover: '#0d0d0e',
     /** Pressed state surface for background/alternative (#161617) */
     alternativePressed: '#161617',
-    /** Hover state surface for background/muted (#e0e5ff26) */
-    mutedHover: '#e0e5ff26',
-    /** Pressed state surface for background/muted (#e0e5ff33) */
-    mutedPressed: '#e0e5ff33',
-    /** General purpose hover state tint (#dadce50a) */
-    hover: '#dadce50a',
-    /** General purpose pressed state tint (#dadce514) */
-    pressed: '#dadce514',
+    /** Hover state surface for background/muted (#ffffff14) */
+    mutedHover: '#ffffff14',
+    /** Pressed state surface for background/muted (#ffffff1f) */
+    mutedPressed: '#ffffff1f',
+    /** General purpose hover state tint (#ffffff0a) */
+    hover: '#ffffff0a',
+    /** General purpose pressed state tint (#ffffff1f) */
+    pressed: '#ffffff1f',
   },
   text: {
     /** Default color for text (#FFFFFF) */
@@ -53,16 +53,16 @@ export const colors: ThemeColors = {
     inverse: brandColor.grey900,
   },
   border: {
-    /** Default color for borders (#9CA1AF) */
-    default: brandColor.grey400,
-    /** Muted color for borders (#858B9A33) */
-    muted: '#858b9a33',
+    /** Default color for borders */
+    default: brandColor.grey500,
+    /** Muted color for borders (#ffffff14) */
+    muted: '#ffffff14',
   },
   overlay: {
-    /** Default color for overlays (scrim) (#00000099) */
-    default: '#00000099',
-    /** Dimmer color for overlays (scrim) (#000000CC) */
-    alternative: '#000000cc',
+    /** Default color for overlays (scrim) (#030304b8) */
+    default: '#030304b8',
+    /** Dimmer color for overlays (scrim) (#030304d6) */
+    alternative: '#030304d6',
     /** For elements placed on top of overlay/alternative (#FFFFFF) */
     inverse: brandColor.grey000,
   },
diff --git a/packages/design-tokens/src/js/themes/darkTheme/darkTheme.test.ts b/packages/design-tokens/src/js/themes/darkTheme/darkTheme.test.ts
index a20b1ea4..4f7fd16a 100644
--- a/packages/design-tokens/src/js/themes/darkTheme/darkTheme.test.ts
+++ b/packages/design-tokens/src/js/themes/darkTheme/darkTheme.test.ts
@@ -6,10 +6,8 @@ const designTokens = require('../../../figma/tokens.json');
 
 describe('dark Theme', () => {
   it('color tokens are exported from darkTheme by checking a random color token', () => {
-    expect(
-      darkTheme.colors.background.defaultHover.toLowerCase(),
-    ).toStrictEqual(
-      jsonDarkThemeTokens.background['default-hover'].value.toLowerCase(),
+    expect(darkTheme.colors.background.muted.toLowerCase()).toStrictEqual(
+      jsonDarkThemeTokens.background.muted.value.toLowerCase(),
     );
   });
 
diff --git a/packages/design-tokens/src/js/themes/lightTheme/colors.ts b/packages/design-tokens/src/js/themes/lightTheme/colors.ts
index 436ab476..f46e4e93 100644
--- a/packages/design-tokens/src/js/themes/lightTheme/colors.ts
+++ b/packages/design-tokens/src/js/themes/lightTheme/colors.ts
@@ -11,24 +11,24 @@ export const colors: ThemeColors = {
     section: brandColor.grey050,
     /** For subsection bg usually over background/section (#FFFFFF) */
     subsection: brandColor.grey000,
-    /** For muted neutral surface (#3c4d9d0f) */
-    muted: '#3c4d9d0f',
-    /** Hover state surface for background/default (#f6f6f7) */
-    defaultHover: '#f6f6f7',
-    /** Pressed state surface for background/default (#ebecef) */
-    defaultPressed: '#ebecef',
+    /** For muted neutral surface (#b4b4b528) */
+    muted: '#b4b4b528',
+    /** Hover state surface for background/default */
+    defaultHover: '#f3f3f4',
+    /** Pressed state surface for background/default */
+    defaultPressed: '#ededed',
     /** Hover state surface for background/alternative (#ebedf1) */
     alternativeHover: '#ebedf1',
     /** Pressed state surface for background/alternative (#e1e4ea) */
     alternativePressed: '#e1e4ea',
-    /** Hover state surface for background/muted (#3c4d9d1a) */
-    mutedHover: '#3c4d9d1a',
-    /** Pressed state surface for background/muted (#3c4d9d26) */
-    mutedPressed: '#3c4d9d26',
-    /** General purpose hover state tint (#858b9a14) */
-    hover: '#858b9a14',
-    /** General purpose pressed state tint (#858b9a29) */
-    pressed: '#858b9a29',
+    /** Hover state surface for background/muted (#b4b4b53d) */
+    mutedHover: '#b4b4b53d',
+    /** Pressed state surface for background/muted (#b4b4b552) */
+    mutedPressed: '#b4b4b552',
+    /** General purpose hover state tint (#b4b4b528) */
+    hover: '#b4b4b528',
+    /** General purpose pressed state tint (#b4b4b53d) */
+    pressed: '#b4b4b53d',
   },
   text: {
     /** Default color for text (#121314) */
@@ -50,19 +50,19 @@ export const colors: ThemeColors = {
     /** Muted color for icons (Not accessible) (#9CA1AF) */
     muted: brandColor.grey200,
     /** For elements placed on top of icon.default fill (#FFFFFF) */
-    inverse: brandColor.grey000,
+    inverse: brandColor.grey900,
   },
   border: {
-    /** Default color for borders (#B7BBC8) */
-    default: brandColor.grey200,
-    /** Muted color for borders (#B7BBC866) */
-    muted: '#b7bbc866',
+    /** Default color for borders */
+    default: brandColor.grey400,
+    /** Muted color for borders (#b4b4b566) */
+    muted: '#b4b4b566',
   },
   overlay: {
-    /** Default color for overlays (scrim) (#3f434a66) */
-    default: '#3f434a66',
-    /** Dimmer color for overlays (scrim) (#000000CC) */
-    alternative: '#000000cc',
+    /** Default color for overlays (scrim) (#0a0d135c) */
+    default: '#0a0d135c',
+    /** Dimmer color for overlays (scrim) (#0a0d138f) */
+    alternative: '#0a0d138f',
     /** For elements placed on top of overlay/alternative (#FFFFFF) */
     inverse: brandColor.grey000,
   },
diff --git a/packages/design-tokens/src/js/themes/lightTheme/lightTheme.test.ts b/packages/design-tokens/src/js/themes/lightTheme/lightTheme.test.ts
index 6f3f4622..a8ae1cec 100644
--- a/packages/design-tokens/src/js/themes/lightTheme/lightTheme.test.ts
+++ b/packages/design-tokens/src/js/themes/lightTheme/lightTheme.test.ts
@@ -6,10 +6,8 @@ const designTokens = require('../../../figma/tokens.json');
 
 describe('Light Theme', () => {
   it('color tokens are exported from lightTheme by checking a random color token', () => {
-    expect(
-      lightTheme.colors.background.defaultHover.toLowerCase(),
-    ).toStrictEqual(
-      jsonLightThemeTokens.background['default-hover'].value.toLowerCase(),
+    expect(lightTheme.colors.background.muted.toLowerCase()).toStrictEqual(
+      jsonLightThemeTokens.background.muted.value.toLowerCase(),
     );
   });