First run through of the onboarding/help page

h/static/images/help-arrow.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="60px" height="45px" viewBox="0 0 60 45" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.1.1 (8761) - http://www.bohemiancoding.com/sketch -->
+    <title>Slice 2</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="Path-1-+-Triangle-1" sketch:type="MSLayerGroup" transform="translate(2.000000, -2.000000)">
+            <path d="M0.273888323,46.8543613 C0.792991324,12.7899443 27.9928896,9.26957714 53.1377225,6.24948249" id="Path-1" stroke="#979797" stroke-width="2" sketch:type="MSShapeGroup"></path>
+            <polygon id="Triangle-1" fill="#979797" sketch:type="MSShapeGroup" transform="translate(51.500000, 6.500000) rotate(82.000000) translate(-51.500000, -6.500000) " points="51.5 1 57 12 46 12 "></polygon>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

h/static/styles/app.scss

@@ -169,3 +169,24 @@ ol {
     float: left;
   }
 }
+
+.masthead-small {
+  img {
+    width: 48px;
+    height: auto;
+    padding-top: 1px;
+  }
+
+  hgroup {
+    margin-left: 54px;
+  }
+
+  .masthead-heading {
+    font-size: 20px;
+    line-height: 1em;
+  }
+
+  .masthead-subheading {
+    font-size: 14px;
+  }
+}

h/static/styles/base.scss

@@ -5,6 +5,7 @@ $black: #000 !default;
 
 // GRAYS
 $gray: #777 !default;
+$gray-darker: #333;
 $gray-dark: #585858;
 $gray-light: #969696 !default;
 $gray-lighter: #d3d3d3 !default;

h/static/styles/help-page.scss

 @import "./mixins/icons";
 
 .help-page {
+  padding-top: 2.5em;
+  padding-bottom: 2.5em;
   padding-right: 460px;
+  background: white;
+
+  .masthead {
+    margin-bottom: 2.5em;
+  }
 }
 
 .help-page-content {
-  padding: 40px 10% 40px 20%;
+  padding: 0 10% 0 20%;
   margin: auto;
 }
 
+.help-page-heading {
+  color: $gray-darker;
+  margin-bottom: 1em;
+  font-size: 1.5em;
+}
+
+.help-page-heading,
+.help-page-lede {
+  text-align: center;
+}
+
+.help-page-lede {
+  font-style: italic;
+  margin-bottom: 2.5em;
+}
+
+.help-page-section {
+  padding: 2.5em;
+  border-top: 1px solid #EAEAEA;
+
+  &:first-child {
+    border-top: none;
+  }
+}
+
 .help-page-sidebar {
   position: fixed;
   top: 20px;
-  right: 40px;
+  right: 2.5em;
   bottom: 20px;
   width: 380px;
   display: block;
@@ -20,19 +52,81 @@
   border-radius: 3px;
 }
 
+@mixin help-icon {
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  padding: 0.4em;
+  border-radius: 0.4em;
+  background: #FFF;
+  text-shadow: 0 0 2px #F9F9F9, 0 0 0 #777;
+  color: rgba(200, 200, 200, 0.3);
+  font-size: 10px;
+}
+
 #help-1 {
   position: fixed;
-  top: 30%;
+  top: 60px;
   right: 60px;
-  width: 340px;
+  width: 210px;
   color: $gray-light;
+  text-align: right;
 
   @include icons {
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    padding: 4px;
-    border-radius: 4px;
-    background: #FFF;
-    text-shadow: 0 0 2px #F9F9F9, 0 0 0 #777;
-    color: rgba(200, 200, 200, 0.3);
+    @include help-icon;
+    font-size: 14px;
+  }
+}
+
+#help-2 {
+  background: url(../images/help-arrow.svg) 0 0 no-repeat;
+  width: 60px;
+  height: 45px;
+  position: absolute;
+  top: -10px;
+  right: -10px;
+}
+
+.numbered-list {
+  counter-reset: numbered-list;
+  margin-bottom: 2.5em;
+}
+
+.numbered-list-item {
+  position: relative;
+  counter-increment: numbered-list;
+  padding-left: 3em;
+  padding-right: 1.25em;
+  list-style-type: none;
+
+  &:before {
+    content: counter(numbered-list);
+    display: block;
+    position: absolute;
+    top: .125em;
+    left: 0;
+    width: 2.125em;
+    height: 1.8125em;
+    border: .125em solid $hypothered;
+    border-radius: 50%;
+    text-align: center;
+    padding-top: .3125em; // 24px == Line height of text.
   }
 }
+
+.feature {
+  margin-bottom: 1.5em;
+}
+
+.feature-heading {
+  color: $gray-darker;
+  font-size: 1.125em;
+  margin-bottom: .555em;
+}
+
+.feature-icon {
+  font-size: .875em;
+  margin-right: .3em;
+}
+
+.help-icon {
+    @include help-icon;
+}

h/static/styles/page.scss

@@ -16,7 +16,7 @@
 
   h2 {
     font-size: 1.618em;
-    margin: .7606em 0 .3803em;
+    margin: .7606em 0;
   }
 
   h3 {