diff --git a/src/components/code-snippet/_code-snippet.scss b/src/components/code-snippet/_code-snippet.scss
index 46714173e9e4..f5be3a3a6479 100644
--- a/src/components/code-snippet/_code-snippet.scss
+++ b/src/components/code-snippet/_code-snippet.scss
@@ -1,6 +1,7 @@
 @import '../../globals/scss/vars';
 @import '../../globals/scss/colors';
 @import '../../globals/scss/typography';
+@import '../../globals/scss/spacing';
 @import '../../globals/scss/import-once';
 @import '../../globals/scss/helper-mixins';
 @import '../../globals/scss/css--reset';
@@ -10,7 +11,7 @@
   .#{$prefix}--snippet--code {
     @include bx--snippet;
     background-color: $snippet-background-color;
-    padding: 1rem 2.5rem 1rem 1rem;
+    padding: $spacing-md $spacing-2xl $spacing-md $spacing-md;
   }
 
   .#{$prefix}--snippet code {
@@ -20,7 +21,7 @@
   .#{$prefix}--snippet--code .#{$prefix}--snippet-container {
     max-height: rem(192px);
     overflow-y: scroll;
-    margin-right: 1rem;
+    margin-right: $spacing-md;
     position: relative;
   }
 
@@ -33,7 +34,7 @@
     background-color: $text-01;
     color: $inverse-01;
     height: 3.5rem;
-    padding: 0 2.5rem 0 1rem;
+    padding: 0 $spacing-2xl 0 $spacing-md;
   }
 
   .#{$prefix}--snippet--terminal .#{$prefix}--snippet-container {
diff --git a/src/components/content-switcher/_content-switcher.scss b/src/components/content-switcher/_content-switcher.scss
index 061882aedce3..f9d67f03c507 100644
--- a/src/components/content-switcher/_content-switcher.scss
+++ b/src/components/content-switcher/_content-switcher.scss
@@ -1,6 +1,7 @@
 @import '../../globals/scss/vars';
 @import '../../globals/scss/colors';
 @import '../../globals/scss/typography';
+@import '../../globals/scss/spacing';
 @import '../../globals/scss/helper-mixins';
 @import '../../globals/scss/css--reset';
 @import '../../globals/scss/import-once';
@@ -20,7 +21,7 @@
     background-color: transparent;
     display: flex;
     align-items: center;
-    padding: 0 2rem;
+    padding: 0 $spacing-xl;
     margin: 0;
     text-decoration: none;
     border: 1px solid $brand-01;
diff --git a/src/components/data-table-v2/_data-table-v2-action.scss b/src/components/data-table-v2/_data-table-v2-action.scss
index 08a29cb3c0e9..dfafad093184 100644
--- a/src/components/data-table-v2/_data-table-v2-action.scss
+++ b/src/components/data-table-v2/_data-table-v2-action.scss
@@ -1,7 +1,7 @@
 .#{$prefix}--table-toolbar {
   display: flex;
-  padding-top: rem(8px);
-  padding-bottom: rem(8px);
+  padding-top: $spacing-xs;
+  padding-bottom: $spacing-xs;
   width: 100%;
   position: relative;
 
@@ -29,8 +29,8 @@
 .#{$prefix}--toolbar-action {
   @include button-reset;
   cursor: pointer;
-  padding-left: rem(12px);
-  padding-right: rem(12px);
+  padding-left: $spacing-sm;
+  padding-right: $spacing-sm;
 
   &:hover {
     > .#{$prefix}--toolbar-action__icon {
@@ -56,8 +56,8 @@
   }
 
   ~ .#{$prefix}--btn {
-    margin-left: rem(12px);
-    margin-right: rem(2px);
+    margin-left: $spacing-sm;
+    margin-right: $spacing-sm;
   }
 }
 
@@ -76,8 +76,8 @@
   opacity: 0;
   left: 0;
   top: 0;
-  padding-left: rem(24px);
-  padding-right: rem(24px);
+  padding-left: $spacing-lg;
+  padding-right: $spacing-lg;
   width: 100%;
   height: 100%;
   z-index: 99999;
