diff --git a/documentation/guides/migrating-from-v10-to-v11.md b/documentation/guides/migrating-from-v10-to-v11.md
index e836b40342a..0e643ce6283 100644
--- a/documentation/guides/migrating-from-v10-to-v11.md
+++ b/documentation/guides/migrating-from-v10-to-v11.md
@@ -27,3 +27,22 @@ We've removed the following deprecated prop from the Collapsible component:
 We are removing low usage components from Polaris. We love fun but we also want to ensure we are shipping exactly what our users need. If you want to use this in your project feel free to copy the [component sourcecode](https://github.com/Shopify/polaris/blob/%40shopify/polaris%4010.24.0/polaris-react/src/components/KonamiCode/KonamiCode.tsx).
 
 ## Tokens
+
+### Renamed z-index tokens
+
+We've changed the naming of our `z-index` tokens from `--p-z-*` to `--p-z-index-*` to improve clarity.
+
+| Before     | After            |
+| ---------- | ---------------- |
+| `--p-z-1`  | `--p-z-index-1`  |
+| `--p-z-2`  | `--p-z-index-2`  |
+| `--p-z-3`  | `--p-z-index-3`  |
+| `--p-z-4`  | `--p-z-index-4`  |
+| `--p-z-5`  | `--p-z-index-5`  |
+| `--p-z-6`  | `--p-z-index-6`  |
+| `--p-z-7`  | `--p-z-index-7`  |
+| `--p-z-8`  | `--p-z-index-8`  |
+| `--p-z-9`  | `--p-z-index-9`  |
+| `--p-z-10` | `--p-z-index-10` |
+| `--p-z-11` | `--p-z-index-11` |
+| `--p-z-12` | `--p-z-index-12` |
diff --git a/polaris-migrator/src/migrations/scss-replace-z-index/scss-replace-z-index.ts b/polaris-migrator/src/migrations/scss-replace-z-index/scss-replace-z-index.ts
index b229ec5a32a..c492b03ce99 100644
--- a/polaris-migrator/src/migrations/scss-replace-z-index/scss-replace-z-index.ts
+++ b/polaris-migrator/src/migrations/scss-replace-z-index/scss-replace-z-index.ts
@@ -16,21 +16,21 @@ interface PluginOptions extends Options, NamespaceOptions {}
 const processed = Symbol('processed');
 
 const zIndexMap = {
-  content: '--p-z-1',
-  overlay: '--p-z-2',
+  content: '--p-z-index-1',
+  overlay: '--p-z-index-2',
 };
 
 const fixedElementStackingOrder = {
-  'global-ribbon': '--p-z-3',
-  'top-bar': '--p-z-4',
-  'context-bar': '--p-z-5',
-  'small-screen-loading-bar': '--p-z-6',
-  'nav-backdrop': '--p-z-7',
-  nav: '--p-z-8',
-  'skip-to-content': '--p-z-9',
-  backdrop: '--p-z-10',
-  modal: '--p-z-11',
-  toast: '--p-z-12',
+  'global-ribbon': '--p-z-index-3',
+  'top-bar': '--p-z-index-4',
+  'context-bar': '--p-z-index-5',
+  'small-screen-loading-bar': '--p-z-index-6',
+  'nav-backdrop': '--p-z-index-7',
+  nav: '--p-z-index-8',
+  'skip-to-content': '--p-z-index-9',
+  backdrop: '--p-z-index-10',
+  modal: '--p-z-index-11',
+  toast: '--p-z-index-12',
 };
 
 function isValidElement<
diff --git a/polaris-migrator/src/migrations/scss-replace-z-index/tests/scss-replace-z-index.output.scss b/polaris-migrator/src/migrations/scss-replace-z-index/tests/scss-replace-z-index.output.scss
index 99ee81813a5..40bf70ba00a 100644
--- a/polaris-migrator/src/migrations/scss-replace-z-index/tests/scss-replace-z-index.output.scss
+++ b/polaris-migrator/src/migrations/scss-replace-z-index/tests/scss-replace-z-index.output.scss
@@ -4,25 +4,25 @@ $someElement: (
 
 .scenario-1 {
   /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* z-index: var(--p-z-1) + 1; */
+  /* z-index: var(--p-z-index-1) + 1; */
   z-index: z-index(content) + 1;
   background-color: var(--p-background);
 }
 
 .scenario-2 {
   /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* z-index: var(--p-z-2) + 1; */
+  /* z-index: var(--p-z-index-2) + 1; */
   z-index: z-index(overlay) + 1;
   background-color: var(--p-background);
 }
 
 .scenario-3 {
-  z-index: var(--p-z-1);
+  z-index: var(--p-z-index-1);
   background-color: var(--p-background);
 }
 
 .scenario-4 {
-  z-index: var(--p-z-2);
+  z-index: var(--p-z-index-2);
   background-color: var(--p-background);
 }
 
@@ -35,7 +35,7 @@ $someElement: (
 
 .scenario-6 {
   /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* z-index: calc(var(--p-z-2) + var(--p-z-1)); */
+  /* z-index: calc(var(--p-z-index-2) + var(--p-z-index-1)); */
   z-index: calc(z-index(overlay) + z-index(content));
 }
 
@@ -44,5 +44,5 @@ $someElement: (
 }
 
 .scenario-8 {
-  z-index: var(--p-z-11);
+  z-index: var(--p-z-index-11);
 }
diff --git a/polaris-migrator/src/migrations/scss-replace-z-index/tests/with-namespace.output.scss b/polaris-migrator/src/migrations/scss-replace-z-index/tests/with-namespace.output.scss
index a8bc3374fdb..d6b54dffbf6 100644
--- a/polaris-migrator/src/migrations/scss-replace-z-index/tests/with-namespace.output.scss
+++ b/polaris-migrator/src/migrations/scss-replace-z-index/tests/with-namespace.output.scss
@@ -5,25 +5,25 @@ $someElement: (
 
 .scenario-1 {
   /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* z-index: var(--p-z-1) + 1; */
+  /* z-index: var(--p-z-index-1) + 1; */
   z-index: legacy-polaris-v8.z-index(content) + 1;
   background-color: var(--p-background);
 }
 
 .scenario-2 {
   /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* z-index: var(--p-z-2) + 1; */
+  /* z-index: var(--p-z-index-2) + 1; */
   z-index: legacy-polaris-v8.z-index(overlay) + 1;
   background-color: var(--p-background);
 }
 
 .scenario-3 {
-  z-index: var(--p-z-1);
+  z-index: var(--p-z-index-1);
   background-color: var(--p-background);
 }
 
 .scenario-4 {
-  z-index: var(--p-z-2);
+  z-index: var(--p-z-index-2);
   background-color: var(--p-background);
 }
 
@@ -37,7 +37,7 @@ $someElement: (
 .scenario-6 {
   /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
   /* z-index: calc(
-    var(--p-z-2) + var(--p-z-1)
+    var(--p-z-index-2) + var(--p-z-index-1)
   ); */
   z-index: calc(
     legacy-polaris-v8.z-index(overlay) + legacy-polaris-v8.z-index(content)
@@ -51,5 +51,5 @@ $someElement: (
 }
 
 .scenario-8 {
-  z-index: var(--p-z-11);
+  z-index: var(--p-z-index-11);
 }
diff --git a/polaris-react/src/components/Backdrop/Backdrop.scss b/polaris-react/src/components/Backdrop/Backdrop.scss
index 2e2f40dafdf..554682b163f 100644
--- a/polaris-react/src/components/Backdrop/Backdrop.scss
+++ b/polaris-react/src/components/Backdrop/Backdrop.scss
@@ -1,8 +1,7 @@
 .Backdrop {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   position: fixed;
-  z-index: var(--p-z-10);
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+  z-index: var(--p-z-index-10);
   top: 0;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   right: 0;
@@ -23,5 +22,5 @@
 }
 
 .belowNavigation {
-  z-index: var(--p-z-7);
+  z-index: var(--p-z-index-7);
 }
diff --git a/polaris-react/src/components/DataTable/DataTable.scss b/polaris-react/src/components/DataTable/DataTable.scss
index 73019bc01b9..07836e815e5 100644
--- a/polaris-react/src/components/DataTable/DataTable.scss
+++ b/polaris-react/src/components/DataTable/DataTable.scss
@@ -337,7 +337,7 @@
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     right: 0;
     visibility: hidden;
-    z-index: var(--p-z-1);
+    z-index: var(--p-z-index-1);
   }
 
   .StickyHeaderInner {
diff --git a/polaris-react/src/components/Filters/Filters.scss b/polaris-react/src/components/Filters/Filters.scss
index dc3498455d7..aae534f38f6 100644
--- a/polaris-react/src/components/Filters/Filters.scss
+++ b/polaris-react/src/components/Filters/Filters.scss
@@ -264,8 +264,7 @@ $list-filters-footer-height: 70px;
 .Backdrop {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   position: fixed;
-  z-index: var(--p-z-10);
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+  z-index: var(--p-z-index-10);
   top: 0;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   right: 0;
diff --git a/polaris-react/src/components/Frame/Frame.scss b/polaris-react/src/components/Frame/Frame.scss
index 4f2abc9695d..eb01c07eb35 100644
--- a/polaris-react/src/components/Frame/Frame.scss
+++ b/polaris-react/src/components/Frame/Frame.scss
@@ -25,8 +25,7 @@
 .Navigation {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   position: fixed;
-  z-index: var(--p-z-8);
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+  z-index: var(--p-z-index-8);
   top: 0;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   left: 0;
@@ -155,8 +154,7 @@
 .TopBar {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   position: fixed;
-  z-index: var(--p-z-4);
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+  z-index: var(--p-z-index-4);
   top: 0;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   left: 0;
@@ -181,8 +179,7 @@
 .ContextualSaveBar {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   position: fixed;
-  z-index: var(--p-z-5);
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+  z-index: var(--p-z-index-5);
   top: 0;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   left: 0;
@@ -248,8 +245,7 @@
 .GlobalRibbonContainer {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   position: fixed;
-  z-index: var(--p-z-3);
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+  z-index: var(--p-z-index-3);
   bottom: 0;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   width: 100%;
@@ -277,8 +273,7 @@
 .LoadingBar {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   position: fixed;
-  z-index: var(--p-z-6);
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+  z-index: var(--p-z-index-6);
   top: 0;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   right: 0;
@@ -297,7 +292,7 @@
     }
 
     .hasTopBar & {
-      z-index: var(--p-z-6);
+      z-index: var(--p-z-index-6);
     }
   }
 }
@@ -307,8 +302,7 @@
   --pc-frame-skip-vertical-offset: 10px;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   position: fixed;
-  z-index: var(--p-z-9);
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+  z-index: var(--p-z-index-9);
   top: var(--pc-frame-skip-vertical-offset);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   left: calc(var(--p-space-2) + var(--pc-frame-offset));
diff --git a/polaris-react/src/components/Frame/components/ToastManager/ToastManager.scss b/polaris-react/src/components/Frame/components/ToastManager/ToastManager.scss
index 7340570e387..a6df0c456e9 100644
--- a/polaris-react/src/components/Frame/components/ToastManager/ToastManager.scss
+++ b/polaris-react/src/components/Frame/components/ToastManager/ToastManager.scss
@@ -13,8 +13,7 @@
 .ToastManager {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   position: fixed;
-  z-index: var(--p-z-12);
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+  z-index: var(--p-z-index-12);
   right: 0;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   left: 0;
diff --git a/polaris-react/src/components/MediaCard/MediaCard.scss b/polaris-react/src/components/MediaCard/MediaCard.scss
index a73bd1666c9..1022e0024bb 100644
--- a/polaris-react/src/components/MediaCard/MediaCard.scss
+++ b/polaris-react/src/components/MediaCard/MediaCard.scss
@@ -61,8 +61,7 @@
 .Popover {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   position: absolute;
-  z-index: var(--p-z-2);
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+  z-index: var(--p-z-index-2);
   top: var(--p-space-4);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   right: var(--p-space-5);
diff --git a/polaris-react/src/components/Modal/components/Dialog/Dialog.scss b/polaris-react/src/components/Modal/components/Dialog/Dialog.scss
index ddb9acbc68c..ec2ef50236a 100644
--- a/polaris-react/src/components/Modal/components/Dialog/Dialog.scss
+++ b/polaris-react/src/components/Modal/components/Dialog/Dialog.scss
@@ -12,8 +12,7 @@ $breakpoints-height-limit-up: '(min-height: #{breakpoint($height-limit + $vertic
 .Container {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   position: fixed;
-  z-index: var(--p-z-11);
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+  z-index: var(--p-z-index-11);
   top: 0;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   right: 0;
diff --git a/polaris-react/src/components/PositionedOverlay/PositionedOverlay.scss b/polaris-react/src/components/PositionedOverlay/PositionedOverlay.scss
index 05f049741a8..b8390998038 100644
--- a/polaris-react/src/components/PositionedOverlay/PositionedOverlay.scss
+++ b/polaris-react/src/components/PositionedOverlay/PositionedOverlay.scss
@@ -1,7 +1,7 @@
 .PositionedOverlay {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   position: absolute;
-  z-index: var(--p-z-2);
+  z-index: var(--p-z-index-2);
 }
 
 .fixed {
diff --git a/polaris-react/src/components/Sheet/Sheet.scss b/polaris-react/src/components/Sheet/Sheet.scss
index da5ea439289..85dc44552f2 100644
--- a/polaris-react/src/components/Sheet/Sheet.scss
+++ b/polaris-react/src/components/Sheet/Sheet.scss
@@ -33,8 +33,7 @@ $sheet-desktop-width: 380px;
 .Container {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   position: fixed;
-  z-index: var(--p-z-11);
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+  z-index: var(--p-z-index-11);
   top: 0;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   right: 0;
diff --git a/polaris-react/src/components/Sheet/Sheet.stories.tsx b/polaris-react/src/components/Sheet/Sheet.stories.tsx
index 7e621b434de..056cac4e1ee 100644
--- a/polaris-react/src/components/Sheet/Sheet.stories.tsx
+++ b/polaris-react/src/components/Sheet/Sheet.stories.tsx
@@ -345,7 +345,7 @@ export function WithSearchableListbox() {
       style={{
         padding: 'var(--p-space-4) var(--p-space-2)',
         position: 'sticky',
-        zIndex: 'var(--p-z-12)',
+        zIndex: 'var(--p-z-index-12)',
         width: '100%',
         background: 'var(--p-surface)',
       }}
diff --git a/polaris-react/src/components/TopBar/TopBar.scss b/polaris-react/src/components/TopBar/TopBar.scss
index 432766b98dd..533c1b3e882 100644
--- a/polaris-react/src/components/TopBar/TopBar.scss
+++ b/polaris-react/src/components/TopBar/TopBar.scss
@@ -135,8 +135,7 @@ $icon-size: 20px;
 }
 
 .Contents {
-  z-index: var(--p-z-1);
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+  z-index: var(--p-z-index-1);
   display: flex;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   flex: 1 1 auto;
diff --git a/polaris-react/src/components/TopBar/components/Search/Search.scss b/polaris-react/src/components/TopBar/components/Search/Search.scss
index c6915e43be8..2afd67f2de8 100644
--- a/polaris-react/src/components/TopBar/components/Search/Search.scss
+++ b/polaris-react/src/components/TopBar/components/Search/Search.scss
@@ -5,7 +5,7 @@
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   position: fixed;
   visibility: hidden;
-  z-index: var(--p-z-8);
+  z-index: var(--p-z-index-8);
   pointer-events: none;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   top: $top-bar-height;
diff --git a/polaris-react/src/components/TopBar/components/SearchDismissOverlay/SearchDismissOverlay.scss b/polaris-react/src/components/TopBar/components/SearchDismissOverlay/SearchDismissOverlay.scss
index 483f2976cac..8a07720b7b5 100644
--- a/polaris-react/src/components/TopBar/components/SearchDismissOverlay/SearchDismissOverlay.scss
+++ b/polaris-react/src/components/TopBar/components/SearchDismissOverlay/SearchDismissOverlay.scss
@@ -10,8 +10,7 @@
   left: 0;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   right: 0;
-  z-index: var(--p-z-7);
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+  z-index: var(--p-z-index-7);
   height: 100%;
 }
 
diff --git a/polaris-react/src/components/TopBar/components/SearchField/SearchField.scss b/polaris-react/src/components/TopBar/components/SearchField/SearchField.scss
index 0044e28d3b5..9ec413203fc 100644
--- a/polaris-react/src/components/TopBar/components/SearchField/SearchField.scss
+++ b/polaris-react/src/components/TopBar/components/SearchField/SearchField.scss
@@ -12,9 +12,7 @@ $search-icon-width: calc(#{$icon-size} + var(--p-space-4));
   --pc-search-field-input: 2;
   --pc-search-field-icon: 3;
   --pc-search-field-action: 3;
-  // stylelint-enable
-  z-index: var(--p-z-11);
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+  z-index: var(--p-z-index-11);
   position: relative;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   display: flex;
diff --git a/polaris-tokens/src/token-groups/zIndex.ts b/polaris-tokens/src/token-groups/zIndex.ts
index ad41fdedc0a..a42d462127e 100644
--- a/polaris-tokens/src/token-groups/zIndex.ts
+++ b/polaris-tokens/src/token-groups/zIndex.ts
@@ -1,40 +1,40 @@
 import type {TokenGroup} from '../types';
 
 export const zIndex = {
-  'z-1': {
+  'z-index-1': {
     value: '100',
   },
-  'z-2': {
+  'z-index-2': {
     value: '400',
   },
-  'z-3': {
+  'z-index-3': {
     value: '510',
   },
-  'z-4': {
+  'z-index-4': {
     value: '512',
   },
-  'z-5': {
+  'z-index-5': {
     value: '513',
   },
-  'z-6': {
+  'z-index-6': {
     value: '514',
   },
-  'z-7': {
+  'z-index-7': {
     value: '515',
   },
-  'z-8': {
+  'z-index-8': {
     value: '516',
   },
-  'z-9': {
+  'z-index-9': {
     value: '517',
   },
-  'z-10': {
+  'z-index-10': {
     value: '518',
   },
-  'z-11': {
+  'z-index-11': {
     value: '519',
   },
-  'z-12': {
+  'z-index-12': {
     value: '520',
   },
 };
diff --git a/polaris.shopify.com/content/tools/polaris-migrator.md b/polaris.shopify.com/content/tools/polaris-migrator.md
index 5e535883a1a..653c2db3f7b 100644
--- a/polaris.shopify.com/content/tools/polaris-migrator.md
+++ b/polaris.shopify.com/content/tools/polaris-migrator.md
@@ -25,6 +25,30 @@ npx @shopify/polaris-migrator <migration> <path>
 
 ## Migrations
 
+### v11
+
+### `scss-replace-z-index`
+
+Replace the legacy SCSS `z-index()` function with the supported CSS custom property token equivalent (ex: `var(--p-z-index-1)`).
+
+Any invocations of `z-index()` that correspond to a z-index design-token i.e. `--p-z-index-1` will be replaced with a css variable declaration.
+This includes invocations to the `$fixed-element-stacking-order` sass map i.e. `z-index(modal, $fixed-element-stacking-order)`.
+
+```diff
+- .decl-1 {
+-   z-index: z-index(content);
+- }
+- .decl-2 {
+-   z-index: z-index(modal, $fixed-element-stacking-order)
+- }
++ decl-1 {
++   z-index: var(--p-z-index-1);
++ }
++ .decl-2 {
++   z-index: var(--p-z-index-11)
++ }
+```
+
 ### v10
 
 #### `styles-insert-stylelint-disable`
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 4406802dee6..5d0d5691a75 100644
--- a/polaris.shopify.com/pages/examples/sheet-with-searchable-listbox.tsx
+++ b/polaris.shopify.com/pages/examples/sheet-with-searchable-listbox.tsx
@@ -194,7 +194,7 @@ function SheetWithSearchableListboxExample() {
       style={{
         padding: 'var(--p-space-4) var(--p-space-2)',
         position: 'sticky',
-        zIndex: 'var(--p-z-12)',
+        zIndex: 'var(--p-z-index-12)',
         width: '100%',
         background: 'var(--p-surface)',
       }}