diff --git a/docs/source/docs/colors.blade.md b/docs/source/docs/colors.blade.md
index df1c039e7..338ea20ad 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">
-  <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 mb-8 px-4">
     <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>
@@ -59,7 +59,7 @@ To get you started, we've provided a generous palette of great looking colors th
     </div>
   </div>
 
-  <div class="w-full md:w-1/2 lg:w-1/3 mb-8">
+  <div class="w-full md:w-1/2 lg:w-1/3 mb-8 px-4">
     <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>
@@ -107,7 +107,7 @@ To get you started, we've provided a generous palette of great looking colors th
     </div>
   </div>
 
-  <div class="w-full md:w-1/2 lg:w-1/3 mb-8">
+  <div class="w-full md:w-1/2 lg:w-1/3 mb-8 px-4">
     <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>
diff --git a/docs/tailwind.js b/docs/tailwind.js
index db5582b85..60344d141 100644
--- a/docs/tailwind.js
+++ b/docs/tailwind.js
@@ -1,37 +1,16 @@
 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(208, 0%, 100%)',
   'new-grey-lightest': 'hsl(208, 35%, 98%)',
-  'new-grey-lighter': 'hsl(208, 30%, 96%)',
+  'new-grey-lighter': 'hsl(208, 33%, 96%)',
   'new-grey-light': 'hsl(208, 20%, 88%)',
-  'new-grey': 'hsl(208, 16%, 73%)',
-  'new-grey-dark': 'hsl(208, 11%, 55%)',
-  'new-grey-darker': 'hsl(208, 12%, 41%)',
-  'new-grey-darkest': 'hsl(208, 15%, 26%)',
+  '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%)',
 
-
   'slate-darker': '#212b35',
   'slate-dark': '#404e5c',
   'slate': '#647382',
@@ -49,6 +28,24 @@ config.colors = Object.assign(config.colors, {
   'tailwind-teal-dark': '#2f8696',
 })
 
+config.colors = Object.assign(config.colors, {
+  // 'slate-darker': config.colors['new-black'],
+  // 'slate-dark': config.colors['new-grey-darkest'],
+  // 'slate': config.colors['new-grey-darker'],
+  // 'slate-light': config.colors['new-grey-dark'],
+  // 'slate-lighter': config.colors['new-grey'],
+
+  // 'smoke-darker': config.colors['new-grey-dark'],
+  // 'smoke-dark': config.colors['new-grey'],
+  // 'smoke': config.colors['new-grey-light'],
+  // 'smoke-light': config.colors['new-grey-lighter'],
+  // 'smoke-lighter': config.colors['new-grey-lightest'],
+
+  'tailwind-teal-light': '#5ebcca',
+  'tailwind-teal': '#44a8b3',
+  'tailwind-teal-dark': '#2f8696',
+})
+
 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',