diff --git a/docs/_layouts/page.html b/docs/_layouts/page.html
index 54197b84f..b9c12504f 100644
--- a/docs/_layouts/page.html
+++ b/docs/_layouts/page.html
@@ -2,14 +2,22 @@
 layout: default
 ---
 
+<div class="bd-pageheader">
+  <div class="container">
+    {% include ads.html %}
+    <h1 class="bd-title">{{ page.title }}</h1>
+    <p class="lead">
+      {{ page.lead }}
+    </p>
+  </div>
+</div>
+
 <div class="container">
   <div class="row">
     <div class="col-sm-3 col-sm-push-9 bd-sidebar">
       {% include nav-docs.html %}
     </div>
     <div class="col-sm-9 col-sm-pull-3 bd-content">
-      {% include ads.html %}
-      <h1 class="bd-title">{{ page.title }}</h1>
       {{ content }}
     </div>
   </div>
diff --git a/docs/assets/css/docs.min.css b/docs/assets/css/docs.min.css
index 6db8e9d84..d4e07886f 100644
--- a/docs/assets/css/docs.min.css
+++ b/docs/assets/css/docs.min.css
@@ -5,7 +5,7 @@
  * details, see http://creativecommons.org/licenses/by/3.0/.
  */
 .bd-docs {
-  padding-top: 5rem; }
+  padding-top: 3.65rem; }
 
 .bd-container {
   position: relative;
@@ -41,7 +41,23 @@
     .bd-container > table td:first-child > code {
       white-space: nowrap; }
 
-.bd-content > h2 {
+.bd-pageheader {
+  margin-bottom: 3rem;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  color: #cdbfe3;
+  background-color: #563d7c; }
+  .bd-pageheader h1 {
+    font-weight: normal;
+    color: #fff; }
+  @media (min-width: 34em) {
+    .bd-pageheader {
+      padding-top: 4rem;
+      padding-bottom: 4rem; }
+      .bd-pageheader .carbonad {
+        float: right; } }
+
+.bd-content > h2:not(:first-child) {
   margin-top: 3rem; }
 
 .bd-content > h3 {
diff --git a/docs/assets/css/docs.min.css.map b/docs/assets/css/docs.min.css.map
index afec3cc0f..60cc810cf 100644
Binary files a/docs/assets/css/docs.min.css.map and b/docs/assets/css/docs.min.css.map differ
diff --git a/docs/assets/scss/_layout.scss b/docs/assets/scss/_layout.scss
index 281acbc8b..049d0a888 100644
--- a/docs/assets/scss/_layout.scss
+++ b/docs/assets/scss/_layout.scss
@@ -1,6 +1,6 @@
 
 .bd-docs {
-  padding-top: 5rem;
+  padding-top: 3.65rem;
 }
 
 // Custom container
@@ -59,12 +59,34 @@
 }
 
 
+.bd-pageheader {
+  margin-bottom: 3rem;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  color: $bd-purple-light;
+  background-color: $bd-purple;
+
+  h1 {
+    font-weight: normal;
+    color: #fff;
+  }
+
+  @include media-breakpoint-up(sm) {
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+
+    .carbonad {
+      float: right;
+    }
+  }
+}
+
 //
 // Docs sections
 //
 
 .bd-content {
-  > h2 {
+  > h2:not(:first-child) {
     margin-top: 3rem;
   }
 
diff --git a/docs/getting-started/overview.md b/docs/getting-started/overview.md
index 6127f3873..07930d53b 100644
--- a/docs/getting-started/overview.md
+++ b/docs/getting-started/overview.md
@@ -1,9 +1,9 @@
 ---
 layout: page
 title: Getting started
+lead: Quickly add Bootstrap to your project via the Bootstrap CDN, graciously provided by the MaxCDN folks.
 ---
 
-Quickly add Bootstrap to your project via the [Bootstrap CDN](http://bootstrapcdn.com), graciously provided by the [MaxCDN](http://www.maxcdn.com/) folks.
 
 ## Include CSS and JS