diff --git a/_includes/header.html b/_includes/header.html
index 436e17b..37c35cc 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -21,6 +21,10 @@
 <script src="{{ page.base_url }}docs-assets/js/docs.js"></script>
 <script src="{{ page.base_url }}docs-assets/js/fingerblast.js"></script>
 
+<!-- Typekit -->
+<script type="text/javascript" src="//use.typekit.net/asj6ttm.js"></script>
+<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
+
 <script>
   var _gaq = _gaq || [];
   _gaq.push(['_setAccount', 'UA-36050008-1']);
diff --git a/_layouts/home.html b/_layouts/home.html
index fa4e0fa..a4e6b5c 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -3,7 +3,7 @@
   <head>
     {% include header.html %}
   </head>
-  <body ontouchstart="">
+  <body class="docs-home" ontouchstart="">
     {{ content }}
   </body>
  </html>
\ No newline at end of file
diff --git a/docs-assets/css/docs.css b/docs-assets/css/docs.css
index 0fcc563..0b7a790 100644
--- a/docs-assets/css/docs.css
+++ b/docs-assets/css/docs.css
@@ -621,67 +621,87 @@
   border-color: #81c700;
 }
 
+html,
 body {
-  position: static !important;
-  font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  position: relative !important;
+  font: 14px/1.5 "adelle-sans",sans-serif;
   color: #333;
   background-color: #fff;
   -webkit-font-smoothing: antialiased;
   -webkit-text-size-adjust: 100%;
 }
 
