Merge pull request #8295 from rjspiker/rj.fonts

website - font and brand updates

website/source/assets/stylesheets/_buttons.scss

@@ -1,16 +1,16 @@
 .button {
   background: $button-background;
-  border: 1px solid $button-font-color;
+  border: 1px solid #d6d6d7;
-  box-shadow: 4px 4px 0 rgba(0,0,0,0.1);
+  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;
+  font-weight: $font-weight-medium;
-  letter-spacing: 1px;
+  line-height: 1.6em;
   margin-bottom: 4px;
-  padding: 12px 30px 10px 30px;
+  padding: 13px 19px;
-  text-transform: uppercase;
   text-decoration: none;
 
   &:hover,
@@ -19,19 +19,54 @@
     text-decoration: none;
   }
 
+  &:focus {
+    border: 3px solid $packer-l1;
+    color: $button-font-color;
+    outline: none;
+    padding: 11px 17px;
+  }
+
   &:hover {
-    background: $button-font-color;
+    background: #eaeaeb;
-    border: 1px solid $button-font-color;
+    border: 1px solid #d6d6d7;
-    color: $button-background;
+    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%);
+    border: none;
-    color: $button-primary-font-color;
+    color: $white;
+    padding: 14px 20px;
+
+    &:focus {
+      border: 3px solid $packer-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;
   }
 }

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';
+          content: "\203A";
-          font-size: $font-size;
           left: 0;
-          line-height: 100%;
           opacity: 0.4;
           position: absolute;
 
           height: 100%;
-          width: 8px
+          width: 8px;
         }
 
         &:focus,

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;
         }
       }

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;
+}

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 {

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,18 +10,9 @@ body {
   -webkit-font-smoothing: antialiased;
   color: $body-font-color;
   background-color: $white;
-  font-size: $font-size;
+  font-size: $font-size-default;
-  font-family: $font-family-open-sans;
+  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;
-}

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;

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;
 
@@ -67,21 +73,12 @@
 
   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;
       color: $black;
     }
 
     p {
-      font-family: $font-family-open-sans;
-      font-size: 16px;
-      letter-spacing: 0.01em;
-      line-height: 1.8;
       margin: 0 0 10px;
     }
 
@@ -89,18 +86,12 @@
       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: 7px 5px 5px 5px;
