diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js
index 8562e4238..9b8412616 100644
--- a/defaultConfig.stub.js
+++ b/defaultConfig.stub.js
@@ -46,15 +46,15 @@ View the full documentation at https://tailwindcss.com.
 let colors = {
   'transparent': 'transparent',
 
-  'black': '#222b2f',
-  'grey-darkest': '#364349',
-  'grey-darker': '#596a73',
-  'grey-dark': '#70818a',
-  'grey': '#9babb4',
-  'grey-light': '#dae4e9',
-  'grey-lighter': '#f3f7f9',
-  'grey-lightest': '#fafcfc',
-  'white': '#ffffff',
+  'black': 'hsl(208, 16%, 16%)',
+  'grey-darkest': 'hsl(208, 15%, 28%)',
+  'grey-darker': 'hsl(208, 12%, 43%)',
+  'grey-dark': 'hsl(208, 12%, 58%)',
+  'grey': 'hsl(208, 16%, 76%)',
+  'grey-light': 'hsl(208, 20%, 88%)',
+  'grey-lighter': 'hsl(208, 33%, 96%)',
+  'grey-lightest': 'hsl(208, 35%, 98%)',
+  'white': 'hsl(208, 0%, 100%)',
 
   'red-darkest': '#420806',
   'red-darker': '#6a1b19',
diff --git a/docs/source/docs/colors.blade.md b/docs/source/docs/colors.blade.md
index 5b5f8d28c..5c2876867 100644
--- a/docs/source/docs/colors.blade.md
+++ b/docs/source/docs/colors.blade.md
@@ -10,90 +10,51 @@ Developing an organized, consistent and beautiful color palette is critical to t
 
 To get you started, we've provided a generous palette of great looking colors that are perfect for prototyping, or even as a starting point for your color palette. That said, don't hesitate to [customize](#customizing) them for your project.
 
-<div class="flex flex-wrap">
-  <div class="w-full md:w-1/2 lg:w-1/3 mb-8">
+<div class="flex flex-wrap -mx-4">
+  <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
     <div class="rounded overflow-hidden">
-      <div class="text-white bg-new-grey px-6 py-4 text-sm font-semibold relative shadow z-10">
+      <div class="text-white bg-grey px-6 py-4 text-sm font-semibold relative shadow z-10">
         <div class="tracking-wide uppercase mb-6">Proposed Greys</div>
         <div class="flex justify-between">
           <span class="opacity-0">Base</span>
-          <span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['new-grey']) }}</span>
-        </div>
-      </div>
-      <div class="text-black bg-new-white px-6 py-3 text-sm font-semibold flex justify-between">
-        <span class="-opacity-0">White</span>
-        <span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['new-white']) }}</span>
-      </div>
-      <div class="text-grey-darkest bg-new-grey-lightest px-6 py-3 text-sm font-semibold flex justify-between">
-        <span class="-opacity-0">Lightest</span>
-        <span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['new-grey-lightest']) }}</span>
-      </div>
-      <div class="text-grey-darkest bg-new-grey-lighter px-6 py-3 text-sm font-semibold flex justify-between">
-        <span class="-opacity-0">Lighter</span>
-        <span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['new-grey-lighter']) }}</span>
-      </div>
-      <div class="text-grey-darkest bg-new-grey-light px-6 py-3 text-sm font-semibold flex justify-between">
-        <span class="-opacity-0">Light</span>
-        <span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['new-grey-light']) }}</span>
-      </div>
-      <div class="text-white bg-new-grey px-6 py-3 text-sm font-semibold flex justify-between flex justify-between">
-        <span class="-opacity-0">Base</span>
-        <span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['new-grey']) }}</span>
-      </div>
-      <div class="text-white bg-new-grey-dark px-6 py-3 text-sm font-semibold flex justify-between">
-        <span class="-opacity-0">Dark</span>
-        <span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['new-grey-dark']) }}</span>
-      </div>
-      <div class="text-white bg-new-grey-darker px-6 py-3 text-sm font-semibold flex justify-between">
-        <span class="-opacity-0">Darker</span>
-        <span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['new-grey-darker']) }}</span>
-      </div>
-      <div class="text-white bg-new-grey-darkest px-6 py-3 text-sm font-semibold flex justify-between">
-        <span class="-opacity-0">Darkest</span>
-        <span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['new-grey-darkest']) }}</span>
-      </div>
-      <div class="text-white bg-new-black px-6 py-3 text-sm font-semibold flex justify-between">
-        <span class="-opacity-0">Black</span>
-        <span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['new-black']) }}</span>
-      </div>
-    </div>
-  </div>
-
-  <div class="w-full md:w-1/2 lg:w-1/3 mb-8">
-    <div class="rounded overflow-hidden">
-      <div class="text-white bg-grey px-6 py-4 text-sm font-semibold relative shadow z-10">
-        <div class="tracking-wide uppercase mb-6">Legacy Greys</div>
-        <div class="flex justify-between">
-          <span class="opacity-0">Base</span>
-          <span class="font-normal opacity-0">{{ strtoupper($page->config['colors']['grey']) }}</span>
+          <span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['grey']) }}</span>
         </div>
       </div>
       <div class="text-black bg-white px-6 py-3 text-sm font-semibold flex justify-between">
