diff --git a/docs/source/_assets/less/markdown.less b/docs/source/_assets/less/markdown.less
index 781af332f..1d9dfe11b 100644
--- a/docs/source/_assets/less/markdown.less
+++ b/docs/source/_assets/less/markdown.less
@@ -62,12 +62,12 @@
   }
 
   > h2, h2& {
-    @apply .mt-16;
+    @apply .mt-12;
     @apply .mb-4;
     @apply .text-slate-darker;
     @apply .leading-none;
     @apply .font-semibold;
-    @apply .text-xl;
+    @apply .text-2xl;
   }
 
   > h3, h3& {
@@ -76,7 +76,7 @@
     @apply .text-slate-darker;
     @apply .leading-none;
     @apply .font-semibold;
-    @apply .text-lg;
+    @apply .text-xl;
   }
 
   > h4, h4& {
@@ -88,6 +88,10 @@
     @apply .text-base;
   }
 
+  > h1 + p {
+    @apply .mt-8;
+  }
+
   > h1 > code,
   > h2 > code,
   > h3 > code,
diff --git a/docs/source/_layouts/documentation.blade.php b/docs/source/_layouts/documentation.blade.php
index 3ec44ac03..a60580329 100644
--- a/docs/source/_layouts/documentation.blade.php
+++ b/docs/source/_layouts/documentation.blade.php
@@ -180,7 +180,7 @@
                   </div>
             </div>
         </div>
-        <div id="content" class="px-6 pb-8 pt-20 md:pt-8 w-full max-w-lg mx-auto">
+        <div id="content" class="px-6 pb-8 pt-20 md:pt-16 w-full max-w-lg mx-auto">
             <div id="app">
                 <div class="markdown">
                     @if ($page->category)
diff --git a/docs/source/index.blade.php b/docs/source/index.blade.php
index ff210d0ae..4394ad4f3 100644
--- a/docs/source/index.blade.php
+++ b/docs/source/index.blade.php
@@ -9,15 +9,15 @@
         </div>
         <h2 class="mt-12 font-light text-4xl text-center">A Utility-First CSS Framework<br class="hidden sm:inline-block"> for Rapid UI Development</h2>
         <div class="mt-12 flex justify-center leading-none">
-            <a class="rounded-full font-semibold block px-12 py-3 border-2 border-tailwind-teal hover:border-orange hover:bg-orange text-white bg-tailwind-teal " href="/docs/installation">Get Started</a>
-            <a class="rounded-full font-semibold block px-12 py-3 border-2 border-tailwind-teal hover:border-orange hover:text-orange text-tailwind-teal ml-4" href="https://github.com/tailwindcss/tailwindcss">GitHub</a>
+            <a class="rounded-full font-semibold block px-12 py-3 border-2 border-tailwind-teal bg-tailwind-teal text-white hover:border-tailwind-teal-light hover:bg-tailwind-teal-light hover:bg-tailwind-teal-light" href="/docs/installation">Get Started</a>
+            <a class="rounded-full font-semibold block px-12 py-3 ml-4 border-2 border-tailwind-teal text-tailwind-teal hover:text-white hover:border-tailwind-teal-light hover:bg-tailwind-teal-light hover:bg-tailwind-teal-light" href="https://github.com/tailwindcss/tailwindcss">GitHub</a>
         </div>
     </div>
 </div>
 
 <div class="px-6">
     <div class="my-12 text-center uppercase">
-        <span class="inline-block bg-soft px-4 text-medium text-grey-darker tracking-wide">A project by</span>
+        <span class="inline-block bg-soft px-4 text-grey-darker tracking-wide font-bold">A project by</span>
     </div>
     <div class="flex justify-center">
         <div class="pb-4 flex justify-center flex-wrap max-w-md xl:max-w-full border-b-2 border-grey-light">
diff --git a/docs/tailwind.js b/docs/tailwind.js
index ff68e820e..9e5f23a4e 100644
--- a/docs/tailwind.js
+++ b/docs/tailwind.js
@@ -9,8 +9,9 @@ config.colors = {
   'smoke-light': 'hsl(200, 33%, 96%)',
   'smoke-lighter': 'hsl(200, 25%, 98%)',
 
-  'tailwind-teal': '#44A8B3',
-  'tailwind-teal-dark': '#2F8696',
+  'tailwind-teal-light': '#5ebcca',
+  'tailwind-teal': '#44a8b3',
+  'tailwind-teal-dark': '#2f8696',
 }
 
 config.fonts = {