Move to new branding

This JUST moves over to the new branding. Once we get this in, I can work on making the sidebar links and splitting out the API into its own section.
2017-03-30 18:35:47 -04:00 · 2017-03-30 18:35:47 -04:00 · 06dbeefaad
parent 2dc74e8683
commit 06dbeefaad
107 changed files with 1918 additions and 3687 deletions
--- a/website/Gemfile
+++ b/website/Gemfile
@ -1,3 +1,3 @@
 source "https://rubygems.org"

-gem "middleman-hashicorp", "0.3.13"
+gem "middleman-hashicorp", "0.3.22"
--- a/website/Gemfile.lock
+++ b/website/Gemfile.lock
@ -6,7 +6,7 @@ GEM
      minitest (~> 5.1)
      thread_safe (~> 0.3, >= 0.3.4)
      tzinfo (~> 1.1)
-    autoprefixer-rails (6.7.6)
+    autoprefixer-rails (6.7.7.1)
      execjs
    bootstrap-sass (3.3.7)
      autoprefixer-rails (>= 5.2.1)
@ -77,7 +77,7 @@ GEM
      rack (>= 1.4.5, < 2.0)
      thor (>= 0.15.2, < 2.0)
      tilt (~> 1.4.1, < 2.0)
-    middleman-hashicorp (0.3.13)
+    middleman-hashicorp (0.3.22)
      bootstrap-sass (~> 3.3)
      builder (~> 3.2)
      middleman (~> 3.4)
@ -103,7 +103,7 @@ GEM
    mini_portile2 (2.1.0)
    minitest (5.10.1)
    multi_json (1.12.1)
-    nokogiri (1.7.0.1)
+    nokogiri (1.7.1)
      mini_portile2 (~> 2.1.0)
    padrino-helpers (0.12.8.1)
      i18n (~> 0.6, >= 0.6.7)
@ -138,7 +138,7 @@ GEM
    turbolinks (5.0.1)
      turbolinks-source (~> 5)
    turbolinks-source (5.0.0)
-    tzinfo (1.2.2)
+    tzinfo (1.2.3)
      thread_safe (~> 0.1)
    uber (0.0.15)
    uglifier (2.7.2)
@ -151,7 +151,7 @@ PLATFORMS
  ruby

 DEPENDENCIES
-  middleman-hashicorp (= 0.3.13)
+  middleman-hashicorp (= 0.3.22)

 BUNDLED WITH
   1.14.6
--- a/website/Makefile
+++ b/website/Makefile
@ -1,4 +1,4 @@
-VERSION?="0.3.13"
+VERSION?="0.3.22"

 website:
 	@echo "==> Starting website in Docker..."
--- a/website/config.rb
+++ b/website/config.rb
@ -11,6 +11,33 @@ activate :hashicorp do |h|
 end

 helpers do
+  # Get the title for the page.
+  #
+  # @param [Middleman::Page] page
+  #
+  # @return [String]
+  def title_for(page)
+    if page && page.data.page_title
+      return "#{page.data.page_title} - Consul by HashiCorp"
+    end
+
+     "Consul by HashiCorp"
+   end
+
+  # Get the description for the page
+  #
+  # @param [Middleman::Page] page
+  #
+  # @return [String]
+  def description_for(page)
+    description = (page.data.description || "")
+      .gsub('"', '')
+      .gsub(/\n+/, ' ')
+      .squeeze(' ')
+
+    return escape_html(description)
+  end
+
  # This helps by setting the "active" class for sidebar nav elements
  # if the YAML frontmatter matches the expected value.
  def sidebar_current(expected)
@ -22,27 +49,47 @@ helpers do
    end
  end

-  # Get the title for the page.
-  #
-  # @param [Middleman::Page] page
-  #
+  # Returns the id for this page.
  # @return [String]
-  def title_for(page)
-    if page && page.data.page_title
-      return "#{page.data.page_title} - Consul by HashiCorp"
+  def body_id_for(page)
+    if !(name = page.data.sidebar_current).blank?
+      return "page-#{name.strip}"
+    end
+    if page.url == "/" || page.url == "/index.html"
+      return "page-home"
+    end
+    if !(title = page.data.page_title).blank?
+      return title
+        .downcase
+        .gsub('"', '')
+        .gsub(/[^\w]+/, '-')
+        .gsub(/_+/, '-')
+        .squeeze('-')
+        .squeeze(' ')
+    end
+    return ""
+  end
+
+  # Returns the list of classes for this page.
+  # @return [String]
+  def body_classes_for(page)
+    classes = []
+
+    if !(layout = page.data.layout).blank?
+      classes << "layout-#{page.data.layout}"
    end

-    "Consul by HashiCorp"
-  end
+    if !(title = page.data.page_title).blank?
+      title = title
+        .downcase
+        .gsub('"', '')
+        .gsub(/[^\w]+/, '-')
+        .gsub(/_+/, '-')
+        .squeeze('-')
+        .squeeze(' ')
+      classes << "page-#{title}"
+    end

-  # Get the description for the page
-  #
-  # @param [Middleman::Page] page
-  #
-  # @return [String]
-  def description_for(page)
-    description = page.data.description || ""
-    description = description.gsub(/\n+/, " ")
-    return escape_html(description)
+    return classes.join(" ")
  end
 end