-        <span class="">White</span>
+        <span class="-opacity-0">White</span>
+        <span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['white']) }}</span>
       </div>
       <div class="text-grey-darkest bg-grey-lightest px-6 py-3 text-sm font-semibold flex justify-between">
-        <span class="">grey-light Lighter</span>
+        <span class="-opacity-0">Lightest</span>
+        <span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['grey-lightest']) }}</span>
       </div>
       <div class="text-grey-darkest bg-grey-lighter px-6 py-3 text-sm font-semibold flex justify-between">
-        <span class="">grey-light Light</span>
+        <span class="-opacity-0">Lighter</span>
+        <span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['grey-lighter']) }}</span>
       </div>
       <div class="text-grey-darkest bg-grey-light px-6 py-3 text-sm font-semibold flex justify-between">
-        <span class="">grey-light</span>
+        <span class="-opacity-0">Light</span>
+        <span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['grey-light']) }}</span>
       </div>
       <div class="text-white bg-grey px-6 py-3 text-sm font-semibold flex justify-between flex justify-between">
-        <span class="">grey-light Dark / Slate Lighter</span>
+        <span class="-opacity-0">Base</span>
+        <span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['grey']) }}</span>
       </div>
       <div class="text-white bg-grey-dark px-6 py-3 text-sm font-semibold flex justify-between">
-        <span class="">grey-light Darker / Slate Light</span>
+        <span class="-opacity-0">Dark</span>
+        <span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['grey-dark']) }}</span>
       </div>
       <div class="text-white bg-grey-darker px-6 py-3 text-sm font-semibold flex justify-between">
-        <span class="">Slate</span>
+        <span class="-opacity-0">Darker</span>
+        <span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['grey-darker']) }}</span>
       </div>
       <div class="text-white bg-grey-darkest px-6 py-3 text-sm font-semibold flex justify-between">
-        <span class="">Slate Dark</span>
+        <span class="-opacity-0">Darkest</span>
+        <span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['grey-darkest']) }}</span>
       </div>
       <div class="text-white bg-black px-6 py-3 text-sm font-semibold flex justify-between">
-        <span class="">Slate Darker</span>
+        <span class="-opacity-0">Black</span>
+        <span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['black']) }}</span>
       </div>
     </div>
   </div>
diff --git a/docs/tailwind.js b/docs/tailwind.js
index 7a723d7f2..732b7072a 100644
--- a/docs/tailwind.js
+++ b/docs/tailwind.js
@@ -1,33 +1,11 @@
 var config = require('../defaultConfig')()
 
 config.colors = Object.assign(config.colors, {
-  'new-white': 'hsl(208, 0%, 100%)',
-  'new-grey-lightest': 'hsl(208, 35%, 98%)',
-  'new-grey-lighter': 'hsl(208, 33%, 96%)',
-  'new-grey-light': 'hsl(208, 20%, 88%)',
-  'new-grey': 'hsl(208, 16%, 76%)',
-  'new-grey-dark': 'hsl(208, 12%, 58%)',
-  'new-grey-darker': 'hsl(208, 12%, 43%)',
-  'new-grey-darkest': 'hsl(208, 15%, 28%)',
-  'new-black': 'hsl(208, 16%, 16%)',
-
   'tailwind-teal-light': '#5ebcca',
   'tailwind-teal': '#44a8b3',
   'tailwind-teal-dark': '#2f8696',
 })
 
-config.colors = Object.assign(config.colors, {
-  'white': config.colors['new-white'],
-  'grey-lightest': config.colors['new-grey-lightest'],
-  'grey-lighter': config.colors['new-grey-lighter'],
-  'grey-light': config.colors['new-grey-light'],
-  'grey': config.colors['new-grey'],
-  'grey-dark': config.colors['new-grey-dark'],
-  'grey-darker': config.colors['new-grey-darker'],
-  'grey-darkest': config.colors['new-grey-darkest'],
-  'black': config.colors['new-black'],
-})
-
 config.fonts = {
   'sans': 'aktiv-grotesk, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue',
   'serif': 'Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif',