diff --git a/cms/static/sass/_account.scss b/cms/static/sass/_account.scss
index 7376c41174..266015b656 100644
--- a/cms/static/sass/_account.scss
+++ b/cms/static/sass/_account.scss
@@ -1,4 +1,5 @@
-// login and sign up UI
+// Studio - Sign In/Up
+// ====================
 .signup, .signin {
 
   .wrapper-content {
@@ -25,7 +26,6 @@
 
       h1 {
         @include font-size(32);
-        float: none;
         margin: 0;
         padding: 0;
         font-weight: 600;
@@ -244,6 +244,8 @@
   }
 }
 
+// ====================
+
 // messages
 .message {
   @include font-size(14);
diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss
index 2880908471..4c2ad9fbb6 100644
--- a/cms/static/sass/_base.scss
+++ b/cms/static/sass/_base.scss
@@ -1,49 +1,44 @@
-// -------------------------------------
-//
-//  Universal
-//
-// -------------------------------------
+// studio base styling
+// ====================
 
+// basic reset
 html {
   font-size: 62.5%;
 }
 
 body {
-    min-width: 980px;
-    background: $gray-l5;
-    font-size: 16px;
-    line-height: 1.6;
-    color: $baseFontColor;
+  @include font-size(16);
+  min-width: 980px;
+  background: $gray-l5;
+  line-height: 1.6;
+  color: $baseFontColor;
 }
 
-body,
-input {
-    font-family: 'Open Sans', sans-serif;
+body, input {
+  font-family: 'Open Sans', sans-serif;
 }
 
 a {
-    text-decoration: none;
-    color: $blue;
-    @include transition(color .15s);
+  text-decoration: none;
+  color: $blue;
+  @include transition(color .15s);
 
-    &:hover {
-        color: #cb9c40;
-    }
+  &:hover {
+    color: #cb9c40;
+  }
 }
 
 h1 {
-    float: left;
-    font-size: 28px;
-    font-weight: 300;
-    margin: 24px 6px;
+  @include font-size(28);
+  font-weight: 300;
 }
 
 .waiting {
-    opacity: 0.1;
+  opacity: 0.1;
 }
 
 .page-actions {
-    margin-bottom: 30px;
+  margin-bottom: 30px;
 }
 
 .wrapper {
@@ -52,134 +47,269 @@ h1 {
   width: 100%;
 }
 
-.main-wrapper {
+// ====================
+
+// layout - basic
+.wrapper-content {
+  margin: 0;
+  padding: 0 $baseline;
+  position: relative;
+}
+
+.content {
+  @include clearfix();
+  @include font-size(16);
+  max-width: $fg-max-width;
+  min-width: $fg-min-width;
+  width: flex-grid(12);
+  margin: 0 auto;
+  color: $gray-d2;
+
+  header {
     position: relative;
-    margin: 0 40px;
+    margin-bottom: $baseline;
+    border-bottom: 1px solid $gray-l4;
+    padding-bottom: ($baseline/2);
+
+    .title-sub {
+      @include font-size(14);
+      display: block;
+      margin: 0;
+      color: $gray-l2;
+    }
+
+    .title, .title-1 {
+      @include font-size(32);
+      margin: 0;
+      padding: 0;
+      font-weight: 600;
+      color: $gray-d3;
+    }
+  }
+
+  .introduction {
+    @include font-size(14);
+    margin: 0 0 $baseline 0;
+  }
+}
+
+.content-primary, .content-supplementary {
+  @include box-sizing(border-box);
+}
+
+.content-primary {
+
+  .title-1, .title-2, .title-3, .title-4, .title-5, .title-5 {
+    color: $gray-d3;
+  }
+
+  .title-1 {
+
+  }
+
+  .title-2 {
+    @include font-size(24);
+    margin: 0 0 ($baseline/2) 0;
+    font-weight: 600;
+  }
+
+  .title-3 {
+    @include font-size(16);
+    margin: 0 0 ($baseline/4) 0;
+    font-weight: 500;
+  }
+
+  .title-4 {
+
+  }
+
+  .title-5 {
+
+  }
+}
+
+.content-supplementary {
+
+  .bit {
+    @include font-size(13);
+    margin: 0 0 $baseline 0;
+    border-bottom: 1px solid $gray-l4;
+    padding: 0 0 $baseline 0;
+    color: $gray-l1;
+
+    &:last-child {
+      margin-bottom: 0;
+      border: none;
+      padding-bottom: 0;
+    }
+
+    h3 {
+      @include font-size(14);
+      margin: 0 0 ($baseline/4) 0;
+      color: $gray-d2;
+      font-weight: 600;
+    }
+  }
+}
+
+// ====================
+
+// layout - grandfathered
+.main-wrapper {
+  position: relative;
+  margin: 0 40px;
 }
 
 .inner-wrapper {
-    position: relative;
-    max-width: 1280px;
-    margin: auto;
+  position: relative;
+  max-width: 1280px;
+  margin: auto;
 
-    > article {
-        clear: both;
-    }
+  > article {
+    clear: both;
+  }
 }
 
 .sidebar {
-    float: right;
-    width: 28%;
+  float: right;
+  width: 28%;
 }
 
 .left {
-    float: left;
+  float: left;
 }
 
 .right {
-    float: right;
+  float: right;
 }
 
+// ====================
+
+// forms
 input[type="text"],
 input[type="email"],
 input[type="password"],
 textarea.text {
-    padding: 6px 8px 8px;
-    @include box-sizing(border-box);
-    border: 1px solid $mediumGrey;
-    border-radius: 2px;
-    @include linear-gradient($lightGrey, tint($lightGrey, 90%));
-    background-color: $lightGrey;
-    @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
-    font-family: 'Open Sans', sans-serif;
-    font-size: 11px;
-    color: $baseFontColor;
+  padding: 6px 8px 8px;
+  @include box-sizing(border-box);
+  border: 1px solid $mediumGrey;
+  border-radius: 2px;
+  @include linear-gradient($lightGrey, tint($lightGrey, 90%));
+  background-color: $lightGrey;
+  @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
+  font-family: 'Open Sans', sans-serif;
+  font-size: 11px;
+  color: $baseFontColor;
+  outline: 0;
+
+  &::-webkit-input-placeholder,
+  &:-moz-placeholder,
+  &:-ms-input-placeholder {
+      color: #979faf;
+  }
+
+  &:focus {
+    @include linear-gradient($paleYellow, tint($paleYellow, 90%));
     outline: 0;
-
-    &::-webkit-input-placeholder,
-    &:-moz-placeholder,
-    &:-ms-input-placeholder {
-        color: #979faf;
-    }
-
-    &:focus {
-      @include linear-gradient($paleYellow, tint($paleYellow, 90%));
-      outline: 0;
-    }
+  }
 }
 
+// forms - specific
 input.search {
-    padding: 6px 15px 8px 30px;
-    @include box-sizing(border-box);
-    border: 1px solid $darkGrey;
-    border-radius: 20px;
-    background: url(../img/search-icon.png) no-repeat 8px 7px #edf1f5;
-    font-family: 'Open Sans', sans-serif;
-    color: $baseFontColor;
-    outline: 0;
+  padding: 6px 15px 8px 30px;
+  @include box-sizing(border-box);
+  border: 1px solid $darkGrey;
+  border-radius: 20px;
+  background: url(../img/search-icon.png) no-repeat 8px 7px #edf1f5;
+  font-family: 'Open Sans', sans-serif;
+  color: $baseFontColor;
+  outline: 0;
 
-    &::-webkit-input-placeholder {
-        color: #979faf;
-    }
+  &::-webkit-input-placeholder {
+      color: #979faf;
+  }
 }
 
 label {
-    font-size: 12px;
+  font-size: 12px;
 }
 
 code {
-    padding: 0 4px;
-    border-radius: 3px;
-    background: #eee;
-    font-family: Monaco, monospace;
+  padding: 0 4px;
+  border-radius: 3px;
+  background: #eee;
+  font-family: Monaco, monospace;
 }
 
 .CodeMirror {
-    font-size: 13px;
-    border: 1px solid $darkGrey;
-    background: #fff;
+  font-size: 13px;
+  border: 1px solid $darkGrey;
+  background: #fff;
 }
 
 .text-editor {
-    width: 100%;
-    min-height: 80px;
-    padding: 10px;
-    @include box-sizing(border-box);
-    border: 1px solid $mediumGrey;
-    @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3));
-    background-color:  #edf1f5;
-    @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.1) inset);
-    font-family: Monaco, monospace;
+  width: 100%;
+  min-height: 80px;
+  padding: 10px;
+  @include box-sizing(border-box);
+  border: 1px solid $mediumGrey;
+  @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3));
+  background-color:  #edf1f5;
+  @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.1) inset);
+  font-family: Monaco, monospace;
 }
 
