diff --git a/docs/source/docs/colors.blade.md b/docs/source/docs/colors.blade.md
index e4ca285b7..65ce58554 100644
--- a/docs/source/docs/colors.blade.md
+++ b/docs/source/docs/colors.blade.md
@@ -10,8 +10,8 @@ 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 -mx-4">
-  <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
+<div class="flex flex-wrap">
+  <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">Grey</div>
@@ -58,6 +58,102 @@ To get you started, we've provided a generous palette of great looking colors th
       </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-new-grey px-6 py-4 text-sm font-semibold relative shadow z-10">
+        <div class="tracking-wide uppercase mb-6">Grey</div>
+        <div class="flex justify-between">
+          <span class="-opacity-0">Base</span>
+          <span class="font-normal opacity-75 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-75 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-75 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-75 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-75 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-75 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-75 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-75 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-75 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-75 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">Grey</div>
+        <div class="flex justify-between">
+          <span class="opacity-0">Base</span>
+          <span class="font-normal opacity-0">{{ 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="opacity-0">White</span>
+        <span class="font-normal opacity-0">{{ 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="opacity-0">Lightest</span>
+        <span class="font-normal opacity-0">{{ 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="opacity-0">Lighter</span>
+        <span class="font-normal opacity-0">{{ 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="opacity-0">Light</span>
+        <span class="font-normal opacity-0">{{ 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="opacity-0">Base</span>
+        <span class="font-normal opacity-0">{{ 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="opacity-0">Dark</span>
+        <span class="font-normal opacity-0">{{ 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="opacity-0">Darker</span>
+        <span class="font-normal opacity-0">{{ 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="opacity-0">Darkest</span>
+        <span class="font-normal opacity-0">{{ 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="opacity-0">Black</span>
+        <span class="font-normal opacity-0">{{ strtoupper($page->config['colors']['black']) }}</span>
+      </div>
+    </div>
+  </div>
 </div>
 
 <div class="flex flex-wrap -mx-4">
diff --git a/docs/tailwind.js b/docs/tailwind.js
index 2d635826d..b85377805 100644
--- a/docs/tailwind.js
+++ b/docs/tailwind.js
@@ -1,6 +1,37 @@
 var config = require('../defaultConfig')()
 
 config.colors = Object.assign(config.colors, {
+  'new-white': 'hsl(0, 0%, 100%)',
+  'new-grey-lightest': 'hsl(200, 25%, 98%)',
+  'new-grey-lighter': 'hsl(200, 33%, 96%)',
+  'new-grey-light': 'hsl(200, 25%, 88%)',
+  'new-grey': 'hsl(200, 14%, 66%)',
+  'new-grey-dark': 'hsl(200, 10%, 49%)',
+  'new-grey-darker': 'hsl(200, 13%, 40%)',
+  'new-grey-darkest': 'hsl(200, 15%, 25%)',
+  'new-black': 'hsl(200, 16%, 16%)',
+
+  'new-white': 'hsl(0, 0%, 100%)',
+  'new-grey-lightest': 'hsl(200, 12%, 98%)',
+  'new-grey-lighter': 'hsl(200, 12%, 96%)',
+  'new-grey-light': 'hsl(200, 12%, 88%)',
+  'new-grey': 'hsl(200, 12%, 66%)',
+  'new-grey-dark': 'hsl(200, 12%, 49%)',
+  'new-grey-darker': 'hsl(200, 13%, 40%)',
+  'new-grey-darkest': 'hsl(200, 15%, 25%)',
+  'new-black': 'hsl(200, 16%, 16%)',
+
+  'new-white': 'hsl(200, 0%, 100%)',
+  'new-grey-lightest': 'hsl(200, 35%, 98%)',
+  'new-grey-lighter': 'hsl(200, 30%, 96%)',
+  'new-grey-light': 'hsl(200, 20%, 88%)',
+  'new-grey': 'hsl(200, 16%, 73%)',
+  'new-grey-dark': 'hsl(200, 11%, 55%)',
+  'new-grey-darker': 'hsl(200, 12%, 41%)',
+  'new-grey-darkest': 'hsl(200, 15%, 26%)',
+  'new-black': 'hsl(200, 16%, 16%)',
+
+
   'slate-darker': '#212b35',
   'slate-dark': '#404e5c',
   'slate': '#647382',
diff --git a/docs/webpack.mix.js b/docs/webpack.mix.js
index cabb9a984..921a84c3e 100644
--- a/docs/webpack.mix.js
+++ b/docs/webpack.mix.js
@@ -7,7 +7,7 @@ const tailwind = require('./../lib/index.js')
 const config = require('./../defaultConfig.js')
 const fs = require('fs')
 
-fs.writeFileSync('./tailwind.json', JSON.stringify(config()))
+fs.writeFileSync('./tailwind.json', JSON.stringify(require('./tailwind.js')))
 
 const env = argv.e || argv.env || 'local'
 const plugins = [