diff --git a/polaris-react/src/components/ActionList/ActionList.scss b/polaris-react/src/components/ActionList/ActionList.scss
index a82a191e355..31450290f8e 100644
--- a/polaris-react/src/components/ActionList/ActionList.scss
+++ b/polaris-react/src/components/ActionList/ActionList.scss
@@ -51,9 +51,8 @@ $indented-item-width: calc(100% - #{$indented-item-margin});
   &:focus-visible:not(:active) {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include no-focus-ring;
-    background-color: var(--p-color-bg);
-    outline: var(--p-border-width-050) solid
-      var(--p-color-border-interactive-focus);
+    background-color: var(--p-color-bg-surface);
+    outline: var(--p-border-width-050) solid var(--p-color-border-focus);
   }
 
   &:visited {
@@ -83,13 +82,13 @@ $indented-item-width: calc(100% - #{$indented-item-margin});
     }
 
     &:hover {
-      background-color: var(--p-color-bg-critical-subdued-hover);
+      background-color: var(--p-color-bg-surface-critical-hover);
     }
 
     // stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY
     &:active,
     &.active {
-      background-color: var(--p-color-bg-critical-subdued-active);
+      background-color: var(--p-color-bg-surface-critical-active);
     }
   }
 
diff --git a/polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.scss b/polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.scss
index 38bdca8f067..dccb00629d8 100644
--- a/polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.scss
+++ b/polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.scss
@@ -4,7 +4,7 @@
   text-align: right;
   // stylelint-disable-next-line selector-no-qualifying-type -- override `.iconOnly` negative margins
   button[type='button'] {
-    background: var(--p-color-bg-strong);
+    background: var(--p-color-bg-fill-tertiary);
     border-radius: var(--p-border-radius-200);
     border: none;
     box-shadow: none;
@@ -12,22 +12,21 @@
 
     // stylelint-disable-next-line selector-max-specificity -- apply active styles
     &:active {
-      background: var(--p-color-bg-strong-active);
+      background: var(--p-color-bg-fill-tertiary-active);
     }
 
     // stylelint-disable-next-line selector-max-specificity -- apply focus styles
     &:focus:not(:active) {
       /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- button overrides */
       @include no-focus-ring;
-      outline: var(--p-border-width-050) solid
-        var(--p-color-border-interactive-focus);
+      outline: var(--p-border-width-050) solid var(--p-color-border-focus);
       outline-offset: var(--p-space-050);
-      background: var(--p-color-bg-strong-active);
+      background: var(--p-color-bg-fill-tertiary-active);
     }
 
     // stylelint-disable-next-line selector-max-specificity -- apply hover styles
     &:hover {
-      background: var(--p-color-bg-strong-hover);
+      background: var(--p-color-bg-fill-tertiary-hover);
     }
   }
 }
diff --git a/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss b/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss
index aad82144fa8..8027842b974 100644
--- a/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss
+++ b/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss
@@ -8,7 +8,7 @@
   button {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include focus-ring($border-width: 1px);
-    background-color: var(--p-color-bg-strong) !important;
+    background-color: var(--p-color-bg-fill-tertiary) !important;
     box-shadow: none !important;
     border: none;
     border-radius: var(--p-border-radius-200) !important;
@@ -16,27 +16,24 @@
     min-height: 28px;
 
     &:is(:hover, :focus) {
-      background-color: var(--p-color-bg-strong-hover) !important;
+      background-color: var(--p-color-bg-fill-tertiary-hover) !important;
     }
 
     &:active {
-      background-color: var(--p-color-bg-strong-active) !important;
+      background-color: var(--p-color-bg-fill-tertiary-active) !important;
       box-shadow: var(--p-shadow-inset-200) !important;
     }
 
     &:focus-visible {
       /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- focus styles */
       @include no-focus-ring;
-      outline: var(--p-border-width-050) solid
-        var(--p-color-border-interactive-focus);
+      outline: var(--p-border-width-050) solid var(--p-color-border-focus);
       outline-offset: var(--p-space-050);
     }
 
     // stylelint-disable-next-line selector-no-qualifying-type -- apply disabled styles
     &[aria-disabled='true'] {
-      background-color: var(
-        --p-color-bg-transparent-disabled-experimental
-      ) !important;
+      background-color: var(--p-color-bg-fill-disabled) !important;
     }
 
     @media #{$p-breakpoints-md-up} {
@@ -53,7 +50,7 @@
 
       // stylelint-disable-next-line selector-max-combinators, selector-max-type -- override svg fill
       svg {
-        fill: var(--p-color-icon-critical-strong-experimental);
+        fill: var(--p-color-text-critical);
       }
 
       // stylelint-disable-next-line selector-max-specificity -- apply hover styles
@@ -63,7 +60,7 @@
 
       // stylelint-disable-next-line selector-max-specificity -- apply focus/active styles
       &:active {
-        background-color: var(--p-color-bg-strong-active) !important;
+        background-color: var(--p-color-bg-fill-tertiary-active) !important;
       }
     }
   }
diff --git a/polaris-react/src/components/AppProvider/AppProvider.scss b/polaris-react/src/components/AppProvider/AppProvider.scss
index 80a2109c083..c851668d6a5 100644
--- a/polaris-react/src/components/AppProvider/AppProvider.scss
+++ b/polaris-react/src/components/AppProvider/AppProvider.scss
@@ -52,7 +52,7 @@ body {
   padding: 0;
 
   // hardcoding background color because app provider does not have access to
-  // the --p-color-bg-app custom property. Will revisit best way to address in
+  // the --p-color-bg custom property. Will revisit best way to address in
   // follow-up. PR convo for reference
   // https://github.com/Shopify/polaris-react/pull/4636/files#r748646268
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
diff --git a/polaris-react/src/components/AppProvider/AppProvider.tsx b/polaris-react/src/components/AppProvider/AppProvider.tsx
index 7b96a776461..54e5fcaf283 100644
--- a/polaris-react/src/components/AppProvider/AppProvider.tsx
+++ b/polaris-react/src/components/AppProvider/AppProvider.tsx
@@ -131,7 +131,7 @@ export class AppProvider extends Component<AppProviderProps, State> {
   }
 
   setBodyStyles = () => {
-    document.body.style.backgroundColor = 'var(--p-color-bg-app)';
+    document.body.style.backgroundColor = 'var(--p-color-bg)';
     document.body.style.color = 'var(--p-color-text)';
   };
 
diff --git a/polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.scss b/polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.scss
index a75470d3a92..99b850ce92f 100644
--- a/polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.scss
+++ b/polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.scss
@@ -46,7 +46,7 @@
   border-radius: var(--p-border-radius-200);
 
   &:hover {
-    background-color: var(--p-color-bg-hover);
+    background-color: var(--p-color-bg-surface-hover);
     text-decoration: none;
 
     @media (-ms-high-contrast: active) {
@@ -63,7 +63,7 @@
   }
 
   &:active {
-    background-color: var(--p-color-bg-active);
+    background-color: var(--p-color-bg-surface-active);
 
     svg {
       fill: var(--p-color-icon-emphasis);
diff --git a/polaris-react/src/components/Avatar/Avatar.scss b/polaris-react/src/components/Avatar/Avatar.scss
index 5cf12964008..1ac1b43e6e4 100644
--- a/polaris-react/src/components/Avatar/Avatar.scss
+++ b/polaris-react/src/components/Avatar/Avatar.scss
@@ -14,8 +14,8 @@
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   min-width: var(--pc-avatar-xs-size);
   max-width: 100%;
-  background: var(--p-color-avatar-background-experimental);
-  color: var(--p-color-avatar-color-experimental);
+  background: var(--p-color-avatar-bg-fill);
+  color: var(--p-color-avatar-text-on-bg-fill);
   user-select: none;
 
   &.imageHasLoaded {
@@ -83,52 +83,52 @@
 }
 
 .styleOne {
-  background: var(--p-color-avatar-style-one-background-experimental);
-  color: var(--p-color-avatar-style-one-color-experimental);
+  background: var(--p-color-avatar-one-bg-fill);
+  color: var(--p-color-avatar-one-text-on-bg-fill);
 
   svg,
   text {
-    color: var(--p-color-avatar-style-one-color-experimental);
+    color: var(--p-color-avatar-one-text-on-bg-fill);
   }
 }
 
 .styleTwo {
-  background: var(--p-color-avatar-style-two-background-experimental);
-  color: var(--p-color-avatar-style-two-color-experimental);
+  background: var(--p-color-avatar-two-bg-fill);
+  color: var(--p-color-avatar-two-text-on-bg-fill);
 
   svg,
   text {
-    color: var(--p-color-avatar-style-two-color-experimental);
+    color: var(--p-color-avatar-two-text-on-bg-fill);
   }
 }
 
 .styleThree {
-  background: var(--p-color-avatar-style-three-background-experimental);
-  color: var(--p-color-avatar-style-three-color-experimental);
+  background: var(--p-color-avatar-three-bg-fill);
+  color: var(--p-color-avatar-three-text-on-bg-fill);
 
   svg,
   text {
-    color: var(--p-color-avatar-style-three-color-experimental);
+    color: var(--p-color-avatar-three-text-on-bg-fill);
   }
 }
 
 .styleFour {
-  background: var(--p-color-avatar-style-four-background-experimental);
-  color: var(--p-color-avatar-style-four-color-experimental);
+  background: var(--p-color-avatar-four-bg-fill);
+  color: var(--p-color-avatar-four-text-on-bg-fill);
 
   svg,
   text {
-    color: var(--p-color-avatar-style-four-color-experimental);
+    color: var(--p-color-avatar-four-text-on-bg-fill);
   }
 }
 
 .styleFive {
-  background: var(--p-color-avatar-style-five-background-experimental);
-  color: var(--p-color-avatar-style-five-color-experimental);
+  background: var(--p-color-avatar-five-bg-fill);
+  color: var(--p-color-avatar-five-text-on-bg-fill);
 
   svg,
   text {
-    color: var(--p-color-avatar-style-five-color-experimental);
+    color: var(--p-color-avatar-five-text-on-bg-fill);
   }
 }
 
diff --git a/polaris-react/src/components/Badge/Badge.scss b/polaris-react/src/components/Badge/Badge.scss
index dd66220d2d5..475ff81f544 100644
--- a/polaris-react/src/components/Badge/Badge.scss
+++ b/polaris-react/src/components/Badge/Badge.scss
@@ -9,13 +9,13 @@
   align-items: center;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   padding: var(--pc-badge-vertical-padding) var(--pc-badge-horizontal-padding);
-  background-color: var(--p-color-bg-transparent-subdued-experimental);
+  background-color: var(--p-color-bg-fill-transparent-secondary);
   border-radius: var(--p-border-radius-200);
-  color: var(--p-color-text-subdued);
+  color: var(--p-color-text-secondary);
   font-weight: var(--p-font-weight-medium);
 
   svg {
-    fill: var(--p-color-text-subdued);
+    fill: var(--p-color-text-secondary);
   }
 
   @media print {
@@ -24,7 +24,7 @@
 }
 
 .toneSuccess {
-  background-color: var(--p-color-bg-success);
+  background-color: var(--p-color-bg-fill-success-secondary);
   color: var(--p-color-text-success);
 
   svg {
@@ -34,7 +34,7 @@
 
 .toneSuccess-strong {
   color: var(--p-color-text-success-on-bg-fill);
-  background-color: var(--p-color-bg-success-strong);
+  background-color: var(--p-color-bg-fill-success);
 
   svg {
     fill: var(--p-color-text-success-on-bg-fill);
@@ -42,7 +42,7 @@
 }
 
 .toneInfo {
-  background-color: var(--p-color-bg-info);
+  background-color: var(--p-color-bg-fill-info-secondary);
   color: var(--p-color-text-info);
 
   svg {
@@ -52,7 +52,7 @@
 
 .toneInfo-strong {
   color: var(--p-color-text-info-on-bg-fill);
-  background-color: var(--p-color-bg-info-strong);
+  background-color: var(--p-color-bg-fill-info);
 
   svg {
     fill: var(--p-color-text-info-on-bg-fill);
@@ -60,7 +60,7 @@
 }
 
 .toneAttention {
-  background-color: var(--p-color-bg-caution);
+  background-color: var(--p-color-bg-fill-caution-secondary);
   color: var(--p-color-text-caution);
 
   svg {
@@ -70,7 +70,7 @@
 
 .toneAttention-strong {
   color: var(--p-color-text-caution-on-bg-fill);
-  background-color: var(--p-color-bg-caution-strong);
+  background-color: var(--p-color-bg-fill-caution);
 
   svg {
     fill: var(--p-color-text-caution-on-bg-fill);
@@ -78,8 +78,8 @@
 }
 
 .toneWarning {
-  background-color: var(--p-color-bg-warning);
-  color: var(--p-color-text-warning-experimental);
+  background-color: var(--p-color-bg-fill-warning-secondary);
+  color: var(--p-color-text-warning);
 
   svg {
     fill: var(--p-color-icon-warning);
@@ -88,7 +88,7 @@
 
 .toneWarning-strong {
   color: var(--p-color-text-warning-on-bg-fill);
-  background-color: var(--p-color-bg-warning-strong-experimental);
+  background-color: var(--p-color-bg-fill-warning);
 
   svg {
     fill: var(--p-color-text-warning-on-bg-fill);
@@ -96,7 +96,7 @@
 }
 
 .toneCritical {
-  background-color: var(--p-color-bg-critical);
+  background-color: var(--p-color-bg-fill-critical-secondary);
   color: var(--p-color-text-critical);
 
   svg {
@@ -106,7 +106,7 @@
 
 .toneCritical-strong {
   color: var(--p-color-text-critical-on-bg-fill);
-  background-color: var(--p-color-bg-critical-strong);
+  background-color: var(--p-color-bg-fill-critical);
 
   svg {
     fill: var(--p-color-text-critical-on-bg-fill);
@@ -115,18 +115,18 @@
 
 .toneNew {
   border: none;
-  background-color: var(--p-color-bg-transparent-subdued-experimental);
-  color: var(--p-color-text-subdued);
+  background-color: var(--p-color-bg-fill-transparent-secondary);
+  color: var(--p-color-text-secondary);
   font-weight: var(--p-font-weight-bold);
   border-radius: var(--p-border-radius-200);
 
   svg {
-    fill: var(--p-color-text-subdued);
+    fill: var(--p-color-text-secondary);
   }
 }
 
 .toneRead-only {
-  color: var(--p-color-text-subdued);
+  color: var(--p-color-text-secondary);
   background-color: transparent;
 
   svg {
diff --git a/polaris-react/src/components/Badge/components/Pip/Pip.scss b/polaris-react/src/components/Badge/components/Pip/Pip.scss
index f08eb970f73..ed6c1ffffae 100644
--- a/polaris-react/src/components/Badge/components/Pip/Pip.scss
+++ b/polaris-react/src/components/Badge/components/Pip/Pip.scss
@@ -3,7 +3,7 @@
 .Pip {
   // stylelint-disable -- Polaris component custom properties
   --pc-pip-size: var(--p-space-200);
-  --pc-pip-color: var(--p-color-text-subdued);
+  --pc-pip-color: var(--p-color-text-secondary);
   --pc-border-width: 1.25px;
   // stylelint-enable
   display: inline-block;
@@ -34,7 +34,7 @@
 
 .toneNew {
   // stylelint-disable-next-line -- Polaris component custom properties
-  --pc-pip-color: var(--p-color-text-subdued);
+  --pc-pip-color: var(--p-color-text-secondary);
 }
 
 .toneAttention {
diff --git a/polaris-react/src/components/Banner/Banner.scss b/polaris-react/src/components/Banner/Banner.scss
index f26f88baef7..aa9dc3f19d2 100644
--- a/polaris-react/src/components/Banner/Banner.scss
+++ b/polaris-react/src/components/Banner/Banner.scss
@@ -1,7 +1,7 @@
 @import '../../styles/common';
 
 .Banner {
-  background-color: var(--p-color-bg);
+  background-color: var(--p-color-bg-surface);
   position: relative;
   display: flex;
 
@@ -55,7 +55,7 @@
 }
 
 .icon-success-strong-experimental.icon-success-strong-experimental.icon-success-strong-experimental {
-  @include recolor-icon(var(--p-color-icon-success-strong-experimental));
+  @include recolor-icon(var(--p-color-text-success));
 }
 
 .text-warning-on-bg-fill.text-warning-on-bg-fill.text-warning-on-bg-fill {
@@ -63,7 +63,7 @@
 }
 
 .icon-warning-strong-experimental.icon-warning-strong-experimental.icon-warning-strong-experimental {
-  @include recolor-icon(var(--p-color-icon-warning-strong-experimental));
+  @include recolor-icon(var(--p-color-text-warning));
 }
 
 .text-critical-on-bg-fill.text-critical-on-bg-fill.text-critical-on-bg-fill {
@@ -71,7 +71,7 @@
 }
 
 .icon-critical-strong-experimental.icon-critical-strong-experimental.icon-critical-strong-experimental {
-  @include recolor-icon(var(--p-color-icon-critical-strong-experimental));
+  @include recolor-icon(var(--p-color-text-critical));
 }
 
 .text-info-on-bg-fill.text-info-on-bg-fill.text-info-on-bg-fill {
@@ -79,10 +79,10 @@
 }
 
 .icon-info-strong-experimental.icon-info-strong-experimental.icon-info-strong-experimental {
-  @include recolor-icon(var(--p-color-icon-info-strong-experimental));
+  @include recolor-icon(var(--p-color-text-info));
 }
 
 .icon-subdued.icon-subdued.icon-subdued {
-  @include recolor-icon(var(--p-color-icon-subdued));
+  @include recolor-icon(var(--p-color-icon-secondary));
 }
 // stylelint-enable
diff --git a/polaris-react/src/components/Bleed/Bleed.stories.tsx b/polaris-react/src/components/Bleed/Bleed.stories.tsx
index c818442be43..fd526b3934a 100644
--- a/polaris-react/src/components/Bleed/Bleed.stories.tsx
+++ b/polaris-react/src/components/Bleed/Bleed.stories.tsx
@@ -36,7 +36,7 @@ export function Default() {
 export function WithVerticalDirection() {
   return (
     <Box
-      background="bg"
+      background="bg-surface"
       padding="400"
       borderColor="border-subdued"
       borderWidth="025"
@@ -51,7 +51,7 @@ export function WithVerticalDirection() {
 export function WithHorizontalDirection() {
   return (
     <Box
-      background="bg"
+      background="bg-surface"
       padding="400"
       borderColor="border-subdued"
       borderWidth="025"
@@ -68,7 +68,7 @@ export function WithSpecificDirection() {
     <LegacyStack vertical>
       <p>Block Start</p>
       <Box
-        background="bg"
+        background="bg-surface"
         padding="400"
         borderColor="border-subdued"
         borderWidth="025"
@@ -79,7 +79,7 @@ export function WithSpecificDirection() {
       </Box>
       <p>Block End</p>
       <Box
-        background="bg"
+        background="bg-surface"
         padding="400"
         borderColor="border-subdued"
         borderWidth="025"
@@ -90,7 +90,7 @@ export function WithSpecificDirection() {
       </Box>
       <p>Inline Start</p>
       <Box
-        background="bg"
+        background="bg-surface"
         padding="400"
         borderColor="border-subdued"
         borderWidth="025"
@@ -101,7 +101,7 @@ export function WithSpecificDirection() {
       </Box>
       <p>Inline End</p>
       <Box
-        background="bg"
+        background="bg-surface"
         padding="400"
         borderColor="border-subdued"
         borderWidth="025"
@@ -117,7 +117,7 @@ export function WithSpecificDirection() {
 export function WithAllDirection() {
   return (
     <Box
-      background="bg"
+      background="bg-surface"
       padding="400"
       borderColor="border-subdued"
       borderWidth="025"
@@ -132,7 +132,7 @@ export function WithAllDirection() {
 export function WithResponsiveHorizontalDirection() {
   return (
     <Box
-      background="bg"
+      background="bg-surface"
       padding={{xs: '100', sm: '200', md: '300', lg: '400', xl: '500'}}
       borderColor="border-subdued"
       borderWidth="025"
diff --git a/polaris-react/src/components/BlockStack/BlockStack.stories.tsx b/polaris-react/src/components/BlockStack/BlockStack.stories.tsx
index 74a1b58687e..a522da09865 100644
--- a/polaris-react/src/components/BlockStack/BlockStack.stories.tsx
+++ b/polaris-react/src/components/BlockStack/BlockStack.stories.tsx
@@ -9,13 +9,13 @@ export default {
 export function Default() {
   return (
     <BlockStack>
-      <Box background="bg" padding="100">
+      <Box background="bg-surface" padding="100">
         01
       </Box>
-      <Box background="bg" padding="100">
+      <Box background="bg-surface" padding="100">
         02
       </Box>
-      <Box background="bg" padding="100">
+      <Box background="bg-surface" padding="100">
         03
       </Box>
     </BlockStack>
@@ -25,13 +25,13 @@ export function Default() {
 export function WithGap() {
   return (
     <BlockStack gap="800">
-      <Box background="bg" padding="100">
+      <Box background="bg-surface" padding="100">
         01
       </Box>
-      <Box background="bg" padding="100">
+      <Box background="bg-surface" padding="100">
         02
       </Box>
-      <Box background="bg" padding="100">
+      <Box background="bg-surface" padding="100">
         03
       </Box>
     </BlockStack>
@@ -41,13 +41,13 @@ export function WithGap() {
 export function WithResponsiveGap() {
   return (
     <BlockStack gap={{xs: '400', md: '1000'}}>
-      <Box background="bg" padding="100">
+      <Box background="bg-surface" padding="100">
         01
       </Box>
-      <Box background="bg" padding="100">
+      <Box background="bg-surface" padding="100">
         02
       </Box>
-      <Box background="bg" padding="100">
+      <Box background="bg-surface" padding="100">
         03
       </Box>
     </BlockStack>
@@ -58,13 +58,13 @@ export function WithAlignStart() {
   return (
     <div style={{display: 'flex', height: '250px'}}>
       <BlockStack gap="400" align="start">
-        <Box background="bg" padding="100">
+        <Box background="bg-surface" padding="100">
           01
         </Box>
-        <Box background="bg" padding="100">
+        <Box background="bg-surface" padding="100">
           02
         </Box>
-        <Box background="bg" padding="100">
+        <Box background="bg-surface" padding="100">
           03
         </Box>
       </BlockStack>
@@ -76,13 +76,13 @@ export function WithAlignCenter() {
   return (
     <div style={{display: 'flex', height: '250px'}}>
       <BlockStack gap="400" align="center">
-        <Box background="bg" padding="100">
+        <Box background="bg-surface" padding="100">
           01
         </Box>
-        <Box background="bg" padding="100">
+        <Box background="bg-surface" padding="100">
           02
         </Box>
-        <Box background="bg" padding="100">
+        <Box background="bg-surface" padding="100">
           03
         </Box>
       </BlockStack>
@@ -94,13 +94,13 @@ export function WithAlignEnd() {
   return (
     <div style={{display: 'flex', height: '250px'}}>
       <BlockStack gap="400" align="end">
-        <Box background="bg" padding="100">
+        <Box background="bg-surface" padding="100">
           01
         </Box>
-        <Box background="bg" padding="100">
+        <Box background="bg-surface" padding="100">
           02
         </Box>
-        <Box background="bg" padding="100">
+        <Box background="bg-surface" padding="100">
           03
         </Box>
       </BlockStack>
@@ -112,13 +112,13 @@ export function WithAlignSpaceAround() {
   return (
     <div style={{display: 'flex', height: '250px'}}>
       <BlockStack gap="400" align="space-around">
-        <Box background="bg" padding="100">
+        <Box background="bg-surface" padding="100">
           01
         </Box>
-        <Box background="bg" padding="100">
+        <Box background="bg-surface" padding="100">
           02
         </Box>
-        <Box background="bg" padding="100">
+        <Box background="bg-surface" padding="100">
           03
         </Box>
       </BlockStack>
@@ -130,13 +130,13 @@ export function WithAlignSpaceBetween() {
   return (
     <div style={{display: 'flex', height: '250px'}}>
       <BlockStack gap="400" align="space-between">
-        <Box background="bg" padding="100">
+        <Box background="bg-surface" padding="100">
           01
         </Box>
-        <Box background="bg" padding="100">
+        <Box background="bg-surface" padding="100">
           02
         </Box>
-        <Box background="bg" padding="100">
+        <Box background="bg-surface" padding="100">
           03
         </Box>
       </BlockStack>
@@ -148,13 +148,13 @@ export function WithAlignSpaceEvenly() {
   return (
     <div style={{display: 'flex', height: '250px'}}>
       <BlockStack gap="400" align="space-evenly">
-        <Box background="bg" padding="100">
+        <Box background="bg-surface" padding="100">
           01
         </Box>
-        <Box background="bg" padding="100">
+        <Box background="bg-surface" padding="100">
           02
         </Box>
-        <Box background="bg" padding="100">
+        <Box background="bg-surface" padding="100">
           03
         </Box>
       </BlockStack>
@@ -165,13 +165,13 @@ export function WithAlignSpaceEvenly() {
 export function WithInlineAlignStart() {
   return (
     <BlockStack gap="400" inlineAlign="start">
-      <Box background="bg" padding="100">
+      <Box background="bg-surface" padding="100">
         01
       </Box>
-      <Box background="bg" padding="100">
+      <Box background="bg-surface" padding="100">
         02
       </Box>
-      <Box background="bg" padding="100">
+      <Box background="bg-surface" padding="100">
         03
       </Box>
     </BlockStack>
@@ -181,13 +181,13 @@ export function WithInlineAlignStart() {
 export function WithInlineAlignCenter() {
   return (
     <BlockStack gap="400" inlineAlign="center">
-      <Box background="bg" padding="100">
+      <Box background="bg-surface" padding="100">
         01
       </Box>
-      <Box background="bg" padding="100">
+      <Box background="bg-surface" padding="100">
         02
       </Box>
-      <Box background="bg" padding="100">
+      <Box background="bg-surface" padding="100">
         03
       </Box>
     </BlockStack>
@@ -197,13 +197,13 @@ export function WithInlineAlignCenter() {
 export function WithInlineAlignEnd() {
   return (
     <BlockStack gap="400" inlineAlign="end">
-      <Box background="bg" padding="100">
+      <Box background="bg-surface" padding="100">
         01
       </Box>
-      <Box background="bg" padding="100">
+      <Box background="bg-surface" padding="100">
         02
       </Box>
-      <Box background="bg" padding="100">
+      <Box background="bg-surface" padding="100">
         03
       </Box>
     </BlockStack>
diff --git a/polaris-react/src/components/Box/Box.stories.tsx b/polaris-react/src/components/Box/Box.stories.tsx
index 900cb830f27..a2c3af562ec 100644
--- a/polaris-react/src/components/Box/Box.stories.tsx
+++ b/polaris-react/src/components/Box/Box.stories.tsx
@@ -18,11 +18,16 @@ export function Default() {
 export function WithBorders() {
   return (
     <BlockStack gap="400">
-      <Box background="bg" padding="400" borderWidth="025" borderColor="border">
+      <Box
+        background="bg-surface"
+        padding="400"
+        borderWidth="025"
+        borderColor="border"
+      >
         <Text as="p">1px solid border</Text>
       </Box>
       <Box
-        background="bg"
+        background="bg-surface"
         padding="400"
         borderWidth="025"
         borderStyle="dashed"
@@ -31,7 +36,7 @@ export function WithBorders() {
         <Text as="p">1px dashed border</Text>
       </Box>
       <Box
-        background="bg"
+        background="bg-surface"
         padding="400"
         borderWidth="050"
         borderColor="border-info"
@@ -39,7 +44,7 @@ export function WithBorders() {
         <Text as="p">2px solid blue</Text>
       </Box>
       <Box
-        background="bg"
+        background="bg-surface"
         padding="400"
         borderWidth="100"
         borderColor="border-caution"
@@ -47,7 +52,7 @@ export function WithBorders() {
         <Text as="p">4px solid yellow</Text>
       </Box>
       <Box
-        background="bg"
+        background="bg-surface"
         padding="400"
         borderBlockStartWidth="100"
         borderColor="border-critical"
@@ -55,7 +60,7 @@ export function WithBorders() {
         <Text as="p">border-block-start: 4px solid red</Text>
       </Box>
       <Box
-        background="bg"
+        background="bg-surface"
         padding="400"
         borderWidth="100"
         borderBlockStartWidth="025"
@@ -64,7 +69,7 @@ export function WithBorders() {
         <Text as="p">border-width: 4px solid red</Text>
         <Text as="p">border-block-start: 1px solid red</Text>
         <Box
-          background="bg"
+          background="bg-surface"
           padding="400"
           borderWidth="100"
           borderColor="border-caution"
@@ -77,7 +82,7 @@ export function WithBorders() {
         </Box>
       </Box>
       <Box
-        background="bg"
+        background="bg-surface"
         padding="400"
         borderWidth="100"
         borderColor="transparent"
@@ -92,7 +97,7 @@ export function WithOutline() {
   return (
     <BlockStack gap="400">
       <Box
-        background="bg"
+        background="bg-surface"
         padding="400"
         outlineWidth="025"
         outlineColor="border"
@@ -100,7 +105,7 @@ export function WithOutline() {
         <Icon source={PaintBrushMajor} tone="base" />
       </Box>
       <Box
-        background="bg"
+        background="bg-surface"
         padding="400"
         outlineWidth="025"
         outlineStyle="dashed"
@@ -109,7 +114,7 @@ export function WithOutline() {
         <Icon source={PaintBrushMajor} tone="base" />
       </Box>
       <Box
-        background="bg"
+        background="bg-surface"
         padding="400"
         outlineWidth="050"
         outlineColor="border-info"
@@ -117,7 +122,7 @@ export function WithOutline() {
         <Icon source={PaintBrushMajor} tone="base" />
       </Box>
       <Box
-        background="bg"
+        background="bg-surface"
         padding="400"
         outlineWidth="100"
         outlineColor="border-caution"
@@ -130,7 +135,7 @@ export function WithOutline() {
 
 export function WithBorderRadius() {
   return (
-    <Box background="bg" padding="400" borderRadius="200">
+    <Box background="bg-surface" padding="400" borderRadius="200">
       <Icon source={PaintBrushMajor} tone="info" />
     </Box>
   );
@@ -140,7 +145,7 @@ export function WithResponsivePadding() {
   return (
     <BlockStack gap="400">
       <Box
-        background="bg"
+        background="bg-surface"
         padding={{xs: '200', sm: '800'}}
         borderWidth="025"
         borderColor="border"
@@ -148,7 +153,7 @@ export function WithResponsivePadding() {
         <Icon source={PaintBrushMajor} tone="base" />
       </Box>
       <Box
-        background="bg"
+        background="bg-surface"
         padding="200"
         paddingBlockStart={{xs: '400', sm: '1000'}}
         borderWidth="025"
@@ -157,7 +162,7 @@ export function WithResponsivePadding() {
         <Icon source={PaintBrushMajor} tone="base" />
       </Box>
       <Box
-        background="bg"
+        background="bg-surface"
         padding="200"
         paddingBlockEnd={{xs: '400', sm: '1000'}}
         borderWidth="025"
@@ -166,7 +171,7 @@ export function WithResponsivePadding() {
         <Icon source={PaintBrushMajor} tone="base" />
       </Box>
       <Box
-        background="bg"
+        background="bg-surface"
         padding="200"
         paddingInlineStart={{xs: '400', sm: '1000'}}
         borderWidth="025"
@@ -175,7 +180,7 @@ export function WithResponsivePadding() {
         <Icon source={PaintBrushMajor} tone="base" />
       </Box>
       <Box
-        background="bg"
+        background="bg-surface"
         paddingInlineEnd={{xs: '400', sm: '1000'}}
         borderWidth="025"
         borderColor="border"
diff --git a/polaris-react/src/components/BulkActions/BulkActions.scss b/polaris-react/src/components/BulkActions/BulkActions.scss
index b6a47a2307d..0c9ebb22e94 100644
--- a/polaris-react/src/components/BulkActions/BulkActions.scss
+++ b/polaris-react/src/components/BulkActions/BulkActions.scss
@@ -53,7 +53,7 @@ $bulk-actions-button-stacking-order: (
   width: auto;
   justify-content: flex-start;
   padding: var(--p-space-300);
-  background: var(--p-color-bg);
+  background: var(--p-color-bg-surface);
   border-radius: var(--p-border-radius-200);
   box-shadow: var(--p-shadow-300), var(--p-shadow-500);
   max-width: 100%;
@@ -89,31 +89,30 @@ $bulk-actions-button-stacking-order: (
 
   button {
     display: flex;
-    background-color: var(--p-color-bg-strong);
+    background-color: var(--p-color-bg-fill-tertiary);
     box-shadow: none;
 
     &:hover {
-      background-color: var(--p-color-bg-strong-hover);
+      background-color: var(--p-color-bg-fill-tertiary-hover);
       box-shadow: none;
     }
 
     &:focus-visible,
     &:active {
-      background-color: var(--p-color-bg-strong-active);
+      background-color: var(--p-color-bg-fill-tertiary-active);
     }
 
     // stylelint-disable-next-line selector-max-specificity -- Bulk actions button override
     &:focus-visible:not(:active) {
       /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- override focus ring */
       @include no-focus-ring;
-      outline: var(--p-border-width-050) solid
-        var(--p-color-border-interactive-focus);
+      outline: var(--p-border-width-050) solid var(--p-color-border-focus);
       outline-offset: var(--p-space-050);
     }
 
     // stylelint-disable-next-line selector-no-qualifying-type -- Bulk actions button override
     &[aria-disabled='true'] {
-      background-color: var(--p-color-bg-transparent-disabled-experimental);
+      background-color: var(--p-color-bg-fill-disabled);
     }
   }
 
diff --git a/polaris-react/src/components/Button/Button.scss b/polaris-react/src/components/Button/Button.scss
index 341ddb54908..7a1a767fd27 100644
--- a/polaris-react/src/components/Button/Button.scss
+++ b/polaris-react/src/components/Button/Button.scss
@@ -241,11 +241,11 @@
 
 .primary {
   // stylelint-disable -- Button custom properties
-  --pc-button-color: var(--p-color-bg-primary);
+  --pc-button-color: var(--p-color-bg-fill-brand);
   --pc-button-text: var(--p-color-text-brand-on-bg-fill);
-  --pc-button-color-hover: var(--p-color-bg-primary-hover);
-  --pc-button-color-active: var(--p-color-bg-primary-active);
-  --pc-button-color-depressed: var(--p-color-bg-primary-active);
+  --pc-button-color-hover: var(--p-color-bg-fill-brand-hover);
+  --pc-button-color-active: var(--p-color-bg-fill-brand-active);
+  --pc-button-color-depressed: var(--p-color-bg-fill-brand-active);
   // stylelint-enable
 
   &::before {
@@ -311,7 +311,7 @@
 
   &.disabled {
     color: var(--p-color-text-brand-on-bg-fill-disabled);
-    background: var(--p-color-bg-transparent-primary-disabled-experimental);
+    background: var(--p-color-bg-fill-brand-disabled);
     box-shadow: none;
 
     &::before {
@@ -358,11 +358,11 @@
 
   &.critical {
     // stylelint-disable -- Button custom properties
-    --pc-button-color: var(--p-color-bg-critical-strong);
+    --pc-button-color: var(--p-color-bg-fill-critical);
     --pc-button-text: var(--p-color-text-critical-on-bg-fill);
-    --pc-button-color-hover: var(--p-color-bg-critical-strong-hover);
-    --pc-button-color-active: var(--p-color-bg-critical-strong-active);
-    --pc-button-color-depressed: var(--p-color-bg-critical-strong-active);
+    --pc-button-color-hover: var(--p-color-bg-fill-critical-hover);
+    --pc-button-color-active: var(--p-color-bg-fill-critical-active);
+    --pc-button-color-depressed: var(--p-color-bg-fill-critical-active);
     // stylelint-enable
 
     &::before {
@@ -405,17 +405,11 @@
 
   &.success {
     // stylelint-disable -- Button custom properties
-    --pc-button-color: var(--p-color-bg-success-strong);
+    --pc-button-color: var(--p-color-bg-fill-success);
     --pc-button-text: var(--p-color-text-success-on-bg-fill);
-    --pc-button-color-hover: var(
-      --p-color-bg-success-strong-hover-experimental
-    );
-    --pc-button-color-active: var(
-      --p-color-bg-success-strong-active-experimental
-    );
-    --pc-button-color-depressed: var(
-      --p-color-bg-success-strong-active-experimental
-    );
+    --pc-button-color-hover: var(--p-color-bg-fill-success-hover);
+    --pc-button-color-active: var(--p-color-bg-fill-success-active);
+    --pc-button-color-depressed: var(--p-color-bg-fill-success-active);
     // stylelint-enable
     box-shadow: none;
 
@@ -475,8 +469,8 @@
   // stylelint-disable -- Button custom properties
   --pc-button-color: transparent;
   --pc-button-text: var(--p-color-text);
-  --pc-button-color-hover: var(--p-color-bg-transparent-hover-experimental);
-  --pc-button-color-active: var(--p-color-bg-transparent-active-experimental);
+  --pc-button-color-hover: var(--p-color-bg-fill-transparent-hover);
+  --pc-button-color-active: var(--p-color-bg-fill-transparent-active);
   --pc-button-color-depressed: var(--p-surface-selected-depressed);
   // stylelint-enable
   box-shadow: none;
@@ -536,8 +530,8 @@
     // stylelint-disable polaris/conventions/polaris/custom-property-allowed-list -- Button custom properties
     --pc-button-color: transparent;
     --pc-button-text: var(--p-color-text-critical);
-    --pc-button-color-hover: var(--p-color-bg-transparent-hover-experimental);
-    --pc-button-color-active: var(--p-color-bg-transparent-active-experimental);
+    --pc-button-color-hover: var(--p-color-bg-fill-transparent-hover);
+    --pc-button-color-active: var(--p-color-bg-fill-transparent-active);
 
     &:hover,
     &:active {
@@ -561,7 +555,7 @@
     margin: calc(-1 * var(--p-space-100));
 
     path {
-      fill: var(--p-color-icon-subdued);
+      fill: var(--p-color-icon-secondary);
     }
 
     &:active,
@@ -686,8 +680,7 @@
       @media (-ms-high-contrast: active) {
         outline: var(--p-border-width-050) dotted;
       }
-      outline: var(--p-border-width-050) solid
-        var(--p-color-border-interactive-focus);
+      outline: var(--p-border-width-050) solid var(--p-color-border-focus);
       outline-offset: var(--p-space-050);
       border-radius: var(--p-border-radius-150);
     }
@@ -728,12 +721,12 @@
     box-shadow: none;
 
     svg {
-      fill: var(--p-color-icon-critical-strong-experimental);
+      fill: var(--p-color-text-critical);
     }
 
     &:hover,
     &:focus:not(:active):not(.pressed):not(.disabled) {
-      color: var(--p-color-text-critical-hover-experimental);
+      color: var(--p-color-text-critical-hover);
 
       svg {
         fill: var(--p-color-icon-critical-strong-hover-experimental);
@@ -745,7 +738,7 @@
       color: var(--p-color-text-critical-active);
 
       svg {
-        fill: var(--p-color-icon-critical-strong-active-experimental);
+        fill: var(--p-color-text-critical-active);
       }
     }
 
@@ -787,7 +780,7 @@
     min-width: var(--p-font-line-height-500);
 
     svg {
-      fill: var(--p-color-icon-subdued);
+      fill: var(--p-color-icon-secondary);
     }
 
     &:hover svg {
@@ -810,7 +803,7 @@
 
   &.critical.iconOnly {
     svg {
-      fill: var(--p-color-icon-critical-strong-experimental);
+      fill: var(--p-color-text-critical);
     }
 
     &:hover svg {
@@ -818,12 +811,12 @@
     }
 
     &:focus:not(:active):not(.pressed):not(.disabled) svg {
-      fill: var(--p-color-icon-critical-strong-experimental);
+      fill: var(--p-color-text-critical);
     }
 
     &:active svg,
     &.pressed svg {
-      fill: var(--p-color-icon-critical-strong-active-experimental);
+      fill: var(--p-color-text-critical-active);
     }
 
     &.disabled svg {
diff --git a/polaris-react/src/components/CalloutCard/CalloutCard.scss b/polaris-react/src/components/CalloutCard/CalloutCard.scss
index a8124b188f3..b401f554743 100644
--- a/polaris-react/src/components/CalloutCard/CalloutCard.scss
+++ b/polaris-react/src/components/CalloutCard/CalloutCard.scss
@@ -43,7 +43,7 @@
 
   // stylelint-disable-next-line -- Dismiss icon color override
   & svg {
-    fill: var(--p-color-icon-subdued);
+    fill: var(--p-color-icon-secondary);
   }
 }
 
diff --git a/polaris-react/src/components/Card/Card.tsx b/polaris-react/src/components/Card/Card.tsx
index d8d73e5c71f..fefca395d62 100644
--- a/polaris-react/src/components/Card/Card.tsx
+++ b/polaris-react/src/components/Card/Card.tsx
@@ -33,7 +33,7 @@ export interface CardProps {
 
 export const Card = ({
   children,
-  background = 'bg',
+  background = 'bg-surface',
   padding = {xs: '400'},
   roundedAbove,
 }: CardProps) => {
diff --git a/polaris-react/src/components/Checkbox/Checkbox.scss b/polaris-react/src/components/Checkbox/Checkbox.scss
index 74565175379..603113b3fc5 100644
--- a/polaris-react/src/components/Checkbox/Checkbox.scss
+++ b/polaris-react/src/components/Checkbox/Checkbox.scss
@@ -7,7 +7,7 @@
 
 .ChoiceLabel .Backdrop {
   border-width: 0;
-  box-shadow: inset 0 0 0 var(--p-border-width-0165) var(--p-color-border-input);
+  box-shadow: inset 0 0 0 var(--p-border-width-0165) var(--p-color-input-border);
   transition: border-color var(--p-motion-duration-100) var(--p-motion-ease-out),
     border-width var(--p-motion-duration-100) var(--p-motion-ease-out),
     box-shadow var(--p-motion-duration-100) var(--p-motion-ease-out);
@@ -17,17 +17,17 @@
 }
 
 .ChoiceLabel:hover .Backdrop {
-  border-color: var(--p-color-border-input-hover);
+  border-color: var(--p-color-input-border-hover);
   box-shadow: inset 0 0 0 var(--p-border-width-0165)
-    var(--p-color-border-input-hover);
-  background-color: var(--p-color-bg-input-hover-experimental);
+    var(--p-color-input-border-hover);
+  background-color: var(--p-color-input-bg-surface-hover);
 }
 
 .ChoiceLabel:active .Backdrop,
 .ChoiceLabel:checked .Backdrop {
-  border-color: var(--p-color-bg-primary);
+  border-color: var(--p-color-bg-fill-brand);
   border-width: 0;
-  box-shadow: inset 0 0 0 var(--p-space-050) var(--p-color-bg-primary);
+  box-shadow: inset 0 0 0 var(--p-space-050) var(--p-color-bg-fill-brand);
 }
 
 // stylelint-disable selector-max-specificity, selector-max-class -- Much easier to read the rules when written like this
@@ -39,10 +39,9 @@
     + .Backdrop {
       // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
       @include focus-ring($style: 'focused');
-      outline: var(--p-border-width-050) solid
-        var(--p-color-border-interactive-focus);
+      outline: var(--p-border-width-050) solid var(--p-color-border-focus);
       outline-offset: var(--p-space-025);
-      background-color: var(--p-color-bg-input-hover-experimental);
+      background-color: var(--p-color-input-bg-surface-hover);
       border-width: 0;
     }
   }
@@ -52,7 +51,7 @@
     + .Backdrop {
       // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
       @include control-backdrop(active);
-      border-color: var(--p-color-bg-primary);
+      border-color: var(--p-color-bg-fill-brand);
       background-color: var(--p-color-bg-fill-brand-selected);
       box-shadow: inset 0 0 0 var(--p-space-800)
         var(--p-color-bg-fill-brand-selected);
@@ -113,7 +112,7 @@
   width: 100%;
   height: 100%;
 
-  border: var(--p-border-width-0165) solid var(--p-color-border-input);
+  border: var(--p-border-width-0165) solid var(--p-color-input-border);
 
   &:hover {
     border-color: var(--p-color-input-border-hover);
@@ -167,16 +166,16 @@
     + .Backdrop {
       // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
       @include control-backdrop(error);
-      background-color: var(--p-color-bg-critical-subdued);
+      background-color: var(--p-color-bg-surface-critical);
       box-shadow: inset 0 0 0 var(--p-border-width-0165)
-        var(--p-color-bg-critical-strong-active);
+        var(--p-color-bg-fill-critical-active);
     }
   }
 
   .Backdrop {
     &:active {
       box-shadow: inset 0 0 0 var(--p-space-050)
-        var(--p-color-bg-critical-strong-active);
+        var(--p-color-bg-fill-critical-active);
     }
   }
 
@@ -193,15 +192,15 @@
     + .Backdrop {
       background-color: var(--p-color-border-critical);
       box-shadow: inset 0 0 0 var(--p-space-050)
-        var(--p-color-bg-critical-strong-active);
+        var(--p-color-bg-fill-critical-active);
     }
   }
 
   .Input:focus-visible + .Backdrop {
     &,
     .ChoiceLabel:hover & {
-      border-color: var(--p-color-border-critical-strong-experimental);
-      background-color: var(--p-color-bg-critical-subdued);
+      border-color: var(--p-color-border-critical-secondary);
+      background-color: var(--p-color-bg-surface-critical);
     }
   }
 }
diff --git a/polaris-react/src/components/DataTable/DataTable.scss b/polaris-react/src/components/DataTable/DataTable.scss
index 10956a0ce0a..b139698554b 100644
--- a/polaris-react/src/components/DataTable/DataTable.scss
+++ b/polaris-react/src/components/DataTable/DataTable.scss
@@ -5,7 +5,7 @@
   --pc-data-table-first-column-width: 145px;
   position: relative;
   max-width: 100vw;
-  background-color: var(--p-color-bg);
+  background-color: var(--p-color-bg-surface);
   border-radius: 0;
   overflow: hidden;
 
@@ -35,7 +35,7 @@
 .Pip {
   height: 6px;
   width: 6px;
-  background: var(--p-color-icon-subdued);
+  background: var(--p-color-icon-secondary);
   border-radius: var(--p-border-radius-100);
 
   &:not(:last-of-type) {
@@ -208,7 +208,7 @@
 .hoverable {
   .Cell-hovered {
     @media #{$p-breakpoints-md-up} {
-      background: var(--p-color-bg-hover);
+      background: var(--p-color-bg-surface-hover);
     }
   }
 }
@@ -303,7 +303,7 @@
 
 .Cell-total {
   font-weight: var(--p-font-weight-semibold);
-  background: var(--p-color-bg-subdued);
+  background: var(--p-color-bg-surface-secondary);
   border-bottom: var(--p-border-width-025) solid var(--p-color-border);
 
   .ZebraStripingOnData.ShowTotals & {
@@ -323,8 +323,8 @@
 
 .Footer {
   padding: var(--p-space-200) var(--p-space-300);
-  background: var(--p-color-bg-subdued);
-  color: var(--p-color-text-subdued);
+  background: var(--p-color-bg-surface-secondary);
+  color: var(--p-color-text-secondary);
   text-align: center;
   border-top: var(--p-border-width-025) solid var(--p-color-border);
 
@@ -387,7 +387,7 @@
 
   .StickyHeaderInner-isSticky {
     visibility: visible;
-    background-color: var(--p-color-bg);
+    background-color: var(--p-color-bg-surface);
     box-shadow: var(--p-shadow-100);
   }
 }
diff --git a/polaris-react/src/components/DatePicker/DatePicker.scss b/polaris-react/src/components/DatePicker/DatePicker.scss
index 5205a2ca57d..266979cdc1d 100644
--- a/polaris-react/src/components/DatePicker/DatePicker.scss
+++ b/polaris-react/src/components/DatePicker/DatePicker.scss
@@ -80,7 +80,7 @@
 }
 
 .Day-inRange {
-  background: var(--p-color-bg-primary-subdued-selected);
+  background: var(--p-color-bg-surface-brand-selected);
   border-radius: 0;
 
   @media (-ms-high-contrast: active) {
diff --git a/polaris-react/src/components/DropZone/DropZone.scss b/polaris-react/src/components/DropZone/DropZone.scss
index 267df289e0f..0eaa0f61a93 100755
--- a/polaris-react/src/components/DropZone/DropZone.scss
+++ b/polaris-react/src/components/DropZone/DropZone.scss
@@ -32,7 +32,7 @@ $dropzone-stacking-order: (
   position: relative;
   display: flex;
   justify-content: center;
-  background-color: var(--p-color-bg-input);
+  background-color: var(--p-color-input-bg-surface);
   border-radius: var(--p-border-radius-200);
 
   &::after {
@@ -67,16 +67,16 @@ $dropzone-stacking-order: (
   &:not(.isDisabled) {
     &::after {
       border-width: var(--p-border-width-0165);
-      border-color: var(--p-color-border-input);
+      border-color: var(--p-color-input-border);
     }
 
     &:hover {
       cursor: pointer;
-      background-color: var(--p-color-bg-input-hover-experimental);
+      background-color: var(--p-color-input-bg-surface-hover);
 
       // stylelint-disable-next-line selector-max-specificity -- generated by polaris-migrator DO NOT COPY
       &::after {
-        border-color: var(--p-color-border-input-hover);
+        border-color: var(--p-color-input-border-hover);
       }
     }
   }
@@ -84,7 +84,7 @@ $dropzone-stacking-order: (
 
 .isDragging {
   &:not(.isDisabled) {
-    background-color: var(--p-color-bg-hover);
+    background-color: var(--p-color-bg-surface-hover);
   }
 }
 
@@ -137,11 +137,10 @@ $dropzone-stacking-order: (
   justify-content: center;
   align-items: center;
   padding: var(--p-space-400);
-  border: var(--p-border-width-025) solid
-    var(--p-color-border-input-active-experimental);
+  border: var(--p-border-width-025) solid var(--p-color-input-border-active);
   text-align: center;
   color: var(--p-color-text);
-  background-color: var(--p-color-bg-input-active-experimental);
+  background-color: var(--p-color-input-bg-surface-active);
   pointer-events: none;
 
   .sizeSmall & {
@@ -150,11 +149,11 @@ $dropzone-stacking-order: (
 }
 
 .hasError > .Overlay {
-  border-color: var(--p-color-border-critical-strong-experimental);
+  border-color: var(--p-color-border-critical-secondary);
   color: var(--p-color-text-critical);
   border-style: $dropzone-border-style;
   border-width: var(--p-border-width-0165);
-  background-color: var(--p-color-bg-critical-subdued);
+  background-color: var(--p-color-bg-surface-critical);
 }
 
 .focused {
diff --git a/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.scss b/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.scss
index 8d5f2140d6f..46c9f50e07a 100755
--- a/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.scss
+++ b/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.scss
@@ -36,14 +36,14 @@
   text-align: center;
   appearance: none;
   color: var(--p-color-text);
-  background-color: var(--p-color-bg-input);
+  background-color: var(--p-color-input-bg-surface);
   padding: var(--p-space-150) var(--p-space-300);
   box-shadow: var(--p-shadow-button);
   border-radius: var(--p-border-radius-200);
 
   &.disabled {
     color: var(--p-color-text-disabled);
-    background-color: var(--p-color-bg-transparent-disabled-experimental);
+    background-color: var(--p-color-bg-fill-disabled);
 
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include base-button-disabled;
@@ -72,7 +72,7 @@
 }
 
 .ActionTitle-disabled {
-  color: var(--p-color-text-interactive-disabled);
+  color: var(--p-color-text-disabled);
 }
 
 .UploadIcon {
diff --git a/polaris-react/src/components/Filters/Filters.scss b/polaris-react/src/components/Filters/Filters.scss
index 8034428f14c..dc445d3b28c 100644
--- a/polaris-react/src/components/Filters/Filters.scss
+++ b/polaris-react/src/components/Filters/Filters.scss
@@ -86,7 +86,7 @@
 }
 
 .AddFilter {
-  background: var(--p-color-bg);
+  background: var(--p-color-bg-surface);
   border-radius: var(--p-border-radius-200);
   border: var(--p-color-border) dashed var(--p-border-width-025);
   padding: 0 var(--p-space-200) 0 var(--p-space-300);
@@ -131,12 +131,12 @@
   }
 
   &:active {
-    background: var(--p-color-bg-secondary-experimental);
+    background: var(--p-color-bg-surface-tertiary);
     border-color: var(--p-color-border-hover);
   }
 
   &[aria-disabled='true'] {
-    background: var(--p-color-bg-transparent-disabled-experimental);
+    background: var(--p-color-bg-fill-disabled);
     border-color: transparent;
     color: var(--p-color-text-disabled);
     cursor: default;
diff --git a/polaris-react/src/components/Filters/components/FilterPill/FilterPill.scss b/polaris-react/src/components/Filters/components/FilterPill/FilterPill.scss
index 3a228620b6e..1288bd4166b 100644
--- a/polaris-react/src/components/Filters/components/FilterPill/FilterPill.scss
+++ b/polaris-react/src/components/Filters/components/FilterPill/FilterPill.scss
@@ -1,7 +1,7 @@
 @import '../../../../styles/common';
 
 .FilterButton {
-  background: var(--p-color-bg);
+  background: var(--p-color-bg-surface);
   border-radius: var(--p-border-radius-200);
   border: var(--p-color-border) dashed var(--p-border-width-025);
   cursor: pointer;
@@ -18,7 +18,7 @@
   &:hover,
   &:focus,
   &:active {
-    background: var(--p-color-bg-hover);
+    background: var(--p-color-bg-surface-hover);
     border-color: var(--p-color-border);
 
     path {
@@ -37,15 +37,15 @@
   }
 
   &:active {
-    background: var(--p-color-bg-subdued);
+    background: var(--p-color-bg-surface-secondary);
   }
 
   &.ActiveFilterButton {
-    background: var(--p-color-bg);
+    background: var(--p-color-bg-surface);
     border-style: solid;
 
     &:active {
-      background: var(--p-color-bg-subdued);
+      background: var(--p-color-bg-surface-secondary);
     }
   }
 
diff --git a/polaris-react/src/components/Frame/Frame.scss b/polaris-react/src/components/Frame/Frame.scss
index e57c68ba822..9379e6a8a10 100644
--- a/polaris-react/src/components/Frame/Frame.scss
+++ b/polaris-react/src/components/Frame/Frame.scss
@@ -11,7 +11,7 @@ $sidebar-breakpoint: 1200px;
   min-height: 100vh;
   min-height: 100svh; // For mobile browsers, fill the screen taking into account dynamic browser chrome
   display: flex;
-  background-color: var(--p-color-bg-app);
+  background-color: var(--p-color-bg);
 
   @media print {
     background-color: transparent;
diff --git a/polaris-react/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.scss b/polaris-react/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.scss
index f74bb496651..556566d7bc4 100644
--- a/polaris-react/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.scss
+++ b/polaris-react/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.scss
@@ -4,7 +4,7 @@
   /* stylelint-disable -- polaris: Used to apply dark theme to action buttons */
   --p-color-bg-surface: var(--p-color-bg-inverse);
   --p-color-text: var(--p-color-text-inverse);
-  --p-color-bg-hover: var(--p-color-bg-fill-inverse-hover);
+  --p-color-bg-surface-hover: var(--p-color-bg-fill-inverse-hover);
   --p-color-bg-surface-secondary-active: var(--p-color-bg-fill-inverse-active);
   /* stylelint-enable */
   display: flex;
@@ -124,9 +124,9 @@
 
   & [class*='Polaris-Button--tertiary'],
   & [class*='Button-tertiary'] {
-    --pc-button-color: var(--p-color-bg-inset-strong);
-    --pc-button-color-hover: var(--p-color-bg-inverse-hover);
-    --pc-button-color-active: var(--p-color-bg-inverse-active);
+    --pc-button-color: var(--p-color-bg-fill-inverse);
+    --pc-button-color-hover: var(--p-color-bg-fill-inverse-hover);
+    --pc-button-color-active: var(--p-color-bg-fill-inverse-active);
     --pc-button-text: var(--p-color-text-inverse);
 
     &::after {
diff --git a/polaris-react/src/components/Frame/components/Loading/Loading.scss b/polaris-react/src/components/Frame/components/Loading/Loading.scss
index 648f958259c..ffe72ba4f45 100644
--- a/polaris-react/src/components/Frame/components/Loading/Loading.scss
+++ b/polaris-react/src/components/Frame/components/Loading/Loading.scss
@@ -11,7 +11,7 @@
   width: 100%;
   height: 100%;
   transform-origin: 0;
-  background-color: var(--p-color-bg-primary);
+  background-color: var(--p-color-bg-fill-brand);
   transition: transform var(--p-motion-duration-500) linear;
 
   @media screen and (-ms-high-contrast: active) {
diff --git a/polaris-react/src/components/FullscreenBar/FullscreenBar.scss b/polaris-react/src/components/FullscreenBar/FullscreenBar.scss
index 957f5736f32..077a921d99a 100644
--- a/polaris-react/src/components/FullscreenBar/FullscreenBar.scss
+++ b/polaris-react/src/components/FullscreenBar/FullscreenBar.scss
@@ -5,7 +5,7 @@
   display: flex;
   height: $top-bar-height;
   box-shadow: var(--p-shadow-100);
-  background-color: var(--p-color-bg);
+  background-color: var(--p-color-bg-surface);
 }
 
 .BackAction {
diff --git a/polaris-react/src/components/Icon/Icon.scss b/polaris-react/src/components/Icon/Icon.scss
index 4e31fe93a72..9315d788dbb 100644
--- a/polaris-react/src/components/Icon/Icon.scss
+++ b/polaris-react/src/components/Icon/Icon.scss
@@ -34,7 +34,7 @@
 }
 
 .toneInteractive svg {
-  fill: var(--p-color-icon-interactive);
+  fill: var(--p-color-icon-emphasis);
 }
 
 .toneInfo svg {
diff --git a/polaris-react/src/components/IndexFilters/IndexFilters.scss b/polaris-react/src/components/IndexFilters/IndexFilters.scss
index 3565f6b5bed..02c0769cffd 100644
--- a/polaris-react/src/components/IndexFilters/IndexFilters.scss
+++ b/polaris-react/src/components/IndexFilters/IndexFilters.scss
@@ -92,7 +92,7 @@ $spinner-size: 20px;
     position: relative;
     padding: var(--p-space-200);
     height: 3rem;
-    border-left: var(--p-border-width-025) solid var(--p-color-border-subdued);
+    border-left: var(--p-border-width-025) solid var(--p-color-border-secondary);
 
     &::before {
       content: '';
diff --git a/polaris-react/src/components/IndexFilters/components/Container/Container.scss b/polaris-react/src/components/IndexFilters/components/Container/Container.scss
index 5427501c96e..a70c2ba9cd8 100644
--- a/polaris-react/src/components/IndexFilters/components/Container/Container.scss
+++ b/polaris-react/src/components/IndexFilters/components/Container/Container.scss
@@ -4,7 +4,7 @@
   border-bottom: var(--p-border-width-025) solid var(--p-color-border);
   border-top-left-radius: var(--p-border-radius-200);
   border-top-right-radius: var(--p-border-radius-200);
-  background: var(--p-color-bg);
+  background: var(--p-color-bg-surface);
 }
 
 @media #{$p-breakpoints-sm-down} {
diff --git a/polaris-react/src/components/IndexFilters/components/SortButton/components/DirectionButton/DirectionButton.scss b/polaris-react/src/components/IndexFilters/components/SortButton/components/DirectionButton/DirectionButton.scss
index fbf64642e28..28f2d24dbab 100644
--- a/polaris-react/src/components/IndexFilters/components/SortButton/components/DirectionButton/DirectionButton.scss
+++ b/polaris-react/src/components/IndexFilters/components/SortButton/components/DirectionButton/DirectionButton.scss
@@ -17,7 +17,7 @@
   text-align: left;
 
   &:hover {
-    background-color: var(--p-color-bg-transparent-hover-experimental);
+    background-color: var(--p-color-bg-fill-transparent-hover);
   }
 
   + .DirectionButton {
@@ -34,7 +34,7 @@
 
 .DirectionButton-active {
   color: var(--p-color-text);
-  background: var(--p-color-bg-transparent-active-experimental);
+  background: var(--p-color-bg-fill-transparent-active);
 }
 
 .Label {
diff --git a/polaris-react/src/components/IndexTable/IndexTable.scss b/polaris-react/src/components/IndexTable/IndexTable.scss
index 981bc28783b..67107c0a047 100644
--- a/polaris-react/src/components/IndexTable/IndexTable.scss
+++ b/polaris-react/src/components/IndexTable/IndexTable.scss
@@ -111,14 +111,14 @@ $loading-panel-height: 53px;
     // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity, selector-max-compound-selectors -- bg color overrides
     .TableCell-first,
     .TableCell-first + .TableCell {
-      background-color: var(--p-color-bg-subdued);
+      background-color: var(--p-color-bg-surface-secondary);
     }
   }
 
   .TableHeading-first,
   .TableHeading-second {
     visibility: visible;
-    background-color: var(--p-color-bg-subdued);
+    background-color: var(--p-color-bg-surface-secondary);
   }
 
   .TableCell-first,
@@ -172,7 +172,7 @@ $loading-panel-height: 53px;
     &,
     .TableCell-first,
     .TableCell-first + .TableCell {
-      background-color: var(--p-color-bg-success-subdued);
+      background-color: var(--p-color-bg-surface-success);
     }
   }
 
@@ -181,7 +181,7 @@ $loading-panel-height: 53px;
     &,
     .TableCell-first,
     .TableCell-first + .TableCell {
-      background-color: var(--p-color-bg-critical-subdued);
+      background-color: var(--p-color-bg-surface-critical);
     }
   }
 
@@ -190,7 +190,7 @@ $loading-panel-height: 53px;
     &,
     .TableCell-first,
     .TableCell-first + .TableCell {
-      background-color: var(--p-color-bg-warning-subdued-experimental);
+      background-color: var(--p-color-bg-surface-warning);
     }
   }
 
@@ -200,7 +200,7 @@ $loading-panel-height: 53px;
     &,
     .TableCell-first,
     .TableCell-first + .TableCell {
-      background-color: var(--p-color-bg-warning-subdued-experimental);
+      background-color: var(--p-color-bg-surface-warning);
     }
   }
 
@@ -210,7 +210,7 @@ $loading-panel-height: 53px;
     &,
     .TableCell-first,
     .TableCell-first + .TableCell {
-      background-color: var(--p-color-bg-warning-subdued-experimental);
+      background-color: var(--p-color-bg-surface-warning);
     }
   }
 
@@ -219,8 +219,8 @@ $loading-panel-height: 53px;
     &,
     .TableCell-first,
     .TableCell-first + .TableCell {
-      background-color: var(--p-color-bg-subdued);
-      color: var(--p-color-text-subdued);
+      background-color: var(--p-color-bg-surface-secondary);
+      color: var(--p-color-text-secondary);
     }
 
     // stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY
@@ -231,7 +231,7 @@ $loading-panel-height: 53px;
       .TableCell-first,
       .TableCell-first + .TableCell,
       .TableCell:last-child {
-        background-color: var(--p-color-bg-subdued);
+        background-color: var(--p-color-bg-surface-secondary);
       }
     }
   }
@@ -247,7 +247,7 @@ $loading-panel-height: 53px;
       color: var(--p-color-text-secondary);
       font-weight: var(--p-font-weight-medium);
       font-size: var(--p-font-size-300);
-      background-color: var(--p-color-bg-subdued);
+      background-color: var(--p-color-bg-surface-secondary);
       border-top: var(--p-border-width-025) solid var(--p-color-border);
       border-bottom: var(--p-border-width-025) solid var(--p-color-border);
       border-color: var(--p-color-border);
@@ -273,7 +273,7 @@ $loading-panel-height: 53px;
       .TableCell-first,
       .TableCell-first + .TableCell,
       .TableCell:last-child {
-        background-color: var(--p-color-bg-subdued);
+        background-color: var(--p-color-bg-surface-secondary);
       }
     }
   }
@@ -284,7 +284,7 @@ $loading-panel-height: 53px;
     &,
     .TableCell-first,
     .TableCell-first + .TableCell {
-      background-color: var(--p-color-bg-hover);
+      background-color: var(--p-color-bg-surface-hover);
     }
 
     /* stylelint-disable-next-line selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY */
@@ -293,7 +293,7 @@ $loading-panel-height: 53px;
       &,
       .TableCell-first,
       .TableCell-first + .TableCell {
-        background-color: var(--p-color-bg-critical-subdued-hover);
+        background-color: var(--p-color-bg-surface-critical-hover);
       }
     }
 
@@ -303,7 +303,7 @@ $loading-panel-height: 53px;
       &,
       .TableCell-first,
       .TableCell-first + .TableCell {
-        background-color: var(--p-color-bg-warning-subdued-experimental);
+        background-color: var(--p-color-bg-surface-warning);
       }
     }
 
@@ -313,7 +313,7 @@ $loading-panel-height: 53px;
       &,
       .TableCell-first,
       .TableCell-first + .TableCell {
-        background-color: var(--p-color-bg-subdued-hover);
+        background-color: var(--p-color-bg-surface-secondary-hover);
       }
     }
 
@@ -323,7 +323,7 @@ $loading-panel-height: 53px;
       &,
       .TableCell-first,
       .TableCell-first + .TableCell {
-        background-color: var(--p-color-bg-success-subdued-hover);
+        background-color: var(--p-color-bg-surface-success-hover);
       }
     }
 
@@ -335,7 +335,7 @@ $loading-panel-height: 53px;
       .TableCell-first,
       .TableCell-first + .TableCell,
       .TableCell:last-child {
-        background-color: var(--p-color-bg-subdued);
+        background-color: var(--p-color-bg-surface-secondary);
       }
     }
 
@@ -347,7 +347,7 @@ $loading-panel-height: 53px;
       .TableCell-first,
       .TableCell-first + .TableCell,
       .TableCell:last-child {
-        background-color: var(--p-color-bg-subdued-hover);
+        background-color: var(--p-color-bg-surface-secondary-hover);
       }
     }
   }
@@ -377,8 +377,8 @@ $loading-panel-height: 53px;
 }
 
 .TableRow-subdued {
-  color: var(--p-color-text-subdued);
-  background: var(--p-color-bg-subdued);
+  color: var(--p-color-text-secondary);
+  background: var(--p-color-bg-surface-secondary);
 }
 
 .TableRow-disabled {
@@ -423,7 +423,7 @@ $loading-panel-height: 53px;
     .TableCell-first,
     .TableCell-first + .TableCell,
     .TableCell:last-child {
-      background-color: var(--p-color-bg-hover);
+      background-color: var(--p-color-bg-surface-hover);
     }
   }
 
@@ -437,7 +437,7 @@ $loading-panel-height: 53px;
     .TableCell-first,
     .TableCell-first + .TableCell,
     .TableCell:last-child {
-      background-color: var(--p-color-bg-primary-subdued-selected);
+      background-color: var(--p-color-bg-surface-brand-selected);
     }
   }
 
@@ -451,7 +451,7 @@ $loading-panel-height: 53px;
     .TableCell-first,
     .TableCell-first + .TableCell,
     .TableCell:last-child {
-      background-color: var(--p-color-bg-primary-subdued-hover);
+      background-color: var(--p-color-bg-surface-brand-hover);
     }
   }
 }
@@ -463,7 +463,7 @@ $loading-panel-height: 53px;
   --pc-index-table-heading-padding-y: var(--p-space-150);
   --pc-index-table-checkbox-offset-left: var(--p-space-300);
   --pc-index-table-checkbox-offset-right: var(--p-space-200);
-  background: var(--p-color-bg-subdued);
+  background: var(--p-color-bg-surface-secondary);
   padding: var(--pc-index-table-heading-padding-y)
     var(--pc-index-table-heading-padding-x);
   // stylelint-enable
@@ -619,7 +619,7 @@ $loading-panel-height: 53px;
   bottom: calc(-1 * var(--p-border-width-050));
   width: 100%;
   height: var(--p-border-width-050);
-  border-bottom: var(--p-border-width-050) dotted var(--p-color-border-strong);
+  border-bottom: var(--p-border-width-050) dotted var(--p-color-border-tertiary);
 }
 
 .TableHeadingTooltipUnderlinePlaceholder {
@@ -747,7 +747,7 @@ $loading-panel-height: 53px;
   .statusSuccess {
     // stylelint-disable-next-line selector-max-combinators, selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
     .TableCell:first-child {
-      background-color: var(--p-color-bg-primary-subdued-selected);
+      background-color: var(--p-color-bg-surface-brand-selected);
     }
   }
 
@@ -769,29 +769,29 @@ $loading-panel-height: 53px;
   .statusWarning {
     // stylelint-disable-next-line -- added crtical status for suspended products
     .TableCell:first-child {
-      background-color: var(--p-color-bg-warning-subdued-experimental);
+      background-color: var(--p-color-bg-surface-warning);
     }
   }
 
   .statusSubdued {
     // stylelint-disable-next-line selector-max-combinators, selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
     .TableCell:first-child {
-      background-color: var(--p-color-bg-subdued);
-      color: var(--p-color-text-subdued);
+      background-color: var(--p-color-bg-surface-secondary);
+      color: var(--p-color-text-secondary);
     }
   }
   // This is to bust specificity with Table-unselectable and TableCel:first-child bg color above.
   .TableRow-subdued:not(.TableRow-hovered) {
     // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- bg color override
     .TableCell:first-child {
-      background-color: var(--p-color-bg-subdued);
+      background-color: var(--p-color-bg-surface-secondary);
     }
   }
 
   .TableRow-hovered {
     // stylelint-disable-next-line selector-max-combinators, selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
     .TableCell:first-child {
-      background-color: var(--p-color-bg-hover);
+      background-color: var(--p-color-bg-surface-hover);
     }
   }
 }
@@ -829,37 +829,37 @@ $loading-panel-height: 53px;
   // stylelint-disable selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
   .statusSuccess {
     .TableCell:last-child {
-      background-color: var(--p-color-bg-success-subdued);
+      background-color: var(--p-color-bg-surface-success);
     }
   }
 
   .statusCritical {
     .TableCell:last-child {
-      background-color: var(--p-color-bg-critical-subdued);
+      background-color: var(--p-color-bg-surface-critical);
     }
   }
 
   .statusWarning {
     .TableCell:last-child {
-      background-color: var(--p-color-bg-warning-subdued-experimental);
+      background-color: var(--p-color-bg-surface-warning);
     }
   }
 
   .statusSubdued {
     .TableCell:last-child {
-      background-color: var(--p-color-bg-subdued);
-      color: var(--p-color-text-subdued);
+      background-color: var(--p-color-bg-surface-secondary);
+      color: var(--p-color-text-secondary);
     }
   }
 
   .TableRow-selected {
     .TableCell:last-child {
-      background-color: var(--p-color-bg-primary-subdued-selected);
+      background-color: var(--p-color-bg-surface-brand-selected);
     }
   }
 
   .TableRow-selected.TableRow-subdued {
-    color: var(--p-color-text-subdued);
+    color: var(--p-color-text-secondary);
   }
 
   .TableRow-hovered {
@@ -867,7 +867,7 @@ $loading-panel-height: 53px;
       // deliberately moved it down in the cascade because otherwise the
       // selected state overrides the hover state and I think we want it the
       // other way around.
-      background-color: var(--p-color-bg-hover);
+      background-color: var(--p-color-bg-surface-hover);
     }
   }
 
@@ -876,7 +876,7 @@ $loading-panel-height: 53px;
       // deliberately moved it down in the cascade because otherwise the
       // selected state overrides the hover state and I think we want it the
       // other way around.
-      background-color: var(--p-color-bg-primary-subdued-hover);
+      background-color: var(--p-color-bg-surface-brand-hover);
     }
   }
 }
@@ -947,7 +947,7 @@ $loading-panel-height: 53px;
 .StickyTableHeader-isSticky {
   visibility: visible;
   box-shadow: var(--p-shadow-100);
-  background-color: var(--p-color-bg-subdued);
+  background-color: var(--p-color-bg-surface-secondary);
 }
 
 .IndexTable:hover {
@@ -989,7 +989,7 @@ $loading-panel-height: 53px;
   position: static;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   z-index: var(--pc-index-table-bulk-actions);
-  background: var(--p-color-bg);
+  background: var(--p-color-bg-surface);
   padding: var(--p-space-150) var(--p-space-200) var(--p-space-150)
     var(--p-space-300);
   line-height: var(--p-font-line-height-500);
@@ -1005,7 +1005,7 @@ $scroll-bar-size: var(--p-space-200);
   z-index: var(--pc-index-table-scroll-bar);
   bottom: 0;
   padding: var(--p-space-050);
-  background-color: var(--p-color-bg);
+  background-color: var(--p-color-bg-surface);
 
   @media #{$p-breakpoints-sm-up} {
     border-bottom-right-radius: var(--p-border-radius-200);
@@ -1045,7 +1045,7 @@ $scroll-bar-size: var(--p-space-200);
 
 .ScrollBar::-webkit-scrollbar-thumb {
   border-radius: var(--p-border-radius-100);
-  background-color: var(--p-color-border-strong);
+  background-color: var(--p-color-border-tertiary);
   transition: background-color var(--p-motion-duration-100)
     var(--p-motion-ease-out);
 }
diff --git a/polaris-react/src/components/KeyboardKey/KeyboardKey.scss b/polaris-react/src/components/KeyboardKey/KeyboardKey.scss
index 1155ef0f2d5..582a266f56a 100644
--- a/polaris-react/src/components/KeyboardKey/KeyboardKey.scss
+++ b/polaris-react/src/components/KeyboardKey/KeyboardKey.scss
@@ -9,9 +9,9 @@ $key-base-dimension: 28px;
   margin: 0 var(--p-space-050) var(--p-space-050);
   margin-bottom: 0;
   padding: 0 var(--p-space-200);
-  background: var(--p-color-bg-secondary-experimental);
+  background: var(--p-color-bg-surface-tertiary);
   border-radius: var(--p-border-radius-100);
-  color: var(--p-color-text-subdued);
+  color: var(--p-color-text-secondary);
   font-size: var(--p-font-size-350);
   font-weight: var(--p-font-weight-medium);
   font-family: var(--p-font-family-sans);
diff --git a/polaris-react/src/components/Labelled/Labelled.scss b/polaris-react/src/components/Labelled/Labelled.scss
index 993d87b7a65..c69e62b7595 100644
--- a/polaris-react/src/components/Labelled/Labelled.scss
+++ b/polaris-react/src/components/Labelled/Labelled.scss
@@ -15,7 +15,7 @@
 }
 
 .readOnly > .LabelWrapper {
-  color: var(--p-color-text-subdued);
+  color: var(--p-color-text-secondary);
 }
 
 .LabelWrapper {
diff --git a/polaris-react/src/components/Layout/Layout.scss b/polaris-react/src/components/Layout/Layout.scss
index 3390ce52bac..08d19fcd640 100644
--- a/polaris-react/src/components/Layout/Layout.scss
+++ b/polaris-react/src/components/Layout/Layout.scss
@@ -62,7 +62,7 @@ $relative-size: $primary-basis / $secondary-basis;
   margin-left: var(--p-space-400);
 
   + .AnnotatedSection {
-    border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
+    border-top: var(--p-border-width-025) solid var(--p-color-border-secondary);
     padding-top: var(--p-space-400);
   }
 }
diff --git a/polaris-react/src/components/LegacyCard/LegacyCard.scss b/polaris-react/src/components/LegacyCard/LegacyCard.scss
index f973958f115..be0e624272b 100644
--- a/polaris-react/src/components/LegacyCard/LegacyCard.scss
+++ b/polaris-react/src/components/LegacyCard/LegacyCard.scss
@@ -120,7 +120,7 @@
 }
 
 .Section-subdued {
-  background-color: var(--p-color-bg-subdued);
+  background-color: var(--p-color-bg-surface-secondary);
   padding: var(--p-space-300) var(--p-space-400);
 
   @media (-ms-high-contrast: active) {
diff --git a/polaris-react/src/components/LegacyFilters/LegacyFilters.scss b/polaris-react/src/components/LegacyFilters/LegacyFilters.scss
index 2d9fafcc12e..4847d9a6b82 100644
--- a/polaris-react/src/components/LegacyFilters/LegacyFilters.scss
+++ b/polaris-react/src/components/LegacyFilters/LegacyFilters.scss
@@ -94,7 +94,7 @@ $list-filters-footer-height: 70px;
 
   &:hover {
     cursor: pointer;
-    background-color: var(--p-color-bg-hover);
+    background-color: var(--p-color-bg-surface-hover);
     outline: var(--p-border-width-025) solid transparent;
   }
 
@@ -133,7 +133,7 @@ $list-filters-footer-height: 70px;
     left: var(--p-space-400);
     width: calc(100% - var(--p-space-800));
     height: var(--p-space-025);
-    background-color: var(--p-color-bg-secondary-experimental);
+    background-color: var(--p-color-bg-surface-tertiary);
     display: block;
   }
 
@@ -154,7 +154,7 @@ $list-filters-footer-height: 70px;
     left: var(--p-space-400);
     width: calc(100% - var(--p-space-800));
     height: var(--p-space-025);
-    background-color: var(--p-color-bg-secondary-experimental);
+    background-color: var(--p-color-bg-surface-tertiary);
     display: block;
   }
 
@@ -177,7 +177,7 @@ $list-filters-footer-height: 70px;
     left: var(--p-space-400);
     width: calc(100% - var(--p-space-800));
     height: var(--p-space-025);
-    background-color: var(--p-color-bg-secondary-experimental);
+    background-color: var(--p-color-bg-surface-tertiary);
     display: block;
   }
 
diff --git a/polaris-react/src/components/LegacyTabs/LegacyTabs.scss b/polaris-react/src/components/LegacyTabs/LegacyTabs.scss
index 37d4e058bb5..1c0615ab10b 100644
--- a/polaris-react/src/components/LegacyTabs/LegacyTabs.scss
+++ b/polaris-react/src/components/LegacyTabs/LegacyTabs.scss
@@ -59,7 +59,7 @@ $item-vertical-padding: $item-min-height * 0.5;
 
     .Title {
       font-weight: var(--p-font-weight-semibold);
-      color: var(--p-color-text-primary);
+      color: var(--p-color-text-brand);
       background-color: transparent;
 
       // stylelint-disable-next-line selector-max-specificity -- generated by polaris-migrator DO NOT COPY
@@ -83,7 +83,7 @@ $item-vertical-padding: $item-min-height * 0.5;
   &:focus-visible {
     .Title {
       font-weight: var(--p-font-weight-semibold);
-      color: var(--p-color-text-primary);
+      color: var(--p-color-text-brand);
     }
 
     &:not(:active) {
@@ -102,22 +102,22 @@ $item-vertical-padding: $item-min-height * 0.5;
 
 .Tab-selected {
   font-weight: var(--p-font-weight-semibold);
-  color: var(--p-color-text-primary);
+  color: var(--p-color-text-brand);
 
   &:focus .Title {
     outline: var(--p-border-width-050) solid transparent;
     // stylelint-disable-next-line  selector-max-specificity -- generated by polaris-migrator DO NOT COPY
     &::before {
-      background: var(--p-color-bg-primary);
+      background: var(--p-color-bg-fill-brand);
     }
   }
 
   .Title {
     outline: var(--p-border-width-050) solid transparent;
-    color: var(--p-color-text-primary);
+    color: var(--p-color-text-brand);
 
     &::before {
-      background: var(--p-color-bg-primary);
+      background: var(--p-color-bg-fill-brand);
     }
   }
 }
@@ -129,7 +129,7 @@ $item-vertical-padding: $item-min-height * 0.5;
   display: block;
   padding: var(--p-space-150) var(--p-space-300);
   min-width: $item-min-width;
-  color: var(--p-color-text-primary);
+  color: var(--p-color-text-brand);
   font-weight: var(--p-font-weight-semibold);
 
   &::before {
@@ -180,11 +180,11 @@ $item-vertical-padding: $item-min-height * 0.5;
   }
 
   &:hover {
-    background-color: var(--p-color-bg-hover);
+    background-color: var(--p-color-bg-surface-hover);
   }
 
   &:active {
-    background-color: var(--p-color-bg-primary-subdued-active);
+    background-color: var(--p-color-bg-surface-brand-active);
   }
 
   &:focus-visible:not(:active) {
diff --git a/polaris-react/src/components/Link/Link.scss b/polaris-react/src/components/Link/Link.scss
index 3550b823ec5..d19839d3659 100644
--- a/polaris-react/src/components/Link/Link.scss
+++ b/polaris-react/src/components/Link/Link.scss
@@ -20,8 +20,7 @@
 
   &:focus,
   &:focus-visible {
-    outline: var(--p-color-border-interactive-focus) auto
-      var(--p-border-width-050);
+    outline: var(--p-color-border-focus) auto var(--p-border-width-050);
     outline-offset: var(--p-space-050);
     border-radius: var(--p-border-radius-150);
   }
@@ -32,7 +31,7 @@
   }
 
   @media print {
-    text-decoration-color: var(--p-color-border-strong);
+    text-decoration-color: var(--p-color-border-tertiary);
   }
 }
 
diff --git a/polaris-react/src/components/Listbox/Listbox.stories.tsx b/polaris-react/src/components/Listbox/Listbox.stories.tsx
index a9ea5df9e22..4fb4595bc2e 100644
--- a/polaris-react/src/components/Listbox/Listbox.stories.tsx
+++ b/polaris-react/src/components/Listbox/Listbox.stories.tsx
@@ -385,7 +385,7 @@ export function WithSearch() {
     <Listbox.Action value={actionValue}>
       <span
         style={{
-          color: 'var(--p-color-text-subdued)',
+          color: 'var(--p-color-text-secondary)',
         }}
       >
         Show all 111 segments
diff --git a/polaris-react/src/components/Listbox/components/TextOption/TextOption.scss b/polaris-react/src/components/Listbox/components/TextOption/TextOption.scss
index 912d9d85bac..67c00e18476 100644
--- a/polaris-react/src/components/Listbox/components/TextOption/TextOption.scss
+++ b/polaris-react/src/components/Listbox/components/TextOption/TextOption.scss
@@ -20,7 +20,7 @@
   }
 
   &:hover {
-    background-color: var(--p-color-bg-hover);
+    background-color: var(--p-color-bg-surface-hover);
 
     &:not(.disabled) {
       background-color: var(--p-color-bg-surface-secondary-hover);
@@ -32,7 +32,7 @@
   }
 
   &:active {
-    background-color: var(--p-color-bg-active);
+    background-color: var(--p-color-bg-surface-active);
 
     &:not(.disabled) {
       background-color: var(--p-color-bg-surface-secondary-active);
diff --git a/polaris-react/src/components/MessageIndicator/MessageIndicator.scss b/polaris-react/src/components/MessageIndicator/MessageIndicator.scss
index 58f42ca37d0..063c5a968ca 100644
--- a/polaris-react/src/components/MessageIndicator/MessageIndicator.scss
+++ b/polaris-react/src/components/MessageIndicator/MessageIndicator.scss
@@ -15,5 +15,5 @@ $indicator-position: -3px;
   height: $indicator-size;
   border-radius: var(--p-border-radius-full);
   background-color: var(--p-color-icon-info);
-  border: solid var(--p-border-width-050) var(--p-color-bg-app);
+  border: solid var(--p-border-width-050) var(--p-color-bg);
 }
diff --git a/polaris-react/src/components/Navigation/Navigation.scss b/polaris-react/src/components/Navigation/Navigation.scss
index e52665532b4..789196cdc31 100644
--- a/polaris-react/src/components/Navigation/Navigation.scss
+++ b/polaris-react/src/components/Navigation/Navigation.scss
@@ -303,7 +303,7 @@ $nav-max-width: 360px;
 
   &:hover,
   &:focus-visible {
-    color: var(--p-color-text-primary-hover);
+    color: var(--p-color-text-brand-hover);
   }
 
   :focus-visible {
@@ -315,7 +315,7 @@ $nav-max-width: 360px;
   &:active:hover {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include no-focus-ring;
-    color: var(--p-color-text-primary);
+    color: var(--p-color-text-brand);
     background-color: var(--p-color-nav-bg-surface-active);
   }
 
@@ -505,8 +505,7 @@ $nav-max-width: 360px;
   &:focus-visible:not(:active) {
     /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- override focus ring mixin */
     @include no-focus-ring;
-    outline: var(--p-border-width-050) solid
-      var(--p-color-border-interactive-focus);
+    outline: var(--p-border-width-050) solid var(--p-color-border-focus);
   }
 
   svg {
@@ -521,7 +520,7 @@ $nav-max-width: 360px;
   &:hover,
   &:focus,
   &:active {
-    background-color: var(--p-color-bg-transparent-hover-experimental);
+    background-color: var(--p-color-bg-fill-transparent-hover);
 
     svg {
       fill: var(--p-color-icon-hover);
@@ -577,7 +576,7 @@ $nav-max-width: 360px;
     font-size: 15px;
     font-weight: var(--p-font-weight-regular);
     line-height: nav(item-line-height);
-    color: var(--p-color-text-subdued);
+    color: var(--p-color-text-secondary);
     position: relative;
     padding-left: calc(var(--p-space-800) + var(--p-space-100));
 
@@ -596,7 +595,7 @@ $nav-max-width: 360px;
 
     &:is(:hover, :focus-visible, :focus-within) {
       background: var(--p-color-nav-bg);
-      color: var(--p-color-text-primary);
+      color: var(--p-color-text-brand);
     }
 
     &:hover {
@@ -655,7 +654,7 @@ $nav-max-width: 360px;
 
     &:is(:hover, :focus-visible, :focus-within) {
       background: var(--p-color-nav-bg-surface-selected);
-      color: var(--p-color-text-primary);
+      color: var(--p-color-text-brand);
     }
 
     // stylelint-disable-next-line selector-max-specificity -- set active styles
@@ -664,7 +663,7 @@ $nav-max-width: 360px;
       // stylelint-disable-next-line -- remove focus ring
       @include no-focus-ring;
       background: var(--p-color-nav-bg-surface-active);
-      color: var(--p-color-text-primary);
+      color: var(--p-color-text-brand);
     }
 
     &:hover {
@@ -678,7 +677,7 @@ $nav-max-width: 360px;
     &:active {
       // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
       @include no-focus-ring;
-      color: var(--p-color-text-primary);
+      color: var(--p-color-text-brand);
     }
   }
 
@@ -820,8 +819,7 @@ $nav-max-width: 360px;
     &:focus-visible:not(:active) {
       /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- remove focus ring mixin */
       @include no-focus-ring;
-      outline: var(--p-border-width-050) solid
-        var(--p-color-border-interactive-focus);
+      outline: var(--p-border-width-050) solid var(--p-color-border-focus);
     }
 
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -846,7 +844,7 @@ $nav-max-width: 360px;
 
     &:hover,
     &:focus {
-      background: var(--p-color-bg-transparent-hover-experimental);
+      background: var(--p-color-bg-fill-transparent-hover);
 
       // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
       svg {
@@ -862,7 +860,7 @@ $nav-max-width: 360px;
 
         // stylelint-disable-next-line -- high contrast override
         img {
-          filter: var(--p-color-icon-primary);
+          filter: var(--p-color-icon-brand);
         }
       }
     }
@@ -886,7 +884,7 @@ $nav-max-width: 360px;
     // stylelint-disable-next-line selector-max-specificity -- generated by polaris-migrator DO NOT COPY
     &:active,
     &:active:hover {
-      background: var(--p-color-bg-app-active);
+      background: var(--p-color-bg-surface-active);
       // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
       @include no-focus-ring;
 
@@ -916,7 +914,7 @@ $nav-max-width: 360px;
     }
 
     img {
-      filter: var(--p-color-icon-primary);
+      filter: var(--p-color-icon-brand);
     }
   }
 
@@ -927,7 +925,7 @@ $nav-max-width: 360px;
   }
 
   &:active {
-    background-color: var(--p-color-bg-app-active);
+    background-color: var(--p-color-bg-surface-active);
   }
 }
 
diff --git a/polaris-react/src/components/Navigation/_variables.scss b/polaris-react/src/components/Navigation/_variables.scss
index 292a9e0ca60..9cb9bbb9534 100644
--- a/polaris-react/src/components/Navigation/_variables.scss
+++ b/polaris-react/src/components/Navigation/_variables.scss
@@ -50,8 +50,7 @@ $nav-animation-variables: (
     /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- override focus ring */
     @include no-focus-ring;
     z-index: var(--p-z-index-1);
-    outline: var(--p-border-width-050) solid
-      var(--p-color-border-interactive-focus);
+    outline: var(--p-border-width-050) solid var(--p-color-border-focus);
   }
 
   &:active,
diff --git a/polaris-react/src/components/OptionList/components/Option/Option.scss b/polaris-react/src/components/OptionList/components/Option/Option.scss
index 616faa0ae40..c9668664e5e 100644
--- a/polaris-react/src/components/OptionList/components/Option/Option.scss
+++ b/polaris-react/src/components/OptionList/components/Option/Option.scss
@@ -36,8 +36,7 @@ $control-vertical-adjustment: 2px;
 
   // stylelint-disable-next-line selector-max-specificity -- required for focus-visible support
   &.focused:focus-visible:not(:active) {
-    outline: var(--p-border-width-050) solid
-      var(--p-color-border-interactive-focus);
+    outline: var(--p-border-width-050) solid var(--p-color-border-focus);
     outline-offset: var(--p-space-025);
     background-color: var(--p-color-bg-surface-secondary-hover);
   }
@@ -151,7 +150,7 @@ $control-vertical-adjustment: 2px;
   margin-left: var(--p-space-200);
 
   svg {
-    fill: var(--p-color-icon-primary);
+    fill: var(--p-color-icon-brand);
   }
 }
 
diff --git a/polaris-react/src/components/Page/components/Header/Header.scss b/polaris-react/src/components/Page/components/Header/Header.scss
index 8a7c561808a..cb4d2074a0d 100644
--- a/polaris-react/src/components/Page/components/Header/Header.scss
+++ b/polaris-react/src/components/Page/components/Header/Header.scss
@@ -28,11 +28,11 @@ $action-menu-rollup-computed-width: 40px;
     }
 
     &:is(:hover, :focus-visible) {
-      background-color: var(--p-color-bg-strong-hover);
+      background-color: var(--p-color-bg-fill-tertiary-hover);
     }
 
     &:focus {
-      background-color: var(--p-color-bg-strong-active);
+      background-color: var(--p-color-bg-fill-tertiary-active);
       /* stylelint-disable-next-line declaration-no-important -- override box shadow */
       box-shadow: var(--p-shadow-inset-200) !important;
     }
diff --git a/polaris-react/src/components/Page/components/Header/components/Title/Title.scss b/polaris-react/src/components/Page/components/Header/components/Title/Title.scss
index 0edb7fa6f7c..ff53c322e6b 100644
--- a/polaris-react/src/components/Page/components/Header/components/Title/Title.scss
+++ b/polaris-react/src/components/Page/components/Header/components/Title/Title.scss
@@ -14,7 +14,7 @@
 
 .SubTitle {
   margin-top: var(--p-space-050);
-  color: var(--p-color-text-subdued);
+  color: var(--p-color-text-secondary);
 
   &.SubtitleCompact {
     margin-top: var(--p-space-050);
diff --git a/polaris-react/src/components/Pagination/Pagination.scss b/polaris-react/src/components/Pagination/Pagination.scss
index 042bbbfd8ec..03007daa900 100644
--- a/polaris-react/src/components/Pagination/Pagination.scss
+++ b/polaris-react/src/components/Pagination/Pagination.scss
@@ -6,10 +6,10 @@
     border: none !important;
     /* stylelint-disable-next-line declaration-no-important -- override box-shadow */
     box-shadow: none !important;
-    background-color: var(--p-color-bg-strong);
+    background-color: var(--p-color-bg-fill-tertiary);
 
     &:hover {
-      background-color: var(--p-color-bg-strong-hover);
+      background-color: var(--p-color-bg-fill-tertiary-hover);
     }
 
     &:active {
@@ -19,14 +19,14 @@
 
     &:active,
     &:focus {
-      background-color: var(--p-color-bg-strong-active);
+      background-color: var(--p-color-bg-fill-tertiary-active);
     }
   }
 
   &.table {
     button {
       --button-min-height: var(--p-space-600);
-      background-color: var(--p-color-bg-subdued);
+      background-color: var(--p-color-bg-surface-secondary);
       min-height: var(--button-min-height);
       min-width: var(--button-min-height);
       height: var(--button-min-height);
@@ -35,7 +35,7 @@
 
       /* stylelint-disable -- override pagination buttons in tables  */
       &:hover {
-        background-color: var(--p-color-bg-strong-hover);
+        background-color: var(--p-color-bg-fill-tertiary-hover);
 
         svg {
           fill: var(--p-color-icon-hover);
@@ -44,7 +44,7 @@
 
       &:active,
       &:focus {
-        background-color: var(--p-color-bg-strong-active);
+        background-color: var(--p-color-bg-fill-tertiary-active);
 
         svg {
           fill: var(--p-color-icon-active);
diff --git a/polaris-react/src/components/Popover/Popover.scss b/polaris-react/src/components/Popover/Popover.scss
index e18e3527bd0..edd0cb90ddc 100644
--- a/polaris-react/src/components/Popover/Popover.scss
+++ b/polaris-react/src/components/Popover/Popover.scss
@@ -58,7 +58,7 @@ $vertical-motion-offset: -5px;
 .ContentContainer {
   position: relative;
   overflow: hidden;
-  background: var(--p-color-bg);
+  background: var(--p-color-bg-surface);
   border-radius: var(--p-space-300);
 
   /* Prevent Scrollable's box shadows overflowing the rounded corners of this
diff --git a/polaris-react/src/components/Popover/Popover.stories.tsx b/polaris-react/src/components/Popover/Popover.stories.tsx
index 8eef6c9a9f2..ea4dd371767 100644
--- a/polaris-react/src/components/Popover/Popover.stories.tsx
+++ b/polaris-react/src/components/Popover/Popover.stories.tsx
@@ -657,7 +657,7 @@ export function WithSearchableListbox() {
     <Listbox.Action value={actionValue}>
       <span
         style={{
-          color: 'var(--p-color-text-subdued)',
+          color: 'var(--p-color-text-secondary)',
         }}
       >
         Show all 111 segments
diff --git a/polaris-react/src/components/ProgressBar/ProgressBar.scss b/polaris-react/src/components/ProgressBar/ProgressBar.scss
index 091aa3885d8..12db40c7452 100644
--- a/polaris-react/src/components/ProgressBar/ProgressBar.scss
+++ b/polaris-react/src/components/ProgressBar/ProgressBar.scss
@@ -39,29 +39,29 @@
 
 .toneHighlight {
   // stylelint-disable -- Polaris component custom properties
-  --pc-progress-bar-background: var(--p-color-bg-strong);
-  --pc-progress-bar-indicator: var(--p-color-bg-info-strong);
+  --pc-progress-bar-background: var(--p-color-bg-fill-tertiary);
+  --pc-progress-bar-indicator: var(--p-color-bg-fill-info);
   // stylelint-enable
 }
 
 .tonePrimary {
   // stylelint-disable -- Polaris component custom properties
   --pc-progress-bar-background: var(--p-color-bg-fill-tertiary);
-  --pc-progress-bar-indicator: var(--p-color-bg-primary);
+  --pc-progress-bar-indicator: var(--p-color-bg-fill-brand);
   // stylelint-enable
 }
 
 .toneSuccess {
   // stylelint-disable -- Polaris component custom properties
-  --pc-progress-bar-background: var(--p-color-bg-strong);
-  --pc-progress-bar-indicator: var(--p-color-bg-success-strong);
+  --pc-progress-bar-background: var(--p-color-bg-fill-tertiary);
+  --pc-progress-bar-indicator: var(--p-color-bg-fill-success);
   // stylelint-enable
 }
 
 .toneCritical {
   // stylelint-disable -- Polaris component custom properties
-  --pc-progress-bar-background: var(--p-color-bg-strong);
-  --pc-progress-bar-indicator: var(--p-color-bg-critical-strong);
+  --pc-progress-bar-background: var(--p-color-bg-fill-tertiary);
+  --pc-progress-bar-indicator: var(--p-color-bg-fill-critical);
   // stylelint-enable
 }
 
diff --git a/polaris-react/src/components/RadioButton/RadioButton.scss b/polaris-react/src/components/RadioButton/RadioButton.scss
index df1885a685e..62140214774 100644
--- a/polaris-react/src/components/RadioButton/RadioButton.scss
+++ b/polaris-react/src/components/RadioButton/RadioButton.scss
@@ -11,8 +11,7 @@
   @include visually-hidden;
 
   &:focus-visible + .Backdrop {
-    outline: var(--p-border-width-050) solid
-      var(--p-color-border-interactive-focus);
+    outline: var(--p-border-width-050) solid var(--p-color-border-focus);
     outline-offset: var(--p-space-025);
 
     &::after {
@@ -27,7 +26,7 @@
     // have to ensure the specificity of these rules are maintained when hovered
     // and not hovered.
     .ChoiceLabel:hover & {
-      border-color: var(--p-color-border-interactive);
+      border-color: var(--p-color-border-emphasis);
 
       &::before {
         background-color: var(--p-color-text-brand-on-bg-fill);
@@ -51,12 +50,12 @@
   + .Backdrop {
     .ChoiceLabel:hover & {
       cursor: pointer;
-      border-color: var(--p-color-border-input-hover);
-      background: var(--p-color-bg-input-hover-experimental);
+      border-color: var(--p-color-input-border-hover);
+      background: var(--p-color-input-bg-surface-hover);
     }
 
     .ChoiceLabel:active & {
-      border-color: var(--p-color-bg-primary);
+      border-color: var(--p-color-bg-fill-brand);
       border-width: var(--p-border-width-050);
     }
   }
@@ -99,9 +98,9 @@
   display: block;
   width: 100%;
   height: 100%;
-  border: var(--p-border-width-0165) solid var(--p-color-border-input);
+  border: var(--p-border-width-0165) solid var(--p-color-input-border);
   border-radius: var(--p-border-radius-full);
-  background-color: var(--p-color-bg-input);
+  background-color: var(--p-color-input-bg-surface);
   transition: border-color var(--p-motion-duration-100) var(--p-motion-ease-out);
 
   &::before {
diff --git a/polaris-react/src/components/RadioButton/RadioButton.stories.tsx b/polaris-react/src/components/RadioButton/RadioButton.stories.tsx
index 59faa1cc23f..a25e70c6322 100644
--- a/polaris-react/src/components/RadioButton/RadioButton.stories.tsx
+++ b/polaris-react/src/components/RadioButton/RadioButton.stories.tsx
@@ -107,7 +107,7 @@ export function WithBleed() {
       </BlockStack>
       <BlockStack gap="200">
         <Text as="h2">Bleed</Text>
-        <Box width="min-content" background="bg" borderRadius="300">
+        <Box width="min-content" background="bg-surface" borderRadius="300">
           <div
             // Flex to shrink the container to the height of the radio (ie;
             // ignore line-height)
diff --git a/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.scss b/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.scss
index ad52f4f4f9b..9442c0c5b79 100644
--- a/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.scss
+++ b/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.scss
@@ -93,7 +93,7 @@ $range-wrapper: 28px;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   height: var(--pc-range-slider-thumb-size);
   border-radius: var(--p-border-radius-full);
-  border: var(--p-border-width-025) solid var(--p-color-border-interactive);
+  border: var(--p-border-width-025) solid var(--p-color-border-emphasis);
   background: linear-gradient(
     var(--p-color-bg-interactive),
     var(--p-color-bg-interactive)
diff --git a/polaris-react/src/components/ResourceItem/ResourceItem.scss b/polaris-react/src/components/ResourceItem/ResourceItem.scss
index 853e03e1a1c..6b0b273ec11 100644
--- a/polaris-react/src/components/ResourceItem/ResourceItem.scss
+++ b/polaris-react/src/components/ResourceItem/ResourceItem.scss
@@ -23,7 +23,7 @@
   cursor: pointer;
 
   &:hover {
-    background-color: var(--p-color-bg-subdued-hover);
+    background-color: var(--p-color-bg-surface-secondary-hover);
 
     .Actions {
       // stylelint-disable-next-line selector-max-combinators -- show actions on hover
@@ -34,7 +34,7 @@
   }
 
   &:active {
-    background-color: var(--p-color-bg-active);
+    background-color: var(--p-color-bg-surface-active);
   }
 }
 
@@ -123,8 +123,7 @@
   &.focused {
     // stylelint-disable-next-line -- remove focus-ring mixin to use outline styles
     @include no-focus-ring;
-    outline: var(--p-border-width-050) solid
-      var(--p-color-border-interactive-focus);
+    outline: var(--p-border-width-050) solid var(--p-color-border-focus);
     outline-offset: calc(-1 * var(--p-space-050));
     // stylelint-disable-next-line -- custom property
     z-index: var(--pc-resource-item-clickable-stacking-order);
diff --git a/polaris-react/src/components/ResourceList/ResourceList.scss b/polaris-react/src/components/ResourceList/ResourceList.scss
index 8631237c658..2b46ec6569a 100644
--- a/polaris-react/src/components/ResourceList/ResourceList.scss
+++ b/polaris-react/src/components/ResourceList/ResourceList.scss
@@ -62,7 +62,7 @@ $item-wrapper-loading-height: 64px;
   position: relative;
   display: flex;
   width: 100%;
-  background-color: var(--p-color-bg);
+  background-color: var(--p-color-bg-surface);
   border-radius: var(--p-border-radius-200);
   // This container conditionally includes a Select component for sorting
   // It's 32px above md-up and 36px below
diff --git a/polaris-react/src/components/Select/Select.scss b/polaris-react/src/components/Select/Select.scss
index a585850e91a..1f978c56f90 100644
--- a/polaris-react/src/components/Select/Select.scss
+++ b/polaris-react/src/components/Select/Select.scss
@@ -48,7 +48,7 @@
     background-color: var(--p-color-bg-surface-disabled);
 
     &::before {
-      background-color: var(--p-color-bg-input);
+      background-color: var(--p-color-input-bg-surface);
     }
 
     &:hover {
@@ -100,7 +100,7 @@
 }
 
 .Icon svg {
-  fill: var(--p-color-icon-subdued);
+  fill: var(--p-color-icon-secondary);
 }
 
 .Input {
@@ -136,17 +136,17 @@
   right: 0;
   bottom: 0;
   left: 0;
-  border: var(--p-border-width-0165) solid var(--p-color-border-input);
+  border: var(--p-border-width-0165) solid var(--p-color-input-border);
   border-radius: var(--p-border-radius-200);
-  background-color: var(--p-color-bg-input);
+  background-color: var(--p-color-input-bg-surface);
   // stylelint-disable-next-line order/properties-order -- 'position' needs to sit below focus-ring since it will be overwritten with relative when the focus ring style is 'base'
   position: absolute;
 }
 
 .error {
   .Backdrop {
-    border-color: var(--p-color-border-critical-strong-experimental);
-    background-color: var(--p-color-bg-critical-subdued);
+    border-color: var(--p-color-border-critical-secondary);
+    background-color: var(--p-color-bg-surface-critical);
 
     // stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY
     &.hover,
@@ -159,19 +159,18 @@
   // so that errors still have red borders.
   // stylelint-disable-next-line selector-max-combinators, selector-max-specificity, selector-max-class -- generated by polaris-migrator DO NOT COPY
   .Input:focus-visible ~ .Backdrop {
-    border-color: var(--p-color-border-critical-strong-experimental);
+    border-color: var(--p-color-border-critical-secondary);
     border-width: var(--p-border-width-025);
-    background-color: var(--p-color-bg-critical-subdued);
+    background-color: var(--p-color-bg-surface-critical);
   }
 }
 
 .Input:focus-visible {
   ~ .Backdrop {
-    border-color: var(--p-color-border-input-active-experimental);
+    border-color: var(--p-color-input-border-active);
     border-width: var(--p-border-width-025);
-    background-color: var(--p-color-bg-input-active-experimental);
-    outline: var(--p-border-width-050) solid
-      var(--p-color-border-interactive-focus);
+    background-color: var(--p-color-input-bg-surface-active);
+    outline: var(--p-border-width-050) solid var(--p-color-border-focus);
     outline-offset: var(--p-space-025);
   }
 }
diff --git a/polaris-react/src/components/ShadowBevel/ShadowBevel.stories.tsx b/polaris-react/src/components/ShadowBevel/ShadowBevel.stories.tsx
index ffc6e52be65..1b30869be7e 100644
--- a/polaris-react/src/components/ShadowBevel/ShadowBevel.stories.tsx
+++ b/polaris-react/src/components/ShadowBevel/ShadowBevel.stories.tsx
@@ -12,33 +12,33 @@ export default {
 export function Default() {
   const colors: BoxProps[] = [
     {
-      background: 'bg-success-strong',
-      color: 'text-on-color',
+      background: 'bg-fill-success',
+      color: 'text-success-on-bg-fill',
     },
     {
-      background: 'bg-info-strong',
-      color: 'text-info-strong',
+      background: 'bg-fill-info',
+      color: 'text-info-on-bg-fill',
     },
     {
-      background: 'bg-warning-strong-experimental',
-      color: 'text-warning-strong',
+      background: 'bg-fill-warning',
+      color: 'text-warning-on-bg-fill',
     },
     {
-      background: 'bg-critical-strong',
-      color: 'text-on-color',
+      background: 'bg-fill-critical',
+      color: 'text-critical-on-bg-fill',
     },
   ];
 
   return (
     <BlockStack gap="500">
       <ShadowBevel boxShadow="300" borderRadius="300">
-        <Box background="bg" padding="400">
+        <Box background="bg-surface" padding="400">
           Default
         </Box>
       </ShadowBevel>
 
       <ShadowBevel boxShadow="300" borderRadius="300" bevel={false}>
-        <Box background="bg" padding="400">
+        <Box background="bg-surface" padding="400">
           With <InlineCode>bevel: false</InlineCode>
         </Box>
       </ShadowBevel>
@@ -48,7 +48,7 @@ export function Default() {
         borderRadius="300"
         bevel={{xs: false, sm: true}}
       >
-        <Box background="bg" padding="400">
+        <Box background="bg-surface" padding="400">
           With <InlineCode>bevel: {'{xs: false, sm: true}'}</InlineCode>
         </Box>
       </ShadowBevel>
@@ -58,14 +58,14 @@ export function Default() {
         borderRadius="300"
         bevel={{xs: false, sm: true, lg: false}}
       >
-        <Box background="bg" padding="400">
+        <Box background="bg-surface" padding="400">
           With{' '}
           <InlineCode>bevel: {'{xs: false, sm: true, lg: false}'}</InlineCode>
         </Box>
       </ShadowBevel>
 
       <ShadowBevel as="article" boxShadow="300" borderRadius="300">
-        <Box background="bg" padding="400">
+        <Box background="bg-surface" padding="400">
           With <InlineCode>as: article</InlineCode>
         </Box>
       </ShadowBevel>
diff --git a/polaris-react/src/components/SkeletonThumbnail/SkeletonThumbnail.scss b/polaris-react/src/components/SkeletonThumbnail/SkeletonThumbnail.scss
index e0e88bb52a5..a0a8157da7e 100644
--- a/polaris-react/src/components/SkeletonThumbnail/SkeletonThumbnail.scss
+++ b/polaris-react/src/components/SkeletonThumbnail/SkeletonThumbnail.scss
@@ -8,7 +8,7 @@
   --pc-skeleton-thumbnail-large-size: 80px;
   // stylelint-enable
   display: flex;
-  background-color: var(--p-color-bg-strong);
+  background-color: var(--p-color-bg-fill-tertiary);
   border-radius: var(--p-border-radius-200);
 
   @media screen and (-ms-high-contrast: active) {
diff --git a/polaris-react/src/components/Tabs/Tabs.scss b/polaris-react/src/components/Tabs/Tabs.scss
index 7547c4a3143..73db7ca149b 100644
--- a/polaris-react/src/components/Tabs/Tabs.scss
+++ b/polaris-react/src/components/Tabs/Tabs.scss
@@ -69,7 +69,7 @@
   border: 0;
   border-radius: var(--p-border-radius-200);
   background-color: transparent;
-  color: var(--p-color-text-primary);
+  color: var(--p-color-text-brand);
   cursor: pointer;
   text-decoration: none;
   width: 100%;
@@ -90,18 +90,18 @@
   }
 
   &:not([aria-disabled='true']):hover {
-    background-color: var(--p-color-bg-transparent-hover-experimental);
-    color: var(--p-color-text-primary);
+    background-color: var(--p-color-bg-fill-transparent-hover);
+    color: var(--p-color-text-brand);
   }
 
   &:not([aria-disabled='true']):focus {
-    background-color: var(--p-color-bg-hover);
+    background-color: var(--p-color-bg-surface-hover);
     color: var(--p-color-text);
   }
 
   &:not([aria-disabled='true']):focus-visible {
     background-color: transparent;
-    color: var(--p-color-text-primary);
+    color: var(--p-color-text-brand);
     // stylelint-disable-next-line -- set focus ring using mixin
     @include focus-ring($size: 'wide', $style: 'focused');
   }
@@ -114,8 +114,8 @@
   }
 
   &:not([aria-disabled='true']):active {
-    background-color: var(--p-color-bg-secondary-experimental);
-    color: var(--p-color-text-primary);
+    background-color: var(--p-color-bg-surface-tertiary);
+    color: var(--p-color-text-brand);
     z-index: var(--p-z-index-1);
   }
 
@@ -136,19 +136,19 @@
   color: var(--p-color-text);
 
   &[aria-disabled='true'] {
-    background: var(--p-color-bg-disabled);
+    background: var(--p-color-bg-surface-disabled);
     color: var(--p-color-text-disabled);
   }
 
   &:not([aria-disabled='true']):hover,
   &:not([aria-disabled='true']):focus {
-    background-color: var(--p-color-bg-transparent-hover-experimental);
-    color: var(--p-color-text-primary);
+    background-color: var(--p-color-bg-fill-transparent-hover);
+    color: var(--p-color-text-brand);
   }
 
   &:not([aria-disabled='true']):active {
     background-color: var(--p-color-bg-fill-transparent-selected);
-    color: var(--p-color-text-primary);
+    color: var(--p-color-text-brand);
   }
 }
 
@@ -212,12 +212,12 @@
   }
 
   &:hover {
-    background-color: var(--p-color-bg-hover);
+    background-color: var(--p-color-bg-surface-hover);
     color: var(--p-color-text);
   }
 
   &:active {
-    background-color: var(--p-color-bg-active);
+    background-color: var(--p-color-bg-surface-active);
     color: var(--p-color-text);
   }
 
@@ -246,7 +246,7 @@
   @include unstyled-button;
   height: 100%;
   background-color: transparent;
-  color: var(--p-color-text-primary);
+  color: var(--p-color-text-brand);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -267,13 +267,13 @@
   }
 
   &:not([aria-disabled='true']):hover {
-    background-color: var(--p-color-bg-transparent-hover-experimental);
-    color: var(--p-color-text-primary);
+    background-color: var(--p-color-bg-fill-transparent-hover);
+    color: var(--p-color-text-brand);
   }
 
   &:not([aria-disabled='true']):focus {
     background-color: transparent;
-    color: var(--p-color-text-primary);
+    color: var(--p-color-text-brand);
   }
 
   &:not([aria-disabled='true']):focus-visible {
@@ -283,14 +283,14 @@
   }
 
   &:not([aria-disabled='true']):active {
-    background-color: var(--p-color-bg-secondary-experimental);
+    background-color: var(--p-color-bg-surface-tertiary);
     z-index: var(--p-z-index-1);
   }
 
   &[aria-disabled='true'] {
     cursor: default;
     color: var(--p-color-text-disabled);
-    background: var(--p-color-bg-disabled);
+    background: var(--p-color-bg-surface-disabled);
 
     path {
       fill: var(--p-color-icon-disabled);
diff --git a/polaris-react/src/components/Tag/Tag.scss b/polaris-react/src/components/Tag/Tag.scss
index 2ebb9142745..f2a862377d4 100644
--- a/polaris-react/src/components/Tag/Tag.scss
+++ b/polaris-react/src/components/Tag/Tag.scss
@@ -10,7 +10,7 @@ $button-size: 20px;
   min-height: $height;
   padding: 0;
   padding-inline: calc(var(--p-space-100) + var(--p-space-050));
-  background-color: var(--p-color-bg-strong);
+  background-color: var(--p-color-bg-fill-tertiary);
   border-radius: var(--p-border-radius-200);
   color: var(--p-color-text);
 
@@ -29,7 +29,7 @@ $button-size: 20px;
     @include unstyled-button;
     cursor: pointer;
     padding: 0 calc(var(--p-space-100) + var(--p-space-050));
-    background-color: var(--p-color-bg-strong);
+    background-color: var(--p-color-bg-fill-tertiary);
     outline: var(--p-border-width-025) solid transparent;
     font-size: var(--p-font-size-325);
     line-height: var(--p-font-line-height-400);
@@ -48,7 +48,7 @@ $button-size: 20px;
     }
 
     &:active {
-      background: var(--p-color-bg-strong-active);
+      background: var(--p-color-bg-fill-tertiary-active);
     }
 
     &:disabled {
@@ -56,7 +56,7 @@ $button-size: 20px;
       cursor: default;
       pointer-events: none;
       color: var(--p-color-text-disabled);
-      border: var(--p-border-width-025) solid var(--p-color-border-strong);
+      border: var(--p-border-width-025) solid var(--p-color-border-tertiary);
     }
 
     @media #{$p-breakpoints-sm-up} {
@@ -69,11 +69,11 @@ $button-size: 20px;
     padding-inline: calc(var(--p-space-100) + var(--p-space-050));
 
     &:hover {
-      background: var(--p-color-bg-strong-hover);
+      background: var(--p-color-bg-fill-tertiary-hover);
     }
 
     &:active {
-      background: var(--p-color-bg-strong-active);
+      background: var(--p-color-bg-fill-tertiary-active);
     }
   }
 
@@ -113,14 +113,14 @@ $button-size: 20px;
   margin-left: var(--p-space-050);
   // stylelint-disable-next-line polaris/border/declaration-property-unit-disallowed-list -- override border-radius
   border-radius: 7px;
-  color: var(--p-color-icon-subdued);
+  color: var(--p-color-icon-secondary);
 
   svg {
     fill: currentColor;
   }
 
   &:hover {
-    background: var(--p-color-bg-strong-hover);
+    background: var(--p-color-bg-fill-tertiary-hover);
     color: var(--p-color-icon-active);
     outline: var(--p-border-width-025) solid transparent;
   }
@@ -129,7 +129,7 @@ $button-size: 20px;
   @include focus-ring($size: 'wide');
 
   &:focus-visible {
-    background: var(--p-color-bg-strong-hover);
+    background: var(--p-color-bg-fill-tertiary-hover);
     color: var(--p-color-icon-active);
   }
 
@@ -197,15 +197,15 @@ $button-size: 20px;
   }
 
   &:active {
-    background: var(--p-color-bg-strong-active);
+    background: var(--p-color-bg-fill-tertiary-active);
   }
 }
 
 .linkable.removable:hover {
-  background: var(--p-color-bg-strong-hover);
+  background: var(--p-color-bg-fill-tertiary-hover);
 
   // stylelint-disable-next-line selector-max-class, selector-max-specificity -- override Button background color
   .Button {
-    background: var(--p-color-bg-strong-active);
+    background: var(--p-color-bg-fill-tertiary-active);
   }
 }
diff --git a/polaris-react/src/components/TextField/TextField.scss b/polaris-react/src/components/TextField/TextField.scss
index e7c6d8e3107..73b61196482 100644
--- a/polaris-react/src/components/TextField/TextField.scss
+++ b/polaris-react/src/components/TextField/TextField.scss
@@ -17,7 +17,7 @@ $spinner-icon-size: 12px;
   cursor: text;
 
   svg {
-    fill: var(--p-color-icon-subdued);
+    fill: var(--p-color-icon-secondary);
   }
 
   // only show the clear button when focused within the textfield
@@ -40,8 +40,8 @@ $spinner-icon-size: 12px;
     > .Input:hover:not(:focus-visible) {
     // stylelint-disable-next-line -- set Backdrop styles
     ~ .Backdrop {
-      border-color: var(--p-color-border-input-hover);
-      background-color: var(--p-color-bg-input-hover-experimental);
+      border-color: var(--p-color-input-border-hover);
+      background-color: var(--p-color-input-bg-surface-hover);
     }
   }
 }
@@ -70,14 +70,13 @@ $spinner-icon-size: 12px;
 
   // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- outline based on child focus requires complex specificity
   ~ .Backdrop {
-    border-color: var(--p-color-border-input-active-experimental);
+    border-color: var(--p-color-input-border-active);
     border-width: var(--p-border-width-025);
-    background-color: var(--p-color-bg-input-active-experimental);
+    background-color: var(--p-color-input-bg-surface-active);
 
     // stylelint-disable-next-line -- remove focus ring mixin
     @include no-focus-ring;
-    outline: var(--p-border-width-050) solid
-      var(--p-color-border-interactive-focus);
+    outline: var(--p-border-width-050) solid var(--p-color-border-focus);
     outline-offset: var(--p-space-025);
   }
 }
@@ -86,8 +85,8 @@ $spinner-icon-size: 12px;
   // stylelint-disable-next-line -- set Backdrop styles
   .Input:hover ~ .Backdrop,
   .Input:focus-visible ~ .Backdrop {
-    border-color: var(--p-color-border-critical-strong-experimental);
-    background-color: var(--p-color-bg-critical-subdued);
+    border-color: var(--p-color-border-critical-secondary);
+    background-color: var(--p-color-bg-surface-critical);
   }
 
   // stylelint-disable-next-line -- set Backdrop styles
@@ -98,8 +97,8 @@ $spinner-icon-size: 12px;
 
   // stylelint-disable-next-line selector-max-class, selector-max-combinators -- generated by polaris-migrator DO NOT COPY
   > .Input ~ .Backdrop {
-    background-color: var(--p-color-bg-critical-subdued);
-    border-color: var(--p-color-border-critical-strong-experimental);
+    background-color: var(--p-color-bg-surface-critical);
+    border-color: var(--p-color-border-critical-secondary);
 
     // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
     &::after {
@@ -111,7 +110,7 @@ $spinner-icon-size: 12px;
 // stylelint-disable -- specificity bump for readOnly styles to override
 .readOnly.readOnly {
   > .Input {
-    color: var(--p-color-text-subdued);
+    color: var(--p-color-text-secondary);
   }
 
   > .Backdrop {
@@ -257,8 +256,8 @@ $spinner-icon-size: 12px;
   right: 0;
   bottom: 0;
   left: 0;
-  background-color: var(--p-color-bg-input);
-  border: var(--p-border-width-0165) solid var(--p-color-border-input);
+  background-color: var(--p-color-input-bg-surface);
+  border: var(--p-border-width-0165) solid var(--p-color-input-border);
   // stylelint-disable-next-line -- hard coded to address accessbility issue https://github.com/Shopify/polaris/issues/7838
   border-top-color: #898f94;
   border-radius: var(--p-border-radius-200);
@@ -411,7 +410,7 @@ $spinner-icon-size: 12px;
   // stylelint-disable -- Polaris component custom properties
   --pc-text-field-spinner-border-radius: calc(var(--p-border-radius-100) - 2px);
   // stylelint-enable
-  background: var(--p-color-bg-strong);
+  background: var(--p-color-bg-fill-tertiary);
   border-radius: var(--p-border-radius-100);
   display: flex;
   flex: 1 1 0%;
@@ -421,7 +420,7 @@ $spinner-icon-size: 12px;
   border: none;
 
   &:hover {
-    background: var(--p-color-bg-strong-hover);
+    background: var(--p-color-bg-fill-tertiary-hover);
   }
 
   &:focus {
diff --git a/polaris-react/src/components/Tooltip/Tooltip.stories.tsx b/polaris-react/src/components/Tooltip/Tooltip.stories.tsx
index 3208c030f13..9c49d9b5147 100644
--- a/polaris-react/src/components/Tooltip/Tooltip.stories.tsx
+++ b/polaris-react/src/components/Tooltip/Tooltip.stories.tsx
@@ -320,7 +320,7 @@ export function ActivatorAsDiv() {
 
 export function WithSuffix() {
   return (
-    <Box padding="1600" background="bg">
+    <Box padding="1600" background="bg-surface">
       <InlineStack>
         <ButtonGroup variant="segmented" fullWidth>
           <Tooltip
diff --git a/polaris-react/src/components/TopBar/TopBar.scss b/polaris-react/src/components/TopBar/TopBar.scss
index 8e3cc1dbe93..8480d8c9657 100644
--- a/polaris-react/src/components/TopBar/TopBar.scss
+++ b/polaris-react/src/components/TopBar/TopBar.scss
@@ -70,8 +70,7 @@ $right-column: 1fr;
   display: block;
 
   &:focus-visible {
-    outline: var(--p-border-width-050) solid
-      var(--p-color-border-interactive-focus);
+    outline: var(--p-border-width-050) solid var(--p-color-border-focus);
     outline-offset: var(--p-space-150);
     border-radius: var(--p-border-radius-200);
   }
@@ -103,11 +102,11 @@ $right-column: 1fr;
     var(--p-motion-duration-50);
 
   &.focused:active {
-    background-color: var(--p-color-bg-inverse-hover);
+    background-color: var(--p-color-bg-fill-inverse-hover);
   }
 
   &:hover {
-    background-color: var(--p-color-bg-inverse-hover);
+    background-color: var(--p-color-bg-fill-inverse-hover);
   }
 
   // This increases hit point size.
diff --git a/polaris-react/src/components/TopBar/components/Menu/Menu.scss b/polaris-react/src/components/TopBar/components/Menu/Menu.scss
index 30547f7485c..a219022b589 100644
--- a/polaris-react/src/components/TopBar/components/Menu/Menu.scss
+++ b/polaris-react/src/components/TopBar/components/Menu/Menu.scss
@@ -34,7 +34,7 @@ $activator-variables: (
   transition: background-color var(--p-motion-duration-100);
   margin-right: var(--p-space-200);
   border-radius: var(--p-border-radius-200);
-  background-color: var(--p-color-bg-inset-strong);
+  background-color: var(--p-color-bg-fill-inverse);
 
   // stylelint-disable-next-line scss/selector-no-union-class-name -- set user menu padding
   &-userMenu {
@@ -42,25 +42,24 @@ $activator-variables: (
   }
 
   &:focus {
-    background-color: var(--p-color-bg-inverse-hover);
+    background-color: var(--p-color-bg-fill-inverse-hover);
     outline: none;
   }
 
   &:focus-visible {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include no-focus-ring;
-    outline: var(--p-border-width-050) solid
-      var(--p-color-border-interactive-focus);
+    outline: var(--p-border-width-050) solid var(--p-color-border-focus);
     outline-offset: var(--p-space-050);
   }
 
   &:hover {
-    background-color: var(--p-color-bg-inverse-hover);
+    background-color: var(--p-color-bg-fill-inverse-hover);
   }
 
   &:active,
   &[aria-expanded='true'] {
-    background-color: var(--p-color-bg-inverse-active);
+    background-color: var(--p-color-bg-fill-inverse-active);
     outline: none;
     transition: none;
 
diff --git a/polaris-react/src/components/TopBar/components/SearchField/SearchField.scss b/polaris-react/src/components/TopBar/components/SearchField/SearchField.scss
index b73808f5d36..c56a739f4e7 100644
--- a/polaris-react/src/components/TopBar/components/SearchField/SearchField.scss
+++ b/polaris-react/src/components/TopBar/components/SearchField/SearchField.scss
@@ -32,7 +32,7 @@ $search-icon-width: calc(#{$icon-size} + var(--p-space-300));
   color: var(--p-color-text-inverse);
 
   &::placeholder {
-    color: var(--p-color-text-inverse-subdued);
+    color: var(--p-color-text-inverse-secondary);
   }
 }
 
@@ -49,21 +49,20 @@ $search-icon-width: calc(#{$icon-size} + var(--p-space-300));
 
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   ~ .Icon svg {
-    fill: var(--p-color-icon-subdued);
+    fill: var(--p-color-icon-secondary);
   }
 }
 
 .Input:focus-visible:not(:active) {
   // stylelint-disable-next-line selector-max-specificity -- set Backdrop outline styles
   ~ .Backdrop {
-    outline: var(--p-border-width-050) solid
-      var(--p-color-border-interactive-focus);
+    outline: var(--p-border-width-050) solid var(--p-color-border-focus);
     outline-offset: var(--p-space-050);
   }
 
   // stylelint-disable-next-line selector-max-combinators, selector-max-specificity -- set Icon fill
   ~ .Icon svg {
-    fill: var(--p-color-icon-subdued);
+    fill: var(--p-color-icon-secondary);
   }
 }
 
@@ -91,7 +90,7 @@ $search-icon-width: calc(#{$icon-size} + var(--p-space-300));
   border-radius: var(--p-border-radius-200);
   background-color: transparent;
   outline: none;
-  color: var(--p-color-text-inverse-subdued);
+  color: var(--p-color-text-inverse-secondary);
   will-change: fill, color;
   transition: fill var(--p-motion-duration-200) var(--p-motion-ease),
     color var(--p-motion-duration-200) var(--p-motion-ease);
@@ -107,7 +106,7 @@ $search-icon-width: calc(#{$icon-size} + var(--p-space-300));
   }
 
   &::placeholder {
-    color: var(--p-color-text-inverse-subdued);
+    color: var(--p-color-text-inverse-secondary);
   }
 
   &::-webkit-search-decoration,
@@ -129,7 +128,7 @@ $search-icon-width: calc(#{$icon-size} + var(--p-space-300));
   transform: translateY(-50%);
 
   svg {
-    fill: var(--p-color-icon-subdued);
+    fill: var(--p-color-icon-secondary);
   }
 }
 
@@ -146,7 +145,7 @@ $search-icon-width: calc(#{$icon-size} + var(--p-space-300));
   padding: var(--p-space-100);
 
   svg {
-    fill: var(--p-color-icon-subdued);
+    fill: var(--p-color-icon-secondary);
   }
 
   &:focus,
diff --git a/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.scss b/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.scss
index f90dc035542..877085f9941 100644
--- a/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.scss
+++ b/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.scss
@@ -17,7 +17,7 @@
 }
 
 .Message > p {
-  color: var(--p-color-text-inverse-subdued);
+  color: var(--p-color-text-inverse-secondary);
   font-size: var(--p-font-size-275);
   line-height: var(--p-font-line-height-300);
 }
diff --git a/polaris-react/src/components/VideoThumbnail/VideoThumbnail.scss b/polaris-react/src/components/VideoThumbnail/VideoThumbnail.scss
index 2995ba6c2ab..7090156db42 100644
--- a/polaris-react/src/components/VideoThumbnail/VideoThumbnail.scss
+++ b/polaris-react/src/components/VideoThumbnail/VideoThumbnail.scss
@@ -89,7 +89,7 @@ $progress-bar-height: 6px;
   width: 100%;
   transform-origin: left;
   transform: scaleX(0);
-  background-color: var(--p-color-bg-primary);
+  background-color: var(--p-color-bg-fill-brand);
   transition: transform var(--p-motion-duration-500) var(--p-motion-ease);
 }
 
diff --git a/polaris-react/src/styles/shared/_buttons.scss b/polaris-react/src/styles/shared/_buttons.scss
index e1fcf07a851..6873d72d0e8 100644
--- a/polaris-react/src/styles/shared/_buttons.scss
+++ b/polaris-react/src/styles/shared/_buttons.scss
@@ -13,7 +13,7 @@
   min-width: 28px;
   margin: 0;
   padding: var(--p-space-150) var(--p-space-300);
-  background: var(--p-color-bg);
+  background: var(--p-color-bg-surface);
   box-shadow: var(--p-shadow-200);
   border-radius: var(--p-border-radius-200);
   color: var(--p-color-text);
@@ -30,7 +30,7 @@
   }
 
   &:hover {
-    background: var(--p-color-bg-hover);
+    background: var(--p-color-bg-surface-hover);
     outline: var(--p-border-width-025) solid transparent;
   }
 
@@ -38,8 +38,7 @@
     box-shadow: var(--p-shadow-200);
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include no-focus-ring;
-    outline: var(--p-border-width-050) solid
-      var(--p-color-border-interactive-focus);
+    outline: var(--p-border-width-050) solid var(--p-color-border-focus);
     outline-offset: var(--p-space-025);
   }
 
@@ -51,7 +50,7 @@
   }
 
   &.pressed {
-    background: var(--p-color-bg-strong-active);
+    background: var(--p-color-bg-fill-tertiary-active);
     box-shadow: var(--p-shadow-inset-200);
     color: var(--p-color-text);
     border-color: var(--p-color-border-inverse);
@@ -61,12 +60,12 @@
     }
 
     &:hover {
-      background: var(--p-color-bg-strong-hover);
+      background: var(--p-color-bg-fill-tertiary-hover);
       box-shadow: var(--p-shadow-inset-200);
     }
 
     &:active {
-      background: var(--p-color-bg-strong-active);
+      background: var(--p-color-bg-fill-tertiary-active);
       box-shadow: var(--p-shadow-inset-200);
     }
   }
@@ -80,7 +79,7 @@
   transition: none;
   box-shadow: none;
   border-color: var(--p-color-border-disabled);
-  background: var(--p-color-bg-transparent-disabled-experimental);
+  background: var(--p-color-bg-fill-disabled);
   color: var(--p-color-text-disabled);
 
   svg {
diff --git a/polaris-react/src/styles/shared/_controls.scss b/polaris-react/src/styles/shared/_controls.scss
index 11fd8df4e60..82bd26d371a 100644
--- a/polaris-react/src/styles/shared/_controls.scss
+++ b/polaris-react/src/styles/shared/_controls.scss
@@ -19,7 +19,7 @@
       border-color: var(--p-color-border-hover);
     }
   } @else if $style == active {
-    border-color: var(--p-color-border-interactive);
+    border-color: var(--p-color-border-emphasis);
 
     &::before {
       opacity: 1;
@@ -32,7 +32,7 @@
     border-color: var(--p-color-border-disabled);
 
     &::before {
-      background-color: var(--p-color-bg-disabled);
+      background-color: var(--p-color-bg-surface-disabled);
     }
 
     &:hover {
diff --git a/polaris-tokens/README.md b/polaris-tokens/README.md
index 8202166c451..145d1f3451e 100644
--- a/polaris-tokens/README.md
+++ b/polaris-tokens/README.md
@@ -41,7 +41,7 @@ Importing all of the css variables. CSS variables are prefixed with `--p` to sig
 import '@shopify/polaris-tokens/css/styles.css';
 
 div {
-  background: var(--p-color-bg);
+  background: var(--p-color-bg-surface);
 }
 ```
 
diff --git a/polaris-tokens/src/themes/base/color.ts b/polaris-tokens/src/themes/base/color.ts
index 0f18b0c23c1..09bc36fc8a2 100644
--- a/polaris-tokens/src/themes/base/color.ts
+++ b/polaris-tokens/src/themes/base/color.ts
@@ -727,7 +727,7 @@ export const color: {
     value: colorsExperimental.gray[1],
   },
   'color-bg': {
-    value: colorsExperimental.gray[1],
+    value: colorsExperimental.gray[6],
   },
   'color-bg-primary-active': {
     value: colorsExperimental.gray[16],
diff --git a/polaris-tokens/src/utilities.ts b/polaris-tokens/src/utilities.ts
index 44082a84d6c..9918777a493 100644
--- a/polaris-tokens/src/utilities.ts
+++ b/polaris-tokens/src/utilities.ts
@@ -121,7 +121,7 @@ export function getKeyframeNames(motionTokenGroup: TokenGroup) {
 /**
  * Allowed Polaris token custom properties.
  *
- * Result: ['--p-color-bg-app', '--p-color-text', etc...]
+ * Result: ['--p-color-bg', '--p-color-text', etc...]
  */
 export function getCustomPropertyNames(tokens: Tokens) {
   return Object.entries(tokens)
diff --git a/polaris.shopify.com/content/components/layout-and-structure/card.md b/polaris.shopify.com/content/components/layout-and-structure/card.md
index a6f21262ff9..5bd52291499 100644
--- a/polaris.shopify.com/content/components/layout-and-structure/card.md
+++ b/polaris.shopify.com/content/components/layout-and-structure/card.md
@@ -25,7 +25,7 @@ examples:
   - fileName: card-default.tsx
     title: Default
     description: >-
-      By default, cards have an 8px border radius and uses `--p-color-bg` as the background and `--p-shadow-300` as the shadow. There is padding of `space-5` (20px) around children and `space-4` (16px) for small screens.
+      By default, cards have an 8px border radius and uses `--p-color-bg-surface` as the background and `--p-shadow-300` as the shadow. There is padding of `space-5` (20px) around children and `space-4` (16px) for small screens.
   - fileName: card-with-subdued-background.tsx
     title: With subdued background
     description: >-
diff --git a/polaris.shopify.com/content/design/colors.md b/polaris.shopify.com/content/design/colors.md
index 25daba69e77..b5d98ce8f5d 100644
--- a/polaris.shopify.com/content/design/colors.md
+++ b/polaris.shopify.com/content/design/colors.md
@@ -59,7 +59,7 @@ Each color token follows the same naming convention. The purpose and intent of a
 
 **Naming formula:** `--p-color-element-role-variant-state`
 
-**Example:** `--p-color-bg-critical-subdued-hover`
+**Example:** `--p-color-bg-surface-critical-hover`
 
 | Name space | Description                                                                                         | Examples                                                       |
 | ---------- | --------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
diff --git a/polaris.shopify.com/content/design/typography.md b/polaris.shopify.com/content/design/typography.md
index 5889664f2c3..41bc82966d6 100644
--- a/polaris.shopify.com/content/design/typography.md
+++ b/polaris.shopify.com/content/design/typography.md
@@ -74,7 +74,7 @@ Line length describes the width of the content. For longer body text, the recomm
 
 Color can be used to add contrast and reinforce the hierarchy between text.
 
-For example, one way to distinguish between a title and a subtitle is to apply `--p-color-text` to the title, and `--p-color-text-subdued` to the subtitle. Using a lighter color for secondary information provides contrast between the text and helps reinforce hierarchy even when the text is the same size and weight.
+For example, one way to distinguish between a title and a subtitle is to apply `--p-color-text` to the title, and `--p-color-text-secondary` to the subtitle. Using a lighter color for secondary information provides contrast between the text and helps reinforce hierarchy even when the text is the same size and weight.
 
 ![An image showing how you can use color to add hierarchy within text elements](/images/design/typography/text-color-different@2x.png)
 
diff --git a/polaris.shopify.com/pages/examples/bleed-horizontal.tsx b/polaris.shopify.com/pages/examples/bleed-horizontal.tsx
index a201baed7a0..625f39b482d 100644
--- a/polaris.shopify.com/pages/examples/bleed-horizontal.tsx
+++ b/polaris.shopify.com/pages/examples/bleed-horizontal.tsx
@@ -29,7 +29,7 @@ const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
       <InlineStack gap="400" align="center">
         <div
           style={{
-            color: 'var(--p-color-text-on-color)',
+            color: 'var(--p-color-text-info-on-bg-fill)',
           }}
         >
           <Text as="h2" variant="bodyMd" fontWeight="regular">
diff --git a/polaris.shopify.com/pages/examples/bleed-specific-direction.tsx b/polaris.shopify.com/pages/examples/bleed-specific-direction.tsx
index 353b4b11324..2150c72b71e 100644
--- a/polaris.shopify.com/pages/examples/bleed-specific-direction.tsx
+++ b/polaris.shopify.com/pages/examples/bleed-specific-direction.tsx
@@ -44,7 +44,7 @@ const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
       <InlineStack gap="400" align="center">
         <div
           style={{
-            color: 'var(--p-color-text-on-color)',
+            color: 'var(--p-color-text-info-on-bg-fill)',
           }}
         >
           <Text as="h2" variant="bodyMd" fontWeight="regular">
diff --git a/polaris.shopify.com/pages/examples/bleed-vertical.tsx b/polaris.shopify.com/pages/examples/bleed-vertical.tsx
index a7606c907f2..b22745893f8 100644
--- a/polaris.shopify.com/pages/examples/bleed-vertical.tsx
+++ b/polaris.shopify.com/pages/examples/bleed-vertical.tsx
@@ -26,7 +26,7 @@ const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
       <InlineStack gap="400" align="center">
         <div
           style={{
-            color: 'var(--p-color-text-on-color)',
+            color: 'var(--p-color-text-info-on-bg-fill)',
           }}
         >
           <Text as="h2" variant="bodyMd" fontWeight="regular">
diff --git a/polaris.shopify.com/pages/examples/block-stack-with-align.tsx b/polaris.shopify.com/pages/examples/block-stack-with-align.tsx
index 0bd028163d5..7b39258b043 100644
--- a/polaris.shopify.com/pages/examples/block-stack-with-align.tsx
+++ b/polaris.shopify.com/pages/examples/block-stack-with-align.tsx
@@ -49,14 +49,14 @@ const Placeholder = ({
         height: height,
         width: width,
         borderBlockEnd: showBorder
-          ? '1px dashed var(--p-color-bg-success-subdued)'
+          ? '1px dashed var(--p-color-bg-surface-success)'
           : 'none',
       }}
     >
       <InlineStack align="center">
         <div
           style={{
-            color: 'var(--p-color-text-on-color)',
+            color: 'var(--p-color-text-info-on-bg-fill)',
           }}
         >
           <Text as="h2" variant="bodyMd" fontWeight="regular">
diff --git a/polaris.shopify.com/pages/examples/block-stack-with-gap.tsx b/polaris.shopify.com/pages/examples/block-stack-with-gap.tsx
index 436d2c30776..17b2f29b391 100644
--- a/polaris.shopify.com/pages/examples/block-stack-with-gap.tsx
+++ b/polaris.shopify.com/pages/examples/block-stack-with-gap.tsx
@@ -19,7 +19,7 @@ const SpacingBackground = ({children}: {children: React.ReactNode}) => {
   return (
     <div
       style={{
-        background: 'var(--p-color-bg-success-subdued)',
+        background: 'var(--p-color-bg-surface-success)',
         height: 'auto',
       }}
     >
diff --git a/polaris.shopify.com/pages/examples/block-stack-with-inline-align.tsx b/polaris.shopify.com/pages/examples/block-stack-with-inline-align.tsx
index c3f3837a24c..e8fcb587e02 100644
--- a/polaris.shopify.com/pages/examples/block-stack-with-inline-align.tsx
+++ b/polaris.shopify.com/pages/examples/block-stack-with-inline-align.tsx
@@ -43,14 +43,14 @@ const Placeholder = ({
         height: height,
         width: width,
         borderBlockEnd: showBorder
-          ? '1px dashed var(--p-color-bg-success-subdued)'
+          ? '1px dashed var(--p-color-bg-surface-success)'
           : 'none',
       }}
     >
       <InlineStack align="center">
         <div
           style={{
-            color: 'var(--p-color-text-on-color)',
+            color: 'var(--p-color-text-info-on-bg-fill)',
           }}
         >
           <Text as="h2" variant="bodyMd" fontWeight="regular">
diff --git a/polaris.shopify.com/pages/examples/box-with-border-radius.tsx b/polaris.shopify.com/pages/examples/box-with-border-radius.tsx
index e15032a715d..c9851f0e4b3 100644
--- a/polaris.shopify.com/pages/examples/box-with-border-radius.tsx
+++ b/polaris.shopify.com/pages/examples/box-with-border-radius.tsx
@@ -5,7 +5,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function BoxWithBorderRadiusExample() {
   return (
-    <Box background="bg" borderRadius="100">
+    <Box background="bg-surface" borderRadius="100">
       <Placeholder label="Content inside a box" />
     </Box>
   );
diff --git a/polaris.shopify.com/pages/examples/box-with-padding.tsx b/polaris.shopify.com/pages/examples/box-with-padding.tsx
index 2ede6b8667f..71461f6a8c3 100644
--- a/polaris.shopify.com/pages/examples/box-with-padding.tsx
+++ b/polaris.shopify.com/pages/examples/box-with-padding.tsx
@@ -8,7 +8,7 @@ function BoxWithPaddingExample() {
     <BlockStack gap="400">
       <div
         style={{
-          backgroundColor: 'var(--p-color-bg-info-strong)',
+          backgroundColor: 'var(--p-color-bg-fill-info)',
           width: '586px',
         }}
       >
@@ -17,24 +17,24 @@ function BoxWithPaddingExample() {
         </Box>
       </div>
       <InlineStack gap="400">
-        <div style={{backgroundColor: 'var(--p-color-bg-info-strong)'}}>
+        <div style={{backgroundColor: 'var(--p-color-bg-fill-info)'}}>
           <Box paddingInlineStart="400" width="284px">
             <Placeholder label="paddingInlineStart" childAlign="start" />
           </Box>
         </div>
-        <div style={{backgroundColor: 'var(--p-color-bg-info-strong)'}}>
+        <div style={{backgroundColor: 'var(--p-color-bg-fill-info)'}}>
           <Box paddingInlineEnd="400" width="284px">
             <Placeholder label="paddingInlineEnd" childAlign="end" />
           </Box>
         </div>
       </InlineStack>
       <InlineStack gap="400">
-        <div style={{backgroundColor: 'var(--p-color-bg-info-strong)'}}>
+        <div style={{backgroundColor: 'var(--p-color-bg-fill-info)'}}>
           <Box paddingBlockStart="400" width="284px">
             <Placeholder label="paddingBlockStart" childAlign="center" />
           </Box>
         </div>
-        <div style={{backgroundColor: 'var(--p-color-bg-info-strong)'}}>
+        <div style={{backgroundColor: 'var(--p-color-bg-fill-info)'}}>
           <Box paddingBlockEnd="400" width="284px">
             <Placeholder label="paddingBlockEnd" childAlign="center" />
           </Box>
@@ -66,7 +66,7 @@ const Placeholder = ({
       <InlineStack gap="400" align={childAlign}>
         <div
           style={{
-            color: 'var(--p-color-text-on-color)',
+            color: 'var(--p-color-text-info-on-bg-fill)',
           }}
         >
           <Text as="h2" variant="bodyMd" fontWeight="medium">
diff --git a/polaris.shopify.com/pages/examples/box-with-shadow.tsx b/polaris.shopify.com/pages/examples/box-with-shadow.tsx
index 1a286b2fbdc..65f1b640fa7 100644
--- a/polaris.shopify.com/pages/examples/box-with-shadow.tsx
+++ b/polaris.shopify.com/pages/examples/box-with-shadow.tsx
@@ -22,7 +22,7 @@ const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
     >
       <div
         style={{
-          color: 'var(--p-color-text-on-color)',
+          color: 'var(--p-color-text-info-on-bg-fill)',
         }}
       >
         <Text as="p" variant="bodyMd">
diff --git a/polaris.shopify.com/pages/examples/card-with-varying-padding.tsx b/polaris.shopify.com/pages/examples/card-with-varying-padding.tsx
index 5f3ef848bb2..7d5ea50b1b4 100644
--- a/polaris.shopify.com/pages/examples/card-with-varying-padding.tsx
+++ b/polaris.shopify.com/pages/examples/card-with-varying-padding.tsx
@@ -32,7 +32,7 @@ const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
     >
       <div
         style={{
-          color: 'var(--p-color-text-on-color)',
+          color: 'var(--p-color-text-info-on-bg-fill)',
         }}
       >
         <Text as="h2" variant="bodyMd">
diff --git a/polaris.shopify.com/pages/examples/inline-grid-with-fixed-widths.tsx b/polaris.shopify.com/pages/examples/inline-grid-with-fixed-widths.tsx
index 31db94b092c..59a847efca1 100644
--- a/polaris.shopify.com/pages/examples/inline-grid-with-fixed-widths.tsx
+++ b/polaris.shopify.com/pages/examples/inline-grid-with-fixed-widths.tsx
@@ -26,14 +26,14 @@ const Placeholder = ({
         height: height ?? undefined,
         width: width ?? undefined,
         borderInlineStart: showBorder
-          ? '1px dashed var(--p-color-bg-success-subdued)'
+          ? '1px dashed var(--p-color-bg-surface-success)'
           : 'none',
       }}
     >
       <InlineStack gap="400" align="center" blockAlign="center">
         <div
           style={{
-            color: 'var(--p-color-text-on-color)',
+            color: 'var(--p-color-text-info-on-bg-fill)',
             width: width ?? undefined,
           }}
         >
diff --git a/polaris.shopify.com/pages/examples/inline-grid-with-set-number.tsx b/polaris.shopify.com/pages/examples/inline-grid-with-set-number.tsx
index a191ad4b952..7aefa0ef0d8 100644
--- a/polaris.shopify.com/pages/examples/inline-grid-with-set-number.tsx
+++ b/polaris.shopify.com/pages/examples/inline-grid-with-set-number.tsx
@@ -21,7 +21,7 @@ const Placeholder = ({height = 'auto', width = 'auto', showBorder = false}) => {
         height: height ?? undefined,
         width: width ?? undefined,
         borderInlineStart: showBorder
-          ? '1px dashed var(--p-color-bg-success-subdued)'
+          ? '1px dashed var(--p-color-bg-surface-success)'
           : 'none',
       }}
     />
diff --git a/polaris.shopify.com/pages/examples/inline-grid-with-varying-gap.tsx b/polaris.shopify.com/pages/examples/inline-grid-with-varying-gap.tsx
index 99a153c17b2..557bd442c64 100644
--- a/polaris.shopify.com/pages/examples/inline-grid-with-varying-gap.tsx
+++ b/polaris.shopify.com/pages/examples/inline-grid-with-varying-gap.tsx
@@ -25,7 +25,7 @@ const SpacingBackground = ({
   return (
     <div
       style={{
-        background: 'var(--p-color-bg-success-subdued)',
+        background: 'var(--p-color-bg-surface-success)',
         width,
         height: 'auto',
       }}
diff --git a/polaris.shopify.com/pages/examples/inline-stack-with-align.tsx b/polaris.shopify.com/pages/examples/inline-stack-with-align.tsx
index 8adbd5bbba6..1b14f1b674b 100644
--- a/polaris.shopify.com/pages/examples/inline-stack-with-align.tsx
+++ b/polaris.shopify.com/pages/examples/inline-stack-with-align.tsx
@@ -56,17 +56,17 @@ const Placeholder = ({
         height: height,
         width: width,
         borderInlineStart: showBorder
-          ? '1px dashed var(--p-color-bg-success-subdued)'
+          ? '1px dashed var(--p-color-bg-surface-success)'
           : 'none',
         borderBlockStart: showBorderTop
-          ? '1px dashed var(--p-color-bg-success-subdued)'
+          ? '1px dashed var(--p-color-bg-surface-success)'
           : 'none',
       }}
     >
       <InlineStack align="center">
         <div
           style={{
-            color: 'var(--p-color-text-on-color)',
+            color: 'var(--p-color-text-info-on-bg-fill)',
           }}
         >
           <Text as="h2" variant="bodyMd" fontWeight="medium">
diff --git a/polaris.shopify.com/pages/examples/inline-stack-with-block-align.tsx b/polaris.shopify.com/pages/examples/inline-stack-with-block-align.tsx
index 82593a2acb5..ecaf028d129 100644
--- a/polaris.shopify.com/pages/examples/inline-stack-with-block-align.tsx
+++ b/polaris.shopify.com/pages/examples/inline-stack-with-block-align.tsx
@@ -71,14 +71,14 @@ const Placeholder = ({
         width: width,
         minHeight: minHeight,
         borderInlineStart: showBorder
-          ? '1px dashed var(--p-color-bg-success-subdued)'
+          ? '1px dashed var(--p-color-bg-surface-success)'
           : 'none',
       }}
     >
       <InlineStack align="center">
         <div
           style={{
-            color: 'var(--p-color-text-on-color)',
+            color: 'var(--p-color-text-info-on-bg-fill)',
           }}
         >
           <Text as="h2" variant="bodyMd" fontWeight="medium">
diff --git a/polaris.shopify.com/pages/examples/inline-stack-with-gap.tsx b/polaris.shopify.com/pages/examples/inline-stack-with-gap.tsx
index 23b215873b6..b6e845b21c2 100644
--- a/polaris.shopify.com/pages/examples/inline-stack-with-gap.tsx
+++ b/polaris.shopify.com/pages/examples/inline-stack-with-gap.tsx
@@ -41,7 +41,7 @@ const SpacingBackground = ({
     <div
       style={{
         display: 'flex',
-        background: 'var(--p-color-bg-success-subdued)',
+        background: 'var(--p-color-bg-surface-success)',
         width: width,
         height: height,
         marginBlockEnd: margin ? '8px' : 'none',
diff --git a/polaris.shopify.com/pages/examples/inline-stack-with-non-wrapping.tsx b/polaris.shopify.com/pages/examples/inline-stack-with-non-wrapping.tsx
index 60392b6194b..bb4cddbcbad 100644
--- a/polaris.shopify.com/pages/examples/inline-stack-with-non-wrapping.tsx
+++ b/polaris.shopify.com/pages/examples/inline-stack-with-non-wrapping.tsx
@@ -24,7 +24,7 @@ const Placeholder = ({height = 'auto', width = 'auto', showBorder = false}) => {
         height: height,
         width: width,
         borderInlineStart: showBorder
-          ? '1px dashed var(--p-color-bg-success-subdued)'
+          ? '1px dashed var(--p-color-bg-surface-success)'
           : 'none',
       }}
     />
diff --git a/polaris.shopify.com/pages/examples/listbox-with-search.tsx b/polaris.shopify.com/pages/examples/listbox-with-search.tsx
index f17efd02b32..c37ef21238e 100644
--- a/polaris.shopify.com/pages/examples/listbox-with-search.tsx
+++ b/polaris.shopify.com/pages/examples/listbox-with-search.tsx
@@ -207,7 +207,7 @@ function ListboxWithSearchExample() {
 
   const showAllMarkup = showFooterAction ? (
     <Listbox.Action value={actionValue}>
-      <span style={{color: 'var(--p-color-text-interactive)'}}>
+      <span style={{color: 'var(--p-color-text-emphasis)'}}>
         Show all 111 segments
       </span>
     </Listbox.Action>
diff --git a/polaris.shopify.com/pages/examples/popover-with-searchable-listbox.tsx b/polaris.shopify.com/pages/examples/popover-with-searchable-listbox.tsx
index ca3517d79c7..174502e4fd5 100644
--- a/polaris.shopify.com/pages/examples/popover-with-searchable-listbox.tsx
+++ b/polaris.shopify.com/pages/examples/popover-with-searchable-listbox.tsx
@@ -235,7 +235,7 @@ function PopoverWithSearchableListboxExample() {
 
   const showAllMarkup = showFooterAction ? (
     <Listbox.Action value={actionValue}>
-      <span style={{color: 'var(--p-color-text-interactive)'}}>
+      <span style={{color: 'var(--p-color-text-emphasis)'}}>
         Show all 111 segments
       </span>
     </Listbox.Action>
diff --git a/polaris.shopify.com/pages/examples/sheet-with-searchable-listbox.tsx b/polaris.shopify.com/pages/examples/sheet-with-searchable-listbox.tsx
index 10a57add049..1b7f93499c5 100644
--- a/polaris.shopify.com/pages/examples/sheet-with-searchable-listbox.tsx
+++ b/polaris.shopify.com/pages/examples/sheet-with-searchable-listbox.tsx
@@ -196,7 +196,7 @@ function SheetWithSearchableListboxExample() {
         position: 'sticky',
         zIndex: 'var(--p-z-index-12)',
         width: '100%',
-        background: 'var(--p-color-bg)',
+        background: 'var(--p-color-bg-surface)',
       }}
     >
       <StopPropagation>
@@ -239,7 +239,7 @@ function SheetWithSearchableListboxExample() {
 
   const showAllMarkup = showFooterAction ? (
     <Listbox.Action value={actionValue}>
-      <span style={{color: 'var(--p-color-text-interactive)'}}>
+      <span style={{color: 'var(--p-color-text-emphasis)'}}>
         Show all 111 segments
       </span>
     </Listbox.Action>
diff --git a/polaris.shopify.com/src/components/Markdown/components/SideBySide/styles.module.scss b/polaris.shopify.com/src/components/Markdown/components/SideBySide/styles.module.scss
index 81cd0dd6986..f9a8e9faadc 100644
--- a/polaris.shopify.com/src/components/Markdown/components/SideBySide/styles.module.scss
+++ b/polaris.shopify.com/src/components/Markdown/components/SideBySide/styles.module.scss
@@ -38,7 +38,7 @@
 
   // Make images look nicer
   img {
-    background: var(--p-color-bg-inset);
+    background: var(--p-color-bg-fill-secondary);
     border-radius: var(--border-radius-400);
     border: 1px solid #c9cccf;
   }
diff --git a/polaris.shopify.com/src/components/PatternPage/PatternPage.module.scss b/polaris.shopify.com/src/components/PatternPage/PatternPage.module.scss
index 54733a4c7db..dc828e0bff1 100644
--- a/polaris.shopify.com/src/components/PatternPage/PatternPage.module.scss
+++ b/polaris.shopify.com/src/components/PatternPage/PatternPage.module.scss
@@ -7,7 +7,7 @@
 }
 
 .TabGroup {
-  --tab-background: var(--p-color-bg-subdued);
+  --tab-background: var(--p-color-bg-surface-secondary);
   --tab-background-pressed: rgba(250, 250, 250, 1);
   --tab-background-hover: rgba(241, 241, 241, 1);
   --tab-border: 1px solid #c9cccf;
@@ -129,10 +129,10 @@
 .HowItHelps {
   & > img {
     display: block;
-    border: 1px solid var(--p-color-border-subdued);
+    border: 1px solid var(--p-color-border-secondary);
     aspect-ratio: 361.9/180.9;
     border-radius: 0.25rem;
-    background: var(--p-color-bg-inset);
+    background: var(--p-color-bg-fill-secondary);
   }
   ol {
     --counter-offset: calc(24px + var(--p-space-200));
@@ -163,7 +163,7 @@
 
 .UsefulToKnow {
   img {
-    background: var(--p-color-bg-inset);
+    background: var(--p-color-bg-fill-secondary);
     border-radius: var(--border-radius-400);
     border: 1px solid #c9cccf;
   }
diff --git a/polaris.shopify.com/src/components/PatternsExample/PatternsExample.module.scss b/polaris.shopify.com/src/components/PatternsExample/PatternsExample.module.scss
index df9303ee9d9..1290a681c1c 100644
--- a/polaris.shopify.com/src/components/PatternsExample/PatternsExample.module.scss
+++ b/polaris.shopify.com/src/components/PatternsExample/PatternsExample.module.scss
@@ -24,7 +24,7 @@
 .ExampleWrapper {
   position: relative;
   box-shadow: none;
-  border: 1px solid var(--p-color-border-subdued);
+  border: 1px solid var(--p-color-border-secondary);
   border-radius: 8px;
 
   @media screen and (max-width: $breakpointMobile) {
diff --git a/polaris.shopify.com/src/components/PolarisExampleWrapper/PolarisExampleWrapper.module.scss b/polaris.shopify.com/src/components/PolarisExampleWrapper/PolarisExampleWrapper.module.scss
index 03aab083ffa..38525cd4e1c 100644
--- a/polaris.shopify.com/src/components/PolarisExampleWrapper/PolarisExampleWrapper.module.scss
+++ b/polaris.shopify.com/src/components/PolarisExampleWrapper/PolarisExampleWrapper.module.scss
@@ -5,7 +5,7 @@
   height: 100vh;
   padding-left: 32px;
   padding-right: 32px;
-  background-color: var(--p-color-bg-app);
+  background-color: var(--p-color-bg);
 }
 
 .Example {
diff --git a/polaris.shopify.com/src/components/ThumbnailPreview/ThumbnailPreview.module.scss b/polaris.shopify.com/src/components/ThumbnailPreview/ThumbnailPreview.module.scss
index 7854a161971..781682da51d 100644
--- a/polaris.shopify.com/src/components/ThumbnailPreview/ThumbnailPreview.module.scss
+++ b/polaris.shopify.com/src/components/ThumbnailPreview/ThumbnailPreview.module.scss
@@ -2,6 +2,6 @@
   aspect-ratio: 16/9;
   border-radius: var(--border-radius-600);
   overflow: hidden;
-  background: var(--p-color-bg-subdued);
+  background: var(--p-color-bg-surface-secondary);
   position: relative;
 }
diff --git a/polaris.shopify.com/src/components/TipBanner/TipBanner.module.scss b/polaris.shopify.com/src/components/TipBanner/TipBanner.module.scss
index b004e0dd0a3..2ce8d86d02d 100644
--- a/polaris.shopify.com/src/components/TipBanner/TipBanner.module.scss
+++ b/polaris.shopify.com/src/components/TipBanner/TipBanner.module.scss
@@ -1,6 +1,6 @@
 .TipBanner {
   padding: var(--p-space-400) var(--p-space-600);
-  background: var(--p-color-bg-info-subdued);
+  background: var(--p-color-bg-surface-info);
   border-radius: var(--p-border-radius-200);
   color: #00565e;
   margin: var(--p-space-600) 0;
diff --git a/polaris.shopify.com/src/styles/globals.scss b/polaris.shopify.com/src/styles/globals.scss
index 6eaad5c19d7..52744bc06f9 100644
--- a/polaris.shopify.com/src/styles/globals.scss
+++ b/polaris.shopify.com/src/styles/globals.scss
@@ -344,7 +344,7 @@ button {
 }
 
 .tip-banner {
-  background: var(--p-color-bg-info-subdued);
+  background: var(--p-color-bg-surface-info);
   border-radius: var(--p-border-radius-200);
   color: #00565e !important;
   #{$notMarginConsideredHarmful} {