+// ====================
+
+// UI - chrome
+.window {
+  @include clearfix();
+  @include border-radius(3px);
+  @include box-shadow(0 1px 1px $shadow-l1);
+  margin-bottom: $baseline;
+  border: 1px solid $gray-l2;
+  background: $white;
+  padding: $baseline ($baseline*1.5);
+}
+
+// ====================
+
+// UI - actions
 .new-unit-item,
 .new-subsection-item,
 .new-policy-item {
-    @include grey-button;
-    margin: 5px 8px;
-    padding: 3px 10px 4px 10px;
-    font-size: 10px;
+  @include grey-button;
+  margin: 5px 8px;
+  padding: 3px 10px 4px 10px;
+  font-size: 10px;
 
-    .new-folder-icon,
-    .new-policy-icon,
-    .new-unit-icon {
-        position: relative;
-        top: 2px;
-    }
+  .new-folder-icon,
+  .new-policy-icon,
+  .new-unit-icon {
+    position: relative;
+    top: 2px;
+  }
 }
 
 .item-actions {
-    position: absolute;
-    top: 5px;
-    right: 5px;
+  position: absolute;
+  top: 5px;
+  right: 5px;
 
-    .edit-button,
-    .delete-button,
-    .visibility-toggle {
-        float: left;
-        margin-right: 13px;
-        color: #a4aab7;
-    }
+  .edit-button,
+  .delete-button,
+  .visibility-toggle {
+    float: left;
+    margin-right: 13px;
+    color: #a4aab7;
+  }
+}
+
+// ====================
+
+// misc
+hr.divide {
+  @include text-sr();
 }
 
 .item-details {
@@ -194,81 +324,56 @@ code {
 }
 
 .window {
-    margin-bottom: 20px;
-    border: 1px solid $mediumGrey;
-    border-radius: 3px;
-    background: #fff;
-    @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
+  // @include border-radius(3px);
+  // @include box-shadow(0 1px 1px $shadow-l1);
+  // margin-bottom: $baseline;
+  // border: 1px solid $gray-l2;
+  // background: $white;
 
-    .window-contents {
-        padding: 20px;
+  .window-contents {
+    padding: 20px;
+  }
+
+  .header {
+    padding: 6px 14px;
+    border-bottom: 1px solid $mediumGrey;
+    border-radius: 2px 2px 0 0;
+    @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
+    background-color: $lightBluishGrey;
+    @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset);
+    font-size: 14px;
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
+  }
+
+  label {
+    display: block;
+    margin-bottom: 6px;
+    font-weight: 700;
+
+    &.inline-label {
+      display: inline;
     }
 
-    .header {
-        padding: 6px 14px;
-        border-bottom: 1px solid $mediumGrey;
-        border-radius: 2px 2px 0 0;
-        @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
-        background-color: $lightBluishGrey;
-        @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset);
-        font-size: 14px;
-        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
+    .description {
+      display: block;
+      font-size: 11px;
+      font-weight: 400;
+      font-style: italic;
+      line-height: 1.3;
+      color: #999;
     }
+  }
 
-    label {
-        display: block;
-        margin-bottom: 6px;
-        font-weight: 700;
-
-        &.inline-label {
-            display: inline;
-        }
-
-        .description {
-            display: block;
-            font-size: 11px;
-            font-weight: 400;
-            font-style: italic;
-            line-height: 1.3;
-            color: #999;
-        }
-    }
-
-    .row {
-        margin-bottom: 10px;
-        padding-bottom: 10px;
-        border-bottom: 1px solid #cbd1db;
-    }
+  .row {
+    margin-bottom: 10px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #cbd1db;
+  }
 }
 
-body.hide-wip {
-    .wip, .wip-box {
-        display: none !important;
-    }
-}
+// ====================
 
-body.show-wip {
-    .wip {
-        outline: 1px solid #f00 !important;
-        position: relative;
-    }
-
-    .wip-box {
-        @extend .wip;
-        &:after {
-            content: "WIP";
-            font-size: 8px;
-            padding: 2px;
-            background: #f00;
-            color: #fff;
-            @include position(absolute, 0px 0px 0 0);
-        }
-    }
-}
-
-.waiting {
-    
-}
+// system notifications
 .toast-notification {
   display: none;
   position: fixed;
@@ -328,50 +433,50 @@ body.show-wip {
 }
 
 .waiting {
-    position: relative;
+  position: relative;
 
-    &:before {
-        content: '';
-        display: block;
-        position: absolute;
-        top: 0;
-        left: 0;
-        z-index: 999998;
-        width: 100%;
-        height: 100%;
-        border-radius: inherit;
-        background: rgba(255, 255, 255, .9);
-    }
+  &:before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 999998;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    background: rgba(255, 255, 255, .9);
+  }
 
-    &:after {
-        content: '';
-        @extend .spinner-icon;
-        display: block;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        margin-left: -10px;
-        margin-top: -10px;
-        z-index: 999999;
-    }
+  &:after {
+    content: '';
+    @extend .spinner-icon;
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-left: -10px;
+    margin-top: -10px;
+    z-index: 999999;
+  }
 }
 
 .waiting-inline {
-    &:after {
-        content: '';
-        @extend .spinner-icon;
-    }
+  &:after {
+    content: '';
+    @extend .spinner-icon;
+  }
 }
 
 .new-button {
-    @include green-button;
-    font-size: 13px;
-    padding: 8px 20px 10px;
-    text-align: center;
+  @include green-button;
+  font-size: 13px;
+  padding: 8px 20px 10px;
+  text-align: center;
 
-    &.big {
-        display: block;
-    }
+  &.big {
+    display: block;
+  }
 }
 
 .edit-button.standard,
@@ -391,11 +496,12 @@ body.show-wip {
 
 .delete-button.standard {
 
-    &:hover {
-      background-color: tint($orange, 75%);
-    }
+  &:hover {
+    background-color: tint($orange, 75%);
+  }
 }
 
+// misc
 .tooltip {
   position: absolute;
   top: 0;
diff --git a/cms/static/sass/_header.scss b/cms/static/sass/_header.scss
index cceb1b7787..f747d9aae9 100644
--- a/cms/static/sass/_header.scss
+++ b/cms/static/sass/_header.scss
@@ -29,6 +29,10 @@
     margin: 0 auto;
     color: $gray-l1;
   }
+
+  nav .nav-item {
+    display: inline-block;
+  }
 }
 
 // ====================
@@ -51,9 +55,6 @@
 
 // general nav styles
 // ====================
-nav .nav-item {
-  display: inline-block;
-}
 
 // ====================
 
@@ -81,10 +82,10 @@ nav .nav-item {
 
 // specific elements - course name/info
 .info-course {
+  @include font-size(14);
   position: relative;
   margin: -3px ($baseline/2) 0 0;
   padding-right: ($baseline*0.75);
-  @include font-size(14);
 
   &:before {
     @extend .faded-vertical-divider;
diff --git a/cms/static/sass/_index.scss b/cms/static/sass/_index.scss
index 8fce870d71..ade1973493 100644
--- a/cms/static/sass/_index.scss
+++ b/cms/static/sass/_index.scss
@@ -311,6 +311,11 @@
     .content-cta {
       border-top: 1px solid $gray-l4;
 
+      header {
+        border: none;
+        margin: 0;
+        padding: 0;
+      }
 
       .list-actions {
         position: relative;
diff --git a/cms/static/sass/_settings.scss b/cms/static/sass/_settings.scss
index b11378145b..265cbb324b 100644
--- a/cms/static/sass/_settings.scss
+++ b/cms/static/sass/_settings.scss
@@ -1,800 +1,171 @@
-.settings {
-  .settings-overview {
+// Studio - Course Settings
+// ====================
+body.course.settings {
+
+  .content-primary, .content-supplementary {
+    @include box-sizing(border-box);
+    float: left;
+  }
+
+  .content-primary {
     @extend .window;
-    @include clearfix;
-    display: table;
-    width: 100%;
+    width: flex-grid(9, 12);
+    margin-right: flex-gutter();
+  }
 
-    // layout
-    .sidebar {
-      display: table-cell;
-      float: none;
-      width: 20%;
-      padding: 30px 0 30px 20px;
-      @include border-radius(3px 0 0 3px);
-      background: $lightGrey;      
-    }
+  .group-settings {
+    margin: 0 0 ($baseline*2) 0;
 
-    .main-column {
-      display: table-cell;
-      float: none;
-      width: 80%;
-      padding: 30px 40px 30px 60px;
-    }
+    header {
+      @include clearfix();
 
-    .settings-page-menu {
-      a {
-        display: block;
-        padding-left: 20px;
-        line-height: 52px;
+      .title-2 {
+        width: flex-grid(4, 9);
+        margin: 0 flex-gutter() 0 0;
+        float: left;
+      }
 
-        &.is-shown {
-          background: #fff;
-          @include border-radius(5px 0 0 5px);
-        }
+      .tip {
+        @include font-size(13);
+        width: flex-grid(5, 9);
+        float: right;
+        margin-top: ($baseline/2);
+        text-align: right;
+        color: $gray-l2;
       }
     }
 
-    .settings-page-section {
-      > .alert {
-        display: none;
+    // basic layout/elements
+    .title-2 {
 
-        &.is-shown {
-          display: block;
-        }
-      }
+    }
 
-      > section {
-        display: none;
-        margin-bottom: 40px;
+    .title-3 {
 
-        &.is-shown {
-          display: block;
-        }
-
-        &:last-child {
-          border-bottom: none;
-        }
-
-        > .title {
-          margin-bottom: 30px;
-          font-size: 28px;
-          font-weight: 300;
-          color: $blue;
-        }
-
-        > section {
-          margin-bottom: 100px;
-          @include clearfix;
-
-          header {
-            @include clearfix;
-            border-bottom: 1px solid $mediumGrey;
-            margin-bottom: 20px;
-            padding-bottom: 10px;
-
-            h3 {
-              color: $darkGrey;
-              float: left;
-
-              margin: 0 40px 0 0;
-              text-transform: uppercase;
-            }
-
-            .detail {
-              float: right;
-              margin-top: 3px;
-              color: $mediumGrey;
-              font-size: 13px;
-            }
-          }
-
-          &:last-child {
-            padding-bottom: 0;
-            border-bottom: none;
-          }
-        }
-      }
     }
 
     // form basics
-    label, .label {
+    .list-input {
+      margin: 0;
       padding: 0;
-      border: none;
-      background: none;
-      font-size: 15px;
-      font-weight: 400;
+      list-style: none;
 
-      &.check-label {
-        display: inline;
-        margin-left: 10px;
-      }
-
-      &.ranges {
-        margin-bottom: 20px;
-      }
-    }
-
-    input, textarea {
-      @include transition(all 1s ease-in-out);
-      @include box-sizing(border-box);
-      font-size: 15px;
-
-      &.long {
-        width: 100%;
-        min-width: 400px;
-      }
-
-      &.tall {
-        height: 200px;
-      }
-
-      &.short {
-        min-width: 100px;
-        width: 25%;
-      }
-
-      &.date {
-        display: block !important;
-      }
-
-      &.time {
-        width: 85px !important;
-        min-width: 85px !important;
-      }
-
-      &:disabled {
-        border: none;
-        @include box-shadow(none);
-        padding: 0;
-        color: $darkGrey !important;
-        font-weight: bold;
-        background: #fff;
-      }
-    }
-
-    textarea.tinymce {
-      border: 1px solid $darkGrey;
-      height: 300px;
-    }
-
-    input[type="checkbox"], input[type="radio"] {
-
-    }
-
-    input:disabled + .copy > label, input:disabled + .label {
-      color: $mediumGrey;
-    }
-
-
-    .input-default input, .input-default textarea {
-      color: $mediumGrey;
-      background: $lightGrey;
-    }
-
-    ::-webkit-input-placeholder {
-      color: $mediumGrey;
-      font-size: 13px;
-    }
-    :-moz-placeholder {  
-      color: $mediumGrey;  
-      font-size: 13px;
-    }
-
-    .tip {
-      color: $mediumGrey;
-      font-size: 13px;
-    }
-
-
-    // form layouts
-    .row {
-      margin-bottom: 30px;
-      padding-bottom: 30px;
-      border-bottom: 1px solid $lightGrey;
-
-      &:last-child {
-        margin-bottom: 0;
-        padding-bottom: 0;
-        border-bottom: none;
-      }
-
-      // structural labels, not semantic labels per se
-      > label, .label {
-        display: inline-block;
-        vertical-align: top;
-      }
-
-      // tips
-      .tip-inline {
-        display: inline-block;
-        margin-left: 10px;
-      }
-
-      .tip-stacked {
-        display: block;
-        margin-top: 10px;
-      }
-
-      // structural field, not semantic fields per se
       .field {
-        display: inline-block;
-        width: 100%;
+        margin: 0 0 ($baseline*0.75) 0;
 
-        > input, > textarea, .input {
-          display: inline-block;
-
-          &:last-child {
-            margin-bottom: 0;
-          }
-
-          .group {
-            input, textarea {
-              margin-bottom: 5px;
-            }
-
-            .label, label {
-              font-size: 13px;
-            }
-          }
-
-          // multi-field
-          &.multi {
-            display: block;
-            background: tint($lightGrey, 50%);
-            padding: 20px;
-            @include border-radius(4px);
-            @include box-sizing(border-box);
-
-            .group {
-              margin-bottom: 10px;
-              max-width: 175px;
-
-              &:last-child {
-                margin-bottom: 0;
-              }
-
-              input, .input, textarea {
-
-              }
-
-              .tip-stacked {
-                margin-top: 0;
-              }
-            }
-          }
-
-          // multi stacked
-          &.multi-stacked {
-            
-            .group {
-              input, .input, textarea {
-                min-width: 370px;
-                width: 370px;
-              }
-            }
-          }
-
-          // multi-field inline
-          &.multi-inline {
-            @include clearfix;
-
-            .group {
-              float: left;
-              margin-right: 20px;
-
-              &:nth-child(2) {
-                margin-right: 0;
-              }
-
-              .input, input, textarea {
-                width: 100%;
-              }
-            }
-          }
+        &:last-child {
+          margin-bottom: 0;
         }
 
-        // input-list
-        .input-list {
-
-          .input {
-            margin-bottom: 15px;
-            padding-bottom: 15px;
-            border-bottom: 1px dotted $lightGrey;
-            @include clearfix();
-
-            &:last-child {
-              border: 0;
-            }
-
-            .row {
-            }
-          }
-        }
-
-        //radio buttons and checkboxes
-        .input-radio {
-          @include clearfix();
-
-          input {
-            display: block;
-            float: left;
-            margin-right: 10px;
-          }
-
-          .copy {
-            position: relative;
-            top: -5px;
-            float: left;
-            width: 350px;
-          }
+        &.required {
 
           label {
-            display: block;
-            margin-bottom: 0;
+            font-weight: 600;
           }
 
-          .tip {
-            display: block;
-            margin-top: 0;
-          }
-
-          .message-error {
-
+          label:after {
+            margin-left: ($baseline/4);
+            content: "*";
           }
         }
 
-        .input-checkbox {
-          
-        }
-
-        // enumerated inputs
-        &.enum {
-        }
-      }
-      
-      // layout - aligned label/field pairs 
-      &.row-col2 {
-
-        > label, .label {
-          width: 200px;
-        }
-
-        .field {
-          width: 400px ! important;
-        }
-
-        &.multi-inline {
-          @include clearfix();
-
-          .group {
-            width: 170px;
-          }  
-        }
-      }
-
-      .field-additional {
-        margin-left: 204px;       
-      }
-    }
-
-    // editing controls - adding
-    .new-item, .replace-item {
-      clear: both;
-      display: block;
-      margin-top: 10px;
-      padding-bottom: 10px;
-      @include grey-button;
-      @include box-sizing(border-box);
-    }
-
-
-    // editing controls - removing
-    .delete-button {
-      float: right;
-    }
-
-    // editing controls - preview
-    .input-existing {
-      display: block !important;
-
-      .current {
-        width: 100%;
-        margin: 10px 0;
-        padding: 10px;
-        @include box-sizing(border-box);
-        @include border-radius(5px);
-        font-size: 14px;
-        background: tint($lightGrey, 50%);
-        @include clearfix();
-      
-        .doc-filename {
-          display: inline-block;
-          width: 220px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-
-        .remove-doc-data {
-          display: inline-block;
-          margin-top: 0;
-          width: 150px;
-        }
-      }
-    }
-
-    // specific sections
-    .settings-details {
-
-    }
-
-    .settings-faculty {
-
-      .settings-faculty-members {
-
-        > header {
-          display: none;
-        }
-
-        .field .multi {
+        label, input, textarea {
           display: block;
-          margin-bottom: 40px;
-          padding: 20px;
-          background: tint($lightGrey, 50%);
-          @include border-radius(4px);
-          @include box-sizing(border-box);
         }
 
-        .course-faculty-list-item {
+        label {
+          @include font-size(14);
+          @include transition(color, 0.15s, ease-in-out);
+          margin: 0 0 ($baseline/4) 0;
 
-          .row {
+          &.is-focused {
+            color: $blue;
+          }
+        }
 
-            &:nth-child(4) {
-              padding-bottom: 0;
-              border-bottom: none;
-            }
+        input, textarea {
+          @include font-size(16);
+          height: 100%;
+          width: 100%;
+          padding: ($baseline/2);       
+
+          &.long {
+            width: 100%;
           }
 
-          .remove-faculty-photo {
+          &.short {
+            width: 25%;
+          }
+
+          ::-webkit-input-placeholder {
+             color: $gray-l4;
+          }
+
+          :-moz-placeholder {
+             color: $gray-l3; 
+          }
+
+          ::-moz-placeholder {
+             color: $gray-l3;  
+          }
+
+          :-ms-input-placeholder {  
+             color: $gray-l3; 
+          }
+        }
+
+        textarea.long {
+          height: ($baseline*5);
+        }
+
+        input[type="checkbox"] {
+          display: inline-block;
+          margin-right: ($baseline/4);
+          width: auto;
+          height: auto;
+
+          & + label {
             display: inline-block;
           }
         }
 
-        #course-faculty-bio-input {
-          margin-bottom: 0;
-        }
-
-        .new-course-faculty-item {
-        }
-
-        .current-faculty-photo {
-          padding: 0;
-
-          img {
-            display: block;
-            @include box-shadow(0 1px 3px rgba(0,0,0,0.1));
-            padding: 10px;
-            border: 2px solid $mediumGrey;
-            background: #fff;
-          }
-        }
-      }
-    }
-
-    .settings-grading {
-
-      .setting-grading-assignment-types {
-
-        .row .field.enum {
-          width: 684px;
-        }
-      }
-
-      .course-grading-assignment-list-item {
-
-      }
-
-      .input-list {
-        .row {
-
-          .input {
-            &:last-child {
-              margin-bottom: 0;
-              padding-bottom: 0;
-            }
-          }
-        }
-      }
-    }
-
-    .settings-handouts {
-
-    }
-
-    .settings-problems {
-
-      > section {
-
-        &.is-shown {
+        .tip {
+          @include font-size(13);
           display: block;
-        }
-      }
-    }
-
-    .settings-discussions {
-
-      .course-discussions-categories-list-item {
-
-        label {
-          display: none;
-        }
-
-        .group {
-          display: inline-block;
-        }
-
-        .remove-item {
-          display: inline-block !important;
-          margin-left: 10px;
+          margin-top: ($baseline/4);
+          color: $gray-l3;
         }
       }
 
+      .field-group {
+        @include clearfix();
+        margin: 0 0 ($baseline/2) 0;
 
-    }
+        .field {
+          display: block;
+          width: 47%;
+          border-bottom: none;
+          margin: 0 $baseline 0 0;
+          padding-bottom: 0;
 
-    // states
-    label.is-focused {
-      color: $blue;
-      @include transition(color 1s ease-in-out);
-    }
+          &:nth-child(odd) {
+            float: left;
+          }
 
-    // extras/abbreviations
-    // .settings-extras {
+          &:nth-child(even) {
+            float: right;
+            margin-right: 0;
+          }
 
-    //   > header {
-    //     cursor: pointer;
-
-    //     &.active {
-
-    //     }
-    //   }
-      
-    //    > div {
-    //     display: none;
-    //     @include transition(display 0.25s ease-in-out);
-
-    //     &.is-shown {
-    //       display: block;
-    //     }
-    //    }
-    // }
-
-    input.error, textarea.error {
-      border-color: $red;
-    }
-
-    .message-error {
-      display: block;
-      margin-top: 5px;
-      color: $red;
-      font-size: 13px;
-    }
-
-    // misc
-    .divide {
-      display: none;
-    }
-
-    i.ss-icon {
-      position: relative;
-      top: 1px;
-      margin-right: 5px;
-    }
-
-    .well {
-      padding: 20px;
-      background: $lightGrey;
-      border: 1px solid $mediumGrey;
-      @include border-radius(4px);
-      @include box-shadow(0 1px 1px rgba(0,0,0,0.05) inset)
+          input, textarea {
+            width: 100%;
+          }
+        }
+      }
     }
   }
 
-
-
-  h3 {
-    margin-bottom: 30px;
-    font-size: 15px;
-    font-weight: 700;
-    color: $blue;
-  }
-
-  .grade-controls {
-    @include clearfix;
-    width: 642px;
-  }
-
-  .new-grade-button {
-    position: relative;
-    float: left;
-    display: block;
-    width: 29px;
-    height: 29px;
-    margin: 10px 20px 0 0;
-    border-radius: 20px;
-    border: 1px solid $darkGrey;
-    @include linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
-    background-color: #d1dae3;
-    @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
-    color: #6d788b;
-
-    .plus-icon {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      margin-left: -6px;
-      margin-top: -6px;
-    }
-  }
-
-  .grade-slider {
-    float: left;
-    width: 580px;
-    margin-bottom: 10px;
-
-    .grade-bar {
-      position: relative;
-      width: 100%;
-      height: 50px;
-      background: $lightGrey;
-
-      .increments {
-        position: relative;
-
-        li {
-          position: absolute;
-          top: 52px;
-          width: 30px;
-          margin-left: -15px;
-          font-size: 9px;
-          text-align: center;
-
-          &.increment-0 {
-            left: 0;
-          }
-
-          &.increment-10 {
-            left: 10%;
-          }
-
-          &.increment-20 {
-            left: 20%;
-          }
-
-          &.increment-30 {
-            left: 30%;
-          }
-
-          &.increment-40 {
-            left: 40%;
-          }
-
-          &.increment-50 {
-            left: 50%;
-          }
-
-          &.increment-60 {
-            left: 60%;
-          }
-
-          &.increment-70 {
-            left: 70%;
-          }
-
-          &.increment-80 {
-            left: 80%;
-          }
-
-          &.increment-90 {
-            left: 90%;
-          }
-
-          &.increment-100 {
-            left: 100%;
-          }
-        }
-      }
-      
-      .grade-specific-bar {
-        height: 50px !important;
-      }
-
-      .grades {
-        position: relative;
-
-        li {
-          position: absolute;
-          top: 0;
-          height: 50px;     
-          text-align: right;
-          @include border-radius(2px);
-
-          &:hover,
-          &.is-dragging {
-            .remove-button {
-              display: block;
-            }
-          }
-
-          &.is-dragging {
-
-
-          }
-
-          .remove-button {
-            display: none;
-            position: absolute;
-            top: -17px;
-            right: 1px;
-            height: 17px;
-            font-size: 10px;
-          }
-
-          &:nth-child(1) {
-            background: #4fe696;
-          }
-
-          &:nth-child(2) {
-            background: #ffdf7e;
-          }
-
-          &:nth-child(3) {
-            background: #ffb657;
-          }
-
-          &:nth-child(4) {
-            background: #ef54a1;
-          }
-
-          &:nth-child(5),
-          &.bar-fail {
-            background: #fb336c;
-          }
-
-          .letter-grade {
-            display: block;
-            margin: 10px 15px 0 0;
-            font-size: 16px;
-            font-weight: 700;
-            line-height: 14px;
-          }
-
-          .range {
-            display: block;
-            margin-right: 15px;
-            font-size: 10px;
-            line-height: 12px;
-          }
-
-          .drag-bar {
-            position: absolute;
-            top: 0;
-            right: -1px;
-            height: 50px;
-            width: 2px;
-            background-color: #fff;
-            @include box-shadow(-1px 0 3px rgba(0,0,0,0.1));
-
-            cursor: ew-resize;
-            @include transition(none);
-
-            &:hover {
-              width: 6px;
-              right: -2px;
-            }
-          }
-        }
-      }
-    }
+  .content-supplementary {
+    width: flex-grid(3, 12);
   }
 }
\ No newline at end of file
diff --git a/cms/templates/login.html b/cms/templates/login.html
index 66460fb0ef..d0f19d585c 100644
--- a/cms/templates/login.html
+++ b/cms/templates/login.html
@@ -8,7 +8,7 @@
 <div class="wrapper-content wrapper">
   <section class="content">
     <header>
-      <h1>Sign into edX Studio</h1>
+      <h1 class="title title-1">Sign into edX Studio</h1>
       <a href="" class="action action-signin">Don't have a Studio Account? Sign up!</a>
     </header>
 
@@ -45,7 +45,7 @@
       <h2 class="sr">Studio Support</h2>
 
       <div class="bit">
-        <h3>Need Help?</h3>
+        <h3 class="title-3">Need Help?</h3>
         <p>Having trouble with your account? Use <a href="" rel="external">our support center</a> to look over self help steps, find solutions others have found to the same problem, or let us know of your issue.</p>
       </div>
     </aside>
diff --git a/cms/templates/settings.html b/cms/templates/settings.html
index 14d5283df0..5c44a7b2f5 100644
--- a/cms/templates/settings.html
+++ b/cms/templates/settings.html
@@ -1,14 +1,12 @@
 <%inherit file="base.html" />
 <%block name="title">Schedule &amp; Details</%block>
-<%block name="bodyclass">is-signedin course settings</%block>
-
+<%block name="bodyclass">is-signedin course schedule settings</%block>
 
 <%namespace name='static' file='static_content.html'/>
 <%!
 from contentstore import utils 
 %>
 
-
 <%block name="jsextra">
   <link rel="stylesheet" type="text/css" href="${static.url('js/vendor/timepicker/jquery.timepicker.css')}" />
   <script src="${static.url('js/vendor/timepicker/jquery.timepicker.js')}"></script>
@@ -37,214 +35,99 @@ from contentstore import utils
 </%block>
 
 <%block name="content">
-  <!-- -->
-  <div class="main-wrapper">
-    <div class="inner-wrapper">      
-      <h1>Settings</h1>
-      <article class="settings-overview">
-        <div class="settings-page-section main-column">
+<div class="wrapper-content wrapper">
+  <section class="content">
+    <header>
+      <span class="title-sub">Settings</span>
+      <h1 class="title-1">Schedule &amp; Details</h1>
+    </header>
 
-          <section class="settings-details is-shown">
-            <h2 class="title">Course Details</h2>
-
-            <section class="settings-details-basic">
-              <header>
-                <h3>Basic Information</h3>
-                <span class="detail">The nuts and bolts of your course</span>
-              </header>
-
-              <div class="row row-col2">
-                <label for="course-name">Course Name:</label>
-                <div class="field">
-                  <div class="input">
-                    <input type="text" class="long" id="course-name" value="[Course Name]" disabled="disabled">
-                    <span class="tip tip-stacked">This is used in <a href="${utils.get_lms_link_for_about_page(course_location)}">your course URL</a>, and cannot be changed</span>
-                  </div>
-                </div>
-              </div>
-
-              <div class="row row-col2">
-                <label for="course-organization">Organization:</label>
-                <div class="field">
-                  <div class="input">
-                    <input type="text" class="long" id="course-organization" value="[Course Organization]" disabled="disabled">
-                    <span class="tip tip-stacked">This is used in <a href="${utils.get_lms_link_for_about_page(course_location)}">your course URL</a>, and cannot be changed</span>
-                  </div>
-                </div>
-              </div>
-
-              <div class="row row-col2">
-                <label for="course-number">Course Number:</label>
-                <div class="field">
-                  <div class="input">
-                    <input type="text" class="short" id="course-number" value="[Course No.]" disabled="disabled">
-                    <span class="tip tip-stacked">This is used in <a href="${utils.get_lms_link_for_about_page(course_location)}">your course URL</a>, and cannot be changed</span>
-                  </div>
-                </div>
-              </div>
-            </section><!-- .settings-details-basic -->
-
-            <hr class="divide" />
-
-            <section class="settings-details-schedule">
-              <header>
-                <h3>Course Schedule</h3>
-                <span class="detail">Important steps and segments of your course</span>
-              </header>
-
-              <div class="row row-col2">
-                <h4 class="label">Course Dates:</h4>
-                
-                <div class="field">
-                  <div class="input multi multi-inline"  id="course-start">
-                    <div class="group">
-                      <label for="course-start-date">Start Date</label>
-                      <input type="text" class="start-date date start datepicker" id="course-start-date" placeholder="MM/DD/YYYY" autocomplete="off">
-                      <span class="tip tip-stacked">First day the course begins</span>          
-                    </div>
-
-                    <div class="group">
-                      <label for="course-start-time">Start Time</label>
-                      <input type="text" class="time start timepicker" id="course-start-time" value="" placeholder="HH:MM" autocomplete="off">
-                      <span class="tip tip-stacked" id="timezone"></span>          
-                    </div>
-                  </div>
-                </div>
-
-                <div class="field field-additional">
-                  <div class="input multi multi-inline" id="course-end">
-                    <div class="group">
-                      <label for="course-end-date">End Date</label>
-                      <input type="text" class="end-date date end" id="course-end-date" placeholder="MM/DD/YYYY" autocomplete="off">
-                      <span class="tip tip-stacked">Last day the course is active</span>          
-                    </div>
-
-                    <div class="group">
-                      <label for="course-end-time">End Time</label>
-                      <input type="text" class="time end" id="course-end-time" value="" placeholder="HH:MM" autocomplete="off">
-                      <span class="tip tip-stacked" id="timezone"></span>          
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div class="row row-col2">
-                <h4 class="label">Enrollment Dates:</h4>
-                
-                <div class="field">
-                  <div class="input multi multi-inline" id="enrollment-start">
-                    <div class="group">
-                      <label for="course-enrollment-start-date">Start Date</label>
-                      <input type="text" class="start-date date start" id="course-enrollment-start-date" placeholder="MM/DD/YYYY" autocomplete="off">
-                      <span class="tip tip-stacked">First day students can enroll</span>          
-                    </div>
-
-                    <div class="group">
-                      <label for="course-enrollment-start-time">Start Time</label>
-                      <input type="text" class="time start" id="course-enrollment-start-time" value="" placeholder="HH:MM" autocomplete="off">
-                      <span class="tip tip-stacked" id="timezone"></span>           
-                    </div>
-                  </div>
-                </div>
-
-                <div class="field field-additional">
-                  <div class="input multi multi-inline" id="enrollment-end">
-                    <div class="group">
-                      <label for="course-enrollment-end-date">End Date</label>
-                      <input type="text" class="end-date date end" id="course-enrollment-end-date" placeholder="MM/DD/YYYY" autocomplete="off">
-                      <span class="tip tip-stacked">Last day students can enroll</span>          
-                    </div>
-
-                    <div class="group">
-                      <label for="course-enrollment-end-time">End Time</label>
-                      <input type="text" class="time end" id="course-enrollment-end-time" value="" placeholder="HH:MM" autocomplete="off">
-                      <span class="tip tip-stacked" id="timezone"></span>           
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <!-- <div class="row row-col2">
-                <label for="course-syllabus">Course Syllabus</label>
-                <div class="field">
-                  <div class="input input-existing">
-                    <div class="current current-course-syllabus">
-                      <span class="doc-filename"></span>
-
-                      <a href="#" class="remove-item remove-course-syllabus remove-doc-data" id="course-syllabus"><span class="delete-icon"></span> Delete Syllabus</a>
-                    </div>
-                  </div>
-
-                  <div class="input">
-                    <a href="#" class="new-item new-course-syllabus add-syllabus-data" id="course-syllabus">
-                      <span class="upload-icon"></span>Upload Syllabus
-                    </a>
-                    <span class="tip tip-inline">PDF formatting preferred</span>          
-                  </div>
-                </div>
-              </div> -->
-            </section><!-- .settings-details-schedule -->
-
-            <hr class="divide" />
-
-            <section class="setting-details-marketing">
-              <header>
-                <h3>Introducing Your Course</h3>
-                <span class="detail">Information for perspective students</span>
-              </header>
-
-              <div class="row row-col2">
-                <label for="course-overview">Course Overview:</label>
-                <div class="field">
-                  <div class="input">
-                    <textarea class="long tall tinymce text-editor" id="course-overview"></textarea>
-                    <span class="tip tip-stacked">Introductions, prerequisites, FAQs that are used on <a href="${utils.get_lms_link_for_about_page(course_location)}">your course summary page</a></span>
-                  </div>
-                </div>      
-              </div>
-
-              <div class="row row-col2">
-                <label for="course-introduction-video">Introduction Video:</label>
-                <div class="field">
-                  <div class="input input-existing">
-                    <div class="current current-course-introduction-video">
-                      <iframe width="380" height="215" src="" frameborder="0" allowfullscreen></iframe>
-
-                      <a href="#" class="remove-item remove-course-introduction-video remove-video-data"><span class="delete-icon"></span> Delete Video</a>
-                    </div>
-                  </div>
-
-                  <div class="input">
-                    <input type="text" class="long new-course-introduction-video add-video-data" id="course-introduction-video" value="" placeholder="id" autocomplete="off">
-                    <span class="tip tip-stacked">Video restrictions go here</span>
-                  </div>
-                </div>
-              </div>
-            </section><!-- .settings-details-marketing -->
-
-            <hr class="divide" />
-
-            <section class="settings-details-requirements">
-              <header>
-                <h3>Requirements</h3>
-                <span class="detail">Expectations of the students taking this course</span>
-              </header>
-
-              <div class="row row-col2">
-                <label for="course-effort">Hours of Effort per Week:</label>
-                <div class="field">
-                  <div class="input">
-                    <input type="text" class="short time" id="course-effort" placeholder="HH:MM">
-                    <span class="tip tip-inline">Time spent on all course work</span>
-                  </div>
-                </div>
-              </div>
-            </section>
-          </section><!-- .settings-details -->
-
-        </div>
-      </article>
+    <div class="introduction">
+      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
     </div>
-  </div>
-  <footer></footer>
+
+    <article class="content-primary" role="main">
+      <form id="settings_details" method="post" action="">
+        <section class="group-settings basic">
+          <header>
+            <h2 class="title-2">Basic Information</h2>
+            <span class="tip">The nuts and bolts of your course</span>
+          </header>
+
+
+        </section>
+
+        <hr class="divide" />
+
+        <section class="group-settings schedule">
+          <header>
+            <h2 class="title-2">Course Schedule</h2>
+            <span class="tip">Important steps and segments of your course</span>
+          </header>
+
+        </section>
+
+        <hr class="divide" />
+
+        <section class="group-settings marketing">
+          <header>
+            <h2 class="title-2">Introducing Your Course</h2>
+            <span class="tip">Information for perspective students</span>
+          </header>
+
+          <ol class="list-input">
+            <li class="field text" id="field-course-overview">
+              <label for="course-overview">Course Overview:</label>
+              <input id="email" type="email" name="email" placeholder="e.g. jane.doe@gmail.com" />
+              <textarea class="tinymce text-editor" id="course-overview"></textarea>
+              <span class="tip tip-stacked">Introductions, prerequisites, FAQs that are used on <a href="${utils.get_lms_link_for_about_page(course_location)}">your course summary page</a></span>
+            </li>
+
+            <li class="field video" id="field-course-introduction-video">
+              <div class="input input-existing">
+                <div class="current current-course-introduction-video">
+                  <iframe width="100%" height="" src="" frameborder="0" allowfullscreen></iframe>
+
+                  <a href="#" class="remove-item remove-course-introduction-video remove-video-data"><span class="delete-icon"></span> Delete Video</a>
+                </div>
+              </div>
+
+              <div class="input">
+                <input type="text" class="long new-course-introduction-video add-video-data" id="course-introduction-video" value="" placeholder="id" autocomplete="off">
+                <span class="tip tip-stacked">Video restrictions go here</span>
+              </div>
+            </li>
+          </ol>
+        </section>
+
+        <hr class="divide" />
+
+        <section class="group-settings requirements">
+          <header>
+            <h2 class="title-2">Requirements</h2>
+            <span class="tip">Expectations of the students taking this course</span>
+          </header>
+
+        </section>
+      </form>
+    </article>
+
+    <aside class="content-supplementary" role="complimentary">
+      <div class="bit">
+        <h3 class="title-3">How will these settings be used</h3>
+        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
+      </div>
+
+      <div class="bit">
+        <h3 class="title-3">Other Course Settings</h3>
+        <nav class="nav-related">
+          <ul>
+            <li class="nav-item"><a href="">Grading</a></li>
+            <li class="nav-item"><a href="">Advanced Settings</a></li>
+          </ul>
+        </nav>
+      </div>
+    </aside>
+  </section>
+</div>
 </%block>
diff --git a/cms/templates/signup.html b/cms/templates/signup.html
index 51305a0193..c29f2eea57 100644
--- a/cms/templates/signup.html
+++ b/cms/templates/signup.html
@@ -9,7 +9,7 @@
 <div class="wrapper-content wrapper">
   <section class="content">
     <header>
-      <h1>Sign Up for edX Studio</h1>
+      <h1 class="title title-1">Sign Up for edX Studio</h1>
       <a href="" class="action action-signin">Already have a Studio Account? Sign in</a>
     </header>
 
@@ -77,17 +77,17 @@
       <h2 class="sr">Common Studio Questions</h2>
 
       <div class="bit">
-        <h3>Who is Studio for?</h3>
+        <h3 class="title-3">Who is Studio for?</h3>
         <p>Studio is for anyone that wants to create online courses that leverage the global edX platform. Our users are often faculty members, teaching assistants and course staff, and members of instructional technology groups.</p>
       </div>
 
       <div class="bit">
-        <h3>How technically savvy do I need to be to create courses in Studio?</h3>
+        <h3 class="title-3">How technically savvy do I need to be to create courses in Studio?</h3>
         <p>Studio is designed to be easy to use by almost anyone familiar with common web-based authoring environments (Wordpress, Moodle, etc.). No programming knowledge is required, but for some of the more advanced features, a technical background would be helpful. As always, we are here to help, so don't hesitate to dive right in.</p>
       </div>
 
       <div class="bit">
-        <h3>I've never authored a course online before. Is there help?</h3>
+        <h3 class="title-3">I've never authored a course online before. Is there help?</h3>
         <p>Absolutely. We have created an online course, edX101, that describes some best practices: from filming video, creating exercises, to the basics of running an online course. Additionally, we're always here to help, just drop us a note.</p>
       </div>
     </aside>