diff --git a/modules/primer-breadcrumb/lib/breadcrumb.scss b/modules/primer-breadcrumb/lib/breadcrumb.scss
index 0159e015..6c90a39f 100644
--- a/modules/primer-breadcrumb/lib/breadcrumb.scss
+++ b/modules/primer-breadcrumb/lib/breadcrumb.scss
@@ -1,6 +1,6 @@
 .breadcrumb-item {
   display: inline-block;
-  margin-left: -4px;
+  margin-left: -$spacer-1;
   white-space: nowrap;
   list-style: none;
 
diff --git a/modules/primer-forms/lib/form-control.scss b/modules/primer-forms/lib/form-control.scss
index ee1a71ab..ae901860 100644
--- a/modules/primer-forms/lib/form-control.scss
+++ b/modules/primer-forms/lib/form-control.scss
@@ -62,7 +62,7 @@ label {
 
 // Large inputs
 .input-lg {
-  padding: 4px 10px;
+  padding: $spacer-1 10px;
   font-size: 16px;
 }
 
@@ -99,8 +99,8 @@ label {
   label {
     em.highlight {
       position: relative;
-      left: -4px;
-      padding: 2px 4px;
+      left: -$spacer-1;
+      padding: 2px $spacer-1;
       font-style: normal;
       background: $yellow-100;
       border-radius: 3px;
diff --git a/modules/primer-forms/lib/form-group.scss b/modules/primer-forms/lib/form-group.scss
index b37bbb2f..58f0a2dd 100644
--- a/modules/primer-forms/lib/form-group.scss
+++ b/modules/primer-forms/lib/form-group.scss
@@ -64,7 +64,7 @@
   // stylelint-disable selector-no-qualifying-type
   dd {
     h4 {
-      margin: 4px 0 0;
+      margin: $spacer-1 0 0;
 
       &.is-error { color: $text-red; }
 
@@ -204,7 +204,7 @@
 
 .note {
   min-height: 17px;
-  margin: 4px 0 2px;
+  margin: $spacer-1 0 2px;
   font-size: 12px;
   color: $text-gray;
 
diff --git a/modules/primer-forms/lib/form-validation.scss b/modules/primer-forms/lib/form-validation.scss
index e6222607..c224e0d0 100644
--- a/modules/primer-forms/lib/form-validation.scss
+++ b/modules/primer-forms/lib/form-validation.scss
@@ -87,7 +87,7 @@ dl.form-group > dd {
 
     > li {
       float: left;
-      margin: 0 4px 0 0;
+      margin: 0 $spacer-1 0 0;
       list-style-type: none;
 
       &.text {
@@ -387,7 +387,7 @@ p.explain {
   }
 
   .minibutton {
-    top: -4px;
+    top: -$spacer-1;
     float: right;
   }
 }
diff --git a/modules/primer-labels/lib/labels.scss b/modules/primer-labels/lib/labels.scss
index 59a53210..1cd426ba 100644
--- a/modules/primer-labels/lib/labels.scss
+++ b/modules/primer-labels/lib/labels.scss
@@ -17,7 +17,7 @@
 .label,
 .Label {
   display: inline-block;
-  padding: 3px 4px;
+  padding: 3px $spacer-1;
   font-size: $font-size-small;
   font-weight: $font-weight-bold;
   line-height: 1; // prevent inheritance from changing proportions
diff --git a/modules/primer-markdown/lib/markdown-body.scss b/modules/primer-markdown/lib/markdown-body.scss
index bb462772..466cdd48 100644
--- a/modules/primer-markdown/lib/markdown-body.scss
+++ b/modules/primer-markdown/lib/markdown-body.scss
@@ -49,7 +49,7 @@ $margin: 16px;
 
   .anchor {
     float: left;
-    padding-right: 4px;
+    padding-right: $spacer-1;
     margin-left: -20px;
     line-height: 1;
 
diff --git a/modules/primer-navigation/lib/filter-list.scss b/modules/primer-navigation/lib/filter-list.scss
index 6bdb8b10..7b8a3b6b 100644
--- a/modules/primer-navigation/lib/filter-list.scss
+++ b/modules/primer-navigation/lib/filter-list.scss
@@ -5,7 +5,7 @@
   list-style-type: none;
 
   &.small .filter-item {
-    padding: 4px 10px;
+    padding: $spacer-1 10px;
     margin: 0 0 2px;
     font-size: 12px;
   }
diff --git a/modules/primer-support/lib/variables/layout.scss b/modules/primer-support/lib/variables/layout.scss
index 8532570d..1977bc11 100644
--- a/modules/primer-support/lib/variables/layout.scss
+++ b/modules/primer-support/lib/variables/layout.scss
@@ -24,7 +24,7 @@ $spacers: (
 // Aliases for easy use
 $spacer-1: nth($spacers, 2) !default; // 4px
 $spacer-2: nth($spacers, 3) !default; // 8px
-$spacer-3: nth($spacers, 4) !default; // 12px
+$spacer-3: nth($spacers, 4) !default; // 16px
 $spacer-4: nth($spacers, 5) !default; // 24px
 $spacer-5: nth($spacers, 6) !default; // 32px
 $spacer-6: nth($spacers, 7) !default; // 40px