diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 4cb54e2..1c6c2f1 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -38,8 +38,7 @@ body {
   background-image: url(../img/pattern.png);
   background-size: 30%;
   background-position: center center;
-  opacity: .035;
-  content: '';
+  opacity: .038;
 }
 
 .docs-header {
@@ -47,20 +46,28 @@ body {
   min-height: 620px;
 }
 
+.docs-masthead {
+  position: relative;
+  overflow: hidden;
+  padding-top: 15px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
 .docs-title {
   position: absolute;
-  top: 20px;
-  left: 20px;
+  top: 14px;
+  left: 50%;
+  margin-bottom: 0;
   color: #fff;
   font-size: 22px;
   font-weight: 100;
-  opacity: .4;
+  -webkit-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
 }
 
 .docs-nav {
-  position: absolute;
-  right: 20px;
-  top: 20px;
   color: #fff;
   cursor: pointer;
   -webkit-transition: opacity 0.2s linear;
@@ -72,21 +79,9 @@ body {
   opacity: .5;
 }
 
-.docs-logo {
-  width: 75px;
-  height: 75px;
-  margin: 0 auto 15px;
-  color: #fff;
-  font-size: 35px;
-  font-weight: 300;
-  line-height: 72px;
-  border: 1px solid #fff;
-  border-radius: 40px;
-}
-
 .docs-header-content {
   position: relative;
-  top: 40px;
+  top: 30px;
   text-align: center;
   padding: 50px 10px;
   -webkit-animation-name: fadeintext;
@@ -101,7 +96,7 @@ body {
   padding: 15px 60px 16px;
   font-size: 18px;
   color: rgba(255, 255, 255, 0.7);
-  border-color: rgba(255, 255, 255, 0.7);
+  border: 0;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   transition: all 0.2s linear;
@@ -117,7 +112,6 @@ body {
 .docs-header-content .btn-primary {
   margin-bottom: 0;
   color: #0a1855;
-  border-color: rgba(255, 255, 255, 0.85);
   background-color: rgba(255, 255, 255, 0.85);
 }
 .docs-header-content .btn-primary:hover {
@@ -132,20 +126,10 @@ body {
 .docs-subtitle {
   max-width: 750px;
   margin: 0 auto 20px;
-  font-size: 26px;
+  font-size: 28px;
   font-weight: 100;
   color: #fff;
-  line-height: 34px;
-}
-
-.docs-masthead {
-  position: relative;
-}
-.docs-masthead .docs-title {
-  left: 0;
-}
-.docs-masthead .docs-nav {
-  right: 0;
+  line-height: 38px;
 }
 
 .carbonad {
@@ -155,7 +139,7 @@ body {
   height: auto !important;
   padding: 15px !important;
   font-size: 13px !important;
-  line-height: 16px !important;
+  line-height: 18px !important;
   background: transparent !important;
   border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
   border-right: 0 !important;
@@ -181,7 +165,7 @@ body {
   height: auto !important;
   margin-left: 145px !important;
   color: rgba(255, 255, 255, 0.65) !important;
-  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+  font-family: "adelle-sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
 }
 
 .carbonad-text {
@@ -202,18 +186,19 @@ body {
 }
 
 .docs-sub-content {
-  padding-top: 100px;
-  padding-bottom: 100px;
+  padding-top: 55px;
+  padding-bottom: 65px;
   color: #fff;
 }
 .docs-sub-content .page-title,
 .docs-sub-content .page-description {
   margin-top: 0;
   margin-bottom: 0;
-  font-weight: 300;
+  font-weight: 100;
 }
 .docs-sub-content .page-title {
   font-size: 40px;
+  margin-bottom: 5px;
 }
 .docs-sub-content .page-description {
   color: #fff;
@@ -226,17 +211,6 @@ body {
   padding-bottom: 80px;
 }
 
-.section-header {
-  text-align: center;
-}
-.section-header:after {
-  display: block;
-  content: '';
-  width: 200px;
-  margin: 50px auto 80px;
-  border-bottom: 1px solid #eee;
-}
-
 .section-heading,
 .section-lead {
   margin-top: 0;
@@ -569,8 +543,15 @@ hr {
     min-height: 770px;
   }
 
+  .docs-title {
+    position: static;
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+
   .docs-header-content {
-    top: 37%;
+    top: 32%;
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
     transform: translateY(-50%);
@@ -586,6 +567,7 @@ hr {
   }
 
   .carbonad {
+    bottom: 130px !important;
     left: 50% !important;
     width: 330px !important;
     margin-left: -165px !important;
@@ -717,6 +699,8 @@ hr {
 .container {
   margin-left: auto;
   margin-right: auto;
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .column-group {
diff --git a/docs/components.html b/docs/components.html
index 6ee0513..a09e736 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -4,14 +4,17 @@ title: Components · Ratchet
 ---
 
 <div class="docs-sub-header">
+  <header class="docs-masthead">
+    <div class="container">
+      <div class="column units-2">
+        <a class="docs-nav icon icon-bars pull-right" href="/components" data-ignore="push"></a>
+        <h1 class="docs-title">Ratchet</h1>
+      </div>
+    </div>
+  </header>
   <div class="container">
     <div class="column-group">
       <div class="column units-2">
-        <header class="docs-masthead">  
-          <h1 class="docs-title">Ratchet</h1>
-          <a class="docs-nav icon icon-bars" href="/components" data-ignore="push"></a>
-        </header>
-        
         <div class="docs-sub-content">
           <h2 class="page-title">Components</h2>
           <p class="page-description">Design patterns that serve as basic building blocks</p>
diff --git a/docs/index.html b/docs/index.html
index a0bf88a..f9d218c 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -4,10 +4,15 @@ title: Ratchet
 ---
 
 <div class="docs-header">
-  <h1 class="docs-title">Ratchet</h1>
-  <a class="docs-nav icon icon-bars" href="/components" data-ignore="push"></a>
+  <header class="docs-masthead">
+    <div class="container">
+      <div class="column units-2">
+        <a class="docs-nav icon icon-bars pull-right" href="/components" data-ignore="push"></a>
+        <h1 class="docs-title">Ratchet</h1>
+      </div>
+    </div>
+  </header>
   <div class="docs-header-content">
-    <h2 class="docs-logo">R</h2>
     <p class="docs-subtitle">Build mobile apps with simple HTML&#8218; CSS&#8218; and JS components.</p>
     <a data-ignore="push" href="http://maker.github.com/ratchet/ratchet.zip" class="btn btn-primary" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0']);">Download Ratchet</a>
   </div>
@@ -20,7 +25,7 @@ title: Ratchet
       <iframe src="http://ghbtns.com/github-btn.html?user=maker&repo=ratchet&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
     </li>
     <li>
-      <a data-ignore="push" href="https://twitter.com/share" class="twitter-share-button" data-url="http://maker.github.com/ratchet/" data-text="Ratchet: Build mobile apps with simple HTML, CSS, and JS components." data-via="GoRatchet">Tweet</a>
+      <a data-ignore="push" href="https://twitter.com/share" class="twitter-share-button" data-url="http://goratchet.com" data-text="Ratchet &#8211; Build mobile apps with simple HTML, CSS, and JS components." data-via="GoRatchet">Tweet</a>
       <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
     </li>
     <li><a data-ignore="push" href="https://twitter.com/GoRatchet" class="twitter-follow-button" data-show-count="true">
diff --git a/sass/docs.scss b/sass/docs.scss
index 793d839..7b74d1e 100644
--- a/sass/docs.scss
+++ b/sass/docs.scss
@@ -36,27 +36,34 @@ body {
     background-image: url(../img/pattern.png);
     background-size: 30%;
     background-position: center center;
-    opacity: .035;
-    content: '';
+    opacity: .038;
+    // content: '';
   }
 }
 .docs-header {
   height: 100vh;
   min-height: 620px;
 }
+
+// Masthead
+.docs-masthead {
+  position: relative;
+  overflow: hidden;
+  padding-top: 15px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid rgba(255,255,255,.1);
+}
 .docs-title {
   position: absolute;
-  top: 20px;
-  left: 20px;
+  top: 14px;
+  left: 50%;
+  margin-bottom: 0;
   color: #fff;
   font-size: 22px;
   font-weight: 100;
-  opacity: .4;
+  @include transform(translateX(-50%));
 }
 .docs-nav {
-  position: absolute;
-  right: 20px;
-  top: 20px;
   color: #fff;
   cursor: pointer;
   @include transition(opacity .2s linear);
@@ -66,20 +73,9 @@ body {
     opacity: .5;
   }
 }
-.docs-logo {
-  width: 75px;
-  height: 75px;
-  margin: 0 auto 15px;
-  color: #fff;
-  font-size: 35px;
-  font-weight: 300;
-  line-height: 72px;
-  border: 1px solid #fff;
-  border-radius: 40px;
-}
 .docs-header-content {
   position: relative;
-  top: 40px;
+  top: 30px;
   text-align: center;
   padding: 50px 10px;
   @include animation-name(fadeintext);
@@ -90,7 +86,7 @@ body {
     padding: 15px 60px 16px;
     font-size: 18px;
     color: rgba(255,255,255,.7);
-    border-color: rgba(255,255,255,.7);
+    border: 0;
     @include transition(all .2s linear);
 
     &:hover {
@@ -105,7 +101,6 @@ body {
   .btn-primary {
     margin-bottom: 0;
     color: #0a1855;
-    border-color: rgba(255,255,255,.85);
     background-color: rgba(255,255,255,.85);
 
     &:hover {
@@ -121,20 +116,10 @@ body {
 .docs-subtitle {
   max-width: 750px;
   margin: 0 auto 20px;
-  font-size: 26px;
+  font-size: 28px;
   font-weight: 100;
   color: #fff;
-  line-height: 34px;
-}
-.docs-masthead {
-  position: relative;
-
-  .docs-title {
-    left: 0;
-  }
-  .docs-nav {
-    right: 0;
-  }
+  line-height: 38px;
 }
 
 // Ads
@@ -145,7 +130,7 @@ body {
   height: auto !important;
   padding: 15px !important;
   font-size: 13px !important;
-  line-height: 16px !important;
+  line-height: 18px !important;
   background: transparent !important;
   border-top: 1px solid rgba(255,255,255,.1) !important;
   border-right: 0 !important;
@@ -165,7 +150,7 @@ body {
   height: auto !important;
   margin-left: 145px !important;
   color: rgba(255,255,255,.65) !important;
-  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+  font-family: "adelle-sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
 }
 .carbonad-text {
   padding-top: 0 !important;
@@ -185,18 +170,19 @@ body {
 // --------------------------------------------------
 
 .docs-sub-content {
-  padding-top: 100px;
-  padding-bottom: 100px;
+  padding-top: 55px; // Visually centers the content.
+  padding-bottom: 65px; // Visually centers the content.
   color: #fff;
 
   .page-title,
   .page-description {
     margin-top: 0;
     margin-bottom: 0;
-    font-weight: 300;
+    font-weight: 100;
   }
   .page-title {
     font-size: 40px;
+    margin-bottom: 5px;
   }
   .page-description {
     color: #fff;
@@ -212,17 +198,6 @@ body {
   padding-top: 80px;
   padding-bottom: 80px;
 }
-.section-header {
-  text-align: center;
-
-  &:after {
-    display: block;
-    content: '';
-    width: 200px;
-    margin: 50px auto 80px;
-    border-bottom: 1px solid #eee;
-  }
-}
 .section-heading,
 .section-lead {
   margin-top: 0;
@@ -588,8 +563,12 @@ hr {
   .docs-header {
     min-height: 770px;
   }
+  .docs-title {
+    position: static;
+    @include transform(translateX(0));
+  }
   .docs-header-content {
-    top: 37%;
+    top: 32%;
     @include transform(translateY(-50%));
     
     .btn {
@@ -604,6 +583,7 @@ hr {
 
   // Ads
   .carbonad {
+    bottom: 130px !important;
     left: 50% !important;
     width: 330px !important;
     margin-left: -165px !important;
@@ -740,6 +720,8 @@ hr {
 .container {
   margin-left: auto;
   margin-right: auto;
+  padding-left: 0;
+  padding-right: 0;
 }
 .column-group {
   width: auto;