diff --git a/core/css/decanter-grid.css b/core/css/decanter-grid.css
index 5b5726586..d5dbfbed4 100644
--- a/core/css/decanter-grid.css
+++ b/core/css/decanter-grid.css
@@ -57,22 +57,22 @@ body {
         margin-top: 0;
         margin-bottom: 0; } }
   .flex-container--row-gap > * {
-    margin: 0 0 32px; }
-    @media only screen and (min-width: 1500px) {
+    margin: 0 0 20px; }
+    @media only screen and (min-width: 576px) {
       .flex-container--row-gap > * {
-        margin: 0 0 38px; } }
-    @media only screen and (min-width: 1200px) {
+        margin: 0 0 20px; } }
+    @media only screen and (min-width: 768px) {
       .flex-container--row-gap > * {
-        margin: 0 0 36px; } }
+        margin: 0 0 20px; } }
     @media only screen and (min-width: 992px) {
       .flex-container--row-gap > * {
         margin: 0 0 36px; } }
-    @media only screen and (min-width: 768px) {
+    @media only screen and (min-width: 1200px) {
       .flex-container--row-gap > * {
-        margin: 0 0 36px; } }
-    @media only screen and (min-width: 576px) {
+        margin: 0 0 40px; } }
+    @media only screen and (min-width: 1500px) {
       .flex-container--row-gap > * {
-        margin: 0 0 32px; } }
+        margin: 0 0 48px; } }
 
 .flex-auto, .flex-xs-1-of-12,
 .flex-1-of-12, .flex-xs-2-of-12,
diff --git a/core/css/decanter.css b/core/css/decanter.css
index 6c396273f..de157d980 100644
--- a/core/css/decanter.css
+++ b/core/css/decanter.css
@@ -345,22 +345,22 @@ template {
         margin-top: 0;
         margin-bottom: 0; } }
   .flex-container--row-gap > * {
-    margin: 0 0 32px; }
-    @media only screen and (min-width: 1500px) {
+    margin: 0 0 20px; }
+    @media only screen and (min-width: 576px) {
       .flex-container--row-gap > * {
-        margin: 0 0 38px; } }
-    @media only screen and (min-width: 1200px) {
+        margin: 0 0 20px; } }
+    @media only screen and (min-width: 768px) {
       .flex-container--row-gap > * {
-        margin: 0 0 36px; } }
+        margin: 0 0 20px; } }
     @media only screen and (min-width: 992px) {
       .flex-container--row-gap > * {
         margin: 0 0 36px; } }
-    @media only screen and (min-width: 768px) {
+    @media only screen and (min-width: 1200px) {
       .flex-container--row-gap > * {
-        margin: 0 0 36px; } }
-    @media only screen and (min-width: 576px) {
+        margin: 0 0 40px; } }
+    @media only screen and (min-width: 1500px) {
       .flex-container--row-gap > * {
-        margin: 0 0 32px; } }
+        margin: 0 0 48px; } }
 
 .flex-auto, .flex-xs-1-of-12,
 .flex-1-of-12, .flex-xs-2-of-12,
@@ -6704,47 +6704,56 @@ button,
     .su-card > img {
       display: none; } }
 
