diff --git a/cms/static/sass/_developer.scss b/cms/static/sass/_developer.scss
index dd92d653d4b6..f5c69e8e6b77 100644
--- a/cms/static/sass/_developer.scss
+++ b/cms/static/sass/_developer.scss
@@ -8,79 +8,3 @@
 // }
 
 // --------------------
-
-//.wrapper-xblock-header {
-
-.view-outline,
-.view-container {
-
-  .add-xblock-component {
-    text-align: center;
-
-    .add-button {
-      padding: 5px 10px;
-      background-color: $blue;
-      color: $white;
-      text-align: center;
-    }
-  }
-
-  .draggable-drop-indicator {
-    left: 0;
-  }
-
-  .nav-actions {
-    .collapse-all {
-      .expand-all {
-        display: none;
-      }
-    }
-
-    .expand-all {
-      .collapse-all {
-        display: none;
-      }
-    }
-  }
-
-  .outline-item {
-    padding: 6px 8px 8px 16px;
-    text-wrap: avoid;
-    border: 1px solid $gray;
-    margin: 5px;
-    background-color: $white;
-
-    .wrapper-xblock-header-secondary {
-      padding: 0px 8px 0px 26px;
-
-      .meta-info {
-        font-size: 12px;
-      }
-    }
-
-    .xblock-title {
-      width: 100%;
-    }
-
-    .actions-list {
-      .action-item {
-        display: inline-block;
-      }
-    }
-  }
-
-  .outline-item.collapsed {
-    .sortable-list,
-    .add-xblock-component {
-      display: none;
-    }
-  }
-
-  .item-actions {
-    .configure-button {
-      float: left;
-      margin-right: 13px;
-      color: #a4aab7;
-    }
-  }
-}
diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss
index ce29dc96dc89..bf5fa1bb784a 100644
--- a/cms/static/sass/_variables.scss
+++ b/cms/static/sass/_variables.scss
@@ -49,6 +49,7 @@ $gray-d3: shade($gray,60%);
 $gray-d4: shade($gray,80%);
 
 $blue: rgb(0, 159, 230);
+$blue-alt: rgb(88, 152, 219);
 $blue-l1: tint($blue,20%);
 $blue-l2: tint($blue,40%);
 $blue-l3: tint($blue,60%);
@@ -104,6 +105,7 @@ $red-u2: desaturate($red,30%);
 $red-u3: desaturate($red,45%);
 
 $green: rgb(37, 184, 90);
+$green-alt: rgb(48, 183, 94);
 $green-l1: tint($green,20%);
 $green-l2: tint($green,40%);
 $green-l3: tint($green,60%);
@@ -160,6 +162,18 @@ $shadow-l2: rgba($black, 0.05);
 $shadow-d1: rgba($black, 0.4);
 $shadow-d2: rgba($black, 0.6);
 
+// colors - application
+$color-draft: $gray-l3;
+$color-released: $blue-alt;
+$color-published: $green-alt;
+$color-warning: $orange;
+$color-error: $red;
+$color-staff-only: $gray-d3;
+$color-heading-base: $gray-d2;
+$color-copy-base: $gray-l1;
+
+
+
 // ====================
 
 // timing - used for animation/transition mixin syncing
diff --git a/cms/static/sass/elements/_modules.scss b/cms/static/sass/elements/_modules.scss
index 2ea12140ef71..7adb09b650e4 100644
--- a/cms/static/sass/elements/_modules.scss
+++ b/cms/static/sass/elements/_modules.scss
@@ -3,6 +3,7 @@
 // Patterns for pieces of content - modules - used throughout the app
 
 // basic gray module with a strong top border and title, with related content box attached
+// --------------------
 %bar-module {
   margin-bottom: $baseline;
   border-top: 5px solid $gray-l1;
@@ -31,6 +32,7 @@
 }
 
 // blue bar and title bg version
