diff --git a/docs/source/_layouts/documentation.blade.php b/docs/source/_layouts/documentation.blade.php
index 26bb82c55..7e27c854b 100644
--- a/docs/source/_layouts/documentation.blade.php
+++ b/docs/source/_layouts/documentation.blade.php
@@ -157,18 +157,18 @@
     </div>
     <div class="md:ml-80">
         <div class="fixed w-full z-20">
-            <div class="pin-t bg-white md:hidden relative border-b border-dark h-12 flex items-center">
+            <div class="pin-t bg-white md:hidden relative border-b border-grey-light h-12 flex items-center">
                   <div class="js-open-sidebar absolute pin-l pin-y px-4 flex items-center">
-                      <svg class="h-4" fill="#777" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
+                      <svg class="h-4 cursor-pointer text-grey" role="button" fill="#777" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
                   </div>
                   <div class="mx-auto inline-flex items-center">
                       <svg class="h-4" viewBox="0 0 60 36" xmlns="http://www.w3.org/2000/svg">
                           <path d="M15 12c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5zM0 30c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5z" fill="url(#logoGradient)" fill-rule="evenodd"></path>
                       </svg>
                   </div>
-                  <div class="js-close-sidebar">
+                  <div class="hidden js-close-sidebar">
                     <div class="flex items-center absolute pin-r pin-y px-4">
-                      <svg class="h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"/></svg>
+                      <svg class="h-4 cursor-pointer text-grey" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"/></svg>
                     </div>
                   </div>
             </div>
diff --git a/docs/source/docs/background-color.blade.md b/docs/source/docs/background-color.blade.md
index 69a850f74..b23f536c1 100644
--- a/docs/source/docs/background-color.blade.md
+++ b/docs/source/docs/background-color.blade.md
@@ -5,246 +5,15 @@ title: "Backgrounds"
 
 # Background Color
 
-<div class="subnav">
-    <a class="subnav-link" href="#usage">Usage</a>
-    <a class="subnav-link" href="#responsive">Responsive</a>
-    <a class="subnav-link" href="#customizing">Customizing</a>
+<div class="text-xl text-slate-light mb-4">
+    Utilities for controlling an element's background color.
 </div>
 
-<h2 id="colors">Colors</h2>
+@include('_partials.feature-badges', [
+    'responsive' => true,
+    'customizable' => true,
+    'hover' => true,
+    'focus' => false
+])
 