-.docs-header-wrapper {
-  background-color: #fafafa;
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
-  background-position: 0 100%;
+.docs-home {
+  background-image: linear-gradient(45deg, #02b8ea 0%, #03afbf 50%, #0367bf 100%);
   background-repeat: no-repeat;
 }
-.docs-header-wrapper .icon {
-  position: absolute;
-  top: 15px;
-  right: 15px;
+
+.docs-nav {
+  padding-top: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}
+.docs-nav .icon {
+  margin-top: 5px;
+  color: #fff;
+  opacity: .5;
+  cursor: pointer;
   -webkit-transition: opacity 0.2s linear;
   transition: opacity 0.2s linear;
 }
-.docs-header-wrapper .icon:active {
-  opacity: .3;
+.docs-nav .icon:hover {
+  opacity: .8;
 }
 
-.docs-header {
-  padding-top: 50px;
-  padding-bottom: 50px;
+.docs-nav,
+.docs-header-content {
   text-align: center;
-  -webkit-animation-name: fadein;
-  animation-name: fadein;
-  -webkit-animation-duration: 2s;
-  animation-duration: 2s;
 }
-.docs-header .docs-title {
+
+.docs-header-content {
+  margin-top: 50px;
+}
+.docs-header-content .button {
+  color: #03afbf;
+  border-color: #fff;
+}
+
+.docs-title,
+.docs-subtitle {
+  color: #fff;
+}
+
+.docs-title {
   margin: 0;
-  font-size: 40px;
-  font-weight: 300;
-}
-.docs-header .docs-subtitle {
-  margin-top: 0;
-  margin-bottom: 20px;
-  color: #777;
   font-size: 22px;
   font-weight: 300;
-  line-height: 30px;
+  text-transform: uppercase;
+  letter-spacing: 6px;
+}
+
+.docs-subtitle {
+  max-width: 750px;
+  margin: 0 auto 20px;
+  font-size: 24px;
+  font-weight: 300;
+  line-height: 34px;
+  opacity: .8;
 }
 
 .social {
+  display: none;
+  margin: 20px 0 20px;
   padding: 0;
   list-style: none;
   text-align: center;
-  -webkit-animation-name: fadein;
-  animation-name: fadein;
-  -webkit-animation-duration: 2s;
-  animation-duration: 2s;
 }
 .social li {
   height: 20px;
-  padding-bottom: 25px;
   display: inline-block;
   vertical-align: top;
 }
@@ -689,6 +709,9 @@ body {
   padding: 0;
   border: 0;
 }
+.social iframe {
+  background-color: transparent;
+}
 
 .docs-masthead {
   padding-top: 60px;
@@ -870,6 +893,9 @@ body {
 }
 
 .device {
+  font-family: "Helvetica Neue", Helvetica, sans-serif;
+  font-size: 17px;
+  line-height: 21px;
   display: none;
 }
 
@@ -906,6 +932,26 @@ hr {
 }
 
 @media screen and (min-width: 768px) {
+  .docs-header-content {
+    margin-top: 100px;
+  }
+  .docs-header-content .button {
+    max-width: 300px;
+    margin-right: auto;
+    margin-left: auto;
+  }
+
+  .docs-subtitle {
+    margin-bottom: 30px;
+    font-size: 40px;
+    line-height: 60px;
+  }
+
+  .social {
+    margin-top: 40px;
+    margin-bottom: 40px;
+  }
+
   .device {
     position: relative;
     top: 50px;
@@ -1169,35 +1215,3 @@ hr {
     margin-right: -30px;
   }
 }
-@-webkit-keyframes fadein {
-  0% {
-    opacity: 0;
-    -webkit-transform: scale(0.9);
-  }
-
-  50% {
-    opacity: 0;
-    -webkit-transform: scale(0.9);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: scale(1);
-  }
-}
-
-@-moz-keyframes shownotice {
-  0% {
-    height: 100%;
-    min-height: 30px;
-    padding: 20px 0;
-    opacity: 1;
-  }
-
-  100% {
-    height: 100%;
-    min-height: 30px;
-    padding: 20px 0;
-    opacity: 1;
-  }
-}
diff --git a/index.html b/index.html
index f6f47cd..5f4aec5 100644
--- a/index.html
+++ b/index.html
@@ -4,18 +4,19 @@ title: Ratchet
 base_url: "./"
 ---
 
-<header class="docs-header-wrapper">
-  <a class="icon icon-list" href="#"></a>
-  <div class="container">
-    <div class="column-group">
-      <div class="docs-header column units-2">
-        <h1 class="docs-title">Ratchet</h1>
-        <p class="docs-subtitle">Prototype mobile apps with simple HTML, CSS, and JS components.</p>
-        <a data-ignore="push" href="http://maker.github.com/ratchet/ratchet.zip" class="button button-primary button-filled button-block" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0']);">Download Ratchet</a>
-      </div>
-    </div>
+<div class="container column-group">
+  <div class="column units-2">
+    <header class="docs-nav">
+      <a class="icon icon-list pull-right" href="/components"></a>
+      <h1 class="docs-title">Ratchet</h1>
+    </header>
   </div>
-</header>
+</div>
+
+<div class="docs-header-content">
+  <p class="docs-subtitle">Build mobile apps with simple HTML, CSS, and JS components.</p>
+  <a data-ignore="push" href="http://maker.github.com/ratchet/ratchet.zip" class="button button-filled button-block" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0']);">Download Ratchet</a>
+</div>
 
 <ul class="social">
   <li>
diff --git a/lib/sass/docs.scss b/lib/sass/docs.scss
index ed479bb..2f5b869 100644
--- a/lib/sass/docs.scss
+++ b/lib/sass/docs.scss
@@ -1,5 +1,6 @@
 @import "variables.scss";
 @import "mixins.scss";
+
 // Devices
 .platform-ios {
   @import "theme-ios.scss";
@@ -11,10 +12,14 @@
 //
 // Documentation
 // --------------------------------------------------
-
+html,
 body {
-  position: static !important; // Overrides the fixed positioning of body in Ratchet
-  font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
+  width: 100%;
+  height: 100%;
+}
+body {
+  position: relative !important; // Overrides the fixed positioning of body in Ratchet
+  font: 14px/1.5 "adelle-sans",sans-serif;
   color: #333;
   background-color: #fff;
   -webkit-font-smoothing: antialiased; // Fix for webkit rendering
@@ -25,66 +30,83 @@ body {
 // Jumbotron
 // --------------------------------------------------
 
-.docs-header-wrapper {
-  background-color: #fafafa;
-  @include hairline(single, #c8c7cc, 0);
+.docs-home {
+  background-image: linear-gradient(45deg, rgba(2,184,234,1) 0%,rgba(3,175,191,1) 50%,rgba(3,103,191,1) 100%);
+  background-repeat: no-repeat;
+}
+.docs-nav {
+  padding-top: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(255,255,255,.2);
 
   .icon {
-    position: absolute;
-    top: 15px;
-    right: 15px;
+    margin-top: 5px;
+    color: #fff;
+    opacity: .5;
+    cursor: pointer;
     @include transition(opacity .2s linear);
 
-    &:active {
-      opacity: .3;
+    &:hover {
+      opacity: .8;
     }
   }
 }
-.docs-header {
-  padding-top: 50px;
-  padding-bottom: 50px;
+.docs-nav,
+.docs-header-content {
   text-align: center;
-  @include animation-name(fadein);
-  @include animation-duration(2s);
+}
+.docs-header-content {
+  margin-top: 50px;
 
-  .docs-title {
-    margin: 0;
-    font-size: 40px;
-    font-weight: 300;
-  }
-
-  .docs-subtitle {
-    margin-top: 0;
-    margin-bottom: 20px;
-    color: #777;
-    font-size: 22px;
-    font-weight: 300;
-    line-height: 30px;
+  .button {
+    color: rgb(3,175,191);
+    border-color: #fff;
   }
 }
+.docs-title,
+.docs-subtitle {
+  color: #fff;
+}
+.docs-title {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 300;
+  text-transform: uppercase;
+  letter-spacing: 6px;
+}
+.docs-subtitle {
+  max-width: 750px;
+  margin: 0 auto 20px;
+  font-size: 24px;
+  font-weight: 300;
+  line-height: 34px;
+  opacity: .8;
+}
 
 
 // Overriding the button styles for the social
 // --------------------------------------------------
 
 .social {
+  display: none;
+  margin: 20px 0 20px;
   padding: 0;
   list-style: none;
   text-align: center;
-  @include animation-name(fadein);
-  @include animation-duration(2s);
 
   li {
     height: 20px;
-    padding-bottom: 25px;
     display: inline-block;
     vertical-align: top;
   }
-
   [class*="button"] { 
     padding: 0;
     border: 0;
   }
+  // Remove after button class changes.
+  iframe {
+    background-color: transparent;
+  }
 }
 
 
@@ -275,6 +297,9 @@ body {
 }
 
 .device {
+  font-family: $font-family-default;
+  font-size: $font-size-default;
+  line-height: $line-height-default;
   display: none;
 }
 
@@ -314,6 +339,29 @@ hr {
 // Tablet to desktop 
 // --------------------------------------------------
 @media screen and (min-width: 768px) {
+  // Jumbotron
+  .docs-header-content {
+    margin-top: 100px;
+    
+    .button {
+      max-width: 300px;
+      margin-right: auto;
+      margin-left: auto;
+    }
+  }
+  .docs-subtitle {
+    margin-bottom: 30px;
+    font-size: 40px;
+    line-height: 60px;
+  }
+
+  // Social
+  .social {
+    margin-top: 40px;
+    margin-bottom: 40px;
+  }
+
+  // Device
   .device {
     position: relative;
     top: 50px;
@@ -504,38 +552,3 @@ hr {
     margin-right: -30px;
   }
 }
-
-
-// Animations
-// --------------------------------------------------
-
-@-webkit-keyframes fadein {
-  0% {
-   opacity: 0;
-   -webkit-transform: scale(.9);
-  }
-  50% {
-   opacity: 0;
-   -webkit-transform: scale(.9);
-  }
-  100% {
-   opacity: 1;
-   -webkit-transform: scale(1);
-  }
-}
-
-// Only visible to Mozilla browsers. Sneaky huh?
-@-moz-keyframes shownotice {
-  0% {
-    height: 100%;
-    min-height: 30px;
-    padding: 20px 0;
-    opacity: 1;
-  }
-  100% {
-    height: 100%;
-    min-height: 30px;
-    padding: 20px 0;
-    opacity: 1;
-  }
-}