--- a/website/packer.json
+++ b/website/packer.json
@ -8,7 +8,7 @@
  "builders": [
    {
      "type": "docker",
-      "image": "hashicorp/middleman-hashicorp:0.3.13",
+      "image": "hashicorp/middleman-hashicorp:0.3.22",
      "discard": "true",
      "run_command": ["-d", "-i", "-t", "{{ .Image }}", "/bin/sh"]
    }
--- a/website/source/404.html.erb
+++ b/website/source/404.html.erb
@ -1,5 +0,0 @@
---
-noindex: true
---
-
-<h2>Page Not Found</h2>
--- a/website/source/404.html.md
+++ b/website/source/404.html.md
@ -0,0 +1,14 @@
+---
+layout: "inner"
+page_title: "Not Found"
+noindex: true
+description: |-
+  Page not found!
+---
+
+# Page Not Found
+
+Sorry, the page you tried to visit does not exist. This could be our fault,
+and if so we will fix that up right away.
+
+Please go back, or go back to get back on track.
--- a/website/source/android-manifest.json.erb
+++ b/website/source/android-manifest.json.erb
@ -0,0 +1,18 @@
+{
+  "name": "HashiCorp Consul",
+  "icons": [
+    {
+      "src": "<%= image_path('favicons/android-chrome-192x192.png') %>",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "<%= image_path('favicons/android-chrome-512x512.png') %>",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}
--- a/website/source/assets/images/atlas_web_ui.png
+++ b/website/source/assets/images/atlas_web_ui.png
--- a/website/source/assets/images/consul-footer-logo.png
+++ b/website/source/assets/images/consul-footer-logo.png
--- a/website/source/assets/images/consul-footer-logo@2x.png
+++ b/website/source/assets/images/consul-footer-logo@2x.png
--- a/website/source/assets/images/consul-header-lockup.png
+++ b/website/source/assets/images/consul-header-lockup.png
--- a/website/source/assets/images/consul-header-lockup@2x.png
+++ b/website/source/assets/images/consul-header-lockup@2x.png
--- a/website/source/assets/images/consul-hero-logo.png
+++ b/website/source/assets/images/consul-hero-logo.png
--- a/website/source/assets/images/consul-hero-logo@2x.png
+++ b/website/source/assets/images/consul-hero-logo@2x.png
--- a/website/source/assets/images/favicon.png
+++ b/website/source/assets/images/favicon.png
--- a/website/source/assets/images/favicons/android-chrome-192x192.png
+++ b/website/source/assets/images/favicons/android-chrome-192x192.png
--- a/website/source/assets/images/favicons/android-chrome-512x512.png
+++ b/website/source/assets/images/favicons/android-chrome-512x512.png
--- a/website/source/assets/images/favicons/apple-touch-icon.png
+++ b/website/source/assets/images/favicons/apple-touch-icon.png
--- a/website/source/assets/images/favicons/favicon-16x16.png
+++ b/website/source/assets/images/favicons/favicon-16x16.png
--- a/website/source/assets/images/favicons/favicon-32x32.png
+++ b/website/source/assets/images/favicons/favicon-32x32.png
--- a/website/source/assets/images/favicons/favicon.ico
+++ b/website/source/assets/images/favicons/favicon.ico
--- a/website/source/assets/images/favicons/mstile-150x150.png
+++ b/website/source/assets/images/favicons/mstile-150x150.png
--- a/website/source/assets/images/favicons/safari-pinned-tab.svg
+++ b/website/source/assets/images/favicons/safari-pinned-tab.svg
@ -0,0 +1,61 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="16.000000pt" height="16.000000pt" viewBox="0 0 16.000000 16.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,16.000000) scale(0.003030,-0.003030)"
+fill="#000000" stroke="none">
+<path d="M2457 5024 c-1 -1 -40 -5 -87 -8 -47 -3 -94 -8 -105 -10 -11 -2 -42
+-7 -70 -10 -27 -4 -57 -9 -65 -11 -8 -2 -26 -6 -40 -9 -55 -9 -198 -46 -240
+-61 -25 -9 -52 -18 -60 -20 -93 -21 -379 -160 -514 -249 -55 -36 -103 -66
+-107 -66 -4 0 -9 -3 -11 -7 -1 -5 -37 -35 -78 -67 -100 -80 -239 -212 -307
+-293 -10 -12 -26 -31 -36 -43 -158 -188 -314 -456 -399 -684 -31 -82 -85 -261
+-94 -306 -2 -14 -9 -48 -15 -76 -19 -95 -18 -88 -36 -269 -12 -121 -6 -413 11
+-505 3 -14 7 -42 10 -62 14 -93 19 -117 37 -188 11 -41 22 -83 24 -93 17 -73
+92 -270 148 -387 228 -480 596 -855 1069 -1091 83 -42 135 -66 158 -74 3 -1
+14 -5 25 -10 57 -24 122 -47 136 -50 9 -2 38 -11 65 -20 56 -19 245 -61 319
+-71 28 -3 58 -8 68 -10 139 -26 479 -20 667 11 14 3 40 7 59 10 18 3 52 10 75
+16 22 6 50 13 61 15 44 8 112 27 142 40 17 8 37 14 43 14 7 0 54 16 104 36
+196 79 367 173 548 302 l48 34 -62 81 c-34 45 -66 83 -70 85 -4 2 -8 8 -8 12
+0 11 -139 194 -150 198 -7 3 -69 -39 -117 -78 -7 -6 -15 -10 -19 -10 -4 0 -15
+-6 -23 -14 -30 -27 -318 -168 -351 -171 -3 -1 -34 -10 -70 -22 -120 -40 -205
+-58 -379 -79 -112 -14 -364 -8 -486 12 -16 2 -39 6 -50 8 -11 2 -33 6 -50 10
+-16 3 -39 8 -50 10 -11 2 -40 10 -65 17 -25 7 -51 13 -57 15 -15 3 -144 51
+-193 73 -19 8 -37 15 -40 16 -14 3 -143 73 -200 108 -349 217 -605 522 -773
+922 -40 94 -86 264 -112 410 -30 173 -23 472 16 665 102 507 408 951 851 1233
+111 70 359 187 399 187 8 0 19 3 23 8 4 4 12 8 17 8 5 1 10 2 12 4 5 4 184 47
+227 54 19 3 46 8 60 11 105 21 409 22 530 1 14 -3 43 -7 65 -11 64 -9 201 -43
+240 -59 19 -8 35 -13 35 -11 0 2 44 -14 97 -36 125 -51 266 -126 372 -199 l85
+-58 104 136 c138 182 144 189 169 219 l22 26 -37 30 c-20 16 -46 34 -57 39
+-11 6 -22 14 -25 18 -3 3 -23 17 -45 30 -22 13 -42 26 -45 29 -10 12 -224 121
+-310 159 -59 26 -283 102 -318 108 -15 3 -40 9 -57 14 -37 11 -184 37 -245 44
+-146 15 -196 19 -298 20 -62 1 -114 1 -115 0z"/>
+<path d="M4476 3999 c-99 -23 -173 -116 -177 -224 -5 -127 109 -240 236 -236
+96 4 163 46 206 130 89 173 -72 373 -265 330z"/>
+<path d="M4808 3267 c-27 -5 -48 -13 -48 -18 0 -5 -6 -9 -14 -9 -24 0 -94 -86
+-106 -131 -13 -46 -9 -118 8 -160 17 -41 71 -98 116 -121 44 -23 133 -28 176
+-11 14 6 28 10 32 9 14 -2 80 70 100 109 15 28 21 58 20 100 -1 86 -2 89 -41
+141 -59 79 -147 111 -243 91z"/>
+<path d="M4198 3265 c-2 -2 -19 -5 -38 -7 -197 -23 -274 -269 -127 -409 44
+-43 92 -61 159 -61 114 0 206 73 229 182 28 133 -47 252 -183 288 -20 6 -38 9
+-40 7z"/>
+<path d="M2479 3156 c-2 -2 -21 -6 -43 -9 -21 -3 -73 -22 -115 -43 -177 -87
+-284 -267 -276 -466 4 -103 7 -120 34 -187 109 -272 437 -393 703 -260 171 85
+281 260 280 447 -1 143 -32 231 -122 348 -24 31 -112 99 -150 117 -47 21 -90
+38 -115 44 -26 6 -191 14 -196 9z"/>
+<path d="M3500 2882 c-125 -41 -194 -134 -185 -251 15 -199 255 -293 400 -156
+91 86 99 212 20 327 -17 24 -78 65 -110 73 -38 10 -105 14 -125 7z"/>
+<path d="M4781 2477 c-49 -16 -124 -95 -140 -147 -26 -87 -4 -175 59 -239 49
+-48 96 -66 172 -65 59 0 73 5 116 33 72 50 117 132 114 209 -3 74 -66 164
+-142 201 -42 20 -131 24 -179 8z"/>
+<path d="M4130 2473 c-120 -44 -182 -130 -175 -244 3 -61 26 -109 72 -153 122
+-118 318 -72 381 89 21 53 22 120 4 166 -16 41 -71 98 -115 121 -39 20 -137
+32 -167 21z"/>
+<path d="M4451 1729 c-46 -14 -127 -97 -140 -145 -46 -167 72 -320 238 -308
+161 12 263 186 195 330 -20 42 -82 103 -121 119 -36 15 -128 17 -172 4z"/>
+</g>
+</svg>
--- a/website/source/assets/images/feature-config.png
+++ b/website/source/assets/images/feature-config.png
--- a/website/source/assets/images/feature-config.svg
+++ b/website/source/assets/images/feature-config.svg
@ -0,0 +1,17 @@
+<svg viewBox="0 0 130 170" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <rect id="path-1" x="0" y="0" width="130" height="170" rx="7"></rect>
+    <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="130" height="170" fill="white">
+      <use xlink:href="#path-1"></use>
+    </mask>
+  </defs>
+  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="Group">
+      <use id="Rectangle-4" stroke="#FFFFFF" mask="url(#mask-2)" stroke-width="10" xlink:href="#path-1"></use>
+      <rect id="Rectangle" fill="#FFFFFF" x="22" y="22" width="85" height="8"></rect>
+      <rect id="Rectangle" fill="#FFFFFF" x="22" y="39" width="85" height="8"></rect>
+      <rect id="Rectangle" fill="#FFFFFF" x="22" y="56" width="85" height="8"></rect>
+      <rect id="Rectangle" fill="#FFFFFF" x="22" y="73" width="85" height="8"></rect>
+    </g>
+  </g>
+</svg>
--- a/website/source/assets/images/feature-config@2x.png
+++ b/website/source/assets/images/feature-config@2x.png
--- a/website/source/assets/images/feature-discovery.png
+++ b/website/source/assets/images/feature-discovery.png
--- a/website/source/assets/images/feature-discovery.svg
+++ b/website/source/assets/images/feature-discovery.svg
@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62 60">
+  <g fill="none" fill-rule="evenodd">
+    <path stroke="#FFF" stroke-width=".5" d="M58.898 35.016h-8.53l-7.978-5L50.516 25h8.19l.192 10.017zm-8.526.03l4.31 9.086-4.31-9.087zm.144-10.07l4.167-9.26-4.167 9.26zm4.175-9.26l4.087 9.347-4.084-9.348zm-.074 28.22l4.373-8.778-4.374 8.778zm-12.28-13.884h-12.23 12.23z" opacity=".7"/>
+    <g fill="#FFF">
+      <path d="M29.9 36.3c-3.6 0-6.4-2.8-6.4-6.4 0-3.6 2.8-6.4 6.4-6.4 3.6 0 6.4 2.8 6.4 6.4 0 3.6-2.8 6.4-6.4 6.4m12.5-3.4c-1.6 0-3-1.3-3-3 0-1.6 1.3-3 3-3 1.6 0 3 1.3 3 3s-1.4 3-3 3m10.8 2.8c-.4 1.6-2 2.5-3.6 2.1-1.6-.4-2.5-2-2.1-3.6.4-1.6 2-2.5 3.6-2.1 1.5.4 2.5 1.8 2.2 3.4 0 0 0 .1-.1.2m-2.1-7.6c-1.6.4-3.2-.6-3.6-2.2-.4-1.6.6-3.2 2.2-3.6 1.6-.4 3.2.6 3.6 2.2.1.4.1.8 0 1.2-.1 1.1-.9 2.1-2.2 2.4m10.6 7.2c-.3 1.6-1.8 2.7-3.4 2.4-1.6-.3-2.7-1.8-2.4-3.4.3-1.6 1.8-2.7 3.4-2.4 1.5.3 2.6 1.7 2.5 3.2-.1.1-.1.1-.1.2m-2.4-7.4c-1.6.3-3.1-.8-3.4-2.4-.3-1.6.8-3.1 2.4-3.4 1.6-.3 3.1.8 3.4 2.4 0 .3.1.5 0 .8-.1 1.3-1.1 2.4-2.4 2.6m-6.1 18.8c-1.4-.8-1.9-2.6-1.1-4 .8-1.4 2.6-1.9 4-1.1 1 .6 1.6 1.7 1.5 2.8-.1.4-.2.8-.4 1.2-.8 1.4-2.6 1.9-4 1.1zm2.9-28.3c-1.4.8-3.2.3-4-1.1-.8-1.4-.3-3.2 1.1-4 1.4-.8 3.2-.3 4 1.1.3.6.4 1.1.4 1.7-.1.9-.6 1.8-1.5 2.3"/>
+      <path fill-rule="nonzero" d="M30 59.8c-8 0-15.4-3.1-21.1-8.7C3.4 45.4.3 37.9.3 30 .3 22 3.4 14.6 9 8.9 14.6 3.3 22.1.2 30 .2c6.6 0 12.9 2.1 18.1 6.1l-3.7 4.8C40.2 7.9 35.2 6.2 30 6.2c-6.3 0-12.3 2.5-16.8 7S6.3 23.6 6.3 30c0 6.3 2.5 12.3 7 16.8s10.4 6.9 16.8 6.9c5.3 0 10.3-1.7 14.4-4.9l3.6 4.8c-5.2 4-11.5 6.2-18.1 6.2z"/>
+    </g>
+  </g>
+</svg>
--- a/website/source/assets/images/feature-discovery@2x.png
+++ b/website/source/assets/images/feature-discovery@2x.png
--- a/website/source/assets/images/feature-health.png
+++ b/website/source/assets/images/feature-health.png
--- a/website/source/assets/images/feature-health.svg
+++ b/website/source/assets/images/feature-health.svg
@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 124 178" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <rect id="a" width="81" height="156" x="21" y="11" rx="4"/>
+    <mask id="b" width="81" height="156" x="0" y="0" fill="#fff">
+      <use xlink:href="#a"/>
+    </mask>
+  </defs>
+  <g fill="none" fill-rule="evenodd">
+    <g fill="#FFF" opacity=".33">
+      <path d="M60.844 45.78c-2.15 0-3.82-1.68-3.82-3.84s1.67-3.84 3.82-3.84c2.148 0 3.82 1.68 3.82 3.84s-1.672 3.84-3.82 3.84m7.46-2.04c-.956 0-1.79-.78-1.79-1.8 0-.96.775-1.8 1.79-1.8.954 0 1.79.78 1.79 1.8s-.836 1.8-1.79 1.8m6.444 1.68c-.238.96-1.193 1.5-2.148 1.26-.955-.24-1.492-1.2-1.253-2.16.238-.96 1.193-1.5 2.148-1.26.895.24 1.492 1.08 1.313 2.04 0 0 0 .06-.06.12m-1.253-4.56c-.955.24-1.91-.36-2.148-1.32-.24-.96.358-1.92 1.313-2.16.955-.24 1.91.36 2.148 1.32.06.24.06.48 0 .72-.06.66-.537 1.26-1.313 1.44m6.326 4.32c-.17.96-1.07 1.62-2.02 1.44-.953-.18-1.61-1.08-1.43-2.04.18-.96 1.075-1.62 2.03-1.44.895.18 1.55 1.02 1.49 1.92-.06.06-.06.06-.06.12m-1.43-4.44c-.955.18-1.85-.48-2.03-1.44-.18-.96.478-1.86 1.433-2.04.955-.18 1.85.48 2.03 1.44 0 .18.06.3 0 .48-.06.78-.657 1.44-1.433 1.56m-3.65 11.28c-.835-.48-1.133-1.56-.656-2.4.477-.84 1.552-1.14 2.387-.66.6.36.96 1.02.9 1.68-.06.24-.12.48-.24.72-.474.84-1.55 1.14-2.384.66zm1.73-16.98c-.834.48-1.91.18-2.386-.66-.477-.84-.18-1.92.656-2.4.836-.48 1.91-.18 2.387.66.18.36.24.66.24 1.02-.06.54-.36 1.08-.896 1.38"/>
+      <path fill-rule="nonzero" d="M60.903 59.88c-4.774 0-9.19-1.86-12.592-5.22-3.28-3.42-5.13-7.92-5.13-12.66 0-4.8 1.85-9.24 5.19-12.66 3.35-3.36 7.82-5.22 12.54-5.22 3.94 0 7.7 1.26 10.8 3.66l-2.21 2.88c-2.503-1.92-5.49-2.94-8.59-2.94-3.76 0-7.34 1.5-10.026 4.2S46.76 38.16 46.76 42c0 3.78 1.493 7.38 4.178 10.08 2.686 2.7 6.207 4.14 10.026 4.14 3.163 0 6.147-1.02 8.593-2.94l2.15 2.88c-3.105 2.4-6.865 3.72-10.804 3.72z"/>
+    </g>
+    <g fill="#FFF" opacity=".66">
+      <path d="M60.844 92.78c-2.15 0-3.82-1.68-3.82-3.84s1.67-3.84 3.82-3.84c2.148 0 3.82 1.68 3.82 3.84s-1.672 3.84-3.82 3.84m7.46-2.04c-.956 0-1.79-.78-1.79-1.8 0-.96.775-1.8 1.79-1.8.954 0 1.79.78 1.79 1.8s-.836 1.8-1.79 1.8m6.444 1.68c-.238.96-1.193 1.5-2.148 1.26-.955-.24-1.492-1.2-1.253-2.16.238-.96 1.193-1.5 2.148-1.26.895.24 1.492 1.08 1.313 2.04 0 0 0 .06-.06.12m-1.253-4.56c-.955.24-1.91-.36-2.148-1.32-.24-.96.358-1.92 1.313-2.16.955-.24 1.91.36 2.148 1.32.06.24.06.48 0 .72-.06.66-.537 1.26-1.313 1.44m6.326 4.32c-.17.96-1.07 1.62-2.02 1.44-.953-.18-1.61-1.08-1.43-2.04.18-.96 1.075-1.62 2.03-1.44.895.18 1.55 1.02 1.49 1.92-.06.06-.06.06-.06.12m-1.43-4.44c-.955.18-1.85-.48-2.03-1.44-.18-.96.478-1.86 1.433-2.04.955-.18 1.85.48 2.03 1.44 0 .18.06.3 0 .48-.06.78-.657 1.44-1.433 1.56m-3.65 11.28c-.835-.48-1.133-1.56-.656-2.4.477-.84 1.552-1.14 2.387-.66.6.36.96 1.02.9 1.68-.06.24-.12.48-.24.72-.474.84-1.55 1.14-2.384.66zm1.73-16.98c-.834.48-1.91.18-2.386-.66-.477-.84-.18-1.92.656-2.4.836-.48 1.91-.18 2.387.66.18.36.24.66.24 1.02-.06.54-.36 1.08-.896 1.38"/>
+      <path fill-rule="nonzero" d="M60.903 106.88c-4.774 0-9.19-1.86-12.592-5.22-3.28-3.42-5.13-7.92-5.13-12.66 0-4.8 1.85-9.24 5.19-12.66 3.35-3.36 7.82-5.22 12.54-5.22 3.94 0 7.7 1.26 10.8 3.66l-2.21 2.88c-2.503-1.92-5.49-2.94-8.59-2.94-3.76 0-7.34 1.5-10.026 4.2S46.76 85.16 46.76 89c0 3.78 1.493 7.38 4.178 10.08 2.686 2.7 6.207 4.14 10.026 4.14 3.163 0 6.147-1.02 8.593-2.94l2.15 2.88c-3.105 2.4-6.865 3.72-10.804 3.72z"/>
+    </g>
+    <g fill="#FFF">
+      <path d="M60.844 139.78c-2.15 0-3.82-1.68-3.82-3.84s1.67-3.84 3.82-3.84c2.148 0 3.82 1.68 3.82 3.84s-1.672 3.84-3.82 3.84m7.46-2.04c-.956 0-1.79-.78-1.79-1.8 0-.96.775-1.8 1.79-1.8.954 0 1.79.78 1.79 1.8s-.836 1.8-1.79 1.8m6.444 1.68c-.238.96-1.193 1.5-2.148 1.26-.955-.24-1.492-1.2-1.253-2.16.238-.96 1.193-1.5 2.148-1.26.895.24 1.492 1.08 1.313 2.04 0 0 0 .06-.06.12m-1.253-4.56c-.955.24-1.91-.36-2.148-1.32-.24-.96.358-1.92 1.313-2.16.955-.24 1.91.36 2.148 1.32.06.24.06.48 0 .72-.06.66-.537 1.26-1.313 1.44m6.326 4.32c-.17.96-1.07 1.62-2.02 1.44-.953-.18-1.61-1.08-1.43-2.04.18-.96 1.075-1.62 2.03-1.44.895.18 1.55 1.02 1.49 1.92-.06.06-.06.06-.06.12m-1.43-4.44c-.955.18-1.85-.48-2.03-1.44-.18-.96.478-1.86 1.433-2.04.955-.18 1.85.48 2.03 1.44 0 .18.06.3 0 .48-.06.78-.657 1.44-1.433 1.56m-3.643 11.28c-.834-.48-1.132-1.56-.655-2.4.475-.84 1.55-1.14 2.385-.66.596.36.954 1.02.894 1.68-.06.24-.12.48-.24.72-.48.84-1.55 1.14-2.39.66zm1.73-16.98c-.833.48-1.91.18-2.385-.66-.48-.84-.18-1.92.654-2.4.837-.48 1.91-.18 2.388.66.18.36.24.66.24 1.02-.06.54-.36 1.08-.895 1.38"/>
+      <path fill-rule="nonzero" d="M60.903 153.88c-4.774 0-9.19-1.86-12.592-5.22-3.28-3.42-5.13-7.92-5.13-12.66 0-4.8 1.85-9.24 5.19-12.66 3.35-3.36 7.82-5.22 12.54-5.22 3.94 0 7.7 1.26 10.8 3.66l-2.21 2.88c-2.502-1.92-5.49-2.94-8.59-2.94-3.76 0-7.34 1.5-10.025 4.2s-4.12 6.24-4.12 10.08c0 3.78 1.494 7.38 4.18 10.08 2.685 2.7 6.206 4.14 10.025 4.14 3.162 0 6.146-1.02 8.592-2.94l2.15 2.88c-3.104 2.4-6.864 3.72-10.803 3.72z"/>
+    </g>
+    <use stroke="#FFF" stroke-width="6" mask="url(#b)" xlink:href="#a"/>
+    <path fill="#FFF" d="M48 11.31h27.14S74.545 0 61.95 0C49.352 0 48 11.31 48 11.31zM46 167h31v11H46zM21.454 56.943h-7.842V42.476S.516 30.036.352 29.216c-.165-.82.084-1.182.45-1.548C1.17 27.3 2.05 27 2.567 27h18.887v29.943zm0 47h-7.842V89.476S.516 77.036.352 76.216c-.165-.82.084-1.182.45-1.548C1.17 74.3 2.05 74 2.567 74h18.887v29.943zm0 47h-7.842v-14.467S.516 124.036.352 123.216c-.165-.82.084-1.182.45-1.548C1.17 121.3 2.05 121 2.567 121h18.887v29.943zm80.046 0h7.84v-14.467s13.098-12.44 13.262-13.26c.164-.82-.084-1.182-.45-1.548-.367-.367-1.248-.668-1.765-.668H101.5v29.943zm0-47h7.84V89.476s13.098-12.44 13.262-13.26c.164-.82-.084-1.182-.45-1.548-.367-.367-1.248-.668-1.765-.668H101.5v29.943zm0-47h7.84V42.476s13.098-12.44 13.262-13.26c.164-.82-.084-1.182-.45-1.548-.367-.367-1.248-.668-1.765-.668H101.5v29.943z"/>
+  </g>
+</svg>
--- a/website/source/assets/images/feature-health@2x.png
+++ b/website/source/assets/images/feature-health@2x.png
--- a/website/source/assets/images/feature-multi.png
+++ b/website/source/assets/images/feature-multi.png
--- a/website/source/assets/images/feature-multi.svg
+++ b/website/source/assets/images/feature-multi.svg
@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 192">
+  <g fill="#FFF" fill-rule="evenodd">
+    <g fill-rule="nonzero">
+      <path fill-opacity=".7" d="M168.764 26.55c-2.578 0-4.664-2.086-4.664-4.664 0-2.577 2.086-4.663 4.664-4.663 2.577 0 4.663 2.086 4.663 4.663 0 2.578-2.086 4.664-4.663 4.664"/>
+      <path d="M177.845 24.055c-1.186 0-2.168-.94-2.168-2.17 0-1.185.94-2.167 2.168-2.167 1.187 0 2.17.94 2.17 2.168 0 1.187-.983 2.17-2.17 2.17m7.855 2.004c-.286 1.145-1.473 1.84-2.618 1.554-1.146-.287-1.84-1.473-1.555-2.62.287-1.144 1.473-1.84 2.618-1.553 1.105.29 1.8 1.35 1.596 2.46 0 .08 0 .13-.04.17m-1.51-5.52c-1.14.29-2.33-.45-2.57-1.59-.24-1.14.45-2.33 1.6-2.57 1.15-.29 2.33.45 2.58 1.596.04.286.09.573.04.86-.12.82-.73 1.515-1.63 1.72m7.65 5.32c-.2 1.184-1.31 1.96-2.49 1.76-1.186-.21-1.964-1.31-1.76-2.5.204-1.185 1.31-1.96 2.495-1.76 1.107.207 1.884 1.19 1.8 2.293 0 .04-.04.12-.04.202m-1.76-5.4c-1.185.2-2.29-.616-2.453-1.76-.205-1.19.61-2.29 1.76-2.456 1.185-.206 2.29.613 2.45 1.76.04.203.04.37.04.57-.08.9-.814 1.72-1.8 1.88m-1.47 12.846c-.612 1.022-1.88 1.39-2.944.82-1.022-.615-1.39-1.88-.82-2.947.617-1.02 1.885-1.39 2.948-.82.74.41 1.15 1.23 1.068 2.048 0 .33-.08.62-.244.9m-.776-19.8c-1.02.578-2.33.21-2.943-.813-.573-1.024-.205-2.333.818-2.947 1.024-.57 2.333-.2 2.946.82.25.41.33.82.25 1.23-.04.736-.45 1.39-1.06 1.72"/>
+      <path d="M168.845 43.568c-5.81 0-11.21-2.25-15.3-6.34-4.09-4.092-6.34-9.533-6.34-15.3 0-5.77 2.25-11.21 6.34-15.3 4.09-4.092 9.532-6.342 15.3-6.342 4.787 0 9.328 1.555 13.132 4.46l-2.66 3.436c-3.026-2.332-6.667-3.56-10.472-3.56-4.622 0-8.96 1.8-12.23 5.073-3.274 3.273-5.033 7.61-5.033 12.232 0 4.623 1.8 8.96 5.073 12.232 3.272 3.27 7.61 5.03 12.23 5.03 3.847 0 7.447-1.23 10.474-3.56l2.65 3.43c-3.85 2.98-8.39 4.5-13.18 4.5z"/>
+    </g>
+    <path d="M73.995 168.437C75.93 163.844 77 158.797 77 153.5c0-21.263-17.237-38.5-38.5-38.5-4.044 0-7.943.624-11.605 1.78C24.365 108.805 23 100.312 23 91.5 23 45.384 60.384 8 106.5 8S190 45.384 190 91.5 152.616 175 106.5 175c-11.53 0-22.514-2.337-32.505-6.563zm10.14-17.49l.093.002c.802 0 1.996-.02 3.53-.11 2.357-.14 4.953-.39 7.738-.79l-.712-4.95c-2.64.38-5.095.62-7.313.75-1.41.08-2.5.1-3.19.1h-.04l-.09 4.99zm17.923-2.065c3.646-.776 7.29-1.765 10.89-2.988l-1.608-4.734c-3.41 1.158-6.863 2.095-10.324 2.832l1.042 4.89zm17.15-5.378c3.503-1.493 6.88-3.208 10.11-5.158l-2.584-4.28c-3.024 1.826-6.194 3.435-9.487 4.838l1.96 4.6zm15.697-8.882c3.072-2.257 5.95-4.745 8.618-7.474l-3.575-3.495c-2.475 2.532-5.148 4.842-8.003 6.94l2.96 4.03zm13.106-12.546c1.24-1.55 2.42-3.162 3.54-4.838 1-1.496 1.95-3.01 2.86-4.554l-4.3-2.546c-.87 1.47-1.77 2.91-2.71 4.332-1.03 1.553-2.12 3.047-3.27 4.484l3.906 3.122zm9.6-15.232c1.69-3.313 3.23-6.733 4.62-10.248l-4.65-1.835c-1.33 3.37-2.8 6.65-4.41 9.81l4.46 2.28zm6.89-16.49c1.19-3.53 2.22-7.124 3.12-10.763l-4.85-1.19c-.86 3.51-1.86 6.97-3 10.37l4.74 1.59zm4.55-17.208c.74-3.7 1.33-7.388 1.79-11.037l-4.96-.62c-.44 3.53-1.01 7.09-1.73 10.68l4.91.97zm2.47-17.636c.34-4.14.49-7.9.49-11.19l-5-.002c0 3.158-.14 6.785-.46 10.783l4.99.41z"/>
+    <g fill-rule="nonzero">
+      <path fill-opacity=".7" d="M33.8 151.182c0-3.437 2.782-6.218 6.218-6.218 3.437 0 6.218 2.78 6.218 6.218 0 3.436-2.78 6.218-6.218 6.218-3.436 0-6.218-2.782-6.218-6.218z"/>
+      <path d="M52.127 154.073c-1.582 0-2.89-1.255-2.89-2.89 0-1.583 1.254-2.892 2.89-2.892 1.582 0 2.89 1.26 2.89 2.9 0 1.58-1.308 2.89-2.89 2.89m10.473 2.67c-.382 1.53-1.964 2.46-3.49 2.08-1.528-.38-2.455-1.96-2.074-3.49.382-1.53 1.964-2.45 3.49-2.07 1.474.38 2.4 1.8 2.13 3.27 0 .11 0 .17-.056.22m-2.018-7.36c-1.527.38-3.11-.6-3.437-2.124-.327-1.53.6-3.11 2.128-3.44 1.527-.384 3.11.6 3.436 2.125.05.383.1.765.05 1.147-.17 1.1-.98 2.02-2.18 2.3m10.2 7.09c-.28 1.583-1.75 2.62-3.33 2.346-1.58-.27-2.62-1.742-2.35-3.324.27-1.58 1.74-2.617 3.32-2.345 1.47.27 2.51 1.58 2.4 3.054 0 .054-.06.163-.06.272m-2.35-7.2c-1.58.27-3.055-.82-3.273-2.345-.27-1.58.82-3.053 2.347-3.27 1.58-.274 3.054.817 3.27 2.344.056.275.056.49.056.766-.11 1.2-1.09 2.29-2.4 2.51m-1.945 17.1c-.82 1.363-2.51 1.854-3.93 1.09-1.36-.818-1.852-2.51-1.09-3.927.82-1.365 2.51-1.856 3.93-1.09.98.543 1.526 1.634 1.417 2.725 0 .43-.11.81-.327 1.2M65.437 140c-1.364.764-3.11.273-3.928-1.09-.77-1.365-.28-3.11 1.09-3.928 1.36-.764 3.11-.273 3.92 1.09.33.546.43 1.092.33 1.637-.06.98-.6 1.85-1.42 2.29"/>
+      <path d="M40.127 180.09c-7.745 0-14.945-3-20.4-8.454-5.454-5.454-8.454-12.71-8.454-20.4 0-7.69 3-14.945 8.454-20.4 5.455-5.454 12.71-8.454 20.4-8.454 6.382 0 12.437 2.073 17.51 5.945l-3.546 4.582c-4.03-3.11-8.89-4.75-13.96-4.75-6.16 0-11.94 2.4-16.31 6.76-4.36 4.36-6.71 10.14-6.71 16.31 0 6.16 2.4 11.94 6.77 16.31 4.37 4.36 10.15 6.71 16.31 6.71 5.13 0 9.93-1.64 13.96-4.75l3.55 4.58c-5.12 3.98-11.18 6-17.56 6z"/>
+    </g>
+  </g>
+</svg>
--- a/website/source/assets/images/feature-multi@2x.png
+++ b/website/source/assets/images/feature-multi@2x.png
--- a/website/source/assets/images/footer-hashicorp-logo.png
+++ b/website/source/assets/images/footer-hashicorp-logo.png
--- a/website/source/assets/images/footer-hashicorp-logo@2x.png
+++ b/website/source/assets/images/footer-hashicorp-logo@2x.png
--- a/website/source/assets/images/hero-dots-below.png
+++ b/website/source/assets/images/hero-dots-below.png
--- a/website/source/assets/images/hero-dots-below@2x.png
+++ b/website/source/assets/images/hero-dots-below@2x.png
--- a/website/source/assets/images/hero-dots.png
+++ b/website/source/assets/images/hero-dots.png
--- a/website/source/assets/images/hero-dots@2x.png
+++ b/website/source/assets/images/hero-dots@2x.png
--- a/website/source/assets/images/icon-download-purple.png
+++ b/website/source/assets/images/icon-download-purple.png
--- a/website/source/assets/images/icon-download-purple@2x.png
+++ b/website/source/assets/images/icon-download-purple@2x.png
--- a/website/source/assets/images/icon-download.png
+++ b/website/source/assets/images/icon-download.png
--- a/website/source/assets/images/icon-download@2x.png
+++ b/website/source/assets/images/icon-download@2x.png
--- a/website/source/assets/images/icon-github-purple.png
+++ b/website/source/assets/images/icon-github-purple.png
--- a/website/source/assets/images/icon-github-purple@2x.png
+++ b/website/source/assets/images/icon-github-purple@2x.png
--- a/website/source/assets/images/icon-github.png
+++ b/website/source/assets/images/icon-github.png
--- a/website/source/assets/images/icon-github@2x.png
+++ b/website/source/assets/images/icon-github@2x.png
--- a/website/source/assets/images/logo-header-gradient@2x.png
+++ b/website/source/assets/images/logo-header-gradient@2x.png
--- a/website/source/assets/images/logo-header.svg
+++ b/website/source/assets/images/logo-header.svg
@ -1,39 +0,0 @@
-
-<svg width="155px" height="48px" viewBox="460 399 155 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <desc>HashiCorp Consul</desc>
-    <defs>
-        <polygon id="path-1" points="5.37248241 25.3378046 5.37248241 0.648776721 1.01772158 0.648776721 1.01772158 25.3378046 5.37248241 25.3378046"></polygon>
-        <polygon id="path-3" points="38.8349341 7.7377226e-05 0.000398916643 7.7377226e-05 0.000398916643 46.8650645 38.8349341 46.8650645 38.8349341 7.7377226e-05"></polygon>
-    </defs>
-    <g id="Group-3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(460.000000, 399.000000)">
-        <g id="Group-2" transform="translate(62.149421, 10.514255)">
-            <path d="M0.483443453,9.01263583 C0.483443453,4.72754033 3.01832299,2.23492511 8.94370387,2.23492511 C11.1575824,2.23492511 13.4422869,2.51587813 15.4059903,3.00698401 L14.90564,6.83581181 C12.9784919,6.48405863 10.7292004,6.23794378 9.0864979,6.23794378 C5.98044226,6.23794378 4.98202643,7.29207952 4.98202643,9.78469474 L4.98202643,18.7763153 C4.98202643,21.2689305 5.98044226,22.3230662 9.0864979,22.3230662 C10.7292004,22.3230662 12.9784919,22.0769514 14.90564,21.726322 L15.4059903,25.554026 C13.4422869,26.0451319 11.1575824,26.3260849 8.94370387,26.3260849 C3.01832299,26.3260849 0.483443453,23.8334697 0.483443453,19.5483742 L0.483443453,9.01263583 Z" id="Fill-1" fill="#FFFFFF"></path>
-            <path d="M25.0440158,12.1733573 C22.7238985,12.1733573 21.8305791,13.1915311 21.8305791,15.1233641 L21.8305791,19.7242508 C21.8305791,21.6560838 22.7238985,22.6742575 25.0440158,22.6742575 C27.3641332,22.6742575 28.2574526,21.6560838 28.2574526,19.7242508 L28.2574526,15.1233641 C28.2574526,13.1915311 27.3641332,12.1733573 25.0440158,12.1733573 M25.0440158,26.3266468 C19.0820797,26.3266468 17.4759325,23.0956871 17.4759325,19.5837743 L17.4759325,15.2638406 C17.4759325,11.7519278 19.0820797,8.52096804 25.0440158,8.52096804 C31.005952,8.52096804 32.6120992,11.7519278 32.6120992,15.2638406 L32.6120992,19.5837743 C32.6120992,23.0956871 31.005952,26.3266468 25.0440158,26.3266468" id="Fill-3" fill="#FFFFFF"></path>
-            <path d="M45.8550456,25.9751184 L45.8550456,14.0346149 C45.8550456,13.1209557 45.4620764,12.664688 44.4625182,12.664688 C43.3921342,12.664688 41.4992566,13.2973942 39.9296647,14.1042913 L39.9296647,25.9751184 L35.5738757,25.9751184 L35.5738757,8.87182218 L38.8935512,8.87182218 L39.3219333,10.3114255 C41.4992566,9.25841354 44.2488984,8.52119281 46.2834277,8.52119281 C49.1747211,8.52119281 50.2108345,10.5227021 50.2108345,13.5783472 L50.2108345,25.9751184 L45.8550456,25.9751184 Z" id="Fill-5" fill="#FFFFFF"></path>
-            <path d="M59.1706456,26.3263097 C57.3143232,26.3263097 54.7794437,25.9048801 53.1732965,25.3429741 L53.7798855,22.0771762 C55.2432387,22.4986057 57.1715292,22.8143969 58.9570257,22.8143969 C60.8841739,22.8143969 61.1697619,22.3929674 61.1697619,21.0938406 C61.1697619,20.0397048 60.9549997,19.5137608 58.1356745,18.8462164 C53.8872666,17.8280426 53.3880587,16.7739069 53.3880587,13.472147 C53.3880587,10.0310344 54.9222377,8.5206309 59.8846157,8.5206309 C61.4907629,8.5206309 63.5972604,8.73190757 65.0960265,9.11737512 L64.6676444,12.5247734 C63.3470852,12.2786585 61.2405878,12.0325437 59.8846157,12.0325437 C57.9928804,12.0325437 57.6718795,12.4539732 57.6718795,13.508109 C57.6718795,14.8769121 57.7781182,14.9825504 60.1347908,15.5792946 C64.9897877,16.8435833 65.4535827,17.4762895 65.4535827,20.9882022 C65.4535827,24.2899622 64.4186116,26.3263097 59.1706456,26.3263097" id="Fill-7" fill="#FFFFFF"></path>
-            <path d="M72.664681,8.87215932 L72.664681,20.8126628 C72.664681,21.726322 73.0576501,22.1825897 74.0572083,22.1825897 C75.1275923,22.1825897 77.0204699,21.5498835 78.5900619,20.7429864 L78.5900619,8.87215932 L82.9458508,8.87215932 L82.9458508,25.9754555 L79.6261753,25.9754555 L79.1977932,24.5358523 C77.0204699,25.5888642 74.2708282,26.3260849 72.2362989,26.3260849 C69.3450055,26.3260849 68.308892,24.3245756 68.308892,21.2689305 L68.308892,8.87215932 L72.664681,8.87215932 Z" id="Fill-9" fill="#FFFFFF"></path>
-            <g id="Group-13" transform="translate(85.676415, 0.637314)">
-                <mask id="mask-2" fill="white">
-                    <use xlink:href="#path-1"></use>
-                </mask>
-                <g id="Clip-12"></g>
-                <polygon id="Fill-11" fill="#FFFFFF" mask="url(#mask-2)" points="1.01772158 25.3378046 1.01772158 1.24664475 5.37351053 0.648776721 5.37351053 25.3378046"></polygon>
-            </g>
-        </g>
-        <g id="Group" transform="translate(0.462402, 0.399946)">
-            <path d="M24.0715876,28.4294761 C21.184229,28.4294761 18.8497688,26.1855366 18.8497688,23.384481 C18.8497688,20.5841992 21.1634853,18.3209153 24.0524396,18.3209153 C26.9397983,18.3209153 29.2734606,20.5648549 29.2734606,23.3651367 C29.2934065,26.1661923 26.9589463,28.4194171 24.0715876,28.4294761" id="Fill-14" fill="#FFFFFF"></path>
-            <path d="M34.2151602,25.7057204 C32.8827786,25.7057204 31.8112885,24.667318 31.8112885,23.3743446 C31.8112885,22.0821449 32.8827786,21.0437425 34.2151602,21.0437425 C35.5483396,21.0437425 36.6190319,22.0821449 36.6190319,23.3743446 C36.6190319,24.667318 35.5483396,25.7057204 34.2151602,25.7057204" id="Fill-16" fill="#FFFFFF"></path>
-            <path d="M43.0107935,27.9035431 L43.0107935,27.9035431 C42.6884688,29.1493164 41.3800223,29.9006493 40.0947128,29.5880453 C38.8094034,29.2762151 38.0371008,28.0080024 38.3578298,26.7599077 C38.6793566,25.5141344 39.988601,24.764349 41.2731126,25.0754055 C42.4977867,25.3880095 43.2724828,26.5308711 43.0586635,27.7193853 C43.0347285,27.7766445 43.0347285,27.8339036 43.0107935,27.9035431" id="Fill-18" fill="#FFFFFF"></path>
-            <path d="M41.3083768,21.8976776 C40.0238652,22.1870684 38.7146208,21.424129 38.4162312,20.1551425 C38.120235,18.9085953 38.9045051,17.6396088 40.2009842,17.3517656 C41.4870915,17.0623747 42.7955381,17.8237666 43.0931299,19.0927531 C43.1537652,19.4053571 43.1761045,19.7164136 43.1178627,20.0050306 C42.9862202,20.9173081 42.2944988,21.6903066 41.3083768,21.8976776" id="Fill-20" fill="#FFFFFF"></path>
-            <path d="M49.8585966,27.6447163 C49.6439794,28.9144766 48.3834028,29.7679474 47.0749562,29.5373632 C45.7657118,29.3292185 44.8857017,28.1066583 45.1226582,26.8376718 C45.3372753,25.5679115 46.5986498,24.713667 47.9078942,24.9450249 C49.143738,25.1523958 50.0125784,26.2488311 49.9064666,27.4365715 C49.8825316,27.5069848 49.8585966,27.5634702 49.8585966,27.6447163" id="Fill-22" fill="#FFFFFF"></path>
-            <path d="M47.9045433,21.7960813 C46.5952989,22.0034522 45.3586573,21.1499814 45.144838,19.8802212 C44.9302208,18.6104609 45.8110288,17.4111139 47.1202732,17.2029691 C48.4287198,16.9955982 49.6653614,17.8498428 49.8799785,19.119603 C49.9039135,19.326974 49.9278485,19.5111318 49.9039135,19.7185028 C49.8193432,20.7344657 48.9991706,21.6351367 47.9045433,21.7960813" id="Fill-24" fill="#FFFFFF"></path>
-            <path d="M46.226301,35.7191072 L46.226301,35.7191072 C45.5593124,36.8387557 44.1088514,37.2426648 42.9416213,36.5965649 C41.7871566,35.9496913 41.3706876,34.5421996 42.0368784,33.4117183 C42.703867,32.2912961 44.1543279,31.887387 45.321558,32.5342606 C46.1536981,32.9954288 46.6068675,33.8844932 46.5238928,34.7619509 C46.5119253,35.0962205 46.4042178,35.407277 46.226301,35.7191072" id="Fill-26" fill="#FFFFFF"></path>
-            <path d="M45.359136,14.296371 C44.2046712,14.9200315 42.741445,14.5277289 42.0752542,13.4080805 C41.4322006,12.2892058 41.836702,10.8685599 42.9911668,10.2224601 C44.1456316,9.59957341 45.6088578,9.99187595 46.2750486,11.1115244 C46.5383336,11.5502533 46.6197126,12.0005887 46.5726404,12.461757 C46.5024311,13.2115423 46.0739946,13.9040685 45.359136,14.296371" id="Fill-28" fill="#FFFFFF"></path>
-            <mask id="mask-4" fill="white">
-                <use xlink:href="#path-3"></use>
-            </mask>
-            <g id="Clip-31"></g>
-            <path d="M24.1611843,46.8650645 C17.6939477,46.8650645 11.6224364,44.4315507 7.06521266,40.0117636 C2.50798893,35.5703108 0.000398916643,29.6842252 0.000398916643,23.4321453 C0.000398916643,17.161495 2.50878677,11.2730881 7.06521266,6.85330091 C11.6471692,2.43196621 17.7170848,0 24.1611843,0 C29.5234218,0 34.5968437,1.66438413 38.8349341,4.81286346 L35.8821531,8.5494097 C32.49934,6.0361974 28.4471447,4.70685666 24.1611843,4.70685666 C19.0079791,4.70685666 14.1547592,6.65134635 10.4935023,10.1843905 C6.857776,13.7120182 4.85361879,18.4196486 4.85361879,23.4321453 C4.85361879,28.4314879 6.85937167,33.1391184 10.5014806,36.6853166 C14.1380047,40.2129444 18.9904268,42.1582078 24.1611843,42.1582078 C28.4415599,42.1582078 32.494553,40.8288671 35.8837488,38.3141072 L38.8325406,42.0537486 C34.5896632,45.2006803 29.5170391,46.8650645 24.1611843,46.8650645" id="Fill-30" fill="#FFFFFF" mask="url(#mask-4)"></path>
-        </g>
-    </g>
-</svg>
--- a/website/source/assets/images/logo-text.svg
+++ b/website/source/assets/images/logo-text.svg
@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 342 107">
+  <g fill="none" fill-rule="evenodd">
+    <path class="text" fill-rule="nonzero" d="M128.8 40c0-10.8 6.3-17 20.9-17 5.5 0 11.1.7 16 1.9l-1.2 9.6c-4.8-.9-10.3-1.5-14.4-1.5-7.7 0-10.1 2.6-10.1 8.9v22.6c0 6.3 2.5 8.9 10.1 8.9 4.1 0 9.6-.6 14.4-1.5l1.2 9.6c-4.8 1.2-10.5 1.9-16 1.9-14.6 0-20.9-6.3-20.9-17V40zm58.8 43.5c-14.7 0-18.7-8.1-18.7-16.9V55.8c0-8.8 4-16.9 18.7-16.9s18.7 8.1 18.7 16.9v10.8c0 8.8-3.9 16.9-18.7 16.9zm0-35.6c-5.7 0-7.9 2.6-7.9 7.4v11.5c0 4.8 2.2 7.4 7.9 7.4s7.9-2.6 7.9-7.4V55.3c.1-4.8-2.1-7.4-7.9-7.4zm49.7 34.7v-30c0-2.3-1-3.4-3.4-3.4-2.6 0-7.3 1.6-11.2 3.6v29.8h-10.8V39.7h8.2l1.1 3.6c5.4-2.6 12.2-4.5 17.2-4.5 7.1 0 9.7 5 9.7 12.7v31.1h-10.8zm31.1.9c-4.6 0-10.8-1.1-14.8-2.5l1.5-8.2c3.6 1.1 8.4 1.9 12.8 1.9 4.8 0 5.5-1.1 5.5-4.3 0-2.6-.5-4-7.5-5.6-10.5-2.6-11.7-5.2-11.7-13.5 0-8.6 3.8-12.4 16-12.4 4 0 9.2.5 12.9 1.5L282 49c-3.3-.6-8.5-1.2-11.8-1.2-4.7 0-5.5 1.1-5.5 3.7 0 3.4.3 3.7 6.1 5.2 12 3.2 13.1 4.8 13.1 13.6 0 8.1-2.5 13.2-15.5 13.2zM300 39.7v30c0 2.3 1 3.4 3.4 3.4 2.6 0 7.3-1.6 11.2-3.6V39.7h10.8v42.9h-8.2l-1.1-3.6c-5.4 2.6-12.2 4.5-17.2 4.5-7.1 0-9.7-5-9.7-12.7V39.7H300zm31.1 42.9V22.1l10.8-1.5v62"/>
+    <path class="center-c" d="M53.2 64.9c-6.3 0-11.4-5.1-11.4-11.4 0-6.3 5.1-11.4 11.4-11.4 6.3 0 11.4 5.1 11.4 11.4 0 6.3-5.1 11.4-11.4 11.4"/>
+    <path class="circles" d="M75.4 58.8c-2.9 0-5.3-2.3-5.3-5.3 0-2.9 2.3-5.3 5.3-5.3 2.9 0 5.3 2.3 5.3 5.3 0 2.9-2.4 5.3-5.3 5.3m19.2 4.9c-.7 2.8-3.6 4.5-6.4 3.8-2.8-.7-4.5-3.6-3.8-6.4.7-2.8 3.6-4.5 6.4-3.8 2.7.7 4.4 3.3 3.9 6 0 .2 0 .3-.1.4m-3.7-13.5c-2.8.7-5.7-1.1-6.3-3.9-.6-2.8 1.1-5.7 3.9-6.3 2.8-.7 5.7 1.1 6.3 3.9.1.7.2 1.4.1 2.1-.3 2-1.8 3.7-4 4.2m18.7 13c-.5 2.9-3.2 4.8-6.1 4.3-2.9-.5-4.8-3.2-4.3-6.1.5-2.9 3.2-4.8 6.1-4.3 2.7.5 4.6 2.9 4.4 5.6 0 .1-.1.3-.1.5M105.3 50c-2.9.5-5.6-1.5-6-4.3-.5-2.9 1.5-5.6 4.3-6 2.9-.5 5.6 1.5 6 4.3.1.5.1.9.1 1.4-.2 2.2-2 4.2-4.4 4.6m-3.6 31.4c-1.5 2.5-4.6 3.4-7.2 2-2.5-1.5-3.4-4.6-2-7.2 1.5-2.5 4.6-3.4 7.2-2 1.8 1 2.8 3 2.6 5 0 .8-.2 1.5-.6 2.2M99.8 33c-2.5 1.4-5.7.5-7.2-2-1.4-2.5-.5-5.7 2-7.2 2.5-1.4 5.7-.5 7.2 2 .6 1 .8 2 .6 3-.1 1.8-1.1 3.4-2.6 4.2"/>
+    <path class="c" fill-rule="nonzero" d="M53.4 106.5C39.2 106.5 26 101 16 91S.5 67.7.5 53.6C.5 39.5 6 26.2 16 16.2S39.3.7 53.4.7c11.7 0 22.8 3.8 32.1 10.9L79 20c-7.4-5.7-16.3-8.7-25.6-8.7-11.3 0-21.9 4.4-29.9 12.4S11.2 42.3 11.2 53.6c0 11.3 4.4 21.9 12.4 29.9s18.6 12.3 29.9 12.3c9.4 0 18.2-3 25.6-8.7l6.5 8.4c-9.4 7.3-20.5 11-32.2 11z"/>
+  </g>
+</svg>
--- a/website/source/assets/images/logo_large.png
+++ b/website/source/assets/images/logo_large.png
--- a/website/source/assets/images/nav-dotpipes.png
+++ b/website/source/assets/images/nav-dotpipes.png
--- a/website/source/assets/images/nav-dotpipes@2x.png
+++ b/website/source/assets/images/nav-dotpipes@2x.png
--- a/website/source/assets/images/sidebar-dots.jpg
+++ b/website/source/assets/images/sidebar-dots.jpg
--- a/website/source/assets/javascripts/_app/Sidebar.js
+++ b/website/source/assets/javascripts/_app/Sidebar.js
@ -1,50 +0,0 @@
-(function(){
-
-  Sidebar = Base.extend({
-
-    $body: null,
-    $overlay: null,
-    $sidebar: null,
-    $sidebarHeader: null,
-    $sidebarImg: null,
-    $toggleButton: null,
-
-    constructor: function(){
-      this.$body = $('body');
-      this.$overlay = $('.sidebar-overlay');
-      this.$sidebar = $('#sidebar');
-      this.$sidebarHeader = $('#sidebar .sidebar-header');
-      this.$toggleButton = $('.navbar-toggle');
-      this.sidebarImg = this.$sidebarHeader.css('background-image');
-
-      this.addEventListeners();
-    },
-
-    addEventListeners: function(){
-      var _this = this;
-
-      _this.$toggleButton.on('click', function() {
-        _this.$sidebar.toggleClass('open');
-        if ((_this.$sidebar.hasClass('sidebar-fixed-left') || _this.$sidebar.hasClass('sidebar-fixed-right')) && _this.$sidebar.hasClass('open')) {
-          _this.$overlay.addClass('active');
-          _this.$body.css('overflow', 'hidden');
-        } else {
-          _this.$overlay.removeClass('active');
-          _this.$body.css('overflow', 'auto');
-        }
-
-        return false;
-      });
-
-      _this.$overlay.on('click', function() {
-        $(this).removeClass('active');
-        _this.$body.css('overflow', 'auto');
-        _this.$sidebar.removeClass('open');
-      });
-    }
-
-  });
-
-  window.Sidebar = Sidebar;
-
-})();
--- a/website/source/assets/javascripts/_app/app.js
+++ b/website/source/assets/javascripts/_app/app.js
@ -1,27 +0,0 @@
-//
-// app.js
-//
-
-var APP = (function() {
-
-  function initializeSidebar() {
-    new Sidebar();
-  }
-
-  function initialize() {
-    APP.Utils.runIfClassNamePresent('page-home', initHome);
-
-    //always init sidebar
-    initializeSidebar();
-  }
-
-  function initHome() {
-    APP.Homepage.init();
-  }
-
-  //api
-  return {
-    initialize: initialize
-  }
-
-})();
--- a/website/source/assets/javascripts/_app/docs.js
+++ b/website/source/assets/javascripts/_app/docs.js
@ -1,48 +0,0 @@
-(function(){
-
-  var mainContentMin = 600;
-
-  var Init = {
-
-    start: function(){
-      var classname = this.hasClass(document.body, 'page-sub');
-
-      if (classname) {
-        this.addEventListeners();
-      }
-    },
-
-    hasClass: function (elem, className) {
-      return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
-    },
-
-    addEventListeners: function(){
-      var _this = this;
-      //console.log(document.querySelectorAll('.navbar-static-top')[0]);
-      window.addEventListener('resize', _this.resizeImage, false);
-
-      this.resizeImage();
-    },
-
-    resizeImage: function(){
-
-      var header = document.getElementById('header'),
-          footer = document.getElementById('footer'),
-          main = document.getElementById('main-content'),
-          vp = window.innerHeight,
-          bodyHeight = document.body.clientHeight,
-          hHeight = header.clientHeight,
-          fHeight = footer.clientHeight,
-          withMinHeight = hHeight + fHeight + mainContentMin;
-
-      if(withMinHeight <  vp &&  bodyHeight < vp){
-        var newHeight = mainContentMin + (vp-withMinHeight) + 'px';
-        main.style.height = newHeight;
-      }
-    }
-
-  };
-
-  Init.start();
-
-})();
--- a/website/source/assets/javascripts/_app/homepage.js
+++ b/website/source/assets/javascripts/_app/homepage.js
@ -1,48 +0,0 @@
-//homepage.js
-
-var APP = APP || {};
-
-(function () {
-  APP.Homepage = (function () {
-    return {
-
-      ui : null,
-
-      init: function () {
-        var _this = this;
-
-        //cache elements
-        this.ui = {
-          $doc: $(window),
-          $hero: $('#jumbotron'),
-          $collapse: $('.navbar-collapse')
-        }
-
-        this.addEventListeners();
-
-      },
-      
-      addEventListeners: function(){
-        var _this = this;
-
-        if(APP.Utils.isMobile)
-        return;
-
-        _this.ui.$doc.scroll(function() {
-
-          //if collapseable menu is open dont do parrallax. It looks wonky. Bootstrap conflict
-          if( _this.ui.$collapse.hasClass('in'))
-          return;
-
-          var top = _this.ui.$doc.scrollTop(),
-          speedAdj = (top*0.8),
-          speedAdjOffset = speedAdj - top;
-
-          _this.ui.$hero.css('webkitTransform', 'translate(0, '+ speedAdj +'px)');
-          _this.ui.$hero.find('.container').css('webkitTransform', 'translate(0, '+  speedAdjOffset +'px)');
-        })
-      }
-    }
-  }());
-
-}(jQuery, this));
--- a/website/source/assets/javascripts/_app/util.js
+++ b/website/source/assets/javascripts/_app/util.js
@ -1,33 +0,0 @@
-//
-// util.js
-//
-var APP = APP || {};
-
-APP.Utils =  (function () {
-  return {
-    //check for mobile user agents
-    isMobile : (function(){
-      if( navigator.userAgent.match(/Android/i)
-      || navigator.userAgent.match(/webOS/i)
-      || navigator.userAgent.match(/iPhone/i)
-      //|| navigator.userAgent.match(/iPad/i)
-      || navigator.userAgent.match(/iPod/i)
-      || navigator.userAgent.match(/BlackBerry/i)
-      || navigator.userAgent.match(/Windows Phone/i)
-    ){
-      return true;
-    }
-    else {
-      return false;
-    }
-  })(),
-
-  runIfClassNamePresent: function(selector, initFunction) {
-    var elms = document.getElementsByClassName(selector);
-    if (elms.length > 0) {
-      initFunction();
-    }
-  }
-}
-
-}());
--- a/website/source/assets/javascripts/application.coffee
+++ b/website/source/assets/javascripts/application.coffee
@ -1,13 +0,0 @@
-# From middleman-hashicorp
-#= require jquery
-#= require bootstrap
-
-#= require lib/Base
-
-#= require _app/docs
-#= require _app/Sidebar
-#= require _app/app
-#= require _app/homepage
-#= require _app/util
-
-#= require hashicorp/mega-nav
--- a/website/source/assets/javascripts/application.js
+++ b/website/source/assets/javascripts/application.js
@ -0,0 +1,5 @@
+//= require turbolinks
+//= require jquery
+
+//= require hashicorp/mega-nav
+//= require hashicorp/sidebar
--- a/website/source/assets/javascripts/lib/Base.js
+++ b/website/source/assets/javascripts/lib/Base.js
@ -1,145 +0,0 @@
-/*
-  Based on Base.js 1.1a (c) 2006-2010, Dean Edwards
-  Updated to pass JSHint and converted into a module by Kenneth Powers
-  License: http://www.opensource.org/licenses/mit-license.php
-*/
-/*global define:true module:true*/
-/*jshint eqeqeq:true*/
-(function (name, global, definition) {
-  if (typeof module !== 'undefined') {
-    module.exports = definition();
-  } else if (typeof define !== 'undefined' && typeof define.amd === 'object') {
-    define(definition);
-  } else {
-    global[name] = definition();
-  }
-})('Base', this, function () {
-  // Base Object
-  var Base = function () {};
-
-  // Implementation
-  Base.extend = function (_instance, _static) { // subclass
-    var extend = Base.prototype.extend;
-    // build the prototype
-    Base._prototyping = true;
-    var proto = new this();
-    extend.call(proto, _instance);
-    proto.base = function () {
-      // call this method from any other method to invoke that method's ancestor
-    };
-    delete Base._prototyping;
-    // create the wrapper for the constructor function
-    //var constructor = proto.constructor.valueOf(); //-dean
-    var constructor = proto.constructor;
-    var klass = proto.constructor = function () {
-        if (!Base._prototyping) {
-          if (this._constructing || this.constructor === klass) { // instantiation
-            this._constructing = true;
-            constructor.apply(this, arguments);
-            delete this._constructing;
-          } else if (arguments[0] !== null) { // casting
-            return (arguments[0].extend || extend).call(arguments[0], proto);
-          }
-        }
-      };
-    // build the class interface
-    klass.ancestor = this;
-    klass.extend = this.extend;
-    klass.forEach = this.forEach;
-    klass.implement = this.implement;
-    klass.prototype = proto;
-    klass.toString = this.toString;
-    klass.valueOf = function (type) {
-      return (type === 'object') ? klass : constructor.valueOf();
-    };
-    extend.call(klass, _static);
-    // class initialization
-    if (typeof klass.init === 'function') klass.init();
-    return klass;
-  };
-
-  Base.prototype = {
-    extend: function (source, value) {
-      if (arguments.length > 1) { // extending with a name/value pair
-        var ancestor = this[source];
-        if (ancestor && (typeof value === 'function') && // overriding a method?
-        // the valueOf() comparison is to avoid circular references
-        (!ancestor.valueOf || ancestor.valueOf() !== value.valueOf()) && /\bbase\b/.test(value)) {
-          // get the underlying method
-          var method = value.valueOf();
-          // override
-          value = function () {
-            var previous = this.base || Base.prototype.base;
-            this.base = ancestor;
-            var returnValue = method.apply(this, arguments);
-            this.base = previous;
-            return returnValue;
-          };
-          // point to the underlying method
-          value.valueOf = function (type) {
-            return (type === 'object') ? value : method;
-          };
-          value.toString = Base.toString;
-        }
-        this[source] = value;
-      } else if (source) { // extending with an object literal
-        var extend = Base.prototype.extend;
-        // if this object has a customized extend method then use it
-        if (!Base._prototyping && typeof this !== 'function') {
-          extend = this.extend || extend;
-        }
-        var proto = {
-          toSource: null
-        };
-        // do the "toString" and other methods manually
-        var hidden = ['constructor', 'toString', 'valueOf'];
-        // if we are prototyping then include the constructor
-        for (var i = Base._prototyping ? 0 : 1; i < hidden.length; i++) {
-          var h = hidden[i];
-          if (source[h] !== proto[h])
-            extend.call(this, h, source[h]);
-        }
-        // copy each of the source object's properties to this object
-        for (var key in source) {
-          if (!proto[key]) extend.call(this, key, source[key]);
-        }
-      }
-      return this;
-    }
-  };
-
-  // initialize
-  Base = Base.extend({
-    constructor: function () {
-      this.extend(arguments[0]);
-    }
-  }, {
-    ancestor: Object,
-    version: '1.1',
-    forEach: function (object, block, context) {
-      for (var key in object) {
-        if (this.prototype[key] === undefined) {
-          block.call(context, object[key], key, object);
-        }
-      }
-    },
-    implement: function () {
-      for (var i = 0; i < arguments.length; i++) {
-        if (typeof arguments[i] === 'function') {
-          // if it's a function, call it
-          arguments[i](this.prototype);
-        } else {
-          // add the interface using the extend method
-          this.prototype.extend(arguments[i]);
-        }
-      }
-      return this;
-    },
-    toString: function () {
-      return String(this.valueOf());
-    }
-  });
-
-  // Return Base implementation
-  return Base;
-});
--- a/website/source/assets/stylesheets/_announcement-bnr.scss
+++ b/website/source/assets/stylesheets/_announcement-bnr.scss
@ -1,142 +0,0 @@
-//
-// announcement bnr
-// --------------------------------------------------
-
-$enterprise-bnr-font-weight: 300;
-$enterprise-bnr-consul-color: #B52A55;
-$enterprise-color-dark-white: #A9B1B5;
-
-body{
-  // when _announcment-bnr.erb (ie. Consul Enterprise Announcment) is being used in layout we need to push down content to accommodate
-  // add this class to body
-  &.-displaying-bnr{
-    #header{
-      > .container{
-        padding-top: 8px;
-        -webkit-transform: translateY(32px);
-            -ms-transform: translateY(32px);
-                transform: translateY(32px);
-      }
-    }
-
-    #jumbotron {
-      .container{
-        .jumbo-logo-wrap{
-          margin-top: 160px;
-        }
-      }
-    }
-
-    &.page-sub{
-      #header{
-        > .container{
-          padding-bottom: 32px;
-        }
-      }
-    }
-  }
-}
-
-
-#announcement-bnr {
-  height: 40px;
-  flex-shrink: 0;
-  background-color: #000;
-
-  &.-absolute{
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    z-index: 9999;
-  }
-
-  a,p{
-    font-size: 14px;
-    color: $enterprise-color-dark-white;
-    font-family: $header-font-family;
-    font-weight: $enterprise-bnr-font-weight;
-    font-size: 13px;
-    line-height: 40px;
-    margin-bottom: 0;
-  }
-
-  .link-highlight{
-    display: inline-block;
-    margin-left: 3px;
-    color: lighten($enterprise-bnr-consul-color, 10%);
-    font-weight: 400;
-    -webkit-transform: translateY(1px);
-        -ms-transform: translateY(1px);
-            transform: translateY(1px);
-  }
-
-  .enterprise-logo{
-    position: relative;
-    top: 4px;
-
-    &:hover{
-      text-decoration: none;
-
-      svg{
-        rect{
-          fill: $enterprise-color-dark-white;
-        }
-      }
-    }
-
-    svg{
-      width: 140px;
-      height: 19px;
-      fill: $white;
-      margin-right: 4px;
-      margin-left: 3px;
-
-      rect{
-        @include transition(all .1s ease-in);
-      }
-    }
-  }
-}
-
-.hcaret{
-  display: inline-block;
-  -moz-transform: translate(0, -1px) rotate(135deg);
-  -webkit-transform: translate(0, -1px) rotate(135deg);
-  transform: translate(0, -1px) rotate(135deg);
-  width: 7px;
-  height: 7px;
-  border-top: 1px solid lighten($enterprise-bnr-consul-color, 10%);
-  border-left: 1px solid lighten($enterprise-bnr-consul-color, 10%);
-  @include transition(all .1s ease-in);
-}
-
-@media (max-width: 768px) {
-  #announcement-bnr {
-    .tagline{
-      display: none;
-    }
-  }
-}
-
-@media (max-width: 320px) {
-  #announcement-bnr {
-    a,p{
-      font-size: 12px;
-    }
-
-    .link-highlight{
-      display: inline-block;
-      margin-left: 1px;
-    }
-
-    .enterprise-logo svg{
-      width: 128px;
-      margin-left: 2px;
-    }
-
-    .hcaret{
-      display: none;
-    }
-  }
-}
--- a/website/source/assets/stylesheets/_buttons.scss
+++ b/website/source/assets/stylesheets/_buttons.scss
@ -1,56 +1,37 @@
-//
-// Button Styles
-// --------------------------------------------------
+.button {
+  background: $button-background;
+  border: 1px solid $button-font-color;
+  box-shadow: 3px 4px 0 rgba(0,0,0,0.1);
+  color: $button-font-color;
+  display: inline-block;
+  font-family: $button-font-family;
+  font-size: $button-font-size;
+  font-weight: $button-font-weight;
+  letter-spacing: 1px;
+  margin-bottom: 4px;
+  padding: 10px 30px;
+  text-transform: uppercase;
+  text-decoration: none;

-.outline-btn{
-  background-color: transparent;
-  color: $white;
-  border: 2px solid $white;
-  border-radius: $btn-border-radius;
-  text-decoration: none !important;
-  @include transition(background-color .3s ease-in-out);
-
-  &.purple{
-    color: $purple;
-    border: 2px solid $purple;
+  &:hover,
+  &:active,
+  &:focus {
+    text-decoration: none;
  }

-  &:hover{
-    color: $white;
-    background-color: rgba(255, 255, 255, .2);
-    @include transition(background-color .3s ease-in-out);
+  &:hover {
+    background: $button-font-color;
+    border: 1px solid $button-font-color;
+    color: $button-background;
+  }

-    &.purple{
-      background-color: rgba(255, 255, 255, .5);
+  &.primary {
+    background: $button-primary-background;
+    border: 1px solid darken($button-primary-background, 5%);
+    color: $button-primary-font-color;
+
+    &:hover {
+      background: lighten($button-primary-background, 5%);
    }
  }
 }
-
-//dot animation on header main nav link hover
-.li-under a::after {
-  position: absolute;
-  top: 68%;
-  left: 50%;
-  margin-left: -4px;
-  width: 8px;
-  height: 8px;
-  background-color: $white;
-  border-radius: 4px;
-  content: '';
-  opacity: 0;
-  text-decoration: none;
-  -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
-  -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
-  transition: height 0.3s, opacity 0.3s, transform 0.3s;
-  -webkit-transform: translateY(-10px);
-  -moz-transform: translateY(-10px);
-  transform: translateY(-10px);
-}
-
-.li-under a:hover::after,
-.li-under a:focus::after {
-  opacity: .5;
-  -webkit-transform: translateY(0px);
-  -moz-transform: translateY(0px);
-  transform: translateY(0px);
-}
--- a/website/source/assets/stylesheets/_community.scss
+++ b/website/source/assets/stylesheets/_community.scss
@ -1,15 +1,22 @@
-.people {
-  margin-top: 30px;
+#inner {
+  .people {
+    margin-top: 30px;

-  .person {
-    margin-bottom: 40px;
+    .person {
+      &:after {
+        display: block;
+        clear: both;
+        content: ' ';
+      }

-    h3 {
-      text-transform: none;
-    }
+      img {
+        width: 125px;
+        margin: auto auto;
+      }

-    .bio {
-      padding-left: 150px;
+      .bio {
+        padding-left: 150px;
+      }
    }
  }
 }
--- a/website/source/assets/stylesheets/_docs.scss
+++ b/website/source/assets/stylesheets/_docs.scss
@ -1,277 +1,75 @@
-//
-// Docs
-// --------------------------------------------------
-
-body.layout-docs,
-body.layout-intro{
-  background: $light-purple image-url('sidebar-dots.jpg') left 62px no-repeat;
-
-  #main-content{
-    min-height: 600px;
-
-    h1, h2, h3, h4, h5 {
-      font-family: $font-family-open-sans;
-      text-transform: none;
-    }
-  }
-
-  >.container{
-    .col-md-8[role=main]{
-      min-height: 800px;
-      background-color: white;
-
-      &::before {
-        content: "";
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: -9999px;
-        right: 0;
-        border-left: none;
-        box-shadow: 9999px 0 0 white;
-      }
-
-      >div{
-        position: relative;
-        z-index: 10;
-      }
-    }
-  }
-}
-
-.docs-sidebar{
-  position: relative;
-  z-index: 20;
+#docs-sidebar {
  margin-bottom: 30px;
  margin-top: 50px;
-  margin-right: 4%;
-  background-color: $light-purple;
-  border-radius: $el-border-radius;

-  a{
-    color: $purple;
-  }
-
-  .docs-sidenav{
-    padding-top: 15px;
+  ul.nav.docs-sidenav {
+    display: block;
    padding-bottom: 15px;

-    :last-child{
-      border-bottom: none;
-    }
+    li {
+      a {
+        color: $sidebar-link-color;
+        font-size: $sidebar-font-size;
+        padding: 10px 0 10px 15px;

-    //all li > a
-    li{
-      position: relative;
-
-      > a{
-        color: $purple;
-        @include transition( color 0.5s ease );
-      }
-
-      > a:hover,
-      > a:focus {
-        background-color: transparent !important;
-        color: $black;
-        @include transition( color 0.5s ease );
-      }
-    }
-
-
-    > li {
-      padding: 10px 0;
-      margin: 0 30px;
-      border-bottom: 2px solid #fff;
-
-      >.nav{
-        li{
-          a{
-            color: $black;
-          }
-        }
-      }
-
-      &.active {
-        &:before{
-          content: '';
+        &:before {
+          color: $sidebar-link-color-active;
+          content: '\203A';
+          font-size: $font-size;
+          left: 0;
+          line-height: 100%;
+          opacity: 0.4;
          position: absolute;
-          width: 8px;
-          height: 8px;
-          background-color: $purple;
-          border-radius: 4px;
-          top: 26px;
-          left: -10px;
-        }
-        > a{
-          -webkit-font-smoothing: antialiased;
+
+          height: 100%;
+          width: 8px
        }

-        /*> a:hover,
-        > a:focus {
-        font-weight: font-weight-xb;
-      }*/
+        &:focus,
+        &:hover {
+          background-color: transparent;
+          color: $sidebar-link-color-hover;

-      .nav {
+          &:before {
+            opacity: 1;
+          }
+        }
+      }
+
+      // For forcing sub-navs to appear - in the long term, this should not
+      // be a thing anymore...
+      > ul.nav-visible {
        display: block;
-
-        li.active a {
-          font-weight: font-weight-xb;
-        }
-
-        li.active .subnav {
-          display: block;
-
-          li a {
-            font-weight: $font-weight-sb;
-          }
-
-          li.active a {
-            font-weight: font-weight-xb;
-          }
-        }
      }
    }

-    > a {
-      font-family: $font-family-open-sans;
-      font-weight: 600;
-      -webkit-font-smoothing: antialiased;
-    }
-  }
+    li.active {
+      > a {
+        color: $sidebar-link-color-active;

-  .nav {
-    display: none;
-    margin-bottom: 15px;
-
-    > li{
-      margin-left: 20px;
-
-      > a{
-        padding: 6px 15px;
-        font-weight: 500;
-        -webkit-font-smoothing: antialiased;
+        &:before {
+          opacity: 1;
+        }
      }

-      .subnav {
-        display: none;
-        margin-bottom: 15px;
-        list-style: none;
-        > li{
-          padding: 6px 0;
-          > a{
-            -webkit-font-smoothing: antialiased;
-          }
+      // Open nested navigations
+      > ul.nav {
+        display: block;
+      }
+    }
+
+    // subnav
+    ul.nav {
+      display: none;
+      margin: 10px;
+
+      li {
+        margin-left: 10px;
+
+        a {
+          padding: 6px 15px;
        }
      }
    }
  }
 }
-}
-
-
-.bs-docs-section{
-  padding-top: 10px;
-  padding-left: 3%;
-  padding-bottom: 80px;
-
-  .alert {
-    a {
-      color: inherit;
-      font-size: inherit;
-      font-weight: inherit;
-    }
-  }
-
-  .lead{
-    margin-bottom: 48px
-  }
-
-  .doc-sectional{
-    margin-bottom: 48px;
-  }
-
-  p, li, .alert {
-    font-size: 18px;
-    font-weight: 400;
-    line-height: 1.5em;
-    margin: 0 0 18px;
-    -webkit-font-smoothing: antialiased;
-  }
-
-  li p a, li a {
-    text-decoration: none;
-  }
-
-  pre {
-    margin: 0 0 18px;
-
-    // This will force the code to scroll horizontally on small screens
-    // instead of wrapping.
-    code {
-      overflow-wrap: normal;
-      white-space: pre;
-    }
-  }
-
-  a{
-    color: $purple;
-    &:hover{
-      text-decoration: underline;
-    }
-  }
-
-  img{
-    max-width: 650px;
-    margin-top: 25px;
-    margin-bottom: 25px;
-  }
-
-  h1{
-    color: $purple;
-    text-transform: uppercase;
-    padding-bottom: 24px;
-    margin-top: 40px;
-    margin-bottom: 24px;
-    border-bottom: 1px solid #eeeeee;
-  }
-
-  h2, h3, h4{
-    margin-top: 42px;
-    margin-bottom: 16px;
-  }
-
-  #graph {
-    margin-top: 30px;
-  }
-
-  .alert p {
-    margin-bottom: 0;
-  }
-}
-
-
-@media (max-width: 992px) {
-  body.layout-docs,
-  body.layout-intro{
-    >.container{
-      .col-md-8[role=main]{
-        min-height: 0;
-        &::before {
-          border-left: 9999px solid white;
-        }
-      }
-    }
-  }
-}
-
-@media (max-width: 480px) {
-  .bs-docs-section{
-    img{
-      max-width: 450px;
-    }
-
-    h1{
-      font-size: 32px;
-    }
-  }
-}
--- a/website/source/assets/stylesheets/_downloads.scss
+++ b/website/source/assets/stylesheets/_downloads.scss
@ -1,59 +1,60 @@
-.downloads {
-  margin-top: 20px;
+body.layout-downloads {
+  #inner {
+    .downloads {
+      margin-top: 20px;

-  .description {
-    margin-bottom: 20px;
-  }
-
-  .download {
-    border-bottom: 1px solid #b2b2b2;
-    padding-bottom: 15px;
-    margin-top: 10px;
-    margin-bottom: 10px;
-
-    .details {
-      padding-left: 95px;
-
-      h2 {
-        margin-top: 0px;
+      .description {
+        margin-bottom: 20px;
      }

-      ul {
-        padding-left: 0px;
-      }
+      .download {
+        align-items: center;
+        border-bottom: 1px solid #b2b2b2;
+        display: flex;
+        padding: 15px;

-      li {
-        display: inline-block;
+        .details {
+          padding-left: 20px;

-        &:after {
-          content: " | ";
+          h2 {
+            margin-top: 4px;
+            border: none;
+          }
+
+          ul {
+            padding-left: 0px;
+            margin: -8px 0 0 0;
+          }
+
+          li {
+            display: inline-block;
+
+            &:after {
+              content: " | ";
+            }
+
+            &:last-child:after {
+              content: "";
+            }
+          }
        }

-        &:last-child:after {
-          content: "";
+        .icon {
+          svg {
+            width: 75px;
+          }
+        }
+
+        .os-name {
+          font-size: 40px;
+          margin-bottom: -3px;
        }
      }
-    }

-    .icon {
-      img {
-        width: 75px;
+      .poweredby {
+        margin-top: 20px;
+        text-align: center;
      }
    }
-
-    .os-name {
-      font-size: 40px;
-      margin-bottom: -3px;
-    }
-  }
-
-  .poweredby {
-    margin-top: 20px;
-
-    img {
-      display: block;
-      margin: 0 auto;
-      width: 122px;
-    }
  }
 }
--- a/website/source/assets/stylesheets/_footer.scss
+++ b/website/source/assets/stylesheets/_footer.scss
@ -1,68 +1,22 @@
-#footer{
-  padding: 64px 0;
-  background-color: $black;
+#footer {
+  padding-top: 50px;

-  .hashicorp-project{
-    margin-top: 24px;
-  }
+  ul.footer-links {
+    li {
+      a {
+        color: $footer-link-color;
+        font-size: $footer-font-size;
+        font-family: $font-family-open-sans;
+        text-decoration: none;

-  .pull-right{
-    padding-right: 15px;
-  }
-}
+        &:hover, &:focus, &:active {
+          background-color: transparent;
+          color: $footer-link-color-hover;
+          outline: 0;
+        }

-.edit-page-link{
-  position: absolute;
-  top: -110px;
-  right: 30px;
-  z-index: 9999;
-
-  a{
-    text-transform: uppercase;
-    color: $black;
-  }
-}
-
-@media (max-width: 768px) {
-  #footer{
-    text-align: center;
-
-    .footer-hashi {
-      float: none !important;
-      display: block;
-
-      .pull-right{
-        float: none !important;
-        padding-right: 0;
-      }
-    }
-
-    ul{
-      float: none;
-      display: inline-block;
-      margin-bottom: 36px;
-    }
-  }
-}
-
-@media (max-width: 414px) {
-  #footer{
-    ul{
-      display: block;
-      li{
-        display: block;
-        float: none;
-      }
-
-      &.external-links{
-        li{
-          svg{
-            position: relative;
-            left: 0;
-            top: 2px;
-            margin-top: 0;
-            margin-right: 4px;
-          }
+        @media (max-width: 992px) {
+          text-align: center;
        }
      }
    }
--- a/website/source/assets/stylesheets/_global.scss
+++ b/website/source/assets/stylesheets/_global.scss
@ -1,102 +1,35 @@
-//
-// Global Site
-// --------------------------------------------------
-
-/*html{
-text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-}*/
+html {
+  height: 100%;
+  min-height: 100%;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}

 body {
-  font-size: 15px;
-  color: $black;
+  -webkit-font-smoothing: antialiased;
+  color: $body-font-color;
+  background-color: $white;
+  font-size: $font-size;
  font-family: $font-family-open-sans;
-  font-weight: 300;
+  font-weight: $font-weight-reg;
+  height: 100%;
+  min-height: 100%;
 }

 h1, h2, h3, h4, h5 {
  font-family: $font-family-klavika;
-  text-transform: uppercase;
+  -webkit-font-smoothing: antialiased;
 }

-h1{
-  font-size: 42px;
-  line-height: 42px;
-  font-weight: $font-weight-sb;
+h1 {
  margin-bottom: 24px;
 }

-h3{
-  font-size: 28px;
-  line-height: 28px;
-  font-weight: $font-weight-sb;
+// Avoid FOUT
+.wf-loading {
+  visibility: hidden;
 }

-p, a, input, .alert {
-
-}
-
-//an alternative color for buttons in the doc body
-.btn-serf{
-  color: $white !important;
-  background-color: $btn-color;
-  border-radius: $btn-border-radius;
-  //@include box-shadow( $shadow );
-}
-
-.highlight{
-  margin-bottom: 18px;
-}
-
-pre {
-  background-color: $black;
-  color: $white;
-  font-size: 14px;
-  font-weight: normal;
-  font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
-  border: none;
-  padding: 20px;
-  margin-bottom: 0;
-}
-
-tt {
-  font-size: 18px;
-  font-family: "Menlo", "Monaco", "Courier New", monospace;
-}
-
-//fixed grid below 992 to prevent smaller responsive sizes
-@media (max-width: 992px) {
-  .container{
-    max-width: 970px;
-  }
-}
-
-//all below styles are overriding corrections for below (min-width: 992px)
-//below (min-width: 992px) these styles change
-.navbar-nav {
-  margin: 0;
-}
-
-.navbar-right {
-  float: right !important;
-}
-
-.navbar-nav > li {
-  float: left;
-}
-
-.navbar-nav > li > a {
-  padding-top: 15px;
-  padding-bottom: 15px;
-}
-
-.center {
-  text-align: center;
-}
-
-.edit-this-page{
-  padding-top: 48px;
-  a{
-    text-transform: uppercase;
-  }
+.wf-active, .wf-inactive {
+  visibility: visible;
 }
--- a/website/source/assets/stylesheets/_header.scss
+++ b/website/source/assets/stylesheets/_header.scss
@ -1,65 +1,78 @@
-//
-// Header
-// - Project Specific
-// - edits should be made here
-// --------------------------------------------------
+#header {
+  background: $header-background-color;

-body.page-sub{
-  #header{
-    @include consul-gradient-bg();
+  .navbar-toggle {
+    height: $header-height;
+    margin: 0;
+    padding-right: 15px;
+    border-radius: 0;

-    .navbar-brand {
-      .logo{
-        &:hover{
-          color: $black;
+    .icon-bar {
+      border: 1px solid $white;
+      border-radius: 0;
+    }
+  }
+
+  .navbar-brand {
+    display: block;
+    margin: 0;
+    padding: 0;
+
+    a {
+      display: flex;
+      align-items: center;
+      height: $header-height;
+      line-height: $header-height;
+
+      svg.logo {
+        transition: opacity 0.15s ease-in-out;
+        @extend svg.logo.white;
+
+        &:hover, &:focus, &:active {
+          opacity: 0.6;
+          outline: 0;
+          text-decoration: none;
        }
      }
    }
  }
-}

-#header {
-  .navbar-brand {
-    .logo{
-      width: $project-logo-width;
-      padding: 0;
-      line-height: $header-height;
-      background-position: 0 center;
-      font-size: 0;
-      text-transform: uppercase;
-      background: url("../images/logo-header.svg") center no-repeat;
-      background-size: 100%;
+  ul.nav {
+    li {
+      a {
+        color: $header-link-color;
+        font-size: $header-font-size;
+        font-family: $font-family-open-sans;
+        font-weight: $font-weight-bold;
+        height: $header-height;
+        line-height: $header-height;
+        padding: 0 10px;
+        margin: 0;
+        text-decoration: none;

-      &:hover{
-        opacity: .4;
-      }
-    }
+        &:hover, &:focus, &:active {
+          background-color: transparent;
+          color: $header-link-color-hover;
+          outline: 0;

-    .by-hashicorp{
-      &:hover{
-        svg{
-          .svg-bg-line{
-            opacity: .4;
+          svg {
+            fill: $header-link-color-hover;
          }
        }
+
+        svg {
+          fill: $header-link-color;
+          position: relative;
+          top: 2px;
+          width: 14px;
+          height: 14px;
+          margin-right: 3px;
+        }
      }
    }
  }

-  .buttons{
-    margin-top: 2px; //baseline everything
-  }
-}
-
-@media (max-width: 414px) {
-  #header {
-    .navbar-brand {
-      .logo{
-        width: $project-logo-width * .75;
-      }
-      .by-hashicorp{
-        margin-top: 2px;
-      }
-    }
+  .buttons {
+    margin-top: 2px;
  }
 }
--- a/website/source/assets/stylesheets/_home.scss
+++ b/website/source/assets/stylesheets/_home.scss
@ -1,328 +1,216 @@
-//
-// Home
-// --------------------------------------------------
-body.page-home{
-  background-color: #f8f8f8;
-}
+#page-home {
+  // Override the main header
+  #header {
+    background: $home-header-background-color;

-#features{
-  @include anti-alias();
-  padding: 130px 0 0 0;
-  background: #f8f8f8 image-url('hero-dots-below@2x.png') center top no-repeat;
-  background-size: 1280px 49px;
-  position: relative;
-  top: $negative-hero-margin;
-
-  .double-row{
-    padding: 0 0 50px 0;
-  }
-
-  h2{
-    font-size: 24px;
-    letter-spacing: 1px;
-    color: $purple;
-    font-family: $font-family-klavika;
-    font-weight: font-weight-xb;
-  }
-  p{
-    font-size: 16px;
-    line-height: 1.5em;
-    color: $consul-gray;
-    font-family: $font-family-open-sans;
-    font-weight: $font-weight-sb;
-  }
-
-  .icn{
-    display: block;
-    width: 186px;
-    height: 272px;
-    margin: 0 auto;
-    background-position: center 0;
-    background-repeat: no-repeat;
-  }
-
-  .discovery{
-    background-image: image-url('feature-discovery@2x.png');
-    background-size: 181px 181px;
-  }
-  .health{
-    background-image: image-url('feature-health@2x.png');
-    background-size: 125px 179px;
-  }
-  .multi{
-    background-image: image-url('feature-multi@2x.png');
-    background-size: 182px 184px;
-  }
-  .config{
-    background-image: image-url('feature-config@2x.png');
-    background-size: 157px 179px;
-  }
-}
-
-@media (max-width: 992px) {
-  #features{
-    top: $large-negative-hero-margin;
-    .double-row{
-      padding: 0 0 0 0;
-      .row{
-        padding-bottom: 90px;
+    .navbar-toggle {
+      .icon-bar {
+        border: 1px solid $home-header-link-color;
      }
    }

-    .icn{
-      height: 200px;
-    }
-  }
-}
-
-@media (max-width: 768px){
-  #cta{
-    text-align: center;
-    .intro{
-      .left{
-        text-align: center !important;
-      }
-    }
-  }
-}
-
-@media (max-width: 480px) {
-  #features{
-    text-align: center;
-  }
-}
-
-#cta {
-  padding: 130px 0 130px;
-
-  .intro {
-    .left {
-      text-align: right;
-    }
-
-    .right {
-      margin-top: 12px;
-    }
-
-  }
-
-  p{
-    font-size: 18px;
-    line-height: 1.5em;
-    color: $consul-gray;
-    font-weight: $font-weight-sb;
-  }
-
-  .outline-btn {
-    padding: 8px;
-    display: inline-block;
-
-    &:focus {
-      outline: 0;
-    }
-  }
-
-  a {
-    font-weight: 500;
-    font-size: 16px;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    color: $purple;
-    &:hover {
-      text-decoration: none;
-    }
-  }
-}
-
-#demos{
-  padding: 30px 0 60px;
-  background-color: $light-purple;
-  background: $light-purple image-url('sidebar-dots.jpg') left 62px no-repeat;
-
-  .explantion {
-    margin: 40px 0 40px 0;
-
-    h2 {
-      font-size: 22px;
-      text-transform: uppercase;
-      font-family: $font-family-klavika;
-      font-weight: font-weight-xb;
-    }
-
-    p{
-      font-size: 16px;
-      line-height: 1.5em;
-      color: $consul-gray;
-      font-family: $font-family-open-sans;
-      font-weight: $font-weight-sb;
-    }
-  }
-
-  .terminals{
-    margin-bottom: 80px;
-
-    .terminal-item{
-      border-bottom: 1px solid #eaeae;
-
-      &.last{
-        border-bottom: none;
-      }
-      >header{
-        .left{
-          span.icn{
-            display: inline-block;
-            width: 83px;
-            height: 74px;
-          }
+    .navbar-brand {
+      a {
+        svg.logo {
+          @extend svg.logo.color;
        }
+      }
+    }

-        .right{
-          padding-left: 25px;
+    ul.nav {
+      li {
+        a {
+          color: $home-header-link-color;

-          h2{
-            margin-top: 0;
-            font-size: 28px;
-            text-transform: uppercase;
+          &:hover, &:focus, &:active {
+            background-color: transparent;
+            color: $home-header-link-color-hover;
+
+            svg {
+              fill: $home-header-link-color-hover;
+            }
          }

-          p{
-            font-size: 16px;
+          svg {
+            fill: $home-header-link-color;
          }
        }
      }
+    }
+  }

-      .terminal{
-        background-color: darken($gray-darker, 15%);
-        border-radius: 4px;
+  header {
+    .hero {
+      margin: 140px auto 160px auto;
+      text-align: center;

-        header{
-          position: relative;
-          background-color: $consul-gray;
+      .button {
+        margin: 5px;
+
+        @media (max-width: 768px) {
+          display: block;
+          margin-top: 10px;
          text-align: center;
-          padding: 3px;
-          border-top-left-radius: 4px;
-          border-top-right-radius: 4px;
-
-          h4{
-            font-size: 14px;
-            letter-spacing: 1px;
-            color: $gray-darker;
-            font-family: $font-family-klavika;
-            font-weight: font-weight-xb;
-          }
-
-          ul.shell-dots{
-            position: absolute;
-            top: 10px;
-            left: 8px;
-            padding-left: 0;
-
-            li{
-              display: inline-block;
-              width: 12px;
-              height: 12px;
-              border-radius: 6px;
-              background-color: $gray-darker;
-              margin-left: 6px;
-            }
-          }
-        }
-
-        .terminal-window{
-          min-height: 140px;
-          padding: 20px;
-          font-size: 15px;
-          font-weight: normal;
-          color: $white;
-
-          .txt-r {
-            color: lighten($red, 8%);;
-          }
-          .txt-p {
-            font-weight: bold;
-            color: lighten($purple, 15%);
-          }
-          p{
-            margin-bottom: 2px;
-            font-family: $font-family-mono;
-            white-space: pre-wrap;
-          }
-          .cursor {
-            background-color: $light-purple;
-          }
        }
      }

-      .feature-bullets{
-        list-style-type: none;
-        padding-left: 35px;
+      svg {
+        max-width: 90%;
+      }
+    }
+  }

-        li{
-          padding: 5px 0 5px 45px;
+  section {
+    background: $white;
+    padding: 100px 0;
+  }
+
+  section.marketing {
+    h2 {
+      font-family: $font-family-klavika;
+      font-size: 36px;
+      font-weight: $font-weight-bold;
+      line-height: 1.25;
+      letter-spacing: -0.02em;
+      margin: 0;
+      padding: 0;
+    }
+
+    p {
+      font-family: $font-family-open-sans;
+      font-size: 16px;
+      letter-spacing: 0.01em;
+      line-height: 1.8;
+      margin: 0 0 10px;
+    }
+
+    span.callout {
+      background: $black;
+      color: $white;
+      display: inline-block;
+      font-family: $font-family-klavika;
+      font-size: 18px;
+      font-weight: $font-weight-bold;
+      line-height: 1;
+      margin: 0;
+      padding: 5px;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+    }
+
+    &.pink {
+      background: $consul-pink;
+
+      h2 {
+        color: $white;
+      }
+
+      p {
+        color: $white;
+        font-weight: $font-weight-bold;
+      }
+
+      span.callout {
+        background: $white;
+        color: $black;
+      }
+    }
+
+    &.pink-dark {
+      background: $consul-pink-dark;
+
+      h2 {
+        color: $white;
+      }
+
+      p {
+        color: $white;
+        font-weight: $font-weight-bold;
+      }
+
+      span.callout {
+        background: $white;
+        color: $black;
+      }
+    }
+
+    &.black {
+      background: $black;
+
+      h2 {
+        color: $white;
+      }
+
+      p {
+        color: $white;
+        font-weight: $font-weight-bold;
+      }
+
+      span.callout {
+        background: $white;
+        color: $black;
+      }
+    }
+
+    &#features {
+      .feature-icon {
+        text-align: center;
+      }
+
+      h2, svg {
+        padding-top: 50px;
+      }
+
+      svg {
+        margin-top: 20px;
+      }
+    }
+
+    &#cta {
+      margin-top: -150px;
+      padding: 0 0 50px 0;
+      text-align: center;
+    }
+  }
+
+  .terminal {
+    border: 1px solid $white;
+    background-color: $black;
+    box-sizing: border-box;
+    color: $white;
+    font-family: $font-family-monospace;
+    font-size: 14px;
+    line-height: 1.8;
+    margin: 20px auto 120px auto;
+    padding: 10px 20px 20px 20px;
+
+    .terminal-content {
+      margin-top: 15px;
+      overflow-x: scroll;
+      width: 100%;
+      white-space: nowrap;
+
+      span {
+        display: block;
+
+        span {
+          display: inline;
        }
+
+        &.text-pink {
+          color: lighten($consul-pink, 20%);
+        }
+      }
+    }
+
+    span.circle {
+      &:before {
+        content: '\25CF';
+        color: $white;
+        font-size: 20px;
+        line-height: 1;
+        height: 100%;
      }
    }
  }
 }
-
-
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-  #demos{
-    .terminals{
-      .terminal-item{
-        .feature-bullets{
-          li{
-            background-size: 12px 12px;
-          }
-        }
-      }
-    }
-  }
-}
-
-
-
-@media (max-width: 992px) {
-  #demos{
-    .terminals{
-      .terminal-item{
-        >header{
-          .left{
-            span.icn{
-            }
-          }
-
-          .right{
-            padding-left: 54px;
-          }
-        }
-      }
-    }
-  }
-}
-
-@media (max-width: 768px) {
-  #demos{
-    .terminals{
-      .terminal-item{
-        >header{
-          .left{
-            span.icn{
-              padding-bottom: 15px;
-            }
-          }
-
-          .right{
-            padding-left: 15px;
-          }
-        }
-      }
-    }
-  }
-}
-
-@media (max-width: 480px) {
-  #features {
-    top: $negative-hero-margin;
-  }
-}
--- a/website/source/assets/stylesheets/_inner.scss
+++ b/website/source/assets/stylesheets/_inner.scss
@ -0,0 +1,89 @@
+#inner {
+  p, li, .alert {
+    font-size: $font-size;
+    font-family: $font-family-open-sans;
+    font-weight: $font-weight-reg;
+    line-height: 1.84em;
+    margin: 0 0 $font-size;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .alert p:last-child {
+    margin-bottom: 0;
+  }
+
+  pre {
+    font-family: $font-family-monospace;
+    font-size: ($font-size - 3);
+    font-weight: normal;
+    padding: 20px;
+    margin: 0 0 $font-size;
+
+    // This will force the code to scroll horizontally on small screens
+    // instead of wrapping.
+    code {
+      overflow-wrap: normal;
+      white-space: pre;
+    }
+  }
+
+  a {
+    color: $body-link-color;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    code {
+      background: inherit;
+      color: $body-link-color;
+    }
+  }
+
+  img {
+    display: block;
+    margin: 25px auto;
+    max-width: 650px;
+    height: auto;
+    width: 90%;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4 {
+    color: $body-font-color;
+    margin-top: 54px;
+    margin-bottom: $font-size;
+    line-height: 1.3;
+  }
+
+  h2 {
+    padding-bottom: 3px;
+    border-bottom: 1px solid $gray-light;
+  }
+
+  h1 > code,
+  h2 > code,
+  h3 > code,
+  h4 > code,
+  h5 > code
+  h6 > code,
+  li code,
+  table code,
+  p code,
+  tt,
+  .alert code {
+    font-family: $font-family-monospace;
+    font-size: 90%;
+    background-color: transparent;
+    color: inherit;
+    padding: 0;
+  }
+
+  table {
+    @extend .table;
+    @extend .table-striped;
+  }
+}
--- a/website/source/assets/stylesheets/_jumbotron.scss
+++ b/website/source/assets/stylesheets/_jumbotron.scss
@ -1,95 +0,0 @@
-//
-// Jumbotron
-// --------------------------------------------------
-
-#jumbotron-mask,
-#jumbotron-mask-dummy{
-  overflow: hidden;
-  width: 100%;
-  height: $jumbotron-total-height;
-}
-#jumbotron-mask {
-  position: absolute;
-  top: 0;
-}
-#jumbotron-mask-dummy{
-  visibility: hidden;
-  position:relative;
-  top: $negative-hero-margin;
-}
-
-#jumbotron {
-  position: relative;
-  height: $jumbotron-total-height;
-  padding-top: 0;
-  padding-bottom: 0;
-  margin-top: $negative-hero-margin;
-  color: $jumbotron-color;
-  -webkit-backface-visibility:hidden;
-  @include consul-gradient-bg();
-
-  .jumbotron-dots{
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 632px;
-    width: 100%;
-    margin-top: $negative-hero-margin;
-    background: transparent image-url('hero-dots.png') center $header-height no-repeat;
-  }
-
-
-  .container{
-    position: relative;
-    height: 100%;
-    margin-top: $header-height;
-    padding-left: 0;
-    -webkit-backface-visibility:hidden;
-
-    .jumbo-logo-wrap{
-      margin-top: 155px;
-
-      .jumbo-logo{
-        width: 318px;
-        height: 316px;
-        background:  transparent image-url('consul-hero-logo@2x.png') 0 0 no-repeat;
-        background-size: 318px 316px;
-        z-index: 20;
-      }
-    }
-
-    h2{
-      margin-top: 220px;
-      font-size: 40px;
-      line-height: 48px;
-      letter-spacing: 1px;
-    }
-
-    .lead {
-      font-weight: $font-weight-sb;
-      letter-spacing: .5px;
-      opacity: .89;
-    }
-  }
-}
-
-@media (max-width: 992px) {
-  #jumbotron .container {
-    h2, p.lead{
-      text-align: center;
-      margin-left: 0;
-    }
-  }
-  #jumbotron-mask-dummy{
-    top: $large-negative-hero-margin;
-  }
-}
-
-@media (max-width: 480px) {
-  #jumbotron .container {
-    h2{
-      margin-top: 200px;
-      font-size: 32px;
-    }
-  }
-}
--- a/website/source/assets/stylesheets/_logos.scss
+++ b/website/source/assets/stylesheets/_logos.scss
@ -0,0 +1,51 @@
+svg.logo {
+  &.color {
+    opacity: 1.0;
+
+    path.text {
+      fill: $black;
+      opacity: 1.0;
+    }
+
+    path.center-c {
+      fill: $consul-pink-dark;
+      opacity: 1.0;
+    }
+
+    path.circles {
+      fill: $consul-pink;
+      opacity: 1.0;
+    }
+
+    path.c {
+      fill: $consul-pink;
+      opacity: 1.0;
+    }
+  }
+
+  // The default logo class is the colored version
+  @extend .color;
+
+  &.white {
+    opacity: 1.0;
+
+    path.text {
+      fill: $white;
+    }
+
+    path.center-c {
+      fill: $white;
+      opacity: 0.7;
+    }
+
+    path.circles {
+      fill: $white;
+      opacity: 1.0;
+    }
+
+    path.c {
+      fill: $white;
+      opacity: 1.0;
+    }
+  }
+}
--- a/website/source/assets/stylesheets/_sidebar.scss
+++ b/website/source/assets/stylesheets/_sidebar.scss
@ -1,23 +0,0 @@
-//
-// Sidebar
-// - Project Specific
-// - Make sidebar edits here
-// --------------------------------------------------
-
-.sidebar {
-  .sidebar-nav {
-    // Links
-    //----------------
-    li {
-      a {
-        color: $purple;
-
-        svg{
-          path{
-            fill: $purple;
-          }
-        }
-      }
-    }
-  }
-}
--- a/website/source/assets/stylesheets/_syntax.scss.erb
+++ b/website/source/assets/stylesheets/_syntax.scss.erb
@ -0,0 +1,14 @@
+pre.highlight code {
+  color: #333333;
+}
+
+<%= Rouge::Themes::Github.render(scope: ".highlight") %>
+
+pre.highlight {
+  border: 1px solid #CCCCCC;
+}
+
+pre.highlight code span.c1 {
+  font-style: normal;
+  opacity: 0.8;
+}
--- a/website/source/assets/stylesheets/_utilities.scss
+++ b/website/source/assets/stylesheets/_utilities.scss
@ -1,23 +0,0 @@
-//
-// Utility classes
-// --------------------------------------------------
-
-
-//
-// -------------------------
-
-@mixin anti-alias() {
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-}
-
-@mixin consul-gradient-bg() {
-  background: #694a9c; /* Old browsers */
-  background: -moz-linear-gradient(left, #694a9c 0%, #cd2028 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#694a9c), color-stop(100%,#cd2028)); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(left, #694a9c 0%,#cd2028 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(left, #694a9c 0%,#cd2028 100%); /* Opera 11.10+ */
-  background: -ms-linear-gradient(left, #694a9c 0%,#cd2028 100%); /* IE10+ */
-  background: linear-gradient(to right, #694a9c 0%,#cd2028 100%); /* W3C */
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#694a9c', endColorstr='#cd2028',GradientType=1 ); /* IE6-9 */  
-}
--- a/website/source/assets/stylesheets/_variables.scss
+++ b/website/source/assets/stylesheets/_variables.scss
@ -1,60 +1,61 @@
-//
-// Variables
-// --------------------------------------------------
+// Colors
+$white: #FFFFFF;
+$black: #000000;
+$gray-darker: #555555;

-
-// Global values
-// --------------------------------------------------
-
-$jumbotron-height:           540px;
-$header-height:              92px;
-$jumbotron-total-height:     542px; //jumbo+header
-$jumbotron-color:            #fff;
-$btn-border-radius:          4px;
-$el-border-radius:           6px;
-$negative-hero-margin:       -93px;
-$large-negative-hero-margin: -154px;
-// colors
-// -------------------------
-
-$white:                      #fff;
-$black:                      #242424;
-$gray-darker:                #555;
-$gray:                       #777;
-$gray-light:                 #939393;
-$gray-lighter:               #979797;
-$red:                        #dd4e58;
-$red-dark:                   #c5454e;
-$red-darker:                 #b03c44;
-$tan:                        #f0f0e5;
-$consul-gray:                #909090;
-$consul-footer-gray:         #d7d4d7;
-$purple:                     #69499a;
-$light-purple:               #f7f3f9;
-$btn-color:                  #4592C5;
-
-
-// Scaffolding
-// -------------------------
-$body-bg:                    #fff;
-$text-color:                 $gray;
-
-// Links
-// -------------------------
-$link-color:                 $red-dark;
-$link-hover-color:           darken($link-color, 15%);
+$consul-pink: #D62783;
+$consul-pink-dark: #961D59;
+$packer-blue: #1DAEFF;
+$packer-blue-dark: #1D94DD;
+$vagrant-blue: #1563FF;
+$vagrant-blue-dark: #104EB2;
+$vault-black: #000000;
+$vault-blue: #00ABE0;
+$vault-gray: #919FA8;

 // Typography
-// -------------------------
-$font-family-open-sans:      "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-$font-family-klavika:        "klavika-web", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-$font-family-mono:           "Courier New", Monaco, Menlo, Consolas, monospace;
-$font-weight-xl:             100;
-$font-weight-reg:            300;
-$font-weight-sb:             500;
-$font-weight-xb:             700;
-$font-weight-open:           $font-weight-reg;
+$font-family-klavika:   'klavika-web', 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-family-open-sans: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-family-monospace: 'Menlo', 'Monaco', 'Consolas', "Courier New", monospace;
+$font-size:             15px;
+$font-weight-reg:       400;
+$font-weight-bold:      600;

+// Body
+$body-font-color: $gray-darker;
+$body-link-color: $consul-pink;

-$text-shadow:                1px 1px 1px #000;
-$shadow:                     $text-shadow;
+// Home
+$home-header-background-color: transparent;
+$home-header-link-color: $gray-darker;
+$home-header-link-color-hover: $black;
+
+// Sidebar
+$sidebar-background-color: $white;
+$sidebar-font-size: $font-size - 2;
+$sidebar-link-color: $body-font-color;
+$sidebar-link-color-hover: $black;
+$sidebar-link-color-active: $body-link-color;
+$sidebar-font-family: $font-family-open-sans;
+$sidebar-font-weight: $font-weight-reg;
+
+// Header
+$header-background-color: $consul-pink;
+$header-font-size: $font-size - 2;
+$header-height: 92px;
+$header-link-color: rgba($white, 0.85);
+$header-link-color-hover: $white;
+
+// Footer
+$footer-font-size: $font-size - 2;
+$footer-link-color: $body-font-color;
+$footer-link-color-hover: $black;
+
+// Button
+$button-background: $white;
+$button-font-color: #7b8A8E;
+$button-font-family: $font-family-klavika;
+$button-font-size: $font-size;
+$button-font-weight: $font-weight-bold;
+$button-primary-background: $consul-pink;
+$button-primary-font-color: $white;
--- a/website/source/assets/stylesheets/application.scss
+++ b/website/source/assets/stylesheets/application.scss
@ -1,37 +1,33 @@
-// Import bootstrap
-@import "bootstrap-sprockets";
-@import "bootstrap";
+@import 'bootstrap-sprockets';
+@import 'bootstrap';

-// Remote fonts
-@import url("//fonts.googleapis.com/css?family=Open+Sans:300,400,600");
+@import url("//fonts.googleapis.com/css?family=Open+Sans:400,600");

 // Mega Nav
@import 'hashicorp/mega-nav';

-// Core variables and mixins
-@import "_variables";
+// Anchor links
+@import 'hashicorp/anchor-links';

-// Utility classes
-@import "_utilities";
+// Core variables and mixins
+@import '_variables';
+
+// Sidebar
+@import 'hashicorp/sidebar';

 //Global Site
-@import "_global";
-
-// Hashicorp Shared Project Styles
-@import 'hashicorp-shared/_hashicorp-utility';
-@import 'hashicorp-shared/_project-utility';
-@import 'hashicorp-shared/_hashicorp-header';
-@import 'hashicorp-shared/_hashicorp-sidebar';
+@import '_global';

 // Components
-@import "_header";
+@import '_header';
@import '_footer';
-@import "_jumbotron";
-@import "_buttons";
-@import '_sidebar';
+@import '_inner';
+@import '_buttons';
+@import '_syntax';
+@import '_logos';

 // Pages
-@import "_home";
@import "_community";
@import "_docs";
@import "_downloads";
+@import "_home";
--- a/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-header.scss
+++ b/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-header.scss
@ -1,323 +0,0 @@
-//
-// Hashicorp header
-// - Shared throughout projects
-// - Edits should not be made here
-// --------------------------------------------------
-
-#header{
-  position: relative;
-  margin-bottom: 0;
-}
-
-.navigation {
-  color: black;
-  text-rendering: optimizeLegibility;
-  transition: all 1s ease;
-
-  &.white{
-    .navbar-brand {
-      .logo {
-        color: white;
-      }
-    }
-
-    .main-links,
-    .external-links {
-      li > a {
-        &:hover{
-          opacity: 1;
-        }
-      }
-    }
-  }
-
-  .navbar-toggle{
-    height: $header-height;
-    margin: 0;
-    border-radius: 0;
-    .icon-bar{
-      border: 1px solid $black;
-      border-radius: 0;
-    }
-  }
-
-  .external-links {
-    &.white{
-      svg path{
-        fill: $white;
-      }
-    }
-
-    li {
-      position: relative;
-
-      svg path{
-        @include transition( all 300ms ease-in );
-      }
-
-      &:hover{
-        svg path{
-          @include transition( all 300ms ease-in );
-        }
-      }
-
-      &.download{
-        margin-right: 10px;
-      }
-
-      > a {
-        padding-left: 12px !important;
-        svg{
-          position: absolute;
-          left: -12px;
-          top: 50%;
-          margin-top: -7px;
-          width: 14px;
-          height: 14px;
-        }
-      }
-    }
-  }
-
-  .main-links{
-    margin-right: $nav-margin-right * 2;
-  }
-
-  .main-links,
-  .external-links {
-    &.white{
-      li > a {
-        color: white;
-      }
-    }
-    li > a {
-      @include hashi-a-style();
-      margin: 0 8px;
-      padding-top: 1px;
-      line-height: $header-height;
-      @include project-a-style();
-    }
-  }
-
-  .nav > li > a:hover, .nav > li > a:focus {
-    background-color: transparent;
-    @include transition( all 300ms ease-in );
-  }
-}
-
-.navbar-brand {
-  display: block;
-  height: $header-height;
-  padding: 0;
-  margin: 0 10px 0 0;
-
-  .logo{
-    display: inline-block;
-    height: $header-height;
-    vertical-align:top;
-    padding: 0;
-    line-height: $header-height;
-    padding-left: $project-logo-width + $project-logo-pad-left;
-    background-position: 0 center;
-    @include transition(all 300ms ease-in);
-
-    &:hover{
-      @include transition(all 300ms ease-in);
-      text-decoration: none;
-    }
-  }
-}
-
-.navbar-toggle{
-  &.white{
-    .icon-bar{
-      border: 1px solid white;
-    }
-  }
-}
-
-.by-hashicorp{
-  display: inline-block;
-  vertical-align:top;
-  height: $header-height;
-  margin-left: 3px;
-  padding-top: 2px;
-  color: black;
-  line-height: $header-height;
-  font-family: $header-font-family;
-  font-weight: 600;
-  font-size: 0;
-  text-decoration: none;
-
-  &.white{
-    color: white;
-    font-weight: 300;
-    svg{
-      path,
-      polygon,
-      rect{
-        fill: white;
-      }
-    }
-  }
-
-  &:focus,
-  &:hover{
-    text-decoration: none;
-  }
-
-  .svg-wrap{
-    font-size: 13px;
-  }
-
-  svg{
-    &.svg-by{
-      width: $by-hashicorp-width;
-      height: $by-hashicorp-height;
-      margin-bottom: -4px;
-      margin-left: 4px;
-    }
-
-    &.svg-logo{
-      width: 16px;
-      height: 16px;
-      margin-bottom: -3px;
-      margin-left: 4px;
-    }
-
-    path,
-    polygon{
-      fill: black;
-      @include transition(all 300ms ease-in);
-
-      &:hover{
-        @include transition(all 300ms ease-in);
-      }
-    }
-    .svg-bg-line{
-      @include transition(all 300ms ease-in);
-
-      &:hover{
-        @include transition(all 300ms ease-in);
-      }
-    }
-  }
-}
-
-.hashicorp-project{
-  display: inline-block;
-  height: 30px;
-  line-height: 30px;
-  text-decoration: none;
-  font-size: 14px;
-  color: $black;
-  font-weight: 600;
-
-  &.white{
-    color: white;
-    svg{
-      path,
-      polygon,
-      rect{
-        fill: white;
-      }
-    }
-  }
-
-  &:focus{
-    text-decoration: none;
-  }
-
-  &:hover{
-    text-decoration: none;
-    svg{
-      &.svg-by{
-        line{
-          stroke: $purple;
-        }
-      }
-    }
-  }
-
-  span{
-    margin-right: 4px;
-    font-family: $header-font-family;
-    font-weight: 500;
-  }
-
-  span,
-  svg{
-    display: inline-block;
-  }
-
-  svg{
-    &.svg-by{
-      width: $by-hashicorp-width;
-      height: $by-hashicorp-height;
-      margin-bottom: -4px;
-      margin-left: -3px;
-    }
-
-    &.svg-logo{
-      width: 30px;
-      height: 30px;
-      margin-bottom: -10px;
-      margin-left: -1px;
-    }
-
-    path,
-    line{
-      fill: $black;
-      @include transition(all 300ms ease-in);
-
-      &:hover{
-        @include transition(all 300ms ease-in);
-      }
-    }
-  }
-}
-
-@media (max-width: 992px) {
-  .navigation {
-    > .container{
-      width: 100%;
-    }
-  }
-}
-
-@media (max-width: 768px) {
-  .navigation {
-    .main-links{
-      margin-right: 0;
-    }
-  }
-}
-
-@media (max-width: 414px) {
-  #header {
-    .navbar-toggle{
-      padding-top: 10px;
-      height: $header-mobile-height;
-    }
-
-    .navbar-brand {
-      height: $header-mobile-height;
-
-      .logo{
-        height: $header-mobile-height;
-        line-height: $header-mobile-height;
-      }
-      .by-hashicorp{
-        height: $header-mobile-height;
-        line-height: $header-mobile-height;
-        padding-top: 0;
-      }
-    }
-    .main-links,
-    .external-links {
-      li > a {
-        line-height: $header-mobile-height;
-      }
-    }
-  }
-}
--- a/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-sidebar.scss
+++ b/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-sidebar.scss
@ -1,293 +0,0 @@
-//
-// Hashicorp Sidebar
-// - Shared throughout projects
-// - Edits should not be made here
-// --------------------------------------------------
-
-// Base variables
-// --------------------------------------------------
-$screen-tablet:          768px;
-
-$gray-darker:               #212121; // #212121 - text
-$gray-secondary:            #757575; // #757575 - secondary text, icons
-$gray:                      #bdbdbd; // #bdbdbd - hint text
-$gray-light:                #e0e0e0; // #e0e0e0 - divider
-$gray-lighter:              #f5f5f5; // #f5f5f5 - background
-$link-color:                $gray-darker;
-$link-bg:                   transparent;
-$link-hover-color:          $gray-lighter;
-$link-hover-bg:             $gray-lighter;
-$link-active-color:         $gray-darker;
-$link-active-bg:            $gray-light;
-$link-disabled-color:       $gray-light;
-$link-disabled-bg:          transparent;
-
-/* -- Sidebar style ------------------------------- */
-
-// Sidebar variables
-// --------------------------------------------------
-$zindex-sidebar-fixed: 1035;
-
-$sidebar-desktop-width: 280px;
-$sidebar-width: 240px;
-
-$sidebar-padding: 16px;
-$sidebar-divider: $sidebar-padding/2;
-
-$sidebar-icon-width: 40px;
-$sidebar-icon-height: 20px;
-
-@mixin sidebar-nav-base {
-  text-align: center;
-
-  &:last-child{
-    border-bottom: none;
-  }
-
-  li > a {
-    background-color: $link-bg;
-  }
-  li:hover > a {
-    background-color: $link-hover-bg;
-  }
-  li:focus > a, li > a:focus {
-    background-color: $link-bg;
-  }
-
-  > .open > a {
-    &,
-    &:hover,
-    &:focus {
-      background-color: $link-hover-bg;
-    }
-  }
-
-  > .active > a {
-    &,
-    &:hover,
-    &:focus {
-      background-color: $link-active-bg;
-    }
-  }
-  > .disabled > a {
-    &,
-    &:hover,
-    &:focus {
-      background-color: $link-disabled-bg;
-    }
-  }
-
-  // Dropdown menu items
-  > .dropdown {
-    // Remove background color from open dropdown
-    > .dropdown-menu {
-      background-color: $link-hover-bg;
-
-      > li > a {
-        &:focus {
-          background-color: $link-hover-bg;
-        }
-        &:hover {
-          background-color: $link-hover-bg;
-        }
-      }
-
-      > .active > a {
-        &,
-        &:hover,
-        &:focus {
-          color: $link-active-color;
-          background-color: $link-active-bg;
-        }
-      }
-    }
-  }
-}
-
-//
-// Sidebar
-// --------------------------------------------------
-
-// Sidebar Elements
-//
-// Basic style of sidebar elements
-.sidebar {
-  position: relative;
-  display: block;
-  min-height: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
-  border: none;
-  @include transition(all 0.5s cubic-bezier(0.55, 0, 0.1, 1));
-  @include clearfix();
-  background-color: $white;
-
-  ul{
-    padding-left: 0;
-    list-style-type: none;
-  }
-
-  .sidebar-divider, .divider {
-    width: 80%;
-    height: 1px;
-    margin: 8px auto;
-    background-color: lighten($gray, 20%);
-  }
-
-  // Sidebar heading
-  //----------------
-  .sidebar-header {
-    position: relative;
-    margin-bottom: $sidebar-padding;
-    @include transition(all .2s ease-in-out);
-  }
-
-  .sidebar-image {
-    padding-top: 24px;
-    img {
-      display: block;
-      margin: 0 auto;
-    }
-  }
-
-
-  // Sidebar icons
-  //----------------
-  .sidebar-icon {
-    display: inline-block;
-    height: $sidebar-icon-height;
-    margin-right: $sidebar-divider;
-    text-align: left;
-    font-size: $sidebar-icon-height;
-    vertical-align: middle;
-
-    &:before, &:after {
-      vertical-align: middle;
-    }
-  }
-
-  .sidebar-nav {
-    margin: 0;
-    padding: 0;
-
-    @include sidebar-nav-base();
-
-    // Links
-    //----------------
-    li {
-      position: relative;
-      list-style-type: none;
-      text-align: center;
-
-      a {
-        position: relative;
-        cursor: pointer;
-        user-select: none;
-        @include hashi-a-style-core();
-
-        svg{
-          top: 2px;
-          width: 14px;
-          height: 14px;
-          margin-bottom: -2px;
-          margin-right: 4px;
-        }
-      }
-    }
-  }
-}
-
-// Sidebar toggling
-//
-// Hide sidebar
-.sidebar {
-  width: 0;
-  @include translate3d(-$sidebar-desktop-width, 0, 0);
-
-  &.open {
-    min-width: $sidebar-desktop-width;
-    width: $sidebar-desktop-width;
-    @include translate3d(0, 0, 0);
-  }
-}
-
-// Sidebar positions: fix the left/right sidebars
-.sidebar-fixed-left,
-.sidebar-fixed-right,
-.sidebar-stacked {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  z-index: $zindex-sidebar-fixed;
-}
-.sidebar-stacked {
-  left: 0;
-}
-.sidebar-fixed-left {
-  left: 0;
-  box-shadow: 2px 0px 25px rgba(0,0,0,0.15);
-  -webkit-box-shadow: 2px 0px 25px rgba(0,0,0,0.15);
-}
-.sidebar-fixed-right {
-  right: 0;
-  box-shadow: 0px 2px 25px rgba(0,0,0,0.15);
-  -webkit-box-shadow: 0px 2px 25px rgba(0,0,0,0.15);
-
-  @include translate3d($sidebar-desktop-width, 0, 0);
-  &.open {
-    @include translate3d(0, 0, 0);
-  }
-  .icon-material-sidebar-arrow:before {
-    content: "\e614"; // icon-material-arrow-forward
-  }
-}
-
-// Sidebar size
-//
-// Change size of sidebar and sidebar elements on small screens
-@media (max-width: $screen-tablet) {
-  .sidebar.open {
-    min-width: $sidebar-width;
-    width: $sidebar-width;
-  }
-
-  .sidebar .sidebar-header {
-    //height: $sidebar-width * 9/16; // 16:9 header dimension
-  }
-
-  .sidebar .sidebar-image {
-    /* img {
-    width: $sidebar-width/4 - $sidebar-padding;
-    height: $sidebar-width/4 - $sidebar-padding;
-  } */
-  }
-}
-
-.sidebar-overlay {
-  visibility: hidden;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  opacity: 0;
-  background: $white;
-  z-index: $zindex-sidebar-fixed - 1;
-
-  -webkit-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
-  -moz-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
-  transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
-  -webkit-transform: translateZ(0);
-  -moz-transform: translateZ(0);
-  -ms-transform: translateZ(0);
-  -o-transform: translateZ(0);
-  transform: translateZ(0);
-}
-
-.sidebar-overlay.active {
-  opacity: 0.3;
-  visibility: visible;
-  -webkit-transition-delay: 0;
-  -moz-transition-delay: 0;
-  transition-delay: 0;
-}
--- a/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-utility.scss
+++ b/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-utility.scss
@ -1,87 +0,0 @@
-//
-// Hashicorp Nav (header/footer) Utiliy Vars and Mixins
-//
-// Notes:
-// - Include this in Application.scss before header and feature-footer
-// - Open Sans Google (Semibold - 600) font needs to be included if not already
-// --------------------------------------------------
-
-// Variables
-$font-family-open-sans:	'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-$header-font-family: $font-family-open-sans;
-$header-font-weight: 600; // semi-bold
-
-$header-height: 74px;
-$header-mobile-height: 60px;
-$by-hashicorp-width: 74px;
-$by-hashicorp-height: 16px;
-$nav-margin-right: 12px;
-
-// Mixins
-@mixin hashi-a-style-core{
-  font-family: $header-font-family;
-  font-weight: $header-font-weight;
-  font-size: 14px;
-  //letter-spacing: 0.0625em;
-}
-
-@mixin hashi-a-style{
-  margin: 0 15px;
-  padding: 0;
-  line-height: 22px;
-  @include hashi-a-style-core();
-  @include transition( all 0.3s ease );
-
-  &:hover{
-    @include transition( all 0.3s ease );
-    background-color: transparent;
-  }
-}
-
-//general shared project mixins
-@mixin img-retina($image1x, $image, $width, $height) {
-  background-image: url($image1x);
-  background-size: $width $height;
-  background-repeat: no-repeat;
-
-  @media (min--moz-device-pixel-ratio: 1.3),
-  (-o-min-device-pixel-ratio: 2.6/2),
-  (-webkit-min-device-pixel-ratio: 1.3),
-  (min-device-pixel-ratio: 1.3),
-  (min-resolution: 1.3dppx) {
-    /* on retina, use image that's scaled by 2 */
-    background-image: url($image);
-    background-size: $width $height;
-  }
-}
-
-//
-// -------------------------
-@mixin anti-alias() {
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-}
-
-@mixin open-light() {
-  font-family: $font-family-open-sans;
-  font-weight: 300;
-}
-
-@mixin open() {
-  font-family: $font-family-open-sans;
-  font-weight: 400;
-}
-
-@mixin open-sb() {
-  font-family: $font-family-open-sans;
-  font-weight: 600;
-}
-
-@mixin open-bold() {
-  font-family: $font-family-open-sans;
-  font-weight: 700;
-}
-
-@mixin bez-1-transition{
-  @include transition( all 300ms ease-in-out );
-}
--- a/website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss
+++ b/website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss
@ -1,30 +0,0 @@
-//
-// Mixins Specific to project
-//  - make edits to mixins here
-// --------------------------------------------------
-
-// Variables
-$project-logo-width: 154px;
-$project-logo-height: 48px;
-$project-logo-pad-left: 0px;
-$header-height: 80px;
-
-// Mixins
-@mixin project-a-style{
-  font-weight: 400;
-  opacity: .75;
-  @include anti-alias();
-
-  &:hover{
-    color: $white;
-    opacity: 1;
-  }
-}
-
-@mixin project-footer-a-style{
-  line-height: 30px;
-
-  &:hover{
-    opacity: .5;
-  }
-}
--- a/website/source/community.html.erb
+++ b/website/source/community.html.erb
@ -1,185 +1,164 @@
 ---
+layout: "inner"
 page_title: "Community"
 description: |-
  Consul is a new project with a growing community. Despite this, there are active, dedicated users willing to help you through various mediums.
 ---

-<div class="container">
-	<div class="col-md-8 col-md-offset-2">
-		<div class="bs-docs-section">
-			<h1>Community</h1>
+<h1>Community</h1>

-			<p>
-      Consul is a new project with a growing community. Despite this,
-			there are active, dedicated users willing to help you through various
-			mediums.
-			</p>
-			<p>
-				<strong>Chat:</strong> <a href="https://gitter.im/hashicorp-consul/Lobby">Consul on Gitter</a>
-			</p>
-			<p>
-			<strong>Mailing list:</strong>
-			<a href="https://groups.google.com/group/consul-tool">Consul Google Group</a>
-			</p>
-			<p>
-			<strong>Bug Tracker:</strong>
-			<a href="https://github.com/hashicorp/consul/issues">Issue tracker
-				on GitHub</a>. Please only use this for reporting bugs. Do not ask
-			for general help here. Use IRC or the mailing list for that.
-      </p>
+<p>
+Consul is a new project with a growing community. Despite this,
+there are active, dedicated users willing to help you through various
+mediums.
+</p>
+<p>
+  <strong>Chat:</strong> <a href="https://gitter.im/hashicorp-consul/Lobby">Consul on Gitter</a>
+</p>
+<p>
+<strong>Mailing list:</strong>
+<a href="https://groups.google.com/group/consul-tool">Consul Google Group</a>
+</p>
+<p>
+<strong>Bug Tracker:</strong>
+<a href="https://github.com/hashicorp/consul/issues">Issue tracker
+  on GitHub</a>. Please only use this for reporting bugs. Do not ask
+for general help here. Use IRC or the mailing list for that.
+</p>
+<p>
+  <strong>Community Tools:</strong>
+  <a href="/downloads_tools.html">Download Community Tools</a>. Please
+  check out some of the awesome Consul tooling our amazing community has
+  helped build.
+</p>
+<p>
+  <strong>Training:</strong>
+  Paid <a href="https://www.hashicorp.com/training.html">HashiCorp training courses</a>
+  are also available in a city near you. Private training courses are also available.
+</p>
+
+<h1>People</h1>
+<p>
+The following people are some of the faces behind Consul. They each
+contribute to Consul in some core way. Over time, faces may appear and
+disappear from this list as contributors come and go.
+</p>
+<div class="people">
+  <div class="person">
+    <img class="pull-left" src="//www.gravatar.com/avatar/11ba9630c9136eef9a70d26473d355d5.png?s=125">
+    <div class="bio">
+      <h3>Armon Dadgar (<a href="https://github.com/armon">@armon</a>)</h3>
      <p>
-        <strong>Community Tools:</strong>
-        <a href="/downloads_tools.html">Download Community Tools</a>. Please
-        check out some of the awesome Consul tooling our amazing community has
-        helped build.
-      </p>
+      Armon Dadgar is the creator of Consul. He researched and developed
+      most of the internals of how Consul works, including the
+      gossip layer, leader election, etc. Armon is also the creator of
+      <a href="https://www.serf.io">Serf</a>,
+      <a href="https://github.com/armon/statsite">Statsite</a>, and
+      <a href="https://github.com/armon/bloomd">Bloomd</a>.
+    </div>
+  </div>
+
+  <div class="person">
+    <img class="pull-left" src="//www.gravatar.com/avatar/54079122b67de9677c1f93933ce8b63a.png?s=125">
+    <div class="bio">
+      <h3>Mitchell Hashimoto (<a href="https://github.com/mitchellh">@mitchellh</a>)</h3>
      <p>
-        <strong>Training:</strong>
-        Paid <a href="https://www.hashicorp.com/training.html">HashiCorp training courses</a>
-        are also available in a city near you. Private training courses are also available.
+      Mitchell Hashimoto is a co-creator of Consul. He primarily took
+      a management role in the creation of Consul, guiding product
+      and user experience decisions on top of Armon's technical decisions.
+      Mitchell Hashimoto is also the creator of
+      <a href="https://www.vagrantup.com">Vagrant</a>,
+      <a href="https://www.packer.io">Packer</a>, and
+      <a href="https://www.serf.io">Serf</a>.
      </p>
+    </div>
+  </div>

-			<h1>People</h1>
-			<p>
-			The following people are some of the faces behind Consul. They each
-			contribute to Consul in some core way. Over time, faces may appear and
-			disappear from this list as contributors come and go.
-			</p>
-			<div class="people">
-				<div class="person">
-					<img class="pull-left" src="//www.gravatar.com/avatar/11ba9630c9136eef9a70d26473d355d5.png?s=125">
-					<div class="bio">
-						<h3>Armon Dadgar (<a href="https://github.com/armon">@armon</a>)</h3>
-						<p>
-						Armon Dadgar is the creator of Consul. He researched and developed
-						most of the internals of how Consul works, including the
-						gossip layer, leader election, etc. Armon is also the creator of
-						<a href="https://www.serf.io">Serf</a>,
-						<a href="https://github.com/armon/statsite">Statsite</a>, and
-						<a href="https://github.com/armon/bloomd">Bloomd</a>.
-					</div>
-				</div>
+  <div class="person">
+    <img class="pull-left" src="//www.gravatar.com/avatar/2acc31dd6370a54b18f6755cd0710ce6.png?s=125">
+    <div class="bio">
+      <h3>Jack Pearkes (<a href="https://github.com/pearkes">@pearkes</a>)</h3>
+      <p>
+      Jack Pearkes created and maintains the Consul web UI.
+      He is also a core committer to
+      <a href="https://www.packer.io">Packer</a> and maintains
+      many successful
+      <a href="https://github.com/pearkes">open source projects</a>
+      while also being an employee of
+      <a href="https://www.hashicorp.com">HashiCorp</a>.
+      </p>
+    </div>
+  </div>

-				<div class="clearfix"></div>
+  <div class="person">
+    <img class="pull-left" src="//avatars0.githubusercontent.com/u/1642288?v=3&amp;s=125">
+    <div class="bio">
+      <h3>Ryan Uber (<a href="https://github.com/ryanuber">@ryanuber</a>)</h3>
+      <p>
+      Ryan Uber is a core contributor to Consul where he works on all
+      facets of Consul. He is also a core committer to
+      <a href="https://www.serf.io">Serf</a>,
+      <a href="https://www.nomadproject.io">Nomad</a>, and
+      the Consul tools ecosystem, all while being an employee at
+      <a href="https://www.hashicorp.com">HashiCorp</a>.
+      </p>
+    </div>
+  </div>

-				<div class="person">
-					<img class="pull-left" src="//www.gravatar.com/avatar/54079122b67de9677c1f93933ce8b63a.png?s=125">
-					<div class="bio">
-						<h3>Mitchell Hashimoto (<a href="https://github.com/mitchellh">@mitchellh</a>)</h3>
-						<p>
-						Mitchell Hashimoto is a co-creator of Consul. He primarily took
-						a management role in the creation of Consul, guiding product
-						and user experience decisions on top of Armon's technical decisions.
-						Mitchell Hashimoto is also the creator of
-						<a href="https://www.vagrantup.com">Vagrant</a>,
-						<a href="https://www.packer.io">Packer</a>, and
-						<a href="https://www.serf.io">Serf</a>.
-						</p>
-					</div>
-				</div>
+  <div class="person">
+    <img class="pull-left" src="//avatars3.githubusercontent.com/u/673509?v=3&amp;s=125">
+    <div class="bio">
+      <h3>James Phillips (<a href="https://github.com/slackpad">@slackpad</a>)</h3>
+      <p>
+      James Phillips is a core contributor to Consul where he works on all
+      facets of Consul, including network tomography and prepared
+      queries. He is also a core committer to
+      <a href="https://www.serf.io">Serf</a> and
+      the Consul tools ecosystem, all while being an employee at
+      <a href="https://www.hashicorp.com">HashiCorp</a>.
+      </p>
+    </div>
+  </div>

-				<div class="clearfix"></div>
+  <div class="person">
+    <img class="pull-left" src="//avatars1.githubusercontent.com/u/408570?v=3&amp;s=125">
+    <div class="bio">
+      <h3>Seth Vargo (<a href="https://github.com/sethvargo">@sethvargo</a>)</h3>
+      <p>
+      Seth Vargo is a contributor to Consul, but his main focus is the
+      <a href="https://www.consul.io/downloads_tools.html">Consul tools ecosystem</a>.
+      He is also a core committer to
+      <a href="https://www.vagrantup.com">Vagrant</a>,
+      <a href="https://www.packer.io">Packer</a>, and
+      <a href="https://www.vaultproject.io">Vault</a>, and many more
+      open source projects, all while being an employee at
+      <a href="https://www.hashicorp.com">HashiCorp</a>.
+      </p>
+    </div>
+  </div>

-				<div class="person">
-					<img class="pull-left" src="//www.gravatar.com/avatar/2acc31dd6370a54b18f6755cd0710ce6.png?s=125">
-					<div class="bio">
-						<h3>Jack Pearkes (<a href="https://github.com/pearkes">@pearkes</a>)</h3>
-						<p>
-						Jack Pearkes created and maintains the Consul web UI.
-						He is also a core committer to
-						<a href="https://www.packer.io">Packer</a> and maintains
-						many successful
-						<a href="https://github.com/pearkes">open source projects</a>
-						while also being an employee of
-						<a href="https://www.hashicorp.com">HashiCorp</a>.
-						</p>
-					</div>
-				</div>
+  <div class="person">
+    <img class="pull-left" src="//www.gravatar.com/avatar/1e87e6016a7c4f4ecbd2517d84058467.png?s=125">
+    <div class="bio">
+      <h3>William Tisäter (<a href="https://github.com/tiwilliam">@tiwilliam</a>)</h3>
+      <p>William Tisäter is a Consul core committer. He is also the maintainer of
+      <a href="https://pypi.python.org/pypi/pygeoip">pygeoip</a> and builds things daily at
+      <a href="https://tictail.com">Tictail</a>.</p>
+    </div>
+  </div>

-				<div class="clearfix"></div>
-
-				<div class="person">
-					<img class="pull-left" src="//avatars0.githubusercontent.com/u/1642288?v=3&amp;s=125">
-					<div class="bio">
-						<h3>Ryan Uber (<a href="https://github.com/ryanuber">@ryanuber</a>)</h3>
-						<p>
-						Ryan Uber is a core contributor to Consul where he works on all
-						facets of Consul. He is also a core committer to
-						<a href="https://www.serf.io">Serf</a>,
-						<a href="https://www.nomadproject.io">Nomad</a>, and
-						the Consul tools ecosystem, all while being an employee at
-						<a href="https://www.hashicorp.com">HashiCorp</a>.
-						</p>
-					</div>
-				</div>
-
-				<div class="clearfix"></div>
-
-				<div class="person">
-					<img class="pull-left" src="//avatars3.githubusercontent.com/u/673509?v=3&amp;s=125">
-					<div class="bio">
-						<h3>James Phillips (<a href="https://github.com/slackpad">@slackpad</a>)</h3>
-						<p>
-						James Phillips is a core contributor to Consul where he works on all
-						facets of Consul, including network tomography and prepared
-						queries. He is also a core committer to
-						<a href="https://www.serf.io">Serf</a> and
-						the Consul tools ecosystem, all while being an employee at
-						<a href="https://www.hashicorp.com">HashiCorp</a>.
-						</p>
-					</div>
-				</div>
-
-				<div class="clearfix"></div>
-
-				<div class="person">
-					<img class="pull-left" src="//avatars1.githubusercontent.com/u/408570?v=3&amp;s=125">
-					<div class="bio">
-						<h3>Seth Vargo (<a href="https://github.com/sethvargo">@sethvargo</a>)</h3>
-						<p>
-						Seth Vargo is a contributor to Consul, but his main focus is the
-						<a href="https://www.consul.io/downloads_tools.html">Consul tools ecosystem</a>.
-						He is also a core committer to
-						<a href="https://www.vagrantup.com">Vagrant</a>,
-						<a href="https://www.packer.io">Packer</a>, and
-						<a href="https://www.vaultproject.io">Vault</a>, and many more
-						open source projects, all while being an employee at
-						<a href="https://www.hashicorp.com">HashiCorp</a>.
-						</p>
-					</div>
-				</div>
-
-				<div class="clearfix"></div>
-
-				<div class="person">
-					<img class="pull-left" src="//www.gravatar.com/avatar/1e87e6016a7c4f4ecbd2517d84058467.png?s=125">
-					<div class="bio">
-						<h3>William Tisäter (<a href="https://github.com/tiwilliam">@tiwilliam</a>)</h3>
-						<p>William Tisäter is a Consul core committer. He is also the maintainer of
-						<a href="https://pypi.python.org/pypi/pygeoip">pygeoip</a> and builds things daily at
-						<a href="https://tictail.com">Tictail</a>.</p>
-					</div>
-				</div>
-
-				<div class="clearfix"></div>
-
-				<div class="person">
-					<img class="pull-left" src="//www.gravatar.com/avatar/f6790b57128862abbfb6768264ea8824.png?s=125">
-					<div class="bio">
-						<h3>Ryan Breen (<a href="https://github.com/ryanbreen">@ryanbreen</a>)</h3>
-						<p>
-						Ryan Breen is a Consul committer. He is also the maintainer of
-						<a href="https://github.com/Cimpress-MCP/git2consul">git2consul</a>,
-						<a href="https://github.com/Cimpress-MCP/fsconsul">fsconsul</a>, and
-						<a href="https://github.com/Cimpress-MCP/gosecret">gosecret</a>.
-						Ryan works at <a href="http://www.cimpress.com">Cimpress</a>
-						building infrastructure for mass customization of consumer goods.
-						</p>
-					</div>
-				</div>
-
-				<div class="clearfix"></div>
-			</div>
-		</div>
-	</div>
+  <div class="person">
+    <img class="pull-left" src="//www.gravatar.com/avatar/f6790b57128862abbfb6768264ea8824.png?s=125">
+    <div class="bio">
+      <h3>Ryan Breen (<a href="https://github.com/ryanbreen">@ryanbreen</a>)</h3>
+      <p>
+      Ryan Breen is a Consul committer. He is also the maintainer of
+      <a href="https://github.com/Cimpress-MCP/git2consul">git2consul</a>,
+      <a href="https://github.com/Cimpress-MCP/fsconsul">fsconsul</a>, and
+      <a href="https://github.com/Cimpress-MCP/gosecret">gosecret</a>.
+      Ryan works at <a href="http://www.cimpress.com">Cimpress</a>
+      building infrastructure for mass customization of consumer goods.
+      </p>
+    </div>
+  </div>
 </div>
--- a/website/source/downloads.html.erb
+++ b/website/source/downloads.html.erb
@ -3,7 +3,7 @@ layout: "downloads"
 page_title: "Download Consul"
 sidebar_current: "downloads-consul"
 description: |-
-  Below are all available downloads for the latest version of Consul. Please download the proper package for your operating system and architecture.
+  Download Consul
 ---

 <h1>Download Consul</h1>
@ -25,23 +25,15 @@ description: |-
        <a href="https://releases.hashicorp.com/consul/<%= latest_version %>/consul_<%= latest_version %>_SHA256SUMS.sig">
          verify the checksums signature file
        </a>
-        which has been signed using <a href="https://www.hashicorp.com/security.html" target="_blank" rel="nofollow noopener noreferrer">HashiCorp's GPG key</a>.
+        which has been signed using <a href="https://hashicorp.com/security.html" target="_blank" rel="nofollow noopener noreferrer">HashiCorp's GPG key</a>.
        You can also <a href="https://releases.hashicorp.com/consul/" target="_blank" rel="nofollow noopener noreferrer">download older versions of Consul</a> from the releases service.
      </p>
      <p>
-      Checkout the <a href="https://github.com/hashicorp/consul/blob/v<%= latest_version %>/CHANGELOG.md">v<%= latest_version %> CHANGELOG</a> for information on the latest release.
+      Check out the <a href="https://github.com/hashicorp/consul/blob/v<%= latest_version %>/CHANGELOG.md">v<%= latest_version %> CHANGELOG</a> for information on the latest release.
      </p>
    </div>
  </div>

-  <div class="row">
-    <div class="col-md-12 download center">
-      <a href="https://releases.hashicorp.com/consul/<%= latest_version %>/consul_<%= latest_version %>_web_ui.zip" class="btn btn-lg btn-default">
-        Download Consul Web UI
-      </a>
-    </div>
-  </div>
-
  <% product_versions.each do |os, arches| %>
    <% next if os == "web" %>
    <div class="row">
@ -63,7 +55,7 @@ description: |-
  <div class="row">
    <div class="col-md-12 poweredby">
      <a href="https://www.fastly.com?utm_source=hashicorp" target="_blank" rel="nofollow noopener noreferrer">
-        <%= image_tag "fastly_logo.png" %>
+        <%= inline_svg "fastly.svg", height: 50 %>
      </a>
    </div>
  </div>
--- a/website/source/downloads_tools.html.erb
+++ b/website/source/downloads_tools.html.erb
@ -3,181 +3,173 @@ layout: "downloads"
 page_title: "Download Consul Tools"
 sidebar_current: "downloads-tools"
 description: |-
-  From this page you can download various tools for Consul. These tools are maintained by HashiCorp and the Consul Community.
+  From this page you can download various tools for Consul. These tools are
+  maintained by HashiCorp and the Consul Community.
 ---

 <h1>Download Consul Tools</h1>

-<section class="downloads">
-  <div class="row">
-    <p>
-      From this page you can download various tools for Consul. These tools are maintained by HashiCorp and the Consul Community.
-    </p>
+<p>
+  From this page you can download various tools for Consul. These tools are maintained by HashiCorp and the Consul Community.
+</p>

-    <h2>HashiCorp Tools</h2>
-    <p>
-      These Consul tools are created and managed by the dedicated engineers at HashiCorp:
-    </p>
+<h2>HashiCorp Tools</h2>
+<p>
+  These Consul tools are created and managed by the dedicated engineers at HashiCorp:
+</p>
+<ul>
+  <li>
+    <a href="https://github.com/hashicorp/envconsul">Envconsul</a> - Read and set environmental variables for processes from Consul.
+  </li>
+  <li>
+    <a href="https://github.com/hashicorp/consul-replicate">Consul Replicate</a> - Consul cross-DC KV replication daemon.
+  </li>
+  <li>
+    <a href="https://github.com/hashicorp/consul-template">Consul Template</a> - Generic template rendering and notifications with Consul
+  </li>
+  <li>
+    <a href="https://github.com/hashicorp/consul-migrate">Consul Migrate</a> - Data migration tool to handle Consul upgrades to 0.5.1+
+  </li>
+</ul>

-    <ul>
-      <li>
-        <a href="https://github.com/hashicorp/envconsul">Envconsul</a> - Read and set environmental variables for processes from Consul.
-      </li>
-      <li>
-        <a href="https://github.com/hashicorp/consul-replicate">Consul Replicate</a> - Consul cross-DC KV replication daemon.
-      </li>
-      <li>
-        <a href="https://github.com/hashicorp/consul-template">Consul Template</a> - Generic template rendering and notifications with Consul
-      </li>
-      <li>
-        <a href="https://github.com/hashicorp/consul-migrate">Consul Migrate</a> - Data migration tool to handle Consul upgrades to 0.5.1+
-      </li>
-    </ul>
-  </div>
+<h2>Consul SDK</h2>
+<p>
+  These Consul SDK are created and managed by the amazing members of the Consul community:
+</p>
+<ul>
+  <li>
+    <a href="https://github.com/hashicorp/consul/tree/master/api">api</a> - Official Go client for the Consul HTTP API
+  </li>
+  <li>
+    <a href="https://github.com/gmr/consulate">consulate</a> - Python client for the Consul HTTP API
+  </li>
+  <li>
+    <a href="https://github.com/cablehead/python-consul">python-consul</a> - Python client for the Consul HTTP API
+  </li>
+  <li>
+    <a href="https://github.com/vdloo/consul-kv">consul-kv</a> - Python 3 client for the Consul KV-store
+  </li>
+  <li>
+    <a href="https://github.com/sensiolabs/consul-php-sdk">consul-php-sdk</a> - PHP client for the Consul HTTP API
+  </li>
+  <li>
+    <a href="https://github.com/dcarbone/php-consul-api">php-consul-api</a> - GO-like PHP Client for the Consul HTTP API
+  </li>
+  <li>
+    <a href="https://github.com/tolitius/envoy">envoy</a> - Consul Clojure client with watchers and other goodies
+  </li>
+  <li>
+    <a href="https://github.com/hadielmougy/clj-consul-catalog">clj-consul-catalog</a> - Clojure discovery client for the Consul HTTP API
+  </li>
+  <li>
+    <a href="https://github.com/codacy/scala-consul">scala-consul</a> - Scala client for the Consul HTTP API
+  </li>
+  <li>
+    <a href="https://github.com/OrbitzWorldwide/consul-client">consul-client</a> - Java client for the Consul HTTP API
+  </li>
+  <li>
+    <a href="https://github.com/Ecwid/consul-api">consul-api</a> - Java client for the Consul HTTP API
+  </li>
+  <li>
+    <a href="https://github.com/undeadlabs/discovery">discovery</a> - Erlang/OTP client for the Consul HTTP API
+  </li>
+  <li>
+    <a href="https://github.com/xaviershay/consul-client">consul-client</a> - Ruby client for the Consul HTTP API
+  </li>
+  <li>
+    <a href="https://github.com/WeAreFarmGeek/diplomat">diplomat</a> - Ruby library to query Consul's KV-store and services directory
+  </li>
+  <li>
+    <a href="https://www.npmjs.com/package/consul">node-consul</a> - Node.js client for the Consul HTTP API
+  </li>
+  <li>
+    <a href="https://www.nuget.org/packages/Consul">Consul.NET</a> - C# client for the Consul HTTP API
+  </li>
+  <li>
+    <a href="https://metacpan.org/pod/Consul">Consul</a> - Perl client for the Consul HTTP API
+  </li>
+  <li>
+    <a href="https://github.com/Drawaes/CondenserDotNet">CondenserDotNet</a> - C# an opinionated API for .NET that provides higher level functionality for services using the HTTP API
+  </li>
+</ul>

-  <div class="row">
-    <h2>Consul SDK</h2>
-    <p>
-      These Consul SDK are created and managed by the amazing members of the Consul community:
-    </p>
-    <ul>
-      <li>
-        <a href="https://github.com/hashicorp/consul/tree/master/api">api</a> - Official Go client for the Consul HTTP API
-      </li>
-      <li>
-        <a href="https://github.com/gmr/consulate">consulate</a> - Python client for the Consul HTTP API
-      </li>
-      <li>
-        <a href="https://github.com/cablehead/python-consul">python-consul</a> - Python client for the Consul HTTP API
-      </li>
-      <li>
-        <a href="https://github.com/vdloo/consul-kv">consul-kv</a> - Python 3 client for the Consul KV-store
-      </li>
-      <li>
-        <a href="https://github.com/sensiolabs/consul-php-sdk">consul-php-sdk</a> - PHP client for the Consul HTTP API
-      </li>
-      <li>
-        <a href="https://github.com/dcarbone/php-consul-api">php-consul-api</a> - GO-like PHP Client for the Consul HTTP API
-      </li>
-      <li>
-        <a href="https://github.com/tolitius/envoy">envoy</a> - Consul Clojure client with watchers and other goodies
-      </li>
-      <li>
-        <a href="https://github.com/hadielmougy/clj-consul-catalog">clj-consul-catalog</a> - Clojure discovery client for the Consul HTTP API
-      </li>
-      <li>
-        <a href="https://github.com/codacy/scala-consul">scala-consul</a> - Scala client for the Consul HTTP API
-      </li>
-      <li>
-        <a href="https://github.com/OrbitzWorldwide/consul-client">consul-client</a> - Java client for the Consul HTTP API
-      </li>
-      <li>
-        <a href="https://github.com/Ecwid/consul-api">consul-api</a> - Java client for the Consul HTTP API
-      </li>
-      <li>
-        <a href="https://github.com/undeadlabs/discovery">discovery</a> - Erlang/OTP client for the Consul HTTP API
-      </li>
-      <li>
-        <a href="https://github.com/xaviershay/consul-client">consul-client</a> - Ruby client for the Consul HTTP API
-      </li>
-      <li>
-        <a href="https://github.com/WeAreFarmGeek/diplomat">diplomat</a> - Ruby library to query Consul's KV-store and services directory
-      </li>
-      <li>
-        <a href="https://www.npmjs.com/package/consul">node-consul</a> - Node.js client for the Consul HTTP API
-      </li>
-      <li>
-        <a href="https://www.nuget.org/packages/Consul">Consul.NET</a> - C# client for the Consul HTTP API
-      </li>
-      <li>
-        <a href="https://metacpan.org/pod/Consul">Consul</a> - Perl client for the Consul HTTP API
-      </li>
-      <li>
-        <a href="https://github.com/Drawaes/CondenserDotNet">CondenserDotNet</a> - C# an opinionated API for .NET that provides higher level functionality for services using the HTTP API 
-      </li>
-    </ul>
-  </div>
+<h2>Community Tools</h2>
+<p>
+  These Consul tools are created and managed by the amazing members of the Consul community:
+</p>
+<ul>
+  <li>
+    <a href="https://github.com/jippi/hashi-ui">hashi-ui</a> - A modern user interface for the Consul and Nomad
+  </li>
+  <li>
+    <a href="http://www.cfg4j.org">cfg4j</a> - Configuration library for Java distributed apps. Reads and auto-updates configuration from Consul KVs (and others)
+  </li>
+  <li>
+    <a href="https://github.com/cfg4j/cfg4j-pusher">cfg4j-pusher</a> - Command line app that pushes values from configuration files (YAML, properties, etc.) to Consul KVs
+  </li>
+  <li>
+    <a href="https://github.com/kelseyhightower/confd">confd</a> - Manage local application configuration files using templates and data from etcd or Consul
+  </li>
+  <li>
+    <a href="https://github.com/ncbi/consul-announcer">consul-announcer</a> - Command line wrapper for registering services in Consul
+  </li>
+  <li>
+    <a href="https://github.com/myENA/consul-backinator">consul-backinator</a> - Command line Consul KV backup and restoration utility
+  </li>
+  <li>
+    <a href="https://github.com/CiscoCloud/consul-cli">consul-cli</a> - Command line interface to Consul HTTP API
+  </li>
+  <li>
+    <a href="https://github.com/zeroXten/consul-do">consul-do</a> - Do something, such as run HA cronjobs, based on Consul leadership status
+  </li>
+  <li>
+    <a href="https://github.com/Magnetme/consultant">Consultant</a> - Library for Java services to self register and deregister, fetching configuration, and subscribing to configuration changes.
+  </li>
+  <li>
+    <a href="http://xordataexchange.github.io/crypt/">crypt</a> - Store and retrieve encrypted configuration parameters from etcd or Consul
+  </li>
+  <li>
+    <a href="https://github.com/smoketurner/dropwizard-consul">Dropwizard Consul Bundle</a> - Service discovery and configuration integration with the <a href="http://www.dropwizard.io/">Dropwizard</a> framework
+  </li>
+  <li>
+    <a href="https://github.com/gliderlabs/docker-consul">docker-consul</a> - Dockerized Consul Agent
+  </li>
+  <li>
+    <a href="https://github.com/eBay/fabio">fabio</a> - Fast, zero-conf, consul-aware load-balancing HTTP/HTTPS router
+  </li>
+  <li>
+    <a href="https://github.com/ryanbreen/git2consul">git2consul</a> - Mirror the contents of a Git repository into Consul KVs
+  </li>
+  <li>
+    <a href="https://github.com/amirkibbar/red-apple">gradle-consul-plugin</a> - A Consul Gradle plugin
+  </li>
+  <li>
+    <a href="https://github.com/SVT/helios-consul">helios-consul</a> - Service registrar plugin for Helios
+  </li>
+  <li>
+    <a href="https://github.com/gliderlabs/registrator">registrator</a> - Service registry bridge for Docker
+  </li>
+  <li>
+    <a href="https://github.com/spring-cloud/spring-cloud-consul">Spring Cloud Consul</a> - Service discovery, configuration and events for Spring Cloud
+  </li>
+  <li>
+    <a href="https://github.com/allegro/marathon-consul">marathon-consul</a> - Service registry bridge for Marathon
+  </li>
+  <li>
+    <a href="https://github.com/CiscoCloud/marathon-consul">marathon-consul</a> - Bridge from Marathon apps to the Consul K/V store
+  </li>
+  <li>
+    <a href="https://github.com/CiscoCloud/mesos-consul">mesos-consul</a> - Service registry bridge for Mesos
+  </li>
+  <li>
+    <a href="http://opennodecloud.com/products/nodefabric.html">NodeFabric</a> - Turnkey CentOS 7 Atomic Host image with integrated Consul, Registrator and HAProxy - enabling rapid MariaDB-Galera and Ceph deployments
+  </li>
+  <li>
+    <a href="https://github.com/pszymczyk/embedded-consul">Embedded Consul</a> - Library for JVM based applications, provides easy way to run Consul in integration tests
+  </li>
+</ul>

-  <div class="row">
-    <h2>Community Tools</h2>
-    <p>
-      These Consul tools are created and managed by the amazing members of the Consul community:
-    </p>
-
-    <ul>
-      <li>
-        <a href="https://github.com/jippi/hashi-ui">hashi-ui</a> - A modern user interface for the Consul and Nomad
-      </li>
-      <li>
-        <a href="http://www.cfg4j.org">cfg4j</a> - Configuration library for Java distributed apps. Reads and auto-updates configuration from Consul KVs (and others)
-      </li>
-      <li>
-        <a href="https://github.com/cfg4j/cfg4j-pusher">cfg4j-pusher</a> - Command line app that pushes values from configuration files (YAML, properties, etc.) to Consul KVs
-      </li>
-      <li>
-        <a href="https://github.com/kelseyhightower/confd">confd</a> - Manage local application configuration files using templates and data from etcd or Consul
-      </li>
-      <li>
-        <a href="https://github.com/ncbi/consul-announcer">consul-announcer</a> - Command line wrapper for registering services in Consul
-      </li>
-      <li>
-        <a href="https://github.com/myENA/consul-backinator">consul-backinator</a> - Command line Consul KV backup and restoration utility
-      </li>
-      <li>
-        <a href="https://github.com/CiscoCloud/consul-cli">consul-cli</a> - Command line interface to Consul HTTP API
-      </li>
-      <li>
-        <a href="https://github.com/zeroXten/consul-do">consul-do</a> - Do something, such as run HA cronjobs, based on Consul leadership status
-      </li>
-      <li>
-        <a href="https://github.com/Magnetme/consultant">Consultant</a> - Library for Java services to self register and deregister, fetching configuration, and subscribing to configuration changes.
-      </li>
-      <li>
-        <a href="http://xordataexchange.github.io/crypt/">crypt</a> - Store and retrieve encrypted configuration parameters from etcd or Consul
-      </li>
-      <li>
-        <a href="https://github.com/smoketurner/dropwizard-consul">Dropwizard Consul Bundle</a> - Service discovery and configuration integration with the <a href="http://www.dropwizard.io/">Dropwizard</a> framework
-      </li>
-      <li>
-        <a href="https://github.com/gliderlabs/docker-consul">docker-consul</a> - Dockerized Consul Agent
-      </li>
-      <li>
-        <a href="https://github.com/eBay/fabio">fabio</a> - Fast, zero-conf, consul-aware load-balancing HTTP/HTTPS router
-      </li>
-      <li>
-        <a href="https://github.com/ryanbreen/git2consul">git2consul</a> - Mirror the contents of a Git repository into Consul KVs
-      </li>
-      <li>
-        <a href="https://github.com/amirkibbar/red-apple">gradle-consul-plugin</a> - A Consul Gradle plugin
-      </li>
-      <li>
-        <a href="https://github.com/SVT/helios-consul">helios-consul</a> - Service registrar plugin for Helios
-      </li>
-      <li>
-        <a href="https://github.com/gliderlabs/registrator">registrator</a> - Service registry bridge for Docker
-      </li>
-      <li>
-        <a href="https://github.com/spring-cloud/spring-cloud-consul">Spring Cloud Consul</a> - Service discovery, configuration and events for Spring Cloud
-      </li>
-      <li>
-        <a href="https://github.com/allegro/marathon-consul">marathon-consul</a> - Service registry bridge for Marathon 
-      </li>
-      <li>
-        <a href="https://github.com/CiscoCloud/marathon-consul">marathon-consul</a> - Bridge from Marathon apps to the Consul K/V store
-      </li>
-      <li>
-        <a href="https://github.com/CiscoCloud/mesos-consul">mesos-consul</a> - Service registry bridge for Mesos
-      </li>
-      <li>
-        <a href="http://opennodecloud.com/products/nodefabric.html">NodeFabric</a> - Turnkey CentOS 7 Atomic Host image with integrated Consul, Registrator and HAProxy - enabling rapid MariaDB-Galera and Ceph deployments
-      </li>
-      <li>
-        <a href="https://github.com/pszymczyk/embedded-consul">Embedded Consul</a> - Library for JVM based applications, provides easy way to run Consul in integration tests
-      </li>
-    </ul>
-
-    <p>
-      Are you the author of a tool and you would like to be featured on this page?  The Consul website is open source and is embedded inside the <a href="https://github.com/hashicorp/consul">Consul repository</a> on GitHub.  You can submit a Pull Request to add your tool to the list and we will gladly review it.
-    </p>
-  </div>
+<p>
+  Are you the author of a tool and you would like to be featured on this page?  The Consul website is open source and is embedded inside the <a href="https://github.com/hashicorp/consul">Consul repository</a> on GitHub.  You can submit a Pull Request to add your tool to the list and we will gladly review it.
+</p>
 </section>
--- a/website/source/favicon.ico
+++ b/website/source/favicon.ico
--- a/website/source/index.html.erb
+++ b/website/source/index.html.erb
@ -5,206 +5,160 @@ description: |-
  systems and configuration easy.
 ---

-<!-- Main jumbotron for a primary marketing message or call to action -->
-<div id="jumbotron-mask">
-  <div id="jumbotron">
-    <div class="container">
-      <div class="col-lg-6 col-md-6">
-        <h2 class="rls-l">
-          Service discovery and configuration made easy.
-        </h2>
-        <p class="lead">
-          Distributed, highly available, and
-          datacenter-aware.
-        </p>
+<header>
+  <div class="container hero">
+    <div class="row">
+      <div class="col-md-offset-2 col-md-8">
+        <%= inline_svg "logo-text.svg", height: 120, class: "logo" %>
+
+        <h1>Service Discovery and Configuration Made Easy</h1>
+
+        <a class="button primary" href="/intro/index.html">Get Started</a>
+        <a class="button" href="/downloads.html">Download <%= latest_version %></a>
      </div>
-      <div class="jumbo-logo-wrap col-lg-offset-1 col-lg-5 col-md-6 hidden-xs hidden-sm">
-        <div class="jumbo-logo"></div>
-      </div>
-      <!-- <p><a class="btn btn-primary btn-lg">Learn more &raquo;</a></p> -->
    </div>
-    <div class="jumbotron-dots"></div>
  </div>
-</div>
-<!-- Make sure that any changes made to jumbotron are reproduced here as this takes up the space in the layout -->
-<div id="jumbotron-mask-dummy" aria-hidden="true">
-  <div id="jumbotron">
-    <div class="container">
-      <div class="col-lg-6 col-md-6">
-        <h2 class="rls-l">
-          Service discovery and configuration made easy.
-          Distributed, highly available, and
-          datacenter-aware.
-        </h2>
-      </div>
-      <div class="jumbo-logo-wrap col-lg-offset-1 col-lg-5 col-md-6 hidden-xs hidden-sm">
-        <div class="jumbo-logo"></div>
-      </div>
-      <!-- <p><a class="btn btn-primary btn-lg">Learn more &raquo;</a></p> -->
-    </div>
-    <div class="jumbotron-dots"></div>
-  </div>
-</div>
-<div id="features">
+</header>
+
+<section id="features" class="marketing pink">
  <div class="container">
-    <div class="row double-row">
-      <div class="col-lg-6 col-md-6">
-        <div class="row">
-          <div class="col-lg-5 col-md-5">
-            <span class="icn discovery"></span>
-          </div>
-          <div class="col-lg-7 col-md-7">
-            <h2>Service Discovery</h2>
-            <p>
-              Consul makes it simple for services to register themselves
-              and to discover other services via a DNS or HTTP interface.
-              Register external services such as SaaS providers as well.
-            </p>
-          </div>
+    <div class="row">
+      <div class="col-md-6">
+        <div class="col-sm-3 feature-icon">
+          <%= inline_svg "feature-discovery.svg", width: 100 %>
+        </div>
+        <div class="col-sm-9">
+          <h2>Service Discovery</h2>
+          <p>
+            Consul makes it simple for services to register themselves and to
+            discover other services via a DNS or HTTP interface. Register external
+            services such as SaaS providers as well.
+          </p>
        </div>
      </div>
-      <div class="col-lg-6 col-md-6">
-        <div class="row">
-          <div class="col-lg-5 col-md-5">
-            <span class="icn health"></span>
-          </div>
-          <div class="col-lg-7 col-md-7">
-            <h2>Failure Detection</h2>
-            <p>Pairing service discovery with health checking prevents routing requests to unhealthy hosts and enables services to easily provide circuit breakers.</p>
-          </div>
+      <div class="col-md-6">
+        <div class="col-sm-3 feature-icon">
+          <%= inline_svg "feature-health.svg", width: 100 %>
+        </div>
+        <div class="col-sm-9">
+          <h2>Failure Detection</h2>
+          <p>
+            Pairing service discovery with health checking prevents routing
+            requests to unhealthy hosts and enables services to easily provide
+            circuit breakers.
+          </p>
        </div>
      </div>
    </div>
-    <div class="row double-row">
-      <div class="col-lg-6 col-md-6">
-        <div class="row">
-          <div class="col-lg-5 col-md-5">
-            <span class="icn multi"></span>
-          </div>
-          <div class="col-lg-7 col-md-7">
-            <h2>Multi Datacenter</h2>
-            <p>Consul scales to multiple datacenters out of the box with no complicated configuration. Look up services in other datacenters, or keep the request local.</p>
-          </div>
+
+    <div class="row">
+      <div class="col-md-6">
+        <div class="col-sm-3 feature-icon">
+          <%= inline_svg "feature-multi.svg", width: 100 %>
+        </div>
+        <div class="col-sm-9">
+          <h2>Multi Datacenter</h2>
+          <p>
+            Consul scales to multiple datacenters out of the box with no
+            complicated configuration. Look up services in other datacenters, or
+            keep the request local.
+          </p>
        </div>
      </div>
-      <div class="col-lg-6 col-md-6">
-        <div class="row">
-          <div class="col-lg-5 col-md-5">
-            <span class="icn config"></span>
-          </div>
-          <div class="col-lg-7 col-md-7">
-            <h2>Key/Value Storage</h2>
-            <p>Flexible key/value store for dynamic configuration, feature flagging, coordination, leader election and more. Long poll for near-instant notification of configuration changes.</p>
-          </div>
+      <div class="col-md-6">
+        <div class="col-sm-3 feature-icon">
+          <%= inline_svg "feature-config.svg", width: 85 %>
+        </div>
+        <div class="col-sm-9">
+          <h2>Key/Value Storage</h2>
+          <p>
+            Flexible key/value store for dynamic configuration, feature flagging,
+            coordination, leader election and more. Long poll for near-instant
+            notification of configuration changes.
+          </p>
        </div>
      </div>
    </div>
  </div>
-  <!-- /container -->
-</div>
-<!-- /features -->
-<div id="demos">
+</section>
+
+<section id="simple" class="marketing">
  <div class="container">
-    <div class="terminals row">
-      <div class="col-xs-12 col-lg-12 explantion">
+    <div class="row">
+      <div class="col-md-12">
        <h2>DNS Query Interface</h2>
        <p>
          Look up services using Consul's built-in DNS server. Support
          existing infrastructure without any code change.
        </p>
      </div>
-      <div class="terminal-item col-xs-12 col-lg-12">
+    </div>
+    <div class="row">
+      <div class="col-md-12">
        <div class="terminal">
-          <header>
-            <h4>Terminal</h4>
-            <ul class='shell-dots'>
-              <li></li>
-              <li></li>
-              <li></li>
-            </ul>
-          </header>
-          <div class="terminal-window">
-            <div class="terminal">
-              <div class="display">
-                <p class="command"><span class="txt-r">admin@hashicorp</span>: dig web-frontend.service.consul. ANY</p>
-                <p>; &lt;&lt;&gt;&gt; DiG 9.8.3-P1 &lt;&lt;&gt;&gt; web-frontend.service.consul. ANY</p>
-                <p>;; global options: +cmd</p>
-                <p> </p>
-                <p>;; Got answer:</p>
-                <p>;; -&gt;&gt;HEADER&lt;&lt;- opcode: QUERY, status: NOERROR, id: 29981</p>
-                <p>;; flags: qr aa rd ra; QUERY: 1, ANSWER: 2, AUTHORITY: 0, ADDITIONAL: 0</p>
-                <p> </p>
-                <p>;; QUESTION SECTION:</p>
-                <p>;web-frontend.service.consul. IN ANY</p>
-                <p> </p>
-                <p>;; ANSWER SECTION:</p>
-                <p>web-frontend.service.consul. 0 IN  A <span class="txt-p">10.0.3.83</span></p>
-                <p>web-frontend.service.consul. 0 IN  A <span class="txt-p">10.0.1.109</span></p>
-                <p class="command"><span class="txt-r">admin@hashicorp</span>: <span class="cursor">&nbsp;</span></p>
-              </div>
-            </div>
+          <span class="circle"></span>
+          <span class="circle"></span>
+          <span class="circle"></span>
+          <div class="terminal-content">
+            <span><span class="text-pink">admin@hashicorp.com:</span> dig web-frontend.service.consul. ANY</span>
+            <span>; &lt;&lt;&gt;&gt; DiG 9.8.3-P1 &lt;&lt;&gt;&gt; web-frontend.service.consul. ANY</span>
+            <span>;; global options: +cmd</span>
+            <span>&nbsp;</span>
+            <span>;; Got answer:</span>
+            <span>;; -&gt;&gt;HEADER&lt;&lt;- opcode: QUERY, status: NOERROR, id: 29981</span>
+            <span>;; flags: qr aa rd ra; QUERY: 1, ANSWER: 2, AUTHORITY: 0, ADDITIONAL: 0</span>
+            <span> </span>
+            <span>;; QUESTION SECTION:</span>
+            <span>;web-frontend.service.consul. IN ANY</span>
+            <span>&nbsp;</span>
+            <span>;; ANSWER SECTION:</span>
+            <span>web-frontend.service.consul. 0 IN  A <span class="text-pink">10.0.3.83</span></span>
+            <span>web-frontend.service.consul. 0 IN  A <span class="text-pink">10.0.1.109</span></span>
          </div>
        </div>
      </div>
-      <!-- /.terminal-item -->
-      <div class="col-xs-12 col-lg-12 explantion">
+    </div>
+    <div class="row">
+      <div class="col-md-12">
        <h2>Key Value Storage</h2>
        <p>
          Consul provides a hierarchical key/value store with a simple HTTP API.
          Managing configuration has never been simpler.
        </p>
      </div>
-      <div class="terminal-item col-xs-12 col-lg-12">
+    </div>
+    <div class="row">
+      <div class="col-md-12">
        <div class="terminal">
-          <header>
-            <h4>Terminal</h4>
-            <ul class='shell-dots'>
-              <li></li>
-              <li></li>
-              <li></li>
-            </ul>
-          </header>
-          <div class="terminal-window">
-            <div class="terminal">
-              <div class="display">
-                <p class="command"><span class="txt-r">admin@hashicorp</span>: consul kv put foo bar</p>
-                <p>Success! Data written to: foo</p>
-                <p class="command"><span class="txt-r">admin@hashicorp</span>: consul kv get foo</p>
-                <p>bar</p>
-                <p class="command"><span class="txt-r">admin@hashicorp</span>: consul kv get -detailed foo</p>
-                <p>CreateIndex      5</p>
-                <p>Flags            0</p>
-                <p>Key              foo</p>
-                <p>LockIndex        0</p>
-                <p>ModifyIndex      5</p>
-                <p>Session          -</p>
-                <p>Value            bar</p>
-                <p class="command"><span class="txt-r">admin@hashicorp</span>: consul kv delete foo</p>
-                <p>Success! Deleted key: foo</p>
-                <p class="command"><span class="txt-r">admin@hashicorp</span>: <span class="cursor">&nbsp;</span></p>
-              </div>
-            </div>
+          <span class="circle"></span>
+          <span class="circle"></span>
+          <span class="circle"></span>
+          <div class="terminal-content">
+            <span><span class="text-pink">admin@hashicorp:</span> consul kv put foo bar</span>
+            <span>Success! Data written to: foo</span>
+            <span><span class="text-pink">admin@hashicorp:</span> consul kv get foo</span>
+            <span>bar</span>
+            <span><span class="text-pink">admin@hashicorp:</span> consul kv get -detailed foo</span>
+            <span>CreateIndex      5</span>
+            <span>Flags            0</span>
+            <span>Key              foo</span>
+            <span>LockIndex        0</span>
+            <span>ModifyIndex      5</span>
+            <span>Session          -</span>
+            <span>Value            bar</span>
+            <span><span class="text-pink">admin@hashicorp:</span> consul kv delete foo</span>
+            <span>Success! Deleted key: foo</span>
          </div>
        </div>
      </div>
-      <!-- /.terminal-item -->
    </div>
  </div>
-</div>
-<!-- /#demos -->
-<div id="cta">
+</section>
+
+<section id="cta" class="marketing">
  <div class="container">
    <div class="row">
-      <div class="intro">
-        <div class="left col-xs-12 col-sm-offset-2 col-sm-4">
-          <p>The intro and getting started guide contain
-            a simple and approachable walkthrough for running Consul locally.
-          </p>
-        </div>
-        <div class="col-xs-12 col-sm-6 col-sm-offset-0 right">
-          <a class="outline-btn purple" href="/intro/index.html">Read the intro &#187;</a>
-        </div>
-      </div>
+      <a class="button primary" href="/intro/index.html">Read the Introduction</a>
    </div>
  </div>
-</div>
+</section>
--- a/website/source/layouts/_announcement-bnr.erb
+++ b/website/source/layouts/_announcement-bnr.erb
@ -1,18 +0,0 @@
-<div id="announcement-bnr" class="-absolute">
-  <div class="container">
-    <div class="row">
-      <div class="col-xs-12">
-        <p>
-          Announcing
-          <a class="enterprise-logo" href="https://www.hashicorp.com/consul.html?utm_source=oss&utm_medium=top-banner&utm_campaign=consul">
-            <%= partial "layouts/svg/svg-enterprise" %>
-          </a>
-          <span class="tagline">Build Scalable and Resilient Microservice Infrastructure.</span>
-          <a class="link-highlight" href="https://www.hashicorp.com/consul.html?utm_source=oss&utm_medium=top-banner&utm_campaign=consul">
-            Find out more <span class="hcaret"></span>
-          </a>
-        </p>
-      </div>
-    </div>
-  </div>
-</div>
--- a/website/source/layouts/_footer.erb
+++ b/website/source/layouts/_footer.erb
@ -1,97 +0,0 @@
-<div id="footer" class="navigation">
-  <div class="container">
-    <div class="row">
-      <div class="col-xs-12">
-        <% if current_page.url != '/' %>
-          <div class="edit-page-link"><a href="<%= github_url :current_page %>">Edit this page</a></div>
-        <% end %>
-        <div>
-          <ul class="main-links white nav navbar-nav">
-            <li><a href="/intro/index.html">Intro</a></li>
-            <li><a href="/docs/index.html">Docs</a></li>
-            <li><a href="/community.html">Community</a></li>
-            <li><a href="/security.html">Security</a></li>
-    				<li><a href="http://demo.consul.io/">Demo</a></li>
-          </ul>
-          <ul class="external-links white nav navbar-nav">
-            <li class="first download">
-              <a href="/downloads.html"><%= partial "layouts/svg/svg-download" %>Download</a>
-            </li>
-            <li class="github">
-              <a href="https://github.com/hashicorp/consul"><%= partial "layouts/svg/svg-github" %>GitHub</a>
-            </li>
-          </ul>
-        </  div>
-        <div class="footer-hashi pull-right">
-          <div class="">
-            <a class="hashicorp-project white" href="https://www.hashicorp.com">
-              <span class="project-text">A </span>
-              <%= partial "layouts/svg/svg-by-hashicorp" %>
-              <span class="project-text">Project</span>
-              <%= partial "layouts/svg/svg-hashicorp-logo" %>
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-</div>
-
-<script>
-  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-
-  ga('create', 'UA-50021714-1', 'consul.io');
-  ga('require', 'linkid');
-  ga('send', 'pageview');
-</script>
-
-<script type="text/javascript">
-adroll_adv_id = "6QAAFJDIWBG3DJBDRJ7BEX";
-adroll_pix_id = "PYT5HSNKNRDS7LMUR5B6YG";
-(function () {
-var oldonload = window.onload;
-window.onload = function(){
-   __adroll_loaded=true;
-   var scr = document.createElement("script");
-   var host = (("https:" == document.location.protocol) ? "https://s.adroll.com" : "http://a.adroll.com");
-   scr.setAttribute('async', 'true');
-   scr.type = "text/javascript";
-   scr.src = host + "/j/roundtrip.js";
-   ((document.getElementsByTagName('head') || [null])[0] ||
-    document.getElementsByTagName('script')[0].parentNode).appendChild(scr);
-   if(oldonload){oldonload()}};
-}());
-</script>
-
-<%= javascript_include_tag 'application' %>
-
-<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
-<!--[if lt IE 9]>
-  <%= javascript_include_tag "ie-compat" %>
-<![endif]-->
-
-<script>
-	APP.initialize();
-</script>
-
-<script type="application/ld+json">
-{
-  "@context": "http://schema.org",
-  "@type": "Product",
-  "name": "Consul",
-  "alternateName": "Consul by HashiCorp",
-  "manufacturer": "HashiCorp",
-  "url": "https://www.consul.io",
-  "logo": "<%= File.join(base_url, image_path("logo_large.png")) %>",
-  "sameAs": [
-    "https://github.com/hashicorp/consul"
-  ]
-}
-</script>
-
-</body>
-</html>
--- a/website/source/layouts/_header.erb
+++ b/website/source/layouts/_header.erb
@ -1,83 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-
-    <title><%= title_for(current_page) %></title>
-    <meta name="description" content="<%= description_for(current_page) %>" />
-
-    <%= stylesheet_link_tag "application" %>
-
-    <meta name="HandheldFriendly" content="True" />
-    <meta name="MobileOptimized" content="320" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="white">
-
-    <link rel="shortcut icon" href="<%= image_path('favicon.png') %>">
-
-    <script type="text/javascript" src="//use.typekit.net/kgv0shi.js"></script>
-    <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
-
-    <!-- Google Tag Manager -->
-    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-    })(window,document,'script','dataLayer','GTM-NR2SD7C');</script>
-    <!-- End Google Tag Manager -->
-
-    <!-- Typekit script to import Klavika font -->
-    <script src="https://use.typekit.net/wxf7mfi.js"></script>
-    <script>try{Typekit.load({ async: true });}catch(e){}</script>
-
-    <%= yield_content :head %>
-  </head>
-
-  <body class="page-<%= current_page.data.page_title ? "#{current_page.data.page_title} layout-#{current_page.data.layout} page-sub" : "home layout-#{current_page.data.layout}" %> -displaying-bnr">
-    <!-- Google Tag Manager (noscript) -->
-    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NR2SD7C"
-    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
-    <!-- End Google Tag Manager (noscript) -->
-
-    <div id="header" class="navigation <%= current_page.data.page_title == "home" ? "" : "navbar-static-top" %>">
-      <%= mega_nav :consul %>
-      <div class="container">
-    		<div class="row">
-    			<div class="col-xs-12">
-    				<div class="navbar-header">
-    					<div class="navbar-brand">
-    						<a class="logo" href="/">Consul</a>
-    					</div>
-    					<button class="navbar-toggle white" type="button">
-    						<span class="sr-only">Toggle navigation</span>
-    						<span class="icon-bar"></span>
-    						<span class="icon-bar"></span>
-    						<span class="icon-bar"></span>
-    					</button>
-    				</div>
-    				<div class="buttons hidden-xs">
-    					<nav class="navigation-links" role="navigation">
-    						<ul class="external-links white nav navbar-nav navbar-right">
-    							<li class="first download">
-    								<a href="/downloads.html"><%= partial "layouts/svg/svg-download" %>Download</a>
-    							</li>
-    							<li class="github">
-    								<a href="https://github.com/hashicorp/consul"><%= partial "layouts/svg/svg-github" %>GitHub</a>
-    							</li>
-    						</ul>
-    						<ul class="main-links white nav navbar-nav navbar-right">
-    							<li class="first li-under"><a href="/intro/index.html">Intro</a></li>
-    							<li class="li-under"><a href="/docs/index.html">Docs</a></li>
-    							<li class="li-under"><a href="/community.html">Community</a></li>
-    							<li class="li-under"><a href="https://www.hashicorp.com/products/consul/">Enterprise</a></li>
-                                                        <li class="li-under"><a href="http://demo.consul.io/">Demo</a></li>
-    						</ul>
-    					</nav>
-    				</div>
-    			</div>
-    		</div>
-    	</div>
-    </div>
--- a/website/source/layouts/_sidebar.erb
+++ b/website/source/layouts/_sidebar.erb
@ -1,27 +1,29 @@
-<!-- Overlay for fixed sidebar -->
 <div class="sidebar-overlay"></div>

-<!-- Material sidebar -->
-<aside id="sidebar" class="sidebar sidebar-default sidebar-fixed-right" role="navigation">
-    <!-- Sidebar header -->
-    <div class="sidebar-header header-cover">
-        <!-- Sidebar brand image -->
-        <div class="sidebar-image">
-            <img src="<%= image_path('logo-header-gradient@2x.png') %>" width="50px" height="50px">
-        </div>
-    </div>
+<aside class="sidebar" role="navigation">
+  <div class="sidebar-header">
+    <%= inline_svg "logo-text.svg", height: 42, class: "logo" %>
+  </div>

-    <!-- Sidebar navigation -->
-    <ul class="main nav sidebar-nav">
-        <li class="first"><a href="/intro/index.html">Intro</a></li>
-        <li class=""><a href="/docs/index.html">Docs</a></li>
-        <li class=""><a href="/community.html">Community</a></li>
-        <li class=""><a href="http://demo.consul.io/">Demo</a></li>
-    </ul>
-    <div class="divider"></div>
-    <!-- Sidebar navigation 2-->
-    <ul class="external nav sidebar-nav">
-        <li class="first"><a class="v-btn gray sml" href="/downloads.html"><%= partial "layouts/svg/svg-download" %>Download</a></li>
-        <li class=""><a class="v-btn gray sml" href="https://github.com/hashicorp/consul"><%= partial "layouts/svg/svg-github" %>GitHub</a></li>
-    </ul>
+  <ul class="nav sidebar-nav">
+    <li><a href="/intro/index.html">Intro</a></li>
+    <li><a href="/docs/index.html">Docs</a></li>
+    <li><a href="/community.html">Community</a></li>
+    <li><a href="https://demo.consul.io/">Demo</a></li>
+  </ul>
+
+  <div class="divider"></div>
+
+  <ul class="external nav sidebar-nav">
+    <li>
+      <a href="/downloads.html">
+        <%= inline_svg "download.svg" %> Download
+      </a>
+    </li>
+    <li>
+      <a href="https://github.com/hashicorp/vault">
+        <%= inline_svg "github.svg" %> GitHub
+      </a>
+    </li>
+  </ul>
 </aside>
--- a/website/source/layouts/docs.erb
+++ b/website/source/layouts/docs.erb
@ -1,355 +1,301 @@
 <% wrap_layout :inner do %>
-	<% content_for :sidebar do %>
-		<div class="docs-sidebar hidden-print affix-top" role="complementary">
-			<ul class="nav docs-sidenav">
-				<li<%= sidebar_current("docs-home") %>>
-				<a href="/docs/index.html">Documentation Home</a>
-				</li>
-
-				<li<%= sidebar_current("docs-upgrading") %>>
-				<a href="/docs/upgrading.html">Upgrading and Compatibility</a>
-				<ul class="nav">
-					<li<%= sidebar_current("docs-upgrading-upgrading") %>>
-					<a href="/docs/upgrading.html">Upgrading Consul</a>
-					</li>
-
-					<li<%= sidebar_current("docs-upgrading-compat") %>>
-					<a href="/docs/compatibility.html">Compatibility Promise</a>
-					</li>
-
-					<li<%= sidebar_current("docs-upgrading-specific") %>>
-					<a href="/docs/upgrade-specific.html">Specific Version Details</a>
-					</li>
-				</ul>
-				</li>
-
-				<li<%= sidebar_current("docs-internals") %>>
-				<a href="/docs/internals/index.html">Consul Internals</a>
-				<ul class="nav">
-					<li<%= sidebar_current("docs-internals-architecture") %>>
-					<a href="/docs/internals/architecture.html">Architecture</a>
-					</li>
-
-					<li<%= sidebar_current("docs-internals-consensus") %>>
-					<a href="/docs/internals/consensus.html">Consensus Protocol</a>
-					</li>
-
-					<li<%= sidebar_current("docs-internals-gossip") %>>
-					<a href="/docs/internals/gossip.html">Gossip Protocol</a>
-					</li>
-
-					<li<%= sidebar_current("docs-internals-coordinates") %>>
-					<a href="/docs/internals/coordinates.html">Network Coordinates</a>
-					</li>
-
-					<li<%= sidebar_current("docs-internals-sessions") %>>
-					<a href="/docs/internals/sessions.html">Sessions</a>
-					</li>
-
-					<li<%= sidebar_current("docs-internals-acl") %>>
-					<a href="/docs/internals/acl.html">ACLs</a>
-					</li>
-
-					<li<%= sidebar_current("docs-internals-anti-entropy") %>>
-					<a href="/docs/internals/anti-entropy.html">Anti-Entropy</a>
-					</li>
-
-					<li<%= sidebar_current("docs-internals-security") %>>
-					<a href="/docs/internals/security.html">Security Model</a>
-					</li>
-
-					<li<%= sidebar_current("docs-internals-jepsen") %>>
-					<a href="/docs/internals/jepsen.html">Jepsen Testing</a>
-					</li>
-				</ul>
-				</li>
-
-				<li<%= sidebar_current("docs-commands") %>>
-				<a href="/docs/commands/index.html">Consul Commands (CLI)</a>
-				<ul class="nav">
-					<li<%= sidebar_current("docs-commands-agent") %>>
-					<a href="/docs/commands/agent.html">agent</a>
-					</li>
-
-					<li<%= sidebar_current("docs-commands-event") %>>
-					<a href="/docs/commands/event.html">event</a>
-					</li>
-
-					<li<%= sidebar_current("docs-commands-exec") %>>
-					<a href="/docs/commands/exec.html">exec</a>
-					</li>
-
-					<li<%= sidebar_current("docs-commands-forceleave") %>>
-					<a href="/docs/commands/force-leave.html">force-leave</a>
-					</li>
-
-					<li<%= sidebar_current("docs-commands-info") %>>
-					<a href="/docs/commands/info.html">info</a>
-					</li>
-
-					<li<%= sidebar_current("docs-commands-join") %>>
-					<a href="/docs/commands/join.html">join</a>
-					</li>
-
-					<li<%= sidebar_current("docs-commands-keygen") %>>
-					<a href="/docs/commands/keygen.html">keygen</a>
-					</li>
-
-					<li<%= sidebar_current("docs-commands-keyring") %>>
-					<a href="/docs/commands/keyring.html">keyring</a>
-					</li>
-
-					<li<%= sidebar_current("docs-commands-kv") %>>
-					<a href="/docs/commands/kv.html">kv</a>
-					<ul class="subnav">
-						<li<%= sidebar_current("docs-commands-kv-delete") %>>
-							<a href="/docs/commands/kv/delete.html">delete</a>
-						</li>
-						<li<%= sidebar_current("docs-commands-kv-export") %>>
-							<a href="/docs/commands/kv/export.html">export</a>
-						</li>
-						<li<%= sidebar_current("docs-commands-kv-get") %>>
-							<a href="/docs/commands/kv/get.html">get</a>
-						</li>
-						<li<%= sidebar_current("docs-commands-kv-import") %>>
-							<a href="/docs/commands/kv/import.html">import</a>
-						</li>
-						<li<%= sidebar_current("docs-commands-kv-put") %>>
-							<a href="/docs/commands/kv/put.html">put</a>
-						</li>
-					</ul>
-					</li>
-
-					<li<%= sidebar_current("docs-commands-leave") %>>
-					<a href="/docs/commands/leave.html">leave</a></li>
-
-					<li<%= sidebar_current("docs-commands-lock") %>>
-					<a href="/docs/commands/lock.html">lock</a>
-					</li>
-
-					<li<%= sidebar_current("docs-commands-maint") %>>
-					<a href="/docs/commands/maint.html">maint</a>
-					</li>
-
-					<li<%= sidebar_current("docs-commands-members") %>>
-					<a href="/docs/commands/members.html">members</a>
-					</li>
-
-					<li<%= sidebar_current("docs-commands-monitor") %>>
-					<a href="/docs/commands/monitor.html">monitor</a>
-					</li>
-
-					<li<%= sidebar_current("docs-commands-operator") %>>
-					<a href="/docs/commands/operator.html">operator</a>
-					<ul class="subnav">
-						<li<%= sidebar_current("docs-commands-operator-area") %>>
-						<a href="/docs/commands/operator/area.html">area</a>
-						</li>
-						<li<%= sidebar_current("docs-commands-operator-autopilot") %>>
-						<a href="/docs/commands/operator/autopilot.html">autopilot</a>
-						</li>
-						<li<%= sidebar_current("docs-commands-operator-raft") %>>
-						<a href="/docs/commands/operator/raft.html">raft</a>
-						</li>
-					</ul>
-					</li>
-
-					<li<%= sidebar_current("docs-commands-reload") %>>
-					<a href="/docs/commands/reload.html">reload</a>
-					</li>
-
-					<li<%= sidebar_current("docs-commands-rtt") %>>
-					<a href="/docs/commands/rtt.html">rtt</a>
-					</li>
-
-					<li<%= sidebar_current("docs-commands-snapshot") %>>
-					<a href="/docs/commands/snapshot.html">snapshot</a>
-					<ul class="subnav">
-						<li<%= sidebar_current("docs-commands-snapshot-agent") %>>
-							<a href="/docs/commands/snapshot/agent.html">agent</a>
-						</li>
-						<li<%= sidebar_current("docs-commands-snapshot-inspect") %>>
-							<a href="/docs/commands/snapshot/inspect.html">inspect</a>
-						</li>
-						<li<%= sidebar_current("docs-commands-snapshot-restore") %>>
-							<a href="/docs/commands/snapshot/restore.html">restore</a>
-						</li>
-						<li<%= sidebar_current("docs-commands-snapshot-save") %>>
-							<a href="/docs/commands/snapshot/save.html">save</a>
-						</li>
-					</ul>
-					</li>
-
-					<li<%= sidebar_current("docs-commands-validate") %>>
-					<a href="/docs/commands/validate.html">validate</a>
-					</li>
-
-
-					<li<%= sidebar_current("docs-commands-version") %>>
-					<a href="/docs/commands/version.html">version</a>
-					</li>
-
-					<li<%= sidebar_current("docs-commands-watch") %>>
-					<a href="/docs/commands/watch.html">watch</a>
-					</li>
-				</ul>
-				</li>
-
-				<li<%= sidebar_current("docs-agent") %>>
-				<a href="/docs/agent/basics.html">Consul Agent</a>
-				<ul class="nav">
-					<li<%= sidebar_current("docs-agent-running") %>>
-					<a href="/docs/agent/basics.html">Running and Stopping</a>
-					</li>
-
-					<li<%= sidebar_current("docs-agent-dns") %>>
-					<a href="/docs/agent/dns.html">DNS Interface</a>
-					</li>
-
-					<li<%= sidebar_current("docs-agent-http") %>>
-					<a href="/docs/agent/http.html">HTTP API</a>
-					<ul class="subnav">
-						<li<%= sidebar_current("docs-agent-http-acl") %>>
-						<a href="/docs/agent/http/acl.html">ACLs</a>
-						</li>
-
-						<li<%= sidebar_current("docs-agent-http-agent") %>>
-						<a href="/docs/agent/http/agent.html">Agent</a>
-						</li>
-
-						<li<%= sidebar_current("docs-agent-http-catalog") %>>
-						<a href="/docs/agent/http/catalog.html">Catalog</a>
-						</li>
-
-						<li<%= sidebar_current("docs-agent-http-event") %>>
-						<a href="/docs/agent/http/event.html">Events</a>
-						</li>
-
-						<li<%= sidebar_current("docs-agent-http-health") %>>
-						<a href="/docs/agent/http/health.html">Health Checks</a>
-						</li>
-
-						<li<%= sidebar_current("docs-agent-http-kv") %>>
-						<a href="/docs/agent/http/kv.html">Key/Value Store</a>
-						</li>
-
-						<li<%= sidebar_current("docs-agent-http-coordinate") %>>
-						<a href="/docs/agent/http/coordinate.html">Network Coordinates</a>
-						</li>
-
-						<li<%= sidebar_current("docs-agent-http-operator") %>>
-						<a href="/docs/agent/http/operator.html">Operator</a>
-						</li>
-
-						<li<%= sidebar_current("docs-agent-http-query") %>>
-						<a href="/docs/agent/http/query.html">Prepared Queries</a>
-						</li>
-
-						<li<%= sidebar_current("docs-agent-http-session") %>>
-						<a href="/docs/agent/http/session.html">Sessions</a>
-						</li>
-
-						<li<%= sidebar_current("docs-agent-http-snapshot") %>>
-						<a href="/docs/agent/http/snapshot.html">Snapshots</a>
-						</li>
-
-						<li<%= sidebar_current("docs-agent-http-status") %>>
-						<a href="/docs/agent/http/status.html">Status</a>
-						</li>
-					</ul>
-					</li>
-
-					<li<%= sidebar_current("docs-agent-config") %>>
-					<a href="/docs/agent/options.html">Configuration</a>
-					</li>
-
-					<li<%= sidebar_current("docs-agent-services") %>>
-					<a href="/docs/agent/services.html">Service Definitions</a>
-					</li>
-
-					<li<%= sidebar_current("docs-agent-checks") %>>
-					<a href="/docs/agent/checks.html">Check Definitions</a>
-					</li>
-
-					<li<%= sidebar_current("docs-agent-encryption") %>>
-					<a href="/docs/agent/encryption.html">Encryption</a>
-					</li>
-
-					<li<%= sidebar_current("docs-agent-rpc") %>>
-					<a href="/docs/agent/rpc.html">RPC Protocol</a>
-					</li>
-
-					<li<%= sidebar_current("docs-agent-telemetry") %>>
-					<a href="/docs/agent/telemetry.html">Telemetry</a>
-					</li>
-
-					<li<%= sidebar_current("docs-agent-watches") %>>
-					<a href="/docs/agent/watches.html">Watches</a>
-					</li>
-				</ul>
-
-				<li<%= sidebar_current("docs-guides") %>>
-				<a href="/docs/guides/index.html">Guides</a>
-				<ul class="nav">
-					<li<%= sidebar_current("docs-guides-atlas") %>>
-					<a href="/docs/guides/atlas.html">Atlas Integration</a>
-					</li>
-
-					<li<%= sidebar_current("docs-guides-servers") %>>
-					<a href="/docs/guides/servers.html">Adding/Removing Servers</a>
-					</li>
-
-					<li<%= sidebar_current("docs-guides-autopilot") %>>
-					<a href="/docs/guides/autopilot.html">Autopilot</a>
-					</li>
-
-					<li<%= sidebar_current("docs-guides-bootstrapping") %>>
-					<a href="/docs/guides/bootstrapping.html">Bootstrapping</a>
-					</li>
-
-					<li<%= sidebar_current("docs-guides-dns-cache") %>>
-					<a href="/docs/guides/dns-cache.html">DNS Caching</a>
-					</li>
-
-					<li<%= sidebar_current("docs-guides-forwarding") %>>
-					<a href="/docs/guides/forwarding.html">DNS Forwarding</a>
-					</li>
-
-					<li<%= sidebar_current("docs-guides-external") %>>
-					<a href="/docs/guides/external.html">External Services</a>
-					</li>
-
-					<li<%= sidebar_current("docs-guides-areas") %>>
-					<a href="/docs/guides/areas.html">Federation (Advanced)</a>
-					</li>
-
-					<li<%= sidebar_current("docs-guides-datacenters") %>>
-					<a href="/docs/guides/datacenters.html">Federation (Basic)</a>
-					</li>
-
-					<li<%= sidebar_current("docs-guides-leader") %>>
-					<a href="/docs/guides/leader-election.html">Leader Election</a>
-					</li>
-
-					<li<%= sidebar_current("docs-guides-outage") %>>
-					<a href="/docs/guides/outage.html">Outage Recovery</a>
-					</li>
-
-					<li<%= sidebar_current("docs-guides-semaphore") %>>
-					<a href="/docs/guides/semaphore.html">Semaphore</a>
-					</li>
-
-					<li<%= sidebar_current("docs-guides-performance") %>>
-					<a href="/docs/guides/performance.html">Server Performance</a>
-					</li>
-				</ul>
-
-				<li<%= sidebar_current("docs-faq") %>>
-				<a href="/docs/faq.html">Frequently Asked Questions</a>
-				</li>
-			</ul>
-		</div>
-	<% end %>
-
-	<%= yield %>
-	<% end %>
+  <% content_for :sidebar do %>
+    <ul class="nav docs-sidenav">
+      <li<%= sidebar_current("docs-home") %>>
+        <a href="/docs/index.html">Documentation Home</a>
+      </li>
+
+      <li<%= sidebar_current("docs-upgrading") %>>
+        <a href="/docs/upgrading.html">Upgrading and Compatibility</a>
+        <ul class="nav">
+          <li<%= sidebar_current("docs-upgrading-upgrading") %>>
+            <a href="/docs/upgrading.html">Upgrading Consul</a>
+          </li>
+          <li<%= sidebar_current("docs-upgrading-compat") %>>
+            <a href="/docs/compatibility.html">Compatibility Promise</a>
+          </li>
+          <li<%= sidebar_current("docs-upgrading-specific") %>>
+            <a href="/docs/upgrade-specific.html">Specific Version Details</a>
+          </li>
+        </ul>
+      </li>
+
+      <li<%= sidebar_current("docs-internals") %>>
+        <a href="/docs/internals/index.html">Consul Internals</a>
+        <ul class="nav">
+          <li<%= sidebar_current("docs-internals-architecture") %>>
+            <a href="/docs/internals/architecture.html">Architecture</a>
+          </li>
+          <li<%= sidebar_current("docs-internals-consensus") %>>
+            <a href="/docs/internals/consensus.html">Consensus Protocol</a>
+          </li>
+          <li<%= sidebar_current("docs-internals-gossip") %>>
+            <a href="/docs/internals/gossip.html">Gossip Protocol</a>
+          </li>
+          <li<%= sidebar_current("docs-internals-coordinates") %>>
+            <a href="/docs/internals/coordinates.html">Network Coordinates</a>
+          </li>
+          <li<%= sidebar_current("docs-internals-sessions") %>>
+            <a href="/docs/internals/sessions.html">Sessions</a>
+          </li>
+          <li<%= sidebar_current("docs-internals-acl") %>>
+            <a href="/docs/internals/acl.html">ACLs</a>
+          </li>
+          <li<%= sidebar_current("docs-internals-anti-entropy") %>>
+            <a href="/docs/internals/anti-entropy.html">Anti-Entropy</a>
+          </li>
+          <li<%= sidebar_current("docs-internals-security") %>>
+            <a href="/docs/internals/security.html">Security Model</a>
+          </li>
+          <li<%= sidebar_current("docs-internals-jepsen") %>>
+            <a href="/docs/internals/jepsen.html">Jepsen Testing</a>
+          </li>
+        </ul>
+      </li>
+
+      <li<%= sidebar_current("docs-commands") %>>
+        <a href="/docs/commands/index.html">Consul Commands (CLI)</a>
+        <ul class="nav">
+          <li<%= sidebar_current("docs-commands-agent") %>>
+            <a href="/docs/commands/agent.html">agent</a>
+          </li>
+          <li<%= sidebar_current("docs-commands-event") %>>
+            <a href="/docs/commands/event.html">event</a>
+          </li>
+          <li<%= sidebar_current("docs-commands-exec") %>>
+            <a href="/docs/commands/exec.html">exec</a>
+          </li>
+          <li<%= sidebar_current("docs-commands-forceleave") %>>
+            <a href="/docs/commands/force-leave.html">force-leave</a>
+          </li>
+          <li<%= sidebar_current("docs-commands-info") %>>
+            <a href="/docs/commands/info.html">info</a>
+          </li>
+          <li<%= sidebar_current("docs-commands-join") %>>
+            <a href="/docs/commands/join.html">join</a>
+          </li>
+          <li<%= sidebar_current("docs-commands-keygen") %>>
+            <a href="/docs/commands/keygen.html">keygen</a>
+          </li>
+          <li<%= sidebar_current("docs-commands-keyring") %>>
+            <a href="/docs/commands/keyring.html">keyring</a>
+          </li>
+          <li<%= sidebar_current("docs-commands-kv") %>>
+            <a href="/docs/commands/kv.html">kv</a>
+            <ul class="nav">
+              <li<%= sidebar_current("docs-commands-kv-delete") %>>
+                <a href="/docs/commands/kv/delete.html">delete</a>
+              </li>
+              <li<%= sidebar_current("docs-commands-kv-export") %>>
+                <a href="/docs/commands/kv/export.html">export</a>
+              </li>
+              <li<%= sidebar_current("docs-commands-kv-get") %>>
+                <a href="/docs/commands/kv/get.html">get</a>
+              </li>
+              <li<%= sidebar_current("docs-commands-kv-import") %>>
+                <a href="/docs/commands/kv/import.html">import</a>
+              </li>
+              <li<%= sidebar_current("docs-commands-kv-put") %>>
+                <a href="/docs/commands/kv/put.html">put</a>
+              </li>
+            </ul>
+          </li>
+
+          <li<%= sidebar_current("docs-commands-leave") %>>
+            <a href="/docs/commands/leave.html">leave</a>
+          </li>
+          <li<%= sidebar_current("docs-commands-lock") %>>
+            <a href="/docs/commands/lock.html">lock</a>
+          </li>
+          <li<%= sidebar_current("docs-commands-maint") %>>
+            <a href="/docs/commands/maint.html">maint</a>
+          </li>
+          <li<%= sidebar_current("docs-commands-members") %>>
+            <a href="/docs/commands/members.html">members</a>
+          </li>
+          <li<%= sidebar_current("docs-commands-monitor") %>>
+            <a href="/docs/commands/monitor.html">monitor</a>
+          </li>
+
+          <li<%= sidebar_current("docs-commands-operator") %>>
+            <a href="/docs/commands/operator.html">operator</a>
+            <ul class="nav">
+              <li<%= sidebar_current("docs-commands-operator-area") %>>
+                <a href="/docs/commands/operator/area.html">area</a>
+              </li>
+              <li<%= sidebar_current("docs-commands-operator-autopilot") %>>
+                <a href="/docs/commands/operator/autopilot.html">autopilot</a>
+              </li>
+              <li<%= sidebar_current("docs-commands-operator-raft") %>>
+                <a href="/docs/commands/operator/raft.html">raft</a>
+              </li>
+            </ul>
+          </li>
+
+          <li<%= sidebar_current("docs-commands-reload") %>>
+            <a href="/docs/commands/reload.html">reload</a>
+          </li>
+          <li<%= sidebar_current("docs-commands-rtt") %>>
+            <a href="/docs/commands/rtt.html">rtt</a>
+          </li>
+
+          <li<%= sidebar_current("docs-commands-snapshot") %>>
+            <a href="/docs/commands/snapshot.html">snapshot</a>
+            <ul class="nav">
+              <li<%= sidebar_current("docs-commands-snapshot-agent") %>>
+                <a href="/docs/commands/snapshot/agent.html">agent</a>
+              </li>
+              <li<%= sidebar_current("docs-commands-snapshot-inspect") %>>
+                <a href="/docs/commands/snapshot/inspect.html">inspect</a>
+              </li>
+              <li<%= sidebar_current("docs-commands-snapshot-restore") %>>
+                <a href="/docs/commands/snapshot/restore.html">restore</a>
+              </li>
+              <li<%= sidebar_current("docs-commands-snapshot-save") %>>
+                <a href="/docs/commands/snapshot/save.html">save</a>
+              </li>
+            </ul>
+          </li>
+
+          <li<%= sidebar_current("docs-commands-validate") %>>
+            <a href="/docs/commands/validate.html">validate</a>
+          </li>
+          <li<%= sidebar_current("docs-commands-version") %>>
+            <a href="/docs/commands/version.html">version</a>
+          </li>
+          <li<%= sidebar_current("docs-commands-watch") %>>
+            <a href="/docs/commands/watch.html">watch</a>
+          </li>
+        </ul>
+      </li>
+
+      <li<%= sidebar_current("docs-agent") %>>
+        <a href="/docs/agent/basics.html">Consul Agent</a>
+        <ul class="nav">
+          <li<%= sidebar_current("docs-agent-running") %>>
+            <a href="/docs/agent/basics.html">Running and Stopping</a>
+          </li>
+
+          <li<%= sidebar_current("docs-agent-dns") %>>
+            <a href="/docs/agent/dns.html">DNS Interface</a>
+          </li>
+
+          <li<%= sidebar_current("docs-agent-http") %>>
+            <a href="/docs/agent/http.html">HTTP API</a>
+            <ul class="nav">
+              <li<%= sidebar_current("docs-agent-http-acl") %>>
+              <a href="/docs/agent/http/acl.html">ACLs</a>
+              </li>
+              <li<%= sidebar_current("docs-agent-http-agent") %>>
+              <a href="/docs/agent/http/agent.html">Agent</a>
+              </li>
+              <li<%= sidebar_current("docs-agent-http-catalog") %>>
+              <a href="/docs/agent/http/catalog.html">Catalog</a>
+              </li>
+              <li<%= sidebar_current("docs-agent-http-event") %>>
+              <a href="/docs/agent/http/event.html">Events</a>
+              </li>
+              <li<%= sidebar_current("docs-agent-http-health") %>>
+              <a href="/docs/agent/http/health.html">Health Checks</a>
+              </li>
+              <li<%= sidebar_current("docs-agent-http-kv") %>>
+              <a href="/docs/agent/http/kv.html">Key/Value Store</a>
+              </li>
+              <li<%= sidebar_current("docs-agent-http-coordinate") %>>
+              <a href="/docs/agent/http/coordinate.html">Network Coordinates</a>
+              </li>
+              <li<%= sidebar_current("docs-agent-http-operator") %>>
+              <a href="/docs/agent/http/operator.html">Operator</a>
+              </li>
+              <li<%= sidebar_current("docs-agent-http-query") %>>
+              <a href="/docs/agent/http/query.html">Prepared Queries</a>
+              </li>
+              <li<%= sidebar_current("docs-agent-http-session") %>>
+              <a href="/docs/agent/http/session.html">Sessions</a>
+              </li>
+              <li<%= sidebar_current("docs-agent-http-snapshot") %>>
+              <a href="/docs/agent/http/snapshot.html">Snapshots</a>
+              </li>
+              <li<%= sidebar_current("docs-agent-http-status") %>>
+              <a href="/docs/agent/http/status.html">Status</a>
+              </li>
+            </ul>
+          </li>
+
+          <li<%= sidebar_current("docs-agent-config") %>>
+            <a href="/docs/agent/options.html">Configuration</a>
+          </li>
+          <li<%= sidebar_current("docs-agent-services") %>>
+            <a href="/docs/agent/services.html">Service Definitions</a>
+          </li>
+          <li<%= sidebar_current("docs-agent-checks") %>>
+            <a href="/docs/agent/checks.html">Check Definitions</a>
+          </li>
+          <li<%= sidebar_current("docs-agent-encryption") %>>
+            <a href="/docs/agent/encryption.html">Encryption</a>
+          </li>
+          <li<%= sidebar_current("docs-agent-rpc") %>>
+            <a href="/docs/agent/rpc.html">RPC Protocol</a>
+          </li>
+          <li<%= sidebar_current("docs-agent-telemetry") %>>
+            <a href="/docs/agent/telemetry.html">Telemetry</a>
+          </li>
+          <li<%= sidebar_current("docs-agent-watches") %>>
+            <a href="/docs/agent/watches.html">Watches</a>
+          </li>
+        </ul>
+      </li>
+
+      <li<%= sidebar_current("docs-guides") %>>
+        <a href="/docs/guides/index.html">Guides</a>
+        <ul class="nav">
+          <li<%= sidebar_current("docs-guides-atlas") %>>
+            <a href="/docs/guides/atlas.html">Atlas Integration</a>
+          </li>
+          <li<%= sidebar_current("docs-guides-servers") %>>
+            <a href="/docs/guides/servers.html">Adding/Removing Servers</a>
+          </li>
+          <li<%= sidebar_current("docs-guides-autopilot") %>>
+            <a href="/docs/guides/autopilot.html">Autopilot</a>
+          </li>
+          <li<%= sidebar_current("docs-guides-bootstrapping") %>>
+            <a href="/docs/guides/bootstrapping.html">Bootstrapping</a>
+          </li>
+          <li<%= sidebar_current("docs-guides-dns-cache") %>>
+            <a href="/docs/guides/dns-cache.html">DNS Caching</a>
+          </li>
+          <li<%= sidebar_current("docs-guides-forwarding") %>>
+            <a href="/docs/guides/forwarding.html">DNS Forwarding</a>
+          </li>
+          <li<%= sidebar_current("docs-guides-external") %>>
+            <a href="/docs/guides/external.html">External Services</a>
+          </li>
+          <li<%= sidebar_current("docs-guides-areas") %>>
+            <a href="/docs/guides/areas.html">Federation (Advanced)</a>
+          </li>
+          <li<%= sidebar_current("docs-guides-datacenters") %>>
+            <a href="/docs/guides/datacenters.html">Federation (Basic)</a>
+          </li>
+          <li<%= sidebar_current("docs-guides-leader") %>>
+            <a href="/docs/guides/leader-election.html">Leader Election</a>
+          </li>
+          <li<%= sidebar_current("docs-guides-outage") %>>
+            <a href="/docs/guides/outage.html">Outage Recovery</a>
+          </li>
+          <li<%= sidebar_current("docs-guides-semaphore") %>>
+            <a href="/docs/guides/semaphore.html">Semaphore</a>
+          </li>
+          <li<%= sidebar_current("docs-guides-performance") %>>
+            <a href="/docs/guides/performance.html">Server Performance</a>
+          </li>
+        </ul>
+      </li>
+
+      <li<%= sidebar_current("docs-faq") %>>
+        <a href="/docs/faq.html">Frequently Asked Questions</a>
+      </li>
+    </ul>
+  <% end %>
+
+  <%= yield %>
+<% end %>
--- a/website/source/layouts/downloads.erb
+++ b/website/source/layouts/downloads.erb
@ -1,17 +1,15 @@
 <% wrap_layout :inner do %>
-	<% content_for :sidebar do %>
-		<div class="docs-sidebar hidden-print affix-top" role="complementary">
-			<ul class="nav docs-sidenav">
-				<li<%= sidebar_current("downloads-consul") %>>
-				<a href="/downloads.html">Download Consul</a>
-				</li>
+  <% content_for :sidebar do %>
+    <ul class="nav docs-sidenav">
+      <li<%= sidebar_current("downloads-consul") %>>
+      <a href="/downloads.html">Download Consul</a>
+      </li>

-				<li<%= sidebar_current("downloads-tools") %>>
-				<a href="/downloads_tools.html">Download Consul Tools</a>
-				</li>
-			</ul>
-		</div>
-	<% end %>
+      <li<%= sidebar_current("downloads-tools") %>>
+      <a href="/downloads_tools.html">Download Consul Tools</a>
+      </li>
+    </ul>
+  <% end %>

-	<%= yield %>
-	<% end %>
+  <%= yield %>
+<% end %>
--- a/website/source/layouts/inner.erb
+++ b/website/source/layouts/inner.erb
@ -1,12 +1,13 @@
 <% wrap_layout :layout do %>
-	<div class="container">
-	<div class="col-md-4">
-		<%= yield_content :sidebar %>
-	</div>  <!-- /col-md-4 -->
-	<div id="main-content" class="col-md-8" role="main">
-		<div class="bs-docs-section">
-			<%= yield %>
-		</div>
-	</div>
+<div class="container">
+  <div class="row">
+    <div id="docs-sidebar" class="col-sm-3 col-md-3 col-xs-12 hidden-print" role="complementary">
+      <%= yield_content :sidebar %>
+    </div>
+
+    <div id="inner" class="col-sm-9 col-md-9 col-xs-12" role="main">
+      <%= yield %>
+    </div>
+  </div>
 </div>
 <% end %>
--- a/website/source/layouts/intro.erb
+++ b/website/source/layouts/intro.erb
@ -1,88 +1,72 @@
 <% wrap_layout :inner do %>
-	<% content_for :sidebar do %>
-		<div class="docs-sidebar hidden-print affix-top" role="complementary">
-			<ul class="nav docs-sidenav">
-				<li<%= sidebar_current("what") %>>
-				<a href="/intro/index.html">What is Consul?</a>
-				</li>
+  <% content_for :sidebar do %>
+    <ul class="nav docs-sidenav">
+      <li<%= sidebar_current("what") %>>
+        <a href="/intro/index.html">What is Consul?</a>
+      </li>

-				<li<%= sidebar_current("vs-other") %>>
-				<a href="/intro/vs/index.html">Consul vs. Other Software</a>
-				<ul class="nav">
-					<li<%= sidebar_current("vs-other-zk") %>>
-					<a href="/intro/vs/zookeeper.html">ZooKeeper, doozerd, etcd</a>
-					</li>
+      <li<%= sidebar_current("vs-other") %>>
+        <a href="/intro/vs/index.html">Consul vs. Other Software</a>
+        <ul class="nav">
+          <li<%= sidebar_current("vs-other-zk") %>>
+            <a href="/intro/vs/zookeeper.html">ZooKeeper, doozerd, etcd</a>
+          </li>
+          <li<%= sidebar_current("vs-other-chef") %>>
+            <a href="/intro/vs/chef-puppet.html">Chef, Puppet, etc.</a>
+          </li>
+          <li<%= sidebar_current("vs-other-nagios-sensu") %>>
+            <a href="/intro/vs/nagios-sensu.html">Nagios, Sensu</a>
+          </li>
+          <li<%= sidebar_current("vs-other-skydns") %>>
+            <a href="/intro/vs/skydns.html">SkyDNS</a>
+          </li>
+          <li<%= sidebar_current("vs-other-smartstack") %>>
+            <a href="/intro/vs/smartstack.html">SmartStack</a>
+          </li>
+          <li<%= sidebar_current("vs-other-serf") %>>
+            <a href="/intro/vs/serf.html">Serf</a>
+          </li>
+          <li<%= sidebar_current("vs-other-custom") %>>
+            <a href="/intro/vs/custom.html">Custom Solutions</a>
+          </li>
+        </ul>
+      </li>

-					<li<%= sidebar_current("vs-other-chef") %>>
-					<a href="/intro/vs/chef-puppet.html">Chef, Puppet, etc.</a>
-                    </li>
+      <li<%= sidebar_current("hashicorp-ecosystem") %>>
+        <a href="/intro/hashicorp-ecosystem.html">Consul &amp; the HashiCorp Ecosystem</a>
+      </li>

-					<li<%= sidebar_current("vs-other-nagios-sensu") %>>
-					<a href="/intro/vs/nagios-sensu.html">Nagios, Sensu</a>
-                    </li>
+      <li<%= sidebar_current("gettingstarted") %>>
+        <a href="/intro/getting-started/install.html">Getting Started</a>
+        <ul class="nav">
+          <li<%= sidebar_current("gettingstarted-install") %>>
+            <a href="/intro/getting-started/install.html">Install Consul</a>
+          </li>
+          <li<%= sidebar_current("gettingstarted-agent") %>>
+            <a href="/intro/getting-started/agent.html">Run the Agent</a>
+          </li>
+          <li<%= sidebar_current("gettingstarted-services") %>>
+            <a href="/intro/getting-started/services.html">Services</a>
+          </li>
+          <li<%= sidebar_current("gettingstarted-join") %>>
+            <a href="/intro/getting-started/join.html">Consul Cluster</a>
+          </li>
+          <li<%= sidebar_current("gettingstarted-checks") %>>
+            <a href="/intro/getting-started/checks.html">Health Checks</a>
+          </li>
+          <li<%= sidebar_current("gettingstarted-kv") %>>
+            <a href="/intro/getting-started/kv.html">Key/Value Data</a>
+          </li>
+          <li<%= sidebar_current("gettingstarted-ui") %>>
+            <a href="/intro/getting-started/ui.html">Web UI</a>
+          </li>
+          <li<%= sidebar_current("gettingstarted-nextsteps") %>>
+            <a href="/intro/getting-started/next-steps.html">Next Steps</a>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  <% end %>

-					<li<%= sidebar_current("vs-other-skydns") %>>
-					<a href="/intro/vs/skydns.html">SkyDNS</a>
-                    </li>
-
-					<li<%= sidebar_current("vs-other-smartstack") %>>
-					<a href="/intro/vs/smartstack.html">SmartStack</a>
-                    </li>
-
-					<li<%= sidebar_current("vs-other-serf") %>>
-					<a href="/intro/vs/serf.html">Serf</a>
-                    </li>
-
-					<li<%= sidebar_current("vs-other-custom") %>>
-					<a href="/intro/vs/custom.html">Custom Solutions</a>
-					</li>
-				</ul>
-				</li>
-
-				<li<%= sidebar_current("hashicorp-ecosystem") %>>
-				<a href="/intro/hashicorp-ecosystem.html">Consul & the HashiCorp Ecosystem</a>
-				</li>
-
-				<li<%= sidebar_current("gettingstarted") %>>
-				<a href="/intro/getting-started/install.html">Getting Started</a>
-				<ul class="nav">
-					<li<%= sidebar_current("gettingstarted-install") %>>
-					<a href="/intro/getting-started/install.html">Install Consul</a>
-					</li>
-
-					<li<%= sidebar_current("gettingstarted-agent") %>>
-					<a href="/intro/getting-started/agent.html">Run the Agent</a>
-					</li>
-
-					<li<%= sidebar_current("gettingstarted-services") %>>
-					<a href="/intro/getting-started/services.html">Services</a>
-					</li>
-
-					<li<%= sidebar_current("gettingstarted-join") %>>
-					<a href="/intro/getting-started/join.html">Consul Cluster</a>
-					</li>
-
-					<li<%= sidebar_current("gettingstarted-checks") %>>
-					<a href="/intro/getting-started/checks.html">Health Checks</a>
-					</li>
-
-					<li<%= sidebar_current("gettingstarted-kv") %>>
-					<a href="/intro/getting-started/kv.html">Key/Value Data</a>
-					</li>
-
-					<li<%= sidebar_current("gettingstarted-ui") %>>
-					<a href="/intro/getting-started/ui.html">Web UI</a>
-					</li>
-
-					<li<%= sidebar_current("gettingstarted-nextsteps") %>>
-					<a href="/intro/getting-started/next-steps.html">Next Steps</a>
-					</li>
-
-				</ul>
-				</li>
-			</ul>
-		</div>
-	<% end %>
-
-	<%= yield %>
+  <%= yield %>
 <% end %>
--- a/website/source/layouts/layout.erb
+++ b/website/source/layouts/layout.erb
@ -1,4 +1,139 @@
-<%= partial "layouts/header" %>
-<%= partial "layouts/sidebar" %>
-<%= yield %>
-<%= partial "layouts/footer" %>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="<%= description_for(current_page) %>">
+
+    <link rel="apple-touch-icon" sizes="180x180" href="<%= image_path("favicons/apple-touch-icon.png") %>">
+    <link rel="icon" type="image/png" href="<%= image_path("favicons/favicon-32x32.png") %>" sizes="32x32">
+    <link rel="icon" type="image/png" href="<%= image_path("favicons/favicon-16x16.png") %>" sizes="16x16">
+    <link rel="manifest" href="/android-manifest.json">
+    <link rel="mask-icon" href="<%= image_path("favicons/safari-pinned-tab.svg") %>" color="#23414a">
+    <meta name="msapplication-config" content="/microsoft-tile.xml" />
+    <meta name="theme-color" content="#ffffff">
+
+    <title><%= title_for(current_page) %></title>
+
+    <%= stylesheet_link_tag "application" %>
+
+    <!--[if lt IE 9]>
+      <%= javascript_include_tag "ie-compat" %>
+    <![endif]-->
+    <%= javascript_include_tag "application" %>
+
+    <!-- Google Tag Manager -->
+    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','GTM-NR2SD7C');</script>
+
+    <!-- Typekit script to import Klavika font -->
+    <script src="https://use.typekit.net/wxf7mfi.js"></script>
+    <script>try{Typekit.load({ async: true });}catch(e){}</script>
+
+    <%= yield_content :head %>
+  </head>
+
+  <body id="<%= body_id_for(current_page) %>" class="<%= body_classes_for(current_page) %>">
+
+    <%= mega_nav :consul %>
+
+    <div id="header" class="navigation navbar-static-top hidden-print">
+      <div class="container">
+        <div class="row">
+          <div class="col-xs-12">
+            <div class="navbar-header">
+              <div class="navbar-brand">
+                <a href="/" data-turbolinks="false">
+                  <%= inline_svg "logo-text.svg", height: 50, class: "logo" %>
+                </a>
+              </div>
+              <button class="navbar-toggle" type="button">
+                <span class="sr-only">Toggle navigation</span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+              </button>
+            </div>
+            <div class="buttons hidden-xs">
+              <nav class="navigation-links" role="navigation">
+                <ul class="main-links nav navbar-nav navbar-right">
+                  <li><a href="/intro/index.html">Intro</a></li>
+                  <li><a href="/docs/index.html">Docs</a></li>
+                  <li><a href="/community.html">Community</a></li>
+                  <li><a href="https://www.hashicorp.com/vault.html?utm_source=oss&utm_medium=header-nav&utm_campaign=vault">Enterprise</a></li>
+                  <li>
+                    <a href="/downloads.html">
+                      <%= inline_svg "download.svg" %> Download
+                    </a>
+                  </li>
+                  <li>
+                    <a href="https://github.com/hashicorp/vault">
+                      <%= inline_svg "github.svg" %> GitHub
+                    </a>
+                  </li>
+                </ul>
+              </nav>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <%= partial "layouts/sidebar" %>
+
+    <%= yield %>
+
+    <div id="footer" class="navigation hidden-print">
+      <div class="container">
+        <div class="row">
+          <div class="col-xs-12">
+            <ul class="footer-links nav navbar-nav">
+              <li><a href="/intro/index.html">Intro</a></li>
+              <li><a href="/docs/index.html">Docs</a></li>
+              <li><a href="/community.html">Community</a></li>
+              <li><a href="/security.html">Security</a></li>
+              <li><a href="http://demo.consul.io/">Demo</a></li>
+            </ul>
+            <ul class="footer-links nav navbar-nav navbar-right">
+              <li><a href="<%= github_url :current_page %>">Edit this page</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+      ga('create', 'UA-50021714-1', 'consul.io');
+      ga('require', 'linkid');
+      ga('send', 'pageview', location.pathname);
+    </script>
+
+    <script type="application/ld+json">
+      {
+        "@context": "http://schema.org",
+        "@type": "Product",
+        "name": "Consul",
+        "alternateName": "Consul by HashiCorp",
+        "manufacturer": "HashiCorp",
+        "url": "https://www.consul.io",
+        "logo": "<%= File.join(base_url, image_path("logo-text.svg")) %>",
+        "sameAs": [
+          "https://github.com/hashicorp/consul"
+        ]
+      }
+    </script>
+
+    <script>
+    	APP.initialize();
+    </script>
+  </body>
+</html>
--- a/Show More
+++ b/Show More