-.su-card__contents {
-  margin: 32px; }
-  @media only screen and (min-width: 1500px) {
-    .su-card__contents {
-      margin: 38px; } }
-  @media only screen and (min-width: 1200px) {
-    .su-card__contents {
-      margin: 36px; } }
-  @media only screen and (min-width: 992px) {
-    .su-card__contents {
-      margin: 36px; } }
+@media only screen and (min-width: 0) {
+  .su-card__contents {
+    padding: 3.2rem; } }
+
+@media only screen and (min-width: 576px) {
+  .su-card__contents {
+    padding: 3.2rem; } }
+
+@media only screen and (min-width: 768px) {
+  .su-card__contents {
+    padding: 3.6rem; } }
+
+@media only screen and (min-width: 992px) {
+  .su-card__contents {
+    padding: 3.6rem; } }
+
+@media only screen and (min-width: 1200px) {
+  .su-card__contents {
+    padding: 3.6rem; } }
+
+@media only screen and (min-width: 1500px) {
+  .su-card__contents {
+    padding: 3.8rem; } }
+
+.su-card__contents *:last-child {
+  padding-bottom: 0; }
+
+.su-card__contents > h5 {
+  margin-top: 0;
+  margin-bottom: 11px;
+  font-size: 13px;
+  font-weight: bold;
+  line-height: 17px;
+  text-transform: uppercase; }
   @media only screen and (min-width: 768px) {
-    .su-card__contents {
-      margin: 36px; } }
-  @media only screen and (min-width: 576px) {
-    .su-card__contents {
-      margin: 32px; } }
-  .su-card__contents *:last-child {
-    margin-bottom: 0; }
-  .su-card__contents > h5 {
-    margin-top: 0;
-    margin-bottom: 11px;
-    font-size: 13px;
-    font-weight: bold;
-    line-height: 17px;
-    text-transform: uppercase; }
-    @media only screen and (min-width: 768px) {
-      .su-card__contents > h5 {
-        margin-bottom: 12px; } }
-    @media only screen and (min-width: 1200px) {
-      .su-card__contents > h5 {
-        margin-bottom: 13px; } }
-  .su-card__contents > h3 {
-    margin-top: 0;
-    margin-bottom: 18px;
-    font-size: 25px;
-    font-weight: bold;
-    line-height: 31px; }
-    @media only screen and (min-width: 1200px) {
-      .su-card__contents > h3 {
-        margin-bottom: 19px; } }
+    .su-card__contents > h5 {
+      margin-bottom: 12px; } }
+  @media only screen and (min-width: 1200px) {
+    .su-card__contents > h5 {
+      margin-bottom: 13px; } }
+
+.su-card__contents > h3 {
+  margin-top: 0;
+  margin-bottom: 18px;
+  font-size: 25px;
+  font-weight: bold;
+  line-height: 31px; }
+  @media only screen and (min-width: 1200px) {
+    .su-card__contents > h3 {
+      margin-bottom: 19px; } }
 
 .su-card__button {
   text-align: center; }
@@ -6879,37 +6888,69 @@ button,
         .su-card--horizontal > * {
           margin-top: 0;
           margin-bottom: 0; } } }
-  .su-card--horizontal > img,
-  .su-card--horizontal .su-card__contents {
-    margin: 32px; }
-    @media only screen and (min-width: 1500px) {
-      .su-card--horizontal > img,
-      .su-card--horizontal .su-card__contents {
-        margin: 38px; } }
-    @media only screen and (min-width: 1200px) {
-      .su-card--horizontal > img,
-      .su-card--horizontal .su-card__contents {
-        margin: 36px; } }
-    @media only screen and (min-width: 992px) {
-      .su-card--horizontal > img,
-      .su-card--horizontal .su-card__contents {
-        margin: 36px; } }
-    @media only screen and (min-width: 768px) {
-      .su-card--horizontal > img,
-      .su-card--horizontal .su-card__contents {
-        margin: 36px; } }
-    @media only screen and (min-width: 576px) {
-      .su-card--horizontal > img,
-      .su-card--horizontal .su-card__contents {
-        margin: 32px; } }
   .su-card--horizontal img {
     -ms-grid-row: 1;
     -ms-grid-column: 1; }