-
-<div class="flex flex-wrap -mx-4 mb-4">
-  <div class="w-full md:w-1/3 px-4">
-    <div class="rounded overflow-hidden">
-      <div class="text-slate-dark bg-slate-lighter px-6 py-4 text-sm">
-        .bg-slate-lighter
-      </div>
-      <div class="text-white bg-slate-light px-6 py-4 text-sm">
-        .bg-slate-light
-      </div>
-      <div class="text-white bg-slate px-6 py-4 text-sm">
-        .bg-slate
-      </div>
-      <div class="text-white bg-slate-dark px-6 py-4 text-sm">
-        .bg-slate-dark
-      </div>
-      <div class="text-white bg-slate-darker px-6 py-4 text-sm">
-        .bg-slate-darker
-      </div>
-    </div>
-  </div>
-  <div class="w-full md:w-1/3 px-4">
-    <div class="rounded overflow-hidden">
-      <div class="text-slate-dark bg-smoke-lighter px-6 py-4 text-sm">
-        .bg-smoke-lighter
-      </div>
-      <div class="text-slate-dark bg-smoke-light px-6 py-4 text-sm">
-        .bg-smoke-light
-      </div>
-      <div class="text-slate-dark bg-smoke px-6 py-4 text-sm">
-        .bg-smoke
-      </div>
-      <div class="text-slate-dark bg-smoke-dark px-6 py-4 text-sm">
-        .bg-smoke-dark
-      </div>
-      <div class="text-white bg-smoke-darker px-6 py-4 text-sm">
-        .bg-smoke-darker
-      </div>
-    </div>
-  </div>
-</div>
-
-<div class="flex flex-wrap -mx-4 mb-4">
-  <div class="w-full md:w-1/3 px-4">
-    <div class="rounded overflow-hidden">
-      <div class="text-red bg-red-lighter px-6 py-4 text-sm">
-        .bg-red-lighter
-      </div>
-      <div class="text-white bg-red-light px-6 py-4 text-sm">
-        .bg-red-light
-      </div>
-      <div class="text-white bg-red px-6 py-4 text-sm">
-        .bg-red
-      </div>
-      <div class="text-white bg-red-dark px-6 py-4 text-sm">
-        .bg-red-dark
-      </div>
-      <div class="text-white bg-red-darker px-6 py-4 text-sm">
-        .bg-red-darker
-      </div>
-    </div>
-  </div>
-  <div class="w-full md:w-1/3 px-4">
-    <div class="rounded overflow-hidden">
-      <div class="text-orange-darker bg-orange-lighter px-6 py-4 text-sm">
-        .bg-orange-lighter
-      </div>
-      <div class="text-orange-darker bg-orange-light px-6 py-4 text-sm">
-        .bg-orange-light
-      </div>
-      <div class="text-orange-darker bg-orange px-6 py-4 text-sm">
-        .bg-orange
-      </div>
-      <div class="text-white bg-orange-dark px-6 py-4 text-sm">
-        .bg-orange-dark
-      </div>
-      <div class="text-white bg-orange-darker px-6 py-4 text-sm">
-        .bg-orange-darker
-      </div>
-    </div>
-  </div>
-  <div class="w-full md:w-1/3 px-4">
-    <div class="rounded overflow-hidden">
-      <div class="text-yellow-darker bg-yellow-lighter px-6 py-4 text-sm">
-        .bg-yellow-lighter
-      </div>
-      <div class="text-yellow-darker bg-yellow-light px-6 py-4 text-sm">
-        .bg-yellow-light
-      </div>
-      <div class="text-yellow-darker bg-yellow px-6 py-4 text-sm">
-        .bg-yellow
-      </div>
-      <div class="text-yellow-darker bg-yellow-dark px-6 py-4 text-sm">
-        .bg-yellow-dark
-      </div>
-      <div class="text-white bg-yellow-darker px-6 py-4 text-sm">
-        .bg-yellow-darker
-      </div>
-    </div>
-  </div>
-</div>
-
-<div class="flex flex-wrap -mx-4 mb-4">
-  <div class="w-full md:w-1/3 px-4">
-    <div class="rounded overflow-hidden">
-      <div class="text-green-darker bg-green-lighter px-6 py-4 text-sm">
-        .bg-green-lighter
-      </div>
-      <div class="text-green-darker bg-green-light px-6 py-4 text-sm">
-        .bg-green-light
-      </div>
-      <div class="text-white bg-green px-6 py-4 text-sm">
-        .bg-green
-      </div>
-      <div class="text-white bg-green-dark px-6 py-4 text-sm">
-        .bg-green-dark
-      </div>
-      <div class="text-white bg-green-darker px-6 py-4 text-sm">
-        .bg-green-darker
-      </div>
-    </div>
-  </div>
-  <div class="w-full md:w-1/3 px-4">
-    <div class="rounded overflow-hidden">
-      <div class="text-teal-darker bg-teal-lighter px-6 py-4 text-sm">
-        .bg-teal-lighter
-      </div>
-      <div class="text-teal-darker bg-teal-light px-6 py-4 text-sm">
-        .bg-teal-light
-      </div>
-      <div class="text-white bg-teal px-6 py-4 text-sm">
-        .bg-teal
-      </div>
-      <div class="text-white bg-teal-dark px-6 py-4 text-sm">
-        .bg-teal-dark
-      </div>
-      <div class="text-white bg-teal-darker px-6 py-4 text-sm">
-        .bg-teal-darker
-      </div>
-    </div>
-  </div>
-  <div class="w-full md:w-1/3 px-4">
-    <div class="rounded overflow-hidden">
-      <div class="text-blue-darker bg-blue-lighter px-6 py-4 text-sm">
-        .bg-blue-lighter
-      </div>
-      <div class="text-blue-darker bg-blue-light px-6 py-4 text-sm">
-        .bg-blue-light
-      </div>
-      <div class="text-white bg-blue px-6 py-4 text-sm">
-        .bg-blue
-      </div>
-      <div class="text-white bg-blue-dark px-6 py-4 text-sm">
-        .bg-blue-dark
-      </div>
-      <div class="text-white bg-blue-darker px-6 py-4 text-sm">
-        .bg-blue-darker
-      </div>
-    </div>
-  </div>
-</div>
-
-<div class="flex flex-wrap -mx-4 mb-4">
-  <div class="w-full md:w-1/3 px-4">
-    <div class="rounded overflow-hidden">
-      <div class="text-indigo-darker bg-indigo-lighter px-6 py-4 text-sm">
-        .bg-indigo-lighter
-      </div>
-      <div class="text-indigo-darker bg-indigo-light px-6 py-4 text-sm">
-        .bg-indigo-light
-      </div>
-      <div class="text-white bg-indigo px-6 py-4 text-sm">
-        .bg-indigo
-      </div>
-      <div class="text-white bg-indigo-dark px-6 py-4 text-sm">
-        .bg-indigo-dark
-      </div>
-      <div class="text-white bg-indigo-darker px-6 py-4 text-sm">
-        .bg-indigo-darker
-      </div>
-    </div>
-  </div>
-  <div class="w-full md:w-1/3 px-4">
-    <div class="rounded overflow-hidden">
-      <div class="text-purple-darker bg-purple-lighter px-6 py-4 text-sm">
-        .bg-purple-lighter
-      </div>
-      <div class="text-purple-darker bg-purple-light px-6 py-4 text-sm">
-        .bg-purple-light
-      </div>
-      <div class="text-white bg-purple px-6 py-4 text-sm">
-        .bg-purple
-      </div>
-      <div class="text-white bg-purple-dark px-6 py-4 text-sm">
-        .bg-purple-dark
-      </div>
-      <div class="text-white bg-purple-darker px-6 py-4 text-sm">
-        .bg-purple-darker
-      </div>
-    </div>
-  </div>
-  <div class="w-full md:w-1/3 px-4">
-    <div class="rounded overflow-hidden">
-      <div class="text-pink-darker bg-pink-lighter px-6 py-4 text-sm">
-        .bg-pink-lighter
-      </div>
-      <div class="text-pink-darker bg-pink-light px-6 py-4 text-sm">
-        .bg-pink-light
-      </div>
-      <div class="text-white bg-pink px-6 py-4 text-sm">
-        .bg-pink
-      </div>
-      <div class="text-white bg-pink-dark px-6 py-4 text-sm">
-        .bg-pink-dark
-      </div>
-      <div class="text-white bg-pink-darker px-6 py-4 text-sm">
-        .bg-pink-darker
-      </div>
-    </div>
-  </div>
-</div>
-
-Using the utilities in HTML:
-
-```html
-<div class="bg-white"></div>
-<div class="bg-smoke-lighter"></div>
-<div class="bg-smoke-light"></div>
-<div class="bg-smoke"></div>
-
-<div class="bg-slate-darker"></div>
-<div class="bg-slate-dark"></div>
-<div class="bg-slate"></div>
-<div class="bg-slate-light"></div>
-```
+@include('_partials.work-in-progress')
diff --git a/docs/source/docs/border-width.blade.md b/docs/source/docs/border-width.blade.md
index 47730ed22..e659aee3f 100644
--- a/docs/source/docs/border-width.blade.md
+++ b/docs/source/docs/border-width.blade.md
@@ -18,9 +18,9 @@ title: "Border Width"
 
 @include('_partials.work-in-progress')
 
