diff --git a/docs/source/docs/colors.blade.md b/docs/source/docs/colors.blade.md
index 65ce58554..df1c039e7 100644
--- a/docs/source/docs/colors.blade.md
+++ b/docs/source/docs/colors.blade.md
@@ -120,35 +120,35 @@ To get you started, we've provided a generous palette of great looking colors th
         <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">
+      <div class="text-grey-darkest bg-smoke-lighter 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">
+      <div class="text-grey-darkest bg-smoke-light 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">
+      <div class="text-grey-darkest bg-smoke 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">
+      <div class="text-white bg-smoke-dark 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">
+      <div class="text-white bg-smoke-darker 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">
+      <div class="text-white bg-slate 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">
+      <div class="text-white bg-slate-dark 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">
+      <div class="text-white bg-slate-darker 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>
diff --git a/docs/tailwind.js b/docs/tailwind.js
index b85377805..db5582b85 100644
--- a/docs/tailwind.js
+++ b/docs/tailwind.js
@@ -21,15 +21,15 @@ config.colors = Object.assign(config.colors, {
   '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%)',
+  'new-white': 'hsl(208, 0%, 100%)',
+  'new-grey-lightest': 'hsl(208, 35%, 98%)',
+  'new-grey-lighter': 'hsl(208, 30%, 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-black': 'hsl(208, 16%, 16%)',
 
 
   'slate-darker': '#212b35',