+    @media only screen and (min-width: 0) {
+      .su-card--horizontal img {
+        padding-left: 3.2rem; } }
+    @media only screen and (min-width: 576px) {
+      .su-card--horizontal img {
+        padding-left: 3.2rem; } }
+    @media only screen and (min-width: 768px) {
+      .su-card--horizontal img {
+        padding-left: 3.6rem; } }
+    @media only screen and (min-width: 992px) {
+      .su-card--horizontal img {
+        padding-left: 3.6rem; } }
+    @media only screen and (min-width: 1200px) {
+      .su-card--horizontal img {
+        padding-left: 3.6rem; } }
+    @media only screen and (min-width: 1500px) {
+      .su-card--horizontal img {
+        padding-left: 3.8rem; } }
+    @media only screen and (min-width: 0) {
+      .su-card--horizontal img {
+        padding-top: 3.2rem; } }
+    @media only screen and (min-width: 576px) {
+      .su-card--horizontal img {
+        padding-top: 3.2rem; } }
+    @media only screen and (min-width: 768px) {
+      .su-card--horizontal img {
+        padding-top: 3.6rem; } }
+    @media only screen and (min-width: 992px) {
+      .su-card--horizontal img {
+        padding-top: 3.6rem; } }
+    @media only screen and (min-width: 1200px) {
+      .su-card--horizontal img {
+        padding-top: 3.6rem; } }
+    @media only screen and (min-width: 1500px) {
+      .su-card--horizontal img {
+        padding-top: 3.8rem; } }
+    @media only screen and (min-width: 0) {
+      .su-card--horizontal img {
+        padding-bottom: 3.2rem; } }
+    @media only screen and (min-width: 576px) {
+      .su-card--horizontal img {
+        padding-bottom: 3.2rem; } }
+    @media only screen and (min-width: 768px) {
+      .su-card--horizontal img {
+        padding-bottom: 3.6rem; } }
+    @media only screen and (min-width: 992px) {
+      .su-card--horizontal img {
+        padding-bottom: 3.6rem; } }
+    @media only screen and (min-width: 1200px) {
+      .su-card--horizontal img {
+        padding-bottom: 3.6rem; } }
+    @media only screen and (min-width: 1500px) {
+      .su-card--horizontal img {
+        padding-bottom: 3.8rem; } }
   .su-card--horizontal .su-card__contents {
     -ms-grid-row: 2;
     -ms-grid-column: 1; }
     @media only screen and (min-width: 576px) {
       .su-card--horizontal .su-card__contents {
+        padding-left: 0;
         -ms-grid-row: 1;
         -ms-grid-column: 2; } }
     @media (max-width: 767px) {
diff --git a/core/scss/components/card/_card--horizontal.scss b/core/scss/components/card/_card--horizontal.scss
index 010451dba..898ada9f9 100644
--- a/core/scss/components/card/_card--horizontal.scss
+++ b/core/scss/components/card/_card--horizontal.scss
@@ -38,12 +38,10 @@
   }
 
   // Modular padding.
-  > img,
-  .su-card__contents {
-    @include modular-margin();
-  }
-
   img {
+    @include modular-spacing(2, 'padding-left');
+    @include modular-spacing(2, 'padding-top');
+    @include modular-spacing(2, 'padding-bottom');
     -ms-grid-row: 1;
     -ms-grid-column: 1;
   }
@@ -53,6 +51,7 @@
     -ms-grid-column: 1;
 
     @include grid-media('sm') {
+      @include padding(null null null 0);
       -ms-grid-row: 1;
       -ms-grid-column: 2;
     }