+// --------------------
 %bar-module-blue {
   @extend %bar-module;
   border-top: 5px solid $blue;
@@ -42,6 +44,7 @@
 
 
 // green bar and title bg version
+// --------------------
 %bar-module-green {
   @extend %bar-module;
   border-top: 5px solid $green;
@@ -53,6 +56,7 @@
 
 
 // yellow bar and title bg version
+// --------------------
 %bar-module-yellow {
   @extend %bar-module;
   border-top: 5px solid $orange-l2;
@@ -65,6 +69,7 @@
 
 
 // red bar and title bg version
+// --------------------
 %bar-module-red {
   @extend %bar-module;
   border-top: 5px solid $red-l2;
@@ -76,6 +81,7 @@
 
 // Add new component menu with big green buttons
 // outermost wrapper for add a new component menu
+// --------------------
 .add-xblock-component {
   margin: $baseline ($baseline/2);
   border: 1px solid $gray-l3;
@@ -134,6 +140,7 @@
 
   // outer most wrapper div for scroll up component picker menus
   // swaps in when a green button is clicked
+  // --------------------
   .new-component-templates {
     @include clearfix;
     display: none;
@@ -163,6 +170,7 @@
   }
 
   // individual menus
+  // --------------------
   .new-component-template {
     @include clearfix;
 
@@ -195,6 +203,7 @@
   }
 
   // basic and advanced problem tabs - also handled by jquery-ui tabs
+  // --------------------
   .problem-type-tabs {
     @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
     list-style-type: none;
@@ -240,4 +249,10 @@
   }
 }
 
+// outline UI
+// --------------------
+.outline {
+
+}
+
 
diff --git a/cms/static/sass/elements/_typography.scss b/cms/static/sass/elements/_typography.scss
index 2d0ff054125d..e14d52f6d2e6 100644
--- a/cms/static/sass/elements/_typography.scss
+++ b/cms/static/sass/elements/_typography.scss
@@ -3,6 +3,23 @@
 
 // Scale - (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72)
 
+// weights
+%t-ultrastrong {
+ font-weight: 800;
+}
+%t-strong {
+ font-weight: 600;
+}
+%t-regular {
+ font-weight: 400;
+}
+%t-light {
+ font-weight: 300;
+}
+%t-ultralight {
+ font-weight: 200;
+}
+
 // headings/titles
 %t-title {
   font-family: $f-sans-serif;
diff --git a/cms/static/sass/views/_outline.scss b/cms/static/sass/views/_outline.scss
index 4668be32741a..4051e42191cc 100644
--- a/cms/static/sass/views/_outline.scss
+++ b/cms/static/sass/views/_outline.scss
@@ -3,7 +3,14 @@
 
 .view-outline {
 
+  // outline-centric stuff to abstract
+  // --------------------
+  $outline-indent-width: $baseline;
+
+
+
   // page structure
+  // --------------------
   .content-primary,
   .content-supplementary {
     @include box-sizing(border-box);
@@ -37,7 +44,8 @@
   }
 
 
-  // page header bits
+  // page header
+  // --------------------
   .toggle-button-sections {
     @extend %t-copy-sub2;
     position: relative;
@@ -55,8 +63,10 @@
     }
   }
 
+  // adding outline elements
+  // --------------------
 
-  // new section, subsection, unit
+  // forms
   .new-section-name,
   .new-subsection-name-input {
     @include font-size(16);
@@ -84,6 +94,7 @@
     color: $gray-l1;
   }
 
+  // buttons
   .new-subsection-item,
   .new-unit-item {
     @extend %ui-btn-flat-outline;
@@ -106,490 +117,288 @@
 
 
   // UI: general action list styles (section and subsection)
-
+  // --------------------
   .expand-collapse {
     @extend %expand-collapse;
-    margin: 0 ($baseline/4);
   }
 
   // UI: element actions list
-  // TODO: outline page can be updated to reflect styling from %actions-list in _controls.scss
-  .actions-list {
-    display: inline-block;
-    margin-bottom: 0;
-  }
-
-  .actions-item {
-    @include font-size(13);
-    display: inline-block;
-    padding: 0 ($baseline/5);
-    vertical-align: middle;
+  // --------------------
 
-    .action {
-      min-width: ($baseline*.75);
-      color: $gray-l2;
+  // outline
+  // --------------------
+  .outline {
 
-      &:hover,
-      &.is-set {
-        color: $blue;
-        visibility: visible;
-      }
-
-      //reset old drag handle style
-      &.drag-handle {
-        float: none;
-        margin: 0;
-        background: transparent url(../img/drag-handles.png) right 5px no-repeat;
-        text-align: center;
-      }
-
-    }
   }
 
+  .outline-item {
 
-  // section styles
-  .courseware-section {
-    @extend %ui-window;
-    @include transition(background $tmg-avg ease-in-out 0);
-    position: relative;
-    padding: ($baseline*1.5) $baseline $baseline $baseline;
-
-    &.collapsed {
-      padding-bottom: 0;
+    .status-release {
+      @extend %t-strong;
     }
 
-    &.collapsed .subsection-list,
-    .collapsed .subsection-list,
-    .collapsed > ol {
-        display: none !important;
-    }
+    // STATE: not published + not scheduled/released
 
-    &.new-section {
-      padding: ($baseline*1.5) $baseline 0 $baseline;
 
-      header {
-        @include clearfix();
-        height: auto;
-        border-bottom: 0;
+  }
 
-        .expand-collapse {
-          display: none;
-        }
+  // sections
+  // --------------------
+  .list-sections {
 
-        .item-details {
-          width: auto;
+  }
 
-          .section-name {
-            float: none;
-            width: 100%;
-          }
-        }
-      }
-    }
+  .outline-section {
+    @extend %ui-window;
+    margin-bottom: $baseline;
+    padding: ($baseline/4) $baseline ($baseline*0.75) $baseline;
 
-    .section {
-      @include clearfix();
-      min-height: 65px; // needed to align with edit input
+    // CASE: last-child in UI
+    &:last-child {
       margin-bottom: 0;
-      border: 0;
-      padding: 0;
-
-      // section name area
-      .item-details {
-        @include clearfix();
-        width: 400px;
-        float: none;
-        display: inline-block;
-        padding: 0 0 ($baseline/2) 0;
-
-        .section-name {
-          @include font-size(19);
-          margin-right: ($baseline/2);
-        }
-
-        .section-name-span {
-          @include transition(color $tmg-f2 linear 0s);
-          cursor: pointer;
+    }
 
-          &:hover {
-            color: $blue;
-          }
-        }
+    // STATE: is-collapsed
+    &.is-collapsed {
+      border-left: ($baseline/4) solid $color-draft;
+    }
 
-        .section-name-edit {
-          position: relative;
-          width: ($baseline*20);
-          background: $white;
-
-          input {
-            @include font-size(16);
-          }
-
-          .save-button {
-            @include blue-button;
-            padding: 7px $baseline 7px;
-            margin-right: ($baseline/4);
-          }
-
-          .cancel-button {
-            @include white-button;
-            padding: 7px $baseline 7px;
-          }
-        }
-      }
+    // CASE: is published by not released
+    &.is-published {
+      border-left-color: $color-published;
 
 
-      // section specific action styles
-      .item-actions {
-        position: relative;
-        display: inline-block;
-        float: right;
-        margin-bottom: ($baseline/2);
-        top: 0;
+    &.is-published.is-released {
+        border-left-color: $color-released;
       }
+    }
 
-      .actions-item {
-        padding: 0 0 0 8px;
-
-        &:last-child {
-          padding-right: 4px;
-        }
-
-        &.pubdate {
-          padding-right: 0;
-        }
-
-        .action {
+    // CASE: has staff-only content
+    &.has-staff-only {
+      border-left-color: $color-staff-only;
+    }
 
-          &.pubdate {
-            visibility: hidden;
-          }
+    // CASE: has changes
+    &.is-published.is-released.has-changes, // needed for poor specificity
+    &.has-changes {
+      border-left-color: $color-warning;
 
-          &:hover,
-          &.is-set {
-            color: $blue;
-            visibility: visible;
-          }
-        }
+      .section-status .status-message {
 
-        .section-published-date {
-          padding: ($baseline/5) ($baseline/2);
-          border-radius: 3px;
-          background: $gray-l5;
-          text-align: right;
-
-          .published-status {
-            @include font-size(12);
-            margin-right: 15px;
-
-            strong {
-              font-weight: bold;
-            }
-          }
-
-          &.released .section-published-date {
-            background-color: transparent;
-            color: $gray-l1;
-
-            a {
-              color: $gray-l2;
-
-              &:hover {
-                color: $blue;
-              }
-            }
-          }
+        *[class^='icon-'] {
+          color: $color-warning;
         }
       }
     }
-  }
-
 
-  // subsection styles
-  .courseware-subsection {
-    @include clearfix();
-    padding: 3px 0;
+    // CASE: has errors
+    &.is-published.is-released.has-errors, // needed for poor specificity
+    &.has-errors {
+      border-left-color: $color-error;
 
-    &.visible {
-      border-left: 5px solid $green;
+      .section-status .status-message {
+        color: $color-error;
+      }
     }
 
-    &.mixed {
-      border-left: 5px solid $yellow-s1;
+    // header
+    .section-header {
+      @include clearfix();
     }
 
-    .status {
-      @extend %cont-text-sr;
+    .section-header-details {
+      float: left;
+      width: flex-grid(6, 9);
     }
 
-    .section-item {
-      @include transition(background $tmg-avg ease-in-out 0);
-      @include font-size(13);
-      position: relative;
-      display: block;
-      background-color: $gray-l5;
-      padding: 6px 8px 8px 16px;
-
-      &:hover {
-        background: $blue-l5;
-
-        .item-actions {
-          display: block;
-        }
-      }
+    .section-header-actions {
+      float: right;
+      width: flex-grid(3, 9);
+      text-align: right;
 
-      &.editing {
-        background: $orange-l4;
+      .actions-list {
+        @extend %actions-list;
+        @extend %t-action2;
+        // margin-right: ($baseline*1.25);
       }
     }
 
-    .details {
-      display: block;
-      margin-bottom: 0;
-      width: 600px;
-
-      a {
-        color: $baseFontColor;
-      }
+    // header - title
+    .section-title {
+      @extend %t-title5;
+      @extend %t-strong;
+      color: $color-heading-base;
     }
-  }
-
-  // gradable drop down
-  .gradable-status {
-    display: inline-block;
-    position: relative;
 
-    .status-label {
-      @include font-size(12);
-      width: 110px;
-      padding: 5px 40px 5px 10px;
-      border-radius: 3px;
-      color: transparent;
-      text-align: right;
-      font-weight: bold;
-      line-height: 16px;
+    // status
+    .section-status {
+      @extend %t-copy-sub2;
+      margin: 0 0 0 $outline-indent-width;
+      color: $color-copy-base;
     }
 
-    .menu-toggle {
-      @extend %ui-depth1;
-      position: absolute;
-      top: 0;
-      right: 5px;
-      padding: 2px 5px;
-      color: $gray-l2;
-
-      &:hover,
-      &.is-active {
-        color: $blue;
-      }
+    // status - release
+    .status-release {
+      display: inline-block;
+      vertical-align: middle;
 
-      &:focus {
-        outline: 0;
+      *[class^='icon-'] {
+        margin-right: ($baseline/4);
       }
     }
 
-
-    // gradable dropdown menu default
-    .menu {
-      @include font-size(12);
-      @include transition(opacity $tmg-f2 linear 0s);
-      display: none;
-      opacity: 0.0;
-      z-index: 1;
-      position: absolute;
-      top: -4px;
-      right: 0;
-      margin: 0;
-      box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
-      border: 1px solid $gray-l2;
-      border-radius: 4px;
-      padding: 8px 12px;
-      background: $white;
-
-      li {
-        width: 115px;
-        margin-bottom: 3px;
-        border-bottom: 1px solid $gray-l4;
-        padding-bottom: 3px;
-
-        &:last-child {
-          margin-bottom: 0;
-          border: none;
-          padding-bottom: 0;
-
-          .gradable-status-notgraded {
-            color: $gray;
-          }
-        }
-      }
-
-      a {
-        color: $blue;
-
-        &.is-selected {
-          font-weight: bold;
-        }
-      }
+    // status - grading
+    .status-grading {
+      display: inline-block;
+      vertical-align: middle;
+      margin-left: ($baseline/2);
     }
 
-    // gradable dropdown state
-    &.is-active {
-
-      .menu {
-        @extend %ui-depth3;
-        display: block;
-        opacity: 1.0;
-      }
+    .status-grading-value {
+      display: inline-block;
+      vertical-align: middle;
+    }
 
-      .menu-toggle {
-        @extend %ui-depth4;
-      }
+    .status-grading-date {
+      display: inline-block;
+      vertical-align: middle;
+      margin-left: ($baseline/4);
     }
 
-    // set state
-    &.is-set {
+    // status - message
+    .status-message {
+      margin-top: ($baseline/2);
+      border-top: 1px solid $gray-l4;
+      padding-top: ($baseline/4);
 
-      .menu-toggle {
-        color: $blue;
+      *[class^='icon-'] {
+        margin-right: ($baseline/4);
       }
+    }
 
-      .status-label {
-        display: block;
-        color: $blue;
-      }
+    .status-message-copy {
+      display: inline-block;
     }
   }
 
-  .courseware-subsection .sortable-unit-list {
-    margin: ($baseline/4) 0 0 0;
+  // subsections
+  // --------------------
+  .list-subsections {
+    margin: $baseline 0 0 0;
   }
 
-  // unit styles
-  .courseware-unit {
-    margin: -1px 0 0 ($baseline*1.75);
+  .outline-subsection {
+    margin-bottom: ($baseline/2);
+    border: 1px solid $gray-l4;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    padding: ($baseline/2) ($baseline*0.75);
 
-    &.add-new-unit {
-      margin: 5px ($baseline*1.75) 0 ($baseline*1.75);
+    // CASE: last-child in UI
+    &:last-child {
+      margin-bottom: 0;
     }
 
-    .section-item {
-      border: 0;
-      background-color: $white;
+    // STATE: is-collapsed
+    &.is-collapsed {
+      border-left: ($baseline/4) solid $color-draft;
     }
 
-    .public-item {
-      color: $black;
+    // header
+    .subsection-header {
+      @include clearfix();
     }
 
-    .private-item {
-      color: $gray-l1;
+    .subsection-header-details {
+      float: left;
+      width: flex-grid(6, 9);
     }
 
-    .draft-item {
-      color: $yellow-d1;
-    }
+    .subsection-header-actions {
+      float: right;
+      width: flex-grid(3, 9);
+      text-align: right;
 
-    .draft-item:after,
-    .public-item:after,
-    .private-item:after {
-      @include font-size(9);
-      margin-left: 3px;
-      font-weight: 600;
-      text-transform: uppercase;
+      .actions-list {
+        @extend %actions-list;
+        @extend %t-action2;
+        margin-right: ($baseline/2);
+      }
     }
 
-    .draft-item:after {
-      content: "- draft";
+    // header - title
+    .subsection-title {
+      @extend %t-title6;
+      color: $color-heading-base;
     }
 
-    .private-item:after {
-      content: "- private";
+    // status
+    .subsection-status {
+      @extend %t-copy-sub2;
+      margin: -($baseline/4) 0 0 $outline-indent-width;
+      color: $color-copy-base;
     }
   }
 
+  // units
+  // --------------------
+  .list-units {
+    margin: $baseline 0 0 0;
+  }
 
+  .outline-unit {
+    margin-left: $outline-indent-width;
+    margin-bottom: ($baseline/2);
+    border: 1px solid $gray-l4;
+    padding: ($baseline/4) ($baseline/2);
 
-  // modal to edit section publish settings
-  // basic non-backbone modal-window set-up
-  .wrapper-modal-window {
-    @extend %ui-depth4;
-    @include transition(all $tmg-f2 ease-in-out);
-    visibility: hidden;
-    pointer-events: none;
-    display: none;
-    position: fixed;
-    top: 0;
-    overflow: scroll;
-    background: $black-t2;
-    width: 100%;
-    height: 100%;
-    text-align: center;
-
-    &:before {
-      content: '';
-      display: inline-block;
-      height: 100%;
-      vertical-align: middle;
-      margin-right: -0.25em; /* Adjusts for spacing */
+    // CASE: last-child in UI
+    &:last-child {
+      margin-bottom: 0;
     }
 
-    .modal-window {
-      -webkit-transform: translate(-50%, -50%);
-      transform: translate(-50%, -50%);
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      opacity: 0;
+    // header
+    .unit-header {
+      @include clearfix();
+      // margin-bottom: ($baseline/4);
     }
-  }
 
-  // modal-window showing/hiding
-  &.modal-window-is-shown {
-    overflow: hidden;
+    .unit-header-details {
+      float: left;
+      width: flex-grid(6, 9);
+      margin-top: ($baseline/4);
+    }
 
-    .wrapper-modal-window.is-shown {
-      visibility: visible;
-      pointer-events: auto;
-      display: block;
+    .unit-header-actions {
+      float: right;
+      width: flex-grid(3, 9);
+      text-align: right;
 
-      .modal-window {
-        opacity: 1.0;
+      .actions-list {
+        @extend %actions-list;
+        @extend %t-action2;
       }
     }
-  }
-
-  .edit-section-publish-settings {
-
-    .picker {
-      @include clearfix();
-
-
-      .field {
-        float: left;
-        margin: 0 ($baseline/2) ($baseline/2);
 
-        label,
-        input {
-          display: block;
-          text-align: left;
-        }
-
-        label {
-          @extend %t-copy-sub1;
-          margin-bottom: ($baseline/4);
-          font-weight: 600;
-        }
+    // header - title
+    .unit-title {
+      @extend %t-title7;
+      color: $color-heading-base;
+    }
 
-        input[type="text"] {
-          @extend %t-copy-sub1;
-        }
-      }
+    .unit-status {
+      @extend %t-copy-sub2;
+      margin-left: $outline-indent-width;
+      color: $color-copy-base;
     }
   }
 
 
+  // UI: drag and drop
+
 
-  // UI: DnD - specific elems/cases - section
+  // UI: drag and drop: section
+  // --------------------
   .courseware-section {
 
     .draggable-drop-indicator-before {
@@ -613,7 +422,7 @@
     }
   }
 
-  // UI: DnD - specific elems/cases - subsection
+  // UI: drag and drop: subsection
   .courseware-subsection {
 
     .draggable-drop-indicator-before {
@@ -638,7 +447,7 @@
     }
   }
 
-  // UI: DnD - specific elems/cases - unit
+  // // UI: drag and drop: unit
   .courseware-unit {
 
     .draggable-drop-indicator-before {
@@ -658,7 +467,7 @@
     }
   }
 
-  // UI: DnD - specific elems/cases - empty parents splint
+  // UI: drag and drop: splints
   .ui-splint-indicator {
     position: relative;
   }
diff --git a/cms/templates/ux/reference/outline.html b/cms/templates/ux/reference/outline.html
new file mode 100644
index 000000000000..b5562d3f6ef7
--- /dev/null
+++ b/cms/templates/ux/reference/outline.html
@@ -0,0 +1,752 @@
+<%inherit file="../../base.html" />
+<%!
+from django.core.urlresolvers import reverse
+%>
+<%block name="title">[template] Course Outline UI</%block>
+<%block name="bodyclass">is-signedin course view-outline</%block>
+
+<%block name="content">
+
+<div id="content">
+
+  <div class="wrapper-mast wrapper">
+    <header class="mast has-actions has-subtitle">
+      <h1 class="page-header">
+        <small class="subtitle">Content</small>
+        <span class="sr">&gt; </span>Course Outline
+      </h1>
+
+      <nav class="nav-actions">
+        <h3 class="sr">Page Actions</h3>
+        <ul>
+          <li class="nav-item">
+            <a href="#" class="toggle-button toggle-button-expand-collapse collapse-all">
+              <span class="collapse-all"><i class="icon-arrow-up"></i> <span class="label">Collapse All Sections</span></span>
+              <span class="expand-all"><i class="icon-arrow-down"></i> <span class="label">Expand All Sections</span></span>
+            </a>
+          </li>
+          <li class="nav-item">
+            <a href="#" class="button view-button add-button" data-category="chapter" data-parent="" data-default-name="">
+              <i class="icon-plus"></i>Add Section
+            </a>
+          </li>
+          <li class="nav-item">
+            <a href="" rel="external" class="button view-button view-live-button" title="This link will open in a new browser window/tab">View Live</a>
+          </li>
+        </ul>
+      </nav>
+    </header>
+  </div>
+
+  <div class="wrapper-content wrapper">
+    <section class="content">
+
+      <article class="content-primary" role="main">
+
+        <div class="wrapper-dnd">
+          <article class="outline" data-locator="" data-course-key="">
+            <h2 class="sr outline-title">Your Course's Outline</h2>
+
+            <ol class="list-sections is-sortable">
+
+              <!-- section -->
+              <li class="outline-item outline-section is-collapsible is-draggable" data-parent="" data-locator="">
+
+                <%include file="outline_section_header-expanded.html" />
+
+                <div class="section-status">
+                  <%include file="outline_status_release-scheduled.html" />
+                </div>
+                <!-- /section-status -->
+
+                <div class="section-content">
+                  <ol class="list-subsections is-sortable">
+                    <!-- subsection -->
+                    <li class="outline-item outline-subsection is-collapsible is-draggable" data-parent="" data-locator="">
+
+                      <%include file="outline_subsection_header-expanded.html" />
+
+                      <div class="subsection-status">
+                        <%include file="outline_status_release-scheduled.html" />
+
+                        <%include file="outline_status_grading.html" />
+                      </div>
+                      <!-- /subsection-status -->
+
+                      <div class="subsection-content">
+                        <ol class="list-units is-sortable">
+                          <!-- unit -->
+                          <li class="outline-item outline-unit is-draggable" data-parent="" data-locator="">
+                            <%include file="outline_unit_header.html" />
+                          </li>
+                        </ol>
+                        <!-- /list: units -->
+                      </div>
+                      <!-- /subsection-content -->
+
+                      <%include file="outline_add-unit.html" />
+                    </li>
+                    <!-- /subsection -->
+                  </ol>
+                  <!-- /list: subsections -->
+
+                  <%include file="outline_add-subsection.html" />
+
+                </div>
+                <!-- /section-content -->
+              </li>
+              <!-- /section -->
+            </ol>
+            <!-- /list: sections -->
+
+            <%include file="outline_add-section.html" />
+
+
+            <!-- ========== -->
+
+
+            <!-- STATES: sections -->
+            <ol class="list-sections is-sortable">
+
+              <!-- section: not published + not scheduled/released -->
+              <li class="outline-item outline-section is-collapsible is-draggable is-collapsed" data-parent="" data-locator="">
+
+                <%include file="outline_section_header-collapsed.html" />
+
+                <div class="section-status">
+                  <%include file="outline_status_release-draft.html" />
+                </div>
+                <!-- /section-status -->
+
+                <div class="section-content">
+                  <!-- subsections + units here -->
+                </div>
+              </li>
+               <!-- /section: not published + not scheduled/released -->
+
+              <!-- section: not published + release date in future -->
+              <li class="outline-item outline-section is-collapsible is-draggable is-scheduled is-collapsed" data-parent="" data-locator="">
+
+                <%include file="outline_section_header-collapsed.html" />
+
+                <div class="section-status">
+                  <%include file="outline_status_release-scheduled.html" />
+                </div>
+                <!-- /section-status -->
+
+                <div class="section-content">
+                  <!-- subsections + units here -->
+                </div>
+              </li>
+              <!-- /section: not published + release date in future -->
+
+              <!-- section: not published + release date in past -->
+              <li class="outline-item outline-section is-collapsible is-draggable is-released is-scheduled  is-collapsed" data-parent="" data-locator="">
+
+                <%include file="outline_section_header-collapsed.html" />
+
+                <div class="section-status">
+                  <%include file="outline_status_release-released.html" />
+                </div>
+                <!-- /section-status -->
+
+                <div class="section-content">
+                  <!-- subsections + units here -->
+                </div>
+              </li>
+              <!-- /section: not published + release date in past -->
+
+              <!-- section: published + scheduled -->
+              <li class="outline-item outline-section is-collapsible is-draggable is-published is-scheduled is-collapsed" data-parent="" data-locator="">
+
+                <%include file="outline_section_header-collapsed.html" />
+
+                <div class="section-status">
+                  <%include file="outline_status_release-scheduled.html" />
+                </div>
+                <!-- /section-status -->
+
+                <div class="section-content">
+                  <!-- subsections + units here -->
+                </div>
+              </li>
+              <!-- /section: published + scheduled -->
+
+              <!-- section: published + released -->
+              <li class="outline-item outline-section is-collapsible is-draggable is-published is-released is-scheduled is-collapsed" data-parent="" data-locator="">
+
+                <%include file="outline_section_header-collapsed.html" />
+
+                <div class="section-status">
+                  <%include file="outline_status_release-released.html" />
+                </div>
+                <!-- /section-status -->
+
+                <div class="section-content">
+                  <!-- subsections + units here -->
+                </div>
+              </li>
+              <!-- /section: published + released -->
+
+              <!-- section: published + scheduled + locked content -->
+              <li class="outline-item outline-section is-collapsible is-draggable is-published is-scheduled is-collapsed" data-parent="" data-locator="">
+
+                <%include file="outline_section_header-collapsed.html" />
+
+                <div class="section-status">
+                  <%include file="outline_status_release-scheduled.html" />
+
+                  <%include file="outline_status_message-lock.html" />
+                </div>
+                <!-- /section-status -->
+
+                <div class="section-content">
+                  <!-- subsections + units here -->
+                </div>
+              </li>
+              <!-- /section: published + scheduled + locked content -->
+
+              <!-- section: published + released + locked content -->
+              <li class="outline-item outline-section is-collapsible is-draggable is-published is-released is-scheduled is-collapsed" data-parent="" data-locator="">
+
+                <%include file="outline_section_header-collapsed.html" />
+
+                <div class="section-status">
+                  <%include file="outline_status_release-released.html" />
+
+                  <%include file="outline_status_message-lock.html" />
+                </div>
+                <!-- /section-status -->
+
+                <div class="section-content">
+                  <!-- subsections + units here -->
+                </div>
+              </li>
+              <!-- /section: published + released + locked content -->
+
+              <!-- section: locked content -->
+              <li class="outline-item outline-section is-collapsible is-draggable has-staff-only is-collapsed" data-parent="" data-locator="">
+
+                <%include file="outline_section_header-collapsed.html" />
+
+                <div class="section-status">
+                  <%include file="outline_status_release-lock.html" />
+                </div>
+                <!-- /section-status -->
+
+                <div class="section-content">
+                  <!-- subsections + units here -->
+                </div>
+              </li>
+              <!-- /section: locked content -->
+
+              <!-- section: published + released + has changes -->
+              <li class="outline-item outline-section is-collapsible is-draggable is-published is-released has-changes is-collapsed" data-parent="" data-locator="">
+
+                <%include file="outline_section_header-collapsed.html" />
+
+                <div class="section-status">
+                  <%include file="outline_status_release-released.html" />
+
+                  <%include file="outline_status_message-unpublished_changes.html" />
+                </div>
+                <!-- /section-status -->
+
+                <div class="section-content">
+                  <!-- subsections + units here -->
+                </div>
+              </li>
+              <!-- /section: published + released + has changes -->
+
+              <!-- section: published + scheduled + has changes -->
+              <li class="outline-item outline-section is-collapsible is-draggable is-published is-scheduled has-changes is-collapsed" data-parent="" data-locator="">
+
+                <%include file="outline_section_header-collapsed.html" />
+
+                <div class="section-status">
+                  <%include file="outline_status_release-scheduled.html" />
+
+                  <%include file="outline_status_message-unpublished_changes.html" />
+                </div>
+                <!-- /section-status -->
+
+                <div class="section-content">
+                  <!-- subsections + units here -->
+                </div>
+              </li>
+              <!-- /section: published + scheduled + has changes -->
+
+              <!-- section: published + released + has error -->
+              <li class="outline-item outline-section is-collapsible is-draggable is-published is-released has-errors is-collapsed" data-parent="" data-locator="">
+
+                <%include file="outline_section_header-collapsed.html" />
+
+                <div class="section-status">
+                  <%include file="outline_status_release-released.html" />
+
+                  <%include file="outline_status_message-error.html" />
+                </div>
+                <!-- /section-status -->
+
+                <div class="section-content">
+                  <!-- subsections + units here -->
+                </div>
+              </li>
+              <!-- /section: published + released + has error -->
+
+              <!-- section: published + scheduled + has error -->
+              <li class="outline-item outline-section is-collapsible is-draggable is-published is-scheduled has-errors is-collapsed" data-parent="" data-locator="">
+
+                <%include file="outline_section_header-collapsed.html" />
+
+                <div class="section-status">
+                  <%include file="outline_status_release-scheduled.html" />
+
+                  <%include file="outline_status_message-error.html" />
+                </div>
+                <!-- /section-status -->
+
+                <div class="section-content">
+                  <!-- subsections + units here -->
+                </div>
+              </li>
+              <!-- /section: published + scheduled + has error -->
+
+
+              <!-- ========== -->
+
+
+              <!-- section: placeholder -->
+              <li class="outline-item outline-section is-collapsible is-draggable" data-parent="" data-locator="">
+
+                <%include file="outline_section_header-expanded.html" />
+
+                <div class="section-status">
+                  <%include file="outline_status_release-draft.html" />
+                </div>
+                <!-- /section-status -->
+
+                <div class="section-content">
+                  <ol class="list-subsections is-sortable">
+                    <!-- subsection: not published + not scheduled/released -->
+                    <li class="outline-item outline-subsection is-collapsible is-draggable is-collapsed" data-parent="" data-locator="">
+
+                      <%include file="outline_subsection_header-collapsed.html" />
+
+                      <div class="subsection-status">
+                        <%include file="outline_status_release-draft.html" />
+                      </div>
+                      <!-- /subsection-status -->
+
+                      <div class="subsection-content">
+                        <!-- units here  -->
+                      </div>
+                      <!-- /subsection-content -->
+                    </li>
+                    <!-- /subsection: not published + not scheduled/released -->
+
+                    <!-- subsection: not published + not scheduled/released + graded -->
+                    <li class="outline-item outline-subsection is-collapsible is-draggable is-graded is-collapsed" data-parent="" data-locator="">
+
+                      <%include file="outline_subsection_header-collapsed.html" />
+
+                      <div class="subsection-status">
+                        <%include file="outline_status_release-draft.html" />
+
+                        <%include file="outline_status_grading.html" />
+                      </div>
+                      <!-- /subsection-status -->
+
+                      <div class="subsection-content">
+                      </div>
+                      <!-- /subsection-content -->
+                    </li>
+                    <!-- /subsection: not published + not scheduled/released + graded -->
+
+                    <!-- subsection: published + scheduled w/ section -->
+                    <li class="outline-item outline-subsection is-collapsible is-draggable is-published is-scheduled is-collapsed" data-parent="" data-locator="">
+
+                      <%include file="outline_subsection_header-collapsed.html" />
+
+                      <div class="subsection-status">
+                        <%include file="outline_status_release-scheduled_with_parent.html" />
+                      </div>
+                      <!-- /subsection-status -->
+
+                      <div class="subsection-content">
+                      </div>
+                      <!-- /subsection-content -->
+                    </li>
+                    <!-- /subsection: published + scheduled w/ section -->
+
+                    <!-- subsection: published + scheduled + graded  -->
+                    <li class="outline-item outline-subsection is-collapsible is-draggable is-published is-scheduled is-collapsed" data-parent="" data-locator="">
+
+                      <%include file="outline_subsection_header-collapsed.html" />
+
+                      <div class="subsection-status">
+                        <%include file="outline_status_release-scheduled.html" />
+
+                        <%include file="outline_status_grading.html" />
+                      </div>
+                      <!-- /subsection-status -->
+
+                      <div class="subsection-content">
+                      </div>
+                      <!-- /subsection-content -->
+                    </li>
+                    <!-- /subsection: published + scheduled + graded -->
+
+                    <!-- subsection: published + scheduled + graded + due date  -->
+                    <li class="outline-item outline-subsection is-collapsible is-draggable is-published is-scheduled is-collapsed" data-parent="" data-locator="">
+
+                      <%include file="outline_subsection_header-collapsed.html" />
+
+                      <div class="subsection-status">
+                        <%include file="outline_status_release-scheduled.html" />
+
+                        <%include file="outline_status_grading.html" />
+                      </div>
+                      <!-- /subsection-status -->
+
+                      <div class="subsection-content">
+                      </div>
+                      <!-- /subsection-content -->
+                    </li>
+                    <!-- /subsection: published + scheduled + graded + due date -->
+
+                    <!-- subsection: published + scheduled + graded + due date + locked content  -->
+                    <li class="outline-item outline-subsection is-collapsible is-draggable is-published is-scheduled is-collapsed" data-parent="" data-locator="">
+
+                      <%include file="outline_subsection_header-collapsed.html" />
+
+                      <div class="subsection-status">
+                        <%include file="outline_status_release-scheduled.html" />
+
+                        <%include file="outline_status_grading.html" />
+
+                        <%include file="outline_status_message-lock.html" />
+                      </div>
+                      <!-- /subsection-status -->
+
+                      <div class="subsection-content">
+                      </div>
+                      <!-- /subsection-content -->
+                    </li>
+                    <!-- /subsection: published + scheduled + graded + due date + locked content -->
+
+                    <!-- subsection: published + released  -->
+                    <li class="outline-item outline-subsection is-collapsible is-draggable is-published is-released is-scheduled is-collapsed" data-parent="" data-locator="">
+
+                      <%include file="outline_subsection_header-collapsed.html" />
+
+                      <div class="subsection-status">
+                        <%include file="outline_status_release-released_with_parent.html" />
+                      </div>
+                      <!-- /subsection-status -->
+
+                      <div class="subsection-content">
+                      </div>
+                      <!-- /subsection-content -->
+                    </li>
+                    <!-- /subsection: published + released -->
+
+                    <!-- subsection: published + released (on specific date) + graded  -->
+                    <li class="outline-item outline-subsection is-collapsible is-draggable is-published is-released is-scheduled is-collapsed" data-parent="" data-locator="">
+
+                      <%include file="outline_subsection_header-collapsed.html" />
+
+                      <div class="subsection-status">
+                        <div class="status-release">
+                          <p>
+                            <span class="sr status-release-label">Release Status:</span>
+                            <span class="status-release-value">
+                              <i class="icon-check-sign"></i>
+                              Released <span class="sr">on</span>:
+                            </span>
+                            <span class="status-release-date">March 25, 2014</span>
+                          </p>
+                        </div>
+
+                        <%include file="outline_status_grading.html" />
+                      </div>
+                      <!-- /subsection-status -->
+
+                      <div class="subsection-content">
+                      </div>
+                      <!-- /subsection-content -->
+                    </li>
+                    <!-- /subsection: published + released (on specific date) + graded -->
+
+                    <!-- subsection: published + released + graded + due date  -->
+                    <li class="outline-item outline-subsection is-collapsible is-draggable is-published is-released is-scheduled is-collapsed" data-parent="" data-locator="">
+
+                      <%include file="outline_subsection_header-collapsed.html" />
+
+                      <div class="subsection-status">
+                        <%include file="outline_status_release-released_with_parent.html" />
+
+                        <%include file="outline_status_grading.html" />
+                      </div>
+                      <!-- /subsection-status -->
+
+                      <div class="subsection-content">
+                      </div>
+                      <!-- /subsection-content -->
+                    </li>
+                    <!-- /subsection: published + released + graded + due date -->
+
+                    <!-- subsection: published + released + graded + due date + locked content  -->
+                    <li class="outline-item outline-subsection is-collapsible is-draggable is-published is-released is-scheduled is-collapsed" data-parent="" data-locator="">
+
+                      <%include file="outline_subsection_header-collapsed.html" />
+
+                      <div class="subsection-status">
+                        <%include file="outline_status_release-released_with_parent.html" />
+
+                        <%include file="outline_status_grading.html" />
+
+                        <%include file="outline_status_message-lock.html" />
+                      </div>
+                      <!-- /subsection-status -->
+
+                      <div class="subsection-content">
+                      </div>
+                      <!-- /subsection-content -->
+                    </li>
+                    <!-- /subsection: published + released + graded + due date + locked content -->
+
+                    <!-- subsection: locked content -->
+                    <li class="outline-item outline-subsection is-collapsible is-draggable is-collapsed" data-parent="" data-locator="">
+
+                      <%include file="outline_subsection_header-collapsed.html" />
+
+                      <div class="subsection-status">
+                        <%include file="outline_status_message-lock.html" />
+                      </div>
+                      <!-- /subsection-status -->
+
+                      <div class="subsection-content">
+                      </div>
+                      <!-- /subsection-content -->
+                    </li>
+                    <!-- /subsection: locked content -->
+
+                    <!-- /subsection: published + scheduled + has changes -->
+                    <li class="outline-item outline-subsection is-collapsible is-draggable is-published is-scheduled has-changes is-collapsed" data-parent="" data-locator="">
+
+                      <%include file="outline_subsection_header-collapsed.html" />
+
+                      <div class="subsection-status">
+                        <%include file="outline_status_release-scheduled.html" />
+
+                        <%include file="outline_status_message-unpublished_units.html" />
+                      </div>
+                      <!-- /subsection-status -->
+
+                      <div class="subsection-content">
+                      </div>
+                      <!-- /subsection-content -->
+                    </li>
+                    <!-- /subsection: published + scheduled + has changes -->
+
+                    <!-- subsection: published + released + has changes -->
+                    <li class="outline-item outline-subsection is-collapsible is-draggable is-published is-released is-scheduled has-changes is-collapsed" data-parent="" data-locator="">
+
+                      <%include file="outline_subsection_header-collapsed.html" />
+
+                      <div class="subsection-status">
+                        <%include file="outline_status_release-released.html" />
+
+                        <%include file="outline_status_message-unpublished_changes.html" />
+                      </div>
+                      <!-- /subsection-status -->
+
+                      <div class="subsection-content">
+                      </div>
+                      <!-- /subsection-content -->
+                    </li>
+                    <!-- /subsection: published + released + has changes -->
+
+                    <!-- subsection: published + released + has error -->
+                    <li class="outline-item outline-subsection is-collapsible is-draggable is-published is-released is-scheduled has-errors is-collapsed" data-parent="" data-locator="">
+
+                      <%include file="outline_subsection_header-collapsed.html" />
+
+                      <div class="subsection-status">
+                        <%include file="outline_status_release-released.html" />
+
+                        <%include file="outline_status_message-error.html" />
+                      </div>
+                      <!-- /subsection-status -->
+
+                      <div class="subsection-content">
+                      </div>
+                      <!-- /subsection-content -->
+                    </li>
+                    <!-- /subsection: published + released + has error -->
+
+                    <!-- subsection: published + scheduled + has error -->
+                    <li class="outline-item outline-subsection is-collapsible is-draggable is-published is-scheduled has-errors is-collapsed" data-parent="" data-locator="">
+
+                      <%include file="outline_subsection_header-collapsed.html" />
+
+                      <div class="subsection-status">
+                        <%include file="outline_status_release-scheduled.html" />
+
+                        <%include file="outline_status_message-error.html" />
+                      </div>
+                      <!-- /subsection-status -->
+
+                      <div class="subsection-content">
+                      </div>
+                      <!-- /subsection-content -->
+                    </li>
+                    <!-- /subsection: published + scheduled + has error -->
+                  </ol>
+                </div>
+              </li>
+              <!-- /section: placeholder -->
+
+
+              <!-- ========== -->
+
+
+              <!-- section: placeholder -->
+              <li class="outline-item outline-section is-collapsible is-draggable" data-parent="" data-locator="">
+
+                <%include file="outline_section_header-expanded.html" />
+
+                <div class="section-status">
+                  <%include file="outline_status_release-draft.html" />
+                </div>
+                <!-- /section-status -->
+
+                <div class="section-content">
+                  <ol class="list-subsections is-sortable">
+                    <!-- subsection: placeholder -->
+                    <li class="outline-item outline-subsection is-collapsible is-draggable" data-parent="" data-locator="">
+
+                      <%include file="outline_subsection_header-expanded.html" />
+
+                      <div class="subsection-status">
+                        <%include file="outline_status_release-scheduled.html" />
+                      </div>
+                      <!-- /subsection-status -->
+
+                      <div class="subsection-content">
+                        <ol class="list-units is-sortable">
+
+                          <!-- unit -->
+                          <li class="outline-item outline-unit is-draggable" data-parent="" data-locator="">
+                            <%include file="outline_unit_header.html" />
+
+                            <div class="unit-status">
+                              <div class="status-message">
+                                <!-- conditional status message here -->
+                              </div>
+                            </div>
+                            <!-- /unit-status -->
+                          </li>
+                          <!-- /unit -->
+
+
+                          <!-- unit: not published -->
+                          <li class="outline-item outline-unit is-draggable" data-parent="" data-locator="">
+                            <%include file="outline_unit_header.html" />
+
+                            <div class="unit-status">
+                              <div class="status-message">
+                                Draft
+                              </div>
+                            </div>
+                            <!-- /unit-status -->
+                          </li>
+                          <!-- /unit: not published -->
+
+                          <!-- unit: published -->
+                          <li class="outline-item outline-unit is-draggable is-published" data-parent="" data-locator="">
+                            <%include file="outline_unit_header.html" />
+                          </li>
+                          <!-- /unit: published -->
+
+                          <!-- unit: not published + locked content -->
+                          <li class="outline-item outline-unit is-draggable is-staff-only" data-parent="" data-locator="">
+                            <%include file="outline_unit_header.html" />
+
+                            <div class="unit-status">
+                              <%include file="outline_status_message-lock.html" />
+                            </div>
+                            <!-- /unit-status -->
+                          </li>
+                          <!-- /unit: not published + locked content -->
+
+                          <!-- unit: published + has changes -->
+                          <li class="outline-item outline-unit is-draggable is-published has-changes" data-parent="" data-locator="">
+                            <%include file="outline_unit_header.html" />
+
+                            <div class="unit-status">
+                              <%include file="outline_status_message-unpublished_changes.html" />
+                            </div>
+                            <!-- /unit-status -->
+                          </li>
+                          <!-- /unit: published + has changes -->
+
+                          <!-- unit: not published + has changes -->
+                          <li class="outline-item outline-unit is-draggable has-changes" data-parent="" data-locator="">
+                            <%include file="outline_unit_header.html" />
+
+                            <div class="unit-status">
+                              <%include file="outline_status_message-unpublished_units.html" />
+                            </div>
+                            <!-- /unit-status -->
+                          </li>
+                          <!-- /unit: not published + has changes -->
+
+                          <!-- unit: has error -->
+                          <li class="outline-item outline-unit is-draggable has-errors" data-parent="" data-locator="">
+                            <%include file="outline_unit_header.html" />
+
+                            <div class="unit-status">
+                              <%include file="outline_status_message-error.html" />
+                            </div>
+                            <!-- /unit-status -->
+                          </li>
+                          <!-- /unit: has error -->
+                        </ol>
+                        <!-- /list: units -->
+                      </div>
+                      <!-- /subsection-content -->
+                    </li>
+                    <!-- /subsection: placeholder -->
+                  </ol>
+                </div>
+              </li>
+              <!-- /section: placeholder -->
+            </ol>
+          </article>
+        </div>
+
+        <div class="ui-loading is-hidden">
+          <p><span class="spin">
+            <i class="icon-refresh"></i></span>
+            <span class="copy">Loading &hellip;</span>
+          </p>
+        </div>
+
+      </article>
+
+      <aside class="content-supplementary" role="complimentary">
+        <div class="bit">
+          <h3 class="title-3">What can I do on this page?</h3>
+          <p>You can create new sections and subsections, set the release date for sections, and create new units in existing subsections.  You can set the assignment type for subsections that are to be graded, and you can open a subsection for further editing.</p>
+
+          <p>In addition, you can drag and drop sections, subsections, and units to reorganize your course.</p>
+        </div>
+      </aside>
+
+    </section>
+  </div>
+
+</div>
+</%block>
diff --git a/cms/templates/ux/reference/outline_add-section.html b/cms/templates/ux/reference/outline_add-section.html
new file mode 100644
index 000000000000..e0ee259d95fb
--- /dev/null
+++ b/cms/templates/ux/reference/outline_add-section.html
@@ -0,0 +1,6 @@
+<div class="add-section">
+  <a href="#" class="action-add" data-category="" data-parent="" data-default-name="New Section">
+    <i class="icon-plus"></i> New Section
+  </a>
+</div>
+<!-- /add-section -->
diff --git a/cms/templates/ux/reference/outline_add-subsection.html b/cms/templates/ux/reference/outline_add-subsection.html
new file mode 100644
index 000000000000..cb9182359e9a
--- /dev/null
+++ b/cms/templates/ux/reference/outline_add-subsection.html
@@ -0,0 +1,6 @@
+<div class="add-subsection">
+  <a href="#" class="action-add" data-category="" data-parent="" data-default-name="New Subsection">
+    <i class="icon-plus"></i> New Subsection
+  </a>
+</div>
+<!-- /add-subsection -->
diff --git a/cms/templates/ux/reference/outline_add-unit.html b/cms/templates/ux/reference/outline_add-unit.html
new file mode 100644
index 000000000000..dea9243218cc
--- /dev/null
+++ b/cms/templates/ux/reference/outline_add-unit.html
@@ -0,0 +1,6 @@
+<div class="add-unit">
+  <a href="#" class="action-add" data-category="" data-parent="" data-default-name="New Unit">
+    <i class="icon-plus"></i> New Unit
+  </a>
+</div>
+<!-- /add-unit -->
diff --git a/cms/templates/ux/reference/outline_section_header-collapsed.html b/cms/templates/ux/reference/outline_section_header-collapsed.html
new file mode 100644
index 000000000000..3773dd9cf1a2
--- /dev/null
+++ b/cms/templates/ux/reference/outline_section_header-collapsed.html
@@ -0,0 +1,34 @@
+<div class="section-header">
+  <h3 class="section-header-details expand-collapse expand" title="Collapse/Expand this Section">
+    <i class="icon-caret-down ui-toggle-expansion"></i>
+    <span class="section-title">Section Name</span>
+  </h3>
+
+  <div class="section-header-actions">
+    <ul class="actions-list">
+      <li class="action-item action-publish">
+        <a href="#" data-tooltip="Publish all content" class="publish-button action-button">
+          <i class="icon-share"></i>
+          <span class="action-button-text sr">Publish all content</span>
+        </a>
+      </li>
+      <li class="action-item action-settings">
+        <a href="#" data-tooltip="Settings" class="settings-button action-button">
+          <i class="icon-cog"></i>
+          <span class="action-button-text sr">Settings</span>
+        </a>
+      </li>
+      <li class="action-item action-delete">
+        <a href="#" data-tooltip="Delete" class="delete-button action-button">
+          <i class="icon-trash"></i>
+          <span class="action-button-text sr">Delete</span>
+        </a>
+      </li>
+      <li class="action-item action-drag">
+        <span data-tooltip="Drag to reorder" class="drag-handle action"></span>
+      </li>
+    </ul>
+  </div>
+</div>
+<!-- /section-header -->
+
diff --git a/cms/templates/ux/reference/outline_section_header-expanded.html b/cms/templates/ux/reference/outline_section_header-expanded.html
new file mode 100644
index 000000000000..4bea8764440e
--- /dev/null
+++ b/cms/templates/ux/reference/outline_section_header-expanded.html
@@ -0,0 +1,34 @@
+<div class="section-header">
+  <h3 class="section-header-details expand-collapse collapse" title="Collapse/Expand this Section">
+    <i class="icon-caret-down ui-toggle-expansion"></i>
+    <span class="section-title">Section Name</span>
+  </h3>
+
+  <div class="section-header-actions">
+    <ul class="actions-list">
+      <li class="action-item action-publish">
+        <a href="#" data-tooltip="Publish all content" class="publish-button action-button">
+          <i class="icon-share"></i>
+          <span class="action-button-text sr">Publish all content</span>
+        </a>
+      </li>
+      <li class="action-item action-settings">
+        <a href="#" data-tooltip="Settings" class="settings-button action-button">
+          <i class="icon-cog"></i>
+          <span class="action-button-text sr">Settings</span>
+        </a>
+      </li>
+      <li class="action-item action-delete">
+        <a href="#" data-tooltip="Delete" class="delete-button action-button">
+          <i class="icon-trash"></i>
+          <span class="action-button-text sr">Delete</span>
+        </a>
+      </li>
+      <li class="action-item action-drag">
+        <span data-tooltip="Drag to reorder" class="drag-handle action"></span>
+      </li>
+    </ul>
+  </div>
+</div>
+<!-- /section-header -->
+
diff --git a/cms/templates/ux/reference/outline_status_grading.html b/cms/templates/ux/reference/outline_status_grading.html
new file mode 100644
index 000000000000..5d1c51c341e7
--- /dev/null
+++ b/cms/templates/ux/reference/outline_status_grading.html
@@ -0,0 +1,8 @@
+<div class="status-grading">
+  <p>
+    <span class="sr status-grading-label">Graded as:</span>
+    <i class="icon-ok"></i>
+    <span class="status-grading-value">Homework</span>
+    <span class="status-grading-date">Due: December 31, 2014</span>
+  </p>
+</div>
diff --git a/cms/templates/ux/reference/outline_status_message-error.html b/cms/templates/ux/reference/outline_status_message-error.html
new file mode 100644
index 000000000000..eb197d0ec831
--- /dev/null
+++ b/cms/templates/ux/reference/outline_status_message-error.html
@@ -0,0 +1,4 @@
+<div class="status-message">
+  <i class="icon-warning-sign"></i>
+  <p class="status-message-copy">Critical error</p>
+</div>
diff --git a/cms/templates/ux/reference/outline_status_message-lock.html b/cms/templates/ux/reference/outline_status_message-lock.html
new file mode 100644
index 000000000000..91f3120bedb4
--- /dev/null
+++ b/cms/templates/ux/reference/outline_status_message-lock.html
@@ -0,0 +1,4 @@
+<div class="status-message">
+  <i class="icon-lock"></i>
+  <p class="status-message-copy">Contains Staff only content</p>
+</div>
diff --git a/cms/templates/ux/reference/outline_status_message-unpublished_changes.html b/cms/templates/ux/reference/outline_status_message-unpublished_changes.html
new file mode 100644
index 000000000000..07cd8b510c27
--- /dev/null
+++ b/cms/templates/ux/reference/outline_status_message-unpublished_changes.html
@@ -0,0 +1,4 @@
+<div class="status-message">
+  <i class="icon-pencil"></i>
+  <p class="status-message-copy">Unpublished change(s) to live content</p>
+</div>
diff --git a/cms/templates/ux/reference/outline_status_message-unpublished_units.html b/cms/templates/ux/reference/outline_status_message-unpublished_units.html
new file mode 100644
index 000000000000..1b91a556dcc8
--- /dev/null
+++ b/cms/templates/ux/reference/outline_status_message-unpublished_units.html
@@ -0,0 +1,4 @@
+<div class="status-message">
+  <i class="icon-pencil"></i>
+  <p class="status-message-copy">Unpublished unit(s) will not be released</p>
+</div>
diff --git a/cms/templates/ux/reference/outline_status_release-draft.html b/cms/templates/ux/reference/outline_status_release-draft.html
new file mode 100644
index 000000000000..c6e802ca8eca
--- /dev/null
+++ b/cms/templates/ux/reference/outline_status_release-draft.html
@@ -0,0 +1,10 @@
+<div class="status-release">
+  <p>
+    <span class="sr status-release-label">Release Status:</span>
+    <span class="status-release-value">
+      <i class="icon-pencil"></i>
+      Draft <span class="sr">that is</span>:
+    </span>
+    <span class="status-release-date">Unscheduled</span>
+  </p>
+</div>
diff --git a/cms/templates/ux/reference/outline_status_release-lock.html b/cms/templates/ux/reference/outline_status_release-lock.html
new file mode 100644
index 000000000000..82edd6817b83
--- /dev/null
+++ b/cms/templates/ux/reference/outline_status_release-lock.html
@@ -0,0 +1,9 @@
+<div class="status-release">
+  <p>
+    <span class="sr status-release-label">Release Status:</span>
+    <span class="status-release-value">
+      <i class="icon-lock"></i>
+      Will never release - Contains Staff only content
+    </span>
+  </p>
+</div>
diff --git a/cms/templates/ux/reference/outline_status_release-released.html b/cms/templates/ux/reference/outline_status_release-released.html
new file mode 100644
index 000000000000..cfc859647891
--- /dev/null
+++ b/cms/templates/ux/reference/outline_status_release-released.html
@@ -0,0 +1,10 @@
+<div class="status-release">
+  <p>
+    <span class="sr status-release-label">Release Status:</span>
+    <span class="status-release-value">
+      <i class="icon-check-sign"></i>
+      Released <span class="sr">on</span>:
+    </span>
+    <span class="status-release-date">March 25, 2014</span>
+  </p>
+</div>
diff --git a/cms/templates/ux/reference/outline_status_release-released_with_parent.html b/cms/templates/ux/reference/outline_status_release-released_with_parent.html
new file mode 100644
index 000000000000..68c7426b1768
--- /dev/null
+++ b/cms/templates/ux/reference/outline_status_release-released_with_parent.html
@@ -0,0 +1,9 @@
+<div class="status-release">
+  <p>
+    <span class="sr status-release-label">Release Status:</span>
+    <span class="status-release-value">
+      <i class="icon-check-sign"></i>
+      Released with Section
+    </span>
+  </p>
+</div>
diff --git a/cms/templates/ux/reference/outline_status_release-scheduled.html b/cms/templates/ux/reference/outline_status_release-scheduled.html
new file mode 100644
index 000000000000..88b83704356b
--- /dev/null
+++ b/cms/templates/ux/reference/outline_status_release-scheduled.html
@@ -0,0 +1,9 @@
+<div class="status-release">
+  <p>
+    <span class="sr status-release-label">Release Status:</span>
+    <span class="status-release-value">
+      <i class="icon-time"></i>
+      Scheduled: October 31, 2014
+    </span>
+  </p>
+</div>
diff --git a/cms/templates/ux/reference/outline_status_release-scheduled_with_parent.html b/cms/templates/ux/reference/outline_status_release-scheduled_with_parent.html
new file mode 100644
index 000000000000..b6e8e3c69172
--- /dev/null
+++ b/cms/templates/ux/reference/outline_status_release-scheduled_with_parent.html
@@ -0,0 +1,9 @@
+<div class="status-release">
+  <p>
+    <span class="sr status-release-label">Release Status:</span>
+    <span class="status-release-value">
+      <i class="icon-time"></i>
+      Scheduled: with Section
+    </span>
+  </p>
+</div>
diff --git a/cms/templates/ux/reference/outline_subsection_header-collapsed.html b/cms/templates/ux/reference/outline_subsection_header-collapsed.html
new file mode 100644
index 000000000000..df4f57db45e2
--- /dev/null
+++ b/cms/templates/ux/reference/outline_subsection_header-collapsed.html
@@ -0,0 +1,33 @@
+<div class="subsection-header">
+  <h3 class="subsection-header-details expand-collapse expand" title="Collapse/Expand this Subsection">
+    <i class="icon-caret-down ui-toggle-expansion"></i>
+    <span class="subsection-title">Subsection Name</span>
+  </h3>
+
+  <div class="subsection-header-actions">
+    <ul class="actions-list">
+      <li class="action-item action-publish">
+        <a href="#" data-tooltip="Publish" class="publish-button action-button">
+          <i class="icon-share"></i>
+          <span class="action-button-text sr">Publish</span>
+        </a>
+      </li>
+      <li class="action-item action-settings">
+        <a href="#" data-tooltip="Settings" class="settings-button action-button">
+          <i class="icon-cog"></i>
+          <span class="action-button-text sr">Settings</span>
+        </a>
+      </li>
+      <li class="action-item action-delete">
+        <a href="#" data-tooltip="Delete" class="delete-button action-button">
+          <i class="icon-trash"></i>
+          <span class="action-button-text sr">Delete</span>
+        </a>
+      </li>
+      <li class="action-item action-drag">
+        <span data-tooltip="Drag to reorder" class="drag-handle action"></span>
+      </li>
+    </ul>
+  </div>
+</div>
+<!-- /subsection-header -->
diff --git a/cms/templates/ux/reference/outline_subsection_header-expanded.html b/cms/templates/ux/reference/outline_subsection_header-expanded.html
new file mode 100644
index 000000000000..8cf6e44c7e57
--- /dev/null
+++ b/cms/templates/ux/reference/outline_subsection_header-expanded.html
@@ -0,0 +1,33 @@
+<div class="subsection-header">
+  <h3 class="subsection-header-details expand-collapse collapse" title="Collapse/Expand this Subsection">
+    <i class="icon-caret-down ui-toggle-expansion"></i>
+    <span class="subsection-title">Subsection Name</span>
+  </h3>
+
+  <div class="subsection-header-actions">
+    <ul class="actions-list">
+      <li class="action-item action-publish">
+        <a href="#" data-tooltip="Publish" class="publish-button action-button">
+          <i class="icon-share"></i>
+          <span class="action-button-text sr">Publish</span>
+        </a>
+      </li>
+      <li class="action-item action-settings">
+        <a href="#" data-tooltip="Settings" class="settings-button action-button">
+          <i class="icon-cog"></i>
+          <span class="action-button-text sr">Settings</span>
+        </a>
+      </li>
+      <li class="action-item action-delete">
+        <a href="#" data-tooltip="Delete" class="delete-button action-button">
+          <i class="icon-trash"></i>
+          <span class="action-button-text sr">Delete</span>
+        </a>
+      </li>
+      <li class="action-item action-drag">
+        <span data-tooltip="Drag to reorder" class="drag-handle action"></span>
+      </li>
+    </ul>
+  </div>
+</div>
+<!-- /subsection-header -->
diff --git a/cms/templates/ux/reference/outline_unit_header.html b/cms/templates/ux/reference/outline_unit_header.html
new file mode 100644
index 000000000000..0b5b6628f192
--- /dev/null
+++ b/cms/templates/ux/reference/outline_unit_header.html
@@ -0,0 +1,32 @@
+<div class="unit-header">
+  <h3 class="unit-header-details">
+    <span class="unit-title">Unit Name</span>
+  </h3>
+
+  <div class="unit-header-actions">
+    <ul class="actions-list">
+      <li class="action-item action-publish">
+        <a href="#" data-tooltip="Publish" class="publish-button action-button">
+          <i class="icon-share"></i>
+          <span class="action-button-text sr">Publish</span>
+        </a>
+      </li>
+      <li class="action-item action-settings">
+        <a href="#" data-tooltip="Settings" class="settings-button action-button">
+          <i class="icon-cog"></i>
+          <span class="action-button-text sr">Settings</span>
+        </a>
+      </li>
+      <li class="action-item action-delete">
+        <a href="#" data-tooltip="Delete" class="delete-button action-button">
+          <i class="icon-trash"></i>
+          <span class="action-button-text sr">Delete</span>
+        </a>
+      </li>
+      <li class="action-item action-drag">
+        <span data-tooltip="Drag to reorder" class="drag-handle action"></span>
+      </li>
+    </ul>
+  </div>
+</div>
+<!-- /unit-header -->
diff --git a/common/static/sass/_mixins.scss b/common/static/sass/_mixins.scss
index 9208b03d8b2d..cdb152b6b6d0 100644
--- a/common/static/sass/_mixins.scss
+++ b/common/static/sass/_mixins.scss
@@ -90,7 +90,7 @@
 // extends - UI - window
 %ui-window {
   @include clearfix();
-  border-radius: 3px;
+  border-radius: ($baseline/10);
   box-shadow: 0 1px 1px $shadow-l1;
   margin-bottom: $baseline;
   border: 1px solid $gray-l2;