@@ -131,7 +131,7 @@
 .#{$prefix}--action-icons {
   margin-left: auto;
   svg {
-    padding: 0 rem(12px);
+    padding: 0 $spacing-sm;
     fill: $ui-01;
     height: rem(16px);
     width: auto;
@@ -147,7 +147,7 @@
 
 .#{$prefix}--batch-summary__para {
   @include typescale('zeta');
-  margin-right: rem(24px);
+  margin-right: $spacing-lg;
 }
 
 .#{$prefix}--batch-summary__cancel {
diff --git a/src/components/data-table-v2/_data-table-v2-core.scss b/src/components/data-table-v2/_data-table-v2-core.scss
index 0468d58d7af8..45208c47aca2 100644
--- a/src/components/data-table-v2/_data-table-v2-core.scss
+++ b/src/components/data-table-v2/_data-table-v2-core.scss
@@ -2,7 +2,7 @@
   width: 100%;
   min-width: rem(500px);
   overflow-x: auto;
-  padding-top: 2px; // allow space for focus styles
+  padding-top: $spacing-3xs; // allow space for focus styles
 }
 
 .#{$prefix}--data-table-v2 {
@@ -53,7 +53,7 @@
   th,
   td {
     border-top: 1px solid $ui-04;
-    padding-left: rem(12px);
+    padding-left: $spacing-sm;
     vertical-align: middle;
     text-align: left;
 
@@ -63,7 +63,7 @@
     }
 
     &:last-of-type {
-      padding-right: rem(24px);
+      padding-right: $spacing-lg;
       border-right: 1px solid $ui-04;
     }
   }
@@ -95,7 +95,7 @@
 // Options
 
 .#{$prefix}--data-table-v2-header {
-  margin-bottom: 0.5rem;
+  margin-bottom: $spacing-xs;
 }
 
 .#{$prefix}--data-table-v2--zebra {
diff --git a/src/components/data-table-v2/_data-table-v2-expandable.scss b/src/components/data-table-v2/_data-table-v2-expandable.scss
index e6332aa3dc6c..fab012ea86e0 100644
--- a/src/components/data-table-v2/_data-table-v2-expandable.scss
+++ b/src/components/data-table-v2/_data-table-v2-expandable.scss
@@ -25,7 +25,7 @@ tr.#{$prefix}--expandable-row-v2 {
   + tr[data-child-row] {
     td {
       border-top: 0;
-      padding-bottom: rem(8px);
+      padding-bottom: $spacing-xs;
     }
   }
 
@@ -91,5 +91,5 @@ tr.#{$prefix}--expandable-row--hover-v2 {
   height: 16px;
   width: auto;
   max-width: 16px;
-  padding: 2px;
+  padding: $spacing-3xs;
 }
diff --git a/src/components/data-table-v2/_data-table-v2-inline-edit.scss b/src/components/data-table-v2/_data-table-v2-inline-edit.scss
index e7dc53ddb133..e5061a2a98e3 100644
--- a/src/components/data-table-v2/_data-table-v2-inline-edit.scss
+++ b/src/components/data-table-v2/_data-table-v2-inline-edit.scss
@@ -23,7 +23,7 @@
 
   &:focus {
     @include focus-outline;
-    padding: 2px;
+    padding: $spacing-3xs;
 
     .#{$prefix}--inline-edit-label__icon {
       width: auto;
@@ -46,7 +46,7 @@
   margin-left: rem(-12px);
 
   input {
-    padding-left: rem(12px);
+    padding-left: $spacing-sm;
   }
 }
 
@@ -56,7 +56,7 @@
   }
 
   select {
-    padding: 0.45rem 2.75rem 0.45rem 1rem;
+    padding: 0.45rem 2.75rem 0.45rem $spacing-md;
   }
 
   .#{$prefix}--select__arrow {
diff --git a/src/components/data-table-v2/_data-table-v2-sort.scss b/src/components/data-table-v2/_data-table-v2-sort.scss
index ece78ccedc7a..6788eeaf7769 100644
--- a/src/components/data-table-v2/_data-table-v2-sort.scss
+++ b/src/components/data-table-v2/_data-table-v2-sort.scss
@@ -49,7 +49,7 @@
   opacity: 0;
   fill: $ui-05;
   height: rem(9px);
-  padding: 2px;
+  padding: $spacing-3xs;
   width: auto;
   max-width: 14px;
 }
