diff --git a/src/layout/page-layout.scss b/src/layout/page-layout.scss
index d4cc3797a3..31bf51cf83 100644
--- a/src/layout/page-layout.scss
+++ b/src/layout/page-layout.scss
@@ -284,7 +284,7 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
         @include Layout-filled-divider;
 
         // stylelint-disable-next-line primer/spacing
-        top: calc(var(--base-size-8) * -1 - var(--Layout-row-gap));
+        top: calc(calc(var(--base-size-8) * -1) - var(--Layout-row-gap));
       }
     }
 
@@ -297,7 +297,7 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
         @include Layout-filled-divider;
 
         // stylelint-disable-next-line primer/spacing
-        bottom: calc(var(--base-size-8) * -1 - var(--Layout-row-gap));
+        bottom: calc(calc(var(--base-size-8) * -1) - var(--Layout-row-gap));
       }
     }
   }
diff --git a/src/primitives/index.scss b/src/primitives/index.scss
index 2e4984de24..33a273a8c5 100644
--- a/src/primitives/index.scss
+++ b/src/primitives/index.scss
@@ -2,9 +2,6 @@
 @import '@primer/primitives/dist/css/base/typography/typography';
 @import '@primer/primitives/dist/css/functional/size/border';
 @import '@primer/primitives/dist/css/functional/size/breakpoints';
-// These are empty in primitives source?
-// @import '@primer/primitives/dist/css/functional/size/size-coarse';
-// @import '@primer/primitives/dist/css/functional/size/size-fine';
 @import '@primer/primitives/dist/css/functional/size/size';
 @import '@primer/primitives/dist/css/functional/size/viewport';
 @import '@primer/primitives/dist/css/functional/typography/typography';
diff --git a/src/support/variables/layout.scss b/src/support/variables/layout.scss
index 4ac74dbd01..cda10d4e16 100644
--- a/src/support/variables/layout.scss
+++ b/src/support/variables/layout.scss
@@ -40,25 +40,25 @@ $spacer-6: $spacer * 5 !default; // 40px
 
 // The list of spacer values
 $spacers: (
-  0,
-  var(--base-size-4),
-  var(--base-size-8),
-  var(--base-size-16),
-  var(--base-size-24),
-  var(--base-size-32),
-  var(--base-size-40),
+  $spacer-0,
+  $spacer-1,
+  $spacer-2,
+  $spacer-3,
+  $spacer-4,
+  $spacer-5,
+  $spacer-6,
 ) !default;
 
 // And the map of spacers, for easier looping:
 // @each $scale, $length in $spacer-map { ... }
 $spacer-map: (
-  0: 0,
-  1: var(--base-size-4),
-  2: var(--base-size-8),
-  3: var(--base-size-16),
-  4: var(--base-size-24),
-  5: var(--base-size-32),
-  6: var(--base-size-40),
+  0: $spacer-0,
+  1: $spacer-1,
+  2: $spacer-2,
+  3: $spacer-3,
+  4: $spacer-4,
+  5: $spacer-5,
+  6: $spacer-6,
 ) !default;
 
 // Increases the core spacing scale first by 8px for $spacer-7, then by 16px
@@ -72,22 +72,22 @@ $spacer-11: $spacer * 14 !default; // 112px
 $spacer-12: $spacer * 16 !default; // 128px
 
 $spacers-large: (
-  7: var(--base-size-48),
-  8: var(--base-size-64),
-  9: var(--base-size-80),
-  10: var(--base-size-96),
-  11: var(--base-size-112),
-  12: var(--base-size-128),
+  7: $spacer-7,
+  8: $spacer-8,
+  9: $spacer-9,
+  10: $spacer-10,
+  11: $spacer-11,
+  12: $spacer-12,
 ) !default;
 
 $spacer-map-extended: map-merge(
   (0: 0,
-  1: var(--base-size-4),
-  2: var(--base-size-8),
-  3: var(--base-size-16),
-  4: var(--base-size-24),
-  5: var(--base-size-32),
-  6: var(--base-size-40),
+  1: $spacer-1,
+  2: $spacer-2,
+  3: $spacer-3,
+  4: $spacer-4,
+  5: $spacer-5,
+  6: $spacer-6,
 ),
 $spacers-large,
 ) !default;
@@ -182,19 +182,19 @@ $sidebar-wide-width: (
   xl: 336px) !default;
 
 $gutter: (
-  md: var(--base-size-16),
-  lg: var(--base-size-24),
-  xl: var(--base-size-32)) !default;
+  md: $spacer-3,
+  lg: $spacer-4,
+  xl: $spacer-5) !default;
 
 $gutter-condensed: (
-  md: var(--base-size-16),
-  lg: var(--base-size-16),
-  xl: var(--base-size-24)) !default;
+  md: $spacer-3,
+  lg: $spacer-3,
+  xl: $spacer-4) !default;
 
 $gutter-spacious: (
-  md: var(--base-size-24),
-  lg: var(--base-size-32),
-  xl: var(--base-size-40)) !default;
+  md: $spacer-4,
+  lg: $spacer-5,
+  xl: $spacer-6) !default;
 
 // rem unit support