diff --git a/docs/source/_assets/less/markdown.less b/docs/source/_assets/less/markdown.less
index 79fdc7970..0bca0d5e7 100644
--- a/docs/source/_assets/less/markdown.less
+++ b/docs/source/_assets/less/markdown.less
@@ -1,7 +1,7 @@
 .markdown {
   .subnav {
     .flex;
-    .mt-5;
+    .mt-6;
     .pb-2;
     .border-b;
 
@@ -42,8 +42,8 @@
   }
 
   h2 {
-    .mt-8;
-    .mb-6;
+    .mt-16;
+    .mb-8;
     .leading-none;
     .text-dark-softer;
     .text-thin;
@@ -52,7 +52,7 @@
   }
 
   p {
-    .mt-6;
+    .mt-8;
     .mb-3;
   }
 }
diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php
index 8679e9db7..4bbe4e541 100644
--- a/docs/source/_layouts/master.blade.php
+++ b/docs/source/_layouts/master.blade.php
@@ -9,7 +9,7 @@
         <script type="text/javascript" src="/js/prism.js" defer=""></script>
     </head>
     <body class="full-height flex-col">
-        <header class="px-6 py-5 bg-primary">
+        <header class="px-8 py-6 bg-primary">
             <div class="flex-y-center">
                 <svg class="mr-2" style="height: 34px; width: auto;" xmlns="http://www.w3.org/2000/svg" viewBox="173.345 95.819 442.976 281.173">
                     <path fill="#ffffff" d="M173.345 188.574l100.745 78.263-.216 110.155 80.33-53.23-28.388-26.996 111.5 80.226L616.32 95.82l-442.975 92.754zM576.58 122.36L331.837 278.67l-39.912 67.82.622-86.155 284.03-137.974z"/>
@@ -21,14 +21,14 @@
             </div>
         </header>
         <div class="flex flex-fill">
-            <nav class="px-6 pb-6 bg-light-softer text-light text-sm leading-loose" style="flex: 0 0 12rem;">
-                <div class="mt-6 mb-1 text-dark-softer text-uppercase text-xs">Introduction</div>
+            <nav class="px-8 pb-8 bg-light-softer text-light text-sm leading-loose" style="flex: 0 0 12rem;">
+                <div class="mt-8 mb-1 text-dark-softer text-uppercase text-xs">Introduction</div>
                 <ul>
                     <li><a class="{{ $page->getUrl() === '/' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/">Welcome</a></li>
                     <li><a class="{{ $page->getUrl() === '/installation' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/installation">Installation</a></li>
                     <li><a class="{{ $page->getUrl() === '/principles' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/principles">Principles</a></li>
                 </ul>
-                <div class="mt-6 mb-1 text-dark-softer text-uppercase text-xs">Utilities</div>
+                <div class="mt-8 mb-1 text-dark-softer text-uppercase text-xs">Utilities</div>
                 <ul>
                     <li><a class="{{ $page->getUrl() === '/backgrounds' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/backgrounds">Backgrounds</a></li>
                     <li><a class="{{ $page->getUrl() === '/borders' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/borders">Borders</a></li>
@@ -43,7 +43,7 @@
                     <li><a class="{{ $page->getUrl() === '/z-index' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/z-index">Z-Index</a></li>
                 </ul>
             </nav>
-            <div class="p-7 constrain-lg markdown">
+            <div class="p-12 constrain-lg markdown">
                 @yield('content')
             </div>
         </div>
diff --git a/docs/source/borders.md b/docs/source/borders.md
index 57dee136f..cc9cf6b6e 100644
--- a/docs/source/borders.md
+++ b/docs/source/borders.md
@@ -17,12 +17,12 @@ title: "Borders"
 
 Construct border size utilities using the <code class="inline">.border-side-width</code> syntax. For example, <code class="inline">.border</code> would add a <code class="inline">1px</code> border to the element, where <code class="inline">.border-b-3</code> would add a <code class="inline">4px</code> bottom border to the element. Note that that the default border style is <code class="inline">solid</code>, and will get the <code class="inline">@border-default-color</code> applied.
 
-<div class="flex flex-top mt-6 text-sm">
-    <div class="pr-7">
+<div class="flex flex-top mt-8 text-sm">
+    <div class="pr-12">
         <div class="mb-3 text-dark-soft text-uppercase">Class</div>
         <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">border</code></div>
     </div>
-    <div class="pl-7 pr-7 border-l">
+    <div class="pl-12 pr-12 border-l">
         <div class="mb-3 text-dark-soft"><span class="text-uppercase">Side</span> <span class="text-dark-softer text-xs">(optional)</span></div>
         <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded bg-light-softer">&nbsp;</code> All</div>
         <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">t</code> Top</div>
