diff --git a/src/components/experiment-tracking/run-plots-modal/run-plots-modal.scss b/src/components/experiment-tracking/run-plots-modal/run-plots-modal.scss
index 792e5c912b..23bf4ff5e1 100644
--- a/src/components/experiment-tracking/run-plots-modal/run-plots-modal.scss
+++ b/src/components/experiment-tracking/run-plots-modal/run-plots-modal.scss
@@ -17,7 +17,7 @@
   flex-direction: column;
   overflow-y: scroll;
   position: absolute;
-  z-index: 3;
+  z-index: variables.$zindex-plot-modal;;
 }
 
 .pipeline-run-plots-modal__top {
diff --git a/src/components/experiment-tracking/runs-list/runs-list.scss b/src/components/experiment-tracking/runs-list/runs-list.scss
index 5c80cdef4f..9b0327e908 100644
--- a/src/components/experiment-tracking/runs-list/runs-list.scss
+++ b/src/components/experiment-tracking/runs-list/runs-list.scss
@@ -1,7 +1,7 @@
-@use '../../../styles/variables' as colors;
+@use '../../../styles/variables' as variables;
 
 .kui-theme--light {
-  --header-border-bottom: #{colors.$white-300};
+  --header-border-bottom: #{variables.$white-300};
 }
 
 .kui-theme--dark {
@@ -11,7 +11,7 @@
 .runs-list-top-wrapper {
   position: sticky;
   top: 0;
-  z-index: 1;
+  z-index: variables.$zindex-sticky-elements;
 }
 
 .search-bar-wrapper {
@@ -19,7 +19,7 @@
   padding-top: 24px;
   position: sticky;
   top: 0;
-  z-index: 1;
+  z-index: variables.$zindex-sticky-elements;
 }
 
 .runs-list__wrapper {
@@ -40,7 +40,7 @@
   padding: 3.5em 3.5em 1.2em 3em;
   position: sticky;
   top: 64px;
-  z-index: 1;
+  z-index: variables.$zindex-sticky-elements;
 }
 
 .compare-switch-wrapper__text {
diff --git a/src/components/feature-hints/feature-hints.scss b/src/components/feature-hints/feature-hints.scss
index a8d39aa353..9d75a39d4c 100644
--- a/src/components/feature-hints/feature-hints.scss
+++ b/src/components/feature-hints/feature-hints.scss
@@ -1,9 +1,9 @@
-@use '../../styles/variables' as colors;
+@use '../../styles/variables' as variables;
 
 .feature-hints {
-  background-color: colors.$yellow-0;
+  background-color: variables.$yellow-0;
   bottom: 36px;
-  color: colors.$black-900;
+  color: variables.$black-900;
   display: flex;
   flex-direction: column;
   height: auto;
@@ -11,7 +11,7 @@
   position: absolute;
   transition: height 0.3s ease-in-out, right ease 0.4s;
   width: 365px;
-  z-index: 5;
+  z-index: variables.$zindex-feature-hints;
 
   &__reopen-message {
     font-size: 14px;
@@ -20,7 +20,7 @@
   }
 
   &__nav {
-    color: colors.$black-300;
+    color: variables.$black-300;
     font-size: 12px;
     font-weight: 600;
     letter-spacing: 0.024px;
@@ -69,17 +69,17 @@
     }
 
     .button button {
-      color: colors.$black-900;
-      border-color: colors.$black-900;
+      color: variables.$black-900;
+      border-color: variables.$black-900;
 
       &:hover:not(.button__btn--secondary) {
-        background: colors.$black-900;
-        color: colors.$white-0;
+        background: variables.$black-900;
+        color: variables.$white-0;
       }
     }
 
     .button__btn--secondary:hover::after {
-      background: colors.$black-900;
+      background: variables.$black-900;
     }
 
     .button__btn--secondary:active {
@@ -101,7 +101,6 @@
   pointer-events: none;
   position: absolute;
   transform: translate(-50%, -50%);
-  transition: left 0.3s ease-in-out, top 0.3s ease-in-out,
-    opacity 0.1s ease-in-out;
-  z-index: 5;
+  transition: left 0.3s ease-in-out, top 0.3s ease-in-out, opacity 0.1s ease-in-out;
+  z-index: variables.$zindex-feature-hints;
 }
diff --git a/src/components/flowchart-wrapper/flowchart-wrapper.scss b/src/components/flowchart-wrapper/flowchart-wrapper.scss
index 2ceaef2d3e..7046984f53 100644
--- a/src/components/flowchart-wrapper/flowchart-wrapper.scss
+++ b/src/components/flowchart-wrapper/flowchart-wrapper.scss
@@ -36,7 +36,7 @@ $sidebar-toolbar-width-open: variables.$sidebar-width-open +
   opacity: 0;
   pointer-events: none;
   position: relative;
-  z-index: 3;
+  z-index: variables.$zindex-go-back-btn;
 
   .button button {
     background-color: variables.$yellow-300;
diff --git a/src/components/global-toolbar/global-toolbar.scss b/src/components/global-toolbar/global-toolbar.scss
index b117e90442..ddb2d33b80 100644
--- a/src/components/global-toolbar/global-toolbar.scss
+++ b/src/components/global-toolbar/global-toolbar.scss
@@ -11,7 +11,7 @@
   position: absolute;
   top: 0;
   width: variables.$global-toolbar-width;
-  z-index: 5;
+  z-index: variables.$zindex-global-toolbar;
 }
 
 .pipeline-global-routes-toolbar {
diff --git a/src/components/metadata-modal/metadata-modal.scss b/src/components/metadata-modal/metadata-modal.scss
index 5f1859590d..586c7be0b1 100644
--- a/src/components/metadata-modal/metadata-modal.scss
+++ b/src/components/metadata-modal/metadata-modal.scss
@@ -23,7 +23,7 @@
   height: 100%; /* Full height (cover the whole page) */
   inset: 0 0 0 variables.$global-toolbar-width;
   position: absolute;
-  z-index: 6;
+  z-index: variables.$zindex-metadata-modal;
 
   /* We don't need full width as sometime the preview table can take up more than a width of the page */
   background-color: var(--color-bg-plot);
diff --git a/src/components/metadata/styles/metadata-code.scss b/src/components/metadata/styles/metadata-code.scss
index 29e4ceb19b..2eb79fd0c5 100644
--- a/src/components/metadata/styles/metadata-code.scss
+++ b/src/components/metadata/styles/metadata-code.scss
@@ -26,7 +26,7 @@
   padding: 0 variables.$metadata-sidebar-width-open 0 0;
   transform: translateX(100vw);
   transition: transform ease 0.5s 0.1s, left ease 0.5s;
-  z-index: variables.$z-index-metadata-code;
+  z-index: variables.$zindex-metadata-code;
 
   &--visible {
     transform: translateX(variables.$global-toolbar-width);
diff --git a/src/components/metadata/styles/metadata.scss b/src/components/metadata/styles/metadata.scss
index b35c612d49..67f5848cf6 100644
--- a/src/components/metadata/styles/metadata.scss
+++ b/src/components/metadata/styles/metadata.scss
@@ -28,7 +28,7 @@
   top: -1px; /* Avoids pixel rounding gaps */
   right: -1px;
   bottom: -1px;
-  z-index: variables.$z-index-metadata-panel;
+  z-index: variables.$zindex-metadata-panel;
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -254,7 +254,7 @@ $list-inline-spacing: 0.2em;
   flex-direction: row;
   justify-content: center;
   padding: 0;
-  z-index: 1;
+  z-index: variables.$zindex-metadata-link;
 
   &:hover {
     background-color: var(--color-button-plot-hovered);
diff --git a/src/components/node-list/styles/_group.scss b/src/components/node-list/styles/_group.scss
index 04aa06c72d..0d456bd2f5 100644
--- a/src/components/node-list/styles/_group.scss
+++ b/src/components/node-list/styles/_group.scss
@@ -1,4 +1,4 @@
-@use '../../../styles/variables' as colors;
+@use '../../../styles/variables' as var;
 @use './variables';
 
 %nolist {
@@ -28,7 +28,7 @@ $placeholder-fade: 120px;
 
 .pipeline-nodelist__placeholder-upper,
 .pipeline-nodelist__placeholder-lower {
-  z-index: 2;
+  z-index: var.$zindex-nodelist-placeholder;
   pointer-events: none;
 }
 
@@ -72,7 +72,7 @@ $placeholder-fade: 120px;
 .pipeline-nodelist__heading {
   position: sticky;
   top: 0;
-  z-index: 1;
+  z-index: var.$zindex-nodelist-heading;
   margin: 0;
 
   // Avoid pixel gap above when scrolling.
@@ -94,7 +94,7 @@ $placeholder-fade: 120px;
   &::after {
     position: absolute;
     bottom: -19px;
-    z-index: -1;
+    z-index: var.$zindex-group-background-fade;
     width: 100%;
     height: 20px;
     background: linear-gradient(
@@ -114,7 +114,7 @@ $placeholder-fade: 120px;
   &::after {
     position: absolute;
     bottom: -19px;
-    z-index: -1;
+    z-index: var.$zindex-group-background-fade;
     width: 100%;
     height: 20px;
     background: linear-gradient(
@@ -148,7 +148,7 @@ $placeholder-fade: 120px;
     outline: none;
 
     [data-whatintent='keyboard'] & {
-      box-shadow: 0 0 0 3px colors.$blue-300 inset;
+      box-shadow: 0 0 0 3px var.$blue-300 inset;
     }
   }
 
@@ -167,7 +167,7 @@ $placeholder-fade: 120px;
   }
 
   &--disabled {
-    color: colors.$black-400;
+    color: var.$black-400;
     transform: rotate(90deg);
   }
 }
diff --git a/src/components/node-list/styles/_panels.scss b/src/components/node-list/styles/_panels.scss
index 20f4ef8aed..6300b5e064 100644
--- a/src/components/node-list/styles/_panels.scss
+++ b/src/components/node-list/styles/_panels.scss
@@ -1,8 +1,8 @@
-@use '../../../styles/variables' as colors;
+@use '../../../styles/variables' as var;
 @use './variables';
 
 .pipeline-nodelist__filter-panel {
-  z-index: 1;
+  z-index: var.$zindex-filter-panel;
   background: var(--color-nodelist-filter-panel);
   border-top: 1px solid var(--color-border-line);
 
@@ -64,8 +64,8 @@
 
   // Handle has keyboard focus, show outline.
   &:focus {
-    z-index: 1;
-    outline: 3px solid colors.$blue-300;
+    z-index: var.$zindex-split-handle-focus;
+    outline: 3px solid var.$blue-300;
   }
 
   // Handle is hovered, highlight border.
@@ -80,7 +80,7 @@
 
   // Handle is active resizing, highlight border.
   .pipeline-nodelist__split--resizing & {
-    border-top: 1px solid colors.$blue-300;
+    border-top: 1px solid var.$blue-300;
   }
 }
 
diff --git a/src/components/node-list/styles/_row.scss b/src/components/node-list/styles/_row.scss
index df86639e68..409be89666 100644
--- a/src/components/node-list/styles/_row.scss
+++ b/src/components/node-list/styles/_row.scss
@@ -2,7 +2,7 @@
 @use './variables';
 
 .MuiTreeItem-iconContainer svg {
-  z-index: var.$z-index-MuiTreeItem-icon;
+  z-index: var.$zindex-MuiTreeItem-icon;
 }
 
 .pipeline-nodelist__row {
diff --git a/src/components/preview-table/preview-table.scss b/src/components/preview-table/preview-table.scss
index c8a0fd5395..35a95b3d92 100644
--- a/src/components/preview-table/preview-table.scss
+++ b/src/components/preview-table/preview-table.scss
@@ -48,7 +48,7 @@
     background: var(--color-bg);
     position: sticky;
     top: 0;
-    z-index: 1;
+    z-index: variables.$zindex-preview-table-header;
   }
 
   .preview-table__row:hover,
diff --git a/src/components/search-list/search-list.scss b/src/components/search-list/search-list.scss
index 75ded03152..914d4870cb 100644
--- a/src/components/search-list/search-list.scss
+++ b/src/components/search-list/search-list.scss
@@ -14,7 +14,7 @@
     right: 2px;
     top: 18px;
     width: 20px;
-    z-index: 1;
+    z-index: variables.$zindex-search-close-icon;
   }
 
   .search-bar .icon__graphics {
@@ -42,7 +42,7 @@
 
   .search-input--focused {
     position: relative;
-    z-index: 1;
+    z-index: variables.$zindex-search-input-focused;
     outline-color: variables.$blue-300;
   }
 
diff --git a/src/components/sidebar/sidebar.scss b/src/components/sidebar/sidebar.scss
index 03ac7eba1e..2575bcb166 100644
--- a/src/components/sidebar/sidebar.scss
+++ b/src/components/sidebar/sidebar.scss
@@ -14,14 +14,14 @@
   }
 
   // Ensures sidebar tooltips are above code panel
-  z-index: 1;
+  z-index: variables.$zindex-sidebar;
   display: flex;
   width: 100%;
   transform: translateX(calc(-100% + #{variables.$sidebar-width-closed}));
   transition: transform ease 0.4s;
 
   @media (min-width: variables.$metadata-sidebar-code-breakpoint) {
-    z-index: 3;
+    z-index: variables.$zindex-sidebar-expanded;
   }
 
   @media (min-width: variables.$sidebar-width-breakpoint) {
@@ -55,7 +55,7 @@
   position: relative;
   transition: visibility 0.3s;
   visibility: hidden;
-  z-index: 2;
+  z-index: variables.$zindex-ui;
 
   .pipeline-sidebar--visible & {
     visibility: visible;
@@ -75,7 +75,7 @@
   height: 100%;
   position: relative;
   width: variables.$sidebar-width-closed;
-  z-index: 2;
+  z-index: variables.$zindex-toolbar;
 }
 
 .compare-switch-wrapper__text {
diff --git a/src/components/ui/banner/banner.scss b/src/components/ui/banner/banner.scss
index cddde93cb2..2bfd914b9a 100755
--- a/src/components/ui/banner/banner.scss
+++ b/src/components/ui/banner/banner.scss
@@ -25,7 +25,7 @@
   justify-content: space-between;
   padding: 16px;
   width: 100%;
-  z-index: variables.$z-index-banner;
+  z-index: variables.$zindex-banner;
   font-family: inherit;
   box-shadow: var(--banner-box-shadow);
   background-color: var(--banner--background);
diff --git a/src/components/ui/dropdown/dropdown.scss b/src/components/ui/dropdown/dropdown.scss
index 9942ec0d5f..b38cd4229c 100644
--- a/src/components/ui/dropdown/dropdown.scss
+++ b/src/components/ui/dropdown/dropdown.scss
@@ -66,7 +66,7 @@ $menu-item-padding: 12px;
   position: relative;
   user-select: none;
   width: 100%;
-  z-index: 8;
+  z-index: variables.$zindex-dropdown-label;
 
   &:disabled {
     cursor: not-allowed;
@@ -107,7 +107,7 @@ $menu-item-padding: 12px;
 }
 
 .dropdown__options {
-  z-index: 2; // fix closing transition animation bug
+  z-index: variables.$zindex-dropdown-options;
   background: var(--dropdown-options-bg);
   border-top: none;
   box-shadow: 0 0 2px variables.$black-800;
@@ -144,5 +144,5 @@ $menu-item-padding: 12px;
   justify-content: space-around;
   padding: 24px 0;
   position: sticky;
-  z-index: 1;
+  z-index: variables.$zindex-dropdown-btn-wrapper;
 }
diff --git a/src/components/ui/icon-button/icon-button.scss b/src/components/ui/icon-button/icon-button.scss
index 84ea24abe0..f143bb42fa 100644
--- a/src/components/ui/icon-button/icon-button.scss
+++ b/src/components/ui/icon-button/icon-button.scss
@@ -68,7 +68,7 @@ $triangle-size: 7px;
   white-space: nowrap;
 
   // to ensure the tooltip will show on the top of the bookmark dropdown
-  z-index: 1;
+  z-index: variables.$zindex-toolbar-label;
 
   @media (max-width: variables.$sidebar-width-breakpoint) {
     .pipeline-sidebar--visible & {
diff --git a/src/components/ui/modal/modal.scss b/src/components/ui/modal/modal.scss
index 268e55633c..5c240c6a60 100644
--- a/src/components/ui/modal/modal.scss
+++ b/src/components/ui/modal/modal.scss
@@ -1,4 +1,4 @@
-@use '../../../styles/variables' as colors;
+@use '../../../styles/variables' as variables;
 
 /** Variables **/
 
@@ -8,17 +8,17 @@ $size-content-maxwidth: 400px;
 $duration-visibility: 0.4s;
 
 .kui-theme--light {
-  --color-modal-bg: #{colors.$black-700};
-  --color-modal-content: #{colors.$white-0};
-  --color-modal-title: #{colors.$black-900};
-  --color-modal-description: #{colors.$black-700};
+  --color-modal-bg: #{variables.$black-700};
+  --color-modal-content: #{variables.$white-0};
+  --color-modal-title: #{variables.$black-900};
+  --color-modal-description: #{variables.$black-700};
 }
 
 .kui-theme--dark {
-  --color-modal-bg: #{colors.$slate-900};
-  --color-modal-content: #{colors.$slate-0};
-  --color-modal-title: #{colors.$white-0};
-  --color-modal-description: #{colors.$black-0};
+  --color-modal-bg: #{variables.$slate-900};
+  --color-modal-content: #{variables.$slate-0};
+  --color-modal-title: #{variables.$white-0};
+  --color-modal-description: #{variables.$black-0};
 }
 
 /** Implementation **/
@@ -29,7 +29,7 @@ $duration-visibility: 0.4s;
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 6;
+  z-index: variables.$zindex-modal;
   visibility: hidden;
   transition: visibility ease $duration-visibility;
 }
diff --git a/src/components/ui/search-bar/search-bar.scss b/src/components/ui/search-bar/search-bar.scss
index 1ec43a1a07..e375dd9074 100644
--- a/src/components/ui/search-bar/search-bar.scss
+++ b/src/components/ui/search-bar/search-bar.scss
@@ -1,4 +1,4 @@
-@use '../../../styles/variables' as colors;
+@use '../../../styles/variables' as variables;
 
 $default-input-width: 320px;
 $size-icon: 24px;
@@ -23,7 +23,7 @@ $size-pos-base: 10px;
   .search-bar & {
     position: absolute;
     top: 50%;
-    z-index: 1;
+    z-index: variables.$zindex-search-icon;
     opacity: 0.3;
     transform: translate(0, -50%);
   }
@@ -86,7 +86,7 @@ $size-pos-base: 10px;
   width: 20px;
 
   &:focus {
-    outline-color: colors.$blue-300;
+    outline-color: variables.$blue-300;
   }
 
   .search-bar & {
diff --git a/src/components/ui/switch/switch.scss b/src/components/ui/switch/switch.scss
index 94172e94f1..8356fe6f23 100644
--- a/src/components/ui/switch/switch.scss
+++ b/src/components/ui/switch/switch.scss
@@ -1,4 +1,4 @@
-@use '../../../styles/variables' as colors;
+@use '../../../styles/variables' as variables;
 
 .switch {
   align-items: center;
@@ -20,7 +20,7 @@
   position: relative;
   vertical-align: middle;
   width: 28px;
-  z-index: 0;
+  z-index: variables.$zindex-switch-root;
 }
 
 .switch__base {
@@ -29,7 +29,7 @@
   border-radius: 50%;
   border: 0;
   box-sizing: border-box;
-  color: colors.$white-0;
+  color: variables.$white-0;
   cursor: pointer;
   display: flex;
   justify-content: center;
@@ -42,15 +42,15 @@
   top: 0;
   transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
     transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  z-index: 1;
+  z-index: variables.$zindex-switch-base;
 
   &--active {
-    color: colors.$blue-300;
+    color: variables.$blue-300;
     transform: translateX(14px);
   }
 
   &--active + .switch__track {
-    background-color: colors.$blue-300;
+    background-color: variables.$blue-300;
     opacity: 0.4;
   }
 }
@@ -65,24 +65,24 @@
   position: absolute;
   top: 0;
   width: 100%;
-  z-index: 1;
+  z-index: variables.$zindex-switch-input;
 }
 
 .switch__circle {
   background-color: currentcolor;
   border-radius: 50%;
-  box-shadow: colors.$black-100 0 2px 1px -1px, colors.$black-100 0 1px 1px 0,
-    colors.$black-100 0 1px 3px 0;
+  box-shadow: variables.$black-100 0 2px 1px -1px, variables.$black-100 0 1px 1px 0,
+    variables.$black-100 0 1px 3px 0;
   height: 12px;
   width: 12px;
 }
 
 .switch__track {
-  background-color: colors.$grey-900;
+  background-color: variables.$grey-900;
   border-radius: 7px;
   height: 100%;
   transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
     background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   width: 100%;
-  z-index: -1;
+  z-index: variables.$zindex-switch-track;
 }
diff --git a/src/components/ui/tooltip/tooltip.scss b/src/components/ui/tooltip/tooltip.scss
index 146fe77dff..1d813eb383 100644
--- a/src/components/ui/tooltip/tooltip.scss
+++ b/src/components/ui/tooltip/tooltip.scss
@@ -1,3 +1,4 @@
+@use '../../../styles/variables' as variables;
 @use '../../../styles/extends';
 
 $x-offset: 20px;
@@ -9,7 +10,7 @@ $triangle-size-sm: 5px;
   position: absolute;
   bottom: calc(100% + 10px);
   left: 50%;
-  z-index: 9;
+  z-index: variables.$zindex-tooltip;
   transform: translate(-50%, 0);
   font-size: 12px;
   visibility: hidden;
diff --git a/src/components/update-reminder/update-reminder.scss b/src/components/update-reminder/update-reminder.scss
index a04d722e77..2f499b1930 100644
--- a/src/components/update-reminder/update-reminder.scss
+++ b/src/components/update-reminder/update-reminder.scss
@@ -1,11 +1,11 @@
-@use '../../styles/variables' as colors;
+@use '../../styles/variables' as variables;
 
 $panel-width: 484px;
 $spacing-left: 48px;
 
 .update-reminder {
   position: relative;
-  z-index: 10;
+  z-index: variables.$zindex-update-reminder;
 }
 
 %h3 {
@@ -21,36 +21,36 @@ $spacing-left: 48px;
   width: 430px;
 
   a {
-    color: colors.$blue-900;
+    color: variables.$blue-900;
   }
 }
 
 .kui-theme--light {
-  --color-detail-bg: #{colors.$white-400};
-  --color-header-bg: #{colors.$yellow-0};
-  --color-header-bg--up-to-date: #{colors.$grey-400};
-  --color-header-text--up-to-date: #{colors.$black-900};
-  --color-link: #{colors.$blue-600};
-  --color-subtext: #{colors.$black-400};
-  --color-content-bg: #{colors.$white-300};
-  --color-version-tag: #{colors.$black-900};
-  --color-version-tag--hover-outdated: #{colors.$black-900};
-  --color-version-tag--hover-up-to-date-bg: #{colors.$black-300};
-  --color-version-tag--hover-up-to-date: #{colors.$white-0};
+  --color-detail-bg: #{variables.$white-400};
+  --color-header-bg: #{variables.$yellow-0};
+  --color-header-bg--up-to-date: #{variables.$grey-400};
+  --color-header-text--up-to-date: #{variables.$black-900};
+  --color-link: #{variables.$blue-600};
+  --color-subtext: #{variables.$black-400};
+  --color-content-bg: #{variables.$white-300};
+  --color-version-tag: #{variables.$black-900};
+  --color-version-tag--hover-outdated: #{variables.$black-900};
+  --color-version-tag--hover-up-to-date-bg: #{variables.$black-300};
+  --color-version-tag--hover-up-to-date: #{variables.$white-0};
 }
 
 .kui-theme--dark {
-  --color-detail-bg: #{colors.$slate-300};
-  --color-header-bg: #{colors.$yellow-0};
-  --color-header-bg--up-to-date: #{colors.$white-0};
-  --color-header-text--up-to-date: #{colors.$black-900};
-  --color-link: #{colors.$blue-300};
-  --color-subtext: #{colors.$black-400};
-  --color-content-bg: #{colors.$slate-300};
-  --color-version-tag: #{colors.$white-500};
-  --color-version-tag--hover-outdated: #{colors.$black-900};
-  --color-version-tag--hover-up-to-date-bg: #{colors.$black-400};
-  --color-version-tag--hover-up-to-date: #{colors.$white-500};
+  --color-detail-bg: #{variables.$slate-300};
+  --color-header-bg: #{variables.$yellow-0};
+  --color-header-bg--up-to-date: #{variables.$white-0};
+  --color-header-text--up-to-date: #{variables.$black-900};
+  --color-link: #{variables.$blue-300};
+  --color-subtext: #{variables.$black-400};
+  --color-content-bg: #{variables.$slate-300};
+  --color-version-tag: #{variables.$white-500};
+  --color-version-tag--hover-outdated: #{variables.$black-900};
+  --color-version-tag--hover-up-to-date-bg: #{variables.$black-400};
+  --color-version-tag--hover-up-to-date: #{variables.$white-500};
 }
 
 .update-reminder-unexpanded {
@@ -64,10 +64,10 @@ $spacing-left: 48px;
   right: 0;
   top: 0;
   width: $panel-width;
-  z-index: 2;
+  z-index: variables.$zindex-update-reminder-elements;
 
   p {
-    color: colors.$slate-700;
+    color: variables.$slate-700;
     text-align: center;
     margin-top: 7.5px;
     font-size: 12px;
@@ -80,7 +80,7 @@ $spacing-left: 48px;
   button {
     background-color: var(--color-header-bg);
     border: none;
-    color: colors.$black-700;
+    color: variables.$black-700;
     cursor: pointer;
     font-size: 12px;
     padding: 0;
@@ -92,7 +92,7 @@ $spacing-left: 48px;
     }
 
     &:hover {
-      color: colors.$black-800;
+      color: variables.$black-800;
     }
   }
 }
@@ -107,7 +107,7 @@ $spacing-left: 48px;
   right: 0;
   top: 0;
   width: $panel-width;
-  z-index: 2;
+  z-index: variables.$zindex-update-reminder-elements;
 
   .close-button-container {
     margin-right: 20px;
@@ -115,7 +115,7 @@ $spacing-left: 48px;
 
   .close-button {
     svg {
-      fill: colors.$black-800;
+      fill: variables.$black-800;
       height: 24px;
       width: 24px;
     }
@@ -134,13 +134,13 @@ $spacing-left: 48px;
 
 .update-reminder-expanded-detail {
   background-color: var(--color-header-bg);
-  color: colors.$black-900;
+  color: variables.$black-900;
   padding-bottom: 40px;
   position: absolute;
   right: 0;
   top: 36px;
   width: $panel-width;
-  z-index: 2;
+  z-index: variables.$zindex-update-reminder-elements;
 
   &--up-to-date {
     background-color: var(--color-header-bg--up-to-date);
@@ -178,7 +178,7 @@ $spacing-left: 48px;
   }
 
   .pipeline-icon {
-    fill: colors.$black-900;
+    fill: variables.$black-900;
   }
 }
 
@@ -193,7 +193,7 @@ $spacing-left: 48px;
   right: 0;
   top: 270px;
   width: $panel-width;
-  z-index: 2;
+  z-index: variables.$zindex-update-reminder-elements;
 
   &--up-to-date {
     height: calc(100vh - 144px);
@@ -241,20 +241,20 @@ $spacing-left: 48px;
   position: absolute;
   top: 0;
   right: 0;
-  z-index: 2;
+  z-index: variables.$zindex-update-reminder-elements;
 
   &--outdated {
     &:hover {
-      background-color: colors.$yellow-0;
+      background-color: variables.$yellow-0;
       color: var(--color-version-tag--hover-outdated);
 
       > span {
-        background-color: colors.$yellow-600;
+        background-color: variables.$yellow-600;
       }
     }
 
     > span {
-      background-color: colors.$yellow-0;
+      background-color: variables.$yellow-0;
       border-radius: 50%;
       display: inline-block;
       height: 8px;
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 83fc27b943..9898b080d6 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -27,11 +27,63 @@ $metadata-modal-breakpoint: 700px;
 $global-toolbar-width: 80px;
 $run-list-controls-height: 95px;
 
-// -- levels -- //
-$z-index-metadata-panel: 3;
-$z-index-metadata-code: 3;
-$z-index-MuiTreeItem-icon: 1;
-$z-index-banner: 6;
+// z-index values
+
+// z-index -1
+$zindex-switch-track: -1;
+$zindex-group-background-fade: -1;
+
+// z-index 0
+$zindex-switch-root: 0;
+
+// z-index 1
+$zindex-MuiTreeItem-icon: 1;
+$zindex-sidebar: 1;
+$zindex-sticky-elements: 1;
+$zindex-search-icon: 1;
+$zindex-toolbar-label: 1;
+$zindex-metadata-link: 1;
+$zindex-nodelist-heading: 1;
+$zindex-switch-base: 1;
+$zindex-switch-input: 1;
+$zindex-filter-panel: 1;
+$zindex-split-handle-focus: 1;
+$zindex-preview-table-header: 1;
+$zindex-search-close-icon: 1;
+$zindex-search-input-focused: 1;
+$zindex-dropdown-btn-wrapper: 1;
+
+// z-index 2
+$zindex-ui: 2;
+$zindex-toolbar: 2;
+$zindex-nodelist-placeholder: 2;
+$zindex-update-reminder-elements: 2;
+$zindex-dropdown-options: 2; // fix closing transition animation bug
+
+// z-index 3
+$zindex-metadata-code: 3;
+$zindex-sidebar-expanded: 3;
+$zindex-plot-modal: 3;
+$zindex-go-back-btn: 3;
+$zindex-metadata-panel: 3;
+
+// z-index 5
+$zindex-feature-hints: 5;
+$zindex-global-toolbar: 5;
+
+// z-index 6
+$zindex-modal: 6;
+$zindex-metadata-modal: 6;
+$zindex-banner: 6;
+
+// z-index 8
+$zindex-dropdown-label: 8;
+
+// z-index 9
+$zindex-tooltip: 9;
+
+// z-index 10
+$zindex-update-reminder: 10; // For the main update reminder
 
 // Micro-animation
 $run-width: 375px;