-## Usage
+Add borders to any element using the `.border{-side?}{-width?}` syntax.
 
-Add borders to any element using the `.border{-side?}{-width?}` syntax. For example, `.border` would add a `1px` border to all sides of the element, where `.border-b-4` would add a `4px` border to the bottom of the element.
+For example, `.border` would add a `1px` border to all sides of the element, where `.border-b-4` would add a `4px` border to the bottom of the element.
 
 <div class="flex items-start mt-8 text-sm leading-none">
     <div class="pr-12">
@@ -44,23 +44,3 @@ Add borders to any element using the `.border{-side?}{-width?}` syntax. For exam
         <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">8</code> 8px</div>
     </div>
 </div>
-
-### Examples
-
-```html
-<!-- Add a 1px border to all sides -->
-<div class="border"></div>
-
-<!-- Add a 1px border to the top side -->
-<div class="border-t"></div>
-
-<!-- Add a 2px border to all sides -->
-<div class="border-2"></div>
-
-<!-- Add a 2px border to the top side -->
-<div class="border-t-2"></div>
-```
-
-## Responsive
-
-## Customizing
diff --git a/docs/source/docs/spacing.blade.md b/docs/source/docs/spacing.blade.md
index 19e4b975c..ec463a72a 100644
--- a/docs/source/docs/spacing.blade.md
+++ b/docs/source/docs/spacing.blade.md
@@ -18,7 +18,9 @@ title: "Padding"
 
 @include('_partials.work-in-progress')
 
-The syntax below is combined to create a system for padding and margins. For example, `.pt-2` would add padding to the top of the element to the value of `0.5rem`, `.mx-0` would make the horizontal margin zero, and `.-mb-6` would add negative margin to the bottom of an element.
+Control an element's padding and margin using the `.p{side?}-{size}`, `.m{side?}-{size}`, and `.-m{side?}-{size}` utilities.
+
+For example, `.pt-2` would add `.5rem` of padding to the top of the element, `.mx-0` would make the horizontal margin zero, and `.-mb-6` would add a `1.5rem`negative margin to the bottom of an element.
 
 <div class="flex items-start mt-8 text-sm">
     <div class="pr-12">