-      letter-spacing: 0.05em;
-      text-transform: uppercase;
     }
 
     &.invert {
-      background: $packer-blue;
+      background: $packer;
 
       h2 {
         color: $white;
@@ -108,7 +99,6 @@
 
       p {
         color: $white;
-        font-weight: $font-weight-bold;
       }
     }
 
@@ -139,7 +129,7 @@
           display: flex;
           align-items: center;
           justify-content: center;
-          border: 5px solid $packer-blue;
+          border: 5px solid $packer;
           height: 100px;
           width: 33.3%;
           background-color: $white;
@@ -154,13 +144,11 @@
   }
 
   .terminal {
+    @extend .g-type-code;
     border: 1px solid $white;
     background-color: $black;
     box-sizing: border-box;
     color: $white;
-    font-family: $font-family-monospace;
-    font-size: 15px;
-    line-height: 1.8;
     margin: 20px auto;
     padding: 10px 20px 20px 20px;
 
@@ -178,11 +166,8 @@
 
     span.circle {
       &:before {
-        content: '\25CF';
+        content: "\25CF";
         color: $white;
-        font-family: $font-family-monospace;
-        font-size: 30px;
-        line-height: 1;
         margin: 0 0 0 -4px;
         padding: 0;
         height: 100%;

website/source/assets/stylesheets/_inner.scss

@@ -1,29 +1,39 @@
 #inner {
-  p, li, .alert {
+  h1 {
-    font-size: $font-size;
+    @extend .g-type-display-2;
-    font-family: $font-family-open-sans;
+  }
-    font-weight: $font-weight-reg;
+
-    line-height: 1.84em;
+  h2 {
-    margin: 0 0 $font-size;
+    @extend .g-type-display-3;
-    -webkit-font-smoothing: antialiased;
+  }
+
+  h3 {
+    @extend .g-type-display-4;
+  }
+
+  h4 {
+    @extend .g-type-display-5;
+  }
+
+  h5,
+  h6 {
+    @extend .g-type-display-6;
+  }
+
+  p,
+  li,
+  .alert {
+    @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;
+    margin: 0 0 $font-size-default;
 
     // This will force the code to scroll horizontally on small screens
     // instead of wrapping.
@@ -61,8 +71,7 @@
   h4 {
     color: $body-font-color;
     margin-top: 54px;
-    margin-bottom: $font-size;
+    margin-bottom: $font-size-default;
-    line-height: 1.3;
   }
 
   h2 {
@@ -74,17 +83,11 @@
   h2 > code,
   h3 > code,
   h4 > code,
-  h5 > code
+  h5 > code,
-  h6 > 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;
+    font-size: 90%;
     padding: 0;
   }
 

website/source/assets/stylesheets/_logos.scss

@@ -8,12 +8,12 @@ svg.logo {
     }
 
     path.p-front {
-      fill: $packer-blue;
+      fill: #1DAEFF;
       opacity: 1.0;
     }
 
     path.p-back {
-      fill: $packer-blue-dark;
+      fill: #1D94DD;
       opacity: 1.0;
     }
   }

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;
+}

website/source/assets/stylesheets/_variables.scss

@@ -1,32 +1,66 @@
 // Colors
-$white: #FFFFFF;
+$white: #ffffff;
 $black: #000000;
 $gray: #555555;
-$gray-darker: #24292e;
+$gray-darker: #1d1e23;
 
-$consul-pink: #D62783;
+$vagrant-l3: #eff5ff;
-$consul-pink-dark: #961D59;
+$vagrant-l2: #d0e0ff;
-$packer-blue: #1DAEFF;
+$vagrant-l1: #66a2ff;
-$packer-blue-dark: #1D94DD;
+$vagrant: #1563ff;
-$terraform-purple: #5C4EE5;
+$vagrant-d1: #0d44cc;
-$terraform-purple-dark: #4040B2;
+$vagrant-d2: #08368b;
-$vagrant-blue: #1563FF;
+$packer-l3: #ebf8ff;
-$vagrant-blue-dark: #104EB2;
+$packer-l2: #bfe8fe;
-$vault-black: #000000;
+$packer-l1: #6bceff;
-$vault-blue: #00ABE0;
+$packer: #00acff;
-$vault-gray: #919FA8;
+$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-size-default: 16px;
-$font-family-open-sans: 'Open Sans', sans-serif;
+$font-weight-light: 300;
-$font-family-monospace: 'Fira Mono', monospace;
+$font-weight-book: $font-weight-light;
-$font-size:             15px;
 $font-weight-reg: 400;
-$font-weight-bold:      600;
+$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-darker;
-$body-link-color: $packer-blue;
+$body-link-color: $packer;
 
 // Home
 $home-header-background-color: transparent;
@@ -35,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: $packer-blue;
+$header-background-color: $packer;
-$header-font-size: $font-size - 2;
+$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;
 
 // Buttons
 $button-background: $white;
-$button-font-color: #7b8A8E;
+$button-font-color: $black;
-$button-font-family: $font-family-klavika;
+$button-font-family: $font-display;
-$button-font-size: $font-size;
+$button-font-size: 0.938rem;
 $button-font-weight: $font-weight-bold;
-$button-primary-background: $packer-blue;
+$button-primary-background: $packer;
 $button-primary-font-color: $white;

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';
 
 // Core variables and mixins
 @import '_variables';
@@ -15,6 +16,9 @@
 // Sidebar
 @import 'hashicorp/sidebar';
 
+// Typography
+@import '_typography';
+
 // Global Site
 @import '_global';
 

website/source/downloads.html.erb

@@ -6,17 +6,17 @@ description: |-
   Download Packer
 ---
 
-<h1>Download Packer</h1>
+<h1 class="g-type-display-2">Download Packer</h1>
 
 <section class="downloads">
   <div class="description row">
     <div class="col-md-12">
-      <p>
+      <p class="g-type-body">
         Below are the available downloads for the latest version of Packer
         (<%= latest_version %>). Please download the proper package for your
         operating system and architecture.
       </p>
-      <p>
+      <p class="g-type-body">
         You can find the
         <a href="https://releases.hashicorp.com/packer/<%= latest_version %>/packer_<%= latest_version %>_SHA256SUMS">
           SHA256 checksums for Packer <%= latest_version %>
@@ -28,10 +28,10 @@ description: |-
         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/packer/" target="_blank" rel="nofollow noopener noreferrer">download other versions of Packer</a> from the releases service.
       </p>
-      <p>
+      <p class="g-type-body">
       Follow the <a href="/intro/getting-started/install.html#precompiled-binaries"> Install guide </a> once downloaded.
       </p>
-      <p>
+      <p class="g-type-body">
       Check out the <a href="https://github.com/hashicorp/packer/blob/v<%= latest_version %>/CHANGELOG.md">v<%= latest_version %> CHANGELOG</a> for information on the latest release.
       </p>
     </div>
@@ -43,14 +43,14 @@ 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>
+              <li><a href="<%= url %>" class="g-type-body"><%= pretty_arch(arch) %></a></li>
             <% end %>
           </ul>
           <% if os == "freebsd" %>
-            <div class="alert alert-info">
+            <div class="alert alert-info g-type-body-small">
               Note: At least <code>FreeBSD 10-STABLE</code> is required to run Packer.
               If you'd like to run on an earlier version, please
               <a href="/docs/install/index.html#compiling-from-source">compile Packer yourself</a>

website/source/index.html.erb

@@ -8,10 +8,10 @@ description: |-
   <div class="container hero">
     <div class="row">
 
-      <div class="col-md-offset-3 col-md-6 col-sm-offset-2 col-sm-8">
+      <div class="col-sm-12">
         <%= inline_svg "logo-hashicorp.svg", height: 120, class: "logo" %>
 
-        <h1>
+        <h1 class="g-type-display-3">
           Build Automated Machine Images
         </h1>
 
@@ -56,9 +56,9 @@ description: |-
         </div>
       </div>
       <div class="col-md-6">
-        <span class="callout">Infrastructure as code</span>
+        <span class="callout g-type-label">Infrastructure as code</span>
-        <h2>Modern, Automated</h2>
+        <h2 class="g-type-display-2">Modern, Automated</h2>
-        <p>
+        <p class="g-type-body">
           HashiCorp Packer is easy to use and automates the creation of any type of
           machine image. It embraces modern configuration management by
           encouraging you to use automated scripts to install and configure
@@ -75,9 +75,9 @@ description: |-
   <div class="container">
     <div class="row">
       <div class="col-md-6">
-        <span class="callout">Integrations</span>
+        <span class="callout g-type-label">Integrations</span>
-        <h2>Works Out of The Box</h2>
+        <h2 class="g-type-display-2">Works Out of The Box</h2>
-        <p>
+        <p class="g-type-body">
           Out of the box Packer comes with support to build images for
           Amazon EC2, CloudStack, DigitalOcean, Docker, Google Compute
           Engine, Microsoft Azure, QEMU, VirtualBox, VMware, and more.

website/source/layouts/community.erb

@@ -1,6 +1,6 @@
 <% wrap_layout :inner do %>
   <% content_for :sidebar do %>
-    <div class="docs-sidebar hidden-print affix-top" role="complementary">
+    <div class="docs-sidebar g-type-body-small hidden-print affix-top" role="complementary">
       <ul class="nav docs-sidenav">
         <li<%= sidebar_current("community-index") %>>
           <a href="/community.html">Community</a>

website/source/layouts/downloads.erb

@@ -1,6 +1,6 @@
 <% wrap_layout :inner do %>
   <% content_for :sidebar do %>
-    <div class="docs-sidebar hidden-print affix-top" role="complementary">
+    <div class="docs-sidebar g-type-body-small hidden-print affix-top" role="complementary">
       <ul class="nav docs-sidenav">
         <li<%= sidebar_current("downloads-packer") %>>
           <a href="/downloads.html">Download Packer</a>

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-3 col-md-3 col-xs-12 hidden-print" role="complementary">
+    <div id="docs-sidebar" class="col-sm-3 col-md-3 col-xs-12 hidden-print g-type-body-small" role="complementary">
       <%= yield_content :sidebar %>
     </div>