diff --git a/src/components/data-table-v2/_data-table-v2.scss b/src/components/data-table-v2/_data-table-v2.scss
index 08ddbe5d513b..11cdccd04b07 100644
--- a/src/components/data-table-v2/_data-table-v2.scss
+++ b/src/components/data-table-v2/_data-table-v2.scss
@@ -1,4 +1,5 @@
 @import '../../globals/scss/vars';
+@import '../../globals/scss/spacing';
 @import '../../globals/scss/helper-mixins';
 
 @import 'data-table-v2-action';
diff --git a/src/components/date-picker/_date-picker.scss b/src/components/date-picker/_date-picker.scss
index 03aabc412419..594b8668f511 100644
--- a/src/components/date-picker/_date-picker.scss
+++ b/src/components/date-picker/_date-picker.scss
@@ -1,5 +1,6 @@
 @import '../../globals/scss/vars';
 @import '../../globals/scss/colors';
+@import '../../globals/scss/spacing';
 @import '../../globals/scss/typography';
 @import '../../globals/scss/css--reset';
 @import '../../globals/scss/helper-mixins';
@@ -44,7 +45,7 @@
     position: relative;
     height: rem(40px);
     max-width: 9rem;
-    padding: 0 1rem;
+    padding: 0 $spacing-md;
     background-color: $field-01;
     color: $text-01;
     border: 1px solid transparent;
@@ -78,7 +79,7 @@
   }
 
   .#{$prefix}--date-picker__icon + .#{$prefix}--date-picker__input {
-    padding-left: 2.9rem;
+    padding-left: $spacing-3xl;
   }
 
   .#{$prefix}--date-picker--range {
@@ -87,7 +88,7 @@
   }
 
   .#{$prefix}--date-picker--range > .#{$prefix}--date-picker-container:first-child {
-    margin-right: 0.5rem;
+    margin-right: $spacing-xs;
   }
 
   .#{$prefix}--date-picker--range .#{$prefix}--date-picker__icon {
@@ -107,7 +108,7 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding: 0.875rem 1rem 0.25rem;
+    padding: $spacing-md $spacing-md $spacing-2xs;
     width: rem(285px);
     height: rem(230px);
     border-radius: 0;
@@ -128,7 +129,7 @@
   .#{$prefix}--date-picker__month,
   .flatpickr-month {
     width: 100%;
-    margin-bottom: 0.2rem;
+    margin-bottom: $spacing-2xs;
   }
 
   .#{$prefix}--date-picker__month .flatpickr-prev-month,
@@ -177,7 +178,7 @@
     border-radius: 0;
     min-width: rem(38px);
     width: rem(38px);
-    padding: .25rem;
+    padding: $spacing-2xs;
 
     &:focus {
       outline: 1px solid $brand-01;
@@ -330,6 +331,6 @@
   .#{$prefix}--date-picker__weekdays,
   .flatpickr-weekdays {
     width: rem(225px);
-    margin-bottom: 0.325rem;
+    margin-bottom: $spacing-2xs;
   }
 }
diff --git a/src/components/dropdown/_dropdown.scss b/src/components/dropdown/_dropdown.scss
index 6d1b4f8800cd..3bd238903863 100644
--- a/src/components/dropdown/_dropdown.scss
+++ b/src/components/dropdown/_dropdown.scss
@@ -7,6 +7,7 @@
 @import '../../globals/scss/helper-mixins';
 @import '../../globals/scss/layer';
 @import '../../globals/scss/typography';
+@import '../../globals/scss/spacing';
 @import '../../globals/scss/import-once';
 @import '../../globals/scss/css--reset';
 @import '../../globals/scss/css--typography';
@@ -56,8 +57,8 @@
     height: rem(40px);
     padding-top: rem(13px);
     padding-bottom: rem(13px);
-    padding-left: 1rem;
-    padding-right: 2.25rem;
+    padding-left: $spacing-md;
+    padding-right: $spacing-2xl;
     font-weight: 600;
     white-space: nowrap;
     overflow: hidden;
@@ -82,10 +83,7 @@
     display: block;
     color: currentColor;
     text-decoration: none;
-    padding-top: 1rem;
-    padding-bottom: 1rem;
-    padding-left: 1rem;
-    padding-right: 1.5rem;
+    padding: $spacing-md $spacing-lg $spacing-md $spacing-md;
     text-overflow: ellipsis;
     overflow: hidden;
 