@@ -30,7 +30,7 @@ Construct border size utilities using the <code class="inline">.border-side-widt
         <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">b</code> Bottom</div>
         <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">l</code> Left</div>
     </div>
-    <div class="pl-7 border-l">
+    <div class="pl-12 border-l">
         <div class="mb-3 text-dark-soft"><span class="text-uppercase">Width</span> <span class="text-dark-softer text-xs">(optional)</span></div>
         <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded bg-light-softer">&nbsp;</code> 1px</div>
         <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">2</code> 2px</div>
diff --git a/docs/source/spacing.md b/docs/source/spacing.md
index bda640b12..300fcc9e0 100644
--- a/docs/source/spacing.md
+++ b/docs/source/spacing.md
@@ -7,14 +7,14 @@ title: "Spacing"
 
 The syntax below is combined to create a system for padding and margins. For example, <code class="inline">.pt-2</code> would add padding to the top of the element to the value of <code class="inline">0.5rem</code> and <code class="inline">.mx-0</code> would make the horizontal margin zero.
 
-<div class="flex flex-top mt-6 text-sm">
-    <div class="pr-7">
+<div class="flex flex-top mt-8 text-sm">
+    <div class="pr-12">
         <div class="mb-3 text-dark-soft text-uppercase">Class</div>
         <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">p</code> Padding</div>
         <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">m</code> Margin</div>
         <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">pull</code> Negative Margin</div>
     </div>
-    <div class="pl-7 pr-7 border-l">
+    <div class="pl-12 pr-12 border-l">
         <div class="mb-3 text-dark-soft"><span class="text-uppercase">Position</span> <span class="text-dark-softer text-xs">(optional)</span></div>
         <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">t</code> Top</div>
         <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">r</code> Right</div>
@@ -23,15 +23,15 @@ The syntax below is combined to create a system for padding and margins. For exa
         <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">x</code> Horizontal</div>
         <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">y</code> Vertical</div>
     </div>
-    <div class="pl-7 border-l">
+    <div class="pl-12 border-l">
         <div class="mb-3 text-dark-soft text-uppercase">Space</div>
         <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">0</code> 0</div>
         <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">1</code> 0.25rem</div>
         <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">2</code> 0.5rem</div>
         <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">3</code> 0.75rem</div>
         <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">4</code> 1rem</div>
-        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">5</code> 1.5rem</div>
-        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">6</code> 2rem</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">6</code> 1.5rem</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">8</code> 2rem</div>
     </div>
 </div>
 
diff --git a/src/utilities/spacing.less b/src/utilities/spacing.less
index 4e3ec8c68..b43b5bad2 100644
--- a/src/utilities/spacing.less
+++ b/src/utilities/spacing.less
@@ -1,38 +1,22 @@
-@spacer-0: 0;
-@spacer-1: 0.25rem;
-@spacer-2: 0.5rem;
-@spacer-3: 0.75rem;
-@spacer-4: 1rem;
-@spacer-5: 1.5rem;
-@spacer-6: 2rem;
-@spacer-7: 3rem;
-@spacer-8: 4rem;
-@spacer-9: 5rem;
-@spacer-10: 6rem;
-@spacer-11: 8rem;
-@spacer-12: 10rem;
-@spacer-13: 15rem;
-@spacer-14: 20rem;
-@spacer-15: 30rem;
-
 @spacing-scale:
   'px' 1px,
-  '0' @spacer-0,
-  '1' @spacer-1,
-  '2' @spacer-2,
-  '3' @spacer-3,
-  '4' @spacer-4,
-  '5' @spacer-5,
-  '6' @spacer-6,
-  '7' @spacer-7,
-  '8' @spacer-8,
-  '9' @spacer-9,
-  '10' @spacer-10,
-  '11' @spacer-11,
-  '12' @spacer-12,
-  '13' @spacer-13,
-  '14' @spacer-14,
-  '15' @spacer-15;
+  '0' 0,
+  '1' 0.25rem,
+  '2' 0.5rem,
+  '3' 0.75rem,
+  '4' 1rem,
+  '6' 1.5rem,
+  '8' 2rem,
+  '12' 3rem,
+  '16' 4rem,
+  '20' 5rem,
+  '24' 6rem,
+  '32' 8rem,
+  '40' 10rem,
+  '60' 15rem,
+  '80' 20rem,
+  '120' 30rem,
+;
 
 @padding-scale: @spacing-scale;
 @margin-scale: @spacing-scale;