diff --git a/core/scss/components/card/_card.scss b/core/scss/components/card/_card.scss
index 5ca61aecf..f7a15ab8e 100644
--- a/core/scss/components/card/_card.scss
+++ b/core/scss/components/card/_card.scss
@@ -25,11 +25,11 @@
 
 // Card contents spacing.
 .su-card__contents {
-  @include modular-margin;
+  @include modular-spacing(2);
 
-  // Ensure no bottom margins on last item.
+  // Ensure no bottom padding on last item.
   *:last-child {
-    @include margin(null null 0);
+    @include padding(null null 0);
   }
 
   // TODO: Refactor this to a mixin when typo headings available.
diff --git a/core/scss/core/flex-grid/_flex-grid.scss b/core/scss/core/flex-grid/_flex-grid.scss
index b28f597ca..6a68658e3 100644
--- a/core/scss/core/flex-grid/_flex-grid.scss
+++ b/core/scss/core/flex-grid/_flex-grid.scss
@@ -38,27 +38,28 @@
 
   &--row-gap {
     > * {
-      @include grid-media('2xl') {
-        @include margin(0 0 map-get($modular-spacing, '2xl') 0);
+      @include margin(0 0 map-get($grid-gutters, 'xs') 0);
+
+      @include grid-media('sm') {
+        @include margin(0 0 map-get($grid-gutters, 'sm') 0);
       }
 
-      @include grid-media('xl') {
-        @include margin(0 0 map-get($modular-spacing, 'xl') 0);
+      @include grid-media('md') {
+        @include margin(0 0 map-get($grid-gutters, 'md') 0);
       }
 
       @include grid-media('lg') {
-        @include margin(0 0 map-get($modular-spacing, 'lg') 0);
+        @include margin(0 0 map-get($grid-gutters, 'lg') 0);
       }
 
-      @include grid-media('md') {
-        @include margin(0 0 map-get($modular-spacing, 'md') 0);
+      @include grid-media('xl') {
+        @include margin(0 0 map-get($grid-gutters, 'xl') 0);
       }
 
-      @include grid-media('sm') {
-        @include margin(0 0 map-get($modular-spacing, 'sm') 0);
+      @include grid-media('2xl') {
+        @include margin(0 0 map-get($grid-gutters, '2xl') 0);
       }
 
-      @include margin(0 0 map-get($modular-spacing, 'xs') 0);
     }
   }
 
diff --git a/core/scss/utilities/functions/modular-scale/_calculate-modular-spacing.scss b/core/scss/utilities/functions/modular-scale/_calculate-modular-spacing.scss
new file mode 100644
index 000000000..49eb0ced1
--- /dev/null
+++ b/core/scss/utilities/functions/modular-scale/_calculate-modular-spacing.scss
@@ -0,0 +1,23 @@
+@charset "UTF-8";
+
+//
+// calculate-modular-spacing($step, $breakpoint)
+//
+// Calculates the modular spacing value at a step(integer) on the scale at a certain breakpoint.
+//
+// The modular spacing value is calculated by multiplying the modular spacing base value at the requested breakpoint and the multiplier at the requested step of the scale.
+//
+// The default value for $step is 0, which returns a multiplier value of 1, i.e., calculate-modular-spacing(0, 'xs') = $modular-spacing-base at XS breakpoint
+//
+// $step - Integers from -4 to 5 including 0
+// $breakpoint - One of `xs`, `sm`, `md`, `lg`, `xl`, `2xl`
+//
+// Style guide: Functions.ModularScale.calculate-modular-spacing
+//
+@function calculate-modular-spacing($step: 0, $breakpoint: 'xl') {
+  @if ($step >= -4 and $step <= 5) {
+    @return get-modular-spacing-base($breakpoint) * get-modular-spacing-multiplier($step);
+  } @else {
+    @error '$step should be an integer between -4 and 5';
+  }
+}
diff --git a/core/scss/utilities/functions/modular-scale/_get-modular-spacing-base.scss b/core/scss/utilities/functions/modular-scale/_get-modular-spacing-base.scss
new file mode 100644
index 000000000..d8218f931
--- /dev/null
+++ b/core/scss/utilities/functions/modular-scale/_get-modular-spacing-base.scss
@@ -0,0 +1,19 @@
+@charset "UTF-8";
+
+//
+// get-modular-spacing-base($breakpoint)
+//
+// Get a value out of the modular-spacing-base map
+// Returns the pixel value of the $modular-spacing-base variable at a breakpoint.
+//
+// $breakpoint - One of `xs`, `sm`, `md`, `lg`, `xl`, `2xl`
+//
+// Style guide: Functions.ModularScale.get-modular-spacing-base
+//
+@function get-modular-spacing-base($breakpoint: 'xs') {
+  $base: map-get($modular-spacing-base, $breakpoint);
+  @if $base == null {
+    @warn 'Non-existent key in get-modular-spacing-base: $breakpoint';
+  }
+  @return $base;
+}
diff --git a/core/scss/utilities/functions/modular-scale/_get-modular-spacing-multiplier.scss b/core/scss/utilities/functions/modular-scale/_get-modular-spacing-multiplier.scss
new file mode 100644
index 000000000..d6e6a654b
--- /dev/null
+++ b/core/scss/utilities/functions/modular-scale/_get-modular-spacing-multiplier.scss
@@ -0,0 +1,18 @@
+@charset "UTF-8";
+
+//
+// get-modular-spacing-multiplier($step)
+//
+// Get a value out of the modular-spacing-multiplier map.
+// Returns the value of the $modular-spacing-multiplier variable at a step(integer) on the scale.
+// The default for $step is 0, which returns a multiplier value of 1.
+//
+// $step - Integers from -4 to 5 including 0
+//
+// Style guide: Functions.ModularScale.get-modular-spacing-multiplier
+//
+@function get-modular-spacing-multiplier($step: 0) {
+  @if ($step >= -4 and $step <= 5) {
+    @return map_get($modular-spacing-multiplier, $step);
+  }
+}
diff --git a/core/scss/utilities/functions/modular-scale/_modular-spacing-get-value.scss b/core/scss/utilities/functions/modular-scale/_modular-spacing-get-value.scss
deleted file mode 100644
index 4b8cb3427..000000000
--- a/core/scss/utilities/functions/modular-scale/_modular-spacing-get-value.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@charset "UTF-8";
-
-//
-// modular-spacing-get-value($breakpoint)
-//
-// Get a value out of the modular-spacing map
-// Returns the pixel value of the $modular-spacing variable at a breakpoint.
-//
-// $breakpoint - One of `xs`, `sm`, `md`, `lg`, `xl
-//
-// Style guide: Functions.ModularScale.modular-spacing-get-value
-//
-@function modular-spacing-get-value($breakpoint: 'xs') {
-  @return map-get($modular-spacing, $breakpoint);
-}
diff --git a/core/scss/utilities/functions/modular-scale/index.scss b/core/scss/utilities/functions/modular-scale/index.scss
index 448dfc125..eaac589e1 100644
--- a/core/scss/utilities/functions/modular-scale/index.scss
+++ b/core/scss/utilities/functions/modular-scale/index.scss
@@ -3,7 +3,15 @@
 //
 // Modular Scale
 //
+// Mixins for modular scaling, a unitless system for returning font sizes or spacing (padding or margin) values.
+//
+// Modular typography uses the Bourbon modular-scale mixin with base font sizes for each breakpoint and a modular-scale-ratio defined in variables/pre-vendor/_bourbon-overrides.scss.
+//
+// Our modular spacing system does not use the Bourbon modular-scale mixin. Instead we use a manual scale defined in variables/core/_modular-spacing.scss for finetuning.
+//
 // Style guide: Functions.ModularScale
 //
 @import
-  'modular-spacing-get-value';
+  'get-modular-spacing-base',
+  'get-modular-spacing-multiplier',
+  'calculate-modular-spacing';
diff --git a/core/scss/utilities/mixins/modular-scale/_modular-margin-horizontal.scss b/core/scss/utilities/mixins/modular-scale/_modular-margin-horizontal.scss
deleted file mode 100644
index bab3471ea..000000000
--- a/core/scss/utilities/mixins/modular-scale/_modular-margin-horizontal.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-@charset "UTF-8";
-
-//
-// @modular-margin-horizontal
-//
-// A modular margin mixin for default spacing around an element.
-//
-// Style guide: Mixins.Modular.modular-margin-horizontal
-//
-@mixin modular-margin-horizontal($scale: 1) {
-
-  @include grid-media('2xl') {
-    @include margin(0 map-get($modular-spacing, '2xl') * $scale);
-  }
-
-  @include grid-media('xl') {
-    @include margin(0 map-get($modular-spacing, 'xl') * $scale);
-  }
-
-  @include grid-media('lg') {
-    @include margin(0 map-get($modular-spacing, 'lg') * $scale);
-  }
-
-  @include grid-media('md') {
-    @include margin(0 map-get($modular-spacing, 'md') * $scale);
-  }
-
-  @include grid-media('sm') {
-    @include margin(0 map-get($modular-spacing, 'sm') * $scale);
-  }
-
-  @include margin(0 map-get($modular-spacing, 'xs') * $scale);
-}
diff --git a/core/scss/utilities/mixins/modular-scale/_modular-margin-vertical.scss b/core/scss/utilities/mixins/modular-scale/_modular-margin-vertical.scss
deleted file mode 100644
index cfe2afb96..000000000
--- a/core/scss/utilities/mixins/modular-scale/_modular-margin-vertical.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-@charset "UTF-8";
-
-//
-// @modular-margin-vertical
-//
-// A modular margin mixin for default spacing around an element.
-//
-// Style guide: Mixins.Modular.modular-margin-vertical
-//
-@mixin modular-margin-vertical($scale: 1) {
-
-  @include grid-media('2xl') {
-    @include margin(map-get($modular-spacing, '2xl') * $scale 0);
-  }
-
-  @include grid-media('xl') {
-    @include margin(map-get($modular-spacing, 'xl') * $scale 0);
-  }
-
-  @include grid-media('lg') {
-    @include margin(map-get($modular-spacing, 'lg') * $scale 0);
-  }
-
-  @include grid-media('md') {
-    @include margin(map-get($modular-spacing, 'md') * $scale 0);
-  }
-
-  @include grid-media('sm') {
-    @include margin(map-get($modular-spacing, 'sm') * $scale 0);
-  }
-
-  @include margin(map-get($modular-spacing, 'xs') * $scale 0);
-}
diff --git a/core/scss/utilities/mixins/modular-scale/_modular-margin.scss b/core/scss/utilities/mixins/modular-scale/_modular-margin.scss
deleted file mode 100644
index 0039a5c52..000000000
--- a/core/scss/utilities/mixins/modular-scale/_modular-margin.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-@charset "UTF-8";
-
-//
-// @modular-margin
-//
-// A modular margin mixin for default spacing around an element.
-//
-// Style guide: Mixins.Modular.modular-margin
-//
-@mixin modular-margin($scale: 1) {
-
-  @include grid-media('2xl') {
-    @include margin(map-get($modular-spacing, '2xl') * $scale);
-  }
-
-  @include grid-media('xl') {
-    @include margin(map-get($modular-spacing, 'xl') * $scale);
-  }
-
-  @include grid-media('lg') {
-    @include margin(map-get($modular-spacing, 'lg') * $scale);
-  }
-
-  @include grid-media('md') {
-    @include margin(map-get($modular-spacing, 'md') * $scale);
-  }
-
-  @include grid-media('sm') {
-    @include margin(map-get($modular-spacing, 'sm') * $scale);
-  }
-
-  @include margin(map-get($modular-spacing, 'xs') * $scale);
-}
diff --git a/core/scss/utilities/mixins/modular-scale/_modular-spacing.scss b/core/scss/utilities/mixins/modular-scale/_modular-spacing.scss
new file mode 100644
index 000000000..ce3b625b1
--- /dev/null
+++ b/core/scss/utilities/mixins/modular-scale/_modular-spacing.scss
@@ -0,0 +1,28 @@
+@charset "UTF-8";
+
+//
+// @modular-spacing
+//
+// A mixin for adding spacing (margin or padding) between elements or between an element and the edge of its container.
+// The amount of spacing is returned using a unitless scaling system with a curated scale.
+//
+// Please see core/scss/utilities/variables/core/_modular-spacing.scss for variable maps.
+//
+// $step - Integers from -4 to 5 including 0. Default for $step is 0 which returns the modular spacing base value.
+//
+// $property - CSS margin or padding property including directional properties, e.g., margin-left, padding-top etc.
+//
+// **Examples:**
+// - `@include modular-spacing(0, 'margin')`
+// - `@include modular-spacing(-3, 'padding-top')`
+// - `@include modular-spacing(4, 'margin-left');`
+//
+// Style guide: Mixins.Modular.modular-spacing
+//
+@mixin modular-spacing($step: 0, $property: 'padding', $grid: $grid-media) {
+  @each $key, $breakpoint in $grid {
+    @include grid-media($key) {
+      #{$property}: (calculate-modular-spacing($step, $key));
+    }
+  }
+}
diff --git a/core/scss/utilities/mixins/modular-scale/index.scss b/core/scss/utilities/mixins/modular-scale/index.scss
index 30a47960f..649220a39 100644
--- a/core/scss/utilities/mixins/modular-scale/index.scss
+++ b/core/scss/utilities/mixins/modular-scale/index.scss
@@ -3,13 +3,15 @@
 //
 // Modular Scale
 //
-// Mixins for modular scaling
+// Mixins for modular scaling, a unitless system for returning font sizes or spacing (padding or margin) values.
+//
+// Modular typography uses the Bourbon modular-scale mixin with base font sizes for each breakpoint and a modular-scale-ratio defined in variables/pre-vendor/_bourbon-overrides.scss.
+//
+// Our modular spacing system does not use the Bourbon modular-scale mixin. Instead we use a manual scale defined in variables/core/_modular-spacing.scss for finetuning.
 //
 // Style guide: Mixins.Modular
 //
 
 @import
-  'modular-margin-horizontal',
-  'modular-margin-vertical',
-  'modular-margin',
+  'modular-spacing',
   'modular-typography';
diff --git a/core/scss/utilities/variables/core/_modular-spacing.scss b/core/scss/utilities/variables/core/_modular-spacing.scss
index ddda4e519..5c46c41e4 100644
--- a/core/scss/utilities/variables/core/_modular-spacing.scss
+++ b/core/scss/utilities/variables/core/_modular-spacing.scss
@@ -1,26 +1,70 @@
 @charset "UTF-8";
 
 //
-// $modular-spacing
+// Modular Spacing
 //
-// The amount of spacing around elements at certain breakpoints.
+// A unitless system for adding spacing (padding or margin) between or within elements.
 //
-// Markup: $modular-spacing: (
-//   'xs': 32px,
-//   'sm': 32px,
-//   'md': 36px,
-//   'lg': 36px,
-//   'xl': 36px,
-//   '2xl': 38px
+// Note: This modular spacing system does not follow the modular-scale system in Bourbon.
+// At each breakpoint, the final modular spacing value is calculated using $modular-spacing-base * $modular-spacing-multiplier
+//
+// Style guide: Variables.Core.Modularspacing
+//
+
+// $modular-spacing-base
+//
+// The base spacing values for each break point, which correspond to the step 0 value.
+//
+// Markup: $modular-spacing-base: (
+//   'xs': 1.6rem,
+//   'sm': 1.6rem,
+//   'md': 1.8rem,
+//   'lg': 1.8rem,
+//   'xl': 1.8rem,
+//   '2xl': 1.9rem
 // ) !default;
 //
-// Styleguide: Variables.Core.modular-spacing
+// Styleguide: Variables.Core.Modularspacing.modular-spacing-base
+//
+$modular-spacing-base: (
+  'xs': 1.6rem,
+  'sm': 1.6rem,
+  'md': 1.8rem,
+  'lg': 1.8rem,
+  'xl': 1.8rem,
+  '2xl': 1.9rem
+) !default;
+
+//
+// $modular-spacing-multiplier
+//
+// The multiplier between each modular spacing steps. These numbers are fine-tuned manually and do not follow a modular scale ratio.
+// Step 0 correspond to a multiplier of 1.
+//
+// Markup: $modular-spacing-multiplier: (
+//    -4: .16666667,
+//    -3: .33333333,
+//    -2: .5,
+//    -1: .6666667,
+//     0: 1,
+//     1: 1.4444444,
+//     2: 2,
+//     3: 2.5,
+//     4: 4,
+//     5: 6
+//) !default;
+//
+// Styleguide: Variables.Core.Modularspacing.modular-spacing-multiplier
 //
-$modular-spacing: (
-  'xs': 32px,
-  'sm': 32px,
-  'md': 36px,
-  'lg': 36px,
-  'xl': 36px,
-  '2xl': 38px
+$modular-spacing-multiplier: (
+    -4: .16666667,
+    -3: .33333333,
+    -2: .5,
+    -1: .6666667,
+     0: 1,
+     1: 1.4444444,
+     2: 2,
+     3: 2.5,
+     4: 4,
+     5: 6
 ) !default;
diff --git a/core/scss/utilities/variables/core/_modular-typography.scss b/core/scss/utilities/variables/core/_modular-typography.scss
index 1b659eaf7..ea926ceb7 100644
--- a/core/scss/utilities/variables/core/_modular-typography.scss
+++ b/core/scss/utilities/variables/core/_modular-typography.scss
@@ -3,14 +3,15 @@
 //
 // $modular-typography
 //
-// The amount of spacing around elements at certain breakpoints.
+// A unitless system for assigning font sizes. These variables are the base font sizes for each break point.
 //
 // Markup: $modular-typography: (
 //   'xs': 1.6rem,
 //   'sm': 1.6rem,
 //   'md': 1.8rem,
 //   'lg': 1.8rem,
-//   'xl': 1.9rem
+//   'xl': 1.8rem,
+//   '2xl': 1.9rem
 // ) !default;
 //
 // Styleguide: Variables.Core.modular-typography
diff --git a/core/scss/utilities/variables/pre-vendor/_bourbon-overrides.scss b/core/scss/utilities/variables/pre-vendor/_bourbon-overrides.scss
index 499a15e8d..2b8ffdcc8 100644
--- a/core/scss/utilities/variables/pre-vendor/_bourbon-overrides.scss
+++ b/core/scss/utilities/variables/pre-vendor/_bourbon-overrides.scss
@@ -7,7 +7,6 @@
 //
 //<pre>
 // $bourbon: (
-//   "modular-scale-base": 1rem,
 //   "modular-scale-ratio": 1.25,
 //   "rails-asset-pipeline": false
 // ) !default;
@@ -16,7 +15,6 @@
 // Style guide: Variables.Vendor.Bourbon
 //
 $bourbon: (
-  "modular-scale-base": 1rem,
   "modular-scale-ratio": 1.25,
   "rails-asset-pipeline": false
 ) !default;