diff --git a/src/components/list/_list.scss b/src/components/list/_list.scss
index d2bf91f9bf85..266ec0ef04f7 100644
--- a/src/components/list/_list.scss
+++ b/src/components/list/_list.scss
@@ -4,6 +4,7 @@
 
 @import '../../globals/scss/vars';
 @import '../../globals/scss/colors';
+@import '../../globals/scss/spacing';
 @import '../../globals/scss/css--reset';
 @import '../../globals/scss/typography';
 @import '../../globals/scss/import-once';
@@ -16,18 +17,18 @@
     @include font-family;
     @include typescale('zeta');
     @include font-smoothing;
-    margin-left: 2rem;
+    margin-left: $spacing-xl;
     line-height: 1.5;
   }
 
   .#{$prefix}--list--unordered,
   .#{$prefix}--list--ordered {
-    padding: 1rem;
+    padding: $spacing-md;
   }
 
   .#{$prefix}--list__item {
     font-weight: 600;
-    padding-left: 0.25rem;
+    padding-left: $spacing-2xs;
   }
 
   .#{$prefix}--list--unordered > .#{$prefix}--list__item {
@@ -39,7 +40,7 @@
   }
 
   .#{$prefix}--list--nested {
-    margin-left: 0.5rem;
+    margin-left: $spacing-xs;
   }
 
   .#{$prefix}--list--nested > .#{$prefix}--list__item {
@@ -49,6 +50,6 @@
 
   .#{$prefix}--list--nested > .#{$prefix}--list__item:before {
     content: '-';
-    padding-right: 0.25rem;
+    padding-right: $spacing-2xs;
   }
 }
diff --git a/src/components/modal/_modal.scss b/src/components/modal/_modal.scss
index 92c7e59cd979..d5b0f4718be9 100644
--- a/src/components/modal/_modal.scss
+++ b/src/components/modal/_modal.scss
@@ -5,6 +5,7 @@
 @import '../../globals/scss/vars';
 @import '../../globals/scss/helper-mixins';
 @import '../../globals/scss/colors';
+@import '../../globals/scss/spacing';
 @import '../../globals/scss/layout';
 @import '../../globals/scss/layer';
 @import '../../globals/scss/typography';
@@ -52,14 +53,14 @@
     min-width: 100%;
     max-height: 100%;
     height: 100%;
-    padding: rem(32px) 3% 0rem 3%;
+    padding: $spacing-xl 3% 0rem 3%;
 
     @media (min-width: 600px) {
       height: auto;
       min-width: 500px;
       max-width: 75%;
       max-height: 90%;
-      padding: rem(44px) rem(48px) 0 rem(48px);
+      padding: $spacing-2xl $spacing-3xl 0 $spacing-3xl;
     }
 
     @media (min-width: 1024px) {
@@ -69,7 +70,7 @@
   }
 
   .#{$prefix}--modal-header {
-    margin-bottom: rem(24px);
+    margin-bottom: $spacing-lg;
   }
 
   .#{$prefix}--modal-header__label {
@@ -79,7 +80,7 @@
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;
-    margin-bottom: rem(8px);
+    margin-bottom: $spacing-xs;
   }
 
   .#{$prefix}--modal-header__heading {
@@ -91,7 +92,7 @@
 
   .#{$prefix}--modal-content {
     overflow-y: auto;
-    margin-bottom: rem(48px);
+    margin-bottom: $spacing-3xl;
 
     > * {
       @include reset;
@@ -104,12 +105,12 @@
     background-color: $modal-footer-background-color;
     margin-left: rem(-24px);
     margin-right: rem(-24px);
-    padding: rem(24px) rem(24px);
+    padding: $spacing-xl $spacing-xl;
 
     @media (min-width: 600px) {
       margin-left: rem(-48px);
       margin-right: rem(-48px);
-      padding: rem(24px) rem(48px);
+      padding: $spacing-xl $spacing-3xl;
     }
   }
 
diff --git a/src/components/notification/_inline-notification.scss b/src/components/notification/_inline-notification.scss
index 43bd26b7d022..b4358d4ddd84 100644
--- a/src/components/notification/_inline-notification.scss
+++ b/src/components/notification/_inline-notification.scss
@@ -4,6 +4,7 @@
 
 @import '../../globals/scss/vars';
 @import '../../globals/scss/colors';
