diff --git a/website/source/assets/fonts/dejavu/DejaVuSansMono.woff b/website/source/assets/fonts/dejavu/DejaVuSansMono.woff
new file mode 100644
index 000000000..b896d1d76
Binary files /dev/null and b/website/source/assets/fonts/dejavu/DejaVuSansMono.woff differ
diff --git a/website/source/assets/fonts/dejavu/DejaVuSansMono.woff2 b/website/source/assets/fonts/dejavu/DejaVuSansMono.woff2
new file mode 100644
index 000000000..bfd9b06e5
Binary files /dev/null and b/website/source/assets/fonts/dejavu/DejaVuSansMono.woff2 differ
diff --git a/website/source/assets/fonts/gilmer/gilmer-bold.woff b/website/source/assets/fonts/gilmer/gilmer-bold.woff
new file mode 100644
index 000000000..9ac3a190e
Binary files /dev/null and b/website/source/assets/fonts/gilmer/gilmer-bold.woff differ
diff --git a/website/source/assets/fonts/gilmer/gilmer-bold.woff2 b/website/source/assets/fonts/gilmer/gilmer-bold.woff2
new file mode 100644
index 000000000..22793f9a1
Binary files /dev/null and b/website/source/assets/fonts/gilmer/gilmer-bold.woff2 differ
diff --git a/website/source/assets/fonts/gilmer/gilmer-light.woff b/website/source/assets/fonts/gilmer/gilmer-light.woff
new file mode 100644
index 000000000..c04be8c6e
Binary files /dev/null and b/website/source/assets/fonts/gilmer/gilmer-light.woff differ
diff --git a/website/source/assets/fonts/gilmer/gilmer-light.woff2 b/website/source/assets/fonts/gilmer/gilmer-light.woff2
new file mode 100644
index 000000000..5dab907f5
Binary files /dev/null and b/website/source/assets/fonts/gilmer/gilmer-light.woff2 differ
diff --git a/website/source/assets/fonts/gilmer/gilmer-medium.woff b/website/source/assets/fonts/gilmer/gilmer-medium.woff
new file mode 100644
index 000000000..e248e37d6
Binary files /dev/null and b/website/source/assets/fonts/gilmer/gilmer-medium.woff differ
diff --git a/website/source/assets/fonts/gilmer/gilmer-medium.woff2 b/website/source/assets/fonts/gilmer/gilmer-medium.woff2
new file mode 100644
index 000000000..3ebe650a7
Binary files /dev/null and b/website/source/assets/fonts/gilmer/gilmer-medium.woff2 differ
diff --git a/website/source/assets/fonts/gilmer/gilmer-regular.woff b/website/source/assets/fonts/gilmer/gilmer-regular.woff
new file mode 100644
index 000000000..c66fc5614
Binary files /dev/null and b/website/source/assets/fonts/gilmer/gilmer-regular.woff differ
diff --git a/website/source/assets/fonts/gilmer/gilmer-regular.woff2 b/website/source/assets/fonts/gilmer/gilmer-regular.woff2
new file mode 100644
index 000000000..e92be881e
Binary files /dev/null and b/website/source/assets/fonts/gilmer/gilmer-regular.woff2 differ
diff --git a/website/source/assets/fonts/metro/metro-sans-bold.woff b/website/source/assets/fonts/metro/metro-sans-bold.woff
new file mode 100644
index 000000000..4c0afc9a8
Binary files /dev/null and b/website/source/assets/fonts/metro/metro-sans-bold.woff differ
diff --git a/website/source/assets/fonts/metro/metro-sans-bold.woff2 b/website/source/assets/fonts/metro/metro-sans-bold.woff2
new file mode 100644
index 000000000..c951fb5ec
Binary files /dev/null and b/website/source/assets/fonts/metro/metro-sans-bold.woff2 differ
diff --git a/website/source/assets/fonts/metro/metro-sans-book.woff b/website/source/assets/fonts/metro/metro-sans-book.woff
new file mode 100644
index 000000000..588b6f9b6
Binary files /dev/null and b/website/source/assets/fonts/metro/metro-sans-book.woff differ
diff --git a/website/source/assets/fonts/metro/metro-sans-book.woff2 b/website/source/assets/fonts/metro/metro-sans-book.woff2
new file mode 100644
index 000000000..2c6caaa2a
Binary files /dev/null and b/website/source/assets/fonts/metro/metro-sans-book.woff2 differ
diff --git a/website/source/assets/fonts/metro/metro-sans-regular.woff b/website/source/assets/fonts/metro/metro-sans-regular.woff
new file mode 100644
index 000000000..54dc8b8af
Binary files /dev/null and b/website/source/assets/fonts/metro/metro-sans-regular.woff differ
diff --git a/website/source/assets/fonts/metro/metro-sans-regular.woff2 b/website/source/assets/fonts/metro/metro-sans-regular.woff2
new file mode 100644
index 000000000..068be635b
Binary files /dev/null and b/website/source/assets/fonts/metro/metro-sans-regular.woff2 differ
diff --git a/website/source/assets/fonts/metro/metro-sans-semi-bold.woff b/website/source/assets/fonts/metro/metro-sans-semi-bold.woff
new file mode 100644
index 000000000..87a27bd4f
Binary files /dev/null and b/website/source/assets/fonts/metro/metro-sans-semi-bold.woff differ
diff --git a/website/source/assets/fonts/metro/metro-sans-semi-bold.woff2 b/website/source/assets/fonts/metro/metro-sans-semi-bold.woff2
new file mode 100644
index 000000000..49346e532
Binary files /dev/null and b/website/source/assets/fonts/metro/metro-sans-semi-bold.woff2 differ
diff --git a/website/source/assets/javascripts/api-toc.js b/website/source/assets/javascripts/api-toc.js
index 0ece169bf..9cc3278dc 100644
--- a/website/source/assets/javascripts/api-toc.js
+++ b/website/source/assets/javascripts/api-toc.js
@@ -11,7 +11,7 @@ document.addEventListener('turbolinks:load', function() {
         // Build the quick-nav HTML:
         $("#inner h1").first().after(
             '<div id="inner-quicknav">' +
-                '<span id="inner-quicknav-trigger">' +
+                '<span id="inner-quicknav-trigger" class="g-type-label">' +
                     'Jump to Section' +
                     '<svg width="9" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M8.811 1.067a.612.612 0 0 0 0-.884.655.655 0 0 0-.908 0L4.5 3.491 1.097.183a.655.655 0 0 0-.909 0 .615.615 0 0 0 0 .884l3.857 3.75a.655.655 0 0 0 .91 0l3.856-3.75z" fill-rule="evenodd"/></svg>' +
                 '</span>' +
diff --git a/website/source/assets/stylesheets/_alert.css b/website/source/assets/stylesheets/_alert.css
index e15946d9b..c7a82f316 100644
--- a/website/source/assets/stylesheets/_alert.css
+++ b/website/source/assets/stylesheets/_alert.css
@@ -21,26 +21,19 @@
       }
 
 .g-alert span{
-    font-size: 16px;
     background-color: white;
     text-transform:uppercase;
     padding:3px 10px;
     border:1px solid #1563ff;
     border-radius:3px;
-    font-weight:600;
-    font-size:1.25rem;
-    line-height:16px;
     margin-right:12px;
     color:black;
     white-space:nowrap;
     vertical-align: middle;
   }
 .g-alert p{
-    font-size: 16px;
     background-color: white;
     color:black;
-    font-size:16px;
-    line-height:23px;
     margin:0;
     vertical-align: middle;
   }
@@ -58,7 +51,6 @@
   background:linear-gradient(90deg, #1563ff 1.56%, #08368b 100%);
   color:#ffffff;
   display:none;
-  font-weight:600;
   overflow:hidden;
   position:relative;
   transition:height 0.3s ease-out
diff --git a/website/source/assets/stylesheets/_api.scss b/website/source/assets/stylesheets/_api.scss
index 9178cb340..5b9c02c90 100644
--- a/website/source/assets/stylesheets/_api.scss
+++ b/website/source/assets/stylesheets/_api.scss
@@ -65,9 +65,7 @@
   margin-left: 10px;
 
   span {
-    line-height: 20px;
     cursor: pointer;
-    font-variant-caps: all-small-caps;
     color: #666;
 
     svg {
@@ -87,7 +85,7 @@
     width: 80%;
     box-shadow: 0px 4px 12px -2px rgba(63, 68, 85, 0.5);
     border-radius: 3px;
-    padding: 2rem;
+    padding: 20px;
     position: absolute;
     z-index: 1;
     background-color: white;
diff --git a/website/source/assets/stylesheets/_buttons.scss b/website/source/assets/stylesheets/_buttons.scss
index 1e022cfdc..56b649288 100755
--- a/website/source/assets/stylesheets/_buttons.scss
+++ b/website/source/assets/stylesheets/_buttons.scss
@@ -1,16 +1,16 @@
 .button {
   background: $button-background;
-  border: 1px solid $button-font-color;
-  box-shadow: 3px 4px 0 rgba(0,0,0,0.1);
+  border: 1px solid #d6d6d7;
+  border-radius: 1px;
+  box-sizing: border-box;
   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;
+  font-weight: $font-weight-medium;
+  line-height: 1.6em;
   margin-bottom: 4px;
-  padding: 10px 30px;
-  text-transform: uppercase;
+  padding: 13px 19px;
   text-decoration: none;
 
   &:hover,
@@ -19,25 +19,54 @@
     text-decoration: none;
   }
 
+  &:focus {
+    border: 3px solid $nomad-l1;
+    color: $button-font-color;
+    outline: none;
+    padding: 11px 17px;
+  }
+
   &:hover {
-    background: $button-font-color;
-    border: 1px solid $button-font-color;
-    color: $button-background;
+    background: #eaeaeb;
+    border: 1px solid #d6d6d7;
+    color: $button-font-color;
+    padding: 13px 19px;
+  }
+
+  &:active {
+    background: #dfdfe0;
+    border: 1px solid #d6d6d7;
+    color: $button-font-color;
+    padding: 13px 19px;
   }
 
   &.primary {
     background: $button-primary-background;
-    border: 1px solid darken($button-primary-background, 5%);
-    color: $button-primary-font-color;
+    border: none;
+    color: $white;
+    padding: 14px 20px;
+
+    &:focus {
+      border: 3px solid $nomad-l1;
+      padding: 11px 17px;
+    }
 
     &:hover {
-      background: lighten($button-primary-background, 5%);
+      background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
+        $button-primary-background;
+      border: none;
+      padding: 14px 20px;
+    }
+
+    &:active {
+      background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
+        $button-primary-background;
+      border: none;
+      padding: 14px 20px;
     }
   }
 
   &.inline {
     padding: 8px 14px;
-    font-size: $font-size - 2;
-    line-height: 14px;
   }
 }
diff --git a/website/source/assets/stylesheets/_docs.scss b/website/source/assets/stylesheets/_docs.scss
index ccbbf2135..87fedc002 100755
--- a/website/source/assets/stylesheets/_docs.scss
+++ b/website/source/assets/stylesheets/_docs.scss
@@ -9,20 +9,17 @@
     li {
       a {
         color: $sidebar-link-color;
-        font-size: $sidebar-font-size;
         padding: 10px 0 10px 15px;
 
         &:before {
           color: $sidebar-link-color-active;
-          content: '\203A';
-          font-size: $font-size;
+          content: "\203A";
           left: 0;
-          line-height: 100%;
           opacity: 0.4;
           position: absolute;
 
           height: 100%;
-          width: 8px
+          width: 8px;
         }
 
         &:focus,
diff --git a/website/source/assets/stylesheets/_downloads.scss b/website/source/assets/stylesheets/_downloads.scss
index 97a4dfc66..6b8bf6e84 100644
--- a/website/source/assets/stylesheets/_downloads.scss
+++ b/website/source/assets/stylesheets/_downloads.scss
@@ -17,6 +17,7 @@ body.layout-downloads {
           padding-left: 20px;
 
           h2 {
+            @extend .g-type-display-4;
             margin-top: 4px;
             border: none;
           }
@@ -46,7 +47,6 @@ body.layout-downloads {
         }
 
         .os-name {
-          font-size: 40px;
           margin-bottom: -3px;
         }
       }
diff --git a/website/source/assets/stylesheets/_fonts.scss b/website/source/assets/stylesheets/_fonts.scss
new file mode 100644
index 000000000..2f57998bd
--- /dev/null
+++ b/website/source/assets/stylesheets/_fonts.scss
@@ -0,0 +1,74 @@
+/* Display Font (Gilmer) */
+@font-face {
+  font-family: "gilmer-web";
+  src: url("/assets/fonts/gilmer/gilmer-light.woff2") format("woff2"),
+    url("/assets/fonts/gilmer/gilmer-light.woff") format("woff");
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "gilmer-web";
+  src: url("/assets/fonts/gilmer/gilmer-regular.woff2") format("woff2"),
+    url("/assets/fonts/gilmer/gilmer-regular.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "gilmer-web";
+  src: url("/assets/fonts/gilmer/gilmer-medium.woff2") format("woff2"),
+    url("/assets/fonts/gilmer/gilmer-medium.woff") format("woff");
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "gilmer-web";
+  src: url("/assets/fonts/gilmer/gilmer-bold.woff2") format("woff2"),
+    url("/assets/fonts/gilmer/gilmer-bold.woff") format("woff");
+  font-weight: 700;
+  font-style: normal;
+}
+
+/* Body Font (Metro) */
+@font-face {
+  font-family: "metro-web";
+  src: url("/assets/fonts/metro/metro-sans-book.woff2") format("woff2"),
+    url("/assets/fonts/metro/metro-sans-book.woff") format("woff");
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "metro-web";
+  src: url("/assets/fonts/metro/metro-sans-regular.woff2") format("woff2"),
+    url("/assets/fonts/metro/metro-sans-regular.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "metro-web";
+  src: url("/assets/fonts/metro/metro-sans-semi-bold.woff2") format("woff2"),
+    url("/assets/fonts/metro/metro-sans-semi-bold.woff") format("woff");
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "metro-web";
+  src: url("/assets/fonts/metro/metro-sans-bold.woff2") format("woff2"),
+    url("/assets/fonts/metro/metro-sans-bold.woff") format("woff");
+  font-weight: 700;
+  font-style: normal;
+}
+
+/* Code Font (Deja Vu) */
+@font-face {
+  font-family: "dejavu-sans-mono-web";
+  src: url("/assets/fonts/dejavu/DejaVuSansMono.woff2") format("woff2"),
+    url("/assets/fonts/dejavu/DejaVuSansMono.woff") format("woff");
+  font-style: normal;
+  font-weight: 400;
+}
diff --git a/website/source/assets/stylesheets/_footer.scss b/website/source/assets/stylesheets/_footer.scss
index ae34a057a..17143350f 100644
--- a/website/source/assets/stylesheets/_footer.scss
+++ b/website/source/assets/stylesheets/_footer.scss
@@ -6,7 +6,7 @@
       a {
         color: $footer-link-color;
         font-size: $footer-font-size;
-        font-family: $font-family-open-sans;
+        font-family: $font-body;
         text-decoration: none;
 
         &:hover, &:focus, &:active {
diff --git a/website/source/assets/stylesheets/_global.scss b/website/source/assets/stylesheets/_global.scss
index 8ebc6fd75..69d034642 100755
--- a/website/source/assets/stylesheets/_global.scss
+++ b/website/source/assets/stylesheets/_global.scss
@@ -1,4 +1,5 @@
 html {
+  font-size: $font-size-default;
   height: 100%;
   min-height: 100%;
   text-rendering: optimizeLegibility;
@@ -9,22 +10,13 @@ body {
   -webkit-font-smoothing: antialiased;
   color: $body-font-color;
   background-color: $white;
-  font-size: $font-size;
-  font-family: $font-family-open-sans;
+  font-size: $font-size-default;
+  font-family: $font-body;
   font-weight: $font-weight-reg;
   height: 100%;
   min-height: 100%;
 }
 
-h1, h2, h3, h4, h5 {
-  font-family: $font-family-klavika;
-  -webkit-font-smoothing: antialiased;
-}
-
-h1 {
-  margin-bottom: 24px;
-}
-
 @media (min-width: $screen-sm) and (max-width: $screen-md) {
   .container {
     padding: 0;
diff --git a/website/source/assets/stylesheets/_header.scss b/website/source/assets/stylesheets/_header.scss
index dde70d7d6..54e661fc9 100755
--- a/website/source/assets/stylesheets/_header.scss
+++ b/website/source/assets/stylesheets/_header.scss
@@ -42,7 +42,7 @@
       a {
         color: $header-link-color;
         font-size: $header-font-size;
-        font-family: $font-family-open-sans;
+        font-family: $font-body;
         font-weight: $font-weight-bold;
         height: $header-height;
         line-height: $header-height;
diff --git a/website/source/assets/stylesheets/_home.scss b/website/source/assets/stylesheets/_home.scss
index 0856807ad..ce9ffcceb 100755
--- a/website/source/assets/stylesheets/_home.scss
+++ b/website/source/assets/stylesheets/_home.scss
@@ -22,7 +22,9 @@
         a {
           color: $home-header-link-color;
 
-          &:hover, &:focus, &:active {
+          &:hover,
+          &:focus,
+          &:active {
             background-color: transparent;
             color: $home-header-link-color-hover;
 
@@ -44,6 +46,10 @@
       margin: 140px auto 160px auto;
       text-align: center;
 
+      h1 {
+        margin: 24px 0 40px 0;
+      }
+
       .button {
         margin: 5px;
 
@@ -66,63 +72,29 @@
   }
 
   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: 20px 0 10px 0;
-      padding: 0;
-      text-transform: uppercase;
-    }
-
     h3 {
       color: $black;
-      font-size: 20px;
-      font-weight: $font-weight-bold;;
-      line-height: 1.2;
       margin: 50px 0 15px 0;
-      text-transform: uppercase;
-    }
-
-    p {
-      font-family: $font-family-open-sans;
-      font-size: 16px;
-      letter-spacing: 0.01em;
-      line-height: 1.5;
-      margin: 0 0 10px;
-
-      &.lead {
-        font-size: 20px;
-        margin: 30px 0 30px 0;
-      }
     }
 
     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;
     }
 
     &.green {
-      background: $nomad-green;
+      background: $nomad;
 
-      h2, h3 {
+      h2,
+      h3 {
         color: $white;
       }
 
       p {
         color: $white;
-        font-weight: $font-weight-reg;
       }
 
       a {
@@ -138,20 +110,20 @@
 
       span.callout {
         background: $white;
-        color: $nomad-green;
+        color: $nomad;
       }
     }
 
     &.gray {
-      background: #EDEDED;
+      background: #ededed;
 
-      h2, h3 {
+      h2,
+      h3 {
         color: $black;
       }
 
       p {
         color: $black;
-        font-weight: $font-weight-reg;
       }
 
       span.callout {
@@ -163,13 +135,13 @@
     &.black {
       background: $black;
 
-      h2, h3 {
+      h2,
+      h3 {
         color: $white;
       }
 
       p {
         color: $white;
-        font-weight: $font-weight-reg;
       }
 
       a {
@@ -215,7 +187,7 @@
         padding: 0;
       }
 
-      @media(max-width: $screen-sm) {
+      @media (max-width: $screen-sm) {
         svg {
           margin: 60px auto;
         }
@@ -230,16 +202,18 @@
         padding: 0;
       }
     }
+
+    .get-started {
+      margin-top: 32px;
+    }
   }
 
   .terminal {
+    @extend .g-type-code;
     border: 1px solid $white;
     background: $black;
     box-sizing: border-box;
     color: $white;
-    font-family: $font-family-monospace;
-    font-size: 15px;
-    line-height: 1.8;
     margin: 20px auto auto auto;
     padding: 10px 20px 20px 20px;
 
@@ -262,20 +236,19 @@
         }
 
         &.text-bold {
-          font-weight: bold;
+          font-weight: $font-weight-bold;
         }
 
-
         &.text-green {
-          color: lighten($nomad-green, 20%);
+          color: lighten($nomad, 20%);
         }
 
         &.text-blue {
-          color: #71A4F5;
+          color: #71a4f5;
         }
 
         &.text-orange {
-          color: #F5BF49;
+          color: #f5bf49;
         }
       }
     }
diff --git a/website/source/assets/stylesheets/_inner.scss b/website/source/assets/stylesheets/_inner.scss
index 6bcabfd52..338c400f7 100644
--- a/website/source/assets/stylesheets/_inner.scss
+++ b/website/source/assets/stylesheets/_inner.scss
@@ -1,33 +1,39 @@
 #inner {
+  h1 {
+    @extend .g-type-display-2;
+  }
+
+  h2 {
+    @extend .g-type-display-3;
+  }
+
+  h3 {
+    @extend .g-type-display-4;
+  }
+
+  h4 {
+    @extend .g-type-display-5;
+  }
+
+  h5,
+  h6 {
+    @extend .g-type-display-6;
+  }
+
   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;
+    @extend .g-type-long-body;
+    margin: 0 0 $font-size-default;
   }
 
   .alert p:last-child {
     margin-bottom: 0;
   }
 
-  pre,
-  code,
-  pre code,
-  tt {
-    font-family: $font-family-monospace;
-    font-size: $font-size - 2;
-    line-height: 1.6;
-  }
-
   pre {
     padding: 20px;
-    margin: 0 0 $font-size;
-    padding: 20px;
-    margin: 0 0 $font-size;
+    margin: 0 0 $font-size-default;
 
     // This will force the code to scroll horizontally on small screens
     // instead of wrapping.
@@ -65,8 +71,7 @@
   h4 {
     color: $body-font-color;
     margin-top: 54px;
-    margin-bottom: $font-size;
-    line-height: 1.3;
+    margin-bottom: $font-size-default;
   }
 
   h2 {
@@ -79,16 +84,10 @@
   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%;
+  h6 > code {
     background-color: transparent;
     color: inherit;
+    font-size: 90%;
     padding: 0;
   }
 
diff --git a/website/source/assets/stylesheets/_logos.scss b/website/source/assets/stylesheets/_logos.scss
index f100dd04a..63d708d30 100644
--- a/website/source/assets/stylesheets/_logos.scss
+++ b/website/source/assets/stylesheets/_logos.scss
@@ -3,17 +3,17 @@ svg.logo {
     opacity: 1.0;
 
     path.top {
-      fill: $nomad-green;
+      fill: #25BA81;
       opacity: 1.0;
     }
 
     path.left {
-      fill: $nomad-green;
+      fill: #25BA81;
       opacity: 1.0;
     }
 
     path.right {
-      fill: $nomad-green-dark;
+      fill: #1F9967;
       opacity: 1.0;
     }
 
@@ -50,7 +50,7 @@ svg.logo {
     }
 
     path.n {
-      fill: $nomad-green;
+      fill: #25BA81;
       opacity: 1.0;
     }
 
diff --git a/website/source/assets/stylesheets/_typography.scss b/website/source/assets/stylesheets/_typography.scss
new file mode 100644
index 000000000..cd8ef8752
--- /dev/null
+++ b/website/source/assets/stylesheets/_typography.scss
@@ -0,0 +1,283 @@
+/* HashiCorp-style headings */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: $font-display;
+  font-weight: $font-weight-bold;
+  font-kerning: normal;
+  -webkit-font-smoothing: antialiased;
+}
+
+pre,
+code,
+pre code,
+tt {
+  @extend .g-type-code;
+}
+
+/* Display 1 */
+.g-type-display-1 {
+  font-family: $font-display;
+  font-weight: $font-weight-bold;
+  font-size: 2.125rem;
+  letter-spacing: -0.008em;
+  line-height: 1.265em;
+
+  @media (min-width: 768px) {
+    font-size: 2.625rem;
+    letter-spacing: -0.01em;
+    line-height: 1.19em;
+  }
+
+  @media (min-width: 1120px) {
+    font-size: 3.125rem;
+    line-height: 1.2em;
+  }
+}
+
+/* Display 2 */
+.g-type-display-2 {
+  font-family: $font-display;
+  font-weight: $font-weight-bold;
+  font-size: 1.75rem;
+  letter-spacing: -0.004em;
+  line-height: 1.286em;
+
+  @media (min-width: 768px) {
+    font-size: 2.125rem;
+    letter-spacing: -0.008em;
+    line-height: 1.265em;
+  }
+
+  @media (min-width: 1120px) {
+    font-size: 2.5rem;
+    letter-spacing: -0.01em;
+    line-height: 1.25em;
+  }
+}
+
+/* Display 3 */
+.g-type-display-3 {
+  font-family: $font-display;
+  font-weight: $font-weight-bold;
+  font-size: 1.5rem;
+  letter-spacing: -0.004em;
+  line-height: 1.375em;
+
+  @media (min-width: 768px) {
+    font-size: 1.75rem;
+    line-height: 1.321em;
+  }
+
+  @media (min-width: 1120px) {
+    font-size: 2rem;
+    letter-spacing: -0.006em;
+    line-height: 1.313em;
+  }
+}
+
+/* Display 4 */
+.g-type-display-4 {
+  font-family: $font-display;
+  font-weight: $font-weight-bold;
+  font-size: 1.313rem;
+  line-height: 1.429em;
+
+  @media (min-width: 768px) {
+    font-size: 1.438rem;
+    letter-spacing: -0.004em;
+    line-height: 1.391em;
+  }
+
+  @media (min-width: 1120px) {
+    font-size: 1.5rem;
+    line-height: 1.417em;
+  }
+}
+
+/* Display 5 */
+.g-type-display-5 {
+  font-family: $font-display;
+  font-weight: $font-weight-bold;
+  font-size: 1.125rem;
+  line-height: 1.556em;
+}
+
+/* Display 6 */
+.g-type-display-6 {
+  font-family: $font-display;
+  font-weight: $font-weight-bold;
+  font-size: 1rem;
+  line-height: 1.5em;
+}
+
+/* Body Large */
+.g-type-body-large {
+  font-family: $font-body;
+  font-weight: $font-weight-reg;
+  font-size: 1.188rem;
+  letter-spacing: 0.01em;
+  line-height: 1.579em;
+
+  @media (min-width: 1120px) {
+    font-size: 1.25rem;
+    line-height: 1.55em;
+  }
+}
+
+/* Body */
+.g-type-body {
+  font-family: $font-body;
+  font-weight: $font-weight-reg;
+  font-size: 1.063rem;
+  letter-spacing: 0.01em;
+  line-height: 1.647em;
+}
+
+/* Body - Strong */
+.g-type-body-strong {
+  font-family: $font-body;
+  font-weight: $font-weight-semi-bold;
+  font-size: 1.063rem;
+  letter-spacing: 0.01em;
+  line-height: 1.647em;
+}
+
+/* Body - X Strong */
+.g-type-body-x-strong {
+  font-family: $font-body;
+  font-weight: $font-weight-bold;
+  font-size: 1.063rem;
+  letter-spacing: 0.01em;
+  line-height: 1.647em;
+}
+
+/* Body - Italic */
+.g-type-body-italic {
+  font-family: $font-body;
+  font-weight: $font-weight-reg;
+  font-size: 1.063rem;
+  letter-spacing: 0.01em;
+  line-height: 1.647em;
+  font-style: italic;
+}
+
+/* Body Small */
+.g-type-body-small {
+  font-family: $font-body;
+  font-weight: $font-weight-reg;
+  font-size: 0.938rem;
+  letter-spacing: 0.01em;
+  line-height: 1.667em;
+}
+
+/* Body Small - Strong */
+.g-type-body-small-strong {
+  font-family: $font-body;
+  font-weight: $font-weight-semi-bold;
+  font-size: 0.938rem;
+  letter-spacing: 0.01em;
+  line-height: 1.667em;
+}
+
+/* Body Small - X Strong */
+.g-type-body-small-x-strong {
+  font-family: $font-body;
+  font-weight: $font-weight-bold;
+  font-size: 0.938rem;
+  letter-spacing: 0.01em;
+  line-height: 1.667em;
+}
+
+/* Body Small - Italic */
+.g-type-body-small-italic {
+  font-family: $font-body;
+  font-weight: $font-weight-reg;
+  font-size: 0.938rem;
+  letter-spacing: 0.01em;
+  line-height: 1.667em;
+  font-style: italic;
+}
+
+/* Long Body */
+.g-type-long-body {
+  font-family: $font-body;
+  font-weight: $font-weight-reg;
+  font-size: 1.063rem;
+  letter-spacing: 0.01em;
+  line-height: 1.765em;
+}
+
+/* Long Body Strong */
+.g-type-long-body-strong {
+  font-family: $font-body;
+  font-weight: $font-weight-semi-bold;
+  font-size: 1.063rem;
+  letter-spacing: 0.01em;
+  line-height: 1.765em;
+}
+
+/* Long Body Italic */
+.g-type-long-body-italic {
+  font-family: $font-body;
+  font-weight: $font-weight-reg;
+  font-size: 1.063rem;
+  letter-spacing: 0.01em;
+  line-height: 1.765em;
+  font-style: italic;
+}
+
+/* Buttons and standalone links */
+.g-type-buttons-and-standalone-links {
+  font-family: $font-display;
+  font-weight: $font-weight-medium;
+  font-size: 0.938rem;
+  line-height: 1.6em;
+}
+
+/* Header Nav */
+.g-type-header-nav {
+  font-family: $font-display;
+  font-weight: $font-weight-medium;
+  font-size: 0.875rem;
+  line-height: 1.429em;
+}
+
+/* Label */
+.g-type-label {
+  font-family: $font-display;
+  font-weight: $font-weight-medium;
+  font-size: 0.75rem;
+  letter-spacing: 0.08em;
+  line-height: 1.5em;
+  text-transform: uppercase;
+}
+
+/* Label - Strong */
+.g-type-label-strong {
+  font-family: $font-display;
+  font-weight: $font-weight-bold;
+  font-size: 0.75rem;
+  letter-spacing: 0.08em;
+  line-height: 1.5em;
+  text-transform: uppercase;
+}
+
+/* Tag Label */
+.g-type-tag-label {
+  font-family: $font-body;
+  font-weight: $font-weight-bold;
+  font-size: 0.75rem;
+  line-height: 1.333em;
+}
+
+/* Code */
+.g-type-code {
+  font-family: $font-monospace;
+  font-weight: $font-weight-reg;
+  font-size: 0.844rem;
+  line-height: 1.63em;
+}
diff --git a/website/source/assets/stylesheets/_variables.scss b/website/source/assets/stylesheets/_variables.scss
index 0ae121d83..8fd397393 100755
--- a/website/source/assets/stylesheets/_variables.scss
+++ b/website/source/assets/stylesheets/_variables.scss
@@ -1,34 +1,66 @@
 // Colors
-$white: #FFFFFF;
+$white: #ffffff;
 $black: #000000;
-$gray: #555555;
-$gray-light: #CCCCCC;
+$gray: #1d1e23;
+$gray-light: #cccccc;
 
-$consul-pink: #D62783;
-$consul-pink-dark: #961D59;
-$nomad-green: #25BA81;
-$nomad-green-dark:#1F9967;
-$packer-blue: #1DAEFF;
-$packer-blue-dark: #1D94DD;
-$terraform-purple: #5C4EE5;
-$terraform-purple-dark: #4040B2;
-$vagrant-blue: #1563FF;
-$vagrant-blue-dark: #104EB2;
-$vault-black: #000000;
-$vault-blue: #00ABE0;
-$vault-gray: #919FA8;
+$vagrant-l3: #eff5ff;
+$vagrant-l2: #d0e0ff;
+$vagrant-l1: #66a2ff;
+$vagrant: #1563ff;
+$vagrant-d1: #0d44cc;
+$vagrant-d2: #08368b;
+$packer-l3: #ebf8ff;
+$packer-l2: #bfe8fe;
+$packer-l1: #6bceff;
+$packer: #00acff;
+$packer-d1: #0074ba;
+$packer-d2: #005283;
+$nomad-l3: #ebfdf7;
+$nomad-l2: #c1f1e0;
+$nomad-l1: #6bd8b4;
+$nomad-on-dark: #00bc7f;
+$nomad: #00bc7f;
+$nomad-d1: #007854;
+$nomad-d2: #004c3a;
+$terraform-l3: #f5f3ff;
+$terraform-l2: #ddd6fa;
+$terraform-l1: #a28ce8;
+$terraform-on-dark: #7c65ef;
+$terraform: #623ce4;
+$terraform-d1: #3c2aa8;
+$terraform-d2: #2a1c73;
+$consul-l3: #fff2f8;
+$consul-l2: #f8d9e7;
+$consul-l1: #e07eac;
+$consul-on-dark: #e03a89;
+$consul: #ca2171;
+$consul-d1: #8e134a;
+$consul-d2: #650d34;
+$vault-l3: #f7f7f9;
+$vault-l2: #dcdde0;
+$vault-l1: #bdbec2;
+$vault: #4c4c53;
+$vault-d1: #323339;
+$vault-d2: #1d1e23;
 
 // Typography
-$font-family-klavika:   'klavika-web', Helvetica, sans-serif;
-$font-family-open-sans: 'Open Sans', sans-serif;
-$font-family-monospace: 'Fira Mono', monospace;
-$font-size:             15px;
-$font-weight-reg:       400;
-$font-weight-bold:      600;
+$font-size-default: 16px;
+$font-weight-light: 300;
+$font-weight-book: $font-weight-light;
+$font-weight-reg: 400;
+$font-weight-medium: 500;
+$font-weight-semi-bold: 600;
+$font-weight-bold: 700;
+$font-display: "gilmer-web", "Gilmer", Geneva, Tahoma, Helvetica, Verdana,
+  sans-serif;
+$font-body: "metro-web", "Metro", -apple-system, BlinkMacSystemFont, "Segoe UI",
+  Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+$font-monospace: "dejavu-sans-mono-web", monospace;
 
 // Body
 $body-font-color: $gray;
-$body-link-color: $nomad-green;
+$body-link-color: $nomad;
 
 // Home
 $home-header-background-color: transparent;
@@ -37,30 +69,30 @@ $home-header-link-color-hover: $black;
 
 // Sidebar
 $sidebar-background-color: $white;
-$sidebar-font-size: $font-size - 2;
+$sidebar-font-size: $font-size-default - 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-family: $font-body;
 $sidebar-font-weight: $font-weight-reg;
 
 // Header
-$header-background-color: $nomad-green;
-$header-font-size: $font-size - 2;
+$header-background-color: $nomad;
+$header-font-size: $font-size-default - 2;
 $header-height: 92px;
 $header-link-color: rgba($white, 0.85);
 $header-link-color-hover: $white;
 
 // Footer
-$footer-font-size: $font-size - 2;
+$footer-font-size: $font-size-default - 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-color: $black;
+$button-font-family: $font-display;
+$button-font-size: 0.938rem;
 $button-font-weight: $font-weight-bold;
-$button-primary-background: $nomad-green;
+$button-primary-background: $nomad;
 $button-primary-font-color: $white;
diff --git a/website/source/assets/stylesheets/application.scss b/website/source/assets/stylesheets/application.scss
index 7b46bc0fb..fedb910a1 100755
--- a/website/source/assets/stylesheets/application.scss
+++ b/website/source/assets/stylesheets/application.scss
@@ -1,7 +1,8 @@
 @import 'bootstrap-sprockets';
 @import 'bootstrap';
 
-@import url('https://fonts.googleapis.com/css?family=Fira+Mono|Open+Sans:400,600');
+// Fonts
+@import '_fonts';
 
 // Mega Nav
 @import 'hashicorp/mega-nav';
@@ -15,6 +16,9 @@
 // Sidebar
 @import 'hashicorp/sidebar';
 
+// Typography
+@import '_typography';
+
 //Global Site
 @import '_global';
 
diff --git a/website/source/downloads.html.erb b/website/source/downloads.html.erb
index b20d028f4..391440f05 100644
--- a/website/source/downloads.html.erb
+++ b/website/source/downloads.html.erb
@@ -45,7 +45,7 @@ description: |-
       <div class="col-md-12 download">
         <div class="icon pull-left"><%= system_icon(os) %></div>
         <div class="details">
-          <h2 class="os-name"><%= pretty_os(os) %></h2>
+          <h2 class="os-name g-type-display-4"><%= pretty_os(os) %></h2>
           <ul>
             <% arches.each do |arch, url| %>
               <li><a href="<%= url %>"><%= pretty_arch(arch) %></a></li>
diff --git a/website/source/index.html.erb b/website/source/index.html.erb
index 830567825..081751150 100644
--- a/website/source/index.html.erb
+++ b/website/source/index.html.erb
@@ -10,12 +10,12 @@ description: |-
     <div class="row">
       <div class="col-md-offset-2 col-md-8">
         <div class="alert">
-          <a href="https://www.hashicorp.com/blog/hashicorp-nomad-0-10-general-availability" class="g-alert nomad-green "><span>NEW</span><p>Announcing the general availability of Nomad 0.10. Read more<svg width="15" height="9" viewBox="0 0 15 9" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="0.5" y1="4.5" x2="13.5" y2="4.5" stroke="#000" stroke-linecap="round"></line><path d="M10.3536 0.646447C10.1583 0.451184 9.84171 0.451184 9.64645 0.646447C9.45118 0.841709 9.45118 1.15829 9.64645 1.35355L10.3536 0.646447ZM13.5 4.5L13.8536 4.85355L14.2071 4.5L13.8536 4.14645L13.5 4.5ZM9.64645 7.64645C9.45118 7.84171 9.45118 8.15829 9.64645 8.35355C9.84171 8.54882 10.1583 8.54882 10.3536 8.35355L9.64645 7.64645ZM9.64645 1.35355L13.1464 4.85355L13.8536 4.14645L10.3536 0.646447L9.64645 1.35355ZM13.1464 4.14645L9.64645 7.64645L10.3536 8.35355L13.8536 4.85355L13.1464 4.14645Z" fill="#000"></path></svg></p></a>
+          <a href="https://www.hashicorp.com/blog/hashicorp-nomad-0-10-general-availability" class="g-alert nomad-green "><span class="g-type-tag-label">NEW</span><p class="g-type-body-small">Announcing the general availability of Nomad 0.10. Read more<svg width="15" height="9" viewBox="0 0 15 9" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="0.5" y1="4.5" x2="13.5" y2="4.5" stroke="#000" stroke-linecap="round"></line><path d="M10.3536 0.646447C10.1583 0.451184 9.84171 0.451184 9.64645 0.646447C9.45118 0.841709 9.45118 1.15829 9.64645 1.35355L10.3536 0.646447ZM13.5 4.5L13.8536 4.85355L14.2071 4.5L13.8536 4.14645L13.5 4.5ZM9.64645 7.64645C9.45118 7.84171 9.45118 8.15829 9.64645 8.35355C9.84171 8.54882 10.1583 8.54882 10.3536 8.35355L9.64645 7.64645ZM9.64645 1.35355L13.1464 4.85355L13.8536 4.14645L10.3536 0.646447L9.64645 1.35355ZM13.1464 4.14645L9.64645 7.64645L10.3536 8.35355L13.8536 4.85355L13.1464 4.14645Z" fill="#000"></path></svg></p></a>
         </div>
 
         <%= inline_svg "logo-hashicorp.svg", height: 120, class: "logo" %>
 
-        <h1>Deploy and Manage Any Containerized, Legacy, or Batch Application</h1>
+        <h1 class="g-type-display-3">Deploy and Manage Any Containerized, Legacy, or Batch Application</h1>
 
         <a class="button primary" href="/intro/index.html">Get Started</a>
         <a class="button" href="/downloads.html">Download <%= latest_version %></a>
@@ -28,8 +28,8 @@ description: |-
   <div class="container">
     <div class="row">
       <div class="col-sm-12">
-        <h2>Simple and Lightweight</h2>
-        <p class="lead">
+        <h2 class="g-type-display-2">Simple and Lightweight</h2>
+        <p class="g-type-body-large lead">
           Nomad is an easy-to-use, flexible, and performant workload orchestrator that can
           deploy a mix of microservice, batch, containerized, and non-containerized applications.
           Nomad is easy to operate and scale and has native Consul and Vault integrations.
@@ -38,20 +38,20 @@ description: |-
     </div>
     <div class="row">
       <div class="col-sm-6">
-        <h3>1. Declare Jobs</h3>
-        <p>
+        <h3 class="g-type-display-4">1. Declare Jobs</h3>
+        <p class="g-type-body">
           Users compose and submit high-level job files. Nomad handles the
           scheduling and upgrading of the applications over time.
         </p>
-        <p>
+        <p class="g-type-body">
           This flexibility makes it easy to deploy one container, dozens of
           containers, or even <a
           href="https://www.hashicorp.com/c1m/">millions</a>.
         </p>
       </div>
       <div class="col-sm-6">
-        <h3>2. Plan Changes</h3>
-        <p>
+        <h3 class="g-type-display-4">2. Plan Changes</h3>
+        <p class="g-type-body">
           With built-in dry-run execution, Nomad shows what scheduling decisions
           it will take before it takes them. Operators can approve or deny these
           changes to create a safe and reproducible workflow.
@@ -60,16 +60,16 @@ description: |-
     </div>
     <div class="row">
       <div class="col-sm-6">
-        <h3>3. Run Applications</h3>
-        <p>
+        <h3 class="g-type-display-4">3. Run Applications</h3>
+        <p class="g-type-body">
           Nomad runs applications and ensures they keep running in failure
           scenarios. In addition to long-running services, Nomad can schedule
           batch jobs, distributed cron jobs, and parameterized jobs.
         </p>
       </div>
       <div class="col-sm-6">
-        <h3>4. Monitor Progress</h3>
-        <p>
+        <h3 class="g-type-display-4">4. Monitor Progress</h3>
+        <p class="g-type-body">
           Stream logs, send signals, and interact with the file system of
           scheduled applications. These operator-friendly commands bring the
           familiar debugging tools to a scheduled world.
@@ -83,9 +83,9 @@ description: |-
   <div class="container">
     <div class="row">
       <div class="col-sm-12">
-        <span class="callout">Combine</span>
-        <h2>Hybrid &amp; Multi Cloud</h2>
-        <p class="lead">
+        <span class="callout g-type-label">Combine</span>
+        <h2 class="g-type-display-2">Hybrid &amp; Multi Cloud</h2>
+        <p class="g-type-body-large lead">
           As more organizations adopt cloud technologies, the desire to run in
           multiple datacenters and multiple regions becomes critical. Nomad can
           span public and private clouds and treat all your infrastructure as a
@@ -102,8 +102,8 @@ description: |-
 
     <div class="row">
       <div class="col-sm-6">
-        <h3>Hybrid Cloud</h3>
-        <p>
+        <h3 class="g-type-display-4">Hybrid Cloud</h3>
+        <p class="g-type-body">
           Nomad bridges the gap between the public and private cloud, creating a
           unified interface for developers to run any application on any
           infrastructure. Easily run services across your internal private cloud
@@ -111,8 +111,8 @@ description: |-
         </p>
       </div>
       <div class="col-sm-6">
-        <h3>Multi Cloud</h3>
-        <p>
+        <h3 class="g-type-display-4">Multi Cloud</h3>
+        <p class="g-type-body">
           As more organizations adopt cloud technologies, the desire to run
           applications simultaneously across multiple clouds increases. Nomad
           combines the power of all cloud providers into a single, unified
@@ -127,9 +127,9 @@ description: |-
   <div class="container">
     <div class="row">
       <div class="col-sm-12">
-        <span class="callout">Maintain</span>
-        <h2>Simplify Operations</h2>
-        <p class="lead">
+        <span class="callout g-type-label">Maintain</span>
+        <h2 class="g-type-display-2">Simplify Operations</h2>
+        <p class="g-type-body-large lead">
           Nomad simplifies operations by supporting several deployment
           strategies to safely upgrade jobs, automatically handling machine
           failures, and providing a single workflow to deploy applications.
@@ -139,7 +139,7 @@ description: |-
 
     <div class="row">
       <div class="col-sm-offset-5 col-sm-6">
-        <h3>Rolling Deploys</h3>
+        <h3 class="g-type-display-4">Rolling Deploys</h3>
       </div>
     </div>
     <div class="row">
@@ -147,7 +147,7 @@ description: |-
         <%= inline_svg "feature-rolling-deploys.svg" %>
       </div>
       <div class="col-sm-7">
-        <p>
+        <p class="g-type-body">
           In order to update an application while reducing downtime, Nomad
           provides a built-in mechanism for rolling upgrades. Operators specify
           the rate at which they would like to upgrade their service in the
@@ -162,12 +162,12 @@ description: |-
 
     <div class="row">
       <div class="col-sm-12">
-        <h3>Blue/Green Deployments</h3>
+        <h3 class="g-type-display-4">Blue/Green Deployments</h3>
       </div>
     </div>
     <div class="row">
       <div class="col-sm-7">
-        <p>
+        <p class="g-type-body">
           Nomad supports native blue/green and canary deployments through the
           declarative job file syntax. Instead of doing a rolling upgrade of the
           existing allocations, the new version of the group is deployed along
@@ -184,7 +184,7 @@ description: |-
 
     <div class="row">
       <div class="col-sm-offset-5 col-sm-6">
-        <h3>Automatic Machine Failures</h3>
+        <h3 class="g-type-display-4">Automatic Machine Failures</h3>
       </div>
     </div>
     <div class="row">
@@ -192,7 +192,7 @@ description: |-
         <%= inline_svg "feature-machine-failure.svg" %>
       </div>
       <div class="col-sm-7">
-        <p>
+        <p class="g-type-body">
           Because it knows the state of all nodes and applications, if a
           node becomes unhealthy, Nomad will automatically reschedule the
           applications that were previously running on the unhealthy host
@@ -209,9 +209,9 @@ description: |-
   <div class="container">
     <div class="row">
       <div class="col-sm-12">
-        <span class="callout">Support</span>
-        <h2>Flexible Workloads</h2>
-        <p class="lead">
+        <span class="callout g-type-label">Support</span>
+        <h2 class="g-type-display-2">Flexible Workloads</h2>
+        <p class="g-type-body-large lead">
           In addition to supporting Linux, Windows, and Mac, Nomad has
           extensible support for containerized, virtualized, and standalone
           applications. Easily start Docker containers, VMs, or application
@@ -228,8 +228,8 @@ description: |-
 
     <div class="row">
       <div class="col-sm-6">
-        <h3>Diverse Technologies</h3>
-        <p>
+        <h3 class="g-type-display-4">Diverse Technologies</h3>
+        <p class="g-type-body">
           By supporting a wide range of technologies such as Docker, rkt, and
           LXC, Nomad does not force you into a single technology. Easily use
           multiple container or virtualization runtimes simultaneously.
@@ -238,8 +238,8 @@ description: |-
         </p>
       </div>
       <div class="col-sm-6">
-        <h3>Multi OS</h3>
-        <p>
+        <h3 class="g-type-display-4">Multi OS</h3>
+        <p class="g-type-body">
           The Nomad client runs on Linux, Windows, and Mac OS. This diverse
           operating system support enables using the same application scheduler
           for all your scheduling and runtime needs.
@@ -254,9 +254,9 @@ description: |-
   <div class="container">
     <div class="row">
       <div class="col-sm-12">
-        <span class="callout">Maximize</span>
-        <h2>Increase Utilization &amp; Reduce Costs</h2>
-        <p class="lead">
+        <span class="callout g-type-label">Maximize</span>
+        <h2 class="g-type-display-2">Increase Utilization &amp; Reduce Costs</h2>
+        <p class="g-type-body-large lead">
           Nomad uses bin packing to optimize application placement onto servers
           to maximize resource utilization, increase density, and help reduce
           costs.
@@ -272,8 +272,8 @@ description: |-
 
     <div class="row">
       <div class="col-sm-6">
-        <h3>Increase Density</h3>
-        <p>
+        <h3 class="g-type-display-4">Increase Density</h3>
+        <p class="g-type-body">
           Nomad places applications and services based on a bin packing
           algorithm, which is used to optimize the resource utilization and
           density of applications. Nomad automatically augments the bin-packing
@@ -282,8 +282,8 @@ description: |-
         </p>
       </div>
       <div class="col-sm-6">
-        <h3>Reduce Costs</h3>
-        <p>
+        <h3 class="g-type-display-4">Reduce Costs</h3>
+        <p class="g-type-body">
           By maximizing resource utilization, Nomad can help remove unused or
           under-utilized machines in the cluster, reducing overall costs.
           Additionally, Nomad enables organizations to utilize larger, more
@@ -298,9 +298,9 @@ description: |-
   <div class="container">
     <div class="row">
       <div class="col-sm-12">
-        <h2>Examples</h2>
-        <h3>Create and Submit Jobs</h3>
-        <p>
+        <h2 class="g-type-display-2">Examples</h2>
+        <h3 class="g-type-display-4">Create and Submit Jobs</h3>
+        <p class="g-type-body">
           Easily create, validate, submit, and check the status of jobs using
           the Nomad CLI.
         </p>
@@ -350,8 +350,8 @@ description: |-
 
     <div class="row">
       <div class="col-sm-12">
-        <h3>Plan Changes</h3>
-        <p>
+        <h3 class="g-type-display-4">Plan Changes</h3>
+        <p class="g-type-body">
           Perform a dry-run to check application placement, scheduling
           decisions, and visualize failures before they happen.
         </p>
@@ -398,8 +398,8 @@ description: |-
 
     <div class="row">
       <div class="col-sm-12">
-        <h3>View Application Logs</h3>
-        <p>
+        <h3 class="g-type-display-4">View Application Logs</h3>
+        <p class="g-type-body">
           Stream application logs directly in the terminal to help analyze and
           debug applications.
         </p>
@@ -424,9 +424,9 @@ description: |-
       </div>
     </div>
 
-    <div class="row">
+    <div class="row get-started">
       <div class="col-sm-12 col-lg-8 col-lg-offset-2">
-        <p class="lead" align="center">
+        <p class="g-type-body-large lead" align="center">
           The introduction contains a walkthrough guide, glossary, and a range
           of examples for learning and experimenting with Nomad.
         </p>
diff --git a/website/source/layouts/inner.erb b/website/source/layouts/inner.erb
index 5cb8b75d0..89b9babeb 100644
--- a/website/source/layouts/inner.erb
+++ b/website/source/layouts/inner.erb
@@ -1,7 +1,7 @@
 <% wrap_layout :layout do %>
 <div class="container">
   <div class="row">
-    <div id="docs-sidebar" class="col-sm-4 col-md-3 col-xs-12 hidden-print" role="complementary">
+    <div id="docs-sidebar" class="col-sm-4 col-md-3 col-xs-12 hidden-print g-type-body-small" role="complementary">
       <%= yield_content :sidebar %>
     </div>