website - add -moz-osx-font-smoothing for smooth firefox osx fonts

website - font and brand updates

website/config.rb

@@ -5,7 +5,7 @@ set :vmware_utility_version, "1.0.7"
 
 activate :hashicorp do |h|
   h.name         = "vagrant"
-  h.version      = "2.2.5"
+  h.version      = "2.2.6"
   h.github_slug  = "hashicorp/vagrant"
   h.website_root = "website"
 end

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,19 +19,54 @@
     text-decoration: none;
   }
 
+  &:focus {
+    border: 3px solid $vagrant-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 $vagrant-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,15 +9,12 @@
     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;
           left: 0;
-          line-height: 100%;
           opacity: 0.4;
           position: absolute;
 

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;
@@ -6,21 +7,13 @@ html {
 }
 
 body {
+  -moz-osx-font-smoothing: grayscale;
   -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;
-}

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,20 +73,11 @@
 
   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;
     }
 
     p {
-      font-family: $font-family-open-sans;
-      font-size: 16px;
-      letter-spacing: 0.01em;
-      line-height: 1.8;
       margin: 0 0 10px;
     }
 
@@ -88,14 +85,8 @@
       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;
     }
 
     &.black {
@@ -107,7 +98,6 @@
 
       p {
         color: $white;
-        font-weight: $font-weight-bold;
       }
 
       span.callout {
@@ -117,7 +107,7 @@
     }
 
     &.blue-dark {
-      background: $vagrant-blue-dark;
+      background: $vagrant-d1;
 
       h2 {
         color: $white;
@@ -125,12 +115,11 @@
 
       p {
         color: $white;
-        font-weight: $font-weight-bold;
       }
     }
 
     &.blue {
-      background: $vagrant-blue;
+      background: $vagrant;
 
       h2 {
         color: $white;
@@ -138,21 +127,17 @@
 
       p {
         color: $white;
-        font-weight: $font-weight-bold;
       }
     }
 
     &#simple {
       .terminal {
+        @extend .g-type-code;
         border: 1px solid $white;
-        background-color: $black;
-        box-shadow: 3px 4px 0 rgba(0,0,0,0.1);
+        background: $black;
         box-sizing: border-box;
         color: $white;
-        font-family: $font-family-monospace;
-        font-size: 15px;
-        line-height: 1.8;
-        margin-top: 55px;
+        margin: 20px auto auto auto;
         padding: 10px 20px 20px 20px;
 
         .terminal-content {
@@ -168,11 +153,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 {
-    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;
+  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 {
+    @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;
-    line-height: 1.3;
+    margin-bottom: $font-size-default;
   }
 
   h2 {
@@ -74,17 +83,10 @@
   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%;
+  h5 > code h6 > code {
     background-color: transparent;
     color: inherit;
+    font-size: 90%;
     padding: 0;
   }
 

website/source/assets/stylesheets/_logos.scss

@@ -8,12 +8,12 @@ svg.logo {
     }
 
     path.front {
-      fill: $vagrant-blue;
+      fill: #1563FF;
       opacity: 1.0;
     }
 
     path.shadow {
-      fill: $vagrant-blue-dark;
+      fill: #104EB2;
       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,31 +1,65 @@
 // Colors
-$white: #FFFFFF;
+$white: #ffffff;
 $black: #000000;
-$gray-darker: #555555;
+$gray-darker: #1d1e23;
 
-$consul-pink: #D62783;
-$consul-pink-dark: #961D59;
-$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-darker;
-$body-link-color: $vagrant-blue;
+$body-link-color: $vagrant;
 
 // Home
 $home-header-background-color: transparent;
@@ -34,30 +68,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: $vagrant-blue;
-$header-font-size: $font-size - 2;
+$header-background-color: $vagrant;
+$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: $vagrant-blue;
+$button-primary-background: $vagrant;
 $button-primary-font-color: $white;

website/source/assets/stylesheets/_vmware.scss

@@ -28,9 +28,6 @@
 
     span.tagline {
       display: block;
-      font-family: $font-family-klavika;
-      font-size: 20px;
-      font-weight: $font-weight-reg;
       margin: 15px 0 30px 0;
     }
   }
@@ -40,20 +37,11 @@
     padding: 100px 0;
 
     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;
     }
 
     p {
-      font-family: $font-family-open-sans;
-      font-size: 16px;
-      letter-spacing: 0.01em;
-      line-height: 1.8;
       margin: 0 0 10px;
     }
 
@@ -61,14 +49,8 @@
       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;
     }
 
     &.black {
@@ -90,7 +72,7 @@
     }
 
     &.blue-dark {
-      background: $vagrant-blue-dark;
+      background: $vagrant-d1;
 
       h2 {
         color: $white;
@@ -102,7 +84,7 @@
     }
 
     &.blue {
-      background: $vagrant-blue;
+      background: $vagrant;
 
       h2 {
         color: $white;
@@ -158,7 +140,7 @@
           input {
             border: none;
             box-shadow: 3px 4px 0 rgba(0,0,0,0.1);
-            font-family: $font-family-klavika;
+            font-family: $font-display;
             font-size: 18px;
             height: 50px;
             line-height: 50px;
@@ -173,12 +155,12 @@
           }
 
           button {
-            background: $vagrant-blue;
+            background: $vagrant;
             border: none;
             border-radius: 0;
             box-shadow: 3px 4px 0 rgba(0,0,0,0.1);
             color: $white;
-            font-family: $font-family-klavika;
+            font-family: $font-display;
             font-size: 18px;
             height: 50px;
             line-height: 50px;
@@ -219,7 +201,6 @@
 
     &#faq {
       h3 {
-        line-height: 1.4;
         margin-top: 25px;
       }
     }
@@ -230,7 +211,7 @@
   #inner {
     .legal-text p {
       font-family: $font-family-monospace;
-      font-size: $font-size - 2;
+      font-size: $font-size-default - 2;
       margin-bottom: 25px;
     }
   }

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

website/source/downloads.html.erb

@@ -40,7 +40,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 data-os="<%= os %>" data-arch="<%= arch%>" data-version="<%= latest_version %>" href="<%= url %>"><%= pretty_arch(arch) %></a></li>

website/source/index.html.erb

@@ -10,7 +10,7 @@ description: |-
       <div class="col-md-offset-2 col-md-8">
         <%= inline_svg "logo-hashicorp.svg", height: 120, class: "logo" %>
 
-        <h1>Development Environments Made Easy</h1>
+        <h1 class="g-type-display-3">Development Environments Made Easy</h1>
 
         <a class="button primary" href="/intro/index.html">Get Started</a>
         <a class="button" href="/downloads.html">Download <%= latest_version %></a>
@@ -24,9 +24,9 @@ description: |-
   <div class="container">
     <div class="row">
       <div class="col-md-6">
-        <span class="callout">Unified Workflow</span>
-        <h2>Simple and Powerful</h2>
-        <p>
+        <span class="callout g-type-label">Unified Workflow</span>
+        <h2 class="g-type-display-2">Simple and Powerful</h2>
+        <p class="g-type-body">
           HashiCorp Vagrant provides the same, easy workflow regardless of your role as
           a developer, operator, or designer. It leverages a declarative
           configuration file which describes all your software requirements,
@@ -66,9 +66,9 @@ description: |-
         </div>
       </div>
       <div class="col-md-6">
-        <span class="callout">Enforce Consistency</span>
-        <h2>Production Parity</h2>
-        <p>
+        <span class="callout g-type-label">Enforce Consistency</span>
+        <h2 class="g-type-display-2">Production Parity</h2>
+        <p class="g-type-body">
           The cost of fixing a bug exponentially increases the closer it gets to
           production. Vagrant aims to mirror production environments by
           providing the same operating system, packages, users, and
@@ -87,9 +87,9 @@ description: |-
   <div class="container">
     <div class="row">
       <div class="col-md-6">
-        <span class="callout">Cross-Platform</span>
-        <h2>Works where you work</h2>
-        <p>
+        <span class="callout g-type-label">Cross-Platform</span>
+        <h2 class="g-type-display-2">Works where you work</h2>
+        <p class="g-type-body">
           Vagrant works on Mac, Linux, Windows, and more. Remote development
           environments force users to give up their favorite editors and
           programs. Vagrant works on your local system with the tools you're
@@ -113,9 +113,9 @@ description: |-
   <div class="container">
     <div class="row">
       <div class="col-xs-12">
-        <span class="callout">Trusted at Scale</span>
-        <h2>Trusted By</h2>
-        <p>
+        <span class="callout g-type-label">Trusted at Scale</span>
+        <h2 class="g-type-display-2">Trusted By</h2>
+        <p class="g-type-body">
           Vagrant is trusted by thousands of developers, operators, and
           designers everyday. Here are just a few of the organizations that
           choose Vagrant to automate their development environments, in

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>
 

website/source/vmware/index.html.erb

@@ -15,8 +15,8 @@ description: |-
           <%= inline_svg "vmware.svg", height: 30 %>
         </div>
 
-        <h1>Supercharged Development Environments</h1>
-        <span class="tagline">
+        <h1 class="g-type-display-3">Supercharged Development Environments</h1>
+        <span class="tagline g-type-body-large">
           Use Vagrant with VMware for improved stability, performance, and support.
         </span>
 
@@ -31,21 +31,21 @@ description: |-
   <div class="container">
     <div class="row">
       <div class="col-md-12">
-        <span class="callout">Benefits</span>
-        <h2>VMware Makes Your Life Better</h2>
+        <span class="callout g-type-label">Benefits</span>
+        <h2 class="g-type-display-2">VMware Makes Your Life Better</h2>
       </div>
     </div>
     <div class="row">
       <div class="col-sm-6">
-        <h3>Same Vagrant Workflow</h3>
-        <p>
+        <h3 class="g-type-display-4">Same Vagrant Workflow</h3>
+        <p class="g-type-body">
           <tt>vagrant up</tt>, <tt>vagrant ssh</tt>, <tt>vagrant destroy</tt> -
           the same Vagrant workflow you know and love. Vastly improve your
           work environments without having to re-educate your team.
         </p>
       </div>
       <div class="col-sm-6">
-        <h3>Unparalleled Performance</h3>
+        <h3 class="g-type-display-4">Unparalleled Performance</h3>
         <p>
           VMware <em>screams</em>, with industry-leading performance<sup>1</sup>
           based on the same hypervisor technology in use by 98% of the Fortune 500.
@@ -55,8 +55,8 @@ description: |-
     </div>
     <div class="row">
       <div class="col-sm-6">
-        <h3>Rock Solid Stability</h3>
-        <p>
+        <h3 class="g-type-display-4">Rock Solid Stability</h3>
+        <p class="g-type-body">
           The VMware hypervisor has been in production use since 1999.
           All their products share the same, robust core that powers
           the world's largest organizations. With the VMware provider, Vagrant
@@ -65,8 +65,8 @@ description: |-
       </div>
 
       <div class="col-sm-6">
-        <h3>Uncompromised Portability</h3>
-        <p>
+        <h3 class="g-type-display-4">Uncompromised Portability</h3>
+        <p class="g-type-body">
           VMware virtual machines run on Mac OS X, Windows, and Linux.
           Vagrant provides support for both VMware Fusion (Mac OS X) and
           VMware Workstation (Linux and Windows), which are able to run
@@ -76,8 +76,8 @@ description: |-
     </div>
     <div class="row">
       <div class="col-sm-6">
-        <h3>Professional Support</h3>
-        <p>
+        <h3 class="g-type-display-4">Professional Support</h3>
+        <p class="g-type-body">
           Every purchase of the Vagrant VMware provider comes with
           direct email support. VMware products themselves are eligible for
           professional support from VMware. Someone always has your back
@@ -86,8 +86,8 @@ description: |-
       </div>
 
       <div class="col-sm-6">
-        <h3>Vagrant &hearts; Open Source</h3>
-        <p>
+        <h3 class="g-type-display-4">Vagrant &hearts; Open Source</h3>
+        <p class="g-type-body">
           Vagrant is free and open source. While the VMware providers
           are not, the revenue is used to continue to develop, support,
           and grow Vagrant and the community around it.
@@ -108,22 +108,22 @@ description: |-
   <div class="container">
     <div class="row">
       <div class="col-md-12">
-        <span class="callout">Buy Now</span>
-        <h2>Pricing &amp; Purchase</h2>
+        <span class="callout g-type-label">Buy Now</span>
+        <h2 class="g-type-display-2">Pricing &amp; Purchase</h2>
       </div>
     </div>
     <div class="row">
       <div class="col-md-12">
-        <p>
+        <p class="g-type-body">
           <strong>Price:</strong> $79 per seat.
         </p>
-        <p>
+        <p class="g-type-body">
           A single seat can be used on two computers (such as a desktop
           and a laptop) for a single person. The license is valid forever
           with access to free maintenance updates. Future major updates may
           require an upgrade fee.
         </p>
-        <p>
+        <p class="g-type-body">
           Enter the number of seats you wish to purchase below. Then,
           click the buy button and complete the order. Instructions to
           install and download the software will be emailed to you.
@@ -172,14 +172,14 @@ description: |-
   <div class="container">
     <div class="row">
       <div class="col-md-12">
-        <span class="callout">FAQ</span>
-        <h2>Frequently Asked Questions</h2>
+        <span class="callout g-type-label">FAQ</span>
+        <h2 class="g-type-display-2">Frequently Asked Questions</h2>
       </div>
     </div>
     <div class="row">
       <div class="col-md-12">
-        <h3>Do you offer a trial for the Vagrant VMware plugins?</h3>
-        <p>
+        <h3 class="g-type-display-4">Do you offer a trial for the Vagrant VMware plugins?</h3>
+        <p class="g-type-body">
           We do not offer a trial mechanism at this time, but we do offer a
           30-day, no questions asked, 100% money-back guarantee. If you are
           not satisfied with the product, contact us within 30 days and you
@@ -189,25 +189,25 @@ description: |-
     </div>
     <div class="row">
       <div class="col-md-12">
-        <h3>Do you offer educational discounts on the Vagrant VMware plugins?</h3>
-        <p>
+        <h3 class="g-type-display-4">Do you offer educational discounts on the Vagrant VMware plugins?</h3>
+        <p class="g-type-body">
           We offer an academic discount of 10% for the Vagrant VMware plugins.
           However, we require proof that you are a current student or employee
           in academia. Please contact support with <strong>any one</strong> of
           the following forms of proof:
 
           <ul>
-            <li><p>A picture of your current university ID</p></li>
-            <li><p>An email from your official <tt>.edu</tt> school email address</p></li>
-            <li><p>A copy of something on university letterhead indicating you are currently enrolled as a student</p></li>
+            <li><p class="g-type-body">A picture of your current university ID</p></li>
+            <li><p class="g-type-body">An email from your official <tt>.edu</tt> school email address</p></li>
+            <li><p class="g-type-body">A copy of something on university letterhead indicating you are currently enrolled as a student</p></li>
           </ul>
         </p>
       </div>
     </div>
     <div class="row">
       <div class="col-md-12">
-        <h3>I already own a license, am I eligible for an upgrade?</h3>
-        <p>
+        <h3 class="g-type-display-4">I already own a license, am I eligible for an upgrade?</h3>
+        <p class="g-type-body">
           Existing license holders may check their upgrade eligibility by
           visiting <a href="http://license.hashicorp.com/upgrade/vmware">the license upgrade center</a>.
           If you are eligible for an upgrade, the system will generate a
@@ -218,8 +218,8 @@ description: |-
     </div>
     <div class="row">
       <div class="col-md-12">
-        <h3>Do I need to pay for upgrades to my license?</h3>
-        <p>
+        <h3 class="g-type-display-4">Do I need to pay for upgrades to my license?</h3>
+        <p class="g-type-body">
           The Vagrant VMware plugin licenses are valid for specific VMware
           product versions at the time of purchase. When new versions of
           VMware products are released, significant changes to the plugin code
@@ -231,7 +231,7 @@ description: |-
           and entering the email address with which they made the original
           purchase.
         </p>
-        <p>
+        <p class="g-type-body">
           Please note: your existing license will continue to work with all
           previous versions of the VMware products. If you do not wish to
           update at this time, you can rollback your VMware installation to an
@@ -241,8 +241,8 @@ description: |-
     </div>
     <div class="row">
       <div class="col-md-12">
-        <h3>Where can I find the EULA for the Vagrant VMware Plugins?</h3>
-        <p>
+        <h3 class="g-type-display-4">Where can I find the EULA for the Vagrant VMware Plugins?</h3>
+        <p class="g-type-body">
           The <a href="/vmware/eula.html">EULA for the Vagrant VMware plugins</a>
           is available on the Vagrant website.
         </p>
@@ -250,8 +250,8 @@ description: |-
     </div>
     <div class="row">
       <div class="col-md-12">
-        <h3>Do you offer incentives for resellers?</h3>
-        <p>
+        <h3 class="g-type-display-4">Do you offer incentives for resellers?</h3>
+        <p class="g-type-body">
           All our reseller information can be found on the
           <a href="/vmware/reseller.html">Reseller Information</a> page.
         </p>
@@ -259,8 +259,8 @@ description: |-
     </div>
     <div class="row">
       <div class="col-md-12">
-        <h3>Do you offer bulk/volume discounts for the Vagrant VMware plugins?</h3>
-        <p>
+        <h3 class="g-type-display-4">Do you offer bulk/volume discounts for the Vagrant VMware plugins?</h3>
+        <p class="g-type-body">
           We certainly do! <a href="mailto:support@hashicorp.com?subject=Bulk Discounts">Email support</a>
           with the number of licenses you need and we can give you bulk pricing
           information. Please note that bulk pricing requires the purchase of
@@ -270,8 +270,8 @@ description: |-
     </div>
     <div class="row">
       <div class="col-md-12">
-        <h3>Does this include the VMware software?</h3>
-        <p>
+        <h3 class="g-type-display-4">Does this include the VMware software?</h3>
+        <p class="g-type-body">
           The Vagrant VMware Plugin requires the separate purchase of VMware
           Fusion/Workstation from VMware. The VMware product is not bundled
           with the plugin.
@@ -280,14 +280,14 @@ description: |-
     </div>
     <div class="row">
       <div class="col-md-12">
-        <h3>Why is the Vagrant VMware plugin not working with my trial version of VMware Fusion/Workstation?</h3>
-        <p>
+        <h3 class="g-type-display-4">Why is the Vagrant VMware plugin not working with my trial version of VMware Fusion/Workstation?</h3>
+        <p class="g-type-body">
           While we have not been able to isolate to a specific issue or cause,
           the Vagrant VMware Fusion and Vagrant VMware Workstation plugins are
           sometimes incompatible with the trial versions of the VMware
           products.
         </p>
-        <p>
+        <p class="g-type-body">
           Please try restarting your computer and running the VMware software
           manually. Occasionally you must accept the license agreement before
           VMware will run. If you do not see any errors when opening the
@@ -298,8 +298,8 @@ description: |-
     </div>
     <div class="row">
       <div class="col-md-12">
-        <h3>Can I use VMware Workstation Player?</h3>
-        <p>
+        <h3 class="g-type-display-4">Can I use VMware Workstation Player?</h3>
+        <p class="g-type-body">
           <em>Some</em> features of the Vagrant VMware Workstation plugin will
           work with VMware Player, but it is not officially supported. Vagrant
           interacts with VMware via the VMware API, and some versions of
@@ -311,14 +311,14 @@ description: |-
     </div>
     <div class="row">
       <div class="col-md-12">
-        <h3>Do I need VMware Fusion/Workstation Pro or just the regular version?</h3>
-        <p>
+        <h3 class="g-type-display-4">Do I need VMware Fusion/Workstation Pro or just the regular version?</h3>
+        <p class="g-type-body">
           The Vagrant VMware plugin is compatible with both the regular and
           Pro versions of VMware Fusion and VMware Workstation. However, some
           advanced features (such as linked clones), are only supported by the
           Pro versions of the VMware software.
         </p>
-        <p>
+        <p class="g-type-body">
           Please consult the VMware documentation to determine which features
           are supported by the Pro and non-Pro versions to determine which
           product you need to purchase.