+@import '../../globals/scss/spacing';
 @import '../../globals/scss/layer';
 @import '../../globals/scss/typography';
 @import '../../globals/scss/import-once';
@@ -20,11 +21,11 @@
     display: flex;
     justify-content: space-between;
     background-color: transparent;
-    padding: 0.75rem 1rem;
+    padding: $spacing-sm $spacing-md;
     min-height: rem(40px);
     color: $text-03;
-    margin-top: 1rem;
-    margin-bottom: 1rem;
+    margin-top: $spacing-md;
+    margin-bottom: $spacing-md;
   }
 
   .#{$prefix}--inline-notification--error {
@@ -57,7 +58,7 @@
   .#{$prefix}--inline-notification__text-wrapper {
     display: flex;
     flex-wrap: wrap;
-    margin: 0 1rem;
+    margin: 0 $spacing-md;
 
     @media (max-width: 640px) {
       flex-direction: column;
@@ -68,7 +69,7 @@
   .#{$prefix}--inline-notification__title {
     @include typescale('zeta');
     font-weight: 600;
-    margin-right: 0.25rem;
+    margin-right: $spacing-2xs;
     line-height: 1.125;
   }
 
diff --git a/src/components/notification/_toast-notification.scss b/src/components/notification/_toast-notification.scss
index 61ab8ab4cf37..13ec5f1312be 100644
--- a/src/components/notification/_toast-notification.scss
+++ b/src/components/notification/_toast-notification.scss
@@ -4,6 +4,7 @@
 
 @import '../../globals/scss/vars';
 @import '../../globals/scss/colors';
+@import '../../globals/scss/spacing';
 @import '../../globals/scss/layer';
 @import '../../globals/scss/typography';
 @import '../../globals/scss/import-once';
@@ -20,18 +21,15 @@
     display: flex;
     justify-content: space-between;
     width: 16.875rem;
-    padding-top: 1rem;
-    padding-bottom: 0.5rem;
-    padding-right: 1rem;
-    padding-left: 1rem;
+    padding: $spacing-md $spacing-md $spacing-xs $spacing-md;
     background-color: $inverse-01;
     color: $text-01;
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
-    margin-right: 1rem;
+    margin-top: $spacing-xs;
+    margin-bottom: $spacing-xs;
+    margin-right: $spacing-md;
 
     &:first-child {
-      margin-top: 1rem;
+      margin-top: $spacing-md;
     }
   }
 
@@ -79,14 +77,14 @@
     font-weight: 600;
     letter-spacing: 0;
     line-height: 1;
-    padding-bottom: 0.125rem;
+    padding-bottom: $spacing-3xs;
   }
 
   .#{$prefix}--toast-notification__subtitle {
     @include typescale('omega');
     color: $text-03;
     margin-top: 0;
-    margin-bottom: 1rem;
+    margin-bottom: $spacing-md;
     line-height: 1.2;
   }
 
diff --git a/src/components/overflow-menu/_overflow-menu.scss b/src/components/overflow-menu/_overflow-menu.scss
index 3218f3fe5570..22450fe8963c 100644
--- a/src/components/overflow-menu/_overflow-menu.scss
+++ b/src/components/overflow-menu/_overflow-menu.scss
@@ -4,6 +4,7 @@
 
 @import '../../globals/scss/vars';
 @import '../../globals/scss/colors';
+@import '../../globals/scss/spacing';
 @import '../../globals/scss/helper-mixins';
 @import '../../globals/scss/css--reset';
 @import '../../globals/scss/layer';
@@ -49,8 +50,8 @@
     border: 1px solid $ui-04;
     width: 11.25rem;
     list-style: none;
-    margin-top: 0.25rem;
-    padding: 0.285rem 0 0.5rem;
+    margin-top: $spacing-2xs;
+    padding: $spacing-2xs 0 $spacing-xs;
     left: -20px;
   }
 
@@ -97,7 +98,7 @@
     display: inline-block;
     background-color: transparent;
     text-align: left;
-    padding: 0.5625rem 1rem;
+    padding: $spacing-xs $spacing-md;
     cursor: pointer;
 
     &:focus {