diff --git a/src/components/Avatar/Avatar.scss b/src/components/Avatar/Avatar.scss
index 70e60e95679..fc2e278c587 100644
--- a/src/components/Avatar/Avatar.scss
+++ b/src/components/Avatar/Avatar.scss
@@ -1,9 +1,9 @@
 @import '../../styles/common';
 
 .Avatar {
-  --pc-avatar-extra-small-size: var(--p-space-6);
-  --pc-avatar-small-size: var(--p-space-8);
-  --pc-avatar-medium-size: var(--p-space-10);
+  --pc-avatar-extra-small-size: 24px;
+  --pc-avatar-small-size: 32px;
+  --pc-avatar-medium-size: 40px;
   --pc-avatar-large-size: 60px;
   position: relative;
   display: block;
diff --git a/src/components/Badge/Badge.scss b/src/components/Badge/Badge.scss
index 5e5d42babd6..4ade4482b81 100644
--- a/src/components/Badge/Badge.scss
+++ b/src/components/Badge/Badge.scss
@@ -2,9 +2,9 @@
 
 .Badge {
   --pc-badge-horizontal-padding: var(--p-space-2);
-  --pc-badge-vertical-padding: calc(var(--p-space-1) - 2px);
+  --pc-badge-vertical-padding: var(--p-space-05);
   --pc-badge-pip-size: var(--p-space-2);
-  --pc-badge-pip-spacing: calc(var(--pc-badge-pip-size) / 2);
+  --pc-badge-pip-spacing: var(--p-space-1);
   --pc-badge-component-badge-pip-color: var(--p-icon);
   display: inline-flex;
   align-items: center;
diff --git a/src/components/Banner/Banner.scss b/src/components/Banner/Banner.scss
index fa6959ccb3f..3d83c274ee7 100644
--- a/src/components/Banner/Banner.scss
+++ b/src/components/Banner/Banner.scss
@@ -51,7 +51,7 @@
 
 .Banner {
   --pc-banner-rgb-text: 33, 43, 54;
-  --pc-banner-secondary-action-horizontal-padding: calc(1.5 * var(--p-space-2));
+  --pc-banner-secondary-action-horizontal-padding: var(--p-space-3);
   --pc-banner-secondary-action-vertical-padding: 0.5 *
     (#{control-height() - line-height(body)});
   position: relative;
@@ -141,6 +141,7 @@
 }
 
 .ContentWrapper {
+  margin-top: calc(-1 * var(--p-space-05));
   flex: 1 1 auto;
 }
 
diff --git a/src/components/ColorPicker/ColorPicker.scss b/src/components/ColorPicker/ColorPicker.scss
index de8265df378..b8547d3fe80 100644
--- a/src/components/ColorPicker/ColorPicker.scss
+++ b/src/components/ColorPicker/ColorPicker.scss
@@ -11,7 +11,7 @@
 .ColorPicker {
   --pc-color-picker-size: 160px;
   --pc-color-picker-dragger-size: 18px;
-  --pc-color-picker: 10;
+  --pc-color-picker-z-index: 10;
   --pc-color-picker-adjustments: 20;
   --pc-color-picker-dragger: 30;
   user-select: none;
@@ -118,7 +118,7 @@ $huepicker-bottom-padding-start: calc(
 
 .ColorLayer {
   position: absolute;
-  z-index: var(--pc-color-picker);
+  z-index: var(--pc-color-picker-z-index);
   top: 0;
   left: 0;
   height: 100%;
diff --git a/src/components/DatePicker/DatePicker.scss b/src/components/DatePicker/DatePicker.scss
index ab6df485186..a0cba170ddd 100644
--- a/src/components/DatePicker/DatePicker.scss
+++ b/src/components/DatePicker/DatePicker.scss
@@ -3,7 +3,7 @@
 $font-size: 12px;
 
 .DatePicker {
-  --pc-date-picker-range-end-border-radius: 30px;
+  --pc-date-picker-range-end-border-radius: var(--p-border-radius-6);
   position: relative;
 }
 
diff --git a/src/components/Indicator/Indicator.scss b/src/components/Indicator/Indicator.scss
index f841400a36b..7734dee4b82 100644
--- a/src/components/Indicator/Indicator.scss
+++ b/src/components/Indicator/Indicator.scss
@@ -1,20 +1,20 @@
 @import '../../styles/common';
 
-$size: 10px;
-$base-position: -4px;
-
 .Indicator {
+  --pc-indicator-size: 10px;
+  --pc-indicator-base-position: calc(-1 * var(--p-space-1));
+
   &::before,
   &::after {
     content: '';
     position: absolute;
     background-color: var(--p-border-highlight);
-    right: $base-position;
-    top: $base-position;
-    width: $size;
-    height: $size;
+    right: var(--pc-indicator-base-position);
+    top: var(--pc-indicator-base-position);
+    width: var(--pc-indicator-size);
+    height: var(--pc-indicator-size);
     border-radius: var(--p-border-radius-half);
-    border: calc(#{$size} / 2) solid transparent;
+    border: calc(var(--pc-indicator-size) / 2) solid transparent;
   }
 }
 
@@ -24,8 +24,8 @@ $base-position: -4px;
 }
 
 .pulseIndicator::after {
-  right: $base-position;
-  top: $base-position;
+  right: var(--pc-indicator-base-position);
+  top: var(--pc-indicator-base-position);
   animation: pulse 5s ease infinite;
 }
 
diff --git a/src/components/InlineError/InlineError.scss b/src/components/InlineError/InlineError.scss
index 6413933ded9..21497bbe845 100644
--- a/src/components/InlineError/InlineError.scss
+++ b/src/components/InlineError/InlineError.scss
@@ -1,7 +1,6 @@
 @import '../../styles/common';
 
 .InlineError {
-  --pc-inline-error-icon-adjustment: var(--p-space-05);
   display: flex;
   color: var(--p-text-critical);
   fill: var(--p-icon-critical);
@@ -9,6 +8,6 @@
 
 .Icon {
   fill: currentColor;
-  margin-left: calc(-1 * var(--pc-inline-error-icon-adjustment));
-  margin-right: calc(var(--p-space-1) + var(--pc-inline-error-icon-adjustment));
+  margin-left: calc(-1 * var(--p-space-05));
+  margin-right: calc(var(--p-space-05) + var(--p-space-1));
 }
diff --git a/src/components/KeyboardKey/KeyboardKey.scss b/src/components/KeyboardKey/KeyboardKey.scss
index 8d0a8b36947..fa48582ff22 100644
--- a/src/components/KeyboardKey/KeyboardKey.scss
+++ b/src/components/KeyboardKey/KeyboardKey.scss
@@ -3,15 +3,14 @@
 $key-base-height: 24px;
 
 .KeyboardKey {
-  --pc-keyboard-key-bottom-shadow-size: 2px;
   display: inline-block;
   height: $key-base-height;
-  margin: 0 calc(var(--p-space-1) / 2) var(--pc-keyboard-key-bottom-shadow-size);
+  margin: 0 calc(var(--p-space-1) / 2) var(--p-space-05);
   padding: 0 var(--p-space-1);
   background-color: var(--p-surface);
   box-shadow: 0 0 0 1px var(--p-border-subdued),
-    0 var(--pc-keyboard-key-bottom-shadow-size) 0 0 var(--p-surface),
-    0 var(--pc-keyboard-key-bottom-shadow-size) 0 1px var(--p-border-subdued);
+    0 var(--p-space-05) 0 0 var(--p-surface),
+    0 var(--p-space-05) 0 1px var(--p-border-subdued);
   border-radius: var(--p-border-radius-1);
   font-family: font-family();
   font-size: 12px;
diff --git a/src/components/Navigation/Navigation.scss b/src/components/Navigation/Navigation.scss
index c23e8825847..b700863a6eb 100644
--- a/src/components/Navigation/Navigation.scss
+++ b/src/components/Navigation/Navigation.scss
@@ -291,8 +291,8 @@ $secondary-item-font-size: 15px;
   }
 
   .Text {
-    margin-top: var(--p-space-1);
-    margin-bottom: var(--p-space-1);
+    margin-top: calc(var(--p-space-1) + var(--p-space-05));
+    margin-bottom: calc(var(--p-space-1) + var(--p-space-05));
     line-height: 20px;
   }
 
diff --git a/src/components/Navigation/_variables.scss b/src/components/Navigation/_variables.scss
index ba813a6c916..a40f8ec4f80 100644
--- a/src/components/Navigation/_variables.scss
+++ b/src/components/Navigation/_variables.scss
@@ -4,8 +4,8 @@ $item-line-height-small: 32px;
 $item-line-height-large: 36px;
 $text-line-height: 20px;
 $nav-variables: (
-  mobile-spacing: var(--p-space-2),
-  desktop-spacing: var(--p-space-1),
+  mobile-spacing: calc(var(--p-space-2) + var(--p-space-05)),
+  desktop-spacing: calc(var(--p-space-1) + var(--p-space-05)),
   mobile-height: 40px,
   desktop-height: 32px,
   icon-size: 20px,
diff --git a/src/components/Page/components/Header/Header.scss b/src/components/Page/components/Header/Header.scss
index b928fec1058..c61711fc5d5 100644
--- a/src/components/Page/components/Header/Header.scss
+++ b/src/components/Page/components/Header/Header.scss
@@ -4,7 +4,6 @@ $mobile-layout: 468px;
 $button-style-breakpoint: 768px;
 $medium-layout: 860px;
 $desktop-layout: 1080px;
-$individual-action-padding-x: calc(1.5 * var(--p-space-2));
 $action-menu-rollup-computed-width: 40px;
 
 .Header {
diff --git a/src/components/RangeSlider/components/DualThumb/DualThumb.scss b/src/components/RangeSlider/components/DualThumb/DualThumb.scss
index 4bde5b748f6..def80721568 100644
--- a/src/components/RangeSlider/components/DualThumb/DualThumb.scss
+++ b/src/components/RangeSlider/components/DualThumb/DualThumb.scss
@@ -2,7 +2,6 @@
 @import '../../RangeSlider';
 
 $range-wrapper: 28px;
-
 $range-thumb-border-error: 2px solid var(--p-border-critical);
 
 .DualThumb {
@@ -34,7 +33,7 @@ $range-thumb-border-error: 2px solid var(--p-border-critical);
   border-radius: var(--pc-range-slider-thumb-size);
 
   --pc-dual-thumb-unselected-range: transparent;
-  --pc-dual-thumb-selected-range: #{var(--p-interactive)};
+  --pc-dual-thumb-selected-range: var(--p-interactive);
   --pc-dual-thumb-gradient-colors: var(--pc-dual-thumb-unselected-range) 0%,
     var(--pc-dual-thumb-unselected-range) var(--pc-range-slider-progress-lower),
     var(--pc-dual-thumb-selected-range) var(--pc-range-slider-progress-lower),
@@ -47,7 +46,7 @@ $range-thumb-border-error: 2px solid var(--p-border-critical);
   );
 
   .error & {
-    --pc-dual-thumb-selected-range: #{var(--p-action-critical)};
+    --pc-dual-thumb-selected-range: var(--p-action-critical);
     --pc-dual-thumb-gradient-colors: var(--pc-dual-thumb-unselected-range) 0%,
       var(--pc-dual-thumb-unselected-range)
         var(--pc-range-slider-progress-lower),
@@ -134,7 +133,7 @@ $range-output-spacing: 16px;
   transition-property: opacity, visibility, bottom;
   transition-duration: var(--p-duration-150);
   transition-timing-function: var(--p-ease);
-  transform: translateX(calc(-50% + #{var(--pc-range-slider-thumb-size) / 2}));
+  transform: translateX(calc(-50% + (var(--pc-range-slider-thumb-size) / 2)));
 
   .Thumbs:active + & {
     $range-thumb-size-difference: var(--p-range-slider-thumb-size-active) -
@@ -142,7 +141,7 @@ $range-output-spacing: 16px;
     opacity: 1;
     visibility: visible;
     bottom: calc(
-      #{var(--p-range-slider-thumb-size-active)} + #{$range-thumb-size-difference}
+      var(--p-range-slider-thumb-size-active) + #{$range-thumb-size-difference}
     );
   }
 }
diff --git a/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss b/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss
index b7c14990f6c..e9c53dbc8bb 100644
--- a/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss
+++ b/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss
@@ -45,7 +45,7 @@
 }
 
 .Input {
-  --pc-single-thumb-progress-lower: #{var(--p-interactive)};
+  --pc-single-thumb-progress-lower: var(--p-interactive);
   --pc-single-thumb-progress-upper: transparent;
   // create-react-app v2 leverages postcss-preset-env to transpile modern CSS
   // into something kinda supported by older browsers. Unfortunately its
@@ -134,7 +134,7 @@
   }
 
   .error & {
-    --pc-single-thumb-progress-lower: #{var(--p-action-critical)};
+    --pc-single-thumb-progress-lower: var(--p-action-critical);
 
     @include range-thumb-selectors {
       border-color: var(--p-action-critical);
diff --git a/src/components/ResourceItem/ResourceItem.scss b/src/components/ResourceItem/ResourceItem.scss
index 17aa22168dd..9b90edadf23 100644
--- a/src/components/ResourceItem/ResourceItem.scss
+++ b/src/components/ResourceItem/ResourceItem.scss
@@ -2,8 +2,6 @@
 
 // translate-offset equals handle-width - padding
 $resource-list-item-variables: (
-  padding: 12px,
-  control-indent: -1 * 12px,
   min-height: 44px,
   handle-width: 48px,
   disclosure-width: 48px,
@@ -98,13 +96,13 @@ $resource-list-item-variables: (
 .Container {
   position: relative;
   z-index: resource-list-item(content-stacking-order);
-  padding: resource-list-item(padding) var(--p-space-4);
+  padding: var(--p-space-3) var(--p-space-4);
   min-height: resource-list-item(min-height);
   display: flex;
   align-items: flex-start;
 
   @include breakpoint-after(resource-list-item(breakpoint-small)) {
-    padding: resource-list-item(padding) var(--p-space-5);
+    padding: var(--p-space-3) var(--p-space-5);
   }
 }
 
@@ -142,8 +140,8 @@ $resource-list-item-variables: (
   min-height: resource-list-item(min-height);
   justify-content: center;
   align-items: center;
-  margin: (-1 * resource-list-item(padding)) var(--p-space-1)
-    (-1 * resource-list-item(padding)) resource-list-item(control-indent);
+  margin: calc(-1 * var(--p-space-3)) var(--p-space-1)
+    calc(-1 * var(--p-space-3)) calc(-1 * var(--p-space-3));
   display: flex;
 
   @include breakpoint-before(resource-list-item(breakpoint-small), false) {
@@ -225,7 +223,7 @@ $resource-list-item-variables: (
 
 .Disclosure {
   position: relative;
-  top: -1 * resource-list-item(padding);
+  top: calc(-1 * var(--p-space-3));
   right: calc(-1 * var(--p-space-4));
   display: none;
   width: resource-list-item(disclosure-width);
diff --git a/src/components/ResourceList/ResourceList.scss b/src/components/ResourceList/ResourceList.scss
index 9ce5d849727..bd299adcbbf 100644
--- a/src/components/ResourceList/ResourceList.scss
+++ b/src/components/ResourceList/ResourceList.scss
@@ -61,13 +61,11 @@ $item-wrapper-loading-height: 64px;
   align-items: flex-start;
   width: 100%;
   min-height: resource-list(header-min-height);
-  padding: resource-list(header-vertical-padding)
-    resource-list(header-padding-small);
+  padding: calc(var(--p-space-3) - var(--p-space-05)) var(--p-space-4);
   background-color: var(--p-surface);
 
   @include breakpoint-after(resource-list(breakpoint-small)) {
     flex-direction: row;
-    padding: resource-list(header-vertical-padding) var(--p-space-4);
   }
 }
 
diff --git a/src/components/Scrollable/Scrollable.scss b/src/components/Scrollable/Scrollable.scss
index d9d62637382..69d98af2511 100644
--- a/src/components/Scrollable/Scrollable.scss
+++ b/src/components/Scrollable/Scrollable.scss
@@ -1,7 +1,7 @@
 @import '../../styles/common';
 
 .Scrollable {
-  --pc-scrollable-shadow-size: 20px;
+  --pc-scrollable-shadow-size: var(--p-space-5);
   --pc-scrollable-shadow-bottom: inset 0
     calc(-1 * var(--pc-scrollable-shadow-size)) var(--pc-scrollable-shadow-size)
     calc(-1 * var(--pc-scrollable-shadow-size)) var(--p-hint-from-direct-light);
diff --git a/src/components/SkeletonPage/SkeletonPage.scss b/src/components/SkeletonPage/SkeletonPage.scss
index 2aef97a8a5b..97a11673a19 100644
--- a/src/components/SkeletonPage/SkeletonPage.scss
+++ b/src/components/SkeletonPage/SkeletonPage.scss
@@ -1,6 +1,5 @@
 @import '../../styles/common';
 
-$action-text-spacing: 24px;
 $primary-action-button-height: 36px;
 $primary-action-button-width: 100px;
 $skeleton-display-text-max-width: 120px;
@@ -97,7 +96,7 @@ $skeleton-display-text-max-width: 120px;
   flex-direction: column;
   justify-content: center;
   min-height: control-slim-height();
-  padding-right: $action-text-spacing;
+  padding-right: var(--p-space-6);
   margin-top: calc(-1 * var(--p-space-1));
   margin-bottom: calc(-1 * var(--p-space-1));
   padding-top: var(--p-space-4);
diff --git a/src/styles/foundation/_layout.scss b/src/styles/foundation/_layout.scss
index 4abcc97c1a4..35ef9ae5a6e 100644
--- a/src/styles/foundation/_layout.scss
+++ b/src/styles/foundation/_layout.scss
@@ -64,7 +64,7 @@ $dismiss-icon-size: 32px;
 }
 
 @function mobile-nav-width() {
-  @return calc(100vw - #{$dismiss-icon-size} + #{$dangerous-magic-space-8});
+  @return calc(100vw - (#{$dismiss-icon-size} + #{$dangerous-magic-space-8}));
 }
 
 @function nav-min-window-corrected() {
diff --git a/src/tokens/token-groups/shape.json b/src/tokens/token-groups/shape.json
index d34254ec9d7..a219b0127ec 100644
--- a/src/tokens/token-groups/shape.json
+++ b/src/tokens/token-groups/shape.json
@@ -5,6 +5,7 @@
   "border-radius-3": "12px",
   "border-radius-4": "16px",
   "border-radius-5": "20px",
+  "border-radius-6": "30px",
   "border-radius-base": "3px",
   "border-radius-large": "6px",
   "border-radius-half": "50%"